网页制作案例教程(HTML5+CSS3)

项目1 网页制作入门 1 1.1 Web基本概念 1 1.1.1 网页和网站 1 1.1.2 浏览器 3 1.1.3 Web标准 4 1.1.4 URL地址 4 1.2 HTML和HTML5 5 1.2.1 HTML 5 1.2.2 HTML5 5 1.2.3 HTML5优势 6 1.3 Web前端开发工具 6 1.3.1 开发工具介绍 6 1.3.2 Visual Studio Code工具 7 1.4 案例：制作简单的HTML5页面 11 1.4.1 任务描述 11 1.4.2 实施步骤 12 1.5 HTML5页面基础 14 1.5.1 HTML5基本文档结构 14 1.5.2 HTML标记 15 1.5.3 属性 16 1.5.4 注释 17 项目小结 17 单元测试与项目实践 17 项目2 添加网页内容 19 2.1 标题和段落标记 19 2.1.1 标题标记 19 2.1.2 段落标记 21 2.1.3 换行和水平线标记 21 2.2 文本格式化标记和特殊字符 23 2.2.1 文本格式化标记 23 2.2.2 特殊字符 25 2.3 图像标记 26 2.3.1 网页中常用的图像格式 26 2.3.2 图像标记和属性 26 2.3.3 图像地址 27 2.4 超链接标记 29 2.4.1 超链接标记和属性 29 2.4.2 超链接分类 30 2.5 列表标记 31 2.5.1 无序列表 32 2.5.2 有序列表 32 2.5.3 定义列表 33 2.5.4 列表嵌套 35 2.6 案例：制作诗词网页 36 2.6.1 任务描述 36 2.6.2 实施步骤 37 项目小结 40 单元测试与项目实践 40 项目3 CSS基础 42 3.1 CSS简介 42 3.2 CSS的核心基础 43 3.2.1 CSS样式规则 43 3.2.2 CSS引入方式 43 3.3 CSS基础选择器 47 3.4 案例：制作“药王—孙思邈”网页 52 3.4.1 任务描述 52 3.4.2 实施步骤 52 3.5 CSS的优先级、继承与层叠 54 3.5.1 CSS的优先级 54 3.5.2 CSS的继承性 58 3.5.3 CSS的层叠 59 项目小结 59 单元测试与项目实践 60 项目4 设置文本字体样式 61 4.1 设置字体样式属性 61 4.2 设置文本外观属性 66 4.3 CSS3新增文本样式 74 4.3.1 设置文字阴影和模糊效果 74 4.3.2 使用服务器字体 76 4.4 案例：制作“预防电信诈骗”网页 78 4.4.1 任务描述 78 4.4.2 实施步骤 79 4.5 设置超链接样式 82 项目小结 84 单元测试与项目实践 84 项目5 盒子模型 86 5.1 认识盒子模型 86 5.2 盒子模型常用的属性 88 5.2.1 border属性 89 5.2.2 margin属性 91 5.2.3 padding属性 92 5.2.4 背景属性 93 5.3 行内元素、块元素和行内块元素 96 5.3.1 行内元素 96 5.3.2 块元素 96 5.3.3 行内块元素 97 5.3.4 元素的转换 97 5.4 CSS3新增盒子样式 98 5.4.1 圆角边框 98 5.4.2 盒子阴影 100 5.4.3 渐变背景 101 5.5 案例：利用盒子模型制作 “四有青年”网页 103 5.5.1 任务描述 103 5.5.2 实施步骤 104 5.6 表格元素 106 5.7 HTML5新增文档结构元素 107 项目小结 109 单元测试与项目实践 110 项目6 元素的浮动和定位 111 6.1 元素的浮动 111 6.1.1 设置浮动效果 112 6.1.2 清除浮动 114 6.2 元素的定位 118 6.2.1 相对定位(relative) 119 6.2.2 绝对定位(absolute) 120 6.2.3 固定定位(fixed) 122 6.2.4 z-index属性 124 6.3 案例：制作环保网页 124 6.3.1 任务描述 124 6.3.2 实施步骤 125 项目小结 132 单元测试与项目实践 132 项目7 多媒体元素 134 7.1 audio标记 134 7.2 video标记 136 7.3 source标记 137 7.4 案例：制作“西北之旅”网页 140 7.4.1 任务描述 140 7.4.2 实施步骤 141 项目小结 143 单元测试与项目实践 143 项目8 表单的应用 145 8.1 form表单元素 145 8.2 input控件 146 8.3 select控件 148 8.4 其他常用控件 149 8.4.1 label控件 149 8.4.2 多行文本控件 151 8.4.3 button控件 151 8.5 HTML5新增的表单控件和属性 152 8.5.1 HTML5新增控件 152 8.5.2 HTML5新增input类型 154 8.5.3 HTML5新增表单属性 159 8.6 案例：制作“用户注册表”网页 165 8.6.1 任务描述 165 8.6.2 实施步骤 165 项目小结 170 单元测试与项目实践 170 项目9 CSS高级选择器 172 9.1 属性选择器 172 9.2 关系选择器 174 9.2.1 后代选择器 174 9.2.2 子代选择器 175 9.2.3 兄弟选择器 176 9.3 伪类选择器 177 9.4 伪对象选择器 179 9.5 案例：制作“电视剧介绍”网页 180 9.5.1 任务描述 180 9.5.2 实施步骤 181 项目小结 184 单元测试与项目实践 185 项目10 CSS3过渡、变形和动画效果 186 10.1 CSS3变形 186 10.1.1 设置变形 186 10.1.2 更改变形原点 189 10.2 CSS3过渡 191 10.3 CSS3动画 193 10.3.1 @keyframes规则 194 10.3.2 animation属性 194 10.4 案例：制作“河南文化旅游网” ?首页介绍栏目 197 10.4.1 任务描述 197 10.4.2 实施步骤 198 项目小结 203 单元测试与项目实践 204 项目11 综合实例 206 11.1 案例分析 206 11.2 网页布局规划 208 11.3 制作头部内容网页 209 11.4 制作内容栏目网页 212 11.4.1 制作banner图部分网页 212 11.4.2 制作主题内容“走进河南”网页 213 11.4.3 制作主题内容“河南美食”部分网页 217 11.5 制作底部内容网页 219 项目小结 222 参考文献 223