饮食网站设计 网络工程专业

PAGEPAGE５青岛职业技术学院毕业论文网络技术与信息处理03级3班陈慧饮食网站设计摘要：本论文主要介绍了一个饮食网站的设计开发过程。利用Dreamweaver网页制作软件及Photoshop和Flash这些图像制作软件实现，其中主要应用了ODBC对象操纵数据库的技术手段，分别介绍了创建饮食网站的前期分析，网站的设计理念，动态站点的设置，电子邮件的链接，数据库的链接，用户的登录和留言界面。本文所设计的饮食网站可以满足用户浏览和留言两方面的需求。第一章主要是对Dreamweaver的发展做了介绍，并说明了Dreamweaver的运行环境以及Dreamweaver在网络中占有很重要的作用。第二章对饮食网站的前期分析进行了总结，介绍了用户需求及该网站实现的功能。第三章进行了具体的设计步骤，具体划分了用户浏览和用户登录两个界面。实现了用户的注册、登录、留言和浏览，并灵活实现了对留言板中新加记录的更新操作，实现了密码维护功能。使用了电子邮件链接技术。设计充分利用关系数据库技术的强大力量，提高了网站的可读性和技术性。关键词：数据库；IIS；ODBC；动态站点；饮食与健康目录摘要前言Dreamweaver的发展Dreamweaver的运行环境Dreamweaver的基本知识饮食网站的分析2.1项目的提出用户需求2.3功能需求2.4资料搜集饮食网站的设计3.1动态网站的设计3.2用户浏览界面的实现3.3用户注册、登录、留言界面功能的实现及ODBC数据源的设置3.4电子邮件功能的实现3.5IIS默认站点的设置网站评价小结参考文献第一章前言1.1Dreamweaver的发展作为一种新兴的信息技术，互联网正以前所未有的冲击力影响着人类的生活，它的出现和发展，正慢慢地改变着人们的生活方式，互联网也因此成为目前比较热门的一个话题，它具有强大的影响力。网页与网站是构成互联网的细胞，提起网页设计与制作，我们自然会想到Dreamweaver，这是最优秀一款可视化网页制作与网站建设软件，它不会降低对HTML原始档的控制，不必学习HTML语法，就能在Dreamweaver中直接网页并且把网页上传。另外，它还提供了许多新技术，如提供的DHTML编辑技术与JavaScript动作库、支持JavaScript编辑技术、XML技术等，特别是整合了Dreamweaver到UltraDev以来，其功能不断加强，可以支持ASP、ASP.NET、ColdFusion标记语言（CFML）、JSP和PHP支持，生成由动态数据库支持的Web应用程序等。1.2Dreamweaver的运行环境任何一款软件都有其特殊的安装与运行环境，要在计算机中安装与运行DreamweaverMX2004，必须具备以下硬件和软件环境：PentiumII处理器或等效处理器，300MHz或以上主频。Windows98、Windows2000、WindowsNT（具有SevicePack3或更高版本）、WindowsME或WindowsXP操作系统。96MB的可用内存（RAM），建议采用128MB内存。275MB的可用磁盘空间。分辨率可达800×600像素的256色显示器。CD-ROM驱动器。DreamweaverMX2004可以完全自定义工作环境，用户可以通过创建自己的对象和命令、修改键盘快捷方式、编写JavaScript代码，以及使用新的属性检查器和站点报告来扩展Dreamweaver的功能。Dreamweaver的基础知识在DreamweaverMX中，站点这个术语可以指Web站点，也可以指用来储存属于Web站点文档的本地硬盘上的文件夹。当开始考虑创建Web站点时，应该按照一系列的规划步骤进行，才能确保成功地使用站点。设置站点的常规做法是：在本地磁盘上创建一个包含站点所有文件的文件夹（称作本地站点），然后在该文件夹中创建和编辑文档。当准备好发布站点并允许公众查看时，再将这些文件拷贝到Web服务器上。在Dreamweaver程序中用户可以对一系列不同类型的对象进行命名，这些对象包括图片、层、表单、文件、数据库域等，这些对象将会被许多不同的工作引擎进行分析处理，这些工具包括各种浏览器、JavaScript脚本解析器、网络服务器、应用程序服务器、查询语言等等。第二章饮食网站的分析2.1项目的提出当今社会是知识飞速发展的信息时代。人民在生活水平不断提高的同时，不但注重物质文明和精神文明的发展，同时向传统的饮食习惯发起了新的挑战。所谓民以食为天，现如今的人们越来越注重饮食给自己带来的影响，也有越来越多的人肯在饮食方面下功夫，来寻找一种真正适合自己的餐饮策略。这就需要我们做出一个关于餐饮业方面的网站，供大家来一起来欣赏与互动。利用饮食网站的方法，不但可以让人们在第一时间内浏览到最时尚的新式菜肴，还可以采取互动方式让大家的兴趣得到满足。饮食网站作为一种饮食信息资源的集散地，图片和资料繁多，包含很多的饮食方法和饮食策略，如今，有很多的健康饮食方法不为人们所知，并且健康的饮食方法对人类的身体是绝对有益的。有研究证明，人的寿命与他的饮食习惯有着密切的关系。当人们要想发表自己的意见时，往往会局限于很少的人际关系。那么，创建一个饮食网站，在这里向人们介绍各种菜式，各种不同的烹饪方法及不同时间该吃什么样的食物，并且，开辟出一个留言板块，让喜爱饮食健康的人们在这里畅所欲言，这对于有饮食健康概念的用户来说，无疑是一种最美妙的方法。2.2用户的需求饮食网站主要是向用户提供浏览和留言功能。所谓浏览，就是用户可以通过在IE浏览器中的地址栏中输入网址，点击自己感兴趣的页面和信息去了解自己想了解的信息和图片。留言功能，则需要用户进行注册，注册时需要输入用户名和密码，才能注册提交成功，成功后会进入登录页面，输入用户名和密码后就可以进行留言并浏览留言首页。在这里，如果用户已注册，则需直接进入登录页面即可。这样，每个用户的见解都会被大家看到，提高了公众的认证性。另外，还提供了用户与我双向的联系方式，即电子邮件链接，用户将自己的想法能过邮件发给我，这也是用户对我的网站的认同。2.3功能的需求Dreamweaver基础知识设计数据库与网页的链接：运用MicrosoftAccess数据库，将数据表与网页绑定，并设置所需的服务器行为。设置电子邮件的链接设置ODBC数据源用户浏览界面设计用户登录页面，通过用户名和密码的验证进入留言板块。如图：接下页用户注册、登录、留言模块：用户名密码已注册用户留言首页我要留言通过密码验证用户名饮食网站密码未注册注册登录用户名密码已注册用户留言首页我要留言通过密码验证用户名饮食网站密码未注册注册登录第三章饮食网站的设计3.1动态站点的创建根据饮食网站的要求，我们使用的是用户注册登录界面，属于动态页面，网页的扩展名应为.asp。所以我们要把站点创建成为动态的站点。具体做法是：在站点菜单中选择管理站点子菜单，打开管理站点对话框，点击新建站点为站点起名字在下一步中选择“是，我想使用服务器技术。”并选择ASPVBScript服务器技术选择在本地进行编辑和测试（我的测试服务器是这台计算机）及选择文件存储位置点击测试URL点击下一步完成。3.2用户浏览界面的实现如果要让用户浏览到准确而赏心悦目的信息资料，那就一定要花精力去搜寻有关饮食健康方面的资料。在这方面，我通过在互联网上搜集到一些有关方面的资料条闻和图片及Flash小动画，并且，我利用Photoshop图像处理软件做了一些效果图片用做网页设计当中。这样，就增加了网页的可读性与欣赏性。关于网站结构，我设置了1个主页，7个子页，它们分别是食尚聚焦、烹饪前沿、概念橱房、营销攻略、原料超市、美食驿站、关于我们。在主页中可以进行注册或登录，在其它的子页当中分别根据各自的主题来进行资料显示，各个子页与主页都有超级链接，并把链接目标设为_blank。在每个页面底端，制作了一个邮件链接。并在首页的顶端做了一个marquee属性的文本，marquee属性是在插入菜单中的标签子菜单中选择HTML标签，在右面的框中选择marquee属性。具体的网站结构图如下页：网站结构图：食尚聚焦：Photoshop图片+导航条+新闻图片+信息文本链接+Flash动画+电子邮件链接烹饪前沿：Photoshop图片+导航条+新闻图片+信息文本链接+Flash动画+电子邮件链接概念橱房：Photoshop图片+导航条+新闻图片+信息文本链接+Flash动画+电子邮件链接首页营销攻略：Photoshop图片+导航条+新闻图片+信息文本链接+Flash动画+电子邮件链接首页原料超市：Photoshop图片+导航条+新闻图片+信息文本链接+Flash动画+电子邮件链接美食驿站：Photoshop图片+导航条+新闻图片+信息文本链接+Flash动画+电子邮件链接关于我们：Photoshop图片+导航条+新闻图片+信息文本链接+Flash动画+电子邮件链接首页：marquee属性文本+Photoshop图片+导航条+新闻图片+信息文本链接+Flash动画+电子邮件链接+注册界面链接+登录界面链接在整个网站的制作中最多用到的是表格和布局表格，将各个网页的布局用表格的形式表现出来，并应用了页面属性（主要是背景图像）。3.3用户注册、登录、留言界面功能的实现及ODBC数据源的设置要实现用户的注册、登录、留言功能，必须与MicrosoftAccess数据库进行链接，但这之前必须要做好ODBC数据源的设置：打开控制面板，选择管理工具。双击数据源（ODBC），打开ODBC数据源管理器。选中系统DSN，点击添加，添加数据库类型，这里选择DriverdoMicrosoftAccess(*.mdb)。填写数据源名，并选择数据库。确定完成。ODBC数据源设置完毕后，要在所建的MicrosoftAccess数据库中创建数据表，这里我创建了zhuce和liuyan两个数据表，zhuce表用来与注册界面连接绑定，liuyan表用来与留言界面连接绑定。在zhuce表中设置了userid和userpsw两个字段，用来盛放注册界面表单中的用户名和密码。在liuyan表中设置了userid、contect和email三个字段，用来盛放留言界面表格中的用户名、留言内容和Email字段中的记录。下面介绍一下如何实现用户注册、登录、留言界面的功能：注册界面功能实现：在页面上的表单中键入用户名和密码的文本框，添加注册和重写按钮。选中注册按钮，选择窗口菜单中数据库子菜单，将数据库面板显示在屏幕右侧。选择数据库选项卡，点击+号选择数据源名称（DSN），打开数据源名称（DSN）对话框，输入连接名称为conn，数据源名称（DSN）设为MicrosoftAccess数据库名称，Dreamweaver应连接使用本地DSN。点测试按钮，测试一下是否连接好了。测试无误按确定键。再选中绑定选项卡，点中+号选择记录集（查询）。输入名称，选择连接名为conn，表格选择zhuce。点测试按钮，测试一下是否连接好了。测试无误按确定键。10）选中服务器行为选项卡，点中+号选择插入记录。11）连接名为conn，插入到表格选择zhuce，插入后转到选择登录页面。获取值自在注册界面上的表单名，再把表单元单与列设置好，提交为文本。12）确定完成。这时，注册页面与数据库的连接已完成。登录界面功能实现：在页面上的表单中键入用户名和密码的文本框，添加登录和重写按钮。2）选中登录按钮，选择窗口菜单中数据库子菜单，将数据库面板显示在屏幕右侧。3）选中绑定选项卡，点中+号选择记录集（查询）。4）输入名称，选择连接名为conn，表格选择zhuce。5）点测试按钮，测试一下是否连接好了。6）测试无误按确定键。7）选中服务器行为选项卡，点中+号选择用户身份验证登录用户。8）从表单获取输入选择表单名，用户名字段和密码字段都选择用户名和密码文本框的名字，使用连接验证为conn，表格为zhuce,用户名列为userid，密码列为userpsw，如果登录成功转到liuyan.asp，如果登录失败，转到fail.asp页面。9）确定完成。至此，登录页面就与数据库关联好了，登录成功就会转到留言页面，留言界面，有两个链接：我要留言和留言首页。现在介绍我要留言界面的实现：在页面上的表单中键入用户名和Email的文本框、留言内容的文本区域，添加提交按钮，并提示提交后将转到留言首页。2）选中提交按钮，选择窗口菜单中数据库子菜单，将数据库面板显示在屏幕右侧。3）选中绑定选项卡，点中+号选择记录集（查询）。4）输入名称，选择连接名为conn，表格选择liuyan。5）点测试按钮，测试一下是否连接好了。测试无误按确定键。选中服务器行为选项卡，点中+号选择插入记录。连接名为conn，插入到表格选择liuyan，插入后转到选择留言页面。获取值自在我要留言界面上的表单名，再把表单元单与列设置好，提交为文本。确定完成。所以，我要留言界面的功能就实现了，提交后将自转到留言首页。最后介绍留言首页功能实现过程：在页面中插入一个2行3列的表格，字段名分别为用户名、留言内容和Email。按照同上的方法把liuyan表绑定到网页上面。选中服务器行为选项卡，选择+号的重复区域子菜单，选择记录集为2）中的记录集，显示所有记录。确定。再打开绑定选项卡，把记录集（rs4）前面的+号打开，再把各个字段名拖入到网页表格中适当的位置。这样留言首页的功能也就实现了。3.4电子邮件功能的实现这一功能主要是在我与用户之间搭起一座桥梁。这个操作非常简单：在每个页面底端输入我的邮箱地址，选中地址点击插入菜单的电子邮件链接子菜单，在E-mail：处添加上我的邮箱地址即可。3.5IIS默认站点的设置如果有的电脑没有IIS组件，可以在控制面板中添加组件（须插入Windows系统盘）获得。添加好之后，打开管理工具中的Internet信息服务对话框，选择本地计算机服务器，右击默认网站选属性，在主目录选项卡中，如果站点的文件夹就放在默认的站点文件夹c:\Inetpub\wwwroot中，就不用修改；如果站点的文件夹放在别的目录下，就要在这里将路径改为刚才的目录下，点击确定即完成。这样只要在Internet信息服务对话框中选取主页，右击浏览就可以欣赏到完整的网站了。第四章网站评价饮食网站