学校网页建置研习讲义

1、學校網頁建置研習講義”李帆”老師的網頁製作教學 建置網站基本技能與規範 一、 面板設計.1.1設計解析度常見的螢幕解析度如下15 吋-原生解析度為 1024*768， 畫面為 4:317 吋與 19 吋-原生解析度為 1280*1024，畫面為 5:419 吋寬-原生解析度為 1440*900， 畫面為 16:1020 吋-原生解析度為 1600*1200，畫面為 4:320 吋寬螢幕-原生解析度為 1680*1050，畫面為 16:1021 吋-原生解析度為 1600*1200，畫面為 4:321 吋寬螢幕-原生解析度為 1680*1050，畫面為 16:1022 吋寬螢幕-原生解析度為 1

2、680*1050，畫面為 16:1023 吋-原生解析度為 1600*1200，畫面為 4:324 吋寬螢幕-原生解析度為 1920*1280，畫面為 16:1027 吋寬螢幕-原生解析度為 1920*1280，畫面為 16:1030 吋寬螢幕-原生解析度為 2560*1600，畫面為 16:101.2字體系統網頁字體大小注意事項不要使用超過 3 種以上的字體，因為字體太多會顯得沒有重點與主題。不要使用不停閃爍的文字，想讓瀏覽者多停留的話，就不要使用閃爍的文字。若訪客大部分是長者或弱視人士，加入一個可調整字體大小的 CSS 的按鈕。文字和底色的顏色反差應該儘量增大，要使用高反差的顏色。1.2顏

3、色系統網頁配色注意事項暖色調。即紅色、橙色、黃色、赭色等色彩的搭配。這種色調的運用，可使主頁呈現溫馨、和煦、熱情的氛圍。冷色調。即青色、綠色、紫色等色彩的搭配。這種色調的運用，可使主頁呈現寧靜、清涼、高雅的氛圍。對比色調。即把色性完全相反的色彩搭配在同一個空間裏。網頁配色範例http:/color.eweb-二、 開發環境2.1網站測試機台軟體環境系統版本作業系統Windows XP SP2Web ServerIIS 5.1處理器Intel Celeron CPU 2.8GHz記憶體512MB DDR ROMDreamweaverCS3Sharepoint20072.2網站教學範本下載研習網頁

4、範本下載專區File資源分享01教務處電算中心資訊種子教師研習製作網頁軟體取得專區File資源分享01教務處電算中心資訊種子教師研習三、 Dreamweaver操作使用說明3.1常用超連結電子郵件連結命名錨點表格插入Div標籤影像媒體日期3.2版面插入Div標籤繪製AP DivIFRAME頁框四、 網頁範例修該方式說明4.1檔案結構4.1-1樹狀結構4.1-2檔案名稱對照表index.html教學研究會首頁01default.htm教學目標首頁02default.htm師資介紹首頁03default.htm相關活動首頁04default.htm教學資源首頁05default.htm教學觀察首頁images存放教學研究會首頁圖檔4.2更改首頁文字..1上方連結 待學校首頁完成再行添加連結4.2.2教學研究會標題 請將”XX”更改為自己的教學研究會名稱4.2.3下方版權宣告 待校長決議統一格式後再行更改4.3建立內頁文件教學目標首頁師資介紹首頁相關活動首頁教學觀察首頁教學觀察首頁個別開啟編修網頁內容、加入資料並超連結文件五、 開發環境觀看網頁成果專區http:/上傳網頁成果位置ftp:/上傳帳號上傳密碼FTP軟體File資源分享01教務處電算中心資訊