项目3任务3ppt课件.pptx

项目3任务3项目3 对网页广告单页进行响应式改造任务3.3 重布局网页内容列表以适应不同窗口HTML5+CSS3网页布局学校名称：任课老师：联系电话：目录CONTENTS0102学习目标03任务描述04知识学习与课堂练习05任务实施06任务回顾任务拓展01 1、能进一步完善栅格化系统的功能，增加栅格布局的留白区域和栅格模块的隐藏功能； 2、能将栅格化系统实际运用到网页制作的布局中。02 使用任务2中制作的响应式栅格系统（文件grid.css），进一步完善系部宣传网页。使页面在平板设备、电脑设备中都能正常显示，并根据浏览器的宽度自动调整页面部分内容的排版。学习 1、栅格布局的留白区域设置 2、栅格模块的隐藏功能设置完成 1、页面的响应式设置 2、完善了页面效果的部分细节03知识学习与课堂练习 在网页布局中，并不是任何网页都会将页面的空间填满，有时候由于网页设计的需要会预留一些不放置内容的区域。在上一任务中设置的栅格布局中，每个模块都会从左向右排列将空间填满，现在需要进一步改良设置。 如下图所示，由于标签的填充已用于设置模块间的间距，所以使用左边界，以每份网格为单位，为模块标签的左侧隔开留白的空间。1、为网页栅格系统添加留白区域03知识学习与课堂练习 左边界的长度同样还是以百分比%为单位，设置为一份网格的整倍数，有1份网格、2份、11份一种11种情况。和上一任务中栅格系统设置方法类似，为不同的情况都设置一个独立的选择符。 为栅格系统的CSS文件补充设置。 为模块标签添加“grid_”设置宽度的同时，添加“ml_”付加上左边界产生左侧留白效果。1、为网页栅格系统添加留白区域css123456789101112/*追加留白的设置*/.ml_s1 margin-left: 8.33333%; .ml_s2 margin-left: 16.66667%; .ml_s3 margin-left: 25%; .ml_s4 margin-left: 33.33333%; .ml_s5 margin-left: 41.66667%; .ml_s6 margin-left: 50%; .ml_s7 margin-left: 58.33333%; .ml_s8 margin-left: 66.66667%; .ml_s9 margin-left: 75%; .ml_s10 margin-left: 83.33333333%; .ml_s11 margin-left: 91.66667%; html1234567803知识学习与课堂练习 响应式栅格系统中要添加留白效果，需要为每种设备的媒体查询，分别添加上述的CSS设置，并通过选择符的名称区分，做法与上一任务中响应式栅格系统设置方法类似。 如果因为布局需求添加右侧留白边界的，使用相同的方法添加对应的选择符，此处不再重复讲解。1、为网页栅格系统添加留白区域grid.css123456789101112131415161718192021/*手机设备附加的样式，页面宽度=767*/media all and (max-width:767px)/*追加留白的设置*/.ml_s1 margin-left: 8.33333%; .ml_s2 margin-left: 16.66667%; /* 其余设置与上述内容一样，此处省略*/*平板设备附加的样式，768=页面宽度=1024*/media all and (min-width:1024px)/*追加留白的设置*/.ml_L1 margin-left: 8.33333%; .ml_L2 margin-left: 16.66667%; /* 其余设置与上述内容一样，此处省略*/03知识学习与课堂练习 部分网页的内容比较多，在手机或平板设备下页面无法显示过多的内容，可能需要隐藏部分次要的模块，以节省空间。前面栅格系统的设置中，设定了1-12份网格占用的空间，现在追加一个“0份”空间，设置为“display:none;”，添加了该选择符的标签便会被隐藏。2、在特定设备宽度下隐藏部分的栅格模块grid.css123456789101112media all and (max-width:767px)/*追加设置*/.grid_s0 display: none;media all and (min-width:768px) and (max-width:1023px)/*追加设置*/.grid_m0 display: none;media all and (min-width:1024px)/*追加设置*/.grid_L0 display: none;04任务实施 使用任务2中制作的响应式栅格系统（文件grid.css），进一步完善系部宣传网页。使页面在平板设备、电脑设备中都能正常显示，并根据浏览器的宽度自动调整页面部分内容的排版。 如“实训环境”板块中的设备图片，手机设备下一行只显示一张图片，平板设备下一行显示两张，电脑设备下一行显示3张。由于排版方式有所变化，部分内容的html标签代码需要进行一下修改。grid.css文件中的设置也可根据实际情况作一定的修改。 在电脑设备下为了避免整个页面显示宽度过大，所有模块在页面左右两侧各保留10%的间距。其余细节部分的排版可根据需求进行调整，完整的页面效果请看教材提供的截图。04任务实施 操作步骤（详细步骤和代码见课本） 1、网页中“关于我们”模块修改为栅格布局 2、使用删格系统将“本科专业介绍”、“实训环境”、“优秀本科毕业生”、“联系我们”的子模块在手机设备下垂直排列，在平板和电脑设备下一行排列2或3个 3、使用删格系统将页脚内容在平板和电脑设备下，将变为放置在左右两侧。 4、在电脑设备下页面主体采用100%宽度布局，页面可能会过宽，不便于观看，所有主体模块调整为在页面左右两侧各保留10%的填充间距。 5、调整细节：部分栅格布局的子模块由于文字数量的不相等，会在特定页面宽度下造成子模块高度不一致，导致排版错位。05任务回顾学习 1、栅格布局的留白区域设置 2、栅格模块的隐藏功能设置完成 1、页面的响应式设置 2、完善了页面效果的部分细节06任务拓展 使用栅格化布局和栅格化的留白、隐藏，制作下图效果的响应式页面头部。感谢聆听！THANK YOU!HTML5+CSS3网页布局学校名称：指导老师：联系电话：