第 1章.网页设计与网站建设基础　　1.

1.1　网页设计基础知识　2
1.1.1　认识网站与网页　2
1.1.2　常见的网站类型　2
1.1.3　常见的网页类型　3
1.1.4　常用的网站结构　3
1.1.5　网页的基本构成元素　4
1.1.6　网页常用术语　5
1.1.7　网页色彩搭配　5
1.1.8　HTML标记语言　7
1.2　课堂案例：创建婚纱摄影网站　9
1.2.1　商业网站开发流程　10
1.2.2　网站制作流程　10
1.2.3　常用网页制作软件　12
1.2.4　创建本地站点　15
1.2.5　编辑站点　15
1.2.6　管理站点和站点文件夹　16
1.3　项目实训　18
1.3.1　赏析电商购物类网站　18
1.3.2　规划并创建“果蔬网”站点　18
1.4　课后练习　19
练习1：规划个人网站　19
练习2：创建“会展中心”站点　20
1.5　技巧提升　20
1．站点命名规则　20
2．网页设计师需要知道的网页设计内容　21
3．网页设计需要遵循的原则　21
4．网站设计时的色彩联想　22

第　2章.使用Photoshop编辑网页图像.. 23.


2.1　课堂案例：处理商品图片展示效果　24
2.1.1　图像处理基础知识　24
2.1.2　旋转并裁剪商品图片　26
2.1.3　修复商品图片　27
2.1.4　使用液化滤镜处理图片　31
2.1.5　调整图片颜色　33
2.1.6　使用滤镜处理图片　34
2.1.7　抠取素材图片　37
2.1.8　为图像添加文本和形状　41
2.2　课堂案例：制作Banner区海报　43
2.2.1　通过图层制作海报　43
2.2.2　设置图层样式　44
2.3　项目实训　45
2.3.1　制作海报广告　45
2.3.2　制作网页广告　47
2.4　课后练习　48
练习1：制作直通车图片　49
练习2：制作“帮助中心”　49
2.5　技巧提升　50
1．快速控制图像显示大小　50
2．快速恢复图像　50
3．使用滤镜注意事项　50
4．使用外部画笔的方法　50

第3章.使用Photoshop设计界面效果图..　51.

3.1　课堂案例：设计“灯具网主页”效果图　52
3.1.1　新建图像文件　52
3.1.2　创建参考线　53
3.1.3　制作网页头部　54
3.1.4　制作网页内容部分　58
3.1.5　设计网页页尾　63
3.2　课堂案例：输出“灯具网主页”效果图　65
3.2.1　创建切片　66
3.2.2　输出切片　67
3.3　项目实训　68
3.3.1　设计“摄影之家”网页效果图　68
3.3.2　设计“订餐网”界面效果　70
3.4　课后练习　71
　练习1：设计婚纱售卖网站首页　71
练习2：设计个人网页效果图　72
3.5　技巧提升　73
1．网页效果图设计技巧　73
2．组合切片　74
3．直接输出为html文件　74

第4章.使用Dreamweaver制作基础网页..　75.

4.1　课堂案例：创建index.html网页　76
4.1.1　创建网页文档　76
4.1.2　设置页面属性　77
4.1.3　保存、预览和关闭网页文档　78
4.2　课堂案例：制作“学校简介”网页　79
4.2.1　添加文字　79
4.2.2　设置文本格式　80
4.2.3　添加水平线　82
4.2.4　添加空格　83
4.3　项目实训　83
4.3.1　制作“优惠券说明”网页　83
4.3.2　制作“服务协议”网页　85
4.4　课后练习　86
练习1：制作“保修服务”网页　87
练习2：制作“代金券说明”网页　87
4.5　技巧提升　88
1．添加日期　88
2．添加滚动文字　88

第5章.为网页添加元素..　89.

5.1　课堂案例：美化“酒店预订”网页　90
5.1.1　插入与编辑图像　90
5.1.2　优化图像　92
5.1.3　创建鼠标经过图像　94
5.1.4　插入Flash动画　95
5.1.5　添加背景音乐　97
5.2　课堂案例：链接“婚纱礼服”网页　98
5.2.1　认识超链接　98
5.2.2　插入文本超链接　100
5.2.3　创建空链接　102
5.2.4　创建图像超链接　102
5.2.5　创建热点图片超链接　103
5.2.6　创建锚点超链接　104
5.2.7　创建电子邮件超链接　105
5.2.8　创建外部超链接　105
5.2.9　创建脚本链接　106
5.3　项目实训　107
5.3.1　制作“科技产品”网页　107
5.3.2　制作“订单”网页　108
5.4　课后练习　110
练习1：制作“服装”网页　110
练习2：制作“产品介绍”网页　111
5.5　技巧提升　112
1．在CSS中定义超链接样式a:link、
　a:visited、a:hover、a:active的顺序　112
2．删除链接图片上的蓝色边框　112
3．设置鼠标移动到文字链接上改变文字的
　大小或颜色　112

第6章.布局网页版面..　113.

6.1　课堂案例：布局“酒店预订”网页　114
6.1.1　创建表格　114
6.1.2　调整表格结构　115
6.1.3　设置表格和单元格　117
6.1.4　在表格中插入内容　118
6.1.5　创建框架和框架集　119
6.1.6　保存框架和框架集　121
6.1.7　设置框架集与框架属性　123
6.1.8　在框架中添加网页　124
6.2　课堂案例：布局“婚纱礼服”网
　首页　125
6.2.1　认识CSS样式　126
6.2.2　认识CSS+DIV布局模式　127
6.2.3　CSS+DIV布局模式的优势　128
6.2.4　插入并编辑DIV　129
6.2.5　创建与编辑CSS样式　131
6.2.6　使用AP Div元素　134
6.3　项目实训　136
6.3.1　制作“歇山园林”网页　136
6.3.2　制作“花店”网页　138
6.4　课后练习　140
练习1：制作“花卉推荐”网页　140
练习2：制作“摄影网”网页　141
6.5　技巧提升　142
1．CSS样式链接　142
2．批量设置AP　Div　142
3．导入表格数据　142

第7章.使用表单和行为..　143.

7.1　课堂案例：制作“学员注册”网页　144
7.1.1　认识表单　144
7.1.2　创建表单　145
7.1.3　插入表单对象　145
7.2　课堂案例：完善网页行为效果　154
7.2.1　行为的基础知识　155
7.2.2　弹出窗口　156
7.2.3　打开浏览器窗口　157
7.2.4　检查表单　158
7.2.5　交换图像　159
7.2.6　添加效果　161
7.3　项目实训　162
7.3.1　制作“会员注册”网页　162
7.3.2　制作“用户注册”网页　164
7.4　课后练习　166
练习1：制作“航班查询”网页　166
练习2：制作搜索条　166
练习3：制作“login.html”登录界面　167
7.5　技巧提升　167
1．表单制作技巧　167
2．快速制作相同结构的网页　168
3．使用库快速完成网页制作　168

第8章.制作ASP动态网页..　169.

8.1　课堂案例：搭建动态网站平台　170
8.1.1　认识动态网页　170
8.1.2　动态网页常用的开发语言　170
8.1.3　动态网页的开发流程　172
8.1.4　认识Web服务器　173
8.1.5　安装与配置IIS　173
8.1.6　使用Access创建数据表　175
8.1.7　创建与配置动态站点　176
8.1.8　创建数据源　178
8.2　课堂案例：制作“发货记录”
　动态网页　180
8.2.1　创建记录集　180
8.2.2　插入动态表格　181
8.2.3　创建记录集导航　182
8.2.4　插入记录　183
8.2.5　删除记录　184
8.3　课堂案例：制作“食孜源”APP页面　184
8.3.1　认识jQuery Mobile　185
8.3.2　创建页面　187
8.3.3　添加jQuery Mobile组件　188
8.4　项目实训　191
8.4.1　制作“用户登录”网页　191
8.4.2　制作jQuery Mobile页面　193
8.5　课后练习　194
练习1：制作网站后台系统　194
练习2：制作手机软件网页　195
8.6　技巧提升　195
1．通过字符串连接数据源　195
2．jQuery　Mobile的主题应用　196

第9章.使用Flash制作网页动画..　197.

9.1　课堂案例：制作横幅广告　198
9.1.1　Flash动画在网页中的应用　198
9.1.2　新建文档并制作动画背景　200
9.1.3　创建基本动画　202
9.1.4　输入文字并编辑动画　205
9.2　课堂案例：制作图片滚动动画　206
9.2.1　制作基本动画效果　207
9.2.2　发布动画　209
9.3　课堂案例：制作网页导航　210
9.3.1　认识ActionScript　211
9.3.2　制作动画背景　211
9.3.3　添加ActionScript语句　212
9.4　项目实训　212
9.4.1　制作网页片头动画　212
9.4.2　制作动态Banner　214
9.5　课后练习　216
练习1：制作玩具网站首页　216
练习2：制作图片轮播动画　216
9.6　技巧提升　217
1．快速删除帧与清除帧　217
2．导出Flash动画为GIF动画　217
3．补间动画与传统补间之间的差异　217
4．事件　218

第　10章.综合案例——制作企业官网.. 219.

10.1　实训目标　220
10.2　专业背景　221
10.3　操作思路　221
10.4　准备工作　222
10.4.1　站点规划　222
10.4.2　素材收集　222
10.5　操作过程　222
10.5.1　使用Photoshop设计网页效果图　222
10.5.2　使用Flash制作图片轮播动画　232
10.5.3　使用Dreamweaver合成网页　234
10.6　项目实训　240
10.6.1　制作“微观多肉植物”网页　240
10.6.2　制作“注册”和“登录”页面　241
10.7　课后练习　243
练习1：制作“产品中心”页面　243
练习2：制作“联系我们”页面　244

附录..　245.

附录1　网页常用设计尺寸　245
附录2　iPhone常用设计尺寸　245
附录3　Android常用设计尺寸　246