【正文】 .................................................................................... 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)頁的組成元素有哪些。 知識技能目標(biāo)說明： 介紹本次課要掌握的知識能力目標(biāo)。 網(wǎng)站：網(wǎng)頁的集合。 作 業(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)頁圖片處理工具軟件和動畫制作制作工具軟件。矢量圖的文件大小與圖像大小無關(guān)，只與圖像的復(fù)雜程度有關(guān)，因此簡單圖像所占的存儲空間?。皇噶繄D可無損縮放， 不會產(chǎn)生鋸齒或模糊。它的獨(dú)特之處在于其能夠優(yōu)化處理大圖片、切割圖片、為圖片加入特殊效果、制作網(wǎng)頁的動態(tài)行為等，可以生成 Fireworks HTML，直接導(dǎo)入到網(wǎng)頁中，使用非常方便。 （ 2）輸入 163 網(wǎng)站的主頁。 熟悉 Dreamweaver 8 的啟動、退出和其 工作界面； 掌握站點(diǎn)的創(chuàng)建、管理方法； 掌握站點(diǎn)結(jié)構(gòu)的基本構(gòu)成； 掌握網(wǎng)頁文件操作、屬性設(shè)置等。 任務(wù)演示 5 分鐘 5 分鐘 （ 1）創(chuàng)建一個命名為“長沙世界之窗”的網(wǎng)站，該網(wǎng)站保存在本地硬盤的文件夾“旅游網(wǎng)站”中。 （ 5）將所需的圖像文件和音樂文件分別復(fù)制到“ image”和“ music”文件夾中。 根據(jù)學(xué)生實(shí)訓(xùn)情況作出點(diǎn)評、講解 四、 任務(wù) 4： 綜合實(shí)訓(xùn) 分析實(shí)訓(xùn)任務(wù) 準(zhǔn)備素材：作為網(wǎng)頁背景的圖片文件 1個（ JPG格式，重命名為 ），作為網(wǎng)頁背景音樂的 MP3 文件 1 個。在代碼視圖下在body和 /body之間如下添加代碼： embed src= hidden=true autostart=true。 通過學(xué)習(xí)設(shè)置首選參數(shù)、頁面屬性、文件頭內(nèi)容，輔助工具的使用。 通過編輯網(wǎng)頁文本、對網(wǎng)頁文本進(jìn)行格式化處理，使網(wǎng)頁內(nèi)容更加豐富，網(wǎng)頁布局更加美觀。 將網(wǎng)頁中標(biāo)題以下的正文，字體設(shè)置為“宋體”，大小設(shè)置為“ 16” 。”這是對衡山的贊美。壽澗山泉，繞墻流注。其它如廣瀏寺、湘南寺、丹霞寺、鐵佛寺、方廣寺及傳法院、黃庭觀等，都是明代以前的古鐔，規(guī)模大小雖不相同，但也各有佳趣。五代道士聶師道亦修道於此。 思考 （ 1）網(wǎng)頁中的圖文混排時，如何調(diào)整圖像與文字之間的間距？ 5 分鐘 10 分鐘 15 分鐘 10 分鐘 5 分鐘 （ 1）網(wǎng)頁中圖文混排時，如何創(chuàng)建文字環(huán)繞圖像 的效果？ 三、任務(wù) 3：制作文本和圖片混排的網(wǎng)頁 要求學(xué)生通過分解任務(wù)的學(xué)習(xí)，來制作 文本和圖像混排的網(wǎng)頁，進(jìn)一步掌握 在網(wǎng)頁中輸入文本、空格等，實(shí)現(xiàn)文本換行和編輯文本 ，如何在網(wǎng)頁中插入水平線和日期 ， 對文本進(jìn)行格式化處理 ， 在網(wǎng)頁中插入圖片，設(shè)置圖片屬性。 能力訓(xùn) 練任務(wù) 及案例 任務(wù) 1：認(rèn)識表格 任務(wù) 2：表格的基本操作 實(shí)訓(xùn)：制作表格布局的網(wǎng)頁 教學(xué)方法 采用任務(wù)分解和邊講邊練的方法 參考資料 《網(wǎng)頁設(shè)計三合一教程與上機(jī)實(shí)訓(xùn)》 網(wǎng)上素材 教學(xué)過程 課程導(dǎo)入 新課引 入，明確本次課的任務(wù) 前面我們學(xué)會了如何在網(wǎng)頁中輸入文本和插入圖像。 （ 2）拆分單元格，合并單元格。 實(shí)訓(xùn)步驟 全部在站點(diǎn)里面完成，插入的圖像必須放在站點(diǎn)文件夾下的 pic文件夾內(nèi)。 作 業(yè) 制作好的表格布局網(wǎng)頁。 知識點(diǎn)講解： 布局視圖方式 布局表格的基本操作 演 示 （ 1）切換視圖到布局視圖模式 （ 2） 繪制布局表格和布局單元格 （ 3） 選擇布局表格和布局單元格 （ 4） 調(diào)整布局表格和布局單元格的大小 （ 5） 移動布局單元格 （ 6） 設(shè)置布局表格和布局單元格的屬性 實(shí)訓(xùn) ： 制作布局表格的網(wǎng)頁 ，現(xiàn)場指導(dǎo)答疑 通過實(shí)訓(xùn) 使學(xué)生 掌握在 Dreamweaver 中繪制布局表格和單元格，了解設(shè)置布局表格的操作，學(xué)會在布局表格中插入文本和圖像的技巧等技能。 （ 1）制作一個國字型頁面版式。 （ 4）在“微星品牌主板”下面插入布局表格和布局單元格，然后在布局單元格中輸入文本，插入圖片。 能夠在 層與表格之間的相互轉(zhuǎn)換。 （ 2）應(yīng)用層布局網(wǎng)頁的特點(diǎn)：定位精確，插入靈活，加速瀏覽，可以疊加，通過控制層的顯示與隱藏，對層、行為、時間線的綜合使用，實(shí)現(xiàn)網(wǎng)頁的動畫效果。 方法 3：選定單個或多個層，使用鍵盤上的方向鍵也能移動圖層，每按下一次則移動一像素的距離。 （ 4） 分別 在 層 Layer Layer Layer Layer5 中輸入文字 “第 2個層”、“第 3 個層”、“第 4 個層”、“第 5 個層” 。 圖 1 圖 2 15 分鐘 30 分鐘 教學(xué)小結(jié) 本講主要學(xué)習(xí)了層的網(wǎng)頁布局方法，運(yùn)用層技術(shù)來對網(wǎng)頁進(jìn)行排版，可以很方便地制作出精美的網(wǎng)頁。 （ 1） 顯示框架邊框和框架面板 顯示框架邊框：菜單【查看】→【可視化助理】→【框架邊框】，使框架邊框在文檔窗口中可見。 （ 6） 設(shè)置框架集和框架的屬性 （ 7） 導(dǎo)入框架源文件 ①選中上方的框架，則在框架屬性面板中的“源文件”文本框中顯示的是框架文件的源文件地址。 （ 1）制作 1個 網(wǎng)頁，內(nèi)容為“歡迎來到 XX網(wǎng)站”的字樣 ，保存為 。 教學(xué)小結(jié) 本次課首先 介紹 了框架的概念與特點(diǎn)，再詳細(xì)講解了框架的創(chuàng)建、保存、屬性的設(shè)置等基本操作。 用戶測試 實(shí)訓(xùn)：將你的網(wǎng)站發(fā)布到互聯(lián)網(wǎng)上 根據(jù)所學(xué)知識，在 申請一個免費(fèi)域名，在虎翼網(wǎng)申請免費(fèi)空間，然后將你的網(wǎng)站發(fā)布上去，請其他同學(xué)瀏覽。 建立用于表格標(biāo)題文本的類樣式 建立實(shí)現(xiàn)特殊表格邊框效果的樣式 一個網(wǎng)站要發(fā)布在服務(wù)器上去，才能被他人瀏覽。 創(chuàng)建網(wǎng)站報告 任務(wù) 2： 申請免費(fèi)域名和空間 申請域名和空間目的： 在 Inter 安家的基礎(chǔ)。 作 業(yè) 上交你本次課的作品 第 9次課 網(wǎng)站測試、發(fā)布與維護(hù) 本次課標(biāo)題： 網(wǎng)站測試、發(fā)布 與 維護(hù) 授課班級 電廣系網(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) 能夠進(jìn)行 網(wǎng)站測試 能夠進(jìn)行 網(wǎng)站的維護(hù)與更新 網(wǎng)站測試的方法； 域名的設(shè)計與申請方法； 網(wǎng)站發(fā)布的方法 網(wǎng)站的維護(hù)與更新 能力訓(xùn) 練任務(wù) 及案例 任務(wù) 1：網(wǎng)站測試 任務(wù) 2：申請域名與空間 案例 1：在虎翼網(wǎng)申請免費(fèi)空間 案例 2：在 mycool 申請免費(fèi)域名 任務(wù) 3：發(fā)布網(wǎng)站 任務(wù) 4：網(wǎng)站宣傳與推廣 案例：讓百度收錄網(wǎng)站 教學(xué)方法 采用任務(wù)分解和邊講 邊練的方法 參考資料 《網(wǎng)頁設(shè)計三合一教程與上機(jī)實(shí)訓(xùn)》 網(wǎng)上素材 教學(xué)過程 課程導(dǎo)入 新課引入，明確本次課的任務(wù) 制作網(wǎng)頁之前要先創(chuàng)建站點(diǎn)，這樣做有什么優(yōu)點(diǎn)？ 一個網(wǎng)站制作完成后，在網(wǎng)站發(fā)布之前應(yīng)進(jìn)行嚴(yán)格的測試，以檢查各個超級鏈接是否正確，網(wǎng)頁腳本是否正確，文字、圖像顯示是否正常等。 （ 3） 制作 7 個網(wǎng)頁，內(nèi)容分別為烈士公園、岳麓山、橘洲公園、開福寺、天心閣、南郊公園、動物園 7 個景點(diǎn)的文字介紹，分別保存為、 、 、 、 、 、 （即拼音的第一個字母）。 （ 9） 設(shè)置超級鏈接 任務(wù) 2：制作 “上方固定”的 框架網(wǎng)頁 布置任務(wù)，說明制作要求。 （ 2）創(chuàng)建框架 5 分鐘 10 分鐘 20 分鐘 （ 3）選擇框架集和框架 ① 選擇框架集 方法 1：打開框架面板，然后在框架面板中單擊框架的外層邊框即可選中框架集。 在網(wǎng)頁中創(chuàng)建框架； 為框架命名并導(dǎo)入框架源文件； 保存框架集文件和各個框架操作文件； 設(shè)置框架集屬性和框架屬性； 編輯框架內(nèi)容； 設(shè)置超級鏈接。 實(shí) 訓(xùn)要點(diǎn)提示： （ 1）如果要移動層，必須選擇層；如果需要在層中插入圖像或輸入文字，則必須激活該層，層選擇狀態(tài)和激活狀態(tài)外觀上有一定的區(qū)別。如果需要將頁面中的某個對象貼合在窗口的左邊框或上邊框，只需要將該對象放置在層中，然后在層的“屬性”面板中設(shè)置“左”或“上”為 0 即多個層的對齊。 調(diào)整層的大?。? 方法 1：拖動法 5 分鐘 20 分鐘 方法 2： Ctrl 健和鍵盤上的方向鍵。 層的概念 。 （ 6）保存文件，預(yù)覽文件效果 。 （ 3）在表格中添加文字，完成整個頁面的制作。 新建一個網(wǎng)頁 文檔“ ” ， 利用布局表格布局 該網(wǎng)頁的頁面元素。 切換視圖； 繪制布局表格的方法； 繪制布局單元格、移動布局單元格的方法； 調(diào)整布局表格大小和布局單元格大小的方法； 布局表格和布局單元格的屬性設(shè)置。 （ 1）新建一個頁面，在頁面中插入一個 8 行 6 列的表