內容簡介
近幾年來，隨著網際網路的迅猛發展，網頁設計技術一直在推陳出新，社會對網頁設計人才的需求也十分旺盛。
目前，大部分製作網頁的方式，都是運用網頁製作軟體，這些軟體的功能相當強大，使用非常方便，同時推陳出新的速度相當地快。無論是哪一款網頁製作軟體，最後都是將所製作的網頁編碼成HTML、CSS、JavaScript。也就是說，從標準化分析，網頁可以分為三個部分：結構、表現和行為。結構化標準語言主要有：HTML超文本標記語言、XML可擴展標記語言和 XHTML可擴展超文本標記語言；表現標準語言主要包括 CSS層疊樣式表；行為標準主要包括對象模型（如 W3C DOM）、ECMAScript 等。網頁設計要符合Web標準實際上就是對網頁的結構、表現與行為進行分離——即XHTML、CSS與JavaScript的分離。
因此，本教材教學內容按照網頁的結構、表現和行為三個方面進行組織：
項目一、項目二、項目三是對網頁設計與製作的概念進行介紹，包括：網頁基礎知識、網站概念、網頁版式設計、網頁配色、網頁設計軟體、網頁標準、網頁版式分析、Dreamweaver的使用、本地站點的建立和管理、XHTML基礎，以及table布局製作網頁的過程，主要以基礎入門為主。
項目四、項目五是對網頁的樣式、行為等進行介紹，包括：網頁模組化分析、CSS的使用、基於W3C標準網頁的製作、JavaScript基礎語法、JavaScript在網頁中的使用、JavaScript表單驗證、JavaScript中正則表達式的使用、jQuery在網頁中的使用，以及利用jQuery在網頁中實現一些動畫效果，主要以提高為主。
項目六是一個完整商業網站設計實例，詳細介紹了網站的設計到製作的全過程，從Photoshop設計到基於W3C標準的模組化製作，以及最終網頁的發布。通過完整的網站製作項目實例，讓學生學會綜合運用各方面知識解決問題，完成項目任務，掌握網頁設計與製作的職業能力。
對於這些技術的學習，本書打破傳統的教材模式，基於“項目導向、任務驅動”的職業教育理念，按照網頁的結構、表現和行為展開教學，通過6個項目的製作過程為主線，力求把知識點融會貫通到項目開發的實踐中，項目完成後通過進一步拓展實訓，讓學生學會獨立分析問題、解決問題的能力；每個項目根據工作要求又進一步分為若干個任務，通過總共18個任務的完成過程，把教學情境融入任務完成的工作情境中，每個任務按照任務提出、任務分析、任務實施、任務小結四個步驟進行介紹，通過任務完成逐漸引入相關知識的學習，讓學生在直觀、有趣的任務完成過程中逐漸學會知識；在教材最後，安排了一個完整網站設計的項目實例，讓學生學會整合運用各方面的知識，掌握全面的職業能力。
本書按照Web標準，分為網頁的結構、表現和行為3個層次展開教學，項目之下分任務，結構清晰、內容翔實、案例豐富、職業特色鮮明。既適合教學，又適合初學者自學；既可以作為計算機相關專業學習網頁設計、Web前端設計的教材，又可以作為網頁設計和製作很好的工具書。
圖書目錄
項目一 網頁設計與製作概述- 1 -
任務一 網頁構成元素分析- 1 -
一、網頁基礎知識- 2 -
二、網頁的發展史- 2 -
三、網頁配色- 4 -
任務二 網頁的版式分析- 6 -
一、認識網站- 7 -
二、網頁設計的常用軟體簡介- 7 -
三、網頁版式設計- 8 -
四、Web標準概述- 9 -
項目拓展實訓- 10 -
項目二 DREAMWEAVER CS4 簡介- 12 -
任務一 本地站點的創建與管理- 13 -
一、初識Dreamweaver CS4- 13 -
二、Dreamweaver CS4的操作環境介紹- 14 -
三、本地站點的規劃- 19 -
一、站點的創建- 20 -
二、站點的管理- 22 -
任務二 創建一個簡單的網頁- 24 -
一、網頁中的圖像- 25 -
二、網頁中的動畫- 25 -
一、新建並保存HTML空白網頁文檔- 25 -
二、編輯HTML文檔- 26 -
三、保存並瀏覽網頁- 28 -
項目拓展實訓- 29 -
項目三 XHTML基礎- 30 -
任務一 網頁文檔的基本結構- 31 -
一、認識HTML- 32 -
二、認識XML- 32 -
三、從HTML轉向XHTML- 32 -
四、XHTML基本語法- 33 -
一、認識網頁文檔聲明DOCTYPE- 33 -
二、認識DTD- 34 -
三、網頁文檔的主體結構- 34 -
四、文檔校驗- 35 -
任務二 頁面內容製作與布局- 37 -
一、區段格式標籤- 37 -
二、字元格式標籤- 38 -
三、列表標籤- 39 -
四、超連結標籤- 40 -
五、圖像標籤- 41 -
六、表格標籤- 41 -
七、表單標籤- 42 -
一、網頁布局結構設計與製作- 43 -
二、網頁素材添加- 45 -
項目拓展實訓- 49 -
項目四 標準化網頁製作- 50 -
任務一 DIV + CSS網頁布局- 51 -
一、什麼是CSS- 51 -
二、CSS有什麼用- 51 -
三、如何使用CSS- 52 -
四、CSS語法- 53 -
五、選擇器- 53 -
六、盒子模型- 54 -
七、background背景屬性- 56 -
八、float浮動屬性- 56 -
九、clear清除屬性- 56 -
一、網頁結構分析- 57 -
二、模組化布局- 58 -
任務二 導航製作及背景BANNER- 62 -
一、ul和li- 62 -
二、border框線屬性- 62 -
三、文本常用屬性- 63 -
一、banner背景製作- 64 -
二、導航製作- 65 -
任務三 列表美化布局- 68 -
一、背景定位- 69 -
二、margin外邊距屬性- 69 -
三、padding內填充屬性- 70 -
一、列表製作- 71 -
二、列表美化- 73 -
任務四 表單美化布局- 74 -
一、表單製作- 76 -
二、表單美化- 77 -
項目拓展實訓（一）- 78 -
項目拓展實訓（二）- 79 -
項目五 JAVASCRIPT和JQUERY套用- 80 -
任務一 JAVASCRIPT表單驗證- 81 -
一、什麼是JavaScript- 81 -
二、JavaScript有什麼用- 81 -
三、如何使用JavaScript- 81 -
四、submit事件- 82 -
五、表單取值- 83 -
六、函式的定義- 84 -
一、表單製作- 84 -
二、利用sumbit事件編寫校驗函式- 85 -
任務二 JAVASCRIPT正則表達式表單驗證- 87 -
一、什麼是正則表達式- 87 -
二、正則表達式語法- 87 -
三、修飾符- 88 -
四、方括弧- 88 -
五、元字元- 89 -
六、量詞- 89 -
七、支持正則表達式的 String 對象的方法- 90 -
八、常用正則表達式- 90 -
一、編寫校驗的數據規則- 91 -
二、利用正則函式校驗數據- 92 -
任務三 JQUERY製作選項卡- 96 -
一、什麼是jQuery- 96 -
二、jQuery的使用- 96 -
三、jQuery API的使用- 97 -
一、製作選項卡布局- 98 -
二、為選項卡增加jQuery行為- 101 -
任務四 JQUERY製作5圖焦點圖- 102 -
一、setInterval的使用- 102 -
一、製作焦點圖布局- 103 -
二、為焦點圖增加jQuery行為- 105 -
項目拓展實訓（一）- 108 -
項目拓展實訓（二）- 109 -
項目六 商業網站製作- 110 -
任務一 使用PHOTOSHOP設計網站首頁布局- 111 -
一、初識Photoshop CS4- 111 -
二、Photoshop CS4的操作環境介紹- 111 -
一、分析網頁類別- 119 -
二、確定網頁的風格- 119 -
三、編排網頁功能結構- 119 -
四、 成品製作- 119 -
任務二 使用PHOTOSHOP完成網站子頁布局- 124 -
一、網頁設計形式與內容相統一- 125 -
二、網頁設計的模組化和可修改性- 125 -
三、網頁設計中網頁命名要簡潔- 125 -
一、確定子頁的風格- 125 -
二、成品製作- 126 -
任務三 製作網站首頁- 130 -
一、首頁結構分析- 130 -
二、模組化布局製作- 131 -
任務四 製作網站子頁- 143 -
一、子頁結構分析- 143 -
二、模組化布局製作- 143 -
任務五 網站發布- 151 -
一、準備web伺服器- 151 -
二、連線web伺服器- 152 -
三、上傳站點- 154 -
四、訪問遠程站點- 155 -
項目拓展實訓- 155 -
