网页设计项目教程

本书包含12个项目, 项目涉及的主要知识点和技能点包括: 网站开发环境的选取和配置、DIV+CSS页面布局技术、HTML5标记与CSS3样式属性的使用、浮动与定位的设置、HTML5音视频技术、表单的应用、CSS3的动画制作、响应式页面开发、弹性盒布局技术等, 并配有微课视频、课件、源代码、任务拓展、阅读拓展、习题等数字教学资源。

项目1 制作第一个网页 1 任务1.1 认识网页、浏览器与WWW 1 1.1.1 Web的发展历程和相关概念 2 1.1.2 常用浏览器 5 1.1.3 HTML5的发展历程和相关概念 5 任务1.2 创建第一个HTML5网页 6 1.2.1 建立网站的目录结构 7 1.2.2 常用的集成开发环境 7 1.2.3 HTML5网页的基本结构 8 1.2.4 代码注释 11 项目小结 14 课后习题 14 项目2 搭建网页基础布局 15 任务2.1  创建CSS3样式表 15 2.1.1 CSS概述 16 2.1.2 CSS样式规则及引入方式 18 2.1.3 CSS基础选择器 23 2.1.4 CSS的特征 28 任务2.2 使用盒模型对网页进行基础布局 36 2.2.1 盒模型基础 37 2.2.2 盒模型的相关属性 41 2.2.3 盒模型的内减模式 55 2.2.4 背景样式基础 58 项目小结 72 课后习题 72 项目3 制作公司简介模块 74 任务3.1  文字内容的制作 74 3.1.1 文本相关的标记 75 3.1.2 CSS字体及文本样式 80 任务3.2 图像内容的制作 92 3.2.1 图像标记 93 3.2.2 元素显示模式转换 96 项目小结 102 课后习题 102 项目4 制作旅行故事模块 104 任务4.1  元素的浮动 104 4.1.1 浮动属性 105 4.1.2 清除浮动的不良影响（盒子高度塌陷及其解决办法） 110 任务4.2 元素的定位 117 4.2.1 定位的作用及分类 118 4.2.2 绝对定位与相对定位 120 4.2.3 固定定位的特点及应用案例 122 4.2.4 元素的层叠等级 123 项目小结 130 课后习题 130 项目5 制作新闻中心模块 132 任务5.1  列表的制作 132 5.1.1 列表标记 133 5.1.2 列表样式 136 项目小结 145 课后习题 146 项目6 制作导航模块 147 任务6.1  超链接的制作 147 6.1.1 超链接标记 148 6.1.2 CSS链接伪类选择器 151 6.1.3 CSS属性选择器 152 任务6.2  列表嵌套 160 6.2.1 列表的嵌套 160 6.2.2 CSS关系选择器 161 6.2.3 CSS伪类选择器 164 项目小结 172 课后习题 172 项目7 制作宣传视频模块 174 任务7.1  播放音频和视频 174 7.1.1 HTML5的音频标记 175 7.1.2 HTML5的视频标记 178 项目小结 185 课后习题 185 项目8 制作热门推荐模块 187 任务8.1  表格的制作 187 8.1.1 表格的相关标记 188 8.1.2 表格的样式设置 193 8.1.3 合并单元格 196 项目小结 200 课后习题 200 项目9 制作会员登录页面 202 任务9.1  表单的制作 202 9.1.1 表单的作用及构成 203 9.1.2 input表单控件 206 项目小结 222 课后习题 222 项目10 制作新闻详情页面 223 任务10.1  HTML5新增标记与属性 223 10.1.1 新增文档结构化标记 224 10.1.2 新增语义信息标记 229 10.1.3 新增全局属性 230 任务10.2  CSS3高级应用 235 10.2.1 线性渐变 235 10.2.2 径向渐变 236 10.2.3 文字渐变 239 项目小结 241 课后习题 242 项目11 制作页面动画效果 243 任务11.1  过渡效果的实现 243 任务11.2  变形与动画效果的实现 252 11.2.1 CSS3的变形属性 253 11.2.2 CSS3的动画属性 262 项目小结 269 课后习题 270 ? 项目12 制作响应式页面 271 任务12.1  页面布局的新技术 271 12.1.1 响应式网页设计 273 12.1.2 媒体查询 274 12.1.3 弹性盒布局 283 项目小结 300 课后习题 300