计算机类教材 > 网页设计与网站建设
HTML5+CSS3 网页布局任务教程
书号：9787113271800 套系名称：高职高专“十三五”规划教材
作者：斯琴高娃 出版日期：2020-09-01
定价：39.00 页码 / 开本：220 /16
策划编辑：唐旭 责任编辑：陆慧萍
适用专业：计算机教材 适用层次：本科
最新印刷时间：2022-08-01
资源下载
教学课件
教学素材
习题答案
教学案例
教学设计(暂无)
教学视频(暂无)
内容简介
前言
目录
作者介绍
图书特色
本书根据HTML5和CSS3标准详细讲解了网页的布局和制作方法。全书共分12个单元，内 容包括：准备工作、HTML5 常见元素、网页整体布局的搭建、网页主体内容的构建、网页页眉 的构建、网页主导航的构建、网页横幅广告的构建、网页页脚的构建，以及混合布局的综合网页 的构建。每个单元包含若干个任务，各任务之间有连贯性，强化和覆盖相关知识点。 本书与Web前端开发工作岗位接轨，强调三方面的技能：一是针对只会写局部不会写整体的 问题，培养基于网页设计稿（或效果图）来规划网页，从网页整体入手，先搭建结构，再填充内 容的技能；二是归纳和强化常用的方法，使读者熟练掌握方法，而不仅是知识点；三是学会写代 码，而不是用Dreamweaver的可视化操作来生成代码。 本书适合作为高职高专院校HTML5+CSS3 集中实训课程或理实一体化课程的教材，也可作 为网页设计与制作爱好者的自学读物
HTML5 和CSS3 是HTML 和CSS 的较新标准。HTML 和CSS 是Web 前端开发基础技术，分别 用于实现网页的结构和表现，是学习后续前端脚本语言JavaScript 和前端开发框架（Bootstrap、 jQuery 等）的重要基础。 作者将长期的高职教学实践所得精心提炼到了本书中，充分考虑了高职学生的学情，按照初 学者的认知规律循循善诱，按照开发者的思考路线分步讲解，在精心编排的50 多个网页制作任 务中渗透了实际网站开发中常用的方法、经验，覆盖了从无到有地制作一个完整的网页所需的知 识和技术。 本书共分12 个单元，单元内的任务之间互补强化，单元之间衔接连贯。 第1 单元 准备工作，介绍HTML5 和CSS3 是什么，如何搭建网页制作环境，如何使用网页 编辑器的编辑和调试功能。 第2 单元 HTML5 常见元素，介绍制作一个完整的网页一般需要哪些HTML5 元素，如何使 用这些元素。 第3 单元 网页整体布局的搭建，介绍典型的网页布局有哪些，搭建网页结构用到哪些“盒 子”，实现这些布局设置哪些样式。 第4 单元 网页主体内容的构建1——文本的制作，介绍典型的网页布局中主体内容区的文本 内容的制作方法。 第5 单元 网页主体内容的构建2——图片的制作，介绍典型的网页布局中主体内容区的图片 内容的制作方法。 第6 单元 网页主体内容的构建3——表格的制作，介绍典型的网页布局中主体内容区的表格 内容的制作方法。 第7 单元 网页主体内容的构建4——表单的制作，介绍典型的网页布局中主体内容区的表单 内容的制作方法。 第8 单元 网页页眉的构建，介绍典型的网页布局中页眉的制作方法。 第9 单元 网页主导航的构建，介绍典型的网页布局中主导航的制作方法。 第10 单元 网页横幅广告的构建，介绍典型的网页布局中横幅广告的制作方法。 第11 单元 网页页脚的构建，介绍典型的网页布局中页脚的制作方法。 第12 单元 混合布局的综合网页的构建，介绍复杂网页的制作方法。 本书主要特色： ① 与Web 前端开发工作岗位接轨，教学生直接写HTML5 和CSS3 代码，而不是教可视化 操作。 ② 教学生基于网页设计稿（或效果图）制作完整的网页，而不是仅仅会做网页一角。 ③ 归纳和强化常用的方法，让学生熟练掌握方法，而不仅仅是知识点。 ④ 每个实训任务都有详尽的步骤和逻辑，而不是直接粘贴成片的代码。 课时数及选用建议（仅供参考）： 前 言 单 元 任 务 课时数建议 选 用 建 议 任务1.1~1.2 2 第1单元 任务1.3~1.4 2 任务2.1~2.2 2 任务2.3~2.4 2 任务2.5~2.6 2 任务2.7~2.8 2 任务2.9~2.10 2 第2单元 任务2.11 2 理实一体化课程： 选用所有任务。 集中实训课程： 省略 任务3.1 4 第3 单元 任务3.2 4 任务3.3 2 理实一体化课程： 选用所有任务。 集中实训课程： 选用所有任务 任务4.1 2 任务4.2 2 任务4.3 2 任务4.4 2 任务4.5 4 第4单元 任务4.6 4 理实一体化课程： 任务4.2、4.5、4.6 或全部。 集中实训课程： 任选 任务5.1~5.2 2 任务5.3 2 任务5.4 2 任务5.5~5.6 2 任务5.7 2 第5单元 任务5.8~5.9 2 理实一体化课程： 任务5.2、5.3、5.4、5.5、5.7 或全部。 集中实训课程： 任选 任务6.1 2 第6单元 任务6.2~6.3 2 任务7.1 2 第7 单元 任务7.2 2 任务7.3 2 任务8.1 2 第8单元 任务8.2 2 任务9.1 2 第9单元 任务9.2 2 任务10.1 2 第10 单元 任务10.2 2 任务11.1 2 第11 单元 任务11.2 2 理实一体化课程： 任选。 集中实训课程： 任选 任务12.1 8 第12 单元 任务12.2 12 理实一体化课程： 省略。 集中实训课程： 任选 合 计 100 本书由斯琴高娃任主编，孟清、谭海中、雷琳任副主编。其中：斯琴高娃编写第3~5 单元、 第12单元，孟清编写第6~8 单元、谭海中编写第1、2 单元，雷琳编写第9~11 单元。 由于时间仓促，编者水平有限，书中难免存在疏漏和不足之处，敬请广大读者批评指正，联 系方式：378083015@qq.com。 编 者 2020 年6 月
第1 单元 准备工作.......................................................................................... 1 任务1.1 认识HTML5 和CSS3 ................................................................................................ 1 任务1.2 搭建软件环境........................................................................................................... 2 任务1.2.1 安装HBuilder X ............................................................................................. 3 任务1.2.2 安装Sublime Text3 ........................................................................................ 5 任务1.3 分析第一个网页........................................................................................................ 6 任务1.4 了解网页编辑和调试技巧........................................................................................ 9 单元小结............................................................................................................................... .. 10 习题............................................................................................................................... .......... 10 第2 单元 HTML5 常见元素............................................................................ 12 任务2.1 认识标题元素......................................................................................................... 12 任务2.2 认识段落元素......................................................................................................... 14 任务2.3 认识换行元素、水平线元素.................................................................................. 15 任务2.4 认识图像元素......................................................................................................... 16 任务2.5 认识超链接............................................................................................................. 17 任务2.6 认识无序列表......................................................................................................... 18 任务2.7 认识有序列表......................................................................................................... 19 任务2.8 认识自定义列表...................................................................................................... 20 任务2.9 认识表格元素......................................................................................................... 21 任务2.10 认识表单元素....................................................................................................... 23 任务2.11 认识音频、视频元素............................................................................................ 24 单元小结............................................................................................................................... .. 26 习题............................................................................................................................... .......... 26 第3 单元 网页整体布局的搭建...................................................................... 27 任务3.1 单列布局的搭建...................................................................................................... 27 任务3.1.1 网页结构的实现........................................................................................... 28 任务3.1.2 网页样式的实现........................................................................................... 29 任务3.2 左宽右窄两列布局（F 式布局）的搭建................................................................ 35 任务3.2.1 网页结构的实现........................................................................................... 35 任务3.2.2 网页样式的实现........................................................................................... 36 任务3.3 三列布局的搭建...................................................................................................... 44 目 录 2 HTML5+CSS3 网页布局任务教程 任务3.3.1 网页结构的实现........................................................................................... 44 任务3.3.2 网页样式的实现........................................................................................... 45 单元小结............................................................................................................................... .. 51 习题............................................................................................................................... .......... 51 第4 单元 网页主体内容的构建1——文本的制作........................................... 53 任务4.1 “海南岛简介”页的制作（标题+段落）................................................................ 53 任务4.1.1 网页结构的实现........................................................................................... 54 任务4.1.2 网页基本样式的实现................................................................................... 56 任务4.1.3 简介标题样式和段落样式的实现................................................................. 58 任务4.2 “学院简介”页的制作（头部+段落） ................................................................... 63 任务4.2.1 网页结构的实现........................................................................................... 64 任务4.2.2 网页基本样式的实现................................................................................... 65 任务4.2.3 简介头部的样式和正文样式的实现............................................................. 66 任务4.3 “美丽的草原”页的制作（头部+章节）................................................................ 69 任务4.3.1 网页结构和基本样式的实现........................................................................ 70 任务4.3.2 文章头部样式和章节样式的实现................................................................. 72 任务4.4 “学院首页”两行对称栏目的制作......................................................................... 73 任务4.4.1 网页结构和基本样式的实现........................................................................ 74 任务4.4.2 两列对称栏目样式的实现............................................................................ 78 任务4.5 “学院首页”三列非对称栏目的制作...................................................................... 81 任务4.5.1 网页结构和基本样式的实现........................................................................ 82 任务4.5.2 三列非对称栏目样式的实现........................................................................ 85 任务4.6 “专业介绍”页的制作（左窄右宽的两列布局）................................................... 88 任务4.6.1 网页结构和基本样式的实现........................................................................ 89 任务4.6.2 左窄右宽的两列布局的实现........................................................................ 91 单元小结............................................................................................................................... .. 96 习题............................................................................................................................... .......... 96 第5 单元 网页主体内容的构建2——图片的制作........................................... 98 任务5.1 “学院首页”两行对称栏目插图............................................................................. 98 任务5.2 “学院首页”三列非对称栏目插图....................................................................... 101 任务5.3 F 式布局、左图右文............................................................................................. 106 任务5.4 两列布局、上图下文............................................................................................ 109 任务5.5 文字环绕图片1 .................................................................................................... 113 任务5.6 文字环绕图片2 .................................................................................................... 116 任务5.7 多张图片紧凑排列................................................................................................ 117 任务5.8 设置背景图像1 .................................................................................................... 121 任务5.9 设置背景图像2 .................................................................................................... 123 目 录3 单元小结............................................................................................................................... 125 习题............................................................................................................................... ........ 126 第6 单元 网页主体内容的构建3——表格的制作......................................... 127 任务6.1 典型的表格........................................................................................................... 127 任务6.2 单元格合并........................................................................................................... 131 任务6.3 隔行换色表格....................................................................................................... 132 单元小结............................................................................................................................... 134 习题............................................................................................................................... ........ 134 第7 单元 网页主体内容的构建4——表单的制作......................................... 135 任务7.1 制作网页一角的表单............................................................................................ 135 任务7.2 制作网页任意位置的表单.................................................................................... 140 任务7.3 制作遮罩层上的表单............................................................................................ 147 单元小结............................................................................................................................... 151 习题............................................................................................................................... ........ 151 第8 单元 网页页眉的构建........................................................................... 153 任务8.1 制作典型页眉1 .................................................................................................... 153 任务8.2 制作典型页眉2 .................................................................................................... 156 单元小结............................................................................................................................... 160 习题............................................................................................................................... ........ 160 第9 单元 网页主导航的构建....................................................................... 161 任务9.1 制作不带下拉菜单的导航.................................................................................... 161 任务9.2 制作带下拉菜单的导航........................................................................................ 163 单元小结............................................................................................................................... 167 习题............................................................................................................................... ........ 167 第10 单元 网页横幅广告的构建.................................................................. 168 任务10.1 制作窄幅横幅广告.............................................................................................. 168 任务10.2 制作宽幅横幅广告.............................................................................................. 169 单元小结............................................................................................................................... 171 习题............................................................................................................................... ........ 171 第11 单元 网页页脚的构建......................................................................... 172 任务11.1 制作典型页脚1................................................................................................... 172 任务11.2 制作典型页脚2................................................................................................... 174 单元小结............................................................................................................................... 178 习题............................................................................................................................... ........ 178 4 HTML5+CSS3 网页布局任务教程 第12 单元 混合布局的综合网页的构建........................................................ 179 任务12.1 “旅游美食网”首页的构建................................................................................. 179 任务12.2 仿“中国知网”首页的构建............................................................................... 187 单元小结............................................................................................................................... 204 习题............................................................................................................................... ........ 205 知识解读索引................................................................................................ 206
斯琴高娃，海南职业技术学院
本书与Web前端开发工作岗位接轨，强调三方面的技能：一是针对只会写局部不会写整体的问题，培养基于网页设计稿（或效果图）来规划网页，从网页整体入手，先搭建结构，再填充内容的技能；二是归纳和强化常用的方法，使读者熟练掌握方法，而不仅是知识点；三是学会写代码，而不是用Dreamweaver的可视化操作来生成代码。