制作個人博客頁面課件

第20章制作個人博客頁面?zhèn)€人博客頁面用來展示個人的一些信息、日志以及個人的圖片等等，是一個方便的展示平臺。個人博客頁面的設計和制作都比較自由。具體的制作過程包括以下幾個步驟，制作頁面效果圖，這個部分通常使用Photoshop完成。然后再使用Photoshop的切片工具，將效果圖的各個部分制成圖片。最后在Dreamweaver中制作成網頁。第20章制作個人博客頁面?zhèn)€人博客頁面用來展示個人的一些信20.1制作頁面前的準備工作在制作具體頁面之前，先要對頁面進行大體的規(guī)劃，這個規(guī)劃可以幫助確定頁面的大體結構，這個步驟一般在頭腦中進行，可以不必顯示在效果圖上。在頁面區(qū)塊大概構思完成后，使用Photoshop的切片工具對頁面進行切割，在切割的過程中制作出頁面的背景等修飾圖片。20.1制作頁面前的準備工作在制作具體頁面之前，先要對頁20.1.1規(guī)劃頁面的內容頁面結構的規(guī)劃是制作整個頁面的基礎，好的頁面規(guī)劃能夠使頁面更具有擴展性，能夠適應頁面內容的變化。在規(guī)劃頁面的時候，首先區(qū)分割頁面為幾個部分，例如Logo、Banner、導航條、側欄等內容。然后在各個部分中切出內容和背景。20.1.1規(guī)劃頁面的內容頁面結構的規(guī)劃是制作整個頁面的20.1.1規(guī)劃頁面的內容

20.1.1規(guī)劃頁面的內容

20.1.2切分效果圖在Photoshop中首先區(qū)分頁面中的修飾圖片和內容圖片。然后將頁面中的文本內容等隱藏，根據(jù)構思的頁面區(qū)塊，切割出背景圖片和內容圖片。最后將各種圖片內容保存在磁盤的某個文件夾中。從軟件保存后的的圖片，都會默認的使用編號的格式定義圖片的名稱。20.1.2切分效果圖在Photoshop中首先區(qū)分頁面20.2規(guī)劃站點文件夾準備好各種頁面文件之后，需要做的是制作好站點的各種文件夾。通常各種圖片文件都放在名稱為images的文件夾中。樣式表文件單獨放在一個名稱為style的文件夾中。站點的首頁一般命名為“default”，并保存在根文件夾下。此時，站點的目錄結構，如圖20-3所示。20.2規(guī)劃站點文件夾準備好各種頁面文件之后，需要做的是20.3定義基本的樣式在站點建立后，就可以制作CSS樣式文件，并關聯(lián)在XHTML文件中。然后通過在XHTML中，對每個元素定義（或關聯(lián)）不同的樣式，制作頁面的各個部分。按照最初規(guī)劃的頁面結構，整個頁面分為頭部內容、導航內容、主體內容、底部內容幾個部分。本節(jié)講解定義和關聯(lián)CSS文件，以及頁面頭部內容的制作，其具體內容如下所示。20.3定義基本的樣式在站點建立后，就可以制作CSS樣式20.3.1新建CSS文件在制作具體的內容之前，首先要制作好需要使用的CSS樣式文件，并在XHTML中調用該文件。這樣做可以將頁面結構部分和表現(xiàn)修飾部分分離到兩個文件中，便于后期的維護。在style文件夾中右擊新建一個文本文檔，然后更改名稱為“style.css”。20.3.1新建CSS文件在制作具體的內容之前，首先要制20.3.2定義頁面的基礎樣式新建頁面之后，頁面的默認標題為“無標題文檔”，所以還需要將文檔更改為更有意義的名稱。另外為了更好的顯示頁面內容，以及輔助宣傳頁面，還需要修改和定義頁面的文字編碼、<meta>標簽等相關內容，其具體的代碼如下所示。20.3.2定義頁面的基礎樣式新建頁面之后，頁面的默認標20.4制作頁面頭部在站點建立后，就可以制作CSS樣式文件，并關聯(lián)在XHTML文件中。然后通過在XHTML中，對每個元素定義（或關聯(lián)）不同的樣式，制作頁面的各個部分。按照最初規(guī)劃的頁面結構，整個頁面分為頭部內容、導航內容、主體內容、底部內容幾個部分。本節(jié)講解定義和關聯(lián)CSS文件，以及頁面頭部內容的制作，其具體內容如下所示。20.4制作頁面頭部在站點建立后，就可以制作CSS樣式文20.4.1制作頁面頭部的結構從效果圖可以看到，頁面頭部的內容為兩行文本，其中部分文本包含超級鏈接，為了更好的獨立控制每個部分的顯示效果，在制作結構的時候為各種內容定義了不同的id，便于分別控制每個部分的顯示效果，其具體的代碼如下所示。20.4.1制作頁面頭部的結構從效果圖可以看到，頁面頭部20.4.2定義頁面頭部的樣式根據(jù)頁面頭部的結構，可以分析出頭部的代碼分為幾個部分，一部分是整體定義頁面大小和背景的wrapper樣式。20.4.2定義頁面頭部的樣式根據(jù)頁面頭部的結構，可以分20.5制作頁面導航頁面導航內容包括制作導航的結構、導航的背景、鏈接樣式等。在導航的樣式中，首先要對各個元素進行精確定位。然后使用各種偽類和類選擇符，制作出每個導航鏈接的獨立背景，以及顯示、隱藏效果。其具體內容如下所示。20.5制作頁面導航頁面導航內容包括制作導航的結構、導航20.5.1制作頁面導航的結構頁面導航條主要由一個<div>元素和一個<ul>元素嵌套而成。其中<div>元素用來制作導航部分的背景，<ul>元素用來制作導航條的具體內容。其具體的XHTML代碼如下所示。20.5.1制作頁面導航的結構頁面導航條主要由一個<di20.5.2定義頁面導航的樣式導航的各種表現(xiàn)效果，主要通過在導航條的各個元素中定義背景和偽類實現(xiàn)的。大體可以分為兩個部分，一部分用來定義導航內容的位置和整體效果，另一部分用來定義每個導航鼠標懸停時候的轉換效果。20.5.2定義頁面導航的樣式導航的各種表現(xiàn)效果，主要通20.6制作頁面主體頁面主體內容由日志內容和側欄內容兩個部分。由于日志和側欄部分的內容都由可能擴展，所以在制作的時候要將高度定義為自動伸展。由于日志部分和側欄內容都很多，所以本節(jié)省略了這兩部分的制作，只講解主體結構的制作方法。20.6制作頁面主體頁面主體內容由日志內容和側欄內容兩個20.6.1制作頁面主體的結構在頁面的主體內容中，由于導航部分的背景高度比較高，所以要使用負的邊界值，將內容向上移動。由于內容位置的原因，在日志部分和側欄部分需要使用更復雜的嵌套結構，其具體的XHTML代碼如下所示。20.6.1制作頁面主體的結構在頁面的主體內容中，由于導20.6.2定義頁面主體內容的樣式頁面主體內容主要由頁面主體使用的背景圖片，以及兩個主要內容的位置顯示效果構成的。其具體的代碼如下所示。20.6.2定義頁面主體內容的樣式頁面主體內容主要由頁面20.7制作日志日志內容主要由幾個重復的結構完成的，其中主要要注意的問題是，控制各個區(qū)域的分隔距離。另外由于日志部分是由幾個部分組成的，所以還要為每個部分定義的文本不同的顯示顏色。日志內容的具體制作過程如下所示。20.7制作日志日志內容主要由幾個重復的結構完成的，其中20.7.1制作日志內容的結構日志結構分為3個部分，日志標題、日志內容、底部鏈接。由于要對三個部分進行分隔和修飾，所以要各自使用獨立的元素定義，其具體的XHTML代碼如下所示。20.7.1制作日志內容的結構日志結構分為3個部分，日志20.7.2定義日志內容的樣式日志部分由三個部分組成，日志的標題、日志的內容、日志的相關信息，在每個部分中都需要定義文本的顯示方式和位置，其具體的代碼如下所示。20.7.2定義日志內容的樣式日志部分由三個部分組成，日20.8制作側欄側欄內容用來顯示相關的個人信息、友情鏈接、日志分類等內容。在這部分內容中，CSS樣式包括兩個部分，一部分是通用的統(tǒng)一樣式，另一部分是各個內容的獨立樣式。側欄內容的具體制作方法如下所示。20.8制作側欄側欄內容用來顯示相關的個人信息、友情鏈接20.8.1制作側欄的結構側欄內容包括，個人檔案、歸檔信息、友情鏈接、日志分類、推薦日志、統(tǒng)計信息等幾個部分。其中每個部分都是由標題、內容兩個部分構成，根據(jù)內容的不同，所使用的結構由略有區(qū)別。20.8.1制作側欄的結構側欄內容包括，個人檔案、歸檔信20.8.2定義側欄的通用樣式側欄的通用樣式包括側欄標題樣式、側欄文本樣式、側欄鏈接樣式等。這些樣式都是每個側欄內容都要使用的樣式。其中側欄每個內容的整體控制，以及側欄標題的顯示效果是通下面的代碼完成的，具體內容如下所示。20.8.2定義側欄的通用樣式側欄的通用樣式包括側欄標題20.8.2定義側欄的通用樣式

20.8.2定義側欄的通用樣式

20.9制作頁面底部內容頁面底部內容包括站點的相關信息、郵箱地址、歡迎口號等。在制作頁面底部內容的時候，只需要對各個文本和圖片元素進行定位，同時定義好鏈接文本的顯示效果即可。制作頁面底部內容的具體步驟如下所示。20.9制作頁面底部內容頁面底部內容包括站點的相關信息、20.9.1制作頁面底部的結構頁面底部內容主要由一些文本內容構成，在這里為了方便使用表格制作了各種內容。其具體的代碼如下所示。<divid="footer"><divid="innerFooter"><tableid="contact"><tr><tdrowspan="2"></td><tdnowrap="nowrap"align="left"><ahref="#"target="_blank">客服論壇</a>    客服郵箱：<ahref="mailto:#">************</a></td></tr><tr><tdnowrap="nowrap"align="left">24小時客服熱線:****-*******(人工8:00-24:00)</td></tr></table><divid="copyright">Copyright©2009*****Inc.Allrightsreserved.***網版權所有</div></div></div>20.9.1制作頁面底部的結構頁面底部內容主要由一些文本20.9.2定義頁面底部的樣式頁面底部內容主要包括幾個部分，首先是頁面底部的背景，然后是各個內容顯示的位置，最后是各種內容的顏色。20.9.2定義頁面底部的樣式頁面底部內容主要包括幾個部第20章制作個人博客頁面?zhèn)€人博客頁面用來展示個人的一些信息、日志以及個人的圖片等等，是一個方便的展示平臺。個人博客頁面的設計和制作都比較自由。具體的制作過程包括以下幾個步驟，制作頁面效果圖，這個部分通常使用Photoshop完成。然后再使用Photoshop的切片工具，將效果圖的各個部分制成圖片。最后在Dreamweaver中制作成網頁。第20章制作個人博客頁面?zhèn)€人博客頁面用來展示個人的一些信20.1制作頁面前的準備工作在制作具體頁面之前，先要對頁面進行大體的規(guī)劃，這個規(guī)劃可以幫助確定頁面的大體結構，這個步驟一般在頭腦中進行，可以不必顯示在效果圖上。在頁面區(qū)塊大概構思完成后，使用Photoshop的切片工具對頁面進行切割，在切割的過程中制作出頁面的背景等修飾圖片。20.1制作頁面前的準備工作在制作具體頁面之前，先要對頁20.1.1規(guī)劃頁面的內容頁面結構的規(guī)劃是制作整個頁面的基礎，好的頁面規(guī)劃能夠使頁面更具有擴展性，能夠適應頁面內容的變化。在規(guī)劃頁面的時候，首先區(qū)分割頁面為幾個部分，例如Logo、Banner、導航條、側欄等內容。然后在各個部分中切出內容和背景。20.1.1規(guī)劃頁面的內容頁面結構的規(guī)劃是制作整個頁面的20.1.1規(guī)劃頁面的內容

20.1.1規(guī)劃頁面的內容

20.1.2切分效果圖在Photoshop中首先區(qū)分頁面中的修飾圖片和內容圖片。然后將頁面中的文本內容等隱藏，根據(jù)構思的頁面區(qū)塊，切割出背景圖片和內容圖片。最后將各種圖片內容保存在磁盤的某個文件夾中。從軟件保存后的的圖片，都會默認的使用編號的格式定義圖片的名稱。20.1.2切分效果圖在Photoshop中首先區(qū)分頁面20.2規(guī)劃站點文件夾準備好各種頁面文件之后，需要做的是制作好站點的各種文件夾。通常各種圖片文件都放在名稱為images的文件夾中。樣式表文件單獨放在一個名稱為style的文件夾中。站點的首頁一般命名為“default”，并保存在根文件夾下。此時，站點的目錄結構，如圖20-3所示。20.2規(guī)劃站點文件夾準備好各種頁面文件之后，需要做的是20.3定義基本的樣式在站點建立后，就可以制作CSS樣式文件，并關聯(lián)在XHTML文件中。然后通過在XHTML中，對每個元素定義（或關聯(lián)）不同的樣式，制作頁面的各個部分。按照最初規(guī)劃的頁面結構，整個頁面分為頭部內容、導航內容、主體內容、底部內容幾個部分。本節(jié)講解定義和關聯(lián)CSS文件，以及頁面頭部內容的制作，其具體內容如下所示。20.3定義基本的樣式在站點建立后，就可以制作CSS樣式20.3.1新建CSS文件在制作具體的內容之前，首先要制作好需要使用的CSS樣式文件，并在XHTML中調用該文件。這樣做可以將頁面結構部分和表現(xiàn)修飾部分分離到兩個文件中，便于后期的維護。在style文件夾中右擊新建一個文本文檔，然后更改名稱為“style.css”。20.3.1新建CSS文件在制作具體的內容之前，首先要制20.3.2定義頁面的基礎樣式新建頁面之后，頁面的默認標題為“無標題文檔”，所以還需要將文檔更改為更有意義的名稱。另外為了更好的顯示頁面內容，以及輔助宣傳頁面，還需要修改和定義頁面的文字編碼、<meta>標簽等相關內容，其具體的代碼如下所示。20.3.2定義頁面的基礎樣式新建頁面之后，頁面的默認標20.4制作頁面頭部在站點建立后，就可以制作CSS樣式文件，并關聯(lián)在XHTML文件中。然后通過在XHTML中，對每個元素定義（或關聯(lián)）不同的樣式，制作頁面的各個部分。按照最初規(guī)劃的頁面結構，整個頁面分為頭部內容、導航內容、主體內容、底部內容幾個部分。本節(jié)講解定義和關聯(lián)CSS文件，以及頁面頭部內容的制作，其具體內容如下所示。20.4制作頁面頭部在站點建立后，就可以制作CSS樣式文20.4.1制作頁面頭部的結構從效果圖可以看到，頁面頭部的內容為兩行文本，其中部分文本包含超級鏈接，為了更好的獨立控制每個部分的顯示效果，在制作結構的時候為各種內容定義了不同的id，便于分別控制每個部分的顯示效果，其具體的代碼如下所示。20.4.1制作頁面頭部的結構從效果圖可以看到，頁面頭部20.4.2定義頁面頭部的樣式根據(jù)頁面頭部的結構，可以分析出頭部的代碼分為幾個部分，一部分是整體定義頁面大小和背景的wrapper樣式。20.4.2定義頁面頭部的樣式根據(jù)頁面頭部的結構，可以分20.5制作頁面導航頁面導航內容包括制作導航的結構、導航的背景、鏈接樣式等。在導航的樣式中，首先要對各個元素進行精確定位。然后使用各種偽類和類選擇符，制作出每個導航鏈接的獨立背景，以及顯示、隱藏效果。其具體內容如下所示。20.5制作頁面導航頁面導航內容包括制作導航的結構、導航20.5.1制作頁面導航的結構頁面導航條主要由一個<div>元素和一個<ul>元素嵌套而成。其中<div>元素用來制作導航部分的背景，<ul>元素用來制作導航條的具體內容。其具體的XHTML代碼如下所示。20.5.1制作頁面導航的結構頁面導航條主要由一個<di20.5.2定義頁面導航的樣式導航的各種表現(xiàn)效果，主要通過在導航條的各個元素中定義背景和偽類實現(xiàn)的。大體可以分為兩個部分，一部分用來定義導航內容的位置和整體效果，另一部分用來定義每個導航鼠標懸停時候的轉換效果。20.5.2定義頁面導航的樣式導航的各種表現(xiàn)效果，主要通20.6制作頁面主體頁面主體內容由日志內容和側欄內容兩個部分。由于日志和側欄部分的內容都由可能擴展，所以在制作的時候要將高度定義為自動伸展。由于日志部分和側欄內容都很多，所以本節(jié)省略了這兩部分的制作，只講解主體結構的制作方法。20.6制作頁面主體頁面主體內容由日志內容和側欄內容兩個20.6.1制作頁面主體的結構在頁面的主體內容中，由于導航部分的背景高度比較高，所以要使用負的邊界值，將內容向上移動。由于內容位置的原因，在日志部分和側欄部分需要使用更復雜的嵌套結構，其具體的XHTML代碼如下所示。20.6.1制作頁面主體的結構在頁面的主體內容中，由于導20.6.2定義頁面主體內容的樣式頁面主體內容主要由頁面主體使用的背景圖片，以及兩個主要內容的位置顯示效果構成的。其具體的代碼如下所示。20.6.2定義頁面主體內容的樣式頁面主體內容主要由頁面20.7制作日志日志內容主要由幾個重復的結構完成的，其中主要要注意的問題是，控制各個區(qū)域的分隔距離。另外由于日志部分是由幾個部分組成的，所以還要為每個部分定義的文本不同的顯示顏色。日志內容的具體制作過程如下所示。20.7制作日志日志內容主要由幾個重復的結構完成的，其中20.7.1制作日志內容的結構日志結構分為3個部分，日志標題、日志內容、底部鏈接。由于要對三個部分進行分隔和修飾，所以要各自使用獨立的元素定義，其具體的XHTML代碼如下所示。20.7.1制作日志內容的結構日志結構分為3個部分，日志20.7.2定義日志內容的樣式日志部分由三個部分組成，日志的標題、日志的內容、日志的相關信息，在每個部分中都需要定義文本的顯示方式和位置，其具體的代碼如下所示。20.7.2定義日志內容的樣式日志部分由三個部分組成，日20.8制作側欄側欄內容用來顯示相關的個人信息、友情鏈接、日志分類等內容。在這部分內容中，CSS樣式包括兩個部分，一部分是通用的統(tǒng)一樣式，另一部分是各個內容的獨立樣式。側欄內容的具體制作方法如下所示。20.8制作側欄側欄內容用來顯示相關的個人信息、友情鏈接20.8.1制作側欄的結構側欄內容包括，個人檔案、歸檔信息、友情鏈接、日志分類、推薦日志、統(tǒng)計信息等幾個部分。其中每個部分都是由標題、內容兩個部分構成，根據(jù)內容的不同，所使用的結構由略有區(qū)別。20.8.1制作側欄的結構側欄內容包括，個人檔案、歸檔信20.8.2定義側欄的通用樣式側欄的通用樣式包括側欄標題樣式、側欄文本樣式、側欄鏈接樣式等。這些樣式都是每個側欄內容都要使用的樣式。其中側欄每個內容的整體控制，以及側