第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