网页设计入门与Dreamweaver使用简介课件.ppt

1、網頁設計入門與 Dreamweaver 使用簡介講師：梁家豪E-Mail:u8855043ccu.edu.tw圖片(Images)目前網路上常見的圖片可以分為兩種 GIF：非失真壓縮，256色，用於小圖示 JPGE：失真壓縮，全彩，用於風景圖示 首先，至站台管理員，新增一個目錄，叫Images，方便未來管理圖片。按下Site/Site Files 叫出站台管理員 在要新增目錄處點右鍵，選New Folder 再填入Images即可插入圖示1.按下Object功能表上的【Insert Image】2.選擇檔案存放的位置3.選擇完檔案後，會跳出一個對話視窗，此時按下是此對話視窗是詢問是否要將圖片拷

2、備一份進入自己的Site4.再選擇剛才設定的Images目錄，將圖片存入圖片注意事項 插入圖片，檔案最好已經存過檔了，若否，則會出現左圖，代表DW將先以絕對路徑的方式存放圖片 檔案的命名，建議以英文為主 圖片應拷備一份至Site之中，以方便管理圖片細部設定 點選圖片後，Properties會顯示出圖片的細部設定 WH，代表圖片的長寬 Src，代表圖片的來源 Align，代表圖片對齊方式 Alt，代表圖片的替代文字 Border，代表圖片的邊框寬度 Low Src，代表低解析度圖片來源Rollover Image 按下Object功能表上的【Insert Rollover Image】選擇Ori

3、ginal Image，此圖代表一般顯示的圖片，選擇圖片與插入圖片的過程相同，都要拷備一份至Site 選擇Rollover Image，此圖代表當滑鼠移上去後，變換為何圖 再按下確定，使用瀏覽器預覽即可路徑觀念 相對路徑 連結或圖片來源，是以相對於自己的Site來表示，所以會出現“./目錄/檔名”或“目錄/檔名”，一般而言，網頁製作已此為準 絕對路徑 指連結或圖片來源，在網路上的位置是絕對的，不因為處在地點不同而改變，通常會以http:/開頭設定超連結 第一步，先選取欲設定的文字 第二步，按下Properties上Link旁的資料匣圖示 第三步，選擇欲連結的檔案 如此，即完成連結 絕對路徑的連

4、結方式，則直接於Link處，鍵入連結的網址，如http:/www.ccu.edu.tw圖片連結與影像地圖 圖片連結與文字連結大同小異，第一步，先選擇欲連結的圖片 第二步，按下Properties上Link旁的小圖示選擇，欲連結的檔案 影像地圖方式也是相近的，步驟三，先選擇圖片 步驟四，於Properties上選擇適合的圈選工具 步驟五，同其他連結設定方式，選擇檔案插入電子郵件連結 步驟一，按下Object功能表上的【Insert Email Link】步驟二，Text是填入要顯示在螢幕上的字串，E-Mail則填入欲寄發信件的信箱 圖片設定上與連結相似，步驟三，先選取欲設定的圖片 步驟四，在Pr

5、operties 上的Link處填入，【mailto:帳號】，即可插入錨(Anchor)第一步，先於插入錨處，點一下 第二步，選【Insert/Invisible Tags/Named Anchor】第三步，輸入錨的名稱 第四步，圈選欲設定連結之字串 第五步，於Properties上之link設定【#錨的名稱】同理，如是跨檔案的連結，則設定【檔名#錨的名稱】，如【page01.htm#r1】表格結構 表格(Table)，指整個表格本身 儲存格(Cell)，指表格中的每一個小格子 橫列(Row)，指水平方向的儲存格 直欄(Col)，指垂直方向的儲存格插入表格與格式化表格 步驟一，按下Object

6、上的【Insert Table】步驟二，選擇要多少欄位與邊寬 按下確定，即完成插入表格 格式化表格是套用現成的樣式來美化表格 步驟三，選擇【Commands/Format Table】步驟四，選擇適合的表格樣式表格細部解說 選定表格 WH，代表其寬與高之設定 CellPadding，代表儲存格內容與邊框距離 CellSpacing，代表儲存格與儲存格之間距離 Align，代表對齊方式 Border，代表表格之邊框線條粗細程度 Bg Color/Bg Image，代表表格之背景 Brdr Color，代表表格邊框之顏色儲存格之細部解說 選定儲存格(選擇一個時，只需於其中點一下即可，若兩個以上，則

7、以拖拉方式選取)Horz，代表水平對齊方式 Vert，代表垂直對齊方式 WH，代表其寬與高 No Warp，代表超過寬度不換行 Bg，代表其背景顏色與圖片 Brdr，代表其邊框顏色Cell Padding 與Cell Spacing 解說表格細部設定存儲格細部設定增刪儲存格 一般而言，如欲在表格最後面增加新的一列，只需要按下【Tab】鍵即可 一般而言，刪除一欄或一列儲存格，只需將其選取，再按下【Delete】鍵即可 進階的增刪，可於欲刪除或新增處，按下【Modify/Table】，選擇適合的指令 Insert Row，於目前位置之上插入一列 Insert Column，於目前位置之前插入一欄 Insert Rows or Columns，指一次插入多個欄或列，也可以定於之後，或之後插入Modify/Table插入多列的情況插入多欄的情況合併與分割儲存格 步驟一，選擇欲合併的存儲格 步驟二，按下Properties的Marge Cell 如此即完成合併儲存格 分割儲存格方法相似，步驟三，選擇欲分割的儲存格 步驟四，按下Properties的Splits Cell 步驟五，選擇欲分割成幾欄與幾列即可