網站制作軟件有哪些

1、Dreamweaver

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

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

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

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

2、WebStorm

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

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

3、Frontpage

frontpage是早前微軟(ruan)的產品，目前已(yi)經停止更新(xin)了(le)(le)。不過它比(bi)較(jiao)簡單，輕(qing)便，如果你不是太了(le)(le)解網頁(ye)，并且(qie)你的電腦還(huan)能(neng)夠(gou)安裝這(zhe)個軟(ruan)件。可以(yi)嘗試(shi)使用(yong)它來制作(zuo)網頁(ye)。

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

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

4、HBuilder

HBuilder非(fei)常(chang)好用的(de)html5 ide。使用它(ta)來(lai)編寫JavaScript簡直(zhi)如行(xing)云流水。最(zui)重(zhong)要的(de)是，它(ta)是個人免費(fei)(fei)使用的(de)，不像上面的(de)軟件需要授權收費(fei)(fei)。

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

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

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

5、WampServer

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

不(bu)需要(yao)你重新安裝這些軟件，也不(bu)需要(yao)太(tai)復雜的配(pei)置。

如(ru)果你(ni)是創建PHP的動態(tai)網(wang)頁這(zhe)個軟件是必(bi)不可少的。

6、visualstudio

visualstudio是(shi)微軟(ruan)開發(fa)(fa)并且(qie)程序員使用比較多的軟(ruan)件(jian)，可(ke)以用于C/C++，C#等(deng)等(deng)軟(ruan)件(jian)的開發(fa)(fa)。

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

7、eclipse

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

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

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

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

優秀的網頁設計模板

免費網頁模型

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

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

參考(kao)點：登陸(lu)界面(mian)設計(ji)

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

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

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

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

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

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

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

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

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

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

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

4、Shopify-電子商務類網頁設計模板

參考點：電子商務信息布局

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

作為(wei)一個典(dian)型的(de)在線電(dian)子(zi)商務平(ping)臺，Shopify不僅僅只是提(ti)供專業的(de)電(dian)子(zi)商務網站建設(she)服務，同時(shi)也開展基于社交(jiao)網絡(luo)的(de)電(dian)子(zi)商務，即賣家通過Shopify在Facebook、Pinterest、Twitter等幾個主流(liu)社交(jiao)網絡(luo)平(ping)臺上就(jiu)可(ke)以開店。

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

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

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

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

edX是一家在線(xian)課程提供(gong)商，為世界各地的學生提供(gong)了各種學科的在線(xian)大學課程，其中也包括一些免費的課程。整個網(wang)頁(ye)模板設(she)計元素以圖片組件和文字組件為主(zhu)，邏輯清晰，簡明直觀。

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

6、Pexels-圖片(pian)素材類網(wang)頁(ye)設計(ji)模板(ban)

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

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

Pexels是(shi)一個(ge)高(gao)清圖(tu)(tu)片下(xia)載服(fu)務站點，為用(yong)戶(hu)提供海量共(gong)享圖(tu)(tu)片素(su)材的(de)網站，每(mei)周都會定量更新。網站芒(mang)果(guo)视频(pin)下(xia)载采(cai)用(yong)懸浮設計(ji)，將菜單欄(lan)和底部欄(lan)都是(shi)懸浮在固(gu)定位置(zhi)，內容區域滾動。芒(mang)果(guo)视频(pin)下(xia)载圖(tu)(tu)片排列采(cai)用(yong)瀑(pu)布流的(de)方式，多圖(tu)(tu)片滾動。包含的(de)頁面有：瀏覽(lan)頁，下(xia)載頁，注冊頁，登(deng)陸頁。

PSD透(tou)視(shi)網站模型

擁(yong)有透視效果的(de)網站設計(ji)模型可以讓你從不同角(jiao)度(du)展(zhan)示(shi)你的(de)設計(ji)布(bu)局，讓你的(de)設計(ji)看起來更像(xiang)真實的(de)產品，而不是靜(jing)態的(de)模型。

7、Perspective Website Mockup

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

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

該透視(shi)網站(zhan)模(mo)型(xing)(xing)是個(ge)簡單的(de)(de)模(mo)型(xing)(xing)，可(ke)以(yi)在一(yi)個(ge)透視(shi)展(zhan)示中展(zhan)示你的(de)(de)作品。這個(ge)PSD模(mo)型(xing)(xing)允許(xu)你在一(yi)個(ge)等距(ju)的(de)(de)角度切(qie)換設(she)計。無論您是否(fou)需要一(yi)個(ge)頁(ye)面或更(geng)多的(de)(de)頁(ye)面，您都可(ke)以(yi)更(geng)改模(mo)板中的(de)(de)視(shi)圖數量(liang)。

8、Perspective Website PSD Mockup

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

下載地址：

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

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

9、The Screens Perspective PSD Mockups

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

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

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

10、Misocial–Free Website PSD Mockup Template

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

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

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

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

11、Free Isometric Website Mockup

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

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

這(zhe)個(ge)(ge)網站模(mo)(mo)型(xing)旨(zhi)在以(yi)優雅、獨(du)特(te)(te)而有(you)吸引力的(de)(de)方式展示您(nin)的(de)(de)Web截圖。這(zhe)個(ge)(ge)模(mo)(mo)型(xing)由等距的(de)(de)Smart objects組成，這(zhe)樣(yang)您(nin)就可以(yi)將您(nin)的(de)(de)獨(du)特(te)(te)設計結合到2個(ge)(ge)模(mo)(mo)型(xing)中。這(zhe)個(ge)(ge)模(mo)(mo)型(xing)有(you)一個(ge)(ge)透視圖，并且文件是通(tong)過(guo)智能對象分層的(de)(de)，也就是說(shuo)你可以(yi)通(tong)過(guo)自己定制(zhi)頁(ye)面的(de)(de)元素來使(shi)用模(mo)(mo)板(ban)。

12、Perspective Presentation Web Mockup

參考點：主題定(ding)制

下載地址：

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

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

網站模型設計工具

這部分的(de)(de)內(nei)容主要是回答(da)如何設(she)計(ji)(ji)出(chu)優(you)秀(xiu)的(de)(de)網(wang)頁模(mo)(mo)型(xing)。關于這個(ge)(ge)問題，主要是取決(jue)于網(wang)頁模(mo)(mo)型(xing)設(she)計(ji)(ji)工(gong)具(ju)的(de)(de)選取。作(zuo)(zuo)為(wei)(wei)前期工(gong)作(zuo)(zuo)，網(wang)頁模(mo)(mo)型(xing)設(she)計(ji)(ji)可(ke)(ke)低(di)保真(zhen)，也可(ke)(ke)高保真(zhen)，可(ke)(ke)快(kuai)速設(she)計(ji)(ji)，也可(ke)(ke)慢工(gong)出(chu)細活(huo)。以下，為(wei)(wei)大(da)家(jia)整理幾個(ge)(ge)好用的(de)(de)網(wang)頁模(mo)(mo)型(xing)設(she)計(ji)(ji)工(gong)具(ju)。

1、Mockplus-簡單快速的網(wang)頁模型設(she)計工(gong)具

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

其(qi)最新(xin)發(fa)布(bu)的(de)格子和數(shu)據自(zi)動填充功能針對多(duo)圖文的(de)網(wang)頁布(bu)局案例(li)來說十分便捷，例(li)如Dribbble。設(she)(she)計(ji)師(shi)設(she)(she)計(ji)者可以(yi)快速填充：姓名、日期(qi)、文本（句子或段落）及郵箱等文本類型(xing)，常(chang)用的(de)頭像（寫實/卡(ka)通）、辦(ban)公(gong)、美食及其(qi)他多(duo)種多(duo)樣主題的(de)高清圖片。為設(she)(she)計(ji)師(shi)省去了大量(liang)的(de)查找(zhao)素材(cai)的(de)時間。

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

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

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

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