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

$

[知識(shí)目標(biāo)]

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

[能力目標(biāo)]

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

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

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

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

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

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

在文檔窗口選中圖像時(shí)，在“屬性檢查器中就可以顯示該圖像的屬性，并可對(duì)其進(jìn)行修改。1．設(shè)置圖像大小：可以直接在“寬”和“高”兩個(gè)文本框內(nèi)輸入新的數(shù)值即可。還可以直接用鼠標(biāo)拖動(dòng)來(lái)改變圖像的大小。具體操作為：（1）選中要改變的圖像，圖像四周出現(xiàn)控制點(diǎn)。（2）拖動(dòng)任一個(gè)控制點(diǎn)則可改變圖像大小3.2.2設(shè)置圖像屬性3.2在網(wǎng)頁(yè)插入圖像

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

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

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

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

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

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

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