中職電子商務網(wǎng)頁制作課件PPT

1、以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我專業(yè)老師：羅忠成DW電子商務網(wǎng)頁制作初識電子商務網(wǎng)頁專業(yè)老師：羅忠成課前準備與紀律上課時間，手機請設置為靜音狀態(tài)！挺住啊，騷年！以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我項目目標1、能描述網(wǎng)頁和網(wǎng)站的概念；2、能說出域名、IP地址及URL、HTML的含義；3、能解釋靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁的概念及其區(qū)別；4、會描述電子商務網(wǎng)站的特點與構(gòu)成；5、能講述網(wǎng)頁制作發(fā)展史，列舉開發(fā)技術(shù)及工具。重點內(nèi)容以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我看一看走馬觀花看電子商務網(wǎng)頁http:/ 這是一個知名的互聯(lián)網(wǎng)時尚品

2、牌服裝銷售網(wǎng)站，倡導“快時尚”，瞄準的是年輕一代消費群體。 在色彩運用上采用了明快的色調(diào)，符合年輕消費者的審美趨向。在結(jié)構(gòu)設計上使用矩形塊劃分信息區(qū)域，讓瀏覽者很容易就能明確網(wǎng)頁界面的結(jié)構(gòu)。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我看一看走馬觀花看電子商務網(wǎng)頁作為一個品牌購物網(wǎng)站具有大量的物品信息，在導航欄中對于物品導航進行了兩種類型的分類方式：一是按照衣服的類別進行分類。在網(wǎng)頁頂部紅色條狀導航欄中不僅顯示了當季熱銷的商品，還可以查看優(yōu)惠信息、推薦商品和各類活動；二是按照用戶來分類。頁面左邊羅列了男裝，女裝，童裝，內(nèi)衣，配飾等類別，使瀏覽者能很快找到想要的商品。為了方便瀏覽者購買商品，在網(wǎng)

3、頁的底部還提供了詳細幫助的欄目，這一欄目通常稱為“網(wǎng)站地圖”以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我看一看走馬觀花看電子商務網(wǎng)頁這是商品詳情頁面。這個頁面看上去干凈清爽，產(chǎn)品性能參數(shù)、客戶評價一目了然，購買與收藏功能齊備。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我看一看走馬觀花看電子商務網(wǎng)頁這是注冊頁面頁面。這一頁中主要的網(wǎng)頁元素是表單，表單是電子商務網(wǎng)站必不可少的組成部分，是實現(xiàn)網(wǎng)站和瀏覽者交互的重要途徑之一，一般用來收集聯(lián)系信息、接受用戶要求、獲得反饋意見、用戶注冊及用戶登錄。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我看一看走馬觀花看電子商務網(wǎng)頁一般來說，電子商務網(wǎng)站都具備有

4、站內(nèi)搜索功能，對于性急或者有明確購買目標的瀏覽者，使用搜索欄可以更為便捷地搜索到想要的結(jié)果。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我看一看走馬觀花看電子商務網(wǎng)頁電子商務網(wǎng)站的用戶登錄網(wǎng)站的目的，是要從這些網(wǎng)站上獲得利益或資訊。因此界面簡潔，易用性好是商務網(wǎng)站最主要的特點。作為營銷的手段之一，電子商務網(wǎng)站的視覺形象十分重要，既要美觀又要準確傳達企業(yè)信息。應當注意的是，當你進行本次體驗時，即使仍然使用凡客的網(wǎng)站，所見到的內(nèi)容與教材相對照一定發(fā)生了變化。因為電子商務網(wǎng)站必須在第一時間給瀏覽者提供企業(yè)資訊，需要較高的更新頻率，才能保持旺盛的生命力?；顒有〗Y(jié)一起回顧總結(jié)以德立身 以技立足放飛理想

5、激揚青春 展現(xiàn)自我看一看2020年開學第一課活動小結(jié)做一個有擔當、責任心、愛國主義情懷作業(yè)：1、寫觀后感400字以上？以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我1.1理解網(wǎng)頁與網(wǎng)站1什么是網(wǎng)頁網(wǎng)頁（Web）：是用html語言編寫的，通過www網(wǎng)傳輸，并被web瀏覽器翻譯成可以顯示出來的集合文本、圖片、聲音和動畫等信息元素的頁面文件。2網(wǎng)頁的類型根據(jù)頁面內(nèi)容可以分首頁、主頁、專欄網(wǎng)頁、內(nèi)容網(wǎng)頁和功能網(wǎng)頁等類型；按制作技術(shù)分為靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我1.1理解網(wǎng)頁與網(wǎng)站1.1.2 網(wǎng)站網(wǎng)站就是把一些網(wǎng)頁等信息文件通過超鏈接的形式關聯(lián)起來形成的信息文件的

6、集合。信息可以是網(wǎng)頁形式也可以是其他的文檔形式。網(wǎng)頁與網(wǎng)站的區(qū)別與聯(lián)系：網(wǎng)站是一個文件夾，其中的文件不僅是網(wǎng)頁還有網(wǎng)站所需的其他文件或文件夾。網(wǎng)頁是一個頁面文件，用來發(fā)布各種信息。網(wǎng)頁是網(wǎng)站的構(gòu)成要素，是網(wǎng)站信息發(fā)布與表現(xiàn)的一種主要形式；網(wǎng)站是網(wǎng)頁通過超鏈接形成的集合。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我1.1理解網(wǎng)頁與網(wǎng)站1.1.2 網(wǎng)站網(wǎng)站就是把一些網(wǎng)頁等信息文件通過超鏈接的形式關聯(lián)起來形成的信息文件的集合。信息可以是網(wǎng)頁形式也可以是其他的文檔形式。網(wǎng)頁與網(wǎng)站的區(qū)別與聯(lián)系：網(wǎng)站是一個文件夾，其中的文件不僅是網(wǎng)頁還有網(wǎng)站所需的其他文件或文件夾。網(wǎng)頁是一個頁面文件，用來發(fā)布各種信息。

7、網(wǎng)頁是網(wǎng)站的構(gòu)成要素，是網(wǎng)站信息發(fā)布與表現(xiàn)的一種主要形式；網(wǎng)站是網(wǎng)頁通過超鏈接形成的集合。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我1.2認識HTMLHTML（Hyper Text Markup Language）又稱超文本標識語言，是一種標識性的語言，是網(wǎng)頁設計的最初語言。文件的擴展名:“html”或“htm”。 舉例說明： 簡單的HTML文檔 .長春歡迎您！這里是長春悠游網(wǎng)，我們帶您暢游長春！ 由“”組成的就是標記。在HTML語言中標記分“單標記”和“圍堵標記”。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我1.3區(qū)分靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁簡單的區(qū)別是:動態(tài)網(wǎng)頁是客戶端與服務器端是交互的。

8、即相互傳遞信息。靜態(tài)網(wǎng)頁是只能在客戶端瀏覽，但易被搜索引擎搜索到。 靜態(tài)網(wǎng)頁打開的速度比動態(tài)網(wǎng)頁快。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我作業(yè)1、什么是網(wǎng)頁？2、網(wǎng)頁的類型？以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解電子商務網(wǎng)站的網(wǎng)頁構(gòu)成信息社會中，企業(yè)和個人可以利用網(wǎng)絡和各種電子工具，高效率、低成本地從事各種以電子方式實現(xiàn)的商業(yè)貿(mào)易活動。從電子商務應用的角度來看，電子商務可分為三個層次：展示、交易和服務，這三個層次的應用都離不開電子商務網(wǎng)站。電子商務網(wǎng)站由前臺和后臺組成，前臺面向消費者、供貨商、分銷商提供商品或服務，如信息發(fā)布、商務交易、雙向交流等；后臺全面控制和支配前臺頁面

9、中的內(nèi)容，包括信息管理系統(tǒng)、網(wǎng)站管理系統(tǒng)和業(yè)務管理系統(tǒng)，網(wǎng)站內(nèi)容的變更大多數(shù)情況下依賴于網(wǎng)站后臺的管理。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我2、1電子商務網(wǎng)站類型有幾種。1主頁主頁是進入網(wǎng)站的第一個網(wǎng)頁，它和其他網(wǎng)頁組成一個網(wǎng)站。主頁是展示公司的企業(yè)形象、發(fā)布廣告、信息的主要界面。主頁包括以下內(nèi)容：企業(yè)名稱與標志、導航、廣告與推介、重要新聞、客戶與公司聯(lián)系的方式等。主頁的制作要引人入勝，能高度概括和體現(xiàn)企業(yè)的形象，不要有過多冗余的信息以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我2、1電子商務網(wǎng)站類型有幾種。2產(chǎn)品和服務網(wǎng)頁產(chǎn)品和服務網(wǎng)頁采用信息分層、逐層細化的方法展示公司的產(chǎn)品或服

10、務。產(chǎn)品網(wǎng)頁包括產(chǎn)品/價格清單網(wǎng)頁、單個產(chǎn)品網(wǎng)頁等。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我2、1電子商務網(wǎng)站類型有幾種。3網(wǎng)站新聞頁電子商務網(wǎng)站應該有一類專門用于發(fā)布新聞的網(wǎng)頁，如圖1-9所示。它既是展示公司的新產(chǎn)品、新服務和新的開發(fā)項目的窗口，又可以作為保存公司業(yè)務發(fā)展情況的檔案。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我2、1電子商務網(wǎng)站類型有幾種。4產(chǎn)品百科頁電子商務網(wǎng)站除了提供企業(yè)的產(chǎn)品和服務信息，還應該成為客戶了解相關信息的綜合平臺。因此，尋找大量與企業(yè)相關的特定主題的網(wǎng)絡論壇或其它網(wǎng)絡資源，并將其鏈接到產(chǎn)品百科網(wǎng)頁，是一種使網(wǎng)站迅速成為該領域權(quán)威的有效途徑。以德立身 以

11、技立足放飛理想 激揚青春 展現(xiàn)自我2、1電子商務網(wǎng)站類型有幾種。5服務與技術(shù)支持頁電子商務網(wǎng)站保持與客戶的聯(lián)系是非常重要的。除了作交易以外，還應該為客戶提供幫助和技術(shù)支持。許多網(wǎng)站的來訪者并不是要購買商品，而是來查詢信息或?qū)で髱椭?，網(wǎng)站應盡可能地滿足他們的需求，這種長期的服務性投資必定能獲得回S報。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我2、1電子商務網(wǎng)站類型有幾種。6市場調(diào)研網(wǎng)頁網(wǎng)頁是一種有力的市場調(diào)研工具，利用它可以快速有效地獲取客戶信息、對產(chǎn)品和服務的評價、意見和建議等等，為營銷決策提供量化基礎。7企業(yè)信息網(wǎng)頁企業(yè)的運營狀況，如公司數(shù)據(jù)庫、財務報表、與投資者的關系、銷售情況等對客戶

12、來說，都是非常關心的內(nèi)容。如圖1-12所示，企業(yè)信息網(wǎng)頁為客戶提供了這方面的信息，提高了企業(yè)資信的透明度，從而影響客戶的購買決策。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我2、1電子商務網(wǎng)站類型有幾種。8廣告將互聯(lián)網(wǎng)作為廣告的載體有著其他媒體無可比擬的優(yōu)越性，對于一個電子商務網(wǎng)站來說，廣告更是不可或缺的內(nèi)容。除了宣傳本企業(yè)的產(chǎn)品和服務以外，還能以一定的廣告收入支持網(wǎng)站建設。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我作業(yè)：1、電子商務可分為那幾個層次？2、電子商務前臺（前端）指什么？3、電子商務后臺（后端）指什么？4、電子商務網(wǎng)站包含幾種類型網(wǎng)頁以德立身 以技立足放飛理想 激揚青春 展現(xiàn)

13、自我電子商務網(wǎng)站的特點電子商務網(wǎng)站的特點電子商務網(wǎng)站是企業(yè)開展電子商務的一個平臺，它始終以商務活動為中心，除了展示和介紹企業(yè)的產(chǎn)品與服務外，還是用于開展企業(yè)電子營銷的信息化平臺，因此電子商務網(wǎng)站與普通網(wǎng)站相比，更強調(diào)其功能與服務。（1）商務性。電子商務網(wǎng)站具有普通網(wǎng)站所不具備的輔助交易（或叫撮合交易）的功能，如快速的新聞更換來吸引消費者、可智能統(tǒng)計分析的計數(shù)器、強大的市場或消費習慣的調(diào)查功能等等。（2）集成性。電子商務網(wǎng)站能規(guī)范事務處理的工作流程，將人工操作和電子信息處理集成為一個不可分割的整體，提高了人員、設備的利用效率和系統(tǒng)運行的可靠性。（3）可擴展性。隨著電子商務網(wǎng)站規(guī)模的擴大，為了保證

14、網(wǎng)站的正常工作，必須考慮到訪問量的變化，使網(wǎng)站具有一定的擴展性，以防止系統(tǒng)阻塞。（4）安全性。客戶在網(wǎng)上購物時會首先考慮安全性。網(wǎng)絡交易中的欺騙、竊聽等行為、信息系統(tǒng)中的病毒和黑客的非法入侵都是電子商務的大敵。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我認識電子商務網(wǎng)頁制作工具網(wǎng)頁編輯工具電子商務網(wǎng)站的特點FrontPage（FP)是個網(wǎng)頁設計的軟件，也只是個最基本的軟件以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我認識電子商務網(wǎng)頁制作工具網(wǎng)頁編輯工具電子商務網(wǎng)站的特點Dreamweaver（DW)是個網(wǎng)頁設計的軟件,重點學習這個軟件以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我認識電子商務

15、網(wǎng)頁制作工具網(wǎng)頁編輯工具電子商務網(wǎng)站的特點網(wǎng)頁設計與制作三劍客是指：DW 軟件、Flash動畫軟件、Firworks軟件Photoshop以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我認識電子商務網(wǎng)頁制作工具網(wǎng)頁編輯工具電子商務網(wǎng)站的特點Fireworks以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我認識電子商務網(wǎng)頁制作工具網(wǎng)頁編輯工具電子商務網(wǎng)站的特點Flash以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解網(wǎng)站開發(fā)技術(shù)1. DHTMLDHTML又稱動態(tài)HTML（Dynamic HTML），它可以創(chuàng)造出許多特殊的效果，這效果不需要重新加載網(wǎng)頁或載入一個新的網(wǎng)頁，也不需要向遠處的服務器索取新

16、的材料，所有的功能都是在瀏覽者的計算機上實現(xiàn)并完成的，因此瀏覽者也不需要花時間等待服務器返回結(jié)果。動態(tài)DHTML通常用JavaScript或VBScript來實現(xiàn)其動態(tài)和交互性。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解網(wǎng)站開發(fā)技術(shù)2. ASPASP（Active Server Pages）又稱動態(tài)網(wǎng)頁，是微軟公司推出的一種取代CGI（通用網(wǎng)關接口）的技術(shù)，它可以與數(shù)據(jù)庫和其它程序進行交互。在ASP中，使用VBScript 、JavaScript等簡單易懂的腳本語言，結(jié)合HTML代碼，即可快速地完成網(wǎng)站的應用程序。ASP網(wǎng)頁文件的擴展名是.asp，當瀏覽器瀏覽ASP網(wǎng)頁時，Web服務器

17、就會根據(jù)請求生成相應的HTML代碼，然后再返回給瀏覽器，這樣瀏覽器端看到的，就是動態(tài)生成的網(wǎng)頁。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解網(wǎng)站開發(fā)技術(shù)3. ASP.NETASP.NET是ASP的最新版本，是一種建立在公共語言運行庫上的編程框架，可用于在服務器上生成功能強大的 Web 應用程序，為Web站點創(chuàng)建動態(tài)的、交互的HTML網(wǎng)頁。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解網(wǎng)站開發(fā)技術(shù)4. JSPJSP（JavaServer Pages）是由Sun Microsystems公司倡導、許多公司參與一起建立的一種動態(tài)網(wǎng)頁技術(shù)標準。 在傳統(tǒng)的網(wǎng)頁HTML文件中加入Java程序片段

18、和JSP標記，就構(gòu)成了JSP網(wǎng)頁，其擴展名是.jsp。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解網(wǎng)站開發(fā)技術(shù)5. XMLXML（Extensible Markup Language）稱為可擴展性標記語言，與HTML只能在瀏覽器中顯示內(nèi)容不同的是，XML是一種顯示數(shù)據(jù)的標記語言，它能使數(shù)據(jù)通過網(wǎng)絡無障礙地進行傳輸，并顯示在用戶的瀏覽器上。XML并非像HTML那樣，提供了一組事先已經(jīng)定義好了的標簽，而是提供了一個標準，利用這個標準，可以根據(jù)設計者的實際需要，定義自己的新的標記語言，并為這個標記語言規(guī)定一套特有標簽。因此，XML是一種定義語言的語言，即是一種元標記語言，簡單地說，HTML用于

19、顯示內(nèi)容，XML用來描述結(jié)構(gòu)化數(shù)據(jù)。XML的有利于數(shù)據(jù)交換和傳遞的特性，將為電子商務，尤其是B2B帶來革命性的沖擊。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解網(wǎng)頁制作團隊根據(jù)網(wǎng)站開發(fā)項目的規(guī)模，網(wǎng)站開發(fā)團隊可以有幾到幾十人，大小不等。在團隊劃分中應該含有6個角色：項目經(jīng)理策劃前臺設計員后臺程序員代碼整合員測試員以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解網(wǎng)頁制作團隊（1）項目經(jīng)理，負責項目總體設計，開發(fā)進度的定制和監(jiān)控，定制相應的開發(fā)規(guī)范，負責各個環(huán)節(jié) 的評審工作，協(xié)調(diào)各個成員之間的工作。（2）策劃，提供詳細的策劃方案和需求分析。還包括后期網(wǎng)站推廣方面的策劃。（3）前臺設計員，根

20、據(jù)策劃和需求負責包括網(wǎng)頁設計、瀏覽器端程序和網(wǎng)頁美工設計。（4）后臺程序員，包括編程與調(diào)試，數(shù)據(jù)庫，根據(jù)項目總體設計來設計數(shù)據(jù)庫和功能模塊的實現(xiàn)。（5）代碼整合員，負責將程序員的代碼和界面融合到一起，代碼整合員可以制作網(wǎng)站的相關頁面。（6）測試員，負責測試程序。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我在本項目中，我們一起學習了電子商務網(wǎng)頁的基礎知識，通過體驗活動了解了常見的網(wǎng)頁元素，了解了電子商務網(wǎng)站的基本概念、網(wǎng)頁構(gòu)成，以及網(wǎng)頁制作的工具、開發(fā)技術(shù)、發(fā)展歷史和網(wǎng)站開發(fā)團隊。電子商務網(wǎng)站由于其功用與普通網(wǎng)站有著很多的不同，在制作電子商務網(wǎng)頁時，要注意到此類網(wǎng)頁的特殊性?；顒有〗Y(jié)初識電子商

21、務網(wǎng)頁以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我活動小結(jié)推薦資源著名的電子商務網(wǎng)站：國內(nèi)：阿里巴巴全球電子商務網(wǎng)站 （）淘寶網(wǎng)（）當當網(wǎng)（）長虹集團（）慧聰網(wǎng)（）攜程旅行網(wǎng) （）國外：亞馬遜（http:/www.A）美國Netflix公司（）Ecplaza貿(mào)易平臺（/）印度商務網(wǎng)（/）以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我作業(yè)：1、網(wǎng)頁編輯工具有些？2、網(wǎng)頁圖像制作工具有些？3、網(wǎng)站開發(fā)技術(shù)用那些軟件？4、網(wǎng)頁制作團隊包含那6個角色？DW電子商務網(wǎng)頁制作Dreamweaver CS5入門一、認識Dreamweaver CS5。二、安裝和啟動Dreamweaver CS5。三、了解D

22、reamweaver CS5的工作界面。四、會對Dreamweaver CS5的工作區(qū)進行設置。學習目標以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我試一試結(jié)識Adobe家族新成員DW CS5是一款所見即所得的網(wǎng)頁制作軟件，它功能強大，簡單易學，即使你是初次學習，也能夠很快地使用它制作出簡單的網(wǎng)頁來。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我試一試結(jié)識Adobe家族新成員第一步：雙擊桌面上的DW圖標，運行Dreamweaver CS5軟件。第二步：觀察Dreamweaver CS5的界面組成。包括菜單欄、起始頁、面板組和屬性面板等。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我試一試結(jié)識A

23、dobe家族新成員第三步：單擊起始頁中“新建”欄中的“HTML”選項，新建一個HTML空白文檔，在工作區(qū)設計視圖窗口中輸入一段文字。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我試一試結(jié)識Adobe家族新成員第四步：打開“文件”菜單選擇“保存”命令，在彈出的“另存為”對話框中選擇保存的位置，單擊“保存”按鈕將文檔保存?？旖萱I：保存Ctrl+S, 另存為Ctrl+shift+S,以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我試一試結(jié)識Adobe家族新成員第五步：按F12 鍵，可以在瀏覽器中預覽網(wǎng)頁效果。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我試一試結(jié)識Adobe家族新成員學習一個新的軟件首

24、先要對其有一個大致的總體印象，了解它的界面組成和最基本的操作，通過自己動手慢慢去摸索和熟悉，然后才能進一步去深入學習軟件的各種功能和操作。Adobe Dreamweaver CS5是Adobe家族的成員，是一款制作網(wǎng)頁的專業(yè)軟件，它功能強大，易于學習，初學者能夠很快上手使用它制作出簡單的網(wǎng)頁來。活動小結(jié)以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我初識Dreamweaver CS5Adobe Dreamweaver CS5是一款集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯器，Dreamweaver CS5是第一套針對專業(yè)網(wǎng)頁設計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平

25、臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver原本是由著名的軟件公司Macromedia開發(fā)的，Macromedia的著名產(chǎn)品還有矢量動畫制作軟件Flash、網(wǎng)頁圖像處理軟件Fireworks等。2006年全球最大的圖像編輯軟件供應商Adobe以換股方式收購了Macromedia公司，自此開始，Dreamweaver開始屬于ADOBE設計軟件系列。2007年Adobe發(fā)布了Dreamweaver CS3，2008年發(fā)布Dreamweaver CS4，到了2010年，Adobe推出了全新的Dreamweaver CS5。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamwe

26、aver CS5的安裝步驟1：將Dreamweaver CS5的安裝光盤放在光驅(qū)中，此時會自動進行Dreamweaver CS5的安裝程序的始化，并對系統(tǒng)進行檢查。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的安裝步驟2：如果系統(tǒng)滿足安裝所需要的條件，就會打開“Adobe Dreamweaver CS5”安裝界面，首先是顯示的“Adobe軟件許可協(xié)議”頁面。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的安裝步驟3：閱讀軟件許可協(xié)議，單擊【接受】按鈕，進入序列號頁面。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweave

27、r CS5的安裝步驟4：輸入產(chǎn)品序列號，或選擇“安裝此產(chǎn)品的試用版”，單擊“下一步”按鈕，進入“安裝選項”頁面。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的安裝步驟5：選擇需要安裝程序的磁盤并指定安裝路徑，單擊“安裝”按鈕，進入“安裝進度”頁面。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的安裝步驟6：安裝過程會持續(xù)幾分鐘的時間，然后彈出如圖2-10所示的頁面，單擊【完成】按鈕，完成Dreamweaver CS5的安裝工作。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的啟動Dreamweaver

28、CS5安裝完畢后，會自動在“開始”按鈕的“程序”菜單中添加啟動項，同時也會在桌面上創(chuàng)建Dreamweaver CS5快捷方式圖標。單擊“程序”菜單中相應的啟動項或雙擊桌面快捷方式，都可以啟動Dreamweaver CS5。Dreamweaver以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的啟動單擊“確定”后，將進入Dreamweaver CS5的起始頁。可以勾選下面的“不再顯示”來隱藏它。在起始頁中可以打開最近使用過的文檔或創(chuàng)建新文檔，還可以從起始頁通過“快速入門”或“資源”來了解Dreamweaver CS5的更多信息。以德立身 以技立足放飛理想 激揚青春 展

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

30、eamweaver CS5；如選擇“取消”，系統(tǒng)將不退出Dreamweaver CS5，繼續(xù)保持編輯狀態(tài)。請注意：以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的窗口組成DW的窗口界面如圖2-13所示。包括：標題欄、菜單欄、插入欄、文檔工具欄、文檔窗口、狀態(tài)欄、屬性面板和面板組。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的窗口組成1菜單欄菜單欄提供了Dreamweaver CS5的所有功能，一共包含十個菜單。2文檔工具欄文檔工具欄中顯示的是已經(jīng)打開的各個文檔的圖標，單位擊各圖標可以在不同文檔間進行切換。3文檔窗口文檔窗口是網(wǎng)頁文檔

31、的編輯區(qū)，它用于顯示當前正在編輯的網(wǎng)頁文檔。設計者可以在文檔區(qū)域中進行各種編輯操作。4標簽選擇器標簽選擇器用于快速選擇網(wǎng)頁中的各種標簽，在網(wǎng)頁布局時非常有用。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的窗口組成5屬性檢查器網(wǎng)頁設計中的每個對象都有自己的屬性，比如文字有字體、字號、對齊方式等屬性，圖像有大小、鏈接、替換文字等屬性。屬性檢查器的設置項目會根據(jù)對象的不同而變化。6狀態(tài)欄狀態(tài)欄中顯示與正在編輯的文檔有關的其他信息。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的窗口組成7面板組為了方便設計者的編輯工作，Dreamweave

32、r CS5組合了各種具備各種功能的面板供設計者選擇使用，每個面板組都可以展開或折疊，可以和其他面板組?？吭谝黄鸹蛉∠？?，所以也稱為浮動面板。（1）查看面板組打開“窗口”菜單，選擇“顯示面板”或“隱藏面板”，可以顯示或隱藏面板組。也可以單擊面板組名稱，或者直接按快捷鍵F4快速隱藏和顯示面板組。（2）關閉面板組要關閉某個面板，可以單擊該面板標題欄右側(cè)的按鈕，在彈出的菜單中選擇“關閉標簽組”。如果要再打開被關閉的面板組，可以選擇“窗口”菜單，然后選擇要打開的面板名稱即可。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我Dreamweaver CS5的窗口組成8“文件”面板“文件”面板是很常用的面板，

33、利用它可以管理站點的文件和文件夾。通過“文件”面板還可以訪問本地磁盤上的全部文件。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解Dreamweaver CS5的視圖管理在Dreamweaver CS5的文檔窗口中可以使用三種視圖方式查看當前文檔。1“設計”視圖模式這是一個用于可視化頁面布局、可視化編輯和快速應用程序開發(fā)的設計環(huán)境。在“設計”視圖中，設計者可以“所見即所得”地設計網(wǎng)頁。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解Dreamweaver CS5的視圖管理“代碼”視圖模式這是一個用于編寫和編輯html、Javascript、服務器語言代碼以及任何其他類型代碼的手工編碼環(huán)境。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我了解Dreamweaver CS5的視圖管理3“拆分”視圖模式這種視圖模式在單個窗口中同時顯示同一文檔的“代碼”視圖和“設計”視圖。以德立身 以技立足放飛理想 激揚青春 展現(xiàn)自我自定義Dreamweaver