網頁制作第3次

1、第三課 使用文本和圖像w 使用文本w 使用圖像w 插入文本 w 格式化文本 w 項目列表的應用為網頁添加文本 插入文本 w 插入普通文本 w 插入特殊字符 w 在字符之間添加空格 w 插入其他文本插入普通文本 w 將插入點定位在文檔編輯區(qū)中，直接輸入文本即可。Enter：創(chuàng)建新段落。Shift+Enter：換行。w 在Word等文本編輯軟件中編輯好文本之后，將其復制到剪貼板上，然后在Dreamweaver 8中將插入點定位到文檔編輯區(qū)中，粘貼剪貼板中的文本即可。 插入特殊字符 在Dreamweaver 8中編輯文本時，往往會遇到一些無法通過鍵盤直接輸入的特殊字符，如版權符號、注冊商標符號等，這

2、時可通過Dreamweaver 8插入特殊字符的功能進行插入。 在字符之間添加空格 Dreamweaver 8中的文檔格式都是以HTML編碼形式存在的，而HTML編碼中只允許字符之間包含一個空格，所以在Dreamweaver 8中無論按多少次空格鍵都只會輸入一個空格。 插入其他文本w 插入水平線 添加水平線 修改水平線 w 插入日期 添加水平線 在文檔編輯區(qū)將插入點定位到所需位置，選擇插入HTML水平線菜單命令或單擊“插入”欄中的“HTML”選項卡在其中單擊 按鈕即可添加水平線。 修改水平線 初始繪制的水平線的格式往往不能滿足實際需要，此時可通過屬性面板對其進行修改。 插入日期 在制作網頁時，

3、有時需要插入當前的日期，Dreamweaver 8提供了快速插入日期和時間的功能。 格式化文本 w 設置字體外觀 w 設置字體大小 w 設置顏色 w 設置字體樣式 w 設置對齊方式 w 設置標題格式 設置字體外觀 用戶也可對屬性面板的“字體”下拉列表框中的字體列表重新編輯。 設置字體大小 在屬性面板的“大小”下拉列表框中選擇相應的選項，并選擇其后的“單位”下拉列表框中相應的單位選項，即可設置所選文本的字體大小。 其中字體的度量單位有像素（px）、厘米（cm）等，可根據具體情況進行選擇，但一般都以像素為單位。 設置顏色 單擊屬性面板中的 按鈕，在彈出的顏色列表框中選擇相應的選項可設置所選文本的字

4、體顏色，在其后的文本框中直接輸入顏色的英文名（如Red、Green等）或以“#”開頭的十六進制顏色代碼（如#ff0000、00ff00）設置所選文本的顏色。設置字體樣式 w 粗體 根據在“首選參數”對話框的“常規(guī)”選項中設置的樣式參數選擇，將或標簽應用于選定的文本，即對所選文本加粗。單擊按鈕即可設置“加粗”設置，再次單擊按鈕可取消“加粗”設置。w 斜體 根據在“首選參數”對話框的“常規(guī)”選項中設置的樣式參數選擇，將或標簽應用于選定的文本，即對所選文本進行傾斜設置。選中按鈕即可將所選的文本應用“傾斜”。再次單擊按鈕可取消“傾斜”設置。 設置對齊方式 通過屬性面板中的“左對齊”按鈕、“居中對齊”按

5、鈕、“右對齊”按鈕和“兩端對齊”按鈕可設置文本的對齊方式。 設置標題格式 在屬性欄的“格式”下拉列表框中可設置標題格式，其中“段落”是應用標簽的默認格式，“標題 1”選項應用標簽，設置該選項可以將所選的文本設置成各種標題。標題號越小，字體越大。 項目列表的應用 w 有序列表w 無序列表w 定義列表 w 為現有文本創(chuàng)建列表 w 創(chuàng)建嵌套列表 w 設置項目列表屬性 有序列表 有序列表又稱為編號列表，是指將具有相似特性或某種順序的文本進行有規(guī)則地排列，列表常應用在條款或列舉等類型的文本中，用列表的方式進行羅列可使內容更直觀。在文檔窗口中，可以用現有文本或新文本創(chuàng)建編號列表、項目列表及定義列表。一般列

6、表的前面有數字前導字符，其中前導字符可以是阿拉伯數字、英文字母或羅馬數字等。 w 編號列表： 1：將鼠標光標定位到要創(chuàng)建編號列表的位置。 2：單擊“屬性”面板中的“編號列表”按鈕，數字前導字符將出現在鼠標光標前。 3：在數字前導字符后輸入相應的文本，按“Enter”鍵換行后，下一個數字前導字符將自動出現。 4：繼續(xù)輸入其他列表項的創(chuàng)建，完成整個列表的創(chuàng)建后按兩次“Enter”鍵即可。無序列表 無序列表又稱為項目列表，是一系列無順序級別關系的項目文本組成的列表，一般前面是用項目符號作為前導字符。 w 項目列表：w 1：將鼠標光標定位到要創(chuàng)建項目列表的位置。w 2：在“屬性”面板中單擊“項目列表”

7、按鈕，將出現項目符號前導字符。w 3：在前導字符后面輸入文本，然后按“Enter”鍵，項目符號前導字符將自動出現在新行的最前面。w 4：繼續(xù)創(chuàng)建其他列表項，完成整個列表的創(chuàng)建后按兩次“Enter”鍵即可。定義列表 定義列表不使用項目符號或數字這樣的前導字符，通常用在詞匯表或說明書中。 w 定義列表：w 1：將鼠標光標定位到要創(chuàng)建定義列表的位置，選擇“插入/HTML/文本對象/定義列表”命令。w 2：輸入文本后按“Enter”鍵，系統(tǒng)會自動換行，并在新行中進行縮進，輸入對上一行文本的解釋文本或小類后按“Enter”鍵。w 3：繼續(xù)輸入其他項目，輸入結束后按兩次“Enter”鍵即可完成整個列表的創(chuàng)

8、建。為現有文本創(chuàng)建列表 除了先創(chuàng)建列表項再輸入文本外，還可以先輸入文本，然后再設置列表項。 創(chuàng)建嵌套列表 嵌套列表是包含在其他列表中的列表。 w 創(chuàng)建嵌套列表 w 1：選擇要嵌套的列表項目。w 2：在屬性中，單擊“縮進”按鈕或選擇“格式”“縮進”。w 3：Dreamweaver 縮進文本并創(chuàng)建一個單獨的列表，該列表具有原始列表的 HTML 屬性。w 4：按照上面使用的同一過程，對縮進的文本應用新的列表類型或樣式設置項目列表屬性 使用“列表屬性”對話框可以設置列表項的外觀，包括編號樣式、項目符號樣式等。方法：在屬性面板中點擊列表屬性按鈕 其中：列表類型列表類型: 指定列表屬性，根據所選的“列表類

9、型”，使用彈出菜單選擇項目、編號、目錄或菜單列表對話框中將出現不同的選項。樣式: 確定用于編號列表或項目列表的編號或項目符號的樣式。所有列表項目都將具有該樣式，除非為列表項目指定新樣式。開始計數: 設置編號列表中第一個項目的值。標尺和網格 w 標尺 w 網格 標尺 標尺分為水平標尺和垂直標尺，分別顯示在Dreamweaver 8文檔編輯區(qū)的上方和左側。標尺的單位包括像素、厘米和英寸，在默認狀態(tài)下使用像素為單位。 方法： 查看菜單 網格 網格與標尺都是定位工具，但在網頁布局中使用網格更方便。文檔編輯區(qū)中顯示了網格后，就可以對網頁元素進行準確的定位了。 方法： 查看菜單為網頁添加圖像 w 網頁圖像

10、的格式及來源w 插入圖像 w 設置圖像屬性 w 圖像高級設置 網頁圖像的格式及來源w GIF格式 w JPEG格式 w PNG格式 w 網頁圖像來源 GIF格式 GIF全稱為“Graphics Interchange Format”，意為可交換圖像格式，它是第一個支持網頁的圖像格式，在PC機和蘋果機上都能被正確識別。它最多支持256種顏色，可以使圖像變得容量相當小。GIF圖像可以在網頁中以透明方式顯示，還可以包含動態(tài)信息，即GIF動畫。 JPEG格式 JPEG全稱為“Joint Photographic Experts Group”，意為聯(lián)合圖像專家組，它可以高效地壓縮圖片，丟失人眼不易察覺的

11、部分圖像，使文件容量在變小的同時基本不失真，通常用來顯示顏色豐富的精美圖像。缺點：不支持透明和動畫效果。 PNG格式 PNG全稱為“Portable Network Graphics”，意為便攜網絡圖像，它是逐漸流行的網絡圖像格式。PNG格式既融合了GIF能透明顯示的特點，又具有JPEG處理精美圖像的優(yōu)勢，且可以包含圖層等信息，常常用于制作網頁效果圖。優(yōu)點：圖像品質高 ，下載速度快，支持透明。缺點：不支持動畫效果。網頁圖像來源 網頁圖像的素材有很多來源，如可以使用圖形處理軟件（如Photoshop、Fireworks和FreeHand等軟件）制作；可以購買網頁素材光盤；可以從網絡上下載等。 插

12、入圖像 w 直接插入 w 占位符插入 w 圖像的放大顯示 直接插入 w 將鼠標光標定位到要插入圖像的位置，選擇插入圖像菜單命令。w 單擊插入欄的“常用”選項卡中的圖像按鈕。w 按【Ctrl+Alt+I】鍵。 占位符插入 制作網頁時還未選定需插入的圖像，但確定了圖像大小的時候，可以使用占位符來代替圖像的方式插入到文檔中。 將圖像確定后雙擊占位符，在打開的對話框中設置后插入即可。 方法： 選擇“插入”“圖像對象”“圖像占位符”。 在“圖像占位符”對話框中，輸入下面的屬性：“名稱” “寬度”“高度”單擊顏色框并從顏色選擇器中選擇一種顏色。圖像的放大顯示 Dreamweaver 8新增的放大鏡功能可以

13、讓用戶更方便地進行對齊圖像、選擇較小的對象以及查看較小的文本、動畫或網頁元素等操作。 設置圖像屬性 在網頁中插入圖像后可通過屬性面板對其屬性進行修改等設置。 圖像命名 圖像大小 編輯圖片 源文件設置 文本說明 圖像與文本的對齊 圖像邊距 圖像邊框 圖像命名 為了在使用Dreamweaver行為（如交換圖像）或腳本撰寫語言（如JavaScript或VBScript）時可以引用該圖像，可在屬性面板的“圖像”文本框中為圖像命名。 圖像大小 在Dreamweaver 8中插入圖像后系統(tǒng)會自動將圖像的原始大小顯示在“寬”和“高”文本框（以像素為單位）中。 編輯圖片 在網頁中選擇圖像之后，單擊屬性面板中的

14、按鈕，打開圖像處理軟件，對圖像進行處理。如果安裝了Fireworks，那么Fireworks將被默認為圖像處理軟件。如果沒有安裝，用戶也可自己設置使用其他軟件中處理圖像。 源文件設置 在屬性面板的“源文件”文本框中顯示了圖像的保存路徑，如果要重新插入一幅新圖像，可以在選取圖像后的屬性面板中的“源文件”文本框中重新輸入要插入圖像的地址，或單擊右側后的 按鈕，在打開的“選擇圖像源文件”對話框中重新選擇需要的圖像。 文本說明 在選取圖像后的屬性面板的“替換”下拉列表框中可以輸入圖像的文本說明。 圖像與文本的對齊 選取圖像后，在屬性面板的“對齊”下拉列表框中可設置處于同一行上的圖像與文本的對齊方式。

15、圖像邊距 選取圖像在屬性面板的“垂直邊距”和“水平邊距”文本框中可以設置圖像與頁面上方和左側之間的距離，也可以設置圖像與其他網頁元素之間的距離。 圖像邊框 選取圖像后，在屬性面板的“邊框”文本框中可以設置圖像邊框的寬度，單位為像素，“0”表示無邊框。 鏈接 為當前圖像指定鏈接目標。如單擊圖像打開新浪網，可在文本框中輸入“http:/” 圖像高級設置鼠標經過圖像設置 鼠標經過圖像是一種在瀏覽器中查看網頁時，鼠標光標經過該圖像時，圖像發(fā)生變化的動態(tài)圖像。 瀏覽網頁時，當鼠標移動到原始圖像上時，會顯示另外一張圖像，鼠標移除時，圖像范圍則恢復為原始圖像。鼠標經過圖像由原始圖像和鼠標經過圖像組成，因此，

16、創(chuàng)建鼠標經過圖像時必須先準備兩張大小相同的圖像。 鼠標經過圖像設置步驟 方法：w 新建空白HTML網頁，將鼠標光標定位在要插入鼠標經過圖像的位置w 選擇“插入/圖像對象/鼠標經過圖像”命令，打開“插入鼠標經過圖像”對話框w 在“圖像名稱”文本框中輸入圖像名稱，單擊“原始圖像”文本框后的“瀏覽”按鈕。在打開的對話框中選擇原始圖像。確定。w 使用同樣的方法為鼠標經過圖像選擇圖像，再在“替換文本”文本框中輸入替換文本，在“按下時，前往的URL”文本框中輸入單擊圖像時打開的網頁地址。 確定。完成鼠標經過圖像的創(chuàng)建。上機w 岳飛 -滿江紅 本練習要求在空白文檔中輸入宋詞滿江紅，標題“滿江紅”和作者“岳飛

17、”的編排要求每兩個字之間插入兩個空格，然后再將所有文本使用“隸書，華文行楷”為字集。最后在文檔中插入兩個鼠標經過圖像，要求兩個鼠標經過間的圖像變化效果相反。 補充：HTML文件的基本結構HTML文件是一種純文本格式的文件，HTML文件包括HTML、頭部（head）和主體(body)三個標記。文件基本結構為： 網頁標題 網頁的內容 代表是一個HTML文件（無屬性設置）網頁的頭部網頁的標題網頁內容，HTML主要的部分以上三種標記必須成對使用說明：HTML語言并不要求在書寫時縮進，但為了程序的易讀性，建議網頁設計制作者使標記的首尾對齊內部的內容向右縮進幾格。例：簡單的HTML文件。 簡單的HTML文

18、件 最簡單的網頁 1.HTML文檔標記2.HTML文件頭標記3. HTML文件標題標記4. HTML文件主體標記1.HTML文檔標記文檔標記 HTML文檔標記的格式為： 文檔的內容 HTML文檔的標記。處于文檔的最前面，表示HTML文檔的開始，即瀏覽器從開始解釋，直到遇到為止。 每個HTML文件均以開始，以結束。2.HTML文件頭標記習慣上將HTML文檔分為文件頭和文件主體兩部分。文件主體是在WEB瀏覽器窗口的用戶區(qū)顯示的內容，而文件頭則用來規(guī)定該文檔的標題（瀏覽器標題欄中的內容）和文檔的一些屬性。HTML文件頭標記格式： 頭部的內容說明：HTML文件的頭部在文件標記之后，在開始標記間定義。其內容可以是標題名，文本文件地址、創(chuàng)作信息等網頁信息說明。對應于相應的標記，有標題標記等。標記在HT