網站制作軟件有哪些

1、Dreamweaver

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

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

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

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

2、WebStorm

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

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

3、Frontpage

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

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

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

4、HBuilder

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

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

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

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

5、WampServer

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

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

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

6、visualstudio

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

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

7、eclipse

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

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

同(tong)樣的它支持python，php等(deng)腳本(ben)語言的開發，并支持綁定瀏(liu)覽(lan)器調試。

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

優秀的網頁設計模板

免費網頁模型

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

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

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

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

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

此模板(ban)中(zhong)有(you)Products，Download，Support，Buy，Demos等(deng)5個頁面，網(wang)站設(she)計采用了懸(xuan)浮導航(hang)欄和footer的(de)效(xiao)果，可用于(yu)訂單(dan)購買，登陸，圖標展示等(deng)網(wang)頁界(jie)面設(she)計參考(kao)。

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

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

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

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

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

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

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

BBC是英(ying)國最大的(de)(de)(de)新(xin)聞(wen)廣播機構，屬于(yu)新(xin)聞(wen)類的(de)(de)(de)網(wang)(wang)站(zhan)(zhan)，所以(yi)網(wang)(wang)站(zhan)(zhan)沒(mei)有(you)過(guo)多花(hua)哨(shao)的(de)(de)(de)內容，網(wang)(wang)站(zhan)(zhan)布局以(yi)信息排版為主。可以(yi)參(can)考的(de)(de)(de)頁(ye)(ye)面有(you)：主頁(ye)(ye)、新(xin)聞(wen)頁(ye)(ye)面、天氣頁(ye)(ye)面、視(shi)頻頁(ye)(ye)面等。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

PSD透視網站模(mo)型

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

7、Perspective Website Mockup

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

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

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

8、Perspective Website PSD Mockup

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

下載地址：

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

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

9、The Screens Perspective PSD Mockups

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

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

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

10、Misocial–Free Website PSD Mockup Template

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

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

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

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

11、Free Isometric Website Mockup

參考點：等距透視

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

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

12、Perspective Presentation Web Mockup

參考點：主題定(ding)制

下載地址：

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

這(zhe)個模型可(ke)以提供關于(yu)你(ni)的(de)(de)(de)網(wang)站(zhan)設(she)計中的(de)(de)(de)一個視角(jiao)的(de)(de)(de)特(te)寫(xie)。該(gai)模板(ban)的(de)(de)(de)分辨率達到了3000×2000px，可(ke)以完全分層(ceng)的(de)(de)(de)智能(neng)對象和(he)多變的(de)(de)(de)背(bei)景，便于(yu)你(ni)定制不同的(de)(de)(de)主題。它還包括一個預先設(she)計好的(de)(de)(de)模板(ban)，以幫助你(ni)快(kuai)速入門。

網站模型設計工具

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

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

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

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

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

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

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

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