高阶网页制作.docVIP

高階網頁製作 事前準備 – 先將uit_dww資料夾抄到電腦中。 網頁框架(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儲存檔案。再開啟瀏覽器測試成果。 網頁表單 在左方的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:admin@.hk。 樣式表 樣式表(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視窗出