|
第1章 网页那点事 1
1.1 网页概述 1
1.1.1 网页的组成 1
1.1.2 网页名词解释 2
1.1.3 Web标准 4
1.2 网页制作技术入门 5
1.2.1 HTML 5
1.2.2 CSS 6
1.2.3 JavaScript 7
1.2.4 网页的展示平台——浏览器 7
1.3 Dreamweaver工具的使用 9
1.3.1 认识Dreamweaver界面 10
1.3.2 Dreamweaver初始化设置 14
1.3.3 Dreamweaver基本操作 16
1.4 创建第一个网页 18
1.5 动手实践 19
第2章 从零开始构建HTML页面 20
2.1 【案例1】简单的网页 20
案例描述 20
知识引入 20
1. HTML文档基本格式 20
2. 标签的分类 21
3. 标签的关系 22
4. 页面格式化标签 23
案例实现 26
1. 分析效果图 26
2. 制作页面结构 27
3. 设置标题居中 27
2.2 【案例2】新闻页面 27
案例描述 27
知识引入 28
1. 标签的属性 28
2. HTML文档头部相关标签 28
3. 文本样式标签 29
4. 文本格式化标签 30
案例实现 31
1. 结构分析 31
2. 样式分析 31
3. 制作页面结构 31
4. 控制文本 32
2.3 【案例3】图文混排 32
案例描述 32
知识引入 33
1. 常见图像格式 33
2. 图像标签 33
3. 相对路径和绝对路径 37
4. 特殊字符标签 37
案例实现 38
1. 分析效果图 38
2. 制作页面结构 38
3. 控制图像 38
4. 控制文本 39
2.4 动手实践 40
第3章 使用CSS技术美化网页 41
3.1 【案例4】文字Logo 41
案例描述 41
知识引入 41
1. 认识CSS 41
2. CSS样式规则 42
3. 引入CSS样式表 43
4. CSS基础选择器 48
案例实现 50
1. 分析效果图 50
2. 制作页面结构 50
3. 定义CSS样式 50
3.2 【案例5】美食专题栏目 51
案例描述 51
知识引入 51
1. CSS字体样式属性 51
2. CSS文本外观属性 54
案例实现 62
1. 结构分析 62
2. 样式分析 63
3. 制作页面结构 63
4. 定义CSS样式 63
3.3 【案例6】搜索页面 65
案例描述 65
知识引入 65
1. CSS复合选择器 65
2. CSS层叠性和继承性 67
2. 继承性 68
3. CSS优先级 69
案例实现 71
1. 结构分析 71
2. 样式分析 72
3. 制作页面结构 72
4. 定义CSS样式 72
3.4 动手实践 73
第4章 运用盒子模型划分网页模块 74
4.1 【案例7】音乐盒 74
案例描述 74
知识引入 74
1. 认识盒子模型 74
2. 标签 75
3. 边框属性 77
案例实现 82
1. 结构分析 82
2. 样式分析 82
3. 制作页面结构 82
4. 定义CSS样式 83
4.2 【案例8】用户中心 83
案例描述 83
知识引入 84
1. 内边距属性 84
2. 外边距属性 85
3. 盒子的宽与高 86
案例实现 87
1. 结构分析 87
2. 样式分析 87
3. 制作页面结构 87
4. 定义CSS样式 88
4.3 【案例9】咖啡店banner 89
案例描述 89
知识引入 89
1. 设置背景颜色 89
2. 设置背景图像 90
3. 设置背景图像平铺 90
4. 设置背景图像的位置 91
5. 设置背景图像固定 92
6. 综合设置元素的背景 93
案例实现 93
1. 结构分析 93
2. 样式分析 93
3. 制作页面结构 93
4. 定义CSS样式 94
4.4 【案例10】图标导航栏 95
案例描述 95
知识引入 95
1. 元素类型 95
2. 标签 96
3. 元素类型的转换 97
案例实现 99
1. 结构分析 99
2. 样式分析 99
3. 制作页面结构 99
4. 定义CSS样式 99
4.5 【案例11】创意画框 100
案例描述 100
知识引入 101
1. 颜色透明度 101
2. 图片边框 101
3. 阴影 102
4. 渐变 104
案例实现 109
1. 结构分析 109
2. 样式分析 109
3. 制作页面结构 109
4. 定义CSS样式 110
4.6 【案例12】拼图效果 110
案例描述 110
知识引入 111
1. 圆角 111
2. 多背景图像 113
案例实现 114
1. 结构分析 114
2. 样式分析 115
3. 制作页面结构 115
4. 定义CSS样式 115
4.7 动手实践 116
第5章 为网页添加列表和超链接 117
5.1 【案例13】精美电商悬浮框 117
案例描述 117
知识引入 117
1. 无序列表 117
2. 有序列表 118
案例实现 120
1. 结构分析 120
2. 样式分析 120
3. 制作页面结构 120
4. 定义CSS样式 121
5.2 【案例14】二维码名片 122
案例描述 122
知识引入 122
1. 定义列表 122
2. 定义列表实现图文混排 123
3. 列表嵌套的应用 124
案例实现 125
1. 结构分析 125
2. 样式分析 125
3. 制作页面结构 126
4. 定义CSS样式 126
5.3 【案例15】电商团购悬浮框 127
案例描述 127
知识引入 128
1. list-style-type属性 128
2. list-style-image属性 129
3. list-style-position属性 130
4. list-style属性 130
5. 背景图像定义列表项目符号 131
案例实现 132
1. 结构分析 132
2. 样式分析 132
3. 制作页面结构 132
4. 定义CSS样式 133
5.4 【案例16】唱吧导航栏 134
案例描述 134
知识引入 134
1. 创建超链接 134
2. 锚点链接 136
3. 链接伪类控制超链接 137
案例实现 139
1. 结构分析 139
2. 样式分析 139
3. 制作页面结构 139
4. 定义CSS样式 141
5.5 动手实践 142
第6章 为网页添加表格和表单 144
6.1 【案例17】简历表 144
案例描述 144
知识引入 144
1. 创建表格 144
2. 标签的属性 146
3. 标签的属性 150
4. 标签的属性 151
5. 标签及其属性 153
6. 表格的结构 154
7. CSS控制表格样式 155
案例实现 159
1. 结构分析 159
2. 样式分析 160
3. 制作页面结构 160
4. 定义CSS样式 161
6.2 【案例18】用户登录界面 162
案例描述 162
知识引入 162
1. 认识表单 162
2. 创建表单 162
案例实现 164
1. 结构分析 164
2. 样式分析 164
3. 制作页面结构 164
4. 定义CSS样式 165
6.3 【案例19】趣味选择题 166
案例描述 166
知识引入 167
1. input控件 167
案例实现 170
1. 结构分析 170
2. 样式分析 170
3. 制作页面结构 170
4. 定义CSS样式 171
6.4 【案例20】空间日志 172
案例描述 172
知识引入 173
1. textarea控件 173
2. select控件 174
案例实现 177
1. 结构分析 177
2. 样式分析 178
3. 制作页面结构 178
4. 定义CSS样式 178
6.5 【案例21】员工档案 180
案例描述 180
知识引入 181
1. CSS控制表单样式 181
案例实现 183
1. 结构分析 183
2. 样式分析 183
3. 制作页面结构 183
4. 定义CSS样式 184
6.6 动手实践 186
第7章 运用浮动与定位布局 187
7.1 【案例22】世界杯梦幻阵容 187
案例描述 187
知识引入 188
1. 认识浮动 188
案例实现 190
1. 结构分析 190
2. 样式分析 190
3. 制作页面结构 190
4. 定义CSS样式 192
7.2 【案例23】商品专栏 192
案例描述 192
知识引入 193
1. 清除浮动 193
案例实现 197
1. 结构分析 197
2. 样式分析 197
3. 制作页面结构 197
4. 定义CSS样式 198
7.3 【案例24】移动端电商界面 199
案例描述 199
知识引入 199
1. overflow属性 199
案例实现 201
1. 结构分析 201
2. 样式分析 202
3. 制作页面结构 202
4. 定义CSS样式 203
7.4 【案例25】违停查询 204
案例描述 204
知识引入 204
1. 认识定位属性 204
2. 定位类型 205
3. z-index层叠等级属性 209
案例实现 209
1. 结构分析 209
2. 样式分析 209
3. 制作页面结构 210
4. 定义CSS样式 210
7.5 【案例25】网页布局 212
案例描述 212
知识引入 213
1. 认识布局 213
2. 单列布局 214
3. 两列布局 216
4. 三列布局 217
5. 网页模块命名规范 220
案例实现 221
1. 结构分析 221
2. 样式分析 221
3. 制作页面结构 221
4. 定义CSS样式 222
7.6 动手实践 223
第8章 全新的网页视听技术 224
8.1 【案例26】电影播放界面 224
案例描述 224
知识引入 225
1. 音视频嵌入技术概述 225
2. 嵌入视频 226
3. 嵌入音频 228
4. 浏览器对音视频文件的兼容性 228
5. 控制视频宽高 229
案例实现 231
1. 结构分析 231
2. 样式分析 231
3. 制作页面结构 232
4. 定义CSS样式 232
8.2 【案例27】导航栏悬浮特效 234
案例描述 234
知识引入 234
1. transition-property属性 234
2. transition-duration属性 235
3. transition-timing-function属性 236
4. transition-delay属性 237
5. transition属性 237
案例实现 238
1. 结构分析 238
2. 样式分析 238
3. 制作页面结构 238
4. 定义CSS样式 238
8.3 【案例28】翻牌动画 239
案例描述 239
知识引入 240
1. 2D变形 240
2. 3D变形 245
案例实现 248
1. 结构分析 248
2. 样式分析 249
3. 制作页面结构 249
4. 定义CSS样式 249
8.4 【案例29】宝石旋转 250
案例描述 250
知识引入 251
1. @keyframes规则 251
2. animation-name属性 251
3. animation-duration属性 252
4. animation-timing-function属性 252
5. animation-delay属性 253
6. animation-iteration-count属性 253
7. animation-direction属性 253
8. animation属性 254
案例实现 255
1. 结构分析 255
2. 样式分析 255
3. 制作页面结构 255
4. 定义CSS样式 255
8.5 动手实践 257
第9章 简单的JavaScript 258
9.1 【案例30】身份验证 258
案例描述 258
知识引入 259
1. 认识JavaScript 259
2. JavaScript的语法规则 261
3. 关键字 261
4. JavaScript的引入方式 262
5. alert()方法 263
6. prompt()方法 263
案例实现 264
1. 案例分析 264
2. 案例实现 264
9.2 【案例31】商城下拉菜单 264
案例描述 264
知识引入 265
1. DOM简介 265
2. 对象 265
3. 访问节点 266
4. 设置节点样式 266
5. 变量 267
6. 函数 268
7. 事件和事件调用 270
8. 常用的JavaScript事件 271
案例实现 272
1. 结构分析 272
2. 样坏分析 272
3. JavaScript效果分析 272
4. 制作页面结构 272
5. 定义CSS样式 273
6. 添加JavaScript特效 274
9.3 【案例32】限时秒杀 274
案例描述 274
知识引入 274
1. 数据类型 274
2. 运算符 276
3. 运算符优先级 280
4. 条件语句 282
5. BOM简介 286
6. Date对象 290
7. 数据类型转换 291
案例实现 292
1. 结构分析 292
2. 样式分析 292
3. JS效果分析 292
4. 制作页面结构 292
5. 定义CSS样式 293
6. 添加JavaScript效果 294
9.4 【案例33】Tab栏切换效果 295
案例描述 295
知识引入 295
1. 循环控制语句 295
2. 跳转语句 298
3. 数组 300
案例实现 301
1. 结构分析 301
2. 样式分析 301
3. JS效果分析 301
4. 制作页面结构 301
5. 定义CSS样式 302
6. 添加JavaScript效果 303
9.5 动手实践 304
第10章 实战开发——好趣艺术
设计部落首页面 306
10.1 准备工作 307
1. 建立站点 307
2. 站点初始化设置 307
3. 切片 308
4. 效果图分析 310
5. 页面布局 311
6. 定义公共样式 312
10.2 首页面详细制作 312
1. 制作头部和导航 312
2. banner和通告 317
3. 主体内容区域 320
4. 底部版权区域 335
动手实践 336
|