《網(wǎng)站設(shè)計(jì)指南》第23章基于DIV+CSS的個人網(wǎng)站

1、第23章 基于DIV+CSS的個人網(wǎng)站前面介紹了Web標(biāo)準(zhǔn)的根本概念，及其實(shí)現(xiàn)的根本方法。采用DIV+CSS可以很快實(shí)現(xiàn)頁面布局，而且在頁面設(shè)計(jì)和維護(hù)時都帶來了極大的方便。本章將使用一個簡單的實(shí)例，介紹DIV+CSS頁面方式的簡單設(shè)計(jì)過程，希望借此能拋磚引玉。23.1 網(wǎng)站前期規(guī)劃在網(wǎng)站設(shè)計(jì)之前，都需要進(jìn)行精心的規(guī)劃，以便設(shè)計(jì)能順利進(jìn)行。在第12章中介紹了網(wǎng)站規(guī)劃的一些常用方法。網(wǎng)站規(guī)劃工作主要是分析網(wǎng)站的主題，根據(jù)主題確定網(wǎng)站內(nèi)容及其風(fēng)格定位。個人網(wǎng)站，用于展示個人的相關(guān)信息，更多的是表達(dá)個人的色彩。因此該網(wǎng)站的風(fēng)格就不必循規(guī)蹈矩，需要強(qiáng)調(diào)個性和自由灑脫。在色彩搭配上主要采用活潑和陽光，當(dāng)然

2、也可以選擇與性格相符或極具個性的搭配 23.1 網(wǎng)站前期規(guī)劃例如，蘋果公司網(wǎng)站采用的是色彩素雅的銀灰色作為主色調(diào)，從而突出了科技的主題，與其多彩的產(chǎn)品圖片進(jìn)行照應(yīng)，更顯情趣，如下圖。23.2 制作準(zhǔn)備在網(wǎng)站的大致內(nèi)容確定下來后，可以為網(wǎng)站的設(shè)計(jì)做一些準(zhǔn)備活動。這是網(wǎng)站制作順利進(jìn)行的根底。準(zhǔn)備活動主要是排列各個頁面的具體內(nèi)容，然后繪制出布局草圖。根據(jù)布局草圖準(zhǔn)備素材，最后用圖形軟件制作出效果圖。把效果圖分割，提出有用局部進(jìn)行修改，然后進(jìn)入頁面設(shè)計(jì)。23.2.1 布局草圖首頁作為網(wǎng)站的入口，必須為瀏覽者提供進(jìn)入欄目頁面的鏈接，從而方便瀏覽者對相關(guān)內(nèi)容進(jìn)行有選擇的閱讀。另外，首頁也是整個網(wǎng)站的綜合展

3、示，在首頁中可以看到各個欄目的相關(guān)信息，以吸引瀏覽者繼續(xù)進(jìn)行閱讀。因此把各局部排列如下圖。23.2.2 素材準(zhǔn)備成了頁面布局草圖的設(shè)計(jì)，那么頁面的整個框架已經(jīng)顯現(xiàn)出來。此時所需要的工作就是為設(shè)計(jì)過程準(zhǔn)備素材。素材是網(wǎng)頁設(shè)計(jì)中不可缺少的，只有準(zhǔn)備了充分的素材，才能在設(shè)計(jì)時做到順手拈來，從而不至于在設(shè)計(jì)時由于缺少素材而被迫中斷設(shè)計(jì)，阻礙網(wǎng)頁設(shè)計(jì)的順利進(jìn)行。設(shè)計(jì)所需素材的來源途徑主要有兩種：一種是使用現(xiàn)成的素材；另一種是根據(jù)自己需要來設(shè)計(jì)素材。23.2.3 繪制效果圖收集或制作好素材后，根據(jù)布局草圖，使用圖形制作軟件如Photoshop和Fireworks等把它們裝配起來，根本可以繪制出網(wǎng)頁的效果。

4、對不滿意的地方可以進(jìn)行修改，直到滿意為止。效果圖制作完成后，對其進(jìn)行切割，以便在網(wǎng)頁中使用，如下圖。23.2.4 建立站點(diǎn)在Dreamweaver中設(shè)計(jì)網(wǎng)站都需要創(chuàng)立一個站點(diǎn)，然后才能在站點(diǎn)中進(jìn)行設(shè)計(jì)和測試。Dreamewaver CS3提供了強(qiáng)大的站點(diǎn)管理功能，不管網(wǎng)站程序是在本地效勞器還是在遠(yuǎn)程效勞器，都可以方便地進(jìn)行管理和修改，而且可以同時管理多個站點(diǎn)。創(chuàng)立站點(diǎn)的具體步驟如下：23.3 頁面編寫一系列的準(zhǔn)備活動完成后，就可以進(jìn)入到頁面編寫。在前一章已經(jīng)介紹了如何使用DIV+CSS進(jìn)行布局，那么在本節(jié)中使用的方法也大同小異。在本節(jié)中還有一些新的方法，但根本原理都差不多，讀者應(yīng)該在實(shí)踐中仔細(xì)

5、體會。23.3.1 整體布局前面已經(jīng)介紹了布局草圖，本小節(jié)介紹把布局草圖轉(zhuǎn)化為頁面布局，同時還需要結(jié)合效果圖。DIV+CSS使用層來劃分區(qū)域，使用CSS樣式表完成定位，具體步驟如下：23.3.2 添加首頁內(nèi)容完成整個布局后，便可以為各個區(qū)域添加詳細(xì)的內(nèi)容，具體步驟如下：23.3.3 制作相冊詳細(xì)頁面 詳細(xì)頁面與首頁有許多共同的區(qū)域，可以通過修改首頁中的區(qū)域從而減少工作量，具體步驟如下：23.4 網(wǎng)站發(fā)布與上傳在所有頁面都制作完成后，需要把網(wǎng)站發(fā)布到Internet效勞器上，才能被他人所瀏覽。效勞器空間有租用的，也有免費(fèi)提供的。免費(fèi)提供的沒有效勞保障和足夠的支持，不過對于初學(xué)者，也可以滿足要求。

6、除了空間之外還需要網(wǎng)站域名，也就是別人訪問網(wǎng)站時的地址。一般在申請免費(fèi)空間時會一起提供。但大多數(shù)都是二級域名。如果需要一級域名，那么需要向域名提供商注冊，并交納相應(yīng)的費(fèi)用。把本地網(wǎng)站文件上傳到網(wǎng)絡(luò)空間上，有多種方法。一般采用FTP軟件進(jìn)行，另一個是通過Dreamweaver進(jìn)行發(fā)布和上傳。在此介紹使用Dreamweaver進(jìn)行發(fā)布和上傳。具體步驟如下：23.5 專家總結(jié)本章介紹了基于DIV+CSS的個人網(wǎng)站的制作過程，重點(diǎn)介紹了如何規(guī)劃網(wǎng)頁的設(shè)計(jì)，以及內(nèi)容的安排。素材準(zhǔn)備是網(wǎng)站制作過程中必不可少的一步，素材的好壞直接影響到網(wǎng)站的效果。通過本章的學(xué)習(xí)，讀者可以在實(shí)踐中掌握DIV+CSS布局，制作出符合Web標(biāo)準(zhǔn)的網(wǎng)站，只有