網(wǎng)頁(yè)制作第3次

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

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

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

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

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

6、表的前面有數(shù)字前導(dǎo)字符，其中前導(dǎo)字符可以是阿拉伯?dāng)?shù)字、英文字母或羅馬數(shù)字等。 w 編號(hào)列表： 1：將鼠標(biāo)光標(biāo)定位到要?jiǎng)?chuàng)建編號(hào)列表的位置。 2：?jiǎn)螕簟皩傩浴泵姘逯械摹熬幪?hào)列表”按鈕，數(shù)字前導(dǎo)字符將出現(xiàn)在鼠標(biāo)光標(biāo)前。 3：在數(shù)字前導(dǎo)字符后輸入相應(yīng)的文本，按“Enter”鍵換行后，下一個(gè)數(shù)字前導(dǎo)字符將自動(dòng)出現(xiàn)。 4：繼續(xù)輸入其他列表項(xiàng)的創(chuàng)建，完成整個(gè)列表的創(chuàng)建后按兩次“Enter”鍵即可。無(wú)序列表 無(wú)序列表又稱(chēng)為項(xiàng)目列表，是一系列無(wú)順序級(jí)別關(guān)系的項(xiàng)目文本組成的列表，一般前面是用項(xiàng)目符號(hào)作為前導(dǎo)字符。 w 項(xiàng)目列表：w 1：將鼠標(biāo)光標(biāo)定位到要?jiǎng)?chuàng)建項(xiàng)目列表的位置。w 2：在“屬性”面板中單擊“項(xiàng)目列表”

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

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

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

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

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

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

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

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

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

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

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

18、件 最簡(jiǎn)單的網(wǎng)頁(yè) 1.HTML文檔標(biāo)記2.HTML文件頭標(biāo)記3. HTML文件標(biāo)題標(biāo)記4. HTML文件主體標(biāo)記1.HTML文檔標(biāo)記文檔標(biāo)記 HTML文檔標(biāo)記的格式為： 文檔的內(nèi)容 HTML文檔的標(biāo)記。處于文檔的最前面，表示HTML文檔的開(kāi)始，即瀏覽器從開(kāi)始解釋?zhuān)钡接龅綖橹埂?每個(gè)HTML文件均以開(kāi)始，以結(jié)束。2.HTML文件頭標(biāo)記習(xí)慣上將HTML文檔分為文件頭和文件主體兩部分。文件主體是在WEB瀏覽器窗口的用戶區(qū)顯示的內(nèi)容，而文件頭則用來(lái)規(guī)定該文檔的標(biāo)題（瀏覽器標(biāo)題欄中的內(nèi)容）和文檔的一些屬性。HTML文件頭標(biāo)記格式： 頭部的內(nèi)容說(shuō)明：HTML文件的頭部在文件標(biāo)記之后，在開(kāi)始標(biāo)記間定義。其內(nèi)容可以是標(biāo)題名，文本文件地址、創(chuàng)作信息等網(wǎng)頁(yè)信息說(shuō)明。對(duì)應(yīng)于相應(yīng)的標(biāo)記，有標(biāo)題標(biāo)記等。標(biāo)記在HT