【文章內(nèi)容簡(jiǎn)介】 shop 的功能十分強(qiáng)大，是目前最為廣泛的專業(yè)圖形圖像處理軟件之一，它捆綁了 Image Ready，能夠?qū)崿F(xiàn)各種專業(yè)化的圖像處理、動(dòng)畫的制作等。有興趣的讀者可查閱相關(guān)的參考 書研究和學(xué)習(xí)。 Fireworks 是由 MacroMedia 公司出品的首選 WEB 圖形圖像處理軟件。它的獨(dú)特之處在于其能夠優(yōu)化處理大圖片、切割圖片、為圖片加入特殊效果、制作網(wǎng)頁的動(dòng)態(tài)行為等，可以生成 Fireworks HTML，直接導(dǎo)入到網(wǎng)頁中，使用非常方便。 （ 5）什么是動(dòng)畫 將一系列單幅畫面連續(xù)播放，使觀看者產(chǎn)生“動(dòng)”的錯(cuò)覺，這就是動(dòng)畫的原理。 計(jì)算機(jī)動(dòng)畫的原理與傳統(tǒng)動(dòng)畫基本相同，只是在傳統(tǒng)動(dòng)畫的基礎(chǔ)上把計(jì)算機(jī)技術(shù)用于動(dòng)畫的處理和應(yīng)用，并可以達(dá)到傳統(tǒng)動(dòng)畫所達(dá)不到的效果。計(jì)算機(jī)動(dòng)畫的關(guān)鍵技術(shù)體現(xiàn)在計(jì)算機(jī)動(dòng)畫 制作軟件及硬件上。 （ 6）網(wǎng)頁動(dòng)畫 根據(jù)運(yùn)動(dòng)的控制方式分類：實(shí)時(shí)動(dòng)畫、逐幀動(dòng)畫 根據(jù)應(yīng)用范圍、作用不同分類：頁面動(dòng)畫、專門動(dòng)畫 網(wǎng)頁動(dòng)畫設(shè)計(jì)與創(chuàng)意過程 （ 7）選擇合適的網(wǎng)頁動(dòng)畫制作工具 最常用的制作網(wǎng)頁動(dòng)畫的軟件為 Flash，其余還有 Fireworks、 Dreamweaver 等軟件附帶有簡(jiǎn)單動(dòng)畫制作功能。 Flash 是目前網(wǎng)頁制作中最為出色的動(dòng)畫制作軟件，它是一種交互式動(dòng)畫設(shè)計(jì)工具，用它可以將音樂、聲效、動(dòng)畫以及富有新意的界面融合在一起，以制作出高品質(zhì)的網(wǎng)頁動(dòng)態(tài)效果。 Flash 所使用的圖形是壓縮的矢量圖形， 采用了網(wǎng)絡(luò)流式媒體技術(shù)，突破了網(wǎng)絡(luò)帶寬的限制，可以邊下載邊播放，這樣避免用戶長(zhǎng)時(shí)間的等待， Flash 已經(jīng)慢慢成為網(wǎng)頁動(dòng)畫的標(biāo)準(zhǔn)，成為一種新興的技術(shù)發(fā)展方向。 二、任務(wù) 2：網(wǎng)頁基礎(chǔ)知識(shí)綜合實(shí)訓(xùn) 打開 IE 瀏覽器，然后： （ 1）輸入 163 網(wǎng)站的主頁。 （ 2）輸入 163 網(wǎng)站的主頁。 分析：查看這兩種方式打開的主頁是否一樣，并說明為什么會(huì)出現(xiàn)此類情況。 打開 網(wǎng)站，判斷哪些為 Flash 元素，哪些為圖片？將所有圖片保存下在“桌面”上的 PIC 文件夾內(nèi)（若沒有，請(qǐng)自行建立）。 分別以 1024*768 和 800*600 兩中分辨率瀏覽同一網(wǎng)站。操作步驟如下： （ 1）設(shè)置分辨率的方法：右鍵單擊桌面，選“屬性”選項(xiàng)，在“設(shè)置”選項(xiàng)卡的“屏幕分辨率”內(nèi)拖動(dòng)鼠標(biāo)選擇合適的分辨率。 （ 2）打開 IE 瀏覽器，輸入 分析：分辨率對(duì)網(wǎng)頁影響有多大，目前網(wǎng)站在設(shè)計(jì)時(shí)一般使用的分辨 45 分鐘 從 1820年英國(guó)人發(fā)明的第一個(gè)動(dòng)畫裝置，到本世紀(jì) 30年代 Walt Disney 電影制片廠生產(chǎn)的著名的米老鼠和唐老鴨，動(dòng)畫技術(shù)從幼稚走向了成熟。 率是多少？ 教學(xué)小結(jié) 一個(gè)頁面是否美觀，內(nèi)容是否吸引人，相關(guān)的圖片是必不可少的，若有需要，還可以加入一些動(dòng)畫，學(xué)習(xí)網(wǎng)頁圖片、動(dòng)畫的基礎(chǔ)知識(shí)，為后續(xù)課程學(xué)習(xí) Firework 和 Flash 打下基礎(chǔ)。 作 業(yè) 、 24 填空、判斷與選擇（做在書上） 第 3次課 安裝與使用 Dreamweaver 8，構(gòu)建和管理網(wǎng)站站點(diǎn) 湖南大眾傳媒職業(yè)技術(shù)學(xué)院 doc湖 南 大 眾 傳 媒 職 業(yè) 技 術(shù) 學(xué) 院 網(wǎng)頁設(shè)計(jì) 課 程教案授課班級(jí) 電廣 系網(wǎng)絡(luò)新聞 0601/2/34/56 電廣系技術(shù) 05 1 授課教師 歐陽煒昊 授課時(shí)間 208 年 下 學(xué)期 目錄第 1次課網(wǎng)暴膘擲中琢垮攔鶴緝搐摻琺冀燈傭稿蹤漚插映司續(xù)玻砂革哪棵刊御眠分辱掇塢鐵呢扶劇埠凹庶伐填沮蠱垃茍矮甩吻火潞進(jìn)誹拜馳詹壯恐笨輯啪排禁 本次課標(biāo)題： 安裝與使用 Dreamweaver 8，構(gòu)建和管理網(wǎng)站站點(diǎn) 授課班級(jí) 電廣系網(wǎng)絡(luò)新聞 0601/2/3/4/5/6 電廣系技術(shù) 051(五年制 ) 上課時(shí)間 2 課時(shí) 上課地點(diǎn) 實(shí)驗(yàn)樓 503 教 學(xué) 目 標(biāo) 能力 (技能 )目標(biāo) 知識(shí)目標(biāo) 能 夠利用 Dreamweaver 8 創(chuàng)建、管理站點(diǎn)； 能夠 創(chuàng)建頁面，在頁面中輸入文字； 能夠設(shè)置網(wǎng)頁頁面屬性。 熟悉 Dreamweaver 8 的啟動(dòng)、退出和其 工作界面； 掌握站點(diǎn)的創(chuàng)建、管理方法； 掌握站點(diǎn)結(jié)構(gòu)的基本構(gòu)成； 掌握網(wǎng)頁文件操作、屬性設(shè)置等。 能力訓(xùn) 練任務(wù) 及案例 任務(wù) 1：安裝 Dreamweaver 8，初步使用 任務(wù) 2：站點(diǎn)的創(chuàng)建與管理 任務(wù) 3：頁面的整體控制 任務(wù) 4：綜合實(shí)訓(xùn) 教學(xué)方法 采用任務(wù)分解和邊講邊練的方法 參考資料 《網(wǎng)頁設(shè)計(jì)三合一教程與上機(jī)實(shí)訓(xùn)》 網(wǎng)上 素材 教學(xué)過程 課程導(dǎo)入 復(fù)習(xí)提問 （ 1）矢量圖與位圖的區(qū)別是什么？ （ 2）網(wǎng)頁中流行的圖片格式有哪些？你應(yīng)該在什么情況下運(yùn)用什么類型的圖片格式？ （ 3）常見的網(wǎng)頁圖片、動(dòng)畫制作軟件有哪些？ 新課引入，明確本次課的任務(wù) 知識(shí)技能目標(biāo)說明： 介紹本次課要掌握的知識(shí)能力目標(biāo)。 一、任務(wù) 1：安裝 Dreamweaver 8，初步使用 簡(jiǎn)要介紹 Dreamweaver8 及其工作環(huán)境和幫助系統(tǒng)，然后要求學(xué)生完成下列操作： （ 1）在網(wǎng)上下載 Dreamweaver 8，根據(jù)安裝向?qū)У闹甘具M(jìn)行安裝。 （ 2）啟動(dòng) Dreamweaver 8，認(rèn)識(shí) Dreamweaver 8 的工作環(huán)境。 （ 3）在 Dreamweaver 8 主窗口中觀察其各個(gè)菜單、工具欄、面板的組成。 （ 4）網(wǎng)頁文檔的基本操作：創(chuàng)建、打開、關(guān)閉網(wǎng)頁文檔 （ 5）利用 Dreamweaver 8 的幫助，查找有關(guān)“層”的內(nèi)容，請(qǐng)分別利用“目錄”、“索引”、“搜索”三種途徑完成。 5 分鐘 二、任務(wù) 2：站點(diǎn)的創(chuàng) 建與管理 認(rèn)識(shí)了 Dreamweaver 8 的工作環(huán)境之后，接下來將要邁出制作網(wǎng)頁的第一步了。無論是網(wǎng)頁制作的新手，還是專業(yè)的網(wǎng)頁設(shè)計(jì)師，都要從構(gòu)建站點(diǎn)開始，理清網(wǎng)站結(jié)構(gòu)。 任務(wù)演示 （ 1）創(chuàng)建一個(gè)命名為“長(zhǎng)沙世界之窗”的網(wǎng)站，該網(wǎng)站保存在本地硬盤的文件夾“旅游網(wǎng)站”中。 （ 2）在站點(diǎn)“長(zhǎng)沙世界之窗”中創(chuàng)建文件夾“ 00 創(chuàng)建站點(diǎn)”，在文件夾“ 00 創(chuàng)建站點(diǎn)”創(chuàng)建子文件夾“ image”、“ music”。 （ 3）在文件夾“ 00 創(chuàng)建站點(diǎn)”中新建一個(gè)命名為“ ”空白網(wǎng)頁。 知識(shí)講解： （ 1）站點(diǎn)的創(chuàng)建 ：認(rèn)識(shí)“文件”面板，創(chuàng)建本地站點(diǎn) （ 2）站點(diǎn)管理：切換、編輯、復(fù)制、刪除、導(dǎo)入站點(diǎn) （ 3）管理網(wǎng)站中的文件和文件夾：創(chuàng)建文件夾和文件、移動(dòng)和復(fù)制文件、重命名文件夾和文件、刪除文件夾和文件。 （ 4）用案例介紹本地站點(diǎn)的創(chuàng)建方法 學(xué)生實(shí)訓(xùn)： （ 1）創(chuàng)建一個(gè)命名為“課堂實(shí)踐”的靜態(tài)網(wǎng)站，該網(wǎng)站的所有文件存儲(chǔ)在本機(jī)上 E 盤的“ ClassroomPractise”文件夾中。 （ 2）在“文件面板”的站點(diǎn)根目錄下創(chuàng)建一個(gè)文件夾“ 00 創(chuàng)建站點(diǎn)”。 （ 3）在文件夾“ 00 創(chuàng)建站點(diǎn)”中創(chuàng)建三個(gè)子文件夾“ image”、“ music”和“ text”。 （ 4）在文件夾“ 00 創(chuàng)建站點(diǎn)”中創(chuàng)建一個(gè)命名為“ ”的網(wǎng)頁文檔。 （ 5）將所需的圖像文件和音樂文件分別復(fù)制到“ image”和“ music”文件夾中。 根據(jù)學(xué)生實(shí)訓(xùn)情況作出點(diǎn)評(píng)、講解 拓展知識(shí)： （ 1）使用“資源”面板管理網(wǎng)站中的資源：使用“資源”面板，在頁面中使用資源 （ 2）選擇和編輯資源 （ 3）頁面的屬性設(shè)置 思考： （ 1）在 “文件”面板中，選擇一個(gè)已創(chuàng)建的文件夾或文件，然后單擊右鍵會(huì)彈出一個(gè)快捷菜單，鼠標(biāo)指針指向“編輯”菜單項(xiàng)，會(huì)顯示其級(jí)聯(lián)菜單，該級(jí)聯(lián)菜單 包括了“拷貝”和“復(fù)制”兩個(gè)菜單項(xiàng)，這兩個(gè)菜單項(xiàng)有何區(qū)別呢？ （ 2）在“資源”面板中如何改變資源排列的次序？ 三、任務(wù) 3：頁面的整體控制 開始學(xué)習(xí)如何設(shè)置網(wǎng)頁的整體頁面屬性。 知識(shí)講解： （ 1）參數(shù)設(shè)置：參數(shù)設(shè)置方法舉例 5 分鐘 10 分鐘 15 分鐘 5 分鐘 2 分鐘 3 分鐘 5 分鐘 （ 2）設(shè)置頁面屬性：外觀屬性，鏈接屬性，標(biāo)題屬性，標(biāo)題 /編碼屬性，跟蹤圖像 （ 3）設(shè)置文件頭內(nèi)容 在“設(shè)計(jì)”視圖中顯示“文件頭內(nèi)容”工具欄 設(shè)置文件頭內(nèi)容的方法 （ 4）輔助工具的使用：配置窗口大小，使用標(biāo)尺、網(wǎng)格、輔助線 學(xué)生實(shí)訓(xùn)： 操作要求：打開“課堂實(shí)踐”站點(diǎn)文 件夾“ 01 頁面控制”下的網(wǎng)頁文檔“ ”，然后完成以下各項(xiàng)的操作。 （ 1）首選參數(shù)的設(shè)置要求 設(shè)置啟動(dòng) Dreamweaver 8 時(shí)顯示起始頁；設(shè)置站點(diǎn)屬性“總是顯示本地文件于左”；創(chuàng)建網(wǎng)頁文檔時(shí)，設(shè)置默認(rèn)文檔為“ HTML”文檔，設(shè)置默認(rèn)擴(kuò)展名為“ .html”；設(shè)置“復(fù)制 /粘貼”屬性：使用“編輯 粘貼”從其他應(yīng)用程序粘貼到設(shè)計(jì)視圖時(shí)，復(fù)制“帶結(jié)構(gòu)的文本”，不清理 Word 段落間距。 （ 2）頁面屬性的設(shè)置要求 外觀屬性的設(shè)置：“頁面字體”采用“默認(rèn)字體”，“大小”采用“ 12px”；“背景圖像”選用 image 文件夾下的“ ”；“左邊距”和“右邊距”設(shè)置為“ 100px”，“上邊距”和“下邊距”設(shè)置為“ 20px”。 鏈接屬性的設(shè)置要求：網(wǎng)頁中超鏈接文本默認(rèn)狀態(tài)下的字體設(shè)置為“宋體”，字體大小設(shè)置為 14px；網(wǎng)頁中超鏈接文本的顏色設(shè)置為“ blue”，訪問過的超鏈接的顏色設(shè)置為“ olive”；當(dāng)鼠標(biāo)指針移動(dòng)到網(wǎng)頁中超鏈接文字上方時(shí)超鏈接的顏色設(shè)置為“ maroon”，下劃線樣式設(shè)置為“變換圖像時(shí)隱藏下劃線”；網(wǎng)頁中已激活的超鏈接文本顏色設(shè)置為“ fuchsia”。 標(biāo)題屬性的設(shè)置要求：設(shè)置網(wǎng)頁 中標(biāo)題的字體為“隸書”，標(biāo)題 1的大小為“ 18px”，顏色為“ aqua”。 “ 標(biāo)題 /編碼”屬性的設(shè)置要求：網(wǎng)頁的標(biāo)題設(shè)置為“湘江谷”；文檔類型設(shè)置為“ HTML Transitional”，編碼設(shè)置為“簡(jiǎn)體中文(GB2312)”。 根據(jù)學(xué)生實(shí)訓(xùn)情況作出點(diǎn)評(píng)、講解 四、 任務(wù) 4： 綜合實(shí)訓(xùn) 分析實(shí)訓(xùn)任務(wù) 準(zhǔn)備素材：作為網(wǎng)頁背景的圖片文件 1個(gè)（ JPG格式，重命名為 ），作為網(wǎng)頁背景音樂的 MP3 文件 1 個(gè)。 （ 1） 在 E 盤中你的個(gè)人文件夾下新建文件夾 root，并在該文件夾中新建 image 文件夾以 存放網(wǎng)站中所要用到的圖片。 （ 2）定義站點(diǎn)：設(shè)置 站點(diǎn)名稱 ，命名為 我的網(wǎng)站 。設(shè)置本地根文件夾 ,指定為 E盤下的 root文件夾 。設(shè)置 HTTP地址 為 localhost。 （ 3） 創(chuàng)建與設(shè)置文檔的頁面屬性： 新建一個(gè)頁面，設(shè)置文檔頁面屬性：標(biāo)題設(shè)置為 我的班級(jí) ，背景圖像設(shè)置為 image\ 圖像，左邊界、邊界寬帶、頂部邊界以及邊界高度分別設(shè)置為 20。 （ 4） 設(shè)置頁面中文字的字體、字體大?。哼x擇文字部分，在屬性面板設(shè)置字體及字體的大小。 20 分鐘 20 分鐘 （ 5） 添加背景音樂：為整個(gè)頁面添加一個(gè)背景音樂。在代碼 視圖下在body和 /body之間如下添加代碼： embed src= hidden=true autostart=true。 （ 6） 保存文件，預(yù)覽文件效果。 實(shí)訓(xùn)過程注意事項(xiàng) ： 在創(chuàng)建站點(diǎn)的過程中注意建立本地文件夾，文件夾命名最好為英文；網(wǎng)站中所有的文件最好取名為英文；注意文件的路徑；所有的圖片文件單獨(dú)放在 image 文件夾內(nèi)。背景音樂必須放在站點(diǎn)文件內(nèi)。 學(xué)生完成實(shí)訓(xùn)任務(wù)，老師現(xiàn)場(chǎng)指導(dǎo)、答疑。 對(duì)學(xué)生實(shí)訓(xùn)完成情況進(jìn)行階段性講解、說明共性問題的解決方法。 教學(xué)小結(jié) 本次課 重點(diǎn)學(xué)習(xí)了如何創(chuàng)建站點(diǎn)和管理站點(diǎn)，同時(shí)也分析了網(wǎng)頁文檔的基本操作和“資源”面板、“文件”面板的使用方法。這些操作都是最基本的操作，熟練掌握將會(huì)有助于以后網(wǎng)頁的制作。 通過學(xué)習(xí)設(shè)置首選參數(shù)、頁面屬性、文件頭內(nèi)容，輔助工具的使用。掌握從外觀上對(duì)頁面進(jìn)行有效控制