您的位置：首页 > 运维架构 > 网站架构

类Windows界面的网站后台开发（一）

2006-10-28 14:00 260 查看

这次的系列文章，使用.net架构开发，所以网页都回放在.aspx文件中，除了Asp.net Ajax部分以外，其他的部分都可以放在html文件中（Asp.net Ajax理论上可以使用纯HTML+JavaScript代替，以后会简要介绍一下）。

为了方便起见，我使用Visual Studio 2005一步一步来创建这个后台，当然，完全可以使用NotePad或其他文本编辑器。首先，在Visualr Studio中建立一个新的网站，为了后续的开发，类型记得选择Asp.net AJAX-Enabled WebSite（对于本文内容，使用Asp.net WebSite或纯HTML文件均可）。

Asp.net AJAX Beta1可以从这里下载，更多特性和教程可以访问Asp.net AJAX学习团队

新建完网站后，会自动打开Default.aspx文件，其中有IDE为我们自动添加的代码，这些暂时代码都不用管，这次我们只在原有架构上添加一些用于画出窗口的代码。

首先我们分析一下一个窗口需要的基本元素，一个窗口标题、一个窗口主体、一个状态栏，个别窗口还有一些按钮栏等等，这次我们只简单的做出窗口最基本的架构——标题、主体、状态栏。另外，为了以后给窗口添加特性，我们还需要一些其他东西，比如要通过拖拽改变窗口大小就需要给窗口添加边框。综合来看，我们的窗体应该大体是这个样子的

剩下就是要在HTML中实现这个框架了，很简单，我们可以使用以下代码

<table border="0" cellpadding="0" cellspacing="0"

>
<tr>

<div>

X</div>

<div >

[ ]</div>

<div >

__</div>

<div>

Title</div>

</td>

</tr>

<tr>

</td>

<td>

Body</td>

</td>

</tr>

<tr>

<td >

StatusBar</td>

</tr>

<tr>

</td>

</tr>

</table>

</div>

首先，使用一个<div>作为窗口的容器，这样以后给窗体添加拖动特性时会非常方便。然后使用一个<table>元素来设置窗口的框架，其中需要4个<tr>元素来给定义表格的4个行，分别是—标题、主体、状态栏、下边框。在标题行中的<td>元素中使用colspan属性来是该单元格占据下面行行3个单元格的宽度，并在其中添加4个<div>元素，分别为——关闭按钮、最大化按钮、最小化按钮和标题文字。下面的行也是类似，必要特殊的是第二行（也就是第二个<tr>，显示窗口主体的行）中的两个<td>元素，使用了rowspan属性，使这两个单元格向表格下延伸，直到表格的底部，作为左右边框。

现在，在浏览器或者设计视图中预览，是完全看不出有一个窗口该有的样子的，接下来，该给这个窗口添加样式了。作为DHTML的一个重要组成部分，CSS已经在网页开发中有着不可替代的作用，基于可复用性和可维护性，我们要优先使用CSS控制样式，而不使用HTML 4.0和以前版本中的内联样式。比如<div height="500px"/>现在应该改为使用内联或外联CSS，比如<div style="height:500px"/>（内联）或向接下来就要介绍的外联。

给网站添加一个CSS文件是非常简单的，可以直接在Visual Studio中选择-项目-添加项；或者直接使用文本编辑器创建一个文本文档，并把扩展名改为.css。创建一个名为Windows.css的文件，并添加以下内容

.dragable {...}{

position: absolute;

}

.windows {...}{

width: 480px;

height: 320px;

}

.windowsTitle {...}{

height: 20px;

background-color: activecaption;

}

.titleButton {...}{

float: right;

position: relative;

margin: 0px 1px 0px 1px;

}

.windowsBody {...}{

height: 280px;

width: 318px;

background-color: window;

}

.windowsBorderSide {...}{

width: 2px;

background-color: activecaption;

}

.windowsBorderBottom {...}{

height: 2px;

background-color: activecaption;

}

.windowsStatusBar {...}{

height: 20px;

background-color: activeborder;

}

CSS文件是非常好理解的，这个文件中也没有任何复杂的元素，这使用了最简单的类关联（不同于面向对象中的类）。CSS中，样式成对出现中间添加冒号，形如xxx:yyy，代表给xxx属性赋予yyy值，举例来说windows{...}中，width:480px代表给宽属性赋予480px(像素)，换句话说就是设置宽为480px，windows{}就代表给所有属于windows类的元素应用{...}之间的样式。特殊的，使用一个dragable类，并添加postion:absulote，代表属于dargable类的元素使用“绝对定位”这很重要，因为绝对定位是可拖动的基础。

要给一个网页添加外部CSS文件很简单，只要在<head></head>之间添加<link href=" URL rel="stylesheet" type="text/css" />，其中href属性值为.css文件的路径，ref属性告诉浏览器这个连接是该页的CSS，type属性指明了文件的类型。接着，就要把网页内的元素和CSS中的样式类关联上了，只要给元素添加class属性，并让属性值等于CSS文件中要关联的类名就可以了，所以HTML代码可能会变成这个样子

<tr>

X</div>

[ ]</div>

__</div>

<div>

Title</div>

</td>

</tr>

<tr>

</td>

Body</td>

</td>

</tr>

<tr>

StatusBar</td>

</tr>

<tr>

</td>

</tr>

</table>

</div>

现在在浏览器中查看就会是这个样子了

下面给出一个完整的HTML文件代码（不是ASPX文件代码，不想使用,net架构的人可以参考下面的代码）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>Untitled Page</title>

</head>

<body>

<tr>

X</div>

[ ]</div>

__</div>

<div>

Title</div>

</td>

</tr>

<tr>

</td>

Body</td>

</td>

</tr>

<tr>

StatusBar</td>

</tr>

<tr>

</td>

</tr>

</table>

</div>

</body>

</html>

下次将给这个窗口添加拖动、改变大小和关闭特性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航