第20章制作個人博客頁面

1、第20章制作個人博客頁面在制作具體頁面之前，先要對頁面進(jìn)行大體的規(guī)劃，在制作具體頁面之前，先要對頁面進(jìn)行大體的規(guī)劃，這個規(guī)劃可以幫助確定頁面的大體結(jié)構(gòu)，這個步驟一般在頭這個規(guī)劃可以幫助確定頁面的大體結(jié)構(gòu)，這個步驟一般在頭腦中進(jìn)行，可以不必顯示在效果圖上。在頁面區(qū)塊大概構(gòu)思腦中進(jìn)行，可以不必顯示在效果圖上。在頁面區(qū)塊大概構(gòu)思完成后，使用完成后，使用Photoshop的切片工具對頁面進(jìn)行切割，在切的切片工具對頁面進(jìn)行切割，在切割的過程中制作出頁面的背景等修飾圖片。割的過程中制作出頁面的背景等修飾圖片。20.1.1 20.1.1 規(guī)劃頁面的內(nèi)容規(guī)劃頁面的內(nèi)容頁面結(jié)構(gòu)的規(guī)劃是制作整個頁面的基礎(chǔ)，好的頁

2、頁面結(jié)構(gòu)的規(guī)劃是制作整個頁面的基礎(chǔ)，好的頁面規(guī)劃能夠使頁面更具有擴展性，能夠適應(yīng)頁面內(nèi)容面規(guī)劃能夠使頁面更具有擴展性，能夠適應(yīng)頁面內(nèi)容的變化。在規(guī)劃頁面的時候，首先區(qū)分割頁面為幾個的變化。在規(guī)劃頁面的時候，首先區(qū)分割頁面為幾個部分，例如部分，例如Logo、Banner、導(dǎo)航條、側(cè)欄等內(nèi)容。然、導(dǎo)航條、側(cè)欄等內(nèi)容。然后在各個部分中切出內(nèi)容和背景。后在各個部分中切出內(nèi)容和背景。20.1.1 20.1.1 規(guī)劃頁面的內(nèi)容規(guī)劃頁面的內(nèi)容20.2 20.2 規(guī)劃站點文件夾規(guī)劃站點文件夾準(zhǔn)備好各種頁面文件之后，需要做的是制作好站點的各種文準(zhǔn)備好各種頁面文件之后，需要做的是制作好站點的各種文件夾。通常各種圖

3、片文件都放在名稱為件夾。通常各種圖片文件都放在名稱為images的文件夾中。樣式的文件夾中。樣式表文件單獨放在一個名稱為表文件單獨放在一個名稱為style的文件夾中。站點的首頁一般命的文件夾中。站點的首頁一般命名為名為“default”，并保存在根文件夾下。此時，站點的目錄結(jié)構(gòu)，并保存在根文件夾下。此時，站點的目錄結(jié)構(gòu)，如圖如圖20-3所示。所示。20.3 20.3 定義基本的樣式定義基本的樣式在站點建立后，就可以制作在站點建立后，就可以制作CSS樣式文件，并關(guān)聯(lián)在樣式文件，并關(guān)聯(lián)在XHTML文件中。然后通過在文件中。然后通過在XHTML中，對每個元素定義中，對每個元素定義（或關(guān)聯(lián)）不同的樣式

4、，制作頁面的各個部分。按照最初規(guī)（或關(guān)聯(lián)）不同的樣式，制作頁面的各個部分。按照最初規(guī)劃的頁面結(jié)構(gòu)，整個頁面分為頭部內(nèi)容、導(dǎo)航內(nèi)容、主體內(nèi)劃的頁面結(jié)構(gòu)，整個頁面分為頭部內(nèi)容、導(dǎo)航內(nèi)容、主體內(nèi)容、底部內(nèi)容幾個部分。本節(jié)講解定義和關(guān)聯(lián)容、底部內(nèi)容幾個部分。本節(jié)講解定義和關(guān)聯(lián)CSS文件，以文件，以及頁面頭部內(nèi)容的制作，其具體內(nèi)容如下所示。及頁面頭部內(nèi)容的制作，其具體內(nèi)容如下所示。20.3.1 20.3.1 新建新建CSSCSS文件文件在制作具體的內(nèi)容之前，首先要制作好需要使用的在制作具體的內(nèi)容之前，首先要制作好需要使用的CSS樣式文件，并在樣式文件，并在XHTML中調(diào)用該文件。這樣做可以將頁面中調(diào)用該

5、文件。這樣做可以將頁面結(jié)構(gòu)部分和表現(xiàn)修飾部分分離到兩個文件中，便于后期的維結(jié)構(gòu)部分和表現(xiàn)修飾部分分離到兩個文件中，便于后期的維護(hù)。在護(hù)。在style文件夾中右擊新建一個文本文檔，然后更改名稱文件夾中右擊新建一個文本文檔，然后更改名稱為為“style.css”。20.3.2 20.3.2 定義頁面的基礎(chǔ)樣式定義頁面的基礎(chǔ)樣式新建頁面之后，頁面的默認(rèn)標(biāo)題為新建頁面之后，頁面的默認(rèn)標(biāo)題為“無標(biāo)題文檔無標(biāo)題文檔”，所以還需要將文檔更改為更有意義的名稱。另外為了更好的所以還需要將文檔更改為更有意義的名稱。另外為了更好的顯示頁面內(nèi)容，以及輔助宣傳頁面，還需要修改和定義頁面顯示頁面內(nèi)容，以及輔助宣傳頁面，還

6、需要修改和定義頁面的文字編碼、的文字編碼、標(biāo)簽等相關(guān)內(nèi)容，其具體的代碼如下標(biāo)簽等相關(guān)內(nèi)容，其具體的代碼如下所示。所示。20.4 20.4 制作頁面頭部制作頁面頭部在站點建立后，就可以制作在站點建立后，就可以制作CSS樣式文件，并關(guān)聯(lián)在樣式文件，并關(guān)聯(lián)在XHTML文件中。然后通過在文件中。然后通過在XHTML中，對每個元素定義中，對每個元素定義（或關(guān)聯(lián)）不同的樣式，制作頁面的各個部分。按照最初規(guī)（或關(guān)聯(lián)）不同的樣式，制作頁面的各個部分。按照最初規(guī)劃的頁面結(jié)構(gòu)，整個頁面分為頭部內(nèi)容、導(dǎo)航內(nèi)容、主體內(nèi)劃的頁面結(jié)構(gòu)，整個頁面分為頭部內(nèi)容、導(dǎo)航內(nèi)容、主體內(nèi)容、底部內(nèi)容幾個部分。本節(jié)講解定義和關(guān)聯(lián)容、底部

7、內(nèi)容幾個部分。本節(jié)講解定義和關(guān)聯(lián)CSS文件，以文件，以及頁面頭部內(nèi)容的制作，其具體內(nèi)容如下所示。及頁面頭部內(nèi)容的制作，其具體內(nèi)容如下所示。20.4.1 20.4.1 制作頁面頭部的結(jié)構(gòu)制作頁面頭部的結(jié)構(gòu)從效果圖可以看到，頁面頭部的內(nèi)容為兩行文本，從效果圖可以看到，頁面頭部的內(nèi)容為兩行文本，其中部分文本包含超級鏈接，為了更好的獨立控制每個其中部分文本包含超級鏈接，為了更好的獨立控制每個部分的顯示效果，在制作結(jié)構(gòu)的時候為各種內(nèi)容定義了部分的顯示效果，在制作結(jié)構(gòu)的時候為各種內(nèi)容定義了不同的不同的id，便于分別控制每個部分的顯示效果，其具體，便于分別控制每個部分的顯示效果，其具體的代碼如下所示。的代碼

8、如下所示。20.4.2 20.4.2 定義頁面頭部的樣式定義頁面頭部的樣式根據(jù)頁面頭部的結(jié)構(gòu)，可以分析出頭部的代碼分為幾個部分，根據(jù)頁面頭部的結(jié)構(gòu)，可以分析出頭部的代碼分為幾個部分，一部分是整體定義頁面大小和背景的一部分是整體定義頁面大小和背景的wrapper樣式。樣式。20.5 20.5 制作頁面導(dǎo)航制作頁面導(dǎo)航頁面導(dǎo)航內(nèi)容包括制作導(dǎo)航的結(jié)構(gòu)、導(dǎo)航的背景、鏈頁面導(dǎo)航內(nèi)容包括制作導(dǎo)航的結(jié)構(gòu)、導(dǎo)航的背景、鏈接樣式等。在導(dǎo)航的樣式中，首先要對各個元素進(jìn)行精確定接樣式等。在導(dǎo)航的樣式中，首先要對各個元素進(jìn)行精確定位。然后使用各種偽類和類選擇符，制作出每個導(dǎo)航鏈接的位。然后使用各種偽類和類選擇符，制作

9、出每個導(dǎo)航鏈接的獨立背景，以及顯示、隱藏效果。其具體內(nèi)容如下所示。獨立背景，以及顯示、隱藏效果。其具體內(nèi)容如下所示。20.5.1 20.5.1 制作頁面導(dǎo)航的結(jié)構(gòu)制作頁面導(dǎo)航的結(jié)構(gòu)頁面導(dǎo)航條主要由一個頁面導(dǎo)航條主要由一個元素和一個元素和一個元素嵌套元素嵌套而成。其中而成。其中元素用來制作導(dǎo)航部分的背景，元素用來制作導(dǎo)航部分的背景，元素元素用來制作導(dǎo)航條的具體內(nèi)容。其具體的用來制作導(dǎo)航條的具體內(nèi)容。其具體的XHTML代碼如下所代碼如下所示。示。20.5.2 20.5.2 定義頁面導(dǎo)航的樣式定義頁面導(dǎo)航的樣式導(dǎo)航的各種表現(xiàn)效果，主要通過在導(dǎo)航條的各個元素導(dǎo)航的各種表現(xiàn)效果，主要通過在導(dǎo)航條的各個元

10、素中定義背景和偽類實現(xiàn)的。大體可以分為兩個部分，一部分中定義背景和偽類實現(xiàn)的。大體可以分為兩個部分，一部分用來定義導(dǎo)航內(nèi)容的位置和整體效果，另一部分用來定義每用來定義導(dǎo)航內(nèi)容的位置和整體效果，另一部分用來定義每個導(dǎo)航鼠標(biāo)懸停時候的轉(zhuǎn)換效果。個導(dǎo)航鼠標(biāo)懸停時候的轉(zhuǎn)換效果。20.6 20.6 制作頁面主體制作頁面主體頁面主體內(nèi)容由日志內(nèi)容和側(cè)欄內(nèi)容兩個部分。由于頁面主體內(nèi)容由日志內(nèi)容和側(cè)欄內(nèi)容兩個部分。由于日志和側(cè)欄部分的內(nèi)容都由可能擴展，所以在制作的時候要日志和側(cè)欄部分的內(nèi)容都由可能擴展，所以在制作的時候要將高度定義為自動伸展。由于日志部分和側(cè)欄內(nèi)容都很多，將高度定義為自動伸展。由于日志部分和側(cè)

11、欄內(nèi)容都很多，所以本節(jié)省略了這兩部分的制作，只講解主體結(jié)構(gòu)的制作方所以本節(jié)省略了這兩部分的制作，只講解主體結(jié)構(gòu)的制作方法。法。20.6.1 20.6.1 制作頁面主體的結(jié)構(gòu)制作頁面主體的結(jié)構(gòu)在頁面的主體內(nèi)容中，由于導(dǎo)航部分的背景高度比較在頁面的主體內(nèi)容中，由于導(dǎo)航部分的背景高度比較高，所以要使用負(fù)的邊界值，將內(nèi)容向上移動。由于內(nèi)容位高，所以要使用負(fù)的邊界值，將內(nèi)容向上移動。由于內(nèi)容位置的原因，在日志部分和側(cè)欄部分需要使用更復(fù)雜的嵌套結(jié)置的原因，在日志部分和側(cè)欄部分需要使用更復(fù)雜的嵌套結(jié)構(gòu)，其具體的構(gòu)，其具體的XHTML代碼如下所示。代碼如下所示。20.6.2 20.6.2 定義頁面主體內(nèi)容的樣

12、式定義頁面主體內(nèi)容的樣式頁面主體內(nèi)容主要由頁面主體使用的背景圖片，以及頁面主體內(nèi)容主要由頁面主體使用的背景圖片，以及兩個主要內(nèi)容的位置顯示效果構(gòu)成的。其具體的代碼如下所兩個主要內(nèi)容的位置顯示效果構(gòu)成的。其具體的代碼如下所示。示。20.7 20.7 制作日志制作日志日志內(nèi)容主要由幾個重復(fù)的結(jié)構(gòu)完成的，其中主要要日志內(nèi)容主要由幾個重復(fù)的結(jié)構(gòu)完成的，其中主要要注意的問題是，控制各個區(qū)域的分隔距離。另外由于日志部注意的問題是，控制各個區(qū)域的分隔距離。另外由于日志部分是由幾個部分組成的，所以還要為每個部分定義的文本不分是由幾個部分組成的，所以還要為每個部分定義的文本不同的顯示顏色。日志內(nèi)容的具體制作過程

13、如下所示。同的顯示顏色。日志內(nèi)容的具體制作過程如下所示。20.7.1 20.7.1 制作日志內(nèi)容的結(jié)構(gòu)制作日志內(nèi)容的結(jié)構(gòu)日志結(jié)構(gòu)分為日志結(jié)構(gòu)分為3個部分，日志標(biāo)題、日志內(nèi)容、底部鏈個部分，日志標(biāo)題、日志內(nèi)容、底部鏈接。由于要對三個部分進(jìn)行分隔和修飾，所以要各自使用獨接。由于要對三個部分進(jìn)行分隔和修飾，所以要各自使用獨立的元素定義，其具體的立的元素定義，其具體的XHTML代碼如下所示。代碼如下所示。20.7.2 20.7.2 定義日志內(nèi)容的樣式定義日志內(nèi)容的樣式日志部分由三個部分組成，日志的標(biāo)題、日志的內(nèi)容、日志日志部分由三個部分組成，日志的標(biāo)題、日志的內(nèi)容、日志的相關(guān)信息，在每個部分中都需要定

14、義文本的顯示方式和位置，的相關(guān)信息，在每個部分中都需要定義文本的顯示方式和位置，其具體的代碼如下所示。其具體的代碼如下所示。20.8 20.8 制作側(cè)欄制作側(cè)欄側(cè)欄內(nèi)容用來顯示相關(guān)的個人信息、友情鏈接、日志側(cè)欄內(nèi)容用來顯示相關(guān)的個人信息、友情鏈接、日志分類等內(nèi)容。在這部分內(nèi)容中，分類等內(nèi)容。在這部分內(nèi)容中，CSS樣式包括兩個部分，一樣式包括兩個部分，一部分是通用的統(tǒng)一樣式，另一部分是各個內(nèi)容的獨立樣式。部分是通用的統(tǒng)一樣式，另一部分是各個內(nèi)容的獨立樣式。側(cè)欄內(nèi)容的具體制作方法如下所示。側(cè)欄內(nèi)容的具體制作方法如下所示。20.8.1 20.8.1 制作側(cè)欄的結(jié)構(gòu)制作側(cè)欄的結(jié)構(gòu)側(cè)欄內(nèi)容包括，個人檔案

15、、歸檔信息、友情鏈接、日側(cè)欄內(nèi)容包括，個人檔案、歸檔信息、友情鏈接、日志分類、推薦日志、統(tǒng)計信息等幾個部分。其中每個部分都志分類、推薦日志、統(tǒng)計信息等幾個部分。其中每個部分都是由標(biāo)題、內(nèi)容兩個部分構(gòu)成，根據(jù)內(nèi)容的不同，所使用的是由標(biāo)題、內(nèi)容兩個部分構(gòu)成，根據(jù)內(nèi)容的不同，所使用的結(jié)構(gòu)由略有區(qū)別。結(jié)構(gòu)由略有區(qū)別。20.8.2 20.8.2 定義側(cè)欄的通用樣式定義側(cè)欄的通用樣式側(cè)欄的通用樣式包括側(cè)欄標(biāo)題樣式、側(cè)欄文本樣側(cè)欄的通用樣式包括側(cè)欄標(biāo)題樣式、側(cè)欄文本樣式、側(cè)欄鏈接樣式等。這些樣式都是每個側(cè)欄內(nèi)容都式、側(cè)欄鏈接樣式等。這些樣式都是每個側(cè)欄內(nèi)容都要使用的樣式。其中側(cè)欄每個內(nèi)容的整體控制，以及要使

16、用的樣式。其中側(cè)欄每個內(nèi)容的整體控制，以及側(cè)欄標(biāo)題的顯示效果是通下面的代碼完成的，具體內(nèi)側(cè)欄標(biāo)題的顯示效果是通下面的代碼完成的，具體內(nèi)容如下所示。容如下所示。20.8.2 20.8.2 定義側(cè)欄的通用樣式定義側(cè)欄的通用樣式20.9 20.9 制作頁面底部內(nèi)容制作頁面底部內(nèi)容頁面底部內(nèi)容包括站點的相關(guān)信息、郵箱地址、歡迎頁面底部內(nèi)容包括站點的相關(guān)信息、郵箱地址、歡迎口號等。在制作頁面底部內(nèi)容的時候，只需要對各個文本和口號等。在制作頁面底部內(nèi)容的時候，只需要對各個文本和圖片元素進(jìn)行定位，同時定義好鏈接文本的顯示效果即可。圖片元素進(jìn)行定位，同時定義好鏈接文本的顯示效果即可。制作頁面底部內(nèi)容的具體步驟如下所示。制作頁面底部內(nèi)容的具體步驟如下所示。20.9.1 20.9.1 制