【正文】 湖 南 大 眾 傳 媒 職 業(yè) 技 術(shù) 學(xué) 院 網(wǎng)頁設(shè)計 課 程 教 案 授課班級 電廣系網(wǎng)絡(luò)新聞 0601/2/3/4/5/6 電廣系 技術(shù) 051 授課教師 歐陽煒昊 授課時間 2020 年 下 學(xué)期 目錄 第 1 次課 網(wǎng)頁設(shè)計入門 ....................................................................................................3 第 2 次課 網(wǎng)頁圖片處理基礎(chǔ)與網(wǎng)頁動畫原理 ....................................................................5 第 3 次課 安裝與使用 Dreamweaver 8，構(gòu)建和管理網(wǎng)站站點(diǎn) .............................................7 第 4 次課 文本和圖像操作 .............................................................................................. 11 第 5 次課 使用表格布局網(wǎng)頁 ........................................................................................... 15 第 6 次課 使用布局表格布局網(wǎng)頁 .................................................................................... 17 第 7 次課 使用層布局網(wǎng)頁 .............................................................................................. 19 第 8 次課 使用框架布局網(wǎng)頁 ........................................................................................... 22 第 9 次課 網(wǎng)站測試、發(fā)布與維護(hù) .................................................................................... 26 第 10 次課 使用 CSS 美化網(wǎng)頁 ........................................................................................... 28 第 11 次課 使用模板和庫制作網(wǎng)頁 .................................................................................... 30 第 12 次課 用 HTML 制作網(wǎng)頁 ............................................................................................. 32 第 13 次課 創(chuàng)建表單網(wǎng)頁 .................................................................................................. 34 第 14 次課 創(chuàng)建動態(tài)網(wǎng)頁 .................................................................................................. 36 第 15 次課 處理基本的 Web 圖像 ....................................................................................... 38 第 16 次課 設(shè)計網(wǎng)站 CI .................................................................................................... 39 第 17 次課 創(chuàng)建位圖 ......................................................................................................... 41 第 18 次課 用 Flash 創(chuàng)建簡單動畫 .................................................................................... 42 第 1次課 網(wǎng)頁設(shè)計入門 本次課標(biāo)題： 網(wǎng)頁設(shè)計入門 授課班級 電廣系網(wǎng)絡(luò)新聞 0601/2/3/4/5/6 電廣系技術(shù) 051(五年制 ) 上課時間 2 課時 上課地點(diǎn) 實(shí)驗(yàn)樓 503 教 學(xué) 目 標(biāo) 能力 (技能 )目標(biāo) 知識目標(biāo) 對網(wǎng)頁的設(shè)計與制作形成感性認(rèn)識；激發(fā)學(xué)習(xí)興趣； 能初步分析出網(wǎng)頁的組成元素有哪些。 了解 Web 的工作方式； 理解什么是 URL； 理解網(wǎng)頁、網(wǎng)站、主頁的 概念 ； 了解網(wǎng)站的開發(fā)流程。 能力訓(xùn) 練任務(wù) 及案例 任務(wù) 1：通過瀏覽網(wǎng)站理解知識概念 案例：公司類網(wǎng)站，旅游類網(wǎng)站，銀行網(wǎng)站，新聞網(wǎng)站，媒體網(wǎng)站，政府官方網(wǎng)站 任務(wù) 2：寫一個簡單的網(wǎng)站規(guī)劃 案例：省藥監(jiān)局網(wǎng)站規(guī)劃， 903 經(jīng)典唱片網(wǎng)上商店項(xiàng)目規(guī)劃書 教學(xué)方法 采用任務(wù)分解和邊講邊練的方法 參考資料 《網(wǎng)頁設(shè)計三合一 教程與上機(jī)實(shí)訓(xùn)》 網(wǎng)上素材 教學(xué)過程 課程導(dǎo)入 提問 了解本班學(xué)生以前是否有網(wǎng)頁設(shè)計方法的基礎(chǔ)，對網(wǎng)頁設(shè)計與制作是否有興趣 新課引入 萬維網(wǎng)使得瀏覽 Inter 變得非常簡單，只要用鼠標(biāo)單擊，就可以顯示圖文并茂的網(wǎng)頁，網(wǎng)頁中可以包含聲音、視頻、動畫等，這也是萬維網(wǎng)在 Inter 中最受歡迎、使用最多的原因。設(shè)計網(wǎng)頁并不是一個十分復(fù)雜的過程，但是想要設(shè)計出合理而精美的網(wǎng)頁作品，需要經(jīng)過嚴(yán)謹(jǐn)?shù)睦硇苑治?、敏銳的觀察，以及感性的審美與創(chuàng)意技巧。 信息是網(wǎng)站核心，是網(wǎng)站設(shè)計的依據(jù)，分析和理解信息內(nèi)容是 設(shè)計的起點(diǎn)也是終點(diǎn)。 色彩是網(wǎng)頁設(shè)計的靈魂之一，是最先也是最持久地印記在瀏覽者腦海中的網(wǎng)站印象。它對形成網(wǎng)站風(fēng)格設(shè)計、網(wǎng)站氣氛等感覺性設(shè)計的作用非常大。合理的網(wǎng)站布局結(jié)構(gòu)給瀏覽者賞心悅目的感覺，增強(qiáng)網(wǎng)站的吸引力。 知識技能目標(biāo)說明： 介紹本次課要掌握的知識能力目標(biāo)。 一、任務(wù) 1： 通過 瀏覽網(wǎng)站 理解知識概念 學(xué)生實(shí)訓(xùn)：瀏覽下列網(wǎng)站的第一個頁面，對其進(jìn)行賞析（主要包括頁面布局結(jié)構(gòu)、顏色搭配、導(dǎo)航欄、文字效果、圖片效果、動畫效 果等。） 太平洋電腦網(wǎng)： ，卓越網(wǎng)： ，湖南大眾傳媒學(xué)院： ，起點(diǎn)文學(xué)網(wǎng)： ，攜程旅游網(wǎng)： ， 華奧星空： ，淘寶網(wǎng)： 組織學(xué)生討論 從網(wǎng)站中引出知識概念： （ 1） WWW（ World Wide Web）：簡稱為 Web 或萬維網(wǎng)，中文意思是布滿世界的蜘蛛網(wǎng)。 Web 是一種基于超文本（ Hypertext）方式的信息檢索 10 分鐘 20 分鐘 15 分鐘 服務(wù)技術(shù)， 它由遍布在 Inter 上的稱為 Web 服務(wù)器的計算機(jī)組成，并將不同的信息資源有機(jī)地組織在一起，統(tǒng)一放在一個單一的 Web 網(wǎng)中。 （ 2） URL 格式：協(xié)議名： //主機(jī)名 [/文件夾名 /文件名 常用的協(xié)議名如下： HTTP：超文本傳輸協(xié)議，用于轉(zhuǎn)換網(wǎng)頁。 FTP：文件傳輸協(xié)議，主要用于傳輸文件，許多提供軟件下載的網(wǎng)站使用“ FTP”作為下載的網(wǎng)址。 （ 3）部分域名類別含義 （ 4）網(wǎng)頁、網(wǎng)站和主頁 Web 頁面：就是瀏覽器里看到的網(wǎng)頁，一個單一的文件。 網(wǎng)頁：用 HTML 語言所編寫的頁面，網(wǎng)頁中可以包含文本、圖像、動畫、 音頻、視頻等信息。 網(wǎng)站：網(wǎng)頁的集合。通過超級鏈接將網(wǎng)站中多個網(wǎng)頁建立聯(lián)系，形成一個主題鮮明、風(fēng)格一致的站點(diǎn)。 主頁（或稱首頁） ：一個站點(diǎn)的起始頁面通常被稱為主頁，主頁是一個網(wǎng)站的開始，因此主頁的好壞決定了這個網(wǎng)站的訪問情況，一般主頁的名稱是固定的 或 等。 二、任務(wù) 2：寫一個簡單的網(wǎng)站規(guī)劃 學(xué)生先寫，要求有：網(wǎng)站名稱、主要欄目、制作分工、制作日程等。 根據(jù)學(xué)生寫的情況引出知識點(diǎn)： （ 1）網(wǎng)站開發(fā)流程：前期準(zhǔn)備 中期設(shè)計開發(fā) 后期維護(hù) （ 2）選擇合適的網(wǎng)頁制作工 具 標(biāo)記型： notepad(記事本 )， Ultraedit 所見即所得型： Frontpage， Dreamweaver 其他： 圖像處理工具： Photoshop、 Firework 動畫制作工具： Flash、 Swish 圖標(biāo)制作工具：小榕圖標(biāo)編輯器、超級圖標(biāo) 抓圖工具： HyperSnap、 HyperCam、 Camtasia Studio 實(shí)例講解：省藥監(jiān)局網(wǎng)站規(guī)劃、 903 經(jīng)典唱片網(wǎng)上商店項(xiàng)目規(guī)劃書 15 分鐘 10 分鐘 20 分鐘 教學(xué)小結(jié) 網(wǎng)站是信息內(nèi)容的存儲空間模式，它像一個放置信息的“柜子”，有著很多“格子”和“抽屜”，網(wǎng)站還是信息空間的外包裝，是“柜子”本身。色彩搭配是頁面中刺激記憶最初、最持久的元素，失去色彩，人們會失去快樂的心情、娛樂的氣氛，色彩是人們生活多姿多彩的表現(xiàn)，是互聯(lián)網(wǎng)生機(jī)的來源。合理的網(wǎng)站布局結(jié)構(gòu)給瀏覽者賞心悅目的感覺，增強(qiáng)網(wǎng)站的吸引力。導(dǎo)航是引人注目的，瀏覽者進(jìn)行網(wǎng)站，首先尋找導(dǎo)航條。 作 業(yè) 填空、判斷與選擇（做在書上） 從頁面布局結(jié)構(gòu)、顏色搭配、導(dǎo)航欄 、文字效果、圖片效果、動畫效果等對比下列網(wǎng)站的首頁： 卓越亞馬遜 vs 當(dāng)當(dāng)網(wǎng) 淘寶網(wǎng) vs 拍拍網(wǎng) 新浪體育 vs 搜狐體育 第 2次課 網(wǎng)頁圖片處理基礎(chǔ)與網(wǎng)頁動畫原理 本次課標(biāo)題： 網(wǎng)頁圖片處理基礎(chǔ)與網(wǎng)頁動畫原理 授課班級 電廣系網(wǎng)絡(luò)新聞 0601/2/3/4/5/6 電廣系技術(shù) 051(五年制 ) 上課時間 2 課時 上課地點(diǎn) 實(shí)驗(yàn)樓 503 教 學(xué) 目 標(biāo) 能力 (技能 )目標(biāo) 知識目標(biāo) 能區(qū)別矢矢量圖與位圖； 能知道網(wǎng)頁中常用的圖片格式； 能選擇出合適的網(wǎng)頁圖片處理工具軟件和動畫制作制作工具軟件。 掌握網(wǎng)頁圖片的基本知識； 了解網(wǎng)頁圖片常用格式； 插入網(wǎng)頁圖片的注意事項(xiàng)； 了解網(wǎng)頁動畫的基本原理。 能力訓(xùn) 練任務(wù) 及案例 任務(wù) 1：認(rèn)知網(wǎng)頁圖片和動畫 任務(wù) 2：網(wǎng)頁基礎(chǔ)知識綜合實(shí)訓(xùn) 教學(xué)方法 采用任務(wù)分解和邊講邊練的方法 參考資料 《網(wǎng)頁設(shè)計三合一教程與上機(jī)實(shí)訓(xùn)》 網(wǎng)上素材 教學(xué)過程 課程導(dǎo)入 圖片是網(wǎng)頁中一個重要的組成元素，而隨著電腦技術(shù)的飛速發(fā)展和網(wǎng)絡(luò)帶寬的增加，動畫也被大量運(yùn)用到網(wǎng)頁設(shè)計中來。 知識技能目標(biāo)說明： 介紹本次課要掌握的知識能力目標(biāo)。 一、任務(wù) 1：認(rèn)知網(wǎng)頁圖片和動畫 讓學(xué)生瀏覽一些網(wǎng)頁，將認(rèn)為不錯的圖片保存下來。 引導(dǎo)學(xué)生查看圖片的格式，講解知識點(diǎn) （ 1）矢量圖：矢量圖也叫向量圖形，是由線條和節(jié)點(diǎn)組成的圖像。矢量文件中的圖形元素稱為對象，每個對象都是一個自成一體的實(shí)體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。矢量圖也叫向量圖形，是由線條和節(jié)點(diǎn)組成的圖像。矢量圖的文件大小與圖像大小無關(guān)，只與圖像的復(fù)雜程度有關(guān)，因此簡單圖像所占的存儲空間?。皇噶繄D可無損縮放， 不會產(chǎn)生鋸齒或模糊。 （ 2）位圖：也叫點(diǎn)陣圖像，是由很多個像素（色塊）組成的圖像。位圖的清晰度與像素點(diǎn)的多少有關(guān)，單位面積內(nèi)像素點(diǎn)數(shù)目越多，則圖像越清晰；對于高分辨率的彩色圖像，用位圖存儲所需的儲存空間較大；位圖放大后會出現(xiàn)馬賽克，整個圖像會變得模糊。 （ 3）圖片插入網(wǎng)頁注意事項(xiàng)： JPEG 和 GIF 圖像的選擇，標(biāo)記圖像的大小，對大幅圖像的處理，巧妙使用“同一圖像”，善用圖像，控制圖像數(shù)量。 （ 4）選擇