前言
第1章 网页设计与制作基础1
1.1 网页与网站的概念1
1.2 Web前端开发技术简介1
1.2.1 HTML5简介1
1.2.2 CSS3简介3
1.2.3 JavaScript简介4
1.3 HTML5的基本结构和编码规范4
1.3.1 HTML5语法结构4
1.3.2 HTML5文档结构5
1.3.3 HTML5编码规范7
1.4 编辑HTML文件8
1.4.1 常见的网页编辑工具8
1.4.2 HTML文件的创建8
1.5 案例—制作“馨美装修”公司介绍页面11
习题111
第2章 编辑HTML5元素12
2.1 HTML5元素的分类12
2.1.1 元信息元素12
2.1.2 语义元素13
2.1.3 无语义元素15
2.2 注释和特殊符号15
2.2.1 注释15
2.2.2 特殊符号15
2.3 HTML5的颜色表示16
2.4 文本元素17
2.4.1 字体样式元素17
2.4.2 短语元素18
2.5 文本层次语义元素19
2.5.1 mark元素19
2.5.2 cite元素19
2.5.3 time元素19
2.6 基本排版元素20
2.6.1 标题元素20
2.6.2 段落元素和换行元素21
2.6.3 缩排元素21
2.6.4 水平线元素22
2.6.5 案例—制作“馨美装修”网购向导页面22
2.7 图像元素23
2.7.1 常用的Web图像格式23
2.7.2 图像元素的基本用法23
2.8 超链接元素25
2.8.1 a元素25
2.8.2 页面转向链接25
2.8.3 书签链接26
2.8.4 下载文件链接26
2.8.5 电子邮件链接26
2.8.6 JavaScript链接27
2.8.7 图像链接27
2.8.8 空链接27
2.8.9 案例—制作“馨美装修”服务资源页面27
2.9 列表元素29
2.9.1 无序列表29
2.9.2 有序列表29
2.9.3 定义列表30
2.9.4 嵌套列表31
2.9.5 案例—制作“馨美装修”广告联盟页面31
2.10 HTML5多媒体元素32
2.10.1 HTML5对音频和视频的支持32
2.10.2 audio元素32
2.10.3 video元素33
习题234
第3章 网页布局与交互35
3.1 iframe框架元素35
3.1.1 基本格法35
3.1.2 使用iframe框架元素布局页面35
3.1.3 使用iframe框架元素实现页面间的跳转36
3.2 分区元素37
3.2.1 基本语法37
3.2.2 使用div元素布局页面内容37
3.3 范围元素38
3.3.1 基本语法38
3.3.2 span元素与div元素的异同38
3.3.3 案例—布局“馨美装修”技术支持页面39
3.4 HTML5文档结构元素39
3.4.1 section元素40
3.4.2 nav元素40
3.4.3 header元素40
3.4.4 footer元素40
3.4.5 article元素40
3.4.6 aside元素42
3.4.7 分组元素43
3.4.8 案例—制作“馨美装修”人才招聘页面44
3.5 HTML5页面交互元素45
3.5.1 details元素和summary元素45
3.5.2 progress元素45
3.6 表格元素46
3.6.1 表格的组成46
3.6.2 基本表格46
3.6.3 不规范表格47
3.6.4 数据分组48
3.6.5 调整列的格式49
3.6.6 案例—使用表格布局“馨美装修”案例页面49
3.7 表单50
3.7.1 表单元素form50
3.7.2 输入元素input51
3.7.3 标签元素label53
3.7.4 选择栏元素select53
3.7.5 多行文本元素textarea55
3.7.6 表单分组55
3.7.7 案例—制作“馨美装修”联系我们表单56
习题357
第4章 CSS3样式基础59
4.1 CSS3简介59
4.1.1 初识CSS359
4.1.2 CSS3的优点59
4.1.3 CSS3的局限性60
4.1.4 CSS3编写规范60
4.1.5 CSS3的工作环境61
4.2 在HTML中引入CSS3样式表61
4.2.1 行内样式61
4.2.2 内部样式表62
4.2.3 链入外部样式表63
4.2.4 导入外部样式表65
4.3 CSS3的基本语法和属性值单位66
4.3.1 基本语法66
4.3.2 注意事项67
4.3.3 长度、百分比单位68
4.3.4 色彩单位69
4.4 CSS3的选择符70
4.4.1 基本选择符70
4.4.2 复合选择符71
4.4.3 通配符选择符75
4.4.4 伪类选择符76
4.4.5 伪元素选择符78
4.4.6 案例—制作“馨美装修”网站使用条款页面79
4.5 文档结构与元素类型81
4.5.1 文档结构的基本概念81
4.5.2 元素类型82
4.6 继承性、层叠性和优先级83
4.6.1 继承性83
4.6.2 层叠性84
4.6.3 优先级84
4.7 综合案例—制作“馨美装修”帮助中心局部页面85
习题488
第5章 使用CSS3修饰网页元素89
5.1 CSS3字体属性89
5.1.1 字体类型属性font-family89
5.1.2 字体尺寸属性font-size89
5.1.3 字体倾斜属性font-style90
5.1.4 小写字体属性font-variant90
5.1.5 字体粗细font-weight90
5.2 CSS3文本属性91
5.2.1 文本颜色属性color91
5.2.2 行高属性line-height91
5.2.3 文本水平对齐方式属性text-align92
5.2.4 为文本添加修饰属性text-decoration92
5.2.5 段落首行缩进属性text-indent92
5.2.6 文本的阴影属性text-shadow92
5.2.7 元素内部的空白属性white-space93
5.2.8 文本的截断效果属性text-overflow93
5.3 CSS3背景属性94
5.3.1 背景颜色属性background-color94
5.3.2 背景图像属性background-image95
5.3.3 重复背景图像属性background-repeat96
5.3.4 固定背景图像属性background-attachment97
5.3.5 背景图像位置属性background-position97
5.3.6 背景图像大小属性background-size98
5.3.7 背景属性background98
5.3.8 背景图像起点属性background-origin98
5.4 CSS3尺寸属性99
5.4.1 宽度属性width100
5.4.2 高度属性height100
5.4.3 小宽度属性min-width100
5.4.4 大宽度属性max-width101
5.4.5 小高度属性min-height101
5.4.6 大高度属性max-height101
5.5 CSS3列表属性102
5.5.1 图像作为列表项的标记属性list-style-image102
5.5.2 列表项标记的位置属性list-style-position102
5.5.3 标记的类型属性list-style-type103
5.5.4 列表简写属性list-style103
5.6 CSS3表格属性106
5.6.1 合并边框属性border-collapse106
5.6.2 边框间隔属性border-spacing106
5.6.3 标题位置属性caption-side106
5.6.4 单元格无内容显示方式属性empty-cells107
5.6.5 案例—使用斑马线表格制作装修工程年度排行榜108
5.7 CSS3属性的应用109
5.7.1 设置图像样式109
5.7.2 设置表单样式111
5.7.3 设置链接113
5.7.4 创建导航菜单114
5.8 综合案例—制作“馨美装修”网购学堂页面116
5.8.1 网购学堂页面布局规划117
5.8.2 网购学堂页面的制作过程117
习题5122
第6章 CSS3盒模型124
6.1 盒模型概述124
6.1.1 盒子的组成124
6.1.2 盒子的大小125
6.1.3 块级元素与行级元素的宽度和高度126
6.2 盒模型的属性127
6.2.1 内边距属性padding127
6.2.2 外边距属性margin129
6.2.3 边框属性border131
6.2.4 圆角边框属性border-radius134
6.2.5 盒模型的阴影属性box-shadow135
6.2.6 调整大小属性resize136
6.3 CSS3布局属性137
6.3.1 元素的布局方式概述137
6.3.2 CSS浮动属性float139
6.3.3 清除浮动属性clear141
6.3.4 裁剪属性clip142
6.3.5 元素显示方式属性display142
6.3.6 元素可见性属性visibility143
6.4 CSS3盒子定位属性144
6.4.1 定位位置属性top、right、bottom、left144
6.4.2 定位方式属性position145
6.4.3 层叠顺序属性z-index150
6.5 CSS3多列属性151
6.6 综合案例—“馨美装修”登录页面整体布局154
习题6155
第7章 Div+CSS布局页面156
7.1 Div+CSS布局技术简介156
7.1.1 Div+CSS布局的优点156
7.1.2 使用嵌套的Div实现页面排版156
7.2 典型的Div+CSS整体页面布局157
7.2.1 CSS布局类型157
7.2.2 CSS布局样式158
7.3 典型的局部布局161
7.3.1 <div>-<ul>-<li>局部布局161
7.3.2 <div>-<dl>-<dt>-<dd>局部布局162
7.4 综合案例—制作“馨美装修”商务服务中心页面162
7.4.1 商务服务中心页面布局规划162
7.4.2 商务服务中心页面的制作过程163
习题7168
第8章 JavaScript基础170
8.1 JavaScript概述170
8.2 在HTML文件中使用JavaScript170
8.2.1 在HTML文档中嵌入脚本程序171
8.2.2 链接脚本文件171
8.2.3 在HTML标签内添加脚本172
8.3 数据类型172
8.3.1 数据类型的分类172
8.3.2 基本数据类型173
8.3.3 数据类型的转换174
8.4 常量和变量175
8.4.1 常量175
8.4.2 变量176
8.5 运算符和表达式176
8.5.1 基本概念177
8.5.2 运算符和表达式的分类177
8.6 流程控制语句178
8.6.1 顺序结构语句179
8.6.2 条件选择结构语句181
8.6.3 循环结构语句184
8.7 函数186
8.7.1 函数的声明187
8.7.2 函数的调用188
8.7.3 变量的作用域189
8.7.4 内置函数189
习题8190
第9章 JavaScript DOM编程191
9.1 DOM概述191
9.2 window对象191
9.2.1 window对象的属性192
9.2.2 window对象的方法192
9.3 document对象193
9.3.1 document对象的属性193
9.3.2 document对象的方法193
9.4 location对象195
9.4.1 location对象的属性195
9.4.2 location对象的方法195
9.5 history对象195
9.6 screen对象196
9.7 navigator对象196
9.8 form对象197
9.8.1 form对象的属性197
9.8.2 form对象的方法198
9.9 DOM节点198
9.9.1 node对象198
9.9.2 element对象198
9.9.3 nodeList对象199
9.10 对象事件处理程序200
9.10.1 对象的事件200
9.10.2 常用的事件及处理201
9.10.3 表单对象与交互性203
9.11 综合案例—“馨美装修”工程复选框全选效果205
习题9207
第10章 HTML5的高级应用209
10.1 拖放API209
10.1.1 draggable属性209
10.1.2 拖放事件209
10.1.3 数据传递对象dataTransfer210
10.2 绘图API212
10.2.1 创建canvas元素212
10.2.2 构建绘图环境213
10.2.3 通过JavaScript绘制图形213
习题10219
第11章 “馨美装修”网站的制作221
11.1 网站的开发流程221
11.2 网站结构222
11.2.1 创建站点目录222
11.2.2 网站页面的组成223
11.3 网站技术分析223
11.4 制作首页224
11.4.1 页面结构代码224
11.4.2 页面样式设计226
11.4.3 页面交互与网页特效的实现230
11.5 制作合作案例页面231
11.5.1 页面结构代码231
11.5.2 页面样式设计232
11.6 网站的整合233
习题11233
参考文献235