ASP.NET 2.0入门经典3
时间：2026-01-19
ASP.NET入门经典
3.1 静态页面设计（1） 一个设计成功的网站应该易于使用、直观而且表示清晰。开发人员的工作是确保所开发的站点不仅仅在功能上是正确的，而且以一种有意义的方式表现出来。在设计好站点的基本结构之后，就需要决定怎样呈现信息和用户界面元素。
在VWD的协助下，http://www.77cn.com.cn具有一些用于设计和布局页面的强大工具。回忆一下，您已经通过从VWD的工具箱中拖放控件的方式创建了一些内容很简单的页面。设计一个站点显然会涉及到多得多的拖放操作，但有些方法可以简化这个过程。
本章讨论如下内容： ● 创建和布局静态页面
● HTML和VWD中的HTML查看器
● 服务器控件和动态内容
● Design View下的配置控件
● Web控件库中可用的控件
● 向页面添加动态导航控件，让这些控件运行而无需编写任何代码 如果曾经编写过HTML代码，那么对本章中的某些内容会比较熟悉，但VWD提供的用于编写HTML的工具集相当复杂，所以还是有必要学习并体验这些工具带来的新鲜感。
3.1 静态页面设计
术语静态表示页面只是用于查看的，图3-1显示了一个示例，Internet上有很多这样的页面(想像一下只有文本、或者只有一系列图片的HTML页面)—— 开发人员并不总是需要让站点的每个页面上都包含一个用于提交信息的表单、或者响应用户的输入。依据定义，静态页面包含不会发生改变(或者至少不会频繁发生改变)的内容。假设有一个私人站点，其中有一个“About Me”页面—— 可能有时会修改这个页面的内容(例如搬家、换工作或者结婚)，但总体而言，每年最多只会修改几次。
ASP.NET入门经典
图 3-1
静态页面让作者想起了1995年前后的Web—— 那个时候我浏览过的大多数站点都很简单、普通，为不同的布局编写HTML表格足以占用我数个下午的时间。下面是一个简单的练习—— 创建一个非常简单的页面并在HTML视图中研究这个页面的代码，查看HTML元素是怎样组织的。
启动VWD！这个练习不需要什么思考—— 只要按照每个步骤操作，同时好好体验这项技术就可以了。
(1) 首先，如果已从http://www.77cn.com.cn下载了本章的基础代码，那么这些代码将会有所帮助。确保将该基础代码放置在
C:\BegASPNet2\Chapters\Begin\Chapter03\Samples文件夹下。
(2) 打开VWD并从主菜单中选择Open Web Site。在弹出的对话框中，选择Chapter03文件夹并单击Open(如图3-2)所示。
图 3-2
ASP.NET入门经典
(3) 在右边的Solution Explorer中(如图3-3所示)，右击Chapter03 site并选择Add New Item。
图 3-3
(4) 在弹出的Add New Item对话框中，选择一个名为StaticHTMLPage.htm的新HTML页面，并单击Add(如图3-4所示)。
图 3-4
(5) 切换到Design View并输入一些文本，如图3-5所示。
ASP.NET入门经典
图 3-5
不用在意具体的文本—— 这只是一个简单的示例，没有必要将该页面在Web上发布。
(6) 接下来，从工具栏中选择Layout→Insert Table向页面添加表格。将表格设置为2行2列，如果喜欢可以设置边框和间距(padding)，如图3-6所示。
(7) 在获得表格之后，就可以在每个表格单元中添加内容了。试着在一个单元格中添加一些文本，然后从VWD窗口左边的工具箱的HTML面板中拖放一个图片标记到页面上，如图3-7所示。
图 3-6
ASP.NET入门经典
图 3-7
在设计区中添加表格之后，可以单击屏幕底部的<table>按钮单独选中页面上的这个元素(如图3-8所示)—— 开发人员可以修改屏幕右边Properties窗口中的属性值从而改变表格的间隔和边框等属性。
图 3-8
(8) 单击屏幕底部的Source按钮并看到由VWD产生的HTML代码(如图3-9所示)。稍做修改即可为图片添加一些样式和链接。
ASP.NET入门经典
图 3-9
(9) 为了完成这个示例，作者添加了一些文本和图片。下面的代码是页面完成后的版本，可以从http://www.77cn.com.cn下载到该代码—— 注意<body>标记的style属性：
<body style="color: darkolivegreen; font-family: georgia">
This is a simple static web page with an image and some interesting
information
about some places I have been:<br />
<br />
<table cellspacing="3" cellpadding="3" border="1">
<tr>
<td>
<img src="azoreschurch.jpg" height="100" /><br />
A church near Faja Grande, a small town on the western-most edge
of Flores - one of the 9 islands in the Azores.</td>
<td>
ASP.NET入门经典
<img src="budapest.jpg" height="100" /><br />
A view of old parts of Budapest (Hungary) across the Danube.</td>
</tr>
<tr>
<td style="height: 192px">
<img src="sirmione.jpg" width="100" /><br />
A castle on the end of a peninsula on the shores of Lake Garda,
Italy.</td>
<td style="height: 192px">
<img src="bullring.jpg" width="100" /><br />
Selfridges at the Bullring shopping centre - a truly remarkable piece
of architecture in Birmingham, …… 此处隐藏：4729字，全部文档内容请下载后查看。喜欢就下载吧 ……
ASP.NET 2.0入门经典3.doc
将本文的Word文档下载到电脑
