分类

编程工具

Responsive Site Designer(网站设计软件)

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

大小:185 MB

语言:英文系统:WinXP, Win7, Win8, Win10, WinAll

类别:编程工具时间:2019-04-30

  Responsive Site Designer是一款网站设计软件,可以帮助用户在软件上编辑网页UI,可以在软件设计网站架构,可以通过内置的代码编辑器设计CSS、HTML,该软件设计功能很丰富,可以快速添加菜单界面,添加原型、添加图像,为设计师编辑网页界面效果提供更多帮助,其中图片元素就是一个很好的例子,我们在网格框架中选择使用块 和最大宽度:400px作为它们的默认值。这种方式将它们居中,就像将左右两边的边距值设置为自动一样简单,这里小编推荐的是免费版,下载就可以使用!

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

软件功能

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

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

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

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

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

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

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

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

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

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

软件特色

  子网格是列中的网格

  子网格是一个包含行和列的特殊容器。它允许与普通网格相同的布局操作。可以添加行并更改其尺寸,可以使用“布局”窗格上的“跨度宽度”控件控制列宽,并且可以使它们在断点处堆叠。subgrids的一个很好的用例是你有一个全宽行。子网格可以使所有元素保持居中,同时允许内容组织和布局(重新)结构化(在断点处)。

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  容器组元素

  容器可用于创建(可视)元素组,如上面显示的“活动卡片”。它们可以容纳,按钮,文本,图片甚至是子网格。容器也可以放在子网格列中。但是,子网格不能放入已存在于子网格中的容器中,也不能将容器放入容器中。额外奖励:您可以使用它们(作为叠加层)来创建炫酷的悬停效果和交互性。查看Flex City主题以获取示例。

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  向页面添加自定义HTML或代码对象。

  使用HTML元素添加自己的代码片段或从其他应用程序(如表单生成器和响应内容滑块)导出。

  1.删​​除HTML元素

  将HTML元素放在要显示自定义代码或对象的位置。这适用于所有类型的对象,从菜单和Web表单到酷炫的幻灯片。这些对象可以从我们的应用程序(如表单生成器)导出,也可以从第三方应用程序导出。

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  2.添加代码 - 调整设计

  可以将代码插入“设计”窗格的HTML框中。在上面的示例中,显示了幻灯片的代码。HTML元素可以像其他具有边框,背景等元素一样定位和设置样式。是的,在开发路线图中创建了一个更大的框来添加和编辑代码。

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  3.某些对象需要额外的代码或链接到资源

  可以使用“头(或页脚)”框链接样式表和其他资源文件。为了不干扰RSD的内部,一些对象(主要是使用Javascript的对象)现在无法在woking区域中实时预览。您可以使用工具栏上的“预览...”按钮在浏览器中查看它们。

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

安装方法

  1、下载安装程序responsive-site-designer-full-win-en-2.5-2425.exe,打开以后点击next安装

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

使用方法

  1、打开Responsive Site Designer软件提示帮助功能,你可以在软件界面点击链接查看帮助

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  2、也可以在help界面查看帮助,直接访问官方网站的教程界面

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  3、软件界面功能很多,如果您会设计网站就自己下载吧!

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

使用说明

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

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

  1.转到设计窗格

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  2.选择你的照片

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  3.选择样式

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  提示02:添加,格式化和链接文本。

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

  1.右键单击文本元素

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  2.添加链接和格式文本

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  3.格式和状态控件

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

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

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

  1.了解网格

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  2.管理布局

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  3.堆叠列

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

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

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

  1.从元素类型开始

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  2.使用类来进行变化

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  3.了解颜色

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

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

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

  1.阅读说明

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  2.亲自检查和看看

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  3.检查员的力量

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

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

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

  1.减小(增加)宽度

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  2.断点按钮

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

  3.更新样式

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

Responsive Site Designer(网站设计软件) 2.5.2425 免费版

∨ 展开

网友评论

我要跟帖
取消
所有评论 共 0