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

網頁設計入門與Dreamweaver使用簡介,講師：梁家豪E-Mail:.tw,.,圖片(Images),目前網路上常見的圖片可以分為兩種GIF：非失真壓縮，256色，用於小圖示JPGE：失真壓縮，全彩，用於風景圖示首先，至站台管理員，新增一個目錄，叫Images，方便未來管理圖片。按下Site/SiteFiles叫出站台管理員在要新增目錄處點右鍵，選NewFolder再填入Images即可,.,插入圖示,按下Object功能表上的【InsertImage】選擇檔案存放的位置選擇完檔案後，會跳出一個對話視窗，此時按下是此對話視窗是詢問是否要將圖片拷備一份進入自己的Site再選擇剛才設定的Images目錄，將圖片存入,.,.,圖片注意事項,插入圖片，檔案最好已經存過檔了，若否，則會出現左圖，代表DW將先以絕對路徑的方式存放圖片檔案的命名，建議以英文為主圖片應拷備一份至Site之中，以方便管理,.,圖片細部設定,點選圖片後，Properties會顯示出圖片的細部設定WH，代表圖片的長寬Src，代表圖片的來源Align，代表圖片對齊方式Alt，代表圖片的替代文字Border，代表圖片的邊框寬度LowSrc，代表低解析度圖片來源,.,.,RolloverImage,按下Object功能表上的【InsertRolloverImage】選擇OriginalImage，此圖代表一般顯示的圖片，選擇圖片與插入圖片的過程相同，都要拷備一份至Site選擇RolloverImage，此圖代表當滑鼠移上去後，變換為何圖再按下確定，使用瀏覽器預覽即可,.,.,路徑觀念,相對路徑連結或圖片來源，是以相對於自己的Site來表示，所以會出現“./目錄/檔名”或“目錄/檔名”，一般而言，網頁製作已此為準絕對路徑指連結或圖片來源，在網路上的位置是絕對的，不因為處在地點不同而改變，通常會以http:/開頭,.,設定超連結,第一步，先選取欲設定的文字第二步，按下Properties上Link旁的資料匣圖示第三步，選擇欲連結的檔案如此，即完成連結絕對路徑的連結方式，則直接於Link處，鍵入連結的網址，如.tw,.,.,圖片連結與影像地圖,圖片連結與文字連結大同小異，第一步，先選擇欲連結的圖片第二步，按下Properties上Link旁的小圖示選擇，欲連結的檔案影像地圖方式也是相近的，步驟三，先選擇圖片步驟四，於Properties上選擇適合的圈選工具步驟五，同其他連結設定方式，選擇檔案,.,.,插入電子郵件連結,步驟一，按下Object功能表上的【InsertEmailLink】步驟二，Text是填入要顯示在螢幕上的字串，E-Mail則填入欲寄發信件的信箱圖片設定上與連結相似，步驟三，先選取欲設定的圖片步驟四，在Properties上的Link處填入，【mailto:帳號】，即可,.,.,插入錨(Anchor),第一步，先於插入錨處，點一下第二步，選【Insert/InvisibleTags/NamedAnchor】第三步，輸入錨的名稱第四步，圈選欲設定連結之字串第五步，於Properties上之link設定【#錨的名稱】同理，如是跨檔案的連結，則設定【檔名#錨的名稱】，如【page01.htm#r1】,.,.,表格結構,表格(Table)，指整個表格本身儲存格(Cell)，指表格中的每一個小格子橫列(Row)，指水平方向的儲存格直欄(Col)，指垂直方向的儲存格,.,插入表格與格式化表格,步驟一，按下Object上的【InsertTable】步驟二，選擇要多少欄位與邊寬按下確定，即完成插入表格格式化表格是套用現成的樣式來美化表格步驟三，選擇【Commands/FormatTable】步驟四，選擇適合的表格樣式,.,.,.,表格細部解說,選定表格WH，代表其寬與高之設定CellPadding，代表儲存格內容與邊框距離CellSpacing，代表儲存格與儲存格之間距離Align，代表對齊方式Border，代表表格之邊框線條粗細程度BgColor/BgImage，代表表格之背景BrdrColor，代表表格邊框之顏色,.,儲存格之細部解說,選定儲存格(選擇一個時，只需於其中點一下即可，若兩個以上，則以拖拉方式選取)Horz，代表水平對齊方式Vert，代表垂直對齊方式WH，代表其寬與高NoWarp，代表超過寬度不換行Bg，代表其背景顏色與圖片Brdr，代表其邊框顏色,.,CellPadding與CellSpacing解說,表格細部設定,存儲格細部設定,.,增刪儲存格,一般而言，如欲在表格最後面增加新的一列，只需要按下【Tab】鍵即可一般而言，刪除一欄或一列儲存格，只需將其選取，再按下【Delete】鍵即可進階的增刪，可於欲刪除或新增處，按下【Modify/Table】，選擇適合的指令InsertRow，於目前位置之上插入一列InsertColumn，於目前位置之前插入一欄InsertRowsorColumns，指一次插入多個欄或列，也可以定於之後，或之後插入,.,Modify/Table,插入多列的情況,插入多欄的情況,.,合併與分割儲存格,步驟一，選