網頁設計入門 與 Dreamweaver 使用簡介

Presentation on theme: "網頁設計入門 與 Dreamweaver 使用簡介"— Presentation transcript:

1 網頁設計入門 與 Dreamweaver 使用簡介
講師：梁家豪

2 圖片(Images) 目前網路上常見的圖片可以分為兩種 首先，至站台管理員，新增一個目錄，叫Images，方便未來管理圖片。
GIF：非失真壓縮，256色，用於小圖示 JPGE：失真壓縮，全彩，用於風景圖示 首先，至站台管理員，新增一個目錄，叫Images，方便未來管理圖片。 按下Site/Site Files 叫出站台管理員 在要新增目錄處點右鍵，選New Folder 再填入Images即可

3 插入圖示 按下Object功能表上的【Insert Image】 選擇檔案存放的位置 選擇完檔案後，會跳出一個對話視窗，此時按下是
此對話視窗是詢問是否要將圖片拷備一份進入自己的Site 再選擇剛才設定的Images目錄，將圖片存入

4

5 圖片注意事項 插入圖片，檔案最好 已經存過檔了，若否 ，則會出現左圖，代 表DW將先以絕對路 徑的方式存放圖片 檔案的命名，建議以英文為主
圖片應拷備一份至Site之中，以方便管理

6 圖片細部設定 點選圖片後，Properties會顯示出圖片的細部設定 WH，代表圖片的長寬 Src，代表圖片的來源
Align，代表圖片對齊方式 Alt，代表圖片的替代文字 Border，代表圖片的邊框寬度 Low Src，代表低解析度圖片來源

7

8 Rollover Image 按下Object功能表上的【Insert Rollover Image】
選擇Original Image，此圖代表一般顯示的圖片，選擇圖片與插入圖片的過程相同，都要拷備一份至Site 選擇Rollover Image，此圖代表當滑鼠移上去後，變換為何圖 再按下確定，使用瀏覽器預覽即可

9

10 路徑觀念 相對路徑 連結或圖片來源，是以相對於自己的Site來表示，所以會出現“../目錄/檔名”或“目錄/檔名”，一般而言，網頁製作已此為準 絕對路徑 指連結或圖片來源，在網路上的位置是絕對的，不因為處在地點不同而改變，通常會以

11 設定超連結 第一步，先選取欲設定的文字 第二步，按下Properties上Link旁的資料匣圖示 第三步，選擇欲連結的檔案 如此，即完成連結

12

13 圖片連結與影像地圖 圖片連結與文字連結大同小異，第一步，先選擇欲連結的圖片
第二步，按下Properties上Link旁的小圖示選擇，欲連結的檔案 影像地圖方式也是相近的，步驟三，先選擇圖片 步驟四，於Properties上選擇適合的圈選工具 步驟五，同其他連結設定方式，選擇檔案

14

15 插入電子郵件連結 步驟一，按下Object功能表上的【Insert Email Link】
步驟二，Text是填入要顯示在螢幕上的字串， 則填入欲寄發信件的信箱 圖片設定上與連結相似，步驟三，先選取欲設定的圖片 步驟四，在Properties 上的Link處填入，【mailto:帳號】，即可

16

17 插入錨(Anchor) 第一步，先於插入錨處，點一下 第二步，選【Insert/Invisible Tags/Named Anchor】
第三步，輸入錨的名稱 第四步，圈選欲設定連結之字串 第五步，於Properties上之link設定【#錨的名稱】 同理，如是跨檔案的連結，則設定【檔名#錨的名稱】，如【page01.htm#r1】

18

19 表格結構 表格(Table)，指整個表格本身 儲存格(Cell)，指表格中的每一個小格子 橫列(Row)，指水平方向的儲存格
直欄(Col)，指垂直方向的儲存格

20 插入表格與格式化表格 步驟一，按下Object上的【Insert Table】 步驟二，選擇要多少欄位與邊寬 按下確定，即完成插入表格
格式化表格是套用現成的樣式來美化表格 步驟三，選擇【Commands/Format Table】 步驟四，選擇適合的表格樣式

21

22

23 表格細部解說 選定表格 WH，代表其寬與高之設定 CellPadding，代表儲存格內容與邊框距離
CellSpacing，代表儲存格與儲存格之間距離 Align，代表對齊方式 Border，代表表格之邊框線條粗細程度 Bg Color / Bg Image，代表表格之背景 Brdr Color，代表表格邊框之顏色

24 儲存格之細部解說 選定儲存格(選擇一個時，只需於其中點一下即可，若兩個以上，則以拖拉方式選取) Horz，代表水平對齊方式
Vert，代表垂直對齊方式 WH，代表其寬與高 No Warp，代表超過寬度不換行 Bg，代表其背景顏色與圖片 Brdr，代表其邊框顏色

25 Cell Padding 與Cell Spacing 解說
表格細部設定 存儲格細部設定

26 增刪儲存格 一般而言，如欲在表格最後面增加新的一列，只需要按下【Tab】鍵即可
一般而言，刪除一欄或一列儲存格，只需將其選取，再按下【Delete】鍵即可 進階的增刪，可於欲刪除或新增處，按下【Modify/Table】，選擇適合的指令 Insert Row，於目前位置之上插入一列 Insert Column，於目前位置之前插入一欄 Insert Rows or Columns，指一次插入多個欄或列，也可以定於之後，或之後插入

27 Modify/Table 插入多列的情況 插入多欄的情況

28 合併與分割儲存格 步驟一，選擇欲合併的存儲格 步驟二，按下Properties的Marge Cell 如此即完成合併儲存格
分割儲存格方法相似，步驟三，選擇欲分割的儲存格 步驟四，按下Properties的Splits Cell 步驟五，選擇欲分割成幾欄與幾列即可

29