网站设计与网页制作立体化项目教程(第4版)

**篇 基本技能篇
任务1 网页体验―城市电子名片页面制作 1
1．1 任务概述 2
1．2 任务思考 3
1．3 任务实施 3
1．3．1 新建网页文件，添加内容 3
1．3．2 链接CSS样式表 3
1．3．3 添加JavaScript特效 4
1．4 相关知识 4
1．4．1 网页相关概念 4
1．4．2 网页制作技术 6
1．4．3 常用开发工具 6
1．4．4 网站建设流程 8
任务2 页面制作―人物介绍页面内容呈现 16
2．1 任务概述 17
2．2 任务思考 17
2．3 任务实施 17
2．3．1 新建网页文件 17
2．3．2 人物介绍文本格式化 18
2．3．3 添加人物图片 19
2．4 相关知识 20
2．4．1 HTML基础 20
2．4．2 HTML标题元素 22
2．4．3 HTML注释元素 23
2．4．4 HTML段落元素 23
2．4．5 HTML格式化元素 25
2．4．6 HTML图片元素 29
任务3 样式设计―人物介绍页面美化 32
3．1 任务概述 33
3．2 任务思考 33
3．3 任务实施 33
3．3．1 链接外部样式表 33
3．3．2 设计样式 34
3．4 相关知识 35
3．4．1 CSS简介 35
3．4．2 CSS语法 36
3．4．3 CSS选择器 37
3．4．4 CSS字体属性 39
3．4．5 CSS文本属性 42
3．4．6 CSS背景属性 44
任务4 图文混排―人物介绍页面布局 50
4．1 任务概述 51
4．2 任务思考 51
4．3 任务实施 51
4．3．1 添加HTML元素 51
4．3．2 图文混排布局 52
4．4 相关知识 53
4．4．1 元素分类 53
4．4．2 CSS盒模型 54
4．4．3 CSS布局模型 62
4．4．4 清除浮动 71
本篇小结 72
第二篇 项目实战篇
任务1 “英博特智能科技”企业网站前期策划 73
1．1 项目立项 74
1．1．1 分析“英博特智能科技”企业网站需求说明书 75
1．1．2 组建项目团队 76
1．2 撰写网站策划书 76
1．2．1 分析确定网站逻辑结构图 78
1．2．2 设计网站界面原型 78
1．2．3 撰写企业网站策划书 82

任务2 “英博特智能科技”企业网站开发准备 85
2．1 设计网站logo 85
2．2 加工图像素材 90
2．3 设计网站首页效果图 93
2．3．1 设置页面大小 95
2．3．2 规划首页内容，设计版式 96
2．3．3 确定配色方案 98
2．3．4 制作网站首页效果图 99
2．4 裁切网站首页效果图 100
2．4．1 创建首页切片 102
2．4．2 编辑首页切片 104
2．4．3 命名首页切片 105
2．4．4 导出首页切片 105
任务3 “英博特智能科技”企业网站首页页面制作 108
3．1 首页整体布局 108
3．1．1 新建项目 110
3．1．2 搭建页面主体结构 110
3．1．3 编写主体结构样式 111
3．2 页头制作 113
3．2．1 页头二列布局 114
3．2．2 logo制作 115
3．2．3 横向导航制作 116
3．2．4 下拉菜单制作 116
3．3 横幅广告制作 128
3．3．1 插入图像 130
3．3．2 样式设计 130
3．3．3 图片放大特效 131
3．4 公司优势制作 134
3．4．1 搭建公司优势模块结构 135
3．4．2 实现三列布局 135
3．4．3 设置图像和文本样式 136
3．5 关于我们制作 137
3．5．1 搭建关于我们模块结构 138
3．5．2 实现二列布局 139
3．5．3 设置文本内容样式 139
3．5．4 轮播图制作 140
3．6 服务范围制作 144
3．6．1 搭建服务范围模块结构 145
3．6．2 实现列表项内部的两列布局 146
3．6．3 实现服务范围弹性布局 147
3．6．4 设置文本内容样式 147
3．7 产品展示制作 148
3．7．1 搭建产品展示模块结构 150
3．7．2 实现三列布局 151
3．7．3 设置文本内容样式 151
3．7．4 设置CSS3过渡效果 151
3．8 案例展示制作 155
3．8．1 搭建案例展示模块结构 156
3．8．2 实现三列布局 157
3．8．3 设置文本内容样式 157
3．8．4 设置CSS3转换效果 158
3．9 新闻中心制作 162
3．9．1 搭建新闻中心模块结构 164
3．9．2 图片特效制作 165
3．9．3 新闻列表制作 166
3．10 合作伙伴制作 168
3．10．1 搭建合作伙伴模块结构 169
3．10．2 设置图片内容样式 170
3．11 页尾制作 172
3．11．1 搭建页尾模块结构 173
3．11．2 分享内容制作 174
3．11．3 联系我们制作 175
3．11．4 版权内容制作 176
3．12 客户服务制作 177
3．12．1 搭建客户服务模块结构 178
3．12．2 图片内容制作 179
3．12．3 弹出菜单制作 179
任务4 “英博特智能科技”企业网站二三级页面制作 183
4．1 产品案例页面制作 183
4．1．1 搭建页面结构 185
4．1．2 竖向导航制作 188
4．1．3 产品案例图文混排制作 190
4．2 产品详细信息页面制作 202
4．2．1 搭建页面结构 205
4．2．2 图文内容设计 205
4．2．3 数据表格设计 206
4．2．4 编写相关样式 208
4．3 应用场景详细信息页面制作 216
4．3．1 搭建页面结构 217
4．3．2 插入音视频 218
4．4 留言页面制作 221
4．4．1 搭建页面结构 223
4．4．2 插入表单元素 223
4．4．3 编写表单样式 224
任务5 “英博特智能科技”企业网站测试与发布 233
5．1 网站测试 233
5．1．1 整体界面测试 234
5．1．2 超链接测试 234
5．1．3 图形测试 234
5．1．4 内容测试 234
5．1．5 浏览器兼容性测试 235
5．1．6 打印机测试 236
5．1．7 显示代码合法性检查 236
5．2 网站发布 252
5．2．1 安装本地服务器 253
5．2．2 在IIS中发布和访问网站 255
5．2．3 申请域名 257
5．2．4 申请虚拟主机 261
5．2．5 使用FTP管理文件 262
任务6 “英博特智能科技”企业网站宣传推广与维护 267
6．1 网站宣传推广 267
6．1．1 搜索引擎推广 269
6．1．2 电子邮件推广 270
6．1．3 网络广告推广 271
6．1．4 分类信息推广 271
6．1．5 微信推广 272
6．1．6 搜索引擎优化工具 272
6．2 网站维护 278
6．2．1 网站日常维护 279
6．2．2 网站内容维护 280
6．2．3 网站安全维护 280
6．2．4 网站基础维护 280
6．2．5 网站服务与回馈 280

任务7 “英博特智能科技”企业网站项目总结 283
7．1 文档的书写与整理 283
7．1．1 撰写网站说明书 284
7．1．2 整理文档 285
7．2 网站展示、交流与评价 285
7．2．1 讨论交流 286
7．2．2 小组自评、互评 286
本篇小结 287
第三篇 岗位能力强化篇
任务1 HTML制作静态网页 288
3．1．1 任务概述 289
3．1．2 任务分析 290
3．1．3 任务实施 291
任务2 HTML实现静态页面内容的呈现 292
3．2．1 任务概述 293
3．2．2 任务分析 294
3．2．3 任务实施 294
任务3 CSS实现网页整体布局 295
3．3．1 任务概述 296
3．3．2 任务分析 296
3．3．3 任务实施 296
任务4 CSS设计页面样式 297
3．4．1 任务概述 298
3．4．2 任务分析 298
3．4．3 任务实施 299
任务5 CSS3实现页面动态交互效果 300
3．5．1 任务概述 301
3．5．2 任务分析 301
3．5．3 任务实施 301
任务6 HTML5制作移动端静态网页 302
3．6．1 任务概述 302
3．6．2 任务分析 303
3．6．3 任务实施 304
任务7 HTML5优化移动端静态网页结构 305
3．7．1 任务概述 306
3．7．2 任务分析 306
3．7．3 任务实施 307
任务8 CSS3新特性制作移动端网页加载动画 308
3．8．1 任务概述 309
3．8．2 任务分析 309
3．8．3 任务实施 310
任务9 CSS3新特性美化移动端页面样式 311
3．9．1 任务概述 311
3．9．2 任务分析 312
3．9．3 任务实施 313
任务10 CSS3自定义资源美化移动端页面元素 314
3．10．1 任务概述 315
3．10．2 任务分析 315
3．10．3 任务实施 316
本篇小结 316