1、web設(shè)計(jì)和創(chuàng)作教程，第1頁，2.1頁介紹Dreamweaver 8.0界面2.2 Dreamweaver 8.0常用工具2.3 Dreamweaver8.0功能簡(jiǎn)介使用2.4 Dreamweaver 8.0的插圖任務(wù)2.5在Dreamweaver 8.0中構(gòu)建和管理站點(diǎn)2.6本地站點(diǎn)2.7此界面是一個(gè)“工作區(qū)設(shè)置”對(duì)話框，其中對(duì)話框左側(cè)是Dreamweaver 8的設(shè)計(jì)視圖，右側(cè)是dremave 8的代碼視圖。Dreamweaver8設(shè)計(jì)視圖布局提供了將所有元素放在一個(gè)窗口中的統(tǒng)一布局。選擇面向設(shè)計(jì)者的設(shè)計(jì)視圖布局。2.1 Dreamweaver 8.0界面簡(jiǎn)介，page3，2.1.1 Dr

2、eamweaver 8.0界面簡(jiǎn)介Dreamweaver 8.0標(biāo)準(zhǔn)任務(wù)界面可分為以下幾個(gè)主要區(qū)域3360935標(biāo)題欄3360菜單欄：文檔工具欄：插入欄：插入：允許您插入各種元素。修改：具有修改頁面元素的功能。文本：用于處理文本。命令：所有附加命令主題站點(diǎn)：用于創(chuàng)建和管理站點(diǎn)窗口：顯示和隱藏控制面板，切換文檔窗口幫助：聯(lián)機(jī)幫助功能。2.2 Dreamweaver 8.0常用工具、第5頁、2.2.2頁文檔工具欄“文檔”工具欄包含用于各種文檔窗口視圖(如“設(shè)計(jì)”視圖和“代碼”視圖)的選項(xiàng)、各種查看選項(xiàng)以及用于在瀏覽器中預(yù)覽等一些常見任務(wù)的按鈕。接口如圖2-4所示。2.2 Dreamweaver 8

3、.0常用工具、page6和2.2.3“插入”欄插入面板包含您可以應(yīng)用于網(wǎng)頁的所有對(duì)象，包括“插入”菜單中的選項(xiàng)。包含常用、布局、表單、文本、HTML、應(yīng)用程序、Flash元素和收藏夾的八個(gè)輔助菜單共有167個(gè)按鈕?！安迦搿泵姘褰M是一個(gè)圖像插入命令，通過按鈕可以輕松添加圖像、聲音、多媒體動(dòng)畫、表格等。圖層、框架、表單、網(wǎng)頁元素(例如Flash和ActiveX)。面板的界面如圖2-5所示。2.2 Dreamweaver 8.0常用工具，page 7，2.2.4文檔窗口顯示“文檔”窗口當(dāng)前文檔?！霸O(shè)計(jì)”視圖是用于可視化頁面布局、可視化編輯和快速應(yīng)用程序開發(fā)的設(shè)計(jì)環(huán)境。在此視圖中，Dreamweave

4、r 8.0顯示文檔的完全可編輯可視表示形式，類似于在瀏覽器中查看頁面時(shí)的外觀?！按a”視圖是用于編寫和編輯HTML、JavaScript、服務(wù)器語言代碼和任何其它類型代碼的手動(dòng)編碼環(huán)境?！按a”和“設(shè)計(jì)”視圖使您可以在單個(gè)窗口中同時(shí)查看同一文檔的“代碼”視圖和“設(shè)計(jì)”視圖。2.2 Dreamweaver 8.0常用工具、page8和2.2.5屬性欄屬性面板不會(huì)將所有屬性加載到面板中；用戶選擇的對(duì)象動(dòng)態(tài)顯示對(duì)象的屬性面板的狀態(tài)完全取決于文檔中當(dāng)前選擇的對(duì)象。例如，如果選擇當(dāng)前圖像，則圖像的相關(guān)屬性將出現(xiàn)在屬性面板中。選擇表格后，屬性面板將相應(yīng)地更改為表格的相關(guān)屬性。屬性面板的界面如圖2-8所示。

5、2.2 Dreamweaver 8.0常用工具、page9和2.2.6狀態(tài)欄“文檔”窗口底部的狀態(tài)欄提供有關(guān)所創(chuàng)建文檔的附加信息?！拔臋n”窗口底部的狀態(tài)欄提供了有關(guān)正在創(chuàng)建的文檔的其他信息。標(biāo)簽選擇器顯示包圍當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。單擊分層結(jié)構(gòu)中的任意選項(xiàng)卡以選擇該標(biāo)簽及其所有內(nèi)容。單擊以選擇文檔的整個(gè)正文。，2.2 Dreamweaver 8.0常用工具，page 10，1。將世界一流的設(shè)計(jì)和代碼編輯器組合在一起，在設(shè)計(jì)窗口中簡(jiǎn)化源代碼是用戶根據(jù)任務(wù)自定義用戶界面的能力。2.跨瀏覽器驗(yàn)證保存時(shí)，可以指定測(cè)試瀏覽器，自動(dòng)檢查當(dāng)前文檔在瀏覽器之間的有效性(兼容性)，并檢查頁面上是否存在目標(biāo)

6、瀏覽器不支持的tags或CSS結(jié)構(gòu)。動(dòng)態(tài)交叉瀏覽器驗(yàn)證功能會(huì)自動(dòng)檢查tags或CSS規(guī)則是否適合當(dāng)前默認(rèn)瀏覽器。3.使用內(nèi)置圖形編輯程序進(jìn)一步節(jié)省開發(fā)時(shí)間。一系列輔助圖像編輯功能(如圖像的剪切和縮放)可以使用內(nèi)置的Macromedia Fireworks技術(shù)。4.在設(shè)計(jì)模式下，開發(fā)人員可以使用LiveData窗口預(yù)覽實(shí)時(shí)數(shù)據(jù)，而無需使用固定瀏覽器。2.3 Dreamweaver8.0的功能簡(jiǎn)介(1)，page11，5。在更多支持CSS的設(shè)計(jì)窗口中，可以使用重新設(shè)計(jì)的標(biāo)簽檢測(cè)工具檢測(cè)哪些CSS規(guī)則與當(dāng)前選擇一起使用。使用即時(shí)編輯功能，您可以在編輯CSS的同時(shí)立即查看設(shè)計(jì)窗口中的更改。使用增強(qiáng)的C

7、SS面板可以直接在代碼內(nèi)部定義樣式，并直觀地確認(rèn)CSS樣式定義的位置。不必直接選擇CSS樣式作為編輯方法，所有可用樣式的預(yù)覽顯示都內(nèi)置在樣式下拉列表中。可以通過頁面屬性對(duì)話框(“修改”菜單“頁面屬性”)對(duì)頁面控制屬性(如標(biāo)題和鏈接)進(jìn)行更多更改。2.3 Dreamweaver8.0的功能簡(jiǎn)介(2)，page12，6。使用完全集成的開發(fā)環(huán)境創(chuàng)建HTML、XHTML、XML、ASP和ASP。開發(fā)NET、JSP、PHP和Macromedia Cold Fusion站點(diǎn)。通過Macromedia插件中心，您可以獲得800多個(gè)免費(fèi)插件，以開發(fā)和擴(kuò)展開發(fā)環(huán)境。7.所有傳輸?shù)奈募纪耆用?，并阻止?duì)您的信息

8、、文件內(nèi)容、用戶名和密碼的未授權(quán)訪問。8.將聯(lián)系表內(nèi)容從Microsoft Word和Excel直接復(fù)制到Dreamweaver，同時(shí)保留字體、顏色和CSS樣式。完全支持unicode，支持使用所有字體和編碼(包括雙字節(jié)字符)和存儲(chǔ)Chu。9.增強(qiáng)的ASP。Microsoft ASP，使用NET對(duì)象和屬性檢測(cè)工具。NET web forms、2.3 Dreamweaver 8.0的功能簡(jiǎn)介(3)、page13、10。重寫PHP語法和服務(wù)器行為，包括Master-Detail頁面設(shè)置模塊、用戶身份驗(yàn)證模塊等。通過嵌入式Flash構(gòu)件導(dǎo)入單個(gè)Flash構(gòu)件，就像導(dǎo)入標(biāo)簽一樣容易。使用MX組件(包括

9、MXHTML構(gòu)件、按鈕和模板)快速設(shè)置有效的用戶界面。改進(jìn)的表格編輯工具、修改的Insert面板、高效的文件編輯過程。更有效的代碼編輯(如右鍵單擊編碼工具)、選擇更多搜索、保存搜索條件和快速啟動(dòng)屬性檢查工具。編輯詳細(xì)屬性，其中列出了適用于當(dāng)前選擇的每個(gè)屬性。Dreamweaver 8.0還添加了插圖處理功能，如調(diào)整插圖的亮度和對(duì)比度，以及對(duì)插圖進(jìn)行銳化。2.3 Dreamweaver8.0功能簡(jiǎn)介(4)，將圖片插入page14，Dreamweaver，在“屬性”面板中還有一些與圖片相關(guān)的屬性圖標(biāo)。變更貼花大小后，在貼花大小設(shè)定列旁邊會(huì)加入更多帶有箭頭的圖形按鈕圖示，是將貼花快速還原為原始大小的

10、工具。切換到Fireworks圖標(biāo)旁邊的一系列圖表也是這些圖標(biāo)。Dreamweaver 8.0新增了三種圖片處理功能：裁剪工具(裁剪圖片)、亮度/對(duì)比度調(diào)整工具和銳化工具。使用這些簡(jiǎn)單的照片處理工具，編輯web圖片時(shí)無需啟動(dòng)其他圖像處理軟件，從而提高了工作效率。，使用2.4 Dreamweaver 8.0處理圖像，page15，裁剪插圖2。亮度調(diào)節(jié)3。銳化，2.4在Dreamweaver 8.0中，圖像處理、page16和Dreamweaver中，站點(diǎn)一詞可以指屬于網(wǎng)站或網(wǎng)站的文檔在本地存儲(chǔ)的位置?？紤]創(chuàng)建網(wǎng)站時(shí)，要確保網(wǎng)站成功，必須遵循一系列計(jì)劃步驟。即使填寫個(gè)人主頁，只有朋友和家人才能看到

11、，仔細(xì)計(jì)劃網(wǎng)站也很有用。要開發(fā)優(yōu)秀的網(wǎng)站，通常需要遵循以下工作流程：首先要定義開發(fā)網(wǎng)站的目的，做好網(wǎng)站規(guī)劃工作。然后設(shè)計(jì)網(wǎng)站的外觀。然后創(chuàng)建實(shí)際頁面。然后，測(cè)試創(chuàng)建的網(wǎng)站，以確定創(chuàng)建的網(wǎng)站是否符合原始設(shè)計(jì)目的。最后發(fā)布網(wǎng)站。發(fā)布站點(diǎn)后，必須定期維護(hù)站點(diǎn)，以便及時(shí)更新站點(diǎn)的內(nèi)容。2.5在Dreamweaver 8.0中，站點(diǎn)計(jì)劃(1)、page17和站點(diǎn)計(jì)劃主要包括：1.站點(diǎn)的主題和名稱確定站點(diǎn)項(xiàng)目表示用戶創(chuàng)建站點(diǎn)時(shí)要包含的主要內(nèi)容。目前網(wǎng)站的主題很多，這是整個(gè)網(wǎng)站規(guī)劃過程中最重要的一步。通常，在確定站點(diǎn)主題時(shí)，請(qǐng)遵循以下原則：主題鮮明、小、精致。一個(gè)網(wǎng)站必須有一個(gè)明確的主題，包含主題范圍內(nèi)的大

12、、精致、深刻的內(nèi)容。主題對(duì)自己最擅長(zhǎng)的事最感興趣。找到最緊迫的內(nèi)容，深入，徹底。發(fā)揚(yáng)自己的個(gè)性。盡情發(fā)揮自己的興趣和愛好，突出自己的個(gè)性，創(chuàng)造自己的特色吧。在2.5 Dreamweaver 8.0中計(jì)劃站點(diǎn)(2)，第18，2頁。確定數(shù)據(jù)收集站點(diǎn)的主題后，開始圍繞主題收集數(shù)據(jù)。資料可以在書、報(bào)紙、CD、多媒體上獲得，也可以在網(wǎng)上收集。然后將收集的資料用粗制濫造，偽造真實(shí)，作為自己制作網(wǎng)頁的資料。3.規(guī)劃網(wǎng)站計(jì)劃網(wǎng)站就像設(shè)計(jì)大樓一樣。只有好好設(shè)計(jì)圖紙，才能建造美麗的大樓。規(guī)劃網(wǎng)站時(shí)，首先要一一列出網(wǎng)站的內(nèi)容，并根據(jù)內(nèi)容提出結(jié)構(gòu)化藍(lán)圖，設(shè)計(jì)每個(gè)頁面之間的鏈接以符合實(shí)際情況。網(wǎng)站配置內(nèi)容包括確定網(wǎng)站點(diǎn)

13、材料、確定網(wǎng)站名稱、確定網(wǎng)站框架等。2.5在Dreamweaver 8.0中規(guī)劃站點(diǎn)(3)，page19，4。溫度設(shè)定設(shè)計(jì)網(wǎng)站的溫度和主機(jī)板速度，一般請(qǐng)注意以下事項(xiàng)：突出顯示主題。把項(xiàng)目放在最顯眼的地方，讓訪問者更快、更清楚地知道在你的網(wǎng)站上顯示什么。設(shè)計(jì)“最近更新”的藍(lán)眼睛。5.目錄結(jié)構(gòu)設(shè)計(jì)目錄結(jié)構(gòu)設(shè)計(jì)一般需要注意以下幾點(diǎn)：根據(jù)列的內(nèi)容創(chuàng)建子目錄。在每個(gè)目錄下，為圖像單獨(dú)創(chuàng)建目錄image。目錄的水平不太深，最好少做五層。使用意義明確的非中文目錄(通常使用拼音)。2.5在Dreamweaver 8.0中規(guī)劃站點(diǎn)(4)、page20和6。適當(dāng)?shù)貞?yīng)用顏色很重要，不同的顏色組合會(huì)產(chǎn)生不同的效果，影

14、響訪問者的感情。顏色安排應(yīng)遵循協(xié)調(diào)、平衡和強(qiáng)調(diào)的原則。7.布局網(wǎng)頁的布局不能忽略。要合理運(yùn)用空間，把網(wǎng)頁織得無懈可擊。布局一般遵循的原則是將焦點(diǎn)強(qiáng)調(diào)、協(xié)調(diào)平衡、網(wǎng)站標(biāo)志、主菜單等最重要的模塊放在最顯眼的地方。還必須注意其他方面和主頁的樣式一致性，以及返回主頁的鏈接。2.5在Dreamweaver 8.0中規(guī)劃站點(diǎn)(5)，page21，8。使用圖像的網(wǎng)頁不能只包含文本，必須相應(yīng)地添加一些圖像。使用圖像時(shí)，通常應(yīng)注意以下事項(xiàng)：圖像服務(wù)主頁的內(nèi)容，不要使整個(gè)頁面變成綠色。形象也要大小漂亮。照片不僅好看，而且要保證圖片質(zhì)量，同時(shí)盡量縮小圖片大小。單個(gè)圖像不能超過30KB。合理使用JPG和GIF格式。通常，顏色較少的圖像(在256色內(nèi))將被處理為GIF格式。建議以JPG格式處理顏色更豐富的圖像。在2.5 Dreamweaver 8.0中，如果要?jiǎng)?chuàng)建站點(diǎn)計(jì)劃(6)、page22和所有人都可以查看的站點(diǎn)，則必須先在本地磁盤上創(chuàng)建此站點(diǎn)，然后將此站點(diǎn)傳遞到internet上的web服務(wù)器。放置在本地磁盤上的網(wǎng)站稱為本地站點(diǎn)，internet web服務(wù)器上的網(wǎng)站稱為遠(yuǎn)程站點(diǎn)。Dreamweaver 8.0為本地和遠(yuǎn)程站點(diǎn)提供了強(qiáng)大的管理功能。Dreamweaver 8.0使您可以有效地構(gòu)建和管理多個(gè)站點(diǎn)。站點(diǎn)構(gòu)建可以使用向?qū)瓿?，也可以使用高?jí)設(shè)置完成。1.