单元1跨平台的网站首页设计单元1跨平台的网站首页设计本单元通过.doc

单元1　跨平台的网站首页设计 本单元通过对网站首页设计的探析与训练，重点熟悉HTML5网页的基本结构及组成元素、HTML5的语义和结构标签、!DOCTYPE声明等，学会CSS样式的定义与样式表的插入，掌握网站首页的设计方法。 【教学导航】 教学目标 （1）认识HTML5和CSS3，了解HTML5的主要特性、主要变化及其发展趋势 （2）了解HTML5新增的标签和废除的标签，了解HTML5新增的标签和废除的属性 （3）掌握HTML5网页的基本结构及组成元素 （4）掌握HTML5的语义和结构标签及其使用方法 （5）掌握CSS样式的定义与样式表的插入 （6）学会了移动平台网站首页的设计 关 键 字 网站首页　HTML5　语义和结构标签　CSS样式 参考资料 （1）HTML5的新特性简介参考附录A （2）HTML5的常用标签及其属性、方法与事件参考附录B （3）CSS的属性参考附录C （4）CSS的各种选择器的含义和用法参考附录D 教学方法 任务驱动法、分组讨论法、理论实践一体化、探究学习法 课时建议 8课时 【实例探析】 【任务1-1】探析携程旅行网的首页 【效果展示】 携程旅行网首页0101.html的浏览效果如图1-1所示。 图1-1　携程旅行网首页0101.html的浏览效果 携程旅行网首页0101.html的主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部内容为多个图片超链接，底部包括多个导航链接，侧边栏为长形按钮。 【网页探析】 1．网页0101.html的HTML代码探析 携程旅行网首页0101.html的HTML代码如表1-1所示。 网页0101.html主体结构的HTML代码如表1-2所示，该网页主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，其中项部结构使用header标签实现的，中部结构使用nav标签实现的，底部结构使用footer标签实现，侧边栏使用aside标签实现。 2．网页0101.html的CSS代码探析 网页0101.html通用CSS代码定义如表1-3所示。 网页0101.html主体结构的CSS代码如表1-4所示。 网页0101.html顶部内容的CSS代码定义如表1-5所示。 网页0101.html中部内容的CSS代码定义如表1-6所示。 网页0101.html底部内容的CSS代码定义如表1-7所示。 网页0101.html侧边栏的CSS代码定义如表1-8所示。 【知识疏理】 1．HTML5印象 HTML5是万维网的核心语言，是标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。 HTML 5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。 2．CSS3印象 CSS即层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。CSS3将完全向后兼容，网络浏览器也还将继续支持CSS2。 3．HTML5的主要特性 （1）语义特性（Class：Semantic） （2）本地存储特性（Class：OFFLINE STORAGE） （3）设备兼容特性 (Class：DEVICE ACCESS) （4）连接特性（Class：CONNECTIVITY） （5）网页多媒体特性(Class：MULTIMEDIA) （6）三维、图形及特效特性（Class： 3D, Graphics Effects） （7）性能与集成特性（Class：Performance Integration） （8）CSS3特性(Class：CSS3) 4．HTML5的主要变化 （1）取消了一些过时的HTML4标记 （2）将内容和展示分离 （3）一些全新的表单输入对象 （4）全新的、更合理的Tag （5）本地数据库 （6）Canvas对象 （7）浏览器中的真正程序 （8）HTML5取代Flash在移动设备的地位。 （9）HTML5突出的特点就是强化了Web页页的表现性，增加了本地数据库。 4．HTML5的发展趋势 从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。从用户可读性上说，原先一大堆东西，像初学者第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。 从如今层出不穷的移动应用就知道，在这个智能手机和平板电脑大爆炸的时代，移动优先