电子商务网页设计（第二版）课件：HTML5与响应式网页设计.ppt

（3）在打开的定义媒体查询对话框中单击条件后“+”添加条件,在出现的下拉列表中选择“max-whidth”，输入数字“800”，单位“px”不变，如图10-12所示。添加屏幕尺寸在800以内的布局。3任务实施图10-12定义媒体查询对话框此处添加您的标题Biscuitoatcakecarrotcakemuffinjelly1此处添加您的标题Biscuitoatcakecarrotcakemuffinjelly2此处添加您的标题Biscuitoatcakecarrotcakemuffinjelly3此处添加您的标题Biscuitoatcakecarrotcakemuffinjelly4ADDYOURTITLEHEREClickheretomodifythetext,youmayposttexthere.ClickheretomodifythetextClickPPT模板下载：/moban/行业PPT模板：/hangye/节日PPT模板：/jieri/PPT素材下载：/sucai/PPT背景图片：/beijing/PPT图表下载：/tubiao/优秀PPT下载：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/资料下载：/ziliao/PPT课件下载：/kejian/范文下载：/fanwen/试卷下载：/shiti/教案下载：/jiaoan/字体下载：/ziti/电子商务网页设计HTML5与响应式网页设计HTML5网页布局响应式网页设计 Contents目录任务分析1相关知识2任务实施3任务一HTML5网页布局本任务是插入HTML5结构性标记网页布局，header用于网页头部图片的放置，section用于放置网页内容，footer用于放置网页其它备注信息，通过简单的网页制作使同学们掌握HTML5的布局与使用。任务分析11.HTML5HTML5是HyperTextMarkupLanguage5的缩写，HTML5技术结合了HTML4.01的相关标准并革新，符合现代网络发展要求，在2008年正式发布。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式。2.HTML5新增标记在HTML5之前的版本中经常需要给标记命名，例如头部命名是header、导航区域命名是nav等。HTML5主要新增了一些结构性标记、多媒体标记和行级标记三类：结构性标记行级标记多媒体标记相关知识23.HTML5布局与div+css布局的区别以前的我们用div+css主要大部分是做PC端网页的基础部分开发，绝大部分业务逻辑和代码量在服务器端，前端只收到服务器端动态生成的HTML和附加的简单的JS/CSS/img，是一种非常不平衡的架构，而HTML5表面上是标签的改动，但实际上应该是改动这些标签后所带来的影响，还有更多的是把业务逻辑和运算量放在了客户端，让HTML在APP的开发上具有了更多的优势，如图10-1所示。相关知识2图10-1HTML5布局与div+css布局的区别本任务的使用HTML5布局网页，并建立一个简单的汽车介绍网站，如图10-2所示。3任务实施图10-2案例效果图（1）打开Dreamweaver,单击“站点”→“新建站点”，在打开的对话框中输入站点名称为比亚迪汽车，设置站点文件夹为D:\web\car，单击“保存”完成站点建立。3任务实施图10-3新建站点（2）在站点文件面板中右键新建一个文件夹名为images,新一个主页文件index.html，并将本例的图像car1.jpg、car2,jpg、foot.jpg放到images文件夹中，如图10-4所示。3任务实施图10-4站点文件（3）在站点文件面板中打开index.html，单击菜单栏的“插入”→“Header”,就会看到和插入div一样的对话框，在Class中输入head，单击“新建CSS规则”就会进入新建规则对话框，如图10-5所示。3任务实施图10-5插入Header（4）在新建规则对话框中单击“确定”，再进入规则定义对话框中选择分类是区块，在Text-align中选择“center”,设置header标记中内