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

CoffeeCup Responsive Site Designer特色

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

軟件功能

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