Dreamwaver網(wǎng)頁設計第3章

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

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

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

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

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

6、框框用來設設置單元元格與單單元格之之間的距距離?！皹祟}樣樣式”選選項區(qū)用用來定義義頁眉樣樣式，可可以在4種樣式式中選擇擇一種?！皹祟}”選項區(qū)區(qū)用來定定義表格格的標題題?！罢绷斜砜蚩蛴脕韺Ρ砀襁M進行注釋釋。3.3表表格格的應用用設置表格格屬性“填充”文本框框用來設設置單元元格邊距距，“間間距”文文本框用用來設置置單元格格間距?！皩R”下拉列列表框用用來設置置表格的的對齊方方式，默默認的對對齊方式式一般為為左對齊齊。“邊框”文本框框用來設設置表格格邊框的的寬度。3.3表表格格的應用用表格的行行和列拆分與合合并單元元格3.4制制作作多媒體體頁面3.4.1利利用相相關工具具制作網(wǎng)網(wǎng)頁動畫畫1動畫

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

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

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