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

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

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

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

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

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

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

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

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

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

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

12、題標記2）掌握文本基本標記、文本格式化標記3）掌握段落標記、水平線標記二、教學(xué)重點與難點 重點：掌握文本基本標記、文本格式化標記難點：單、雙標記的區(qū)分 三、教學(xué)方法與手段講授法、案例演示、討論法四、內(nèi)容部分1、設(shè)置段落的標記 段落標記是一個雙標記，每個標記對表示一個段落； 語法格式：<p>這里表示段落</p>2、換行標記 換行標記是單標記，即不會成對出現(xiàn)，是在尖括號中加一個</br>的單標記； 語法格式：.</br>3、給代碼添加注釋 添加注釋是不會再網(wǎng)頁中顯示的 語法格式： <! 注釋>4、粗體和斜體 1） 粗體標記，是一

13、對雙標記，起到強調(diào)的作用 語法格式：<b>標題文字</b> 2） 斜體標記語氣較弱 語法格式：<i>表示斜體標記</i>5、下劃線與刪除線標記 為了使部分文字特別顯示，可以使用下劃線或者刪除線標記,也是一對雙標記； 語法格式： <u>下劃線的</u> <s>刪除線的</s>6、上標和下標 雙標記 語法格式：^上標 _下標 H2o;H 2so4;a2+b2=c27、文字標記：是一個雙標記語法格式：<font

14、color=”顏色值”>文字</font> 8、標題標記對齊屬性 h1-h6(h1:表示文字標題最大h6表示文字標題最小) 對齊屬性：align( left、center、right) 如：<h1 align=“center”>標題居中</h1>9、文本標記的屬性 1）字體屬性 face 如 <font face=“需要的字體”>云南城市建設(shè)職業(yè)學(xué)院</font> 2)設(shè)置字體大小屬性：size 如 <font size=“值”>云南城市建設(shè)職業(yè)學(xué)院</font> 絕對值：1-7 相對值：-44的整數(shù)，字

15、體相對于3號放大和縮小字號 注意：屬性與屬性之間用空格隔開 3）字體的顏色屬性:color如 <font color=“顏色值”>云南城市建設(shè)職業(yè)學(xué)院</font>可以用英文單詞或者二進制代碼10、粗體標記：b與 strong 語法格式：<b>需要加粗的文字</b> <strong>需要加粗的文字</strong>標記是可以嵌套的11、斜體的標記 1) i 、em、cite 語法格式： <i>需要變?yōu)樾斌w的文字</i><em>需要變?yōu)樾斌w的文字</em><cite>

16、;需要變?yōu)樾斌w的文字</cite>12、大字號和小字號標記）big和small語法格式 <big>需要加大的文字big<>需要加大的文字加大：在原來定義的字體大小基礎(chǔ)上加大一個級別；變?。涸谠瓉矶x的字體大小基礎(chǔ)上變小一個級別；、不自動換行的標記1)nobr語法格式：<nobr>不換行的文字</nobr>14、水平線標記 1）<hr /> 水平線標記的屬性：width（寬度）、 color（顏色）、size（高度）、noshade （無陰影）、align（對齊）15、 其他特殊標記 1）空格： &nbsp2) &l

17、t; &lt;3) > &gt;五、作業(yè) 制作一個公司簡介頁面（包含標題、文字、下劃線、圖片、橫線）第三章 使用圖像教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的：1）掌握網(wǎng)頁中圖形圖像的格式；2）掌握網(wǎng)頁中圖像插入的方法及圖像的超鏈接；2、要求：1）掌握常用圖像的格式2）掌握網(wǎng)頁中插入圖像的方法，及插入圖像的標記二、教學(xué)重點與難點 重點：網(wǎng)頁中圖像插入的方法及圖像的超鏈接難點：超鏈接中圖像的地址 三、教學(xué)方法與手段講授法、案例演示、討論法、習題法四、內(nèi)容部分1、常見的一些圖像格式1） jpeg 壓縮圖像格式,不支持透明，1670萬像素，圖像要求比較絢麗的時候使用；2） Gif（圖

18、形交換格式） 支持透明，256色，支持動畫（由多張位圖連續(xù)播放形成）3） Png（firework） 支持透明1670萬像素，是網(wǎng)絡(luò)可移植格式；2、 如何在網(wǎng)頁中插入圖像<img> :單標記語法格式： <img src=“地址”> Src：表示指定圖像的位置（路徑） 絕對地址：具有詳細的位置，即提供目標文檔的完整主機名稱、路徑信息、及文檔的全稱； 相對地址：從當前文檔開始的地址1） 如果當前文檔和目標文檔位置平行，則直接書寫目標文檔的全稱；2） 如果當前文檔和目標文檔文件夾位置平行，則輸入路徑為 文件夾名稱/目標文檔名稱3） 如果當前文檔所在文件夾和目標文檔位置平行，則

19、書寫：.目標文檔全稱3、屬性: 1）alt屬性 語法格式：<img src=“地址” alt=“顯示圖片信息”>2）圖像寬度高度屬性：width、height <img src=“地址” alt=“顯示圖片信息”width=“屬性值”>3）vspace（垂直間距）、hspace（水平間距）五、作業(yè)制作一個圖文并茂的婚紗網(wǎng)頁（素材圖片自己到互聯(lián)網(wǎng)上找）第四章 使用列表教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的：1）掌握有序列表；2）掌握無序列表2、要求：1）了解列表標記2）掌握有序、無序、定義、菜單列表的使用方法二、教學(xué)重點與難點 重點：列表標記難點：有序、無序列表浮動的使用

20、三、教學(xué)方法與手段講授法、案例演示、習題法四、內(nèi)容部分1、列表的使用定義說明：列表是一種數(shù)據(jù)的排列方式,對頁面的布局非常重要,分為三類:有序列表、無序列表、自定義列表。 無序列表：項目符號由幾個符號構(gòu)成 有序列表：項目符號由字母、數(shù)字排列構(gòu)成 自定義列表：通過自己靈活定義1） 有序列表 語法格式： <ol> <li>表示列表項1</li> <li>表示列表項2</li> <li>表示列表項3</li> </ol>難點說明：本列表會自動換行，不用加換行符號，如果非要成一行，那么就給他加上css定義浮動

21、； 有序列表的序號類型（1、a、A、i、I）默認情況下是數(shù)字；語法格式 <ol type=“序號類型”> <li>表示列表項1</li> <li>表示列表項2</li> <li>表示列表項3</li> </ol>設(shè)置列表的起始數(shù)值 <ol type=“序號類型”start=“起始數(shù)值”> <li>表示列表項1</li> <li>表示列表項2</li> <li>表示列表項3</li> </ol>注意：sta

22、rt=“起始數(shù)值”中起始數(shù)值必須為數(shù)字，否則不起作用；2） 無序列表 無序列表的項目排列沒有順序，以符號作為分項標識；a) 語法格式<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li></ul><ul>和</ul>分別表示無序列表的開始和結(jié)束，<li>表示列表項；b) 無序列表的列表類型（實心圓、空心圓、方框）disccirclesquare)c) 無起始數(shù)值屬性3） 目錄列表顯示效果與無序列表相同，一般用來創(chuàng)建多列目錄a) 語法

23、格式 <dir ><li>列表項1</li><li>列表項2</li><li>列表項3</li></dir >b) 類型 <dir type=“類型”><li>列表項1</li><li>列表項2</li><li>列表項3</li></dir >列表類型（實心圓、空心圓、方框）disccirclesquare)c) 無起始數(shù)值屬性4） 定義列表a) 語法格式<dl>1321 <dt>

24、定義條件1</dt> <dd>定義描述1</dd><dt>定義條件2</dt> <dd>定義描述2</dd><dt>定義條件3</dt> <dd>定義描述3</dd></dl>5） 菜單列表用于設(shè)計單列菜單列表，顯示效果與無序列表相同； 語法格式： <menu ><li>列表項1</li><li>列表項2</li><li>列表項3</li></menu >五

25、、作業(yè)1、輸入五組列表（無序、有序、自定義、菜單、目錄列表）代碼；并給每組第一個列表項加上超鏈接，鏈接目標自定。第五章 使用表格教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的：1）掌握創(chuàng)建表格的方法；2）掌握表格屬性2、要求：1）掌握創(chuàng)建表格方法；2）掌握表格邊框、背景、行、列屬性二、教學(xué)重點與難點 重點：創(chuàng)建表格 難點：合并單元格 三、教學(xué)方法與手段講授法、案例演示、習題法、問題法四、內(nèi)容部分1、建立表格用到的四個標記 1）table,是雙標記，用于定義表格元素，<table>和</table>2）tr 是雙標記，用于定義表格的行；<tr>和</tr3）td是

26、雙標記，用于定義表格的單元格；<td>和</td>4）th是雙標記，用于定義表頭;<th>和</th>2、語法格式<table> <tr> <th>第一行第一列單元格</th><th>第一行第一列單元格</th><th>第一行第一列單元格</th></tr> <tr> <th>第一行第一列單元格</th><th>第一行第一列單元格</th><th>第一行第一列單元格&l

27、t;/th></tr> </table>姓名性別年齡張三豐男25總結(jié)：<th>與</th>表示表頭，里面的內(nèi)容，自動加粗、自動居中； <td>和</td>表示單元格，里面的內(nèi)容不加粗，不居中；3、<table>標記屬性 1）、border: 表示表格的邊框?qū)傩?，屬性值為?shù)值；border= "數(shù)值"； 2）、width：表示表格寬度屬性（屬性值示數(shù)值或者百分比） 3）、height：表格高度屬性（屬性值示數(shù)值或者百分比） 4）、bgcolor:設(shè)置表格背景顏色的屬性屬性值可以是英文單詞

28、、也可以是rgb或者cmyk顏色值 5）、background:用于設(shè)置表格背景圖像屬性； 屬性值：就是設(shè)置背景路徑值（建議使用相對路徑）6）、cellspacing:用來設(shè)置表格間距，屬性值是數(shù)值；7）、cellpadding：用來設(shè)置表格邊距，屬性值是數(shù)值；8）align:用于設(shè)置表格對齊的屬性：屬性值：leftrightcenter(左對齊、右對齊、居中對齊)4、表格行的控制 1）width：表示行的寬度（屬性值示數(shù)值或者百分比） 2）height：行高度屬性（屬性值示數(shù)值或者百分比） 3） align：設(shè)置行中文字對齊方式； 4）vlign：文字垂直方向?qū)R 5）bgcolor:設(shè)置表

29、格行背景顏色的屬性屬性值可以是英文單詞、也可以是rgb或者cmyk顏色值6） bordercolor：設(shè)置表格行邊框顏色5、td單元格的屬性控制 1）align、vlign：單元格中水平、垂直方向文字對齊方式； 2）bordercolor：單元格邊框?qū)傩?3）bgcolor：單元格背景顏色 4）rowspan：表示單元格跨行的行數(shù) 5）colspan：表示單元格跨列的列數(shù)五、作業(yè)作業(yè)1、用html標記語言中表格標記和屬性等完成上圖所示表格；2、用html標記語言中表格標記和屬性等完成本班級課程表；第六章 使用建立超鏈接教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的：1）掌握超鏈接的基本知識；2）掌握超鏈

30、接建立方法2、要求：1）掌握網(wǎng)頁內(nèi)部鏈接方法；2）掌握網(wǎng)頁外部鏈接方法；3）掌握錨點鏈接方法二、教學(xué)重點與難點 重點：外部鏈接、內(nèi)部鏈接方法 難點：鏈接時路徑的正確書寫 三、教學(xué)方法與手段講授法、案例演示、習題法四、內(nèi)容部分1、路徑的概念：路徑分為相對路徑和絕對路徑相對路徑以引用文件的網(wǎng)頁所在的位置為參考基礎(chǔ)而建立的路徑如：1) 如果鏈接到同一目錄下，則直接輸入要鏈接的文檔的名稱；2) 如果鏈接到下一級目錄中的文件，則先輸入目錄名，然后再加“/”，在輸入文件名3) 如果鏈接到上一級目錄中的文件，先輸入“./”再輸入目錄名、文件名絕對路徑（）絕對路徑是以站點的根目錄為參考基礎(chǔ)的目錄路徑在www中

31、以http開頭的鏈接都是絕對路徑說明：當鏈接到本機器上的文件時，建議使用相對路徑，如果使用絕對路徑，當把文件移動到其它盤符后，那么鏈接就會失效，這樣就要對文件鏈接重新編輯才能使用。3、 建立超級鏈接文字1） 格式<a>要鏈接的文字</a><a href=“路徑”>要鏈接的文字</a><a>:表示鏈接的開始</a>：鏈接的結(jié)束href：定義文件鏈接的地址（路徑、位置）2） Target用于指定打開鏈接的目標窗口，默認方式是在原來的窗口中打開-blank:在瀏覽器新的窗口中打開；-parent：將鏈接的文件載入含有該鏈接框架的

32、副窗口中打開；-self：在同一框架中打開-top：在當前整個瀏覽器窗口中打開格式：<a href=“路徑”target=“-blank”>要鏈接的文字</a>圖像的鏈接要將圖片做成超鏈接，只需將<img>標記放在<a>和</a>之間即可；格式： <a href=“鏈接圖片地址”><img scr=“參數(shù)”></a>郵箱的鏈接格式：<a href=“mailto：E-mail地址” cc=“抄送人E-mail地址”&subject=“郵件主題” &body=“郵件正文”>

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

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

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

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

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

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

39、ype=“type-name”>4） 文本框單行文本框：當type的屬性值為“text”時表示輸入項輸入的字符串是以單行顯示； value：定義文本框初始值 size：定義文本框長度 maxlength：定義輸入最大字符串數(shù)如：聯(lián)系方式：電子郵件：聯(lián)系地址：手機號碼：電話號碼：QQ：5） 密碼框如： 用戶登錄 用戶名：輸入密碼：當type屬性的值：為password時表示的是密碼框，其他屬性與text相似，不同之處，輸入的 內(nèi)容均以*表示，保證密碼的安全性 語法格式： <input type =“password” name=“”file-name” maxlength=“數(shù)值”&

40、gt;2、 按鈕表單中的按鈕起著至關(guān)重要的作用，主要有三種類型：普通按鈕、提交按鈕、重置按鈕；1）普通按鈕 當type的屬性值為 button時表示該輸入項輸入的 是普通按鈕，語法格式如下： <input type=“button”name=“file-name” value=“button-value”> 注意：value 表示顯示在按鈕上面的文字2）提交按鈕 當type的屬性值為submit時表示該輸入項輸入的 是提交按鈕，語法格式如下：<input type=“submit”name=“file-name” value=“submit-value”>3）重置按鈕

41、當type的屬性值為reset時表示該輸入項輸入的 是重置按鈕，語法格式如下：<input type=“reset”name=“file-name” value=“reset-value”>3、 單選框與復(fù)選框1） 單選框當type的屬性值為radio時表示該輸入項輸入的 是單選項，語法格式如下： <input type=“radio”name=“file-name” value=“value”>2） 復(fù)選框 當type的屬性值為checkbox時表示該輸入項輸入的 是復(fù)選項，語法格式如下：<input type=“checkbox”name=“file-name

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

43、分 框架的作用：通常用于頁面導(dǎo)航；框架1、 框架集 <frameset>.<frameset>2、 框架 <frame><frame> 框架集：用<frameset>.<frameset>標記來定義，用于定義網(wǎng)頁顯示的框架數(shù)量、大小 等其他屬性； 框架：用<frame><frame>標記定義，定義的是網(wǎng)頁上一個顯示的區(qū)域3、 語法格式： <html> <head> <title>.</title> </head> <frameset&

44、gt; < frame src=“url”/> <frameset><html> 說明：框架文檔的書寫格式與和html文檔的書寫格式基本相同，唯一不同的是使用frameset標記替換了body標記4、 框架結(jié)構(gòu)1） 左右結(jié)構(gòu)2） 上下結(jié)構(gòu) 3） 嵌套結(jié)構(gòu) 左右結(jié)構(gòu)：采用cols屬性，即在垂直方向?qū)g覽器分割成多個窗口 語法格式： <frameset cols=“value”，“value”，.> < frame src=“url”/> < frame src=“url”/> </frameset> Value

45、值可以是數(shù)值也可以是百分比，還可以混合；數(shù)值之間用逗號“，”進行分割，有幾個值則說明窗口就被分割成幾個部分； 上下結(jié)構(gòu)：采用rows屬性，即在水平方向?qū)g覽器分割成多個窗口語法格式：<frameset rows=“value”，“value”，.> < frame src=“url”/> < frame src=“url”/> </frameset>例如：將網(wǎng)頁頁面水平分割成三個部分（10%，20%，60%）嵌套結(jié)構(gòu)：既有左右分割，有上下分割 語法格式：<frameset rows=“value”，“value”，.> < fr

46、ame src=“url”/>.<frameset cols=“value”，“value”，.> < frame src=“url”/> </frameset> </frameset>例： 將網(wǎng)頁分割成田字形2、 框架集的屬性a) 設(shè)置窗口框架寬度 border語法格式：<frameset rows=“value”，“value”，. Border“”> < frame src=“url”/> < frame src=“url”/> </frameset>b) 設(shè)置邊框顏色bordercol

47、or語法格式： <frameset rows=“value”，“value”，. border=“value” bordercolor=“color-value” > < frame src=“url”/> < frame src=“url”/> </frameset>c) 設(shè)置框架隱藏frameborder語法格式： <frameset cols=“value”，“value”，. frameborder=“值”> < frame src=“url”/> < frame src=“url”/> </fr

48、ameset>值為：0或者1，0 表示不顯示邊框，1表示顯示邊框，默認情況下值為13、 框架屬性a) scr：用于設(shè)置框架顯示的文件路徑；語法格式：< frame src=“url”/>，如果沒有src屬性則表示該窗口顯示為空白b) name 用于定義框架的名稱 語法格式：< frame src=“url” name=“”/>c) frameborder屬性用于顯示框架，值與框架集一樣d) scrolling屬性用于設(shè)定是否有滾動條value值有兩個“yes”和“no”“auto”語法格式：< frame src=“url” name=“” scrollin

49、g=“vlue”/>e) noresize 屬性用于用戶能否自己調(diào)整框架窗口大小 語法格式：< frame src=“url” name=“” scrolling=“vlue”noresize/> 注意：此屬性無屬性值f) marginwidth屬性，用于設(shè)定內(nèi)容與框架的距離語法格式：< frame src=“url” name=“”marginwidth=“vlue” />g) marginheight屬性，用于設(shè)定框架邊緣高度語法格式：< frame src=“url” name=“”marginheight=“vlue” />五、作業(yè) 1、用框架

50、將頁面分割成左右兩個部分（20%，80%），然后再把右部上下分割成相等兩個部分，并設(shè)置左邊框架名稱為left，而且左邊框架窗口顯示滾動條，右邊窗口不顯示滾動條，左邊框架上部分連接到,右框架上部分接到；第十章 使用css樣式表教學(xué)內(nèi)容一、教學(xué)目的和要求 1、目的：1）掌握css樣式表使用方法；2）掌握css分類；3）屬性的使用2、要求：1）css樣式表使用；2）掌握css分類及其屬性；二、教學(xué)重點與難點 重點：樣式表的使用 難點：樣式表的名稱定義 三、教學(xué)方法與手段講授法、案例演示、習題法四、內(nèi)容部分 1、認識css Css又稱層疊樣式表，是一種現(xiàn)在大家都使用的網(wǎng)頁技術(shù)，為大多瀏覽器支持，成為網(wǎng)

51、頁設(shè)計必不可少的工具；2、樣式表組成 1）選擇符 此組樣式編碼所要針對的對象，可以是一個標記如（body，h1等），也可以是定義了的id或class標記；2）樣式屬性：顏色、大小、定位、浮動等3）值：指定值、數(shù)字、百分比3、樣式表類型 外聯(lián)樣式表、內(nèi)聯(lián)樣式表、內(nèi)嵌樣式表4、語法格式 如： 1）<p class=“h”>.</p> 樣式表格式： .h. <p id=“h”>.</p> 樣式表格式： #h.五、作業(yè)1、 應(yīng)用外聯(lián)樣式表對頁面進行簡單布局；四、網(wǎng)頁設(shè)計實訓(xùn)部分 1、 實訓(xùn)目的與要求網(wǎng)頁設(shè)計dreamwvaver綜合實訓(xùn)主要目的是讓學(xué)生通

52、過這門實踐課程的學(xué)習了解和掌握網(wǎng)頁設(shè)計的基本方法和技巧，通過不斷上機實踐訓(xùn)練達到能夠熟練順利完成網(wǎng)站的制作。掌握網(wǎng)站設(shè)計流程、技巧，集中實踐使學(xué)生綜合運用所學(xué)習的網(wǎng)頁設(shè)計知識及以前所學(xué)習的計算機方面的知識，按照網(wǎng)站制作的流程，完成一個具體、綜合性的網(wǎng)站；鞏固學(xué)生系統(tǒng)性的知識，培養(yǎng)學(xué)生解決實際問題的能力，鍛煉相互合作的工作能力，提高學(xué)生綜合素質(zhì)。2、 實訓(xùn)內(nèi)容1）實例實訓(xùn)（綠色食品、手機、餐飲、美容）以綠色食品網(wǎng)站設(shè)計的實例指導(dǎo)學(xué)生如何獨立完成食品網(wǎng)站站點的設(shè)計和制作。讓學(xué)生在機房實際操作，按照給定的實例完成實例中整個站點頁面的創(chuàng)建和設(shè)計。2）自建站點實訓(xùn)（綠色食品、手機、餐飲、美容）讓學(xué)生自行

53、選擇站點的主題，從規(guī)劃站點到一步一步完成整個站點的規(guī)劃、設(shè)計、創(chuàng)建、調(diào)試等工作。3）總結(jié)對學(xué)生的全部作品進行批改，并選擇案例對實訓(xùn)的結(jié)果進行考核。3、 參考步驟標題實訓(xùn)內(nèi)容實訓(xùn)課時實訓(xùn)實訓(xùn)說明、知識回顧基本知識回顧實訓(xùn)作品策劃、規(guī)劃書 整體布局設(shè)計搜集和創(chuàng)建資源效果圖制作程序設(shè)計首頁模板設(shè)計二級頁面模板設(shè)計各頁面的細化、測試修改文檔總結(jié)4、實訓(xùn)準備1）軟件準備Dreamweaver 、firework、PhotoShop、 logomaker 、Flash中文版（本實訓(xùn)對FLASH技術(shù)不做要求）。2）硬件準備網(wǎng)絡(luò)條件：與因特網(wǎng)連接的局域網(wǎng)。（最好不帶還原的計算機）教師用機：Windows xp

54、或win7及以上版本。學(xué) 生用機：Windows xp或win7及以上版本。5、考核辦法1) 網(wǎng)站規(guī)劃書 10分2) 效果圖設(shè)計 20分3) 編寫代碼 30分4) 實訓(xùn)出勤 20分5) 技術(shù)含量 10分6) 整體美觀統(tǒng)一搭配 10分6、實訓(xùn)內(nèi)容說明由實訓(xùn)指導(dǎo)教師自行選擇網(wǎng)站作為實例，實例要求如下：1. 選擇企業(yè)綠色食品網(wǎng)站或者其它企業(yè)網(wǎng)站。2. 站點模塊功能清晰，能反映各模塊的基本功能、結(jié)構(gòu)清晰、風格統(tǒng)一、色調(diào)一致。3. 為了便于教學(xué)，站點應(yīng)該具有大熱dreamweaver頁面布局、鏈接、CSS+div樣式等網(wǎng)頁設(shè)計制作中常用的知識點和操作。7、內(nèi)容1）講解和演示整個站點的制作過程和設(shè)計方法。2）、學(xué)生自由組隊（三人一組分工合作），也可以一人一組，最多不超過三人。8、實訓(xùn)步驟（學(xué)生實訓(xùn)周內(nèi)完成）1）完成整個站點規(guī)劃（規(guī)劃書）、包括色調(diào)、logo站點風格策劃；2）素材、文檔材料收集3