在 Adobe Muse 中嵌入视频和其他 HTML 内容

优质

小牛编辑

126浏览

2023-12-01

注意:

Adobe Muse 不再添加新增功能，并将于 2020 年 3 月 26 日停止支持。有关详细信息和帮助，请参阅 Adobe Muse 服务结束页面。

使用嵌入式 HTML 在 Muse 网站上显示博客

嵌入式 HTML 是指第三方网站（如 Google、YouTube、Flickr 或 Picasa）生成的源代码。您可以在此类网站上设置帐户，登录相应网站，然后从网站复制嵌入代码并将代码添加到自己的网站上。

将嵌入式 HTML 粘贴到页面中后，就好像在网站的页面内放了一个窗口，窗口中显示第三方网站的内容。

嵌入式 HTML 是快速、轻松添加复杂信息（如地图、天气预报、股票报价）和富媒体（如数字视频、幻灯片和音频文件）的好方法。这种方法还有一个好处，即能够让您将第三方网站用作托管服务和上传界面。例如，如果您创建了一个免费 YouTube 帐户，则可以创建自己的 YouTube 频道，并上传您网站的视频内容。YouTube 包含一个可以简化上传过程的网页，并能将视频文件保存在其网站中。当您要更新自己的网站时，只需将更多视频添加到您的 YouTube 频道，复制嵌入代码，然后再将代码粘贴到页面中，这样便可向您的 Muse 网站添加新视频。

在本部分中，您将从 Tumblr 复制源代码。这是一款免费的在线服务，您需要创建帐户并登录，然后发布公开的博客。博客简单易用。如果您希望不精通技术的人也可以轻松更新他们的网站时，博客尤其有用。大多数博客网站都有一个在线界面，因此您可以使用任何浏览器登录自己的帐户并发布新博客，无需具备任何 HTML 知识或使用其他软件。

注意：浏览您网站的访客无需 Tumblr 帐户即可查看您嵌入页面的博客。帐户只有在您设计网站时才需要，用于创建自定义博客和生成您将添加到自己网站的嵌入代码。

在本教程中，您不需要创建 Tumblr 帐户。只需复制以下代码即可，该代码是在创建免费博客后 Tumblr 网站生成的：

在“计划”视图中，双击 events 页面缩略图，以在“设计”视图中打开页面并进行编辑。
单击空白页的中间部分，然后使用下列方法之一嵌入 HTML 代码：

选择“编辑”>“粘贴”或使用键盘快捷键（Command+V [Mac] 或 Control+V [Windows]），将代码直接粘贴到页面中。
选择“对象”>“插入 HTML”。单击显示的“编辑 HTML”窗口的字段并粘贴内容。单击“确定”以关闭“编辑 HTML”窗口。

注意：在大多数情况下，Muse 将会识别 HTML 代码，并自动嵌入您直接粘贴到页面中的 HTML。但是，如果页面上显示代码，而不显示第三方网站的内容，请尝试选择“对象”>“插入 HTML”。

嵌入 HTML 代码后，您会看到为 Katie’s Cafe Tumblr 帐户输入的博客周围出现一个带手柄的蓝色边界框。

使用“选择”工具拖动手柄以调整博客内容的大小，使其大约占到页面宽度的 80%。居中页面上的博客内容，使平铺背景图形在内容左右两侧显出。蓝色测量矩形显示到其他对象的距离。页面上会短暂出现一条红色对齐参考线，用以指示所选对象垂直居中。

在 events 页面上调整 Tumblr 博客大小并定位博客。

您所需要做的就是将 HTML 嵌入 Muse 页面。无论何时想要编辑 HTML 代码，都可以右键单击某个嵌入式 HTML 元素，并从显示的上下文菜单中选择“编辑 HTML”。此操作会打开“编辑 HTML”窗口，以便您可以访问之前粘贴的代码。

现在可以查看您对 events 页面所做的更改：

选择“文件”>“在浏览器中预览页面”，以查看显示在新浏览器窗口中的 events 页面。

请注意，当您向下滚动博客列表时，页眉会显示在其他页面内容的顶部。之所以会出现这种情况，是因为 event 页面使用前景主页，并且此主页的页眉内容设置为在前景中显示。

events 页面的设计现已完成。在下一部分中，您将了解如何将嵌入式 HTML 内容粘贴到构件中，及如何根据用户交互控制第三方内容的显示方式。

在 Muse 网站中嵌入视频

目标容器当前由灰色填充颜色填充。但是，您可以将各类内容置于目标容器中，包括不同的图像文件、填充的矩形、文本或从其他网站复制的嵌入式 HTML。

在此示例中，您将要粘贴 YouTube 生成的嵌入式 HTML。

假设您访问了 YouTube.com 上的一个页面，以查看您使用帐户上传的一段视频。如果单击“分享”按钮，再单击“嵌入”，则您可以访问和复制该视频的嵌入代码。

選擇所需的视频大小后，复制 YouTube 生成的嵌入代码。

对于此视频，我们已从他们的网站复制了 Katie’s Cafe 视频的嵌入代码，因此您不必再访问 YouTube。复制以下嵌入代码以将其保存到剪贴板：

上述代码使用 iFrame 标记限定在 YouTube 上发布的视频文件的链接。iFrame 是一种 HTML 容器，将其添加到网页上后，能够将内容显示在“窗口”中。

复制上述代码后，返回到 Muse。

使用“选择”工具单击页面的灰色边框，以使左上角的“选择指示器”显示文字“页面”。这意味着整个页面被选定。
单击带有灰色填充颜色的更大目标容器。左上角的“选择指示器”显示文字：“构图”。再次单击灰色目标容器，以使“选择指示器”显示文字：“容器”。再次单击它（即目标容器），然后再单击一次，直至“选择指示器”列出文字：“图像框架”。按 Backspace (Windows) 或 Delete (Mac)，以移除目标容器的图像框架。

但目标容器内部仍处于选定状态，下一步是将您在上面复制的 HTML 代码粘贴到目标容器中。

注意：正如您在将主体图像粘贴到触发器容器中时遇到的情况，将代码粘贴到目标容器内可能也会有点棘手，因为目的是将代码粘贴到构件的目标容器内。可以将视频代码粘贴到构件外部（取决于当前选定的元素），如此一来，视频会直接嵌入在页面上。因此继续操作时要小心……如果单击“预览”来测试灯箱，并且看到视频正常显示，但您甚至尚未单击主体图像。那么也就意味着视频代码未能成功粘贴到容器内，而这正是视频立即显示的原因。视频仅应在单击主体图像后显示。

请执行以下步骤，将视频代码粘贴到目标容器内（当“选择指示器”显示文字：“容器”时）。

选择“对象”>“插入 HTML”。在显示的窗口中，选择默认占位符文本，然后按 Delete (Mac) 或 Backspace (Windows) 将其删除。选择“编辑”>“粘贴”，以将您在上面复制的 YouTube 代码粘贴到“HTML 代码”字段中。单击“确定”以关闭“HTML 代码”窗口。

注意：在许多情况下，Muse 会在您粘贴 HTML 代码时自动检测，确定该代码是 HTML 而不是纯文本。因此，如果您愿意，您可以不通过选择“对象”>“插入 HTML”打开 HTML 窗口，而是在目标容器内部被选定时单击右键（或按住 Control 并单击），然后从显示的上下文菜单中选择“粘贴”。（或者，选择“编辑”>“粘贴”或使用键盘快捷键将源代码粘贴到目标容器内。）Muse 提供的许多方法均可达到将视频代码粘贴到目标容器内的目的。

将代码粘贴到目标容器内后，您会看到第一帧视频显示（一杯咖啡）。这第一帧视频表明您已成功粘贴 HTML 嵌入代码。当您在“设计”视图中编辑页面时，视频不会播放。仅当单击“控制”面板中的“预览”按钮之后或在浏览器中预览页面时，视频才会播放。

使用“选择”工具调整目标容器的大小，必要时可以扩大尺寸，以适合嵌入式 HTML 视频内容的大小。宽度应约为 670 像素，高度应约为 415 像素。选定视频时，“选择指示器”显示文字“HTML 项目”。
选定目标容器时，按 Esc 键一次以选择容器外部。或者，如果您愿意，请单击以取消选择“灯箱显示”构件，再单击该构件两次：单击一次以选择“构图”，再次单击以选择较大容器。使用“选择”工具拖动容器的手柄，以使目标容器在页面内居中。将容器大小调整为宽 710 像素、高 460 像素。
使用“填充”菜单，将容器的填充颜色设置为棕色 (#63301B)，然后将填充颜色的不透明度设置为 100。

在“填充”菜单中设置容器的填充颜色和不透明度。

选择容器底部的文本框架，然后按 Delete (Mac) 或 Backspace (Windows) 将框架删除。文本框架可以使用目标内容的字幕填充，但本项目并未使用。
选择容器右上角的“关闭”框（带一个 X）。单击“关闭”框内部以选择其标签并将其删除。使用“填充”菜单将填充颜色设置为“无”。在“填充”菜单中，单击“图像”部分旁边的文件夹图标，然后浏览并选择 icon-close.png 文件。使用“选择”工具调整“关闭”框的大小，以便显示整个关闭图标图像。
使用“选择”同时重新定位目标容器和触发器容器，以将它们移至您希望它们在页面上的显示位置。
选定“构图”时，单击蓝色箭头按钮打开“选项”面板。在此示例中，请使用以下设置：
- 位置：灯箱
- 过渡：淡化
- 自动播放：禁用
- 随机播放：禁用
- 最初全部隐藏：禁用
- 启用滑动：启用
- 顶部触发器：禁用
- 关闭按钮：启用
- 编辑时显示灯箱组件：启用
- 在设计模式中全部显示：启用

更新“选项”菜单中的设置以控制构件的操作。

单击“选项”菜单之外的任意位置以关闭菜单。此时，该构件现已配置完成，可以进行测试。

在本教程中的前面部分，您学习了如何将 HTML 嵌入页面以在 events 页面上添加 Tumblr 博客，还了解了如何将嵌入式 HTML 粘贴到“灯箱构图”构件内，以在访客单击按钮时在灯箱窗口中显示 YouTube 视频。在本部分中，您将了解 Google 地图网站提供的另一种嵌入式 HTML。请按照以下步骤操作：

如果访问页面尚未在“设计”视图中打开，请单击“计划”，再双击访问页面缩略图以编辑页面。

此源代码复制自 maps.google.com 网站。您可以为一个地址（或者，在此示例中为多个地点）创建自定义地图。这是一项免费服务，您只需提供一个地址（或多个地址）并单击“创建地图”按钮即可。

单击“创建地图”根据所输入的地址生成地图。

创建一个地图后，Google 地图界面会提示您输入标题和描述。然后，您可以单击“链接”按钮访问代码。选择“粘贴要在网站中嵌入的 HTML”字段中提供的 HTML 代码，然后可以返回到 Muse 并将该 HTML 嵌入页面中。

使用 Google 地图界面生成地图的 HTML 代码。

在本教程中，您不必自己创建新地图。如果您愿意测试，则可以通过输入任何地址、创建地图并复制代码来试验。但是，如果您只希望了解工作原理，则可以使用一些预先生成的 HTML 代码。

复制以下源代码：

将此代码粘贴到访问页面顶部。使用“选择”工具将该嵌入式 HTML 定位在页面顶部附近的垂直中心，以使大约四分之一的地图与页眉区域重叠。务必在地图与它下方的花卉图形之前留出一些空间，以便您可以添加文本描述。
使用“文本”工具将一个文本框架拖到嵌入式地图的下方。复制以下文本并将其粘贴到文本框架中：

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie’s impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

使用“文本”面板应用以下设置以设定文本样式：
- 字体：Droid Serif（或任何 serif 字体）
- 字体大小：14
- 字体颜色：#222222
- 字体对齐方式：左对齐
- 行距：120%

向地图添加描述后，访问页面现已完成。

选择“文件”>“在浏览器中预览页面”，在浏览器中查看访问页面的显示方式。

完成的访问页面包含一个全功能 Google 地图。

请注意，嵌入式 HTML Google 地图是交互式地图。您可以单击箭头在窗口中移动浏览地图，还可以单击 + 和 - 按钮放大和缩小地图。

所有页面的网站设计现已完成。在本教程的其余部分中，您将了解如何添加最终发布网站并将网站发布为免费试用版。

在 Adobe Muse 页面中嵌入 HTML

您可以在自己网站的页面中嵌入 HTML 代码，以添加来自第三方 Web 服务器且动态显示的复杂网站功能。这些代码块可以从许多 Web 服务提供商处复制，如 Google、Yahoo、YouTube 等等，然后方便地粘贴到 Muse 页面中。在本部分中，您将看到两个不同的嵌入式 HTML 示例，并将了解如何快速向在 Muse 中构建的网站添加社交媒体内容和交互式 Google 地图。

您首先要完成主页内容。如果您一直按照本教程操作，主页现在可能已在设计视图中打开了。如果未打开，请在计划视图中双击主页缩略图，以在设计视图中打开主页进行编辑。将嵌入式 HTML 添加到幻灯片（您之前已将此幻灯片添加到主页中）顶部。

添加嵌入式 HTML Twitter 源以显示最新推文

您可以设置包括 Twitter 在内的许多不同 Web 服务的免费帐户，这可让您发布的消息显示在他们的网站上。不过，除了显示 Twitter.com 的信息之外，您还可以使用您的帐户登录并复制嵌入代码，以在您自己创建的网站上显示相同的消息。

在此示例中，我们设置了一个 Kevin’s Koffee Kart 虚构帐户。为完成帐户设置，需要以新用户身份登录 Twitter 填写注册表。在这之后，可以使用该网站的界面发布消息，并复制嵌入代码，该代码能够让该消息显示在其他网站上。这与分享博客文章、视频内容、RSS 源、股票信息、天气预报、游戏分数和许多其他类型的动态数据的过程是相同的。如果您正在为某个客户搭建网站，那么问问客户是否已在使用此类服务来帮助他们与客户共享信息。在许多情况下，您可以使用其帐户信息登录，然后获取您需要显示的数据的嵌入代码。

为了让您无需登录 Twitter 创建自己的帐户，下面提供了从 Twitter 的 Kevin’s Koffee Kart 帐户复制的嵌入代码：

<div>Optional Placeholder Text</div>

复制上述代码。
返回到 Muse。在许多情况下，您只需在页面上单击所需位置，然后单击右键并从显示的上下文菜单中选择粘贴。或者，您可使用粘贴键盘快捷键（Command+V [Mac] 或 Control+V [Windows]），Muse 将会识别出您粘贴的文本是源代码，而不是正常文本内容。
注意:
在极少数情况下代码不会被识别为 HTML，若发生这种情况，您可选择对象 > 插入 HTML以打开 HTML 代码窗口。然后只需将复制的代码粘贴到窗口中，单击确定以关闭窗口并嵌入代码。
嵌入源代码后（这实质上就是在您的网站页面中创建一个窗口，用以显示第三方网站的链接内容），页面上的内容显示方式可能并非如您所想。此时显示的是默认显示的 Twitter 嵌入式 HTML 内容。
Twitter 源数据按预期显示，但文本未设置样式或格式。
单击嵌入式 HTML 周围的手柄以扩大 Twitter 源文本区域大小，扩展区域使其填充最大页面宽度、约 1/3 页面高度。
拉伸 Twitter 源数据窗口的宽度和高度，扩展为更大窗口。
这使得文本可以在更大的空间中显示，尽管目前文本仍是默认大小。
接下来，您将在 HTML 代码窗口中更新代码，以添加用于定义动态文本显示方式的一些 CSS 样式。此操作不会影响发布的消息在 Twitter.com 上的显示方式，但会更改您网站上的文本格式设置。
复制以下 CSS 样式代码：
<style type="text/css">
#twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }
a:link, a:hover { font-size: 14; color: white; text-decoration: none }
</style>
注意:
请花点时间熟悉上述代码，另请注意，样式包含在一个开始标记 ()（指定代码是什么）和一个结束标记 ()（告知浏览器 CSS 样式规则已完成）中。每当您设定自己的嵌入式 HTML 代码样式时，您会将这些标记作为限定要影响的样式的括号。在这种情况下，Twitter 网站托管发布的消息，并使用名为 #twitFeed 的 CSS ID 选择器控制文本在其网站上的显示方式。因此，上述代码实际上使用该样式名称（从 Twitter 网站获取），然后添加一些定义文本在您网站上的显示方式的规则，再覆盖 Twitter.com 应用的样式。要了解有关文本内容格式设置的 CSS 规则的更多信息，请访问 W3C Schools 网站。
右键单击嵌入式 HTML 代码窗口，并从显示的上下文菜单中选择 HTML。此操作将打开 HTML 代码窗口，以便查看您之前粘贴的源代码。无论何时要编辑网站，您都可以打开此窗口并更新 HTML 源内容。单击之前嵌入的 HTML 代码的上方，即窗口最上方。粘贴在第 5 步中复制的新样式代码。
将样式代码粘贴到 HTML 代码窗口中、之前粘贴的 Twitter 源代码的上方。
单击“确定”以关闭 HTML 窗口。在对 Twitter 文本样式进行此更改后，与 Twitter 网站链接的推文现在以白色文本显示，字号大很多，并显示在主页幻灯片的顶部。
更新 HTML 对象大小和设置文本格式后完成的 Twitter 源。

主页即将完成。页面上只剩最后一个元素需要添加。

选择文件 > 置入。在导入对话框中，浏览以选择 Kevins_Koffee_Kart 文件夹中的 DailyDrip.png 文件。单击选择。
将该图像置入主页后，使用选择工具将该图像定位到幻灯片顶部附近左侧，使其与幻灯片顶部部分重叠。
单击预览观看幻灯片动画，查看该图像在 Daily Drip 和棕色水滴图像下方的显示方式。
主页设计成品。

检查主页之后，单击“计划”链接返回到计划视图。

接下来，您将向 KART MAP 页面添加一种不同类型的嵌入式 HTML。

双击 KART MAP 缩略图以在设计视图中打开该页面，然后开始编辑。
使用文本工具将 KART MAP 页面上的一个文本框拖动到页面内容顶部附近、页眉正下方。
输入下面这句话：Looking for the Koffee Kart？Check here for real-time location updates throughout the day.
选定文本后，打开段落样式面板。单击名为 Georgia Body Medium 的样式，以将段落样式应用于 KART MAP 页面的标题文本。

使用嵌入式 HTML 在 Muse 网页上插入 Google 地图

视频教程

视频教程lynda.com - James Fritz

在本部分中，您将通过添加可加载 Google 地图所生成地图的嵌入式 HTML，向 KART MAP 页面添加内容。这只是您在网站上使用嵌入式 HTML 时所作用途的另一个小例子。您可以整合许多其他第三方网站（如 YouTube、Flickr 或 Picasa 等）的内容，以及添加表单、博客和其他复杂的网站功能，借助此类功能您可通过在相应网站上登录帐户并发布内容来获得控制权。

打开一个新浏览器窗口，并访问 Google 地图。
输入一个地址或搜索词，如 Adobe SF，以查找要为其创建地图的真实地点。
单击界面右上部分的链接按钮，再单击自定义和预览嵌入式地图。
在显示的自定义窗口中，将自定义地图尺寸设置为宽度 850、高度 470。在窗口内重新定位地图，确保地址文本完全显示。
复制 Google 窗口生成的 HTML。或者，如果您自己不想生成 Google 地图代码，则只需复制以下源代码：
<! -- Google Public Location Badge -->
<iframe src="http://www.google.com/latitude/apps/badge/api?user=3988005937557250144&type=iframe&maptype=roadmap" width="872
“ height="600" frameborder="0"></iframe>
<! -- To disable location sharing, you *must* visit https://www.google.com/latitude/apps/badge and disable the Google Public Location badge.Removing this code snippet is not enough! -->
从 Google 地图窗口复制 HTML 源代码。
返回到 Muse。右键单击页面并选择粘贴置入代码。您也可以选择对象 > 插入 HTML 以打开 HTML 代码窗口粘贴代码，或使用标准键盘快捷键粘贴代码（Command+V [Mac] 或 Control+V [Windows]）粘贴代码。
使用选择工具将地图定位到页面左侧。
单击预览查看访客在活动网站中将会看到的 Google 地图形式。单击地图的导航按钮，请注意，此地图是完全交互式地图，您可以在嵌入式窗口内放大或移动地图。

使用嵌入式 HTML 向网站添加 iframe 以显示其他网站页面

除了使用嵌入式 HTML 插入您从第三方网站复制的代码之外，您还可以使用相同方法在 iframe 中嵌入整个网页。例如，您可以输入如下形式的代码片段：

在上述代码中，使用所需外部网页的标题和 URL 替换 title=”” 和 url=”” 中的文本。您还可以将 iframe 窗口的宽度和高度自定义为所需的值，以匹配您的网站设计。

或者，您也可以通过向 iframe 开始标记添加以下代码来添加属性，确保 iframe 不会显示滚动条：

scrolling="no"

通过选择对象 > 插入 HTML，您可打开一个新 HTML 代码窗口并在网站的任意位置嵌入 iframe，然后设置任意 URL（网站地址，如 www.google.com）以在其中显示已经在互联网上线的网站。

您还可以使用 iframe 嵌入动画，如在 Adobe Edge 中创建的 HTML5 动画。查找通过 Adobe Edge 创建的 HTML 文件的文件名，并将该文件名用于 iframe 的 URL 属性：

</iframe>

接下来，您需要将 Adobe Edge HTML 文件（及相关文件）上传到您的 Muse 网站文件所在的主机服务器。如果要将网站导出到 FTP，可将该 HTML 文件复制到 Muse 在导出过程中生成的文件夹。如果通过单击 Muse 中的“发布”链接直接将网站发布到 Adobe Business Catalyst® 托管服务器，则可使用 Adobe Dreamweaver® 软件或任意 FTP 客户端上传文件。要了解有关通过 FTP 上传文件到 Business Catalyst 托管服务器的更多信息，请参阅发布网站。

设置联系人表单元素的格式

通过使用一些标准 CSS 规则，您可以为在 Business Catalyst 管理控制台界面中创建的联系人表单元素设置格式。您可以调整表单和表单元素的显示方式，以匹配您的页面设计。

将表单的源代码从管理控制台粘贴到 Muse 的页面后，表单显示为默认样式。

粘贴任意 HTML 代码后，表单即显示在页面上。

正如所有其他元素一样，您可使用两侧手柄调整表单大小，并将其移动到页面的所需位置。

右键单击（或按住 Control 并单击）表单，并从显示的列表中选择 HTML。

使用上下文菜单从选项列表中选择 HTML。

此时将显示 HTML 代码窗口。此窗口显示您从管理控制台粘贴到页面中的代码。将光标放在顶部第一行代码前面，然后按 Enter (Windows) 或 Return (Mac) 几次，以向下移动表单，以此腾出一些空间来添加样式。

按 Enter 或 Return 在现有代码上方增加几行代码的空间。

表单代码上方的这个区域就是可以粘贴或输入 CSS 规则的位置，此规则将影响表单元素的外观。

要查看其工作原理，请复制以下代码：

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

将代码粘贴到 HTML 窗口顶部、表单上方。

将 CSS 样式粘贴到 HTML 窗口顶部。

单击“确定”以关闭 HTML 窗口。请注意，表单的外观已使用新格式设置更新。单击“预览”或选择“文件”>“在浏览器中预览页面”，以查看表单在已发布网站中的显示方式。

当您添加从 Business Catalyst 复制的联系人表单代码时，您可使用同一方法来控制表单中包含的多种不同表单元素。

花点时间查看粘贴到窗口顶部的代码。请注意顶部和底部限定 CSS 规则的两个样式标记。这两个标记非常重要；如果没有样式开始标记和结束标记，CSS 规则将不会生效。下面这两个标记是单独显示的样式标记：

</style>

这两个样式开始标记和结束标记告知浏览器代码内含 CSS 格式设置规则。在窗口中粘贴 CSS 规则之前，请始终确保窗口顶部存在这些标记。

当您要更改表单元素以更新其外观时，需要调用“类”（分配给表单中各种元素的名称），指定要更新的属性，然后设置其特性。

请思考以下代码行：

input.textarea {

background-color: #fff;

}

input.textarea 一词是分配给一种类型文本字段的名称（它的“类”）。然后，下一行调用要更改的属性。在这种情况下，background-color 指的是文本字段的背景颜色。冒号后面的 #fff 是 CSS 代码中 #ffffff 的简写形式（它是十六进制颜色值，值为白色）。

简单点说，上述规则意思是：将此类文本字段的背景颜色设置为白色。

要更新表单，您还可以将文本字段的背景颜色指定为常用网页颜色值：red。以下代码将该类文本字段的背景颜色设置为红色：

input.textarea {

background-color: red;

}

CSS 以其独有的语言进行编写。正如学习所有新语言一样，多多练习才能融会贯通。要了解有关语法（编写 CSS 规则使用的语法）的更多信息，请阅读 W3Schools 在线免费提供的优秀教程和 CSS 参考指南。

当您准备开始编辑自己的表单时，可以使用下面的列表，以确定可为每个表单元素调整的类名称及相关属性。

注意:

请记住始终要用样式开始标记和结束标记限定一系列 CSS 规则，因为若不使用这些标记，浏览器（和“设计”视图）不会呈现规则：

</style>

从联系人表单顶部删除默认元素

默认情况下，当您将表单粘贴到页面中后，表单开始时会显示以下两个元素。

如果要删除其中一个元素或二者，请打开 HTML 窗口并查看您粘贴的源代码（可能已添加的 CSS 样式标记的正下方）。

要删除“*必填”行，请找到此代码行并将其删除：

<span>*</span> Required

要删除“称谓”标签和菜单，请找到这些代码行并将它们删除：

<td><label for="Title">Title</label><br /><select name="Title"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

注意:

编辑 HTML 代码时一定要小心，请不要意外删除上述行以外的任何标记。即使多删除一个字符，如这个 >，也可能会导致表单损坏。如果发生这种情况，您可以返回到管理控制台，重新将代码粘贴到页面中，以替换编辑过的代码。

用于添加 CSS 规则和设置联系人表单格式的类和属性列表

指定颜色值时，通过使用在线工具（如 kuler）或图像编辑程序（Photoshop 或 Fireworks），您会获得更多种类的颜色，可供您创建十六进制颜色值。十六进制颜色值始终以 # 符号开头，后接 3 个或 6 个字母数字字符（0-9 和 A-F）的组合。

您可能发现，在 Muse 中使用 Eyedropper 工具可以更轻松地从现有设计中选择颜色。您可以从“拾色器”的字段中复制十六进制颜色值，并将值粘贴到代码中。但是，以下16 种网页颜色可以用名称指定。这些颜色在测试规则时非常有用：

Aqua、Black、Blue、Fuchsia、Gray、Green、Lime、Maroon、Navy、Olive、Purple、Red、Silver、Teal、White 和 Yellow

当您用名称指定颜色时，请勿在颜色前面加 # 符号。

下表并不完整，因为有太多不同的组合（和太多可以使用的其他属性）可以影响元素。请遵照上述建议开始设置联系人表单。双击以选定代码片断，然后将其复制到剪贴板。

要了解使用 Muse 的更多技巧，请务必访问 Muse 帮助和教程页面，或者访问 Muse 活动页面参加在线实时研讨会和录制研讨会。