搜索
《网页设计与制作》课程设计报告书设计题目：JQDM西餐厅网站设计与实现班级：信管13姓名：黄淑君肖颖青白玉娣麦靖学号：15470135指导老师：邓文剑起始时间：2014.12.29-2015.1.4目录一、内容介绍......................................................1二、规划设计......................................................21、功能定位...................................................22、站点内容...................................................23、导航结构...................................................34、目录结构...................................................35、站点风格...................................................46、技术解决方案...............................................4三、功能模块图....................................................5四、文件列表与功能说明............................................6五、页面介绍.....................................................71、主页......................................................72、公司介绍..................................................73、美食菜单..................................................84、成功案例..................................................85、新闻咨询..................................................96、联系我们..................................................9六、站点特色.....................................................101、网站特色..................................................102、所用关键技术..............................................10七、总结与体会...................................................12八、参考资料.....................................................131一、内容介绍通过DreamweaverCS5网页制作这款软件，设计一个美观、符合要求的网站，页面包括一般网站的功能。我们这次网站设计应用了flash和PS技术，还从中运用了一些代码。本网站是关于食品相关的系列产品为基准进行创建的，我们为它命名为“JQMD西餐厅”，这样大家就会清楚它是什么网站，并且方便记忆。我们都知道民以食为天，创建这个网站可以提供大家更多关于西餐的信息，能够给大家提供更好的服务。在本次的网站制作过程中，我们运用了本学期学习的《DreamweaverCS5网页制作》中的各项知识点，从一开始的设立主题、收集素材、建站点、网页文件的基本操作到层与表格的运用。超链接与框架网页的运用还有表单应用，特别是老师强调的运用CSS样式制作。我们多处以动态的形式来把网站体现出来，是为了更好的视觉效果。我们这次的设计主题是开发建设一个JQMD西餐厅公司介绍公司的简介、公司的历史、公司的活动，食品的类别、成功案例、新闻咨询等特色全面性的餐厅网站。同时作为一个电子商务网站，其最重要的功能当然还是产品交易，在本网站中有诸多JQMD西餐厅分店，比如在北京、天津、上海，重庆、深圳、广州等各地，本餐厅的食品种类繁多，比如甜点类，面食类，牛扒类与咖啡类。2二、规划与设计1、功能定位地区性：让网站成为中国西餐美食的首要浏览网站门户。权威性：通过与各餐厅公司的合作，定格网站的行业权威性。为了推广我国博大精深的饮食文化，开拓西式快餐的美好前景，建立属于我们自己的西餐品牌形象，在现在正红红火火的洋快餐市场争取更多的客户群，我们看到电子商务在中国的发展前景，决定建立网上营销业务。我们认为开展网上业务能够提升企业的客户服务能力，能服务于企业发展战略，能为企业增加效益。满足顾客的不同需求，挖掘子市场的销售潜力，扩大市场占有率，以提高企业竞争力、树立企业形象，增强用户的信赖，有利于新产品打开市场，降低企业经营风险。为了更好的开展网络营销计划，达到以上目的，开发一套性能优良，功能强大的电子商务系统自然必不可少。2、站点内容JQDM西餐厅的网站丰富多彩，它讲到西餐的简介，本公司的介绍、历史、活动，美食菜单的甜点类有草莓芝士蛋糕、提拉米苏、巧克力松粒露、抹茶慕斯、红丝绒蛋糕；牛扒类有菲力牛排、西冷牛排、肉眼牛排、T骨牛排；面食类有番茄牛肉酱面、黑椒牛肉炒意粉、肉酱面、海鲜芝士焗粉；咖啡类有巴黎，拿铁咖啡、白咖啡、卡布奇诺、摩卡等等。成功案例中有各地建立的JQDM分店，还有具有知名度的明星也曾到本公司就餐。新闻咨询一块有吸引食客的热点聚焦、餐饮业态、餐饮杂志。最后就是本公司的联系方式、网站留言与客服中心。网站中还附有优美动听的背景音乐—梦中的婚礼，更多的信息了解请关注本公司网站动态。33、导航结构4、目录结构结构第一层栏目第二层栏目功能说明一、公司简介公司介绍信息了解更全面，节日活动精彩优惠打折，服务至上。公司历史公司活动二、美食菜单甜点类使浏览者可以根据菜单提供条件迅速找到自己喜爱的美食。牛扒类咖啡类面食类三、成功案例为各地提供便捷的JQDN西餐厅的美食，更好提高本餐厅的知名度。四、新闻咨询热点聚焦新闻在线，更新热点，为顾客提供更多信息化的服务，餐饮业态餐饮杂志五、联系我网上留言使食客们遇到问题时能迅速联系我们并得到解决。导航首页公司简介成功案例新闻咨询联系我美食菜单45、站点风格JQDM西餐厅以优雅、高档的装饰呈现在食客面前，网站以棕黄色调的背景衬托和谐、高雅的视觉。更重要的是用户可以在网站发布自制的美食路线，由我们向食客们提供信息并反馈。这样双向的信息交流互动，可以开拓更大的市场。本名企每周推荐一个餐厅菜色以优惠形式献给更多的回头客。6、技术解决方案本网站应用了必要的运行程序，每个页面都具有与主题相关信息，也是加入链接，使阅览者更方便浏览，在网站设计时，是以网站最终目的为出发点，应该考虑周全，采用什么样形式，什么样的风格，什么样的色调外观，提供什么样的内容。每个网站都具有热点新闻、图片欣赏、信息了解等功能的展现。我们首页采用表格和Spry折叠式进行布局，导航条则用Spry菜单栏布局，以横向形式布局，分别是首页、公司介绍、美食菜单、成功案例、新闻咨询、联系我。单击每个项目为二级页面分别为框架网页、表单网页、利用模版或者布局表格制作的网页，其中在二级网页也链接了下一个网页，各个页面根据布局的需求插入适当的文字图像和flash动画。整体页面布局整洁、页面内容充实、（色调以棕黄色为主）搭配视觉协调、导航清晰、链接无误。网页设计是伴随着网络的快速发展而快速兴起，由于人们使用网络的频繁而网页作为上网的主要依托就变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式，给每个上网者，让他们能够了解网站提供的信息。网页设计直接面对的是大量用户,随时都会反馈回来对网页的批评建议等，可以根据实际情况进行修改，这样做可以使使用者用起来更加便。让本网站更加受欢迎。5三、功能模块图四、文件列表与功能说明6为了让根文件夹里的网页和图片等各种内容清晰的呈现，所以在本网站的根文件夹里共创建了11个子文件夹，各个文件夹里都分别存放不同的内容，本网站的导航分为6个部分，第一部分是首页，第二个部分是公司简介，第三部分是美食菜单，第四部分是成功案例，第五部分是新闻咨询，第六部分是联系我们。其中：Company文件夹里存放的是公司简介的相关网页，例如，公司介绍，公司历史，公司活动，共3个页面。Contact文件夹里存放的是第六部分联系我们，这部分是使用框架来完成的，因此里面存放了一个框架集（上方固定），还有2个页面：联系方式和网上留言，一共5个页面。Menu文件夹里存放的是第三部分美食菜单，这部分同样使用框架来完成，里面存放了一个框架集（左侧固定，共3个页面）。另外把各种类型的食物分类，可分为：甜点类、牛扒类、咖啡类、面食类，这四个部分分别建立一个网页，每个网页都有相关的食物，接着可以点击食物图片即可跳转到下个页面，这个页面就是对食物进行介绍。因此本文件夹中共存放了24个网页，都是跟美食菜单这部分相关的。News文件夹了存放的是第五部分新闻咨询，这部分同样使用了框架来完成，里面存放了一个框架集（上方固定，左侧嵌套），另外还有热点聚焦、餐饮业态和餐饮杂志三个页面，共7个页面。Succeed文件夹里存放的是第四部分成功案例，里面存放的只有一个网页success。Flash文件夹里存放的是一些动画。Images文件夹里存放是图片。一般为JPEG，GIF格式。Css文件夹里存放的是css样式，例如页面中有一段文字需要对它进行字体大7小设计和颜色设计，就需要新建一个样式来完成这一系列的操作。SpryAssets文件夹里存放的是一些可以可折叠式的面板，或是能下拉的菜单栏的样式，打开网站后，在视觉上呈现出动态的效果。Scripts文件夹中存放的是写脚本文件，本文站中有添加模板，因此，这些脚本文件能确保打开网页后不出错。五、主要页面介绍1、主页主页版面主要由一个题目、logo和导航栏和一个Flash动画和两个spry菜单栏组成，其中，导航栏是显示我们这个网站所有大概拥有的信息，一个Flash动画显示了我们餐厅的各色美食，Flash动画旁分别是西餐简介和公司简介。下图是主页页面图2、公司介绍公司简介界面主要由表格、div标签和Flash动画，导航栏和一个logo组成，大致显示了公司的简介，公司的历史和公司的各类活动。下图是公司介绍页面83、美食菜单美食菜单这页面主要是由框架做的，当点击页面menu那部分里的五个按钮的时候，会在右边显示出相应的信息，点击图片又会进入相应的图片的详细信息，下面是美食菜单的主要页面图4、成功案例成功案例页面主要由吊牌是的按钮和餐厅LOGO和一个Flash动画组成，Flash动画里主要显示我们的分店，还有餐厅的环境、知名人士到本餐厅吃饭的情景。下面是成功案例的主要页面图95、新闻资讯新闻资讯页面主要由框架做的，此页面有三个按钮分别是热点聚焦、餐饮业态和餐饮杂志，当选择任意一按钮都会在可变区域显示出来。下面是新闻资讯的主要页面6、联系我们联系我们页面主要有框架做的，显示出联系本餐厅的方式，还有提供顾客留言的功能。下面是联系我们的主要页面图10六、站点特色，所用关键技术。1、站点特色“JQDM西餐厅”网站是我们结合利用Dreamweaver、Photoshop、Flash等软件技术制作的网站，网站整体运用欧美小清新风格作为背景，画面清新简洁，内容丰富且一目了然。整个网站的布局设计，主要是为了充分体现出JQDM西餐厅“西”的特色。利用表格、层、Flash、连接等网页技术设计页面。2、所用关键技术（1）表格和框架的使用在这次的网页设计中，我们大量使用了表格和框