《响应式网页开发实战》教学教案—第3章--HTML5新增页面元素和属性.docx

《《响应式网页开发实战》教学教案—第3章--HTML5新增页面元素和属性.docx》由会员分享，可在线阅读，更多相关《《响应式网页开发实战》教学教案—第3章--HTML5新增页面元素和属性.docx（64页珍藏版）》请在第一文库网上搜索。

1、3.1旅游网页界面设计【教学导航】教学目标(1)掌握HTML5的结构元素使用方法。(2)掌握分组元素的使用方法。(3)掌握HTML5移动端布局的方法。(4)区别单位em和rem使用方法。重难点(1)HTML5的结构元素使用方法(2)分组元素的使用方法(3) HTML5移动端布局的方法教学方法任务驱动法、分组讨论法、理论实践一体化、讲练结合课时建议4课时【教学任务】3.1.1任务描述利用HTML5结构元素制作如图3.1所示的H5旅游网页:旅行的意义发现美感受美说走就走美好的事物总是让人懂性，就像诗和远方的田野，久是，它们更像空中楼封，听者让人热血沸鹿，却不能拿来当坂吃。在大多数时候，生活就是眼的

2、的苟且，就是一地呜毛；对于大多数人来说，只有亘正经历过苟且的生活，才能体会诗和远方直正的价值。我很向往一种生活，挎着背包周游世界。无关风聂 无关风月只在乎自己，在乎自己的心情。如果旅途中会遇到斜风细雨，我会置身雨中把自己交给天地。如果这雨是天的笑容，我喜肱 如果这雨是天的眼泪，我国游轻葆海步Us寻找在熟悉的城市，熟悉的街道上，着熟悉的风聂 身旁依然有着熟悉的人，这一安，是静诺，是幸得 平凡才是真正的快乐，但为什么我还会有一种怅若失的情绪。一个人，背着只凰于自己的旅行包,看陌生的繁华.陌生的风昙。会不会每个人都怀揣着这样一个梦，有一天，背上行耍,去旅行，去看尽世间的美聂。在这个快节奏的时代里，有

3、一天你会完得疲餐，有一天你也会感到想要放松，有一天突然不想工作了，给自己放一次长假去旅我是在旅行吗？也许是的。没有行囊，没有目的，我孤独的走在踏上，看不见我将要去的地方，i环得我冬去过的地凡 我就想是一只草原中被牧全送忘的羊，只能昏昏沉沉地沿若吉草和泥土的气息前进。作者：- i&iir： 守 联系方式:&图3.1 H5旅游网页效果图在Chrome浏览器中预览，得到了图3.1的显示效果。同时，分别用Chrome模拟器GalaxyS5和iPad,得到了自适应的网页显示效果，如图3.2和图3.3所示。说走就走芟好的，疫后怨过人018.就靠话和远方的用?.只鸵.它们更鼻空欣嘤词 il人热口弟BL却不废

4、球充当也万不大多数？1*.生比m由的苛H.我是一电力毛 MTX9Bt安正，三石H正一历过的U的生活.方榜停会话和，鱼正的T1fl.re.戋.汪东同栏一 2生忑 拘与且揽泊世穴,无关风，,无关风只E自己.在乎自己如*旅途中会15期见雄我会心用中纪目已幺吟天比如X这牛姓大的父菩 S斯运南姥夫的第追.我芯花在熟的城市 融会的街SLL 黑的风为分微剜席sseflBA.2一雷.ft9.髭字/凡才&urttJ.但为什么我还会与一行怅然若失的中一个人?只发于自己的游行自 r生的繁生的风景.会不会田个人打评犬这”一个多.W一天,0上行 康行.去用年图&美在这个快右奏的比代里,巨一大句会免密欣,巨一大好也会序到

5、也要放松.芍一天央抬不也了”了党自己或一次次锻妥旅行我是后跳行W?电仔是的.发w行,没有目的.施巩驻的sre. 不见我捋安士的药力,已不榭我已tf去过为地力共墓总是一只取岩中场收量及芯的岸.只能53沆玩IB沿01无土的7JSSj赳磅 七 gwa二型乱&0,&，图3.2任务描述中的网页在GalaxyS5模拟器中显示效果图 1C2475% Online 识At瓶Atg2妙发音5S美好的事也总是让人慎与，苑:怎诗和远方的王野，只是，它们更像至中篌阁，听若让人热血溃姿,却不能拿来当城吃。在大安教时候，生活就是速前工苟且.蒙是一JG鸡毛；花于大多数人来说.只有真正经历过苟且的生活,才短体会诗和远方真正的

6、价值；我很向往一种生活，挎者背包志游兰界。无关风景.无关风月.只在乎目T; .在乎史己的心情，如臭旅途中会遢氢料风细雨，我会建臭王中把弓己交给天地.如果这雨是天的笑容，我喜饶.如里这雨是天的眼泪，我悲伤.在熟W的城市,默密的街道上.香熟超的风景 身旁依然有若惠，慈的人.这一姜 是静法是幸福。平凡才是真工的快乐,但为什么我还会有一和怅然若矢的情壁，一个人.肯若只属于更的旅行包,百君生的整华，语生的风晟会不会每个人都捻着这样一个梦，有一天，背上行囊.去旅行.玉香尽世司的美景，在这个快书案的时代里，有一天你会先得夜家,有一天你也会差到想.要放松,有一天突然不想工作了，给吕己放一次长假去旅行.我是在旅

7、行屿？也许是约，没有E案 没有巨的，我孤独的走在聘上，叁不见我将要去的她方，记不得我三经去过的地方：我就是一只耳就不根或至这志的羊，只能君昏沉沉地沿著百茸和泥土的气息前迸。三登 e木妾；&MSSSS名图3.3任务描述中的网页在iPad模拟器中显示效果图3.1.2任务知识3.1.2.1 结构元素(1) header：从语义化上看为文档的页眉，header用法如下: 一种具有引导和导航作用的结构元素。 通常放置在整个页面或者页面内的一个内容区块的标题。 一个网页内并没有限制header标签的个数。vhl我是大头vhlvhl我是脖子vhl我是身体vp(2) nav：从语义化上看为导航，nav用法如下

8、：通常作为页面导航的链接组侧边栏导航vlivahref=#”菜单 laxlivlivahref=#”菜单 2vlixahred#菜单 3(3) article：从语义化上看为文档、页面，article用法如下: 通常是一篇文章、一个页面、一个独立完整的内容模块。 一般会带个标题，并放在header标签中。 article元素可以互相嵌套。卜1是我标签vp我是段落vp我的内容vdiv(4) aside：从语义化上看为在旁边、侧边，aside用法如下：在article标签中使用时;作为主要内容的附属信息部分，如有关的参考资料、名词解释等。在article标签外使用时，作为页面或者站点全局的附属信息

9、部分,如侧边栏、博客的友情链接部分、广告区域等。vhl马云是谁vhlvp马云，男，1964年10月15日出生于浙江省杭州市，中国著名企业家，阿里巴巴集团、淘宝网、支付宝创始人vhl参考资料vhlvp百度网、维基百科Vp(5) section：从语义化上看为部分，section用法如下: 用于页面内容的独立分块，往往是文章的一段。 通常由内容和标题组成，没有标题的内容不推荐使用section。注：一个容器需要被定义样式或者脚本定义行为时，推荐用div而非section,不要将section用作设置样式的容器。vhl 水果 vh2 苹果 vh2vdiv苹果是撒？ vh2 桔子 vh2桔子是撒？ v

10、divvhl中国人物vhlvp三国、两晋、南北朝vpBVp猛将猛将猛将猛将Vpvh2 两晋 vh3Vp猛将猛将猛将猛将vp(6) footer：从语义化上看为文档的脚注，footer用法如下： 一个内容块区的脚注。 通常内容为联系信息、相关阅读、版权信息等。vli关于我们vli版权信息vli注意事项3.1.2.2 分组元素(1) figure：定义媒介内容的分组，以及它们的标题，figure法如下：标签规定独立的流内容(图像、图表、照片、代码等等)。元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。vp我的大学vpVp拍摄者：*(2) figcaption：用法如下：标签定义f

11、igure元素的标题(caption)。 figcaption”元素应该被置于 figure ”元素的第一个或最后一个子元素的位置。vflgcaption 我的大学 vfigcaption(3) hgroup：定义有关文档中的section的信息,hgroup用法如下: 标签用于对网页或区段(section)的标题进行组合。vh2旅行的意义vh3发现美vh3vh3感受美vh3(4)相关css3样式 box-sizing： content-boxborder-boxinherit表3-1列出了 box-sizing的取值含义：表3-1 box-sizing取值及含义表取值解释content-bo

12、x这是由CSS2.1规定的宽度高度行为；宽度和高度分别应用到元素的内容框；在宽度和高度之外绘制元素的内边距和边框。border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。Inherit继承父元素box-sizing属性的值。使用时，注意浏览器兼容，下面是各个浏览器能识别的样式:-webkit-box-sizing: 100pxfbrios-safari,android-moz-box-sizing: 100pxforffbox-sizing: 100px;/fbrother.content-box box-sizing:content-box;-moz-box-sizing:content-box;width: lOOpx;hei