網(wǎng)頁(yè)設(shè)計(jì)與制作教程 第一章 網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)

第 1章 網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ) 第 1頁(yè) 本章概述 本章的學(xué)習(xí)目標(biāo) 主要內(nèi)容 本章概述 隨著互聯(lián)網(wǎng)的發(fā)展和普及，電子商務(wù)和電子政務(wù)發(fā)展迅速，人們將互聯(lián)網(wǎng)技術(shù)應(yīng)用到生產(chǎn)、經(jīng)營(yíng)、娛樂(lè)等活動(dòng)中，利用互聯(lián)網(wǎng)開展各種信息服務(wù)，如個(gè)人網(wǎng)上購(gòu)物、企業(yè)形象展示、政府服務(wù)大眾等。網(wǎng)頁(yè)設(shè)計(jì)和制作技術(shù)成為計(jì)算機(jī)專業(yè)一個(gè)相當(dāng)重要的分支。本章介紹網(wǎng)頁(yè)設(shè)計(jì)與制作的基礎(chǔ)知識(shí)，包括網(wǎng)頁(yè)基礎(chǔ)概念、網(wǎng)頁(yè)制作工具和技術(shù)介紹和網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)等。 第 2頁(yè) 本章的學(xué)習(xí)目標(biāo) 了解網(wǎng)頁(yè)與網(wǎng)站的概念 了解靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)概念 了解 了解網(wǎng)頁(yè)制作語(yǔ)言 了解網(wǎng)頁(yè)設(shè)計(jì)工具 掌握網(wǎng)頁(yè)構(gòu)成 第 3頁(yè) 主要內(nèi)容 頁(yè)基礎(chǔ)概念 頁(yè)設(shè)計(jì)制作技術(shù) 頁(yè)設(shè)計(jì)制作工具 頁(yè)設(shè)計(jì)基礎(chǔ) 章小結(jié) 第 4頁(yè) 頁(yè)基礎(chǔ)概念 相互連接的網(wǎng)絡(luò)集合。 蓋全球的信息資源庫(kù)，是由成千上萬(wàn)個(gè)網(wǎng)絡(luò)、上億臺(tái)計(jì)算機(jī)通過(guò)特定的網(wǎng)絡(luò)協(xié)議相互連接而成的全球計(jì)算機(jī)網(wǎng)絡(luò)，其提供資源共享和網(wǎng)絡(luò)通信。 式的信息檢索服務(wù)工具，是 是發(fā)展最快和目前用得最廣泛的服務(wù)。 第 5頁(yè) 網(wǎng)頁(yè)和網(wǎng)站 網(wǎng)頁(yè)與網(wǎng)站的關(guān)系 構(gòu)建 頁(yè)中包含所謂的“超鏈接”，通過(guò)已經(jīng)定義好的關(guān)鍵字和圖形，只要用鼠標(biāo)輕輕一點(diǎn)，就可以自動(dòng)跳轉(zhuǎn)到相應(yīng)的其他文件，獲得相應(yīng)的信息，從而實(shí)現(xiàn)網(wǎng)頁(yè)之間的鏈接。通過(guò)超鏈接連接起來(lái)的一系列邏輯上可以視為一個(gè)整體的頁(yè)面，則叫做“網(wǎng)站”。 網(wǎng)站由域名（ 網(wǎng)站空間、網(wǎng)頁(yè)三部分組成。 網(wǎng)頁(yè)的基本元素 文本：文本是網(wǎng)頁(yè)中最主要的信息載體，瀏覽者主要通過(guò)文字了解各種信息。 圖片：圖片可以使網(wǎng)頁(yè)看上去更加美觀，可以讓瀏覽者更加快速地了解網(wǎng)頁(yè)所要表達(dá)的內(nèi)容。 水平線 、 表格 、 表單 、 超鏈接 、 動(dòng)態(tài)元素 等 第 6頁(yè) 第 7頁(yè) 靜態(tài)網(wǎng)頁(yè) 和 動(dòng)態(tài)網(wǎng)頁(yè) 靜態(tài)網(wǎng)頁(yè) 第 8頁(yè) 靜態(tài)網(wǎng)頁(yè) 和 動(dòng)態(tài)網(wǎng)頁(yè) 動(dòng)態(tài)網(wǎng)頁(yè) 數(shù)據(jù)庫(kù) 數(shù)據(jù)庫(kù)（ 存儲(chǔ)在一起的相關(guān)數(shù)據(jù)的集合，是按照數(shù)據(jù)結(jié)構(gòu)來(lái)組織、存儲(chǔ)和管理數(shù)據(jù)的倉(cāng)庫(kù)。 數(shù)據(jù)庫(kù)管理系統(tǒng) 數(shù)據(jù)定義功能 數(shù)據(jù)操縱功能 數(shù)據(jù)庫(kù)的運(yùn)行管理 數(shù)據(jù)庫(kù)的建立和維護(hù)功能 數(shù)據(jù)庫(kù)的作用 在動(dòng)態(tài)網(wǎng)站建設(shè)中，數(shù)據(jù)庫(kù)發(fā)揮著不可替代的作用。它用于存儲(chǔ)網(wǎng)站中的信息，可以包括靜止的和經(jīng)常需要更換的內(nèi)容。 第 9頁(yè) 第 10頁(yè) 主要內(nèi)容 網(wǎng)頁(yè)基礎(chǔ)概念 網(wǎng)頁(yè)設(shè)計(jì)制作技術(shù) 頁(yè)設(shè)計(jì)制作工具 頁(yè)設(shè)計(jì)基礎(chǔ) 章小結(jié) 網(wǎng)頁(yè)設(shè)計(jì)制作技術(shù) 在 網(wǎng)頁(yè)制作工具較多，大多數(shù)網(wǎng)頁(yè)制作工作都是通過(guò)“所見(jiàn)即所得”的編輯工具完成的。在網(wǎng)頁(yè)制作過(guò)程中，除了頁(yè)面的編輯外，還需要進(jìn)行素材的創(chuàng)作和加工，即圖形和動(dòng)畫制作工具。 第 11頁(yè) ：超文本標(biāo)記語(yǔ)言 )語(yǔ)言。 傳統(tǒng) 是構(gòu)成 主要工具，是用來(lái)表示網(wǎng)上信息的符號(hào)標(biāo)志語(yǔ)言。記” (也叫“標(biāo)簽” )來(lái)指示 式和外觀的文本字符串。 功能的逐漸增多，使得 性、屬性值等內(nèi)容的書寫格式都有嚴(yán)格的規(guī)范，從而提高代碼在各種平臺(tái)下的解析效率。 第 12頁(yè) 網(wǎng)頁(yè)腳本語(yǔ)言 腳本語(yǔ)言 服務(wù)器端腳本語(yǔ)言主要應(yīng)用于各種動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)，用于編寫實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)的網(wǎng)絡(luò)應(yīng)用程序。服務(wù)器端腳本語(yǔ)言必須依賴服務(wù)器端的軟件執(zhí)行。常見(jiàn)的服務(wù)器端腳本語(yǔ)言包括應(yīng)用于 瀏覽器腳本語(yǔ)言區(qū)別于服務(wù)器端腳本語(yǔ)言，是直接插入到網(wǎng)頁(yè)中執(zhí)行的腳本語(yǔ)言。目前應(yīng)用最廣泛的瀏覽器腳本語(yǔ)言包括 標(biāo)準(zhǔn)化的 包括應(yīng)用于微軟 標(biāo)準(zhǔn)化的文檔對(duì)象模型 文檔對(duì)象模型（ 根據(jù) 第 13頁(yè) 動(dòng)態(tài)網(wǎng)頁(yè)編程語(yǔ)言 第 14頁(yè) 動(dòng)態(tài)網(wǎng)頁(yè)編程語(yǔ)言 第 15頁(yè) 動(dòng)態(tài)網(wǎng)頁(yè)編程語(yǔ)言 第 16頁(yè) 動(dòng)態(tài)網(wǎng)頁(yè)編程語(yǔ)言 人主頁(yè)）也是一種跨平臺(tái)的網(wǎng)頁(yè)后臺(tái)技術(shù)，最早由丹麥人 由 一種免費(fèi)的網(wǎng)頁(yè)腳本語(yǔ)言。 多在服務(wù)器端執(zhí)行，通過(guò) 第 17頁(yè) 第 18頁(yè) 主要內(nèi)容 網(wǎng)頁(yè)基礎(chǔ)概念 網(wǎng)頁(yè)設(shè)計(jì)制作技術(shù) 頁(yè)設(shè)計(jì)制作工具 頁(yè)設(shè)計(jì)基礎(chǔ) 章小結(jié) 網(wǎng)頁(yè)設(shè)計(jì)制作工具 網(wǎng)頁(yè)編輯工具 圖形和圖像處理工具 動(dòng)畫設(shè)計(jì)工具 第 19頁(yè) 網(wǎng)頁(yè)編輯工具 網(wǎng)頁(yè)編輯工具主要分為標(biāo)記型和所見(jiàn)即所得型。標(biāo)記型工具常用的是 事本 )、 有尋替換以及無(wú)限制的還原功能。 所見(jiàn)即所得的編輯主流軟件主要是 第 20頁(yè) C 于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁(yè)設(shè)計(jì)軟件。其支持代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來(lái)創(chuàng)作、編寫和修改網(wǎng)頁(yè)，具有強(qiáng)大的功能和簡(jiǎn)便的操作平臺(tái)，是一款所見(jiàn)即所得的網(wǎng)頁(yè)制作軟件。該軟件集網(wǎng)頁(yè)制作、網(wǎng)站管理、程序開發(fā)于一身，可以幫助用戶在同一個(gè)軟件中完成所有網(wǎng)站建設(shè)的相關(guān)工作。 第 21頁(yè) C 第 22頁(yè) 第 23頁(yè) C 菜單 欄 屬性面板 工具面板 文檔編輯 區(qū) 面板組 圖形和圖像處理工具 目前常用的圖形和圖像處理工具主要是 目前使用最為廣泛的專業(yè)圖形圖像處理軟件之一。它捆綁了 夠?qū)崿F(xiàn)各種專業(yè)化的圖像處理及動(dòng)畫的制作等。 第 24頁(yè) C 第 25頁(yè) C 第 26頁(yè) 動(dòng)畫設(shè)計(jì)工具 第 27頁(yè) 是美國(guó)的 月推出的交互式動(dòng)畫設(shè)計(jì)工具，用它可以將音樂(lè)、聲效、動(dòng)畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的、富有創(chuàng)意的網(wǎng)頁(yè)動(dòng)態(tài)效果。 C 第 28頁(yè) C 第 29頁(yè) 第 30頁(yè) 主要內(nèi)容 網(wǎng)頁(yè)基礎(chǔ)概念 網(wǎng)頁(yè)設(shè)計(jì)制作技術(shù) 頁(yè)設(shè)計(jì)制作工具 頁(yè)設(shè)計(jì)基礎(chǔ) 章小結(jié) 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ) 網(wǎng)頁(yè)構(gòu)成分析 網(wǎng)頁(yè)設(shè)計(jì)原則 網(wǎng)頁(yè)版面設(shè)計(jì) 網(wǎng)頁(yè)色彩設(shè)計(jì) 第 31頁(yè) 網(wǎng)頁(yè)構(gòu)成分析 導(dǎo)航條 內(nèi)容版塊 版尾和版權(quán) 第 32頁(yè) 網(wǎng)頁(yè)設(shè)計(jì)原則 一個(gè)好的網(wǎng)站應(yīng)該是內(nèi)容豐富、頁(yè)面干凈、主題突出、欄目導(dǎo)航清晰明了，因此網(wǎng)頁(yè)設(shè)計(jì)應(yīng)注意以下幾個(gè)原則： 用戶優(yōu)先 符合“ 8秒鐘原則” 考慮用戶的軟 /硬件配置 內(nèi)容豐富 著手規(guī)劃、確定特色、鎖定目標(biāo) 首頁(yè)的重要性 欄目的歸類 互動(dòng)性 圖像應(yīng)用技巧、背景底色 免濫用技術(shù)。 第 33頁(yè) 網(wǎng)頁(yè)版面設(shè)計(jì) “口”形布局 “三”形布局 “框架”型布局 第 34頁(yè) 網(wǎng)頁(yè)色彩設(shè)計(jì) 色彩的設(shè)計(jì)原則 網(wǎng)站色彩總的設(shè)計(jì)原則應(yīng)該是“總體協(xié)調(diào)，局部對(duì)比”。主頁(yè)的整體色彩效果應(yīng)該的和諧的，只有局部的、小范圍的地方可以有一些強(qiáng)烈色彩的對(duì)比。在色彩的運(yùn)用上可以根據(jù)主頁(yè)內(nèi)容的需要，分別采用不同的主色調(diào)。 色彩的概念 色彩的冷暖 色彩的輕重 色彩的前進(jìn)與后退 色彩的艷麗與素雅 色彩選配方案 紅色色系、藍(lán)色色系、其他色系 第 35頁(yè) 第 36頁(yè) 主要內(nèi)容 網(wǎng)頁(yè)基礎(chǔ)概念 網(wǎng)頁(yè)設(shè)計(jì)制作技術(shù) 頁(yè)設(shè)計(jì)制作工具 頁(yè)設(shè)計(jì)基礎(chǔ) 章小結(jié) 本章小結(jié) 本章講述了網(wǎng)頁(yè)設(shè)計(jì)