本书主要介绍HTML5和CSS3网页制作技术。全书共12章。第1~3章介绍网页制作技术基础知识;第4章介绍盒子模型的概念和应用,该模型是网页制作技术的核心和基础;第5章介绍链接与列表的应用;第6章介绍如何利用浮动与定位实现网页布局;第7章介绍表格与表单的应用;第8章介绍CSS3的选择器;第9章介绍CSS3的过渡、变形及动画技术;第10章介绍CSS3的弹性布局;第11章介绍多媒体与开放平台实用工具的应用;第12章介绍如何制作一个完整的网站首页,以达到整合HTML5和CSS3各方面内容与技巧的目的。各章均包含若干实验,每个实验都有详细的分析过程和清晰的制作过程,便于读者在实践中逐步掌握网页制作技术。
本书可作为大中专院校、培训学校的计算机及相关专业的实验实训教材,也可作为网页设计与制作、网站开发等相关人员的参考书。
“网页设计与制作”是计算机相关专业的专业基础课程之一。HTML与CSS是网页制作技术的核心基础,也是网页制作者必须掌握的基础知识,二者在网页制作中不可或缺。HTML5是最新的HTML标准,CSS3是CSS最新的版本,本书主要介绍HTML5和CSS3网页制作技术。只有通过实践才能扎实掌握网页制作技术,因此本书着重于实践指导。
本书特色
· 以理论为基础,以实践为目标
本书每章内容均由知识点梳理、基础练习和动手实践三部分组成,前两个部分是理论,最后一个部分是基于理论的实践。这种安排能让读者在学习过程中,透彻理解知识点,而后通过基础练习巩固理论知识,最后再通过动手实践达到学以致用。
· 实验内容丰富、实用
书中每个实验都是作者精心挑选和设计的,是作者在实际开发中的经验凝结。实验给出了深入浅出的分析以及简明清晰的制作步骤。实验案例经典,能使学生举一反三,直接在实际项目中使用。每个实验具体内容大体包括如下五个要点:
(1) 考核知识点(知识点复习纲要);
(2) 练习目标(实验目的);
(3) 实验内容及要求(实验要求);
(4) 实验分析(实现思路);
(5) 实现步骤(制作步骤)。
· 图文并茂
实验分析不仅有文字描述,还有分析图示意,实现步骤中的每个阶段都有阶段性的效果图。
· 与时俱进
HTML5是最新的HTML标准,CSS3是CSS的最新版本,本书以HTML5和CSS3为平台介绍网页制作技术,书中案例都是以最新规范实现的。
读者对象
本书可作为大中专院校、培训学校的计算机及相关专业的实验实训教材,也可供网页设计与制作、网站开发等从业人员参考。
本书由桂林电子科技大学李新荣主编,陈小海、邓杰、谢绍敏任副主编。由于信息技术的发展非常迅速,加之作者水平有限,书中不足之处在所难免,欢迎读者不吝指正。在阅读本书时,如发现问题可以通过电子邮件(123990509@qq.com)与编者联系。
编 者?
2022年2月
第1章 网页制作基础 1
1.1 知识点梳理 1
1.2 基础练习 1
1.3 动手实践 2
1.3.1 实验1 ?Dreamweaver初始化设置 2
1.3.2 实验2 用Dreamweaver制作第一个网页 4
1.3.3 实验3 下载及安装VSCode 7
1.3.4 实验4 ?VSCode插件的获取及安装 9
1.3.5 实验5 用VSCode制作第一个网页 11
第2章 HTML入门 14
2.1 知识点梳理 14
2.2 基础练习 19
2.3 动手实践 19
2.3.1 实验1 ?HTML元素和属性 19
2.3.2 实验2 图文混排 21
2.3.3 实验3 淘宝宝贝展示 25
2.3.4 实验4 标签综合练习(月记文案) 26
第3章 CSS入门 29
3.1 知识点梳理 29
3.2 基础练习 33
3.3 动手实践 34
3.3.1 实验1 文章排版一 34
3.3.2 实验2 文章排版二 36
3.3.3 实验3 文章排版三 38
3.3.4 实验4 新品上市 41
第4章 盒子模型 44
4.1 知识点梳理 44
4.2 基础练习 50
4.3 动手实践 51
4.3.1 实验1 潮流新品宝贝展示 51
4.3.2 实验2 酷车e族宝贝展示 56
4.3.3 实验3 盒子属性综合实战 60
第5章 链接与列表 63
5.1 知识点梳理 63
5.2 基础练习 65
5.3 动手实践 66
5.3.1 实验1 页码导航条 66
5.3.2 实验2 图片热点超链接 68
5.3.3 实验3 无序列表制作魅力彩妆岁末盛惠广告 71
5.3.4 实验4 自定义列表展示商品 73
5.3.5 实验5 服装鞋包菜单制作 76
第6章 浮动与定位 80
6.1 知识点梳理 80
6.2 基础练习 82
6.3 动手实践 82
6.3.1 实验1 食品农业市场商品展示 82
6.3.2 实验2 商品分类二级菜单 88
6.3.3 实验3 天猫商城右侧通道工具栏 94
第7章 表格与表单 100
7.1 知识点梳理 100
7.2 基础练习 104
7.3 动手实践 105
7.3.1 实验1 信用评价表格 105
7.3.2 实验2 宝贝发布表单 110
7.3.3 实验3 服装上线申请登记表 114
第8章 CSS3选择器 122
8.1 知识点梳理 122
8.2 基础练习 124
8.3 动手实践 125
8.3.1 实验1 慕课课程列表 125
8.3.2 实验2 模拟小米元素动态闹铃 129
8.3.3 实验3 模拟新浪网站导航栏 133
8.3.4 实验4 模拟新浪体育网站导航栏 137
8.3.5 实验5 汉堡菜单 139
8.3.6 实验6 海洋生物 141
第9章 过渡、变形及动画 146
9.1 知识点梳理 146
9.2 基础练习 150
9.3 动手实践 151
9.3.1 实验1 模仿瑞丽STAR展示效果 151
9.3.2 实验2 能位移的标题列表 157
9.3.3 实验3 带延伸线动画的导航栏 159
9.3.4 实验4 蒲公英的梦想 161
第10章 弹性布局 166
10.1 知识点梳理 166
10.2 基础练习 168
10.3 动手实践 169
10.3.1 实验1 用弹性盒子模型布局制作中秋节快乐卡 169
10.3.2 实验2 用弹性布局实现京东导航 172
第11章 多媒体与开放平台实用工具的应用 175
11.1 知识点梳理 175
11.2 基础练习 176
11.3 动手实践 177
11.3.1 实验1 制作学校的地图名片 177
11.3.2 实验2 在网站上设置QQ在线客服 179
11.3.3 实验3 社会化分享按钮 182
11.3.4 实验4 网页中应用视频分享 185
第12章 网页布局综合实践 187
12.1 知识点梳理 187
12.2 基础练习 187
12.3 动手实践 189
实验 模仿制作“时尚芭莎”网站首页 189
附录 各章基础练习参考答案 202
参考文献 208