dreamweaver8制作網頁
提問問題
列表
-
一個高級java工程師需要具備什么能力和技術
查看答案>>
-
dreamweaver8 設置鏈接時怎么讓他跳轉到另一個頁面
查看答案>>
-
dreamweaver8.0是做什么的啊～不明白
查看答案>>
-
dreamweaver8.0是做什么的啊～不明白
查看答案>>
-
dreamweaver8做網頁，焦點圖代碼怎么放
查看答案>>
-
dreamweaver8網頁制作怎么打字在圖片上
查看答案>>
一個高級java工程師需要具備什么能力和技術
宏觀方面一、 JAVA。要想成為JAVA(高級)工程師肯定要學習JAVA。一般的程序員或許只需知道一些JAVA的語法結構就可以應付了。但要成為JAVA(高級) 工程師，您要對JAVA做比較深入的研究。您應該多研究一下JDBC、IO包、Util包、Text包、JMS、EJB、RMI、線程。如果可能，希望您 對JAVA的所有包都瀏覽一下，知道大概的API，這樣您就發現其實您想實現的很多功能，通過JAVA的API都可以實現了，就不必自己費太多的腦經 了。二、 設計模式。其實寫代碼是很容易的事情，我相信您也有同感。但如何寫得好就比較難了。這個“好”字包括代碼可重用性，可維護性，可擴展性等。如何寫出好的代 碼往往要借助一些設計模式。當然長期的代碼經驗積累，只要您用心，會使您形成自己代碼風格。相信您的代碼也比較符合代碼的可重用性，可維護性，可擴展性。 但既然前人已經給我們總結出了經驗，我們何不踩著前人的肩膀前進?三、 XML。現在的系統中不使用XML幾乎是不可能的。XML的功能非常強大，它可以做數據轉換、做系統的配置、甚至可保存您的系統業務數據。因此您必須了解 XML，包括它的語法，結構。您還需要比較熟練的使用解析XML的一些API，比如JDOM，SAX等，因為在我們一般的項目中，XML往往擔當系統配置 信息的作用，您需要用這些API解析這些配置信息，開發完美的項目。四、 精通使用一種或兩種框架。“框架都會有許多可重用的代碼，良好的層次關系和業務控制邏輯，基于框架的開 發使你可以省出很多的開發成本”。這里希望您能精通，的是希望您能通過框架的使用了解框架的思想。這樣您在開發一個項目時思路會開闊一些，比如您 會想到把SQL語句與您的JAVA代碼分開，再比如您會考慮把您的業務邏輯配置到XML或者數據庫中，這樣整個項目就很容易擴張了。五、 熟悉主流數據庫。其實真正比較大的項目都是有人專門做數據庫的，但往往很多項目要求作為(高級)工程師的您也參與數據庫的設計以及SQL的編寫。所以為了 更好的為國家做貢獻，建議您還是多了解一些主流數據庫，比如SQLSERVER，ORACLE，多連接SQL和存儲過程以及觸發器。如果您不是“科班”出 身，您還需要補充一些數據庫原理方面的知識。六、 精通一種或兩種WEBServer。因為作為JAVA工程師，特別時 想成為高級JAVA工程師的您，您不可避免地要部署您的項目到WebServer上，而且只有當您精通一種WebServer，您才可能最大限度地使用它 的資源，這往往可以節省很多時間和精力。七、 UML。您肯定想成為高級工程師，因此您有必要了解或熟練或精通UML，這取決于您有多大決心想成為高級工程師和項目經理。在比較正規的開發團隊 中，UML是討論項目的交流工具，您要想做一個軟件工程師，您至少要能看懂，您要想做高級工程師，您要能通過它來描述您對項目的理解，盡管這不是必須，但 卻很重要。八、 站在高度分析問題：這不是一個知識點，也不是通過書本就能學得到的。只所以提到這一點，是因為我比您還著急，我希望您更快的成為一個高級的軟件工程師，而 不是一個一般的軟件工程師。希望您在工作中多向您的系統分析員、需求分析員、系統設計員學習，多站在他們角度上去看您在開發的項目。在最好在項目之初先在 您的腦海里對項目有個大致的分析、設計，然后和他們進行比較，找找差別，想想缺點。九、 工具。您在這個階段可能接觸到不同的工具了，盡管您還需要使用JB或者IDEA，但能可能對 ROSE，Together要多了解一些，因為您要畫UML了。不要再對Dreamweaver等HTML編輯器情有獨鐘了，那些JSP頁面讓初級程序員去寫吧微觀方面1.Core Java部分這是最基礎的,對于一個java高級開發/設計人員,你需要對這一部分達到精通的水平,重點內容如下:a.面向對象編程思想(封裝繼承多態接口)b.字符串處理c.java.lang包,java.util包等常用包d.java異常處理2.Java高級部分a.Java I/O流b.Java多線程技術c.Java網絡編程d.Java Swing后兩項可以了解即可,如果項目需要可以深入研究3.前端基本技能* HTML + CSS網頁開發* JavaScript* Jquery* 瀏覽器兼容性 CSS hack(了解)4.熟練使用JSP + Servlet進行開發5.MVC設計模式,原理,以及相關框架,如Struts6.SSH框架7.緩存技術 session & cookie8.熟練使用一種以上Java開發工具(Eclipse/MyEclipse/Jbuilder/Jcreator/IntelliJIEDA/NetBeans)9.熟練使用XMLJDOM w3c.dom SAX10.Java設計模式工廠模式,單例模式 ==11.Java反射機制反射的各種用法12.了解或熟悉 C, C++, .NET13.熟悉JDK的配置,環境變量14.數據庫oracle必學,其他最好了解一種以上(mysql,sql server,access==)oracle:視圖,索引,存儲過程,觸發器,游標,包,常用函數 ==15.數據庫原理事務的原理,鎖機制,表連接,復雜查詢語句(工作經驗),性能調優,鎖表以及解決方案==16.JDBC,連接池17.Ajax,反向Ajax18.HTTP協議,request 和 response的原理,HTTP status(了解常用的),Https原理19.熟悉Linux基本命令,使用過Linux/Unix系統,可以編寫shell腳本,可以在Linux上部署項目20.了解windows系統批處理腳本bat21.了解HTML5,最好學習過22.熟悉一種JS框架,如Prototype23.J2EE原理 熟悉一種以上web容器如Tomcat,JBoss,websphere,weblogic==24.熟悉ant或maven25.熟悉一門腳本語言,如python ,ruby26.了解php/ asp27.了解ftp協議及原理28.熟練使用Junit測試,熟悉Mockito等測試工具29,熟悉javac,javadoc,native,native2ascii等常用命令30.熟悉常用的排序算法,如冒泡排序,快速排序等,最好自己研究過一些的算法。31.了解Flex(不學也沒關系)32.了解敏捷開發模式33.工作流workflow至少用過一種,如OSworkflow,了解原理34.使用過VPN了解其原理35.熟悉jstl表達式和el表達式36.熟悉webservice,WSDL,SOAP37.圖片處理,如圖片上傳,預覽,限制大小等38.版本控制工具,CVS VSS SVN39,JSON技術,JSON+AJAX40.分頁技術,最好自己實現過不僅僅是用過要知道原理41.Java Mail42.Java讀寫txt,excel,JXL技術43.JVM原理,JVM內存管理,GC,Java堆棧池44.熟練使用下面的工具:office辦公軟件,word,excel,ppt等plsql,sqldevelop 數據庫開發工具outlook大公司都用ue編輯器瀏覽器控制臺,調試SHH/PUTTY 遠程45.UML建模工具Rational Rose等46. 使用log4j47.使用過開放Api如百度，騰訊街景，新浪微博等48.頁面靜態化技術(偽靜態頁面)49.報表技術，使用過報表制作工具，如水晶易表。50.定時任務，如Spring batch ,學會自定義batch任務(不適用第三方工具)51.了解uuid52.b/s 和 c/s架構53.正則表達式54.了解jndi jms55.ERP56.UNICODE編碼，亂碼解決57.開源網絡編輯器，如ckEditor58.二進制原理59.使用過，了解過開源論壇框架，如discuzz60.GWT，Closure框架61.了解大數據，云計算62.搜索引擎搜索技術63.軟件工程，項目管理
dreamweaver8 設置鏈接時怎么讓他跳轉到另一個頁面
1.新建網頁，在body里插入<a href="圖片顯示.html" target="new">打開新的網頁</a>，表示設置文字鏈接，以新窗口方式打開"圖片顯示.html"該網頁。2.在IE里測試效果。
dreamweaver8.0是做什么的啊～不明白
功能特色 借助共享型用戶界面設計,在AdobeCreativeSuite4的不同組件之間更快、更明智地工作。使用工作區切換器可以從一個工作環境快速切換到下一個環境。 具體功能 CS6新增功能 利用AdobeDreamweaverCS6軟件中改善的FTP性能，更高效地傳輸大型文件。更新的“實時視圖”和“多屏幕預覽”面板可呈現HTML5代碼，使您能檢查自己的工作。 自適應網格 可響應的自適應網格版面 使用響應迅速的CSS3自適應網格版面，來創建跨平臺和跨瀏覽器的兼容網頁設計。利用簡潔、業界標準的代碼為各種不同設備和計算機開發項目，提高工作效率。直觀地創建復雜網頁設計和頁面版面，無需忙于編寫代碼。 改善FTP性能 利用重新改良的多線程FTP傳輸工具節省上傳大型文件的時間。更快速高效地上傳網站文件，縮短制作時間。 Catalyst集成 AdobeBusinessCatalyst集成 使用Dreamweaver中集成的BusinessCatalyst面板連接并編輯您利用AdobeBusinessCatalyst（需另外購買）建立的網站。利用托管解決方案建立電子商務網站。 增強型jQuery移動支持 使用更新的jQuery移動框架支持為iOS和Android平臺建立本地應用程序。建立觸及移動受眾的應用程序，同時簡化您的移動開發工作流程。 更新的PhoneGap支持 更新的AdobePhoneGap支持可輕松為Android和iOS建立和封裝本地應用程序。通過改編現有的HTML代碼來創建移動應用程序。使用PhoneGap模擬器檢查您的設計。 CSS3轉換 將CSS屬性變化制成動畫轉換效果，使網頁設計栩栩如生。在您處理網頁元素和創建優美效果時保持對網頁設計的精準控制。 更新的實時視圖 使用更新的“實時視圖”功能在發布前測試頁面。“實時視圖”現已使用最新版的WebKit轉換引擎，能夠提供絕佳的HTML5支持。 更新的多屏幕預覽面板 利用更新的“多屏幕預覽”面板檢查智能手機、平板電腦和臺式機所建立項目的顯示畫面。該增強型面板能夠讓您檢查HTML5內容呈現。 CS5后的新增功能 借助AdobeDreamweaverCS5.5軟件充滿自信地進行設計、構建最新的HTML5和CSS3網站、令交互性更上一層樓。同時為多個設備進行設計，并對全面的代碼檢查充滿自信。 “多屏幕預覽”面板 借助“多屏幕預覽”面板，為智能手機、Tablet和個人計算機進行設計。借助媒體查詢支持，開發人員可以通過一個面板為各種設備設計樣式并實現渲染可視化。 CSS3/HTML5支持 通過CSS面板設置樣式，該面板經過更新可支持新的CSS3規則。設計視圖現支持媒體查詢，在您調整屏幕尺寸的同時可應用不同的樣式。使用HTML5進行前瞻性的編碼，同時提供代碼提示和設計視圖渲染支持。 JQuery集成 借助jQuery代碼提示加入高級交互性。jQuery是行業標準JavaScript庫，允許您為網頁輕松加入各種交互性。借助針對手機的起動模板快速啟動。 借助PhoneGap構建本機Android和iOS應用程序 借助新增的PhoneGap功能為Android和iOS構建并打包本機應用程序。借助PhoneGap構建本機Android和iOS應用程序。 新增功能 實時視圖新增功能 借助DreamweaverCS4中新增的實時視圖在真實的瀏覽器環境中設計網頁,同時仍可以直接訪問代碼。呈現的屏幕內容會立即反映出對代碼所做的更改。 針對Ajax和JavaScript框架的代碼提示新增功能。 借助改進的JavaScript核心對象和基本數據類型支持,更快速、準確地編寫JavaScript。通過集成包括jQuery、Prototype和Spry在內的流行JavaScript框架,充分利用DreamweaverCS4的擴展編碼功能。 相關文件新增功能 源代碼,在“設計”視圖中查看父頁面。 集成編碼增強功能 領略內建代碼提示的強大功能,令HTML、JavaScript、Spry和jQuery等Ajax框架、原型和幾種服務器語言中的編碼更快、更清晰。 代碼導航器新增功能 新增的“代碼導航器”功能可顯示影響當前選定內容的所有代碼源,如CSS規則、服務器端包括、外部JavaScript功能、Dreamweaver模板、iframe源文件等。 AdobeAIR創作支持新增功能 在Dreamweaver中直接新建基于HTML和JavaScript的AdobeAIR應用程序。在Dreamweaver中即可預覽AIR應用程序。使AdobeAIR應用程序隨時可與AIR打包及代碼簽名功能一起部署。 FLV支持增強功能 通過輕松點擊和符合標準的編碼將FLV文件集成到任何網頁中-無需AdobeFLASH軟件知識。設計時在Dreamweaver全新的實時視圖中播放FLV影片。 支持領先技術 在支持大多數領先Web開發技術的工具中進行設計和編碼,這些技術包括HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、AdobeColdFusion軟件和ASP。 學習最佳做法 參考CSS最佳做法實現可視化設計并輔以通俗易懂的實用概念說明。在支持可訪問性和最佳做法的同時創造Ajax驅動的交互性。 集成增強 通過跨產品線的直接通信和交互,充分利用DreamweaverCS4和其它Adobe工具的智能集成和強大功能,包括AdobeFLASHCS4Professional、FIREWORKSCS4、PhotoshopCS4和DeviceCentralCS4軟件。 AdobeInContextEditing新增功能 在Dreamweaver中設計頁面,使最終用戶能使用AdobeInContextEditing在線服務編輯他們的網頁,無需幫助或使用其它軟件。作為Dreamweaver設計人員,您可以限制對特定頁面、特殊區域的更改權,甚至可以自定格式選項。 Subversion集成新增功能 在Dreamweaver中直接更新站點和登記修改內容。DreamweaverCS4與Subversion軟件緊密集成,后者是一款開放源代碼版本控制系統,可以提供更強大的登記/注銷體驗。 跨平臺支持增強功能 隨心所欲,盡情工作:DreamweaverCS4可用于基于Intel或PowerPC的Mac、MicrosoftWindowsXP以及WindowsVista系統。在首選系統中設計,交付跨平臺、可靠、一致、高性能的成果。 Adobe Dreamweaver，簡稱“DW”，中文名稱 "夢想編織者"，是美國MACROMEDIA公司開發的集網頁制作和管理網站于一身的所見即所得網頁編輯器，DW是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。 Macromedia公司成立于1992年，2005年被Adobe公司收購。 Adobe Dreamweaver使用所見即所得的接口，亦有HTML（標準通用標記語言下的一個應用）編輯的功能。它有Mac和Windows系統的版本。隨Macromedia被Adobe收購后，Adobe也開始計劃開發Linux版本的Dreamweaver了。 Dreamweaver自MX版本開始，使用了Opera的排版引擎"Presto" 作為網頁預覽。
dreamweaver8.0是做什么的啊～不明白
功能特色 借助共享型用戶界面設計,在AdobeCreativeSuite4的不同組件之間更快、更明智地工作。使用工作區切換器可以從一個工作環境快速切換到下一個環境。 具體功能 CS6新增功能 利用AdobeDreamweaverCS6軟件中改善的FTP性能，更高效地傳輸大型文件。更新的“實時視圖”和“多屏幕預覽”面板可呈現HTML5代碼，使您能檢查自己的工作。 自適應網格 可響應的自適應網格版面 使用響應迅速的CSS3自適應網格版面，來創建跨平臺和跨瀏覽器的兼容網頁設計。利用簡潔、業界標準的代碼為各種不同設備和計算機開發項目，提高工作效率。直觀地創建復雜網頁設計和頁面版面，無需忙于編寫代碼。 改善FTP性能 利用重新改良的多線程FTP傳輸工具節省上傳大型文件的時間。更快速高效地上傳網站文件，縮短制作時間。 Catalyst集成 AdobeBusinessCatalyst集成 使用Dreamweaver中集成的BusinessCatalyst面板連接并編輯您利用AdobeBusinessCatalyst（需另外購買）建立的網站。利用托管解決方案建立電子商務網站。 增強型jQuery移動支持 使用更新的jQuery移動框架支持為iOS和Android平臺建立本地應用程序。建立觸及移動受眾的應用程序，同時簡化您的移動開發工作流程。 更新的PhoneGap支持 更新的AdobePhoneGap支持可輕松為Android和iOS建立和封裝本地應用程序。通過改編現有的HTML代碼來創建移動應用程序。使用PhoneGap模擬器檢查您的設計。 CSS3轉換 將CSS屬性變化制成動畫轉換效果，使網頁設計栩栩如生。在您處理網頁元素和創建優美效果時保持對網頁設計的精準控制。 更新的實時視圖 使用更新的“實時視圖”功能在發布前測試頁面。“實時視圖”現已使用最新版的WebKit轉換引擎，能夠提供絕佳的HTML5支持。 更新的多屏幕預覽面板 利用更新的“多屏幕預覽”面板檢查智能手機、平板電腦和臺式機所建立項目的顯示畫面。該增強型面板能夠讓您檢查HTML5內容呈現。 CS5后的新增功能 借助AdobeDreamweaverCS5.5軟件充滿自信地進行設計、構建最新的HTML5和CSS3網站、令交互性更上一層樓。同時為多個設備進行設計，并對全面的代碼檢查充滿自信。 “多屏幕預覽”面板 借助“多屏幕預覽”面板，為智能手機、Tablet和個人計算機進行設計。借助媒體查詢支持，開發人員可以通過一個面板為各種設備設計樣式并實現渲染可視化。 CSS3/HTML5支持 通過CSS面板設置樣式，該面板經過更新可支持新的CSS3規則。設計視圖現支持媒體查詢，在您調整屏幕尺寸的同時可應用不同的樣式。使用HTML5進行前瞻性的編碼，同時提供代碼提示和設計視圖渲染支持。 JQuery集成 借助jQuery代碼提示加入高級交互性。jQuery是行業標準JavaScript庫，允許您為網頁輕松加入各種交互性。借助針對手機的起動模板快速啟動。 借助PhoneGap構建本機Android和iOS應用程序 借助新增的PhoneGap功能為Android和iOS構建并打包本機應用程序。借助PhoneGap構建本機Android和iOS應用程序。 新增功能 實時視圖新增功能 借助DreamweaverCS4中新增的實時視圖在真實的瀏覽器環境中設計網頁,同時仍可以直接訪問代碼。呈現的屏幕內容會立即反映出對代碼所做的更改。 針對Ajax和JavaScript框架的代碼提示新增功能。 借助改進的JavaScript核心對象和基本數據類型支持,更快速、準確地編寫JavaScript。通過集成包括jQuery、Prototype和Spry在內的流行JavaScript框架,充分利用DreamweaverCS4的擴展編碼功能。 相關文件新增功能 源代碼,在“設計”視圖中查看父頁面。 集成編碼增強功能 領略內建代碼提示的強大功能,令HTML、JavaScript、Spry和jQuery等Ajax框架、原型和幾種服務器語言中的編碼更快、更清晰。 代碼導航器新增功能 新增的“代碼導航器”功能可顯示影響當前選定內容的所有代碼源,如CSS規則、服務器端包括、外部JavaScript功能、Dreamweaver模板、iframe源文件等。 AdobeAIR創作支持新增功能 在Dreamweaver中直接新建基于HTML和JavaScript的AdobeAIR應用程序。在Dreamweaver中即可預覽AIR應用程序。使AdobeAIR應用程序隨時可與AIR打包及代碼簽名功能一起部署。 FLV支持增強功能 通過輕松點擊和符合標準的編碼將FLV文件集成到任何網頁中-無需AdobeFLASH軟件知識。設計時在Dreamweaver全新的實時視圖中播放FLV影片。 支持領先技術 在支持大多數領先Web開發技術的工具中進行設計和編碼,這些技術包括HTML、XHTML、CSS、XML、JavaScript、Ajax、PHP、AdobeColdFusion軟件和ASP。 學習最佳做法 參考CSS最佳做法實現可視化設計并輔以通俗易懂的實用概念說明。在支持可訪問性和最佳做法的同時創造Ajax驅動的交互性。 集成增強 通過跨產品線的直接通信和交互,充分利用DreamweaverCS4和其它Adobe工具的智能集成和強大功能,包括AdobeFLASHCS4Professional、FIREWORKSCS4、PhotoshopCS4和DeviceCentralCS4軟件。 AdobeInContextEditing新增功能 在Dreamweaver中設計頁面,使最終用戶能使用AdobeInContextEditing在線服務編輯他們的網頁,無需幫助或使用其它軟件。作為Dreamweaver設計人員,您可以限制對特定頁面、特殊區域的更改權,甚至可以自定格式選項。 Subversion集成新增功能 在Dreamweaver中直接更新站點和登記修改內容。DreamweaverCS4與Subversion軟件緊密集成,后者是一款開放源代碼版本控制系統,可以提供更強大的登記/注銷體驗。 跨平臺支持增強功能 隨心所欲,盡情工作:DreamweaverCS4可用于基于Intel或PowerPC的Mac、MicrosoftWindowsXP以及WindowsVista系統。在首選系統中設計,交付跨平臺、可靠、一致、高性能的成果。 Adobe Dreamweaver，簡稱“DW”，中文名稱 "夢想編織者"，是美國MACROMEDIA公司開發的集網頁制作和管理網站于一身的所見即所得網頁編輯器，DW是第一套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。 Macromedia公司成立于1992年，2005年被Adobe公司收購。 Adobe Dreamweaver使用所見即所得的接口，亦有HTML（標準通用標記語言下的一個應用）編輯的功能。它有Mac和Windows系統的版本。隨Macromedia被Adobe收購后，Adobe也開始計劃開發Linux版本的Dreamweaver了。 Dreamweaver自MX版本開始，使用了Opera的排版引擎"Presto" 作為網頁預覽。
dreamweaver8做網頁，焦點圖代碼怎么放
1.打開軟件dreamweaver8寫如下代碼，如圖：調用CSS樣式：<link rel="stylesheet" type="text/css" href="css/style.css" />調用JS插件代碼：<script type="text/javascript" src="js/jquery.js"></script><!--效果html開始--><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(function(){ var aPage = $('#main .page a'); //分頁按鈕 var aImg = $('#main .box img'); //圖像集合 var iSize = aImg.size(); //圖像個數 var index = 0; //切換索引 var t; $('#btnLeft').click(function(){ //左邊按鈕點擊 index--; if(index<0){ index=iSize-1 } change(index) }) $('#btnRight').click(function(){ //右邊按鈕點擊 index++; if(index>iSize-1){ index=0 } change(index) }) //分頁按鈕點擊 aPage.click(function(){ index = $(this).index(); change(index) }); //切換過程 function change(index){ aPage.removeClass('active'); aPage.eq(index).addClass('active'); aImg.stop(); //隱藏除了當前元素，所以圖像 aImg.eq(index).siblings().animate({ opacity:0 },1000) //顯示當前圖像 aImg.eq(index).animate({ opacity:1 },1000) } function autoshow() { index=index+1; if(index<=iSize-1){ change(index); }else{ index=0; change(index); } } int=setInterval(autoshow,3000); function clearInt() { $('#btnLeft,#btnRight,.page a').mouseover(function() { clearInterval(int); }) } function setInt() { $('#btnLeft,#btnRight,.page a').mouseout(function() { int=setInterval(autoshow,3000); }) } clearInt(); setInt();})</script><div id="main"> <a class="btnLeft" id="btnLeft" href="javascript:void(0);"></a> <a class="btnRight" id="btnRight" href="javascript:void(0);"></a> <div class="box"> <img style="opacity:1;filter:alpha(opacity=100);" src="images/圖片名稱1.jpg" /> <img src="images/圖片名稱2.jpg" /> <img src="images/圖片名稱3.jpg" /> </div> <div class="page"> <a class="active" href="javascript:void(0);">1</a> <a href="javascript:void(0);">2</a> <a href="javascript:void(0);">3</a> </div></div><!--效果html結束-->2.最后查看聚焦效果圖，如圖：
