welcome - 2008-6-21 10:03:00
简介网站的概念性设计和布局通常是使用原型图像文件进行的。原型图像是一种高分辨率的单一图像文件（通常为 JPEG 格式），用于快速传递网站的设计和布局信息。原型图像有助于在生成任何 HTML 之前尽早获得客户和最终用户对网站设计的重要意见和建议。使用原型图像始终面临的挑战是：如实地复制代码中的所有图像设计详细信息是一个冗长的过程。
使用 Adobe Illustrator 等图形设计软件程序，可轻松生成单个网站的多个原型。这些原型是与客户进行沟通、开发情节提要以及与最终用户一起测试设计概念的重要工具。确定设计后，即可将原型图像用作构建网站的基础。
通过将原型图像用作描摹图像，FrontPage 2003 简化了构建网站的过程。描摹图像显示在“设计”视图工作区的后面，可进行水平和垂直调整以使其适当地在页面内排列。可降低不透明度（描慕图像的透明度）以便更好地区分页面元素与原型图像。
创建原型图像的最佳作法好的网站设计通常需要与客户及其最终用户反复交流对网站原型的看法。大多数图形设计软件包都能够快速生成使用各种网站布局和配色方案的原型。最佳设计会考虑易用性和公众吸引力等因素。
创建原型图像有助于在单独的图层中维护按钮、横幅及其他网页元素，从而可以单独调整和修改这些图层。完成设计后，可将这些图层折叠成一个平面文件（通常为 JPEG 格式）。
创建原型图像时请记住以下目的：
创建网站开始构建网站之前，应准备所有要使用的图像。理想情况下，可直接从原型图像本身抓取横幅和按钮。您可能还希望使用 FrontPage 2003 为网站创建新的级联样式表 (CSS)，以反映原型中的颜色和字体属性；应在创建原型时记录这些信息。要了解有关 CSS 的更多信息，请参阅在网站中使用级联样式表（英文）。
现在开始创建网站本身。在 FrontPage 2003 中创建一个新页面并添加样式表后，即可在“设计”视图中将原型图像显示为描摹图像。
定义描摹图像
使用 Adobe Illustrator 等图形设计软件程序，可轻松生成单个网站的多个原型。这些原型是与客户进行沟通、开发情节提要以及与最终用户一起测试设计概念的重要工具。确定设计后，即可将原型图像用作构建网站的基础。
通过将原型图像用作描摹图像，FrontPage 2003 简化了构建网站的过程。描摹图像显示在“设计”视图工作区的后面，可进行水平和垂直调整以使其适当地在页面内排列。可降低不透明度（描慕图像的透明度）以便更好地区分页面元素与原型图像。
创建原型图像的最佳作法好的网站设计通常需要与客户及其最终用户反复交流对网站原型的看法。大多数图形设计软件包都能够快速生成使用各种网站布局和配色方案的原型。最佳设计会考虑易用性和公众吸引力等因素。
创建原型图像有助于在单独的图层中维护按钮、横幅及其他网页元素，从而可以单独调整和修改这些图层。完成设计后，可将这些图层折叠成一个平面文件（通常为 JPEG 格式）。
创建原型图像时请记住以下目的：
- 原型图像应准确反映最终用户将看到的内容，包括浏览器和任何操作系统元素（如 Microsoft Windows 任务栏）。
- 原型图像的大小应反映目标用户的屏幕分辨率。如果您计划将原型的任何部分重新用作网站中的结构元素（如横幅和按钮），请确保原型图像的分辨率足以支持目标屏幕分辨率。
- 记下所用颜色的十六进制值；还要记下文本的字体系列、大小和样式。
创建网站开始构建网站之前，应准备所有要使用的图像。理想情况下，可直接从原型图像本身抓取横幅和按钮。您可能还希望使用 FrontPage 2003 为网站创建新的级联样式表 (CSS)，以反映原型中的颜色和字体属性；应在创建原型时记录这些信息。要了解有关 CSS 的更多信息，请参阅在网站中使用级联样式表（英文）。
现在开始创建网站本身。在 FrontPage 2003 中创建一个新页面并添加样式表后，即可在“设计”视图中将原型图像显示为描摹图像。
定义描摹图像
- 确保您位于“设计”视图中。
- 在“视图”菜单上，指向“描摹图像”，然后单击“配置”。
- 在“描摹图像”对话框中，单击“浏览”，选择要用作描摹图像的原型图像，然后单击“插入”。
- 可以对描摹图像偏移量进行调整使其以适当方式排列；当原型包含不是网页组成部分的其他元素（如浏览器工具栏）时需要进行调整。调整 X 和 Y 偏移值，使描摹图像中网页的左上角与“设计”视图的左上角对齐。
- 使用描摹图像时，您可能希望调整图像的不透明度。例如，如果您希望查看正在构建的网页，而又不想看到慕图像，可以移动滑块以将不透明度调整为所需级别，降低描摹图像的不透明度。
- 单击“应用”，预览描摹图像。
- 重复步骤 4、5 和 6 以得到想要的效果，然后单击“确定”。
- 如果可以在“设计”视图中看到原型图像，接下来即可开始设计网页了。
- 在“布局表格和单元格”任务窗格中，选择 FrontPage 2003 中最接近描摹图像结构的预定义结构化网页布局。要显示“布局表格和单元格”任务窗格，请在“视图”菜单上，单击“任务窗格”。然后单击任务窗格顶部的箭头，最后单击“布局表格和单元格”。有关使用此功能的更多信息，请参阅使用布局表格和单元格创建结构化网页布局。
- 调整表格中单元格的大小并插入其他布局表格，以反映描摹图像的结构。图 1 显示了根据描摹图像调整网页布局（以蓝线表示）的过程。
图 1：在“设计”视图中使用描摹图像及布局表格和单元格轻松修改原型的布局。
- 向布局中插入图像、按钮和其他结构元素，使这些元素与描摹图像相符。图 2 显示了其中添加了与描摹图像相匹配的横幅和一些按钮的网页。
图 2：将描摹图像中的相应部分用作参考线，将单个元素插入到适当位置。请注意，字母 W 的图像没有对齐。可使用 FrontPage 图像工具将该图像置于描摹图像中 W 的位置上。
- 创建其他布局表格和单元格或调整页边距和单元格边距值，根据描摹图像精确调整布局。
- 完成设计后，关闭描摹图像来查看结果。要关闭描摹图像，请在“视图”菜单上，指向“描摹图像”，然后单击“显示图像”。