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

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

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

4、otoshop，HTML ，CSS，DIV和Dreamweaver網頁設計flashT1 基礎能力美術，圖案,色彩基礎網站建設實訓等，詳細的可見下表，它們是支撐“網站建設”核心能力的基礎課程。基礎能力擴展能力高級能力T1:網頁設計師HTML ，CSS，DIVPHP（或ASP，JSP）等動態網站開發工具基礎能力HTML+div+cssDreamweaver快速建站模板工具Ajax等最新技術FireWorkFireWork網頁效果圖制作PhotoShop 基礎一定的語言表達、溝通能力圖形圖像處理Flash網站商業廣告宣傳動畫制作能力廣告宣傳動畫flash圖片制作T2:網頁美工T1 基礎能力美術，圖

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

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

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

8、技能進行知識鞏固和運用，圍繞預設能力目標，對學習目標、學習任務、能力要求、教學內容、活動設計和教學建議等都均參照人才培養方案。1.4教學方法在教學網頁設計基礎中主要采用案例、講解、實做的方式來進行，通過理論、案例的講解和演示，讓學生能夠清楚到實踐的操作，掌握本課程的相關知識。圖表表示如下案例教學法：教學過程中。老師舉例子講解一個網站創建的過程和方法，其它相關類網站的創建就可以用第一個網站建設中的一些方法去完成。討論式教學 ：注重課堂教學整體設計，通過引入問題，如建設網站的市場分析，可以組織學生通過討論尋找答案，讓學生參與交流、分享自己的看法，并進行總結和歸納。通過討論，學生真正做到了積極參與課

9、堂學習。分析問題、解決問題的能力，又加強了理論知識在實際的應用。還有其它的一些方法如講授法、任務驅動法等，再此就不多說。 二、課程目標2.1 課程的總體目標通過本課程的學習，使學生掌握網頁設計的整個工作流程和方法，能夠使用網頁三劍客及其它相關軟件完成網站前端相關工作（如網頁效果圖制作、網頁布局、用代碼生成網頁等），在教學過程中，通過團隊開發，形成基本的職業道德規范和職業素養，及團隊合作精神。三、內容標準第一章 HTML網頁基礎教學內容一、教學目的和要求 1、目的：1）掌握HTML文件編寫方法；2）使用瀏覽器瀏覽HTML源文件；3）了解html基本概念 2、要求：掌握常用的瀏覽器打開網頁方法（I

10、E、火狐、360瀏覽器、谷歌瀏覽器等），掌握網頁設計的一些基本概念； 二、教學重點與難點 重點：網頁設計相關概念難點：網頁設計相關屬性三、教學方法與手段講授、案例演示、實際操作、作業通過理論講授的方式讓學生了解本章的理論的內容四、內容部分1、 經典網頁欣賞 1）藍色代表海洋，宇宙，大海。是一種博大的顏色。此網頁采用主色為藍色。代表了一種博大的精神。也代表了本公司的科技領域強項。不同的藍色的轉換給人一種輕松的感覺。網頁右邊加以黃色區域來烘托出產品的外形，以及獨特。網頁整體簡單明了。正是這種公司所需要的。2）網頁是一則汽車的網頁，和傳統汽車網頁一樣采用黑色的背景，凸顯出一種高貴，科技的感覺。文章的

11、文字部分采用高明度灰色，體現了主題。汽車輪子處的火，表現了激情，興奮。使主題更加生化一步。給人莊重穩重的同時，不失激情活躍的一面。2、 網頁設計相關概念1） 統一資源定位器（絕對路徑、相對路徑）2） 超鏈接3） 網站、靜態網頁、動態網頁、主頁、網頁三劍客4） Html語言概念5） 常見的瀏覽器6） Html語言的基本結構及語法五、作業1）使用瀏覽器打開網頁源代碼；2）寫出html超文本標記語言的主體結構；第二章 文字與段落標記 教學內容一、教學目的和要求 1、目的：1）掌握網頁中文字編排、美化方法；2）掌握網頁中圖像插入的方法2、要求：1）掌握標題標記2）掌握文本基本標記、文本格式化標記3）掌

12、握段落標記、水平線標記二、教學重點與難點 重點：掌握文本基本標記、文本格式化標記難點：單、雙標記的區分 三、教學方法與手段講授法、案例演示、討論法四、內容部分1、設置段落的標記 段落標記是一個雙標記，每個標記對表示一個段落； 語法格式：這里表示段落2、換行標記 換行標記是單標記，即不會成對出現，是在尖括號中加一個的單標記； 語法格式：.3、給代碼添加注釋 添加注釋是不會再網頁中顯示的 語法格式：4、粗體和斜體 1） 粗體標記，是一對雙標記，起到強調的作用 語法格式：標題文字 2） 斜體標記語氣較弱 語法格式：表示斜體標記5、下劃線與刪除線標記 為了使部分文字特別顯示，可以使用下劃線或者刪除線標

13、記,也是一對雙標記； 語法格式： 下劃線的 刪除線的6、上標和下標 雙標記 語法格式：上標 下標 H2o;H 2so4;a2+b2=c27、文字標記：是一個雙標記語法格式：文字 8、標題標記對齊屬性 h1-h6(h1:表示文字標題最大h6表示文字標題最小) 對齊屬性：align( left、center、right) 如：標題居中9、文本標記的屬性 1）字體屬性 face 如 云南城市建設職業學院 2)設置字體大小屬性：size 如 云南城市建設職業學院 絕對值：1-7 相對值：-44的整數，字體相對于3號放大和縮小字號 注意：屬性與屬性之間用空格隔開 3）字體的顏色屬性:color如 云南城

14、市建設職業學院可以用英文單詞或者二進制代碼10、粗體標記：b與 strong 語法格式：需要加粗的文字 需要加粗的文字標記是可以嵌套的11、斜體的標記 1) i 、em、cite 語法格式： 需要變為斜體的文字需要變為斜體的文字需要變為斜體的文字12、大字號和小字號標記）big和small語法格式 需要加大的文字big需要加大的文字加大：在原來定義的字體大小基礎上加大一個級別；變小：在原來定義的字體大小基礎上變小一個級別；、不自動換行的標記1)nobr語法格式：不換行的文字14、水平線標記 1） 水平線標記的屬性：width（寬度）、 color（顏色）、size（高度）、noshade （無

15、陰影）、align（對齊）15、 其他特殊標記 1）空格：  2) ; >五、作業 制作一個公司簡介頁面（包含標題、文字、下劃線、圖片、橫線）第三章 使用圖像教學內容一、教學目的和要求 1、目的：1）掌握網頁中圖形圖像的格式；2）掌握網頁中圖像插入的方法及圖像的超鏈接；2、要求：1）掌握常用圖像的格式2）掌握網頁中插入圖像的方法，及插入圖像的標記二、教學重點與難點 重點：網頁中圖像插入的方法及圖像的超鏈接難點：超鏈接中圖像的地址 三、教學方法與手段講授法、案例演示、討論法、習題法四、內容部分1、常見的一些圖像格式1） jpeg 壓縮圖像格式,不支持透明，1670萬像素，圖像要求比

16、較絢麗的時候使用；2） Gif（圖形交換格式） 支持透明，256色，支持動畫（由多張位圖連續播放形成）3） Png（firework） 支持透明1670萬像素，是網絡可移植格式；2、 如何在網頁中插入圖像 :單標記語法格式： Src：表示指定圖像的位置（路徑） 絕對地址：具有詳細的位置，即提供目標文檔的完整主機名稱、路徑信息、及文檔的全稱； 相對地址：從當前文檔開始的地址1） 如果當前文檔和目標文檔位置平行，則直接書寫目標文檔的全稱；2） 如果當前文檔和目標文檔文件夾位置平行，則輸入路徑為 文件夾名稱/目標文檔名稱3） 如果當前文檔所在文件夾和目標文檔位置平行，則書寫：.目標文檔全稱3、屬性:

17、 1）alt屬性 語法格式：2）圖像寬度高度屬性：width、height 3）vspace（垂直間距）、hspace（水平間距）五、作業制作一個圖文并茂的婚紗網頁（素材圖片自己到互聯網上找）第四章 使用列表教學內容一、教學目的和要求 1、目的：1）掌握有序列表；2）掌握無序列表2、要求：1）了解列表標記2）掌握有序、無序、定義、菜單列表的使用方法二、教學重點與難點 重點：列表標記難點：有序、無序列表浮動的使用 三、教學方法與手段講授法、案例演示、習題法四、內容部分1、列表的使用定義說明：列表是一種數據的排列方式,對頁面的布局非常重要,分為三類:有序列表、無序列表、自定義列表。 無序列表：項目

18、符號由幾個符號構成 有序列表：項目符號由字母、數字排列構成 自定義列表：通過自己靈活定義1） 有序列表 語法格式： 表示列表項1 表示列表項2 表示列表項3 難點說明：本列表會自動換行，不用加換行符號，如果非要成一行，那么就給他加上css定義浮動； 有序列表的序號類型（1、a、A、i、I）默認情況下是數字；語法格式 表示列表項1 表示列表項2 表示列表項3 設置列表的起始數值 表示列表項1 表示列表項2 表示列表項3 注意：start=“起始數值”中起始數值必須為數字，否則不起作用；2） 無序列表 無序列表的項目排列沒有順序，以符號作為分項標識；a) 語法格式列表項1列表項2列表項3和分別表示

19、無序列表的開始和結束，表示列表項；b) 無序列表的列表類型（實心圓、空心圓、方框）disccirclesquare)c) 無起始數值屬性3） 目錄列表顯示效果與無序列表相同，一般用來創建多列目錄a) 語法格式 列表項1列表項2列表項3b) 類型 列表項1列表項2列表項3列表類型（實心圓、空心圓、方框）disccirclesquare)c) 無起始數值屬性4） 定義列表a) 語法格式1321 定義條件1 定義描述1定義條件2 定義描述2定義條件3 定義描述35） 菜單列表用于設計單列菜單列表，顯示效果與無序列表相同； 語法格式： 列表項1列表項2列表項3五、作業1、輸入五組列表（無序、有序、自定

20、義、菜單、目錄列表）代碼；并給每組第一個列表項加上超鏈接，鏈接目標自定。第五章 使用表格教學內容一、教學目的和要求 1、目的：1）掌握創建表格的方法；2）掌握表格屬性2、要求：1）掌握創建表格方法；2）掌握表格邊框、背景、行、列屬性二、教學重點與難點 重點：創建表格 難點：合并單元格 三、教學方法與手段講授法、案例演示、習題法、問題法四、內容部分1、建立表格用到的四個標記 1）table,是雙標記，用于定義表格元素，和;2）tr 是雙標記，用于定義表格的行；和/tr3）td是雙標記，用于定義表格的單元格；和4）th是雙標記，用于定義表頭;和2、語法格式 第一行第一列單元格第一行第一列單元格第一

21、行第一列單元格 第一行第一列單元格第一行第一列單元格第一行第一列單元格 姓名性別年齡張三豐男25總結：與表示表頭，里面的內容，自動加粗、自動居中； 和表示單元格，里面的內容不加粗，不居中；3、標記屬性 1）、border: 表示表格的邊框屬性，屬性值為數值；border= 數值； 2）、width：表示表格寬度屬性（屬性值示數值或者百分比） 3）、height：表格高度屬性（屬性值示數值或者百分比） 4）、bgcolor:設置表格背景顏色的屬性屬性值可以是英文單詞、也可以是rgb或者cmyk顏色值 5）、background:用于設置表格背景圖像屬性； 屬性值：就是設置背景路徑值（建議使用相對

22、路徑）6）、cellspacing:用來設置表格間距，屬性值是數值；7）、cellpadding：用來設置表格邊距，屬性值是數值；8）align:用于設置表格對齊的屬性：屬性值：leftrightcenter(左對齊、右對齊、居中對齊)4、表格行的控制 1）width：表示行的寬度（屬性值示數值或者百分比） 2）height：行高度屬性（屬性值示數值或者百分比） 3） align：設置行中文字對齊方式； 4）vlign：文字垂直方向對齊 5）bgcolor:設置表格行背景顏色的屬性屬性值可以是英文單詞、也可以是rgb或者cmyk顏色值6） bordercolor：設置表格行邊框顏色5、td單元

23、格的屬性控制 1）align、vlign：單元格中水平、垂直方向文字對齊方式； 2）bordercolor：單元格邊框屬性 3）bgcolor：單元格背景顏色 4）rowspan：表示單元格跨行的行數 5）colspan：表示單元格跨列的列數五、作業作業1、用html標記語言中表格標記和屬性等完成上圖所示表格；2、用html標記語言中表格標記和屬性等完成本班級課程表；第六章 使用建立超鏈接教學內容一、教學目的和要求 1、目的：1）掌握超鏈接的基本知識；2）掌握超鏈接建立方法2、要求：1）掌握網頁內部鏈接方法；2）掌握網頁外部鏈接方法；3）掌握錨點鏈接方法二、教學重點與難點 重點：外部鏈接、內部

24、鏈接方法 難點：鏈接時路徑的正確書寫 三、教學方法與手段講授法、案例演示、習題法四、內容部分1、路徑的概念：路徑分為相對路徑和絕對路徑相對路徑以引用文件的網頁所在的位置為參考基礎而建立的路徑如：1) 如果鏈接到同一目錄下，則直接輸入要鏈接的文檔的名稱；2) 如果鏈接到下一級目錄中的文件，則先輸入目錄名，然后再加“/”，在輸入文件名3) 如果鏈接到上一級目錄中的文件，先輸入“./”再輸入目錄名、文件名絕對路徑（）絕對路徑是以站點的根目錄為參考基礎的目錄路徑在www中以http開頭的鏈接都是絕對路徑說明：當鏈接到本機器上的文件時，建議使用相對路徑，如果使用絕對路徑，當把文件移動到其它盤符后，那么鏈

25、接就會失效，這樣就要對文件鏈接重新編輯才能使用。3、 建立超級鏈接文字1） 格式要鏈接的文字要鏈接的文字:表示鏈接的開始：鏈接的結束href：定義文件鏈接的地址（路徑、位置）2） Target用于指定打開鏈接的目標窗口，默認方式是在原來的窗口中打開-blank:在瀏覽器新的窗口中打開；-parent：將鏈接的文件載入含有該鏈接框架的副窗口中打開；-self：在同一框架中打開-top：在當前整個瀏覽器窗口中打開格式：要鏈接的文字圖像的鏈接要將圖片做成超鏈接，只需將標記放在和之間即可；格式： 郵箱的鏈接格式：描述文字 如：寫信 站內鏈接如果一個頁面很長，尋找相應內容比較困難，就可以使用站內鏈接格式

26、：目錄文字在鏈接的目標處使用超鏈接目標五、作業1、 做一個腦筋急轉彎頁面的站內鏈接（至少10個）2、 做一個圖片鏈接頁面3、 做一個文字鏈接頁面（標題的） 第七章 添加多媒體教學內容一、教學目的和要求 1、目的：1）掌握常見的媒體文件格式；2）掌握插入多媒體方法2、要求：1）設置滾動文字方法；2）掌握插入音頻、視頻文件方法；3）掌握設置網頁背景音樂方法二、教學重點與難點 重點：音頻、視頻文件方法 難點：滾動文字設置、鼠標控制（停止、運動） 三、教學方法與手段講授法、案例演示、習題法、提問法四、內容部分 1、滾動字幕 使用滾動字幕可以增加網頁的動感,讓網頁顯得更有生氣,達到動感十足的效果;是一個

27、雙標記語法格式:文字屬性:direction、beavior、loop、scroollamount、scrolldelay、align、bgcolor、height和width、hspace和vspace 1）direction：用于設置滾動文字移動方向 屬性值：left（右向左移動）默認值 right(左向右移動) up（下往上移動） down（上往下移動）2） behavior：用于滾動文字的移動效果；屬性值：Scroll：循環往復滾動；Slide：表示滾動到一方后停止，只滾動一次； alternate：表示滾動一方后向相反方向滾動，交替進行3） loop：用于設置滾動文字的循環次數，如果

28、未指定，則循環不止；4） scrolldelay：用于設置每次滾動的間隔的延遲時間，一般以毫秒作為單位5） align：用于設置滾動文字的對齊方式top：頂對齊middle：中間對齊bottom：底部對齊6） bgcolor: 用于設置滾動的背景顏色；7） height和width 用于設置滾動文字的高度和寬度8） hspace和vspace 用于設置滾動文字四周的水平空間和垂直空間 如何實現鼠標光標移動到滾文字上停止滾動；移開鼠標繼續滾動效果；Onmouseover=“javascript：this.stop( )”表示鼠標經過停止；Onmouseout=“javascript：this.s

29、tart ( )”表示鼠標移開繼續運動；2、如何嵌入多媒體文件： 網頁中嵌入的多媒體不但有文字、圖像還有音頻、視頻、flash動畫等文件1） 使用標記嵌入多媒體文件（是一個單標記） 屬性說明：src用于指定媒體文件的地址 Height和width用于設置媒體文件的高度和寬度 Loop用于設置媒體文件的播放次數 Hidden用于隱藏播放器五、作業 1、制作一網頁，在網頁中插入滾動文字、視頻、音頻文件（素材自備）第八章 使用表單教學內容一、教學目的和要求 1、目的：1）掌握表單標記；2）掌握菜單和列表使用方法；3）掌握文本框、文本域使用方法2、要求：1）熟悉表單對象；2）熟悉表單標記及其屬性；二、

30、教學重點與難點 重點：表單概念、表單對象建立方法 難點：密碼框建立、菜單、復選框建立方法 三、教學方法與手段講授法、案例演示、習題法、提問法四、內容部分1、 建立表單1）表單是實現交互式動態網頁的一種主要的外在形式，是網站管理者與瀏覽者之間溝通的橋梁，其主要功能是收集信息；由標記來定義；2） 格式.屬性共有三個 name屬性：“form-name” method屬性：get和postaction屬性：表單處理程序的位置3） 輸入標記標記是表單中輸入標記，是一個單標記，語法格式如下： 4） 文本框單行文本框：當type的屬性值為“text”時表示輸入項輸入的字符串是以單行顯示； value：定義

31、文本框初始值 size：定義文本框長度 maxlength：定義輸入最大字符串數如：聯系方式：電子郵件：聯系地址：手機號碼：電話號碼：QQ：5） 密碼框如： 用戶登錄 用戶名：輸入密碼：當type屬性的值：為password時表示的是密碼框，其他屬性與text相似，不同之處，輸入的 內容均以*表示，保證密碼的安全性 語法格式： 2、 按鈕表單中的按鈕起著至關重要的作用，主要有三種類型：普通按鈕、提交按鈕、重置按鈕；1）普通按鈕 當type的屬性值為 button時表示該輸入項輸入的 是普通按鈕，語法格式如下： 注意：value 表示顯示在按鈕上面的文字2）提交按鈕 當type的屬性值為subm

32、it時表示該輸入項輸入的 是提交按鈕，語法格式如下：3）重置按鈕 當type的屬性值為reset時表示該輸入項輸入的 是重置按鈕，語法格式如下：3、 單選框與復選框1） 單選框當type的屬性值為radio時表示該輸入項輸入的 是單選項，語法格式如下： 2） 復選框 當type的屬性值為checkbox時表示該輸入項輸入的 是復選項，語法格式如下：4、 文件輸入框 當type的類型為file表示輸入項是一個文件輸入框，用戶可以在文件輸入框內部填寫自己硬盤中文件的路徑，然后通過表單上傳； 格式： 五、作業 1、使用表單標記創建如下密碼框 用戶登錄 用戶名：輸入密碼：第九章 使用框架結構教學內容一

33、、教學目的和要求 1、目的：1）掌握框架的使用方法；2）框架的 屬性；2、要求：1）掌握框架的使用方法；2）掌握框架的鏈接；二、教學重點與難點 重點：框架的屬性難點：框架的鏈接 三、教學方法與手段講授法、案例演示、習題法四、內容部分 框架的作用：通常用于頁面導航；框架1、 框架集 .2、 框架 框架集：用.標記來定義，用于定義網頁顯示的框架數量、大小 等其他屬性； 框架：用標記定義，定義的是網頁上一個顯示的區域3、 語法格式： . 說明：框架文檔的書寫格式與和html文檔的書寫格式基本相同，唯一不同的是使用frameset標記替換了body標記4、 框架結構1） 左右結構2） 上下結構 3）

34、嵌套結構 左右結構：采用cols屬性，即在垂直方向將瀏覽器分割成多個窗口 語法格式： Value 值可以是數值也可以是百分比，還可以混合；數值之間用逗號“，”進行分割，有幾個值則說明窗口就被分割成幾個部分； 上下結構：采用rows屬性，即在水平方向將瀏覽器分割成多個窗口語法格式： 例如：將網頁頁面水平分割成三個部分（10%，20%，60%）嵌套結構：既有左右分割，有上下分割 語法格式： . 例： 將網頁分割成田字形2、 框架集的屬性a) 設置窗口框架寬度 border語法格式： b) 設置邊框顏色bordercolor語法格式： c) 設置框架隱藏frameborder語法格式： 值為：0或者

35、1，0 表示不顯示邊框，1表示顯示邊框，默認情況下值為13、 框架屬性a) scr：用于設置框架顯示的文件路徑；語法格式：，如果沒有src屬性則表示該窗口顯示為空白b) name 用于定義框架的名稱 語法格式：c) frameborder屬性用于顯示框架，值與框架集一樣d) scrolling屬性用于設定是否有滾動條value值有兩個“yes”和“no”“auto”語法格式：e) noresize 屬性用于用戶能否自己調整框架窗口大小 語法格式： 注意：此屬性無屬性值f) marginwidth屬性，用于設定內容與框架的距離語法格式：g) marginheight屬性，用于設定框架邊緣高度語法

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

37、，為大多瀏覽器支持，成為網頁設計必不可少的工具；2、樣式表組成 1）選擇符 此組樣式編碼所要針對的對象，可以是一個標記如（body，h1等），也可以是定義了的id或class標記；2）樣式屬性：顏色、大小、定位、浮動等3）值：指定值、數字、百分比3、樣式表類型 外聯樣式表、內聯樣式表、內嵌樣式表4、語法格式 如： 1）. 樣式表格式： .h. . 樣式表格式： #h.五、作業1、 應用外聯樣式表對頁面進行簡單布局；四、網頁設計實訓部分 1、 實訓目的與要求網頁設計dreamwvaver綜合實訓主要目的是讓學生通過這門實踐課程的學習了解和掌握網頁設計的基本方法和技巧，通過不斷上機實踐訓練達到能夠

38、熟練順利完成網站的制作。掌握網站設計流程、技巧，集中實踐使學生綜合運用所學習的網頁設計知識及以前所學習的計算機方面的知識，按照網站制作的流程，完成一個具體、綜合性的網站；鞏固學生系統性的知識，培養學生解決實際問題的能力，鍛煉相互合作的工作能力，提高學生綜合素質。2、 實訓內容1）實例實訓（綠色食品、手機、餐飲、美容）以綠色食品網站設計的實例指導學生如何獨立完成食品網站站點的設計和制作。讓學生在機房實際操作，按照給定的實例完成實例中整個站點頁面的創建和設計。2）自建站點實訓（綠色食品、手機、餐飲、美容）讓學生自行選擇站點的主題，從規劃站點到一步一步完成整個站點的規劃、設計、創建、調試等工作。3）

39、總結對學生的全部作品進行批改，并選擇案例對實訓的結果進行考核。3、 參考步驟標題實訓內容實訓課時實訓實訓說明、知識回顧基本知識回顧實訓作品策劃、規劃書 整體布局設計搜集和創建資源效果圖制作程序設計首頁模板設計二級頁面模板設計各頁面的細化、測試修改文檔總結4、實訓準備1）軟件準備Dreamweaver 、firework、PhotoShop、 logomaker 、Flash中文版（本實訓對FLASH技術不做要求）。2）硬件準備網絡條件：與因特網連接的局域網。（最好不帶還原的計算機）教師用機：Windows xp或win7及以上版本。學 生用機：Windows xp或win7及以上版本。5、考核

40、辦法1) 網站規劃書 10分2) 效果圖設計 20分3) 編寫代碼 30分4) 實訓出勤 20分5) 技術含量 10分6) 整體美觀統一搭配 10分6、實訓內容說明由實訓指導教師自行選擇網站作為實例，實例要求如下：1. 選擇企業綠色食品網站或者其它企業網站。2. 站點模塊功能清晰，能反映各模塊的基本功能、結構清晰、風格統一、色調一致。3. 為了便于教學，站點應該具有大熱dreamweaver頁面布局、鏈接、CSS+div樣式等網頁設計制作中常用的知識點和操作。7、內容1）講解和演示整個站點的制作過程和設計方法。2）、學生自由組隊（三人一組分工合作），也可以一人一組，最多不超過三人。8、實訓步驟

41、（學生實訓周內完成）1）完成整個站點規劃（規劃書）、包括色調、logo站點風格策劃；2）素材、文檔材料收集3）效果圖制作（firework或ps、flash）4）頁面設計、頁面布局（dreamweaver、 css+div）5）程序設計、調試6）模板建立7）應用模板生成相關二級頁面8）測試鏈接等完成站點建立9）總結除內容外還包括對在實訓中有什么收獲、有什么困難等內容五、實施建議5.1 教學建議本課程學習活動的設計以網站項目為依托，課程內容的教學要求必須以學生主動學習為主，教師以啟發、引導為主，充分體現學生的主體性。為保證學習活動的順利開展，要求教師事先為學習布置學習任務，提供必要的學習資料，教師在課堂上的講授務必精煉、條理清晰，學生活動以團隊形式開展，教師對團隊活動要及時給予幫助，并實施有效控制。具體教學建議：（1）課程教學采用“工作任務驅動式”教學方法，任務設計要明確、可操作性強；（2）課堂教學注重引導學生信息收集、整理習慣的養成，培養學生自學能力；（3）學習活動可采用角色扮演，教師擔任項目主管，各項目團隊任命一名項目經理，教師務必要按