Web前端页面设计
第1章 前端开发工具及相关技术
1.1 选题背景及意义
如今的互联网已经渗透到我们生活的每一个层面，网站的内容越来越丰
富全面，以此来满足了各种不同需求的浏览者。网站的作用众所周知人们通过网站快速获取，发布和传递信息。
目前很多高校建立起了自己的网站这些网站的建立使得学校可以突破
传统的媒体的限制在网络上开辟的属于自己的新天地。网络具有超时空性。网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式。超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。网络的超时空性使得网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。
网站的海量存储特性可以从横向和纵向两方面分析：横向看网站往往设
置多个板块，分别放置相关内容。不同板块的信息相互独立，共同构成网站的内容。 纵向看，同一个板块的内部，内容并不是固定不变的，而是不断添加连续更新的。大量的信息使得高校网站成为一个巨大的数据库。
交互性体现在网站通过设置留言板，论坛，发挥网络交互的功能，在我
们的日常生活建立起了交流渠道。
网站正是以这些特点为基础，发挥了自己本身的资源整合，信息传播，
多方交流互动等方面的独特功能，成为一座沟通桥梁。
很多网站内容多姿多彩，板块，内容争妍斗艳。但不外乎以一下几部分
例如：学校介绍，新闻发布，招生信息，就业信息，师资力量，科研成果，机构设置，教学素材等。高校网站的建立和维护需要大量的物力和人力，为何要投入
6
Web前端页面设计
去建网站上？是因为如上所述的网站有的独特特性使得建设高校网站势
在必行我们要创建我们本专业的网站数字媒体技术系的专业网站，网站前端设计最基本的三个技能：HTML，CSS，JavaScript，PS 矢量图像编辑技术。这个是前端开发中最基本也是最 必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。
建立本系网站发挥的作用如下：
(1) 数字媒体技术系网站是数字媒体专业的“商标”。在这个高度信息
化的社会里，建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。
(2) 数字媒体技术系网站巨大的教育资源，网站是实现教育资源分配的
桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教学效率。数字媒体技术系网站能提供教学互动的全新方式，网站使得教师与教师，教师与学生，学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学院同处一室，共同讨论，共同提高。地理上的界限在这里模糊和消失了，数字媒体技术系网站是真正没有围墙的系网站。
(3) 数字媒体技术系网站能够提供个性化的学习平台，不同的学生理解
世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。数字媒体技术系网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。
(4) 数字媒体技术系网站是最佳的教学研究室，数字媒体技术系网站与
教育类专门网站的有效链接，给本系教学研究带来了一片新天地，各种优秀教案，专家论坛，网络观摩课，各科素材，多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本，提高效率。
7
Web前端页面设计
1.2 前端开发工具
(1) MyEclipse简介
MyEclipse企业级工作平台（MyEclipse Enterprise Workbench ，简称
MyEclipse）是对EclipseIDE的扩展，利用它我们可以在数据库和JavaEE的开发，发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的JavaEE集成开发环境，包括了完备的编码，调试，测试和发布功能，完整支持HTML，Struts，JSP，CSS，JavaScript，Spring，SQL，Hibernate。
MyEclipse[4]结构上的这种模块化，可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级。
简单而言，MyEclipse是Eclipse的插件，也是一款功能强大的JavaEE
集成开发环境，支持代码编写，配置，测试以及除错，MyEclipse6。0以前版本需先安装Eclipse。MyEclipse6。0以后版本安装时不需安装Eclipse。
(2) Dreamweare
Dreamweare是美国MACROMEDIA公司开发的集网页制作和管理网站于一身
的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页[5]。
使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网
页位置或档案名称，Dreamweare 会自动更新所有链接。使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。
(3) Photoshop Adobe
Photoshop，简称“PS”，是一个由Adobe Systems开发和发行的图像处
理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。
8
Web前端页面设计
在网站前端开发过程中需要把图片用Photoshop处理成加载到网站页面
的图片，用Photoshop 制作矢量图形用作网站页面的修饰按钮。
1.3 前端开发相关技术
1.3.1 Java script 简介
Java script的出现，它可以使得信息和用户之间不仅只是一种显示和浏
览的关系，而是实现了一种实时的，动态的，可交互式的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页面的取代。Java script脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎。它是众多脚本语言中较为优秀的一种，它与WWW的结合有效地实现了网络计算和网络计算机的蓝图。无疑Java家族将占领Internet网络的主导地位。因此，尽快掌握java script脚本语言编程方法是我国广大用户日益关心的问题。
1.3.2 Java script 基本特点
(1) 基于对象的语言
java script是一种基于对象的语言，同时也可以看作一种面向对象的。
这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
(2) 简单性
java script的简单性主要体现在：首先它是一种基于Java基本语句和
控制流之上的简单而紧凑的设计， 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。
(3) 安全性
java script是一种安全性语言，它不允许访问本地的硬盘，并不能将数
据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信 息浏览或动态交互。从而有效地防止数据的丢失。
9
Web前端页面设计
(4) 动态性
java script是动态的，它可以直接对用户或客户输入做出响应，无须经
过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标，移动窗口，选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 1.3.3 CSS简介
CSS (层叠样式表)是用来进行网页风格设计的，它简化并扩展了HTML中
的各种标记，使得各个标记的属性更具有一般性和通用性，大大提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
什么是CSS？
CSS中，Cascading是“层叠”的意思，也就是说在同一个Web文档中可
以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。从样式表插入的形式看可以分为3种。(1) 内联式样式表； (2) 嵌入式样式表； (3) 外部式样式表；
CSS的特点
CSS是用来扩展HTML的，而不是用来替换HTML的，也就是说CSS不能脱
离HTML，它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS 使得网页的设计与维护更加高效，这主要表现在以下几个方面：减少图形文件的使用，集中管理样式信息，设定共享样式，将样式分类使用。 1.3.4 JQuery
JQuery[9]是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE
LESS，DO MORE，写更少的代码，做更多的事情。它是轻量级的js库(压
缩后只有21k)，这是其它的js库所不及的，
10