12網站制作實例——學校網站制作12.1教育門戶網站12.2建立教育網站的原則12.3學校網站制作過程12.1教育門戶網站（1）教育門戶網站的發展背景以前只有極少數教育機構擁有自己的網站，比如大學、重點高中，而大部分中學與小學都沒有自己的網站。隨著網絡的發展，越來越多的教育機構開始建立自己的網站，不但大學有網站，也有相當一部分中學和小學開始建立自己的網站。建立網站的教育機構通過網站給自己帶來了極大的便利，不但可以把學校名聲推廣出去，更重要的是使校內的師生能有一個很好的互動平臺，并且學生可以通過網站自由下載課件與電子教材。（2）教育門戶網站的意義①學校網站是學校在網絡上的外在表現。現在網絡非常流行，學校網站已經開始成為傳播學校信息與名聲的主流方式。②學校存在著大量的教育資源，校內的學生對這些資源有著極大的需求。教育門戶網站完全可以充當一個資源供給與需求的平臺，可集全社會的力量，使教育資源無限增長。③學校網站能提供教學互動的全新方式，不再受到傳統課堂的制約。它可以使天南地北、城市與鄉村的學生同處一室，共同討論與共享。地理上的界限在這里模糊和消失了，學校網站是真正沒有圍墻的學校。④學校網站能夠提供個性化學習的平臺。不同的學生理解世界的方式各不相同，認知世界有諸多方式。網絡提供的豐富資源可以使學生尋覓不同的教育方式，各取所需。學校網站允許不同的學生沿著自己的途徑、按自己的速度接受教育與學習，學生將有機會享受最佳的教育，充分發掘自己的內在潛力，培植獨特的個性和人格。⑤學校網站是最佳的教學研究室。學校網站與教育類專門網站的有效鏈接，給學校教學研究帶來了一片新天地。各種優秀教案、專家論壇、網絡觀摩課、各科素材、多媒體課件制作等內容為教師的教研提供了極佳的平臺，有效地降低了教研成本，提高了教研效率。12.2建立教育網站的原則網頁設計不僅涉及各種軟件的操作技術，還關聯到設計者對生活的理解和體驗。網頁設計就是要把合適的信息傳達給合適的觀眾。要設計出一個既好看又實用的網頁，就必須遵循一些必要的原則。（1）頁面的統一、連貫、和諧一個精美的網頁必須擁有良好的整體統一效果；網頁的連貫是指頁面中各部分的相互關系；網頁的和諧是指整個頁面符合美學法則。（2）較快的下載速度良好的下載速度是一個優秀網頁所必備的條件。在目前的技術條件下，保持網頁較快下載速度的主要方法是讓頁面簡潔，避免使用大量圖片，以及取消自動下載的音樂和媒體素材。（3）網頁鏈接無誤如果鏈接錯誤，訪問者將無法獲取所需的信息，因此，網頁鏈接無誤是網頁設計的最基本原則。（4）兼容性不同的瀏覽器和分辨率，網頁的顯示效果會有較大的區別。因此在設計頁面時，要充分考慮不同瀏覽器的要求，在發布之前，最好能用不同的瀏覽器進行測試。12.3學校網站制作過程下面以學校網站為例，來說明網站的制作過程。（1）網站規劃在制作網頁之前，先對學校網站進行分析，針對每一個欄目進行設計和頁面規劃，然后用筆畫一個網站的框架，顯示出所有網頁的相互關系。（2）創建站點創建合適的站點目錄，廣泛收集與選題有關的素材，并分門別類地存放在各級子目錄下。（3）頁面制作①制作主頁。主頁是一個網站的核心，其設計的優劣關系到網站能否吸引訪問者的目光。主頁中包含了網站的主要內容介紹，以及指向各個頁面的鏈接，。在主頁制作完成后，可以將其頁面風格固定的部分另存為模板，從而可以應用該模板創建其他風格相同的子頁面。簡要操作步驟如下：a．準備好網站中網頁所需的相關素材。b．啟動DreamweaverCS6，新建一個“生機職院”站點，如圖所示。c．在站點中建立一個“images”文件夾，網頁圖片將存放在該文件夾中。d．設置頁面屬性參數，如圖所示。e．插入表格，設置相關參數如圖所示。f．設置表格居中對齊，如圖所示。g．在表格第一行插入圖片。插入圖片時如果彈出如圖所示的對話框，請選擇【是】，將圖片保存到站點的“images”文件夾中。h．在表格第一行插入1行，2列的表格，寬度100%，并輸入相關欄目文字。i．在表格第二行插入圖片（760*120），如圖12-9所示。插入圖片如果彈出如下對話框時，請回答“是”，將圖片保存到站點的images中。j．將表格第三行插入一個1行，10列的表格，寬度100%，，并輸入相關欄目文字，。k．在第五行插入一個2行3列的表格，并輸入相關文字，l．將表格第四行拆分成2列，左列插入圖片（390*280），右列插入1列12行的表格，寬度100%，并輸入相關欄目文字m．將表格第五行拆分成兩列，左列插入1列11行的表格，寬度100%，右列插入1列11行的表格，寬度100%，并輸入相關欄目文字n．第六行插入相關圖片，并設置圖片大小有（190*90）。o．第七行輸入相關文字，第八行插入2行5列的表格，寬度100%，并輸入相關欄目文字。p．第九行插入1行3列的表格，寬度100%，其中第二列再插入2行3列的表格，寬度100%，并輸入相關欄目文字及圖片。q.第十行輸入相關文字與圖片，并居中對齊r.選中相關表格，并把邊框設為0s.最后分別設置相關CSS樣式，第一行：背景顏色：#2D7ED8,字體顏色：#FFF第三行：背景顏色：#1C8450,字體顏色：#FFF第四、五、七行：標題字體大小：15px顏色：#1C8450第九行：背景顏色：#1C8450,字體顏色：#FFF第十行：背景顏色：#00622D，字體大小：13px,