本书採用模组化的项目教学模式编写，教材内容包括14个项目活动、一个拓展提高模组和两个实训参考案例。每个项目模组包括任务、成长加油站、代码解读、实践演练几个环节。 书中每个项目由几个活动任务组成，以活动任务为驱动，激发学生的学习兴趣，让学生从实践过程中掌握网页技术的套用。学生通过学习并完成所创设的项目，能够熟练掌握网页的设计与製作。教材中还植入职业岗位能力、乡土文化等元素，以“胶南旅游网”相关页面製作为主线进行课堂实践，培养学生的综合职业能力。 本书可作为中等职业学校计算机、电子商务、物流等专业的“网页设计与製作”课程的教材，也可作为对网页设计与製作感兴趣的初学者的参考资料。
基本介绍
- 中文名：网页设计与製作
- 外文名：Design and manufacture of Webpage
- 书名：网页设计与製作
- 出版社：人民邮电出版社
- 页数：185页
- 开本：16
- 品牌：人民邮电出版社
- 作者：孙军辉 石发晋
- 出版日期：2013年7月1日
- 语种：简体中文
- ISBN：9787115324580
简介
本书採用模组化的项目教学模式编写，教材内容包括14个项目活动、一个拓展提高模组和两个实训参考案例。每个项目模组包括任务、成长加油站、代码解读、实践演练几个环节。 书中每个项目由几个活动任务组成，以活动任务为驱动，激发学生的学习兴趣，让学生从实践过程中掌握网页技术的套用。学生通过学习并完成所创设的项目，能够熟练掌握网页的设计与製作。教材中还植入职业岗位能力、乡土文化等元素，以“胶南旅游网”相关页面製作为主线进行课堂实践，培养学生的综合职业能力。 本书可作为中等职业学校计算机、电子商务、物流等专业的“网页设计与製作”课程的教材，也可作为对网页设计与製作感兴趣的初学者的参考资料。
前言
项目活动一 初识网页 1
第一节任务一 优秀网页赏析 1
一、优秀网页赏析 2
二、网页的版面布局 3
三、网页的色彩搭配 5
四、网页的基本元素 7
成长加油站 9
实践演练 网页赏析 9
二、网页的版面布局 3
三、网页的色彩搭配 5
四、网页的基本元素 7
成长加油站 9
实践演练 网页赏析 9
第二节 任务二 浏览网页 10
一、WWW服务 11
二、认识网页和网站 11
三、静态网页和动态网页 14
四、常用网页设计软体 15
实践演练 淘宝网页面体验 16
项目活动二 Dreamweaver初体验 18
二、认识网页和网站 11
三、静态网页和动态网页 14
四、常用网页设计软体 15
实践演练 淘宝网页面体验 16
项目活动二 Dreamweaver初体验 18
第三节 任务一 创建和管理站点 18
一、Dreamweaver的工作环境 19
二、站点的创建与管理 20
三、网页页面属性的设定 26
成长加油站 Dreamweaver的操作界面 27
实践演练 胶南旅游——胶南民间艺术网页 28
任务二 HTML语言 30
HTML标记 30
成长加油站 HTML结构 33
实践演练 珠山秀色掩古剎网页 33
二、站点的创建与管理 20
三、网页页面属性的设定 26
成长加油站 Dreamweaver的操作界面 27
实践演练 胶南旅游——胶南民间艺术网页 28
任务二 HTML语言 30
HTML标记 30
成长加油站 HTML结构 33
实践演练 珠山秀色掩古剎网页 33
第四节 任务三 文本操作 35
一、在网页中输入与编辑文本 36
二、在网页中添加与编辑列表 37
代码解读 HTML的列表标记 40
实践演练 大珠山·小珠山网页 40
任务四 图像操作 41
一、在网页中插入和编辑图像 42
二、设定交换图像 43
三、设定图像导航条 44
成长加油站 图像档案的格式 46
实践演练 美图胶南网页 47
项目活动三 表格布局 49
任务一 表格的基本操作 49
成长加油站 表格的基本操作 51
代码解读 52
任务二 表格属性的设定 52
成长加油站 表格相关成长 54
一、表格的属性 54
二、单元格属性 56
三、表格常用的装饰方法 56
实践演练 青岛西海岸度假胜地 57
项目活动四 布局表格 59
任务 设定跟蹤图像 59
成长加油站 跟蹤图像相关成长 61
一、什幺是跟蹤图像 61
二、跟蹤图像的优点 61
三、设定跟蹤图像的步骤 62
实践演练 青岛西海岸度假胜地 63
项目活动五 层的布局 64
任务一 创建层 64
成长加油站 层属性的设定 65
一、层的创建 65
二、属性的设定 65
任务二 套用层 68
成长加油站 层的套用 70
代码解读 HTML的层标记 70
实践演练 青岛西海岸度假胜地 71
项目活动六 框架页面设计与製作 73
任务 使用框架製作网页 73
成长加油站 框架相关知识 77
代码解读 框架代码和浮动框架代码 78
实践演练 青岛西海岸度假胜地 79
项目活动七 超连结与导航栏 81
任务一 常见的几种超连结 81
成长加油站 超连结的概念和路径 84
代码解读 84
任务二 导航条超连结的设定 84
成长加油站 超连结的分类 88
一、超连结的分类（按要连结的档案所处的位置分类） 88
二、超连结的创建 88
实践演练 青岛西海岸度假胜地 89
项目活动八 网页中的动感元素 90
任务一 Flash文本 90
成长加油站 插入Flash文本对象 91
任务二 Flash按钮 92
成长加油站 插入Flash按钮 93
任务三 插入Shockwave影片 94
成长加油站 Shockwave影片的插入 96
代码解读 Flash动画标记 97
实践演练 青岛西海岸度假胜地 97
项目活动九 模板和库 99
任务一 模板的创建 99
成长加油站 模板相关成长 101
一、模板简介 101
二、创建模板 101
任务二 套用模板製作网页 103
成长加油站 105
一、用模板创建网页 105
二、利用模板更新页面 105
三、与模板脱离 105
任务三 库在网页製作中的套用 105
成长加油站 库的基础知识 106
实践演练 青岛西海岸度假胜地 107
项目活动十 表单页面设计与製作 109
任务 表单的製作 109
成长加油站 表单相关成长 114
一、表单 114
二、设定表单结果的处理方式 115
代码解读 表单标记 115
实践演练 留言板 117
项目活动十一 用CSS美化网页 118
任务一 使用CSS样式美化网页文本 118
成长加油站 CSS其他美化设定 119
任务二 使用CSS样式美化表单 120
一、新建CSS样式 120
二、将CSS样式添加到页面 122
三、修改框线效果 122
四、添加各种不同的框线效果 123
成长加油站 CSS相关成长 125
一、CSS的基本语法 125
二、建立CSS样式 126
三、在网页中插入CSS的方法 126
代码解读 去掉文字超连结的下画线和颜色的HTML代码 126
实践演练 珠山秀色掩古剎 127
项目活动十二 特效页面设计与製作 129
任务一 浮动图片的製作 129
任务二 弹出视窗的製作 132
成长加油站 行为和事件的相关成长 134
代码解读 调用JavaScript代码 135
一、JavaScript代码如何加入html页面中 135
二、外部独立的JS档案，链入html代码中，JS档案名称通常是“档案名称.js” 135
实践演练 青岛西海岸度假胜地 136
项目活动十三 整站开发案例解析 137
任务一 读书网案例解析 137
一、读书网 138
二、编辑首页页面 139
三、次页面的编辑 143
任务二 尚实教育网案例解析 145
任务三 电子相册案例解析 151
实践演练 美化网页 155
项目活动十四 发布与维护网站 156
任务一 网站的发布 156
一、发布站点前的準备工作 157
二、发布网站 160
成长加油站 虚拟主机 161
任务二 站点的日常维护 163
成长加油站 网站维护的主要内容 163
实践演练 发布“胶南旅游网”网站 164
拓展提高 网页艺术设计的借鉴与模仿 165
一、网页艺术设计 165
二、借鉴和模仿 168
实训参考实例 170
实例一 旅游信息类网站——琅琊台旅游网网站 170
一、製作琅琊台旅游网首页 170
二、製作二级公司介绍页面 177
实例二 网上商城类网站——茶园网站前台製作 179
一、建立“茶园”站点 180
二、“茶园”首页製作 183
二、在网页中添加与编辑列表 37
代码解读 HTML的列表标记 40
实践演练 大珠山·小珠山网页 40
任务四 图像操作 41
一、在网页中插入和编辑图像 42
二、设定交换图像 43
三、设定图像导航条 44
成长加油站 图像档案的格式 46
实践演练 美图胶南网页 47
项目活动三 表格布局 49
任务一 表格的基本操作 49
成长加油站 表格的基本操作 51
代码解读 52
任务二 表格属性的设定 52
成长加油站 表格相关成长 54
一、表格的属性 54
二、单元格属性 56
三、表格常用的装饰方法 56
实践演练 青岛西海岸度假胜地 57
项目活动四 布局表格 59
任务 设定跟蹤图像 59
成长加油站 跟蹤图像相关成长 61
一、什幺是跟蹤图像 61
二、跟蹤图像的优点 61
三、设定跟蹤图像的步骤 62
实践演练 青岛西海岸度假胜地 63
项目活动五 层的布局 64
任务一 创建层 64
成长加油站 层属性的设定 65
一、层的创建 65
二、属性的设定 65
任务二 套用层 68
成长加油站 层的套用 70
代码解读 HTML的层标记 70
实践演练 青岛西海岸度假胜地 71
项目活动六 框架页面设计与製作 73
任务 使用框架製作网页 73
成长加油站 框架相关知识 77
代码解读 框架代码和浮动框架代码 78
实践演练 青岛西海岸度假胜地 79
项目活动七 超连结与导航栏 81
任务一 常见的几种超连结 81
成长加油站 超连结的概念和路径 84
代码解读 84
任务二 导航条超连结的设定 84
成长加油站 超连结的分类 88
一、超连结的分类（按要连结的档案所处的位置分类） 88
二、超连结的创建 88
实践演练 青岛西海岸度假胜地 89
项目活动八 网页中的动感元素 90
任务一 Flash文本 90
成长加油站 插入Flash文本对象 91
任务二 Flash按钮 92
成长加油站 插入Flash按钮 93
任务三 插入Shockwave影片 94
成长加油站 Shockwave影片的插入 96
代码解读 Flash动画标记 97
实践演练 青岛西海岸度假胜地 97
项目活动九 模板和库 99
任务一 模板的创建 99
成长加油站 模板相关成长 101
一、模板简介 101
二、创建模板 101
任务二 套用模板製作网页 103
成长加油站 105
一、用模板创建网页 105
二、利用模板更新页面 105
三、与模板脱离 105
任务三 库在网页製作中的套用 105
成长加油站 库的基础知识 106
实践演练 青岛西海岸度假胜地 107
项目活动十 表单页面设计与製作 109
任务 表单的製作 109
成长加油站 表单相关成长 114
一、表单 114
二、设定表单结果的处理方式 115
代码解读 表单标记 115
实践演练 留言板 117
项目活动十一 用CSS美化网页 118
任务一 使用CSS样式美化网页文本 118
成长加油站 CSS其他美化设定 119
任务二 使用CSS样式美化表单 120
一、新建CSS样式 120
二、将CSS样式添加到页面 122
三、修改框线效果 122
四、添加各种不同的框线效果 123
成长加油站 CSS相关成长 125
一、CSS的基本语法 125
二、建立CSS样式 126
三、在网页中插入CSS的方法 126
代码解读 去掉文字超连结的下画线和颜色的HTML代码 126
实践演练 珠山秀色掩古剎 127
项目活动十二 特效页面设计与製作 129
任务一 浮动图片的製作 129
任务二 弹出视窗的製作 132
成长加油站 行为和事件的相关成长 134
代码解读 调用JavaScript代码 135
一、JavaScript代码如何加入html页面中 135
二、外部独立的JS档案，链入html代码中，JS档案名称通常是“档案名称.js” 135
实践演练 青岛西海岸度假胜地 136
项目活动十三 整站开发案例解析 137
任务一 读书网案例解析 137
一、读书网 138
二、编辑首页页面 139
三、次页面的编辑 143
任务二 尚实教育网案例解析 145
任务三 电子相册案例解析 151
实践演练 美化网页 155
项目活动十四 发布与维护网站 156
任务一 网站的发布 156
一、发布站点前的準备工作 157
二、发布网站 160
成长加油站 虚拟主机 161
任务二 站点的日常维护 163
成长加油站 网站维护的主要内容 163
实践演练 发布“胶南旅游网”网站 164
拓展提高 网页艺术设计的借鉴与模仿 165
一、网页艺术设计 165
二、借鉴和模仿 168
实训参考实例 170
实例一 旅游信息类网站——琅琊台旅游网网站 170
一、製作琅琊台旅游网首页 170
二、製作二级公司介绍页面 177
实例二 网上商城类网站——茶园网站前台製作 179
一、建立“茶园”站点 180
二、“茶园”首页製作 183