《網(wǎng)頁(yè)設(shè)計(jì)與制作》第三章:插入網(wǎng)頁(yè)基本元素_第1頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》第三章:插入網(wǎng)頁(yè)基本元素_第2頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》第三章:插入網(wǎng)頁(yè)基本元素_第3頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》第三章:插入網(wǎng)頁(yè)基本元素_第4頁(yè)
《網(wǎng)頁(yè)設(shè)計(jì)與制作》第三章:插入網(wǎng)頁(yè)基本元素_第5頁(yè)
已閱讀5頁(yè),還剩44頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、2022-3-241第3章 插入網(wǎng)頁(yè)基本元素 本章要點(diǎn)v插入文字v插入圖像v插入表格v插入媒體元素v插入表單2022-3-242插入文字v在Dreamweaver中為網(wǎng)頁(yè)插入文本有兩種方法:v直接輸入文本v從其他文檔中復(fù)制文本2022-3-243插入特殊符號(hào)v將插入工具切換到“文本”工具組;v使用菜單“插入”“HTML” “特殊字符”。2022-3-244插入特殊符號(hào)v插入換行符 使用Shift+Enter組合鍵 2022-3-245插入特殊符號(hào)v插入空格 ctrlshift空格 插入特殊符號(hào),不換行空格v插入轉(zhuǎn)義符2022-3-246設(shè)置文字屬性v進(jìn)行設(shè)置時(shí)使用組合鍵Ctrl+F3或菜單“窗

2、口”“屬性”打開(kāi)屬性面板。 設(shè)置字體大小 設(shè)置字體顏色 設(shè)置字體列表 【字體】【編輯字體列表】 單擊 在可用字體中選則,單擊按鈕,增加字體列表2022-3-247使用樣式設(shè)置文字格式v【樣式】選擇 重命名、再進(jìn)行修改。把文字變?yōu)闃?biāo)題 在屬性面板的格式中選擇設(shè)置文本對(duì)齊 在屬性面板中設(shè)置列表 在屬性面板中進(jìn)行設(shè)置2022-3-248 應(yīng)用舉例設(shè)置網(wǎng)頁(yè)文本格式v下面為“如果”網(wǎng)頁(yè)中的文本進(jìn)行格式設(shè)置,要求文本標(biāo)題樣式與正文不同,正文中某些文字需突出,以達(dá)到美化網(wǎng)頁(yè)文本的目的。2022-3-249網(wǎng)頁(yè)效果圖 2022-3-2410插入滾動(dòng)字幕1.1.插入滾動(dòng)字幕插入滾動(dòng)字幕(1)單擊編輯窗口上方的“

3、拆分”按鈕,將視圖切換為拆分模式。 (2)在下方的設(shè)計(jì)窗口中單擊要插入滾動(dòng)字幕的位置,此時(shí)注意查看代碼窗口中光標(biāo)的位置。(3)將插入工具欄設(shè)置為“常規(guī)”,單擊標(biāo)簽選擇器按鈕,打開(kāi)標(biāo)簽選擇器對(duì)話框。 (4)在標(biāo)簽選擇器對(duì)話框左邊窗口逐級(jí)選擇“HTML標(biāo)簽” “頁(yè)元素”“瀏覽器特定”,然后在右邊窗口中單擊“marquee”,再單擊下面的“插入”按鈕,marquee標(biāo)簽被插入到代碼中,按“關(guān)閉”按鈕關(guān)閉對(duì)話框。 (5)在代碼中出現(xiàn),在中間的兩個(gè)尖括號(hào)“”之間輸入要滾動(dòng)的文字,如“歡迎訪問(wèn)勵(lì)志學(xué)社的主頁(yè)!” 。2022-3-2411設(shè)置滾動(dòng)字幕的屬性設(shè)置滾動(dòng)字幕的屬性 direction為滾動(dòng)的目標(biāo)方

4、向,可選right、left、up、down。scrollamount 和scrolldelay為滾動(dòng)數(shù)量和延遲,可設(shè)置滾動(dòng)速度和間隔時(shí)間。loop設(shè)置循環(huán)次數(shù),小于1為連續(xù)循環(huán)。Bgcolor設(shè)置滾動(dòng)區(qū)域的背景顏色。width 和height設(shè)置滾動(dòng)區(qū)域的大小,沿垂直方向(up或down)滾動(dòng)時(shí),必須設(shè)置一定的高度值,否則看不到滾動(dòng)的文字。2022-3-2412 設(shè)置文本超級(jí)鏈接1.1.使用屬性面板使用屬性面板 設(shè)置超級(jí)鏈接設(shè)置超級(jí)鏈接2.2.使用工具按鈕使用工具按鈕(1)插入超級(jí)鏈接 單擊工具欄上的超級(jí)鏈接按鈕 (2)插入郵件鏈接 鏈接目標(biāo)是電子郵件地址時(shí),單擊工具欄上的電子郵件鏈接按鈕

5、2022-3-2413設(shè)置文本超級(jí)鏈接3、設(shè)置下載文件的超級(jí)鏈接4、創(chuàng)建外部鏈接 Http:/5、鏈接文字顏色的設(shè)置 通過(guò)頁(yè)面屬性來(lái)設(shè)置的。2022-3-2414使用錨記 v設(shè)置錨記 v使用錨記 2022-3-2415 插入水平線 水平線可用于頁(yè)面上內(nèi)容的分隔。 將工具按鈕切換到“HTML”,單擊水平線按鈕 單擊該水平線,可在屬性面板中設(shè)置水平線的屬性,如寬度、高度、對(duì)齊方式等。 水平線的顏色可以使用屬性面板中的“快速標(biāo)簽編輯器”設(shè)置。值得注意的是水平線的顏色只能在預(yù)覽時(shí)看出來(lái)。 2022-3-2416插入圖像v圖像的格式 用于網(wǎng)頁(yè)的圖像通常只有GIF、JPG和PNG 3種格式。v圖像的獲取方

6、法v圖像文件的保存 2022-3-2417插入圖像v插入圖像的步驟如下 :(1)把工具欄切換到“常用”狀態(tài),然后單擊“圖像:圖象”按鈕(2)選擇要插入的圖像文件,在文件列表中單擊一個(gè)圖象文件時(shí),圖象預(yù)覽區(qū)會(huì)顯示這個(gè)圖象的縮略圖。(3)單擊確定按鈕,如果圖像文件在站點(diǎn)文件夾中,就會(huì)直接插入到網(wǎng)頁(yè)中,同時(shí)在編輯窗口顯示出圖像。 2022-3-2418設(shè)置圖像的基本屬性v改變圖像大小v圖文混排v垂直邊距和水平邊距v圖像替代v圖像邊框2022-3-2419圖片超級(jí)鏈接和圖像地圖1.1.圖片超級(jí)鏈接圖片超級(jí)鏈接2.2.圖像地圖圖像地圖 如果想在一個(gè)圖像的不同位置上點(diǎn)擊,就跳轉(zhuǎn)到相應(yīng)的目標(biāo)網(wǎng)頁(yè),就需要使用

7、圖象地圖。 (1)設(shè)置矩形熱區(qū)(2)設(shè)置圓形熱區(qū)(3)設(shè)置多邊形熱區(qū)2022-3-2420圖像占位符和輪換圖像1. 1. 圖象占位符圖象占位符2.2.插入鼠標(biāo)經(jīng)過(guò)圖像插入鼠標(biāo)經(jīng)過(guò)圖像 單擊工具欄上的圖像按鈕旁邊的小三角形,在下拉式菜單中選擇圖像占位符按鈕 單擊工具欄上的圖像按鈕旁邊的小三角形,在下拉式菜單中選擇鼠標(biāo)經(jīng)過(guò)圖像按鈕 2022-3-2421設(shè)置網(wǎng)頁(yè)圖片屬性最終效果圖2022-3-2422插入表格 v添加表格 v編輯表格 v格式化表格 v導(dǎo)入表格數(shù)據(jù) 2022-3-2423表格的知識(shí) 表格由數(shù)個(gè)行與列組成的,行、列交叉組成表格的單元格,可以在表格的單元格內(nèi)插入各種信息,包括文本、數(shù)字、

8、鏈接,甚至是圖像。2022-3-2424添加表格v新建表格新建表格v修改表格屬性修改表格屬性 v設(shè)置單元格屬性設(shè)置單元格屬性 2022-3-24251.1.新建表格新建表格(1)將插入工具欄切換到“常用”模式,單擊表格按鈕 (2)在表格對(duì)話框中設(shè)置表格的樣式。 (3)單擊“確定”按鈕就可以把表格插到網(wǎng)頁(yè)中。(4)在表格的各個(gè)單元格中分別輸入內(nèi)容。2022-3-24262.2.修改表格屬性修改表格屬性v寬和高 v背景顏色 v邊框顏色 v背景圖像 v對(duì)齊設(shè)置2022-3-24273.3.設(shè)置單元格屬性設(shè)置單元格屬性v文字(屬性面板的上半部分)文字(屬性面板的上半部分)v水平水平 v寬、高寬、高 v

9、垂直垂直 v標(biāo)題標(biāo)題 v背景和背景顏色背景和背景顏色 v邊框邊框 2022-3-2428 應(yīng)用舉例在網(wǎng)頁(yè)中插入表格并添加網(wǎng)頁(yè)元素v下面為“繁花似錦”網(wǎng)頁(yè)進(jìn)行表格的添加和網(wǎng)頁(yè)元素的添加。2022-3-2429最終效果圖2022-3-2430編輯表格1.1.合并單元格合并單元格拖動(dòng)選中要合并的單元格,單擊屬性面板上的合并單元格按鈕 2.2.拆分單元格拆分單元格在要拆分的單元格中單擊,在單擊屬性面板上的拆分單元格按鈕 3.3.插入或刪除行、列插入或刪除行、列使用菜單“插入”“表格”菜單中的插入行或列,刪除行或列進(jìn)行相應(yīng)的操作。2022-3-2431編輯表格v實(shí)例1、繪制課本51頁(yè)的表格。2022-3

10、-2432插入圖像預(yù)覽效果圖2022-3-2433格式化表格在要格式化的表格中單擊,再使用菜單“命令”“格式化表格”打開(kāi)格式化表格對(duì)話框。 2022-3-2434導(dǎo)入表格數(shù)據(jù)1. 1. 導(dǎo)出導(dǎo)出ExcelExcel數(shù)據(jù)為文本文件數(shù)據(jù)為文本文件在Excel中使用菜單“文件”“另存為”打開(kāi)另存為對(duì)話框,在“文件類型”中選擇“文本文件(制表符分割)(*.txt)”,保存文件為biaoge.txt。2.2.導(dǎo)入位網(wǎng)頁(yè)表格導(dǎo)入位網(wǎng)頁(yè)表格將“插入”工具欄切換為“布局”模式,在右邊單擊表格數(shù)據(jù)按鈕 選擇數(shù)據(jù)文件為Excel導(dǎo)出的文本文件biaoge.txt,定界符選“Tab”。表格寬度設(shè)置單元格的寬度,選擇

11、“匹配內(nèi)容”。也可以制定寬度。2022-3-2435插入媒體元素 v動(dòng)態(tài)元素是一種重要的網(wǎng)頁(yè)元素。這里我們將學(xué)習(xí)在網(wǎng)頁(yè)中插入動(dòng)態(tài)元素,如Flash影片、Flash按鈕、Flash文本等,此外還將學(xué)習(xí)其他一些動(dòng)態(tài)元素的插入方法。2022-3-2436插入媒體元素 v媒體文件的類型 v插入Flash v制作播放電影、背景聲音的頁(yè)面 2022-3-2437媒體文件的類型1.RealVideo1.RealVideo的的.rm.rm、.rmvb.rmvb視頻影像格式和視頻影像格式和.ra.ra的音頻格式的音頻格式2.Microsoft Media technology2.Microsoft Media

12、technology的的.asf.asf格式格式3.QuickTim3.QuickTim的的.mov.mov格式格式4.Flash4.Flash的的.swf.swf格式格式5.Metastream 5.Metastream 的的.mts.mts格式格式6.Authorware6.Authorware的的.aam.aam多媒體教學(xué)課件格式多媒體教學(xué)課件格式2022-3-2438插入Flash1.1.插入插入FlashFlash動(dòng)畫動(dòng)畫將插入工具欄切換到“常用”模式,單擊“媒體:Flash”按鈕 2.2.插入插入FlashFlash按鈕按鈕將插入工具欄切換到“常用”模式,單擊“媒體:Flash”按

13、鈕旁邊的三角形,在菜單中選擇“媒體:Flash按鈕”按鈕 3.3.插入插入FlashFlash文本文本將插入工具欄切換到“常用”模式,單擊“媒體:Flash”按鈕旁邊的三角形,在菜單中選擇“媒體:Flash文本”按鈕 2022-3-2439制作播電影、聲音的頁(yè)面1.1.插入插件插入插件(1)將插入工具欄切換到“常用”模式,單擊“媒體:Flash”按鈕旁邊的三角形,在菜單中選擇“媒體:Flash文本”按鈕 (2)選擇一個(gè)要插入網(wǎng)頁(yè)的電影格式的文件 (3)在編輯窗口中看到插入了一個(gè)灰色矩形插件標(biāo)志,調(diào)整其大小可調(diào)整網(wǎng)頁(yè)中的播放窗口的大小。(4)單擊屬性面板上的“參數(shù)”按鈕,可設(shè)置各種播放參數(shù)。20

14、22-3-24402.2.插入背景聲音插入背景聲音(1)將插入工具欄設(shè)置為“常規(guī)”,單擊標(biāo)簽選擇器按鈕 (2)在標(biāo)簽選擇器對(duì)話框左邊窗口逐級(jí)選擇“HTML標(biāo)簽” “頁(yè)元素”“瀏覽器特定”,然后在右邊窗口中單擊“bgsound”,再單擊下面的“插入”按鈕,打開(kāi)“標(biāo)簽編輯器-bgsound”對(duì)話框。(3)在“源”中指定背景音樂(lè)文件,可以是.wav、.mid或.mp3格式的音頻文件。 (4)在“循環(huán)”欄指定網(wǎng)頁(yè)調(diào)入時(shí)背景音樂(lè)的播放次數(shù),選擇“無(wú)限(-1)”循環(huán)播放。其他選項(xiàng)根據(jù)需要設(shè)置。(5)單擊“確定”,背景音樂(lè)就插入到網(wǎng)頁(yè)中。關(guān)閉標(biāo)簽選擇器對(duì)話框。2022-3-2441插入表單v文本字段 v復(fù)選

15、框 v單選按鈕 v下拉式菜單 v隱藏區(qū)域 v按鈕 2022-3-2442表 單 簡(jiǎn) 介v在網(wǎng)上瀏覽時(shí)常會(huì)遇到要求填寫資料或提供在網(wǎng)上瀏覽時(shí)常會(huì)遇到要求填寫資料或提供信息的頁(yè)面,如申請(qǐng)信息的頁(yè)面,如申請(qǐng)QQ號(hào)碼時(shí)填寫個(gè)人信息號(hào)碼時(shí)填寫個(gè)人信息的頁(yè)面,網(wǎng)上購(gòu)物時(shí)填寫的購(gòu)物單等,這些的頁(yè)面,網(wǎng)上購(gòu)物時(shí)填寫的購(gòu)物單等,這些頁(yè)面即是表單頁(yè)面。表單通常由多個(gè)表單對(duì)頁(yè)面即是表單頁(yè)面。表單通常由多個(gè)表單對(duì)象組成,如單選按鈕、復(fù)選框、文本字段以象組成,如單選按鈕、復(fù)選框、文本字段以及按鈕等,網(wǎng)站管理員可以通過(guò)表單從瀏覽及按鈕等,網(wǎng)站管理員可以通過(guò)表單從瀏覽者處收集需要的信息,從而實(shí)現(xiàn)信息的傳遞。者處收集需要的信

16、息,從而實(shí)現(xiàn)信息的傳遞。2022-3-2443表單的工作原理 表單支持客戶端-服務(wù)器關(guān)系中的客戶端。當(dāng)訪問(wèn)者在Web瀏覽器中顯示的表單中輸入信息,然后單擊提交按鈕時(shí),這些信息將被發(fā)送到服務(wù)器,服務(wù)器端腳本或應(yīng)用程序在該處對(duì)這些信息進(jìn)行處理。用于處理表單數(shù)據(jù)的常用服務(wù)器端技術(shù)包括Macromedia ColdFusion、Microsoft Active Server Pages(ASP)和PHP。 2022-3-2444 實(shí)例效果 2022-3-2445v創(chuàng)建表單將插入工具欄切換到“表單”模式,單擊創(chuàng)建表單按鈕 插入的表單區(qū)域用紅色虛線表示,后面插入的所有表單元素都要插入到這個(gè)虛線中。2022-3-2446v 文本字段1.1.單行文本單行文本在表單中輸入“用戶名”,在單擊工具欄上的文本字段按鈕 2.2.密碼密碼密碼輸入?yún)^(qū)用于用戶輸入密碼信息,用戶在此區(qū)域輸入的所有字符都

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論