應用案例分析_第1頁
應用案例分析_第2頁
應用案例分析_第3頁
應用案例分析_第4頁
應用案例分析_第5頁
已閱讀5頁,還剩2頁未讀, 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

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 寬 :

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論