《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.样式编写正确，能够达到参考效果

任务目标任务目标能够掌握网页前端重构的流程方法能够正确使用切图工具进行网页切图能够使用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超级链接bi文本内容的粗体/斜体strongem文本内容的强调

学习资源常用布局方式CSS布局基础标准流布局布局思维◎块元素块元素的特点：每个块元素都会独占一行或多行，支持盒子模型，可以设置块元素的宽度、高度、对齐等属性。块元素常被用于网页布局。常见的块元素如下：标签说明divsection盒子、节点、区块headerarticlefooterasidenav语义类布局标签h1-h6标题p段落uloldlli列表类标签

学习资源常用布局方式CSS布局基础标准流布局布局思维◎行内块元素行内块元素综合了行内元素和块元素的特性，开发者可以对行内块元素设置宽度、高度和对齐属性，但该元素不会独占一行，支持部分盒子模型。常见的行内块元素有：标签说明