muse ui的使用_使用Adobe Muse CC 2014快速创建网站

muse ui的使用

在本教程中，我将快速向您展示如何使用Adobe Muse CC建立网站。 除其他外，我们将：

• 创建和管理网站结构
• 使用母版页
• 展示智能指南
• 看看Typekit字体
• 使用动态导航
• 实施幻灯片小部件

观看截屏

下载视频或在YouTube上订阅Tuts + Web Design

阅读教程

嗨，您好！ 我叫Michael Chaize。 我是Adobe的Creative Cloud传播者，在本教程中，我将向您展示如何使用Adobe Muse CC快速创建网站。

起步

首次启动Adobe Muse时，我们会看到此初始屏幕，您可以说我想创建一个新站点 。

然后定义页面的尺寸。 如果您希望作为初始布局，以桌面用户，平板电脑用户或电话用户为目标，并设置页面的边距。 因此，我将单击OK ，并将发现包含所有页面的计划工作区。

目前，我只有一个主页，但是在这里我可以说我还将需要一个产品页面，也许还有一个About页面。 在产品中，我将获得产品A，在同一级别上将获得产品B。因此，这就是您可以非常快速地创建网站结构的方法。

母版页

您也有母版页。 因此，每次在首页的页眉或页脚中添加设计元素时，它都会出现在所有页面上。 对于标题，我将在背景中创建一个矩形。 也许用深色填充它。

我想添加一个徽标。 因此，这是一个图像，您可以直接从磁盘拖放图像。 好的，让我拖放一个PNG文件并将其放置。 您会看到您获得了智能指南，可以自动将您的元素捕捉到舞台上的其他元素。

现在，如果我返回网站的总体规划，则会看到标题出现在所有页面上，因为它是母版页的一部分。 好的，现在我可能想添加一个导航菜单来浏览页面。

导航小部件

所以这是您将使用小部件库的地方。 这是一个交互式小部件库。 在这种情况下，您将获得按钮，诸如灯箱显示屏，窗体，菜单，面板，灯光显示之类的组件，我们将使用水平菜单并将其放置在页眉中。

它会自动获取计划中定义的结构。 因此，我在导航菜单中已经有三页。 主页 ， 产品和关于 。 实际上，这是一个动态的窗口小部件，因此，如果我添加另一个要命名为Contact的页面，并且如果返回到主页，则我已经有了contact按钮。

如果单击蓝色图标，将获得小部件的设置。 也许您还想显示子级页面。 所以我想说， 所有页面都可以样式化。

要选择网络设置字体，您将在此处找到经典字体，但是您也可以决定添加来自类型工具包的网络字体。 它将自动浏览typekit上可用的免费字体目录。 例如，您可以说要使用actor字体，单击OK，它将被添加到字体列表中。

您可以在这里直接选择它。 因此，这就是创建菜单以及然后添加文本段落的方式。 它不应该在母版页上，而要在主页上说。 您只需要定义一个区域并说欢迎进入我的网站 。

同样，我将只选择actor字体，也许会增加文本的大小，然后我们开始。

幻灯片小部件

然后在右侧，我将添加另一个交互式小部件。 也许是幻灯片。 因此，您有不同类型的幻灯片，基本的幻灯片，混合到全屏的幻灯片，灯箱。

让我们玩基本的幻灯片播放，它将在此处显示默认图片。 但是，每次添加窗口小部件时，都会有一个蓝色图标，这是您进行设置的地方，您可以说我要添加自己的图像 。

它将自动调整图片大小。 然后您可以设置图例，可以导航以查看所有图片，并且还具有不同的过渡效果。 因此，默认情况下它会淡入和淡出，但是您也可以选择水平滑动。

关于页面

所以这是我的主页，也许我们可以在“关于”页面上添加一些内容，当然，您可以将粘贴元素从一个页面复制到另一页面。 因此，如果我选择以图块排列显示所有页面，则可以复制粘贴一些元素。

动画

您还可以添加动画，所以让我添加图片。 并且您有此滚动动作。 因此，这是一个非常强大的面板，您可以在其中说出要添加视差爬行效果的功能。 因此，如果我在此处选中“动作”，则这里有关键位置，这意味着当您向下滚动页面并到达此关键位置之前，我想得到一种特定的行为。

因此，也许以这种速度来自正确的事物。 然后，让我说我不希望它移动，所以我希望它以页面的相同速度移动。 所以，只有一个。 如果您希望对象出现然后消失，您也可以使用不透明度来添加一些关键位置。

我将添加另一个文本块。 添加按钮。 只是为了增加页面的尺寸以显示效果。 因此，如果要在浏览器中预览此页面，可以选择在浏览器中保存文件，预览页面，也可以直接单击我们在Adobe Muse中直接启动的新“ 预览”按钮，并在向下滚动时看到我的建筑物。

它从右边出现。 它停止，然后消失。 因此，这正是我想在设计中定义的效果，这要归功于“滚动效果”面板。

发布

现在，如果我想与客户共享此网站以获取反馈，则您具有“ 发布”按钮。

您只需要说“发布”，然后输入一个名称即可。 我单击OK ，它将使用Adobe Business Catalyst（一个可用于所有Creative Cloud成员的托管平台），并在此URL上发布您的网站，以便您可以与客户共享它。

这里是。 我有第一页。 产品A，产品B。如果单击“关于”页面，并且向下滚动，则会直接在浏览器中产生效果。 而且我可以复制粘贴此URL，并与我的客户或我的同事共享。

Adobe Muse CC

Adobe Muse CC面向希望设计网页而无需编写代码的设计师。

任何人都可以使用它并变得很有创造力。 您可以访问muse.adobe.com下载并尝试使用Adobe Muse。 我也鼓励您访问“每日站点”部分，以查看使用Adobe Muse发布的精美网站。 仅供参考，2013年，使用Adobe Muse创建和发布了超过500,000个网站。

此外，如果您想了解有关Adobe Muse的更多信息，请继续关注tutsplus.com并检查Adobe Muse类别以获得最新的新教程和视频，以学习如何创建出色的网站。

Crtomir Just的作品

翻译自: https://webdesign.tutsplus.com/tutorials/quickly-create-a-website-with-adobe-muse-cc-2014--cms-21680

muse ui的使用