第三章插入基本網(wǎng)頁元素

第三章

插入基本網(wǎng)頁元素3.1插入文字3.1.1輸入文字1.插入文本2.插入特殊符號將插入工具切換到“文本”工具組，最右邊的工具按鈕就是特殊符號按鈕，如圖3.1所示。單擊右邊的三角形可打開字符選擇菜單。使用菜單“插入”→“HTML”→“特殊字符”，也可選擇要插入的字符插入到網(wǎng)頁中。（1）換行符

使用[Shift]+[Enter]組合鍵和直接輸入換行符。（2）不換行空格和其他符號

DreamweaverMX2004不能直接用空格鍵輸入空格，必須用[Ctrl]+[Shift]+[空格]組合鍵輸入，或者通過插入特殊符號“不換行空格”插入。

（3）轉(zhuǎn)義符將視圖切換到“拆分”模式，可以看到空格、注冊商標(biāo)等特殊符號用HTML代碼表示時不是直接表示，而是用他們的轉(zhuǎn)義符表示。3.1.2設(shè)置文字屬性1.設(shè)置方法

使用組合鍵[Ctrl]+F3或菜單“窗口”“屬性”打開屬性面板。2.改變文字大小

文本屬性面板上的“大小”一項(xiàng)是用來設(shè)定文字大小的。3.改變文字顏色

選中要改變顏色的文字，在屬性面板中單擊文本屬性面板中的取色器，在彈出的顏色面板上選擇適當(dāng)?shù)念伾?，可改變文字的顏色?/p>

4.改變字體

選中文字后，打開“字體”下拉菜單，選擇其中的一種字體，選中文字后，單擊按鈕將文字變?yōu)榇煮w，單擊按鈕將文字變?yōu)樾斌w。5.使用樣式設(shè)置文字格式樣式是指對文字進(jìn)行了大小、顏色設(shè)置后的綜合的屬性，以后再使用需要將文字設(shè)置與某種樣式相同的效果時，不需要一一設(shè)置顏色、大小等，直接在樣式列表中選擇就可以了。6.把文字變?yōu)闃?biāo)題將光標(biāo)放在一個段落的文字中任意位置，在屬性面板的“格式”下拉菜單中選擇一個標(biāo)題格式，可以將一個段落設(shè)為相應(yīng)的標(biāo)題樣式。7.設(shè)置段落對齊方式將光標(biāo)放在一個段落的文字中任意位置，單擊左對齊，居中，右對齊按鈕。

8.列表當(dāng)顯示多個相關(guān)的條目時，使用列表方式可以清楚地表示出各個條目的并列關(guān)系。3.1.3插入滾動字幕1.插入滾動字幕（1）單擊編輯窗口上方的“拆分”按鈕，將視圖切換為拆分模式。

（2）在下方的設(shè)計窗口中單擊要插入滾動字幕的位置，此時注意查看代碼窗口中光標(biāo)的位置。（3）將插入工具欄設(shè)置為“常規(guī)”，單擊標(biāo)簽選擇器按鈕，打開標(biāo)簽選擇器對話框。（4）在標(biāo)簽選擇器對話框左邊窗口逐級選擇“HTML標(biāo)簽”→“頁元素”→“瀏覽器特定”，然后在右邊窗口中單擊“marquee”，再單擊下面的“插入”按鈕，marquee標(biāo)簽被插入到代碼中，按“關(guān)閉”按鈕關(guān)閉對話框。（5）在代碼中出現(xiàn)<marquee></marquee>，在中間的兩個尖括號“><”之間輸入要滾動的文字，如“歡迎訪問勵志學(xué)社的主頁！”。2.設(shè)置滾動字幕的屬性direction為滾動的目標(biāo)方向，可選right、left、up、down。scrollamount

和scrolldelay為滾動數(shù)量和延遲，可設(shè)置滾動速度和間隔時間。loop設(shè)置循環(huán)次數(shù)，小于1為連續(xù)循環(huán)。Bgcolor設(shè)置滾動區(qū)域的背景顏色。width和height設(shè)置滾動區(qū)域的大小，沿垂直方向（up或down）滾動時，必須設(shè)置一定的高度值，否則看不到滾動的文字。3.1.4設(shè)置文本超級鏈接1.使用屬性面板設(shè)置超級鏈接2.使用工具按鈕（1）插入超級鏈接單擊工具欄上的超級鏈接按鈕（2）插入郵件鏈接鏈接目標(biāo)是電子郵件地址時，單擊工具欄上的電子郵件鏈接按鈕3.1.5使用錨記1.設(shè)置錨記在編輯窗口中單擊要設(shè)置錨記的位置，在單擊工具欄上的插入錨記按鈕2.使用錨記一般在頁面頂部制作包含錨記的網(wǎng)頁的目錄，然后將目錄鏈接到錨記所在位置，瀏覽網(wǎng)頁時單擊該鏈接窗口可以直接跳轉(zhuǎn)到該位置。

選中目錄文字，在屬性面板的鏈接欄輸入“#”和錨記名稱，如“#a04”，即可將連接目標(biāo)設(shè)置為錨記位置。3.1.6插入水平線水平線可用于頁面上內(nèi)容的分隔。將工具按鈕切換到“HTML”，單擊水平線按鈕單擊該水平線，可在屬性面板中設(shè)置水平線的屬性，如寬度、高度、對齊方式等。3.2插入圖像3.2.1網(wǎng)頁中的圖像1.圖像的作用

網(wǎng)頁中的圖像分為正文圖像和裝飾圖像。2.圖像的格式

DreamweaverMX和大多數(shù)瀏覽器一樣支持使用JPEG和GIF圖像。3.圖像文件的保存網(wǎng)頁中的圖像不和網(wǎng)頁保存在一個文件中，而是單獨(dú)的圖像文件。常見的是將裝飾文件保存在images文件夾中，將正文圖像保存在pics文件夾中。3.2.2插入圖像1.插入圖像

（1）把工具欄切換到“常用”狀態(tài)，然后單擊“圖像：圖象”按鈕（2）選擇要插入的圖像文件，在文件列表中單擊一個圖象文件時，圖象預(yù)覽區(qū)會顯示這個圖象的縮略圖。（3）單擊確定按鈕，如果圖像文件在站點(diǎn)文件夾中，就會直接插入到網(wǎng)頁中，同時在編輯窗口顯示出圖像。將文件面板中的圖像文件文件名直接拖動到編輯窗口中，也可以將此圖像文件插入到網(wǎng)頁中。2.設(shè)置圖象的基本屬性（1）改變圖像大小拖動圖像上的3個控制點(diǎn)可以隨意改變圖像的大小，拖動時，屬性面板上的長、寬數(shù)值也作相應(yīng)的改變。（2）圖文混排圖像和文字在同一行時，使用屬性面板上的對齊屬性可以設(shè)置圖文的混排方式。（3）垂直邊距和水平邊距垂直邊距和水平邊距欄設(shè)置圖像和周圍的文字的距離，單位為像素。（4）圖像替代在圖像替代欄輸入圖片的文字說明，當(dāng)瀏覽器關(guān)閉圖像顯示時，圖像方框中會出現(xiàn)說明文字，當(dāng)鼠標(biāo)移動到圖像上面時，也會顯示替代文字。（5）圖像邊框在邊框欄輸入一個數(shù)字可設(shè)置圖像的邊框，默認(rèn)的邊框值為0。邊框線的顏色不能更改，通常將邊框值設(shè)為1，可以美化圖像3.2.3圖片超級鏈接和圖像地圖1.圖片超級鏈接2.圖像地圖如果想在一個圖像的不同位置上點(diǎn)擊，就跳轉(zhuǎn)到相應(yīng)的目標(biāo)網(wǎng)頁，就需要使用圖象地圖。（1）設(shè)置矩形熱區(qū)（2）設(shè)置圓形熱區(qū)（3）設(shè)置多邊形熱區(qū)3.2.4圖像占位符和輪換圖像1.圖象占位符2.插入鼠標(biāo)經(jīng)過圖像

單擊工具欄上的圖像按鈕旁邊的小三角形，在下拉式菜單中選擇圖像占位符按鈕單擊工具欄上的圖像按鈕旁邊的小三角形，在下拉式菜單中選擇鼠標(biāo)經(jīng)過圖像按鈕3.3插入表格3.3.1表格的知識表格由數(shù)個行與列組成的，行、列交叉組成表格的單元格，可以在表格的單元格內(nèi)插入各種信息，包括文本、數(shù)字、鏈接，甚至是圖像。3.3.2添加表格1.新建表格（1）將插入工具欄切換到“常用”模式，單擊表格按鈕（2）在表格對話框中設(shè)置表格的樣式。

（3）單擊“確定”按鈕就可以把表格插到網(wǎng)頁中。（4）在表格的各個單元格中分別輸入內(nèi)容。2.修改表格屬性在編輯窗口中，單擊表格的左上角或在邊框線上的任意位置雙擊，即可選中表格，在屬性面板中可進(jìn)一步設(shè)置表格，屬性面板中的行、列、寬、填充、間距、邊框的設(shè)置和添加表格相同，這里可以修改其具體數(shù)值。3.設(shè)置單元格屬性表格由很多單元格組成，每個單元格可以設(shè)置不同的屬性。也可以同時選中多個單元格，設(shè)置其共同的屬性。3.3.3編輯表格1.合并單元格拖動選中要合并的單元格，單擊屬性面板上的合并單元格按鈕2.拆分單元格在要拆分的單元格中單擊，在單擊屬性面板上的拆分單元格按鈕3.插入或刪除行、列使用菜單“操作”→“表格”菜單中的插入行或列，刪除行或列進(jìn)行相應(yīng)的操作。3.3.4格式化表格在要格式化的表格中單擊，再使用菜單“命令”→“格式化表格”打開格式化表格對話框。3.3.5導(dǎo)入表格數(shù)據(jù)1.導(dǎo)出Excel數(shù)據(jù)為文本文件在Excel中使用菜單“文件”→“另存為”打開另存為對話框，在“文件類型”中選擇“文本文件（制表符分割）（*.txt）”，保存文件為biaoge.txt。2.導(dǎo)入位網(wǎng)頁表格將“插入”工具欄切換為“布局”模式，在右邊單擊表格數(shù)據(jù)按鈕選擇數(shù)據(jù)文件為Excel導(dǎo)出的文本文件biaoge.txt，定界符選“Tab”。表格寬度設(shè)置單元格的寬度，選擇“匹配內(nèi)容”。也可以制定寬度。3.4插入媒體元素3.4.1媒體文件的類型1.RealVideo的.rm、.rmvb視頻影像格式和.ra的音頻格式2.MicrosoftMediatechnology的.asf格式3.QuickTim的.qt格式4.Flash的.swf格式5.Metastream的.mts格式6.Authorware的.aam多媒體教學(xué)課件格式3.4.2插入Flash1.插入Flash動畫將插入工具欄切換到“常用”模式，單擊“媒體：Flash”按鈕2.插入Flash按鈕將插入工具欄切換到“常用”模式，單擊“媒體：Flash”按鈕旁邊的三角形，在菜單中選擇“媒體：Flash按鈕”按鈕3.插入Flash文本將插入工具欄切換到“常用”模式，單擊“媒體：Flash”按鈕旁邊的三角形，在菜單中選擇“媒體：Flash文本”按鈕3.4.3制作播電影、聲音的頁面1.插入插件（1）將插入工具欄切換到“常用”模式，單擊“媒體：Flash”按鈕旁邊的三角形，在菜單中選擇“媒體：Flash文本”按鈕（2）選擇一個要插入網(wǎng)頁的電影格式的文件（3）在編輯窗口中看到插入了一個灰色矩形插件標(biāo)志，調(diào)整其大小可調(diào)整網(wǎng)頁中的播放窗口的大小。（4）單擊屬性面板上的“參數(shù)”按鈕，可設(shè)置各種播放參數(shù)。3.插入背景聲音（1）將插入工具欄設(shè)置為“常規(guī)”，單擊標(biāo)簽選擇器按鈕

（2）在標(biāo)簽選擇器對話框左邊窗口逐級選擇“HTML標(biāo)簽”→“頁元素”→“瀏覽器特定”，然后在右邊窗口中單擊“bgsound”，再單擊下面的“插入”按鈕，打開“標(biāo)簽編輯器--bgsound”對話框。（3）在“源”中指定背景音樂文件，可以是.wav、.mid或.mp3格式的音頻文件。（4）在“循環(huán)”欄指定網(wǎng)頁調(diào)入時背景音樂的播放次數(shù)，選擇“無限（-1）”循環(huán)播放。其他選項(xiàng)根據(jù)需要設(shè)置。（5）單擊“確定”，背景音樂就插入到網(wǎng)頁中。關(guān)閉標(biāo)簽選擇器對話框。3.5插入表單3.5.1創(chuàng)建表單將插入工具欄切換到“表單”模式，單擊創(chuàng)建表單按鈕

插入的表單區(qū)域用紅色虛線表示，后面插入的所有表單元素都要插入到這個虛線中。3.5.2文本字段1.單行文本在表單中輸入“用戶名”，在單擊工具欄上的文本字段按鈕2.密碼密碼輸入?yún)^(qū)用于用戶輸入密碼信息，用戶在此區(qū)域輸入的所有字符都顯示為“*”或黑點(diǎn)。3.多行文本在單擊工具欄上的文本區(qū)域按鈕3.5.3復(fù)選框單擊工具欄上的復(fù)選框按鈕

3.5.6單選按鈕1.單選按鈕單擊工具欄上的單選按鈕按鈕2.單選按鈕組單擊工具欄上的單選按鈕組按鈕3.5.5下拉菜單1.列表/菜單單擊工具欄上的列表/菜單按鈕2.跳轉(zhuǎn)菜單在工具欄上單擊跳轉(zhuǎn)菜單按鈕3.5.6隱藏區(qū)域在工具欄上單擊隱藏域按鈕在網(wǎng)頁中插入一個隱藏域標(biāo)志3.5.7按鈕在工具欄上單擊按鈕按鈕思考題3.1網(wǎng)頁中的基本元素有哪些？3.2換行符和回車分段有什么區(qū)別？為什么要使用轉(zhuǎn)義符？3.3如何在字體列表中增加字體？3.4滾動字幕有什么作用？如何改變滾動字幕運(yùn)動方向3.5使用Dreamweaver制作一個網(wǎng)頁有哪些步驟？3.6添加超級鏈接目標(biāo)有幾種方法？如何使得超級鏈接打開一個新窗口？3.7什么是錨記？什么是圖像熱區(qū)？3.8網(wǎng)頁中的圖像主要有哪些格式？替代文字有什么作用？3.9如何實(shí)現(xiàn)圖文混排？3.10表格格式化有什么好處？3.11網(wǎng)頁中可以插入哪些多媒體文件？3.12表單的作用是什么？為什么要給每個表單項(xiàng)目命名？提交按鈕和復(fù)位按鈕各自有什么作用？上機(jī)練習(xí)題：上機(jī)練習(xí)3.11.練習(xí)目的：學(xué)習(xí)制作文字和圖像網(wǎng)頁。2.練習(xí)步驟：（1）新建一個純文字網(wǎng)頁31.htm。要求包含多段文字、換行符、水平線、超級鏈接、錨記、版權(quán)標(biāo)記，并將文字