卿作坊—— 动态网站实战 卿作坊——不作不方 声明（可忽略） 事先声明一下，本篇文章写于2016年8月6日，但是考虑到个人信息安全等问题，直至今日才得以初见天日
以及这是小编第一次搭网站，参考的是何秀芳老师的《网页制作与网站建设：从入门到精通》一书，很有点照本宣科的味道，所以为什么要跌跌撞撞，为什么选择了.asp的网页.mdb的数据库，为什么不用流行又好使的.php网页和mySQL，我恳请诸神饶恕，我恳请各位专业人士放过，我恳请各位大大一笑了之，如果诸位有这个好心，请动动手指，到各大论坛贴吧解决一下吾等小辈的问题，给出一些我们听得懂的、十分可行的方案，甚至给点现成或是实例代码，小辈们感恩戴德
不多说了我们开始正题 正题 那么今天我们的主题呢是简易动态网页的制作与网站建设
所谓动态网页呢，就是一种针对每个用户的个性化网页，一般的识别方法就是网页域名（地址？）是带“？”的
在这个夏日呢，小编尝试着做了一个网站，用于T大机械学院新生报道时征集信息
该项目历时一个月，日日搔头，可谓是艰苦卓绝啊
当然这一个月还发生了很多其他的事情，例如 小编去考车本科目二挂科了 （不如跳舞，考科二不如跳舞） 某iphone上的辐射避难所从寥寥几人赤手空拳变得人丁兴旺人才济济武装到牙齿 （一旦沉迷，无法自拔） B站游戏区多了一个粪作
（av5492051拿好不谢） “艰苦卓绝”，可见一斑了 OK闲话少说，我们来先看看应用背景（没错是这样的，缺少应用背景的工程是没有价值的
应用背景 理想篇 如果让我总结应用背景，我希望这样形容它，这是爱与奇迹
菁菁学子，寒窗十年，金榜题名，考入T大机械学院小编作为机械学院学长，理应为他们提供服务和便利做个网站，方便新生报道登记信息，举手之劳，何足挂齿 我一开始是拒绝的
但老大说如果我不做的话就找个贵系的做，到时候机械学院脸就不知道往哪搁了
我，仍是傲娇的拒绝着 老大说要统计所有新生手机号，甚至包括学妹的 我勉强答应了他的邀请，决定为机械学院的前程和名誉放手一搏 OK，应用背景大概就介绍到这里在介绍最终结果前我还是要先说几句
前些日子一些图谋不轨的港科同学曾发图挑衅， 在此我对该位同学发出强烈谴责，阁下的行为非常伤害我们的友谊，更何况： 今年T大机械学院招到了我四中嫡系学妹！ 今年T大机械学院招到了我四中嫡系学妹！ 今年T大机械学院招到了我四中嫡系学妹！ 阁下好自为之
OK，下面我们说说最终效果
最终效果 最终结果还是很乐观的，一共有两个页面，一个是登录页面，一个是详细页面
登录页面可以输入姓名（或是录取通知书号）和手机号，详细页面给出一些具体的信息
背景是T大机械学院的李兆基大楼，非常的雄伟壮观，展现了我机械学院的博大胸怀
然而不提一提初稿我是不能释怀的深邃而宁静的机械紫啊，请指引我未来的方向 对于是用李兆基还是机械紫，某机械系的大哥有这样的论断 我很信服，所以最终决定使用李兆基了 OK，我们说说这是如何制作的吧我们先说一下应用软件 一、原材料（软件） 说明一下计算机机型小编用的是华硕FX50J，win10的操作系统
需要安装： Internet Information Services (IIS)管理器 ODBC 数据源(32 位) 具体安装方法请详见下文，小编可提供安装文件压缩包
小编选用了以下软件版本： Adobe Dreamweaver CC 2014（强大的网站编写工具，初学者的摇篮与坟场） Microsoft Access 2010（数据库） FlashFXP（上传工具） Adobe Photoshop CC 2015（请自行学习） 以上软件如有需要，请自行下载，也可直接回复公众号，小编这里均可提供下载
另外一些辅助软件如有需要请自行添加 好的，有了这些，我们就能编一个简单的网站了
二、实现过程 本地服务器设置 下面我们来建一个本地的服务器
之后这部操作因系统不同各异，在此只做Win10机的说明其他系统可以类似比较
打开控制面板->程序->启用或关闭windows功能，“网络信息服务”这项（我这个貌似是英文版的，以下简称iis），全部点勾（方块是不够的），点击确认，系统会自动下载安装
如果有安装不了的，可以先下载安装包，再本地解压安装 打开控制面板->系统和安全->管理工具->iis
选择默认网站（我这里又是英文版的），打开Asp选项，选择启用父路径（一脸萌，我也不知道是怎么回事，总之照做就好了
）打开默认文档，添加denglu.asp打开绑定，将IP地址设为127.0.0.1，端口为80
打开基本设置，物理路径设置一个喜欢，尽量是空的文件夹就可以了
例如我这个是桌面上的huanyingye文件夹 iis这边就算设定好了服务器也算搭好了 数据库搭建 曾有一位智者告诉我，数据库还是mySQL好使
小编也找过一本mySQL的书学了学，最后发现，还是office自带的Microsoft Access通俗易懂，上手轻松
建立数据库呢我们首先需要看一下需求 先建立个人信息集打开Microsoft Access，点击新建空数据库
如果是较早的版本直接保存为.mdb文件即可，例如我保存的叫huanyingye.mdb，如果是较晚的，发现自己保存完是.accdb文件的，应点击文件->发布并保存->Access2002-2003数据库->另存为而保存到刚刚建服务器选的文件
我们会注意到，Access为了保护数据，所有这类保存移动等操作都是在关闭项目的情况下进行的
很多情况Access会让我们关闭表，数据库等，请点击关闭再操作
点击外部数据->excel导入.xlsx文件中的数据实例文件是我瞎编的，切勿当真
导入过程就不多说了，一步一步按向导来就可以了，导错了没关系反正改改也就一两行的事情
需要注意的事情提醒一下，就在这一步，字段选项 字段名称请尽量使用英文，否则可能会出问题
数据类型的如果数字过长或是觉得麻烦的，请在是数字的时候选择文本
一般不参加数学计算的不会有大问题
姓名栏（name）因为要作为查找依据，所以索引要选择“有（无重复）”，并设为主键（这个是下一步，选择“我自己选择主键”，选name）
总之导完是这个样子滴 保存收工
请照刚刚的操作新建数据库，存为huanyingye2.mdb
点击创建->表右键点击表栏中新建的表（一般叫表1吧），点击“设计视图”ID那栏保留就可以了 保存收工，数据库我们就搭建完成了之后我们要创建一个数据库的本地连接
打开控制面板->系统和安全->管理工具-> ODBC 数据源(32位)，选择系统DSN，添加数据库
要把两个数据库都添加了数据库的本地连接就这样结束了
下面我们真正进入网页制作…… 网页制作 网页制作我们选择的软件是Adobe Dreamweaver，强大的网页制作软件，支持可视化编辑，功能较全，随便拉拉扯扯就能设计出简易的网页
登录页面：denglu.asp 我们先制作登录页面
打开软件Dreamweaver，新建一html文件，另存为到huanyingye文件夹并取名为denglu.asp
标题可以改一改，例如改为登录界面什么的无伤大雅 做动态网站网页需要保存站点打开窗口->服务器行为（如果看到界面上已经有了就不用了）点击第一步的“站点”，找一下刚刚的文件夹设定即可
服务器添加如图设置，显然大概是要用之前涉及的一些参数，填上就可以了，远程和测试都要勾
文档类型选择ASP VBScript基本设置就是这样了
设置这个其实还是蛮辛苦的，需要大家耐心谨慎，一不小心搞了大半天不要紧的，常有的事
在编辑网页的时候我选择“拆分视图”（在左上角），可以同时看到代码和效果
直接写代码的诸神请速退散 右边的界面是可以直接编辑的
这个大家试试就都知道了，非常方便，可以在插入里选选都要插入什么，这个拉拉扯扯就好了
我先拉一个 这个就可以了
当然您可以通过设置格式，把它变得能看一点，以及在修改->页面属性中，可以设置以下背景颜色，普通字的颜色等
相信大家这些会玩的不亦乐乎
我还是我用我钟爱的rgba(118,0,126,1.00)机械紫
观察左边代码区别，相信简单的英文代码大家都是随便看看就能理解了
以及，赶紧保存，请记得常年保存
详细页面：xiang.asp 我们再创建一个详细信息页面xiang.asp
方法类似，大家愉快的拉拉扯扯就出来了 我们回到denglu.asp可以发现这个页面的主要用途是用来输入信息的所以需要一个提交按钮在提交的时候是要有一个表单的（简单的理解，就是提交按钮管辖的区域） 选择插入->表单->表单，会发现有红色的框框再选择插入->表单->文本（有的版本叫文本域还是英文好理解，叫Text Field），把提示语换了换成刚刚写的两条
在下方属性栏可以把文本的名称改一下，建议改为name和tel
顺便加个提交按钮，完美 不太清楚怎么操作的同学可以留言，也可直接打左边的代码
代码是万能的，don’t you remember? Code is law. 好的，我们要对表单提交进行设置
点击服务器行为“+”键，选择插入记录
连接->新建->数据源名称，之后通过选择完成完成完成，把刚刚的huanyingye2数据源连接上
具体填写参考一下下面的图吧 大家会发现左边代码区代码量已经飞起了没关系，习惯就好了 转到详细页面我们看到这表格显然是需要被填满的我们要插入数据库中的信息 点击窗口->绑定->“+”键->记录集（查询）
记录集设置参考下面的图片，值得注意的是，因为是个人信息页，所以筛选选择name
这样我们就可以呼应为什么设置数据库的时候姓名选的是索引类型是“有（无重复）”
（如果今年招生招到同名的，小编就gg了
） 点击姓名后面的表格栏，选择绑定->记录集->name->插入
当然其他信息也放照着做相信大家的手已经忙叨起来了 OK，网页搭建搭完了，我们可以试试打开denglu.asp，选择文件->浏览器预览->ie我们输入我们可爱的五河同学，以及她的豪华的8位手机号结果是如图所示
我们看到登录页面显示正常，详细信息页面属于乱码状态（只有姓名栏的习惯就好了，姓名这栏没有它后面的就是不显示）
解决姓名乱码问题，我还是有些高招的
将denglu.asp和xiang.asp的第一行代码<%@LANGUAGE="VBSCRIPT"%>改为<%@codepage=65001 Language=VBScript%>，完美解决问题
注意，这个修改会导致一行叫做<%@LANGUAGE="VBSCRIPT"%>的代码消失，Dreamweaver很多时候会帮你好心的把这行代码加上，请在每次测试前确保这行代码被删除，并将我们添加的<%@codepage=65001 Language=VBScript%>挪到第一行
关于xiang.asp是乱码的情况，是因为我们并没有将表格中name的参数传给xiang.asp
很简单，看一下xiang.asp，大家会发现它的域名中并没有“？”，这是哪门子动态页
修改办法是到denglu.asp，将传输代码改一下即可，把表单中name框里输入的信息传给xiang.asp
详见下图 这个本地测试就算是可以了 如果要传到网上呢，连接数据库需要相对路径代码修改如下图所示 大家注意两个界面使用的数据库名称不一样，不要改错了 愉快的网页制作环节就此告一段落了
PS:2016年8月15日夜新内容 这里，出于debug精神，小编对同学输错姓名的情况作出考虑
处理方法就是，若记录集显示的内容为空，则不显示表格，并增加一行文字
用鼠标选中表格及后续提示语，点击服务器行为->“+”键->显示区域->如果记录集不为空则显示区域，选择记录集1点击确定
当然需要一句提示语，在页面下面打下文字：对不起，无法找到您的姓名
选择该语句，点击服务器行为->“+”键->显示区域->如果记录集为空则显示区域，选择记录集1点击确定
于是就完成了
记住把<%@LANGUAGE="VBSCRIPT"%>删了
OK了，我们来看一下例如输入了一些奇怪的名字 破费！ 网页上传 一直有同学问我，虚拟主机哪家强
我是根据同学推荐选择的主机屋网站http://www.zhujiwu.com/的虚拟主机，我觉得目前看挺好使的，尤其是还有免费测试版，心满意足吧诸位
上主机屋注册会员，购买0元虚拟主机你会看到下内容 这些内容非常重要
请打开FlashFXP软件，点击电脑图标->快速连接，把刚刚的信息录入，录后打开web文件夹，把刚刚的那些文件都拖过来就可以了
如图所示
回到主机屋的网站虚拟主机控制面板，点击常用功能->设置默认首页，添加denglu.asp
Ok了，网页已经制作完成了相信大家也是比较辛苦了可以点击域名进入网站查看了顺便可以debug一下去网上给自己的网站弄个二维码想怎么玩就怎么玩就不给图了，真正成功的喜悦还是留给各位实践者吧 需要做手机页面网站的，代码区似乎还要多写一些东西如果感兴趣的可以查一查，也可以留言询问 小编大概就知道这么多了，皮毛而已
学习制作网页更多的东西可以回复本公众号进行交流，当然更多是要学学书本上的硬知识的
有时间去论坛啦某乎啦什么的看看帖子也是很有帮助的
三、代码原文 照例还是要把代码给大家的，这个是我现编写的，如果按照上述步骤做下来了，代码什么的应该差不多
<% End If ' end Recordset1.EOF And Recordset1.BOF %>