網頁製作 Step By Step
description
Transcript of 網頁製作 Step By Step
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
網頁製作Step By Step
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
開新檔案• 檔案→開新檔案→空白網頁
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
儲存檔案• 檔案→另存新檔→輸入檔名
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
利用表格 -排版• 表格→插入→表格
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
插入 Logo圖• 插入→圖片→從檔案
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
插入間隔圖• 插入→圖片→從檔案( clear.gif )• 選取圖片→滑鼠右鍵→圖片內容• 設定寬度為 207 像素,高度為 1 像素
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
插入功能圖• 陸續插入 __04.gif~__07.gif 等圖片
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
設定儲存格背景圖• 選取儲存格→滑鼠右鍵→儲存格內容• 使用背景圖片( __17.gif )• 水平對齊方式:靠左• 垂直對齊方式:中
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
插入橫式選項圖• 陸續插入 __08.gif~__14.gif 圖
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
設定儲存格背景色• 選擇儲存格→儲存格內容→背景→色彩• 選擇自訂色彩→紅、綠、藍皆設定 153
• 插入圖片( clear.gif )
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
預備直式選單• 插入表格( 1X3 )
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
• 設定儲存格寬度
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
插入表格• 插入表格( 2X1 )
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
插入直式選單圖片• 依序插入 __37.gif 、 __39.gif 、 __40.gif 、
__41.gif 、 __44.gif 、 __55.gif 、 __56.gif 、 __57.gif 、 __58.gif 、 __59.gif 、 __60.gif 、 __66.gif
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
• 設定儲存格:置中對齊• 插入圖片: __27.gif
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
• 插入圖片: __43.gif
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
設定儲存格格式• 寬度: 128
• 水平:置中• 垂直:靠上• 背景色: 238 、 238 、 238
• 圖片: __47.gif
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
設定儲存格格式• 寬度: 13
• 背景色: 238 、 238 、 238
• 插入圖: clear.gif (寬 13 、高 1 )
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
重複上述動作• 陸續插入 __49.gif 、 __51.gif 、 __53.gif
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
插入表格• 表格: 1 列 X3 欄• 寬度: 585
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
設定儲存格格式• 水平:靠左• 垂直:靠上• 插入表格: 3 列 X1 欄
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
設定儲存格• 水平:靠左• 垂直:靠上• 插入圖片: __69.gif
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
插入表格• 1X3
國立高雄大學 - 圖書資訊館 楊國棟[email protected]
完成圖