網站制作軟件有哪些

1、Dreamweaver

就目前(qian)來(lai)說，使(shi)用(yong)最多的(de)靜態網(wang)站的(de)制作工具(ju)有dream weaver，軟件直(zhi)接(jie)百(bai)度就可(ke)以找到并下載了。

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

它(ta)默認支(zhi)持代碼模(mo)式和設(she)計(ji)模(mo)式，也(ye)可以(yi)兩種模(mo)式同時打(da)開，方便即(ji)時的查看網(wang)頁效果。

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

2、WebStorm

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

它適(shi)用動態網(wang)頁(ye)的開(kai)發(fa)。

3、Frontpage

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

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

注意：據(ju)說frontpage不(bu)支持(chi)win10系統。

4、HBuilder

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

它可以為(wei)你自動調節屏(ping)幕的顏色，保(bao)護你的眼睛。

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

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

5、WampServer

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

不需要你(ni)重新安裝這些軟件(jian)，也不需要太復(fu)雜的配置(zhi)。

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

6、visualstudio

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

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

7、eclipse

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

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

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

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

優秀的網頁設計模板

免費網頁模型

在參考階段，免費的(de)(de)網頁模(mo)型(xing)往(wang)往(wang)是初(chu)學者(zhe)的(de)(de)首(shou)選。毫不猶豫，我們為大家奉(feng)上(shang)一批免費的(de)(de)網頁模(mo)型(xing)案(an)例(li)，拿走不謝！

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

參考(kao)點：登陸界(jie)面設(she)計(ji)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作為一個(ge)典型的在線電子商務平臺(tai)，Shopify不僅(jin)僅(jin)只是提供專業的電子商務網(wang)站建(jian)設服務，同時也(ye)開(kai)展基(ji)于(yu)社交網(wang)絡的電子商務，即賣家通過(guo)Shopify在Facebook、Pinterest、Twitter等幾個(ge)主(zhu)流社交網(wang)絡平臺(tai)上就(jiu)可(ke)以開(kai)店。

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

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

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

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

edX是一家在線課(ke)程提(ti)供商，為世界各地的學生(sheng)提(ti)供了各種(zhong)學科(ke)的在線大學課(ke)程，其(qi)中(zhong)也包括一些免費的課(ke)程。整個網頁模板(ban)設計元素以(yi)圖(tu)片組件和文字組件為主，邏輯清晰，簡(jian)明(ming)直觀。

主要頁(ye)(ye)面(mian)有：主頁(ye)(ye)、課程(cheng)(cheng)列表頁(ye)(ye)面(mian)、課程(cheng)(cheng)詳情(qing)頁(ye)(ye)面(mian)、程(cheng)(cheng)序頁(ye)(ye)面(mian)、關于(yu)頁(ye)(ye)面(mian)。此模(mo)板適用于(yu)教育機構(gou)網站或在線課程(cheng)(cheng)類(lei)網站。課程(cheng)(cheng)介(jie)紹頁(ye)(ye)面(mian)的設計思路尤其值(zhi)得學習。

6、Pexels-圖片(pian)素材(cai)類(lei)網頁設計模板

參考點：圖片瀑布流設計

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

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

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

擁有透視效果(guo)的網站(zhan)設計模型(xing)可以讓你(ni)從不同角度展示你(ni)的設計布局，讓你(ni)的設計看(kan)起來(lai)更像真實的產(chan)品，而不是靜態(tai)的模型(xing)。

7、Perspective Website Mockup

參(can)考(kao)點：等(deng)距角度(du)切換

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

該透視(shi)網站模型是個(ge)(ge)簡(jian)單的(de)模型，可以在一個(ge)(ge)透視(shi)展(zhan)(zhan)示(shi)中(zhong)展(zhan)(zhan)示(shi)你的(de)作品。這個(ge)(ge)PSD模型允許你在一個(ge)(ge)等(deng)距(ju)的(de)角度切(qie)換設計(ji)。無(wu)論(lun)您(nin)是否需要一個(ge)(ge)頁面(mian)或更多的(de)頁面(mian)，您(nin)都可以更改(gai)模板中(zhong)的(de)視(shi)圖(tu)數(shu)量。

8、Perspective Website PSD Mockup

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

下載地址：

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

此案例(li)以絕佳(jia)的(de)獨特視角演(yan)示了網頁設(she)(she)計模板，多樣化的(de)圖(tu)層設(she)(she)計和讓人(ren)眼前一亮(liang)的(de)視覺體驗使整個設(she)(she)計充滿了高級(ji)感。通過智能對象改(gai)變(bian)背(bei)景，即可自動透視。

9、The Screens Perspective PSD Mockups

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

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

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

10、Misocial–Free Website PSD Mockup Template

參考(kao)點(dian)：智能元(yuan)素+谷歌字體

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

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

“我們精(jing)心制作(zuo)了7個(ge)網頁(ye)，其中包含對(dui)開(kai)發新網站至關(guan)重要的元素。這些圖(tu)像都是免費的，并包含在智(zhi)能對(dui)象中。我們使用的字體(ti)是免費的Google字體(ti)。”

11、Free Isometric Website Mockup

參考點：等(deng)距透視

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

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

12、Perspective Presentation Web Mockup

參考點(dian)：主題定制

下載地址：

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

這(zhe)個(ge)(ge)模型可(ke)(ke)以(yi)提供關于你的(de)(de)網站設計中的(de)(de)一個(ge)(ge)視角(jiao)的(de)(de)特寫。該模板(ban)的(de)(de)分(fen)(fen)辨率達到了3000×2000px，可(ke)(ke)以(yi)完全(quan)分(fen)(fen)層的(de)(de)智能對(dui)象(xiang)和(he)多變的(de)(de)背景，便(bian)于你定制(zhi)不(bu)同(tong)的(de)(de)主題。它(ta)還包括一個(ge)(ge)預(yu)先設計好的(de)(de)模板(ban)，以(yi)幫助你快速入(ru)門。

網站模型設計工具

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

1、Mockplus-簡(jian)單(dan)快(kuai)速(su)的(de)網頁模型設計工具

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

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

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

Moqups是一個非常(chang)好的(de)(de)、免(mian)費的(de)(de)HTML5應(ying)用(yong)，通過它可(ke)以創建樸素的(de)(de)線(xian)框圖(tu)、實體模(mo)型和UI概(gai)念圖(tu)。該程序使用(yong)起(qi)來非常(chang)簡單(dan)(dan)，內(nei)置的(de)(de)模(mo)板可(ke)以直接(jie)(jie)使用(yong)（模(mo)板包括(kuo)單(dan)(dan)選按(an)鈕、鏈接(jie)(jie)、圖(tu)像(xiang)占位符、文本框以及(ji)滑塊等(deng)）。缺點在于它只能制作靜態的(de)(de)網頁展(zhan)示(shi)，不(bu)能在實際演示(shi)中進行動(dong)態的(de)(de)操作。

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

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