ASP.NET 2.0 - 页面设计

学习目标

l  创建并布局静态页面;

l  VS中的HTMLHTML查看器;

l  服务器控件和动态内容;

l  在设计视图中配置控件;

l  web控件库中的可用控件;

l  向页面添加动态导航控件,并且使它们投入工作而无需写下一行代码。

 

静态页面

写成之后其内容就固定下来,不会随着用户的输入或者周遭的环境而变化。

HTML文件是由浏览器来理解并且将括号中的那些东东转化为我们所要看到的样子。括号中的那些文字称为元素。有些元素具有两个标签(开、闭),又有一些仅仅具有一个标签。元素具有属性,来给浏览器一些附加的信息。将HTML代码转换为视觉元素的过程叫做渲染(rendering)。

 

一些常用的HTML元素

元素

描述

用法

<img>

图像标签,将一幅图像放在页面上

<img src="myimage.gif" />

<div>

段落格式文本块

<div style="float:left">Left-hand content here</div>

<span>

用来格式化文本字符的标签

<div>Standard text and <span style="font-weight:bold">bold</span> text.</div>

<table>

<tr>

<td>

表格元素,包含行(<tr>)和单元(<td>)。

<table border="1">

<tr>

<td>A cell</td>

</tr>

</table>

<a>

锚元素,定义超链接

Text with a <a href="page.htm">hyperlink</a>.

<head>

<body>

HTML页面的两个主要部分。<head>中存放<title><link>元素。<body>存放显示的元素。

<html>

<head>

<title>Page Title</title>

</head>

<body>

Contents of page

</body>

</html>

<form>

<input>

表单元素,用来向服务器传送数据。

<form id="form1" runat="server">

<input id="Text1" type="text" />

<input id="Submit1" type="submit" value="submit" />

</form>

<title>

<link>

<head>内部,<title>控制着页面的标题栏,<link>常用来连接CSS

<head>

<title>Page Title</title>

<link rel="Stylesheet" type="text/css" href="MyCss.css" />

</head>

<script>

可以包含客户端脚本或者服务器端的.NET代码

<script language="JavaScript">

    alert("Hello World!");

</script>

<br />

<hr />

&nbsp;

用来辅助布局页面。<br />标签添加一个分割行,&nbsp强制加入一个非分割的空格字符,被&nbsp分割的两个单词不会被分到两行中去。<hr />元素显示一条水平直线。

This is a string of text with a line<br />break and a&nbspspace.

<hr />

Two images separated by a space:<br />

<img src="azoreschurch.jpg" />&nbsp;<img src="budapest.jpg" />

 

HTMLXHTML

XHTML是一组规范,如果在编写HTML的时候遵循它们,结果就是代码更加标准化,能够被更多的浏览器所接受。

XHTML的核心规则如下:

l  总是关闭标签(比如<p></p>要成对)或者使用自闭的标签(比如用<br />来代替<br>);

l  标签和属性的名字都要小写(比如<div id=”myDiv”>可以接受,但<Div ID=”myDiv”>则不然);

l  属性值必须在双引号中被赋予。

Visual Studio可以在我们键入代码的时候自动检查代码是否符合规范。在HTML源编辑器工具栏中,可以在下拉列表框中选择代码架构规范。另外,其中还有一个非常好用的功能就是文档自动重排,可以格式化我们敲进去的代码成为标准缩进格式,快捷键是^ED

 

动态内容

动态内容可以是运行在客户端(比如JavaScript),也可以是运行在服务器端,包括这里的ASP.NET,以及PHPJSP等等。

ASP.NET中创建动态页面,最简单的方法就是将服务器控件拖放到页面上来。

 

服务器控件

服务器控件在代码中体现为一个标签,比如<asp:textbox … />,这些标签不是标准的HTML元素,浏览器不能识别。但当一个ASP.NET页面被请求时,这些标签会动态地转化为标准HTML元素,浏览器就可以正确显示了。

VS的服务器控件工具箱包含以下几类控件

l  标准:一般的控件,组成90%以上的页面,等价于Windows窗体控件。

n  TextBox,用来在页面上输入文字

n  Button,一般用来向服务器提交信息

n  Label,在指定位置显示简单的文本

n  Hyperlink,生成超链接

n  Image,用来在页面上显示图像

n  DropDown,用来向用户提供一系列的选项以供选择,在不用时可以折叠起来以节约空间

n  Listbox,用来提供一个固定大小的选择框

n  CheckBoxRadio Button,提供额外的选项,互斥或是相容的

l  数据:用来连接数据源的控件(数据库或XML文件)

l  验证:用来添加进页面验证用户输入的控件

l  导航:用来提供简单快速的网站导航的控件

n  SiteMapPath,这个控件用来给站点添加“面包屑”功能,可以给用户一个视觉提示,告诉他们现在正处于站点的什么位置

n  SiteMapDataSource,不可见的控件,设置路径源用的,供MenuTreeView控件使用

n  Menu,融合了静态和动态的菜单功能。添加这个控件之前,必须先添加SiteMapDataSource。它有几个比较重要的属性:

u  Orientation:确定菜单的走向,是横向(horizontal)还是纵向(vertical);

u  StaticSubMenuIndent:控制子菜单的缩排深度;

u  DisappearAfter:确定弹出的菜单将在消失前保留多久可视;

u  AccessKey:启用键盘快捷键;

u  EnableViewStateASP.NET的特征,如果设成true,则在回送页面到服务器的时候维持控件的状态,比如一个文本框在发送信息后仍然保留其中的文本。对于菜单来说就没有必要了,会加重服务器负担。

n  TreeView,和Menu很像,只不过是用一个树形的结构来显示菜单。同样需要指定SiteMapDataSource

l  登录:一组用来简化从开放站点到个性化区域的移动的控件

l  WebParts:与SharePoint有关

l  HTML:简单的HTML元素

服务器控件的工作,就是将ASP.NET代码转换为HTML。比如TextBox会转换为input,而ImageImageURL属性会转换为imgsrc属性等等。

HTML控件也可以作为服务器控件来运行,只需要添加runat=”server”这一条属性就可以了。

 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ASP.NET 2.0动态网站开发教程 <br>版本:【PDF】<br><br>发行时间:2006年09月<br><br>作者:程不功,龙跃进,卓琳 主编 <br><br>出版社:清华大学出版社<br><br>ASP.NET 2.0是微软公司推出的新一代企业级开发平台,它不是ASP.NET 1.1版本的简单升级,而是对原有版本的全面革新。ASP.NET 2.0不仅功能强大,而且易学易用。利用它能够在最短的时间内开发具有出高效性、高可靠性和高可扩展性的网站。<br><br>全书共21章分为四部分。第一部分介绍ASP.NET 2.0的基础知识,包括.NET框架的体系结构、ASPX网页的运行机制、验证控件的使用以及相关的浏览器技术。第二部分介绍了数据访问技术,包括ADO.NET的系统结构,对数据库的连接、显示、编辑与同步,以及使用存储过程、数据缓存的方法等。第三部分站在网站的高度介绍了网页界面一致性的设计、网站导航以及网页保护等方面的问题。第四部分介绍了三层架构以及个性化设计等方面的问题。本书的内容以应用开发为主线,叙述方法的主要特点是通过大量示例来说明问题。除此以外,书中还提供了几个典型的综合应用,如网上招聘网页的设计、以订单为中心的电子商务网站的设计等,只需对它们稍加修改即可应用于实际工作之中。<br><br>本书是高等学校计算机专业及电子信息类等相关专业的教材,亦可作为高等学校非计算机专业的教材或其他学习ASP.NET语言人员的自学教材。<br><br><br>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值