Web标准网页制作实例教程PDF电子书下载

第1章 基本概念及前期准备 1

1.1 标准化的由来 1

1.2 W3C 1

1.3 Web标准及构成 1

1.3.1 结构（Structure） 1

1.3.2 表现（Presentation） 2

1.3.3 行为（Behavior） 2

1.4 Web标准的好处 2

1.5 前端开发工具 3

1.5.1 Photoshop 3

1.5.2 Dreamweaver 3

1.5.3 网页源文件的查看与调试工具Firebug 4

1.5.4 SuperPreview 6

1.6 理解目录与路径 6

1.7 浏览器的选择 8

第2章 XHTML基础 9

2.1 什么是XHTML 9

2.2 XHTML文档的基本结构 9

2.3 标签、元素和属性 11

2.4 XHTML标签与功能简述 11

2.5 HTML常用标签 12

2.5.1 标题〈title〉 12

2.5.2 标题heading系列〈h1〉～〈h6〉 13

2.5.3 段落〈p〉 13

2.5.4 换行符br 14

2.5.5 预格式化pre 14

2.5.6 图像img 15

2.5.7 超级链接a 17

2.5.8 hr分割线 18

2.5.9 修饰标签strong和em 18

2.5.10 无序列表ul 18

2.5.11 有序列表ol 19

2.5.12 自定义列表dl 19

2.5.13 块元素div 20

2.5.14 行元素span 21

2.5.15 HTML注释 21

2.6 块元素与行元素的区别及转换 21

练习 22

第3章 CSS基础 26

3.1 什么是CSS 26

3.2 CSS的语法结构 26

3.3 应用CSS到页面里 27

3.3.1 定义行间样式 27

3.3.2 定义内部样式 27

3.3.3 链入外部样式表 28

3.4 关于样式的优先权 28

3.5 样式的继承 28

3.6 常用CSS属性 28

3.6.1 文字相关样式属性 29

3.6.2 设置尺寸属性 30

3.6.3 border边框 32

3.6.4 background背景 33

3.6.5 链接伪类 41

3.6.6 伪元素 42

3.6.7 ＠font-face和嵌入字体 43

3.6.8 如何使用图标字体 45

3.7 CSS常用数据单位 47

3.8 CSS注释 48

练习 48

第4章 CSS选择符 51

4.1 标签选择符 51

4.2 包含选择符 51

4.3 选择符的群组 51

4.4 id选择符 51

4.5 class选择符 52

4.6 id与class何时用 53

4.7 子选择符 53

4.8 相邻选择符 54

4.9 通配符 54

4.10 命名注意事项 54

4.11 驼峰命名法 55

4.12 常用命名规范 55

第5章 CSS布局 56

5.1 理解margin与padding 56

5.1.1 margin 56

5.1.2 padding 56

5.1.3 盒模型 57

5.1.4 默认的margin与padding 58

5.1.5 上下margin叠加问题 58

5.2 文档流 60

5.3 浮动float 60

5.4 浮动带来的影响 61

5.5 深入理解浮动 63

5.5.1 方法一：为父元素添加overflow:hidden 65

5.5.2 方法二：为父元素添加display:inline-block 65

5.5.3 方法三：同时浮动父元素 66

5.5.4 方法四：利用after伪元素闭合浮动 66

练习——三行两列布局 67

第6章 列表综合应用 72

6.1 列表类型list-style-type 72

6.2 练习——新闻列表1 73

6.3 练习——新闻列表2 76

6.4 导航列表 79

6.5 滑动门导航 82

6.6 图片列表 85

第7章 position定位 91

7.1 position 91

7.1.1 relative：相对定位 91

7.1.2 absolute：绝对定位 92

7.1.3 定位上下文 93

7.2 深度z-index 94

7.3 电影列表练习 95

第8章 表单 102

8.1 表单中的元素 102

8.1.1 fieldset和legend 102

8.1.2 label 102

8.2 表单类型input 102

8.2.1 type="text"单行文本输入框 103

8.2.2 type="password"密码输入框 103

8.2.3 type="checkbox"复选框 103

8.2.4 type="radio"单选框 103

8.2.5 type="file"文件上传框 103

8.2.6 type="submit"提交 104

8.2.7 type="reset"重置 104

8.2.8 type="button"按钮 104

8.2.9 textarea多行文本输入框 104

8.2.10 select＆option下拉选择框 104

8.3 综合案例 105

8.3.1 搜索条练习 105

8.3.2 简易登录 106

8.3.3 简易评论 110

8.3.4 用户注册 113

8.3.5 调查问卷 118

第9章 多媒体 124

9.1 基本语法 124

9.2 参数设置 124

9.2.1 自动播放 124

9.2.2 循环播放 124

9.2.3 面板显示 125

9.2.4 容器属性 125

9.2.5 外观设置 125

9.3 在网页中播放FLASH动画 125

9.4 MP3音频的插入 126

9.5 视频的插入 127

9.6 网络流媒体视频的插入 127

9.7 flv文件的插入 128

第10章 表格 129

10.1 表格的基本格式 129

10.2 表格所有元素 130

10.3 拆分与合并单元格 130

10.4 表格的结构化 130

10.5 表格的直列化〈colgroup〉…〈/colgroup〉 132

10.6 表格的标题 133

10.7 综合练习：金牌top5 134

第11章 jQuery特效 137

11.1 如何获取和使用 137

11.2 JQuery选择器 138

11.2.1 元素选择器 138

11.2.2 CSS选择器 138

11.2.3 jQuery特有的表达式 138

11.2.4 jQuery过滤器 138

11.3 事件操作 139

11.4 JQuery效果 139

11.5 显示隐藏层 140

11.6 tab选项卡 142

11.7 jQuery焦点图 144

11.8 滚动图片 148

第12章 综合实战练习 151

12.1 磐石文化网站界面设计 151

12.1.1 新建文件与图层分组 152

12.1.2 页面头部与背景的制作 153

12.1.3 第一屏内容制作 167

12.1.4 第二屏内容制作 173

12.1.5 页面底部制作与测试图片的添加 177

12.2 《芜湖日报报业集团》网站 179

12.2.1 整体布局 179

12.2.2 部署头部部分 182

12.2.3 搭建图片新闻区块 182

12.2.4 搭建新闻速递 184

12.2.5 搭建通知公告 185

12.3 《佳友宠物美容摄影工作室》 187

12.3.1 整体布局 190

12.3.2 全局样式 191

12.3.3 整体背景及头部定义 191

12.3.4 搭建导航部分 192

12.3.5 主体main 193

12.3.6 首main三栏布局 193

12.3.7 搭建爱宠知识 195

12.3.8 搭建焦点图 195

12.3.9 搭建右侧广告区块 200

12.3.10 搭建左侧广告及新品上架 201

12.3.11 搭建图片列表部分 202

12.3.12 搭建友情链接及底部版权 203

12.4 团购类网站《大江乐购》 204

12.4.1 整体布局 204

12.4.2 搭建导航菜单 206

12.4.3 搭建分类筛选区块 208

12.4.4 搭建商品列表部分 209

12.5 《道喜装饰有限公司》 211

12.5.1 排版架构 212

12.5.2 全局样式及整体布局 213

12.5.3 搭建头部 214

12.5.4 搭建导航部分 217

12.5.5 定义焦点图部分 217

12.5.6 搭建“关于我们” 218

12.5.7 搭建tab标签 219

12.5.8 搭建工程案例部分 221

12.5.9 搭建侧栏区块 223

12.5.10 定义底部版权 223

12.6 门户网站《百智时尚》 224

12.6.1 结构分析 224

12.6.2 整体结构 226

12.6.3 整体布局 227

12.6.4 搭建顶部 229

12.6.5 搭建头部header区域 231

12.6.6 搭建导航区域 232

12.6.7 搭建特别推荐部分 234

12.6.8 搭建侧栏新闻区块 236

12.6.9 搭建最新活动区块 237

12.6.10 搭建时尚搜索区域 237

12.6.11 搭建时尚，数码，奢华区块 239

12.6.12 搭建排行榜区块 242

12.6.13 搭建妆容，生活，娱乐区块 244

12.6.14 搭建推荐文章区块 246

12.6.15 搭建图文特荐区块 247

12.6.16 搭建友情链接区块 249

12.6.17 搭建底部 249

第13章 响应式设计 254

13.1 什么是响应式设计 254

13.2 移动设备上的不同表现 254

13.3 本地如何模拟移动设备 255

13.4 响应式设计的三个重要方面 259

13.5 媒体查询 259

13.5.1 ＠media规则 259

13.5.2 〈1ink〉标签的media属性 259

13.6 流式布局 260

13.7 弹性图片 260

13.8 阻止移动浏览器自动调整页面大小 260

13.9 用em代替px 261

13.10 对iPad竖屏进行优化 261

13.11 对iPhone横屏进行优化 263

13.12 对iPhone竖屏进行优化 266

第14章 SEO优化 268

14.1 SEO概述 268

14.2 title标签优化 268

14.3 头部其他标签优化 269

14.4 h1～h6标签 269

14.5 网站导航条 270

14.6 robots.txt 270

14.7 页面设计SEO细节 271

14.8 网站规划原则 271