练习 1.4:设计 Web 站点的外观

演示

在开始设计 Web 站点之前,必须完成练习 1.3:使用 Web 页面填充 Web 站点

作为一个整体,组成 Web 站点的 Web 页面应该具有相似的可视设计和布局。各个页面应该是相互关联的,这样 Web 站点才能结合一个整体。在开始一个项目之前最好是首先考虑 Web 站点设计,然后创建各个 Web 页面。否则,Web 站点可能只包括几个零乱的 Web 页面,没有组织或明显的可视关系。

创建 Web 站点的通用外观的最好方法是使用页面模板。页面模板是可以用来控制站点的所有页面上的公共元素的单个文件。在将模板应用于页面之后,可以通过只在模板上进行一次更改来使将来的设计更改所花的精力最少;然后,更改将应用于使用该模板的所有页面。

页面模板设计为具有公共区域和内容区域。公共区域是使用页面模板的所有页面共有的共享区域,这对于每个页面的相同元素(例如,站点条幅和导航区域)是很有用的。对于每个页面,内容区域将是不同的。在将模板应用于各个页面之后,可以编辑那些页面中的内容区域以添加特定于该页面的信息。页面元素(例如,特定于特定页面的文本和图像)是出现在页面模板的内容区域中的一些元素。在模板中,您可以根据需要创建很多内容区域和公共区域。

页面模板控制站点布局外观的方式与使用样式表控制站点布局外观的方式很不相同。更多地了解页面模板与样式表之间的差别

对于本教程,我们将创建页面模板并定义一些内容区域和公共区域,以便为整个“分类信息”站点设计一致的外观。此页面模板将确保每个页面看起来都类似于以下设计外观:

基本站点布局

创建新的页面模板

  1. 在“项目资源管理器”视图中,右键单击项目名称 ClassifiedsTutorial。
  2. 从弹出菜单中选择新建 > 页面模板文件。“新建页面模板文件”向导打开。
  3. 接受缺省文件夹(/ClassifiedsTutorial/WebContent)。这是创建模板文件之后它所在的位置。
  4. 在“文件名”字段中输入模板文件的名称。对于本教程,将该文件命名为 template。注意,生成的文件的全名将为 template.jtpl。
  5. 确保选择 HTML 作为标记语言。
  6. 选择包含 JSP 的模板作为模型
  7. 取消选择配置高级选项复选框。
  8. 单击完成。新模板便在 Page Designer 中打开。当空白模板打开时,会有一个对话框提醒您必须至少将一个内容区域添加至该模板。单击确定以关闭该对话框。

将一些元素添加至空白模板

既然已经创建了模板,就需要将一些元素添加至空白模板。
  1. 首先应删除文本“将内容放在此处”。
  2. 对页面模板的结构进行布局的其中一种最容易的方法是使用不可视的表。通过此方法,可以指定要以不同方式使用的页面的各个部分,并且可以控制对象在页面上的布置。
    1. 在“选用板”视图中,通过单击 HTML 标记抽屉来展开该抽屉。
    2. 组件从选用板拖到空白模板上。“插入表”对话框打开。
    3. 对于此模板,需要 3 行和 1 列。在字段中输入 3,而在字段中输入 1
    4. 然后,单击确定。该表就会出现在模板页面上。
  3. 该表最初是很小的。需要编辑该表的属性以调整它的大小和结构。
    1. 右键单击该表并选择属性以打开“属性”视图。
    2. 在“属性”视图中,单击选项卡。
    3. 对齐字段中,选择居中。这将使表位于页面中央。
    4. 需要增大表的总体大小,以便模板的结构将根据显示页面的屏幕大小而扩展。否则,页面的设计将以固定大小出现,可能会导致在小屏幕上显得非常大,而在大屏幕上显得非常小。在表宽度表高度字段中,输入 90 并选择百分号(%)。
    5. 因为您不想要表的轮廓真正出现在页面上,所以还需要将边框设置为 0 像素。Page Designer 将以虚线来显示不可视的表边框。
  4. 因为您想要将用来声明 Web 站点名称和视件的条幅出现在每个页面的顶部,以使站点整体结构很紧凑,所以需要在此布局表中为它格式化一定区域。另外,虽然您可能会使用图形设计器来为站点创建徽标或条幅图像,但是在此模板中可以添加文本来作为条幅的占位符。
    1. 选择表中的顶部单元格。
    2. 选择了此单元格之后,在“属性”视图中的 TD 选项卡上指定高度70 像素。如果您知道创建的模板需要容纳图形设计器创建的条幅图形,则可以指定此单元格的大小与条幅图形的大小完全相同。
    3. 在“属性”视图中的 TD 选项卡上,还要在下拉菜单中将颜色设置为灰色。如果想要使用另一种颜色,可以使用吸管工具来检取屏幕上任一位置的颜色,也可以在字段中输入 RGB 值(如 #808080,它表示灰色)。
    4. 单击顶行中的任何位置,并输入欢迎使用“分类信息”!
    5. 因为缺省文本很小并且很难看清楚,所以需要增大字体大小。选择整个短语并单击格式 > 字体
    6. 要使站点具有报纸一样的外观,将字体选择为 Courier。对于大小,选择 6,对于颜色,选择白色,以便在该单元格的“灰色”背景衬托下显得很突出。
    7. 然后,单击确定
    8. 要使条幅文本居中,再次选择该文本并单击格式 > 对齐 > 水平居中
  5. 为了让用户能够访问不同的页面,在条幅下面需要有一行链接。稍后您将添加用于导航的选项卡,但现在应设置第二行的格式以为按钮腾出空间。
    1. 选择表中的第二个单元格。
    2. 通过在“属性”视图中的 TD 选项卡上输入 70 像素的高度来将此单元格设置为与条幅单元格大小相同。
  6. 内容将位于第三行。需要确保内容将与该行的顶部对齐。
    1. 选择表中的第三行。
    2. 在“属性”视图的 TD 选项卡上,对垂直对齐选择顶部

添加内容区域

您需要一个模板区域来显示每个页面的具体内容,比如在 filtered_records 页显示搜索结果,在 new_record 页则显示填写新内容的表单。既然已经为站点定义了公共结构和颜色方案,因此,您可以添加内容区域了。
  1. 在“选用板”视图中,单击页面模板抽屉。
  2. 内容区域组件拖到第三行中。各个页面将在此处提供具体内容。“为页面模板插入内容区域”向导打开。
  3. 可以通过单击确定以接受内容区域名称的缺省值 bodyarea。内容区域名称允许您为不同内容区域指定不同的名称以便于组织。例如,如果您设计的站点的每个页面上都有两个内容区域,则可以将使用主要内容填充的区域命名为 bodyarea 并且将使用搜索结果填充的区域命名为 searcharea。如果需要将页面模板应用于已存在的页面,这也是很有帮助的,原因是可以按标记来指定现有页面的区域以填充模板的特定内容区域。内容区域被插入到表单元格中。
  4. 保存对页面模板所作的更改。

基本模板结构现在看起来应该类似于以下样本:

基本页面模板。

现在,已经创建了页面模板,并为 Web 站点定义了一些公共区域和内容区域。您可以开始进行练习 1.5:将页面模板应用于 Web 站点了。

使用条款 | 反馈

(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.