網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)

網(wǎng)頁設(shè)計(jì)基礎(chǔ)主講：鄧小亞數(shù)理與軟件工程學(xué)院計(jì)算機(jī)教研室

認(rèn)識(shí)網(wǎng)頁構(gòu)成網(wǎng)頁的基本要素制作網(wǎng)頁的基本工具美化網(wǎng)頁的基本工具網(wǎng)頁制作的基本步驟網(wǎng)頁設(shè)計(jì)基礎(chǔ)認(rèn)識(shí)網(wǎng)頁

因特網(wǎng)的最大好處是“資源共享”。上網(wǎng)的目的是為了完成工作、學(xué)習(xí)和日常生活中的一些事情。例如：網(wǎng)上通信、在網(wǎng)上查找資料、看新聞、看天氣預(yù)報(bào)、從網(wǎng)上商店買東西、在網(wǎng)上看病、上網(wǎng)校學(xué)習(xí)、網(wǎng)上聽音樂、看電影、玩游戲等。

網(wǎng)上的信息都存放在網(wǎng)頁上，查看網(wǎng)頁信息叫做“瀏覽”。瀏覽網(wǎng)頁要用專門的工具——瀏覽器InternetExplorer.意思是“因特網(wǎng)探險(xiǎn)者”。

網(wǎng)頁的基本要素1.文字

文字是網(wǎng)頁發(fā)布信息所用的主要形式，由文字制作出的網(wǎng)頁占用空間小，當(dāng)用戶瀏覽時(shí)，可以很快的展現(xiàn)在用戶面前。另外，文字性網(wǎng)頁還可以利用瀏覽器中“文件”菜單下的“另存為”功能將其下載。但是沒有編排點(diǎn)綴的純文字網(wǎng)頁，又會(huì)給人帶來死板不活潑的感覺，使得人們不愿意再往下瀏覽。文字性網(wǎng)頁一定要注意編排，包括標(biāo)題的字型字號(hào)，內(nèi)容的層次樣式，是否需要變換顏色進(jìn)行點(diǎn)綴等。1.1標(biāo)題

一個(gè)網(wǎng)頁通常都有一個(gè)標(biāo)題，表明本網(wǎng)頁的主要內(nèi)容。標(biāo)題是否醒目，是吸引瀏覽者能否注意的一個(gè)關(guān)鍵，因此對標(biāo)題的設(shè)計(jì)是很重要的。網(wǎng)頁的基本要素網(wǎng)頁中的文字不能太大或太小。太大會(huì)使得一個(gè)網(wǎng)頁信息量變小，太小又使人們?yōu)g覽時(shí)感到費(fèi)勁。一個(gè)優(yōu)秀網(wǎng)頁中的文字，應(yīng)統(tǒng)籌規(guī)劃，大小搭配適當(dāng)，給人以生動(dòng)活潑之感覺。1.2字號(hào)

網(wǎng)頁的基本要素在網(wǎng)頁適當(dāng)?shù)奈恢貌捎貌煌淖煮w字型，也能使網(wǎng)頁產(chǎn)生吸引人的效果。應(yīng)該注意的是在報(bào)刊上變換字體字型非常普遍，它可以在不同的地方使用不同的字型。但在網(wǎng)頁制作上卻要慎重。因?yàn)橛行┟利惖淖中驮谥谱骶W(wǎng)頁的計(jì)算機(jī)上有，但將來別人瀏覽你的網(wǎng)頁時(shí)，瀏覽者的計(jì)算機(jī)上未必裝有這種字體。這樣瀏覽者就無法得到你預(yù)想的瀏覽效果，甚至適得相反。如果只是標(biāo)題或少量的文字，可以將采用的特殊字體制作成圖形方式，就可避免其他瀏覽者看不到的尷尬局面了。

1.3字型

1.4表格當(dāng)文本內(nèi)容較多時(shí)，可以利用表格形式來實(shí)現(xiàn)。表格是在網(wǎng)頁上的一行或多行單元格，用來組織網(wǎng)頁的布局或系統(tǒng)地布置數(shù)據(jù)，用戶可以放置任何東西在表格的單元格中，包括文字、圖形和表單等。表格具有容量大、結(jié)構(gòu)嚴(yán)謹(jǐn)和效果直觀等多個(gè)優(yōu)點(diǎn)，是網(wǎng)頁中不可缺少的記錄或總結(jié)工具。表格還可以用來控制網(wǎng)頁中信息的布局方式。許多大型的網(wǎng)站都是使用表格來進(jìn)行頁面布局的,使頁面看起來更加直觀和有條理。

2.圖形這里的圖形概念是廣義的，它可以是普通的繪制圖形，可以是各種圖像，還可以是動(dòng)畫。一幅優(yōu)秀的網(wǎng)頁除了有能吸引瀏覽者的文字形式和內(nèi)容外，圖形的表現(xiàn)功能是不能低估的。網(wǎng)頁上的圖形格式一般使用JPEG和GIF，這兩種格式具有跨平臺(tái)的特性，可以在不同操作系統(tǒng)支持的瀏覽器上顯示。1．菜單按鈕

網(wǎng)頁上的菜單按鈕有一些是由圖形制作，通常有橫排和豎排兩種形式，由此可以轉(zhuǎn)入不同的頁面。2．背景圖形

為了加強(qiáng)視覺效果，有些網(wǎng)頁在整個(gè)網(wǎng)頁的底層放置了圖形，稱作背景圖。背景圖可以使網(wǎng)頁更加華麗，使人感到界面友好。但由于這是一個(gè)比較大的圖形，需要占據(jù)較大的空間，致使網(wǎng)頁的顯示速度明顯變慢，所以，近期的網(wǎng)頁以及比較著名的訪問量比較大網(wǎng)站一般都不設(shè)置背景圖形。圖形在網(wǎng)頁中通常有如下應(yīng)用：

3.鏈接標(biāo)志鏈接是網(wǎng)頁中一種非常重要的功能，是網(wǎng)頁中最重要、最根本的元素之一。通過鏈接可以從一個(gè)網(wǎng)頁轉(zhuǎn)到另一個(gè)網(wǎng)頁，也可以從一個(gè)網(wǎng)站轉(zhuǎn)到另一個(gè)網(wǎng)站。鏈接的標(biāo)志有文字和圖形兩種。制作一些精美的圖形作為鏈接按鈕，使它和整個(gè)網(wǎng)頁融為一體。4.交互功能

Internet區(qū)別其他媒體的一個(gè)重要標(biāo)志就是它的交互功能。網(wǎng)頁的交互功能其他媒體是無法比擬的。通常網(wǎng)頁的交互功能都是利用表單來實(shí)現(xiàn)的。表單是網(wǎng)頁中站點(diǎn)服務(wù)器處理的一組數(shù)據(jù)輸入域，當(dāng)訪問者單擊按鈕或圖形來提交表單后，數(shù)據(jù)就會(huì)傳送到服務(wù)器上。WWW頁面一般說來，出現(xiàn)在瀏覽器中的WWW頁面不外乎有兩種：靜態(tài)頁面和動(dòng)態(tài)頁面。

1.靜態(tài)頁面所謂靜態(tài)頁面就是指那些不能夠接收用戶輸入信息的WWW頁面，其內(nèi)容是靜態(tài)的，唯一的響應(yīng)就是接收鼠標(biāo)點(diǎn)擊超級(jí)連接后顯示所連接的頁面。當(dāng)用戶用鼠標(biāo)點(diǎn)擊其中一個(gè)超級(jí)連接后，就會(huì)在瀏覽器中顯示所連接的頁面信息。2.動(dòng)態(tài)頁面動(dòng)態(tài)頁面與靜態(tài)頁面不同，在動(dòng)態(tài)頁面，用戶可以輸入動(dòng)態(tài)網(wǎng)頁所允許的各種信息，實(shí)現(xiàn)人機(jī)交互。網(wǎng)頁設(shè)計(jì)和美化工具

HTML（HypertextMarkupLanguage）是一種專門用于Web頁制作的編程語言，用來描述超文本各個(gè)部分的內(nèi)容，告訴瀏覽器如何顯示文本，怎樣生成與別的文本或圖像的鏈接點(diǎn)。

HTML文檔由文本、格式化代碼和導(dǎo)向其他文檔的超鏈接組成。網(wǎng)頁設(shè)計(jì)語言

1．超文本標(biāo)識(shí)語言（HTML）2.XML(eXtensibleMarkupLanguage)技術(shù)：是W3C組織于1998年2月發(fā)布的標(biāo)準(zhǔn)。它是為了克服HTML缺乏靈活性和伸縮性的缺點(diǎn)以及SGML過于復(fù)雜、不利于軟件應(yīng)用的缺點(diǎn)而發(fā)展起來的一種元標(biāo)記語言。3.Java技術(shù)：利用Java可以創(chuàng)建小應(yīng)用程序(applet)，使之從服務(wù)器下載到瀏覽器，并在客戶端的機(jī)器上運(yùn)行。Javaapplet可提供動(dòng)畫、音頻和音樂等多媒體服務(wù)。網(wǎng)頁設(shè)計(jì)語言

4.JavaScript技術(shù)：是由Netscape開發(fā)的一種解釋語言，它可以直接插入到HTML文檔中。它具有Java的許多特性，但比Java更為簡單有效，而且不需要編譯，因而也是Web技術(shù)的重要組成部分。5.JSP(JavaServerPages)技術(shù)：是由SunMicrosystem公司于1999年6月份推出的新技術(shù)，是基于JavaServlet以及整個(gè)Java體系的Web開發(fā)技術(shù)。利用這一技術(shù)可以建立先進(jìn)、安全和跨平臺(tái)的動(dòng)態(tài)網(wǎng)站。網(wǎng)頁設(shè)計(jì)語言

6.JavaScript技術(shù)：是由Netscape開發(fā)的一種解釋語言，它可以直接插入到HTML文檔中。它具有Java的許多特性，但比Java更為簡單有效，而且不需要編譯，因而也是Web技術(shù)的重要組成部分。7.JSP(JavaServerPages)技術(shù)：是由SunMicrosystem公司于1999年6月份推出的新技術(shù)，是基于JavaServlet以及整個(gè)Java體系的Web開發(fā)技術(shù)。利用這一技術(shù)可以建立先進(jìn)、安全和跨平臺(tái)的動(dòng)態(tài)網(wǎng)站。網(wǎng)頁設(shè)計(jì)語言

8.PHP(HypertextPreprocessor)技術(shù)：是近年來發(fā)展得比較快的一門新興語言。PHP是一種易于學(xué)習(xí)和使用的服務(wù)器端腳本語言，是生成動(dòng)態(tài)網(wǎng)頁的工具之一。它是嵌入HTML文件的一種腳本語言，其語法大部分是借鑒了C,Java語言，并形成了自己的獨(dú)有風(fēng)格。9.VRML(VirtualRealityModelingLanguage)技術(shù)：Web已經(jīng)由靜態(tài)轉(zhuǎn)入動(dòng)態(tài)，并正在逐漸由二維走向三維，將用戶帶入五彩繽紛的虛擬世界。VRML是目前創(chuàng)建三維對象最重要的工具，它也是一種基于文本的語言，并可運(yùn)行于任何平臺(tái)。網(wǎng)頁設(shè)計(jì)語言

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

1.HTML代碼編輯工具這種軟件把各種HTML的標(biāo)記以按鈕或菜單的形式提供給用戶，當(dāng)需要加入某種標(biāo)記時(shí)，只需單擊相應(yīng)的按鈕或菜單，標(biāo)記就會(huì)自動(dòng)加入到文件中，設(shè)計(jì)人員只需在標(biāo)記中間加入自己的文字、圖像、聲音等內(nèi)容。典型的有HomeSite、HotDog、HTMLedit、WebEdit等，使用這種工具雖然省去了輸入標(biāo)記的時(shí)間，但設(shè)計(jì)人員仍然必須對各種標(biāo)記的格式和功能非常熟悉，即使這樣，編輯復(fù)雜頁面仍然會(huì)顯得繁雜。網(wǎng)頁設(shè)計(jì)工具2.“所見即所得”編輯工具

（1）DreamweaverDreamweaver是由Macromedia公司推出的一款在網(wǎng)頁制作方面大眾化的軟件，它具有可視化編輯界面，用戶不必編寫復(fù)雜的HTML源代碼就可以生成跨平臺(tái)、跨瀏覽器的網(wǎng)頁，不僅適合于專業(yè)網(wǎng)頁編輯人員的需要，同時(shí)也容易被業(yè)余網(wǎng)友們所掌握。

FrontPage是由Microsoft公司推出的新一代Web網(wǎng)頁制作工具。FrontPage使網(wǎng)頁制作者能夠更加方便、快捷地創(chuàng)建和發(fā)布網(wǎng)頁，具有直觀的網(wǎng)頁制作和管理方法，簡化了大量工作。

FrontPage界面與Word、PowerPoint等軟件的界面極為相似，為使用者帶來了極大的方便，Microsoft公司將FrontPage封裝入Office之中，成為Office家族的一員，使之功能更為強(qiáng)大。(2)FrontPage

Photoshop是由Adobe公司開發(fā)的圖形處理軟件，它是目前公認(rèn)的PC機(jī)上最好的通用平面美術(shù)設(shè)計(jì)軟件，它功能完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟件公司，Photoshop都是首選的平面制作工具。網(wǎng)頁美化工具1．Photoshop

Fireworks是由Macromedia公司開發(fā)的圖形處理工具，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。因?yàn)镕ireworks是第一套專門為制作網(wǎng)頁圖形而設(shè)計(jì)的軟件，同時(shí)也是專業(yè)的網(wǎng)頁圖形設(shè)計(jì)及制作的解決方案。作為一個(gè)圖像處理軟件，F(xiàn)ireworks能夠自由地導(dǎo)入多種格式的圖像進(jìn)行處理。

Fireworks還能夠自動(dòng)切割圖像、生成光標(biāo)動(dòng)態(tài)感應(yīng)的JavaScript程序等等，而且Fireworks具有強(qiáng)大的動(dòng)畫功能和一個(gè)相當(dāng)完美的網(wǎng)絡(luò)圖像生成器。2．Fireworks

Flash是美國Macromedia公司開發(fā)的矢量圖形編輯和動(dòng)畫創(chuàng)作的專業(yè)軟件，它是一種交互式動(dòng)畫設(shè)計(jì)工具，用它可以將音樂、聲效、動(dòng)畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動(dòng)態(tài)效果。它主要應(yīng)用于網(wǎng)頁設(shè)計(jì)和多媒體創(chuàng)作等領(lǐng)域，功能十分強(qiáng)大和獨(dú)特，已成為交互式矢量動(dòng)畫的標(biāo)準(zhǔn)，在網(wǎng)上非常流行。Flash廣泛應(yīng)用于網(wǎng)頁動(dòng)畫制作、教學(xué)動(dòng)畫演示、網(wǎng)上購物、在線游戲等的制作中。3．Flash網(wǎng)頁制作的基本步驟網(wǎng)站定位要小，內(nèi)容要精。如果要制作一個(gè)包羅萬象的站點(diǎn)，把所有精彩的東西都放在上面，結(jié)果往往會(huì)事與愿違，給人的感覺是沒有主題，沒有特色，樣樣有，卻樣樣都很膚淺。網(wǎng)站的題材最好選自己擅長或者喜愛的內(nèi)容。興趣是制作網(wǎng)站的動(dòng)力，沒有熱情，很難設(shè)計(jì)制作出優(yōu)秀的網(wǎng)站。1.網(wǎng)站定位進(jìn)行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設(shè)計(jì)其結(jié)構(gòu)。組織網(wǎng)站的內(nèi)容可以從兩個(gè)角度來考慮。從設(shè)計(jì)者的角度來考慮，可以依據(jù)被描述對象的組織機(jī)構(gòu)、類別劃分等來組織內(nèi)容；從瀏覽者的角度來考慮，就應(yīng)該將各種素材依據(jù)瀏覽者的需要進(jìn)行內(nèi)容分類，以便瀏覽者可以快捷地獲取所需要的信息及其相關(guān)內(nèi)容。

2.整體規(guī)劃合理的結(jié)構(gòu)設(shè)計(jì)對于網(wǎng)站的規(guī)劃也是至關(guān)重要的。以下是三種常用的結(jié)構(gòu)類型。

①層狀結(jié)構(gòu)層狀結(jié)構(gòu)類似于目錄系統(tǒng)的樹型結(jié)構(gòu)，主頁頁面1頁面2頁面3

②線性結(jié)構(gòu)線性結(jié)構(gòu)類似于數(shù)據(jù)結(jié)構(gòu)中的線性表，用于組織本身的線性順序形式存在的信息，可以引導(dǎo)瀏覽者按部就班地瀏覽整個(gè)網(wǎng)站文件。

主頁頁面1頁面2頁面3頁面4頁面5頁面7頁面8一級(jí)標(biāo)題二級(jí)標(biāo)題頁面6

③Web結(jié)構(gòu)

Web結(jié)構(gòu)類似于Internet的組成結(jié)構(gòu)，各網(wǎng)頁之間形成網(wǎng)狀連接，允許用戶隨意瀏覽。通常在進(jìn)行網(wǎng)頁開發(fā)時(shí)，首先都進(jìn)行靜態(tài)網(wǎng)頁的制作，然后再在其中加入腳本程序、表單等動(dòng)態(tài)內(nèi)容。靜態(tài)網(wǎng)頁僅僅用來被動(dòng)地發(fā)布信息，而不具有任何交互功能，它是Web網(wǎng)頁的重要組成部分。一個(gè)好的網(wǎng)站首先是內(nèi)容豐富，其次就是網(wǎng)頁設(shè)計(jì)美觀。對于網(wǎng)頁的外觀設(shè)計(jì)，提供以下建議：（1）不要先決定網(wǎng)頁的外觀，然后迫使自己去適應(yīng)它，應(yīng)該根據(jù)網(wǎng)站的訪問者對象、要提供的信息以及制作目標(biāo)得出一個(gè)最適合的網(wǎng)頁架構(gòu)。3.制作網(wǎng)頁（2）每頁排版不要太松散或用太大的字，盡量避免訪問者瀏覽網(wǎng)頁時(shí)要作大幅度的滾動(dòng)，對于篇幅太長的一頁可以使用內(nèi)部鏈接解決。（3）不應(yīng)在每頁中插入太多的廣告。相信任何訪問者都不會(huì)喜歡瀏覽盡是些廣告的網(wǎng)頁，要考慮該頁內(nèi)容與廣告的比例，廣告太多，只會(huì)令人煩厭。（4）不要每頁都采用不同的墻紙，以免每次轉(zhuǎn)頁時(shí)都要花費(fèi)過多的時(shí)間去下載。

對于網(wǎng)頁的外觀設(shè)計(jì)，提供以下建議：

（5）底色或墻紙必須與文字對比強(qiáng)烈，以易于閱讀。如果網(wǎng)頁是文章式或是包含大量文字，不妨在底色與文字的搭配上下些工夫，力求讓訪問者能夠舒適地閱讀網(wǎng)頁。（6）不要把圖片白色當(dāng)作透明，要知道別人的系統(tǒng)不一定把內(nèi)定底色設(shè)為白色，解決的辦法除了真的把該網(wǎng)頁的底色設(shè)為白色之外，最好還是用圖片編輯工具將圖片設(shè)為透明顏色。對于網(wǎng)頁的外觀設(shè)計(jì)，提供以下建議：靜態(tài)網(wǎng)頁制作完成后，接下來的工作就是為網(wǎng)頁添加動(dòng)態(tài)效果，包括一些腳本語言程序和數(shù)據(jù)庫程序的設(shè)計(jì)，以及加入動(dòng)畫效果等。一個(gè)真正的網(wǎng)站，不僅應(yīng)該實(shí)現(xiàn)傳統(tǒng)媒體的電子化，給用戶提供需要的內(nèi)容，而且還應(yīng)該做更多的事情，完成比頁面瀏覽更高層次的需求，例如收集信息、數(shù)據(jù)傳遞、數(shù)據(jù)存儲(chǔ)以及系統(tǒng)維護(hù)等。

為網(wǎng)頁的添加動(dòng)態(tài)效果當(dāng)網(wǎng)頁設(shè)計(jì)人員制作完所有網(wǎng)站頁面之后，需要對所設(shè)計(jì)的網(wǎng)頁進(jìn)行審查和測試，測試內(nèi)容包括功能性測試和完整性測試兩個(gè)方面。所謂功能性測試就是要保證網(wǎng)頁的可用性，達(dá)到最初的內(nèi)容組織設(shè)計(jì)目標(biāo)，實(shí)現(xiàn)所規(guī)定的功能，讀者可方便快速地