首页 > 分享 > 2016年鲜花满屋

2016年鲜花满屋

花匠小妙招
2024-12-03 06:58

《2016年鲜花满屋-售花网店设计.doc》由会员分享，可在线阅读，更多相关《2016年鲜花满屋-售花网店设计.doc（21页珍藏版）》请在咨信网上搜索。

网站建设课程设计说明书(论文) 网站建设课程设计任务书 2010 —2011 学年第二学期专业班级：09计算机网络与技术课程名称：网页设计学号： 092601093 姓名：宗洋完成期限：自 2011年 11 月 1 日至 2011 年 11 月 17日课程设计题目：鲜花满屋售花网店设计目的：随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业宣传的工具。为了进一步加深、巩固所学专业课程（《网站设计》）的基本理论知识，进一步培养自己综合分析问题和解决问题的能力，使自己能够通过本次课程设计而得到全面的锻炼。功能定位：以网络平台充分体现本网站的功能性在目标顾客访问网站的同时收集公司的目标顾客潜在顾客的资料以及进行的交流沟通和商业往来信息；对顾客提供相关产品及周边；拓宽销售渠道；帮助公司改进营销方法和营销策略使公司能系统了解市场和把握市场更好满足市场需求。一、设计的任务：完成网站中各个模块功能的设计和实现。二、开发工具：Macromedia DreamweaverCS5 PhotoshopCS5 三、要参考资料： [1]胡海等著，网页设计梦工厂DREAMWEAVER篇.北京：清华大学出版社.2008 [2] 网站建设教程/金旭亮，吴彬.北京：高等教育出版社，2003.7 [3]曾顺，精通css+div网页样式与布局.北京：人民邮电出版社.2007 [4]邓文渊等，网页制作彻底研究.北京：人民邮电出版社，2002 [5] 网站建设教程/金旭亮，吴彬.北京：高等教育出版社，2003.7 指导教师（签字）：侯仕平教研室主任（签字）：网站建设课程设计说明书课题：　　网店建设姓名：　宗洋　学号： 092601093 年级专业：　计算机网络技术班级： 09普专计算机网络技术指导老师：　　　侯仕平　　　院系：　　国际学院　提交日期：2011年11月 I 摘要本网站使用Macromedia Dreamweaver进行开发，结合Photoshop等软件一起制作。本网站包含关于本站、作品介绍、最新动态、周边商城等的设计与实现。首先对网站的需求进行了分析，建立网站工作流程图。然后划分网站的功能模块，最后详细描述了各个功能模块实现的方法，并给出相应代码。本网站结合Dreamweaver所学的知识，构建的一个实例网站，首先是网站的首页以及网站各个模块的组成，接着设计网站的主要体系结构，然后结和各个模块进行详细分析。本网站主要是用来介绍和推广‘鲜花满屋’这家网售花店的产品和活动。关键字：Dreamweaver ，Photoshop，网站设计，鲜花满屋网页设计课程设计说明书目录 1、前言2 2、需求分析2 2.1 市场分析2 2.2 技术可行性分析2 2.3 性能需求3 3、功能模块的关系图33 4、网站介绍4 4.1分析架构4 4.2 设计分析4 4.3 排版构架5 4.4 模块分析6 4.4.1 Banner图片7 4.4.2 导航菜单7 4.4.3 鲜花导购8 4.4.4 主体内容9 5、整体调整9 6、总结9 7、致谢9 参考文献9 1、前言随着社会发展，人类的生产生活越来越离不开网络，网络已经影响到地球上的每家每户。网络的规模也逐渐增大。网络的元素也随之而增加，有的利用其通信，有的利用其作为商业用途，在网络上进行出售、收购、宣传等用途。从而使得网络越来越成为现今社会上必不可少的元素，而网站就是这个网络里的一个很大的元素。本网站结合自己所学的知识，构建的一个实例网站，首先介绍网站的功能，接着设计网站的主要体系结构，然后结和各个模块进行详细分析。 2、需求分析 2.1 市场分析金融危机为外资企业入驻中国网上花店行业创造了条件，国际许多网上花店企业已经看中在中国低成本拓展市场的机会，随着外资投入逐步加大，中国国内企业改革重组迅速加快。同时新的行业制度等政策的颁布和实施将促使我国网上花店行业洗牌，企业兼并重组将在政策的促使下大力发展。随着国内环保经济的发展，低碳已经成为“十二五规划”中的主题，网上花店行业的产业升级已经迫在眉睫。　　尚普咨询通过科学的市场分析建议投资者加强对网上花店行业企业的筛选，选择行业龙头企业、长期增长的企业、具有良好赢利模式的企业，关注网上花店行业子行业，关注网上花店行业上下游企业，优化客户结构，针对网上花店行业需求进行新产品开发。 2.2 技术可行性分析这个网站是基于Dreamweaver来开发的。运用了Photoshop、并参考了多方面的书籍的情况下完成的。通过它来构建一个在线的网站，实现在互联网上使用的网络的绝大部分功能，本网站在技术上是可以达到的。 2.3 性能需求设备需求：PC机，WindoesXP/Win7操作系统，利用Dreamweaver，photoshop 3、功能模块的关系图图3-1 系统模块图 4、网站介绍 4.1分析架构本网站的网上商店主要以出售鲜花为主，这种类型的网站的特点就是绚丽，让人感觉琳琅满目而美丽大方。结合花店的主题，因此采用粉色为主的色调。又考虑到鲜花的各式各样，因此站点还包涵鲜花导购等小知识，效果图如4-1所示。图4-1网站首页 4.2 设计分析该网站的文字内容并不是很多，主要页面都是商品的展示，包括各式各样的鲜花图片以及售价，左侧的导航将鲜花进行各方面的分类，便于顾客的分类查询。页面整体上实用粉红色调，图片的边框都是使用红色系，各个小标题偶尔试用绿色作为点缀，别有一番风味。主体部分的内容大部分分为推荐商品、鲜花报价、新品上市和鲜花的导购等，各个栏目都采用白色背景，让页面在红火的色调下不失高雅，整洁与大方。左侧的登录系统和鲜花的导购的文字主要采用黑色，目的在于清晰，让顾客能够快速找到想要购买的商品。 4.3 排版构架整个网页构架十分简单，包括banner图片，导航条，左侧的导购信息，以及主题部分的鲜花展示等，因此采用最基本的网页构架，如图4-3所示。图4-3页面框架 <div id="container"> <div id="banner"></div> <div id="globallink"></div><div id="left"></div><div id="main"></div> </div> 上图中的各个部分采用了HTML代码中的各个<div>对应的id。其中#banner块对应页面上的banner图片，#globallink则是网站的导航菜单栏，#left包涵登录系统以及鲜花的分类信息，#main块则主要包括本站快讯、鲜花推荐、新品上市和鲜花导购等，其中#left与#main页面的主体块，他们的子块关系如图4-4所示。图4-4#left与#main页面的框架这两个部分在整个页面中占主体部位置，设计的时候细节比较关键，直接决定着真个页面是否吸引人，相应的代码框架如下： <div id="left"><div id="login"></div><div id="category"></div><div id="main"></div> <div id="latest"></div> <div id="recommend"></div> <div id="new"></div> <div id="tips"></div> </div> 4.4 模块分析在确定页面的各个块与子块后，便可以对网页的各个部分进行设计了，本网页的整体上设置粉红色背景，采用固定宽度剧居中的板式，代码如下。 body{background-color:#ffd8d9;margin:1px 0px 0px 0px;padding:0px;font-size:12px;font-family:Arial, Helvetica, sans-serif; } #container{position:relative;margin:0px auto 0px auto;width:700px;text-align:left; } 4.4.1 Banner图片本网页banner图片的制作十分简单，在photoshop中建立Banner文件后导入一张玫瑰的图片，在使用渐变效果，让他跟背景颜色自然过度。 Banner图片添加文字，重点在于醒目、大方、又能配合整个网站的特点，文字采用阴影和描边的效果，最后给整个图片添加一个白色的边框，便得到了banner图片，如图4-5所示。图4-5 banner图片 4.4.2 导航菜单导航菜单采用项目列表的方式，将<ul>标记与<li>标记进行相应的设置，使得菜单能显示到同一行上面，代码如下： <div id="globallink"><ul><li><a href="#">关于本店</a></li><li><a href="#">鲜花礼品</a></li><li><a href="#">绿色植物</a></li><li><a href="#">花之物语</a></li><li><a href="#">会员中心</a></li><li><a href="#">联系我们</a></li><li><a href="#">返回首页</a></li></ul><br></div> 这里为超链接添加背景变换的效果，如图4-6所示。图4-6背景变幻背景变换的代码如下 #globallink{margin:0px; padding:0px; } #globallink ul{ list-style:none;padding:0px; margin:0px; } #globallink li{float:left;text-align:center;width:100px; } #globallink a{display:block;padding:9px 6px 11px 6px;background:url(button1.jpg) no-repeat;margin:0px; } #globallink a:link, #globallink a:visited{color:#630002;text-decoration:none; } #globallink a:hover{color:#FFFFFF;text-decoration:underline;background:url(button1_bg.jpg) no-repeat; 图4-7 导航条 4.4.3 鲜花导购考虑到实际购物的网站需要保存顾客的信息，以便顺利的进行交易，因此在#left块中必须含有用户登录的菜单，代码如下： <div id="login"><form><p>用户: <input type="text" class="text"></p><p>密码: <input type="text" class="text"></p><p><input type="button" class="btn" value="登录"> <input type="button" class="btn" value="注册"> <a href="#">忘记密码</a></p></form></div> 在#login中没有用户登录的字样，因此用图片代替， #login{background:url(login.jpg) no-repeat;padding:55px 0px 10px 0px; } #login form{padding:0px; margin:0px; } #login p{margin:0px; text-align:left;padding:5px 0px 0px 25px; } #login p input{font-family:Arial, Helvetica, sans-serif;font-size:12px; } #login form input.text{border-bottom:1px solid #000000;border-left:none; border-right:none;border-top:none;padding:0px; width:90px; } #login form input.btn{border:1px solid #000000;background-color:#ffeff0;height:17px; padding:0px; } #login p a:link, #login p a:visited{color:#333333;text-decoration:none; } #login p a:hover{color:#000088;text-decoration:underline; } 用户登录的做法，简历一个PSD文件，使用页面的粉红色作为背景颜色，在背景图片上设置树叶的形状，添加阴影效果，最后添加文字，最终效果如下图4-8 图4-8 小标题 4.4.4 主体内容页面的主体部分主要以鲜花的图片展示和价格为主，各个板块的设置方法都大同小异。块的整体依然采用左浮动的固定宽度板式[1]，代码如下： #main{float:left;width:518px;margin:1px 0px 0px 2px } 位于最上方的是“本站快讯”，其实它的结构就是几张图片，显示出网站最近的新品、折扣和酬宾等相关信息，代码如下： <div id="latest"> <a href="xinhua.html"> <img src="new1.jpg"></a> <a href="youhuei.html"> <img src="new2.jpg"></a> <a href="#"><img src="new3.jpg"></a> </div> #latest{background:url(latest.jpg) no-repeat;padding:35px 0px 0px 0px; } #latest img{border:none;padding-left:1px; } 效果如图4-9所示图4-9 本站快讯接下来“鲜花推荐”与“新品上市”都是花的图片展示，考虑项目列表自动换行方面的便利，用幻灯片效果的做法[2]，直接对图片进行排版，代码如下： </div><div id="new"><ul><li><a href="#"><img src="flower9.jpg"><br>粉色迷情</a></li><li><a href="#"><img src="flower10.jpg"><br>海岸的幽雅</a></li><li><a href="#"><img src="flower11.jpg"><br>百年地中海</a></li><li><a href="#"><img src="flower12.jpg"><br>爱要说出口</a></li></ul><br> </div> CSS文件代码： #recommend br,#new br, #tips br{display:block;clear:both;margin:0px; padding:0px; } #recommend ul, #new ul{list-style:none;margin:0px;padding:5px 5px 5px 8px; } #recommend ul li, #new ul li{text-align:center;float:left;width:125px; } #recommend ul li img, #new ul li img{border:none;margin:5px 0px 3px 0px;padding:0px; } #recommend ul li a:link,#recommend ul li a:visited, #new ul li a:link,#new ul li a:visited{color:#666666;text-decoration:none; } #recommend ul li a:hover, #new ul li a:hover{color:#d20005;text-decoration:underline; } 效果如图4-10所示图4-10 鲜花展示内容部分是最下端的“鲜花导购”，主要是鲜花的一些常识，需要以文字的形式进行项目列表的排版，要求项目列表分成两列显示，HTML框架如下[3] <div id="tips"><ul><li><a href="huayu-7.html">各种鲜花所代表的含义</a></li><li><a href="huayu-7.html">花的喜怒哀乐与人的各种感觉</a></li><li><a href="#">养花与养生之道</a></li><li><a href="#">每天清晨的第一缕阳光</a></li><li><a href="#">花香的味道</a></li><li><a href="#">世界各地关于送花的习俗</a></li><li><a href="xinhua.html">种花与送花</a></li><li><a href="huayu-7.html">手捧一束鲜花的等待</a></li></ul><br> </div> 想要将项目列表分成两列显示其实十分简单，只要给<li>指定一个宽度即可。指定宽度后项目列表便会自动按照宽度进行换行，显示效果如图4-11所示。[4] #tips{background:url(tips.jpg) no-repeat;margin:5px 0px 0px 0px;padding:35px 0px 0px 0px;background-color:#FFFFFF; } #tips ul{list-style:none;margin:0px;padding:5px 5px 5px 30px; } #tips ul li{background:url(icon2.gif) no-repeat 5px 6px;padding:1px 0px 1px 12px;float:left;width:220px;/* 指定宽度 */ } #tips ul li a:link,#tips ul li a:visited{color:#222222;text-decoration:none; } #tips ul li a:hover{color:#d20005;text-decoration:underline; } 图4-11 鲜花导购 5、整体调整通过对所有子模块的排版，整个网购网站的首页基本做完，最后必须对整体页面进行查看，细节上做小的调整[5]。最终页面在IE8中显示的效果如图5-1所示。图5-1 在IE8中的预览效果 6、总结至此，本论文从设计到实现展示了一个简单的网站系统。从宏观上分析，功能不过于首页介绍、banner等几个最常用的功能。同时，在网站的实现过程中首要的是对需求的分析。然后，是对页面的设计，只要设计好页面，就做好了网站的基础在此看来，做一个好的网站首先要设计一个好的框架。接下来是对各个功能模块的具体设计，其实网站的建设方法都大体类似。总之，从设计到实现这个网站建设，可以学到一些网站建设的通用知识，为以后建设一些大型网站打下基础。该网站结合所学知识，构建一个淘宝交易的简单网站，首先介绍网站的功能与页面，接着设计网站的体系结构，然后针对具体功能模块进行详细分析 7、致谢时将近半个月的时间终于将这篇课程设计写完了，在写作过程中遇到了无数的困难和障碍，都在同学和老师的帮助下度过了。尤其要强烈感谢我的指导老师侯仕平老师，他对我进行了无私的指导和帮助，不厌其烦的帮助进行论文的修改和改进。在侯仕平老师的精心指导下完成了本次课程设计，他丰富的专业知识、博爱的胸怀、谦逊的品质和严谨细致、一丝不苟的作风是我工作、学习中的榜样；他循循善诱的教导和不拘一格的思路给予我无尽的启迪。通过这短短半个月的毕业设计环节，我无论在基础理论知识、软件操作技能、还是独立思考问题能力方面都有了长足的进步，与此同时，老师还经常教育我一些为人处事的道理，使我在增长知识的同时也收获了许多人生哲理，在此谨对老师致以衷心的感谢！本论文从选题、编程设计到毕业论文整个过程都倾注了老师的心血，再一次向他表示衷心的感谢和诚挚的敬意！同时要感谢我感谢我的同学和朋友，在我写论文的过程中给予我了很多你问素材，还在课程设计的撰写和排版灯过程中提供热情的帮助。在写作过程中我还学到了团队精神的重要性，无论做什么事，都不能脱离团体。希望在以后的学习或工作中，能够有一个比较严谨、缜密的态度来对待。而且，时时保持一颗清醒的头脑，一个灵活的创新头脑。本文引用了数位学者的研究文献，如果没有各位学者的研究成果的帮助和启发，我将很难完成本篇论文的写作。由于我的学术水平有限，所写写作难免有不足之处，恳请各位老师和学友批评和指正！再次感谢大家！！谢谢！！！参考文献 [1]胡海等著，网页设计梦工厂DREAMWEAVER篇.北京：清华大学出版社.2008 [2] 网站建设教程/金旭亮，吴彬.北京：高等教育出版社，2003.7 [3]曾顺，精通css+div网页样式与布局.北京：人民邮电出版社.2007 [4]邓文渊等，网页制作彻底研究.北京：人民邮电出版社，2002 [5] 网站建设教程/金旭亮，吴彬.北京：高等教育出版社，2003.7 17

咨信网温馨提示：
1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前自行私信或留言给上传者【a199****6536】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时私信或留言给本站上传会员【a199****6536】，需本站解决可联系【微信客服】、【 QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”（推荐），意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：4008-655-100；投诉/维权电话：4009-655-100。