【正文】 35 分鐘 思考：什么是分辨率？ Fireworks 是由 MacroMedia 公司出品的首選 WEB 圖形圖像處理軟件。 （ 3）圖片插入網(wǎng)頁注意事項： JPEG 和 GIF 圖像的選擇，標記圖像的大小，對大幅圖像的處理，巧妙使用“同一圖像”，善用圖像，控制圖像數(shù)量。矢量圖也叫向量圖形，是由線條和節(jié)點組成的圖像。 知識技能目標說明： 介紹本次課要掌握的知識能力目標。導航是引人注目的，瀏覽者進行網(wǎng)站，首先尋找導航條。 二、任務 2：寫一個簡單的網(wǎng)站規(guī)劃 學生先寫，要求有：網(wǎng)站名稱、主要欄目、制作分工、制作日程等。 網(wǎng)頁：用 HTML 語言所編寫的頁面，網(wǎng)頁中可以包含文本、圖像、動畫、 音頻、視頻等信息。 Web 是一種基于超文本（ Hypertext）方式的信息檢索 10 分鐘 20 分鐘 15 分鐘 服務技術， 它由遍布在 Inter 上的稱為 Web 服務器的計算機組成，并將不同的信息資源有機地組織在一起，統(tǒng)一放在一個單一的 Web 網(wǎng)中。合理的網(wǎng)站布局結(jié)構(gòu)給瀏覽者賞心悅目的感覺，增強網(wǎng)站的吸引力。設計網(wǎng)頁并不是一個十分復雜的過程，但是想要設計出合理而精美的網(wǎng)頁作品，需要經(jīng)過嚴謹?shù)睦硇苑治?、敏銳的觀察，以及感性的審美與創(chuàng)意技巧。湖 南 大 眾 傳 媒 職 業(yè) 技 術 學 院 網(wǎng)頁設計 課 程 教 案 授課班級 電廣系網(wǎng)絡新聞 0601/2/3/4/5/6 電廣系 技術 051 授課教師 歐陽煒昊 授課時間 2020 年 下 學期 目錄 第 1 次課 網(wǎng)頁設計入門 ....................................................................................................3 第 2 次課 網(wǎng)頁圖片處理基礎與網(wǎng)頁動畫原理 ....................................................................5 第 3 次課 安裝與使用 Dreamweaver 8，構(gòu)建和管理網(wǎng)站站點 .............................................7 第 4 次課 文本和圖像操作 .............................................................................................. 11 第 5 次課 使用表格布局網(wǎng)頁 ........................................................................................... 15 第 6 次課 使用布局表格布局網(wǎng)頁 .................................................................................... 17 第 7 次課 使用層布局網(wǎng)頁 .............................................................................................. 19 第 8 次課 使用框架布局網(wǎng)頁 ........................................................................................... 22 第 9 次課 網(wǎng)站測試、發(fā)布與維護 .................................................................................... 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 次課 設計網(wǎng)站 CI .................................................................................................... 39 第 17 次課 創(chuàng)建位圖 ......................................................................................................... 41 第 18 次課 用 Flash 創(chuàng)建簡單動畫 .................................................................................... 42 第 1次課 網(wǎng)頁設計入門 本次課標題： 網(wǎng)頁設計入門 授課班級 電廣系網(wǎng)絡新聞 0601/2/3/4/5/6 電廣系技術 051(五年制 ) 上課時間 2 課時 上課地點 實驗樓 503 教 學 目 標 能力 (技能 )目標 知識目標 對網(wǎng)頁的設計與制作形成感性認識；激發(fā)學習興趣； 能初步分析出網(wǎng)頁的組成元素有哪些。 信息是網(wǎng)站核心，是網(wǎng)站設計的依據(jù)，分析和理解信息內(nèi)容是 設計的起點也是終點。 知識技能目標說明： 介紹本次課要掌握的知識能力目標。 （ 2） URL 格式：協(xié)議名： //主機名 [/文件夾名 /文件名 常用的協(xié)議名如下： HTTP：超文本傳輸協(xié)議，用于轉(zhuǎn)換網(wǎng)頁。 網(wǎng)站：網(wǎng)頁的集合。 根據(jù)學生寫的情況引出知識點： （ 1）網(wǎng)站開發(fā)流程：前期準備 中期設計開發(fā) 后期維護 （ 2）選擇合適的網(wǎng)頁制作工 具 標記型： notepad(記事本 )， Ultraedit 所見即所得型： Frontpage， Dreamweaver 其他： 圖像處理工具： Photoshop、 Firework 動畫制作工具： Flash、 Swish 圖標制作工具：小榕圖標編輯器、超級圖標 抓圖工具： HyperSnap、 HyperCam、 Camtasia Studio 實例講解：省藥監(jiān)局網(wǎng)站規(guī)劃、 903 經(jīng)典唱片網(wǎng)上商店項目規(guī)劃書 15 分鐘 10 分鐘 20 分鐘 教學小結(jié) 網(wǎng)站是信息內(nèi)容的存儲空間模式，它像一個放置信息的“柜子”，有著很多“格子”和“抽屜”，網(wǎng)站還是信息空間的外包裝，是“柜子”本身。 作 業(yè) 填空、判斷與選擇（做在書上） 從頁面布局結(jié)構(gòu)、顏色搭配、導航欄 、文字效果、圖片效果、動畫效果等對比下列網(wǎng)站的首頁： 卓越亞馬遜 vs 當當網(wǎng) 淘寶網(wǎng) vs 拍拍網(wǎng) 新浪體育 vs 搜狐體育 第 2次課 網(wǎng)頁圖片處理基礎與網(wǎng)頁動畫原理 本次課標題： 網(wǎng)頁圖片處理基礎與網(wǎng)頁動畫原理 授課班級 電廣系網(wǎng)絡新聞 0601/2/3/4/5/6 電廣系技術 051(五年制 ) 上課時間 2 課時 上課地點 實驗樓 503 教 學 目 標 能力 (技能 )目標 知識目標 能區(qū)別矢矢量圖與位圖； 能知道網(wǎng)頁中常用的圖片格式； 能選擇出合適的網(wǎng)頁圖片處理工具軟件和動畫制作制作工具軟件。 一、任務 1：認知網(wǎng)頁圖片和動畫 讓學生瀏覽一些網(wǎng)頁，將認為不錯的圖片保存下來。矢量圖的文件大小與圖像大小無關，只與圖像的復雜程度有關，因此簡單圖像所占的存儲空間??；矢量圖可無損縮放， 不會產(chǎn)生鋸齒或模糊。 （ 4）選擇合適的網(wǎng)頁圖片處理工具 目前常用的圖形和圖像處理工具主要是 Adobe 公司出品的著名的圖形圖像處理軟件： Photoshop 和 MacroMedia 公司推出的 Fireworks（ MacroMedia 公司也已被 Adobe 公司收購）。它的獨特之處在于其能夠優(yōu)化處理大圖片、切割圖片、為圖片加入特殊效果、制作網(wǎng)頁的動態(tài)行為等，可以生成 Fireworks HTML，直接導入到網(wǎng)頁中，使用非常方便。 （ 6）網(wǎng)頁動畫 根據(jù)運動的控制方式分類：實時動畫、逐幀動畫 根據(jù)應用范圍、作用不同分類：頁面動畫、專門動畫 網(wǎng)頁動畫設計與創(chuàng)意過程 （ 7）選擇合適的網(wǎng)頁動畫制作工具 最常用的制作網(wǎng)頁動畫的軟件為 Flash，其余還有 Fireworks、 Dreamweaver 等軟件附帶有簡單動畫制作功能。 （ 2）輸入 163 網(wǎng)站的主頁。操作步驟如下： （ 1）設置分 辨率的方法：右鍵單擊桌面，選“屬性”選項，在“設置”選項卡的“屏幕分辨率”內(nèi)拖動鼠標選擇合適的分辨率。 熟悉 Dreamweaver 8 的啟動、退出和其 工作界面； 掌握站點的創(chuàng)建、管理方法； 掌握站點結(jié)構(gòu)的基本構(gòu)成； 掌握網(wǎng)頁文件操作、屬性設置等。 （ 3）在 Dreamweaver 8 主窗口中觀察其各個菜單、工具欄、面板的組成。 任務演示 5 分鐘 5 分鐘 （ 1）創(chuàng)建一個命名為“長沙世界之窗”的網(wǎng)站，該網(wǎng)站保存在本地硬盤的文件夾“旅游網(wǎng)站”中。 （ 4）用案例介紹本地站點的創(chuàng)建方法 學生實訓： （ 1）創(chuàng)建一個命名為“課堂實踐”的靜態(tài)網(wǎng)站，該網(wǎng)站的所有文件存儲在本機上 E 盤的“ ClassroomPractise”文件夾中。 （ 5）將所需的圖像文件和音樂文件分別復制到“ image”和“ music”文件夾中。 （ 2）頁面屬性的設置要求 外觀屬性的設置：“頁面字體”采用“默認字體”，“大小”采用“ 12px”；“背景圖像”選用 image 文件夾下的“ ”；“左邊距”和“右邊距”設置為“ 100px”，“上邊距”和“下邊距”設置為“ 20px”。 根據(jù)學生實訓情況作出點評、講解 四、 任務 4： 綜合實訓 分析實訓任務 準備素材：作為網(wǎng)頁背景的圖片文件 1個（ JPG格式，重命名為 ），作為網(wǎng)頁背景音樂的 MP3 文件 1 個。設置 HTTP地址 為 localhost。在代碼視圖下在body和 /body之間如下添加代碼： embed src= hidden=true autostart=true。 學生完成實訓任務，老師現(xiàn)場指導、答疑。 通過學習設置首選參數(shù)