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

项目一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广西的少数民族：/h3ulli壮族/lili瑶族/lili侗族/li/ul效果项目列表ul也称为无序列表，使用li标签来罗列各个项目，并使用特殊符号来进行分项标识，如黑色圆点等。列表项之间没有顺序关系。浮动的原理及应用方法列表的应用和样式设置

学习资源列表的分类代码h3网页制作相关课程设计：/h3olli网页美工/liliHTML+CSS网页制作/liliJavaScript程序设计/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属性，设置列表符号类型项目列表编号列表

学习