《WEB前端开发实战》课件 任务五：美食详情页制作

项目一HTML布局+CSS美化任务五

美食详情页制作主讲：黄美世htmlh5imgjavascriptwebcsscolorhr目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展1+X考证练习htmlh5imgjavascriptwebcolorhr任务情境广西是中国5个少数民族自治区之一，地处中、南亚热带季风气候区，气候温暖，热量丰富，有很多地方美食，自古以来广西就是官宦商旅云集之地，因而这里的饮食习惯融合了粤、川、湘、浙、赣、闽等地方菜肴特色，善长众菜合调，粗菜细做。本次专题任务是完成广西少数民族文化资源网中二级页“美食”页面，让更多的人了解广西的特色美食，喜欢广西美食，起到很好的宣传作用，从而促进广西经济的发展。本次专题任务是采用弹性布局的方式来进行美食页面的布局，利用响应式布局来完成网页电脑端、iPad端和移动端三个端口的展示。工作任务单工作任务单任务要求根据效果图完成美食详情页制作甲方提供的设计图

如右图所示评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果1+X技能考核标准能正确选择html标签和CSS样式、响应式布局、弹性布局相关知识完成页面制作技能大赛考核要求制作的页面需具有交互设计，并符合W3C的HTML和CSS标准作品提交要求站点文件夹评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果任务目标任务目标能够掌握网页前端重构的流程方法能够正确使用切图工具进行网页切图能够掌握响应式布局的基础知识能够掌握弹性布局的基础知识能够通过mediaquery媒体查询的使用和定义样式属性实现三个端口的自适应，实现网页效果图的重构效果任务描述响应式布局是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本。本任务中，我们将通过制作广西少数民族文化资源网中的美食详情页来学习响应式布局、弹性布局的基础知识、学习mediaquery媒体查询、学习如何通过定义CSS样式来实现电脑端、iPad端和手机端自适应。

美食详情页分为页头、页面主体、页尾三大结构，页面头部包含标题logo、页面导航栏、登陆、注册信息，获取当前时间、美食页面的banner，页面主体部份包含相约广西栏目、广西美食介绍栏目两个板块任务实施图2

结构布局思路图图1

结构布局划分图布局结构分析页面切图HTML布局+css美化任务实施图3页面切图切片效果布局结构分析页面切图HTML布局+css美化foodvideo创建站点文件夹JS在进行网页制作之前，首先需要完成站点文件夹的建立ImgCSS文件/文件夹作用Img文件夹存放图片资源文件CSS文件夹存放CSS样式文件JS文件夹存放JS文件video文件夹存放视频文件food.html文件首页任务实施布局结构分析页面切图HTML布局+css美化创建页面、链接样式、搭建页面主体结构完成页面头部制作相约广西栏目制作广西特色美食介绍栏目步骤一步骤二步骤三步骤四构建HTML响应式布局+CSS页面美化操作步骤制作页面尾部步骤五完成美食页面平板端制作步骤六完成美食页面移动端制作步骤七布局结构分析页面切图HTML布局+css美化任务实施学习资源学习资源响应式布局的概念响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式WEB设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法,响应式设计可以随着所显示的屏幕大小而改变,实现响应式设计的核心就是媒体查询。使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。优点：1、面对不同分辨率设备灵活性强。2、能够快捷解决多设备显示适应问题。响应式布局的优、缺点缺点：1、兼容各种设备工作量大，效率低下。2、代码累赘，会出现隐藏无用的元素，加载时间加长。响应式布局flex弹性布局媒体查询学习资源01flex（弹性布局）02mediaquery（媒体查询）03vw/vh实现响应式布局的五种方式04%(百分百)04rem响应式布局flex弹性布局媒体查询学习资源flex弹性布局的定义Flex弹性布局是一种当页面需要适应不同的屏幕大小以及设备类型时，确保元素拥有恰当的行为的布局方式。应用它可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。使用flex弹性布局的目的是用一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。如需使用flex弹性布局，首先需要定义flex容器（将display属性设置为flex）。Flex容器内包含了一个或多个flex元素。响应式布局flex弹性布局媒体查询学习资源1.主轴与交叉轴

（flex-direction）：利用该属性定义主轴方向，即项目的排列方向值描述row默认值。水平堆叠flex项目（从左到右）。row-reverse水平堆叠flex项目（从右到左）。column垂直堆叠flex项目（从上到下）。column-reverse垂直堆叠flex项目（从下到上）。

响应式布局flex弹性布局媒体查询学习资源2.项目分行flex-wrap：利用该属性定义当一条轴线排不下所有项目时，如何换行值描述wrap换行nowrap不换行wrap-reverse行序反向响应式布局flex弹性布局媒体查询学习资源3.排序方向justify-content、align-items：justify-content属性用于定义flex项目在主轴上对齐。align-items属性用于定义flex项目在交叉轴对齐。值描述flex-start默认值。将flex项目在容器的开头对齐flex-end将flex项目在容器的末端对齐center将flex项目在容器的中心对齐stretch拉伸显示baseline基线对齐

响应式布局flex弹性布局媒体查询学习资源4.分行的排序方式align-content：align-content属性规定当分行时，每一行的排序方式值描述flex-start默认值。每行在容器的开头对齐flex-end每行在容器的末端对齐center每行在容器的中心对齐space-around在每行之前、之间和之后都带有空格space-between每行之间都有相等距离响应式布局flex弹性布局媒体查询学习资源响应式布局flex弹性布局媒体查询1.媒体查询的定义媒体查询是CSS3的新增属性。它是实现响应式布局的关键，可以针对不同的媒体类型和不同的屏幕尺寸定义不同的样式，在重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新进行渲染。媒体查询目前广泛应用于苹果手机、Android手机、平板电脑等设备。学习资源响应式布局flex弹性布局媒体查询2.媒体查询语法@mediamediatypeand

|

not|only(mediafeafure){css-code;}语法解释：（1）用@开头，@media注意@符号。（2）mediatype用于定义媒体类型。（3）关键字为and，not，only(注意and前后都有空格)。（4）mediafeature媒体特性必须用括号()括起。关键字解释：And：可以将多个媒体特性连接到一起，相当于“且”的意思。Not:排除某个媒体类型，相当于“非”的意思，可以省略。Only:指定某个特定的媒体类型，可省略。学习资源响应式布局flex弹性布局媒体查询3.媒体类型值描述all默认值。用于所有媒体类型的设备print用于打印机screen用于计算机、平板电脑、智能手机等speech用于屏幕阅读器等发声设备mediatype属性值考核评价班级：姓名：学号任务名称：古迹页面制作评价项目评价标准自评情况考核情况课前自主探究（10%）完成课前学习通中下发任务□完成□基本完成□未完成□完成□基本完成□未完成工作过程（50%）布局结构分析能够进行正确的页面布局划分□完成□基本完成□未完成□完成□基本完成□未完成页面切图能够进行正确的切图□完成□基本完成□未完成□完成□基本完成□未完成网站搭建网站文件命名正确□完成□基本完成□未完成□完成□基本完成□未完成HTML代码编写代码编写符合W3C标准□完成□基本完成□未完成□完成□基本完成□未完成CSS代码编写样式书写正确，并能实现参考效果□完成□基本完成□未完成□完成□基本完成□未完成项目成果（20%）工作完整能够按时完成任务□是□是工作规范能按企业规范要求进行操作□是□是成果展示能准确表达，汇报成果□是□是非技术考评（20%）态度学习态度是否端正□是□是纪律遵守纪律□