資源簡介

(共65張PPT)
10html5 新增結構元素和屬性任務 1 制作訂單支付網頁地址區任務 2 制作訂單支付網頁制作訂單支付網頁地址區任務 1● 掌握 html5 新增結構元素的用法。為了使文檔的結構更加清晰、明確，html5 新增加了一些可以改善文檔結構的元素，如header、footer、article、aside、section 等。這些結構元素能夠讓網頁設計者更加語義化地創建文檔。而在之前的 html4 中，設計者要實現這些語義化的功能，需要使用 div 標簽的額外屬性，且由于設計者編碼習慣不同，很難做到統一。本任務主要使用 section 元素實現網頁語義化，并用 nav 標簽設置導航欄來制作繽購樂食電子商務網站訂單支付網頁地址。網頁效果如圖所示。訂單支付網頁地址區效果圖步驟一：在 body 標簽中插入一個大的 section 模塊，里面包含兩個小 section 模塊，第二個 section模塊包含一個 ul 無序列表。網頁的導航列表主要用 ul 無序列表來布局，為了更加語義化地表達網頁內容，在 ul 外層包裹一組 nav 標簽。在導航列表下方使用 div 標簽和 span 標簽的嵌套來完成“收貨地址”區域的布局。具體 html 代碼如圖所示。支付網頁導航列表結構布局支付網頁導航列表結構布局支付網頁導航列表結構布局支付網頁導航列表結構布局支付網頁導航列表結構布局支付網頁導航列表結構布局支付網頁導航列表結構布局步驟二：設置相應的 CSS 樣式代碼。這里要注意，“默認地址”標志設置了半透明的效果，這是使用“ opacity:0.7”來實現的，此處的值只能取 0 ～ 1 之間，值越小，透明度越高。用 CSS設置支付網頁導航列表樣式的代碼如圖所示。用 CSS 設置支付網頁導航列表樣式代碼用 CSS 設置支付網頁導航列表樣式代碼用 CSS 設置支付網頁導航列表樣式代碼用 CSS 設置支付網頁導航列表樣式代碼用 CSS 設置支付網頁導航列表樣式代碼用 CSS 設置支付網頁導航列表樣式代碼用 CSS 設置支付網頁導航列表樣式代碼用 CSS 設置支付網頁導航列表樣式代碼用 CSS 設置支付網頁導航列表樣式代碼運行代碼，效果如圖所示。制作完訂單支付網頁地址區導航列表的網頁效果步驟三：制作物流選擇區和支付方式選擇區。物流品牌的圖片用到了雪碧圖技術，雪碧圖技術就是將很多圖標都放在一張大圖上，然后通過控制 background-position 來顯示大圖中的某個小圖。具體 html 代碼如圖所示。物流選擇區和支付方式選擇區結構布局物流選擇區和支付方式選擇區結構布局物流選擇區和支付方式選擇區結構布局用 CSS 設置物流選擇區和支付方式選擇區樣式的代碼，如圖所示。用 CSS 設置物流選擇區和支付方式選擇區樣式的代碼用 CSS 設置物流選擇區和支付方式選擇區樣式的代碼用 CSS 設置物流選擇區和支付方式選擇區樣式的代碼一、section 元素section 元素是區塊元素，用于對網頁中的內容分塊，它往往是文章中的一段，通常由標題和內容組成。section 元素強調分段和分塊，而 article 元素則強調獨立性。沒有標題的內容不推薦使用section 元素，可以使用 html 輪廓工具檢查網頁中是否存在沒有標題的 section 元素。html5輪廓工具網址為“http://gsnedders.html5.org/outliner”。section 元素演示代碼如圖所示。其中 h1 標簽包含的是標題部分，p 標簽包含的是內容部分。section 元素演示代碼二、nav 標簽nav 標簽用來定義網頁導航列表的部分。nav 標簽的使用場合主要有傳統導航條、側邊欄導航、頁內導航、翻頁操作。nav 標簽只起語義化的作用，沒有實際的顯示效果。需要注意的是，不要用 menu 標簽代替 nav 標簽，nav 標簽包含幫助用戶瀏覽網頁的鏈接，menu 標簽則包含一組菜單命令，幫助用戶執行某些任務。nav 標簽演示代碼如圖所示。nav 標簽演示代碼制作訂單支付網頁任務2● 掌握 html5 表單新屬性的特征。html 表單一直都是 web 的核心技術之一，依靠它可以完成 web 上各種應用的輸入界面，從而使客戶端和服務器進行方便快捷的交互。html5 表單新增了許多屬性，方便設計者應對更加多樣的場景，而不用借助其他前端腳本語言。在繽購樂食電子商務網站訂單支付網頁上，需要通過 html 表單做出供用戶選擇的收貨地址、快遞公司、支付方式等，并通過 html表單將信息傳輸到服務器完成下單操作。本任務通過之前學習的 html 表單相關知識以及html5 表單控件的新屬性來完成訂單支付網頁，網頁效果如圖所示。訂單支付網頁效果步驟一：首先制作訂單表格標題，圖所示為訂單表格標題的 html 代碼。訂單表格標題的 html 代碼接著設置 CSS 代碼，如圖所示。訂單表格標題 CSS 樣式代碼訂單表格標題 CSS 樣式代碼步驟二：制作訂單商品信息列表部分。每一行的布局是由一個單獨的 ul 無序列表來完成的，每一行要顯示的圖文信息分別放在 li 列表項中，所有的 li 列表項都設置為左浮動，并排列成一行。具體 html 代碼如圖所示。訂單商品信息列表布局訂單商品信息列表布局訂單商品信息列表布局訂單商品信息列表布局訂單商品信息列表布局訂單商品信息列表布局接著設置 CSS 代碼，寬度和高度的屬性值不僅可以使用具體的像素值，也可以設置百分比，當需要按比例去分配高度和寬度的時候，建議使用百分比；當寬度和高度為具體確定的值時，建議使用像素值。用 CSS 設置訂單商品信息列表樣式的代碼如圖所示。用 CSS 設置訂單商品信息列表樣式的代碼用 CSS 設置訂單商品信息列表樣式的代碼用 CSS 設置訂單商品信息列表樣式的代碼運行代碼，效果如圖所示。訂單商品信息列表效果步驟三：制作買家留言和商品優惠信息部分，買家留言部分用文本輸入框實現，商品優惠信息部分用 select 下拉列表控件實現。具體 html 代碼如圖所示。買家留言和商品優惠信息部分結構布局買家留言和商品優惠信息部分結構布局買家留言和商品優惠信息部分結構布局用 CSS 設置買家留言和商品優惠信息部分樣式的代碼，如圖所示。用 CSS 設置買家留言和商品優惠信息部分樣式的代碼用 CSS 設置買家留言和商品優惠信息部分樣式的代碼步驟四：制作支付信息及提交訂單部分。支付信息由大 div 盒子中嵌套小 div 盒子及 span 標簽來實現，“提交訂單”按鈕使用超鏈接 a 標簽來實現其樣式，此按鈕也可以使用“表單提交”按鈕來實現，讀者可自行嘗試。具體 html 代碼如圖所示。支付信息及提交訂單部分結構布局支付信息及提交訂單部分結構布局支付信息及提交訂單部分結構布局接著設置 CSS 代碼，這里需要注意 outline 屬性和 border 屬性的區別：border 指網頁元素的邊框，outline 指網頁元素邊框的邊緣，設置無邊框使用“ border:none”，設置無輪廓使用“outline:0”。具體代碼如圖所示。用 CSS 設置支付信息及提交訂單部分的代碼用 CSS 設置支付信息及提交訂單部分的代碼用 CSS 設置支付信息及提交訂單部分的代碼一、required/pattern 屬性required 屬性規定必須在提交之前填寫輸入域，即輸入域不能為空。required 屬性適用于以下類型的 input 標簽：text、search、url、telephone、email、password、datepickers、number、checkbox、radio 和 le。格式如下。pattern 屬性規定用于驗證 input 域的模式，pattern 類型為正則驗證，它可以完成各種復雜的驗證。pattern 屬性適用于以下類型的 input 標簽：text、search、url、telephone、email 和password。格式如下。二、autofocus 屬性autofocus 屬性規定在頁面加載時，域自動獲得焦點，可在頁面加載完成時聚焦到指定的表單控件上，類似于 Javascript 的 focus（ ）方法。autofocus 屬性適用于所有類型的 input表單控件。格式如下。三、outline 屬性outline 屬性用于在元素周圍繪制一條線，該線位于邊框邊緣的外圍，可起到突出元素的作用。

展開更多......

收起↑