9. 动态网页与数据库
9.1 动态网页的概念
从静态网页到动态网页的发展史网站建设的革命建设，它实现了用户客户端和网站服务器段交互方式的改变，实现了从但反馈到双向互动的转变，实现了从单一媒体到互动平台的转变，体现了当代网站建设的精髓。
- 什么是动态网页
动态网页就是能够实现用户和服务器动态交互，满足用户个性化网页请求的动态HTML（Dynamic HTML，DHTML）。
HTML是一种静态的网页设计语言，主要提供文本和图形的显示功能，但它却难以提供对媒体、二维空间移动、精确文字定位、图形大小和位置动态等动态页面编辑功能。而DHTML则不同。
DHTML需要一种方法来控制文档中所有需要控制的元素，这可以通过一些脚本语言来完成。例如：JavaScript或VBScript，脚本语言会把相关信息嵌入到页面上的每个元素，并检阅它们的设置值，设置发生预想的变化。
DHTML和动态数据库技术不同，它不是面向服务器的脚本，如JavaScript，DHTML的所有操作都可以在客户端自己完成，除了改变页面内容外，不需要改变服务器。页面下载后，无论什么时候，DHTML都可以处理页面元素，修改页面版面、内容和位置，并把结果不断提供给用户。
DHTML作为服务器自带的功能，实际上只是一种技术概念，并不属于一种专门的技术，而胡思多种技术综合的结果。
目前，实现DHTML的技术主要有：客户端的脚本程序语言、DOM（文档对象模型）、层叠样式表CSS等。
- 客户端脚本程序语言
HTML应用中的客户端脚本语言有JavaScript、Perl、JScript、VBScript等。在用户浏览网页的时候，当鼠标在一些图形和控件上移动时会产生一些奇妙的变化。这些变化就是通过客户端脚本语言来编写和实现的。
<html>
<head>
<title>使用一个JavaScript脚本语言写的一个动态网页</title>
</head>
<body>
<center>测试你在20s内能单击几个框？</center>
<script language="JavaScript">
var total=0;
var play=false;
function display(element)
{
var now=new Date();
if(!paly)
{
play=true;
startTime=now.getTime();
}
if(now.getTime() - startTime > 2000)
{
element.checked=!element.checked;
return;
}
if(element.checked)
total++;
else
total--;
element.form.num.value=5;
}
function restart(from)
{
total=0;
paly=false;
for(var i=1;i<=100;++i)
{
form.elements[i].checked=true;
}
}
document.write("<from><center>");
document.write('<input type="text" value="5"');
document.write('name="num" size=10 onFocus="this.blur()"><br>');
document.write("<hr size=1 width=40%>");
for(var i=0;i<10;++i)
{
for(var j=0;j<10;++j)
{
document.write('<input type="checkbox"');
document.write('onClick="display(this)">');
}
document.write("<br>");
}
document.write("<hr size=1 width=40%>");
document.write('<input type="button" value="restart"');
document.write('onClick="restart(this.form)">');
document.write("</center></form>");
</script>
</body>
</html>
- 文档对象模型（DOM）
在某种意义上说，DOM是DHTML真正意义上的核心内容，正是它使得HTML具备了活动性。DOM体现的是网页元素的等级关系，在浏览器上，这些元素在指定的时间呈现。DOM包括时空背景信息，如当前时期、时间；包括浏览器自身的属性，如浏览器的版本号；包括窗口自身属性，如网页的URL；最后还包括个HTML元素，如<p>标记、<div>或者表格。通过将DOM向DHTML语言公开，浏览器能够使网页更多的功能元素发挥作用。如果像日期、时间之类的元素不能自动变换，它也可以通过JavaScript修改其他元素来完成。
事件模块（Event Model）与事件
DOM中指定元素进行变换的那部分称为时间模块。所谓“事件”指的是对页面进行的动作，诸如鼠标在页面的某一个元素上的移动（onMouseOver）、打开网页（onLoad）、提交一个反馈表单（onSubmit）、单机反馈表输入区（onFocus）等。
例：
<html>
<head>
<title>编辑产品信息</title>
<script>
function popOnload()
{
if(opener)opener.blockEvents();
}
function popOnUnload()
{
if(opener)opener.unblockEvents();
}
</script>
</head>
<body οnlοad="popOnLoad();" οnunlοad="popOnUnLoad();">
<table>
<tr>
<td>产品名</td>
<td><input type="text" value="电视机"></td>
</tr>
<tr>
<td>编号</td>
<td><input type="text" value="A001"></td>
</tr>
<tr>
<td> </td>
<td><input type="button" value="提交">
<input type="button" value="取消" οnclick="window.close()">
</td>
</tr>
</table>
</body>
</html>
- 层叠样式表（CSS）
CSS属于DOM的一部分，它的属性可以通过DHTML编写的语言得到体现，因此几乎能够实现页面外在视觉效果的一切变化。通过改变页面元素的CSS属性（如颜色、位置、大小），可以达到机器的带宽和处理器的运行速度允许范围内的一些效果。
注：
CSS是使网页发生改变的对象，DOM是其具有变动性的机制，而客户端的脚本语言是世界促成变换的程序。三者结合应用，就构成了动态的HTML。
建立一个1.html文件，一个2.css文件
1.html
<html>
<head>
<link rel="stylesheet" href="2.css" type="text/css">
</head>
<body>
<center>
<h2>欢迎使用超级系统维护软件</h2>
<div class="table">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>自动登录</td>
<td><input type="checkbox" name="auto"></td>
</tr>
<tr>
<td> </td>
<td align="right"><input type="submit" value="进入" class="botton"></td>
</tr>
</table>
<div id="footer">版权所有：段立勇</div>
</div>
</center>
</body>
</html>
2.css
body,table
{
font:12px Tahoma;
margin:20px;
}
h2{
font:bolder 24px Tahoma;
color:darkred;
}
.table{
border:1px outset lightgrey;
padding:20px;
background:lightyellow;
width:300px;
}
.button{padding:2px 10px 2px 10px;
border:1 out1set white;
background:darkblue;
color:white;
font:bolder 11px Tahoma
}
#footer{
font:10px Tahoma;
margin:30px 10px 10px 10px;
text-align:right;
}
9.2 数据库的概念
数据库是计算机内的一个容器，用于存放使用表格组织起来的用户数据。对这些数据进行管理的计算机软件就称为数据库管理系统。在实际应用中，通常把数据库以及用户数据库管理的计算机软禁一起称为数据库应用系统。
Web数据库是基于Web的数据库应用系统。现在的Web应用程序中会大量地使用到数据库操作。常用的数据库软件有SQL Server 7.0。
9.3 数据库结构设计
数据库的作用：
数据库(Database)是按照来组织、和管理数据的仓库，它产生于距今六十多年前，随着和市场的发展，特别是二十世纪九十年代以后，不再仅仅是存储和管理数据，而转变成用户所需要的各种数据管理的方式。数据库有很多种，从最简单的存储有各种数据的到能够进行海量的大型都在各个方面得到了广泛的应用。
在信息化社会，充分有效地管理和利用各类，是进行科学研究和决策管理的前提条件。是、办公自动化系统、等各类信息系统的核心部分，是进行和的重要技术手段。
- SQL语言简介
结构化查询语言（Structured Query Language，SQL）是关系数据库管理系统（DataBase Management System，DBMS）中的标准语言，已经被众多的关系数据库管理系统所采用，如MSSQL Server、Access、Qracle等。
使用SQL语言，可以从数据库中获取数据，建立数据库和数据库对象，增加数据、修改数据和失信复杂的查询功能。它允许用户在高层的数据结构上工作，而不是对单个记录进行操作，可操作记录集。所有的SQL语句接受集合作为输入，返回集合作为输出。允许将一条语句的结果作为另一条语句的输入。
- 数据库结构设计
在SQL Server中，数据库把所有的数据与数据库对象都放在一系列操作文件中，并用文件和文件组管理这些操作系统文件。文件主要分为3中：主文件、从属文件和日志文件，每个文件只能属于一个数据库。
主文件：
它是一个数据库的起点，一个数据库文件只能有一个主文件且必须有一个主文件。
从属文件：
它的数目是任意的，一般一个小型数据库可以没有从属文件，而一个大的数据库可能存在多个从属文件。从属文件和主文件一同存储数据和数据库对象。
日志文件：
日志文件用来存放数据库的日志信息，这些信息对恢复数据库是十分关键的，一般一个数库必须至少有一个日志文件。
- sql server的作用
SQL Server 工具和实用程序
服务管理器（服务器有，客户端没有） 企业管理器 查询分析器 导入和导出数据 服务器网络实用工具 客户端网络实用工具 联机帮助文档 事件探测器 SQL Server 2000提供了大量的联机文档，它具有索引和全文搜索能力，可根据关键词来快速查找用户所需信息。 Have a try Sqlserver数据库 系统数据库 SQL Server自己所使用的数据库，包括：master、msdb、model、pubs、Northwind、tempdb其中 pubs 和 Northwind 示例数据库作为学习工具提供安装步骤：https://blog.csdn.net/benben513624/article/details/50516276
9.4 常用的SQL语句
T-SQL为MS SQL Server的SQL语句，在SQL Server环境下，可以使用T-SQL语言并使用Query Analyzer管理并创建数据库。
- 创建数据库语句
CREATE DATABASE database_name
[ON [PRIMARY]
[<filespec> [,...n]]
[,<filegroup> [,...n]]
]
[LOG ON {<filespec> [,...n]} ]
[FOR LOAD | FOR ATTACH]
<filespec> ::=
( [ NAME = logical_file_name,]
FILENAME=’os_file_name’
[, SIZE=size]
[, MAXSIZE = {max_size|UNLIMITED}]
[, FILEGROWTH =growth_increment] ) [,...n]
<filegroup> ::=
FILEGROOWUP filegroup_name <filespec> [,...n]
其中
database_name：要创建的数据库的名称，在SQL Server中，数据库的名称必须是唯一的。
ON：指明存放数据库的磁盘文件，以及所属的文件组（可以忽略）。
PRIMARY：定义一个主文件或者从文件组，如果PRIMARY缺省，则CREATE DATABASE语句中的第一个数据文件为主文件。
n：一个文件组中的文件个数。
LOG ON：定义一个日志文件以及存放日志文件的磁盘文件。
FOR LOAD：为了与早期的SQL Server保持兼容。
NAME=logical_file_name：定义数据文件的逻辑文件名。
FILENAME=’os_file_name’：定义存放数据文件的OS文件名以及路径。
SIZE：定义数据文件的大小。
MAXSIZE：定义数据文件能增长到的最大值。
FILEGROWTH：定义数据文件的自动增长值。
此外，语句CREATE DATABASE需要在master数据中执行。
例子：
CREATE DATABASE MIS
ON PRIMARY
(
NAME = ‘MIS_Dat’,
FILENAME=’D: \MIS\MIS_Dat.mdf’,
SIZE = 5MB,
MAXSIZE = 10MB,
FILEGROWTH = 5MB
)
LOG ON
(
NAME=’MIS_Log’,
FILENAME=’D:\MIS\MIS_Log.ndf’,
SIZE=2MB,
MAXSIZE=5MB,
FILEGROWTH=20%
)
其他的语句不在赘述，详情请看：