【正文】 ndows XP下的 IE瀏覽器在 1024＊768分辨率的顯示器下看到的微軟主頁 (圖 422)很不一樣。分辨率越大，顯示面積就越大，所以能顯示的內(nèi)容就越多。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 二、版面布局設(shè)計(jì)（ 1） 800＊ 600是目前大多數(shù)顯示器設(shè)置的分辨率，所以很多網(wǎng)站在設(shè)計(jì)時(shí)都針對 800＊ 600進(jìn)行設(shè)計(jì)。但是 1024＊ 768卻是未來的發(fā)展趨勢，將日益成為主流的分辨率模式，所以在設(shè)計(jì)時(shí)最好能兼顧這兩種分辨率。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 二、版面布局設(shè)計(jì)（ 1） 第二步 是確定網(wǎng)頁的框架?？蚣苤傅氖窃趺礃訌恼w上把頁面劃分開來，比如上下分或者左右分。框架有很多種，最簡單的是圖 423所示的左右型框架和上下型框架，例如圖 420所示的湖南教師網(wǎng)站的內(nèi)容網(wǎng)頁就是其中的第一種框架。這種框架一般有大小兩塊區(qū)域，其中一塊較大的區(qū)域放置網(wǎng)頁的主體內(nèi)容，它通常占據(jù)整個(gè)屏幕的五分之四。 而另一塊較小的區(qū)域 通常放置的是網(wǎng)站標(biāo) 志和導(dǎo)航條。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 二、版面布局設(shè)計(jì)（ 1） 將上下型框架和左右型框架結(jié)合起來可以形成復(fù)合型框架，如圖 424顯示的就是幾種比較常見的復(fù)合型框架。復(fù)合型框架非常適合于布局大量的內(nèi)容，所以經(jīng)常用于網(wǎng)站主頁的版面布局，比如圖 412所示的德德瑪網(wǎng)站主頁采用的就是圖 424中第 5種復(fù)合型框架，圖415所示的首都之窗 主頁和圖 418湖南教師 網(wǎng)主頁采用的就是圖 424中第 4種復(fù)合型框架 。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 二、版面布局設(shè)計(jì)（ 1） 當(dāng)然，并不是所有的網(wǎng)頁都是有框架的，往往這時(shí)的網(wǎng)頁都具有相當(dāng)鮮明的個(gè)性。它將網(wǎng)頁的內(nèi)容很好地融入到圖片或者 FLASH動(dòng)畫當(dāng)中，給人一種與眾不同的感覺。這種無框架的設(shè)計(jì)通常很難，需要很高的電腦美術(shù)功底才行。很多個(gè)人站點(diǎn)或者藝術(shù)站點(diǎn)都會(huì)采用無框架結(jié)構(gòu)，例如可樂貓網(wǎng)站主頁。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 二、版面布局設(shè)計(jì)（ 1） 第三步 就是在框架的不同區(qū)域上安排不同的內(nèi)容。不同的網(wǎng)頁內(nèi)容自然是不一樣的，所以在這里只是向大家介紹內(nèi)容編排上的一個(gè)基本知識，那就是人們在瀏覽一個(gè)網(wǎng)頁的時(shí)候，通常會(huì)把第一眼停留在網(wǎng)頁的左上角或中間的地方 (如圖 425所示 )，然后才會(huì)瀏覽其他部分。這個(gè)部分通常稱為 焦點(diǎn)，所以在布局內(nèi)容的時(shí)候， 應(yīng)該把最能傳達(dá)信息、最能吸 引人的內(nèi)容放在這些地方， 比如網(wǎng)站標(biāo)志和最新新聞。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 二、版面布局設(shè)計(jì)（ 2） 2. 版面布局的基本方法 熟悉網(wǎng)頁制作的人在拿到網(wǎng)頁的相關(guān)內(nèi)容后，也許很快就可以在腦子里形成大概的布局，并且可以直接用網(wǎng)頁制作工具開始制作。但是對不熟悉網(wǎng)頁布局的人來說，這么做有相當(dāng)大的困難，所以這時(shí)，就需要借助于其他的方法來進(jìn)行網(wǎng)頁布局 。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 二、版面布局設(shè)計(jì)（ 2） 第一種方法是用手工的方式在紙上畫草圖 。 第二種方法使用網(wǎng)頁制作工具 Dreamweaver或Frontpage， 這兩種工具都提供了圖 423和圖 424所示的網(wǎng)頁框架集 ， 或者使用表格布局法 。 第三種方法是用專業(yè)制圖軟件來進(jìn)行布局（如Fireworks和 Photoshop等），用它們可以像設(shè)計(jì)一幅圖片、一幅招貼畫、一幅廣告一樣去設(shè)計(jì)一個(gè)網(wǎng)頁的界面，然后再考慮如何用網(wǎng)頁制作工具去實(shí)現(xiàn)這個(gè)網(wǎng)頁 。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 網(wǎng)站的導(dǎo)航設(shè)計(jì) 【本節(jié)內(nèi)容 】 一 . 導(dǎo)航的實(shí)現(xiàn)方法 二 . 導(dǎo)航的設(shè)計(jì)策略 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 一、導(dǎo)航的實(shí)現(xiàn)方法（ 1） 1. 導(dǎo)航條 導(dǎo)航最常用的實(shí)現(xiàn)方法就是 “ 導(dǎo)航條 ” 。在導(dǎo)航條中，超鏈接所對應(yīng)的網(wǎng)頁在網(wǎng)站的層次型結(jié)構(gòu)中是并列的，所以通過它可以快速地切換到并列的其他網(wǎng)頁。比如圖 426所示的多媒體 CAI課件設(shè)計(jì)制作網(wǎng)站主頁左邊一列便是一個(gè)導(dǎo)航條， 該導(dǎo)航條在所有網(wǎng)頁中都 存在，只要單擊這個(gè)導(dǎo)航 條中任意一個(gè)欄目名，就 可進(jìn)入該欄目首頁。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 一、導(dǎo)航的實(shí)現(xiàn)方法（ 2） 2. 路徑導(dǎo)航 除了普通的導(dǎo)航條之外，導(dǎo)航另一種非常重要的實(shí)現(xiàn)方法是 “ 路徑導(dǎo)航 ” ，即在網(wǎng)頁上顯示這個(gè)網(wǎng)頁在網(wǎng)站層次型結(jié)構(gòu)上的位置。通 過路徑導(dǎo)航，用戶不僅可 以了解當(dāng)前所處的位置， 還可以快速地返回到當(dāng)前 網(wǎng)頁以上的任何一層網(wǎng)頁。 圖 428 路徑導(dǎo)航 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 一、導(dǎo)航的實(shí)現(xiàn)方法（ 3） 3. 其它導(dǎo)航方式 除了 “ 導(dǎo)航條 ” 和 “ 路徑導(dǎo)航 ” 重要方法之外，還有重點(diǎn)導(dǎo)航、相關(guān)導(dǎo)航等擴(kuò)展導(dǎo)航方法，這些導(dǎo)航可以讓用戶有更多更靈活的方式找到自己所感興趣的網(wǎng)頁。例如圖 429所示新浪網(wǎng)網(wǎng)頁里的 “ 相關(guān)鏈接 ” 是 “ 相關(guān)導(dǎo)航 ” 。有些網(wǎng)頁上 還有 “ 重點(diǎn)導(dǎo)航 ” ，在醒目的 地方用一個(gè)圖案或按鈕鏈接 到重要的網(wǎng)頁中去。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 二、導(dǎo)航的設(shè)計(jì)策略 在設(shè)計(jì)網(wǎng)站導(dǎo)航時(shí) ， 可以采用的一些基本策略： 首先 ， 至少要使用一個(gè)一層欄目的導(dǎo)航條 ， 如果欄目底下也有很多內(nèi)容 ， 可以分很多子類的話 ， 那么可以進(jìn)一步設(shè)計(jì)欄目下的導(dǎo)航條 。 其次 ， 如果網(wǎng)站的層次很深 ， 比如四層以上 （ 主頁作為第一層 ） ， 最好使用路徑導(dǎo)航 。 路徑導(dǎo)航可以從第三層以下的網(wǎng)頁開始出現(xiàn) 。 其他導(dǎo)航方式作為輔助的導(dǎo)航手段，視實(shí)際需要而定 。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 練習(xí)四 在因特網(wǎng)上找到一個(gè)欄目層次在三層以內(nèi)的網(wǎng)站 ， 認(rèn)真瀏覽后 ， 完成如下練習(xí)： 1. 寫出這個(gè)網(wǎng)站的名稱與網(wǎng)站地址； 2. 畫出這個(gè)網(wǎng)站的欄目層次結(jié)構(gòu)圖； 3. 畫出這個(gè)網(wǎng)站的目錄結(jié)構(gòu)圖； 4. 分析該網(wǎng)站的風(fēng)格（顏色搭配、版面布局）、導(dǎo)航方式。 網(wǎng)頁制作與網(wǎng)站設(shè)計(jì) 實(shí)驗(yàn)四 XXX個(gè)人網(wǎng)站的規(guī)劃與設(shè)計(jì) 實(shí)驗(yàn)內(nèi)容： 1. 確定 XXX個(gè)人網(wǎng)站的主題 2. 規(guī)劃 XXX個(gè)人網(wǎng)站的欄目 （ 分層設(shè)計(jì) ） 3. 規(guī)劃好 XXX個(gè)人網(wǎng)站的目錄結(jié)構(gòu) 4. 設(shè)計(jì) XXX個(gè)人網(wǎng)站的風(fēng)格 （ 色彩搭配 、 版面布局等 ） 5. XXX個(gè)人網(wǎng)站的導(dǎo)航設(shè)計(jì)