網(wǎng)頁設(shè)計(jì)與制作第10章

1、第10章 制作一個(gè)完整的網(wǎng)站一、知識(shí)要點(diǎn)1、制作一個(gè)完整網(wǎng)站的過程2、結(jié)合firewors、flash制作網(wǎng)頁圖片和動(dòng)畫3、css樣式4、使用模板制作與更新大量網(wǎng)頁二、例題分析例10.1：5dmedia步驟一：定義站點(diǎn)：設(shè)置本地站點(diǎn)1、在d或e盤上新建一個(gè)文件夾“5dname”，在該文件夾中再建一個(gè)文件夾“pictrue”。（注意：文件夾名、文件名（不管是圖片還是網(wǎng)頁）必須為英文字母或數(shù)字，不能為漢字）2、 在“站點(diǎn)”菜單中選擇“新建站點(diǎn)”，即會(huì)出現(xiàn)“站點(diǎn)定義”對(duì)話框。如果對(duì)話框顯示的是“高級(jí)”選項(xiàng)卡，則單擊“基本”。 出現(xiàn)“站點(diǎn)定義向?qū)А钡牡谝粋€(gè)屏幕，要求您為站點(diǎn)輸入一個(gè)站點(diǎn)名稱“5d多媒體

2、”。3、單擊“下一步”進(jìn)入下一個(gè)步驟。出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢問您是否要使用服務(wù)器技術(shù)。選擇“否，我不想使用服務(wù)器技術(shù)”選項(xiàng)指示目前該站點(diǎn)是一個(gè)靜態(tài)站點(diǎn)，沒有動(dòng)態(tài)頁。4、 單擊“下一步”進(jìn)入下一個(gè)步驟。 出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢問要如何使用文件。選擇標(biāo)有“編輯我的計(jì)算機(jī)上的本地拷貝，完成后再上傳到服務(wù)器（推薦）”的選項(xiàng)。在“您將把文件存儲(chǔ)在計(jì)算機(jī)中的什么位置？”文本框中輸入“d:/5dname”，或者通過瀏覽指定。5、單擊“下一步”進(jìn)入下一個(gè)步驟。 出現(xiàn)向?qū)У南乱粋€(gè)屏幕，詢問如何連接到遠(yuǎn)程服務(wù)器。現(xiàn)在，從彈出菜單中選擇“無”。單擊“下一步”進(jìn)入下一個(gè)步驟。 該向?qū)У南乱粋€(gè)屏幕將出現(xiàn)，其中顯示您

3、的設(shè)置概要。單擊“完成”完成設(shè)置。6、單擊“確定”，“站點(diǎn)”面板現(xiàn)在顯示當(dāng)前站點(diǎn)的新本地根文件夾，同時(shí)顯示一個(gè)圖標(biāo)允許您以分層樹視圖查看所有本地磁盤。7、點(diǎn)擊菜單“站點(diǎn)/編輯站點(diǎn)” 或點(diǎn)擊站點(diǎn)面板的站點(diǎn)選項(xiàng)卡上“站點(diǎn)/編輯站點(diǎn)”。都會(huì)出現(xiàn)編輯站點(diǎn)對(duì)話框，選中“5d多媒體”站點(diǎn)，再點(diǎn)擊“編輯”按鈕，即會(huì)出現(xiàn)“站點(diǎn)定義”對(duì)話框，單擊“高級(jí)”選項(xiàng)卡，在“默認(rèn)圖像文件夾”的對(duì)話框中輸入“d:/5dname/pictrue”或者通過瀏覽指定，先點(diǎn)擊“確認(rèn)”按鈕后再點(diǎn)擊“完成”按鈕。步驟二：制作首頁1、右鍵單擊“站點(diǎn)”面板中的根目錄，在彈出的菜單中選擇“新建文件”命令，把新建的文件名稱改為“index.h

4、tm”。2、雙擊“index.htm”，進(jìn)入頁面編輯狀態(tài)。3、啟動(dòng)fireworks，新建一個(gè)寬和高都為6像素，背景色為白色的文件；在狀態(tài)欄上將視圖縮放比率設(shè)為800%，（或點(diǎn)擊菜單命令“視圖/縮放比率”，再或用快捷鍵ctrl+8）；用工具欄上的矩形工具，畫一個(gè)寬和高都為5像素的矩形，x和y（起始點(diǎn)坐標(biāo)）都為0，在屬性面板上能看到寬和高、x和y，將矩形的填充顏色設(shè)為#efefef，邊框顏色設(shè)為沒有（一根紅色的斜線）；最后點(diǎn)擊菜單命令“文件/導(dǎo)出”，選擇導(dǎo)出地址為你站點(diǎn)文件夾下的圖片文件夾，如：本例“d:/5dname/pictrue”，文件名如：bg.gif（注意擴(kuò)展名為gif）。4、切換到d

5、reamweaver，在頁面空白處單擊鼠標(biāo)右鍵，選擇“頁面屬性”命令，在彈出的頁面屬性對(duì)話框中定義左邊界、頂部邊界都為0，將剛才制作的圖片設(shè)置為背景圖像，在頁面屬性對(duì)話框中的背景圖像文本框中輸入“pictrue/bg.gif”，或者點(diǎn)擊其后的“瀏覽”按鈕，選擇“d:/5dname/pictrue”文件夾中的bg.gif。5、下面的操作從步驟三到步驟六是對(duì)整個(gè)網(wǎng)頁進(jìn)行布局和排版，通過插入4個(gè)邊框?yàn)?的表格對(duì)頁面各元素進(jìn)行定位。注：網(wǎng)頁的布局可以使用表格的標(biāo)準(zhǔn)模式和布局模式，讀者可以自行選擇；下面步驟用的是標(biāo)準(zhǔn)模式。下面圖示只是為了說明各表格的寬高，各表格中單元格的寬高及合并情況；4個(gè)表格邊框粗細(xì)

6、都為0；表格與表格之間沒有間隙，在dreamweaver中應(yīng)該是緊挨在一起。步驟三：制作網(wǎng)頁頂部橫標(biāo)題的基本元素1、插入一個(gè)1行2列的表格，在“插入表格”對(duì)話框中設(shè)置“寬”為778像素，“填充”、“間距”、“邊框”值都設(shè)為0，將“屬性”窗口中表格屬性的“高”設(shè)置為100像素、“對(duì)齊”設(shè)置為水平居中，背景顏色設(shè)置為白色。2、將鼠標(biāo)定位在表格的左邊一列單元格中，將“屬性”窗口中單元格屬性的“寬”設(shè)為200像素，右邊一列單元格的寬設(shè)為578像素。（一）制作網(wǎng)站徽標(biāo)1、啟動(dòng)flash，新建一個(gè)文件，點(diǎn)擊菜單命令“修改/影片”，修改文檔寬200px、高100px，背景色為白色。2、通過矩形工具、選擇工具

7、、次級(jí)選取工具、文字工具、變形扭曲工具、圓形工具等繪制書上p337的網(wǎng)站徽標(biāo)。3、繪制完成后，點(diǎn)擊菜單命令“文件/導(dǎo)出圖像”，選擇文件類型“gif圖像（*.gif）”，選擇導(dǎo)出文件夾位置“d:/5dname/pictrue”，輸入文件名“l(fā)ogo”。4、切換到dreamweaver，將鼠標(biāo)定位在表格的左邊單元格中，點(diǎn)擊菜單命令“插入/圖像”，選擇d:/5dname/pictrue/logo.gif，或者從站點(diǎn)面板的圖像文件夾中將該圖像直接拖到單元格中。（二）制作廣告條方法一：用flash制作廣告條1、切換到flash，新建一個(gè)文件，點(diǎn)擊菜單命令“修改/影片”，修改文檔寬470px、高64px，

8、背景色為白色。2、在圖層一的第一幀用矩形工具畫一個(gè)矩形，在屬性面板中將寬設(shè)為468px、高設(shè)為62px、x設(shè)為1，y設(shè)為1，再將矩形的填充設(shè)置為沒有填充色（一根紅色的斜線），邊框線色為黑色、實(shí)線、粗細(xì)為1。在第40幀插入幀（f5）。3、新建一個(gè)圖層二，在第一幀里輸入文字“建網(wǎng)站 不求人”，設(shè)置文字顏色為#9c6262、字體隸書、字號(hào)56，選中文字按下f8將文字轉(zhuǎn)換為圖形元件。4、分別在第20幀和第40幀插入關(guān)鍵幀（f6）。5、選中第20幀中的元件實(shí)例，ctrl+t彈出變形面板（transform）將其放大2倍，在屬性面板中的顏色選項(xiàng)中選擇alpha（透明度）設(shè)為0%。6、分別選中第1幀和第20

9、幀，點(diǎn)擊鼠標(biāo)右鍵，創(chuàng)建補(bǔ)間動(dòng)畫。（creat motion tween）7、點(diǎn)擊菜單命令“文件/導(dǎo)出影片”，選擇文件類型“flash影片（*.swf）”，選擇導(dǎo)出文件夾位置“d:/5dname/pictrue”，輸入文件名“banner”。（banner.swf）8、切換到dreamweaver，將鼠標(biāo)定位在表格的右邊單元格中，點(diǎn)擊菜單命令“插入/媒體/flash”，選擇d:/5dname/pictrue/banner.swf，或者從站點(diǎn)面板的圖像文件夾中將該flash影片直接拖到單元格中。方法二：用fireworks制作廣告條1、切換到fireworks，新建一個(gè)文件寬470px、高64px

10、，背景色為白色。 2、輸入文字“建網(wǎng)站 不求人”，設(shè)置文字顏色為#9c6262、字體隸書、字號(hào)56。 3、點(diǎn)擊“窗口/幀”，打開幀面板，點(diǎn)擊右上角的三角形按鈕彈出下拉菜單，“添加幀”，在該幀之后添加1幀，輸入文字“5d多媒體 來幫忙”，設(shè)置文字顏色為黑色、字體華文楷體、字號(hào)56，描邊顏色為白色，在效果面板中選擇“陰影和光暈”，“投影”。 4、回到幀面板，雙擊幀1右邊“7”，將其改為100（100/100秒，相當(dāng)于1秒）。將幀2改為200即2秒。 5、點(diǎn)擊菜單命令“文件/導(dǎo)出預(yù)覽”，在“格式”中選擇“gif動(dòng)畫”，“導(dǎo)出”，選擇導(dǎo)出文件夾位置“d:/5dname/pictrue”，輸入文件名“b

11、anner”。（banner.gif） 6、切換到dreamweaver，將鼠標(biāo)定位在表格的右邊單元格中，點(diǎn)擊菜單命令“插入/圖像”，選擇d:/5dname/pictrue/banner.gif，或者從站點(diǎn)面板的圖像文件夾中將該圖片直接拖到單元格中。步驟四：制作網(wǎng)頁上面地址欄的基本元素1、插入一個(gè)2行1列的表格，在“插入表格”對(duì)話框中設(shè)置“寬”為778像素，“填充”、“間距”、“邊框”值都設(shè)為0，將“屬性”窗口中表格屬性的“高”設(shè)置為75像素、“對(duì)齊”設(shè)置為水平居中，背景顏色設(shè)置為白色。2、將鼠標(biāo)定位在表格的上邊一行單元格中，將“屬性”窗口中單元格屬性的“高”設(shè)為25像素，下邊一行單元格的寬設(shè)

12、為50像素。（一）制作第1幅圖片1、切換到fireworks，新建一個(gè)寬為778、高為25像素、背景色為白色的文件。2、在狀態(tài)欄上將視圖縮放比率設(shè)為100%，（或點(diǎn)擊菜單命令“視圖/縮放比率”，再或用快捷鍵ctrl+8）。3、用直線工具畫一根直線，顏色為黑色，粗細(xì)為1，線條類型為“鉛筆/1像素”，寬為120px、高（粗細(xì)）為1px、x為1、y為24（在屬性面板上修改）；再畫一根直線，顏色、粗細(xì)、線條類型一樣，寬為618px、高（粗細(xì)）為1px、x為160、y為1，再用直線工具將兩條直線連起來。4、用矩形工具，畫一個(gè)寬72、高為18像素的矩形、x為200、y為3（在屬性面板上修改），制作按鈕，將

13、矩形的填充顏色設(shè)為#88ee66，邊框顏色設(shè)為沒有（一根紅色的斜線），將屬性面板上的矩形圓度設(shè)為100。5、選中矩形，調(diào)整屬性面板上的效果選項(xiàng)，執(zhí)行其中的“斜角和浮雕/內(nèi)斜角”，設(shè)置“斜角邊緣形狀”為“平滑”、寬度為6、對(duì)比度為30%、柔化為2、角度為135；選擇“陰影與暈光”中的“投影”，顏色為黑色、距離為3、不透明度為65%、柔化2，角度為315。6、選中矩形，按下ctrl+shift+d，克隆一個(gè)矩形，選中克隆的這個(gè)矩形，將顏色設(shè)置為#ffff00，選中屬性面板中效果項(xiàng)，點(diǎn)擊“”按鈕將其刪除，再將其寬設(shè)為46、高為6px、x為203、y為12，在屬性面板中選擇邊緣選項(xiàng)中的羽化，羽化度設(shè)為

14、25。7、點(diǎn)擊工具欄中文字工具輸入文字“域名注冊”，字號(hào)12，字體宋體、顏色白色，放在綠色矩形的中間位置，選擇“填充選項(xiàng)”中的邊緣設(shè)置為“實(shí)邊”，調(diào)整屬性面板上的效果選項(xiàng)，執(zhí)行其中“陰影與暈光”中的“投影”，顏色為黑色、距離為1、不透明度為65%、柔化0，角度為315，再執(zhí)行其中“陰影與暈光”中的“發(fā)光”，顏色為黑色、寬度為1、不透明度為85%、柔化0，位移為0。8、將綠色矩形黃色矩形與文字用黑色箭頭工具同時(shí)選中按下ctrl+g，將其群組。9、選中群組對(duì)象，將其克隆6次，分別向右邊拖動(dòng)，y都為3，最右邊的組合對(duì)象的x為670，將7個(gè)組合對(duì)象同時(shí)選中，執(zhí)行菜單命令“修改/對(duì)齊/均分寬度”，對(duì)象就

15、排列整齊。10、用白色箭頭（部分選擇工具）選中文字，再用文字工具將后6個(gè)組合對(duì)象的文字改成網(wǎng)頁需要的。11、最后點(diǎn)擊菜單命令“文件/導(dǎo)出”，選擇導(dǎo)出地址為你站點(diǎn)文件夾下的圖片文件夾，如：本例“d:/5dname/pictrue”，文件名如：address.gif（注意擴(kuò)展名為gif）。12、切換到dreamweaver，將鼠標(biāo)定位在第1行的單元格中，點(diǎn)擊菜單命令“插入/圖像”，選擇d:/5dname/pictrue/address.gif，或者從站點(diǎn)面板的圖像文件夾中將該圖像直接拖到單元格中。13、選中上一步中插入的圖片，在地圖屬性面板中選擇“矩形熱點(diǎn)工具”，在圖片上要建超鏈接的區(qū)域繪制矩形，

16、共繪制7個(gè)矩形，選中矩形，在熱點(diǎn)面板中“鏈接”文本框中輸入或通過瀏覽按鈕設(shè)置超鏈接地址，或通過“指向文件”按鈕向站點(diǎn)面板拖動(dòng)并指向你所要鏈接的網(wǎng)頁文件。（二）制作第2幅圖片1、切換到fireworks，新建一個(gè)寬為778、高為50像素、背景色為白色的文件。2、在狀態(tài)欄上將視圖縮放比率設(shè)為100%，（或點(diǎn)擊菜單命令“視圖/縮放比率”，再或用快捷鍵ctrl+8）。3、用工具欄上的矩形工具，畫一個(gè)寬778、高為47像素的矩形、x為0、y為0（在屬性面板上修改），邊框顏色設(shè)為沒有（一根紅色的斜線），點(diǎn)擊填充選項(xiàng)設(shè)置為線型漸變，漸變色為#88ee66#ffffff，選中矩形會(huì)顯示出填充調(diào)節(jié)柄，調(diào)整調(diào)節(jié)柄

17、，使矩形的填充漸變色變成從下到上漸變填充，調(diào)節(jié)柄的黑色圓在上端，黑色方在上端。4、選中矩形，調(diào)整屬性面板上的效果選項(xiàng)，執(zhí)行其中“陰影與暈光”中的“投影”，顏色為黑色、距離為3、不透明度為65%、柔化3，角度為265。5、點(diǎn)擊工具欄中文字工具輸入文字“”，字號(hào)12，字體宋體、顏色黑色，放在綠色漸變矩形的左下角位置，調(diào)整屬性面板上的效果選項(xiàng)，執(zhí)行其中“陰影與暈光”中的“投影”，顏色為白色、距離為1、不透明度為65%、柔化0，角度為315，再執(zhí)行其中“陰影與暈光”中的“發(fā)光”，顏色為白色、寬度為1、不透明度為85%、柔化0，位移為0。6、點(diǎn)擊工具欄中文字工具輸入文字“你的位置：首頁”，字號(hào)12，字體

18、宋體、顏色黑色，放在綠色漸變矩形的右下角位置，選擇“填充選項(xiàng)”中的邊緣設(shè)置為“實(shí)邊”，調(diào)整屬性面板上的效果選項(xiàng)，執(zhí)行其中“陰影與暈光”中的“投影”，顏色為白色、距離為1、不透明度為65%、柔化0，角度為315，再執(zhí)行其中“陰影與暈光”中的“發(fā)光”，顏色為白色、寬度為1、不透明度為85%、柔化0，位移為0。7、最后點(diǎn)擊菜單命令“文件/導(dǎo)出”，選擇導(dǎo)出地址為你站點(diǎn)文件夾下的圖片文件夾，如：本例“d:/5dname/pictrue”，文件名如：top01.gif（注意擴(kuò)展名為gif）。8、切換到dreamweaver，將鼠標(biāo)定位在第2行的單元格中，點(diǎn)擊菜單命令“插入/圖像”，選擇d:/5dname/

19、pictrue/top01.gif，或者從站點(diǎn)面板的圖像文件夾中將該圖像直接拖到單元格中。步驟五：編輯網(wǎng)頁中間主體內(nèi)容部分1、在第二個(gè)表格之后插入第三個(gè)表格，2行5列，在“插入表格”對(duì)話框中設(shè)置“寬”為778像素，“填充”、“間距”、“邊框”值都設(shè)為0，將“屬性”窗口中表格屬性的“高”設(shè)置為700像素、“對(duì)齊”設(shè)置為水平居中，背景顏色設(shè)置為白色。2、分別將各個(gè)單元格的“屬性”窗口中單元格屬性的“垂直”對(duì)齊方式設(shè)為“頂端”對(duì)齊。將第一行的高度設(shè)為600像素，第二行的高度設(shè)為100像素；將第1列的兩個(gè)單元格進(jìn)行上下合并；再將第2列的兩個(gè)單元格進(jìn)行上下合并；再將第2行的第3、4、5單元格橫向合并；將

20、第1行各單元格從左到右寬度分別設(shè)為226像素、1像素、356像素、1像素、194像素；將第2行左邊單元格設(shè)為226像素，右邊3個(gè)合成1個(gè)的單元格寬度設(shè)置為551像素。再將第1列2個(gè)單元格的背景顏色設(shè)置為#e7e7e7。3、切換到fireworks ，新建一個(gè)寬為1、高為5像素、背景色為白色的文件；在狀態(tài)欄上將視圖縮放比率設(shè)為800%；用直線工具畫一根直線，顏色為黑色，粗細(xì)為1，線條類型為“鉛筆/1像素”，寬（粗細(xì)）為1px、高為5px、x為0、y為0（在屬性面板上修改）；點(diǎn)擊菜單命令“文件/導(dǎo)出”，選擇導(dǎo)出地址為你站點(diǎn)文件夾下的圖片文件夾，文件名body01.gif。4、切換到dreamwea

21、ver mx，將鼠標(biāo)定位到第2列（寬度為1px高度為700px，上下單元格合并了的）的單元格中，插入上步制作的圖片body01.gif，在屬性面板中將該圖片的高度設(shè)置為700px，寬度為1px不變。5、切換到fireworks ，新建一個(gè)寬為1、高為600像素、背景色為白色的文件；在狀態(tài)欄上將視圖縮放比率設(shè)為200%；用直線工具畫一根直線，顏色為黑色，粗細(xì)為1，線條類型為“鉛筆/彩色鉛筆”，寬（粗細(xì)）為1px、高為600px、x為0、y為0（在屬性面板上修改）；單擊“筆觸選項(xiàng)”，再單擊其上的“高級(jí)”按鈕，彈出“編輯筆觸”對(duì)話框，在其“選項(xiàng)”選項(xiàng)卡中將“間距”設(shè)為300%；在“形狀”選項(xiàng)卡中取消

22、正方形復(fù)選框即顯示圓形，大小為1邊緣1方向100角度270，點(diǎn)擊“確定”按鈕；點(diǎn)擊菜單命令“文件/導(dǎo)出”，選擇導(dǎo)出地址為你站點(diǎn)文件夾下的圖片文件夾，文件名body04.gif。6、切換到dreamweaver ，將鼠標(biāo)定位到第1行第4列（寬度為1px高度為600px）的單元格中，插入上步制作的圖片body04.gif，圖片高度和寬度的設(shè)置不變（1px*600px）。7、切換到fireworks ，新建一個(gè)寬為551、高為20像素、背景色為白色的文件；在狀態(tài)欄上將視圖縮放比率設(shè)為100%；用直線工具畫一根直線，顏色為黑色，粗細(xì)為1，線條類型為“鉛筆/1像素”，寬為551px、高（粗細(xì)）為1px、

23、x為0、y為19（在屬性面板上修改）；用矩形工具，畫一個(gè)寬551、高為15像素的矩形、x為0、y為15，邊框顏色設(shè)為沒有（一根紅色的斜線），填充色為#e7e7e7；點(diǎn)擊工具欄中文字工具輸入文字“成功案例”，字號(hào)18，字體方正姚體、顏色#006600，位置：x為44、y為-3，選擇“填充選項(xiàng)”中的邊緣設(shè)置為“實(shí)邊”，調(diào)整屬性面板上的效果選項(xiàng)，執(zhí)行其中“陰影與暈光”中的“投影”，顏色為白色、距離為1、不透明度為65%、柔化1，角度為315，再執(zhí)行其中“陰影與暈光”中的“發(fā)光”，顏色為白色、寬度為1、不透明度為85%、柔化0，位移為0；點(diǎn)擊菜單命令“文件/導(dǎo)出”，選擇導(dǎo)出地址為你站點(diǎn)文件夾下的圖片文

24、件夾，文件名body033.gif。8、切換到dreamweaver ，將鼠標(biāo)定位到第2行中3列合并了的單元格（寬度為551px）中，插入上步制作的圖片body033.gif。9、下面的操作將在單元格：第1行第1列（寬226高700）、第1行第3列（寬356高600）、第1行第5列（寬194高600）中插入表格，即表格的嵌套來對(duì)頁面進(jìn)行布局。（一）制作第1行第1列（寬226高700）上的表格1、插入如上圖所示的兩個(gè)表格，修改單元格高度屬性，再制作圖片，插入對(duì)應(yīng)的單元格，輸入文字。2、點(diǎn)擊菜單命令“文本/css樣式/新建css樣式”，在“類型”單選項(xiàng)中選擇“重定義html標(biāo)簽”，在“定義在”單選

25、項(xiàng)中選擇“公對(duì)該文檔”，在“標(biāo)簽”下拉列表中選擇“td”，單擊“確定”，在“分類”中選擇“類型”，“大小”中選擇“12px”。所有“td”標(biāo)簽所標(biāo)記的文字就都是這個(gè)樣式了。3、點(diǎn)擊菜單命令“文本/css樣式/編輯樣式表”，再單擊“新建”按鈕，在“類型”單選項(xiàng)中選擇“使用css選擇器”，在“定義在”單選項(xiàng)中選擇“公對(duì)該文檔”，在“選擇器”下拉列表中選擇“a:link”，單擊“確定”，在“分類”中選擇“類型”，“顏色”中輸入“#336699”，“修飾”中只選擇“下劃線”；同樣方法選擇a:visited、a:active設(shè)置顏色#336699并加下劃線，a:hover設(shè)置顏色#ff6600并在“修飾

26、”中只選擇“無”。所有“a”標(biāo)簽所標(biāo)記的文字都是上面定義的樣式了。（二）制作第1行第3列（寬356高600）上的表格1、按上圖所示插入表格，修改單元格寬度和高度屬性，在第二個(gè)表格的的第二行再插入一個(gè)寬340高300像素的表格，注意單元格間距的用法。2、在對(duì)應(yīng)的單元格中插入圖片、表單對(duì)象，輸入文字，文字為上（一）步定義的css樣式，注意插入表單對(duì)象時(shí)“是否添加表單標(biāo)簽？”即時(shí)否插入<form></form>。3、在嵌套表格的寬240高54的5個(gè)單元格中加入特效，鼠標(biāo)放在單元格上背景會(huì)變色，鼠標(biāo)離開顏色恢復(fù)，先將這5個(gè)單元格的“背景顏色”改為#ffeebb，再在<td

27、>標(biāo)記中加入以下代碼：onmouseover="this.style.backgroundcolor='#ddffcc'" onmouseout="this.style.backgroundcolor='#ffeebb'"（三）制作第1行第5列（寬194高600）上的表格1、如上圖所示，插入5個(gè)表格，修改單元格的寬度和高度，再制作圖片，插入對(duì)應(yīng)的單元格，輸入文字，文字為上（一）步定義的css樣式，插入表單對(duì)象，注意插入表單對(duì)象時(shí)“是否添加表單標(biāo)簽？”即時(shí)否插入<form></form>，再修改

28、文本域的“字符寬度”為12。2、用fireworks或其他圖形處理軟件制作一個(gè)寬194像素高110像素的圓角矩形圖片。3、選中第一個(gè)寬194像素高110像素的表格，將“背景圖像”設(shè)置為上一步所制作的圖片。步驟六：制作網(wǎng)頁下面信息說明部分的基本元素1、再最后插入一個(gè)2行1列的表格，在“插入表格”對(duì)話框中設(shè)置“寬”為778像素，“填充”、“間距”、“邊框”值都設(shè)為0，將“屬性”窗口中表格屬性的“高”設(shè)置為55像素、“對(duì)齊”設(shè)置為水平居中，背景顏色設(shè)置為白色。2、將鼠標(biāo)定位在表格的上邊一行單元格中，將“屬性”窗口中單元格屬性的“高”設(shè)為25像素，下邊一行單元格的寬設(shè)為30像素。分別將三個(gè)單元格的“屬

29、性”窗口中單元格屬性的“水平”對(duì)齊方式設(shè)為“水平居中”。3、切換到fireworks ，新建一個(gè)寬為778、高為25像素、背景色為白色的文件；在狀態(tài)欄上將視圖縮放比率設(shè)為100%；用矩形工具，畫一個(gè)寬780、高為24像素的矩形、x為-1、y為1（在屬性面板上修改），將矩形的填充顏色設(shè)為#aaff66，邊框顏色設(shè)為黑色，粗細(xì)為1，線條類型為“鉛筆/1像素”；最后點(diǎn)擊菜單命令“文件/導(dǎo)出”，選擇導(dǎo)出地址為你站點(diǎn)文件夾下的圖片文件夾，如：本例“d:/5dname/pictrue”，文件名如：bottom.gif（注意擴(kuò)展名為gif）。4、切換到dreamweaver ，將鼠標(biāo)定位在第1行的單元格中，將單元格的背景顏色設(shè)置為#aaff66，將背景圖片設(shè)置為pictrue/bottom.gif。5、在第1行的單元格中輸入文字