《ASPNET 20入门经典3》由会员分享，可在线阅读，更多相关《ASPNET 20入门经典3（47页珍藏版）》请在金锄头文库上搜索。
1、3.1 静态页面设计（1）一个设计成功的网站应该易于使用、直观而且表示清晰。开发人员的工作是确保所开发的站点不仅仅在功能上是正确的，而且以一种有意义的方式表现出来。在设计好站点的基本结构之后，就需要决定怎样呈现信息和用户界面元素。在VWD的协助下，ASP.NET具有一些用于设计和布局页面的强大工具。回忆一下，您已经通过从VWD的工具箱中拖放控件的方式创建了一些内容很简单的页面。设计一个站点显然会涉及到多得多的拖放操作，但有些方法可以简化这个过程。本章讨论如下内容： 创建和布局静态页面 HTML和VWD中的HTML查看器 服务器控件和动态内容 Design View下的配置控件 Web控件库中可
2、用的控件 向页面添加动态导航控件，让这些控件运行而无需编写任何代码如果曾经编写过HTML代码，那么对本章中的某些内容会比较熟悉，但VWD提供的用于编写HTML的工具集相当复杂，所以还是有必要学习并体验这些工具带来的新鲜感。3.1 静态页面设计术语静态表示页面只是用于查看的，图3-1显示了一个示例，Internet上有很多这样的页面(想像一下只有文本、或者只有一系列图片的HTML页面) 开发人员并不总是需要让站点的每个页面上都包含一个用于提交信息的表单、或者响应用户的输入。依据定义，静态页面包含不会发生改变(或者至少不会频繁发生改变)的内容。假设有一个私人站点，其中有一个“About Me”页面
3、 可能有时会修改这个页面的内容(例如搬家、换工作或者结婚)，但总体而言，每年最多只会修改几次。图 3-1静态页面让作者想起了1995年前后的Web 那个时候我浏览过的大多数站点都很简单、普通，为不同的布局编写HTML表格足以占用我数个下午的时间。下面是一个简单的练习 创建一个非常简单的页面并在HTML视图中研究这个页面的代码，查看HTML元素是怎样组织的。启动VWD！这个练习不需要什么思考 只要按照每个步骤操作，同时好好体验这项技术就可以了。(1) 首先，如果已从下载了本章的基础代码，那么这些代码将会有所帮助。确保将该基础代码放置在C:BegASPNet2ChaptersBeginChapte
4、r03Samples文件夹下。(2) 打开VWD并从主菜单中选择Open Web Site。在弹出的对话框中，选择Chapter03文件夹并单击Open(如图3-2)所示。图 3-2(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所示。图 3-5不用在意具体的文本 这只是一个简单
5、的示例，没有必要将该页面在Web上发布。(6) 接下来，从工具栏中选择LayoutInsert Table向页面添加表格。将表格设置为2行2列，如果喜欢可以设置边框和间距(padding)，如图3-6所示。(7) 在获得表格之后，就可以在每个表格单元中添加内容了。试着在一个单元格中添加一些文本，然后从VWD窗口左边的工具箱的HTML面板中拖放一个图片标记到页面上，如图3-7所示。图 3-6 图 3-7在设计区中添加表格之后，可以单击屏幕底部的按钮单独选中页面上的这个元素(如图3-8所示) 开发人员可以修改屏幕右边Properties窗口中的属性值从而改变表格的间隔和边框等属性。图 3-8 (8
6、) 单击屏幕底部的Source按钮并看到由VWD产生的HTML代码(如图3-9所示)。稍做修改即可为图片添加一些样式和链接。图 3-9(9) 为了完成这个示例，作者添加了一些文本和图片。下面的代码是页面完成后的版本，可以从下载到该代码 注意标记的style属性：This is a simple static web page with an image and some interesting informationabout some places I have been:A church near Faja Grande, a small town on the western-most
7、edgeof Flores - one of the 9 islands in the Azores.A view of old parts of Budapest (Hungary) across the Danube.A castle on the end of a peninsula on the shores of Lake Garda, Italy.Selfridges at the Bullring shopping centre - a truly remarkable piece of architecture in Birmingham, UK.在向页面添加内容完成之后，可以
8、按下Ctal+F5查看该页面。结果页面如图3-10所示(该图与图3-1一样)。图 3-10 操作回顾在学习本章的过程中，您将更加熟悉在设计窗口中添加布局元素的技术，可以在屏幕右边的Properties窗格中修改属性，或者手工修改代码。静态元素，例如本例中使用的这些(标记内的简单文本框、表格以及图片)，在静态和动态页面中都可以使用，而且理解怎样添加和整合这些元素是创建动态Web应用程序的一部分。在这个示例中，练习了怎样使用HTML进行简单的页面布局。例如，将页面上的元素放置在HTML表格中，每个表格单元中都包含了一些文本和图片：A church near Faja Grande, a small
9、 town on the western-most edge of Flores - oneof the 9 islands in the Azores.这个页面的标记附带了一些样式，这些样式指定了页面的颜色和文本的字体：这些属性将应用于的开标记和闭标记之间的所有元素上，也就是页面上所有可见的内容。如果不熟悉这些内容，不必担心 下一小节将扼要介绍HTML，以帮助您理解这些内容。如果对HTML不熟悉，那么需要理解下面的几个基本概念： HTML文件是带有一些附加括号的可阅读的文本 在浏览网页的时候，eb浏览器知道怎样将这些括号转换为某些看起来很有趣的格式。 括号内的内容称为元素(element)，
10、但严格地说，元素通常由开标记和闭标记组成，有时在这一对标记之间会包含文本或其他HTML元素。有些元素只有一个标记。 元素带有属性，这些属性会向浏览器提供额外的信息，告诉浏览器在页面上应该怎样显示元素。下面是一个简单的HTML元素：These are my details, my favorite color, and my hobbies在这个例子中，和是描述div元素的两个标记(tag)，id=和style=是属性，这两个标记之间的文本是元素的内容。 呈现是将HTML代码转换为可视元素的过程，因此前面的代码将呈现为图3-11所示的页面。图 3-11表3-1包含了一些可能遇到的HTML元素。表
11、 3-1元 素说 明用 法 示 例 图片标记。这个标记将一个图片放置到页面上类似段落的一块文本。使用标记的各种属性，可以将包含在该标记元素内的文本放置在页面上的任何位置。例如，要将两个元素并排放置，可以为其中一个元素设置float:left样式，而为另一个设置float:right样式Left-hand content here Right-hand content here用于格式化文本中的字符的标记，因此可以用标记包住一句话中的一个词语，并让该标记设置为粗体字以突出该词语Some standard text with a bold word in the middle元素中包含了行()和列()。一般用于在页面上定位其他元素，理想情况下应只用于表格式的数据。根据可访问性原则，元素应用于定位和布局，但很多站点仍然使用表格，因为它比较容易开发 The contents of a cell 锚(anchor)元素。在页面上定义一个超链接，使得开发人员同时可以指定目标内容(在属性href中)和显示给用户的文本Some text with a hyperlink in itHTML页面的两个主要部分是和。是放置元素和元素(附带各种元数据)的区域。包含要显示的元素 Page Tit
