$

[知識目標]

掌握在網頁中的文本和段落的設置方法掌握圖像的插入及其屬性的設置的方法熟悉頁面屬性的設置熟悉各種超級鏈接及設置8

[能力目標]

掌握文本和段落屬性設置的操作掌握圖像的插入及圖像屬性設置的操作掌握頁面屬性的設置操作掌握各種超級鏈接的設置及編輯操作第3章網頁中的基礎元素3.1在網頁中插入文本3.2在網頁插入圖像3.3插入其他網頁元素3.4設置網頁的頁面屬性3.5設置超級鏈接本章小結第3章網頁中的基礎元素3.1在網頁中插入文本3.1.1插入文本3.1.2設置文本格式3.1.3段落格式的編輯3.1.4設置列表3.1.5簡單的CSS樣式應用

（一）插入普通文本:添加文本有以下三種方法：1．直接在文檔窗口中輸入文本。2．拷貝文本。3．從其他文檔導入文本。（二）插入特殊字符1．將光標定位在要插入特殊字符的位置。2．在“插入”欄的“文本”類別中，選擇要插入的符號，如圖。3.1.1插入文本

3.1在網頁中插入文本

1．選擇要設置的文本。2．在“屬性檢查器”，設置文本格式。3.1.2設置文本格式3.1在網頁中插入文本

（一）應用己有的標題格式（二）自定義設置段落格式1．設置對齊方式2．設置段落縮進3.1.3段落格式的編輯3.1在網頁中插入文本列表包括項目列表和編號列表兩種。創建項目列表或編號列表的操作為：1.選擇要創建列表的文本。2.在“屬性檢查器”中單擊按鈕，可以創建項目列表；單擊按鈕，可以創建編號列表。3.單擊“屬性檢查器”中的按鈕，以彈出的“列表屬性”對話框中可以重新設置列表的屬性。3.1.4設置列表3.1在網頁中插入文本CSS是CascadingStyleSheets（層疊樣式表單）的簡稱。使用CSS樣式改變行距的操作為：1．按組合鍵Shift+F11，打開CSS面板如所示。2．點擊CSS面板上的按鈕，打開“新建CSS規則”對話框并設置如圖右，單擊確定。3.1.5簡單的CSS樣式應用3.1在網頁中插入文本３．單擊“確定”按鈕，打開“.hangju的CSS規則定義”對話框。設置如圖，單擊“確定”退出。3.1.5簡單的CSS樣式應用3.1在網頁中插入文本４．選擇要應用樣式的兩段文本或光標定位在段落中，在“屬性檢查器”中“樣式”下拉列表中，選擇“hangju”，則文本的行距發生了改變，如圖所示。3.1.5簡單的CSS樣式應用3.1在網頁中插入文本3.2在網頁插入圖像3.2.1插入圖像3.2.2設置圖像屬性3.2.3編輯圖像3.2.4圖像外部編輯3.2.5鼠標經過圖像3.2.6創建導航條

在網頁中插入圖像的操作為：1.將光標定位在要插入圖像的位置。2.執行以下操作之一：?單擊菜單欄中的“插入”|“圖像”命令。?在“插入”欄的“常用”類別中，單擊“圖像”按鈕3．打開“選擇圖像源文件”對話框，選擇需要的文件名稱。6．在“相對于”下拉列表中選擇“站點”。7．單擊“確定”按鈕，圖像則插入到網頁中。3.2.1插入圖像3.2在網頁插入圖像

在文檔窗口選中圖像時，在“屬性檢查器中就可以顯示該圖像的屬性，并可對其進行修改。1．設置圖像大小：可以直接在“寬”和“高”兩個文本框內輸入新的數值即可。還可以直接用鼠標拖動來改變圖像的大小。具體操作為：（1）選中要改變的圖像，圖像四周出現控制點。（2）拖動任一個控制點則可改變圖像大小3.2.2設置圖像屬性3.2在網頁插入圖像

3．設置圖像對齊方式4．其他圖像屬性?“源文件”：指定圖像的源文件。單擊“瀏覽”按鈕或者直接鍵入文件的路徑，可以重新定義源文件。?“替代”：用于指定在圖像不能正常顯示時，顯示的關于圖像的文本提示信息。在某些瀏覽器中，當鼠標指針滑過圖像時也會顯示該文本。?“垂直邊距和水平邊距”：以像素為單位設定圖像與周圍的網頁元素間的距離。?“邊框”：是以像素為單位的圖像邊框的寬度。默認為無邊框。3.2.2設置圖像屬性3.2在網頁插入圖像在Dreamweaver8中提供了基本圖像編輯功能，各編輯按鈕如下：——優化。單擊此按鈕可以打開“Fireworks”程序對圖像進行優化。——裁剪。可讓修剪圖像的大小，從所選圖像中刪除不需要的區域。——重新取樣。可對已調整大小的圖像進行重新取樣，提高圖片在新尺寸和形狀下的品質。——亮度和對比度。可讓調整圖像的亮度和對比度設置。——銳化可調整圖像的清晰度。3.2.3編輯圖像

3.2在網頁插入圖像啟動外部圖像編輯器執行以下操作之一：?雙擊要編輯的圖像。?選擇要編輯的圖像，然后在屬性檢查器中單擊“編輯”。?在“站點”面板中雙擊圖像文件，啟動主圖像編輯器。如果尚未指定圖像編輯器，Dreamweaver8將啟動該文件類型的默認編輯器。3.2.4圖像外部編輯3.2在網頁插入圖像設置鼠標經過圖像的操作為：1．在“文檔”窗口中,將光標定位在要顯示鼠標經過圖像的位置。2．執行以下操作之一，打開插入鼠標經過圖像對話框：?單擊菜單欄中“插入|圖像對象|鼠標經過圖像”命令。?在“插入”欄的“常用”類別中，單擊“圖像”按鈕右側的箭頭，在彈出的菜

單中，選擇“鼠標

經過圖像”，如圖

所示。3.2.5鼠標經過圖像3.2在網頁插入圖像3．打開“鼠標經過圖像”對話框。4．單擊“確定”，在網頁中插入了鼠標經過圖像。5．保存并在瀏覽器中預覽網頁。3.2.5鼠標經過圖像3.2在網頁插入圖像1．準備好用于制作導航條的圖像,這些圖像最好大小尺寸一樣。2．在文檔窗口中，將光標定位在要顯示導航條的位置。一般導航條位網頁的頂部或兩側。3．單擊菜單欄中“插入”|“圖像對象”|“導航條”。4．打開對話框，在對話框中設置。在導航條中，每一個項目都對應一個按鈕，該按鈕具有一組狀態圖像，最多可達四個。項目名稱在“導航條項目”列表中顯示。用箭頭按鈕排列項目在導航條中的位置。單擊“+”按鈕，添加另一個項目，單擊“-”可以刪除選中的項目。向上和向下的箭頭按鈕，用于調整項目在導航條中排序。3.2.6創建導航條3.2在網頁插入圖像5．設置完成一個項目后，單擊加號“+”按鈕向導航條添加另一個項目，然后重復上述步驟定義該項目。6．完成設置后，單擊“確定”按鈕，在網頁中插入了導航條。3.2.6創建導航條3.2在網頁插入圖像3.3插入其他網頁元素3.3.1水平線3.3.2日期和時間（一）插入水平線:在網頁中插入水平線的操作為：1．在“文檔”窗口中，將光標定位在要插入水平線的位置。2．執行下列操作之一：?單擊菜單欄中“插入”|“HTML”|“水平線”命令。?在“插入”欄的“HTML”類別中，單擊“水平線”按鈕，如圖。3．水平線插入在網頁中如圖3.3.1水平線3.3插入其他網頁元素（二）設置水平線屬性：1．選擇水平線2．打開“水平線屬性”，如圖所示。?“寬”：用于設置水平線的寬度。?“高”：以像素為單位，設置水平線的高度。?“對齊”：設置水平線的對齊方式（“默認”、“左對齊”、“居中對齊”或“右對齊”）。?“陰影”：指定繪制水平線時是否帶陰影。取消選擇此選項將使用純色繪制水平線。3.3.1水平線3.3插入其他網頁元素（三）.增添顏色1．選擇水平線2．在“屬性檢查器”上，單擊打開快速標簽編輯器如圖。3．插入color="？"，顏色取值可以是英語（如yellow）也可用十六進制代碼（如#FFFF00）.3.3.1水平線3.3插入其他網頁元素（一）將當前日期插入到文檔中1在“文檔”窗口中，定位光標在要插入日期的位置。在圖4.34的網頁中的圖像下面輸入文本“本網頁制作于：”。2執行下列操作之一：?單擊菜單欄中“插入”|“日期”命令。?在“插入”欄的“常用”類別中，單擊“日期”按鈕3．打開“插入日期”對話框如圖。3.3.2日期和時間3.3插入其他網頁元素4．在對話框中，選擇星期格式、日期格式和時間格式。5．如選擇“儲存時自動更新”，在每次保存文檔時都會更新插入的日期。取消選擇，日期在插入后變成純文本并永遠不自動更新。6．單擊“確定”插入日期，效果如圖所示。3.3.2日期和時間3.3插入其他網頁元素3.4設置網頁的頁面屬性3.4.1打開頁面屬性對話框3.4.2設置網頁的標題3.4.3設置網頁的背景3.4.4設置網頁的文本3.4.5設置網頁的邊界1．要打開頁面屬性對話框可以執行以下操作之一：?單擊菜單欄中“修改”|“頁面屬性”命令。?單擊文本“屬性檢查器”中的“頁面屬性”按鈕。2．打開頁面屬性對話框，如圖所示。3.4.1打開頁面屬性對話框3.4設置網頁的頁面屬性1．在頁面屬性對話框中，選擇“標題/編碼”分類，如圖所示。2．在“標題”文本框內輸入網頁的標題內容，如“長春游游網”。3．點擊“確定”退出頁面屬性對話框。4．保存并在瀏覽器中預覽網頁,則標題出現在瀏覽器的左上角3.4.2設置網頁的標題3.4設置網頁的頁面屬性（一）設置網頁的背景顏色1．在頁面屬性對話框中，選擇“外觀”分類。2．執行以下操作之一：?在“背景顏色”對話框中輸入顏色的十六進制代碼如“#66CCFF”?點背景顏色后的按鈕，打開調色板選擇顏色。3．點擊“確定”退出頁面屬性對話框。4．保存并在瀏覽器中預覽網頁。3.4.3設置網頁的背景3.4設置網頁的頁面屬性（二）設置網頁的背景圖像1．在頁面屬性對話中，選擇“外觀”分類。2．點擊“背景圖像”后的“瀏覽”按鈕，打開選擇圖像源對話框。3．查找并選擇作為網頁背景的圖像，單擊“確定”退出頁面屬性對話框。4．保存并在瀏覽器中預覽網頁。5.重復選項：確定是否以及如何重復背景圖像。有四個選項：“不重復”只在開始處顯示一次圖像。“重復”在水平和垂直方向平鋪圖像。“橫向重復”和“縱向重復”，分別在水平和垂直方向重復排列背景圖像。3.4.3設置網頁的背景3.4設置網頁的頁面屬性在頁面屬性對話框架可以對網頁的文本進行統一的字體、字號及文本顏色的設置1．在頁面屬性對話框中，選擇“外觀”分類。2．在“頁面字體”的下拉菜單中，選擇字體。3．在“大小”下拉菜單中，選擇字號。4．單擊“文本顏色”右側的調色板，可以設置文本的顏色。3.4.4設置網頁的文本3.4設置網頁的頁面屬性頁面屬性中“左邊距”、“右邊距”、“上邊距”和“下邊距”四個選項，用于設置網頁頁面元素與頁面邊界的寬度或高度。其右側下拉列表為寬度或高度的單位，默認為“像素”。3.4.5設置網頁的邊界3.5設置超級鏈接3.5.1超鏈接的路徑3.5.2創建基本超鏈接3.5.3錨點鏈接3.5.4熱區鏈接3.5.5電子郵件鏈接①絕對路徑。是提供所鏈接文檔的完整路徑，且包含其應用協議（如http://）。主要用于創建站外具有固定地址的鏈接，如要建立到中央電視臺的鏈接就可以使用。②文檔相對路徑。是以當前文檔所在位置為起點到被鏈接文檔經由的路徑，省略對于當前文檔和所鏈接的文檔都相同的絕對路徑部分，而只提供不同的路徑部分，如：gerenwenjian/jiangli.html。具有可移植性，是網頁制作的首選。③根目錄相對路徑（又稱服務器路徑）：使用多個服務器的大型站點會要用到這種文檔路徑。如："/image/button.gif”即是連接網絡服務器根目錄下的image文件夾中的button.gif文件，必須在網絡環境之下才能使用這種路徑。3.5.1超鏈接的路徑3.5設置超級鏈接1、在網頁中，選擇要超鏈接的載體（文字或者圖）像，選擇“凈月潭國家森林公園”。2．在屬性檢查器中，單擊“鏈接”后的“瀏覽”按鈕，打開“選擇文件”對話框。3．選擇鏈接的目標文件，單擊“確認”按鈕。4．在“屬性檢查器”中的“目標”下拉菜單中,選擇目標文件打開的位置,如圖。5．保存并在瀏覽器中預覽網頁，建立了超鏈接的文字變為藍色并帶有下劃線。6．單擊創建超鏈接的文字，測試鏈接的完好性。3.5.2創建基本超鏈接3.5設置超級鏈接1．創建命名錨記（1）光標定位在要創建命名錨記的位置，如在圖4.49網頁中的標題“長春介紹”前定位光標。（2）執行以下操作之一：?單擊菜單欄中的“插入”|“命名錨記”命令?在“插入”欄中的“常用”類別中，單擊“命名錨記”。（3）打開“命名錨記”對話框，如圖。

3.5.3錨點鏈接3.5設置超級鏈接（4）在“錨記名稱”文本框中輸入錨記名稱，如“top”。（5）單擊“確定”按鈕退出，則在文檔的相應位置出現一個圖標這就是命名錨記的符號。3.5.3錨點鏈接3.5設置超級鏈接

1、在網頁中插入圖片。2．單擊選中圖片，“屬性檢查器”出現熱區工具按鈕。3．單擊“矩形”熱區按鈕，將光標移到圖