搜索
AdobeMuseCC官方教程简体中文汉化版Darksun编辑1/52用Muse建造您的第一个网站第一部分安装软件及设定样本项目建置网站地图编辑「A-主版」页面将并排显示背景影像设定为浏览器填色使用设定为100%宽度的元素将单一影像置入页面上使用参考线来定义页面的页首与页尾区域显示全部在本教学课程中，您将会熟悉AdobeMuse工作区，并了解如何在不用撰写任何程序代码的情况下建置一个功能健全的网站。「用Muse建置您的第一个网站，第1部分」包括协助您开始使用Muse的说明。您将学习如何使用主版页面、Widget、Photoshop按钮以及链接。在浏览本教学课程时，您可以透过检阅Katie'sCafe实际上线网站来随时查看完成的网站会是什么样子。回到顶端安装软件及设定样本项目1.下载并安装最新版本的Muse。2.下载样本档案。3.解压缩ZIP档案，并将名为katiesCafe的档案夹储存到您的桌面上。4.启动Muse。「欢迎」画面即会出现。选择「新增网站」(见图1)。图1.在「欢迎」画面选取建立新网站的选项。「新增网站」对话框即会出现。您将会使用此接口来编辑套用于整个网站的设定。5.将栏数设定为12。在「栏」字段中输入数字12，或单击字段旁的向上箭头来增加目前的值(见图2)。变更完此值之后，其他值会自动更新。图2.更新「新增网站」对话框中的栏数。注意：在本教学课程中，您将学习如何在Muse中针对桌面计算机制作您的第一个网站。请注意，「初始版面」选单预设为「桌面计算机」，因此您无需变更。未来，当您想要使用适用于智能型手机及平板计算机的其他版面来建置网站时，您可以使用此选单来选择要先设计的版面。在关闭「新增网站」对话框之前，请先花点时间来检阅标记为「黏性页尾」的新选项。此选项默认为启用。在大多数情况下，您会想要在建置网站时将黏性页尾选项保持启用，因为它会使页尾保持在所需位置，即使浏览器窗口比网页设计大很多也是如此，就像它在AppleCinemaDisplay显示器上显示一样(见图3)。2/52图3.「黏性页尾」选项默认为启用。例如，当您利用大型监视器在浏览器中预视Muse网站，并缩小未启用「黏性页尾」的页面时，您会发现，如果您使页面内容相对于浏览器窗口而言太小，页尾下方的区域便会显示浏览器窗口。而若启用「黏性页尾」选项，则无论访客桌面计算机监视器的分辨率与尺寸为何，页尾内容都会与浏览器窗口的底部保持齐平(见图4)。图4.启用了「黏性页尾」的缩小网站(左)与未启用「黏性页尾」的网站(右)比较图。对于此样本网站项目以及在大多数情况下，您都需要在「新增网站」对话框中保持启用「黏性页尾」选项。6.单击「确定」储存您的更改，并关闭「新增网站」对话框。7.选择「档案储存网站」。在「另存AdobeMuse档案为」对话框中，输入网站的名称：katiesCafe.muse。导览至您要储存此样本项目的位置(例如您桌面计算机中的katiesCafe档案夹)，然后单击「储存」。注意：katiesCafe样本档案档案夹包含一个样本项目的已完成版本，名为katiescafe-final.muse。如果需要，您可以在将您的项目版本储存为katiesCafe.muse之后双击.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)。3/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.单击「控制」面板中已连结的「浏览器填色」这几个字。单击「影像」区段旁的档案夹图示，然后浏览以选取样本档案档案夹中名为bg-tile.png的档案。单击「开启」来设定背景影像(见图9)。4/52图9.使用「浏览器填色」面板来设定将显示在浏览器窗口中的背景影像。请注意，依照预设，「符合」选单设定为「并排显示」。这样可以确保背景影像将会重复，同时水平与垂直并排显示，以为浏览器窗口填色。3.单击「浏览器填色」面板外部的任何位置，将其关闭。网站发布时，您设定为并排显示背景填色的原始小影像只会在浏览器中加载一次，并排显示的背景影像会提供解决方案来根据需要覆盖页面的较大区域，而不会影响网站的下载速度或效能。4.在「控制」面板中，单击「填色」色卡并将页面的填色颜色设定为「无」(包含红色对角线的白色色票)。接下来，您将要新增图形以建立将显示在所有网站页面的页尾。回到顶端使用设定为100%宽度的元素设定为100%宽度的项目将会为浏览器水平填色，无论访客的浏览器窗口调整为多宽。如果您将页面元素设定为也与浏览器窗口的顶部和底部边缘对齐，填入实色的对象或并排显示的资源也会展开，以符合可用空间。1.使用「矩形」工具，在页面底部附近绘制一个宽度与页面宽度相同，高度约为250个像素的矩形。2.选取此矩形，将线条宽度设定为0。当选取此矩形时，您会知道，因为左上角的选取指示器会显示「矩形」一词(见图10)。图10.使用「线条」字段来将所选矩形的线条设定为0。3.单击「控制」面板中的「填色」一词，来开启「填色」选单。使用「填色」选单将颜色设定为无(包含红色对角线的白色色票)。单击「影像」区段旁的档案夹图示，并将矩形的背景影像设定为footer-tile.jpg。在「符合」选单中，将选项设定为「水平并排」，这样可使影像跨X轴从左到右并排显示。4.拖移矩形的转换控制点，将其置于可见区域的最下方，并调整宽度以与页面的左右两侧以及下方对齐。您将会看到一个红色的边框暂时显示，指示矩形何时设定为「100%宽度模式」(见图11)。图11.拖移矩形以将其与浏览器窗口的下方及左右两侧对齐。回到顶端将单一影像置入页面上接下来，您将要透过直接将图像文件案置入页面上来新增图像文件案，而不是将背景影像设定至页面或矩形。Muse工作区的工作方式与Illustrator及InDesign类似，您都需要先加载置入影像，然后再单击您想要该影像显示的页面。1.选择「档案置入」，或使用键盘快捷方式：Command-D(Mac)或Ctrl-D(Windows)来开启「读入」对话框。2.浏览以选取样本档案档案夹内名为made-with-muse.png的档案。单击「开启」选择该档案，然后关闭「读入」对话框。单击页面底部附近的位置，来置入影像。在本例中，您是想要以完整大小置入影像，因此只需单击即可。不过