網頁中插入圖片
第5課、網頁中加入圖片 本課時教學目的和要求 1、學會在網頁中添加合適的圖像，豐富網頁中的信息。 2、培養學生的美感。 本課時教學重點和難點：1、在網頁中插入圖像。 2、網頁中圖像屬性的設置。 教學過程 欣賞作品 學生欣賞兩張教師提前制作好的網頁：一張全文本，一張插入了美麗的圖像。 學生說說當你看了這兩張網頁后，你的感覺如何？ 學生： 純文本的網頁過于單調，而在文本的基礎上，向網頁中添加一些色彩絢麗的 圖片，產生圖文并茂的顯示效果，頁面就會更加生動、富有吸引力。 導入 新課 由學生的回答，導入 新課（板書課題） 復習舊知 1、你還記得以前在POWERPOINT97和WPS2000中如何插入圖片。 2、上學期我們學過的多媒體的制作中， A、圖片獲得的途徑有哪些？ 自行繪制、數碼相機拍攝、掃描儀掃描、網上下載、抓圖軟件抓取。 B、用哪個軟件可以對圖片進行簡單的處理？ C、用什么軟件進行瀏覽圖片？ 講授新課 一、出示任務 1、[出示任務] 在保護動物網頁中加入圖片。 2、[分析任務] 板書 A、打開網站 B、插入圖片（尋找圖片路徑） C、修飾圖片 D、保存網頁 二、學生帶著問題看書上機操作，完成任務 首先觀察：狀態欄中的傳輸速率和時間，時間為0，說明無圖片，加入圖片后再觀察數值。（圖片下載時間）同時思考問題，以便回答： 1、 在的方法； 2、 在網頁中使用的圖像格式有哪些？ 3、 可對圖片進行哪些屬性的調整。 &強調 A、出現問題，舉手詢問； B、看書時，先大概瀏覽課本，通過標號了解本節主要知識點，然后在仔細閱讀，會的地 方不必細看，難處仔細推敲。 C、保存網頁時注意圖片的保存位置。 三、學生回答，教師講解重點 1、的格式 A、 GIF---最高支持256色，無損壓縮，可增加動畫效果。 B、 JPGE---可存取1600萬種顏色，采用有損壓縮方式，壓縮率較大，圖片相對教小。 C、PNG----支持真彩色，采用無損壓縮 D、其它：BMP 、PCX、RAS、EPS、PCD、WMF 注意：如果圖片不是GIF或JPG格式，那么保存網頁時，使用256色或更少顏色的圖片 會自動被轉為GIF格式，其它所有圖片轉為JPG格式。 若插入的是動畫，在瀏覽器下才能看到動態效果。 說明：雖然PNG有許多優點，但目前網頁中使用最多的仍然是GIF和JPGE兩種格式。其它圖片 最好轉換成這兩種格式后再插入網頁中。那么在網頁中到底采用哪一種呢？其實，每一種 格式都有它的優點。GIF格式的圖片由于只能包含最多256種顏色，所以適合保存那些一 文字為主、包含顏色數目教少的圖片，而JPGE適合保存顏色數目最大的照片、海報等圖 片。 總之，色彩鮮艷高分辨率的用JPG格式，色彩單調低分辨率的用GIF格式。 2、網頁中添加圖片應考慮的問題： 要想使圖片達到最佳效果，并不是一件容易的事，大家往往喜歡在網頁上添加很多的圖像，造 成網頁頁面雜亂，主題不突出。其實網頁中的圖像不是越多越好。網頁中添加圖像時首先要考 慮到以下問題： A、用圖像來達到什么目的？ B、什么樣的圖片最合適達到這些目的？ C、將插入的圖像有多大？ 網頁中使用的圖片不要太大，一般情況最好單張不要超過25-30K，每頁圖片總量不要超過60K這樣站用的磁盤空間較少，網上傳輸時間較短。 網頁設計有“30秒40K”的原則，即瀏覽網頁時，30秒內若無法讀取40K以上的資料，面對空蕩蕩的屏幕，瀏覽者往往想終止讀取。 D、這些圖像放在網頁的什么位置最好？ 3、改變圖像的屬性 設置方法： 右擊圖片―選擇圖片屬性，在圖片屬性對話框中設置 教師演示以下方法： A、改變大小 B、設置對齊方式 C、給圖像加邊框 D、更換圖片 4、圖片處理 A、剪裁圖像 B、調整對比度/亮度 C、刪除圖片 D、在圖片上寫文字 說明：只有GIF圖片可寫文字，所以JPGE文件上加文字，計算機先提示是否轉變為GIF文件 E、圖片的定位與圖層的形成 [提問] 同學們有沒有發現我們選中圖片后,出現了什么？ [學生回答]又出現了一個工具欄。 [總結] 對了，我們選中圖片后會出現“圖片工具欄”。我們以下對圖片的處理就是利用“圖片工具欄”來實現。 [演示] 我們選中圖片，然后單擊工具欄上的“絕對定位”按鈕。現在我們會發現，圖片已不在一行文字之間，它可以讓我們隨意移動了。 同樣，我們還可以利用“圖片工具欄”對圖片進行圖層處理，實現圖片的疊放。 現在我們插入兩個圖片，選中第一個圖片，然后選擇“圖片工具欄”上的“上移一層”按鈕。這樣我們就可以實現兩圖片的疊放了。 [講解] 我們插入圖片后還希望它更美觀，同樣，我們的“圖片工具欄”也提供了這樣的效果。我們可以把圖片上的任意顏色設置為透明色 F、圖片的透明處理 [演示]選中圖片，單擊“圖片工具欄”上的“設置透明的顏色”按鈕。 我們看到指針變成了小魔棒形狀，單擊我們需要把它變成透明的白色，就產生了透明效果。 4、保存網頁 保存時對嵌入式圖片應Images文件夾中，已防止文件夾中的文件凌亂。 四、學生上機操作，完成任務。 鞏固練習 利用今天學習的知識制作班級網站的真正主頁，取名為“index”開始做那張主頁改 名為 “index1”。 課堂小結 本節主要講了如何向以及對圖片屬性的調整。 布置作業 無作業 板書設計 : 第5課、網頁中加入圖片 一、插入圖片
二、改變圖片屬性 三、圖片處理 A、裁剪圖片 四、保存網頁:圖片保存位置的選擇 |