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设计 ………………………………………………………………… 180

8．3．2　网站 Banner设计 ……………………………………………………………… 181

8．4　任务拓展 ……………………………………………………………………………… 181

8．4．1　标志与图案的区别 …………………………………………………………… 181

8．4．2　几种 Logo设计技巧 …………………………………………………………… 182

8．5　练习与实训 …………………………………………………………………………… 183

任务9．实现主页新闻图片轮显及翻滚特效 …………………………………… 185

9．1　任务描述 ……………………………………………………………………………… 185

9．2　核心知识 ……………………………………………………………………………… 186

9．2．1　JavaScript语言特点 …………………………………………………………… 186

9．2．2　JavaScript中的变量 …………………………………………………………… 187

9．2．3　JavaScript中的流程控制语句 ………………………………………………… 190

9．2．4　JavaScript中的方法 …………………………………………………………… 192

9．2．5　JavaScript事件与对象 ………………………………………………………… 196

9．2．6　JavaScript对象基础 …………………………………………………………… 198

9．2．7　常见网页特效 ………………………………………………………………… 206

9．2．8　综合实例 ――实现即时验证效果 …………………………………………… 213

9．3　任务实施 ……………………………………………………………………………… 215

9．3．1　实现图片轮显特效 …………………………………………………………… 215

9．3．2　实现图片向左翻滚特效 ……………………………………………………… 217

9．4　任务拓展 ……………………………………………………………………………… 218

9．4．1　JavaScript中的常见问题 ……………………………………………………… 218

9．4．2　JavaScript几大主流框架 ……………………………………………………… 219

9．5　练习与实训 …………………………………………………………………………… 220

任务10．网页设计与开发综合范例 …………………………………………… 221

10．1　任务描述 …………………………………………………………………………… 221

10．2　核心知识 …………………………………………………………………………… 222

10．2．1　网页内容分析 ……………………………………………………………… 222

10．2．2　网页规划及方案设计 ……………………………………………………… 222

10．2．3　网页 HTML结构设计 ………………………………………………………… 224

10．2．4　网页布局与视觉设计 ……………………………………………………… 227

10．3　任务拓展――网页设计必须注意的问题 ………………………………………… 237

10．4　练习与实训 ………………………………………………………………………… 240

参考文献…………………………………………………………………………… 241

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