《WEB前端开发实战》课件 任务三：古迹页面制作

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

古迹页面制作目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展1+X考证练习htmlh5imgjavascriptwebcolorhr任务情境民族民俗风情是广西悠久历史文化的重要组成部分，它神秘的风采和诱人的魅力吸引了越来越多的旅游者。近年来，广西已逐步发展出具有当地特色的旅游精品路线，包括南国边关揽胜游、壮乡文化风情游、瑶苗侗乡采风游、千年灵渠寻古游、宁明花山崖画探奇游、百色小平足迹游等等。这些民俗旅游专线项目都取得了较好的经济效益和社会效益。本次专题任务是制作广西少数民族文化资源网中二级页“古迹”网页，使我们充分认识广西自身民俗资源，促进广西旅游业的快速发展。工作任务单工作任务单任务要求根据效果图完成古迹页面的制作甲方提供的设计图

如右图所示评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果1+X技能考核标准能正确选择HTML标签和CSS样式完成页面制作技能大赛考核要求制作的页面需具有交互设计，并符合W3C的HTML和CSS标准作品提交要求站点文件夹评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果任务目标任务目标能够利用浮动布局方法对页面进行布局能正确掌握背景图片样式的设置能正确选择html标签和CSS样式完成页面制作能够提高沟通协作能力，增强工匠精神和专业素质任务描述网页布局是网页制作过程中非常重要的技术环节,也是网页制作过程中难度较大的一个部分。如何正确合理地进行网页布局，无论是对于网页内容的合理呈现还是对于提升网页整体的美观程度都是非常重要的。浮动布局作为当下网页制作中重要的一种布局技术，在实际应用中被广泛采纳。

本任务，我们将通过制作广西少数民族文化资源网中古迹网页对浮动布局的原理及应用方法进行更为深入的学习和巩固。任务实施图1

结构布局分图古迹页面分为页面头部、页面主体和页面尾部三大部分。其中，页面头部和页面尾部与任务二节日页面相似，页面主体包含新闻聚焦和古迹简介两个栏目，新闻聚焦栏目主要通过列表的形式展示与名胜古迹相关的新闻，古迹简介栏目用于展示名胜古迹信息。布局结构分析页面切图HTML布局+css美化任务实施图2页面切图切片效果布局结构分析页面切图HTML布局+css美化创建页面、链接样式创建页面主体结构和样式美化创建页面头部制作新闻聚焦栏目步骤一步骤二步骤三步骤四构建HTML标准流布局+CSS页面美化操作步骤制作古迹简介栏目步骤五制作页面尾部步骤六任务实施布局结构分析页面切图HTML布局+css美化学习资源CSS3过渡效果transform变形属性常见transform变形属性（2D转换）值描述none定义不进行转换。rotate(angle)定义元素在二维空间的旋转，在参数中规定角度。scale(x,y)定义元素在二维空间的缩放和翻转。translate(x,y)定义元素在二维空间的偏移。transform属性，可用于元素的变形，可实现元素的旋转、缩放、移动、倾斜等变形效果。语法如下:transform:none|transform-functions;其中，none:默认值，不设置元素变形;transform-functions:设置一个或多个变形函数。变形函数主要包括旋转rotate()、缩放scale()、移动translate()等，设置多个变形函数时，用空格间隔。学习资源CSS3过渡效果transform变形属性元素的旋转，rotate()函数语法如下:rotate(angle)其中，angle表示旋转的角度，为带有角度单位标识符的数值，角度单位是deg。值为正时,表示顺时针旋转；值为负时，表示逆时针旋转。设置当鼠标放到无序列表项目上时的CSS样式。顺时针旋转30度，背景颜色为橙色，文字颜色为白色。代码如下:li:hover{transform:rotate(30deg);background-color:orange;color:white;}当把鼠标放到导航栏项目上时，栏目会旋转一定的角度，网页效果如图所示：学习资源CSS3过渡效果transform变形属性元素的缩放和翻转，scale()函数语法如下:scale(x,y)其中，x:表示元素在水平方向上的缩放倍数。y:表示元素在垂直方向上的缩放倍数。x、y的值可以为整数、负数、小数。当取值的绝对值大于1时,表示放大;绝对值小于1时，表示缩小。当取值为负数时，元素会被翻转。如果y值省略，则说明垂直方向上的缩放倍数与水平方向上的缩放倍数相同。当鼠标放到导航栏项目上时，栏目在水平和垂直方向同时放大1.5倍，效果如图所示。:li:hover{transform:scale(1.5);background-color:orange;color:white;}学习资源CSS3过渡效果transform变形属性元素的移动，translate()函数语法如下:translate(dx,dy)其中，dx:表示元素在水平方向上的偏移距离;dy:表示元素在垂直方向上的偏移距离;dx、dy的值为带有长度单位标识符的数值，可以为负值和带小数的值。若取值大于0，则表示向右或向下偏移;若取值小于0，则表示向左或向上偏移。如果dy值省略，则说明垂直方向上的偏移距离默认为0。设置鼠标放到导航栏上时，栏目发生一定的偏移，向右偏移10像素,向下偏移5像素。代码如下:transform:translate(10px,5px);学习资源CSS3过渡效果transform变形属性同时使用多个变形函数，使得元素变形可以更加灵活，多个函数之间用空格分隔。设置向右下方向各偏移10像素，顺时针旋转30度，垂直翻转。代码如下:transform:translate(10px,10px)rotate(30deg)scale(1,-1);学习资源CSS3过渡效果transform变形属性transition过渡属性值描述transition-property属性名，哪个属性需要变化transition-duration持续时间transition-timing-function过渡效果的速度曲线transition-delay过渡延迟时间将元素的某个属性从“一个值”在指定时间内过渡到“另一个值”transition：属性名持续时间过渡方式延迟时间学习资源CSS3过渡效果transform变形属性transition-timing-function属性规定过渡效果的速度曲线。

该属性允许过渡效果随着时间来改变其速度。值描述linear匀速ease慢速开始，变快，慢速结束ease-in慢速开始ease-out慢速结束ease-in-out慢速开始和结束考核评价班级：姓名：学号任务名称：古迹页面制作评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务□完成□基本完成□未完成□完成□基本完成□未完成工作过程（50%）布局结构分析能够进行正确的页面布局划分□完成□基本完成□未完成□完成□基本完成□未完成页面切图能够进行正确的切图□完成□基本完成□未完成□完成□基本完成□未完成网站搭建网站文件命名正确□完成□基本完成□未完成□完成□基本完成□未完成HTML代码编写代码编写符合W3C标准□完成□基本完成□未完成□完成□基本完成□未完成CSS代码编写样式书写正确，并能实现参考效果□完成□基本完成□未完成□完成□基本完成□未完成项目成果（20%）工作完整能够按时完成任务□是□是工作规范能按企业规范要求进行操作□是□是成果展示能准确表达，汇报成果□是□是非技术考评（20%）态度学习态度是否端正□是□是纪律遵守纪律□是□是协作有交流、团队合作□