網站制作軟件有哪些

1、Dreamweaver

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

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

它默認支持代(dai)碼模(mo)式(shi)和設計模(mo)式(shi)，也(ye)可以(yi)兩種模(mo)式(shi)同時打開(kai)，方(fang)便即(ji)時的(de)查看網頁效(xiao)果(guo)。

因(yin)為高度集成化，使用它(ta)來(lai)編寫(xie)靜態網頁是非常的方便。

2、WebStorm

毋庸置疑的是(shi)，web storm用來進行(xing)網(wang)頁的前端(duan)開發(fa)是(shi)非常(chang)好(hao)用的。

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

3、Frontpage

frontpage是早(zao)前微軟的產品，目前已(yi)經(jing)停止更新了(le)(le)。不(bu)過它比較簡單，輕便，如果你(ni)不(bu)是太了(le)(le)解網頁，并且你(ni)的電(dian)腦還能夠(gou)安裝這(zhe)個軟件。可(ke)以嘗試使(shi)用它來(lai)制作網頁。

當然(ran)它和dreamweaver一樣，適(shi)用于靜(jing)態(tai)網頁(ye)。

注意：據說frontpage不支持win10系統。

4、HBuilder

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

它可以為你(ni)自動調(diao)節屏幕的(de)顏色(se)，保護你(ni)的(de)眼(yan)睛。

多種(zhong)語(yu)言(yan)支(zhi)持：php、jsp、ruby、python、nodejs等web語(yu)言(yan)

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

5、WampServer

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

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

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

6、visualstudio

visualstudio是(shi)微軟開(kai)(kai)發(fa)并(bing)且程序員使用(yong)比(bi)較多的(de)軟件，可以用(yong)于C/C++，C#等等軟件的(de)開(kai)(kai)發(fa)。

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

7、eclipse

eclipse是基于Java編(bian)寫的程(cheng)序(xu)ide，安裝之前需要安裝jdk并配置好環境(jing)變量。

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

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

同樣(yang)：eclipse是免費使用的。

優秀的網頁設計模板

免費網頁模型

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

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

參考點：登陸界面設計

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

該網站模型(xing)的(de)(de)(de)原型(xing)是(shi)Amcharts公司開發(fa)的(de)(de)(de)JavaScript Charts，是(shi)兼容(rong)性好的(de)(de)(de)JavaScript、HTML5圖(tu)表開發(fa)工具，能(neng)滿足大部分的(de)(de)(de)開發(fa)需求。

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

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

參考(kao)點：多(duo)資源多(duo)鏈接頁面布(bu)局(ju)

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

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

3、BBC-新聞類網頁設計(ji)模(mo)型

參(can)考點(dian)：信息(xi)排版(ban)布(bu)局

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

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

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

參考(kao)點(dian)：電子(zi)商務信息布局

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

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

此網(wang)頁(ye)(ye)模(mo)型主要展示了登錄頁(ye)(ye)面、主頁(ye)(ye)、銷售(shou)方法頁(ye)(ye)面、價格頁(ye)(ye)面、博客頁(ye)(ye)面等。是制作電子(zi)商務類網(wang)站必看(kan)的(de)模(mo)板(ban)之一。

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

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

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

edX是(shi)一家在線課(ke)程(cheng)提供商，為(wei)世界各地的學(xue)生提供了各種學(xue)科的在線大學(xue)課(ke)程(cheng)，其中也包括一些免費的課(ke)程(cheng)。整個網頁(ye)模板設計元(yuan)素(su)以圖片組件(jian)和(he)文字(zi)組件(jian)為(wei)主，邏(luo)輯清晰，簡明(ming)直(zhi)觀(guan)。

主要頁(ye)(ye)(ye)面有：主頁(ye)(ye)(ye)、課(ke)程(cheng)列表頁(ye)(ye)(ye)面、課(ke)程(cheng)詳情(qing)頁(ye)(ye)(ye)面、程(cheng)序頁(ye)(ye)(ye)面、關于頁(ye)(ye)(ye)面。此模板適用于教育機構網站或(huo)在(zai)線課(ke)程(cheng)類網站。課(ke)程(cheng)介紹(shao)頁(ye)(ye)(ye)面的設(she)計思路尤其值得學(xue)習。

6、Pexels-圖(tu)片(pian)素材類網頁設計(ji)模(mo)板

參(can)考點(dian)：圖(tu)片(pian)瀑(pu)布流設計

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

Pexels是(shi)一(yi)個高清圖片(pian)下載(zai)服務(wu)站點，為用(yong)戶(hu)提供海量(liang)共(gong)享圖片(pian)素材的網站，每周都會定(ding)(ding)量(liang)更新(xin)。網站芒果(guo)视(shi)频采用(yong)懸(xuan)浮(fu)設(she)計，將菜單欄和底部欄都是(shi)懸(xuan)浮(fu)在固定(ding)(ding)位置，內容區域滾(gun)(gun)動。芒果(guo)视(shi)频圖片(pian)排列采用(yong)瀑布流(liu)的方式，多圖片(pian)滾(gun)(gun)動。包(bao)含的頁面有：瀏覽頁，下載(zai)頁，注(zhu)冊頁，登陸頁。

PSD透視(shi)網站模型

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

7、Perspective Website Mockup

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

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

該透(tou)視網站模型(xing)(xing)是個(ge)簡單(dan)的(de)(de)(de)模型(xing)(xing)，可以(yi)在(zai)一個(ge)透(tou)視展示(shi)中展示(shi)你的(de)(de)(de)作品(pin)。這個(ge)PSD模型(xing)(xing)允許你在(zai)一個(ge)等距的(de)(de)(de)角(jiao)度(du)切換設(she)計。無論您是否需要一個(ge)頁(ye)(ye)面(mian)或更多的(de)(de)(de)頁(ye)(ye)面(mian)，您都(dou)可以(yi)更改模板中的(de)(de)(de)視圖(tu)數量。

8、Perspective Website PSD Mockup

參考點：智能物體改變側面(mian)外觀(guan)、背(bei)景

下載地址：

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

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

9、The Screens Perspective PSD Mockups

參考點：支持陰(yin)影、尺寸調(diao)整

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

The Screens是一個(ge)Behance和(he)Dribbble上的(de)(de)(de)(de)設計師們用來展(zhan)示他們的(de)(de)(de)(de)項目的(de)(de)(de)(de)免費PSD模型模板。高分辨率的(de)(de)(de)(de)視覺效果使其極具(ju)現(xian)代風格。作為一個(ge)智(zhi)能PSD網站透(tou)視圖(tu)，您可以輕(qing)松地(di)將自己(ji)的(de)(de)(de)(de)設計添加到智(zhi)能圖(tu)層中(zhong)，輕(qing)松實現(xian)陰影、尺寸(cun)的(de)(de)(de)(de)調(diao)整、屏(ping)幕編輯，以及(ji)自定義(yi)背景。

10、Misocial–Free Website PSD Mockup Template

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

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

MISocial是一個免費的音(yin)樂(le)網站類PSD模(mo)板，在Behance上深受好評，獲得大(da)量分享。它(ta)可(ke)以幫(bang)助很多人更(geng)輕松，更(geng)快地創建新網站。

“我(wo)們精心制作了7個網(wang)(wang)頁，其中(zhong)包(bao)含(han)對(dui)開(kai)發新網(wang)(wang)站至關重要(yao)的(de)元素。這些圖像都是免費的(de)，并包(bao)含(han)在智(zhi)能對(dui)象中(zhong)。我(wo)們使用的(de)字體是免費的(de)Google字體。”

11、Free Isometric Website Mockup

參考點(dian)：等距透視

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

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

12、Perspective Presentation Web Mockup

參考點：主(zhu)題定(ding)制

下載地址：

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

這(zhe)個(ge)模(mo)型可(ke)以(yi)提供(gong)關于你的網站設(she)(she)計(ji)中(zhong)的一個(ge)視角的特寫。該模(mo)板的分辨率達到了3000×2000px，可(ke)以(yi)完(wan)全分層的智能對(dui)象和多變的背景，便于你定制(zhi)不同的主題。它還(huan)包括(kuo)一個(ge)預(yu)先設(she)(she)計(ji)好的模(mo)板，以(yi)幫助你快速入門(men)。

網站模型設計工具

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

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

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

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

2、Moqups-在線網頁模型設計工具

Moqups是(shi)一(yi)個非常好(hao)的(de)(de)、免費的(de)(de)HTML5應用，通過它(ta)可以創建樸素的(de)(de)線框(kuang)圖(tu)、實體模(mo)型(xing)和UI概念圖(tu)。該程序使用起來非常簡單，內置的(de)(de)模(mo)板可以直接(jie)使用（模(mo)板包括單選按鈕、鏈接(jie)、圖(tu)像占位符、文本(ben)框(kuang)以及滑(hua)塊等）。缺點在(zai)(zai)于它(ta)只能制作(zuo)靜態(tai)的(de)(de)網(wang)頁(ye)展示(shi)(shi)，不能在(zai)(zai)實際演示(shi)(shi)中進(jin)行動態(tai)的(de)(de)操作(zuo)。

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

Mockingbird是另一個流(liu)行(xing)的(de)(de)基于網絡的(de)(de)線框應(ying)用程序，其中包含了一些功(gong)能強(qiang)大的(de)(de)功(gong)能，用于鏈接(jie)和分享您的(de)(de)網頁(ye)模型。Mockingbird允許您使用拖(tuo)放(fang)編輯(ji)器快速創建界(jie)面。