第六章網(wǎng)站設(shè)計與制作課件

第六章 網(wǎng)站設(shè)計與制作一、本章內(nèi)容框架網(wǎng)站設(shè)計與制作知識內(nèi)容學(xué)生活動6.1網(wǎng)站的規(guī)劃與設(shè)計6.2網(wǎng)站的制作與調(diào)試6.3網(wǎng)站的發(fā)布、維護和評估確定主題資料的收集、篩選和整理網(wǎng)站的布局川網(wǎng)站的制作網(wǎng)站的調(diào)試網(wǎng)站的發(fā)布網(wǎng)站的維護網(wǎng)站的評估實踐體驗：建站資料的收集與整理實踐體驗：網(wǎng)站規(guī)劃綜合探究：網(wǎng)站的設(shè)計與制作實踐體驗：網(wǎng)站的發(fā)布與評估主題確定的原則資料收集的途徑，篩選、整理的步驟網(wǎng)站欄目、板塊、目錄結(jié)構(gòu)、鏈接結(jié)構(gòu)和整體風(fēng)格版面布局形式、色彩規(guī)劃以及網(wǎng)站制作。代碼優(yōu)化、網(wǎng)站測試的內(nèi)容和方法網(wǎng)站發(fā)布的途徑和上傳網(wǎng)站更新、故障排除和網(wǎng)站安全網(wǎng)站評估的指標圖6-1 “網(wǎng)站設(shè)計與制作”內(nèi)容框架圖從本章內(nèi)容框架中我們可以看出，網(wǎng)站的設(shè)計與制作可以分成三個階段，即準備規(guī)劃階段、制作調(diào)試階段和發(fā)布維護階段。本章分別對這三個階段的主要內(nèi)容展開討論，并安排了相應(yīng)的實踐探究活動。在準備規(guī)劃階段，需要重點解決三方面的問題，一是如何確定網(wǎng)站的主題，以及用來確定主題的基本方法；二是收集和整理資料的原則與方法；三是網(wǎng)站總體布局的幾種類型以及各種布局的不同特點。在制作調(diào)試階段，要完成一個主題網(wǎng)站制作的主要工作，并通過調(diào)試確保網(wǎng)站能夠正常運行，這是本章的重點和難點。在發(fā)布維護階段，將主題網(wǎng)站發(fā)布到因特網(wǎng)上，以便讓更多的人能夠訪問，并且通過對網(wǎng)站的日常維護，提高網(wǎng)站的穩(wěn)定性、可靠性。同時，通過對網(wǎng)站的科學(xué)評估，進一步提高主題網(wǎng)站的性能和進行必要的功能擴充，保證主題網(wǎng)站能夠高質(zhì)量地為訪問者提供滿意的服務(wù)。二、 教材分析、難點分析在前幾章學(xué)習(xí)過的知識和技能的基礎(chǔ)上，本章著重學(xué)習(xí)規(guī)劃網(wǎng)站的方法、網(wǎng)站制作的方法、網(wǎng)站發(fā)布的方法。通過實際設(shè)計和制作一個主題網(wǎng)站，靈活運用這些知識和技能，并對制作的網(wǎng)站進行維護和評估。由于主題網(wǎng)站的設(shè)計和制作很難由一個人在很短的時間內(nèi)獨立完成，通過小組合作的方法來完成“網(wǎng)站的設(shè)計制作”是一種較為合適的做法。所以，本章的學(xué)習(xí)主要以小組合作學(xué)習(xí)的方式進行，有必要在開始本章的學(xué)習(xí)任務(wù)前，花些時間來組織每個主題網(wǎng)站的設(shè)計制作合作小組。在每個制作主題網(wǎng)站的合作小組中，應(yīng)該合理搭配，盡量做到異質(zhì)分組，即有意識地將不同性別、不同專長，專長互補的同學(xué)安排在一個小組，前提是這些同學(xué)的興趣愛好基本一致，否則會影響網(wǎng)站主題的確定。一個得到大家共同認可的主題，能把小組成員合作學(xué)習(xí)中的精力匯聚起來。本章的綜合探究活動是本冊教材中綜合探究活動要求最高的一個活動，對同學(xué)的動手能力和思維能力有較強的訓(xùn)練作用，許多內(nèi)容看似比較簡單，教材上的示例沒有給出具體的步驟，但是，其中許多操作都有較高的技能要求，通過這些操作內(nèi)容的實踐，可以加強對學(xué)生綜合能力的培養(yǎng)，從而使學(xué)生的實際操作能力，在前幾章學(xué)習(xí)的基礎(chǔ)上得到進一步的提高和進展。三、 教學(xué)目標通過本章教學(xué)使學(xué)生：1、 掌握規(guī)劃、設(shè)計網(wǎng)站的步驟與方法2、 學(xué)會網(wǎng)站制作的基本技能和技巧3、 學(xué)會網(wǎng)站發(fā)布的基本技能4、 知道管理與評估網(wǎng)站的方法和技能四、 課時分配建議小節(jié)內(nèi)容實踐探究活動課時61網(wǎng)站的規(guī)劃與設(shè)計實踐體驗：建站資料的搜集與整理。實踐體驗：網(wǎng)站規(guī)劃。262網(wǎng)站的制作與調(diào)試綜合探究：網(wǎng)站的設(shè)計與制作。563網(wǎng)站的發(fā)布、維護和評估實踐體驗：網(wǎng)站的發(fā)布與評估。3合計10五、 各節(jié)教學(xué)要求和教學(xué)設(shè)計建議教材6.1節(jié) 網(wǎng)站的規(guī)劃與設(shè)計（一）教學(xué)要求掌握規(guī)劃、設(shè)計網(wǎng)站的基本步驟和方法。（二）教學(xué)設(shè)計建議建議用兩個課時，通過兩個實踐體驗活動，強化同學(xué)對信息來源的多樣性和信息獲取方法的多樣性的認識。重點是讓學(xué)生了解信息獲取方法的多樣性，知道網(wǎng)絡(luò)是獲取信息的一個重要途徑，但通過其他的途徑同樣可以獲取信息。網(wǎng)站主題是一個網(wǎng)站的要素之一，必須予以足夠的重視，可以在教學(xué)中適當(dāng)增加一些實踐體驗活動。比如，可以增加一個討論交流活動“怎樣確定網(wǎng)站主題網(wǎng)站主題的比較與選擇”，通過小組學(xué)習(xí)的方式，從幾個備選的網(wǎng)站主題中，挑選出一個最合適的主題。在活動中，可以要求學(xué)生在因特網(wǎng)上瀏覽與這些主題類似的現(xiàn)有網(wǎng)站，做好分析工作，根據(jù)“人無我有，人有我專，人專我精”的原則，確定好一個網(wǎng)站主題。設(shè)計一個簡單易記，便于聯(lián)想的網(wǎng)站名字，也是一項需要動些腦筋的工作，同樣應(yīng)該避免雷同并要有新意。確定了網(wǎng)站的主題后，小組的各個成員就可以分工進行有關(guān)資料的收集和整理工作。首先，通過各種途徑和方法，盡可能多地收集建站用的資料，并分門別類地存放在相關(guān)的文件夾中。然后，對這些資料進行篩選和整理，找出有用的資料，并對這些資料進行整理。比如，將有些文本資料轉(zhuǎn)換成網(wǎng)頁格式，將有些圖片文件的格式轉(zhuǎn)換成可以在網(wǎng)頁上使用的JPG格式，將有些圖像或聲音文件的格式轉(zhuǎn)換成可以在網(wǎng)上實時播放的流媒體格式等。這些操作大多在信息技術(shù)基礎(chǔ)和多媒體技術(shù)應(yīng)用的教材或教師用書中有詳細的說明，可以指導(dǎo)學(xué)生進行復(fù)習(xí)，并在實踐中加以靈活運用。本節(jié)的內(nèi)容是關(guān)系到網(wǎng)站制作能否成功的第一步。（三） “實踐探究”活動指導(dǎo)1、第一個活動：實踐體驗“建站資料的搜集與整理”活動目的：（1） 掌握資料收集的方法，提高采集資料的能力。（2） 對收集到的資料進行整理，提高資料整理能力?；顒硬襟E：本活動以小組合作的形式進行學(xué)習(xí)，以四位同學(xué)為一組比較合適。（1） 要求每個小組搜集到的資料存放在同一個硬盤的指定文件夾中，并且將這個文件夾與班級中的其他同學(xué)共享，也可以將這些資料上傳到教師機的指定共享文件夾中，或者開設(shè)的文件服務(wù)中，方便與其他同學(xué)的相互交流、學(xué)習(xí)。（2） 小組同學(xué)在充分討論的基礎(chǔ)上，對大家搜集到的資料進行比較、分析，從中篩選出基本符合要求的資料。（3） 各小組選出一位同學(xué)向全班同學(xué)介紹自己小組搜集到的資料，并說明采用這些資料的理由?；顒釉u價：活動后，每位同學(xué)根據(jù)評價表分別進行自我評價，填寫評價量表。除了實踐體驗活動共有的評價指標外，還需要對學(xué)生在這項實踐體驗活動中的表現(xiàn)進行評價。評價指標自我評價活動質(zhì)量網(wǎng)站開發(fā)資料收集活動，質(zhì)優(yōu)量多6分網(wǎng)站開發(fā)資料收集活動，題材不全5分網(wǎng)站開發(fā)資料收集活動，數(shù)量貧乏3分網(wǎng)站開發(fā)資料收集活動，有待努力2分活動質(zhì)量的各個評價指標的標準分別是：“質(zhì)優(yōu)量多”是指收集到的開發(fā)網(wǎng)站的資料的含義與準備開發(fā)的網(wǎng)站主題相一致，并涉及與網(wǎng)站主題相關(guān)的各個方面，資料的種類比較齊備，數(shù)量較多。而且資料質(zhì)量高，能在一定深度與廣度上闡釋主題?！邦}材不全”是指所收集的資料種類不多，只涉及網(wǎng)站主題的某一方面?！皵?shù)量貧乏”是指所收集的資料數(shù)量很少?！坝写Α笔侵杆占馁Y料在數(shù)量和質(zhì)量上，都無法滿足網(wǎng)站建設(shè)對資料的需求，需要進一步提高。2、第二個活動：實踐體驗“網(wǎng)站規(guī)劃”活動目的：（1） 掌握網(wǎng)站欄目劃分的原則。（2） 掌握站點目錄建立的方法。（3） 掌握建立網(wǎng)站的鏈接結(jié)構(gòu)的方法?；顒硬襟E：以小組合作的形式進行本項實踐體驗活動。（1） 小組中的每位同學(xué)經(jīng)過討論、交流，參照示例，共同劃分自己準備建立的網(wǎng)站的欄目名稱，并初步確定每個欄目的主要內(nèi)容。原則上不應(yīng)該照抄教材上示例中的網(wǎng)站主題和欄目名稱。（2） 根據(jù)每個欄目的不同內(nèi)容，參考示例中的目錄設(shè)計方法，設(shè)計網(wǎng)站中的目錄結(jié)構(gòu)，除了圖片文件單獨存放在一個子目錄中外，如果用到了聲音和視頻資料，也要單獨存放在一個子目錄中，便于管理和維護。聲音文件可以存放在Audio目錄中，視頻資料則可以存放在Video目錄中。（3） 使用上一章學(xué)習(xí)過的Dreamweaver軟件中的導(dǎo)航功能，按照每個欄目的目錄結(jié)構(gòu)，建立網(wǎng)站的站點鏈接圖?；顒釉u價：除了實踐體驗活動共有的評價指標外，對每人在實踐體驗活動中的表現(xiàn)還需要按照評價指標進行自我評價。評價指標自我評價活動質(zhì)量網(wǎng)站欄目的劃分合理1分網(wǎng)站欄目的劃分不合理0分網(wǎng)站站點目錄的設(shè)計合理1分網(wǎng)站站點目錄的設(shè)計不合理0分建立網(wǎng)站鏈接結(jié)構(gòu)，熟練正確4分建立網(wǎng)站鏈接結(jié)構(gòu)，較為熟練3分建立網(wǎng)站鏈接結(jié)構(gòu)，基本正確2分建立網(wǎng)站鏈接結(jié)構(gòu)，有待改進1分教材6.2 節(jié) 網(wǎng)站的制作與調(diào)試（一）教學(xué)要求1、 學(xué)會網(wǎng)站制作的基本方法和技巧。2、 學(xué)會網(wǎng)站的基本調(diào)試方法。（二）教學(xué)設(shè)計建議本節(jié)內(nèi)容大約需要安排五個課時才能做完。設(shè)計制作一個精致、美觀的網(wǎng)站首頁，可以吸引網(wǎng)站訪問者的注意力，提高訪問者瀏覽網(wǎng)頁內(nèi)容的興趣，從而最大限度地發(fā)揮網(wǎng)站的作用。本節(jié)內(nèi)容文字描述部分較多，教材中也沒有安排相應(yīng)的活動，在教學(xué)中，如果照本宣科的話，可能無法吸引學(xué)生學(xué)習(xí)的興趣。這部分內(nèi)容應(yīng)該說是比較簡單的，對于大多數(shù)已經(jīng)過信息技術(shù)基礎(chǔ)的高中學(xué)生來說，理解、掌握這些內(nèi)容沒有太大的困難。1、關(guān)于版面布局形式建議以小組學(xué)習(xí)的方式，自學(xué)有關(guān)版面布局形式的有關(guān)內(nèi)容。（1） 每個小組在學(xué)習(xí)有關(guān)教材內(nèi)容的基礎(chǔ)上，理解這些版面布局形式的特征。（2） 每個小組重點研究六種版面布局形式中的一種形式，分別在因特網(wǎng)上查找兩個符合所研究的版面布局形式特征的網(wǎng)站首頁（注意不包括著名的門戶網(wǎng)站），并下載保存查找到的網(wǎng)站首頁。（3） 每個小組在班級中向所有同學(xué)介紹所查找到的網(wǎng)站首頁，并說明這些網(wǎng)站首頁所屬的版面布局形式及特征。特別注意，由于有些版面布局形式國外的網(wǎng)站用得比較多，如果學(xué)生查找有困難，教師可以在課前事先查找并下載一些各種形式的網(wǎng)站首頁，把這些首頁保存在教師機的共享文件夾或文件服務(wù)器上，供學(xué)生從中進行查找，方便教學(xué)，提高學(xué)習(xí)效率。2、關(guān)于頁面色彩規(guī)劃對于頁面色彩的規(guī)劃，同樣可以通過自學(xué)，讓每個小組的同學(xué)分別在因特網(wǎng)上查找一些頁面色彩比較單純（即以一種顏色為主色彩）的網(wǎng)頁，說明使用這些色彩的理由，并分析這些色彩所表達的象征意義是否與相應(yīng)的網(wǎng)站主題相一致。3、關(guān)于網(wǎng)站首頁設(shè)計教材通過一個首頁設(shè)計的示例，介紹了“同”字形布局首頁的制作方法和技巧。雖然，這個示例在下一小節(jié)的綜合探究活動中仍然可以參考使用，但作為本節(jié)的主要學(xué)習(xí)內(nèi)容，通過一個具體的活動來體驗其中的方法和技巧，無疑是非常有意義的。所以，建議大家在教學(xué)中，增加一個實踐體驗活動“網(wǎng)站首頁的設(shè)計制作”。每個小組按照前面確定的網(wǎng)站主題和欄目設(shè)計方案，參照教材示例中的具體方法和步驟，設(shè)計制作網(wǎng)站的首頁。版面布局形式一般以“同”字形較為常見，設(shè)計制作也相對比較簡便。網(wǎng)站中的其他各個欄目的網(wǎng)頁，通過本節(jié)的綜合探究活動“網(wǎng)站的設(shè)計與制作”，由小組各成員分工練習(xí)完成。4、關(guān)于網(wǎng)站測試為了保證所制作的主題網(wǎng)站鏈接的正確，必須對網(wǎng)站的鏈接準確性進行認真的測試。建議大家將所要測試的網(wǎng)站所在的文件夾包括所有的文件和子文件夾，復(fù)制到另一個不同的文件夾中，然后進行測試。這樣可以防止因為在鏈接中使用絕對路徑造成在本地計算機測試完全正確，而上傳到因特網(wǎng)后無法正確鏈接的情況發(fā)生。（三） “實踐探究”活動指導(dǎo)綜合探究“網(wǎng)站的設(shè)計與制作”活動目的：（1） 掌握網(wǎng)站設(shè)計與制作的基本方法。（2） 掌握一定的網(wǎng)站設(shè)計與制作技巧?；顒硬襟E：（1） 建議本活動的第一個步驟的學(xué)習(xí)內(nèi)容放在上一小節(jié)進行，即學(xué)習(xí)了網(wǎng)站首頁的設(shè)計方法后，按照本活動第一步驟的內(nèi)容，設(shè)計本小組準備制作的網(wǎng)站的首頁布局，規(guī)劃頁面的各個功能模塊，并對頁面各個功能模塊的內(nèi)容按照網(wǎng)站制作的實際要求進行認真規(guī)劃，使之具有可行性。（2） 針對網(wǎng)站的各個功能模塊，在小組內(nèi)進行分工，每位同學(xué)負責(zé)一個功能模塊的制作，并合成為一個完整的網(wǎng)站。可以使用FrontPage 2000/XP、Dreamweaver等網(wǎng)站制作軟件。（3） 重點對制作好的網(wǎng)站進行測試。主要測試兩方面的內(nèi)容，一是鏈接有效性的測試，不能有錯誤的鏈接，如果有錯誤的鏈接，必須查明原因，并采取與之相適應(yīng)的措施，加以修改，保證網(wǎng)站內(nèi)容能被正常訪問。二是不同分辨率的測試，將屏幕的分辨率依次設(shè)置為800*600和1024*768，分別進行網(wǎng)站瀏覽，找出其中頁面不對齊、表格錯位、文字混亂等問題，并加以調(diào)整解決?；顒釉u價：除了綜合探究活動的常規(guī)評價指標外，特別對“網(wǎng)站設(shè)計與制作的活動質(zhì)量”進行了專門的評價。評價指標自我評價活動質(zhì)量制作主題網(wǎng)站，合理美觀6分制作主題網(wǎng)站，布局合理5分制作主題網(wǎng)站，布局簡單3分制作主題網(wǎng)站，還需規(guī)劃2分網(wǎng)站設(shè)計與制作的活動質(zhì)量的各個評價指標的標準分別是：“合理美觀”是指所制作的網(wǎng)站布局合理、功能齊全，并且色彩搭配和諧，整體感覺美觀大方，易于吸引訪問者的注意力?！安季趾侠怼笔侵杆谱鞯木W(wǎng)站布局合理、功能較為完備，能夠充分表達網(wǎng)站主題。“布局簡單”是指所制作的網(wǎng)站布局簡單、功能單一，但能滿足網(wǎng)站的基本要求?！斑€需規(guī)劃”是指所制作的網(wǎng)站布局無序，無法實現(xiàn)網(wǎng)站的基本功能，需要重新加以設(shè)計、制作。教材6.3節(jié) 網(wǎng)站的發(fā)布、維護和評估（一）教學(xué)要求1、 學(xué)會網(wǎng)站發(fā)布的基本技能和技巧。2、 掌握網(wǎng)站維護的基本方法和技能。3、 懂得評估網(wǎng)站的一般方法和技能。（二）教學(xué)設(shè)計建議本節(jié)安排四個課時。制作網(wǎng)站的目的不是為了孤芳自賞，而是為了能讓更多的人分享自己的成果和心得，所以，主題網(wǎng)站制作完成后，應(yīng)該將其發(fā)布到因特網(wǎng)上，以便讓大家能夠通過因特網(wǎng)，在任何時間、任何地點都能訪問這些網(wǎng)站，獲得本網(wǎng)站提供的信息。1、關(guān)于網(wǎng)站的發(fā)布。目前，提供免費個人網(wǎng)站空間服務(wù)的網(wǎng)站變化較快，所以在教學(xué)中可以通過因特網(wǎng)查找一些當(dāng)時仍然提供免費網(wǎng)站空間服務(wù)的網(wǎng)站，供教學(xué)中使用，也可以讓學(xué)生自己查找。如果條件不允許，無法在因特網(wǎng)上申請到免費網(wǎng)站空間，或沒有條件購買收費的空間，那么，就應(yīng)該在學(xué)校服務(wù)器上安裝FTP服務(wù)功能，讓同學(xué)們將制作完成的主題網(wǎng)站上傳到學(xué)校的服務(wù)器上，供大家在校園網(wǎng)內(nèi)瀏覽。如果學(xué)校通過光纜或?qū)拵Ы尤胍蛱鼐W(wǎng)，也可以將該服務(wù)器的IP地址設(shè)置成因特網(wǎng)地址，這樣，因特網(wǎng)上的用戶就能訪問到同學(xué)們制作的主題網(wǎng)站，大家在家中通過上網(wǎng)也能訪問自己的網(wǎng)站了。常用的網(wǎng)站上傳方式，教材中介紹了“在線方式上傳”、“網(wǎng)頁制作工具的上傳功能”以及“FTP專用工具”等三種方式。其實，還有一種簡便的上傳方式，對于支持FTP功能的免費網(wǎng)站空間而言，直接用瀏覽器的FTP訪問功能，使用FTP命令，也能方便地上傳網(wǎng)站而不必使用專門的軟件工具。在瀏覽器的地址欄中輸入形如“ftp:/網(wǎng)站上傳地址”的URL，在輸入用戶名和口令后，就能用瀏覽器訪問服務(wù)器上相應(yīng)目錄內(nèi)的所有目錄和文件。然后，就可以象在本地計算機上操作一樣，進行復(fù)制、刪除、改名等文件操作。只要把主題網(wǎng)站目錄中的所有文件包括文件夾等復(fù)制到相應(yīng)的目錄中，就能完成上傳網(wǎng)站的工作。圖6-2 運用瀏覽器的FTP訪問功能中“登錄身份”窗口圖如圖6-2所示，在瀏覽器的地址欄中輸入“15”并按回車后，在出現(xiàn)的“登錄身份”窗口中，輸入用戶名和密碼后，就能進行文件操作。除此之外，使用FTP命令也能上傳網(wǎng)站，具體命令格式在教材第三章第四節(jié)中有具體介紹。當(dāng)然，用這種方法上傳網(wǎng)站速度較慢，也不支持斷點續(xù)傳、同步更新等功能，比較適合于少量文件上傳的情況，一般情況下，應(yīng)該使用專門的FTP軟件來進行網(wǎng)站上傳。有條件的學(xué)?？梢栽谝蛱鼐W(wǎng)上注冊一個域名，或者免費申請一個網(wǎng)易域名轉(zhuǎn)向服務(wù)的賬號（“”），并將域名指向自己制作的主題網(wǎng)站的地址。也可以使用“花生殼”免費動態(tài)域名解析服務(wù)（），只要自己的計算機接入因特網(wǎng)，就能將自己的計算機變成服務(wù)器，供大家通過因特網(wǎng)來訪問。2、關(guān)于網(wǎng)站的評估在網(wǎng)站的評估標準中，可以通過試用多個瀏覽器訪問被測網(wǎng)站作為評價兼容性的標準。搜索引擎上出現(xiàn)率，通過使用幾個常用的搜索引擎對同一個網(wǎng)站名稱進行檢索，比較不同網(wǎng)站的出現(xiàn)次數(shù)，即可知道哪一個網(wǎng)站出現(xiàn)率高。站點速度的評估，一種方法是自己用瀏覽器分別訪問被測網(wǎng)站，記錄這些網(wǎng)站的首頁全部打開所花費的時間，并加以比較。另一種方法是使用專門的網(wǎng)站速度測試軟件進行較精確的測試，這類測試軟件一般都是免費或共享的軟件，可以從因特網(wǎng)上免費下載。被鏈