1、教 案 用 紙項目三 網頁排版 需 8 學時審閱人授 課 課 題任務二：用 DW 處理文字和圖片學時4授 課 時 間2012年 3 月 5 日 星期 一 第 1-4 節教學目的與要求1. 文本的概念和基本操作 2. 圖片的常見格式 3. 圖片的基本操作 教 學 重 點1. 文本的基本操作 2. 圖片的基本操作教 學 難 點圖片的基本操作授 課 方 法一體化教 具 儀 器計算機、投影儀教學過程、內容分析、授課提綱附 記組 織 教 學：考勤，填寫日志，復習舊課，講授新課復 習 舊 課：HTML標記講 授 新 課：用 DW 處理文字和圖片平頂山工業職業技術學院教 學 內 容教學方法手 段時間分配【教

2、學設計】 向學生演示三個項目的效果圖，分階段分析這三個網頁中文本的字體、字號、顏色、對齊方式等，圖片的寬度、高度、邊距、對齊、邊框等屬性，每個階段演示完畢后，老師做示范操作。講解、示范操作完畢后布置課后作業。 第一步：文本概說 （ 10 分鐘左右） 第二步：展示項目 1 效果圖，并分析文本屬性 （ 5 分鐘左右） 第三步：教師示范操作、答疑 （ 15 分鐘左右） 第四步：圖片概說 （ 10 分鐘左右） 第五步：展示項目 2 效果圖，并分析圖片屬性 （ 6 分鐘左右） 第六步：教師示范操作、答疑 （ 15 分鐘左右） 第七步：展示項目 3 效果圖，并分析文本屬性和圖片屬性 （ 8 分鐘左右） 第

3、八步：教師示范操作、答疑 （ 18 分鐘左右） 第九步：布置作業 （ 3 分鐘左右） 【教學過程】一、文本及其操作 1 、文本的基本概念 是一種基本的網頁元素 2 、文本的基本操作 Dreamweaver 8 中對文本的輸入及編輯，與 Word 極其相似（ 1 ）換行 自動換行：在輸入文字時，若某一行的長度超過了 Dreamweaver 窗口的顯示范圍，文字將自動換到下一行。 利用 ”Enter ” 鍵換行：在輸入文字后按 ” Enter ” 鍵，文字成段，且上下段之間空一行。 利用 ” Shift+Enter ” 鍵換行：如果想要將文字手動換行，中間又不能出現空白行，可以按 ” Shift+

4、Enter ” 鍵。 （ 2 ）插入特殊的字符 有時為了內容的需要，要在網頁中插入一些鍵盤上沒有的特殊字符，在 Dreamweaver 8 中，這些特殊字符可以通過 ” 插入 ” ”HTML” ” 特殊字符 ” 命令來插入。 （ 3 ）刪除、移動和復制文本 可以用工具按鈕，也可以用菜單命令。 3 、查找替換文本的內容 如果要在文檔中查找或替找某個文字，選擇 ” 編輯 ” ” 查找與替換 ” 命令。 4 、設置文本格式 在 Dreamweaver 4.0 中設置文本格式可以通過屬性面板，類似與 Microsoft Word 中對文本的屬性設置，包括段落的格式、字體、字號、字的顏色、字體加粗傾斜、

5、對齊方式（左對齊居中右對齊）、文字所鏈接的路徑或 URL 等。 平頂山工業職業技術學院教 學 內 容教學方法手 段時間分配范例 1 ：將文件“實戰演練 1.txt ”的內容拷貝到新網頁中，將“內容提要”作為標題，居中對齊，“本書采用”“首先”“本書適用于”作為三個段落的起首，首行縮進 2 個漢字；“目錄”作為一個標題，居中對齊，其以下的內容每章 / 節 / 小節都要換行，居左對齊。然后，將所有的“數據庫”一詞替換為“ DATABASE ”。二、圖片及其操作 1 、圖片的格式 網站常見 / 常用的四種格式： Bmp,jpg,gif,png 2 、圖片的主要操作： （） 插入圖片 單擊“插入”菜單

6、下的“圖像”按鈕，如圖 1 所示： 圖 1 Dreamweaver 8 插入圖像 將彈出此對話框，如圖 2 所示： 圖 2 選擇圖像源文件對話框 在站點里面找到需要的圖片，單擊“確定”。 平頂山工業職業技術學院教 學 內 容教學方法手 段時間分配（）設置圖像的屬性 選中圖像后，在屬性面板中就顯示出了圖像的屬性，如 3 所示： 圖 3 圖像屬性 “圖像”下的文本框用來設置圖像的 ID ，一般情況下不填。 “寬”文本框用來設置圖像的寬度，可填入數值，單位是像素。 “高”文本框用來設置圖像的高度，可填入數值，單位是像素。 “源文件”用來設置這個圖像的路徑。 “鏈接”用來設置這個圖像的超鏈接，“目標”

7、用來設置超鏈接的打開方式，有關超鏈接的詳細說明請參見后面章節的介紹。 “替代”文本框用來設置圖像的替代文本，可輸入一段文字，當圖像無法顯示時，將顯示這段文字。 “垂直邊框”文本框圖用來設置圖像上與其上方其他頁面元素，及圖像下與其正文其他頁面元素的距離。 “水平邊距”文本框是用來設置左側與其左方其他頁面元素，及圖像右側與其右方其他頁面元素距離。 “邊框”文本框圖用來設置圖像邊框的寬度，可輸入數值，單位是像素。默認圖像邊框寬度為“ 0 ”，也就是沒有圖像邊框。 “低解析度源”用來設置這個圖像還沒顯示品質代圖像，當圖像很大時，可以給圖像設置一個較小的低品質替代圖像。在圖像還沒顯示出來之前，較小的低品

8、質替代圖像能迅速顯示。 單擊圖像屬性檢查器中的 按鈕，即把圖像設置成瀏覽器左對齊；單擊圖像屬性檢查器中的 按鈕，即把圖像設置成瀏覽器居中對齊；單擊圖像屬性檢查器中的 按鈕，即把圖像設置成瀏覽器右對齊；單擊圖像屬性檢查器中的 按鈕，即把圖像設置成瀏覽器兩端對齊。 （） 調整圖像在網頁中的相對位置 范例 2： 用菜單和工具 2 種方法插入圖片 ji.jpg 和 daoying.jpg ，同行并排，圖片 ji.jpg 的高 =200 ，寬 =350 ，右對齊； daoying.jpg 的高 =200 ，寬 =300 ，左對齊；然后用“裁剪”工具圖片 ji.jpg 的光亮部分保留，去掉其左邊不亮部分，

9、再將其高 =200 ，寬 =350 ；將圖片 ji.jpg 的亮度 =20 ，對比度 =25 ，銳化 =5 ；圖片 shan.jpg, 邊框 =2 ，垂直邊距 =150 ，水平邊距 =3 。 圖 4 范例 2 效果平頂山工業職業技術學院教 學 內 容教學方法手 段時間分配三、文本和圖片的混合操作 圖 5 范例 3 原圖 圖 6 范例 3 效果圖 范例 3： 要求： 阿拉斯加（ Alaska ） : 格式 : 段落 字體 華文彩云 大小 :36(px) 顏色 :#000066 （ Alaska ） : 格式 : 段落 字體 Times New Roman 大小 :36(px) 顏色 :#0000

10、66 水平線 : 寬 : 80% 高 :5 對齊 : 居中對齊 陰影 : 無 * 在寒冷的阿拉斯加，不但可以看到晶瑩剔透的冰雕、完全用冰蓋起來的 ICE HOTEL ，還可以看到美麗的極光。你能想象住在完全由冰蓋起來的旅館里是什么感覺嗎？ 格式 : 段落 字體 默認 大小 :16(px) 顏色 :#000000 * 冰雕 : 格式 : 段落 字體 : 方正舒體 大小 :36(px) 顏色 : #FF6600 ICE HOTEL: 格式 : 段落 字體 : 方正舒體 大小 :36(px) 顏色 : #FF3399 極光 : 格式 : 段落 字體 : 方正舒體 大小 :36(px) 顏色 : #6

11、699CC * 極光是由于太陽風與極圈內的磁場產生反應而形成的光，它時而白色，時而是藍色也有可能是五顏六色的。雖然阿拉斯加非常寒冷但是每年去那里的游客仍然絡繹不絕，為的就是欣賞這難得一見的極光。 平頂山工業職業技術學院教 學 內 容教學方法手 段時間分配格式 : 段落 字體 : 方正舒體 大小 :18(px) 顏色 : #0033CC 極光 : 格式 : 段落 字體 : 華文彩云 大小 :36(px) 顏色 : #00FF00 寒冷 : 格式 : 段落 字體 : 方正舒體 大小 :36(px) 顏色 : #00FF00 難得一見 : 格式 : 段落 字體 : 方正舒體 大小 :36(px) 顏色 : #00FF00 *誰也不會想到在寒冷的阿拉斯加竟然會有天然的室外溫泉，在零下幾十度的氣溫下，能夠泡在溫暖的溫泉里喝上一杯咖啡，我想也是一件非常愜意的事情吧！ 格式 : 段落 字體 : 方正舒體 大小 :18(px) 顏色 : #0033CC 溫泉 格式 : 段落 字體 : 華文彩云 大小 :36(px) 顏色 : #FF9900 咖啡 格式 : 段落 字體 : 華文彩云 大小 :36(px) 顏色 : #FF9900 事情 格式 : 段落 字體 : 華文彩云 大小 :36(px) 顏色 : #FF9900 *圖片處理 :jiguang.jpg 寬 :