网页设计与制作

本书选取实际开发中常用的经典案例和前沿应用，按 Web 页面设计制作的知识技能结合由浅入深的学习过程进行设计。书中共有 8 个任务，以项目任务为导向串讲 Web 开发中的知识技能，主要包括 HTML 页面结构、各类标签及相关属性、CSS 定义和应用、CSS 选择器、CSS 常用属性、CSS3 新增样式等。首先通过 HTML 结构、各类标签语法等知识技术快速入门，呈现 Web 页面内容；其次通过 CSS 样式应用规整布局，实现页面排版布局与图文美化；之后通过表单交互网页、音视频媒体网页、动画特效网页、瀑布流布局网页设计开发巩固关键技术并逐步过渡到响应式网页的设计与开发。由技术到思维地为读者分析实现 Web 页面的技术和关键点，目的在于让初学者通过这些任务触类旁通，为深入学习 Web 知识打下坚实的基础。

Web前端工程师是互联网时代Web产品研发中不可缺少的专业角色。本书从Web开发实际应用的角度，以任务项目开发为主线，把HTML5、CSS3的Web前端开发理论知识、实战技能融入8个任务，引导读者从HTML5设置网页内容、CSS定义样式美化网页布局等基础任务开始，逐步掌握图文网页、表单交互网页、音视频媒体网页、动画特效网页、瀑布流布局网页等页面开发，并在熟练编程的基础上，理解自适应网页设计和响应式网页设计关键技术，掌握响应式网页的设计与开发。本书配以思维导图帮助读者梳理知识点，将知识点融入到Web前端开发实际岗位案例中，有效掌握核心技巧，力求提高读者的Web网页开发水平。本书既可作为高等职业院校计算机及相关专业Web前端设计与开发课程的教材，也可供从事网页设计与制作、网页编程、Web应用开发等行业人员参考阅读。

李利正，女，就职于绍兴职业技术学院，毕业于浙江师范大学，硕士。

任务1创建第一个网页
1.1基本条件和概念
1.1.1学习工具
1.1.2基本概念
1.1.3任务：建站点建网页
1.2格式排版标签
1.2.1段落标签与换行标签
1.2.2标题标签
1.2.3水平线标签
1.2.4无语义标签
1.2.5文本标签
1.3列表标签
1.3.1有序列表
1.3.2无序列表
1.3.3自定义列表
1.3.4嵌套列表
1.4图像
1.5超链接
1.5.1超链接的属性
1.5.2邮箱链接
1.5.3锚点链接
1.6表格
1.7任务实施
任务2用CSS美化你的网页
2.1CSS概念
2.2CSS的使用方法
2.3CSS声明与应用
2.3.1CSS格式
2.3.2CSS注释
2.3.3CSS单位
2.3.4CSS颜色
2.3.5选择器
2.4CSS常见属性
2.4.1CSS字体
2.4.2CSS文本
2.4.3CSS盒子模型
2.4.4CSS边框
2.4.5CSS链接
2.4.6CSS列表
2.4.7CSS背景
2.4.8CSS浮动
2.4.9CSS定位
2.5任务实施
任务3规整网页布局
3.1布局方式
3.2固定布局
3.3单列布局
3.3.1等宽单列布局
3.3.2非等宽单列布局
3.4两列布局
3.4.1浮动方式实现两列布局
3.4.2position实现两列布局
3.5三列布局
3.5.1圣杯布局
3.5.2双飞翼布局
3.6嵌套混合布局
3.7任务实施
3.7.1整体布局
3.7.2第二层布局
3.7.3第三层布局
3.7.4各模块内容设计
任务4通过表单与用户交互
4.1认识表单
4.1.1表单域
4.1.2表单元素
4.1.3HTML5新增表单类型与属性
4.1.4表单验证
4.2任务实施
任务5应用媒体标签制作个性化播放器
5.1HTML5音频标签
5.2HTML5视频标签
5.3HTML5音视频标签使用中的“坑”
5.4音视频标签的DOM操作
5.5任务实施
任务6制作活动抽奖大转盘
6.1CSS坐标系统与角度单位
6.2transform属性
6.3transition属性
6.4animation属性
6.5@keyframes属性
6.6任务实施
任务7纯CSS实现瀑布流布局
7.1多列布局实现瀑布流网页布局
7.1.1多列布局知识图谱
7.1.2多列布局前导知识
7.1.3任务实施
7.2弹性布局实现瀑布流布局
7.2.1弹性布局知识图谱
7.2.2弹性布局前导知识
7.2.3容器属性
7.2.4项目属性
7.2.5利用弹性布局设计微信底部导航栏
7.2.6任务实施
7.3网格布局实现瀑布流布局
7.3.1网格布局知识图谱
7.3.2网格布局前导知识
7.3.3任务实施
任务8响应式网页开发
8.1前导知识
8.1.1设备屏幕
8.1.2关于视口
8.1.3媒体查询技术
8.1.4响应式图片技术
8.1.5流式布局
8.2响应式框架制作旅游网页
8.2.1安装Bootstrap
8.2.2组件
8.2.3布局