網頁製作 step by step
Post on 29-Jan-2016
38 Views
Preview:
DESCRIPTION
TRANSCRIPT
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
網頁製作Step By Step
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
開新檔案• 檔案→開新檔案→空白網頁
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
儲存檔案• 檔案→另存新檔→輸入檔名
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
利用表格 -排版• 表格→插入→表格
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
插入 Logo圖• 插入→圖片→從檔案
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
插入間隔圖• 插入→圖片→從檔案( clear.gif )• 選取圖片→滑鼠右鍵→圖片內容• 設定寬度為 207 像素,高度為 1 像素
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
插入功能圖• 陸續插入 __04.gif~__07.gif 等圖片
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格背景圖• 選取儲存格→滑鼠右鍵→儲存格內容• 使用背景圖片( __17.gif )• 水平對齊方式:靠左• 垂直對齊方式:中
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
插入橫式選項圖• 陸續插入 __08.gif~__14.gif 圖
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格背景色• 選擇儲存格→儲存格內容→背景→色彩• 選擇自訂色彩→紅、綠、藍皆設定 153
• 插入圖片( clear.gif )
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
預備直式選單• 插入表格( 1X3 )
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
• 設定儲存格寬度
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
插入表格• 插入表格( 2X1 )
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格內容• 高度 2
• 插入 clear.gif 圖(寬 164 、高 15 )
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格內容• 寬度 164
• 水平對齊:置中• 垂直對齊:上
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
插入直式選單圖片• 依序插入 __37.gif 、 __39.gif 、 __40.gif 、
__41.gif 、 __44.gif 、 __55.gif 、 __56.gif 、 __57.gif 、 __58.gif 、 __59.gif 、 __60.gif 、 __66.gif
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格格式• 寬度 1
• 自訂色彩• 插入 clear.gif 圖
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格格式• 寬度 587
• 水平對齊:靠左• 垂直對齊:靠上
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
插入表格• 插入 7X1
• 寬度 585
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格格式• 高度 3
• 插入 clear.gif (寬度 3 、高度 1 )
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
• 設定儲存格:置中對齊• 插入圖片: __27.gif
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
• 插入圖片: __43.gif
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
• 設定儲存格背景顏色: 238 、 238 、 238
• 插入圖片: clear.guf (寬度 18 、高度1 )
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格格式• 背景色: 238 、 238 、 238
• 插入圖: clear.gif (寬 18 、高 1 )
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格格式• 寬度: 128
• 水平:置中• 垂直:靠上• 背景色: 238 、 238 、 238
• 圖片: __47.gif
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格格式• 寬度: 13
• 背景色: 238 、 238 、 238
• 插入圖: clear.gif (寬 13 、高 1 )
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
重複上述動作• 陸續插入 __49.gif 、 __51.gif 、 __53.gif
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
插入表格• 表格: 1 列 X3 欄• 寬度: 585
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格格格式• 寬度: 8
• 圖片: clear.gif (寬 8 、高 1 )
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格格式• 寬度: 134
• 垂直:靠上• 圖片: __68.gif
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格格式• 水平:靠左• 垂直:靠上• 插入表格: 3 列 X1 欄
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格• 水平:靠左• 垂直:靠上• 插入圖片: __69.gif
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格• 高度: 8px
• 插入圖片: clear.gif( 寬度 1* 高度 8)
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
插入表格• 1X3
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格• 寬度: 17
• 插入圖片: clear.gif( 寬度 17 、高度 1)
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
設定儲存格• 寬度 1
• 背景圖: __75.gif
• 插入圖片: clear.gif
國立高雄大學 - 圖書資訊館 楊國棟kdyang@nuk.edu.tw
完成圖
top related