金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器是一款簡(jiǎn)單易上手的網(wǎng)頁(yè)設(shè)計(jì)工具，軟件有著簡(jiǎn)便的使用界面，無需用戶學(xué)習(xí)html語(yǔ)言，僅通過圖形化的界面即可快速高效的完成網(wǎng)頁(yè)的設(shè)計(jì)工作。在軟件中內(nèi)置了豐富的常用控件，用戶通過添加并將其放置在所需的位置即可輕松的達(dá)成所需的效果。軟件中還支持對(duì)設(shè)計(jì)的網(wǎng)頁(yè)進(jìn)行預(yù)覽，支持在不同的瀏覽器中進(jìn)行查看，以檢查瀏覽器是否支持用戶使用的內(nèi)容。

軟件功能

1.拖拉控件方式設(shè)計(jì)網(wǎng)頁(yè)，大大簡(jiǎn)化對(duì)源碼管理，基本不用關(guān)心源碼。

2.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器內(nèi)置了大量常用的控件，如文本框、輸入框、按鈕、表單、面板、圖片、SVG圖片、復(fù)選框、單選框等等。

3.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器可以設(shè)計(jì)電腦網(wǎng)頁(yè)和移動(dòng)（平板電腦、手機(jī)）網(wǎng)頁(yè)。

4.同一網(wǎng)頁(yè)可以讓電腦端和移動(dòng)端設(shè)備（平板電腦設(shè)備、手機(jī)設(shè)備）同時(shí)適應(yīng)。

5.同一網(wǎng)頁(yè)可以按分辨率大?。ǔ箫@示設(shè)備、電腦顯示設(shè)備、平板電腦設(shè)備、手機(jī)設(shè)備）自適應(yīng)，即同一控件可以分別在這四種設(shè)備下適應(yīng)(本站就是這種情況)。

6.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器幾乎每個(gè)控件都可以設(shè)置加載動(dòng)畫，讓你的網(wǎng)頁(yè)更具動(dòng)感，如本站網(wǎng)頁(yè)就具此功能。

7.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器內(nèi)置了顏色生成器，讓網(wǎng)頁(yè)設(shè)計(jì)元素多姿多彩。

8.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器內(nèi)置二維碼控件，拖到模板中即可使用。

9.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器提供了表格面板控件，可以非常方便實(shí)現(xiàn)九宮格。

10.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器提供了各種分享功能，如分享到新浪微博、微信、QQ空間等。

11.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器不但定制了多種滾動(dòng)條樣式，還可以自定義滾動(dòng)條顏色、大小等，無需另寫代碼。

12.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器提供插入網(wǎng)頁(yè)模板控件，可以在任何網(wǎng)頁(yè)任何位置中插入模板，非常方便。

13.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器的圖片控件可以隨著父控件大小自動(dòng)調(diào)整（分按原始比例和設(shè)計(jì)時(shí)寬高比例大小調(diào)整，如果不調(diào)整可能會(huì)超出父控件大?。梢詫?shí)現(xiàn)同一圖片，在手機(jī)和電腦等設(shè)備下瀏覽都能自適應(yīng)，無須特別處理。

14.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器支持控件旋轉(zhuǎn)、控件可移動(dòng)、控件轉(zhuǎn)角、邊框顏色、邊框大小、邊框陰影、光標(biāo)動(dòng)作、邊距、可見度、可見等設(shè)置。

15.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器集成了LayUI大部分控件。

16.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器支持響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，一次設(shè)計(jì)，多設(shè)備如手機(jī)、電腦、大屏設(shè)備自動(dòng)適應(yīng)瀏覽。

17.金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器集成了WeUI大部分控件。

軟件特色

做網(wǎng)頁(yè)，從這里開始，

一切都將變得如此簡(jiǎn)單!

你不需要專業(yè)的網(wǎng)頁(yè)知識(shí)，

便能設(shè)計(jì)出如此專業(yè)漂亮的網(wǎng)頁(yè)!

總結(jié)當(dāng)前流行網(wǎng)站風(fēng)格，

抽象開發(fā)成簡(jiǎn)單易用的控件!

所見即所得的傻瓜式的設(shè)計(jì)模式，

讓你在最短的時(shí)間內(nèi)設(shè)計(jì)出所需的網(wǎng)頁(yè)

簡(jiǎn)潔的界面，操作上手更容易!

如何開始第一個(gè)網(wǎng)站

1.先建一個(gè)工程。如下圖點(diǎn)擊紅框中的“創(chuàng)建工程”按鈕：

點(diǎn)擊“創(chuàng)建工程”后，會(huì)彈出一個(gè)選擇文件夾的窗口，選擇新建工程所在的文件夾，再填上工程名稱，點(diǎn)確定后就創(chuàng)建一個(gè)工程了。

2.創(chuàng)建一個(gè)網(wǎng)頁(yè)。

如下圖點(diǎn)擊紅框中的“創(chuàng)建網(wǎng)頁(yè)”按鈕：

點(diǎn)擊“創(chuàng)建網(wǎng)頁(yè)”后，會(huì)彈出一個(gè)要求輸入網(wǎng)頁(yè)名稱的對(duì)話框，填上網(wǎng)頁(yè)名稱后點(diǎn)確定按鈕即可創(chuàng)建一個(gè)網(wǎng)頁(yè)。

3.開始編輯網(wǎng)頁(yè)。

從左邊工程樹中選中剛才創(chuàng)建的網(wǎng)頁(yè)，雙擊打開，就可以編輯這個(gè)網(wǎng)頁(yè)了。

4.預(yù)覽網(wǎng)頁(yè)。

編輯網(wǎng)頁(yè)時(shí)，想看看編輯的效果，可以點(diǎn)界面上方的“預(yù)覽網(wǎng)頁(yè)”進(jìn)行預(yù)覽。

5.生成網(wǎng)站。

網(wǎng)頁(yè)創(chuàng)建設(shè)計(jì)好后，可以點(diǎn)界面上方的“生成網(wǎng)站”按鈕，選擇要生成的文件夾，點(diǎn)“確定”即可生成整個(gè)網(wǎng)站。

常用操作說明

1.全選控件

選中待選擇的控件的父控件，按ctrl_+a，或點(diǎn) ，則全選該控件上的所有子控件。

2.調(diào)整控件順序

每個(gè)控件的上方都有一個(gè)紅色的數(shù)字，表示生成該元素的順序。有時(shí)需要在兩個(gè)控件中間插入一個(gè)新控件，你會(huì)發(fā)現(xiàn)這個(gè)新控件上方的數(shù)字會(huì)大于這兩個(gè)控件上方的數(shù)字，生時(shí)網(wǎng)頁(yè)時(shí)也會(huì)排在這兩個(gè)控件之后，這時(shí)，我們就要使用調(diào)整控件順序的功能。方法：先選擇父控件，然后全選所有子控件。點(diǎn)，則會(huì)提示“恭喜，調(diào)整成功！”。 這里你會(huì)發(fā)現(xiàn)新控件上方的紅色數(shù)字已改變。先后排序規(guī)則：頂邊距越小越排前面，頂邊距相同的，左邊距越小越排前面。

3.對(duì)齊控件或批量改變控件大小

假如我們已選擇了多個(gè)控件，想要讓這些控件左邊對(duì)齊，這時(shí)我們可以點(diǎn)。 圖中從左到右按鈕作用：左對(duì)齊、頂對(duì)齊、底對(duì)齊、右對(duì)齊 | 把所選的控件按最小寬度設(shè)置、把所選的控件按最大寬度設(shè)置、把所選的控件按最小高度設(shè)置、把所選的控件按最大高度設(shè)置 | 把所選的控件水平等距對(duì)齊，把所選的控件垂直等距對(duì)齊，把所選的控件水平居中對(duì)齊，把所選的控件垂直等距對(duì)齊。 溫馨提示：多選控件后，把鼠標(biāo)移到按鈕上面秒停一會(huì)就會(huì)有提示該按鈕的作用。

4.“文本框”控件內(nèi)容的編輯

文本框的內(nèi)容編輯，最簡(jiǎn)單就是選中該文本框后從左邊的屬性表中直接編輯“文本內(nèi)容”或“多行文本內(nèi)容”。另一方法是雙擊文檔框，進(jìn)入多媒體編輯窗口。在多媒體編輯窗口，可以再以網(wǎng)頁(yè)形式編輯該內(nèi)容。在實(shí)際使用中這兩種方法可以配合使用。其他有文本內(nèi)容的使用方法類同，如多行文本輸入框。

5.選擇圖片

插入圖片控件后，可以雙擊直接打開圖片選擇框選擇圖片。

6.SVG矢量圖片

SVG矢量圖片控件，我們提供了龐大的圖片庫(kù)，可以雙擊該控件在彈出的窗口中選擇所需要的圖片。選擇后圖片后，還可以在屬性窗口中改變圖片的顏色、大小。 說明：由于所用顯示SVG圖片控件有些問題，有些復(fù)雜的SVG圖片可能在選擇時(shí)顯示不完整，但并不影響在網(wǎng)頁(yè)中使用，可以預(yù)覽網(wǎng)頁(yè)看效果。

7.復(fù)制網(wǎng)頁(yè)

我們?cè)谠O(shè)計(jì)完成一個(gè)網(wǎng)頁(yè)后，再做一個(gè)網(wǎng)頁(yè)，這個(gè)新網(wǎng)頁(yè)和前一個(gè)除了具體內(nèi)容外其他的差不多，這時(shí)最簡(jiǎn)單的方法就是直接復(fù)制前一個(gè)網(wǎng)頁(yè)來修改。復(fù)制網(wǎng)頁(yè)方法：先創(chuàng)建一個(gè)空白的新網(wǎng)頁(yè)，然后從左邊工程樹中選中這個(gè)網(wǎng)頁(yè)，再點(diǎn)復(fù)制網(wǎng)頁(yè)按鈕，如下圖：

點(diǎn)復(fù)制網(wǎng)頁(yè)按鈕后，會(huì)彈出選擇被復(fù)制的網(wǎng)頁(yè)窗口，選擇好后再點(diǎn)確定即可。

8.使用“插入網(wǎng)頁(yè)模板”控件

比如同一網(wǎng)站不同的網(wǎng)頁(yè)的頭部、尾部基本是相同的，這時(shí)我們可以先建好頭部模板、尾部模板，然后再在這些網(wǎng)頁(yè)中分別插入模板即可。哪天要改頭部或尾部?jī)?nèi)容時(shí)，直接改這兩個(gè)模板即可，非常方便，不需要每個(gè)網(wǎng)頁(yè)都修改?；居谶@種思想，所有網(wǎng)頁(yè)中具有相同的內(nèi)容的都可以使用模板，不只是網(wǎng)頁(yè)的頭部、尾部。使用模板方法(以頭部模板為例)：1.先建一個(gè)名稱為“head_mod”的網(wǎng)頁(yè)，編輯設(shè)計(jì)好所需要的頭部?jī)?nèi)容。2.在所需要該模板的網(wǎng)頁(yè)相應(yīng)的位置插入一個(gè)“插入網(wǎng)頁(yè)模板”控件。3.在該“插入網(wǎng)頁(yè)模板”控件的屬性“模板路徑”中填寫“head_mod”。“模板路徑”支持相對(duì)路徑編寫，如“..\模板\head_mod”，表示該模板位于與父文件夾同級(jí)的“模板”文件中。切記：一旦模板被引用，請(qǐng)勿修改控件的名字，如果要修改，可以修改“id值和name值”。

9.使用“插入網(wǎng)頁(yè)模板”控件后，修改模板中的控件

在網(wǎng)頁(yè)中插入“插入網(wǎng)頁(yè)模板”控件后，還想修改模板中的某個(gè)屬性值。如本網(wǎng)頁(yè)為“快捷鍵及常用操作”，左邊文檔樹為模板，要想讓“快捷鍵及常用操作”選中，表示從樹中知道本頁(yè)是“快捷鍵及常用操作”。操作如下：雙擊左邊文檔樹模板，在彈出的窗口中，選中“快捷鍵及常用操作”文本框，修改其屬性“選中”為“true”，“更多屬性”->“使用模板屬性值”設(shè)置為“false”（這個(gè)屬性修改非常重要）。修改完成后點(diǎn)“保存”返回即可。

10.快捷打開工程所在文件夾

雙擊工程樹工程結(jié)點(diǎn)或文件夾結(jié)點(diǎn)即可打開所在文件夾。

快捷鍵說明

快捷鍵	功能效果
	名稱 說明
	選中一個(gè)控件，按此鍵，則父控件選中。再按此鍵，則該控件的父控件的父控件選中。
+	上下左右方向健 改變控件大小。
+	保存。
+	復(fù)制選中的控件。
+	剪切選擇的控件。
+	將復(fù)制或剪切的控件粘貼。
+	選中所有子控件。
	刪除選中控件。
+	刪除一行，只適用于表格控件。
+	插入一行，只適用于表格控件。
+	+D 刪除一列，只適用于表格控件。
+	+I 插入一列，只適用于表格控件。

常見問題

金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器能編輯HTML網(wǎng)頁(yè)嗎？

當(dāng)然可以，問對(duì)了，她就是干這個(gè)事情的。超級(jí)網(wǎng)頁(yè)設(shè)計(jì)器是一款HTML網(wǎng)頁(yè)正向生成的軟件，在設(shè)計(jì)階段可以拖放插入控件，通過拖動(dòng)改變控件的位置進(jìn)行HTML元素布局，完全是可視化的所見即所得的軟件，你完全不需要具備HTML知識(shí)就能編輯所需的網(wǎng)頁(yè)。編輯HTML網(wǎng)頁(yè)如此So easy?。?/p>

金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器與Dreamveawer、Frontpage等常見的網(wǎng)頁(yè)設(shè)計(jì)軟件有什么區(qū)別？

共同點(diǎn)都是用來設(shè)計(jì)網(wǎng)頁(yè)，不同在于Dreamveawer、Frontpage等常見的網(wǎng)頁(yè)設(shè)計(jì)軟件更偏向于HTML源碼的編寫，使用非常復(fù)雜，需要有非常豐富的HTML知識(shí)才能使用得好；而金蜘蛛網(wǎng)頁(yè)設(shè)計(jì)器完全不關(guān)心網(wǎng)頁(yè)HTML源碼的編寫，只注重界面元素的布局設(shè)計(jì)，你沒有HTML知識(shí)也能非常快設(shè)計(jì)出漂亮的網(wǎng)頁(yè)。