國立高雄大學 - 圖書資訊館楊國棟 [email protected] 網頁製作基本功....

國立高雄大學 - 圖書資訊館楊國棟[email protected]

網頁製作基本功


什麼是網站• 網頁的集合（好難？聽不懂）

– 一堆網頁，許多網頁• 網站管理者

– 規劃、建置網頁伺服器• 網頁設計者

– 設計、製作各網頁，讓網頁間彼此連結


架設網站的步驟• Setp1 訂定主題與架構

– 商業類、教育類、個人網站 .....– 網站包含哪些內容、如何呈現

• Step2 蒐集資料– 內容豐富、分類明確的網站，會比光彩炫目的網站更吸引人

• Step3 網頁製作– 利用各種工具，將蒐集的資料，做成網頁。並將各網頁間做連結

• Step4 網頁上傳– 個人電腦：其他人無法瀏覽網頁– Web 伺服器：可供其他人無法瀏覽網頁

• Step5 網頁更新– 不斷更新內容的網站，才能吸引人再次光臨


今日主題• 框架頁• 目錄選單• 超連結


框架頁• 檔案→開新檔案→其他網頁範本→框架

頁


消除框線• 滑鼠右鍵→框架內容→框架頁

– 取消顯示框線


新增網頁• 重新設計一新的網頁


另存新檔• 使所設計的檔案當在同一目錄下


橫幅選單 -插入表格• 插入一 2 列 1 欄的表格


橫幅選單 -插入互動式按鈕• 插入→互動式按鈕• 選擇浮凸索引標籤 9

• 輸入文字：高大首頁• 輸入連結： http://www.nuk.edu.tw


橫幅選單 -插入互動式按鈕• 重複上述動作• 文字：認識高大• 連結： http://sec.nuk.edu.tw/~nukpublic/intro/intro.htm


橫幅選單 -插入互動式按鈕• 重複上述動作• 文字：行政單位• 連結： http://www.nuk.edu.tw/administration.php


橫幅選單 -插入互動式按鈕• 重複上述動作• 文字：教學單位• 連結： http://www.nuk.edu.tw/

teaching.php


橫幅選單 -插入互動式按鈕• 重複上述動作• 文字：研究中心• 連結： http://www.nuk.edu.tw/

research.php


橫幅選單 -儲存格設定• 設定儲存格背景顏色• 插入 clear.gif 圖


直式選單 -另開一新檔• 檔案→開新檔案→空白網頁• 另存新檔


直式選單 -插入表格• 插入一 5 列 3 欄，寬度 100px 的表格


直式選單 -格式化表格• 合併儲存格• 設定儲存格背景色

– 深： 198 、 177 、 141– 淺： 158 、 138 、 100

• 插入 Clear.gif 圖• 設定儲存格寬度• 設定置中對齊• 設定列高


直式選單 -增加效果• 將onmouseover="this.style.backgroundColor='#99999

9';" onmouseout="this.style.backgroundColor='';“• 插入<td align=“center“ 這裡 bgcolor="#C0C0C0">


直式選單 -增加超連結• 選取超連結文字• 滑鼠右鍵→超連結 or 插入→超連結• 輸入網址、提示文字


直式選單 -超連結加工• 如何消除底線

– 滑鼠右鍵→超連結→樣式→– 格式→字型→勾選無文字裝飾

• 改變超連結文字顏色– 滑鼠右鍵→超連結→樣式→– 格式→字型→色彩


設定初始網頁• 載入一已設計好的網頁• 按設定初始網頁→選擇檔案→確定

國立高雄大學 - 圖書資訊館 楊國棟 [email protected] 網頁製作 基本功....

Documents

國立高雄大學 - 圖書資訊館楊國棟 [email protected] 網頁製作基本功....