HTML5与CSS3是网页制作技术的核心和基础,也是每个网页制作者必须要掌握的基本知识,两者在网页设计中不可或缺。本书从初学者的角度,以形象的比喻、实用的案例、通俗易懂的语言详细介绍了使用HTML5与CSS3进行网页设计与制作的各方面内容和技巧。
全书共12章,第1到4章主要讲解了HTML5与CSS3的基础知识,包括Web基本概念、HTML与CSS简介、Dreamweaver工具的使用、HTML图文标签、CSS基础选择器等内容;第5到8章分别讲解了盒子模型、列表与超链接、表格与表单、DIV+CSS布局,这些内容是网页制作的核心;第9到11章分别讲解了HTML5和CSS3的新特性,包括多媒体的嵌入、过渡、变形、动画、Canvas、本地存储,这些内容可以帮助读者掌握HTML5和CSS3的新特性。第12章为实战项目,结合前面学习的知识,带领初学者开发一个包含首页和多个子页面的中型网站,进一步巩固所学知识。
本书附带丰富的配套资源,而且为了帮助初学者更好地学习本书讲解的内容,还提供了答疑服务,希望全方位帮助读者掌握所学知识。
本书既可作为高等院校本、专科相关专业的网页设计与制作课程的教材,也可作为前端与移动开发的培训教材,对于广大网站开发人员来说,是一本值得阅读与参考的优秀读物。
本书面向网页设计(HTML5、CSS3)基础的人群。
本书是在第一版《HTML5+CSS3网站设计基础教程》的基础上修订而成,是“1+X证书制度”Web前端开发系列丛书的初级教材。在优化原图书内容的同时,又新增了以下内容。
1、 在书中增加和强化HTML5新增标记的讲解和应用。
2、 调整了书中部分知识点的顺序,更符合由浅入深、循序渐进的学习思路。
3、在书中添加了表格知识,让知识体系更完整。
4、增加了Canvas画布、数据存储原理以及JavaScript的知识,可作为前端开发的基础图书。
5、更换了部分案例,增强本书的实用性。
此外,本书站在初学者的角度,以形象的比喻、实用的案例、通俗易懂的语言详细介绍了使用HTML5与CSS3进行网页设计与制作的技巧。
第1章 HTML5+CSS3网页设计概述 1.1 网页概述 1.1.1 认识网页 1.1.2 网页名词解释 1.1.3 Web标准 1.2 网页制作技术入门 1.2.1 HTML 1.2.2 CSS 1.2.3 Javascript 1.2.4 网页的展示平台——浏览器 1.3 Dreamweaver工具的使用 1.3.1 认识Dreamweaver界面 1.3.2 Dreamweaver初始化设置 1.3.3 Dreamweaver基本操作 1.4 阶段案例——创建第一个网页 1.5 本章小结 第2章 初识HTML5 2.1 HTML5的优势 2.2 HTML5全新的结构 2.3 标签概述 2.3.1 标签的分类 2.3.2 标签的关系 2.3.3 标签属性 2.3.4 HTML5文档头部相关标签 2.4 文本控制标签 2.4.1 页面格式化标签 2.4.2 文本样式标签 2.4.3 文本格式化标签 2.4.4 文本语义标签 2.4.5 特殊字符标签 2.5 图像标签 2.5.1 常见图像格式 2.5.2 图像标签<img /> 2.5.3 相对路径和绝对路径 2.6 阶段案例——制作图文混排新闻 2.6.1 新闻模块效果分析 2.6.2 搭建新闻模块结构 2.6.3 控制新闻模块图像 2.6.4 控制新闻模块文本 2.7 本章小结 第3章 初识CSS3 3.1 结构与表现分离 3.2 CSS3的优势 3.3 CSS核心基础 3.3.1 CSS样式规则 3.3.2 引入CSS样式表 3.3.3 CSS基础选择器 3.4 设置文本样式 3.4.1 CSS字体样式属性 3.4.2 CSS文本外观属性 3.5 高级特性 3.5.1 CSS复合选择器 3.5.2 CSS层叠性和继承性 3.5.3 CSS优先级 3.6 阶段案例——制作活动通知页面 3.6.1 活动通知页面效果分析 3.6.2 搭建活动通知页面结构 3.6.3 定义活动通知页面样式 3.7 本章小结 第4章 CSS3选择器 4.1 属性选择器 4.1.1 E[att^=value] 属性选择器 4.1.2 E[att$=value]属性选择器 4.1.3 E[att*=value]属性选择器 4.2 关系选择器 4.2.1 子元素选择器 4.2.2 相邻兄弟选择器(+、~) 4.3 结构化伪类选择器 4.3.1 :root选择器 4.3.2 :not选择器 4.3.3 :only-child选择器 4.3.4 :first-child和:last-child选择器 4.3.5 :nth-child(n)和:nth-last-child(n)选择器 4.3.6 :nth-of-type(n)和:nth-last-of-type(n)选择器 4.3.7 :empty选择器 4.4 伪元素选择器 4.1.4 :before选择器 4.1.5 :after选择器 4.5 阶段案例——制作招聘页面 4.5.1 招聘页面效果分析 4.5.2 搭建招聘页面结构 4.5.3 定义招聘页面样式 4.6 本章小结 第5章 盒子模型 5.1 认识盒子模型 5.2 盒子模型的相关属性 5.2.1 边框属性 5.2.2 内边距属性 5.2.3 外边距属性 5.2.4 背景属性 5.2.5 盒子的宽与高 5.3 CSS3新增盒子模型属性 5.3.1 颜色透明度 5.3.2 圆角 5.3.3 图片边框 5.3.4 阴影 5.3.5 渐变 5.3.6 多背景图像 5.3.7 修剪背景图像 5.4 元素的类型和转换 5.4.1 元素的类型 5.4.2 <div>和<span>标签 5.4.3 元素类型的转换 5.5 块元素垂直外边距的合并 5.5.1 相邻块元素垂直外边距的合并 5.5.2 嵌套块元素垂直外边距的合并 5.6 阶段案例——制作音乐排行榜 5.1.1音乐排行榜效果分析 5.1.2 制作音乐排行榜结构 5.1.3 定义音乐排行榜CSS样式 5.7 本章小结 第6章 列表和超链接 6.1 列表标签 6.1.1 无序列表<ul> 6.1.2 有序列表<ol> 6.1.3 定义列表<dl> 6.1.4 列表的嵌套应用 6.2 CSS控制列表样式 6.2.1 list-style-type属性 6.2.2 list-style-image属性 6.2.3 list-style-position属性 6.2.4 list-style属性 6.3 超链接标签 6.3.1 创建超链接 6.3.2 锚点链接 6.4 链接伪类控制超链接 6.5 阶段案例—制作新闻列表 5.1.1 新闻列表效果分析 5.1.2 制作新闻列表结构 5.1.3 定义新闻列表CSS样式 6.6 本章小结 第7章 表格和表单 7.1 表格 7.1.1 创建表格 7.1.2 <table>标签的属性 7.1.3 <tr>标签的属性 7.1.4 <td>标签的属性 7.1.5 <th>标签及其属性 7.1.6 表格的结构 7.2 CSS控制表格样式 7.2.1 CSS控制表格边框 7.2.2 CSS控制单元格边距 7.2.3 CSS控制单元格的宽高 7.3 表单 7.3.1 表单的构成 7.3.2 创建表单 7.4 表单控件 7.4.1 input控件 7.4.2 textarea控件 7.4.3 select控件 7.5 HTML5表单新属性 7.5.1 全新的form属性 7.5.2 全新的表单控件 7.5.3 全新的input控件类型 7.5.4 全新的input属性 7.6 CSS控制表单样式 7.7 阶段案例——制作表单注册页面 7.7.1 表单注册页面效果分析 7.7.2 搭建表单注册页面结构 7.7.3 定义表单注册页面CSS样式 7.8 本章小结 第8章 DIV+CSS布局 8.1 布局概述 8.2 布局常用属性 8.2.1 标签的浮动属性 8.2.2 标签的定位属性 8.3 布局其他属性 8.3.1 overflow属性 8.3.2 Z-index标签层叠 8.4 布局类型 8.4.1 单列布局 8.4.2 两列布局 8.4.3 三列布局 8.4.4 全新的html5结构元素 8.4.5 网页模块命名规范 8.5 阶段案例——制作通栏banner 8.5.1 通栏banner效果分析 8.5.2 制作通栏banner结构 8.5.3 定义通栏bannerCSS样式 8.6 本章小结 第9章 多媒体嵌入 9.1 视频音频嵌入技术概述 9.2 视频文件和音频文件的格式 9.3 嵌入视频和音频 9.3.1 在HTML5中嵌入视频 9.3.2 在HTML5中嵌入音频 9.3.3 视频音频文件的兼容性问题 9.3.4 调用网络音频视频文件 9.4 CSS控制视频的宽高 9.5 阶段案例——制作音乐播放界面 9.5.1 音乐播放界面效果分析 9.5.2 制作音乐播放界面结构 9.5.3 定义音乐播放界面CSS样式 9.6 本章小结 第10章 过渡、变形和动画 10.1 过渡 10.1.1 transition-property属性 10.1.2 transition-duration属性 10.1.3 transition-timing-function属性 10.1.4 transition-delay属性 10.1.5 transition属性 10.2 变形 10.2.1 认识transform 10.2.2 2D变形 10.2.3 3D变形 10.3 动画 10.3.1 @keyframes 10.3.2 animation-name属性 10.3.3 animation-duration属性 10.3.4 animation-timing-function属性 10.3.5 animation-delay属性 10.3.6 animation-iteration-count属性 10.3.7 animation-direction属性 10.3.8 animation属性 10.4 阶段案例——制作表情图片 10.4.1 表情图片效果分析 10.4.2 制作表情图片结构 10.4.3 定义表情图片CSS样式 10.5 本章小结 第11章 绘图和数据存储原理 11.1 简单的JavaScript 11.1.1 JavaScript的引入 11.1.2 变量 11.1.3 document对象 11.2 HTML5画布 11.2.1 认识画布 11.2.2 使用画布 11.2.3 绘制线 11.2.4 线的样式 11.2.5 线的路径 11.2.6 填充路径 11.2.7 绘制圆 11.3 HTML5数据存储基础 11.3.1 原始存储方式——Cookie 11.3.2 HTML5全新的存储技术——web storage 11.4 阶段案例——绘制火柴人 11.4.1 火柴人效果分析 11.4.2 搭建火柴人结构 11.4.3 绘制火柴人图形 11.5 本章小结 第12章 实战开发—制作企业网站页面 12.1 网站设计规划 12.1.1 确定网站主题 12.1.2 规划网站结构 12.1.3 收集素材 12.1.4 设计网页效果图 12.2 使用Dreamweaver工具建立站点 12.3 切图 12.4 搭建首页 12.4.1 效果图分析 12.4.2 首页制作 12.5 制作模板 12.5.1 建立模板的步骤 12.5.2 引用模板 12.6 使用模板搭建网页 12.6.1 搭建注册页 12.6.2 搭建个人中心页面 12.6.3 搭建视频播放页 12.7 本章小结