ResponsiVe Site Designer V4.0.3721完美版

Responsive Site Designer完美版是由CoffeeCup推出的一款专业级响应式网站设计软件，可以为用户提供一个实时可视化的网页设计环境，功能强大，Responsive Site Designer完美版还具有功能齐全的文本编辑器，编辑和粘贴文本，可以用来创建炫酷的交互式组件，帮助用户制作出一个满意的网站。

Responsive Site Designer完美版功能介绍

1、拖放内容元素，如标题，图像，按钮，图标等

2、在项目资源库中组织图像和其他资产

3、设计与悬停，活动和按下状态控件的交互创建强大的3D效果，使网站活跃起来……

4、使用直观，功能强大的文本编辑器编写，粘贴或编辑文本

5、无限制的网站项目，每个页面最多50个(现在)页面

6、全范围视口涓块-在应用程序中以任何可能的宽度查看和处理设计。

7、具有相应媒体查询的移动优先和桌面下行工作流程

8、行可以被约束到特定宽度或全宽度以吸引视觉(背景)效果

9、为SEO或插件添加元数据和其他头(或页脚)代码

10、导出可以上传到任何服务器的干净，语义，HTML和CSS(包括任何添加的插件)

Responsive Site Designer完美版使用说明

提示01：添加和处理图片。

我们通常使用占位符图像开始设计。但是在这个过程中的某些时候，这些占位符图像需要用真实的交易来代替。这是如何做。

1.转到设计窗格

双击占位符图像将自动启动“ 设计”窗格。您也可以直接单击窗格选项卡或右键单击图像。

2.选择你的照片

使用“ 图片”下拉列表选择源。对于在线图像，您只需粘贴链接即可。本地图片可以添加到项目资源中，并将包含在导出或上传中。除非指定了不同的样式，否则元素将采用新图像的尺寸。

3.选择样式

向下滚动到“ 样式”部分。首先进行的调整之一通常是 尺寸下的最大宽度值。下面还提供了各种其他设计控件。图片也可以在断点处更改 - 向移动用户提供较小尺寸的图像可以提高性能并让他们满意！

提示02：添加，格式化和链接文本。

在文本编辑模式下，您可以粘贴或键入文本。文本的选定部分可以给出独特的格式或转换为文本链接。

1.右键单击文本元素

可以通过右键单击并选择“ 编辑文本”选项来激活文本编辑器 。您也可以三击该元素或使用“编辑文本”按钮（在“设计”窗格上的ID输入框下方）。

2.添加链接和格式文本

您可以选择部分文本来添加链接，或者以不同于未选择的文本格式化它们。这些（内联）样式可以赋予类名，以便于重用和更新。我们还有一个全面的文章和视频教程，更详细地介绍了各种链接选项。

3.格式和状态控件

使用“设计”窗格上的“排版”控件设置整个元素的文本样式。格式化工具的外观和工作方式相同，但仅影响所选文本（以及之前给出相同类名的选择）。

技巧03：任何宽度的内容组织的响应式网格。

在网页设计中，网格与电子表格非常相似。它们由行和内容列（单元格）组成，用于对齐和组织页面元素。

1.了解网格

每行可以划分为多个内容列。最大数量取决于网格配置。默认值为12列，几乎在所有情况下均可正常工作。上面的例子有4行。前两行都有2个内容列。这意味着每个内容列将占用6个网格列（12个中的列）。

2.管理布局

“布局”窗格包含一系列用于管理和配置网格的工具。可以添加，合并列，并可以调整跨度宽度。当一行中列的总跨度超过最大值时，它们将堆叠。这可用于在断点处进行布局更改。

3.堆叠列

在上面的示例中，行3中的列的跨度宽度已经调整超过断点。（右上角有黑色填充的白点）第1列和第2列现在使用6的跨度（12个 - 宽度的一半）。这使得第3列堆栈。第3列的跨度宽度已设置为最大值12，因此它占用了整个宽度。

技巧04：使用选择器实现高效的工作流程。

使用功能强大的选择器系统一次将样式应用于多个元素。

1.从元素类型开始

Class是下拉列表中的默认选项，但主要用于设计的后期阶段。最有效的工作流程是首先为元素类型定义样式。在使用下面的设计控件之前，从“应用于”下拉列表中选择“ 类型”选择器。应用于该类型的样式具有粉红色指示符。

2.使用类来进行变化

设置所有默认样式后，可以添加类以创建设计变体。这些变化与设计中元素的不同用法有关。在上面的示例中，标头使用类添加顶部边框并使字体为斜体。font-family仍然与为该类型指定的相同。

3.了解颜色

上图显示了在Type上指定了步骤1中段落的字体系列。颜色和线高也是如此。 的蓝色指标显示，字体大小和重量为类指定。的黄色指示器告诉我们，对准被设置用于此特定元件仅仅-on的（唯一的）ID。

提示05：按照主题中的设计说明进行操作，并接受应用程序的帮助。

我们的主题不仅看起来很棒，而且还包括解释性文本，可以帮助我们学习如何创建特定的设计效果。Inspector窗格可以提供帮助并提供洞察力！

1.阅读说明

我们正在交换主题中的简单填充文本，以解释描述如何创建某些设计效果。 这些部分提到了HTML的组织方式 - 例如，如果使用容器 - 以及正在使用哪种样式属性。

2.亲自检查和看看

响应式站点设计师是一款出色的学习工具！在任何时候，您都可以跳转到Inspector窗格并亲自查看所选元素的HTML结构和CSS属性。只需右键单击元素，然后选择“ 转到”>“检查器”。将显示每个HTML元素的元素顺序和关联的CSS。仅在“设计”窗格上编辑CSS（暂时）。

3.检查员的力量

元素也可以 在不同的位置拖放，从而改变元素顺序。当预览区域中的放置区域或元素很小时，这可能会很方便。您还可以悬停元素，并在预览区域中查看轮廓。这有助于了解元素占用多少额外空间（边距，填充）。

提示06：使用滑块以不同宽度查看设计。

向左和向右移动宽度滑块以查看所有可能宽度的设计。在需要的地方使用断点来调整布局或元素。

1.减小（增加）宽度

响应式设计并不意味着设计平板电脑或iPhone - 它意味着设计任何宽度。宽度滑块可用于以任何可能的视口宽度查看设计，并有助于创建在任何屏幕和设备上看起来都很好的网站。

2.断点按钮

带有+和 - 的白点可用于添加（或删除）断点。这些点将添加到滑块的当前位置上方，显示在设备指示器左侧显示的像素值处。设备图标指示当前宽度可能使用的设备类型。它们具有所有不同的设备尺寸，仅供参考。变焦按钮实际上不属于此提示

3.更新样式

从列跨度到边框颜色的任何样式都可以在断点处进行调整。当白点具有黑色中心时，断点处于活动状态，可接受样式更改。在上面的示例中，这意味着从该点开始应用较小的字体大小，直到在下一个断点处应用进一步的更改。在桌面向下工作流程中，当滑块位于点的左侧时，断点处于活动状态。移动优先设计以相反的方式工作。