網(wǎng)頁電子教案-第3章課件

$

[知識目標(biāo)]

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

[能力目標(biāo)]

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

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

3.1在網(wǎng)頁中插入文本

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

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

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

在文檔窗口選中圖像時，在“屬性檢查器中就可以顯示該圖像的屬性，并可對其進行修改。1．設(shè)置圖像大?。嚎梢灾苯釉凇皩挕焙汀案摺眱蓚€文本框內(nèi)輸入新的數(shù)值即可。還可以直接用鼠標(biāo)拖動來改變圖像的大小。具體操作為：（1）選中要改變的圖像，圖像四周出現(xiàn)控制點。（2）拖動任一個控制點則可改變圖像大小3.2.2設(shè)置圖像屬性3.2在網(wǎng)頁插入圖像

3．設(shè)置圖像對齊方式4．其他圖像屬性?“源文件”：指定圖像的源文件。單擊“瀏覽”按鈕或者直接鍵入文件的路徑，可以重新定義源文件。?“替代”：用于指定在圖像不能正常顯示時，顯示的關(guān)于圖像的文本提示信息。在某些瀏覽器中，當(dāng)鼠標(biāo)指針滑過圖像時也會顯示該文本。?“垂直邊距和水平邊距”：以像素為單位設(shè)定圖像與周圍的網(wǎng)頁元素間的距離。?“邊框”：是以像素為單位的圖像邊框的寬度。默認(rèn)為無邊框。3.2.2設(shè)置圖像屬性3.2在網(wǎng)頁插入圖像在Dreamweaver8中提供了基本圖像編輯功能，各編輯按鈕如下：——優(yōu)化。單擊此按鈕可以打開“Fireworks”程序?qū)D像進行優(yōu)化?！眉??？勺屝藜魣D像的大小，從所選圖像中刪除不需要的區(qū)域?！匦氯??？蓪σ颜{(diào)整大小的圖像進行重新取樣，提高圖片在新尺寸和形狀下的品質(zhì)?！炼群蛯Ρ榷?。可讓調(diào)整圖像的亮度和對比度設(shè)置。——銳化可調(diào)整圖像的清晰度。3.2.3編輯圖像

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

單中，選擇“鼠標(biāo)

經(jīng)過圖像”，如圖

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

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

1、在網(wǎng)頁中插入圖片。2．單擊選中圖片，“屬性檢查器”出現(xiàn)熱區(qū)工具按鈕。3．單擊“矩形”熱區(qū)按鈕，將光標(biāo)移到圖