跨平台的移动Web开发实战单元1跨平台的网站课件.ppt
跨平台的移动Web开发实战（HTML5+CSS3）,单元1 跨平台的网站首页设计,HTML5的语义化标签及属性，可以让开发者非常方便地实现清晰的Web页面布局，加上CSS3的效果渲染，使快速建立丰富灵活的Web页面变得相对简单一些。,本单元通过对网站首页设计的探析与训练，重点熟悉HTML5网页的基本结构及组成元素、HTML5的语义和结构标签、声明等，学会CSS样式的定义与样式表的插入，掌握网站首页的设计方法。,教学导航,实例探析,【任务1-1】探析携程旅行网的首页【效果展示】携程旅行网首页0101.html的浏览效果如图1-1所示。,图1-1携程旅行网首页0101.html的浏览效果,携程旅行网首页0101.html的主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部内容为多个图片超链接，底部包括多个导航链接，侧边栏为长形按钮。,【网页探析】1网页0101.html的HTML代码探析2网页0101.html的CSS代码探析,知识梳理,1HTML5印象 HTML5是万维网的核心语言，是标准通用置标语言下的一个应用超文本标记语言（HTML）的第五次重大修改，HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG（Web Hypertext Application Technology Working Group）提出，于2007年被万维网联盟（W3C）接纳，并成立了新的HTML工作团队。,2CSS3印象,CSS即层叠样式表（Cascading Style Sheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。,只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。,以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。,3HTML5的主要特性,（1）语义特性（Class：Semantic）（2）本地存储特性（Class：Offline&Storagf）（3）设备兼容特性（Class：Device Access）（4）连接特性（Class：Connectivity）,（5）网页多媒体特性（Class：Multimedia）（6）三维、图形及特效特性（Class：3D,Graphics&Effects）（7）性能与集成特性（Class：Performance&Integration）（8）CSS3特性（Class：CSS3）,4HTML5的主要变化,HTML5提供了一些新的元素和属性，如（网站导航块）和。这种标签将有利于搜索引擎的索引整理，同时更好地帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如和标记。,（1）取消了一些过时的HTML4标记。（2）将内容和展示分离。（3）一些全新的表单输入对象。（4）全新的、更合理的Tag。,（5）本地数据库。（6）Canvas对象。（7）浏览器中的真正程序。（8）HTML5取代Flash在移动设备的地位。（9）HTML5突出的特点就是强化了Web页的表现性，增加了本地数据库。,5HTML5的发展趋势,HTML5规范开发完成时，将成为主流。据统计，2013年全球约有10亿手机浏览器支持HTML5，同时HTML Web开发者数量已达到200多万。毫无疑问，HTML5将成为未来510年内，移动互联网领域的主宰者。,6HTML5新增的标签和废除的标签,HTML5中，新增加了多个标签元素，同时也废除了多个标签元素。（1）HTML5新增的标签（2）HTML5废除的标签,表1-9HTML5新增的标签及其功能说明,续表,表1-10HTML5 废除的标签,7HTML5新增和废除的标签属性,（1）HTML5新增的属性（2）HTML5废除的属性,表1-11HTML5新增的属性列表,续表,表1-12HTML5废除的属性列表,续表,8HTML5语义和结构标签实例代码探析,图1-2example01.html网页的浏览效果,（1）HTML5的文档声明,说明：第一行是HTML5对文档类型的简化描述，文档类型的作用是验证器依据它来判断该采用何种规则去验证代码；强制浏览器以标准模式渲染页面。,（2）头部（2）头部（3）尾部（4）导航（5）区块和文章（6）旁白和侧边栏,9HTML5中典型的标记方法,（1）内容类型（ContentType）（2）DOCTYPE声明（3）指定字符编码（4）具有boolean值的属性（5）引号,10HTML5主要的语义和结构标签说明,（1）标签（2）标签（3）标签（4）标签（5）标签（6）标签,11声明的用法,声明必须是HTML文档的第一行，位于 标签之前。声明不是HTML标签，它是指示Web浏览器关于页面应使用哪个HTML版本进行编写的指令。,12HTML的注释标签的用法13如何插入样式表 浏览网页时，当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有以下3种。,（1）外部样式表（2）内部样式表（3）内联样式,14网页中的多重样式15标记-moz-、-webkit-、-o-和-ms-的解释,引导训练,【任务1-2】设计苏宁易购网的首页【任务描述】【任务实施】1网页0102.html的主体结构设计 在本地硬盘的文件夹“01跨平台的网站首页设计0102”中创建苏宁易购网的首页0102.html。,（1）定义网页0102.html通用CSS代码（2）定义网页0102.html主体结构的CSS代码（3）编写网页0102.html主体结构的HTML代码,2网页0102.html的局部内容设计,（1）网页0102.html的顶部内容设计（2）网页0102.html的中部内容设计（3）网页0102.html的底部内容设计,【网页浏览】保存网页0102.html，在浏览器Google Chrome中的浏览效果如图1-3所示。【任务1-3】设计穷游网的首页【任务描述】,图1-4穷游网首页0103.html的浏览效果,穷游网首页0103.html主体结构为左、右结构，左侧为首页的导航栏，右侧为首页的主体内容，如图1-4所示。左侧结构使用标签和标签嵌套实现，右侧结构使用标签实现。,网页右侧的主体内容部分又分为上、中、下3个组成部分，网页右侧上部使用标签实现，右侧中部使用标签实现，右侧底部使用标签实现。网页左侧的导航栏也分为上、中、下3个组成部分，分别使用、和标签实现。,【任务实施】1网页0103.html的主体结构设计（1）定义网页0103.html通用CSS代码（2）定义网页0103.html主体结构的CSS代码（3）编写网页0103.html主体结构的HTML代码,2网页0103.html的局部内容设计,（1）网页0103.html的主体顶部内容设计（2）网页0103.html的主体中部内容设计（3）网页0103.html的主体底部内容设计（4）网页0103.html的侧边栏设计,同步训练,【任务1-4】设计同程旅游网的首页【任务描述】编写HTML代码和CSS代码，设计图1-5所示同程旅游网的首页0104.html。,图1-5同程旅游网首页0104.html的浏览效果,同程旅游网首页0104.html的主体结构为上、中、下结构，如图1-5所示。顶部内容包括返回链接按钮、标题文字和主页链接按钮，中部内容为多个热点链接按钮，底部内容包括多个超链接和版权信息。,网页0104.html顶部结构使用标签实现，中部结构使用标签实现，底部结构使用标签实现。,【任务实施】1网页0104.html的主体结构设计 在本地硬盘的文件夹“01跨平台的网站首页设计0104”中创建同程旅游网的首页0104.html。,（1）定义网页0104.html通用CSS代码（2）定义网页0104.html主体结构的CSS代码（3）编写网页0104.html主体结构的HTML代码,2网页0104.html的局部内容设计,（1）网页0104.html的顶部内容设计 网页0104.html顶部内容的CSS代码定义见本书提供的电子资源。,在网页0104.html顶部代码“”与“”之间编写HTML代码，实现其功能。,（2）网页0104.html的中部内容设计 网页0104.html中部内容的CSS代码定义见本书提供的电子资源。在网页0104.html中部代码“”和“”之间编写HTML代码，实现其功能。,（3）网页0104.html的底部内容设计 网页0104.html底部内容的CSS代码定义见本书提供的电子资源。在网页0104.html底部代码“”和“”之间编写HTML代码，实现其功能。,拓展训练,【任务1-5】设计酷狗音乐网的首页【任务描述】编写HTML代码和CSS代码，设计图1-6所示酷狗音乐网的首页0105.html。,图1-6酷狗音乐网首页0105.html的浏览效果,酷狗音乐网的首页0105.html从上至下由4个部分组成，依次为Logo图片和下载链接按钮、返回链接按钮和标题文字、用于导航的主体内容、用于播放音乐的按钮和进度条，如图1-6所示。,【任务实施】（1）网页0105.html的HTML代码编写提示（2）网页0105.html的CSS代码定义提示,单元小结,本单元通过对网站首页设计的探析与三步训练，对HTML5和CSS3有了初步印象，对HTML5的主要特性、主要变化及其发展趋势有了初步了解，对HTML5新增的标签和废除的标签、HTML5新增和废除的标签属性有了初步认识。,也逐步掌握了HTML5网页的基本结构及组成元素、HTML5的语义和结构标签及其使用方法，掌握了CSS样式的定义与样式表的插入，学会了移动平台网站首页的设计方法。,
