第9卷第3期天津電大學報2005年9月JOURNAL OF TIANJIN RTV UNIVERSITY現代教育技術如何優(yōu)化網站結構韓義(天津廣播電視大學,天津300191)摘要:網站結構對于網站的制作和運行至關重要。優(yōu)化的網站結構包括層次清晰的目錄結構,合理的文件存儲,高速的鏈接和導航,美觀的布局和有特色的網站內容。關鍵詞:網站結構;網站目錄結構;網站鏈接;網頁布局;網站內容中圖分類號: TP311文獻標識碼: C文章編號:1008 - 3006(2005)03 - 0039 - 03Internet正在繼續(xù)飛速發(fā)展,它的普及正在改變并將繼Clobal文件夾(存儲全局文件)續(xù)改變人類社會生活。許多政府、企業(yè)乃至個人在Inlemnet上建立了很多網站。網站制作技術已經成為現代人使用計欄目文件夾.算機的基本技能。Web文件夾L - Image 文件夾縱觀成功的網站，共同的特點是具有優(yōu)化的網站結構。優(yōu)化的網站結構是由幾個要素構成的，這幾個要素分欄目2文件夾別是網站目錄結構,網站鏈接結構,頁面的布局結構和網站Imags 文件夾的內容結構。欄目3文件夾-、網站的目錄結構LIngs 文件夾網站的目錄結構指的是網站的物理結構和文件的存儲結構。物理結構越清晰,對于站點的維護、內容的更新、未.圖2來的擴充和移植越方便。設計網站目錄結構的關鍵是結構如果網站存儲結構設計不合理，可能使網站運行產生不要太復雜,層次不要太多。對于不同規(guī)模的網站,文件夾錯誤。例如有的網站.在自己的計算機上可以正常運行,而及文件的存儲結構應該是不同的。上傳到服務器或移動到另-臺計算機上，就會發(fā)生不顯示對于一個小型網站，可以建立如圖1所示的存儲結圖片的錯誤。這主要是網站中圖片的存儲位置不正確或圖片鏈接路徑錯誤的原因。圖片的存儲位置不正確是指圖片主頁文件indea.thm文件沒有存儲在網站中,當網站移動位置以后,瀏鑒器在打開網頁時就會找不到圖片文件。解決這個問題的辦法是在HTML文件夾(存儲所有的htmal文件)插人圖片時注意調整圖片的存儲位置，將圖片存放到網站Myweb文件夾Inages 文件夾(存儲所有的aif. jieqg 圖形文件)的相應images文件夾中。鏈接路徑錯誤是指插人到網頁中的圖片使用了絕對路徑,當網站移動位置以后,導致瀏覽器. Metia文件夾(存儲圖形文件之外的多媒體文件，找不到圖片。例如有一個網頁index. htm,它的存儲位置為如聲音、動面和視頻等)c: /myweb/index. htm。在這個網頁中有一個圖片pho-to. jpg,該圖片的絕對存儲路徑為c: /myweb/ images/pho-對于規(guī)模較大的網站，與全局有關的文件應該放在網to/jpgo其中myweb為站點的根目錄。當把該站點上傳到服站根目錄下的Global子目錄中。在網站的根目錄下,按網站務器或移動到其它計算機中，如果站點沒有被存放在計算內容的欄目分別建立子目錄，每個子目錄中都要建立一個機C盤根目標中，當用瀏鑒器打開該網頁時，瀏鑒器就無獨立的images目錄,用來存放本欄目的圖片。目錄的層次法按原來的路徑找到該圖片文件，因此會不顯示圖片。解不應太多,一般在三層以內。目錄名要盡量意義明確。切忌決鏈接路徑錯誤的方法是用相對路徑../images/photo/將所有文件都放在網站的根目錄下。如圖2所示。jpg中國煤化工動到其它計算機的什TYHCNMHG收稿日期:2005 -07-08作者簡介:韓義(1955- -),男,天津廣播電視大學教學中心副教授。392005年第3期天津電大學報么位置，圖片的相對保存位置都不會發(fā)生變化，瀏覽網頁示它們。為了避免這種延遲，可以將- -個大表格分成若干時就不會發(fā)生找不到圖片的錯誤。當需要把絕對路徑轉化獨立的表格。注意在頁面中不要放置無用的表格，雖然它為相對路徑時，圖片文件的絕對路徑中與主頁文件相同的們是空的,但會使速度變慢,因為瀏覽器也要對它們進行解部分應該忽略，而只保留它們的不同之處。為了有助于避釋和顯示。越是復雜的表格,瀏覽器解釋的時間越長,因此免在制作網頁時出現上述的路徑錯誤，可以使用應該盡量少用嵌套表格。dreamweaver的站點管理功能來管理站點。即使用菜單命令4.用Dreamweaver或FrontPage 做的網頁有大量的垃site - new site新建站點并定義站點目錄之后，鏈接路徑自圾代碼，它會影響網頁的上傳和瀏覽速度。利用網頁壓縮動采用相對路徑，并且當你在站點中移動文件的時候，與軟件可以將網頁文件壓縮,去除一些冗余信息.且壓縮后不這些文件關聯的鏈接路徑都會自動更改,因此，就不會發(fā)會產生語法錯誤，不會改變網頁的外觀和功能。壓縮后的生路徑錯誤的情況。網頁文件大小可達到原來的70% ~ 80%。二、網站的鏈接結構三、頁面布局結構網站的鏈接結構是網站的邏輯結構，是網站運行時瀏頁面的布局如同一個產品的外觀給人第-印象，決定覽者可以隨時感受到的結構。一個良好的網站應該具有明.了能否吸引讀者的視線,增強閱讀的興趣。一個優(yōu)化的頁晰的邏輯關系，瀏覽者在瀏覽邏輯關系明晰的網站時會感面布局應該遵循以下的基本原則:主題鮮明.形象突出;便到輕松愉悅。設計好網站的鏈接是優(yōu)化網站結構的又一-個于閱讀、形式美觀;編排有序、布局合理。頁面布局主要涉關鍵問題。及以下幾個方面。網站的鏈接結構有樹狀結構、星狀結構、混合結構1.頁面的版面布局等。通常采用樹狀結構。網頁版面的布局要合理地運用網頁空間，讓網頁疏密導航欄是網站中使用的主要鏈接方式。導航欄通常是有致,井井有條,留下必要的空白,讓人感覺輕松。不要填指放置在各個網頁頂端的一組鏈接按鈕，也叫鏈接欄。導的密密實實，那樣會使人感到壓抑。頁面的視覺中心一般航欄為瀏覽者提供了一-組相關聯的超鏈接，通過導航欄瀏在屏幕中央或中間偏上的部位，因此應該將重要的文章和覽者可以了解網站中各個頁面之間的層次關系，并且可以圖片放在這個部位，其它部位放置稍次要的內容。較長的在各個頁面之間自由跳轉，很方便地查找自己所需的信文章不要放在一起,要有-定的間隔,較短的文章也不要放息。制作網站的軟件工具都提供了創(chuàng)建導航欄的功能，在在一起。對待圖片也是如此，要相互錯開,這樣可使頁面錯導航視圖中畫出網站的導航圖就可以方便地為網站加入落有致,避免中心偏離。文字和圖片具有互補的視覺關系，導航欄。從網站的制作上考慮，使用導航視圖還可以方便.頁面中文字太多顯得沉悶，圖片太多信息量小。因此圖片網站的維護。當需要在網站中加入-一個網頁，并使這個網和文字要密切配合,互為襯托,既能活躍頁面,又使頁面有頁的鏈接進人導航欄時，只需要把這個網頁插人到導航視豐富的內容。圖中，系統就會自動給這個網頁添加指向其它網頁的鏈2. 頁面的風格選定接。頁面的風格如同人的氣質，是靈魂的體現。它通過版在設計網站鏈接結構時，一定要注意瀏覽者打開網頁面的設計,色彩的搭配,內容的選定,使瀏覽者對網頁產生的速度。所有成功網站,網頁的打開速度都比較快。如果網整體的印象。風格體現了網頁設計者綜合素質和藝術修頁打開速度太慢，用戶容易出現煩躁心理，繼而轉向其它養(yǎng)。不同的網頁內容應該有不同的風格，如游戲網站應該網站。鏈接的設計應該注意技巧，-般文字鏈接速度較活潑新奇,文藝娛樂網站應該明快亮麗,文化網站應該古樸快。當鏈接目標既可以是文字又可以是圖片時，應選擇文大方。頁面的風格可以借鑒模仿，可以吸取成功網站的亮字為鏈接目標。如果鏈接目標只有圖片時，要考慮圖片大.點和長處，加入自己的領悟,融會自己的觀點,形成新的組小?？梢詫⒁粋€圖片裁減成若千個小圖片。因為若干個小合與創(chuàng)新。.圖片比一個大圖片的下載速度要快許多。3.頁面的尺寸與分辨率制作網站時可以在技術上對超鏈接進行管理，以保證網頁的頁面尺寸與顯示器的大小和分辨率有關，頁面在文件移動和重新命名文檔時鏈接的可靠性。可以使用網尺寸越大,分辨率越高,頁面文件的信息量越大。頁面的長頁工具軟件的自動更新鏈接功能自動更新指向或來自某度可以超過屏幕窗口的尺寸，瀏覽時靠瀏覽者拖動垂直滾網頁的鏈接。動條可以看到更多的內容。一般情況頁面的長度不要超過我們無法改變Internet的速度，但你可以采用下面的兩屏,除非設計者認為網頁的內容很精彩。如果頁面長度-些技術來提高站點的下載速度。超過兩屏時,可以考慮使用書簽進行鏈接定位。I.導航欄應該最先調人，以便瀏覽者快速前往所需網頁的設計還要考慮顯示器的分辨率。有人只按照自的網頁。己屏幕的分辨率來設計制作網頁，而不考慮瀏覽者可能使2.頁面長度要短，使瀏覽者在頁面空間內可以迅速用不中國煤化工果混亂。目前上網瀏移動。3.將布局的表格打散。一般情況網頁版面布局多使覽多瀏覽石江小網小加平r邯能夠售圳ψ局美觀的網頁。適用IYHCNMHG中分辨率。因此應該讓用表格。如果你把頁面中所有的元素都包含在一個大的表不同分辨率的網頁制作方法如下:格中，瀏覽器只有將整個表格內容都下載下來后才開始顯(1)自然拉伸法伊月方數據韓義:如何優(yōu)化網站結構在主要靠表格和文字來表達信息的簡單網頁中，可以能使網站主題突出。由于網頁的結構是層次結構,為了使使用自然拉伸法。自然拉伸法是指在使用表格布局時，把讀者瀏覽方便，應該將主要內容放在首頁或者一、二級欄表格的寬度屬性設置為“100% ”,表格就會根據屏幕分辨目中。如果主要內容不得不放在深層網頁中,應該在首頁率的不同自動調整寬度，使表格總是充滿整個屏幕。自然或其它網頁中設置超鏈接。為了增強網站的交互功能，可拉伸法也有不足之處。如果網頁版面復雜，圖形元素之間以設置雙向交流的欄目，如論壇、留言、聊天等。要想讓網有精確的定位關系，拉伸或壓縮后網頁版面就會發(fā)生變站具有特色，網站的建設應該從內容上下工夫。興趣是制.形。另外分辨率變化后,文字行數也不好控制，要么太密，作網站的動力,沒有熱情,很難設計出優(yōu)秀的網站。如果是要么太稀。破壞了網頁版面效果。個人網站，一定要突出自己的個性，選擇自己最擅長或者(2)固定居中法最有興趣的內容。在網頁中插入一個最大的表格,把表格的寬度設置為如果想讓網頁有-些特色，可以適當地加- -些網頁制一個固定的像素值(一般為768像素),并且讓表格居中，作技巧,如聲音、動態(tài)效果,Java等。這些技巧不要加太多,在這個表格中再套用其它的表格。這樣就把網頁的寬度固它會影響網頁的下載速度。定了,不會超過800 x 600的分辨率。當瀏覽者使用1024x在內容結構中，穿插一些圖片可以增加閱讀的趣味768分辨率瀏覽網頁時,屏幕兩邊會留下空白,對頁面效果性，還有一目了然的效果。圖片不僅要好看，還要保證質影響不大。量，如果圖片處理不好或無關的圖片太多，會給人多余的(3)用戶選擇法感覺。要盡量減小圖片的字節(jié)數,因為圖片的大小對網頁你可以設計兩個主頁，分別對應800x600和1024x的傳輸速度影響很大。在處理圖片時應注意下面三個問.768兩種分辨率。把這兩個網頁分別命名為index800 htm題。和index1024. htm。再制作-個索引頁index. htm,在索引頁1.圖片格式。能夠用在網頁中的圖片格式有很多種，中制作出對應的兩個主頁的鏈接。當運行索引頁時由用戶-般使用GIF和JPG格式。使用掃描儀和數字相機輸入計根據自己的分辨率選擇運行。算機的圖片一般是人物和風景照片，圖片中的色彩比較4.頁面的色彩應用多,應該選擇使用JPG格式。如果圖片是使用Photoshop等色彩是人的視覺最敏感的東西。主頁的色彩處理的軟件制作的.圖片中的色彩比較少,可以選擇GIF格式。通好,可以錦上添花,達到事半功倍的效果。色彩應用的總原過使用Paint Shop Pro5. 0軟件中的“Color/Count Color則是:總體協調,局部對比。也就是主頁的整體色彩效果應Used"功能,可以知道圖片中的顏色數。使用"Decrease Color該是和諧的，只有局部的.小范圍的地方可以有一些強烈Deph"功能,可以臧少圖片所使用的顏色數。但要考慮圖片色彩的對比。由于圖片的瀏覽速度比較慢，因此不要用大的質量變化。圖片色彩數目減少以后直接存為GIF格式。量的圖片，而改用色彩來美化網頁。色彩與人們的情緒有2.圖片尺寸。應盡可能裁減掉圖片周圍的無用畫面，著微妙的關系，利用不同的色調設計網頁會給瀏覽者不同以減小圖片的尺寸,也就是減少圖片文件的大小。的心理感受。3.圖片顯示技巧。當圖片文件實在無法減小，可以采四、網站的內容結構用隔行GIF和逐級JPG方式顯示圖片。隔行CIF是指將圖網站的內容是網站的實質,是網站的精華。內容不僅片文件是按照隔行的方式來顯示，如先顯示奇數行，再顯要新、要精、要專,而且還要便于閱讀。吸引讀者的是網站示偶數行，使圖像逐漸變清楚。逐級JPCG是指可以讓圖片的標題。標題要符合內容的主題和風格,要有概括性，簡的顯示隨著圖片文件的傳送,以模糊向清晰漸變。在Pho-短,有特色,容易記。配合內容的表示，可以有一些鮮明的toshop等圖形處理軟件中，在保存圖片文件時可以選擇這標志和圖形,這些標志和圖形的設計創(chuàng)意應來自標題和內兩種圖片顯示方式。容,應是內容的集中體現?？偠灾粋€優(yōu)化的網站結構既要有技術上的科學網站的內容要按一定的方法分類,并為它們設立專門性、合理性和實用性,又要有文化上的可讀性、藝術性和趣的欄目,欄目不要太多,層次不要超過五層。特色欄目最好昧性，只有對網站結構進行精心的設計,對網站的內容進能直接從主頁到達。主題欄目在欄目中要占多數,這樣才行合理的挑選才能創(chuàng)建一個優(yōu)秀的網站。Discussion on Optimization of Structure of WebsiteHAN Yi(Tianjin Radio & TV University, Tianjin 300191)Abstract: The structure of website is very important for its ma中國煤化工。s calue link,arrangement and content. The catalogue and arrangement shoMHCNMHGhelinkshouldbereasonable and legible, and the content should be up-to-date, accurate and specialized.Key words: the structure of website; catalogue; link; arrangement(責任編輯林朋)41