網站制作軟件有哪些

1、Dreamweaver

就目前來說，使用最多的靜態網(wang)站的制(zhi)作工(gong)具有dream weaver，軟件(jian)直接百度就可以(yi)找到并下(xia)載了。

經(jing)過重新設計的ui dream weaver更加的好用。

它默認支(zhi)持(chi)代(dai)碼模(mo)(mo)式和設計模(mo)(mo)式，也可以兩種模(mo)(mo)式同時(shi)打開，方便即時(shi)的查看網頁效果。

因為(wei)高度(du)集(ji)成化，使用它來編寫靜態(tai)網頁是非常(chang)的(de)方便。

2、WebStorm

毋庸置疑的(de)是，web storm用來進行網頁的(de)前(qian)端開發是非(fei)常好用的(de)。

它適用動(dong)態網(wang)頁的開發。

3、Frontpage

frontpage是早前微軟的產品，目前已經停止(zhi)更新了(le)。不(bu)(bu)過它(ta)比較簡單，輕(qing)便，如(ru)果你(ni)不(bu)(bu)是太了(le)解(jie)網頁，并且你(ni)的電腦還能夠安(an)裝(zhuang)這個軟件(jian)。可以嘗試使用(yong)它(ta)來制作網頁。

當然它和dreamweaver一樣(yang)，適用于(yu)靜態網頁。

注(zhu)意：據說(shuo)frontpage不支持win10系統。

4、HBuilder

HBuilder非常好用(yong)的html5 ide。使用(yong)它來編(bian)寫JavaScript簡直如行(xing)云流水。最重要的是，它是個人免費使用(yong)的，不(bu)像上面的軟件需(xu)要授權收費。

它可(ke)以為你(ni)自動(dong)調節屏(ping)幕的顏色，保護(hu)你(ni)的眼(yan)睛(jing)。

多種語言支持：php、jsp、ruby、python、nodejs等web語言

該圖片由注冊用戶"溫暖·生活家"提供，版權聲明反饋

5、WampServer

WampServer用(yong)于一鍵啟動各種PHP后端服務器，Mysql數據庫等服務。

不需(xu)要你重新(xin)安裝這些軟件，也不需(xu)要太復雜的(de)配置。

如果你是(shi)創建PHP的(de)動態網頁(ye)這個軟(ruan)件是(shi)必(bi)不可少(shao)的(de)。

6、visualstudio

visualstudio是微軟(ruan)開發并(bing)且程(cheng)序員(yuan)使用(yong)比較多的軟(ruan)件，可以用(yong)于C/C++，C#等(deng)等(deng)軟(ruan)件的開發。

如果你想要編寫asp.net動態(tai)網頁，也(ye)可以(yi)使用這個軟件進行開發。

7、eclipse

eclipse是基于Java編寫的程序ide，安裝(zhuang)之前需要(yao)安裝(zhuang)jdk并(bing)配置好(hao)環(huan)境(jing)變量。

如果你(ni)以為(wei)eclipse只能寫寫java,c,c++的，那么你(ni)就錯了。

同樣的(de)它(ta)支持python，php等(deng)腳本(ben)語言的(de)開發，并支持綁定(ding)瀏覽器調試。

同樣：eclipse是(shi)免(mian)費使用的(de)。

優秀的網頁設計模板

免費網頁模型

在參考階(jie)段，免(mian)費的網頁(ye)模型往往是初學(xue)者的首選。毫不猶豫，我們為大家奉上一批免(mian)費的網頁(ye)模型案例，拿走(zou)不謝！

1、Amcharts-工具類網(wang)頁模(mo)型(xing)

參考點(dian)：登陸界面(mian)設計

下載地址：//doc.mockplus.cn/wp-content/uploads/2018/04/Amcharts.zip

該網站(zhan)模型的原型是Amcharts公司開(kai)發的JavaScript Charts，是兼容性好的JavaScript、HTML5圖表開(kai)發工具，能滿足大部(bu)分的開(kai)發需求。

此模板(ban)中有Products，Download，Support，Buy，Demos等5個頁(ye)面，網站設(she)計采用了(le)懸浮(fu)導航欄和footer的效果(guo)，可用于訂單購買，登(deng)陸，圖標展(zhan)示等網頁(ye)界面設(she)計參(can)考。

2、Dribbble-設計類網(wang)頁設計模型(xing)

參(can)考(kao)點：多資源多鏈(lian)接頁面(mian)布局

下載地址：//doc.mockplus.cn/wp-content/uploads/2018/04/Dribbble.zip

Dribbble是(shi)一(yi)個面(mian)向創作(zuo)(zuo)(zuo)家、藝術工(gong)作(zuo)(zuo)(zuo)者、設計(ji)師(shi)(shi)等創意(yi)類(lei)作(zuo)(zuo)(zuo)品(pin)的(de)(de)人(ren)群的(de)(de)社區網(wang)站。作(zuo)(zuo)(zuo)為設計(ji)平臺類(lei)的(de)(de)佼佼者，此網(wang)頁(ye)設計(ji)模(mo)(mo)板(ban)很好的(de)(de)展示了如何處理多(duo)資(zi)源多(duo)鏈接(jie)，圖(tu)文結合，圖(tu)文鏈接(jie)的(de)(de)網(wang)頁(ye)排版模(mo)(mo)式，是(shi)一(yi)個非常值得學習和參考的(de)(de)優秀模(mo)(mo)板(ban)。可以參考的(de)(de)頁(ye)面(mian)有：主頁(ye)、設計(ji)師(shi)(shi)頁(ye)面(mian)、找(zhao)工(gong)作(zuo)(zuo)(zuo)頁(ye)面(mian)等。

3、BBC-新聞類網頁設計模型

參考(kao)點：信息排版布局(ju)

下(xia)載地址：//doc.mockplus.cn/wp-content/uploads/2018/04/BBC.zip

BBC是英國最大的(de)(de)(de)新聞廣播機(ji)構，屬(shu)于新聞類的(de)(de)(de)網(wang)站，所以網(wang)站沒有過多花哨的(de)(de)(de)內容，網(wang)站布局以信息排版(ban)為主。可以參考的(de)(de)(de)頁(ye)(ye)面有：主頁(ye)(ye)、新聞頁(ye)(ye)面、天(tian)氣頁(ye)(ye)面、視頻頁(ye)(ye)面等。

4、Shopify-電(dian)子商務(wu)類網頁設計模板

參(can)考點(dian)：電(dian)子商務信(xin)息布局

下載(zai)地址：//doc.mockplus.cn/wp-content/uploads/2016/12/Shopify.zip

作為一個(ge)典型的在(zai)線電(dian)子(zi)商(shang)務平臺(tai)，Shopify不僅(jin)僅(jin)只(zhi)是提供專(zhuan)業的電(dian)子(zi)商(shang)務網站建設服(fu)務，同(tong)時(shi)也(ye)開展(zhan)基于社交網絡的電(dian)子(zi)商(shang)務，即賣(mai)家(jia)通(tong)過Shopify在(zai)Facebook、Pinterest、Twitter等幾個(ge)主流社交網絡平臺(tai)上就可以開店。

此網頁(ye)(ye)模型(xing)主(zhu)要(yao)展示了登錄頁(ye)(ye)面、主(zhu)頁(ye)(ye)、銷售方法頁(ye)(ye)面、價(jia)格頁(ye)(ye)面、博客(ke)頁(ye)(ye)面等。是制作(zuo)電子商務(wu)類網站必(bi)看的模板(ban)之一。

5、edX-教育類(lei)網頁設計模板

參考點：列(lie)表視圖布局

下(xia)載地址：//doc.mockplus.cn/wp-content/uploads/2017/01/edX1.zip

edX是一(yi)家在(zai)線課程提(ti)供商，為(wei)世界各地的(de)(de)學生提(ti)供了各種學科的(de)(de)在(zai)線大學課程，其中也包(bao)括一(yi)些免費(fei)的(de)(de)課程。整個(ge)網(wang)頁模板設計元素以圖片(pian)組件和文(wen)字組件為(wei)主，邏輯(ji)清晰，簡明(ming)直觀。

主(zhu)要頁(ye)面有：主(zhu)頁(ye)、課(ke)(ke)(ke)程列(lie)表頁(ye)面、課(ke)(ke)(ke)程詳(xiang)情(qing)頁(ye)面、程序頁(ye)面、關(guan)于頁(ye)面。此(ci)模板適用于教育機構網站(zhan)或在線課(ke)(ke)(ke)程類網站(zhan)。課(ke)(ke)(ke)程介紹頁(ye)面的設計思路尤其值(zhi)得學習。

6、Pexels-圖片素材類網頁設計模板

參考點：圖片瀑布流設(she)計(ji)

下載地址：//doc.mockplus.cn/wp-content/uploads/2018/04/Pexels.zip

Pexels是一(yi)個(ge)高清圖(tu)片下載服務站(zhan)點，為用戶提供海量共享圖(tu)片素材的網(wang)(wang)站(zhan)，每周都(dou)會定(ding)量更(geng)新。網(wang)(wang)站(zhan)芒果视(shi)频(pin)(pin)下载采用懸浮(fu)設計，將菜單(dan)欄和底(di)部欄都(dou)是懸浮(fu)在固定(ding)位置，內(nei)容區域(yu)滾動。芒果视(shi)频(pin)(pin)下载圖(tu)片排(pai)列(lie)采用瀑布流的方式，多圖(tu)片滾動。包(bao)含的頁(ye)(ye)面有：瀏(liu)覽頁(ye)(ye)，下載頁(ye)(ye)，注冊(ce)頁(ye)(ye)，登陸頁(ye)(ye)。

PSD透視(shi)網(wang)站(zhan)模型

擁(yong)有透視效(xiao)果的(de)(de)網站設計模型(xing)可以讓(rang)你(ni)從(cong)不同角度(du)展示你(ni)的(de)(de)設計布局，讓(rang)你(ni)的(de)(de)設計看起(qi)來更像真實(shi)的(de)(de)產品(pin)，而不是(shi)靜態的(de)(de)模型(xing)。

7、Perspective Website Mockup

參考點(dian)：等距角度切換

下載(zai)地址：//dribbble.com/shots/1507002-Perspective-Website-Mockup

該透(tou)視網(wang)站模型(xing)是(shi)個(ge)簡單(dan)的模型(xing)，可(ke)以(yi)在一個(ge)透(tou)視展示中展示你的作(zuo)品。這個(ge)PSD模型(xing)允許你在一個(ge)等距的角度切換(huan)設計(ji)。無(wu)論(lun)您(nin)是(shi)否(fou)需要(yao)一個(ge)頁(ye)面或更多的頁(ye)面，您(nin)都(dou)可(ke)以(yi)更改(gai)模板中的視圖數量。

8、Perspective Website PSD Mockup

參考點：智能物體改(gai)變側面外(wai)觀、背景

下載地址：

//graphicriver.net/item/perspective-presentation-web-mockup-09/19342170?ref=slidesmash

此案例以絕佳的獨特視角(jiao)演示(shi)了網頁設計(ji)模板(ban)，多樣化的圖層設計(ji)和讓人眼前(qian)一(yi)亮的視覺體驗使整個設計(ji)充滿了高級感(gan)。通過(guo)智能對(dui)象改變背(bei)景，即可自(zi)動透視。

9、The Screens Perspective PSD Mockups

參(can)考點：支持(chi)陰影、尺(chi)寸(cun)調整

下載地址：//dribbble.com/shots/4034063-Freebie-The-Screens-Perspective-PSD-Mockups

The Screens是一個Behance和Dribbble上(shang)的(de)設計師(shi)們(men)用來(lai)展(zhan)示(shi)他們(men)的(de)項目(mu)的(de)免(mian)費PSD模(mo)型(xing)模(mo)板。高(gao)分(fen)辨率(lv)的(de)視(shi)覺效(xiao)果使其極具現代風格。作為一個智(zhi)能PSD網(wang)站(zhan)透(tou)視(shi)圖(tu)，您可以輕松(song)(song)地將自己的(de)設計添加(jia)到智(zhi)能圖(tu)層(ceng)中，輕松(song)(song)實現陰影、尺寸(cun)的(de)調整(zheng)、屏幕編輯，以及自定(ding)義背景。

10、Misocial–Free Website PSD Mockup Template

參考點：智能元素+谷歌字(zi)體(ti)

下載地址(zhi)：//dribbble.com/shots/3400116-MISOCIAL-Free-PSD-Template

MISocial是一(yi)個免費的音樂網站(zhan)類PSD模板(ban)，在Behance上(shang)深受好(hao)評，獲得(de)大(da)量分享。它可以幫助很多人(ren)更輕松，更快地創建新網站(zhan)。

“我們精心制作了7個(ge)網頁，其(qi)中包(bao)含(han)對開發新網站至關重要的(de)元素(su)。這些圖(tu)像都是免(mian)費(fei)的(de)，并包(bao)含(han)在智能(neng)對象中。我們使用的(de)字(zi)體是免(mian)費(fei)的(de)Google字(zi)體。”

11、Free Isometric Website Mockup

參考點(dian)：等距透視(shi)

下載地址：//dribbble.com/shots/2819112-Free-isometric-mock-up-for-website-1280x720px

這個網站模型旨在以優雅、獨特而(er)有吸引力的(de)方式展示您(nin)的(de)Web截圖(tu)(tu)。這個模型由等距的(de)Smart objects組成，這樣您(nin)就可(ke)以將您(nin)的(de)獨特設計結合到(dao)2個模型中。這個模型有一個透視圖(tu)(tu)，并且文件是通過(guo)智(zhi)能對象(xiang)分層(ceng)的(de)，也就是說你(ni)可(ke)以通過(guo)自(zi)己定制(zhi)頁面的(de)元素來使用模板。

12、Perspective Presentation Web Mockup

參考點：主題定(ding)制

下載地址：

//zippypixels.com/product/mockups/perspective/superb-free-perspective-website-mockup/

這個(ge)模型可以(yi)提供關于你(ni)的網站設計中的一個(ge)視角的特寫。該模板(ban)的分(fen)辨率(lv)達到了3000×2000px，可以(yi)完全分(fen)層(ceng)的智能對象(xiang)和多變的背景(jing)，便于你(ni)定制不同的主題。它還包括(kuo)一個(ge)預先設計好的模板(ban)，以(yi)幫助你(ni)快(kuai)速入門。

網站模型設計工具

這(zhe)部分的內容主(zhu)要是回答如何設(she)計(ji)出優秀的網(wang)頁(ye)(ye)模型(xing)。關于(yu)這(zhe)個問題，主(zhu)要是取(qu)決于(yu)網(wang)頁(ye)(ye)模型(xing)設(she)計(ji)工(gong)(gong)具的選取(qu)。作為(wei)前(qian)期(qi)工(gong)(gong)作，網(wang)頁(ye)(ye)模型(xing)設(she)計(ji)可(ke)低保真(zhen)，也可(ke)高保真(zhen)，可(ke)快速設(she)計(ji)，也可(ke)慢工(gong)(gong)出細活。以(yi)下，為(wei)大家整理幾個好用的網(wang)頁(ye)(ye)模型(xing)設(she)計(ji)工(gong)(gong)具。

1、Mockplus-簡單(dan)快速的網(wang)頁(ye)模型(xing)設計(ji)工具

作為一款桌面端的(de)網(wang)頁(ye)設(she)計工具，Mockplus在原型(xing)/線框設(she)計方面也(ye)同樣具有出(chu)色的(de)表現(xian)。較其(qi)他在線網(wang)頁(ye)模型(xing)設(she)計工具而言(yan)，Mockplus不僅(jin)僅(jin)是擅長于靜態模型(xing)的(de)制作，在交互設(she)計方面也(ye)尤其(qi)獨特的(de)無法比擬的(de)優勢。

其(qi)最新發布的格子和數(shu)據自動填(tian)充功能(neng)針(zhen)對多圖文的網頁布局案例來(lai)說十分便(bian)捷(jie)，例如(ru)Dribbble。設計師(shi)設計者可以快速填(tian)充：姓(xing)名、日(ri)期、文本（句(ju)子或段落）及郵箱等文本類型，常用的頭(tou)像（寫實/卡通）、辦公(gong)、美(mei)食及其(qi)他多種多樣主題(ti)的高清圖片。為設計師(shi)省去了大量的查(cha)找素材的時(shi)間。

2、Moqups-在線網頁模型設計(ji)工(gong)具

Moqups是一個非常好的(de)(de)、免費的(de)(de)HTML5應用(yong)(yong)，通過它(ta)可以創建樸素的(de)(de)線(xian)框圖、實體(ti)模型和UI概念圖。該程(cheng)序(xu)使用(yong)(yong)起來(lai)非常簡(jian)單(dan)，內(nei)置的(de)(de)模板可以直接(jie)使用(yong)(yong)（模板包括單(dan)選按鈕、鏈接(jie)、圖像(xiang)占位符(fu)、文本(ben)框以及滑塊(kuai)等）。缺點在于它(ta)只(zhi)能制作靜態(tai)的(de)(de)網頁展示，不能在實際演(yan)示中進行(xing)動態(tai)的(de)(de)操(cao)作。

3、Mockingbird-在線網(wang)頁(ye)模型設計工(gong)具(ju)

Mockingbird是另一個流行的(de)基于(yu)(yu)網(wang)絡的(de)線框應用程序，其(qi)中包含了一些功能強大的(de)功能，用于(yu)(yu)鏈接和分享您的(de)網(wang)頁模型。Mockingbird允許您使用拖放編輯器快速創(chuang)建(jian)界(jie)面(mian)。