网站规划与设计《宠物网站》

网站规划与设计《宠物网站》目录一、项目背景 11、选题的目的和意义 12、课题研究的主要简介 1二、网站开发平台 1三、网站建设日程表 2四、站点地图 2五、线框图 31、主页布局 32、子页布局 3六、设计规范及网页UI设计 31、设计愿望 42、确定网站主题 53、确定网站形象 54、确定网站风格 55、确定网站内容 5七、主要页面的详细设计图 6八、网站测试 81、测试准备 82、用户界面测试 83、功能测试 84、兼容性测试 9九、网站推广与维护 91.网站推广 92、网站维护 9PAGE5一、项目背景1、选题的目的和意义随着社会的日益发展，人们生活质量越来越高，当代人越来越关注精神生活层面的享受，而“宠物显现”就是其表现之一，在现代宠物着装、宠物看病、宠物教育等现象比比皆是，越来越多的宠物爱好者不但乐在其中，而有更多的宠物爱好者联盟组成团体交流养宠过程中的乐趣和经验，通过集体交流不断的去完善自己养宠的只是和方法。当然不仅于此，能突破地域的交流方式被越来越多的宠物爱好者所要求，足不出户就可以分享更多的养宠乐趣和方法。本课题是设计一个宠物网站，目的是为了更好的服务用户。网站服务包括新闻热点资讯、宠物商城、同城服务、宠物学院、意见反馈等功能。2、课题研究的主要简介宠物网站网站是给用户一个方便的购物空间，登陆宠物网界面，根据自己的需求选择浏览，其功能有以下：（1）用户可以通过浏览主页，了解公司的简介以及图片展示（2）用户通过浏览子页，可以对宠物进行细致的了解二、网站开发平台功能模块技术和软件平台操作系统Windows8设计稿、图形处理PhotoshopCS6动画设计制作FlashCS5网页制作平台Dreamweaver网站开发语言HTML,CSS,JavaScript,asp，sql,server网站测试平台Chrome，Firefox三、网站建设日程表完成整个项目所需时间为三个月，其中各项规划任务如下表所示：时间任务内容2月9日-16日拟定项目2月17日-23日制定初步项目计划3月6日-19日网站初步框架3月20日-4月1日网站内容具体丰富4月2日-4月10日总结反思，网站细节完善4月11日-24日计划微调，网站用户体验感测试4月25日-5月7日网站装饰再加工，CSS布局，JS语言5月8日-5月10日最终测试四、站点地图（1）系统前台功能模块如图4.1所示用户注册用户注册用户登录用户资料服务查询意见反馈系统前台商品购买图4.1系统前台功能模块结构图（2）系统后台管理功能模块图后台管理系统后台管理系统网站常规管理管理员账号管理用户资料管理订单管理未处理订单已处理订单意见反馈管理查看、删除宠物网站宠物网站用户登录意见反馈服务查询用户登陆商品购买用户资料修改、查看修改、查看购买、除查询添加后台管理系统管理员账号管理用户资料管理未处理订单已处理订单意见反馈管理查看、删除查看、删除确认、删除修改、删除修改、删除五、线框图1、主页布局登录注册登录注册背景图片导航主推荐板块图片主推荐公告版权及其他版权设计Logo图片Logo图片2、子页布局登录注册背景图片登录注册背景图片导航二级导航公告版权及其他版权设计Logo图片Logo图片六、设计规范及网页UI设计宠物网网站这个网站是运用了HTML静态网页技术，和Dreamweaver软件相结合实现的。页面间通过网页链接，实现具体所要查找的食品，可以方便用户的需要做出选择，给人们带来了极大地方便。1、设计愿望当用户点击希望去的界面时，就会自动的链接到用户希望的那个网页。展现给用户相应的界面，在每个界面都会有这几个选项卡，用户可以在其中自由的切换。2、确定网站主题建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰。如果网站结构不清晰，目录庞杂，内容东一块西一块。结果不但浏览者看得糊涂，自己扩充和维护网站也相当困难。网站的题材确定后，并且收集和组织了许多相关的资料内容，但如何组织内容才能吸引网友们来浏览网站呢？栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。因此我将美食网站分为六个栏目，分别是首页、公司简介、新闻中心、产品中心、人才招聘和联系我们。3、确定网站形象网站形象的设计可以从网站的LOGO、网站的色彩、网站的字体宣传语等这些方面着手。网站色彩，网站给人的第一印象来自于视觉的冲击，不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。“标准色彩”指的是能体现网站形象和延伸内涵的色彩，给人们一种以整体统一的感觉。我个人网站的色彩是以橙色为主，黑色的字体和浅色的图像给人一种舒服的感觉，仿佛生活在虚幻的世界里。网站字体，和标准色彩一样，标准字体是指用于标题、主菜单的一些特有字体。为了体现网站所特有的风格，可以根据自已的网站所表达的内涵，选择更贴切的字体。我的个人网站的标准字体是华文彩体。给人一种沉稳而不失俏皮的感觉。表格布局的过程：设计出框架为800*1000的布局表格，再在表格中添加适当的单元格链接设计制作的过程：主页与五个子页进行连接图片处理的过程：单元格设定好，图片大小和单元格同等大小然后添加导航按钮的设置等等4、确定网站风格风格是抽象的，指网站的整体形象给浏览者留下的综合感受。这个“整体形象”包括网站的LOGO、网站的色彩、网站的字体、网站的标语等许多因素。图4-1logo设计网站是可以平易近人的、生动活泼的，也可以是严肃专业的。但不管是在色彩、技术、文字、布局、还是交互方式上，只要能由此让浏览者明确的看出这是你的网站所独有的，这就形成了一种风格。风格是有人性的，它通过网站的色彩、技术、文字、布局、交互方式等可以综合概括出一个网站的自己的个性；我的网站风格是以舒服为主，给人一种舒舒服服的感觉。5、确定网站内容本课题是设计一个宠物网站，目的是为了更好的服务用户。网站服务包括新闻热点资讯、宠物商城、同城服务、宠物学院、意见反馈等功能。用户注册后可以进行购买商品、意见留言、宠物知识学习等功能。后台可以对本系统的各种信息进行维护管理。系统前台用户通过注册后可以访问前台界面，登录网站界面，进行了解新闻、购买物品和知识的了解；但是系统后台只有管理员身份才能进入。管理员通过身份密码验证，进入到后台管理系统，方能对本系统的各个信息进行维护和管理，包括增、删、改基本信息的操作。该网站主要具有如下模块：1)登录信息管理：包含用户注册、用户登录和修改个人密码功能。2)商品信息管理：添加或删除购物车里的内容。3)用户意见管理：用户可以提出自己的对网站的意见。4)管理员的功能：对注册用户和用户建立的班级进行管理并对网站的参数进行定义的功能。七、主要页面的详细设计图图7.1界面设计图7.2用户登录成功图7.3用户登录失败图7.4用户激活图7.5管理员登录图7.6管理员登录成功图7.7用户信息修改图7.8用户密码资料修改图7.9商城信息图7.10商品信息图7.11成功添加商品图7.12搜索不同宠物店图7.13意见反馈图7.14用户注册信息图7.15密码找回图7.16信息输入错误图7.17密码修改页面八、网站测试1、测试准备测试前对被测系统做好以下准备：系统的全面备份，包括应用程序备份、数据备份等；记录测试前系统状态；制定应急措施，确保在测试中发生问题时系统可恢复。测试员应在测试开始前了解网页的相关情况，对测试的预期结果应进行准备和预测。测试前要做好真实数据的准备工作，并进行系统的数据初始化。2、用户界面测试主要测试导航条、内容、颜色、背景、图像、返回等。3、功能测试主要测试站点中的链接等。链接测试：目的是检查各个URL所联接的页面是否正确。表单测试：目的是检查每个表单与程序是否正确联接，能够正确地发送用户请求。4、兼容性测试主要检验应用能否在不同的客户端使用。如苹果（iOS系统的）用户，经常使用chrome，Firefox等浏览器的用户是否都能正常使用。九、网站推广与维护1.网站推广（1）微信公众平台、朋友圈、微博、QQ空间推广（2）论坛推广我们可以注册几十个论坛，每个论坛注册若干个帐号，把签名设为自己的网站及团队图标。发表热门内容，自己顶自己的帖子。目前我们应用的论坛包括校内的极速之星、外网的百度贴吧、天涯论坛、豆瓣等等网民较为聚集的地方。（3）电子邮件推广我们会像宜家一样让用户进行自愿注册会员，浏览者自愿留下他的邮箱地址，定期或不定期的发布一些电子刊物、会员通讯、专业服务商的电子邮件广告等。可以减少广告对用户的滋扰、增加