《WEB前端开发实战》课件 任务一：铜鼓文化详情页制作

项目一HTML5+CSS3网页布局与美化任务一

铜鼓文化详情页制作主讲：秦红梅htmlh5imgjavascriptwebcsscolorhr目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展1+X考证练习htmlh5imgjavascriptwebcolorhr任务情境广西少数民族文化资源网是一个通过网站展示广西少数民族在文化、节日、美食、古迹等方面资源的的综合性资源类的网站。铜鼓，壮语称作“宁董”，壮族全民崇鼓，是使用铜鼓最普遍的一个民族。在壮民族的心目中，铜鼓具有非同寻常的功能：它不仅是天地神灵的集合体和入神沟通的圣物，也是代表权力和财富的“国之重器”，而且还是重大社会活动中必备的礼器和乐器。本次专题任务是采用标准流布局的方式来完成网站二级页“文化”目录中关于壮族铜鼓文化详情页的制作。工作任务单工作任务单任务要求根据效果图完成铜鼓文化详情页制作甲方提供的设计图

如右图所示评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果1+X技能考核标准能正确选择html标签和CSS样式完成页面制作技能大赛考核要求制作的页面需具有交互设计，并符合W3C的HTML和CSS标准作品提交要求站点文件夹评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果任务目标任务目标能够掌握网页前端重构的流程方法能够正确使用切图工具进行网页切图能够使用HTML常用的标签构建简单的HTML页面能够通过定义样式属性美化页面，实现网页效果图的重构效果能够形成布局思维并通过标准流布局简单网页任务描述标准流布局是网页布局中最基本的布局方式，它决定了网页元素的默认位置和显示样式。本任务中，我们将通过制作广西少数民族文化资源网中的铜鼓文化局详情页来学习如何使用HTML常用的结构标签来构建简单的HTML页面、学习如何通过定义CSS样式来美化页面、学习标准流布局网页的基础知识。

壮族铜鼓文化详情页分为页头、当前位置、页中、页尾四大结构，页面头部包含页面顶部和页面导航两大版块，其中导航部份包含标题logo、导航菜单、登陆、注册信息三个版块，当前位置是关于当前位置的导览，页面主体部份包含壮族铜鼓文化内涵、铜鼓文化核心思想两个版块。__________任务实施图2

结构布局思路图图1

结构布局划分图布局结构分析页面切图网站搭建HTML布局+css美化任务实施图3页面切图切片效果布局结构分析页面切图网站搭建HTML布局+css美化创建站点文件夹indexJS在进行网页制作之前，首先需要完成站点文件夹的建立ImgCSS文件/文件夹作用Img文件夹存放图片资源文件CSS文件夹存放CSS样式文件JS文件夹存放JS文件Index.html文件首页布局结构分析页面切图网站搭建HTML布局+css美化任务实施创建页面、链接样式创建HTML主体结构设置通用样式完成头部Header部份制作步骤一步骤二步骤三步骤四构建HTML标准流布局+CSS页面美化操作步骤完成当前位置部分制作步骤五完成主体文章部分制作步骤六完成页尾部分制作步骤七布局结构分析页面切图网站搭建HTML布局+css美化任务实施学习资源常用布局方式CSS布局基础标准流布局布局思维01HTML创建页面元素02CSS盒模型呈现元素03CSS排版元素布局思维流程学习资源常用布局方式CSS布局基础标准流布局布局思维学习资源常用布局方式CSS布局基础标准流布局布局思维CSS布局基础在HTML中，元素可以分类，即行内（inline）元素、块(block)和行内块（inline-block）元素。◎行内元素行内元素的特点：行内元素不会单独占一行，它的宽度和高度由其内容决定

，且不支持盒子模型。一般不能设置行内元素的宽度、高度、对齐等属性。常见行内元素如下：

标签说明<span>小盒子、小节点、小区块<a>超级链接<b><i>文本内容的粗体/斜体<strong><em>文本内容的强调学习资源常用布局方式CSS布局基础标准流布局布局思维◎块元素块元素的特点：每个块元素都会独占一行或多行，支持盒子模型，可以设置块元素的宽度、高度、对齐等属性。块元素常被用于网页布局。常见的块元素如下：标签说明<div><section>盒子、节点、区块<header><article><footer><aside><nav>语义类布局标签<h1>-<h6>标题<p>段落<ul><ol><dl><li>列表类标签学习资源常用布局方式CSS布局基础标准流布局布局思维◎行内块元素行内块元素综合了行内元素和块元素的特性，开发者可以对行内块元素设置宽度、高度和对齐属性，但该元素不会独占一行，支持部分盒子模型。常见的行内块元素有：标签说明<img>外部图片（文件）<video>外部视频（文件）<input><select><textarea>内部表单控件学习资源常用布局方式CSS布局基础标准流布局布局思维◎元素类型的转换每个HTML元素默认都有自己的显示模式，不同的显示模式有不同的呈现特性，使用CSS的【display】属性可以转换HTML元素的显示模式，如可以设置宽度和高度；或是希望块元素能够具有行内元素的某些特性，如不独占一行，则可以使用display属性对元素的类型进行转换，其语法规则为：选择器{display:属性；}属性有四个值，分别如下：属性说明Inline将元素转换成行内元素block将元素转换成块元素Inline-block将元素转换成行内块元素none将元素隐藏，不占据页面空间学习资源常用布局方式CSS布局基础标准流布局布局思维

通过制作广西少数民族文化资源网中的“铜鼓文化详情页”不难发现，网页的头部、内容、页脚是自上而下顺序分布的。像这种网页结构元素像流水一样自上而下或是自左而右分布的网页布局模式就称为标准流或文档流。这也是网页布局的默认模式。

在标准流中，块级元素独占一行，垂直放置。浏览器将按HTML标签的书写顺序，自上而下解析并显示网页头部、内容和页脚部分。头部内容页脚自

上

而

下考核评价班级：姓名：学号任务名称：铜鼓文化详情页制作评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务□完成□基本完成□未完成□完成□基本完成□未完成工作过程（50%）布局结构分析能够进行正确的页面布局划分□完成□基本完成□未完成□完成□基本完成□未完成页面切图能够进行正确的切图□完成□基本完成□未完成□完成□基本完成□未完成网站搭建网站文件命名正确□完成□基本完成□未完成□完成□基本完成□未完成HTML代码编写代码编写符合W3C标准□完成□基本完成□未完成□完成□基本完成□未完成CSS代码编写样式书写正确，并能实现参考效果□完成□基本完成□未完成□完成□基本完成□未完成项目成果（20%）工作完整能够按时完成任务□是□是工作规范能按企业规范要求进行操作□是□是成果展示能准确表达，汇报成果□是□是非技术考评（20%）态度学习态度是否端正□是□是纪律遵守纪律□是□是协作有交流、团队合作□是□是文明保持安静，清理场所□是□是