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

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

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

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

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

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

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

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

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

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

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

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

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

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