毕 业 文(设计)
题 目 泾县蜂产品网站界面设计制作
指导老师
专业班级
姓 名
学 号
20XX 年 5 月 26 日
摘:计算机计算机网络飞速发展计算机网络赖越越尤电子商务减少周围环境赖里网友浏览世界类信息优势类网站雨春笋般出现蜂产品公司网站例外毕业设计PhotoshopDreamweaverdiv+css制作蜂产品企业网站界面文阐述蜂产品网站设计制作程包括市场调研献检索设计实践设计评四部分中市场调研通调研知名蜂产品网站解蜂产品网站建站特点优缺点文献检索介绍设计网站PhotoshopDreamweaverdiv+css三软件设计实践具体介绍泾县永春养蜂专业合作社蜂产品网站建站具体步骤设计思路设计评总结设计作品心体会
关键词:网蜂产品销售网页设计企业网页 Dreamweaver
目 录
引言 1
1 市场调研 1
2 文献检索 3
21网页制作软件 DREAMWEAVER 3
22 DIV+CSS简介 4
23 面设计软件PHOTOSHOP 4
3 设计实践 6
31设计立意 6
32 网站结构规划 6
33网站详细设计 8
331 首页设计制作 9
332 公司新闻页制作 13
333 新闻详情页制作 13
334 产品展示页制作 14
335 产品展示详情页制作 14
336 关页制作 16
337 联系页制作 17
34创作总结 18
4 设计评 20
参考文献 21
引言
世界已进入信息时代Internet成21世纪受关注焦点飞速发展全球范围普应正类生活带革命性变化网络技术发展取巨成网站开发提供技术支持网站已成现阶段众企业缺网络营销台互联网应规模正断扩中特中型企业网络台搭建需求相迫切企业网站建立企业社会发展必然趋势
企业网站企业缺少部分介绍企业文化营理念特色服务企业全国网点分布拓宽顾客市场增加企业客户间联系缩短二者间距离提高企业知名度企业业务发展开辟良社会环境容企业说关重企业概况企业谈企业特色服务新企业新闻动态等部分应该够户提供充足信息企业网站做成检索迅速查找方便性高存储量保密性寿命长成低维护方便信息实时性强功完善型企业网站优点够极提高企业网站效率企业走科学化信息化世界接轨重条件IT行业迅速发展天企业网站建设已成企业发展必少存创意设计限公司说必须建立宣传目网站类型短期强力造公司宣传力度更客户解信公司网站建设公司宣传方面长期投资
社会保健品宣传网站调查研究显示保健品企业知名度企业实力网站制作水成正见保健品企业网站建设十分重定位页面风格设计直接影响着保健品企业网络推广应成败保健品企业建设公司网站必帮助企业实现线产品宣传户带更方便快捷提高企业服务效率形中树立起良企业形象
1 市场调研
设计蜂产品网站前通量企业网站浏览时调查研究发现较家较典型知名蜂产品名企总体定格网站设计思路总结种企业网站特色制作冠生园官网例界面图11示
图11 冠生园官网首页
冠生园作蜂产品行业老蜂产品企业仿效象页面设计简单气整体灰色渐变突出体现蜂产品传统风格纯天然气息整体四栏设计需强调东西强调出关细节LOGO仅颜色反差更加突出整页面加入Logo元素整体种混天然感觉企业重点突出冠生园页幅容放置产品突出企业文化食品安全社会责样会更朋友企业会放心购买蜂产品然然客户帝冠生园公益责突出企业文化页面右方加合作伙伴LOGO体现企业社会影响力名誉客户感觉气责影响名牌企业然设计方面冠生园色调灰够体现绿色食品宗旨页面整体单调强调整体感旨够突出公司宣传标语放重点位置
泾县永春养蜂专业合作社家集蜂产品采购养蜂指导蜂产品检测产品包装条线蜂产品初级企业企业硬件发展时更需软件步网络宣传社会流宣传方式利网络更客户解企业利企业走出国门世界泾县永春养蜂专业合作社目前需完善宣传网站制作网站工具dreamware photoshop等等毕业设计鉴冠生园公司网站优点避免足dreamware photoshop泾县做特色企业网站进步解蜂产品泾蜂园永春蜂业
2 文献检索
21网页制作软件 Dreamweaver
Dreamweaver创建理网页专业化视编辑器Dreamweaver轻松创建跨台跨浏览器页面MacromediaRoundtrip HTML技术允许户意导入HTML文档需重新设置代码格式
Dreamweaver户做:动态HTML功(例具动态效果层行)写行代码甚检查户工作成果流行台浏览器中发生错误
Dreamweaver完全定义应程序户创建象命令修改菜单快捷键甚编写JavaScript代码扩展Dreamweaver行属性检查器
Dreamweaver工作区非常灵活适应种工作风格水常Dreamweaver工作区组件干种:
(1)文档窗口显示前文档文档外观浏览器中非常相似
(2)装载器中包含开关闭常检查器模板钮
(3)象工具栏包含创建类型象(例 图象表格层等)钮
(4)属性检查器显示选定象属性
(5)快捷菜单户前选择区域快速执行某命令
(6)固定浮动工具栏允许户浮动窗口检查器工具栏组合选择窗口中
22 DIV+CSS简介
DIV+CSS网站标准(称WEB标准)中常术语div+css 种网页布局方法种网页布局方法传统HTML网页设计语言中表格(table)定位方式真正达w3c容表现相分离HTML语言HTML401发布新版原HTML语言正变越越复杂化专化XHTML语言种HTML语言标准化XHTML语言重写HTML页面应许XML应技术网页更加容易扩展适合动数交换更加规整XHTML网站设计标准中表格定位技术采DIV+CSS方式实现种定位DIV+CSS特点简介:
(1)符合W3C标准微软等公司均W3C支持者点重保证您网站会网络应升级淘汰
(2)支持浏览器兼容未浏览器战胜利IE7者火狐您网站兼容
(3)搜索引擎更加友相传统table 采DIV+CSS技术网页搜索引擎收录更加友
(4)样式调整更加方便容样式分离页面样式调整变更加方便 现YAHOOMSN等国际门户网站网易新浪等国门户网站流WEB20网站均采DIV+CSS框架模式更加印证DIV+CSS势趋
(5)CSS极优势表现简洁代码型网站说节省量带宽众周知搜索引擎喜欢清洁代码
(6)表现结构分离团队开发中更容易分工合作减少相互关联性
23 面设计软件Photoshop
Adobe Photoshop简称PSAdobe 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界面组成图21示
图21 Photoshop界面组成图
3 设计实践
31设计立意
作品蜂产品企业网站介绍泾县养蜂永春专业合作社蜂产品蜂产品知识公司企业文化更解泾县养蜂永春专业合作社 蜂产品网站需绿色然气息然做企业网站需花哨东西点缀采层叠样式表应CSS实现出完美网站布局方法采软件布局法利Photoshop软件图进行编辑网页配色选白色灰色色彩搭配实现企业网站简单方
32 网站结构规划
泾县养蜂永春专业合作社网站界面设计具体结构设计5模块网站总体结构图图31示
新闻详情
公司新闻
公司新闻
新闻详情
公司动态
新闻详情
新闻分类
新闻详情
行业资讯
网
站
首
页
产品详情
产品分类
产品展示
产品详情
产品分类
产品详情
产品分类
产品详情
产品分类
关
联系方式
图31 网站结构图
(1)企业首页网站首页体现网站门面显示企业相关消息网站设计中较重部分网站综合台形式展示整企业网站部分体容整网站导航够浏览者第时间领略企业特色
(2)公司新闻介绍出企业新项动态走通知定时更新行业新闻通模块客户更解公司日常运作具体实施项目细节公司整体走发展程度更公司部信息流通扩散
(3)产品展示般营销模式企业网站注重产品展示加强企业宣传力度创意设计限公司说没实际物品展示展现出众业绩实例客户信服侧面展现出公司实力客户更放心业务交公司处理
(4)关具体介绍出企业背景营项目荣誉资质公司发展史结构业务流程等等系列加公司宣传力度客户全面解公司便树立企业形象
(5)联系浏览者通联系方式提出意见建议通发现足方发现接收您宝贵意见您满意答复时公司业务外联系窗口意客户动联系公司重途径
33网站详细设计
网站页结构布局图32
子页导航栏
LOGO
首页banner栏
新闻热点
联系方式
产品展示
版权信息 相关链接
图32 首页结构图
网站相关子页结构布局图33
子页导航栏
LOGO
首页banner栏
产品分类1
产品分类2
产品分类3
产品分类
相关子页详情页
版权信息 相关链接
图33 子页结构图
子页分二级页面三级页面整体结构图33样举例
331 首页设计制作
网站首页体现网站门面显示企业相关消息网站设计中较重部分网站综合台形式展示整企业网站部分体容整网站导航够浏览者第时间领略企业特色中间部分插入banner浏览者公司企业文化核心展示图片信息banner面板方分公司新闻产品展示联系方式浏览者直接需信息插入公司网站信息联系方式站站外链接客户更方便找想东西
首页包括网站logo导航栏banner3图文信息栏底部公司信息链接等组件 网站Logo网站标志互联网网站网站链接图形标志 做蜂产品企业网站真实存变更logo引蜂蜜团logo图34示
图34 蜂产品LOGO
首页背景突出简单气考虑蜂产品身属绿色食品选简单白色背景导航栏背景类似颜色简洁明体现企业特色图35示
图35 首页导航栏
加宋体标题终完成导航栏图36示
图36 首页导航栏效果图
首页banner体现企业高端气档次二体现蜂产品特色风格三符合整体页面设计具体效果图311示
(1)首先网找风景图片需部分图章工具抹进行调色图37示
图37 图片调色
(2)网载石狮子钢笔抠出放图中进行调色图38示
图38 图片处理
(3)整体效果定型整体合调色图39示
图39 合处理
(4)加公司字样蜜蜂体现企业特色图310示
图310 添加标识
图311 首页banner
banner方三栏信息栏分放置新闻产品联系方式3重信息便者更方便找容图312示
图312 信息栏
底部左侧设计网站开发者信息版权右侧设计相关方面链接图313示
图313 底部信息栏
切片保存indexhtml相应钮添加链接相应页面首页终效果图图314示
图314 首页终效果图
子页效果部分首页相列举
332 公司新闻页制作
点击页导航条公司新闻者点击首页方第信息栏文字进入二级页面公司新闻页左边放泾县永春养蜂专业合作社公司新闻新动态行业新闻新闻分类四类目类目具体新闻列表图315示
图315公司新闻页效果图
333 新闻详情页制作
点击页导航条公司新闻者点击相关子页题新闻进入三级页面新闻详情页左边放泾县永春养蜂专业合作社公司新闻新动态行业新闻新闻分类四类目右边详细新闻图316示
图316 新闻详情页效果图
334 产品展示页制作
点击页导航条产品展示者首页方第二信息栏文字图片进入二级页面产品展示页左边放泾县永春养蜂专业合作社产品分类四类目右边产品图片详情介绍具体效果图317示
335 产品展示详情页制作
点击展品展示页产品者题者首页方第二信息栏文字图片进入三级页面产品展示详情页左边放泾县永春养蜂专业合作社产品分类四类目右边具体产品图片详情介绍具体效果图318示
图317 产品展示页效果图
图318 产品图片详情页效果图
336 关页制作
点击页导航条关进入二级页面关页左边放泾县永春养蜂专业合作社公司新闻新动态行业新闻新闻分类四类目右边永春公司公司简介具体效果图319示
图319 关页效果图
337 联系页制作
点击页导航条联系者题者首页方第三信息栏文字进入二级页面联系页左边放泾县永春养蜂专业合作社公司新闻新动态行业新闻新闻分类四类目右边永春公司联方式图320示
图320 联系页效果图
详情页面结构制作程图320相举例
34创作总结
期半年实懈努力终完成刚开始接触报告时候现全部完成然时间长做工作课程设计程中断讨分析整理终完成稿中花费精力然坚持精神体现
学电子商务年历网站制作工具说Dreamweaver FireworksFlashFrontPagePhotoshop没深入系统认识解更谈分析整理纳作业中摸索解运软件更深层次软件更没涉做深层解设计觉收获仅制作网页软件全新认识系统设计技术方面质飞跃
关次总结先网站页面设计说起设计程中注意电子商务网站BtoC诸评单单方便角度出发已重优点页面设计程时候页面设计填写详简略凸显题体现出次调查全面性页面设计某方面完善次觉做心努力选择风格页面设计网页设计中量全面问涉问题发现获益仅仅单纯问卷调查程更讨中汇总中解更知识全面提高问题分析力
次网站设计总结点:(1)确定网站题:容题选择做精题定位容精试图制作包罗万象站点会失网站特色会带高强度劳动网站时更新带困难(2)掌握建网工具:制作网页时候定熟练掌握软件运断摸索细节处理需做东西断练会更运软件(3)确定网站界面 :网站题材确定收集资料容作合理编排删题关栏目网站价值容列栏目访问者角度编排栏目方便访问者浏览查询辅助容站点简介版权信息板块相独立性板块相互关联板块容围绕站点题栏目容建立子目录子目录建立首先栏目建立友情连接容较需常更新建立独立子目录相关性强需常更新栏目例:网站简介站长情况等合放统目录程序般存放特定目录目录建立独立Images目录般说站点根目录默认Images目录图片存放目录里方便栏目删时图片理相麻烦栏目建立独立Images目录方便理原简单方便维护理(4)确定网站风格:风格抽象指站点整体形象浏览者综合感受整体形象包括站点CI(标志色彩字体标语)版面布局浏览方式交互性文字语气容价值等等诸素网站易生动活泼专业严肃色彩技术文字布局交互方式浏览者明确分辨出网站独形成网站风格风格性通网站色彩技术文字布局交互方式概括出站点性:粗犷豪放清新秀丽温文儒雅执著热情活泼易变墨守成规
说说日记总结撰写刚开始写日记时候感觉思绪匮乏知道该写什然天做事总感觉流水账慢慢天适应发现课程设计体会越越然字数方面变化体会感觉真少感觉合作时完成务兴奋感独立完成务感觉完成务时候感觉充实想做事涉面会广融汇法种突破
次课程设计做出总结次课程设计中发现团队重性分工重性该开始懵懂慢慢完成务充分体会合作真谛合作程中体会相互合作非常重细节方面亏组成员指点发现许足某逻辑思考完善节约时间完成务团结合作智慧力量忽视擅长部分团结切团结力量发挥心协力够务完成
4 设计评
关次设计设计思路源绿色食品设计理念参考冠生园汲取家蜂产品网站优点宣传产品树立品牌互动分享作建站重点实现企业外开放程度仅企业带良社会反响助蜂产品知识企业文化推广实现品牌推广产品推广双赢局面利软件方面利PhotoshopDreamweaverdiv+css三软件开发总说设计点特色:
(1)结构简洁失气风范整体结构采冠生园风格BANNER页设计突出气形象整体谐美观
(2)开设富特色页面设计许企业网站文字介绍设计图片展示子页设计思路源淘宝目更解产品
(3)突出产品特性绿色题作绿色食品蜂蜜建站风格没弄庄重绿色logo白色基调设计体现出然朴实
参考文献
[1]张玉祥色彩构成[M]北京:中国轻工业出版社200811
[2]徐莉HTMLCSS前台页面设计[M]北京:中国水利水电出版社20065
[3]戴波Dreamweaver CS3网站制作炫例精讲[M]北京:电子工业出版社20081
[4]秀芳网页制作网站建设课堂实录[M]北京:民邮电出版社20093
[5]唐守国创意+:Photoshop cs4网页设计配色特效案例精粹[M] 北京:清华学出版社20107
[6]王征JavaScript网页特效实例全[M] 北京:清华学出版社20069
[7]史晓燕苏萍网页设计基础(HTMLCSSJavaScript)[M] 北京:清华学出版社200610
[8]张景峰等HTML程序设计[M] 北京:高等教育出版社20059
[9]项宇峰等HTML网络编程入门精通[M] 北京:清华学出版社200610
文档香网(httpswwwxiangdangnet)户传
《香当网》用户分享的内容,不代表《香当网》观点或立场,请自行判断内容的真实性和可靠性!
该内容是文档的文本内容,更好的格式请下载文档