手把手DreamweaverASP动态网站建设.doc

手把手Dreamweaver ASP动态网站建设
Macromedia Dreamweaver MX 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。无论您愿意享受手工编写 HTML 代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver 都会为您提供有用的工具，使您拥有更加完美的 Web 创作体验。 Dreamweaver 使您可以使用服务器技术(例如 CFML、ASP.NET、ASP、JSP 和 PHP)生成由动态数据库支持的 Web 应用程序。
　　本章节内容主要从建立ASP运行环境(安装、配置IIS)、建立站点、怎样建立数据库、Dreamweaver与数据库的连接(使用DSN连接数据库)、显示数据库记录、插入数据库记录、修改数据库记录和删除数据库记录等等内容，以实现ASP动态网站的全部设计过程，希望能给你对建立ASP动态网站有所帮助。
　　系统软件要求
　　本教程将运行在Windows XP操作系统上，由IIS Web服务器和Access 2003数据库建立Web站点，通过Dreamweaver MX 2004+ASP技术开发动态页面的技术。
表 软件环境列表
软 件
应 用
Windows XP
操作系统
IIS 5.0
Web服务器
Access 2003
数据库
Dreamweaver MX 2004
动态页面设计
　　Windows XP的Internet 信息服务 (IIS) 给 Windows 带来 Web 计算的强大功能。 IIS 是创建和开发动态网站解决方案的安全平台。
　　一、 建立ASP运行环境(安装、配置IIS)
　　(一)、安装IIS
　　在Windows XP(专业版)上将Windows XP安装光盘放入光驱，点击开始—>设置—>控制面版—>添加或删除程序—>添加或删除windows组件—>在internet信息服务(IIS)项前面打钩，单击下一步进行安装，直至完成internet信息服务(IIS)的安装。如图所示：

　　(二)、配置IIS
　　点击开始—>设置—>控制面版—>管理工具—>internet信息服务(IIS)，在弹出的窗口单击本地计算机、网站，在默认网站单击鼠标右键，
在弹出的窗口选择主目录、在本地面路径选择浏览按钮，选择你建立的网站目录(如：E：\我的网站)，选择文档项，按添加按钮，添加index.asp文档完成IIS的配置。

二、建立站点
　　Macromedia Dreamweaver MX 是一个站点创建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。
　　站点的定义
　　开始使用Dreamweaver MX 2004来创建数据库网站的第一件事，就是定义网站，必须告诉Dreamweaver MX 2004网站根目录在哪里，以及服务器位置、类型等相关信息。
　　启动Dreamweaver MX 2004后，从主菜单选择站点/管理站点/新建…定义一个新站点。
　　在弹出菜单中的本地信息栏--站点名称中输入“我的网站”，本地根文件夹中选择“E：\我的网站”，在HTTP地址项填写：“HTTP：\\127.0.0.1\”其余各项保持不变。在“分类”处选择“测试服务器”，在服务器模型处选择“ASP VBScript”,“访问”处选择“本地/网络”，单击确定完成站点的定义。
　　这时网站管理窗口中就可以看到网站根目录的中文件了。

三、怎样建立Access数据库
　　本系统使用的是Access 2003创建了一个名为db1.mdb的数据库。系统对数据的读取，存储都是对该数据库进行操作。
　　在Access 2003数据库中，所有的数据存储都是围绕表进行的，数据不会存储在数据库的其他位置。虽然可以有许多方法访问数据，但是它们全部来自表。可以说，表示一个数据库的灵魂。
　　执行开始->程序->Mccrosoft Office -> Mccrosoft Office Access 2003(安装Mccrosoft Office 2003时，把Office Access 2003也打钩进行安装) ，执行文件->新建，在弹出窗口右边选择空数据库，文件名保持默认，单击按钮，从弹出窗口选择“使用设计器创建表”，填写相应的字段，具体如下表所示：
字段名称
数据类型
字段大小
ID
自动编号

姓名
文本
20
性别
文本
30
年龄
数字
10
录入时间
日期/时间

住址
文本
50
　　完成字段名称等录入后，选择ID为主键，数据表名称保留默认“表1”，将其保存在“E：\我的网站”目录下完成数据库的建立。如图所示：

四、Dreamweaver与数据库的连接(使用DSN连接数据库)
　　如果打算在网络应用程序中使用数据库，就需要创建至少一个数据库连接。没有数据库连接的话，应用程序将不知道在什么地方找到数据库或者如何与数据库连接。在Dreamweaver MX 2004中创建数据库连接时，为应用程序提供了与数据库建立联系的信息或参数。
　　1 DSN定义
　　(1) 在控制面板中，双击管理工具，双击ODBC数据库源图标，出现ODBC数据源管理器窗口，选择系统DSN标记。
　　(2) 单击“添加“，接着选择数据库驱动程序，本系统使用Access数据库，所以Microsoft Access Driver(*.mdb)，单击“完成“按钮。
　　(3) 出现ODBC Microsoft Access安装窗口，在数据源名一栏给连接取个名字conn，说明一栏不是必填项。
　　(4) 单击窗口中“选择“按钮，找到数据库的所在路径(“E：\我的网站”)并选中相应数据库文件，选中db1.mdb，此时ODBC Access安装窗口中数据库一栏就会出现刚才选定的数据库文件，如图所示。

　　2 DSN连接
　　建立了数据库名(DSN)之后，就可以创建网络应用程序和数据库之间的ODBC连接，DSN被定义后，就能用它来调用各种参数了。
　　(1) 启动Dreamweaver MX 2004，打开已经定义好的站点“我的网站”，在站点-我的网站窗口中点击鼠标右键，点新击建文件，文件名改为index.asp,双击文件index.asp使其处于编辑状态。
　　(2) 单击“窗口”中的“数据库”，从“数据库”菜单中。在窗口中点击“+”，选择数据源名称，从弹出窗口“连接名称”一栏键入连接的名字conn;在数据源名称(DSN)一栏从下拉菜单中挑选数据库源名conn;Dreamweaver连接一栏选择使用本地DSN即可。如下图：

五、制作显示数据库记录页
　　(1)、双击index.asp文件，使其处于编辑状态，选择应用程序的“绑定”，点击“+”，à记录集(查询);在弹出的记录集窗口“名称”填写Rs，连接选择conn，表格选择“表1”，“列”选择全部，单击确定完成记录集的绑定。如下图;

　　(2)、在index.asp编辑状态下，插入2行七列的表格，并使其居中，在上一行的七个空格中加入数据表中的内容标签，然后将记录集的各字段拖入下一行对应的空格中，在表格上方输入数据库总记录数X条、目前为第X条数据，并将记录集中的总记录数，第一条记录拖入对应的字中，并使其居中。如下图所示：

　　(3)、选中第二行的全部表格，点击服务器行为，点击“+”选择重复区域，保持默认状态，点击确定完成重复显示区的设计。
　　(4)、点击菜单“插入”，选择“应用程序对象”->记录集分页->记录集导航条,在弹出窗口(保持默认值)点击确定。如图所示：

六、制作添加数据记录页
　　新建一网页，命名为add.asp，并使其处于编辑状态，点击菜单“插入”，选择“应用程序对象”->插入记录->插入记录表单向导,在弹出窗口“连接”项选择conn，“插入到表”选择“表1”，“插入后转到”填写a.asp(提交成功显示网页，将在下一步建立),删除不需要的字段(ID),然后点击确定按钮完成页面的制作。

　　建立新的一页，保存为a.asp，并在页面上填写“添加数据成功!”完成页面设计。
七、制作修改数据记录页
　　打开index.asp文件，使其处于编辑状态，把鼠标定位在第一行，点击拆分单元格图标，如下图：

　　将列拆分为2列。第二行用同样方式拆分为二列，在最后一列填写“修改”字符，全选“修改”，使其被选定，选择服务器行为—>“+”，转到详细页面，从弹出菜单中，详细页填写edit.asp，其它保持不变完成页面设置。

　　创建edit.asp新页，用上述同样的方法为其绑定一个名为Rs的记录集(筛选项选择ID，其它保持默认值)。点击菜单“插入”，选择“应用程序对象”->更新记录->更新记录表单向导,在弹出窗口“连接”项选择conn，“要更新表格”选择“表1”，“选取记录是”处选择Rs,唯一键列选择ID，“更新后转到”填写index.asp (修改显示网页，将在下一步建立),删除不需要的字段(ID),然后点击确定按钮完成页面的制作(其余为默认值)。如下图所示：

八、制作删除数据记录页
　　用上述学过的方法在Index.asp上创建“删除”连接。新建网页命名为delete.asp，并打开它，在其上创建一个七行二列的表格，并在左边的表格上填写相应的字段名，然后给网页绑定一个记录集，并对其字段拖到对应的右这表格中。创建一表单，并把上述所建的表格拖入表单内，同时为表单建立一个删除确定按钮，如下图所示：

　　点击服务器行为->记录集分页->移致特定记录,按确定按钮(保持默认值)。点击服务器行为->删除记录，在弹出菜单中填上相关内容。如图所示：

　　一个比较完整的ASP动态网站总算完成了。读者依照本教程的指导，自己动手操作可以实现ASP+Access动态网站的组建。
使用HTML5和CSS3构建基于webkit的Web Page/App
现在在ios/android上的web网站变的越来越多，智能机中ios和android系统的设备市场份额也是与日俱增，相信未来会是一个趋势，那么如何构建基于webkit的网站呢？这里有一篇文章介绍了如何用html5创建一个iphone的app，这是一个基于web的本地离线应用，相对于native应用来说基于web的应用开发和测试都非常快捷，基于webkit浏览器支持大部分的html5，也支持大部分的css3，而且开发语言也是大多数web工程师所熟悉的，最重要的一点是基于web的应用是完全跨平台的，不需要多平台的开发和测试。
开发基于webkit的web app/page时需要注意的有：
HTML特性：
<input type=”file” />在iphone上不work
<a href=”13888888888″>Call Me</a>可以调用打电话应用
google maps, iTunes和youtube的链接会在iphone上打开相应的组件
app/web page设置：
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> 在设置书签的时候可以显示好看的图标
<meta name=”apple-mobile-web-app-capable” content=”yes” /> 离线应用的另一个技巧
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> 隐藏状态栏
<link rel=”apple-touch-startup-image” href=”startup.png” /> 设置开始页面图片
<meta name=”viewport” content=”width=device-width, user-scalable=no” /> 指定mobile，并且不可缩放
<meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ /> 同上
CSS相关配置：
@media screen and (max-device-width: 480px){
/* 小屏幕的css样式 */
}

@media screen and (max-width: 320px){
/* 纵向的css样式 */
}

@media screen and (max-width:480px){
/* 横向的css样式 */
}

@media screen and (orientation: portrait){
/* iPad 纵向的css样式 */
}

@media screen and (orientation:landscape){
/* iPad 横向的css样式 */
}
display: -webkit-box; -webkit-box-orient:vertical/horizontal; -webkit-box-flex: value 水平垂直布局box
rounded corner/text shadow/box shadow/rgba/font-face/transform/transition/animation/border-image/gradients/ 充分利用这些css3的特性做出丰富的UI
脚本特性：
可以选用开源的javascript库，如yui, jquery, mootools, dojo …
垂直的js库，如canvas游戏库有LimeJs, GameJs等，Mobile UI库如jquery mobile, sencha touch, iui等，以及其它各种库
隐藏标题栏 – addEventListener(“load”, function() { setTimeout(function (){ window.scrollTo(0,1);}, 0); }, false);
webkitTransitionEnd/webkitAnimationStart/webkitAnimationIteration/webkitAnimationEnd transition/animation事件
localstorage/manifest 离线应用
模拟iphone的scroll效果，解决Mobile Safari下不支持position:fixed的问题：touch scroll, demo

调试：
safari上可以设置user agent为iphone上的safari（preference->advaced->developer tool)，还可以手动添加android的user agent{ Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 –Nexus }
iphone的safari上有debug调试
关注Mobile性能问题，可以采用firebuglite等书签脚本来调试
文章的标题说的是web app/page，其实用html5和css3构建的app和page没啥区别，web page也很容易转换成native的app，通过phoneGap就可以了，phoneGap所做的就是在一个native的app内嵌入了一个类似chrome的浏览器，并且创建了一个桥接，从而直接去写web app就可以了，就像这个slide的标题写的一样“HTML5 is the Future of Mobile, PhoneGap Takes You There Today”，你的app可以在5个以上的平台上运行，使用的技术是你所熟悉的html/js/css，还等什么，赶快看看它的文档实践一下吧。