1 架構(gòu)演化

大型網(wǎng)站的關(guān)注指標

高可用

高性能

易擴展

可伸縮

安全

大型網(wǎng)站的特點

高并發(fā)，大流量

高可用

海量數(shù)據(jù)

用戶分布廣泛，網(wǎng)絡情況復雜

安全環(huán)境惡劣

需求快速變更，發(fā)布頻繁

漸進式發(fā)展

大型網(wǎng)站架構(gòu)演化發(fā)展過程

初始階段，多使用LAMP來搭建，All In One即所有資源存放在一臺服務器上

應用服務和數(shù)據(jù)服務分離，有獨立的數(shù)據(jù)庫服務器

使用緩存改善網(wǎng)站性能（依據(jù)是二八定律：80%的業(yè)務訪問集中在20%的數(shù)據(jù)上）

這里需要考慮哪些數(shù)據(jù)適合緩存

緩存可以是本地緩存，也可以是遠程分布式緩存

需要考慮使用合理的緩存策略，防止透傳

使用應用服務器集群改善網(wǎng)站的并發(fā)處理能力

如果能通過增加一臺服務器的方式來改善負載壓力，就可以以同樣的方式持續(xù)增加服務器來不斷改善系統(tǒng)性能，從而實現(xiàn)系統(tǒng)的可伸縮性

這里需要考慮使用哪些負載均衡的策略

數(shù)據(jù)庫讀寫分離

可以利用主流數(shù)據(jù)庫提供的主從熱備功能，通過配置兩臺數(shù)據(jù)庫的主從關(guān)系，同時業(yè)內(nèi)也有很多優(yōu)秀的開源中間件如Atlas

緩存中的數(shù)據(jù)，如果更新過快，那么會持續(xù)刷新緩存，從而降低性能

使用反向代理和CDN加速網(wǎng)絡響應

CDN和反向代理的基本原理都是緩存

CDN部署在網(wǎng)絡提供商的機房，用戶在請求網(wǎng)絡服務時，可以從距離自己最近的網(wǎng)絡提供商機房獲取數(shù)據(jù)

反向代理部署在網(wǎng)站的中心機房，當用戶的請求到達中心機房后，首先訪問的服務器是反向代理服務器，如果反向代理服務器中緩存著用戶請求的資源，那么就將其直接返回給用戶

CDN的重點：——《大型網(wǎng)站系統(tǒng)與Java中間件實踐》

全局調(diào)度

緩存技術(shù)

內(nèi)容分發(fā)

帶寬優(yōu)化

使用分布式文件系統(tǒng)和分布式數(shù)據(jù)庫系統(tǒng)

網(wǎng)站常用的數(shù)據(jù)庫拆分手段是業(yè)務分庫，即將不同業(yè)務的數(shù)據(jù)庫部署到不同的物理服務器上

使用NoSQL和搜索引擎

ES

MongoDB

業(yè)務拆分，使用分而治之的手段將整個網(wǎng)站業(yè)務分成不同的產(chǎn)品線

SOA、服務化

中心化的 gataway方式

消息隊列

不同服務訪問同一個DB等

這部分十分重要，道理很簡單，但是執(zhí)行起來的效果千差萬別。

當下火熱的微服務，也是基于這種思想。

技術(shù)實現(xiàn)方式也有很多

分布式服務

大型網(wǎng)站架構(gòu)演化的價值觀

網(wǎng)站的價值在于它能為用戶提供什么價值，在于網(wǎng)站能做什么，而不在于它是怎么做的。因此對于小型網(wǎng)站來說，最需要做的是位用戶提供好的服務來創(chuàng)造價值，得到用戶的認可，從而活下去，野蠻生長。

大型網(wǎng)站架構(gòu)技術(shù)的核心價值是隨網(wǎng)站所需靈活應對， 它是一個演化的過程

驅(qū)動大型網(wǎng)站技術(shù)發(fā)展的主要力量是網(wǎng)站的業(yè)務發(fā)展，是業(yè)務成就了技術(shù)，而不是相反。因此要摒棄為了技術(shù)而技術(shù)的套路

網(wǎng)站架構(gòu)設計誤區(qū)

一味追求大公司的解決方案

為了技術(shù)而技術(shù)

企圖用技術(shù)解決所有問題

2 架構(gòu)模式

分層，這是在橫向方向?qū)ο到y(tǒng)進行切分

分層的挑戰(zhàn)在于必須合理規(guī)劃層次邊界和接口

分層包括物理分層和邏輯分層兩種

分割，這是在縱向方向?qū)ο到y(tǒng)進行切分

將不同的功能和服務分割開來，包裝秤高內(nèi)聚低耦合的模塊單元

分布式

1） 分布式應用和服務；

2） 分布式靜態(tài)資源；

3） 分布式數(shù)據(jù)和存儲；

4） 分布式計算；

5） 分布式配置、分布式鎖、分布式文件系統(tǒng)。。。

1） 分布式意味著服務調(diào)用必須通過網(wǎng)絡，需要考慮帶寬的影響；

2） 服務器越多，宕機的概率越大

分層和分割的目的在于小模塊便于分布式部署

帶來的問題：

常用的分布式方案：

集群，即多臺服務器部署相同的應用，從而構(gòu)成一個集群，通過負載均衡設備共同對外提供服務

即使訪問量很小的分布式應用和服務，也至少要部署到兩臺服務器來構(gòu)成一個小集群，這樣可以提高系統(tǒng)的可用性

緩存，即將數(shù)據(jù)放在距離計算最近的位置以加快處理速度

CDN

反向代理

本地緩存

分布式緩存

異步，業(yè)務之間的消息傳遞不是同步調(diào)用，而是將一個業(yè)務操作分成多個階段，每個階段之間通過共享數(shù)據(jù)的方法異步進行協(xié)作

1） 提高系統(tǒng)可用性；

2） 加快網(wǎng)站響應速度；

3） 消除并發(fā)訪問高峰

通常需要使用消息隊列

帶來的好處：

冗余

集群帶來的必然結(jié)果

安全需求的必然結(jié)果

自動化，DevOps思維，盡量減少人工干預

自動化發(fā)布

自動化代碼管理

自動化測試

自動化安全監(jiān)測

自動化部署

自動化監(jiān)控

自動化報警

自動化失效轉(zhuǎn)移、恢復

自動化分配資源

......

安全

3 大型網(wǎng)站核心架構(gòu)要素

性能

一個性能問題可能會導致網(wǎng)站用戶嚴重流失

衡量性能的指標：響應時間、TPS、系統(tǒng)性能計數(shù)器等

可用性

沒有網(wǎng)站可以完美的7*24運行

網(wǎng)站高可用結(jié)構(gòu)的前提是必然會出現(xiàn)服務器宕機，兒高可用設計的目標是當服務器宕機時，服務或者應用依然可用

必要的手段是集群，即冗余

伸縮性，即通過不斷向集群中加入服務器的手段來環(huán)節(jié)不斷上升的用戶并發(fā)訪問壓力和不斷增長的數(shù)據(jù)存儲需求

衡量標準：是否可以構(gòu)建集群；是否可以方便的向集群中添加新的服務器

擴展性，直接關(guān)注網(wǎng)站的功能，保證可以快速響應需求變更

衡量標準： 網(wǎng)站增加新的業(yè)務產(chǎn)品時，是否對現(xiàn)有業(yè)務透明無影響

安全性

衡量標準： 針對現(xiàn)存和潛在的各種攻擊和竊密手段，是否可以有效的應對

4 瞬時響應 - 網(wǎng)站的高性能架構(gòu)

不同視角下的網(wǎng)站性能

用戶視角

主要是端到端的感覺

主要通過前段優(yōu)化的手段來提升用戶體驗

開發(fā)人員視角

主要關(guān)注應用程序本身以及相關(guān)子系統(tǒng)的性能，包括響應延遲、系統(tǒng)吞吐量、并發(fā)處理能力、系統(tǒng)穩(wěn)定性等

主要優(yōu)化手段： 使用緩存加速數(shù)據(jù)讀取、使用集群提高吞吐能力、使用異步消息加快請求響應、使用代碼優(yōu)化提升程序性能

運維人員視角

主要關(guān)注基礎(chǔ)設施性能和資源利用率

主要優(yōu)化手段： 建設優(yōu)化骨干網(wǎng)、使用高性價比定制服務器、利用虛擬化技術(shù)優(yōu)化資源利用率

性能測試指標

響應時間，即應用執(zhí)行一個操作需要的時間，包括從發(fā)出請求開始到收到最后響應數(shù)據(jù)所需要的時間

并發(fā)數(shù)，即系統(tǒng)能夠同時處理的請求的數(shù)目，也反映了系統(tǒng)的負載特性

吞吐量，即單位時間內(nèi)系統(tǒng)處理的請求數(shù)量，體現(xiàn)系統(tǒng)的整理處理能力

性能計數(shù)器， 描述服務器或者操作系統(tǒng)性能的一些數(shù)據(jù)指標

性能測試方法

性能測試，以系統(tǒng)設計初期規(guī)劃的性能指標為預期目標，對系統(tǒng)不斷增壓，驗證系統(tǒng)在資源可接受范圍內(nèi)，是否能達到性能預期

負載測試，對系統(tǒng)不斷的增加并發(fā)請求，知道系統(tǒng)的某項或者多項性能指標達到安全臨界值

壓力測試，超過安全負載的情況下，繼續(xù)對系統(tǒng)增壓，直到系統(tǒng)崩潰或者不能再處理任何請求

穩(wěn)定性測試，在特定硬件、軟件、網(wǎng)絡情況下，給系統(tǒng)加載一定壓力，是系統(tǒng)運行較長一段時間，來觀察系統(tǒng)是否穩(wěn)定

Web前端優(yōu)化

瀏覽器訪問優(yōu)化

減少http請求

使用瀏覽器緩存

啟用壓縮

CSS放在頁面最上面，JavaScript放在頁面最下面

減少Cookie傳輸

CDN加速

反向代理

應用服務器性能優(yōu)化

分布式緩存

一般會使用消息隊列，帶來的額外好處是會削平峰值

1）不同的緩存服務器之間進行通信，例如JBoss Cache；

2）不同緩存服務器之間不進行通信，例如Memcached

緩存從本質(zhì)上來說，就是一個內(nèi)存hash表

緩存需要緩存那些讀寫比很高、很少變化的數(shù)據(jù)，一般來說讀寫比在2:1以上時，緩存才有意義

應用程序讀取數(shù)據(jù)時，首先到緩存中讀取，如果緩存不存在或者已失效，再訪問數(shù)據(jù)庫，同時將新的數(shù)據(jù)放入緩存

緩存也需要注意緩存熱點數(shù)據(jù)

緩存預熱，在新啟動的緩存系統(tǒng)中，在啟動時就加載熱點數(shù)據(jù)，這樣啟動后就可以直接使用

緩存穿透， 應用持續(xù)大量訪問不存在的數(shù)據(jù)，因為這類數(shù)據(jù)不存在于緩存中，因此會大量訪問數(shù)據(jù)庫，從而降低性能

對于分布式緩存來說，目前有兩類：

異步操作

使用集群

代碼優(yōu)化

多線程

1） 將對象設計成無狀態(tài)對象；

2） 使用局部對象；

3） 并發(fā)訪問資源時使用鎖

需要注意線程安全問題，方法：

資源復用

主要是單例和資源池（對象池）

數(shù)據(jù)結(jié)構(gòu)，選擇合適的算法

垃圾回收

合理設置垃圾回收策略

存儲性能優(yōu)化

機械硬盤 vs 固態(tài)硬盤

B+樹 vs LSM樹

RAID vs HDFS

5 萬無一失 - 網(wǎng)站的高可用架構(gòu)

網(wǎng)站可用性度量

網(wǎng)站不可用時間 = 故障修復時間點 - 故障發(fā)現(xiàn)時間點

網(wǎng)站年度可用性指標 = （1 - 網(wǎng)站不可用時間/年度總時間）* 100%

一般以幾個9來表示，2個9是基本可用，網(wǎng)站年度不可用時間小于88小時；3個9是較高可用，網(wǎng)站年度不可用時間小于9小時；4個9是具有自動恢復能力的高可用，網(wǎng)站年度不可用時間小于53分鐘；5個9是極高可用性，網(wǎng)站年度不可用時間小于5分鐘

網(wǎng)站高可用架構(gòu)的設計目標是保證服務器硬件故障時服務依然可用、數(shù)據(jù)依然保存并能夠被訪問

網(wǎng)站高可用架構(gòu)的主要手段：數(shù)據(jù)和服務的冗余備份以及失效轉(zhuǎn)移，一旦服務器宕機，就將服務切換至其他可用的服務器上。

高可用的應用

無狀態(tài)應用： 應用服務器不保存業(yè)務的上下文信息，而僅根據(jù)每次請求提交的數(shù)據(jù)進行相應的業(yè)務邏輯處理，多個服務實例之間完全對等，請求提交到任何一個服務器上，處理的結(jié)構(gòu)都是相同的。

通過負載均衡進行無狀態(tài)服務的失效轉(zhuǎn)移

負載均衡： 主要使用在業(yè)務量和數(shù)據(jù)量較高的情況下，當單臺服務器不足以承擔所有的負載壓力時，通過負載均衡手段，將流量和數(shù)據(jù)分攤到一個集群組成的多臺服務器上， 以提升整體的負載處理能力

應用服務器集群的Session管理

Session復制

Session綁定

利用Cookie記錄Session

Session服務器

高可用的服務

分級管理

核心服務與非核心服務隔離

核心服務優(yōu)先使用高性能服務器

超時設置

異步調(diào)用

必須滿足可以使用異步調(diào)用方式

服務降級

冪等性設計

服務高可用（高可靠）一直是美團外賣的第一要求，為了提高可用性，做了很多策略，包括并不限于上文提出的各種架構(gòu)設計方案。

其實造成線上問題的很大一部分原因是由于發(fā)版造成的，也體現(xiàn)出了SOP的重要性。

關(guān)于降級與依賴隔離，可以考慮采用Hystrix實現(xiàn)自動降級與依賴隔離 。

高可用的數(shù)據(jù)

數(shù)據(jù)一旦出現(xiàn)問題，對于網(wǎng)站往往是毀滅性的打擊，因此保護網(wǎng)站的數(shù)據(jù)就是保護企業(yè)的命脈。

主要手段：數(shù)據(jù)備份和失效轉(zhuǎn)移

緩存服務高可用

觀點一：緩存服務已經(jīng)承擔了業(yè)務中絕大多數(shù)的數(shù)據(jù)讀取訪問，因此需要同樣保證高可用

觀點二：緩存服務并不是數(shù)據(jù)存儲服務，出現(xiàn)服務不可用導致數(shù)據(jù)丟失應從別的手段解決，而不是提高緩存服務本身高可用

緩存服務器集群中單機故障，集群規(guī)模較大時，數(shù)據(jù)丟失比例和數(shù)據(jù)負載壓力影響很小。

CAP原理： 一個提供數(shù)據(jù)服務的存儲系統(tǒng)無法同時滿足數(shù)據(jù)一致性（Consistency）、數(shù)據(jù)可用性（Availibility）、分區(qū)耐受性（Parition Tolerance）這三個條件

數(shù)據(jù)高可用含義：

副本間數(shù)據(jù)一致

多個副本可讀

同時寫入數(shù)據(jù)副本

1）數(shù)據(jù)持久性

2）數(shù)據(jù)可訪問性

3）數(shù)據(jù)一致性

數(shù)據(jù)一致性分類：

1） 數(shù)據(jù)強一致；

2） 數(shù)據(jù)用戶一致；

3） 數(shù)據(jù)最終一致

數(shù)據(jù)備份

1） 異步熱備；

2） 同步熱備

冷備的優(yōu)點是簡單和廉價，成本和技術(shù)難度較低，缺點是不能保證數(shù)據(jù)最終一致

熱備分為兩種：

失效轉(zhuǎn)移

1） 心跳檢測（Keepalived、Heartbeat）；

2） 應用程序訪問失敗報告

失效確認：

訪問轉(zhuǎn)移

數(shù)據(jù)恢復

高可用網(wǎng)站的軟件質(zhì)量保證

網(wǎng)站發(fā)布，它的過程和服務器宕機效果箱單，其對系統(tǒng)可用性的影響也 類似

一般采取批量更新的方式進行，不會一次關(guān)掉集群中的全部服務器

自動化測試

一般使用Selenium來進行測試

預發(fā)布驗證

預發(fā)布服務器是一種特殊用途的服務器，它和線上的正式服務器唯一的區(qū)別是沒有配置在負載均衡服務器上，外部用戶無法訪問

代碼控制

主干開發(fā)，分支發(fā)布

分支開發(fā)，主干發(fā)布，這是目前使用的主流方式

自動化發(fā)布

火車模型：將每個應用的發(fā)布過程看做一次火車旅程，火車定點運行，期間有若干站點，每一站都進行例行檢查，不通過的項目下車，通過的項目繼續(xù)坐著火車旅行，直到火車到達終點。

實際中，可能所有項目在途中都下車了，這樣火車不得不回到原點，等待?...

現(xiàn)在是移動互聯(lián)網(wǎng)快速發(fā)展的時期，漸漸不少人查看網(wǎng)頁的習慣也在做者改變。不小年輕人現(xiàn)在很喜歡通過手機訪問不同的網(wǎng)站，因此企業(yè)開發(fā)手機網(wǎng)站也成為其搶占移動端的發(fā)嘛。手機網(wǎng)站開發(fā)技術(shù)的不斷成熟，讓開發(fā)網(wǎng)站變得不在困難，一般企業(yè)手機網(wǎng)站開發(fā)都需要幾個重要部分組成。

一、手機網(wǎng)站開發(fā)的主題確認

對于企業(yè)開發(fā)網(wǎng)站來說第一步就是確立好網(wǎng)站的主題，這也是建立手機網(wǎng)站的關(guān)鍵。建立網(wǎng)站的主題主要反映了開發(fā)網(wǎng)站的目的，同時為網(wǎng)站內(nèi)容的整體連續(xù)性提供給的依據(jù)。在確立了網(wǎng)站的主題后，之后填充網(wǎng)站內(nèi)容寫作就變得比較容易了，手機網(wǎng)站的主題設立的信息貫穿整個網(wǎng)站。當然企業(yè)在確定開發(fā)手機網(wǎng)站時就應該對整個網(wǎng)站的開發(fā)發(fā)展提供一個全面的計劃。

二、開發(fā)手機網(wǎng)站的內(nèi)容建設

在確定手機網(wǎng)站的主題后，接下來的工作就是建設網(wǎng)站的內(nèi)容。網(wǎng)站內(nèi)容的建設在具備親和力的條件下，還需要與確認的主題契合。手機網(wǎng)站的建設除了對企業(yè)本身有宣傳作用、展示產(chǎn)品，更重要的還是為企業(yè)帶來利潤，通過網(wǎng)站讓更多客戶了解企業(yè)與企業(yè)達成合作。

三、手機網(wǎng)站設計

在完成內(nèi)容的填充后，接下來需要完成的就是網(wǎng)頁的設計了。網(wǎng)頁的設計也是非常重要的，現(xiàn)在各類不同的手機網(wǎng)站眾多，如果想要得到客戶的訪問，好看的設計無疑是可以為網(wǎng)站增色不少。人是視覺動物，對好看的東西都會忍不住多看幾眼，而對手機網(wǎng)站來說也是，如果企業(yè)的網(wǎng)站內(nèi)容豐富但網(wǎng)頁設計很丑，客戶也很難多看幾眼你的網(wǎng)站。

網(wǎng)站的設計主要體現(xiàn)在網(wǎng)站結(jié)構(gòu)、色調(diào)、欄目等，而設計問題在網(wǎng)站制作中是普遍存在的。版式設計也基本都是那些模板，網(wǎng)站不會利用企業(yè)的特點進行裝飾，網(wǎng)站的設計需要有個性，因此企業(yè)在對待網(wǎng)站設計工作時需要非常仔細，選擇一家有資質(zhì)的設計公司為企業(yè)設計富有企業(yè)特色的手機網(wǎng)站設計。

四、手機網(wǎng)站開發(fā)問題

完成設計后，到了對手機網(wǎng)站進行審查的階段。在提交網(wǎng)站方案時需要對作對比，慎重的審查網(wǎng)站開發(fā)設計方案。對于網(wǎng)站建設來說，實際并不是一個簡單的工作，如何從企業(yè)的角度出發(fā)進行規(guī)劃、營造一個實用的網(wǎng)站，需要與專業(yè)的開發(fā)這進行考論，經(jīng)過深思熟慮后作出終的決定。

好的手機網(wǎng)站開發(fā)有利益提高企業(yè)的形象，樹立口碑，提高企業(yè)的收益。但同時開發(fā)不善的手機網(wǎng)站也會對企業(yè)造成負面影響，因此企業(yè)在開發(fā)網(wǎng)站時需要了解其步驟，然后經(jīng)過深思熟慮后作出決定。

BY：深圳尚網(wǎng)科技有限公司 https://itnoo/

現(xiàn)如今，越來越多的移動和桌面端應用開始應用HTML、JS和CSS進行開發(fā)，對于網(wǎng)頁開發(fā)和設計更是如此。目前這種局面也催生了更多新的網(wǎng)頁技術(shù)，包括React.js、Angular以及Node.js這樣的庫。此外，隨著需求及項目的進一步細化，開發(fā)者社區(qū)幾乎每天都會出現(xiàn)新的庫和開發(fā)工具，作為網(wǎng)頁開發(fā)者或設計師的你，自然很有必要去了解和掌握當下最新的、實用的工具，持續(xù)優(yōu)化工作方法、有效提高開發(fā)進度。

以下小編收集了一系列優(yōu)秀的開發(fā)和設計工具，包括在線/離線搭站工具、開源代碼工具、在線代碼生成器、排版工具等，一起看看吧。

1.

WordPress – 一站式網(wǎng)站搭建工具

· 價格：基礎(chǔ)版終身免費，個人版HK$30，高級版HK$63，商務版HK$199

· URL：https://zh-cn.wordpress/

· 推薦指數(shù)：★★★★★

WordPress – 一站式網(wǎng)站搭建工具

WordPress是使用PHP語言開發(fā)的博客平臺，支持PHP和MySQL數(shù)據(jù)庫的服務器上架設屬于自己的網(wǎng)站，也可以把它作為一個CMS（內(nèi)容管理系統(tǒng)）來架設商業(yè)網(wǎng)站，提供的功能包括：所見即所得的文章編輯器、多作者共同寫作、為搜索引擎而優(yōu)化的永久鏈接、生成和使用靜態(tài)頁面、Trackback/Pingback、會員注冊登錄等。

特色功能：

· 安裝方式簡單、易用，內(nèi)置許多搭站輔助工具，一鍵點擊即可完成安裝。

· 插件工具眾多，支持使用擴充其功能，適合DIY豐富的網(wǎng)站內(nèi)容。

· 第三方開發(fā)的免費模板、主題豐富，各色各樣，應有盡有！

· SEO搜索友好，收錄時間快。

· 強大的社區(qū)支持，成千上萬的開發(fā)者貢獻和審查WP，整個環(huán)境安全且活躍。

2.

Mockplus – 更快、更簡單的Web/Mobile/Desktop設計平臺

價格：基礎(chǔ)版免費，個人版￥199/年，團隊版￥999/年，企業(yè)版￥5999/年

URL：https://mockplus/

推薦指數(shù)：★★★★★

Mockplus –更快更簡單的設計平臺

作為國內(nèi)勢頭正猛的工具軟件，Mockplus（也叫摹客）適合軟件團隊、個人在軟件開發(fā)的設計階段使用，交互快、設計快、演示快、上手快，很好地順應了當前敏捷開發(fā)（AgileDevelopment）的大趨勢。同時，秉承“關(guān)注設計，而非工具”的理念，摹客提供一系列獨家實用的功能，幫助用戶提高工作及開發(fā)進度。

特色功能：

界面設計。組件開箱即用，提供項目和頁面模板、自定義組件庫、母版、組件樣式、格子、自動數(shù)據(jù)填充，讓設計快速復用。

團隊協(xié)作。支持團隊管理、角色設定和分組，可協(xié)作設計、分工編輯、多人審閱和評論、支持Sketch導入。

交互設計。拖拽鼠標即完成交互設計，支持頁鏈接、組件交互、交互狀態(tài)、交互自動還原。

工作文檔。多種批注組件添加設計說明、頁面流程圖快速呈現(xiàn)業(yè)務邏輯，腦圖模式快速構(gòu)建頁面關(guān)系。

演示分享。隨時發(fā)布分享，提供8種演示方式，支持HTML在線預覽和離線包等多種導出方式。

3.

Macaw – 革新性超前Web編輯器

· 價格： 免費

· URL：http://macaw.co/

· 推薦指數(shù)：★★★★

Macaw – 革新性超前Web編輯器

Macaw是目前最熱門的開發(fā)工具之一，被網(wǎng)友戲稱為“金剛鸚鵡“。它是一款基于Mac平臺、支持語義HTML和簡潔CSS的Web開發(fā)軟件，可生成多分辨率頁。同時它也可以作為設計師的圖像編輯工具，提供實時的布局引擎，讓元素以類似AdobePS中的呈現(xiàn)方式進行操作，通過編輯當前的網(wǎng)頁圖片，最后生成HTML模板和JS代碼。

特色功能：

· 特定寬度功能，可以自動計算每行字符個數(shù)，也支持用戶指定的寬度，生成自適應網(wǎng)頁布局。

· 組件庫功能，支持將自己設計的組件收藏和保存到庫，并拖拽到任意頁面中。

· 不同組件類別，可自己設計或者保存到指定的類別，并將它們快速應用到整個文檔。

· 具備流計算所有必要的屬性（漂浮、清除等），并將元素作為靜態(tài)文件流。

4.

Weebly – 主流Web開發(fā)及設計服務商

價格：基礎(chǔ)版免費，個人版8美金/月，Pro版12美金/月，商務版25美金/月

URL：https://weebly/

推薦指數(shù)：★★★★

Weebly – 主流Web開發(fā)及設計服務商

作為美國本土的一家自助建站服務商，Weebly使用了大量的Ajax技術(shù)，在操作性、用戶友好等方面做得很好，同類型的服務商還有Webs，Yola等，但像Weebly這樣針對中國用戶單獨增設中文網(wǎng)站的比較罕見。

特色功能：

· 拖拽實現(xiàn)編輯，無論是視頻、圖片、地圖和文章都能拖拽到網(wǎng)站中，無需HTML或其他網(wǎng)頁程序語言的支持，簡單且直觀。

· 專業(yè)模板設計直接使用，目前已有70個、且在持續(xù)增加中，如果懂HTML/CSS，可以直接用它們的編輯器來定制。

· 允許綁定個人的頂級域名，而且是綁定域名是免費的，直接提供IP地址即可，也可以在Weebly上購買域名。

5.

Adobe Dreamweaver – 最權(quán)威的網(wǎng)頁開發(fā)及設計工具

價格：個人版$9.99-$82.99/月，商務版$33.99-$79.99/月

URL：https://adobe/products/dreamweaver.html

推薦指數(shù)：★★★★

Adobe Dreamweaver – 最權(quán)威的網(wǎng)頁開發(fā)及設計工具

相信不少做開發(fā)和設計的小伙伴對DW這款軟件并不陌生，它是集網(wǎng)頁制作和管理網(wǎng)站于一體的WYSIWYG網(wǎng)頁代碼編輯器，通過使用HTML、CSS、JavaScript等語言，程序員和設計師幾乎可以在任何地方快速制作和上線網(wǎng)站。支持Windows和Mac操作系統(tǒng)，對剛?cè)腴T初學者或者需要進階的大神來說都是不錯的選擇。

特色功能：

· 自適應網(wǎng)格，可使用CSS3自適應網(wǎng)格版面，創(chuàng)建跨平臺和瀏覽器的兼容網(wǎng)頁設計，采用符合業(yè)界標準的代碼為各種不同設備和計算機開發(fā)項目。

· 實時視圖，支持再發(fā)布前測試頁面，采用最新版WebKit轉(zhuǎn)換引擎，提供絕佳的HTML5支持。

· “多平面預覽”面板，支持為智能手機、Tablet和個人計算機進行設計，開發(fā)人員也可以通過其為各種設備設計樣式并實現(xiàn)渲染可視化。

結(jié)語

以上是小編力薦的網(wǎng)頁開發(fā)和設計工具，顯而易見每款工具都各有千秋，我們可以結(jié)合實際的開發(fā)需求和項目支持來做進一步選擇：如果你擁有不錯的開發(fā)基礎(chǔ)、且想自己編代碼來搭站，那么Macaw和DreamWeaver都是不錯的選擇；如果你是開發(fā)新手或者小白、更需要完全成形的三方平臺來搭建網(wǎng)站，那么WordPress和Weebly都可以考慮；如果你更在意開發(fā)效率、網(wǎng)站功能以及資金預算，那么Mockplus是不二之選！