设计 Web 站点

要设计 Web 站点,您需要确定站点中页面之间的相互关系并创建应用于整个站点的一致设计。

Web 站点导航是一个用于设计和创建 Web 站点的工具。借助 Web 站点导航,您可以创建由具有统一主题(布局和样式)的多个 Web 页面组成的 Web 站点。布局定义页面组件的位置;例如,通过使用页面模板,可以指定 Web 站点中的导航栏始终位于每个页面的顶级。样式使用级联样式表(CSS)定义页面的外观。可从 Web 站点导航为 Web 站点中的所有页面指定 CSS,也可以在页面模板中定义 CSS。一旦设计好 Web 站点,就可以使用许多 Web 工具(包括 Page Designer)来创建各个 Web 页面。

可以将 Web 站点导航用作文件关系的可视映射。Web 站点导航将按层次结构显示站点结构,它的所有层次都是从首页开始的。

分层的站点结构
可以通过确定 Web 项目中 Web 页面之间的关系来创建站点结构。为了创建 Web 项目中文件之间的关系,应按照将页面添加至 Web 站点导航的顺序,在首页和它的子代页面之间创建链接。一旦确定了首页的子代页面,则会为子代页面重复此过程。在上面的示例中,索引页面是首页。产品页面和反馈页面是索引页面的子代。销售页面是产品页面的子代。

将所有链接的页面添加至站点结构后,该过程就完成了。Web 站点导航按照建立子代页面和同代页面的顺序显示。对于在开发时对站点结构进行布局,以及制作站点时生成站点访问者使用的导航,Web 站点导航都是非常理想的。

设计 Web 站点包括两个主要活动:
  1. 确定页面之间的相互关系
  2. 创建一致的 Web 站点设计

确定页面之间的相互关系

在使用实际的页面填充此设计之前,用于创建新的 Web 站点的方法需要您了解 Web 站点和页面的关系。Web 站点就是许多 Web 页面组合起来的分层设计和组织。Web 站点具有一个高级目标并且每个 Web 页面都是为满足此高级目标而服务的。

为了创建 Web 页面之间的相互关系,或者设计 Web 站点,首先必须创建包含所有 Web 应用程序资源的 Web 项目。然后创建 Web 站点结构。

为了创建 Web 页面之间的相互关系,或者设计 Web 站点,请执行以下操作:
  1. 创建或导入 Web 项目。
  2. 创建 Web 站点结构

创建一致的 Web 站点设计

通过创建一致的 Web 站点设计,在 Web 站点的所有 Web 页面中设计一致的外观。控制 Web 站点的公共外观的最好方法是执行以下操作:
  1. 创建页面模板

    页面模板是可用来在 Page Designer 中创建新的 HTML、XHTML、JSP 或 Faces JSP 页面的模式。每个新页面都类似于页面模板并且通常该页面中有一部分是用来添加特定于该页面的信息。借助页面模板,可以使整个 Web 站点保持一致的外观。可对各个页面进行一致的格式化,或者在每一个页面上使用相同的图形。例如,Web 站点中的每个页面都会有公司徽标和相同的标题。如果对页面模板进行更改,在保存已更新的页面模板时,使用该页面模板的页面将自动更新。Web 站点可使用多个页面模板。可通过创建站点范围的样式表从页面模板链接至 CSS 文件。

  2. 定义 Web 站点样式

    级联样式表(CSS)是单个文件,此单个文件可用来确保整个 Web 站点具有一致的样式,因为 Web 页面和 CSS 是单独维护的。每次更新 CSS,更改都会自动应用到链接该 CSS 的站点的所有 Web 页面中。

要了解站点布局和结构的设计,请参阅以下教程:

教程:设计 Web 站点的布局和结构。此教程将指导您完成设计简单动态 Web 站点以将 Web 页面链接至数据库的步骤。

相关概念
Web 站点导航
Web 项目
级联样式表(CSS)设计器
相关任务
Web 站点开发
定义 Web 站点策略
创建或导入 Web 页面和 Web 资源
创建 Web 站点结构
创建页面模板

反馈