《电子商务网页设计（第二版）》 课件项目十.ppt

1、content电子商务网页赏析商品图片的使用与编辑15目录HTML网页制作基础2电子商务网页编辑软件3网页元素的编辑4表格与DIV的使用HTML5与响应式网页设计610使用CSS控制页面元素7使用Animate制作网页中的动画8 使用JS制作动态效果9设计与制作电子商务网店结构项目11HTML5与响应式网页设计10HTML5网页布局响应式网页设计 Contents目录任务分析1相关知识2任务实施3任务一任务一 HTML5HTML5网页布局网页布局本任务是插入HTML5结构性标记网页布局，header用于网页头部图片的放置，section用于放置网页内容，footer用于放置网页其它备注信息，通

2、过简单的网页制作使同学们掌握HTML5的布局与使用。任务分析11.HTML5HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式。2.HTML5新增标记新增标记在HTML5之前的版本中经常需要给标记命名，例如头部命名是header、导航区域命名是nav等。HTML5主要新增了一些结构性标记、多媒体标记和行级标记三类：(1)结构性标记(2)行级标记(3)多媒体标记相关知识23.HTML5布局与布

3、局与div+css布局的区别布局的区别以前的我们用div+css主要大部分是做PC端网页的基础部分开发，绝大部分业务逻辑和代码量在服务器端，前端只收到服务器端动态生成的HTML和附加的简单的JS/CSS/img，是一种非常不平衡的架构，而HTML5表面上是标签的改动，但实际上应该是改动这些标签后所带来的影响，还有更多的是把业务逻辑和运算量放在了客户端，让HTML在APP的开发上具有了更多的优势，如图10-1所示。相关知识2图10-1 HTML5布局与div+css布局的区别本任务的使用HTML5布局网页，并建立一个简单的汽车介绍网站，如图10-2所示。3 任务实施图10-2案例效果图（1）打开

4、Dreamweaver,单击“站点”“新建站点”，在打开的对话框中输入站点名称为比亚迪汽车，设置站点文件夹为D:webcar，单击“保存”完成站点建立。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规则”就会进入新建规

5、则对话框，如图10-5所示。3 任务实施图10-5 插入Header（4）在新建规则对话框中单击“确定”，再进入规则定义对话框中选择分类是区块，在Text-align中选择“center”,设置header标记中内容居中显示，单击“确定”返回插入对话框再单击“确定”完成插入Header标记，如图10-6所示。3 任务实施图10-6规则定义对话框（5）在设计视图中删除Header中的文字，单击菜单栏的“插入”“Image”，选择站点images文件夹中的car1,jpg，将图片插入到网页中，如图10-7所示。3 任务实施图10-7在Header中插入图片（6）采用同样设置的方法，在网页中插入se

6、ction、footer,并分别在section中插入car2,jpg，在footer中插入foot.jpg，如图10-8所示。3 任务实施图10-8完成HTML5布局网页（7）单击菜单栏“文件”“保存”，保存index.html文件，按F12在浏览器中预览文件，完成操作。（8）联系我们：提供全国客服热线及企业的联系方式。小思考：小思考：找找div布局与HTML5布局的区别？3 任务实施Contents目录任务分析1相关知识2任务实施3任务二任务二 响应式网页设计响应式布局是近几年非常流行的页面布局方式。本任务利用响应式布局方法制作一个简单的网页，使大家能掌握响应式网页的原理。任务分析11.响

7、应式网站设计响应式网站设计响应式网站设计(Responsive Web design)是指：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。2.响应式布局的实现响应式布局的实现响应式布局的实现主要有设置视口viewport和添加媒体查询两种方法。（1）设置视口viewport（2）添加媒体查询3.操作方法操作方法（1）点击CSS设计器面板中媒体前的“+”，如图10-9所示。相关知识2图10-9 CSS设计器面板3.操作方法操作方法（2）在打开的定义媒体查询对话框中单击条件后“+”，添加条件，如图10-10所示。相关知识2图10-10定义媒体查

8、询对话框（1）打开dreamweaver,打开文件面板的index.html文件。（2）选择CSS设计器面板，单击CSS设计器面板中媒体前的“+”，如图10-11所示。3 任务实施图10-11 CSS设计器面板（3）在打开的定义媒体查询对话框中单击条件后“+”添加条件,在出现的下拉列表中选择“max-whidth”，输入数字“800”，单位“px”不变，如图10-12所示。添加屏幕尺寸在800以内的布局。3 任务实施图10-12定义媒体查询对话框（4）在媒体项是新建内容的情况下，单击CSS设计器面板选择器前的“+”，并在文本框中输入新建类的名称“.pic1”,如图10-13所示，在屏幕是800

9、px以内时，为页面header中的图像添加新CSS类。3 任务实施图10-13添加CSS类（5）在属性栏中设置width为600px，height为113px，如图10-14所示，目的是当屏幕变窄时，图像也一起等比例变小。3 任务实施图10-14 属性设置（6）根据上面的方法在新建媒体项的下面再建立section中图片等比例变化类pic2，属性width为600px，height为777px。footer中图片等比例变化类pic3，属性width为600px，height为168px。设置完成后代码如下：media screen and(max-width:800px).pic1 width:

10、600px;height:113px;.pic2 width:600px;height:777px;.pic3 width:600px;height:168px;3 任务实施（7）将CSS类添加到图像上，单击代码视图，在文件中找到图像定义的标记，如header下的图像car1.jpg,在后面添加class=”pic1”。如下所示：（8）同样方法为section、footer的图像添加类，代码如下：3 任务实施（9）Ctrl+s保存文件，按F12在浏览器中预览文件，当IE的窗口变窄到小于800像素的时间，全部图像也会一起变小，以自动适应屏幕大小，如图10-15所示。3 任务实施图10-15 响应式网页通过学习HTML5各标记，动手建立HTML5结构布局网页，并采用响应式网站设计完成简单网页制作，通过这个过程对Dreamweaver2020 软件的学习有了进一步的认识和了解,学会流行制作网页制作方法。经验交流:同学们将学习过程中的疑难问题记录下来,和大家交流一下吧。项目总结项目总结