網站制作軟件有哪些

1、Dreamweaver

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

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

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

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

2、WebStorm

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

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

3、Frontpage

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

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

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

4、HBuilder

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

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

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

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

5、WampServer

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

不(bu)需(xu)(xu)要(yao)你重(zhong)新安裝(zhuang)這(zhe)些軟(ruan)件(jian)，也不(bu)需(xu)(xu)要(yao)太復雜的配置。

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

6、visualstudio

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

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

7、eclipse

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

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

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

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

優秀的網頁設計模板

免費網頁模型

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

1、Amcharts-工具類網頁模型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

edX是一家在線(xian)課(ke)(ke)程(cheng)提(ti)供商，為世界各地的(de)學生(sheng)提(ti)供了各種學科的(de)在線(xian)大學課(ke)(ke)程(cheng)，其中也包括一些(xie)免(mian)費的(de)課(ke)(ke)程(cheng)。整個網頁模板設計(ji)元(yuan)素以圖片組(zu)件(jian)和(he)文字組(zu)件(jian)為主(zhu)，邏輯(ji)清(qing)晰(xi)，簡明(ming)直觀(guan)。

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

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

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

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

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

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

擁有透(tou)視效果的(de)(de)網(wang)站設(she)計(ji)模型可以讓你從不同(tong)角(jiao)度展示你的(de)(de)設(she)計(ji)布局，讓你的(de)(de)設(she)計(ji)看起(qi)來(lai)更(geng)像真(zhen)實的(de)(de)產品，而(er)不是靜態的(de)(de)模型。

7、Perspective Website Mockup

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

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

該透視(shi)網(wang)站模(mo)型是個簡單(dan)的(de)模(mo)型，可以(yi)在(zai)一個透視(shi)展示中展示你的(de)作品。這個PSD模(mo)型允許你在(zai)一個等距的(de)角度切換設計。無論您(nin)是否需(xu)要一個頁面或更多(duo)的(de)頁面，您(nin)都(dou)可以(yi)更改模(mo)板中的(de)視(shi)圖數(shu)量。

8、Perspective Website PSD Mockup

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

下載地址：

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

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

9、The Screens Perspective PSD Mockups

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

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

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

10、Misocial–Free Website PSD Mockup Template

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

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

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

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

11、Free Isometric Website Mockup

參考點：等距(ju)透視

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

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

12、Perspective Presentation Web Mockup

參考點：主題定制

下載地址：

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

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

網站模型設計工具

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

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

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

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

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

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

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

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