网站开发实习指导书.docx

资源描述

网站开发实习指导书.docx

《网站开发实习指导书.docx》由会员分享，可在线阅读，更多相关《网站开发实习指导书.docx（30页珍藏版）》请在冰点文库上搜索。

网站开发实习指导书.docx

网站开发实习指导书

《网站开发实习》

实验指导书

广东交通职业技术学院信息技术系

朱强编

2007年12月

网站开发实习描述了一个网站论坛留言本的完整创建过程，实习的目的是为了让学生巩固自己所学的网站建设和网页设计知识。

网站论坛留言本主要包括以下几个部分：

首页、签写留言、管理留言登录、留言本管理、编辑留言、回复留言、删除留言和登录失败8个部分。

主要应用到下列网页设计技术：

数据库文件建立、动态站点建立、数据库的连接、数据的绑定、动态连接地址、页面刷新和服务器行为。

下面是详细的设计过程。

本留言本制作，是一个基于WindowsXP/2000操作系统运行Web应用程序，数据库采用MicrosoftAccess2000作为管理平台。

在网站设计上，将留言本系统分为“前台操作”与“后台管理”两个部分。

其中前台操作，是针对Web访问者而言，由“查看留言”和“签写留言”两个网页构成，分为为index.asp和add.asp。

后台管理部分又分为“登录系统”和“管理系统”两部分组成。

登录系统包含两个网页文件，一个是登录文件login.asp，一个是登录失败文件fail.asp。

如果登录成功就转向管理系统，管理系统由admin.asp、edit.asp、reply.asp和del.asp4个页面文件组成，admin.asp是管理界面，edit.asp是编辑留言页面，reply.asp是回复留言页面，del.asp是删除留言页面。

整个留言本系统的结构如下图所示：

一.设置IIS

在D盘新建一个文件夹guestbook，作为整个留言本系统的根目录，再在根目录下新建一个文件夹images，用来保存图片。

打开【Internet信息服务】设置默认网站属性，选择“主目录”选项卡，将本地路径改为“留言本”所在路径，即“D：

\guestbook”选择“文档”选项卡，查看“启用默认文档”列表框中是否有“index.asp”，如果没有就添加。

完成后单击【确定】按钮，完成本机IIS设置。

二.设置站点

完成IIS设置后进行站点设置。

启动DreamweaverMX2004，在主菜单点击【站点】→【管理站点】命令，出现“管理站点”对话框，选择【新建】【站点】命令，设置本地信息。

选中“高级”选项卡，在“站点名称”文本框中输入“留言本”；在“本地根文件夹”框中输入“D：

\guestbook”，在“默认图像文件夹”文本框中输入“D：

\guestbook\images”；在“HTTP地址”框中输入“http:

//localhost”。

完成后选择“分类”列表框中的“测试服务器”进行设置。

在“服务器类型”下拉列表框中选择“ASPVBScript”选项；在“访问”下拉列表框中选择“本地/网络”选项；其他选项取默认值即可，这样就完成了站点的设置，我们可以在浏览器中输入“http:

//localhost”，地址来访问网站。

三.创建留言本数据库

留言本后台数据库采用Access数据库。

1.打开“MicrosoftAccess”数据库管理软件，选择“空Access数据库”选项，如图1所示。

单击【确定】按钮，在“文件新建数据库”对话框中，选择保存路径“D：

\guestbook”，输入数据库文件名“guestbook.mdb”，单击【创建】按钮。

图1

2.在“guestbook：

数据库”对话框中，选择“使用设计器创建表”。

在出现的对话框中，在“字段名称”中输入两个字段“user”和“pass”，其数据类型采用默认值“文本”，这两个字段分别用于保存“留言本”的管理员帐号和密码。

如图2所示。

图2

图3

3.关闭对话框，会出现一个“是否保存对表“表1”的设计的更改”提示框，选择【是】按钮，保存表名为“admin”，单击【确定】，出现“尚未定义主键”提示框，单击【否】按钮。

4.双击新建立的表admin，在字段“user”与“pass”下分别输入记录“admin”和“admin”，分别表示管理员登录的帐号与密码。

关闭“admin：

表”对话框。

5.再次使用“使用设计器创建表”选项，创建一个表，在表中输入留言本中需要使用的各字段“Name”、“Homepage”、“QQ”、“Email”、“Fromwhere”、“ICON”、“Content”、“Date”、“Reply”、“RDate”。

其中“Name”、“Homepage”、“QQ”、“Email”、“Fromwhere”与“ICON”各字段默认的数据类型为“文本”类型；“Content”与“Reply”字段默认的数据类型为“备注”类型；“Date”与“RDate”字段默认的数据类型为“日期/时间”类型。

各字段表示意义如图3所示。

6.选择字段“Name”，在“字段属性”的“常规”选项卡中，选择“必填字段”，将“否”改为“是”。

同样，选择字段“Content”，将其属性“必填字段”设置为“是”。

7.选择字段“Homepage”，在“常规”选项卡中，选择“默认值”，在其右侧文本框中输入文字“这人没有留下主页地址”，同样，选择字段“QQ”、“Email”、“Fromwhere”、“Reply”，将其“默认值”分别设置为“这人没有留下QQ号码”、“这人没有留下邮件地址”、“未知世界”、“尚无回复”。

8.选择字段“Date”，在“常规”选项卡中，选择“默认值”，单击其右侧按钮，出现表达式生成器对话框，单击“函数”，单击“内置函数”，选择“日期/时间”选项，选择“Now”选项，如图4所示，单击【确定】按钮。

图4

9.设置完成后，关闭“表1：

表”对话框，当出现“是否保存对表‘表1’的设计的更改”的提示框时，单击【是】按钮，将表名存为“guest”；出现“尚未定义主键”提示框，单击【是】按钮。

保存后，打开该表，看到系统自动创建了一个功能为“自动编号”的主键字段，其他字段默认值也出现在相应的字段下，如图5所示。

图5

四.留言本首页文件设计（index.asp）

1.在留言本网站根目录下建立主页文件index.asp，将文档标题改为“留言本”。

在文档中插入一个6行1列，宽度为640（像素），单元格边距和间距均为0的表格，在表格属性检查器设置名字为T1。

2.在表格第1个单元格处输入文字“留言本”，文字大小24像素，居中对齐，背景图像为td.jpg（图片在默认的网站图像文件夹中）。

3.第二个单元格内插入图像view.jpg、add.jpg、admin.jpg，并且右对齐。

4.在第4个单元格内插入一个1行2列的表格T2，表格宽度为100（百分比），单元格边距和间距均为0。

拖动T2，使其左边单元格的宽度为150（像素）。

完成后如下图6所示。

图6

5.将光标定位在表格T2的左单元格内，插入一个3行1列，表格宽度为100（百分比），单元格边距和间距都为0的表格T3。

在T3的第1个单元格内输入“姓名：

”，第2个单元格内输入“来自：

”，第3个单元格内插入图片01.gif。

6.将光标定位在T2的右单元格，插入一个4行2列，表格宽度为100（百分比），单元格边距和间距都为0的表格T4。

合并T4的第1行和第4行，并适当调节第2行与第3行第1个单元格的宽度，然后在这两个单元格内输入文字“留言内容”与“版主回复”。

7.在表格T4的第1行输入“留言时间：

”，设置第1行单元格背景色为“#B5C3DE”，然后在第4行插入page.gif，email.gif和qq.gif三个图片，右对齐，在三个图片旁分别输入文字“主页”、“邮件”和“QQ”。

图7

8.在网站根目录下新建两个文件add.asp，admin.asp以做链接，分别链接到add.jpg和admin.jpg，其中add.asp的链接的属性中“目标”选择“_blank”。

完成后进行测试。

9.预览中发现表格线条过多，解决方法是把表格T2边框由1变为0，表格T4的第2行、第3行边框设为灰色，表格T4的边框设为白色，保存后再预览。

10.预览捉拿嘎看到表格黎的字体太大了，我们对表格中的字体大小给一个重新定义：

新建立一个CSS样式，在选择器类型对话框中“选择器类型”选“标签”，“标签”中选择“table”，“定义在”选择“仅对该文档”。

在出现的“table的CSS样式定义”对话框中的“类型”选项组中，字体为“宋体”，大小为“12（像素px）”，如图8所示，点击【确定】。

图8

11.编辑index.asp的动态数据显示。

1）点击【窗口】→【数据库】命令，打开“数据库”面板，点击面板上的“＋”号图标，选择“自定义连接字符串”。

在出现的对话框中，“连接名称”为“conn”，“连接字符串”为“Driver={MicrosoftAccessDriver（*.mdb）};DBQ=d:

\guestbook\guestbook.mdb”，在“Dreamweaver应连接”处选择“使用此计算机上的驱动程序”，单击【测试】按钮，进行数据库连接测试，如果出现下图所示，表明连接成功。

图9

2）测试成功后，系统自动建立一个新的连接文件conn.asp，保存在网站根目录下的connections文件夹里。

3）单击“绑定”标签，在“绑定”面板中单击“＋”号按钮，选择【记录集（查询）】命令，在出现的对话框中名称取默认值“Recordset1”，在“连接”下拉列表框中选择“conn”，在“表格”下拉列表中选择“guest”，在“列”处选“全部”，“筛选”处默认“无”，“排序”处选择“Date”，排序方式为“降序”，如图10所示，完成后点击【确定】。

图10

4）在“绑定”面板中，可以看到各个字段的记录集，将字段Name、Fromwhere、Date、Content依次拖到index.asp网页中“姓名：

”、“来自：

”、“留言时间：

”、“留言内容：

”的右边；将字段Reply、Rdate依次拖到“版主回复”右边的单元格中相应位置上，如图11所示。

图11

图12

5）选择文档中的01.gif图片，单击“图像”属性检查器上“源文件”文本框右侧的文件夹图标，随后出现“选择图像源文件”对话框，选取文件名自“数据源”，选中“ICON”字段，复制“URL”文本框内容“<%=（Recordset1.Fields.Item（"ICON"）.Value）%>”，然后单击【取消】按钮，回到文档编辑界面。

如图12所示。

6）在“图像”属性检查器上“源文件”文本框中选择“images/01.gif”之中的“01”，单击鼠标右键，选择【粘贴】命令，这样文本框中内容就变为“images/<%=（Recordset1.Fields.Item（"ICON"）.Value）%>.gif”。

（这样做的目的是可以实现ICON字段所包含的图像文件的动态显示。

）

7）操作方法同上类似，选择文档中的文字“主页”，单击属性检查器上“链接”文本框右侧的文件夹图标，在出现的对话框中选择“数据源”单选按钮，然后选择“Homepage”字段，复制URL：

“<%=（Recordset1.Fields.Item（"Homepage"）.Value）%>”到属性检查器的“链接”文本框内，完成主页链接的动态显示。

8）然后再完成Email的操作，注意Email链接URL地址前加上“mailto：

”。

9）选中表格T2，然后选择“应用程序”面板组中的“服务器行为”标签，在“服务器行为”面板中单击“＋”图标，在出现的菜单中选择【重复区域】命令，采用默认设置（显示10条记录），单击【确定】按钮。

10）在表格T1的最后一行前插入一行，将表格T1扩展为7行，新插入行输入文字“目前还没有一条留言”，居中对齐，并选中改行，在“服务器行为”面板中单击“＋”图标，选择【显示区域】→【如果记录为空则显示区域】，单击【确定】按钮。

11）将光标定位在T1的第3个单元格内，选择Drewmweaver主菜单栏中的【插入】→【应用程序对象】→【显示记录记数】→【记录集导航状态】命令，点击【确定】按钮，插入记录集导航状态。

图13

图14

12）将光标定位在插入的“记录集导航状态”标签后面，选择Dreamweaver主菜单栏中的【插入】→【应用程序对象】→【记录集分页】→【记录集导航条】命令，采用默认的设置，点击【确定】按钮，在文档中显示为“第一条”、“前一条”、“后一条”、“最后一条”。

13）将前面插入在表格T1的第3个单元格的全部内容复制到表格T1的第5个单元格，完成后的文档效果如图13所示，按F12键预览，效果如图14所示。

五.设计“签写留言”网页add.asp

设计“签写留言”网页add.asp，主要是设计一个提交表单，并连接一留言本数据库，可以利用表单设计向导功能轻松完成。

1.把首页文件index.asp另存为add.asp，把文档标题改为“签写留言”，将表格T1第1行的“留言本”改为“签写留言”，将图像view.jpg的链接地址设置为index.asp，将图像add.jpg的链接地址删除；将“服务器行为”面板上的所有行为删除，将表格T1第3、4、5、6行内容全部删除，并合并成一个单元格，完成后如图15所示。

图15

2.将文本光标定位在表格T1第3行空白处，选择Dreamweaver主菜单中的【插入】→【应用程序对象】→【插入记录】→【插入记录表单向导】命令。

3.在“插入记录表单”对话框的“链接”下拉列表框中选择“conn”，在“插入到表格”下拉列表框中选择“guest”，在“插入后，转到”文本框中输入“index.asp”，在“表单字段”列表框中删除ID、Date、Reply、Rdate4个字段，然后调整剩余各字段顺序为Name、ICON、Fromwhere、Email、Page、QQ、Content，如图16所示。

图16

4.在“插入记录表单”对话框中继续选择Content字段，在“显示为”下拉列表框中选择“文本区域”；选择ICON字段，在“显示为”下拉列表框中选择“菜单”，并单击【菜单属性】按钮，进行设置。

5.在“菜单属性”对话框中的“填充菜单项”处采用默认设置“手动”，在“菜单项”的“标签”处输入“用户头像-01”，在“值”处输入“01”，然后单击“＋”按钮，增加菜单项，知道20，如图17所示，再次单击【确定】按钮，回到文档编辑界面，如图18所示。

图17

图18

6.继续调整表单。

选择name后的文本框，将字符宽度改为14，在ICON列表菜单右侧，输入文字“查看所有头像”，设置超链接为网页allicon.htm，“目标”下拉列表框选择“_blank”；选中Email表单，设置初始值为“@”，以方便输入Email地址，同理Homepage表单初始值为“http:

//”；选择“插入记录”按钮，将标签改为“提交留言”，在按钮右侧再插入一个按钮，设置其动作为“重设表单”，标签由“重置”改为“重新填写”；最后将相应的英文改为中文，完成后预览结果如图19所示。

图19

7.下一步为表单增加一个“检查表单”行为。

点击Dreamweaver菜单栏中的【窗口】→【行为】命令，打开“行为”面板，单击“＋”图标，选择【检查表单】命令。

在“命名的栏位”列表框中选择“文本‘Name’在表单‘form1’（R）”，选择“值”旁的复选框“必须的”，如图20所示。

依次做如图21－图所示设置。

“Name”、“Fromwhere”和“Content”设置“必需的”属性，“Email”设置“电子邮件地址”属性，“QQ”设置“数字”属性。

图20

图21

图22

图23

图24

（注意，设置“检查表单”行为时，光标要放置在表单内，完成设置后，在“行为”面板中看到的事件是“onSubmit”）至此，留言本前台操作界面文件index.asp和add.asp文件编写完成。

六.设计admin.asp、login.asp、fail.asp文件

admin.asp、login.asp、fail.asp3个网页文件之间存在紧密的关系，首先进行这3个文件的设计并在设计好后一并进行测试。

●设计“留言本管理”页面admin.asp

admin.asp与index.asp类似，只是增加了“编辑”、“回复”、“删除”及“退出管理”4个链接。

1.在站点根目录下新建5个文件edit.asp、reply.asp、del.asp、login.asp、fail.asp。

将index.asp另存为admin.asp文件，然后更改标题由“留言本”改为“留言板管理”，将表格T1第1行的“留言本”改为“留言本管理”，将图像view.jpg、add.jpg和admin.jpg删除。

2.在表格T2第2单元格输入“退出管理”，在表格T4的第1行输入“编辑”、“回复”、“删除”，完成后如图25所示。

3.在文档中选择“编辑”后，点击主菜单栏中【插入】→【应用程序对象】→【转到】→【详细页】命令，出现“转到详细页面”对话框，只需要在“详细信息页”栏目输入“edit.asp”即可，其他项采用默认值，如图26所示，然后点击【确定】。

图25

图26

4.用同样方法为“回复”、“删除”制作动态链接，其中“回复”的链接主页为reply.asp，“删除”的链接主页为del.asp。

5.在文档中选择“退出管理”，在主菜单栏中点击【插入】→【应用程序对象】→【用户身份验证】→【注销用户】命令。

在“完成后转到”文本框中输入“index.asp”，然后单击【确定】。

6.将文件admin.asp保存。

至此“留言本管理”页面设计完成，要实现改页面的访问，必须要由服务器端用户帐号与密码的验证，否则不能访问。

下面介绍“登录管理”界面的设计。

●设计“留言本管理登录”页面login.asp

1.打开add.asp文件，另存为login.asp。

将文档标题改为“留言本管理登录”，将表格T1的第1行“留言本”改为“留言管理登录”，删除图像admin.jpg，为add.jpg图像加上超链接add.asp。

2.删除“服务器行为”面板上的所有行为，删除表格T1第3个单元格中的表格及表单对象。

3.在T1第3个单元格重新插入一个表单，在表单内插入一个3行1列的表格T2，表格T2中插入2个帐号和密码文本域，将其名称属性设置为“user”和“password”，宽度为20像素，密码文本域的“类型”属性要设置为“密码”。

在表单继续插入两个按钮，一个为“提交”按钮，一个为“重置”按钮，如图27所示。

图27

4.在Dreamweaver主菜单栏中选择【插入】→【应用程序对象】→【用户身份验证】→【登录用户】命令，出现“登录用户”对话框。

可以看到已自动显示了表单的一些信息。

在对话框“使用连接验证”下拉列表中选择“conn”，“表格”下拉列表中选择“admin”，在“用户名列”下拉列表中选择“pass”字段，“密码列”中选择“user”字段；在“如果登录成功，转到”文本框中输入“admin.asp”，在“如果登录失败，转到”文本框中输入“fail.asp”；其他选项采用默认值，如图28所示，完成后单击【确定】。

5.将login.asp文件存盘，完成了“留言本登录管理”页面设计。

●设计“登录失败”页面fail.asp

“登录失败”页面，显示非法登录失败信息，信息显示3秒钟后，自动返回留言本首页文件index.asp，设计步骤如下。

1.将login.asp文件另存为fail.asp文件，改标题为“登录失败”；将表格T1第1行的“留言本登录管理”改为“登录失败”；删除“服务器行为”面板上的所有行为，删除T1第3个单元格中所有内容。

2.在第3个单元格中输入“帐号或密码错误，登录失败，请重新登录！

”，并将字体设为红色，居中对齐。

3.在主菜单中点击【插入】→【HTML】→【文件头标签】→【刷新】命令，在“延迟”文本框中输入“3”秒，在“操作”的“转到URL”文本框中输入login.asp，单击【确定】。

4.将fail.asp文件存盘，即完成页面制作。

●测试admin.asp、login.asp、fail.asp文件

1.在浏览器地址栏内输入“http:

//localhost/login.asp”，访问“登录管理”界面，输入帐号“admin”，密码“admin”，成功访问admin.asp页面，密码故意输入错误，访问fail.asp页面。

2.测试可以看到，如果直接在浏览器地址栏中输入“http:

//localhost/admin.asp”，可以直接访问“留言本管理”页面。

为了防止非法访问，打开admin.asp，点击主菜单【插入】→【应用程序对象】→【用户身份验证】→【限制对页的访问】命令，在“基于以下内容进行限制”处采用默认选项“用户名和密码”；在“如果访问被拒绝，则转到”处输入“fail.asp”，如图29所示，单击【确定】按钮。

图28

图29

七.设计edit.asp、reply.asp、del.asp页面

这3个页面是后台管理的页面，都需要加上“限制对页面的访问”行为。

●设计“编辑留言”页面edit.asp

1.在Dreamweaver中将文件login.asp另存为edit.asp，把标题改为“编辑留言”；将表格T1第1行改为“编辑留言”；删除“服务器行为”面板上的“用户登录”行为，删除T1第3个单元格的所有内容，并将光标停留在改单元格内。

2.点击【插入】→【应用程序对象】→【记录集】命令，在“记录集”对话框中的“连接”下拉列表中选择“conn”选项；“表格”下拉列表选择“guest”选项，其他选项如下图30所示。

图30

3.点击主菜单【插入】→【应用程序对象】→【更新记录】→【更新记录表单向导】命令，在“更新记录表单”对话框的“连接”下拉类表中选择“conn”选项；“要更新的表格”下拉列表中选择“guest”选项，其他选项如图31所示。

在“表单字段”列表中删除ID，Date，ICON，Reply，RDate字段，调整顺序为：

Name、Email、Fromwhere、Homepage、QQ、Content；字段Content“显示为”选择“文本区域”。

完成后点击【确定】，则一个表单插入到edit.asp网页中，将表单各个对象的标签改为中文，如图32所示。

4.在主菜单中点击【插入】→【应用程序对象】→【用户身份验证】→【限制对页的访问】命令，在出现的对话框中输入fail.asp，单击【确定】按钮，保存edit.asp。

图31

图32

●设计“回复留言”页面reply.asp

reply.asp页面的设计可以利用edit.asp页面。

1.将文件edit.asp另存为reply.asp，把文档标题改为“回复留言”；将表格T1第1行的“编辑留言”改为“回复留言”；将按钮“更新记录”的标签改为“确定回复”；删除“姓名”、“Email”、“来自”、“主页”、“QQ”表单对象所在的行，将文本区域的标签“留言内容”改为“回复留言”，完成后如图33所示。

图33

2.双击“服务器行为”面板列表中的“动态文本域（Content）”选项，单击“将值设置为”右侧的图标，在税后出现的“动态数据”对话框的“域”

展开阅读全文