Responsive Site Designer是一款網(wǎng)站設(shè)計(jì)軟件，可以幫助用戶在軟件上編輯網(wǎng)頁(yè)UI，可以在軟件設(shè)計(jì)網(wǎng)站架構(gòu)，可以通過內(nèi)置的代碼編輯器設(shè)計(jì)CSS、HTML，該軟件設(shè)計(jì)功能很豐富，可以快速添加菜單界面，添加原型、添加圖像，為設(shè)計(jì)師編輯網(wǎng)頁(yè)界面效果提供更多幫助，其中圖片元素就是一個(gè)很好的例子，我們?cè)诰W(wǎng)格框架中選擇使用塊 和最大寬度：400px作為它們的默認(rèn)值。這種方式將它們居中，就像將左右兩邊的邊距值設(shè)置為自動(dòng)一樣簡(jiǎn)單，這里小編推薦的是免費(fèi)版，下載就可以使用！

軟件功能

　　1、拖放內(nèi)容元素，如標(biāo)題，圖像，按鈕，圖標(biāo)等

　　2、在項(xiàng)目資源庫(kù)中組織圖像和其他資產(chǎn)

　　3、設(shè)計(jì)與懸停，活動(dòng)和按下狀態(tài)控件的交互創(chuàng)建強(qiáng)大的3D效果，使網(wǎng)站活躍起來……

　　4、使用直觀，功能強(qiáng)大的文本編輯器編寫，粘貼或編輯文本

　　5、無限制的網(wǎng)站項(xiàng)目，每個(gè)頁(yè)面最多50個(gè)(現(xiàn)在)頁(yè)面

　　6、全范圍視口涓塊-在應(yīng)用程序中以任何可能的寬度查看和處理設(shè)計(jì)。

　　7、具有相應(yīng)媒體查詢的移動(dòng)優(yōu)先和桌面下行工作流程

　　8、行可以被約束到特定寬度或全寬度以吸引視覺(背景)效果

　　9、為SEO或插件添加元數(shù)據(jù)和其他頭(或頁(yè)腳)代碼

　　10、導(dǎo)出可以上傳到任何服務(wù)器的干凈，語(yǔ)義，HTML和CSS(包括任何添加的插件)

軟件特色

　　子網(wǎng)格是列中的網(wǎng)格

　　子網(wǎng)格是一個(gè)包含行和列的特殊容器。它允許與普通網(wǎng)格相同的布局操作?？梢蕴砑有胁⒏钠涑叽纾梢允褂?ldquo;布局”窗格上的“跨度寬度”控件控制列寬，并且可以使它們?cè)跀帱c(diǎn)處堆疊。subgrids的一個(gè)很好的用例是你有一個(gè)全寬行。子網(wǎng)格可以使所有元素保持居中，同時(shí)允許內(nèi)容組織和布局（重新）結(jié)構(gòu)化（在斷點(diǎn)處）。

　　容器組元素

　　容器可用于創(chuàng)建（可視）元素組，如上面顯示的“活動(dòng)卡片”。它們可以容納，按鈕，文本，圖片甚至是子網(wǎng)格。容器也可以放在子網(wǎng)格列中。但是，子網(wǎng)格不能放入已存在于子網(wǎng)格中的容器中，也不能將容器放入容器中。額外獎(jiǎng)勵(lì)：您可以使用它們（作為疊加層）來創(chuàng)建炫酷的懸停效果和交互性。查看Flex City主題以獲取示例。

　　向頁(yè)面添加自定義HTML或代碼對(duì)象。

　　使用HTML元素添加自己的代碼片段或從其他應(yīng)用程序（如表單生成器和響應(yīng)內(nèi)容滑塊）導(dǎo)出。

　　1.刪​​除HTML元素

　　將HTML元素放在要顯示自定義代碼或?qū)ο蟮奈恢?。這適用于所有類型的對(duì)象，從菜單和Web表單到酷炫的幻燈片。這些對(duì)象可以從我們的應(yīng)用程序（如表單生成器）導(dǎo)出，也可以從第三方應(yīng)用程序?qū)С觥?/p>

　　2.添加代碼 - 調(diào)整設(shè)計(jì)

　　可以將代碼插入“設(shè)計(jì)”窗格的HTML框中。在上面的示例中，顯示了幻燈片的代碼。HTML元素可以像其他具有邊框，背景等元素一樣定位和設(shè)置樣式。是的，在開發(fā)路線圖中創(chuàng)建了一個(gè)更大的框來添加和編輯代碼。

　　3.某些對(duì)象需要額外的代碼或鏈接到資源

　　可以使用“頭（或頁(yè)腳）”框鏈接樣式表和其他資源文件。為了不干擾RSD的內(nèi)部，一些對(duì)象（主要是使用Javascript的對(duì)象）現(xiàn)在無法在woking區(qū)域中實(shí)時(shí)預(yù)覽。您可以使用工具欄上的“預(yù)覽...”按鈕在瀏覽器中查看它們。

安裝方法

　　1、下載安裝程序responsive-site-designer-full-win-en-2.5-2425.exe，打開以后點(diǎn)擊next安裝

　　2、軟件的協(xié)議內(nèi)容，在這里閱讀協(xié)議，點(diǎn)擊accept接受

　　3、軟件的安裝地址默認(rèn)在C:Program FilesCoffeeCup SoftwareResponsive Site Designer

　　4、提示安裝準(zhǔn)備界面，點(diǎn)擊next就可以直接安裝

　　5、提示安裝進(jìn)度，等待軟件安裝完畢

　　6、點(diǎn)擊finish就可以啟動(dòng)Responsive Site Designer

使用方法

　　1、打開Responsive Site Designer軟件提示幫助功能，你可以在軟件界面點(diǎn)擊鏈接查看幫助

　　2、也可以在help界面查看幫助，直接訪問官方網(wǎng)站的教程界面

　　3、軟件界面功能很多，如果您會(huì)設(shè)計(jì)網(wǎng)站就自己下載吧！

使用說明

　　提示01：添加和處理圖片。

　　我們通常使用占位符圖像開始設(shè)計(jì)。但是在這個(gè)過程中的某些時(shí)候，這些占位符圖像需要用真實(shí)的交易來代替。這是如何做。

　　1.轉(zhuǎn)到設(shè)計(jì)窗格

　　雙擊占位符圖像將自動(dòng)啟動(dòng)“ 設(shè)計(jì)”窗格。您也可以直接單擊窗格選項(xiàng)卡或右鍵單擊圖像。

　　2.選擇你的照片

　　使用“ 圖片”下拉列表選擇源。對(duì)于在線圖像，您只需粘貼鏈接即可。本地圖片可以添加到項(xiàng)目資源中，并將包含在導(dǎo)出或上傳中。除非指定了不同的樣式，否則元素將采用新圖像的尺寸。

　　3.選擇樣式

　　向下滾動(dòng)到“ 樣式”部分。首先進(jìn)行的調(diào)整之一通常是 尺寸下的最大寬度值。下面還提供了各種其他設(shè)計(jì)控件。圖片也可以在斷點(diǎn)處更改 - 向移動(dòng)用戶提供較小尺寸的圖像可以提高性能并讓他們滿意！

　　提示02：添加，格式化和鏈接文本。

　　在文本編輯模式下，您可以粘貼或鍵入文本。文本的選定部分可以給出獨(dú)特的格式或轉(zhuǎn)換為文本鏈接。

　　1.右鍵單擊文本元素

　　可以通過右鍵單擊并選擇“ 編輯文本”選項(xiàng)來激活文本編輯器 。您也可以三擊該元素或使用“編輯文本”按鈕（在“設(shè)計(jì)”窗格上的ID輸入框下方）。

　　2.添加鏈接和格式文本

　　您可以選擇部分文本來添加鏈接，或者以不同于未選擇的文本格式化它們。這些（內(nèi)聯(lián)）樣式可以賦予類名，以便于重用和更新。我們還有一個(gè)全面的文章和視頻教程，更詳細(xì)地介紹了各種鏈接選項(xiàng)。

　　3.格式和狀態(tài)控件

　　使用“設(shè)計(jì)”窗格上的“排版”控件設(shè)置整個(gè)元素的文本樣式。格式化工具的外觀和工作方式相同，但僅影響所選文本（以及之前給出相同類名的選擇）。

　　技巧03：任何寬度的內(nèi)容組織的響應(yīng)式網(wǎng)格。

　　在網(wǎng)頁(yè)設(shè)計(jì)中，網(wǎng)格與電子表格非常相似。它們由行和內(nèi)容列（單元格）組成，用于對(duì)齊和組織頁(yè)面元素。

　　1.了解網(wǎng)格

　　每行可以劃分為多個(gè)內(nèi)容列。最大數(shù)量取決于網(wǎng)格配置。默認(rèn)值為12列，幾乎在所有情況下均可正常工作。上面的例子有4行。前兩行都有2個(gè)內(nèi)容列。這意味著每個(gè)內(nèi)容列將占用6個(gè)網(wǎng)格列（12個(gè)中的列）。

　　2.管理布局

　　“布局”窗格包含一系列用于管理和配置網(wǎng)格的工具?？梢蕴砑?，合并列，并可以調(diào)整跨度寬度。當(dāng)一行中列的總跨度超過最大值時(shí)，它們將堆疊。這可用于在斷點(diǎn)處進(jìn)行布局更改。

　　3.堆疊列

　　在上面的示例中，行3中的列的跨度寬度已經(jīng)調(diào)整超過斷點(diǎn)。（右上角有黑色填充的白點(diǎn)）第1列和第2列現(xiàn)在使用6的跨度（12個(gè) - 寬度的一半）。這使得第3列堆棧。第3列的跨度寬度已設(shè)置為最大值12，因此它占用了整個(gè)寬度。

　　技巧04：使用選擇器實(shí)現(xiàn)高效的工作流程。

　　使用功能強(qiáng)大的選擇器系統(tǒng)一次將樣式應(yīng)用于多個(gè)元素。

　　1.從元素類型開始

　　Class是下拉列表中的默認(rèn)選項(xiàng)，但主要用于設(shè)計(jì)的后期階段。最有效的工作流程是首先為元素類型定義樣式。在使用下面的設(shè)計(jì)控件之前，從“應(yīng)用于”下拉列表中選擇“ 類型”選擇器。應(yīng)用于該類型的樣式具有粉紅色指示符。

　　2.使用類來進(jìn)行變化

　　設(shè)置所有默認(rèn)樣式后，可以添加類以創(chuàng)建設(shè)計(jì)變體。這些變化與設(shè)計(jì)中元素的不同用法有關(guān)。在上面的示例中，標(biāo)頭使用類添加頂部邊框并使字體為斜體。font-family仍然與為該類型指定的相同。

　　3.了解顏色

　　上圖顯示了在Type上指定了步驟1中段落的字體系列。顏色和線高也是如此。 的藍(lán)色指標(biāo)顯示，字體大小和重量為類指定。的黃色指示器告訴我們，對(duì)準(zhǔn)被設(shè)置用于此特定元件僅僅-on的（唯一的）ID。

　　提示05：按照主題中的設(shè)計(jì)說明進(jìn)行操作，并接受應(yīng)用程序的幫助。

　　我們的主題不僅看起來很棒，而且還包括解釋性文本，可以幫助我們學(xué)習(xí)如何創(chuàng)建特定的設(shè)計(jì)效果。Inspector窗格可以提供幫助并提供洞察力！

　　1.閱讀說明

　　我們正在交換主題中的簡(jiǎn)單填充文本，以解釋描述如何創(chuàng)建某些設(shè)計(jì)效果。 這些部分提到了HTML的組織方式 - 例如，如果使用容器 - 以及正在使用哪種樣式屬性。

　　2.親自檢查和看看

　　響應(yīng)式站點(diǎn)設(shè)計(jì)師是一款出色的學(xué)習(xí)工具！在任何時(shí)候，您都可以跳轉(zhuǎn)到Inspector窗格并親自查看所選元素的HTML結(jié)構(gòu)和CSS屬性。只需右鍵單擊元素，然后選擇“ 轉(zhuǎn)到”>“檢查器”。將顯示每個(gè)HTML元素的元素順序和關(guān)聯(lián)的CSS。僅在“設(shè)計(jì)”窗格上編輯CSS（暫時(shí)）。

　　3.檢查員的力量

　　元素也可以 在不同的位置拖放，從而改變?cè)仨樞?。?dāng)預(yù)覽區(qū)域中的放置區(qū)域或元素很小時(shí)，這可能會(huì)很方便。您還可以懸停元素，并在預(yù)覽區(qū)域中查看輪廓。這有助于了解元素占用多少額外空間（邊距，填充）。

　　提示06：使用滑塊以不同寬度查看設(shè)計(jì)。

　　向左和向右移動(dòng)寬度滑塊以查看所有可能寬度的設(shè)計(jì)。在需要的地方使用斷點(diǎn)來調(diào)整布局或元素。

　　1.減小（增加）寬度

　　響應(yīng)式設(shè)計(jì)并不意味著設(shè)計(jì)平板電腦或iPhone - 它意味著設(shè)計(jì)任何寬度。寬度滑塊可用于以任何可能的視口寬度查看設(shè)計(jì)，并有助于創(chuàng)建在任何屏幕和設(shè)備上看起來都很好的網(wǎng)站。

　　2.斷點(diǎn)按鈕

　　帶有+和 - 的白點(diǎn)可用于添加（或刪除）斷點(diǎn)。這些點(diǎn)將添加到滑塊的當(dāng)前位置上方，顯示在設(shè)備指示器左側(cè)顯示的像素值處。設(shè)備圖標(biāo)指示當(dāng)前寬度可能使用的設(shè)備類型。它們具有所有不同的設(shè)備尺寸，僅供參考。變焦按鈕實(shí)際上不屬于此提示

　　3.更新樣式

　　從列跨度到邊框顏色的任何樣式都可以在斷點(diǎn)處進(jìn)行調(diào)整。當(dāng)白點(diǎn)具有黑色中心時(shí)，斷點(diǎn)處于活動(dòng)狀態(tài)，可接受樣式更改。在上面的示例中，這意味著從該點(diǎn)開始應(yīng)用較小的字體大小，直到在下一個(gè)斷點(diǎn)處應(yīng)用進(jìn)一步的更改。在桌面向下工作流程中，當(dāng)滑塊位于點(diǎn)的左側(cè)時(shí)，斷點(diǎn)處于活動(dòng)狀態(tài)。移動(dòng)優(yōu)先設(shè)計(jì)以相反的方式工作。