在Google Web Designer上创建横幅

第1步：入门

Google Web Designer是一个免费的开发环境，用于网站管理员提供创建网页的能力，包括使用CSS3和HTML5等横幅等单个项目。要使用此工具，首先，您需要从官方网站下载安装文件并安装。

从官方网站下载Google Web Designer

程序安装

1. 单击上面呈现的链接转到现在的页面，然后单击“下载Web Designer”按钮。请注意，该程序仅支持Windows 7及更高版本。



2. 通过“保存弹出窗口”，在计算机上选择一个位置，并使用底部面板上标记的按钮。



3. 使用刚保存文件的文件夹，然后双击鼠标左键以执行开放。因此，应打开安装窗口。

   

   安装过程本身以完全自动模式执行，将所有工作文件保存到系统磁盘上的其他程序。

授权

1. 如果要在互联网上保存项目或一般来说，专门为谷歌的内部服务创建横幅，另外值得执行授权。为此，请使用相应的图标运行程序，关闭“欢迎”窗口，然后单击顶部面板上的“登录”按钮。



2. 从Google帐户中指定数据，单击“下一步”并在必要时确认。之后，将立即添加帐户，而无需一些单独的设置。

更改设置

1. 已经理解了准备，现在可以改变软件的基本设置，以便于将来的工作。使用顶面板，展开“编辑”菜单，然后在列表末尾选择“设置”。



2. 在“Main”选项卡上，您可以更改程序的初始行为以快速打开项目，分配一个文件夹以保存创建的模板，以及在创建时设置公告规范的默认值。



3. 以下页面“布局视图模式”包含编辑器的外观参数。更改所呈现的设置，您可以调整网格和绑定对象以进行更准确的元素定位。



4. Google Web Designer拥有具有其设置的代码编辑器。因此，在“代码查看器”选项卡上，您可以分配设计样式，设置格式参数并向任务添加密钥绑定。



5. 最后一个选项卡“扩展”仅包含两个参数 - “日志记录”和“应用程序刻度”。在第一种情况下，包含将创建更改日志，而第二项允许您为编辑器的工作区域设置新的标准比例。

   当心！如果您设置太多规模，则可能出现屏幕上缺少空间的问题，以便重要的项目。

任何改变都需要某种方式或其他需要重新启动程序。如果您刚刚开始使用编辑器，请不要忘记在每个选项卡上使用单独的项目重置设置的可能性。

第2步：创建横幅

通过配置程序，您可以使用Google Web Designer的所有选项开始在横幅上工作。但是，让我们注意到此补救措施仅作为可视编辑器，允许您仅发布单独创建的现成元素，例如在Photoshop中。

使用工具

1. 准备布局后，您需要熟悉工具。在主要注意的顶部面板上，列表“查看”值得，允许启用和禁用辅助元素。



2. 通过“窗口”菜单，您可以暂时禁用特定的接口元素。例如，如果要制作静态横幅，则“时间轴”只会干扰，因此最好删除相应的勾选。



3. 主编辑器工具呈现在左栏中。我们不会考虑每个选项，因为在创建时并非所有项目都使用，但我们建议尝试自己。



4. 工具栏旁边呈现出具有几个贡献的“播音员广告”。特别关注应导致与一个或另一个横幅对象的行动负责“事件”，并设置样式参数的“CSS”。



5. 程序的右侧还具有一组工具，允许您控制颜色，文本，对象结构，属性和简单的图层。与主要的函数一样，窗户更好地在创建项目的过程中独立研究。



6. 如有必要，可以使用“时间轴”创建动画横幅。同时，要管理编辑器的主区域，请使用钳位空间和LCM，以及具有比例参数的块。

填写布局

1. 创建横幅始终以后台启动，因此，在准备布局后，打开“属性”选项卡和页面块，使用“填充”小节。可以安装任何颜色，包括梯度或完全透明的背景。



2. 此外，在队列中，提前准备的图形元素。您可以通过单击底部面板上的“+”图标在“对象库”选项卡上执行此操作。



3. 选择所需的图形文件，然后单击“打开”。这可以针对所有必要的层次，分开地进行一次，重复这些动作。



4. 要容纳，请将所需的图像夹在对象库选项卡上并将编辑器拖动到主区域。

   

   您可以使用Active Selection Tool控制对象的位置，并使用Active Selection Tool进行缩减。如有必要，您可以随时使用指南。



5. 通过在工作区中或结构编辑器选项卡中选择图形文件，请打开“属性”。比背景的情况远远超过了更多的可能性，例如边界设置或缩进。



6. 如果横幅设计提供了文本的存在，则可以使用标准的Google Web Designer工具添加相应的项目。单击左窗格的“T”图标，单击主编辑器窗口，然后输入所需的字符集。

   

   要控制文本，请在“结构编辑器”选项卡上选择图层，展开“文本”并设置相应的参数。

设置动画

1. 在“时间轴”块中，您可以添加和配置动画的效果。要启动，请使用“+”图标单击“添加图标”按钮。



2. 单击框架之间的“.5s”图标，并设置所需的参数。例如，您可以更改转换的持续时间和样式。



3. “时间轴”上的每个单独的块完全独立于其他块。要创建动画，请将某些项目更改为自行决定，并使用播放按钮检查结果。

   

   完成编辑过程后，请使用重复按钮。这将创建一个无尽的动画。

添加事件

1. 使用布局了解，您需要为整体添加各个元素或整个横幅的过渡事件。要执行此操作，请在“扇区检查员”列中，打开“事件”选项卡，然后单击底部面板上的“+”图标。



2. 在从“目的”列表中打开的窗口中，选择将引用的对象。



3. 在“事件”页面上，展开“鼠标”页面，然后选择“单击”。根据结果​​的要求，您可以组合不同的安装。



4. 进一步从“动作”列表中，打开Goog​​le声明并设置“转换”值。这样的选择将使用户进入互联网上所需的特定页面。



5. 作为“收件人”，选择一个“GWD-AD”版本。



6. 在现场的最后阶段“标识。指示符»检查快捷方式链接，并通过指定所需页面填写“URL”。使用“确定”保存。

使用源代码

1. 如我们所提到的，Google Web Designer包含内置代码编辑器。它可以通过使用顶面板右侧的“代码”按钮启用它。



2. 您可以不仅使用Visual Editor对横幅结构进行更改，也可以直接使用项目文件中的代码。当对齐众多小元素或添加程序未提供的事件时，这可能非常有用。

无论应用程序如何，所描述的操作都应该足以创建横幅。与此同时，您可以通过组合这些工具来显着扩展功能。

第3步：完成

当横幅完成并准备放置在网站上时，您可以进入最后一步。首先，值得检查您对真实网页的工作的样子。

预览

1. 在顶部面板上，单击“预览”按钮以打开“附加”菜单。在这里，您可以指定将打开横幅的浏览器。



2. 打开所有功能并保留横幅的外观，但具有一些功能。例如，即使您安装了动画的无限重复，它也将仅限于一次迭代。



3. 如有必要，您可以随时向其他人展示结果。为此，请选择“获取共享链接”并确认对Google帐户的访问权限。

   

   结果，如上所述，屏幕上将出现链路以在这种模式下观看横幅。当然，只有您有帐户。

保存和出版物

1. 要保存项目，请先打开“文件”菜单并使用“保存”选项。之后，源文件将保存在计算机上，随后可以打开。



2. 您可以通过在程序的右上角打开“发布”菜单并选择保存的一个位置来准备一个项目。



3. 按自行决定更改发布窗口中的参数，只留下所需的复选框，然后单击“发布”。无论项目的大小如何，都会快速捕捉。

   

   因此，该文件夹可以在保存位置找到。横幅在网站上的放置在该网站的依赖范围内不同，并且一般不再属于创建程序。