本书以一个完整旅游公司网站的开发项目为主线,贯穿所有知识点,较为全面地介绍了Web前端开发中使用HTML5和CSS3标准化重构网页的技术。 全书共10个任务,包括初探Web前端技术、使用HTML5搭建旅游公司网站首页结构、使用DIV CSS实现旅游公司网站首页布局、使用CSS3美化超链接、使用CSS3制作导航、美化网页、添加用户交互界面——表单、使用Flex实现网页响应式布局、使用Bootstrap实现网页响应式布局、综合练习——儿童玩具商城网站设计与制作等。每一任务都配有课后练习,帮助读者及时巩固所学知识;*后一章的综合练习帮助读者进一步提升网页设计与制作的技能实践水平。

任务一 初探Web前端技术 1 任务描述 1 知识引入 1 1.网站、网页和主页 1 2.什么是Web和Web标准 4 3.Web前端技术的发展 4 4.搭建Web前端开发环境 5 5.Web页面的基本结构 6 6.浏览器兼容性 7 任务实现:动手编写第 一个前端页面 7 任务小结 10 课后练习 10 任务二 使用HTML5搭建旅游公司网站首页结构 11 任务描述 11 知识引入 11 1.HTML5的标题、段落和文本格式化标签 11 2.HTML5的图片标签 13 3.HTML5的列表标签 14 4.HTML5的超链接标签 15 5.HTML5的表格标签 17 6.传统的布局标签 和 19 7.HTML5的各种语义化分段元素 19 任务实现:搭建旅游公司网站首页结构 22 1.规划网站目录结构 22 2.分析首页文档结构 22 3.构建首页结构 22 4.添加网页内容 24 任务拓展:制作旅游公司网站二级页面 32 任务小结 35 课后练习 35 任务三 使用DIV CSS实现旅游公司网站首页布局 36 任务描述 36 知识引入 36 1.CSS规则的基本语法 36 2.CSS选择器 37 3.CSS规则的应用方式 40 4.CSS的层叠和继承 41 5.CSS盒子模型 43 6.CSS盒子的定位机制 46 7.DIV CSS布局剖析 51 任务实现:使用DIV CSS布局旅游公司首页 55 1.新建CSS样式表文件并应用到网页中 55 2.基础样式设置 55 3.头部布局与定位 56 4.主体内容.main_top区域布局与定位 56 5.主体内容.main_middle区域布局与定位 58 6.主体内容.main_bottom区域布局与定位 58 7.页脚区域布局与定位 58 任务拓展:使用CSS实现旅游公司网站二级页面“华阳湖景区”的布局结构 59 任务小结 61 课后练习 61 任务四 使用CSS3美化超链接 62 任务描述 62 知识引入 62 1.超链接的基本属性 62 2.CSS样式伪类 63 3.鼠标** 64 任务实现:实现首页中的超链接效果 66 1.设置首页头部导航条超链接样式 66 2.设置尾部超链接样式 68 任务拓展:实现二级页面“华阳湖景区”的导航条链接 72 任务小结 73 课后练习 73 任务五 使用CSS3制作导航 74 任务描述 74 知识引入 74 1.列表符号 74 2.图片符号 76 3.列表符号位置 77 任务实现:制作旅游公司网站首页导航 79 1.水平排列导航条 79 2.编排页面中间内容区域 81 任务拓展:制作二级菜单和职位列表 84 1.制作二级菜单 84 2.制作职位列表 89 任务小结 93 课后练习 93 任务六 美化网页 94 任务描述 94 知识引入 94 1.text-shadow 94 2.box-shadow 96 3.border-radius 99 4.background 101 5.opacity 102 6.Font Awesome字体图标 103 7.Animation动画属性 105 任务实现:美化旅游公司网站页面 108 1.为网页添加图标 108 2.为按钮添加阴影 108 3.设置图片透明度 109 任务拓展:利用阿里巴巴矢量图标库制作购物车 110 任务小结 112 课后练习 113 任务七 添加用户交互界面——表单 114 任务描述 114 知识引入 114 1.标签 115 2.元素 116 3.HTML5新增的类型 123 任务实现:制作旅游公司网站首页搜索框、意见反馈表 126 1.制作搜索框 126 2.制作意见反馈表 128 任务拓展:实现搜索框长度变化 133 任务小结 134 课后练习 134 任务八 使用Flex实现网页响应式布局 135 任务描述 135 知识引入 135 1.响应式布局基础知识 135 2.Flex布局 139 任务实现:使用Flex布局重构旅游公司首页 144 1.实现图片为响应式 145 2.设置怪异盒模型计算容器宽度 145 3.弹性文字 145 4.媒体查询 145 5.实现首页头部响应式效果 146 6.主体内容.main_top区域的实现 147 7.主体内容.main_middle区域的实现 148 8.主体内容.main_bottom区域的实现 149 9.实现页脚效果 150 任务拓展:使用Flex布局重构二级页面“华阳湖景区” 151 任务小结 152 课后练习 152 任务九 使用Bootstrap实现网页响应式布局 153 任务描述 153 知识引入 153 1.Bootstrap环境搭建 153 2.容器 154 3.栅格系统 154 4.样式 155 5.组件 156 任务实现:使用Bootstrap重构旅游公司首页 157 1.下载Bootstrap 157 2.网页头部代码实现 158 3.图片轮播效果代码实现 159 4.公司介绍区域代码实现 160 5.景区图片部分代码实现 161 6.求职信息区域代码实现 162 7.页脚区域代码实现 164 任务拓展:使用Bootstrap重构二级页面“华阳湖景区” 164 任务小结 167 课后练习 167 任务十 综合练习——儿童玩具商城网站设计与制作 168 任务描述 168 任务实现:设计与制作儿童玩具商城网站 169 1.规划网站目录结构 169 2.首页代码实现 170 3.“进口玩具”页面代码实现 191 4.“相关文章”页面代码实现 201 5.“联系我们”页面代码实现 207 任务小结 209 课后练习 209