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

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

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

，換行空格：將中文輸入法設(shè)置為“全角”狀態(tài)23實(shí)例２：滾動(dòng)文字操作步驟如下：在網(wǎng)頁中插入表格，設(shè)置背景顏色和邊框顏色；在表格中插入文字信息，如“新聞消息”等；翻開“設(shè)計(jì)”視圖，在<td>標(biāo)簽后輸入<marquee>；設(shè)置的<marquee>屬性behavior，direction,onmouseover,onmouseout等。24圖像的編輯和應(yīng)用除了文字以外，豐富多彩的Web頁面總是少不了圖像，在Web頁中處理圖像是非常關(guān)鍵的。圖像處理的好壞直接關(guān)系到整個(gè)網(wǎng)站設(shè)計(jì)的成功與否，這就要兼顧圖像質(zhì)量和圖像的大小。25網(wǎng)絡(luò)圖像格式常見的網(wǎng)絡(luò)圖像格式GIF、JPEG和PNG。在網(wǎng)頁中圖像格式一般以Gif為主，涉及到照片圖像時(shí)選擇Jpeg格式。262.圖像的根本屬性插入圖像調(diào)整圖像的尺寸和水平對(duì)齊方式設(shè)置圖像邊框和說明文字圖文混排27插入圖像先在本地硬盤上新建一個(gè)臨時(shí)文件夾，并在該臨時(shí)文件夾下建立一個(gè)名為images的子文件夾，將所要使用的素材圖像復(fù)制到images文件夾下備用。然后，在Dreamweaver8中翻開頁面hsgk_1.htm，移動(dòng)光標(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)頁相冊(cè)集命令－創(chuàng)立網(wǎng)頁相冊(cè)338.跟蹤圖像插入面板中的布局視圖，下面以滁州學(xué)院的主頁為例，介紹跟蹤圖像的使用方法。使用截圖軟件，截取主頁圖片。使用Dreamweaver的跟蹤圖像功能，導(dǎo)入主頁圖片。翻開“插入”面板中的“布局”，采用“布局視圖”，可以繪制布局表格和繪制布局單元格。設(shè)置跟蹤圖像的透明度為0時(shí)，即可看到如下圖效果。343.3.4表單及其應(yīng)用表單即在網(wǎng)上填寫的表格，如申請(qǐng)電子免費(fèi)郵箱時(shí)需要填寫的個(gè)人信息等。通過表單可以實(shí)現(xiàn)訪問者和網(wǎng)站兩者之間的信息交互。351．創(chuàng)立表單表單名稱：表單的名稱?！駝?dòng)作：連接到Web應(yīng)用程序的文件。單擊按鈕選擇文件的位置，這個(gè)文件也是實(shí)現(xiàn)表單功能的關(guān)鍵?！穹椒ǎ褐付ū韱螖?shù)據(jù)發(fā)送的方法。一般選擇“POST”〔或“GET”〕36插入文本域

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

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

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

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

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