网页设计与制作毕业论文设计Word格式文档下载.docx

资源描述

网页设计与制作毕业论文设计Word格式文档下载.docx

《网页设计与制作毕业论文设计Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网页设计与制作毕业论文设计Word格式文档下载.docx（29页珍藏版）》请在冰豆网上搜索。

网页设计与制作毕业论文设计Word格式文档下载.docx

2016年1月20-20年2月20日学习、阅读参考文献并收集相关资料

2016年2月21日-20年月3月10日拟订提纲

2016年3月11日-20年4月30日撰写初稿

2016年5月1日-20年5月30日修改、完善论文阶段

主要参考文献、资料：

参考文献不少于十个

[1]中华人民国商务部，中国电子商务报告（2014），中国商务。

[2]《美国零售市场研究报告》，《连锁》2014年6月刊。

[3]BenFrain,响应式Web设计,人民邮电.2015年7月3日

[4]东博，《Dreamweaver+Photosho网页设计》，清华大学,2010

要求完成时间

2016年5月30日

作者（XX）

容摘要：

本文从电子商务发展出发，详细讲述了国外电子商务的发展已经渗透到生活和工作的方方面面，而且电子商务技术也将成为新世纪商家不可缺少的发展道路。

从电子商务的发展可以看出今后电子商务在企业中的地位，接下来将会介绍的制作流程，从设计页面到前台开发到后台添加到交付给用户使用。

然后突出介绍设计和前台开发。

通过Div+Css技术来制作出能给后台开发人员进行开发的成品页面。

本文主要使用制作葡萄酒销售作为例子来使用div与css技术搭建。

关键词：

（楷体五号）divcss售酒电子商务

第一章绪论5

第一节国外电子商务发展的现状5

第二节公司的重要性6

第二章DIV+CSS设计与制作技术6

第一节网页设计与制作的主要工具6

第二节DIV+CSS技术介绍7

第三节制作流程7

第三章某公司设计8

第一节确定公司创建的目的与意义8

第二节需求分析8

第三节设计工作流程8

第四节栏目设计9

第四章公司制作9

第一节设计草图9

第二节设计制作PSD模板11

第三节利用DIV+CSS制作页面16

第五章总结28

第六章致29

第1章绪论

第1节国外电子商务发展的现状

电子商务，涵盖的围很广，一般可分为代理商、商家和消费者（Agent、Business、Consumer，即ABC）企业对企业（Business-to-Business，即B2B），企业对消费者（Business-to-Consumer，即B2C），个人对消费者（Consumer-to-Consumer，即C2C），企业对政府（Business-to-Government），线上对线下（OnlineToOffline，O2O），商业机构对家庭（BusinessToFamily），供给方对需求方（ProvidetoDemand），门店在线（OnlinetoPartner，O2P）等8种模式。

近年电子商务在中国发展势头迅猛，从无到有成长了很多电子商务的大咖，中国的本土电商正在做大做强。

时间2015年5月15日上午，商务部新闻发言人丹阳介绍《中国电子商务报告（2014）》时说，我国电子商务交易总额快速增长，已成为国民经济的重要增长点，并且国际影响力显著增强。

丹阳认为传统企业将继续加快进入电子商务领域的步伐，移动电子商务将继续保持高速增长，大宗商品交易平台将成为电子商务发展的热点。

在国外方面，从美国电子商务现状入手分析。

电子商务市场正以前所未有的速度腾飞而起，这主要是由少数平台推动的。

从图1-1可以看出，Flipkart、AmazonSellerCentral、Shopify和阿里巴巴全球速卖通（AliExpress）的流量正在不断增长。

图1-1电子商务流量分析

推动电子商务市场飞速发展的因素很多，包括更有吸引力的价格，更多更便捷的送货渠道，这些市场采用的营销手段等等。

这种趋势是向上的，在快递网络不断健全的今天，电子商务的发展明显呈现出加速增长的态势。

当然，这四家平台并不像产品那样具有直接的可比性。

Shopify支持的是卖家自己上的贸易，而亚马逊、Flipkart和全球速卖通则为卖家们提供了一个市场平台，卖家们在同一平台上争夺客户。

但是这图传达出来的讯息是很明显的，那就是大平台支持小商店的情况将越来越普遍。

在流量趋势方面，世界各大电商正在压缩美国电商，美国的巨头将失去全球在线零售的大笔订单而更加转向本土，在这样的增长态势下，对于eBay、亚马逊和沃尔玛等公司来说将是压力重重的。

在美国电商方面，用户参与度高的平台的流量增长趋势明显大于用户参与度低的平台，并且电子商务变得更具有社交性，各电商拥有了分享功能。

用户的分享为平台提供了一大部分流量，来自用户对用户的宣传与讨论也促进产品的销售。

总结下来国外电商发展主要呈以下几种趋势：

趋势一：

小商店将得到大平台的支持

趋势二：

美国的巨头们将丧失对全球在线零售业的掌控

趋势三：

用户参与度将是一项更重要的因素

趋势四：

电子商务将变得更具社交性

电子商务越来越渗入每一个人的生活，在今后的发展中，会更加离不开电子商务。

对于企业来说，拓展电子商务越来越必要。

第二节公司的重要性

在电子商务发展迅猛的今天，公司成为各大企业竞争的一项要点。

各公司的功能与用户体验也影响用户选择公司。

有利于提升企业形象企业的作用更类似于企业在报纸和电视上所做的宣传企业本身及品牌的广告。

可以全面详细地介绍企业及企业产品企业的一个最基本的功能，就是能够全面、详细地介绍企业及企业产品。

企业可以把任何想让人们知道的信息放入。

如企业简介、企业的人员、厂房、生产设施、研究机构、产品外观、功能及使用方法等，都可以展示于网上。

还可以在线销售，可以与潜在客户建立商业联系这是企业最重要的功能之一，也是为什么那么多企业非常重视建设的根本原因。

现在，世界各国的经销商主要都是利用互联网络来寻找新的产品和新的供求，因为这样做费用最低.效率最高。

原则上，全世界任何人，只要知道了企业的网址，就可以看到企业的产品和服务。

因此，关键在于如何将企业网址推广出去。

公司在对于老客户的沟通方面也非常方便，使用公司的电子业务让公司每年省下一大笔费用，同时实现对客户的实时沟通也是非常重要的。

第2章DIV+CSS设计与制作技术

第1节网页设计与制作的主要工具

网页设计工具：

PS、CorelDraw、Ai、Flash等

网页制作的主要工具有：

Dreamweaver、VisualStudio、Idea、PHPStorm、记事本等

网页设计与制作的工具有很多，很多软件具有强大的开发辅助功能。

设计方面需要一个图像制作软件，图像处理软件很多。

功能强大并且越顺手越适合使用，软件需要提供切片功能。

制作方面，Dreamweaver作为一个保姆型入门软件将所有的方面考虑的很周全，让网页开发变得简单。

熟练后也会发现Idea工具非常好用。

而后面提到了记事本，表明网页的制作工具要求其实非常的低，是个文本编辑器基本都是可以制作网页的，文本工具占用的磁盘空间非常小，而网页的体积小也正是他流通的优势。

本文接下来主要使用的工具有PS+VisualStudio。

第二节DIV+CSS技术介绍

DIV+CSS是WEB设计标准，它是一种网页的布局方法。

与传统过表格（table）布局定位的方式不同，它可以实现网页页面容与表现相分离。

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

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

通过外链样式CSS，可以给进行模板制作，将样式的编写操作多次引用达到节省操作的目的。

第三节制作流程

第一步：

确定需求。

客户将自己所要建设的功能以及相关要求告知设计人员，如想要的效果，开设的栏目，想要的风格等。

同时需提供制作的相关资料，产品描述，详细的框架设计要求等。

第二步：

制定制作方案

双方就制作的容、风格、细节等问题进行协商，以达成共识。

为建设的开展做铺垫。

第三步：

签定制作合同，支付预付款

双方签定《制作合同》，合约是双方利益的保障。

支付预付款之后开始动工了。

第四步：

注册域名、空间

选择合适的注册域名和空间。

为之后的开发做良好的铺垫。

第五步：

制作定位

确定的定位，作为产品销售和公司介绍的，给定好位。

利于接下来的开发。

第六步：

风格设计

的风格包括很多方面，整个的总体风格，每个栏目频段自己独有的风格，基本框架的设计等。

最后将初步做好的与客户进行讨论并加以改进。

第七步：

制作

应当有一个很清晰的介绍，有一个简洁的界面，需要告诉访问者能够提供些什么，以便访问者能找到想要的东西。

有效的导航条和良好的结构，使人们很容易找到需要的产品，这对客户很重要。

第八步：

验收

制作完成后，将会反复审核、测试、修改最后通过客户的验收，才算建好。

第九步：

宣传推广工作

建好之后，需要对进行宣传推广，可以聘请网络优化团队，为的搜索进行优化。

第十步：

后期维护

建成验收以后，如果涉及到图片文字更换及数据库升级、修改漏洞及找回管理员密码等情况需要修改，属于的后期维护。

第三章某公司设计

第一节确定公司创建的目的与意义

根据论文题目，以售酒公司作为例子，售酒公司需求一个在线售卖红酒的。

目的是发展公司的线上销售业务，来推动公司收益。

公司创建能有效的宣传公司产品以及提高销量，并且加入电子商务行列。

第2节需求分析

首先公司售酒的需要一个在线能购买公司产品的功能，也需要页面实现对于公司文化的介绍。

对于每一件商品需要有一个产品详情页面，能通过后台添加产品详情信息。

需要秒杀商品页，能展示商品秒杀和记录哪些用户秒杀了商品。

需要用多种方式来展示公司产品，不显得单调死板，也不能显得花里胡哨，体现公司文化的稳重。

首页需要大图来突出展示几种商品，也需要小块的商品展示以便于介绍更多商品。

第3节设计工作流程

第一、对整体风格的设计

这是对整体框架的定位，对于红酒行业，的风格会有不一样的风格表现形式，在视觉上突出一种优雅和高贵的感觉，让用户视觉上定位该站，符合用户的视觉印象。

加深网页元素在用户面前的表现力，增强用户的购买欲。

决定使用酒红色作为全站的主色调，风格上采用扁平化，使用块状的设计让更加简洁大气。

第二、进行网页的布局设计

的布局结构性质继承上面第一步的表现风格，在添加丰富的酒元素，用酒和优雅去“熏”出每一个页面。

使页面的表现带动访客的心灵。

第三、产品目录的平面设计；

定好位，并布好局，设计大的div块。

暂时先不管块中的容，先想好容器的摆放位置，将需要表现的东西的大块先在页面上摆放合适。

随后再进行更加细节方面的制作，将的整体制作成为psd文件，为接下来切图做好准备。

第四、各类专题广告设计；

好产品当然要有好广告，酒香也怕巷子深的哦，做个大大的广告banner，这样客户在访问的时候，知道当前主要推荐的容是什么。

突出某些产品或者服务，在网页上添加各种广告元素gif图片、flash动画等等，尽量吸引访客的眼球，然后突出的表现想表现的东西，这样就更加促成了转换率了。

第五、利用div+css制作页面。

网页设计固然重要，但是最关键的是如何将网页制作出来，设计和制作上面还会有不小的冲突，在切图后将页面排版出来，做出最初的div模型。

制作时可以使用各种插件辅助工作，因为网上的js插件都是开源的，使用起来不用担心问题。

Div模型制作出来之后将各种产品的排版加入其中，使之成为一个完整的页面。

然后可以考虑的动画效果问题。

这个问题需要考虑的更多，对于各种浏览器的支持以及兼容性问题，争取能兼容各大浏览器。

第六、的测试与交互

网页的div+css排版制作完成后需要交给制作后台的人员进一步工作，交付前需要进行兼容性测试，测试完成后将静态的网页文件交出进行后台添加变成动态网页。

完成产品的添加以及各种功能的实现。

第4节栏目设计

首页

导航栏：

点击导航栏能进行挑战，本页面跳转。

轮播栏：

轮播栏展示公司主要推荐购买的三种产品。

秒杀栏：

倒计时秒杀，做出动画显示倒计时，使网页看起来不是那么死板。

产品展示栏：

产品展示，通过后台添加图片和介绍在前台展示，此处暂时只作为效果展示，不具备后台。

友情栏：

网页友情，将用于推广网页。

可后台添加，此处只作为效果展示。

脚部声明栏：

必要的网页声明，否则，只作为效果展示。

公司介绍页

公司介绍页面主要为公司照片展示与公司文字介绍。

产品详情页

展示产品的大图，并且添加价格及优惠。

同时提供购买和加入购物车选项。

产品详情页面：

产品详细介绍，以及优惠详情，各种信息可以加入其中，把想告诉客户的全部放在详情页面中。

限时抢购页

限时抢购商品展示栏：

展示前面的限时抢购商品，提供抢购按钮，并且时间到了才能抢。

政策法规页面

结构大体上与公司详情页一样，可以排版图文。

第四章公司制作

第一节设计草图

首先需要确定的是网页的宽度，现在的主流显示器的分辨率有1280*960（4:

3屏幕）、1366*768（低分屏笔记本）、1440*900（低分屏宽屏）或者更高1080P、2160P等。

设计网页为了使这些分辨率的电脑都能使用，设计的宽度不能超过1280主流显示器的宽度。

又为了保证横向的滚动条不会显示出来，采用了1248px宽度。

整个网页居中显示，每一栏目使用栏目背景颜色填充，使能适应各种分辨率。

画出草图如图4-1所示：

图4-1草图1

首页的页面规定好之后接下来的所有页面可以按照首页的模板制作头部和脚部，只用替换掉中间的容即可。

图4-2是抢购页面：

图4-2草图2

抢购页面产品如果有多个产品可以无限延伸下去。

剩下的政策法规、公司简介栏目只需要替换首脚部，中间使用图文混排并居中即可。

第二节设计制作PSD模板

使用工具PS制作网页效果图，并且使用切片工具将图片切成小图，避免不必要的背景色图片浪费图片资源，用户加载慢。

优化打开速度和用户体验。

制作时合理使用PS中的辅助线工具能让网页看起来格式对齐。

先确定结构是左右结构还是一块块拼接或者瀑布流。

确定后考虑配色，将的配色确定后，一块一块的设计完成组装起来成为一个页面，页面可能比较长，超过10000px的页面不能保存为psd，解决方法：

保存为psb格式文件或者分成两个psd分别保存与切片，都需要与开发人员写注释或者交流清楚。

首先需要制作的头部如图4-3所示。

图4-3网页设计1

首先设计出的logo及加上起名等，在旁边做出文字介绍等容。

列出需要的页面做出菜单，并将选中的菜单项目稍微调色表示选中，如图4-4所示。

图4-4网页设计2

随后制作搜索框，一定要保证文本与搜索框对齐，不然排版会显得参差不齐。

接下来制作轮播页面，暂时先把轮播页面的图片排好版，将使用如下图片示例，图文混搭做出banner图效果后。

可以在网上下载按钮等文件表示此图将轮播，在图片下方需要使用块来告诉用户有几轮播，可以通过点击块来跳转页面。

图4-5设计3

图片制作好后，把他加入到网页中，插入按钮等一定要注意对齐。

图4-6设计4

接下来秒杀栏目使用网上的瓶装葡萄酒图片素材加上文案做出图4-7效果：

图4-7设计5

商品展示栏做出三个风格差不多的样式，都是使用上面标题加上下面小块商品拼接而成，商品只是做出一个模板可以复制多个：

图4-8设计6

最后制作脚部，再次强调文本一定要对齐，并且尽量不要使用宋体。

由于LW红酒只是作为示没有申请各种文件，此处使用x将声明信息打码，友情方面只作为样式参考。

图4-9设计7

整页psd样式，其中商品展示栏需要制作多个这里不再赘述：

图4-10设计8

由于页面太长，需要设计一个专门做导航来浮动显示，随时可以跳转到位置，此处二维码可以替换成为公司的手机站或者app，暂时使用无关的二维码仅作示。

图4-11设计9

接下来使用切片工具仔细的将页面中的图片切出来，然后主页就完成啦。

图4-12设计10

接下来完成子页面，子页面基本都是单页，使用ps将页面设计完成。

全站头脚都使用首页的样子，只是稍微改动中间部分。

图4-13设计11

当然这个页面中的所有文字都是可以更改的，价格标题都是为了给后台开发人员作为样式参考。

然后是公司简介，只需要替换头脚中间图文居中即可：

图4-14设计12

政策法规页面与公司简介页面一致。

第3节利用DIV+CSS制作页面

开始制作页面，首先需要创建一个html文档，根据HTML5标准写上声明：

DOCTYPEhtml>

html>

head>

title>

红酒特卖<

/title>

/head>

body>

/body>

/html>

当然也可以根据html4的标准声明，这只是HTML5把他简化了而已。

使用很多软件创建空白html文档的时候会自动生成声明。

现在需要将外部样式表css链入文档中，顺便将需要使用的js也一起进去。

比如jQuery库和自己用来写代码的js。

将以上说的这些写在<

中间。

linkhref="

css/css.css"

rel="

stylesheet"

type="

text/css"

scripttype="

text/javascript"

src="

js/jquery.js"

/script>

js/my.js"

根据前面设计好的草图先大概做出div的框架。

图4-15制作1

然后设计导航栏，使用hr标签来把每个A标签分隔开，之后在href中写上的位置，页面跳转至div用#号表示。

将处分别填上想要跳转至的div。

divid="

daohang"

ahref="

返回顶部<

/a>

hr/>

#content"

秒杀<

hr/>

#content_one"

名庄酒<

#content_two"

菁英特荐<

#content_three"

周年爆款<

imgsrc="

images/erweima.jpg"

width="

120"

height="

aid="

close"

关闭<

/div>

最后的关闭按钮使用jquery绑定事件，自己的jQuery事件写在my.js中，前面有过引用，然后再在my.js中添加如下代码：

$（"

#close"

）.click（function（）{$（"

#daohang"

）.hide（）;

}）;

现在导航已经出来了，但是不会跟随页面移动并且长的挺难看的，所以给他慢慢调好样式添加入css中：

#daohang{Z-INDEX:

11;

background-color:

#000;

height:

300px;

width:

120px;

position:

fixed;

top:

200px;

right:

30px;

text-align:

center;

}

#daohanga{color:

#fff;

font-family:

黑体"

;

font-size:

18px;

font-weight:

bold;

text-decoration:

none;

line-height:

40px;

vertical-align:

middle;

然后开始制作头部，将logo和搜索框制作出来，将需要的图片命名好之后放入images文件夹，在wrap中添加代码：

divclass="

logo"

images/logo.jpg"

alt="

LW红酒专卖网"

serach"

serach_con"

inputtype="

text"

javascript:

void（0）;

images/serach.png"

搜索"

hot_serach"

span>