美食园网站设计报告书

《网页设计与网站建设》课程卷二实践考核网页设计与网站建设设计说明书设计题目：美食园网站设计与实现*名：***学号：***********班级：08信管2指导教师：***完成日期：2010年12月15日美食园网站的设计与实现一、概述电子商务在我国得到了快速的发展，它是数字化商业社会的核心，是未来企业发展、生存的主流方式。因此新的社会需求要求我们大学生应该具备自己设计开发网站的能力，在本学期的学习中，我已经清晰的了解了建设电子商务网站的知识结构，从电子商务网站的概念、网站的外观设计和内容编辑、Web应用程序开发等三大方面的内容全面的学习掌握了本学期商务网站的学习设计。本网站是以与食品相关的系列产品为基准进行建立的，因此将它命名为“美食园”，理念贯彻到命名当中，以在本次的网站制作过程中，我全面运用了本学期学习的《电子商务网站建设教程》中的各项知识点，从开始的建站点、网件基本操作到层与表格的运用、超级链接与框架网页运用、行为与时间轴应用、表单应用再到VBScript脚本语言运用，接着就开始了动态网页的制作，其中包括了安装IIS环境和建数据库连接，实现登录、注册、改密码功能。最后建设商品信息维护系统，包括了商品息输入、修改、查询功能，并在集成购物车系统中实现商品搜索与购物车等功能。我这次的设计主题是开发建设一个关于介绍食品厨艺、美食文化典故、食疗药膳、营养健康、厨房餐厅、国外料理等的全面性美食网站，同时作为一个电子商务网站，其最重要的功能当然还是产品交易，在本网站中有中华各特色食谱、美食文化和健康养生书籍、厨房餐厅图集、各种食品材料和特色菜的买卖。希望通过网站大家即可订购餐点或交流做菜心得，一圆自己的创业梦这样别人一看就很清楚是个什么网站，并且便于记忆。将“脑白金”的彻底的“俗”让更多的人记住它。页文信地甚至一展自己的设计天份，并向大家推广新式售卖模式，同时亦为某些创业者提供测试市场的平台。预期本次的网站制作将会满足客户的基本需求，网站能够实现基本的信息浏览、查询、搜索等功能，为网站的访问者提供全面舒心的服务。二、项目需求分析在这个市场经济的时代，网易型的网站相信都是以利益为其宗旨的，但是“美食园”是一个给大学生实践的平台，这就注定了它的宗旨不能够是唯利是图。无论到什么时候，它只能是大学生的利益以及交流为第一宗旨，其次才是网站的商业运行等等。日前随着科技的进步，人们对于网络的需求将会越来越高，在现在网络已经为人们提供了更加方便快捷的交流、交易方式，各种各样的信息将全会体现在网络上。特别是随着现在的趋势，人们必然会越来越喜欢网上购物，我们网站便是紧紧捉住这一需求——生活离不开食品，建设这一网站仅应了解该网站要运行什么单位现有系统等，还需知道这个网站希望达到什么样的目的，即必须清楚网站的目标市场在那里。这将成为整个网站所有设计思想的基础。无论网站采用何种形式，什么样的外观，提供什么的内容，都要以网站的最终目的为出发点来考虑。我的客户群体将是非常的广泛，人的生存离不开食品，自然是不分职业、年龄、性别的各个阶层的社会大众都会浏览我们的网站，这样就要求网站注意信息的广泛和丰富性，不过因为是学生设计，我将会更加倾向学生市场，满足大学生的新潮需要。大学是一个小社会，商业发展的程度也不压于市场经济的发展必然带了相关产业的发展，然置、学习时间等等的影响，商品经济的发展受到很大的限制。网上交易就这样孕育而生了，由于没有时间、地理的局限，网上平台得到了很大很快的发展。为了给大家提供一个更好的网上环境，设计一个网上平台，是相当有必要的。根据交易平台的目的，网站采用C2C的模式，件就可以成功注册。我希望能够将网站做的更加完善，可以让用户自己在这样一个平台上交流买卖，双方可以通过自己的渠道进行协商，达成一致。提到盈利点，尽管网站的宗旨不是纯粹的为了盈利，但网站要运行，也要发展，就需要一定的费用。我本网站不仅能够买卖商品，更加可以为大家提供一个浏览了解相关知识的平台。三、项目总体设计通过我们详细的需求分析之后，我们形成了项目的总体设计方案，主题是以满足大家的需求。对于网站设计来说，不应用程序，需要如何连接设计中发展程度。经济而地理位任何个人只要提供有效的证希望

食品为主，并附加包括食谱、材料、佐料、蔬果、餐厅、厨房厨具等在内的一系列相关商品信息。网站在设计中充分考虑到了用户的阅读需求，将页面的结构、色调、布局、导航条等都进行了细致的调整，保证用户在阅读是的舒适流畅。网站的整体架构设计简单图示如下：主页中华美食食疗药膳糕点主食厨房烹饪营养健康国外料理疾功肝能烹饪技巧厨房厨具人群膳保食健四季餐厅展示病调理肺调调理理在栏目设计中大量应用了布局技巧，通过布局、表格的精确使用，将整个网的明确清晰，栏目的划分中考虑了多方的因素，大标题中加入了小所以，在我栏页的布局更加标题，栏目进一步的细化，还充分想到了人们对于对称的接受力，目的布局中加入了对称结构，使得信息分类更加的清晰明朗。同时，内容中加入了相关的图片、文字、视频、导航条、FLAsh按钮等，将网页的可读性进一步的提高。导航条的设计中考虑到了各方的因素，化。在功能的设计中，加入了滚动文字、图片转换、背景音乐、时间轴应用、登、商品信息输入、修改、查询功能，并在集成购物车系统中实现商品搜索与购物车等功能。建设数据库时使用的是MicrosoftOfficeAccess2003，包括了数据库中用户和商品信息表的制作，各表间的关系连接，源，最后在ＡＳＰ的动态页面中建立到数据库的连接。同时还有IIS环境的配置，创建虚拟目录，建立根据信息的分类要求，使导航条明确录注册功能定义数据参考大量用类网站，商业化的美食网站，都是采用中规中矩的结构，通过大小不一的方框分解整个页面。颜色为了提高阅读的舒适度，颜色应以柔和淡雅的色调为主，在作导航条等反差颜色采用也应以采用柔和淡雅的色调。建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。把所有的素材都整理好（图片，文章，相片），开始布局。最开头是网页的标题和网页的导航栏，中间一大片用于放正文，分为五大板块，下面就是版权信息，友情连接，联系信息。这种布局方式看起来比较的整齐，简洁美观。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。图像与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。最常用的图像格式是GIF、JPEG和BMP。（一）在网页中插入图像利用Dreamweavercs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。1.新建一个空白网页，把光标定位在网页的开始位置。2.打开菜单项，或者单击工具3.在此对话框中单击“浏览4.在“选择文件”对话框的文件列表中选择某个图像文按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后再对图像的各种属性进行设置。“工具”菜单，选择“图片栏中的图片工具图标，弹出一个”按钮，出现一个“选择文件”对件，然后单击“确定””菜单项，在子菜单中选择“来自文件”话框。话框。“图片”对（二）图像的各种属性设置1.选中所插入的图片，选择图片属性2.编辑图片属性(1)设定图像边框粗细：根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。(2)编辑图像大小：在Dreamweaver中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。缩放比例：设置图像缩放比例就是将图像设置为大小可以按比例浏览器窗口里图像都能(3)设置图像变化，与浏览器的大小成一固定比例，这样在不同大小的正常的显示外观。1.选中2.在“大小”栏中“宽度”和“高度”下面的“百分比”单选按后然在“宽度”和“高度”栏里输入想显示的置。还可以“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。（三）编辑在Dreamweaver中，可以图像进行编辑，编辑网页中的图像同时选中钮，比例，单击“确定”完成设在属性的网页中的图像使用“图片”工具栏中的各种工具对网页中的功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。（四）使用背景图像使用背景图像填充，而使用背景图像页更美观好看。1.新建一个空白网页。2.单击鼠标右键，弹出的快捷菜单里选话框.3.在“选择背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色则是将网页的背景用图像平铺。这样做可以使制作的网“网页属性”，弹出“网页属性”对”对话框中单击“浏览文件”按钮，出现一个“选择

插入flash动画关于Flash视频使用Dreamweaver中的“插入Flash视频”命令，可将Flash视频内容插入Web页面，而无需使用Flash创作工具。设置鼠标经过图片，进行图片交互再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一个对话框，在对话框中可以设置鼠标经过前的图片和经过时的图片，选择“确定”即可。设置链接选中图片或者文字，在下面的链接属性中输入所要连接到的地址。我设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。（二）、后台功能设计（一)建立web应用开发及运行环境1、安装和设置IIS：通过控制面板中添加/删除程序——添加/删除Windows组件，创建虚拟目录2、建立IIS站点：打开网页菜单中站点，创建站点3、建立数据库并连接站点：创建数据源，连接4、实现用户登录、注册、修改密码功能：新建动态网页，加入表单、表单元素和修改它们的属性值5、应用程序中服务器行为的应用：包括了用户身份验证——登录用户、绑定——阶段变量、插入记录、检查新用户名、记录集、更新记录等（二）商品信息维护与集成购物车系统2、实现商品信息修改功能：深入理解更新记录服务器行为，运用表单、请求变量、记录集、动态列表/菜单的设置动态数据3、实现商品信息查询功能：重复区域服务器行为的运用和引用动态数据，插入图像占位符、绑定记录集和记录集分页、显示区域的应用4、实现商品信息搜索功能：用高级方式定义复杂的记录集，在记录集定义的SELECT语句中引用表单元素值5、实现购物车功能：查看购物车页面，定义购物系统的数据库连接，创建记录集，插入记录到购物车，防止放入重复商品，检查新用户名。6、集成的搜索和选购功能：手写代码实现复杂搜索、选购功能，改代码实现清空购物车功能，下订单功能2、在时间轴的制作中出现不少的问题，对其的操作并不熟练，在制作过程中添加帧、添加行为、移除帧等时出现错误，不过都及时的请教老师、同学，并改正。3、动态网页的制作过程中，一开始的IIS环境设置和站点、数据源的建立都花费很多时间，开始时并未能正确的理解怎样创建，在这上面浪费了不少的时间。4、到商品的复杂搜索、查看购物车、放入购物车、清空购物车和下订单时引用代码的编写时，经常会粗心的写错代码或是数据库连接错误。五．结论这次设计让我更加熟悉了从理论到实践的跨越。从当初的在网上查阅资料，到现在的网站运行，这中间有很多值得回味的地方。在计算机的世界里，只要你有兴趣，总会有太多新奇的东西吸引着你。这次的设计，从选题到实现，几乎都是自己独立完成的。网站建设从需求分析到设计、测试，我都力求规范化，努力让自己以前学的知识运用到本网站的开发中，尽量保证整个系统的开发质量，顺利完成这次的设计，为自己的网页制作课程结束画一个完美的句号。在网站建设过程中，好多知识都是随学随用，就增加了很多不必要的力下，一些问题也随之克服了，通过这次美食网网站设计，使我增加了很多的知也掌握了很多网页设计的操作技巧，虽然还有很多不足之处，但这并不重要，重要的是我对网页的设计又有了更深的了解。麻烦。虽说这些都会消耗开发的时间，但在自己的不断努识，学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你一个问题时，如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了很长时间才解决。碰到学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们要不断的学习。我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。因此我提倡简单的美。不要过于注重色彩的灿烂，只要简单就行。我们最终追求的主要是实用价值。

信息工程学院《网页设计与网站建设》实践环节考核报告单2010-2011学年度第一学期