模塊六創建網頁

中的超鏈接目錄任務創建“在線學習網”頁面的超鏈接引入知識點6.1創建超鏈接6.2超鏈接的類型任務創建“在線學習網”頁面的超鏈接6.1創建超鏈接超文本鏈接（HyperTextLink）通常簡稱為超鏈接（HyperLink），或者簡稱為鏈接（Link）。超鏈接就是從一個網頁轉到另一個網頁的途徑。鏈接是HTML的一個最強大和最有價值的功能。任務創建“在線學習網”頁面的超鏈接6.1創建超鏈接6.1.1超鏈接a元素的語法格式創建超鏈接使用的標記是<a>。超鏈接要能正確地進行鏈接跳轉，需要同時存在兩個端點，即源端點和目標端點。源端點是指網頁中提供鏈接單擊的對象，如鏈接文本或鏈接圖像；目標端點是指鏈接跳轉過去的頁面或位置，如某個網頁、錨記等。超鏈接的目標端點使用<a>標記的href屬性來指定，源端點則通過<a>標記的內容來指定。除了需要使用href屬性外，還經常需要用到其他一些相關的屬性。任務創建“在線學習網”頁面的超鏈接6.1創建超鏈接6.1.2設置超鏈接的路徑在網站中，每一個網頁都有一個唯一的地址與之對應，這個地址稱為統一資源定位符，即URL（UniformResourceLocator），它的功能就是提供在Internet上查找資源的標準方法。而對于一般的文件則是它的路徑，即所在的目錄和文件名。鏈接路徑就是在超鏈接中用于標識目標端點的位置標識。常見的鏈接路徑主要有以下兩種類型。1.絕對路徑2.相對路徑任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型1.根據超鏈接目標端點的位置不同劃分（1）內部超鏈接：指在同一站點內部，不同頁面之間的超鏈接。（2）外部超鏈接：是站點外部的鏈接，是網頁與因特網中某個目標網頁的鏈接。（3）錨記超鏈接：是同一網頁內部的鏈接。通常情況下，錨記鏈接用于鏈接到網頁內部某個特定的位置。（4）電子郵件超鏈接：指鏈接到電子郵箱的鏈接。單擊該鏈接可以發送電子郵件。（5）可執行文件超鏈接：通常又稱文件下載鏈接，單擊該鏈接可以運行可執行文件，可以用于下載文件或在線運行可執行文件。任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型2.根據鏈接源端點的內容不同劃分（1）文本超鏈接：以文本作為超鏈接源端點。（2）圖像超鏈接：以圖像作為超鏈接源端點。（3）圖像熱點超鏈接：以圖像熱區作為超鏈接源端點。任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型3.根據鏈接目標端點的內容不同劃分（1）網頁超鏈接：鏈接到HTML、ASP、PHP等網頁文檔的鏈接，這是網站中最常見的鏈接。（2）文件下載超鏈接：鏈接到圖像、音頻、影片、Word文檔、Excel文檔、PowerPoint文檔、PDF文檔等資源文件或RAR、ZIP等壓縮文件的鏈接。（3）電子郵件超鏈接：鏈接到電子郵件的超鏈接形式，將會啟動郵件客戶端程序，瀏覽者可以寫郵件并發送到鏈接的郵箱中。（4）空鏈接：鏈接目標形式上為“#”，主要用于在對象上附加行為等（5）腳本超鏈接：鏈接目標為一段JavaScript腳本代碼，用于執行某項操作（6）錨記超鏈接：鏈接目標為網頁文檔中的某一位置，這一位置可以位于當前網頁或其他網頁中，這個網頁可以位于當前站點內，也可以位于其他站點內任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型1內部超鏈接內部超鏈接是指在同一個網站內部，不同網頁之間的鏈接關系。基本語法格式如下：<ahref=“鏈接文件的路徑”>源端點</a>任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型2外部超鏈接外部超鏈接是指跳轉到當前網站外部，和其他網站中的頁面或其他元素之間的鏈接關系。基本語法格式如下：

<ahref=“URL”>源端點</a>任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型3錨記超鏈接錨記超鏈接又稱書簽鏈接。在瀏覽網頁的時候，如果頁面內容過長，需要不斷地拖動滾動條才能看到所有內容，這時可以在該網頁上建立錨記目錄，單擊目錄上的某一項就能自動跳到該目錄項對應的網頁位置。任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型第一步：創建錨記基本語法格式如下：HTML5：<aid=“錨記名稱”>源端點</a>HTML5以前版本：<aname=“錨記名稱”>源端點</a>語法說明：錨記名稱就是對第二步跳轉所創建的錨記，“源端點”則是設置鏈接后跳轉的位置，可以是文本或圖片。任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型第二步：建立錨記鏈接基本語法格式如下：（1）鏈接到同一個頁面中的錨記，稱為內部錨記超鏈接。<ahref=“#錨記名稱”>源端點</a>（2）鏈接到其他頁面中的錨記，稱為外部錨記超鏈接。<ahref=“錨記所在頁面的文件路徑#錨記名稱”>源端點</a>任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型4電子郵件超鏈接在頁面上創建電子郵件鏈接，可以讓瀏覽者快速地與網站負責人聯系。當鼠標單擊鏈接對象時，瀏覽者的計算機系統中默認的電子郵件客戶端軟件將自動打開。基本語法格式如下：<ahref=”mailto:電子郵件”>源端點</a>任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型5文件下載超鏈接目標端點為某個需下載的文件的鏈接稱為文件下載鏈接。當用戶單擊該鏈接后，瀏覽器會自動判斷文件類型，以做出不同情況的處理，如直接打開，或彈出下載對話框供下載可用于下載的文件類型有.doc、.rar、.mp3、.zip、.exe等。基本語法格式如下：<ahref=“鏈接文件的路徑”>下載文件鏈接</a>任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型6腳本超鏈接目標端點為腳本代碼的鏈接稱為腳本鏈接。通過腳本可以實現HTML語言完成不了的功能。基本語法格式如下：<ahref=“JavaScript:…”>源端點</a>任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型7文本超鏈接文本超鏈接是指源端點為文本的鏈接。基本語法格式如下：<ahref=“目標端點”>鏈接文本</a>任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型8圖像超鏈接圖像超鏈接是指源端點為圖像文件的超鏈接。基本語法格式如下：<ahref=“目標端點”><imgsrc=“圖像文件路徑”></a>任務創建“在線學習網”頁面的超鏈接6.2超鏈接的類型9圖像熱點超鏈接圖像映射是指源端點為圖片熱點的鏈接。一幅圖像可以被切分成不同的區域，每一個區域可以鏈接到不同的地址，這些區域稱為圖像的熱區。基本語法格式如下：<imgsrc="圖片文件路徑"usemap="#Map_name"><mapname="#Map_name"><areashape="rect"coords="x1,y1,x2,y2"href="鏈接地址1"><areashape="circle"coords="x,y,r"href="鏈接地址2"><areashape="poly"coords="x1,y1,x2,y2,x3,y3,…"href="鏈接地址3">…</map>任務創建“在線學習網”頁面的超鏈接任務實現（1）通過文本超鏈接實現頁面鏈接。（2）通過圖像熱點超鏈接實現首頁到子頁面的鏈接。（3）過錨記超鏈接實現子頁面各部分內容的鏈接。（4）通過電子郵件超鏈接實現“聯系我們”鏈接到郵箱：843118486@任務創建“在線學習網”頁面的超鏈接任務實現（5）通過腳本超鏈接關閉“在線學習網站”中的數字媒體技術概述課程子頁面文件course_multimedia.html。（6）通過外部超鏈接和圖像超鏈接實現首頁“友情鏈接”到“廣東創新科技職業學院”網站。（7）通過文件下載超鏈接可以下載資源文件“download.rar”。任務創建“在線學習網”頁面的超鏈接謝謝模塊五網頁表單設計目錄任務一任務二任務三注冊頁面的設計讀者留言板的設計引入知識點任務1注冊頁面的設計7.1了解表單7.2輸入元素input任務1注冊頁面的設計7.1了解表單一個表單由三部分組成：（1）表單標記：包括處理表單數據所用的CGI程序（通用網關接口）的URL和數據提交到服務器的方法。（2）表單域：包括文本框、密碼框、復選框、單選框、下拉選擇框、文件上傳框、多行文本框和隱藏域等。（3）表單按鈕：包括提交按鈕、重置按鈕和普通按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用來控制其他定義了處理腳本的處理工作。任務1注冊頁面的設計7.1了解表單1、表單的作用表單在網頁中的主要作用是采集用戶數據，它提供一個頁面，一個入口。表單處理信息的一般過程為：用戶在表單中完成信息的填寫后，單擊表單中的提交按鈕時，用戶所輸入的信息就會提交到服務器，服務器中的應用程序會對這些信息進行處理和響應，完成用戶和服務器之間的交互。任務1注冊頁面的設計7.1了解表單2、表單元素form表單是網頁上一個特定的區域，這個區域是由<form>標記定義的，它是一對雙標記，<form>標記代表表單區域的開始，</form>標記代表表單區域的結束，在<form>和</form>標記之間的所有內容都屬于表單內容。<form>標記的基本語法格式如下：<formname="表單名稱"action="表單提交地址"method="數據傳輸方式">…</form>任務1注冊頁面的設計7.1了解表單表單常用屬性任務1注冊頁面的設計7.2輸入元素input基本語法格式<inputtype="輸入控件類型"name="控件名字">任務1注冊頁面的設計7.2輸入元素input根據type屬性值的不同可以得到不同的控件類型type常用的屬性值任務1注冊頁面的設計7.2輸入元素input1、文本框text基本語法格式：<inputtype="text"name="field_name"value="field_value"size="size_value"maxlength="max_value">文本框屬性任務1注冊頁面的設計7.2輸入元素input2、密碼框password基本語法格式：<inputtype="password"name="field_name"value="field_value"size="size_value"maxlength="max_value">密碼框屬性任務1注冊頁面的設計7.2輸入元素input單選按鈕屬性3、單選按鈕radio基本語法格式：<inputtype="radio"name="field_name"value="value"checked>任務1注冊頁面的設計7.2輸入元素input復選框屬性4、復選框checkbox基本語法格式：<inputtype="checkbox"name="field_name"value="value"checked>任務1注冊頁面的設計7.2輸入元素input普通按鈕屬性5、普通按鈕button基本語法格式：<inputtype="button"name="field_name"value="button_text">任務1注冊頁面的設計7.2輸入元素input提交按鈕屬性6、提交按鈕submit基本語法格式：<inputtype="submit"name="field_name"value="submit_text">任務1注冊頁面的設計7.2輸入元素input重置按鈕屬性7、重置按鈕reset基本語法格式：<inputtype="reset"name="field_name"value="reset_text">任務1注冊頁面的設計7.2輸入元素input圖片按鈕屬性8、圖片按鈕image基本語法格式：<inputtype="image"name="field_name"src="image_url">任務1注冊頁面的設計7.2輸入元素input文本域屬性9、文本域file基本語法格式：<inputtype="file"name="field_name">任務1注冊頁面的設計7.2輸入元素input隱藏域屬性10、隱藏域hidden基本語法格式：<inputtype="hidden"name="field_name">任務1注冊頁面的設計任務實現（1）創建一個HTML5頁面，制作注冊頁面；（3）使用表格對注冊頁面的結構進行控制；（2）在頁面中插入一個form元素；（4）在表格相對應的位置放入表單輸入元素。任務1注冊頁面的設計注冊界面引入知識點任務2讀者留言板的設計7.3下拉選擇框元素select7.4多行文本域textarea任務2讀者留言板的設計7.3下拉選擇框元素select下拉選擇框也是頁面中常用的表單元素，它由<select>標記定義，是一對雙標記，<select>標記定義了下拉選擇框的開始，</select>標記定義了下拉選擇框的結束。可以通過屬性設置要顯示的選項數量，以及是否允許多項選擇等內容。任務2讀者留言板的設計7.3下拉選擇框元素selectselect元素的常用屬性基本語法格式：<selectname="field_name"size="size_value"multiple>…</select>任務2讀者留言板的設計7.3下拉選擇框元素selectselect元素相當于一個容器，標記當前的下拉選擇框是菜單還是列表，而它所包含的菜單或列表中的每一項都是由option元素定義的。option元素定義了下拉選擇框里的選項，它也是一對雙標記，選項的內容包含在開始標記<option>和結束標記</option>之間。option元素要定義在<select>和</select>標記里面才能發揮作用。任務2讀者留言板的設計7.3下拉選擇框元素selectoption元素的常用屬性option元素基本語法格式：<selectname="field_name"><optionvalue="string"selected>選項1</option><option>選項2</option><option>選項3</option>…</select>任務2讀者留言板的設計7.4多行文本域textarea基本語法格式：<textareaname="field_name"cols="number"rows="number"></textarea>textarea元素也是在頁面中經常使用的表單元素，它是一對雙標記，<textarea>標記為開始標記，</textarea>標記為結束標記，需要在頁面顯示的初始文本內容放置于<textarea>與</textarea>標記之間。任務2讀者留言板的設計7.4多行文本域textareatextarea元素的常用屬性任務實現（1）創建一個HTML5頁面，制作“讀者留言板”頁面；（3）使用表格對“讀者留言板”頁面的結構進行控制；（2）在HTML頁面中插入一個form元素；任務2讀者留言板的設計（4）在表格相對應的位置放入表單輸入元素、下拉選擇框元素及多行文本域元素。任務2讀者留言板的設計讀者留言板謝謝模塊八

CSS3樣式基礎《HTML5+CSS3任務驅動教程》目錄任務一任務二任務三網頁大標題的樣式設計網頁中的文字排版制作產品分類本模塊任務安排：引入知識點任務1網頁大標題的樣式設計8.1什么是CSS8.2CSS的應用任務1網頁大標題的樣式設計8.1什么是CSSCSS是層疊樣式表(CascadingStyleSheets)的簡稱，是用來表現HTML或XML的標記語言，運用CSS樣式與HTML所描述的信息結構相結合，能夠幫助設計師將網頁內容與表現相分離，使網站更加容易構建與維護。任務1網頁大標題的樣式設計8.1什么是CSSCSS的語法結構任務1網頁大標題的樣式設計8.2CSS的應用1、行間樣式行間樣式，也叫內聯樣式，由HTML標記中的style屬性所支持，要使用行間樣式，你需要在相關的標簽內使用樣式（style）屬性。行間樣式將表現和內容混雜在一起。<pstyle="color:#f00;padding-left:20px">這是一個段落。</p>任務1網頁大標題的樣式設計8.2CSS的應用2、內部樣式內部樣式是CSS樣式編碼的初級應用形式，樣式表作為頁面的一個單獨部分，由<style></style>標記定位在<head></head>之中。只能針對當前頁面有效，不能跨頁面執行。<head><styletype="text/CSS">hr{color:blue;}p{margin-left:20px;}body{background-color:#ccc;}</style></head>任務1網頁大標題的樣式設計8.2CSS的應用3、外部樣式外部樣式表是CSS應用中最好的一種形式，它將CSS樣式代碼單獨放在一個外部文件中，再由網頁進行調用。而且多個網頁可以調用同一個樣式表文件，這樣能夠實現代碼的最大限度重用及網站文件的最優化配置。當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。<head><linkrel="stylesheet"type="text/CSS"href="mystyle.CSS"/></head>任務1網頁大標題的樣式設計8.2CSS的應用CSS的文本屬性任務1網頁大標題的樣式設計任務實現（1）使用HBuilder創建一個html文件，保存為index.html，文檔中包含<head>、<body>等基本的HTML結構。（3）為<h1>標記設計CSS樣式（2）在<body>標記中，使用標題標記<h1>將內容進行語義化標記引入知識點任務2網頁中的文字排版8.3CSS字體樣式任務2網頁中的文字排版8.3CSS字體樣式任務實現（1）在HBuilder中新建一個HTML5頁面，保存為news1.html，使用<div>、<h1>、<h2>、<p>標記對網頁內容進行結構定義（3）采用外部樣式表的方式，將CSS與html鏈接（2）新建CSS文件，保存于與HTML文檔同一目錄下，保存文件名稱為news.css任務2網頁中的文字排版body{ font-size:100%;}div{ width:600px; font-family:MicrosoftYahei;/*字體為微軟雅黑*/}h2{ text-indent:2em;/*首行縮進2個字符*/ font-style:italic;/*設置傾斜字體*/}p{ font-size:1.2em;/*字體放大0.2倍*/ line-height:1.8em;/*行高為原來的1.8倍*/ text-indent:2em;/*首行縮進*/ color:#333;}效果圖任務2網頁中的文字排版效果圖任務2網頁中的文字排版按相同方法完成new2.html頁面，采用外部樣式表，實現相同的外觀。引入知識點任務3制作產品分類8.4列表元素列表HTML標記任務3制作產品分類1、ul無序列表2、ol有序列表3、自定義列表dl<h3>無序列表:</h3><ul><li>循環制</li><li>淘汰制</li><li>混合制</li></ul><h3>有序列表:</h3><ol> <li>一等獎</li> <li>二等獎</li> <li>三等獎</li> </ol><dl><dt>歡迎來學習HTML+CSS</dt><dd>這里有，html教程</dd><dd>這里有，css模塊</dd><dd>這里有，css教程</dd></dl>列表的CSS屬性任務3制作產品分類任務實現任務3制作產品分類（1）啟動HBuilder，新建文檔，選擇HTML文檔，保存為list.html，將文檔內容寫入<body>標記中。為文本內容添加h1、ol-li、h3、ul-li等標記或標記對，添加標記時注意標記的配對和縮進。（2）新建CSS樣式表文件，保存為list.css，并使用<link>標記與HTML頁面關聯。效果圖任務3制作產品分類謝謝模塊九使用DIV+CSS布局頁面《HTML5+CSS3任務驅動教程》目錄任務一任務二任務三網頁中的圖文混排網頁中的全圖排版多行多列式布局本模塊任務安排：任務描述任務1網頁中的圖文混排在現代網頁中，純文字的網頁顯得過于單調，為吸引用戶瀏覽，通常在文字中會插入適當的相關圖片，以更好地展現要表達的意思。在傳統的表格式布局中，往往通過插入一個表格，再在表格中插入圖片，并對表格應用align屬性來控制圖片居中、居左還是居右來顯示。而本任務中利用塊狀元素的盒子模型特性，應用CSS塊狀元素的更多屬性，實現更多圖文混排效果。任務1瀏覽效果如圖9-1所示。引入知識點任務1網頁中的圖文混排9.1CSS盒子模型9.2CSS浮動與定位任務1網頁中的圖文混排9.1CSS盒模型任務1網頁中的圖文混排9.1CSS盒模型1．外邊框margin可以單獨改變元素的上、下、左、右邊距（順時針）。也可以一次改變所有的屬性。外邊距設置屬性有margin、margin-top、margin-bottom、margin-right、margin-left。2．邊框元素外邊距內就是元素的邊框（border）,每個邊框有3個方面：寬度、樣式，以及顏色。常用的邊框屬性有7項:border-top（上邊框）、border-right（有邊框）、border-bottom（下邊框）、border-left（左邊框）、border-width（邊框寬度）、border-color（邊框顏色）、border-style（邊框樣式）。其中border-width可以一次性設置所有的邊框寬度，border-color同時設置四面邊框的顏色時，可以連續寫上4種顏色，并用空格分隔。上述連續設置的邊框都是按border-top、border-right、border-bottom、border-left的順序（順時針）。任務1網頁中的圖文混排9.1CSS盒模型3．內邊距元素的內邊距在邊框和內容區之間為paddingpadding屬性與外邊距類似，格式也大致相同，可以單獨設置四內邊距，也可使用padding一次性設置4．CSS3圓角在CSS3之前，要實現圓角的效果主要通過圖片輔助實現，實現起來不是很方便，使用CSS3的border-radius很方便實現圓角邊框，但要注意部分舊版本的瀏覽器不直接CSS3的屬性border-radius和前面介紹的border的參數個數和用法基本相同任務1網頁中的圖文混排9.2CSS浮動與定位float是CSS樣式中的布局屬性，float屬性的left和right值分別能夠讓元素向左和向右浮動。比如當元素向左浮動之后，對象的右側將清空出一塊區域，以便讓剩下的文檔元素能夠貼在右側。利用這個特性可以方便地設計出需要的塊狀元素排版布局效果。元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用clear屬性。clear屬性指定元素兩側不能出現浮動元素，主要有三個屬性值：both、left、right，分別表示清除兩邊的浮動、清除元素左邊的浮動、清除元素右邊的浮動。

采用position:absolute;之后，對象便開始進行絕對定位，絕對定位主要通過設置對象的top、right、bottom和left四個方向的邊距值來實現。一旦對象被設置絕對定位，它就完全脫離了文檔流與浮動模型，獨立于其他對象而存在

使用position:relative;進行相對定位，通過left和top來設置偏離原來位置左側和上側的距離。任務1網頁中的圖文混排任務實現（1）創建一個HTML5頁面，使用合適的標記對網站內容進行結構定義；（2）根據CSS盒子模型原理對網頁進行布局設置，對圖片進行合適的定位，在編寫CSS代碼之前先將需要用到的圖片保存于網站目錄中的images文件文件夾中，本項目主要采用類選擇器、后代選擇器（也可使用子元素選擇器）編寫出CSS代碼；（3）使用內部樣式表的形式將所寫CSS應用于該網頁。任務描述任務2網頁中的全圖排版網頁中全是圖片的排版布局也不少見，圖片排版常被用在相冊類、產品展示類的網頁中，這類頁面往往有大量的圖片在同一頁中進行展示，使用CSS布局進行全圖排版的核心在于，對浮動定位的控制，并且具有較好的靈活性。對于具有相同尺寸的圖片進行排版，用CSS進行浮動定位是比較好控制的，若對于各個圖片的尺寸規格不相同的圖片進行直接排版，也可以采用流式布局，使圖片錯落排列。網站的圖片新聞，采用了相同大小的圖片，此時只需要設置好一張圖片的樣式，其他圖片用相同的元素進行設置并產生浮動即可，外層元素的整體寬度也很容易通過盒模型計算得知。引入知識點任務2網頁中的全圖排版9.3CSS背景控制任務2網頁中的全圖排版9.3CSS背景控制任務2網頁中的全圖排版9.3CSS背景控制background:#f09url(bg.png)repeat-xfixed20px40px;任務2網頁中的全圖排版任務實現（1）在DreamweaverCC中創建一個空白HTML5頁面，在標題處輸入“校園風光”，保存為index.html。選用<div>標記對頁面進行整理布局，給<div>標記設置一個類layout，選用無序列表ul對圖片進行結構定義，每一個列表項中包含圖片和段落文字，HTML代碼如下：<divclass="layout"> <h2>美麗校園</h2> <ul> <li><imgsrc="images/hu.png"/><p>湖相依、樓相伴</p></li> <li><imgsrc="images/huguang.jpg"/><p>湖光倒影</p></li> <li><imgsrc="images/biyezhao.jpg"/><p>畢業照</p></li> <li><imgsrc="images/kongzi.png"/><p>孔子像</p></li> <li><imgsrc="images/menlou.png"/><p>學校正門門樓</p></li> <li><imgsrc="images/qiao.png"/><p>創新橋</p></li> <li><imgsrc="images/shiguang.jpg"/><p>快樂時光</p></li> <li><imgsrc="images/xiaoyuan.jpg"/><p>美麗校園</p></li> <li><imgsrc="images/yundonghui.jpg"/><p>運動會</p></li> </ul></div>任務2網頁中的全圖排版任務實現（2）為顯示更加直觀，本任務選用內部樣式表的方式編寫CSS代碼，直接在<head>中寫入<style>標記來編寫CSS，首先編寫CSSReset可以清除一些標記的特性，如ul、li的邊距等，然后編寫布局元素layout類，主要是給它固定寬度，水平方向居中對齊。注意：根據之前介紹的盒模型原理，此時layout的寬度應該等于一個li占據的寬度，再乘以3即可，layout的width=(圖片寬度270px+左右外邊距20px+li左右邊框2px)*3=876px。（3）給圖片固定大小為，寬度為270px，高度為160px。并給li標記進行向左浮動，即可讓元素共處同一行，當每顯示完3個li元素后，剩余的沒有空間顯示，自動會進入下一行顯示。（4）給<h2>標題內容設置圖標進行視覺美化。因此時的圖片并不是網頁的內容，只是顯示效果的輔助，因此此時給<h2>設置背景圖像為宜，并且不平鋪，加入背景后要讓背景顯示在文字的左側，此時應給<h2>標記添加一些填充留白，以為背景讓出擺放的位置。然后給背景圖片進行適當的定位，使之顯示到合適的位置。最后給元素添加一些邊框、字體等屬性，CSS代碼如下：任務2網頁中的全圖排版任務實現<style> ul,li{ margin:0;padding:0;list-style:none; } .layout{ width:876px; margin:20pxauto; } .layouth2{ background:url(images/titlebj.jpg)no-repeatleftcenter; line-height:2em; padding-left:66px; font-family:MicrosoftYahei; border-bottom:solid#31C4F91px; letter-spacing:0.8em; } .layoutli{ float:left; border:solid1px#DEF4FC; margin:10px; text-align:center; } .layoutliimg{ width:270px; height:160px; }任務2網頁中的全圖排版最終效果任務描述任務3多行多列式布局PC上的網站元素越來越多，為使各元素美觀大方的呈現出來，通過需要對頁面進行排版。通常采用多行或多列的方式去復雜頁面進行整體布局，從而使內容井然有序。本任務通過實現如圖9-11所示的多行多列排版布局效果，來學習CSS的背景定位、圖標管理及代碼優化等知識。引入知識點任務3多行多列式布局9.4CSS代碼優化任務3多行多列式布局9.4CSS代碼優化1、網頁中的小圖標管理網頁中的小圖標通常是UI設計師為提升網頁美觀度而添加的網頁元素，通常是一種視覺設計上的美化，一般設計得比較小巧精細，完成此部分的網頁效果時，通常使用背景圖片進行背景定位來輔助完成。通常會將這些小圖標收集起來，用圖像處理工具添加在一張圖片上，并有明確的尺寸，需要用到各個小圖標時，再進行精確定位即可定位到指定的圖標了。任務3多行多列式布局9.4CSS代碼優化2、增加CSS代碼重用率主要的代碼的改進方法是使用群組選擇器，將大部分的公共代碼進行集合在群組中，同時也可以使用CSS覆蓋，得到代碼的重用3、容器高度不擴展的問題在制作CSS網頁過程中，在默認情況下，容器的高度默認情況下，會隨著容器的內容進行自動擴展，但在CSS布局中常常會碰到容器不擴展的問題。可以在子容器的最末處添加了一個清除浮動的div容器<divclass="clear"></div>任務3多行多列式布局任務實現（1）創建HTML文件，添加一個固定寬度、頁面居中的主容器<div>標記，作為全頁的框架，其class為content。（2）仔細觀察任務效果圖，最外層的主容器是固定寬度的，再確定容器中整體的布局結構。本任務可采用兩種不同的方式布局，第一種可以采用三列式、固定寬度的布局，再在每一列中分成多行；第二種可以采用右側方塊固定，左側4個方塊固定寬度并自由浮動的布局。（3）在content所在div中，添加5個<div>標記，并分別設置類名稱為service、about、info、resource、news，為優化代碼，將5個方塊的公共代碼抽出來，放入box類中，主要包括邊框、浮動等屬性，完成div布局元素的HTML代碼（4）創建CSS樣式表，為類選擇器設置相關布局屬性進行定位，其CSS樣式代碼如下：.content{width:990px;margin:0auto;padding:10px025px0;background:#fff;}.box{float:left;border:solid1px#e9e9e9;}.service{width:238px;height:233px;}.about{width:488px;height:233px;margin:010px;}.news{width:238px;height:428px;float:right;}.info{width:238px;height:183px;margin:10px010px0;}.resource{width:488px;height:183px;margin:10px;}任務3多行多列式布局任務實現（5）接下來完成每個盒子公共部分的效果，主要體現在標題欄基本相同，此處采用圖標管理，將圖標放在一張圖片上，設置相同的背景圖片，主要的CSS代碼如下：/*每個盒子公共部分的CSS*/.box{float:left;border:solid1px#e9e9e9;}.box.top{height:32px;position:relative;border-bottom:solid1px#9ab1b8;}.box.toph2{width:70px;height:15px;margin:10px000;padding:00035px;border-right:solid1px#7c8d90;background:url("../img/icon.gif")no-repeat;overflow:hidden;float:left;font:normal14px"微軟雅黑";color:#37585e;line-height:15px;}.box.topa{width:30px;height:15px;background:url("../img/icon.gif")no-repeat0-105px;overflow:hidden;display:block;position:absolute;top:8px;right:20px;text-indent:-999em;}.box.topa:hover{background:url("../img/icon.gif")no-repeat0-120px;}任務3多行多列式布局任務實現（6）在每個不同的方塊中對應應用h2、a、ul、li等標記做好元素的結構，完成的HTML（7）在每個不同的方塊中，利用各自的類來定位不同的背景位置，設置好圖標的精確位置，再對各個部分的內容進行細節設計，具體CSS代碼（8）此時在瀏覽器中瀏覽效果時，發現內容區域背景顏色并不是白色，此問題是由于外層容器content的高度未能實現自動擴展，在HTML結構中添加一個清除浮動即可解決此問題。謝謝模塊十使用CSS3美化網站元素《HTML5+CSS3任務驅動教程》目錄任務一任務二任務三用CSS3設計網站導航用CSS3美化表格用CSS3美化表單任務描述任務1用CSS3設計網站導航網站導航是網站中最重要的元素，也是網站提供給用戶簡便、快捷的訪問內容的入口，幫助用戶快速地找到網頁中的內容。從形式上看，網站導航主要分橫向導航、縱向導航、下拉及多級菜單導航等形式。引入知識點任務1用CSS3設計網站導航10.1CSS3背景漸變及陰影10.2CSS超鏈接樣式任務1用CSS3設計網站導航10.1CSS3背景漸變及陰影1、CSS3漸變CSS3漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。以前，你必須使用圖像來實現這些效果。但是，通過使用CSS3漸變，你可以減少下載的時間和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。CSS3定義了兩種類型的漸變（gradients）：線性漸變（LinearGradients）-向下/向上/向左/向右/對角方向徑向漸變（RadialGradients）-由它們的中心定義本文主要介紹線性漸變的應用。為了創建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色，其語法格式為：background:linear-gradient(direction,color-stop1,color-stop2,...);任務1用CSS3設計網站導航10.1CSS3背景漸變及陰影2、CSS3陰影陰影在CSS3中可以應用在盒狀元素的邊框和文字上，就像圖片的陰影效果一樣。一般可以分為box-shadow盒子陰影和textshadow文字陰影兩類。例如CSS3的box-shadow可以寫做：box-shadow:ApxBpxCpx#xxx;Apx指定了水平陰影的距離，Bpx為垂直陰影的距離，Cpx為模糊的距離，#xxx表示陰影的顏色。例如：box-shadow:5px10px10px#999;即可為盒狀元素產生陰影。任務1用CSS3設計網站導航10.2CSS超鏈接樣式HTML文檔最大的特點是，通過超鏈接打破了傳統的一般從上至下的閱讀順序。整個網站可以由超鏈接串連而成，無論從首頁到每個欄目，還是進入其他網站都由無數超鏈接來實現頁面跳轉。CSS對鏈接的樣式控制主要通過偽類來實現，鏈接的特殊性在于能夠根據它們所處的狀態來設置它們的樣式，鏈接的四種狀態：a:link-普通的、未被訪問的鏈接a:visited-用戶已訪問的鏈接a:hover-鼠標指針位于鏈接的上方a:active-鏈接被點擊的時刻超鏈接的四種狀態控制，為我們的鏈接樣式設計提供了良好的接口，特別是通過鼠標經過時的鏈接樣式設計，可以實現豐富的交互效果，接下來在任務中的導航設計即可體會到其中的好處。任務1用CSS3設計網站導航任務實現（1）在DreamweaverCC中創建一個空白創建一個HTML5頁面，保存為index.html，為使HTML簡潔，直接使用<a>標記進行塊狀化對每一個導航項進行浮動布局，并使用一個<div>容器作為總容器居中顯示。HTML結構如下： <divclass="nav"> <ahref="#">首頁</a> <ahref="#">學院概況</a> <ahref="#">管理機構</a> <ahref="#">教學部門</a> <ahref="#">招生就業</a> <ahref="#">創新創業</a> <ahref="#">教輔部門</a> <ahref="#">教輔部門</a> </div>任務1用CSS3設計網站導航任務實現（2）接下來設計CSS樣式，首先將div容器進行固定，居中顯示，再完成導航的布局，因為<a>標記是行間元素，一般無法實現布局效果，所以需要對<a>標記進行display:block塊狀化，這樣<a>標記具有了盒模型的特性，并可以進行浮動定位。（3）給鏈接添加一些文本、字體屬性，為有更好的顯示效果，為整個導航條添加背景漸變、陰影、圓角效果，添加漸變時，如要考慮到不同瀏覽器內核問題，需要針對不同內核的前綴，對應添加樣式，CSS代碼任務1用CSS3設計網站導航任務實現（4）添加鼠標經過超鏈接時的a:hover效果增強交互性，這里可以設置變換背景顏色等效果，完成后在瀏覽器中預覽其效果，效果見圖10-2所示。瀏覽時若無法顯示出CSS3的效果，請更換最新版的瀏覽器測試其效果。任務描述任務2用CSS3美化表格表格作為一種非常特殊而實用的數據表達方式，是網頁中經常使用的元素，一般用來顯示從后臺讀取出的數據，也可以用表格進行布局操作。同其他HTML標記一樣，我們也可以使用CSS對表格進行美化，例如制作細線表格、隔行變色表格、鼠標經過時變色的表格等。本任務主要通過使用CSS來控制表格的樣式，完成一個“隔行變色”的表格效果。表格數據展示效果如圖10-3所示。引入知識點任務2用CSS3美化表格10.3HTML表格任務2用CSS3美化表格10.3HTML表格1、表格相關的標記表格由<table>標記來定義。每個表格均有若干行（由<tr>標記定義），每行被分割為若干單元格（由<td>標記定義）。字母td指表格數據（tabledata），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。除此之處，還有幾個專用標記，如<caption>定義表格的名稱，<thead>定義表格的表頭，<tbody>定義表格的主體，<th>定義表頭的單元格，這些標記都有各自的語義。在應用表格排版時，應充分使用各個標記之間的嵌套來減少CSS類的定義，提升代碼的可閱讀性。2、CSS3中的nth-child()選擇器表格往往用來顯示多行的數據，每一行的位置都是平等的，若要設置其中某一行的樣式，不是那么方便。如要本次任務中要設置隔行變色，涉及到基數行和偶數行的樣式不同的問題。CSS3中的nth-child選擇器為此提供了便利，:nth-child(n)選擇器匹配屬于其父元素的第N個子元素，不論元素的類型，其語法格式為：:nth-child(n|even|odd|formula)，各參數的作用見表所示。除IE8及更早的版本以外，所有主流瀏覽器均支持:nth-child()選擇器。任務2用CSS3美化表格10.3HTML表格3、hover選擇器在前面一個任務中，鼠標經過超鏈接時，使用:hover在鼠標移到鏈接上時添加的特殊樣式。其實::hover選擇器可用于所有元素，不僅是鏈接。所有主流瀏覽器都支持:hover選擇器。做表格隔行變色，高亮顯示時，可以通過設置CSS中的tr:hover偽類選擇器達到效果，一個表格中，要求是當鼠標滑過每一行時，該行就有高亮顯示，就是在表格里面的tr加上一個hover樣式就行，例如tr:hover{background:yellow;}，這樣可以更換行的背景色，但是如果給td加上了背景色，tr:hovertd{...}這樣才能出現背景色的變換效果。任務2用CSS3美化表格任務實現（1）創建一個空白HTML5頁面，在標題處輸入“CSS3表格美化”，保存為index.html。充分選用表格的語義化標記，進行表格內容的結構定義，主要包括表格的標題、表頭、主體等任務2用CSS3美化表格任務實現（2）為顯示更加直觀，本任務選用內部樣式表的方式編寫CSS代碼，直接在<head>中寫入<style>標記來編寫CSS，為使代碼簡潔，本任務直接使用標記選擇器來控制表格各元素的屬性。（3）設置表格的邊框，表格的邊框主要是對table、td、th這三個標記進行設置，table負責表格外邊框，對重復的線條，使用border-collapse:collapse屬性進行重合，適當設置一些內容的填充，表格會按所在單元格的內容自動擴充容器而占據寬度。（4）設置表頭的背景顏色，此處有兩種設置方法，一種是對th進行設置，一種是對thead設置。顯然thead是外層元素，表示整個表頭，選擇thead更加合適一些。（5）設置隔行變色效果，注意此處針對的行，是表格主體內容的行，因此選擇器應該選擇tbody下面的偶數個tr進行樣式設計，代碼格式為：tbodytr:nth-child(even){}。任務2用CSS3美化表格任務實現（6）設置鼠標經過時，高亮顯示效果，此時使用hover偽類，即可方便實現，代碼格式為：tbodytr:hover｛｝。最后給元素添加字體、文本等屬性，CSS代碼如下：<style> caption{/*設置表格標題的樣式*/ font-family:"黑體"; font-size:1.6em; line-height:1.8em; } table{ border:solid4px#829B7E; } td,th{ border:dashed1px#829B7E; text-align:center; } table,td,th{ border-collapse:collapse;/*將邊框進行重合*/ } td,th{ padding:10px20px; } thead{ background:#D7FBDF } tbodytr:nth-child(even){ background:#eee;/*對表格內容區域設置偶數行變色*/ } tbodytr:hover{ background:#033805;/*鼠標經過時高亮顯示*/ color:#fff; }</style>任務2用CSS3美化表格任務實現（7）在瀏覽器中瀏覽網頁效果，效果如圖10-4所示，若部分CSS3的效果無法顯示，請使用新版的瀏覽器測試。任務描述任務3用CSS3美化表單表單(form)在功能型網站中，是網頁瀏覽者與網站服務器之間進行信息傳遞的重要工具，也是網站交互中重要的元素。在網頁中，小到搜索框，大到注冊表單，用戶控制面板，都需要使用表單及表單元素進行設計。用戶在網頁上進行注冊、登陸、留言等操作時，都是通過表單向網站數據庫提交或讀取數據的。本任務中，我們通過模仿QQ注冊表單頁面，來學習CSS3對表單的美化方法，瀏覽效果如圖10-5所示，部分交互效果可通過網址在QQ官方網站瀏覽。引入知識點任務3用CSS3美化表單10.4CSS屬性選擇器任務3用CSS3美化表單10.4CSS屬性選擇器CSS選擇器中，比較常用的是標記選擇器、類選擇器、ID選擇器、偽類選擇器等，而屬性選擇器是一種特殊類型的選擇器。屬性選擇器可以指定具有特定屬性的HTML元素樣式，具有特定屬性的HTML元素樣式不僅僅是class和id。例如，給表單元素設置樣式時，可以通過以下代碼設置相同類型的元素，但擁有的屬性不同的CSS樣式：任務3用CSS3美化表單任務實現（1）創建HTML文件，添加布局元素，左側放圖片，右側放表單，并保持一定的距離。（2）在右側的表單中，加入各表單元素，主要有文本輸入框、密碼框、下拉列表、電話號碼輸入框，以及提交按鈕，主要的HTML代碼如下：

<divclass="left"> <imgsrc="01-4.jpg"/> </div> <divclass="zc"> <h1>歡迎注冊QQ</h1> <h3>每一天，樂在溝通。</h3> <form> <p><inputtype="text"placeholder="昵稱"autofocus="autofocus"/></p> <p><inputtype="password"placeholder="密碼"/></p> <p> <select> <option>+86</option> <option>中國+86</option> <option>中國香港特別行政區+852</option> <option>中國澳門特別行政區+853</option> </select> <inputtype="tel"placeholder="手機號碼"/></p> <p><inputtype="submit"value="立即注冊"/></p> </form> </div>任務3用CSS3美化表單任務實現（3）編寫CSS樣式，首先可以編寫布局控制好頁面，及浮動效果，然后對表單元素進行樣式設計，此處可先寫公共的樣式，即所有元素都具有的外觀，這里有兩種類型，一種是input，一種是select，可合并在一組來寫，屬性主要有寬度、高度、行高、填充、圓角、邊框、字體大小等。（4）下拉列表及電話號碼輸入框，因為要處同一行，所以需要進行浮動，此時，對select元素及input[type='tel']這兩個元素分別設置不同的寬度及浮動。（5）對提交按鈕進行樣式設計，采用屬性選擇器input[type='submit']，因提交按鈕沒有邊框和填充，因此需要給它添加一點寬度，這樣才能與上面的元素寬度對齊，并給提交按展示設置背景顏色、文字顏色、外邊距，同時需要清除浮動（因上面的元素進行了浮動）。（6）給所有表單元素input和select，使用偽類:hover和:focus添加交互效果，主要設置其邊框顏色等。注意：:focus選擇器用于選取輸入獲得焦點的元素，此屬性之前較少使用，主要用在表單元素中。最后，對一些細節的字體、寬度、邊距等做一些細節設置，完成CSS代碼任務3用CSS3美化表單任務實現（8）完成后在瀏覽器中瀏覽效果，若有沒有達到的效果，再次進行修正，最終瀏覽效果如圖10-6所示。謝謝模塊十一綜合案例具體任務學校網站頁面設計具體任務學校網站頁面設計本任務設計一個完整的學校網站頁面，包括網站和網頁的建立、CSS樣式的設計和網頁相關信息功能的設計，網頁效果如圖所示。我們能夠清晰地看到頁面的整體結構分布，其頂部為導航信息欄，中間是關于學校的相關介紹及學校、學院的最新消息展示等，底部為網站信息、版權聲明等內容。整個頁面的設計涵蓋了本書各個模塊的知識，通過實現本任務，可以較好地將理論知識轉化為實踐能力。任務實現學校網站頁面設計（1）啟動HBuilderX軟件，執行“文件”→“新建”命令，輸入站點名稱和本地站點文件夾路徑，單擊“保存”按鈕即可成功建立一個名稱為“學校網站”的站點任務實現學校網站頁面設計（1）啟動HBuilderX軟件，執行“文件”→“新建”命令，輸入站點名稱和本地站點文件夾路徑，單擊“保存”按鈕即可成功建立一個名稱為“學校網站”的站點學校網站文件夾下包含網站的index.html主頁文件、course.html子頁文件，以及CSS和images兩個文件夾，分別用于存放網站需要的CSS樣式文件和圖片文件。任務實現學校網站頁面設計（2）建立CSS樣式文件，如圖所示。

編輯層級樣式表內容，然后保存到CSS文件夾下，方便整體管理網站的代碼。任務實現學校網站頁面設計（3）導航的代碼設計與分析。①導航頁面設計的代碼如下：<divclass="header"><divclass="header-top"> <divclass="container"> <divclass="detail"> <ul> <li><iclass="glyphiconglyphicon-earphone"aria-hidden="true"></i>+66666666666</li> <li><iclass="glyphiconglyphicon-time"aria-hidden="true"></i>周一到周五9:00到18:00</li> </ul> </div> <divclass="indicate"> <p><iclass="glyphiconglyphicon-map-marker"aria-hidden="true"></i>學校路666號</p> </div> <divclass="clearfix"></div> </div></div><divclass="container"> <navclass="navbarnavbar-default"> <divclass="container-fluid"> <!---Brandandtogglegetgroupedforbettermobiledisplay---> <divclass="navbar-header"> <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"> <spanclass="sr-only">Togglenavigation</span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <divclass="navbar-brand"> <h1><ahref="index.html">學校<span>主頁</span></a></h1> </div> </div> <!--Collectthenavlinks,forms,andothercontentfortoggling--> <divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"> <navclass="link-effect-2"id="link-effect-2"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="index.html"><spandata-hover="Home">主頁</span></a></li> <li><ahref="about.html"><spandata-hover="About">關于我們</span></a></li> <li><ahref="services.html"><spandata-hover="Services">提供服務</span></a></li> <li><ahref="projects.html"><spandata-hover="Projects">計劃與安排</span></a></li> <li><ahref="courses.html"><spandata-hover="Courses">課程</span></a></li> <li><ahref="codes.html"><spandata-hover="Codes">資源庫</span></a></li> <li><ahref="contact.html"><spandata-hover="Contact">聯系我們</span></a></li> </ul> </nav> </div> </div> </nav></div></div>任務實現學校網站頁面設計（3）導航的代碼設計與分析。通過使用<ul>和<li>標記，可以實現網站導航欄列表，對于導航中的各個條目，填入需要表現的導航信息，展示導航內容。通過<nav>標記定義導航中的鏈接部分，將導航中的各條目內容轉化為鏈接，實現不同內容主頁的跳轉。任務實現學校網站頁面設計②導航CSS樣式設計的代碼如下：定義<nav>標簽的樣式，通過position，display等屬性控制導航欄內位置顯示等屬性。對于每個條目，通過background屬性，設置整個header內的背景顏色，進一步還可通過padding屬性設置對應區域內邊距。nava{ position:relative; display:inline-block; outline:none; text-decoration:none;}nava:hover,nava:focus{ outline:none;}.header{background:#49872E;}.header-top{padding:1em0;background:#2e353f;}任務實現學校網站頁面設計通過上述代碼可以得到如圖所示的效果。任務實現學校網站頁面設計（4）主體部分的代碼設計與分析。①學校宣傳信息的代碼如下：通過<img>標記設置區塊背景，用于展示學校風景。 <divclass="banner"><div><imgsrc="image/1.jpg"alt=""width="100%"/></div> </div>任務實現學校網站頁面設計②學校宣傳信息底部條幅頁面設計的代碼如下：通過<h4>標記設置標題，通過<i>標記設置文本斜體。<divclass="banner-bottom"> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>師資力量</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-user"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>視頻課程</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-facetime-video"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>圖書館</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-book"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>在線課程</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-blackboard"></i> </div> <divclass="clearfix"></div> </div> <divclass="clearfix"></div></div>任務實現學校網站頁面設計③學校宣傳信息底部條幅CSS設計的代碼如下：.banner-bottom{text-align:center;background:#EDF7FF;