整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          不得不佩服,美觀小巧的網(wǎng)頁內(nèi)容編輯器-ContentTools

          ContentTools是一個(gè)美觀小巧的網(wǎng)頁內(nèi)容工具(一個(gè)JS庫),具備所見即所得(WYSIWYG)的編輯器功能,只需幾個(gè)簡單的步驟,即可將ContentTools添加到任何HTML頁面。如下圖所示頁面通過實(shí)時(shí)ContentTool的彈出層實(shí)現(xiàn)實(shí)時(shí)編輯功能。用小而美來形容它最好不過了!



          Github地址

          https://github.com/GetmeUK

          特性

          ContentTools是用于HTML頁面的美觀小巧的內(nèi)容編輯器。它被設(shè)計(jì)為:

          • 與框架無關(guān)的庫不使用任何JavaScript框架(沒有JQuery),但可以很好地使用它們。
          • 靈活的ContentTools軟件包由5個(gè)庫組成,每個(gè)庫或可以獨(dú)立使用。
          • 可擴(kuò)展的軟件包旨在易于擴(kuò)展。
          • 小巧完整的編輯器(JS,CSS,圖像和圖標(biāo)字體)為241kb(壓縮后為49kb)。

          功能簡介

          ContentTools具有字體加粗、斜體、超鏈接、對(duì)齊、列表、表格、圖片、視頻、代碼、撤銷、重做、刪除等功能

          1、加粗顯示


          2、斜體顯示


          3、超鏈接


          4、H標(biāo)題


          5、正文


          6、有序和無序列表


          7、插入表格


          8、插入圖片



          9、視頻


          以上截圖中的功能還不完整,如果想體驗(yàn)以下完整的功能可以直接去DEMO頁面體驗(yàn),如果需要在HTML級(jí)別上更改元素的內(nèi)容,那也是可以的。通過屬性對(duì)話框中的最后一個(gè)選項(xiàng)卡,可以查看所選元素的內(nèi)部HTML代碼并直接對(duì)其進(jìn)行更新。

          使用

          • 第一步是下載JS,CSS和其他關(guān)聯(lián)的項(xiàng)目文件:

          下載倉庫并打開/ build文件夾,包括預(yù)構(gòu)建的源文件。將文件夾的內(nèi)容復(fù)制到項(xiàng)目的適當(dāng)位置(例如,content-tools.min.js> /www/scripts/content-tools.min.js)。但是,/ images文件夾和icons.woff字體需要復(fù)制到與content-tools.min.css相同的文件夾中,文件結(jié)構(gòu)應(yīng)類似于:


          • HTML
          <head>
           <title>My page</title>
           <link rel="stylesheet" type="text/css" href="assets/content-tools.min.css">
           ...
          </head>
          <body>
           ...
           <script src="assets/content-tools.min.js"></script>
           <script src="assets/editor.js"></script>
          </body>

          包括一個(gè)名為editor.js的附加JS文件。包含初始化我們的編輯器的代碼,繼續(xù)

          <div data-editable data-name="main-content">
           <blockquote>
           Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
           </blockquote>
           <p>John F. Woods</p>
          </div>

          data-name屬性用于在保存時(shí)標(biāo)識(shí)區(qū)域(默認(rèn)情況下使用id屬性),標(biāo)記可編輯HTML時(shí),常見的誤解是將單個(gè)元素標(biāo)記為可編輯,例如:

          <h1 data-editable data-name="heading">Content</h1>

          正確的使用方式如下,也就是說必須要在特定的容器元素內(nèi)

          <div data-editable data-name=heading>
           <h1>Content</h1>
          </div>
          • 準(zhǔn)備CSS

          ContentTools使用CSS類來對(duì)齊文本,圖像,視頻和iframe,需要在自己的CSS中為這些對(duì)齊類定義樣式,例如:

          [data-editable] iframe,
          [data-editable] image,
          [data-editable] [data-ce-tag=img],
          [data-editable] img,
          [data-editable] video {
           clear: both;
           display: block;
           margin-left: auto;
           margin-right: auto;
           max-width: 100%;
          }
          
          /* 左對(duì)齊 */
          [data-editable] .align-left {
           clear: initial;
           float: left;
           margin-right: 0.5em;
          }
          
          /* 右對(duì)齊 */
          [data-editable].align-right {
           clear: initial;
           float: right;
           margin-left: 0.5em;
          }
          
          /* 可編輯區(qū)域中文本的對(duì)齊樣式 */
          [data-editable] .text-center {
           text-align: center;
          }
          
          [data-editable] .text-left {
           text-align: left;
          }
          
          [data-editable] .text-right {
           text-align: right;
          }
          • 初始化編輯器

          ContentTools提供了一個(gè)編輯器,但是在初始化它之前,我們需要配置一些東西,即:

          1. 我們希望用戶能夠?qū)SS樣式應(yīng)用于元素。
          2. 我們希望頁面的區(qū)域是可編輯的。
          3. 一種保存我們的內(nèi)容的機(jī)制。
          4. 我們可能還會(huì)配置圖像處理程序等等

          將以下代碼添加到我們之前創(chuàng)建的editor.js文件中:

          window.addEventListener('load', function() {
           var editor;
          
          });
          • 配置樣式

          就像文字處理程序一樣,可以為內(nèi)容配置一系列預(yù)定義樣式。當(dāng)用戶從視口底部的檢查器欄中選擇標(biāo)簽時(shí),這些標(biāo)簽就會(huì)出現(xiàn)。盡管可以將樣式設(shè)置為適用于所有標(biāo)簽,但是僅顯示適用于標(biāo)簽類型的樣式。


          我們將添加可應(yīng)用于段落<p>標(biāo)記的單一樣式.author。在var編輯器下方聲明添加:

          ContentTools.StylePalette.add([
           new ContentTools.Style('Author', 'author', ['p'])
          ]);

          StylePalette.add方法使我們可以向編輯器添加樣式列表。每種樣式均聲明為一個(gè)Style實(shí)例,該實(shí)例使用顯示名稱,CSS類和可以應(yīng)用該樣式的標(biāo)簽列表初始化。我們需要添加相關(guān)的CSS來支持這種樣式,因此在HTML的開頭添加:

          <head>
           ...
           <style>
           .author {
           font-style: italic;
           font-weight: bold;
           }
           </style>
          </head>
          • 選擇可編輯區(qū)域

          接下來,我們需要初始化編輯器,并讓它知道頁面上的哪些元素是可編輯的。為此,將以下代碼添加到editor.js中:

          editor = ContentTools.EditorApp.get();
          editor.init('*[data-editable]', 'data-name');

          我們使用用于頁面可編輯區(qū)域的CSS選擇器和屬性名稱(“數(shù)據(jù)名稱”)來初始化編輯器,以告知編輯器元素的哪個(gè)屬性包含其區(qū)域名稱。區(qū)域名稱在同一頁面中必須唯一。

          • 保存更改

          最后,我們希望在用戶保存頁面時(shí)得到通知,以便我們可以將每個(gè)區(qū)域的更新內(nèi)容存儲(chǔ)在文件或數(shù)據(jù)庫中。為此,我們監(jiān)聽由編輯器觸發(fā)的保存事件。在editor.init語句之后,將以下代碼添加到editor.js中:

          editor.addEventListener('saved', function (ev) {
           var name, payload, regions, xhr;
          
           // 檢查是否已更改
           regions = ev.detail().regions;
           if (Object.keys(regions).length == 0) {
           return;
           }
          
           // 保存更改時(shí)將編輯器設(shè)置為忙
           this.busy(true);
          
           // 將每個(gè)區(qū)域的內(nèi)容收集到一個(gè)FormData實(shí)例中
           payload = new FormData();
           for (name in regions) {
           if (regions.hasOwnProperty(name)) {
           payload.append(name, regions[name]);
           }
           }
          
           // 將更新內(nèi)容發(fā)送到要保存的服務(wù)器
           function onStateChange(ev) {
           // 檢查請(qǐng)求是否完成
           if (ev.target.readyState == 4) {
           editor.busy(false);
           if (ev.target.status == '200') {
           // 保存成功,通知前臺(tái)
           new ContentTools.FlashUI('保存成功');
           } else {
           // 保存失敗,通知前臺(tái)
           new ContentTools.FlashUI('保存失敗');
           }
           }
           };
          
           xhr = new XMLHttpRequest();
           xhr.addEventListener('readystatechange', onStateChange);
           xhr.open('POST', '/save-my-page');
           xhr.send(payload);
          });

          當(dāng)用戶保存頁面時(shí),我們可以使用AJAX將每個(gè)區(qū)域的內(nèi)容發(fā)送到服務(wù)器進(jìn)行保存。在瀏覽器中打開頁面,尋找左上方的藍(lán)色編輯按鈕,然后單擊它以開始編輯。







          總結(jié)

          這樣一個(gè)美觀且強(qiáng)大的即時(shí)編輯器可謂是非常的實(shí)用,特別是對(duì)于一些內(nèi)容編輯網(wǎng)站,如CMS、靜態(tài)文檔網(wǎng)站、博客等內(nèi)容型網(wǎng)站尤其有用,希望對(duì)你有所幫助,Enjoy it!

          普及一下基本知識(shí):什么叫在線HTML編輯器?

          說得簡單點(diǎn),在線HTML編輯器就是在網(wǎng)上發(fā)帖子、寫博客的那個(gè)帶編輯功能的框框,可以進(jìn)行圖文排版等操作。


          當(dāng)年本菜鳥做網(wǎng)站的時(shí)候,曾經(jīng)自己用javascript編寫過一個(gè)比較簡單的在線HTML編輯器,用于文本內(nèi)容的排版。但是因?yàn)樗接邢蓿芏喙δ芏紵o法實(shí)現(xiàn)。后來有了eWebEditor,功能確實(shí)強(qiáng)大,但這個(gè)編輯器是個(gè)收費(fèi)的軟件,并且正因?yàn)楣δ軓?qiáng)大,也就顯得過重,一些輕量的場合不是太適用。那有沒有既免費(fèi)、又功能強(qiáng)大、還能適應(yīng)輕量場合的在線HTML編輯器呢?

          答案肯定是有的。這首先要感謝這些年來有一批奉獻(xiàn)精神的程序猿們不斷推進(jìn)共享軟件的開發(fā),讓我們得以享受他們的成果。

          一、百度出品的UEditor

          UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器,具有輕量,可定制,注重用戶體驗(yàn)等特點(diǎn),開源基于MIT協(xié)議,允許自由使用和修改代碼。特別要說的是,頭條號(hào)后臺(tái)發(fā)布文章的編輯器就是用的UEditor!

          百度UEditor

          UEditor還有一個(gè)輕量版的,叫做UMeditor,簡稱UM。UM是為滿足廣大門戶網(wǎng)站對(duì)于簡單發(fā)帖框,或者回復(fù)框需求所定制的在線HTML編輯器。 主要特點(diǎn)是容量和加載速度上的改變,主文件的代碼量為139k,而且放棄了使用傳統(tǒng)的iframe模式,采用了div的加載方式, 以達(dá)到更快的加載速度和零加載失敗率。UM的第一個(gè)使用者是百度貼吧,以經(jīng)受貼吧每天幾億的pv的考驗(yàn),功能設(shè)計(jì)應(yīng)當(dāng)是最優(yōu)化的了。 當(dāng)然隨著代碼的減少,UM的功能對(duì)于UE來說還是有所減少,但也有增加,比如拖拽圖片上傳,chrome的圖片拖動(dòng)改變大小等。

          百度UEditor界面

          二、xhEditor開源HTML編輯器

          xhEditor是一個(gè)基于jQuery開發(fā)的簡單迷你并且高效的可視化HTML編輯器,基于網(wǎng)絡(luò)訪問并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。

          xhEditor完全基于Javascript開發(fā),可以應(yīng)用在任何的服務(wù)端語言環(huán)境下,例如:PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、論壇、商城等互聯(lián)網(wǎng)平臺(tái)上完美的嵌入運(yùn)行,能夠非常靈活簡單的和您的系統(tǒng)實(shí)現(xiàn)完美的無縫銜接。

          主要特點(diǎn):

          • 精簡迷你:初始加載4個(gè)文件,包括:1個(gè)js(50k)+2個(gè)css(10k)+1個(gè)圖片(5k),總共65k。若js和css文件進(jìn)行g(shù)zip壓縮傳輸,可以進(jìn)一步縮減為24k左右。

          • 使用簡單:簡單的調(diào)用方式,加一個(gè)class屬性就能將textarea變成一個(gè)功能豐富的可視化編輯器。

          • 無障礙訪問:提供WAI-ARIA全面支持,全鍵盤精細(xì)操作,全程語音向?qū)В峁┩昝罒o障礙訪問體驗(yàn),充分滿足殘疾人的上網(wǎng)需求。

          • 內(nèi)置Ajax上傳:內(nèi)置強(qiáng)大的Ajax上傳,包括HTML4和HTML5上傳支持(多文件上傳、真實(shí)上傳進(jìn)度及文件拖放上傳),剪切板上傳及遠(yuǎn)程抓取上傳

          • Word自動(dòng)清理:實(shí)現(xiàn)Word代碼自動(dòng)檢測(cè)并清理,生成代碼最優(yōu)化精簡,卻不丟失細(xì)節(jié)效果。

          • UBB可視化編輯:支持UBB可視化編輯,在獲得安全高效代碼存儲(chǔ)的同時(shí),又能享受可視化編輯的便捷。

          三、KindEditor開源HTML編輯器

          KindEditor 也是一個(gè)開源的在線HTML編輯器, 使用 JavaScript 編寫,可以無縫地與 Java、.NET、PHP、ASP 等程序集成,比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應(yīng)用上使用。本菜鳥感覺這個(gè)編輯器上手比較容易,功能也很強(qiáng)大,界面比較友好,很適合菜鳥使用。可惜的是最近好像停止更新了,官網(wǎng)好象也能不正常訪問。

          KindEditor界面

          主要特點(diǎn):

          • 快速:體積小,加載速度快

          • 開源:開放源代碼,高水平,高品質(zhì)

          • 底層:內(nèi)置自定義 DOM 類庫,精確操作 DOM

          • 擴(kuò)展:基于插件的設(shè)計(jì),所有功能都是插件,可根據(jù)需求增減功能

          • 風(fēng)格:修改編輯器風(fēng)格非常容易,只需修改一個(gè) CSS 文件

          • 兼容:支持大部分主流瀏覽器,比如 IE、Firefox、Safari、Chrome、Opera

          四、阿里的KISSY

          嚴(yán)格來說,KISSY不僅僅是一個(gè)在線HTML編輯器,而是由阿里集團(tuán)前端工程師們發(fā)起創(chuàng)建的一個(gè)開源 JS 框架,具有跨終端、模塊化、使用簡單的特點(diǎn)。里面帶有HTML編輯器這個(gè)模塊。

          阿里的KISSY

          正因?yàn)镵ISSY采取模塊化設(shè)計(jì),因此具有高擴(kuò)展性、組件齊全,接口一致、自主開發(fā)、適合多種應(yīng)用場景等優(yōu)點(diǎn)。KISSY 除了完備的工具集合諸如 DOM、Event、Ajax、Anim 等,KISSY 還面向團(tuán)隊(duì)協(xié)作做了獨(dú)特設(shè)計(jì),提供了經(jīng)典的面向?qū)ο蟆?dòng)態(tài)加載、性能優(yōu)化解決方案。作為一款全終端支持的 JavaScript 框架,KISSY還 為移動(dòng)終端做了大量適配和優(yōu)化,搞移動(dòng)web開發(fā)的可以好好研究一下KISSY的運(yùn)用


          關(guān)于菜鳥手記:

          菜鳥最怕就是看大神的攻略,全是術(shù)語看頭就頭大!本人作為一名對(duì)啥都感興趣的資深菜鳥,潛心研究各類技術(shù)二十余年,做網(wǎng)站、寫程序、搞美工、練書法、學(xué)畫畫、作文章、抓管理、裝逼格,屬于搞IT里面最懂美工的,搞HR里面最懂畫畫的,搞文字里面最懂程序的,最終一事無成,博而不精,徒留一堆手記。從菜鳥角度寫手記,同樣的”白”更易懂,你值得擁有!感興趣的,請(qǐng)別忘點(diǎn)右角關(guān)注菜鳥手記。


          TML編輯器是一種用于創(chuàng)建、編輯和預(yù)覽HTML(超文本標(biāo)記語言)代碼的工具或應(yīng)用程序。它提供了一個(gè)直觀的界面,使用戶能夠輕松地編寫和設(shè)計(jì)網(wǎng)頁內(nèi)容。本文主要介紹HTML 常用編輯器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。


          參考文檔:https://www.cjavapy.com/article/3299/


          1、Visual Studio Code(VS Code )


          Visual Studio Code(簡稱VS Code)是一款由微軟開發(fā)的跨平臺(tái)源代碼編輯器,支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā),包括編輯HTML、CSS、JavaScript等前端技術(shù)。VS Code是一款輕量級(jí)的代碼編輯器,啟動(dòng)迅速,占用資源少。VS Code提供了豐富的擴(kuò)展和插件,可以根據(jù)需求安裝插件來增強(qiáng)編輯器功能。


          1)安裝和配置


          官網(wǎng)地址:Visual Studio Code - Code Editing. Redefined


          根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的VS Code。打開VS Code后,可以根據(jù)自己的喜好配置編輯器設(shè)置,如主題、字體等。


          2)新建HTML文件


          在 VS Code 安裝完成后,選擇" 文件(F)->新建文件(N) ",在新建的文件中輸入以下代碼:


          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>編程之路(cjavapy.com)</title>
          </head>
          <body>
           
          <h1>我的第一個(gè)標(biāo)題</h1>
           
          <p>我的第一個(gè)段落。</p>
           
          </body>
          </html>


          3)編輯HTML文件


          在VS Code中,點(diǎn)擊左上角的"文件"菜單,選擇"打開文件",或者使用快捷鍵Ctrl+O(Windows)或Cmd+O(macOS)來打開HTML文件。


          在編輯器中可以直接修改HTML文件的內(nèi)容。VS Code會(huì)自動(dòng)識(shí)別HTML標(biāo)記,并提供代碼高亮和智能提示功能。編輯完成后,使用快捷鍵Ctrl+S(Windows)或Cmd+S(macOS)來保存HTML文件。


          4)插件推薦


          HTML CSS Support:提供對(duì)HTML和CSS的支持,包括代碼片段、自動(dòng)補(bǔ)全等功能。


          Live Server:啟動(dòng)一個(gè)本地開發(fā)服務(wù)器,實(shí)時(shí)預(yù)覽HTML頁面的效果。


          Prettier:格式化HTML代碼,使代碼結(jié)構(gòu)更整潔。


          Auto Close Tag:自動(dòng)閉合HTML標(biāo)簽,提高編碼效率。


          Bracket Pair Colorizer:對(duì)成對(duì)的括號(hào)進(jìn)行著色,方便識(shí)別代碼塊。


          2、Sublime Text


          Sublime Text是一款流行的跨平臺(tái)源代碼編輯器,支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā),包括編輯HTML、CSS、JavaScript等前端技術(shù)。


          Sublime Text的界面非常簡潔,沒有多余的菜單和工具欄,更便于專注于代碼編輯。Sublime Text支持多種編程語言,包括HTML、CSS、JavaScript、Python、Java等。Sublime Text擁有強(qiáng)大的插件系統(tǒng),用戶可以根據(jù)需要安裝插件來擴(kuò)展編輯器功能。用戶可以自定義快捷鍵、主題、顏色方案等,以滿足個(gè)性化需求。Sublime Text啟動(dòng)迅速,響應(yīng)快速,適合于快速編輯代碼。


          1)安裝和配置


          官網(wǎng)地址:Sublime Text - Text Editing, Done Right


          根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Sublime Text。打開Sublime Text后,可以根據(jù)自己的喜好進(jìn)行編輯器設(shè)置,如字體、主題等。


          2)新建HTML文件


          在Sublime Text 安裝完成后,選擇" File->New File ",在新建的文件中輸入以下代碼:


          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>編程之路(cjavapy.com)</title>
          </head>
          <body>
           
          <h1>我的第一個(gè)標(biāo)題</h1>
           
          <p>我的第一個(gè)段落。</p>
           
          </body>
          </html>


          3)編輯HTML文件


          在Sublime Text中,點(diǎn)擊左上角的"File"菜單,選擇"Open File",或者使用快捷鍵Ctrl+O(Windows)或Cmd+O(macOS)來打開HTML文件。在編輯器中可以直接修改HTML文件的內(nèi)容。Sublime Text會(huì)自動(dòng)識(shí)別HTML標(biāo)記,并提供代碼高亮和智能提示功能。編輯完成后,使用快捷鍵Ctrl+S(Windows)或Cmd+S(macOS)來保存HTML文件。


          4)插件推薦


          Emmet:提供HTML/CSS快速編寫和自動(dòng)完成功能,可以大大提高編碼效率。


          Sublime Linter:對(duì)代碼進(jìn)行實(shí)時(shí)語法檢查,幫助發(fā)現(xiàn)潛在的錯(cuò)誤和警告。


          Color Highlighter:對(duì)CSS中的顏色進(jìn)行高亮顯示,方便調(diào)試和修改樣式。


          SideBarEnhancements:增強(qiáng)側(cè)邊欄功能,提供更多文件操作選項(xiàng)。


          3、Dreamweaver


          Dreamweaver是由Adobe公司開發(fā)的一款全球知名的網(wǎng)頁設(shè)計(jì)和開發(fā)工具。它為開發(fā)人員和設(shè)計(jì)師提供了一個(gè)可視化的界面,可以直觀地創(chuàng)建和編輯網(wǎng)頁內(nèi)容,同時(shí)也支持手動(dòng)編輯代碼。Dreamweaver提供可視化界面,可以直觀地拖拽和編輯網(wǎng)頁元素,無需手動(dòng)編寫代碼。除了可視化界面,Dreamweaver也支持手動(dòng)編輯代碼,適合于開發(fā)人員和設(shè)計(jì)師。Dreamweaver可在Windows和macOS等多個(gè)平臺(tái)上運(yùn)行。Dreamweaver集成了代碼編輯器、預(yù)覽窗口、文件管理器等功能,提供全面的開發(fā)環(huán)境。


          1)安裝和配置


          官網(wǎng)地址:Website design software | Adobe Dreamweaver


          根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Dreamweaver。打開Dreamweaver后,,根據(jù)需要進(jìn)行編輯器設(shè)置,如界面語言、字體、代碼顏色等。


          2)編輯HTML文件


          在Dreamweaver中,點(diǎn)擊左上角的"File"菜單,選擇"New",然后選擇"HTML",即可新建一個(gè)空白的HTML文件。內(nèi)容如下:


          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>編程之路(cjavapy.com)</title>
          </head>
          <body>
           
          <h1>我的第一個(gè)標(biāo)題</h1>
           
          <p>我的第一個(gè)段落。</p>
           
          </body>
          </html>


          使用可視化界面,可以直接拖拽頁面元素、調(diào)整布局、插入圖片等。若需要手動(dòng)編輯HTML代碼,可以在下方的代碼編輯器中進(jìn)行修改。Dreamweaver會(huì)自動(dòng)提供代碼補(bǔ)全和語法高亮功能。在Dreamweaver中,可以實(shí)時(shí)預(yù)覽網(wǎng)頁效果,點(diǎn)擊右上角的"Live View"按鈕即可。


          3)CSS和JavaScript支持


          Dreamweaver也支持CSS和JavaScript的編輯和預(yù)覽,可以幫助創(chuàng)建更豐富的網(wǎng)頁效果。在編輯器中可以直接編輯CSS樣式和JavaScript代碼,并實(shí)時(shí)查看效果。


          4)網(wǎng)頁上傳和發(fā)布


          Dreamweaver集成了FTP功能,可以直接將編輯好的網(wǎng)頁上傳到服務(wù)器。點(diǎn)擊"Site"菜單,選擇"Manage Sites",配置好站點(diǎn)設(shè)置,即可進(jìn)行上傳和發(fā)布。


          5)Dreamweaver模板和庫


          Dreamweaver提供模板和庫功能,可以保存和復(fù)用常用的網(wǎng)頁元素和樣式,提高開發(fā)效率。


          參考文檔:https://www.cjavapy.com/article/3299/


          主站蜘蛛池模板: 91香蕉福利一区二区三区| 亚洲Av无码一区二区二三区| 国产在线精品一区二区三区直播| 男人的天堂亚洲一区二区三区| 精品乱子伦一区二区三区| 国产色精品vr一区区三区| 日韩人妻精品无码一区二区三区| 无码成人一区二区| 久久亚洲色一区二区三区| 国产乱码精品一区二区三区麻豆 | 亚洲av色香蕉一区二区三区蜜桃| 无码人妻精品一区二| 国产香蕉一区二区精品视频| 国产一区二区精品久久岳| 国产成人一区二区在线不卡 | 亚洲AV乱码一区二区三区林ゆな| 中文字幕av日韩精品一区二区| 亚洲一区二区三区香蕉| 中文日韩字幕一区在线观看| 国产精品亚洲综合一区在线观看| 久久国产精品无码一区二区三区| 国产精品小黄鸭一区二区三区| 国产主播福利一区二区| 色噜噜狠狠一区二区三区| 色窝窝无码一区二区三区| 久久亚洲AV午夜福利精品一区| 婷婷国产成人精品一区二| 国产一区二区在线观看麻豆 | 高清国产精品人妻一区二区| 一区二区三区四区视频在线| 国产无吗一区二区三区在线欢| 国模极品一区二区三区| 国产成人一区二区三区精品久久| 国产精品无码一区二区三区毛片| 熟女少妇精品一区二区| 国产av福利一区二区三巨| 日本一区二区三区在线观看视频| 亚洲午夜一区二区三区| 日本免费一区尤物| 亚洲AV无码一区二三区| 国产探花在线精品一区二区|