《網(wǎng)頁(yè)設(shè)計(jì)與制作》綜合實(shí)訓(xùn)指導(dǎo)書(shū)_8121

1、網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)指導(dǎo)書(shū)1.1實(shí)訓(xùn)意義網(wǎng)頁(yè)設(shè)計(jì)與制作綜合實(shí)訓(xùn)是教學(xué)過(guò)程中重要的實(shí)踐性教學(xué)環(huán)節(jié)。它是根據(jù)專(zhuān)業(yè)教學(xué)計(jì)劃的要求， 在教師指導(dǎo)下對(duì)學(xué)生進(jìn)行的網(wǎng)頁(yè)制作專(zhuān)業(yè)技能的訓(xùn)練，培養(yǎng)學(xué)生綜合運(yùn)用理論知識(shí)分析和解決實(shí)際問(wèn)題的能力，實(shí)現(xiàn)由理論知識(shí)向操作技能的轉(zhuǎn)化，是對(duì)理論與實(shí)踐教學(xué)效果的檢驗(yàn)，也是對(duì)學(xué)生綜合分析能力與獨(dú)立工作能力的培養(yǎng)過(guò)程。因此，加強(qiáng)實(shí)踐教學(xué)環(huán)節(jié)，搞好實(shí)訓(xùn)教學(xué)，對(duì)實(shí)現(xiàn)本專(zhuān)業(yè)的培養(yǎng)目標(biāo)，提高學(xué)生的綜合素有著重要的作用。1.2實(shí)訓(xùn)目的1通過(guò)綜合實(shí)訓(xùn)進(jìn)一步鞏固、深化和擴(kuò)展學(xué)生的理論知識(shí)與專(zhuān)業(yè)技能。1) 掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu)、目錄結(jié)構(gòu)、鏈接結(jié)構(gòu)的方法。2) 熟練掌握網(wǎng)頁(yè)制作軟件 Dream

2、weaver CS4 的基本操作和使用技能。3) 掌握頁(yè)面的整體控制和頭部?jī)?nèi)容設(shè)置的方法。4) 熟練掌握網(wǎng)頁(yè)頁(yè)面布局的各種方法。5) 熟練掌握在網(wǎng)頁(yè)中輸入、設(shè)置標(biāo)題和正文文字的方法。6)熟練掌握用 Photoshop 制作和處理網(wǎng)頁(yè)的圖片素材，用Flash 制作動(dòng)畫(huà)的方法。7)熟練掌握在網(wǎng)頁(yè)中插入圖像、flash 動(dòng)畫(huà)、背景音樂(lè)的方法。8) 掌握建立各種形式超級(jí)鏈接的方法。9) 掌握表單網(wǎng)頁(yè)制作方法。10) 掌握網(wǎng)頁(yè)特效的制作方法。11) 掌握網(wǎng)站測(cè)試的方法。2訓(xùn)練和培養(yǎng)學(xué)生獲取信息和處理信息的能力，充分培養(yǎng)和提高學(xué)生的動(dòng)手能力，學(xué)會(huì)通過(guò)網(wǎng)站、書(shū)籍、素材光盤(pán)等方式收集所需的文字資料、圖像資料、

3、網(wǎng)頁(yè)特效等。3培養(yǎng)學(xué)生運(yùn)用所學(xué)的理論知識(shí)和技能解決網(wǎng)站開(kāi)發(fā)過(guò)程中所遇到的實(shí)際問(wèn)題的能力及其基本工作素質(zhì)。4培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的工作作風(fēng)、嚴(yán)肅認(rèn)真的科學(xué)態(tài)度以及獨(dú)立工作的能力，樹(shù)立自信心。5訓(xùn)練和培養(yǎng)團(tuán)隊(duì)協(xié)作精神和共同開(kāi)發(fā)網(wǎng)站的綜合能力。1.3實(shí)訓(xùn)要求1動(dòng)手制作網(wǎng)頁(yè)之前：1) 必須認(rèn)真做好網(wǎng)站的需求分析， 包括市場(chǎng)調(diào)查， 定位網(wǎng)站目的， 策劃好網(wǎng)站的主題及功能定位，創(chuàng)意出網(wǎng)站的風(fēng)格和亮點(diǎn)，確定網(wǎng)頁(yè)色彩基調(diào)。2) 規(guī)劃好網(wǎng)站的風(fēng)格和結(jié)構(gòu)，網(wǎng)站主要內(nèi)容及板塊，各板塊的具體內(nèi)容及功能。做出“網(wǎng)站層次結(jié)構(gòu)圖”參照附表 1-1 以及“網(wǎng)頁(yè)版面設(shè)計(jì)圖”參照附表 1-2。3) 根據(jù)指定的網(wǎng)站主題書(shū)編寫(xiě) *

4、網(wǎng)站策劃書(shū)參照附表 1-3。2創(chuàng)建完善的目錄結(jié)構(gòu)。站點(diǎn)文件夾為班級(jí)學(xué)號(hào)組號(hào)(如： 11 應(yīng)用（ 01）班 01 組 )站點(diǎn)文件夾中所包含文件夾：Images （存放圖片文件）Swf （存放動(dòng)畫(huà)文件）Templates（存放模版文件）Library（存放庫(kù)文件）other （存放其它文件）源文件（存放自己設(shè)計(jì)的圖形、動(dòng)畫(huà)文件）其余視文件夾需要而添加，全部用英文命名站點(diǎn)文件夾中所包含文件：index.html （首頁(yè)）*.css （樣式表文件）其余文件名視需要而添加，全部用英文命名( 各組將站點(diǎn)文件夾壓縮上交，壓縮文件不要超過(guò)20M ，大的影音文件不要放在壓縮在文件里)3制作網(wǎng)頁(yè)前，收集好所需的文

5、字資料、圖像資料、網(wǎng)頁(yè)特效。用Photoshop 制作和處理網(wǎng)頁(yè)所需的圖片、用Flash 制作網(wǎng)頁(yè)所需的動(dòng)畫(huà)。主要圖片和動(dòng)畫(huà)為原創(chuàng)（保存有源文件），主頁(yè)標(biāo)題圖片（動(dòng)畫(huà)）必須為原創(chuàng)。4所創(chuàng)建的網(wǎng)站至少包括8 個(gè)以上頁(yè)面，分為三層，第一層為首頁(yè)，第二層為4 個(gè)二級(jí)子頁(yè)，第三層為2-3個(gè)內(nèi)容頁(yè)。網(wǎng)頁(yè)中必須要用到CSS 以及DIV技術(shù)實(shí)現(xiàn)網(wǎng)頁(yè)元素的修飾及布局。網(wǎng)站頁(yè)面大小應(yīng)該滿(mǎn)足至少800*600分辨率。1) 首頁(yè)采用表格或 CSS+DIV 進(jìn)行布局，必須包含導(dǎo)航欄，顯示時(shí)間特效；2) 4 個(gè)二級(jí)子頁(yè)分別為框架網(wǎng)頁(yè)、表單網(wǎng)頁(yè)，并有進(jìn)行表單驗(yàn)證及提交的程序、利用模板制作的網(wǎng)頁(yè)、利用布局表格制作的網(wǎng)頁(yè)。3

6、) 內(nèi)容頁(yè)分別為表格或 CSS+DIV 布局的網(wǎng)頁(yè)。4)網(wǎng)站頁(yè)面中特效要求利用Javascrip 腳本語(yǔ)言 +CSS+DIV實(shí)現(xiàn)包含至少使用任何1種以上特殊效果：滾動(dòng)字幕和圖片、flash 按鈕、浮動(dòng)廣告、特效菜單等。應(yīng)用JavaScript 制作特效的網(wǎng)頁(yè)、應(yīng)用行為制作特效的網(wǎng)頁(yè)。5) 各個(gè)頁(yè)面根據(jù)需要插入合適的圖像和Falsh 動(dòng)畫(huà)，首頁(yè)要求插入背景音樂(lè)。6) 所有頁(yè)面要求內(nèi)容充實(shí)、布局合理、顏色搭配協(xié)調(diào)、美觀大方。7) 各個(gè)頁(yè)面之間導(dǎo)航清晰、鏈接準(zhǔn)確無(wú)誤。5網(wǎng)頁(yè)的版面尺寸應(yīng)用符合網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范，網(wǎng)站中所有文件、文件夾的命名應(yīng)規(guī)范，盡量做到字母數(shù)量少，見(jiàn)名知意、容易理解。6實(shí)訓(xùn)過(guò)程中既要虛

7、心接受老師的指導(dǎo)，又要充分發(fā)揮主觀能動(dòng)性、獨(dú)立思考、努力鉆研、勤于實(shí)踐、勇于創(chuàng)新。7在設(shè)計(jì)過(guò)程中，要嚴(yán)格要求自己，樹(shù)立嚴(yán)密、嚴(yán)謹(jǐn)?shù)目茖W(xué)態(tài)度，必須按時(shí)、保質(zhì)、保量完成實(shí)訓(xùn)任務(wù)。要求獨(dú)立完成規(guī)定的實(shí)訓(xùn)內(nèi)容，不得弄虛作假， 不準(zhǔn)抄襲或拷貝他人的網(wǎng)頁(yè)或其他內(nèi)容。8小組成員之間，既要分工明確，又要密切合作，培養(yǎng)良好的互助、協(xié)作精神。9實(shí)訓(xùn)期間，嚴(yán)格遵守學(xué)校的規(guī)章制度，不得遲到、早退、曠課。缺課節(jié)數(shù)達(dá)三分之一以上者，實(shí)訓(xùn)成績(jī)按不及格處理。10實(shí)訓(xùn)環(huán)境為Windows XP 及以上版本的操作系統(tǒng)，網(wǎng)頁(yè)制作軟件為Dreamweaver CS4 ，要可以運(yùn)用Photoshop 制作和處理圖像，運(yùn)用Flash 制

8、作動(dòng)畫(huà)。1.4實(shí)訓(xùn)步驟序號(hào)實(shí)訓(xùn)項(xiàng)目名稱(chēng)項(xiàng)目類(lèi)型必做 /選做實(shí)訓(xùn)準(zhǔn)備、制定實(shí)訓(xùn)計(jì)劃，分組：4-5 人為一組，每一組選定一名組長(zhǎng)，組長(zhǎng)主要負(fù)責(zé)考勤以及與指導(dǎo)教師聯(lián)系。選題：根據(jù)指定的周一網(wǎng)站主題書(shū)寫(xiě) * 網(wǎng)站策劃書(shū)，各小組進(jìn)行分工。根據(jù)實(shí)訓(xùn)時(shí)間的準(zhǔn)備型必做長(zhǎng)短制定一個(gè)切實(shí)可行的網(wǎng)站開(kāi)發(fā)計(jì)劃。準(zhǔn)備素材，搜集與主題相關(guān)的文字、圖像、動(dòng)畫(huà)、音樂(lè)等資料。設(shè)計(jì)網(wǎng)站的內(nèi)容結(jié)構(gòu)、目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)，設(shè)計(jì)網(wǎng)站層次結(jié)周二構(gòu)圖，設(shè)計(jì)首頁(yè)及其頁(yè)面的版式結(jié)構(gòu)圖。創(chuàng)建本地網(wǎng)站，建立網(wǎng)站的設(shè)計(jì)型必做目錄結(jié)構(gòu)。周三運(yùn)用 Photoshop 制作和處理網(wǎng)頁(yè)所需圖像，運(yùn)用Flash 制作網(wǎng)設(shè)計(jì)型必做頁(yè)所需動(dòng)畫(huà)。制作首頁(yè)。周四制作二

9、級(jí)子頁(yè)。制作內(nèi)容頁(yè)。創(chuàng)建超級(jí)鏈接。設(shè)計(jì)型必做周五測(cè)試與瀏覽網(wǎng)頁(yè)。書(shū)寫(xiě)實(shí)訓(xùn)報(bào)告書(shū)。測(cè)試型必做1.5評(píng)分標(biāo)準(zhǔn)根據(jù)實(shí)訓(xùn)期間的紀(jì)律考核情況、對(duì)待實(shí)訓(xùn)的態(tài)度，站點(diǎn)的目錄結(jié)構(gòu)，各個(gè)頁(yè)面的布局結(jié)構(gòu)、顏色搭配，文字、圖像、動(dòng)畫(huà)的合理搭配，網(wǎng)頁(yè)之間的鏈接是否順暢，網(wǎng)頁(yè)制作技術(shù)的應(yīng)用，網(wǎng)站的整體瀏覽效果等方面進(jìn)行綜合評(píng)分。評(píng)分參考標(biāo)準(zhǔn)如下表所示。網(wǎng)站開(kāi)發(fā)實(shí)訓(xùn)的參考評(píng)分標(biāo)準(zhǔn)序號(hào)考核項(xiàng)目評(píng)分比例1網(wǎng)站策劃書(shū)網(wǎng)站策劃書(shū)寫(xiě)認(rèn)真、完整、字跡清楚、頁(yè)面整潔，內(nèi)容充實(shí)。10%（ 1）內(nèi)容方面：主題明確，內(nèi)容健康、具體，各個(gè)頁(yè)面的文字、圖像、動(dòng)畫(huà)能夠清晰地表達(dá)主題，各級(jí)內(nèi)容層次清晰，同級(jí)頁(yè)面格式統(tǒng)一。（ 2）版面結(jié)構(gòu)：版面結(jié)構(gòu)合

10、理，頁(yè)面色調(diào)和諧，每個(gè)頁(yè)面都有返2網(wǎng)站效果回上一級(jí)或鏈接到其他頁(yè)面的文字或按鈕。60%（ 3）視覺(jué)感受：色彩搭配協(xié)調(diào)、美觀，頁(yè)面設(shè)計(jì)規(guī)范，沒(méi)有出現(xiàn)亂碼、空鏈接和錯(cuò)誤鏈接。（ 4）CSS 以及 DIV 技術(shù)實(shí)現(xiàn)的網(wǎng)頁(yè)元素的修飾及布局準(zhǔn)確。（ 5）網(wǎng)站風(fēng)格： 網(wǎng)站具有特色， 主題、文字、 圖像、動(dòng)畫(huà)有創(chuàng)新。3紀(jì)律考核實(shí)訓(xùn)期間組織紀(jì)律性強(qiáng)，無(wú)遲到、早退、缺課現(xiàn)象10%4創(chuàng)新情況制作的網(wǎng)頁(yè)具有獨(dú)創(chuàng)性，構(gòu)思巧妙、有新意5%5成員協(xié)作小組成員協(xié)作精神強(qiáng)，所有的成員在規(guī)定時(shí)間內(nèi)完成實(shí)訓(xùn)任務(wù)，5%無(wú)雷同現(xiàn)象或抄襲現(xiàn)象。6實(shí)訓(xùn)報(bào)告實(shí)訓(xùn)報(bào)告書(shū)寫(xiě)認(rèn)真、完整、字跡清楚、頁(yè)面整潔，實(shí)訓(xùn)收獲較大。10%合計(jì)100%組號(hào)1

11、23456789101.6實(shí)訓(xùn)分組及實(shí)訓(xùn)題目組成員實(shí)訓(xùn)題目學(xué)號(hào)： 201131661 2011316615制作班級(jí)網(wǎng)站學(xué)號(hào)： 201131666 2011316670制作學(xué)校系部網(wǎng)站學(xué)號(hào)： 201131671 2011316675制作學(xué)校圖書(shū)館網(wǎng)站學(xué)號(hào)： 201131676 2011316680制作攝影網(wǎng)站學(xué)號(hào)： 201131681 201131685制作電腦學(xué)習(xí)網(wǎng)站學(xué)號(hào)： 201131686 2011316690制作旅游公司網(wǎng)站學(xué)號(hào)： 201131691 2011316695制作電腦公司網(wǎng)站學(xué)號(hào)： 201131696 2011316700制作體育知識(shí)網(wǎng)站學(xué)號(hào)： 201131701 2011316705制作軍事知識(shí)網(wǎng)站學(xué)號(hào)： 201131706 2011316710制作圖書(shū)網(wǎng)站附表 1-1主頁(yè)欄目1欄目2欄目3欄目4內(nèi)容1內(nèi)容2內(nèi)容3附表 1-2標(biāo)題導(dǎo)航內(nèi)容左列內(nèi)容正文內(nèi)容左列內(nèi)容腳注附表 1-3* 網(wǎng)站策劃書(shū) （ 2 號(hào)、加粗、宋體、居中）一、網(wǎng)站分析與定位： （ 4 號(hào)、加粗、宋體）1 、建設(shè)網(wǎng)站目的主題、及功能定位。 （5 號(hào)、宋體、 1.5 倍行距）2 、建設(shè)網(wǎng)站前的市場(chǎng)分析。3 、網(wǎng)站的風(fēng)格和亮點(diǎn)。4 、網(wǎng)站技術(shù)解決方案。二、網(wǎng)站內(nèi)容規(guī)劃 （ 4 號(hào)、加粗、宋體）1 、網(wǎng)站主要內(nèi)容及板塊 （5 號(hào)、宋體、 1.5 倍行距）2 、各板塊的具體內(nèi)容及功能3 、網(wǎng)頁(yè)色彩基