正版 HTML5+CSS3+JavaScript网页设计项目教程 李红梅,杨林根主

绪论…………………………………………………………………………………… 1
任务1 网站主页规划与设计 ……………………………………………………… 7
1.1　任务描述 ………………………………………………………………………………… 7
1.2　核心知识 ………………………………………………………………………………… 8
1.2.1　网页的结构框架 ………………………………………………………………… 8
1.2.2　页面的信息布局 ………………………………………………………………… 16
1.2.3　网页的创意视觉表现 …………………………………………………………… 16
1.2.4　综合实例 ——酷站主页欣赏与分析 …………………………………………… 20
1.3　任务实施 …………………………………………………………………………………22
1.4　任务拓展——网页方案设计技巧 ………………………………………………………24
1.5　练习与实训 ………………………………………………………………………………25
任务2.网站主页HTML结构设计……………………………………………… 26
2.1　任务描述 …………………………………………………………………………………26
2.2　核心知识 …………………………………………………………………………………26
2.2.1　使用 HTML5的十大原因 ………………………………………………………… 26
2.2.2　HTML5网页文档结构和全局属性 ……………………………………………… 29
2.2.3　HTML5页面结构标签 …………………………………………………………… 33
2.2.4　HTML5初级技巧 ………………………………………………………………… 37
2.2.5　综合实例 ——检查浏览器是否支持 HTML5标签 ……………………………… 43
2.3　任务实施 …………………………………………………………………………………44
2.4　任务拓展——常见的 HTML5错误用法………………………………………………… 46
2.5　练习与实训 ………………………………………………………………………………47
任务3.构建网站层叠样式表 …………………………………………………… 48
3.1　任务描述 …………………………………………………………………………………48
3.2　核心知识 …………………………………………………………………………………48
3.2.1　CSS基本语法规则 ……………………………………………………………… 48
3.2.2　样式的引用方式 ………………………………………………………………… 49
3.2.3　选择器分类 ……………………………………………………………………… 49
3.2.4　在 HTML中使用 CSS样式表的方法 …………………………………………… 57
3.2.5　综合实例 ——制作简单的竖型菜单 …………………………………………… 60
3.3　任务实施 …………………………………………………………………………………61
3.4　任务拓展 …………………………………………………………………………………62
3.4.1　CSS2与CSS3的主要区别 ……………………………………………………… 62
3.4.2　CSS的单位 ……………………………………………………………………… 62
3.5　练习与实训 ………………………………………………………………………………64
任务4.网站主页DIV布局 ……………………………………………………… 66
4.1　任务描述 …………………………………………………………………………………66
4.2　核心知识 …………………………………………………………………………………67
4.2.1　CSS盒子模型 …………………………………………………………………… 67
4.2.2　CSS浮动布局 …………………………………………………………………… 68
4.2.3　CSS相对定位 …………………………………………………………………… 73
4.2.4　CSS绝对定位 …………………………………………………………………… 76
4.2.5　综合实例 ——制作歌曲专辑列表 ……………………………………………… 82
4.3　任务实施 …………………………………………………………………………………84
4.4　任务拓展—— DIV+CSS常见错误……………………………………………………… 85
4.5　练习与实训 ………………………………………………………………………………86
任务5.设置网站主页文本与图片样式 ………………………………………… 87
5.1　任务描述 …………………………………………………………………………………87
5.2　核心知识 …………………………………………………………………………………87
5.2.1　设置文本样式 …………………………………………………………………… 87
5.2.2　设置文本布局 …………………………………………………………………… 91
5.2.3　设置颜色及背景 ………………………………………………………………… 94
5.2.4　设置边框显示效果 ……………………………………………………………… 99
5.2.5　图文混排 ……………………………………………………………………… 100
5.2.6　综合实例 ——制作八大行星科普网页 ……………………………………… 103
5.3　任务实施 ……………………………………………………………………………… 109
5.4　任务拓展——文字或图像的旋转、缩放、倾斜、移动 …………………………… 110
5.5　练习与实训 …………………………………………………………………………… 115
任务6.主页导航栏的制作 ……………………………………………………… 116
6.1　任务描述 ……………………………………………………………………………… 116
6.2　核心知识 ……………………………………………………………………………… 117
6.2.1　用 CSS控制超链接样式 ……………………………………………………… 117
6.2.2　用 CSS控制列表样式 ………………………………………………………… 121
6.2.3　综合实例 ——制作多级弹出导航条 ………………………………………… 129
6.3　任务实施 ……………………………………………………………………………… 134
6.4　任务拓展——圆角设计 ……………………………………………………………… 136
6.5　练习与实训 …………………………………………………………………………… 138
任务7.制作网站登录与注册表单 ……………………………………………… 139
7.1　任务描述 ……………………………………………………………………………… 139
7.2　核心知识 ……………………………………………………………………………… 140
7.2.1　表单基本元素的使用 ………………………………………………………… 140
7.2.2　表单高级元素的使用 ………………………………………………………… 149
7.2.3　综合实例 ——注册表单 ……………………………………………………… 154
7.3　任务实施 ……………………………………………………………………………… 157
7.3.1　制作用户登录表单 …………………………………………………………… 157
7.3.2　制作用户注册表单 …………………………………………………………… 158
7.4　任务拓展 ……………………………………………………………………………… 160
7.4.1　表单新增属性各浏览器支持情况 …………………………………………… 160
7.4.2　HTML5中表单提交的几种验证方法 ………………………………………… 160
7.5　练习与实训 …………………………………………………………………………… 162
任务8.设计并制作网站Logo及Banner …………………………………… 163
8.1　任务描述 ……………………………………………………………………………… 163
8.2　核心知识 ……………………………………………………………………………… 163
8.2.1　标志设计基础 ………………………………………………………………… 163
8.2.2　标志的创意构思 ……………………………………………………………… 165
8.2.3　标志设计的基本原则 ………………………………………………………… 170
8.2.4　Banner设计方法与步骤 ……………………………………………………… 174
8.2.5　Banner优秀案例欣赏 ………………………………………………………… 177
8.2.6　综合案例 ——广州亚运会文化、环境、志愿者标志创意阐释 179
8.3　任务实施 ……………………………………………………………………………… 180
8.3.1　网站 Logo设计 …………………………………

李红梅，女，汉族，讲师。1978年出生，湖南湘潭人。2000年西南民族学院大学本科毕业。2005年获得中山大学硕士学位。2001-至今 在广东白云学院任教，主要从事计算机软件专业相关课程的教学工作。发表论文10多篇，主持、参与科研项目多个。多次被评为学院很好教师、中青年骨干。

html5、css3、javascript技术是网页设计的精髓。本书以项目为导向，以工作过程为框架，选取一个完整的网站案例 ――“绿骑士 ”网站，按照网页设计制作的流程，分任务逐步讲述网页设计及制作的技术要点。其目的是让学生通过完成该案例，从而掌握网页设计与制作的实际过程及专业技能。书中给出了大量的经典案例，并对案例作了细致的分析，便于学生理解所学知识，加强实操训练，提高实践能力。