HTML5+CSS3+JavaScript网页设计

第1篇 HTML5基础入门

第1章 认识网站与网页 2

1.1Internet与WWW 2

1.1.1万维网 2

1.1.2什么是网站及网页 3

1.1.3网址的组成 5

1.2 构建网站的流程 7

1.2.1拟定网站主题 8

1.2.2规划网站架构与内容 9

1.2.3搜集相关资料 10

1.2.4开始制作网页 10

1.2.5上传与测试 11

1.2.6网站的推广与更新维护 13

1.3 认识网页文件和命名规则13

1.3.1主文件名与扩展名 13

1.3.2常见的图片格式 15

1.3.3常见的声音格式 16

1.3.4网页文件命名规则 17

1.4 网页宽度与屏幕分辨率 17

1.4.1屏幕分辨率 18

1.4.2确定网页宽度 19

本章小结 20

习题 22

第2章 HTML5入门 24

2.1 认识HTML5 24

2.1.1HTML5与HTML4的差异 24

2.1.2HTML5废除的标记 25

2.2 学习HTML前的准备工作 26

2.2.1建立HTML文件 26

2.2.2预览HTML网页 28

2.3HTML语法的概念与架构 29

2.3.1HTML的标记类型 29

2.3.2HTML的组成 29

2.3.3标记属性的应用 30

2.4HTML5文件结构与语义标记 30

2.4.1结构化的语义标记 30

2.4.2HTML5声明与编码设置 34

本章小结 36

习题 36

第3章 文字与排版技巧 37

3.1 段落效果——使用排版标记37

3.1.1设置段落样式的标记 37

3.1.2设置对齐与缩进的标记 39

3.1.3添加分隔线 41

3.1.4设置段落标题 42

3.2 文字效果——使用文字标记43

3.2.1设置字形样式的标记 43

3.3.2设置上标、下标 45

3.3 项目符号与编号——使用列表标记 45

3.3.1符号列表 45

3.3.2编号列表 46

3.3.3定义列表 49

3.4 注释与特殊符号 50

3.4.1加入注释 50

3.4.2使用特殊符号 51

3.5 新增中继标记——<meta>52

3.5.1meta标记语法 52

3.5.2认识meta标记的http-equiv属性 53

3.5.3认识meta标记的name属性 56

3.6div标记与span标记 57

3.6.1认识div标记 58

3.6.2认识span标记 59

本章小结 60

习题 61

第4章 多媒体素材的运用 63

4.1 网页图片使用须知 63

4.1.1图片的尺寸与分辨率 63

4.1.2图片的来源 64

4.2 图片的使用 64

4.2.1嵌入图片 65

4.2.2路径表示法 66

4.3 图像处理软件 67

4.3.1初识Photoshop 67

4.3.2改变图片格式 68

4.3.3更改图片大小和分辨率 70

4.3.4切割大图为数张小图 72

4.4 多媒体素材的来源 76

4.4.1利用现有的多媒体元素 76

4.4.2自己制作多媒体元素 77

4.5 添加影音特效 77

4.5.1在网页中加入音乐 77

4.5.2添加影音动画 79

4.5.3添加Flash动画 81

4.5.4传统影音播放器 81

4.5.5使用iframe嵌入优酷视频 82

本章小结 84

习题 85

第5章 表格与表单 87

5.1 制作基本表格 87

5.1.1表格的基本架构 87

5.1.2设置表格标题 89

5.2 表格的编辑技巧 91

5.2.1合并单元格 91

5.2.2利用表格组合图片 93

5.3 什么是表单 96

5.4 创建表单 98

5.4.1表单的基本架构 98

5.4.2输入组件 101

5.4.3列表组件 105

5.4.4选择组件 107

5.4.5按钮组件 109

5.4.6表单分组 111

5.5 操作范例——教学意见调查表111

本章小结 113

习题 114

第6章 创建超链接 116

6.1 认识超链接 116

6.1.1什么是超链接 116

6.1.2规划超链接 117

6.2 加入超链接 117

6.2.1超链接的用法 117

6.2.2站外网页链接 118

6.2.3站内网页链接 119

6.2.4链接到E-Mail邮箱 122

6.2.5链接到文件 125

本章小结 126

习题 126

第2篇 CSS美化

第7章 认识CSS样式表 130

7.1 什么是CSS样式表 130

7.1.1CSS的由来 130

7.1.2CSS的优势 131

7.1.3CSS的应用 132

7.2 建立CSS样式表 133

7.2.1CSS基本格式 133

7.2.2应用CSS样式表 134

7.2.3认识CSS选择器 140

本章小结 145

习题 145

第8章 CSS基本语法 147

8.1 控制文字样式 147

8.1.1字形属性 147

8.1.2段落属性 150

8.1.3文字效果属性 154

8.2 控制背景 157

8.2.1设置背景颜色 157

8.2.2设置背景图片 158

8.2.3设置背景渐变 167

本章小结 170

习题 171

第9章 CSS排版技巧 173

9.1 控制边界与边框 173

9.1.1边界 173

9.1.2边框 175

9.1.3边界间距 182

9.2 网页组件的定位 184

9.2.1一般定位 184

9.2.2图层定位 191

9.3 超链接与鼠标光标特效193

9.3.1超链接特效 193

9.3.2鼠标光标特效 196

本章小结 198

习题 199

第10章 HTML5 CSS3综合应用 201

10.1操作网页内容 201

10.2使用语义标记排版 202

10.3叠字标题 208

10.4网页背景和鼠标光标 209

10.5菜单超链接特效 210

10.6主内容区样式 211

第3篇 HTML5进阶

第11章 认识JavaScript216

11.1什么是JavaScript 216

11.1.1JavaScript架构 216

11.1.2JavaScript对象与函数 218

11.1.3JavaScript事件 221

11.2JavaScript流程控制 223

11.2.1运算符号 223

11.2.2if…else语句 225

11.2.3for循环 225

本章小结 226

习题 227

第12章 canvas在线绘图 229

12.1认识canvas 229

12.1.1基本canvas语法 229

12.1.2绘制各种图形 232

12.2设置图形样式 238

12.2.1指定图形颜色 238

12.2.2指定线条粗细 241

12.2.3渐变填充 244

本章小结 248

习题 249

第13章 网页数据存储WebStorage 250

13.1认识Web Storage 250

13.1.1Web Storage基本概念 250

13.1.2检测浏览器是否支持Web Storage 250

13.2localStorage和sessionStorage 251

13.2.1访问localStorage 251

13.2.2删除localStorage 254

13.2.3访问sessionStorage 256

13.3Web Storage实例练习 257

13.3.1操作步骤 257

13.3.2隐藏<div>及<span>组件 259

13.3.3登录 259

13.3.4注销 260

本章小结 261

习题 262

第14章 Web Storage操作购物车 263

第4篇 HTML5应用

第15章 JavaScript的好帮手——jQuery276

15.1认识jQuery 276

15.1.1引用jQuery函数库 276

15.1.2jQuery基本架构 277

15.1.3jQuery选择器 278

15.2表格排序软件——tablesorter 281

15.2.1下载与应用 281

15.2.2进阶应用 283

15.3行事历软件——FullCalendar 286

15.3.1下载与应用 286

15.3.2进阶应用 287

本章小结295

习题 295

第16章 开发跨平台移动设备网页jQueryMobile 297

16.1jQuery Mobile基础 297

16.1.1认识jQuery Mobile 297

16.1.2第一个jQuery Mobile网页 301

16.2jQuery Mobile的UI组件 306

16.2.1认识UI组件 306

16.2.2按钮 308

16.2.3组按钮 313

16.2.4列表 314

16.3网页导航与布景主题 316

16.3.1jQuery Mobile网页导航 316

16.3.2ThemeRoller快速应用布景主题 319

本章小结 326

习题 327

第17章 移动设备版网页操作 329

17.1网站架构 329

17.2订购流程 332

17.3查订单 341

17.4找店家 344