《WEB前端开发实战》课件 任务二：节日页面制作

项目一HTML5+CSS3网页布局与美化主讲：陈倩htmlh5imgjavascriptwebcsscolorhr任务二

节日页面制作目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展1+X考证练习htmlh5imgjavascriptwebcolorhr任务情境广西是多民族聚居的自治区，自古以来就有许多的民族传统节日，比如壮族的三月三歌节、瑶族的达努节和盘王节、苗族的踩花山、仫佬族的走坡节、侗族的花炮节，以及别有风味的打油茶等充满着浓郁的民族风情的节日活动。民族节日的形式、内容丰富多彩，它包含特有的民俗风情、节庆典礼、宗教信仰、传统服饰、烹调技艺、工艺特产、音乐歌舞等，以丰富的文化内涵及特有的民族风情吸引着广大的海内外游客。本次专题任务是采用浮动布局的方式来完成网站中节日页的制作。工作任务单工作任务单任务要求根据效果图完成节日页面的制作甲方提供的设计图

如右图所示评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果1+X技能考核标准能正确选择HTML标签和CSS样式完成页面制作技能大赛考核要求制作的页面需具有交互设计，并符合W3C的HTML和CSS标准作品提交要求站点文件夹评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果任务目标任务目标能够掌握网页前端重构的流程方法能够正确使用切图工具进行网页切图能够掌握浮动布局的原理和应用技巧能够掌握项目列表的使用方法和CSS样式的应用方法能够利用浮动布局方法对页面进行布局能够了解广西少数民族民俗活动，增强民族凝聚力能够提高沟通协作能力，增强工匠精神和专业素质任务描述浮动布局是最常见的网页布局方式之一，通过设置元素的float属性可以使原本独占一行的多个块元素显示在同一行中，从而为网页布局提供了更多的可能性。浮动前浮动后任务实施图1

结构布局划分图民族节日页分为页头、页中和页尾三大结构，页头和页尾与任务一壮族铜鼓文化详情页类似，页中包含新闻资讯和节日博览两个栏目内容，新闻资讯栏目通过图文展示民族节日活动相关的最新新闻，节日博览作为侧边栏，通过列表的形式按民族进行分类，展示广西各少数民族的节日信息。布局结构分析页面切图HTML布局+css美化任务实施图2页面切图切片效果布局结构分析页面切图HTML布局+css美化创建页面、链接样式创建页面主体结构和样式美化创建页面头部制作新闻资讯栏目步骤一步骤二步骤三步骤四构建HTML标准流布局+CSS页面美化操作步骤制作节日博览栏目步骤五制作页面尾部步骤六任务实施布局结构分析页面切图HTML布局+css美化学习资源列表的应用列表是一种非常有用的数据排列方式，最直接的用途是有序的呈现文字，但利用列表还可以做出其他丰富的效果，罗列不同的元素，如图像等，使用项目列表制作导航菜单也是重要的应用之一。浮动的原理及应用方法列表的应用和样式设置学习资源列表的分类代码

<h3>广西的少数民族：</h3><ul><li>壮族</li><li>瑶族</li><li>侗族</li></ul>效果项目列表ul也称为无序列表，使用<li>标签来罗列各个项目，并使用特殊符号来进行分项标识，如黑色圆点等。列表项之间没有顺序关系。浮动的原理及应用方法列表的应用和样式设置学习资源列表的分类代码<h3>网页制作相关课程设计：</h3><ol><li>网页美工</li><li>HTML+CSS网页制作</li><li>JavaScript程序设计</li></ol>效果编号列表ol又称为有序列表，每个列表项前面都有标识顺序的编号，如1、2、3等。编号的形式可以通过CSS样式进行控制。浮动的原理及应用方法列表的应用和样式设置学习资源列表的样式设置属性描述list-style-type规定列表项标记的类型。list-style-image指定图像作为列表项标记。list-style-position规定列表项标记（项目符号）的位置。浮动的原理及应用方法列表的应用和样式设置学习资源浮动的原理及应用方法列表的应用和样式设置列表的样式设置属性值说明disc默认值，黑色圆点circle空心圆圈

square黑色正方形none不显示符号decimal数字，如1，2，3………lower-roman小写罗马文字，如：ⅰ，ⅱ，ⅲ，ⅳ……upper-roman大字罗马文字，如：Ⅰ，Ⅱ，Ⅲ，Ⅳ……lower-latin小写拉丁文，如：a，b，c，d……upper-latin大写拉丁文，如：A，B，C，D……inherit继承list-style-type属性，设置列表符号类型项目列表编号列表学习资源列表的样式设置list-style-image属性，将图像指定为列表项标记：语法格式：list-style-image:url(图像的路径及文件名);浮动的原理及应用方法列表的应用和样式设置学习资源列表的样式设置list-style-position属性，指定列表项标记（项目符号）的位置。属性值说明outside默认值。保持列表符号位于文本左侧，并且放置在文本以外，环绕文本不根据标记对齐。inside列表符号放置在文本以内，且环绕文本根据列表符号对齐。"list-style-position:outside;"表示项目符号点将在列表项之外。"list-style-position:inside;"

表示项目符号将在列表项内。浮动的原理及应用方法列表的应用和样式设置学习资源浮动与float属性元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。在CSS中，float属性用来定义元素向哪个方向浮动，语法格式如下：选择器{float:属性值;}属性值说明left元素向左浮动。right元素向右浮动。none默认值。元素不浮动，并会显示在其在文本中出现的位置。inherit规定应该从父元素继承float属性的值。浮动的原理及应用方法列表的应用和样式设置学习资源浮动的原理及特点浮动元素脱离默认文档流，漂浮在默认文档流之上，效果参考图1-27。浮动元素不受默认文档流的限制，直接适用于盒子模型。浮动元素以父元素或同级元素的浮动方向为参考进行对齐排列。浮动元素虽然脱离默认文档流，但是仍会对默认文档流中的内容造成影响。浮动的原理及应用方法列表的应用和样式设置学习资源浮动带来的不良影响浮动的原理及应用方法列表的应用和样式设置在浮动布局中，因为浮动元素脱离了标准流，所以会对附近的其他元素产生影响，使结构布局出现混乱。另外，还会出现一种高度塌陷的现象：原来的父容器高度是由被包含元素撑起的，但是当被包含元素脱离标准流浮动后，原来的父容器高度就会塌陷。未设置浮动的状态时，如下图所示：当两个子元素向左浮动时，box1出现高度塌陷，box2受浮动影响向上移动，如下入所示：学习资源消除浮动不良影响的方法浮动的原理及应用方法列表的应用和样式设置方法一：在被浮动不良影响的元素中设置样式clear：both。缺点：不能解决父元素的高度塌陷问题。方法二：在最后一个浮动元素后添加空标签（可以是<div>、<p>、<hr>等），并为其添加样式clear：both。缺点：添加无意义的空标签，结构化差，后期维护麻烦。方法三：使用伪元素清除浮动，给包含浮动的父元素添加如下样式。

优点：没有增加标签，不破坏文档结构，没有副作用，同时能在低版本浏览器上正常显示。学习资源消除浮动不良影响的方法浮动的原理及应用方法列表的应用和样式设置方法三：使用伪元素清除浮动，给包含浮动的父元素添加如下样式。步骤一:设置.clearfloat样式步骤二:将.clearfloat样式应用在浮动元素的父元素上。.clearfloat{zoom:1;}.clearfloat:after{content:"";display:block;height:0;visibility:hidden;clear:both;}设置.clearfloat样式考核评价班级：姓名：学号任务名称：节日页面制作评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务□完成□基本完成□未完成□完成□基本完成□未完成工作过程（50%）布局结构分析能够进行正确的页面布局划分□完成□基本完成□未完成□完成□基本完成□未完成页面切图能够进行正确的切图□完成□基本完成□未完成□完成□基本完成□未完成网站搭建网站文件命名正确□完成□基本完成□未完成□完成□基本完成□未完成HTML代码编写代码编写符合W3C标准□完成□基本完成□未完成□完成□基本完成□未完成CSS代码编写样式书写正确，并能实现参考效果□完成□基本完成□未完成□完成□基本完成□未完成项目成果（20%）工作完整能够按时完成任务□是□是工作规范能按企业规范要求进行操作□是□是成果展示能准确表达，汇报成果□是□是非技术考评（20%）态度学习态度是否端正□是□是纪律