網頁設計項目化教程

《網頁設計項目化教程》是2012年南京大學出版社出版的圖書，作者是胡穎輝、楊小毛、付克影。

基本介紹

• 書名：網頁設計項目化教程
• 作者：胡穎輝、楊小毛、付克影
• ISBN：978-7-305-09487-3
• 定價：28
• 出版社：南京大學出版社
• 出版時間：2012-01
• 開本：16開
• 系列名：高職高專十二五創新型規劃教材

內容簡介

近幾年來，隨著網際網路的迅猛發展，網頁設計技術一直在推陳出新，社會對網頁設計人才的需求也十分旺盛。

目前，大部分製作網頁的方式，都是運用網頁製作軟體，這些軟體的功能相當強大，使用非常方便，同時推陳出新的速度相當地快。無論是哪一款網頁製作軟體，最後都是將所製作的網頁編碼成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 -