CoffeeCup Responsive Site Designer是一款非常專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)制作軟件，其簡(jiǎn)稱(chēng)為Site Designer。它能夠?yàn)榫W(wǎng)頁(yè)設(shè)計(jì)者提供更多更全面的響應(yīng)式設(shè)計(jì)解決方案。這款軟件沒(méi)有能夠讓您在沒(méi)有特定的代碼控件下發(fā)貨你該有的創(chuàng)造力，并且您你能夠在實(shí)時(shí)瀏覽器環(huán)境中利用拖放工作流進(jìn)行構(gòu)建，然后使用可點(diǎn)擊的控件以超快的速度設(shè)置內(nèi)容的樣式。Site Designer利用CSS框架的強(qiáng)大功能和CSS Grid的靈活性讓您在設(shè)計(jì)中能夠更好地發(fā)揮出自己想要的效果。
Site Designer適合各類(lèi)人群使用，對(duì)于精通代碼的設(shè)計(jì)人員和前端開(kāi)發(fā)人員將受益于直觀(guān)，快速的工作流程，可以進(jìn)行更多的實(shí)驗(yàn)和設(shè)計(jì)迭代。這導(dǎo)致更短的周轉(zhuǎn)時(shí)間和/或更真實(shí)，獨(dú)特的場(chǎng)地設(shè)計(jì)。較少（或沒(méi)有）代碼精明的設(shè)計(jì)師不會(huì)因編碼細(xì)節(jié)而陷入困境。使用可視化CSS控件的重點(diǎn)是內(nèi)容和體驗(yàn)設(shè)計(jì)，而不是搜索和調(diào)整代碼片段。對(duì)于沒(méi)有經(jīng)驗(yàn)的用戶(hù)來(lái)說(shuō)，Site Designer是學(xué)習(xí)CSS和使用Foundation，Bootstrap和Materialize進(jìn)行設(shè)計(jì)的絕佳工具。視覺(jué)設(shè)計(jì)控件與實(shí)時(shí)預(yù)覽相結(jié)合，提供了出色的反饋機(jī)制，有助于理解添加或更改CSS代碼的效果。但是，與具有CSS經(jīng)驗(yàn)的人相比，使用此應(yīng)用程序可能需要更多時(shí)間才能啟動(dòng)和運(yùn)行。歡迎有需要的朋友下載體驗(yàn)！

CoffeeCup Responsive Site Designer特色

1、一個(gè)全新的用戶(hù)界面
基于社區(qū)反饋，我們開(kāi)始著手解決可見(jiàn)性問(wèn)題并更新UI。它收到的令人驚嘆的改造使其更清晰，更容易導(dǎo)航，幫助您比以往更快地制作頁(yè)面。
CSS過(guò)濾器和混合模式
動(dòng)態(tài)更改顏色，調(diào)整較小顯示器的設(shè)置，并使用交互式效果和過(guò)渡響應(yīng)用戶(hù)。這些技術(shù)將您的網(wǎng)站帶到另一個(gè)層次！
2、無(wú)代碼設(shè)計(jì)工作流程
選擇，單擊，指向，選擇和滾動(dòng)以創(chuàng)建不在此世界中的網(wǎng)站和頁(yè)面。使用無(wú)代碼的CSS控件，您可以專(zhuān)注于設(shè)計(jì)，同時(shí)我們會(huì)處理代碼。您可以自由探索新穎的外觀(guān)并嘗試獨(dú)特的布局。
3、比legos好
使用組件庫(kù)忘記重復(fù)的設(shè)計(jì)工作并加快生產(chǎn)時(shí)間。保存并重用其他項(xiàng)目中的項(xiàng)目。
CSS框架提供了一種優(yōu)雅的方式來(lái)構(gòu)建導(dǎo)航菜單，手風(fēng)琴，酷炫的選項(xiàng)卡面板，模態(tài)對(duì)話(huà)框等等。構(gòu)建一次，隨時(shí)使用！
4、語(yǔ)義和清潔代碼
在實(shí)時(shí)瀏覽器環(huán)境中構(gòu)建可以讓您的創(chuàng)造力蓬勃發(fā)展，因?yàn)槟粫?huì)因?yàn)榇a語(yǔ)法而陷入困境。將為您生成干凈的語(yǔ)義代碼。CSS3直接寫(xiě)入真實(shí)的樣式表，從而產(chǎn)生無(wú)膨脹，易于解釋的規(guī)則。
可用的HTML元素是基于標(biāo)準(zhǔn)的。可以通過(guò)兩次簡(jiǎn)單的點(diǎn)擊切換標(biāo)簽，以使用語(yǔ)義HTML5元素，如和，從而產(chǎn)生標(biāo)記良好的頁(yè)面并向搜索引擎?zhèn)鬟_(dá)意義。
5、導(dǎo)出到CodePen
熟練的用戶(hù)會(huì)喜歡將元素的標(biāo)記導(dǎo)出到CodePen的能力。這樣您就可以在CMS或其他地方使用它，而無(wú)需完全導(dǎo)出。
6、同步它！
在整個(gè)項(xiàng)目中保持公共物品的完美和諧。這可以確保您的頁(yè)腳，導(dǎo)航，徽標(biāo)和其他任何內(nèi)容在編輯時(shí)保持同步。
我們?cè)谶@里談?wù)摴?jié)省時(shí)間。

軟件功能

一、統(tǒng)治你的內(nèi)容：
填充白色畫(huà)布從未如此簡(jiǎn)單。
1、組件
使用組件庫(kù)可以省去重復(fù)的設(shè)計(jì)工作，并縮短生產(chǎn)時(shí)間。保存并重復(fù)使用其他項(xiàng)目中的項(xiàng)目。
2、符號(hào)
將導(dǎo)航欄，頁(yè)腳，注冊(cè)表單等轉(zhuǎn)換為符號(hào)，您可以通過(guò)一次編輯在整個(gè)網(wǎng)站上進(jìn)行更改。
3、元素
用HTML5提供的所有內(nèi)容填充空白畫(huà)布。拖入原始元素并根據(jù)需要設(shè)置其樣式。
4、檢驗(yàn)員
檢查器為您提供了頁(yè)面內(nèi)容的詳盡概述。搜索術(shù)語(yǔ)以深入到元素級(jí)別，然后查看CSS標(biāo)記。
5、自定義代碼
在或頁(yè)面的任何位置使用javascript和CSS樣式表。全屏欣賞我們的代碼編輯器對(duì)話(huà)框。
二、適合您的內(nèi)容：
使您的項(xiàng)目對(duì)任何設(shè)備或?yàn)g覽器負(fù)責(zé)。
1、CSS網(wǎng)格
通過(guò)調(diào)整列和行并跨元素來(lái)創(chuàng)建無(wú)縫布局，使設(shè)計(jì)栩栩如生。不見(jiàn)不散。
2、彈性盒
輕按按鈕即可對(duì)齊，堆疊或重新排序元素。這是一種非凡的工具，應(yīng)該成為任何響應(yīng)式設(shè)計(jì)工具包的一部分。
3、自定義斷點(diǎn)
在任何像素寬度下均可享受自定義斷點(diǎn)的自由。讓您的內(nèi)容決定所需的位置，并完全控制任何屏幕設(shè)備。
4、設(shè)備視圖
輕松預(yù)覽各種現(xiàn)代設(shè)備。您可以將任何屏幕尺寸添加到設(shè)備列表中。您還可以在任何瀏覽器上快速預(yù)覽。
5、后備能力
針對(duì)最廣泛的瀏覽器支持進(jìn)行設(shè)計(jì)，并針對(duì)支持最新和最強(qiáng)大的CSS屬性的瀏覽器進(jìn)行增強(qiáng)。
三、免代碼設(shè)計(jì)流程：
選擇，單擊，指向，選擇和滾動(dòng)以創(chuàng)建世界之外的網(wǎng)站和頁(yè)面。使用無(wú)代碼的CSS控件，您可以專(zhuān)注于設(shè)計(jì)，而我們會(huì)處理代碼。
1、創(chuàng)建可重用的CSS類(lèi)
與基于CSS的類(lèi)系統(tǒng)一起使用，可以同時(shí)在多個(gè)元素之間進(jìn)行樣式更改。
2、版式
可以訪(fǎng)問(wèn)完整的Google字體庫(kù)。編輯印刷參數(shù)，例如行高，字距調(diào)整，跟蹤，權(quán)重等等。
3、CSS過(guò)濾器和混合模式
跳過(guò)照片編輯工具，直接在頁(yè)面畫(huà)布上工作。應(yīng)用獨(dú)特的混合模式和效果，例如重疊，柔和的光線(xiàn)或乘法以創(chuàng)建自己的品牌形象。
4、顏色
使用選擇器或滾輪選擇任何顏色，創(chuàng)建調(diào)色板并在項(xiàng)目中共享它們。
四、導(dǎo)出您的內(nèi)容：
直接發(fā)布到網(wǎng)絡(luò)上，或交出干凈的代碼。
1、發(fā)布
將您的網(wǎng)站置于網(wǎng)上從未如此簡(jiǎn)單。發(fā)布到世界一流的托管堆棧，該堆?？梢蕴幚砟蚱鋻伋龅乃辛髁?，并始終通過(guò)HTTPS連接進(jìn)行保護(hù)。
2、導(dǎo)出清潔代碼
導(dǎo)出干凈，語(yǔ)義和W3C兼容的代碼。一次單擊即可從硬盤(pán)驅(qū)動(dòng)器獲取HTML和CSS，JavaScript，圖像和其他資源。
導(dǎo)出干凈的，符合語(yǔ)義且符合W3C的代碼
3、提升您的SEO
為SEO或插件添加元數(shù)據(jù)和其他頭（或尾）代碼。還要激活結(jié)構(gòu)化數(shù)據(jù)工作流程，以為Google和其他搜索引擎標(biāo)記您的內(nèi)容。
提升您的SEO添加結(jié)構(gòu)數(shù)據(jù)
4、在CodePen中查看
熟練的用戶(hù)會(huì)喜歡將元素的標(biāo)記導(dǎo)出到CodePen的功能。這樣，您可以將其與CMS或其他地方一起使用，而無(wú)需進(jìn)行完整的導(dǎo)出。