制作個(gè)人博客頁(yè)面.ppt

第20章 制作個(gè)人博客頁(yè)面,個(gè)人博客頁(yè)面用來(lái)展示個(gè)人的一些信息、日志以及個(gè)人的圖片等等，是一個(gè)方便的展示平臺(tái)。個(gè)人博客頁(yè)面的設(shè)計(jì)和制作都比較自由。具體的制作過(guò)程包括以下幾個(gè)步驟，制作頁(yè)面效果圖，這個(gè)部分通常使用Photoshop完成。然后再使用Photoshop的切片工具，將效果圖的各個(gè)部分制成圖片。最后在Dreamweaver中制作成網(wǎng)頁(yè)。,20.1 制作頁(yè)面前的準(zhǔn)備工作,在制作具體頁(yè)面之前，先要對(duì)頁(yè)面進(jìn)行大體的規(guī)劃，這個(gè)規(guī)劃可以幫助確定頁(yè)面的大體結(jié)構(gòu)，這個(gè)步驟一般在頭腦中進(jìn)行，可以不必顯示在效果圖上。在頁(yè)面區(qū)塊大概構(gòu)思完成后，使用Photoshop的切片工具對(duì)頁(yè)面進(jìn)行切割，在切割的過(guò)程中制作出頁(yè)面的背景等修飾圖片。,20.1.1 規(guī)劃頁(yè)面的內(nèi)容,頁(yè)面結(jié)構(gòu)的規(guī)劃是制作整個(gè)頁(yè)面的基礎(chǔ)，好的頁(yè)面規(guī)劃能夠使頁(yè)面更具有擴(kuò)展性，能夠適應(yīng)頁(yè)面內(nèi)容的變化。在規(guī)劃頁(yè)面的時(shí)候，首先區(qū)分割頁(yè)面為幾個(gè)部分，例如Logo、Banner、導(dǎo)航條、側(cè)欄等內(nèi)容。然后在各個(gè)部分中切出內(nèi)容和背景。,20.1.1 規(guī)劃頁(yè)面的內(nèi)容,20.1.2 切分效果圖,在Photoshop中首先區(qū)分頁(yè)面中的修飾圖片和內(nèi)容圖片。然后將頁(yè)面中的文本內(nèi)容等隱藏，根據(jù)構(gòu)思的頁(yè)面區(qū)塊，切割出背景圖片和內(nèi)容圖片。最后將各種圖片內(nèi)容保存在磁盤(pán)的某個(gè)文件夾中。從軟件保存后的的圖片，都會(huì)默認(rèn)的使用編號(hào)的格式定義圖片的名稱(chēng)。,20.2 規(guī)劃站點(diǎn)文件夾,準(zhǔn)備好各種頁(yè)面文件之后，需要做的是制作好站點(diǎn)的各種文件夾。通常各種圖片文件都放在名稱(chēng)為images的文件夾中。樣式表文件單獨(dú)放在一個(gè)名稱(chēng)為style的文件夾中。站點(diǎn)的首頁(yè)一般命名為“default”，并保存在根文件夾下。此時(shí)，站點(diǎn)的目錄結(jié)構(gòu)，如圖20-3所示。,20.3 定義基本的樣式,在站點(diǎn)建立后，就可以制作CSS樣式文件，并關(guān)聯(lián)在XHTML文件中。然后通過(guò)在XHTML中，對(duì)每個(gè)元素定義（或關(guān)聯(lián)）不同的樣式，制作頁(yè)面的各個(gè)部分。按照最初規(guī)劃的頁(yè)面結(jié)構(gòu)，整個(gè)頁(yè)面分為頭部?jī)?nèi)容、導(dǎo)航內(nèi)容、主體內(nèi)容、底部?jī)?nèi)容幾個(gè)部分。本節(jié)講解定義和關(guān)聯(lián)CSS文件，以及頁(yè)面頭部?jī)?nèi)容的制作，其具體內(nèi)容如下所示。,20.3.1 新建CSS文件,在制作具體的內(nèi)容之前，首先要制作好需要使用的CSS樣式文件，并在XHTML中調(diào)用該文件。這樣做可以將頁(yè)面結(jié)構(gòu)部分和表現(xiàn)修飾部分分離到兩個(gè)文件中，便于后期的維護(hù)。在style文件夾中右擊新建一個(gè)文本文檔，然后更改名稱(chēng)為“style.css”。,20.3.2 定義頁(yè)面的基礎(chǔ)樣式,新建頁(yè)面之后，頁(yè)面的默認(rèn)標(biāo)題為“無(wú)標(biāo)題文檔”，所以還需要將文檔更改為更有意義的名稱(chēng)。另外為了更好的顯示頁(yè)面內(nèi)容，以及輔助宣傳頁(yè)面，還需要修改和定義頁(yè)面的文字編碼、標(biāo)簽等相關(guān)內(nèi)容，其具體的代碼如下所示。,20.4 制作頁(yè)面頭部,在站點(diǎn)建立后，就可以制作CSS樣式文件，并關(guān)聯(lián)在XHTML文件中。然后通過(guò)在XHTML中，對(duì)每個(gè)元素定義（或關(guān)聯(lián)）不同的樣式，制作頁(yè)面的各個(gè)部分。按照最初規(guī)劃的頁(yè)面結(jié)構(gòu)，整個(gè)頁(yè)面分為頭部?jī)?nèi)容、導(dǎo)航內(nèi)容、主體內(nèi)容、底部?jī)?nèi)容幾個(gè)部分。本節(jié)講解定義和關(guān)聯(lián)CSS文件，以及頁(yè)面頭部?jī)?nèi)容的制作，其具體內(nèi)容如下所示。,20.4.1 制作頁(yè)面頭部的結(jié)構(gòu),從效果圖可以看到，頁(yè)面頭部的內(nèi)容為兩行文本，其中部分文本包含超級(jí)鏈接，為了更好的獨(dú)立控制每個(gè)部分的顯示效果，在制作結(jié)構(gòu)的時(shí)候?yàn)楦鞣N內(nèi)容定義了不同的id，便于分別控制每個(gè)部分的顯示效果，其具體的代碼如下所示。,20.4.2 定義頁(yè)面頭部的樣式,根據(jù)頁(yè)面頭部的結(jié)構(gòu)，可以分析出頭部的代碼分為幾個(gè)部分，一部分是整體定義頁(yè)面大小和背景的wrapper樣式。,20.5 制作頁(yè)面導(dǎo)航,頁(yè)面導(dǎo)航內(nèi)容包括制作導(dǎo)航的結(jié)構(gòu)、導(dǎo)航的背景、鏈接樣式等。在導(dǎo)航的樣式中，首先要對(duì)各個(gè)元素進(jìn)行精確定位。然后使用各種偽類(lèi)和類(lèi)選擇符，制作出每個(gè)導(dǎo)航鏈接的獨(dú)立背景，以及顯示、隱藏效果。其具體內(nèi)容如下所示。,20.5.1 制作頁(yè)面導(dǎo)航的結(jié)構(gòu),頁(yè)面導(dǎo)航條主要由一個(gè)元素和一個(gè)元素嵌套而成。其中元素用來(lái)制作導(dǎo)航部分的背景，元素用來(lái)制作導(dǎo)航條的具體內(nèi)容。其具體的XHTML代碼如下所示。,20.5.2 定義頁(yè)面導(dǎo)航的樣式,導(dǎo)航的各種表現(xiàn)效果，主要通過(guò)在導(dǎo)航條的各個(gè)元素中定義背景和偽類(lèi)實(shí)現(xiàn)的。大體可以分為兩個(gè)部分，一部分用來(lái)定義導(dǎo)航內(nèi)容的位置和整體效果，另一部分用來(lái)定義每個(gè)導(dǎo)航鼠標(biāo)懸停時(shí)候的轉(zhuǎn)換效果。,20.6 制作頁(yè)面主體,頁(yè)面主體內(nèi)容由日志內(nèi)容和側(cè)欄內(nèi)容兩個(gè)部分。由于日志和側(cè)欄部分的內(nèi)容都由可能擴(kuò)展，所以在制作的時(shí)候要將高度定義為自動(dòng)伸展。由于日志部分和側(cè)欄內(nèi)容都很多，所以本節(jié)省略了這兩部分的制作，只講解主體結(jié)構(gòu)的制作方法。,20.6.1 制作頁(yè)面主體的結(jié)構(gòu),在頁(yè)面的主體內(nèi)容中，由于導(dǎo)航部分的背景高度比較高，所以要使用負(fù)的邊界值，將內(nèi)容向上移動(dòng)。由于內(nèi)容位置的原因，在日志部分和側(cè)欄部分需要使用更復(fù)雜的嵌套結(jié)構(gòu)，其具體的XHTML代碼如下所示。,20.6.2 定義頁(yè)面主體內(nèi)容的樣式,頁(yè)面主體內(nèi)容主要由頁(yè)面主體使用的背景圖片，以及兩個(gè)主要內(nèi)容的位置顯示效果構(gòu)成的。其具體的代碼如下所示。,20.7 制作日志,日志內(nèi)容主要由幾個(gè)重復(fù)的結(jié)構(gòu)完成的，其中主要要注意的問(wèn)題是，控制各個(gè)區(qū)域的分隔距離。另外由于日志部分是由幾個(gè)部分組成的，所以還要為每個(gè)部分定義的文本不同的顯示顏色。日志內(nèi)容的具體制作過(guò)程如下所示。,20.7.1 制作日志內(nèi)容的結(jié)構(gòu),日志結(jié)構(gòu)分為3個(gè)部分，日志標(biāo)題、日志內(nèi)容、底部鏈接。由于要對(duì)三個(gè)部分進(jìn)行分隔和修飾，所以要各自使用獨(dú)立的元素定義，其具體的XHTML代碼如下所示。,20.7.2 定義日志內(nèi)容的樣式,日志部分由三個(gè)部分組成，日志的標(biāo)題、日志的內(nèi)容、日志的相關(guān)信息，在每個(gè)部分中都需要定義文本的顯示方式和位置，其具體的代碼如下所示。,20.8 制作側(cè)欄,側(cè)欄內(nèi)容用來(lái)顯示相關(guān)的個(gè)人信息、友情鏈接、日志分類(lèi)等內(nèi)容。在這部分內(nèi)容中，CSS樣式包括兩個(gè)部分，一部分是通用的統(tǒng)一樣式，另一部分是各個(gè)內(nèi)容的獨(dú)立樣式。側(cè)欄內(nèi)容的具體制作方法如下所示。,20.8.1 制作側(cè)欄的結(jié)構(gòu),側(cè)欄內(nèi)容包括，個(gè)人檔案、歸檔信息、友情鏈接、日志分類(lèi)、推薦日志、統(tǒng)計(jì)信息等幾個(gè)部分。其中每個(gè)部分都是由標(biāo)題、內(nèi)容兩個(gè)部分構(gòu)成，根據(jù)內(nèi)容的不同，所使用的結(jié)構(gòu)由略有區(qū)別。,20.8.2 定義側(cè)欄的通用樣式,側(cè)欄的通用樣式包括側(cè)欄標(biāo)題樣式、側(cè)欄文本樣式、側(cè)欄鏈接樣式等。這些樣式都是每個(gè)側(cè)欄內(nèi)容都要使用的樣式。其中側(cè)欄每個(gè)內(nèi)容的整體控制，以及側(cè)欄標(biāo)題的顯示效果是通下面的代碼完成的，具體內(nèi)容如下所示。,20.8.2 定義側(cè)欄的通用樣式,20.9 制作頁(yè)面底部?jī)?nèi)容,頁(yè)面底部?jī)?nèi)容包括站點(diǎn)的相關(guān)信息、郵箱地址、歡迎口號(hào)等。在制作頁(yè)面底部?jī)?nèi)容的時(shí)候，只需要對(duì)各個(gè)文本和圖片元素進(jìn)行定位，同時(shí)定義好鏈接文本的顯示效果即可。制作頁(yè)面底部?jī)?nèi)容的具體步驟如下所示。,20.9.1 制作頁(yè)面底部的結(jié)構(gòu),頁(yè)面底部?jī)?nèi)容主要由一些文本內(nèi)容構(gòu)