《電子商務網(wǎng)頁設計與制作》 課件 項目10、11 html5 新增結構元素和屬性、html5 新增標簽的使用

10html5新增結構元素和屬性602任務1制作訂單支付網(wǎng)頁地址區(qū)任務2制作訂單支付網(wǎng)頁603制作訂單支付網(wǎng)頁地址區(qū)任務1604●掌握html5新增結構元素的用法。605為了使文檔的結構更加清晰、明確，html5新增加了一些可以改善文檔結構的元素，如header、footer、article、aside、section等。這些結構元素能夠讓網(wǎng)頁設計者更加語義化地創(chuàng)建文檔。而在之前的html4中，設計者要實現(xiàn)這些語義化的功能，需要使用div標簽的額外屬性，且由于設計者編碼習慣不同，很難做到統(tǒng)一。本任務主要使用section元素實現(xiàn)網(wǎng)頁語義化，并用nav標簽設置導航欄來制作繽購樂食電子商務網(wǎng)站訂單支付網(wǎng)頁地址。網(wǎng)頁效果如圖所示。606607訂單支付網(wǎng)頁地址區(qū)效果圖608步驟一：在body標簽中插入一個大的section模塊，里面包含兩個小section模塊，第二個section模塊包含一個ul無序列表。網(wǎng)頁的導航列表主要用ul無序列表來布局，為了更加語義化地表達網(wǎng)頁內(nèi)容，在ul外層包裹一組nav標簽。在導航列表下方使用div標簽和span標簽的嵌套來完成“收貨地址”區(qū)域的布局。具體html代碼如圖所示。609支付網(wǎng)頁導航列表結構布局610支付網(wǎng)頁導航列表結構布局611支付網(wǎng)頁導航列表結構布局612支付網(wǎng)頁導航列表結構布局613支付網(wǎng)頁導航列表結構布局614支付網(wǎng)頁導航列表結構布局615支付網(wǎng)頁導航列表結構布局616步驟二：設置相應的CSS樣式代碼。這里要注意，“默認地址”標志設置了半透明的效果，這是使用“opacity:0.7”來實現(xiàn)的，此處的值只能取0～1之間，值越小，透明度越高。用CSS設置支付網(wǎng)頁導航列表樣式的代碼如圖所示。用CSS設置支付網(wǎng)頁導航列表樣式代碼617用CSS設置支付網(wǎng)頁導航列表樣式代碼618用CSS設置支付網(wǎng)頁導航列表樣式代碼619用CSS設置支付網(wǎng)頁導航列表樣式代碼620用CSS設置支付網(wǎng)頁導航列表樣式代碼621用CSS設置支付網(wǎng)頁導航列表樣式代碼622用CSS設置支付網(wǎng)頁導航列表樣式代碼623用CSS設置支付網(wǎng)頁導航列表樣式代碼624用CSS設置支付網(wǎng)頁導航列表樣式代碼625運行代碼，效果如圖所示。制作完訂單支付網(wǎng)頁地址區(qū)導航列表的網(wǎng)頁效果626步驟三：制作物流選擇區(qū)和支付方式選擇區(qū)。物流品牌的圖片用到了雪碧圖技術，雪碧圖技術就是將很多圖標都放在一張大圖上，然后通過控制background-position來顯示大圖中的某個小圖。具體html代碼如圖所示。物流選擇區(qū)和支付方式選擇區(qū)結構布局627物流選擇區(qū)和支付方式選擇區(qū)結構布局628物流選擇區(qū)和支付方式選擇區(qū)結構布局629用CSS設置物流選擇區(qū)和支付方式選擇區(qū)樣式的代碼，如圖所示。用CSS設置物流選擇區(qū)和支付方式選擇區(qū)樣式的代碼630用CSS設置物流選擇區(qū)和支付方式選擇區(qū)樣式的代碼631用CSS設置物流選擇區(qū)和支付方式選擇區(qū)樣式的代碼632一、section元素section元素是區(qū)塊元素，用于對網(wǎng)頁中的內(nèi)容分塊，它往往是文章中的一段，通常由標題和內(nèi)容組成。633section元素強調(diào)分段和分塊，而article元素則強調(diào)獨立性。沒有標題的內(nèi)容不推薦使用section元素，可以使用html輪廓工具檢查網(wǎng)頁中是否存在沒有標題的section元素。html5輪廓工具網(wǎng)址為“/outliner”。section元素演示代碼如圖所示。其中h1標簽包含的是標題部分，p標簽包含的是內(nèi)容部分。section元素演示代碼634二、nav標簽nav標簽用來定義網(wǎng)頁導航列表的部分。nav標簽的使用場合主要有傳統(tǒng)導航條、側邊欄導航、頁內(nèi)導航、翻頁操作。nav標簽只起語義化的作用，沒有實際的顯示效果。需要注意的是，不要用menu標簽代替nav標簽，nav標簽包含幫助用戶瀏覽網(wǎng)頁的鏈接，menu標簽則包含一組菜單命令，幫助用戶執(zhí)行某些任務。nav標簽演示代碼如圖所示。635nav標簽演示代碼制作訂單支付網(wǎng)頁任務2

636●掌握html5表單新屬性的特征。637html表單一直都是web的核心技術之一，依靠它可以完成web上各種應用的輸入界面，從而使客戶端和服務器進行方便快捷的交互。html5表單新增了許多屬性，方便設計者應對更加多樣的場景，而不用借助其他前端腳本語言。在繽購樂食電子商務網(wǎng)站訂單支付網(wǎng)頁上，需要通過html表單做出供用戶選擇的收貨地址、快遞公司、支付方式等，并通過html表單將信息傳輸?shù)椒掌魍瓿上聠尾僮?。本任務通過之前學習的html表單相關知識以及html5表單控件的新屬性來完成訂單支付網(wǎng)頁，網(wǎng)頁效果如圖所示。638639訂單支付網(wǎng)頁效果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步驟三：制作買家留言和商品優(yōu)惠信息部分，買家留言部分用文本輸入框實現(xiàn)，商品優(yōu)惠信息部分用select下拉列表控件實現(xiàn)。具體html代碼如圖所示。買家留言和商品優(yōu)惠信息部分結構布局654買家留言和商品優(yōu)惠信息部分結構布局655買家留言和商品優(yōu)惠信息部分結構布局656用CSS設置買家留言和商品優(yōu)惠信息部分樣式的代碼，如圖所示。用CSS設置買家留言和商品優(yōu)惠信息部分樣式的代碼657用CSS設置買家留言和商品優(yōu)惠信息部分樣式的代碼658步驟四：制作支付信息及提交訂單部分。支付信息由大div盒子中嵌套小div盒子及span標簽來實現(xiàn)，“提交訂單”按鈕使用超鏈接a標簽來實現(xiàn)其樣式，此按鈕也可以使用“表單提交”按鈕來實現(xiàn)，讀者可自行嘗試。具體html代碼如圖所示。支付信息及提交訂單部分結構布局659支付信息及提交訂單部分結構布局660支付信息及提交訂單部分結構布局661接著設置CSS代碼，這里需要注意outline屬性和border屬性的區(qū)別：border指網(wǎng)頁元素的邊框，outline指網(wǎng)頁元素邊框的邊緣，設置無邊框使用“border:none”，設置無輪廓使用“outline:0”。具體代碼如圖所示。用CSS設置支付信息及提交訂單部分的代碼662用CSS設置支付信息及提交訂單部分的代碼663用CSS設置支付信息及提交訂單部分的代碼664一、required/pattern屬性required屬性規(guī)定必須在提交之前填寫輸入域，即輸入域不能為空。required屬性適用于以下類型的input標簽：text、search、url、telephone、email、password、datepickers、number、checkbox、radio和?le。格式如下。665pattern屬性規(guī)定用于驗證input域的模式，pattern類型為正則驗證，它可以完成各種復雜的驗證。pattern屬性適用于以下類型的input標簽：text、search、url、telephone、email和password。格式如下。666二、autofocus屬性autofocus屬性規(guī)定在頁面加載時，域自動獲得焦點，可在頁面加載完成時聚焦到指定的表單控件上，類似于Javascript的focus（）方法。autofocus屬性適用于所有類型的input表單控件。格式如下。三、outline屬性outline屬性用于在元素周圍繪制一條線，該線位于邊框邊緣的外圍，可起到突出元素的作用。11html5新增標簽的使用667任務1制作支付成功網(wǎng)頁任務2制作查看訂單網(wǎng)頁668制作支付成功網(wǎng)頁任務1669●掌握html5新增bdi標簽的用法。670本任務將通過使用CSS設置支付成功圖文信息的樣式，利用html5新增bdi標簽共同完成支付成功網(wǎng)頁，網(wǎng)頁效果如圖所示。671支付成功網(wǎng)頁效果672步驟：制作支付成功網(wǎng)頁。使用div盒子進行嵌套布局，在制作收件人信息部分使用了bdi標簽，用于隔離父元素樣式對子元素樣式的影響。具體html代碼如圖所示。673支付成功網(wǎng)頁結構布局674接著設置CSS代碼。這里需要注意，用background設置背景圖像時，scroll表示窗口內(nèi)容滾動時圖片也會跟著滾動，即圖片與其他內(nèi)容相對靜止，一般此處默認值為scroll。如果想讓圖片不隨窗口的滾動而跟著變化，此處需設置為?xed。圖所示為用CSS設置支付成功網(wǎng)頁樣式的代碼。用CSS設置支付成功網(wǎng)頁樣式的代碼675用CSS設置支付成功網(wǎng)頁樣式的代碼676用CSS設置支付成功網(wǎng)頁樣式的代碼677bdi標簽是html5中的新標簽。bdi標簽指的是bidi隔離。bdi標簽允許設計者設置一段文本，使其脫離其父元素的文本方向設置。在發(fā)布用戶評論或其他無法完全控制的內(nèi)容時，建議使用該標簽。bdi標簽的常用屬性及描述見表。bdi標簽的屬性及描述制作查看訂單網(wǎng)頁任務2

678●掌握html5新增header標簽、footer標簽的用法。679html5吸取了xhtml2的一些優(yōu)點，為了使文檔的結構更加清晰、明確，html5又新增了一些改善文檔結構的元素，如header、footer、article、aside、section等，從而使網(wǎng)頁開發(fā)人員能夠更加語義化地創(chuàng)建文檔。而在之前的html4中，開發(fā)者都將div標簽作為網(wǎng)頁的主要容器。本任務使用header、footer語義化標簽和其他傳統(tǒng)標簽共同制作了查看訂單網(wǎng)頁，效果如圖所示。680681查看訂單網(wǎng)頁效果682步驟一：先制作左側主菜單部分，它主要通過一個ul無序列表嵌套四個子ul無序列表來實現(xiàn)布局。具體html代碼如圖所示。左側主菜單部分結構布局683左側主菜單部分結構布局684左側主菜單部分結構布局685接著設置CSS代碼，這里應注意，當設置color顏色的值是用十六進制來表示時，如果每兩位的值相同，則可縮寫一半，例如，“color：#FF6699”可簡寫為“color：#F69”。用CSS設置左側主菜單部分樣式的代碼如圖所示。用CSS設置左側主菜單部分樣式的代碼686用CSS設置左側主菜單部分樣式的代碼687運行代碼，效果如圖所示。制作完左側主菜單的網(wǎng)頁效果688步驟二：制作買家訂單流程進度圖。流程進度圖使用div標簽制作，每一個節(jié)點的圓圈使用em標簽制作，圓圈中的圖標使用i標簽制作。具體html代碼如圖所示。買家訂單流程進度圖結構布局689買家訂單流程進度圖結構布局690設置CSS代碼，這里注意“text-align:justify”的含義表示該元素包含的內(nèi)容實行兩端對齊，即其子元素均分水平方向的間隔。這里的“l(fā)etter-spacing”和“word-spacing”分別表示字間距和詞間距，都用來控制文字橫向之間的間隔。用CSS設置買家訂單流程進度圖樣式的代碼如圖所示。用CSS設置買家訂單流程進度圖樣式的代碼691用CSS設置買家訂單流程進度圖樣式的代碼692用CSS設置買家訂單流程進度圖樣式的代碼693用CSS設置買家訂單流程進度圖樣式的代碼694用CSS設置買家訂單流程進度圖樣式的代碼695運行代碼，效果如圖所示。制作完成買家訂單流程進度的網(wǎng)頁效果696步驟三：制作物流信息更新展示部分，其主要布局與之前項目十任務1中的布局類似，具體html代碼如圖所示。物流信息更新展示部分結構布局697物流信息更新展示部分結構布局698用CSS設置物流信息更新展示部分樣式的代碼如圖所示。用CSS設置物流信息更新展示部分樣式的代碼699用CSS設置物流信息更新展示部分樣式的代碼700用CSS設置物流信息更新展示部分樣式的代碼701用