網頁設計課程標準

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

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

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

4、p,HTML, CSSDIV/D Dreamweaver網頁設計flash » «T1基礎能力美術，圖案，色彩基礎網站建設實訓等，詳細的可見下表，它們是支撐“網站建設”核心能力的基礎課程?；A能力擴展能力高級能力T1:網頁設計師HTML , CSS DIVPHP （或ASP, JSP）等動態(tài)網站開發(fā)工具基礎能力HTML+div+cssDreamweaver快速建站模板工具Ajax等取新技術FireWorkFireWork網頁效果圖制作PhotoShop 基礎一的語后表達、溝通能力圖形圖像處理Flash網站商業(yè)廣告宣傳動畫制作能力廣告宣傳動畫flash圖片制作T2:網貝美工T

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

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

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

8、完整創(chuàng)建過程對各環(huán)節(jié)知識、技能進行知識鞏固和運用，圍繞預設能力目標，對學習目標、學習任務、能力要求、教學內容、活動設計和教學建議等都均參照人才培養(yǎng)方案。教學方法在教學網頁設計基礎中主要采用案例、講解、實做的方式來進行，通過理論、案例的講解和演示，讓學生能夠清楚到實踐的操作，掌握本課程的相關知識。圖表表示如下教學方法理實結合法oo講授法Q/技學KC討論教學法° 方法,0對比法案例教學法0°任務驅動法案例教學法：教學過程中。老師舉例子講解一個網站創(chuàng)建的過程和方法，其它相關類網 站的創(chuàng)建就可以用第一個網站建設中的一些方法去完成。討論式教學：注重課堂教學整體設計，通過引入問題，如建

9、設網站的市場分析，可以 組織學生通過討論尋找答案，讓學生參與交流、分享自己的看法，并進行總結和歸納。通過 討論，學生真正做到了積極參與課堂學習。分析問題、解決問題的能力，又加強了理論知識在實際的應用。還有其它的一些方法如講授法、任務驅動法等，再此就不多說。二、課程目標課程的總體目標通過本課程的學習，使學生掌握網頁設計的整個工作流程和方法，能夠使用網頁三劍客及其它相關軟件完成網站前端相關工作（如網頁效果圖制作、網頁布局、用代碼生成網頁等）在教學過程中，通過團隊開發(fā)，形成基本的職業(yè)道德規(guī)范和職業(yè)素養(yǎng)，及團隊合作精神。三、內容標準第一章HTML網頁基礎教學內容一、教學目的和要求1 、目的：1）掌握H

10、TMILC件編寫方法；2）使用瀏覽器瀏覽HTM源文件；3）了解 html 基本概念2、要求：掌握常用的瀏覽器打開網頁方法（IE 、火狐、360瀏覽器、谷歌瀏覽器等），掌握網頁設計的一些基本概念；二、教學重點與難點重點：網頁設計相關概念難點：網頁設計相關屬性3、 教學方法與手段講授、案例演示、實際操作、作業(yè)通過理論講授的方式讓學生了解本章的理論的內容4、 內容部分經典網頁欣賞1、1)藍色代表海洋，宇宙，大海。是一種博大的顏色。此網頁采用主色為藍色。代表了一種博大的精神。也代表了本公司的科技領域強項。不同的藍色的轉換給人一種輕松的感覺。網頁右邊加以黃色區(qū)域來烘托出產品的外形，以及獨特。網頁整體簡單

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

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

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

14、=c27、文字標記：是一個雙標記語法格式：<font color= ”顏色值”>文字</font>8、標題標記對齊屬性h1-h6（h1: 表示文字標題最大h6 表示文字標題最小）對齊屬性：align（ left 、 center 、 right）如： <h1 align= “ center ” >標題居中</h1>9、文本標記的屬性1 ）字體屬性face如 <font face= “需要的字體”>云南城市建設職業(yè)學院</font>2 ） 設置字體大小屬性：size如<font size= “值”>云南城市建設職

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

16、em瑞要變?yōu)樾斌w的文字 </em><cite> 需要變?yōu)樾斌w的文字</cite>12、大字號和小字號標記） big 和 small語法格式<big> 需要加大的文字v/ big >< s m a 1 1 >需要加大的文字</ s m a 1 1 >加大：在原來定義的字體大小基礎上加大一個級別；變?。涸谠瓉矶x的字體大小基礎上變小一個級別；1 3、不自動換行的標記1）nobr語法格式：<nobr> 不換行的文字</nobr>14、水平線標記1） ） <hr />水平線標記的屬性：wi

17、dth （寬度） 、 color （顏色） 、 size （高度） 、 noshade （無陰影） 、 align （對齊）1 ）空格：&nbsp2） < &lt;3） > &gt;五、 作業(yè) 制作一個公司簡介頁面（包含標題、文字、下劃線、圖片、橫線）第三章 使用圖像教學內容一、教學目的和要求1 、目的：1 ）掌握網頁中圖形圖像的格式；2）掌握網頁中圖像插入的方法及圖像的超鏈接；2、要求：1 ）掌握常用圖像的格式2）掌握網頁中插入圖像的方法，及插入圖像的標記二、教學重點與難點重點：網頁中圖像插入的方法及圖像的超鏈接難點：超鏈接中圖像的地址3、 教學方法與手段

18、講授法、案例演示、討論法、習題法4、 內容部分1 、常見的一些圖像格式1 ） jpeg 壓縮圖像格式, 不支持透明，1670 萬像素，圖像要求比較絢麗的時候使用；2 ）Gif （圖形交換格式）支持透明，256 色，支持動畫（由多張位圖連續(xù)播放形成）3）Png( firework )支持透明1670 萬像素，是網絡可移植格式；2、 如何在網頁中插入圖像<img> : 單標記語法格式：<img src= “地址” >Src ：表示指定圖像的位置（路徑）絕對地址：具有詳細的位置，即提供目標文檔的完整主機名稱、路徑信息、及文檔的全稱；相對地址：從當前文檔開始的地址1） ）如果當

19、前文檔和目標文檔位置平行，則直接書寫目標文檔的全稱；2） 如果當前文檔和目標文檔文件夾位置平行，則輸入路徑為文件夾名稱/ 目標文檔名稱3） 如果當前文檔所在文件夾和目標文檔位置平行，則書寫：目標文檔全稱3、屬性:1 ） alt 屬性語法格式：<img src= “地址”alt= “顯示圖片信息”>2）圖像寬度高度屬性：width 、 height<img src= “地址”alt= “顯示圖片信息”width= “屬性值”>3） vspace （垂直間距）、hspace （水平間距）五、 作業(yè) 制作一個圖文并茂的婚紗網頁（素材圖片自己到互聯(lián)網上找）第四章 使用列表教學內

20、容一、教學目的和要求1 、目的：1 ）掌握有序列表；2）掌握無序列表2、要求：1 ）了解列表標記2）掌握有序、無序、定義、菜單列表的使用方法二、教學重點與難點重點：列表標記難點：有序、無序列表浮動的使用3、 教學方法與手段講授法、案例演示、習題法4、 內容部分1 、列表的使用定義說明：列表是一種數(shù)據(jù)的排列方式, 對頁面的布局非常重要, 分為三類: 有序列表、無序列表、自定義列表。無序列表：項目符號由幾個符號構成有序列表：項目符號由字母、數(shù)字排列構成自定義列表：通過自己靈活定義1） 有序列表語法格式：<ol><li>表示列表項1</li><li>表

21、示列表項2</li><li>表示列表項3</li></ol>難點說明：本列表會自動換行，不用加換行符號，如果非要成一行，那么就給他加上css定義浮動;有序列表的序號類型(1、a、A i、I )默認情況下是數(shù)字;語法格式<ol type="序號類型”><li>表小歹”表項1</li><li>表小列表項2</li><li>表小列表項3</li></ol>設置列表的起始數(shù)值<ol type=“序號Wstart=“起始數(shù)值”><li

22、>表小列表項1</li><li>表小列表項2</li><li>表小列表項3</li></ol>注意：start="起始數(shù)值"中起始數(shù)值必須為數(shù)字，否則不起作用;2)無序列表無序列表的項目排列沒有順序，以符號作為分項標識；a) 語法格式<ul><li> 列表項 1</li><li> 列表項 2</li><li> 列表項 3</li></ul><ul>和<仙> 分別表不無序列表的開始

23、和結束，<li>表不列表項;b) 無序列表的列表類型(實心圓、空心圓、方框) disccirclesquare)3)目錄列表c)無起始數(shù)值屬性顯示效果與無序列表相同，一般用來創(chuàng)建多列目錄a) 語法格式<dir ><li> 列表項 1</li><li> 列表項 2</li><li> 列表項 3</li></dir >b) 類型<dir type="類型”><li> 列表項 1</li><li> 列表項 2</li><

24、;li> 列表項 3</li></dir >列表類型(實心圓、空心圓、方框) disccirclesquare)c)無起始數(shù)值屬性4) 定義列表a)語法格式<dl>1321<dt> 定義條件1 </dt><dd>定義描述1</dd><dt>定義條件2</dt>< dd>定義描述2</dd>< dt>定義條件3</dt>< dd>定義描述3</dd></dl>5)菜單列表用于設計單列菜單列表，顯示效果

25、與無序列表相同；語法格式：<menu ><li> 列表項 1</li><li> 列表項2</li><li> 列表項3</li></menu >五、 作業(yè) 1 、輸入五組列表（無序、有序、自定義、菜單、目錄列表）代碼；并給每組第一個列表項加上超鏈接，鏈接目標自定。第五章 使用表格教學內容一、教學目的和要求1 、目的：1 ）掌握創(chuàng)建表格的方法；2）掌握表格屬性2、要求：1 ）掌握創(chuàng)建表格方法；2）掌握表格邊框、背景、行、列屬性二、教學重點與難點重點：創(chuàng)建表格難點：合并單元格3、 教學方法與手段講授法、案

26、例演示、習題法、問題法4、 內容部分1 、建立表格用到的四個標記1） table,是雙標記，用于定義表格元素，<table>和</table>2） tr是雙標記，用于定義表格的行；<tr>和</tr >3） td是雙標記，用于定義表格的單元格；<td>和</td>4） th是雙標記，用于定義表頭；<th>和</th>2、語法格式<table><tr><th>第一行第一列單元格</th><th>第一行第一列單元格 </th><

27、;th>第一行第一列單元格 </th></tr><tr><th>第一行第一列單元格</th><th>第一行第一列單元格 </th><th>第一行第一列單元格 </th></tr></table>姓名性別年齡張三豐男25總結：<th>與</th>表示表頭，里面的內容，自動加粗、自動居中;<td> 和</td>表示單元格，里面的內容不加粗，不居中;3、<table>標記屬性1 ）、border:表示表格

28、的邊框屬性，屬性值為數(shù)值；border="數(shù)彳1”;2 ）、width :表示表格寬度屬性（屬性值示數(shù)值或者百分比）3 ）、height :表格高度屬性（屬性值示數(shù)值或者百分比）4 ）、bgcolor:設置表格背景顏色的屬性屬性值可以是英文單詞、也可以是 rgb或者cmyk顏色值5 ) 、 background: 用于設置表格背景圖像屬性；屬性值：就是設置背景路徑值(建議使用相對路徑)6 ) 、 cellspacing: 用來設置表格間距，屬性值是數(shù)值；7 ) 、 cellpadding ：用來設置表格邊距，屬性值是數(shù)值；8 ) align: 用于設置表格對齊的屬性：屬性值：left

29、rightcenter( 左對齊、右對齊、居中對齊)4、 表格行的控制1 ) width ：表示行的寬度(屬性值示數(shù)值或者百分比)2 ) height ：行高度屬性(屬性值示數(shù)值或者百分比)3 )align ：設置行中文字對齊方式；4 )vlign ：文字垂直方向對齊5 )bgcolor:設置表格行背景顏色的屬性屬性值可以是英文單詞、也可以是 rgb或者cmyk顏色值6) bordercolor ：設置表格行邊框顏色5、 td 單元格的屬性控制1 ) align 、 vlign ：單元格中水平、垂直方向文字對齊方式；2 ) bordercolor ：單元格邊框屬性3 ) bgcolor ：單元

30、格背景顏色4 ) rowspan ：表示單元格跨行的行數(shù)5 ) colspan ：表示單元格跨列的列數(shù)五、 作業(yè) 作業(yè)1、用html標記語言中表格標記和屬性等完成上圖所示表格；2、用html標記語言中表格標記和屬性等完成本班級課程表;第六章使用建立超鏈接教學內容一、教學目的和要求1、目的：1）掌握超鏈接的基本知識；2）掌握超鏈接建立方法2、要求：1）掌握網頁內部鏈接方法；2）掌握網頁外部鏈接方法；3）掌握錨點鏈接方法二、教學重點與難點重點：外部鏈接、內部鏈接方法難點：鏈接時路徑的正確書寫三、教學方法與手段講授法、案例演示、習題法四、 內容部分1 、路徑的概念：路徑分為相對路徑和絕對路徑相對路徑

31、以引用文件的網頁所在的位置為參考基礎而建立的路徑如：1) 如果鏈接到同一目錄下，則直接輸入要鏈接的文檔的名稱；2) 如果鏈接到下一級目錄中的文件，則先輸入目錄名，然后再加“/ ”，在輸入文件名3) 如果鏈接到上一級目錄中的文件， 先輸入“./ ”再輸入目錄名、文件名絕對路徑()絕對路徑是以站點的根目錄為參考基礎的目錄路徑在wwW以http開頭的鏈接都是絕對路徑說明：當鏈接到本機器上的文件時，建議使用相對路徑，如果使用絕對路徑，當把文件移動到其它盤符后，那么鏈接就會失效，這樣就要對文件鏈接重新編輯才能使用。3、 建立超級鏈接文字1 ) 格式< a>要鏈接白文字</a>&l

32、t; a href= “路徑” >要鏈接的文字</a><a>: 表示鏈接的開始< /a> ：鏈接的結束href ：定義文件鏈接的地址(路徑、位置)2 ) Target 用于指定打開鏈接的目標窗口，默認方式是在原來的窗口中打開- blank: 在瀏覽器新的窗口中打開；- parent ：將鏈接的文件載入含有該鏈接框架的副窗口中打開；- self ：在同一框架中打開-top ：在當前整個瀏覽器窗口中打開格式：- a href= “路徑” target= “ -blank ” >要鏈接的文字</a>圖像的鏈接要將圖片做成超鏈接，只需將 &l

33、t;img>標記放在<a>和</a>之間即可；格式：<a href= “鏈接圖片地址”><img scr= “參數(shù)” ></a>郵箱的鏈接格式：< a href= “ mailto ： E-mail 地址” cc= “抄送人 E-mail 地址” &subject=“郵件主題”&body= “郵件正文”>描述文字</a>如：< a href= “ mailto ” cc= “” &subject= “祝?！?amp;body= “十一節(jié)快樂”>寫信 </a>

34、站內鏈接如果一個頁面很長，尋找相應內容比較困難，就可以使用站內鏈接格式：< a href= “ #目標名稱”target= “窗口名稱”>目錄文字</a>在鏈接的目標處使用<a name="目標名稱” >超鏈接目標</a>五、 作業(yè) 1、 做一個腦筋急轉彎頁面的站內鏈接（至少10 個）2、 做一個圖片鏈接頁面3、 做一個文字鏈接頁面（標題的）第七章 添加多媒體教學內容一、教學目的和要求1 、目的：1 ）掌握常見的媒體文件格式；2）掌握插入多媒體方法2、要求：1 ）設置滾動文字方法；2）掌握插入音頻、視頻文件方法；3）掌握設置網頁背景音樂

35、方法二、教學重點與難點重點：音頻、視頻文件方法難點：滾動文字設置、鼠標控制（停止、運動）3、 教學方法與手段講授法、案例演示、習題法、提問法4、 內容部分1 、滾動字幕使用滾動字幕可以增加網頁的動感, 讓網頁顯得更有生氣, 達到動感十足的效果;<marquee>是一個雙標記語法格式:<marquee> 文字 </marquee>屬性 :direction 、 beavior 、 loop 、 scroollamount 、 scrolldelay 、 align 、 bgcolor 、 height 和 width 、 hspace 和 vspace1) d

36、irection ：用于設置滾動文字移動方向屬性值：left （右向左移動）默認值right（左向右移動）up （下往上移動）down （上往下移動）2) behavior ：用于滾動文字的移動效果；屬性值：Scroll ：循環(huán)往復滾動；Slide ：表示滾動到一方后停止，只滾動一次；alternate ：表示滾動一方后向相反方向滾動，交替進行3) loop ： 用于設置滾動文字的循環(huán)次數(shù)，如果未指定，則循環(huán)不止；4) scrolldelay：用于設置每次滾動的間隔的延遲時間，一般以毫秒作為單位5) align ：用于設置滾動文字的對齊方式top ：頂對齊middle ：中間對齊bottom

37、：底部對齊6) bgcolor:用于設置滾動的背景顏色；7) height 和width用于設置滾動文字的高度和寬度8) hspace 和vspace用于設置滾動文字四周的水平空間和垂直空間如何實現(xiàn)鼠標光標移動到滾文字上停止?jié)L動；移開鼠標繼續(xù)滾動效果；Onmouseover=“ javascript ： ( ) ”表示鼠標經過停止；Onmouseout=“ javascript ： ( ) ”表示鼠標移開繼續(xù)運動；2、如何嵌入多媒體文件：網頁中嵌入的多媒體不但有文字、圖像還有音頻、視頻、flash 動畫等文件1) 使用embed麻記嵌入多媒體文件(是一個單標記)屬性說明：src 用于指定媒體文

38、件的地址Height 和 width 用于設置媒體文件的高度和寬度Loop用于設置媒體文件的播放次數(shù)Hidden用于隱藏播放器5、 作業(yè) 1 、制作一網頁，在網頁中插入滾動文字、視頻、音頻文件(素材自備)第八章 使用表單教學內容 一、教學目的和要求1 、目的：1 ）掌握表單標記；2）掌握菜單和列表使用方法；3）掌握文本框、文本域使用方法2、要求：1 ）熟悉表單對象；2）熟悉表單標記及其屬性；二、教學重點與難點重點：表單概念、表單對象建立方法難點：密碼框建立、菜單、復選框建立方法3、 教學方法與手段講授法、案例演示、習題法、提問法4、 內容部分1、 、 建立表單1) ） 表單是實現(xiàn)交互式動態(tài)網頁

39、的一種主要的外在形式，是網站管理者與瀏覽者之間溝通的橋梁，其主要功能是收集信息；由<form> 標記來定義；2) 格式<from> .</form>屬性共有三個name 屬性： “ form-name”method 屬性： get 和 postaction 屬性：表單處理程序的位置3) 輸入標記是一個單標記，語法格式如下:<input>標記是表單中輸入標記，<input name= "" file-name " type= "type-name” >4) 文本框單行文本框：當type的屬性值為“

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

41、鈕表單中的按鈕起著至關重要的作用，主要有三種類型：普通按鈕、提交按鈕、重置按鈕；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

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

43、input type= “ checkbox ” name=“ file-name ” value= “ value ” >4、 文件輸入框當 type 的類型為file 表示輸入項是一個文件輸入框，用戶可以在文件輸入框內部填寫自己硬盤中文件的路徑，然后通過表單上傳；格式： <input type= “ file ” name=“ file-name ” >5、 作業(yè) 1 、使用表單標記創(chuàng)建如下密碼框用戶登錄用戶名：輸入密碼：第九章使用框架結構教學內容一、教學目的和要求1、目的：1）掌握框架的使用方法；2）框架的屬性；2、要求：1）掌握框架的使用方法；2）掌握框架的鏈接；二、

44、教學重點與難點重點：框架的屬性難點：框架的鏈接三、教學方法與手段講授法、案例演示、習題法四、內容部分框架的作用：通常用于頁面導航；框架1、 框架集 <frameset> .<frameset>2、 框架 <frame> <frame>框架集：用<frameset>.<frameset> 標記來定義，用于定義網頁顯示的框架數(shù)量、大小等其他屬性；框架：用<frame><frame>標記定義，定義的是網頁上一個顯示的區(qū)域3、語法格式：<html><head><title>

45、;.</title><framesetrows= “ value ” ， “ valueborder= “ value</head><frameset>< frame src=url /> <frameset><html>說明： 框架文檔的書寫格式與和html 文檔的書寫格式基本相同，唯一不同的是使用 frameset 標記替換了body 標記4、 框架結構1) )左右結構2) 上下結構3) 嵌套結構左右結構：采用 cols 屬性，即在垂直方向將瀏覽器分割成多個窗口語法格式：<frameset cols=&qu

46、ot;value", "value", .>< frame src=url ” />< frame src=url ” /></frameset>Value 值可以是數(shù)值也可以是百分比，還可以混合；數(shù)值之間用逗號“，進行分割，有幾個值則說明窗口就被分割成幾個部分；上下結構：采用 rows 屬性，即在水平方向將瀏覽器分割成多個窗口語法格式：< frame src=url/>< frame src=url ” /></frameset>例如：將網頁頁面水平分割成三個部分（10%， 20%，

47、60%）嵌套結構：既有左右分割，有上下分割語法格式：<frameset rows=< frame src=.<frameset cols=< frame src=value ", "value ", .“ url ” />value ", "value ", .“ url ” /></frameset> </frameset>例： 將網頁分割成田字形2、 框架集的屬性a) 設置窗口框架寬度border語法格式：<frameset rows= "value &q

48、uot;, "value ", . Border >< frame src= “ url ” />< frame src= “ url ” /></frameset>b) 設置邊框顏色bordercolor語法格式：bordercolor=color-value< frame src= “ url ” />< frame src= “ url ” /></frameset>c) 設置框架隱藏frameborder語法格式：<frameset cols=value ", "

49、value ", .frameborder= "值” >< frame src= “ url ” />< frame src=url ” /></frameset>值為： 0 或者 1， 0 表示不顯示邊框，1 表示顯示邊框，默認情況下值為13、 框架屬性a) scr ： 用于設置框架顯示的文件路徑；語法格式：< frame src= “ url ” /> ，如果沒有src 屬性則表示該窗口顯示為空白b) name 用于定義框架的名稱語法格式：< frame src= “ url ” name= “”/>c)

50、 frameborder 屬性用于顯示框架，值與框架集一樣d) scrolling 屬性用于設定是否有滾動條value 值有兩個"yes"和"no" "auto "語法格式：< frame src= “ url ” name= “” scrolling= “ vlue ” />e) noresize 屬性用于用戶能否自己調整框架窗口大小語法格式：< frame src= “ url ” name=“ ” scrolling= “ vlue ” noresize/>注意：此屬性無屬性值f) marginwidth

51、 屬性， 用于設定內容與框架的距離語法格式：< frame src=“ url ”name=“”marginwidth=“ vlue ” />g) marginheight 屬性， 用于設定框架邊緣高度語法格式：< frame src=“ url ”name=“”marginheight= “ vlue ” />五、 作業(yè) 1 、用框架將頁面分割成左右兩個部分（20%， 80%） ，然后再把右部上下分割成相等兩個部分，并設置左邊框架名稱為left ，而且左邊框架窗口顯示滾動條，右邊窗口不顯示滾動條，左邊框架上部分連接到右框架上部分接到；第十章 使用 css 樣式表教學內

52、容一、教學目的和要求1 、目的：1 ）掌握css 樣式表使用方法；2）掌握css 分類；3）屬性的使用2、要求：1 ） css 樣式表使用；2）掌握css分類及其屬性；二、教學重點與難點重點：樣式表的使用難點：樣式表的名稱定義三、 教學方法與手段講授法、案例演示、習題法 內容部分1 、認識 cssCss 又稱層疊樣式表，是一種現(xiàn)在大家都使用的網頁技術，為大多瀏覽器支持，成為網頁設計必不可少的工具；2、樣式表組成1 ）選擇符此組樣式編碼所要針對的對象，可以是一個標記如（body， h1 等） ，也可以是定義了的 id 或 class 標記；2）樣式屬性：顏色、大小、定位、浮動等3）值：指定值、數(shù)

53、字、百分比3、樣式表類型外聯(lián)樣式表、內聯(lián)樣式表、內嵌樣式表4、語法格式如：1） <p class= "h” >.</p>樣式表格式：.h.<p id="h”>.</p>樣式表格式：#h.五、 作業(yè) 1 、 應用外聯(lián)樣式表對頁面進行簡單布局；網頁設計實訓部分1 、 實訓目的與要求網頁設計dreamwvaver 綜合實訓主要目的是讓學生通過這門實踐課程的學習了解和掌握網頁設計的基本方法和技巧，通過不斷上機實踐訓練達到能夠熟練順利完成網站的制作。掌握網站設計流程、技巧，集中實踐使學生綜合運用所學習的網頁設計知識及以前所學習的計算機方

54、面的知識，按照網站制作的流程，完成一個具體、綜合性的網站；鞏固學生系統(tǒng)性的知識，培養(yǎng)學生解決實際問題的能力，鍛煉相互合作的工作能力，提高學生綜合素質。2、 實訓內容1）實例實訓（綠色食品、手機、餐飲、美容）以綠色食品網站設計的實例指導學生如何獨立完成食品網站站點的設計和制作。讓學生在機房實際操作，按照給定的實例完成實例中整個站點頁面的創(chuàng)建和設計。2）自建站點實訓（綠色食品、手機、餐飲、美容）讓學生自行選擇站點的主題， 從規(guī)劃站點到一步一步完成整個站點的規(guī)劃、設計、創(chuàng)建、調試等工作。3）總結對學生的全部作品進行批改，并選擇案例對實訓的結果進行考核。3、 參考步驟實訓內容實訓課時實訓說明、知識回顧

55、基本知識回顧實訓作品策劃、規(guī)劃書整體布局設計搜集和創(chuàng)建資源效果圖制作程序設計首頁模板設計二級頁面模板設計各頁面的細化、測試修改文檔總結4、實訓準備1）軟件準備Dreamweaver、firework 、PhotoShop、logomaker 、Flash 中文版（本實訓對 FLASH技術不做要求）。2）硬件準備網絡條件：與因特網連接的局域網。（最好不帶還原的計算機）教師用機： Windows xp或win7及以上版本。學 生用機：Windows xp或win7及以上版本。5、考核辦法1） 網站規(guī)劃書 10分2） 效果圖設計 20分3） 編寫代碼30分4） 實訓出勤20分5） 技術含量10分6） 整體美觀統(tǒng)一搭配10分6、實訓內容說明由實訓指導教師自行選擇網站作為實例，實例要求如下：1 .選擇企業(yè)綠色食品網站或者其它企業(yè)網站。2 .站點模塊功能清晰，能反映各模塊的基本功能、結構清晰、風格統(tǒng)一、色調一致。3 .為了便于教學，站點應該具有大熱 dreamweaver頁面布局、鏈接、 CSS+div樣式等網頁設計制作中常用的知識點和操作。7、內容1）講解和演示整個站點的制作過程和設計方法。2）、學生自由組隊（三人一組分工合