MX2004網(wǎng)頁制作培訓(xùn)教程19個(gè)人網(wǎng)站制作實(shí)例(共71張)

1、中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林第十九課 個(gè)人網(wǎng)站制作實(shí)例課前導(dǎo)讀課堂講解上機(jī)實(shí)戰(zhàn)課后練習(xí)中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林課前導(dǎo)讀基礎(chǔ)知識(shí)重點(diǎn)知識(shí)中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林基礎(chǔ)知識(shí) 利用布局視圖布局個(gè)人主頁，個(gè)人主頁的內(nèi)容策劃。中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林重點(diǎn)知識(shí) 一個(gè)完整的個(gè)人主頁的創(chuàng)建。中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算

2、機(jī)學(xué)院 王則林課堂講解制作分析瀏覽網(wǎng)站中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 本課將利用前面所學(xué)的知識(shí)，構(gòu)建名為“吾茶吾心”的個(gè)人網(wǎng)站，本網(wǎng)站以個(gè)人愛好茶文化為主題，將網(wǎng)站的主題定位在比較小的范圍內(nèi)，并且跳出了以往個(gè)人網(wǎng)站的千篇一律的老模式。主要介紹了茶文化的幾個(gè)方面，欄目的劃分比較簡單，網(wǎng)站的色彩和構(gòu)圖以古典的中國文化為主要構(gòu)成元素，有著濃烈的個(gè)人特色。本網(wǎng)站包括首頁、茶藝茶道、茶詩茶文和茶水茶具幾部分。在構(gòu)建本網(wǎng)站時(shí)，本章將從建立站點(diǎn)開始以步驟的形式詳細(xì)介紹在Dreamweaver MX 2004中構(gòu)建個(gè)人網(wǎng)站的方法。中文版Dreamwea

3、ver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林制作分析 在制作本網(wǎng)站前應(yīng)先在電腦中創(chuàng)建一個(gè)名為tea的文件夾，然后在該文件夾中創(chuàng)建image和org文件夾。image文件夾中保存網(wǎng)站中的所有圖片；org文件夾中放置圖片的源文件，以方便要對某個(gè)圖片進(jìn)行修改時(shí)直接進(jìn)行修改即可。中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 制作本例時(shí)，先新建一個(gè)名為tea的站點(diǎn)，并保存在tea文件夾中，然后在站點(diǎn)根目錄下新建一個(gè)名為index.htm的頁面文件。再新建wcwx.htm頁面文件，并將導(dǎo)航欄中的各項(xiàng)鏈接到對應(yīng)的名稱上，由于網(wǎng)站的各個(gè)頁面并不

4、是十分規(guī)整，這里將利用復(fù)制頁面文件再進(jìn)行修改的方法，將wcwx.htm頁面文件復(fù)制成為cscw.htm頁面文件，再對其進(jìn)行修改。中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林瀏覽網(wǎng)站 如圖19-1所示是“吾茶吾心”網(wǎng)站的首頁，如圖19-2所示是“吾茶吾心”頁面，如圖19-3所示 是 “ 茶 詩 茶 文 ” 頁 面 ， 如 圖 1 9 - 4 所 示 是“茶”頁面。 圖19-1中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林圖19-2 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院

5、 王則林圖19-3 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林圖19-4 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林上機(jī)實(shí)戰(zhàn)創(chuàng)建站點(diǎn)制作index頁面制作“吾茶吾心”頁面制作“茶詩茶文”頁面中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 下面講解這個(gè)個(gè)人網(wǎng)站的具體制作方法，由于篇幅有限，這里只講解，首頁、“吾茶吾心”和“茶詩茶文” 3個(gè)頁面的制作。讀者可根據(jù)學(xué)習(xí)的知識(shí)將其他兩個(gè)頁面制作完成?？傊Ｍx者通過學(xué)習(xí)制作這個(gè)個(gè)人網(wǎng)站能鞏固前面所學(xué)的知識(shí)，并能對其靈活

6、運(yùn)用，就達(dá)到目的了。中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林創(chuàng)建站點(diǎn) 根據(jù)上面的制作分析，首先創(chuàng)建“吾茶吾心”個(gè)人網(wǎng)站的站點(diǎn)，具體操作如下。 （1）打開Dreamweaver MX 2004窗口。 （2）選擇站點(diǎn)管理站點(diǎn)菜單命令，打開“管理站點(diǎn)”對話框。中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （3）單擊 按鈕，在彈出的列表中選擇“站點(diǎn)”選項(xiàng)，如圖19-5所示，打開“站點(diǎn)定義”對話框。圖19-5 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （4）在“你打

7、算為你的站點(diǎn)取什么名字？”文本框中輸入tea，如圖19-6所示。圖19-6 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （5）單擊 按鈕進(jìn)入“編輯文件，第2部分”對話框。 （6）選中 單選項(xiàng)，如圖19-7所示。 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林圖19-7 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （7）單擊 按鈕進(jìn)入“編輯文件，第3部分”對話框。 （8）選中 單選項(xiàng)，在“您將把文件存儲(chǔ)在計(jì)算機(jī)上的什么位置?”文本框中單擊文本框右側(cè)的 按鈕，選擇前

8、面創(chuàng)建的tea文件夾，如圖19-8所示。 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林圖19-8 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （9）單擊 按鈕進(jìn)入“共享文件”對話框，在“您如何連接到遠(yuǎn)程服務(wù)器?”下拉列表框中選擇“無”選項(xiàng)，如圖19-9所示。 圖19-9中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （10）單擊 按鈕進(jìn)入“總結(jié)”對話框，如圖19-10所示。單擊 按鈕，創(chuàng)建的站點(diǎn)顯示在“管理站點(diǎn)”對話框中。 圖19-10 中文版Dreamweave

9、r MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （11）在“管理站點(diǎn)”對話框中，單擊 按鈕，站點(diǎn)就顯示在“文件”面板中，如圖19-11所示。圖19-11 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （12）在“文件”面板的tea文件夾上單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“新建文件”命令，如圖19-12所示。圖19-12 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （13）將新建的文檔重命名為index.htm，如圖19-13所示。圖19-13 中文版Dreamweaver MX 200

10、4 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （14）用同樣的方法，分別新建名為wcwx.htm、cycd.htm、cscw.htm和cscj.htm的文檔，如圖19-14所示。圖19-14 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林制作index頁面 創(chuàng)建好站點(diǎn)及index.htm頁面后，就可以制作index.htm頁面了，具體操作如下 （1）在站點(diǎn)窗口中雙擊index.htm打開該頁面。 （2）在“標(biāo)題”文本框中輸入“吾茶吾心可以清心也”，如圖19-15所示。 圖19-15中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)

11、計(jì)算機(jī)學(xué)院 王則林 （3）單擊“插入”欄中“布局”選項(xiàng)卡中的 按鈕，再單擊 按鈕，此時(shí)光標(biāo)變成“+”，在頁面中按住鼠標(biāo)不放拖動(dòng)繪制出一個(gè)布局表格，如圖19-16所示。圖19-16 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （4）單擊 按鈕，在布局表格中拖動(dòng)繪制出一個(gè)單元格，如圖19-17所示。圖19-17 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （5）按住【Ctrl】鍵，連續(xù)繪制出如圖19-18所示的單元格。圖19-18 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)

12、學(xué)院 王則林 （6）將光標(biāo)定位到左上方的單元格中，單擊“插入”欄中“常用”選項(xiàng)卡中的 按鈕，在“選擇圖像源文件”對話框中打開tea文件夾中的image文件夾，在文件列表中選擇bg_c1.jpg，如圖19-19所示。 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林圖19-19 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （7）單擊 按鈕，將圖像插入到單元格中，如圖19-20所示。 圖19-20中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （8）將光標(biāo)定位在左下方單元

13、格中，再單擊 圖標(biāo)，在打開的對話框中選擇bg_c2.htm，單擊 按鈕將圖像插入到單元格中，如圖19-21所示。 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林圖19-21 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （9）用同樣的方法在右邊的4個(gè)單元格中單擊將依次插入圖像，如圖19-22所示。 圖19-22中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （10）單擊“吾茶吾心”導(dǎo)航圖片，在其屬性面板的“鏈接”文本框中輸入wcwx.htm。 （11）用同樣的方法，依

14、次為其他3個(gè)導(dǎo)航圖片建立鏈接。 （12）按【Ctrl+S】鍵保存頁面文件，并按【F12】鍵預(yù)覽效果，如圖19-1所示。中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林制作“吾茶吾心”頁面 “吾茶吾心”的頁面主要介紹了制作者本人對茶文化的理解和感觸。具體操作如下。 （1）在“文件”面板中雙擊“wcwx.htm”打開該文件。 （2）單擊“插入”欄中“布局”選項(xiàng)卡中的 按鈕，再單擊 按鈕，此時(shí)光標(biāo)變成“+”，在頁面中按住鼠標(biāo)不放拖動(dòng)繪制出一個(gè)布局表格，如圖19-23所示。 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林

15、圖19-23 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （3）單擊 按鈕，按住【Ctrl】鍵，連續(xù)繪制出如圖19-24所示的單元格。圖19-24 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （4）將光標(biāo)定位到第一個(gè)的單元格中，單擊“插入”欄中“常用”選項(xiàng)卡中的 按鈕，在“選擇圖像源文件”對話框中打開tea文件夾中的image文件夾，選擇dh_c1.jpg，單擊 按鈕將圖像插入到單元格中，依次插入全部導(dǎo)航圖像，如圖19-25所示。 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)

16、算機(jī)學(xué)院 王則林圖19-25 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （5）單擊“吾茶吾心”導(dǎo)航圖片，在其屬性面板的“鏈接”文本框中輸入wcwx.htm。 （6）用同樣的方法，依次為其他3個(gè)導(dǎo)航圖片建立鏈接。 （7）單擊 按鈕，按住【Ctrl】鍵，連續(xù)繪制3個(gè)單元格。 （8）將在Fireworks中制作好的圖像切片插入到各個(gè)單元格中。 （9）按【Ctrl+S】鍵保存頁面文件，并按【F12】鍵預(yù)覽效果。 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 個(gè)人網(wǎng)站一般都希望體現(xiàn)制作者的個(gè)性，常常都需要用到一些

17、特殊的字體，這時(shí)就需要將這些文本制作成圖像，因?yàn)樵S多瀏覽者的計(jì)算機(jī)上并沒有這些字體，瀏覽時(shí)將無法顯示這些個(gè)性的特殊字體。中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林制作“茶詩茶文”頁面 “茶詩茶文”的頁面主要介紹了中國古代和現(xiàn)代文學(xué)作品中關(guān)于茶的詩歌和文章以及一些對聯(lián)等。由于該頁面與“吾茶吾心”頁面在導(dǎo)航部分是相同的，所以可以將wcwx.htm頁面文件復(fù)制，再將其改名為cscw.htm，具體操作如下。中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （1）在“文件”面板中選中wcwx.htm頁面文件，按【Ctr

18、l+D】鍵重制一個(gè)wcwx.htm頁面文件，如圖19-26所示。 圖19-26中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （2）單擊“拷貝于wcwx.htm”頁面文件名，將其更改為cscw.htm，如圖19-27所示。圖19-27 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （3）雙擊cscw.htm頁面文件打開該文件。 （4）將除了導(dǎo)航區(qū)域外的其他圖像和布局單元格全部刪除，刪除后如圖19-28所示。圖19-28 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林

19、（5）單擊 按鈕，按住【Ctrl】鍵，連續(xù)繪制4個(gè)單元格，如圖19-29所示。圖19-29 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （6）分別在4個(gè)單元格中插入圖像，插入后如圖19-30所示。圖19-30 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （7）再繪制一個(gè)單元格，如圖19-31所示，用于在單元格中輸入各首茶詩的詩名。圖19-31 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （8）在單元格中輸入茶詩的詩名，完成后如圖19-32所示。圖19-32

20、中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （9）為文字定義一個(gè)樣式，按【Shift+F11】鍵打開“CSS樣式”面板，單擊 按鈕，打開“新建CSS樣式”對話框，如圖19-33所示。圖19-33 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （10）在“名稱”下拉列表框中輸入.c1，在“選擇器類型”欄選中 單選項(xiàng)，在“定義在”欄中選中 單選項(xiàng)。單擊 按鈕，打開“.c1的CSS樣式定義”對話框。 （11）在該對話框中進(jìn)行如圖19-34所示的設(shè)置。設(shè)置完成后，單擊 按鈕，完成樣式的定義。 中文版Dreamwe

21、aver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林圖19-34 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （12）在頁面中選中要應(yīng)用樣式的文本，再在其屬性面板的“樣式”下拉列表框中選擇.c1選項(xiàng)，這時(shí)選中的文本就應(yīng)用了所定義的樣式，如圖19-35所示。 圖19-35中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （13）重復(fù)第（4）（9）步，為“茶文”欄目也輸入茶文名，完成后如圖19-36所示。圖19-36 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院

22、 王則林 （14）至此這個(gè)頁面就做完了，但還需要為每首詩或文進(jìn)行鏈接，這里采用“打開瀏覽器窗口”行為來實(shí)現(xiàn)。按【Shift+F3】鍵來打開“行為”面板。 （15）選擇一首詩名，如“茶唐元稹”，單擊 按鈕，在彈出的“行為”菜單中選擇“打開瀏覽器窗口”命令，打開“打開瀏覽器窗口”對話框。 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （16）在“要顯示的URL”文本框中輸入要顯示的這首詩的頁面名cs_01.htm。在“窗口寬度”和“窗口高度”文本框中分別輸入打開瀏覽器的寬度620和高度364，如圖19-37所示。 圖19-37中文版Dreamweaver

23、 MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （17）單擊 按鈕，“行為”面板中將出現(xiàn)“打開瀏覽器窗口”動(dòng)作。將事件設(shè)為onClick事件。 （18）接著創(chuàng)建cs_01.htm頁面文件，新建一個(gè)空白頁面，并保存為cs_01.htm。打開該頁面文件。 （19）選擇插入表格菜單命令，打開“表格”對話框，在“行”和“列”數(shù)值框中都輸入1，在“表格寬度”文本框中輸入600，在其后的下拉列表框中選擇“像素”，如圖19-38所示。 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林圖19-38 中文版Dreamweaver MX 2004 網(wǎng)頁制作設(shè)計(jì)教程南通大學(xué)計(jì)算機(jī)學(xué)院 王則林 （20）單擊 按鈕，在頁面中即插入一個(gè)1行1列的表格，在表格中插入圖像，完成后如圖19-3