網(wǎng)頁設計與制作第十二章

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