CoffeeCup ResponsiVe Site Designer V4.0.3295免费版

CoffeeCup Responsive Site Designer免费版能快速建立设计网页内容，通过输入html、css及js等代码，就能完成网站制作，并且对代码需求极低，可通过图形化界面直接拖动元素完成操作，CoffeeCup Responsive Site Designer免费版拥有导航栏、菜单及滑块等多种组件，极大降低了网站维护及运营的成本，从事网站开发的用户不要错过。

CoffeeCup Responsive Site Designer免费版软件特色

1.位置与Flexbox

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

2.全新的用户界面

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

3.CSS过滤器和混合模式

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

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

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

5.比乐高玩具

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

6.语义简洁的代码

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

7.出口到CodePen

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

8.同步起来!

保持项目中常见项目的完美。这将确保您的页脚、导航、徽标和任何其他内容在编辑时保持同步。

CoffeeCup Responsive Site Designer免费版安装方法

1、下载CoffeeCup Responsive Site Designer官方版软件包，解压缩点击CoffeeCup Responsive Site Designer 4.0 Build 3071.exe，打开以后点击next安装

2、软件的协议内容，在这里阅读协议，点击accept接受

3、软件的安装地址默认在C:Program FilesCoffeeCup SoftwareResponsive Site Designer

4、提示安装准备界面，点击next就可以直接安装

5、提示安装进度，等待软件安装完毕

6、点击finish就可以启动Responsive Site Designer

CoffeeCup Responsive Site Designer免费版使用说明

界面

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

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

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

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

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

选择CSS框架

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

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

首次启动应用程序时，系统会提示您选择要用于构建项目的框架。您还可以保存对未来站点项目的偏好。

在编码环境中，存在很多差异，但除非您的客户需要特定的框架，或者您计划稍后使用原始代码，否则无需深入了解细节。除了特定于CSS类的选项和属性之外，每个框架都具有相同的移动优先视觉工作流程。这就是在CoffeeCup环境中使用它们的好处 - 我们可以轻松地为独特外观自定义默认框架样式。

不是CSS框架的粉丝？ Vanilla 让您以自己的方式解决设计问题！它没有任何预设 - 没有固定的断点，没有预定义的选择器，没有默认的元素样式。由于CSS Grid和Flexbox，它重量轻，但响应速度快。

只需注意一点，要使用Vanilla创建交互式组件，您必须连接自己的脚本。否则，您可以使用Bootstrap，Foundation和Materialize的内置交互式脚本来创建特定于框架的下拉菜单，照片库，弹出窗口等。

工作区

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

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

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

在画布上，可以通过单击元素或从动态下拉列表中选择元素来选择元素。可以将选定的元素拖放到不同的位置或容器中。所选元素也可以复制或复制并粘贴到不同的区域。

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

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

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

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

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

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