“一乐拉面”网站设计毕业设计.doc

目 录

一、 内容简介 3
（一） 背景与意义： 3
（二） 资料收集和分析 4
（三） 方案的设计 4
1． 网站的名称：一乐拉面商务设计网站 4
2． 网站功能的设计： 4
3． 网站栏目的规划图： 5
4． 网站设计资源图： 5
（四） 方案的实施 6
1． 确定网站主题 6
2． 网站的搭配 6
3． 构建网站布局 6
4． 设计软件的选择 6
5． 网站页面素材的收集 7
6． 网站页面的实现 7
7． 网站推广 7
二、 产品分析 7
（一） 需求分析 8
（二） 技术可行性分析 8
（三） 方法分析 8
（四） 可行性分析 8
三、 设计草图 8
（一） 网站Logo 8
（二） 网站首页 9
（三） 登录页 9
（四） 注册页 10
（五） 子页面 10
四、 设计过程与效果图 11
（一） 网站头部 12
1． 网站Logo、网站名称 12
2． 注册与登录 13
（二） Banner 16
（三） 导航栏 17
（四） 中间内容 18
（五） 页面底部 22
五、 作品效果图片 22
六、 设计创意说明 24
七、 设计总结 24
参考资料 26

一、 内容简介
（一） 背景与意义：
“一乐拉面”网站的设计是为了自己所喜爱的动漫，亦或者是自己儿时的玩伴，也是自己喜欢美食的一个纪念点。
在明治时代早期，拉面是横滨中华街常见的食品。1900年代，来自上海和广东的中国人在日本卖切面，配以简单的汤底和配料。在昭和年间，拉面在日本开始流行。第二次世界大战之后，来自美国的廉价面粉和从中国战场回来的士兵使得中国风味的面条大行其道。
在日本的新横滨还设有一个“拉面博物馆”。馆内将日本拉面分为4种：横滨拉面，博多拉面，札幌拉面和喜多方拉面。横滨拉面为最出名。横滨拉面起源与横滨中华街，最接近中国拉面的风味。博多又名福冈，是北九州的大城市，其拉面因为是用猪骨熬成的浓白高汤佐味而出名；札幌是北海道的第一大城市，当地拉面一面汤浓郁，面条粗韧劲道而见长；喜多方拉面比较前面三类略为逊色。
而且随着经济的发展与互联网的运用和开发，不管我们是在学校、在工作、还是在做什么事，只要有网络，我们都能了解到拉面也是一种不可多得的美食，我也希望能借助这个网站把自己喜欢的美食可以带给更多的人。
做这个网站就是想可以将日式拉面更好的推广出去，并且让大家认识并了解到日式拉面更多。
资料收集和分析
本次网站设计项目是自己一直都想去做的一个网站设计，通过自己学过的知识、做过的练习题、浏览过的网页，同时结合自己的构思与想法，制作出一个简单而又让人焕然一新的网页构架。
本项目的相关资料是通过查找相关的网站、查找了相关资料以及融入了自己的想法和理解来制作和实现的。
（二） 方案的设计
本这次的毕业设计主要是制作一个食品推广的网站。这个网站由一个主页、2个子页面、注册页和登录页组成。网站的名称：一乐拉面商务网站设计
1． 网站功能的设计：
网站功能的设计是通过借鉴并浏览一些比较成熟的、连接性流畅的网站，同时结合了自身的想法来实现的。网站的一些基本内容主要包括了：logo、导航栏、用户的注册与登录、主要信息区、联系方式与版权信息等；而且当我们在浏览页面的时候是希望能够很快的找到自己想要浏览的页面并且具有很强的连接性。这些功能都是一个成熟网站所需具备的，正因如此，我的网站设计也是从这些方面开始实施与实现的，并且同时加入自己的想法。
2． 网站栏目的规划图：

图1-1 网站栏目规划图

3． 网站设计资源图：

图1-2 网站资源图
（三） 方案的实施
1． 确定网站主题
美食是我从小就喜欢的，我会去尝试各种各样的美食，每到一个地方旅游，我总是要先去尝试一下当地的特色美食，这个已经成为我的一种习惯。动漫也是一种精神寄托，当俩者结合到一起，便产生了美妙的化学反应，一种从内心牵动你食欲的感觉。
2． 网站的搭配
一乐是动漫“火影忍者”中主人公最喜欢的一家拉面，我也是一名动漫爱好者。因为主人公的衣着就是以橙色与黄色与主色调，所以我也采用橙色为主色调，让浏览者有一种代入感。
3． 构建网站布局
网站的布局是运用结构比较单一的模板样式构建完成的。首先完成首页内容及样式的布局，之后对其新建模板，再新建模板中的页，就得到自己想要的网站页面。最后将各个页面相关信息、内容运用上去即可，然后对网站进行整体色彩的搭配。
4． 设计软件的选择
一个成熟网站的制作是需要通过运用制作软件来共同制作并完成。首先，我选择的第一个软件就是Adobe DreamWeaver软件，运用它来对网站进行大概的布局规划，制作出网站框架。
其次就是运用了Adobe PhotoShop软件，用此软件对网站所需的素材照片进行裁剪、美化、亮化、模糊等处理，让素材图片更加美化、生动的出现在网站页面上。
5． 网站页面素材的收集
现如今网络世界是很强大的，只有你想不到的，没有你搜不到的。利用网络的强大资源来搜集自己所需的网站页面素材，并将搜集的资料进行处理与美化，比如：对图片素材的大小进行调整、编辑、美化等处理。
6． 网站页面的实现
使用DreamWeaver代码编辑来编写网站的静态页面代码，依照自己构思的、绘画出的网站草图以及网站该实现的功能定位来编写网站网页代码；利用DW中的div盒子布局和css代码样式来实现网站的静态页面。让网站实现各个页面之间的连接与跳转。
同时，使用PhotoShop图像处理软件对网站页面所需要的图片素材进行美化、亮化、模糊、裁剪等等处理。
7． 网站推广
一个网站的浏览量都是需要靠推广来实现的，一个没有浏览量的网站不是一个成熟的网站。现如今我们所熟知的：百度、搜狗浏览器、谷歌浏览器等，这些浏览器的是最为常见的，也是应用最多的。所以我打算在这些浏览器上进行网站推广，与此同时，还可以在微信、微博这些新媒体上进行网站推广的实现；在进行网站推广的时候可以对网站的关键词进行挑选、优化等处理，当然还要考虑到网站兼容性问题。

二、 产品分析
（一） 需求分析
该网站主要是以“一乐拉面”来作为主题的一个网站。网站主要介绍一乐拉面的店铺，如拉面起源、店铺内饰、店铺主要拉面、还有周边商品等等，让大家更加进一步了解我们店铺。
而且网站主页与各个子页面的连接与跳转都能让人们可以很快的找到自己想要了解的页面，让其有目的性的了解、去浏览。
（二） 技术可行性分析
网站采用了DW的div与css技术对网站页面你进行构图布局和样式效果的实现；运用JS对网站的图片进行轮播效果的实现；使用PS对网站图片素材进行编辑处理。结合这些技术的综合运用，实现网站的整体效果，从而满足人们的需求。
（三） 方法分析
根据不同的网站、从不同的方面来完善自己的网站设计。取其精华去其糟粕，优点予以借鉴，缺点便加以改进，综合起来共同完成一个成熟网站的设计与实现。
善于倾听和借鉴周围人给的建议，根据周围朋友指出来的优缺点进一步完善自己的网站。
（四） 可行性分析
旅游业随着经济的发展逐渐上升，如今的我们也想到处去看看、去走走，去领略世界各地的风俗和文化，去发现更多“新世界”。正因为网络世界的到来，人们更加喜欢网上冲浪，喜欢在网上了解自己想要了解的事物。
设计草图
（一） 网站Logo

图2-1 网站Logo图
（二） 网站首页

图2-2 网站首页图

（三） 登录页

图2-3 登录页图

（四） 注册页

图2-4 注册页图
（五） 子页面

图2-5 一乐周边页面图

图2-6 一乐拉面馆页面图

三、 设计过程与效果图
（一） Photoshop部分
Photoshop部分为，分别是：网站Logo制作
1． 网站Logo
运用了PhotoShop软件来制作。这样设计的主要原因是日式拉面作为拉面品种的一分子，直接用“面”字相应网站主题，而且动漫的主人公也是喜欢穿着橙色黄色相间衣服。
Logo的大小为120*80像素，字体颜色为fff000，中间的外圆运用该#184485和#6b8fc3填充，采用椭圆工具且按住Shift键，大小为70*70像素的正圆，然后选取一半，下面用钢笔画出一个梯形，用#184485和#6b8fc3填充，一乐拉面字体为站酷快乐体。制作过程与效果图如下：

图3-1 碗字

图3-2 Logo修整

图3-4 Logo效果图
代码如图所示：

（二）Dreamweaver部分
运用所学的Dreamweaver表单知识制作了登录与注册界面
1、注册界面设计
根据现在主流注册界面和我们店铺所需要的会员信息我设计如下图（3-8）的注册与登录（3-9）界面，背景为店铺招牌拉面，颜色为红色，能够激发食客们的食欲。

效果与过程图如下：

图3-7 注册页过程图

图3-8 注册页效果图

图3-9 登录页过程图

图3-10 登录效果图

2、子页面
网站子页面分为拉面馆与企业文化俩个界面，拉面馆为我们店铺的本店热卖、特色拉面、特色小吃和夏日饮料组成。企业文化界面则是我们店铺建立的初衷和对于一乐拉面的热爱。

图3-11 子页面（拉面馆）设计过程图片

图3-12 子页面（企业文化）设计过程图片

四、 作品效果图片
产品的整体完整性是需要产品的整体效果来评估的。产品的效果图就是想让图片、文字等传媒体来表达作品最后所需要以及想要达到的预期的效果。
效果图是最直观、最生动的设计意图的表达，它以图片的形式展现，以一种最直接的方式展现在观看者面前，让观看者能够直接的了解的网站的主要包括的内容以及它的框架与布局。
作品效果图，可以帮助我们更加好的完善自己的网站，能让我们了解自己网站的颜色搭配、文字布局等等是否得体；从而完善，给人呈现出一种视觉性的效果美。
该网站的整体是由五大部分组成，分别是：头部（Logo、主题、注册与登录按钮）、Banner、导航栏、中间内容部分以及页面底部。
作品效果图如下：

图4-1 首页效果图

图4-2 注册效果图

图4-3 登录效果图

图4-4 子页面（企业文化）效果图

图4-5 子页面（拉面馆）效果图

五、 设计创意说明
“一乐拉面商务设计网站”这个网站，主要是想表达自己对动漫和没事的一种热爱，一直以来家长都认为动漫小孩子看的，我要借此机会释放我对于美食和动漫的一种热忱。
美食，是我们一辈子都在追求的，那里有我们的美好回忆，有我们成长的记忆；最重要的是有我们的家人，也有各种各样的回忆。酸甜苦辣咸也代表这人生百态，我们无论何时都要抱着热爱生活和热爱美食的信念。
一乐拉面虽然是动漫里的一种拉面，今天我们把这个变成现实，希望喜欢这个动漫的人能聚到一起，不知道的人可以因为拉面爱上这个动漫。
六、 设计总结
经过这段制作“一乐拉面商务网站设计”网站的时间，让我深深地感受到，没有什么事情是自己完成不了的，只要静下心来慢慢去感受它，就没有什么是不可能的完成的；哪怕是一节课只写了一个字、一句话、一个代码或者是一张照片的编辑处理，那也是自己想出来并且去完成的一件事。
在还没涉及到毕业设计的时候，我就在想毕业设计自己该往哪个方向去完成。由于专业的问题，自己很多方面的东西都学了，也感觉会了许多，会美工设计、会敲代码、会运营等；但同时有感觉自己什么都不会，虽说学过但只是学了一点皮毛，要想精通的话，还得继续学习，因为仅仅凭自己现在的能力是远远不够的。
以前觉得，网页是非常难的一个课程。因为需要自己敲代码，有时甚至搞不清楚该用哪个单词或者哪个样式来实现网页的整体布局。有时打错一个字母，或者错打、少打一个符号，整个页面的效果就都不会出现。但是，在技能抽查的这段时间里，我感觉自己的进步是非常大的，可以自己独自完成一个页面，甚至有时还能赶在老师的前面提前完成。
我从来都不觉得自己的专业知识是班级里最好的一个，能力也不是最好的一个人，毕竟人外有人天外有天。比自己专业知识好的人有很多，比自己能力强的人也有很多，但这并不能影响我自己做得更好。所以，在这次的毕业设计中，遇到不懂的问题我会向老师、朋友、室友们请教；同时也会上网查找一些解决的办法。好记性不如烂笔头说的一点都没错，记性再好，也不如多做题目来的实际；题目做的多了，就会形成一种肌肉记忆，自然而然的写出来。
在这次毕业设计中我遇到了很多的问题，比如说：在打代码的时候小心打错了一个单词或者是将单词字母的顺序给互换了，在命名定义的时候弄错符号等这些小细节的问题。细节决定成败，这些小细节的错误会导致整个网页页面无法呈现出效果，我总是会因为少打一个符号而得不到自己想要的效果，这在提醒我做事情要细心。
完成毕业设计之后发现它并不是自己想象的那么难，只要用心、细心，有耐心的去做，去完成就没什么难度了。完成整个网站之后，我以一个浏览者的身份对网站进行了一个测试，去亲身体验了一下整体的连接性和流畅度。
这次的毕业设计让我学习到了许多的知识和经验，因为自己的不细心打错字母或符号让自己懂得了做任何事情的时候都要认真细致，反复仔细的检查，不能粗心大意，不能为了减轻负担而偷懒，图一时之快。有时我们会因为自己的小小失误而浪费许多时间，反而还耽误了自己的进度，所以我们需要更加的细致，同时也要努力再努力的去学习更多的知识。

参考资料

[1] HTML5移动Web开发[M].蔡艳桃. 万木君.北京：人民邮电局出版社，2015
[2] HTML+CSS+JavaScript网页制作案例教程[M].传智播客高教产品研发部.北京：人民邮电出版社，2015
[3] 商务网页设计与制作[M].方玲玉.刘娜.北京：电子工业出版社，2016
[4] 响应式web开发项目教程（HTML5+CSS3+Bootstrap）[M].黑马程序员.北京：人民邮电出版社，2017
[5] HTML5移动Web开发[M].黑马程序员.北京：中国铁道出版社，2017

22