《WEB前端开发实战》课件 任务四：服饰页面制作

项目一

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轴方向的前后叠加顺序关系。与浮动文档流不同，定位文档流将完全脱离默认文档流，无任何关联。学习资源◎定位文档流的顺序控制定位布局基础定位布局布局思维属性说明z-index规定定位元素的堆叠顺序，拥有更高顺序的元素总是会处于较低顺序的元素的前面z-index属性仅对定位层对象生效，用来控制对象的定位文档流层叠关系。z-index：Z轴的索引顺序。值用来指定顺序关系，number数字形式，没有单位，允许负值。未定义z-index的情况下，定位对象依据它们在HTML结构中的顺序，写在后面的在Z轴上越靠前z-index：默认值为0，正值越大，层叠级别越高，Z轴上越靠前；学习资源◎相对定位relative相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。特点：定位布局基础定位布局布局思维在相对定位中同一个方向上的定位属性只能使用一个给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局相对定位是不脱离标准流的,会继续在标准流中占用一份空间在相对定位中是区分块级元素/行内元素/行内块级元素。学习资源◎绝对定位absolute绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的。定位布局基础定位布局布局思维如果祖先元素父级有定位(相对、绝对、固定定位)，则以最近一级，有定位祖先元素为参考点移动位置如果没有祖先元素，或者祖先元素没定位，即默认情况下所有的绝对定位的元素,无论有没有祖先元素,都会以body作为参考点。绝对定位不再占用原先的位置（脱标）绝对定位参考点学习资源◎固定定位fixed固定定位是元素固定于浏览器的可视区的位置。定位布局基础定位布局布局思维特点02跟父元素没有任何关系03不随滚动条滚动01以浏览器的可视窗口为参照点移动元素04固定定位不再占有原先的位置(脱标)05固定定位也可以看做是一种特殊的绝对定位06定定位和绝对定位一样不区分行内/块级/行内块级学习资源

通过制作广西少数民族文化资源网中的“服饰页面”不难发现，网页的内容，我们可以让其在页面的任何位置。像这种网页结构元素让盒子自由的在某个盒子内移动或固定在屏幕中的某个位置，并且可以压住某个盒子。

在定位布局中，通过设置元素的定位模式和边偏移量，实现页面内容的布局方式。定位布局基础定位布局布局思维考核评价班级：姓名：学号任务名称：服饰页面制作评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务□完成□基本完成□未完成□完成□基本完成□未完成工作过程（50%）布局结构分析能够进行正确的页面布局划分□完成□基本完成□未完成□完成□基本完成□未完成页面切图能够进行正确的切图□完成□基本完成□未完成□完成□基本完成□未完成网站搭建网站文件命名正确□完成□基本完成□未完成□完成□基本完成□未完成HTML代码编写代码编写符合W3C标准□完成□基本完成□未完成□完成□基本完成□未完成CSS代码编写样式书写正确，并能实现参考效果□完成□基本完成□未完成□完成□基本完成□未完成项目成果（20%）工作完整能够按时完成任务□是□是工作规范能按企业规范要求进行操作□是□是成果展示能准确表达，汇报成果□是□是非技术考评（20%）态度学习态度是否端正□是□是纪律遵守纪律□是□是协作有交流、团队合作□是□是文明保