HTML5+CSS3+JavaScript网页设计项目教程
生活百科 2023-01-17 20:14生活百科www.aizhengw.cn
HTML5+CSS3+JavaScript网页设计项目教程
内容简介
HTML5、CSS3、JavaScript技术是网页设计的精髓。本书以项目为导向，以工作过程为框架，选取一个完整的网站案例 ——“绿骑士 ”网站，按照网页设计製作的流程，分任务逐步讲述网页设计及製作的技术要点。其目的是让学生通过完成该案例，从而掌握网页设计与製作的实际过程及专业技能。书中给出了大量的经典案例，并对案例作了细緻的分析，便于学生理解所学知识，加强实操训练，提高实践能力。
基本信息
丛书名 基于岗位职业能力培养的高职网路技术专业系列教材建设
作 译 者李红梅 杨林根
出版时间2014-09 千 字 数454
版 次01-01 页 数252
开 本16(185260)
装 帧
I S B N 9787121243356
目录
绪论…………………………………………………………………………………… 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