HTML+CSS+DIV网页设计与布局(第3版)(微课版)

本书围绕HTML基础、CSS层叠样式技术、div网页布局以及JavaScript语言进行讲解，主要内容包括认识网站开发，网页文字和图片，超链接，表格，多媒体和列表，表单，认识CSS，设置文字和文本样式，设置背景、边框、边距和补白，设置表格、列表和滚动条样式，CSS3特效和动画，控制元素布局，网页布局与设计技巧，JavaScript，网页布局综合案例等。 本书结构合理、条理清晰、实用性强。从第2章开始，每个知识点都会对应一个实例讲解，让读者在不断学习理论知识的同时可以通过开发工具实际编写对应的网页效果，通过边学边练的方式，巩固和加深对每个知识点的理解。此外，本书的每章都附有习题和上机指导，供读者在课后练习和上机实验，进一步加强读者对知识点的掌握。

武汉工程科技学院计算机与人工智能学院，系主任。曾获湖北省“创领行动”暨创业培训讲师大赛省级三等奖；武汉工程科技学院第四届教师教学创新大赛二等奖。先后主持教育部供需对接就业育人项目1项、主持校级课程思政示范课1项、主持校级教改项目1项；指导学生参加计算机设计大赛、华为ICT大赛、新华三杯大学生数字技术大赛等赛事获国家级比赛奖项2项，省级奖项7项。

第 1章 认识网站开发 1 1.1　网站开发概述　1 1.1.1　网页概述　1 1.1.2　网页构成元素　1 1.1.3　网站建设流程　2 1.1.4　网站开发软件　3 1.2　HTML简介　4 1.2.1　HTML基本概念　4 1.2.2　HTML基本结构　4 1.3　一个简单的HTML实例　4 1.3.1　编写HTML代码　4 1.3.2　运行HTML文件查看效果　5 1.4　HTML基本标签　6 1.4.1　文件类型指令　6 1.4.2　文件类型标签　6 1.4.3　HTML头标签　6 1.4.4　HTML主体标签　7 1.4.5　页面标题　7 1.5　HTML页面的元信息META　7 1.5.1　页面的关键字　7 1.5.2　页面的对外说明　8 1.5.3　网页的作者信息　8 1.5.4　网页的开发语言　8 1.5.5　网页的定时跳转　8 1.6　小结　8 习题　9 上机指导　9 实验一　9 实验二　10 第　2章 网页文字和图片　11 2.1　文字格式　11 2.1.1　文字大小　11 2.1.2　字体　12 2.1.3　字体颜色　13 2.1.4　加粗与斜体　15 2.1.5　插入线与删除线　16 2.1.6　上标与下标　16 2.2　与文字排版相关的标签　17 2.2.1　文本缩进　17 2.2.2　换行　17 2.2.3　段落　18 2.2.4　预定义格式　19 2.2.5　水平分隔线　20 2.3　在网页中插入图片　21 2.4　HTML5文档结构标签　22 2.5　小结　24 习题　24 上机指导　25 实验一　25 实验二　25 第3章　超链接　27 3.1　创建超链接　27 3.1.1　超链接标签　27 3.1.2　链接地址　28 3.1.3　打开链接的方式　29 3.2　锚点　30 3.2.1　创建锚点　30 3.2.2　链接到本页锚点　30 3.2.3　链接到其他网页的锚点　31 3.3　图像的超链接　32 3.3.1　将整个图像设置为链接　32 3.3.2　设置图像热点区域　33 3.4　小结　33 习题　34 上机指导　34 实验一　34 实验二　35 实验三　36 第4章　表格　37 4.1　创建表格　37 4.2　表格属性　38 4.2.1　表格宽度　38 4.2.2　表格高度　39 4.2.3　表格背景图片　41 4.2.4　单元格间距　42 4.2.5　表格内单元格与文字的距离　43 4.3　表格边框　44 4.3.1　边框宽度　44 4.3.2　边框颜色　46 4.4　设置表格行的对齐方式　47 4.4.1　垂直对齐方式　47 4.4.2　水平对齐方式　48 4.5　行和列的合并　49 4.5.1　列的合并　49 4.5.2　行的合并　50 4.6　表格结构　51 4.6.1　表头　51 4.6.2　主体　52 4.6.3　表尾　53 4.7　表格标题　55 4.8　表格嵌套　56 4.9　小结　57 习题　57 上机指导　58 实验一　58 实验二　59 实验三　60 第5章　多媒体和列表　62 5.1　多媒体元素　62 5.2　视频元素　62 5.2.1　插入视频元素　62 5.2.2　循环播放视频　63 5.2.3　自动播放视频　64 5.2.4　设置视频封面　65 5.3　音频元素　66 5.4　无序列表　67 5.4.1　无序列表结构　67 5.4.2　无序列表的列表项样式　68 5.5　有序列表　69 5.5.1　有序列表结构　69 5.5.2　有序列表的列表项样式　70 5.6　嵌套列表　71 5.7　定义列表　72 5.8　目录列表　73 5.9　小结　74 习题　74 上机指导　74 实验一　74 实验二　75 实验三　75 第6章　表单　77 6.1　添加表单　77 6.1.1　链接跳转　77 6.1.2　链接跳转方式　78 6.1.3　表单名称　78 6.2　输入标签　78 6.2.1　文本框　78 6.2.2　密码框　79 6.2.3　单选按钮　79 6.2.4　复选框　80 6.2.5　“提交”按钮　81 6.2.6　“重置”按钮　82 6.2.7　“图像”按钮　82 6.2.8　文件域　83 6.2.9　隐藏域　84 6.3　下拉列表　85 6.4　文本域　86 6.5　小结　86 习题　86 上机指导　87 实验一　87 实验二　87 实验三　88 第7章　认识CSS　89 7.1　CSS简介　89 7.2　CSS样式表的设置方法　89 7.2.1　内联样式表　89 7.2.2　内部样式表　90 7.2.3　外部样式表　91 7.2.4　引用多个CSS外部样式表　92 7.2.5　使用@import引用外部样式表　92 7.2.6　CSS注释　93 7.3　选择器　94 7.3.1　元素选择器　94 7.3.2　类选择器　95 7.3.3　ID选择器　98 7.3.4　包含选择器　98 7.3.5　分组选择器　101 7.3.6　通用选择器　102 7.3.7　子选择器　103 7.3.8　相邻选择器　105 7.3.9　属性选择器　106 7.4　伪类和伪元素　109 7.4.1　伪类　109 7.4.2　伪元素　110 7.5　CSS优先级　111 7.6　CSS中的单位　113 7.6.1　颜色单位　113 7.6.2　长度单位　113 7.6.3　时间单位　114 7.6.4　角度单位　114 7.6.5　频率单位　114 7.7　小结　114 习题　114 上机指导　115 实验一　115 实验二　115 实验三　116 第8章　设置文字和文本样式　117 8.1　设置文字样式　117 8.1.1　设置字体　117 8.1.2　设置文字大小　118 8.1.3　设置粗体　119 8.1.4　设置文字颜色　120 8.1.5　设置斜体　121 8.1.6　综合设置　121 8.2　设置文本样式　122 8.2.1　设置阴影效果　122 8.2.2　大小写转换　123 8.2.3　设置文本缩进　124 8.2.4　设置文本的水平对齐方式　125 8.2.5　设置文本的垂直对齐方式　126 8.2.6　设置文本流入方向　127 8.2.7　设置文本修饰　128 8.3　空格与换行　129 8.3.1　空格的处理方式　129 8.3.2　字内换行　131 8.4　设置间距　132 8.4.1　设置行间距　132 8.4.2　设置字间距　134 8.4.3　设置词间距　135 8.5　小结　137 习题　137 上机指导　138 实验一　138 实验二　138 实验三　139 第9章　设置背景、边框、边距和补白　140 9.1　背景颜色　140 9.2　背景图像　140 9.2.1　设置背景图像　141 9.2.2　设置固定背景图像　142 9.2.3　设置背景图像平铺方式　143 9.2.4　背景图像定位　145 9.3　边框　147 9.3.1　设置边框样式　147 9.3.2　设置不同的边框样式　148 9.3.3　设置边框宽度　149 9.3.4　设置不同的边框宽度　150 9.3.5　设置边框颜色　151 9.3.6　设置不同的边框颜色　152 9.3.7　综合设置边框效果　153 9.4　边距　154 9.4.1　设置上边距　154 9.4.2　设置下边距　155 9.4.3　设置左边距　156 9.4.4　设置右边距　157 9.4.5　综合设置边距　158 9.5　补白　159 9.5.1　设置顶端补白　159 9.5.2　设置底部补白　160 9.5.3　设置左侧补白　160 9.5.4　设置右侧补白　161 9.5.5　综合设置补白　161 9.6　小结　162 习题　163 上机指导　163 实验一　163 实验二　164 实验三　165 第　10章 设置表格、列表和滚动条样式　166 10.1　表格　166 10.1.1　合并表格边框　166 10.1.2　定义表格边框间距　167 10.1.3　定义表格标题位置　168 10.1.4　设置表格布局　170 10.2　列表　171 10.2.1　设置列表符号样式　171 10.2.2　使用图片设置列表符号样式　173 10.2.3　列表符号显示位置　174 10.2.4　综合设置列表样式　175 10.3　滚动条　176 10.3.1　设置滚动条颜色　176 10.3.2　设置滚动条宽度　177 10.4　小结　178 习题　179 上机指导　179 实验一　179 实验二　180 实验三　180 第　11章 CSS3特效和动画　182 11.1　圆角　182 11.1.1　设置边框为圆角　182 11.1.2　设置每个圆角为指定值　183 11.2　透明度　184 11.3　背景　185 11.4　渐变　187 11.4.1　线性渐变　187 11.4.2　径向渐变　188 11.5　2D 和3D转换　190 11.5.1　2D转换　190 11.5.2　3D转换　191 11.6　过渡　193 11.7　动画　194 11.8　小结　196 习题　197 上机指导　197 实验一　197 实验二　198 第　12章 控制元素布局　199 12.1　块级元素和内联元素　199 12.1.1　块级元素和内联元素的概念　199 12.1.2　div元素和span元素　199 12.2　定位　201 12.2.1　定位方式　201 12.2.2　偏移　201 12.2.3　综合应用　202 12.2.4　定位元素的层叠次序　204 12.3　浮动　205 12.3.1　浮动的概念　206 12.3.2　设置浮动　206 12.3.3　清除浮动　207 12.4　溢出与剪切　208 12.4.1　设置溢出效果　208 12.4.2　设置水平方向超出范围的处理方式　210 12.4.3　设置垂直方向超出范围的处理方式　211 12.4.4　内容的剪切　211 12.5　对象的显示与隐藏　212 12.6　小结　213 习题　214 上机指导　214 实验一　214 实验二　215 实验三　215 第　13章 网页布局与设计技巧　217 13.1　网页布局　217 13.1.1　网页大小　217 13.1.2　网页栏目划分　218 13.1.3　表格布局　219 13.1.4　CSS布局　220 13.2　CSS布局技巧　222 13.2.1　一栏布局　222 13.2.2　二栏布局　223 13.2.3　多栏布局　224 13.3　CSS盒子模型　225 13.3.1　盒子模型的概念　225 13.3.2　设置外边距　225 13.3.3　设置边框样式　226 13.3.4　设置内边距　228 13.4　小结　229 习题　229 上机指导　229 实验一　229 实验二　230 实验三　231 第　14章 JavaScript快速入门　232 14.1　初识JavaScript　232 14.1.1　JavaScript语言的组成　232 14.1.2　嵌入方式　236 14.1.3　注释　237 14.2　动态对元素操作　237 14.2.1　document对象　238 14.2.2　获取元素中的内容　239 14.2.3　修改元素内容和属性值　241 14.2.4　修改元素样式　242 14.3　事件　244 14.3.1　事件方法的基础语法　244 14.3.2　鼠标事件　244 14.3.3　键盘事件　245 14.3.4　表单事件　246 14.4　小结　247 习题　247 上机指导　248 实验一　248 实验二　249 实验三　249 第　15章 网页布局综合案例——宝贝屋网上商店　251 15.1　案例分析　251 15.2　内容分析　252 15.3　原型设计　252 15.4　布局设计　253 15.4.1　整体样式设计　253 15.4.2　页头部分　254 15.4.3　内容部分　258 15.4.4　页脚部分　262 15.5　交互效果设计　263 15.5.1　顶部导航栏　263 15.5.2　主导航栏　264 15.5.3　账号区　264 15.5.4　图像边框　264 15.5.5　产品分类　265 15.6　Banner自动轮播效果　265 15.7　小结　267