西安郵電學(xué)院 網(wǎng)頁(yè)制作30

1、田美雲(yún) 2006/07/26網(wǎng)頁(yè)設(shè)計(jì)及製作part 0: 下載練習(xí)檔案請(qǐng)先下載練習(xí)的檔案：.tw/demo/demo.zippart 1: 認(rèn)識(shí)DW工作環(huán)境工作區(qū)介紹功能表插入列切換網(wǎng)頁(yè)編輯模式編輯區(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)頁(yè)在DW定義網(wǎng)站設(shè)定網(wǎng)站資料夾修改網(wǎng)站設(shè)定part 2: 建立網(wǎng)站網(wǎng)頁(yè)的新增：以網(wǎng)站架構(gòu)圖為藍(lán)圖網(wǎng)頁(yè)資料夾：較複雜層次較多的大型網(wǎng)站

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

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

4、56 個(gè)色彩來(lái)顯示影像資料，較適用於文字形式的影像、線稿與美工圖案。比較特別的是可將背景設(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)頁(yè)圖片插入圖片插入列從檔案面板拖拉至適當(dāng)位置加入影像預(yù)留位置part 4: 網(wǎng)頁(yè)圖片修改圖片屬性大小來(lái)源超連結(jié)文繞圖替代文字間距外框編輯圖片exercise 4: 網(wǎng)頁(yè)圖片開啟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)頁(yè)圖片製作影像地圖建立連結(jié)區(qū)域修改與刪除part 5: 超連結(jié)文字超連結(jié) 人物預(yù)設(shè)值用頁(yè)面屬性更改顏色利用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)頁(yè): people.htm, realisitically.htm, animal.htm利用CSS更改連結(jié)顏色樣式開啟ex5-2.htm，製作Rollover的特效製作圖形連結(jié)至display檔案夾的以下網(wǎng)頁(yè): people.htm, realisitically.htm, animal.htmpart 5: 超連結(jié)使用錨點(diǎn)用於頁(yè)面過(guò)長(zhǎng)，避免不斷捲動(dòng)頁(yè)面設(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按鈕回首頁(yè)並連結(jié)至ex6-1.htm插入一段Flash文字臺(tái)灣設(shè)計(jì)界的一大盛事開啟 ex6-3.htm插入音樂(lè)sample

8、.wav設(shè)定屬性 75x40part 7: 表格插入表格設(shè)定表格屬性屬性面板寬度：% (伸展)或像素(固定)表格背景儲(chǔ)存格屬性分割/合併part 7: 表格調(diào)整表格增減欄列調(diào)整寬高 表格常用來(lái)排版!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)頁(yè) 請(qǐng)注意覆蓋檔案的問(wèn)題!part 8: 上傳及維護(hù)更改檔案名稱搬移檔案刪除檔案同步化 遮罩可以排除不想上傳的檔案!part 8

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

10、u.htm，右: content.htm)調(diào)整頁(yè)框?qū)傩詐art 10: CSS樣式表什麼是CSS ?W3C訂定的語(yǔ)法，用來(lái)擴(kuò)展HTML語(yǔ)法的功能CSS1、CSS2 (只有少數(shù)瀏覽器支援)CSS 的基本：原始碼：使用方式內(nèi)嵌 vs.外部連結(jié) .css重訂 HTML 標(biāo)籤 vs.自訂樣式part 10: CSS樣式表CSS樣式面板重新定義HTML樣式式設(shè)定類型、背景、區(qū)塊、方框、邊框、清單定位: 絕對(duì)(相對(duì)於網(wǎng)頁(yè)左上角)、相對(duì)(相對(duì)於原來(lái)在網(wǎng)頁(yè)中的位置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)容至伺服器透過(guò) CGI 程式(perl, asp, php)處理後，再將結(jié)果傳回網(wǎng)頁(yè)通常需要配合伺服器端程式與資料庫(kù)，才能發(fā)揮較大的功用；不過(guò)，利用簡(jiǎn)單的小技巧以電子郵件來(lái)傳送資料的話，即使不會(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)表單:行為通常用程式來(lái)做檢驗(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