HTML5+CSS3 Web前端开发PDF电子书下载

第1章 Web前端开发概述 1

1.1 Web前端开发与网页设计 1

1.1.1 网页的概念和本质 1

1.1.2 网页设计的两个基本问题 2

1.1.3 网页设计语言——HTML简介 3

1.1.4 网页制作软件 4

1.2 网站的创建和制作流程 5

1.2.1 网站的特征 5

1.2.2 网站的开发步骤 6

1.2.3 在Dreamweaver中建立站点 8

1.3 Web服务器与浏览器 10

1.3.1 Web服务器的作用 11

1.3.2 浏览器的种类和作用 11

1.4 URL与域名 13

习题1 14

第2章 HTML 15

2.1 HTML概述 15

2.1.1 HTML文档的结构 15

2.1.2 Dreamweaver的开发界面 16

2.1.3 使用DW新建HTML文件 17

2.1.4 HTML标记 17

2.1.5 常见的HTML标记及属性 18

2.2 在网页中添加文本和图像 19

2.2.1 创建文本和列表 19

2.2.2 插入图像 21

2.3 利用DW代码视图提高效率 22

2.3.1 代码提示 23

2.3.2 代码快速定位 23

2.3.3 DW中的常用快捷键 24

2.4 创建超链接 25

2.4.1 超链接标记＜a＞ 25

2.4.2 绝对URL与相对URL 27

2.4.3 超链接的种类 28

2.4.4 超链接目标的打开方式 30

2.4.5 超链接制作的原则 30

2.4.6 DW中超链接属性面板的使用 31

2.5 插入Flash及嵌入其他网页 32

2.5.1 插入Flash 32

2.5.2 嵌入式框架标记＜iframe＞ 33

2.6 头部标记 34

习题 35

第3章 HTML5与Web标准 36

3.1 HTML5的改进 36

3.1.1 HTML5新增的标记 36

3.1.2 HTML5语法的改进 38

3.1.3 HTML5的视音频功能 39

3.1.4 HTML5的绘图功能 41

3.2 Web标准 44

3.2.1 传统HTML的缺点 44

3.2.2 Web标准的含义 45

3.2.3 Web标准的优势 47

3.3 HTML元素的概念 47

3.3.1 行内元素和块级元素 48

3.3.2 ＜div＞和＜span＞标记 48

习题 49

第4章 CSS样式美化 50

4.1 CSS基础 50

4.1.1 CSS的语法 50

4.1.2 在HTML中引入CSS的方法 51

4.1.3 选择器的分类 53

4.1.4 CSS文本修饰 56

4.2 CSS的特性 57

4.2.1 CSS的层叠性 57

4.2.2 CSS的继承性 59

4.2.3 选择器的组合 60

4.3 CSS高级选择器 64

4.3.1 关系选择器 64

4.3.2 属性选择器 66

4.3.3 伪类选择器 67

4.3.4 使用过渡属性配合动态伪类效果 70

4.3.5 伪元素选择器 73

4.4 CSS设计和书写技巧 75

4.4.1 CSS样式总体设计原则 75

4.4.2 DW对CSS的可视化编辑支持 76

4.4.3 CSS属性的值和单位 79

4.4.4 网页中的字体 80

4.4.5 字体图标技术 82

4.5 盒子模型及其属性 84

4.5.1 盒子模型概述 84

4.5.2 边框border属性 85

4.5.3 圆角border-radius属性 87

4.5.4 图像边框border-image属性 89

4.5.5 padding和margin属性 91

4.6 标准流下的定位及应用 92

4.6.1 标准流下的定位原则 92

4.6.2 margin合并现象 95

4.6.3 盒子模型的应用 96

4.6.4 Chrome浏览器的CSS调试功能 99

4.7 背景的运用 100

4.7.1 CSS的背景属性 100

4.7.2 背景的基本运用技术 104

4.7.3 滑动门技术 107

4.7.4 背景图像的翻转 111

4.7.5 传统圆角效果 112

4.8 CSS3样式美化功能 114

4.8.1 阴影和发光效果 114

4.8.2 渐变效果 117

4.8.3 描边效果 120

4.8.4 遮罩效果 121

4.9 变形与动画效果 123

4.9.1 平面变形效果 123

4.9.2 3D变换效果 126

4.9.3 animation动画效果 131

习题 134

第5章 CSS布局 137

5.1 浮动 137

5.1.1 盒子浮动后的特点 137

5.1.2 清除浮动元素的影响 140

5.1.3 清除浮动影响的方法 140

5.2 浮动的应用举例 143

5.2.1 图文混排及首字下沉效果 143

5.2.2 水平导航条 144

5.2.3 新闻栏目框 145

5.2.4 微博对话框 148

5.3 相对定位 149

5.3.1 定位属性和偏移属性 149

5.3.2 相对定位的特点 149

5.3.3 相对定位的应用举例 150

5.4 绝对定位和固定定位 152

5.4.1 绝对定位 152

5.4.2 绝对定位的应用举例 154

5.4.3 固定定位 163

5.4.4 与定位属性有关的CSS属性 163

5.4.5 overflow属性 166

5.4.6 vertical-align属性 167

5.5 CSS分栏布局 168

5.5.1 分栏布局的种类 169

5.5.2 网页居中的方法 170

5.5.3 1-3-1版式网页布局 170

5.5.4 1-2-1可变宽度布局 174

5.5.5 CSS两列布局案例 176

5.5.6 HTML5新增的文档结构标记 181

5.5.7 HTML5网页布局案例 183

5.6 CSS3新增的布局方式 186

5.6.1 弹性盒布局 186

5.6.2 分栏布局 190

5.7 CSS浏览器的兼容问题 192

习题 193

第6章 表格与表单 195

6.1 创建表格 195

6.1.1 表格标记 195

6.1.2 表格行和单元格标记 197

6.1.3 在DW中操作表格的方法 199

6.1.4 制作固定宽度的表格 201

6.1.5 特殊效果表格的制作 201

6.2 使用CSS美化表格 203

6.2.1 边框和背景的美化 203

6.2.2 隔行变色效果 204

6.3 创建表单 205

6.3.1 ＜form＞标记及其属性 206

6.3.2 ＜input＞标记 208

6.3.3 ＜select＞和＜option＞标记 211

6.3.4 多行文本域标记＜textarea＞ 211

6.3.5 表单数据的传递过程 212

6.3.6 表单中的按钮 213

6.3.7 表单的辅助标记 214

6.3.8 HTML5新增的表单标记和属性 215

6.4 美化表单 218

6.4.1 搜索框 218

6.4.2 用户登录表单 219

6.4.3 用户注册表单 222

习题 223

第7章 响应式网页设计 225

7.1 响应式网页的基本技术 225

7.1.1 媒体查询 225

7.1.2 流式布局 227

7.1.3 自适应图片 229

7.1.4 一列变宽、一列固定的方法 231

7.1.5 响应式网页的头部代码设置 231

7.2 响应式布局的网站实例 232

7.2.1 页面总体布局的实现 233

7.2.2 页头的设计 235

7.2.3 响应式导航条的制作 235

7.2.4 响应式栏目的制作 237

习题 239

第8章 JavaScript与jQuery基础 240

8.1 JavaScript的代码结构 240

8.2 JavaScript的事件编程 242

8.2.1 JavaScript语言基础 242

8.2.2 常用JavaScript事件 242

8.2.3 事件监听程序 243

8.3 JavaScript DO M编程 245

8.3.1 动态效果的实现 245

8.3.2 获取指定元素 246

8.3.3 访问元素的CSS属性 247

8.3.4 访问元素的内容 249

8.4 使用浏览器对象 249

8.5 jQuery基础 253

8.5.1 jQuery的功能和使用 253

8.5.2 jQuery中的“＄” 254

8.5.3 jQuery对象与DO M对象 258

8.5.4 jQuery的选择器 260

8.5.5 jQuery的事件绑定 261

8.5.6 jQuery中的常用方法 262

8.5.7 jQuery应用举例 263

习题 265

第9章 Bootstrap响应式网页设计 267

9.1 Bootstrap的使用 267

9.1.1 下载和引用 Bootstrap框架 267

9.1.2 Bootstrap栅格系统 269

9.1.3 使用栅格系统进行响应式布局 271

9.2 Bootstrap中的网页组件 277

9.2.1 基于组件的网页制作方法 277

9.2.2 导航条 279

9.2.3 轮播插件 283

9.2.4 选项卡面板 286

9.2.5 媒体对象 288

9.2.6 折叠面板组 290

9.2.7 提示框与弹出框 292

9.2.8 模态弹窗 293

9.3 Bootstrap网页重构实例 295

习题 297

附录 实验 299

实验1 个人简历网页 299

实验2 圆饼型盒子的制作 299

实验3 制作背景翻转的图标 300

实验4 栏目框的制作 300

实验5 页头和导航条的制作 301

实验6 图片滚动栏的制作 301

实验7 网页的布局设计 301

实验8 网站首页的实现 301

实验9 网站列表页的实现 301

实验10 制作下拉菜单 302

实验11 制作Tab面板 302

实验12 使用Bootstrap制作响应式网页 302

参考文献 303