近几年来，随着网际网路的迅猛发展，网页设计技术一直在推陈出新，社会对网页设计人才的需求也十分旺盛。

目前，大部分製作网页的方式，都是运用网页製作软体，这些软体的功能相当强大，使用非常方便，同时推陈出新的速度相当地快。无论是哪一款网页製作软体，最后都是将所製作的网页编码成HTML、CSS、JavaScript。也就是说，从标準化分析，网页可以分为三个部分：结构、表现和行为。结构化标準语言主要有：HTML超文本标记语言、XML可扩展标记语言和 XHTML可扩展超文本标记语言；表现标準语言主要包括 CSS层叠样式表；行为标準主要包括对象模型（如 W3C DOM）、ECMAScript 等。网页设计要符合Web标準实际上就是对网页的结构、表现与行为进行分离——即XHTML、CSS与JavaScript的分离。

因此，本教材教学内容按照网页的结构、表现和行为三个方面进行组织：

项目一、项目二、项目三是对网页设计与製作的概念进行介绍，包括：网页基础知识、网站概念、网页版式设计、网页配色、网页设计软体、网页标準、网页版式分析、Dreamweaver的使用、本地站点的建立和管理、XHTML基础，以及table布局製作网页的过程，主要以基础入门为主。

项目四、项目五是对网页的样式、行为等进行介绍，包括：网页模组化分析、CSS的使用、基于W3C标準网页的製作、JavaScript基础语法、JavaScript在网页中的使用、JavaScript表单验证、JavaScript中正则表达式的使用、jQuery在网页中的使用，以及利用jQuery在网页中实现一些动画效果，主要以提高为主。

项目六是一个完整商业网站设计实例，详细介绍了网站的设计到製作的全过程，从Photoshop设计到基于W3C标準的模组化製作，以及最终网页的发布。通过完整的网站製作项目实例，让学生学会综合运用各方面知识解决问题，完成项目任务，掌握网页设计与製作的职业能力。

对于这些技术的学习，本书打破传统的教材模式，基于“项目导向、任务驱动”的职业教育理念，按照网页的结构、表现和行为展开教学，通过6个项目的製作过程为主线，力求把知识点融会贯通到项目开发的实践中，项目完成后通过进一步拓展实训，让学生学会独立分析问题、解决问题的能力；每个项目根据工作要求又进一步分为若干个任务，通过总共18个任务的完成过程，把教学情境融入任务完成的工作情境中，每个任务按照任务提出、任务分析、任务实施、任务小结四个步骤进行介绍，通过任务完成逐渐引入相关知识的学习，让学生在直观、有趣的任务完成过程中逐渐学会知识；在教材最后，安排了一个完整网站设计的项目实例，让学生学会整合运用各方面的知识，掌握全面的职业能力。

本书按照Web标準，分为网页的结构、表现和行为3个层次展开教学，项目之下分任务，结构清晰、内容翔实、案例丰富、职业特色鲜明。既适合教学，又适合初学者自学；既可以作为计算机相关专业学习网页设计、Web前端设计的教材，又可以作为网页设计和製作很好的工具书。

任务一 网页构成元素分析- 1 -

一、网页基础知识- 2 -

二、网页的发展史- 2 -

三、网页配色- 4 -

任务二 网页的版式分析- 6 -

一、认识网站- 7 -

二、网页设计的常用软体简介- 7 -

三、网页版式设计- 8 -

四、Web标準概述- 9 -

项目拓展实训- 10 -

任务一 本地站点的创建与管理- 13 -

一、初识Dreamweaver CS4- 13 -

二、Dreamweaver CS4的操作环境介绍- 14 -

三、本地站点的规划- 19 -

一、站点的创建- 20 -

二、站点的管理- 22 -

任务二 创建一个简单的网页- 24 -

一、网页中的图像- 25 -

二、网页中的动画- 25 -

一、新建并保存HTML空白网页文档- 25 -

二、编辑HTML文档- 26 -

三、保存并浏览网页- 28 -

项目拓展实训- 29 -

任务一 网页文档的基本结构- 31 -

一、认识HTML- 32 -

二、认识XML- 32 -

三、从HTML转向XHTML- 32 -

四、XHTML基本语法- 33 -

一、认识网页文档声明DOCTYPE- 33 -

二、认识DTD- 34 -

三、网页文档的主体结构- 34 -

四、文档校验- 35 -

任务二 页面内容製作与布局- 37 -

一、区段格式标籤- 37 -

二、字元格式标籤- 38 -

三、列表标籤- 39 -

四、超连结标籤- 40 -

五、图像标籤- 41 -

六、表格标籤- 41 -

七、表单标籤- 42 -

一、网页布局结构设计与製作- 43 -

二、网页素材添加- 45 -

项目拓展实训- 49 -

任务一 DIV + CSS网页布局- 51 -

一、什幺是CSS- 51 -

二、CSS有什幺用- 51 -

三、如何使用CSS- 52 -

四、CSS语法- 53 -

五、选择器- 53 -

六、盒子模型- 54 -

七、background背景属性- 56 -

八、float浮动属性- 56 -

九、clear清除属性- 56 -

一、网页结构分析- 57 -

二、模组化布局- 58 -

任务二 导航製作及背景BANNER- 62 -

一、ul和li- 62 -

二、border框线属性- 62 -

三、文本常用属性- 63 -

一、banner背景製作- 64 -

二、导航製作- 65 -

任务三 列表美化布局- 68 -

一、背景定位- 69 -

二、margin外边距属性- 69 -

三、padding内填充属性- 70 -

一、列表製作- 71 -

二、列表美化- 73 -

任务四 表单美化布局- 74 -

一、表单製作- 76 -

二、表单美化- 77 -

项目拓展实训（一）- 78 -

项目拓展实训（二）- 79 -

任务一 JAVASCRIPT表单验证- 81 -

一、什幺是JavaScript- 81 -

二、JavaScript有什幺用- 81 -

三、如何使用JavaScript- 81 -

四、submit事件- 82 -

五、表单取值- 83 -

六、函式的定义- 84 -

一、表单製作- 84 -

二、利用sumbit事件编写校验函式- 85 -

任务二 JAVASCRIPT正则表达式表单验证- 87 -

一、什幺是正则表达式- 87 -

二、正则表达式语法- 87 -

三、修饰符- 88 -

四、方括弧- 88 -

五、元字元- 89 -

六、量词- 89 -

七、支持正则表达式的 String 对象的方法- 90 -

八、常用正则表达式- 90 -

一、编写校验的数据规则- 91 -

二、利用正则函式校验数据- 92 -

任务三 JQUERY製作选项卡- 96 -

一、什幺是jQuery- 96 -

二、jQuery的使用- 96 -

三、jQuery API的使用- 97 -

一、製作选项卡布局- 98 -

二、为选项卡增加jQuery行为- 101 -

任务四 JQUERY製作5图焦点图- 102 -

一、setInterval的使用- 102 -

一、製作焦点图布局- 103 -

二、为焦点图增加jQuery行为- 105 -

项目拓展实训（一）- 108 -

项目拓展实训（二）- 109 -

任务一 使用PHOTOSHOP设计网站首页布局- 111 -

一、初识Photoshop CS4- 111 -

二、Photoshop CS4的操作环境介绍- 111 -

一、分析网页类别- 119 -

二、确定网页的风格- 119 -

三、编排网页功能结构- 119 -

四、 成品製作- 119 -

任务二 使用PHOTOSHOP完成网站子页布局- 124 -

一、网页设计形式与内容相统一- 125 -

二、网页设计的模组化和可修改性- 125 -

三、网页设计中网页命名要简洁- 125 -

一、确定子页的风格- 125 -

二、成品製作- 126 -

任务三 製作网站首页- 130 -

一、首页结构分析- 130 -

二、模组化布局製作- 131 -

任务四 製作网站子页- 143 -

一、子页结构分析- 143 -

二、模组化布局製作- 143 -

任务五 网站发布- 151 -

一、準备web伺服器- 151 -

二、连线web伺服器- 152 -

三、上传站点- 154 -

四、访问远程站点- 155 -

项目拓展实训- 155 -