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

 时间:2014-06-06 14:10:48 贡献者:spcjl921528

导读:毕 业 论 文(设计)题目基于 DIV+CSS 的 Tasty 美食网站的界面设计指导老师 专业班级 姓 学 名 号*** *** *** *********2014 年 05 月 25 日浙江经贸职业技术学院毕业论文(设计)摘 要:美食,贵的有山

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

毕 业 论 文(设计)题目基于 DIV+CSS 的 Tasty 美食网站的界面设计指导老师 专业班级 姓 学 名 号*** *** *** *********2014 年 05 月 25 日

浙江经贸职业技术学院毕业论文(设计)摘 要:美食,贵的有山珍海味,便宜的有街边小吃。

美食是不分贵贱的,只要 是自己喜欢的,就可以称之为美食。

吃前有期待、吃后有回味的东西。

美食遭遇 心情的时候,美食已不仅仅是简单的味觉感受,更是一种精神享受。

美食还体现 人类的文明与进步。

本网站以美食作为窗口,让海内外观众领略中华饮食之美, 进而感知中国的文化传统和社会变迁。

本文的主要内容集中在: 对 web 进行概述, 对 DIV+CSS 布局进行讨论,并对网站开发过程中使用的开发工具 Dreamweaver 和 技术做了简要的介绍。

本文分为四个部分,第一部分对网站进行概述,第二部分 介绍了 DIV+CSS,第三部分为网站分析,第四部分是对整个网站的制作进行详解。

关键词:网页设计;DIV+CSS;Dreamweaver;美食网站第 1 页

浙江经贸职业技术学院毕业论文(设计)目录引 言 ..................................................................1 1 网站概述 ..............................................................1 1.1 开发背景 ..................................................... 1 1.2 开发意义 ..................................................... 2 1.3 开发软件 ..................................................... 2 1.3.1 梦幻网页的编织者——Dreamweaver CS3 ..................... 2 1.3.2 图形、图像编辑设计制作软件——Adobe Photoshop ........... 3 2 DIV+CSS ...............................................................4 2.1 DIV+CSS 简介 .................................................. 4 2.2 级联样式表简介 ............................................... 5 2.3 DIV+CSS 布局方式 .............................................. 5 3 网站分析 ..............................................................6 3.1 可行性分析 ................................................... 6 3.1.1 技术可行性 .............................................. 6 3.1.2 经济可行性 .............................................. 6 3.1.3 社会可行性 .............................................. 7 3.2 需求分析 ..................................................... 7 3.2.1 界面设计需求 ............................................ 7 3.2.2 用户对网站的需求 ........................................ 7 4 网站设计 .............................................................8 4.1 网站设计目标 ................................................. 8 4.2 网站的总体设计 ............................................... 8 4.3 整体风格设计 ................................................ 10 4.3.1 页面属性设计 ........................................... 10 4.3.2 色彩搭配 ............................................... 11 4.3.3 链接效果 ............................................... 11 4.3.4 导航设计 ............................................... 12 4.3.5 细节设计 ............................................... 13第 2 页

浙江经贸职业技术学院毕业论文(设计)4.4 首页设计 .................................................... 13 4.4.1 DIV 分布和概述 ......................................... 13 4.4.2 搜索关键字与描述 ....................................... 15 4.5 其他界面设计 ................................................ 15 4.5.1 简介界面的设计制作过程 ................................. 16 4.5.2 中式美食界面的设计制作过程 ............................. 16 4.5.3 相册界面的设计制作过程 ................................. 17 4.5.4 西式美食界面的设计制作过程 ............................. 19 4.5.5 联系我们界面的设计制作过程 ............................. 19 结 论 .................................................................21 致 谢 .................................................................22 参考文献 ...............................................................23第 3 页

浙江经贸职业技术学院毕业论文(设计)引 言推荐国家的历史有长有短,疆域有大有小,实力有强有弱,人口有多有少, 民族构成、宗教信仰、政权性质和经济结构也有差异,故而各国的饮食文化是不 一样的。

随着个人消费水平的提高,每个人对美食的概念不一样,其中特例就是 中餐、西餐的产生以及受人追捧选择。

论文详细论述了关于一个美食网站的开发的设计过程。

在技术上,采用了 Dreamweaver 网站开发工具, 以 HTML 的超大功能结合 JavaScript 的客户端语言。

本文实现了首页、简介、中式美食、西式美食、联系我们等功能,全面化个人网 站的需求。

论文组织如下:首先阐述了该网站的开发背景、意义,详细介绍了 DIV+CSS 理论知识;其次介绍了相关的开发工具及技术基础;接着对网站进行了 需求分析,提出了具体的设计方案;然后展现了整个网站的具体实现,包括网页 的设计和链接,各功能模块的实现。

1 网站概述1.1 开发背景 “忽如一夜春风来, 千树万树梨花开” , 迅猛发展并日益成熟的互联网已经影 响到我们生活的方方面面。

人们真真切切的体会到了网络带给大家的便捷,互联 网也以其独有的优势快速地渗透到越来越多的传统领域。

俗话说“民以食为天” , 在解决了温饱问题的现代,人们对食物的要求越来越高,已不仅仅局限于能吃饱 就好,更多是希望能吃好,追求更多的美食。

近年来,已出现不少网站对美食进行普及宣传,提供大量美食信息,介绍各 菜系和小吃的饮食文化、饮食习俗、饮食习惯等,具有一定的可读性和趣味性。

在网上推广美食,详述各种美食做法必定可以受到全国乃至全世界的美食爱好者 的追捧。

第 1 页

浙江经贸职业技术学院毕业论文(设计)1.2 开发意义 设计开发此美食网站最基本的意义,就是能够尽可能详细地展示、介绍各种 美食信息,同时提供美食爱好者一个交流的平台,使得更多的美食传统做法得到 推广,也可激发更多美食创意的产生。

1.3 开发软件 1.3.1 梦幻网页的编织者——Dreamweaver CS3 Adobe Dreamweaver, 简称 “DW” , 中文名称 “梦想编织者”, 是美国 MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套 针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制 作出跨越平台限制和跨越浏览器限制的充满动感的网页。

Adobe Dreamweaver 使用所见即所得的接口, 亦有 HTML 编辑的功能。

它有 Mac、 Windows 和 Linux 系统的版本。

使用了 Opera 的排版引擎“Presto”作为网页预 览。

Dreamweaver 是创建和管理网页的专业化可视编辑器。

使用 Dreamweaver 可 以轻松创建跨平台、跨浏览器的页面。

Macromedia 的 Roundtrip HTML 技术允许 用户随意导入 HTML 文档而无需重新设置代码格式。

Dreamweaver 可以为用户做到:使用动态 HTML 功能而不用写一行代码。

它甚 至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。

它 还是一个可以完全自定义的应用程序。

用户可以创建自己的对象和命令修改菜单 和快捷键,甚至编写 JavaScript 代码扩展 Dreamweaver 的行为和属性检查器。

在 Dreamwaver 中,它的工具栏全是浮动工具栏,可以将工具栏缩小,也可 以关闭。

在专业术语里面,他们叫“浮动面板” ,利用浮动面板来控制对页面的编 写。

通过在浮动面板中进行属性设置,这样就直接可以在文档中看到结果,避免 了中间过程,提高了工作效率。

先来介绍它的三个最重要的浮动面板。

(1)启动面板 启动面板主要用来快速启动相应的任务, 或显示/隐藏相应的浮动面板。

如果 启动面板是竖的,那么,可以点击它右下角的一个小按钮,它就可以变成横向的 了,这时,可能会发现,它的状态栏上也有这个面板上的所有选项。

这也就为网第 2 页

浙江经贸职业技术学院毕业论文(设计)页制作者提供了方便。

可以直接从右下角点击相应的栏目进入想要进入的对话框。

(2)对象面板 对象面板主要功能相当于插入菜单, 主要是向网页中插入一些对象, 如表格, 框架,图象,层,Flash 动画等,它通过一个下拉菜单,把要插入的选项都包括 在了其中。

每一个选项中都有若干个图标,只要在图表上单击一下,就可以插入 想要插入的对象了。

(3)属性面板 属性面板会随着编辑的内容而变化,这个图是文字属性面板,它里面包含了 所要编辑的文字的所有内容,包括字体,颜色,大小,连接,缩进等,它的右下 角还有一个向下的小三角箭头,单击它,会展开属性面板,它把一些不常用的属 性也列出来。

展开后,箭头会变成向上,单击它,又会使属性面板复原。

属性面 板很多,还有图象属性控制面板,层属性控制面板等对象的属性控制面板,用户 只要选择要编辑的对象,它就会自动变化。

用户对所有由启动面板弹出来的浮动 面板在被打开后,可以重新组合,可以将经常用的面板单独地拉出来,只需要将 鼠标放到想要拉的按钮上面,然后按住左键拖动就可以了,同理,把他们组合也 是一样,用鼠标拖动后,放到上面就可以。

1.3.2 图形、图像编辑设计制作软件——Adobe Photoshop Adobe Photoshop,简称“PS” ,是由 Adobe Systems 开发和发行的图像处理 软件。

Photoshop 主要处理以像素所构成的数字图像。

使用其众多的编修与绘图 工具,可以有效地进行图片编辑工作。

PS 有很多功能,在图像、图形、文字、视 频、出版等各方面都有涉及。

从功能上看,该软件可分为图像编辑、图像合成、校色调色及特功能特色效 制作部分等。

图像编辑是图像处理的基础, 可以对图像做各种变换如放大、 缩小、 旋转、倾斜、镜像、透视等;也可进行复制、去除斑点、修补、修饰图像的残损 等。

图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意 义的图像,这是美术设计的必经之路;该软件提供的绘图工具让外来图像与创意 很好地融合。

校色调色可方便快捷地对图像的颜色进行明暗、 色偏的调整和校正, 也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方 面应用。

特效制作在该软件中主要由滤镜、通道及工具综合应用完成。

包括图像第 3 页

浙江经贸职业技术学院毕业论文(设计)的特效创意和特效字的制作,如油画、浮雕、石膏画、素描等常用的传统美术技 巧都可藉由该软件特效完成。

Adobe 只支持 Windows 操作系统和 Mac OS 操作系统版本的 Photoshop, 但 Linux 操作系统用户可以通过使用 Wine 来运行 Photoshop。

2 DIV+CSS2.1 DIV+CSS 简介 DIV+CSS 是 web 设计标准,它是一种网页的布局方法。

与传统中通过表格布 局定位的方式不同, 它可以实现网页页面内容与表现相分离。

提及 DIV+CSS 组合, 还要从 XHTML 说起。

XHTML 是一种在 HTML 基础上优化和改进的新语言,目的是基 于 XML 应用与强大的数据转换能力,适应未来网络应用更多的需求。

XHTML 网站设计标准中,不再使用表格定位技术,而是采用 DIV+CSS 的方式 实现各种定位。

用 DIV 盒模型结构给各部分内容划分到不同的区块,然后用 CSS 来定义盒模型的位置、大小、边框、内外边距、排列方式等。

CSS 是英语 Cascading Style Sheets(层叠样式表单)的缩写,它是一种用 来表现 HTML 或 XML 等文件式样的计算机语言。

简单地说,DIV 用于搭建网站结构(框架) 、CSS 用于创建网站表现(样式/ 美化) ,实质即使用 XHTML 对网站进行标准化重构,使用 CSS 将表现与内容分离, 便于网站维护, 简化 HTML 页面代码, 可以获得一个较优秀的网站结构便于日后维 护、协同工作和搜索引擎蜘蛛抓取。

以下是 DIV+CSS 的特点简介: ① 符合 W3C 标准。

微软等公司均为 W3C 支持者。

这一点是最重要的,因为这 保证您的网站不会因为将来网络应用的升级而被淘汰。

② 支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是 IE7 或者是火狐,您的网站都能很好的兼容。

③ 搜索引擎更加友好。

相对与传统的 table, 采用 DIV+CSS 技术的网页,对 于搜索引擎的收录更加友好。

④ 样式的调整更加方便。

内容和样式的分离, 使页面和样式的调整变得更加第 4 页

浙江经贸职业技术学院毕业论文(设计)方便。

⑤ CSS 的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大 量带宽,而且众所周知,搜索引擎喜欢清洁的代码。

⑥ 表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。

2.2 级联样式表简介 有三种方法可以在站点网页上使用样式表: ① 将网页链接到外部样式表。

② 在网页上创建嵌入的样式表。

③ 应用内嵌样式到各个网页元素。

2.3 DIV+CSS 布局方式 对于网站 DIV+CSS 设计越来越受到业界的关注,从个人网站到企业及门户网 站,页面设计人员已经将 DIV+CSS 作为了业界标准。

如果用 DIV+CSS 来构建和美化网站,那么 DIV 就是整个网站的骨架,CSS 样 式就是网站的衣服。

其中的内容,就是血肉。

要入手设计一个网站。

那么,就要 从 DIV 的布局开始。

本网站的骨架架构如图 2.1 所示:图 2.1 设计中网站的骨架图第 5 页

浙江经贸职业技术学院毕业论文(设计)3 网站分析3.1 可行性分析 3.1.1 技术可行性 此系统对开发环境的硬件,软件要求都不高,目前市场上一般计算机硬件资 源均能满足系统开发需求。

(1)硬件需求包含了处理器、操作系统等,具体硬件需求如表 3.1 所示。

表 3.1 硬件环境表处理器(CPU)操作系统RAM1显示器 鼠标 (2)软件需求最低要求: 600 兆赫(MHz)Pentium 处理器 推荐: 建议采用 1 千兆赫(GHz)Pentium 处理器 可在以下任何一个系统中: Microsoft® Windows® 2000 Professional SP4 Microsoft® Windows® 2000 Server SP4 Microsoft® Windows® 2000 Advanced Server SP4 Microsoft® Windows® 2000 Datacenter Server SP4 Microsoft® Windows® XP Professional x64 Edition (WOW) Microsoft® Windows® XP Professional SP2 Microsoft® Windows® XP Home Edition SP2 Microsoft® Windows® XP Media Center Edition 2002 SP2 Microsoft® Windows® XP Media Center Edition 2004 SP2 Microsoft® Windows® XP Media Center Edition 2005 最低要求: 192 兆字节 (MB) 推荐: 256 MB 或更高 最低要求: 800 x 600 256 色 推荐:1024 x 768 增强色 - 16 位 Microsoft 鼠标或兼容的指针设备主要有 Adobe Dreamweaver CS3 及服务器配置 IIS5.0 以上。

3.1.2 经济可行性 本美食网站设计与开发所要求的硬件(计算机及相关硬件)和软件 (Dreamweaver + Photoshop 等)均在市面上易于购买或可直接从网上下载并免第 6 页

浙江经贸职业技术学院毕业论文(设计)费使用,不需要再花费大量的资金去购买高成本的设备,大大提高了在设计过程 中的工作效率。

因此,本系统在经济上是可行的。

3.1.3 社会可行性 本网站的开发符合国家法律法规,能健康独立的运行,操作使用方便,能免 费提供大量美食信息,用户通过本平台不仅可以查阅到自己需要的信息资源,还 能进行评论和交流,满足不同地方的美食爱好者的需求。

3.2 需求分析 在中国传统文化教育中的阴阳五行哲学思想、儒家伦理道德观念、中医营养 养生学说,还有文化艺术成就、饮食审美风尚、民族性格特征诸多因素的影响下, 创造出彪炳史册的中国烹饪技艺,形成博大精深的中国饮食文化。

越来越多的人 喜欢使用互联网查询信息、交流互动。

美食需要传承,也需要交流,美食网站是 一个交流美食的平台。

3.2.1 界面设计需求 在崇尚个性的今天,设计者们将页面设计表示的淋漓尽致。

用户欣喜的看到 那些僵化的设计模式正在被逐个打破,网页设计充满了朝气。

但是,作为网页设 计者,不能一味的只追求个性的表现,还必需兼顾到用户和客户的习惯,在表现 本身的风格的同时,在功能上使用户更加便利。

网站导航如图 3.1 所示。

首页简介中式美食相册图 3.1 网站导航功能西式美食联系我们利用 DIV+CSS 定位各个界面、链接实现点击文字链接移动界面,页面中包含 首页界面、简介界面、中式美食界面、相册界面、西式美食界面、联系我们界面。

3.2.2 用户对网站的需求 美食网站主要功能是提供美食交流等服务。

其中,信息发布是各种类型的美 食信息包括美食所用材料、做法等。

而对于美食交流服务,用户联系我们,给我第 7 页

浙江经贸职业技术学院毕业论文(设计)们反馈建议或意见。

4网站设计4.1 网站设计目标 本美食网站的建设,主要针对美食爱好者及各界需要搜集美食信息的网络用 户的需求进行设计开发的,因此,将打造一个界面美观友好,布局合理,栏目功 能强大,信息详尽的网站。

主要实现如下目标:① 向外界宣传美食文化和菜肴传统做法; ② 信息尽可能齐全,满足不同用户需求。

4.2 网站的总体设计 借助由代码语言编程所实现的各种交互式效果,增加了网页界面的生动性和 复杂性。

一般来说,网页的界面主要由下面几个因素构成: ① 文字:文字元素是信息传达的主体部分。

网页中的文字主要包括标题、信 息、文字链接几种主要形式。

标题和传统媒体中信息传达的基本作用相同,是内 容的简概说明一般比较醒目、优先编排。

文字作为占据页面重要比率的元素,同 时又是信息重要载体,它的字体、大小、颜色和排布对页面整体设计影响极大。

我所使用的文字是宋体 12 号,因为这样看得比较清楚,使整个页面整洁,网页中 都普遍的使用,所以在此我选择 12 号宋体作为网页的主体文字样式。

② 图形: 图形在网页界面中具有重要作用。

合理的运用图形, 可以生动直观、 形象地表现设计主题。

网页中常用的图形格式包括 jpg 和 gif,这两种格式压缩 比高,得到了规范浏览器的支持,下载速度快,具有跨平台的特性,不需要浏览 器安装插件即可直接阅览。

图形元素包括标题、背景、主图、链接图标四种。

本文所使用的图片主要是自己收集的比较精美。

网站图片素材如图 4.1 所示。

第 8 页

浙江经贸职业技术学院毕业论文(设计)图 4.1 图片素材③ 页面版式:版式是网页界面设计的重要组成部分,它将文字、图形等视觉 元素进行组合配置,使页面整体视觉效果美观和谐,简单大方,便于阅读,实现 信息传达的最佳效果。

页面版式如图 4.2-4.3 所示。

图 4.2 页面版式第 9 页

浙江经贸职业技术学院毕业论文(设计)图 4.3 页面版式④ 色彩:彩色网页比单色网页更具吸引力;色彩本身具有象征作用。

4.3 整体风格设计 4.3.1 页面属性设计 页面中的整体格式和布局都在 stley.css 中,其中 body 设计如下: body{ margin: 0; padding: 0; color: #e2e2e2; font-size: 12px; line-height: 1.6em; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; background-color: #313030; background-image: url(../images/templatemo_body.jpg);background-position: center top;第 10 页

浙江经贸职业技术学院毕业论文(设计)background-repeat: no-repeat } 页面的字体为:宋体、大小为 12 像素,字体颜色#e2e2e2。

背景颜色我采用 #313030, #313030 这种背景色它与其他任何颜色的搭配都比较合适,不显花哨, 简洁大方。

背景图片用 url 设置,背景图像的起始位置为页面顶部中间,效果是 重复背景图。

4.3.2 色彩搭配 打开一个网站,给用户留下第一印象的既不是网站丰富的内容,也不是网站 合理的版面布局,而是网站的色彩。

色彩对人的视觉效果非常明显,一个网站设 计成功与否,在某种程度上取决于设计者对色彩的运用和搭配。

因为网页设计属 于一种平面效果设计,在排除立体图形、动画效果之外,在平面图上,色彩的冲 击力是最强的,它很容易给用户留下深刻的印象。

因此,在设计网页时,必须要 高度重视色彩的搭配。

本网站的主打色为黑色。

黑色是一种很大器的颜色,几乎能与所有的颜色相 辅相成。

采用这种色彩搭配给游客留下深刻的印象。

4.3.3 链接效果 对于一个页面不仅要设计其字体和其他风格,还要有链接效果,使页面更加 的生动,style.css 中的链接效果如下: a, a:link, a:visited { color: #FFFFFF; font-weight: normal; text-decoration: none } #site_title a { font-size: 28px; color: #fff; font-weight: 700 } p a, p a:link, p a:visited { color: #00CCFF; font-weight: normal; text-decoration: none } p a:hover { color: #CC66FF; text-decoration: none; } cite a, cite a:link, cite a:visited { font-size: 12px;text-decoration: none; font-style: normal } #gallery li a { display: block; }第 11 页

浙江经贸职业技术学院毕业论文(设计)#gallery li a img{ }页面的链接效果设置:未访问的链接样式和已经访问过的链接样式字体颜色 为#FFFFFF,字体的粗细为中等,文字修饰为无;当鼠标放到链接上的时候,样式 字体颜色颜色为#CC66FF,文字修饰为无。

网页 header 部分的效果设置:字体大 小为 28 像素,颜色为#FFFFFF 字体的粗细为中等。

页面中的文字链接效果设置: 未访问的链接样式和已经访问过的链接样式字体颜色为#00CCFF, 字体的粗细为中 等,文字修饰为无;当鼠标放到链接上的时候,样式字体颜色颜色为#CC66FF,文 字修饰为无。

引用链接的字号为 12 像素,文字修饰为无,字体样式为默认值。

图 片展示界面用的是 display 控件,表示的是显示模式。

bolck 表示此元素将显示 为块级元素,此元素前后会带有换行符。

4.3.4 导航设计 网站的导航栏目可以让用户对网站的内容及信息一目了然。

导航分为: 首页、 简介、中式美食、西式美食、联系我们。

网站采用 DIV 布局,加上 a 链接制作而 成。

相关代码如下:

About

Food is not just a simple taste experience, but also a spirit of enjoyment.

Chinese Food

The Chinese diet etiquette varies according to the nature and purpose of the feast.
第 12 页

浙江经贸职业技术学院毕业论文(设计)

Western Food

Western-style food is referred to as the western style food, nutrition as the core.

Contact

Any opinions or suggestions, please contact us.
4.3.5 细节设计 9PX 凹陷细线和有阴影的背景图片的组合设计给网页带来了分成次的美观、 图片的选择给人醒目、大方的感觉、按钮的设计给顾客赏心悦目的感觉。

4.4 首页设计 4.4.1 DIV 分布和概述 由于个人网站给人的形象应该是专业、大方,所以主页的设计和布局我采用 大方简单又不失活泼的原则。

首页整体用 1 个大的 DIV 里面包含两个小的(上下 个一个)DIV。

DIV 设置效果为:总体都设置了宽度,居中格式,背景颜色及背景图片,其 他还有内边距,高等。

所有页面分为 logo 信息、内容信息、版权信息三个部分。

内容界面是一个网站走向成功道路上必不可少的因素。

网站的内容代表着一 个好网站的素质和形象,所以应该表现的大气、端庄而且精细。

还更要表现出一 个网站应该有的朝气和活力。

因此我首先选中色彩搭配比较大方,整体布局比较 清晰简洁的内容模式。

在首页的版面,先是用 Photoshop 对网站模板进行切片,第 13 页

浙江经贸职业技术学院毕业论文(设计)然后用 DIV+CSS 进行排版。

首先自然映入颜面的是 logo 设计, 我用最简单的文字 和线条展示 logo;网站首页内容分两部分,左边是网站导航部分,每个标题下面 都有一句话介绍本标题;右边放了图片,美食图片吸引浏览者的眼球;网站底部 信息也只用了简单的文字展示,界面效果如图 4.4 所示。

图 4.4 页面效果根据因为浏览者在阅读时候经常采用从上到下,从左到右的习惯,主体内容 中,我将“导航”放一边, “logo”放在了上面的位置加以简短的宣传文字完美搭 配这样能更好地吸引浏览者的眼球。

底部不仅能够展示网站的各种优点,而且突 出显示出网站整体结尾的完美。

导航效果如图 4.5 所示。

第 14 页

浙江经贸职业技术学院毕业论文(设计)图 4.5 导航效果4.4.2 搜索关键字与描述 为了有利于搜索引擎的收录, 在首页专门设置了 mate 信息, 设置相关关键字 和描述。

相关代码如下: 4.5 其他界面设计 其他界面设计整体风格跟主页布局风格一致,就只是内容布局格式不一样, 更加直观、简洁明了,在任何其他界面中点击 home 图片都可回到首页界面。

第 15 页

浙江经贸职业技术学院毕业论文(设计)4.5.1 简介界面的设计制作过程 在简介界面中,点击“Previous”可退回到首页界面,点击“Next”可进入 到中式美食界面。

利用 DIV+CSS 把简介界面中的内容信息部分分为左右两个部分, 命名为 half left 和 half right,每个部分中都采用了图片加文字对本网站的信 息进行介绍。

图片是先从网上找来,再用 Photoshop 对图片进行修改处理,然后 用 a 链接形式放入界面中。

点击图片可进行相册界面。

简介界面如图 4.6 所示。

图 4.6 简介界面4.5.2 中式美食界面的设计制作过程 在中式美食界面中,点击“Previous”可退回到简介界面,点击“Next”可 进入到相册界面。

利用 DIV+CSS 把中式美食界面中的内容信息部分分为左右两个 部分,命名为 half left 和 half right。

half left 部分直接使用文字对中式美 食进行描述,此部分中还有中式美食八大菜系的分类链接,点击“浙菜系” 、 “粤 菜系” 、 “川菜系” 、 “湘菜系” 、 “闽菜系” 、 “鲁菜系” 、 “苏菜系” 、 “徽菜系”等字 样即出现相关菜系中各种菜的制作方法;half right 部分采用了图片加文字对中 式美食及中餐文化进行介绍。

图片是先从网上找来,再用 Photoshop 对图片进行 修改处理,然后用 a 链接形式放入界面中。

点击图片可进行相册界面。

中式美食 界面如图 4.7 所示。

第 16 页

浙江经贸职业技术学院毕业论文(设计)图 4.7 中式美食界面4.5.3 相册界面的设计制作过程 在相册界面中,点击“Previous”可退回到中式美食界面,点击“Next”可 进入到西式美食界面。

利用 DIV+CSS 把相册界面中的内容信息部分分为多个大小 相同的部分,每个部分中用 a 链接形式放入图片。

图片是先从网上找来,再用 Photoshop 对图片进行修改处理,然后放入界面中。

相册界面如图 4.8 所示。

图 4.8 相册界面点击任何一张图片可对图片进行放大展示,查看图片全貌。

把图片放大展示第 17 页

浙江经贸职业技术学院毕业论文(设计)后,点击图片中的“PREV”或图片的左半部分可返回上一张图片,点击图片中的 “NEXT”或图片的右半部分可进入下一张图片,点击图片右下角的“ ”或图片外的黑色部分可关闭图片放大展示,返回相册界面。

图片放大展示效果如 图 4.9-4.10 所示。

图 4.9 图片放大展示图 4.10 图片放大展示第 18 页

浙江经贸职业技术学院毕业论文(设计)4.5.4 西式美食界面的设计制作过程 在西式美食界面中,点击“Previous”可退回到相册界面,点击“Next”可 进入到联系我们界面。

利用 DIV+CSS 把西式美食界面中的内容信息部分分为左右 两个部分,命名为 half left 和 half right。

half left 部分直接使用文字对中 式美食进行描述, 此部分中还有对西式美食的分类的链接, 点击 “开胃头盘” 、 “营 养主菜” 、 “方便轻食” 、 “各类茶饮” 、 “其他”等字样即出现相关分类中各种菜的 制作方法;half right 部分采用了图片加文字对西式美食及西餐文化进行介绍。

图片是先从网上找来,再用 Photoshop 对图片进行修改处理,然后用 a 链接形式 放入界面中。

点击图片可进行相册界面。

西式美食界面如图 4.11 所示。

图 4.11 西式美食界面4.5.5 联系我们界面的设计制作过程 在联系我们界面中,点击“Previous”可退回到西式美食界面,点击“Next” 可返回到首页界面。

利用 DIV+CSS 把联系我们界面中的内容信息部分分为左右两 个部分,命名为 half left 和 half right。

half left 部分直接使用文字述字我 们的联系方式及地址;half right 部分只放了地图,点击地图可进入百度地图界 面进行查看搜索。

下面是地图部分的代码:

联系我们界面如图 4.12 所示。

图 4.12 联系我们界面百度地图界面如图 4.13 所示。

图 4.13 百度地图界面第 20 页

浙江经贸职业技术学院毕业论文(设计)结 论时至今日,论文基本完成。

从最初的茫然,到慢慢的进入状态,再到对思路 逐渐的清晰,整个写作过程难以用语言来表达。

历经了几个月的奋战,紧张而又 充实的毕业设计终于落下了帷幕。

回想这段日子的经历和感受,我感慨万千,在 这次毕业设计的过程中,我拥有了无数难忘的回忆和收获。

在与指导老师的交流讨论,对美食网站界面设计进一步规划,我便立刻着手 资料的收集工作中,当时面对浩瀚的书海真是有些茫然,不知如何下手。

在指导 老师细心的给我列了提纲,我在图书馆搜集资料,还在网上查找各类相关资料, 将这些宝贵的资料全部记在笔记本上,尽量使我的资料完整、精确、数量多,这 有利于论文的撰写。

然后我将收集到的资料仔细整理分类,及时拿给指导老师进 行沟通。

资料查找完毕后,我开始着手毕业设计及论文的写作。

开发过程中,遇到了 困难,通过查阅资料得到了部分解答。

在写作过程中遇到困难我就及时和指导老 师联系,并和同学互相交流。

在大家的帮助下,困难一个一个解决掉,论文也慢 慢成型。

论文的文字叙述已经完成。

开始进行美食网站界面设计。

为了制作出自己满 意的网站,我仔细学习了关于网页的配色、DIV+CSS 的使用等知识。

在设计网页 界面的初期,由于没有设计经验,觉得无从下手,空有很多设计思想,却不知道 应该选哪个,通过查阅资料,逐渐确立系统方案。

当我终于完成了所有打字、绘 图、排版、校对的任务后整个人都很累,但同时看着电脑荧屏上的毕业设计稿件 我的心里是甜的,我觉得这一切都值了。

这次毕业论文的制作过程是我的一次再 学习,再提高的过程。

在论文中我充分地运用了大学期间所学到的知识。

通过这段时间的毕业设计,学到了、了解到了很多东西,不仅把以前所学的 很多知识充分利用上了,还初步了解了 HTML 强大的数据库开发能力,对 HTML 的 语言进一步的了解,我体会到了网站开发不仅是编程,它需要方方面面的考虑, 同时也必须具备比较全面的知识。

我在设计过程中遇到了许多困难,最大的问题就在 DIV 浮动上,但是在指导 老师和同学的帮助下,再加上大量书籍的查阅,最终完成了设计。

这不但培养了第 21 页

浙江经贸职业技术学院毕业论文(设计)我细心和耐性,树立了一种科学的态度,还对我们以后的工作和学习有了很大的 帮助和指导。

同时我也认识到本身不存在很多不足的地方,还需要不断的努力来 充实自己完善自己,只有这样我们才能学无止境,以求得更大的发展。

致 谢我在老师的指导和同学的帮助下下圆满的完成了毕业设计,在此我衷心的感 谢我的指导老师***老师, 在百忙之中抽出时间来对我耐心的指导和帮助, 并提出 了许多宝贵的意见和建议,我的论文才得以顺利完成。

设计的这段时间里,虽然很辛苦,但使我获益非浅,我体会到自己在学习的 知识方面存在很多的欠缺,特别是在 DIV 浮动和数据库方面。

但最终在毕业设计 的制作中,还是不断的把知识慢慢加深、巩固。

在论文即将完成之际,我的心情无法平静,从开始进入课题到论文的顺利完 成,有多少可敬的师长、同学、朋友给了我无言的帮助,在这里请接受我诚挚的 谢意!第 22 页

浙江经贸职业技术学院毕业论文(设计)参考文献[1] 王征. JavaScript 网页特效实例大全. 清华大学出版社, 2006 年 9 月第一版. [2] 锐艺视觉编著.Photoshop CS3 图像合成高级技法[M].北京:中国青年出版 社,2008:3-11,29. [3] 项宇峰等.HTML 网络编程从入门到精通.清华大学出版社,2006 年. [4] 张景峰等.HTML 程序设计.高等教育出版社,2005 年 9 月. [5] 刑国春,戴金波,张晓君.基于 web 网络数据库技术探析[J].情报科学, 2001.6. [6] 赵国志,赵璐.色彩构成与绘画设计艺术[M].辽宁:美术出版社,2000. [7] 郑俊生,姜敏.基于 Div+CSS+JavaScript 的网页布局特效研究[J].电脑知识 与技术,2008.10(17). [8] 史晓燕,苏萍编著.网页设计基础(HTML,CSS 和 JavaScript) .清华大学 出版社,北京交通大学出版社,2006 年 10 月第一版.第 23 页

基于DIV+CSS技术的网站界面毕业论文 网站设计与制作(div css)--大学本科毕业论文 毕业论文(基于div+css的Tasty美食网站的界面设计) 毕业论文使用div+css开发个人网站 毕业论文(设计)-基于DIV+ CSS 的网页布局技术应用研究[J] 《网站设计指南》 第23章 基于DIV+CSS的个人网站 第23章 基于DIV+CSS的个人网站 Dreamweaver CS3 学习Html+Div+Css 第23章 基于DIV+CSS的个人网站 通过Dreamweaver CS3学习HTML+DIV+CSS 第23章 基于DIV+CSS的个人网站 PPT基于DIV+CSS的个人网站
方便路边摆摊的小吃 横店影视城小吃街在哪 小吃车卖什么手续吗 高迁金钥匙小吃培训 南昌的小吃街 旅游休闲服装效果图 手机图标更换软件好 美图秀秀mac版 男孩伤感头像图片大全2015最新版的 小僵尸图片萌萌男生