網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ) - 計(jì)算機(jī)學(xué)院-入門級(jí)教程

1、第一章 網(wǎng)頁(yè)設(shè)計(jì)根底胡軍重慶郵電大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院本章的主要內(nèi)容1.1 Internet相關(guān)概念1.2 網(wǎng)頁(yè)設(shè)計(jì)的根本方式1.3 網(wǎng)頁(yè)中的常見元素1.4 網(wǎng)頁(yè)的創(chuàng)作與編輯工具1.5 網(wǎng)頁(yè)制作的根本步驟1.1 Internet相關(guān)概念I(lǐng)nternet(互聯(lián)網(wǎng))是由世界上各種各樣的網(wǎng)絡(luò)互聯(lián)所形成的“網(wǎng)絡(luò)的網(wǎng)絡(luò)，是一個(gè)網(wǎng)際網(wǎng)。它是目前世界上最大的計(jì)算機(jī)通信網(wǎng)絡(luò)，遍布全球，將世界各地各種規(guī)模的計(jì)算機(jī)網(wǎng)絡(luò)連接成一個(gè)整體，從而實(shí)現(xiàn)信息交流和共享。 IP地址 在Internet上連接的所有計(jì)算機(jī)，從大型機(jī)到微型機(jī)都是以獨(dú)立身份出現(xiàn)，稱之為主機(jī)。為了實(shí)現(xiàn)各主機(jī)間的通信，每臺(tái)主機(jī)都必須有一個(gè)惟一的網(wǎng)絡(luò)地址

2、。網(wǎng)絡(luò)地址是一臺(tái)計(jì)算機(jī)惟一的標(biāo)識(shí)，這個(gè)地址就稱為IP(Internet Protocol)地址。域名和域名系統(tǒng) 域名標(biāo)識(shí)了一貫用戶所屬的機(jī)構(gòu)，所使用的主機(jī)或節(jié)點(diǎn)機(jī)。域名的命名方式稱為域名系統(tǒng)，域名必須按ISO有關(guān)標(biāo)準(zhǔn)進(jìn)行。在機(jī)器的地址表示中，從右到左依次為最高域名段，次高域名段等，最左一個(gè)字段為主機(jī)名。例如：在中，最高域名為cn，次高域名為edu，最后一個(gè)域?yàn)閏qupt，主機(jī)名為cs。協(xié)議 網(wǎng)絡(luò)協(xié)議Protocol是一系列通信規(guī)那么的總稱，主要包括用戶數(shù)據(jù)與控制信息的結(jié)構(gòu)和格式，需要發(fā)出的控制信息以及相應(yīng)要完成的操作與響應(yīng)，對(duì)事件實(shí)現(xiàn)順序的詳細(xì)說(shuō)明等三局部?jī)?nèi)容。一種協(xié)議可以定義通過(guò)網(wǎng)絡(luò)傳輸?shù)臄?shù)

3、據(jù)包的格式，包內(nèi)的數(shù)據(jù)區(qū)以及如何對(duì)它們進(jìn)行解釋。顯然，無(wú)論是發(fā)送方還是接收方都必須理解并遵守。因此，協(xié)議的實(shí)質(zhì)就是進(jìn)行通信所使用的語(yǔ)言。對(duì)于網(wǎng)絡(luò)來(lái)說(shuō)，協(xié)議是必不可少的。 WWW WWW，是萬(wàn)維網(wǎng)World Wide Web的英文縮寫。WWW能夠處理文字，圖像，聲音，視頻等多媒體信息。由于它的信息處理能力已經(jīng)遠(yuǎn)遠(yuǎn)超出了處理純文本的范圍，所以它是一個(gè)多媒體的信息系統(tǒng)。并且通過(guò)各種超鏈接，我們可以很方便地從一種信息來(lái)源轉(zhuǎn)到另一種信息來(lái)源。 網(wǎng)頁(yè)網(wǎng)頁(yè)的學(xué)名稱作HTML文件，是一種可以在WWW網(wǎng)上傳輸，并被瀏覽器認(rèn)識(shí)和翻譯成頁(yè)面顯示出來(lái)的文件。HTML的意思那么是“Hypertext Markup La

4、nguage，中文翻譯為“超文本標(biāo)記語(yǔ)言。“超文本就是指頁(yè)面內(nèi)可以包含圖片，鏈接，甚至音樂(lè)，程序等非文字的元素。網(wǎng)頁(yè)就是由HTML語(yǔ)言編寫出來(lái)的。1.2 網(wǎng)頁(yè)設(shè)計(jì)的根本方式手工編碼方式利用可視化工具手工編碼與可視化工具結(jié)合手工編碼方式網(wǎng)頁(yè)是由HTMLHYPER TEXT MARKUP LANGUAGE超文本標(biāo)記語(yǔ)言編碼的文本文檔，設(shè)計(jì)制作網(wǎng)頁(yè)的過(guò)程就是生成HTML代碼的過(guò)程。在WWWWorld Wide Web 開展的初期人們制作網(wǎng)頁(yè)是通過(guò)直接編寫HTML代碼來(lái)實(shí)現(xiàn)的。手工編碼制作網(wǎng)頁(yè)對(duì)網(wǎng)頁(yè)設(shè)計(jì)人員的要求較高，編碼效率低，調(diào)試過(guò)程復(fù)雜，因此，對(duì)大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)人員來(lái)說(shuō)采用這個(gè)方式比較困難。但手工

5、編碼可以靈活地制作出豐富的網(wǎng)頁(yè)效果。利用可視化工具隨著網(wǎng)頁(yè)制作技術(shù)的不斷開展，出現(xiàn)了諸如FrontPage、Dreamweaver等可視化的網(wǎng)頁(yè)編輯工具。利用這些工具人們?cè)诳梢暛h(huán)境下編輯制作網(wǎng)頁(yè)元素，由編輯工具自動(dòng)生成對(duì)應(yīng)的網(wǎng)頁(yè)代碼。如要在網(wǎng)頁(yè)上插入表格，就可以直接在工作區(qū)中繪制表格而不用考慮編碼的規(guī)那么和語(yǔ)法。利用可視化工具編輯網(wǎng)頁(yè)操作簡(jiǎn)單直觀，調(diào)試方便，是群眾化的網(wǎng)頁(yè)編輯方式。但利用可視化工具在制作一些特殊網(wǎng)頁(yè)效果上有一定的局限性。手工編碼與可視化工具結(jié)合編碼和可視化工具結(jié)合是一種比較成熟的網(wǎng)頁(yè)制作方式。具體過(guò)程為：一般的網(wǎng)頁(yè)元素通過(guò)可視化工具編輯制作，一些特殊的網(wǎng)頁(yè)效果通過(guò)插入代碼生成。

6、這種方式效率高、調(diào)試方便而且可以實(shí)現(xiàn)豐富的網(wǎng)頁(yè)效果，但要求設(shè)計(jì)人員既要熟悉HTML語(yǔ)言又能運(yùn)用可視化工具。除了上面三種根本的網(wǎng)頁(yè)設(shè)計(jì)制作方式外，我們還可以通過(guò)修改已有的網(wǎng)頁(yè)代碼生成自己的網(wǎng)頁(yè)。在網(wǎng)頁(yè)編輯制作過(guò)程中具體采用何種方式要根據(jù)個(gè)人的具體情況而定，每必要拘泥于某種固定的模式。1.3 網(wǎng)頁(yè)中的常見元素文本圖象與動(dòng)畫音頻與視頻 超級(jí)鏈接表格表單導(dǎo)航欄其他元素文本文本一直是人類最重要的信息載體與交流工具，網(wǎng)頁(yè)中的信息也以文本為主。與圖象相比，文字雖然不如圖象那樣能夠很快引起瀏覽者的注意，但卻能準(zhǔn)確地表達(dá)信息的內(nèi)容和含義。為了克服文字固有的缺點(diǎn)，人們賦予了網(wǎng)頁(yè)中文本更多的屬性，如字體，字號(hào)，顏色

7、，底紋和邊框等，通過(guò)不同格式的區(qū)別，突出顯示重要的內(nèi)容。此外，用戶還可以在網(wǎng)頁(yè)中設(shè)計(jì)各種各樣的文字列表，來(lái)清晰表達(dá)一系列工程。這些功能都給網(wǎng)頁(yè)中的文本賦予了新的生命力。圖像和動(dòng)畫圖像在網(wǎng)頁(yè)中具有提供信息，展示作品，裝飾網(wǎng)頁(yè)，表達(dá)個(gè)人情調(diào)和風(fēng)格的作用。用戶可以在網(wǎng)頁(yè)中使用GIF，JPEG(JPG)， PNG三種圖象格式，其中使用最廣泛的是GIF和JPEG兩種格式。在網(wǎng)頁(yè)中為了更有效地吸引瀏覽者的注意，許多網(wǎng)站的廣告都做成了動(dòng)畫形式。聲音和視頻聲音是多媒體網(wǎng)頁(yè)的一個(gè)重要組成局部。當(dāng)前存在著一些不同類型的聲音文件和格式，也有不同的方法將這些聲音添加到Web頁(yè)中。在決定添加聲音之前，需要考慮的因素包括

8、其用途，格式，文件大小，聲音品質(zhì)和瀏覽器差異等。不同瀏覽器對(duì)于聲音文件的處理方法是非常不同的，彼此之間很可能不兼容。用于網(wǎng)絡(luò)的聲音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。設(shè)計(jì)者在使用這些格式的文件時(shí)，需要加以區(qū)別。很多瀏覽器不要插件也可以支持MIDI，WAV和AIF格式的文件，而MP3和RM格式的聲音文件那么需要專門的瀏覽器播放。一般來(lái)說(shuō)，不要使用聲音文件作為背景音樂(lè)，那樣會(huì)影響網(wǎng)頁(yè)下載的速度?？梢栽诰W(wǎng)頁(yè)中添加一個(gè)翻開聲音文件的鏈接，讓音樂(lè)播放變得可以控制。視頻文件的格式也非常多，常見的有Realplay， MPEG， AVI和DivX等。視頻文件的采用讓網(wǎng)頁(yè)變得精彩而有

9、動(dòng)感。超級(jí)鏈接超級(jí)鏈接技術(shù)可以說(shuō)是萬(wàn)維網(wǎng)流行起來(lái)的最主要的原因。它是從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接，例如指向另一個(gè)網(wǎng)頁(yè)或者相同網(wǎng)頁(yè)上的不同位置。這個(gè)目的端通常是另一個(gè)網(wǎng)頁(yè)，但也可以是一幅圖片，一個(gè)電子郵件地址，一個(gè)文件，一個(gè)程序或者是本網(wǎng)頁(yè)中的其他位置。其熱點(diǎn)通常是文本，圖片或圖片中的區(qū)域，也可以是一些不可見的程序腳本。當(dāng)瀏覽者單擊超級(jí)鏈接熱點(diǎn)時(shí)，其目的端將顯示在Web瀏覽器上，并根據(jù)目的端的類型以不同方式翻開。例如，當(dāng)指向一個(gè)AVI文件的超級(jí)鏈接被單擊后，該文件將在媒體播放軟件中翻開；如果單擊的是指向一個(gè)網(wǎng)頁(yè)的超級(jí)鏈接，那么該網(wǎng)頁(yè)將顯示在Web瀏覽器上。加下劃線的文字，就是已經(jīng)建立了超鏈接

10、的文本。表格在網(wǎng)頁(yè)中表格用來(lái)控制網(wǎng)頁(yè)中信息的布局方式。這包括兩方面：一是使用行和列的形式來(lái)布局文本和圖像以及其他的列表化數(shù)據(jù)；二是可以使用表格來(lái)精確控制各種網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中出現(xiàn)的位置。表單網(wǎng)頁(yè)中的表單通常用來(lái)接受用戶在瀏覽器端的輸入，然后將這些信息發(fā)送到用戶設(shè)置的目標(biāo)端。這個(gè)目標(biāo)可以是文本文件，Web頁(yè)，電子郵件，也可以是效勞器端的應(yīng)用程序。表單一般用來(lái)收集信息、接受用戶要求、獲得反響意見、設(shè)置來(lái)賓簽名簿、讓瀏覽者注冊(cè)為會(huì)員并以會(huì)員的身份登陸站點(diǎn)等。表單由不同功能的表單域組成，最簡(jiǎn)單的表單也要包含一個(gè)輸入?yún)^(qū)域和一個(gè)提交按鈕。站點(diǎn)瀏覽者填寫表單的方式通常是輸入文本，選中單項(xiàng)選擇按鈕或復(fù)選框，以及

11、從下拉列表框中選擇選項(xiàng)等。根據(jù)表單功能與處理方式的不同，通常可以將表單分為用戶反響表單，留言簿表單，搜索表單和用戶注冊(cè)表單等類型。導(dǎo)航欄導(dǎo)航欄是用戶在規(guī)劃好站點(diǎn)結(jié)構(gòu)，開始設(shè)計(jì)主頁(yè)時(shí)必須考慮的一項(xiàng)內(nèi)容。導(dǎo)航欄的作用就是引導(dǎo)瀏覽者游歷站點(diǎn)。事實(shí)上，導(dǎo)航欄就是一組超級(jí)鏈接，這組超級(jí)鏈接的目標(biāo)就是本站點(diǎn)的主頁(yè)以及其他重要網(wǎng)頁(yè)。在設(shè)計(jì)站點(diǎn)中的諸網(wǎng)頁(yè)時(shí)，可以在站點(diǎn)的每個(gè)網(wǎng)頁(yè)上顯示一個(gè)導(dǎo)航欄，這樣，瀏覽者就可以既快又容易的轉(zhuǎn)向站點(diǎn)的其他網(wǎng)頁(yè)。一般情況下，導(dǎo)航欄應(yīng)放在網(wǎng)頁(yè)中較引人注目的位置，通常是在網(wǎng)頁(yè)的頂部或一側(cè)。導(dǎo)航欄既可以是文本鏈接，也可以是一些圖形按鈕。其他常見元素網(wǎng)頁(yè)中除了以上幾種最根本的元素之外，

12、還有一些其它的常用元素，包括懸停按鈕，Java特效，ActiveX等各種特效。它們不僅能點(diǎn)綴網(wǎng)頁(yè)，使網(wǎng)頁(yè)更活潑有趣，而且在網(wǎng)上娛樂(lè)，電子商務(wù)等方面也有著不可無(wú)視的作用。1.4 網(wǎng)頁(yè)的創(chuàng)作與編輯工具網(wǎng)頁(yè)編輯工具網(wǎng)頁(yè)圖像制作工具動(dòng)畫制作工具網(wǎng)頁(yè)編輯工具Dreamweaver是由美國(guó)著名的多媒體軟件開發(fā)商acromedia公司開發(fā)的一個(gè)“所見即所得的可視化網(wǎng)站開發(fā)工具，是一個(gè)備受專業(yè)web開發(fā)人士推崇的軟件。 FrontPage是Microsoft公司推出的新一代網(wǎng)頁(yè)制作工具，其主要功能是可視化地創(chuàng)立和管理Web站點(diǎn)和網(wǎng)頁(yè)。FrontPage是一種典型的“所見即所得網(wǎng)頁(yè)創(chuàng)作工具，它為用戶提供了一套便

13、捷，直觀的網(wǎng)頁(yè)，站點(diǎn)的制作和管理方法。網(wǎng)頁(yè)圖像制作工具Fireworks同Macromedia公司的其他產(chǎn)品，如Dreamweaver、Flash以及其他優(yōu)秀圖形應(yīng)用軟件和HTML編輯器的高度集成，使得用戶在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)游刃有余。Fireworks中可以很方便地導(dǎo)出附有HTML代碼和JavaScript代碼的圖像，并將它們應(yīng)用到Dreamweaver和Flash網(wǎng)頁(yè)設(shè)計(jì)工具中，從而提高網(wǎng)頁(yè)設(shè)計(jì)的效率。動(dòng)畫制作工具Flash把矢量圖的精確性和靈活性與位圖、聲音、動(dòng)畫的高級(jí)交互性融合在一起，能夠創(chuàng)作出極具吸引力的高效網(wǎng)頁(yè)。它可以輕松地與Macromedia公司的圖像處理軟件FreeHand和Fi

14、reworks集成，直接導(dǎo)入這些軟件制作的圖像。 1.5 網(wǎng)頁(yè)制作的根本步驟整體規(guī)劃網(wǎng)頁(yè)設(shè)計(jì)與制作測(cè)試網(wǎng)頁(yè)網(wǎng)頁(yè)上傳發(fā)布整體規(guī)劃進(jìn)行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設(shè)計(jì)其結(jié)構(gòu)。網(wǎng)頁(yè)制作者在明確網(wǎng)頁(yè)制作的目的及要包括的內(nèi)容之后，接下來(lái)就應(yīng)該對(duì)網(wǎng)站進(jìn)行規(guī)劃，以確保文件內(nèi)容條理清楚、結(jié)構(gòu)合理，這樣不僅可以很好地表達(dá)設(shè)計(jì)者的意圖，也將使網(wǎng)站可維護(hù)性與可擴(kuò)展性增強(qiáng)。整體規(guī)劃續(xù)定位網(wǎng)站的主題和名稱定位網(wǎng)站的CICorporate Identity形象確定網(wǎng)站的欄目和版塊確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)確定網(wǎng)站的整體風(fēng)格和創(chuàng)意設(shè)計(jì)首頁(yè)設(shè)計(jì)版面布局網(wǎng)頁(yè)色彩搭配測(cè)試網(wǎng)頁(yè)當(dāng)網(wǎng)頁(yè)設(shè)計(jì)人員制作完所有網(wǎng)站頁(yè)面之后，需要對(duì)所設(shè)計(jì)的網(wǎng)頁(yè)進(jìn)行審查和測(cè)試，測(cè)試內(nèi)容包括功能性測(cè)試和完整性測(cè)試兩個(gè)方面。所謂功能性測(cè)試就是要保證網(wǎng)頁(yè)的可用性，到達(dá)最初的內(nèi)容組織設(shè)計(jì)目標(biāo)，實(shí)現(xiàn)