高职高专“十三五”规划教材:HTML5+CSS3网页布局任务教程

图书标准信息

• 作者 斯琴高娃
• 出版社 中国铁道出版社
• 出版时间 2020-09
• 版次 1
• ISBN 9787113271800
• 定价 39.00元
• 装帧 其他
• 开本 16开
• 纸张 胶版纸
• 页数 220页
• 字数 327千字

【内容简介】

本书根据HTML5和CSS3标准详细讲解了网页的布局和制作方法。全书共分12个单元，内容包括：准备工作、HTML5 常见元素、网页整体布局的搭建、网页主体内容的构建、网页页眉的构建、网页主导航的构建、网页横幅广告的构建、网页页脚的构建，以及混合布局的综合网页的构建。每个单元包含若干个任务，各任务之间有连贯性，强化和覆盖相关知识点。本书与Web前端开发工作岗位接轨，强调三方面的技能：一是针对只会写局部不会写整体的问题，培养基于网页设计稿（或效果图）来规划网页，从网页整体入手，先搭建结构，再填充内容的技能；二是归纳和强化常用的方法，使读者熟练掌握方法，而不仅是知识点；三是学会写代码，而不是用Dreamweaver的可视化操作来生成代码。本书适合作为高职高专院校HTML5 CSS3 集中实训课程或理实一体化课程的教材，也可作为网页设计与制作爱好者的自学读物

【作者简介】

   斯琴高娃，海南职业技术学院

【目录】

第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 ...................................................................