毕业论文(基于div+css的Tasty美食网站的界面设计)

毕业论文(设计)主题基于DIV CSS美食网站的界面设计指导老师*专业课*名称*学号*2014年05月30日摘要：美食，贵的是山珍海味，便宜的是街角小吃。 美食不论贵贱，只要是自己喜欢的都可以叫做美食。 吃前有期待，吃后有味道。 当食物变得心情舒畅时，食物不仅仅是味觉，也是精神上的享受。 美食也体现了人类的文明和进步。 本网站以美食为窗口，让国内外观众感受到中国菜肴的美丽，更让人感受到中国文化传统和社会变迁。 本文主要介绍了网站界面创建过程的详细描述、div css布局的探讨以及网站开发过程中使用的开发工具和技术。关键词：网页设计div css； Dreamweaver美食网站目录引言11市场调查11.1网站开发的背景和需求11.2同类网站的分析22文献检索32.1 css样式描述规则32.2 div css布局方式42.3 JavaScript描述规则52.4网站配色方案53设计实践53.1设计构想53.2创作过程63.2.1美食网站类主题和布局分析73.2.2美食网站效果图的设计与制作83.2.3界面元素制作过程93.2.4首页界面的创建过程103.2.5简介画面的制作过程143.2.6中国式美食界面的建立过程143.2.7创建专辑接口的过程153.2.8西餐界面的制作过程173.2.9联系我们界面的建立过程183.3制作过程中遇到的问题和解决办法204站点测试20结论22谢谢23参考文献24查词典随着信息时代的到来，IT业已成为当前最受关注的行业之一，迅速发展，在全球广泛普及，人类生活发生了革命性的变化。 同时，互联网技术的发展也取得了卓越的成果，为网站的开发、接口设计等奠定了坚实的基础。论文详细论述了美食网站开发的设计过程。 从技术上讲，我们采用了Dreamweaver网站开发工具，通过强大的HTML功能整合了JavaScript客户端语言。本文实现了主页、介绍、中餐、西餐、联系等功能，全面化了个人网站的需求。论文组织如下：首先阐述了该网站的开发背景、意义，详细介绍了div css理论知识，接着介绍了相关的开发工具和技术基础，接着进行了网站需求分析，提出了具体的设计方案，并提出了网页设计与链接，实现了各功能模块等1市场调查1.1网站开发的背景和需求“忽然一夜春风来临，千树万树梨花绽放”迅速发展，日益成熟的互联网已经影响了我们生活的各个方面。 人们感受到网络给人们带来的便利，网络也以自己的优势迅速渗透到很多传统领域。 俗话说“民以食为天”，但在解决衣食问题的现代，人们对食物的要求越来越高，不仅想吃饱，还想吃更多的食物，追求更多的食物。近年来，很多网站推广美食，提供了很多美食信息，介绍了各菜系和小吃的饮食文化、饮食习惯、饮食习惯等，具有一定的可读性和趣味性。 在网上推进美食，详细说明各种美食的做法，必定会受到全国以及全世界的美食爱好者的欢迎。设计开发这个美食网站最基本的意义是尽可能详细地展示和介绍各种美食信息，同时提供美食爱好者的交流场所，推进更多美食传统的做法，创造更多美食媒体。1.2同种网站的分析美食网站的增加表明人们对食物的需求也在增加。 我在设计前调查了同种类的网站。 首先分析中国菜网，中国菜网的主页如图1.1所示。图1.1中华美食网站主页中华美食网主页以黄色为背景，导航图像简洁，颜色简单，网站多用文字展示照片，多采用a链接，内容广泛，加上滚动图像，是动态的。 头部标志简单高雅，中规的美食网站，中华美食网站的首页布局紧凑，信息量大，文字也不杂乱。其次，分析了美食的世界网站。 该网站首页的屏幕截图如图1.2所示。图1.2美食天下主页和中国菜网不同内容多，美食天下的网站主页内容少，页面清晰清洁，背景是裸粉色，看过去很清爽。 导航使用div css在大型导航下添加子导航，并且当鼠标向上移动时显示不同的文本信息。 但是和中华美食的设计一样，这个网站也以黄色为导航背景，内容种类繁多，布局紧凑。2文献检索本次设计符合web标准规格，在dreamweaver中使用div css，在文本文档中写入JavaScript代码，完成了web界面的设计。 另外，因为对于网站的配色也需要特别注意，所以分别对用css样式写的规则、div css布局方式、用JavaScript写的规则、网页的配色方案进行了检索。2.1 css样式描述规则对于css类型，内联表达式是在html标记之后立即写入样式代码。 嵌入是指将此样式应用于本文档中所有类型的标签名称，但是将此样式的标签放入头部。嵌入的样式表解析了在同一文档中使用相同样式的多个标记的代码重用，并且如果触摸了由多个文档组成的网站，则必须使用外部样式表，这些独立的web文档才能使用统一的样式。 创建扩展名为. css的文本文件。 如果使用，则使用link标签将其部署到引用样式表的web文件中的头标签。css规则由两个主要部分组成：选择器和一个或多个声明。 选择器通常是需要更改样式的HTML元素。 每个声明都由属性和值组成。 属性是要设置的样式属性。 每个属性都有一个值。 属性和值用冒号分隔。有三种方法可以在站点的网页上使用样式表外部样式：将网页链接到外部样式表。内部页面样式：创建嵌入网页的样式表。内联样式：将内联样式应用于每个网页元素。2.2 div css布局网站的div css设计越来越受到行业的关注，从个人网站到企业和门户，页面设计师都以div css为行业标准。使用div css构建和美化网站时，div是整个网站的框架，而css样式是网站的衣服。 其中的内容是血肉。 我必须着手设计网站。 那么，从div的布局开始。该网站的骨架结构如下图2.1所示图2.1设计中的网站框图2.3 JavaScript描述规则JavaScript程序必须独立存储在扩展名为. js的文件中。JavaScript代码不应包含在HTML文件中，除非JavaScript代码是此部分的唯一代码。 在HTML中使用JavaScript代码会显着增加文件大小，并且无法进行高速缓存或压缩。 请尽量放在body后面。 这可以减少脚本加载导致其他页面内容加载速度降低的问题。 缩进单位为四个空格。 每行不得超过80个字符。 在运算符号中，最好在逗号后换行。 下一行必须缩进8个空格。 及时更新评论也很重要。 错误的评论使程序难以阅读，难以理解。 单行注释的符号为/，多行注释以/* 开头，以 */结束。 所有变量在使用前必须声明。 将var语句放在函数的开头。2.4网站配色方案该同色机制选择由若干彼此相邻的颜色组成的配色机制。 例如，橙色、橙色、橙色可以制作同系颜色的方案。 使用同系颜色的配色方案会给人带来不协调感，因此在网站的设计中经常被使用。 典型的应用方法是：一种颜色是页面的背景，另一种颜色是彩色中相邻颜色是前景色。补色方案是补色方案的配置。 虽然有点麻烦，但是在现在的网站设计中很流行。 补色适合创造活泼时尚的效果，可以让网站看起来很有魅力。此外，photoshop还易于构建三色方案。 首先，选择颜色，记录H(Hue )值，然后将该值加上120，得到第三种颜色，构成三种颜色方案。 在三色方案中，由于三色的不同使用了醒目的颜色，所以页面看起来非常不稳定，是给予比较变化的感觉的配色方案，给读者带来某种紧张感，是因为这三色比较强。3设计实践3.1设计构想受中国传统文化教育的阴阳五行哲学思想、儒家伦理道德观念、中医营养养养生学说、文化艺术成就、饮食审美风格、民族性格特征等影响，创造了历史书写的中国烹饪技术，形成了博大而深刻的中国饮食文化。 越来越多的人喜欢使用互联网查询、交流信息。 美食需要传承，交流也需要，美食网站是交流美食的平台。本人因为喜欢美食，所以经常关注美食信息，作为软件专家，平时在网站设计和HTML的制作等方面有一定的熟练度，借此次毕业作品的制作机会，为美食设计新的网站，作为这篇论文的依据。这次网站的制作主题确定为简洁型。 整个网站以图片为中心，减少文本。 网页主要以黑色为背景，以灰色为辅助，实现清新清洁的网页效果。各页间的布局要求工艺路线合理，内容表达清晰。这个美食网站的建设，主要是根据美食爱好者和各界需要收集美食信息的网民的需求而设计开发的，界面优美友好，布局合理，栏目功能强，信息详细。 主要实现以下目标：向外宣传美食文化和烹饪的传统做法尽量信息齐全，满足各种用户的需要。3.2创作过程利用Photoshop制作网页的效果图，参考中国菜网、美食天下等网站决定框架的布局，考虑美食网站的标志设计。在网上收集素材并下载，将图像素材的分类名汇总保存在images文件夹中，下载的收集图像如图3.1所示。图3.1照片收集屏幕截图复制介绍美食网站的文字素材，保存在meishi.txt中，文字资料如图3.2所示。图3.2文本数据的屏幕截图创建页面，命名主页和子页，然后创建样式和脚本分类文件夹。结合photoshop软件制作效果图，利用photoshop软件实现特定要素的剪切和采访。3.2.1分析美食网站的主题和布局整个美食网站的布局必须利用css样式、HTML代码和div css布局来简化网站。 所需要求：(1)颜色轻快，布局清爽，搭配合理；因为是美食系的网站，所以布局不规则，过于华丽是不好的，但也要注意整体的构造。 采用明亮的颜色，板的布局。 主题风格偏向清爽干净，网页主要以黑色为背景，以灰色为辅助。 文字的颜色以白色为主。 采用12像素的正文宋体。(2)布局合理，页面链接无误。为了避免布局过于混乱，必须正确控制每个div之间的位置间隔，正确应用代码，简化HTML和css，以便获得更丰富的动画效果，并确保页面之间的链接完整。3.2.2美食网站效果图的设计与制作美食网站效果图从互联网上的模板下载，在photoshop软件中打开，首页的模板效果如图3.3所示。图3.3首页效果图不修剪banner的部分，导航的部分主要是后面在dreamweaver中修正文字，如图3.4所示只将内容信息的右侧的部分变更为图像模式。图3.4首页效果图整个子页面的布局继承了首页的布局，只有内容信息的部分与首页不同。 子模板效果图如图3.5所示。图3.5子页效果图子布局保持不变。3.2.3界面元素制造过程创建界面元素包括网站上使用的所有图像，包括导航图和徽标图。 依次在photoshop裁剪、采访所有的图像。 将透明影像储存为*.png格式，并将其他影像储存为*.jpg格式。由于此网站的导航栏中没有放置数字图像以外的图像，因此只需在dreamweaver布局后添加文本即可。3.2.4首页界面的创建过程首先设立网站，在网站下面新设images、css、js、data这4个文件夹，文字收集的素材属于meishi.txt，照片素材的收集和自己设计处理过的图像都统一到images文件夹中。 控制样式的style和slimbox这两个文件位于css文件夹中，init、jquery.localscroll-min、jquery.min、jquery.scrollTo-min和slimbox这五个js文件位于js文件夹中创建首页，首先创建header、main_wrapper和footer的上下三个版本，在header中插入site_title，然后输入网站标题，如图3.6所示。图3.6 site_title效果图中间块分为左右块，以home_box left、home_box right的顺序赋予名称。 左侧是导航块，右侧是网站块。 导航块是使用div css的平均布局的