電子商務(wù)網(wǎng)站管理與建設(shè)第四章匯編

1、網(wǎng)頁(yè)制作(zhzu)工具2第二節(jié) Dreamweaver CS4簡(jiǎn)介31第一節(jié) 網(wǎng)頁(yè)制作(zhzu)工具簡(jiǎn)介第三節(jié) Dreamweaver CS4基本操作4第四節(jié) 網(wǎng)頁(yè)制作實(shí)例共二十二頁(yè)知識(shí)(zh shi)目標(biāo)： 1.了解主要(zhyo)的網(wǎng)頁(yè)制作工具； 2.了解Dreamweaver CS4的界面組成及其主要功能。 網(wǎng)頁(yè)制作工具共二十二頁(yè)技能(jnng)目標(biāo) 會(huì)使用Dreamweaver CS4進(jìn)行網(wǎng)頁(yè)(wn y)制作。網(wǎng)頁(yè)制作工具共二十二頁(yè)第一節(jié) 網(wǎng)頁(yè)制作(zhzu)工具簡(jiǎn)介一、標(biāo)簽(bioqin)型網(wǎng)頁(yè)制作工具UltraEdit主界面共二十二頁(yè)第一節(jié) 網(wǎng)頁(yè)(wn y)制作工具簡(jiǎn)介二、“所

2、見(jiàn)即所得(su d)型”網(wǎng)頁(yè)制作工具FrontPage 2003主界面共二十二頁(yè)一、Dreamweaver CS4的新增功能(gngnng)第二節(jié) Dreamweaver CS4簡(jiǎn)介(jin ji)實(shí)時(shí)視圖代碼提示相關(guān)文件代碼導(dǎo)航器集成編碼新增功能共二十二頁(yè)二、Dreamweaver CS4的工作(gngzu)界面第二節(jié) Dreamweaver CS4簡(jiǎn)介(jin ji)共二十二頁(yè)二、Dreamweaver CS4的工作(gngzu)界面 主要包括“文件”、“編輯”、“查看”、“插入”、“修改”、“格式”、“命令”、“站點(diǎn)”、“窗口”、“幫助”等菜單。在制作網(wǎng)頁(yè)的過(guò)程中，要實(shí)現(xiàn)某種功能，只需單

3、擊菜單欄中的菜單，在彈出的下拉菜單中選擇要執(zhí)行的操作即可。例如，要修改頁(yè)面(y min)屬性，則只需單擊菜單欄中“修改”菜單，從下拉菜單中選擇“頁(yè)面(y min)屬性”命令，在打開(kāi)的“頁(yè)面(y min)屬性”對(duì)話(huà)框中設(shè)置即可。 包含一些按鈕，用于在文檔的不同視圖間快速切換，還包含一些與查看文檔、在本地和遠(yuǎn)程站點(diǎn)間傳輸文檔有關(guān)的命令和選項(xiàng)。菜單欄文檔工具欄第二節(jié) Dreamweaver CS4簡(jiǎn)介共二十二頁(yè)二、Dreamweaver CS4的工作(gngzu)界面 文檔編輯區(qū)中的內(nèi)容構(gòu)成網(wǎng)頁(yè)的主體(zht)。通過(guò)相關(guān)的工具或命令所實(shí)現(xiàn)的網(wǎng)頁(yè)效果將在文檔編輯區(qū)中顯示。 提供與用戶(hù)正在創(chuàng)建的文檔有關(guān)

4、的其他信息。其中“標(biāo)簽選擇器”顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽可以選擇該標(biāo)簽及其全部?jī)?nèi)容?！按翱诖笮　毕吕斜砜蛴脕?lái)將文檔窗口的大小調(diào)整到預(yù)定義或自定義的尺寸。狀態(tài)欄右側(cè)分別顯示當(dāng)前頁(yè)面的文檔大小、估計(jì)下載時(shí)間及當(dāng)前文檔的編碼方式。文檔編輯區(qū)狀態(tài)欄第二節(jié) Dreamweaver CS4簡(jiǎn)介共二十二頁(yè)二、Dreamweaver CS4的工作(gngzu)界面 用于檢查和編輯當(dāng)前選定頁(yè)面元素(yun s)（如文本和插入的對(duì)象）的最常用屬性。屬性面板中的內(nèi)容根據(jù)選定元素(yun s)的不同會(huì)有所不同。屬性面板第二節(jié) Dreamweaver CS4簡(jiǎn)介屬性面板共二十二頁(yè)

5、二、Dreamweaver CS4的工作(gngzu)界面 Dreamweaver CS4將各種工具(gngj)面板集成到面板組中，用戶(hù)可以根據(jù)自己的需要在菜單欄的“窗口”列表中選擇隱藏和顯示面板。面板組第二節(jié) Dreamweaver CS4簡(jiǎn)介共二十二頁(yè)（一）創(chuàng)建(chungjin)站點(diǎn)打開(kāi)(d ki)站點(diǎn)向?qū)А?23在“您打算為您的站點(diǎn)起什么名字？”文本框中輸入網(wǎng)站的名稱(chēng)。單擊“下一步”按鈕，彈出選擇服務(wù)器技術(shù)對(duì)話(huà)框。在該對(duì)話(huà)框中可以設(shè)置網(wǎng)站需要用到的服務(wù)器技術(shù)。第三節(jié) Dreamweaver CS4基本操作利用站點(diǎn)向?qū)?chuàng)建站點(diǎn)的操作步驟共二十二頁(yè)（一）創(chuàng)建(chungjin)站點(diǎn)單擊“下

6、一步”按鈕，設(shè)置站點(diǎn)的編輯方式(fngsh)和文件的存儲(chǔ)位置。456 單擊“下一步”按鈕，打開(kāi)設(shè)置遠(yuǎn)程站點(diǎn)對(duì)話(huà)框。在“您如何連接到遠(yuǎn)程服務(wù)器？”下拉列表框中可以選擇連接到服務(wù)器的方式。 單擊“下一步”按鈕，向?qū)э@示站點(diǎn)設(shè)置的概要，表示站點(diǎn)建立已經(jīng)完成，單擊“完成”按鈕，完成設(shè)置。第三節(jié) Dreamweaver CS4基本操作共二十二頁(yè)（二）建立(jinl)主頁(yè) 執(zhí)行“文件”“新建”命令，打開(kāi)“新建文檔”對(duì)話(huà)框，單擊“空白頁(yè)”選項(xiàng)，在“頁(yè)面類(lèi)型”列表框中單擊HTML選項(xiàng)，再單擊“創(chuàng)建(chungjin)”按鈕，即可創(chuàng)建(chungjin)一個(gè)HTML靜態(tài)網(wǎng)頁(yè)。12 （2） 執(zhí)行“文件”“另存為”

7、命令，Dreamweaver CS4會(huì)默認(rèn)把文件保存路徑指向剛才建立的站點(diǎn)文件夾內(nèi)，這可以方便設(shè)計(jì)者管理。為主頁(yè)文件命名，單擊“保存”按鈕，一個(gè)網(wǎng)站的首頁(yè)就創(chuàng)建好了。 創(chuàng)建好首頁(yè)后，可在其中添加文字、圖片等頁(yè)面元素，以豐富頁(yè)面的內(nèi)容。第三節(jié) Dreamweaver CS4基本操作共二十二頁(yè)（三）添加文字(wnz)和圖片第三節(jié) Dreamweaver CS4基本操作直接插入法復(fù)制粘貼法導(dǎo)入文檔法 如導(dǎo)入已有的一篇Word文檔，在文檔窗口中，將光標(biāo)定位到要導(dǎo)入文本的位置(wi zhi)，執(zhí)行“文件”“導(dǎo)入”“Word文檔”命令，打開(kāi)“導(dǎo)入Word文檔”對(duì)話(huà)框，在其中選擇要導(dǎo)入的Word文檔，單擊“

8、打開(kāi)”按鈕，即可導(dǎo)入文本。 在打開(kāi)的Dreamweaver CS4文檔中，將光標(biāo)定位到需要輸入文本的地方，直接通過(guò)鍵盤(pán)輸入即可。 將文本文檔中的文字直接復(fù)制到Dreamweaver CS4文檔中需要添加文字內(nèi)容的光標(biāo)所在處共二十二頁(yè)（四）創(chuàng)建(chungjin)超鏈接第三節(jié) Dreamweaver CS4基本操作 1.絕對(duì)路徑鏈接絕對(duì)路徑鏈接適用于創(chuàng)建外部鏈接，要求提供所鏈接文檔的完整URL，而且包括所使用的協(xié)議，如/。2.文檔相對(duì)路徑鏈接文檔相對(duì)路徑鏈接和站點(diǎn)根目錄相對(duì)路徑鏈接實(shí)際都是站點(diǎn)內(nèi)部鏈接，但文檔相對(duì)路徑鏈接更加簡(jiǎn)單易用。創(chuàng)建相對(duì)路徑鏈接要求鏈接的兩個(gè)文檔必須在同一個(gè)站點(diǎn)下保存。共二

9、十二頁(yè)（五）添加(tin ji)多媒體元素第三節(jié) Dreamweaver CS4基本操作 1. 在網(wǎng)頁(yè)(wn y)中插入Flash動(dòng)畫(huà)和FlashPaper文檔 （1） 插入Flash動(dòng)畫(huà)。打開(kāi)要插入Flash動(dòng)畫(huà)的文檔，將光標(biāo)定位到要插入Flash動(dòng)畫(huà)的位置，在“插入”面板的“常用”類(lèi)別中單擊“媒體”下拉按鈕，選擇SWF選項(xiàng)，彈出“選擇文件”對(duì)話(huà)框，選擇Flash動(dòng)畫(huà)文件，單擊“確定”按鈕即可。 （2） 插入FlashPaper文檔。在“插入”面板的“常用”類(lèi)別中選擇“媒體”下拉列表中的FlashPaper選項(xiàng)，在“選擇文件”對(duì)話(huà)框中選擇myflashpaper.swf文檔，單擊“確定”按鈕

10、即可。共二十二頁(yè)（五）添加(tin ji)多媒體元素第三節(jié) Dreamweaver CS4基本操作2.在網(wǎng)頁(yè)(wn y)中插入聲音文件 在“插入”面板的“常用”類(lèi)別中選擇“媒體”下拉列表中的“插件”選項(xiàng)，在“選擇文件”對(duì)話(huà)框中選擇音頻文件，然后單擊“確定”按鈕，保存后預(yù)覽網(wǎng)頁(yè)。共二十二頁(yè)（六）添加(tin ji)表單元素第三節(jié) Dreamweaver CS4基本操作在“插入”面板的“表單”類(lèi)別(libi)中選擇需要插入的表單元素就可以將其插入網(wǎng)頁(yè)中。共二十二頁(yè)第四節(jié) 網(wǎng)頁(yè)制作(zhzu)實(shí)例共二十二頁(yè)共二十二頁(yè)內(nèi)容摘要網(wǎng)頁(yè)制作工具。文檔編輯區(qū)中的內(nèi)容構(gòu)成網(wǎng)頁(yè)的主體。通過(guò)相關(guān)的工具或命令所實(shí)現(xiàn)的網(wǎng)頁(yè)效果將在文檔編輯區(qū)中顯示。提供與用戶(hù)正在創(chuàng)建的文檔有關(guān)的其他信息。單擊該層次結(jié)構(gòu)中的任何標(biāo)簽可以選擇該標(biāo)簽及其全部?jī)?nèi)容。“窗口大小”下拉列表框用來(lái)將文檔窗口的大小調(diào)整到預(yù)定義或自定義的尺寸。用