青春驛站網(wǎng)頁設(shè)計范例

1、網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例第第10章章 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例 n10.1 10.1 設(shè)計站點設(shè)計站點n10.2 10.2 制作進站頁面制作進站頁面n10.3 10.3 制作主頁制作主頁n10.4 10.4 制作制作“時尚話題時尚話題”頁面頁面n10.5 10.5 制作制作“頭發(fā)的時尚頭發(fā)的時尚”、“城市的城市的性格性格”及及“服裝百年服裝百年”頁面頁面 n10.6 10.6 制作制作“心情文章心情文章”頁面頁面n10.7 10.7 制作制作“熱點討論熱點討論”頁面頁面 n10.8 10.8 測試和上傳站點測試和上傳站點網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例 主要內(nèi)容主要內(nèi)容 本章我們將通過詳細描述一個網(wǎng)本

2、章我們將通過詳細描述一個網(wǎng)站站 “ “青春驛站青春驛站”的建設(shè)過程，學(xué)的建設(shè)過程，學(xué)習(xí)用習(xí)用Dreamweaver mx 2004Dreamweaver mx 2004制作一個制作一個完整的站點的步驟與關(guān)鍵技術(shù)。完整的站點的步驟與關(guān)鍵技術(shù)。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例本章重點本章重點 n網(wǎng)站建設(shè)過程網(wǎng)站建設(shè)過程n網(wǎng)頁設(shè)計常用技術(shù)網(wǎng)頁設(shè)計常用技術(shù) 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例 通過本章的學(xué)習(xí)，熟悉網(wǎng)站建設(shè)的全通過本章的學(xué)習(xí)，熟悉網(wǎng)站建設(shè)的全過程，掌握網(wǎng)頁設(shè)計常用技術(shù)。過程，掌握網(wǎng)頁設(shè)計常用技術(shù)。 教學(xué)目標教學(xué)目標 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例 “青春驛站青春驛站”是一個流溢著青春氣息的網(wǎng)站，是一個流溢著青春

3、氣息的網(wǎng)站，網(wǎng)頁的內(nèi)容圍繞著年青人喜歡的主題展開。網(wǎng)頁的內(nèi)容圍繞著年青人喜歡的主題展開。10.1 設(shè)計站點設(shè)計站點網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例 10.1.1 網(wǎng)站的總體結(jié)構(gòu)網(wǎng)站的總體結(jié)構(gòu) 進入頁面主頁時尚話題心情文章熱點討論驛站留言頭發(fā)的時尚城市的性格服裝百年圖10.1 站點總體結(jié)構(gòu)圖 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.1.2 建立站點建立站點 本例是在本例是在E盤盤book文件夾下建立一個名為文件夾下建立一個名為youngsite的的站點。制作步驟如下：站點。制作步驟如下：（1）先在）先在E盤盤book文件夾下建立一個名為文件夾下建立一個名為youngsite的的文件夾，用來存放創(chuàng)建的網(wǎng)頁；在文件夾

4、，用來存放創(chuàng)建的網(wǎng)頁；在youngsite文件夾下文件夾下建立一個名為建立一個名為images的文件夾，用以存放站點中的圖像，的文件夾，用以存放站點中的圖像，可以把要用的圖片先放入該文件夾中?？梢园岩玫膱D片先放入該文件夾中。（2）選擇【站點】）選擇【站點】|【管理站點】，打開【管理站點】【管理站點】，打開【管理站點】對話框，單擊【新建】按鈕，在彈出的下拉菜單中選擇對話框，單擊【新建】按鈕，在彈出的下拉菜單中選擇【站點】命令，在打開的【站點定義】對話框中做如圖【站點】命令，在打開的【站點定義】對話框中做如圖10.2所示的設(shè)置。此時站點管理面板如圖所示的設(shè)置。此時站點管理面板如圖10.3所示。所

5、示。 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例圖10.2 站點定義對話框網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例圖10.3 站點管理面板網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.1.3 生成網(wǎng)頁生成網(wǎng)頁1. 生成進站頁面生成進站頁面(1) 選擇菜單【文件】選擇菜單【文件】|【新建】，則彈出【新建文檔】【新建】，則彈出【新建文檔】對話框，在該對話框中選擇【常規(guī)】選項卡，在【類對話框，在該對話框中選擇【常規(guī)】選項卡，在【類別】選項中選擇【基本頁】，然后在【基本頁】列表別】選項中選擇【基本頁】，然后在【基本頁】列表框中選擇框中選擇HTML，單擊【創(chuàng)建】按鈕即創(chuàng)建一個，單擊【創(chuàng)建】按鈕即創(chuàng)建一個HTML頁面文檔。頁面文檔。(2) 在文檔工具欄的

6、標題欄中，輸入網(wǎng)頁標題在文檔工具欄的標題欄中，輸入網(wǎng)頁標題“進站頁進站頁面面”。(3) 選擇菜單【文件】選擇菜單【文件】|【保存】，則彈出【另存為】對【保存】，則彈出【另存為】對話框，則將該頁面以話框，則將該頁面以index.htm的名字保存在的名字保存在E:bookyoungsite中。中。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例2生成主頁及其它頁面生成主頁及其它頁面以相同方法生成以相同方法生成主頁及其它頁面，主頁及其它頁面，各個頁面的名稱各個頁面的名稱及存儲位置見圖及存儲位置見圖10.4所示。所示。服裝百年城市的性格頭發(fā)的時尚熱點討論心情文章時尚話題主頁圖10.4 主頁及其它頁面網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例1

7、0.2 制作進站頁面制作進站頁面打開進站頁面文檔打開進站頁面文檔index.htm，進行設(shè)計。，進行設(shè)計。1用表格進行整體布局用表格進行整體布局選擇菜單【插入】選擇菜單【插入】|【表格】或在插入工具欄中的【布局】【表格】或在插入工具欄中的【布局】類中選擇表格按鈕，則會出現(xiàn)【表格】設(shè)置對話框，類中選擇表格按鈕，則會出現(xiàn)【表格】設(shè)置對話框，插入一個插入一個4行行1列寬度為列寬度為800個像素的表格。個像素的表格。 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例2添加網(wǎng)頁元素添加網(wǎng)頁元素 (1) 在表格中的第在表格中的第1行，輸入行，輸入“青春驛站青春驛站”四個字，選擇四個字，選擇這四個字，在屬性面板中進行設(shè)置，字體為這

8、四個字，在屬性面板中進行設(shè)置，字體為“華文行華文行楷楷”，大小為，大小為20。單元格對齊方式為水平。單元格對齊方式為水平“居中對居中對齊齊”，垂直，垂直“居中居中”。(2) 在表格中的第在表格中的第2行和第行和第4行，分別輸入如圖行，分別輸入如圖10.5所示所示的第的第2行文字行文字“青春的美麗青春的美麗”和最后一行文字和最后一行文字“歡歡迎你的到來迎你的到來”。選擇這些文字，在屬性面板中進行。選擇這些文字，在屬性面板中進行設(shè)置，字體和大小都為設(shè)置，字體和大小都為“默認默認”。單元格對齊方式為。單元格對齊方式為水平水平“居中對齊居中對齊”，垂直，垂直“居中居中”。(3) 選擇菜單【插入】選擇菜

9、單【插入】|【圖像】在表格中的第【圖像】在表格中的第3行，插行，插入圖像入圖像43.jpg。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例3頁面屬性的設(shè)置頁面屬性的設(shè)置選擇菜單【修改】選擇菜單【修改】|【頁面屬性】，在打開的【頁面屬性】，在打開的頁面屬性對話框中進行設(shè)置，將背景顏色頁面屬性對話框中進行設(shè)置，將背景顏色設(shè)為綠色設(shè)為綠色(#99CC33)，文本顏色設(shè)為白色，文本顏色設(shè)為白色(#FFFFFF)。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.3 制作主頁制作主頁網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.3.1 整體效果設(shè)計整體效果設(shè)計主頁采用主頁采用T形布局，頁面上部為橫幅及網(wǎng)站標志，下形布局，頁面上部為橫幅及網(wǎng)站標志，下方左半部分為

10、導(dǎo)航區(qū)，右半部分為網(wǎng)頁主體顯示內(nèi)容的方左半部分為導(dǎo)航區(qū)，右半部分為網(wǎng)頁主體顯示內(nèi)容的布局。布局。主頁的色彩以藍綠色為主，給人以青春、旺盛的感覺。主頁的色彩以藍綠色為主，給人以青春、旺盛的感覺。整個頁面共插入了六幅整個頁面共插入了六幅gif圖像，其中四幅靜態(tài)圖像分圖像，其中四幅靜態(tài)圖像分別作為網(wǎng)頁橫幅部分、網(wǎng)頁標志、表格單元格的背景，別作為網(wǎng)頁橫幅部分、網(wǎng)頁標志、表格單元格的背景，給頁面添加了美感，容易使人產(chǎn)生聯(lián)想；而在左下半部給頁面添加了美感，容易使人產(chǎn)生聯(lián)想；而在左下半部分的主菜單上方及作為網(wǎng)頁主頁部分的背景的動態(tài)分的主菜單上方及作為網(wǎng)頁主頁部分的背景的動態(tài)gif圖圖像的插入，賦予整個頁面以

11、動感，給人以明快的感覺。像的插入，賦予整個頁面以動感，給人以明快的感覺。主頁中的文字采用的是瀏覽器的默認字體，即中文宋主頁中的文字采用的是瀏覽器的默認字體，即中文宋體和英文體和英文Times New Roman字體，顯得整齊有序。字體，顯得整齊有序。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.3.2 用表格進行整體布局并設(shè)置用表格進行整體布局并設(shè)置(1)插入一個插入一個3行行1列，寬度為列，寬度為800個像素，邊框粗細、單個像素，邊框粗細、單元格邊距及單元格間距均為元格邊距及單元格間距均為0的表格。的表格。(2) 將光標置于表格第將光標置于表格第1行，選擇【修改】行，選擇【修改】|【表格】【表格】|【拆分單

12、元格】，將單元格拆分成【拆分單元格】，將單元格拆分成2列。拖動兩列中間列。拖動兩列中間的框線，使左側(cè)寬度大約在的框線，使左側(cè)寬度大約在150像素。像素。(3) 將光標置于表格第將光標置于表格第1行中第行中第1個單元格，選擇【修改】個單元格，選擇【修改】|【表格】【表格】|【拆分單元格】，將單元格拆分成【拆分單元格】，將單元格拆分成2行。行。(4) 將光標置于表格第將光標置于表格第2行，選擇【修改】行，選擇【修改】|【表格】【表格】|【拆分單元格】，將單元格拆分成【拆分單元格】，將單元格拆分成2列。列。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.3.3 網(wǎng)頁橫幅及標志部分的設(shè)計網(wǎng)頁橫幅及標志部分的設(shè)計 (1)

13、 將光標置于第將光標置于第1行第行第2列單元格中，選擇菜單【插入】列單元格中，選擇菜單【插入】|【圖像】，插入圖像【圖像】，插入圖像5.gif，調(diào)整大小到適當(dāng)寬度。，調(diào)整大小到適當(dāng)寬度。(2) 將光標置于第將光標置于第1行第行第1列上面的單元格中，選擇菜單列上面的單元格中，選擇菜單【插入】【插入】|【圖像】，插入圖像【圖像】，插入圖像text.gif。在屬性面板。在屬性面板上，設(shè)置圖像居中，其余默認。上，設(shè)置圖像居中，其余默認。(3) 將光標置于表格的第將光標置于表格的第3行，輸入文字：行，輸入文字：Copyright 2005 ，All Rights Reserved 青春驛站。在屬性面青春

14、驛站。在屬性面板上，設(shè)置文字居中，其余默認。板上，設(shè)置文字居中，其余默認。 (4) 橫幅部分的當(dāng)前日期，是通過在代碼中插入一段橫幅部分的當(dāng)前日期，是通過在代碼中插入一段JavaScript代碼來實現(xiàn)的。代碼來實現(xiàn)的。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.3.4 導(dǎo)航區(qū)的設(shè)計導(dǎo)航區(qū)的設(shè)計(1) 將光標置于左下方單元格中，選擇菜單【插入】將光標置于左下方單元格中，選擇菜單【插入】|【圖像】，在該單元格上方插入圖像【圖像】，在該單元格上方插入圖像ai01.gif，調(diào)整，調(diào)整圖像大小以適應(yīng)單元格。圖像大小以適應(yīng)單元格。(2) 將光標置于所插入圖像的下方，選擇菜單【插入】將光標置于所插入圖像的下方，選擇菜單【插

15、入】|【表格】，插入一個【表格】，插入一個5行行1列，寬度為列，寬度為140像素，邊框像素，邊框粗細、單元格邊距為粗細、單元格邊距為0，單元格間距為，單元格間距為20的表格。的表格。(3) 在表格的各行分別輸入文字：在表格的各行分別輸入文字：“驛站首頁驛站首頁”，“時時尚話題尚話題”，“心情文章心情文章”，“熱點討論熱點討論”和和“驛站留驛站留言言”。在屬性面板上設(shè)置文字字體為默認字體，大小。在屬性面板上設(shè)置文字字體為默認字體，大小為為14，居中。，居中。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例 (4) 建立超級鏈接。選擇建立超級鏈接。選擇“驛站首頁驛站首頁”四個字，在四個字，在屬性面板的【鏈接】框中選擇屬性

16、面板的【鏈接】框中選擇index1.htm（即本（即本主頁）。同理，設(shè)置主頁）。同理，設(shè)置“時尚話題時尚話題” 鏈接到網(wǎng)頁文件鏈接到網(wǎng)頁文件shishanghuati.htm；設(shè)置；設(shè)置“心情文章心情文章” 鏈接到網(wǎng)鏈接到網(wǎng)頁文件頁文件xinqingwenzhang.htm；設(shè)置；設(shè)置“熱點討論熱點討論” 鏈接到網(wǎng)頁文件鏈接到網(wǎng)頁文件rediantaolun.htm；在；在“驛站留言驛站留言” 鏈接框中寫入如下腳本：鏈接框中寫入如下腳本：mailto:，即當(dāng)單擊該鏈接時，將發(fā)送電子郵件到即當(dāng)單擊該鏈接時，將發(fā)送電子郵件到郵箱。郵箱。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.3.5 主體部分的設(shè)計主體部分的

17、設(shè)計 在主體部分包含導(dǎo)航區(qū)主菜單中對應(yīng)在主體部分包含導(dǎo)航區(qū)主菜單中對應(yīng)選項中的主要內(nèi)容，可以從這里快速點擊選項中的主要內(nèi)容，可以從這里快速點擊進入瀏覽。進入瀏覽。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例1利用表格布局利用表格布局(1) 將光標置于主體區(qū)單元格中，即導(dǎo)航區(qū)右側(cè)單元格，將光標置于主體區(qū)單元格中，即導(dǎo)航區(qū)右側(cè)單元格，選擇菜單【插入】選擇菜單【插入】|【表格】，插入一個【表格】，插入一個4行行2列，寬列，寬度為度為650像素，邊框粗細為像素，邊框粗細為2，單元格邊距及單元格間，單元格邊距及單元格間距為距為0，其余各項為默認的表格。調(diào)整表格各行到合適，其余各項為默認的表格。調(diào)整表格各行到合適高度。高度。

18、(2) 將光標置于上述表格的第將光標置于上述表格的第2行第行第1列對應(yīng)的單元格，列對應(yīng)的單元格，選擇菜單【插入】選擇菜單【插入】|【表格】，插入一個【表格】，插入一個6行行1列，寬列，寬度為度為300像素，高為像素，高為180像素，邊框粗細、單元格邊像素，邊框粗細、單元格邊距及單元格間距均為距及單元格間距均為0，居中對齊，其余各項為默認的，居中對齊，其余各項為默認的表格。表格。(3) 將上一步制作的表格拷貝下來。分別粘貼到第將上一步制作的表格拷貝下來。分別粘貼到第2行第行第2列及第列及第4行第行第1列對應(yīng)的單元格中。列對應(yīng)的單元格中。 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例(4) 將光標置于第將光標置于第4

19、行第行第2列對應(yīng)的單元格中，選擇列對應(yīng)的單元格中，選擇菜單【插入】菜單【插入】|【表格】，插入一個【表格】，插入一個2行行2列，寬列，寬度為度為320像素，邊框粗細、單元格邊距及單元格像素，邊框粗細、單元格邊距及單元格間距均為間距均為0，居中對齊，其余各項為默認的表格。，居中對齊，其余各項為默認的表格。選擇菜單【修改】選擇菜單【修改】|【表格】將該表格第【表格】將該表格第1行兩個行兩個單元格合并。單元格合并。 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例2添加網(wǎng)頁元素添加網(wǎng)頁元素(1) 添加單元格背景。將主體部分大表格的第添加單元格背景。將主體部分大表格的第1行行及第及第3行加入背景圖片行加入背景圖片3rd_mi

20、ddle_left_bg1.gif(2) 添加圖片。在主體部分大表格的第添加圖片。在主體部分大表格的第1行及第行及第3行行的單元格左側(cè)插入圖片的單元格左側(cè)插入圖片heart_s.gif。(3) 輸入文字。在各單元格中輸入對應(yīng)文字，字體輸入文字。在各單元格中輸入對應(yīng)文字，字體為默認字體，大小為為默認字體，大小為14。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例(4) 設(shè)置超級鏈接。將設(shè)置超級鏈接。將“時尚話題時尚話題”下的下的“頭發(fā)的頭發(fā)的時尚時尚”、“城市的性格城市的性格”和和“服裝百年服裝百年”分別鏈分別鏈接到接到toufashishang.htm，chengshidexingge.htm和和fuzhuangb

21、ainian.htm；將；將“熱點討論熱點討論”下的下的“大學(xué)生校外租房調(diào)查大學(xué)生校外租房調(diào)查”鏈接到鏈接到rediantaolun.htm；將；將“心情文章心情文章”下所有的下所有的各項均鏈接到各項均鏈接到xinqingwenzhang.htm。(5) 將主體部分的表格加入背景圖片。在表格屬性將主體部分的表格加入背景圖片。在表格屬性面板的【背景】框中選擇面板的【背景】框中選擇xmasbg4.gif。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.3.6 添加頁面動態(tài)效果添加頁面動態(tài)效果為了增強頁面的顯示效果及功能，可以在頁面上適當(dāng)為了增強頁面的顯示效果及功能，可以在頁面上適當(dāng)?shù)靥砑有┑靥砑有㎎avaScrip

22、t腳本。腳本。在頁面中添加在頁面中添加JavaScript腳本，可以有兩種方法，腳本，可以有兩種方法，一種是使用一種是使用Dreamweaver MX提供的行為功能，另一提供的行為功能，另一種是直接在網(wǎng)頁種是直接在網(wǎng)頁HTML代碼中使用代碼中使用標志直接寫標志直接寫入入JavaScript腳本。腳本。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例1設(shè)置狀態(tài)欄文本設(shè)置狀態(tài)欄文本 (1) 選中當(dāng)前主頁文檔選中當(dāng)前主頁文檔index1.htm下部的標簽選擇器中下部的標簽選擇器中的的標簽。標簽。(2) 選擇菜單【窗口】選擇菜單【窗口】|【行為】，打開行為面板。【行為】，打開行為面板。(3) 單擊面板中的按鈕，從彈出菜單中選

23、擇【設(shè)置文本】單擊面板中的按鈕，從彈出菜單中選擇【設(shè)置文本】|【設(shè)置狀態(tài)欄文本】，。打開【設(shè)置狀態(tài)欄文本】對【設(shè)置狀態(tài)欄文本】，。打開【設(shè)置狀態(tài)欄文本】對話框。在該對話框中的文本框中輸入文字話框。在該對話框中的文本框中輸入文字“歡迎你的歡迎你的到來到來,光臨屬于你的、我的、大家的青春驛站光臨屬于你的、我的、大家的青春驛站!”，單擊，單擊 【確定】按鈕返回?！敬_定】按鈕返回。 (4) 存盤預(yù)覽，則可以看見在頁面狀態(tài)欄中顯示的文字。存盤預(yù)覽，則可以看見在頁面狀態(tài)欄中顯示的文字。 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例2顯示當(dāng)前日期顯示當(dāng)前日期(1) 在【設(shè)計】視圖中，將光標置于欲顯示日期的在【設(shè)計】視圖中，將光

24、標置于欲顯示日期的單元格中。單元格中。(2) 切換到【代碼】視圖中，在光標所在位置輸入切換到【代碼】視圖中，在光標所在位置輸入如下代碼：如下代碼：網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.4 制作制作“時尚話題時尚話題”頁面頁面10.4.1 網(wǎng)頁橫幅的制作網(wǎng)頁橫幅的制作1表格布局表格布局插入一個插入一個1行行2列寬度為列寬度為800個像素的表格。個像素的表格。2插入圖像插入圖像在上述左側(cè)單元格中插入圖像在上述左側(cè)單元格中插入圖像text.gif，在右側(cè)單元格，在右側(cè)單元格中插入圖像中插入圖像4.gif。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.4.2 主體部分制作主體部分制作1表格布局表格布局(1) 將光標置于橫幅下

25、面，插入一個將光標置于橫幅下面，插入一個3行行2列寬度為列寬度為800像像素的表格。素的表格。(2) 選中第選中第3行兩個單元格，選擇菜單【修改】行兩個單元格，選擇菜單【修改】|【表格】【表格】|【合并單元格】?！竞喜卧瘛?。2第第1行第行第1列對應(yīng)的單元格的設(shè)計列對應(yīng)的單元格的設(shè)計(1) 在該單元格中插入一個在該單元格中插入一個2行行2列的表格。列的表格。(2) 在該表格的四個單元格中，順次插入四個圖像：在該表格的四個單元格中，順次插入四個圖像：fashion_left_1.jpg，fashion_left_2.jpg，fashion_left_3.jpg和和fashion_left_4.

26、jpg，構(gòu)成一個完整，構(gòu)成一個完整的畫面。的畫面。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例3第第1行第行第2列對應(yīng)的單元格的設(shè)計列對應(yīng)的單元格的設(shè)計(1) 在該單元格中插入一個在該單元格中插入一個9行行3列的表格。列的表格。(2) 合并第合并第1行行3個單元格個單元格,在合并后的單元格中插入圖像在合并后的單元格中插入圖像fashion_titleright01.gif。(3) 適當(dāng)?shù)恼{(diào)整下面適當(dāng)?shù)恼{(diào)整下面8行各列的寬度。行各列的寬度。(4) 分別在第分別在第2行、第行、第4行和第行和第6行的第行的第1列單元格中插入圖像列單元格中插入圖像index_image15_1.gif，index_image15_2.g

27、if和和index_image15_3.gif。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例(5) 在其余單元格中輸入文本。字體為默認字體，在其余單元格中輸入文本。字體為默認字體，3個標題的字體大小為個標題的字體大小為14，其余大小默認。，其余大小默認。(6) 設(shè)置設(shè)置3個標題的超鏈接：個標題的超鏈接：“頭發(fā)的時尚頭發(fā)的時尚”鏈鏈接至接至toufashishang.htm；“城市的性格城市的性格”鏈鏈接至接至chengshidexingge.htm；“服裝百年服裝百年”鏈鏈接至接至fuzhuangbainian.htm。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例4第第2行單元格的設(shè)計行單元格的設(shè)計(1) 在左側(cè)單元格中插入圖像在左

28、側(cè)單元格中插入圖像linker.gif。(2) 在右側(cè)單元格中輸入文本在右側(cè)單元格中輸入文本“【返回主【返回主頁】頁】”。(3) 將將“返回主頁返回主頁”鏈接至主頁鏈接至主頁index1.htm。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例5第第3行單元格的設(shè)計行單元格的設(shè)計在該單元格中插入圖像在該單元格中插入圖像xjtu_05.jpg，并調(diào)整，并調(diào)整該圖像的大小，使之占滿整個單元格。該圖像的大小，使之占滿整個單元格。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.5 制作制作“頭發(fā)的時尚頭發(fā)的時尚”、“城市的性格城市的性格”及及“服裝百年服裝百年”頁面頁面“頭發(fā)的時尚頭發(fā)的時尚”、“城市的性格城市的性格”及及“服裝百年服裝百年”

29、這三個頁面同屬這三個頁面同屬“時尚話題時尚話題”的下級頁面，整體風(fēng)的下級頁面，整體風(fēng)格一致，故利用模板來創(chuàng)建。格一致，故利用模板來創(chuàng)建。 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.5.1 創(chuàng)建創(chuàng)建“時尚話題模板時尚話題模板”模板頁模板頁1新建新建HTML模板文檔模板文檔 選擇菜單【文件】選擇菜單【文件】|【新建】，則彈出【新建文【新建】，則彈出【新建文檔】對話框。在該對話框中選擇【常規(guī)】選項卡，檔】對話框。在該對話框中選擇【常規(guī)】選項卡，在【類別】選項中選擇【模板頁】，然后在【模板在【類別】選項中選擇【模板頁】，然后在【模板頁】列表框中選擇【頁】列表框中選擇【HTML模板】，單擊【創(chuàng)建】模板】，單擊【創(chuàng)建

30、】按鈕即創(chuàng)建一個按鈕即創(chuàng)建一個HTML模板頁文檔。模板頁文檔。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例2定義頁標題定義頁標題在文檔工具欄的標題欄中，輸入網(wǎng)頁標在文檔工具欄的標題欄中，輸入網(wǎng)頁標題題“時尚話題模板時尚話題模板” 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例3網(wǎng)頁橫幅的制作網(wǎng)頁橫幅的制作(1) 表格布局表格布局插入一個插入一個1行行2列寬度為列寬度為800個像素的表格。個像素的表格。(2) 插入圖像插入圖像選擇菜單【插入】選擇菜單【插入】|【圖像】，在上述左側(cè)單元格中插入【圖像】，在上述左側(cè)單元格中插入圖像圖像text.gif，在右側(cè)單元格中插入圖像，在右側(cè)單元格中插入圖像4.gif。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例4主體部

31、分制作主體部分制作(1) 表格布局表格布局 光標置于橫幅下面，插入一個光標置于橫幅下面，插入一個3行行2列寬度為列寬度為800像素像素的表格，并適當(dāng)調(diào)整表格中間的框線，使左側(cè)列的寬的表格，并適當(dāng)調(diào)整表格中間的框線，使左側(cè)列的寬度大約為度大約為330像素。像素。 選中第選中第3行兩個單元格，選擇菜單【修改】行兩個單元格，選擇菜單【修改】|【表格】【表格】|【合并單元格】?！竞喜卧瘛?。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例(2) 第第1行第行第1列對應(yīng)的單元格的設(shè)計列對應(yīng)的單元格的設(shè)計 在該單元格中插入一個在該單元格中插入一個2行行1列的表格。列的表格。 在該表格的第在該表格的第1行單元格中，插入圖像行單元

32、格中，插入圖像fashion_titleright01.gif。 在該表格的第在該表格的第2行單元格中，插入一個行單元格中，插入一個3行行1列，寬度列，寬度為為300像素，間距為像素，間距為10像素的表格。在表格的三個單像素的表格。在表格的三個單元格中分別輸入：元格中分別輸入：“頭發(fā)的時尚頭發(fā)的時尚”，“城市的性格城市的性格”和和“服裝百年服裝百年”。并設(shè)置它們分別鏈接到網(wǎng)頁：。并設(shè)置它們分別鏈接到網(wǎng)頁：toufashishang.htm，chengshidexingge.htm和和fuzhuangbainian.htm。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例(3) 第第1行第行第2列對應(yīng)的單元格的設(shè)計列對

33、應(yīng)的單元格的設(shè)計在該單元格中插入一個在該單元格中插入一個1行，行，1列的表格，準備作為文本列的表格，準備作為文本的輸入?yún)^(qū)域。的輸入?yún)^(qū)域。(4) 第第2行單元格的設(shè)計行單元格的設(shè)計 在左側(cè)單元格中插入圖像在左側(cè)單元格中插入圖像linker.gif。 在右側(cè)單元格中輸入文本在右側(cè)單元格中輸入文本“【返回主頁】【返回主頁】”。 將將“返回主頁返回主頁”鏈接至主頁鏈接至主頁index1.htm。(5) 第第3行單元格的設(shè)計行單元格的設(shè)計在該單元格中插入圖像在該單元格中插入圖像xjtu_05.jpg，并調(diào)整該圖像的，并調(diào)整該圖像的大小，使之占滿整個單元格大小，使之占滿整個單元格 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例

34、5定義模板的可編輯區(qū)域定義模板的可編輯區(qū)域(1) 頁面標題部分是默認的可編輯區(qū)域，不用加以設(shè)置。頁面標題部分是默認的可編輯區(qū)域，不用加以設(shè)置。(2) 定義主體部分輸入文本區(qū)域為可編輯區(qū)域定義主體部分輸入文本區(qū)域為可編輯區(qū)域 選中主體部分第選中主體部分第1行第行第2列插入的準備輸入文本區(qū)域的列插入的準備輸入文本區(qū)域的表格表格 選擇菜單【插入】選擇菜單【插入】|【模板對象】【模板對象】|【可編輯區(qū)域】，【可編輯區(qū)域】，打開【新建可編輯區(qū)域】對話框，在【名稱】欄中輸打開【新建可編輯區(qū)域】對話框，在【名稱】欄中輸入入“EditRegion1”。 單擊【確定】按鈕，關(guān)閉【新建可編輯區(qū)域】對話框。單擊【確

35、定】按鈕，關(guān)閉【新建可編輯區(qū)域】對話框。 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例6保存模板文檔保存模板文檔將當(dāng)前模板文檔保存為將當(dāng)前模板文檔保存為shishangsample.dwt。此時，在當(dāng)前的此時，在當(dāng)前的youngsite站點的根目錄中自動增加站點的根目錄中自動增加一個文件夾一個文件夾Templates，新保存的模板就在該文件夾，新保存的模板就在該文件夾中。中。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.5.2 使用使用“時尚話題模板時尚話題模板”創(chuàng)建文檔創(chuàng)建文檔1創(chuàng)建創(chuàng)建“頭發(fā)的時尚頭發(fā)的時尚”頁面頁面(1) 選擇菜單【文件】選擇菜單【文件】|【新建】，則彈出【新建文檔】【新建】，則彈出【新建文檔】對話框，在該

36、對話框中選擇【模板】選項卡。對話框，在該對話框中選擇【模板】選項卡。(2) 選中【當(dāng)模板改變時更新頁面】選項，單擊【創(chuàng)建】選中【當(dāng)模板改變時更新頁面】選項，單擊【創(chuàng)建】按鈕，進入新文檔設(shè)計視圖。在該視圖中，光標只能按鈕，進入新文檔設(shè)計視圖。在該視圖中，光標只能移動到可編輯區(qū)域。移動到可編輯區(qū)域。(3) 改變文檔標題為改變文檔標題為“頭發(fā)的時尚頭發(fā)的時尚”。(4) 將光標移到將光標移到EditRegion1，輸入對應(yīng)文字。，輸入對應(yīng)文字。(5) 保存文檔為保存文檔為toufashishang.htm。 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例2創(chuàng)建創(chuàng)建“城市的性格城市的性格” 和和“服裝百年服裝百年”頁面頁面

37、按照按照 “1創(chuàng)建創(chuàng)建頭發(fā)的時尚頭發(fā)的時尚頁面頁面”的方法，的方法，來創(chuàng)建來創(chuàng)建“城市的性格城市的性格” 和和“服裝百年服裝百年”頁面，頁面，只需將文檔標題分別改變?yōu)橹恍鑼⑽臋n標題分別改變?yōu)椤俺鞘械男愿癯鞘械男愿瘛焙秃汀胺b百年服裝百年”；將文檔分別保存為；將文檔分別保存為chengshidexingge.htm和和fuzhuangbainian.htm。 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.6 制作制作“心情文章心情文章”頁面頁面10.6.1 網(wǎng)頁橫幅的制作網(wǎng)頁橫幅的制作1表格布局表格布局插入一個插入一個1行行2列寬度為列寬度為800個像素的表格。個像素的表格。2插入圖像插入圖像在上述左側(cè)單元格中

38、插入圖像在上述左側(cè)單元格中插入圖像text.gif，在右側(cè)單元格中，在右側(cè)單元格中插入圖像插入圖像5.gif。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.6.2 主體部分制作主體部分制作1表格布局表格布局將光標置于橫幅下面，插入一個將光標置于橫幅下面，插入一個3行行1列寬度為列寬度為800個像素個像素的表格。的表格。2第第1行單元格的設(shè)計行單元格的設(shè)計(1) 在該單元格中插入一個在該單元格中插入一個4行行3列，寬為列，寬為795，邊框粗細，邊框粗細為為2的表格。的表格。(2) 在該表格第在該表格第1行第行第1列、第列、第2行第行第3列、第列、第3行第行第1列及第列及第4行第行第3列對應(yīng)的單元格內(nèi)，各插入一個

39、列對應(yīng)的單元格內(nèi)，各插入一個2行行1列，寬度列，寬度為為250像素的表格。在表格的第像素的表格。在表格的第1行輸入文字標題，第行輸入文字標題，第2行輸入對應(yīng)正文行輸入對應(yīng)正文 。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例(3) 在該表格第在該表格第1行第行第3列、第列、第2行第行第2列、第列、第3行第行第3列及第列及第4行第行第2列對應(yīng)的單元格內(nèi)，依次插入四個圖像：列對應(yīng)的單元格內(nèi)，依次插入四個圖像：489.jpg，472.jpg，fullimage.jpg和和phot065.jpg。 (4) 在第在第1行第行第2列對應(yīng)的單元格內(nèi)輸入文字列對應(yīng)的單元格內(nèi)輸入文字“心情文章心情文章”，字體為字體為“華文行楷華文行

40、楷”，大小為，大小為7，顏色為藍色，顏色為藍色（#0099FF），居中。），居中。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例3第第2行單元格的設(shè)計行單元格的設(shè)計在該單元格中輸入文本在該單元格中輸入文本“【返回主頁】【返回主頁】”，居中。，居中。將將“返回主頁返回主頁”鏈接至主頁鏈接至主頁index1.htm4第第3行單元格的設(shè)計行單元格的設(shè)計在該單元格中插入圖像在該單元格中插入圖像huabian01.gif，居中。，居中。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.7 制作制作“熱點討論熱點討論”頁面頁面10.7.1 網(wǎng)頁橫幅的制作網(wǎng)頁橫幅的制作1表格布局表格布局插入一個插入一個1行行2列寬度為列寬度為800個像素的表格。個

41、像素的表格。2插入圖像插入圖像在上述左側(cè)單元格中插入圖像在上述左側(cè)單元格中插入圖像text.gif，在右側(cè)單元格中，在右側(cè)單元格中插入圖像插入圖像6.gif。網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例(3) 左側(cè)單元格的設(shè)計左側(cè)單元格的設(shè)計在該單元格插入一個在該單元格插入一個9行行1列的表格，分別在第列的表格，分別在第1、3、5、7、9行輸入文字及插入圖像行輸入文字及插入圖像soap1.jpg、ashtray1.jpg、soap2.jpg和和ashtray2.jpg，在插入的過程中適當(dāng)調(diào)整表格，在插入的過程中適當(dāng)調(diào)整表格邊線的位置，達到美觀的效果。邊線的位置，達到美觀的效果。3第第2行單元格的設(shè)計行單元格的設(shè)計

42、在該單元格中輸入文本在該單元格中輸入文本“【返回主頁】【返回主頁】”，居中。將，居中。將“返回主頁返回主頁”鏈接至主頁鏈接至主頁index1.htm。 網(wǎng)頁設(shè)計范例網(wǎng)頁設(shè)計范例10.7.2 主體部分制作主體部分制作1表格布局表格布局將光標置于橫幅下面，插入一個將光標置于橫幅下面，插入一個2行行1列寬度為列寬度為800個個像素的表格。像素的表格。2第第1行單元格的設(shè)計行單元格的設(shè)計(1) 將該單元格中拆分成將該單元格中拆分成2列。將第列。將第1列的寬度調(diào)整為列的寬度調(diào)整為大約大約136像素。像素。(2) 右側(cè)單元格的設(shè)計右側(cè)單元格的設(shè)計在該單元格插入一個在該單元格插入一個6行行1列邊框為列邊框為2的表格。在表格的表格。在表格的第的第1行輸入討論的標題：行輸入討論的標題：“冰與火冰與火 大學(xué)生校外租房調(diào)大學(xué)生校外租房調(diào)查查”；在以下各行分別插入圖像；在以下各行分別插入圖像04062801c.jpg，04062801d.jpg，04062801e.jpg，0406