網頁製作 Step By Step 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw.

Presentation on theme: "網頁製作 Step By Step 國立高雄大學-圖書資訊館 楊國棟 kdyang@nuk.edu.tw."— Presentation transcript:

1 網頁製作 Step By Step 國立高雄大學-圖書資訊館 楊國棟

2 開新檔案 檔案→開新檔案→空白網頁 國立高雄大學-圖書資訊館 楊國棟

3 儲存檔案 檔案→另存新檔→輸入檔名 國立高雄大學-圖書資訊館 楊國棟

4 利用表格-排版 表格→插入→表格 插入一5列1欄的表格 指定寬度為750 儲存格與邊框距離設為0 儲存格間距設為0 框線大小設為0
國立高雄大學-圖書資訊館 楊國棟

5 插入Logo圖 插入→圖片→從檔案 插入Logo圖（__01.gif） 國立高雄大學-圖書資訊館 楊國棟

6 插入間隔圖 插入→圖片→從檔案（clear.gif） 選取圖片→滑鼠右鍵→圖片內容 設定寬度為207像素，高度為1像素
國立高雄大學-圖書資訊館 楊國棟

7 插入功能圖 陸續插入__04.gif~__07.gif等圖片 國立高雄大學-圖書資訊館 楊國棟

8 設定儲存格背景圖 選取儲存格→滑鼠右鍵→儲存格內容 使用背景圖片（__17.gif） 水平對齊方式：靠左 垂直對齊方式：中
國立高雄大學-圖書資訊館 楊國棟

9 插入橫式選項圖 陸續插入__08.gif~__14.gif圖 國立高雄大學-圖書資訊館 楊國棟

10 設定儲存格背景色 選擇儲存格→儲存格內容→背景→色彩 選擇自訂色彩→紅、綠、藍皆設定153 插入圖片（clear.gif）
國立高雄大學-圖書資訊館 楊國棟

11 預備直式選單 插入表格（1X3） 指定寬度為750 儲存格與邊框距離設為0 儲存格間距設為0 框線大小設為0
國立高雄大學-圖書資訊館 楊國棟

12 設定儲存格寬度 國立高雄大學-圖書資訊館 楊國棟

13 插入表格 插入表格（2X1） 指定寬度為164 儲存格與邊框距離設為0 儲存格間距設為0 框線大小設為0 國立高雄大學-圖書資訊館 楊國棟

14 設定儲存格內容 高度2 插入clear.gif圖（寬164、高15） 國立高雄大學-圖書資訊館 楊國棟

15 設定儲存格內容 寬度164 水平對齊：置中 垂直對齊：上 國立高雄大學-圖書資訊館 楊國棟

16 插入直式選單圖片 依序插入__37.gif、__39.gif、__40.gif、__41.gif、__44.gif、__55.gif、__56.gif、__57.gif、__58.gif、__59.gif、__60.gif、__66.gif 國立高雄大學-圖書資訊館 楊國棟

17 設定儲存格格式 寬度1 自訂色彩 插入clear.gif圖 寬度1像素 色彩153、153、153 國立高雄大學-圖書資訊館 楊國棟

18 設定儲存格格式 寬度587 水平對齊：靠左 垂直對齊：靠上 寬度1像素 色彩153、153、153 國立高雄大學-圖書資訊館 楊國棟

19 插入表格 插入7X1 寬度585 儲存格與邊框距離設為0 儲存格間距設為0 框線大小設為0 國立高雄大學-圖書資訊館 楊國棟

20 設定儲存格格式 高度3 插入clear.gif（寬度3、高度1） 國立高雄大學-圖書資訊館 楊國棟

21 設定儲存格：置中對齊 插入圖片：__27.gif 國立高雄大學-圖書資訊館 楊國棟

22 插入圖片：__43.gif 國立高雄大學-圖書資訊館 楊國棟

23 插入圖片：clear.guf（寬度18、高度1）
設定儲存格背景顏色：238、238、238 插入圖片：clear.guf（寬度18、高度1） 國立高雄大學-圖書資訊館 楊國棟

24 國立高雄大學-圖書資訊館 楊國棟

25 設定儲存格格式 背景色：238、238、238 插入圖：clear.gif（寬18、高1） 國立高雄大學-圖書資訊館 楊國棟

26 設定儲存格格式 寬度：128 水平：置中 垂直：靠上 背景色：238、238、238 圖片：__47.gif
國立高雄大學-圖書資訊館 楊國棟

27 設定儲存格格式 寬度：13 背景色：238、238、238 插入圖：clear.gif（寬13、高1） 國立高雄大學-圖書資訊館 楊國棟

28 重複上述動作 陸續插入__49.gif、__51.gif、__53.gif 國立高雄大學-圖書資訊館 楊國棟

29 國立高雄大學-圖書資訊館 楊國棟

30 國立高雄大學-圖書資訊館 楊國棟

31 插入表格 表格：1列X3欄 寬度：585 國立高雄大學-圖書資訊館 楊國棟

32 設定儲存格格格式 寬度：8 圖片：clear.gif（寬8、高1） 國立高雄大學-圖書資訊館 楊國棟

33 設定儲存格格式 寬度：134 垂直：靠上 圖片：__68.gif 國立高雄大學-圖書資訊館 楊國棟

34 設定儲存格格式 水平：靠左 垂直：靠上 插入表格：3列X1欄 儲存格與邊框距離設為0 儲存格間距設為0 框線大小設為0
國立高雄大學-圖書資訊館 楊國棟

35 設定儲存格 水平：靠左 垂直：靠上 插入圖片：__69.gif 國立高雄大學-圖書資訊館 楊國棟

36 設定儲存格 高度：8px 插入圖片：clear.gif(寬度1*高度8) 國立高雄大學-圖書資訊館 楊國棟

37 插入表格 1X3 國立高雄大學-圖書資訊館 楊國棟

38 設定儲存格 寬度：17 插入圖片：clear.gif(寬度17、高度1) 國立高雄大學-圖書資訊館 楊國棟

39 設定儲存格 寬度1 背景圖：__75.gif 插入圖片：clear.gif 國立高雄大學-圖書資訊館 楊國棟

40 完成圖 國立高雄大學-圖書資訊館 楊國棟