電子商務(wù)網(wǎng)制作項(xiàng)目DreamweaverCS入門

DW項(xiàng)目二電子商務(wù)網(wǎng)頁(yè)制作DreamweaverCS5入門認(rèn)識(shí)DreamweaverCS5。安裝和啟動(dòng)DreamweaverCS5。了解DreamweaverCS5的工作界面。會(huì)對(duì)DreamweaverCS5的工作區(qū)進(jìn)行設(shè)置。項(xiàng)目目標(biāo)試一試——結(jié)識(shí)Adobe家族新成員

AdobeDreamweaverCS5是一款所見(jiàn)即所得的網(wǎng)頁(yè)制作軟件，它功能強(qiáng)大，簡(jiǎn)單易學(xué)，即使你是初次學(xué)習(xí)，也能夠很快地使用它制作出簡(jiǎn)單的網(wǎng)頁(yè)來(lái)。試一試——結(jié)識(shí)Adobe家族新成員第一步：雙擊桌面上的DW圖標(biāo)，運(yùn)行DreamweaverCS5軟件。第二步：觀察DreamweaverCS5的界面組成。包括菜單欄、起始頁(yè)、面板組和屬性面板等。試一試——結(jié)識(shí)Adobe家族新成員第三步：?jiǎn)螕羝鹗柬?yè)中“新建”欄中的“HTML”選項(xiàng)，新建一個(gè)HTML空白文檔，在工作區(qū)設(shè)計(jì)視圖窗口中輸入一段文字。試一試——結(jié)識(shí)Adobe家族新成員第四步：打開(kāi)“文件”菜單選擇“保存”命令，在彈出的“另存為”對(duì)話框中選擇保存的位置，單擊“保存”按鈕將文檔保存。試一試——結(jié)識(shí)Adobe家族新成員第五步：按F12鍵，可以在瀏覽器中預(yù)覽網(wǎng)頁(yè)效果。試一試——結(jié)識(shí)Adobe家族新成員第四步：打開(kāi)“文件”菜單選擇“保存”命令，在彈出的“另存為”對(duì)話框中選擇保存的位置，單擊“保存”按鈕將文檔保存。試一試——結(jié)識(shí)Adobe家族新成員學(xué)習(xí)一個(gè)新的軟件首先要對(duì)其有一個(gè)大致的總體印象，了解它的界面組成和最基本的操作，通過(guò)自己動(dòng)手慢慢去摸索和熟悉，然后才能進(jìn)一步去深入學(xué)習(xí)軟件的各種功能和操作。AdobeDreamweaverCS5是Adobe家族的成員，是一款制作網(wǎng)頁(yè)的專業(yè)軟件，它功能強(qiáng)大，易于學(xué)習(xí)，初學(xué)者能夠很快上手使用它制作出簡(jiǎn)單的網(wǎng)頁(yè)來(lái)。活動(dòng)小結(jié)初識(shí)DreamweaverCS5

AdobeDreamweaverCS5是一款集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器，DreamweaverCS5是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。Dreamweaver原本是由著名的軟件公司Macromedia開(kāi)發(fā)的，Macromedia的著名產(chǎn)品還有矢量動(dòng)畫制作軟件Flash、網(wǎng)頁(yè)圖像處理軟件Fireworks等。2006年全球最大的圖像編輯軟件供應(yīng)商Adobe以換股方式收購(gòu)了Macromedia公司，自此開(kāi)始，Dreamweaver開(kāi)始屬于ADOBE設(shè)計(jì)軟件系列。2007年Adobe發(fā)布了DreamweaverCS3，2008年發(fā)布DreamweaverCS4，到了2010年，Adobe推出了全新的DreamweaverCS5。DreamweaverCS5的安裝步驟1：將DreamweaverCS5的安裝裝光盤盤放在在光驅(qū)驅(qū)中，，此時(shí)時(shí)會(huì)自自動(dòng)進(jìn)進(jìn)行DreamweaverCS5的安裝裝程序序的始始化，，并對(duì)對(duì)系統(tǒng)統(tǒng)進(jìn)行行檢查。。DreamweaverCS5的安裝步驟2：如果果系統(tǒng)統(tǒng)滿足足安裝裝所需需要的的條件件，就就會(huì)打打開(kāi)““AdobeDreamweaverCS5”安裝界界面，，首先先是顯顯示的的“Adobe軟件許許可協(xié)協(xié)議””頁(yè)面面。DreamweaverCS5的安裝步驟3：閱讀讀軟件件許可可協(xié)議議，單單擊【接受】按鈕，，進(jìn)入入序列列號(hào)頁(yè)頁(yè)面。。DreamweaverCS5的安裝步驟4：輸入入產(chǎn)品品序列列號(hào)，，或選選擇““安裝裝此產(chǎn)產(chǎn)品的的試用用版””，單單擊““下一一步””按鈕鈕，進(jìn)進(jìn)入““安裝裝選項(xiàng)項(xiàng)”頁(yè)頁(yè)面。。DreamweaverCS5的安裝步驟5：選擇擇需要要安裝裝程序序的磁磁盤并并指定定安裝裝路徑徑，單單擊““安裝裝”按按鈕，，進(jìn)入入“安安裝進(jìn)進(jìn)度””頁(yè)面面。DreamweaverCS5的安裝步驟6：安裝裝過(guò)程程會(huì)持持續(xù)幾幾分鐘鐘的時(shí)時(shí)間，，然后后彈出出如圖圖2-10所示的的頁(yè)面面，單單擊【完成】按鈕，，完成成DreamweaverCS5的安裝裝工作作。DreamweaverCS5的啟動(dòng)動(dòng)DreamweaverCS5安裝完完畢后后，會(huì)會(huì)自動(dòng)動(dòng)在““開(kāi)始始”按按鈕的的“程程序””菜單單中添添加啟啟動(dòng)項(xiàng)項(xiàng)，同同時(shí)也也會(huì)在在桌面面上創(chuàng)創(chuàng)建DreamweaverCS5快捷方方式圖圖標(biāo)。。單擊擊“程程序””菜單單中相相應(yīng)的的啟動(dòng)動(dòng)項(xiàng)或或雙擊擊桌面面快捷捷方式式，都都可以以啟動(dòng)動(dòng)DreamweaverCS5。DreamweaverDreamweaverCS5的啟動(dòng)動(dòng)單擊““確定定”后后，將將進(jìn)入入DreamweaverCS5的起始始頁(yè)。可以勾勾選下下面的的“不不再顯顯示””來(lái)隱隱藏它它。在在起始始頁(yè)中中可以以打開(kāi)開(kāi)最近近使用用過(guò)的的文檔檔或創(chuàng)創(chuàng)建新新文檔檔，還還可以以從起起始頁(yè)頁(yè)通過(guò)過(guò)“快快速入入門””或““資源源”來(lái)來(lái)了解解DreamweaverCS5的更多多信息息。DreamweaverCS5的退出出用以下五五種方方法都都可以以退出出DreamweaverCS5：（1）打開(kāi)開(kāi)“文文件””菜單單，選選擇““退出出”命命令。。（2）單擊擊DreamweaverCS5窗口右右上角角的““關(guān)閉閉”按按鈕。。（3）雙擊擊DreamweaverCS5窗口左左上角角的控控制按按鈕。。（4）按快快捷鍵鍵<Ctrl>+Q。（5）按組組合鍵鍵<Alt>+F4。在退出出DreamweaverCS5時(shí)，窗窗口中中如還還有正正在編編輯的的網(wǎng)頁(yè)頁(yè)，系系統(tǒng)會(huì)會(huì)提示示你是是否保保存本本次對(duì)對(duì)文件件的編編輯，，你可可以根根據(jù)需需要選選擇““是””、““否””或““取消消”。。如選選擇““是””，系系統(tǒng)將將保存存本次次編輯輯并退退出DreamweaverCS5；如選選擇““否””，系系統(tǒng)將將不保保存本本次編編輯，，文件件回到到編輯輯前的的狀態(tài)態(tài)，并并退出出DreamweaverCS5；如選選擇““取消消”，，系統(tǒng)統(tǒng)將不不退出出DreamweaverCS5，繼續(xù)續(xù)保持持編輯輯狀態(tài)態(tài)。請(qǐng)注意意：DreamweaverCS5的窗口口組成成DreamweaverCS5的窗口口界面面如圖圖2-13所示。。包括括：標(biāo)標(biāo)題欄欄、菜菜單欄欄、插插入欄欄、文文檔工工具欄欄、文文檔窗窗口、、狀態(tài)態(tài)欄、、屬性性面板板和面面板組組。DreamweaverCS5的窗口口組成成1．菜單單欄菜單單欄欄提提供供了了DreamweaverCS5的所所有有功功能能，，一一共共包包含含十十個(gè)個(gè)菜菜單單。。2．文文檔檔工工具具欄欄文檔檔工工具具欄欄中中顯顯示示的的是是已已經(jīng)經(jīng)打打開(kāi)開(kāi)的的各各個(gè)個(gè)文文檔檔的的圖圖標(biāo)標(biāo)，，單單位位擊擊各各圖圖標(biāo)標(biāo)可可以以在在不不同同文文檔檔間間進(jìn)進(jìn)行行切切換換。。3．文文檔檔窗窗口口文檔檔窗窗口口是是網(wǎng)網(wǎng)頁(yè)頁(yè)文文檔檔的的編編輯輯區(qū)區(qū)，，它它用用于于顯顯示示當(dāng)當(dāng)前前正正在在編編輯輯的的網(wǎng)網(wǎng)頁(yè)頁(yè)文文檔檔。。設(shè)設(shè)計(jì)計(jì)者者可可以以在在文文檔檔區(qū)區(qū)域域中中進(jìn)進(jìn)行行各各種種編編輯輯操操作作。。4．標(biāo)標(biāo)簽簽選選擇擇器器標(biāo)簽簽選選擇擇器器用用于于快快速速選選擇擇網(wǎng)網(wǎng)頁(yè)頁(yè)中中的的各各種種標(biāo)標(biāo)簽簽，，在在網(wǎng)網(wǎng)頁(yè)頁(yè)布布局局時(shí)時(shí)非非常常有有用用。。DreamweaverCS5的窗窗口口組組成成5．屬屬性性檢檢查查器器網(wǎng)頁(yè)頁(yè)設(shè)設(shè)計(jì)計(jì)中中的的每每個(gè)個(gè)對(duì)對(duì)象象都都有有自自己己的的屬屬性性，，比比如如文文字字有有字字體體、、字字號(hào)號(hào)、、對(duì)對(duì)齊齊方方式式等等屬屬性性，，圖圖像像有有大大小小、、鏈鏈接接、、替替換換文文字字等等屬屬性性。。屬屬性性檢檢查查器器的的設(shè)設(shè)置置項(xiàng)項(xiàng)目目會(huì)會(huì)根根據(jù)據(jù)對(duì)對(duì)象象的的不不同同而而變變化化。。6．狀態(tài)欄欄狀態(tài)欄中中顯示與與正在編編輯的文文檔有關(guān)關(guān)的其他他信息。。DreamweaverCS5的窗口組組成7．面板組組為了方便便設(shè)計(jì)者者的編輯輯工作，，DreamweaverCS5組合了各各種具備備各種功功能的面面板供設(shè)設(shè)計(jì)者選選擇使用用，每個(gè)個(gè)面板組組都可以以展開(kāi)或或折疊，，可以和和其他面面板組停?？吭谝灰黄鸹蛉∪∠？靠?，所以以也稱為為浮動(dòng)面面板。（1）查看面面板組打開(kāi)“窗窗口”菜菜單，選選擇“顯顯示面板板”或““隱藏面面板”，，可以顯顯示或隱隱藏面板板組。也也可以單單擊面板板組名稱稱，或者者直接按按快捷鍵鍵F4快速隱藏藏和顯示示面板組組。（2）關(guān)閉面面板組要關(guān)閉某某個(gè)面板板，可以以單擊該該面板標(biāo)標(biāo)題欄右右側(cè)的按按鈕，在在彈出的的菜單中中選擇““關(guān)閉標(biāo)標(biāo)簽組””。如果果要再打打開(kāi)被關(guān)關(guān)閉的面面板組，，可以選選擇“窗窗口”菜菜單，然然后選擇擇要打開(kāi)開(kāi)的面板板名稱即即可。DreamweaverCS5的窗口組組成8．“文件件”面板板“文件””面板是是很常用用的面板板，利用用它可以以管理站站點(diǎn)的文文件和文文件夾。。通過(guò)““文件””面板還還可以訪訪問(wèn)本地地磁盤上上的全部部文件。。了解DreamweaverCS5的視圖管管理在DreamweaverCS5的文檔窗窗口中可可以使用用三種視視圖方式式查看當(dāng)當(dāng)前文檔檔。1．“設(shè)計(jì)計(jì)”視圖圖模式這是一個(gè)用用于可視視化頁(yè)面面布局、、可視化化編輯和和快速應(yīng)應(yīng)用程序序開(kāi)發(fā)的的設(shè)計(jì)環(huán)境。在“設(shè)計(jì)計(jì)”視圖圖中，設(shè)設(shè)計(jì)者可可以“所所見(jiàn)即所所得”地地設(shè)計(jì)網(wǎng)網(wǎng)頁(yè)。了解DreamweaverCS5的視圖管管理２．“代碼碼”視圖模式式這是一個(gè)用用于編寫寫和編輯輯html、Javascript、服務(wù)器器語(yǔ)言代代碼以及及任何其其他類型型代碼的的手工編編碼環(huán)境。了解DreamweaverCS5的視圖管管理3．“拆分分”視圖圖模式這種視圖模式式在單個(gè)個(gè)窗口中中同時(shí)顯顯示同一一文檔的的“代碼碼”視圖圖和“設(shè)設(shè)計(jì)”視圖。自定義DreamweaverCS5的工作區(qū)區(qū)一個(gè)使用順順手的工工作界面面能提高高工作效效率。在在DreamweaverCS5中，你可可以根據(jù)據(jù)自己的的愛(ài)好和和需要自自定義工工作區(qū)，，使其適適合個(gè)人人的需要要。1．選擇工工作區(qū)布布局在DreamweaverCS5中，你可可以選擇擇“設(shè)計(jì)計(jì)器”和和“編碼碼器”工工作區(qū)布布局。““設(shè)計(jì)器器”是一一個(gè)多文文檔界面面的集成成工作區(qū)區(qū)，其中中全部文文檔窗口口和面板板被集成成在一個(gè)個(gè)較大的的應(yīng)用程程序窗口口中，面面板組停停靠在窗窗口右側(cè)側(cè)；“編編碼器””也是集集成的工工作區(qū)，，但是面面板組組組停靠在在窗口左左側(cè)，并并且文檔檔窗口在在默認(rèn)情情況下顯顯示代碼碼視圖。。打開(kāi)““窗口””菜單，，選擇““工作區(qū)區(qū)布局””，可以以設(shè)置““設(shè)計(jì)器器”和““編碼器器”工作作區(qū)布局局，也可可以單擊擊窗口右右上角的的工作區(qū)區(qū)切換器器來(lái)設(shè)置置工作區(qū)區(qū)布局。。了解DreamweaverCS5的視圖管管理在以前版本本的Dreamweaver中，菜單單欄下面面還有一一個(gè)“插插入”欄欄，“插插入”欄欄中包含含了多個(gè)個(gè)按鈕，，單擊這這些按鈕鈕可以將將各種對(duì)對(duì)象（如如圖像、、表格、、DIV標(biāo)簽等））插入到到頁(yè)面中中。使用用插入欄欄插入對(duì)對(duì)象比使使用“插插入”菜菜單更便便捷。在DreamweaverCS5中，我我們可可以在在工作作區(qū)布布局中中選擇擇“經(jīng)經(jīng)典””布局局，這這樣窗窗口界界面中中就會(huì)會(huì)出現(xiàn)現(xiàn)我們們熟悉悉的““插入入”欄欄了。了解DreamweaverCS5的視圖圖管理理2．保存存自定定義工工作區(qū)區(qū)布局局DreamweaverCS5可以保保存自自定義義的工工作區(qū)區(qū)設(shè)置置。打打開(kāi)““窗口口”菜菜單，，選擇擇“工工作區(qū)區(qū)布局局”子子菜單單中的的“新新建工工作區(qū)區(qū)”命命令，，可以以建立立自定定義工工作區(qū)區(qū)設(shè)置置；當(dāng)當(dāng)你需需要將將工作作區(qū)還還原成成原先先設(shè)置置過(guò)的的狀態(tài)態(tài)時(shí)，，可以以通過(guò)過(guò)打開(kāi)開(kāi)“窗窗口””菜單單，選選擇““工作作區(qū)布布局””子菜菜單，，或通通過(guò)工工作