项目一HTML5+CSS3网页布局与美化任务四服饰页面制作主讲：莫德智htmlh5imgjavascriptwebcsscolorhr
目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展1+X考证练习htmlh5imgjavascriptwebcolorhr
任务情境中国人的汉字是象形文字，而多数的民族没有自己的文字，所以他们就借助针、线在服饰上描绘民族图案，讲述本民族的故事，让子孙了解本民族的文化历史，传承民族精神。例如壮族服饰中，存在的大量动物纹样就折射出了壮族人民对自然的崇拜。广西拥有着12个少数民族，而这些少数民族的服饰各有其特色之处。本次专题任务是采用定位布局的方式来完成广西少数民族文化资源网二级页“服饰”页面的制作。
工作任务单工作任务单任务要求根据效果图完成服饰页面制作甲方提供的设计图如右图所示评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果1+X技能考核标准能正确选择html标签和CSS样式完成页面制作技能大赛考核要求制作的页面需具有交互设计，并符合W3C的HTML和CSS标准作品提交要求站点文件夹评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果
任务目标任务目标能够掌握网页前端重构的流程方法能够正确使用切图工具进行网页切图能够使用HTML常用的标签构建简单的HTML页面能够通过定义样式属性美化页面，实现网页效果图的重构效果能够形成布局思维并通过定位布局简单网页
任务描述定位布局是主流的页面布局之一，定位布局可以实现标准流布局和浮动布局没办法完成的效果，比如某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子。当我们滚动窗口的时候，盒子是固定屏幕某个位置的。定位布局是可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子。本任务中，我们将通过制作广西少数民族文化资源网中的服饰页面来学习使用定位布局的三种定位类型，如何设置元素定位位置。服饰页面的页面结构：页面顶部包含标题logo、页面导航栏、登陆、注册以及页面主图，页面主体部份包含民族时尚，传统服饰，壮美配饰以及固定侧边栏。页尾部分。
任务实施图2结构布局思路图图1结构布局分析图布局结构分析页面切图网站搭建HTML布局+css美化
任务实施图3页面切图切片效果布局结构分析页面切图网站搭建HTML布局+css美化
创建站点文件夹fineryJS在进行网页制作之前，首先需要完成站点文件夹的建立ImgCSS文件/文件夹作用Img文件夹存放图片资源文件CSS文件夹存放CSS样式文件JS文件夹存放JS文件finery.html文件服饰布局结构分析页面切图网站搭建HTML布局+css美化任务实施
创建站点、链接样式、搭建页面主体结构完成页头（header）内容制作民族时尚栏目制作传统服饰栏目步骤一步骤二步骤三步骤四构建HTML标准流布局+CSS页面美化操作步骤制作壮美配饰栏目步骤五制作固定侧边栏栏目步骤六完成页脚（footer）内容步骤七布局结构分析页面切图网站搭建HTML布局+css美化任务实施
学习资源定位布局基础定位布局布局思维01HTML创建页面元素02CSS盒模型呈现元素03CSS排版元素布局思维流程
学习资源定位的组成定位=定位模式+边偏移◎定位模式position属性，决定了html元素在页面中的定位方式以及定位的参照对象。定位布局基础定位布局布局思维值定位方式文档流参照对象static静态定位（默认值）默认文档流依据默认文档流中元素的顺序依次排列=无定位absolute绝对定位定位文档流相对于非static定位的父元素进行定位relative相对定位相对于自身在默认文档流中的位置进行定位fixed固定定位相对于浏览器视口进行定位
学习资源边偏移属性描述top顶端偏移量，定义元素相对于其父元素的上边线的距离bottom底部偏移量，定义元素相对于其父元素的下边线的距离right右侧偏移量，定义元素相对于其父元素右边线的距离left左侧偏移量，定义元素相对于其父元素左边线的距离◎边偏移定位布局基础定位布局布局思维◎定位层对象不设定position属性，即保持对象默认的【static】的静态定位方式，对象处于默认文档流中。设定position属性，即将对象转化为【非static】的动态定位方式，这种【非static】的定位对象，我们往往称为“定位层”。
学习资源◎定位文档流定位布局基础定位布局布局思维定位层对象，脱离默认文档流，形成新的定位文档流。定位文档流依附于Z轴走向排列，多个定位文档流具有Z轴