網(wǎng)站與網(wǎng)頁的基本知識(shí)要點(diǎn)課件

第一講——網(wǎng)站與網(wǎng)頁的基本知識(shí)第一講——網(wǎng)站與網(wǎng)頁的基本知識(shí)1課程介紹教學(xué)計(jì)劃參考書目

《DreamweaverMXFlashMXFireworksMX網(wǎng)頁設(shè)計(jì)培訓(xùn)教程》西安電子科技大學(xué)出版社乘方工作室《DreamweaverMX2004完美網(wǎng)頁設(shè)計(jì)與制作》中國青年出版社姜楠《PhotoshopCSDreamweaverMX2004FlashMX2004網(wǎng)頁設(shè)計(jì)黃金搭檔》中國青年出版社鄒婷等課程介紹教學(xué)計(jì)劃2Internet

Internet起源于美國國防部的ARPANET網(wǎng)。目前Internet已成為一個(gè)巨大信息資源，1990年，我國正式向Internet管理中心注冊(cè)了區(qū)域名CN，并于1994年開通了Internet的全功能服務(wù)。

Internet

Internet起源于美國國防部的ARPA3基本術(shù)語網(wǎng)頁(WebPage)：由文字、圖片、動(dòng)畫、超鏈接等組成的，通常以html或htm作為文件的擴(kuò)展名,可以在www網(wǎng)上傳輸，并被瀏覽器認(rèn)識(shí)和翻譯成頁面顯示出來的文件。網(wǎng)站(WebSite)：網(wǎng)站就是網(wǎng)頁的集合其中包括一個(gè)首頁和若干個(gè)分頁。網(wǎng)站設(shè)計(jì)者先把整個(gè)網(wǎng)站結(jié)構(gòu)規(guī)劃好，然后在分別制作各個(gè)網(wǎng)頁。首頁(HomePage)URL(Uniformresourcelocator)Html(HypertextMarkupLanguage)：超文本標(biāo)記語言是描述性解釋語言，需要在瀏覽器解釋執(zhí)行，主要用于創(chuàng)建WEB文檔。由于它編寫制作非常簡單，在Internet領(lǐng)域中被廣泛應(yīng)用，成為WWW的核心技術(shù)之一。

基本術(shù)語4HTTP：超文本傳輸協(xié)議，它是一種常用的網(wǎng)絡(luò)通訊協(xié)議。若想鏈接到某一特定的網(wǎng)頁時(shí)，就必須通過HTTP協(xié)議。FTP：文件傳輸協(xié)議。與HTTP協(xié)議相同，它也是URL地址使用的一種協(xié)議名稱，以指定傳輸某一種互聯(lián)網(wǎng)資源。HTTP協(xié)議用于鏈接到某一網(wǎng)頁，而FTP協(xié)議則是用于上傳或是下載文件的情況。HTTP：超文本傳輸協(xié)議，它是一種常用的網(wǎng)絡(luò)通訊協(xié)議。若想鏈5FrontpageDreamweaver系Macromedia公司的集網(wǎng)頁制作和網(wǎng)站管理的所見即所得的網(wǎng)頁制作工具。兩者的區(qū)別FrontPage占領(lǐng)的是中級(jí)市場(chǎng)，比較重視網(wǎng)頁的開發(fā)效率、易學(xué)易用。而Dreamweaver主攻的是網(wǎng)頁高級(jí)設(shè)計(jì)市場(chǎng)，所強(qiáng)調(diào)的是更強(qiáng)大的網(wǎng)頁控制、設(shè)計(jì)能力及創(chuàng)意的完全發(fā)揮。Dreamweaver在功能的完善，使用的便捷上比FrontPage要強(qiáng)些。它囊括了FrontPage的所有基本操作，并開發(fā)了許多獨(dú)具特色的設(shè)計(jì)新概念，諸如行為（Behaviors）、時(shí)間線（Timeline）、資源庫（Library）等，支持層疊式樣表（CSS）。

網(wǎng)頁制作工具Frontpage網(wǎng)頁制作工具6Dreamweaver與FrontPage比較，有幾下幾點(diǎn)優(yōu)勢(shì)：1.產(chǎn)生的垃圾代碼少，網(wǎng)頁可讀性好，可以提高網(wǎng)頁瀏覽速度；

2.通過層功能，可以快速制作出復(fù)雜的頁面，圖片定位更容易；

3.可基本解決IE與Netscape的兼容性；

4.設(shè)計(jì)思路廣，內(nèi)涵豐富，創(chuàng)作隨意性強(qiáng)，可充分展現(xiàn)你的創(chuàng)意。Dreamweaver與FrontPage比較，有幾下幾點(diǎn)優(yōu)7網(wǎng)頁美化工具

為了使制作的網(wǎng)頁更為美觀，用戶在利用網(wǎng)頁制作工具制作網(wǎng)頁時(shí)，還需利用網(wǎng)頁美化工具對(duì)網(wǎng)頁進(jìn)行美化。1．Photoshop

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

Fireworks是由Macromedia公司開發(fā)的圖形處理工具，它的出現(xiàn)使Web作圖發(fā)生了革命性的變化。因?yàn)镕ireworks是第一套專門為制作網(wǎng)頁圖形而設(shè)計(jì)的軟件，同時(shí)也是專業(yè)的網(wǎng)頁圖形設(shè)計(jì)及制作的解決方案。作為一款為網(wǎng)絡(luò)設(shè)計(jì)而開發(fā)的圖像處理軟件，F(xiàn)ireworks還能夠自動(dòng)切割圖像、生成光標(biāo)動(dòng)態(tài)感應(yīng)的JavaScript程序等等，而且Fireworks具有強(qiáng)大的動(dòng)畫功能和一個(gè)相當(dāng)完美的網(wǎng)絡(luò)圖像生成器。用戶可以從http://www.／站點(diǎn)下載該軟件。網(wǎng)頁美化工具83．Flash

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．Flash9網(wǎng)頁制作的基本步驟(一）網(wǎng)站的整體規(guī)劃和設(shè)計(jì)進(jìn)行網(wǎng)站的整體規(guī)劃也就是組織網(wǎng)站的內(nèi)容和設(shè)計(jì)其結(jié)構(gòu)。網(wǎng)頁制作者在明確網(wǎng)頁制作的目的及要包括的內(nèi)容之后，接下來就應(yīng)該對(duì)網(wǎng)站進(jìn)行規(guī)劃，以確保文件內(nèi)容條理清楚、結(jié)構(gòu)合理，這樣不僅可以很好地體現(xiàn)設(shè)計(jì)者的意圖，也將使網(wǎng)站可維護(hù)性與可擴(kuò)展性增強(qiáng)。網(wǎng)頁制作的基本步驟(一）網(wǎng)站的整體規(guī)劃和設(shè)計(jì)10主題和名稱的確定主題要小而精。定位要小，內(nèi)容要精。題材最好是你自己擅長或者喜愛的內(nèi)容。題材不要太濫或者目標(biāo)太高。定位你的網(wǎng)站CI形象網(wǎng)站標(biāo)志logo設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩一般來說，一個(gè)網(wǎng)站的標(biāo)準(zhǔn)色彩不超過3種，太多則讓人眼花繚亂。一般來說，適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有：藍(lán)色，黃/橙色，黑/灰/白色三大系列色。設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體。設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語。主題和名稱的確定11確定欄目和版塊；一定記住要緊扣你的主題設(shè)定一個(gè)可以雙向交流的欄目確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)不要將所有文件都存放在根目錄下。按欄目內(nèi)容建立子目錄。每個(gè)主目錄下都建立獨(dú)立的images目錄。目錄的層次不要太深。其它需要注意的還有：

1.不要使用中文目錄；網(wǎng)絡(luò)無國界，使用中文目錄可能對(duì)網(wǎng)址的正確顯示造成困難。

2.不要使用過長的目錄；盡管服務(wù)器支持長文件名，但是太長的目錄名不便于記憶。

3.盡量使用意義明確的目錄；4.網(wǎng)站的首頁應(yīng)該提供整個(gè)站點(diǎn)各頁面的導(dǎo)航。5.二級(jí)頁面應(yīng)一一對(duì)應(yīng)首頁的各欄目，而且應(yīng)該包含到確定欄目和版塊；126.同級(jí)頁面、下一級(jí)頁面和首頁的鏈接。7.網(wǎng)站中還應(yīng)有一定的交互信息，如留言簿、Email鏈接、信息反饋表。網(wǎng)站的目錄結(jié)構(gòu)6.同級(jí)頁面、下一級(jí)頁面和首頁的鏈接。網(wǎng)站的目錄結(jié)構(gòu)13①層狀結(jié)構(gòu)

層狀結(jié)構(gòu)（如圖1.8所示）類似于目錄系統(tǒng)的樹型結(jié)構(gòu)，由網(wǎng)站文件的主頁開始，依次劃分為一級(jí)標(biāo)題、二級(jí)標(biāo)題等等，逐級(jí)細(xì)化，直至提供給瀏覽者具體信息。主頁頁面1頁面2頁面3頁面4頁面5頁面6頁面7一級(jí)標(biāo)題二級(jí)標(biāo)題圖1.8層狀結(jié)構(gòu)①層狀結(jié)構(gòu)主頁頁面1頁面2頁面3頁面4頁面5頁面6頁面714②線性結(jié)構(gòu)線性結(jié)構(gòu)（如圖1.9所示）類似于數(shù)據(jù)結(jié)構(gòu)中的線性表，用于組織本身的線性順序形式存在的信息，可以引導(dǎo)瀏覽者按部就班地瀏覽整個(gè)網(wǎng)站文件。這種結(jié)構(gòu)一般都用在意義是平行的頁面上。通常情況下，網(wǎng)站文件的結(jié)構(gòu)是層狀結(jié)構(gòu)和線性結(jié)構(gòu)相結(jié)合的。這樣可以充分利用兩種結(jié)構(gòu)各自的特點(diǎn)，使網(wǎng)站文件既具有條理性、規(guī)范性，又可同時(shí)滿足設(shè)計(jì)者和瀏覽者的要求。主頁頁面1頁面2頁面3圖1.9線性結(jié)構(gòu)②線性結(jié)構(gòu)主頁頁頁頁圖1.9線性結(jié)構(gòu)15③Web結(jié)構(gòu)Web結(jié)構(gòu)（如圖1.10所示）類似于Internet的組成結(jié)構(gòu)，各網(wǎng)頁之間形成網(wǎng)狀連接，允許用戶隨意瀏覽。主頁頁面1頁面2頁面3頁面4頁面5頁面7頁面8一級(jí)標(biāo)題二級(jí)標(biāo)題圖1.10Web結(jié)構(gòu)頁面6③Web結(jié)構(gòu)主頁頁面1頁面2頁面3頁面4頁面5頁面7頁面161．收集整理資料2．準(zhǔn)備素材3．內(nèi)容規(guī)劃(二）網(wǎng)頁設(shè)計(jì)與制作1．靜態(tài)網(wǎng)頁的設(shè)計(jì)與制作

一個(gè)好的網(wǎng)站首先是內(nèi)容豐富，其次就是網(wǎng)頁設(shè)計(jì)美觀。對(duì)于網(wǎng)頁的外觀設(shè)計(jì)，提供以下建議：1．收集整理資料17（1）不要先決定網(wǎng)頁的外觀，然后迫使自己去適應(yīng)它，應(yīng)該根據(jù)網(wǎng)站的訪問者對(duì)象、要提供的信息以及制作目標(biāo)得出一個(gè)最適合的網(wǎng)頁架構(gòu)。（2）每頁排版不要太松散或用太大的字，盡量避免訪問者瀏覽網(wǎng)頁時(shí)要作大幅度的滾動(dòng)，對(duì)于篇幅太長的一頁可以使用內(nèi)部鏈接解決。須知，在一頁的上部是顯眼而寶貴的地方，不要只放幾個(gè)粗大的字或圖片。（3）切勿以800×600以上的分辨率設(shè)計(jì)網(wǎng)頁，常用的分辨率是640×480及800×600?，F(xiàn)在國內(nèi)的站點(diǎn)基本上都是800×600，但是如果主要是面向國外訪問者的站點(diǎn)，建議使用640×480。（4）不應(yīng)在每頁中插入太多的廣告。相信任何訪問者都不會(huì)喜歡瀏覽盡是些廣告的網(wǎng)頁，要考慮該頁內(nèi)容與廣告的比例，廣告太多，只會(huì)令人煩厭。（5）不要每頁都采用不同的墻紙，以免每次轉(zhuǎn)頁時(shí)都要花費(fèi)過多的時(shí)間去下載，采用相同的底色或墻紙還可以增強(qiáng)網(wǎng)頁一致性，以樹立自己的風(fēng)格。（1）不要先決定網(wǎng)頁的外觀，然后迫使自己去適應(yīng)它，應(yīng)該根據(jù)18（6）底色或墻紙必須與文字對(duì)比強(qiáng)烈，以易于閱讀。這并不是要求永遠(yuǎn)使用鮮亮的背景搭配深色的文字，但深色背景常要求與主題配合，有較多的顧慮，如果網(wǎng)頁是文章式或是包含大量文字，不妨在底色與文字的搭配上下些工夫，力求讓訪問者能夠舒適地閱讀網(wǎng)頁。（7）不要把圖片白色當(dāng)作透明，要知道別人的系統(tǒng)不一定把內(nèi)定底色設(shè)為白色，解決的辦法除了真的把該網(wǎng)頁的底色設(shè)為白色之外，最好還是用圖片編輯工具將圖片設(shè)為透明顏色。2．為網(wǎng)頁的添加動(dòng)態(tài)效果

靜態(tài)網(wǎng)頁制作完成后，接下來的工作就是為網(wǎng)頁添加動(dòng)態(tài)效果，包括一些腳本語言程序和數(shù)據(jù)庫程序的設(shè)計(jì)，以及加入動(dòng)畫效果等。（6）底色或墻紙必須與文字對(duì)比強(qiáng)烈，以易于閱讀。這并不是要19（三）

測(cè)試網(wǎng)頁

當(dāng)網(wǎng)頁設(shè)計(jì)人員制作完所有網(wǎng)站頁面之后，需要對(duì)所設(shè)計(jì)的網(wǎng)頁進(jìn)行審查和測(cè)試，測(cè)試內(nèi)容包括功能性測(cè)試和完整性測(cè)試兩個(gè)方面。所謂功能性測(cè)試就是要保證網(wǎng)頁的可用性，達(dá)到最初的內(nèi)容組織設(shè)計(jì)目標(biāo)，實(shí)現(xiàn)所規(guī)定的功能，讀者可方便快速地尋找到所需的內(nèi)容。完整性測(cè)試就是保證頁面內(nèi)容顯示正確，鏈接準(zhǔn)確，無差錯(cuò)無遺漏。如果在測(cè)試過程中發(fā)現(xiàn)了錯(cuò)誤，就要及時(shí)修改，在準(zhǔn)確無誤后,方可正式在Internet上發(fā)布。在進(jìn)行功能性測(cè)試和完整性測(cè)