《網(wǎng)頁(yè)設(shè)計(jì)與制作》教案.doc
《《網(wǎng)頁(yè)設(shè)計(jì)與制作》教案.doc》由會(huì)員分享，可在線閱讀，更多相關(guān)《《網(wǎng)頁(yè)設(shè)計(jì)與制作》教案.doc（74頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
______________________________________________________________________________________________________________ 網(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ì)制作常見(jiàn)的靜態(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ǔ)。 主要參考書(shū)目 趙喜清，崔海濤《網(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ū)別等。通過(guò)講授也將使學(xué)生了解到網(wǎng)頁(yè)的組成，網(wǎng)頁(yè)語(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信息訪問(wèn)原理。 2． 什么是網(wǎng)頁(yè)？ （1） 網(wǎng)頁(yè)內(nèi)容組成； （2） 網(wǎng)頁(yè)編寫(xiě)語(yǔ)言種類及特點(diǎn)。 3． Dreamweaver8功能簡(jiǎn)介。 教學(xué)難點(diǎn)： Internet信息訪問(wèn)原理；網(wǎng)頁(yè)編寫(xiě)語(yǔ)言種類及特點(diǎn)。 教學(xué)過(guò)程設(shè)計(jì) 一、 基礎(chǔ)知識(shí) 1． 網(wǎng)頁(yè)簡(jiǎn)介（15分鐘左右） 網(wǎng)頁(yè)：是組成WWW（World Wide Web：萬(wàn)維網(wǎng)）的基本元素，也被稱為頁(yè)面或Web頁(yè)。不同的網(wǎng)頁(yè)通過(guò)超鏈接聯(lián)系在一起，構(gòu)成了WWW縱橫交織結(jié)構(gòu)。 網(wǎng)站：就是一個(gè)相互鏈接的網(wǎng)頁(yè)的集合，它們可以共享。大的網(wǎng)站頁(yè)面數(shù)量多達(dá)幾十萬(wàn)，甚至上百萬(wàn)頁(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和FrontPage 4． 了解美化網(wǎng)頁(yè)的主要工具（10分鐘左右） （1）圖像處理軟件：Photoshop、Fireworks、CorelDRAW等 （2）動(dòng)畫(huà)制作工具：Flash 5． 了解網(wǎng)頁(yè)中的腳本語(yǔ)言（10分鐘左右） 如：VBScript、JavaScript 6． 了解服務(wù)器端主要技術(shù)（10分鐘左右） 服務(wù)器端腳本語(yǔ)言：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ì)中的配色問(wèn)題。 教學(xué)后記： 第一節(jié)課，應(yīng)首先介紹網(wǎng)站發(fā)展的前景，重點(diǎn)分解Dreamweaver和其他軟件的區(qū)別，提出利用網(wǎng)絡(luò)傳播信息，并由此講述網(wǎng)絡(luò)發(fā)展給網(wǎng)頁(yè)帶來(lái)的市場(chǎng)。通過(guò)兩節(jié)課的講授，感覺(jué)到學(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é)過(guò)程設(shè)計(jì) 一、 站點(diǎn)（10分鐘左右） 也稱“網(wǎng)站”，用來(lái)定位網(wǎng)站上的所有文件，是一系列通過(guò)超鏈接而相互聯(lián)系的網(wǎng)頁(yè)集合。建立網(wǎng)站首先要在本地計(jì)算機(jī)上構(gòu)建本地站點(diǎn)來(lái)管理站點(diǎn)中的文檔，制作網(wǎng)頁(yè)，測(cè)試完畢后，上傳到Internet服務(wù)器。 二、 新建本地站點(diǎn)（20分鐘左右） 1． 站點(diǎn)菜單->新建站點(diǎn) 2． 站點(diǎn)菜單->管理站點(diǎn)->新建 3． 建立站點(diǎn)注意問(wèn)題： （1） 用文件夾進(jìn)行分類存儲(chǔ)：如網(wǎng)頁(yè)文件存放在html文件夾中，圖像文件存放在images文件夾中。嵌套文件夾的層數(shù)不要太多，最多不超過(guò)三層，否則超鏈接時(shí)會(huì)出錯(cuò)。 （2） 文件命名要合理：建議全部使用小寫(xiě)的文件名稱，不要用中文文件名。文件夾的名稱最好用顧名思義的英文，方便以后修改維護(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． 打開(kāi)和編輯文件(雙擊)； 4． 刪除文件； 5． 重命名文件(右擊文件；F2)； 6． 保存及另存為文件：ctrl+s/f12；或通過(guò)文件菜單； 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í)可通過(guò)”添加瀏覽器”選項(xiàng)來(lái)增加更多的瀏覽器 3． 編輯菜單->首選參數(shù)->在瀏覽器中預(yù)覽->不選”使用臨時(shí)文件預(yù)覽” 五、 站點(diǎn)的編輯和管理（20分鐘左右） 1． 站點(diǎn)管理器：文件面板(窗口菜單或F8鍵) 2． 打開(kāi)現(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)該注意的問(wèn)題？ 教學(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é)過(guò)程設(shè)計(jì) 1. 本地站點(diǎn)的創(chuàng)建 （1） 運(yùn)行軟件 （2） 站點(diǎn)菜單->新建站點(diǎn) （3） 遠(yuǎn)程服務(wù)器連接選擇為無(wú) 2. 遠(yuǎn)程站點(diǎn)的創(chuàng)建 （1） 運(yùn)行軟件 （2） 站點(diǎn)菜單->新建站點(diǎn) （3） 遠(yuǎn)程服務(wù)器連接選擇為FTP 3. 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：//localhost 5. 站點(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)該注意的問(wèn)題？ 教學(xué)后記： 通過(guò)本次實(shí)訓(xùn)，讓學(xué)生系統(tǒng)的掌握站點(diǎn)的創(chuàng)建及管理，了解各類站點(diǎn)的創(chuàng)建過(guò)程，并能正確的導(dǎo)出和導(dǎo)入站點(diǎn)文件。 課程教案（№:4） 授課內(nèi)容 HTML語(yǔ)言簡(jiǎn)介 課 型 R理論 ￡實(shí)踐 授課學(xué)時(shí) 2 教學(xué)方法與手段 講授法 教學(xué)目的與要求 1． 了解HTML語(yǔ)言，重點(diǎn)掌握HTML文件的基本結(jié)構(gòu)和語(yǔ)法格式； 2． 掌握標(biāo)記語(yǔ)言的用法； 3． 熟記