E时代电子优惠券网站的设计与制作—毕业设计.doc

毕业设计（论文）任务书毕业设计（论文）题目：E时代电子优惠券网站的设计与制作设计（论文）的基本内容： 本课题主要利用“Dreamweaver”、“Flash”、Photoshop等技术和工具设计并实现电子优惠券推介网站，采用静态网页完成网站的设计，网站将包括网站Logo、Flash动画，个性素材，并且网站将保持统一风格，利用外部CSS描述页面显示样式，页面布局采用div方法。本网站实现四个主要模块：会员注册、优惠券分类、商家信息、消费者社区。毕业设计（论文）专题部分：题目：设计或论文专题的基本内容： 学生接受毕业设计（论文）题目日期第 1 周指导教师签字：2009年 12月 1 日E时代电子优惠券网站的设计与制作摘 要随着信息技术日益渗透到社会经济和生活的方方面面，没有人可以否认Internet带来的巨大变化和革命性的影响。21世纪人类生活模式和商业模式等将全面发生转型并表现为网络模式，即生活网络话和商业网络话。Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的，易于被人们所接受的信息检索手段，World Wide Web(简称WWW)发展十分迅速，成为目前世界上最大的信息资源宝库。，一种真正能发挥Internet效能的电子商务技术正在向我们走来。电子商务的发展非常迅速，电子贸易额剧增。电子优惠券是随着Internet技术的迅速发展和普及应用顺应网络迅猛发展的潮流，实行的网上在线的电子优惠打折券，网友只需要从网上下载打印电子优惠券，在消费时向商家出示即可享受商家的优惠打折承诺。电子优惠券既省去了商家的印刷和发送传统印刷优惠券的成本，又方便了消费者的使用。本文从网站的需求分析，简要设计，详细布局，网站的实现等方面入手，经过仔细分析，采用Div+Css网页开发技术，设计并实现了一个信息较为完善的E时代电子优惠券网站。经过了细致的分析，基本满足用户的需求。Dreamweaver静态网页的制作可以使页面更美观和更实用清楚。并且运用了photoshop，flash等工具软件对网站进行了美化和加工。E时代电子优惠券网站主要实现了，优惠券的分类，商家信息，消费者社区与会员注册功能。会员注册可以让消费者积分等优惠政策更加的省钱。在优惠券分类专区可以快捷的到达想要浏览的网页，更加直观。在消费者社区可以发布消息和回复帖子和更多的网友进行互动，分享消费心得。商家信息的介绍，让消费者了解优惠券的商家，更加直观和做到了良好的宣传。关键词：电子商务，电子优惠券，Div+CSS，DreamweaverE Age of Electronic Coupon Website design and productionAbstractWith the increasing penetration of information technology into all aspects of the socio-economic and life, no one can deny that Internet has brought great changes and revolutionary impact. In the 21st century, mode of human life and mode of business will change into mode of network, that is life and business relying on network. Internet is the world's largest computer network, it is all over the world, of all sizes around the world as a whole network connection.As a means of information retrieval on Internet, advanced, easy to be accepted by the people, the World Wide Web (abbreviated WWW) has developed very quickly become the world's largest treasure trove of information resources. An e-commerce technology that can really raise performance of Internet is coming to us now. E-commerce development is very rapid, E-trade also increases.E-coupons, with the rapid development of Internet technology and wider application conform to the trend of rapid development of network and implement an electronic discount online discount coupons, users only need to print from the Internet to download e-coupons, the consumer can produce, to the business commitment to enjoy preferential discounts. E-Coupon avoid the cost of both print and eliminating for merchants, but also convenient for consumers to use. Finally, in the consumer community modules consumers can interact and share consumer experiences.This article with the website of the needs analysis, outline design, detailed design, system implementation and other aspects, using Div + Css web development technology, design and implementation of a more comprehensive information on e-coupon Web site E of the times. After a detailed analysis, basically meet the needs of users. E times coupon site mainly achieved, the registration and login function of the consumer to complete a log of consumption in the navigation module.Key words: E-commerce; Electronic Coupon; Div + Css; Dreamweaver; 目 录任务书I摘 要IIABSTRACTIII第1章绪 论11.1课题背景11.2国内外现状21.3预期实现的功能与目标3第2章关键技术介绍42.1 CSS+DIV概述42.2 PHOTOSHOP概述52.3 DREAMWEAVER概述52.4 FLASH介绍6第3章网站分析与设计83.1网站页面设计与分析83.1.1网站页面设计结构图83.2系统开发环境93.3技术可行性分析93.4页面布局设计与分析93.4.1网站目录图93.4.2一级页面布局设计分析103.4.3二级页面布局设计分析123.4.4三级页面布局设计分析123.5 网站各级页面设计133.5.1首页设计133.5.2二级页面设计143.5.3三级页面设计15第4章 网站实现164.1 首页布局和滚动图片的实现164.2 导航条实现184.3 会员注册模块的实现194.4 优惠券详细画面实现204.5 图像实现204.5.1素材图片制作204.5.2 LOGO设计224.5.3 Flash的制作234.5.4 CSS外部的实现24第5章 网站测试265.1网站测试目的265.2测试中遇到的问题与解决办法265.3测试结果27第6章结论28参考文献29致 谢30第1章绪 论1.1 课题背景伴随着网络的兴起及网络技术的发展，电子商务随之兴起而得到发展。电子商务，是指实现整个贸易活动的电子化。从涵盖范围方面可以定义为：交易各方以电子交易方式而不是通过当面交换或直接面谈方式进行的任何形式的商业交易；从技术方面可以定义为：电子商务是一种多技术的集合体，包括交换数据、获得数据以及自动捕获数据等。电子商务从狭义的角度讲，是以互联网为主题，以信息流、物流和资金流为支撑的先进的商务模式；广义的角度讲是基于电子信息网络的生产、流通和消费的全新的社会经济活动。电子商务的涵盖范围在不断扩展，电子信息网络不仅仅是互联网，还包括电信网、电视网和其他的电子信息网络，这个网络是广泛的。国家现在强调重视电子商务，发展电子商务。发展电子商务目的就是将交易电子化从而降低交易成本，提高效率，获得更大的利益。时下，电子优惠券已经成为都市消费者购物新潮流，它做为一种新型的营销载体，为商家提供细分消费者服务，以最低的资源成本找到最有价值的目标消费者，用最低的营销成本来为消费者提供精准产品与服务，而不是为大众的消费者提供产品与服务。同时优惠券的电子化也为消费者带来了方便实用的利益，更加有目的、更加主动地搜索优惠信息，满足不断变化的个性化需求。电子优惠券伴随着网络发展和普及，才逐渐进入人们的生活，当这种消费理念、消费方式能让更多的人接受时，它的发展将势不可挡。随着3G浪潮的汹涌袭来，应运而生的电子优惠券已经成为时下都市消费新潮流，作为国内优秀的一级电信内容提供商，新一代手机电子优惠券，凭借其更为方便、快捷的使用方式，享受消费优惠的特权，给我国消费者带来了一种全新的消费模式和理财观念。其同时兼具无线传输和为商家特设的数据统计、分析等功能以及先赢利，后付费的先进营销手法广受商家好评。更难能可贵的是其低投入、高回报的投资收益令运营商竞相追捧。曾几何时，为了买一台可以打折的空调，还要等商家举行“空调节”这样的活；或者为了获取一张建材家居商场的优惠卡，还非要苦苦等待消费累计多少才能得到。现在，这种现象将逐渐淡出消费者的视线，商家已逐渐意识到围绕消费者需求进行更人性化，更灵活的促销的重要性，也开始借助很多创新的手段来吸引消费者。近日，家电销售和家居建材领域的两大巨头永乐生活电器、东方家园先后与提供电子优惠券解决方案的酷鹏网展开合作。前者是提供注册会员专享的95折优惠，后者则是推出“东方家园会员卡”，即消费者在酷鹏网注册会员后，凭券可以换取相应的折扣卡，可在其的连锁店消费时享受折扣优惠。据酷鹏网的监测数据显示，目前在北京、上海、广州等国内互联网应用较为发达的城市，使用电子优惠券享受这种主、便捷且真正带来实惠的消费者人数，正在以几何级的速度迅速增多。而这种时尚的消费新潮流的背后则是商家与酷鹏网这样专注于电子优惠券服务的公司在积极进行合作，扩大电子优惠券使用范围和应用领域。同样是来自酷鹏网提供的数据，目前该网站合作的商家已经突破了2万家，几乎覆盖所有消费领域，其最热门的就是餐饮娱乐和百货购物，而该网站每月目前更新超过1万张电子优惠券，而且这些优惠券的信息真实性、可靠性都得到酷鹏网的验证。因此，有不少对互联网敏感的人士惊呼，电子优惠券的时代已然来临，永乐生活电器和东方家园这两个率先吃“电子优惠券”这只螃蟹的商家只是两个缩影罢了。1.2 国内外现状优惠券作为一种销售促进的手段，从现代市场营销理论和实践的诞生初期，就已经为商家所熟知并运用，电子优惠券不过是其在数字新媒体技术条件下的发展。现代商业和营销最为发达的美国，无论在传统优惠券的实践、推广、理论研究还是电子优惠券的探索方面，都有很多值得我们借鉴的地方。大型企业主导的B2B成为其全球竞争力的重要组成。美国B2B电子商务发展的特点是：以大型企业为主导，以集成供应链管理为起点，以降低成本为主要目标。其主要表现形式为：大型企业首先利用ICT信息平台，在整合企业内部流程和信息资源基础上，进一步向上游的供应商和下游的客户扩展，打通与上下游的信息流、资金流和物流，从而改善沟通效率和服务质量，大幅度降低交易成本、库存成本、生产成本和采购成本，通过全球化资源配置提高竞争优势，这构成了美国B2B电子商务发展的主流模式。国内中小企业电子商务应用呈现“多渠道、立体化、主动性加强”特征 中小企业电子商务应用在开拓市场、扩大销售、降低成本等方面取得了明显成效：约50%的企业从更大的地域范围进行采购和销售，49%的企业增加了客户，41%企业降低了营销成本， 44%的企业提升了网上零售与购物迅猛发展就网上零售市场的增速而言，2008年典型网上零售市场美国和韩国的数字分别是4.16%（从2001年到2007年，美国网上零售环比增速均在20%左右，2008年因经济危机原因下滑到4.16%）和15.65%，中国增长率为137.18%，2009年中国网络购物市场交易规模达 2483.5亿元同比增长93.7%，增速远超韩美。1.3预期实现的功能与目标在网站中，素材全由Phtotshop制作，加工。网站利用外部Css描述页面显示样式，页面布局采用Div方法，使得网站风格统一，布局合理、清晰。在网站页面中含有大量电子优惠券下载和各种功能，让消费享受更多优惠的特权，给我国消费者带来了一种全新的消费模式和理财观念。本网站将实现5部分内容：首页优惠券导航：优惠券的分类，各种不同类型的优惠券，把种类分开，让消费者一目了然，知道各种优惠信息和各种打折信息，让消费者得到优惠的实惠，得到利益。目的是更加快捷，更加方便。会员注册：让消费者可以注册，成为vip，成为注册会员，每个人都有自己的资料和可以根据自己的爱好得到消费券的推荐。通过在线的时间长短和下载量的多少得到升级，升级之后可以得到一些优惠政策，比如享受打折优惠，和一些免费试用的东西。有自己的会员信息，还可以申请E时代网站的会员卡，这样可以更加的便宜，还可以攒积分。商家信息：提供一些商家优惠券的信息，让消费者得到真正的好处，从而吸引更多的人关注自己的网站，让得到试用的人写下自己的心得体会，从而增加消费者的兴趣和购物的信心。消费者社区：让消费者可以进行交流的地方，通过消费者之间的互动，让大家得到交流与更多的信息资源，有了更好的互动环节，对网站的可持续性也得到了更打的提高。优惠券分类：现在肯德基，麦当劳各种洋快餐盛行，各种服饰，各种化妆品各种行业细分的很清楚，把优惠券归类，让消费者可以更快更清楚的找到优惠政策，和各行各业的优惠信息，这样对网站的发展也是有好处的，消费者更愿意上可以更快更方便找到信息的网站。 第2章关键技术介绍2.1 CSS+Div概述CSS是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。DIV 在编程中又叫做整除，即只得商的整数。DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。DIV+CSS是网站标准中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。DIV+CSS的优势（1）符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 （2）支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。（3）搜索引擎更加友好。相对与传统的table：采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 （4）样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO，MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。（5）CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。（6）表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。2.2 Photoshop概述Photoshop是Adobe公司旗下最为出名的图像处理软件之一 Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜象、透视等。也可进行复制、去除斑点、修补、修饰图象的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。图象合成则是将几幅图象通过图层操作、工具应用合成完整的、传达明确意义的图象，这是美术设计的必经之路。photoshop提供的绘图工具让外来图象与创意很好地融合，成为可能使图象的合成无衣无缝。校色调色是photoshop中深具威力的功能之一，可方便快捷地对图象的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图象在不同领域如网页设计、印刷、多媒体等方面应用。特效制作在photoshop中主要由滤镜、通道及工具综合应用完成。包括图象的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于photoshop的研究的原因。2.3 Dreamweaver介绍什么是Dreamweaver？工欲善其事，必先利其器。Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具，它与Flash、Fireworks合在一起被称为网页制作三剑客，这三个软件相辅相承，是制作网页的最佳选择。其中，Dreamweaver主要用来制作网页文件，制作出来的网页兼容性比较好，制作效率也很高。支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。Dreamweaver有如下特性： （1）动态跨浏览器验证：自动检测标签和CSS规则来适应所有主流浏览器。 （2）更强大的CSS支持。（3）内建的图形编辑引擎：修剪，改变大小，尺寸，旋转角度，调节明暗度都不离开Dreamweaver环境，因为它本身集成了FW的基本图形编辑技术。（4）安全FTP：完全加密传输保证文件和帐号信息的安全。（5）增强对当今技术的支持：支持当今主流的开放环境：ColdFusion，J2EE，PHP，.NET，和其他主流的服务器技术。Dreamweaver现在加入了XML命名空间支持，ASP.NET表单控件对象，新的参考书内容和新的PHP服务器端行为。（6）无缝整合外部文件和代码：直接将Word和Excel文档复制和粘贴到Dreamweaver中，会保留字体，颜色，CSS样式表信息。使用系统支持的编码保存任何字体，包括双字节字符集。（7）紧密整合MM的其他工具：加强了和MM其他几款产品的协同工作能力，例如：你可以通过DW直接设置Flash组件的参数。Flash用来制作精美的网页动画，而Fireworks用来处理网页中的图形。Dreamweaver是现在非常流行的一种做网页的软件，它集合了很多技术，使我们网页做起来更加得心应手，更加快捷方便，在静态网页中是一个很好的软件，它的使用可以让我们做的更快更方便，而页面的效果也会更好看。2.4 Flash介绍什么是Flash? Flash是美国Macromedia公司出品的矢量图形编辑和动画创作的软件，是当今Internet上最流行动画作品(如网上各种动感网页、LOGO、广告、MTV、游戏和高质量的课件等)的制作工具，并成为实事上的交互式矢量动画标准，就连软件巨头微软也不得不在其新版的Internet Explorer内嵌Flash播放器。由于在Flash中采用了矢量作图技术，各元素均为矢量，因此只用少量的数据就可以描述一个复杂的对象，从而大大减少动画文件的大小。而且矢量图像还有一个优点，就可以真正做到无极放大和缩小，你可以将一幅图像任意地缩放，而不会有任何失真。它是全球流行的电脑动画设计软件，它代表软件制作的流行于网络的动画作品。Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2，到现在最新的flash4。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了Shockwave Flash 和Director。可以说Flash已经渐渐成为交互式知量的标准，未来网页的一大主流。Flash被称为是“最为灵活的前台”，由于其独特的时间片段分割（TimeLine）和重组（MC嵌套）技术，结合ActionScitp的对象和流程控制，使得在灵活的界面设计和动画设计成为可能，同时它也是最为小巧的前台。Flash具有跨平台的特性，所以无论你处于处于何种平台，只要你安装了支持的Flash Player，就可以保证它们的最终显示效果的一致，而不必像在以前的网页设计中那样为IE或NetSpace各设计一个版本。同Java一样，它有很强的可移植性。最新的Flash还具有的手机支持功能，可以让用户为自已的手机设计喜爱的功能。当然首先必需要有支持Flash的手机，同时它还可以应用于Pocket PC。Flash 特别适用于创建通过 Internet 提供的内容，因为它的文件非常小。Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。要在 Flash 中构建应用程序，可以使用 Flash 绘图工具创建图形，并将其它媒体元素导入 Flash 文档。接下来，定义如何以及何时使用各个元素来创建设想中的应用程序。时间轴用来通知 Flash 显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。库面板是 Flash 显示 Flash 文档中的媒体元素列表的位置。ActionScript 代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用 ActionScript 向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash 包括两个版本的 ActionScript，可满足创作者的不同具体需要。Flash 包含了许多种功能，如预置的拖放用户界面组件，可以轻松地将 ActionScript 添加到文档的内置行为，以及可以添加到媒体对象的特殊效果。这些功能使 Flash 不仅功能强大，而且易于使用。完成 Flash 文档的创作后，可以使用“文件”>“发布”命令发布它。这会创建文件的一个压缩版本，其扩展名为 .swf (SWF)。然后，就可以使用 Flash Player 在 Web 浏览器中播放 SWF 文件，或者将其作为独立的应用程序进行播放。第3章网站分析与设计3.1 网站页面设计与分析3.1.1网站页面设计结构图图3.1 网页设计结构图（1）优惠券分类版块优惠券导航板块介绍了新的优惠信息，优惠券的分类，各种不同类型的优惠券，把种类分开，让消费者一目了然，知道各种优惠信息和各种打折信息，让消费者得到优惠的实惠，得到利益。方便消费者找到他们感兴趣的电子优惠券。（2）商家信息板块商家信息板块提供了商家免费使用的优惠券，让消费者得到真正的实惠，从而吸引更多的人注意网站。商家公布一些自己店铺的优惠券信息，在让更多的下载优惠券的同时，其实也是一种宣传手法，利用网络优惠券网站这个平台，可以让更多的人知道的商铺，同时打印下载优惠券，这样既有宣传，又有经济效益的提高，是一举两得，一箭双雕的好事情。同时有商家排行信息。（3）消费者社区板块消费者社区是让消费者可以进行交流的地方，通过消费者者之间的交流互动，消费者之间可以得到更多的信息资源，网站也可以了解消费者的需求，以便更好完善网站的建设，吸引更多的消费者来本网站。（4）会员注册板块消费在在这一模块可以完成会员的注册，成为注册会员。注册时要填写用户名，密码，手机号码，E-mail，等信息。网站可以根据会员的信息，收集数据，数据挖掘，根据消费者的爱好进行消费券的推荐。而且通过在线时间长短和下载量的多少对会员级别进行升级。升级后可以等到更多的优惠和更多的免费体验机会。同时，还可以帮网站绑住一大批消费者，为网站带来更大的利益。会员制还可以积分，让消费者得到更大的实惠，在消费的基础上得到快乐和实惠。3.2 网站的特点 网站的文化，为消费者提供最省钱的信息和各种优惠券的下载。通过网站的功能可以实现优惠券的下载，和其它消费者进行交流。3.3 技术可行性分析Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。采用DIV+CSS进行设计，DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。Flash是一种多媒体制作的软件，可以制作动态图片，小动画，让网站整体看来更加动态，更加美观和大方，使人们浏览的同时得到视觉享受，使网站更加美观。Photoshop更是现时非常流行的图片处理软件，现代人十分热衷于修改自己的照片，让图片看起来更美观和更有特殊的效果。它可以更改图片的各种效果，制作图片，修改图片。3.4 页面布局设计与分析3.4.1网站目录图建立站点，打开Dreamweaver菜单栏，新建站点，给站点起名并打上域名，单击“下一步”，选择“否，我不想使用服务器技术”点击“下一步”，选择本地文件夹，不连接到远程，“下一步”，单击完成。服务器各个目录如下图3.2所示。图3.2 网站站点和目录图Images目录：images文件内存放网站所需的图像文件。Css目录：Css文件存放网站所需的Css样式文件。Html目录：Html文件存放一级页面，二级页面和三级页面。Index.html： 首页。3.4.2一级页面布局设计分析首页是一个网站的大门。进入网站，首先看到的就是网站的首页。所以首页必须做的经典。首页的功效也要鲜明，各个功能的分类和各个模块都要清楚。LOGO的设计也是很重要的，好的LOGO可以让更多的浏览者印象深刻，从而对网站的推广起到的良好的作用，网站得到了推广，就会有更多的人来浏览网站，知名度就得到了提高，有了良好的口碑。首页让浏览者第一眼就能记住。本网站的首页的布局如图3.3所示。图3.3 首页布局图Banner：Banner是一种网络广告形式。本网站在Banner位置采用Flash设计。画面更新颖，更具动感。这样目的是为了给浏览者深刻印象，让浏览的人能容易的记住本网站。导航条：分为首页，关于我们，优惠券分类，商家信息，消费者社区，会员注册。这些都是为了游客了解网站中页面的设置以及分类，方便消费者寻找所需的页面。LOGO设计：LOGO的设计是网站品牌的体现，由于它的出现，可以让消费者记住网站的名称及网站的信息，方便得到推广和宣传。优惠信息：提供最新下载信息和下载排行量的体现让消费者知道现在流行资讯，方便下载，并提供品牌优惠券的下载，更加方便。关于我们：以文字的形式向浏览者介绍我们服务的产品，我们的目标，我们的实力，我们宗旨。商家图片展示：把商家的图片以滚动的形式放在这个栏目，可以更清晰更直观的看到各种商家店铺信息，方便对比优惠券上面的信息。友情链接：把和网站有关系的网站放在这个栏目，让消费者可以去别的网站浏览。 3.4.3 二级页面布局设计分析在本页面中，用优惠分类，论坛信息等形式推广网站，来向消费者推介电子优惠券。让消费者更清晰明了。消费者社区页面布局如下图3.4所示。图3.4消费者社区二级页面布局图3.4.4 三级页面布局设计分析优惠券分类详细信息，消费者社区详细页面是对本网站具体功能的完善和详细介绍。三级页面是优惠券的详细分析和具体实施的页面。在消费者论坛里可以有具体发帖子的使用，让消费者可以畅所欲言。让消费者具体实施操作，得到更多的优惠政策和更多的实惠。消费者社区详细内容布局如图3.5所示。图3.5 消费者社区三级页面详细布局图3.5 网站各级页面设计3.5.1首页设计首页作为网站的“脸面”，是整个网站建设的“龙头工程”,其直接关系到网站的形象，要想从当今社会铺天盖地的网络信息中脱颖而出，首先得有一个特别的首页，来体现整个网站的风格和形象。如何在信息传播形态上办出特色，提供网络多种服务功能，在网络空间扩展自己的影响力, 直接关系到它是否能吸引更多网民进入站内浏览.对于网络媒体而言，人们对于网络信息的接收首先是通过其首页的“形”来把握的，可以说,网络首页首先是一种“形”的表达，信息可能以任何方式传播，其真正的价值在于内容，但若其形式不能引起人们的关注，其内容的价值也无法得到真正的体现。具体设计如图3.6所示首页图设计。图3.6 首页设计图3.5.2二级页面设计二级页面把信息归类，为消费者提供了各个方面的信息，可以更快的找到需要的信息和优惠券。具体设计如图3.7所示 二级页面设计图。图3.7 二级页面设计图3.5.3三级页面设计三级页面是优惠券，商家，论坛的详细信息，消费者进入后可以下载优惠券，清晰的看到各类详细信息，如图3.8所示。图3.8三级页面设计图第4章网站实现4.1 首页布局和滚动图片的实现在我们刚学习网页制作时，总是习惯先考虑外观，考虑图片、字体、颜色以及布局等所有表现在页面上的内容。但是外观并不是最重要的，相反最终用户在访问网页时的体验应该是优先要考虑的。一个由DIV+CSS布局且结构良好的页面可以通过调整CSS的定义，在任何地方、任何网络设备上以任何外观表现出来，而且利用DIV+CSS布局方式构建的网页能够简化网页代码、加快网页显示速度，因此DIV+CSS已经成为目前流行的网页布局方式，也是网页设计和制作人员必需掌握的技能之一。本论文选用DIV+CSS方式对页面布局。Background-color属性是定义背景颜色。Font属性是定义字体。Padding属性是定义内边距。Margin属性是定义外边距。Color属性是定义颜色。Text-align属性对齐元素中的文本。Line-height属性设置行间的距离。（1）首页实现如下如图4.1所示。图4.1网站首页（2）首页滚动图片的实现，利用滚动的图片让浏览网页的消费者可以更直观清楚的看到商家的信息和店铺的样子，更可以随自己的心意去选择自己喜欢店铺的优惠券去下载，更方便，更有利于消费者的选择。如图4.2所示。图4.2商家滚动图片滚动代码如下：<marquee behavior="scroll" direction="left" onmouseover="this.stop()"height="150" scrollamount="3" scrolldelay="4"onmouseout="this.start()" ><img src="images/ps42.jpg" width="250" height="200" border="1" /><img src="images/kendeji2.jpg" width="250" height="200"border="1" /><img src="images/maidanglao.jpg" width="250" height="200" border="1" /><img src="images/haoxianglai.jpg" width="250" height="200" border="1" /><img src="images/bishengke.jpg" width="250" height="200" border="1" /> </marquee>4.2 导航条实现导航条是指通过一定的技术手段，为网站的浏览者提供一定的途径，使其可以方便地访问到所需的内容，是人们浏览网站时可以快速从一个页面转到另一个页面的快速通道。利用导航条，游客就可以快速找到想要浏览的页面，同时消费者在浏览网站过程中方便