基于HTML、CSS和JavaScript的Gourmet网站开发

题目：基于HTML、CSS和JavaScript的Gourmet网站开发基于HTML、CSS和JavaScript的Gourmet网站开发WebdevelopmentofGourmetbasedonHTML,CSSandJavaScript【摘要】通常，个人网站基于不同的功能和目的，会分为以下六种主要类型：简历；博客，用来分享设计灵感，并与他人交流；作品集，展示设计师的作品；个人品牌，用来提升知名度，并获得更多机会；线上商店；画廊，用来收集设计师的作品。总而言之，个人网站展示多种多样不同的风格和功能。有的是最简化、干净风格的一页网站，还有的运用明亮且有活力的颜色来布置。如今，建造一个网站，无需写代码，甚至UI都有多种主题可供选择。话说回来，如果想设计一个有独特个人风格的网站，仍需要掌握一些关于HTML、CSS、JavaScript的知识，这样会给你节省大量的时间。本篇设计报告主要介绍如何在掌握基本的HTML、CSS、JavaScript知识后，建立一个全方位介绍美食相关的个人网站。【关键词】个人网站HTMLCSSJavaScript美食相关【Abstract】Usually,apersonalwebsitecanbeclassifiedinto6maintypesduetothefeaturesandpurposes.1)Resume-forajobhunt2)Blog-tosharedesigninspiration,tocommunicatewithothers3)Portfolio-displaydesigner’swork4)Personalbrand-togetknown,getfamousandgetmoreopportunities5)Onlineshop-forcommercial6)Gallery-acollectionofdesigner’sworkorwritingstuffordemos.Infact,thepersonalwebsitepresentsavarietyofdifferentdesignstylesandfunctions.Someofthemareonewebsiteswithminimalandcleanstyle,andothersusebrightandvibrantcolors.Nowadays,peoplecancreateawebsiteeffortlessly.NocodingandeventheUIcanbeselectedformthevariousthemes.Butstill,ifyou’dliketodesignandcreateyourownspecialwebsite,youneedtolearnsomeknowledgeofHTML,CSSandJavaScript.Thiscansaveyoumuchtime.【Keywords】PersonalwebsiteHTMLCSSJavaScriptGroumet目录1引言1.1设计目的1.2设计依据及研究现状1.3设计预期的结果及意义2网站开发方法及关键技术简介2.1HTML技术2.2CSS技术2.3JavaScript技术3网站设计的需求分析3.1关于网站的目标和策略的需求分析3.2关于网站互动页面的需求分析3.3关于网站整体风格及页面设计的需求分析4网站的总体设计4.1网站首页的设计说明4.2网站首页的关键代码展示4.3网站的具体布局及内容介绍5设计成果6谢辞7参考文献1引言1.1设计目的随着如今互联网技术的发展和应用，大量的信息充斥在网络世界里。这样的好处在于，人们可以通过搜索引擎，定向的找到所需要的信息；坏处是，有时搜索的效率底下，不仅需要锻炼一双辨别真假信息的眼睛，而且还需要有快速筛选信息的能力。当然，人们也需要被动的接受信息。作为一个美食爱好者，在学习、工作之余，想要放松下来看点美食相关的咨询，也不是一件轻松的事情。大量的网络平台，如微博、instegram、Netflix、Youtube、论坛等，我需要在大量信息的冲击下，寻找可能连百分之十都不到的吸引我的美食信息。为了把与吃喝相关、但又不止于此的信息集合起来，便于与我一样的美食爱好者有一个——可以投入百分之百时间、获取百分之百有用资讯的平台，而建立了Gourmet网站。1.2设计依据及研究现状如今国内的网络平台发展迅速，专注于美食的网站也层出不穷。根据网站的功能和面向受众，可以分为以下三类：餐厅评分网站，如大众点评；外卖网站，如饿了么；食谱分享网站，如下厨房、美食杰、美食天下。其中，评分和外卖网站在一定程度上有功能和内容的重叠，食谱分享网站会加入一些科普和广告内容来丰富网站。这类网站属于美食相关的功能性网站，通常是为了满足需求而不是兴趣时，会去拜访的网站。但现在人们对于专注于自己兴趣领域、获取信息的需求早已远不止于此。对于美食相关的内容而言，仅仅是吃什么、去哪里吃、怎么自己动手做，不能满足一个美食爱好者的享受需求，如果能把这些和旅途中的美食、有魅力的厨师、电影节目书籍中的美食、制作多元美食的Youtuber、甚至于进阶教育及职业发展的信息等结合起来，用一个综合性美食网站呈现出来，效果一定很棒。国内现在很难找到这样的综合性平台。有名的食评家、独立的美食volgger、有趣的美食影音作品等，这些都是分散的信息。即便是有趣的内容，美食爱好者也很难获取关注的渠道，这些小众的内容就像宝藏一样难以寻觅。然而，国外有很多美食网站，把专业食谱、美食制作视频、餐厅和厨师介绍、线上商店、旅行信息、交流论坛等结合在一起的网站，典型的有的。再如，ChrissyTeigen的个人网站——，将食谱分享、美食视频、旅行游记、餐厅介绍、家庭影片、问答等部分一一呈现在网站上，让喜欢Chrissy同时又喜欢美食的朋友，能快速高效率的获取资讯。1.3设计预期的结果及意义我的个人网站Gourmet，主旨是让和我一样美食爱好者能在这里找到，关于美食并不止于美食的资讯。其中内容包括，城市和餐厅，厨师和他们的故事，电影、节目和书籍，视频内容有趣又独特的Youtuber，世界各地的厨师学校，专业厨房的工作经历等等。这些资讯无论是对普通的美食爱好者，还是深度热爱美食的人，都十分有用。网站的目的在于，把这些对于美食爱好者有用的资讯整合在一起，无需再四处寻觅，节省搜索的时间。由于能力和时间的限制，目前呈现的网站还略显单薄，日后还会加入会员注册、留言板、赞、收藏、投稿等功能，让Gourmet更加完善。2开发方法及关键技术简介本网站的开发使用VisualStudioCode作为文本编辑器。这是一款功能强大，且适合于网页开发初学者的编程软件。本网站的开发过程使用GoogleChrome浏览器进行测试。根据NetMarketShare公布的数据，2019年11月，在电脑上的浏览器分类下，Chrome占有67.30%的全球市场份额，排名第一，第二名Firefox占有9.08%的全球市场份额。2.1HTML技术HTML(HyperTextMarkupLanguage)是一门告知浏览器如何组织页面的标记语言。优点在于，相较于其他语言更容易学习和使用；可以被浏览器很好的执行，每个浏览器都支持HTML；HTML解析器是容错的，如果一个元素解析失败，不会影响整体文件；轻体量，与其他形式的通信相比，信噪比高；有大量可扩展的元素；被广泛使用；支持多语言。但HTML语言也有它的局限所在，选择网页内容的样式、创建列表表格表单会花费大量时间；只能创建静态的普通网页，对于有动态网页需求的人来说没有用；不能在所有的浏览器中正确呈现内容；不够灵活。2.2CSS技术CSS（CascadingStyleSheets，层叠样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。可用于创建布局——比如将内容分为多列，把一个单列的文本变成包含主要内容区域和存放相关信息的侧边栏区域的布局；或者添加动画及其他的装饰效果。2.3JavaScript技术JavaScript是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现的不再是简单的静态信息，而是实时的内容更新，交互式的地图，控制多媒体，2D/3D动画，滚动播放的视频等等。3网站设计的需求分析2019年关于网站的统计数据显示，如果网站的内容或者布局不够有吸引力，38%的访客会离开；48%的人会把网站的设计企业信誉度第一考量因素；加快网站的加载速度，可以防止防止损失7%的潜在转化率；将网站的加载速度从8秒加快到2秒，访客的用户转化率将提高74%；目前，只有55%的公司进行线上用户体验测试；移动设备占在线时间的2/3；95%的受访者表示，好的用户体验才有意义；13%的成年人只通过移动设备访问互联网，11%只通过台式机访问互联网；86%的访客会希望在网站的首页上看到有关公司的产品或服务的资讯；47%的网站访客会先查看公司的产品或服务页面，再查看网站的其他部分；64%的访客希望在公司网站的首页上看到关于联系方式的信息；52%的访客希望在公司网站的首页上看到“关于我们”。了解了这些重要的数据，下面将从几个方面进行关于Gourmet网站的需求分析。3.1关于网站的目标和策略的需求分析明确网站的目标和策略，是开始进行网站开发前简单却十分重要的一步。Gourmet网站的目的在于为美食爱好者提供一个获取多方面美食资讯的平台，让他们能在这里找到，关于美食并不止于美食的资讯。把这些对于美食爱好者有用的资讯整合在一起，让他们无需再四处寻觅，节省搜索的时间。3.2关于网站互动页面的需求分析互动网站设计是网站建设的一个亮点。交互式网站设计有助于了解潜在用户的搜索行为和特征。它还可以刺激潜在用户的需求。通过产品信息页面的设计，可以建立良好的产品和用户关系，以改善用户体验。由于能力和时间的限制，目前呈现的网站没有加入与用户互动的部分，日后会加入会员注册、留言板、赞、收藏、投稿等功能，让Gourmet更加完善。3.3关于网站整体风格及页面设计的需求分析网站的风格与设计也是十分重要的部分，但是人们通常对此过于重视，而忽视了其他重要领域。事实上，网站的设计十分简单，因为人们会本能被有视觉冲击力的的事物吸引眼球。因此，要选择一种会使人们希望访问并在这里停留尽可能长时间的网站设计。除此之外，需要确保网站的设计与通过网站传达的信息保持一致。Gourmet作为一个美食相关的网站，当然充满了简洁明快的食物图片，来吸引访客进一步探索网站。每一部分的介绍与拓展，都有图片、文字介绍和必要的站外链接相结合。4网站的总体设计4.1网站首页的设计说明网站的首页以一个抓人眼球的甜甜圈图片引入，用简单的语句欢迎访客，并介绍了网站的主要内容——“Wehaveeverythingyouwanttoknowabouteating!”。第二部分是目录（CATALOG），同时在首页的顶部导航栏点击“CATALOG”，也可以快速下滑至这个部分。目录分为六个部分，均以图片而非文字作为引入，给访客一种直观的体验。最后一部分是关于我们、联系方式等。网站的目录进入之后如下图所示，由标题、图片、文字、链接组成，访客阅读之后如果选择继续浏览，将点击链接进入下一部分。4.2网站首页的关键代码展示导航栏的代码如下。<!--Navigation--><navid="mainNav"class="navbarnavbar-defaultnavbar-fixed-topnavbar-custom"><divclass="container"><!--Brandandtogglegetgroupedforbettermobiledisplay--><divclass="navbar-headerscroll"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"><spanclass="sr-only">Togglenavigation</span>Menu<iclass="fafa-bars"></i></button><aclass="navbar-brand"href="#top">Groumet</a></div><!--Collectthenavlinks,forms,andothercontentfortoggling--><divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"><ulclass="navnavbar-navnavbar-right"><liclass="hidden"><ahref="#top"></a></li><liclass="scroll"><ahref="#portfolio">Catalog</a></li><liclass="scroll"><ahref="#about">About</a></li></ul></div><!--/.navbar-collapse--></div><!--/.container-fluid--></nav>目录的部分代码如下。<!--CatalogGridSection--><sectionid="portfolio"><divclass="container"><divclass="row"><divclass="col-lg-12text-center"><h2>Catalog</h2><hrclass="star-primary"></div></div><divclass="row"><divclass="col-sm-4portfolio-item"><ahref="#portfolioModal1"class="portfolio-link"data-toggle="modal"><divclass="caption"><divclass="caption-content"><iclass="fafa-search-plusfa-3x"></i></div></div><imgsrc="img/portfolio/restaurant.jpg"class="img-responsive"alt="restaurant"></a></div>4.3网站的具体布局及内容介绍以“Citiesandrestaurants”为例，网页的布局及内容如下。关于城市及餐厅的介绍，以不同的城市为分类，并配以简单的文字介绍以及有城市代表性的图片作为背景。其中以“Taipei”为例，网页的部分布局及内容如下。以鲜明的标题、介绍、图片以及链接，为访客展示城市及城市的美食特色。这样的内容一目了然，如果访客有兴趣继续探索，就点击文中的链接进行到下一个内容。5设计成果最终，Groumet网站按照我的预期完成了。在网站开发的过程中，充分运用了所学有关HTML、CSS、JavaScript的知识，查阅了大量相关资料。网站由六个主要部分组成，每个部分的呈现形式虽然简单，但内容丰富易读。由于时间和能力的限制，没有用户注册、留言等互动功能，成为了一个小小的遗憾。我会在之后的时间，继续学习网站开发的相关知识，将网站完善。6谢辞在本次毕业设计过程中，感谢王常颖老师的指导与支持。7参考文献[1]MNDcontributors.Creatinghyperlinks./en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks,2019-12-18/2019-12-25[2]MNDcontributors.MultimediaandEmbedding./en-US/docs/Learn/HTML/Multimedia_and_embedding,2019-12-19/2019-12-25[3]MNDcontributors.Advancedtextformatting./en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting,2019-12-13/2019-12-25[4]MNDcontributors.Documentandwe