靜態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作 課件 第4章 文本與圖像

項(xiàng)目四

文本與圖像任務(wù)1

在網(wǎng)頁(yè)中插入文本任務(wù)2在網(wǎng)頁(yè)中插入圖像任務(wù)1在網(wǎng)頁(yè)中插入文本任務(wù)引入在設(shè)計(jì)網(wǎng)頁(yè)的過(guò)程中，小明發(fā)現(xiàn)有許多需要輸入文本的地方，而且這些文本的樣式各不相同，有的還需要進(jìn)行編號(hào)，輸入日期，那么在網(wǎng)頁(yè)中要如何插入文本，如何設(shè)置文本屬性和創(chuàng)建列表項(xiàng)，如何插入日期呢？知識(shí)準(zhǔn)備網(wǎng)頁(yè)作為一種傳播信息的媒體，文字是傳遞信息的最重要的媒介。從網(wǎng)頁(yè)最初的純文字界面發(fā)展至今，文字仍是其他任何元素?zé)o法取代的網(wǎng)頁(yè)元素。這首先是因?yàn)槲淖中畔⒎先祟?lèi)的閱讀習(xí)慣，其次是文字所占存儲(chǔ)空間小，節(jié)省了下載和瀏覽時(shí)間。在制作網(wǎng)頁(yè)的時(shí)候，文本的創(chuàng)建與編輯占據(jù)了制作工作的很大部分時(shí)間。能否對(duì)各種文本控制手段運(yùn)用自如，是決定網(wǎng)頁(yè)設(shè)計(jì)是否美觀(guān)、富有創(chuàng)意，以及提高工作效率的關(guān)鍵。一、插入文本在Dreamweaver2021中輸入文本有以下幾種方法：（1）直接在Dreamweaver的文檔窗口光標(biāo)所在位置輸入文本內(nèi)容。（2）在其他的應(yīng)用程序或文檔中復(fù)制文本，然后切換回（3）執(zhí)行“文件”/“導(dǎo)入”命令導(dǎo)入其他文檔中的文本，如XML和表格式數(shù)據(jù)。（4）從支持文本拖放功能的應(yīng)用程序中拖放文本到Dreamweaver2021的文檔窗口。案例——直接輸入文本首先打開(kāi)一個(gè)需要添加文本的網(wǎng)頁(yè)，然后在網(wǎng)頁(yè)中直接輸入文本。（1）打開(kāi)文件。（2）輸入文本。（3）保存文件。二、設(shè)置文本屬性網(wǎng)頁(yè)中的文字主要包括標(biāo)題、信息、文本鏈接等幾種主要形式。文本的大部分格式設(shè)置都可以通過(guò)屬性設(shè)置面板實(shí)現(xiàn)。執(zhí)行“窗口”/“屬性”命令，即可打開(kāi)屬性設(shè)置面板，如圖所示。打開(kāi)頁(yè)面

輸入文本

頁(yè)面效果單擊屬性面板左上角的按鈕，即可使用CSS規(guī)則格式化文本，如圖所示。三、創(chuàng)建列表項(xiàng)在編輯網(wǎng)頁(yè)時(shí)，常常需要對(duì)同級(jí)或不同級(jí)的多個(gè)項(xiàng)目進(jìn)行編號(hào)或排列，以顯示多個(gè)項(xiàng)目之間的層次關(guān)系，或使文本布局更有條理，這就需要用到列表。在Dreamweaver中，可以創(chuàng)建項(xiàng)目列表和編號(hào)列表，列表還可以被嵌套。項(xiàng)目列表（也稱(chēng)為無(wú)序列表），用不同的符號(hào)及縮進(jìn)的多少區(qū)分不同的層次；編號(hào)列表（也稱(chēng)為有序列表），通過(guò)數(shù)字及縮進(jìn)區(qū)分不同的層次。CSS規(guī)則屬性“管理字體”對(duì)話(huà)框案例——文檔中創(chuàng)建列表（1）新建一個(gè)文檔。（2）用鼠標(biāo)選擇除“李白文集”以外的其他項(xiàng)內(nèi)容，單擊屬性設(shè)置面板中的“無(wú)序列表”按鈕，則所有項(xiàng)目的左側(cè)都會(huì)顯示一個(gè)“●”符號(hào)。（3）選擇“山中問(wèn)答”和“軍行”兩項(xiàng)，單擊屬性設(shè)置面板中的“縮進(jìn)”按鈕，這兩項(xiàng)左側(cè)的“●”符號(hào)變成了“○”符號(hào)，表示它們?cè)诹斜淼牡诙?。?）用鼠標(biāo)選擇除“李白文集”以外的其他內(nèi)容，單擊屬性設(shè)置面板中的“編號(hào)列表”按鈕，則所有項(xiàng)目左側(cè)都會(huì)顯示數(shù)字，作為有序列表的第一層，如圖所示。（2）選擇“山中問(wèn)答”和“軍行”兩項(xiàng)，單擊屬性設(shè)置面板中的“縮進(jìn)”按鈕，這兩項(xiàng)左側(cè)會(huì)按順序顯示數(shù)字，表示它們是列表的第二層。同樣的方法，設(shè)置其他項(xiàng)，結(jié)果如圖所示。設(shè)置項(xiàng)目列表

設(shè)置編號(hào)列表編號(hào)列表、項(xiàng)目列表混排四、插入日期在網(wǎng)頁(yè)中，經(jīng)常會(huì)看到顯示有日期，且日期自動(dòng)更新。Dreamweaver2021提供了插入日期的功能，可以用多種格式在文檔中插入當(dāng)前時(shí)間，同時(shí)日期自動(dòng)更新。插入日期的步驟如下：（1）將插入點(diǎn)放在文檔中需要插入日期的位置。（2）切換到“插入”面板中的“HTML”面板。（3）單擊“日期”按鈕，此時(shí)出現(xiàn)“插入日期”對(duì)話(huà)框，如圖所示。在對(duì)話(huà)框中可以選擇星期、日期、時(shí)間的顯示方式。如果讀者希望插入的日期在每次保存文檔時(shí)自動(dòng)進(jìn)行更新，可以選中對(duì)話(huà)框中的“儲(chǔ)存時(shí)自動(dòng)更新”復(fù)選框。“插入日期”對(duì)話(huà)框（4）單擊“確定”按鈕，即可在文檔中插入當(dāng)前的日期。案例——插入日期下面通過(guò)一個(gè)簡(jiǎn)單的例子演示在文檔中插入日期的操作方法。（1）將插入點(diǎn)放在文檔中需要插入日期的位置，即“松鶴延年”下面，如圖所示。（2）打開(kāi)“HTML”插入面板，單擊面板中的“日期”按鈕，彈出“插入日期”對(duì)話(huà)框，如圖所示。（3）在對(duì)話(huà)框中選擇星期、日期、時(shí)間的顯示方式。本例僅設(shè)置日期，且日期格式為“1974年3月7日”。（4）選中對(duì)話(huà)框中的“儲(chǔ)存時(shí)自動(dòng)更新”復(fù)選框。（5）單擊“確定”按鈕，此時(shí)就在文檔中插入了當(dāng)前的日期，如圖所示。插入日期前的效果

“插入日期”對(duì)話(huà)框

最終效果任務(wù)2在網(wǎng)頁(yè)中插入圖像任務(wù)引入除了在網(wǎng)頁(yè)中插入文本之外，小明發(fā)現(xiàn)圖像也是很常見(jiàn)的元素，而且有些圖像還具有翻轉(zhuǎn)效果，那么要如何在網(wǎng)頁(yè)中插入圖像，如何修改圖像屬性和尺寸，如何創(chuàng)建翻轉(zhuǎn)圖像，如何設(shè)置頁(yè)面的背景圖像呢？知識(shí)準(zhǔn)備圖像在網(wǎng)頁(yè)中的作用是無(wú)可替代的。圖像不僅可以修飾網(wǎng)頁(yè)，使網(wǎng)頁(yè)美觀(guān)、圖文并茂，而且一幅合適的圖片，常常有勝過(guò)洋洋灑灑數(shù)篇文字的效果。一、關(guān)于圖像雖然存在很多種圖形文件格式，但網(wǎng)頁(yè)中通常只使用3種，即GIF、JPEG和PNG。目前GIF和JPEG文件格式的支持情況最好，大多數(shù)瀏覽器都可以查看它們。常用的圖形文件格式介紹如下：GIF（圖形交換格式）：文件最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像JPEG（聯(lián)合圖像專(zhuān)家組標(biāo)準(zhǔn)）：這種格式的文件可以包含數(shù)百萬(wàn)種顏色，是用于攝影或連續(xù)色調(diào)圖像的高級(jí)格式。PNG（可移植網(wǎng)絡(luò)圖形）：這是一種替代GIF格式的無(wú)專(zhuān)利權(quán)限制的格式，它包括對(duì)索引色、灰度、真彩色圖像以及alpha通道透明的支持。二、插入圖像圖像通常用于制作圖形界面（例如導(dǎo)航按鈕）、具有視覺(jué)感染力的內(nèi)容（例如照片）或交互式設(shè)計(jì)元素（例如鼠標(biāo)經(jīng)過(guò)圖像或圖像地圖）。在Dreamweaver文件中插入圖像時(shí)，Dreamweaver會(huì)自動(dòng)在網(wǎng)頁(yè)的HTML源代碼中生成對(duì)該圖像文件的引用。為了確保此引用的正確性，該圖像文件必須保存在當(dāng)前站點(diǎn)目錄中。如果所用的圖像不在當(dāng)前站點(diǎn)目錄中，Dreamweaver將詢(xún)問(wèn)是否將其復(fù)制到當(dāng)前站點(diǎn)目錄下。在Dreamweaver2021中插入圖像，可以執(zhí)行“插入”｜“圖像”菜單命令，也可以單擊“插入”｜“HTML”面板上的“圖像”按鈕。案例——插入圖像下面通過(guò)插入圖像和文字的示例，讓讀者了解插入圖像的具體步驟。插入圖像和文字后的效果如圖所示。（1）新建一個(gè)文檔，單擊文檔工具欄上的“設(shè)計(jì)”按鈕，切換到“設(shè)計(jì)”視圖。（2）單擊屬性面板中的“居中對(duì)齊”按鈕，然后在“設(shè)計(jì)”視圖空白處單擊，光標(biāo)將在中間位置顯示。（3）執(zhí)行“插入”｜“Image”命令，或單擊“插入”面板中“HTML”子面板上的“圖像”按鈕，彈出“選擇圖像源文件”對(duì)話(huà)框。（4）在“選擇圖像源文件”對(duì)話(huà)框中選擇要插入的圖像，如圖所示。然后單擊“確定”。該圖像出現(xiàn)在文檔中。（5）輸入詩(shī)文《黃鶴樓》。（6）保存文件，并用瀏覽器打開(kāi)文件，得到如圖4-14所示的效果。插入圖像與文本的效果

“選擇圖像源文件”對(duì)話(huà)框三、圖像的屬性將圖像插入文檔后，Dreamweaver2021會(huì)自動(dòng)按照?qǐng)D像的原始大小顯示，這可能與需要的尺寸不一致，通常還要對(duì)圖像的一些屬性進(jìn)行調(diào)整，如大小、位置等。這就要通過(guò)圖像的屬性面板實(shí)現(xiàn)。選中一個(gè)圖像，對(duì)應(yīng)的屬性面板如圖所示。該圖像屬性設(shè)置面板的各個(gè)參數(shù)介紹如下：“ID”：可以使用腳本語(yǔ)言（如JavaScript、VBScript）引用的唯一名稱(chēng)?！皩挕保河糜谠O(shè)置圖像的寬度?！案摺保河糜谠O(shè)置圖像的高度。四、修改圖像尺寸修改圖像的尺寸，是指調(diào)整圖像在文檔中顯示的寬度和高度。在Dreamweaver的“設(shè)計(jì)”視圖中可以可視化的形式調(diào)整圖片的大小，圖片的文件大小不發(fā)生變化。在Dreamweaver中，圖像的寬度和高度默認(rèn)單位為像素（Pixel）。（1）在“文檔”窗口中選擇一個(gè)圖像。圖像的底部、右側(cè)及右下角出現(xiàn)調(diào)整大小的手柄。（2）執(zhí)行下列操作調(diào)整圖像的大?。何?、創(chuàng)建翻轉(zhuǎn)圖像翻轉(zhuǎn)圖像就是當(dāng)鼠標(biāo)指針經(jīng)過(guò)圖片時(shí)，圖片會(huì)變成另外一張。一個(gè)翻轉(zhuǎn)圖像其實(shí)是由兩張圖片組成的：初始圖像（頁(yè)面加載時(shí)顯示的圖像）和翻轉(zhuǎn)圖像（鼠標(biāo)經(jīng)過(guò)初始圖像時(shí)顯示的圖像）。組成翻轉(zhuǎn)圖像的兩幅圖像必須具有相同的尺寸。如果尺寸不同，Dreamweaver2021會(huì)自動(dòng)將第二幅圖像的尺寸調(diào)整成與第一幅相同大小。案例——?jiǎng)?chuàng)建翻轉(zhuǎn)圖像下面通過(guò)創(chuàng)建一個(gè)翻轉(zhuǎn)圖像的示例，介紹創(chuàng)建翻轉(zhuǎn)圖像的具體操作，最終的效果如圖所示。（1）在文檔窗口中，將光標(biāo)置于要插入翻轉(zhuǎn)圖像的位置。（2）執(zhí)行“插入”｜“HTML”｜“鼠標(biāo)經(jīng)過(guò)圖像”命令，或單擊“插入”|“HTML”面板上的“鼠標(biāo)經(jīng)過(guò)圖像”按鈕，如圖所示，此時(shí)會(huì)彈出“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話(huà)框，如圖所示。

翻轉(zhuǎn)圖像效果（翻轉(zhuǎn)前）

翻轉(zhuǎn)圖像效果（翻轉(zhuǎn)后）（3）在“圖像名稱(chēng)”欄中輸入翻轉(zhuǎn)圖像的名稱(chēng)。（4）在“原始圖像”欄中輸入初始圖像的路徑，或者單擊“瀏覽”按鈕，從彈出的對(duì)話(huà)框中瀏覽選擇所需圖像文件。（5）在“鼠標(biāo)經(jīng)過(guò)圖像”欄中輸入翻轉(zhuǎn)圖像的路徑，或者單擊“瀏覽”按鈕，從彈出的對(duì)話(huà)框中瀏覽選擇圖像文件。（6）選中“預(yù)載鼠標(biāo)經(jīng)過(guò)圖像”復(fù)選框，可以將圖像預(yù)先加載到瀏覽器的緩存中，加快圖像顯示速度。（7）在“替換文本”文本框中輸入圖像的簡(jiǎn)短描述。當(dāng)網(wǎng)頁(yè)中的圖像不顯示時(shí)，顯示指定的替換文本。（8）單擊“確定”按鈕保存文件，完成翻轉(zhuǎn)圖像的創(chuàng)建。按F12鍵在瀏覽器中預(yù)覽翻轉(zhuǎn)圖效果。六、設(shè)置背景圖像若要定義頁(yè)面的背景色和背景圖像，可以使用“頁(yè)面屬性”對(duì)話(huà)框。如果同時(shí)使用背景圖像和背景顏色，下載圖像時(shí)會(huì)先出現(xiàn)顏色，然后圖像覆蓋顏色。如果背景圖像包含透明像素，則背景顏色透過(guò)背景圖像顯示出來(lái)。插入圖像菜單

“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話(huà)框案例——設(shè)置背景圖像下面通過(guò)一個(gè)簡(jiǎn)單實(shí)例演示背景圖像的創(chuàng)建過(guò)程，最終的效果如圖所示。具體制作步驟如下：（1）新建一個(gè)空白的HTML文件，執(zhí)行“文件”｜“頁(yè)面屬性”命令，或在“設(shè)計(jì)”視圖中單擊鼠標(biāo)右鍵，在彈出的上下文菜單中執(zhí)行“頁(yè)面屬性”命令，彈出“頁(yè)面屬性”對(duì)話(huà)框，如圖所示。（2）設(shè)置背景圖像。單擊“瀏覽”按鈕，然后瀏覽并選擇圖像；或者直接在“背景圖像”文本框中輸入背景圖像的路徑。（3）保存文件完成背景圖像制作，在瀏覽器中觀(guān)察創(chuàng)建的結(jié)果。背景圖像效果

“頁(yè)面屬性”對(duì)話(huà)框案例——禁用圖像平鋪下面通過(guò)一個(gè)實(shí)例介紹使用CSS樣式禁用圖像平鋪的步驟，最終效果如圖所示。制作步驟如下：圖4-23禁用圖像平鋪（1）打開(kāi)上例制作的文件，然后執(zhí)行“窗口”｜“CSS設(shè)計(jì)器”命令，打開(kāi)“CSS設(shè)計(jì)器”面板。（2）在“CSS設(shè)計(jì)器”面板中，單擊“添加CSS源”按鈕，在彈出的下拉菜單中選擇“在頁(yè)面中定義”命令。（3）在屬性列表中單擊“背景”按鈕，切換到背景屬性列表。（4）在background-repeat屬性右側(cè)選擇“不重復(fù)”，如圖所示。（5）在文檔窗口底部的標(biāo)簽選擇器中右擊<body>標(biāo)簽，在彈出的快捷菜單中單擊“設(shè)置類(lèi)”子菜單中的background（第2步新建的CSS樣式名），應(yīng)用樣式，如圖所示。（6）保存文件完成背景制作，在瀏覽器可看到圖所示的效果。定義CSS屬性

右擊<body>標(biāo)簽彈出快捷菜單項(xiàng)目總結(jié)項(xiàng)目實(shí)戰(zhàn)實(shí)戰(zhàn)一在網(wǎng)頁(yè)中插入文本和日期（1）執(zhí)行“文件”｜“新建”命令，新建一個(gè)網(wǎng)頁(yè)文件，設(shè)置背景顏色，在網(wǎng)頁(yè)中輸入文字。（2）打開(kāi)“HTML”插入面板，單擊面板中的“日期”按鈕，彈出“插入日期”對(duì)話(huà)框。（3）在對(duì)話(huà)框中選擇星期、日期、時(shí)間的顯示方式。單擊“確定”按鈕，此時(shí)就在文檔中插入了當(dāng)前的日期，結(jié)果如圖所示。實(shí)戰(zhàn)二