就目前來說，使用最多的(de)靜態網(wang)站的(de)制(zhi)作工具有(you)dream weaver，軟件直接百度就可以找到(dao)并下載了(le)。
經過重新設(she)計的(de)ui dream weaver更(geng)加的(de)好用。
它默認(ren)支持代(dai)碼模式和設計模式，也可以(yi)兩種(zhong)模式同時(shi)打開，方便即時(shi)的查(cha)看網頁(ye)效果。
因為(wei)高度(du)集成化，使用它來(lai)編寫靜態(tai)網(wang)頁(ye)是非常(chang)的方便。
毋庸置疑的是(shi)，web storm用來(lai)進行網頁的前端(duan)開發是(shi)非常好用的。
它(ta)適(shi)用動(dong)態網頁的開發。
frontpage是早前微軟(ruan)的產品，目前已經停止更新了。不(bu)(bu)過它比較簡單(dan)，輕便，如果你不(bu)(bu)是太了解網頁(ye)，并且你的電腦(nao)還(huan)能夠安裝這個軟(ruan)件。可(ke)以嘗試使用它來制作網頁(ye)。
當然它和dreamweaver一樣，適(shi)用(yong)于靜態網(wang)頁。
注意：據(ju)說frontpage不支(zhi)持win10系統。
HBuilder非常(chang)好用的(de)html5 ide。使用它(ta)來編寫JavaScript簡(jian)直如行云流水(shui)。最重要的(de)是，它(ta)是個人免(mian)費使用的(de)，不(bu)像上面的(de)軟件需要授權收費。
它可以為你自動調節屏(ping)幕(mu)的(de)顏(yan)色(se)，保(bao)護你的(de)眼睛。
多種(zhong)語(yu)言(yan)支持：php、jsp、ruby、python、nodejs等web語(yu)言(yan)
該圖片由注冊用戶"溫暖·生活家"提供，版權聲明反饋
WampServer用于一鍵(jian)啟(qi)動各種(zhong)PHP后端服務器(qi)，Mysql數據庫(ku)等服務。
不需要(yao)你重新安裝這些軟件，也(ye)不需要(yao)太(tai)復雜(za)的配置。
如果你是創建PHP的動(dong)態網頁這(zhe)個軟(ruan)件是必不可少(shao)的。
visualstudio是微軟(ruan)開發并(bing)且程序員使用比較多的(de)軟(ruan)件，可以用于C/C++，C#等等軟(ruan)件的(de)開發。
如(ru)果(guo)你想要(yao)編寫(xie)asp.net動(dong)態網頁(ye)，也可以(yi)使用(yong)這個軟件進行開發。
eclipse是基于(yu)Java編寫的程序ide，安裝(zhuang)之前需(xu)要(yao)安裝(zhuang)jdk并配置好環境變量。
如果你以為(wei)eclipse只能寫寫java,c,c++的，那(nei)么(me)你就錯了。
同樣的它支持python，php等腳本(ben)語(yu)言的開發，并(bing)支持綁定瀏覽(lan)器調試。
同樣：eclipse是免費(fei)使用的。
免費網頁模型
在(zai)參考階段(duan)，免費(fei)的網頁模型(xing)(xing)往往是初學者的首選。毫不(bu)猶豫，我們為(wei)大家奉(feng)上一批免費(fei)的網頁模型(xing)(xing)案例，拿走(zou)不(bu)謝！
1、Amcharts-工具類網頁模(mo)型
參(can)考點：登陸界面設計(ji)
下載(zai)地址(zhi)：//doc.mockplus.cn/wp-content/uploads/2018/04/Amcharts.zip
該網站模型(xing)的(de)原型(xing)是Amcharts公(gong)司開(kai)(kai)發(fa)的(de)JavaScript Charts，是兼容性好的(de)JavaScript、HTML5圖表開(kai)(kai)發(fa)工具，能滿足大部分的(de)開(kai)(kai)發(fa)需求。
此模板中有Products，Download，Support，Buy，Demos等5個頁面，網站設(she)計采用(yong)了懸浮導(dao)航(hang)欄和footer的效果(guo)，可用(yong)于訂單購買，登陸，圖標(biao)展示等網頁界面設(she)計參(can)考。
2、Dribbble-設(she)計類網頁設(she)計模型
參考點：多(duo)資源多(duo)鏈接頁面(mian)布局(ju)
下載地址：//doc.mockplus.cn/wp-content/uploads/2018/04/Dribbble.zip
Dribbble是一個面(mian)向創(chuang)作家、藝術(shu)工作者、設(she)計師等(deng)創(chuang)意類作品的人群的社(she)區(qu)網(wang)站。作為(wei)設(she)計平臺類的佼佼者，此網(wang)頁設(she)計模板很好的展示了如何處理多資源(yuan)多鏈接，圖文結合，圖文鏈接的網(wang)頁排(pai)版模式，是一個非常(chang)值得學(xue)習和參(can)考的優秀模板。可以參(can)考的頁面(mian)有：主頁、設(she)計師頁面(mian)、找工作頁面(mian)等(deng)。
3、BBC-新聞類網頁(ye)設(she)計(ji)模型
參(can)考點：信息(xi)排版布局
下載地址：//doc.mockplus.cn/wp-content/uploads/2018/04/BBC.zip
BBC是(shi)英國最大(da)的(de)新聞廣播機(ji)構，屬(shu)于新聞類的(de)網(wang)站，所(suo)以(yi)網(wang)站沒有過多花(hua)哨的(de)內容，網(wang)站布局以(yi)信息排版為主。可以(yi)參(can)考的(de)頁面(mian)有：主頁、新聞頁面(mian)、天氣頁面(mian)、視頻(pin)頁面(mian)等。
4、Shopify-電子商務類網頁設計模(mo)板
參(can)考點：電子商(shang)務信息(xi)布局
下載地址：//doc.mockplus.cn/wp-content/uploads/2016/12/Shopify.zip
作為(wei)一個典型(xing)的在線電子(zi)商(shang)務(wu)平臺(tai)，Shopify不僅(jin)僅(jin)只(zhi)是提供專(zhuan)業的電子(zi)商(shang)務(wu)網(wang)站建設服務(wu)，同時也開展(zhan)基于(yu)社(she)交(jiao)網(wang)絡(luo)的電子(zi)商(shang)務(wu)，即賣家(jia)通過Shopify在Facebook、Pinterest、Twitter等幾個主流社(she)交(jiao)網(wang)絡(luo)平臺(tai)上就可以開店。
此(ci)網頁(ye)(ye)模型主(zhu)要展示(shi)了登錄頁(ye)(ye)面(mian)、主(zhu)頁(ye)(ye)、銷售方法頁(ye)(ye)面(mian)、價(jia)格頁(ye)(ye)面(mian)、博客頁(ye)(ye)面(mian)等。是制作電(dian)子(zi)商務類網站必看的(de)模板之(zhi)一。
5、edX-教育類網頁(ye)設計模板
參(can)考點：列表視圖布局(ju)
下(xia)載地址：//doc.mockplus.cn/wp-content/uploads/2017/01/edX1.zip
edX是一家(jia)在(zai)線課程提供商，為(wei)世(shi)界各地的學生提供了各種(zhong)學科的在(zai)線大學課程，其(qi)中也包括一些免(mian)費(fei)的課程。整(zheng)個網頁模板(ban)設計元素以圖片(pian)組(zu)件(jian)和(he)文字組(zu)件(jian)為(wei)主，邏(luo)輯清(qing)晰(xi)，簡明直觀。
主(zhu)要頁面有：主(zhu)頁、課(ke)程列表頁面、課(ke)程詳情頁面、程序頁面、關于(yu)頁面。此模板適(shi)用于(yu)教育機構(gou)網站或在(zai)線課(ke)程類網站。課(ke)程介紹頁面的設計思(si)路尤其值(zhi)得學(xue)習。
6、Pexels-圖片素(su)材類網頁設(she)計模板
參考點(dian)：圖片瀑布流設計(ji)
下載(zai)地(di)址：//doc.mockplus.cn/wp-content/uploads/2018/04/Pexels.zip
Pexels是一個高(gao)清圖(tu)(tu)片下(xia)載服務站點，為用(yong)戶提供(gong)海(hai)量共(gong)享圖(tu)(tu)片素(su)材(cai)的網站，每周都會定量更新。網站芒果视(shi)频(pin)下(xia)载采用(yong)懸浮設計，將菜(cai)單欄(lan)和(he)底部欄(lan)都是懸浮在(zai)固定位置，內(nei)容(rong)區域滾(gun)動。芒果视(shi)频(pin)下(xia)载圖(tu)(tu)片排列采用(yong)瀑布流(liu)的方式(shi)，多圖(tu)(tu)片滾(gun)動。包含(han)的頁面有：瀏覽(lan)頁，下(xia)載頁，注冊頁，登陸頁。
PSD透視網站模(mo)型(xing)
擁有透視效果的(de)網站設計模(mo)型可以讓你從不同(tong)角(jiao)度展示(shi)你的(de)設計布局，讓你的(de)設計看起來更像真實的(de)產(chan)品，而不是靜態的(de)模(mo)型。
7、Perspective Website Mockup
參考點：等(deng)距角(jiao)度切(qie)換
下載(zai)地(di)址(zhi)：//dribbble.com/shots/1507002-Perspective-Website-Mockup
該透視網站模型(xing)是個簡(jian)單的(de)模型(xing)，可(ke)以在一(yi)個透視展(zhan)示中展(zhan)示你的(de)作品。這(zhe)個PSD模型(xing)允許你在一(yi)個等距的(de)角度(du)切換(huan)設(she)計。無論您是否需要一(yi)個頁(ye)面或更多的(de)頁(ye)面，您都可(ke)以更改模板中的(de)視圖數量(liang)。
8、Perspective Website PSD Mockup
參(can)考點：智能物體改變側面外觀、背(bei)景
下載地址：
//graphicriver.net/item/perspective-presentation-web-mockup-09/19342170?ref=slidesmash
此案例(li)以絕佳(jia)的(de)(de)獨(du)特視(shi)角演示了網頁設(she)計(ji)模板，多樣化的(de)(de)圖層(ceng)設(she)計(ji)和讓人(ren)眼前一(yi)亮(liang)的(de)(de)視(shi)覺體(ti)驗使(shi)整個設(she)計(ji)充(chong)滿了高(gao)級(ji)感。通過(guo)智能對象(xiang)改(gai)變背景(jing)，即可(ke)自動透視(shi)。
9、The Screens Perspective PSD Mockups
參考點：支持陰影、尺寸調(diao)整
下載地址：//dribbble.com/shots/4034063-Freebie-The-Screens-Perspective-PSD-Mockups
The Screens是(shi)一個Behance和(he)Dribbble上的(de)設(she)計師們用來展示他們的(de)項目的(de)免費PSD模(mo)型模(mo)板。高分辨率(lv)的(de)視覺(jue)效果使其極具現代(dai)風格。作為(wei)一個智(zhi)能(neng)PSD網站透視圖，您(nin)可以輕(qing)松地(di)將(jiang)自己的(de)設(she)計添加到智(zhi)能(neng)圖層中，輕(qing)松實現陰影、尺(chi)寸的(de)調整、屏幕編(bian)輯(ji)，以及自定義背景。
10、Misocial–Free Website PSD Mockup Template
參考(kao)點：智能元(yuan)素(su)+谷歌(ge)字體
下(xia)載地址：//dribbble.com/shots/3400116-MISOCIAL-Free-PSD-Template
MISocial是一個(ge)免費(fei)的音樂網站類PSD模板，在Behance上深受(shou)好評，獲(huo)得(de)大量分享(xiang)。它可以幫助很多人更輕松，更快地創建新網站。
“我(wo)們精心制作了7個網(wang)頁，其中包(bao)(bao)含對開發(fa)新(xin)網(wang)站至關重要的元(yuan)素(su)。這些圖像都是免(mian)費的，并(bing)包(bao)(bao)含在智能對象中。我(wo)們使用的字體是免(mian)費的Google字體。”
11、Free Isometric Website Mockup
參(can)考點：等距(ju)透視
下載(zai)地址：//dribbble.com/shots/2819112-Free-isometric-mock-up-for-website-1280x720px
這個網站(zhan)模(mo)(mo)型(xing)旨在(zai)以(yi)優(you)雅、獨特而有(you)吸引力的(de)方(fang)式展示您的(de)Web截(jie)圖。這個模(mo)(mo)型(xing)由等距(ju)的(de)Smart objects組(zu)成，這樣您就可以(yi)將(jiang)您的(de)獨特設(she)計結(jie)合到2個模(mo)(mo)型(xing)中。這個模(mo)(mo)型(xing)有(you)一個透(tou)視圖，并(bing)且文件是通過智能對(dui)象分(fen)層的(de)，也(ye)就是說你可以(yi)通過自己定制頁面的(de)元(yuan)素來使(shi)用模(mo)(mo)板(ban)。
12、Perspective Presentation Web Mockup
參考點：主題定制
下載地址：
//zippypixels.com/product/mockups/perspective/superb-free-perspective-website-mockup/
這個(ge)模型可以(yi)(yi)提供關于你(ni)的(de)(de)網站設計(ji)中的(de)(de)一(yi)個(ge)視(shi)角(jiao)的(de)(de)特寫。該模板的(de)(de)分辨率(lv)達到(dao)了(le)3000×2000px，可以(yi)(yi)完全分層的(de)(de)智能對象和多變的(de)(de)背景，便(bian)于你(ni)定制不同的(de)(de)主題。它還包(bao)括一(yi)個(ge)預(yu)先設計(ji)好的(de)(de)模板，以(yi)(yi)幫助你(ni)快速入門。
這部分(fen)的(de)內容主要是回(hui)答如何設(she)計(ji)(ji)出(chu)優秀的(de)網頁(ye)(ye)(ye)模型(xing)。關于這個(ge)問題(ti)，主要是取(qu)決于網頁(ye)(ye)(ye)模型(xing)設(she)計(ji)(ji)工具的(de)選(xuan)取(qu)。作(zuo)為前期工作(zuo)，網頁(ye)(ye)(ye)模型(xing)設(she)計(ji)(ji)可低保真，也可高保真，可快速設(she)計(ji)(ji)，也可慢(man)工出(chu)細活(huo)。以下，為大(da)家整理幾個(ge)好用的(de)網頁(ye)(ye)(ye)模型(xing)設(she)計(ji)(ji)工具。
1、Mockplus-簡單快速的網頁模型設計(ji)工具(ju)
作為一款桌面(mian)(mian)端的(de)(de)(de)網頁設計(ji)(ji)工(gong)(gong)具，Mockplus在(zai)(zai)原型/線(xian)框設計(ji)(ji)方面(mian)(mian)也(ye)同樣具有出色(se)的(de)(de)(de)表(biao)現。較其他在(zai)(zai)線(xian)網頁模型設計(ji)(ji)工(gong)(gong)具而言，Mockplus不僅僅是擅長于靜態模型的(de)(de)(de)制作，在(zai)(zai)交互設計(ji)(ji)方面(mian)(mian)也(ye)尤其獨特的(de)(de)(de)無(wu)法比(bi)擬的(de)(de)(de)優勢(shi)。
其最新(xin)發布(bu)的(de)格(ge)子(zi)和數(shu)據自動填充功能(neng)針對多(duo)(duo)圖(tu)(tu)文的(de)網頁布(bu)局案例來說十分便(bian)捷，例如Dribbble。設計師(shi)設計者(zhe)可以快速填充：姓名(ming)、日(ri)期、文本(ben)（句(ju)子(zi)或段落）及(ji)郵箱等(deng)文本(ben)類(lei)型，常(chang)用的(de)頭像（寫(xie)實/卡通(tong)）、辦(ban)公(gong)、美(mei)食及(ji)其他(ta)多(duo)(duo)種多(duo)(duo)樣(yang)主(zhu)題的(de)高清圖(tu)(tu)片。為設計師(shi)省去了(le)大量的(de)查找素材的(de)時間。
2、Moqups-在線網頁(ye)模型設計工具
Moqups是一個非(fei)常好(hao)的、免費的HTML5應用，通過它可(ke)以創建樸素的線框圖、實體模(mo)型和(he)UI概念圖。該程序使用起來非(fei)常簡單，內置的模(mo)板可(ke)以直接使用（模(mo)板包(bao)括單選(xuan)按鈕、鏈接、圖像(xiang)占位符(fu)、文本(ben)框以及滑塊等）。缺(que)點在于它只能制作(zuo)靜態的網頁(ye)展示，不能在實際演示中進行動態的操作(zuo)。
3、Mockingbird-在線(xian)網頁模型設計工具
Mockingbird是另(ling)一個流行(xing)的基于(yu)網絡的線框應用(yong)程序，其(qi)中包含了一些功能強大的功能，用(yong)于(yu)鏈接和分享您的網頁(ye)模型。Mockingbird允許(xu)您使用(yong)拖放編輯器快速創建(jian)界(jie)面。
網易
攜程
蘇寧
愛奇藝
新浪微博
嗶哩嗶哩
唯品會
優酷
芒果TV
搜狐
