CoffeeCup Responsive Site Designer

　　CoffeeCup Responsive Site Designer是一款功能丰富的CSS框架软件，可以帮助用户快速设计新的网页，软件提供很多窗口样式，您可以在启动软件的时候选择一种模板开始设计，软件支持、内容窗格、设计样式窗格、布局样式窗格、彩色编码CSS选择器、元素窗格、页面管理器等多种样式，同时支持CSS Grid、Web布局、高级网格配置、视口滑块和断点等功能，帮助用户快速建立响应式网站，如果你需要设计CSS网站就可以下载这款软件！

软件功能

　　1.位置与Flexbox

　　按下按钮即可对齐、堆叠或重新排列元素。它是一个非凡的工具，应该成为任何响应式设计工具包的一部分。在我们的免费互动Flexbox指南中，探索是什么让Flexbox如此神奇，并探索真实的设计实例。

　　2.全新的用户界面

　　基于社区的反馈，我们着手解决可见性问题，并更新了UI。它令人惊叹的改头换面使它更清晰，更容易导航，帮助你比以往任何时候都更快地设计你的页面。

　　3.CSS过滤器和混合模式

　　动态更改颜色，调整较小显示的设置，并让它们以交互效果和转换响应用户。这些技术将把您的站点带到另一个层次!

　　4.一个无代码的设计工作流

　　选择、单击、指向、选择和滚动，创建世界之外的网站和页面。使用无代码CSS控件，您可以专注于设计，而我们则负责代码。您可以自由地探索新的外观和尝试独特的布局。

　　5.比乐高玩具

　　忘记重复的设计工作，使用组件库加快生产时间。在其他项目中保存和重用项。CSS框架提供了一种优雅的方法来构建导航菜单、手风琴、很酷的选项卡面板、模态对话框等等。构建一次，随时使用!

　　6.语义简洁的代码

　　在实时浏览器环境中构建可以让您的创造力蓬勃发展，因为您不会被代码语法所困扰。干净的语义代码将为您生成。CSS3直接编写到一个真正的样式表中，从而实现无膨胀、易于解释的规则。可用的HTML元素是基于标准的。标签可以通过两个简单的点击来切换，使用语义HTML5元素，从而使页面标记良好，并向搜索引擎传递含义。

　　7.出口到CodePen

　　熟练的用户会喜欢将元素的标记导出到CodePen的能力。通过这种方式，您可以在CMS或其他地方使用它，而不需要经过完整的导出。

软件特色

　　1：实时画布。这是一个基于浏览器的工作区域。一个主要的优点是，您创建的内容与在网站上发布网站时的外观和感觉相同。画布主要用于实时设计视图，选择或重新排序元素以及编辑文本。

　　2：控制窗格。在右侧，有4个窗格，每个窗格都具有可视化管理内容，布局，样式，HTML，CSS和Javascript以及页面属性的特定角色。

　　3：Viewport滑块和断点管理器。在工作区域的正上方，您会看到一个名为“The Responsifier”的酒吧。此栏包含许多用于管理所有可能设备宽度的设计的工具。

　　断点表示特定屏幕尺寸的布局或内容样式的变化，在宽度滑块顶部有一个点。特定于框架的断点由颜色指示，而自定义断点将显示为白色。使用宽度滑块左侧的+/-添加和删除断点。

　　4：工具栏。访问常用功能，如页面管理器，项目资源，浏览组件库，在特定浏览器中启动预览，切换断点，甚至发布。

安装方法

　　1、打开CoffeeCup Responsive Site Designer 4.0 Build 3071.exe软件直接启动，点击next

　　2、软件的协议内容，接受协议继续按照

　　3、默认的安装地址是C:Program FilesCoffeeCup SoftwareSite Designer

　　4、提示准备安装界面，点击install

　　5、软件已经开始安装，等待安装结束

　　6、CoffeeCup Responsive Site Designer安装结束，点击finish

使用说明

　　主题经理

　　查看Materialize，Vanilla，Foundation和Bootstrap框架的默认主题。使用这些主题来快速启动您的网站创建。转到文件>新建主题以启动主题管理器。选择主题后，只需更改文本和图像以满足您的需求，您的任务就完成了！

　　选择CSS框架

　　数百万设计人员和开发人员使用CSS框架。他们使用经常维护和更新的组织良好的HTML，CSS和Javascript。此外，它们允许创建很酷的交互式组件，如dropups，导航菜单，画廊等，而无需与额外的脚本搏斗 - 甜蜜！

　　使用Site Designer，您可以从三个史诗框架选项开始您的站点项目：Foundation，Bootstrap，Materialize。

　　您为项目选择的框架将反映在应用程序的左上角。这有助于您在多个项目之间跳转时快速识别您正在使用哪一个。

　　帆布（工作区）

　　此区域可视化网站访问者在登录页面时将体验到的内容。结合Slider（The Responsifier的一部分），可以在设计时预览每个设备宽度。

　　如果您有兴趣了解设计的特定部分在不同屏幕宽度下的行为，请选择该部分中的任何元素。在普通浏览器中，调整大小时内容将流出视图，但是，在站点设计器中，所选内容将自动滚动回视图。应用程序的一个小但非常方便的特权！

　　将鼠标悬停在任何元素上。单击以从下拉列表中选择嵌套项目，或使用图标编辑文本，复制或删除项目。

　　插入页面文本/使用文本编辑器

　　文本编辑器处于活动状态时，可以在屏幕上直接编辑文本元素。它可以通过多种方式激活。右键单击文本元素将打开一个带有“文本编辑”选项的上下文菜单。

　　您也可以双击屏幕上的文字开始输入单词。最后，单击“ 样式”窗格顶部的“ A ”图标，或将鼠标悬停在任何文本元素上。

　　激活文本编辑模式后，面板顶部将出现蓝色横幅指示符。

　　还将显示几个排版控件以进行内联编辑。您可以在段落中加粗单词，插入链接，更改颜色或字体等。如果要从常规默认排版选项中进行变换，请仅使用这些样式控件。

　　例如，在句子中间加粗字词或更改单词的颜色将与文本编辑器窗格内联样式。

　　“样式”窗格的第二部分分为三个部分：布局，设计，效果。它们包含管理设计布局，样式元素，版式，尺寸等所有输入，工具和控件。此处也可以找到Flexbox和CSS Grid等布局控件。

　　工具功能

　　主工具栏可以访问与设计工作流程不太相关的功能。有一些按钮可以访问页面管理器或管理项目资源，如图像和其他文件。快速访问主题管理器以及预构建的组件。

　　访问更高级的控件，例如激活功能查询和插入结构化数据。 您还可以使用工具栏功能在任何已安装的浏览器上预览设计，以导出和发布站点。

　　GUIDES

　　“指南”按钮允许您在元素和网格结构周围可视地切换指示器，从而可以轻松了解元素的位置和间距。

　　网格线是浅色的水平和垂直线，出现在项目中的元素周围。这些准则用于定义页面上元素和容器的边界。

　　X射线模式使您可以一目了然地查看元素容器的设置方式。启用此选项后，将打开所有网格选项，删除背景图像，并在所有元素上设置不透明度，以便您查看网格配置。您还会注意到事物的颜色编码以便于识别。

　　切断点

　　断点模式可用于定义特定媒体查询的样式，与滑块位置无关。通过禁用所有断点，样式不依赖于任何媒体查询。

　　例如，这可以让您在处理默认样式时在工作区域中拥有更多空间。如果您习惯使用桌面下载功能，则此功能非常方便。当您准备好对更大的屏幕进行调整时，请务必重新启用它们。

　　设备视图

　　使用“ 设备视图”可以跨各种类型的屏幕预览您的创建。这有助于您测试内容在特定设备上的显示方式，并确定是否需要进行调整。

　　页面（页面管理器）

　　需要在项目中添加页面吗？单击工具栏中的“ 页面”图标。这将启动页面管理器下拉菜单。您将能够看到站点中所有页面的列表，并可以在它们之间循环。

　　从这里，您可以快速添加空白页面或复制项目中的现有页面。

　　选择下拉列表底部的“ 管理项目 ”以打开“页面管理器”。

　　此部分可以轻松管理项目页面，更改页面顺序和添加元数据。

　　要在项目中添加，复制或删除页面，请使用页面管理器左下角的图标。要重新排列页面顺序，请单击页面右侧的向上/向下↕图标将其拖动到位。

　　您的页面名称用作链接目标。从其他位置链接时，您将使用页面名称。切记不要在页面名称中使用空格。如果您的页面名称长多字，请始终使用连字符分隔单词，或将它们拼接在一起以制作一个长单词。

　　目前，该应用程序每个项目最多支持125页。这个数字会定期继续增加。

　　设计......

　　Design For ..工具栏图标允许您激活 功能查询。

　　此功能允许您使用CSS Grid作为布局框架创建生产就绪设计 - 并为不支持的浏览器提供替代样式表！通过应用后备，您的设计将始终在各处看起来都很好。

　　首先，首先为Internet Explorer（以及可能不支持CSS Grid的任何其他浏览器）构建您的布局。一旦默认布局和样式到位，将Display For control 切换到Grid，然后调整现代浏览器的设计。

　　导出到CODEPEN

　　熟练的用户会喜欢将元素的标记导出到CodePen的能力。这样您就可以在CMS或其他地方使用它，而无需完全导出。

　　只需右键单击任何元素即可激活在CodePen中打开的选项。组件

　　使用CSS框架的好处是能够创建更复杂的网站功能。这些框架提供了一种优雅的方式来构建导航菜单，手风琴，酷炫的选项卡面板，模态对话框，下拉，以及更多，而不必混淆外部脚本。

　　将自定义组件保存到库中，以便在整个项目中重用它们。可以为项目提供描述并组织在文件夹中以使您有条理。

　　使用“组件”工具栏图标从库中添加组件。

　　结构化数据

　　结构化数据图标使您能够插入JSON-LD Schema.org页面标识标记，搜索引擎使用这些标记来解释您的网站和页面内容。

　　在网站的上下文中，结构化数据是“额外”信息，使搜索引擎能够更好地理解页面上的内容。使用此方法描述您的页面内容提供了许多好处。一般来说，这可以提高网站在相关搜索结果中的可见性，并带来更多的自然流量。

　　在Site Designer中，应用此标记的工作流程非常简单直观。无需任何进口或进口！只需使用下拉菜单并浏览关键字，即可找到最能识别您的业务，组织或广告素材作品的关键字。

　　尽可能多地向下钻取。提交您的餐厅提供的美食，标记您教堂的讲道，发布营业时间等等。完成后，您可以点击“ 使用Google测试”按钮，查看他们是否推荐了任何其他信息。

　　出版和出口

　　控制您的内容有两个选项可供选择，让您的网站在线; 发布到S-Drive或使用FTP客户端导出到任何服务器。

　　通过发布到S-Drive，该应用程序可以自动将所有文件上传到您的CoffeeCup帐户，从而为您完成所有工作。没有麻烦，没有大惊小怪！为此，请单击“设置”工具栏按钮并切换到“发布”部分。然后输入您的CoffeeCup帐户信息。

　　可以使用“常规设置”配置项目名称和导出文件夹结构。

　　使用导出方法时，将生成包含所有网站文件的文件夹。然后，您需要将此文件夹中的所有内容上传到您自己的托管服务。单击“导出”工具栏图标或转到“文件”菜单>“导出”以开始导出过程。

　　资源

　　“资源”工具栏图标将启动文件管理窗口。您可以在此处管理其他项目文件。

　　创建文件夹以组织内容，例如图像，文档和脚本。发布或导出站点时，文件结构将保持不变。

　　网格编辑器入门

　　要开始使用网格，只需单击“显示”切换并将其设置为“网格”。这适用于所有容器元素，从普通的ol'

　　到重要的。然后，启动网格编辑器 - 在本节下方的大屏幕截图中展示 - 以可视方式配置所需的网格设置。

　　最后，可以告诉每个元素（海上的船）去特定的位置。或者你什么都不做，看着自动放置算法将网格元素弹出到位。

　　网格编辑器对话框

　　配置网格跟踪

　　网格列和行 - 网格轨道 - 使用相应的+按钮添加。要配置行或列设置，只需单击灰色标题即可。然后可以使用输入和单位选择器指定宽度和高度，其中包括新的令人敬畏的fr单位。可以使用高度（行）或宽度（列）切换选择单个值或MinMax值（非常方便！）。

　　还有一些管理控件可以轻松复制行和列或将它们移动到不同的位置。如果您有一个大屏幕并点击左下角的“应用于画布”按钮，您将看到网格容器中的所有元素都相应地重新定位。

　　定义默认放置行为

　　这可以通过“网格设置”部分中的控件进行影响。默认情况下，grid-items会逐行自动填充单元格。此自动放置算法可以通过本节中相应的下拉列表中的“自动流”属性进行影响。有关密集关键字如何工作的一些解释很快就会添加到网格指南中。

　　该对齐和对齐属性的作用非常相似，那么Flexbox如何对齐项目。它们确定项目沿列（块）和行（内联）轴放置在网格区域中的位置。

　　自动创建的行和列通常会增长和缩小以容纳它们保存的内容。使用“自动”控件可以为该情况指定默认大小。

　　可以使用Gap控件指定装订线。如果你像我一样，并试图在Flexbox布局中这样做，你会喜欢它在这里工作的方式！

　　创建网格区域

　　可以命名网格单元格。当相邻单元格具有相同名称时，将创建网格区域。可以通过简单地指定它们属于哪个区域来放置项目。管理布局的一种非常语义和方便的方法！

　　单击单元格以打开文本输入。名称可以直接输入单元格或右侧相应的控制区域（见下文）。

　　使用控制面板，您还可以指定区域需要拉伸的距离，它开始的列或行以及它的结束位置。完成后，不要忘记点击“应用”按钮。

　　要在区域中放置项目，只需选择元素，然后在“样式”窗格的“网格和Flexbox布局”部分中输入区域名称。

　　如果你像我一样，在设计时遭遇记忆力不好，那么自动推荐就是一个很好的帮助！

　　下面的视频快速展示了CSS Grid编辑器的工作原理。对于那些感兴趣的人，我们列出了为什么我们在它下面制作这个（免费）应用程序的原因。

　　使用网格的原因＃1

　　功能强大，热门，灵活都适用于未来的这种布局方法。但是，强大的新技术通常会带来一些学习曲线。CSS Grid也是如此。并且网格配置不容易看到这一事实并没有帮助！

　　可视网格编辑器（参见前面的大截图）说明了网格结构，可以作为快速参考。使用一系列冷却控件也可以轻松（重新）定义结构。

　　但这还不是全部。如上所示，自动建议的下拉菜单 - 在下面的屏幕截图中显示 - 可以在放置项目时提供帮助。

　　这总结了CSS Grid Builder和Site Designer背后的大部分原因。但是我们开发这个漂亮的应用程序的原因还有很多？