2024年6月12日发(作者：濯旎旎)
Adobe
Muse
CC官方教程
简体中文汉化版
Darksun编辑
用 Muse 建造您的第一个网站
第一部分
安装软件及设定样本项目
建置网站地图
编辑「A-主版」页面
将并排显示背景影像设定为浏览器填色
使用设定为 100% 宽度的元素
将单一影像置入页面上
使用参考线来定义页面的页首与页尾区域
显示全部
在本教学课程中，您将会熟悉 Adobe Muse 工作区，并了解如何在不用撰写任何程序代码的情况下建置一个功能健全的网站。「用 Muse 建置您的第一个网站，第 1 部分」包括协助您开始
使用 Muse 的说明。您将学习如何使用主版页面、Widget、Photoshop 按钮以及链接。在浏览本教学课程时，您可以透过检阅 Katie's Cafe 实际上线网站来随时查看完成的网站会是什么
样子。
回到顶端
安装软件及设定样本项目
1. 下载并安装最新版本的 Muse。
2. 下载样本档案。
3. 解压缩 ZIP 档案，并将名为 katiesCafe 的档案夹储存到您的桌面上。
4. 启动 Muse。「欢迎」画面即会出现。选择「新增 > 网站」(见图 1)。
图 1. 在「欢迎」画面选取建立新网站的选项。
「新增网站」对话框即会出现。您将会使用此接口来编辑套用于整个网站的设定。
5. 将栏数设定为 12。在「栏」字段中输入数字 12，或单击字段旁的向上箭头来增加目前的值 (见图 2)。变更完此值之后，其他值会自动更新。
图 2. 更新「新增网站」对话框中的栏数。
注意：
在本教学课程中，您将学习如何在 Muse 中针对桌面计算机制作您的第一个网站。请注意，「初始版面」选单预设为「桌面计算机」，因此您无需变更。未来，当您想要使用适用于智
能型手机及平板计算机的其他版面来建置网站时，您可以使用此选单来选择要先设计的版面。
在关闭「新增网站」对话框之前，请先花点时间来检阅标记为「黏性页尾」的新选项。此选项默认为启用。在大多数情况下，您会想要在建置网站时将黏性页尾选项保持启用，因为它会使
页尾保持在所需位置，即使浏览器窗口比网页设计大很多也是如此，就像它在 Apple Cinema Display 显示器上显示一样 (见图 3)。
1 / 52
图 3. 「黏性页尾」选项默认为启用。
例如，当您利用大型监视器在浏览器中预视 Muse 网站，并缩小未启用「黏性页尾」的页面时，您会发现，如果您使页面内容相对于浏览器窗口而言太小，页尾下方的区域便会显示浏览器
窗口。而若启用「黏性页尾」选项，则无论访客桌面计算机监视器的分辨率与尺寸为何，页尾内容都会与浏览器窗口的底部保持齐平 (见图 4)。
图 4. 启用了「黏性页尾」的缩小网站 (左) 与未启用「黏性页尾」的网站 (右) 比较图。
对于此样本网站项目以及在大多数情况下，您都需要在「新增网站」对话框中保持启用「黏性页尾」选项。
6. 单击「确定」储存您的更改，并关闭「新增网站」对话框。
7. 选择「档案 > 储存网站」。在「另存 Adobe Muse 档案为」对话框中，输入网站的名称：。导览至您要储存此样本项目的位置 (例如您桌面计算机中的 katiesCafe
档案夹)，然后单击「储存」。
注意：
katiesCafe 样本档案档案夹包含一个样本项目的已完成版本，名为 。如果需要，您可以在将您的项目版本储存为 之后双击 .muse 档案
的最终版本来将其开启。Muse 可让您一次开启多个网站项目，因此您可以预视 katiescafe 最终档案，并将它作为您在遵循这些说明时的参考使用。
在下一节，您将开始为网站新增页面。
回到顶端
建置网站地图
网站地图是以网站阶层形式存在之页面的结构式列表。您可以建立位于相同层级的页面 (无子页面)，也可以建立包含不同页面层的网站地图。(例如，一个较大的网站可能会有一个「关
于」页面，而这个页面又包含两个子页面，分别叫做「我们的任务」和「我们的人员」。) Muse 可让您轻松建立页面以及以您喜欢的任何顺序进行重新排列，而您永远不必担心连结损坏。
不过，花点时间来组织新网站的内容、定义所需要的页面以及决定如何展示网站信息还是很重要的。在实际的项目中，完成不同的网站区段，并选择页面顺序是预先规划阶段的一部分。
在关闭「新增网站」对话框之后，系统会自动将您重新导向至 Muse 中的「规划」视图。依照预设，所有新网站都包含一个网页 (名为「首页」)，且该网页连结至一个主版页面 (名为「A-
主版」)。您可以根据需要为这两个页面重新命名。
为了产生一致的体验，您需要将例如页首、页尾及网站导览等重复的网站项目放在主版页面上。利用此方法，您将只需要在建构网站设计时将唯一内容新增至各页面即可。
此样本项目是一个较小型的网站，包括「首页」在内一共有 5 个页面。请依照下列步骤来新增页面：
1. 将鼠标光标置于「首页」缩图之上，然后单击「首页」右侧的加号 (+) 图示，来在与第一个页面相同的层级上建立另一个页面。单击新页面下方的标签字段，并将其命名为：food。
当您单击页面缩图下方的加号 (+) 图示时，即会建立一个子层级页面，可以展开包含与特定主题相关之页面的部分。
2. 单击「food」页面缩图右侧的加号 (+) 图示来建立另一个新页面。单击标签并将此页面重新命名为：events。单击「events」页面缩图右侧的加号 (+) 图示来建立一个新页面。
将这个新页面命名为：about。再次重复此操作来在与「首页」相同的层级上建立一个新页面，并将其命名为：visit。
现在，网站地图总共有 5 个页面，分别为「首页」、「food」、「events」、「about」以及「visit」(见图 5)。
图 5. 在网站地图中总共建立 5 个页面。
注意：
因应本教学课程，网站地图在同一层级中包含 5 个页面。不过，当您在未来建置网站时，您可以建立子层级与其他子页面。如果您要建立不同的设计来在网站的不同区段显示，您
也可以单击底部主版页面旁边的加号 (+) 图示，来建立更多主版页面。如果您有多个主版页面，可以在「规划」视图中的页面缩图上单击鼠标右键 (或按住 Ctrl 的同时单击) 来将这些
页面连结至特定主版页面。在建立新网站时，各页面会自动连结至「A-主版」主版页面。
「规划」视图提供了一些工具，可用来建构网站以及定义访客将如何存取每个部分。如果您要变更网站的组织，可以调整流程，只需拖移页面的缩图重新放置即可。
3. 单击并拖移「首页」缩图，来在「events」与「about」页面之间重新放置该页面。
4. 双击「首页」缩图下方的字段，并将其重新命名为：home (见图 6)。
2 / 52
图 6. 将「首页」重新命名为小写的 home，以与其他页面相符。
进行完这些变更之后，网站地图即告完成。
请注意在「规划」视图接口的顶部有三个版面按钮，分别用于「桌面计算机」、「平板计算机」以及「手机」版面。在此样本项目中，您只是要建立要将网站传递至计算机画面的桌面计算机
设计。「平板计算机」与「手机」版面的名称旁都有一个加号 (+)，表示它们尚未建立 (见图 7)。
图 7. 「规划」视图上方的三个版面按钮可让您建立以不同画面大小显示的其他三个版面，以及在它们之间切换。
当您拥有多个版面之后，除了单击版面按钮来跳到不同网站版面之外，您也可以使用键盘快捷方式来在网站规划之间切换：
按下 Command+7 (Mac) 或 Ctrl+7 (Windows) 可跳至「桌面计算机」网站地图。
按下 Command+8 (Mac) 或 Ctrl+8 (Windows) 可跳至「平板计算机」网站地图，或者
按下 Command+9 (Mac) 或 Ctrl+9 (Windows) 可跳至「手机」网站地图。
这些键盘快捷方式只在包含至少两个「桌面计算机」、「平板计算机」及/或「手机」版面的网站项目中才处于作用中状态。
若要建置此样本网站项目，您将需要根据其余说明继续在「桌面计算机」版面中工作。不过，如果您想要了解有关为行动装置设计网站的详细信息，请参阅标题为在 Muse 中建立行动版面
设计的文章。
现在网站地图设定完成，您将前往下一节，学习如何编辑「A-主版」页面来新增包括页尾内容在内的共享网站元素。
回到顶端
编辑「A-主版」页面
在本节中，您将会设计网站的第一个主版页面；它包含显示在网站内其他链接页面中的永续性图稿。
Muse 在许多方面都表现得像一个设计工具，但实际上它是产生业界标准的 HTML、JavaScript 及 CSS 来建立网页。当您选择套用样式 (即圆角、渐层填色颜色) 时，Muse 不会建立向量
形状或像素格点。最终发布的结果是功能完整的标准网页。您将会从更新背景图形开始。
回到顶端
将并排显示背景影像设定为浏览器填色
1. 在「规划」视图中，双击「A-主版」页面缩图来在「设计」视图中将其开启。「A-主版」页面会在它自己的索引卷标中沿工作区顶部开启 (见图 8)。
图 8. 「A-主版」页面已经准备就绪，可以在「设计」视图中编辑。
选取指示器位于「控制」面板的左上角。当未选取其他项目时，选取指示器会显示「页面」一词，表示只选取了页面本身。如果您选取页面上的对象，例如置入影像，则会显示「影像框」
一词。
了解目前已选取哪个项目是很有帮助的。您在工作时，请注意观察选取指示器，以确认您选取了想要控制的元素。如果选取了其他页面元素，您可以随时单击页面左侧或右侧的灰色区域来
重新选取整个页面。
选取页面时，您可以使用「控制」列中的选单来更新填色颜色与线条设定。若要针对此范例更新主版页面，请依照以下步骤执行：
2. 单击「控制」面板中已连结的「浏览器填色」这几个字。单击「影像」区段旁的档案夹图示，然后浏览以选取样本档案档案夹中名为 的档案。单击「开启」来设定
背景影像 (见图 9)。
3 / 52
图 9. 使用「浏览器填色」面板来设定将显示在浏览器窗口中的背景影像。
请注意，依照预设，「符合」选单设定为「并排显示」。这样可以确保背景影像将会重复，同时水平与垂直并排显示，以为浏览器窗口填色。
3. 单击「浏览器填色」面板外部的任何位置，将其关闭。
网站发布时，您设定为并排显示背景填色的原始小影像只会在浏览器中加载一次，并排显示的背景影像会提供解决方案来根据需要覆盖页面的较大区域，而不会影响网站的下载速度或效
能。
4. 在「控制」面板中，单击「填色」色卡并将页面的填色颜色设定为「无」(包含红色对角线的白色色票)。
接下来，您将要新增图形以建立将显示在所有网站页面的页尾。
回到顶端
使用设定为 100% 宽度的元素
设定为 100% 宽度的项目将会为浏览器水平填色，无论访客的浏览器窗口调整为多宽。如果您将页面元素设定为也与浏览器窗口的顶部和底部边缘对齐，填入实色的对象或并排显示的资源
也会展开，以符合可用空间。
1. 使用「矩形」工具，在页面底部附近绘制一个宽度与页面宽度相同，高度约为 250 个像素的矩形。
2. 选取此矩形，将线条宽度设定为 0。当选取此矩形时，您会知道，因为左上角的选取指示器会显示「矩形」一词 (见图 10)。
图 10. 使用「线条」字段来将所选矩形的线条设定为 0。
3. 单击「控制」面板中的「填色」一词，来开启「填色」选单。使用「填色」选单将颜色设定为无 (包含红色对角线的白色色票)。单击「影像」区段旁的档案夹图示，并将矩形的
背景影像设定为 。在「符合」选单中，将选项设定为「水平并排」，这样可使影像跨 X 轴从左到右并排显示。
4. 拖移矩形的转换控制点，将其置于可见区域的最下方，并调整宽度以与页面的左右两侧以及下方对齐。您将会看到一个红色的边框暂时显示，指示矩形何时设定为「100% 宽度模
式」(见图 11)。
图 11. 拖移矩形以将其与浏览器窗口的下方及左右两侧对齐。
回到顶端
将单一影像置入页面上
接下来，您将要透过直接将图像文件案置入页面上来新增图像文件案，而不是将背景影像设定至页面或矩形。Muse 工作区的工作方式与 Illustrator 及 InDesign 类似，您都需要先加载
置入影像，然后再单击您想要该影像显示的页面。
1. 选择「档案 > 置入」，或使用键盘快捷方式：Command-D (Mac) 或 Ctrl-D (Windows) 来开启「读入」对话框。
2. 浏览以选取样本档案档案夹内名为 的档案。单击「开启」选择该档案，然后关闭「读入」对话框。
单击页面底部附近的位置，来置入影像。在本例中，您是想要以完整大小置入影像，因此只需单击即可。不过，如果您打算调整置入影像的大小，可以单击并拖移来将影像缩放为特定大
小。
使用「选取」工具， 将影像朝向并排显示页尾矩形的垂直中心拖移，并注意红色的参考线以及蓝绿色测量方块会短暂地显示，以协助您将其与中心对齐。
进行完这些变更之后，页尾部分即已基本完成 (见图 12)。
4 / 52
图 12. 页尾是由包含并排显示背景影像的单一矩形以及上方置中对齐的影像所组成。
在下一部分中，您将学习如何定义主版页面的页首与页尾区域。
回到顶端
使用参考线来定义页面的页首与页尾区域
您在使用 HTML 与 CSS 建置网站时，根据显示在每个页面上的唯一内容，各页面的高度通常都不同。Muse 包含允许网站页面根据各页面上的唯一内容显示不同长度的功能。您可以设定区
域，使页首始终保持位于顶部位置，而页尾内容始终直接显示在页面内容下方，无论每个页面的高度为何。在本节中，您将会定义主版页面的页首与页尾区域。
请依照下列步骤来显示参考线及设定页面区域：
1. 请确定页首与页尾参考线都已显示。若未显示，请选择「检视 > 显示页首与页尾」。或者，您也可以使用「控制」面板中的「检视」选单来启用「页首与页尾」参考线。参考线显
示时，会有一个复选框显示在「检视」选单清单中「页首与页尾」项目旁 (见图 13)。
图 13. 确认页首与页尾参考线都已启用。
如果想要，您也可以在工作区的左侧，也就是浏览器窗口区域之外单击鼠标右键。然后在显示的环境选单中启用「显示页首与页尾」选项。
若要重新放置页首与页尾参考线，也必须启用标尺。标尺可让您将参考线设定到精确的像素位置。依照默认，也会显示标准参考线 (显示您在建立新网站时所设定的栏数)。
五条蓝色的水平参考线会横跨页面宽度。从最上方开始，这五条参考线分别用来定义页面顶部、页首的最下方边缘、页尾的最上方边缘、网页的底部以及浏览器窗口的底部。当您拖移参考
线来定义这些区域时，会有工具提示说明每条参考线及其目前的位置。您会发现，放大页面很有帮助，这样您便可以更精确地放大到位置。
注意：
浏览器窗口的底部规定了访客在浏览器中检视网站时显示区域的最下方部分；根据设计而定，您可以为浏览器本身设定背景颜色或背景影像，以及为浏览器参考线底部上方的页面底
部位置设定参考线，让背景颜色或影像在页面内容下方显示。
在此样本项目中，浏览器的填色不会在页面内容下方显示。
2. 将「页面底部」参考线与「浏览器底部」参考线拖移到页面底部的相同位置，就在页尾矩形的下方，如图 14 所示。
图 14. 当「页面底部」与「浏览器底部」参考线位于相同位置时，浏览器填色内容不会在页面底部下方显示。
中间的三条参考线定义了将会显示在页首及页尾区域的内容。剩余的中心区域是您要新增唯一页面内容的区域；此中心区域会展开以符合置入各页面上之元素的高度。
您也可以选取页面上的矩形与元素。使用所选元素的边界方块来协助您在设定页首与页尾区域时对齐参考线很有帮助。
3. 在包含并排显示背景影像的页尾中选取矩形。拖移「页尾」参考线，直到它与页尾矩形的顶部对齐为止。
4. 使「页面顶端」参考线留在最上方 (在 Y: 0 px 的位置)。将「页首」参考线向下拖移约 253 个像素。
5 / 52
页首内容将会显示在页面顶部与「页首」参考线之间的区域中。进行完这些变更之后，参考线看起来会像是这样 (见图 15)。
图 15. 在将参考线重新放置于「A-主版」页面上之后的显示情况。
在设计过程中，若需要重新调整参考线使其符合页首与页尾内容，您可以随时返回「A-主版」页面。
单击「规划」链接，或单击标记为 katiesCafe 的索引卷标即可返回「规划」视图。
请注意，网站中的所有页面缩图现在都显示您已新增至已连结「A-主版」页面的设计元素 (见图 16)。
图 16. 「A-主版」设计显示在「规划」视图中的所有已连结页面缩图上。
在设计网站时，您对主版页面所做的变更会随时自动更新连结的页面。主版页面可让您轻松更新或维护网站，因为只要您更新一个主版页面，即可变更网站的外观。
回到顶端
使用阶层式主版页面
Muse 可让您建立可套用到其他主版页面的主版页面。阶层式主版页面的工作方式与主版页面套用至「规划」视图中页面的方式相似。在 Muse 之前的版本中，您可以建立多个主版页面，
但一次只能将一个包含一组页面元素的主版页面套用至网页。
在过去，如果您要建立一个包含两个不同区段，但这两个区段相似，而每一区段又拥有唯一外观的网站，您可以复制主版页面、略微变更一下，然后再将其套用至特定页面。这样一来，这
两个主版页面通常会包含一些相同的元素，因此当您更新网站时，就必须编辑两个主版页面中的内容，以保持所有元素的同步化。
而现在使用 Muse 4.0 及以上版本时，您便可以建立一个「A-主版」页面，其中包含会显示在多个主版页面中的共享元素 (例如之前几节所述的新增背景及页尾)，然后再建立继承「A-主
版」页面中所有元素的其他主版页面，再加上第一区段所特有的任何元素。若您建立了第三个主版页面，则该页面可以使用「A-主版」页面中的元素，以及第二区段所特有的任何元素。
使用阶层式主版页面的好处是，您可以限制某元素相对于一个实例的出现次数。在重新设计网站时，只需要编辑每个元素一次，它的所有实例就会自动在网站中更新。
您可以在「规划」视图中管理及套用主版页面。就像您可以单击主版页面缩图并将其拖移至页面缩图，以将主版页面套用至页面一样，您也可以建立多个主版页面，然后再单击主版页面并
将其拖移到另一个主版页面上。或者依您的个人喜好，您也可以在「规划」视图中的任何主版或页面缩图上单击鼠标右键，并使用所显示环境选单中的「主版」选项来设定主版。
请注意，当您将鼠标光标停留在页面或主版页面名称上时，工具提示会针对该页面或主版页面显示所套用主版的阶层。
6 / 52
现在，您已建立包含浏览器填色并排显示背景及页尾内容的「A-主版」页面。在下一节，您将建立一个继承「A-主版」页面内容的新主版页面，然后再新增页首，以便您可以将其套用至网
站页面。请依照下列步骤进行：
1. 当在「规划」视图中检视网站地图时，请将游标置于「A-主版」页面缩图上，以便能够看到显示在两侧的加号按钮。单击「A-主版」页面右侧的加号来建立一个全新的主版页面。
依照预设，新主版页面名为「B-主版」。
2. 双击缩图下方的「B-主版」文字字段进行编辑。为您刚建立的新主版页面输入一个更具描述性的名称：「主要」。
3. 在「主要」主要页面缩图上单击鼠标右键，然后从显示的环境选单中选择「主版 > A-主版」(见图 17)。
图 17. 在选单中选择「A-主版」来将其套用至「主要」主版页面。
请注意，在您将「A-主版」页面套用至「主要」主版页面之后，「主要」主版页面缩图会更新以显示相同的外观。「主要」主版页面缩图下方的蓝色标签表示为「A-主版」，这是因为您在步
骤 3 中将它套用至「主要」主版页面。
一个重要的区别是，「主要」主版页面实际并不包含「A-主版」元素，您并不是只复制了「A-主版」，而是将「主要」主版页面设定为了「A-主版」的连结，这表示您新增至「A-主版」的任
何新内容也将自动显示在「主要」主版页面上。
如前所述，有关阶层式主版的一个优点是页尾、选单以及背景仍只存在于「A-主版」页面。因此，如果客户在之后要求您使用不同的并排显示背景，您可以更新「A-主版」页面，然后「主
要」主版页面将会自动更新。
在本教学课程稍后的部分中，您将会为两个不同网站部分的不同外观建立两个不同的主版。不过现在，您可以在「规划」视图中将页面更新为全部使用新的「主要」主版页面，而不是使用
「A-主版」页面。
4. 单击「主要」主版页面，并将其拖移至左上角的「food」页面缩图。请注意，随着您将「主要」主版页面缩图拖放到「food」页面缩图上，「food」页面缩图下方的蓝色文字会从
「A-主版」更新为「主要」。
这是在「规划」视图中将主版页面套用至页面的最常用方式，不过您也可以尝试使用环境选单来予以套用：
5. 在「events」页面缩图上单击鼠标右键，然后在显示的环境选单中选择「主版 > 主要」(见图 18)。
图 18. 使用环境选单来将「主要」设定为「events」页面的主版页面。
6. 使用您偏好的方法 (如步骤 4 和 5 所述) 将「主要」设定为其余三个页面的主版页面，即「home」、「about」及「visit」。
进行完此变更之后，各页面缩图下方的所有蓝色文字卷标现在应该都会显示「主要」。如果您将鼠标光标停留在任何蓝色标签上，会出现工具提示，显示已套用主版页面的阶层 (见图 19)。
7 / 52
图 19. 当您将鼠标指向卷标时，会显示一个实用的工具提示来描述阶层。
在此范例中，阶层只有一层深。换句话说，也就是「主要」主版页面继承「A-主版」页面内容。不过请注意，您也可以根据需要建立主版页面链。例如，您可以先建立一个名为「页首」且
只包含页首内容的主版页面，再建立一个名为「页尾」且继承「页首」主版页面内容的主版页面，然后再建立一个名为「主要」且继承「页尾」主版页面 (也包含页首) 上所有内容的主版
页面。根据网站的设计以及您对某些元素可能会有所改变的认知，您可以建构继承层级来将其设定为数层深。以此方式划分设计有点像是建立符号，因为您可以隔离设计的特定部分，然后
再于稍后根据需要轻松找到及编辑该部分。
请继续阅读下一个教学课程，「用 Muse 建置您的第一个网站，第 2 部分」，在这里您将会学习如何使用 Widget (供您拖移到页面上的预建网站互动网站功能)。Widget 可让您快速将进
阶功能新增至页面，而不必撰写任何程序代码。您将会学习如何编辑 Widget 的行为与外观，来自定义它们在网站设计中的显示方式。
第 2 部分
使用「选单」Widget
设定与自定义 Widget
了解按钮状态
编辑「选单」Widget 的标签
建立与套用段落样式
将页面元素设定为页尾项目
在「用 Muse 建置您的第一个网站，第 1 部分」中，您建立了一个新的网站，使用「规划」视图建立了网站页面，然后在「设计」视图中编辑了「A-主版」页面
以加入页面元素，并定义页首及页尾区域。您也学到关于阶层式主版的知识，建立了新的「主要」主版，并加以套用了「A-主版」。在此部分中，您将编辑「主要」
主版页面，学习如何新增并自定义 Widget。首先您将新增称为「选单」的一种 Widget，以帮助访客导览至网站的各页面。
回到顶端
使用「选单」Widget
在本段由 Brian Wood 讲解的视讯中，您将学习如何将「选单」Widget 插入至您的页面。
由 Adobe Press - Peachpit 提供
提供您的专业知识给
Adobe Community Help
您在前面小节所建立的「主要」主版页面其实已接近完成，因为它继承了「A-主版」页面的所有内容。同时，当您套用其他主版时，复制的页面亦会继承原本主
版页面的参考线。不过，主版页面通常均含有网站导览，所以下一步即是将此加入。
将水平选单新增至「主要」主版页面：
1. 在「规划」视图中，双击「主要」主版页面缩图来在「设计」视图中将其开启并编辑。
2. 在面板组单击「Widget 链接库」索引卷标，开启「Widget 链接库」。或者，若面板组未开启，请选择「窗口 > Widget 链接库」将其开启。开启时，会
在清单中的「Widget 链接库」项目旁边显示核取标记。
3. 在「Widget 链接库」中，单击「选单」区段来将其展开。选取「水平 Widget」，并将其从面板拖移至「主要」主版页面的页尾区域 (见图 20)。
8 / 52
图 20. 拖移并放置「水平选单」Widget。
首次将一个 Widget 拖移至页面时，会显示黑色面板，此面板称为「选项」面板。在面板以外位置单击以将其关闭；需要再次存取时，直接单击 Widget 右方显
示的蓝色箭头按钮即可。
4. 使用「选取」工具将「选单」Widget 置于页尾含有并排背景影像的现有矩形之上 (接近灰色区域顶端)，并垂直置中。
请注意，此时选单即自动显示您已建立的页面名称，且顺序同网站地图中显示的顺序。更棒的是，页面的名称均已自动连结至各页面，且均属动态。因此若日后
您决定要将页面重新命名或移动，选单即会自动更新，连结亦可继续如常使用。Widget 的操作相当直觉化，让您专心投入自定义外观，使其符合网站的设计。
虽然每一种 Widget 提供不同功能，在操作 Widget 时所使用的许多概念则毫无二致。从「Widget 链接库」找到要用的 Widget，然后将它拖移到页面上。每一
个 Widget 均包含依阶层式结构排列的 Widget 元素。单击 Widget，即可继续按下去展开其子元素。在进行此操作的同时，左上角的「选取指示器」会显示目
前所选取元素的名称。
例如，当您首次按下 Widget 时，即会选取 Widget 本身。如果您再单击，则可以选取一个容器，再接着单击可选取容器内的文字框。要逐一返回您之前选取的
子元素，请按 Escape 键。您也可以直接在 Widget 区域以外位置单击，一次取消选取整个 Widget。
选取整个 Widget 时，可以移动其位置。您也可以拖移它的变形控制点，以缩放或变更整个 Widget 的尺寸。您可以设定填色及线条颜色，并可套用样式以控制
整个 Widget 的外观。
回到顶端
设定与自定义 Widget
设定 Widget 的方法，即是更新「选项」面板中的设定。「选项」面板是一个环境面板，让您套用变更并更新该 Widget 专属的设定。有些 Widget 的选项较其
他 Widget 多，但是全部均使用此「选项」面板控制 Widget 的运作，以及其内容显示方式。
选取任一容器元素后，可设定「填色」与「线条」选项更新其外观。选取文字时，可使用「文字」面板或「控制」面板的文字选项设定文字样式。有些时候，您
也会编辑 Widget 中的文字卷标 (不过除非您在「选单」Widget 中设定使用「手动选单类型」，否则页面名称均将依网站地图的页面自动设定)。
1. 单击页面页尾区段的「选单」Widget，会看到「选取指示器」显示「选单」一词。单击蓝色箭头按钮存取「选项」面板 (见图 21)。
图 21. 选取「选单」Widget 并单击蓝色箭头按钮以显示选项。
在本例中，请确定已设定下列默认选项，如图 22 所示：
选单类型：顶层页面
方向：水平
一并编辑：启用
项目大小：大小一致
显示左图标：停用
显示卷标：启用
显示右图标：仅子选单
9 / 52
组件定位：水平；置中对齐
图 22. 使用预设设定值来设定「水平选单」Widget。
「选项」选单的设定让您可以设定选单的运作方式。
2. 单击页面的其他任何位置，以关闭「选项」选单。
接下来，您将学习如何编辑选单中的按钮外观，以及如何控制文字格式以符合网站的设计。
回到顶端
了解按钮状态
1. 选择「档案 > 在浏览器中预视网站」。此选项让您可预视网站中的所有页面。
2. 测试依默认状态显示的「选单」Widget。查看页面第一次加载时，选单中的按钮 (此状态称为「正常」状态)。试着操作按钮，将鼠标光标移至按钮上，
会看到「鼠标指向效果」状态出现。当您单击按钮时，会加载相应的页面，按钮则以较深的灰色显示，此为默认的「作用中」状态。此「作用中」状态有
助于访客掌握自身所在位置，因为它会指出访客浏览网站期间，当前选取的页面。
注意：若您按住鼠标按钮不放，则可见到另一个状态，称为「鼠标按下」，这是当访客将光标移至按钮上并按下鼠标时所显示的自定义外观。
接下来，您将看到如何编辑按钮的状态。
1. 关闭浏览器并返回 Muse。
2. 单击 Widget 以选取整个选单。再单击「food」按钮，选取「food」选单项目 (见图 23)。若您不小心按了第三次，而使「选取指示器」显示「卷标」一
词，则请按一次 Escape 键，返回阶层的上一层，使指示器显示「选单项目」一词。
图 23. 双击以选取 Widget 阶层结构中的「food」选单项目。
由于「选项」面板中已启用「一并编辑」选项，因此对「food」选单项目外观所做的任何变更，均会套用于此「水平选单」Widget 中的所有其余按钮。如此可使
编辑更为快速。除非设计本身需要您为每一个按钮套用不同样式，否则请维持启用预设的「一并编辑」选项。
3. 选取「状态」面板索引卷标或选择「窗口 > 状态」，开启「状态」面板。
此面板让您编辑按钮图形依据访客光标动作而定的各种显示方式。请注意，此处有数个灰色方块，定义各状态下的外观 (见图 24)。
图 24. 设定按钮的状态。
在预视网站时，您已看到「正常」状态代表选单在页面第一次加载时的外观，即访客未使用光标与选单互动之时。若访客将光标移至按钮上，则会显示套用于「鼠
标指向效果」状态的样式。若访客将按钮按下，则会显示套用于「鼠标按下」状态的样式。最后，若访客已位于网站的当前页面 (例如，若他们按下了「about」
选单项目，且仍然在检视「about」页面)，则按钮外观就如同「作用中」状态的样式。最后一个状态为选用，但有时候可能很有帮助：可让访客一看就知道自己
所在页面。
4. 在「状态」面板中，单击列表中每一个项目：「正常」、「鼠标指向效果」、「鼠标按下」及「作用中」状态。请注意，当您按下面板中的各个状态时，页面
上的「选单」Widget 亦会更新显示该状态的默认外观。
5. 再单击「正常」状态。在选取「food」选单项目的状态下，使用「填色」色卡选择一个完全不同的颜色，如红色。当您设定不同填色颜色时，所有选单项
目均会更新其「正常」状态；这是因为启用了「一并编辑」选项 (见图 25)。
10 / 52
图 25. 启用了「一并编辑」选项后，当您更新一个按钮状态的填色颜色时，其他按钮亦会自动更新。
6. 再次于浏览器中选择「档案 > 预视网站」，确认您已自定义了按钮的「正常」状态；当选单首次载入时，除了描述目前页面的按钮外，其余按钮均为红色。
当您将光标移至各个按钮上时，即显示默认的灰色「鼠标指向效果」颜色，呈现鼠标指向效果。
7. 在本范例中，请至「状态」面板选取各个状态 (或使用「控制」面板中「选取指示器」旁的「状态」选单，选取各个状态)，再将「填色颜色」设为「无」
(含红色对角线的白色色卡)。此设定有效地将背景选单项目按钮从视线范围中移除，使选单按钮变成透明，可看到下面的背景设计。
在本文撰写之时，「水平选单」Widget 外围容器预设为透明。不过，您仍然可以利用「填色检色器」设定其填色颜色，方式同选单项目按钮容器的设定。之后当
您自行设计网站时，可尝试设定整个 Widget 的填色颜色，再为按钮容器设定不同填色颜色。您也可以尝试加入背景影像来设计按钮。
完成「水平选单」Widget 的状态编辑后，您将要学习如何以类似的编辑流程来更新各选单项目内的文字外观。
回到顶端
编辑「选单」Widget 的标签
在此部分中，您将看到如何更新各选单项目中显示页面名称的文字卷标。因为此「水平选单」Widget 位在页尾，所以其采用了非常基本的设计，仅使用简单的文
字链接，且所有状态的字体格式均相同。
1. 在选取页面的状态下，单击 Widget，使「选取指示器」显示「选单」一词。单击「food」按钮，选取「food」选单项目。「选取指示器」会显示「选单项
目」一词。再按一次「food」一词，以选取该标签 (即 Widget 中含有「food」一词的部分)。「选取指示器」会显示「卷标」一词。
2. 在「状态」面板中，确认已选取「正常」状态。
3. 单击「文字」面板索引卷标或选择「窗口 > 文字」，开启「文字」面板。
4. 在选取标签的状态下，请选取下列选项，并使用「文字」面板将文字格式化 (见图 26)：
字体：Droid Serif
字体样式：斜体
字体大小：15
字体颜色：#EEE5C4
图 26. 在「文字」面板设定选项，以更新选单标签的外观。
注意：Droid Serif 是一套网页字体，可从「字体」选单中选择「新增网页字体」进行下载。不过，您也可以依偏好选择使用其他适合网页的字体，或是已在计
算机上安装的系统字体。若要了解有关使用网页字体的详细信息，请参阅「Muse 中的印刷样式：使用网页字体、适合网页的字体以及系统字体」。
请注意，在变更文字格式后，所有卷标均会更新至相同的字体样式。这是因为已在「选项」面板启用「一并编辑」。若您需要建立每个选单项目均拥有不同字体格
式的选单，也可以随时停用「一并编辑」选项。
为维持视觉上的一致性，此网站设计将全面使用此字体样式。在下一节中，您将看到如何把属性储存为段落样式，让您可以轻易将相同格式再套用至网站其他文
字。
回到顶端
建立与套用段落样式
1. 单击「段落样式」面板索引卷标或选择「窗口 > 段落样式」，开启「段落样式」面板。
2. 单击面板底部的「新增样式」按钮 (页面图标) 以储存这一组字体样式。储存一组样式后，之后可再将其套用至其他文字元素。
3. 连双击您刚在「段落样式」面板中建立的新样式；此样式已设为默认名称「段落样式」。将其重新命名为：top-nav-normal (顶端-导览-正常) (见图 27)。
11 / 52
图 27. 单击「新增样式」(页面图标) 以新增段落样式，然后连双击新的样式，并输入描述性名称。
注意：
若您在「段落样式」面板以鼠标右键单击 (或按住 Control 的同时单击) 其中一个样式名称，则会显示可进行复制、删除或解除链接样式的选单。若您从选单
中选择「样式选项」，则会显示新的窗口，让您选取「段落标记」(p、h1、h2、h3 等等) 来自动使用该样式 (见图 28)。开启「样式选项」后，单击「取消」将
其关闭。
图 28. 「样式选项」窗口的功能包括将样式套用到特定的 HTML 标记。
若您查看「状态」面板，会发现「正常」、「鼠标指向效果」、「鼠标按下」及「作用中」等所有状态的选单项目卷标均使用相同的字体格式。
4. 单击「预视」可在 Muse 中看到页面于浏览器中的呈现效果。Muse 使用 Webkit 的一个版本来显示页面，许多现代的网页浏览器也是选用此技术。当您
与选单互动时，您会注意到按钮仅会显示其卷标 (选单项目容器为透明)。同时也请注意，您将光标移至选单按钮上，或单击按钮时，卷标均不会改变。
5. 完成选单测试与预视后，请单击「设计」以返回编辑「主要」主版页面。
回到顶端
将页面元素设定为页尾项目
「主要」主版中的导览内容均已完成，但是尚有最后一项工作。设计页面与主版页面时，最好确认页尾区域的各元素均已设定为页尾项目。如此可确保每一页面
的唯一页面内容下方，会永远显示这些页尾项目。请依照下列步骤操作：
1. 单击「规划」以返回「规划」视图。双击「A-主版」页面缩图，以在「设计」视图中进行编辑。
2. 使用「选取」工具选取含有并排显示背景的矩形，以及「Made with Muse」影像。选取时，您可以用按住并拖移的方式框住页尾的项目，或是按住 Shift
再个别单击您要选取的项目。
3. 以鼠标右键单击页面上的项目，确认选单所显示的最后一个项目 (即「页尾项目」) 旁有核取符号。或者，请查看「控制」面板的「页尾」复选框，确认
已将其选取。这两个设定的任一个均可用来确认所选项目已设定要显示于页尾 (见图 29)。
12 / 52
图 29. 确认您已选取「页尾项目」选项。
4. 单击「主要」主版页面的索引卷标，使其成为「设计」视图的作用中页面。或者，若您已将其关闭，请连双击「主要」主版页面缩图，以在「设计」视图
中进行编辑。
5. 使用「选取」工具选取「选单」Widget。请确定您仅按了一次，以便选取整个选单 Widget，且「选取指示器」显示「选单」一词。若您连按两次，不小
心选取了选单项目，请按一次 Escape 键跳回仅选取选单本身的状态。
6. 以鼠标右键单击「选单」Widget，确认选单已设为「页尾项目」，且将会显示于页尾。
7. 选择「档案 > 储存网站」以储存最新的变更。
继续下一堂教学课程「用 Muse 建置您的第一个网站，第 3 部分」，为网站加入页首内容。您将继续使用 Widget (即预先建置的网站互动功能，可直接拖移进
入页面)，并且将学习如何设定主版页面元素，使其显示于新增至个别页面的元素顶端。
第 3 部分
将页首内容加入「主要」主版页面
建立并自定义顶层「选单」Widget
复制主版页面
设定主版页面的元素，使其在前景显示
在「用 Muse 建置您的第一个网站，第 2 部分」中，您利用「选单」Widget 在页尾新增网站导览功能，更新了「主要」主版页面。您学会了
如何展开 Widget 的子元素，以将其选取并利用「状态」面板编辑状态与标签外观。您也探索了如何利用「选项」面板，调整各种控制 Widget
运作方式的设定。此外，您还建立并套用了段落样式。在此部分中，您将在「主要」主版页面新增顶层网站导览功能。
回到顶端
将页首内容新增至「主要」主版页面
您已在「主要」主版页面新增「选单」Widget，完成页尾部分，现在您将新增顶层的导览功能。请依照下列步骤将内容新增至页首区域。
1. 在「规划」视图中，双击「主要」主版页面缩图来在「设计」视图中将其开启并编辑 (若尚未开启)。
2. 使用矩形工具画出一个矩形，起点在可见浏览器区域左上角，宽度则与整体宽度相同，止于右上角。使用「选取」工具拖移矩形的上
方、左方与右方的控制点，直到看到红色边框短暂显示为止；这代表矩形已设为 100% 宽度，此与建立页尾的方法相同 (见图 30)。
图 30. 画出一个占满浏览器窗口顶端区域的矩形。
拖移控制点后，矩形尺寸应约宽 1160 像素、高 253 像素。水平 X 值为 -100，代表矩形左上角位于页面左上角的 100 像素处。Y 值为 0
(代表矩形左上角与页面左上角垂直相符)。若要精确设定这些值，可在选取矩形的状态下检阅「变形」面板或「控制」面板的字段。
3. 设定线条宽度为 0，并用「填色」选单将填色颜色设定为「无」。单击「影像」区段右侧的档案夹，然后浏览以选取名为 tile-
的影像。将「符合」选单设定为「水平并排」(见图 31)。
13 / 52
图 31. 使用「符合」选单使背景影像水平并排。
虽然页首仅由单一矩形构成，但是水平并排填满的背景影像会创造出灰色矩形存在于黑色矩形之上的印象。
4. 选择「档案 > 置入」，或使用键盘快捷方式 Command+D (Mac) 或 Control+D (Windows) 来开启「读入」对话框。
5. 浏览以选取样本档案档案夹内名为 的档案。单击「开启」选择该档案，然后关闭「读入」对话框。
6. 在页首矩形的中央接近页面顶端处单击。如此即会以原始尺寸置入一份 档案实例。
7. 使用「选取」工具将橘色缎带图形对齐，使它垂直置中于页首顶端附近，且涵盖整个页面宽度 (见图 32)。
图 32. 橘色缎带图形置中于页首内。
这个橘色缎带图形会成为下一节中要新增的顶层选单之背景。
回到顶端
建立并自定义顶层「选单」Widget
之前在「主要」主版页面的页尾新增选单时，您已新增一个「选单」Widget 并已设定其样式。在本节中，您将重复相同流程，但是在状态部分
使用不同样式，使每一个选单项目同时显示按钮及文字卷标。
1. 在「Widget 链接库」中，单击「选单」区段来将其展开。选择「水平」Widget，并将其从面板拖移至「主要」主版页面的页首区域。
2. 使用「选取」工具将「选单」Widget 放在页首您置入的橘色缎带图形之上，于顶端附近垂直置中。
在选取「选单」Widget 的情况下，「选取指示器」会显示「选单」一词。您可以单击蓝色箭头按钮存取「选项」面板，并自定义选单显示方
式；但在本例当中，您将使用所有预设设定。您将会使用「一并编辑」设定，以确保在单一选单项目所做的变更均会套用至「选单」Widget 的
所有选单项目。
3. 再单击「food」按钮，选取「food」按钮的选单项目。「选取指示器」会显示「选单项目」一词。若您不小心选取了选单项目内的卷
标，请按 Escape 键。
4. 选取「状态」面板索引卷标或选择「窗口 > 状态」，开启「状态」面板。确认已选取「正常」状态。
5. 使用「填色色卡」，将选单项目「正常」状态的颜色设定为浅橘色。您可以选择偏好的任何颜色，或使用本样本项目使用的特定十六进
制颜色值：#E9916F。
为方便日后在网站其他地方套用相同颜色，您可以重新命名此色票。
6. 在「色票」面板 (可从「控制」面板或面板组中的独立「色票」面板存取) 中，连双击您刚才套用至选单项目的橘色色卡，开启「色票
选项」。取消选取「以颜色数值命名」复选框，并在「名称」字段输入「顶端-导览」(见图 33)。
14 / 52
图 33. 更新「色票选项」以为色票指定描述性名称。
7. 在前一节中，您建立了一个段落样式并设定文字颜色为颜色值 #EEE5C4。您将在本教学课程中重复使用此颜色，所以请连双击该色卡，
将它重新命名为「cream-menu」(奶油色-菜单)。
8. 单击「确定」，关闭「色票选项」对话框。若您用的是「控制」面板中的色票，请在页面其他任何位置单击以关闭「填色色票」对话
框。
9. 在「控制」面板中，将选单项目矩形的圆角半径设为 6，以建立拥有圆角的按钮 (见图 34)。
图 34. 在字段输入数值，以设定所选矩形所有圆角的圆角半径。
10. 在「状态」面板中，选取「鼠标指向效果」状态。单击「控制」面板的「填色色卡」，并选取您刚才重新命名为「顶端-导览」的同一
颜色，设为「鼠标指向效果」状态的填色颜色。
11. 在「状态」面板中，选取「鼠标按下」状态。重复步骤 9，单击「控制」面板的「填色色卡」，并将「顶端-导览」颜色设为「鼠标按
下」状态的填色颜色。
在本范例中，「正常」、「鼠标指向效果」及「鼠标按下」状态均显示相同外观。当您建立自己的网站时，可选择使所有状态均相同，或在访
客与按钮互动时，为每一个状态显示不同外观。本设计为「作用中」状态使用不同颜色，以提醒访客他们目前所检视的页面为何。接下来，您
要将新颜色套用至「作用中」状态：
12. 在「状态」面板中，选取「作用中」状态。单击「控制」面板中的「填色色卡」并将「作用中」状态的填色颜色设定为红棕色。若要使
用本项目所用的相同颜色值，请输入颜色值：571E00。
13. 之后，此红棕色将在网站别处重复使用。若您愿意，可连双击色票开启「色票选项」对话框，并将其重新命名为「棕色-菜单」。
秘诀：若您套用颜色却未命名色票，之后仍可随时使用「滴管」工具从页面取得颜色，再为其重新命名。
至此为止，所有选单项目状态样式均已完成。最终步骤即是更新选单项目卷标的字体样式。
14. 再按一次「food」选单项目以选取其卷标，然后在「状态」面板选取「正常」状态。
15. 在「段落样式」面板中，单击您在本教学课程系列第 2 部分所建立名为「top-nav-normal」(顶端-导览-正常) 的段落样式 (见图
35)。
15 / 52
图 35. 在选取「正常」状态标签的情况下，单击「段落样式」面板中的样式名称，以将卷标文字套用相同的格式。
顶层「选单」Widget 与您在页尾新增的基本「选单」Widget 不同，在其他状态使用了不同颜色的标签。
16. 在选取标签的状态下，单击「状态」面板的「鼠标指向效果」状态。在「控制」面板或「文字」面板中，设定文字颜色以使用您在第 7
步骤中重新命名为「cream-menu」(奶油色-菜单) 的色票 (颜色值为 #EEE5C4)。
请注意，当您设定「鼠标指向效果」状态的颜色时，「鼠标按下」状态亦将自动更新。在本例中，这正是我们想要的设计，但是请记得您可以
视需要覆写此设定，并将「鼠标按下」状态的卷标颜色设为不同颜色。
17. 在「状态」面板中，选取「作用中」状态。在「控制」面板或「文字」面板中，以颜色值 #70909D 将文字颜色设定为岩蓝色。您将会
重复使用此颜色，所以请在「色票」面板连双击该色卡，将它重新命名为「blue-menu」(蓝色-菜单) (见图 36)。
图 36. 在「色票」面板将蓝色色票重新命名。
现在只剩最后一个项目要新增至「home」页面的页首区域。
1. 选择「档案 > 置入」(或使用 Mac 的 Command+D 或 Windows 的 Control+D) 来开启「读入」对话框。浏览以选取样本档案档案夹中
名为 的档案，然后单击「确定」以关闭「读入」对话框。
2. 在页首附近单击，以将标志影像置入页面。使用「选取」工具将图形重新放置，使它置中于「home」选单项目顶端，并位于橘色缎带中
央。
至此，您已完成了「主要」主版页面的顶层网站导览功能。若要查看各选单项目及卷标的状态设定结果，可预视设计。
1. 单击「预视」可在 Muse 中看到页面于浏览器中的呈现效果。
2. 请注意，您置于「home」选单项目之上的标志影像将以动画显示，因为它本身是一个动画 GIF 档案。使用鼠标光标与选单项目进行互
动，查看您按下按钮或将光标至于按钮上时的改变 (见图 37)。
图 37. 使用「预视」检视网站时，GIF 档案将以动画显示，选单的按钮亦会响应您的光标互动动作。
3. 预视完网站导览功能后，请单击「设计」以返回「设计」视图。
在下一节中，您将学习如何复制「主要」主版页面，以及如何控制主版页面元素的堆栈顺序。
16 / 52
回到顶端
复制主版页面
「主要」主版页面的页首内容已完成。虽然您可以直接在网站中的每一个页面使用「主要」主版页面，但是此网站设计共有两个部分。「主
要」主版页面设计最终会用于「home」及「visit」页面。另一个稍微不同的主版页面则会用于「food」、「events」以及「about」页面。
请依下列步骤复制「主要」主版页面：
1. 在「规划」视图中，以鼠标右键单击「主要」主版页面缩图。
2. 在出现的环境选单中，选择「复制页面」(见图 38)。
图 38. 使用选单复制现有的「主要」主版页面。
在「主要」主版页面右侧会出现新的主版页面，其预设名称为「主要复本」。因为您复制了「主要」主版页面，所以新的主版亦是依据「A-主
版」页面。
3. 在您刚建立的主版页面下方，连双击名称字段，并将其重新命名为「前景」。
在下一节中，您将学习如何设定主版页面元素排列顺序，让各个项目能够显示于页面元素上方，不再仅显示于下方。此时是您储存工作成果的
好机会。
4. 请选择「档案 > 储存网站」。
建立主版页面复本的好处之一，就是能将部分内容设定显示于其他页面内容之上，形成有若「排列 > 移至最前」的效果。我们将在「food」及
「events」页面使用此种「前景」显示。
设定主版页面元素的堆栈顺序，是 Muse 4.0 的新功能。在此之前，若要将共通的网站元素置于页面版面的其他内容之上，就必须将页首或页
尾元素置入每一页，而非仅置于主版页面。
回到顶端
设定主版页面的元素，使其在前景显示
您可在 Muse 的「设计」视图接口选取页面元素，并选择「对象 > 移至最前、前移、移至最后或后移」，使一个项目显示在页面上另一个项目
的上方或下方。(您也可以在元素或群组上以鼠标右键单击，并选择「排列 > 移至最前、前移、移至最后或后移」，以设定堆栈顺序)。
若使用旧版 Muse 设计网站，呈现页面时，预设是将主版页面的所有元素永远显示于页面所有元素之后。这种背景的分层放置有时会相当麻烦
(视网站设计而定)，因为唯一的因应措施即是将您原本会置于主版页面的元素拷贝，并贴上至所有您希望于顶端显示这些元素的网站页面。
Muse 提供可控制主版页面元素排列的新功能。现在，您不必再将主版页面的所有东西一律显示于页面元素之后，而是可以选择主版页面的元
素，并设定将其显示为前景元素。主版页面设为前景元素的项目，会显示在所有页面元素之上。
这个新的选项可在「对象 > 移动至 > 主版前景」找到。另外，您也可以于「设计」视图编辑主版页面时，以鼠标右键单击任何元素，在显示
的环境选单中选择「移动至 > 主版前景」。
在此样本项目的设计中，「home」与「visit」页面的内容使用默认堆栈顺序 (即页面元素显示在「主要」主版页面的页首顶端)，但是
「food」、「events」以及「about」页面则否。
在「food」与「visit」页面，您将更新「前景」主版页面，使页首内容显示于前景，即使页面卷动也仍在页面内容之上。请依照下列步骤操
作：
1. 在「规划」视图中，双击「前景」主版页面缩图来在「设计」视图中将其开启并开始编辑 (若尚未开启)。
2. 使用「选取」工具，单击并拖移整组页首内容，包括含有并排显示背景的矩形、置入的橘色缎带图形、「选单」Widget，以及中央的
GIF 标志动画。
3. 选取整个页首内容后，单击鼠标右键并选择「移动至 > 主版前景」(见图 39)。请注意，此时与一般选取对象显示蓝色边框不同，设定
显示于前景的项目在选取时会显示红色边框。
17 / 52
图 39. 使用环境选单将页首内容移至前景。
如此可确保在套用「前景」主版页面的页面上，页首将会显示在页面元素的顶端。
4. 在仍然选取整个页首的情况下，您将把页首固定于页面顶端，如此即使页面卷动，页首也不会随之卷动。您将在第 7 部分中学习如何
固定对象，但是现在请直接单击「控制」面板的上方中央固定位置，将页首固定住 (见图 40)。
图 40. 选取上方中央固定位置，将选取的页首固定。
5. 单击「前景」主版页面，并将其拖移至「food」页面，进行套用。再重复此步骤两次，将「前景」主版页面套用至「events」页面及
「about」页面。
完成此变更后，蓝色卷标文字将显示「前景」一词，代表「food」、「events」以及「about」页面均正在使用「前景」主版页面。若您将光标
移至蓝色「前景」卷标上，就会显示工具提示，指出「前景」主版页面是依据「A-主版」页面设计。
设计您自己的网站项目时，可尝试使用新的「移至前景」功能，将主版页面的元素设定为显示在最前面。之后在本教学课程系列中，您会将
「food」与「events」页面的设计定稿，并了解前景设定是如何确保页首显示在其他页面内容之上。
在本教学课程下一节，「用 Muse 建置您的第一个网站，第 4 部分」，您将看到如何使用嵌入式 HTML 来显示从其他网站拷贝的原始码。您也
将学习如何新增「影像预视灯箱排版」Widget，着手建置「home」页面。
第 4 部分
使用嵌入式 HTML 在 Muse 网站显示部落格
新增「影像预视灯箱排版」Widget
在网站内嵌入视讯
在浏览器中测试「影像预视灯箱排版」Widget
在「用 Muse 建置您的第一个网站，第 3 部分」中，您利用「水平选单」Widget 新增网站导览功能，更新了「主要」主版页面。您学会了如
何利用「状态」面板设定选单项目与卷标的外观样式。您还学会了如何重新命名颜色色票，以方便在「色票」面板中找到颜色。最后，您探索
了如何设定主版页面的元素，使其显示于前景。在第 4 部分中，您将开始使用嵌入式 HTML，以在您的 Muse 网站页面显示由其他网站所产生
的内容。您也将会看到如何将嵌入式 HTML 嵌套至 Widget 容器内。
回到顶端
使用嵌入式 HTML 在 Muse 网站显示部落格
嵌入式 HTML 意指由 Google、YouTube、Flickr 或 Picasa 等第三方网站所产生的原始码。您可以在这些网站建立账户并登入，然后从其网站
拷贝嵌入原始码，并将其新增至您的网站。
将嵌入式 HTML 贴入页面时，就好像在网站页面放入一个窗口，并在窗口内显示第三方网站的内容。
18 / 52
嵌入式 HTML 是轻松快速地新增复杂信息 (如地图、天气预报、股价等) 及丰富媒体 (如数字视频、幻灯片展示、声音文件等) 的绝佳方式。
此做法另外的好处是，让您将第三方网站当作代管服务兼上传接口。例如，若您在 YouTube 建立免费账户，就可以建立自己的 YouTube 频
道，并为您的网站上传视讯内容。YouTube 提供了一个简化上传流程的网页，并在其网站为您代管视讯档案。当您要更新网站时，只要在您的
YouTube 频道新增视讯、拷贝嵌入原始码，再将其贴上至页面，即可在您的 Muse 网站新增视讯。
在本节中，您将要从 Tumblr 拷贝原始码。这是一个免费的在线服务，您必须建立账户并登入，接着张贴可公开存取的部落格文章。部落格简
单易用，不熟悉计算机操作的人也能够轻松更新自己的网站。大多数的部落格网站均提供在线接口，可使用任何浏览器登入账户并张贴新文
章，不需要任何 HTML 知识或额外软件。
注意：访客检视您的网站时，不需要拥有 Tumblr 账户即可阅读您嵌入页面的部落格，仅您需要建立账户，因为您负责设计网站，需要拥有账
户才能建立自定义部落格，并产生您要加入自己网站的嵌入原始码。
1. 在本教学课程中，您不需要建立 Tumblr 账户亦可随堂操作。请直接拷贝以下 Tumblr 网站建立免费部落格后所产生的程序代码：
2. 在「规划」视图中，双击「events」页面缩图以在「设计」视图中将其开启并编辑。
3. 单击空白页面中央，并用以下其中一种方法来嵌入 HTML 原始码：
选择「编辑 > 贴上」，或使用键盘快捷方式 (Mac 用 Command+V，Windows 用 Control+V)，将原始码直接贴上页面。
或者
选择「对象 > 插入 HTML」。在出现的「编辑 HTML」窗口字段内单击，将内容贴上。单击「确定」，关闭「编辑 HTML」窗口。
注意：大多数情况下，Muse 可识别 HTML 原始码并会自动将您贴上的 HTML 直接嵌入页面。不过，若您在页面上看到原始码而非第三方网站上
的内容，则请尝试改用「对象 > 插入 HTML」的方法。
嵌入 HTML 原始码后，会在 Katie's Cafe Tumblr 帐户部落格文章看到周围显示控制点的蓝色边界方框。
4. 使用「选取」工具拖移控制点，调整部落格内容的尺寸，使其约占页面宽度的 80%。将部落格内容置中于页面，以利并排显示的背景图
形能够在左右两侧出现 (见图 41)。蓝色的测量矩形显示其与其他对象的距离。当选取的对象垂直置中时，会短暂显示红色对齐参考
线。
图 41. 在「events」页面调整 Tumblr 部落格的尺寸与位置。
这就是在 Muse 页面嵌入 HTML 所需的步骤。若您要编辑其 HTML 原始码，可在嵌入的 HTML 元素单击鼠标右键，从显示的环境选单选择「编
辑 HTML」。如此将开启「编辑 HTML」窗口，让您存取先前贴上的原始码。
接下来，我们将检阅您在「events」页面所做的变更：
5. 选择「档案 > 在浏览器中预视网页」，以新的浏览器窗口查看「events」页面的显示结果。
请注意当您向下卷动浏览部落格文章清单时，页首会显示于其他页面内容的上方。这是因为「events」页面采用「前景」主版页面，而该主版
页面的页首内容已设定在前景显示。
现在已完成「events」页面。在下一节，您将学习如何将嵌入式 HTML 内容贴入至 Widget，以控制第三方内容依据用户互动的显示方式。
回到顶端
新增「影像预视灯箱排版」Widget
在前一节，您嵌入了一些从 Tumblr 拷贝的 HTML 原始码，以在「about」页面显示部落格的内容。在本节中，您将学习如何在「影像预视灯
箱」Widget 内嵌入 HTML 内容。「影像预视灯箱」是由两个容器构成。在页面第一次载入时，访客会看到触发容器。单击触发区域后，目标区
域的内容即会显示于最上层窗口，在页面前方显示。
「影像预视灯箱」是突显特定元素的好方法，因为在显示目标区域时，可设定「影像预视灯箱」Widget 暂时使页面其余部分变暗，使访客注意
力集中在作用中的显示区域。
请依照下列步骤新增「影像预视灯箱排版」Widget：
19 / 52
1. 在「规划」视图中，双击「home」页面以在「设计」视图中将其开启并编辑。
2. 在「Widget 链接库」中，单击「排版」项目来将其展开。将「影像预视灯箱显示」Widget 从「Widget 链接库」拖移到页面 (见图
42)。
图 42. 将「影像预视灯箱显示」Widget 从「Widget 链接库」拖移到页面。
在本范例中，访客将按下触发容器中较大的主体影像，使「影像预视灯箱显示」Widget 的目标容器出现。从这里，他们可以再按下「播放」按
钮，观看嵌入的 YouTube 视讯。
「影像预视灯箱显示」Widget 的默认版本拥有三个较小的灰色触发方块，其下则是较大的浅灰色目标容器。
3. 双击最右侧的灰色小方块。按第一下时，「控制」列左上角的「选取指示器」会显示「排版」一词。再按一次灰色方块，使「选取指示
器」显示「触发」一词。(较小的灰色方块是此 Widget 的「触发器」，意即负责响应用户互动的按钮)。
样本项目仅使用一个触发按钮及一个目标容器，因此接下来就要将不需要的两个浅灰色触发按钮删除。每删除一个触发器，就会自动删除相应
的目标容器。
4. 按下 Delete (Mac) 或 Backspace (Windows) 移除选取的触发器。接着，双击第二个 (中央的) 灰色方块 (位于您刚才删除的触发器
左侧)。再按一次 Backspace 或 Delete 将其移除。
完成这些变更后，就只剩下一个灰色小触发按钮及一个较大的目标容器。
5. 在别处单击，不再选取 Widget。当目前没有选取任何元素时，可在左上角的「选取指示器」看到「页面」一词。
6. 选择「档案 > 置入」，开启「读入」对话框。浏览以选取样本档案档案夹内名为 的档案。单击「开启」选择该档
案，然后关闭「读入」对话框。在页面任一处单击，将主体影像以完整大小置入。
7. 在仍然选取主体影像的状况下，以鼠标右键单击并从出现的环境选单选择「剪下」(或用键盘快捷方式剪下主体影像，以将其从页面移
除并拷贝至剪贴簿)。
8. 双击剩下的灰色小触发按钮。按第一次时，您会选取整个 Widget，而「选取指示器」会显示「排版」一词。按第二次时，您会选取真
正的触发容器，而「选取指示器」会显示「触发」一词。
9. 以鼠标右键在触发按钮内单击，从出现的选单选择「贴上」。或者使用键盘快捷方式，将主体影像贴入触发按钮。请注意，触发容器会
自动放大为主体影像的尺寸。
在容器内贴上内容不一定都很简单。有时您以为内容已经贴进去了，实际上却贴在页面上。若需要确认主体影像确实位于触发容器内，请按一
次 Escape，查看「选取指示器」。若显示「触发」一词，则表示影像位于触发器内。若显示「页面」一词，则您必须再将影像剪下，重新贴入
触发容器。
10. 在选取触发容器的状况下，设定线条宽度为 0。请用「填色」选单将填色颜色设定为「无」(见图 43)。
图 43. 将主体影像贴入触发容器并将线条与填色设定为「无」。
11. 使用「选取」工具将 Widget 垂直置中于页面接近顶端处，使主体影像触发顶端约四分之一的部分与页首区域重迭。主体影像应刚好符
合橘色缎带图形所形成的凹处。
20 / 52
若您在「控制」面板单击「预视」按钮并测试「home」页面，大型主体影像应会显示，并稍微盖住页首内容。页面内容会显示在「home」页面
的页首上方，是因为「home」页面使用「主要」主版页面。
12. 单击主体影像 (触发容器内)，触发影像预视灯箱效果。页面会变暗，且目标容器内会显示默认的灰色填色颜色。按下 Escape 关闭影
像预视灯箱窗口，再单击「控制」面板的「设计」按钮，继续编辑「home」页面。
回到顶端
在网站内嵌入视讯
目前目标容器中是填入灰色填色颜色。不过，您可以在目标容器置入各种内容，包括不同的图像文件案、填色的矩形、文字或是您从其他网站
拷贝的嵌入式 HTML。
在本范例中，您将贴入 YouTube 产生的嵌入式 HTML。
想象一下，您造访了 的网页，观看您用自己的帐户上传的视讯。当您按下「分享」按钮，并按下「嵌入」时，即可存取并拷贝该
视讯的嵌入原始码 (见图 44)。
图 44. 选择想要的视讯大小后，拷贝 YouTube 产生的嵌入原始码。
在本教学课程中，Katie's Cafe 视讯的嵌入原始码已从网站上拷贝，所以您不需要造访 YouTube。请拷贝下面的嵌入原始码，以将其存入您的
剪贴簿：
上面的原始码采用 iFrame 标签包覆张贴于 YouTube 的视讯文件链接。iFrame 是一种 HTML 容器，让您可以加入网页内，于网页上以「窗
口」形式显示内容。
拷贝上面的原始码后，请返回 Muse。
13. 使用「选取」工具单击页面的灰色边框，使左上角的「选取指示器」显示「页面」一词。这代表目前选取了整张页面。
14. 单击具有灰色填色颜色的较大目标容器。左上角的「选取指示器」会显示「排版」一词。再按一次灰色目标容器，使「选取指示器」显
示「容器」一词。再按一次 (显示为「目标」)，然后再一次，直到「选取指示器」列出「影像框」一词。按 Backspace (Windows) 或
Delete (Mac)，从目标容器移除影像框。
在仍然选取内层目标容器的状况下，下一步即是将您在前面复制的 HTML 原始码贴入目标容器。
注意：在目标容器内贴上原始码，与之前在触发容器贴上主体影像一样容易出错，因为目的是要将原始码贴在 Widget 的目标容器「里面」。
此时有可能 (视您目前选取的元素而定) 会将视讯原始码贴在 Widget 之外，变成直接嵌入于页面。所以此处请小心进行...若您按下「预视」
以测试影像预视灯箱，发现即使未按下主体影像，视讯也会显示，就代表视讯原始码并未成功贴入容器，所以视讯才会立即显示。视讯应该仅
在按下主体影像之后显示。
请依下列步骤将视讯原始码贴入目标容器 (此时「选取指示器」显示「容器」一词)。
15. 选择「对象 > 插入 HTML」。在出现的窗口中，选取默认的占位符文本，并按下 Delete (Mac) 或 Backspace (Windows) 将其移除。
选择「编辑 > 贴上」，将您在前面拷贝的 YouTube 原始码贴入「HTML 程序代码」字段。单击「确定」，关闭「HTML 程序代码」窗
口。
注意：在大部分的情况下，Muse 会在您贴上 HTML 程序代码时自动侦测，并且理解这是 HTML 而非纯文本。因此，您也可以不选择「对象 >
插入 HTML」开启 HTML 窗口，而改为在选取内层目标容器的状况下，以鼠标右键单击 (或按住 Control 的同时单击)，再从出现的环境选单选
择「贴上」。(或者选择「编辑 >贴上」或用键盘快捷方式，将原始码贴至目标容器内)。Muse 提供许多方法，可达成将视讯原始码贴入目标容
器的目的。
将原始码贴入目标容器后，即可看到视讯的第一格 (一杯咖啡)。看到视讯的第一格，即代表您成功贴上 HTML 嵌入原始码。在「设计」视图中
编辑页面时，视讯并不能播放。您必须要按下「控制」面板的「预视」按钮，或以浏览器预视页面，才能播放视讯。
16. 视需要使用「选取」工具调整目标容器大小，放大尺寸使之符合嵌入式 HTML 视讯内容的大小。宽度应为 670 像素左右，高度则应为
415 像素左右。在选取视讯的情况下，「选取指示器」会显示「HTML 项目」一词。
17. 在选取目标容器的状态下，单击 Escape 以选取外层容器。或者，您也可以在别处单击以取消选取「影像预视灯箱显示」Widget，然后
再连按它两次：第一次选取「排版」，第二次选取较大容器。使用「选取」工具拖移容器的控制点，使目标容器在里面置中。调整容器
尺寸至宽 710 像素、高 460 像素。
18. 用「填色」选单将容器填色颜色设为棕色 (#63301B) 并将填色颜色的不透明度设为 44 (见图 45)。
21 / 52
图 45. 在「填色」选单设定容器的填色颜色与不透明度。
19. 选取容器底部的文字框，按下 Delete (Mac) 或 Backspace (Windows) 将其移除。此文字框可填入目标内容的批注，但是在本项目中
并不使用。
20. 选取容器右上角的「关闭」方块 (显示「X」)。在「关闭」方块内单击，以选取其标签并加以删除。用「填色」选单设定填色颜色为
「无」。在「填色」选单中，单击「影像」区段旁的档案夹图示，并浏览以选取名为 的档案。使用「选取」工具调整
「关闭」方块大小，以显示整个关闭图标影像。
21. 使用「选取」工具调整目标容器及触发容器的位置，将此两项目移至您要在页面上显示的位置。
22. 在选取「排版」的情况下，单击蓝色箭头按钮开启「选项」面板。在本范例中，请使用下列设定 (见图 46)：
位置：影像预视灯箱
切换效果：淡化
自动播放：停用
随机排列：停用
最初全部隐藏：停用
启用拨动：启用
在上方时触发：停用
关闭按钮：启用
编辑时显示影像预视灯箱组件：启用
在设计模式中全部显示：启用
图 46. 更新「选项」选单中的设定以控制 Widget 运作方式。
在「选项」选单以外之处单击将其关闭。至此，Widget 即已完成设定，可供测试。
22 / 52
回到顶端
在浏览器中测试「影像预视灯箱排版」Widget
1. 单击「控制」面板的「预视」按钮，或选择「档案 > 在浏览器中预视网页」，以测试「home」页面。
页面首次加载时，仅会看到大型主体影像及「Mystery Latte」讯息，因为含有视讯的目标容器已隐藏 (见图 47)。
图 47. 在浏览器中预视页面，查看访客所见画面。
3. 若您单击主体影像，就会看到影像预视灯箱窗口，且页面其他部分会变暗。外层目标容器的填色 (用的是半透明浅棕色) 会填满整个浏
览器窗口，并且显示视讯的第一格。单击视讯中央的「播放」按钮，观看视讯播放。(视讯实际上是从代管视讯档案的 YouTube 网站播
放)。当您看完视讯时，单击目标右上角的关闭按钮 (「x」图标影像) 以将影像预视灯箱关闭，并回到「home」页面。
4. 关闭浏览器并返回 Muse。
在下一个教学课程，「用 Muse 建置您的第一个网站，第 5 部分」，您将了解如何使用「标签面板」Widget，在单一页面显示更多内容。您也
将练习建立并套用段落样式，同时学习如何在文字框内使文字绕排在影像周围。
第 5 部分
新增「标签面板」Widget，以在单一页面显示多个容器
设定「卷标面板」Widget 各索引卷标的外观样式
在「卷标面板」Widget 的内容区域新增文字框
在文字框内使文字绕排在影像周围
在「用 Muse 建置您的第一个网站，第 4 部分」中，您在 Widget 容器内新增了嵌入式 HTML。您也使用了「影像预视灯箱排版」Widget，并
在浏览器内测试了影像预视灯箱的操作。在第 5 部分，您将开始使用「标签面板」Widget。「面板」Widget 对于在较小屏幕区域显示更多元
素非常有用。访客能单击「卷标面板」Widget 的索引卷标，显示各容器的内容。「标签面板」Widget 以及「折迭式」Widget 两者都能为页面
添加互动性，让访客能够选择想要展开的内容。
至此，「home」页面与「events」页面均已完成。在本节中，您将学习如何使用「标签面板」Widget 与「幻灯片展示」Widget，来设计
「about」页面。
回到顶端
新增「标签面板」Widget，以在单一页面显示多个容器
1. 开启「Widget 链接库」。单击「面板」类别来将其展开。选择「标签面板」Widget，并将其从「Widget 链接库」拖移至「about」页
面中央 (见图 48)。
图 48. 将「标签面板」Widget 拖移至页面时，其会以默认格式显示。
2. 按三次右侧最顶端的索引卷标。按第一次时，会选取整个「标签面板」，按第二次时，会选取「索引卷标容器」，按第三次时，则选取
右侧的「索引卷标」。请查看「选取指示器」，了解目前选取的是 Widget 的哪一个子元素。按下 Delete (Mac) 或 Backspace
(Windows) 删除第三个索引卷标。完成此变更后，即仅剩下两个索引卷标。在页面其他任何位置单击。
3. 再单击 Widget，选取整个「标签面板」。拖移控制点调整整个 Widget 的大小至宽 840 像素、高 645 像素。当您拖移控制点时，可
参照出现的度量数值。您也可以查看「变形」面板中「W」(宽度) 与「H」(高度) 两个字段的数值 (见图 49)。
23 / 52
图 49. 检阅宽度及高度字段，确认 Widget 调整后的尺寸。
4. 使用「选取」工具将「标签面板」Widget 移动至页面顶端附近，垂直置中。
5. 单击「控制」面板中「固定」接口的顶端中央位置，将「卷标面板」Widget 固定于此。若要了解有关固定对象使其无法卷动的详细信
息，请参阅第 7 部分。
6. 在仍然选取「标签面板」Widget 的情况下，单击左侧索引卷标以选取「索引卷标容器」(含有两个顶层索引卷标的元素)。使用「选
取」工具将中央控制点向下拖移，直到高度约为 98 像素。在「间距」面板中，如图 50 所示设定下列数值：
左侧：220
右侧：220
下方：2
间距高度：10
图 50. 在「间距」面板设定「标签容器」的间距值。
7. 完成这些变更后，使用「选取」工具将整个「标签面板」Widget 拖移至页面最顶端，使「标签面板」的顶部完全紧靠页首矩形的底
部，两者之间不留垂直间距。若有需要，您也可以放大显示，细看元素对齐状况。完成后请将放大比例设回 100%。
回到顶端
设定「卷标面板」Widget 各索引卷标的外观样式
现在您已新增「标签面板」Widget，下一部分将要更新其样式，完成两个索引卷标的设计。
1. 按三次左侧索引卷标，以选取左侧卷标。开启「状态」面板并选取「正常」状态。用「填色」选单设定填色颜色为「奶油色-菜单」。
将线条宽度设定为 0。同样在「控制」面板中，单击圆形接口底部的两个象限，启用左下及右下圆角半径。将圆角半径值设定为 100。
2. 选取「状态」面板的「鼠标指向效果」状态。将索引卷标「鼠标指向效果」状态的填色颜色设为 571E00 (您可能已将此颜色命名为
「棕色-菜单」)。请注意，当您设定「鼠标指向效果」状态的填色颜色时，「鼠标按下」状态亦将自动更新。选取「作用中」状态，将
索引卷标的「作用中」状态套用相同的填色颜色。现在「正常」状态是使用「奶油色-菜单」填色，其他三种状态则是使用「棕色-菜
单」颜色填色。
3. 再按一次左侧索引卷标，以选取卷标。选取时，「选取指示器」会显示「卷标」一词。选取「状态」面板的「正常」状态，然后使用
「文字」面板设定下列属性 (如图 52 所示)：
网页字体： Kaushan Script (或任选其他 Script 字体)
字体大小：26
颜色：#70909D (在第 3 部分中，您已将此颜色重新命名为「蓝色-菜单」)
行距：120%
对齐方式：置中
24 / 52
图 52. 更新「文字」面板的设定，为卷标文字设定样式。
3. 在依然选取标签的状态下，单击「段落样式」面板底部的「新增样式」按钮。为方便之后重复套用此格式，请将这个新的段落样式重新
命名为：标题-索引卷标
4. 当您查看「状态」面板时，在选取「正常」状态时套用至标签的格式，也会同时套用至「鼠标指向效果」及「鼠标按下」状态。选取
「作用中」状态，并且再按一次「标题-索引卷标」段落样式，以将此格式套用于「作用中」状态。至此为止，两个索引卷标的所有状
态均已设定样式。再选取一次「正常」状态。
5. 使用「文字」工具，选取左侧索引卷标的卷标文字并输入：Gallery
6. 使用「文字」工具，选取右侧所引卷标的卷标文字并输入：Our Story
7. 若您选取左侧索引卷标并查看「状态」面板，会发现最终格式已套用于每一个索引卷标与卷标。单击右侧索引卷标，注意到除了各索引
卷标的文字内容外，各状态看起来均相同 (见图 53)。
图 53. 在「状态」面板检阅每一个索引卷标的格式。
回到顶端
在「卷标面板」Widget 的内容区域新增文字框
1. 请花点时间，在「Gallery」与「Our Story」两个索引卷标之间来回切换。「Gallery」索引卷标的占位符文本与「Our Story」索引卷
标的占位符文本不同，可以看出来显示其中一个容器时，另一个即会隐藏。
2. 单击卷标为「Our Story」的右侧索引卷标。在选取右侧索引卷标的情况下，相应的内容区域会显示于其下方。此操作不论在「设计」
视图中编辑页面时，或是在在线网站时，均是相同的。这就是「标签面板」Widget 好用之处，因为您能够非常有效率地在单一页面显
示更多内容。
3. 选取「Our Story」索引卷标的内容区域。选取时，「选取指示器」会显示「内容区域」一词。选取占位符图像文件案，按下 Delete
(Mac) 或 Backspace (Windows) 将其删除。
4. 使用「文字」工具，选取现有的占位符文本页首。选取粗体的页首文字「Mauris sit amet」并将其删除。
5. 暂时从 Muse 切换至您的桌面。开启样本档案档案夹，找到名为 的档案。双击档案以在文本编辑器中开
启。拷贝页面第一部分，直至「... crafted through years of baking for friends and family.」之处。
... crafted through years of baking for friends and family.
6. 返回 Muse。使用「文字」工具，选取现有的占位符文本。将您拷贝的文字内容贴入文字框。在文字框顶端多留一行空行。
7. 保持选取文字框，使用「文字」面板选择下列设定以格式化文本：
字体：Droid Serif (或任选其他 serif 字体)
字体大小：14
字体颜色：#222222
对齐方式：靠左
行距：120%
8. 维持选取文字，单击「段落样式」面板底部的「新增样式」按钮。连双击新建的段落样式并重新命名为：本文。如此即可轻松为其他文
字内容重新套用相同格式。
9. 在「色票」面板中连双击颜色值 #222222 并将其重新命名为：凯蒂黑。
25 / 52
10. 在「控制」面板中，设定文字栏的线条颜色为 #222222 (凯蒂黑)，并设定线条宽度为 5 像素。
11. 使用「填色」选单将文字字段的填色颜色设为浅米黄色 (#F8F3E2)。 单击「影像」区段旁的档案夹，然后浏览以选取样本档案档案夹
中名为 的档案。将「符合」选单设定为「并排」。
12. 在「间距」面板中，设定左间距为 24、右间距为 15 (见图 54)。
图 54. 设定间距值，在贴上的文字复本周围建立视觉空间。
接下来，您将在对应各索引卷标的内容区域容器中新增内容。
13. 使用「选取」工具调整文字栏大小。将其拖移至容器左侧，再使用控制点放大宽度至可用内容区域空间的一半左右 (大约宽 390 像
素、高 381 像素)。
接下来，您将复制现有的文字框来建立第二个文字框，填满内容区域的右侧。
1. 使用「选取」工具，选取文字框。按住 Option (Mac) 或 Alt (Windows) ，同时将文字框复本拖移至内容区域右侧 (见图 55)。利用
画面显示的对齐参考线，确保右侧文字框已水平对齐左侧文字框。
图 55. 复制现有的文字框以在右侧建立第二栏文字框。
2. 暂时从 Muse 切换至开启 文本文件的文字编辑程序。从「Katie's Cafe has won 」开
始到结尾，将文本文件下半部全部拷贝。
3. 切换回 Muse。使用「文字」工具，在复制的右侧文字框选取所有现有文字。贴上您从剪贴簿拷贝的新文字内容。
4. 视需要使用「选取」工具调整两个文字框位置，使两者对齐并置中于内容区域的正确位置。
5. 在依然选取文字框的状态下，单击 Escape 以选取「Our Story」索引卷标的内容区域。设定线条宽度为 0，并将填色颜色设定为
「无」。
「卷标面板」Widget 的「Our Story」索引卷标已接近完成。最后部分就是新增一张小型影像，在左侧文字框内使文字绕排在影像周围。
回到顶端
在文字框内使文字绕排在影像周围
在文字框内使文字绕排在影像周围的方法，即是拷贝并贴上影像 (而非将其置入) 至文字框内，然后使用「绕图排文」面板调整绕图排文设
定。请依照下列步骤操作：
1. 单击页面任一处或页面外部的灰色区域，以取消选取 Widget。
2. 选择「档案 > 置入」，然后浏览以选取样本档案档案夹中名为 的档案。单击「开启」以关闭「读入」对话框。
按住光标，并在页面上含有 Widget 之区域以外的地方拖移光标。藉由按住并拖移，您可调整影像大小，且画面会暂时显示目前百分
比，让您知道要置入的影像比例。在此项目中，请待影像约缩小至 42% 时放开鼠标按钮，使影像尺寸为110 像素宽、144 像素高 (见
图 56)。
26 / 52
图 56. 按住并拖移可缩小置入的影像大小至 42% 左右。
3. 选取页面上缩小的影像，以鼠标右键单击，并从显示的选单选择「剪下」。
4. 使用「文字」工具，在左侧内层的文字框内单击，位置就在以「Katie's in 」起始的第二段落第一个字符前方。在文
字框此处单击鼠标右键并从选单选择「贴上」，直接将影像贴于第二段落之前 (见图 57)。
图 57. 将影像贴入文字框的文字行内。
5. 在仍然选取影像且「选取指示器」显示「行内」一词的情况下，开启「绕图排文」面板 (单击「绕图排文」索引卷标，或视需要选择
「窗口 > 绕图排文」以将其开启)。选择中间的绕图排文选项可将影像靠左进行绕图排文，并设定「右侧偏移量」值为 15 (见图
58)。
图 58. 在「绕图排文」面板中调整绕图排文设定。
完成此变更后，「标签面板」Widget 的「Our Story」索引卷标内容即已完成。在下一节，您将学习如何在「Gallery」索引卷标的内容区域新
增幻灯片展示。
27 / 52
至此您已探索了如何设定「标签面板」Widget，请继续阅读「用 Muse 建置您的第一个网站，第 6 部分」，学习如何新增并设定「缩图幻灯片
展示」Widget。完成「about」页面的设计后，您将继续建立一组显示于「food」页面的菜单，并设定其样式。
第 6 部分
新增「缩图幻灯片展示」Widget 至页面
用「选项」面板设定「缩图幻灯片展示」Widget
调整「缩图幻灯片展示」Widget 元素的大小及对齐这些元素
测试「缩图幻灯片展示」Widget
使用段落样式设定文字框样式
使用内建的拼字检查及更新字典
更新文字框外观
显示全部
在用 Muse 建置您的第一个网站，第 5 部分中，您学会如何新增「标签面板」Widget，以在单一页面显示更多内容。您也学到如何在文字框
内，使文字绕排在影像周围。在此部分中，您将看到如何在「标签面板」Widget 的其中一个容器内，新增一个「缩图幻灯片展示」Widget，以
完成「about」页面的设计。您也将开始设计「food」页面，加入「breakfast」、「lunch」、「dinner」以及「dessert」菜单。
「幻灯片展示」Widget 的设定相当简单。「缩图幻灯片展示」Widget 让您在网站上以互动方式显示一连串的影像。它与「标签面板」Widget
类似，访客按下缩图容器 (在本范例中为缩图按钮) 后，相应的主体影像版本即会在页面它处较大的容器中显示。
您也可以建立相片收藏馆，在影像预视灯箱中显示精选内容，就像在本系列第 4 部分中加入「home」页面的「影像预视灯箱排版」Widget 功
能一样。若您要显示一组影像，并使每张较大的主体影像显示于其专属的最上层窗口，同时将页面其余部分调暗，便可使用影像预视灯箱幻灯
片展示。
在本范例中，您将建置一个相片收藏馆，沿顶端显示数个缩图影像，下方则显示单一个较大的影像。使用「选项」面板即可控制相片收藏馆的
运作与显示方式。套用「控制」面板中的设定则可设定幻灯片展示的外观样式。
回到顶端
新增「缩图幻灯片展示」Widget 至页面
由 - James Fritz 提供
提供您的专业知识给
Adobe Community Help
幻灯片展示也可以直接加入页面，但是在本范例中，您将在「标签面板」Widget 的内容区域中，嵌套一个「缩图幻灯片展示」Widget。请依照
下列步骤操作：
1. 在「设计」视图编辑「about」页面时，单击「Gallery」索引卷标即可看到内容区域容器，下方并显示其占位符内容。
2. 选取占位符内容 (内容区域内的影像框及文字框)，并将其删除。
3. 开启「Widget 链接库」并展开「幻灯片展示」区段。从列表中选取「缩图幻灯片展示」Widget，并拖移一份复本至页面 (见图 59)。
28 / 52
图 59. 将「缩图幻灯片展示」Widget 拖移至页面。
回到顶端
用「选项」面板设定「缩图幻灯片展示」Widget
当您首次新增「缩图幻灯片展示」Widget 时，会含有 1 个较大容器 (主体影像)、3 个较小缩图容器 (按钮)、2 个箭头按钮 (下一个及上一
个的导览控制)、1 个计数器，以及 1 个批注。
1. 单击蓝色箭头图标存取「选项」面板。在本范例中，您不需要「下一个」与「上一个」的箭头按钮，所以请取消选取这些项目旁的复选
框 (「上一个」和「下一个」) 将其停用。请注意，取消选取复选框后，按钮随即消失。
同时也请取消选取「批注」及「计数器」选项，仅保留缩图触发按钮及较大目标容器。浏览选项并视需要更新以符合下列设定 (如图 60 所
示)。
新主体：等比例填满框架
新缩图：等比例填满框架
切换效果：淡化
转变速度：0.5 秒
自动播放：未启用
随机排列：未启用
影像预视灯箱：未启用
启用拨动：启用
第一个：未启用
上一个：未启用
下一个：未启用
最后一个：未启用
批注：未启用
计数器：未启用
关闭按钮：未启用
缩图：启用
编辑时显示影像预视灯箱组件：启用
一并编辑：启用
29 / 52
图 60. 于「选项」面板更新「缩图幻灯片展示」Widget 的设定。
不同 Widget 提供不同选项，有些较为复杂。请花点时间检阅「选单」选项，了解可用的设定。以下略作概览：
新增影像：单击档案夹图标以浏览并选取要显示的影像。
新主体：定义较大的相片内容于目标容器中的显示方式。
等比例符合内容：相片图像文件案保持原始尺寸，即使大小不符合目标容器亦同；若影像不符合容器，则容器可能有部分空白。
等比例填满框架：调整相片图像文件案尺寸，以符合目标容器比例；可能因此裁切相片影像一部分。
新缩图：定义较小的缩图相片内容于触发容器中的显示方式。
等比例符合内容：相片图像文件案保持原始尺寸，即使大小不符合目标容器亦同；若影像不符合容器，则容器可能有部分空白。
等比例填满框架：调整相片图像文件案尺寸，以符合目标容器比例；可能因此裁切相片影像一部分。
切换效果：将目标容器中的内容以另一个目标容器取代时，所使用的动画方式。此功能也已针对触控屏幕启用，因此若您为行动装置建立网
站，访客即可拨动屏幕触发转变动画，并看到下一个内容项目。
淡化：现有容器的不透明度降低，同时新容器的不透明度增加。
水平：新容器从侧边水平滑入，覆盖过现有的容器。
垂直：新容器从侧边垂直滑入，覆盖过现有的容器。
转变速度：播放动画使用的秒数。
自动播放：此设定启用时，幻灯片展示将自动播放，而非采取交互式模式 (交互式模式需要访客按下触发按钮才能依序检视相应的目标)。设定
每个影像转变至下一个影像前所显示的秒数。
随机排列：启用时，影像将以随机顺序显示，而不依序循环显示缩图。
影像预视灯箱：启用此选项后，幻灯片展示会在显示目标容器中的内容时，以覆盖层使页面它处变暗。关闭影像预视灯箱后，会再显示完整页
面。
启用拨动：启用此选项且网站含有平板计算机或手机版面以在行动装置显示网页内容时，Widget 的交互式组件将支持触控屏幕手势。
「组件」区段：
第一个：启用此选项时，将显示「第一个」导览按钮。
上一个：启用此选项时，将显示「上一个」导览按钮。
下一个：启用此选项时，将显示「下一个」导览按钮。
最后一个：启用此选项时，将显示「最后一个」导览按钮。
批注：启用此选项时，将显示相片收藏馆批注。
计数器：启用此选项时，将显示相片收藏馆计数器。
关闭按钮：启用此选项时，将显示「关闭」按钮。
缩图：启用此选项时，将显示缩图触发按钮。
「编辑」区段：
编辑时显示影像预视灯箱组件：启用「影像预视灯箱」选项时，选取页面上的触发之后，仅会依默认显示相应的个别目标区域。当您在
设计版面时，可利用此选项直接看到目标以利作业。此设定并不影响预视或以浏览器检视页面时的幻灯片展示方式。若未启用「影像预
视灯箱」选项，则此选项会以灰色显示。
一并编辑：此选项默认为启用，以利迅速编辑 Widget。除非您需要个别设定每个触发的外观，否则请保持启用此选项，以便使任一元
素的变更均自动套用至其他元素。
检阅可用设定后，请在「选项」选单之外的任何位置单击将其关闭。
在下一节，您将重新放置 Widget 的元素。
30 / 52
回到顶端
调整「缩图幻灯片展示」Widget 元素的大小及对齐这些元素
1. 在整个「幻灯片展示」Widget 单击，将其选取。使用「选取」工具来拖移它的控制点，调整整个「缩图幻灯片展示」Widget 的大小，
直到大约宽 790 像素、高 490 像素。您可以查看「变形」面板或「控制」面板中的「变形」字段来检查尺寸。
2. 在仍然选取「幻灯片展示」的情况下，再单击缩图容器，以选取内含 3 张缩图的容器。使用侧边的变形控制点将其拉宽，再使用「选
取」工具向上拖移整组共 3 个缩图，直到位于顶端并垂直对齐较大主体影像容器的正中央 (见图 61)。
图 61. 选取缩图的触发容器并将其重新放置到较大目标容器的上方。
拖移元素时，画面会暂时显示蓝色智能型参考线，指出缩图容器是否已对齐主体影像容器的正中央。
请依此步骤，将图像新增至相片收藏馆，同时产生相应的缩图与主体容器：
1. 单击蓝色箭头按钮开启「选项」选单。单击「新增影像...」文字旁的档案夹图标，然后浏览至您桌面上的样本档案档案夹。找到名为
gallery 的子档案夹并开启。
2. 按住 Shift，同时选取下列五个图像文件案：
3. 选取此五个图像文件案时请按住 Shift 键不放。单击「开启」以关闭「读入」对话框 (见图 62)。
31 / 52
图 62. 选取 gallery 子档案夹中的整组共五个收藏馆相片。
选取多个图像文件案时，同时也在「缩图幻灯片展示」Widget 加载内容。此方法让您可以选取多个图像文件案，并为主体影像容器中每一个较
大的新图像文件案产生对应的缩图容器按钮。
五个新影像将会新增至现有的缩图按钮中。
4. 单击「缩图幻灯片展示」Widget 以将其选取，然后单击缩图容器，之后再单击最初新增幻灯片展示时依默认显示的 3 张黑白缩图的其
中一张。将每张缩图选取后单击 Delete 键 (Mac) 或 Backspace 键 (Windows) 以移除，直到仅剩下新增的五张彩色缩图 (见图
63)。
图 63. 进入选取每一张预设的黑白缩图后，按下 Backspace 或 Delete 键将其一张张移除。
请小心勿删除整组缩图；若发生此情况，可选择「编辑 > 还原」还原前一次的操作，然后务必先单击个别缩图加以选取 (「选取指示器」会显
示「缩图」一词) 后，才能按下 Backspace 或 Delete。
5. 选取含有整组五张缩图影像的容器。使用变形控制点调整其大小，使剩余的五张缩图置中于主体影像容器上方 (见图 64)。
32 / 52
图 64. 缩图影像置中对齐影像容器。
回到顶端
测试「缩图幻灯片展示」Widget
重新放置幻灯片展示元素并移除占位符缩图影像之后，收藏馆部分即已完成。在本节，您将测试幻灯片展示以查看其显示结果。
1. 首先，在「设计」视图测试相片收藏馆。单击顶端的缩图按钮，会看到下方较大容器中显示相应的主体影像。
2. 单击「预视」，从 Muse 内查看收藏馆在浏览器的显示结果。与幻灯片展示进行互动，看看单击缩图时，相应的较大影像会如何显示。
3. 完成后，请单击「设计」以返回「设计」视图。在别处单击，然后选取整组「缩图幻灯片展示」Widget (请小心勿选取围绕其周围的
「标签」Widget)。使用「选取」工具将「幻灯片展示」置中于「Gallery」索引卷标的面板容器内。进行完这些变更之后，收藏馆部分
即已完成 (见图 65)。
图 65. 将 Gallery 置中于「标签面板」Widget 的内容区域容器中。
4. 选择「档案 > 在浏览器中预视网页」，以您的预设浏览器查看「about」页面的显示结果。
5. 测试「卷标面板」Widget 的功能。单击各卷标，查看在内容区域容器中显示的相应内容。接着，测试「Gallery」索引卷标中的幻灯片
展示。单击各个缩图按钮，确认会显示相应的较大主体影像。
33 / 52
现在，「about」页面设计已完成。
接下来，您就要加入内容并设计「food」页面。
此样本项目中的「food」页面包含 4 个区域：breakfast、lunch、dinner 及 dessert 菜单。在本节中，您将新增 4 个文字框并格式化文
本，以更新菜单的外观。
回到顶端
使用段落样式设定文字框样式
若要填入菜单，您将从外部文本文件拷贝菜单文字，然后将其内容贴入文字框。您也将建立并套用段落样式，以设定这些文字的样式。请依照
下列步骤操作：
1. 在「设计」视图中编辑「food」页面时，请用「文字」工具在接近页面顶端的页首区域下方为「Breakfast」菜单建立文字框。拖移建
立约宽 800 像素、高 440 像素的框架。
2. 暂时从 Muse 切换至您的桌面。开启样本档案档案夹，找到名为 的档案。双击档案以在文本编辑器中开
启。选取文本文件中的所有文字并加以拷贝。
3. 返回 Muse。使用「文字」工具，于文字框内单击。将您拷贝的文字内容贴入文字框。在文字框顶端多留一行空行。
4. 使用「文字」工具选取第一行文字：Fruit $1
5. 在「文字」面板中，选择下列设定以格式化文本：
字体：Droid Serif Bold (或任选其他 serif 字体)
字体大小：14
字体样式：粗体
字体颜色：#A6342A (红色)
对齐方式：靠左
行距：120%
6. 维持选取文字，单击「段落样式」面板底部的「新增样式」按钮。连双击新建的段落样式并更名为：food-header。如此即可轻松为其
他菜单的文字标题重新套用相同格式。
7. 使用「文字」工具选取下一个「breakfast」项目：Croissants $3
8. 单击名为「food-header」的段落样式，将相同格式套用至第二个「breakfast」项目。
9. 重复步骤 7 与步骤 8，选取并套用「food-header」段落样式至文字框中的每一个「breakfast」项目 (即含有美元符号的每一行)。
10. 从顶端开始，使用「文字」工具选取第一个「breakfast」项目说明：Bananas、mandarin oranges、red delicious apples、mixed
berry cup
11. 单击「段落样式」面板中所列的「内文」段落样式，以将格式套用至文字行。
12. 逐行选取「breakfast」项目下剩余的各条说明文字，并套用内文段落样式 (见图 66)。
图 66. 使用段落样式套用格式以设定菜单样式。
您亦可造访样本网站在线版本，以其设计作为参考。
若要了解有关处理文字的详细信息，请参阅 Muse 中的印刷样式一文。
回到顶端
使用内建的拼字检查及更新字典
Muse 4.0 内含「拼字检查」，能够轻松找到并解决文字框中的拼字错误。「拼字检查」平时即保持启用。它会在所有无法于字典中找到的文字
下显示红色底线 (见图 67)。
34 / 52
图 67. 可能拼错的文字均会划上红色底线。
要修正错字，请使用「文字」工具选取该字词 (连双击即可选取)，再单击鼠标右键查看建议的字词清单 (见图 68)。
图 68. 使用文字工具修正拼字。
若建议的字词中有正确项目，请按向下键或用鼠标选取要使用的建议字词，然后单击 Return/Enter 套用。若您误选了错误的字词，可以还原
变更 (「编辑 > 还原」)，然后选择其他建议字词，或使用「文字」工具编辑字词。
若标记为错字的字词仅使用一次 (例如人名或地名)，且您确定拼字无误，则无需修正。在「设计」视图中看到的红色底线并不会显示于预视、
发布或转存的网站中。
使用如公司名称或地址等常用字词时，可将该字词加入「拼字检查」字典，即不会再将其标记为错字。
请使用「文字」工具以鼠标右键单击要加入字典的字词，然后从显示的环境选单选择「新增至字典」选项。
您可以为整个网站或个别文字框设定要使用的语言 (而此亦设定「拼字检查」所使用的字典语言)。
若要设定整个网站的「拼字检查」字典，请选择「档案 > 网站属性」。单击「文字」索引卷标，在「语言」选单选择要使用的语言，然后单击
「确定」(见图 69)。
图 69. 在「网站属性」对话框中设定整个网站的语言。
有时网站项目需要以多个语言提供文字。若是如此，则可在「网站属性」中设定默认语言 (最常用者)，然后为显示不同语言的特定文字框设定
「拼字检查」语言。
若要设定个别文字框的「拼字检查」字典，请使用「选取」工具选取文字框。以鼠标右键单击并从显示的环境选单中选择「语言 > (选择要使
用的语言)」(见图 70)。
35 / 52
图 70. 在环境选单中设定所选文字框的语言。
接下来，您将更新文字框的外观。文字框与矩形及影像框相同，可以设定线条、填色及背景影像等样式。
回到顶端
更新文字框外观
在本节中，您将更新文字框的属性，使其从页面背景图像中突显出来。
1. 使用「选取」工具选取含有「breakfast」菜单的文字框。
2. 在「控制」面板中，设定线条宽度为 5、线条颜色为黑色。
3. 使用「填色」选单将填色颜色设定为您重新命名为「cream-menu」的色票 (或输入十六进制颜色值：#E9916F)。单击「影像」区段旁的
档案夹图示，然后浏览以选取样本档案档案夹中名为 的档案。单击「确定」以关闭「读入」对话框。将「符合」选单
设定为「并排显示」，然后单击页面其他任何位置以关闭「填色」选单。
4. 若有需要，请使用「选取」工具拖移文字框控制点，调整其大小至可容纳文字为止。在线范例网站的「breakfast」菜单尺寸约宽 800
像素、高 440 像素。
奶油色填色的并排背景影像，为文字框添加羊皮纸般的效果，深色线条则使其从背景突显出来。
现在您将在「breakfast」菜单顶端新增标题，为访客清楚标识。
1. 使用「文字」工具在「breakfast」菜单正上方建立文字框，对齐左上角。
2. 输入文字：Breakfast
3. 在「文字」面板中，选择下列设定以格式化文本：
网页字体： Kaushan Script (或任选其他 Script 字体)
字体大小：32
颜色：#70909D (在第 3 部分中，您已将此颜色更名为「blue-menu」)
行距：120%
对齐方式：置中
4. 维持选取文字，单击「段落样式」面板底部的「新增样式」按钮，建立新的段落样式。连双击新建的段落样式并更名为：菜单-标签。
在「breakfast」菜单上方的标签有助于用户掌握自身所在位置，使其一看就知道当前所阅读的菜单为何。完成这些变更之后，「breakfast」
菜单成品即如图 71 所示。
36 / 52
图 71. 「breakfast」菜单已套用样式且其文字内容已格式化。
在下一节中，您将复制「breakfast」菜单，然后在复制的文字框中更新其文字内容，以建立「lunch」、「dinner」及「dessert」菜单。
回到顶端
复制页面上的文字框
在前面小节中，您建立了「breakfast」菜单文字框、从外部文本文件为其填入了文字、使用段落样式套用一致的文字格式，然后透过新增并排
显示的背景影像、填色颜色及线条，更新了文字框外观。您另外也在菜单文字框上方新增了第二个文字框，建立标题以指出「breakfast」菜
单。下一步即是要复制这整组元素 3 次，建立总共 4 个菜单。
1. 使用「选取」工具选取含有「Breakfast」一词的文字框与含有「breakfast」菜单的文字框。
2. 按住 Option (Mac) 或 Alt (Windows)，同时将此两组文字框拖移至页面下方，将其复制一份。向下拖移复本时，请将其保持与原始文字框
垂直对齐 (智能型参考线将暂时显示，以指出两侧与中央是否对齐)。复制的文字框组应位于原始文字框组下方约 430 像素处 (见图 72)。
图 72. 拖移一份「breakfast」菜单复本至页面下方。
3. 使用「文字」工具，选取复制的文字字段卷标。将「Breakfast」一词更改为：Lunch。
4. 暂时从 Muse 切换至您的桌面。开启样本档案档案夹，找到名为 的档案。双击档案以在文本编辑器中开启。拷
贝第一行文字：JR $9
5. 返回 Muse。使用「文字」工具，于「lunch」菜单文字框内单击。将您拷贝的文字内容贴入文字框，取代原有的第一项餐点：
Croissants $3
6. 重复步骤 4 与步骤 5，将 档案中含有美元符号的每一行拷贝，以取代「lunch」菜单中的项目。
37 / 52
7. 继续为「lunch」菜单填入内容，拷贝 档案中的每一项说明，并在「lunch」菜单复本中的现有说明上逐一贴
上。此方法可确实保留您在文字内容套用的样式。
8. 重复步骤 1 至步骤 7，选取此两个「lunch」文字框并加以复制，向下拖移至现有「lunch」菜单下方约 430 像素处，将标签重新命名
为「Dinner」，然后拷贝 档案中的项目作为「dinner」菜单的内容。
9. 再次重复步骤 8。这次将复制的标签重新命名为：Dessert。从 中拷贝文字行，完成「dessert」菜单。
10. 使用「选取」工具视需要调整四个文字框的位置，使其垂直对齐，每个区域间隔约 120 像素 (见图 73)。
图 73. 在「food」页面上垂直对齐全部四个菜单 (「breakfast」、「lunch」、「dinner」和「dessert」)。
您或许会注意到，每次向下拖移复制拷贝时，您在第 1 部分定义的页尾区域会自动向下移动，以在页面创造更多垂直空间。因此，「food」页
面的高度会比此样本网站中的其他页面都还要长。
在用 Muse 建置您的第一个网站，第 7 部分，您将在每个菜单的上方新增锚点，以建立让访客能够迅速跳至各菜单的导览系统。因为「food」
页面较长，所以内容会根据访客按下的菜单项目垂直滚动，来显示相应的菜单。您也将探索如何使用「超链接」选单建立各种类型的连结，包
括能让访客下载 PDF 档的下载连结。
第 7 部分
使用锚点标记区域和作用中状态
将手动「水平选单」Widget 新增至页面
设定「水平选单」Widget 的选单项目样式
连结至页面中的锚点
新增可下载的档案连结
使用「超链接」选单建立电子邮件链接
放置 Photoshop 按钮
显示全部
在用 Muse 建置您的第一个网站，第 6 部分，您已学会如何新增「缩图幻灯片」Widget，以在「标签面板」Widget 的内容区域显示收藏馆。
您也建立了名为「food」页面的四组菜单 (「breakfast」、「lunch」、「dinner」和「dessert」) 并为其套用样式。在第 7 部分，您将学
习如何使用手动「水平选单」Widget 来新增锚点连结并建立页面导览，以完成「food」页面。您也会看到「超链接」选单，并学习如何建立所
有类型的连结 (锚点链接、电子邮件链接、下载连结，以及外部网页的连结)。最后，您将了解如何将对象固定在页面中，防止它们卷动 (即使
其他页面元素会随着较长的页面卷动)。
38 / 52
回到顶端
使用锚点标记区域和作用中状态
在之前的章节中，您已建立了一组双文字框 (标题和「breakfast」菜单)，然后使用段落样式来设定文字格式。接下来，您将复制该组双文字
框三次，并将每组双文字框垂直向下拖曳，以在页面建立总共四个「区域」。然后，您重新命名复制的双文字框组，因此顶端会有名为
「breakfast」的标题和「breakfast」菜单，下面接着显示「lunch」、「dinner」和「dessert」菜单 (垂直对齐)。每个菜单 (双文字框组)
上下会有间隔，每个区段相距 120 像素。
由于复制并向下拖曳菜单，「food」页面变得比网站中的其他页面都还要长。这是使用锚点标签的重要因素。如果所有的页面内容都能在不必
卷动的情况下在浏览器窗口中显示，锚点卷标的链接看起来就没有作用。
在已完成的设计中，「food」页面包含锚点连结，可让访客垂直跳至显示对应菜单的区域。想象一下，当您加入锚点标签时，就像是在页面上
贴标记。当访客按下该锚点的连结时，连结会卷动较长页面，跳至标记所在的特定区段。
您将从建立四个名为「breakfast」、「lunch」、「dinner」和「dessert」的锚点开始，这些锚点应个别对应至四个页面区域。请依照下列步
骤操作：
您首先要建立的是这 4 个锚点：Breakfast、Lunch、Dinner 和 Dessert。请依照下列步骤操作：
1. 在顶端导览区单击锚点按钮，以加载锚点工具 (见图 74)。
图 74. 单击工作区顶端的「锚点」按钮，加载第一个锚点的「置入枪」。
2. 在页面的最顶端，也就是在顶层网站导览的页首区域上方单击。如果需要，可以先暂时移开页首矩形。如果有移动页首内容，请务必在
之后将其移回原始位置。
3. 在显示的「重新命名锚点」对话框中，输入锚点名称：breakfast (见图 75)。
图 75. 命名页面顶端「breakfast」菜单的锚点。
4. 再将此步骤重复三次，单击工作区顶端的「锚点」按钮以加载「置入枪」，然后在建立「Lunch」、「Dinner」和「Dessert」区段的文
字框上方单击。命名每个锚点，使其对应页面区域：
lunch
dinner
dessert
现在您已新增总共 4 个锚点，这些锚点顺着页面垂直分散，并将用来建立跳至各区段的连结。使用「选取工具」来放置每个锚点卷标，让这些
卷标与每个包含菜单的区域前方具有相同的距离 (约 120 像素)。
注意：
第一个锚点 (位于页面顶端) 和第一个链接内容实例 (您将在下个区段中新增的手动「选单」Widget) 之间的间距量 (以像素为单位) 将会设
定「作用中区域」，造成每个区域中的作用中状态产生变化。例如，如果第一个锚点置于页面最顶端，而「选单」Widget 置于其下方 120 像
素，当访客向下卷动页面时，其后续区域选单项目的作用中状态也会在更新 120 像素后，再出现选单。
您在下个步骤新增手动「选单」Widget 后，请将这些按钮链接至锚点卷标以建立导览，让访客可在页面向下跳至每组菜单来阅读。
回到顶端
将手动「水平选单」Widget 新增至页面
在本系列的第 2 和第 3 部分，您已学会如何将「水平选单」Widget 新增至网站。依预设，选单会自动连结至您在「规划」视图中新增的页
面，并会自动为您新增页面名称。
39 / 52
在本节中，您将新增另一个「水平选单」Widget，以作为单一页面的子选单使用。您将把选单类型设为手动，如此您就能输入选单项目卷标，
并自行设定链接。此方法非常实用，特别适合用于让使用者能够在网站的特定区段或特定页面内浏览。在本样本项目中，您将把手动选单项目
链接至您在前一节建立的锚点。请依照下列步骤新增手动「水平选单」Widget：
1. 在「设计」视图中编辑「food」页面时，开启「Widget 链接库」。
2. 在「Widget 链接库」面板中，单击「选单」区段将其展开。选取「水平选单」Widget，并将其从面板拖移至「food」页面的页面顶
端。
当您第一次将 Widget 拖移至页面时，它会显示默认的格式，并自动在选单项目中显示页面名称。您将更新「选项」面板中的设定来设定选
单，如此您就能输入自定义的选单项目以链接至「food」页面中的区域。
3. 在选取「水平选单」Widget 的状态下，单击蓝色的箭头按钮以开启「选项」面板。使用「选单类型」选单选取「手动」。其他设定均
维持预设，如图 76 所示。
图 76. 在「选项」面板中将「选单类型」更新为「手动」。
4. 单击「选项」选单外部的任何位置，将其关闭。
现在，您在检阅「水平选单」Widget 时，可以看到 [名称] 的单一通用选单项目取代了原先显示的自动选单项目。下一步是手动新增选单项
目。
5. 在「水平选单」Widget 上按三下来选取标签。使用「文字」工具选取默认的卷标文字，并输入新的菜单项目名称：Breakfast (见图
77)。
图 77. 更新手动选单中第一个选单项目的名称。
6. 切换回使用「选取」工具。请注意，选单项目左侧、底部和右侧会显示三个加号 (+) 图示。单击「Breakfast」菜单项目右方的加号
(+)。这项操作会在右方新增新的选单项目。
7. 选取新选单项目中的卷标。使用「文字」工具，选取「Breakfast2」默认卷标文字，并将其更新为：Lunch。
8. 重复步骤 6 与步骤 7，建立总共 4 个菜单项目，卷标为「Breakfast」、「Lunch」、「Dinner」和「Dessert」。
在下一节，您将更新选单项目的外观。
回到顶端
设定「水平选单」Widget 的选单项目样式
由于「一并编辑」选项已在「选项」面板中启用，您对单一选单项目做的变更会自动套用至其他选单项目。请依照下列步骤修改选单外观：
1. 选取「Breakfast」按钮菜单项目。「选取指示器」会显示「选单项目」一词。如果您不小心选取了选单项目中的卷标，请按 Escape。
2. 选取「状态」面板的索引卷标或选择「窗口 > 状态」来开启「状态」面板。选取「正常」状态。
3. 使用「填色色卡」，将选单项目「正常」状态的颜色设定为您重新命名为「cream-menu」的色票 (或输入 16 进位颜色值：#E9916F)。
4. 在「控制」面板中，单击左下角和右下角的圆角半径按钮，然后对圆角半径值输入 100，以在顶部建立圆角方形按钮。这些按钮类似您
先前在第 5 部分设定「卷标面板」Widget 的卷标样式时建立的按钮。
5. 在「状态」面板中，选取「鼠标指向效果」状态。使用「填色色卡」，将选单项目「鼠标指向效果」状态的颜色设定为您重新命名为
「cream-menu」的色票 (或输入 16 进位颜色值：#E9916F)。请注意，「鼠标按下」的状态会自动更新。
在本范例中，「正常」、「鼠标指向效果」和「鼠标按下」状态均会显示相同的外观。此设计使用不同的颜色来表示作用中状态，提示访客目
前正在检视哪个页面区域。接下来，您要将新颜色套用至「作用中」状态：
6. 在「状态」面板中，选取「作用中」状态。单击「控制」面板中的「填色色卡」，并选取您在第 3 部分重新命名为「棕色-菜单」的颜
色，或输入颜色值：#571E00。
现在，您已更新了选单项目在每个状态的外观，接下来要更新标签。
7. 按三次「Breakfast」项目来选取卷标。在「状态」面板中选取「正常」状态后，单击「段落样式」面板中的「标题-索引卷标」样式以
将其套用。此样式与您在第 5 部分用来设定「卷标面板」Widget 的样式相同。
40 / 52
当您将格式套用至「正常」状态的标签后，其他状态会自动配合更新。本设计对所有状态使用相同标签，因此手动「水平选单」Widget 的样式
设定现在已完成。现在只要将 Widget 放入页面并固定其位置，就大功告成。
8. 使用「选取」工具重新放置「选单」Widget，使其顶端边缘紧贴页首矩形的底部。请确定页首和「手动」选单 Widget 之间没有任何空
隙。
9. 在全选「选单」Widget 的状态下，单击「控制」面板中「固定」接口的正上方固定位置。这可确保在向下卷动较长页面时，手动选单
不会直接从其在页首正下方的位置移开。固定的「选单」Widget 为该页面建立一贯的导览，让访客可轻松在区域间跳跃浏览。
在下一部分，您将使用「超链接」选单为先前建立的锚点新增连结。
连结至页面中的锚点
现在，您已在每个包含食物菜单的页面区域上新增锚点标签。您也建立了手动「选单」Widget，并新增对应至各页面区域的自定义选单项目。
在本节中，您将了解如何链接这两种元素，以在手动选单中新增锚点连结。请依照下列步骤操作：
1. 单击页面上任一处以选择该页面 (因此「选取指示器」会显示「页面」一词)。接着，双击「Breakfast」按钮。第一次按下按钮会选取
整个手动「选单」Widget，第二次则会选取「Breakfast」菜单项目。「选取指示器」会显示「选单项目」一词。
2. 单击「超链接」选单来查看网站的页面完整列表及锚点卷标。在「桌面」区段找到「food」页面，您会发现您建立的 4 个锚点标签就
列在该页面的下方。选取「Breakfast」锚点标签，将其链接至「Breakfast」菜单项目 (见图 78)。
图 78. 使用「超链接」选单将「Breakfast」锚点链接套用至「Breakfast」按钮。
3. 重复步骤 2，将「Lunch」锚点连结新增至「Lunch」菜单项目。接着再重复两次，将对应的连结指定至「Dinner」和「Desert」菜单项
目。
4. 选择「档案 > 网站属性」。在「版面」标签中，确认已核取「启用锚点连结的作用中状态」复选框。依默认，此选项在所有新网站中
皆为启用，但若您正在编辑较旧的网站，您可能需要核取该复选框。
5. 选择「档案 > 在浏览器中预视网页」。单击每个选单项目来测试是否能正确浏览「food」页面。当您单击以检视最下方的菜单
(「Lunch」、「Dinner」和「Dessert」) 时，较长的「food」页面会向下卷动，以显示含有对应锚点卷标的页面区域，但固定的「选
单」Widget 会维持在页面顶端，就在页首内容的下方。
当您单击连结以检视不同的页面区域时，请注意导览选单中所显示的对应作用中状态。例如，当您单击手动选单的「Dinner」按钮以跳
至名为「dinner」的锚点卷标的页面区域，「Dinner」菜单项目会更新以显示按钮的作用中状态。此网站功能可协助引导访客，让他们
了解正在检视哪个区段。 结束浏览器并回到 Muse。
您也可尝试上下卷动页面，以查看页面中的程序代码如何在页面在每个页面区域间移动时，侦测每个锚点卷标的位置，并更新手动选单
的作用中状态。此技巧适用于能垂直和水平卷动的页面。
注意：
页面必须要有足够的高度与宽度，才能让锚点卷标有跳至各区域的空间。若页面区域间距太小，使得内容不必卷动即可完全显示
在一个浏览窗口内，锚点卷标就不会像是跳到下一个区域。
6. 结束浏览器并回到 Muse。
在下一节，您将了解如何新增下载连结，让访客可以下载如 PDF、DOC、MP3、MOV、PSD 等文件格式，以及高画质 JPEG 档案。
秘诀：如果您和其他的设计师一起制作网站项目，您甚至可以连结至 .Muse 来源档，这样其他团队成员就可以直接从您的网站下载来源档案。
41 / 52
回到顶端
回到顶端
新增可下载的档案连结
在本样本项目中，虚构的 Katie's Cafe 在在线提供 PDF 格式的菜单，让访客能在计算机上储存复本或印出来。许多企业或餐厅都采用类似的
策略，因为当他们想要更新菜单、价目表或其他文件时，可以轻松地用相同档名上传新的 PDF 档，而不用更新连结。
1. 在「设计」视图中编辑「food」页面时，请使用「文字」工具，在「Breakfast」菜单文字框的右上角附近建立新的文字框。输入：
Download Menu。
2. 在仍选取文字框的情况下，使用「文字」面板套用下列设定：
网页字体：Kaushan Script (或任选其他 script 字体)
字体大小：14
颜色：#EEE5C4 (在第 3 部分，您已重新命名此色票颜色为「cream-menu」)
行距：57%
对齐方式：置中
3. 使用「填色」选单将填色颜色设定为「无」。单击「影像」区段旁的档案夹，然后浏览以选取样本档案档案夹中 的
档案，来设定背景影像。请确定「符合」选单是设定为「原始大小」，且「位置」为置中 (见图 79)。
图 79. 设定「填色」选单中的文字框背景影像。
4. 在「填色」选单以外之处单击将其关闭。如有需要，请使用「选取」工具重新调整文字框的大小并将其重新放置，使它位于
「Breakfast」菜单文字框右上角的正中央 (见图 80)。
图 80. 调整「Download Menu」文字框的位置，使其盖住菜单的角落。
5. 在选取文字框的情况下，使用「控制」面板中的「超链接」选单，在选单最底部的「档案」区段选择「链接至档案」项目。在显示的
「读入」对话框中，浏览以选取样本档案档案夹内名为 的档案。单击「开启」将其选取 (见图 81)。
42 / 52
图 81. 浏览以选取菜单的 PDF 版。
注意：当您使用「链接至档案」功能浏览以选取档案时，档案会变成网站资源的一部分，并在网站发布时上传，或是在转存网站时包含在网站
档案中。当您要拷贝从网站链接至站内任何本机档案夹的档案时，这是最好的做法，而且能一并拷贝网站使用的其他图像文件。
现在已新增 PDF 档案连结。若您查看「资源」面板，会发现 档案现已列为网站资源之一。
6. 使用「选取」工具选取文字框。复制「Download Menu」文字框并将其贴上，把文字框放在「Lunch」菜单的右上角。另外再重复此步骤
两次，建立「Dinner」和「Dessert」菜单右上角的复本。
在实际的项目中，您可以连结至 4 个分开的菜单档案，以提供访客 4 份不一样的可下载 PDF 档，让他们检视及打印菜单。为了进行本教学课
程，各页面区域中的「下载」按钮都会链接至相同的 PDF 檔。
7. 选择「档案 > 在浏览器中预视网页」。单击「水平」选单内其中一个选单项目，以跳到页面中对应的菜单。请注意，当您往下卷动查
看「Dinner」和「Dessert」菜单时，其他页面内容的顶端会显示页首。这是因为「food」页面使用「前景」主版页面，而该页面的页
首内容已经移至前景。
8. 单击「Download Menu」连结，查看 PDF 档案如何下载至您计算机。
依据您使用的浏览器和浏览器偏好设定而定，您会看到不同的行为。有些浏览器会在浏览器窗口内显示 PDF，有些则只会将 PDF 档下载至您的
桌面，让您使用 Acrobat Pro 或 Acrobat Reader 开启档案。
回到顶端
使用「超链接」选单建立电子邮件链接
如果您已经使用 Muse 一段时间，应该会注意到「超链接」选单最近已重新组织为数个区段，让您更容易找到可以连结的页面名称与项目。在
本节中，您将进一步了解「超链接」选单的结构，以及其筛选选单列表项目的方式。您也会了解如何新增电子邮件地址链接。
1. 单击「超链接」选单的向下箭头来显示完整列表 (见图 82)。
43 / 52
图 82. 展开的视图会显示「超链接」选单中的清单。
「超链接」选单由数个区段构成。「最近使用的链接」会显示所有加入网站的外部网站连结。您可在「超链接」字段中直接输入任何 URL，以
连至外部网页。
「桌面」区段包含目前网站的页面。请注意，您新增至「food」页面的的锚点卷标，会照字母顺序列在「food」页面下方。这表示您可在网站
的多个页面上建立相同名称的锚点，且在设定连结时仍可轻易地辨识它们。在此样本网站中，只有一个「桌面」版面，但如果网站包含适用于
手机或平板计算机的其他版面，这些区段就会显示对应的页面集。
尾端的「档案」区段包括「链接至档案」功能，以及所有新增至目前网站的可下载文件。由于您不久前加入了 档案的连
结，该文件名会列在此区段，以便轻易地重新连结至网站中多个页面的通用资源。
如果您想要新增电子邮件链接 (亦即，按下连结时，访客的电子邮件客户程序会开启并进入撰写新邮件状态，邮件的「收件者」字段会自动填
入电子邮件地址)，请在「链接」选单字段中输入电子邮件地址，并在地址前面加上「mailto:」，例如：
mailto:email@
有时候，「超链接」选单中的项目列表会变得很长，在网站较大时很难浏览。如果您正在寻找特定网页、锚点、档案或要连结的外部 URL，请
在「超链接」选单字段中输入链接的头几个字母，系统即会显示相符的项目。这可让您快速筛选清单，找到要链接的项目。
在下一节，您将学习如何新增网站外部其他网页的绝对链接。
回到顶端
放置 Photoshop 按钮
由 - James Fritz 提供
提供您的专业知识给
Adobe Community Help
44 / 52
至此为止，您已学习到如何新增及链接至锚点标签，以跳至页面的特定区段。您也已了解如何使用「档案」选单新增页面和可下载文件的连
结。在本节中，您将了解如何新增外部网站 URL 的连结，以连至您网站外的网页。您也可以探索如何放置包含图层的 PSD 档案，来找出在
Muse 中建立不同状态按钮的其他方法。请依照下列步骤操作：
1. 在「规划」视图中，双击「A-主版」主版页面，以在「设计」视图中编辑。
2. 选择「档案 > 置入 Photoshop按钮」。使用「读入」对话框，浏览至样本档案档案夹，并找到包含社交媒体图标的三个 PSD 文件。这
些档案的名称为：
social-google+.psd
3. 选取 档，然后单击「开启」。「Photoshop 读入选项」对话框即会出现 (见图 83)。
图 83. 对话框可让您选择按钮在每一种状态下要显示的 PSD 图层。
以本例来说，PSD 档图层已照正确顺序设定，会根据需要显示「正常状态」、「鼠标指向效果状态」及「鼠标按下状态」。不过请注意，如果
您想要变更每种状态的外观，您可以使用每种状态旁的选单，设定要显示 PSD 文件的哪一个图层。每种状态右方的预视窗口可帮助您选择正确
的外观。
本范例中，按钮不需要「作用中」状态。此 Facebook 按钮会让访客跳至 Facebook 网站，所以不需要「作用中」状态。使用含有预先设计图
层的 Photoshop 按钮，是为网站建置自定义导览列的另一种方式。
4. 单击「确定」，关闭「Photoshop 读入选项」对话框，然后在靠近页面中央的右侧部分单击，以放置 Photoshop 按钮。
5. 重复步骤 2-4，放置其余两个 social-google+.psd 和 的图标影像。使用「选取」工具使影像在网页右侧垂直对
齐 (见图 84)。
图 84. 将 Facebook、Google+ 和 Twitter 图示放在「A-主版」页面上。
您将这些影像放在「A-主版」页面上后，这些影像会自动显示在链接至此主版 (「主要」和「前景」) 的所有主版页面上。
回到顶端
新增外部网站连结
现在社交媒体图标按钮都已就位，您接下来要新增每个社交网站的外部连结。
45 / 52
1. 选取 Facebook 图示，然后在「链接」选单字段中输入 (或拷贝/贴上) Katie's Cafe Facebook 页面的连结，像这样：
/KatiesCafeSF
2. 选取 Google+ 图标，然后输入 (或拷贝/贴上) 下列 Katie's Cafe Google+ 页面连结：
/u/1/117861444/posts
3. 选取 Twitter 图标，然后输入 (或拷贝/贴上) 下列 Katie's Cafe Twitter 页面连结：/katiescafesf
4. 再单击 Facebook 图示将其选取。单击蓝色底线文字，亦即位于「超链接」选单左方的连结。在显示的对话框中，选取标为「在新窗口
或卷标中开启链接」的复选框。
5. 重复步骤 4 来设定 Google+ 和 Twitter 连结，使其也在新的浏览器窗口中开启。
这是一般网页设计的习惯，亦即前往同一网站其他网页的连结，将在同一浏览器窗口中开启 (Muse 预设如此运作)，前往其他外部网站网页的
链接，则在新窗口或新索引卷标开启。
另请注意「工具提示」字段。如果您在此字段输入了说明文字，当访客将光标置于链接的元素上时，就会显示您输入的文字。本范例中，工具
提示为：Follow Katie on Facebook。加入这些工具提示是很好的做法，因为这也能让使用屏幕阅读程序的访客更容易存取网站。
在下一节，您将了解如何固定社交媒体图标，让它们永远在浏览器窗口的相同位置显示，不受较长页面及其余内容卷动的影响。
回到顶端
将对象固定至浏览器窗口
当您放置影像或使用其他方法在网页中新增图稿时，您可使用「选取」工具和Download Menu调整其位置。当您移动影像时，该影像会相对于
页面中现存的其他元素 (影像、文字及媒体) 移动。您也可以移动其他元素，但整个页面的形式就像手册或海报，页面中的项目是在单一平面
上。如果页面很长 (包含很多直式内容)，访客往下卷动时将无法看到页面顶端的影像。
您可能在检视网站时看过固定的对象；它们是「永恒的」项目，永远在同一个位置显示。它们看起来就像浮在其余页面内容之上。
当您使用「固定」工具时，您实际上是从页面串流中移除影像。您是将影像设定在相对于浏览器的特定位置，而不是将它与其他相对的页面元
素一起配置。固定的影像看起来有「黏性」，无论其他页面元素如何卷动，它永远停留在同一个位置 (像是右上角或靠近底部的地方)。如果访
客重新调整浏览器的大小，固定的影像还是会永远停留在相对于浏览器窗口的固定位置。
您可将固定想成是从页面设计中「剥离影像」，再将影像贴回浏览器，就像把便条纸钉在软木板上。如果访客重新调整浏览器的大小，固定的
元素会移动，以维持其相对于浏览器的固定位置。如果访客只是水平或垂直滚动页面内容，固定的元素就不会移动。
请依照下列步骤使用「固定」工具：
1. 在「A-主版」页面于「设计」视图中开启的情况下，使用「选取」工具选取 Facebook 图示。
2. 在「控制」面板内的「固定」接口中，单击右上角的固定位置。此设定会将元素「钉」在其目前位置的右上角。
3. 重复步骤 1 和 2，将 Google+ 和 Twitter 图标按钮固定在它们的右上角位置，使它们不会随着页面其他元素的卷动而在浏览器窗口
中移动。
4. 单击「规划」检视页面缩图。请注意，现在所有页面都包含了 3 个社交媒体图标，因为您已将它们加入主版页面。
5. 在「规划」视图中，双击「food」页面，以在「设计」视图将其开启。如果页面已经开启，请单击「food」页面的索引卷标，使其成为
作用中的页面。选择「档案 > 在浏览器中预视网页」，即可在浏览器中检视页面。
6. 单击「Dessert」菜单项目，跳至长页面下方的「Dessert」菜单区段。请注意，当其余的页面元素卷动时，3 个社交媒体图标仍会停留
在网页右侧的原始位置，因为它们已经固定 (见图 85)。
请继续阅读在 Muse 建置您的第一个网站，第 8 部分，了解如何将多组对象组成群组，使它们如单一元素般运作。您将新增嵌入式 Google 地
图，让访客看到 Katie's Cafe 的位置，完成「visit」页面。完成网站后，您会了解到将网站上传至主控服务器 (由 Business Catalyst 提
供) 来在线发布，是件多么容易的事，接下来您就可以与客户和同事一起分享进行中的工作。
第 8 部分
将对象组成群组并将群组贴入适当位置
使用嵌入式 HTML 显示 Google 地图
在「网站属性」面板中新增网址列图示
建立免费试用版发布网站
46 / 52
此后的目标
在「用 Muse 建置您的第一个网站」的第 7 部分，您已学会如何新增锚点标签，并将它们链接至手动「水平选单」Widget 中的选单项目。您
也学会如何将元素固定在页面中，防止它们卷动。此外，您也了解了如何新增档案连结，让访客能下载文件。在第 8 部分，您将学习如何把对
象组成群组及使用群组，以在页面贴上内容集。您也将使用更多的嵌入式 HTML。这次，您要在「Visit」页面中新增交互式 Google 地图。最
后，您将了解如何新增「网址列图示」，完成网站的最终编修，并将试用版网站发布至内附的主控服务器。
回到顶端
将对象组成群组并将群组贴入适当位置
就像使用 InDesign 和其他设计程序，您可将数个对象组成一个群组，使它们如单一的单元般运作。在本节中，您将建立数个元素 (置入的影
像和文字框) 组成的设计，并了解如何将它们组成群组，使其如单一项目般容易放置或拷贝。请依照下列步骤操作：
1. 在「规划」视图中，双击「home」页面缩图以在「设计」视图中将其开启。
2. 选择「档案 > 置入」。浏览以选取范例档案档案夹内名为 的档案。单击「开启」，关闭「读入」对话框，然
后在靠近「home」页面底部 (「影像预视灯箱排版」Widget 下方及页尾上方) 的地方单击，以放置全尺寸的图形。
PNG 档案已设为较低不透明度，因此半透明的花朵设计可让并排的背景影像穿透显示出来。
3. 再次选择「档案 > 置入」。这次，浏览以选取名为 的影像。单击「开启」，然后在正上方的花瓣单击以放置影像。
4. 在选取汤匙影像的情况下，按住 Option (Mac) 或 Alt (Windows) 复制汤匙影像，再立即将其拖移至中央右侧的花瓣。再次重复此动
作，复制中央的汤匙影像，并将复制的复本拖移至左侧的花瓣。使用「选取」工具将 3 个汤匙放在适当位置，如以下图 88 所示。
图 88. 将 3 个汤匙影像放在设计页面的 3 朵花瓣上。
5. 使用「文字」工具，在中央花瓣上画一个文字框，然后输入下列文字：
Katie's Cafe
Noe Valley
123 Elizabeth Street
MON–FRI 6AM–10PM
SAT–SUN 7AM–10PM
6. 在「文字」面板中，套用下列设定以格式化文本：
字体：Droid Serif (或任何 serif 字体)
字体大小：14
字体颜色：#222222 (您在第 5 部分已将此颜色重新命名为「凯蒂黑」)
字体对齐方式：置中
行距：120%
7. 接下来，选取最后两行 (起头为英文的星期)，再将字体颜色设为红色 (#A6342A)。
8. 使用「选取」工具选取文字框。按住 Option (Mac) 或 Alt (Windows) 复制文字框，再立即将其拖移至右侧花瓣的汤匙影像上方。再
次重复此动作，复制中央的文字框，并将复制的复本拖移至左侧的花瓣。使用「选取」工具放置 3 个文字框，让它们在 3 个汤匙的上
方对齐，如图 89 所示。
47 / 52
图 89. 重新放置 3 个地址，使其显示在设计页面最上面 3 朵花瓣中 3 个汤匙的上方。
9. 切换至「文字」工具。选取左方地址，将其变更为：
Katie's Cafe
Laurel Heights
800 Spruce Street
MON–FRI 5AM–12AM
SAT–SUN 9AM–1AM
10. 使用「文字」工具选取右方的地址，将其变更为：
Katie's Cafe
Cole Valley
301 Carmel Street
MON–FRI 7AM–10PM
SAT–SUN 9AM–10PM
现在设计已完成，您将选取元素并将它们组成群组。
11. 使用「选取」工具单击并拖移整个花朵设计，请务必同时选取置入的花朵影像、3 个汤匙影像及 3 个文字框。单击鼠标右键，并从出
现的选单中选择「群组」。如果需要，您也可以选择「对象 > 群组」。
请注意，将一组对象组成群组后，「控制面板」左上角的「选取指示器」会显示「群组」。
12. 拷贝选取的群组。单击「规划」返回「规划」视图，再双击「Visit」页面的缩图，在「设计」视图中将其开启。选择「编辑 > 就地贴
上」，将整个元素群组放在相同位置。
您可从此简短范例中看出，当您完成一项设计并想将此设计当作单一元素使用时，群组非常有帮助，它可让您将设计重新摆放在页面上的其他
位置，或将其拷贝并贴到不同的页面。
除了群组，您可能也会发现当您将设计定稿后，「锁定」功能也很有帮助。在群组或选取的一组元素上单击鼠标右键，从出现的环境选单中选
择「锁定」来进行锁定。(另一种方式是，选取「对象 > 锁定」)。锁定功能可确保您不会意外移动或删除页面中任何已定稿的元素，因为您无
法选取它们。如果之后需要更新锁定的元素，请选择「对象 > 解除锁定页面全部内容」。
将花朵设计贴至「Visit」页面底部后，就完成了部分网页内容。下一节中，您将继续编辑「Visit」页面并新增交互式地图接口，以协助客户
找出最近的咖啡馆。
回到顶端
使用嵌入式 HTML 显示 Google 地图
您已从本教学课程学会如何将 HTML 嵌入页面，并在「events」页面中加入 Tumblr 部落格。您也已了解如何在「影像预视灯箱排版」Widget
中贴上嵌入式 HTML，以便在访客按下按钮时，于预视灯箱窗口中显示 YouTube 视讯。在本节中，您将探索「Google 地图」网站提供的另一种
嵌入式 HTML 类型。请依照下列步骤操作：
1. 如果「visit」页面尚未在「设计」视图中开启，请单击「规划」，再双击「visit」页面的缩图来编辑。
此原始码是从 网站拷贝的。您可以建立通往单一地址的自定义地图 (本范例中是多个地点)。这是免费的服务，您只需提供
一个地址 (或多个地址) 再按下「建立地图」按钮即可 (见图 90)。
48 / 52
图 90. 单击「建立地图」，以根据您输入的地址产生地图。
建立地图后，「Google 地图」接口会让您输入标题和说明。接下来，您可以单击「链接」按钮存取程序代码。选取「贴上 HTML 以嵌入您的网
站」标签字段提供的 HTML 程序代码，接下来就可以返回 Muse，将 HTML 嵌入网页 (见图 91)。
图 91. 使用「Google 地图」接口产生地图的 HTML 程序代码。
在本教学课程中，您不需要自行建立新地图。如果您想自己测试，可以输入任何地址建立地图，并拷贝程序代码来进行实验。假如您只是想单
纯测试地图运作的方式，可以使用一些预先产生的 HTML 程序代码。
2. 拷贝以下的原始码：
3. 将原始码贴到「visit」页面顶端。使用「选取」工具在页面靠近顶端的部分垂直置中摆放嵌入的 HTML，让地图的四分之一与页首区域
重迭。请确定地图与地图下方的花朵图形之间有保留一些空间，这样您才能加入文字叙述。
4. 使用「文字」工具在嵌入的地图下方拖移建立一个文字框。拷贝以下文字并将其贴到文字框内：
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.
5. 使用「文字」面板套用下列设定，以设定文字样式：
字体：Droid Serif (或任何 serif 字体)
字体大小：14
字体颜色：#222222 (您在第 5 部分已将此颜色重新命名为「凯蒂黑」)
字体对齐方式：靠左
行距：120%
加入地图叙述后，就完成了「visit」页面。
6. 选择「档案 > 在浏览器中预视网页」，以查看「visit」页面在浏览器中的显示结果(见图 92)。
49 / 52
图 92. 完成的「visit」页面包括一个功能齐全的 Google 地图。
请注意，嵌入的 HTML Google 地图是交互式的。您可以在窗口中单击箭头平移地图，也可以单击 + 和 - 按钮进行缩放。
现在网站中的所有页面都已设计完成。在本教学课程剩下的部分，您将了解如何对网站做最后编修，以及发布免费的试用版网站。
回到顶端
在「网站属性」面板中新增网址列图示
网址列图标是个小巧的正方形影像，您可以自行建立、将其新增至网站及上传至个人化的书签和 URL。虽然网址列图示的运作依据您使用的浏
览器而有不同，但当您检视网页时，网址列图标通常会显示在浏览器的网址列上，就在网站的 URL 旁边。多数时候，当网页加入书签时，它也
会显示在网页名称的旁边，或显示在包含加载网页的索引卷标内。您可以使用任何影像编辑程序，例如 Photoshop 或 Illustrator，来建立正
方形 (比例一致) 图像文件，作为网址列图示档案使用。本教学课程已提供一个 PNG 档案。
请依照下列步骤，将网址列图示新增至网站：
1. 选择「档案 > 网站属性」。随即会显示「网站属性」面板。
2. 在「版面」标签中，单击「网址列图示」区段右方的档案夹图示。使用出现的「选择网址列图标影像」对话框浏览样本档案档案夹，选
取名为 的档案 (见图 93)。
图 93. 在「网站属性」中设定 档案。
3. 单击「开启」来关闭「选择网址列图标影像」对话框并选取档案。接下来，单击「确定」，关闭「网站属性」对话框。
4. 选择「档案 > 在浏览器中预视网站」。在浏览器窗口顶端，可看到网址列图标显示在网址列中。如果网站已加载索引卷标中，您可能
也会看到网址列图标显示在索引卷标上。您可将页面加入书签，看看图标如何在书签列表的页面名称旁显示。
现在网站已完成，下一步是将网站上传至提供的 Adobe Business Catalyst 主控服务器。
回到顶端
建立免费试用版发布网站
完成网站设计后，下一步是发布网站。发布程序非常的简单和直觉。第一次启动 Muse 时，您需输入 Adobe ID 登入。您将使用相同的用户名
称和密码，来发布您所有的 Muse 网站。
1. 单击「控制」面板左上方的「发布」连结。出现的「发布」面板可让您输入网站名称，并选择暂时的 URL (见图 94)。
50 / 52
图 94. 输入您想用于试用版网站的网站名称和 URL。
2. 单击「确定」，开始发布程序。
可能需要几分钟，才能将档案上传至远程服务器。网站完成上传后，网站首页会在新的浏览器窗口中显示。
3. 单击网站导览顶层的连结，以观看页面并与 Widget 互动。检阅所有页面，确保元素都如预期般显示。记下需要修正的问题。
4. 完成后，关闭浏览器并回到 Muse。
更新后的「发布」面板会显示「确定」按钮和「管理」链接，当您准备将网站推送上线时 (此动作包括启动付费代管计划、设定自定义的域名
以存取网站，以及加入使用者)，您可按下此按钮和链接。
已发布的网站会使用和下列网址相似的 URL。您将使用此网址在浏览器中存取页面，并与其他人分享在线网站：
发布试用版网站后，您可以复制网址列的 URL，将连结寄给您的客户，让他们检阅上线的网站。这比寄 PDF 原型或电子邮件附件更好，因为他
们可在浏览器中预视网站设计。客户可看到互动功能如何运作，并核准页面的作业范例。
当您的客户或同事检阅试用版网站后，他们可能会要求变更。
如果您要更新现有的试用版网站，您可以开启 .muse 档，继续编辑页面。完成更新后，再按一次「发布」。
这次，如果您要用新的变更覆写现有的试用版网站，请选择「上传：仅修改的档案」(见图 95)。
图 95. 选择选项，仅更新新的内容。
回到顶端
此后的目标
若要了解有关使用 Muse 设计网站的详细信息，请查看 Muse 快速入门教学课程。请一并阅读Muse 搜索引擎优化 (SEO) 策略。
别忘了查看Muse 教学课程页面，可找到更多书面教学课程，也请造访Muse 活动页面，以存取实时网络研讨会和录制的教学课程视讯。
请查看每日最佳 Muse 网站页面，从其他使用 Muse 建立的设计取得灵感，另外也请造访 Muse Widget 收藏馆，深入了解 Widget 的使用方
式。
51 / 52
2024年6月12日发(作者：濯旎旎)
Adobe
Muse
CC官方教程
简体中文汉化版
Darksun编辑
用 Muse 建造您的第一个网站
第一部分
安装软件及设定样本项目
建置网站地图
编辑「A-主版」页面
将并排显示背景影像设定为浏览器填色
使用设定为 100% 宽度的元素
将单一影像置入页面上
使用参考线来定义页面的页首与页尾区域
显示全部
在本教学课程中，您将会熟悉 Adobe Muse 工作区，并了解如何在不用撰写任何程序代码的情况下建置一个功能健全的网站。「用 Muse 建置您的第一个网站，第 1 部分」包括协助您开始
使用 Muse 的说明。您将学习如何使用主版页面、Widget、Photoshop 按钮以及链接。在浏览本教学课程时，您可以透过检阅 Katie's Cafe 实际上线网站来随时查看完成的网站会是什么
样子。
回到顶端
安装软件及设定样本项目
1. 下载并安装最新版本的 Muse。
2. 下载样本档案。
3. 解压缩 ZIP 档案，并将名为 katiesCafe 的档案夹储存到您的桌面上。
4. 启动 Muse。「欢迎」画面即会出现。选择「新增 > 网站」(见图 1)。
图 1. 在「欢迎」画面选取建立新网站的选项。
「新增网站」对话框即会出现。您将会使用此接口来编辑套用于整个网站的设定。
5. 将栏数设定为 12。在「栏」字段中输入数字 12，或单击字段旁的向上箭头来增加目前的值 (见图 2)。变更完此值之后，其他值会自动更新。
图 2. 更新「新增网站」对话框中的栏数。
注意：
在本教学课程中，您将学习如何在 Muse 中针对桌面计算机制作您的第一个网站。请注意，「初始版面」选单预设为「桌面计算机」，因此您无需变更。未来，当您想要使用适用于智
能型手机及平板计算机的其他版面来建置网站时，您可以使用此选单来选择要先设计的版面。
在关闭「新增网站」对话框之前，请先花点时间来检阅标记为「黏性页尾」的新选项。此选项默认为启用。在大多数情况下，您会想要在建置网站时将黏性页尾选项保持启用，因为它会使
页尾保持在所需位置，即使浏览器窗口比网页设计大很多也是如此，就像它在 Apple Cinema Display 显示器上显示一样 (见图 3)。
1 / 52
图 3. 「黏性页尾」选项默认为启用。
例如，当您利用大型监视器在浏览器中预视 Muse 网站，并缩小未启用「黏性页尾」的页面时，您会发现，如果您使页面内容相对于浏览器窗口而言太小，页尾下方的区域便会显示浏览器
窗口。而若启用「黏性页尾」选项，则无论访客桌面计算机监视器的分辨率与尺寸为何，页尾内容都会与浏览器窗口的底部保持齐平 (见图 4)。
图 4. 启用了「黏性页尾」的缩小网站 (左) 与未启用「黏性页尾」的网站 (右) 比较图。
对于此样本网站项目以及在大多数情况下，您都需要在「新增网站」对话框中保持启用「黏性页尾」选项。
6. 单击「确定」储存您的更改，并关闭「新增网站」对话框。
7. 选择「档案 > 储存网站」。在「另存 Adobe Muse 档案为」对话框中，输入网站的名称：。导览至您要储存此样本项目的位置 (例如您桌面计算机中的 katiesCafe
档案夹)，然后单击「储存」。
注意：
katiesCafe 样本档案档案夹包含一个样本项目的已完成版本，名为 。如果需要，您可以在将您的项目版本储存为 之后双击 .muse 档案
的最终版本来将其开启。Muse 可让您一次开启多个网站项目，因此您可以预视 katiescafe 最终档案，并将它作为您在遵循这些说明时的参考使用。
在下一节，您将开始为网站新增页面。
回到顶端
建置网站地图
网站地图是以网站阶层形式存在之页面的结构式列表。您可以建立位于相同层级的页面 (无子页面)，也可以建立包含不同页面层的网站地图。(例如，一个较大的网站可能会有一个「关
于」页面，而这个页面又包含两个子页面，分别叫做「我们的任务」和「我们的人员」。) Muse 可让您轻松建立页面以及以您喜欢的任何顺序进行重新排列，而您永远不必担心连结损坏。
不过，花点时间来组织新网站的内容、定义所需要的页面以及决定如何展示网站信息还是很重要的。在实际的项目中，完成不同的网站区段，并选择页面顺序是预先规划阶段的一部分。
在关闭「新增网站」对话框之后，系统会自动将您重新导向至 Muse 中的「规划」视图。依照预设，所有新网站都包含一个网页 (名为「首页」)，且该网页连结至一个主版页面 (名为「A-
主版」)。您可以根据需要为这两个页面重新命名。
为了产生一致的体验，您需要将例如页首、页尾及网站导览等重复的网站项目放在主版页面上。利用此方法，您将只需要在建构网站设计时将唯一内容新增至各页面即可。
此样本项目是一个较小型的网站，包括「首页」在内一共有 5 个页面。请依照下列步骤来新增页面：
1. 将鼠标光标置于「首页」缩图之上，然后单击「首页」右侧的加号 (+) 图示，来在与第一个页面相同的层级上建立另一个页面。单击新页面下方的标签字段，并将其命名为：food。
当您单击页面缩图下方的加号 (+) 图示时，即会建立一个子层级页面，可以展开包含与特定主题相关之页面的部分。
2. 单击「food」页面缩图右侧的加号 (+) 图示来建立另一个新页面。单击标签并将此页面重新命名为：events。单击「events」页面缩图右侧的加号 (+) 图示来建立一个新页面。
将这个新页面命名为：about。再次重复此操作来在与「首页」相同的层级上建立一个新页面，并将其命名为：visit。
现在，网站地图总共有 5 个页面，分别为「首页」、「food」、「events」、「about」以及「visit」(见图 5)。
图 5. 在网站地图中总共建立 5 个页面。
注意：
因应本教学课程，网站地图在同一层级中包含 5 个页面。不过，当您在未来建置网站时，您可以建立子层级与其他子页面。如果您要建立不同的设计来在网站的不同区段显示，您
也可以单击底部主版页面旁边的加号 (+) 图示，来建立更多主版页面。如果您有多个主版页面，可以在「规划」视图中的页面缩图上单击鼠标右键 (或按住 Ctrl 的同时单击) 来将这些
页面连结至特定主版页面。在建立新网站时，各页面会自动连结至「A-主版」主版页面。
「规划」视图提供了一些工具，可用来建构网站以及定义访客将如何存取每个部分。如果您要变更网站的组织，可以调整流程，只需拖移页面的缩图重新放置即可。
3. 单击并拖移「首页」缩图，来在「events」与「about」页面之间重新放置该页面。
4. 双击「首页」缩图下方的字段，并将其重新命名为：home (见图 6)。
2 / 52
图 6. 将「首页」重新命名为小写的 home，以与其他页面相符。
进行完这些变更之后，网站地图即告完成。
请注意在「规划」视图接口的顶部有三个版面按钮，分别用于「桌面计算机」、「平板计算机」以及「手机」版面。在此样本项目中，您只是要建立要将网站传递至计算机画面的桌面计算机
设计。「平板计算机」与「手机」版面的名称旁都有一个加号 (+)，表示它们尚未建立 (见图 7)。
图 7. 「规划」视图上方的三个版面按钮可让您建立以不同画面大小显示的其他三个版面，以及在它们之间切换。
当您拥有多个版面之后，除了单击版面按钮来跳到不同网站版面之外，您也可以使用键盘快捷方式来在网站规划之间切换：
按下 Command+7 (Mac) 或 Ctrl+7 (Windows) 可跳至「桌面计算机」网站地图。
按下 Command+8 (Mac) 或 Ctrl+8 (Windows) 可跳至「平板计算机」网站地图，或者
按下 Command+9 (Mac) 或 Ctrl+9 (Windows) 可跳至「手机」网站地图。
这些键盘快捷方式只在包含至少两个「桌面计算机」、「平板计算机」及/或「手机」版面的网站项目中才处于作用中状态。
若要建置此样本网站项目，您将需要根据其余说明继续在「桌面计算机」版面中工作。不过，如果您想要了解有关为行动装置设计网站的详细信息，请参阅标题为在 Muse 中建立行动版面
设计的文章。
现在网站地图设定完成，您将前往下一节，学习如何编辑「A-主版」页面来新增包括页尾内容在内的共享网站元素。
回到顶端
编辑「A-主版」页面
在本节中，您将会设计网站的第一个主版页面；它包含显示在网站内其他链接页面中的永续性图稿。
Muse 在许多方面都表现得像一个设计工具，但实际上它是产生业界标准的 HTML、JavaScript 及 CSS 来建立网页。当您选择套用样式 (即圆角、渐层填色颜色) 时，Muse 不会建立向量
形状或像素格点。最终发布的结果是功能完整的标准网页。您将会从更新背景图形开始。
回到顶端
将并排显示背景影像设定为浏览器填色
1. 在「规划」视图中，双击「A-主版」页面缩图来在「设计」视图中将其开启。「A-主版」页面会在它自己的索引卷标中沿工作区顶部开启 (见图 8)。
图 8. 「A-主版」页面已经准备就绪，可以在「设计」视图中编辑。
选取指示器位于「控制」面板的左上角。当未选取其他项目时，选取指示器会显示「页面」一词，表示只选取了页面本身。如果您选取页面上的对象，例如置入影像，则会显示「影像框」
一词。
了解目前已选取哪个项目是很有帮助的。您在工作时，请注意观察选取指示器，以确认您选取了想要控制的元素。如果选取了其他页面元素，您可以随时单击页面左侧或右侧的灰色区域来
重新选取整个页面。
选取页面时，您可以使用「控制」列中的选单来更新填色颜色与线条设定。若要针对此范例更新主版页面，请依照以下步骤执行：
2. 单击「控制」面板中已连结的「浏览器填色」这几个字。单击「影像」区段旁的档案夹图示，然后浏览以选取样本档案档案夹中名为 的档案。单击「开启」来设定
背景影像 (见图 9)。
3 / 52
图 9. 使用「浏览器填色」面板来设定将显示在浏览器窗口中的背景影像。
请注意，依照预设，「符合」选单设定为「并排显示」。这样可以确保背景影像将会重复，同时水平与垂直并排显示，以为浏览器窗口填色。
3. 单击「浏览器填色」面板外部的任何位置，将其关闭。
网站发布时，您设定为并排显示背景填色的原始小影像只会在浏览器中加载一次，并排显示的背景影像会提供解决方案来根据需要覆盖页面的较大区域，而不会影响网站的下载速度或效
能。
4. 在「控制」面板中，单击「填色」色卡并将页面的填色颜色设定为「无」(包含红色对角线的白色色票)。
接下来，您将要新增图形以建立将显示在所有网站页面的页尾。
回到顶端
使用设定为 100% 宽度的元素
设定为 100% 宽度的项目将会为浏览器水平填色，无论访客的浏览器窗口调整为多宽。如果您将页面元素设定为也与浏览器窗口的顶部和底部边缘对齐，填入实色的对象或并排显示的资源
也会展开，以符合可用空间。
1. 使用「矩形」工具，在页面底部附近绘制一个宽度与页面宽度相同，高度约为 250 个像素的矩形。
2. 选取此矩形，将线条宽度设定为 0。当选取此矩形时，您会知道，因为左上角的选取指示器会显示「矩形」一词 (见图 10)。
图 10. 使用「线条」字段来将所选矩形的线条设定为 0。
3. 单击「控制」面板中的「填色」一词，来开启「填色」选单。使用「填色」选单将颜色设定为无 (包含红色对角线的白色色票)。单击「影像」区段旁的档案夹图示，并将矩形的
背景影像设定为 。在「符合」选单中，将选项设定为「水平并排」，这样可使影像跨 X 轴从左到右并排显示。
4. 拖移矩形的转换控制点，将其置于可见区域的最下方，并调整宽度以与页面的左右两侧以及下方对齐。您将会看到一个红色的边框暂时显示，指示矩形何时设定为「100% 宽度模
式」(见图 11)。
图 11. 拖移矩形以将其与浏览器窗口的下方及左右两侧对齐。
回到顶端
将单一影像置入页面上
接下来，您将要透过直接将图像文件案置入页面上来新增图像文件案，而不是将背景影像设定至页面或矩形。Muse 工作区的工作方式与 Illustrator 及 InDesign 类似，您都需要先加载
置入影像，然后再单击您想要该影像显示的页面。
1. 选择「档案 > 置入」，或使用键盘快捷方式：Command-D (Mac) 或 Ctrl-D (Windows) 来开启「读入」对话框。
2. 浏览以选取样本档案档案夹内名为 的档案。单击「开启」选择该档案，然后关闭「读入」对话框。
单击页面底部附近的位置，来置入影像。在本例中，您是想要以完整大小置入影像，因此只需单击即可。不过，如果您打算调整置入影像的大小，可以单击并拖移来将影像缩放为特定大
小。
使用「选取」工具， 将影像朝向并排显示页尾矩形的垂直中心拖移，并注意红色的参考线以及蓝绿色测量方块会短暂地显示，以协助您将其与中心对齐。
进行完这些变更之后，页尾部分即已基本完成 (见图 12)。
4 / 52
图 12. 页尾是由包含并排显示背景影像的单一矩形以及上方置中对齐的影像所组成。
在下一部分中，您将学习如何定义主版页面的页首与页尾区域。
回到顶端
使用参考线来定义页面的页首与页尾区域
您在使用 HTML 与 CSS 建置网站时，根据显示在每个页面上的唯一内容，各页面的高度通常都不同。Muse 包含允许网站页面根据各页面上的唯一内容显示不同长度的功能。您可以设定区
域，使页首始终保持位于顶部位置，而页尾内容始终直接显示在页面内容下方，无论每个页面的高度为何。在本节中，您将会定义主版页面的页首与页尾区域。
请依照下列步骤来显示参考线及设定页面区域：
1. 请确定页首与页尾参考线都已显示。若未显示，请选择「检视 > 显示页首与页尾」。或者，您也可以使用「控制」面板中的「检视」选单来启用「页首与页尾」参考线。参考线显
示时，会有一个复选框显示在「检视」选单清单中「页首与页尾」项目旁 (见图 13)。
图 13. 确认页首与页尾参考线都已启用。
如果想要，您也可以在工作区的左侧，也就是浏览器窗口区域之外单击鼠标右键。然后在显示的环境选单中启用「显示页首与页尾」选项。
若要重新放置页首与页尾参考线，也必须启用标尺。标尺可让您将参考线设定到精确的像素位置。依照默认，也会显示标准参考线 (显示您在建立新网站时所设定的栏数)。
五条蓝色的水平参考线会横跨页面宽度。从最上方开始，这五条参考线分别用来定义页面顶部、页首的最下方边缘、页尾的最上方边缘、网页的底部以及浏览器窗口的底部。当您拖移参考
线来定义这些区域时，会有工具提示说明每条参考线及其目前的位置。您会发现，放大页面很有帮助，这样您便可以更精确地放大到位置。
注意：
浏览器窗口的底部规定了访客在浏览器中检视网站时显示区域的最下方部分；根据设计而定，您可以为浏览器本身设定背景颜色或背景影像，以及为浏览器参考线底部上方的页面底
部位置设定参考线，让背景颜色或影像在页面内容下方显示。
在此样本项目中，浏览器的填色不会在页面内容下方显示。
2. 将「页面底部」参考线与「浏览器底部」参考线拖移到页面底部的相同位置，就在页尾矩形的下方，如图 14 所示。
图 14. 当「页面底部」与「浏览器底部」参考线位于相同位置时，浏览器填色内容不会在页面底部下方显示。
中间的三条参考线定义了将会显示在页首及页尾区域的内容。剩余的中心区域是您要新增唯一页面内容的区域；此中心区域会展开以符合置入各页面上之元素的高度。
您也可以选取页面上的矩形与元素。使用所选元素的边界方块来协助您在设定页首与页尾区域时对齐参考线很有帮助。
3. 在包含并排显示背景影像的页尾中选取矩形。拖移「页尾」参考线，直到它与页尾矩形的顶部对齐为止。
4. 使「页面顶端」参考线留在最上方 (在 Y: 0 px 的位置)。将「页首」参考线向下拖移约 253 个像素。
5 / 52
页首内容将会显示在页面顶部与「页首」参考线之间的区域中。进行完这些变更之后，参考线看起来会像是这样 (见图 15)。
图 15. 在将参考线重新放置于「A-主版」页面上之后的显示情况。
在设计过程中，若需要重新调整参考线使其符合页首与页尾内容，您可以随时返回「A-主版」页面。
单击「规划」链接，或单击标记为 katiesCafe 的索引卷标即可返回「规划」视图。
请注意，网站中的所有页面缩图现在都显示您已新增至已连结「A-主版」页面的设计元素 (见图 16)。
图 16. 「A-主版」设计显示在「规划」视图中的所有已连结页面缩图上。
在设计网站时，您对主版页面所做的变更会随时自动更新连结的页面。主版页面可让您轻松更新或维护网站，因为只要您更新一个主版页面，即可变更网站的外观。
回到顶端
使用阶层式主版页面
Muse 可让您建立可套用到其他主版页面的主版页面。阶层式主版页面的工作方式与主版页面套用至「规划」视图中页面的方式相似。在 Muse 之前的版本中，您可以建立多个主版页面，
但一次只能将一个包含一组页面元素的主版页面套用至网页。
在过去，如果您要建立一个包含两个不同区段，但这两个区段相似，而每一区段又拥有唯一外观的网站，您可以复制主版页面、略微变更一下，然后再将其套用至特定页面。这样一来，这
两个主版页面通常会包含一些相同的元素，因此当您更新网站时，就必须编辑两个主版页面中的内容，以保持所有元素的同步化。
而现在使用 Muse 4.0 及以上版本时，您便可以建立一个「A-主版」页面，其中包含会显示在多个主版页面中的共享元素 (例如之前几节所述的新增背景及页尾)，然后再建立继承「A-主
版」页面中所有元素的其他主版页面，再加上第一区段所特有的任何元素。若您建立了第三个主版页面，则该页面可以使用「A-主版」页面中的元素，以及第二区段所特有的任何元素。
使用阶层式主版页面的好处是，您可以限制某元素相对于一个实例的出现次数。在重新设计网站时，只需要编辑每个元素一次，它的所有实例就会自动在网站中更新。
您可以在「规划」视图中管理及套用主版页面。就像您可以单击主版页面缩图并将其拖移至页面缩图，以将主版页面套用至页面一样，您也可以建立多个主版页面，然后再单击主版页面并
将其拖移到另一个主版页面上。或者依您的个人喜好，您也可以在「规划」视图中的任何主版或页面缩图上单击鼠标右键，并使用所显示环境选单中的「主版」选项来设定主版。
请注意，当您将鼠标光标停留在页面或主版页面名称上时，工具提示会针对该页面或主版页面显示所套用主版的阶层。
6 / 52
现在，您已建立包含浏览器填色并排显示背景及页尾内容的「A-主版」页面。在下一节，您将建立一个继承「A-主版」页面内容的新主版页面，然后再新增页首，以便您可以将其套用至网
站页面。请依照下列步骤进行：
1. 当在「规划」视图中检视网站地图时，请将游标置于「A-主版」页面缩图上，以便能够看到显示在两侧的加号按钮。单击「A-主版」页面右侧的加号来建立一个全新的主版页面。
依照预设，新主版页面名为「B-主版」。
2. 双击缩图下方的「B-主版」文字字段进行编辑。为您刚建立的新主版页面输入一个更具描述性的名称：「主要」。
3. 在「主要」主要页面缩图上单击鼠标右键，然后从显示的环境选单中选择「主版 > A-主版」(见图 17)。
图 17. 在选单中选择「A-主版」来将其套用至「主要」主版页面。
请注意，在您将「A-主版」页面套用至「主要」主版页面之后，「主要」主版页面缩图会更新以显示相同的外观。「主要」主版页面缩图下方的蓝色标签表示为「A-主版」，这是因为您在步
骤 3 中将它套用至「主要」主版页面。
一个重要的区别是，「主要」主版页面实际并不包含「A-主版」元素，您并不是只复制了「A-主版」，而是将「主要」主版页面设定为了「A-主版」的连结，这表示您新增至「A-主版」的任
何新内容也将自动显示在「主要」主版页面上。
如前所述，有关阶层式主版的一个优点是页尾、选单以及背景仍只存在于「A-主版」页面。因此，如果客户在之后要求您使用不同的并排显示背景，您可以更新「A-主版」页面，然后「主
要」主版页面将会自动更新。
在本教学课程稍后的部分中，您将会为两个不同网站部分的不同外观建立两个不同的主版。不过现在，您可以在「规划」视图中将页面更新为全部使用新的「主要」主版页面，而不是使用
「A-主版」页面。
4. 单击「主要」主版页面，并将其拖移至左上角的「food」页面缩图。请注意，随着您将「主要」主版页面缩图拖放到「food」页面缩图上，「food」页面缩图下方的蓝色文字会从
「A-主版」更新为「主要」。
这是在「规划」视图中将主版页面套用至页面的最常用方式，不过您也可以尝试使用环境选单来予以套用：
5. 在「events」页面缩图上单击鼠标右键，然后在显示的环境选单中选择「主版 > 主要」(见图 18)。
图 18. 使用环境选单来将「主要」设定为「events」页面的主版页面。
6. 使用您偏好的方法 (如步骤 4 和 5 所述) 将「主要」设定为其余三个页面的主版页面，即「home」、「about」及「visit」。
进行完此变更之后，各页面缩图下方的所有蓝色文字卷标现在应该都会显示「主要」。如果您将鼠标光标停留在任何蓝色标签上，会出现工具提示，显示已套用主版页面的阶层 (见图 19)。
7 / 52
图 19. 当您将鼠标指向卷标时，会显示一个实用的工具提示来描述阶层。
在此范例中，阶层只有一层深。换句话说，也就是「主要」主版页面继承「A-主版」页面内容。不过请注意，您也可以根据需要建立主版页面链。例如，您可以先建立一个名为「页首」且
只包含页首内容的主版页面，再建立一个名为「页尾」且继承「页首」主版页面内容的主版页面，然后再建立一个名为「主要」且继承「页尾」主版页面 (也包含页首) 上所有内容的主版
页面。根据网站的设计以及您对某些元素可能会有所改变的认知，您可以建构继承层级来将其设定为数层深。以此方式划分设计有点像是建立符号，因为您可以隔离设计的特定部分，然后
再于稍后根据需要轻松找到及编辑该部分。
请继续阅读下一个教学课程，「用 Muse 建置您的第一个网站，第 2 部分」，在这里您将会学习如何使用 Widget (供您拖移到页面上的预建网站互动网站功能)。Widget 可让您快速将进
阶功能新增至页面，而不必撰写任何程序代码。您将会学习如何编辑 Widget 的行为与外观，来自定义它们在网站设计中的显示方式。
第 2 部分
使用「选单」Widget
设定与自定义 Widget
了解按钮状态
编辑「选单」Widget 的标签
建立与套用段落样式
将页面元素设定为页尾项目
在「用 Muse 建置您的第一个网站，第 1 部分」中，您建立了一个新的网站，使用「规划」视图建立了网站页面，然后在「设计」视图中编辑了「A-主版」页面
以加入页面元素，并定义页首及页尾区域。您也学到关于阶层式主版的知识，建立了新的「主要」主版，并加以套用了「A-主版」。在此部分中，您将编辑「主要」
主版页面，学习如何新增并自定义 Widget。首先您将新增称为「选单」的一种 Widget，以帮助访客导览至网站的各页面。
回到顶端
使用「选单」Widget
在本段由 Brian Wood 讲解的视讯中，您将学习如何将「选单」Widget 插入至您的页面。
由 Adobe Press - Peachpit 提供
提供您的专业知识给
Adobe Community Help
您在前面小节所建立的「主要」主版页面其实已接近完成，因为它继承了「A-主版」页面的所有内容。同时，当您套用其他主版时，复制的页面亦会继承原本主
版页面的参考线。不过，主版页面通常均含有网站导览，所以下一步即是将此加入。
将水平选单新增至「主要」主版页面：
1. 在「规划」视图中，双击「主要」主版页面缩图来在「设计」视图中将其开启并编辑。
2. 在面板组单击「Widget 链接库」索引卷标，开启「Widget 链接库」。或者，若面板组未开启，请选择「窗口 > Widget 链接库」将其开启。开启时，会
在清单中的「Widget 链接库」项目旁边显示核取标记。
3. 在「Widget 链接库」中，单击「选单」区段来将其展开。选取「水平 Widget」，并将其从面板拖移至「主要」主版页面的页尾区域 (见图 20)。
8 / 52
图 20. 拖移并放置「水平选单」Widget。
首次将一个 Widget 拖移至页面时，会显示黑色面板，此面板称为「选项」面板。在面板以外位置单击以将其关闭；需要再次存取时，直接单击 Widget 右方显
示的蓝色箭头按钮即可。
4. 使用「选取」工具将「选单」Widget 置于页尾含有并排背景影像的现有矩形之上 (接近灰色区域顶端)，并垂直置中。
请注意，此时选单即自动显示您已建立的页面名称，且顺序同网站地图中显示的顺序。更棒的是，页面的名称均已自动连结至各页面，且均属动态。因此若日后
您决定要将页面重新命名或移动，选单即会自动更新，连结亦可继续如常使用。Widget 的操作相当直觉化，让您专心投入自定义外观，使其符合网站的设计。
虽然每一种 Widget 提供不同功能，在操作 Widget 时所使用的许多概念则毫无二致。从「Widget 链接库」找到要用的 Widget，然后将它拖移到页面上。每一
个 Widget 均包含依阶层式结构排列的 Widget 元素。单击 Widget，即可继续按下去展开其子元素。在进行此操作的同时，左上角的「选取指示器」会显示目
前所选取元素的名称。
例如，当您首次按下 Widget 时，即会选取 Widget 本身。如果您再单击，则可以选取一个容器，再接着单击可选取容器内的文字框。要逐一返回您之前选取的
子元素，请按 Escape 键。您也可以直接在 Widget 区域以外位置单击，一次取消选取整个 Widget。
选取整个 Widget 时，可以移动其位置。您也可以拖移它的变形控制点，以缩放或变更整个 Widget 的尺寸。您可以设定填色及线条颜色，并可套用样式以控制
整个 Widget 的外观。
回到顶端
设定与自定义 Widget
设定 Widget 的方法，即是更新「选项」面板中的设定。「选项」面板是一个环境面板，让您套用变更并更新该 Widget 专属的设定。有些 Widget 的选项较其
他 Widget 多，但是全部均使用此「选项」面板控制 Widget 的运作，以及其内容显示方式。
选取任一容器元素后，可设定「填色」与「线条」选项更新其外观。选取文字时，可使用「文字」面板或「控制」面板的文字选项设定文字样式。有些时候，您
也会编辑 Widget 中的文字卷标 (不过除非您在「选单」Widget 中设定使用「手动选单类型」，否则页面名称均将依网站地图的页面自动设定)。
1. 单击页面页尾区段的「选单」Widget，会看到「选取指示器」显示「选单」一词。单击蓝色箭头按钮存取「选项」面板 (见图 21)。
图 21. 选取「选单」Widget 并单击蓝色箭头按钮以显示选项。
在本例中，请确定已设定下列默认选项，如图 22 所示：
选单类型：顶层页面
方向：水平
一并编辑：启用
项目大小：大小一致
显示左图标：停用
显示卷标：启用
显示右图标：仅子选单
9 / 52
组件定位：水平；置中对齐
图 22. 使用预设设定值来设定「水平选单」Widget。
「选项」选单的设定让您可以设定选单的运作方式。
2. 单击页面的其他任何位置，以关闭「选项」选单。
接下来，您将学习如何编辑选单中的按钮外观，以及如何控制文字格式以符合网站的设计。
回到顶端
了解按钮状态
1. 选择「档案 > 在浏览器中预视网站」。此选项让您可预视网站中的所有页面。
2. 测试依默认状态显示的「选单」Widget。查看页面第一次加载时，选单中的按钮 (此状态称为「正常」状态)。试着操作按钮，将鼠标光标移至按钮上，
会看到「鼠标指向效果」状态出现。当您单击按钮时，会加载相应的页面，按钮则以较深的灰色显示，此为默认的「作用中」状态。此「作用中」状态有
助于访客掌握自身所在位置，因为它会指出访客浏览网站期间，当前选取的页面。
注意：若您按住鼠标按钮不放，则可见到另一个状态，称为「鼠标按下」，这是当访客将光标移至按钮上并按下鼠标时所显示的自定义外观。
接下来，您将看到如何编辑按钮的状态。
1. 关闭浏览器并返回 Muse。
2. 单击 Widget 以选取整个选单。再单击「food」按钮，选取「food」选单项目 (见图 23)。若您不小心按了第三次，而使「选取指示器」显示「卷标」一
词，则请按一次 Escape 键，返回阶层的上一层，使指示器显示「选单项目」一词。
图 23. 双击以选取 Widget 阶层结构中的「food」选单项目。
由于「选项」面板中已启用「一并编辑」选项，因此对「food」选单项目外观所做的任何变更，均会套用于此「水平选单」Widget 中的所有其余按钮。如此可使
编辑更为快速。除非设计本身需要您为每一个按钮套用不同样式，否则请维持启用预设的「一并编辑」选项。
3. 选取「状态」面板索引卷标或选择「窗口 > 状态」，开启「状态」面板。
此面板让您编辑按钮图形依据访客光标动作而定的各种显示方式。请注意，此处有数个灰色方块，定义各状态下的外观 (见图 24)。
图 24. 设定按钮的状态。
在预视网站时，您已看到「正常」状态代表选单在页面第一次加载时的外观，即访客未使用光标与选单互动之时。若访客将光标移至按钮上，则会显示套用于「鼠
标指向效果」状态的样式。若访客将按钮按下，则会显示套用于「鼠标按下」状态的样式。最后，若访客已位于网站的当前页面 (例如，若他们按下了「about」
选单项目，且仍然在检视「about」页面)，则按钮外观就如同「作用中」状态的样式。最后一个状态为选用，但有时候可能很有帮助：可让访客一看就知道自己
所在页面。
4. 在「状态」面板中，单击列表中每一个项目：「正常」、「鼠标指向效果」、「鼠标按下」及「作用中」状态。请注意，当您按下面板中的各个状态时，页面
上的「选单」Widget 亦会更新显示该状态的默认外观。
5. 再单击「正常」状态。在选取「food」选单项目的状态下，使用「填色」色卡选择一个完全不同的颜色，如红色。当您设定不同填色颜色时，所有选单项
目均会更新其「正常」状态；这是因为启用了「一并编辑」选项 (见图 25)。
10 / 52
图 25. 启用了「一并编辑」选项后，当您更新一个按钮状态的填色颜色时，其他按钮亦会自动更新。
6. 再次于浏览器中选择「档案 > 预视网站」，确认您已自定义了按钮的「正常」状态；当选单首次载入时，除了描述目前页面的按钮外，其余按钮均为红色。
当您将光标移至各个按钮上时，即显示默认的灰色「鼠标指向效果」颜色，呈现鼠标指向效果。
7. 在本范例中，请至「状态」面板选取各个状态 (或使用「控制」面板中「选取指示器」旁的「状态」选单，选取各个状态)，再将「填色颜色」设为「无」
(含红色对角线的白色色卡)。此设定有效地将背景选单项目按钮从视线范围中移除，使选单按钮变成透明，可看到下面的背景设计。
在本文撰写之时，「水平选单」Widget 外围容器预设为透明。不过，您仍然可以利用「填色检色器」设定其填色颜色，方式同选单项目按钮容器的设定。之后当
您自行设计网站时，可尝试设定整个 Widget 的填色颜色，再为按钮容器设定不同填色颜色。您也可以尝试加入背景影像来设计按钮。
完成「水平选单」Widget 的状态编辑后，您将要学习如何以类似的编辑流程来更新各选单项目内的文字外观。
回到顶端
编辑「选单」Widget 的标签
在此部分中，您将看到如何更新各选单项目中显示页面名称的文字卷标。因为此「水平选单」Widget 位在页尾，所以其采用了非常基本的设计，仅使用简单的文
字链接，且所有状态的字体格式均相同。
1. 在选取页面的状态下，单击 Widget，使「选取指示器」显示「选单」一词。单击「food」按钮，选取「food」选单项目。「选取指示器」会显示「选单项
目」一词。再按一次「food」一词，以选取该标签 (即 Widget 中含有「food」一词的部分)。「选取指示器」会显示「卷标」一词。
2. 在「状态」面板中，确认已选取「正常」状态。
3. 单击「文字」面板索引卷标或选择「窗口 > 文字」，开启「文字」面板。
4. 在选取标签的状态下，请选取下列选项，并使用「文字」面板将文字格式化 (见图 26)：
字体：Droid Serif
字体样式：斜体
字体大小：15
字体颜色：#EEE5C4
图 26. 在「文字」面板设定选项，以更新选单标签的外观。
注意：Droid Serif 是一套网页字体，可从「字体」选单中选择「新增网页字体」进行下载。不过，您也可以依偏好选择使用其他适合网页的字体，或是已在计
算机上安装的系统字体。若要了解有关使用网页字体的详细信息，请参阅「Muse 中的印刷样式：使用网页字体、适合网页的字体以及系统字体」。
请注意，在变更文字格式后，所有卷标均会更新至相同的字体样式。这是因为已在「选项」面板启用「一并编辑」。若您需要建立每个选单项目均拥有不同字体格
式的选单，也可以随时停用「一并编辑」选项。
为维持视觉上的一致性，此网站设计将全面使用此字体样式。在下一节中，您将看到如何把属性储存为段落样式，让您可以轻易将相同格式再套用至网站其他文
字。
回到顶端
建立与套用段落样式
1. 单击「段落样式」面板索引卷标或选择「窗口 > 段落样式」，开启「段落样式」面板。
2. 单击面板底部的「新增样式」按钮 (页面图标) 以储存这一组字体样式。储存一组样式后，之后可再将其套用至其他文字元素。
3. 连双击您刚在「段落样式」面板中建立的新样式；此样式已设为默认名称「段落样式」。将其重新命名为：top-nav-normal (顶端-导览-正常) (见图 27)。
11 / 52
图 27. 单击「新增样式」(页面图标) 以新增段落样式，然后连双击新的样式，并输入描述性名称。
注意：
若您在「段落样式」面板以鼠标右键单击 (或按住 Control 的同时单击) 其中一个样式名称，则会显示可进行复制、删除或解除链接样式的选单。若您从选单
中选择「样式选项」，则会显示新的窗口，让您选取「段落标记」(p、h1、h2、h3 等等) 来自动使用该样式 (见图 28)。开启「样式选项」后，单击「取消」将
其关闭。
图 28. 「样式选项」窗口的功能包括将样式套用到特定的 HTML 标记。
若您查看「状态」面板，会发现「正常」、「鼠标指向效果」、「鼠标按下」及「作用中」等所有状态的选单项目卷标均使用相同的字体格式。
4. 单击「预视」可在 Muse 中看到页面于浏览器中的呈现效果。Muse 使用 Webkit 的一个版本来显示页面，许多现代的网页浏览器也是选用此技术。当您
与选单互动时，您会注意到按钮仅会显示其卷标 (选单项目容器为透明)。同时也请注意，您将光标移至选单按钮上，或单击按钮时，卷标均不会改变。
5. 完成选单测试与预视后，请单击「设计」以返回编辑「主要」主版页面。
回到顶端
将页面元素设定为页尾项目
「主要」主版中的导览内容均已完成，但是尚有最后一项工作。设计页面与主版页面时，最好确认页尾区域的各元素均已设定为页尾项目。如此可确保每一页面
的唯一页面内容下方，会永远显示这些页尾项目。请依照下列步骤操作：
1. 单击「规划」以返回「规划」视图。双击「A-主版」页面缩图，以在「设计」视图中进行编辑。
2. 使用「选取」工具选取含有并排显示背景的矩形，以及「Made with Muse」影像。选取时，您可以用按住并拖移的方式框住页尾的项目，或是按住 Shift
再个别单击您要选取的项目。
3. 以鼠标右键单击页面上的项目，确认选单所显示的最后一个项目 (即「页尾项目」) 旁有核取符号。或者，请查看「控制」面板的「页尾」复选框，确认
已将其选取。这两个设定的任一个均可用来确认所选项目已设定要显示于页尾 (见图 29)。
12 / 52
图 29. 确认您已选取「页尾项目」选项。
4. 单击「主要」主版页面的索引卷标，使其成为「设计」视图的作用中页面。或者，若您已将其关闭，请连双击「主要」主版页面缩图，以在「设计」视图
中进行编辑。
5. 使用「选取」工具选取「选单」Widget。请确定您仅按了一次，以便选取整个选单 Widget，且「选取指示器」显示「选单」一词。若您连按两次，不小
心选取了选单项目，请按一次 Escape 键跳回仅选取选单本身的状态。
6. 以鼠标右键单击「选单」Widget，确认选单已设为「页尾项目」，且将会显示于页尾。
7. 选择「档案 > 储存网站」以储存最新的变更。
继续下一堂教学课程「用 Muse 建置您的第一个网站，第 3 部分」，为网站加入页首内容。您将继续使用 Widget (即预先建置的网站互动功能，可直接拖移进
入页面)，并且将学习如何设定主版页面元素，使其显示于新增至个别页面的元素顶端。
第 3 部分
将页首内容加入「主要」主版页面
建立并自定义顶层「选单」Widget
复制主版页面
设定主版页面的元素，使其在前景显示
在「用 Muse 建置您的第一个网站，第 2 部分」中，您利用「选单」Widget 在页尾新增网站导览功能，更新了「主要」主版页面。您学会了
如何展开 Widget 的子元素，以将其选取并利用「状态」面板编辑状态与标签外观。您也探索了如何利用「选项」面板，调整各种控制 Widget
运作方式的设定。此外，您还建立并套用了段落样式。在此部分中，您将在「主要」主版页面新增顶层网站导览功能。
回到顶端
将页首内容新增至「主要」主版页面
您已在「主要」主版页面新增「选单」Widget，完成页尾部分，现在您将新增顶层的导览功能。请依照下列步骤将内容新增至页首区域。
1. 在「规划」视图中，双击「主要」主版页面缩图来在「设计」视图中将其开启并编辑 (若尚未开启)。
2. 使用矩形工具画出一个矩形，起点在可见浏览器区域左上角，宽度则与整体宽度相同，止于右上角。使用「选取」工具拖移矩形的上
方、左方与右方的控制点，直到看到红色边框短暂显示为止；这代表矩形已设为 100% 宽度，此与建立页尾的方法相同 (见图 30)。
图 30. 画出一个占满浏览器窗口顶端区域的矩形。
拖移控制点后，矩形尺寸应约宽 1160 像素、高 253 像素。水平 X 值为 -100，代表矩形左上角位于页面左上角的 100 像素处。Y 值为 0
(代表矩形左上角与页面左上角垂直相符)。若要精确设定这些值，可在选取矩形的状态下检阅「变形」面板或「控制」面板的字段。
3. 设定线条宽度为 0，并用「填色」选单将填色颜色设定为「无」。单击「影像」区段右侧的档案夹，然后浏览以选取名为 tile-
的影像。将「符合」选单设定为「水平并排」(见图 31)。
13 / 52
图 31. 使用「符合」选单使背景影像水平并排。
虽然页首仅由单一矩形构成，但是水平并排填满的背景影像会创造出灰色矩形存在于黑色矩形之上的印象。
4. 选择「档案 > 置入」，或使用键盘快捷方式 Command+D (Mac) 或 Control+D (Windows) 来开启「读入」对话框。
5. 浏览以选取样本档案档案夹内名为 的档案。单击「开启」选择该档案，然后关闭「读入」对话框。
6. 在页首矩形的中央接近页面顶端处单击。如此即会以原始尺寸置入一份 档案实例。
7. 使用「选取」工具将橘色缎带图形对齐，使它垂直置中于页首顶端附近，且涵盖整个页面宽度 (见图 32)。
图 32. 橘色缎带图形置中于页首内。
这个橘色缎带图形会成为下一节中要新增的顶层选单之背景。
回到顶端
建立并自定义顶层「选单」Widget
之前在「主要」主版页面的页尾新增选单时，您已新增一个「选单」Widget 并已设定其样式。在本节中，您将重复相同流程，但是在状态部分
使用不同样式，使每一个选单项目同时显示按钮及文字卷标。
1. 在「Widget 链接库」中，单击「选单」区段来将其展开。选择「水平」Widget，并将其从面板拖移至「主要」主版页面的页首区域。
2. 使用「选取」工具将「选单」Widget 放在页首您置入的橘色缎带图形之上，于顶端附近垂直置中。
在选取「选单」Widget 的情况下，「选取指示器」会显示「选单」一词。您可以单击蓝色箭头按钮存取「选项」面板，并自定义选单显示方
式；但在本例当中，您将使用所有预设设定。您将会使用「一并编辑」设定，以确保在单一选单项目所做的变更均会套用至「选单」Widget 的
所有选单项目。
3. 再单击「food」按钮，选取「food」按钮的选单项目。「选取指示器」会显示「选单项目」一词。若您不小心选取了选单项目内的卷
标，请按 Escape 键。
4. 选取「状态」面板索引卷标或选择「窗口 > 状态」，开启「状态」面板。确认已选取「正常」状态。
5. 使用「填色色卡」，将选单项目「正常」状态的颜色设定为浅橘色。您可以选择偏好的任何颜色，或使用本样本项目使用的特定十六进
制颜色值：#E9916F。
为方便日后在网站其他地方套用相同颜色，您可以重新命名此色票。
6. 在「色票」面板 (可从「控制」面板或面板组中的独立「色票」面板存取) 中，连双击您刚才套用至选单项目的橘色色卡，开启「色票
选项」。取消选取「以颜色数值命名」复选框，并在「名称」字段输入「顶端-导览」(见图 33)。
14 / 52
图 33. 更新「色票选项」以为色票指定描述性名称。
7. 在前一节中，您建立了一个段落样式并设定文字颜色为颜色值 #EEE5C4。您将在本教学课程中重复使用此颜色，所以请连双击该色卡，
将它重新命名为「cream-menu」(奶油色-菜单)。
8. 单击「确定」，关闭「色票选项」对话框。若您用的是「控制」面板中的色票，请在页面其他任何位置单击以关闭「填色色票」对话
框。
9. 在「控制」面板中，将选单项目矩形的圆角半径设为 6，以建立拥有圆角的按钮 (见图 34)。
图 34. 在字段输入数值，以设定所选矩形所有圆角的圆角半径。
10. 在「状态」面板中，选取「鼠标指向效果」状态。单击「控制」面板的「填色色卡」，并选取您刚才重新命名为「顶端-导览」的同一
颜色，设为「鼠标指向效果」状态的填色颜色。
11. 在「状态」面板中，选取「鼠标按下」状态。重复步骤 9，单击「控制」面板的「填色色卡」，并将「顶端-导览」颜色设为「鼠标按
下」状态的填色颜色。
在本范例中，「正常」、「鼠标指向效果」及「鼠标按下」状态均显示相同外观。当您建立自己的网站时，可选择使所有状态均相同，或在访
客与按钮互动时，为每一个状态显示不同外观。本设计为「作用中」状态使用不同颜色，以提醒访客他们目前所检视的页面为何。接下来，您
要将新颜色套用至「作用中」状态：
12. 在「状态」面板中，选取「作用中」状态。单击「控制」面板中的「填色色卡」并将「作用中」状态的填色颜色设定为红棕色。若要使
用本项目所用的相同颜色值，请输入颜色值：571E00。
13. 之后，此红棕色将在网站别处重复使用。若您愿意，可连双击色票开启「色票选项」对话框，并将其重新命名为「棕色-菜单」。
秘诀：若您套用颜色却未命名色票，之后仍可随时使用「滴管」工具从页面取得颜色，再为其重新命名。
至此为止，所有选单项目状态样式均已完成。最终步骤即是更新选单项目卷标的字体样式。
14. 再按一次「food」选单项目以选取其卷标，然后在「状态」面板选取「正常」状态。
15. 在「段落样式」面板中，单击您在本教学课程系列第 2 部分所建立名为「top-nav-normal」(顶端-导览-正常) 的段落样式 (见图
35)。
15 / 52
图 35. 在选取「正常」状态标签的情况下，单击「段落样式」面板中的样式名称，以将卷标文字套用相同的格式。
顶层「选单」Widget 与您在页尾新增的基本「选单」Widget 不同，在其他状态使用了不同颜色的标签。
16. 在选取标签的状态下，单击「状态」面板的「鼠标指向效果」状态。在「控制」面板或「文字」面板中，设定文字颜色以使用您在第 7
步骤中重新命名为「cream-menu」(奶油色-菜单) 的色票 (颜色值为 #EEE5C4)。
请注意，当您设定「鼠标指向效果」状态的颜色时，「鼠标按下」状态亦将自动更新。在本例中，这正是我们想要的设计，但是请记得您可以
视需要覆写此设定，并将「鼠标按下」状态的卷标颜色设为不同颜色。
17. 在「状态」面板中，选取「作用中」状态。在「控制」面板或「文字」面板中，以颜色值 #70909D 将文字颜色设定为岩蓝色。您将会
重复使用此颜色，所以请在「色票」面板连双击该色卡，将它重新命名为「blue-menu」(蓝色-菜单) (见图 36)。
图 36. 在「色票」面板将蓝色色票重新命名。
现在只剩最后一个项目要新增至「home」页面的页首区域。
1. 选择「档案 > 置入」(或使用 Mac 的 Command+D 或 Windows 的 Control+D) 来开启「读入」对话框。浏览以选取样本档案档案夹中
名为 的档案，然后单击「确定」以关闭「读入」对话框。
2. 在页首附近单击，以将标志影像置入页面。使用「选取」工具将图形重新放置，使它置中于「home」选单项目顶端，并位于橘色缎带中
央。
至此，您已完成了「主要」主版页面的顶层网站导览功能。若要查看各选单项目及卷标的状态设定结果，可预视设计。
1. 单击「预视」可在 Muse 中看到页面于浏览器中的呈现效果。
2. 请注意，您置于「home」选单项目之上的标志影像将以动画显示，因为它本身是一个动画 GIF 档案。使用鼠标光标与选单项目进行互
动，查看您按下按钮或将光标至于按钮上时的改变 (见图 37)。
图 37. 使用「预视」检视网站时，GIF 档案将以动画显示，选单的按钮亦会响应您的光标互动动作。
3. 预视完网站导览功能后，请单击「设计」以返回「设计」视图。
在下一节中，您将学习如何复制「主要」主版页面，以及如何控制主版页面元素的堆栈顺序。
16 / 52
回到顶端
复制主版页面
「主要」主版页面的页首内容已完成。虽然您可以直接在网站中的每一个页面使用「主要」主版页面，但是此网站设计共有两个部分。「主
要」主版页面设计最终会用于「home」及「visit」页面。另一个稍微不同的主版页面则会用于「food」、「events」以及「about」页面。
请依下列步骤复制「主要」主版页面：
1. 在「规划」视图中，以鼠标右键单击「主要」主版页面缩图。
2. 在出现的环境选单中，选择「复制页面」(见图 38)。
图 38. 使用选单复制现有的「主要」主版页面。
在「主要」主版页面右侧会出现新的主版页面，其预设名称为「主要复本」。因为您复制了「主要」主版页面，所以新的主版亦是依据「A-主
版」页面。
3. 在您刚建立的主版页面下方，连双击名称字段，并将其重新命名为「前景」。
在下一节中，您将学习如何设定主版页面元素排列顺序，让各个项目能够显示于页面元素上方，不再仅显示于下方。此时是您储存工作成果的
好机会。
4. 请选择「档案 > 储存网站」。
建立主版页面复本的好处之一，就是能将部分内容设定显示于其他页面内容之上，形成有若「排列 > 移至最前」的效果。我们将在「food」及
「events」页面使用此种「前景」显示。
设定主版页面元素的堆栈顺序，是 Muse 4.0 的新功能。在此之前，若要将共通的网站元素置于页面版面的其他内容之上，就必须将页首或页
尾元素置入每一页，而非仅置于主版页面。
回到顶端
设定主版页面的元素，使其在前景显示
您可在 Muse 的「设计」视图接口选取页面元素，并选择「对象 > 移至最前、前移、移至最后或后移」，使一个项目显示在页面上另一个项目
的上方或下方。(您也可以在元素或群组上以鼠标右键单击，并选择「排列 > 移至最前、前移、移至最后或后移」，以设定堆栈顺序)。
若使用旧版 Muse 设计网站，呈现页面时，预设是将主版页面的所有元素永远显示于页面所有元素之后。这种背景的分层放置有时会相当麻烦
(视网站设计而定)，因为唯一的因应措施即是将您原本会置于主版页面的元素拷贝，并贴上至所有您希望于顶端显示这些元素的网站页面。
Muse 提供可控制主版页面元素排列的新功能。现在，您不必再将主版页面的所有东西一律显示于页面元素之后，而是可以选择主版页面的元
素，并设定将其显示为前景元素。主版页面设为前景元素的项目，会显示在所有页面元素之上。
这个新的选项可在「对象 > 移动至 > 主版前景」找到。另外，您也可以于「设计」视图编辑主版页面时，以鼠标右键单击任何元素，在显示
的环境选单中选择「移动至 > 主版前景」。
在此样本项目的设计中，「home」与「visit」页面的内容使用默认堆栈顺序 (即页面元素显示在「主要」主版页面的页首顶端)，但是
「food」、「events」以及「about」页面则否。
在「food」与「visit」页面，您将更新「前景」主版页面，使页首内容显示于前景，即使页面卷动也仍在页面内容之上。请依照下列步骤操
作：
1. 在「规划」视图中，双击「前景」主版页面缩图来在「设计」视图中将其开启并开始编辑 (若尚未开启)。
2. 使用「选取」工具，单击并拖移整组页首内容，包括含有并排显示背景的矩形、置入的橘色缎带图形、「选单」Widget，以及中央的
GIF 标志动画。
3. 选取整个页首内容后，单击鼠标右键并选择「移动至 > 主版前景」(见图 39)。请注意，此时与一般选取对象显示蓝色边框不同，设定
显示于前景的项目在选取时会显示红色边框。
17 / 52
图 39. 使用环境选单将页首内容移至前景。
如此可确保在套用「前景」主版页面的页面上，页首将会显示在页面元素的顶端。
4. 在仍然选取整个页首的情况下，您将把页首固定于页面顶端，如此即使页面卷动，页首也不会随之卷动。您将在第 7 部分中学习如何
固定对象，但是现在请直接单击「控制」面板的上方中央固定位置，将页首固定住 (见图 40)。
图 40. 选取上方中央固定位置，将选取的页首固定。
5. 单击「前景」主版页面，并将其拖移至「food」页面，进行套用。再重复此步骤两次，将「前景」主版页面套用至「events」页面及
「about」页面。
完成此变更后，蓝色卷标文字将显示「前景」一词，代表「food」、「events」以及「about」页面均正在使用「前景」主版页面。若您将光标
移至蓝色「前景」卷标上，就会显示工具提示，指出「前景」主版页面是依据「A-主版」页面设计。
设计您自己的网站项目时，可尝试使用新的「移至前景」功能，将主版页面的元素设定为显示在最前面。之后在本教学课程系列中，您会将
「food」与「events」页面的设计定稿，并了解前景设定是如何确保页首显示在其他页面内容之上。
在本教学课程下一节，「用 Muse 建置您的第一个网站，第 4 部分」，您将看到如何使用嵌入式 HTML 来显示从其他网站拷贝的原始码。您也
将学习如何新增「影像预视灯箱排版」Widget，着手建置「home」页面。
第 4 部分
使用嵌入式 HTML 在 Muse 网站显示部落格
新增「影像预视灯箱排版」Widget
在网站内嵌入视讯
在浏览器中测试「影像预视灯箱排版」Widget
在「用 Muse 建置您的第一个网站，第 3 部分」中，您利用「水平选单」Widget 新增网站导览功能，更新了「主要」主版页面。您学会了如
何利用「状态」面板设定选单项目与卷标的外观样式。您还学会了如何重新命名颜色色票，以方便在「色票」面板中找到颜色。最后，您探索
了如何设定主版页面的元素，使其显示于前景。在第 4 部分中，您将开始使用嵌入式 HTML，以在您的 Muse 网站页面显示由其他网站所产生
的内容。您也将会看到如何将嵌入式 HTML 嵌套至 Widget 容器内。
回到顶端
使用嵌入式 HTML 在 Muse 网站显示部落格
嵌入式 HTML 意指由 Google、YouTube、Flickr 或 Picasa 等第三方网站所产生的原始码。您可以在这些网站建立账户并登入，然后从其网站
拷贝嵌入原始码，并将其新增至您的网站。
将嵌入式 HTML 贴入页面时，就好像在网站页面放入一个窗口，并在窗口内显示第三方网站的内容。
18 / 52
嵌入式 HTML 是轻松快速地新增复杂信息 (如地图、天气预报、股价等) 及丰富媒体 (如数字视频、幻灯片展示、声音文件等) 的绝佳方式。
此做法另外的好处是，让您将第三方网站当作代管服务兼上传接口。例如，若您在 YouTube 建立免费账户，就可以建立自己的 YouTube 频
道，并为您的网站上传视讯内容。YouTube 提供了一个简化上传流程的网页，并在其网站为您代管视讯档案。当您要更新网站时，只要在您的
YouTube 频道新增视讯、拷贝嵌入原始码，再将其贴上至页面，即可在您的 Muse 网站新增视讯。
在本节中，您将要从 Tumblr 拷贝原始码。这是一个免费的在线服务，您必须建立账户并登入，接着张贴可公开存取的部落格文章。部落格简
单易用，不熟悉计算机操作的人也能够轻松更新自己的网站。大多数的部落格网站均提供在线接口，可使用任何浏览器登入账户并张贴新文
章，不需要任何 HTML 知识或额外软件。
注意：访客检视您的网站时，不需要拥有 Tumblr 账户即可阅读您嵌入页面的部落格，仅您需要建立账户，因为您负责设计网站，需要拥有账
户才能建立自定义部落格，并产生您要加入自己网站的嵌入原始码。
1. 在本教学课程中，您不需要建立 Tumblr 账户亦可随堂操作。请直接拷贝以下 Tumblr 网站建立免费部落格后所产生的程序代码：
2. 在「规划」视图中，双击「events」页面缩图以在「设计」视图中将其开启并编辑。
3. 单击空白页面中央，并用以下其中一种方法来嵌入 HTML 原始码：
选择「编辑 > 贴上」，或使用键盘快捷方式 (Mac 用 Command+V，Windows 用 Control+V)，将原始码直接贴上页面。
或者
选择「对象 > 插入 HTML」。在出现的「编辑 HTML」窗口字段内单击，将内容贴上。单击「确定」，关闭「编辑 HTML」窗口。
注意：大多数情况下，Muse 可识别 HTML 原始码并会自动将您贴上的 HTML 直接嵌入页面。不过，若您在页面上看到原始码而非第三方网站上
的内容，则请尝试改用「对象 > 插入 HTML」的方法。
嵌入 HTML 原始码后，会在 Katie's Cafe Tumblr 帐户部落格文章看到周围显示控制点的蓝色边界方框。
4. 使用「选取」工具拖移控制点，调整部落格内容的尺寸，使其约占页面宽度的 80%。将部落格内容置中于页面，以利并排显示的背景图
形能够在左右两侧出现 (见图 41)。蓝色的测量矩形显示其与其他对象的距离。当选取的对象垂直置中时，会短暂显示红色对齐参考
线。
图 41. 在「events」页面调整 Tumblr 部落格的尺寸与位置。
这就是在 Muse 页面嵌入 HTML 所需的步骤。若您要编辑其 HTML 原始码，可在嵌入的 HTML 元素单击鼠标右键，从显示的环境选单选择「编
辑 HTML」。如此将开启「编辑 HTML」窗口，让您存取先前贴上的原始码。
接下来，我们将检阅您在「events」页面所做的变更：
5. 选择「档案 > 在浏览器中预视网页」，以新的浏览器窗口查看「events」页面的显示结果。
请注意当您向下卷动浏览部落格文章清单时，页首会显示于其他页面内容的上方。这是因为「events」页面采用「前景」主版页面，而该主版
页面的页首内容已设定在前景显示。
现在已完成「events」页面。在下一节，您将学习如何将嵌入式 HTML 内容贴入至 Widget，以控制第三方内容依据用户互动的显示方式。
回到顶端
新增「影像预视灯箱排版」Widget
在前一节，您嵌入了一些从 Tumblr 拷贝的 HTML 原始码，以在「about」页面显示部落格的内容。在本节中，您将学习如何在「影像预视灯
箱」Widget 内嵌入 HTML 内容。「影像预视灯箱」是由两个容器构成。在页面第一次载入时，访客会看到触发容器。单击触发区域后，目标区
域的内容即会显示于最上层窗口，在页面前方显示。
「影像预视灯箱」是突显特定元素的好方法，因为在显示目标区域时，可设定「影像预视灯箱」Widget 暂时使页面其余部分变暗，使访客注意
力集中在作用中的显示区域。
请依照下列步骤新增「影像预视灯箱排版」Widget：
19 / 52
1. 在「规划」视图中，双击「home」页面以在「设计」视图中将其开启并编辑。
2. 在「Widget 链接库」中，单击「排版」项目来将其展开。将「影像预视灯箱显示」Widget 从「Widget 链接库」拖移到页面 (见图
42)。
图 42. 将「影像预视灯箱显示」Widget 从「Widget 链接库」拖移到页面。
在本范例中，访客将按下触发容器中较大的主体影像，使「影像预视灯箱显示」Widget 的目标容器出现。从这里，他们可以再按下「播放」按
钮，观看嵌入的 YouTube 视讯。
「影像预视灯箱显示」Widget 的默认版本拥有三个较小的灰色触发方块，其下则是较大的浅灰色目标容器。
3. 双击最右侧的灰色小方块。按第一下时，「控制」列左上角的「选取指示器」会显示「排版」一词。再按一次灰色方块，使「选取指示
器」显示「触发」一词。(较小的灰色方块是此 Widget 的「触发器」，意即负责响应用户互动的按钮)。
样本项目仅使用一个触发按钮及一个目标容器，因此接下来就要将不需要的两个浅灰色触发按钮删除。每删除一个触发器，就会自动删除相应
的目标容器。
4. 按下 Delete (Mac) 或 Backspace (Windows) 移除选取的触发器。接着，双击第二个 (中央的) 灰色方块 (位于您刚才删除的触发器
左侧)。再按一次 Backspace 或 Delete 将其移除。
完成这些变更后，就只剩下一个灰色小触发按钮及一个较大的目标容器。
5. 在别处单击，不再选取 Widget。当目前没有选取任何元素时，可在左上角的「选取指示器」看到「页面」一词。
6. 选择「档案 > 置入」，开启「读入」对话框。浏览以选取样本档案档案夹内名为 的档案。单击「开启」选择该档
案，然后关闭「读入」对话框。在页面任一处单击，将主体影像以完整大小置入。
7. 在仍然选取主体影像的状况下，以鼠标右键单击并从出现的环境选单选择「剪下」(或用键盘快捷方式剪下主体影像，以将其从页面移
除并拷贝至剪贴簿)。
8. 双击剩下的灰色小触发按钮。按第一次时，您会选取整个 Widget，而「选取指示器」会显示「排版」一词。按第二次时，您会选取真
正的触发容器，而「选取指示器」会显示「触发」一词。
9. 以鼠标右键在触发按钮内单击，从出现的选单选择「贴上」。或者使用键盘快捷方式，将主体影像贴入触发按钮。请注意，触发容器会
自动放大为主体影像的尺寸。
在容器内贴上内容不一定都很简单。有时您以为内容已经贴进去了，实际上却贴在页面上。若需要确认主体影像确实位于触发容器内，请按一
次 Escape，查看「选取指示器」。若显示「触发」一词，则表示影像位于触发器内。若显示「页面」一词，则您必须再将影像剪下，重新贴入
触发容器。
10. 在选取触发容器的状况下，设定线条宽度为 0。请用「填色」选单将填色颜色设定为「无」(见图 43)。
图 43. 将主体影像贴入触发容器并将线条与填色设定为「无」。
11. 使用「选取」工具将 Widget 垂直置中于页面接近顶端处，使主体影像触发顶端约四分之一的部分与页首区域重迭。主体影像应刚好符
合橘色缎带图形所形成的凹处。
20 / 52
若您在「控制」面板单击「预视」按钮并测试「home」页面，大型主体影像应会显示，并稍微盖住页首内容。页面内容会显示在「home」页面
的页首上方，是因为「home」页面使用「主要」主版页面。
12. 单击主体影像 (触发容器内)，触发影像预视灯箱效果。页面会变暗，且目标容器内会显示默认的灰色填色颜色。按下 Escape 关闭影
像预视灯箱窗口，再单击「控制」面板的「设计」按钮，继续编辑「home」页面。
回到顶端
在网站内嵌入视讯
目前目标容器中是填入灰色填色颜色。不过，您可以在目标容器置入各种内容，包括不同的图像文件案、填色的矩形、文字或是您从其他网站
拷贝的嵌入式 HTML。
在本范例中，您将贴入 YouTube 产生的嵌入式 HTML。
想象一下，您造访了 的网页，观看您用自己的帐户上传的视讯。当您按下「分享」按钮，并按下「嵌入」时，即可存取并拷贝该
视讯的嵌入原始码 (见图 44)。
图 44. 选择想要的视讯大小后，拷贝 YouTube 产生的嵌入原始码。
在本教学课程中，Katie's Cafe 视讯的嵌入原始码已从网站上拷贝，所以您不需要造访 YouTube。请拷贝下面的嵌入原始码，以将其存入您的
剪贴簿：
上面的原始码采用 iFrame 标签包覆张贴于 YouTube 的视讯文件链接。iFrame 是一种 HTML 容器，让您可以加入网页内，于网页上以「窗
口」形式显示内容。
拷贝上面的原始码后，请返回 Muse。
13. 使用「选取」工具单击页面的灰色边框，使左上角的「选取指示器」显示「页面」一词。这代表目前选取了整张页面。
14. 单击具有灰色填色颜色的较大目标容器。左上角的「选取指示器」会显示「排版」一词。再按一次灰色目标容器，使「选取指示器」显
示「容器」一词。再按一次 (显示为「目标」)，然后再一次，直到「选取指示器」列出「影像框」一词。按 Backspace (Windows) 或
Delete (Mac)，从目标容器移除影像框。
在仍然选取内层目标容器的状况下，下一步即是将您在前面复制的 HTML 原始码贴入目标容器。
注意：在目标容器内贴上原始码，与之前在触发容器贴上主体影像一样容易出错，因为目的是要将原始码贴在 Widget 的目标容器「里面」。
此时有可能 (视您目前选取的元素而定) 会将视讯原始码贴在 Widget 之外，变成直接嵌入于页面。所以此处请小心进行...若您按下「预视」
以测试影像预视灯箱，发现即使未按下主体影像，视讯也会显示，就代表视讯原始码并未成功贴入容器，所以视讯才会立即显示。视讯应该仅
在按下主体影像之后显示。
请依下列步骤将视讯原始码贴入目标容器 (此时「选取指示器」显示「容器」一词)。
15. 选择「对象 > 插入 HTML」。在出现的窗口中，选取默认的占位符文本，并按下 Delete (Mac) 或 Backspace (Windows) 将其移除。
选择「编辑 > 贴上」，将您在前面拷贝的 YouTube 原始码贴入「HTML 程序代码」字段。单击「确定」，关闭「HTML 程序代码」窗
口。
注意：在大部分的情况下，Muse 会在您贴上 HTML 程序代码时自动侦测，并且理解这是 HTML 而非纯文本。因此，您也可以不选择「对象 >
插入 HTML」开启 HTML 窗口，而改为在选取内层目标容器的状况下，以鼠标右键单击 (或按住 Control 的同时单击)，再从出现的环境选单选
择「贴上」。(或者选择「编辑 >贴上」或用键盘快捷方式，将原始码贴至目标容器内)。Muse 提供许多方法，可达成将视讯原始码贴入目标容
器的目的。
将原始码贴入目标容器后，即可看到视讯的第一格 (一杯咖啡)。看到视讯的第一格，即代表您成功贴上 HTML 嵌入原始码。在「设计」视图中
编辑页面时，视讯并不能播放。您必须要按下「控制」面板的「预视」按钮，或以浏览器预视页面，才能播放视讯。
16. 视需要使用「选取」工具调整目标容器大小，放大尺寸使之符合嵌入式 HTML 视讯内容的大小。宽度应为 670 像素左右，高度则应为
415 像素左右。在选取视讯的情况下，「选取指示器」会显示「HTML 项目」一词。
17. 在选取目标容器的状态下，单击 Escape 以选取外层容器。或者，您也可以在别处单击以取消选取「影像预视灯箱显示」Widget，然后
再连按它两次：第一次选取「排版」，第二次选取较大容器。使用「选取」工具拖移容器的控制点，使目标容器在里面置中。调整容器
尺寸至宽 710 像素、高 460 像素。
18. 用「填色」选单将容器填色颜色设为棕色 (#63301B) 并将填色颜色的不透明度设为 44 (见图 45)。
21 / 52
图 45. 在「填色」选单设定容器的填色颜色与不透明度。
19. 选取容器底部的文字框，按下 Delete (Mac) 或 Backspace (Windows) 将其移除。此文字框可填入目标内容的批注，但是在本项目中
并不使用。
20. 选取容器右上角的「关闭」方块 (显示「X」)。在「关闭」方块内单击，以选取其标签并加以删除。用「填色」选单设定填色颜色为
「无」。在「填色」选单中，单击「影像」区段旁的档案夹图示，并浏览以选取名为 的档案。使用「选取」工具调整
「关闭」方块大小，以显示整个关闭图标影像。
21. 使用「选取」工具调整目标容器及触发容器的位置，将此两项目移至您要在页面上显示的位置。
22. 在选取「排版」的情况下，单击蓝色箭头按钮开启「选项」面板。在本范例中，请使用下列设定 (见图 46)：
位置：影像预视灯箱
切换效果：淡化
自动播放：停用
随机排列：停用
最初全部隐藏：停用
启用拨动：启用
在上方时触发：停用
关闭按钮：启用
编辑时显示影像预视灯箱组件：启用
在设计模式中全部显示：启用
图 46. 更新「选项」选单中的设定以控制 Widget 运作方式。
在「选项」选单以外之处单击将其关闭。至此，Widget 即已完成设定，可供测试。
22 / 52
回到顶端
在浏览器中测试「影像预视灯箱排版」Widget
1. 单击「控制」面板的「预视」按钮，或选择「档案 > 在浏览器中预视网页」，以测试「home」页面。
页面首次加载时，仅会看到大型主体影像及「Mystery Latte」讯息，因为含有视讯的目标容器已隐藏 (见图 47)。
图 47. 在浏览器中预视页面，查看访客所见画面。
3. 若您单击主体影像，就会看到影像预视灯箱窗口，且页面其他部分会变暗。外层目标容器的填色 (用的是半透明浅棕色) 会填满整个浏
览器窗口，并且显示视讯的第一格。单击视讯中央的「播放」按钮，观看视讯播放。(视讯实际上是从代管视讯档案的 YouTube 网站播
放)。当您看完视讯时，单击目标右上角的关闭按钮 (「x」图标影像) 以将影像预视灯箱关闭，并回到「home」页面。
4. 关闭浏览器并返回 Muse。
在下一个教学课程，「用 Muse 建置您的第一个网站，第 5 部分」，您将了解如何使用「标签面板」Widget，在单一页面显示更多内容。您也
将练习建立并套用段落样式，同时学习如何在文字框内使文字绕排在影像周围。
第 5 部分
新增「标签面板」Widget，以在单一页面显示多个容器
设定「卷标面板」Widget 各索引卷标的外观样式
在「卷标面板」Widget 的内容区域新增文字框
在文字框内使文字绕排在影像周围
在「用 Muse 建置您的第一个网站，第 4 部分」中，您在 Widget 容器内新增了嵌入式 HTML。您也使用了「影像预视灯箱排版」Widget，并
在浏览器内测试了影像预视灯箱的操作。在第 5 部分，您将开始使用「标签面板」Widget。「面板」Widget 对于在较小屏幕区域显示更多元
素非常有用。访客能单击「卷标面板」Widget 的索引卷标，显示各容器的内容。「标签面板」Widget 以及「折迭式」Widget 两者都能为页面
添加互动性，让访客能够选择想要展开的内容。
至此，「home」页面与「events」页面均已完成。在本节中，您将学习如何使用「标签面板」Widget 与「幻灯片展示」Widget，来设计
「about」页面。
回到顶端
新增「标签面板」Widget，以在单一页面显示多个容器
1. 开启「Widget 链接库」。单击「面板」类别来将其展开。选择「标签面板」Widget，并将其从「Widget 链接库」拖移至「about」页
面中央 (见图 48)。
图 48. 将「标签面板」Widget 拖移至页面时，其会以默认格式显示。
2. 按三次右侧最顶端的索引卷标。按第一次时，会选取整个「标签面板」，按第二次时，会选取「索引卷标容器」，按第三次时，则选取
右侧的「索引卷标」。请查看「选取指示器」，了解目前选取的是 Widget 的哪一个子元素。按下 Delete (Mac) 或 Backspace
(Windows) 删除第三个索引卷标。完成此变更后，即仅剩下两个索引卷标。在页面其他任何位置单击。
3. 再单击 Widget，选取整个「标签面板」。拖移控制点调整整个 Widget 的大小至宽 840 像素、高 645 像素。当您拖移控制点时，可
参照出现的度量数值。您也可以查看「变形」面板中「W」(宽度) 与「H」(高度) 两个字段的数值 (见图 49)。
23 / 52
图 49. 检阅宽度及高度字段，确认 Widget 调整后的尺寸。
4. 使用「选取」工具将「标签面板」Widget 移动至页面顶端附近，垂直置中。
5. 单击「控制」面板中「固定」接口的顶端中央位置，将「卷标面板」Widget 固定于此。若要了解有关固定对象使其无法卷动的详细信
息，请参阅第 7 部分。
6. 在仍然选取「标签面板」Widget 的情况下，单击左侧索引卷标以选取「索引卷标容器」(含有两个顶层索引卷标的元素)。使用「选
取」工具将中央控制点向下拖移，直到高度约为 98 像素。在「间距」面板中，如图 50 所示设定下列数值：
左侧：220
右侧：220
下方：2
间距高度：10
图 50. 在「间距」面板设定「标签容器」的间距值。
7. 完成这些变更后，使用「选取」工具将整个「标签面板」Widget 拖移至页面最顶端，使「标签面板」的顶部完全紧靠页首矩形的底
部，两者之间不留垂直间距。若有需要，您也可以放大显示，细看元素对齐状况。完成后请将放大比例设回 100%。
回到顶端
设定「卷标面板」Widget 各索引卷标的外观样式
现在您已新增「标签面板」Widget，下一部分将要更新其样式，完成两个索引卷标的设计。
1. 按三次左侧索引卷标，以选取左侧卷标。开启「状态」面板并选取「正常」状态。用「填色」选单设定填色颜色为「奶油色-菜单」。
将线条宽度设定为 0。同样在「控制」面板中，单击圆形接口底部的两个象限，启用左下及右下圆角半径。将圆角半径值设定为 100。
2. 选取「状态」面板的「鼠标指向效果」状态。将索引卷标「鼠标指向效果」状态的填色颜色设为 571E00 (您可能已将此颜色命名为
「棕色-菜单」)。请注意，当您设定「鼠标指向效果」状态的填色颜色时，「鼠标按下」状态亦将自动更新。选取「作用中」状态，将
索引卷标的「作用中」状态套用相同的填色颜色。现在「正常」状态是使用「奶油色-菜单」填色，其他三种状态则是使用「棕色-菜
单」颜色填色。
3. 再按一次左侧索引卷标，以选取卷标。选取时，「选取指示器」会显示「卷标」一词。选取「状态」面板的「正常」状态，然后使用
「文字」面板设定下列属性 (如图 52 所示)：
网页字体： Kaushan Script (或任选其他 Script 字体)
字体大小：26
颜色：#70909D (在第 3 部分中，您已将此颜色重新命名为「蓝色-菜单」)
行距：120%
对齐方式：置中
24 / 52
图 52. 更新「文字」面板的设定，为卷标文字设定样式。
3. 在依然选取标签的状态下，单击「段落样式」面板底部的「新增样式」按钮。为方便之后重复套用此格式，请将这个新的段落样式重新
命名为：标题-索引卷标
4. 当您查看「状态」面板时，在选取「正常」状态时套用至标签的格式，也会同时套用至「鼠标指向效果」及「鼠标按下」状态。选取
「作用中」状态，并且再按一次「标题-索引卷标」段落样式，以将此格式套用于「作用中」状态。至此为止，两个索引卷标的所有状
态均已设定样式。再选取一次「正常」状态。
5. 使用「文字」工具，选取左侧索引卷标的卷标文字并输入：Gallery
6. 使用「文字」工具，选取右侧所引卷标的卷标文字并输入：Our Story
7. 若您选取左侧索引卷标并查看「状态」面板，会发现最终格式已套用于每一个索引卷标与卷标。单击右侧索引卷标，注意到除了各索引
卷标的文字内容外，各状态看起来均相同 (见图 53)。
图 53. 在「状态」面板检阅每一个索引卷标的格式。
回到顶端
在「卷标面板」Widget 的内容区域新增文字框
1. 请花点时间，在「Gallery」与「Our Story」两个索引卷标之间来回切换。「Gallery」索引卷标的占位符文本与「Our Story」索引卷
标的占位符文本不同，可以看出来显示其中一个容器时，另一个即会隐藏。
2. 单击卷标为「Our Story」的右侧索引卷标。在选取右侧索引卷标的情况下，相应的内容区域会显示于其下方。此操作不论在「设计」
视图中编辑页面时，或是在在线网站时，均是相同的。这就是「标签面板」Widget 好用之处，因为您能够非常有效率地在单一页面显
示更多内容。
3. 选取「Our Story」索引卷标的内容区域。选取时，「选取指示器」会显示「内容区域」一词。选取占位符图像文件案，按下 Delete
(Mac) 或 Backspace (Windows) 将其删除。
4. 使用「文字」工具，选取现有的占位符文本页首。选取粗体的页首文字「Mauris sit amet」并将其删除。
5. 暂时从 Muse 切换至您的桌面。开启样本档案档案夹，找到名为 的档案。双击档案以在文本编辑器中开
启。拷贝页面第一部分，直至「... crafted through years of baking for friends and family.」之处。
... crafted through years of baking for friends and family.
6. 返回 Muse。使用「文字」工具，选取现有的占位符文本。将您拷贝的文字内容贴入文字框。在文字框顶端多留一行空行。
7. 保持选取文字框，使用「文字」面板选择下列设定以格式化文本：
字体：Droid Serif (或任选其他 serif 字体)
字体大小：14
字体颜色：#222222
对齐方式：靠左
行距：120%
8. 维持选取文字，单击「段落样式」面板底部的「新增样式」按钮。连双击新建的段落样式并重新命名为：本文。如此即可轻松为其他文
字内容重新套用相同格式。
9. 在「色票」面板中连双击颜色值 #222222 并将其重新命名为：凯蒂黑。
25 / 52
10. 在「控制」面板中，设定文字栏的线条颜色为 #222222 (凯蒂黑)，并设定线条宽度为 5 像素。
11. 使用「填色」选单将文字字段的填色颜色设为浅米黄色 (#F8F3E2)。 单击「影像」区段旁的档案夹，然后浏览以选取样本档案档案夹
中名为 的档案。将「符合」选单设定为「并排」。
12. 在「间距」面板中，设定左间距为 24、右间距为 15 (见图 54)。
图 54. 设定间距值，在贴上的文字复本周围建立视觉空间。
接下来，您将在对应各索引卷标的内容区域容器中新增内容。
13. 使用「选取」工具调整文字栏大小。将其拖移至容器左侧，再使用控制点放大宽度至可用内容区域空间的一半左右 (大约宽 390 像
素、高 381 像素)。
接下来，您将复制现有的文字框来建立第二个文字框，填满内容区域的右侧。
1. 使用「选取」工具，选取文字框。按住 Option (Mac) 或 Alt (Windows) ，同时将文字框复本拖移至内容区域右侧 (见图 55)。利用
画面显示的对齐参考线，确保右侧文字框已水平对齐左侧文字框。
图 55. 复制现有的文字框以在右侧建立第二栏文字框。
2. 暂时从 Muse 切换至开启 文本文件的文字编辑程序。从「Katie's Cafe has won 」开
始到结尾，将文本文件下半部全部拷贝。
3. 切换回 Muse。使用「文字」工具，在复制的右侧文字框选取所有现有文字。贴上您从剪贴簿拷贝的新文字内容。
4. 视需要使用「选取」工具调整两个文字框位置，使两者对齐并置中于内容区域的正确位置。
5. 在依然选取文字框的状态下，单击 Escape 以选取「Our Story」索引卷标的内容区域。设定线条宽度为 0，并将填色颜色设定为
「无」。
「卷标面板」Widget 的「Our Story」索引卷标已接近完成。最后部分就是新增一张小型影像，在左侧文字框内使文字绕排在影像周围。
回到顶端
在文字框内使文字绕排在影像周围
在文字框内使文字绕排在影像周围的方法，即是拷贝并贴上影像 (而非将其置入) 至文字框内，然后使用「绕图排文」面板调整绕图排文设
定。请依照下列步骤操作：
1. 单击页面任一处或页面外部的灰色区域，以取消选取 Widget。
2. 选择「档案 > 置入」，然后浏览以选取样本档案档案夹中名为 的档案。单击「开启」以关闭「读入」对话框。
按住光标，并在页面上含有 Widget 之区域以外的地方拖移光标。藉由按住并拖移，您可调整影像大小，且画面会暂时显示目前百分
比，让您知道要置入的影像比例。在此项目中，请待影像约缩小至 42% 时放开鼠标按钮，使影像尺寸为110 像素宽、144 像素高 (见
图 56)。
26 / 52
图 56. 按住并拖移可缩小置入的影像大小至 42% 左右。
3. 选取页面上缩小的影像，以鼠标右键单击，并从显示的选单选择「剪下」。
4. 使用「文字」工具，在左侧内层的文字框内单击，位置就在以「Katie's in 」起始的第二段落第一个字符前方。在文
字框此处单击鼠标右键并从选单选择「贴上」，直接将影像贴于第二段落之前 (见图 57)。
图 57. 将影像贴入文字框的文字行内。
5. 在仍然选取影像且「选取指示器」显示「行内」一词的情况下，开启「绕图排文」面板 (单击「绕图排文」索引卷标，或视需要选择
「窗口 > 绕图排文」以将其开启)。选择中间的绕图排文选项可将影像靠左进行绕图排文，并设定「右侧偏移量」值为 15 (见图
58)。
图 58. 在「绕图排文」面板中调整绕图排文设定。
完成此变更后，「标签面板」Widget 的「Our Story」索引卷标内容即已完成。在下一节，您将学习如何在「Gallery」索引卷标的内容区域新
增幻灯片展示。
27 / 52
至此您已探索了如何设定「标签面板」Widget，请继续阅读「用 Muse 建置您的第一个网站，第 6 部分」，学习如何新增并设定「缩图幻灯片
展示」Widget。完成「about」页面的设计后，您将继续建立一组显示于「food」页面的菜单，并设定其样式。
第 6 部分
新增「缩图幻灯片展示」Widget 至页面
用「选项」面板设定「缩图幻灯片展示」Widget
调整「缩图幻灯片展示」Widget 元素的大小及对齐这些元素
测试「缩图幻灯片展示」Widget
使用段落样式设定文字框样式
使用内建的拼字检查及更新字典
更新文字框外观
显示全部
在用 Muse 建置您的第一个网站，第 5 部分中，您学会如何新增「标签面板」Widget，以在单一页面显示更多内容。您也学到如何在文字框
内，使文字绕排在影像周围。在此部分中，您将看到如何在「标签面板」Widget 的其中一个容器内，新增一个「缩图幻灯片展示」Widget，以
完成「about」页面的设计。您也将开始设计「food」页面，加入「breakfast」、「lunch」、「dinner」以及「dessert」菜单。
「幻灯片展示」Widget 的设定相当简单。「缩图幻灯片展示」Widget 让您在网站上以互动方式显示一连串的影像。它与「标签面板」Widget
类似，访客按下缩图容器 (在本范例中为缩图按钮) 后，相应的主体影像版本即会在页面它处较大的容器中显示。
您也可以建立相片收藏馆，在影像预视灯箱中显示精选内容，就像在本系列第 4 部分中加入「home」页面的「影像预视灯箱排版」Widget 功
能一样。若您要显示一组影像，并使每张较大的主体影像显示于其专属的最上层窗口，同时将页面其余部分调暗，便可使用影像预视灯箱幻灯
片展示。
在本范例中，您将建置一个相片收藏馆，沿顶端显示数个缩图影像，下方则显示单一个较大的影像。使用「选项」面板即可控制相片收藏馆的
运作与显示方式。套用「控制」面板中的设定则可设定幻灯片展示的外观样式。
回到顶端
新增「缩图幻灯片展示」Widget 至页面
由 - James Fritz 提供
提供您的专业知识给
Adobe Community Help
幻灯片展示也可以直接加入页面，但是在本范例中，您将在「标签面板」Widget 的内容区域中，嵌套一个「缩图幻灯片展示」Widget。请依照
下列步骤操作：
1. 在「设计」视图编辑「about」页面时，单击「Gallery」索引卷标即可看到内容区域容器，下方并显示其占位符内容。
2. 选取占位符内容 (内容区域内的影像框及文字框)，并将其删除。
3. 开启「Widget 链接库」并展开「幻灯片展示」区段。从列表中选取「缩图幻灯片展示」Widget，并拖移一份复本至页面 (见图 59)。
28 / 52
图 59. 将「缩图幻灯片展示」Widget 拖移至页面。
回到顶端
用「选项」面板设定「缩图幻灯片展示」Widget
当您首次新增「缩图幻灯片展示」Widget 时，会含有 1 个较大容器 (主体影像)、3 个较小缩图容器 (按钮)、2 个箭头按钮 (下一个及上一
个的导览控制)、1 个计数器，以及 1 个批注。
1. 单击蓝色箭头图标存取「选项」面板。在本范例中，您不需要「下一个」与「上一个」的箭头按钮，所以请取消选取这些项目旁的复选
框 (「上一个」和「下一个」) 将其停用。请注意，取消选取复选框后，按钮随即消失。
同时也请取消选取「批注」及「计数器」选项，仅保留缩图触发按钮及较大目标容器。浏览选项并视需要更新以符合下列设定 (如图 60 所
示)。
新主体：等比例填满框架
新缩图：等比例填满框架
切换效果：淡化
转变速度：0.5 秒
自动播放：未启用
随机排列：未启用
影像预视灯箱：未启用
启用拨动：启用
第一个：未启用
上一个：未启用
下一个：未启用
最后一个：未启用
批注：未启用
计数器：未启用
关闭按钮：未启用
缩图：启用
编辑时显示影像预视灯箱组件：启用
一并编辑：启用
29 / 52
图 60. 于「选项」面板更新「缩图幻灯片展示」Widget 的设定。
不同 Widget 提供不同选项，有些较为复杂。请花点时间检阅「选单」选项，了解可用的设定。以下略作概览：
新增影像：单击档案夹图标以浏览并选取要显示的影像。
新主体：定义较大的相片内容于目标容器中的显示方式。
等比例符合内容：相片图像文件案保持原始尺寸，即使大小不符合目标容器亦同；若影像不符合容器，则容器可能有部分空白。
等比例填满框架：调整相片图像文件案尺寸，以符合目标容器比例；可能因此裁切相片影像一部分。
新缩图：定义较小的缩图相片内容于触发容器中的显示方式。
等比例符合内容：相片图像文件案保持原始尺寸，即使大小不符合目标容器亦同；若影像不符合容器，则容器可能有部分空白。
等比例填满框架：调整相片图像文件案尺寸，以符合目标容器比例；可能因此裁切相片影像一部分。
切换效果：将目标容器中的内容以另一个目标容器取代时，所使用的动画方式。此功能也已针对触控屏幕启用，因此若您为行动装置建立网
站，访客即可拨动屏幕触发转变动画，并看到下一个内容项目。
淡化：现有容器的不透明度降低，同时新容器的不透明度增加。
水平：新容器从侧边水平滑入，覆盖过现有的容器。
垂直：新容器从侧边垂直滑入，覆盖过现有的容器。
转变速度：播放动画使用的秒数。
自动播放：此设定启用时，幻灯片展示将自动播放，而非采取交互式模式 (交互式模式需要访客按下触发按钮才能依序检视相应的目标)。设定
每个影像转变至下一个影像前所显示的秒数。
随机排列：启用时，影像将以随机顺序显示，而不依序循环显示缩图。
影像预视灯箱：启用此选项后，幻灯片展示会在显示目标容器中的内容时，以覆盖层使页面它处变暗。关闭影像预视灯箱后，会再显示完整页
面。
启用拨动：启用此选项且网站含有平板计算机或手机版面以在行动装置显示网页内容时，Widget 的交互式组件将支持触控屏幕手势。
「组件」区段：
第一个：启用此选项时，将显示「第一个」导览按钮。
上一个：启用此选项时，将显示「上一个」导览按钮。
下一个：启用此选项时，将显示「下一个」导览按钮。
最后一个：启用此选项时，将显示「最后一个」导览按钮。
批注：启用此选项时，将显示相片收藏馆批注。
计数器：启用此选项时，将显示相片收藏馆计数器。
关闭按钮：启用此选项时，将显示「关闭」按钮。
缩图：启用此选项时，将显示缩图触发按钮。
「编辑」区段：
编辑时显示影像预视灯箱组件：启用「影像预视灯箱」选项时，选取页面上的触发之后，仅会依默认显示相应的个别目标区域。当您在
设计版面时，可利用此选项直接看到目标以利作业。此设定并不影响预视或以浏览器检视页面时的幻灯片展示方式。若未启用「影像预
视灯箱」选项，则此选项会以灰色显示。
一并编辑：此选项默认为启用，以利迅速编辑 Widget。除非您需要个别设定每个触发的外观，否则请保持启用此选项，以便使任一元
素的变更均自动套用至其他元素。
检阅可用设定后，请在「选项」选单之外的任何位置单击将其关闭。
在下一节，您将重新放置 Widget 的元素。
30 / 52
回到顶端
调整「缩图幻灯片展示」Widget 元素的大小及对齐这些元素
1. 在整个「幻灯片展示」Widget 单击，将其选取。使用「选取」工具来拖移它的控制点，调整整个「缩图幻灯片展示」Widget 的大小，
直到大约宽 790 像素、高 490 像素。您可以查看「变形」面板或「控制」面板中的「变形」字段来检查尺寸。
2. 在仍然选取「幻灯片展示」的情况下，再单击缩图容器，以选取内含 3 张缩图的容器。使用侧边的变形控制点将其拉宽，再使用「选
取」工具向上拖移整组共 3 个缩图，直到位于顶端并垂直对齐较大主体影像容器的正中央 (见图 61)。
图 61. 选取缩图的触发容器并将其重新放置到较大目标容器的上方。
拖移元素时，画面会暂时显示蓝色智能型参考线，指出缩图容器是否已对齐主体影像容器的正中央。
请依此步骤，将图像新增至相片收藏馆，同时产生相应的缩图与主体容器：
1. 单击蓝色箭头按钮开启「选项」选单。单击「新增影像...」文字旁的档案夹图标，然后浏览至您桌面上的样本档案档案夹。找到名为
gallery 的子档案夹并开启。
2. 按住 Shift，同时选取下列五个图像文件案：
3. 选取此五个图像文件案时请按住 Shift 键不放。单击「开启」以关闭「读入」对话框 (见图 62)。
31 / 52
图 62. 选取 gallery 子档案夹中的整组共五个收藏馆相片。
选取多个图像文件案时，同时也在「缩图幻灯片展示」Widget 加载内容。此方法让您可以选取多个图像文件案，并为主体影像容器中每一个较
大的新图像文件案产生对应的缩图容器按钮。
五个新影像将会新增至现有的缩图按钮中。
4. 单击「缩图幻灯片展示」Widget 以将其选取，然后单击缩图容器，之后再单击最初新增幻灯片展示时依默认显示的 3 张黑白缩图的其
中一张。将每张缩图选取后单击 Delete 键 (Mac) 或 Backspace 键 (Windows) 以移除，直到仅剩下新增的五张彩色缩图 (见图
63)。
图 63. 进入选取每一张预设的黑白缩图后，按下 Backspace 或 Delete 键将其一张张移除。
请小心勿删除整组缩图；若发生此情况，可选择「编辑 > 还原」还原前一次的操作，然后务必先单击个别缩图加以选取 (「选取指示器」会显
示「缩图」一词) 后，才能按下 Backspace 或 Delete。
5. 选取含有整组五张缩图影像的容器。使用变形控制点调整其大小，使剩余的五张缩图置中于主体影像容器上方 (见图 64)。
32 / 52
图 64. 缩图影像置中对齐影像容器。
回到顶端
测试「缩图幻灯片展示」Widget
重新放置幻灯片展示元素并移除占位符缩图影像之后，收藏馆部分即已完成。在本节，您将测试幻灯片展示以查看其显示结果。
1. 首先，在「设计」视图测试相片收藏馆。单击顶端的缩图按钮，会看到下方较大容器中显示相应的主体影像。
2. 单击「预视」，从 Muse 内查看收藏馆在浏览器的显示结果。与幻灯片展示进行互动，看看单击缩图时，相应的较大影像会如何显示。
3. 完成后，请单击「设计」以返回「设计」视图。在别处单击，然后选取整组「缩图幻灯片展示」Widget (请小心勿选取围绕其周围的
「标签」Widget)。使用「选取」工具将「幻灯片展示」置中于「Gallery」索引卷标的面板容器内。进行完这些变更之后，收藏馆部分
即已完成 (见图 65)。
图 65. 将 Gallery 置中于「标签面板」Widget 的内容区域容器中。
4. 选择「档案 > 在浏览器中预视网页」，以您的预设浏览器查看「about」页面的显示结果。
5. 测试「卷标面板」Widget 的功能。单击各卷标，查看在内容区域容器中显示的相应内容。接着，测试「Gallery」索引卷标中的幻灯片
展示。单击各个缩图按钮，确认会显示相应的较大主体影像。
33 / 52
现在，「about」页面设计已完成。
接下来，您就要加入内容并设计「food」页面。
此样本项目中的「food」页面包含 4 个区域：breakfast、lunch、dinner 及 dessert 菜单。在本节中，您将新增 4 个文字框并格式化文
本，以更新菜单的外观。
回到顶端
使用段落样式设定文字框样式
若要填入菜单，您将从外部文本文件拷贝菜单文字，然后将其内容贴入文字框。您也将建立并套用段落样式，以设定这些文字的样式。请依照
下列步骤操作：
1. 在「设计」视图中编辑「food」页面时，请用「文字」工具在接近页面顶端的页首区域下方为「Breakfast」菜单建立文字框。拖移建
立约宽 800 像素、高 440 像素的框架。
2. 暂时从 Muse 切换至您的桌面。开启样本档案档案夹，找到名为 的档案。双击档案以在文本编辑器中开
启。选取文本文件中的所有文字并加以拷贝。
3. 返回 Muse。使用「文字」工具，于文字框内单击。将您拷贝的文字内容贴入文字框。在文字框顶端多留一行空行。
4. 使用「文字」工具选取第一行文字：Fruit $1
5. 在「文字」面板中，选择下列设定以格式化文本：
字体：Droid Serif Bold (或任选其他 serif 字体)
字体大小：14
字体样式：粗体
字体颜色：#A6342A (红色)
对齐方式：靠左
行距：120%
6. 维持选取文字，单击「段落样式」面板底部的「新增样式」按钮。连双击新建的段落样式并更名为：food-header。如此即可轻松为其
他菜单的文字标题重新套用相同格式。
7. 使用「文字」工具选取下一个「breakfast」项目：Croissants $3
8. 单击名为「food-header」的段落样式，将相同格式套用至第二个「breakfast」项目。
9. 重复步骤 7 与步骤 8，选取并套用「food-header」段落样式至文字框中的每一个「breakfast」项目 (即含有美元符号的每一行)。
10. 从顶端开始，使用「文字」工具选取第一个「breakfast」项目说明：Bananas、mandarin oranges、red delicious apples、mixed
berry cup
11. 单击「段落样式」面板中所列的「内文」段落样式，以将格式套用至文字行。
12. 逐行选取「breakfast」项目下剩余的各条说明文字，并套用内文段落样式 (见图 66)。
图 66. 使用段落样式套用格式以设定菜单样式。
您亦可造访样本网站在线版本，以其设计作为参考。
若要了解有关处理文字的详细信息，请参阅 Muse 中的印刷样式一文。
回到顶端
使用内建的拼字检查及更新字典
Muse 4.0 内含「拼字检查」，能够轻松找到并解决文字框中的拼字错误。「拼字检查」平时即保持启用。它会在所有无法于字典中找到的文字
下显示红色底线 (见图 67)。
34 / 52
图 67. 可能拼错的文字均会划上红色底线。
要修正错字，请使用「文字」工具选取该字词 (连双击即可选取)，再单击鼠标右键查看建议的字词清单 (见图 68)。
图 68. 使用文字工具修正拼字。
若建议的字词中有正确项目，请按向下键或用鼠标选取要使用的建议字词，然后单击 Return/Enter 套用。若您误选了错误的字词，可以还原
变更 (「编辑 > 还原」)，然后选择其他建议字词，或使用「文字」工具编辑字词。
若标记为错字的字词仅使用一次 (例如人名或地名)，且您确定拼字无误，则无需修正。在「设计」视图中看到的红色底线并不会显示于预视、
发布或转存的网站中。
使用如公司名称或地址等常用字词时，可将该字词加入「拼字检查」字典，即不会再将其标记为错字。
请使用「文字」工具以鼠标右键单击要加入字典的字词，然后从显示的环境选单选择「新增至字典」选项。
您可以为整个网站或个别文字框设定要使用的语言 (而此亦设定「拼字检查」所使用的字典语言)。
若要设定整个网站的「拼字检查」字典，请选择「档案 > 网站属性」。单击「文字」索引卷标，在「语言」选单选择要使用的语言，然后单击
「确定」(见图 69)。
图 69. 在「网站属性」对话框中设定整个网站的语言。
有时网站项目需要以多个语言提供文字。若是如此，则可在「网站属性」中设定默认语言 (最常用者)，然后为显示不同语言的特定文字框设定
「拼字检查」语言。
若要设定个别文字框的「拼字检查」字典，请使用「选取」工具选取文字框。以鼠标右键单击并从显示的环境选单中选择「语言 > (选择要使
用的语言)」(见图 70)。
35 / 52
图 70. 在环境选单中设定所选文字框的语言。
接下来，您将更新文字框的外观。文字框与矩形及影像框相同，可以设定线条、填色及背景影像等样式。
回到顶端
更新文字框外观
在本节中，您将更新文字框的属性，使其从页面背景图像中突显出来。
1. 使用「选取」工具选取含有「breakfast」菜单的文字框。
2. 在「控制」面板中，设定线条宽度为 5、线条颜色为黑色。
3. 使用「填色」选单将填色颜色设定为您重新命名为「cream-menu」的色票 (或输入十六进制颜色值：#E9916F)。单击「影像」区段旁的
档案夹图示，然后浏览以选取样本档案档案夹中名为 的档案。单击「确定」以关闭「读入」对话框。将「符合」选单
设定为「并排显示」，然后单击页面其他任何位置以关闭「填色」选单。
4. 若有需要，请使用「选取」工具拖移文字框控制点，调整其大小至可容纳文字为止。在线范例网站的「breakfast」菜单尺寸约宽 800
像素、高 440 像素。
奶油色填色的并排背景影像，为文字框添加羊皮纸般的效果，深色线条则使其从背景突显出来。
现在您将在「breakfast」菜单顶端新增标题，为访客清楚标识。
1. 使用「文字」工具在「breakfast」菜单正上方建立文字框，对齐左上角。
2. 输入文字：Breakfast
3. 在「文字」面板中，选择下列设定以格式化文本：
网页字体： Kaushan Script (或任选其他 Script 字体)
字体大小：32
颜色：#70909D (在第 3 部分中，您已将此颜色更名为「blue-menu」)
行距：120%
对齐方式：置中
4. 维持选取文字，单击「段落样式」面板底部的「新增样式」按钮，建立新的段落样式。连双击新建的段落样式并更名为：菜单-标签。
在「breakfast」菜单上方的标签有助于用户掌握自身所在位置，使其一看就知道当前所阅读的菜单为何。完成这些变更之后，「breakfast」
菜单成品即如图 71 所示。
36 / 52
图 71. 「breakfast」菜单已套用样式且其文字内容已格式化。
在下一节中，您将复制「breakfast」菜单，然后在复制的文字框中更新其文字内容，以建立「lunch」、「dinner」及「dessert」菜单。
回到顶端
复制页面上的文字框
在前面小节中，您建立了「breakfast」菜单文字框、从外部文本文件为其填入了文字、使用段落样式套用一致的文字格式，然后透过新增并排
显示的背景影像、填色颜色及线条，更新了文字框外观。您另外也在菜单文字框上方新增了第二个文字框，建立标题以指出「breakfast」菜
单。下一步即是要复制这整组元素 3 次，建立总共 4 个菜单。
1. 使用「选取」工具选取含有「Breakfast」一词的文字框与含有「breakfast」菜单的文字框。
2. 按住 Option (Mac) 或 Alt (Windows)，同时将此两组文字框拖移至页面下方，将其复制一份。向下拖移复本时，请将其保持与原始文字框
垂直对齐 (智能型参考线将暂时显示，以指出两侧与中央是否对齐)。复制的文字框组应位于原始文字框组下方约 430 像素处 (见图 72)。
图 72. 拖移一份「breakfast」菜单复本至页面下方。
3. 使用「文字」工具，选取复制的文字字段卷标。将「Breakfast」一词更改为：Lunch。
4. 暂时从 Muse 切换至您的桌面。开启样本档案档案夹，找到名为 的档案。双击档案以在文本编辑器中开启。拷
贝第一行文字：JR $9
5. 返回 Muse。使用「文字」工具，于「lunch」菜单文字框内单击。将您拷贝的文字内容贴入文字框，取代原有的第一项餐点：
Croissants $3
6. 重复步骤 4 与步骤 5，将 档案中含有美元符号的每一行拷贝，以取代「lunch」菜单中的项目。
37 / 52
7. 继续为「lunch」菜单填入内容，拷贝 档案中的每一项说明，并在「lunch」菜单复本中的现有说明上逐一贴
上。此方法可确实保留您在文字内容套用的样式。
8. 重复步骤 1 至步骤 7，选取此两个「lunch」文字框并加以复制，向下拖移至现有「lunch」菜单下方约 430 像素处，将标签重新命名
为「Dinner」，然后拷贝 档案中的项目作为「dinner」菜单的内容。
9. 再次重复步骤 8。这次将复制的标签重新命名为：Dessert。从 中拷贝文字行，完成「dessert」菜单。
10. 使用「选取」工具视需要调整四个文字框的位置，使其垂直对齐，每个区域间隔约 120 像素 (见图 73)。
图 73. 在「food」页面上垂直对齐全部四个菜单 (「breakfast」、「lunch」、「dinner」和「dessert」)。
您或许会注意到，每次向下拖移复制拷贝时，您在第 1 部分定义的页尾区域会自动向下移动，以在页面创造更多垂直空间。因此，「food」页
面的高度会比此样本网站中的其他页面都还要长。
在用 Muse 建置您的第一个网站，第 7 部分，您将在每个菜单的上方新增锚点，以建立让访客能够迅速跳至各菜单的导览系统。因为「food」
页面较长，所以内容会根据访客按下的菜单项目垂直滚动，来显示相应的菜单。您也将探索如何使用「超链接」选单建立各种类型的连结，包
括能让访客下载 PDF 档的下载连结。
第 7 部分
使用锚点标记区域和作用中状态
将手动「水平选单」Widget 新增至页面
设定「水平选单」Widget 的选单项目样式
连结至页面中的锚点
新增可下载的档案连结
使用「超链接」选单建立电子邮件链接
放置 Photoshop 按钮
显示全部
在用 Muse 建置您的第一个网站，第 6 部分，您已学会如何新增「缩图幻灯片」Widget，以在「标签面板」Widget 的内容区域显示收藏馆。
您也建立了名为「food」页面的四组菜单 (「breakfast」、「lunch」、「dinner」和「dessert」) 并为其套用样式。在第 7 部分，您将学
习如何使用手动「水平选单」Widget 来新增锚点连结并建立页面导览，以完成「food」页面。您也会看到「超链接」选单，并学习如何建立所
有类型的连结 (锚点链接、电子邮件链接、下载连结，以及外部网页的连结)。最后，您将了解如何将对象固定在页面中，防止它们卷动 (即使
其他页面元素会随着较长的页面卷动)。
38 / 52
回到顶端
使用锚点标记区域和作用中状态
在之前的章节中，您已建立了一组双文字框 (标题和「breakfast」菜单)，然后使用段落样式来设定文字格式。接下来，您将复制该组双文字
框三次，并将每组双文字框垂直向下拖曳，以在页面建立总共四个「区域」。然后，您重新命名复制的双文字框组，因此顶端会有名为
「breakfast」的标题和「breakfast」菜单，下面接着显示「lunch」、「dinner」和「dessert」菜单 (垂直对齐)。每个菜单 (双文字框组)
上下会有间隔，每个区段相距 120 像素。
由于复制并向下拖曳菜单，「food」页面变得比网站中的其他页面都还要长。这是使用锚点标签的重要因素。如果所有的页面内容都能在不必
卷动的情况下在浏览器窗口中显示，锚点卷标的链接看起来就没有作用。
在已完成的设计中，「food」页面包含锚点连结，可让访客垂直跳至显示对应菜单的区域。想象一下，当您加入锚点标签时，就像是在页面上
贴标记。当访客按下该锚点的连结时，连结会卷动较长页面，跳至标记所在的特定区段。
您将从建立四个名为「breakfast」、「lunch」、「dinner」和「dessert」的锚点开始，这些锚点应个别对应至四个页面区域。请依照下列步
骤操作：
您首先要建立的是这 4 个锚点：Breakfast、Lunch、Dinner 和 Dessert。请依照下列步骤操作：
1. 在顶端导览区单击锚点按钮，以加载锚点工具 (见图 74)。
图 74. 单击工作区顶端的「锚点」按钮，加载第一个锚点的「置入枪」。
2. 在页面的最顶端，也就是在顶层网站导览的页首区域上方单击。如果需要，可以先暂时移开页首矩形。如果有移动页首内容，请务必在
之后将其移回原始位置。
3. 在显示的「重新命名锚点」对话框中，输入锚点名称：breakfast (见图 75)。
图 75. 命名页面顶端「breakfast」菜单的锚点。
4. 再将此步骤重复三次，单击工作区顶端的「锚点」按钮以加载「置入枪」，然后在建立「Lunch」、「Dinner」和「Dessert」区段的文
字框上方单击。命名每个锚点，使其对应页面区域：
lunch
dinner
dessert
现在您已新增总共 4 个锚点，这些锚点顺着页面垂直分散，并将用来建立跳至各区段的连结。使用「选取工具」来放置每个锚点卷标，让这些
卷标与每个包含菜单的区域前方具有相同的距离 (约 120 像素)。
注意：
第一个锚点 (位于页面顶端) 和第一个链接内容实例 (您将在下个区段中新增的手动「选单」Widget) 之间的间距量 (以像素为单位) 将会设
定「作用中区域」，造成每个区域中的作用中状态产生变化。例如，如果第一个锚点置于页面最顶端，而「选单」Widget 置于其下方 120 像
素，当访客向下卷动页面时，其后续区域选单项目的作用中状态也会在更新 120 像素后，再出现选单。
您在下个步骤新增手动「选单」Widget 后，请将这些按钮链接至锚点卷标以建立导览，让访客可在页面向下跳至每组菜单来阅读。
回到顶端
将手动「水平选单」Widget 新增至页面
在本系列的第 2 和第 3 部分，您已学会如何将「水平选单」Widget 新增至网站。依预设，选单会自动连结至您在「规划」视图中新增的页
面，并会自动为您新增页面名称。
39 / 52
在本节中，您将新增另一个「水平选单」Widget，以作为单一页面的子选单使用。您将把选单类型设为手动，如此您就能输入选单项目卷标，
并自行设定链接。此方法非常实用，特别适合用于让使用者能够在网站的特定区段或特定页面内浏览。在本样本项目中，您将把手动选单项目
链接至您在前一节建立的锚点。请依照下列步骤新增手动「水平选单」Widget：
1. 在「设计」视图中编辑「food」页面时，开启「Widget 链接库」。
2. 在「Widget 链接库」面板中，单击「选单」区段将其展开。选取「水平选单」Widget，并将其从面板拖移至「food」页面的页面顶
端。
当您第一次将 Widget 拖移至页面时，它会显示默认的格式，并自动在选单项目中显示页面名称。您将更新「选项」面板中的设定来设定选
单，如此您就能输入自定义的选单项目以链接至「food」页面中的区域。
3. 在选取「水平选单」Widget 的状态下，单击蓝色的箭头按钮以开启「选项」面板。使用「选单类型」选单选取「手动」。其他设定均
维持预设，如图 76 所示。
图 76. 在「选项」面板中将「选单类型」更新为「手动」。
4. 单击「选项」选单外部的任何位置，将其关闭。
现在，您在检阅「水平选单」Widget 时，可以看到 [名称] 的单一通用选单项目取代了原先显示的自动选单项目。下一步是手动新增选单项
目。
5. 在「水平选单」Widget 上按三下来选取标签。使用「文字」工具选取默认的卷标文字，并输入新的菜单项目名称：Breakfast (见图
77)。
图 77. 更新手动选单中第一个选单项目的名称。
6. 切换回使用「选取」工具。请注意，选单项目左侧、底部和右侧会显示三个加号 (+) 图示。单击「Breakfast」菜单项目右方的加号
(+)。这项操作会在右方新增新的选单项目。
7. 选取新选单项目中的卷标。使用「文字」工具，选取「Breakfast2」默认卷标文字，并将其更新为：Lunch。
8. 重复步骤 6 与步骤 7，建立总共 4 个菜单项目，卷标为「Breakfast」、「Lunch」、「Dinner」和「Dessert」。
在下一节，您将更新选单项目的外观。
回到顶端
设定「水平选单」Widget 的选单项目样式
由于「一并编辑」选项已在「选项」面板中启用，您对单一选单项目做的变更会自动套用至其他选单项目。请依照下列步骤修改选单外观：
1. 选取「Breakfast」按钮菜单项目。「选取指示器」会显示「选单项目」一词。如果您不小心选取了选单项目中的卷标，请按 Escape。
2. 选取「状态」面板的索引卷标或选择「窗口 > 状态」来开启「状态」面板。选取「正常」状态。
3. 使用「填色色卡」，将选单项目「正常」状态的颜色设定为您重新命名为「cream-menu」的色票 (或输入 16 进位颜色值：#E9916F)。
4. 在「控制」面板中，单击左下角和右下角的圆角半径按钮，然后对圆角半径值输入 100，以在顶部建立圆角方形按钮。这些按钮类似您
先前在第 5 部分设定「卷标面板」Widget 的卷标样式时建立的按钮。
5. 在「状态」面板中，选取「鼠标指向效果」状态。使用「填色色卡」，将选单项目「鼠标指向效果」状态的颜色设定为您重新命名为
「cream-menu」的色票 (或输入 16 进位颜色值：#E9916F)。请注意，「鼠标按下」的状态会自动更新。
在本范例中，「正常」、「鼠标指向效果」和「鼠标按下」状态均会显示相同的外观。此设计使用不同的颜色来表示作用中状态，提示访客目
前正在检视哪个页面区域。接下来，您要将新颜色套用至「作用中」状态：
6. 在「状态」面板中，选取「作用中」状态。单击「控制」面板中的「填色色卡」，并选取您在第 3 部分重新命名为「棕色-菜单」的颜
色，或输入颜色值：#571E00。
现在，您已更新了选单项目在每个状态的外观，接下来要更新标签。
7. 按三次「Breakfast」项目来选取卷标。在「状态」面板中选取「正常」状态后，单击「段落样式」面板中的「标题-索引卷标」样式以
将其套用。此样式与您在第 5 部分用来设定「卷标面板」Widget 的样式相同。
40 / 52
当您将格式套用至「正常」状态的标签后，其他状态会自动配合更新。本设计对所有状态使用相同标签，因此手动「水平选单」Widget 的样式
设定现在已完成。现在只要将 Widget 放入页面并固定其位置，就大功告成。
8. 使用「选取」工具重新放置「选单」Widget，使其顶端边缘紧贴页首矩形的底部。请确定页首和「手动」选单 Widget 之间没有任何空
隙。
9. 在全选「选单」Widget 的状态下，单击「控制」面板中「固定」接口的正上方固定位置。这可确保在向下卷动较长页面时，手动选单
不会直接从其在页首正下方的位置移开。固定的「选单」Widget 为该页面建立一贯的导览，让访客可轻松在区域间跳跃浏览。
在下一部分，您将使用「超链接」选单为先前建立的锚点新增连结。
连结至页面中的锚点
现在，您已在每个包含食物菜单的页面区域上新增锚点标签。您也建立了手动「选单」Widget，并新增对应至各页面区域的自定义选单项目。
在本节中，您将了解如何链接这两种元素，以在手动选单中新增锚点连结。请依照下列步骤操作：
1. 单击页面上任一处以选择该页面 (因此「选取指示器」会显示「页面」一词)。接着，双击「Breakfast」按钮。第一次按下按钮会选取
整个手动「选单」Widget，第二次则会选取「Breakfast」菜单项目。「选取指示器」会显示「选单项目」一词。
2. 单击「超链接」选单来查看网站的页面完整列表及锚点卷标。在「桌面」区段找到「food」页面，您会发现您建立的 4 个锚点标签就
列在该页面的下方。选取「Breakfast」锚点标签，将其链接至「Breakfast」菜单项目 (见图 78)。
图 78. 使用「超链接」选单将「Breakfast」锚点链接套用至「Breakfast」按钮。
3. 重复步骤 2，将「Lunch」锚点连结新增至「Lunch」菜单项目。接着再重复两次，将对应的连结指定至「Dinner」和「Desert」菜单项
目。
4. 选择「档案 > 网站属性」。在「版面」标签中，确认已核取「启用锚点连结的作用中状态」复选框。依默认，此选项在所有新网站中
皆为启用，但若您正在编辑较旧的网站，您可能需要核取该复选框。
5. 选择「档案 > 在浏览器中预视网页」。单击每个选单项目来测试是否能正确浏览「food」页面。当您单击以检视最下方的菜单
(「Lunch」、「Dinner」和「Dessert」) 时，较长的「food」页面会向下卷动，以显示含有对应锚点卷标的页面区域，但固定的「选
单」Widget 会维持在页面顶端，就在页首内容的下方。
当您单击连结以检视不同的页面区域时，请注意导览选单中所显示的对应作用中状态。例如，当您单击手动选单的「Dinner」按钮以跳
至名为「dinner」的锚点卷标的页面区域，「Dinner」菜单项目会更新以显示按钮的作用中状态。此网站功能可协助引导访客，让他们
了解正在检视哪个区段。 结束浏览器并回到 Muse。
您也可尝试上下卷动页面，以查看页面中的程序代码如何在页面在每个页面区域间移动时，侦测每个锚点卷标的位置，并更新手动选单
的作用中状态。此技巧适用于能垂直和水平卷动的页面。
注意：
页面必须要有足够的高度与宽度，才能让锚点卷标有跳至各区域的空间。若页面区域间距太小，使得内容不必卷动即可完全显示
在一个浏览窗口内，锚点卷标就不会像是跳到下一个区域。
6. 结束浏览器并回到 Muse。
在下一节，您将了解如何新增下载连结，让访客可以下载如 PDF、DOC、MP3、MOV、PSD 等文件格式，以及高画质 JPEG 档案。
秘诀：如果您和其他的设计师一起制作网站项目，您甚至可以连结至 .Muse 来源档，这样其他团队成员就可以直接从您的网站下载来源档案。
41 / 52
回到顶端
回到顶端
新增可下载的档案连结
在本样本项目中，虚构的 Katie's Cafe 在在线提供 PDF 格式的菜单，让访客能在计算机上储存复本或印出来。许多企业或餐厅都采用类似的
策略，因为当他们想要更新菜单、价目表或其他文件时，可以轻松地用相同档名上传新的 PDF 档，而不用更新连结。
1. 在「设计」视图中编辑「food」页面时，请使用「文字」工具，在「Breakfast」菜单文字框的右上角附近建立新的文字框。输入：
Download Menu。
2. 在仍选取文字框的情况下，使用「文字」面板套用下列设定：
网页字体：Kaushan Script (或任选其他 script 字体)
字体大小：14
颜色：#EEE5C4 (在第 3 部分，您已重新命名此色票颜色为「cream-menu」)
行距：57%
对齐方式：置中
3. 使用「填色」选单将填色颜色设定为「无」。单击「影像」区段旁的档案夹，然后浏览以选取样本档案档案夹中 的
档案，来设定背景影像。请确定「符合」选单是设定为「原始大小」，且「位置」为置中 (见图 79)。
图 79. 设定「填色」选单中的文字框背景影像。
4. 在「填色」选单以外之处单击将其关闭。如有需要，请使用「选取」工具重新调整文字框的大小并将其重新放置，使它位于
「Breakfast」菜单文字框右上角的正中央 (见图 80)。
图 80. 调整「Download Menu」文字框的位置，使其盖住菜单的角落。
5. 在选取文字框的情况下，使用「控制」面板中的「超链接」选单，在选单最底部的「档案」区段选择「链接至档案」项目。在显示的
「读入」对话框中，浏览以选取样本档案档案夹内名为 的档案。单击「开启」将其选取 (见图 81)。
42 / 52
图 81. 浏览以选取菜单的 PDF 版。
注意：当您使用「链接至档案」功能浏览以选取档案时，档案会变成网站资源的一部分，并在网站发布时上传，或是在转存网站时包含在网站
档案中。当您要拷贝从网站链接至站内任何本机档案夹的档案时，这是最好的做法，而且能一并拷贝网站使用的其他图像文件。
现在已新增 PDF 档案连结。若您查看「资源」面板，会发现 档案现已列为网站资源之一。
6. 使用「选取」工具选取文字框。复制「Download Menu」文字框并将其贴上，把文字框放在「Lunch」菜单的右上角。另外再重复此步骤
两次，建立「Dinner」和「Dessert」菜单右上角的复本。
在实际的项目中，您可以连结至 4 个分开的菜单档案，以提供访客 4 份不一样的可下载 PDF 档，让他们检视及打印菜单。为了进行本教学课
程，各页面区域中的「下载」按钮都会链接至相同的 PDF 檔。
7. 选择「档案 > 在浏览器中预视网页」。单击「水平」选单内其中一个选单项目，以跳到页面中对应的菜单。请注意，当您往下卷动查
看「Dinner」和「Dessert」菜单时，其他页面内容的顶端会显示页首。这是因为「food」页面使用「前景」主版页面，而该页面的页
首内容已经移至前景。
8. 单击「Download Menu」连结，查看 PDF 档案如何下载至您计算机。
依据您使用的浏览器和浏览器偏好设定而定，您会看到不同的行为。有些浏览器会在浏览器窗口内显示 PDF，有些则只会将 PDF 档下载至您的
桌面，让您使用 Acrobat Pro 或 Acrobat Reader 开启档案。
回到顶端
使用「超链接」选单建立电子邮件链接
如果您已经使用 Muse 一段时间，应该会注意到「超链接」选单最近已重新组织为数个区段，让您更容易找到可以连结的页面名称与项目。在
本节中，您将进一步了解「超链接」选单的结构，以及其筛选选单列表项目的方式。您也会了解如何新增电子邮件地址链接。
1. 单击「超链接」选单的向下箭头来显示完整列表 (见图 82)。
43 / 52
图 82. 展开的视图会显示「超链接」选单中的清单。
「超链接」选单由数个区段构成。「最近使用的链接」会显示所有加入网站的外部网站连结。您可在「超链接」字段中直接输入任何 URL，以
连至外部网页。
「桌面」区段包含目前网站的页面。请注意，您新增至「food」页面的的锚点卷标，会照字母顺序列在「food」页面下方。这表示您可在网站
的多个页面上建立相同名称的锚点，且在设定连结时仍可轻易地辨识它们。在此样本网站中，只有一个「桌面」版面，但如果网站包含适用于
手机或平板计算机的其他版面，这些区段就会显示对应的页面集。
尾端的「档案」区段包括「链接至档案」功能，以及所有新增至目前网站的可下载文件。由于您不久前加入了 档案的连
结，该文件名会列在此区段，以便轻易地重新连结至网站中多个页面的通用资源。
如果您想要新增电子邮件链接 (亦即，按下连结时，访客的电子邮件客户程序会开启并进入撰写新邮件状态，邮件的「收件者」字段会自动填
入电子邮件地址)，请在「链接」选单字段中输入电子邮件地址，并在地址前面加上「mailto:」，例如：
mailto:email@
有时候，「超链接」选单中的项目列表会变得很长，在网站较大时很难浏览。如果您正在寻找特定网页、锚点、档案或要连结的外部 URL，请
在「超链接」选单字段中输入链接的头几个字母，系统即会显示相符的项目。这可让您快速筛选清单，找到要链接的项目。
在下一节，您将学习如何新增网站外部其他网页的绝对链接。
回到顶端
放置 Photoshop 按钮
由 - James Fritz 提供
提供您的专业知识给
Adobe Community Help
44 / 52
至此为止，您已学习到如何新增及链接至锚点标签，以跳至页面的特定区段。您也已了解如何使用「档案」选单新增页面和可下载文件的连
结。在本节中，您将了解如何新增外部网站 URL 的连结，以连至您网站外的网页。您也可以探索如何放置包含图层的 PSD 档案，来找出在
Muse 中建立不同状态按钮的其他方法。请依照下列步骤操作：
1. 在「规划」视图中，双击「A-主版」主版页面，以在「设计」视图中编辑。
2. 选择「档案 > 置入 Photoshop按钮」。使用「读入」对话框，浏览至样本档案档案夹，并找到包含社交媒体图标的三个 PSD 文件。这
些档案的名称为：
social-google+.psd
3. 选取 档，然后单击「开启」。「Photoshop 读入选项」对话框即会出现 (见图 83)。
图 83. 对话框可让您选择按钮在每一种状态下要显示的 PSD 图层。
以本例来说，PSD 档图层已照正确顺序设定，会根据需要显示「正常状态」、「鼠标指向效果状态」及「鼠标按下状态」。不过请注意，如果
您想要变更每种状态的外观，您可以使用每种状态旁的选单，设定要显示 PSD 文件的哪一个图层。每种状态右方的预视窗口可帮助您选择正确
的外观。
本范例中，按钮不需要「作用中」状态。此 Facebook 按钮会让访客跳至 Facebook 网站，所以不需要「作用中」状态。使用含有预先设计图
层的 Photoshop 按钮，是为网站建置自定义导览列的另一种方式。
4. 单击「确定」，关闭「Photoshop 读入选项」对话框，然后在靠近页面中央的右侧部分单击，以放置 Photoshop 按钮。
5. 重复步骤 2-4，放置其余两个 social-google+.psd 和 的图标影像。使用「选取」工具使影像在网页右侧垂直对
齐 (见图 84)。
图 84. 将 Facebook、Google+ 和 Twitter 图示放在「A-主版」页面上。
您将这些影像放在「A-主版」页面上后，这些影像会自动显示在链接至此主版 (「主要」和「前景」) 的所有主版页面上。
回到顶端
新增外部网站连结
现在社交媒体图标按钮都已就位，您接下来要新增每个社交网站的外部连结。
45 / 52
1. 选取 Facebook 图示，然后在「链接」选单字段中输入 (或拷贝/贴上) Katie's Cafe Facebook 页面的连结，像这样：
/KatiesCafeSF
2. 选取 Google+ 图标，然后输入 (或拷贝/贴上) 下列 Katie's Cafe Google+ 页面连结：
/u/1/117861444/posts
3. 选取 Twitter 图标，然后输入 (或拷贝/贴上) 下列 Katie's Cafe Twitter 页面连结：/katiescafesf
4. 再单击 Facebook 图示将其选取。单击蓝色底线文字，亦即位于「超链接」选单左方的连结。在显示的对话框中，选取标为「在新窗口
或卷标中开启链接」的复选框。
5. 重复步骤 4 来设定 Google+ 和 Twitter 连结，使其也在新的浏览器窗口中开启。
这是一般网页设计的习惯，亦即前往同一网站其他网页的连结，将在同一浏览器窗口中开启 (Muse 预设如此运作)，前往其他外部网站网页的
链接，则在新窗口或新索引卷标开启。
另请注意「工具提示」字段。如果您在此字段输入了说明文字，当访客将光标置于链接的元素上时，就会显示您输入的文字。本范例中，工具
提示为：Follow Katie on Facebook。加入这些工具提示是很好的做法，因为这也能让使用屏幕阅读程序的访客更容易存取网站。
在下一节，您将了解如何固定社交媒体图标，让它们永远在浏览器窗口的相同位置显示，不受较长页面及其余内容卷动的影响。
回到顶端
将对象固定至浏览器窗口
当您放置影像或使用其他方法在网页中新增图稿时，您可使用「选取」工具和Download Menu调整其位置。当您移动影像时，该影像会相对于
页面中现存的其他元素 (影像、文字及媒体) 移动。您也可以移动其他元素，但整个页面的形式就像手册或海报，页面中的项目是在单一平面
上。如果页面很长 (包含很多直式内容)，访客往下卷动时将无法看到页面顶端的影像。
您可能在检视网站时看过固定的对象；它们是「永恒的」项目，永远在同一个位置显示。它们看起来就像浮在其余页面内容之上。
当您使用「固定」工具时，您实际上是从页面串流中移除影像。您是将影像设定在相对于浏览器的特定位置，而不是将它与其他相对的页面元
素一起配置。固定的影像看起来有「黏性」，无论其他页面元素如何卷动，它永远停留在同一个位置 (像是右上角或靠近底部的地方)。如果访
客重新调整浏览器的大小，固定的影像还是会永远停留在相对于浏览器窗口的固定位置。
您可将固定想成是从页面设计中「剥离影像」，再将影像贴回浏览器，就像把便条纸钉在软木板上。如果访客重新调整浏览器的大小，固定的
元素会移动，以维持其相对于浏览器的固定位置。如果访客只是水平或垂直滚动页面内容，固定的元素就不会移动。
请依照下列步骤使用「固定」工具：
1. 在「A-主版」页面于「设计」视图中开启的情况下，使用「选取」工具选取 Facebook 图示。
2. 在「控制」面板内的「固定」接口中，单击右上角的固定位置。此设定会将元素「钉」在其目前位置的右上角。
3. 重复步骤 1 和 2，将 Google+ 和 Twitter 图标按钮固定在它们的右上角位置，使它们不会随着页面其他元素的卷动而在浏览器窗口
中移动。
4. 单击「规划」检视页面缩图。请注意，现在所有页面都包含了 3 个社交媒体图标，因为您已将它们加入主版页面。
5. 在「规划」视图中，双击「food」页面，以在「设计」视图将其开启。如果页面已经开启，请单击「food」页面的索引卷标，使其成为
作用中的页面。选择「档案 > 在浏览器中预视网页」，即可在浏览器中检视页面。
6. 单击「Dessert」菜单项目，跳至长页面下方的「Dessert」菜单区段。请注意，当其余的页面元素卷动时，3 个社交媒体图标仍会停留
在网页右侧的原始位置，因为它们已经固定 (见图 85)。
请继续阅读在 Muse 建置您的第一个网站，第 8 部分，了解如何将多组对象组成群组，使它们如单一元素般运作。您将新增嵌入式 Google 地
图，让访客看到 Katie's Cafe 的位置，完成「visit」页面。完成网站后，您会了解到将网站上传至主控服务器 (由 Business Catalyst 提
供) 来在线发布，是件多么容易的事，接下来您就可以与客户和同事一起分享进行中的工作。
第 8 部分
将对象组成群组并将群组贴入适当位置
使用嵌入式 HTML 显示 Google 地图
在「网站属性」面板中新增网址列图示
建立免费试用版发布网站
46 / 52
此后的目标
在「用 Muse 建置您的第一个网站」的第 7 部分，您已学会如何新增锚点标签，并将它们链接至手动「水平选单」Widget 中的选单项目。您
也学会如何将元素固定在页面中，防止它们卷动。此外，您也了解了如何新增档案连结，让访客能下载文件。在第 8 部分，您将学习如何把对
象组成群组及使用群组，以在页面贴上内容集。您也将使用更多的嵌入式 HTML。这次，您要在「Visit」页面中新增交互式 Google 地图。最
后，您将了解如何新增「网址列图示」，完成网站的最终编修，并将试用版网站发布至内附的主控服务器。
回到顶端
将对象组成群组并将群组贴入适当位置
就像使用 InDesign 和其他设计程序，您可将数个对象组成一个群组，使它们如单一的单元般运作。在本节中，您将建立数个元素 (置入的影
像和文字框) 组成的设计，并了解如何将它们组成群组，使其如单一项目般容易放置或拷贝。请依照下列步骤操作：
1. 在「规划」视图中，双击「home」页面缩图以在「设计」视图中将其开启。
2. 选择「档案 > 置入」。浏览以选取范例档案档案夹内名为 的档案。单击「开启」，关闭「读入」对话框，然
后在靠近「home」页面底部 (「影像预视灯箱排版」Widget 下方及页尾上方) 的地方单击，以放置全尺寸的图形。
PNG 档案已设为较低不透明度，因此半透明的花朵设计可让并排的背景影像穿透显示出来。
3. 再次选择「档案 > 置入」。这次，浏览以选取名为 的影像。单击「开启」，然后在正上方的花瓣单击以放置影像。
4. 在选取汤匙影像的情况下，按住 Option (Mac) 或 Alt (Windows) 复制汤匙影像，再立即将其拖移至中央右侧的花瓣。再次重复此动
作，复制中央的汤匙影像，并将复制的复本拖移至左侧的花瓣。使用「选取」工具将 3 个汤匙放在适当位置，如以下图 88 所示。
图 88. 将 3 个汤匙影像放在设计页面的 3 朵花瓣上。
5. 使用「文字」工具，在中央花瓣上画一个文字框，然后输入下列文字：
Katie's Cafe
Noe Valley
123 Elizabeth Street
MON–FRI 6AM–10PM
SAT–SUN 7AM–10PM
6. 在「文字」面板中，套用下列设定以格式化文本：
字体：Droid Serif (或任何 serif 字体)
字体大小：14
字体颜色：#222222 (您在第 5 部分已将此颜色重新命名为「凯蒂黑」)
字体对齐方式：置中
行距：120%
7. 接下来，选取最后两行 (起头为英文的星期)，再将字体颜色设为红色 (#A6342A)。
8. 使用「选取」工具选取文字框。按住 Option (Mac) 或 Alt (Windows) 复制文字框，再立即将其拖移至右侧花瓣的汤匙影像上方。再
次重复此动作，复制中央的文字框，并将复制的复本拖移至左侧的花瓣。使用「选取」工具放置 3 个文字框，让它们在 3 个汤匙的上
方对齐，如图 89 所示。
47 / 52
图 89. 重新放置 3 个地址，使其显示在设计页面最上面 3 朵花瓣中 3 个汤匙的上方。
9. 切换至「文字」工具。选取左方地址，将其变更为：
Katie's Cafe
Laurel Heights
800 Spruce Street
MON–FRI 5AM–12AM
SAT–SUN 9AM–1AM
10. 使用「文字」工具选取右方的地址，将其变更为：
Katie's Cafe
Cole Valley
301 Carmel Street
MON–FRI 7AM–10PM
SAT–SUN 9AM–10PM
现在设计已完成，您将选取元素并将它们组成群组。
11. 使用「选取」工具单击并拖移整个花朵设计，请务必同时选取置入的花朵影像、3 个汤匙影像及 3 个文字框。单击鼠标右键，并从出
现的选单中选择「群组」。如果需要，您也可以选择「对象 > 群组」。
请注意，将一组对象组成群组后，「控制面板」左上角的「选取指示器」会显示「群组」。
12. 拷贝选取的群组。单击「规划」返回「规划」视图，再双击「Visit」页面的缩图，在「设计」视图中将其开启。选择「编辑 > 就地贴
上」，将整个元素群组放在相同位置。
您可从此简短范例中看出，当您完成一项设计并想将此设计当作单一元素使用时，群组非常有帮助，它可让您将设计重新摆放在页面上的其他
位置，或将其拷贝并贴到不同的页面。
除了群组，您可能也会发现当您将设计定稿后，「锁定」功能也很有帮助。在群组或选取的一组元素上单击鼠标右键，从出现的环境选单中选
择「锁定」来进行锁定。(另一种方式是，选取「对象 > 锁定」)。锁定功能可确保您不会意外移动或删除页面中任何已定稿的元素，因为您无
法选取它们。如果之后需要更新锁定的元素，请选择「对象 > 解除锁定页面全部内容」。
将花朵设计贴至「Visit」页面底部后，就完成了部分网页内容。下一节中，您将继续编辑「Visit」页面并新增交互式地图接口，以协助客户
找出最近的咖啡馆。
回到顶端
使用嵌入式 HTML 显示 Google 地图
您已从本教学课程学会如何将 HTML 嵌入页面，并在「events」页面中加入 Tumblr 部落格。您也已了解如何在「影像预视灯箱排版」Widget
中贴上嵌入式 HTML，以便在访客按下按钮时，于预视灯箱窗口中显示 YouTube 视讯。在本节中，您将探索「Google 地图」网站提供的另一种
嵌入式 HTML 类型。请依照下列步骤操作：
1. 如果「visit」页面尚未在「设计」视图中开启，请单击「规划」，再双击「visit」页面的缩图来编辑。
此原始码是从 网站拷贝的。您可以建立通往单一地址的自定义地图 (本范例中是多个地点)。这是免费的服务，您只需提供
一个地址 (或多个地址) 再按下「建立地图」按钮即可 (见图 90)。
48 / 52
图 90. 单击「建立地图」，以根据您输入的地址产生地图。
建立地图后，「Google 地图」接口会让您输入标题和说明。接下来，您可以单击「链接」按钮存取程序代码。选取「贴上 HTML 以嵌入您的网
站」标签字段提供的 HTML 程序代码，接下来就可以返回 Muse，将 HTML 嵌入网页 (见图 91)。
图 91. 使用「Google 地图」接口产生地图的 HTML 程序代码。
在本教学课程中，您不需要自行建立新地图。如果您想自己测试，可以输入任何地址建立地图，并拷贝程序代码来进行实验。假如您只是想单
纯测试地图运作的方式，可以使用一些预先产生的 HTML 程序代码。
2. 拷贝以下的原始码：
3. 将原始码贴到「visit」页面顶端。使用「选取」工具在页面靠近顶端的部分垂直置中摆放嵌入的 HTML，让地图的四分之一与页首区域
重迭。请确定地图与地图下方的花朵图形之间有保留一些空间，这样您才能加入文字叙述。
4. 使用「文字」工具在嵌入的地图下方拖移建立一个文字框。拷贝以下文字并将其贴到文字框内：
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.
5. 使用「文字」面板套用下列设定，以设定文字样式：
字体：Droid Serif (或任何 serif 字体)
字体大小：14
字体颜色：#222222 (您在第 5 部分已将此颜色重新命名为「凯蒂黑」)
字体对齐方式：靠左
行距：120%
加入地图叙述后，就完成了「visit」页面。
6. 选择「档案 > 在浏览器中预视网页」，以查看「visit」页面在浏览器中的显示结果(见图 92)。
49 / 52
图 92. 完成的「visit」页面包括一个功能齐全的 Google 地图。
请注意，嵌入的 HTML Google 地图是交互式的。您可以在窗口中单击箭头平移地图，也可以单击 + 和 - 按钮进行缩放。
现在网站中的所有页面都已设计完成。在本教学课程剩下的部分，您将了解如何对网站做最后编修，以及发布免费的试用版网站。
回到顶端
在「网站属性」面板中新增网址列图示
网址列图标是个小巧的正方形影像，您可以自行建立、将其新增至网站及上传至个人化的书签和 URL。虽然网址列图示的运作依据您使用的浏
览器而有不同，但当您检视网页时，网址列图标通常会显示在浏览器的网址列上，就在网站的 URL 旁边。多数时候，当网页加入书签时，它也
会显示在网页名称的旁边，或显示在包含加载网页的索引卷标内。您可以使用任何影像编辑程序，例如 Photoshop 或 Illustrator，来建立正
方形 (比例一致) 图像文件，作为网址列图示档案使用。本教学课程已提供一个 PNG 档案。
请依照下列步骤，将网址列图示新增至网站：
1. 选择「档案 > 网站属性」。随即会显示「网站属性」面板。
2. 在「版面」标签中，单击「网址列图示」区段右方的档案夹图示。使用出现的「选择网址列图标影像」对话框浏览样本档案档案夹，选
取名为 的档案 (见图 93)。
图 93. 在「网站属性」中设定 档案。
3. 单击「开启」来关闭「选择网址列图标影像」对话框并选取档案。接下来，单击「确定」，关闭「网站属性」对话框。
4. 选择「档案 > 在浏览器中预视网站」。在浏览器窗口顶端，可看到网址列图标显示在网址列中。如果网站已加载索引卷标中，您可能
也会看到网址列图标显示在索引卷标上。您可将页面加入书签，看看图标如何在书签列表的页面名称旁显示。
现在网站已完成，下一步是将网站上传至提供的 Adobe Business Catalyst 主控服务器。
回到顶端
建立免费试用版发布网站
完成网站设计后，下一步是发布网站。发布程序非常的简单和直觉。第一次启动 Muse 时，您需输入 Adobe ID 登入。您将使用相同的用户名
称和密码，来发布您所有的 Muse 网站。
1. 单击「控制」面板左上方的「发布」连结。出现的「发布」面板可让您输入网站名称，并选择暂时的 URL (见图 94)。
50 / 52
图 94. 输入您想用于试用版网站的网站名称和 URL。
2. 单击「确定」，开始发布程序。
可能需要几分钟，才能将档案上传至远程服务器。网站完成上传后，网站首页会在新的浏览器窗口中显示。
3. 单击网站导览顶层的连结，以观看页面并与 Widget 互动。检阅所有页面，确保元素都如预期般显示。记下需要修正的问题。
4. 完成后，关闭浏览器并回到 Muse。
更新后的「发布」面板会显示「确定」按钮和「管理」链接，当您准备将网站推送上线时 (此动作包括启动付费代管计划、设定自定义的域名
以存取网站，以及加入使用者)，您可按下此按钮和链接。
已发布的网站会使用和下列网址相似的 URL。您将使用此网址在浏览器中存取页面，并与其他人分享在线网站：
发布试用版网站后，您可以复制网址列的 URL，将连结寄给您的客户，让他们检阅上线的网站。这比寄 PDF 原型或电子邮件附件更好，因为他
们可在浏览器中预视网站设计。客户可看到互动功能如何运作，并核准页面的作业范例。
当您的客户或同事检阅试用版网站后，他们可能会要求变更。
如果您要更新现有的试用版网站，您可以开启 .muse 档，继续编辑页面。完成更新后，再按一次「发布」。
这次，如果您要用新的变更覆写现有的试用版网站，请选择「上传：仅修改的档案」(见图 95)。
图 95. 选择选项，仅更新新的内容。
回到顶端
此后的目标
若要了解有关使用 Muse 设计网站的详细信息，请查看 Muse 快速入门教学课程。请一并阅读Muse 搜索引擎优化 (SEO) 策略。
别忘了查看Muse 教学课程页面，可找到更多书面教学课程，也请造访Muse 活动页面，以存取实时网络研讨会和录制的教学课程视讯。
请查看每日最佳 Muse 网站页面，从其他使用 Muse 建立的设计取得灵感，另外也请造访 Muse Widget 收藏馆，深入了解 Widget 的使用方
式。
51 / 52