本书从初学者的角度出发,以实用的案例、通俗易懂的语言详细介绍了使用HTML、CSS及JavaScript进行网页制作的一般技巧。 本书分为8个项目,结合HTML、CSS和JavaScript的基础知识及应用,提供了7种不同类型的网页设计案例。其中,项目1介绍了HTML、CSS和JavaScript的基础知识,包括Web基本概念、HTML简介、CSS简介、JavaScript简介、Dreamweaver工具的使用等;项目2~项目8为7个完整的网页设计项目,涉及“博客”“网店”“家居”“教育”“婚恋”“视频”“美食”多个方向,有助于读者掌握不同网站的设计风格和制作技巧。本书以项目为导向,通过项目将相关知识点串联起来,学完项目内容就能基本掌握如何制作一个完整的项目页面,从而极大地激发读者的学习兴趣。 本书附有源代码、习题、教学课件等资源,并且为了帮助初学者更好地学习,编者还提供了在线答疑,希望可以帮助更多的读者。 本书既可作为高等院校本、专科相关专业的网页设计与制作课程的教材,也可作为网页平面设计的培训教材,还可作为网页制作、美工设计、网站开发、网页编程等行业从业人员的参考读物。

项目1 网页制���基础知识 1 【任务1-1】认识网页 1 需求分析 1 知识储备 1 1. 网页的构成 1 2. 网页的相关名词 2 3. Web标准 3 【任务1-2】网页制作入门技术 5 需求分析 5 知识储备 5 1. HTML简介 5 2. CSS简介 6 3. JavaScript简介 6 4. 常见浏览器介绍 7 【任务1-3】Dreamweaver的使用 9 需求分析 9 知识储备 9 1. Dreamweaver界面介绍 9 2. Dreamweaver的初始化设置 13 3. Dreamweaver文档的基本操作 14 4. 创建网页 16 【项目总结】 17 【课后练习】 17 项目2 “博客”页面制作 19 【项目描述】 19 【任务2-1】认识HTML 20 需求分析 20 知识储备 20 1. HTML文档基本格式 20 2. HTML标签 21 3. HTML标签的属性 22 4. HTML标签的关系 22 5. HTML文档头部相关标签 23 【任务2-2】HTML文本控制标签 24 需求分析 24 知识储备 24 1. 页面格式化标签 24 2. 文本样式标签 26 3. 文本格式化标签 27 4. 特殊字符 28 知识拓展 29 标签 29 【任务2-3】HTML图像应用 30 需求分析 30 知识储备 30 1. 常用图像格式 30 2. 图像标签 31 3. 相对路径和路径 33 知识拓展 34 切图 34 【任务2-4】页面建设准备工作 35 网站素材整理 35 1. 建立网站站点 35 2. “博客”页面切图 36 页面结构分析 36 页面布局 37 【任务2-5】制作“头部”模块 38 效果分析 38 模块制作 38 【任务2-6】制作“博主简介”模块 39 效果分析 39 模块制作 39 【任务2-7】制作“旅行随笔”模块 40 效果分析 40 模块制作 41 【任务2-8】制作“驴友评论”模块 42 效果分析 42 模块制作 43 【任务2-9】制作“页脚”模块 44 效果分析 44 模块制作 44 【项目总结】 45 【课后练习】 45 项目3 “网上花店”专题页制作 47 【项目描述】 47 【任务3-1】CSS核心基础 48 需求分析 48 知识储备 48 1. 结构与表现分离 48 2. CSS样式规则 49 3. CSS样式表的引入 49 4. CSS基础选择器 53 【任务3-2】CSS文本样式属性 55 需求分析 55 知识储备 55 1. CSS字体样式属性 55 2. CSS文本外观属性 58 知识拓展 62 使用CSS定义背景颜色 62 【任务3-3】CSS**特性 63 需求分析 63 知识储备 63 1. CSS复合选择器 63 2. CSS层叠性与继承性 65 3. CSS优先级 66 【任务3-4】页面建设准备工作 68 网站素材整理 68 1. 建立网站站点 68 2. “网上花店”专题页切图 68 页面结构分析 69 1. HTML结构分析 69 2. CSS样式分析 70 定义基础样式 70 1. 页面布局 70 2. 公共样式设置 70 【任务3-5】制作“标题”模块 70 效果分析 70 1. 结构分析 70 2. 样式分析 71 模块制作 71 1. 搭建结构 71 2. 控制样式 71 【任务3-6】制作“分类”模块 71 效果分析 71 1. 结构分析 71 2. 样式分析 72 模块制作 72 1. 搭建结构 72 2. 控制样式 72 【任务3-7】制作“热卖”模块 73 效果分析 73 1. 结构分析 73 2. 样式分析 74 模块制作 74 1. 搭建结构 74 2. 控制样式 74 【任务3-8】制作“页脚”模块 75 效果分析 75 1. 结构分析 75 2. 样式分析 75 模块制作 75 1. 搭建结构 75 2. 控制样式 75 【项目总结】 76 【课后练习】 76 项目4 “爱家居”企业网站首页制作 78 【项目描述】 78 【任务4-1】认识盒子模型 79 需求分析 79 知识储备 79 【任务4-2】盒子模型基础属性 80 需求分析 80 知识储备 80 1. 边框属性 80 2. 内边距属性 85 3. 外边距属性 86 4. 背景属性 88 5. 宽度属性和高度属性 91 【任务4-3】盒子模型新增属性 92 需求分析 92 知识储备 92 1. 颜色透明 92 2. 圆角 93 3. 阴影 95 4. 渐变 96 【任务4-4】元素的类型与转换 100 需求分析 100 知识储备 100 1. 元素的类型 100 2. 标签 101 3. 元素类型的转换 102 知识拓展 104 块元素垂直外边距的合并 104 【任务4-5】元素的浮动 106 需求分析 106 知识储备 106 1. 元素的浮动属性 106 2. 清除浮动 108 3. overflow属性 112 【任务4-6】元素的定位 113 需求分析 113 知识储备 113 1. 元素的定位属性 113 2. 静态定位 114 3. 相对定位 114 4. 定位 115 5. 固定定位 116 6. z-index属性 116 【任务4-7】页面建设准备工作 117 网站素材的整理 117 1. 建立网站站点 117 2. “爱家居”企业网站首页切图 117 页面结构分析 117 1. HTML结构分析 117 2. CSS样式分析 118 定义基础样式 118 1. 页面布局 118 2. 定义基础样式 119 【任务4-8】制作“导航及banner” 模块 119 效果分析 119 1. 结构分析 119 2. 样式分析 119 模块制作 120 1. 搭建结构 120 2. 控制样式 120 【任务4-9】制作“热门**”模块 121 效果分析 121 1. 结构分析 121 2. 样式分析 121 模块制作 122 1. 搭建结构 122 2. 控制样式 122 【任务4-10】制作“夏日生活”模块 123 效果分析 123 1. 结构分析 123 2. 样式分析 124 模块制作 124 1. 搭建结构 124 2. 控制样式 124 【任务4-11】制作“版权信息”模块和 “悬浮框”模块 125 效果分析 125 1. 结构分析 125 2. 样式分析 125 模块制作 125 1. 搭建结构 125 2. 控制样式 125 【项目总结】 126 【课后练习】 126 项目5 “优课教育”网站首页制作 128 【项目描述】 128 【任务5-1】列表标签 129 需求分析 129 知识储备 129 1. 无序列表 129 2. 有序列表 130 3. 定义列表 131 4. 列表的嵌套应用 132 【任务5-2】使用CSS控制列表 项目符号 132 需求分析 132 知识储备 132 1. list-style复合属性 132 2. 通过设置背景图像的方式定义列表 项目符号 133 【任务5-3】超链接标签 133 需求分析 133 知识储备 133 1. 创建超链接 133 2. 创建锚点链接 135 3. 通过链接伪类控制超链接 135 【任务5-4】页面建设准备工作 137 网站素材整理 137 1. 建立站点 137 2. 切图 137 页面结构分析 138 1. HTML结构分析 138 2. CSS样式分析 138 定义基础样式 139 1. 页面布局 139 2. 定义基础样式 139 【任务5-5】制作“导航”模块 139 效果分析 139 1. 结构分析 139 2. 样式分析 140 模块制作 140 1. 搭建结构 140 2. 控制样式 140 【任务5-6】制作“banner”模块和 “课程分类”模块 141 效果分析 141 1. 结构分析 141 2. 样式分析 141 模块制作 141 1. 搭建结构 141 2. 控制样式 142 【任务5-7】制作“精品展示”模块 143 效果分析 143 1. 结构分析 143 2. 样式分析 144 模块制作 144 1. 搭建结构 144 2. 控制样式 144 【任务5-8】制作“版权信息”模块 146 效果分析 146 1. 结构分析 146 2. 样式分析 146 模块制作 146 1. 搭建结构 146 2. 控制样式 146 【项目总结】 147 【课后练习】 147 项目6 “千年之恋”注册页面制作 149 【项目描述】 149 【任务6-1】认识表格相关标签 150 需求分析 150 知识储备 150 1. 创建表格 150 2. 标签的属性 151 3. 标签的属性 154 4. 标签的属性 155 5. 标签的属性 157 【任务6-2】使用CSS控制表格样式 157 需求分析 157 知识储备 158 1. 使用CSS控制表格边框 158 2. 使用CSS控制单元格边距 159 3. 使用CSS控制单元格的宽度 和高度 160 【任务6-3】表单概述 161 需求分析 161 知识储备 161 1. 初识表单 161 2. 创建表单 161 【任务6-4】基础表单控件 162 需求分析 162 知识储备 162 1. input控件 162 2. textarea控件 165 3. select控件 166 【任务6-5】新增表单控件类型和属性 169 需求分析 169 知识储备 169 1. 新增input控件类型 169 2. 新增input控件属性 173 【任务6-6】使用CSS控制表单样式 179 需求分析 179 知识储备 179 【任务6-7】页面建设准备工作 181 网站素材整理 181 1. 建立站点 181 2. 切图 181 页面结构分析 182 1. HTML结构分析 182 2. CSS样式分析 183 定义基础样式 183 1. 页面布局 183 2. 定义基础样式 183 【任务6-8】制作“头部”和“导航” 模块 183 效果分析 183 1. 结构分析 183 2. 样式分析 184 模块制作 184 1. 搭建结构 184 2. 控制样式 184 【任务6-9】制作“banner”和“内容” 模块 185 效果分析 185 1. 结构分析 185 2. 样式分析 186 模块制作 186 1. 搭建结构 186 2. 控制样式 187 【任务6-10】制作“页脚”模块 189 效果分析 189 1. 结构分析 189 2. 样式分析 189 模块制作 190 1. 搭建结构 190 2. 控制样式 190 【项目总结】 190 【课后练习】 190 项目7 “视频8”首页制作 192 【项目描述】 192 【任务7-1】在网页中嵌入视频和音频 193 需求分析 193 知识储备 194 1. 视频、音频嵌入技术概述 194 2. 嵌入视频 195 3. 嵌入音频 197 4. 浏览器对视频和音频格式的 兼容性 197 5. 控制视频的宽度和高度 198 【任务7-2】在网页中添加过渡效果 200 需求分析 200 知识储备 200 1. transition-property属性 200 2. transition-duration属性 202 3. transition-timing-function属性 202 4. transition-delay属性 203 5. transition属性 204 【任务7-3】在网页中添加变形效果 204 需求分析 204 知识储备 204 1. 2D变形 204 2. 3D变形 209 【任务7-4】在网页中添加动画效果 212 需求分析 212 知识储备 213 1. @keyframes规则 213 2. animation-name属性 213 3. animation-duration属性 213 4. animation-timing-function属性 214 5. animation-delay属性 215 6. animation-iteration-count属性 215 7. animation-direction属性 215 8. animation属性 216 【任务7-5】页面建设准备工作 216 网站素材整理 216 1. 建立站点 216 2. 切图 217 页面结构分析 217 1. HTML结构分析 217 2. CSS样式分析 218 定义基础样式 218 1. 页面布局 218 2. 定义基础样式 219 【任务7-6】制作“引导栏”模块 219 效果分析 219 1. 结构分析 219 2. 样式分析 220 模块制作 220 1. 搭建结构 220 2. 控制样式 220 【任务7-7】制作“导航”模块 221 效果分析 221 1. 结构分析 221 2. 样式分析 221 模块制作 221 1. 搭建结构 221 2. 控制样式 222 【任务7-8】制作“banner”模块 223 效果分析 223 1. 结构分析 223 2. 样式分析 223 模块制作 223 1. 搭建结构 223 2. 控制样式 223 【任务7-9】制作“内容”模块 225 效果分析 225 1. 结构分析 225 2. 样式分析 226 模块制作 226 1. 搭建结构 226 2. 控制样式 227 【任务7-10】制作“页脚”模块 229 效果分析 229 1. 结构分析 229 2. 样式分析 229 模块制作 230 1. 搭建结构 230 2. 控制样式 230 【项目总结】 231 【课后练习】 231 项目8 “甜蜜约会”首页制作 233 【项目描述】 233 【任务8-1】JavaScript基础知识 234 需求分析 234 知识储备 234 1. JavaScript简介 234 2. JavaScript引入方式 236 3. JavaScript基本语法 237 4. 简单的JavaScript程序 238 【任务8-2】变量 239 需求分析 239 知识储备 239 1. 变量的声明 239 2. 变量的赋值 239 【任务8-3】数据类型和运算符 240 需求分析 240 知识储备 240 1. 数据类型 240 2. 运算符 241 【任务8-4】流程控制语句 245 需求分析 245 知识储备 245 1. 条件语句 245 2. 循环语句 250 3. 跳转语句 252 【任务8-5】函数 254 需求分析 254 知识储备 254 1. 函数的定义 254 2. 函数的调用 255 3. 函数中变量的作用域 255 【任务8-6】对象 256 需求分析 256 知识储备 256 1. 认识对象 256 2. 创建对象和删除对象属性 257 3. 内置对象 258 【任务8-7】数组 262 需求分析 262 知识储备 262 1. 初识数组 262 2. 创建数组 262 3. 数组的常用属性和方法 263 4. 二维数组 264 【任务8-8】BOM对象与DOM对象 265 需求分析 265 知识储备 265 1. BOM对象 265 2. DOM对象 271 【任务8-9】事件处理 276 需求分析 276 知识储备 276 1. 事件和事件调用 276 2. 常用的JavaScript事件 277 【任务8-10】页面建设准备工作 278 网站素材整理 278 1. 建立站点 278 2. 切图 278 页面结构分析 279 1. HTML结构分析 279 2. CSS样式分析 279 3. JavaScript效果分析 279 定义基础样式 279 1. 页面布局 279 2. 定义基础样式 280 3. 引入JavaScript文件 280 【任务8-11】制作“头部及导航”模块 280 效果分析 280 1. 结构分析 280 2. 样式分析 281 模块制作 281 1. 搭建结构 281 2. 控制样式 281 【任务8-12】制作“banner”模块 282 效果分析 282 1. 结构分析 282 2. 样式分析 282 3. JavaScript**分析 282 模块制作 283 1. 搭建结构 283 2. 控制样式 283 3. 添加JavaScript效果 284 【任务8-13】制作“简介”模块 285 效果分析 285 1. 结构分析 285 2. 样式分析 286 3. JavaScript**分析 286 模块制作 286 1. 搭建结构 286 2. 控制样式 286 3. 添加JavaScript效果 288 【任务8-14】制作“**”模块 288 效果分析 288 1. 结构分析 288 2. 样式分析 289 3. JavaScript**分析 289 模块制作 289 1. 搭建结构 289 2. 控制样式 290 3. 添加JavaScript效果 291 【任务8-15】制作“页脚”模块 292 效果分析 292 1. 结构分析 292 2. 样式分析 292 模块制作 293 1. 搭建结构 293 2. 控制样式 293 【项目总结】 293 【课后练习】 293