第1部分-網(wǎng)頁設(shè)計(jì)基礎(chǔ)

1、第1章 網(wǎng)頁設(shè)計(jì)基礎(chǔ)1.1 WWW的基本概述1.2 網(wǎng)頁設(shè)計(jì)相關(guān)概念1.3 HTML語言1.4 一個(gè)簡單的HTML實(shí)例1.1 WWW的基本概述WWW是World Wide Web的縮寫，是建立在Internet上的信息資源網(wǎng)絡(luò)，具有以下特點(diǎn)：是一種超文本鏈接信息系統(tǒng)是圖形用戶界面，內(nèi)容不局限于文本形式與系統(tǒng)平臺(tái)無關(guān)是分布式的可動(dòng)態(tài)、及時(shí)更新網(wǎng)頁信息采用交互式的瀏覽方式1.1 WWW的基本概述瀏覽Web內(nèi)容是Internet提供的主要服務(wù)，它以HTTP協(xié)議(Hyper Text Transfer Protocol) 在網(wǎng)上傳送以HTML (Hyper Text Markup Language)語

2、言編寫的網(wǎng)頁內(nèi)容，從而進(jìn)行信息交流。 瀏覽器(Brower)是安裝在客戶端用于閱讀WWW上內(nèi)容的軟件。瀏覽器有多種，目前常見的有Microsoft的 Internet Explorer (簡稱IE)與Netscape的Communicator(簡稱NC)。1.1 WWW的基本概述WWW的工作過程 WWW是以HTML和HTTP為基礎(chǔ)的信息瀏覽系統(tǒng)，系統(tǒng)結(jié)構(gòu)采用C/S模式。工作步驟如下： 通過客戶端瀏覽器輸入U(xiǎn)RL向WEB服務(wù)器發(fā)出服務(wù)請求。服務(wù)器解析瀏覽器請求的URL，找到相應(yīng)的網(wǎng)頁文件。網(wǎng)頁中包含JavaScript等腳本，它將隨HTML文檔一起下載到客戶端；若網(wǎng)頁中嵌套有ASP等程序，服務(wù)器

3、將執(zhí)行這些程序并將運(yùn)行結(jié)果以HTML標(biāo)記形式發(fā)送給客戶端。瀏覽器解釋HTML文檔，并顯示結(jié)果。1.1 WWW的基本概述HTTP協(xié)議 超文本傳輸協(xié)議(HTTP)是WEB瀏覽器與WEB服務(wù)器應(yīng)用層之間的通信協(xié)議。 HTTP會(huì)話過程包括4個(gè)步驟： 建立鏈接(connection)。發(fā)送請求(request)。響應(yīng)請求(response)。關(guān)閉鏈接(close)。1.2 網(wǎng)頁設(shè)計(jì)相關(guān)概念1.2.1 統(tǒng)一資源定位器(URL)1.2.2 超鏈接1.2.3 網(wǎng)站1.2.4 網(wǎng)頁1.2.5 主頁1.2.6 靜態(tài)網(wǎng)頁1.2.7 動(dòng)態(tài)網(wǎng)頁1.2.8 網(wǎng)頁布局1.2.9 網(wǎng)頁設(shè)計(jì)原則1.2.1 統(tǒng)一資源定位器(UR

4、L)URL(Uniform Resource Locator )：統(tǒng)一資源定位器 ，即各個(gè)網(wǎng)頁在Internet上的地址。通俗地講，URL就是網(wǎng)址，用于指定Internet資源的位置。URL的結(jié)構(gòu)：http:/網(wǎng)站地址/目錄路徑/文件名稱例子：/qk/83461A/200901/index.shtml 訪問懷化學(xué)院學(xué)報(bào)網(wǎng)站的qk/83461A/200901目錄路徑中的index.shtml 。本節(jié)目錄1.2.2 超鏈接超鏈接：實(shí)現(xiàn)超文本的主要技術(shù)。它指向WWW的資源，如不同站點(diǎn)的網(wǎng)頁、同一站點(diǎn)的其它網(wǎng)頁、網(wǎng)頁的其它段落。作用：在瀏覽網(wǎng)頁時(shí)，如果用鼠標(biāo)單擊超鏈接，就會(huì)跳轉(zhuǎn)到超鏈接所指向的資源，就

5、可以從WEB上下載信息。判斷方法：當(dāng)鼠標(biāo)的光標(biāo)箭頭移動(dòng)到超鏈接上，光標(biāo)會(huì)變成手的形狀。本節(jié)目錄1.2.3 網(wǎng)站網(wǎng)站是一個(gè)存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。網(wǎng)站包含一個(gè)或多個(gè)網(wǎng)頁，這些網(wǎng)頁以一定的形式鏈接在一起，成為一個(gè)整體。 本節(jié)目錄1.2.4 網(wǎng)頁網(wǎng)頁是網(wǎng)站的組成部分，是一張頁面，可以看成是一個(gè)單一體，是網(wǎng)站的一個(gè)元素。 網(wǎng)頁里可以有文本、圖片、聲音、視頻、動(dòng)畫等元素。文本是構(gòu)成網(wǎng)頁的主體。對文本元素的設(shè)計(jì)包括字體、字型、顏色、段落設(shè)置以及定位等。圖片是實(shí)現(xiàn)網(wǎng)頁圖文并茂的主要手段。常用的圖形文件格式有GIF、JPEG、PNG、矢量格式。使用圖片的原則：圖形文件小、數(shù)量少，圖像質(zhì)量高，合理

6、使用動(dòng)畫。本節(jié)目錄1.2.5 主頁主頁，也稱之為首頁。主頁是一個(gè)殊性的網(wǎng)頁，是整個(gè)網(wǎng)站的起始點(diǎn)和匯總點(diǎn)。主頁是瀏覽者瀏覽一個(gè)網(wǎng)站的入口。本節(jié)目錄1.2.6 靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁，指這個(gè)網(wǎng)頁不論在何時(shí)從何地瀏覽，都將顯示相同的畫面和內(nèi)容，且用戶僅能瀏覽，而無法提供信息給網(wǎng)站，讓網(wǎng)站作出響應(yīng) 。靜態(tài)網(wǎng)頁編程語言有HTML、CSS等。 HTML(超文本標(biāo)記語言)是網(wǎng)頁設(shè)計(jì)的基礎(chǔ)，是表示網(wǎng)頁的一種規(guī)范，通過標(biāo)記符來定義網(wǎng)頁內(nèi)容的顯示格式； CSS(層疊樣式表)技術(shù)是HTML功能的擴(kuò)展，使用它能設(shè)計(jì)出更具表現(xiàn)力的網(wǎng)頁。 在網(wǎng)頁中添加相關(guān)的動(dòng)畫，并不代表它不是靜態(tài)網(wǎng)頁。 本節(jié)目錄1.2.7 動(dòng)態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁，

7、是指網(wǎng)頁能夠按照用戶的需求做出動(dòng)態(tài)響應(yīng)。常見的動(dòng)態(tài)網(wǎng)頁有留言板、論壇等。常用的網(wǎng)頁動(dòng)態(tài)/特效腳本語言有JavaScript和VBScript。其中JavaScript是一種基于對象的、動(dòng)態(tài)的、跨平臺(tái)的、具有簡單性與安全性的腳本語言，簡單而功能強(qiáng)大，主要表現(xiàn)在：(1)制作網(wǎng)頁特效；(2)實(shí)現(xiàn)表單數(shù)據(jù)的客戶端校驗(yàn)；(3)窗口動(dòng)態(tài)操作。本節(jié)目錄1.2.8 網(wǎng)頁布局影響網(wǎng)頁質(zhì)量的因素，除了色彩搭配、文字變化、圖片處理外，還有一個(gè)更重要的因素：網(wǎng)頁布局。頁面布局的步驟：(1)網(wǎng)頁構(gòu)思：版面布局要考慮整體風(fēng)格，參考他人網(wǎng)站，粗略勾畫布局輪廓，設(shè)計(jì)多個(gè)方案，擇優(yōu)選擇；(2)初步填充內(nèi)容：將主要內(nèi)容放在網(wǎng)頁中

8、，突出重點(diǎn)；(3)細(xì)化：確定主要元素后，再考慮文字、圖像、表格等頁面元素的排版布局。本節(jié)目錄1.2.8 網(wǎng)頁布局在頁面布局的過程中應(yīng)掌握以下原則：(1)平衡性：文字、圖像等元素的空間占用比例要協(xié)調(diào)、色彩要平衡；(2)對稱性：整體上要對稱，局部上要有所變化；(3)對比性：不同的形狀、顏色要相互對比，會(huì)形成鮮明的視覺效果，如黑白對比、圓形與方形的對比。 (4)疏密度：網(wǎng)頁要做到疏密有度，不要整體一個(gè)樣式。適當(dāng)使用各種排版的技巧制造一些變化的效果。本節(jié)目錄1.2.8 網(wǎng)頁布局常見的布局樣式：(1)T字形：頁面最上方是廣告條，下方左面是菜單，右面顯示頁面內(nèi)容，整體類似英文T字；(2)口字形：上下是廣告

9、條，左邊是菜單，右邊是友情鏈接，中間是頁面內(nèi)容，布局類似一個(gè)方框；(3)對稱形：網(wǎng)頁整體呈上下或左右對稱布局。 (4)海報(bào)形：布局像海報(bào)一樣，中間是一幅很精美的圖片，四周點(diǎn)綴著一些圖片與文字的鏈接。本節(jié)目錄1.2.9 網(wǎng)頁設(shè)計(jì)原則網(wǎng)頁設(shè)計(jì)應(yīng)掌握以下原則：(1)頁面力求精簡：頁面簡潔醒目，顏色不宜過深，圖片不宜過大過多；(2)巧妙安排圖形圖像：利用圖片的視覺效果使頁面生動(dòng)，吸引瀏覽者；(3)善于借鑒信息：參考、應(yīng)用Internet上現(xiàn)成的信息，可使網(wǎng)頁制作收到事半功倍的效果。 (4)內(nèi)容通俗易懂：內(nèi)容豐富，容易查找，易讀易懂。 (5)頁面以小為好，恰到好處：滿足信息量和速度的需求。本節(jié)目錄1.3

10、 HTML語言1.3.1 編輯與運(yùn)行環(huán)境1.3.2 基本語法結(jié)構(gòu)及文檔結(jié)構(gòu)1.3.3 書寫注意事項(xiàng)1.3.1 編輯與運(yùn)行環(huán)境編輯器：HTML沒有自己專用的編輯器，任何文本編輯器都可以作為它的編輯器。在windows自帶的記事本或者可視化網(wǎng)頁制作軟件的代碼視圖中都能夠直接編寫代碼。運(yùn)行環(huán)境：只需WEB瀏覽器，在其地址欄中輸入HTML文件地址，或雙擊本地HTML文件的圖標(biāo)，即可瀏覽網(wǎng)頁內(nèi)容。本節(jié)目錄1.3.2 基本語法結(jié)構(gòu)及文檔結(jié)構(gòu)HTML語法由標(biāo)簽和屬性組成。標(biāo)簽分為單獨(dú)標(biāo)簽和成對標(biāo)簽。單獨(dú)標(biāo)簽語法格式：，如、。成對標(biāo)簽語法格式：網(wǎng)頁內(nèi)容屬性：用來控制HTML標(biāo)簽中網(wǎng)頁內(nèi)容的相關(guān)性質(zhì)。 帶屬性標(biāo)

11、簽的語法為：網(wǎng)頁內(nèi)容 。本節(jié)目錄HTML文檔的基本結(jié)構(gòu) /表示HTML文檔開始 /網(wǎng)頁頭部開始， 網(wǎng)頁標(biāo)題 /網(wǎng)頁標(biāo)題，只能出現(xiàn)一次 /版權(quán)等信息 /網(wǎng)頁頭部結(jié)束 /網(wǎng)頁主體開始 網(wǎng)頁正文 /網(wǎng)頁主體結(jié)束 /表示HTML文檔結(jié)束本節(jié)目錄HTML文檔樹形結(jié)構(gòu)圖HTMLHEADBODYBASETITLEH1PULPEMEMH2AALILIULLILILI一個(gè)簡單案例 歡迎來到我的個(gè)人網(wǎng)頁 網(wǎng)頁內(nèi)容 本節(jié)目錄運(yùn)行效果圖1.3.3 書寫注意事項(xiàng)元素名稱要用“”這對尖括號括起來，并且結(jié)束標(biāo)記總是在開始標(biāo)記前加一個(gè)“/”斜杠。標(biāo)簽與標(biāo)簽之間按一定條件是可以嵌套的。源代碼不區(qū)分大小寫，如、都正確?；剀囨I和空

12、格鍵在運(yùn)行時(shí)不起作用，為使源代碼清晰可讀，建議不同的標(biāo)記之間應(yīng)回車加以區(qū)分。屬性值可寫在一對單引號或雙引號中，也可直接書寫，如。注釋代碼以結(jié)束，便于閱讀。1.4 一個(gè)簡單的HTML實(shí)例1.4.1 網(wǎng)頁的文字顏色屬性text1.4.2 網(wǎng)頁背景顏色屬性bgcolor1.4.3 網(wǎng)頁背景圖屬性background1.4.4 鏈接文字顏色屬性 link,vlink,alink1.4.5 上邊距屬性 topmargin1.4.6 左邊距屬性 leftmargin1.4.7 簡單案例1.4.1 網(wǎng)頁的文字顏色屬性texttext屬性可以改變整個(gè)頁面默認(rèn)文字的顏色，在沒有對文字顏色進(jìn)行局部定義時(shí)，該屬性對

13、頁面中所有文字產(chǎn)生作用?；菊Z法：顏色表示方式有：十六進(jìn)制值、十進(jìn)制RGB值、英文顏色名稱。如紅色為red或者#ff0000。 本節(jié)目錄1.4.2 網(wǎng)頁背景顏色屬性bgcolorbgcolor屬性用來設(shè)置網(wǎng)頁的背景顏色?；菊Z法：顏色的取值與text類似。本節(jié)目錄1.4.3 網(wǎng)頁背景圖屬性backgroundbackground屬性用來設(shè)置網(wǎng)頁的背景圖片?；菊Z法：文件名：盡量用英文或拼音來表示，避免多語言國際化問題。本節(jié)目錄1.4.4 鏈接文字顏色屬性link,vlink,alink超鏈接文字的顏色屬性共有3個(gè)link屬性：表示未訪問過的超鏈接文字的顏色；alink屬性：表示活動(dòng)的超鏈接文字的顏色；vlink屬性：表示已訪問過的超鏈接文