项目3任务1ppt课件.pptx

《项目3任务1ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目3任务1ppt课件.pptx（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目3任务1项目3 对网页广告单页进行响应式改造任务3.1 变更网页导航菜单HTML5+CSS3网页布局学校名称：任课老师：联系电话：目录CONTENTS01项目简介02学习目标03任务描述04知识学习与课堂练习05任务实施06任务回顾07任务拓展01 项目将通过“对网页广告单页进行响应式改造”项目，完成网页删格系统、网页常见组件的学习与制作。 在项目2完成后，你的程序员搭档张妃也已经完成了她的工作并进行了集成测试，你们成功发布了网页的1.0版本。在进行系统测试前，华南工业大学信息工程系招生就业办公室与你的上司（项目经理）沟通，他们希望网页能够满足手机浏览的同时，能够兼顾平板、电脑以及宽屏用户

2、，你的上司召开了项目变更会议，会议同意了他们的需求变更要求，并完成了变更手续。 现在，变更单已经交付到你是手上，你需要根据变更单要求，对项目2的成果进行修改，以使页面能够符合客户需求。 在你完成变更后，你需要向你的项目经理汇报。 变更单如右。项目简介客户华南工业大学信息工程系招生就业办公室项目名称招生宣传广告单页客户版本1.0报告人雷总工日期2015年5月19日表单编号V1.2.8变更提出点：客户需求 开发测试发现 工程实施发现 客服反馈 开发质量评审 其它问题问题/变更原因的说明 (请附上所有相关文件或数据以备查阅（如有）) 变更内容：页面布局更改后希望达到目标：能够适应平板、电脑和宽屏等不

3、同视口的浏览需求建议解决方案：将页面修改为响应式页面 基线，基线版本，1.0 变更原因：缺陷功能增强新需求涉及模块前端影响客户（可选）预计工作量40小时是否变更是 否优先级：特急 急 一般 缓完成时限确认意见（注：为基线变更需由CCB组长审批）变更影响范围配 置 项 提取路径申请配置项目源代码文档index.htmlstyle.css变更实施人前端工程师.谢工申 请日期2015年5月19日关联单号无客户单位意见建设单位意见01 网页制作的一般流程如下： 拿到变更单后，你需要根据项目变更流程，完成网页的变更。 首先，我们的变更是明确的，。 其次，我们需要制定项目完成的计划：项目分析分析需求选用并

4、配置开发环境网页开发网页测试发布发布网页发布网页到服务器，完成项目程序员完成逻辑功能制作逻辑功能测试网页测试测试网页对手机的支持情况修改网页bag设置网页格式使用CSS设计页面格式优化CSS以支持更多的浏览器添加页面内容根据内容类型选择HTML标签创建网页内容为标签添加必要的属性，已被CSS使用创建网页创建资源管理目录（文件夹）创建适合手机浏览的HTML5页面准备工作环境选择合适的开发环境（软件）搭建环境01 1、能够选择合适的软件完成HTML网页页面的制作 2、能够根据内容属性选择HTML5标签并设置标签属性能力目标02 1、能表述响应式网页设计的相关概念； 2、能说明CSS媒体查询在响应式

5、网页设计中的作用； 3、能够正确使用CSS媒体查询。03 将系部宣传网页设置为响应式网页，当用户使用平板设备或电脑设备时，对导航栏中的列表标签进行样式设置和排版，使导航栏的列表内容全部显示在页面顶部。04知识学习与课堂练习 响应式网页设计就是网页的设计与开发能够根据用户行为以及设备环境（系统平台、屏 幕尺寸、屏幕定向等）进行相应的响应和调整。即无论用户正在使用笔记本、ipad、手机，我们的页面都能够自动切换分辨率、图片尺寸等，以适应不同设备。如下图所示的同一个网页在不同的设备所显示的效果。1、认识响应式网页设计04知识学习与课堂练习 CSS媒体查询可以根据不同的屏幕尺寸设置不同的样式。当我们重

6、置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。 其语法形式如下： media mediatype and|not|only (media feature) CSS-Code; 其中，mediatype即媒体类型有以下几种：2、CSS媒体查询媒体类型all用于所有设备print用于打印机和打印预览screen用于电脑屏幕，平板电脑，智能手机等speech应用于屏幕阅读等发声设备04知识学习与课堂练习 Media feature即媒体功能有如右取值。 例： media screen and (min-width: 320px) and (max-width:768px) /*这

7、里的样式将会应用到320px至768px之间的显示屏*/ /*media查询媒体；如果是媒体是显示屏幕（screen），且显示宽度在320px至768px之间，这执行后续的样式代码。注意and前后要添加空格。2、CSS媒体查询值描述width浏览器可视宽度height浏览器可视高度device-width设备屏幕的宽度device-height设备屏幕的高度orientation检测设备目前处于横向还是纵向状态aspect-ratio检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)device-aspect-ratio检测设备的宽度和高度的比例color检测颜色的位

8、数。（例如：min-color:32就会检测设备是否拥有32位颜色）color-index检查设备颜色索引表中的颜色，他的值不能是负数monochrome检测单色楨缓冲区域中的每个像素的位数resolution检测屏幕或打印机的分辨率grid检测输出的设备是网格的还是位图设备04知识学习与课堂练习html1some textcss123456789101112131415161718.text color: grey;media screen and (max-width: 960px) .text color: red;media screen and (max-width: 768px)

9、.text color: orange;media screen and (max-width: 550px) .text color: yellow;media screen and (max-width: 320px) .text color: green;课堂练习3.1-1 CSS媒体查询简单应用04知识学习与课堂练习 媒体查询就是通过不同的媒体类型和条件定义样式表规则。媒体查询的实现方法很多，这里只介绍W3C推荐的媒体查询CSS样式规则。 也可以通过下列两种写法来实现媒体查询： import url(example.css) screen and (width:800px); 另外，在

10、使用media时候需要先设置下面这段代码，来兼容移动设备的展示效果： 这段代码我们在项目1已经讲过了，其中width=device-width为宽度等于当前设备的宽度，initial-scale为初始的缩放比例（默认设置为1.0）。05任务实施 更改系部宣传网页头部的导航栏部分，让导航栏的列表内容显示在页面顶部。1234567891011121314151617181920212223/*平板设备附加的样式，页面宽度大于等于768*/media all and (min-width:768px)/*显示导航栏*/header nav width: auto; header nav:hover

11、background: transparent; header nav span display: none; header nav ulposition: static;width: auto;/*宽度自动适应内部的li的总宽度，不能设100%*/display: block;border: none;header nav limargin: 0 10px;float: left;line-height: 30px;.team section height: 300px;/*避免高度不一致*/ .contact section margin-bottom: 40px; footer div:nth-of-type(1) float: left; footer div:nth-of-type(2) float: right; 06任务回顾学习 1、响应式网页设计的相关概念 2、CSS媒体查询及其在响应式网页设计中的作用完成 将移动端“图标+列表”的导航修改为在平板端以上视口设备显示为横向导航条。07任务拓展 1、二级导航菜单的CSS实现方法感谢聆听！THANK YOU!HTML5+CSS3网页布局学校名称：指导老师：联系电话：