《靜態(tài)網(wǎng)頁綜》PPT課件.ppt

1、第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,1,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,2,本章綜合應(yīng)用前面各章所介紹的網(wǎng)頁設(shè)計技術(shù)設(shè)計三個應(yīng)用實例：顯示隱藏層頁面、公告板的制作以及一個綜合靜態(tài)主頁。其中包含了布局表格、文本和各種媒體元素的添加、CSS樣式表的使用、層與時間軸、行為等各種網(wǎng)頁設(shè)計技術(shù)，讀者可以由此體會靜態(tài)網(wǎng)頁的設(shè)計流程以及各種技術(shù)在實際網(wǎng)頁設(shè)計過程中的使用方法,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,3,14.1 制作顯示隱藏層頁面,與顯示隱藏層相關(guān)的實例有很多，本節(jié)介紹兩個：利用層、時間軸以及行為技術(shù)制作幻燈片頁面；利用圖像熱點(diǎn)結(jié)合顯示隱藏層行為制作識別顯示頁面。 14.

2、1.1 制作幻燈片 使用Dreamweaver可以制作出幻燈片效果，即多張圖片在同一位置以固定速度切換顯示，循環(huán)播放。其效果雖沒有在FLASH等軟件中制作的出色，但優(yōu)勢也很明顯：制作簡單，瀏覽速度快，無需插件支持。本節(jié)例子的效果是：在瀏覽器中的圖片每隔2秒種切換成另外一張，3張花瓣圖片循環(huán)播放。圖14.1是其中的一個幻燈片頁面,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,4,14.1 制作顯示隱藏層頁面,實現(xiàn)上述效果的步驟如下： 準(zhǔn)備3張大小相同的花瓣圖片，或者在設(shè)計過程中把圖片的大小調(diào)整為相同。 在文檔窗口創(chuàng)建一個層，在層中插入第一張花瓣圖片。 仿照步驟再創(chuàng)建2個層，分別插入其他2張花瓣圖片。 把文檔中

3、的3個層的坐標(biāo)設(shè)置為相同。先定位一個層，然后在其它兩個層的屬性面板中，將其“左”和“上”的值設(shè)置為和第一個層相同,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,5,14.1 制作顯示隱藏層頁面,選擇主菜單【窗口】|【時間軸】，打開時間軸面板，把3個層分別拖入到時間軸不同的動畫通道，放置時第二個層和第一個層、第三個層和第二個層首尾相接，如圖14.2所示。 由于每個層中的圖片要設(shè)計顯示2秒種，可把時間軸中FPS的值設(shè)定為8，把每個動畫欄的長度設(shè)定為16幀。如圖14.2所示。 選擇主菜單【窗口】|【行為】，打開行為面板,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,6,14.1 制作顯示隱藏層頁面,選中時間軸行為通道上第一幀，

4、點(diǎn)擊行為面板(添加行為)為第一幀的行為通道添加如圖14.3所示的顯示隱藏層動作：在第一幀時使layer1顯示，其余兩個層隱藏。 仿照步驟依次在時間軸行為通道的第16幀添加行為：顯示layer2，隱藏其余2層；在行為通道的第31幀添加行為：顯示layer3，隱藏其余2層。 選中時間軸面板上“自動播放”和“循環(huán)”兩項，按下F12，在瀏覽器中預(yù)覽效果,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,7,14.1 制作顯示隱藏層頁面,14.1.2 制作識別顯示頁面 識別顯示頁面效果如圖14.4所示。當(dāng)鼠標(biāo)移動到圖片中不同字樣上時，顯示相應(yīng)的圖片，鼠標(biāo)移開字樣范圍時，所有圖片隱藏。實現(xiàn)步驟如下： 在頁面中插入一張設(shè)計好

5、的帶有“獅子、老虎、大象”字樣的圖片。 選中圖片，在其屬性面板中，選擇熱點(diǎn)創(chuàng)建工具中的圓形工具。分別在圖片中相應(yīng)字樣的圓形區(qū)域，創(chuàng)建3個圓形熱點(diǎn)，熱點(diǎn)大小覆蓋其圓形區(qū)域。如圖14.5所示,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,8,14.1 制作顯示隱藏層頁面,在頁面中創(chuàng)建一個層，在層中插入獅子圖片。 仿照步驟再創(chuàng)建2個層，分別插入老虎和大象的圖片。 設(shè)置3個層的大小相同，層中圖片大小也調(diào)整為相同。 把3個層的位置分別移動到相應(yīng)熱點(diǎn)區(qū)域下方。設(shè)置3個層間距大致相同，水平對齊(可在它們的屬性面板中把“上”坐標(biāo)的值設(shè)置相同)。設(shè)置完成后3個層在文檔窗口中大小和位置如圖14.6所示,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)

6、用實例,9,14.1 制作顯示隱藏層頁面,為方便記憶，分別將獅子、老虎和大象圖片所在的層命名為：lion、tiger、elephant。 選中獅子字樣上的熱點(diǎn)區(qū)域，打開行為面板，點(diǎn)擊(添加行為)，為該熱點(diǎn)添加“顯示隱藏層”行為，在行為面板中設(shè)置3個層的顯示隱藏關(guān)系為：lion層顯示，其余2層隱藏。如圖14.7所示。 仿照步驟，分別給另外兩個熱點(diǎn)區(qū)域添加行為，老虎字樣熱點(diǎn)顯示tiger層，隱藏其余2層；大象字樣熱點(diǎn)顯示elephant層，隱藏其余2層,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,10,14.1 制作顯示隱藏層頁面,觸發(fā)該動作的事件設(shè)定為onMouseOver。 11 由于要求當(dāng)鼠標(biāo)移開時，隱

7、藏所有圖層，則需要再給每一個熱點(diǎn)區(qū)域添加一個隱藏所有層的行為，觸發(fā)的事件是onMouseOut。設(shè)置后選中任意一個熱點(diǎn)，行為面板顯示為如圖14.8所示。 12 頁面載入時，所有3個層都是不可見的，故在層面板中設(shè)置初始狀態(tài)所有層的顯示屬性為“隱藏”。如圖14.9所示。 13 按下F12鍵，在瀏覽器中觀察效果,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,11,14.2 制作站點(diǎn)公告板,14.2.1 自動公告板 自動公告板是能夠在頁面中自動滾動發(fā)布信息的元素，在第十章時間軸中，曾介紹過自動公告板的制作方法，對于自動公告板，在頁面載入時會自動播放時間軸。但是移動可能影響瀏 覽者閱讀公告內(nèi)容。因此需要通過設(shè)置，在瀏

8、覽者要閱讀公告內(nèi)容時，讓滾動文字停止，閱讀完成后繼續(xù)滾動播放。故還應(yīng)對第10章中的例子做相應(yīng)的補(bǔ)充。操作步驟如下,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,12,14.2 制作站點(diǎn)公告板,在第十章中例子的基礎(chǔ)上，選中子層layer2。 打開行為面板，為子層layer2添加行為：當(dāng)onMouseOver事件觸發(fā)時，停止時間軸；當(dāng)onMouseOut事件觸發(fā)時，播放時間軸。添加后選中l(wèi)ayer2，行為面板如圖14.10所示。 按下F12在瀏覽器中預(yù)覽。當(dāng)鼠標(biāo)放到運(yùn)動文字上時，時間軸停止，鼠標(biāo)移開文字繼續(xù)運(yùn)動,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,13,14.2 制作站點(diǎn)公告板,14.2.2 手動公告板 在自動公告

9、板的基礎(chǔ)上，還可以制作出功能較強(qiáng)的手動公告板。手動公告板的特點(diǎn)是：用戶可以通過交互控制公告文字的移動方向。如圖14.11所示。當(dāng)鼠標(biāo)放到圖中男孩頭像上時，公告文字自下向上垂直運(yùn)動；當(dāng)鼠標(biāo)放到圖中女孩頭像上時，公告文字自上向下垂直運(yùn)動；當(dāng)鼠標(biāo)移出頭像范圍時，公告文字停止運(yùn)動,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,14,14.2 制作站點(diǎn)公告板,實現(xiàn)手動公告板的步驟如下： 在頁面中插入一個兩行一列的表格進(jìn)行定位。表格的第一行輸入文字“本站公告”，在文字兩側(cè)分別插入準(zhǔn)備好的男孩和女孩頭像圖片。 在表格的第二行插入一個層，用鼠標(biāo)或鍵盤把層的水平中心定位到和第一行對應(yīng)的位置。設(shè)置適當(dāng)?shù)膶颖尘吧?把鼠標(biāo)定位到

10、現(xiàn)有層的內(nèi)部，使用插入層的方法插入一個新層。使新層成為現(xiàn)有層的子層。調(diào)整子層的位置大小，使子層位于父層的中心對稱位置，略小于父層。 在子層中添加要顯示在公告板中的文字。將其拖動到時間軸當(dāng)中,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,15,14.2 制作站點(diǎn)公告板,選中該動畫欄中的第一個關(guān)鍵幀，將層移動到父層的下方(子層頂部和父層底部重合)，再選中其最后一個關(guān)鍵幀，把層移動到父層的上方(子層的底部和父層的頂部重合)，移動時可使用鍵盤上“”“”方向鍵，以保證創(chuàng)建的移動路徑垂直。 時間軸面板中顯示當(dāng)前時間軸為“Timeline1”，該條時間軸控制的自下向上的垂直運(yùn)動，若使上述子層還可以自上向下運(yùn)動，則要再添加

11、一條時間軸。可在原有時間軸的通道區(qū)任意位置點(diǎn)擊右鍵，在彈出的快捷菜單中選擇【添加時間軸】命令，添加一個新的時間軸編輯面板區(qū)“Timeline2”，如圖14.12所示,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,16,14.2 制作站點(diǎn)公告板,把子層拖入到時間軸“Timeline2”當(dāng)中，仿照步驟的方法創(chuàng)建自上向下的運(yùn)動。只需要把第一個關(guān)鍵幀上子層的位置和最后一個關(guān)鍵幀互換即可。頁面中的兩條時間軸：Timeline1用來控制子層自下向上運(yùn)動，Timeline2控制子層自上向下運(yùn)動。 打開行為面板，選擇男孩頭像圖片，添加以下行為：onMouseOver時觸發(fā)動作播放時間軸Timeline1；onMouseOv

12、er時觸發(fā)動作停止時間軸Timeline2；onMouseOut時觸發(fā)動作停止時間軸Timeline1。即當(dāng)鼠標(biāo)移到男孩頭像圖片上時，播放向上運(yùn)動的時間軸，同時停止向下運(yùn)動的時間軸。當(dāng)鼠標(biāo)移出圖片范圍時，停止向上運(yùn)動的時間軸,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,17,14.2 制作站點(diǎn)公告板,選擇女孩頭像圖片，為該圖片添加以下行為：onMouseOver時觸發(fā)動作播放時間軸Timeline2；onMouseOver時觸發(fā)動作停止時間軸Timeline1；onMouseOut時觸發(fā)動作停止時間軸Timeline2。即當(dāng)鼠標(biāo)放到女孩頭像圖片上時，播放向下運(yùn)動的時間軸，同時停止向上運(yùn)動的時間軸。當(dāng)鼠標(biāo)移

13、出圖片范圍時，停止向下運(yùn)動的時間軸。設(shè)置完成后男孩和女孩圖片上各有3個行為。如圖14.13所示,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,18,14.2 制作站點(diǎn)公告板,通過降低FPS的值和增加時間軸中動畫欄長度的方法，減慢兩條時間軸播放的速度。例如，設(shè)置FPS的值為8，動畫欄的長度設(shè)置為55幀。 11 選中兩條時間軸上的“循環(huán)”按鈕，使動畫可以循環(huán)播放。 12 按下F12鍵在瀏覽器中預(yù)覽頁面,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,19,14.3 制作靜態(tài)主頁,主頁是一個網(wǎng)站的核心，主頁設(shè)計的優(yōu)劣關(guān)系到網(wǎng)站能否吸引瀏覽者目光。主頁中包含了網(wǎng)站的主要內(nèi)容介紹和指向各個子頁面的鏈接。在主頁設(shè)計完成后，可以將其頁面

14、風(fēng)格固定的部分轉(zhuǎn)換成模板，從而可以基于模板創(chuàng)建其他風(fēng)格相同的子頁面，所以主頁的設(shè)計和制作在整個網(wǎng)站的設(shè)計中占據(jù)著重要地位。示例主頁如圖14.14所示。從上到下依次可分為：頂部圖片、導(dǎo)航菜單、主體頁面和版權(quán)聲明4個部分,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,20,14.3 制作靜態(tài)主頁,14.3.1 使用布局視圖規(guī)劃頁面 在制作頁面之前，使用布局視圖對頁面進(jìn)行規(guī)劃是十分必要的。對于收集和制作好的素材，將來如何分配，在布局規(guī)劃的時候要做好準(zhǔn)備。使用布局視圖規(guī)劃頁面的步驟如下： 打開【插入】面板的【布局】項，單擊【布局】按鈕，切換到布局視圖，插入面板中(繪制布局表格)按鈕和(繪制布局單元格)按鈕為可用狀態(tài)

15、。如圖14.15所示,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,21,14.3 制作靜態(tài)主頁,使用(繪制布局表格)按鈕，在文檔區(qū)中繪制布局：首先繪制一個容納所有頁面內(nèi)容的布局表格，然后從上到下依次繪制頂部圖片區(qū)域、導(dǎo)航菜單區(qū)域、主區(qū)域和版權(quán)聲明區(qū)域。 由于在頂部圖片區(qū)域中需要插入的5張圖片(如圖14.14所示)：左側(cè)2張較大圖片和右側(cè)3張較小圖片行數(shù)不同，故先用(繪制布局表格)按鈕在頂部圖片區(qū)域繪制兩個布局表格。 在主區(qū)域中用(繪制布局表格)按鈕繪制出左、中、右3個布局表格。布局完成后，如圖14.16所示,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,22,14.3 制作靜態(tài)主頁,14.3.2 添加頂部圖片 添加頂部

16、圖片的步驟如下： 在頁面布局視圖狀態(tài)下，使用(繪制布局單元格)按鈕為頂部的5張圖片分別創(chuàng)建如圖14.17所示的布局單元格。左側(cè)布局表格中創(chuàng)建左右兩個單元格，右側(cè)布局表格中創(chuàng)建上、中、下三個單元格。 在布局單元格中，選擇主菜單【插入】|【圖像】，分別插入素材圖片。 調(diào)整圖片的大小，使整個頂部圖片區(qū)域高度一致，圖片之間無縫隙。圖14.14中左側(cè)兩圖片高度為66px，右側(cè)每個小圖片高度為22px,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,23,14.3 制作靜態(tài)主頁,14.3.3 設(shè)計導(dǎo)航菜單 導(dǎo)航菜單采用的是單線表格的形式，第一個單元格中放置顯示當(dāng)前日期的JavaScript腳本代碼，其余每個單元格中放置一

17、個站點(diǎn)欄目文字。表格中的文字用CSS樣式表定義字體、大小、顏色以及對齊方式等屬性。制作導(dǎo)航菜單的步驟如下： 切換到標(biāo)準(zhǔn)視圖，把鼠標(biāo)定位在用做導(dǎo)航菜單的表格當(dāng)中。然后點(diǎn)擊屬性面板中“拆分單元格”按鈕，在拆分單元格對話框中把該單元格拆分成9列,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,24,14.3 制作靜態(tài)主頁,根據(jù)頁面的寬度設(shè)置各個單元格的大小，由于第一列單元格中需要放置文字較多的“當(dāng)前日期時間”，故選中該單元格后，在其屬性面板中設(shè)置列寬為較大值(圖14.14中列寬為240px)，其余各列寬度可設(shè)置為相同值(圖14.14中列寬為60px)。 把鼠標(biāo)定位在導(dǎo)航表格第一列中，選擇主菜單【插入】|【HTML】

18、|【腳本對象】|【腳本】，在彈出的插入腳本對話框中輸入顯示當(dāng)前日期時間的腳本內(nèi)容。點(diǎn)擊“確定”插入腳本,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,25,14.3 制作靜態(tài)主頁,在其余列中分別輸入導(dǎo)航菜單中設(shè)計的各個欄目名稱：如網(wǎng)頁特效、作品展示等等。對于表格中內(nèi)容的樣式，可使用第8章中介紹的重定義HTML標(biāo)簽的方法，對單元格標(biāo)記定義CSS樣式。例如，圖14.18中標(biāo)記中的樣式定義為：字體：宋體；字體大小：12px；字體顏色：red；對齊方式：水平居中、垂直中線對齊。 選中整個導(dǎo)航菜單所在的表格，設(shè)置背景色為紅色，間距值為1；再分別選中其9個單元格，在單元格屬性面板中為每個單元格添加比表格背景略淺的紅色背

19、景圖片(或背景顏色,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,26,14.3 制作靜態(tài)主頁,14.3.4 設(shè)計主體頁面 主頁中的主要內(nèi)容在主體頁面中顯示，圖14.14中的主頁為典型的三分欄結(jié)構(gòu)：左側(cè)部分、右側(cè)部分和中央部分。 1左側(cè)部分 左側(cè)部分分為3個欄目，分別是“極限論壇”、“圖片鏈接”和“文字鏈接”。設(shè)計的過程中以“極限論壇”為例，其余兩個欄目的設(shè)計可仿照進(jìn)行。設(shè)計和制作“極限論壇”欄目的步驟如下,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,27,14.3 制作靜態(tài)主頁,切換到布局視圖，在左側(cè)區(qū)域的布局表格中，用繪制布局單元格工具分別繪制欄目標(biāo)題單元格和內(nèi)容單元格。標(biāo)題單元格和標(biāo)題圖片素材“極限論壇”等高。

20、切換到標(biāo)準(zhǔn)視圖，選中標(biāo)題單元格，為其添加帶有“極限論壇”字樣的背景圖片，調(diào)整單元格大小使圖片中的文字位于單元格中央。如圖14.19所示。 在欄目內(nèi)容單元格中，分別插入以下表單項目：用戶名稱和相應(yīng)的文本字段、用戶密碼和相應(yīng)的密碼文本域，兩個復(fù)選按鈕“記住密碼”和“隱身登陸”，最后放置兩個圖像域“登陸”和“注冊”。在換行時用Shift+回車以節(jié)省空間。(注意：欄目中只是按照表單的形式進(jìn)行顯示，具體表單提交后數(shù)據(jù)的處理參見第17章,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,28,14.3 制作靜態(tài)主頁,為該欄目內(nèi)容單元格設(shè)置背景色，由于整個主頁以紅色為主，可以新建一個“類”類型的CSS樣式，在樣式中定義背景屬

21、性為pink(粉紅色)。為要添加背景色的單元格設(shè)置為該CSS樣式類。 2右側(cè)部分 右側(cè)部分分為3個欄目：“公告板”、“本站調(diào)查”和“本站成員”。操作步驟如下： 切換到布局視圖，在右側(cè)區(qū)域的布局表格中，用繪制布局單元格工具分別繪制欄目標(biāo)題單元格和內(nèi)容單元格。標(biāo)題單元格要和標(biāo)題圖片素材“公告板”等高,第14章 靜態(tài)網(wǎng)頁綜合應(yīng)用實例,29,14.3 制作靜態(tài)主頁,切換到標(biāo)準(zhǔn)視圖，選中標(biāo)題單元格，為其添加帶有“公告板”字樣的背景圖片，調(diào)整單元格的大小使圖片中的文字位于單元格中央。如圖14.20所示。 仿照步驟和分別設(shè)計“本站調(diào)查”和“本站成員”兩欄目的版面。 在“公告板”欄目的內(nèi)容區(qū)域，添加本章14.2.1中介紹的“自動公告板”。 在“本站調(diào)查”欄目中輸入：“你覺得本站還應(yīng)該改進(jìn)哪些內(nèi)容”字樣，然后分別創(chuàng)建3個單選按鈕，在其后分別輸入相應(yīng)的文字，再放置兩個表單按鈕即可。具體設(shè)置參考左側(cè)部分的“極限論壇”欄目。 為右側(cè)3個欄