目  录

项目 1 网页制作基础知识  1 

1.1 项目描述及分析  1 

1.2 任务 1 优秀网站赏析  2 

1.3 任务 2 网页基础知识  4 

1.3.1 网页和网站的基本 

概念  4 

1.3.2 网页的组成元素  5 

1.3.3 网页相关名词  7 

1.3.4 Web 标准  10 

1.3.5 响应式 Web 设计  11 

1.4 任务 3 网站建设的一般流程  12 

1.4.1 确定网站主题  12 

1.4.2 规划网站结构  12 

1.4.3 收集资料与素材  14 

1.4.4 确定版面布局方式  14 

1.4.5 制作网页  17 

1.4.6 测试与发布网站  18 

1.4.7 推广网站  18 

1.4.8 网站的后期维护  18 

1.5 网页制作入门  18 

1.5.1 HTML5 简介 18 

1.5.2 CSS3 简介  19 

1.5.3 JavaScript 简介  19 

1.5.4 常见浏览器  19 

1.6 网页制作常用开发工具简介  21 

1.6.1 网页制作与编辑工具  21 

1.6.2 页面设计与美化工具  22 

1.7 知识链接  22 

1.7.1 网页制作的基本原则  22 

1.7.2 认识图像  23 

1.7.3 常见的建站方式  25 

实训  26 

项目 2 制作简单网页  27 

2.1 项目描述及分析  27 

2.2 任务 1 进行网站功能设计  29 

2.3 任务 2 设计网站首页原型  29 

2.3.1 认识 Photoshop  29 

2.3.2 制作首页原型  32 

2.3.3 首页原型的切片与 

导出  33 

2.4 任务 3 网页的制作与上传  35 

2.4.1 认识 HBuilder  35 

2.4.2 HBuilder 入门  37 

2.4.3 域名和空间的申请  39 

2.4.4 网站文件的上传  41 

2.5 知识链接  42 

2.5.1 网页中的色彩  42 

2.5.2 网页基本元素的标准和 

使用技巧  44 

实训  45 

项目 3 “太阳岛”旅游网站制作  47 

3.1 项目描述及分析  47 

3.2 任务 1 添加文本  49 

3.3 任务 2 认识 HTML  51 

3.3.1 HTML 文档基本格式  51 

3.3.2 认识 HTML 标签  52 

3.3.3 HTML 常用标签  54 

3.4 任务 3 编辑文本  57 

3.4.1 全国免费电话文本 

设置  57 

3.4.2 最新动态行文本编辑  58 

3.5 任务 4 认识 CSS . 59 

3.5.1 认识 CSS 样式表  60 

3.5.2 创建并使用 CSS 样式 

优化网页源码  63 

3.6 任务 5 设计网站子页  66 

3.7 知识链接——CSS 控制文本 

样式  68

3.8 拓展学习——旅游类网站的 

设计要点  70 

3.8.1 旅游类网站的类型  70 

3.8.2 旅游类网站的设计 

要点  74 

实训  75 

项目 4 “盟院合作”专题网站制作  76 

4.1 项目描述及分析  76 

4.2 任务 1 认识盒子模型  77 

4.3 盒子模型相关属性  78 

4.3.1 盒子边框属性  78 

4.3.2 内边距属性  81 

4.3.3 外边距属性  82 

4.3.4 背景属性  84 

4.3.5 盒子的宽与高  86 

4.4 浮动与定位  87 

4.4.1 元素的浮动  87 

4.4.2 元素的定位  95 

4.5 项 目 制 作  99 

4.5.1 页面布局及定义基础 

样式 99 

4.5.2 页眉制作  101 

4.5.3 “主体”模块制作  104 

4.5.4 页脚制作  109 

4.6 知识链接——补充 CSS 

选择器  111 

4.7 拓展学习——专题网站制 

作的设计要点  113 

实训  114 

项目 5 “艾上乐品”服装网站 

制作  116 

5.1 项目描述及分析  116 

5.2 任务 1 列表标记及嵌套  117 

5.2.1 列表标记  117 

5.2.2 列表的嵌套  121 

5.3 任务 2 CSS 控制列表样式 122 

5.4 任务 3 认识表格标记  124 

5.4.1 表格标记  124 

5.4.2 CSS 控制表格样式  126 

5.5 项目制作  129 

5.5.1 页面布局及定义基础 

样式  129 

5.5.2 制作“头部”导航 

模块  130 

5.5.3 制作 banner 模块和 

“精品展示”模块  131 

5.5.4 制作“版权信息” 

模块  135 

5.6 知识链接——浏览器 

兼容性  135 

5.7 拓展学习——流行时尚类 

网站的设计要点  137 

实训  139 

项目 6 影音网站制作  141 

6.1 任务 1 了解 HTML5 多 

媒体的特性  141 

6.2 任务 2 了解 HTML5 常 

用的多媒体格式  142 

6.2.1 音频格式  142 

6.2.2 视频格式  142 

6.3 任务 3 HTML5 多媒体的 

实现  143 

6.3.1 audio 标签  143 

6.3.2 video 标签  144 

6.3.3 source 标签  144 

6.4 任务 4 HTML5 表单的 

应用  146 

6.4.1 认识表单  146 

6.4.2 HTML5 新增的表单 

属性  147 

6.4.3 HTML5<input>标签  147 

6.5 任务 5 影音网站项目 

描述及分析  148 

6.6 任务 6 添加多媒体文件  150 

6.6.1 添加音频文件  150 

6.6.2 添加视频文件  153 

6.6.3 添加留言模块  154 

6.7 知识链接——音频/视频 

DOM 参考手册  156 

实训  158 

项目 7 “我要回家网”页面制作  159 

7.1 项目描述及分析  159 

7.2 任务 1 JavaScript 概述  161 

7.2.1 JavaScript 简介  161 

7.2.2 JavaScript 引入方式  163 

7.2.3 JavaScript 基本语法  165 

7.2.4 一个简单的 

JavaScript 程序  165 

7.3 任务 2 JavaScript 语言 

基础  166 

7.3.1 关键字和标识符  166 

7.3.2 变量和数据类型  167 

7.3.3 运算符和表达式  171 

7.4 任务 3 程序流程控制  178 

7.4.1 条件语句  178 

7.4.2 循环语句  185 

7.4.3 跳转语句  189 

7.5 任务 4 函数  191 

7.5.1 初识函数  191 

7.5.2 函数的调用  191 

7.5.3 函数中变量的 

作用域  193 

7.6 任务 5 结构布局及样式 

定义  194 

7.6.1 准备工作  194 

7.6.2 制作思路分析  195 

7.6.3 页面结构设计  196 

7.6.4 基础样式定义  196 

7.6.5 CSS/JS 文件引入  197 

7.7 任务 6 制作“头部” 

版块  197 

7.7.1 “头部”版块效果 

分析  197 

7.7.2 “头部”版块制作  198 

7.8 任务 7 制作“导航”版块  202 

7.8.1 “导航”版块效果 

分析  202 

7.8.2 “导航”版块制作  202 

7.9 任务 8 制作 banner 版块 

和“时间”版块  204 

7.9.1 banner 版块和“时 

间”版块效果分析  204 

7.9.2 banner 版块和“时 

间”版块制作  205 

7.10 任务 9 制作“客运信息” 

版块  207 

7.10.1 “客运信息”版块 

效果分析  207 

7.10.2 “客运信息”版块 

制作  207 

7.11 任务 10 制作“底部” 

版块  210 

7.11.1 “底部”版块效果 

分析  210 

7.11.2 “底部”版块制作  211 

7.12 拓展学习——业务类网站 

的设计要点  212 

7.12.1 业务类网站的类型  212 

7.12.2 业务类网站的设计 

要点  213 

实训  214 

项目 8 “延庆外国语学校”页面 

制作  215 

8.1 项目描述及分析  215 

8.2 任务 1 认识对象  217 

8.2.1 什么是对象  217 

8.2.2 对象的属性和方法  218 

8.2.3 创建和删除对象  218 

8.2.4 内置对象  220 

8.3 任务 2 数组对象  225 

8.3.1 初识数组  225 

8.3.2 数组的常见操作  226 

8.3.3 数组的常用属性和 

方法  231 

8.3.4 二维数组  234 

8.4 任务 3 BOM 和 DOM 

对象  235

8.4.1 BOM 对象  235 

8.4.2 DOM 对象  242 

8.5 任务 4 事件处理  248 

8.5.1 什么是事件  248 

8.5.2 事件处理程序的 

调用  249 

8.5.3 鼠标事件  251 

8.5.4 键盘事件  252 

8.5.5 表单事件  254 

8.5.6 页面事件  256 

8.6 任务 5 布局及定义基础 

样式  257 

8.6.1 准备工作  258 

8.6.2 制作思路分析  259 

8.6.3 页面结构设计  260 

8.6.4 基础样式定义  261 

8.6.5 CSS/JS 文件引入  261 

8.7 任务 6 制作“头部及 

导航”版块 261 

8.7.1 “头部”版块效果 

分析  261 

8.7.2 “头部”版块制作  262 

8.8 任务 7 制作 banner 版块  264 

8.8.1 banner 版块效果 

分析  264 

8.8.2 banner 版块制作  264 

8.9 任务 8 制作“学校简介” 

版块  268 

8.9.1 “学校简介”版块 

效果分析  268 

8.9.2 “学校简介”版块 

制作  269 

8.10 任务 9 制作“课程特色” 

版块  272 

8.10.1 “课程特色”版块 

效果分析  272 

8.10.2 “课程特色”版块 

制作  273 

8.11 任务 10 制作“页脚” 

版块  279 

8.11.1 “页脚”版块效果 

分析  279 

8.11.2 “页脚”版块制作  279 

8.12 拓展学习——教育类网 

站的设计要点  280 

8.12.1 教育类网站的类型  280 

8.12.2 教育类网站的设计 

要点  282 

实训  283 

项目 9 网站动态化  284 

9.1 项目描述及分析  284 

9.2 任务 1 认识 CMS  286 

9.2.1 静态网页与动态 

网页  286 

9.2.2 CMS  287 

9.3 任务 2 静态页面模板 

导入  288 

9.3.1 DedeCMS 的安装和 

环境配置  288 

9.3.2 静态页面模板导入  295 

9.3.3 模板的相关概念  297 

9.4 任务 3 DedeCMS 常用 

标签  298 

9.4.1 了解 DedeCMS 中的 

标签  298 

9.4.2 DedeCMS 中的常用 

标签  298 

9.5 任务 4 首页动态化  302 

9.5.1 网站栏目管理  302 

9.5.2 首页动态化  305 

9.6 任务 5 其他页面动态化  313 

9.6.1 列表页（栏目页） 

动态化  313 

9.6.2 内容页动态化  315 

9.7 任务 6 生成静态页面 319 

9.8 知识链接——数据备份与 

还原  320 

实训 322 

项目 10 响应式 Web 设计 323 

10.1 项目描述及分析  323 

10.2 任务 1 认识响应式布局  325 

10.2.1 设计理念  325 

10.2.2 响应式的实现  326 

10.3 任务 2 响应式布局基础 

知识  327 

10.3.1 响应式设计相关 

概念  327 

10.3.2 响应式布局的实现  330 

10.4 任务 3 响应式布局框架  332 

10.4.1 常见的响应式布局 

框架  332 

10.4.2 Bootstrap 简介  333 

10.5 任务 4 认识 Bootstrap  337 

10.5.1 相关概念  337 

10.5.2 CSS 布局  339 

10.5.3 组件  341 

10.6 任务 5 页面响应式布局  346 

10.6.1 项目需求  346 

10.6.2 头部响应式布局  348 

10.6.3 主体部分响应式 

布局  350 

10.6.4 页脚部分响应式 

布局  353 

10.6.5 测试页面  353 

10.7 知识链接——Bootstrap 

中的其他组件  354 

10.7.1 表单  354 

10.7.2 复选框和单选按钮  355 

10.7.3 卡片  356 

实训  357 

参考文献  358