CoffeeCup Responsive Site Designer是一款功能豐富的CSS框架軟件，可以幫助用戶快速設(shè)計(jì)新的網(wǎng)頁，軟件提供很多窗口樣式，您可以在啟動軟件的時(shí)候選擇一種模板開始設(shè)計(jì)，軟件支持、內(nèi)容窗格、設(shè)計(jì)樣式窗格、布局樣式窗格、彩色編碼CSS選擇器、元素窗格、頁面管理器等多種樣式，同時(shí)支持CSS Grid、Web布局、高級網(wǎng)格配置、視口滑塊和斷點(diǎn)等功能，幫助用戶快速建立響應(yīng)式網(wǎng)站，如果你需要設(shè)計(jì)CSS網(wǎng)站就可以下載這款軟件！

軟件功能

　　1.位置與Flexbox

　　按下按鈕即可對齊、堆疊或重新排列元素。它是一個(gè)非凡的工具，應(yīng)該成為任何響應(yīng)式設(shè)計(jì)工具包的一部分。在我們的免費(fèi)互動Flexbox指南中，探索是什么讓Flexbox如此神奇，并探索真實(shí)的設(shè)計(jì)實(shí)例。

　　2.全新的用戶界面

　　基于社區(qū)的反饋，我們著手解決可見性問題，并更新了UI。它令人驚嘆的改頭換面使它更清晰，更容易導(dǎo)航，幫助你比以往任何時(shí)候都更快地設(shè)計(jì)你的頁面。

　　3.CSS過濾器和混合模式

　　動態(tài)更改顏色，調(diào)整較小顯示的設(shè)置，并讓它們以交互效果和轉(zhuǎn)換響應(yīng)用戶。這些技術(shù)將把您的站點(diǎn)帶到另一個(gè)層次!

　　4.一個(gè)無代碼的設(shè)計(jì)工作流

　　選擇、單擊、指向、選擇和滾動，創(chuàng)建世界之外的網(wǎng)站和頁面。使用無代碼CSS控件，您可以專注于設(shè)計(jì)，而我們則負(fù)責(zé)代碼。您可以自由地探索新的外觀和嘗試獨(dú)特的布局。

　　5.比樂高玩具

　　忘記重復(fù)的設(shè)計(jì)工作，使用組件庫加快生產(chǎn)時(shí)間。在其他項(xiàng)目中保存和重用項(xiàng)。CSS框架提供了一種優(yōu)雅的方法來構(gòu)建導(dǎo)航菜單、手風(fēng)琴、很酷的選項(xiàng)卡面板、模態(tài)對話框等等。構(gòu)建一次，隨時(shí)使用!

　　6.語義簡潔的代碼

　　在實(shí)時(shí)瀏覽器環(huán)境中構(gòu)建可以讓您的創(chuàng)造力蓬勃發(fā)展，因?yàn)槟粫淮a語法所困擾。干凈的語義代碼將為您生成。CSS3直接編寫到一個(gè)真正的樣式表中，從而實(shí)現(xiàn)無膨脹、易于解釋的規(guī)則?？捎玫腍TML元素是基于標(biāo)準(zhǔn)的。標(biāo)簽可以通過兩個(gè)簡單的點(diǎn)擊來切換，使用語義HTML5元素，從而使頁面標(biāo)記良好，并向搜索引擎?zhèn)鬟f含義。

　　7.出口到CodePen

　　熟練的用戶會喜歡將元素的標(biāo)記導(dǎo)出到CodePen的能力。通過這種方式，您可以在CMS或其他地方使用它，而不需要經(jīng)過完整的導(dǎo)出。

軟件特色

　　1：實(shí)時(shí)畫布。這是一個(gè)基于瀏覽器的工作區(qū)域。一個(gè)主要的優(yōu)點(diǎn)是，您創(chuàng)建的內(nèi)容與在網(wǎng)站上發(fā)布網(wǎng)站時(shí)的外觀和感覺相同。畫布主要用于實(shí)時(shí)設(shè)計(jì)視圖，選擇或重新排序元素以及編輯文本。

　　2：控制窗格。在右側(cè)，有4個(gè)窗格，每個(gè)窗格都具有可視化管理內(nèi)容，布局，樣式，HTML，CSS和Javascript以及頁面屬性的特定角色。

　　3：Viewport滑塊和斷點(diǎn)管理器。在工作區(qū)域的正上方，您會看到一個(gè)名為“The Responsifier”的酒吧。此欄包含許多用于管理所有可能設(shè)備寬度的設(shè)計(jì)的工具。

　　斷點(diǎn)表示特定屏幕尺寸的布局或內(nèi)容樣式的變化，在寬度滑塊頂部有一個(gè)點(diǎn)。特定于框架的斷點(diǎn)由顏色指示，而自定義斷點(diǎn)將顯示為白色。使用寬度滑塊左側(cè)的+/-添加和刪除斷點(diǎn)。

　　4：工具欄。訪問常用功能，如頁面管理器，項(xiàng)目資源，瀏覽組件庫，在特定瀏覽器中啟動預(yù)覽，切換斷點(diǎn)，甚至發(fā)布。

安裝方法

　　1、打開CoffeeCup Responsive Site Designer 4.0 Build 3071.exe軟件直接啟動，點(diǎn)擊next

　　2、軟件的協(xié)議內(nèi)容，接受協(xié)議繼續(xù)按照

　　3、默認(rèn)的安裝地址是C:Program FilesCoffeeCup SoftwareSite Designer

　　4、提示準(zhǔn)備安裝界面，點(diǎn)擊install

　　5、軟件已經(jīng)開始安裝，等待安裝結(jié)束

　　6、CoffeeCup Responsive Site Designer安裝結(jié)束，點(diǎn)擊finish

使用說明

　　主題經(jīng)理

　　查看Materialize，Vanilla，F(xiàn)oundation和Bootstrap框架的默認(rèn)主題。使用這些主題來快速啟動您的網(wǎng)站創(chuàng)建。轉(zhuǎn)到文件>新建主題以啟動主題管理器。選擇主題后，只需更改文本和圖像以滿足您的需求，您的任務(wù)就完成了！

　　選擇CSS框架

　　數(shù)百萬設(shè)計(jì)人員和開發(fā)人員使用CSS框架。他們使用經(jīng)常維護(hù)和更新的組織良好的HTML，CSS和Javascript。此外，它們允許創(chuàng)建很酷的交互式組件，如dropups，導(dǎo)航菜單，畫廊等，而無需與額外的腳本搏斗 - 甜蜜！

　　使用Site Designer，您可以從三個(gè)史詩框架選項(xiàng)開始您的站點(diǎn)項(xiàng)目：Foundation，Bootstrap，Materialize。

　　您為項(xiàng)目選擇的框架將反映在應(yīng)用程序的左上角。這有助于您在多個(gè)項(xiàng)目之間跳轉(zhuǎn)時(shí)快速識別您正在使用哪一個(gè)。

　　帆布（工作區(qū)）

　　此區(qū)域可視化網(wǎng)站訪問者在登錄頁面時(shí)將體驗(yàn)到的內(nèi)容。結(jié)合Slider（The Responsifier的一部分），可以在設(shè)計(jì)時(shí)預(yù)覽每個(gè)設(shè)備寬度。

　　如果您有興趣了解設(shè)計(jì)的特定部分在不同屏幕寬度下的行為，請選擇該部分中的任何元素。在普通瀏覽器中，調(diào)整大小時(shí)內(nèi)容將流出視圖，但是，在站點(diǎn)設(shè)計(jì)器中，所選內(nèi)容將自動滾動回視圖。應(yīng)用程序的一個(gè)小但非常方便的特權(quán)！

　　將鼠標(biāo)懸停在任何元素上。單擊以從下拉列表中選擇嵌套項(xiàng)目，或使用圖標(biāo)編輯文本，復(fù)制或刪除項(xiàng)目。

　　插入頁面文本/使用文本編輯器

　　文本編輯器處于活動狀態(tài)時(shí)，可以在屏幕上直接編輯文本元素。它可以通過多種方式激活。右鍵單擊文本元素將打開一個(gè)帶有“文本編輯”選項(xiàng)的上下文菜單。

　　您也可以雙擊屏幕上的文字開始輸入單詞。最后，單擊“ 樣式”窗格頂部的“ A ”圖標(biāo)，或?qū)⑹髽?biāo)懸停在任何文本元素上。

　　激活文本編輯模式后，面板頂部將出現(xiàn)藍(lán)色橫幅指示符。

　　還將顯示幾個(gè)排版控件以進(jìn)行內(nèi)聯(lián)編輯。您可以在段落中加粗單詞，插入鏈接，更改顏色或字體等。如果要從常規(guī)默認(rèn)排版選項(xiàng)中進(jìn)行變換，請僅使用這些樣式控件。

　　例如，在句子中間加粗字詞或更改單詞的顏色將與文本編輯器窗格內(nèi)聯(lián)樣式。

　　“樣式”窗格的第二部分分為三個(gè)部分：布局，設(shè)計(jì)，效果。它們包含管理設(shè)計(jì)布局，樣式元素，版式，尺寸等所有輸入，工具和控件。此處也可以找到Flexbox和CSS Grid等布局控件。

　　工具功能

　　主工具欄可以訪問與設(shè)計(jì)工作流程不太相關(guān)的功能。有一些按鈕可以訪問頁面管理器或管理項(xiàng)目資源，如圖像和其他文件?？焖僭L問主題管理器以及預(yù)構(gòu)建的組件。

　　訪問更高級的控件，例如激活功能查詢和插入結(jié)構(gòu)化數(shù)據(jù)。 您還可以使用工具欄功能在任何已安裝的瀏覽器上預(yù)覽設(shè)計(jì)，以導(dǎo)出和發(fā)布站點(diǎn)。

　　GUIDES

　　“指南”按鈕允許您在元素和網(wǎng)格結(jié)構(gòu)周圍可視地切換指示器，從而可以輕松了解元素的位置和間距。

　　網(wǎng)格線是淺色的水平和垂直線，出現(xiàn)在項(xiàng)目中的元素周圍。這些準(zhǔn)則用于定義頁面上元素和容器的邊界。

　　X射線模式使您可以一目了然地查看元素容器的設(shè)置方式。啟用此選項(xiàng)后，將打開所有網(wǎng)格選項(xiàng)，刪除背景圖像，并在所有元素上設(shè)置不透明度，以便您查看網(wǎng)格配置。您還會注意到事物的顏色編碼以便于識別。

　　切斷點(diǎn)

　　斷點(diǎn)模式可用于定義特定媒體查詢的樣式，與滑塊位置無關(guān)。通過禁用所有斷點(diǎn)，樣式不依賴于任何媒體查詢。

　　例如，這可以讓您在處理默認(rèn)樣式時(shí)在工作區(qū)域中擁有更多空間。如果您習(xí)慣使用桌面下載功能，則此功能非常方便。當(dāng)您準(zhǔn)備好對更大的屏幕進(jìn)行調(diào)整時(shí)，請務(wù)必重新啟用它們。

　　設(shè)備視圖

　　使用“ 設(shè)備視圖”可以跨各種類型的屏幕預(yù)覽您的創(chuàng)建。這有助于您測試內(nèi)容在特定設(shè)備上的顯示方式，并確定是否需要進(jìn)行調(diào)整。

　　頁面（頁面管理器）

　　需要在項(xiàng)目中添加頁面嗎？單擊工具欄中的“ 頁面”圖標(biāo)。這將啟動頁面管理器下拉菜單。您將能夠看到站點(diǎn)中所有頁面的列表，并可以在它們之間循環(huán)。

　　從這里，您可以快速添加空白頁面或復(fù)制項(xiàng)目中的現(xiàn)有頁面。

　　選擇下拉列表底部的“ 管理項(xiàng)目 ”以打開“頁面管理器”。

　　此部分可以輕松管理項(xiàng)目頁面，更改頁面順序和添加元數(shù)據(jù)。

　　要在項(xiàng)目中添加，復(fù)制或刪除頁面，請使用頁面管理器左下角的圖標(biāo)。要重新排列頁面順序，請單擊頁面右側(cè)的向上/向下↕圖標(biāo)將其拖動到位。

　　您的頁面名稱用作鏈接目標(biāo)。從其他位置鏈接時(shí)，您將使用頁面名稱。切記不要在頁面名稱中使用空格。如果您的頁面名稱長多字，請始終使用連字符分隔單詞，或?qū)⑺鼈兤唇釉谝黄鹨灾谱饕粋€(gè)長單詞。

　　目前，該應(yīng)用程序每個(gè)項(xiàng)目最多支持125頁。這個(gè)數(shù)字會定期繼續(xù)增加。

　　設(shè)計(jì)......

　　Design For ..工具欄圖標(biāo)允許您激活 功能查詢。

　　此功能允許您使用CSS Grid作為布局框架創(chuàng)建生產(chǎn)就緒設(shè)計(jì) - 并為不支持的瀏覽器提供替代樣式表！通過應(yīng)用后備，您的設(shè)計(jì)將始終在各處看起來都很好。

　　首先，首先為Internet Explorer（以及可能不支持CSS Grid的任何其他瀏覽器）構(gòu)建您的布局。一旦默認(rèn)布局和樣式到位，將Display For control 切換到Grid，然后調(diào)整現(xiàn)代瀏覽器的設(shè)計(jì)。

　　導(dǎo)出到CODEPEN

　　熟練的用戶會喜歡將元素的標(biāo)記導(dǎo)出到CodePen的能力。這樣您就可以在CMS或其他地方使用它，而無需完全導(dǎo)出。

　　只需右鍵單擊任何元素即可激活在CodePen中打開的選項(xiàng)。組件

　　使用CSS框架的好處是能夠創(chuàng)建更復(fù)雜的網(wǎng)站功能。這些框架提供了一種優(yōu)雅的方式來構(gòu)建導(dǎo)航菜單，手風(fēng)琴，酷炫的選項(xiàng)卡面板，模態(tài)對話框，下拉，以及更多，而不必混淆外部腳本。

　　將自定義組件保存到庫中，以便在整個(gè)項(xiàng)目中重用它們?？梢詾轫?xiàng)目提供描述并組織在文件夾中以使您有條理。

　　使用“組件”工具欄圖標(biāo)從庫中添加組件。

　　結(jié)構(gòu)化數(shù)據(jù)

　　結(jié)構(gòu)化數(shù)據(jù)圖標(biāo)使您能夠插入JSON-LD Schema.org頁面標(biāo)識標(biāo)記，搜索引擎使用這些標(biāo)記來解釋您的網(wǎng)站和頁面內(nèi)容。

　　在網(wǎng)站的上下文中，結(jié)構(gòu)化數(shù)據(jù)是“額外”信息，使搜索引擎能夠更好地理解頁面上的內(nèi)容。使用此方法描述您的頁面內(nèi)容提供了許多好處。一般來說，這可以提高網(wǎng)站在相關(guān)搜索結(jié)果中的可見性，并帶來更多的自然流量。

　　在Site Designer中，應(yīng)用此標(biāo)記的工作流程非常簡單直觀。無需任何進(jìn)口或進(jìn)口！只需使用下拉菜單并瀏覽關(guān)鍵字，即可找到最能識別您的業(yè)務(wù)，組織或廣告素材作品的關(guān)鍵字。

　　盡可能多地向下鉆取。提交您的餐廳提供的美食，標(biāo)記您教堂的講道，發(fā)布營業(yè)時(shí)間等等。完成后，您可以點(diǎn)擊“ 使用Google測試”按鈕，查看他們是否推薦了任何其他信息。

　　出版和出口

　　控制您的內(nèi)容有兩個(gè)選項(xiàng)可供選擇，讓您的網(wǎng)站在線; 發(fā)布到S-Drive或使用FTP客戶端導(dǎo)出到任何服務(wù)器。

　　通過發(fā)布到S-Drive，該應(yīng)用程序可以自動將所有文件上傳到您的CoffeeCup帳戶，從而為您完成所有工作。沒有麻煩，沒有大驚小怪！為此，請單擊“設(shè)置”工具欄按鈕并切換到“發(fā)布”部分。然后輸入您的CoffeeCup帳戶信息。

　　可以使用“常規(guī)設(shè)置”配置項(xiàng)目名稱和導(dǎo)出文件夾結(jié)構(gòu)。

　　使用導(dǎo)出方法時(shí)，將生成包含所有網(wǎng)站文件的文件夾。然后，您需要將此文件夾中的所有內(nèi)容上傳到您自己的托管服務(wù)。單擊“導(dǎo)出”工具欄圖標(biāo)或轉(zhuǎn)到“文件”菜單>“導(dǎo)出”以開始導(dǎo)出過程。

　　資源

　　“資源”工具欄圖標(biāo)將啟動文件管理窗口。您可以在此處管理其他項(xiàng)目文件。

　　創(chuàng)建文件夾以組織內(nèi)容，例如圖像，文檔和腳本。發(fā)布或?qū)С稣军c(diǎn)時(shí)，文件結(jié)構(gòu)將保持不變。

　　網(wǎng)格編輯器入門

　　要開始使用網(wǎng)格，只需單擊“顯示”切換并將其設(shè)置為“網(wǎng)格”。這適用于所有容器元素，從普通的ol'

　　到重要的。然后，啟動網(wǎng)格編輯器 - 在本節(jié)下方的大屏幕截圖中展示 - 以可視方式配置所需的網(wǎng)格設(shè)置。

　　最后，可以告訴每個(gè)元素（海上的船）去特定的位置?；蛘吣闶裁炊疾蛔?，看著自動放置算法將網(wǎng)格元素彈出到位。

　　網(wǎng)格編輯器對話框

　　配置網(wǎng)格跟蹤

　　網(wǎng)格列和行 - 網(wǎng)格軌道 - 使用相應(yīng)的+按鈕添加。要配置行或列設(shè)置，只需單擊灰色標(biāo)題即可。然后可以使用輸入和單位選擇器指定寬度和高度，其中包括新的令人敬畏的fr單位?？梢允褂酶叨龋ㄐ校┗?qū)挾龋校┣袚Q選擇單個(gè)值或MinMax值（非常方便?。?/p>

　　還有一些管理控件可以輕松復(fù)制行和列或?qū)⑺鼈円苿拥讲煌奈恢?。如果您有一個(gè)大屏幕并點(diǎn)擊左下角的“應(yīng)用于畫布”按鈕，您將看到網(wǎng)格容器中的所有元素都相應(yīng)地重新定位。

　　定義默認(rèn)放置行為

　　這可以通過“網(wǎng)格設(shè)置”部分中的控件進(jìn)行影響。默認(rèn)情況下，grid-items會逐行自動填充單元格。此自動放置算法可以通過本節(jié)中相應(yīng)的下拉列表中的“自動流”屬性進(jìn)行影響。有關(guān)密集關(guān)鍵字如何工作的一些解釋很快就會添加到網(wǎng)格指南中。

　　該對齊和對齊屬性的作用非常相似，那么Flexbox如何對齊項(xiàng)目。它們確定項(xiàng)目沿列（塊）和行（內(nèi)聯(lián)）軸放置在網(wǎng)格區(qū)域中的位置。

　　自動創(chuàng)建的行和列通常會增長和縮小以容納它們保存的內(nèi)容。使用“自動”控件可以為該情況指定默認(rèn)大小。

　　可以使用Gap控件指定裝訂線。如果你像我一樣，并試圖在Flexbox布局中這樣做，你會喜歡它在這里工作的方式！

　　創(chuàng)建網(wǎng)格區(qū)域

　　可以命名網(wǎng)格單元格。當(dāng)相鄰單元格具有相同名稱時(shí)，將創(chuàng)建網(wǎng)格區(qū)域?？梢酝ㄟ^簡單地指定它們屬于哪個(gè)區(qū)域來放置項(xiàng)目。管理布局的一種非常語義和方便的方法！

　　單擊單元格以打開文本輸入。名稱可以直接輸入單元格或右側(cè)相應(yīng)的控制區(qū)域（見下文）。

　　使用控制面板，您還可以指定區(qū)域需要拉伸的距離，它開始的列或行以及它的結(jié)束位置。完成后，不要忘記點(diǎn)擊“應(yīng)用”按鈕。

　　要在區(qū)域中放置項(xiàng)目，只需選擇元素，然后在“樣式”窗格的“網(wǎng)格和Flexbox布局”部分中輸入?yún)^(qū)域名稱。

　　如果你像我一樣，在設(shè)計(jì)時(shí)遭遇記憶力不好，那么自動推薦就是一個(gè)很好的幫助！

　　下面的視頻快速展示了CSS Grid編輯器的工作原理。對于那些感興趣的人，我們列出了為什么我們在它下面制作這個(gè)（免費(fèi)）應(yīng)用程序的原因。

　　使用網(wǎng)格的原因＃1

　　功能強(qiáng)大，熱門，靈活都適用于未來的這種布局方法。但是，強(qiáng)大的新技術(shù)通常會帶來一些學(xué)習(xí)曲線。CSS Grid也是如此。并且網(wǎng)格配置不容易看到這一事實(shí)并沒有幫助！

　　可視網(wǎng)格編輯器（參見前面的大截圖）說明了網(wǎng)格結(jié)構(gòu)，可以作為快速參考。使用一系列冷卻控件也可以輕松（重新）定義結(jié)構(gòu)。

　　但這還不是全部。如上所示，自動建議的下拉菜單 - 在下面的屏幕截圖中顯示 - 可以在放置項(xiàng)目時(shí)提供幫助。

　　這總結(jié)了CSS Grid Builder和Site Designer背后的大部分原因。但是我們開發(fā)這個(gè)漂亮的應(yīng)用程序的原因還有很多？