搜索
《网页设计与网站建设》课程卷二实践考核网页设计与网站建设设计说明书设计题目：美食园网站设计与实现姓名：糜丽娟学号：20080530248班级：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.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。这样，所选图片将作为整个网页的背景。插入flash动画关于Flash视频使用Dreamweaver中的“插入Flash视频”命令，可将Flash视频内容插入Web页面，而无需使用Flash创作工具。设置鼠标经过图片，进行图片交互再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一个对话框，在对话框中可以设置鼠标经过前的图片和经过时的图片，选择“确定”即可。设置链接选中图片或者文字，在下面的链接属性中输入所要连接到的地址。我设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。（二）、后台功能设计（一)建立web应用开发及运行环境1、安装和设置IIS：通过控制面板中添加/删除程序——添加/删除Windows组件，创建虚拟目录2、建立IIS站点：打开网页菜单中站点，创建站点3、建立数据库并连接站点：创建数据源，连接4、实现用户登录、注册、修改密码功能：新建动态网页，加入表单、表单元素和修改它们的属性值5、应用程序中服务器行为的应用：包括了用户身份验证——登录用户、绑定——阶段变量、插入记录、检查新用户名、记录集、更新记录等（二）商品信息维护与集成购物车系统1、实现商品信息输入功能：插入记录行为的进一步应用2、实现商品信息修改功能：深入理解更新记录服务器行为，运用表单、请求变量、记录集、动态列表/菜单的设置动态数据3、实现商品信息查询功能：重复区域服务器行为的运用和引用动态数据，插入图像占位符、绑定记录集和记录集分页、显示区域的应用4、实现商品信息搜索功能：用高级方式定义复杂的记录集，在记录集定义的SELECT语句中引用表单元素值5、实现购物车功能：查看购物车页面，定义购物系统的数据库连接，创建记录集，插入记录到购物车，防止放入重复商品，检查新用户名。6、集成的搜索和选购功能：手写代码实现复杂搜索、选购功能，改代码实现清空购物车功能，下订单功能7、留言板的制作和新闻公告的加入：留言板制作时包括了用户留言的输入、留言信息表、详细信息浏览等页面制作；商品新闻制作时要注意记录集的制作和数据库的建设。（三）、重难点分析1、网页的布局分栏制作时经常出现胡乱现象，布局要重复的考虑到各方面的全面信息，做的合理明确。2、在时间轴的制作中出现不少的问题，对其的操作并不熟练，在制作过程中添加帧、添加行为、移除帧等时出现错误，不过都及时的请教老师、同学，并改正。3、动态网页的制作过程中，一开始的IIS环境设置和站点、数据源的建立都花费很多时间，开始时并未能正