版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
跨平台的移动Web开发实战
（HTML5+CSS3）跨平台的移动Web开发实战
（HTML5+CSS3）单元1跨平台的网站首页设计 HTML5的语义化标签及属性，可以让开发者非常方便地实现清晰的Web页面布局，加上CSS3的效果渲染，使快速建立丰富灵活的Web页面变得相对简单一些。单元1跨平台的网站首页设计 HTML5的语义化标签
本单元通过对网站首页设计的探析与训练，重点熟悉HTML5网页的基本结构及组成元素、HTML5的语义和结构标签、<!DOCTYPE>声明等，学会CSS样式的定义与样式表的插入，掌握网站首页的设计方法。 本单元通过对网站首页设计的探析与训练，重点熟悉教学导航教学导航实例探析【任务1-1】探析携程旅行网的首页【效果展示】
携程旅行网首页0101.html的浏览效果如图1-1所示。实例探析【任务1-1】探析携程旅行网的首页图1-1携程旅行网首页0101.html的浏览效果图1-1携程旅行网首页0101.html的浏览效果
携程旅行网首页0101.html的主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部内容为多个图片超链接，底部包括多个导航链接，侧边栏为长形按钮。 携程旅行网首页0101.html的主体结构包括4个组【网页探析】1．网页0101.html的HTML代码探析2．网页0101.html的CSS代码探析【网页探析】知识梳理1．HTML5印象 HTML5是万维网的核心语言，是标准
通用置标语言下的一个应用超文本标记语言
（HTML）的第五次重大修改，HTML5草案
的前身名为WebApplications1.0，于2004年被WHATWG（WebHypertextApplicationTechnologyWorkingGroup）提出，于2007
年被万维网联盟（W3C）接纳，并成立了新的HTML工作团队。知识梳理1．HTML5印象2．CSS3印象 CSS即层叠样式表（CascadingStyleSheet）。
在网页制作时采用层叠样式表技术，可以有
效地对页面的布局、字体、颜色、背景和其他效
果实现更加精确的控制。2．CSS3印象 CSS即层叠样式表（Cascadin
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。 CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。 只要对相应的代码做一些简单的修改，就可以改变同一页面
以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。
这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。 以前的规范作为一个模块实在是太庞大而且比较复杂，所以3．HTML5的主要特性（1）语义特性（Class：Semantic）（2）本地存储特性（Class：Offline&Storagf）（3）设备兼容特性（Class：DeviceAccess）（4）连接特性（Class：Connectivity）3．HTML5的主要特性（1）语义特性（Class：Sema（5）网页多媒体特性（Class：Multimedia）（6）三维、图形及特效特性（Class：3D,Graphics&Effects）（7）性能与集成特性（Class：Performance&Integration）（8）CSS3特性（Class：CSS3）（5）网页多媒体特性（Class：Multimedia）4．HTML5的主要变化 HTML5提供了一些新的元素和属性，如<nav>（网站导航块）和<footer>。
这种标签将有利于搜索引擎的索引整理，同时更好地帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功
能，如<audio>和<video>标记。4．HTML5的主要变化 HTML5提供了一些新的元素（1）取消了一些过时的HTML4标记。（2）将内容和展示分离。（3）一些全新的表单输入对象。（4）全新的、更合理的Tag。（1）取消了一些过时的HTML4标记。（5）本地数据库。（6）Canvas对象。（7）浏览器中的真正程序。（8）HTML5取代Flash在移动设备的地位。（9）HTML5突出的特点就是强化了Web页的表现性，增加了本地数据库。（5）本地数据库。5．HTML5的发展趋势 HTML5规范开发完成时，将成为主流。
据统计，2013年全球约有10亿手机浏览器支持HTML5，同时HTMLWeb开发者数量已达到200多万。毫无疑问，HTML5将成为未来5～10年内，移动互联网领域的主宰者。5．HTML5的发展趋势 HTML5规范开发完成时，将6．HTML5新增的标签和废除的标签 HTML5中，新增加了多个标签元素，同时也废除了多个标签元素。（1）HTML5新增的标签（2）HTML5废除的标签6．HTML5新增的标签和废除的标签 HTML5中表1-9
HTML5新增的标签及其功能说明表1-9HTML5新增的标签及其功能说明续表续表表1-10
HTML5废除的标签表1-10HTML5废除的标签7．HTML5新增和废除的标签属性（1）HTML5新增的属性（2）HTML5废除的属性7．HTML5新增和废除的标签属性（1）HTML5新增的属表1-11
HTML5新增的属性列表表1-11HTML5新增的属性列表续表续表表1-12
HTML5废除的属性列表表1-12HTML5废除的属性列表续表续表8．HTML5语义和结构标签实例代码探析图1-2
example01.html网页的浏览效果8．HTML5语义和结构标签实例代码探析图1-2examp（1）HTML5的文档声明
说明：第一行<!DOCTYPEhtml>是HTML5对文档类型的简化描述，文档类型的作用是验证器依据它来判断该采用何种规则去验证代码；强制浏览器以标准模式渲染页面。（1）HTML5的文档声明 说明：第一行<!DOCTY（2）头部（2）头部（3）尾部（4）导航（5）区块和文章（6）旁白和侧边栏（2）头部9．HTML5中典型的标记方法（1）内容类型（ContentType）（2）DOCTYPE声明（3）指定字符编码（4）具有boolean值的属性（5）引号9．HTML5中典型的标记方法（1）内容类型（Content10．HTML5主要的语义和结构标签说明（1）<header>标签（2）<section>标签（3）<footer>标签（4）<article>标签（5）<aside>标签（6）<hgroup>标签10．HTML5主要的语义和结构标签说明（1）<header11．<!DOCTYPE>声明的用法 <!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。 <!DOCTYPE>声明不是HTML标签，它是指示Web浏览器关于页面应使用哪个HTML版本进行编写的指令。11．<!DOCTYPE>声明的用法 <!DOCTYP12．HTML的注释标签<!--…-->的用法13．如何插入样式表
浏览网页时，当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。
插入样式表的方法有以下3种。12．HTML的注释标签<!--…-->的用法（1）外部样式表（2）内部样式表（3）内联样式（1）外部样式表14．网页中的多重样式15．标记-moz-、-webkit-、-o-和-ms-的解释14．网页中的多重样式引导训练【任务1-2】设计苏宁易购网的首页【任务描述】【任务实施】1．网页0102.html的主体结构设计
在本地硬盘的文件夹“01跨平台的网站首页设计\0102”中创建苏宁易购网的首页0102.html。引导训练【任务1-2】设计苏宁易购网的首页
（1）定义网页0102.html通用CSS代码
（2）定义网页0102.html主体结构的CSS代码
（3）编写网页0102.html主体结构的HTML代码（1）定义网页0102.html通用CSS代码2．网页0102.html的局部内容设计（1）网页0102.html的顶部内容设计（2）网页0102.html的中部内容设计（3）网页0102.html的底部内容设计2．网页0102.html的局部内容设计（1）网页0102.【网页浏览】
保存网页0102.html，在浏览器GoogleChrome中的浏览效果如图1-3所示。【任务1-3】设计穷游网的首页【任务描述】【网页浏览】图1-4穷游网首页0103.html的浏览效果图1-4穷游网首页0103.html的浏览效果
穷游网首页0103.html主体结构为左、右结构，左侧为首页的导航栏，右侧为首页的主体内容，如图1-4所示。
左侧结构使用<aside>标签和<section>标签嵌套实现，右侧结构使用<section>标签实现。 穷游网首页0103.html主体结构为左、右结构，左
网页右侧的主体内容部分又分为上、中、下3个组成部分，网页右侧上部使用<header>标签实现，右侧中部使用<section>标签实现，右侧底部使用<footer>标签实现。
网页左侧的导航栏也分为上、中、下3个组成部分，分别使用<section>、<nav>和<section>标签实现。 网页右侧的主体内容部分又分为上、中、下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的侧边栏设计2．网页0103.html的局部内容设计（1）网页0103.同步训练【任务1-4】设计同程旅游网的首页【任务描述】
编写HTML代码和CSS代码，设计图1-5所示同程旅游网的首页0104.html。同步训练【任务1-4】设计同程旅游网的首页图1-5同程旅游网首页0104.html的浏览效果图1-5同程旅游网首页0104.html的浏览效果
同程旅游网首页0104.html的主体结构为上、中、下结构，如图1-5所示。
顶部内容包括返回链接按钮、标题文字和主页链接按钮，中部内容为多个热点链接按钮，底部内容包括多个超链接和版权信息。 同程旅游网首页0104.html的主体结构为上、中、
网页0104.html顶部结构使用<header>标签实现，中部结构使用<article>标签实现，底部结构使用<footer>标签实现。 网页0104.html顶部结构使用<header>标【任务实施】1．网页0104.html的主体结构设计
在本地硬盘的文件夹“01跨平台的网站首页设计\0104”中创建同程旅游网的首页0104.html。【任务实施】
（1）定义网页0104.html通用CSS代码
（2）定义网页0104.html主体结构的CSS代码
（3）编写网页0104.html主体结构的HTML代码（1）定义网页0104.html通用CSS代码2．网页0104.html的局部内容设计
（1）网页0104.html的顶部内容设计
网页0104.html顶部内容的CSS代码定义见本书提供的电子资源。2．网页0104.html的局部内容设计（1）网页0104
在网页0104.html顶部代码“<headerclass="header"id="headerId">”与“</header>”之
间编写HTML代码，实现其功能。 在网页0104.html顶部代码“<headerc
（2）网页0104.html的中部内容设计
网页0104.html中部内容的CSS代码定义见本书提供的电子资源。
在网页0104.html中部代码“<articleclass="content">”和“</article>”之间编写HTML代码，实现其功能。（2）网页0104.html的中部内容设计
（3）网页0104.html的底部内容设计
网页0104.html底部内容的CSS代码定义见
本书提供的电子资源。
在网页0104.html底部代码“<footer>”和“</footer>”之间编写HTML代码，实现其功
能。（3）网页
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 合伙经营合同范本
- 校运动会安全教育
- 财务管理委托代理问题
- 2025研发项目委托合同详细范本
- 外包项目施工合同范本
- 阿法拉伐离心脱水机培训
- 餐具采购合同范本
- 施工合同安全责任书二零二五年
- 学生接送安全协议书
- 国际运输货物保险合同的基本条款
- 金蝶PLM详细介绍
- 矿井维修电工技能鉴定考试题(高级工)
- 湖南文艺出版社小学六年级下册音乐全册教案
- 高中语文《祝福》“谁是凶手”系列之祥林嫂死亡事件《祝福》探究式学习（教学课件） 课件
- 电子商务税收法律问题
- 水平泵房水泵联合试运转方案及安全技术措施
- 中国十大阶层的划分课件
- 中考数学分式与分式方程计算题(附答案)
- 了凡四训-徐韵发（课堂PPT）
- 中国政法大学社会主义市场经济概论重点归纳及复习试题(杨干忠版)
- 蹲踞式起跑 教案
评论
0/150
提交评论