網(wǎng)頁設(shè)計(jì)-教學(xué)設(shè)計(jì)【教學(xué)參考】

網(wǎng)頁設(shè)計(jì)-教學(xué)設(shè)計(jì)【教學(xué)參考】網(wǎng)頁設(shè)計(jì)-教學(xué)設(shè)計(jì)【教學(xué)參考】網(wǎng)頁設(shè)計(jì)-教學(xué)設(shè)計(jì)【教學(xué)參考】《網(wǎng)頁制作》課程教案【課程概述】本課程主要是依據(jù)人華東師范大學(xué)出版社出版的的《網(wǎng)頁制作》，共包含有3個(gè)部分，即基礎(chǔ)篇、提高篇、精通篇。Web網(wǎng)站的架構(gòu)與HTML基礎(chǔ)構(gòu)成網(wǎng)頁制作的基礎(chǔ)知識(shí)；圖形動(dòng)畫篇包含第八章，介紹Fireworks和Flash兩款軟件的基本應(yīng)用；第1-6章均屬于網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)篇，涵蓋應(yīng)用Dreamweaver制作網(wǎng)頁的重要方法與技巧；第7-11章為提高篇，介紹動(dòng)態(tài)網(wǎng)頁的制作與實(shí)現(xiàn)；后面精通篇章節(jié)，由于課時(shí)安排，不適合繼續(xù)講解?！菊n程安排】本課程主要是培養(yǎng)學(xué)生的網(wǎng)頁制作技能，從網(wǎng)頁三劍客著手。同時(shí)網(wǎng)頁有靜態(tài)和動(dòng)態(tài)之分，在本書中均有涉及。根據(jù)網(wǎng)頁制作的實(shí)際情況，以及學(xué)生的知識(shí)基礎(chǔ)與接受能力，本門課程將著重于第1部分網(wǎng)頁設(shè)計(jì)與制作，即靜態(tài)網(wǎng)頁的制作。另外，介紹目前一款主流的虛擬機(jī)網(wǎng)站，以輔助進(jìn)行網(wǎng)頁設(shè)計(jì)。本課程的理論授課共34課時(shí)，具體安排如下：第1部分基礎(chǔ)篇（60課時(shí)）第1章HTML基礎(chǔ)（6課時(shí)）第2章站點(diǎn)建立與管理cs3（6課時(shí)）第3章文檔與對(duì)象（18課時(shí)）第4章表格（12課時(shí)）第5章圖像（12課時(shí)）第6章超級(jí)鏈接（6課時(shí)）第2部分提高篇（36課時(shí)）第7章框架網(wǎng)頁（6課時(shí)）第8章多媒體元素（6課時(shí)）第10章模板（6課時(shí)）第11章css入門（12課時(shí)）共96課時(shí)本門課是實(shí)踐性很強(qiáng)的課程，除理論講授外，還包括上機(jī)練習(xí)。具體安排為：練習(xí)1HTML練習(xí)（2課時(shí)）練習(xí)2表格布局與多媒體綜合應(yīng)用（4課時(shí)）練習(xí)3框架的應(yīng)用（4課時(shí)）練習(xí)4模板的應(yīng)用（2課時(shí)）練習(xí)5CSS樣式設(shè)定（4課時(shí)）練習(xí)6層與行為的應(yīng)用（2課時(shí)）練習(xí)7多媒體應(yīng)用（4課時(shí)）練習(xí)8Flash應(yīng)用（4課時(shí)）共26課時(shí)【課程要求】在課程結(jié)束時(shí)，需完成一份比較完整的網(wǎng)頁作品?？梢詡€(gè)人獨(dú)立完成，也可小組合作。小組合作時(shí)，小組成員不得大于3人，小組作品完成后，需要詳細(xì)注明各個(gè)成員的工作內(nèi)容。主題不限，禁止在網(wǎng)上整站下載?！咀詈蟪煽儭烤砻娉煽?0%+平時(shí)成績20%（課堂考勤、平時(shí)作業(yè)、小組作品成績）

第一部分（基礎(chǔ)篇）第1章HTML基礎(chǔ)本章將主要講解Web的特點(diǎn)和結(jié)構(gòu)、HTML基礎(chǔ)這兩部分，授課6課時(shí)。授課題目Ch1-網(wǎng)頁制作概述、Web基本介紹授課時(shí)間2課時(shí)教學(xué)目的1.對(duì)網(wǎng)站及網(wǎng)頁有一定的認(rèn)識(shí)，激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的興趣2.了解網(wǎng)頁中包含的基本元素3.了解Web的一些基本術(shù)語教學(xué)重難點(diǎn)認(rèn)識(shí)網(wǎng)頁與網(wǎng)站，了解其中的基本術(shù)語教學(xué)過程1.網(wǎng)頁實(shí)例展示2.分析網(wǎng)頁設(shè)計(jì)的基本流程和網(wǎng)頁元素3.Web的特點(diǎn)和結(jié)構(gòu)介紹授課內(nèi)容1.網(wǎng)頁中常包含的元素：文本、圖像、動(dòng)畫、聲音、視頻2.什么是WWW？WorldWideWeb，簡稱為Web（萬維網(wǎng)）。WWW是一個(gè)全球性的信息系統(tǒng)，使計(jì)算機(jī)能夠在Internet上相互傳送基于超媒體的數(shù)據(jù)信息。WWW也可以用來建立Intranet（企業(yè)內(nèi)部網(wǎng)）的信息系統(tǒng)。3.WWW的特點(diǎn)分布式的信息資源；統(tǒng)一的用戶界面；支持各種信息資源和各種媒體的演播；廣泛的用途。4.WWW的結(jié)構(gòu)Web是成千上萬個(gè)網(wǎng)站連結(jié)而成的頁面式網(wǎng)絡(luò)信息系統(tǒng)。是采用“客戶機(jī)/服務(wù)器”（C/S）結(jié)構(gòu)。5.靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是從放置到服務(wù)器以后，直到發(fā)送給瀏覽器不會(huì)發(fā)生更改的網(wǎng)頁，通常用HTML語言編寫其代碼，保存為.htm或.html文件。動(dòng)態(tài)網(wǎng)頁是在發(fā)送到瀏覽器之前由應(yīng)用程序服務(wù)器修改的網(wǎng)頁。動(dòng)態(tài)網(wǎng)頁的源文件可用HTML語言和VBScript或JavaScript等腳本語言編寫，保存為.asp文件，也稱為Web應(yīng)用程序。授課題目HTML基礎(chǔ)授課時(shí)間4課時(shí)教學(xué)目的1.了解HTML文檔的基本結(jié)構(gòu)2.掌握各種標(biāo)記的結(jié)構(gòu)、作用及書寫方法教學(xué)重難點(diǎn)重點(diǎn)：各種標(biāo)記的應(yīng)用難點(diǎn)：表格標(biāo)記教學(xué)過程1.概念講解2.實(shí)例操作授課內(nèi)容一、什么是HTML？超文本標(biāo)記語言（HTML，HyperTextMarkupLanguage）是用于設(shè)計(jì)網(wǎng)頁源文件（網(wǎng)頁文檔）的語言。每一個(gè)頁面的代碼保存為一個(gè)網(wǎng)頁源文件（.htm或.html文件）。HTML包括一些定義頁面內(nèi)容和格式的符號(hào)，稱為標(biāo)記。它能夠?qū)⑽谋?、圖像、聲音和動(dòng)畫結(jié)合在一個(gè)網(wǎng)頁文檔中。這些文檔可以通過Web瀏覽器顯示，還可以通過超鏈接以訪問其它的信息資源。二、什么是標(biāo)記？標(biāo)記是網(wǎng)頁文檔中的一些有特定意義的符號(hào)。這些符號(hào)指明如何顯示文檔中的內(nèi)容。標(biāo)記總是放在三角括號(hào)中，大多數(shù)標(biāo)記都成對(duì)出現(xiàn)（有開始標(biāo)記和結(jié)束標(biāo)記）。結(jié)束標(biāo)記和開始標(biāo)記所用的字符相同，只是前面加一個(gè)斜杠。1.HTML文檔的結(jié)構(gòu)標(biāo)記【例1】2.格式標(biāo)記（1）<p>…</p>（段落標(biāo)記）用來創(chuàng)建一個(gè)段落，在此標(biāo)記之間的文本將按照段落的格式顯示。（2）<br>（換行標(biāo)記）（3）<blockquote>…</blockquote>（兩邊縮進(jìn)標(biāo)記）在此標(biāo)記之間的文本將按照兩邊縮進(jìn)的方式顯示。（4）<dl></dl><dt></dt><dd></dd>（列表標(biāo)記）【例2】（5）<ol></ol><ul></ul><li></li>（有數(shù)字或圓點(diǎn)的列表標(biāo)記）【例3】（6）<div></div>（分段標(biāo)記）3.文本標(biāo)記（1）<h1></h1>……<h6></h6>（六級(jí)標(biāo)題標(biāo)記）<h1></h1>是最大的標(biāo)題，<h6></h6>則是最小的標(biāo)題。（2）<b></b><i></i><u></u>（字體標(biāo)記）（3）<em></em><strong></strong>（強(qiáng)調(diào)加重標(biāo)記）（4）<font></font>（字體的大小顏色標(biāo)記）【例4】<font></font>可以指定輸出文本的字體大小、顏色，它主要兩個(gè)屬性size和color。4.鏈接標(biāo)記【例5】（1）<ahref="地址">…</a>（超鏈接標(biāo)記）鏈接對(duì)象為文本時(shí)（例：<ahref="">百度</a>）鏈接對(duì)象為圖像時(shí)，需使用<imgsrc="">標(biāo)記指定圖像。（例：<ahref=""><imgsrc="d:\pic1.gif"></a>）href的值也可以是mailto:形式，即發(fā)送E-Mail形式。語法為：<ahref="mailto:E-Mail地址"></a>具有target屬性，用來指明顯示的目標(biāo)窗口。（2）<aname="標(biāo)簽名"></a>（標(biāo)簽標(biāo)記）——建立錨點(diǎn)5.圖像標(biāo)記和多媒體標(biāo)記（1）圖像標(biāo)記：<imgsrc=”圖像文件名”>【例6】（2）多媒體標(biāo)記【例7】直接將音樂或影像嵌入網(wǎng)頁，使用<embed>標(biāo)記<embedsrc=”名稱”width=”寬度”height=”高度”autostart=”true”loop=”次數(shù)”/>播放網(wǎng)頁背景音樂,使用<bgsound>標(biāo)記<bgsoundsrc=”音樂文件名”loop=”次數(shù)”/>6.表格標(biāo)記（用于制作表格或網(wǎng)頁結(jié)構(gòu)）【例8】（1）<table></table>（創(chuàng)建一個(gè)表格）（2）<tr></tr>和<td></td>（創(chuàng)建表格中的每一行和每一格）（3）<th></th>（創(chuàng)建表格頭）7.表單標(biāo)記（用于制作對(duì)話框）【例9】8.其他常用標(biāo)記【例10】（1）空格標(biāo)記 （2）自動(dòng)切換標(biāo)記<meta>——可使網(wǎng)頁顯示幾秒種后，自動(dòng)切換到另一網(wǎng)頁。<metahttp-equiv=”refresh”content=”秒數(shù);URL=文件名稱或網(wǎng)址”>（3）水平線標(biāo)記<hr>（4）滾動(dòng)的文本標(biāo)簽<marquee><marqueedirection=”方向”behavior=”方式”loop=”次數(shù)”scrollamount=”速度”scrolldelay=”延時(shí)”Width="n%"onMouseOver=this.stop()onMouseOut=this.start()></marquee>

第一部分（基礎(chǔ)篇）第2章DreamweaverCS3授課題目CH2-CS3站點(diǎn)管理授課時(shí)間6課時(shí)教學(xué)目的1.熟悉Dreamweaver的界面2.掌握在Dreamweaver中文本的插入方法3.能夠熟練使用屬性面板設(shè)置文本格式教學(xué)重難點(diǎn)重點(diǎn)：文本的插入和格式設(shè)置難點(diǎn)：1.站點(diǎn)的建立與管理2.屬性面板的應(yīng)用教學(xué)過程1.安裝Dreamweaver，軟件介紹2.軟件界面講解3.創(chuàng)建與管理站點(diǎn)4.實(shí)例分析5.結(jié)合HTML標(biāo)記知識(shí)，介紹文本的插入與格式設(shè)置方法6.文本格式化的實(shí)例講解授課內(nèi)容一、Dreamweaver界面介紹、站點(diǎn)管理Dreamweaver主要由菜單欄、工具欄、制作窗口、屬性面板以及右側(cè)的一些面板組成。要使用此軟件制作網(wǎng)頁，第一步、也是最關(guān)鍵的一步就是創(chuàng)建站點(diǎn)?！狙菔菊军c(diǎn)的創(chuàng)建與管理過程】二、插入文本1.插入文本的方法直接輸入法；復(fù)制粘貼法；導(dǎo)入已有Word文檔2.插入特殊符號(hào)三、格式化文本【例1】1.設(shè)置字符格式使用屬性面板，選擇字體、設(shè)置文字的大小及顏色2.使用段落和標(biāo)題屬性面板中的“格式”下拉列表框段落——<p>標(biāo)簽的默認(rèn)格式標(biāo)題——<h1>、<h2>…<h6>標(biāo)簽3.對(duì)齊文本“屬性面板”>“對(duì)齊方式”（右對(duì)齊、居中、左對(duì)齊、兩端對(duì)齊）4.縮進(jìn)與擴(kuò)展——使得內(nèi)容在<blockquote></blockquote>對(duì)標(biāo)簽之間5.首行縮進(jìn)四、創(chuàng)建項(xiàng)目列表【例2】1.項(xiàng)目列表（幾何符號(hào)來表示其列表關(guān)系）2.有序項(xiàng)目列表（編號(hào)列表）3.嵌套項(xiàng)目列表（列表顯示不同級(jí)別的文本內(nèi)容）——配合使用縮進(jìn)與擴(kuò)展按鈕授課題目CH3設(shè)置文件頭和網(wǎng)頁屬性授課時(shí)間18課時(shí)教學(xué)目的1.了解網(wǎng)頁的編碼方式2.掌握添加網(wǎng)頁關(guān)鍵字和設(shè)置網(wǎng)頁刷新的方法教學(xué)重難點(diǎn)重點(diǎn)：理解網(wǎng)頁編碼的含義難點(diǎn)：插入meta對(duì)象的方法教學(xué)過程1.講解網(wǎng)頁文件頭設(shè)置的意義及方法2.實(shí)例演示授課內(nèi)容選擇菜單“查看”>“文件頭內(nèi)容”1.設(shè)置網(wǎng)頁的編碼UTF-8是一種被廣泛應(yīng)用的編碼，致力將全球語言納入統(tǒng)一的編碼；GB2312是簡體中文編碼。2.設(shè)定文檔標(biāo)題——等同于在<title></title>之間添加標(biāo)題3.設(shè)置網(wǎng)頁的刷新4.添加關(guān)鍵字——協(xié)助網(wǎng)絡(luò)索引擎尋找網(wǎng)頁5.插入meta對(duì)象（記錄有關(guān)當(dāng)前頁面的信息）設(shè)置刷新代碼：<metahttp-equiv="Refresh"content="5;URL=1font.html"/>設(shè)置網(wǎng)頁編碼：<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>授課題目CH4-插入表格授課時(shí)間12課時(shí)教學(xué)目的1.掌握表格的制作與編輯方法2.能夠熟練應(yīng)用表格布局頁面教學(xué)重難點(diǎn)重點(diǎn)：表格的制作與編輯難點(diǎn)：使用表格進(jìn)行頁面布局教學(xué)過程1.制作與編輯表格的操作演示2.綜合實(shí)例講解授課內(nèi)容一、制作表格【例1】1.插入表格設(shè)置表格的行數(shù)和列數(shù)設(shè)置表格的寬度，單位有像素、百分比兩種設(shè)置表格邊框，邊框若為0則不顯示邊框，在設(shè)計(jì)頁面中以虛線表示單元格邊距：單元格邊框與內(nèi)容之間的距離單元格間距：單元格與單元格間的距離值帶有頁眉的單元格為<th>，文本被加粗并居中2.制作嵌套表格在表格中再插入新的表格，在頁面布局中特別常用二、編輯表格【例2】1.選擇表格2.選擇行列選擇可以直接運(yùn)用鼠標(biāo)點(diǎn)擊進(jìn)行選取，也可以點(diǎn)擊標(biāo)記來選取3.選定單元格（按住鍵盤的Ctrl鍵，可選擇多個(gè)不相鄰的單元格）4.合并與拆分單元格→使用屬性面板5.插入行列插入單行/列：右鍵“表格”→插入行/列（插在上或前）插入多行/列：右鍵“表格”→“插入行或列”6.刪除行列7.隱藏單元格之間的分隔線【例3】（1）控制單元格邊框的顯示（參數(shù)rules取值）cols——只顯示單元格列邊框rows——只顯示單元格行邊框none——不顯示單元格邊框all——顯示所有單元格邊框（2）控制表格外邊框的顯示（參數(shù)frame取值）vsides——只顯示表格左右邊框hsides——只顯示表格上下邊框lhs——只顯示表格左邊框rhs——只顯示表格右邊框above——只顯示表格上邊框below——只顯示表格下邊框void——不顯示表格邊框表格的綜合應(yīng)用【例4】1.插入表格（運(yùn)用表格布局）2.表格與單元格屬性設(shè)定（邊框、高、寬、背景、對(duì)齊方式、邊框顯示與隱藏）3.文本樣式設(shè)定授課題目CH5-插入多媒體對(duì)象和JavaApplet授課時(shí)間12課時(shí)教學(xué)目的1.掌握?qǐng)D像的使用方法2.掌握Flash對(duì)象的插入與屬性設(shè)置方法3.掌握音視頻的插入方法4.了解JavaApplet教學(xué)重難點(diǎn)重點(diǎn)：1.圖像的插入與屬性設(shè)置2.Flash按鈕和文本的插入、Flash背景透明的參數(shù)設(shè)定3.音視頻的插入方法4.JavaApplet的應(yīng)用難點(diǎn)：1.Flash按鈕和文本的應(yīng)用2.插件的使用教學(xué)過程1.回憶上節(jié)內(nèi)容，復(fù)習(xí)table布局實(shí)例中的知識(shí)點(diǎn)2.講解多媒體的插入方法與屬性3.操作演示授課內(nèi)容一、使用圖像1.插入圖像2.鼠標(biāo)經(jīng)過圖像3.設(shè)置圖像屬性（圖像大小、源文件、鏈接地址、邊框、對(duì)齊方式、邊距）二、插入Flash對(duì)象1.插入Flash動(dòng)畫要使Flash背景透明，設(shè)置參數(shù)wmode值為transparent2.插入flash按鈕3.使用Flash文本對(duì)象4.插入Flashpaper5.圖像查看器菜單“插入記錄”>“媒體”>“圖像查看器”三、插入音視頻對(duì)象1.插入FlashVideo（只能插入格式為.flv的視頻）2.插入Shockwave影片（插入格式為.dcr/.dir/.dxr的視頻）3.插入ActiveX4.插入插件——等同于添加embed標(biāo)簽四、插入JavaAppletJavaApplet嵌入在WWW頁面，作為頁面的組成部分被下載，并能運(yùn)行在實(shí)現(xiàn)Java虛機(jī)器的web瀏覽器中。【例】插入多媒體對(duì)象授課題目CH6-創(chuàng)建超鏈接、Dreamweaver新增功能授課時(shí)間6課時(shí)教學(xué)目的1.掌握超鏈接的創(chuàng)建方法2.了解spry框架的應(yīng)用方法教學(xué)重難點(diǎn)超鏈接的創(chuàng)建教學(xué)過程1.知識(shí)講解2.操作演示授課內(nèi)容一、地址和鏈接要?jiǎng)?chuàng)建從exercise目錄下的images.html要?jiǎng)?chuàng)建從exercise目錄下的images.html到站點(diǎn)根目錄下的index.html的鏈接，鏈接地址應(yīng)是“../index.html”。要?jiǎng)?chuàng)建到exercise目錄下的images.html的鏈接，任何文件中的鏈接地址都可以寫成“/exercise/images.html”。1.文件地址文件相對(duì)地址相對(duì)地址根目錄相對(duì)地址內(nèi)部鏈接：超級(jí)鏈接的是站點(diǎn)目錄外的文件2.超級(jí)鏈接外部鏈接：超級(jí)鏈接的是站點(diǎn)目錄內(nèi)的文件二、添加鏈接1.添加外部鏈接(文字/圖像)2.添加內(nèi)部鏈接方法一：選擇文件方式方法二：拖放定位圖標(biāo)方式3.添加E-mail鏈接方法一：菜單“插入記錄”>“電子郵件鏈接”方法二：在鏈接地址中輸入mailto:**@**三、書簽鏈接和熱點(diǎn)鏈接1.書簽鏈接2.熱點(diǎn)鏈接【例】創(chuàng)建超級(jí)鏈接四、Spry框架【例】“插入”工具欄中Spry欄，可插入Spry菜單欄、Spry選項(xiàng)卡式面板、Spry折疊式、Spry可折疊面板

第二部分（提高篇）網(wǎng)頁布局和框架網(wǎng)頁主要采用表格、框架來布局，另外在網(wǎng)站制作過程中，網(wǎng)頁模板的運(yùn)用是非常普遍的。因此，在本章中介紹表格的布局模式、框架和網(wǎng)頁模板這幾部分的內(nèi)容，共授課30課時(shí)。授課題目CH8表格布局模式的應(yīng)用授課時(shí)間6課時(shí)教學(xué)目的1.了解網(wǎng)頁布局的幾種方法2.了解運(yùn)用布局模式進(jìn)行頁面布局3.學(xué)會(huì)使用標(biāo)尺與網(wǎng)格教學(xué)重難點(diǎn)重點(diǎn)：在布局模式中繪制布局表格和布局單元格難點(diǎn)：1.嵌套布局表格的應(yīng)用方法2.布局表格與布局單元格的屬性設(shè)置教學(xué)過程1.知識(shí)引入2.操作講解授課內(nèi)容5.1布局模式切換到“布局”模式方法一：“查看”>“表格模式”>“布局模式”方法二：按Alt+F65.2繪制布局表格和布局單元格一、繪制布局表格二、繪制布局單元格（布局單元格只能出現(xiàn)在布局表格內(nèi)部）三、繪制嵌套布局表格5.3使用標(biāo)尺與網(wǎng)格一、使用標(biāo)尺（菜單“查看”>“標(biāo)尺”>“顯示”）二、使用網(wǎng)絡(luò)（菜單“查看”>“網(wǎng)格設(shè)置”）5.4調(diào)整布局表格及布局單元格一、選擇布局表格和布局單元格二、調(diào)整布局表格和布局單元格的大小三、移動(dòng)嵌套布局表格和布局單元格四、設(shè)置布局表格和布局單元格屬性五、設(shè)置列寬1.使用間隔圖像2.列設(shè)置為自動(dòng)伸展3.列設(shè)置為固定寬度5.5設(shè)置布局模式的首選參數(shù)“編輯”>“首選參數(shù)”>“分類”>“布局模式”授課題目CH7.框架的使用授課時(shí)間6課時(shí)教學(xué)目的1.掌握框架的使用方法2.能夠運(yùn)用框架進(jìn)行頁面布局，在框架中實(shí)現(xiàn)幾個(gè)頁面的切換3.能夠靈活應(yīng)用嵌入式框架教學(xué)重難點(diǎn)重點(diǎn)：1.框架的創(chuàng)建、選擇、保存與屬性設(shè)置2.嵌入式框架的應(yīng)用難點(diǎn)：1.框架的修改與保存2.運(yùn)用屬性面板設(shè)置框架與框架集的屬性3.嵌入式框架的屬性設(shè)置教學(xué)過程1.復(fù)習(xí)上次課內(nèi)容2.創(chuàng)設(shè)情境、提供框架實(shí)例3.知識(shí)講解4.操作演示授課內(nèi)容一、框架與框架集框架:是瀏覽器窗口中的一個(gè)區(qū)域，它可以顯示與瀏覽器窗口其余部分所顯示內(nèi)容無關(guān)的HTML文檔。框架集:定義了一組框架的布局和屬性，包括框架的數(shù)目、大小和位置，以及在每個(gè)框架中的初始頁面的URL?！究蚣芗募旧聿话跒g覽器中顯示的HTML內(nèi)容，它只是向?yàn)g覽器提供應(yīng)如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。】二、創(chuàng)建框架和框架集1.創(chuàng)建框架（工具欄“插入”>“布局”>“框架”）2.設(shè)計(jì)框架集（1）創(chuàng)建框架集：“修改”>“框架集”>“選擇拆分項(xiàng)”（2）拆分框架：可將框架邊框從邊緣拖入視圖中間。要將不在設(shè)計(jì)視圖邊緣的框架邊框（內(nèi)部的框架邊框）拆分成一個(gè)框架，可在按住Alt鍵的同時(shí)拖動(dòng)框架邊框。要將一個(gè)框架拆分成四個(gè)框架，可將框架邊框從設(shè)計(jì)視圖的一角拖入框架的中間。單獨(dú)拆分一個(gè)框架。選擇“窗口”>“框架”，在框架面板上單擊待拆分的框架，用光標(biāo)拖動(dòng)相應(yīng)框架的邊框。（3）刪除框架：將框架邊框拖離頁面或拖到父框架的邊框上三、選擇框架和框架集1.在文檔窗口中選擇框架和框架集（1）選擇框架：在設(shè)計(jì)視圖中，按住Alt鍵的同時(shí)單擊框架內(nèi)部，這時(shí)在框架周圍會(huì)顯示一個(gè)選擇輪廓。（2）選擇框架集：單擊框架集的某一內(nèi)部框架邊框，則在框架集周圍顯示一個(gè)選擇輪廓。（3）選擇不同的框架或框架集2.在“框架”面板中選擇框架和框架集選擇菜單“窗口”>“框架”，調(diào)出框架面板四、保存框架和框架集文件（Ctrl+S）五、設(shè)置框架和框架集屬性六、為框架設(shè)置鏈接在設(shè)置鏈接地址后，注意選擇鏈接目標(biāo)，即指定頁面顯示的target七、處理不能顯示框架的瀏覽器“修改”>“框架集”>“編輯無框架內(nèi)容”【例1】框架應(yīng)用實(shí)例八、嵌入式框架的應(yīng)用（使用<iframe></iframe>標(biāo)簽）【例2】嵌入式框架應(yīng)用實(shí)例授課題目CH10.模板和庫授課時(shí)間6課時(shí)教學(xué)目的1.掌握模板的創(chuàng)建和使用方法2.了解庫的作用3.能夠使用模板與庫制作一個(gè)較為完整的網(wǎng)站教學(xué)重難點(diǎn)重點(diǎn)：模板的創(chuàng)建與應(yīng)用難點(diǎn)：1.模板的創(chuàng)建2.可編輯區(qū)域的創(chuàng)建與使用教學(xué)過程1.提供實(shí)例，進(jìn)行實(shí)例分析2.新知識(shí)講解3.實(shí)例操作演示授課內(nèi)容一、基本概念模板：用來控制大的設(shè)計(jì)區(qū)域，以及重復(fù)使用完整的布局的文件?？梢曰谀０鍎?chuàng)建文檔，從而使創(chuàng)建的文檔繼承模板的頁面布局。庫：是一種用來存儲(chǔ)在整個(gè)Web站點(diǎn)上經(jīng)常重復(fù)使用的頁面元素（如圖像、文本和其他對(duì)象等）的文件。二、應(yīng)用模板與庫的基本操作1.創(chuàng)建模板創(chuàng)建模板的2種方法：（1）修改現(xiàn)有文檔創(chuàng)建模板（2）在“資源”面板中創(chuàng)建空白模板2.創(chuàng)建模板的可編輯區(qū)域創(chuàng)建可編輯區(qū)域的3種方法：（1）用菜單設(shè)置選擇菜單“插入”>“模板對(duì)象”>“可編輯區(qū)域”命令（2）用快捷菜單右擊選擇的文本或?qū)ο螅趶棾龅目旖莶藛沃羞x擇“模板”>“新建可編輯區(qū)域”命令。（3）用工具欄3.創(chuàng)建庫項(xiàng)目庫是一種用來存儲(chǔ)希望在整個(gè)網(wǎng)站上經(jīng)常重復(fù)使用或更新的網(wǎng)頁元素（如圖像、文本和其他對(duì)象）的文件，這些網(wǎng)頁元素被稱為庫項(xiàng)目。使用庫，可以一次更新該網(wǎng)站中的多個(gè)網(wǎng)頁。創(chuàng)建庫項(xiàng)目的具體步驟：（1）選擇文檔的一部分并另存為庫項(xiàng)目；（2）在“資源”面板中單擊庫圖標(biāo)查看庫資源；（3）將需要?jiǎng)?chuàng)建的庫項(xiàng)目拖到“資源”面板的“庫”類別中，為新創(chuàng)建的庫項(xiàng)目命名。4.在文檔中插入庫項(xiàng)目將庫項(xiàng)目拖到文檔中需要插入庫項(xiàng)目的地方；或者將光標(biāo)放在文檔中需要插入庫項(xiàng)目的地方，在庫項(xiàng)目列表中選擇一個(gè)庫項(xiàng)目并單擊“插入”按鈕?！纠磕０搴蛶斓膽?yīng)用

第二部分（提高篇）第11章CSS層疊樣式表本章主要介紹運(yùn)用CSS層疊樣式表來進(jìn)行樣式定義，在網(wǎng)頁設(shè)計(jì)中占據(jù)重要地位，共授課4課時(shí)。授課題目CSS的基本概念授課時(shí)間4課時(shí)教學(xué)目的1.了解CSS定義的格式2.掌握CSS定義的基本規(guī)則3.能夠熟練地應(yīng)用CSS進(jìn)行頁面樣式設(shè)定教學(xué)重難點(diǎn)重點(diǎn)：1.CSS樣式的格式2.標(biāo)簽選擇符、類選擇符和ID選擇符的定義與應(yīng)用難點(diǎn)：1.標(biāo)簽選擇符、類選擇符和ID選擇符的定義與應(yīng)用2.CSS在網(wǎng)頁中的內(nèi)置、內(nèi)部和外部應(yīng)用的幾種方式的掌握教學(xué)過程1.知識(shí)點(diǎn)介紹2.操作驗(yàn)證授課內(nèi)容一、樣式和規(guī)則CSS樣式由3部分構(gòu)成：選擇符（selector）、屬性（properties）、屬性值（value）。有兩種寫法：基本格式→選擇符{屬性:值}復(fù)合樣式→選擇符{屬性1:值1;屬性2:值2}（1）單個(gè)“HTML標(biāo)簽”作為選擇符單個(gè)“HTML標(biāo)簽”如：body、table、tr、td、p等【例】body{color:black}注：1.屬性值由多個(gè)單詞組成，必須在值上加引號(hào)?！纠縫{font-family:"sansserif"}2.需要對(duì)一個(gè)選擇符指定多個(gè)屬性時(shí)，注意使用分號(hào)將所有的屬性和值分開?！纠縫{text-align:center;color:red}3.為了使所定義的樣式表易讀，可以采用分行的書寫格式。【例】p{text-align:center;color:black;font-family:Arial；}（2）選擇符組把具有相同屬性和值的選擇符組合起來書寫，用逗號(hào)將選擇符分開，減少重復(fù)定義?！纠縫,table{font-size:13px;}（3）類選擇符——把相同的元素分類定義不同的樣式注：定義類選擇符時(shí)，在自定類的名稱前面加一個(gè)點(diǎn)號(hào)。【例】定義兩個(gè)不同的段落，一個(gè)右對(duì)齊，一個(gè)居中對(duì)齊第一步：定義類P.right{text-align:right}P.center{text-align:center}第二步：應(yīng)用類<pclass="right">這個(gè)段落向右對(duì)齊的</p><pclass="center">這個(gè)段落是居中排列的</p>（4）ID選擇符——對(duì)單一元素定義單獨(dú)的樣式Ⅰ.以標(biāo)簽跟“#ID名稱”開頭，使此樣式屬性只用于該標(biāo)簽?！纠縫#intro{…}Ⅱ.直接以“#”開頭，使該ID代表的樣式屬性可用于各種網(wǎng)頁元素。【例】#intro{…}（5）包含選擇符——可以單獨(dú)對(duì)元素1里包含的元素2定義樣式表【例】tablea{font-size:12px;}二、層疊和順序網(wǎng)頁中CSS應(yīng)用樣式常包括內(nèi)聯(lián)樣式（Inlinestyles）、內(nèi)部樣式（Embeddedstyles）、鏈接樣式（Linkedstyles）、導(dǎo)入樣式（Importedstyles）、缺省瀏覽器樣式（Defaultbrowserstyles）這五種方式。（1）內(nèi)聯(lián)樣式（Inlinestyles）在HTML標(biāo)簽內(nèi)使用style屬性定義，定義該標(biāo)簽的個(gè)別樣式。注：style屬性可以應(yīng)用于任意的body元素，可將任何數(shù)量的樣式屬性聲明當(dāng)作自己的值，而每個(gè)聲明用分號(hào)隔開。（2）內(nèi)部樣式（Embeddedstyles）在<head>與</head>之間用style標(biāo)簽加入css樣式定義。適用于指定該網(wǎng)頁的樣式?！纠?lt;html><head><styletype=“text/css”><!--p{color:red}--></style></head><body><p>內(nèi)部樣式舉例</p></body></html>（3）鏈接樣式（Linkedstyles）事先建立外部樣式表文件（.css），然后在網(wǎng)頁文件的<head>與</head>之間用link標(biāo)簽鏈接該樣式表文件。此法使頁面內(nèi)容與版面設(shè)計(jì)分開，易于管理整個(gè)網(wǎng)站的網(wǎng)頁風(fēng)貌?！纠?lt;html><head><linkrel=”stylesheet”type=”text/css”href=”my.css”></head><body><p>鏈接樣式舉例</p></body></html>（4）導(dǎo)入樣式（Importedstyles）指在內(nèi)部樣式定義里，使用@import命令引用事先建立的外部樣式表文件?！纠?lt;html><head><styletype=”text/css”><!--@import“my.css”--></style></head><body><p>導(dǎo)入樣式舉例</p></body></html>（5）缺省瀏覽器樣式（Defaultbrowserstyles）瀏覽器一般按照上述順序，由內(nèi)到外，依次地，繼承式地（層疊式地）執(zhí)行樣式表的指令?！究偨Y(jié)】歸納起來CSS有三種級(jí)別：外部樣式：應(yīng)用于多個(gè)頁面，可使用擴(kuò)展名為.css的外部樣式文件內(nèi)部樣式：應(yīng)用于單個(gè)頁面，可在網(wǎng)頁的<head>與</head>之間定義一個(gè)樣式代碼塊<style>……</style>內(nèi)置樣式：應(yīng)用于頁面內(nèi)部明確的標(biāo)簽，可在標(biāo)簽內(nèi)添加style="..."屬性授課題目使用DreamweaverCS3建立CSS授課時(shí)間4課時(shí)教學(xué)目的1.能夠熟練運(yùn)用CSS面板來建立和管理CSS2.能夠在Dreamweaver中運(yùn)用CSS定義頁面樣式教學(xué)重難點(diǎn)重點(diǎn)：1.CSS面板的應(yīng)用2.頁面屬性中樣式的設(shè)定難點(diǎn)：運(yùn)用CSS面板對(duì)CSS進(jìn)行創(chuàng)建和管理教學(xué)過程1.實(shí)例分析2.知識(shí)講解3.操作演示授課內(nèi)容一、用“CSS面板”建立CSS“CSS面板”可以為當(dāng)前網(wǎng)頁新建、管理、編輯和套用內(nèi)部樣式，以及附加外部樣式表。二、用“頁面屬性”新建內(nèi)部樣式三、用“屬性面板”新建內(nèi)部樣式四、套用CSS【例】CSS的創(chuàng)建與應(yīng)用授課題目CSS濾鏡授課時(shí)間4課時(shí)教學(xué)目的了解使用CSS濾鏡各自產(chǎn)生的效果教學(xué)重難點(diǎn)設(shè)置CSS濾鏡時(shí)，各屬性的含義與取值教學(xué)過程1.案例展示2.實(shí)例操作授