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

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