網站制作軟件有哪些

1、Dreamweaver

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

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

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

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

2、WebStorm

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

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

3、Frontpage

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

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

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

4、HBuilder

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

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

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

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

5、WampServer

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

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

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

6、visualstudio

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

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

7、eclipse

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

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

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

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

優秀的網頁設計模板

免費網頁模型

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

1、Amcharts-工具類網頁模型

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

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

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

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

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

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

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

Dribbble是(shi)(shi)一個面向創作(zuo)(zuo)家(jia)、藝術工(gong)作(zuo)(zuo)者、設(she)計師(shi)等創意類作(zuo)(zuo)品的人(ren)群的社區網站。作(zuo)(zuo)為(wei)設(she)計平臺類的佼(jiao)佼(jiao)者，此(ci)網頁(ye)(ye)(ye)設(she)計模板(ban)很好的展示(shi)了如(ru)何處理多(duo)(duo)資(zi)源(yuan)多(duo)(duo)鏈(lian)接，圖文(wen)結合，圖文(wen)鏈(lian)接的網頁(ye)(ye)(ye)排(pai)版(ban)模式(shi)，是(shi)(shi)一個非常值得學習和(he)參考的優(you)秀模板(ban)。可(ke)以參考的頁(ye)(ye)(ye)面有：主(zhu)頁(ye)(ye)(ye)、設(she)計師(shi)頁(ye)(ye)(ye)面、找(zhao)工(gong)作(zuo)(zuo)頁(ye)(ye)(ye)面等。

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

參考點：信(xin)息(xi)排版(ban)布局

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

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

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

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

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

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

此網頁(ye)(ye)模(mo)型(xing)主要展(zhan)示了登錄頁(ye)(ye)面(mian)(mian)、主頁(ye)(ye)、銷售(shou)方法頁(ye)(ye)面(mian)(mian)、價格(ge)頁(ye)(ye)面(mian)(mian)、博(bo)客頁(ye)(ye)面(mian)(mian)等(deng)。是制作(zuo)電(dian)子商務(wu)類網站必看的(de)模(mo)板(ban)之(zhi)一(yi)。

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

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

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

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

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

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

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

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

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

PSD透視(shi)網站(zhan)模型(xing)

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

7、Perspective Website Mockup

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

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

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

8、Perspective Website PSD Mockup

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

下載地址：

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

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

9、The Screens Perspective PSD Mockups

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

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

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

10、Misocial–Free Website PSD Mockup Template

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

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

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

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

11、Free Isometric Website Mockup

參(can)考點：等距透視

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

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

12、Perspective Presentation Web Mockup

參(can)考點：主題定制

下載地址：

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

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

網站模型設計工具

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

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

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

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

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

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

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

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