宠物网站设计案例

宠物之家网站研究论文PAGE34-07级电子商务2班03307204潘梦菲论文摘要序：宠物之家网站，是我们小组的网站名称，顾名思义，我们所做的网站是跟宠物有关的。我们希望可以利用自己所学的知识，将我们的网站做的很好。我们组共有八名同学，作为小组长的我将我们的网站分为了八个模块。每个人负责其中的一个模块，最后由我在将首页做好。在此，我将主要介绍首页和我负责的宠物商店的设计过程。对论文主要内容的概括本论文主要介绍宠物之家网站的构建过程以及实现情况。包括动态页面和静态页面的设置，各种功能的实现。从设计到实现的阶段都有具体的体现。重点介绍宠物商店的构建情况。关键字：宠物之家宠物商店动态网页注册登录模块在线投票模块搜索引擎模块留言版模块目录摘要 1目录 2第一章 绪论 31.1研究目的与意义 31.1.1研究目的 31.1.2选题背景 31.1.3研究意义 41.2基本理论 41.3文献综述 6第二章 宠物之家网站设计策划 82.1设计讨论 82.2网站的主题 92.3实现的功能 92.4页面风格 92.5推广自己的网站 11第三章宠物之家网站设计实现 133.1网站建设网页设计的流程和具体实现 133.2介绍整个网站的页面效果、功能实现 133.3动态网页的交互流程 16第四章 宠物商店功能模块的实现 184.1宠物商店的模块设计 184.2动态网页的制作 184.2.1注册登录以及个人资料修改模块 194.2.2留言版模块 224.2.3在线投票以及结果显示模块 234.2.4搜索引擎模块 254.2.5动态模块的总结 264.3静态网页制作 264.3.1网页布局 274.3.2图片链接以及Flash的插入 274.3.3CSS样式的使用 274.3.3flash图像查看器的使用 28第五章 宠物之家首页的实现 295.1对于logo的设计 295.2个性化设置 295.3时间轴的使用 305.4背景图片的切分 305.5添加背景音乐 30第六章总结 31参考文献 33绪论1.1研究目的与意义1.1.1研究目的宠物之家网站是我们的小组网页设计课程的期末考试作业。作为一个电子商务专业的学生，我认为学会如何做网站是我们必备的技能。因此，这个网站对于我而言，不仅仅是一个作业，是我们为了学会一种技能，也是我们提高自己能力的过程。我们努力完成一个具有多种功能的网站。人贵在有一技之长。研究这个网站的构建情况，有助于我们很好的了解构建一个网页所需要的整体过程，从一开始的设计到建设到维护阶段。每一个阶段都需要我们认真地对待，需要我们进行统筹分析并进行实施。我们每个人都需要百分百的投入其中，并进自己的一份力。1.1.2选题背景随着时代的不断发展，我们的脚步已经迈入信息社会的大门。计算机技术的发展，特别是网络技术的飞速发展，给文档的保存和管理提供极大的方便。在这信息化的社会里，人门对信息传递服务需求的及时性越来越迫切，要求越来越高。工作和生活中要涉及到大量的信息查询与修改，信息存储和共享。在具体制作中，用ASP技术来实现B/S系统，ASP技术与数据库技术结合，用户在浏览器端可以随意查询自己需要的标本，而数据的后台操作则由服务器端处理。这样提高了网页的互动性，使整个系统能更好的为用户服务。我们所学的就是以Dreamweaver和ASP相结合作网页的技术。本网页是我们根据小组同学的个人爱好以及当代人的偏好而设计开发的。界面简洁、使用方便，内容丰富，而重在实现功能，是我们宠物网站的目标。作为初学网站设计的学生，我们对于如何构建一个网页还不是很清楚，一切从头做起。根据我们小组八个成员的讨论，我们本来想做一个有关80后为主题的网站，但是由于这个网站所涉及的内容太过广泛，难度过大，所以最终我们确定以宠物作为我们的主题，在当今时代，越来越多的人将宠物作为生活的一部分，这使得这几年宠物行业得到了大力的发展。网络上也出现了很多与宠物有关的网站。我们小组也以宠物为主题，设计并实现功能。我们的网站由宠物社区，宠物照片，宠物视频，宠物趣事，宠物博客，宠物游戏，宠物百科，宠物商店八个模块构成。网络是信息传播工具，从它登场那一天起就是一种新型的信息传播工具,它和任何工具一样供人利用,来为人类服务。我们做为新时代的大学生，尤其是电子商务专业的学生，更要努力的掌握我们所学的知识，学以致用。无论我们宠物之家网站最后做的是好是坏，它都是我们这一个多月的努力成果。我们希望可以通过自己的努力而获得成功，当然我们的网站有非常多的不足之处，功能也很简陋，但是仍然希望老师和同学们可以认可。1.1.3研究意义本论文旨在对于我们宠物之家网站的一个总结和概括，是为了将我们网站的构建过程完整的呈现给大家。便于我们及时纠正和改正在制作网站中的错误。同时，加强同学之间的交流。开拓我们的思维，培养我们的创新精神，提高我们的团队意识，增强我们的实践能力。也是我们个人对我们宠物之家网站的一个小结。1.2基本理论Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它有一个很好听的中文名字，叫做“织梦者”。它的出现以及不断的推陈出新，取代了当时网页制作的龙头老大Frontpage。我们所学习的网站设计与制作就是建立在Dreamweaver的基础之上的，同时结合ASP构建动态网页，利用Photoshop和Flash作为辅助。下面介绍在宠物之家网页建设中所使用到得理论基础和概念。界面是一种由色彩、文字、图象、符号等视觉元素以及多媒体元素为主构成的，传达特定信息的，以方便人机交流为目的的中间媒体。网页界面的构成要素由文字，图形，页面版式，色彩，多媒体，技术等构成。界面就是网站给浏览者的第一印象，往往决定着网站的可看性，在确定网站的界面时要注意栏目与板块编排，构建一个网站就好比写一篇论文，首先要列出题纲，才能主题明确、层次清晰。网站建设初学者，最容易犯的错误就是：确定题材后立刻开始制作，没有进行合理规划。从而导致网站结构不清晰，目录庞杂混乱，板块编排混乱等。结果不但浏览者看得糊里糊涂，制作者自己在扩充和维护网站也相当困难。所以，我们在动手制作网页前，一定要考虑好栏目和板块的编排问题。网站的题材确定后，就要将收集到的资料内容作一个合理的编排。比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意的是：尽可能删除那些与主题无关的栏目；尽可能将网站内最有价值的内容列在栏目上；尽可能从访问者角度来编排栏目以方便访问者的浏览和查询；辅助内容，如站点简介、版权信息、个人信息等大可不必放在主栏目里，以免冲淡主题。而文字部分包括标题、文字信息、文字链接；图形包括标题背景、主图、链接按钮；多媒体包括视频，音频，动画；技术包括浏览器，传输速度，屏幕分辨率、颜色显示。网页界面的特征主要是主体的经济性，手段的先进性，对象的广泛性，内容的丰富性，形式的多样性，操作的交互性。设计以功能为主，主要体现在信息传递功能和审美功能。形象明确，易于接受，形式简洁，因此需要加强网页界面的视觉冲击力，迅速传递信息的要求，也是形式美的要求。信息传播是网页界面设计的首要因素。网页界面的信息传播功能主要体现在三个方面，科学技术作为生产力组成员要素的作用日益明显的表现出来。社会文化的发展飞速进行，由此带来的社会变化比以往任何时候都更加显著。网络使人们跨越心理屏障和社会阶层差异进行沟通的有效工具。网页界面的主要形式主要有信息查询类，大众媒体类，宣传窗口类，电子商务类，交流平台类，网络社区类。电子商务网站建设是互联网发展的一个增长点，我们建立网站的目的是为了充分利用网络资源，开展电子商务与客户互动来往，建立企业形象，主动抢占先机，做网上广告。下面主要介绍宠物商店以及首页所用的理论基础：关于背景，由于很多我们下载的图片都是很小的图，或者分辨率很低。这样就会导致在我们的页面上会显示很不协调的背景。用Photoshop进行调整，但是仍然会比较诡异。另外在表格布局中，想将一张照片插入到不同单元中，就需要进行切分。因此必要的Photoshop技术是我们需要的。关于色调搭配，作为一个宠物主题网站，我们尽量运用鲜艳的颜色。网站首页颜色是红色。在颜色变化方面，尽量以暖色调为主，背景以冷色调为主，营造一种反差，可以突出所要表现的内容。并且我们的网站有诸多的版块，但是我们不仅要把版块内容放在导航栏上，更要让登陆我们网站的人一眼就能看到自己感兴趣的内容在哪里。所以我们主页大部分的空间是对版块的重新排版，让最新的最好玩的信息集中体现到首页上，这样不仅能吸引更多的宠物迷，还能让网站看起来生动活泼。另外各种分页面我们没有采用统一的色彩搭配要求，希望每个组员都可以自由发挥。关于布局，在宠物商店中，主要是采用表格布局。关于图片和图表的设计，需要相关Flash的制作。1.3文献综述本网页共涉及到的知识以及内容是以我们的教材《电子商务网页设计与网站建设》为主。此书结构安排合理、语言通俗易懂、内容图文并茂，以培养思维能力为主，精选了大量有针对性的实例，并将要求掌握的知识点融入到实例中，力求让读者通过亲自动手操作达到掌握所学知识、培养动手能力的目的，真正做到授之以渔和授之以鱼兼得。共分十六章，具体内容如下：1电子商务网页界面设计和网站建设的理论基础2网页的基础知识3构建静态HTML页面4构建动态HTML页面5构建交互式页面6ASP的应用7用ASP设计主页模块8电子商务网站规划9电子商务网站建设中的软件工程方法10电子商务网站的系统设计11电子商务网站网络数据库12电子商务网站核心功能的实现13电子商务网站的推广及管理与维护14电子商务网站的安全管理宠物之家网站设计策划2.1设计讨论我们根据时间的分布进行了分工，时间分布表如下：计划阶段 项目立项 1 可行性研究 2 需求分析 12 总体设计 10 详细设计 22设计阶段 网页制作 5 脚本程序编制 6 应用程序编制 12测试与完善阶段 系统测试 18 发布试运行 2 系统维护 10构建网站，我们要做的是确定网站主题，确定网站界面，进行形象设计，确定网站风格，有创意的内容选择网站的设计可以从以下几点出发：设计网站标志(LOGO)，设计网站色彩，设计网站字体，设计网站宣传语。根据我们小组的实际情况，我们每个人分管一个模块。由于我们小组的人员对于网站设计都不是很在行，缺乏对于整体设计和统一的策划。因此一人分管自己的一个模块，最后统一在首页上。我们的分工情况是我和陈浩博负责首页的设置，严扬负责宠物博客，张晓负责宠物社区，蒋靓媛负责宠物趣事，我负责宠物商店，陈浩博负责宠物视屏，侯臻负责宠物照片，张臻峥负责宠物游戏，周旭负责宠物百科。我们的目标是，网站重在实现功能，务必将每个功能实现，以此来弥补我们在排版和色彩美化上的差距。我们的要求是，每位同学都必须自己做网页，不可以下载模板，我们是为了学会自己动手做一个网站的全过程，我们力争所学的网页设计每个知识点都涉及到。或许利用网上现成的模板会很省事，也会很漂亮，但是就会增加我们的懒惰心理。也许我们的网站会很平凡，但是是我们每个人辛勤的劳动成果。作为组长的我，为每个组员做了一个小的Flash头像，放在每个同学的页面上。2.2网站的主题我们宠物之家网站的主题，顾名思义，以宠物为主题。设计到宠物的方方面面，从宠物的习性到收养注意事项，从宠物美容到宠物商店。是为热爱宠物的朋友们提供了一个平台，可以是大家在我们的网站中进行交流。2.3实现的功能进入首页后，会有背景音乐，显示时间轴，图片以及flash的显示等等。在宠物社区里，可以看到最新更新的文章，以及发表文章，相当于一个论坛。在宠物图片里，主要是以大量图片为主，穿插着超链接。宠物商店中，主要是显示注册登录系统，留言版系统，在线投票及结果显示系统，搜索引擎的制作，并以简明的图案呈现网上商城的状况。宠物游戏则是以flash为主，利用flash显现一些功能，使页面立体化。宠物百科是对宠物文章进行分类整理，宠物博客是显示爱宠达人的养宠物的经验，宠物趣事的功能是使用CSS样式表，锚点的利用等等。2.4页面风格我们小组在页面风格上没有做统一的规定和要求，主要强调的是简洁，清爽。首页以天蓝色做作为背景，填充的色彩以红色为主，对比性很强。它保持了简单性，各分网页力求以暖色调为主，背景图片使用Photoshop进行切分后拼接使用。适当的使用颜色渐变的技巧，全谱色彩渐变完美地吸引了注意。总之力求简洁淡雅，以我的宠物商店为例，以白色为底，渐变的蓝色做为标题，使得整个页面给人清爽和舒心的感觉。色彩的鲜明性，独特性，艺术性，合适性，联想性，色彩搭配的合理性都是我们要考虑的内容。网页风格的三个基本要素，颜色、线条和形状、版式。我们要协调运用颜色，不同的色彩影响着人们对网站的第一感觉，红色系象征着激烈、兴奋，宠物能给我们带来欢乐和幸福，所以我们网站的主色调是红色。一个网站不可能单一运用一种颜色，这会让人感觉单调，乏味；但是也不可能把所有颜色运用到网站中，给人感觉轻浮、花哨。一个网站必须有一种或两种主题色。我们的网站就是两种主题色，分别是红色和蓝色。这样既不会让用户迷失方向，也不至于单调、乏味。所以确定网站主题色是我们必须慎重考虑的问题之一。首页以红色为主，宠物商店则是以蓝色为主。通常情况下，一个页面内尽量不要使用超过4种色彩，太多的色彩容易让人感觉没有方向、没有侧重。当主题色确定好以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果；另外还要考虑哪种因素可能占主要地位，是明度、纯度还是色相。我们网站以蓝色或者黑色作为背景，有的文字链接采用暖色系，这样一冷一暖的搭配可以更好的突出所表现的内容，从而达到很好的效果。适当选择线条和形状，文字、标题、图片等的组合，会在页面上形成各种各样的线条和形状。这些线条与形状的组合，构成了主页的总体艺术效果。必须注意艺术地搭配好这些线条和形状，才能增强页面的艺术魅力。一般网站有以下三种线条和形状的使用方法：直线（矩形）的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐的，也就是所谓的有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的主页题材。曲线（弧形）的应用。曲线的效果是流动、活跃，具有动感的，曲线和弧形在页面上的重复组合可以呈现流畅、轻快、富有活力的视觉效果。一般应用于青春、活泼的主页题材。曲、直线（矩形、弧形）的综合应用。把以上两种线条和形状结合起来运用，可以大大丰富主页的表现力，使页面呈现更加丰富多彩的艺术效果。这种形式的主页，适应的范围更大，各种主题的主页都可以应用。但是，在页面的编排处理上，难度也会相应大一些，处理得不好会产生凌乱的效果。最简单的途径是，在一个页面上以一种线条（形状）为主，只在局部的范围内适当用一些其他线条（形状）。由于我们的技术条件有限，我们本想采用曲、直线综合应用的版面形状，可惜我们工作只能在dreamweaver上进行，在这款软件上还没有发现类似功能，所以为了节约时间，我们就采用直线线条的版面形状。均衡的分割板式，在网页设计中，页面因为内容元素的需要被分割成很多区块，区块之间的均衡就是版式设计上需要着重考虑的问题。均衡并非简单理性的等量不等形的计算，一幅好的、均衡的网页版面设计，是布局、重心、对比等多种形式原理创造性全面应用的结果，是对设计师的艺术修养、艺术感受力的一种检验。在面积对比强烈(不等形)而又均衡(等量)的设计中，我们可以看到对比法则的成功参与；而在一些对比不十分强烈、典雅的不对称设计中，我们则可感受到设计者的别具用心。需要注意的是，传统网页设计的版式控制都是在不超越大众显示器分辨率宽度的前提下，依照内容多少纵向延展设计。而如今流行的产品型网站，更倾向于在一屏内表达最主要的东西，尤其是首页，尽量不出现滚动条。而在分页面中，像是宠物美容，则出现大量滚动条来显示信息。另外适当美化，去除冗余，在必要的元素都设计完成之后，回顾整个页面，根据整站的风格需要，也许你会觉得设计得过于复杂了，或者是设计得不够完美，不能突出想要的风格。这个时候就需要适当调整对页面的美化控制。简洁的往往是美的，而美的东西不一定简洁。尤其在网页设计上，对于内容很多的门户网站，任何多余的修饰都会加重浏览者眼睛的负担，所以可以看到门户的设计往往特别简单；而某些专业型网站，就首页来说确实没有什么东西可以展示，那么则需要刻意增加一些点缀而不显得特别空洞。当然，这也不是定理，针对行业不同或者突发性事件，适当地对设计进行调整也能够起到很好的效果。2.5推广自己的网站想特别说明一下网站的推广情况，与刚学的市场营销是紧密联系的。网站的营销推广在个人网站的运行中也占着重要的地位，在推广个人网站之前，请确保已经做好了以下内容：网站信息内容丰富、准确、及时；网站技术具有一定专业水准，网站的交互性能良好。一般来说，网站的推广有以下几种方式：1.搜索引擎注册与搜索目录登录技巧注册著名的搜索引擎站点是在技术上推广网站的第一步。注册搜索引擎有一定的技巧，像AltaVista、搜索客这样的搜索引擎，它自动收录提交的网址。另外，注意Meta的使用，不要提交分栏Frame页面，大部分搜索引擎不识别Frame，所以一定要提交有内容的Main页面。而像Yahoo、搜狐等搜索目录网站采用手工方式收录网址，以保证收录网站的质量，在分类查询时获得的信息相关性比搜索引擎站点（靠Spider自动搜索的）更强。由于搜索目录网站收录网站的人为因素相对较多，因此在提交网站时要注意遵守规则。如Yahoo要求注册站点描述不超过25个单词。在此要注意：将网址提交到最合适的目录下面，要认真详细的介绍网站，千万不要有虚假、夸张的成分。2.广告交换技巧很多个人站点在相互广告交换时都提出了几个条件：第一，访问量相当；第二，首页交换。显而易见，这种做法是为了充分利用广告交换。以很多个人网站的经验，当与一个个人站点交换链接时，对方把网站的LOGO放到了友情连接一页，而不是首页时，很少有访客会来自那里。通常在首页，广告交换才会有很好的效果。3.目标电子邮件推广使用电子邮件宣传网址时，主要有如下技巧：可以使用免费邮件列表来进行，只要你申请了免费邮件列表服务，你就可以利用邮件列表来推广你的网站；可以通过收集的特定邮件地址，来发送信息到特定的网络群体，在特定网络群体中推广自己的网站；发送HTML格式的邮件，即使其内容与接收者关系不大，也不会被被当作垃圾信件马上删掉，人们至少会留意一下发送者的地址。而对于我们的网站，我们在班级内部推广就可以了。第三章宠物之家网站设计实现3.1网站建设网页设计的流程和具体实现宠物之家网站的具体流程是，通过主页分别链接到分网页，首页—宠物社区—宠物照片—宠物视频—宠物趣事—宠物百科—宠物游戏—宠物博客—宠物商店。每个页面都有自己的特点和功能。具体实现将在后面的章节体现。3.2介绍整个网站的页面效果、功能实现我们网站的预览效果如下：（以部分为例）首页首页为静态网页，网站的形象代表着品牌形象，人们在网上了解宠物的主要方式就是访问宠物相关的网站，网站形象代表了一个网站的制作水平，设计理念，内容丰富度等多个方面。实现链接为主要功能，拥有大量图片和文字，主要为给用户视觉上的效果。宠物社区宠物博客社区和博客的是实现交互式页面的功能。可以达到增进顾客关系，吸引顾客参与的目的，不仅为热爱宠物的朋友提供一个交流的平台，同时也有助于紧密联系网站管理者和用户之间的关系。宠物趣事通过访问宠物趣事页面，可以让用户对宠物的用品和美容有一个更深入地了解，灵活地向用户展示宠物说明及图片。内容及其丰富的一个页面。宠物视频制作宠物视频网页过程其实很简单，里面多运用一项插入FLASH视频的技术。但总体上来说，是属于静态网页。静态网页和动态网页最大的不同之处是，静态网页的更新需要网站的管理人员每天亲自的进行更新，而动态网页的特点就是，使用网站的每个用户都可以成为网站的管理员，上传的帖子，上传的图片，上传的视频都是网站更新内容的一部分。宠物照片要做一个含有大量图片的分网页，最重要的就是对图片的大小进行优化，因为如果要是以默认格式直接黏贴图片上去的话，文件大小就会特别的大，如果上传到服务器的话就会严重影响打开图片的速度，所以用PHOTOSHOP软件把每张图片进行优化并保存为WEB格式，也就是说，在宠物照片网页里，每张照片可以单独作为一个网页打开放大观察，满足不同用户的需求。宠物商店以动态模块为主，完善顾客服务，为顾客提供各种服务和帮助信息，在网站上发布在线调查表或问卷，可以获得客户的反馈信息，通过这种信息的反馈有助于我们更好的改进服务，是获得第一手市场资料的有效调查工具。搜索引擎模块为大家提供了很好的服务。宠物百科以Flash为主构建的页面，很有新意。3.3动态网页的交互流程网页不同于传统媒体之处，就在于信息的动态更新和即时交互性。即时的交互性是Web成为热点的主要原因，也是网页设计时必须考虑的问题。传统媒体（如广播、电视节目、报刊杂志等）都以线性方式提供信息，即按照信息提供者的感觉、体验和事先确定的格式来传播。而在Web环境下，人们不再是一个传统媒体方式的被动接受者，而是以一个主动参与者的身份加入到信息的加工处理和发布之中。这种持续的交互，使网页艺术设计不像印刷品设计那样，发表之后就意味着设计的结束。网页设计人员必须根据网站各个阶段的经营目标，配合网站不同时期的经营策略，以及用户的反馈信息，经常地对网页进行调整和修改。为了保持浏览者对网站的新鲜感，需要定期或不定期的进行改版，这就需要设计者在保持网站视觉形象一贯性的基础上，不断创作出新的网页设计作品。宠物社区和宠物商店是两个动态的交互页面，共有5个动态的功能模块。关于宠物商店的构建，每个交互页面都是为了提供与用户交互的功能。注册登录与修改资料是记录用户信息，用户通过注册，将信息传递到数据库当中。登录时调用数据库的信息，登录后显示用户信息，用户可以进行修改，修改后数据库同时更新。留言版是便于用户进行交流的页面。在线投票功能是系统人员了解用户对于网站的评价，通过调教调查问卷形式，将信息写入数据库，并将结果直接显示在另一个页面。搜索引擎功能是为了方便用户查找到相关的信息，输入相关信息，传递到数据库中，显示符合条件的信息。

宠物商店功能模块的实现我负责的部分是宠物商店的模块，通过对网络上很多网站的考察以及和同学们的讨论，我负责的宠物商店功能主要是以实现宠物商店模块的注册登录修改个人资料功能，实现在线投票以及投票结果显示功能，留言版的功能实现，搜索引擎功能的实现。另外，还有的主要就是对于静态网页的一些基本功能的实现，图像和文字的链接，表格和框架布局网页，对于背景图片用Photoshop进行拆分后使用，用Flash做小的图标等。4.1宠物商店的模块设计作为宠物之家的重要组成部分，在设计阶段，首先在色调上保持与首页一致。以蓝白为主，给人以简单明了的感觉。宠物商店共分五个具体分页面，即宠物商店首页，猫猫专区，小宠专区，杂志区，纪念品区。其次首页采用的表格布局，其他页面采用的为框架布局，统一布局，条理清晰。在ASP和ACCESS数据库的支持下，宠物商店的注册登录模块，留言版模块，在线投票以及结果显示模块均使用ASP页面构建。由于宠物商店设计到在线购物系统，较为复杂，因此就没有具体实现，只是够建出具体的模块。商店的美观主要是对于物品的展示，由于我本人对于美观设计这一方面较为欠缺，在我的网页中，仅仅只是重在实现功能，在外观上会差一些。在宠物商店构建的准备工作中，我看了很多网站，研究了很多书籍，并希望可以在网页中使用。4.2动态网页的制作动态网页的目的是实现交互式的功能。准备工作，即在电脑中装入IIS。我的电脑很奇怪，点开控制面板中选择添加/删除程序后在Windows组件里并没有Internet信息服务一项。在查询了相关资料后，利用打开C:\Windows\inf文件夹，搜索到sysoc.inf记事本文件，加入代码iis=iis2.dll,OcEntry,iis2.inf,,7，将IIS的下载解压到一个系统盘里面，然后进行安装。然后按照步骤进行安装，选择“开始”“程序”里的“管理工具”中“Internet信息服务”命令，在打开的“Internet信息服务”窗口中鼠标右击“默认网站”，在菜单中选择“属性”。在弹出的“默认网站属性”对话框中设置。网站中“IP地址”选择“全部未分配”；“TCP端口”通常设置为80，主目录中“文本路径”中设置网站虚拟目录的实际路径；勾选“读取”“写入”选项。选中“启用默认文档”，则该选项组中的文件可默认为一个ASP工程中的初试文件；点击“添加”可在“默认文档名”中填写新的文档名称。点击确定，接着配置IIS的虚拟目录鼠标右击“默认网站”，在菜单中选择“新建”“虚拟目录”命令，打开“虚拟目录创建向导”，单击“下一步”，打开“虚拟目录别名”对话框并在“别名”中输入虚拟目录的名称。点击“下一步”，在“目录”中添加文件的物理路径，点击“下一步”，打开“访问权限”对话框，选中“读取”、“运行脚本”和“写入”选项。点击“下一步”，单击完成，此时在“Internet信息服务”窗口中可以浏览创建的虚拟目录。这个过程很痛苦，试了很多次，不过终于还是安装好了IIS。然后进行设置，新建虚拟目录，对文件夹的共享进行设置，添加everyone，并赋予其全部权限。另外安装ACCESS，在Dreamweaver中进行站点的设置。这一切准备工作做好之后，便开始了我的动态模块的制作。4.2.1注册登录以及个人资料修改模块这个模块式我根据老师上课所教的注册登陆模块进行修改以及增加了个人资料的修改模块。这样可以使得我们的注册登录系统更加人性化和合理化。注册登录系统共包含8个页面，即注册页面，注册成功页面，注册失败页面，登录页面，登录成功页面，登录失败页面，个人资料修改页面，个人资料修改成功页面，个人资料修改失败页面。首先进行数据库的设计，建立一个用户注册信息的数据库注册时进行数据有效性检验，通过检验后将表单数据插入数据库中登陆时读取数据库信息，在数据库中查找表单提交的用户名是否存在，用户名与密码是否匹配，如果是则返回登陆成功，不是则提示出错。登录后进行个人资料的修改，将登录用户的个人资料掉出，并进行修改，将修改后的数据插入数据库中。首先分析数据库结构，此为注册用户登录页面的数据库db1:字段类型长度必填字段允许空值备注ID自动编号YN编号，主键username文本50YN用户名，唯一性userpasswd文本50YN用户密码question文本50YN密码提示问题answer文本50YN提示问题答案sex文本50NY性别，非必填age数字3NY年龄，非必填—根据此表进行数据库的设计，建立数据库，并保存至指定文件夹。进行数据库的链接,使用代码Driver={MicrosoftAccessDriver(*.mdb)};DBQ=e:\asp\db1.mdb对于注册页面，利用Dreamweaver进行表单的设置，添加行为，设置插入记录，进行用户名检察。对于注册失败页面，使用静态页面制作，添加代码JavaScript:history.go(-1)。另外，绑定阶段变量，在绑定页面板中选择添加按钮，并在弹出的菜单中选择“阶段变量”命令，定义阶段变量的名称MM_username，完成绑定阶段变量的操作。对于注册成功页面,这个页面中引入阶段变量，得到登陆成功的用户名，另外还要限制对页的访问，只有在成功登陆的用户才可以访问此页面。登陆失败页面则直接利用超链接跳转。个人资料修改页面，插入与登陆页面同样的表单域，并绑定记录集，在筛选条件中选择User=阶段变量MM_username。绑定动态记录后，进行记录的更新，在插入栏数据中选择更新记录，并限制对页的访问。个人资料修改成功页面与退出页面均使用静态页面。在实现这些功能过后，对于页面进行适当的美工，虽然这个登陆系统看似很简单，但是在实际操作的过程中，遇到了很多的麻烦。同样一个操作，可能要做很多遍，但是总是会报错。有时侯直接显示错误，不显示原因，类似像http错误等等。不过总之，还是做出来了。4.2.2留言版模块这个模块是在宠物商店里，为方便用户沟通交流而制作的。比较简单的一个页面。由两个页面构成，一个是用户留言以及留言显示页面，另一个是留言成功的页面。这个页面的构思很简单，就是从首页点击我要留言后进入到留言的页面，上面就会显示之前已经在数据库中留言内容，下面则是留言模块，输入留言的内容，点击提交，在提交成功后，进入留言成功页面，点击返回留言页面，此时正好刷新数据库中的内容，使得留言直接在页面中显示出来。比较偷懒的使用了老师所给的数据库设计思路，此为数据库设计表。字段 类型长度必填字段允许空值备注ID自动编号YN主键Subject文本255YN留言主题Content备注YN留言内容Reply备注NY回复内容Data时间/日期YN留言时间ReplyData时间/日期NY回复时间UserIP文本15YN留言IP根据此表进行数据库的建立，建立记录集后动态的绑定记录集内容，设置重复区域使得每条记录都可以得以显示，插入记录的设置基本都和之前的一致。与之不同的就是对于表单项设置重复区域。此页面重视的是色调的搭配，以深蓝做底色，利用一些图案做装饰，给人鲜明的视觉效果。4.2.3在线投票以及结果显示模块很多的网站都有在线投票的功能，因此，我在宠物商城的网页中设置了一个商品点评的模块，通过这个模块，用户可以进行投票，属于在线调查的一个模式。投票后会直接显示投票的结果。本系统分为两个具体显示页面，投票调查信息页面，调查结果显示页面。包含一个数据库表如下：字段名称字段类型内容说明id自动编号主键user文本姓名age数字年龄lujing数字知道本网站的路径fchmyi是/否对本网站非常满意myi是/否对本网站满意yiban是/否对本网站一般buhao是/否对本网站感觉不好根据此表创建数据库。对于投票调查信息页面。在该网页进行勾选后，点击提交，网页会将用户提交的资料全部交给服务器端并插入到调查表中。插入表单域后，进行表单的相关设置。利用复选框和单选框进行初始设置，并输入相应的文字，插入记录的设置。做好的页面如下图：制作调查结果页面，在插入表单域和表格后，设置对比鲜明的颜色做为单元格背景，用来反应调查结果。在此页面上工绑定5个记录集，RD1是将刚才提交的数据绑定到这个页面上，age,lujing,fchmyi,myi是为了显示调查单项调查结果而设置的。以age为例，在绑定记录集时选择高级，添加SQL语句：SELECTcount(age)asageNum,(ageNum/(SELECTcount(user)FROMdch))asmyPercentFROMdchgroupbyageORDERBYage。同理对其他的进行设置。设置动态记录集，绑定相关字段，并设置重复区域。此功能中，应显示百分比数据，但是由于技术有限和版本的限制，无法找到动态数据对话框，因此此功能为完全实现。只能勉强将结果显示，请老师见谅。图如下所示：4.2.4搜索引擎模块在宠物商店中，搜索引擎作为一个重要的组成部分，因为在宠物商店中会涉及到大量的信息内容，为方便用户们及时方面的找到自己所需要的物品，因此设计了高级搜索一览，即搜索引擎模块，方面用户查找自己所需要的信息。应用的依然是统一风格的页面。数据库设计图如下：字段名称字段类型内容说明id自动编号主键keyword文本关键字class文本分类pingpai文本品牌data时间/日期上榜日期way文本所在区域price货币价格除了与前面大致相同的表单添加，动态文本的设置操作等等，在此模块中增加了设置条件显示区域，并对部分代码进行了修改。使得一开始的时候，未搜索时不显示结果，当搜索过后显示结果。搜索引擎模块使得整个流程更加顺畅和完整化。4.2.5动态模块的总结至此，所有的动态网页的部分已经结束，宠物商店的四个动态模块构建已经完成，这四个模块是宠物商店的主要功能部分。贯穿整个宠物商店之中，是动态交互式的页面。很多的过程不知道怎么用文字表述，请见谅。4.3静态网页制作宠物商店网页同时也有大量的静态页面来呈现所销售的商品，因此会有大量的介绍页面的呈现。4.3.1网页布局对于宠物商店的布局，对于首页以表格布局，四段式，即标题栏（图标是用photoshop修改过的），中间分三栏，左边是分类页面的向导，中间是对于商品的展示，旁边是图片显示。分页面均以相同表格的形式布局，保持页面的一致性。同时使得左边的分类向导随着页面的变化而变化。4.3.2图片链接以及Flash的插入“属性”面板中拖动“链接”文本框右边的“指向文件”按钮，拖动鼠标时会出现一条带箭头的细线，指向链接文件后释放鼠标，即会链接到该文件。在插入flash的时候出现过bug,flash按钮插入后显示不在一个文件夹下无法使用。很奇怪，后来重新开DW8，重新添加按钮又成功了，也不知道为什么。由于宠物商店涉及到大量的图片的文字内容，在分网页中，添加锚点等功能方便用户使用。4.3.3CSS样式的使用CascadingStyleSheet（CSS）层叠样式表（或级联样式表）用于定义文字属性、文本属性等网页中基本信息，是网页中的字体、大小、颜色等一系列基本信息，不随着浏览器及系统显示的分辨率等因素的变化而变化，使得网页具有一定“固定”性。使用“CSS样式”面板附加样式表新建CSS样式，里面含有编辑样式表、删除CSS样式、创建新的CSS样式三项。在“CSS样式”面板底部单击“新建CSS样式”按钮，在弹出的“新建CSS规则”对话框中进行设置，选择器类型：选择“标签”，自定义标签名称，选择“新建样式表文件”点击确定，保存新建的样式表，即可创建CSS样式表。在对于网页的文字和标题部分，我大量使用了CSS样式表，这样可以使得标题更加美观和突出。4.3.3flash图像查看器的使用在媒体中选择图像查看器，保存相应的Flash元素，对于flash元素进行修改，编辑IamgeURLs进行修改设置，选择需要插入的图片进行保存。宠物之家首页的实现5.1对于logo的设计首页需要突出重点，因此图标和图片元素显得十分重要，我在首页中加入了很多小的元素，并在于此链接的小网页中加入了各种图片元素，参考了部分网站的内容。宠物商店的logo以简洁突出为主要目的，同时色调与首页logo保持一致。以简洁清晰的搭配进行设计，同时用Photoshop进行修改。5.2个性化设置在一开始的设计的思路中，我的想法是用我们每个人的头像用Flash做一个小动画，然后插到每个人的页面中。我在网上搜集了几个可爱的gif和flash的图，然后使用Flash将图像进行抠图，将我们自己的头像换到当中。最后在将拆分的几个图重新拼接，做成动态的小图。希望可以给我们的网站增加些色彩。5.3时间轴的使用将鼠标经过图像变换与时间轴结合使用，在首页制作时间轴，使得页面充满动态的感觉。先选中建立APＤＩＶ元素，后将所需图片插入其中，窗口中选择时间轴后进行设置，增加关键帧等。5.4背景图片的切分我们的首页是用表格布局，因此需要对于背景图片进行切分，充分的利用Photoshop进行切分后对单独的单元格进行背景的设置，或者偷懒的用QQ截图进行功能的实现。5.5添加背景音乐利用代码进行添加，<bgsoundsrc="e:/asp/web/shop/lovesong.mp3"loop=3>，使得音乐在打开页面时播放，最小化时停止。代码可以插在body中，也可以在body之外。P．S．这个部分是我跟陈浩博同学一起实现的，我是负责美工以及链接和分网页的制作。布局是由他完成的，后期制作是由我完成的。这里就只重点介绍没有出现过的功能。第六章总结本小组其实并不是一个非常优秀的小组，相反，可能我们组在整个班级中还算比较差的。在一开始的