網(wǎng)頁(yè)設(shè)計(jì)課程標(biāo)準(zhǔn)

1、云南城市建設(shè)職業(yè)學(xué)院網(wǎng)頁(yè)設(shè)計(jì)課程標(biāo)準(zhǔn)系 （部）： 機(jī)電與信息工程系 課程名稱(chēng)： 網(wǎng) 頁(yè) 設(shè) 計(jì) 編制教師：張捷編制時(shí)間:2015年5月前言網(wǎng)頁(yè)設(shè)計(jì)是職業(yè)院校計(jì)算機(jī)領(lǐng)域的一門(mén)主干專(zhuān)業(yè)課程，也是計(jì)算機(jī)及相關(guān)專(zhuān)業(yè)人才培養(yǎng)計(jì)劃中的一門(mén)專(zhuān)業(yè)課程，在大二第二學(xué)期開(kāi)設(shè)，課程總學(xué)時(shí)為108學(xué)時(shí)，主要是為了讓學(xué)生掌握網(wǎng)站建設(shè)必備的基礎(chǔ)知識(shí)、基本技能和基本素養(yǎng),其主要任務(wù)是通過(guò)網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)學(xué)習(xí)和實(shí)訓(xùn)兩方面內(nèi)容培養(yǎng)學(xué)生制作網(wǎng)頁(yè)、建立維護(hù)網(wǎng)站的能力,使學(xué)生了解網(wǎng)頁(yè)制作的方法,掌握網(wǎng)頁(yè)三劍客與其它多媒體軟件相結(jié)合開(kāi)發(fā)網(wǎng)站的技能。同時(shí)達(dá)到培養(yǎng)高素質(zhì)勞動(dòng)者和網(wǎng)站建設(shè)專(zhuān)門(mén)人才的目的，為今后學(xué)生就業(yè)和繼續(xù)學(xué)習(xí)打下良好的基礎(chǔ)。當(dāng)

2、今正處于網(wǎng)絡(luò)化和信息化時(shí)代,很多工作都離不開(kāi)互聯(lián)網(wǎng).網(wǎng)站是政府、企事業(yè)單位、企業(yè)公司信息化的核心,更是其應(yīng)用宣傳信息的關(guān)鍵媒體。所以特依據(jù)人才培養(yǎng)方案要求制訂以下網(wǎng)頁(yè)設(shè)計(jì)課程標(biāo)準(zhǔn)。一、課程基本信息 1課程名稱(chēng)：網(wǎng)頁(yè)設(shè)計(jì) 2課程類(lèi)別：專(zhuān)業(yè)課基礎(chǔ)課3課程編碼：4學(xué) 時(shí):108 5適用專(zhuān)業(yè):計(jì)算機(jī)、網(wǎng)絡(luò)、移動(dòng)通信等相關(guān)專(zhuān)業(yè)。1.1 課程的性質(zhì)與作用 1 .課程的性質(zhì) 網(wǎng)頁(yè)設(shè)計(jì)課程是高職計(jì)算機(jī)、網(wǎng)絡(luò)、移動(dòng)通信等相關(guān)專(zhuān)業(yè)重點(diǎn)建設(shè)的核心課程之一，是學(xué)生職業(yè)教育的核心課程.通過(guò)本課程的學(xué)習(xí)，使學(xué)生了解網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站項(xiàng)目創(chuàng)建實(shí)施的流程及方法，具備網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)與維護(hù)的基本能力，為今后學(xué)生到相應(yīng)的職業(yè)崗位工

3、作打下基礎(chǔ)。計(jì)算機(jī)、網(wǎng)絡(luò)、電子商務(wù)等相關(guān)專(zhuān)業(yè)是為適應(yīng)市場(chǎng)經(jīng)濟(jì)發(fā)展需要，培養(yǎng)能在政府、企業(yè)、企事業(yè)單位從事算機(jī)系統(tǒng)維護(hù)、網(wǎng)絡(luò)維護(hù)、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)管理維護(hù)、中小型信息系統(tǒng)開(kāi)發(fā)等工作的高技能人才、讓學(xué)生具有良好的職業(yè)道德、熟練的專(zhuān)業(yè)技能和可持續(xù)發(fā)展的計(jì)算機(jī)應(yīng)用技術(shù)領(lǐng)域的高級(jí)應(yīng)用型人才。本課程是一門(mén)既包含理論知識(shí)又包含實(shí)踐性、技能都相對(duì)較強(qiáng)的課程。2課程作用本課程相關(guān)的典型工作崗位是：前端（網(wǎng)站策劃師、網(wǎng)頁(yè)美工）、后臺(tái)（網(wǎng)站開(kāi)發(fā)工程師）,對(duì)其進(jìn)行典型工作任務(wù)與職業(yè)能力分析后，歸納提煉出崗位核心能力為“網(wǎng)站建設(shè)"，再按照各個(gè)典型工作任務(wù)的先后順序設(shè)置支撐的項(xiàng)目課程群。  

4、;  網(wǎng)站建設(shè)的先行課程為圖像處理photoshop，HTML ,CSS，DIV和Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)flashT1 基礎(chǔ)能力美術(shù)，圖案，色彩基礎(chǔ)網(wǎng)站建設(shè)實(shí)訓(xùn)等，詳細(xì)的可見(jiàn)下表，它們是支撐“網(wǎng)站建設(shè)”核心能力的基礎(chǔ)課程.基礎(chǔ)能力擴(kuò)展能力高級(jí)能力T1：網(wǎng)頁(yè)設(shè)計(jì)師HTML ，CSS，DIVPHP（或ASP，JSP）等動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)工具基礎(chǔ)能力HTML+div+cssDreamweaver快速建站模板工具Ajax等最新技術(shù)FireWorkFireWork網(wǎng)頁(yè)效果圖制作PhotoShop 基礎(chǔ)一定的語(yǔ)言表達(dá)、溝通能力圖形圖像處理Flash網(wǎng)站商業(yè)廣告宣傳動(dòng)畫(huà)制作能力廣告宣傳

5、動(dòng)畫(huà)flash圖片制作T2:網(wǎng)頁(yè)美工T1 基礎(chǔ)能力美術(shù),圖案,色彩基礎(chǔ)熟練掌握 PhotoShopLogomaker軟件應(yīng)用 標(biāo)志設(shè)計(jì)網(wǎng)站標(biāo)志設(shè)計(jì)制作T3：網(wǎng)站建設(shè)T1 基礎(chǔ)能力IIS （服務(wù)器配置)數(shù)據(jù)庫(kù)設(shè)計(jì)能力項(xiàng)目網(wǎng)站建設(shè)，美化數(shù)據(jù)庫(kù)(SQL或ACCESS）使用能力動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)工具高級(jí)能力T5：網(wǎng)站分析和設(shè)計(jì)T3 全部能力數(shù)據(jù)庫(kù)設(shè)計(jì)能力軟件工程分析能力策劃、分析能力網(wǎng)站需求分析能力理解領(lǐng)域業(yè)務(wù)的能力語(yǔ)言表達(dá)、溝通能力通過(guò)網(wǎng)站項(xiàng)目開(kāi)發(fā)的教學(xué)，使學(xué)生掌握網(wǎng)站開(kāi)發(fā)的過(guò)程及網(wǎng)頁(yè)的設(shè)計(jì)制作方法和步驟，該課程主要內(nèi)容有網(wǎng)站規(guī)劃與網(wǎng)頁(yè)設(shè)計(jì)、靜態(tài)網(wǎng)頁(yè)制作、CSS規(guī)則的應(yīng)用、網(wǎng)站測(cè)試發(fā)布與維護(hù)的知識(shí)和技能，

6、為后續(xù)課程的學(xué)習(xí)提供網(wǎng)頁(yè)設(shè)計(jì)與制作的理論基礎(chǔ)和技能支持。 本課程無(wú)論對(duì)培養(yǎng)學(xué)生的創(chuàng)新思維、協(xié)作精神、正確的設(shè)計(jì)理念和方法、信息處理能力、解決問(wèn)題能力、自我學(xué)習(xí)能力、高級(jí)能力,還是對(duì)培養(yǎng)網(wǎng)頁(yè)、網(wǎng)站制作的實(shí)踐操作技能、滿(mǎn)足職業(yè)崗位需求以及對(duì)后繼課程的學(xué)習(xí)，都具有十分重要的作用。1.2 課程的基本理念1 突出學(xué)生職業(yè)能力的培養(yǎng)本課程以建設(shè)企業(yè)網(wǎng)站項(xiàng)目為載體，以網(wǎng)站項(xiàng)目的建設(shè)與維護(hù)工程流程為主線，通過(guò)項(xiàng)目全面學(xué)習(xí)網(wǎng)站建設(shè)與維護(hù)的相關(guān)知識(shí)和技能，及步驟方法，使學(xué)生對(duì)真實(shí)的建設(shè)網(wǎng)站項(xiàng)目的流程有一個(gè)較全面的認(rèn)識(shí)，形成職業(yè)崗位所需的基本能力，為今后從事相關(guān)職業(yè)崗位作前期準(zhǔn)備。2 以學(xué)生主體，從實(shí)踐中鍛煉學(xué)生能

7、力 本課程在實(shí)施過(guò)程中,按工作流程將項(xiàng)目分解為具體的工作任務(wù)，教學(xué)中實(shí)施任務(wù)驅(qū)動(dòng),同時(shí)，引導(dǎo)學(xué)生組建項(xiàng)目團(tuán)隊(duì)，以學(xué)生為主體，團(tuán)隊(duì)在教師的啟發(fā)、提示下自主地開(kāi)展學(xué)習(xí)，學(xué)生根據(jù)任務(wù)，通過(guò)團(tuán)隊(duì)討論，主動(dòng)查閱資料，養(yǎng)成獨(dú)立策劃、分析問(wèn)題和解決問(wèn)題的能力。3 尊重個(gè)體差異,注重過(guò)程評(píng)價(jià) 本課程在教學(xué)實(shí)施過(guò)程中，倡導(dǎo)學(xué)生自主學(xué)習(xí)，鼓勵(lì)多元思維方式，并將其表達(dá)出來(lái)，尊重個(gè)體差異，發(fā)揮不同類(lèi)型學(xué)生的長(zhǎng)處，建立由形成性評(píng)價(jià)和總結(jié)性評(píng)價(jià)相結(jié)合的評(píng)價(jià)體系,教學(xué)過(guò)程中以形成性評(píng)價(jià)為主,注重學(xué)生學(xué)習(xí)的積極和自信心,總結(jié)性評(píng)價(jià)注重評(píng)價(jià)學(xué)生做成事的能力.1.3 課程標(biāo)準(zhǔn)的設(shè)計(jì)思路在課程標(biāo)準(zhǔn)的設(shè)計(jì)過(guò)程中以網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)為必須掌

8、握知識(shí)，以實(shí)訓(xùn)企業(yè)網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目的完整創(chuàng)建過(guò)程對(duì)各環(huán)節(jié)知識(shí)、技能進(jìn)行知識(shí)鞏固和運(yùn)用，圍繞預(yù)設(shè)能力目標(biāo),對(duì)學(xué)習(xí)目標(biāo)、學(xué)習(xí)任務(wù)、能力要求、教學(xué)內(nèi)容、活動(dòng)設(shè)計(jì)和教學(xué)建議等都均參照人才培養(yǎng)方案。1.4教學(xué)方法在教學(xué)網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)中主要采用案例、講解、實(shí)做的方式來(lái)進(jìn)行，通過(guò)理論、案例的講解和演示，讓學(xué)生能夠清楚到實(shí)踐的操作，掌握本課程的相關(guān)知識(shí)。圖表表示如下案例教學(xué)法：教學(xué)過(guò)程中.老師舉例子講解一個(gè)網(wǎng)站創(chuàng)建的過(guò)程和方法，其它相關(guān)類(lèi)網(wǎng)站的創(chuàng)建就可以用第一個(gè)網(wǎng)站建設(shè)中的一些方法去完成.討論式教學(xué) :注重課堂教學(xué)整體設(shè)計(jì)，通過(guò)引入問(wèn)題,如建設(shè)網(wǎng)站的市場(chǎng)分析，可以組織學(xué)生通過(guò)討論尋找答案，讓學(xué)生參與交流、分享自己的

9、看法，并進(jìn)行總結(jié)和歸納.通過(guò)討論，學(xué)生真正做到了積極參與課堂學(xué)習(xí)。分析問(wèn)題、解決問(wèn)題的能力,又加強(qiáng)了理論知識(shí)在實(shí)際的應(yīng)用。還有其它的一些方法如講授法、任務(wù)驅(qū)動(dòng)法等，再此就不多說(shuō). 二、課程目標(biāo)2.1 課程的總體目標(biāo)通過(guò)本課程的學(xué)習(xí)，使學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)的整個(gè)工作流程和方法,能夠使用網(wǎng)頁(yè)三劍客及其它相關(guān)軟件完成網(wǎng)站前端相關(guān)工作(如網(wǎng)頁(yè)效果圖制作、網(wǎng)頁(yè)布局、用代碼生成網(wǎng)頁(yè)等），在教學(xué)過(guò)程中,通過(guò)團(tuán)隊(duì)開(kāi)發(fā)，形成基本的職業(yè)道德規(guī)范和職業(yè)素養(yǎng)，及團(tuán)隊(duì)合作精神。三、內(nèi)容標(biāo)準(zhǔn)第一章 HTML網(wǎng)頁(yè)基礎(chǔ)教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的:1）掌握HTML文件編寫(xiě)方法；2）使用瀏覽器瀏覽HTML源文件;3）了解h

10、tml基本概念 2、要求：掌握常用的瀏覽器打開(kāi)網(wǎng)頁(yè)方法（IE、火狐、360瀏覽器、谷歌瀏覽器等），掌握網(wǎng)頁(yè)設(shè)計(jì)的一些基本概念; 二、教學(xué)重點(diǎn)與難點(diǎn) 重點(diǎn)：網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念難點(diǎn):網(wǎng)頁(yè)設(shè)計(jì)相關(guān)屬性三、教學(xué)方法與手段講授、案例演示、實(shí)際操作、作業(yè)通過(guò)理論講授的方式讓學(xué)生了解本章的理論的內(nèi)容四、內(nèi)容部分1、 經(jīng)典網(wǎng)頁(yè)欣賞 1）藍(lán)色代表海洋，宇宙，大海。是一種博大的顏色。此網(wǎng)頁(yè)采用主色為藍(lán)色.代表了一種博大的精神。也代表了本公司的科技領(lǐng)域強(qiáng)項(xiàng).不同的藍(lán)色的轉(zhuǎn)換給人一種輕松的感覺(jué)。網(wǎng)頁(yè)右邊加以黃色區(qū)域來(lái)烘托出產(chǎn)品的外形,以及獨(dú)特。網(wǎng)頁(yè)整體簡(jiǎn)單明了。正是這種公司所需要的。2)網(wǎng)頁(yè)是一則汽車(chē)的網(wǎng)頁(yè)，和傳統(tǒng)汽車(chē)

11、網(wǎng)頁(yè)一樣采用黑色的背景，凸顯出一種高貴，科技的感覺(jué).文章的文字部分采用高明度灰色,體現(xiàn)了主題。汽車(chē)輪子處的火，表現(xiàn)了激情,興奮。使主題更加生化一步。給人莊重穩(wěn)重的同時(shí),不失激情活躍的一面.2、 網(wǎng)頁(yè)設(shè)計(jì)相關(guān)概念1） 統(tǒng)一資源定位器(絕對(duì)路徑、相對(duì)路徑）2） 超鏈接3） 網(wǎng)站、靜態(tài)網(wǎng)頁(yè)、動(dòng)態(tài)網(wǎng)頁(yè)、主頁(yè)、網(wǎng)頁(yè)三劍客4） Html語(yǔ)言概念5） 常見(jiàn)的瀏覽器6） Html語(yǔ)言的基本結(jié)構(gòu)及語(yǔ)法五、作業(yè)1）使用瀏覽器打開(kāi)網(wǎng)頁(yè)源代碼；2）寫(xiě)出html超文本標(biāo)記語(yǔ)言的主體結(jié)構(gòu);第二章 文字與段落標(biāo)記 教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的：1）掌握網(wǎng)頁(yè)中文字編排、美化方法;2)掌握網(wǎng)頁(yè)中圖像插入的方法2、要求:

12、1）掌握標(biāo)題標(biāo)記2）掌握文本基本標(biāo)記、文本格式化標(biāo)記3）掌握段落標(biāo)記、水平線標(biāo)記二、教學(xué)重點(diǎn)與難點(diǎn) 重點(diǎn)：掌握文本基本標(biāo)記、文本格式化標(biāo)記難點(diǎn)：?jiǎn)?、雙標(biāo)記的區(qū)分 三、教學(xué)方法與手段講授法、案例演示、討論法四、內(nèi)容部分1、設(shè)置段落的標(biāo)記 段落標(biāo)記是一個(gè)雙標(biāo)記,每個(gè)標(biāo)記對(duì)表示一個(gè)段落; 語(yǔ)法格式：p>這里表示段落</p2、換行標(biāo)記 換行標(biāo)記是單標(biāo)記,即不會(huì)成對(duì)出現(xiàn),是在尖括號(hào)中加一個(gè)/br>的單標(biāo)記； 語(yǔ)法格式：。/br3、給代碼添加注釋 添加注釋是不會(huì)再網(wǎng)頁(yè)中顯示的 語(yǔ)法格式： !- 注釋4、粗體和斜體 1) 粗體標(biāo)記,是一對(duì)雙標(biāo)記，起到強(qiáng)調(diào)的作用 語(yǔ)法格式：b標(biāo)題文

13、字</b> 2） 斜體標(biāo)記語(yǔ)氣較弱 語(yǔ)法格式:<i>表示斜體標(biāo)記</i>5、下劃線與刪除線標(biāo)記 為了使部分文字特別顯示，可以使用下劃線或者刪除線標(biāo)記，也是一對(duì)雙標(biāo)記； 語(yǔ)法格式: <u下劃線的</u> <s>刪除線的</s6、上標(biāo)和下標(biāo) 雙標(biāo)記 語(yǔ)法格式：sup上標(biāo)/sup <sub下標(biāo)</sub> H2o；H 2so4；a2+b2=c27、文字標(biāo)記:是一個(gè)雙標(biāo)記語(yǔ)法格式：font color=”顏色值"文字/font> 8、標(biāo)題標(biāo)記對(duì)齊屬性 h1h6（h1:表示文字標(biāo)題最大-h6表示文字

14、標(biāo)題最?。?對(duì)齊屬性：align（ left、center、right) 如:<h1 align=“center”標(biāo)題居中</h19、文本標(biāo)記的屬性 1）字體屬性 face 如 <font face=“需要的字體">云南城市建設(shè)職業(yè)學(xué)院/font 2）設(shè)置字體大小屬性:size 如 <font size=“值”云南城市建設(shè)職業(yè)學(xué)院/font 絕對(duì)值：1-7 相對(duì)值：44的整數(shù),字體相對(duì)于3號(hào)放大和縮小字號(hào) 注意：屬性與屬性之間用空格隔開(kāi) 3）字體的顏色屬性:color如 <font color=“顏色值"云南城市建設(shè)職業(yè)學(xué)院</fo

15、nt可以用英文單詞或者二進(jìn)制代碼10、粗體標(biāo)記：b與 strong 語(yǔ)法格式：b>需要加粗的文字</b> strong>需要加粗的文字</strong標(biāo)記是可以嵌套的11、斜體的標(biāo)記 1） i 、em、cite 語(yǔ)法格式： <i>需要變?yōu)樾斌w的文字/iem>需要變?yōu)樾斌w的文字/em><cite>需要變?yōu)樾斌w的文字</cite>12、大字號(hào)和小字號(hào)標(biāo)記）big和small語(yǔ)法格式 <big>需要加大的文字big需要加大的文字加大：在原來(lái)定義的字體大小基礎(chǔ)上加大一個(gè)級(jí)別；變?。涸谠瓉?lái)定義的字體大小基礎(chǔ)上變小一

16、個(gè)級(jí)別;、不自動(dòng)換行的標(biāo)記1）nobr語(yǔ)法格式：nobr不換行的文字</nobr14、水平線標(biāo)記 1)<hr /> 水平線標(biāo)記的屬性：width（寬度）、 color(顏色)、size(高度）、noshade (無(wú)陰影）、align（對(duì)齊）15、 其他特殊標(biāo)記 1）空格： nbsp2) ； &lt;3） ; gt；五、作業(yè) 制作一個(gè)公司簡(jiǎn)介頁(yè)面(包含標(biāo)題、文字、下劃線、圖片、橫線）第三章 使用圖像教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的：1）掌握網(wǎng)頁(yè)中圖形圖像的格式;2)掌握網(wǎng)頁(yè)中圖像插入的方法及圖像的超鏈接；2、要求:1）掌握常用圖像的格式2）掌握網(wǎng)頁(yè)中插入圖像的方法，

17、及插入圖像的標(biāo)記二、教學(xué)重點(diǎn)與難點(diǎn) 重點(diǎn)：網(wǎng)頁(yè)中圖像插入的方法及圖像的超鏈接難點(diǎn)：超鏈接中圖像的地址 三、教學(xué)方法與手段講授法、案例演示、討論法、習(xí)題法四、內(nèi)容部分1、常見(jiàn)的一些圖像格式1) jpeg 壓縮圖像格式，不支持透明，1670萬(wàn)像素，圖像要求比較絢麗的時(shí)候使用;2） Gif（圖形交換格式） 支持透明，256色，支持動(dòng)畫(huà)（由多張位圖連續(xù)播放形成）3） Png（firework) 支持透明1670萬(wàn)像素，是網(wǎng)絡(luò)可移植格式；2、 如何在網(wǎng)頁(yè)中插入圖像<img> :單標(biāo)記語(yǔ)法格式： img src=“地址” Src：表示指定圖像的位置（路徑） 絕對(duì)地址：具有詳細(xì)的位置，即提供目標(biāo)

18、文檔的完整主機(jī)名稱(chēng)、路徑信息、及文檔的全稱(chēng)； 相對(duì)地址：從當(dāng)前文檔開(kāi)始的地址1） 如果當(dāng)前文檔和目標(biāo)文檔位置平行,則直接書(shū)寫(xiě)目標(biāo)文檔的全稱(chēng)；2） 如果當(dāng)前文檔和目標(biāo)文檔文件夾位置平行，則輸入路徑為 文件夾名稱(chēng)/目標(biāo)文檔名稱(chēng)3） 如果當(dāng)前文檔所在文件夾和目標(biāo)文檔位置平行，則書(shū)寫(xiě)：。目標(biāo)文檔全稱(chēng)3、屬性： 1）alt屬性 語(yǔ)法格式：<img src=“地址” alt=“顯示圖片信息”2）圖像寬度高度屬性：width、height <img src=“地址” alt=“顯示圖片信息”width=“屬性值">3）vspace(垂直間距）、hspace（水平間距）五、作業(yè)制作

19、一個(gè)圖文并茂的婚紗網(wǎng)頁(yè)（素材圖片自己到互聯(lián)網(wǎng)上找)第四章 使用列表教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的:1）掌握有序列表；2)掌握無(wú)序列表2、要求：1）了解列表標(biāo)記2）掌握有序、無(wú)序、定義、菜單列表的使用方法二、教學(xué)重點(diǎn)與難點(diǎn) 重點(diǎn)：列表標(biāo)記難點(diǎn):有序、無(wú)序列表浮動(dòng)的使用 三、教學(xué)方法與手段講授法、案例演示、習(xí)題法四、內(nèi)容部分1、列表的使用定義說(shuō)明:列表是一種數(shù)據(jù)的排列方式,對(duì)頁(yè)面的布局非常重要,分為三類(lèi):有序列表、無(wú)序列表、自定義列表。 無(wú)序列表:項(xiàng)目符號(hào)由幾個(gè)符號(hào)構(gòu)成 有序列表：項(xiàng)目符號(hào)由字母、數(shù)字排列構(gòu)成 自定義列表：通過(guò)自己靈活定義1） 有序列表 語(yǔ)法格式: ol> <li

20、表示列表項(xiàng)1</li <li>表示列表項(xiàng)2/li> li表示列表項(xiàng)3/li </ol難點(diǎn)說(shuō)明：本列表會(huì)自動(dòng)換行，不用加換行符號(hào)，如果非要成一行,那么就給他加上css定義浮動(dòng)； 有序列表的序號(hào)類(lèi)型（1、a、A、i、I）默認(rèn)情況下是數(shù)字；語(yǔ)法格式 <ol type=“序號(hào)類(lèi)型”> li>表示列表項(xiàng)1</li> <li>表示列表項(xiàng)2/li> <li>表示列表項(xiàng)3/li /ol設(shè)置列表的起始數(shù)值 ol type=“序號(hào)類(lèi)型”start=“起始數(shù)值” li表示列表項(xiàng)1</li> <li表示列表項(xiàng)2

21、/li <li>表示列表項(xiàng)3</li> /ol>注意：start=“起始數(shù)值"中起始數(shù)值必須為數(shù)字,否則不起作用；2） 無(wú)序列表 無(wú)序列表的項(xiàng)目排列沒(méi)有順序，以符號(hào)作為分項(xiàng)標(biāo)識(shí);a) 語(yǔ)法格式<ul>li列表項(xiàng)1</li>li>列表項(xiàng)2</li>li列表項(xiàng)3</li</ul><ul>和</ul分別表示無(wú)序列表的開(kāi)始和結(jié)束,<li>表示列表項(xiàng)；b) 無(wú)序列表的列表類(lèi)型（實(shí)心圓、空心圓、方框)disccirclesquare)c) 無(wú)起始數(shù)值屬性3） 目錄列表顯示效果與

22、無(wú)序列表相同，一般用來(lái)創(chuàng)建多列目錄a) 語(yǔ)法格式 <dir >li>列表項(xiàng)1</li<li>列表項(xiàng)2/li><li列表項(xiàng)3</li</dir b) 類(lèi)型 <dir type=“類(lèi)型">li列表項(xiàng)1</lili>列表項(xiàng)2</li><li列表項(xiàng)3/li</dir 列表類(lèi)型（實(shí)心圓、空心圓、方框）disccirclesquare)c) 無(wú)起始數(shù)值屬性4） 定義列表a) 語(yǔ)法格式dl1321 <dt>定義條件1/dt dd定義描述1</dd><dt>

23、定義條件2</dt> <dd>定義描述2/dd>dt定義條件3/dt> <dd>定義描述3</dd></dl5） 菜單列表用于設(shè)計(jì)單列菜單列表，顯示效果與無(wú)序列表相同； 語(yǔ)法格式： <menu >li列表項(xiàng)1/li><li>列表項(xiàng)2/li<li列表項(xiàng)3</li>/menu >五、作業(yè)1、輸入五組列表（無(wú)序、有序、自定義、菜單、目錄列表）代碼；并給每組第一個(gè)列表項(xiàng)加上超鏈接，鏈接目標(biāo)自定。第五章 使用表格教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的:1）掌握創(chuàng)建表格的方法;2)掌握表格

24、屬性2、要求:1）掌握創(chuàng)建表格方法；2）掌握表格邊框、背景、行、列屬性二、教學(xué)重點(diǎn)與難點(diǎn) 重點(diǎn)：創(chuàng)建表格 難點(diǎn):合并單元格 三、教學(xué)方法與手段講授法、案例演示、習(xí)題法、問(wèn)題法四、內(nèi)容部分1、建立表格用到的四個(gè)標(biāo)記 1)table，是雙標(biāo)記，用于定義表格元素，<table和/table>2）tr 是雙標(biāo)記,用于定義表格的行;<tr和</tr>3）td是雙標(biāo)記，用于定義表格的單元格；<td和</td>4）th是雙標(biāo)記，用于定義表頭;th和/th>2、語(yǔ)法格式table tr> <th第一行第一列單元格/th><th>

25、;第一行第一列單元格</th<th第一行第一列單元格</th</tr> tr <th>第一行第一列單元格/thth第一行第一列單元格/th<th第一行第一列單元格/th</tr> /table姓名性別年齡張三豐男25總結(jié)：th>與</th>表示表頭,里面的內(nèi)容，自動(dòng)加粗、自動(dòng)居中; td>和</td>表示單元格,里面的內(nèi)容不加粗，不居中；3、<table>標(biāo)記屬性 1）、border： 表示表格的邊框?qū)傩?，屬性值為?shù)值;border= ”數(shù)值”； 2）、width：表示表格寬度屬性（屬性

26、值示數(shù)值或者百分比） 3)、height：表格高度屬性(屬性值示數(shù)值或者百分比） 4)、bgcolor：設(shè)置表格背景顏色的屬性屬性值可以是英文單詞、也可以是rgb或者cmyk顏色值 5）、background:用于設(shè)置表格背景圖像屬性; 屬性值：就是設(shè)置背景路徑值（建議使用相對(duì)路徑）6）、cellspacing:用來(lái)設(shè)置表格間距，屬性值是數(shù)值;7）、cellpadding：用來(lái)設(shè)置表格邊距，屬性值是數(shù)值；8）align:用于設(shè)置表格對(duì)齊的屬性：屬性值:leftrightcenter(左對(duì)齊、右對(duì)齊、居中對(duì)齊）4、表格行的控制 1）width:表示行的寬度（屬性值示數(shù)值或者百分比) 2）heig

27、ht：行高度屬性（屬性值示數(shù)值或者百分比） 3） align:設(shè)置行中文字對(duì)齊方式； 4）vlign：文字垂直方向?qū)R 5）bgcolor：設(shè)置表格行背景顏色的屬性屬性值可以是英文單詞、也可以是rgb或者cmyk顏色值6） bordercolor：設(shè)置表格行邊框顏色5、td單元格的屬性控制 1)align、vlign：?jiǎn)卧裰兴?、垂直方向文字?duì)齊方式； 2）bordercolor：?jiǎn)卧襁吙驅(qū)傩?3）bgcolor:單元格背景顏色 4）rowspan：表示單元格跨行的行數(shù) 5）colspan：表示單元格跨列的列數(shù)五、作業(yè)作業(yè)1、用html標(biāo)記語(yǔ)言中表格標(biāo)記和屬性等完成上圖所示表格；2、用ht

28、ml標(biāo)記語(yǔ)言中表格標(biāo)記和屬性等完成本班級(jí)課程表;第六章 使用建立超鏈接教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的：1）掌握超鏈接的基本知識(shí)；2）掌握超鏈接建立方法2、要求：1）掌握網(wǎng)頁(yè)內(nèi)部鏈接方法；2）掌握網(wǎng)頁(yè)外部鏈接方法;3）掌握錨點(diǎn)鏈接方法二、教學(xué)重點(diǎn)與難點(diǎn) 重點(diǎn)：外部鏈接、內(nèi)部鏈接方法 難點(diǎn):鏈接時(shí)路徑的正確書(shū)寫(xiě) 三、教學(xué)方法與手段講授法、案例演示、習(xí)題法四、內(nèi)容部分1、路徑的概念：路徑分為相對(duì)路徑和絕對(duì)路徑相對(duì)路徑以引用文件的網(wǎng)頁(yè)所在的位置為參考基礎(chǔ)而建立的路徑如：1) 如果鏈接到同一目錄下,則直接輸入要鏈接的文檔的名稱(chēng)；2) 如果鏈接到下一級(jí)目錄中的文件，則先輸入目錄名，然后再加“/”，在

29、輸入文件名3) 如果鏈接到上一級(jí)目錄中的文件，先輸入“。/”再輸入目錄名、文件名絕對(duì)路徑（）絕對(duì)路徑是以站點(diǎn)的根目錄為參考基礎(chǔ)的目錄路徑在www中以http開(kāi)頭的鏈接都是絕對(duì)路徑說(shuō)明:當(dāng)鏈接到本機(jī)器上的文件時(shí)，建議使用相對(duì)路徑，如果使用絕對(duì)路徑，當(dāng)把文件移動(dòng)到其它盤(pán)符后，那么鏈接就會(huì)失效，這樣就要對(duì)文件鏈接重新編輯才能使用。3、 建立超級(jí)鏈接文字1） 格式<a要鏈接的文字/a<a href=“路徑”>要鏈接的文字</a>a>:表示鏈接的開(kāi)始</a>：鏈接的結(jié)束href：定義文件鏈接的地址（路徑、位置）2） Target用于指定打開(kāi)鏈接的目標(biāo)窗口，

30、默認(rèn)方式是在原來(lái)的窗口中打開(kāi)-blank:在瀏覽器新的窗口中打開(kāi)；-parent：將鏈接的文件載入含有該鏈接框架的副窗口中打開(kāi)；self：在同一框架中打開(kāi)-top：在當(dāng)前整個(gè)瀏覽器窗口中打開(kāi)格式:a href=“路徑”target=“-blank”要鏈接的文字/a圖像的鏈接要將圖片做成超鏈接,只需將img>標(biāo)記放在a>和</a之間即可；格式： a href=“鏈接圖片地址”><img scr=“參數(shù)”/a郵箱的鏈接格式：a href=“mailto:Email地址” cc=“抄送人Email地址”&subject=“郵件主題" &body

31、=“郵件正文”>描述文字</a> 如:a href=“mailto：106957550” cc=“張三豐”subject=“祝福" &body=“十一節(jié)快樂(lè)"寫(xiě)信 </a站內(nèi)鏈接如果一個(gè)頁(yè)面很長(zhǎng)，尋找相應(yīng)內(nèi)容比較困難，就可以使用站內(nèi)鏈接格式：a href=“#目標(biāo)名稱(chēng)”target=“窗口名稱(chēng)”>目錄文字</a>在鏈接的目標(biāo)處使用<a name=“目標(biāo)名稱(chēng)"超鏈接目標(biāo)/a>五、作業(yè)1、 做一個(gè)腦筋急轉(zhuǎn)彎頁(yè)面的站內(nèi)鏈接(至少10個(gè)）2、 做一個(gè)圖片鏈接頁(yè)面3、 做一個(gè)文字鏈接頁(yè)面（標(biāo)題的） 第

32、七章 添加多媒體教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的:1）掌握常見(jiàn)的媒體文件格式；2)掌握插入多媒體方法2、要求：1)設(shè)置滾動(dòng)文字方法；2）掌握插入音頻、視頻文件方法；3）掌握設(shè)置網(wǎng)頁(yè)背景音樂(lè)方法二、教學(xué)重點(diǎn)與難點(diǎn) 重點(diǎn)：音頻、視頻文件方法 難點(diǎn)：滾動(dòng)文字設(shè)置、鼠標(biāo)控制（停止、運(yùn)動(dòng)） 三、教學(xué)方法與手段講授法、案例演示、習(xí)題法、提問(wèn)法四、內(nèi)容部分 1、滾動(dòng)字幕 使用滾動(dòng)字幕可以增加網(wǎng)頁(yè)的動(dòng)感,讓網(wǎng)頁(yè)顯得更有生氣,達(dá)到動(dòng)感十足的效果;marquee>是一個(gè)雙標(biāo)記語(yǔ)法格式:<marquee>文字</marquee>屬性：direction、beavior、loop、s

33、croollamount、scrolldelay、align、bgcolor、height和width、hspace和vspace 1)direction：用于設(shè)置滾動(dòng)文字移動(dòng)方向 屬性值：left(右向左移動(dòng)）默認(rèn)值 right（左向右移動(dòng)） up（下往上移動(dòng)) down（上往下移動(dòng))2） behavior：用于滾動(dòng)文字的移動(dòng)效果；屬性值：Scroll：循環(huán)往復(fù)滾動(dòng)；Slide：表示滾動(dòng)到一方后停止，只滾動(dòng)一次； alternate：表示滾動(dòng)一方后向相反方向滾動(dòng),交替進(jìn)行3） loop：用于設(shè)置滾動(dòng)文字的循環(huán)次數(shù)，如果未指定，則循環(huán)不止；4） scrolldelay：用于設(shè)置每次滾動(dòng)的間隔的

34、延遲時(shí)間，一般以毫秒作為單位5） align：用于設(shè)置滾動(dòng)文字的對(duì)齊方式top：頂對(duì)齊middle：中間對(duì)齊bottom：底部對(duì)齊6） bgcolor: 用于設(shè)置滾動(dòng)的背景顏色；7） height和width 用于設(shè)置滾動(dòng)文字的高度和寬度8） hspace和vspace 用于設(shè)置滾動(dòng)文字四周的水平空間和垂直空間 如何實(shí)現(xiàn)鼠標(biāo)光標(biāo)移動(dòng)到滾文字上停止?jié)L動(dòng);移開(kāi)鼠標(biāo)繼續(xù)滾動(dòng)效果；Onmouseover=“javascript：this.stop（ )"表示鼠標(biāo)經(jīng)過(guò)停止;Onmouseout=“javascript：this.start （ )”表示鼠標(biāo)移開(kāi)繼續(xù)運(yùn)動(dòng);2、如何嵌入多媒體文件：

35、 網(wǎng)頁(yè)中嵌入的多媒體不但有文字、圖像還有音頻、視頻、flash動(dòng)畫(huà)等文件1） 使用embed標(biāo)記嵌入多媒體文件(是一個(gè)單標(biāo)記) 屬性說(shuō)明：src用于指定媒體文件的地址 Height和width用于設(shè)置媒體文件的高度和寬度 Loop用于設(shè)置媒體文件的播放次數(shù) Hidden用于隱藏播放器五、作業(yè) 1、制作一網(wǎng)頁(yè)，在網(wǎng)頁(yè)中插入滾動(dòng)文字、視頻、音頻文件（素材自備）第八章 使用表單教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的:1）掌握表單標(biāo)記；2)掌握菜單和列表使用方法；3)掌握文本框、文本域使用方法2、要求：1）熟悉表單對(duì)象；2)熟悉表單標(biāo)記及其屬性；二、教學(xué)重點(diǎn)與難點(diǎn) 重點(diǎn)：表單概念、表單對(duì)象建立方法 難點(diǎn)

36、：密碼框建立、菜單、復(fù)選框建立方法 三、教學(xué)方法與手段講授法、案例演示、習(xí)題法、提問(wèn)法四、內(nèi)容部分1、 建立表單1）表單是實(shí)現(xiàn)交互式動(dòng)態(tài)網(wǎng)頁(yè)的一種主要的外在形式,是網(wǎng)站管理者與瀏覽者之間溝通的橋梁，其主要功能是收集信息；由form標(biāo)記來(lái)定義；2） 格式from>。/form屬性共有三個(gè) name屬性：“form-name” method屬性：get和postaction屬性：表單處理程序的位置3） 輸入標(biāo)記<input標(biāo)記是表單中輸入標(biāo)記，是一個(gè)單標(biāo)記，語(yǔ)法格式如下： <input name=“”file-name” type=“type-name”4） 文本框單行文本框：當(dāng)

37、type的屬性值為“text”時(shí)表示輸入項(xiàng)輸入的字符串是以單行顯示； value：定義文本框初始值 size：定義文本框長(zhǎng)度 maxlength：定義輸入最大字符串?dāng)?shù)如：聯(lián)系方式：電子郵件：聯(lián)系地址：手機(jī)號(hào)碼：電話號(hào)碼:QQ：5） 密碼框如： 用戶(hù)登錄 用戶(hù)名：輸入密碼：當(dāng)type屬性的值：為password時(shí)表示的是密碼框,其他屬性與text相似,不同之處，輸入的 內(nèi)容均以表示，保證密碼的安全性 語(yǔ)法格式： <input type =“password" name=“”file-name” maxlength=“數(shù)值”2、 按鈕表單中的按鈕起著至關(guān)重要的作用,主要有三種類(lèi)型：

38、普通按鈕、提交按鈕、重置按鈕；1）普通按鈕 當(dāng)type的屬性值為 button時(shí)表示該輸入項(xiàng)輸入的 是普通按鈕，語(yǔ)法格式如下： input type=“button”name=“filename” value=“button-value”> 注意：value 表示顯示在按鈕上面的文字2）提交按鈕 當(dāng)type的屬性值為submit時(shí)表示該輸入項(xiàng)輸入的 是提交按鈕，語(yǔ)法格式如下：<input type=“submit”name=“file-name” value=“submit-value">3）重置按鈕 當(dāng)type的屬性值為reset時(shí)表示該輸入項(xiàng)輸入的 是重置按鈕，

39、語(yǔ)法格式如下:<input type=“reset"name=“filename" value=“reset-value”>3、 單選框與復(fù)選框1） 單選框當(dāng)type的屬性值為radio時(shí)表示該輸入項(xiàng)輸入的 是單選項(xiàng)，語(yǔ)法格式如下： <input type=“radio"name=“filename” value=“value”>2） 復(fù)選框 當(dāng)type的屬性值為checkbox時(shí)表示該輸入項(xiàng)輸入的 是復(fù)選項(xiàng)，語(yǔ)法格式如下：<input type=“checkbox"name=“filename” value=“value”

40、4、 文件輸入框 當(dāng)type的類(lèi)型為file表示輸入項(xiàng)是一個(gè)文件輸入框，用戶(hù)可以在文件輸入框內(nèi)部填寫(xiě)自己硬盤(pán)中文件的路徑，然后通過(guò)表單上傳； 格式: input type=“file”name=“filename">五、作業(yè) 1、使用表單標(biāo)記創(chuàng)建如下密碼框 用戶(hù)登錄 用戶(hù)名：輸入密碼：第九章 使用框架結(jié)構(gòu)教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的：1）掌握框架的使用方法；2）框架的 屬性；2、要求：1)掌握框架的使用方法；2）掌握框架的鏈接；二、教學(xué)重點(diǎn)與難點(diǎn) 重點(diǎn):框架的屬性難點(diǎn)：框架的鏈接 三、教學(xué)方法與手段講授法、案例演示、習(xí)題法四、內(nèi)容部分 框架的作用：通常用于頁(yè)面導(dǎo)航；框架

41、1、 框架集 frameset.。frameset>2、 框架 <frameframe 框架集：用frameset。frameset>標(biāo)記來(lái)定義,用于定義網(wǎng)頁(yè)顯示的框架數(shù)量、大小 等其他屬性； 框架：用<frameframe標(biāo)記定義，定義的是網(wǎng)頁(yè)上一個(gè)顯示的區(qū)域3、 語(yǔ)法格式: <html> head> title。</title> </head> <frameset < frame src=“url”/> frameset>html 說(shuō)明：框架文檔的書(shū)寫(xiě)格式與和html文檔的書(shū)寫(xiě)格式基本相同，唯一不同的

42、是使用frameset標(biāo)記替換了body標(biāo)記4、 框架結(jié)構(gòu)1） 左右結(jié)構(gòu)2） 上下結(jié)構(gòu) 3） 嵌套結(jié)構(gòu) 左右結(jié)構(gòu)：采用cols屬性,即在垂直方向?qū)g覽器分割成多個(gè)窗口 語(yǔ)法格式: frameset cols=“value",“value”,。> < frame src=“url"/ frame src=“url”/> </frameset> Value 值可以是數(shù)值也可以是百分比，還可以混合；數(shù)值之間用逗號(hào)“,”進(jìn)行分割,有幾個(gè)值則說(shuō)明窗口就被分割成幾個(gè)部分； 上下結(jié)構(gòu)：采用rows屬性，即在水平方向?qū)g覽器分割成多個(gè)窗口語(yǔ)法格式：frames

43、et rows=“value",“value”，。 frame src=“url”/ frame src=“url”/> /frameset例如：將網(wǎng)頁(yè)頁(yè)面水平分割成三個(gè)部分（10%，20%，60）嵌套結(jié)構(gòu):既有左右分割，有上下分割 語(yǔ)法格式：<frameset rows=“value",“value”，.> frame src=“url”/。frameset cols=“value”，“value”，。> frame src=“url”/ /frameset </frameset>例: 將網(wǎng)頁(yè)分割成田字形2、 框架集的屬性a) 設(shè)置窗口

44、框架寬度 border語(yǔ)法格式：<frameset rows=“value”,“value”,. Border“"> < frame src=“url”/> < frame src=“url"/ </framesetb) 設(shè)置邊框顏色bordercolor語(yǔ)法格式： <frameset rows=“value”,“value”，. border=“value" bordercolor=“colorvalue" frame src=“url”/ < frame src=“url”/> </fram

45、esetc) 設(shè)置框架隱藏frameborder語(yǔ)法格式： frameset cols=“value”,“value"，。 frameborder=“值” frame src=“url”/> frame src=“url"/ </frameset>值為：0或者1，0 表示不顯示邊框，1表示顯示邊框，默認(rèn)情況下值為13、 框架屬性a) scr:用于設(shè)置框架顯示的文件路徑；語(yǔ)法格式: frame src=“url"/>,如果沒(méi)有src屬性則表示該窗口顯示為空白b) name 用于定義框架的名稱(chēng) 語(yǔ)法格式： frame src=“url” nam

46、e=“”/>c) frameborder屬性用于顯示框架，值與框架集一樣d) scrolling屬性用于設(shè)定是否有滾動(dòng)條value值有兩個(gè)“yes"和“no”“auto”語(yǔ)法格式:< frame src=“url” name=“" scrolling=“vlue”/e) noresize 屬性用于用戶(hù)能否自己調(diào)整框架窗口大小 語(yǔ)法格式：< frame src=“url” name=“" scrolling=“vlue”noresize/ 注意：此屬性無(wú)屬性值f) marginwidth屬性，用于設(shè)定內(nèi)容與框架的距離語(yǔ)法格式： frame src=

47、“url” name=“"marginwidth=“vlue” /g) marginheight屬性,用于設(shè)定框架邊緣高度語(yǔ)法格式：< frame src=“url” name=“”marginheight=“vlue” /五、作業(yè) 1、用框架將頁(yè)面分割成左右兩個(gè)部分(20,80%），然后再把右部上下分割成相等兩個(gè)部分，并設(shè)置左邊框架名稱(chēng)為left，而且左邊框架窗口顯示滾動(dòng)條，右邊窗口不顯示滾動(dòng)條，左邊框架上部分連接到http：/，右框架上部分接到http：/;第十章 使用css樣式表教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的:1）掌握css樣式表使用方法;2）掌握css分類(lèi)；3）屬

48、性的使用2、要求：1）css樣式表使用；2）掌握css分類(lèi)及其屬性;二、教學(xué)重點(diǎn)與難點(diǎn) 重點(diǎn)：樣式表的使用 難點(diǎn)：樣式表的名稱(chēng)定義 三、教學(xué)方法與手段講授法、案例演示、習(xí)題法四、內(nèi)容部分 1、認(rèn)識(shí)css Css又稱(chēng)層疊樣式表，是一種現(xiàn)在大家都使用的網(wǎng)頁(yè)技術(shù)，為大多瀏覽器支持,成為網(wǎng)頁(yè)設(shè)計(jì)必不可少的工具;2、樣式表組成 1)選擇符 此組樣式編碼所要針對(duì)的對(duì)象，可以是一個(gè)標(biāo)記如（body，h1等）,也可以是定義了的id或class標(biāo)記；2）樣式屬性：顏色、大小、定位、浮動(dòng)等3）值：指定值、數(shù)字、百分比3、樣式表類(lèi)型 外聯(lián)樣式表、內(nèi)聯(lián)樣式表、內(nèi)嵌樣式表4、語(yǔ)法格式 如: 1）<p class=

49、“h”>./p> 樣式表格式： .h.。 p id=“h">.</p 樣式表格式: h.。五、作業(yè)1、 應(yīng)用外聯(lián)樣式表對(duì)頁(yè)面進(jìn)行簡(jiǎn)單布局;四、網(wǎng)頁(yè)設(shè)計(jì)實(shí)訓(xùn)部分 1、 實(shí)訓(xùn)目的與要求網(wǎng)頁(yè)設(shè)計(jì)dreamwvaver綜合實(shí)訓(xùn)主要目的是讓學(xué)生通過(guò)這門(mén)實(shí)踐課程的學(xué)習(xí)了解和掌握網(wǎng)頁(yè)設(shè)計(jì)的基本方法和技巧，通過(guò)不斷上機(jī)實(shí)踐訓(xùn)練達(dá)到能夠熟練順利完成網(wǎng)站的制作。掌握網(wǎng)站設(shè)計(jì)流程、技巧，集中實(shí)踐使學(xué)生綜合運(yùn)用所學(xué)習(xí)的網(wǎng)頁(yè)設(shè)計(jì)知識(shí)及以前所學(xué)習(xí)的計(jì)算機(jī)方面的知識(shí)，按照網(wǎng)站制作的流程，完成一個(gè)具體、綜合性的網(wǎng)站;鞏固學(xué)生系統(tǒng)性的知識(shí)，培養(yǎng)學(xué)生解決實(shí)際問(wèn)題的能力,鍛煉相互合作的工作能力，提

50、高學(xué)生綜合素質(zhì)。2、 實(shí)訓(xùn)內(nèi)容1）實(shí)例實(shí)訓(xùn)(綠色食品、手機(jī)、餐飲、美容)以綠色食品網(wǎng)站設(shè)計(jì)的實(shí)例指導(dǎo)學(xué)生如何獨(dú)立完成食品網(wǎng)站站點(diǎn)的設(shè)計(jì)和制作。讓學(xué)生在機(jī)房實(shí)際操作,按照給定的實(shí)例完成實(shí)例中整個(gè)站點(diǎn)頁(yè)面的創(chuàng)建和設(shè)計(jì)。2)自建站點(diǎn)實(shí)訓(xùn)(綠色食品、手機(jī)、餐飲、美容）讓學(xué)生自行選擇站點(diǎn)的主題，從規(guī)劃站點(diǎn)到一步一步完成整個(gè)站點(diǎn)的規(guī)劃、設(shè)計(jì)、創(chuàng)建、調(diào)試等工作。3）總結(jié)對(duì)學(xué)生的全部作品進(jìn)行批改，并選擇案例對(duì)實(shí)訓(xùn)的結(jié)果進(jìn)行考核。3、 參考步驟標(biāo)題實(shí)訓(xùn)內(nèi)容實(shí)訓(xùn)課時(shí)實(shí)訓(xùn)實(shí)訓(xùn)說(shuō)明、知識(shí)回顧基本知識(shí)回顧實(shí)訓(xùn)作品策劃、規(guī)劃書(shū) 整體布局設(shè)計(jì)搜集和創(chuàng)建資源效果圖制作程序設(shè)計(jì)首頁(yè)模板設(shè)計(jì)二級(jí)頁(yè)面模板設(shè)計(jì)各頁(yè)面的細(xì)化、測(cè)試修改

51、文檔總結(jié)4、實(shí)訓(xùn)準(zhǔn)備1)軟件準(zhǔn)備Dreamweaver 、firework、PhotoShop、 logomaker 、Flash中文版（本實(shí)訓(xùn)對(duì)FLASH技術(shù)不做要求）。2)硬件準(zhǔn)備網(wǎng)絡(luò)條件：與因特網(wǎng)連接的局域網(wǎng)。（最好不帶還原的計(jì)算機(jī)）教師用機(jī)：Windows xp或win7及以上版本.學(xué) 生用機(jī)：Windows xp或win7及以上版本.5、考核辦法1) 網(wǎng)站規(guī)劃書(shū) 10分2) 效果圖設(shè)計(jì) 20分3) 編寫(xiě)代碼 30分4) 實(shí)訓(xùn)出勤 20分5) 技術(shù)含量 10分6) 整體美觀統(tǒng)一搭配 10分6、實(shí)訓(xùn)內(nèi)容說(shuō)明由實(shí)訓(xùn)指導(dǎo)教師自行選擇網(wǎng)站作為實(shí)例，實(shí)例要求如下：1. 選擇企業(yè)綠色食品網(wǎng)站或者其

52、它企業(yè)網(wǎng)站。2. 站點(diǎn)模塊功能清晰，能反映各模塊的基本功能、結(jié)構(gòu)清晰、風(fēng)格統(tǒng)一、色調(diào)一致.3. 為了便于教學(xué),站點(diǎn)應(yīng)該具有大熱dreamweaver頁(yè)面布局、鏈接、CSS+div樣式等網(wǎng)頁(yè)設(shè)計(jì)制作中常用的知識(shí)點(diǎn)和操作。7、內(nèi)容1）講解和演示整個(gè)站點(diǎn)的制作過(guò)程和設(shè)計(jì)方法。2）、學(xué)生自由組隊(duì)（三人一組分工合作），也可以一人一組,最多不超過(guò)三人。8、實(shí)訓(xùn)步驟（學(xué)生實(shí)訓(xùn)周內(nèi)完成)1）完成整個(gè)站點(diǎn)規(guī)劃（規(guī)劃書(shū)）、包括色調(diào)、logo站點(diǎn)風(fēng)格策劃；2）素材、文檔材料收集3)效果圖制作(firework或ps、flash）4)頁(yè)面設(shè)計(jì)、頁(yè)面布局（dreamweaver、 css+div）5）程序設(shè)計(jì)、調(diào)試6）模