corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

创建基于 CSS 的固定页面布局 - 第 1 部分

撰稿人：Winston Prakash

在本教程中，您将使用 NetBeans Visual Web JSF 框架来创建基于 CSS 的固定页面布局。您将使用组件面板中的不同布局面板以及其他 HTML 元素来完成页面布局。

目录

本页上的内容适用于 NetBeans IDE 6.0 和 6.1

要学习本教程，您需要具备以下软件和资源。

软件或资源 要求的版本
NetBeans IDE Web & Java EE 版本 6.1 或 6.0
Java Development Kit (JDK) 版本 6 或
版本 5
JavaServer Faces 组件/
Java EE 平台		 1.2（带有 Java EE 5*）或
1.1（带有 J2EE 1.4）
GlassFish 应用服务器 V2
Travel 数据库 无版本要求

* 要利用 NetBeans IDE 的 Java EE 5 功能，请使用完全符合 Java EE 5 规范的应用服务器，例如 GlassFish V2 UR2 应用服务器。如果使用的是其他服务器，请查阅发行说明和常见问题解答，了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

NetBeans IDE 6.1 用户的注意事项：

  • NetBeans 6.1 提供了一些用于创建项目的新选项，对于这些选项，可以保留其缺省设置。例如，可以将“使用专用的文件夹来存储库”复选框保留为取消选中状态。
  • NetBeans IDE 6.1 具有按需绑定功能。如果组件需要编写 Java 代码，则必须立即手动在 Visual Web JSF 应用程序中为组件添加绑定属性。要执行此操作，请右键单击每个组件，然后选择“添加绑定属性”。有关详细信息，请参见 On-demand Binding Attribute Wiki（按需绑定属性 Wiki）。

创建应用程序

在本教程中，您将创建一个基于 CSS 的单页 Web 应用程序。首先，按照下图所示的布局结构来构造一个页面。

基本布局结构

  1. 创建一个使用 Visual Web JSF 框架的 Web 应用程序。将项目命名为 com.samples.layout，并将缺省源包命名为 fixedpagelayoutex。

    注意：NetBeans 6.1 提供了一些用于创建项目的新选项，对于这些选项，可以保留其缺省设置。例如，可以将“使用专用的文件夹来存储库”复选框保留为取消选中状态。

    将在可视设计器中打开 Page1.jsp 文件。

  2. 在“项目”窗口中，展开“Web 页”节点，右键单击 "Page1.jsp"，然后选择“重构”>“重命名”。

    将打开“重命名”对话框。

  3. 在“重命名”对话框中，键入 PageLayout1 作为该页面的新名称。选中相应的选项以对注释应用重命名，然后单击“重构”。

    在“项目”窗口中以及可视设计器的标签中，该页面的名称将发生更改。

  4. 单击 "JSP" 标签以打开 JSP 编辑器。将以下 HTML 代码添加到 <form> 组件中。

    代码样例 1：编辑 JSP。 
    <div id="container">
      <div id="header">
        Header
      </div>
      <div id="leftBar">
        Left Bar
      </div>
      <div id="content">
        Main Content
      </div>
      <div id="rightBar">
        Right Bar
      </div>
      <div id="footer">
        Footer
      </div>
    </div>
  5. 在“项目”窗口中，右键单击 "resources" 文件夹，然后选择“新建”>“层叠样式表”。

  6. 在新建层叠样式表向导中，键入 layout 作为文件名，然后单击“完成”。

    将在“项目”窗口的 "resources" 节点下显示 layout.css。
  7. 返回至 PageLayout1.jsp 的“设计”视图。将一个链接组件从组件面板的“高级”类别拖放到可视设计器中。
  8. 在“导航”窗口中选择该链接组件。在“属性”窗口中，将其 URL 设置为 /resources/layout.css。
  9. 在“项目”窗口中，双击 "layout.css" 以在可视设计器中将其打开。

  10. 将以下 CSS 规则添加到 layout.css 中。

    代码样例 2：添加 CSS 规则。 
    #container {
      margin:auto;
      width: 760px; 
      background: #ffffff;
    }

    #header {
    background: #DDDDDD;
    }

    #leftBar {
    float: left;
    width: 150px;
    background: #EBEBEB;
    }

    #content {
    float:left;
    width:450px;
    background-color: #cdcde6;
    }

    #rightBar {
    float:right;
    width: 160px;
    background: #EBEBEB;
    }

    #footer {
    clear:both;
    background:#DDDDDD;
    }


    请特别注意，CSS 属性将以蓝色突出显示。它们负责将容器 (
    ) 放在正确的位置。页脚 CSS 规则具有 clear:both 属性，该属性用于提示浏览器应该清空页脚两端（不允许两端存在浮动元素），因此应该总是将页脚放在其他浮动元素的下方。
  11. 要获得边框，请在“导航”窗口中选择 "div:container"，然后将其 style 属性的“边框”设置为 solid、5 像素宽，并将缺省颜色保留为黑色。
  12. 右键单击项目节点，然后选择“运行”以部署应用程序。浏览器应显示与下图类似的页面：
    13. 部署应用程序

添加页眉内容

首先，我们将在页面中添加页眉，然后再添加页眉内容。

  1. 将一个布局面板组件从组件面板的“布局”类别拖放到可视设计器中的 header <div> 上。

    注意：布局面板的缺省大小为 128 x 128 像素。

  2. 打开 JSP 编辑器，然后从 header <div> 中删除内容 Header。

  3. 在可视设计器中选择布局面板。在布局面板的“属性”窗口中，单击 style 属性旁边的省略号 (...)。

    将打开样式编辑器。

  4. 在布局面板的样式编辑器中，将高度设置为 175px，将宽度设置为 760px。

    注意：宽度与 layout.css 中指定的 container <div> 的宽度相同。

  5. 使用样式编辑器设置布局面板的背景图像。

    如果没有页眉图像，可以从此处下载一个。
  6. 单击“确定”保存所做的更改。

  7. 在“属性”窗口中，将 panelLayout 属性设置为“网格式布局”或“流式布局”。

    注意：如果选择“网格式布局”，则可以更轻松地在页面上放置其他组件。如果希望使用“流式布局”，则必须使用其他布局组件来设置组件的位置。

  8. 将一个静态文本拖放到布局面板上，然后将其 text 属性设置为 Fixed Page Layout 1。使用样式编辑器更改文本的样式。

  9. 运行应用程序。应用程序应该与下图类似。

    包含页眉图像的已部署页面

添加左边栏内容

接下来，我们将在页面左侧添加一个导航栏。为了保持内容的简单性，我们将仅添加超级链接。

  1. 将一个网格面板组件拖放到 leftBar <div> 上。

    注意：网格面板的缺省大小为 128 x 128 像素。在网格面板中添加组件后，网格面板将放弃初始大小。

  2. 在 JSP 编辑器中，从 leftBar <div> 中删除内容 Left Bar。
  3. 将几个超级链接组件从组件面板的“基本”类别拖放到网格面板中。查看“导航”窗口，确保所有超级链接都位于网格面板中，并根据需要重新排列它们。

  4. 运行应用程序。应用程序应该与下图类似。

    包含左边栏的已部署页面

添加右边栏内容

与左边栏一样，我们也将保持右边栏内容的简单性。我们将添加一些文本和一幅图像。

  1. 将一个组面板组件从组件面板的“布局”类别拖放到 rightBar <div> 上。

    注意：与其他面板一样，组面板组件的缺省大小也为 128 x 128 像素。在组面板中添加组件后，组面板将放弃初始大小。

  2. 在 JSP 编辑器中，从 rightBar <div> 中删除内容 Right Bar。

  3. 将一个静态文本组件从组件面板的“基本”类别拖放到组面板中，然后在“属性”窗口中更改其 text 属性。

    • 注意：也可以像添加文本一样来添加 HTML。请务必取消选中静态文本组件的 escape 属性。
  4. 将一个图像组件从组件面板的“基本”类别拖放到组面板中。在“属性”窗口中，将其 url 属性设置为任意图像。如果没有图像，可以从此处下载一个。

  5. 运行应用程序。结果应该与下图类似。

    包含左右边栏的已部署页面

添加页脚内容

现在，我们将向页脚面板中添加一些居中对齐的超级链接。

  1. 将一个组面板组件从组件面板的“布局”类别拖放到 footer div 上。
  2. 在 JSP 编辑器中，从 footer <div> 中删除内容 Footer。
  3. 将几个超级链接组件从组件面板的“基本”类别拖放到页脚面板上。在“属性”窗口中更改它们的 text 属性。
  4. 在可视设计器中选择组面板组件。在“属性”窗口中，将其 separator 属性设置为 "|"。

  5. 运行应用程序并查看结果。应用程序应该与下图类似。

    包含页脚的已部署页面

在主要内容面板中添加内容

这是最后一步，也是非常重要的一步。在此步中，我们将添加用于存放主要内容的面板。

  1. 将一个布局面板组件从组件面板的“布局”类别拖放到 content div 上。
  2. 在 JSP 编辑器中，从 content <div> 中删除内容 Main Content。
  3. 从布局面板的属性表单中，将宽度设置为 100%。现在，布局面板应包括整个 Main Content <div>。
  4. 在“属性”窗口中，将“页面布局”模式设置为“网格式布局”，以便在可视设计器中放置组件。

  5. 按住布局面板组件底部的大小调整句柄，将布局面板的大小调整为内容将占据的最大区域。按“刷新”按钮。

    注意：如果希望主要内容面板随着内容的增多而加大，则应当使用组面板组件，而不是布局面板组件。但是，组面板组件不支持网格式布局模式，因此您应使用不同的布局组件在流式布局模式下放置组件。

  6. 运行应用程序。应用程序应该与下图类似。

    已部署的应用程序

小结

在本教程中，您创建了一个 Web 应用程序，该应用程序具有基于 CSS 的固定页面布局。此外，还使用样式编辑器更改了基本组件和布局组件的属性。

另请参见
本页的最新修改时间：2008 年 4 月 15 日

Bookmark this page

del.icio.us furl simpy slashdot technorati digg
Companion
Projects: 		MySQL Database Server   GlassFish Community: an Open Source Application Server   Open Solaris  Open JDK: an Open SourceJDK   Mobile & Embedded Community     Sponsored by 
Sponsored by Sun Microsystems