HTML+CSS3网页设计与制作案例课堂

第1章 HTML与CSS 3网页设计概述 11.1 网页与网站 21.1.1 什么是网页和网站 21.1.2 网页的基本构成元素 21.2 HTML的基本概念 31.2.1 什么是HTML 41.2.2 HTML的发展历程 41.2.3 HTML文件的基本结构 41.3 CSS的基本概念 51.3.1 什么是CSS 51.3.2 HTML与CSS的优缺点 51.3.3 浏览器对CSS 3的支持 61.4 HTML与CSS网页的开发环境 61.4.1 记事本开发环境 61.4.2 Dreamweaver CS6开发环境 71.5 专家答疑 7

第2章 网页文档的结构 92.1 HTML文档的基本结构 102.1.1 HTML页面的整体结构 102.1.2 HTML 5新增的结构标记 102.2 HTML 5的基本标记详解 112.2.1 文档类型说明 112.2.2 HTML标记 112.2.3 头标记head 112.2.4 网页的主体标记body 142.2.5 页面注释标记 152.3 HTML 5语法的变化 152.3.1 标签不再区分大小写 152.3.2 允许属性值不使用引号 162.3.3 允许部分属性值的属性省略 172.4 HTML 5文件的编写方法 172.4.1 示例1——使用记事本手工编写HTML 5 172.4.2 示例2——使用Dreamweaver CS6编写HTML文件 182.5 使用浏览器查看HTML 5文件 202.5.1 示例3——查看页面效果 202.5.2 示例4——查看源文件 212.6 综合示例——符合W3C标准的HTML 5网页 212.7 上机练习——简单的HTML 5网页 222.8 专家答疑 23

第3章 网页文本的设计 253.1 在网页中添加文本 263.1.1 普通文本的添加 263.1.2 特殊字符文本的添加 263.2 使用HTML 5标记添加特殊文本 283.2.1 添加重要文本 283.2.2 添加倾斜文本 293.2.3 添加上标和下标文本 293.2.4 设置文本旁注的文字大小 303.2.5 设置已删除文本 303.2.6 定义文本的方向 313.3 使用HTML 5标记排版网页文本 313.3.1 网页段落文本换行 323.3.2 分段显示网页段落文本 323.3.3 设定网页中的标题文本 333.3.4 为网页添加水平线 343.4 文字列表 353.4.1 建立无序列表3.53.4.2 建立有序列表3.63.4.3 建立不同类型的无序列表 373.4.4 建立不同类型的有序列表 383.4.5 建立嵌套列表 393.4.6 自定义列表 393.5 综合示例——制作简单的纯文本网页 403.6 上机练习——制作旅游网网页 413.7 专家答疑 42

第4章 网页色彩和图像的设计 434.1 网页色彩的应用 444.1.1 认识色彩 444.1.2 网页中色彩的搭配 454.1.3 网页元素的色彩搭配 464.1.4 网页颜色的使用风格 474.1.5 精彩配色赏析 484.2 网页中的图像 494.2.1 在网页中插入图像 494.2.2 设置图像的宽度和高度 514.2.3 设置图像的提示文字 514.2.4 将图片设置为网页背景 524.2.5 排列图像 534.3 综合示例——图文并茂的房屋装饰装修网页 544.4 上机练习——在线购物网站的产品展示 554.5 专家答疑 56

第5章 网页超链接的设计 575.1 链接和路径 585.1.1 超链接的概念 585.1.2 链接路径URL 585.1.3 创建HTTP路径 605.1.4 创建FTP路径 615.1.5 创建电子邮件路径 615.2 创建网页文本链接 625.2.1 使用链接元素创建文本超链接(1) 625.2.2 使用链接元素创建文本超链接(2) 635.2.3 设置以新窗口显示超链接页面 645.2.4 链接到同一页面的不同位置 655.3 创建网页图像链接 665.3.1 创建图像超链接 675.3.2 创建图像局部链接 675.4 创建浮动框架 685.5 综合示例——用Dreamweaver精确定位热点区域 695.6 上机练习——创建热点区域 715.7 专家答疑 72

第6章 网页表单的设计 756.1 表单概述 766.2 在网页中添加基本的表单元素 766.2.1 添加单行文本输入框 776.2.2 添加多行文本输入框 776.2.3 添加密码输入框 786.2.4 添加单选按钮 796.2.5 添加复选框 806.2.6 添加下拉选择框 806.2.7 添加普通按钮 816.2.8 添加提交按钮 826.2.9 添加重置按钮 836.3 在网页中添加高级表单元素 846.3.1 添加不能为空的网站网址输入框 846.3.2 添加邮箱输入框 856.3.3 添加时间类型表单 866.3.4 添加数值输入框 876.3.5 添加滚动控件 876.3.6 添加不能为空的表单元素 886.4 综合示例——创建用户反馈表单 896.5 上机练习——制作用户注册表单 906.6 专家答疑 91

第7章 网页表格的设计 937.1 表格的基本结构 947.2 创建表格 957.2.1 创建普通表格 957.2.2 创建一个带有标题的表格 967.3 编辑表格 977.3.1 定义表格的边框类型 977.3.2 定义表格的表头 987.3.3 设置表格的背景 997.3.4 设置单元格的背景 1017.3.5 合并单元格 1027.3.6 排列单元格中的内容 1067.3.7 设置单元格的行高与列宽 1077.4 完整的表格标记 1087.5 综合示例——制作计算机报价表 1097.6 上机练习——制作学生成绩表 1117.7 专家答疑 114

第8章 网页音频和视频的设计 1178.1 audio标签 1188.1.1 audio标签概述 1188.1.2 audio标签的属性 1198.1.3 audio标签浏览器的支持情况 1198.2 在网页中添加音频文件 1208.2.1 添加自动播放音频文件 1208.2.2 添加带有控件的音频文件 1208.2.3 添加循环播放的音频文件 1218.2.4 添加预播放的音频文件 1218.3 video标签 1228.3.1 video标签概述 1228.3.2 video标签的属性 1238.3.3 video标签浏览器的支持情况 1248.4 在网页中添加视频文件 1248.4.1 添加自动播放的视频文件 1248.4.2 添加带有控件的视频文件 1258.4.3 添加循环播放的视频文件 1258.4.4 添加预播放的视频文件 1268.4.5 设置视频文件的高度和宽度 1278.5 专家答疑 127

第9章 网页图形的绘制 1299.1 添加canvas的步骤 1309.2 绘制基本形状 1309.2.1 绘制矩形 1319.2.2 绘制圆形 1329.2.3 使用moveTo与lineTo绘制直线 1339.2.4 使用bezierCurveTo绘制贝塞尔曲线 1349.3 绘制渐变图形 1369.3.1 绘制线性渐变 1369.3.2 绘制径向渐变 1379.4 绘制变形图形 1389.4.1 绘制平移效果的图形 1389.4.2 绘制缩放效果的图形 1399.4.3 绘制旋转效果的图形 1409.4.4 绘制组合效果的图形 1419.4.5 绘制带阴影的图形 1439.5 使用图像 1449.5.1 绘制图像 1459.5.2 平铺图像 1469.5.3 裁剪图像 1479.5.4 图像的像素处理 1499.6 绘制文字 1509.7 图形的保存与恢复 1529.7.1 保存与恢复状态 1529.7.2 保存文件 1539.8 综合示例——绘制火柴棒人物 1549.9 上机练习——绘制商标 1579.10 专家答疑 158

第10章 CSS 3网页样式核心基础 16110.1 CSS 3基础语法概述 16210.1.1 CSS 3的构造规则 16210.1.2 CSS 3的常用单位 16210.1.3 CSS 3的注释 16610.2 编辑CSS 3文件的方法 16710.2.1 手工编写CSS 3 16710.2.2 用Dreamweaver编写CSS 16810.3 在HTML 5中使用CSS 3的方法 16910.3.1 行内样式 16910.3.2 内嵌样式 17010.3.3 链接样式 17110.3.4 导入样式 17210.3.5 优先级问题 17310.4 CSS 3的基本选择器 17610.4.1 标签选择器 17610.4.2 类选择器 17710.4.3 ID选择器 17810.4.4 全局选择器 17910.5 综合示例——制作炫彩网站Logo 17910.6 上机练习——制作学生信息统计表 18210.7 专家答疑 184

第11章 使用CSS 3控制网页字体与段落样式 18511.1 丰富网页文字样式 18611.1.1 设置文字的字体样式 18611.1.2 设置文字的字号 18711.1.3 设置字体风格 18811.1.4 设置加粗字体 18911.1.5 将小写字母转为大写字母 19011.1.6 设置字体的复合属性 19111.1.7 设置字体颜色 19211.2 网页文本的高级样式 19311.2.1 设置文本阴影效果 19311.2.2 设置文本溢出效果 19411.2.3 设置文本的控制换行 19511.2.4 保持字体尺寸不变 19611.3 丰富网页中的段落样式 19711.3.1 设置单词之间的间隔 19711.3.2 设置字符之间的间隔 19811.3.3 设置文字的修饰效果 19911.3.4 设置垂直对齐方式 20011.3.5 转换文本的大小写 20211.3.6 设置文本的水平对齐方式 20311.3.7 设置文本的缩进效果 20411.3.8 设置文本的行高 20511.3.9 文本的空白处理 20611.3.10 文本的反排 20711.4 综合示例——设置网页标题 20811.5 上机练习——制作新闻页面 21011.6 专家答疑 211

第12章 使用CSS 3控制网页图片的显示样式 21312.1 缩放图片 21412.1.1 使用描述标记width和height缩放图片 21412.1.2 使用CSS 3中的max-width和max-height缩放图片 21412.1.3 使用CSS 3中的width和height缩放图片 21512.2 网页图片与文字的对齐方式 21612.2.1 横向对齐方式 21612.2.2 纵向对齐方式 21712.3 图文混排样式 21912.3.1 设置文字环绕效果 21912.3.2 设置图片与文字的间距 22012.4 综合示例——制作学校宣传单 22212.5 上机练习——制作简单的图文混排网页 22412.6 专家答疑 225

第13章 使用CSS 3控制网页背景与边框的样式 22713.1 使用CSS 3美化背景 22813.1.1 设置背景颜色 22813.1.2 设置背景图片 22913.1.3 背景图片重复 23013.1.4 背景图片显示 23113.1.5 背景图片位置 23313.1.6 背景图片大小 23413.1.7 背景显示区域 23613.1.8 背景图像裁剪区域 23713.1.9 背景复合属性 23813.2 使用CSS 3美化边框 23913.2.1 设置边框的样式 24013.2.2 设置边框的颜色 24113.2.3 设置边框的线宽 24213.2.4 设置边框的复合属性 24413.3 设置边框的圆角效果 24513.3.1 设置圆角边框 24513.3.2 指定两个圆角半径 24613.3.3 绘制四个不同圆角边框 24713.3.4 绘制不同种类的边框 24913.4 综合示例——制作简单的公司主页 25013.5 上机练习——制作简单的生活资讯主页 25313.6 专家答疑 255

第14章 使用CSS 3控制表格和表单样式 25714.1 美化表格的样式 25814.1.1 设置表格边框的样式 25814.1.2 设置表格边框的宽度 26014.1.3 设置表格边框的颜色 26114.2 美化表单样式 26214.2.1 美化表单中的元素 26214.2.2 美化提交按钮 26414.2.3 美化下拉菜单 26514.3 综合示例——制作用户登录页面 26714.4 上机练习——制作用户注册页面 26814.5 专家答疑 270

第15章 使用CSS 3控制网页超链接和鼠标的样式 27315.1 使用CSS 3丰富超链接样式 27415.1.1 改变超链接的基本样式 27415.1.2 设置带有提示信息的超链接 27515.1.3 设置超链接的背景图 27615.1.4 设置超链接的按钮效果 27715.2 使用CSS 3丰富鼠标样式 27815.2.1 使用CSS 3控制鼠标箭头 27815.2.2 设置鼠标变幻式超链接 28015.2.3 设置网页的页面滚动条 28115.3 综合示例1——图片版本的超链接 28315.4 综合示例2——鼠标特效 28415.5 上机练习——制作一个简单的导航栏 28715.6 专家答疑 288

第16章 使用CSS 3控制网页导航菜单的样式 29116.1 使用CSS 3来丰富项目的列表样式 29216.1.1 丰富无序列表样式 29216.1.2 丰富有序列表样式 29316.1.3 丰富自定义列表样式 29516.1.4 制作图片列表 29616.1.5 缩进图片列表 29816.1.6 列表的复合属性 29916.2 使用CSS 3制作网页菜单 30016.2.1 制作无需表格的菜单 30016.2.2 制作水平和垂直菜单 30216.3 综合示例——模拟搜搜导航栏 30416.4 上机练习——将段落转变成列表 30716.5 专家答疑 309

第17章 掌握CSS 3的高级属性 31117.1 复合选择器 31217.1.1 “交集”选择器 31217.1.2 “并集”选择器 31317.1.3 后代选择器 31317.2 CSS 3新增的选择器 31417.2.1 属性选择器 31517.2.2 结构伪类选择器 31617.2.3 UI元素状态伪类选择器 31817.3 CSS的继承特性 31917.3.1 继承关系 31917.3.2 CSS继承的运用 32017.4 CSS的层叠特性 32117.4.1 同一选择器被多次定义的处理 32117.4.2 同一标签运用不同类型选择器的处理 32217.5 综合示例——制作新闻菜单 32317.6 专家答疑 326

第18章 CSS 3定位与DIV布局核心技术 32718.1 了解块级元素和行内级元素 32818.1.1 块级元素和行内级元素的应用 32818.1.2 div元素和span元素的区别 33018.2 盒子模型 33118.2.1 盒子模型的概念 33118.2.2 定义网页的border区域 33218.2.3 定义网页的padding区域 33318.2.4 定义网页的margin区域 33418.3 CSS 3新增的弹性盒模型 33818.3.1 定义盒子的布局取向(box-orient) 33818.3.2 定义盒子的布局顺序(box-direction) 33918.3.3 定义盒子布局的位置(box-ordinal-group) 34118.3.4 定义盒子的弹性空间(box-flex) 34218.3.5 管理盒子空间(box-pack和box-align) 34418.3.6 盒子空间的溢出管理(box-lines) 34618.4 综合示例——图文排版效果 34718.5 上机练习——淘宝导购菜单 34918.6 专家答疑 352

第19章 CSS 3 + DIV盒子的浮动与定位 35319.1 定义DIV 35419.1.1 什么是DIV 35419.1.2 创建DIV 35419.2 盒子的定位 35519.2.1 静态定位 35519.2.2 相对定位 35619.2.3 绝对定位 35719.2.4 固定定位 35819.2.5 盒子的浮动 35919.3 其他CSS布局定位方式 36119.3.1 溢出(overflow)定位 36119.3.2 隐藏(visibility)定位 36219.3.3 z-index空间定位 36419.4 新增的CSS 3多列布局 36619.4.1 设置列宽度 36619.4.2 设置列数 36719.4.3 设置列间距 36919.4.4 设置列边框样式 37019.5 综合示例——定位网页布局样式 37219.6 上机练习——制作阴影文字效果 37419.7 专家答疑 375

第20章 网页布局剖析与制作 37720.1 固定宽度网页剖析与布局 37820.1.1 示例1——网页单列布局模式 37820.1.2 示例2——网页1-2-1型布局模式 38120.1.3 示例3——网页1-3-1型布局模式 38420.2 自动缩放网页1-2-1型布局模式 38720.2.1 示例4——“1-2-1”等比例变宽布局 38720.2.2 示例5——“1-2-1”单列变宽布局 38820.3 自动缩放网页1-3-1型布局模式 38920.3.1 示例6——“1-3-1”三列宽度等比例布局 39020.3.2 示例7——“1-3-1”单侧列宽度固定的变宽布局 39020.3.3 示例8——“1-3-1”中间列宽度固定的变宽布局 39320.3.4 示例9——“1-3-1”双侧列宽度固定的变宽布局39620.3.5 示例10——“1-3-1”中列和左侧列宽度固定的变宽布局 39920.4 分列布局背景色的使用 40220.4.1 示例11——设置固定宽度布局的列背景色 40220.4.2 示例12——设置特殊宽度变化布局的列背景色 40420.4.3 示例13——设置单列宽度变化布局的列背景色 40520.4.4 示例14——设置多列等比例宽度变化布局的列背景 40620.5 专家答疑 408

第21章 制作企业门户类网页 41121.1 构思布局 41221.1.1 设计分析 41221.1.2 排版架构 41221.2 模块分割 41321.2.1 Logo与导航菜单 41321.2.2 左侧的文本介绍 41521.2.3 右侧的导航链接 41721.2.4 版权信息 41821.3 整体调整 419

第22章 制作在线购物类网页 42122.1 整体布局 42222.1.1 设计分析 42222.1.2 排版架构 42222.2 模块分割 42322.2.1 Logo与导航区 42322.2.2 Banner与资讯区 42522.2.3 产品类别区域 42722.2.4 页脚区域 42922.3 专家答疑 429

本书根据作者在长期教学中积累的丰富的网页设计教学经验，完整、详尽地介绍HTML + CSS 3网页样式与布局的技术。本书分为22章，内容包括HTML与CSS 3网页设计概述、网页文档的结构、网页文本的设计、网页色彩和图像的设计、网页超链接的设计、网页表单的设计、网页表格的设计、网页音频和视频的设计、网页图形的绘制、CSS 3网页样式核心基础、控制网页字体和段落样式、控制网页图片的显示样式、控制网页背景和边框样式、控制表格与表单样式、控制网页超链接和鼠标样式、控制网页导航菜单样式、CSS 3的高级特性、CSS定位与DIV布局核心技术、CSS + DIV盒子的浮动与定位、网页布局剖析与制作，最后以两个综合性网站的设计为例进行讲解。通过每章的实战案例，让读者进一步巩固所学的知识，提高综合实战能力。本书内容丰富、全面，图文并茂，步骤清晰，通俗易懂，专业性强，使读者能理解HTML + CSS 3网页样式与布局的技术，并能解决工作中的实际问题，真正做到“知其然，更知其所以然”。本书涉及面广泛，几乎涵盖了HTML + CSS 3网页样式与布局的所有重要知识，适合所有的网页设计初学者快速入门，同时也适合想全面了解HTML + CSS 3网页样式与布局的设计人员阅读。

清华大学出版社“案例课堂”大系
丛书以案例的形式讲解软件的内容，读者可以在实践中熟练掌握件的使用方法。
每一个案例都精挑细选，同时配有全程语音讲解的视频文件，方便读者学习。
案例的选材广泛，涉及到软件应用的各个领域、各个行业，学习无死角。
“CG设计”系列全彩精印，同等价位下内容更多，同等内容下更实惠。
“网站开发”系列附赠超值，全面学习无障碍：
CSS属性速查表/HTML标签速查表/网页布局案例赏析/精彩网站配色方案赏析/精选JavaScript实例/JavaScript函数速查手册/CSS+DIV布局案例赏析/案例源文件与教学课件