第四章創(chuàng)建基本網(wǎng)頁(yè)

1、創(chuàng)建基本網(wǎng)頁(yè)創(chuàng)建基本網(wǎng)頁(yè)文本、圖像、表單文本、圖像、表單主講人：宋耕主講人：宋耕第四章第四章 創(chuàng)建基本網(wǎng)頁(yè)創(chuàng)建基本網(wǎng)頁(yè)n4.1 插入文本插入文本n4.2 插入圖像插入圖像n4.3 輪換圖像輪換圖像n4.4 插入媒體插入媒體n4.5 插入表單插入表單4.1 4.1 插入文本插入文本n一般來(lái)說，網(wǎng)頁(yè)中顯示最多的是文本。所以對(duì)一般來(lái)說，網(wǎng)頁(yè)中顯示最多的是文本。所以對(duì)文本的控制，以及布局在設(shè)計(jì)網(wǎng)頁(yè)中占了很大文本的控制，以及布局在設(shè)計(jì)網(wǎng)頁(yè)中占了很大的比重，能否對(duì)各種文本控制手段運(yùn)用自如，的比重，能否對(duì)各種文本控制手段運(yùn)用自如，是決定網(wǎng)頁(yè)設(shè)計(jì)是否美觀、富有創(chuàng)意及提高工是決定網(wǎng)頁(yè)設(shè)計(jì)是否美觀、富有創(chuàng)意及提高

2、工作效率的關(guān)鍵。作效率的關(guān)鍵。最適合于網(wǎng)頁(yè)正文顯示的字體大小和行距為：最適合于網(wǎng)頁(yè)正文顯示的字體大小和行距為：字體大小字體大小10101212像素像素pxpx左右左右行距行距1515像素像素pxpx左右左右DreamweaverDreamweaver插入文本插入文本n直接輸入直接輸入n復(fù)制和粘貼文本復(fù)制和粘貼文本n導(dǎo)入導(dǎo)入wordword文檔文檔: :“文件文件”菜單菜單- -“導(dǎo)入導(dǎo)入” wordword文檔文檔實(shí)例實(shí)例注意內(nèi)容注意內(nèi)容l1 1、輸入文本空格、輸入文本空格l2 2、實(shí)現(xiàn)文本換行、實(shí)現(xiàn)文本換行l(wèi)3 3、插入相關(guān)文本要素、插入相關(guān)文本要素1、輸入文本空格、輸入文本空格l通過鍵盤上

3、的空格鍵可以實(shí)現(xiàn)輸入文本空格，這是通過鍵盤上的空格鍵可以實(shí)現(xiàn)輸入文本空格，這是與很多文字處理軟件是一樣的，但是在與很多文字處理軟件是一樣的，但是在DWDW中輸入空中輸入空格的數(shù)量在字符輸入的半角狀態(tài)和全角狀態(tài)是不一格的數(shù)量在字符輸入的半角狀態(tài)和全角狀態(tài)是不一樣的。樣的。l輸入法切換半角狀態(tài)時(shí)，按空格鍵只能輸入一個(gè)空輸入法切換半角狀態(tài)時(shí)，按空格鍵只能輸入一個(gè)空格，而無(wú)法連續(xù)輸入多個(gè)空格。格，而無(wú)法連續(xù)輸入多個(gè)空格。l如需輸入多個(gè)連續(xù)的空格，可通過一下幾種方法來(lái)如需輸入多個(gè)連續(xù)的空格，可通過一下幾種方法來(lái)實(shí)現(xiàn)。實(shí)現(xiàn)。 （1 1）將輸入法切換到中文全角狀態(tài)。）將輸入法切換到中文全角狀態(tài)。 （2 2）

4、直接按）直接按Ctrl+shift+spacebarCtrl+shift+spacebar。 （3 3）”插入插入”菜單菜單“HTMLHTML”命令命令“特殊字符特殊字符” 不換行空格。不換行空格。2、實(shí)現(xiàn)文本換行、實(shí)現(xiàn)文本換行l(wèi)當(dāng)輸入多個(gè)文本時(shí)就需要換行，這可以通過按當(dāng)輸入多個(gè)文本時(shí)就需要換行，這可以通過按EnterEnter鍵或鍵或shift+entershift+enter鍵來(lái)實(shí)現(xiàn)。鍵來(lái)實(shí)現(xiàn)。l按按EnterEnter鍵換行的行距較大。鍵換行的行距較大。l按按shift+entershift+enter鍵來(lái)實(shí)現(xiàn)正常的換行。鍵來(lái)實(shí)現(xiàn)正常的換行。3、插入相關(guān)文本要素、插入相關(guān)文本要素l插入特

5、殊字符插入特殊字符l制作網(wǎng)頁(yè)時(shí)有時(shí)需要輸入一些鍵盤上沒有的字制作網(wǎng)頁(yè)時(shí)有時(shí)需要輸入一些鍵盤上沒有的字符，如注冊(cè)商標(biāo)符號(hào)、歐元符號(hào)等等。符，如注冊(cè)商標(biāo)符號(hào)、歐元符號(hào)等等。l方法是方法是：“插入插入”菜單菜單HTMLHTML特殊字符特殊字符 l插入文本列表插入文本列表l在網(wǎng)頁(yè)中插入文本列表，可以使文本內(nèi)容顯得更加在網(wǎng)頁(yè)中插入文本列表，可以使文本內(nèi)容顯得更加工整、直觀。工整、直觀。l方法方法: : “文本文本”插入工具欄插入工具欄 屬性面板屬性面板4.24.2插入圖像插入圖像n圖像是網(wǎng)頁(yè)中最重要的元素之一，圖像能夠使網(wǎng)頁(yè)變圖像是網(wǎng)頁(yè)中最重要的元素之一，圖像能夠使網(wǎng)頁(yè)變得豐富起來(lái)，令人耳目一新圖像不但

6、能美化網(wǎng)頁(yè)，得豐富起來(lái)，令人耳目一新圖像不但能美化網(wǎng)頁(yè)，而且與文本相比更能夠直觀地說明問題，使表達(dá)的意而且與文本相比更能夠直觀地說明問題，使表達(dá)的意思一目了然，加深瀏覽者的印象思一目了然，加深瀏覽者的印象n在網(wǎng)頁(yè)中插入圖像在網(wǎng)頁(yè)中插入圖像n設(shè)置圖像的屬性設(shè)置圖像的屬性4.2.1 4.2.1 在網(wǎng)頁(yè)中插入圖像在網(wǎng)頁(yè)中插入圖像n在在DreamweaverDreamweaver中，可以在中，可以在“設(shè)計(jì)設(shè)計(jì)”視圖或視圖或“代碼代碼”視圖中將圖像插入文檔。在視圖中將圖像插入文檔。在DreamweaverDreamweaver文檔中添加文檔中添加圖像時(shí)，可以設(shè)置或修改圖像屬性并直接在圖像時(shí)，可以設(shè)置或修

7、改圖像屬性并直接在“文檔文檔”窗口中查看所做的更改。窗口中查看所做的更改。n在網(wǎng)頁(yè)中將光標(biāo)置于要插入圖像的位置，執(zhí)行在網(wǎng)頁(yè)中將光標(biāo)置于要插入圖像的位置，執(zhí)行“插入插入”菜單菜單，選擇，選擇“圖像圖像”命令命令，打開，打開“選擇圖像源文件選擇圖像源文件”對(duì)話框。對(duì)話框?！斑x擇圖像源文件選擇圖像源文件”對(duì)話框?qū)υ捒蛉绻迦氲膱D如果插入的圖像不在當(dāng)前網(wǎng)像不在當(dāng)前網(wǎng)頁(yè)所在的站點(diǎn)頁(yè)所在的站點(diǎn) ，DreamweaverDreamweaver將將提示是否將該提示是否將該圖片復(fù)制到所圖片復(fù)制到所在站點(diǎn)，一般在站點(diǎn)，一般單擊單擊“是是”實(shí)例實(shí)例4.2.2 4.2.2 設(shè)置圖像的屬性設(shè)置圖像的屬性n圖像屬性的設(shè)置

8、主要是通過圖像屬性的設(shè)置主要是通過“屬性屬性”面板來(lái)完成的，面板來(lái)完成的，在在“屬性屬性”面板中可設(shè)置圖像的大小、位置、名稱、面板中可設(shè)置圖像的大小、位置、名稱、邊框、替代文本、低解析度等內(nèi)容，使圖像更加符合邊框、替代文本、低解析度等內(nèi)容，使圖像更加符合頁(yè)面設(shè)計(jì)，并使其更加美觀。頁(yè)面設(shè)計(jì)，并使其更加美觀。實(shí)例實(shí)例n方法方法: :將光標(biāo)置于文檔中，執(zhí)行將光標(biāo)置于文檔中，執(zhí)行“插入插入” “圖像對(duì)象圖像對(duì)象” “鼠標(biāo)經(jīng)過圖像鼠標(biāo)經(jīng)過圖像”命令，打開命令，打開“插入鼠標(biāo)經(jīng)過圖像插入鼠標(biāo)經(jīng)過圖像”對(duì)話對(duì)話框框。4.3 4.3 輪換圖像輪換圖像n鼠標(biāo)經(jīng)過圖像效果是指當(dāng)訪問者移動(dòng)鼠標(biāo)經(jīng)過圖像時(shí)鼠標(biāo)經(jīng)過圖像

9、效果是指當(dāng)訪問者移動(dòng)鼠標(biāo)經(jīng)過圖像時(shí), ,圖圖像變?yōu)榱硪环鶊D像像變?yōu)榱硪环鶊D像, ,當(dāng)鼠標(biāo)離開時(shí)又恢復(fù)為原來(lái)的圖像當(dāng)鼠標(biāo)離開時(shí)又恢復(fù)為原來(lái)的圖像. .n注意注意: :兩幅圖像的大小完全相同。如果這兩個(gè)圖像大小不兩幅圖像的大小完全相同。如果這兩個(gè)圖像大小不同，同， DreamweaverDreamweaver將自動(dòng)調(diào)整第二個(gè)圖像的大小，以匹配將自動(dòng)調(diào)整第二個(gè)圖像的大小，以匹配第一個(gè)圖像的屬性。第一個(gè)圖像的屬性。“插入鼠標(biāo)經(jīng)過圖像插入鼠標(biāo)經(jīng)過圖像”對(duì)話框?qū)υ捒驅(qū)嵗龑?shí)例4.4 4.4 插入媒體插入媒體n多媒體對(duì)象和圖像一樣，在網(wǎng)頁(yè)中是一道亮麗的風(fēng)景，它多媒體對(duì)象和圖像一樣，在網(wǎng)頁(yè)中是一道亮麗的風(fēng)景，它

10、能使網(wǎng)頁(yè)豐富、活躍起來(lái)，使用能使網(wǎng)頁(yè)豐富、活躍起來(lái)，使用DreamweaverDreamweaver制作網(wǎng)頁(yè)，制作網(wǎng)頁(yè)，可以方便地插入各種多媒體對(duì)象。當(dāng)需要編輯各種多媒體可以方便地插入各種多媒體對(duì)象。當(dāng)需要編輯各種多媒體對(duì)象時(shí)，可以在對(duì)象時(shí)，可以在DreamweaverDreamweaver窗口中啟動(dòng)相應(yīng)的媒體外部窗口中啟動(dòng)相應(yīng)的媒體外部編輯器來(lái)編輯媒體。編輯器來(lái)編輯媒體。n插入插入flashflash動(dòng)畫動(dòng)畫n插入插入flashflash按鈕按鈕n插入插入flashflash文本文本4.4.1 4.4.1 插入插入flashflash動(dòng)畫動(dòng)畫nFlashFlash動(dòng)畫是一種高質(zhì)量的矢量動(dòng)畫，

11、在網(wǎng)絡(luò)中有著大量動(dòng)畫是一種高質(zhì)量的矢量動(dòng)畫，在網(wǎng)絡(luò)中有著大量的精美動(dòng)畫素材。讓網(wǎng)頁(yè)活躍起來(lái)，使用的精美動(dòng)畫素材。讓網(wǎng)頁(yè)活躍起來(lái)，使用DreamweaverDreamweaver制制作網(wǎng)頁(yè)，可以在網(wǎng)頁(yè)插入導(dǎo)出為作網(wǎng)頁(yè)，可以在網(wǎng)頁(yè)插入導(dǎo)出為.swf.swf或或.swt.swt格式的格式的FlashFlash按鈕。按鈕。n方法是：將光標(biāo)置于文檔中，執(zhí)行方法是：將光標(biāo)置于文檔中，執(zhí)行“插入插入” “媒體媒體” “FlashFlash”命令命令，打開，打開“選擇文件選擇文件”對(duì)話框。對(duì)話框?！斑x擇文件選擇文件”對(duì)話框?qū)υ捒驅(qū)嵗龑?shí)例3.4.23.4.2 插入插入flashflash按鈕按鈕n方法是：將光標(biāo)

12、置于文檔中，執(zhí)行方法是：將光標(biāo)置于文檔中，執(zhí)行“插入插入” “媒體媒體” “FlashFlash按鈕按鈕”命令命令，打開，打開“插入插入FlashFlash按鈕按鈕”對(duì)話框。對(duì)話框。n使用使用DreamweaverDreamweaver中的中的FlashFlash按鈕對(duì)象，可以創(chuàng)建或者按鈕對(duì)象，可以創(chuàng)建或者載入一組預(yù)設(shè)的載入一組預(yù)設(shè)的FlashFlash按鈕，并為按鈕添加文本、背按鈕，并為按鈕添加文本、背景顏色以及指向其他文件的鏈接。景顏色以及指向其他文件的鏈接?！安迦氩迦隖lashFlash按鈕按鈕”對(duì)話框?qū)υ捒驅(qū)嵗龑?shí)例4.4.3 4.4.3 插入插入flashflash文本文本n方法是：將

13、光標(biāo)置于文檔中，執(zhí)行方法是：將光標(biāo)置于文檔中，執(zhí)行“插入插入” “媒體媒體” “FlashFlash文本文本”命令命令，打開，打開“插入插入FlashFlash文本文本”對(duì)話框。對(duì)話框。實(shí)例實(shí)例4.5 4.5 插入表單插入表單n使用表單可以與站點(diǎn)的訪問者進(jìn)行交互并從用戶那里使用表單可以與站點(diǎn)的訪問者進(jìn)行交互并從用戶那里收集信息。表單從用戶那里收集信息后，將這些信息收集信息。表單從用戶那里收集信息后，將這些信息提交給服務(wù)器進(jìn)行處理。提交給服務(wù)器進(jìn)行處理。n目前表單主要用來(lái)進(jìn)行意見調(diào)查、在線查詢、網(wǎng)上購(gòu)目前表單主要用來(lái)進(jìn)行意見調(diào)查、在線查詢、網(wǎng)上購(gòu)物、在線申請(qǐng)等。在表單中經(jīng)常出現(xiàn)的字段有：物、在線申請(qǐng)等。在表單中經(jīng)常出現(xiàn)的字段有：?jiǎn)涡袉涡形谋究蛭谋究颉⒍嘈袧L動(dòng)文本框多行滾動(dòng)文本框、單選框單選框、復(fù)選框復(fù)選框、下拉列下拉列表框和按鈕表框和按鈕。 創(chuàng)建表單對(duì)象創(chuàng)建表單對(duì)象n在創(chuàng)建表單對(duì)象之前，首