《網(wǎng)頁設(shè)計與制作》教案.doc
《《網(wǎng)頁設(shè)計與制作》教案.doc》由會員分享，可在線閱讀，更多相關(guān)《《網(wǎng)頁設(shè)計與制作》教案.doc（74頁珍藏版）》請在裝配圖網(wǎng)上搜索。
______________________________________________________________________________________________________________ 網(wǎng)頁設(shè)計與制作教案 課程名稱 網(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é)出版社，2010.9 孫振業(yè)《網(wǎng)頁設(shè)計與制作》高等教育出版社，2009.3 課程教案（№:1） 授課內(nèi)容 網(wǎng)頁制作基礎(chǔ)知識 課 型 R理論 ￡實踐 授課學(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和FrontPage 4． 了解美化網(wǎng)頁的主要工具（10分鐘左右） （1）圖像處理軟件：Photoshop、Fireworks、CorelDRAW等 （2）動畫制作工具：Flash 5． 了解網(wǎng)頁中的腳本語言（10分鐘左右） 如：VBScript、JavaScript 6． 了解服務(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)生比較大的興趣！ -可編輯修改- 課程教案（№:2） 授課內(nèi)容 站點的創(chuàng)建與管理 課 型 R理論 ￡實踐 授課學(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ī)范，比如首頁一般命名為index.html或default.html。 三、 網(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+c.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的界面及站點的建立 課 型 ￡理論 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ù)器連接選擇為FTP 3. IIS的安裝 （1） 我的電腦->控制面板->添加和刪除程序 （2） 選擇添加windows組件 （3） 勾選Internet信息服務(wù)，更新安裝 4. 創(chuàng)建利用服務(wù)器技術(shù)的站點 （1） 運行軟件 （2） 站點菜單->新建站點 （3） 是否利用服務(wù)器技術(shù)設(shè)置為是 （4） 允許IIS，將默認站點的主目錄設(shè)置為站點所對應(yīng)的文件夾 （5） 設(shè)置服務(wù)器站點的測試服務(wù)器為http：//localhost 5. 站點文件的管理 站點文件的創(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理論 ￡實踐 授課學(xué)時 2 教學(xué)方法與手段 講授法 教學(xué)目的與要求 1． 了解HTML語言，重點掌握HTML文件的基本結(jié)構(gòu)和語法格式； 2． 掌握標(biāo)記語言的用法； 3． 熟記