网设计与制作毕业论文.pdf
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《网设计与制作毕业论文.pdf》由会员分享,可在线阅读,更多相关《网设计与制作毕业论文.pdf(21页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、 网设计与制作毕业论文 Revised by BETTY on December 25,2020 XXXXXXXXXX 学院 毕 业 论 文 论文(设计)题目:网页设计与制作 班 级:姓 名:学 号:指导教师:时间:2016 年 5 月 30 日 XXXXXXXX 学院 毕业设计(论文)任务书 班级 XXXXXXXX 姓名 XX 学号 XXXXXXXX 设计(或论文)题目 网站设计与制作(DIV+CSS)指导教师姓名 XX 指导教师 专业技术职称 高级工程师 设计根据、内容、技术要求,主要设计方法(或步骤:利用 DIV+CSS 技术为某公司设计一个公司介绍和产品销售的网站。一、绪论 1国内外电
2、子商务发展的现状 2公司网站的重要性 二、DIV+CSS 网站设计与制作技术 1.网页设计与制作的主要工具 2.DIV+CSS 技术介绍 3.网站制作流程 三、某公司网站设计 1.确定公司创建网站的目的与意义 2.需求分析 3.设计工作流程 4.栏目设计 四、公司网站制作 1.设计草图 2.设计制作 PSD 模板 3.利用 DIV+CSS 制作网站页面 五、总结六、致谢七、参考文献 设计步骤:2016 年 1 月 20-20 年 2 月 20 日 学习、阅读参考文献并收集相关资料 2016 年 2 月 21 日-20 年月 3 月 10 日拟订提纲 2016 年 3 月 11 日-20 年 4
3、 月 30 日撰写初稿 2016 年 5 月 1 日-20 年 5 月 30 日修改、完善论文阶段 主要参考文献、资料:参考文献不少于十个 1 中华人民共和国商务部,中国电子商务报告(2014),中国商务出版社。2 美国零售市场研究报告,连锁2014 年 6 月刊。3 Ben Frain,响应式 Web 设计,人民邮电出版社.2015 年 7 月 3 日 4 李东博,Dreamweaver+Photosho 网页设计,清华大学出版社,2010 要求完成时间 2016 年 5 月 30 日 XXXXXXXX 学院 网站设计与制作(DIV+CSS)作者姓名(XX)内容摘要:本文从电子商务发展出发,
4、详细讲述了国内外电子商务的发展已经渗透到生活和工作的方方面面,而且电子商务技术也将成为新世纪商家不可缺少的发展道路。从电子商务的发展可以看出今后电子商务在企业中的地位,接下来将会介绍网站的制作流程,从设计页面到前台开发到后台添加到交付给用户使用。然后突出介绍设计和前台开发。通过 Div+Css 技术来制作出能给后台开发人员进行开发的成品页面。本文主要使用制作葡萄酒销售网站作为例子来使用 div 与 css 技术搭建网站。关键词:(楷体五号)div css 售酒 网站 电子商务 目录 第一章 绪论 第一节 国内外电子商务发展的现状 电子商务,涵盖的范围很广,一般可分为代理商、商家和消费者(Age
5、nt、Business、Consumer,即 ABC)企业对企业(Business-to-Business,即 B2B),企业对消费者(Business-to-Consumer,即 B2C),个人对消费者(Consumer-to-Consumer,即 C2C),企业对政府(Business-to-Government),线上对线下(Online To Offline,O2O),商业机构对家庭(Business To Family),供给方对需求方(Provide to Demand),门店在线(Online to Partner,O2P)等 8 种模式。近年电子商务在中国发展势头迅猛,从无到有
6、成长了很多电子商务的大咖,中国的本土电商正在做大做强。北京时间 2015 年 5 月 15 日上午,商务部新闻发言人沈丹阳介绍中国电子商务报告(2014)时说,我国电子商务交易总额快速增长,已成为国民经济的重要增长点,并且国际影响力显着增强。沈丹阳认为传统企业将继续加快进入电子商务领域的步伐,移动电子商务将继续保持高速增长,大宗商品交易平台将成为电子商务发展的热点。在国外方面,从美国电子商务现状入手分析。电子商务市场正以前所未有的速度腾飞而起,这主要是由少数平台推动的。从图 1-1 可以看出,Flipkart、Amazon Seller Central、Shopify 和阿里巴巴全球速卖通(A
7、liExpress)的流量正在不断增长。图 1-1 电子商务流量分析 推动电子商务市场飞速发展的因素很多,包括更有吸引力的价格,更多更便捷的送货渠道,这些市场采用的营销手段等等。这种趋势是向上的,在快递网络不断健全的今天,电子商务的发展明显呈现出加速增长的态势。当然,这四家平台并不像产品那样具有直接的可比性。Shopify 支持的是卖家自己网站上的贸易,而亚马逊、Flipkart 和全球速卖通则为卖家们提供了一个市场平台,卖家们在同一平台上争夺客户。但是这张图传达出来的讯息是很明显的,那就是大平台支持小商店的情况将越来越普遍。在流量趋势方面,世界各大电商正在压缩美国电商,美国的巨头将失去全球在
8、线零售的大笔订单而更加转向本土,在这样的增长态势下,对于eBay、亚马逊和沃尔玛等公司来说将是压力重重的。在美国电商网站方面,用户参与度高的平台的流量增长趋势明显大于用户参与度低的平台,并且电子商务变得更具有社交性,各电商网站拥有了分享功能。用户的分享为平台提供了一大部分流量,来自用户对用户的宣传与讨论也促进产品的销售。总结下来国内外电商发展主要呈以下几种趋势:趋势一:小商店将得到大平台的支持 趋势二:美国的巨头们将丧失对全球在线零售业的掌控 趋势三:用户参与度将是一项更重要的因素 趋势四:电子商务将变得更具社交性 电子商务越来越渗入每一个人的生活,在今后的发展中,会更加离不开电子商务。对于企
9、业来说,拓展电子商务越来越必要。第二节 公司网站的重要性 在电子商务发展迅猛的今天,公司网站成为各大企业竞争的一项要点。各公司网站的功能与用户体验也影响用户选择公司。有利于提升企业形象企业网站的作用更类似于企业在报纸和电视上所做的宣传企业本身及品牌的广告。可以全面详细地介绍企业及企业产品企业网站的一个最基本的功能,就是能够全面、详细地介绍企业及企业产品。企业可以把任何想让人们知道的信息放入网站。如企业简介、企业的人员、厂房、生产设施、研究机构、产品外观、功能及使用方法等,都可以展示于网上。还可以在线销售,可以与潜在客户建立商业联系这是企业网站最重要的功能之一,也是为什么那么多企业非常重视网站建
10、设的根本原因。现在,世界各国的经销商主要都是利用互联网络来寻找新的产品和新的供求,因为这样做费用最低.效率最高。原则上,全世界任何人,只要知道了企业的网址,就可以看到企业的产品和服务。因此,关键在于如何将企业网址推广出去。公司网站在对于老客户的沟通方面也非常方便,使用公司网站的电子邮件业务让公司每年省下一大笔费用,同时实现对客户的实时沟通也是非常重要的。第二章 DIV+CSS 网站设计与制作技术 第一节 网页设计与制作的主要工具 网页设计工具:PS、CorelDraw、Ai、Flash 等 网页制作的主要工具有:Dreamweaver、VisualStudio、Idea、PHPStorm、记事
11、本等 网页设计与制作的工具有很多,很多软件具有强大的开发辅助功能。设计方面需要一个图像制作软件,图像处理软件很多。功能强大并且越顺手越适合使用,软件需要提供切片功能。制作方面,Dreamweaver作为一个保姆型入门软件将所有的方面考虑的很周全,让网页开发变得简单。熟练后也会发现Idea 工具非常好用。而后面提到了记事本,表明网页的制作工具要求其实非常的低,是个文本编辑器基本都是可以制作网页的,文本工具占用的磁盘空间非常小,而网页的体积小也正是他流通的优势。本文接下来主要使用的工具有PS+VisualStudio。第二节 DIV+CSS 技术介绍 DIV+CSS是 WEB 设计标准,它是一种网
12、页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。提起DIV+CSS组合,还要从 XHTML 说起。XHTML 是一种在 HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML 应用与强大的数据转换能力,适应未来网络应用更多的需求。通过外链样式 CSS,可以给网站进行模板制作,将样式的编写操作多次引用达到节省操作的目的。第三节 网站制作流程 第一步:确定网站需求。客户将自己所要建设的网站功能以及相关要求告知设计人员,如想要的效果,开设的栏目,想要的风格等。同时需提供网站制作的相关资料,产品描述,详细的网站框架设计要求等。第
13、二步:制定网站制作方案 双方就网站制作的内容、风格、细节等问题进行协商,以达成共识。为网站建设的开展做铺垫。第三步:签定网站制作合同,支付预付款 双方签定网站制作合同,合约是双方利益的保障。支付预付款之后网站开始动工了。第四步:注册域名、空间 选择合适的注册域名和空间。为之后网站的开发做良好的铺垫。第五步:网站制作定位 确定网站的定位,作为产品销售和公司介绍的网站,给网站定好位。利于接下来的开发。第六步:网站风格设计 网站的风格包括很多方面,整个网站的总体风格,每个栏目频段自己独有的风格,网站基本框架的设计等。最后将初步做好的网站与客户进行讨论并加以改进。第七步:网站制作 网站应当有一个很清晰
14、的网站介绍,有一个简洁的界面,需要告诉访问者网站能够提供些什么,以便访问者能找到想要的东西。有效的导航条和良好的结构,使人们很容易找到需要的产品,这对网站客户很重要。第八步:网站验收 网站制作完成后,将会反复审核、测试、修改最后通过客户的验收,网站才算建好。第九步:网站宣传推广工作 网站建好之后,需要对网站进行宣传推广,可以聘请网络优化团队,为网站的搜索进行优化。第十步:网站后期维护 网站建成验收以后,如果涉及到图片文字更换及数据库升级、修改漏洞及找回管理员密码等情况需要修改网站,属于网站的后期维护。第三章 某公司网站设计 第一节 确定公司创建网站的目的与意义 根据论文题目,以售酒公司作为例子
15、,售酒公司需求一个在线售卖红酒的网站。目的是发展公司的线上销售业务,来推动公司收益。公司创建网站能有效的宣传公司产品以及提高销量,并且加入电子商务行列。第二节 需求分析 首先公司售酒的网站需要一个在线能购买公司产品的功能,网站也需要页面实现对于公司文化的介绍。对于每一件商品需要有一个产品详情页面,能通过后台添加产品详情信息。需要秒杀商品页,能展示商品秒杀和记录哪些用户秒杀了商品。网站需要用多种方式来展示公司产品,不显得单调死板,也不能显得花里胡哨,体现公司文化的稳重。首页需要大图来突出展示几种商品,也需要小块的商品展示以便于介绍更多商品。第三节 设计工作流程 第一、对网站整体风格的设计 这是对
16、网站整体框架的定位,对于红酒行业,网站的风格会有不一样的风格表现形式,在视觉上突出一种优雅和高贵的感觉,让用户视觉上定位该站,符合用户的视觉印象。加深网页元素在用户面前的表现力,增强用户的购买欲。决定使用酒红色作为全站的主色调,风格上采用扁平化,使用块状的设计让网站更加简洁大气。第二、进行网页的布局设计 网站的布局结构性质继承上面第一步的表现风格,在添加丰富的酒元素,用酒和优雅去“熏陶”出每一个页面。使页面的表现带动访客的心灵。第三、产品目录的平面设计;定好位,并布好局,设计大的div 块。暂时先不管块中的内容,先想好容器的摆放位置,将需要表现的东西的大块先在页面上摆放合适。随后再进行更加细节
17、方面的制作,将网站的整体制作成为psd 文件,为接下来切图做好准备。第四、各类专题广告设计;好产品当然要有好广告,酒香也怕巷子深的哦,做个大大的广告banner,这样客户在访问网站的时候,知道当前主要推荐的内容是什么。突出某些产品或者服务,在网页上添加各种广告元素gif 图片、flash 动画等等,尽量吸引访客的眼球,然后突出的表现想表现的东西,这样就更加促成了转换率了。第五、利用 div+css 制作网站页面。网页设计固然重要,但是最关键的是如何将网页制作出来,设计和制作上面还会有不小的冲突,在切图后将页面排版出来,做出最初的div 模型。制作时可以使用各种插件辅助工作,因为网上的js 插件
18、都是开源的,使用起来不用担心版权问题。Div 模型制作出来之后将各种产品的排版加入其中,使之成为一个完整的页面。然后可以考虑网站的动画效果问题。这个问题需要考虑的更多,对于各种浏览器的支持以及兼容性问题,争取能兼容各大浏览器。第六、网站的测试与交互 网页的 div+css 排版制作完成后需要交给制作后台的人员进一步工作,交付前需要进行兼容性测试,测试完成后将静态的网页文件交出进行后台添加变成动态网页。完成产品的添加以及各种功能的实现。第四节 栏目设计 首页 导航栏:点击导航栏能进行挑战,本页面内跳转。轮播栏:轮播栏展示公司主要推荐购买的三种产品。秒杀栏:倒计时秒杀,做出动画显示倒计时,使网页看
19、起来不是那么死板。产品展示栏:产品展示,通过后台添加图片和介绍在前台展示,此处暂时只作为效果展示,不具备后台。友情链接栏:网页友情链接,将用于推广网页。链接可后台添加,此处只作为效果展示。脚部声明栏:必要的网页声明,否则违法,只作为效果展示。公司介绍页 公司介绍页面主要为公司照片展示与公司文字介绍。产品详情页 产品展示栏:展示产品的大图,并且添加价格及优惠。同时提供购买和加入购物车选项。产品详情页面:产品详细介绍,以及优惠详情,各种信息可以加入其中,把想告诉客户的全部放在详情页面中。限时抢购页 限时抢购商品展示栏:展示前面的限时抢购商品,提供抢购按钮,并且时间到了才能抢。政策法规页面 结构大体
20、上与公司详情页一样,可以排版图文。第四章 公司网站制作 第一节 设计草图 首先需要确定的是网页的宽度,现在的主流显示器的分辨率有1280*960(4:3屏幕)、1366*768(低分屏笔记本)、1440*900(低分屏宽屏)或者更高1080P、2160P 等。设计网页为了使这些分辨率的电脑都能使用,设计的宽度不能超过1280主流显示器的宽度。又为了保证横向的滚动条不会显示出来,采用了1248px 宽度。整个网页居中显示,每一栏目使用栏目背景颜色填充,使网站能适应各种分辨率。画出草图如图 4-1 所示:图 4-1 网站草图 1 首页的页面规定好之后接下来的所有页面可以按照首页的模板制作头部和脚部
21、,只用替换掉中间的内容即可。图4-2 是抢购页面:图 4-2 网站草图 2 抢购页面产品如果有多个产品可以无限延伸下去。剩下的政策法规、公司简介栏目只需要替换首脚部,中间使用图文混排并居中即可。第二节 设计制作 PSD 模板 使用工具 PS 制作网页效果图,并且使用切片工具将图片切成小图,避免不必要的背景色图片浪费图片资源,用户加载慢。优化网站打开速度和用户体验。制作时合理使用PS 中的辅助线工具能让网页看起来格式对齐。先确定网站结构是左右结构还是一块块拼接或者瀑布流。确定后考虑配色,将网站的配色确定后,一块一块的设计完成组装起来成为一个页面,页面可能比较长,超过10000px的页面不能保存为
22、psd,解决方法:保存为psb 格式文件或者分成两个psd 分别保存与切片,都需要与开发人员写注释或者交流清楚。首先需要制作网站的头部如图4-3 所示。图 4-3 网页设计 1 首先设计出网站的 logo 及加上起名等,在旁边做出文字介绍等内容。列出需要的页面做出菜单,并将选中的菜单项目稍微调色表示选中,如图4-4 所示。图 4-4 网页设计 2 随后制作搜索框,一定要保证文本与搜索框对齐,不然排版会显得参差不齐。接下来制作轮播页面,暂时先把轮播页面的图片排好版,将使用如下图片示例,图文混搭做出 banner 图效果后。可以在网上下载按钮等文件表示此图将轮播,在图片下方需要使用块来告诉用户有几
23、张轮播,可以通过点击块来跳转页面。图 4-5 网站设计 3 图片制作好后,把他加入到网页中,插入按钮等一定要注意对齐。图 4-6 网站设计 4 接下来秒杀栏目使用网上的瓶装葡萄酒图片素材加上文案做出图4-7 效果:图 4-7 网站设计 5 商品展示栏做出三个风格差不多的样式,都是使用上面标题加上下面小块商品拼接而成,商品只是做出一个模板可以复制多个:图 4-8 网站设计 6 最后制作脚部,再次强调文本一定要对齐,并且尽量不要使用宋体。由于LW红酒只是作为示范没有申请各种文件,此处使用x 将声明信息打码,友情链接方面只作为样式参考。图 4-9 网站设计 7 整页 psd 样式,其中商品展示栏需要
24、制作多个这里不再赘述:图 4-10 网站设计 8 由于页面太长,需要设计一个专门做导航来浮动显示,随时可以跳转到位置,此处二维码可以替换成为公司的手机站或者app,暂时使用无关的二维码仅作示范。图 4-11 网站设计 9 接下来使用切片工具仔细的将页面中的图片切出来,然后主页就完成啦。图 4-12 网站设计 10 接下来完成子页面,子页面基本都是单页,使用ps 将页面设计完成。全站头脚都使用首页的样子,只是稍微改动中间部分。图 4-13 网站设计 11 当然这个页面中的所有文字都是可以更改的,价格标题都是为了给后台开发人员作为样式参考。然后是公司简介,只需要替换头脚中间图文居中即可:图 4-1
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 设计 制作 毕业论文
![提示](https://www.taowenge.com/images/bang_tan.gif)
限制150内