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

 时间:2014-06-06 19:50:15 贡献者:spcjl921528

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

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

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

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

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

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

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

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

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

本文的主要内容集中在:对网站界面制作 过程的详细描述,对 div+css 布局进行讨论,并对网站开发过程中使用的开发工 具和技术做了简要的介绍。

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

浙江经贸职业技术学院毕业论文(设计)目录引 言 ..................................................................1 1 市场调研 ..............................................................1 1.1 网站开发背景和需求 ........................................... 1 1.2 同类型网站的分析 ............................................. 2 2 文献检索 ..............................................................3 2.1 css 样式编写规则 .............................................. 3 2.2 div+css 布局方式 .............................................. 4 2.3 JavaScript 编写规则 ........................................... 5 2.4 网站配色方案 ................................................. 5 3 设计实践 ..............................................................5 3.1 设计立意 ..................................................... 5 3.2 创作过程 ..................................................... 6 3.2.1 美食网站类主题与版面的分析 .............................. 7 3.2.2 美食网站效果图的设计与制作 .............................. 8 3.2.3 界面元素的制作过程 ...................................... 9 3.2.4 首页界面的制作过程 ..................................... 10 3.2.5 简介界面的制作过程 ..................................... 14 3.2.6 中式美食界面的制作过程 ................................. 14 3.2.7 相册界面的制作过程 ..................................... 15 3.2.8 西式美食界面的制作过程 ................................. 17 3.2.9 联系我们界面的制作过程 ................................. 18 3.3 制作中遇到的问题和解决方法 .................................. 20 4 网站的测试 ..........................................................20 结 论 .................................................................22 致谢 ...................................................................23 参考文献 ...............................................................24第 1 页

浙江经贸职业技术学院毕业论文(设计)引 言随着信息时代的来临,IT 行业已经成为现今最受关注的行业之一,它发展飞 速且在全球范围内广泛、普及应用,人类的生活因此有了革命性的变化。

同时, 网络技术的发展也取得了卓越的成就,为网站开发、界面设计等奠定了坚实的基 础。

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

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

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

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

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

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

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

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

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

设计开发此美食网站最基本的意义,就是能够尽可能详细地展示、介绍各种第 1 页

浙江经贸职业技术学院毕业论文(设计)美食信息,同时提供美食爱好者一个交流的平台,使得更多的美食传统做法得到 推广,也可激发更多美食创意的产生。

1.2 同类型网站的分析 美食网站越来越多,这说明了人们对美食的需求也越来越多。

本人在设计之 前对同类型网站进行了调研。

首先对中华美食网进行分析,中华美食网首页如图 1.1 所示。

图 1.1 中华美食网首页中华美食网首页事个页面采用黄色为背景,导航图片简洁明了,色彩简单, 网站多以文字加以图片展示,多采用 a 链接,内容包涵广,加了滚动图片,动感 十足。

头部的 logo 简洁大方,在中规中矩的美食网站中,中华美食网的首页布局 紧凑且信息量大,图文并茂又不显杂乱。

接着又分析了美食天下网站,该网站首页截图如图 1.2 所示。

第 2 页

浙江经贸职业技术学院毕业论文(设计)图 1.2 美食天下网站首页不同于中华美食网的内容繁多,美食天下网站事个首页内容较少,事个版面 更显清晰整洁,背景采用裸粉色,看过去更为清爽。

导航利用 div+css 在大导航 下加了子导航,鼠标移上去时会显示不同的文字信息。

不过与中华美食网设计相 同的是,该网站也是以黄色为导航背景,内容种类多,版面紧凑。

2 文献检索本次设计是遵循 web 标准规范,在 dreamweaver 中利用 div+css,并在文本 文档中编写 JavaScript 代码的形式完成事个网站界面的设计。

此外网站的色彩搭 配方面也需要格外注意,因此分别对 css 样式编写的规则、div+css 布局方式、 JavaScript 的编写规则和网页色彩搭配方案做了相关检索。

2.1 css 样式编写规则 css 类型中,内联式是指直接在 html 标签后写样式代码。

而嵌入式就是对本 文件内所有的该类型的标签名运用这样的样式,但该样式的标签要放在 head 中。

嵌入式样式表解决了同一个文件内使用同样样式的多个标签的代码重用,当 接触到有很多个文件组成的网站,如果这些独立的网页文件要使用统一的风格, 就需要使用外部样式表。

建立后缀名.css 的文本文件。

在使用时,在引用该样式第 3 页

浙江经贸职业技术学院毕业论文(设计)表的网页文件内的 head 标签中使用 link 标签来引入。

css 规则由两个主要的部分构成:选择器,以及一条或多条声明。

选择器通 常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性 (property)是希望设置的样式属性(style attribute) 。

每个属性有一个值。

属性和值被冒号分开。

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

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

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

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

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

其中的内容,就是血肉。

要入手设计一个网站。

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

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

浙江经贸职业技术学院毕业论文(设计)2.3 JavaScript 编写规则 JavaScript 程序应独立保存在后缀名为.js 的文件中。

JavaScript 代码不应该被包含在 HTML 文件中,除非这是段特定只属于此部 分的代码。

在 HTML 中的 JavaScript 代码会明显增加文件大小,而且也不能对其 进行缓存和压缩。

应尽量放到 body 的后面。

这样可以减少因为载 入 script 而造成其他页面内容载入也被延迟的问题。

缩进的单位为四个空 格。

避免每行超过 80 个字符。

在运算符号,最好是逗号后换行。

下一行应该缩 进 8 个空格。

及时地更新注释也很重要。

错误的注释会让程序更加难以阅读和理 解。

单行注释的符号是“//” , 多行注释以"/*"开始,以"*/"结束。

所有的变量 必须在使用前进行声明。

将 var 语句放在函数的首部。

2.4 网站配色方案 同色系方案是选择彼此相邻的几种颜色构成的配色方案。

例如橙色、橙红色 以及橙黄色就可以组成一个同色系方案。

使用同色系配色方案可以给人非常协调 的感觉,因此在网站设计中非常常用。

典型的运用方法就是,用一种颜色作为页 面背景,而另外一种在颜色环中与其相邻的颜色作为前景色。

互补色方案则是互补色方案的配置。

虽然略显繁琐,但是在现在的网站设计 中非常流行,因为互补色适合于制作活泼时尚的效果,可以让网站魅力四射。

另外,在 photoshop 中,要想构造一个三色方案也是非常容易。

首先选中一 种颜色,记下他的 H(Hue)值,然后为这个值加 120 以此类推得到第三种颜色, 构成一个三色方案。

三色方案中使用了三种彼此之间差别明显的颜色, 因此页面 显得相当不稳定,是一种可以带来比较另类的感觉的配色方案,将给予浏览者某 种紧张感,这是因为这三种颜色均对比强烈。

3 设计实践3.1 设计立意 在中国传统文化教育中的阴阳五行哲学思想、儒家伦理道德观念、中医营养第 5 页

浙江经贸职业技术学院毕业论文(设计)养生学说,还有文化艺术成就、饮食审美风尚、民族性格特征诸多因素的影响下, 创造出彪炳史册的中国烹饪技艺,形成博大精深的中国饮食文化。

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

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

由于本人偏爱美食,时常关注美食信息,也因为所处的软件专业,平时对网 站设计和 HTML 编写等方面有一定的熟悉度, 借着此次制作毕业作品的机会, 为美 食设计一个版式新颖的网站,作为此论文的依据。

本次网站的制作主题确定为简洁型。

整个网站以图片为主,减少文字。

网页 主要以黑色为背景,灰色为辅,以达到清新整洁的页面效果。

各页面之间布局力求工整合理,内容表达清晰。

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

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

3.2 创作过程 利用 Photoshop 制作出网页效果图,再参考另外的一些美食网站,如中华美 食网、美食天下等网站定下框架布局,考虑美食网站的 logo 设计。

网上搜集素材并下载, 图片素材分类取名统一保存在 images 文件夹下, 下载 搜集图片如图 3.1 所示。

第 6 页

浙江经贸职业技术学院毕业论文(设计)图 3.1 图片搜集截图有关介绍美食网站的文字素材复制并保存在 meishi.txt 中,文字资料如图 3.2 所示。

图 3.2 文字资料截图创建页面,做好首页及子页的命名,为样式、脚本分类创建文件夹。

结合 photoshop 软件制作效果图,利用 photoshop 软件实现某些元素的裁剪 及取材。

3.2.1 美食网站类主题与版面的分析 在美食网站整体版面布局中,需要更多运用 css 样式、HTML 代码和 div+css 布局使网站清爽简洁。

需要达到的要求: (1)色彩轻快,版面清爽,搭配合理 由于是美食类网站,所以版面不宜生硬死板,不宜过于花哨缭乱,但也要注第 7 页

浙江经贸职业技术学院毕业论文(设计)意整体格局。

采用明亮清晰色彩、板块布局工整。

主题风格偏向清爽整洁,网页 主要以黑色为背景,灰色为辅。

文字颜色以白色为主。

采用 12 像素的正文宋体。

(2)版面合理,页面链接无误。

为避免布局过于混乱,各个 div 之间的位置间距要控制得当,代码的正确应 用,HTML 与 css 的简洁书写,使之有更丰富的动画效果,此外也要保证页面间的 链接完整。

3.2.2 美食网站效果图的设计与制作 美食网站效果图由网上模板下载所得,在 photoshop 软件中打开,首页模板 效果如图 3.3 所示。

图 3.3 首页效果图banner 部分不做修整,导航部分主要是后面在 dreamweaver 中修改文字,只 把内容信息的右边部分全部改为图片模式,如图 3.4 所示。

第 8 页

浙江经贸职业技术学院毕业论文(设计)图 3.4 首页效果图子页整体布局继承首页布局,只在内容信息部分异于首页。

子页模版效果图 如图 3.5 所示。

图 3.5 子页效果图子页布局不做修改。

3.2.3 界面元素的制作过程 界面元素的制作包括网站中用到的所有图片,如导航图、logo 图等。

把所有 图片依次使用 photoshop 进行修整、取材。

背景需要透明的图片保存为*.png 格第 9 页

浙江经贸职业技术学院毕业论文(设计)式,其他图片匀保存为*.jpg。

由于本网 站导 航栏除 了几个数 字图 片外没 再放其他 图片 ,所以 只需在 dreamweaver 中布局后加入文字即可。

3.2.4 首页界面的制作过程 首先建立站点,站点下新建 images、css、js、data 四个文件夹,文字搜集 的素材归于 meishi.txt 中, 图片素材的搜集与自己设计处理过的图片都统一放在 images 文件夹内。

另外控制样式的 style 和 slimbox 两个文件放入 css 文件夹内, init、 jquery.localscroll-min、 jquery.min、 jquery.scrollTo-min 和 slimbox2 五个 js 文件放入 js 文件夹内,数据库文件放入 data 文件夹中。

创建首页,初建 header、main_wrapper、footer 上中下三大版块,其中在 header 中再插入 site_title,输入网站标题,如图 3.6 所示。

图 3.6 site_title 效果图中间区块分为左右两个版块,依次命名为 home_box left、home_box right。

左边为导航区块,右边为网站展示图区块。

导航区块利用 div+css 平均布局为四 块, 每块中都使用 a 链接加入相应图片, 输入导航文字, 导航文字大小设置为 h2, 颜色为白色并给导航文字设置链接,去下划线,点击导航文字进入相应界面;右 边部分利用 div+css 平均分为六个区块,每个区块都使用 a 链接加入展示图,点 击任何一张展示图都可进行放大显示。

首页界面中内容信息部分的效果如图 3.7 所示。

第 10 页

浙江经贸职业技术学院毕业论文(设计)图 3.7 首页内容效果图导航区块中的效果为鼠标移到导航上时,当前鼠标所在的导航项目栏的背景 色加深,移开后又恢复。

导航区块的代码如下:

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.
第 11 页

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

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.
导航区块具体效果图如图 3.8 所示。

图 3.8 导航效果图首页界面内容信息部分展示图代码如下:

首页界面展示图放大后,点击“PREV”或图片的左半部分可返回上一张展示 图的放大界面,点击“NEXT”或图片的右半部分可进入下一张展示图的放大界面, 八张展示图可循环显示,点击图片右下角的“ ”或图片外的黑色部分可关闭图片放大展示,返回首页界面。

首页界面展示图放大后的效果图如图 3.9 所 示。

图 3.9 首页展示图放大效果图第 13 页

浙江经贸职业技术学院毕业论文(设计)3.2.5 简介界面的制作过程 此界面除了 header 与 footer 部分沿袭首页, 中间的 main_wrapper 部分主要 由两部分构成。

首先是此界面的标题部分,使用简单文字书写,字体大小为 h1, 颜色为白色;然后是此界面的内容信息,内容信息利用 div+css 分为两个部分, 两个部分的布局是一样的,都是由图片和解说文字两部分组成。

图片使用类 img_border{ background: #525252; padding: 4px; border: 1px solid #282828 }和类 img_fl { float: left; margin: 3px 15px 5px 0 }进行 设置,用 a 链接载入图片。

点击简介界面中的 home 图片可返回首页界面,点击“Previous”可退回到首 页界面,点击“Next”可进入中式美食界面。

简介界面的效果图如图 3.10 所示。

图 3.10 简介界面3.2.6 中式美食界面的制作过程 中式美食界面沿用了简介界面的布局,标题文字大小为 h1,颜色为白色。

不 同点是在中式美食界面中, 内容信息中的左边部分去掉了图片, 加入了超级链接。

使用 a 链接介绍中式美食八大菜系。

图片使用类 img_border{ background: #525252; padding: 4px; border: 1px solid #282828 }和类 img_nom { display: block; margin-bottom: 15px }进行 设置,用 a 链接载入图片。

点击中式美食界面中的 home 图片可返回首页界面,点击“Previous”可返回第 14 页

浙江经贸职业技术学院毕业论文(设计)简介界面,点击“Next”可进入相册界面。

中式美食界面的效果图如图 3.11 所示。

图 3.11 中式美食界面3.2.7 相册界面的制作过程 此界面除了 header 与 footer 部分沿袭首页, 中间的 main_wrapper 部分主要 由两部分构成。

首先是此界面的标题部分,使用简单文字书写,字体大小为 h1, 颜色为白色;第二部分利用 div+css 平均划分,各区块都使用 a 链接载入图片。

图片使用类 section {position:relative;float:left;width: 800px;height: 480px;margin-right: 20px;background: #3c3b3b;}进行设置。

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

把图片放大展示 后,点击图片中的“PREV”或图片的左半部分可返回上一张图片,点击图片中的 “NEXT”或图片的右半部分可进入下一张图片,点击图片右下角的“ 或图片外的黑色部分可关闭图片放大展示,返回相册界面。

点击相册界面中的 home 图片可返回首页界面,点击“Previous”可返回到中 式美食界面,点击“Next”可进入西式美食界面。

相册界面的效果图如图 3.12 所示。

”第 15 页

浙江经贸职业技术学院毕业论文(设计)图 3.12 相册界面相册界面图片放大后的效果图如图 3.13、图 3.14 所示。

图 3.13 图片放大展示第 16 页

浙江经贸职业技术学院毕业论文(设计)图 3.14 图片放大展示3.2.8 西式美食界面的制作过程 西式美食界面沿用了中式美食界面的布局, 标题文字大小为 h1, 颜色为白色。

使用 a 链接介绍西式美食不同类别的菜式。

图片使用类 img_border{ background: #525252; padding: 4px; border: 1px solid #282828 }和类 img_nom { display: block; margin-bottom: 15px }进行 设置,用 a 链接载入图片。

点击西式美食界面中的 home 图片可返回首页界面,点击“Previous”可返回 到相册界面,点击“Next”可进入联系我们界面。

西式美食界面的效果图如图 3.15 所示。

第 17 页

浙江经贸职业技术学院毕业论文(设计)图 3.15 西式美食界面3.2.9 联系我们界面的制作过程 联系我们界面也是沿用了中式美食界面的布局,标题文字大小为 h1,子标题 文字大小为 h3, 颜色均为白色。

内容信息部分分为两块, 命名为 half left 和 half right。

half left 部分直接使用文字述字我们的联系方式及地址,此部分中还有 可进入到留言板界面的链接,点击蓝色字样“here”便可进入到留言板界面中; half right 部分只放了地图,点击地图可进入百度地图界面进行查看搜索。

地图图片使用类 img_border{ background: #525252; padding: 4px; border: 1px solid #282828 }和类 img_nom { display: block; margin-bottom: 15px } 进行设置,用 a 链接载入图片。

点击联系我们界面中的 home 图片可返回首页界面,点击“Previous”可返回 到西式美食界面,点击“Next”可进入到首页界面。

地图部分的代码如下:

联系我们界面的效果图如图 3.16 所示。

图 3.16 联系我们界面点击地图进入百度地图搜索查询界面。

百度地图界面如图 3.17 所示。

图 3.17 百度地图界面第 19 页

浙江经贸职业技术学院毕业论文(设计)3.3 制作中遇到的问题和解决方法 (1)图片的保存。

此问题出现在网站导航区块中的图片制作方面,在 photoshop 中做完图片, 直接保存为 jpg 格式,出来的图片背景是白色的,而需要的图片背景是透明的, 后来百度发现,保存的需要是 png 格式,出来的图片背景才会是透明的。

(2)div 浮动。

在相册界面中排版问题困扰了很久,自己想要的效果是四张图片并排排列, 但是写完代码后图片总是或斜或竖,后来经过反复多次调整代码发现:把四张图 片分为两个部分,再在各个部分中再分为两个子部分,每个部分中的左边部分设 置 float:left,右边部分设置 float:right 即可实现。

(3)脚本的逻辑书写。

最难的就是脚本的书写,有些比较难以理解,而且最容易出差错。

有些在页 面打开时就要加载,需要在 body 里输代码。

(4)网站色彩搭配。

本人最不擅长的就是色彩搭配,刚开始想得很完美,但做出来的效果图总是 怪怪的,多次失败后,索性就减少色彩的使用,最终网站以黑色为主,灰色为辅, 文字颜色都为白色。

整体效果图出来后,总体感觉清晰明了、简单大气。

(5)路径的设置。

刚开始根本没注意到路径的设置,做完网页后在浏览时发现有些内容总是不 对,这才发现那些内容设置成了绝对路径。

4网站的测试编码完成后,就要对源程序进行测试。

软件测试的目的在于争取在第一时间发现程序中的错误,以便于及时纠错,增加软件可靠性。

它在整个系统设计实施 过程中占有相当的分量。

测试是软件开发时期的最后一个阶段,也是软件质量保 证中至关重要的一个环节。

测试的目的是为了尽可能的发现程序中存在的错误,其任务就是消除网站故 障,保证程序的可靠运行,最终把一个高质量的网站系统交给用户使用。

一般来第 20 页

浙江经贸职业技术学院毕业论文(设计)说在每个模块完成之后就要对它作必要的测试,这种测试被称为单元测试,模块 的测试者也就是编写者。

编码和单元测试属于网站生命周期的同一阶段。

这个阶 段结束之后,对网站系统还应该进行各种综合测试,这是网站生命周期的另一个 独立的阶段,由专门的测试人员承担。

在网页中的测试阶段主要是对网站进行浏览器兼容性测试。

在网页测试的阶段我 分别安装了 IE8、火狐、搜狗、等浏览器,并且进行了逐个测试。

在多次实践中 或多或少都遇到了不可调节的 DIV 浮动问题,但是最后还是在老师的指导和书籍 查阅后,嵌入表格完成了页面设计,使页面在各个浏览器中显示正常。

第 21 页

浙江经贸职业技术学院毕业论文(设计)结 论2014 年 2 月,我开始了我的毕业论文工作,时至今日,论文基本完成。

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

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

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

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

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

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

4 月初,资料已经查找完毕了,我开始着手毕业设计及论文的写作。

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

最遗憾的是还是不能独立完 成数据库设计方面的技术。

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

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

4 月底,论文的文字叙述已经完成。

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

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

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

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

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

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

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

第 22 页

浙江经贸职业技术学院毕业论文(设计)我在设计过程中遇到了许多困难,最大的问题就在 DIV 浮动上,但是在指导 老师和同学的帮助下,再加上大量书籍的查阅,最终完成了设计。

这不但培养了 我细心和耐性,树立了一种科学的态度,还对我们以后的工作和学习有了很大的 帮助和指导。

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

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

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

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

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

浙江经贸职业技术学院毕业论文(设计)参考文献[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 月第一版.第 24 页

基于DIV+CSS技术的网站界面毕业论文 基于div+css的Tasty美食网站的界面设计--毕业论文 《网站设计指南》 第23章 基于DIV+CSS的个人网站 网站设计与制作(div css)--大学本科毕业论文 第23章 基于DIV+CSS的个人网站 Dreamweaver CS3 学习Html+Div+Css 第23章 基于DIV+CSS的个人网站 通过Dreamweaver CS3学习HTML+DIV+CSS 第23章 基于DIV+CSS的个人网站 Dreamweaver学习HTML+DIV+CSS教学PPT第23章__基于DIV+CSS的个人网站 PPT基于DIV+CSS的个人网站 通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第23章 基于DIV+CSS的个人网站
css框架毕业设计怎么在cssci发表论文tasty treattaste的中文css论文tasty的意思divcss布局经典实例css网页开发positioncss5羊肉串怎么烤 红马甲炒股软件 香椿炒鸡蛋 内蒙古婚宴菜谱 食之契约菜谱格瑞洛 老虎兔子情侣卡通头像简笔画图片大全可爱图片 天猫直通车图尺寸 qq头像科比高清头像大全 海盗来了个岛完整图片 微信上想你的表情图片