第1章網(wǎng)頁(yè)設(shè)計(jì)概述1.1認(rèn)識(shí)網(wǎng)頁(yè)1.2網(wǎng)頁(yè)和網(wǎng)站1.3網(wǎng)頁(yè)設(shè)計(jì)1.4網(wǎng)頁(yè)的其他操作1.1認(rèn)識(shí)網(wǎng)頁(yè)1.1.1網(wǎng)頁(yè)是什么

“網(wǎng)頁(yè)”是什么，平常所說(shuō)的“新浪”、“搜狐”、“網(wǎng)易”等，即是俗稱(chēng)的“網(wǎng)站”。而訪問(wèn)這些網(wǎng)站的時(shí)候，最直接訪問(wèn)的就是“網(wǎng)頁(yè)”了。這許許多多的網(wǎng)頁(yè)就組成了整個(gè)站點(diǎn)，也就是網(wǎng)站。從中可以看到網(wǎng)頁(yè)和網(wǎng)站之間的密切關(guān)系。網(wǎng)頁(yè)是一種網(wǎng)絡(luò)信息傳遞的載體。這種媒介的性質(zhì)和日常的“報(bào)紙”、“廣播”、“電視”等傳統(tǒng)媒體是可以相提并論的。在網(wǎng)絡(luò)上傳遞的相關(guān)信息，比如文字、圖片甚至多媒體音影，都是在網(wǎng)頁(yè)中的存儲(chǔ)，瀏覽者只需要通過(guò)瀏覽網(wǎng)頁(yè)，就可以了解到相關(guān)信息了。下一頁(yè)

返回1.1認(rèn)識(shí)網(wǎng)頁(yè)1.1.2網(wǎng)頁(yè)是如何形成的

網(wǎng)頁(yè)是由一些部件組成的，知道這些部件是做什么的很重要，因?yàn)樵诰W(wǎng)頁(yè)編寫(xiě)或設(shè)計(jì)過(guò)程中，主要的任務(wù)就是為每一個(gè)標(biāo)準(zhǔn)的部件選用或編寫(xiě)相應(yīng)的內(nèi)容，這些部件有的能夠在網(wǎng)頁(yè)中直接看到，而有的卻不能在網(wǎng)頁(yè)中直接看到。上一頁(yè)

下一頁(yè)

返回1.1認(rèn)識(shí)網(wǎng)頁(yè)

1.瀏覽者能夠看到的內(nèi)容

(1)主題：一般情況下，瀏覽器在所顯示網(wǎng)頁(yè)窗口的標(biāo)題欄上顯示“主題”。網(wǎng)頁(yè)的真正主題不一定出現(xiàn)在網(wǎng)頁(yè)內(nèi)部，而是有可能作為顯示此網(wǎng)頁(yè)的瀏覽器窗口的標(biāo)題。然而，大多數(shù)網(wǎng)頁(yè)的標(biāo)題表現(xiàn)為屏慕上的文本或圖像，標(biāo)題的作用和在書(shū)本或雜志中的作用一樣，位于網(wǎng)頁(yè)中比較醒目重要的頂部附近，從而給網(wǎng)頁(yè)賦予了名字。

(2)標(biāo)題：瀏覽器在瀏覽網(wǎng)頁(yè)時(shí)通常以較大字體、粗體或者其他的突出顯示類(lèi)型來(lái)顯示標(biāo)題。一個(gè)網(wǎng)頁(yè)可以有很多標(biāo)題，而且標(biāo)題還可以有多達(dá)6層的嵌套深度。

(3)普通文本：是指組成網(wǎng)頁(yè)基本內(nèi)容A.多用途的文本。一般情況下將普通文本中的線和塊當(dāng)作頁(yè)面中的“段落”。上一頁(yè)

下一頁(yè)

返回1.1認(rèn)識(shí)網(wǎng)頁(yè)(4)簽名：通常顯示在網(wǎng)頁(yè)的底部。簽名標(biāo)識(shí)了網(wǎng)頁(yè)的作者，并且常常還包含作者(或者網(wǎng)絡(luò)竹理員)的電子郵件地址，從而使訪問(wèn)者可以發(fā)送有關(guān)此網(wǎng)頁(yè)的評(píng)論或者建議、問(wèn)題等。(5)水平線：用來(lái)裝飾網(wǎng)頁(yè)，它將網(wǎng)頁(yè)分割成邏輯上的幾個(gè)部分。(6)動(dòng)畫(huà)：可以是網(wǎng)頁(yè)中出現(xiàn)的文本或者圖片，不同的是它們以某種方式運(yùn)動(dòng)。圖片可以忽隱忽現(xiàn)或者按照簡(jiǎn)單的動(dòng)作進(jìn)行旋轉(zhuǎn)；而文本既可以忽隱忽現(xiàn)，也可以從屏幕上滾動(dòng)滑過(guò)。(7)超級(jí)鏈接：可以鏈接到很多不同的對(duì)象上去，如其他的網(wǎng)頁(yè)、多媒體文件(動(dòng)畫(huà)、視頻、聲音和外部圖像)、文檔文件、電子郵件地址以及文件或者應(yīng)用程序。鏈接還可以引導(dǎo)至當(dāng)前網(wǎng)頁(yè)的某個(gè)特定的位置。上一頁(yè)

下一頁(yè)

返回1.1認(rèn)識(shí)網(wǎng)頁(yè)

(8)內(nèi)嵌圖像：指那些嵌入網(wǎng)頁(yè)布局中的圖像，它們讓網(wǎng)頁(yè)變得大氣美觀，而且使得網(wǎng)頁(yè)的信息量更大。

(9)圖像地圖：是一些內(nèi)嵌圖像，此圖像的不同區(qū)域下面包含有不同的鏈接，稱(chēng)為熱點(diǎn)區(qū)域。

(10)背景色或樣式：可以是一種單一的顏色，或者是一個(gè)內(nèi)嵌圖像，但是和普通圖像不同的是，它們覆蓋了整個(gè)網(wǎng)頁(yè)頁(yè)面的背景，文本和其他圖像就顯示在其上面。

(11)列表：可以是黑點(diǎn)或按數(shù)字進(jìn)行編號(hào)，或者其他圖形。

(12)表單：訪問(wèn)者可以在其中的空白處填寫(xiě)內(nèi)容，回復(fù)在線注冊(cè)網(wǎng)站，填寫(xiě)個(gè)人信息、發(fā)表言論、問(wèn)卷調(diào)查等。上一頁(yè)

下一頁(yè)

返回1.1認(rèn)識(shí)網(wǎng)頁(yè)

2.瀏覽者看不到的內(nèi)容

(1)鑒定：網(wǎng)頁(yè)文件可以包含多種鑒定信息，包括作者的名字、電子郵件地址，以及一些特殊的編碼，這些編碼可以幫助搜索引擎確定網(wǎng)頁(yè)的主題與內(nèi)容。

(2)注釋?zhuān)哼@是用戶(hù)希望在直接閱讀網(wǎng)頁(yè)的HTML代碼時(shí)能夠看到的文本，在瀏覽器中是看不到的。注釋通常包括HTML文件的結(jié)構(gòu)或者相關(guān)的注意事項(xiàng)。

(3)JavaScript代4i：在HTML文件內(nèi)，JavaScript的語(yǔ)句行可以給網(wǎng)頁(yè)添加一些特殊的動(dòng)態(tài)效果。

(4)JavaApplet：以單獨(dú)的文件存在，這種Java程序模塊可以提高訪問(wèn)者、瀏覽器和服務(wù)器之間的交互能力。比如說(shuō)，Java就非常適合于編寫(xiě)在Web頁(yè)面上玩的交互游戲。

(5)圖像地圖和表單處理代碼：用來(lái)處理圖像地圖和交互表單的程序代碼。上一頁(yè)

下一頁(yè)

返回1.1認(rèn)識(shí)網(wǎng)頁(yè)1.1.3網(wǎng)頁(yè)的瀏覽過(guò)程

(1)用戶(hù)在www客戶(hù)機(jī)上輸入網(wǎng)址，發(fā)出瀏覽網(wǎng)頁(yè)的請(qǐng)求(HTTP請(qǐng)求)；

(2)該請(qǐng)求通過(guò)互聯(lián)網(wǎng)從WWW客戶(hù)機(jī)傳輸?shù)絎WW服務(wù)器；

(3)WWW服務(wù)器接受這個(gè)請(qǐng)求，然后根據(jù)這個(gè)請(qǐng)求找到相關(guān)的網(wǎng)頁(yè)并發(fā)送給用戶(hù)；

(4)這個(gè)網(wǎng)頁(yè)又通過(guò)互聯(lián)網(wǎng)傳輸?shù)絎WW客戶(hù)機(jī)，客戶(hù)機(jī)接受這個(gè)網(wǎng)頁(yè)并將其在瀏覽器上顯示出來(lái)。上一頁(yè)

返回1.2

網(wǎng)頁(yè)和網(wǎng)站(1)擁有眾多的網(wǎng)頁(yè)。(2)擁有一個(gè)主題與統(tǒng)一的風(fēng)格。(3)有便捷的導(dǎo)航系統(tǒng)。(4)分層的欄目組織。(5)用戶(hù)指南和網(wǎng)站動(dòng)態(tài)信息。(6)能與用戶(hù)進(jìn)行雙向交流的欄目。(7)有一個(gè)域名。返回1.3

網(wǎng)頁(yè)設(shè)計(jì)1.3.1網(wǎng)頁(yè)設(shè)計(jì)

1.網(wǎng)頁(yè)設(shè)計(jì)的步驟

(1)草案。新建頁(yè)面就像一張白紙，沒(méi)有任何表格、框架和約定俗成的東西。設(shè)計(jì)人員可以盡可能地發(fā)揮想象力，然后將所想象到的勾勒出一個(gè)草圖。這屬于創(chuàng)造階段，所以不講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只以粗陋的線條勾畫(huà)出創(chuàng)意的輪廓即可。

(2)粗略布局。在草案的基礎(chǔ)上，將需要設(shè)置的功能模塊安排到頁(yè)面上。這時(shí)設(shè)計(jì)人員必須遵循突出重點(diǎn)、平衡協(xié)調(diào)的原則。首先將網(wǎng)站標(biāo)志、主菜單等最重要的模塊放在最顯眼、最突出的位置，然后再考慮次要模塊的位置排放。

(3)確定方案。這是設(shè)計(jì)網(wǎng)頁(yè)布局的重要步驟，是指將粗略布局精細(xì)化、具體化，形成完整的頁(yè)面設(shè)計(jì)方案。下一頁(yè)

返回1.3

網(wǎng)頁(yè)設(shè)計(jì)

2.網(wǎng)頁(yè)表現(xiàn)手法

(1)勻稱(chēng)。

(2)非對(duì)稱(chēng)形式。

(3)對(duì)比。

(4)空白。

(5)圖片解說(shuō)。上一頁(yè)

下一頁(yè)

返回1.3

網(wǎng)頁(yè)設(shè)計(jì)1.3.2網(wǎng)頁(yè)設(shè)計(jì)的流程

1.客戶(hù)需求

2.確定網(wǎng)站的內(nèi)容和主題

3.設(shè)計(jì)頁(yè)面

4.設(shè)計(jì)網(wǎng)頁(yè)動(dòng)畫(huà)上一頁(yè)

返回1.4

網(wǎng)頁(yè)的其他操作1.4.1保存網(wǎng)頁(yè)中的圖片在瀏覽網(wǎng)頁(yè)時(shí)，看到自己喜愛(ài)的圖片，總想將其收藏起來(lái)，以便日后使用。保存網(wǎng)頁(yè)中的圖片步驟很簡(jiǎn)單，具體步驟為：①將鼠標(biāo)移動(dòng)要保存的圖片上，右擊；②在彈出的快捷菜單中選擇“圖片另存為”命令；③在彈出的“保存圖片”對(duì)話框中選擇合適的保存路徑，并對(duì)圖片重新命名，最后單擊確定。下一頁(yè)

返回1.4