網頁設計與製作：HTML+CSS+JavaScript（簡體書）

高等職業教育專業教學資源庫建設項目是教育部、財政部為深化高等職業教育教學改革，加強專業與課程建設，推動優質教學資源共建共享，提高人才培養質量而啟動的國家級高職教育建設項目。軟件技術專業（項目編號：2011-1-4）於2011年8月被教育部確定為高等職業教育專業教學資源庫年度立項及建設專業。《高等職業教育專業教學資源庫建設項目規劃教材：網頁設計與製作（HTML+CSS+JavaScript）》是高等職業教育專業教學資源庫建設項目“網頁設計與製作”課程的配套教材，是按照高職高專軟件技術專業人才培養方案的要求，總結近幾年國家示範性高職院校軟件技術專業教學改革經驗編寫而成的。
《高等職業教育專業教學資源庫建設項目規劃教材：網頁設計與製作（HTML+CSS+JavaScript）》採用模塊化的編寫思路，將HTML語言、CSS樣式、JavaScript腳本三方面的學習內容分為Web站點的配置與發佈、HTML靜態網頁設計、HTML高級應用、css的應用、JavaScrrpt編程5個教學單元和14個教學任務。
每個單元通過引例陳述引出單元的教學核心內容，明確教學任務。每個任務的編寫分為任務陳述、知識準備、任務實施、任務拓展、項目實訓5個環節。
《高等職業教育專業教學資源庫建設項目規劃教材：網頁設計與製作（HTML+CSS+JavaScript）》結構合理，內容豐富，實用性強，可以作為計算機類專業、商務類專業、藝術設計類專業的教學用書，也可以作為相關專業從業人員的自學用書。
《高等職業教育專業教學資源庫建設項目規劃教材：網頁設計與製作（HTML+CSS+JavaScript）》提供數字課程的學習，獲取相關教學資源，進行自主學習及交流活動。具體登錄使用方法見書後“鄭重聲明”頁。

《高等職業教育專業教學資源庫建設項目規劃教材?高等職業教育軟件技術專業教學資源庫:網頁設計與制作(HTML+CSS+JavaScript)》結構合理，內容豐富，實用性強，可以作為計算機類專業、商務類專業、藝術設計類專業的教學用書，也可以作為相關專業從業的自學用書。

單元1Web站點的配置與發佈
引例描述
任務1配置Web站點
任務陳述
知識準備
1.1網絡基本概念
1.1.1Internet
1.1.2WWW服務
1.1.3域名
1.1.4lP地址
1.1.5統一資源定位符
任務實施
1.實施思路與方案
2.安裝fIS
3.測試IIS
4.配置Web站點
任務拓展
1.虛擬的概念
2.通過虛擬搭建站點
項目實訓企業網站的配置
任務2發佈Web站點
任務陳述
知識準備
1.2網頁與網站
1.2.1網頁與網站的相關概念
1.2.2網頁與網站的基本要素
任務實施
1.實施思路與方案
2.使用“記事本”編寫一個簡單的HTML頁
3.用IIS測試、發佈Web站點任務拓展
1.編寫HTM文件的注意事項
2.認識DreamweaverCS5界面
3.使用虛擬實訓平臺進行測試
4.域名與空間
項目實訓免費域名的註冊與空間申請
單元小結

單元2HTML靜態網頁設計
引例描述
任務1文字段落與圖片的設置
任務陳述
知識準備
2.1HTML的基本概念
2.1.1HTML簡介
2.1.2HTML的結構
2.1.3HTML的標簽
2.2、與標簽
2.2.1標簽
2.2.2標簽
2.2.3標簽
2.3文字與段落
2.3.1標題標簽
2.3.2換行標簽

2.3.3字體標簽
2.3.4段落標簽
2.3.5水平線標簽
2.4標簽
任務實施
1.實施思路與方案
2.HTML的基本結構文檔編寫
3.個人信息介紹頁面的圖文混排
4.其他頁面HTML代碼編寫任務拓展
1.特殊字符
2.使用Dreamweaver創建與保存網頁
3.頁面屬性設置
4.網頁的基本排版
項目實訓數字油畫藝術作品展示頁面編寫
任務2頁面布局
任務陳述
知識準備
2.5列表
2.5.1無序列表標簽
2.5.2有序列表標簽
2.5.3嵌套列表
2.5.4定義列表標簽、、
2.6表格
2.6.1定義表格的基本語法
2.6.2表格標簽的屬性
2.6.3表格的標題標簽和表頭標簽
2.6.4表格的邊框顯示狀態
2.6.5設置分隔線的顯示狀態
2.6.6表格行的設置
2.6.7單元格的設置
任務實施
1.實施思路與方案
2.HTML基本文檔與表格的編寫
3.網站Logo、Banner與版權信息代碼的編寫
4.列表導航代碼的編寫
任務拓展
1.表格的嵌套
2.Dreamweaver中表格的控制
項目實訓運用表格嵌套完成
個人介紹頁面
任務3超鏈接的使用
任務陳述
知識準備
2.7超鏈接
2.7.1超鏈接的概念
2.7.2超鏈接標簽
2.7.3鏈接路徑
2.7.4書簽鏈接
2.7.5圖像的熱區鏈接
任務實施
1.實施思路與方案
2.使用表格佈局與設置超鏈接
製作書法作品頁面
3.
……
單元3HTML高級應用
單元4CSS的應用

4.頁眉和頁腳
頁眉指的是頁面上端的部分。有的頁面劃分得比較明顯，有的頁面則沒有明確的區分頁眉或者干脆沒有頁眉。
頁眉的風格一般要求與頁面的整體風格保持一致。一個富有個性特色的頁眉將和網站標志一樣起到標識的作用。由于頁眉所處的位置可以吸引瀏覽者較多的注意力，因此其作用主要是定義頁面的主題，如站點的名稱多數都顯示在頁眉里，這樣瀏覽者能很快知道這個站點是什么內容。頁眉是整個頁面設計的關鍵，它將涉及其后更多的設計和整個頁面的協調性。在頁眉中常放置含有站點名稱的圖片、標志、網站宗旨和廣告語等，如圖1—22所示。
頁腳和頁眉相呼應。頁眉一般是放置站點主題的地方，而頁腳則一般用來放置聯系信息、版權信息等。
5.導航欄
導航欄既是網頁設計中的重要部分，又是整個網站設計中的一個較獨立的部分。一般來說，網站中的導航欄在各個頁面中出現的位置比較固定，而且風格也較為一致。導航欄的位置可以對網站的結構與頁面的整體布局起到舉足輕重的作用。
導航欄一般有4種常見的顯示位置：頁面左側、右側、頂部和底部。有的網站在同一個頁面中運用了多種導航方式，如有的在頂部設置了主菜單，而在頁面的左側又設置了折疊式的菜單，同時又在頁面的底部設置了多個超鏈接，這樣便增強了網站的可訪問性。當然，導航欄在頁面中出現的次數并非越多越好，而是要合理地加以運用，使頁面達到總體的協調一致。圖卜22所示為一個典型的網站頁眉與導航欄。
6.文本和圖片
文本是網頁傳遞信息的主要載體，文本不僅傳遞速度快，而且還可以設置其大小、顏色、段落及層次等屬性，風格獨特的網頁文本會給瀏覽者帶來賞心悅目的感受。
相對于文本來說，圖像顯得更加生動直觀，可以給人較強的視覺沖擊，因此使用圖像可以使網頁更具吸引力。圖像在頁面中充當各種角色，網站標志、網頁背景和鏈接等都能使用圖像，而且圖像還可以傳遞一些文字難以表達的信息。
7.多媒體
在網頁中可以使用的多媒體對象主要包括Flash動畫、Flash按鈕、FIash文本、Java小程序、音頻和視頻等。應用多媒體對象可以增強瀏覽者的視覺和聽覺感受，使網頁的內容顯得更加豐富，表達信息的手段也變得更為動態和立體化。圖1—23所示為綜合的多媒體網頁（國際知名品牌的化裝品、服裝、鞋等網站），圖1—24為視頻新聞頁面中的視頻部分（網絡上還有流媒體的電影、連續劇、視頻教程等）。