《网页设计与制作:Web 前端开发(第3版)》围绕专题类、商业类、教育类、门户类等主流网站类型,采用项目引导、任务驱动的编写方式,全面、翔实地介绍了 Web 前端开发的流程及相关技术,包括 HTML5、CSS3、JavaScript、响应式布局、开发网站等内容,并介绍 CMS 网站管理系统以及动态网站技术。 全书共分为 10 个项目,项目的构建由易到难,逐层深入,让学生在模拟的工作情境下切实掌握网页设计与制作的方法和技能,提高动手能力和解决实际问题的能力。 《网页设计与制作:Web 前端开发(第3版)》适合于高职高专院校计算机、电子商务及相关专业的学生学习使用,也可以作为网页设计与制作初学者和网页制作培训班学员的参考用书。

项目 1 网页制作基础知识 1 1.1 项目描述及分析 1 1.2 任务 1 **网站赏析 2 1.3 任务 2 网页基础知识 4 1.3.1 网页和网站的基本 概念 4 1.3.2 网页的组成元素 5 1.3.3 网页相关名词 7 1.3.4 Web 标准 10 1.3.5 响应式 Web 设计 11 1.4 任务 3 网站建设的一般流程 12 1.4.1 确定网站主题 12 1.4.2 规划网站结构 12 1.4.3 收集资料与素材 14 1.4.4 确定版面布局方式 14 1.4.5 制作网页 17 1.4.6 测试与发布网站 18 1.4.7 推广网站 18 1.4.8 网站的后期维护 18 1.5 网页制作入门 18 1.5.1 HTML5 简介 18 1.5.2 CSS3 简介 19 1.5.3 JavaScript 简介 19 1.5.4 常见浏览器 19 1.6 网页制作常用开发工具简介 21 1.6.1 网页制作与编辑工具 21 1.6.2 页面设计与美化工具 22 1.7 知识链接 22 1.7.1 网页制作的基本原则 22 1.7.2 认识图像 23 1.7.3 常见的建站方式 25 实训 26 项目 2 制作简单网页 27 2.1 项目描述及分析 27 2.2 任务 1 进行网站功能设计 29 2.3 任务 2 设计网站首页原型 29 2.3.1 认识 Photoshop 29 2.3.2 制作首页原型 32 2.3.3 首页原型的切片与 导出 33 2.4 任务 3 网页的制作与上传 35 2.4.1 认识 HBuilder 35 2.4.2 HBuilder 入门 37 2.4.3 域名和空间的申请 39 2.4.4 网站文件的上传 41 2.5 知识链接 42 2.5.1 网页中的色彩 42 2.5.2 网页基本元素的标准和 使用技巧 44 实训 45 项目 3 “太阳岛”旅游网站制作 47 3.1 项目描述及分析 47 3.2 任务 1 添加文本 49 3.3 任务 2 认识 HTML 51 3.3.1 HTML 文档基本格式 51 3.3.2 认识 HTML 标签 52 3.3.3 HTML 常用标签 54 3.4 任务 3 编辑文本 57 3.4.1 全国免费电话文本 设置 57 3.4.2 动态行文本编辑 58 3.5 任务 4 认识 CSS . 59 3.5.1 认识 CSS 样式表 60 3.5.2 创建并使用 CSS 样式 优化网页源码 63 3.6 任务 5 设计网站子页 66 3.7 知识链接——CSS 控制文本 样式 68 3.8 拓展学习——旅游类网站的 设计要点 70 3.8.1 旅游类网站的类型 70 3.8.2 旅游类网站的设计 要点 74 实训 75 项目 4 “盟院合作”专题网站制作 76 4.1 项目描述及分析 76 4.2 任务 1 认识盒子模型 77 4.3 盒子模型相关属性 78 4.3.1 盒子边框属性 78 4.3.2 内边距属性 81 4.3.3 外边距属性 82 4.3.4 背景属性 84 4.3.5 盒子的宽与高 86 4.4 浮动与定位 87 4.4.1 元素的浮动 87 4.4.2 元素的定位 95 4.5 项 目 制 作 99 4.5.1 页面布局及定义基础 样式 99 4.5.2 页眉制作 101 4.5.3 “主体”模块制作 104 4.5.4 页脚制作 109 4.6 知识链接——补充 CSS 选择器 111 4.7 拓展学习——专题网站制 作的设计要点 113 实训 114 项目 5 “艾上乐品”服装网站 制作 116 5.1 项目描述及分析 116 5.2 任务 1 列表标记及嵌套 117 5.2.1 列表标记 117 5.2.2 列表的嵌套 121 5.3 任务 2 CSS 控制列表样式 122 5.4 任务 3 认识表格标记 124 5.4.1 表格标记 124 5.4.2 CSS 控制表格样式 126 5.5 项目制作 129 5.5.1 页面布局及定义基础 样式 129 5.5.2 制作“头部”导航 模块 130 5.5.3 制作 banner 模块和 “精品展示”模块 131 5.5.4 制作“版权信息” 模块 135 5.6 知识链接——浏览器 兼容性 135 5.7 拓展学习——流行时尚类 网站的设计要点 137 实训 139 项目 6 影音网站制作 141 6.1 任务 1 了解 HTML5 多 媒体的特性 141 6.2 任务 2 了解 HTML5 常 用的多媒体格式 142 6.2.1 音频格式 142 6.2.2 视频格式 142 6.3 任务 3 HTML5 多媒体的 实现 143 6.3.1 audio 标签 143 6.3.2 video 标签 144 6.3.3 source 标签 144 6.4 任务 4 HTML5 表单的 应用 146 6.4.1 认识表单 146 6.4.2 HTML5 新增的表单 属性 147 6.4.3 HTML5标签 147 6.5 任务 5 影音网站项目 描述及分析 148 6.6 任务 6 添加多媒体文件 150 6.6.1 添加音频文件 150 6.6.2 添加视频文件 153 6.6.3 添加留言模块 154 6.7 知识链接——音频/视频 DOM 参考手册 156 实训 158 项目 7 “我要回家网”页面制作 159 7.1 项目描述及分析 159 7.2 任务 1 JavaScript 概述 161 7.2.1 JavaScript 简介 161 7.2.2 JavaScript 引入方式 163 7.2.3 JavaScript 基本语法 165 7.2.4 一个简单的 JavaScript 程序 165 7.3 任务 2 JavaScript 语言 基础 166 7.3.1 关键字和标识符 166 7.3.2 变量和数据类型 167 7.3.3 运算符和表达式 171 7.4 任务 3 程序流程控制 178 7.4.1 条件语句 178 7.4.2 循环语句 185 7.4.3 跳转语句 189 7.5 任务 4 函数 191 7.5.1 初识函数 191 7.5.2 函数的调用 191 7.5.3 函数中变量的 作用域 193 7.6 任务 5 结构布局及样式 定义 194 7.6.1 准备工作 194 7.6.2 制作思路分析 195 7.6.3 页面结构设计 196 7.6.4 基础样式定义 196 7.6.5 CSS/JS 文件引入 197 7.7 任务 6 制作“头部” 版块 197 7.7.1 “头部”版块效果 分析 197 7.7.2 “头部”版块制作 198 7.8 任务 7 制作“导航”版块 202 7.8.1 “导航”版块效果 分析 202 7.8.2 “导航”版块制作 202 7.9 任务 8 制作 banner 版块 和“时间”版块 204 7.9.1 banner 版块和“时 间”版块效果分析 204 7.9.2 banner 版块和“时 间”版块制作 205 7.10 任务 9 制作“客运信息” 版块 207 7.10.1 “客运信息”版块 效果分析 207 7.10.2 “客运信息”版块 制作 207 7.11 任务 10 制作“底部” 版块 210 7.11.1 “底部”版块效果 分析 210 7.11.2 “底部”版块制作 211 7.12 拓展学习——业务类网站 的设计要点 212 7.12.1 业务类网站的类型 212 7.12.2 业务类网站的设计 要点 213 实训 214 项目 8 “延庆外国语学校”页面 制作 215 8.1 项目描述及分析 215 8.2 任务 1 认识对象 217 8.2.1 什么是对象 217 8.2.2 对象的属性和方法 218 8.2.3 创建和删除对象 218 8.2.4 内置对象 220 8.3 任务 2 数组对象 225 8.3.1 初识数组 225 8.3.2 数组的常见操作 226 8.3.3 数组的常用属性和 方法 231 8.3.4 二维数组 234 8.4 任务 3 BOM 和 DOM 对象 235 8.4.1 BOM 对象 235 8.4.2 DOM 对象 242 8.5 任务 4 事件处理 248 8.5.1 什么是事件 248 8.5.2 事件处理程序的 调用 249 8.5.3 鼠标事件 251 8.5.4 键盘事件 252 8.5.5 表单事件 254 8.5.6 页面事件 256 8.6 任务 5 布局及定义基础 样式 257 8.6.1 准备工作 258 8.6.2 制作思路分析 259 8.6.3 页面结构设计 260 8.6.4 基础样式定义 261 8.6.5 CSS/JS 文件引入 261 8.7 任务 6 制作“头部及 导航”版块 261 8.7.1 “头部”版块效果 分析 261 8.7.2 “头部”版块制作 262 8.8 任务 7 制作 banner 版块 264 8.8.1 banner 版块效果 分析 264 8.8.2 banner 版块制作 264 8.9 任务 8 制作“学校简介” 版块 268 8.9.1 “学校简介”版块 效果分析 268 8.9.2 “学校简介”版块 制作 269 8.10 任务 9 制作“课程特色” 版块 272 8.10.1 “课程特色”版块 效果分析 272 8.10.2 “课程特色”版块 制作 273 8.11 任务 10 制作“页脚” 版块 279 8.11.1 “页脚”版块效果 分析 279 8.11.2 “页脚”版块制作 279 8.12 拓展学习——教育类网 站的设计要点 280 8.12.1 教育类网站的类型 280 8.12.2 教育类网站的设计 要点 282 实训 283 项目 9 网站动态化 284 9.1 项目描述及分析 284 9.2 任务 1 认识 CMS 286 9.2.1 静态网页与动态 网页 286 9.2.2 CMS 287 9.3 任务 2 静态页面模板 导入 288 9.3.1 DedeCMS 的安装和 环境配置 288 9.3.2 静态页面模板导入 295 9.3.3 模板的相关概念 297 9.4 任务 3 DedeCMS 常用 标签 298 9.4.1 了解 DedeCMS 中的 标签 298 9.4.2 DedeCMS 中的常用 标签 298 9.5 任务 4 首页动态化 302 9.5.1 网站栏目管理 302 9.5.2 首页动态化 305 9.6 任务 5 其他页面动态化 313 9.6.1 列表页(栏目页) 动态化 313 9.6.2 内容页动态化 315 9.7 任务 6 生成静态页面 319 9.8 知识链接——数据备份与 还原 320 实训 322 项目 10 响应式 Web 设计 323 10.1 项目描述及分析 323 10.2 任务 1 认识响应式布局 325 10.2.1 设计理念 325 10.2.2 响应式的实现 326 10.3 任务 2 响应式布局基础 知识 327 10.3.1 响应式设计相关 概念 327 10.3.2 响应式布局的实现 330 10.4 任务 3 响应式布局框架 332 10.4.1 常见的响应式布局 框架 332 10.4.2 Bootstrap 简介 333 10.5 任务 4 认识 Bootstrap 337 10.5.1 相关概念 337 10.5.2 CSS 布局 339 10.5.3 组件 341 10.6 任务 5 页面响应式布局 346 10.6.1 项目需求 346 10.6.2 头部响应式布局 348 10.6.3 主体部分响应式 布局 350 10.6.4 页脚部分响应式 布局 353 10.6.5 测试页面 353 10.7 知识链接——Bootstrap 中的其他组件 354 10.7.1 表单 354 10.7.2 复选框和单选按钮 355 10.7.3 卡片 356 实训 357 参考文献 358