高阶网页制作

Staff IT Training (UIT) Advanced Webpage Design高階網頁製作事前準備 先將uit_dww資料夾抄到電腦中。1. 網頁框架(Frames)開啟Drewamweaver 4，在左方的tool bar中按向下小三角箭嘴，選Frames。Tool bar會換成Frames的tools。選Top and Nested Left Frame。在主畫面會出現頁框。此時選Windows Frames開啟Frames Panel協助工作。選File Save Frameset先將此網頁儲存，檔案名稱為index.htm，放在uit_dww資料夾中。利用Frames Panel幫助，選取上方的Frame。利用frame properties panel，修改Frame Name為head，Scroll為No，剔取No Resize，Border為No。按Src右方的folder圖樣，選取uit_dww資料夾中的title.htm。選取左方的Frame。利用frame properties panel，修改Frame Name為navigate，Scroll為Auto，剔取No Resize，Border為No。按Src右方的folder圖樣，選取uit_dww資料夾中的navigate.htm。選取右方的Frame。利用frame properties panel，修改Frame Name為main，Scroll為Default，不剔取No Resize，Border為No。按Src右方的folder圖樣，選取uit_dww資料夾中的content.htm。在Frames Panel內，選取Frames縮圖的最外圍，修改frameset properties 將Row的Value設為100。在Frames Panel內，選取Frames縮圖下方navigate與main兩個frames的外圍，修改frameset properties 將Column的Value設為140。回到主畫面，將左方的frame內的瀏覽選項逐一選取，並設定hyperlink。課程大網的src為content.htm，Target為main。框架網頁的src為frame.htm，Target為main。表單網頁的src為form.htm，Target為main。樣式表的src為css.htm，Target為main。影像地圖的src為image_map.htm，Target為main。完成後用File Save All Frames 及File Save Frameset儲存檔案。再開啟瀏覽器測試成果。2. 網頁表單在左方的tool bar中按向下小三角箭嘴，選Forms。在Forms的tools內按Insert Form鈕將游標移到代表Form的紅色虛之內，輸入如下圖的字樣。將游標移到“姓名”右方，按Insert Text Field按鈕。確保加入的text field已被選取，利用Properties Panel將text field的名稱轉為name，其它保留不變。將游標移到“我的意見”右方，按Insert Text Field按鈕。確保加入的text field已被選取，利用Properties Panel將text field的名稱轉為comment，CharWidth50，NumLines 5，Multiline。移到新加入的text field下方，再按Insert Button鈕兩次加入兩個buttons。將button逐一選取，利用propeties panel分別將label轉為“發送”、Action為Submit form及label轉為“重設”、Action為Reset form。按代表Form的紅色虛選取該表單，在properties panel內將Form Name轉為guestbook，Action為mailto:.hk。3. 樣式表樣式表(cascading style sheet, css)可協助我們輕易完成網頁格式化排版工作。開新檔案，並立即儲存，可任意取一個名稱。選Window CSS Styles。出現CSS Style視窗後，按其下方的New Sytyle按鈕。加入一個名為 .heading1的style。按下圖的選項設定。按OK時會詢問你儲存Style Sheet Files的位置，請將css檔案存放在此網頁相同的資料夾內，並取名為sample。按OK後會出現以下畫面。在Category內選取Type，再按下圖設定。然後按Apply 及OK。以相同方法再設定一個名為 .body1 及 一個 .comment1的style。設定何隨意，下圖為參考。完成後會發現CSS Style視窗出現了剛設定的三個style。此時選取網頁上任何一段文字，再按任一style的名稱，即可將style設定套用於該段文字中。接著我們設定文字hyperlink的style。在CSS Style視窗按New Style鈕，在New Style對話匣中選Use CSS Selector，再在Selector的dropdown list中選a:link，再按OK。按下圖設定，然後按Apply 及OK。在Selector中選a:hover，再按下圖設定。在Selector中選a:active，再按下圖設定。在Selector中選a:visited，再按下圖設定。完成後嘗試在網頁上加上數個hyperlinks，再用Preview in Browser測試結果。如欲之前製作的css file，可開新網頁，立即儲存該檔案。在CSS Style視窗的下方按Attach Style Sheet鈕。 在File Browser內選取剛才建立的sample.css，再按Select。現在這個檔案已可套用之前建立的sample.css內的style了。4. 影像地圖開啟檔案imagemap_demo.htm。選取網頁中的圖片。Properties panel會顯示圖片的屬性。在下方Map的文字欄中填入newmap，再選畫圓工具。利用畫圓工具繪出一個圓剛好包著“框架網頁”左方的圓形圖案。利用Hotspot屬性列將Link設定為frame.htm，Target為 _blank，Alt為frame。我們可利用黑色箭嘴移動圓形hotspot的位置。按一下網頁的空白部分，再按網頁上的圖片將其重新選取。利用畫圓工具繪出一個圓剛好包著“表單網頁”左方的圓形圖案。利用Hotspot屬性列將Link設定為form.htm，Target為 _blank，Alt為form。重複設定“樣式表”及“影像地圖”如下圖所示。完成後儲存檔案，再用Preview in Browser觀看成果。5. 加入Shockwave FlashShockwave Flash是利用Macromedia Flash製作的供網上播放的Flash檔案。由於Flash與Dreamweaver是同一軟件商的出品，因此我們很輕易就可以將Shockwave Flash加入網頁中。開啟flash_demo.htm檔案。在Common Tools內按Insert Flash鈕。在選擇檔案視窗中選dissolve.swf檔案，再按OK。在主畫面中可見插入的Shockwave Flash是以一灰色方塊表示。利用Properties Panel可更改它的屬性。用Preview in Browser試看成果。6. 加入Shockwave 檔案Shockwave是利用Macromedia Director製作供網上播放的檔案。由於Director與Dreamweaver是同一軟件商的出品，因此我們很輕易就可以將Shockwave 檔案加入網頁中。開啟flash_demo.htm檔案。在Common Tools內按Insert Flash鈕。在選擇檔案視窗中選puzzle.dcr檔案，再按OK。在主畫面中可見插入的Shockwave 是以一灰色方塊表示。利用Properties Panel可更改它的屬性。我們需要將shockwave的大小設回在Director製作時所設定的大小，在這裏為640 x 480。用Preview in Browser試看成果。7. 加入Java AppletJava Applet是利用Java程式語言開發並內嵌於瀏覽器內播放的Java程式。雖然Dreamweaver提供按鈕供我們在網頁內插入Java Applet，但經驗所得此方法很多時並不適用。一般我們會利用網上的一些免費提供Java Applet的網站或製作Java Applet的工具來獲得Java Applet。這些Java Applet通常都會附帶一個檔案或一個網頁內裡包含著要放置在網頁內的coding。我們要將這些coding 抄進網頁中。雙按開啟applettag.html檔案。選檢視 原始檔，會顯示以下的coding。利用編輯 選取全部 將所有coding選取。再用編輯 複製 將coding複製。回到Dreamweaver 4，開啟java_demo.htm檔案。按右上方的Show Code View鈕。移到原始碼中的下面的空白行，再選Edit Paste將剛才的coding貼入。貼入後如下圖。按Show Design View鈕返回一般畫面，可見插入的Applet是以一灰色方塊表示。利用Properties Panel可更改它的屬性 (但一般不用更改)。用Preview in Browser試看成果。8. 加入javascriptJavascript是用戶端的scripting language，它可以為網頁加上許多不的功能。以下我們會用兩個實例說明。(a) 產生popup window本校網頁的首頁即用了此功能。我們只要將以下程式碼加進網頁的Title與Body的tags之間即可window.open(openday_pop.htm,NewWindow,status=no,width=300,height=300)其中openday_pop.htm是popup視窗裏要顯示的網頁，width是popup視窗的闊度，height是popup視窗的高度。(b) 特殊的rollover效果Javascript的程式碼可以獨立存在於一個 .js的檔案中。只要我們將此檔案attach到網頁中，即可使用檔案內的functions製作特殊效果。參考此段含javascript的html檔案。javascript test page /套用javascript的檔案 /定義此網頁要用的javascript functions /進行圖像預載First swap image/ 進行圖像轉換Second swap imageThird swap image此兩行將sample.js此檔案attach 進來。此段定義了兩個functions，分別是Swap 及PageInit來進行圖像轉換及圖像預載。此段