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

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