網(wǎng)頁基礎(chǔ)認識

1、第第1章章 網(wǎng)頁設(shè)計基礎(chǔ)網(wǎng)頁設(shè)計基礎(chǔ) n一個成功的Web站點，與在該站點制作前的構(gòu)思與規(guī)劃是分不開的。在建站前通過合理的構(gòu)思與規(guī)劃，不但可以讓制作人員的工作更加輕松，而且還能讓站點有一個全局上的總綱，在制作過程中不至于沒有頭緒，避免走不必要的彎路。通過本章的學(xué)習(xí)，讀者可以了解到網(wǎng)頁內(nèi)容的規(guī)劃方法、設(shè)計網(wǎng)頁布局、站點規(guī)劃與設(shè)計流程、創(chuàng)建設(shè)計圖等內(nèi)容，并能掌握制作一個主頁的基本流程。1. 網(wǎng)頁內(nèi)容的規(guī)劃2. 設(shè)計網(wǎng)頁布局3. 站點規(guī)劃與設(shè)計流程4. 創(chuàng)建設(shè)計圖5. 主頁的基本制作流程n1.1.1 網(wǎng)頁的知識與術(shù)語n當(dāng)用戶在制作網(wǎng)頁時，經(jīng)常會遇到一些術(shù)語，例如，服務(wù)器、客戶端、框架、CGI、ASP

2、PHP ASP.NET JAVA、計數(shù)器、留言板、交互、表單等。如果用戶對這些術(shù)語不了解，在制作網(wǎng)頁時將會遇到不少問題，下面將分別介紹這些術(shù)語。n1.1.2 網(wǎng)頁的設(shè)計構(gòu)思 n一個網(wǎng)頁的成功與否，很重要的一個因素就在于它的構(gòu)思，富有創(chuàng)意的構(gòu)思和巧妙的頁面布局會讓網(wǎng)頁具有更強的生命力和觀賞性。在網(wǎng)頁的設(shè)計構(gòu)思中需要認真考慮的問題有：網(wǎng)頁的主題、網(wǎng)頁的命名、網(wǎng)頁標(biāo)志、色彩搭配和字體等要素。1. 網(wǎng)頁的主題2. 網(wǎng)頁命名3. 網(wǎng)站標(biāo)志4. 色彩搭配5. 字體n1.1.3 網(wǎng)頁的布局n在網(wǎng)頁布局過程中，應(yīng)該遵循的原則有：對稱平衡、異常平衡、對比、凝視和空白等。一般來說，網(wǎng)頁的布局有下面幾種常見的結(jié)構(gòu)。

3、“”型結(jié)構(gòu)布局 “”型布局 “三”型布局對比布局POP布局Flash布局n當(dāng)用戶希望創(chuàng)建一個Web站點時，首先應(yīng)考慮如何設(shè)計和規(guī)劃站點，以確保它能制作成功。即使用戶只是創(chuàng)建個人主頁，僅僅是為了供朋友和家人一起分享，也需要謹慎地規(guī)劃站點，使每個人都能瀏覽該主頁。n1.2.1 決定站點目標(biāo)n在創(chuàng)建網(wǎng)站時，決定站點的目標(biāo)是第一步。設(shè)計者應(yīng)清楚建立站點的目標(biāo)，確定它將提供什么樣的服務(wù)，網(wǎng)頁中應(yīng)該出現(xiàn)的內(nèi)容等。通常，一個好的規(guī)劃，可以直接影響站點的質(zhì)量和將來瀏覽者的訪問流量。此外，對于一個網(wǎng)站來說，應(yīng)能夠經(jīng)常提供新內(nèi)容才能吸引瀏覽者。在網(wǎng)頁中插入媒體(如Flash、Director等)元素，也可以使網(wǎng)頁

4、看上去生動、可親。n1.2.2 選擇目標(biāo)觀眾n為了使站點能夠吸引更多的觀眾，應(yīng)該充分考慮到觀眾所使用的計算機類型，使用的操作平臺(如Macintosh、Windows、Linux等)，平均使用的連接速度以及他們使用的瀏覽器種類和顯示器尺寸等，這些因素都會影響觀眾訪問您的網(wǎng)頁。一旦選擇了觀眾，并且決定了他們使用的計算機類型、連接速度和瀏覽器種類，就能夠?qū)崿F(xiàn)您的設(shè)計。 n1.2.3 為兼容的瀏覽器創(chuàng)建站點n在多數(shù)環(huán)境下，需要為廣大用戶設(shè)計Web站點。這時可選擇一種或兩種瀏覽器作為目標(biāo)瀏覽器，并為這些瀏覽器設(shè)計相應(yīng)的站點，同時也要使該站點能較大程度地適合于其他的瀏覽器。當(dāng)站點中包含特殊的版面形式、動

5、畫、多媒體和交互性內(nèi)容時，它們將顯示與瀏覽器兼容性之間的矛盾。 n1.2.4 組織站點結(jié)構(gòu)n合理地組織站點結(jié)構(gòu)，能夠加快對站點的設(shè)計，提高工作效率，節(jié)省工作時間。當(dāng)創(chuàng)建一個大型網(wǎng)站時，如果將所有的網(wǎng)頁都存儲在一個目錄下，當(dāng)站點的規(guī)模越來越大時，管理起來就會變得很困難。因此，應(yīng)合理地使用文件夾來管理文檔。 n1.2.5 創(chuàng)建設(shè)計圖n1.2.6 設(shè)計導(dǎo)航圖n在站點中設(shè)置導(dǎo)航條也是一個重要的組成部分。當(dāng)設(shè)計站點時，應(yīng)考慮到訪問您的站點的觀眾大多都是有經(jīng)驗的，也應(yīng)考 慮到如何使觀眾能輕松地從網(wǎng)站的一個地方移動到另一個地方。n1.2.7 計劃和收集資源n一旦設(shè)計好站點的布局，就可以創(chuàng)建并收集所需的資源文

6、件了。這些資源可以是一些圖像、文本或者是一些媒體(如Flash，Shockwave等)。在進行站點制作之前應(yīng)裝備好已經(jīng)收集到的資源，否則，將不得不為了尋找所需的圖像或創(chuàng)建按鈕而頻繁地停下來。n指定網(wǎng)頁標(biāo)題 n采集網(wǎng)頁內(nèi)容 n準(zhǔn)備網(wǎng)頁圖片 n設(shè)定網(wǎng)頁框架 n設(shè)定網(wǎng)頁背景 n創(chuàng)建其他頁面元素n測試網(wǎng)站 n申請站點域名 n上傳站點內(nèi)容 n管理網(wǎng)站 n宣傳自己的網(wǎng)站 通過本章學(xué)習(xí)，掌握以下內(nèi)容：通過本章學(xué)習(xí)，掌握以下內(nèi)容： 認識網(wǎng)頁認識網(wǎng)頁 構(gòu)成網(wǎng)頁的基本要素構(gòu)成網(wǎng)頁的基本要素 制作網(wǎng)頁的基本工具制作網(wǎng)頁的基本工具 美化網(wǎng)頁的基本工具美化網(wǎng)頁的基本工具 網(wǎng)頁制作的基本步驟網(wǎng)頁制作的基本步驟1.1.1

7、主要網(wǎng)頁畫面主要網(wǎng)頁畫面1.1.2 網(wǎng)頁的基本功能網(wǎng)頁的基本功能1.2 網(wǎng)頁的基本要素網(wǎng)頁的基本要素1.2.1 文字文字 文字是網(wǎng)頁發(fā)布信息所用的主要形式，由文字制作出的網(wǎng)文字是網(wǎng)頁發(fā)布信息所用的主要形式，由文字制作出的網(wǎng)頁占用空間小，因此，當(dāng)用戶瀏覽時，可以很快的展現(xiàn)在用戶面頁占用空間小，因此，當(dāng)用戶瀏覽時，可以很快的展現(xiàn)在用戶面前。另外，文字性網(wǎng)頁還可以利用瀏覽器中前。另外，文字性網(wǎng)頁還可以利用瀏覽器中“文件文件”菜單下的菜單下的“另存為另存為”功能將其下載，便于以后長期閱讀，也可對其進行編功能將其下載，便于以后長期閱讀，也可對其進行編輯打印。但是沒有編排點綴的純文字網(wǎng)頁，又會給人帶來死板

8、不輯打印。但是沒有編排點綴的純文字網(wǎng)頁，又會給人帶來死板不活潑的感覺，使得人們不愿意再往下瀏覽。所以，文字性網(wǎng)頁一活潑的感覺，使得人們不愿意再往下瀏覽。所以，文字性網(wǎng)頁一定要注意編排，包括標(biāo)題定要注意編排，包括標(biāo)題的的字型字號，內(nèi)容的層次樣式，是否需字型字號，內(nèi)容的層次樣式，是否需要變換顏色進行點綴等等。要變換顏色進行點綴等等。1標(biāo)題標(biāo)題 一個網(wǎng)頁通常都有一個標(biāo)題，表明本網(wǎng)頁的主要內(nèi)容。標(biāo)題是一個網(wǎng)頁通常都有一個標(biāo)題，表明本網(wǎng)頁的主要內(nèi)容。標(biāo)題是醒目，是吸引瀏覽者能否注意的一個關(guān)鍵，因此對標(biāo)題的設(shè)計是醒目，是吸引瀏覽者能否注意的一個關(guān)鍵，因此對標(biāo)題的設(shè)計是很重要的。很重要的。2字號字號 網(wǎng)頁中

9、的文字不能太大或太小。太大會使得一個網(wǎng)頁信息量變，網(wǎng)頁中的文字不能太大或太小。太大會使得一個網(wǎng)頁信息量變，太小又使人們?yōu)g覽時感到費勁。一個優(yōu)秀網(wǎng)頁中的文字，應(yīng)統(tǒng)籌太小又使人們?yōu)g覽時感到費勁。一個優(yōu)秀網(wǎng)頁中的文字，應(yīng)統(tǒng)籌規(guī)劃，大小搭配適當(dāng)，給人以生動活潑之感覺。規(guī)劃，大小搭配適當(dāng)，給人以生動活潑之感覺。3字型字型 在網(wǎng)頁適當(dāng)?shù)奈恢貌捎貌煌淖煮w字型，也能使網(wǎng)頁產(chǎn)生吸引在網(wǎng)頁適當(dāng)?shù)奈恢貌捎貌煌淖煮w字型，也能使網(wǎng)頁產(chǎn)生吸引人的效果。應(yīng)該注意的是在報刊上變換字體字型非常普遍，它可人的效果。應(yīng)該注意的是在報刊上變換字體字型非常普遍，它可以在不同的地方使用不同的字型。但在網(wǎng)頁制作上卻要慎重。因以在不同的

10、地方使用不同的字型。但在網(wǎng)頁制作上卻要慎重。因為有些美麗的字型在制作網(wǎng)頁的計算機上有，但將來別人瀏覽你為有些美麗的字型在制作網(wǎng)頁的計算機上有，但將來別人瀏覽你的網(wǎng)頁時，瀏覽者的計算機上未必裝有這種字體。這樣瀏覽者就的網(wǎng)頁時，瀏覽者的計算機上未必裝有這種字體。這樣瀏覽者就無法得到你預(yù)想的瀏覽效果，甚至適得相反。無法得到你預(yù)想的瀏覽效果，甚至適得相反。 如果只是標(biāo)題或少量的文字，可以將采用的特殊字體制作成圖如果只是標(biāo)題或少量的文字，可以將采用的特殊字體制作成圖形方式，就可避免其他瀏覽者看不到的尷尬局面了。形方式，就可避免其他瀏覽者看不到的尷尬局面了。 當(dāng)文本內(nèi)容較多時。可以利用表格形式來實現(xiàn)。當(dāng)文

11、本內(nèi)容較多時?？梢岳帽砀裥问絹韺崿F(xiàn)。 1.2.2 圖形圖形 這里的圖形概念是廣義的，它可以是普通的繪制圖形，可以是這里的圖形概念是廣義的，它可以是普通的繪制圖形，可以是各種圖像，還可以是動畫。一幅優(yōu)秀的網(wǎng)頁除了有能吸引瀏覽者各種圖像，還可以是動畫。一幅優(yōu)秀的網(wǎng)頁除了有能吸引瀏覽者的文字形式和內(nèi)容外，圖形的表現(xiàn)功能是不能低估的。網(wǎng)頁上的的文字形式和內(nèi)容外，圖形的表現(xiàn)功能是不能低估的。網(wǎng)頁上的圖形格式一般使用圖形格式一般使用JPEGJPEG和和GIFGIF，這兩種格式具有跨平臺的特性，可，這兩種格式具有跨平臺的特性，可以在不同操作系統(tǒng)支持的瀏覽器上顯示。圖形在網(wǎng)頁中通常有如以在不同操作系統(tǒng)支持的

12、瀏覽器上顯示。圖形在網(wǎng)頁中通常有如下應(yīng)用。下應(yīng)用。1菜單按鈕菜單按鈕 網(wǎng)頁上的菜單按鈕有一些是由圖形制作，通常有橫排和豎排兩網(wǎng)頁上的菜單按鈕有一些是由圖形制作，通常有橫排和豎排兩種形式，由此可以轉(zhuǎn)入不同的頁面。種形式，由此可以轉(zhuǎn)入不同的頁面。 1.2.3 鏈接標(biāo)志鏈接標(biāo)志 鏈接是網(wǎng)頁中一種非常重要的功能，是網(wǎng)頁中最重要、最根鏈接是網(wǎng)頁中一種非常重要的功能，是網(wǎng)頁中最重要、最根本的元素之一。通過鏈接可以從一個網(wǎng)頁轉(zhuǎn)到另一個網(wǎng)頁，也可本的元素之一。通過鏈接可以從一個網(wǎng)頁轉(zhuǎn)到另一個網(wǎng)頁，也可以從一個網(wǎng)站轉(zhuǎn)到另一個網(wǎng)站。鏈接的標(biāo)志有文字和圖形兩種。以從一個網(wǎng)站轉(zhuǎn)到另一個網(wǎng)站。鏈接的標(biāo)志有文字和圖形兩種

13、。制作一些精美的圖形作為鏈接按鈕，使它和整個網(wǎng)頁融為一體。制作一些精美的圖形作為鏈接按鈕，使它和整個網(wǎng)頁融為一體。1.3.1網(wǎng)頁制作工具網(wǎng)頁制作工具1超文本標(biāo)識語言（超文本標(biāo)識語言（HTML） HTMLHTML（Hypertext Markup LanguageHypertext Markup Language）是一種專門用于）是一種專門用于WebWeb頁制頁制作的編程語言，用來描述超文本各個部分的內(nèi)容，告訴瀏覽器如何作的編程語言，用來描述超文本各個部分的內(nèi)容，告訴瀏覽器如何顯示文本，怎樣生成與別的文本或圖像的鏈接點。顯示文本，怎樣生成與別的文本或圖像的鏈接點。 HTMLHTML文檔由文本、格

14、式化代碼和導(dǎo)向其他文檔的超鏈接組成。文檔由文本、格式化代碼和導(dǎo)向其他文檔的超鏈接組成。3Dreamweaver DreamweaverDreamweaver是由是由MacromediaMacromedia公司推出的一款在網(wǎng)頁制作方面大公司推出的一款在網(wǎng)頁制作方面大眾化的軟件，它具有可視化編輯界面，用戶不必編寫復(fù)雜的眾化的軟件，它具有可視化編輯界面，用戶不必編寫復(fù)雜的HTMLHTML源代源代碼就可以生成跨平臺、跨瀏覽器的網(wǎng)頁，不僅適合于專業(yè)網(wǎng)頁編輯人碼就可以生成跨平臺、跨瀏覽器的網(wǎng)頁，不僅適合于專業(yè)網(wǎng)頁編輯人員的需要，同時也容易被業(yè)余網(wǎng)友們所掌握。另外，員的需要，同時也容易被業(yè)余網(wǎng)友們所掌握。另

15、外，DreamweaverDreamweaver的的網(wǎng)頁動態(tài)效果與網(wǎng)頁排版功能都比一般的軟件好用，即使是初學(xué)者也網(wǎng)頁動態(tài)效果與網(wǎng)頁排版功能都比一般的軟件好用，即使是初學(xué)者也能制作出相當(dāng)于專業(yè)水準(zhǔn)的網(wǎng)頁，所以能制作出相當(dāng)于專業(yè)水準(zhǔn)的網(wǎng)頁，所以DreamweaverDreamweaver是網(wǎng)頁設(shè)計者的是網(wǎng)頁設(shè)計者的首選工具。首選工具。 DreamweaverDreamweaver支持動態(tài)支持動態(tài)HTMLHTML，并采用了，并采用了Roundtrip HTMLRoundtrip HTML技術(shù)，從技術(shù)，從而奠定了在網(wǎng)頁高級設(shè)計功能方面的領(lǐng)先地位。在進行網(wǎng)頁設(shè)計過程而奠定了在網(wǎng)頁高級設(shè)計功能方面的領(lǐng)先地

16、位。在進行網(wǎng)頁設(shè)計過程中，動態(tài)中，動態(tài)HTMLHTML技術(shù)能夠讓用戶輕松設(shè)計復(fù)雜的交互式網(wǎng)頁，產(chǎn)生動態(tài)技術(shù)能夠讓用戶輕松設(shè)計復(fù)雜的交互式網(wǎng)頁，產(chǎn)生動態(tài)效果；而效果；而Roundtrip HTMLRoundtrip HTML技術(shù)則可以真正支持技術(shù)則可以真正支持HTMLHTML源編輯模式，不源編輯模式，不會產(chǎn)生冗余代碼，使網(wǎng)頁渲染速度加快。因此，會產(chǎn)生冗余代碼，使網(wǎng)頁渲染速度加快。因此，DreamweaverDreamweaver是一種是一種可以滿足多層次需求、功能強大的可視化專業(yè)級網(wǎng)頁設(shè)計及制作工具?？梢詽M足多層次需求、功能強大的可視化專業(yè)級網(wǎng)頁設(shè)計及制作工具。1.3.2網(wǎng)頁美化工具網(wǎng)頁美化工具

17、 為了使制作的網(wǎng)頁更為美觀，用戶在利用網(wǎng)頁制作工具制作網(wǎng)為了使制作的網(wǎng)頁更為美觀，用戶在利用網(wǎng)頁制作工具制作網(wǎng)頁時，還需利用網(wǎng)頁美化頁時，還需利用網(wǎng)頁美化 工具對網(wǎng)頁進行美化。工具對網(wǎng)頁進行美化。 1Photoshop 它是目前公認的它是目前公認的PC機上最好的通用平面美術(shù)設(shè)計軟件，它功能機上最好的通用平面美術(shù)設(shè)計軟件，它功能完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟完善、性能穩(wěn)定、使用方便，所以在幾乎所有的廣告、出版、軟件公司，件公司，Photoshop都是首選的平面制作工具。都是首選的平面制作工具。3Flash它是一種交互式動畫設(shè)計工具，用它可以將音樂、聲它是一種交互式動畫設(shè)

18、計工具，用它可以將音樂、聲效、動畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)效、動畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動態(tài)效果。頁動態(tài)效果。4AspnMicrosoft 腳本調(diào)試程序。 您可以使用腳本調(diào)試程序調(diào)試 . n管理工具。 許多應(yīng)用程序設(shè)置可在 Internet 服務(wù)管理器上進行， 這是 Internet Information Server 和 Personal Web Server （在 Windows NT Workstation 上）的管理工具。 n文件上載。 瀏覽器可以通過 Posting Acceptor 應(yīng)用程序?qū)⑽募陷d到 Web 服務(wù)器。可以編寫 ASP 腳本來發(fā)送帶有從 Posting Acceptor 傳來的信息的 email， 如每一個上載文件的位置和名稱。 n新的 ASP 組件。 ASP 提供了新的基礎(chǔ)組件。 n應(yīng)用程序根目錄的改變。2.4.2 網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作1靜態(tài)網(wǎng)頁的設(shè)計與制作靜態(tài)網(wǎng)頁的設(shè)計與制