《电子商务网页设计与制作》 课件 项目10、11 html5 新增结构元素和属性、html5 新增标签的使用

10html5新增结构元素和属性602任务1制作订单支付网页地址区任务2制作订单支付网页603制作订单支付网页地址区任务1604●掌握html5新增结构元素的用法。605为了使文档的结构更加清晰、明确，html5新增加了一些可以改善文档结构的元素，如header、footer、article、aside、section等。这些结构元素能够让网页设计者更加语义化地创建文档。而在之前的html4中，设计者要实现这些语义化的功能，需要使用div标签的额外属性，且由于设计者编码习惯不同，很难做到统一。本任务主要使用section元素实现网页语义化，并用nav标签设置导航栏来制作缤购乐食电子商务网站订单支付网页地址。网页效果如图所示。606607订单支付网页地址区效果图608步骤一：在body标签中插入一个大的section模块，里面包含两个小section模块，第二个section模块包含一个ul无序列表。网页的导航列表主要用ul无序列表来布局，为了更加语义化地表达网页内容，在ul外层包裹一组nav标签。在导航列表下方使用div标签和span标签的嵌套来完成“收货地址”区域的布局。具体html代码如图所示。609支付网页导航列表结构布局610支付网页导航列表结构布局611支付网页导航列表结构布局612支付网页导航列表结构布局613支付网页导航列表结构布局614支付网页导航列表结构布局615支付网页导航列表结构布局616步骤二：设置相应的CSS样式代码。这里要注意，“默认地址”标志设置了半透明的效果，这是使用“opacity:0.7”来实现的，此处的值只能取0～1之间，值越小，透明度越高。用CSS设置支付网页导航列表样式的代码如图所示。用CSS设置支付网页导航列表样式代码617用CSS设置支付网页导航列表样式代码618用CSS设置支付网页导航列表样式代码619用CSS设置支付网页导航列表样式代码620用CSS设置支付网页导航列表样式代码621用CSS设置支付网页导航列表样式代码622用CSS设置支付网页导航列表样式代码623用CSS设置支付网页导航列表样式代码624用CSS设置支付网页导航列表样式代码625运行代码，效果如图所示。制作完订单支付网页地址区导航列表的网页效果626步骤三：制作物流选择区和支付方式选择区。物流品牌的图片用到了雪碧图技术，雪碧图技术就是将很多图标都放在一张大图上，然后通过控制background-position来显示大图中的某个小图。具体html代码如图所示。物流选择区和支付方式选择区结构布局627物流选择区和支付方式选择区结构布局628物流选择区和支付方式选择区结构布局629用CSS设置物流选择区和支付方式选择区样式的代码，如图所示。用CSS设置物流选择区和支付方式选择区样式的代码630用CSS设置物流选择区和支付方式选择区样式的代码631用CSS设置物流选择区和支付方式选择区样式的代码632一、section元素section元素是区块元素，用于对网页中的内容分块，它往往是文章中的一段，通常由标题和内容组成。633section元素强调分段和分块，而article元素则强调独立性。没有标题的内容不推荐使用section元素，可以使用html轮廓工具检查网页中是否存在没有标题的section元素。html5轮廓工具网址为“/outliner”。section元素演示代码如图所示。其中h1标签包含的是标题部分，p标签包含的是内容部分。section元素演示代码634二、nav标签nav标签用来定义网页导航列表的部分。nav标签的使用场合主要有传统导航条、侧边栏导航、页内导航、翻页操作。nav标签只起语义化的作用，没有实际的显示效果。需要注意的是，不要用menu标签代替nav标签，nav标签包含帮助用户浏览网页的链接，menu标签则包含一组菜单命令，帮助用户执行某些任务。nav标签演示代码如图所示。635nav标签演示代码制作订单支付网页任务2

636●掌握html5表单新属性的特征。637html表单一直都是web的核心技术之一，依靠它可以完成web上各种应用的输入界面，从而使客户端和服务器进行方便快捷的交互。html5表单新增了许多属性，方便设计者应对更加多样的场景，而不用借助其他前端脚本语言。在缤购乐食电子商务网站订单支付网页上，需要通过html表单做出供用户选择的收货地址、快递公司、支付方式等，并通过html表单将信息传输到服务器完成下单操作。本任务通过之前学习的html表单相关知识以及html5表单控件的新属性来完成订单支付网页，网页效果如图所示。638639订单支付网页效果640步骤一：首先制作订单表格标题，图所示为订单表格标题的html代码。订单表格标题的html代码641接着设置CSS代码，如图所示。订单表格标题CSS样式代码642订单表格标题CSS样式代码643步骤二：制作订单商品信息列表部分。每一行的布局是由一个单独的ul无序列表来完成的，每一行要显示的图文信息分别放在li列表项中，所有的li列表项都设置为左浮动，并排列成一行。具体html代码如图所示。订单商品信息列表布局644订单商品信息列表布局645订单商品信息列表布局646订单商品信息列表布局647订单商品信息列表布局648订单商品信息列表布局649接着设置CSS代码，宽度和高度的属性值不仅可以使用具体的像素值，也可以设置百分比，当需要按比例去分配高度和宽度的时候，建议使用百分比；当宽度和高度为具体确定的值时，建议使用像素值。用CSS设置订单商品信息列表样式的代码如图所示。用CSS设置订单商品信息列表样式的代码650用CSS设置订单商品信息列表样式的代码651用CSS设置订单商品信息列表样式的代码652运行代码，效果如图所示。订单商品信息列表效果653步骤三：制作买家留言和商品优惠信息部分，买家留言部分用文本输入框实现，商品优惠信息部分用select下拉列表控件实现。具体html代码如图所示。买家留言和商品优惠信息部分结构布局654买家留言和商品优惠信息部分结构布局655买家留言和商品优惠信息部分结构布局656用CSS设置买家留言和商品优惠信息部分样式的代码，如图所示。用CSS设置买家留言和商品优惠信息部分样式的代码657用CSS设置买家留言和商品优惠信息部分样式的代码658步骤四：制作支付信息及提交订单部分。支付信息由大div盒子中嵌套小div盒子及span标签来实现，“提交订单”按钮使用超链接a标签来实现其样式，此按钮也可以使用“表单提交”按钮来实现，读者可自行尝试。具体html代码如图所示。支付信息及提交订单部分结构布局659支付信息及提交订单部分结构布局660支付信息及提交订单部分结构布局661接着设置CSS代码，这里需要注意outline属性和border属性的区别：border指网页元素的边框，outline指网页元素边框的边缘，设置无边框使用“border:none”，设置无轮廓使用“outline:0”。具体代码如图所示。用CSS设置支付信息及提交订单部分的代码662用CSS设置支付信息及提交订单部分的代码663用CSS设置支付信息及提交订单部分的代码664一、required/pattern属性required属性规定必须在提交之前填写输入域，即输入域不能为空。required属性适用于以下类型的input标签：text、search、url、telephone、email、password、datepickers、number、checkbox、radio和file。格式如下。665pattern属性规定用于验证input域的模式，pattern类型为正则验证，它可以完成各种复杂的验证。pattern属性适用于以下类型的input标签：text、search、url、telephone、email和password。格式如下。666二、autofocus属性autofocus属性规定在页面加载时，域自动获得焦点，可在页面加载完成时聚焦到指定的表单控件上，类似于Javascript的focus（）方法。autofocus属性适用于所有类型的input表单控件。格式如下。三、outline属性outline属性用于在元素周围绘制一条线，该线位于边框边缘的外围，可起到突出元素的作用。11html5新增标签的使用667任务1制作支付成功网页任务2制作查看订单网页668制作支付成功网页任务1669●掌握html5新增bdi标签的用法。670本任务将通过使用CSS设置支付成功图文信息的样式，利用html5新增bdi标签共同完成支付成功网页，网页效果如图所示。671支付成功网页效果672步骤：制作支付成功网页。使用div盒子进行嵌套布局，在制作收件人信息部分使用了bdi标签，用于隔离父元素样式对子元素样式的影响。具体html代码如图所示。673支付成功网页结构布局674接着设置CSS代码。这里需要注意，用background设置背景图像时，scroll表示窗口内容滚动时图片也会跟着滚动，即图片与其他内容相对静止，一般此处默认值为scroll。如果想让图片不随窗口的滚动而跟着变化，此处需设置为fixed。图所示为用CSS设置支付成功网页样式的代码。用CSS设置支付成功网页样式的代码675用CSS设置支付成功网页样式的代码676用CSS设置支付成功网页样式的代码677bdi标签是html5中的新标签。bdi标签指的是bidi隔离。bdi标签允许设计者设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他无法完全控制的内容时，建议使用该标签。bdi标签的常用属性及描述见表。bdi标签的属性及描述制作查看订单网页任务2

678●掌握html5新增header标签、footer标签的用法。679html5吸取了xhtml2的一些优点，为了使文档的结构更加清晰、明确，html5又新增了一些改善文档结构的元素，如header、footer、article、aside、section等，从而使网页开发人员能够更加语义化地创建文档。而在之前的html4中，开发者都将div标签作为网页的主要容器。本任务使用header、footer语义化标签和其他传统标签共同制作了查看订单网页，效果如图所示。680681查看订单网页效果682步骤一：先制作左侧主菜单部分，它主要通过一个ul无序列表嵌套四个子ul无序列表来实现布局。具体html代码如图所示。左侧主菜单部分结构布局683左侧主菜单部分结构布局684左侧主菜单部分结构布局685接着设置CSS代码，这里应注意，当设置color颜色的值是用十六进制来表示时，如果每两位的值相同，则可缩写一半，例如，“color：#FF6699”可简写为“color：#F69”。用CSS设置左侧主菜单部分样式的代码如图所示。用CSS设置左侧主菜单部分样式的代码686用CSS设置左侧主菜单部分样式的代码687运行代码，效果如图所示。制作完左侧主菜单的网页效果688步骤二：制作买家订单流程进度图。流程进度图使用div标签制作，每一个节点的圆圈使用em标签制作，圆圈中的图标使用i标签制作。具体html代码如图所示。买家订单流程进度图结构布局689买家订单流程进度图结构布局690设置CSS代码，这里注意“text-align:justify”的含义表示该元素包含的内容实行两端对齐，即其子元素均分水平方向的间隔。这里的“letter-spacing”和“word-spacing”分别表示字间距和词间距，都用来控制文字横向之间的间隔。用CSS设置买家订单流程进度图样式的代码如图所示。用CSS设置买家订单流程进度图样式的代码691用CSS设置买家订单流程进度图样式的代码692用CSS设置买家订单流程进度图样式的代码693用CSS设置买家订单流程进度图样式的代码694用CSS设置买家订单流程进度图样式的代码695运行代码，效果如图所示。制作完成买家订单流程进度的网页效果696步骤三：制作物流信息更新展示部分，其主要布局与之前项目十任务1中的布局类似，具体html代码如图所示。物流信息更新展示部分结构布局697物流信息更新展示部分结构布局698用CSS设置物流信息更新展示部分样式的代码如图所示。用CSS设置物流信息更新展示部分样式的代码699用CSS设置物流信息更新展示部分样式的代码700用CSS设置物流信息更新展示部分样式的代码701用