阳光购物网站设计

[键入文字]阳光购物网站设计 I阳光购物网站设计学校：辽宁石油化工大学专业：软件技术班级：0931软件学号：09姓名：孟昭龙指导教师：苏金芝阳光购物网站设计摘要网站设计是一种建立在新型媒体之上的新型设计。它具有很强的视觉效果、互动性、互操作性、受众面广等其它媒体所不具有的特点，它是区别于报刊、影视的一个新媒体。它既拥有传统媒体的优点，同时又使传播变得更为直接、省力和有效；为了适应当今时代发展，必须增加网页设计的学习；为了更好的体现网页这一新型设计的特点，将它和传统媒体进行比较，了解它的优势所在；一个成功的网站，首先在观念上要确立动态的思维方式，其次，要有效地将图形引入网页设计之中，增加人们浏览网站的兴趣，在崇尚鲜明个性风格的今天，网站应增加个性化因素。网站设计发展如此迅速，作为计算机专业的学生本次毕业设计我就选择了阳光购物网站设计，本论文也是针对本次毕业设计所编写的论文！本论文一共分为六章。第1章是引言，概括的介绍了阳光购物网站制作的相关信息，如选择的语言，软件以及大体思想等。第2章介绍的是阳光购物网站制作的背景及目标，论述了本次毕业设计选择阳光购物网站制作的原因和想要达到什么样的目标。第3章介绍了网站制作的运行环境及软件需求，也就是论述了阳光购物网站制作和运行需要的各种软硬件环境。第4章网站详细设计，也是本次论文的最主要的章节。详细的介绍了阳光购物网站制作的流程，并对每一流程都做了详细的介绍，其中包含了一些结构流程图，网页图片，还有部分程序段，增加了论文的可读性，让大家更好，更明确，更主观的了解个人网站制作的步骤和制作效果！第5章是测试与发布，介绍了个人网站制作完成的后期工作，包括如何通过测试使网站正常运行和如何将网站发布到网上。第6章结论与展望，论述了在本次设计中的体会与心得感悟。由于时间仓促，加上本人所学知识水平有限，毕业设计与论文中存在许多的错误，希望老师与同学们批评指正！关键字：阳光购物网站；；网页制作；目录第1章引言 1第2章网站制作的背景及目标 32.1网站制作的背景 32.2网站制作的目标 4第3章网站制作环境及软件 63.1制作环境 63.1.1软件环境 63.1.2硬件环境 63.2制作软件 6第4章网站详细设计 104.1网站的主题定位 104.2资料搜集 114.3结构设计 114.4详细设计 124.4.1导航栏 124.4.2首页设计 144.4.3用户等登陆页面 164.4.4用户注册页面 174.4.5商品浏览页面 194.4.6商品管理登陆页面 204.4.7商品管理员注册页面 224.4.8商品管理页面 234.5形象设计 254.6数据库设计 25第5章测试与发布 275.1网站测试 275.2网站发布 28第6章结论与展望 306.1结论 306.2展望 30参考文献 32致谢 34第1章引言在这个世纪之交的时刻，我们每个人都清晰的感觉的到信息时代的气息，科幻小说里的幻想已逐渐变成现实——你可以在千里之外看到家人的音容外貌，大夫可以通过网络跨洲际给病人会诊，而这一切是时代发展的必然。Internet已经融入千家万户，成为我们生活中必不可少的一部分。作为Internet的一部分，网站使得浏览Internet变得非常简单，只要用鼠标点击，就可以显示图文并茂的网页，甚至可以有声音、视频、动画等！网站是由一个特定人群和组织控制的一组网页的集合。与简单的网页不同，网站中的网页结构性较强，具有层次性，组织比较严密！随着社会信息化的飞速发展，网站技术的应用也越来越普及，网页设计师与网站开发人员在企业中的需求量日益增加。拥有一个具有阳光购物特色的精美网站是网上购物者用户的梦想。一些企业和商家也通过制作公司主页来宣传自己的产品，进行网上业务等活动！网站设计已成为当今社会的一个潮流！用于网站设计的语言有很多种，为了让自己制作的购物网站信息量丰富，功能尽可能的强大，本次购物网站制作我主要运用Microsoft公司动态服务器页面的最新版本ASP.NET语言。它是一种基于服务器的功能强大的技术，用于为万维网站点或企业的内部创建动态的、交互式的HTML页。ASP.NET语言具有效率高，可重用性强，代码量小等众多优点。是网站制作首选较强的一种语言！同时在制作过程中间接或直接的运用到了Dreamweaver，Flash，Photoshop，VisualStudio2005等各种与网站设计有关的软件来编辑和完善本次网站。提高网站的美观性，丰富网站的内容，提高网站的可视化，让网站吸引更多人的目光！网站共分为首页，用户注册登陆，用户观看商品，选择购物，管理者注册登陆，管理商品六大板块。分别向大家展示了有关购物的各种信息。用户信息，商品信息，购物信息，管理员信息！为了提供网站的交互性和动态性，这几大模块主要采用的是动态网页。制作过程中运用到了数据库，Css样式单等各种技术。下面的章节中将详细的介绍这几大板块的制作过程，设计的页面效果和制作中运用到的技术。这个网站设计师是属于个人开发，针对的浏览者范围较少的网站，主要用于展示简单购物过程的一个小平台！本次网站是对我三年学习的一个检验，所以在制作过程中我尽量的使用学习到的各种知识点来丰富网站，使其内容更丰富，页面更美观，功能更全面！希望可以给大家一个好的印象！在以后的章节中我会对网站制作过程中涉及到的知识点做适当的介绍。同时也会为大家详细介绍购物网站制作的过程与效果！从最初的设想，到制作的流程再到最终的成果，一步一步走来，一步一步的成长与进步！第2章网站制作的背景及目标2.1网站制作的背景虽然这不是专业的网站设计，购物者们大多是上网的人们，他们能够登陆这个网页，张扬他们的个性，释放了他们的需求，就已经展现了他们的自信和对生活的信心，虽然他们进入的网页并不是那么的完美，但给他们的感觉是简洁、直接，值得他们去信赖。我以“阳光购物”这一理念，已经在生活中影响了大多数的购物者，被这种健康的理念所感染，更多的人愿意参与进来，阳光购物走进我们的生活。岁月如流，时光匆匆，三年一起走过的日子里留下了许许多多的回忆，许许多多的不舍！在网上购物作为一员，为了将来即使远在天边释放彼此的信息，为了给自己一个展示的平台，所以本次毕业设计我选择了制作购物网站。一方面可以将自己的信息，自己的所知随时发布在网上，方便与其他同学联系，交流信息，真心的希望时间拉开的只是我们彼此的手却无法拉开我们心灵的距离，希望通过这个网站与远在他方的同学们增进了解，增进联系！另一方面也希望通过这个网站向众人介绍购物简单的过程，让更多的人认识网购，了解网购！正所谓多个朋友多条路，希望可以通过这个网站获得更多来自五湖四海的交流，认识更多志同道合的朋友，与他们交流在这个小小的温馨的平台上！还有一方面就是在这个网络不断发展的信息时代，拥有一个属于自己的网站是许多人的梦想，也是许多人的向往的天堂，作为计算机专业的学生，作为即将走出校园的我，非常希望可以拥有一个运用所学的知识，制作的真正属于自己的网站，诚然，在茫茫网海里，在许多专业的网站制作者，网站设计师面前我所制作的网站根本就是小巫见大巫，班门弄斧，可我仍想尝试一下，用自己的力量，用自己学的知识制作一个简单的网站，向大家展示自己！希望这个网站可以在我与已经在远方或是即将走向远方的同学们之间建立起一架永恒的桥梁！希望这个网站可以让我认识更多我的不足！希望这个网站可以让我更好的理解与运用我所学到的知识！希望我可以顺利的完成本次毕业设计，制作出一个成功的网站！2.2网站制作的目标在制作网站之前曾对本次网站制作有很多很多的设想，然而由于自己的能力有限，有些设想根本就是自己可望而不可即的奢望，所以最终根据自己的实际情况，对网站制作制定了比较现实的目标，希望自己可以一一达到。网站分为首页，用户登陆，用户注册，浏览商品，管理员登陆，管理员注册及管理商品七个版面，下面先对各个版面想要达到的目标做下简单的介绍：（1）首页：制作成一个简单的页面。页面中除了必要的Logo，便是简单的图片，一些简单的文字，几个简单的功能，希望给人简简单单，一目了然的印象！页面中动态的显示问候语连接等作用！主要的功能是跳转到其他界面，让大家了解网站的大体的风格，使大家对网站有一个初步的印象！首页有用户管理，管理员管理和购物车三张链接图片，让网站主人具有不同的权限，实现对网站的管理与操作！首页的制作宗旨就一个字：简（2）用户登陆版面：一个让用户登陆进入浏览商品的版面！主要的功能用户名和密码点击登陆按钮，就可以利用系统默认进入浏览商品！同时还有注册按钮如果用户是第一进入这个界面，必须先去注册！（3）用户注册版面：用户注册版面分界线下分别有三个文本框分别输入用户名、密码和确认密码，一个名为注册的按钮版面！在这里主人可以将自己的喜欢的名输入出来，作为以后本网站的购物者一员。这个版面实现的功能有：输入所需要的内容，通过点击按钮，所输入的内容存入数据库！（4）浏览商品版面：一个用于浏览的版面！在这里可以浏览所有的商品简单信息，点击详细信息看到一件商品详细信息，有自己看中的可以点击“放入购物车”，进入另一个窗口界面，所选商品放入购物车。这个版面主要由Datalist数据服务控件，需要实现的功能是：显示商品类别及商品简单的信息，点击“详细信息”出现所看信详细息。这是在一个窗口实现的。（5）管理员登陆版面：同用户登陆版面相似。（6）管理员注册版面：同用户注册版面相似！(7)商品管理版面:这是一个侧重于管理的版面，因为是个人版面，网站的管理权也归个人所有，所以也可以说这是一个商品管理员的版面，在这里，主人可以对数据库中的数据进行删除，修改，添加等功能，实现数据的管理！同时可以返回用户界面，实现浏览商品权限！网站的配色原则是“总体一致，局部协调”，就是网页的整体效果应该是和谐的，只有局部、小范围的地方让色彩有一些强烈的对比！网站的主打色为象征一尘不染的白色，让人产生肃然起敬的感觉！可以因为设计效果的需要，或是为了强调某部分而使用其他的色调，给人一种对比和深刻的印象！网站制作过程中要尽可能多的向大家展示更多的信息，尽可能的丰富页面的内容，尽可能的利用更多的知识点，当然不能是没有任何作用或是与网站主题无关的内容！要在围绕主题的情况下丰富网站，丰富网站，提高自己！第3章网站制作环境及软件3.1制作环境3.1.1软件环境由于本次个人网站的制作主要运用的是ASP.NET语言，所以网站的制作环境也就是运行ASP.NET的环境。需要先对其软件运行环境做一下介绍。首先需要安装Web服务器的IIS。IIS是随操作系统一起提供的，如果已经安装可以在控制面板的管理工具中找到它。如果没有找到就需要安装。只要安装成功后，启动Windows系统，IIS就会自动启动。这里不对其安装及设置的具体过程做详细介绍了。MDAC是一个用于使用用户可以利用的ASP.NET与数据库进行通信并在页面上显示数据库内容的一套组件，在Windows2000中附带了MDAC2.5。要得到更新的版本，可以到站点上免费下载。.NETFramework是一个程序设计环境，它提供了具体的服务和技术，方便开发人员建立相应的应用程序。它是.NET的核心，分为MS中间语言，CLR，.NETFramework类库，.NET语言，ASP.NET和Web服务。这个软件可以从Internet上下载到本地的服务其中进行安装。3.1.2硬件环境并不是每一台计算机都可以制作网站的，一个网站的制作对计算机硬件也有相应的要求。下面便是这次网站制作所需要的硬件环境！（1）CPU：IntelPentiumII-class300MHz(最好IntelPentiumIII-class600MHz)（2）内存：96MB(最好128MB)（3）磁盘空间：250MB(完全安装)155MB(快速安装)（4）显示：800x600，256colors（5）CD-ROM：Required3.2制作软件购物网站制作中运用到了许多制作软件来完善和美化网站。因为选用的网站制作语言是ASP.NETVB，所以主要的编辑环境为VisualStudio。利用DreamWeaver作为辅助工具对网站进行制作开发和美化。网站制作过程中运用到的图片处理是通过PhotoshopCS2来实现。为了增添网站的动态性，还运用Flash制作了一个小小的Flash。同时网站制作中大量使用了Html代码与Css层叠样式表单。下面将对这些软件做一个简短的介绍。（1）VisualStudioVisualStudio是一套完整的开发工具集，它向开发的各个过程提供辅助工具。举个例子，你学习英语，你当然可以照着书本学，你也可以买一个学英语的数字助理（PDA或电子词典），现在很多数字助理提供背单词、朗读课文、短句练习等功能，这里的数字助理就好比我们的VisualStudio，数字助理提供了一套学习英语的工具集，而我们的VisualStudio提供了开发应用程序的工具集。编写.NET程序最简单的环境其实有一个记事本和一个编译器就足够了，之所以需要工具集或者IDE是因为现在企业需要你快速、高效地开发出稳定、实用的计算机应用程序，而工具集的作用也在于帮助你快速、高效地开发。对于运用ASP.NETVB语言编辑网站，它具有很大的优势与方便。（2）FlashFlash虽然出现时间不长，但已经成为最首要的Web动画形式之一。Flash不仅比DHTML易学的多，而且有很多重要的动画特征，如关键帧补间、运动路径、动画蒙版、形状变形和洋葱皮等。利用这个多才多艺的程序，不仅可以建立Flash电影，而且可以把动画输出为QuickTime文件、GIF89a文件或其他许多不同的文件格式（PICT、JPEG、PNG等）。他是一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP

功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。（3）DreamweaverDreamweaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、Shockwave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML(DynamicHTML)的设计，使得页面没有plug－in也能够在Netscape和IE4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。Dreamweaver还采用了RoundtripHTML技术。这项技术使得网页在Dreamweaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。Dreamweaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。（4）HTMLHTML（HyperTextMarkupLanguage超文本标记语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WorldWideWeb上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名。（5）CSSCSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。（6）PhotoshopCS2PhotoshopCS2是对数字图形编辑和创作专业工业标准的一次重要更新。它将作为独立软件程序或AdobeCreativeSuite2的一个关键构件来发布。PhotoshopCS2引入强大和精确的新标准，提供数字化的图形创作和控制体验。对于处理图形它具有属于自己的特点与优势，是网站制作中必不可少的一种图形处理工具。也是广泛流行的网站三剑客之一。第4章网站详细设计4.1网站的主题定位网站给人第一影响就是主题突出，那么如何定位一个网站与主题的关系呢？是一站一个主题还是一站多个主题呢？（1）网站运作的前期定位当一个网站处于初始发展的阶段，也就是主题形成的阶段的时候，它可能是脆弱的，是幼稚的，在优胜劣汰的网络选择中，成活下来的网站必定具有的是同类网站在某种环节中所缺乏的优点。定位当时就是这么形成的——找出成功网站之所以能成功的原因，形成自己的战略的定位，再形成自己扩张的资本。既然是幼稚的，也就无可厚非，因为在任何建站的前期，所进行的都是实在的充实内容工作，任何工作都不能脱离这个主题和中心。任何的人来谈定位，这都是不切实际的。在这个时候的定位是模糊的，也是幼稚的。从这点来说，网站做垃圾站是没有发展前途的。（2）网站运作的战略定位网络信息时代，网站的初期很简单，当网络上有热门内容好做的时候，就做什么内容，在侥幸的网络运作中，网站赚钱了，就开始盲目的扩张，这样的例子不乏少见。也正是网站主们从不肯花心思静下心来好好研究自己的定位战略，研究自己该做什么，适合做什么，他们的理由是，宁可花时间去研究蜘蛛，研究收录，再定什么内容。当然，搜索需要研究，收录也需要研究，但并不是网络需要什么，你就能做做什么的。在新的网络竞争中，应该研究我适合或者我能做什么。而这是目前网站主大多都欠缺的，也是为什么现在的网络潮流上，大多网站为什么只能存活三年到五年的原因。（3）满载负荷的主题该歇歇脚了价值不会无限度的增长，网站主题也应该随时调整。网站的柁在站长手中，从网站之初到品牌成长，到网站处于成熟期，说的幼稚点，很多的网站在一成不变的坚持自己的一个定位，一个主张，一个战略，一个目标。本次网站主题的为春暖花开，希望走出学校的我们不论遇到什么困难都要相信面朝大海，春暖花开！希望进入社会的我们能够克服所有的困难，用自己的力量去开创属于自己的天地！网站的色彩是树立网站形象的关键之一，也是体现网页美观的重要元素。在网站制作中我选择了代表希望的绿色！有了明确的目标下面就要进行下一步，收集材料了。4.2资料搜集收集素材是网页制作过程中必要的准备，也是在制作网站前的一个首要的工作，要想收集到合适的素材，就需要依据网站的主题以及整体的风格进行收集获取。本次制作的网站只是一个小型的购物网站，是一个购物展示的平台，许多材料都是关于购物的信息，所以大多数资料都采用的是原创，采用的是主人平时购物的收集，资料是属于自己的风格，自己思想的素材！当然这个事事离不开网络的年代，网络收集还是一个不可少的资料收集的途径。设计过程中需要大量的图片来美化页面，这些图片素材主要是从互联网上搜索，下载挑选的；用于制作相册的照片，是在风和日丽的日子里到校园拍摄的或是在网上收集到的以前的照片；通过网络搜集或是平日里收集的自己喜爱的图片！作为网站，文字是相当于主打歌的素材，特别网站中有浏览商品这个版面，需要大量的文字素材，除了在网上收集了一些素材外，其中大部分的素材是自己创作的！4.3结构设计如今，我们都知道一个好的站点应该有：非常好看的设计、友好的界面、毫无缺点的结构、智能化的后台处理以及非常优秀的内容。在网站制作过程中，结构设计就像是一棵大树的树干，是整个网站制作过程的精髓。（1）栏目和板块网站的结构设计其实也就是合理的设计网站的栏目和板块。首先应突出主题；其次应该有个网站指南或更新列表之类的栏目；接着要有一个与读者交流的栏目；最后最好有个说明性的栏目，以方便网友。本次网站设计栏目与板块的结构设计如图：阳光购物网站阳光购物网站商品管理员购物者商品管理员购物者否否注册注册注册注册否是登陆浏览网站其它模块否是登陆浏览网站其它模块是否登陆是否登陆商品信息管理、订单管理用户管理等商品信息管理、订单管理用户管理等否否选择商品否否选择商品是是是在线支付购买查看订单更改商品数量购物车是在线支付购买查看订单更改商品数量购物车图4.1板块设计图（2）目录的结构设计目录的结构设计要注意以下几点：按栏目内容建立子目录；在每个主目录下都建立独立的images目录；目录的层次不要太深；避免使用中文目录；4.4详细设计网站这个大树现在已经有了结构设计也就有了粗壮的主干，那么下面我们要给它添加枝叶了！首先这第一条枝叶当然要是导航栏了！4.4.1导航栏网站中存在大量的超级连接，虽然网页上的超级链接能帮助访问者迅速地得到想要的信息，进入需要的页面，但同时也很容易使访问者在超级链接的海洋中迷失了自己，不知道自己的位置。因此，导航栏对于一个网站来说是至关重要的，也是必不可少的，更是详细制作网站的首要工作和必备工作！导航栏一般分为两大类：纵深型和横向型。本次个人网站设计我所采用的导航栏是横向型。导航条包括六大部分：依次为Logo,用户管理，购物车，商品管理。可以通过点击这六个部分分别进入不同的页面，迅速的找到需要的信息，在这个网站的海洋中起到导航灯的作用！为了增添网站的整体美观和体现网站的独特的风格，在导航栏中加入体现主题的图片，整体以象征希望的绿色为主，绿绿的枝条上开着点点小小的黄花，就像我们的青春充满着朝气，充满着幻想，充满着希望，要相信面朝大海，春暖花开！图片上的字也就是这个网站的主题：春暖花开！在导航条和图片中间加入了一个小小的特效，漂亮的七彩动态线条。增添了页面的动感！同时也与网站的主题相呼应！导航栏整体的设计效果如图4.2所示图4.1导航栏导航栏设计的部分代码：<div><Html><bodybgcolor="#ffffff"><Formrunat="server"><imgsrc="image\logo.jpg"Width="20%"height="50"><imgsrc="image\nav_Blank.jpg"Width="45%"height="50"><asp:hyperlinkid="log"ImageUrl="image\nav_log.jpg"navigateUrl="Userlogin.aspx"target="main"runat="server"/><asp:hyperlinkid="cart"ImageUrl="image\nav_cart.jpg"navigateUrl="cart.aspx"target="main"runat="server"/><asp:hyperlinkid="mang"ImageUrl="image\nav_mng.jpg"navigateUrl="adminlog.aspx"target="main"runat="server"/></form></body></Html></div>4.4.2首页设计首页是网站设计的第一步。许多人也认为网站设计就是首页设计，首页水平高低代表网站水平高低。在一定程度上确实如此，所以首页的风格样式、色彩布局、栏目设计、文字表述等成为网站最容易产生争议的地方。所谓仁者见仁，智者见智，这上面永远没有大家一致满意的意见，更多的是体现直接设计者的性情风格。随着对网站认识的变换，主页的样式也经常变换。但是，主页应该明白无误地告诉用户其目的，这一点是肯定的。首页设计有两种主要的趋势：追求画面美观效果（静态）和追求内容丰富效果（动态），前者适合内容不多的企业网站，后者适合内容丰富的综合网站。而一些功能性网站，就常常把最主要功能突出在首页中心，如搜索引擎和大型数据库。作为购物网站的首页，它并不是大型的网站也不是什么内容特别丰富的综合网站，我所希望的是我的网站给大家一个很简单的页面，希望在大家进入的时候有一种简单明了的感觉。就像我所希望的生活简简单单，明明了了，不需要太多的色彩！所以网站的首页我制作的很简单！页面中除了必要的导航栏外主要分为两部分。第一部分包括介绍商品简单的信息。背景为白色，用DataList数据服务控件。第二部分包括购物车，背景为浅蓝色，“继续购物”连接到首页，更新购物车啊（更改商品数量），主要以表格形式展现：删除，商品名称、单价、数量、总金额，当选择的商品放入购物车，总金额直接计算出。下图便是首页的制作效果图4.2首页效果4.4.3用户登陆页面这是一个用户开始的页面。！这个版面的设计主要是运用输入的内容与数据库的的里相对比较，如果是相同即登陆成功进入首页。下面是有关数据的相关代码：<%@importnamespace="System.Data.OleDb"%><scriptlanguage=vbrunat=server> SubLogin(ByValsenderAsObject,ByValeAsEventArgs)DimUserNameAsString=txtUserName.TextDimPassWordAsString=txtPassWord.TextIfNotUserName=""AndNotPassword=""Thenmessage.Text=checkuser(UserName,PassWord)Ifmessage.Text="ok"ThenSession("UserName")=UserNameResponse.Redirect("default.aspx")EndIfElsemessage.Text="请输入完整的用户信息！否则<ahref=Userregister.aspx>返回用户注册</a>。"EndIfEndSubFunctioncheckuser(ByValnAsString,ByValpAsString)AsStringDimconnAsNewOleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath("eshop.mdb"))DimstrSqlAsString="select*from用户whereUserName='"+n+"'andPassWord='"+p+"'"conn.Open()DimcmdAsNewOleDbCommand(strSql,conn)DimdrAsOleDbDataReader=cmd.ExecuteReader()Ifdr.Read()ThenReturn"ok"ElseResponse.Redirect("Userlogin.aspx")EndIfconn.Close()EndFunctionSubregister(senderasobject,easeventargs)Response.Redirect("UserRegister.aspx")EndSub</script>下图是用户登陆面效果：图4.3登陆页面4.4.4浏览商品页面浏览的商品详细信息这个版面。看看商品的类型、数量、图片、等。个版面除了前面提到的必要的导航栏以外，和购物车版面同一的主题l你想看那个商品的详细信息！在那个<详细信息>点击一下在其下面出现相应的信息，同时还有图片只要你单击列表中你所喜欢音乐的名字，就可以调用系统默认的播放软件，播放你所选中的音乐，方便而又简单！页面中还有三个Web服务器控件控件Linkbutton，Text值分别为“关闭”，恢复原来的局面。下面是调用系统默相关代码：<SelectedItemTemplate><b><asp:Imagebuttonid="myimage"bgcolor="grey"borderwidth=6bordercolor="#ffffcc"ImageUrl='<%#DataBinder.Eval(Container.DataItem,"ProductImage")%>'runat=server/><p> <br><b>商品编号：<%#Container.DataItem("ProductID")%><br><b>商品数量</b>：<%#Container.DataItem("CategoryID")%><br><b>商品种类</b>：<%#Container.DataItem("Productkind")%> <br><b>商品名称</b>：<%#Container.DataItem("ProductName")%> <br><b>商品价格</b>：<%#Container.DataItem("Price")%> <br><b>商品简介</b>：<%#Container.DataItem("Description")%> <br><b>商品生产商</b>：<%#Container.DataItem("MadeBy")%><br><b><Asp:LinkButtonId="button2"Text="<关闭>"CommandName="close"Runat="server"/> </SelectedItemTemplate>下图是浏览商品的效果：图4.4音乐页面4.4.5管理员登陆页面用户登陆类似下图是留言板界面的效果：图4.5留言板页面效果4.4.6商品管理员注册页面用户登陆类似相册页面如下所示：图4.6相册页面4.4.7商品管理页面对商品管理的界面！诚然动态页面具有显著的优势，商品的信息变动很大的，因为购物者无时无刻的进行购物，这需要管理员对数据库的管理要认真负责，常常检查数据库。个人资料的页面效果入下图所示：图4.7个人资料4.4.8商品管理员页面因为这是个购物网站，是需要自己仿照正式网站制作的网站，主人界面也就是管理页面。主要的功能就是数据管理和行使主人的权利，如上管理商品，写注册、登陆等等！这个版面也运用到了框架结构，其作用与相册版面的框架几乎一样！这个版面分别对运用到数据库的动态网页进行管理，其中包括用户数据库，商品数据库，管理员数据库。因为其中的大体设计与功能相同，所以下面针对管理商品详细信息数据库的管理，做一下简单的介绍！日记页面主要运用DATALIST控件来显示日记数据库中的内容，DATALIST控件是一个功能强大的控件，利用其的特点和属性，在其中设置了各种操作！如果对某商品修改的话就点击该商品重新输入，系统就会自动从数据库中重新记载！单击保存就可以自动保留刚刚对文章所做的修改，页面也自动刷新成修改后的内容！作为商品数据库的管理，管理商品这个功能是必不可少，也是个、管理员的一个重要的权限！下面是数据库管理页面的设计效果：图4.8某件商品详细信息页面4.5形象设计（1）网站的标志：即设计网站的Logo，就如同网站的名片，它是一个网站形象的重要体现。我的网站Logo为阳光购物。（2）网站的标准色彩：整体色彩为绿色，一个欣欣向荣的颜色，希望给人一种豁然开朗的感觉，就像网站的名称那样，春暖花开的感觉！背景色彩为淡淡的绿，有一种清心的感觉，同时也符合主题。字体的颜色主要以黑色为主，其中会适当的加入其他的颜色！（3）网站的标准字体：网站的字体主要以宋体为主，字号根据设计需要设置不同的大小！（4）网站命名规则：网站的首页为Default.aspx，logo为Top.aspx,详细信息为Products1.aspx，用户登陆版面为Userlogin.aspx，用户注册版面为Userrigester.aspx，购物车版面为Cart.aspx，管理者版面为adminLogin.aspx和adminrigester.aspx，希望能给大家一目了然的感觉！4.6数据库设计动态网页需要使用动态网页与数据库进行交互工作，购物网站设计中的用户信息，商品信息，管理员信息都用到了数据库！常用的创建与管理数据库的应用程序有很多，例如MicrosoftSQLServer、Oracle、MicrosoftAccess等。本网站使用的是MicrosoftAccess2003应用程序创建数据库！下面是以商品数据库为例的创建数据库的步骤：（1）创建空数据库。打开MicrosoftAccess程序，单击工具栏中的“新建“按钮，在打开的“新建文件”窗格后，单击“空数据库”链接文本。打开“新建数据库”对话框，输入数据库文件名称，最后单击“创建”。（2）创建数据表。在数据库浮动窗格中选择“表”对象，然后单击“设计”按钮，在“字段名称”列输入字段（ProductID，CategoryID,Productkind，ProductName,Price,Description,ProductImage,MadeBy），并在“数据类型”列设置数据类型，在这里选用的都是文本类型。（3）保存数据表。单击“表”对话框中的“关闭”按钮，打开提示对话框后单击“是”，打开“另存为”对话框，设置表名称为音乐并单击“确定”（4）输入数据。双击新建的数据表，然后输入数据，最后单击“关闭”按钮即可。商品数据库效果如图所示：图4.11音乐数据库其他数据库的创建过程都是大同小异，在这里不做更多的介绍了。在网站代码中加入相应的链接数据库的语句，便可以使动态网页与数据库交互工作，实现强大的功能。

第5章测试与发布5.1网站测试一个网站基本完工后，需要通过下面三步测试才可以正式上线发布。5.1.1测试范围和方式（1）制作者测试。制作者测试包括美工测试页面、程序员测试功能。在做完后第一时间内有制作者本人进行测试。页面测试，包括首页、二级页面、三级页面的页面在各种常用分辨率下有无错位；图片上有没有错别字；各连接是否是死连接；各栏目图片与内容是否对应等。功能测试，要求达到客户要求；数据库连接正确；各个动态生成连接正确；传递参数格式、内容正确；试填测试内容没有报错；页面显示正确。（2）全面测试。根据交工标准和客户要求，由专人进行全面测试。包括页面和程序两方面，而且要结合起来测，保证填充足够的内容后不会导致页面变形。另外要检查是否有错别字，文字内容是否有常识错误。（3）发布测试。网站发布到主服务器之后的测试，主要是防止环境不同导致的错误。5.1.2功能测试对于网站的测试而言，每一个独立的功能模块需要单独的测试用例的设计导出，主要依据为《需求规格说明书》及《详细设计说明书》，对于应用程序模块需要设计者提供基本路径测试法的测试用例。（1）链接测试链接是Web应用系统的一个主要特征，它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段。链接测试可分为三个方面：1）测试所有链接是否按指示的那样确实链接到了该链接的页面；2）测试所链接的页面是否存在；3）保证Web应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面，有知道正确的URL地址才能访问。链接测试可以自动进行，现在已经有许多工具可以采用。链接测试必须在集成测试阶段完成，也就是说，在整个Web应用系统的所有页面开发完成之后进行链接测试Xenu主要测试链接的正确性的工具可惜的是对于动态生成的页面的测试会出现一些错误。（2）表单测试当用户给Web应用系统管理员提交信息时，就需要使用表单操作，例如用户注册、登陆、信息提交等。在这种情况下，我们必须测试提交操作的完整性，以校验提交给服务器的信息的正确性。例如：用户填写的出生日期与职业是否恰当，填写的所属省份与所在城市是否匹配等。如果使用了默认值，还要检验默认值的正确性。如果表单只能接受指定的某些值，则也要进行测试。例如：只能接受某些字符，测试时可以跳过这些字符，看系统是否会报错。要测试这些程序，需要验证服务器能正确保存这些数据，而且后台运行的程序能正确解释和使用这些信息。B/S结构实现的功能可能主要的就在这里，提交数据，处理数据等如果有固定的操作流程可以考虑自动化测试工具的录制功能，编写可重复使用的脚本代码，可以在测试、回归测试时运行以便减轻测试人员工作量。我们对UM子系统中各个功能模块中的各项功能进行逐一的测试，主要测试方法为：边界值测试、等价类测试，以及异常类测试。测试中要保证每种类型都有2个以上的典型数值的输入，以确保测试输入的全面性。5.2网站发布5.2.1一般文章发布

首先在Word窗口中把要发布的文章进行编辑设置，一般有三项设置：字体为四号、段落行距为2倍行距、特殊格式选首行缩进2字符。第一行建议为空白。完成编辑后全选、复制。

进入管理后台相应栏目，打开添加新文章窗口，在编辑窗口中点鼠标右键，选“粘贴”，然后在弹出窗口选“允许访问”，然后在弹出窗口选“取消”，然后在弹出窗口选“允许访问”。提交完成！

5.2.2带图文章的发布

首先说说网页图片的格式要求，一般图片宽度不宜超过640，超过了会导致整个网页显示失调。图片的格式优先选择.jpg、.gif和.png这三种压缩格式，.bmp虽然能够显示但是过大，受限于网络速度，会造成外部访问过慢。一般数码照片尺寸都较大，均需要缩放处理。另处，发布于网站的图片命名最好采用英文或拼音字母命令，不要使用中文。

先按一般文章发布的方法把文本贴入发布窗口，然后选择要插入图片的位置回车选择居中，点“插入/编辑图像”按钮，在弹出的窗口中选“上传”，在上传窗口选“浏览”，然后定位于你电脑上的图片，选择“发送到服务器上”，依次确定。预览图片时可以通过拖动图片四周的小方格再次调整图片大小。

第6章结论与展望6.1结论通过本次毕业设计，我对网站设计方面的知识有了更深入的了解，更深刻的感受。以前对网站设计一直只停留在想象的阶段，此次实践，让我掌握到了许多以前没有接触到的东西，了解到更多的事件知识，例如Dreamweaver的运用。不仅提高了自身的能力，也增加了自己的信心。从最开始的无从下手，到最后的顺利完成，我在进步着，也在提高着自己！让我坚信只要努力，只要不放弃，就会成功！同时我也深刻的意识到没有最好只有更好！当然，通过本次的毕业设计也使我强烈的感受到自己的不足，知识上的欠缺，实践中的茫然，在以后的日子里，我一定会不断的完善自己，改变自己，克服自己的缺点，用知识丰富自己！本次设计中由于自己的能力有限，使这个网站还存在许多的不足，页面内容不够丰富，功能实现不够全面，网站制作不够专业等等。虽然设计结束了，但我对网站制作的兴趣才刚刚开始，我对网站制作的执着还要持续下去，我会不断的完善网站，希望有一天它会成为一个专业的个人网站！6.2展望网页设计作为一个起点高、门槛低的职业，在这个时候迎来了蓬勃发展的高潮期，略有一点美术基础的人都能够很快融入，而越来越傻瓜化的软件也给了更多非专业人士尝试的机会。所以有人说，这是一个人人都是站长的时代。但是目前的大学里一般都没有网页设计的专业，大多数设计者都是依靠自学，他们懂得做网站，却不一定懂得为网民设计合理的布局和使用习惯。而一个优秀的网页设计者不应该只懂得图象和效果的页面展示，还必须懂得怎样才能使网民浏览起来更舒服、更容易让人接受。网页设计行业的现状并不太好，人们要求设计者什么都懂，要比平面设计师多懂点代码，比程序员多懂点设计，还能做点动画。但平面设计师觉得他们是在侮辱设计，程序员觉得他们在侮辱编程，动画设计师觉得他们那两下子完全是班门弄斧。于是，在经历了一个短暂的小高潮之后，网页设计行业进入了低潮。

而随着网络的快速发展，网页设计开始变得多样化，暂时的低潮不代表它没有未来。一般的行业发展过快，只能出现两个情况：一个是完全自动化的程序代替人力——比如越来越容易操作、每个人都能轻易学会的智能软件，也许到那个时候就不再需要设计者了；一个是分工逐渐细化，花费更多的人力来保证效率和质量——所以，就出现了程序设计师、动画设计师、音效设计师、UI界面构架师、整合工程师、编辑策划师等细分的职业。网页设计的未来将会更趋向于后者，因为网站本身虽然理性，一段代码只控制一个效果，但设计却是一个感性的事业，绝不是简单的美化，网站建设也不是单纯的页面排版，再智能的软件也只能当做辅助工具，最终使它成型并发挥作用的，还得靠人的头脑。一个出色的网站需要依靠设计者的美术观念、对色彩和布局的掌控、对网民心理的把握、结合自己的创意设计出来，这是软件永远做不到的，尤其是企业网站，那是企业的另一张脸，必须拥有区别于其他网站的独特性。

面对网页设计行业这种两极分化的趋势，网页设计者也只能选择做样样全能的设计工程师，或者做在某一细分领域具有相当技术的专一设计者，假如还像现在这样什么都懂却没有一样精通，就只能脱离设计去做幕后策划或者网站的项目管理者了。而要成为全能设计师是非常困难的，网页设计包括的内容太多，每天都在不断更新，代码从最早的HTML发展到了.NET，格局从WEB1.0发展到了WEB3.0，形式在.GIF和FLASH之后又出现了流媒体，仅仅是编程的语言就好十几种，全能设计师要求每一点都要涉及，是很不容易的。更大的可能是每个设计者都精通其中两三类技术，然后依靠团队的合作完成设计任务，毕竟单一的技术容易掌握，也更容易发挥效果。

曾有人认为，当每个企业都有了自己的网站，网页设计行业就将从饱和中走向消亡。这是错误的。网络更新发展之快、蕴涵潜力之大、覆盖之广都是前所未有的，网络的未来不可限量。这对网页设计者也是一个极大的挑战，他们必须时刻接受新的信息新的挑战，挑战在哪里，发展的方向就在那里。参考文献[1]I.Foster,C.Lucy,J.M.Nick,andS.Tucked.ThePhysiologyoftheGrid：AnOpenGridServicesArchitectureforDistributedSystemsIntegration.Availableathttp：///research/papers/ogsa.pdf.[2]GridPhysicsNetwork.http：///.[3]A.S.TrishawandW.Awfuletal.TheLegionVisionofaWorldwideVirtualComputer.CommunicationsoftheACM,40(1)：39–45,January1997.[4]NinaProject.Nina：AGlob