第04章奧運吉祥物網站的靜態(tài)設計

第二篇靜態(tài)設計篇

第四章“北京奧運吉祥物-福娃”網站的靜態(tài)設計

本章簡介：本章將結合前面所學的知識，承接“北京奧運吉祥物-福娃”網站策劃書和“北京奧運吉祥物-福娃”站點的建立與配置，主要講述了使用AdobeDreamweaverCS3對“北京奧運吉祥物-福娃”網站靜態(tài)設計的步驟、方法和技巧。目錄4.1使用表格布局網站主頁4.2設計主頁4.3設計其他相關網頁4.4創(chuàng)建超鏈接4.5本章小結4.6習題4.1使用表格布局網站主頁

在編輯網頁前應該首先對網頁進行整體布局設置，合理的布局使網頁看起來美觀大方，并且便于網頁元素的插入與編輯。表格是進行網頁布局的強有力的工具，但是使用表格的標準模式進行布局不太方便，因為傳統(tǒng)意義上的表格是用來顯示表格數(shù)據(jù)的，而不是用于對Web頁面進行布局的。為了簡化使用表格進行頁面布局的過程，Dreamweaver為用戶提供了布局模式，在布局模式中，用戶可以使用表格作為基礎結構來設計網頁，避免了使用傳統(tǒng)的方法創(chuàng)建時經常出現(xiàn)的一些問題。網站主頁草圖網站頭部網站主體網站底部網站主頁效果圖4.1.1布局主頁頭部（1）新建空白網頁，并命名為index.html。（2）將“插入工具欄”切換到“布局”插入欄，選擇“查看”→“表格模式”→“布局模式”命令進入布局視圖。此時“布局”插入欄中的“布局表格”按鈕和“繪制布局單元格”按鈕被激活，如圖所示。這兩個按鈕被激活（3）單擊“布局表格”按鈕，鼠標光標變?yōu)椤?”形狀，將光標定位到編輯窗口左上角，然后按住鼠標左鍵不放拖動，到合適的位置后釋放鼠標。（4）單擊邊框線選中布局表格，在“屬性”面板中設置其寬度和高度分別為1260像素和181像素，如圖所示，此表格用來布局網站頭部信息。（5）單擊“布局單元格”按鈕，將鼠標光標定位于布局表格左上角，然后按住鼠標左鍵不放拖動，至布局表格合適的位置后釋放鼠標。（6）單擊新繪制布局單元格的邊框線將布局單元格選中，在屬性面板中設置其寬度和高度分別為154像素和130像素。使用相同的方法在第一個單元格的右側分別繪制952×130像素和154×130像素的兩個單元格，這三個單元格用來做網站的Logo區(qū)。（7）使用相同的方法，在第一行的下方繪制一個1260×37像素的布局單元格，用來做網站的導航區(qū)。（8）使用相同的方法，在第二行的下方再繪制一個1260×14像素的布局單元格，用來做網站頭部和網站主體的分割區(qū)。網站頭部的布局過程系列圖如圖所示。到此，網站的頭部布局繪制完成。導航區(qū)Logo區(qū)4.1.2布局主頁主體（1）在網站頭部表格的下方，繪制一個1260×809像素的布局表格用來放置網站的主體內容，如圖所示。（2）在主體布局表格中從左到右并列繪制三個大小分別為154×809像素、952×809像素和154×809像素的布局表格，將主體布局表格分為三部分，其中左右表格用來布局頁面，而中間的表格用來放置網站的相關信息，如圖所示。（3）在中間的布局表格中，從上到下依次繪制952×280像素、952×9像素、952×225像素、952×9像素和952×286像素的五個布局表格，如圖所示。（4）在952×280像素的布局表格中，從左到右依次繪制340×280像素、15×280像素、325×280像素、15×280像素的四個布局表格。然后在最右側從上到下依次繪制257×65像素、257×9像素和257×206像素的三個布局表格。（5）單擊“布局單元格”按鈕，在福娃動態(tài)布局表格內從上到下依次繪制325×38像素和325×242像素的兩個布局單元格。使用相同的方法在公告欄布局表格內從上到下依次繪制257×49像素和257×157像素的兩個布局單元格，如圖所示。（6）使用相同的方法，在952×225像素的布局表格內從左到右依次繪制680×225像素、15×225像素和257×225像素的三個布局表格。其中15×225像素的表格用來分隔信息區(qū)，其它表格用來放置福娃簡介和福娃揭秘，如圖所示。（7）單擊“布局單元格”按鈕，在福娃簡介布局表格內從上到下依次繪制680×31像素和680×194像素的兩個布局單元格；使用相同的方法在福娃揭秘布局表格內從上到下依次繪制257×42像素和257×183像素的兩個布局單元格，如圖所示。（8）使用相同的方法，在952×286像素的布局表格內，從左到右依次繪制341×286像素、15×286像素、324×286像素、15×286像素和257×286像素的五個布局表格。其中15×280像素的表格用來分割網站的各個信息區(qū)，其余表格分別用來放置精彩圖片、名人說福娃、投票調查，如圖所示。（9）單擊“布局單元格”按鈕，在精彩圖片布局表格內從上到下依次繪制341×33像素和341×253像素的兩個布局單元格。使用相同的方法在名人說福娃布局表格內從上到下依次繪制324×33像素和324×253像素的兩個布局單元格；在投票調查布局表格內從上到下依次繪制257×40像素和257×246像素的兩個布局單元格，完成網頁主體的布局，如圖所示。4.1.3布局主頁底部在網站主體的下方繪制一個1260×148像素的布局表格，接著單擊“布局單元格”按鈕，在此布局表格中，從左到右分別繪制154×148像素、952×148像素和154×148像素的三個布局單元格，最終完成網頁的整體布局，如圖所示。4.2.1設置網頁屬性1.設置網頁標題（1）方法一：打開FuWa目錄下的index.html文檔，在文檔工具欄的“標題”文本框中輸入“北京奧運吉祥物-福娃”作為網頁標題，如圖所示。4.2設計主頁（2）方法二：在菜單欄中選擇“修改”→“頁面屬性”命令，彈出“頁面屬性”對話框，在“分類”列表框中選擇“標題/編碼”選項，然后在右側的“標題”文本框輸入網頁的標題，如圖所示。2.設置網頁的其他屬性（1）外觀：在“分類”列表中選擇“外觀”選項，則右側信息主要用于設置網頁基本頁面布局，包括頁面字體、大小、文本顏色、背景顏色、背景圖像、左邊距、右邊距、上邊距和下邊距等。本實例中設置頁面字體為“宋體”、大小為“14像素”、左邊距為“0”像素、上邊距為“0”像素，其它屬性保持默認值不變，如圖所示。（2）鏈接：網頁中的鏈接就是以文字或圖像作為鏈接對象，然后指定一個要跳轉到的目標網頁地址，當瀏覽者單擊文字或其他對象時，瀏覽器就會自動跳轉到指定的目標網頁。在“分類”列表中選擇“鏈接”選項，則右側選項主要用于設置網頁中超鏈接的字體、字體大小、各種鏈接顏色、鏈接下劃線的樣式等。本實例中設置鏈接顏色、已訪問鏈接和活動鏈接顏色均為“#000000”，鏈接下劃線的樣式為“始終無下劃線”，其它屬性保持默認值不變，如圖所示。4.2.2設置表格屬性（1）單擊如圖所示的編輯窗口正上方“布局模式[退出]”中的“退出”超鏈接切換到“標準”視圖。（2）在表格邊框線上單擊選中“網站頭部”表格，此表格內包含網站頭部的所用表格和單元格，打開“屬性”面板，在“屬性”面板的“對齊”下拉列表中選擇“居中對齊”選項，如圖所示。（3）使用相同的方法將“網站主體”表格和“網站底部”表格也設置為居中對齊方式。

4.2.3插入文本和圖像（1）通過單擊鼠標將光標定位到第一行第一個單元格中，在“屬性”面板中單擊“背景”文本框后面的瀏覽按鈕，在打開的“選擇圖像源文件”對話框中選擇背景圖像logo_left.gif（所有的網頁素材都需要在前期收集、整理加工、整理好），如圖所示。（2）使用同樣的方法，分別在第一行第二個單元格和第一行第三個單元格中插入背景圖像logo_center.jpg和logo_right.gif，完成Logo區(qū)的設置，如圖所示。（3）選擇第二行，在“屬性”面板中設置背景顏色為“#333333”、字體為“宋體”、大小為“14px”、字體顏色為“#FFFFFF”、單元格水平對齊方式為“水平對齊”，垂直對齊方式為“居中”。（4）在第二行中依次輸入導航名稱“網站主頁”、“福娃簡介”、“福娃揭密”、“福娃動態(tài)”、“福娃運動造型”、“歷屆奧運會吉祥物”、“福娃感言”、“奧運官網”，各個導航名稱之間使用“|”分隔開，其屬性面板設置和效果如圖所示。（5）使用同樣的方法，在表格第三行中插入背景圖像daohangbg2.gif，此時完成網站頭部信息編輯。（6）將光標定位到福娃動態(tài)區(qū)的第一行單元格中，選擇“插入”→“圖像”命令，將圖像fwdt.gif插入到相應的單元格中。（7）將光標定位到網站banner區(qū)單元格中，選擇“插入”→“圖像”命令，將圖像banner.gif插入到相應的單元格中。（8）將光標定位到網站公告欄區(qū)的第一行單元格中，選擇“插入”→“圖像”命令，將圖像gonggaolan.gif插入到相應的單元格中。將光標定位到網站公告欄區(qū)的第二行單元格中，在“屬性”面板中其設置背景顏色為“#F0F0F0”，如圖所示。（9）使用相同的方法在福娃簡介區(qū)的第一行和第二行分別插入圖像fwjj.gif和圖像fwjjtp.jpg，完成福娃簡介區(qū)的布局。（10）使用相同的方法，分別完成福娃揭秘、精彩圖片、名人說福娃和投票調查區(qū)的編輯，如圖所示。（11）將光標定位到網頁底部的版權區(qū)中，設置背景圖像為banquan.gif，并且輸入網站相關的版權信息，調節(jié)其顯示位置和字體大小、顏色等，如圖所示。（12）至此，主頁的基本框架已設計完成，接下來在福娃動態(tài)、公告欄、福娃揭秘、投票調查、精彩圖片和名人說福娃區(qū)添加相應文字，并且進行必要的編輯即可，其效果如圖所示。4.2.4插入Flash動畫只有文本和圖像的網頁還是很單調，因為它缺乏動感。在網頁中加入Flash動畫、音樂等元素，可使網頁更具動感，讓網頁更加精彩。（1）將光標定位到主頁Logo區(qū)的第二個單元格中，在“屬性”面板中設置水平對齊方式為“右對齊”，選擇“插入”→“媒體”→“Flash”命令，在彈出的“選擇文件”對話框中，選擇fuwa.swf文件，如圖所示，單擊確定按鈕插入Flash動畫。（2）選中插入的fuwa.swf動畫，在如圖所示的“屬性”面板中設置Flash動畫的寬為250像素，高為130像素。（3）單擊參數(shù)按鈕，在彈出的“參數(shù)”對話框中，輸入?yún)?shù)名為“wmode”，參數(shù)值為“transparent”（即讓插入的Flash動畫透明），如圖所示，單擊確定按鈕返回。（4）根據(jù)預覽效果可進一步調整透明Flash動畫的大小及位置，完成插入透明Flash動畫的操作，其效果如圖所示。4.2.5插入JavaScript網頁特效代碼

JavaScript是目前網頁設計中最容易學又最方便的網頁描述語言，用戶可以利用JavaScript設計出各種生動活潑的網頁特效。目前，Internet中JavaScript網頁特效代碼非常豐富，用戶可以直接下載一些網頁特效代碼，添加在網頁中。本實例根據(jù)“北京奧運吉祥物-福娃”網站的設計要求，需要在圖片新聞區(qū)添加圖片幻燈片效果，其具體步驟如下：（1）在Internet中搜索下載“新聞圖片幻燈片特效代碼”相關文件，然后打開“新聞圖片幻燈片特效”文件夾，如圖所示，可以看到有一個xwhdp.html文件、一個js文件夾和一個images文件夾。（2）將js文件夾移動到站點根目錄下（FuWa\），將images中的所用文件移動到根目錄下的images文件夾下，使用Dreamweaver打開xwhdp.html文件，選擇代碼視圖，可以看到其代碼。（3）打開FuWa根目錄下的index.html文件，將光標定位在圖片新聞區(qū)單元格中，選擇“代碼視圖”，將xwhdp.html中的<body>…</body>之間的內容復制到光標所在的位置；將xwhdp.html中的<style>…</style>之間的內容復制到index.html文件中<style>…</style>之間。（4）打開images文件夾，將文件夾中的ad-01.jpg、ad-02.jpg、ad-03.jpg、ad-04.jpg、ad-05.jpg圖片替換為自己的圖片。（5）使用Dreamweaver打開js文件夾下的5adpics.js，選擇代碼視圖，可以看到其代碼。（6）可以根據(jù)代碼說明文檔更改相應的代碼，完成新聞圖片幻燈片特效的設置。插入JavaScript網頁特效代碼之后，就基本上完成了“北京奧運吉祥物-福娃”網站主頁的設計，其最終效果如圖所示。

設計完成網站主頁之后，設計者還需要繼續(xù)設計網站的其他頁面。由于網站的整體風格一致，因此其他頁面的設計只需要對主頁進行修改即可。4.3設計其他相關網頁4.3.1內容顯示頁面內容顯示頁面主要用來顯示主頁中一些標題或圖片（超鏈接）所對應的具體內容。包括福娃簡介、福娃揭秘等對應的鏈接頁面。（1）在“文件”面板中，選中網站主頁index.html文檔，單擊鼠標右鍵，選擇快捷菜單中的“編輯”→“復制”命令，在網站根目錄下復制了一個“拷貝于index.html”文檔，將其更名為“fwjj.html”

，如圖所示。

（2）打開福娃簡介fwjj.html文檔，對頁面主體部分內容進行修改，方法與制作網站主頁基本相同，最終效果如圖所示。4.3.3圖片顯示頁面圖片顯示頁面主要用來單獨或以縮略圖的形式顯示網站中的各種圖片。

本實例中主要包括福娃運動造型、歷屆奧運會吉祥物等頁面。用類似的方法設計圖片顯示頁面，其效果如圖所示。4.3.4留言板頁面留言板頁面主要用來實現(xiàn)對網站的留言功能，以達到和瀏覽者交互的作用。本實例中就是福娃感言所對應的頁面。用類似的方法設計留言板頁面，其效果如圖所示。

超鏈接在網站中占據(jù)了舉足輕重的位置，是網絡的靈魂。通過超鏈接可以從一個站點跳轉到另一個站點，可以從一個網頁跳轉到另一個網頁，此外，還可以鏈接到一個供下載的文件，鏈接到一個電子郵件。4.4創(chuàng)建超鏈接4.4.1超鏈接相關知識1.超鏈接的分類（1）內部超鏈接：指同一個站點內部網頁文檔之間的超鏈接。（2）外部超鏈接：指站點與站點之間網頁文檔之間的超鏈接。（3）錨點超鏈接：指在同一個頁面或不同頁面指定位置的超鏈接，這種超鏈接需要通過錨點來實現(xiàn)。（4）郵件超鏈接：指單擊鏈接后啟動E-mail郵件客戶端程序，允許用戶發(fā)送郵件到指定的電子郵箱。（5）下載超鏈接：指鏈接的目標端點不是瀏覽器能夠識別的文檔，而是如EXE文件、ZIP文件、RAR文件等，這種超鏈接主要用于向用戶提供下載服務。2.超鏈接的路徑在網站中每一個網頁文件都有一個獨立的地址，也就是通常所說的URL（統(tǒng)一資源定位器），因此在鏈接目標網頁之前，首先要清楚目標網頁文件的鏈接路徑，概括起來，文檔的鏈接路徑主要有絕對路徑、相對路徑和根目錄相對路徑三種形式。4.4.2超鏈接的創(chuàng)建1.內部超鏈接的創(chuàng)建打開“北京奧運吉祥物-福娃”網站的主頁index.html文件，在導航欄中選中“福娃簡介”四個字作為超鏈接載體。在“屬性”面板的“鏈接”文本框中輸入目標頁面文件的URL，或者單擊旁邊的“瀏覽文件”按鈕，彈出“選擇文件”對話框，選擇對應的頁面文件（fwjj.html）作為超鏈接的目標文件，如圖所示。2.熱點超鏈接的創(chuàng)建（對圖像熱點創(chuàng)建超鏈接時）（1）選擇福娃簡介（fwjj.gif）圖像，在“屬性”面板中選擇相應的“熱點工具”，從左到右依次是矩形熱點工具、圓形熱點工具和多邊形熱點工具，如圖所示。（2）使用“矩形熱點工具”在福娃簡介圖像中的貝貝區(qū)域用鼠標拖動劃出一個熱點，如圖所示，之后在“屬性”面板中使用相同的方法創(chuàng)建超鏈接，使其鏈接到對應的網頁文件。3.外部超鏈接的創(chuàng)建（1）在導航欄中選中“奧運官網”四個字，然后在“屬性”面板中的“鏈接”文本框中輸入北京奧運會官方網站的網址/，如圖所示。（2）根據(jù)實際需要，可以在“屬性”面板中的“目標”選項中設置鏈接頁面在瀏覽器中的打開方式，共有四個選項（_blank，_parent，_self，_top）。（3）保存全部網頁，然后按F12鍵預覽網頁，當單擊“奧運官網”時，網頁就會跳至北京奧運會官方網站的主頁上。4.錨點超鏈接的創(chuàng)建當一個網頁的主題或文字較多而無法一屏顯示時，可以在網頁內建立多個標記點，將超鏈接指定到這些標記點上，從而實現(xiàn)頁內鏈接和快速定位顯示，最終使瀏覽者快速找到要閱讀的內容，