網頁設計與制作第10章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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