静态网页界面设计毕业论文

毕毕 业业 论论 文 设计 文 设计 题题 目目 泾县蜂产品网站界面的设计与制作 指导老师指导老师 陈炜 专业班级专业班级 阿拉丁 20111 姓姓 名名 陈凡 学学 号号 20112010149 2014 年 5 月 26 日 浙江经贸职业技术学院毕业论文 设计 第 1 页 摘要 计算机和计算机网络的飞速发展 人们对计算机网络的依赖是越来越大 尤其是 电子商务大大的减少了人们对周围环境的依赖 无论是哪里的网友 都可以浏览到世界 各地的各类信息 由于以上的优势 各类网站如雨后春笋般的出现 蜂产品公司网站也 不例外 毕业设计使用了 Photoshop Dreamweaver div css 制作了蜂产品企业网站的 界面 论文阐述了蜂产品网站的设计制作过程 主要包括市场调研 献检索 设计实践 设计自评四个部分 其中市场调研主要是通过调研知名蜂产品网站了解蜂产品网站建站 的特点和优缺点 文献检索主要介绍设计网站所使用的 Photoshop Dreamweaver div css 三个主要软件 设计实践主要具体介绍了泾县永春养 蜂专业合作社的蜂产品网站建站具体步骤和设计思路 设计自评主要总结设计作品后的 心得体会 关键词 网上蜂产品销售 网页设计 企业网页 Dreamweaver 浙江经贸职业技术学院毕业论文 设计 第 2 页 目 录 引言 1 1 市场调研 1 2 文献检索 3 2 1 网页制作软件 DREAMWEAVER 3 2 2 DIV CSS 简介 4 2 3 平面设计软件 PHOTOSHOP 4 3 设计实践 6 3 1 设计立意 6 3 2 网站结构规划 6 3 3 网站详细设计 8 3 3 1 首页设计与制作 9 3 3 2 公司新闻页制作 13 3 3 3 新闻详情页制作 13 3 3 4 产品展示页制作 14 3 3 5 产品展示详情页制作 14 3 3 6 关于我们页制作 16 3 3 7 联系我们页制作 17 3 4 创作总结 18 4 设计自评 20 参考文献 21 浙江经贸职业技术学院毕业论文 设计 第 0 页 引言 当今世界已进入信息时代 Internet 成为 21 世纪最受关注的焦点之一 它的飞 速发展和在全球范围的普及应用正在给人类生活带来革命性变化 网络技术的发 展也取得了巨大的成就 为网站开发提供了很好的技术支持 网站已经成为现阶 段众多企业不可或缺的网络营销平台 互联网应用规模正在不断扩大 其中 特 别是中小型企业 对于网络平台搭建的需求相当的迫切 因此 企业网站的建立 是一个企业在当今社会发展的必然趋势 企业网站是一个企业不可缺少的部分 它能介绍企业文化 经营理念 特色 服务及企业在全国的网点分布 拓宽顾客市场 增加企业与客户之间的联系 缩 短二者之间的距离 提高企业知名度 为企业今后的业务发展开辟一个良好的社 会环境 它的内容对于企业来说至关重要 企业概况 企业论谈 企业特色服务 最新企业新闻动态等部分应该能够为用户提供充足的信息 企业网站做成检索迅 速 查找方便 可靠性高 存储量大 保密性好 寿命长 成本低 维护方便 信息实时性强的功能完善的大型企业网站 这些优点能够极大地提高了企业网站 的效率 也是企业走向科学化 信息化与世界接轨的重要条件 在 IT 行业迅速发 展的今天 企业网站的建设已经成为一个企业发展必不可少的存在 对于创意设 计有限公司来说 必须建立一个以宣传为目的的网站类型 将于短期内强力打造 公司的宣传力度 让更多的客户了解信任公司 网站的建设 也是公司对于宣传 方面的长期投资 社会上有很多保健品宣传网站 调查研究显示 保健品企业的知名度 企业 的实力往往是和网站的制作水平成正比的 可见 保健品企业网站的建设十分重 要 它的定位以及页面的风格设计直接影响着保健品企业在网络推广应用的成败 因此保健品企业建设公司网站可是必要的 它可以帮助企业实现在线产品宣传 为用户带来更多方便和快捷 大大提高了企业的服务效率 于无形中树立起了良 好的企业形象 浙江经贸职业技术学院毕业论文 设计 第 1 页 1 市场调研 在设计蜂产品网站之前 通过对大量企业网站浏览及时调查研究 发现和比 较了几家比较典型和知名的蜂产品名企 总体定格网站设计思路 总结了各种企 业网站的特色和制作 以冠生园官网为例 其界面如图 1 1 所示 图 1 1 冠生园官网首页 冠生园作为蜂产品的行业老大 也是很多蜂产品企业仿效的对象 它的页面 设计简单 大气 整体以灰色渐变为主 突出体现蜂产品的传统风格与纯天然气 息 整体的四栏设计把需要强调的东西强调出来 而且 关于细节的 LOGO 不仅 因为颜色的反差更加突出 在整个页面多加入了 Logo 元素 是整体还有一种混 天然的感觉 将企业重点突出 冠生园主页并不是用大幅内容放置产品 而是突 出企业文化 食品安全和社会责任 这样会让更多的朋友看到企业会放心购买 蜂产品来自自然 也还给自然 客户就是上帝 冠生园以公益和责任 突出企业 浙江经贸职业技术学院毕业论文 设计 第 2 页 文化 页面右下方还加上自己的合作伙伴 LOGO 体现企业的社会影响力和名誉 也让客户一看上去就能感觉到大气 责任 有影响的名牌企业 当然 在设计方 面冠生园的主色调有些灰 不够体现绿色食品的宗旨 页面整体过于单调 过于 强调整体感 主旨不够突出 最好将公司的宣传标语放在重点位置 泾县永春养蜂专业合作社 是一家集蜂产品采购 养蜂指导 蜂产品检测 产品包装一条线的蜂产品初级企业 企业硬件发展的同时更需要软件的同步 网 络宣传是当今社会主流的宣传方式 利用网络可以让更多客户了解企业 也有利 于企业走出国门乃至世界 泾县永春养蜂专业合作社目前需要一个完善的宣传网 站 而制作网站的工具很多 如 dreamware photoshop 等等 毕业设计将借鉴 冠生园公司的网站的优点 避免其不足 用 dreamware photoshop 为泾县做一 个有特色的企业网站 让人们进一步了解蜂产品 泾蜂园和永春蜂业 2 文献检索 2 1 网页制作软件 Dreamweaver Dreamweaver 是创建和管理网页的专业化可视编辑器 使用 Dreamweaver 可 以轻松创建跨平台 跨浏览器的页面 Macromedia 的 Roundtrip HTML 技术允许 用户随意导入 HTML 文档而无需重新设置代码格式 Dreamweaver 可以为用户做到 使用动态 HTML 功能 例如具有动态效果的 层和行为 而不用写一行代码 它甚至还可以检查用户的工作成果在所有流行的 平台和浏览器中可能发生的错误 Dreamweaver 还是一个可以完全自定义的应用程序 用户可以创建自己的对 象和命令修改菜单和快捷键 甚至编写 JavaScript 代码扩展 Dreamweaver 的行为 和属性检查器 至于 Dreamweaver 工作区是非常灵活的 因此它可以适应各种不同的工作风 格和使用水平 常用的 Dreamweaver 工作区组件有以下若干种 1 文档窗口可显示当前文档 文档的外观和浏览器中看到的非常相似 2 装载器中包含一些打开和关闭常用检查器和模板的按钮 3 对象工具栏包含创建不同类型的对象 例如 图象 表格和层等 的按 浙江经贸职业技术学院毕业论文 设计 第 3 页 钮 4 属性检查器显示选定对象的属性 5 快捷菜单可以使用户对当前选择或区域快速执行某些命令 6 可固定的浮动工具栏允许用户将浮动窗口 检查器和工具栏组合在一 个或多个选择窗口中 2 2 DIV CSS 简介 DIV CSS 是网站标准 或称 WEB 标准 中常用术语之一 div css 是一 种网页的布局方法 这一种网页布局方法有别于传统的 HTML 网页设计语言中的 表格 table 定位方式 真正地达到了 w3c 内容与表现相分离 HTML 语言自 HTML4 01 以来 不再发布新版本 原因就在于 HTML 语言正变得越来越复杂化 专用化 XHTML 语言是一种可以将 HTML 语言标准化 用 XHTML 语言重写后 的 HTML 页面可以应用许多 XML 应用技术 使得网页更加容易扩展 适合自动 数据交换 并且更加规整 在 XHTML 网站设计标准中 不再使用表格定位技术 而是采用 DIV CSS 的方式实现各种定位 以下是 DIV CSS 的特点简介 1 符合 W3C 标准 微软等公司均为 W3C 支持者 这一点是最重要的 因为这保证您的网站不会因为将来网络应用的升级而被淘汰 2 支持浏览器的向后兼容 也就是无论未来的浏览器大战 胜利的是 IE7 或者是火狐 您的网站都能很好的兼容 3 搜索引擎更加友好 相对与传统的 table 采用 DIV CSS 技术的网页 对于搜索引擎的收录更加友好 4 样式的调整更加方便 内容和样式的分离 使页面和样式的调整变得 更加方便 现在 YAHOO MSN 等国际门户网站 网易 新浪等国内门户网站 和主流的 WEB2 0 网站 均采用 DIV CSS 的框架模式 更加印证了 DIV CSS 是大势所趋 5 CSS 的极大优势表现在简洁的代码 对于一个大型网站来说 可以节 省大量带宽 而且众所周知 搜索引擎喜欢清洁的代码 6 表现和结构分离 在团队开发中更容易分工合作而减少相互关联性 浙江经贸职业技术学院毕业论文 设计 第 4 页 2 3 平面设计软件Photoshop Adobe Photoshop 简称 PS 是由 Adobe Systems 开发和发行的图像处理 软件 Photoshop 主要处理以像素所构成的数字图像 是对已有的位图图像进行编 辑 加工 处理以及运用一些特殊效果 使用其众多的编修与绘图工具 可以 有效地进行图片编辑工作 ps 有很多功能 在图像 图形 文字 视频 出版等 各方面都有涉及 是专业设计人员的首选软件 Photoshop 是图像处理软件 其优 势不在图形创作 Adobe Photoshop 的适用范围很多 主要有 1 专业测评 Photoshop 的专长在于图像处理 而不是图形创作 图像处 理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果 其重点在于对 图像的处理加工 图形创作软件是按照自己的构思创意 使用矢量图形来设计图 形 2 平面设计 平面设计是 Photoshop 应用最为广泛的领域 无论是图书封 面 还招帖 海报 这些平面印刷品都需要 Photoshop 软件对图像进行处理 3 广告摄影 广告摄影作为一种对视觉要求非常严格的工作 其最终成品 往往要经过 Photoshop 的修改才能得到满意的效果 4 影像创意 影像创意是 Photoshop 的特长 通过 Photoshop 的处理 可 以将不同的对象组合在一起 使图像发生变化 5 网页制作 网络的普及是促使更多人需要掌握 Photoshop 因为在制作 网页时 Photoshop 是必不可少的网页图像处理软件 6 后期修饰 在制作建筑效果图包括许多三维场景时 人物与配景包括场 景的颜色常常需要在 Photoshop 中增加并调整 7 视觉创意 视觉创意与设计是设计艺术的一个分支 此类设计通常没有 非常明显的商业目的 但由于他为广大设计爱好者提供了设计的空间 因此越来 越多的设计爱好者开始学习 Photoshop 并进行具有个人特色与风格的视觉创意 8 界面设计 界面设计是一个新兴的领域 受到越来越多的软件企业及开 发者的重视 在当前还没有用于做界面设计的专业软件 因此绝大多数设计者使 用的都是该软件 Photoshop 的界面组成 如图 2 1 所示 浙江经贸职业技术学院毕业论文 设计 第 5 页 图 2 1 Photoshop 界面组成图 3 设计实践 3 1 设计立意 本作品为蜂产品企业网站 主要介绍泾县养蜂永春专业合作社的蜂产品 蜂 产品知识 公司企业文化 让更多的人了解泾县养蜂永春专业合作社 蜂产品 的网站需要有绿色大自然的气息 然后我做的是企业网站 不需要过多花哨的东 西点缀 采用层叠样式表的应用 使用 CSS 实现出一个完美的网站 布局方法采 用软件布局法 利用 Photoshop 软件对图像进行编辑 网页配色选用白色与灰色 的色彩搭配 来实现企业网站的简单大方 3 2 网站结构规划 泾县养蜂永春专业合作社网站界面设计的具体结构设计为以下 5 个模块 网 站总体结构图如图 3 1 所示 浙江经贸职业技术学院毕业论文 设计 第 6 页 图 3 1 网站结构图 1 企业首页网站首页体现的是一个网站的门面 也显示了企业的一些相关 的消息 是网站设计中比较重要的一部分 它以网站综合平台的形式展示整个企 业网站各部分的主体内容 是整个网站的导航 能够让浏览者在第一时间内领略 到企业特色所在 2 公司新闻主要介绍出企业最新最近的各项动态和走向 通知以及一些定 时更新的行业新闻 通过这一模块可以让客户更好的了解公司的日常运作和具体 实施项目的细节 以及公司的整体走向和发展程度 也更好是让公司内部信息的 流通和扩散 3 产品展示一般其他营销模式的企业网站都是注重产品展示来加强企业的 宣传力度 但是对于创意设计有限公司来说 没有其实际物品展示 只有展现其 出众的业绩实例才能让客户信服 才能从侧面展现出公司的实力 让客户更放心 的把业务交给公司处理 4 关于我们具体介绍出企业的背景 经营项目 荣誉资质和公司的发展史 结构 业务流程等等一系列来加大公司的宣传力度 好让客户能全面的了解公司 网 站 首 页 公司新闻 联系方式 关于我们 产品展示 公司新闻 公司动态 新闻分类 行业资讯 新闻详情 新闻详情 新闻详情 新闻详情 产品分类 产品分类 产品分类 产品分类 产品详情 产品详情 产品详情 产品详情 浙江经贸职业技术学院毕业论文 设计 第 7 页 便于树立企业形象 5 联系我们浏览者通过联系方式对我们提出意见和建议 通过这个发现我 们的不足和好的地方 要是发现我们的不好 我们也可以接收到您的宝贵意见并 给您最满意的答复 同时也是公司业务对外联系的窗口 是意向客户主动联系公 司的重要途径 3 3 网站详细设计 网站主页结构布局如图 3 2 图 3 2 首页结构图 网站相关子页结构布局如图 3 3 子页导航栏 首页 banner 栏 新闻热点产品展示联系方式 版权信息 相关链接 LOGO 浙江经贸职业技术学院毕业论文 设计 第 8 页 图 3 3 子页结构图 子页分二级页面和三级页面 整体结构与图 3 3 一样 所以在此不一一举例 3 3 1 首页设计与制作 网站首页体现的是一个网站的门面 也显示了企业的一些相关的消息 是网 站设计中比较重要的一部分 它以网站综合平台的形式展示整个企业网站各部分 的主体内容 是整个网站的导航 能够让浏览者在第一时间内领略到企业特色所 在 中间部分插入 banner 让浏览者可以看到公司企业文化核心展示的图片信息 在 banner 面板的下方分别为公司新闻 产品展示 联系方式 让浏览者可以直 接看到所需要的信息 最后 插入公司网站信息 联系方式以及站内站外链接 让客户更方便的找到自己想要的东西 首页包括网站 logo 导航栏 banner 3 个图文信息栏 底部公司信息 链 接等组件 网站的 Logo 就是网站的标志 也是互联网上各个网站用来与其他网 站链接的图形标志 由于做的蜂产品企业网站是真实存在的 即不可变更其 logo 所以引用了一个蜂蜜团的 logo 如图 3 4 所示 子页导航栏LOGO 首页 banner 栏 版权信息 相关链接 相关子页详情页产品分类 1 产品分类 2 产品分类 3 产品分类 浙江经贸职业技术学院毕业论文 设计 第 9 页 图 3 4 蜂产品 LOGO 首页背景还是突出简单 大气 主要考虑到蜂产品本身属于绿色食品 所以 选用了简单的白色为背景 导航栏主要还是用了与背景类似的颜色 简洁 明了 体现企业特色 如图 3 5 所示 图 3 5 首页导航栏 加上宋体标题后最终完成导航栏 如图 3 6 所示 图 3 6 首页导航栏效果图 首页 banner 要体现企业的高端 大气 上档次 二是要体现蜂产品特色的 风格 三是要符合整体的页面设计 具体效果如图 3 11 所示 1 首先在网上找了一个风景图片 把不需要的部分用图章工具抹去 在 进行调色 如图 3 7 所示 浙江经贸职业技术学院毕业论文 设计 第 10 页 图 3 7 图片调色 2 在网上下载一个石狮子 用钢笔抠出来 放到图中 再进行调色 如 图 3 8 所示 图 3 8 图片处理 3 整体效果定型后 整体合并调色 如图 3 9 所示 图 3 9 合并处理 4 最后加上公司字样和一只小蜜蜂体现企业为特色 如图 3 10 所示 图 3 10 添加标识 浙江经贸职业技术学院毕业论文 设计 第 11 页 图 3 11 首页 banner 而 banner 下方是三栏信息栏 分别放置新闻 产品和联系方式 3 个重要信 息 以便使用者更方便找到主要内容 如图 3 12 所示 图 3 12 信息栏 底部左侧主要还是设计了网站开发者的信息和版权 右侧主要设计了一些相 关方面的链接 如图 3 13 所示 图 3 13 底部信息栏 最后切片且保存为 index html 在相应按钮上添加链接到相应页面 首页最 终效果图 如图 3 14 所示 浙江经贸职业技术学院毕业论文 设计 第 12 页 图 3 14 首页最终效果图 其他子页效果上下部分和首页相同 在此不一一列举 3 3 2 公司新闻页制作 点击主页导航条上的公司新闻或者点击首页下方的第一个信息栏文字 就能 进入二级页面下的公司新闻页 左边放了泾县永春养蜂专业合作社的公司新闻 最新动态 行业新闻 新闻分类四个大类目 每个类目下都有具体的新闻列表 如图 3 15 所示 图 3 15 公司新闻页效果图 3 3 3 新闻详情页制作 点击主页导航条上的公司新闻或者点击相关子页主题新闻 就能进入三级页 面下的新闻详情页 左边放了泾县永春养蜂专业合作社的公司新闻 最新动态 浙江经贸职业技术学院毕业论文 设计 第 13 页 行业新闻 新闻分类四个大类目 右边详细新闻 如图 3 16 所示 图 3 16 新闻详情页效果图 3 3 4 产品展示页制作 点击主页导航条上的产品展示或者首页下方的第二个信息栏文字 图片 就 能进入二级页面下的产品展示页 左边放了泾县永春养蜂专业合作社的产品分类 四个大类目 右边产品图片和详情介绍 具体效果如图 3 17 所示 3 3 5 产品展示详情页制作 点击展品展示页上的产品或者主题或者首页下方的第二个信息栏文字 图片 就能进入三级页面下的产品展示详情页 左边放了泾县永春养蜂专业合作社的产 品分类四个大类目 右边具体产品图片详情介绍 具体效果如图 3 18 所示 浙江经贸职业技术学院毕业论文 设计 第 14 页 图 3 17 产品展示页效果图 浙江经贸职业技术学院毕业论文 设计 第 15 页 图 3 18 产品图片详情页效果图 3 3 6 关于我们页制作 点击主页导航条上的关于我们 就能进入二级页面下的关于我们页 左边 放了泾县永春养蜂专业合作社的公司新闻 最新动态 行业新闻 新闻分类四个 大类目 右边就是永春公司的公司简介 具体效果如图 3 19 所示 浙江经贸职业技术学院毕业论文 设计 第 16 页 图 3 19 关于我们页效果图 3 3 7 联系我们页制作 点击主页导航条上的联系我们或者主题或者首页下方的第三个信息栏文字 就能进入二级页面下的联系我们页 左边放了泾县永春养蜂专业合作社的公司新 闻 最新动态 行业新闻 新闻分类四个大类目 右边就是永春公司的联方式 如图 3 20 所示 浙江经贸职业技术学院毕业论文 设计 第 17 页 图 3 20 联系我们页效果图 其他详情页面的结构和制作过程与图 3 20 相同 在此不一一举例 3 4 创作总结 经过为期半年的实习 在不懈的努力下终于完成了 从刚开始接触报告的时 候到现在全部完成 虽然时间不是很长 但是所做的工作还是很多的 在课程设 计的过程中 我不断地从讨论 分析到整理 到最终的完成稿 在其中我们花费 的精力虽然很多 但是坚持的精神得到了最大的体现 学习电子商务的这几年 经历过的网站制作工具有很多 比如说 Dreamweaver Fireworks Flash FrontPage 还有 Photoshop 但从来也没有 深入而系统的认识和了解 更谈不上如何去分析 如何去整理和归纳 除了作业 中自己摸索 了解 运用这些软件 其他更深层次的软件的更是从来没有涉及过 所以不做深层的了解 设计下来 我觉得收获很多 不仅对于制作网页的软件有 一个全新的认识 并且在系统设计的技术方面也有了质的飞跃 关于这次总结 先从网站的页面设计说起 在设计过程中 注意到对于电子 浙江经贸职业技术学院毕业论文 设计 第 18 页 商务网站 BtoC 还是诸多好评的 单单从方便角度出发 已经是一个很重要的优 点了 页面设计过程的时候 有些页面设计的填写 可详尽可简略 凸显主题 不是很能体现出这次调查的全面性 页面设计的很好 但从某些方面不是很完善 但是对于这次我觉得我们做的很尽心 我们努力的选择不同风格的页面去设计 并且在网页设计中 我们尽量的全面的问及我们所能涉及的问题 我们发现我们 的获益很多 不仅仅单纯从问卷调查的过程 更从讨论中 汇总中我们了解了更 多的知识 也全面提高我们对问题的分析能力 这次网站设计 我总结了几点 1 确定网站主题 对于内容主题的选择 要 做到小而精 主题定位要小 内容要精 不要去试图制作一个包罗万象的站点 这往往会失去网站的特色 也会带来高强度的劳动 给网站的及时更新带来困难 2 掌握建网工具 在制作网页的时候 一定要熟练掌握软件的运用 要不断 的摸索 对于细节的处理 我们需要做很多东西 只有不断的练习 才会更好的 运用软件 3 确定网站界面 网站的题材确定后 就要将收集到的资料内容 作一个合理的编排 尽可能删除那些与主题无关的栏目 尽可能将网站内最有价 值的内容列在栏目上 尽可能从访问者角度来编排栏目以方便访问者的浏览和查 询 辅助内容 如站点简介 版权信息 各板块要有相对独立性 各板块要有相 互关联 各板块的内容要围绕站点主题 按栏目内容建立子目录 子目录的建立 首先按主栏目建立 友情连接内容较多 需要经常更新的可以建立独立的子目录 而一些相关性强 不需要经常更新的栏目 例如 网站简介 站长情况等可以合 并放在一个统一目录下 所有程序一般都存放在特定目录 在每个主目录下都建 立独立的 Images 目录 一般来说 一个站点根目录下都有一个默认地 Images 目 录 将所有图片都存放在这个目录里很是不方便 比如在栏目删除时 图片的管 理相当麻烦 所以为每个主栏目建立一个独立的 Images 目录是方便管理的 原 因很简单 就是方便维护与管理 4 确定网站风格 风格 是抽象的 是 指站点的整体形象给浏览者的综合感受 这个 整体形象 包括站点的 CI 标志 色彩 字体 标语 版面布局 浏览方式 交互性 文字 语气 内容价值等 等诸多因素 网站可以是平易近人的 生动活泼的也可以是专业严肃的 不管是 色彩 技术 文字 布局 还是交互方式 只要你能由此让浏览者明确分辨出这 是你网站独有的 这就形成了网站的 风格 风格是有人性的 通过网站的色彩 浙江经贸职业技术学院毕业论文 设计 第 19 页 技术 文字 布局 交互方式可以概括出一个站点的个性 是粗犷豪放的 还是 清新秀丽的 是温文儒雅的 还是执著热情的 是活泼易变的 还是墨守成规的 最后来说说自己的日记以及个人总结的撰写 在刚开始写日记的时候 感觉 思绪很匮乏 不知道该写些什么 虽然一天做的事很多 但是总感觉是流水账 在慢慢的几天适应以后 发现对于课程设计的体会越来越多 虽然在字数方面变 化不大 但对于自己的体会感觉真的多了不少 也感觉到了在合作时完成任务的 兴奋感和自己独立完成任务的感觉是不同的 在自己完成任务的时候 感觉很充 实 但是我想一个人做事 涉及面不会是很广但是都融汇了自己的看法 也是一 种突破 在此 我对此次课程