電子商務(wù)網(wǎng)頁制作-項(xiàng)目2

1、DW項(xiàng)目二電子商務(wù)網(wǎng)頁制作Dreamweaver CS5入門認(rèn)識(shí)DreamweaverCS5。安裝和啟動(dòng)DreamweaverCS5。了解DreamweaverCS5的工作界界面。會(huì)對(duì)DreamweaverCS5的工作區(qū)區(qū)進(jìn)行設(shè)設(shè)置。項(xiàng)目目標(biāo)標(biāo)試一試結(jié)識(shí)Adobe家族新成成員AdobeDreamweaverCS5是一款所所見即所所得的網(wǎng)網(wǎng)頁制作作軟件，它功能能強(qiáng)大，簡單易易學(xué)，即即使你是是初次學(xué)學(xué)習(xí)，也也能夠很很快地使使用它制制作出簡簡單的網(wǎng)網(wǎng)頁來。試一試結(jié)識(shí)Adobe家族新成成員第一步：雙擊擊桌面上上的DW圖標(biāo)，運(yùn)運(yùn)行DreamweaverCS5軟件。第二步：觀察察DreamweaverCS

2、5的界面組組成。包包括菜單單欄、起起始頁、面板組組和屬性性面板等。試一試結(jié)識(shí)Adobe家族新成成員第三步：單擊擊起始頁頁中“新新建”欄欄中的“HTML”選項(xiàng)，新新建一個(gè)個(gè)HTML空白文檔檔，在工工作區(qū)設(shè)設(shè)計(jì)視圖圖窗口中中輸入一一段文字。試一試結(jié)識(shí)Adobe家族新成成員第四步：打開開“文件件”菜單單選擇“保存”命令，在彈出出的“另另存為”對(duì)話框框中選擇擇保存的的位置，單擊“保存”按鈕將將文檔保保存。試一試結(jié)識(shí)Adobe家族新成成員第五步：按F12鍵，可以以在瀏覽覽器中預(yù)預(yù)覽網(wǎng)頁頁效果。試一試結(jié)識(shí)Adobe家族新成成員第四步：打開開“文件件”菜單單選擇“保存”命令，在彈出出的“另另存為”對(duì)話框框中

3、選擇擇保存的的位置，單擊“保存”按鈕將將文檔保保存。試一試結(jié)識(shí)Adobe家族新成成員學(xué)習(xí)一個(gè)新的的軟件首首先要對(duì)對(duì)其有一一個(gè)大致致的總體體印象，了解它它的界面面組成和和最基本本的操作作，通過過自己動(dòng)動(dòng)手慢慢慢去摸索索和熟悉悉，然后后才能進(jìn)進(jìn)一步去去深入學(xué)學(xué)習(xí)軟件件的各種種功能和和操作。AdobeDreamweaverCS5是Adobe家族的成成員，是是一款制制作網(wǎng)頁頁的專業(yè)業(yè)軟件，它功能能強(qiáng)大，易于學(xué)學(xué)習(xí)，初初學(xué)者能能夠很快快上手使使用它制制作出簡簡單的網(wǎng)網(wǎng)頁來?；顒?dòng)小結(jié)結(jié)初識(shí)DreamweaverCS5AdobeDreamweaverCS5是一款集集網(wǎng)頁制制作和管管理網(wǎng)站站于一身身的所見見即

4、所得得網(wǎng)頁編編輯器，DreamweaverCS5是第一套套針對(duì)專專業(yè)網(wǎng)頁頁設(shè)計(jì)師師特別發(fā)發(fā)展的視視覺化網(wǎng)網(wǎng)頁開發(fā)發(fā)工具，利用它它可以輕輕而易舉舉地制作作出跨越越平臺(tái)限限制和跨跨越瀏覽覽器限制制的充滿滿動(dòng)感的的網(wǎng)頁。Dreamweaver原本是由由著名的的軟件公公司Macromedia開發(fā)的，Macromedia的著名產(chǎn)產(chǎn)品還有有矢量動(dòng)動(dòng)畫制作作軟件Flash、網(wǎng)頁圖圖像處理理軟件Fireworks等。2006年全球最最大的圖圖像編輯輯軟件供供應(yīng)商Adobe以換股方方式收購購了Macromedia公司，自自此開始始，Dreamweaver開始屬于于ADOBE設(shè)計(jì)軟件件系列。2007年Adobe發(fā)

5、布了DreamweaverCS3，2008年發(fā)布DreamweaverCS4，到了2010年，Adobe推出了全全新的DreamweaverCS5。DreamweaverCS5的安裝步驟1：將DreamweaverCS5的安裝光光盤放在在光驅(qū)中中，此時(shí)時(shí)會(huì)自動(dòng)動(dòng)進(jìn)行DreamweaverCS5的安裝程程序的始始化，并并對(duì)系統(tǒng)統(tǒng)進(jìn)行檢查。DreamweaverCS5的安裝步驟2：如果系系統(tǒng)滿足足安裝所所需要的的條件，就會(huì)打打開“AdobeDreamweaverCS5”安裝界面面，首先先是顯示示的“Adobe軟件許可可協(xié)議”頁面。DreamweaverCS5的安裝步驟3：閱讀軟軟件許可可協(xié)議，單擊

6、【接受】按鈕，進(jìn)進(jìn)入序列列號(hào)頁面面。DreamweaverCS5的安裝步驟4：輸入產(chǎn)產(chǎn)品序列列號(hào)，或或選擇“安裝此此產(chǎn)品的的試用版版”，單單擊“下下一步”按鈕，進(jìn)入“安裝選選項(xiàng)”頁頁面。DreamweaverCS5的安裝步驟5：選擇需需要安裝裝程序的的磁盤并并指定安安裝路徑徑，單擊擊“安裝裝”按鈕鈕，進(jìn)入入“安裝裝進(jìn)度”頁面。DreamweaverCS5的安裝步驟6：安裝過過程會(huì)持持續(xù)幾分分鐘的時(shí)時(shí)間，然然后彈出出如圖2-10所示的頁頁面，單單擊【完成】按鈕，完完成DreamweaverCS5的安裝工工作。DreamweaverCS5的啟動(dòng)DreamweaverCS5安裝完畢畢后，會(huì)會(huì)自動(dòng)在在

7、“開始始”按鈕鈕的“程程序”菜菜單中添添加啟動(dòng)動(dòng)項(xiàng)，同同時(shí)也會(huì)會(huì)在桌面面上創(chuàng)建建DreamweaverCS5快捷方式式圖標(biāo)。單擊“程序”菜單中中相應(yīng)的的啟動(dòng)項(xiàng)項(xiàng)或雙擊擊桌面快快捷方式式，都可可以啟動(dòng)動(dòng)DreamweaverCS5。DreamweaverDreamweaverCS5的啟動(dòng)單擊“確確定”后后，將進(jìn)進(jìn)入DreamweaverCS5的起始頁?？梢怨催x選下面的的“不再再顯示”來隱藏藏它。在在起始頁頁中可以以打開最最近使用用過的文文檔或創(chuàng)創(chuàng)建新文文檔，還還可以從從起始頁頁通過“快速入入門”或或“資源源”來了了解DreamweaverCS5的更多信信息。DreamweaverCS5的退出用以

8、下五種種方法都都可以退退出DreamweaverCS5：（1）打開“文件”菜單，選擇“退出”命令。（2）單擊DreamweaverCS5窗口右上上角的“關(guān)閉”按鈕。（3）雙擊DreamweaverCS5窗口左上上角的控控制按鈕鈕。（4）按快捷捷鍵+Q。（5）按組合合鍵+F4。在退出DreamweaverCS5時(shí)，窗口口中如還還有正在在編輯的的網(wǎng)頁，系統(tǒng)會(huì)會(huì)提示你你是否保保存本次次對(duì)文件件的編輯輯，你可可以根據(jù)據(jù)需要選選擇“是是”、“否”或或“取消消”。如如選擇“是”，系統(tǒng)將將保存本本次編輯輯并退出出DreamweaverCS5；如選擇擇“否”，系統(tǒng)統(tǒng)將不保保存本次次編輯，文件回回到編輯輯前的狀

9、狀態(tài)，并并退出DreamweaverCS5；如選擇擇“取消消”，系系統(tǒng)將不不退出DreamweaverCS5，繼續(xù)保保持編輯輯狀態(tài)。請注意：DreamweaverCS5的窗口組組成DreamweaverCS5的窗口界界面如圖圖2-13所示。包包括：標(biāo)標(biāo)題欄、菜單欄欄、插入入欄、文文檔工具具欄、文文檔窗口口、狀態(tài)態(tài)欄、屬屬性面板板和面板板組。DreamweaverCS5的窗口組組成1菜單欄欄菜單欄提提供了DreamweaverCS5的所有功功能，一一共包含含十個(gè)菜菜單。2文檔工工具欄文檔工具具欄中顯顯示的是是已經(jīng)打打開的各各個(gè)文檔檔的圖標(biāo)標(biāo)，單位位擊各圖圖標(biāo)可以以在不同同文檔間間進(jìn)行切切換。3文

10、檔窗窗口文檔窗口口是網(wǎng)頁頁文檔的的編輯區(qū)區(qū)，它用用于顯示示當(dāng)前正正在編輯輯的網(wǎng)頁頁文檔。設(shè)計(jì)者者可以在在文檔區(qū)區(qū)域中進(jìn)進(jìn)行各種種編輯操操作。4標(biāo)簽選選擇器標(biāo)簽選擇擇器用于于快速選選擇網(wǎng)頁頁中的各各種標(biāo)簽簽，在網(wǎng)網(wǎng)頁布局局時(shí)非常常有用。DreamweaverCS5的窗口組組成5屬性檢檢查器網(wǎng)頁設(shè)計(jì)計(jì)中的每每個(gè)對(duì)象象都有自自己的屬屬性，比比如文字字有字體體、字號(hào)號(hào)、對(duì)齊齊方式等等屬性，圖像有有大小、鏈接、替換文文字等屬屬性。屬屬性檢查查器的設(shè)設(shè)置項(xiàng)目目會(huì)根據(jù)據(jù)對(duì)象的的不同而而變化。6狀態(tài)欄欄狀態(tài)欄中中顯示與與正在編編輯的文文檔有關(guān)關(guān)的其他他信息。DreamweaverCS5的窗口組組成7面板組組為

11、了方便便設(shè)計(jì)者者的編輯輯工作，DreamweaverCS5組合了各各種具備備各種功功能的面面板供設(shè)設(shè)計(jì)者選選擇使用用，每個(gè)個(gè)面板組組都可以以展開或或折疊，可以和和其他面面板組停?？吭谝灰黄鸹蛉∪∠？靠?，所以以也稱為為浮動(dòng)面面板。（1）查看面面板組打開“窗窗口”菜菜單，選選擇“顯顯示面板板”或“隱藏面面板”，可以顯顯示或隱隱藏面板板組。也也可以單單擊面板板組名稱稱，或者者直接按按快捷鍵鍵F4快速隱藏藏和顯示示面板組組。（2）關(guān)閉面面板組要關(guān)閉某某個(gè)面板板，可以以單擊該該面板標(biāo)標(biāo)題欄右右側(cè)的按按鈕，在在彈出的的菜單中中選擇“關(guān)閉標(biāo)標(biāo)簽組”。如果果要再打打開被關(guān)關(guān)閉的面面板組，可以選選擇“窗窗口”

12、菜菜單，然然后選擇擇要打開開的面板板名稱即即可。DreamweaverCS5的窗口組組成8“文件件”面板板“文件”面板是是很常用用的面板板，利用用它可以以管理站站點(diǎn)的文文件和文文件夾。通過“文件”面板還還可以訪訪問本地地磁盤上上的全部部文件。了解DreamweaverCS5的視圖管管理在DreamweaverCS5的文檔窗窗口中可可以使用用三種視視圖方式式查看當(dāng)當(dāng)前文檔檔。1“設(shè)計(jì)計(jì)”視圖圖模式這是一個(gè)用用于可視視化頁面面布局、可視化化編輯和和快速應(yīng)應(yīng)用程序序開發(fā)的的設(shè)計(jì)環(huán)境。在“設(shè)計(jì)計(jì)”視圖圖中，設(shè)設(shè)計(jì)者可可以“所所見即所所得”地地設(shè)計(jì)網(wǎng)網(wǎng)頁。了解DreamweaverCS5的視圖管管理“代

13、碼碼”視圖模式式這是一個(gè)用用于編寫寫和編輯輯html、Javascript、服務(wù)器器語言代代碼以及及任何其其他類型型代碼的的手工編編碼環(huán)境。了解DreamweaverCS5的視圖管管理3“拆分分”視圖圖模式這種視圖模式式在單個(gè)個(gè)窗口中中同時(shí)顯顯示同一一文檔的的“代碼碼”視圖圖和“設(shè)設(shè)計(jì)”視圖。自定義DreamweaverCS5的工作區(qū)區(qū)一個(gè)使用順順手的工工作界面面能提高高工作效效率。在在DreamweaverCS5中，你可可以根據(jù)據(jù)自己的的愛好和和需要自自定義工工作區(qū)，使其適適合個(gè)人人的需要要。1選擇工工作區(qū)布布局在DreamweaverCS5中，你可可以選擇擇“設(shè)計(jì)計(jì)器”和和“編碼碼器”工工

14、作區(qū)布布局?！霸O(shè)計(jì)器器”是一一個(gè)多文文檔界面面的集成成工作區(qū)區(qū)，其中中全部文文檔窗口口和面板板被集成成在一個(gè)個(gè)較大的的應(yīng)用程程序窗口口中，面面板組停?？吭诖按翱谟覀?cè)側(cè)；“編編碼器”也是集集成的工工作區(qū)，但是面面板組組組?？吭谠诖翱谧笞髠?cè)，并并且文檔檔窗口在在默認(rèn)情情況下顯顯示代碼碼視圖。打開“窗口”菜單，選擇“工作區(qū)區(qū)布局”，可以以設(shè)置“設(shè)計(jì)器器”和“編碼器器”工作作區(qū)布局局，也可可以單擊擊窗口右右上角的的工作區(qū)區(qū)切換器器來設(shè)置置工作區(qū)區(qū)布局。了解DreamweaverCS5的視圖管管理在以前版本本的Dreamweaver中，菜單單欄下面面還有一一個(gè)“插插入”欄欄，“插插入”欄欄中包含含了多個(gè)

15、個(gè)按鈕，單擊這這些按鈕鈕可以將將各種對(duì)對(duì)象（如如圖像、表格、DIV標(biāo)簽等）插入到到頁面中中。使用用插入欄欄插入對(duì)對(duì)象比使使用“插插入”菜菜單更便便捷。在DreamweaverCS5中，我們們可以在在工作區(qū)區(qū)布局中中選擇“經(jīng)典”布局，這樣窗窗口界面面中就會(huì)會(huì)出現(xiàn)我我們熟悉悉的“插插入”欄欄了。了解DreamweaverCS5的視圖管管理2保存自自定義工工作區(qū)布布局DreamweaverCS5可以保存存自定義義的工作作區(qū)設(shè)置置。打開開“窗口口”菜單單，選擇擇“工作作區(qū)布局局”子菜菜單中的的“新建建工作區(qū)區(qū)”命令令，可以以建立自自定義工工作區(qū)設(shè)設(shè)置；當(dāng)當(dāng)你需要要將工作作區(qū)還原原成原先先設(shè)置過過的狀態(tài)態(tài)時(shí)，可可以通過過打開“窗口”菜單，選擇“工作區(qū)區(qū)布局”子菜單單，或通通過工作作區(qū)切換換器，然然后選擇擇前面保保存過的的布局名名稱來恢恢復(fù)成該該工作區(qū)區(qū)布局設(shè)設(shè)置。項(xiàng)目總結(jié)結(jié)我們需要要使用專專業(yè)的軟軟件來制制作網(wǎng)頁頁，DreamweaverCS5就是一款款非常流流行的專專業(yè)的網(wǎng)網(wǎng)頁制作作軟件，無論你你是菜鳥鳥還是網(wǎng)網(wǎng)頁設(shè)計(jì)計(jì)師，都都可以使使用它來來制作出出各種各各樣的網(wǎng)網(wǎng)頁。本本項(xiàng)目引引領(lǐng)大家家學(xué)習(xí)DreamweaverCS5的