【正文】 教案首頁課程名稱網(wǎng)頁設(shè)計與制作課程類型使用教材教材名稱：網(wǎng)頁設(shè)計與制作實用教程 主編：劉艷麗出版社：高等教育出版社 日期：2011年5月學(xué)時分配共64學(xué)時，其中理論36學(xué)時，實踐28學(xué)時。課程教學(xué)目的與要求該課程是三年制高職高專電子商務(wù)專業(yè)的職能課程，目標(biāo)是讓學(xué)生掌握網(wǎng)頁設(shè)計的基本概念，學(xué)會使用常用的網(wǎng)頁設(shè)計工具和相關(guān)網(wǎng)頁美工軟件，能夠設(shè)計制作常見的靜態(tài)網(wǎng)頁。它要以計算機基礎(chǔ)、計算機網(wǎng)絡(luò)技術(shù)課程的學(xué)習(xí)為基礎(chǔ)，也是進一步學(xué)習(xí)網(wǎng)絡(luò)編輯、網(wǎng)站建設(shè)與管理課程的基礎(chǔ)。主要參考書目趙喜清，崔海濤《網(wǎng)頁設(shè)計與制作》哈爾濱工業(yè)大學(xué)出版社，孫振業(yè)《網(wǎng)頁設(shè)計與制作》高等教育出版社，備注課程教案（№:1）授課內(nèi)容網(wǎng)頁制作基礎(chǔ)知識課 型R理論 163。實踐授課學(xué)時2教學(xué)方法與手段講授法教學(xué)目的與要求本次課程將講授網(wǎng)頁制作的基本知識，使學(xué)生了解到什么是網(wǎng)頁，網(wǎng)頁制作涉及到哪些工具、網(wǎng)頁與網(wǎng)站有什么區(qū)別，網(wǎng)頁與普通的文檔有什么區(qū)別等。通過講授也將使學(xué)生了解到網(wǎng)頁的組成，網(wǎng)頁語言的種類及各自特點；動態(tài)網(wǎng)頁與靜態(tài)網(wǎng)頁的定義；Internet信息發(fā)布的原理等等內(nèi)容。教學(xué)重點與難點教學(xué)重點：1． Internet信息訪問原理。2． 什么是網(wǎng)頁？（1） 網(wǎng)頁內(nèi)容組成；（2） 網(wǎng)頁編寫語言種類及特點。3． Dreamweaver8功能簡介。教學(xué)難點：　　Internet信息訪問原理；網(wǎng)頁編寫語言種類及特點。教學(xué)過程設(shè)計一、 基礎(chǔ)知識1． 網(wǎng)頁簡介（15分鐘左右）網(wǎng)頁：是組成WWW（World Wide Web：萬維網(wǎng)）的基本元素，也被稱為頁面或Web頁。不同的網(wǎng)頁通過超鏈接聯(lián)系在一起，構(gòu)成了WWW縱橫交織結(jié)構(gòu)。網(wǎng)站：就是一個相互鏈接的網(wǎng)頁的集合，它們可以共享。大的網(wǎng)站頁面數(shù)量多達幾十萬，甚至上百萬頁，小的個人網(wǎng)站也可以只包含數(shù)個頁面。主頁：是網(wǎng)站中的一個特殊網(wǎng)頁，它是在WWW上進入網(wǎng)站的第一個網(wǎng)頁，其中包含指向其他網(wǎng)頁的超鏈接，通常主頁的名稱是固定的。2． Internet簡介（5分鐘左右）3． 了解常用的網(wǎng)頁制作工具（10分鐘左右） 如：Dreamweaver和FrontPage4． 了解美化網(wǎng)頁的主要工具（10分鐘左右）（1）圖像處理軟件：Photoshop、Fireworks、CorelDRAW等（2）動畫制作工具：Flash5． 了解網(wǎng)頁中的腳本語言（10分鐘左右）如：VBScript、JavaScript6． 了解服務(wù)器端主要技術(shù)（10分鐘左右）服務(wù)器端腳本語言：ASP、JSP、PHP、CGI等。它們的形式與HTML有些類似，但功能更加強大，能夠?qū)崿F(xiàn)許多功能。二、了解建立網(wǎng)站的基本流程（10分鐘左右）1． 確定網(wǎng)站主題2． 搜集資料3． 規(guī)劃網(wǎng)站4． 選擇合適的制作工具5． 制作網(wǎng)頁6． 上傳測試7． 推廣宣傳8． 維護更新三、Dreamweaver CS3基礎(chǔ)（20分鐘左右）1． Dreamweaver的發(fā)展史2． Dreamweaver CS3的新功能3． Dreamweaver CS3工作區(qū)簡介4． 網(wǎng)頁文檔的基本操作作業(yè)/思考題：1． 列舉你所了解的網(wǎng)頁設(shè)計的常用工具和美化網(wǎng)頁的主要工具2． 建立網(wǎng)站的基本流程有哪些步驟？請歸納總結(jié)。3． 利用網(wǎng)上資源，在百度中搜索“網(wǎng)頁配色方案”關(guān)鍵詞，下載相關(guān)的“網(wǎng)頁配色方案”文件，指導(dǎo)以后網(wǎng)頁設(shè)計中的配色問題。教學(xué)后記：第一節(jié)課，應(yīng)首先介紹網(wǎng)站發(fā)展的前景，重點分解Dreamweaver和其他軟件的區(qū)別，提出利用網(wǎng)絡(luò)傳播信息，并由此講述網(wǎng)絡(luò)發(fā)展給網(wǎng)頁帶來的市場。通過兩節(jié)課的講授，感覺到學(xué)生能對本課程產(chǎn)生比較大的興趣！第 109頁課程教案（№:2）授課內(nèi)容站點的創(chuàng)建與管理課 型R理論 163。實踐授課學(xué)時2教學(xué)方法與手段講授法教學(xué)目的與要求本次課程將講授網(wǎng)站站點的創(chuàng)建與管理知識，使學(xué)生了解到什么是站點，站點的種類，站點的作用，站點文件的管理。站點的發(fā)布及網(wǎng)頁的預(yù)覽。教學(xué)重點與難點教學(xué)重點：1． 站點的創(chuàng)建；2． 站點文件的管理；3． 站點文件的預(yù)覽；4． 站點地圖的生成。教學(xué)難點：　　測試?yán)梅?wù)器技術(shù)的站點；站點地圖創(chuàng)建的條件；遠程站點的創(chuàng)建。教學(xué)過程設(shè)計一、 站點（10分鐘左右）也稱“網(wǎng)站”，用來定位網(wǎng)站上的所有文件，是一系列通過超鏈接而相互聯(lián)系的網(wǎng)頁集合。建立網(wǎng)站首先要在本地計算機上構(gòu)建本地站點來管理站點中的文檔，制作網(wǎng)頁，測試完畢后，上傳到Internet服務(wù)器。二、 新建本地站點（20分鐘左右）1． 站點菜單新建站點2． 站點菜單管理站點新建3． 建立站點注意問題：（1） 用文件夾進行分類存儲：如網(wǎng)頁文件存放在html文件夾中，圖像文件存放在images文件夾中。嵌套文件夾的層數(shù)不要太多，最多不超過三層，否則超鏈接時會出錯。（2） 文件命名要合理：建議全部使用小寫的文件名稱，不要用中文文件名。文件夾的名稱最好用顧名思義的英文，方便以后修改維護。文件名也要符合規(guī)范。三、 網(wǎng)站文件的管理（20分鐘左右）1． 文件的創(chuàng)建(鼠標(biāo)右擊站點新建文件；文件菜單新建；ctrl+N)；2． 文件的選擇(鼠標(biāo)點擊單選；按ctrl或shift鍵輔助多選)；3． 打開和編輯文件(雙擊)；4． 刪除文件；5． 重命名文件(右擊文件；F2)；6． 保存及另存為文件：ctrl+s/f12；或通過文件菜單；7． 文件的復(fù)制，移動，關(guān)閉：ctrl++x，ctrl+w；8． 消除文件只讀屬性：右擊文件選擇；9． 將文件設(shè)為首頁：和制作站點地圖有關(guān)；10． 給文件添加設(shè)計備注：備注文件的存放位置和文件的擴展名。四、 頁面預(yù)覽(F12鍵)（20分鐘左右）1． 文件菜單在瀏覽器中預(yù)覽選擇瀏覽器2． 工具欄地球土標(biāo)選擇瀏覽器：此時可通過”添加瀏覽器”選項來增加更多的瀏覽器3． 編輯菜單首選參數(shù)在瀏覽器中預(yù)覽不選”使用臨時文件預(yù)覽”五、 站點的編輯和管理（20分鐘左右）1． 站點管理器：文件面板(窗口菜單或F8鍵)2． 打開現(xiàn)有本地站點3． 查看本地和遠程網(wǎng)站的文件和地圖4． 調(diào)整窗口視圖5． 保存站點地圖6． 重建站點緩存7． 站點編輯，復(fù)制，刪除，導(dǎo)入與導(dǎo)出：站點菜單管理站點作業(yè)/思考題：1． 在制作網(wǎng)頁前為什么要首先建立站點？2． 定義本地站點的含義是什么？3． 建立站點應(yīng)該注意的問題？教學(xué)后記：網(wǎng)站的站點，好似一個班級，應(yīng)該首先為班級起一個名稱，并配備一個班主任，然后再陸續(xù)的加入一些學(xué)生。這其實就是我們站點創(chuàng)建時應(yīng)該為站點起一個名字，并設(shè)置一個首頁，增加更多的超鏈接。課程教案（№:3）授課內(nèi)容了解Dreamweaver的界面及站點的建立課 型163。理論 R實踐授課學(xué)時2教學(xué)方法與手段講授法、演示法教學(xué)目的與要求利用Dreamweaver CS3熟練創(chuàng)建本地. 遠程站點。并掌握Dreamweaver的基本操作。教學(xué)重點與難點教學(xué)重點：1． 站點的創(chuàng)建；2． 站點文件的管理；3． 站點文件的預(yù)覽；4． 站點地圖的生成。教學(xué)難點：　　站點地圖創(chuàng)建的條件；遠程站點的創(chuàng)建。教學(xué)過程設(shè)計1. 本地站點的創(chuàng)建（1） 運行軟件（2） 站點菜單新建站點（3） 遠程服務(wù)器連接選擇為無2. 遠程站點的創(chuàng)建（1） 運行軟件（2） 站點菜單新建站點（3） 遠程服務(wù)器連接選擇為FTP3. IIS的安裝（1） 我的電腦控制面板添加和刪除程序（2） 選擇添加windows組件（3） 勾選Internet信息服務(wù)，更新安裝4. 創(chuàng)建利用服務(wù)器技術(shù)的站點（1） 運行軟件（2） 站點菜單新建站點（3） 是否利用服務(wù)器技術(shù)設(shè)置為是（4） 允許IIS，將默認(rèn)站點的主目錄設(shè)置為站點所對應(yīng)的文件夾（5） 設(shè)置服務(wù)器站點的測試服務(wù)器為：//localhost5. 站點文件的管理站點文件的創(chuàng)建. 編輯及預(yù)覽6. 管理站點（1） 站點菜單新建站點（2） 實現(xiàn)對站點創(chuàng)建. 刪除. 編輯（3） 導(dǎo)出并重新導(dǎo)入站點作業(yè)/思考題：1． 在制作網(wǎng)頁前為什么要首先建立站點？2． 定義本地站點的含義是什么？3． 建立站點應(yīng)該注意的問題？教學(xué)后記： 通過本次實訓(xùn)，讓學(xué)生系統(tǒng)的掌握站點的創(chuàng)建及管理，了解各類站點的創(chuàng)建過程，并能正確的導(dǎo)出和導(dǎo)入站點文件。課程教案（№:4）授課內(nèi)容HTML語言簡介課 型R理論 163。實踐授課學(xué)時2教學(xué)方法與手段講授法教學(xué)目的與要求1． 了解HTML語言，重點掌握HTML文件的基本結(jié)構(gòu)和語法格式；2． 掌握標(biāo)記語言的用法；3． 熟記title標(biāo)記、marquee標(biāo)記及常用屬性代碼。教學(xué)重點與難點教學(xué)重點：1． HTML文件的基本結(jié)構(gòu)；2． HTML語法格式；教學(xué)難點：　　設(shè)置網(wǎng)頁標(biāo)題；設(shè)置網(wǎng)頁關(guān)鍵字；制作滾動文字。教學(xué)過程設(shè)計一、 HTML簡介（5分鐘左右）HTML：(HyperText Markup Language)是一種超文本標(biāo)記語言，是網(wǎng)頁制作的基本語言。即通過將特定的標(biāo)記放置在文本或圖片或URL前后，來達到使該段文本或圖片或URL以指定方式顯示的目的。二、 HTML文件的基本結(jié)構(gòu)（10分鐘左右）HTMLheadtitle網(wǎng)頁的標(biāo)題/title/headbody 網(wǎng)頁的主體內(nèi)容/body/HTML三、 HTML語法格式（20分鐘左右）1． HTML標(biāo)記一般格式標(biāo)記 屬性1=”屬性值1” 屬性2=”屬性值2” …對象/標(biāo)記說明：標(biāo)記除了上述格式，還有單標(biāo)記，如下面的img標(biāo)記；屬性書寫不分先后順序；屬性值用英文雙撇號括住。2． HTML語法規(guī)則HTML文件以純文本格式形式存放，擴展名為“*. html”或“*. htm”。HTML標(biāo)記不區(qū)分大小寫。多數(shù)HTML標(biāo)記可以嵌套，但不可以交叉。HTML源文件中的換行、回車符和多個連續(xù)空格在顯示效果中無效。只有在設(shè)計視圖中才有用。在HTML源文件中，br為換行標(biāo)記；p/p為換段標(biāo)記；空格用amp。nbsp。 表示。四、 HTML標(biāo)記舉例（55分鐘左右）1． 設(shè)置網(wǎng)頁標(biāo)題：title標(biāo)記2． 元信息標(biāo)記：meta標(biāo)記meta標(biāo)記的信息只顯示在源代碼中，瀏覽器中沒有顯示，通過設(shè)置meta標(biāo)記的不同屬性，可以定義頁面中各種元數(shù)據(jù)，如頁面的名稱、關(guān)鍵詞等多種信息。3． 制作滾動文字：marquee標(biāo)記屬性：1　 direction 表示滾動的方向，值可以是left、right、up、down，默認(rèn)為left。2　 behavior 表示滾動的方式，值可以是scroll（連續(xù)滾動）、slide（滑動一次）、alternate（來回滾動）。3　 Loop表示循環(huán)的次數(shù)，值是正整數(shù)，默認(rèn)為無線循環(huán)。4　 Scrollamount 表示運動速度，值是正整數(shù)，默認(rèn)為6。5　 Scrolldelay 表示停頓時間，值是正整數(shù)，默認(rèn)為0，單位是毫秒。6　 Align表示元素的垂直對齊方式，值可以是top、bottom、middle。7　 Height、width表示運動區(qū)域的高度和寬度，值是正整數(shù)或百分比，默認(rèn)width=100%，height為標(biāo)簽內(nèi)元素的高度。事件：onMouseOver=()和onMouseOut=()，表示當(dāng)鼠標(biāo)浮到以上區(qū)域的時候滾動停止和當(dāng)鼠標(biāo)移開的時候又繼續(xù)滾動。作業(yè)/思考題：1． 關(guān)鍵字之間以英文逗號分隔。關(guān)鍵詞輸入不是越多越好，因為大多數(shù)搜索引擎限制關(guān)鍵字的數(shù)量，所以設(shè)置關(guān)鍵字要精簡才會被搜中率高。2． 什么是HTML？HTML文件的基本結(jié)構(gòu)是什么？3． HTML標(biāo)記的一般格式是什么？教學(xué)后記：雖然現(xiàn)在不懂HTML也能制作漂亮網(wǎng)頁，但是只有掌握HTML，才可以更方便、更全面地控制網(wǎng)頁，同時又一些網(wǎng)頁設(shè)計離不開代碼。課程教案（№:5）授課內(nèi)容網(wǎng)頁文本的使用課 型R理論 163。實踐授課學(xué)時2教學(xué)方法與手段講授法教學(xué)目的與要求本次課程將講授網(wǎng)頁制作過程中的文本使用，掌握各種特殊文本的輸入，文本列表的使用。教學(xué)重點與難點教學(xué)重點：1． 特殊文本的輸入及使用狀態(tài)；2． 文本屬性；3． 文本列表的使用；4． 在html中的文本代碼。教學(xué)難點：1． 有序列表和無序列表的區(qū)別；2． 描述性列表的制作。教學(xué)過程設(shè)計一、 文本的輸入（10分鐘左右）1． 換行與換段的輸入2． 空白字符的輸入3． 特殊符號的輸入4． 日期與時間的插入5． 水平線的插入二、 文本的編輯（20分鐘左右）1． 文本的選擇：鼠標(biāo)拖選，按住shift+光標(biāo)鍵選擇2． 文本的刪除，復(fù)制，移動，選擇性粘貼3． 查找與替換：ctrl+fl 文本對文本的替換l 帶格式文本的替換l 源代碼的替換l 文本高級及指定標(biāo)簽的替