《網(wǎng)頁(yè)設(shè)計(jì)與制作》教案.doc

_網(wǎng)頁(yè)設(shè)計(jì)與制作教案課程名稱網(wǎng)頁(yè)設(shè)計(jì)與制作課程類型使用教材教材名稱：網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)用教程 主編：劉艷麗出版社：高等教育出版社 日期：2011年5月學(xué)時(shí)分配共64學(xué)時(shí)，其中理論36學(xué)時(shí)，實(shí)踐28學(xué)時(shí)。課程教學(xué)目的與要求該課程是三年制高職高專電子商務(wù)專業(yè)的職能課程，目標(biāo)是讓學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)的基本概念，學(xué)會(huì)使用常用的網(wǎng)頁(yè)設(shè)計(jì)工具和相關(guān)網(wǎng)頁(yè)美工軟件，能夠設(shè)計(jì)制作常見的靜態(tài)網(wǎng)頁(yè)。它要以計(jì)算機(jī)基礎(chǔ)、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)課程的學(xué)習(xí)為基礎(chǔ)，也是進(jìn)一步學(xué)習(xí)網(wǎng)絡(luò)編輯、網(wǎng)站建設(shè)與管理課程的基礎(chǔ)。主要參考書目趙喜清，崔海濤網(wǎng)頁(yè)設(shè)計(jì)與制作哈爾濱工業(yè)大學(xué)出版社，2010.9孫振業(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作高等教育出版社，2009.3課程教案（:1）授課內(nèi)容網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法教學(xué)目的與要求本次課程將講授網(wǎng)頁(yè)制作的基本知識(shí)，使學(xué)生了解到什么是網(wǎng)頁(yè)，網(wǎng)頁(yè)制作涉及到哪些工具、網(wǎng)頁(yè)與網(wǎng)站有什么區(qū)別，網(wǎng)頁(yè)與普通的文檔有什么區(qū)別等。通過講授也將使學(xué)生了解到網(wǎng)頁(yè)的組成，網(wǎng)頁(yè)語言的種類及各自特點(diǎn)；動(dòng)態(tài)網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)的定義；Internet信息發(fā)布的原理等等內(nèi)容。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 Internet信息訪問原理。2 什么是網(wǎng)頁(yè)？（1） 網(wǎng)頁(yè)內(nèi)容組成；（2） 網(wǎng)頁(yè)編寫語言種類及特點(diǎn)。3 Dreamweaver8功能簡(jiǎn)介。教學(xué)難點(diǎn)：Internet信息訪問原理；網(wǎng)頁(yè)編寫語言種類及特點(diǎn)。教學(xué)過程設(shè)計(jì)一、 基礎(chǔ)知識(shí)1 網(wǎng)頁(yè)簡(jiǎn)介（15分鐘左右）網(wǎng)頁(yè)：是組成WWW（World Wide Web：萬維網(wǎng)）的基本元素，也被稱為頁(yè)面或Web頁(yè)。不同的網(wǎng)頁(yè)通過超鏈接聯(lián)系在一起，構(gòu)成了WWW縱橫交織結(jié)構(gòu)。網(wǎng)站：就是一個(gè)相互鏈接的網(wǎng)頁(yè)的集合，它們可以共享。大的網(wǎng)站頁(yè)面數(shù)量多達(dá)幾十萬，甚至上百萬頁(yè)，小的個(gè)人網(wǎng)站也可以只包含數(shù)個(gè)頁(yè)面。主頁(yè)：是網(wǎng)站中的一個(gè)特殊網(wǎng)頁(yè)，它是在WWW上進(jìn)入網(wǎng)站的第一個(gè)網(wǎng)頁(yè)，其中包含指向其他網(wǎng)頁(yè)的超鏈接，通常主頁(yè)的名稱是固定的。2 Internet簡(jiǎn)介（5分鐘左右）3 了解常用的網(wǎng)頁(yè)制作工具（10分鐘左右） 如：Dreamweaver和FrontPage4 了解美化網(wǎng)頁(yè)的主要工具（10分鐘左右）（1）圖像處理軟件：Photoshop、Fireworks、CorelDRAW等（2）動(dòng)畫制作工具：Flash5 了解網(wǎng)頁(yè)中的腳本語言（10分鐘左右）如：VBScript、JavaScript6 了解服務(wù)器端主要技術(shù)（10分鐘左右）服務(wù)器端腳本語言：ASP、JSP、PHP、CGI等。它們的形式與HTML有些類似，但功能更加強(qiáng)大，能夠?qū)崿F(xiàn)許多功能。二、了解建立網(wǎng)站的基本流程（10分鐘左右）1 確定網(wǎng)站主題2 搜集資料3 規(guī)劃網(wǎng)站4 選擇合適的制作工具5 制作網(wǎng)頁(yè)6 上傳測(cè)試7 推廣宣傳8 維護(hù)更新三、Dreamweaver CS3基礎(chǔ)（20分鐘左右）1 Dreamweaver的發(fā)展史2 Dreamweaver CS3的新功能3 Dreamweaver CS3工作區(qū)簡(jiǎn)介4 網(wǎng)頁(yè)文檔的基本操作作業(yè)/思考題：1 列舉你所了解的網(wǎng)頁(yè)設(shè)計(jì)的常用工具和美化網(wǎng)頁(yè)的主要工具2 建立網(wǎng)站的基本流程有哪些步驟？請(qǐng)歸納總結(jié)。3 利用網(wǎng)上資源，在百度中搜索“網(wǎng)頁(yè)配色方案”關(guān)鍵詞，下載相關(guān)的“網(wǎng)頁(yè)配色方案”文件，指導(dǎo)以后網(wǎng)頁(yè)設(shè)計(jì)中的配色問題。教學(xué)后記：第一節(jié)課，應(yīng)首先介紹網(wǎng)站發(fā)展的前景，重點(diǎn)分解Dreamweaver和其他軟件的區(qū)別，提出利用網(wǎng)絡(luò)傳播信息，并由此講述網(wǎng)絡(luò)發(fā)展給網(wǎng)頁(yè)帶來的市場(chǎng)。通過兩節(jié)課的講授，感覺到學(xué)生能對(duì)本課程產(chǎn)生比較大的興趣！-可編輯修改-課程教案（:2）授課內(nèi)容站點(diǎn)的創(chuàng)建與管理課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法教學(xué)目的與要求本次課程將講授網(wǎng)站站點(diǎn)的創(chuàng)建與管理知識(shí)，使學(xué)生了解到什么是站點(diǎn)，站點(diǎn)的種類，站點(diǎn)的作用，站點(diǎn)文件的管理。站點(diǎn)的發(fā)布及網(wǎng)頁(yè)的預(yù)覽。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 站點(diǎn)的創(chuàng)建；2 站點(diǎn)文件的管理；3 站點(diǎn)文件的預(yù)覽；4 站點(diǎn)地圖的生成。教學(xué)難點(diǎn)：測(cè)試?yán)梅?wù)器技術(shù)的站點(diǎn)；站點(diǎn)地圖創(chuàng)建的條件；遠(yuǎn)程站點(diǎn)的創(chuàng)建。教學(xué)過程設(shè)計(jì)一、 站點(diǎn)（10分鐘左右）也稱“網(wǎng)站”，用來定位網(wǎng)站上的所有文件，是一系列通過超鏈接而相互聯(lián)系的網(wǎng)頁(yè)集合。建立網(wǎng)站首先要在本地計(jì)算機(jī)上構(gòu)建本地站點(diǎn)來管理站點(diǎn)中的文檔，制作網(wǎng)頁(yè)，測(cè)試完畢后，上傳到Internet服務(wù)器。二、 新建本地站點(diǎn)（20分鐘左右）1 站點(diǎn)菜單->新建站點(diǎn)2 站點(diǎn)菜單->管理站點(diǎn)->新建3 建立站點(diǎn)注意問題：（1） 用文件夾進(jìn)行分類存儲(chǔ)：如網(wǎng)頁(yè)文件存放在html文件夾中，圖像文件存放在images文件夾中。嵌套文件夾的層數(shù)不要太多，最多不超過三層，否則超鏈接時(shí)會(huì)出錯(cuò)。（2） 文件命名要合理：建議全部使用小寫的文件名稱，不要用中文文件名。文件夾的名稱最好用顧名思義的英文，方便以后修改維護(hù)。文件名也要符合規(guī)范，比如首頁(yè)一般命名為index.html或default.html。三、 網(wǎng)站文件的管理（20分鐘左右）1 文件的創(chuàng)建(鼠標(biāo)右擊站點(diǎn)->新建文件；文件菜單->新建；ctrl+N)；2 文件的選擇(鼠標(biāo)點(diǎn)擊單選；按ctrl或shift鍵輔助多選)；3 打開和編輯文件(雙擊)；4 刪除文件；5 重命名文件(右擊文件；F2)；6 保存及另存為文件：ctrl+s/f12；或通過文件菜單；7 文件的復(fù)制，移動(dòng)，關(guān)閉：ctrl+c.ctrl+x，ctrl+w；8 消除文件只讀屬性：右擊文件選擇；9 將文件設(shè)為首頁(yè)：和制作站點(diǎn)地圖有關(guān)；10 給文件添加設(shè)計(jì)備注：備注文件的存放位置和文件的擴(kuò)展名。四、 頁(yè)面預(yù)覽(F12鍵)（20分鐘左右）1 文件菜單->在瀏覽器中預(yù)覽->選擇瀏覽器2 工具欄->地球土標(biāo)->選擇瀏覽器：此時(shí)可通過”添加瀏覽器”選項(xiàng)來增加更多的瀏覽器3 編輯菜單->首選參數(shù)->在瀏覽器中預(yù)覽->不選”使用臨時(shí)文件預(yù)覽”五、 站點(diǎn)的編輯和管理（20分鐘左右）1 站點(diǎn)管理器：文件面板(窗口菜單或F8鍵)2 打開現(xiàn)有本地站點(diǎn)3 查看本地和遠(yuǎn)程網(wǎng)站的文件和地圖4 調(diào)整窗口視圖5 保存站點(diǎn)地圖6 重建站點(diǎn)緩存7 站點(diǎn)編輯，復(fù)制，刪除，導(dǎo)入與導(dǎo)出：站點(diǎn)菜單->管理站點(diǎn)作業(yè)/思考題：1 在制作網(wǎng)頁(yè)前為什么要首先建立站點(diǎn)？2 定義本地站點(diǎn)的含義是什么？3 建立站點(diǎn)應(yīng)該注意的問題？教學(xué)后記：網(wǎng)站的站點(diǎn)，好似一個(gè)班級(jí)，應(yīng)該首先為班級(jí)起一個(gè)名稱，并配備一個(gè)班主任，然后再陸續(xù)的加入一些學(xué)生。這其實(shí)就是我們站點(diǎn)創(chuàng)建時(shí)應(yīng)該為站點(diǎn)起一個(gè)名字，并設(shè)置一個(gè)首頁(yè)，增加更多的超鏈接。課程教案（:3）授課內(nèi)容了解Dreamweaver的界面及站點(diǎn)的建立課 型£理論 R實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法、演示法教學(xué)目的與要求利用Dreamweaver CS3熟練創(chuàng)建本地. 遠(yuǎn)程站點(diǎn)。并掌握Dreamweaver的基本操作。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 站點(diǎn)的創(chuàng)建；2 站點(diǎn)文件的管理；3 站點(diǎn)文件的預(yù)覽；4 站點(diǎn)地圖的生成。教學(xué)難點(diǎn)：站點(diǎn)地圖創(chuàng)建的條件；遠(yuǎn)程站點(diǎn)的創(chuàng)建。教學(xué)過程設(shè)計(jì)1. 本地站點(diǎn)的創(chuàng)建（1） 運(yùn)行軟件（2） 站點(diǎn)菜單->新建站點(diǎn)（3） 遠(yuǎn)程服務(wù)器連接選擇為無2. 遠(yuǎn)程站點(diǎn)的創(chuàng)建（1） 運(yùn)行軟件（2） 站點(diǎn)菜單->新建站點(diǎn)（3） 遠(yuǎn)程服務(wù)器連接選擇為FTP3. IIS的安裝（1） 我的電腦->控制面板->添加和刪除程序（2） 選擇添加windows組件（3） 勾選Internet信息服務(wù)，更新安裝4. 創(chuàng)建利用服務(wù)器技術(shù)的站點(diǎn)（1） 運(yùn)行軟件（2） 站點(diǎn)菜單->新建站點(diǎn)（3） 是否利用服務(wù)器技術(shù)設(shè)置為是（4） 允許IIS，將默認(rèn)站點(diǎn)的主目錄設(shè)置為站點(diǎn)所對(duì)應(yīng)的文件夾（5） 設(shè)置服務(wù)器站點(diǎn)的測(cè)試服務(wù)器為http：/localhost5. 站點(diǎn)文件的管理站點(diǎn)文件的創(chuàng)建. 編輯及預(yù)覽6. 管理站點(diǎn)（1） 站點(diǎn)菜單->新建站點(diǎn)（2） 實(shí)現(xiàn)對(duì)站點(diǎn)創(chuàng)建. 刪除. 編輯（3） 導(dǎo)出并重新導(dǎo)入站點(diǎn)作業(yè)/思考題：1 在制作網(wǎng)頁(yè)前為什么要首先建立站點(diǎn)？2 定義本地站點(diǎn)的含義是什么？3 建立站點(diǎn)應(yīng)該注意的問題？教學(xué)后記： 通過本次實(shí)訓(xùn)，讓學(xué)生系統(tǒng)的掌握站點(diǎn)的創(chuàng)建及管理，了解各類站點(diǎn)的創(chuàng)建過程，并能正確的導(dǎo)出和導(dǎo)入站點(diǎn)文件。課程教案（:4）授課內(nèi)容HTML語言簡(jiǎn)介課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法教學(xué)目的與要求1 了解HTML語言，重點(diǎn)掌握HTML文件的基本結(jié)構(gòu)和語法格式；2 掌握標(biāo)記語言的用法；3 熟記<title>標(biāo)記、<marquee>標(biāo)記及常用屬性代碼。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 HTML文件的基本結(jié)構(gòu)；2 HTML語法格式；教學(xué)難點(diǎn)：設(shè)置網(wǎng)頁(yè)標(biāo)題；設(shè)置網(wǎng)頁(yè)關(guān)鍵字；制作滾動(dòng)文字。教學(xué)過程設(shè)計(jì)一、 HTML簡(jiǎn)介（5分鐘左右）HTML：(HyperText Markup Language)是一種超文本標(biāo)記語言，是網(wǎng)頁(yè)制作的基本語言。即通過將特定的標(biāo)記放置在文本或圖片或URL前后，來達(dá)到使該段文本或圖片或URL以指定方式顯示的目的。二、 HTML文件的基本結(jié)構(gòu)（10分鐘左右）<HTML><head><title>網(wǎng)頁(yè)的標(biāo)題</title></head><body>網(wǎng)頁(yè)的主體內(nèi)容</body></HTML>三、 HTML語法格式（20分鐘左右）1 HTML標(biāo)記一般格式<標(biāo)記 屬性1=”屬性值1” 屬性2=”屬性值2” >對(duì)象</標(biāo)記>說明：標(biāo)記除了上述格式，還有單標(biāo)記，如下面的<img>標(biāo)記；屬性書寫不分先后順序；屬性值用英文雙撇號(hào)括住。2 HTML語法規(guī)則HTML文件以純文本格式形式存放，擴(kuò)展名為“*. html”或“*. htm”。HTML標(biāo)記不區(qū)分大小寫。多數(shù)HTML標(biāo)記可以嵌套，但不可以交叉。HTML源文件中的換行、回車符和多個(gè)連續(xù)空格在顯示效果中無效。只有在設(shè)計(jì)視圖中才有用。在HTML源文件中，<br>為換行標(biāo)記；<p></p>為換段標(biāo)記；空格用&nbsp; 表示。四、 HTML標(biāo)記舉例（55分鐘左右）1 設(shè)置網(wǎng)頁(yè)標(biāo)題：<title>標(biāo)記2 元信息標(biāo)記：<meta>標(biāo)記<meta>標(biāo)記的信息只顯示在源代碼中，瀏覽器中沒有顯示，通過設(shè)置<meta>標(biāo)記的不同屬性，可以定義頁(yè)面中各種元數(shù)據(jù)，如頁(yè)面的名稱、關(guān)鍵詞等多種信息。3 制作滾動(dòng)文字：<marquee>標(biāo)記屬性：1 direction 表示滾動(dòng)的方向，值可以是left、right、up、down，默認(rèn)為left。2 behavior 表示滾動(dòng)的方式，值可以是scroll（連續(xù)滾動(dòng)）、slide（滑動(dòng)一次）、alternate（來回滾動(dòng)）。3 Loop表示循環(huán)的次數(shù)，值是正整數(shù)，默認(rèn)為無線循環(huán)。4 Scrollamount 表示運(yùn)動(dòng)速度，值是正整數(shù)，默認(rèn)為6。5 Scrolldelay 表示停頓時(shí)間，值是正整數(shù)，默認(rèn)為0，單位是毫秒。6 Align表示元素的垂直對(duì)齊方式，值可以是top、bottom、middle。7 Height、width表示運(yùn)動(dòng)區(qū)域的高度和寬度，值是正整數(shù)或百分比，默認(rèn)width=100%，height為標(biāo)簽內(nèi)元素的高度。事件：onMouseOver=this.stop()和onMouseOut=this.start()，表示當(dāng)鼠標(biāo)浮到以上區(qū)域的時(shí)候滾動(dòng)停止和當(dāng)鼠標(biāo)移開的時(shí)候又繼續(xù)滾動(dòng)。作業(yè)/思考題：1 關(guān)鍵字之間以英文逗號(hào)分隔。關(guān)鍵詞輸入不是越多越好，因?yàn)榇蠖鄶?shù)搜索引擎限制關(guān)鍵字的數(shù)量，所以設(shè)置關(guān)鍵字要精簡(jiǎn)才會(huì)被搜中率高。2 什么是HTML？HTML文件的基本結(jié)構(gòu)是什么？3 HTML標(biāo)記的一般格式是什么？教學(xué)后記：雖然現(xiàn)在不懂HTML也能制作漂亮網(wǎng)頁(yè)，但是只有掌握HTML，才可以更方便、更全面地控制網(wǎng)頁(yè)，同時(shí)又一些網(wǎng)頁(yè)設(shè)計(jì)離不開代碼。課程教案（:5）授課內(nèi)容網(wǎng)頁(yè)文本的使用課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法教學(xué)目的與要求本次課程將講授網(wǎng)頁(yè)制作過程中的文本使用，掌握各種特殊文本的輸入，文本列表的使用。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 特殊文本的輸入及使用狀態(tài)；2 文本屬性；3 文本列表的使用；4 在html中的文本代碼。教學(xué)難點(diǎn)：1 有序列表和無序列表的區(qū)別；2 描述性列表的制作。教學(xué)過程設(shè)計(jì)一、 文本的輸入（10分鐘左右）1 換行與換段的輸入2 空白字符的輸入3 特殊符號(hào)的輸入4 日期與時(shí)間的插入5 水平線的插入二、 文本的編輯（20分鐘左右）1 文本的選擇：鼠標(biāo)拖選，按住shift+光標(biāo)鍵選擇2 文本的刪除，復(fù)制，移動(dòng)，選擇性粘貼3 查找與替換：ctrl+fl 文本對(duì)文本的替換l 帶格式文本的替換l 源代碼的替換l 文本高級(jí)及指定標(biāo)簽的替換4 拼寫檢查：shift+F7三、 文本的屬性（15分鐘左右）1 屬性工具欄：窗口菜單2 設(shè)置文本的格式. 大小. 字體. 顏色（注意樣式的變化）3 設(shè)置文本對(duì)齊方式：注意html代碼中的變化四、 文本列表（30分鐘左右）1 項(xiàng)目列表的創(chuàng)建2 編號(hào)列表的創(chuàng)建3 描述性列表的創(chuàng)建五、 HTML中的文本代碼（15分鐘左右）1 段落和換行代碼段落：<p></p>換行:<br/>2 保留源格式代碼：pre3 水平線代碼：<hr/>4 標(biāo)題代碼：h1、h2、h3、h4、h5、h65 列表代碼：ul ol li dl dt dd作業(yè)/思考題：1 設(shè)置網(wǎng)頁(yè)中文本的字體、顏色時(shí)要注意什么問題？2 如何修改水平線的顏色？教學(xué)后記：本節(jié)課授課前，應(yīng)更多的讓學(xué)生去回憶此前學(xué)習(xí)的word中的文本。從而感覺本知識(shí)的非常容易，最后能比較發(fā)現(xiàn)網(wǎng)頁(yè)文本的特殊性。課程教案（:6）授課內(nèi)容建立簡(jiǎn)單的網(wǎng)頁(yè)制作課 型£理論 R實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法、演示法教學(xué)目的與要求通過站點(diǎn)的創(chuàng)建，以及站點(diǎn)文件的管理，創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)站。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 創(chuàng)建本地站點(diǎn)2 創(chuàng)建首頁(yè)3 在首頁(yè)輸入文本內(nèi)容4 制作文本列表教學(xué)難點(diǎn)：1 有序列表和無序列表的區(qū)別；2 描述性列表的制作。教學(xué)過程設(shè)計(jì)主要步驟一、 創(chuàng)建本地站點(diǎn)1 運(yùn)行軟件2 站點(diǎn)菜單->新建站點(diǎn)3 遠(yuǎn)程服務(wù)器連接選擇為無二、 創(chuàng)建首頁(yè)1 窗口->文件2 右擊當(dāng)前站點(diǎn)->新建文件->命名為Index.html三、 在首頁(yè)輸入文本內(nèi)容1 輸入常規(guī)文本，并在其中換行/換段2 輸入空白字符，設(shè)置首選參數(shù)中的常規(guī)設(shè)置3 插入日期和水平線四、 制作文本列表1 制作無序列表l文本屬性欄->項(xiàng)目列表l敲回車?yán)^續(xù)新的項(xiàng)目2 制作有序列表l文本屬性欄->編號(hào)列表l敲回車?yán)^續(xù)新的項(xiàng)目3 嵌套列表的制作l增加文本縮進(jìn)l修改列表的類型（代碼視圖修改type）4 制作定義性列表l切換至代碼視圖l插入dl標(biāo)簽l在dl標(biāo)簽中插入一個(gè)dt和若干個(gè)dd標(biāo)簽（dt和dd不可嵌套）實(shí)訓(xùn)結(jié)果作業(yè)/思考題：1 設(shè)置網(wǎng)頁(yè)中文本的字體、顏色時(shí)要注意什么問題？2 如何修改水平線的顏色？教學(xué)后記：通過學(xué)習(xí)，并對(duì)比此前學(xué)習(xí)的word中的文本。發(fā)現(xiàn)網(wǎng)頁(yè)文本的特殊性。課程教案（:7）授課內(nèi)容制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法、演示法教學(xué)目的與要求本次課程將講授網(wǎng)頁(yè)制作過程中的圖像的使用，掌握?qǐng)D像及圖像對(duì)象的插入，交互式圖像的使用。掌握?qǐng)D像熱區(qū)的使用。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 圖像占位符. 鼠標(biāo)經(jīng)過圖像；2 圖像熱區(qū)；3 制作網(wǎng)站相冊(cè)；4 圖像的優(yōu)化。教學(xué)難點(diǎn)：1 圖像的類型；2 網(wǎng)站相冊(cè)的制作。教學(xué)過程設(shè)計(jì)一、圖像格式的介紹（5分鐘左右）1 GIF格式2 JPEG格式3 PNG格式4 其他格式二、圖像文件的插入及屬性（20分鐘左右）1 圖像的插入：插入菜單，站點(diǎn)面板，直接拖入到文檔2 圖像的屬性：名稱，源文件，大小，替代，邊距，邊框3 圖像的環(huán)繞效果三、圖像對(duì)象的插入及屬性（20分鐘左右）1 圖像占位符2 鼠標(biāo)經(jīng)過圖像3 導(dǎo)航條四、圖像熱區(qū)的使用（8分鐘左右）1 繪制熱區(qū)：矩形. 橢圓形. 多邊形2 選擇熱區(qū)3 調(diào)整熱區(qū)位置五、Fireworks切圖及導(dǎo)入Fireworks HTML（10分鐘左右）1 用Fireworks制作簡(jiǎn)單的頁(yè)面2 利用切片工具分隔網(wǎng)頁(yè)3 插入菜單->圖像對(duì)象->Fireworks HTML六、制作web相冊(cè)（10分鐘左右）1 準(zhǔn)備制作相冊(cè)的素材圖片2 命令菜單->創(chuàng)建網(wǎng)站相冊(cè)七、利用插件制作flash相冊(cè)（7分鐘左右）1 搜索flash相冊(cè)插件2 下載安裝并利用工具欄制作八、圖像的優(yōu)化及格式的轉(zhuǎn)換（10分鐘左右）1 命令菜單2 右擊圖像作業(yè)/思考題：1 圖像地圖的作用是什么？2 如何插入鼠標(biāo)經(jīng)過圖像？教學(xué)后記：圖像能相對(duì)充分的表現(xiàn)頁(yè)面的內(nèi)容，適當(dāng)?shù)脑诰W(wǎng)頁(yè)中加入圖像可對(duì)頁(yè)面進(jìn)行點(diǎn)綴。在選擇圖像時(shí)應(yīng)盡量尋找品質(zhì)較高，尺寸較大的文件，從而能方便編輯。課程教案（:8）授課內(nèi)容網(wǎng)頁(yè)圖像的使用課 型£理論 R實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法、演示法教學(xué)目的與要求1 練習(xí)站點(diǎn)的創(chuàng)建，以及站點(diǎn)文件的管理；2 練習(xí)網(wǎng)頁(yè)上文本和圖像的使用；3 掌握?qǐng)D文混排的網(wǎng)頁(yè)制作技巧。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 站點(diǎn)的創(chuàng)建；2 文本的輸入；3 網(wǎng)頁(yè)圖像的使用。教學(xué)難點(diǎn)：1 圖文混排的網(wǎng)頁(yè)；2 修改水平線的顏色。教學(xué)過程設(shè)計(jì)實(shí)訓(xùn)內(nèi)容利用提供的素材文件，制作一個(gè)“暢想未來”的網(wǎng)站，要求如下：1. 創(chuàng)建本地站點(diǎn)文件夾，將網(wǎng)頁(yè)用到的素材按類別復(fù)制到站點(diǎn)文件夾中，啟動(dòng)Dreamweaver，定義站點(diǎn)。2. 新建index.html文件，設(shè)置背景顏色為“#B8DCF4”，網(wǎng)頁(yè)標(biāo)題為“暢想未來”。3. 插入基本的頁(yè)面元素，包括文本、圖像、水平線等。4. 對(duì)圖像進(jìn)行適當(dāng)?shù)恼{(diào)整，包括大小、在頁(yè)面中的對(duì)齊方式、與周邊對(duì)象的距離及環(huán)繞方式。實(shí)訓(xùn)步驟一、新建站點(diǎn)1 站點(diǎn)菜單>新建站點(diǎn)>高級(jí)>站點(diǎn)名稱：暢想未來>站點(diǎn)根文件夾：E:/future2 選中站點(diǎn)>右鍵>新建文件夾：images（圖像文件夾）3 選中站點(diǎn)>右鍵>新建文件：index.html（網(wǎng)站首頁(yè)）4 把提供的圖片素材復(fù)制到images文件夾中二、設(shè)置頁(yè)面屬性4 打開index.html空白文檔5 “修改”>“頁(yè)面屬性”>外觀：字體為宋體、大小為12像素，文本顏色為“#034881”，背景顏色為“#B8DCF4”，上邊距為0像素，左、右邊距的值均為30像素。三、圖像對(duì)象的插入及屬性1 “插入”>圖像>images>1.jpg2 屬性面板>居中對(duì)齊注：編輯>首選參數(shù)>輔助功能>把圖像前面的勾去掉4、 在頁(yè)面中插入和編輯文本1 編輯>首選參數(shù)>常用>允許多個(gè)連續(xù)的空格勾選上，即可輸入多個(gè)空格2 創(chuàng)建項(xiàng)目列表3 插入版權(quán)符號(hào)：插入菜單>HTML->特殊字符>版權(quán)5、 設(shè)置圖像環(huán)繞效果選中圖片>屬性面板>對(duì)齊>左對(duì)齊，同時(shí)設(shè)置頁(yè)面的上下、左右邊距實(shí)訓(xùn)結(jié)果作業(yè)/思考題：1 圖像地圖的作用是什么？2 如何插入鼠標(biāo)經(jīng)過圖像？教學(xué)后記：圖像能相對(duì)充分的表現(xiàn)頁(yè)面的內(nèi)容，適當(dāng)?shù)脑诰W(wǎng)頁(yè)中加入圖像可對(duì)頁(yè)面進(jìn)行點(diǎn)綴。在選擇圖像時(shí)應(yīng)盡量尋找品質(zhì)較高，尺寸較大的文件，從而能方便編輯。課程教案（:9）授課內(nèi)容超鏈接課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法、演示法教學(xué)目的與要求本次課程將講授網(wǎng)頁(yè)制作過程中的超鏈接的使用，掌握超鏈接的創(chuàng)建方法，創(chuàng)建各種不同形式的鏈接。理解鏈接目標(biāo)的概念。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1. 鏈接創(chuàng)建的簡(jiǎn)單方法2. 各種不同超鏈接的制作3. 鏈接的目標(biāo)設(shè)置教學(xué)難點(diǎn)：1 理解鏈接的原理2 框架頁(yè)面中的鏈接教學(xué)過程設(shè)計(jì)1、 理解url（25分鐘左右）文件路徑就是文件在電腦中的位置，表示文件路徑的方式有兩種，相對(duì)路徑和絕對(duì)路徑。在網(wǎng)頁(yè)設(shè)計(jì)中通過路徑可以表示鏈接，插入圖像、Flash、CSS文件的位置1 絕對(duì)路徑URL：（Uniform Resoure Locator：統(tǒng)一資源定位器）是WWW頁(yè)的地址，它從左到右由下述部分組成：（1） Internet資源類型（scheme）：指出WWW客戶程序用來操作的工具。如“http：/”表示W(wǎng)WW服務(wù)器，“ftp：/”表示FTP服務(wù)器，“gopher：/”表示Gopher服務(wù)器，而“new：”表示Newgroup新聞組。（2） 服務(wù)器地址（host）：指出WWW頁(yè)所在的服務(wù)器域名。（3） 端口（port）：有時(shí)（并非總是這樣），對(duì)某些資源的訪問來說，需給出相應(yīng)的服務(wù)器提供端口號(hào)。（4） 路徑（path）：指明服務(wù)器上某資源的位置（其格式與DOS系統(tǒng)中的格式一樣，通常有目錄/子目錄/文件名這樣結(jié)構(gòu)組成）。與端口一樣，路徑并非總是需要的。 URL地址格式排列為：scheme：/host：port/path，例如http：/www.sohu.com/domain/HXWZ就是一個(gè)典型的URL地址。2 相對(duì)路徑（1） 如何表示同級(jí)目錄的文件（2） 如何表示上級(jí)目錄的文件（3） 如何表示下級(jí)目錄的文件2、 超鏈接的制作方法（15分鐘左右）1 通過插入菜單2 利用插入欄3 屬性面板：直接輸入路徑，指向文件，文件夾瀏覽4 超鏈接的相關(guān)操作步驟：修改菜單：創(chuàng)建. 移出. 打開鏈接頁(yè)面. 設(shè)置鏈接目標(biāo)3、 超鏈接的類型（25分鐘左右）1 頁(yè)面間的鏈接2 文件鏈接3 空鏈接4 錨點(diǎn)鏈接5 電子郵件鏈接4、 特殊形式的鏈接（10分鐘左右）1 腳本鏈接：讓對(duì)象獲取事件2 熱點(diǎn)鏈接：針對(duì)圖像熱區(qū)5、 設(shè)置鏈接的目標(biāo)（5分鐘左右）1 _self：自身窗口打開2 _blank：新窗口打開目標(biāo)3 _parent. _top：在框架頁(yè)面中使用4 修改鏈接的目標(biāo)目標(biāo)：文件頭標(biāo)簽->基礎(chǔ)6、 框架頁(yè)面中的鏈接（10分鐘左右）1 新建簡(jiǎn)單的框架頁(yè)面并保存2 設(shè)置框架的鏈接目標(biāo)：目標(biāo)必須是框架的名稱作業(yè)/思考題：1 超鏈接的路徑有幾種，都是什么？2 什么是超鏈接和指向頁(yè)面段落的超鏈接？3 E-mail超鏈接與一般的超鏈接有什么不同？教學(xué)后記：可以用班級(jí)的結(jié)構(gòu)類比喻超鏈接，通過介紹http：/www.hao123.com來激發(fā)學(xué)生學(xué)習(xí)的動(dòng)力，通過http：/www.baidu.com介紹超鏈接的功能。課程教案（:10）授課內(nèi)容超鏈接的使用課 型£理論 R實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法、演示法教學(xué)目的與要求通過實(shí)訓(xùn)，掌握網(wǎng)頁(yè)制作過程中的超鏈接的使用，掌握超鏈接的創(chuàng)建方法，創(chuàng)建各種不同形式的鏈接。理解鏈接目標(biāo)的概念。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1. 鏈接創(chuàng)建的簡(jiǎn)單方法2. 各種不同超鏈接的制作3. 鏈接的目標(biāo)設(shè)置教學(xué)難點(diǎn)：3 理解鏈接的原理4 框架頁(yè)面中的鏈接教學(xué)過程設(shè)計(jì)實(shí)訓(xùn)內(nèi)容：1 用三種不同的方法創(chuàng)建鏈接；2 創(chuàng)建至少6種不同形式的超鏈接；3 修改鏈接的目標(biāo)；4 修改鏈接的樣式。實(shí)訓(xùn)步驟：1 用三種不同的方法創(chuàng)建鏈接（1） 插入菜單或者插入欄找到超級(jí)鏈接命令并點(diǎn)擊；（2） 修改菜單或通過ctrl+l來創(chuàng)建鏈接；（3） 屬性欄：直接輸入鏈接地址，或通過指向文件和瀏覽文件創(chuàng)建。2 創(chuàng)建至少6種不同形式的超鏈接（1） 在鏈接框中輸入一個(gè).html擴(kuò)展名的文件，創(chuàng)建頁(yè)面鏈接；（2） 在鏈接框中輸入一個(gè).exe擴(kuò)展名的文件，創(chuàng)建文件鏈接；（3） 在鏈接框中輸入一個(gè)#，創(chuàng)建空鏈接；（4） 在鏈接框中輸入一個(gè)#錨點(diǎn)名，創(chuàng)建錨點(diǎn)鏈接（應(yīng)先插入命名錨記）；（5） e在鏈接框中輸入mailto：電子郵件，創(chuàng)建電子郵件鏈接；（6） 在鏈接框中輸入javascript：close()，創(chuàng)建腳本鏈接。3 修改鏈接的目標(biāo)（1） 將鏈接目標(biāo)修改為_blank；（2） 通過代碼視圖在/head之前加入base標(biāo)簽修改默認(rèn)目標(biāo)值。4 修改鏈接的樣式（1） 修改菜單下找到頁(yè)面屬性，更改鏈接的設(shè)置；（2） 記住鏈接的四個(gè)不同狀態(tài)。實(shí)訓(xùn)結(jié)果：作業(yè)/思考題：1 超鏈接的路徑有幾種，都是什么？2 什么是超鏈接和指向頁(yè)面段落的超鏈接？3 E-mail超鏈接與一般的超鏈接有什么不同？教學(xué)后記：可以用班級(jí)的結(jié)構(gòu)類比喻超鏈接，通過介紹http：/www.hao123.com來激發(fā)學(xué)生學(xué)習(xí)的動(dòng)力，通過http：/www.baidu.com介紹超鏈接的功能。讓錯(cuò)綜復(fù)雜的網(wǎng)絡(luò)獨(dú)立頁(yè)面形成一個(gè)系統(tǒng)的鏈接關(guān)系。課程教案（:11）授課內(nèi)容多媒體的使用課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法、演示法教學(xué)目的與要求本次課程將學(xué)習(xí)網(wǎng)頁(yè)中多媒體的使用，掌握各類媒體文件的插入及屬性設(shè)置。制作帶多媒體文件的網(wǎng)頁(yè)。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：各類多媒體文件的格式教學(xué)難點(diǎn)：各類多媒體文件的參數(shù)教學(xué)過程設(shè)計(jì)一、 插入flash文件（20分鐘左右）1 插入菜單->媒體->flash2 插入欄->常用->媒體->flash3 設(shè)置flash屬性：參數(shù)wmode 值transparent 可使flash背景透明(非所有)二、 插入flash文本（5分鐘左右）1 插入菜單->媒體->flash文本2 插入欄->常用->媒體->flash文本三、 插入flash按鈕（5分鐘左右）1 插入菜單->媒體->flash按鈕2 插入欄->常用->媒體->flash按鈕四、 插入shockwave（10分鐘左右）1 安裝shockwave插件，準(zhǔn)備shockwave文件：文件擴(kuò)展名dir2 插入菜單->媒體->shockwave3 插入欄->常用->媒體->shockwave五、 插入applet（java程序）（5分鐘左右）1 安裝java虛擬機(jī)(jvm)，準(zhǔn)備applet文件：文件擴(kuò)展名class2 插入菜單->媒體->applet3 插入欄->常用->媒體->applet4 安裝anfy軟件，制作特效并插入到頁(yè)面六、 插入param參數(shù)（5分鐘左右）1 插入realplay格式的文件，設(shè)置其參數(shù)2 插入mediaplay格式的文件，設(shè)置其參數(shù)3 常見參數(shù)：autostart，url，file七、 插入activeX文件（5分鐘左右）1 插入菜單->媒體->activeX2 插入欄->常用->媒體->activeX八、 插入插件（5分鐘左右）1 插入菜單->媒體->插件2 插入欄->常用->媒體->插件九、 背景音樂的設(shè)置（10分鐘左右）1 在代碼中插入bgsound標(biāo)簽：注意音樂文件的格式2 利用插件制作背景音樂十、 滾動(dòng)字幕（15分鐘左右）1 在代碼視圖中使用marquee設(shè)置滾動(dòng)對(duì)象2 制作無間隙滾動(dòng)效果：利用js代碼3十一、 利用其他輔助軟件制作網(wǎng)頁(yè)特效（5分鐘左右）1 有聲有色2 網(wǎng)頁(yè)制作大寶庫(kù)作業(yè)/思考題：1 如何設(shè)置flash動(dòng)畫透明背景？2 插入音頻和視頻的標(biāo)記是什么？常用屬性是什么？教學(xué)后記：通過56.tudou這樣的網(wǎng)站分析多媒體在未來網(wǎng)絡(luò)發(fā)展中的前景，本節(jié)課是最為絢的節(jié)次，能充分激發(fā)學(xué)生學(xué)習(xí)網(wǎng)頁(yè)的熱情。準(zhǔn)備實(shí)例一定要充分。但由于多媒體基本都需要插件支持，在插件安裝上應(yīng)放慢速度。課程教案（:12）授課內(nèi)容表格的使用課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法、演示法教學(xué)目的與要求本次課程將講授網(wǎng)頁(yè)制作過程中的表格的使用，掌握表格在網(wǎng)頁(yè)排版中的重要作用，理解網(wǎng)頁(yè)布局的格式。同時(shí)掌握表格在顯示數(shù)據(jù)式的作用。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 表格的創(chuàng)建2 網(wǎng)頁(yè)布局的模式3 表格屬性4 頁(yè)面布局的概念教學(xué)難點(diǎn)：1 表格的嵌套2 表格的填充與間距教學(xué)過程設(shè)計(jì)1、 插入表格（10分鐘左右）1 插入菜單->表格2 插入欄->常用/布局->表格3 制作嵌套表格2、 表格的基本操作（30分鐘左右）1 選擇表格元素整個(gè)表格的選擇：標(biāo)簽，修改菜單，點(diǎn)邊框，ctrl+a+a，右鍵行/列，單元格的選擇：標(biāo)簽，邊框，拖拉2 處理表格的行/列插入行/列：修改菜單；選中表格->插入菜單->表格刪除行/列：修改菜單；右鍵選擇表格3 處理單元格單元格的合并與拆分4 其他操作調(diào)整行高/列寬表格的復(fù)制/粘貼3、 表格及對(duì)象的屬性（20分鐘左右）1 表格：名稱；行/列；寬/高；填充/間距，背景，邊框，對(duì)齊2 單元格/行：對(duì)齊；寬/高；背景；邊框；標(biāo)題單元格；不換行4、 特殊表格的制作（10分鐘左右）1 1個(gè)像素邊框的表格2 立體表格3 變色單元格5、 實(shí)例制作：（20分鐘左右）實(shí)例一：制作各類網(wǎng)頁(yè)導(dǎo)航實(shí)例二：設(shè)計(jì)各類網(wǎng)頁(yè)中的內(nèi)部部分作業(yè)/思考題：1 什么情況下不顯示表格邊框？如何設(shè)置？2 如何繪制細(xì)線表格？3 畫一個(gè)表格，在表格中輸入內(nèi)容，進(jìn)行如下標(biāo)注：表格、單元格、單元格邊距、單元格間距、表格邊框。教學(xué)后記：把表格比喻成是一個(gè)盒子，用盒子裝東西的概念來引發(fā)出網(wǎng)頁(yè)中的表格，并系統(tǒng)的描述網(wǎng)頁(yè)布局結(jié)構(gòu)。課程教案（:13）授課內(nèi)容表格實(shí)例課 型£理論 R實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段實(shí)例教學(xué)教學(xué)目的與要求本次課程將通過前面學(xué)習(xí)的知識(shí)結(jié)合的表格的使用，制作完整的網(wǎng)站首頁(yè)。讓學(xué)生鞏固網(wǎng)頁(yè)布局的概念。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 站點(diǎn)的創(chuàng)建2 文本、圖像、超鏈接的使用3 表格的布局方式教學(xué)難點(diǎn)：網(wǎng)頁(yè)制作綜合能力教學(xué)過程設(shè)計(jì)利用此前學(xué)習(xí)的知識(shí)制作如下圖所示的頁(yè)面：作業(yè)/思考題：1 什么情況下不顯示表格邊框？如何設(shè)置？2 如何設(shè)置文本行間距、首行縮進(jìn)？3 如何給表格添加下邊框？教學(xué)后記：通過更多的頁(yè)面制作了解到網(wǎng)頁(yè)中表格的排版功能。課程教案（:14）授課內(nèi)容利用表格制作網(wǎng)頁(yè)課 型£理論 R實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法、演示法教學(xué)目的與要求通過本次實(shí)訓(xùn)，需要掌握網(wǎng)頁(yè)制作過程中的表格的使用，掌握表格在網(wǎng)頁(yè)排版中的重要作用，理解網(wǎng)頁(yè)布局的格式。同時(shí)掌握表格在顯示數(shù)據(jù)式的作用。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 表格的創(chuàng)建2 網(wǎng)頁(yè)布局的模式3 表格屬性4 頁(yè)面布局的概念教學(xué)難點(diǎn)：1 表格的嵌套2 表格的填充與間距教學(xué)過程設(shè)計(jì)實(shí)訓(xùn)內(nèi)容：利用提供的素材文件，制作一個(gè)“心隨衣動(dòng)”的網(wǎng)站，要求如下：1 創(chuàng)建站點(diǎn)2 創(chuàng)建表格3 在表格中插入文本和圖像4 設(shè)置表格相關(guān)屬性5 完成頁(yè)面制作實(shí)訓(xùn)步驟：1. 創(chuàng)建本地站點(diǎn)a) 運(yùn)行軟件b) 站點(diǎn)菜單->新建站點(diǎn)c) 遠(yuǎn)程服務(wù)器連接選擇為無2. 創(chuàng)建表格a) 繪制網(wǎng)站結(jié)構(gòu)圖b) 插入菜單->表格，按結(jié)構(gòu)圖插入相應(yīng)的表格3. 在表格中插入文本和圖像a) 在單元格插入相應(yīng)的文本或圖像4. 設(shè)置表格的相關(guān)屬性a) 更改表格行高或列寬b) 更改表格的背景顏色或背景圖片c) 更改表格的填充. 間距. 邊框. 邊框顏色d) 更改單元格的背景顏色或背景圖片5. 完成頁(yè)面制作適當(dāng)調(diào)整表格相關(guān)屬性實(shí)訓(xùn)結(jié)果：作業(yè)/思考題：1 什么情況下不顯示表格邊框？如何設(shè)置？2 如何繪制細(xì)線表格？教學(xué)后記：通過本次實(shí)訓(xùn)，讓學(xué)生熟練掌握表格的使用，并能通過表格的布局作用。設(shè)計(jì)并制作相對(duì)完整的網(wǎng)頁(yè)。課程教案（:15）授課內(nèi)容頁(yè)面屬性課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法教學(xué)目的與要求本次課程學(xué)習(xí)網(wǎng)頁(yè)屬性的設(shè)置，對(duì)網(wǎng)頁(yè)進(jìn)行簡(jiǎn)單的后期美化操作。掌握各類特殊元素在網(wǎng)頁(yè)中顯示設(shè)置。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 網(wǎng)頁(yè)美化2 不可見元素教學(xué)難點(diǎn)：文件頭標(biāo)簽教學(xué)過程設(shè)計(jì)1、 設(shè)置頁(yè)面屬性（20分鐘左右）修改->頁(yè)面屬性：1 外觀：字體，字號(hào)，背景，邊距2 鏈接：四個(gè)鏈接狀態(tài)3 標(biāo)題：設(shè)置標(biāo)題文件4 標(biāo)題/編碼：頁(yè)面識(shí)別2、 查看文件頭標(biāo)簽（10分鐘左右）查看菜單->文件頭標(biāo)簽3、 插入文件頭標(biāo)簽（40分鐘左右）1 插入->html->文件頭標(biāo)簽2 meta標(biāo)簽的常見功能：搜索引擎，頁(yè)面自身描述(1) meta name="Keywords" content=""向搜索引擎說明你的網(wǎng)頁(yè)的關(guān)鍵詞； (2) meta name="Description" content=""告訴搜索引擎你的站點(diǎn)的主要內(nèi)容； (3) meta name="Author" content="你的姓名"告訴搜索引擎你的站點(diǎn)的制作的作者；(4) http-equiv屬性 (5) meta http-equiv="Content-Type" content="text/html"；charset=gb_2312-80"用以說明主頁(yè)制作所使用的文字以及語言； (6) meta http-equiv="Refresh" content="n；url=http：/yourlink"定時(shí)讓網(wǎng)頁(yè)在指定的時(shí)間n內(nèi)，跳轉(zhuǎn)到頁(yè)面http；/yourlink。3 基礎(chǔ)標(biāo)簽的使用4 鏈接link：鏈接外部文件到頁(yè)面4、 可視化助理（10分鐘左右）1 在設(shè)計(jì)視圖下。決定頁(yè)面對(duì)象是否顯示2 查看菜單->可視化助理->顯示/隱藏所有3 工具欄->可視化助理4 編輯->首選參數(shù)->不可見元素5、 跟蹤圖像（10分鐘左右）1 將跟蹤圖像放在文檔窗口中l(wèi) 查看->跟蹤圖像->載入l 修改->頁(yè)面屬性2 顯示或隱藏跟蹤圖像l 查看->跟蹤圖像->顯示3 更改跟蹤圖像的位置l 查看->跟蹤圖像->調(diào)整位置4 重設(shè)跟蹤圖像的位置l 查看->跟蹤圖像->重設(shè)位置5 將跟蹤圖像與所選元素對(duì)齊作業(yè)/思考題：1 關(guān)鍵詞輸入是不是越多越好？2 關(guān)鍵詞之間用什么符號(hào)分隔？教學(xué)后記：頁(yè)面后期的處理。規(guī)范網(wǎng)頁(yè)顯示。課程教案（:16）授課內(nèi)容層疊樣式表 CSS（一）課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法教學(xué)目的與要求本次課程將學(xué)習(xí)層疊樣式表 CSS的功能及使用。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 CSS的語法2 CSS和網(wǎng)頁(yè)的關(guān)系3 CSS的創(chuàng)建教學(xué)難點(diǎn)CSS的語法格式教學(xué)過程設(shè)計(jì)1、 CSS功能和分類（30分鐘左右）層疊樣式表（CSS）是一系列格式規(guī)則，它們控制網(wǎng)頁(yè)內(nèi)容的外觀。使用 CSS樣式可以非常靈活地控制網(wǎng)頁(yè)外觀，從精確的布局定位到特定的字體和樣式，可以讓站點(diǎn)整體風(fēng)格保持一致。CSS 樣式非常靈活，因?yàn)闃邮讲⒉痪窒抻谖谋緦?duì)象。對(duì)于文本、圖像、表格、層等都可以定義定位樣式和格式化樣式。外鏈樣式表：使用單獨(dú)的樣式表文件.CSS。通過在樣式表設(shè)置對(duì)話框中指定，它的設(shè)定將會(huì)影響到整個(gè)網(wǎng)頁(yè)。內(nèi)嵌樣式表：該類樣式表是嵌在頁(yè)面頭部代碼<styles>標(biāo)記之間的，可以通過Dreamweaver 中的樣式表對(duì)話框設(shè)置。內(nèi)聯(lián)樣式表：即行間樣式表，樣式代碼直接寫在某一HTML標(biāo)簽后部，用styles屬性說明。它的作用僅限于它修飾的標(biāo)簽，直接影響網(wǎng)頁(yè)上單個(gè)對(duì)象。2、 打開“CSS樣式編輯器”面板（20分鐘左右）1 窗口菜單>CSS 樣式(Shift+F11)；2 使用“CSS樣式”面板可以創(chuàng)建、查看、應(yīng)用或編輯樣式屬性；3 “CSS樣式”面板具有兩種視圖或模式；4 使用“應(yīng)用樣式”視圖可應(yīng)用自定義或類 CSS 樣式；5 使用“編輯樣式”視圖可以對(duì)已應(yīng)用于文檔的樣式進(jìn)行更改。3、 CSS語法規(guī)則（20分鐘左右）1 類：可用于所有適合的標(biāo)簽；2 標(biāo)簽：重新設(shè)置指定標(biāo)簽的屬性；3 高級(jí)：以ID類命名的對(duì)象或偽類對(duì)象。4、 使用CSS樣式編輯器（20分鐘左右）1 創(chuàng)建新樣式單擊面板右下角區(qū)域中“新建樣式”按鈕（+）；右擊面板選擇“新建 CSS 樣式”；文本>CSS 樣式>新建 CSS 樣式”；隨即出現(xiàn)“新建 CSS 樣式”對(duì)話框，有3種類型的CSS 樣式；自定義CSS樣式(也稱為類樣式)可以將樣式屬性設(shè)置為任何文本范圍或文本塊；重定義特定標(biāo)簽可以改變特定標(biāo)簽（如hl）的默認(rèn)格式；CSS選擇器可以重定義具體某個(gè)標(biāo)簽組合的格式。2 自定義css樣式對(duì)話框中的樣式類型：類型屬性：定義CSS樣式的基本字體和類型設(shè)置。背景屬性：定義網(wǎng)頁(yè)中任何元素的背景。區(qū)塊屬性：精確定義標(biāo)簽和屬性的間距和對(duì)齊方式等。邊框?qū)傩裕憾x元素周圍的邊框的設(shè)置（如寬度、顏色和樣式）。作業(yè)/思考題：1 CSS樣式表與HTML語言的語法規(guī)則的區(qū)別？2 CSS樣式包含哪幾類？如何應(yīng)用于網(wǎng)頁(yè)？教學(xué)后記：介紹目前網(wǎng)頁(yè)制作的新技術(shù)，推廣使用web2.0技術(shù)，重點(diǎn)介紹DIV+CSS排版知識(shí)。建立完成的div概念，結(jié)合文本列表使用。課程教案（:17）授課內(nèi)容層疊樣式表 CSS（二）課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法教學(xué)目的與要求本次課程將學(xué)習(xí)層疊樣式表 CSS的功能及使用。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 CSS的語法2 CSS和網(wǎng)頁(yè)的關(guān)系3 CSS的創(chuàng)建教學(xué)難點(diǎn)CSS的語法格式教學(xué)過程設(shè)計(jì)續(xù)前節(jié)2. 自定義css樣式對(duì)話框中的樣式類型：（30分鐘左右）盒子屬性：定義特定元素的大小及其周圍元素的間距等屬性。 列表屬性：為列表標(biāo)簽定義列表設(shè)置（如項(xiàng)目符號(hào)大小和類型）。 定位屬性：定義層在頁(yè)面中的排布相關(guān)屬性。 擴(kuò)展屬性：包括過濾鏡、分頁(yè)和鼠標(biāo)指針選項(xiàng)。五、應(yīng)用樣式表（10分鐘左右）自定義樣式表是唯一可以應(yīng)用于文檔中的任何文本（與控制文本的標(biāo)簽無關(guān)）的CSS 樣式類型。六、編輯現(xiàn)有樣式表（10分鐘左右）1 修改CSS樣式雙擊所選樣式；右擊，然生選擇“編輯”；單擊“CSS 樣式”面板底部的“編輯樣式表”按鈕；文本菜單>CSS樣式>編輯樣式表（Ctrl+Shift+E）”；編輯樣式視圖下“編輯樣式”按鈕，彈出對(duì)話框操作。2 刪除css 樣式3 復(fù)制css 樣式七、將自定義樣式從選定內(nèi)容中刪除（10分鐘左右）選擇要從中刪除樣式的對(duì)象或文本，在“CSS樣式”面板中，選擇“應(yīng)用樣式”視圖，然后選擇“無CSS樣式”。在文本屬性面板中，利用上下文菜單中選擇“CSS樣式”，然后在“CSS 樣式”彈出式菜單中選擇“無CSS樣式”。八、從文檔中導(dǎo)出樣式創(chuàng)建 CSS 樣式表文件（10分鐘左右）可以從文檔中導(dǎo)出樣式以創(chuàng)建新的CSS樣式表。然后，可鏈接到其他文檔以應(yīng)用這些樣式。 文件菜單>導(dǎo)出>導(dǎo)出CSS樣式 文本菜單>導(dǎo)出樣式表”九、附加樣式表（鏈接外部樣式表文件）（10分鐘左右）在“CSS 樣式”面板中，單擊“附加樣式表”按鈕，出現(xiàn)“鏈接外部樣式表”。在“添加為”中，選擇其中的一個(gè)選項(xiàng)： 選擇“鏈接”，創(chuàng)建當(dāng)前文檔和外部樣式表之間的鏈接，該選項(xiàng)在HTML代碼 中創(chuàng)建一個(gè)Link href 標(biāo)簽，并引用已發(fā)布的樣式表所在的URL。 選擇“導(dǎo)入”，引用外部樣式表。該選項(xiàng)在HTML代碼中創(chuàng)建一個(gè)import標(biāo)簽，并引用已發(fā)布的樣式表所在的URL。十、將CSS樣式轉(zhuǎn)換為HTML標(biāo)簽（10分鐘左右）如果使用CSS樣式指定了文本格式（如字體、大小、顏色和修飾），后來決定想使該格式可在3.0瀏覽器中查看，這時(shí)可以使用“文件菜單> 轉(zhuǎn)換>兼容3.0瀏覽器”命令將盡可能多的樣式信息轉(zhuǎn)換為HTML標(biāo)簽.備注：并非所有CSS樣式都可以轉(zhuǎn)換為HTML，因?yàn)镠TML標(biāo)簽并不包括或支持 CSS中可能有的所有屬性。作業(yè)/思考題：1 CSS樣式表與HTML語言的語法規(guī)則的區(qū)別？2 CSS樣式包含哪幾類？如何應(yīng)用于網(wǎng)頁(yè)？3 什么是附加樣式表，有什么用？教學(xué)后記：介紹目前網(wǎng)頁(yè)制作的新技術(shù)，推廣使用web2.0技術(shù)，重點(diǎn)介紹DIV+CSS排版知識(shí)。建立完成的div概念，結(jié)合文本列表使用。課程教案（:18）授課內(nèi)容CSS樣式的使用課 型£理論 R實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段實(shí)例講解法教學(xué)目的與要求通過本次實(shí)訓(xùn)，系統(tǒng)的掌握CSS的應(yīng)用方法及應(yīng)用規(guī)則，并能利用div結(jié)合css制作網(wǎng)頁(yè)。教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 CSS的語法2 CSS和網(wǎng)頁(yè)的關(guān)系3 CSS的創(chuàng)建教學(xué)難點(diǎn)CSS的語法格式教學(xué)過程設(shè)計(jì)實(shí)訓(xùn)內(nèi)容1 Css和html結(jié)合的三種方法2 Css的語法規(guī)則3 Css各類型應(yīng)用實(shí)例4 CSS+div網(wǎng)頁(yè)制作示例主要步驟1 Css和html結(jié)合的三種方法(1) 窗口菜單打開css面板(2) 新建按鈕創(chuàng)建僅用于該文檔的CSS樣式(3) 導(dǎo)出CSS樣式，并鏈接至其他頁(yè)面(4) 代碼視圖中直接在標(biāo)簽中加入CSS樣式2 CSS的語法規(guī)則(1) 創(chuàng)建一個(gè)class類的樣式，并分別作用于表格，表單，層和段落(2) 創(chuàng)建一個(gè)id類的樣式，并分別作用于表格，表單，層(3) 創(chuàng)建一個(gè)標(biāo)簽樣式，作用于body、input對(duì)象(4) 創(chuàng)建繼承式的鏈接樣式l 在表格中創(chuàng)建鏈接l 給表格命名l 利用#表格名 a：link更改指定表格中的樣式3 Css各類型應(yīng)用實(shí)例(1) 字體類屬性(2) 背景類屬性：設(shè)置顏色、背景、背景固定、背景重復(fù)和背景位置(3) 方框、邊框、區(qū)塊屬性的設(shè)置(4) 定位屬性設(shè)置(5) 濾鏡效果4 CSS+DIV網(wǎng)頁(yè)制作示例(1) 通過上述方法和規(guī)則對(duì)html中的div標(biāo)簽進(jìn)行屬性設(shè)置(2) 首先在html代碼中輸入div標(biāo)簽(3) 利用css樣式分別對(duì)插入的div進(jìn)行設(shè)置(4) CSS+DIV導(dǎo)航實(shí)例實(shí)訓(xùn)結(jié)果作業(yè)/思考題：1 CSS樣式表與HTML語言的語法規(guī)則的區(qū)別？2 CSS樣式包含哪幾類？如何應(yīng)用于網(wǎng)頁(yè)？3 什么是附加樣式表，有什么用？教學(xué)后記：介紹目前網(wǎng)頁(yè)制作的新技術(shù)，推廣使用web2.0技術(shù)，重點(diǎn)介紹DIV+CSS排版知識(shí)。建立完成的div概念，結(jié)合文本列表使用。課程教案（:19）授課內(nèi)容DIV+CSS布局網(wǎng)頁(yè)課 型R理論 £實(shí)踐授課學(xué)時(shí)2教學(xué)方法與手段講授法教學(xué)目的與要求本次課程將學(xué)習(xí)DIV+CSS布局網(wǎng)頁(yè)教學(xué)重點(diǎn)與難點(diǎn)教學(xué)重點(diǎn)：1 CSS的常用命名2 DIV+CSS布局網(wǎng)頁(yè)的框架結(jié)構(gòu)3 DIV+CSS布局網(wǎng)頁(yè)的技巧教學(xué)難點(diǎn)CSS的語法格式