【文章內(nèi)容簡介】 本的排版作用，選擇快捷工具欄的“ HTML”項，單擊 HTML 欄的第一個按鈕 ，即可向網(wǎng)頁 23 做一做 中插入水平線。選中插入的這條水平線，可以在屬性面板對它的屬性進行設(shè)置。 插入時間，在文檔編輯窗口中，將鼠標光標移動到要插入日期的位置，單擊常用插入欄的“日期”按鈕，在彈出的“插入日期”對話框中選擇相應的格式即可。 試完成下列文字的輸入： 1）最好只使用系統(tǒng)自帶的四種字體，常用 宋體 。 2）字體大小。通常我們用 12px 大小的。 3）字體的修飾，包括正常和 斜體 。 4）字體的行間距， 一般 行距為字體大小的 倍。 5）：設(shè)置對象中文本的裝飾，分別有 下劃線 、上劃線、 刪除線 、閃爍。 6） 字 體 顏 色 。 評價內(nèi)容 自評 互評 師評 評一評 同學們，本節(jié)課你的表現(xiàn)怎樣呢？快來評一評吧？ 24 第五課 插入圖像 合作探究 知識掌握 學習態(tài)度 發(fā)現(xiàn)思考 學習效果 注： 評價時用 “☆ ”表示，優(yōu)是 3 個 “☆ ”，良是 2 個 “☆ ”，達標是 1 個 “☆ ” 看一看 25 目前互聯(lián)網(wǎng)上支持的圖像格式主要有 GIF、 JPEG 和 PNG。其中使用最為廣泛的是 GIF 和 JPEG。 那么我們 如何給網(wǎng)站加上圖片讓網(wǎng)站看起來更漂亮呢，我們一起來做吧！ 插入圖像 在制作網(wǎng)頁時，先構(gòu)想好網(wǎng)頁布局，在圖像處理軟件中將需要插入的圖片進行處理，然后存放在站點根目錄下的文件夾里。 插圖圖像時，將光標放置在文檔窗口需要插入圖像的位置，然后鼠標單擊常用插入欄的 “ 圖像 ” 按鈕。 彈出的 “ 選擇圖像源文件 ” 對話框，選擇 img/，單擊 “ 確定 ” 按鈕就把圖像 插入到了網(wǎng)頁中。 學習目標 第二章 知識目標：會插入圖片。 第三章 技能目標：了解圖片格式，知道如何插入在網(wǎng)站文件夾內(nèi)的圖片和不在網(wǎng)站文件夾內(nèi) 的圖片。 第四章 情感、態(tài)度和價值觀目標：培養(yǎng)學生的審美能力和操作能力。 26 注意：如果我們在插入圖片的時候，沒有將圖片保存在站點根目錄下，會彈出下圖所示的對話框，提醒我 們要把圖片保存在站點內(nèi)部，這時單擊 “ 是 ” 按鈕， 然后選擇本地站點的路徑將圖片 27 保存，圖像也可以被插入到網(wǎng)頁中。 在你的站點內(nèi)找到一張圖片插入 在計算機內(nèi)找到一張照片插入 做一做 28 評價內(nèi)容 自評 互評 師評 合作探究 知識掌握 學習態(tài)度 發(fā)現(xiàn)思考 學習效果 注： 評價時用 “ ☆ ” 表示，優(yōu)是 3 個 “ ☆ ” ，良是 2 個 “ ☆ ” ，達標是 1 個 “ ☆ ” 評一評 同學們，本節(jié)課你的表現(xiàn)怎樣呢？快來評一評吧？ 29 第六課 (2) 當我們往一個網(wǎng)頁里插入了圖片之后我們要調(diào)整圖片的一些屬性，圖片有哪些屬性，我們該如何調(diào)整呢？另外我們插入的一些圖片很大，分辨率較高，讀網(wǎng)頁的時候會很慢，有沒有方法能讓網(wǎng)頁快速打開呢？ 下面同學們跟我一起來解決這個問題。 設(shè)置圖像屬性 選中圖像后，在屬性面板中顯示出了圖像的屬性，如下如所示。 看一看 學習目標 1. 知識目標 ：會 設(shè)置圖像屬性 ,會插入圖像占位符 。 2. 技能目標： 會 設(shè)置圖像屬性 ,會插入圖像占位符 ,知道圖像占位符在網(wǎng)頁中的作用和意義。 3. 情感、態(tài)度和價值觀目標 ： 培養(yǎng)學生對網(wǎng)站制作的興趣 30 在屬性面板的左上角，顯示當前圖像的縮略圖，同時顯示圖像的大小。在縮略圖右側(cè)有一個文本框，在其中可以輸入圖像標記的名稱。 圖像的大小是可以改變的，但是在 DW 里更改是極不好的習慣，如果我們的 電腦安裝了 FW 軟件，單擊屬性面板的“編輯”旁邊的 ，即可啟動 FW 對圖像進行縮放等處理。當圖像的大小改變時，屬性欄中“寬”和“高”的數(shù)值會以粗體顯示，并在旁邊出現(xiàn)一個弧形箭頭，單擊它可以恢復圖像的原始大小。 “水平邊距”和“垂直邊距”文本框用來設(shè)置圖像左右和上下與其它頁面元素的距離。 “邊框”文本框時用來設(shè)置圖像邊框的寬度，默認的邊框?qū)挾葹?0。 “替代”文本框用來設(shè)置圖像的替代文本，可以輸入一段文字，當圖像無法顯示時，將顯示這段文字。 單擊屬性面板中的 對齊按鈕，可以分別將圖像設(shè)置成瀏覽器居左對齊、居中對齊、居右對齊。 在屬性面板中，“對齊”下拉列表框時設(shè)置圖像與文本的相互對齊方式，共有10 個選項。通過它我們可以將文字對齊到圖像的上端、下端、左邊和右邊等，從而可以靈活的實現(xiàn)文字與圖片的混排效果。 31 插入其它圖像元素 在我們單擊常用插入欄的“圖像”按鈕時，可以看到，除了第 1 項“圖像”外，還有“圖像占位符”、“鼠標經(jīng)過圖像”、“導航條”等項目。 插入圖像占位符，在我們布局頁面時，如果要在網(wǎng)頁中插入一張圖片，可以先不制作圖片，而是使用占位符來代替圖片位置。單擊下拉列表中的“圖像占位符”，打開“圖像占位符” 對話框。按設(shè)計需要設(shè)置圖片的寬度和高度，輸入插入圖像的名稱，即可。 32 鼠標經(jīng)過圖像，鼠標經(jīng)過圖像實際上由兩個圖像組成，主圖像（當首次載入頁時顯示的圖像）和次圖像（當鼠標指針移過主圖像時顯示的圖像）。這兩張圖片要大小相等，如果不相等， DW自動調(diào)整次圖片的大小跟主圖像大小一致。 圖片與文本一樣，是網(wǎng)頁中最常用到的內(nèi)容，其變化相對較少，要想排出精致美觀的網(wǎng)頁，下一節(jié)課的內(nèi)容可是必不可少的哦，繼續(xù)努力吧 ^_^ 插入兩張圖片，并設(shè)置第一張圖片為右對齊，第二張圖片為居中對齊。 設(shè)置圖片 的占位符。 做一做 33 評價內(nèi)容 自評 互評 師評 合作探究 知識掌握 學習態(tài)度 發(fā)現(xiàn)思考 學習效果 注： 評價時用 “ ☆ ” 表示，優(yōu)是 3 個 “ ☆ ” ，良是 2 個 “ ☆ ” ，達標是 1 個 “ ☆ ” 評一評 同學們，本節(jié)課你的表現(xiàn)怎樣呢？快來評一評吧？ 34 第七課 表格是網(wǎng)頁設(shè)計制作不可缺少的元素，它以簡潔明了和高效快捷的方式將圖片、文本、數(shù)據(jù)和表單的元素有序的顯示在頁面上，讓我們可以設(shè)計出漂亮的頁面，使用表格排版的頁面在不同平臺、不同分辨率的瀏覽 器里都能保持其原有的布局，而在不同的瀏覽器平臺有較好的兼容性，所以表格是網(wǎng)頁中最常用的排版方式之一。 一、插入并編輯表格 插入表格 在文檔窗口中，將光標放在需要創(chuàng)建表格的位置，單擊“常用”快捷欄中的表格按鈕彈出的“表格”對話框，指定表格的屬性后，在文檔窗口中插入設(shè)置的表格。 看一看 學習目標 1 知識目標：學會插入表格 2 技能目標：學會插入表格并且能夠調(diào)整表格格式 3 情感、 態(tài)度和價值觀目標：培養(yǎng)學生的集體榮譽感及合作精神。 35 “行數(shù)”文本框用來設(shè)置表格的行數(shù)。 “列數(shù)”文本框用來設(shè)置表格的列數(shù)。 “表格寬度”文本框用來設(shè)置表格的寬度，可以填入數(shù)值，緊隨其后的下拉列表框用來設(shè)置寬 度的單位，有兩個選項 —— 百分比和像素。當寬度的單位選擇百分比時，表格的寬度會隨瀏覽器窗口的大小而改變。 “單元格邊距”文本框用來設(shè)置單元格的內(nèi)部空白的大小。 “單元格間距”文本框用來設(shè)置單元格與單元格之間的距離。 “邊框粗細”用來設(shè)置表格的邊框的寬度。 “頁眉”定義頁眉樣式，可以在四種樣式中選擇一種。 “標題” 定義表格的標題。 36 “對其標題”定義表格標題的對齊方式。 “摘要” 可以在這里對表格進行注釋。 選擇單元格對象 對于表格、行、列、單元格屬性的設(shè)置是以選擇這些對象為前提的。 選擇整個表格的方法是把 鼠標放在表格邊框的任意處，當出現(xiàn) 這樣的標志時單擊即可選中整個表格；或在單元格任意處單擊，點鼠標右鍵在彈出菜單菜單中選擇“表格 —— 選擇表格” 要選中某一單元格，按住 Ctrl 鍵，鼠標在需要選中的單元格單擊即可 要選中連續(xù)的單元格，按住鼠標左鍵從一個單元格的左上方開始向要連續(xù)選擇單元格的方向拖動。要選中不連續(xù)的幾個單元格，可以按住 Ctrl 鍵，單擊要選擇的所有單元格即可。 要選擇某一行或某一列，將光標移動到行左側(cè)或列上方，鼠標指針變?yōu)橄蛴一蛳蛳碌募^圖標時，單擊即可。 插入一個四列三行的表格，設(shè)置 自己喜歡的間距、邊距和邊框。 做一做 評一評 37 評價內(nèi)容 自評 互評 師評 合作探究 知識掌握 學習態(tài)度 發(fā)現(xiàn)思考 學習效果 注： 評價時用 “ ☆ ” 表示，優(yōu)是 3 個 “ ☆ ” ，良是 2 個 “ ☆ ” ，達標是 1 個 “ ☆ ” 同學們，本節(jié)課你的表現(xiàn)怎樣呢？快來評一評吧？ 38 第八課 插入并編輯表格 (2) 通過前面的學習我們已經(jīng)會自己制作一個表格了，但是這樣的表格并不能滿足我們的需要，例如顏色單調(diào)、樣式單一。那么我們?nèi)绾沃谱鬟m合我們的漂亮的表格呢，好這節(jié)課就跟我一起來制 作個性化的表格吧！ 設(shè)置表格屬性 選中一個表格后，可以通過屬性面板更改表格屬性。 看一看 學習目標 知識目標：利用表格屬性設(shè)置表格 利用表格屬性對表格整體和單元格進行設(shè)置 技能目標：情感、態(tài)度和價值觀目標：培養(yǎng)學生的自學能力和審美能力。 39 “填充”文本框用來設(shè)置單元格邊距，“間距”文本框用來設(shè)置單元格間距。 “對齊”下拉列表框用來設(shè)置表格的對齊方式，默認的對齊方式一般為左對齊。 “邊框”文本框用來設(shè)置表格邊框的寬度。 “背景顏色”文本