第三章插入基本網頁元素

第三章插入基本網頁元素第1頁，課件共32頁，創(chuàng)作于2023年2月（1）換行符

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

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

（3）轉義符將視圖切換到“拆分”模式，可以看到空格、注冊商標等特殊符號用HTML代碼表示時不是直接表示，而是用他們的轉義符表示。第2頁，課件共32頁，創(chuàng)作于2023年2月3.1.2設置文字屬性1.設置方法使用組合鍵[Ctrl]+F3或菜單“窗口”“屬性”打開屬性面板。2.改變文字大小

文本屬性面板上的“大小”一項是用來設定文字大小的。3.改變文字顏色

選中要改變顏色的文字，在屬性面板中單擊文本屬性面板中的取色器，在彈出的顏色面板上選擇適當的顏色，可改變文字的顏色。

4.改變字體

選中文字后，打開“字體”下拉菜單，選擇其中的一種字體，選中文字后，單擊按鈕將文字變?yōu)榇煮w，單擊按鈕將文字變?yōu)樾斌w。第3頁，課件共32頁，創(chuàng)作于2023年2月5.使用樣式設置文字格式樣式是指對文字進行了大小、顏色設置后的綜合的屬性，以后再使用需要將文字設置與某種樣式相同的效果時，不需要一一設置顏色、大小等，直接在樣式列表中選擇就可以了。6.把文字變?yōu)闃祟}將光標放在一個段落的文字中任意位置，在屬性面板的“格式”下拉菜單中選擇一個標題格式，可以將一個段落設為相應的標題樣式。7.設置段落對齊方式將光標放在一個段落的文字中任意位置，單擊左對齊，居中，右對齊按鈕。8.列表當顯示多個相關的條目時，使用列表方式可以清楚地表示出各個條目的并列關系。第4頁，課件共32頁，創(chuàng)作于2023年2月3.1.3插入滾動字幕1.插入滾動字幕（1）單擊編輯窗口上方的“拆分”按鈕，將視圖切換為拆分模式。

（2）在下方的設計窗口中單擊要插入滾動字幕的位置，此時注意查看代碼窗口中光標的位置。（3）將插入工具欄設置為“常規(guī)”，單擊標簽選擇器按鈕，打開標簽選擇器對話框。（4）在標簽選擇器對話框左邊窗口逐級選擇“HTML標簽”→“頁元素”→“瀏覽器特定”，然后在右邊窗口中單擊“marquee”，再單擊下面的“插入”按鈕，marquee標簽被插入到代碼中，按“關閉”按鈕關閉對話框。（5）在代碼中出現<marquee></marquee>，在中間的兩個尖括號“><”之間輸入要滾動的文字，如“歡迎訪問勵志學社的主頁！”。第5頁，課件共32頁，創(chuàng)作于2023年2月2.設置滾動字幕的屬性direction為滾動的目標方向，可選right、left、up、down。scrollamount和scrolldelay為滾動數量和延遲，可設置滾動速度和間隔時間。loop設置循環(huán)次數，小于1為連續(xù)循環(huán)。Bgcolor設置滾動區(qū)域的背景顏色。width和height設置滾動區(qū)域的大小，沿垂直方向（up或down）滾動時，必須設置一定的高度值，否則看不到滾動的文字。第6頁，課件共32頁，創(chuàng)作于2023年2月3.1.4設置文本超級鏈接1.使用屬性面板設置超級鏈接2.使用工具按鈕（1）插入超級鏈接單擊工具欄上的超級鏈接按鈕（2）插入郵件鏈接鏈接目標是電子郵件地址時，單擊工具欄上的電子郵件鏈接按鈕第7頁，課件共32頁，創(chuàng)作于2023年2月3.1.5使用錨記1.設置錨記在編輯窗口中單擊要設置錨記的位置，在單擊工具欄上的插入錨記按鈕2.使用錨記一般在頁面頂部制作包含錨記的網頁的目錄，然后將目錄鏈接到錨記所在位置，瀏覽網頁時單擊該鏈接窗口可以直接跳轉到該位置。

選中目錄文字，在屬性面板的鏈接欄輸入“#”和錨記名稱，如“#a04”，即可將連接目標設置為錨記位置。第8頁，課件共32頁，創(chuàng)作于2023年2月3.1.6插入水平線水平線可用于頁面上內容的分隔。將工具按鈕切換到“HTML”，單擊水平線按鈕單擊該水平線，可在屬性面板中設置水平線的屬性，如寬度、高度、對齊方式等。第9頁，課件共32頁，創(chuàng)作于2023年2月3.2插入圖像3.2.1網頁中的圖像1.圖像的作用網頁中的圖像分為正文圖像和裝飾圖像。2.圖像的格式

DreamweaverMX和大多數瀏覽器一樣支持使用JPEG和GIF圖像。3.圖像文件的保存網頁中的圖像不和網頁保存在一個文件中，而是單獨的圖像文件。常見的是將裝飾文件保存在images文件夾中，將正文圖像保存在pics文件夾中。第10頁，課件共32頁，創(chuàng)作于2023年2月3.2.2插入圖像1.插入圖像

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

單擊工具欄上的圖像按鈕旁邊的小三角形，在下拉式菜單中選擇圖像占位符按鈕單擊工具欄上的圖像按鈕旁邊的小三角形，在下拉式菜單中選擇鼠標經過圖像按鈕第14頁，課件共32頁，創(chuàng)作于2023年2月3.3插入表格3.3.1表格的知識表格由數個行與列組成的，行、列交叉組成表格的單元格，可以在表格的單元格內插入各種信息，包括文本、數字、鏈接，甚至是圖像。第15頁，課件共32頁，創(chuàng)作于2023年2月3.3.2添加表格1.新建表格（1）將插入工具欄切換到“常用”模式，單擊表格按鈕（2）在表格對話框中設置表格的樣式。（3）單擊“確定”按鈕就可以把表格插到網頁中。（4）在表格的各個單元格中分別輸入內容。第16頁，課件共32頁，創(chuàng)作于2023年2月2.修改表格屬性在編輯窗口中，單擊表格的左上角或在邊框線上的任意位置雙擊，即可選中表格，在屬性面板中可進一步設置表格，屬性面板中的行、列、寬、填充、間距、邊框的設置和添加表格相同，這里可以修改其具體數值。3.設置單元格屬性表格由很多單元格組成，每個單元格可以設置不同的屬性。也可以同時選中多個單元格，設置其共同的屬性。第17頁，課件共32頁，創(chuàng)作于2023年2月3.3.3編輯表格1.合并單元格拖動選中要合并的單元格，單擊屬性面板上的合并單元格按鈕2.拆分單元格在要拆分的單元格中單擊，在單擊屬性面板上的拆分單元格按鈕3.插入或刪除行、列使用菜單“操作”→“表格”菜單中的插入行或列，刪除行或列進行相應的操作。第18頁，課件共32頁，創(chuàng)作于2023年2月3.3.4格式化表格在要格式化的表格中單擊，再使用菜單“命令”→“格式化表格”打開格式化表格對話框。第19頁，課件共32頁，創(chuàng)作于2023年2月3.3.5導入表格數據1.導出Excel數據為文本文件在Excel中使用菜單“文件”→“另存為”打開另存為對話框，在“文件類型”中選擇“文本文件（制表符分割）（*.txt）”，保存文件為biaoge.txt。2.導入位網頁表格將“插入”工具欄切換為“布局”模式，在右邊單擊表格數據按鈕選擇數據文件為Excel導出的文本文件biaoge.txt，定界符選“Tab”。表格寬度設置單元格的寬度，選擇“匹配內容”。也可以制定寬度。第20頁，課件共32頁，創(chuàng)作于2023年2月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多媒體教學課件格式第21頁，課件共32頁，創(chuàng)作于2023年2月3.4.2插入Flash1.插入Flash動畫將插入工具欄切換到“常用”模式，單擊“媒體：Flash”按鈕2.插入Flash按鈕將插入工具欄切換到“常用”模式，單擊“媒體：Flash”按鈕旁邊的三角形，在菜單中選擇“媒體：Flash按鈕”按鈕3.插入Flash文本將插入工具欄切換到“常用”模式，單擊“媒體：Flash”按鈕旁邊的三角形，在菜單中選擇“媒體：Flash文本”按鈕第22頁，課件共32頁，創(chuàng)作于2023年2月3.4.3制作播電影、聲音的頁面1.插入插件（1）將插入工具欄切換到“常用”模式，單擊“媒體：Flash”按鈕旁邊的三角形，在菜單中選擇“媒體：Flash文本”按鈕（2）選擇一個要插入網頁的電影格式的文件（3）在編輯窗口中看到插入了一個灰色矩形插件標志，調整其大小可調整網頁中的播放窗口的大小。（4）單擊屬性面板上的“參數”按鈕，可設置各種播放參數。第23頁，課件共32頁，創(chuàng)作于2023年2月3.插入背景聲音（1）將插入工具欄設置為“常規(guī)”，單擊標簽選擇器按鈕

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

插入的表單區(qū)域用紅色虛線表示，后面插入的所有表單元素都要插入到這個虛線中。第25頁，課件共32頁，創(chuàng)作于2023年2月3.5.2文本字段1.單行文本在表單中輸入“用戶名”，在單擊工具欄上的文本字段按鈕2.密碼密碼輸入區(qū)用于用戶輸入密碼信息，用戶在此區(qū)域輸入的所有字符都顯示為“*”或黑點。3.多行文本在單擊工具欄上的文本區(qū)域按鈕第26頁，課件共32頁，創(chuàng)作于2023年2月3.5.3復選框單擊工具欄上的復選框按鈕

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