網站制作軟件有哪些

1、Dreamweaver

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

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

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

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

2、WebStorm

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

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

3、Frontpage

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

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

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

4、HBuilder

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

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

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

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

5、WampServer

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

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

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

6、visualstudio

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

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

7、eclipse

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

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

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

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

優秀的網頁設計模板

免費網頁模型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考點：電(dian)子商務(wu)信息布(bu)局(ju)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7、Perspective Website Mockup

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

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

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

8、Perspective Website PSD Mockup

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

下載地址：

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

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

9、The Screens Perspective PSD Mockups

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

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

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

10、Misocial–Free Website PSD Mockup Template

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

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

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

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

11、Free Isometric Website Mockup

參(can)考點：等距透視

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

這個(ge)(ge)(ge)網(wang)站模(mo)(mo)型(xing)旨(zhi)在以優雅(ya)、獨特而(er)有吸引(yin)力的(de)方(fang)式展示您(nin)的(de)Web截(jie)圖。這個(ge)(ge)(ge)模(mo)(mo)型(xing)由等距(ju)的(de)Smart objects組(zu)成，這樣您(nin)就可以將(jiang)您(nin)的(de)獨特設計(ji)結合到(dao)2個(ge)(ge)(ge)模(mo)(mo)型(xing)中。這個(ge)(ge)(ge)模(mo)(mo)型(xing)有一(yi)個(ge)(ge)(ge)透視(shi)圖，并且文件(jian)是通過智(zhi)能(neng)對象分(fen)層的(de)，也就是說你(ni)可以通過自己定(ding)制頁面的(de)元素來使用模(mo)(mo)板。

12、Perspective Presentation Web Mockup

參(can)考點(dian)：主題定(ding)制

下載地址：

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

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

網站模型設計工具

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

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

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

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

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

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

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

Mockingbird是另一個流(liu)行的基于網絡的線(xian)框應用程(cheng)序(xu)，其中包含了一些(xie)功能強大的功能，用于鏈接(jie)和(he)分享您(nin)的網頁(ye)模型。Mockingbird允(yun)許您(nin)使用拖放編輯(ji)器快速創(chuang)建界面。