21天精通HTML 5+CSS 3网页设计PDF电子书下载

第1部分 了解网页设计基础知识 3

第1天 网页与网站基础知识 3

1.1认识网页和网站 3

1.1.1什么是网页 3

1.1.2什么是网站 4

1.2网页的相关概念 6

1.2.1浏览器 6

1.2.2网页与HTML 7

1.2.3URL、域名与IP地址 8

1.2.4网站上传和下载 9

1.3网页的HTML构成 10

1.3.1文档标记 11

1.3.2头部标记 12

1.3.3主体标记 13

1.4HTML常用标记 14

1.4.1链接标记〈LINK〉 14

1.4.2段落标记〈P〉 15

1.4.3通用块标记〈DIV〉 17

1.4.4行内标记〈SPAN〉 18

1.4.5元数据标记〈META〉 19

1.4.6图像标记〈IMG〉 20

1.4.7框架容器标记〈FRAMESET〉 22

1.4.8子框架标记〈FRAME〉 22

1.4.9表格标记〈TABLE〉 24

1.4.10浮动帧标记〈Iframe〉 26

1.4.11滚动标记〈marquee〉 27

1.5技能训练1——制作日程表 29

1.6技能训练2——保存整站 32

第2天 认识Web新面孔——HTML 5新增元素与属性速览 36

2.1新增的主体结构元素 36

2.1.1section元素 36

2.1.2article元素 36

2.1.3aside元素 37

2.1.4nav元素 37

2.2新增的非主体结构元素 37

2.2.1header元素 37

2.2.2hgroup元素 38

2.2.3footer元素 38

2.2.4figure元素 39

2.3新增的其他元素 39

2.3.1新增input元素的类型 39

2.3.2其他元素 39

2.4新增的属性和废除的属性 42

2.4.1新增的表单属性 42

2.4.2新增的链接相关属性 45

2.4.3新增的其他属性 45

2.4.4废除的属性 45

2.5新增的全局属性 47

2.5.1contentEditable属性 47

2.5.2designMode属性 48

2.5.3hidden属性 48

2.5.4spellcheck属性 48

2.5.5tabIndex属性 49

第3天 读懂样式表密码——网页设计中的CSS 3 51

3.1认识CSS 3 51

3.1.1CSS 3简介 51

3.1.2CSS 3发展历史 52

3.1.3浏览器与CSS 3 52

3.2样式表的基本用法 53

3.2.1在HTML中插入样式表 53

3.2.2单独的链接CSS文件 53

3.3CSS 3新增的选择器 54

3.3.1属性选择器 55

3.3.2结构伪类选择器 56

3.3.3UI元素状态伪类选择器 57

3.4技能训练——制作彩色标题 59

第2部分 使用HTML 5的高级应用 66

第4天 网页将变得更加活泼——网页表单技术应用 66

4.1新增HTML5表单 66

4.1.1基本表单元素 68

4.1.2高级表单元素 75

4.1.3新增表单元素 84

4.2新增表单属性 86

4.2.1autocomplete属性 86

4.2.2min.max和step属性 87

4.2.3multiple属性 88

4.2.4placeholder属性 88

4.2.5required属性 89

4.3技能训练——创建用户注册页面 90

第5天 让页面从此告别单调——网页多媒体应用 92

5.1音/视频容器与视频编/解码器 92

5.1.1视频容器 92

5.1.2音频和视频编/解码器 93

5.1.3audio和video元素的浏览器支持情况 93

5.1.4在HTML 4和HTML 5中播放多媒体的异同 94

5.2属性与方法 94

5.2.1理解媒体元素 94

5.2.2使用audio元素 95

5.2.3使用video元素 96

5.3事件触发机制 97

5.3.1事件概述 97

5.3.2事件处理应用 99

5.4技能训练——为网页添加背景音乐 103

第6天 网页中的北斗星——获取地理位置 104

6.1Geolocation API获取地理位置 104

6.1.1地理定位的原理 104

6.1.2地理定位的方法 105

6.1.3指定纬度和经度坐标 105

6.1.4如何获取位置信息 108

6.2技能训练——在网页中调用百度地图 109

第7天 通信不再是件难事儿——Web通信新技术 112

7.1跨文档消息传输 112

7.1.1跨文档消息传输的基本知识 112

7.1.2跨文档通信应用测试 113

7.2Web Sockets API 114

7.2.1Web Sockets通信基础 115

7.2.2服务器端使用Web Sockets API 117

7.2.3客户端使用Web Sockets API 120

7.3技能训练——编写简单的Web Socket服务器 120

第8天 把数据放至客户端——本地存储技术 126

8.1认识Web Storage 126

8.2使用HTML 5 Web Storage API 126

8.2.1sessionStorage对象应用 127

8.2.2localStorage对象应用 128

8.2.3Web Storage API的其他操作 130

8.3在本地建立数据库 133

8.3.1本地数据库概述 133

8.3.2用executeSql来插入数据 134

8.3.3使用transaction方法处理事件 134

8.4技能训练——制作简单的Web留言本 134

第9天 让通信更顺畅——线程处理 138

9.1Web Worker概述 138

9.2线程中常用的变量、函数与类 139

9.3与线程进行数据交互 140

9.4线程嵌套 142

9.4.1技能训练1——单线程嵌套 142

9.4.2技能训练2——多个子线程中的数据交互 145

第10天 浏览页面更快捷——构建离线应用程序 147

10.1HTML 5离线应用程序 147

10.1.1本地缓存 147

10.1.2浏览器网页缓存与本地缓存的区别 147

10.1.3目前浏览器对Web离线应用的支持情况 148

10.1.4支持离线行为 148

10.2了解manifest（清单）文件 149

10.3了解applicationCache API 150

10.4技能训练——离线定位跟踪 152

第3部分 使用CSS 3控制网页样式 160

第11天 网页上温暖的光芒——CSS 3控制网页文本样式 160

11.1CSS 3文字样式 160

11.1.1定义文字的颜色 160

11.1.2定义文字的字体 161

11.1.3定义文字的字号 162

11.1.4加粗字体 163

11.1.5定义文字的风格 165

11.1.6文字的阴影效果 165

11.1.7控制溢出文本 166

11.1.8控制换行 168

11.1.9字体复合属性 169

11.1.10文字修饰效果 170

11.2CSS 3段落文字 171

11.2.1设置字符间隔 171

11.2.2设置单词间隔 172

11.2.3水平对齐方式 173

11.2.4垂直对齐方式 174

11.2.5文本缩进 176

11.2.6文本行高 177

11.3技能训练——网页图文混排效果 178

第12天 同一张图却有着不一样的风景——CSS 3控制网页图像样式 180

12.1图片缩放 180

12.1.1通过标记设置图片大小 180

12.1.2使用CSS 3中的width和height 181

12.1.3使用CSS 3中的max-width和max-height 181

12.2设置图片的边框 183

12.3图片的对齐方式 184

12.3.1横向对齐方式 184

12.3.2纵向对齐方式 185

12.4图文混排效果 187

12.4.1设置图片与文字间距 187

12.4.2文字环绕效果 188

12.5技能训练——酒店宣传单 189

第13天 不可思议的杰作——CSS 3控制表格、表单与菜单样式 193

13.1CSS 3与表格 193

13.1.1表格的基本样式 193

13.1.2表格边框宽度 196

13.1.3表格边框颜色 197

13.1.4技能训练1——隔行变色 199

13.1.5技能训练2——鼠标悬浮变色表格 202

13.2CSS 3与表单 205

13.2.1美化表单中的元素 206

13.2.2美化下拉菜单 207

13.2.3美化提交按钮 209

13.2.4技能训练3——美化注册表单 211

13.2.5技能训练4——美化登录表单 214

13.3CSS 3与菜单 216

13.3.1美化无序列表 216

13.3.2美化有序列表 218

13.3.3图片列表 220

13.3.4列表缩进 222

13.3.5无须表格的菜单 223

13.3.6菜单的横竖转换 226

13.4技能训练5——制作soso导航栏 228

第14天 风景这边独好——CSS 3控制鼠标与超链接样式 232

14.1鼠标特效 232

14.1.1如何控制鼠标箭头 232

14.1.2鼠标变换效果 234

14.2超链接特效 235

14.2.1改变超链接基本样式 235

14.2.2设置超链接背景图 238

14.2.3超链接按钮效果 239

14.3技能训练1——制作图片鼠标放置特效 240

14.4技能训练2——制作图片超链接 242

第15天 让一切趋近于完美——CSS 3滤镜样式应用 245

15.1什么是CSS滤镜 245

15.2通道（Alpha） 246

15.3模糊（Blur） 248

15.4透明色（Chroma） 249

15.5翻转变换（Flip） 250

15.6光晕（Glow） 252

15.7灰度（Gray） 253

15.8反色（Invert） 254

15.9遮罩（Mask） 255

15.10阴影（Shadow） 256

15.11 X射线（X-ray） 257

15.12图像切换（RevealTrans） 258

15.13波浪（Wave） 260

15.14渐隐渐现（BlendTrans） 261

15.15 立体阴影（DropShadow） 263

15.16灯光滤镜（Light） 264

第16天 创造力不再是神话——CSS 3完善的网页美化设计 267

16.1增强的边框属性 267

16.1.1 border-color属性 267

16.1.2 border-image属性 269

16.2增强的背景图像属性 271

16.2.1 background属性 271

16.2.2 background-origin属性 272

16.2.3 background-clip属性 274

16.2.4 background-size属性 276

16.2.5 overflow-x和overflow-y属性 279

16.3增强的其他属性 281

16.3.1 border-radius属性 281

16.3.2 box-shadow属性 282

16.3.3 box-sizing属性 283

16.3.4 resize属性 284

16.3.5 outline属性 285

16.3.6 nav-index属性 287

16.3.7 content属性 289

第4部分 HTML 5+CSS 3综合实战 293

第17天 服务类网站设计 293

17.1网站规划与分析 293

17.1.1网站框架设计 293

17.1.2网站栏目划分 293

17.1.3网站模块划分 294

17.1.4网站色彩搭配 296

17.2修改样式表确定网站风格 296

17.2.1修改网站通用样式 296

17.2.2修改网站布局样式 297

17.3借用其他网站优秀模块 299

17.3.1导航条模块实现 299

17.3.2首页主体布局模块实现 301

17.3.3网页特效显示模块实现 305

第18天 休闲旅游类网站设计 309

18.1休闲旅游类网站主页规划 309

18.1.1旅游网站主页配色规划 309

18.1.2网页整体架构布局规划 310

18.1.3用DIV+CSS布局网页框架 310

18.2制作网站的步骤 311

18.2.1使用HTML 5设计网站 311

18.2.2定义网站CSS样式 311

18.2.3设计页面头部模块 318

18.2.4设计页面中间部分模块 320

18.2.5设计页面底部模块 322

18.2.6微调网站细节并预览 323

第19天 时尚音乐类网站设计 324

19.1时尚音乐类网站的构思布局 324

19.1.1设计分析 324

19.1.2排版架构 325

19.2制作网站的步骤 327

19.2.1页头部分 327

19.2.2左侧内容列表 329

19.2.3中间内容列表 331

19.2.4右侧内容列表 333

19.2.5页脚部分 334

19.3完善网站的效果 335

19.3.1页面内容主体调整 335

19.3.2页面整体调整 337

第20天 商业门户类网站设计 339

20.1商业门户类网站整体设计 339

20.1.1颜色应用分析 340

20.1.2架构布局分析 340

20.2制作网站的步骤 341

20.2.1网页整体样式插入 341

20.2.2网页局部样式 343

20.2.3顶部模块样式代码分析 350

20.2.4中间主体代码分析 351

20.2.5底部模块分析 355

20.3完善网站的效果 355

20.3.1部分内容调整 355

20.3.2模块调整 356

20.3.3调整后预览测试 358

第21天 网页设计模块化重组秘籍 359

21.1网站类型分析与重组 359

21.2网站建站特点分析 360

21.2.1用户群分析 360

21.2.2建站设计分析 361

21.3网站设计布局 361

21.3.1整体布局设计分析 362

21.3.2各模块化设计分析 362

21.3.3颜色搭配分析 362

21.4网站制作详细步骤 363

21.4.1CSS样式表分析 363

21.4.2网页头部设计分析 364

21.4.3主体第一通栏 368

21.4.4主体第二通栏 373

21.4.5主体第三通栏 380

21.4.6网页底部模块分析 383