【正文】 第 10次課 使用 CSS 美化網(wǎng)頁(yè) 本次課標(biāo)題： 使用 CSS 美化網(wǎng)頁(yè) 授課班級(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) 能夠 利用 CSS 來(lái)美化頁(yè)面 CSS 樣式表的基本語(yǔ)法和定義位置 標(biāo)簽樣式、高級(jí)樣式、類樣式的定義方法 樣式的編輯方法 能力訓(xùn) 練任務(wù) 及案例 任務(wù)：學(xué)習(xí) CSS 的使用 實(shí)訓(xùn)：使用 CSS 美化網(wǎng)頁(yè) 教學(xué)方法 采用任務(wù)分解和邊講邊練的方法 參考資料 《網(wǎng)頁(yè)設(shè)計(jì)三合一教程與上機(jī)實(shí)訓(xùn)》 網(wǎng)上素材 教學(xué)過(guò)程 課程導(dǎo)入 新課引入，明確本次課的任務(wù) 怎樣能讓網(wǎng)頁(yè)在各種平臺(tái)上都能夠正常顯示？這就要使用 CSS 樣式。有收費(fèi)形式的，也有免費(fèi)形式的。 知識(shí)技能目標(biāo)說(shuō)明： 介紹本次課要掌握的知識(shí)能力目標(biāo)。 （ 5） 將框架 的邊框都設(shè)置為 為 0， 各個(gè)框架的源文件網(wǎng)頁(yè)必須設(shè)置居中對(duì)齊，以保證整個(gè)框架在瀏覽時(shí)是居中對(duì)齊。 25 分鐘 對(duì)于包括 3 個(gè)框架的網(wǎng)頁(yè)，保存時(shí)共有 4個(gè)文件， 1個(gè)是框架集文件，另外 3 個(gè)是框架文件。 ② 選擇框架 方法 1：打開框架面板，然后在框架面板中單擊要選擇的框架即可選中單個(gè)框架。 知識(shí)技能目標(biāo)說(shuō)明： 介紹本次課要掌握的知識(shí)能力目標(biāo)。 思考 （ 1） 在頁(yè)面中有多個(gè)層，如何將它們對(duì)齊？ （ 2） 對(duì)于網(wǎng)頁(yè)中多個(gè)嵌套的層，如何更改層的疊放順序？ 20 分鐘 針對(duì)學(xué)生的操作和某些共性問(wèn)題進(jìn)行點(diǎn)評(píng)。 （ 6）在層中輸入文本和插入對(duì)象 （ 7）層和表格的相互轉(zhuǎn)換 二 、 任務(wù) 2： 實(shí)訓(xùn) ： 練習(xí) 層 的操作 通過(guò)實(shí)訓(xùn) 讓學(xué)生 掌握如何利用層來(lái)布局網(wǎng)頁(yè)，掌握層的插入，設(shè)置層的各項(xiàng)屬性。 方法 3： Ctrl+Shift 組合鍵的同時(shí)使用鍵盤上的方向鍵來(lái)，每按一次方向鍵可在相應(yīng)的方向上調(diào)整一個(gè)網(wǎng)格單元的大小。 能力訓(xùn) 練任務(wù) 及案例 任務(wù) 1：層的基本操作 任務(wù) 2：實(shí)訓(xùn)：練習(xí)層的操作 任務(wù) 3： 實(shí)訓(xùn)：用層布局網(wǎng)頁(yè)制作文本和圖片混排的網(wǎng)頁(yè) 教學(xué)方法 采用任務(wù)分解和邊講邊練的方法 參考資料 《網(wǎng)頁(yè)設(shè)計(jì)三合一教程與上機(jī)實(shí)訓(xùn)》 網(wǎng)上素材 教學(xué)過(guò)程 課程導(dǎo)入 復(fù)習(xí)提問(wèn) 布局表格中的間隔圖像有什么作用？ 新課引入，明確本次課的任務(wù) 層是制作網(wǎng)頁(yè)時(shí)經(jīng)常用到的對(duì)象，在控制頁(yè)面布局方面，層要比表格更加的靈活，層體現(xiàn)了網(wǎng)頁(yè)技術(shù)從二維空間向三維空間的一種延伸，也是一種新的發(fā)展方向。使用布局視圖制作網(wǎng)頁(yè)就像畫畫一樣輕松。 在站點(diǎn)中新建一個(gè)網(wǎng)頁(yè)文檔“ ”。 （ 2） 在布局表格 B 中繪制 1 個(gè)布局單元格，在布局表格 C 中繪制 6 個(gè)布局單元格。 知識(shí)技能目標(biāo)說(shuō)明： 介紹本次課要掌握的知識(shí)能力目標(biāo)。 （ 3）根據(jù)要求對(duì)部分單元格進(jìn)行拆分或合并操作。 （ 6）在表格的單元格中輸入文字。靈活地使用表格的背景、框線等屬性可以得到更加美觀的效果。 20 分鐘 教學(xué)小結(jié) 通過(guò)本次課的學(xué)習(xí)，我們要熟練掌握鍵入普通文本、特殊字符和插入日期的方法；了解項(xiàng)目列表和編 號(hào)列表，并能更改列表屬性，熟練掌握對(duì)文本屬性和段落屬性的設(shè)置，掌握在頁(yè)面上插入普通圖像、設(shè)置圖像的屬性、調(diào)整圖像的位置及大小，尤其是在圖文混排時(shí)，要能夠很好地將它們對(duì)齊。然后在網(wǎng)頁(yè)中插入這四幅圖像，具體操作要求如下： （ 1）所有圖片的“替換文本”分別為“衡山景觀之一”，“衡山景觀之二”，“衡山景觀之三”，“衡山景觀之四”。有黃庭觀，傳為晉天師道女祭酒魏華存修道處。它位于鎮(zhèn)的東街，與山上的南臺(tái)寺 、福嚴(yán)寺、上封寺和衡山城外的清涼寺等，合稱為南岳六大佛教叢林。 南岳還是著名的佛教圣地。 2020 年 8 月 1 日，南岳衡山經(jīng)國(guó)務(wù)院批準(zhǔn)列為國(guó)家級(jí)自然保護(hù)區(qū)。文字內(nèi)容 附后 。 掌握 在網(wǎng)頁(yè)中 文本和圖像操作的基本方法； 了解插入圖像占位符的方法。 學(xué)生完成實(shí)訓(xùn)任務(wù)，老師現(xiàn)場(chǎng)指導(dǎo)、答疑。設(shè)置 HTTP地址 為 localhost。 （ 2）頁(yè)面屬性的設(shè)置要求 外觀屬性的設(shè)置：“頁(yè)面字體”采用“默認(rèn)字體”，“大小”采用“ 12px”；“背景圖像”選用 image 文件夾下的“ ”；“左邊距”和“右邊距”設(shè)置為“ 100px”，“上邊距”和“下邊距”設(shè)置為“ 20px”。 （ 4）用案例介紹本地站點(diǎn)的創(chuàng)建方法 學(xué)生實(shí)訓(xùn)： （ 1）創(chuàng)建一個(gè)命名為“課堂實(shí)踐”的靜態(tài)網(wǎng)站，該網(wǎng)站的所有文件存儲(chǔ)在本機(jī)上 E 盤的“ ClassroomPractise”文件夾中。 （ 3）在 Dreamweaver 8 主窗口中觀察其各個(gè)菜單、工具欄、面板的組成。操作步驟如下： （ 1）設(shè)置分 辨率的方法：右鍵單擊桌面，選“屬性”選項(xiàng)，在“設(shè)置”選項(xiàng)卡的“屏幕分辨率”內(nèi)拖動(dòng)鼠標(biāo)選擇合適的分辨率。 （ 6）網(wǎng)頁(yè)動(dòng)畫 根據(jù)運(yùn)動(dòng)的控制方式分類：實(shí)時(shí)動(dòng)畫、逐幀動(dòng)畫 根據(jù)應(yīng)用范圍、作用不同分類：頁(yè)面動(dòng)畫、專門動(dòng)畫 網(wǎng)頁(yè)動(dòng)畫設(shè)計(jì)與創(chuàng)意過(guò)程 （ 7）選擇合適的網(wǎng)頁(yè)動(dòng)畫制作工具 最常用的制作網(wǎng)頁(yè)動(dòng)畫的軟件為 Flash，其余還有 Fireworks、 Dreamweaver 等軟件附帶有簡(jiǎn)單動(dòng)畫制作功能。 （ 4）選擇合適的網(wǎng)頁(yè)圖片處理工具 目前常用的圖形和圖像處理工具主要是 Adobe 公司出品的著名的圖形圖像處理軟件： Photoshop 和 MacroMedia 公司推出的 Fireworks（ MacroMedia 公司也已被 Adobe 公司收購(gòu)）。 一、任務(wù) 1：認(rèn)知網(wǎng)頁(yè)圖片和動(dòng)畫 讓學(xué)生瀏覽一些網(wǎng)頁(yè)，將認(rèn)為不錯(cuò)的圖片保存下來(lái)。 根據(jù)學(xué)生寫的情況引出知識(shí)點(diǎn)： （ 1）網(wǎng)站開發(fā)流程：前期準(zhǔn)備 中期設(shè)計(jì)開發(fā) 后期維護(hù) （ 2）選擇合適的網(wǎng)頁(yè)制作工 具 標(biāo)記型： notepad(記事本 )， Ultraedit 所見(jiàn)即所得型： Frontpage， Dreamweaver 其他： 圖像處理工具： Photoshop、 Firework 動(dòng)畫制作工具： Flash、 Swish 圖標(biāo)制作工具：小榕圖標(biāo)編輯器、超級(jí)圖標(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)容的存儲(chǔ)空間模式，它像一個(gè)放置信息的“柜子”，有著很多“格子”和“抽屜”，網(wǎng)站還是信息空間的外包裝，是“柜子”本身。 （ 2） URL 格式：協(xié)議名： //主機(jī)名 [/文件夾名 /文件名 常用的協(xié)議名如下： HTTP：超文本傳輸協(xié)議，用于轉(zhuǎn)換網(wǎng)頁(yè)。 信息是網(wǎng)站核心，是網(wǎng)站設(shè)計(jì)的依據(jù)，分析和理解信息內(nèi)容是 設(shè)計(jì)的起點(diǎn)也是終點(diǎn)。設(shè)計(jì)網(wǎng)頁(yè)并不是一個(gè)十分復(fù)雜的過(guò)程，但是想要設(shè)計(jì)出合理而精美的網(wǎng)頁(yè)作品，需要經(jīng)過(guò)嚴(yán)謹(jǐn)?shù)睦硇苑治?、敏銳的觀察，以及感性的審美與創(chuàng)意技巧。 Web 是一種基于超文本（ Hypertext）方式的信息檢索 10 分鐘 20 分鐘 15 分鐘 服務(wù)技術(shù)， 它由遍布在 Inter 上的稱為 Web 服務(wù)器的計(jì)算機(jī)組成，并將不同的信息資源有機(jī)地組織在一起，統(tǒng)一放在一個(gè)單一的 Web 網(wǎng)中。 二、任務(wù) 2：寫一個(gè)簡(jiǎn)單的網(wǎng)站規(guī)劃 學(xué)生先寫，要求有：網(wǎng)站名稱、主要欄目、制作分工、制作日程等。 知識(shí)技能目標(biāo)說(shuō)明： 介紹本次課要掌握的知識(shí)能力目標(biāo)。 （ 3）圖片插入網(wǎng)頁(yè)注意事項(xiàng)： JPEG 和 GIF 圖像的選擇，標(biāo)記圖像的大小，對(duì)大幅圖像的處理，巧妙使用“同一圖像”，善用圖像，控制圖像數(shù)量。計(jì)算機(jī)動(dòng)畫的關(guān)鍵技術(shù)體現(xiàn)在計(jì)算機(jī)動(dòng)畫制作軟件及硬件上。 分別以 1024*768 和 800*600 兩中分辨率瀏覽同一網(wǎng)站。 （ 2）啟動(dòng) Dreamweaver 8，認(rèn)識(shí) Dreamweaver 8 的工作環(huán)境。 知識(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ù)制文件、重命名文件夾和文件、刪除文件夾和文件。 （ 1）首選參數(shù)的設(shè)置要求 設(shè)置啟動(dòng) Dreamweaver 8 時(shí)顯示起始頁(yè)；設(shè)置站點(diǎn)屬性“總是顯示本地文件于左”；創(chuàng)建網(wǎng)頁(yè)文檔時(shí)，設(shè)置默認(rèn)文檔為“ HTML”文檔，設(shè)置默認(rèn)擴(kuò)展名為“ .html”；設(shè)置“復(fù)制 /粘貼”屬性：使用“編輯 粘貼”從其他應(yīng)用程序粘貼到設(shè)計(jì)視圖時(shí)，復(fù)制“帶結(jié)構(gòu)的文本”，不清理 Word 段落間距。設(shè)置本地根文件夾 ,指定為 E盤下的 root文件夾 。背景音樂(lè)必須放在站點(diǎn)文件內(nèi)。 作 業(yè) 課堂作業(yè)： 填空、判斷與選擇（做在書上） 第 4次課 文本和圖像操作 本次課標(biāo)題：文本和圖像操作 授課班級(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) 能在網(wǎng)頁(yè)中進(jìn)行文本的各項(xiàng)操作 ： 輸入和編 輯文本、輸入空格、文本換行、插入水平線、插入日期； 能對(duì)網(wǎng)頁(yè)文本進(jìn)行格式化； 能 插入圖像、設(shè)置圖像屬性； 能進(jìn)行圖像與文本混合編排。 （ 4）文本的格式化：用文本屬性面板設(shè)置網(wǎng)頁(yè)中文本的格式 學(xué)生實(shí)訓(xùn) （ 1）輸入文本：在“旅游網(wǎng)站 ”網(wǎng)站中新建文件夾“文本操作”，在其中新建網(wǎng)頁(yè)文檔“ ”，輸入標(biāo)題“南岳衡山”，然后輸入正文內(nèi)容。 1982 年，衡山作為我國(guó)著名的自然景觀和人文景觀，以湖南衡山風(fēng)景名勝區(qū)的名義，被國(guó)務(wù)院批準(zhǔn)列入第一批國(guó)家級(jí)風(fēng)景名勝區(qū)名單。如果人們從京廣鐵路乘火車，則于衡山站下車，再轉(zhuǎn)乘 汽車，只有 15 千米的路程，便可以飽覽南岳的風(fēng)光。在南岳古鎮(zhèn)，還有一座佛教古寺 —— 祝圣寺。山有七十二峰，以祝融 ﹑ 紫蓋 ﹑ 芙蓉 ﹑ 石廩 ﹑ 天柱五峰為著，祝融又為之冠。 基本操作演示 （ 1）圖像操作：插入圖像，設(shè)置圖像屬性，編輯圖像 （ 2）插入相關(guān)圖像元素 ：插入導(dǎo)航條 學(xué)生實(shí)訓(xùn) 在“旅游網(wǎng)站”網(wǎng)站中創(chuàng)建文件夾“圖像操作”，在該文件夾下創(chuàng)建網(wǎng)頁(yè)文檔“ ”，在網(wǎng)上找 4 張 jpg 格式的衡山 景點(diǎn)圖片 存到 該文件夾下。 （ 3）網(wǎng)頁(yè)中有幾種方式的換行：自行換行；按 ENTER 強(qiáng)行換行；按 SHIFT+ENTER 換行操作。 表格是常用的頁(yè)面元素，制作網(wǎng)頁(yè)經(jīng)常要借助表格進(jìn)行排版，在網(wǎng)頁(yè)布局方面，表格可謂起著舉足輕重的作用，通過(guò)設(shè)置表格以及單元格的屬性，對(duì)頁(yè)面中的元素進(jìn)行準(zhǔn)確定位，表格能夠有序地排列數(shù)據(jù)又能對(duì)頁(yè)面進(jìn)行更加合理的布局。 （ 5）在表格的不同單元格中插入多幅圖像。 （ 2）選擇表格利用“格式化表格”命令來(lái)對(duì)表格格式進(jìn)行修改，使其更美觀。 能力訓(xùn) 練任務(wù) 及案例 任務(wù)：布局表格的基本操作 實(shí)訓(xùn)：制作布局表格的網(wǎng)頁(yè) 教學(xué)方法 采用任務(wù)分解和邊講邊練的方法 參考資料 《網(wǎng)頁(yè)設(shè)計(jì)三合一教程與上機(jī)實(shí)訓(xùn)》 網(wǎng)上素材 教學(xué)過(guò)程 課程導(dǎo)入 復(fù)習(xí)提問(wèn) 表格中單元格的邊距與間距有何區(qū)別？ 新課引入，明確本次課的任務(wù) 通過(guò)學(xué)習(xí)文本布局網(wǎng)頁(yè)、圖像布局網(wǎng)頁(yè)、表格布局網(wǎng)頁(yè)， 可看出頁(yè)面布局非常重要，本次將主要學(xué)習(xí) Dreamweaver 提供的布局工具布局表格。 （ 1） 繪制一個(gè)較大的布局表格 A，然后在布局表格 A 中再繪制兩個(gè)