1、田美雲(yún) 2006/07/26網(wǎng)頁設(shè)計(jì)及製作part 0: 下載練習(xí)檔案請(qǐng)先下載練習(xí)的檔案：.tw/demo/demo.zippart 1: 認(rèn)識(shí)DW工作環(huán)境工作區(qū)介紹功能表插入列切換網(wǎng)頁編輯模式編輯區(qū)狀態(tài)列屬性面板其他功能面板part 1: 認(rèn)識(shí)工作環(huán)境面版操作偏好設(shè)定一般設(shè)定狀態(tài)列：可以模擬下載速度exercise1: 認(rèn)識(shí)工作環(huán)境啟動(dòng)Dreamweaver MX 2004探索一下DW的工作區(qū)及各項(xiàng)面板part 2: 建立網(wǎng)站在硬碟新增一專案資料夾素材文件資訊網(wǎng)頁在DW定義網(wǎng)站設(shè)定網(wǎng)站資料夾修改網(wǎng)站設(shè)定part 2: 建立網(wǎng)站網(wǎng)頁的新增：以網(wǎng)站架構(gòu)圖為藍(lán)圖網(wǎng)頁資料夾：較複雜層次較多的大型網(wǎng)站

2、，可以以資料夾分類part 2: 建立網(wǎng)站網(wǎng)頁的儲(chǔ)存與編輯首頁的命名 index.htm, default.htm, index.asp, index.php (可在網(wǎng)頁伺服器設(shè)定)其他檔案的命名請(qǐng)用英文及數(shù)字，不要用中文檔名以英文字母開始不要用空白，以_或大小寫組合代替，如：my_file.htm、myFile.htm不要使有特殊符號(hào)避免過長(zhǎng)，建議不要超過20個(gè)字元part 2: 建立網(wǎng)站設(shè)定頁面屬性標(biāo)題背景及邊界編碼方式繁體中文 big5萬國(guó)通用碼 unicodepart 2: 建立網(wǎng)站設(shè)定標(biāo)頭：插入列HTML關(guān)鍵字、說明：讓搜尋引擎容易找到重新整理修改預(yù)覽網(wǎng)頁exercise 2: 建立

3、網(wǎng)站請(qǐng)定義一個(gè)新網(wǎng)站 MyWeb請(qǐng)新增網(wǎng)頁：index.htm, about.htm, hobbies.htm, family.htm, photo.htm編輯 index.htm設(shè)定頁面屬性設(shè)定標(biāo)頭預(yù)覽part 3: 網(wǎng)頁文字文字輸入直接輸入貼上已存在的內(nèi)容文字編輯段落、斷行特殊字元分隔線空白part 3: 網(wǎng)頁文字文字屬性設(shè)定段落樣式字型大小色彩字體對(duì)齊超連結(jié)項(xiàng)目文字縮排exercise 3: 網(wǎng)頁文字新增一個(gè)空白網(wǎng)頁打開ex3.txt 複製內(nèi)容至此空白網(wǎng)頁更改文字屬性，區(qū)別大小標(biāo)題，項(xiàng)目在倒數(shù)第2行前插入分隔線儲(chǔ)存為ex3.htmpart 4: 網(wǎng)頁圖片網(wǎng)頁圖片格式gif ：最多使用 2

4、56 個(gè)色彩來顯示影像資料，較適用於文字形式的影像、線稿與美工圖案。比較特別的是可將背景設(shè)為透明，還可以製成動(dòng)畫jpg：壓縮比率高達(dá)1:10，同時(shí)又保存影像的整體相片品質(zhì)，但當(dāng)壓縮率愈高，影像的品質(zhì)會(huì)愈低，較適用於自然風(fēng)景及人物照片png ：融合了 jpg 和 gif 的優(yōu)點(diǎn)，支援用於遮罩的 alpha 色頻、並可儲(chǔ)存 48 位元的彩色影像，缺點(diǎn)為檔案較jpg大，且不像gif可支援動(dòng)畫part 4: 網(wǎng)頁圖片插入圖片插入列從檔案面板拖拉至適當(dāng)位置加入影像預(yù)留位置part 4: 網(wǎng)頁圖片修改圖片屬性大小來源超連結(jié)文繞圖替代文字間距外框編輯圖片exercise 4: 網(wǎng)頁圖片開啟ex4-1.htm

5、插入標(biāo)題圖片judges.gif插入評(píng)審的圖片：judges-CK.gif, judges-EZ.gif, judges-GC.gif, judges-RL.gif開啟ex4-2.htm在最前端插入圖片txt.gif修改屬性：圖靠右、上下間距6part 4: 網(wǎng)頁圖片製作影像地圖建立連結(jié)區(qū)域修改與刪除part 5: 超連結(jié)文字超連結(jié) 人物預(yù)設(shè)值用頁面屬性更改顏色利用CSS變換超連結(jié)文字狀態(tài)part 5: 超連結(jié)圖片超連結(jié) 只要把邊框設(shè)為0，就不有藍(lán)框了!變換影像的特效(Rollover)行為面板javascriptexercise 5-1: 超連結(jié)開啟ex5-1.htm製作文字連結(jié)至displ

6、ay檔案夾的以下網(wǎng)頁: people.htm, realisitically.htm, animal.htm利用CSS更改連結(jié)顏色樣式開啟ex5-2.htm，製作Rollover的特效製作圖形連結(jié)至display檔案夾的以下網(wǎng)頁: people.htm, realisitically.htm, animal.htmpart 5: 超連結(jié)使用錨點(diǎn)用於頁面過長(zhǎng)，避免不斷捲動(dòng)頁面設(shè)定錨點(diǎn)人物設(shè)定連結(jié)人物 最好加入回到原點(diǎn)的連結(jié)!part 5: 超連結(jié)設(shè)定外部連結(jié)外部連結(jié)開啟在新視窗：目標(biāo)設(shè)為_blank設(shè)定Email連結(jié): mailto:who檔案下載的連結(jié) 最好能標(biāo)示檔案類型及大小!exercis

7、e 5-2: 超連結(jié)開啟ex5-3.htm在評(píng)審影像前加上錨點(diǎn)並在最上端的評(píng)審名字列，製作連結(jié)至個(gè)評(píng)審介紹part 6: 多媒體Flash動(dòng)畫插入Flash (.swf)設(shè)定屬性Flash 按鈕Flash文字part 6: 多媒體視訊及聲音外掛程式屬性參數(shù): 隱藏播放面板 hidden=true 完整的Windows Media播放面板是 280 x45!exercise 6: 多媒體開啟ex6-1.htm插入index.swf設(shè)定屬性開啟ex6-2.htm插入一Flash按鈕回首頁並連結(jié)至ex6-1.htm插入一段Flash文字臺(tái)灣設(shè)計(jì)界的一大盛事開啟 ex6-3.htm插入音樂sample

8、.wav設(shè)定屬性 75x40part 7: 表格插入表格設(shè)定表格屬性屬性面板寬度：% (伸展)或像素(固定)表格背景儲(chǔ)存格屬性分割/合併part 7: 表格調(diào)整表格增減欄列調(diào)整寬高 表格常用來排版!exercise 7: 表格開啟ex7.htm在第二列插入一表格：5x2, 200pix, 邊框0在儲(chǔ)存格中依序插入圖片新增一表格列開啟ex7.txt，複製作者資訊到儲(chǔ)存格修改表格寬度為100%part 8: 上傳及維護(hù)定義遠(yuǎn)端網(wǎng)站設(shè)定FTP伺服器位址與遠(yuǎn)端連接上傳/下載網(wǎng)頁 請(qǐng)注意覆蓋檔案的問題!part 8: 上傳及維護(hù)更改檔案名稱搬移檔案刪除檔案同步化 遮罩可以排除不想上傳的檔案!part 8

9、: 上傳及維護(hù)檢查超連結(jié)無效的連結(jié)外部連結(jié)孤立檔案 刪除前一定要再次確認(rèn)!一次更改相同的超連結(jié)exercise 8: 上傳及維護(hù)設(shè)定遠(yuǎn)端網(wǎng)站 (使用學(xué)校提供的帳號(hào))上傳幾個(gè)檔案part 9: 頁框由好幾個(gè)網(wǎng)頁共同組成的常見頁框分割 上、下上、中、下上、下(左、右)top.htmmain.htmleft.htmindex.htmpart 9: 頁框分隔頁框的方式插入列功能表手動(dòng)移除頁框調(diào)整頁框調(diào)整框線指定part 9: 頁框儲(chǔ)存頁框組指定頁框的網(wǎng)頁來源設(shè)定頁框?qū)傩詄xercise 9: 頁框開啟ex9.htm製作頁框(上及左巢狀)儲(chǔ)存頁框組指定頁框來源(上: top.htm，左: mainmen

10、u.htm，右: content.htm)調(diào)整頁框?qū)傩詐art 10: CSS樣式表什麼是CSS ?W3C訂定的語法，用來擴(kuò)展HTML語法的功能CSS1、CSS2 (只有少數(shù)瀏覽器支援)CSS 的基本：原始碼：使用方式內(nèi)嵌 vs.外部連結(jié) .css重訂 HTML 標(biāo)籤 vs.自訂樣式part 10: CSS樣式表CSS樣式面板重新定義HTML樣式式設(shè)定類型、背景、區(qū)塊、方框、邊框、清單定位: 絕對(duì)(相對(duì)於網(wǎng)頁左上角)、相對(duì)(相對(duì)於原來在網(wǎng)頁中的位置part 10: CSS樣式表自訂CSS樣式名稱 .heading設(shè)定套用取消修改part 10: CSS樣式表外部樣式表新增 CSS (檔名 .c

11、ss )設(shè)定 連結(jié)套用exercise 10: CSS樣式表開啟ex10.htm重新定義表列項(xiàng)目的樣式新增一自訂樣式，將標(biāo)題字體放大並加背景顏色part 11: 表單表單可：配合前端的 Javascript 程式，達(dá)到互動(dòng)效果傳送內(nèi)容至伺服器透過 CGI 程式(perl, asp, php)處理後，再將結(jié)果傳回網(wǎng)頁通常需要配合伺服器端程式與資料庫，才能發(fā)揮較大的功用；不過，利用簡(jiǎn)單的小技巧以電子郵件來傳送資料的話，即使不會(huì)程式的人，也可以設(shè)計(jì)出具有實(shí)用性的表單part 11: 表單表單元件：文字欄位隱藏欄位文字區(qū)域核取方塊選項(xiàng)按鈕/群組清單/選單影像欄位檔案欄位按鈕part 11: 表單表單標(biāo)

12、籤：名稱：表單及元件最好有名稱，方便資料的傳送方法若是以GET的方法傳送，資料會(huì)附加在URL後面，ex: signup.php?var1=123&var2=456若是以POST的方法傳送，資料是和HTTP的檔頭內(nèi)容一起傳送，瀏覽這是看不見的part 11: 表單表單標(biāo)籤：動(dòng)作: 通常連結(jié)到程式編碼方式檢驗(yàn)表單:行為通常用程式來做檢驗(yàn)exercise 11: 表單請(qǐng)新建一檔案用form.txt 的內(nèi)容製作報(bào)名表 (可用ex11form.htm作為範(fàn)本)用email傳送內(nèi)容測(cè)試mailto:xxx.tw?subject=報(bào)名表方法:POST編碼類型: text/plainpart 12: 行為行為即是由 Java