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

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

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

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

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

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

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