MX2004網(wǎng)頁制作培訓(xùn)教程19個人網(wǎng)站制作實例課件

第十九課個人網(wǎng)站制作實例課前導(dǎo)讀課堂講解上機實戰(zhàn)課后練習(xí)第十九課個人網(wǎng)站制作實例課前導(dǎo)讀課前導(dǎo)讀基礎(chǔ)知識重點知識課前導(dǎo)讀基礎(chǔ)知識基礎(chǔ)知識利用布局視圖布局個人主頁，個人主頁的內(nèi)容策劃?；A(chǔ)知識利用布局視圖布局個人主頁，個人主頁的內(nèi)容重點知識一個完整的個人主頁的創(chuàng)建。重點知識一個完整的個人主頁的創(chuàng)建。課堂講解制作分析瀏覽網(wǎng)站課堂講解制作分析本課將利用前面所學(xué)的知識，構(gòu)建名為“吾茶吾心”的個人網(wǎng)站，本網(wǎng)站以個人愛好——茶文化為主題，將網(wǎng)站的主題定位在比較小的范圍內(nèi)，并且跳出了以往個人網(wǎng)站的千篇一律的老模式。主要介紹了茶文化的幾個方面，欄目的劃分比較簡單，網(wǎng)站的色彩和構(gòu)圖以古典的中國文化為主要構(gòu)成元素，有著濃烈的個人特色。本網(wǎng)站包括首頁、茶藝茶道、茶詩茶文和茶水茶具幾部分。在構(gòu)建本網(wǎng)站時，本章將從建立站點開始以步驟的形式詳細介紹在DreamweaverMX2004中構(gòu)建個人網(wǎng)站的方法。本課將利用前面所學(xué)的知識，構(gòu)建名為“吾茶吾心”的制作分析

在制作本網(wǎng)站前應(yīng)先在電腦中創(chuàng)建一個名為tea的文件夾，然后在該文件夾中創(chuàng)建image和org文件夾。image文件夾中保存網(wǎng)站中的所有圖片；org文件夾中放置圖片的源文件，以方便要對某個圖片進行修改時直接進行修改即可。制作分析在制作本網(wǎng)站前應(yīng)先在電腦中創(chuàng)建一個名為t

制作本例時，先新建一個名為tea的站點，并保存在tea文件夾中，然后在站點根目錄下新建一個名為index.htm的頁面文件。再新建wcwx.htm頁面文件，并將導(dǎo)航欄中的各項鏈接到對應(yīng)的名稱上，由于網(wǎng)站的各個頁面并不是十分規(guī)整，這里將利用復(fù)制頁面文件再進行修改的方法，將wcwx.htm頁面文件復(fù)制成為cscw.htm頁面文件，再對其進行修改。制作本例時，先新建一個名為tea的站點，并保存在瀏覽網(wǎng)站

如圖19-1所示是“吾茶吾心”網(wǎng)站的首頁，如圖19-2所示是“吾茶吾心”頁面，如圖19-3所示是“茶詩茶文”頁面，如圖19-4所示是“《茶》”頁面。圖19-1瀏覽網(wǎng)站如圖19-1所示是“吾茶吾心”網(wǎng)站的首頁圖19-2圖19-2圖19-3圖19-3圖19-4圖19-4上機實戰(zhàn)創(chuàng)建站點制作index頁面制作“吾茶吾心”頁面制作“茶詩茶文”頁面上機實戰(zhàn)創(chuàng)建站點

下面講解這個個人網(wǎng)站的具體制作方法，由于篇幅有限，這里只講解，首頁、“吾茶吾心”和“茶詩茶文”3個頁面的制作。讀者可根據(jù)學(xué)習(xí)的知識將其他兩個頁面制作完成?？傊?，希望讀者通過學(xué)習(xí)制作這個個人網(wǎng)站能鞏固前面所學(xué)的知識，并能對其靈活運用，就達到目的了。下面講解這個個人網(wǎng)站的具體制作方法，由于篇幅有限創(chuàng)建站點

根據(jù)上面的制作分析，首先創(chuàng)建“吾茶吾心”個人網(wǎng)站的站點，具體操作如下。（1）打開DreamweaverMX2004窗口。（2）選擇[站點][管理站點]菜單命令，打開“管理站點”對話框。創(chuàng)建站點根據(jù)上面的制作分析，首先創(chuàng)建“吾茶吾心”

（3）單擊按鈕，在彈出的列表中選擇“站點”選項，如圖19-5所示，打開“站點定義”對話框。圖19-5（3）單擊按鈕，在彈出的列表中選擇“站點”

（4）在“你打算為你的站點取什么名字？”文本框中輸入tea，如圖19-6所示。圖19-6（4）在“你打算為你的站點取什么名字？”文本框中輸

（5）單擊按鈕進入“編輯文件，第2部分”對話框。（6）選中單選項，如圖19-7所示。（5）單擊按鈕進入“編輯文件，第2部分”圖19-7圖19-7

（7）單擊按鈕進入“編輯文件，第3部分”對話框。（8）選中單選項，在“您將把文件存儲在計算機上的什么位置?”文本框中單擊文本框右側(cè)的按鈕，選擇前面創(chuàng)建的tea文件夾，如圖19-8所示。（7）單擊按鈕進入“編輯文件，第3部分”圖19-8圖19-8

（9）單擊按鈕進入“共享文件”對話框，在“您如何連接到遠程服務(wù)器?”下拉列表框中選擇“無”選項，如圖19-9所示。圖19-9（9）單擊按鈕進入“共享文件”對話框，在

（10）單擊按鈕進入“總結(jié)”對話框，如圖19-10所示。單擊按鈕，創(chuàng)建的站點顯示在“管理站點”對話框中。圖19-10（10）單擊按鈕進入“總結(jié)”對話框，如圖

（11）在“管理站點”對話框中，單擊按鈕，站點就顯示在“文件”面板中，如圖19-11所示。圖19-11（11）在“管理站點”對話框中，單擊按鈕

（12）在“文件”面板的tea文件夾上單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“新建文件”命令，如圖19-12所示。圖19-12（12）在“文件”面板的tea文件夾上單擊鼠標(biāo)右鍵

（13）將新建的文檔重命名為index.htm，如圖19-13所示。圖19-13（13）將新建的文檔重命名為index.htm，如

（14）用同樣的方法，分別新建名為wcwx.htm、cycd.htm、cscw.htm和cscj.htm的文檔，如圖19-14所示。圖19-14（14）用同樣的方法，分別新建名為wcwx.htm制作index頁面

創(chuàng)建好站點及index.htm頁面后，就可以制作index.htm頁面了，具體操作如下（1）在站點窗口中雙擊index.htm打開該頁面。（2）在“標(biāo)題”文本框中輸入“吾茶吾心－－可以清心也”，如圖19-15所示。圖19-15制作index頁面創(chuàng)建好站點及index.htm

（3）單擊“插入”欄中“布局”選項卡中的按鈕，再單擊按鈕，此時光標(biāo)變成“+”，在頁面中按住鼠標(biāo)不放拖動繪制出一個布局表格，如圖19-16所示。圖19-16（3）單擊“插入”欄中“布局”選項卡中的按鈕

（4）單擊按鈕，在布局表格中拖動繪制出一個單元格，如圖19-17所示。圖19-17（4）單擊按鈕，在布局表格中拖動繪制出一個單元

（5）按住【Ctrl】鍵，連續(xù)繪制出如圖19-18所示的單元格。圖19-18（5）按住【Ctrl】鍵，連續(xù)繪制出如圖19-18

（6）將光標(biāo)定位到左上方的單元格中，單擊“插入”欄中“常用”選項卡中的按鈕，在“選擇圖像源文件”對話框中打開tea文件夾中的image文件夾，在文件列表中選擇bg_c1.jpg，如圖19-19所示。（6）將光標(biāo)定位到左上方的單元格中，單擊“插入”欄圖19-19圖19-19

（7）單擊按鈕，將圖像插入到單元格中，如圖19-20所示。圖19-20（7）單擊按鈕，將圖像插入到單元格中，如

（8）將光標(biāo)定位在左下方單元格中，再單擊圖標(biāo)，在打開的對話框中選擇bg_c2.htm，單擊按鈕將圖像插入到單元格中，如圖19-21所示。（8）將光標(biāo)定位在左下方單元格中，再單擊圖標(biāo)，圖19-21圖19-21

（9）用同樣的方法在右邊的4個單元格中單擊將依次插入圖像，如圖19-22所示。圖19-22（9）用同樣的方法在右邊的4個單元格中單擊將依次插

（10）單擊“吾茶吾心”導(dǎo)航圖片，在其屬性面板的“鏈接”文本框中輸入wcwx.htm。（11）用同樣的方法，依次為其他3個導(dǎo)航圖片建立鏈接。（12）按【Ctrl+S】鍵保存頁面文件，并按【F12】鍵預(yù)覽效果，如圖19-1所示。（10）單擊“吾茶吾心”導(dǎo)航圖片，在其屬性面板的“制作“吾茶吾心”頁面“吾茶吾心”的頁面主要介紹了制作者本人對茶文化的理解和感觸。具體操作如下。（1）在“文件”面板中雙擊“wcwx.htm”打開該文件。（2）單擊“插入”欄中“布局”選項卡中的按鈕，再單擊按鈕，此時光標(biāo)變成“+”，在頁面中按住鼠標(biāo)不放拖動繪制出一個布局表格，如圖19-23所示。制作“吾茶吾心”頁面“吾茶吾心”的頁面主要介紹了圖19-23圖19-23

（3）單擊按鈕，按住【Ctrl】鍵，連續(xù)繪制出如圖19-24所示的單元格。圖19-24（3）單擊按鈕，按住【Ctrl】鍵，連續(xù)繪制出

（4）將光標(biāo)定位到第一個的單元格中，單擊“插入”欄中“常用”選項卡中的按鈕，在“選擇圖像源文件”對話框中打開tea文件夾中的image文件夾，選擇dh_c1.jpg，單擊按鈕將圖像插入到單元格中，依次插入全部導(dǎo)航圖像，如圖19-25所示。（4）將光標(biāo)定位到第一個的單元格中，單擊“插入”欄圖19-25圖19-25

（5）單擊“吾茶吾心”導(dǎo)航圖片，在其屬性面板的“鏈接”文本框中輸入wcwx.htm。（6）用同樣的方法，依次為其他3個導(dǎo)航圖片建立鏈接。（7）單擊按鈕，按住【Ctrl】鍵，連續(xù)繪制3個單元格。（8）將在Fireworks中制作好的圖像切片插入到各個單元格中。（9）按【Ctrl+S】鍵保存頁面文件，并按【F12】鍵預(yù)覽效果。（5）單擊“吾茶吾心”導(dǎo)航圖片，在其屬性面板的“鏈

個人網(wǎng)站一般都希望體現(xiàn)制作者的個性，常常都需要用到一些特殊的字體，這時就需要將這些文本制作成圖像，因為許多瀏覽者的計算機上并沒有這些字體，瀏覽時將無法顯示這些個性的特殊字體。個人網(wǎng)站一般都希望體現(xiàn)制作者的個性，常常都需制作“茶詩茶文”頁面

“茶詩茶文”的頁面主要介紹了中國古代和現(xiàn)代文學(xué)作品中關(guān)于茶的詩歌和文章以及一些對聯(lián)等。由于該頁面與“吾茶吾心”頁面在導(dǎo)航部分是相同的，所以可以將wcwx.htm頁面文件復(fù)制，再將其改名為cscw.htm，具體操作如下。制作“茶詩茶文”頁面“茶詩茶文”的頁面主要介紹了

（1）在“文件”面板中選中wcwx.htm頁面文件，按【Ctrl+D】鍵重制一個wcwx.htm頁面文件，如圖19-26所示。圖19-26（1）在“文件”面板中選中wcwx.htm頁面文件

（2）單擊“拷貝于wcwx.htm”頁面文件名，將其更改為cscw.htm，如圖19-27所示。圖19-27（2）單擊“拷貝于wcwx.htm”頁面文件名，將

（3）雙擊cscw.htm頁面文件打開該文件。（4）將除了導(dǎo)航區(qū)域外的其他圖像和布局單元格全部刪除，刪除后如圖19-28所示。圖19-28（3）雙擊cscw.htm頁面文件打開該文件。圖1

（5）單擊按鈕，按住【Ctrl】鍵，連續(xù)繪制4個單元格，如圖19-29所示。圖19-29（5）單擊按鈕，按住【Ctrl】鍵，連續(xù)繪制4

（6）分別在4個單元格中插入圖像，插入后如圖19-30所示。圖19-30（6）分別在4個單元格中插入圖像，插入后如圖19-

（7）再繪制一個單元格，如圖19-31所示，用于在單元格中輸入各首茶詩的詩名。圖19-31（7）再繪制一個單元格，如圖19-31所示，用于在

（8）在單元格中輸入茶詩的詩名，完成后如圖19-32所示。圖19-32（8）在單元格中輸入茶詩的詩名，完成后如圖19-3

（9）為文字定義一個樣式，按【Shift+F11】鍵打開“CSS樣式”面板，單擊按鈕，打開“新建CSS樣式”對話框，如圖19-33所示。圖19-33（9）為文字定義一個樣式，按【Shift+F11】

（10）在“名稱”下拉列表框中輸入.c1，在“選擇器類型”欄選中單選項，在“定義在”欄中選中單選項。單擊按鈕，打開“.c1的CSS樣式定義”對話框。（11）在該對話框中進行如圖19-34所示的設(shè)置。設(shè)置完成后，單擊按鈕，完成樣式的定義。（10）在“名稱”下拉列表框中輸入.c1，在“選擇圖19-34圖19-34

（12）在頁面中選中要應(yīng)用樣式的文本，再在其屬性面板的“樣式”下拉列表框中選擇.c1選項，這時選中的文本就應(yīng)用了所定義的樣式，如圖19-35所示。圖19-35（12）在頁面中選中要應(yīng)用樣式的文本，再在其屬性面

（13）重復(fù)第（4）～（9）步，為“茶文”欄目也輸入茶文名，完成后如圖19-36所示。圖19-36（13）重復(fù)第（4）～（9）步，為“茶文”欄目也輸

（14）至此這個頁面就做完了，但還需要為每首詩或文進行鏈接，這里采用“打開瀏覽器窗口”行為來實現(xiàn)。按【Shift+F3】鍵來打開“行為”面板。（15）選擇一首詩名，如“《茶》唐?元稹”，單擊按鈕，在彈出的“行為”菜單中選擇“打開瀏覽器窗口”命令，打開“打開瀏覽器窗口”對話框。（14）至此這個頁面就做完了，但還需要為每首詩或文

（16）在“要顯示的URL”文本框中輸入要顯示的這首詩的頁面名cs_01.htm。在“窗口寬度”和“窗口高度”文本框中分別輸入打開瀏覽器的寬度620和高度364，如圖19-37所示。圖19-37（16）在“要顯示的URL”文本框中輸入要顯示的這

（17）單擊按鈕，“行為”面板中將出現(xiàn)“打開瀏覽器窗口”動作。將事件設(shè)為onClick事件。（18）接著創(chuàng)建cs_01.htm頁面文件，新建一個空白頁面，并保存為cs_01.htm。打開該頁面文件。（19）選擇[插入][表格]菜單命令，打開“表格”對話框，在“行”和“列”數(shù)值框中都輸入1，在“表格寬度”文本框中輸入600，在其后的下拉列表框中選擇“像素”，如圖19-38所示。（17）單擊按鈕，“行為”面板中將出現(xiàn)“打圖19-38圖19-38

（20）單擊按鈕，在頁面中即插入一個1行1列的表格，在表格中插入圖像，完成后如圖19-39所示。圖19-39（20）單擊按鈕，在頁面中即插入一個1行

（21）選擇[插入][布局對象][層]菜單命令，在頁面中插入一個層，拖動層的控制柄，使層的大小剛好和插入圖像的空白處一樣大，如圖19-40所示。圖19-40（21）選擇[插入][布局對象][層]菜單命令

（22）將光標(biāo)定位在層中，插入寫有詩的圖像，如圖19-41所示。圖19-41（22）將光標(biāo)定位在層中，插入寫有詩的圖像，如圖1

（23）用同樣的方法將所有的茶詩和茶文的頁面都制作好，并進行相關(guān)的鏈接。至此，“茶詩茶文”的頁面就制作完成了。按【F12】鍵在瀏覽器中預(yù)覽效果。（23）用同樣的方法將所有的茶詩和茶文的頁面都制作課后練習(xí)思考題上機操作題課后練習(xí)思考題思考題

（1）定義樣式有何好處？（2）怎樣創(chuàng)建個人網(wǎng)站才能跳出只介紹自己，并放幾張照片的老模式？

思考題（1）定義樣式有何好處？上機操作題根據(jù)前面所學(xué)的知識，制作一個如圖19-42所示的“我愛漫畫”的個人網(wǎng)站。這里只給出了網(wǎng)站的首頁，讀者可以發(fā)揮自己的想像將這個網(wǎng)站建設(shè)完整，當(dāng)然，讀者也可以根據(jù)自己的喜好，建立自己的個人網(wǎng)站。需要注意的是個人網(wǎng)站是展示自己的一個平臺，所以一定要體現(xiàn)個人魅力，有自己的獨到之處。上機操作題根據(jù)前面所學(xué)的知識，制作一個如圖19圖19-42圖19-42演講完畢，謝謝觀看！演講完畢，謝謝觀看！第十九課個人網(wǎng)站制作實例課前導(dǎo)讀課堂講解上機實戰(zhàn)課后練習(xí)第十九課個人網(wǎng)站制作實例課前導(dǎo)讀課前導(dǎo)讀基礎(chǔ)知識重點知識課前導(dǎo)讀基礎(chǔ)知識基礎(chǔ)知識利用布局視圖布局個人主頁，個人主頁的內(nèi)容策劃。基礎(chǔ)知識利用布局視圖布局個人主頁，個人主頁的內(nèi)容重點知識一個完整的個人主頁的創(chuàng)建。重點知識一個完整的個人主頁的創(chuàng)建。課堂講解制作分析瀏覽網(wǎng)站課堂講解制作分析本課將利用前面所學(xué)的知識，構(gòu)建名為“吾茶吾心”的個人網(wǎng)站，本網(wǎng)站以個人愛好——茶文化為主題，將網(wǎng)站的主題定位在比較小的范圍內(nèi)，并且跳出了以往個人網(wǎng)站的千篇一律的老模式。主要介紹了茶文化的幾個方面，欄目的劃分比較簡單，網(wǎng)站的色彩和構(gòu)圖以古典的中國文化為主要構(gòu)成元素，有著濃烈的個人特色。本網(wǎng)站包括首頁、茶藝茶道、茶詩茶文和茶水茶具幾部分。在構(gòu)建本網(wǎng)站時，本章將從建立站點開始以步驟的形式詳細介紹在DreamweaverMX2004中構(gòu)建個人網(wǎng)站的方法。本課將利用前面所學(xué)的知識，構(gòu)建名為“吾茶吾心”的制作分析

在制作本網(wǎng)站前應(yīng)先在電腦中創(chuàng)建一個名為tea的文件夾，然后在該文件夾中創(chuàng)建image和org文件夾。image文件夾中保存網(wǎng)站中的所有圖片；org文件夾中放置圖片的源文件，以方便要對某個圖片進行修改時直接進行修改即可。制作分析在制作本網(wǎng)站前應(yīng)先在電腦中創(chuàng)建一個名為t

制作本例時，先新建一個名為tea的站點，并保存在tea文件夾中，然后在站點根目錄下新建一個名為index.htm的頁面文件。再新建wcwx.htm頁面文件，并將導(dǎo)航欄中的各項鏈接到對應(yīng)的名稱上，由于網(wǎng)站的各個頁面并不是十分規(guī)整，這里將利用復(fù)制頁面文件再進行修改的方法，將wcwx.htm頁面文件復(fù)制成為cscw.htm頁面文件，再對其進行修改。制作本例時，先新建一個名為tea的站點，并保存在瀏覽網(wǎng)站

如圖19-1所示是“吾茶吾心”網(wǎng)站的首頁，如圖19-2所示是“吾茶吾心”頁面，如圖19-3所示是“茶詩茶文”頁面，如圖19-4所示是“《茶》”頁面。圖19-1瀏覽網(wǎng)站如圖19-1所示是“吾茶吾心”網(wǎng)站的首頁圖19-2圖19-2圖19-3圖19-3圖19-4圖19-4上機實戰(zhàn)創(chuàng)建站點制作index頁面制作“吾茶吾心”頁面制作“茶詩茶文”頁面上機實戰(zhàn)創(chuàng)建站點

下面講解這個個人網(wǎng)站的具體制作方法，由于篇幅有限，這里只講解，首頁、“吾茶吾心”和“茶詩茶文”3個頁面的制作。讀者可根據(jù)學(xué)習(xí)的知識將其他兩個頁面制作完成?？傊Ｍx者通過學(xué)習(xí)制作這個個人網(wǎng)站能鞏固前面所學(xué)的知識，并能對其靈活運用，就達到目的了。下面講解這個個人網(wǎng)站的具體制作方法，由于篇幅有限創(chuàng)建站點

根據(jù)上面的制作分析，首先創(chuàng)建“吾茶吾心”個人網(wǎng)站的站點，具體操作如下。（1）打開DreamweaverMX2004窗口。（2）選擇[站點][管理站點]菜單命令，打開“管理站點”對話框。創(chuàng)建站點根據(jù)上面的制作分析，首先創(chuàng)建“吾茶吾心”

（3）單擊按鈕，在彈出的列表中選擇“站點”選項，如圖19-5所示，打開“站點定義”對話框。圖19-5（3）單擊按鈕，在彈出的列表中選擇“站點”

（4）在“你打算為你的站點取什么名字？”文本框中輸入tea，如圖19-6所示。圖19-6（4）在“你打算為你的站點取什么名字？”文本框中輸

（5）單擊按鈕進入“編輯文件，第2部分”對話框。（6）選中單選項，如圖19-7所示。（5）單擊按鈕進入“編輯文件，第2部分”圖19-7圖19-7

（7）單擊按鈕進入“編輯文件，第3部分”對話框。（8）選中單選項，在“您將把文件存儲在計算機上的什么位置?”文本框中單擊文本框右側(cè)的按鈕，選擇前面創(chuàng)建的tea文件夾，如圖19-8所示。（7）單擊按鈕進入“編輯文件，第3部分”圖19-8圖19-8

（9）單擊按鈕進入“共享文件”對話框，在“您如何連接到遠程服務(wù)器?”下拉列表框中選擇“無”選項，如圖19-9所示。圖19-9（9）單擊按鈕進入“共享文件”對話框，在

（10）單擊按鈕進入“總結(jié)”對話框，如圖19-10所示。單擊按鈕，創(chuàng)建的站點顯示在“管理站點”對話框中。圖19-10（10）單擊按鈕進入“總結(jié)”對話框，如圖

（11）在“管理站點”對話框中，單擊按鈕，站點就顯示在“文件”面板中，如圖19-11所示。圖19-11（11）在“管理站點”對話框中，單擊按鈕

（12）在“文件”面板的tea文件夾上單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“新建文件”命令，如圖19-12所示。圖19-12（12）在“文件”面板的tea文件夾上單擊鼠標(biāo)右鍵

（13）將新建的文檔重命名為index.htm，如圖19-13所示。圖19-13（13）將新建的文檔重命名為index.htm，如

（14）用同樣的方法，分別新建名為wcwx.htm、cycd.htm、cscw.htm和cscj.htm的文檔，如圖19-14所示。圖19-14（14）用同樣的方法，分別新建名為wcwx.htm制作index頁面

創(chuàng)建好站點及index.htm頁面后，就可以制作index.htm頁面了，具體操作如下（1）在站點窗口中雙擊index.htm打開該頁面。（2）在“標(biāo)題”文本框中輸入“吾茶吾心－－可以清心也”，如圖19-15所示。圖19-15制作index頁面創(chuàng)建好站點及index.htm

（3）單擊“插入”欄中“布局”選項卡中的按鈕，再單擊按鈕，此時光標(biāo)變成“+”，在頁面中按住鼠標(biāo)不放拖動繪制出一個布局表格，如圖19-16所示。圖19-16（3）單擊“插入”欄中“布局”選項卡中的按鈕

（4）單擊按鈕，在布局表格中拖動繪制出一個單元格，如圖19-17所示。圖19-17（4）單擊按鈕，在布局表格中拖動繪制出一個單元

（5）按住【Ctrl】鍵，連續(xù)繪制出如圖19-18所示的單元格。圖19-18（5）按住【Ctrl】鍵，連續(xù)繪制出如圖19-18

（6）將光標(biāo)定位到左上方的單元格中，單擊“插入”欄中“常用”選項卡中的按鈕，在“選擇圖像源文件”對話框中打開tea文件夾中的image文件夾，在文件列表中選擇bg_c1.jpg，如圖19-19所示。（6）將光標(biāo)定位到左上方的單元格中，單擊“插入”欄圖19-19圖19-19

（7）單擊按鈕，將圖像插入到單元格中，如圖19-20所示。圖19-20（7）單擊按鈕，將圖像插入到單元格中，如

（8）將光標(biāo)定位在左下方單元格中，再單擊圖標(biāo)，在打開的對話框中選擇bg_c2.htm，單擊按鈕將圖像插入到單元格中，如圖19-21所示。（8）將光標(biāo)定位在左下方單元格中，再單擊圖標(biāo)，圖19-21圖19-21

（9）用同樣的方法在右邊的4個單元格中單擊將依次插入圖像，如圖19-22所示。圖19-22（9）用同樣的方法在右邊的4個單元格中單擊將依次插

（10）單擊“吾茶吾心”導(dǎo)航圖片，在其屬性面板的“鏈接”文本框中輸入wcwx.htm。（11）用同樣的方法，依次為其他3個導(dǎo)航圖片建立鏈接。（12）按【Ctrl+S】鍵保存頁面文件，并按【F12】鍵預(yù)覽效果，如圖19-1所示。（10）單擊“吾茶吾心”導(dǎo)航圖片，在其屬性面板的“制作“吾茶吾心”頁面“吾茶吾心”的頁面主要介紹了制作者本人對茶文化的理解和感觸。具體操作如下。（1）在“文件”面板中雙擊“wcwx.htm”打開該文件。（2）單擊“插入”欄中“布局”選項卡中的按鈕，再單擊按鈕，此時光標(biāo)變成“+”，在頁面中按住鼠標(biāo)不放拖動繪制出一個布局表格，如圖19-23所示。制作“吾茶吾心”頁面“吾茶吾心”的頁面主要介紹了圖19-23圖19-23

（3）單擊按鈕，按住【Ctrl】鍵，連續(xù)繪制出如圖19-24所示的單元格。圖19-24（3）單擊按鈕，按住【Ctrl】鍵，連續(xù)繪制出

（4）將光標(biāo)定位到第一個的單元格中，單擊“插入”欄中“常用”選項卡中的按鈕，在“選擇圖像源文件”對話框中打開tea文件夾中的image文件夾，選擇dh_c1.jpg，單擊按鈕將圖像插入到單元格中，依次插入全部導(dǎo)航圖像，如圖19-25所示。（4）將光標(biāo)定位到第一個的單元格中，單擊“插入”欄圖19-25圖19-25

（5）單擊“吾茶吾心”導(dǎo)航圖片，在其屬性面板的“鏈接”文本框中輸入wcwx.htm。（6）用同樣的方法，依次為其他3個導(dǎo)航圖片建立鏈接。（7）單擊按鈕，按住【Ctrl】鍵，連續(xù)繪制3個單元格。（8）將在Fireworks中制作好的圖像切片插入到各個單元格中。（9）按【Ctrl+S】鍵保存頁面文件，并按【F12】鍵預(yù)覽效果。（5）單擊“吾茶吾心”導(dǎo)航圖片，在其屬性面板的“鏈

個人網(wǎng)站一般都希望體現(xiàn)制作者的個性，常常都需要用到一些特殊的字體，這時就需要將這些文本制作成圖像，因為許多瀏覽者的計算機上并沒有這些字體，瀏覽時將無法顯示這些個性的特殊字體。個人網(wǎng)站一般都希望體現(xiàn)制作者的個性，常常都需制作“茶詩茶文”頁面

“茶詩茶文”的頁面主要介紹了中國古代和現(xiàn)代文學(xué)作品中關(guān)于茶的詩歌和文章以及一些對聯(lián)等。由于該頁面與“吾茶吾心”頁面在導(dǎo)航部分是相同的，所以可以將wcwx.htm頁面文件復(fù)制，再將其改名為cscw.htm，具體操作如下。制作“茶詩茶文”頁面“茶詩茶文”的頁面主要介紹了

（1）在“文件”面板中選中wcwx.htm頁面文件，按【Ctrl+D】鍵重制一個wcwx.htm頁面文件，如圖19-26所示。圖19-26（1）在“文件”面板中選中wcwx.htm頁面文件

（2）單擊“拷貝于wcwx.htm”頁面文件名，將其更改為cscw.htm，如圖19-27所示。圖19-27（2）單擊“拷貝于wcwx.htm”頁面文件名，將

（3）雙擊cscw.htm頁面文件打開該文件。（4）將除了導(dǎo)航區(qū)域外的其他圖像和布局單元格全部刪除，刪除后如圖19-28所示。圖19-28（3）雙擊cscw.htm頁面文件打開該文件。圖1

（5）單擊按鈕，按住【Ctrl】鍵，連續(xù)繪制4個單元格，如圖19-29所示。圖19-29（5）單擊按鈕，按住【Ctrl】鍵，連續(xù)繪制4

（6）分別在4個單元格中插入圖像，插入后如圖19-30所示。圖19-30（6）分別在4個單元格中插入圖像，插入后如圖19-

（7）再繪制一個單元格，如圖19-31所示，用于在單元格中輸入各首茶詩的詩名。圖19-31（7）再繪制一個單元格，如圖19-31所示，用于在

（8）在單元格中輸入茶詩的詩名，完成后如圖19-32所示。圖19-32（8）在單元格中輸入茶詩的詩名，完成后如圖19-3

（9）為文字定義一個樣式，按【Shift+F11】鍵打開“CSS樣式”面板，單擊按鈕，打開“新建CSS樣式”對話框，如圖19-33所示。圖19-33（9）為文字定義一個樣式，按【Shift+F11】

（10）在“名稱”下拉列表框中輸入.c1，在“選擇器類型”欄選中單選項，在“定義在”欄中選中單選項。單擊按鈕，打開“.c1的CSS樣式定義”對話框。（11）在該對話框中進行如圖19-34所示的設(shè)置。設(shè)置完成后，單擊按鈕，完成樣式的定義。（10）在“名稱”下拉列表框中輸入.c1，在“選擇圖19-34圖19-34

（12）在頁面中選中要應(yīng)用樣式的文本，再在其屬性面板的“樣式”下拉列表框中選擇.c1選項，這時選中的文本就應(yīng)用了所定義的樣式，如圖19-35所示。圖19-35（12）在頁面中選中要應(yīng)用樣式的文本，再在其屬性面

（13）重復(fù)第（4