Dreamwaver網(wǎng)頁(yè)設(shè)計(jì)第3章

1、第3章 網(wǎng)頁(yè)的基本操作第3章網(wǎng)網(wǎng)頁(yè)頁(yè)的基本本操作3.1初初識(shí)Dreamweaver3.2制制作文字字與圖像像混排的的頁(yè)面3.3表表格的應(yīng)應(yīng)用3.4制制作多媒媒體頁(yè)面面3.5創(chuàng)創(chuàng)建超鏈鏈接3.1初初識(shí)識(shí)DreamweaverDreamweaverCS5是是Adobe公公司于2010年4月月最新推推出的一一款集網(wǎng)網(wǎng)頁(yè)制作作和網(wǎng)站站管理于于一身的的所見(jiàn)即即所得網(wǎng)網(wǎng)頁(yè)編輯輯器，是是AdobeCreativeSuite5設(shè)計(jì)計(jì)套裝軟軟件的組組成之一一。3.1.1DreamweaverCS5的操作作環(huán)境3.1.2本本地站站點(diǎn)的搭搭建與管管理1規(guī)劃劃站點(diǎn)結(jié)結(jié)構(gòu)我們可以以通過(guò)把把文件分分門別類類地放置置在各自

2、自的文件件夾里，使網(wǎng)站站的結(jié)構(gòu)構(gòu)清晰明明了，便便于管理理和查找找。3.1.2本本地站站點(diǎn)的搭搭建與管管理2創(chuàng)建建站點(diǎn)（1）選選擇“站站點(diǎn)”“管理理站點(diǎn)”命令，出現(xiàn)“管理站站點(diǎn)”對(duì)對(duì)話框。3.1.2本本地站站點(diǎn)的搭搭建與管管理2創(chuàng)建建站點(diǎn)(2)在在“管理理站點(diǎn)”對(duì)話框框中，單單擊“新新建”按按鈕，在在打開(kāi)的的“站點(diǎn)點(diǎn)設(shè)置對(duì)對(duì)象”對(duì)對(duì)話框的的“站點(diǎn)點(diǎn)”選項(xiàng)項(xiàng)卡中為為Dreamweaver站站點(diǎn)選擇擇本地文文件夾和和名稱。3.1.2本本地站站點(diǎn)的搭搭建與管管理3搭建建站點(diǎn)結(jié)結(jié)構(gòu)3.1.2本本地站站點(diǎn)的搭搭建與管管理4文件件與文件件夾的管管理對(duì)建立的的文件和和文件夾夾，可以以進(jìn)行移移動(dòng)、復(fù)復(fù)制、重重命

3、名和和刪除等等基本的的管理操操作。單單擊鼠標(biāo)標(biāo)左鍵選選中需要要管理的的文件或或文件夾夾，然后后單擊鼠鼠標(biāo)右鍵鍵，從彈彈出的快快捷菜單單中選擇擇“編輯輯”命令令，即可可進(jìn)行相相關(guān)操作作。3.2制制作作文字與與圖像混混排的頁(yè)頁(yè)面3.2.1頁(yè)頁(yè)面的的總體設(shè)設(shè)置1設(shè)置置頁(yè)面的的頭內(nèi)容容（1）設(shè)設(shè)置標(biāo)題題。（2）插插入關(guān)鍵鍵字。（3）插插入META。3.2制制作作文字與與圖像混混排的頁(yè)頁(yè)面3.2.1頁(yè)頁(yè)面的的總體設(shè)設(shè)置2設(shè)置置頁(yè)面屬屬性（1）設(shè)設(shè)置外觀觀。（2）設(shè)設(shè)置鏈接接。（3）設(shè)設(shè)置標(biāo)題題。3.2.2文文本的的插入與與編輯1插入入文本2編輯輯文本格格式網(wǎng)網(wǎng)頁(yè)的文文本分為為段落和和標(biāo)題兩兩種格式式。3

4、設(shè)置置字體組組合4文字字的其他他設(shè)置文本換行行、文本本空格、特特殊字符符 、插插入列表表 、插插入時(shí)間間3.2.3插插入圖圖像1插入入圖像2設(shè)置置圖像屬屬性3插入入其他圖圖像元素素（1）插入入圖像占占位符。（2）鼠鼠標(biāo)經(jīng)過(guò)過(guò)圖像。3.2.4利利用Photoshop處處理、設(shè)設(shè)計(jì)網(wǎng)頁(yè)頁(yè)圖像1使用用Photoshop制作網(wǎng)網(wǎng)頁(yè)的優(yōu)優(yōu)勢(shì)2Photoshop在網(wǎng)網(wǎng)頁(yè)制作作中的具具體應(yīng)用用（1）Logo圖標(biāo)的的制作（2）網(wǎng)網(wǎng)頁(yè)中按按鈕的制制作（3）網(wǎng)網(wǎng)頁(yè)中導(dǎo)導(dǎo)航條的的設(shè)計(jì)（4）網(wǎng)網(wǎng)頁(yè)頂部部圖片制制作（5）網(wǎng)網(wǎng)頁(yè)背景景圖片的的制作（6）網(wǎng)網(wǎng)頁(yè)底紋紋處理（7）前前景與背背景的配配合（8）利利用Photosh

5、op制作作網(wǎng)頁(yè)中中的動(dòng)畫(huà)畫(huà)（9）設(shè)設(shè)計(jì)簡(jiǎn)單單WEB頁(yè)面（10）網(wǎng)站改改版3.3表表格格的應(yīng)用用插入并編編輯表格格“表格”對(duì)話框框中各選選項(xiàng)的含含義如下下：“行數(shù)”文本框框用來(lái)設(shè)設(shè)置表格格的行數(shù)數(shù)?！傲袛?shù)”文本框框用來(lái)設(shè)設(shè)置表格格的列數(shù)數(shù)?！氨砀駥拰挾取蔽奈谋究蛴糜脕?lái)設(shè)置置表格的的寬度，可以輸輸入數(shù)值值，緊隨隨其后的的下拉列列表框用用來(lái)設(shè)置置寬度的的單位，有兩個(gè)個(gè)選項(xiàng)百分分比和像像素。當(dāng)當(dāng)寬度的的單位選選擇百分分比時(shí)，表格的的寬度會(huì)會(huì)隨瀏覽覽器窗口口的大小小而改變變?！斑吙虼执旨?xì)”用用來(lái)設(shè)置置表格的的邊框的的寬度。“單元格格邊距”文本框框用來(lái)設(shè)設(shè)置單元元格的內(nèi)內(nèi)部空白白大小。“單元格格間距”文本

6、框框用來(lái)設(shè)設(shè)置單元元格與單單元格之之間的距距離?！皹?biāo)題樣樣式”選選項(xiàng)區(qū)用用來(lái)定義義頁(yè)眉樣樣式，可可以在4種樣式式中選擇擇一種。“標(biāo)題”選項(xiàng)區(qū)區(qū)用來(lái)定定義表格格的標(biāo)題題?！罢绷斜砜蚩蛴脕?lái)對(duì)對(duì)表格進(jìn)進(jìn)行注釋釋。3.3表表格格的應(yīng)用用設(shè)置表格格屬性“填充”文本框框用來(lái)設(shè)設(shè)置單元元格邊距距，“間間距”文文本框用用來(lái)設(shè)置置單元格格間距?！皩?duì)齊”下拉列列表框用用來(lái)設(shè)置置表格的的對(duì)齊方方式，默默認(rèn)的對(duì)對(duì)齊方式式一般為為左對(duì)齊齊?！斑吙颉蔽谋究蚩蛴脕?lái)設(shè)設(shè)置表格格邊框的的寬度。3.3表表格格的應(yīng)用用表格的行行和列拆分與合合并單元元格3.4制制作作多媒體體頁(yè)面3.4.1利利用相相關(guān)工具具制作網(wǎng)網(wǎng)頁(yè)動(dòng)畫(huà)畫(huà)1動(dòng)畫(huà)

7、在在網(wǎng)頁(yè)方方面的應(yīng)應(yīng)用2網(wǎng)頁(yè)頁(yè)中的動(dòng)動(dòng)畫(huà)格式式網(wǎng)頁(yè)頁(yè)中的動(dòng)動(dòng)畫(huà)多數(shù)數(shù)是以GIF和和FLASH的的格式來(lái)來(lái)呈現(xiàn)的的。3網(wǎng)頁(yè)頁(yè)動(dòng)畫(huà)制制作軟件件Ulead GIFAnimator、Photoshop 、Cool 3D 、Flash3.4.2插插入Flash動(dòng)畫(huà)畫(huà)把光標(biāo)定定位在要要插入動(dòng)動(dòng)畫(huà)的位位置，然然后單擊擊菜單“插入”“媒媒體”“swf”。3.4.3插插入FLV文文件把光標(biāo)定定位在要要插入Flash視頻頻的位置置，然后后單擊菜菜單“插插入”“媒體體”“FLV”，打開(kāi)“插入FLV”對(duì)話框框。3.4.4插插入Shockwave動(dòng)動(dòng)畫(huà)把光標(biāo)定定位在需需插入Shockwave的的位置，然后單單擊菜單單“

8、插入入”“媒體”“Shockwave”。3.4.5制制作Flashpaper（1）安安裝Flash Paper；（2）在在Word中編編輯文章章，設(shè)置置好大綱綱結(jié)構(gòu)；（3）轉(zhuǎn)轉(zhuǎn)換為SWF。3.4.7插插入聲聲音1添加加背景音音樂(lè)2嵌入入音樂(lè)3.5創(chuàng)創(chuàng)建建超鏈接接文本/圖圖像鏈接接：為文文本或圖圖像創(chuàng)建建的鏈接接。圖像熱點(diǎn)點(diǎn)鏈接：一幅圖圖像不同同熱點(diǎn)區(qū)區(qū)域的鏈鏈接。電子郵件件鏈接：發(fā)送電電子郵件件的鏈接接。錨點(diǎn)鏈接接：同一一網(wǎng)頁(yè)或或不同網(wǎng)網(wǎng)頁(yè)中指指定位置置的鏈接接。3.5.1創(chuàng)創(chuàng)建文文本/圖圖像鏈接接_blank：將被鏈鏈接文檔檔加載到到新的未未命名瀏瀏覽器窗窗口中。_parent：將被被鏈接文

9、文檔加載載到父框框架集或或包含該該鏈接的的框架窗窗口中。_self：將將被鏈接接文檔加加載到與與該鏈接接文字相相同的框框架或窗窗口中。_top：將被被鏈接文文檔加載載到整個(gè)個(gè)瀏覽器器窗口并并刪除所所有框架架。3.5.2創(chuàng)創(chuàng)建圖像熱點(diǎn)點(diǎn)鏈接3.5.3創(chuàng)建電子子郵件鏈鏈接在網(wǎng)頁(yè)中中將光標(biāo)標(biāo)放置于于要實(shí)現(xiàn)現(xiàn)電子郵郵件鏈接接的位置置，執(zhí)行行“插入入”菜單單，選擇擇“電子子郵件鏈鏈接”命命令，打打開(kāi)“電電子郵件件鏈接”對(duì)話框框。3.5.4創(chuàng)建錨點(diǎn)點(diǎn)鏈接所謂錨點(diǎn)點(diǎn)鏈接，是指在在同一個(gè)個(gè)頁(yè)面中中的不同同位置的的鏈接。在制作作網(wǎng)頁(yè)時(shí)時(shí)，有些些頁(yè)面內(nèi)內(nèi)容較多多，頁(yè)面面就可能能變長(zhǎng)。為了方方便瀏覽覽，可以以在頁(yè)面面中創(chuàng)建建錨點(diǎn)鏈鏈接。表格布局局表格布局局表格布局局實(shí)驗(yàn)思考與練練習(xí)1如何何使用Dreamweaver搭搭建本地地站點(diǎn)？2在Dreamweaver中