Dreamweaver-8.0-網(wǎng)頁設(shè)計-非常好的參考資料

第3章Dreamweaver8.0網(wǎng)頁設(shè)計

1本章內(nèi)容1、Dreamweaver8.0根底知識2、站點的建立與管理3、編輯根本頁面4、超級鏈接5、頁面布局6、CSS樣式7、行為和時間軸8、Dreamweaver8.0網(wǎng)頁設(shè)計實例23.1Dreamweaver8.0根底知識Dreamweaver的字面意思為“夢幻編織者”，是Macromedia公司推出的可視化網(wǎng)頁制作工具。Dreamweaver8包含了許多新增的功能，這些新增功能改善了軟件的易用性，并使用戶無論處于設(shè)計環(huán)境還是編碼環(huán)境都可以方便地制作頁面。同時Dreamweaver8支持學(xué)習(xí)和利用新的技術(shù)，其中包括PHP5、Flash視頻、ColdFusionMX7和MacromediaWebPublishingSystem。33.1.1Dreamweaver8.0工作界面插入面板文檔工具欄屬性檢查器狀態(tài)欄可折疊組合面板41、菜單欄所有的編輯工作都可以通過菜單欄里的命令來完成。單擊F4鍵關(guān)閉所有浮動面板，再單擊F4又可以翻開。利用“窗口”菜單，可以控制各種浮動窗口和面板的開啟和關(guān)閉。52、工具欄菜單“查看”“工具欄”“標(biāo)準(zhǔn)”或“文檔”三種視圖方式預(yù)覽網(wǎng)頁按鈕63、文檔窗口設(shè)計視圖代碼視圖設(shè)計視圖和代碼視圖74、Dreamweaver8.0的面板插入面板可折疊組合面板屬性面板8〔1〕插入面板插入面板也是一個浮動的面板，包含以下幾個面板：“常用”、“布局”、“文本”等。也可以選擇菜單“插入/……”來插入對象。9〔2〕可折疊組合面板〔浮動面板〕翻開/折疊按鈕抓取按鈕10〔3〕屬性面板選擇“窗口”|“屬性”，翻開屬性面板。在屬性面板中顯示了文檔窗口中選取對象的屬性。115、狀態(tài)欄可以通過單擊狀態(tài)欄上的HTML標(biāo)簽來選取對象，故又稱“選擇狀態(tài)欄”。123.1.2根本操作1、創(chuàng)立新頁面假設(shè)要創(chuàng)立新的空白文檔，請執(zhí)行以下操作：〔1〕選擇“文件”>“新建”?！?〕從“類別”列表中選擇“根本頁”、“動態(tài)頁”、“模板頁”、“其它”或“框架集”；然后從右側(cè)的列表中選擇要創(chuàng)立的文檔的類型。〔3〕單擊“創(chuàng)立”按鈕。2、翻開已有頁面假設(shè)要翻開現(xiàn)有的文件，請執(zhí)行以下操作：〔1〕選擇“文件”>“翻開”，出現(xiàn)“翻開”對話框。〔2〕定位到并選擇要翻開的文件?！?〕單擊“翻開”。133、保存頁面假設(shè)要保存新文檔，請執(zhí)行以下操作：〔1〕選擇“文件”>“保存”?！?〕在出現(xiàn)的對話框中，定位到要用來保存文件的文件夾?！?〕在“文件名稱”文本框中，鍵入文件名。注意不要在文件名和文件夾名中使用空格和特殊字符，文件名也不要以數(shù)字開頭?！?〕單擊“保存”。4、預(yù)覽頁面在保存頁面后，就可以點擊文檔工具欄按鈕或按F12鍵預(yù)覽當(dāng)前頁面了。143.2站點的建立與管理“站點”可以簡單地理解為文件夾，編輯的網(wǎng)頁、圖片、音樂等都放在這個文件夾里。153.2.1建立站點選擇菜單“站點/新建站點”；為網(wǎng)站取名，如“我的第一個站點”；建立一個靜態(tài)站點，無需效勞器；選擇站點存放的路徑；“無”鏈接到遠(yuǎn)程效勞器；完成。163.2.2管理站點新建文件或文件夾刪除文件或文件夾編輯文件17本卷須知建立有意義的文件夾對資源文件進(jìn)行分門別類的管理盡量使用英文名稱〔小寫)刪除站點只是刪除了本地相關(guān)文件和站點的聯(lián)系，文件仍然是存在的。18建立完站點結(jié)構(gòu)后，準(zhǔn)備工作根本完成，可以繼續(xù)index.html首頁的創(chuàng)立。雙擊站點面板中的index.html，我們要為這個頁面進(jìn)行簡單的圖文混排設(shè)計。193.3編輯根本頁面本節(jié)主要內(nèi)容：1、頁面屬性設(shè)置2、添加文本3、插入圖像4、插入表單203.3.1頁面屬性設(shè)置

“修改”“頁面屬性”設(shè)置標(biāo)題設(shè)置背景圖像設(shè)置背景顏色、字體顏色設(shè)置鏈接文本顏色設(shè)置左邊界和頂部邊界〔一般設(shè)為“0”〕鼠標(biāo)移動到鏈接文本上單擊時的顏色213.3.2添加文本直接在編輯窗口中插入文字。選中網(wǎng)頁中的文字，在下面的屬性面板中設(shè)定字體、字號、顏色及排列方式等。22實例１：插入標(biāo)題和文本操作步驟如下：設(shè)置文本標(biāo)題級、文本字體、字體大小、文本顏色文本對齊插入水平線創(chuàng)立工程列表和縮進(jìn)文本Enter，重起一段，行間距較大Shift+Enter

，換行空格：將中文輸入法設(shè)置為“全角”狀態(tài)23實例２：滾動文字操作步驟如下：在網(wǎng)頁中插入表格，設(shè)置背景顏色和邊框顏色；在表格中插入文字信息，如“新聞消息”等；翻開“設(shè)計”視圖，在<td>標(biāo)簽后輸入<marquee>；設(shè)置的<marquee>屬性behavior，direction,onmouseover,onmouseout等。24圖像的編輯和應(yīng)用除了文字以外，豐富多彩的Web頁面總是少不了圖像，在Web頁中處理圖像是非常關(guān)鍵的。圖像處理的好壞直接關(guān)系到整個網(wǎng)站設(shè)計的成功與否，這就要兼顧圖像質(zhì)量和圖像的大小。25網(wǎng)絡(luò)圖像格式常見的網(wǎng)絡(luò)圖像格式GIF、JPEG和PNG。在網(wǎng)頁中圖像格式一般以Gif為主，涉及到照片圖像時選擇Jpeg格式。262.圖像的根本屬性插入圖像調(diào)整圖像的尺寸和水平對齊方式設(shè)置圖像邊框和說明文字圖文混排27插入圖像先在本地硬盤上新建一個臨時文件夾，并在該臨時文件夾下建立一個名為images的子文件夾，將所要使用的素材圖像復(fù)制到images文件夾下備用。然后，在Dreamweaver8中翻開頁面hsgk_1.htm，移動光標(biāo)到頁面最后一行文字下，將插入面板切換到常用面板，單擊按鈕或“插入”→“圖像”命令完成圖像插入操作。283．圖像與文本的排列294．創(chuàng)立翻轉(zhuǎn)圖像及導(dǎo)航條按鈕插入－交互式圖像－鼠標(biāo)經(jīng)過圖像30創(chuàng)立導(dǎo)航按鈕效果插入－交互式圖像－導(dǎo)航條315．創(chuàng)立圖像熱區(qū)

327．創(chuàng)立網(wǎng)頁相冊集命令－創(chuàng)立網(wǎng)頁相冊338.跟蹤圖像插入面板中的布局視圖，下面以滁州學(xué)院的主頁為例，介紹跟蹤圖像的使用方法。使用截圖軟件，截取主頁圖片。使用Dreamweaver的跟蹤圖像功能，導(dǎo)入主頁圖片。翻開“插入”面板中的“布局”，采用“布局視圖”，可以繪制布局表格和繪制布局單元格。設(shè)置跟蹤圖像的透明度為0時，即可看到如下圖效果。343.3.4表單及其應(yīng)用表單即在網(wǎng)上填寫的表格，如申請電子免費(fèi)郵箱時需要填寫的個人信息等。通過表單可以實現(xiàn)訪問者和網(wǎng)站兩者之間的信息交互。351．創(chuàng)立表單表單名稱：表單的名稱。●動作：連接到Web應(yīng)用程序的文件。單擊按鈕選擇文件的位置，這個文件也是實現(xiàn)表單功能的關(guān)鍵?！穹椒ǎ褐付ū韱螖?shù)據(jù)發(fā)送的方法。一般選擇“POST”〔或“GET”〕36插入文本域

文本域：文本域的名稱。直接在文本框中修改即可。字符寬度：文本域中可顯示字符的最大寬度。最大字符數(shù)：文本域中允許輸入的最大字符數(shù)。類型：文本域的類型?？梢赃x擇單行、多行或者密碼。37插入單項選擇按鈕38插入列表

39插入復(fù)選框

40插入按鈕413.4超鏈接Dreamweaver8.0提供了多種創(chuàng)立超文本鏈接的方法，可創(chuàng)立到文檔、圖像、多媒體文件或可下載軟件的鏈接?？梢越⒌轿臋n內(nèi)任何位置的任何文本或圖像的鏈接。42鏈接分類創(chuàng)立內(nèi)部鏈接創(chuàng)立外部鏈接創(chuàng)立E-mail鏈接創(chuàng)立錨點鏈接創(chuàng)立圖像地圖創(chuàng)立跳轉(zhuǎn)菜單433.4.1超級鏈接超級鏈接由源地址文件和目標(biāo)地址文件構(gòu)成，當(dāng)訪問者單擊超級鏈接時，瀏覽器會從相應(yīng)的目標(biāo)地址檢索網(wǎng)頁并顯示在瀏覽器中。〔1〕絕對路徑〔2〕相對路徑〔3〕基于根目錄的路徑443.4.2創(chuàng)立超級鏈接〔1〕使用屬性面板和點到文件按鈕創(chuàng)立鏈接文檔選中要建立鏈接的文本或者圖像，在屬性面板中的“鏈接”文本框中輸入相關(guān)鏈接地址即可?！馹blank：在新的瀏覽器窗口中翻開鏈接?！馹parent：當(dāng)有框架存在時，在整個框架集中翻開鏈接?！馹self：默認(rèn)狀態(tài)，在當(dāng)前頁面中翻開鏈接?！馹top：當(dāng)有框架存在時，在上層框架集中翻開鏈接。45創(chuàng)立超級鏈接(續(xù))〔2〕鏈接到文檔的指定位置〔錨點鏈接〕創(chuàng)立錨點的位置然后選擇文本或圖像鏈接到錨點46創(chuàng)立超級鏈接(續(xù))〔3〕創(chuàng)立E-mail鏈接單擊E-mail鏈接并不是翻開相關(guān)的頁面，而是調(diào)用訪問者本機(jī)上的電子郵件客戶端程序〔例如Foxmail〕，并在收件人一欄中自動添加設(shè)定好的電子郵件地址，用戶書寫完郵件后可以直接發(fā)送到指定的電子信箱中。47創(chuàng)立超級鏈接(續(xù))〔4〕創(chuàng)立遠(yuǎn)程登錄鏈接首先，選中需要創(chuàng)立鏈接的文本或者圖像，然后在屬性面板中的“鏈接”文本框中輸入“telnet：//站點地址”即可。48創(chuàng)立超級鏈接(續(xù))〔5〕創(chuàng)立虛擬鏈接〔空鏈接〕在頁面中選中要創(chuàng)立鏈接的文本或者圖像，在屬性面板的“鏈接”文本框中輸入“#”即可。493.4.3跳轉(zhuǎn)菜單503.5頁面布局本節(jié)主要內(nèi)容：1、表格2、層3、框架4、模板和庫513.5.1表格Dreamweaver提供了多種在網(wǎng)頁中插入表格的方法，通過表格屬性面板可以對表格和單元格的各種屬性進(jìn)行設(shè)置，使用表格進(jìn)行網(wǎng)頁版面設(shè)計時顯得更加方便。523.5.1.1表格的使用1．表格的創(chuàng)立使用菜單“插入”→“表格”命令〔快捷鍵Ctrl+Alt+T〕。單擊插入面板上的“常用”子面板中的表格按鈕。53插入表格〔續(xù)〕寬度：可以是相比照例〔百分?jǐn)?shù)〕，也可以是絕對尺寸〔像素〕。邊框：設(shè)置表格邊線的寬度，如0代表無邊線；1代表有邊線為1個像素寬。單元格填充：單元格中內(nèi)容與單元格邊線之間的距離。單元格間距：單元格與單元格之間的距離。542．選擇表格隨便在表格的某處單擊一下，此時狀態(tài)欄出現(xiàn)<table>標(biāo)簽，單擊該標(biāo)簽，如以下圖所示，就選取了這個表格。553．表格屬性的設(shè)置選定表格對象后，出現(xiàn)如下圖的屬性面板。56表格屬性的設(shè)置〔續(xù)〕對齊：表格的對齊方式，分別是居左，居中，居右。邊框顏色：只有當(dāng)Border參數(shù)不為0時，邊線顯現(xiàn)時本參數(shù)才有意義。：去除行高與列寬。：根據(jù)表格的當(dāng)前值，分別將表格比例改為絕對尺寸或者相比照例尺寸。57行列和單元格屬性設(shè)置選中行列或單元格后，屬性面板的設(shè)置是一樣的，差異只是應(yīng)用范圍不同。如下圖。584．編輯表格和單元格調(diào)整表格的整體尺寸、列寬與行高添加與刪除行、列593.5.1.2使用布局表格切換到布局視圖繪制布局表格繪制布局單元格601切換到布局視圖在Dreamweaver8.0的“插入”面板中的“布局”子面板中有兩個視圖按鈕：標(biāo)準(zhǔn)視圖和布局視圖。

單擊布局視圖按鈕，即可切換到布局視圖狀態(tài)。612繪制布局表格

一般先繪制布局表格再在布局表格中繪制布局單元格，即從大到小、從粗到細(xì)進(jìn)行網(wǎng)頁的布局設(shè)計。62繪制布局表格的操作步驟

單擊插入面板中的繪制布局表格按鈕。此時，鼠標(biāo)指針變?yōu)槭中螤?。在頁面定位鼠?biāo)指針，然后拖動鼠標(biāo)創(chuàng)立表格，綠色的表格輪廓顯示在頁面上。63繪制布局表格的操作步驟〔續(xù)〕3繪制布局單元格

64繪制布局表格的操作步驟〔續(xù)〕4創(chuàng)立嵌套布局表格65操作步驟〔續(xù)〕5布局表格的菜單

單擊選中布局表格后，再單擊寬度標(biāo)注右邊的箭頭，可調(diào)出它的菜單。在添加間隔圖像后“添加間隔圖像”菜單命令變?yōu)椤皠h除間隔圖像”菜單命令

663.5.2層在層里我們可以插入文本、表格、圖像、動畫等各種網(wǎng)頁元素，使用層可以方便精確地控制頁面元素的位置，與表格相比，它實現(xiàn)了真正意義上的所見即所得。67層的根本操作創(chuàng)立層〔按住CTRL不放，可連續(xù)畫多個層〕調(diào)整圖層的尺寸及位置創(chuàng)立嵌套層68圖層控制面板眼睛睜開表示顯示圖層眼睛閉上為隱藏圖層單擊Z軸值，可改變圖層順序69轉(zhuǎn)換層和表格修改->轉(zhuǎn)換->表格到層703.5.3框架將一個窗口劃分為假設(shè)干個獨(dú)立的子窗口，每個子窗口可構(gòu)成一個獨(dú)立的網(wǎng)頁，即可有各自的標(biāo)題、背景、內(nèi)容等，對各個區(qū)域可進(jìn)行獨(dú)立的操作。71框架根本操作創(chuàng)立框架編輯框架保存框架頁面框架頁面實例72框架面板73框架頁面間的鏈接翻開屬性檢查器中的“目標(biāo)”屬性，除_blank、_self、_parent和_top外，又新增了“mainframe”和“l(fā)eftFrame”。743．保存框架頁面對于框架結(jié)構(gòu)必須先保存，才能進(jìn)行預(yù)覽。單擊主菜單“文件”→“保存框架頁”或“文件”→“框架頁另存為”保存框架集頁面。單擊主菜單“文件”→“全部保存”保存框架集頁面，同時還會將組成各頁框的每個獨(dú)立頁面也保存。754．框架制作實例763.5.4模板與庫通過模板可以生成具有固定格式的網(wǎng)頁，并通過設(shè)定可編輯區(qū)域在其中插入不同的內(nèi)容。庫是某些網(wǎng)頁元素的組合，可以在站點中的其他頁面上被重復(fù)使用。771.創(chuàng)立模板將現(xiàn)有文檔保存為模板創(chuàng)立空白模板782．編輯模板〔1〕創(chuàng)立可編輯區(qū)域選取要設(shè)置為可編輯區(qū)域的文字、圖像、表格或圖層,然后選擇主菜單“插入”→“模板對象”中的“可編輯區(qū)域”命令?！?〕鎖定可編輯區(qū)域首先，在要求鎖定的可編輯區(qū)域中單擊鼠標(biāo)左鍵，把光標(biāo)置于該區(qū)域中，然后選擇主菜單“修改”→“模板”→“刪除模板標(biāo)記”就可以鎖定選中的可編輯區(qū)域。793．使用模板使用新建文檔窗口使用模板面板使用模板面板中的按鈕使用菜單804．使用庫庫是一些網(wǎng)頁元素的集合的文件。創(chuàng)立庫后，庫文件就是在站點根目錄下名為library文件夾中以.lbi為擴(kuò)展名的文件。庫的內(nèi)容可以包括文本、圖像等所有的網(wǎng)頁元素。813.6CSS樣式CSS〔CascadingStyleSheets〕的中文意思為層疊樣式表，簡稱樣式表。對于CSS樣式，在改變了CSS樣式的設(shè)置后，已經(jīng)引用了該CSS樣式的網(wǎng)頁文件會自動更新。

821．創(chuàng)立和編輯CSS樣式表單擊主菜單“文本”→“CSS樣式”→“新建CSS樣式”，彈出“新建CSS樣式”對話框。83CSS樣式定義面板842．用CSS樣式定義超級鏈接屬性在Dreamweaver8.0中，對字體設(shè)置超級鏈接后，字體會自動變成藍(lán)色且加下劃線。瀏覽時鼠標(biāo)指向該文字，鼠標(biāo)指針變成小“手”狀，變化單調(diào)。下面我們利用CSS樣式來創(chuàng)立一個較為活潑的超級鏈接。85863.7行為與時間軸所謂行為是在網(wǎng)頁中進(jìn)行的一系列動作，它可以自動生成JavaScript程序來完成一些特定的工作，從而無需編程就可實現(xiàn)一局部交互和控制功能。時間軸能夠按照時間的順序來控制動作、制作動作和自動觸發(fā)行為。871．行為面板及命令菜單事件：用來指明執(zhí)行某項動作的條件〔如鼠標(biāo)移到對象上方，單擊或雙擊對象等〕。動作：用來響應(yīng)事件去執(zhí)行特定任務(wù)的程序〔如翻開窗口、播放聲音等〕。882．事件OnClick事件：當(dāng)鼠標(biāo)單擊時發(fā)生OnDblClick事件：當(dāng)鼠標(biāo)雙擊時發(fā)生OnMouseOver事件：當(dāng)鼠標(biāo)移上某對象時發(fā)生O