网页设计与制作项目教程

项目1 网页制作入门 1 任务1 制作**个HTML网页 2 1.1 网页相关知识 3 1.1.1 网页与网站的相关概念 3 1.1.2 网页分类 4 1.2 常用的开发工具——Sublime Text 4 1.2.1 下载并安装 5 1.2.2 中文设置 6 1.3 HTML5基础 9 1.3.1 HTML5文档基本格式 9 1.3.2 HTML5标签及其属性 10 1.3.3 代码的注释 11 1.4 任务实现 11 任务2 美化**个HTML网页 13 2.1 初识CSS 14 2.1.1 CSS概念 14 2.1.2 CSS发展史 14 2.2 Web标准 14 2.3 任务实现 15 项目2 网页的基本结构实现(制作“学习党的二十大精神专题网”子页) 17 任务3 制作“学习资料”子页 18 3.1 HTML基本结构元素 19 3.2 HTML元素类型 20 3.2.1 行内元素、块状元素和行内块状元素 21 3.2.2 替换元素与不可替换元素 21 3.2.3 注释标签元素和文档类型标签元素 22 3.3 任务实现 22 任务4 制作“学习动态”子页 25 4.1 常用的块状元素 26 4.1.1 段落与标题 26 4.1.2 通用块状元素 27 4.1.3 常用列表块状元素 28 4.1.4 语义块状元素 32 4.2 常用的行内元素 38 4.2.1 超链接 38 4.2.2 通用行内元素span 41 4.2.3 图片元素img 41 4.2.4 文本格式化元素 44 4.3 任务实现 45 任务5 制作“在线留言”子页 48 5.1 表单及其相关元素 49 5.1.1 表单的基本概念 49 5.1.2 常用的表单元素 50 5.1.3 表单按钮 57 5.1.4 表单元素的属性 59 5.1.5 表单元素的分组 62 5.2 任务实现 65 项目3 网页的表现标准(设计“学习党的二十大精神专题网”子页) 69 任务6 设计“学习资料”子页 70 6.1 CSS基础与语法 71 6.1.1 CSS设置规则 71 6.1.2 CSS的引入方式 72 6.1.3 CSS选择器 75 6.1.4 选择器的优先级 96 6.2 CSS字体、段落与文本修饰设置 98 6.2.1 字体样式常用属性 98 6.2.2 段落样式常用属性 105 6.2.3 文本修饰常用属性 107 6.3 任务实现 114 任务7 设计“学习动态”子页 117 7.1 图片相关的CSS样式 118 7.1.1 图片大小 118 7.1.2 图片的对齐方式 118 7.1.3 图文混排效果 119 7.2 CSS边框与背景设置 119 7.2.1 CSS边框 119 7.2.2 CSS背景 123 7.3 任务实现 131 任务8 设计“在线留言”子页 139 8.1 表单相关的CSS样式 140 8.1.1 输入框的样式 140 8.1.2 文本域的样式 142 8.1.3 按钮样式 144 8.1.4 下拉菜单的样式 145 8.2 任务实现 146 项目4 网页综合应用(设计与制作“学习党的二十大精神专题网”首页) 155 任务9 首页页头板块的设计与制作 156 9.1 盒模型简介 157 9.2 盒模型属性 157 9.2.1 width属性和height属性 158 9.2.2 内边距 160 9.2.3 外边距 161 9.2.4 盒模型的宽度与高度的计算 165 9.3 任务实现 167 任务10 首页导航栏板块的设计与制作 170 10.1 浮动布局 171 10.1.1 网页布局方式 171 10.1.2 浮动属性float 172 10.1.3 浮动布局的特性 173 10.2 清除浮动 177 10.2.1 clear属性 177 10.2.2 清除浮动的常用方法 179 10.3 任务实现 183 任务11 首页banner板块的设计与制作 186 11.1 元素的定位 187 11.2 定位的分类 187 11.2.1 相对定位 187 11.2.2 绝对定位 188 11.2.3 固定定位 191 11.2.4 黏性定位 193 11.2.5 定位元素的堆叠 194 11.3 任务实现 196 任务12 首页其他板块的设计与制作 199 12.1 弹性布局 200 12.1.1 弹性布局的基本概念 200 12.1.2 弹性布局的使用 201 12.1.3 弹性布局的属性 202 12.2 利用CSS实现动态效果 215 12.2.1 过渡 215 12.2.2 变形 218 12.2.3 动画 220 12.3 任务实现 224 参考文献 232