西北美食网站设计

目录一、内容简介··············································1（一）背景与意义····················································1（二）资料收集和分析················································1（三）方案设计······················································1（四）方案的实施····················································1二、产品分析·············································2三、设计草图·············································2四、设计效果图············································2五、过程图片··············································8六、作品图片·············································11七、设计创意说明·········································13八、设计总结·············································13九、参考资料··············································14产品名称西北美食网站一、内容简介（一）背景与意义西北的美食，我就有推荐啦！甘肃的饮食口味具有浓郁的高原特色和民族风光，还有我们的兰州清汤牛肉面、新疆大盘鸡、新疆拌面、刀削面、藏包子等美食，还有肉夹馍、煎鸡蛋、火腿饭奶酪鸡蛋、牛筋面、鸡米粥、面卷饼、鸡蛋灌饼等，都是觉得美味的！兰州地方史志家邓明先生认为，兰州牛肉拉面的历史本来一清二白。进入20世纪90年代，随着互联网的逐步普及，以及商业目的。兰州牛肉拉面的历史被人为搞乱了。在兰州拉面诞生之后200多年的岁月里，兰州牛肉拉面以肉烂汤鲜、面质精细而闻名，1999年被国家确定为中式三大快餐试点推广品种之一，被誉为"中华第一面"。（二）资料收集和分析在我们的日常生活中，经常会去访问一些美食特色介绍方面的网站，去了解如各地不同特色菜谱、风味美食样式等等知识，有很好的参考借鉴价值。我的作品需要制作出具有自己独特的风格，需要从网络上搜索相关资料，并且还通过参考冯涛、王海波主编的《网页设计与制作项目教程》（第二版）（大连理工大学出版社）和张苏中、吕威飞、尤胜编《网页设计制作》（高等教育出版社）来完成制作编辑网站，撰写网站网页的文字材料。（三）方案设计本次毕业设计将制作西北美食网站，首先设计出网页的主体效果，再运用AdobeDreamweaverCS6软件，动用代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页。每一张用于制作并编辑网站和移动应用程序的网页设计软件。（四）方案的实施用AdobeDreamweaverCS6软件制作时，每张设计制作并编辑网站效果图中，包括首页、特色菜、食材、风味小吃上。包括的名称、兰州清汤牛肉面、新疆大盘鸡出版社及一些图片和背景。书脊上主要包括书的名称内容一些图片和背景图案。用AdobeDreamweaverCS6软件播放时将作品的美食特色作为一个整体图片一起进行设计制作并编辑网站效果图中展示。二、产品分析本毕业设计制作为目的。主要运用的是AdobeDreamweaverCS6软件依次制作出效果图。最后用AdobeDreamweaverCS6制作并编辑网站将所有效果展示出来。用AdobeDreamweaverCS6制作并编辑网站制作的包括：我先设计西北美食节是因为能吃许许多多的美食。也能品尝各种新颖的美食。肯定能够饱口福拉。制作过程中，需要运用到AdobeDreamweaverCS6制作并编辑网站、网站设计代码编辑效果等知识。用AdobeDreamweaver软件播放时，需要添加代码、拆分、设计、实时视图效果浏览器的兼容网页设计。三、设计草图每本制作并编辑网站设计基本框架都相似，上面是主题西北美食，左侧是特色美食、食材大全、风味美食、专题专区、话题。中间是牛肉面、疆大盘鸡。然后根据的不同内容再加上相应的图案或文图3.1编辑网站设计框架图四、设计效果图（一）“首页”设计效果图，如图4.1所示图4.1“首页”效果图（二）“特色菜谱”设计效果图，如图4.2所示图4.2“特色菜谱”效果图（三）“特色菜”设计效果图，如图4.3所示图4.3“特色菜”效果图（四）“食材”设计效果图，如图4.4所示图4.4“食材”效果图（五）“风味小吃”设计效果图，如图4.5所示图4.5“风味小吃”效果图（六）“专题”设计效果图，如图4.6所示图4.6“专题”效果图（七）“在线留言社区”设计效果图，如图4.7所示图4.7“在线留言社区”效果图（八）“话题”计效果图，如图4.8所示图4.8“话题”效果图（九）“注册”设计效果图，如图4.9所示图4.9“注册”效果图（十）“登录”设计效果图，如图4.10所示图4.10“登录”效果图（十一）“甘肃特色美食”设计代码，如图4.11所示图4.11“甘肃特色美食”效果图源代码：<ahref="index.html">首页</a><ahref="cp.html">特色菜</a><ahref="sc.html">食材</a><ahref="zx.html">风味小吃</a><ahref="zt.html">专题</a><ahref="sq.html">社区</a><ahref="ht.html">话题</a><ahref="zhuce.html">注册</a><ahref="login.html">登录</a>（十二）“从饮食说健康”设计代码，如图4.12所示图4.12“从饮食说健康”效果图源代码：<p>兰州牛肉面</p><p>刀削面</p> </a></a> </li><li> <li></li><ahref="cplist01.html"><ahref="cplist02.html"><imgsrc="img/02.jpeg"/><imgsrc="img/03.png"/> <p>干拌面</p> <p>新疆小盘鸡</p></a></a></li></li><li><li><ahref="cplist03.html"><ahref="cplist04.html"><imgsrc="img/11.jpg"/> <imgsrc="img/timg.jpg"/>（十三）“风味小吃”设计代码，如图4.13所示图4.13“风味小吃”效果图源代码：<imgsrc="img/timg(1).jpg"/><p> </p></li><li><imgsrc="img/017.jpg"/><p>风味小吃2</p></li><li><imgsrc="img/016.jpg"/><p>风味小吃3</p></li></ul></div> <divclass="fxzp">五、过程图片（一）启动Photoshop软件，新建大小为401×143像素，分辨率为72像素/英寸，颜色模式为RGB，背景内容为白色的图像文件。如图5.1所示。图5.1新建文件（二）用鼠标单击工具箱中的移动工具，在标尺边缘拖出多条辅助线，效果如图5.2所示。（三）打开做好的素材图片1和2，分别放到“图层1”和“图层2”中。改变“橡皮擦工具”的笔画大小、不透明和笔画硬度等，使用“橡皮擦工具”对素材进行编辑处理。新建图层“图层3”，利用矩形选框工具在封面上绘制一个长方形，并填充为红色，效果如图5.2所示。。图5.2底背景图（四）关闭标尺。新建图层4，在制作中，绘制一个矩形，选择“编辑”-“描边”命令，在弹出的对话框中，设置宽度为1像素，颜色为浅灰色，效果如图5.3所示。图5.3西北美食中间矩形（五）选择文字工具时，在封面上输入“西北美食”（字体为毛笔行书，大小为36点），“设计”（字体为书法，大小为14点），“从手绘设计”（字体为书法，大小为5点）。制作美食面的步骤：（以制作“西北美食”为例）六、作品图片本毕业设计总共制作了西北美食网站，每个都有自己的美食特色。全部制作完毕以后，以AdobeDreamweaverCS6软件动态展示出来（具体的展示网站设计代码编辑效果见作品）。图6.1作品展示七、设计创意说明设计软件包括了AdobeDreamweaverCS6软件和网页设计软件。用AdobeDreamweaverCS6软件进行美食的制作，用网页设计代码面效果图进行展示。在AdobeDreamweaverCS6软件制作，运用了软件中大部分功能。每一个美食网页设计软件提供了一套直观的可视界面，供您创建和编辑HTML网站和移动应用程序。使用专为跨平台兼容性设计的自适应网格版面创建适应性版面。在发布前使用多屏幕预览审阅设计。八、设计总结：历经了三个月的奋战，我的毕业设计终于完成了。回想这段日子的经历和感受，让我感慨万千，在这次毕业设计的过程中，我努力和精心制作，学习了Photoshop.exe、flash、AdobeDreamweaverCS6等网页软件的应用。通过这次设计使我明白了自己基本的知识还比较欠缺，要学习的东西还很多，终于使我对自己现在有了掌握。在以后