网页设计与制作毕业论文设计.docx

1、网页设计与制作毕业论文设计XXXXXXXXXX学院毕 业 论 文论文（设计）题目： 网页设计与制作 班 级： 姓 名： 学 号： 指导教师： 时间： 2016年 5月 30日XXXXXXXX学院毕业设计（论文）任务书班级XXXXXXXXXX学号XXXXXXXX设计（或论文）题目设计与制作（DIV+CSS)指导教师XX指导教师专业技术职称高级工程师设计根据、容、技术要求，主要设计方法（或步骤：利用DIV+CSS技术为某公司设计一个公司介绍和产品销售的。一、绪论1国外电子商务发展的现状2公司的重要性二、DIV+CSS设计与制作技术1. 网页设计与制作的主要工具2. DIV+CSS技术介绍3. 制作

2、流程三、某公司设计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月30日撰写初稿 2016 年5月1日-20 年5月30日修改、完善论文阶段主要参考文献、资料：参考文献不少于十个1 中华人民国商务部，中国电子商务报告(2014)，中国商务。2 美国零售市场研究报告，连锁2014年6月

3、刊。3 Ben Frain, 响应式Web设计,人民邮电.2015年7月3日4 东博，Dreamweaver+Photosho网页设计，清华大学,2010要求完成时间2016年5月30日XXXXXXXX学院设计与制作（DIV+CSS)作者（XX）容摘要：本文从电子商务发展出发，详细讲述了国外电子商务的发展已经渗透到生活和工作的方方面面，而且电子商务技术也将成为新世纪商家不可缺少的发展道路。从电子商务的发展可以看出今后电子商务在企业中的地位，接下来将会介绍的制作流程，从设计页面到前台开发到后台添加到交付给用户使用。然后突出介绍设计和前台开发。通过Div+Css技术来制作出能给后台开发人员进行开发

4、的成品页面。本文主要使用制作葡萄酒销售作为例子来使用div与css技术搭建。关键词：（楷体五号）div css 售酒 电子商务第一章 绪论 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第

5、1章 绪论第1节 国外电子商务发展的现状电子商务，涵盖的围很广，一般可分为代理商、商家和消费者（Agent、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），门店在线

6、（Online to Partner，O2P）等8种模式。近年电子商务在中国发展势头迅猛，从无到有成长了很多电子商务的大咖，中国的本土电商正在做大做强。时间2015年5月15日上午，商务部新闻发言人丹阳介绍中国电子商务报告（2014）时说，我国电子商务交易总额快速增长，已成为国民经济的重要增长点，并且国际影响力显著增强。丹阳认为传统企业将继续加快进入电子商务领域的步伐，移动电子商务将继续保持高速增长，大宗商品交易平台将成为电子商务发展的热点。在国外方面，从美国电子商务现状入手分析。电子商务市场正以前所未有的速度腾飞而起，这主要是由少数平台推动的。从图1-1可以看出，Flipkart、Amazo

7、n Seller Central、Shopify和阿里巴巴全球速卖通（AliExpress）的流量正在不断增长。图 1-1 电子商务流量分析推动电子商务市场飞速发展的因素很多，包括更有吸引力的价格，更多更便捷的送货渠道，这些市场采用的营销手段等等。这种趋势是向上的，在快递网络不断健全的今天，电子商务的发展明显呈现出加速增长的态势。当然，这四家平台并不像产品那样具有直接的可比性。Shopify支持的是卖家自己上的贸易，而亚马逊、Flipkart和全球速卖通则为卖家们提供了一个市场平台，卖家们在同一平台上争夺客户。但是这图传达出来的讯息是很明显的，那就是大平台支持小商店的情况将越来越普遍。在流量趋

8、势方面，世界各大电商正在压缩美国电商，美国的巨头将失去全球在线零售的大笔订单而更加转向本土，在这样的增长态势下，对于eBay、亚马逊和沃尔玛等公司来说将是压力重重的。在美国电商方面，用户参与度高的平台的流量增长趋势明显大于用户参与度低的平台，并且电子商务变得更具有社交性，各电商拥有了分享功能。用户的分享为平台提供了一大部分流量，来自用户对用户的宣传与讨论也促进产品的销售。总结下来国外电商发展主要呈以下几种趋势：趋势一：小商店将得到大平台的支持趋势二：美国的巨头们将丧失对全球在线零售业的掌控趋势三：用户参与度将是一项更重要的因素趋势四：电子商务将变得更具社交性电子商务越来越渗入每一个人的生活，在

9、今后的发展中，会更加离不开电子商务。对于企业来说，拓展电子商务越来越必要。 第二节 公司的重要性在电子商务发展迅猛的今天，公司成为各大企业竞争的一项要点。各公司的功能与用户体验也影响用户选择公司。有利于提升企业形象企业的作用更类似于企业在报纸和电视上所做的宣传企业本身及品牌的广告。可以全面详细地介绍企业及企业产品企业的一个最基本的功能，就是能够全面、详细地介绍企业及企业产品。企业可以把任何想让人们知道的信息放入。如企业简介、企业的人员、厂房、生产设施、研究机构、产品外观、功能及使用方法等，都可以展示于网上。还可以在线销售，可以与潜在客户建立商业联系这是企业最重要的功能之一，也是为什么那么多企业

10、非常重视建设的根本原因。现在，世界各国的经销商主要都是利用互联网络来寻找新的产品和新的供求，因为这样做费用最低.效率最高。原则上，全世界任何人，只要知道了企业的网址，就可以看到企业的产品和服务。因此，关键在于如何将企业网址推广出去。公司在对于老客户的沟通方面也非常方便，使用公司的电子业务让公司每年省下一大笔费用，同时实现对客户的实时沟通也是非常重要的。第2章 DIV+CSS设计与制作技术第1节 网页设计与制作的主要工具网页设计工具：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、步：验收制作完成后，将会反复审核、测试、修改最后通过客户的验收，才算建好。第九步：宣传推广工作建好之后，需要对进行宣传推广，可以聘请网络优化团队，为的搜索进行优化。第十步：后期维护建成验收以后，如果涉及到图片文字更换及数据库升级、修改漏洞及找回管理员密码等情况需要修改，属于的后期维护。第三章 某公司设计第一节 确定公司创建的目的与意义根据论文题目，以售酒公司作为例子，售酒公司需求一个在线售卖红酒的。目的是发展公司的线上销售业务，来推动公司收益。公司创建能有效的宣传公司产品以及提高销量，并且加入电子商务行列。第2节 需求分析首先公司售酒的需要一个在线能购买公司产品的功能，也需要页面实现对于公司文

15、化的介绍。对于每一件商品需要有一个产品详情页面，能通过后台添加产品详情信息。需要秒杀商品页，能展示商品秒杀和记录哪些用户秒杀了商品。需要用多种方式来展示公司产品，不显得单调死板，也不能显得花里胡哨，体现公司文化的稳重。首页需要大图来突出展示几种商品，也需要小块的商品展示以便于介绍更多商品。第3节 设计工作流程第一、对整体风格的设计这是对整体框架的定位，对于红酒行业，的风格会有不一样的风格表现形式，在视觉上突出一种优雅和高贵的感觉，让用户视觉上定位该站，符合用户的视觉印象。加深网页元素在用户面前的表现力，增强用户的购买欲。决定使用酒红色作为全站的主色调，风格上采用扁平化，使用块状的设计让更加简洁

16、大气。第二、进行网页的布局设计的布局结构性质继承上面第一步的表现风格，在添加丰富的酒元素，用酒和优雅去“熏”出每一个页面。使页面的表现带动访客的心灵。第三、产品目录的平面设计；定好位，并布好局，设计大的div块。暂时先不管块中的容，先想好容器的摆放位置，将需要表现的东西的大块先在页面上摆放合适。随后再进行更加细节方面的制作，将的整体制作成为psd文件，为接下来切图做好准备。第四、各类专题广告设计；好产品当然要有好广告，酒香也怕巷子深的哦，做个大大的广告banner，这样客户在访问的时候，知道当前主要推荐的容是什么。突出某些产品或者服务，在网页上添加各种广告元素gif图片、flash动画等等，尽

17、量吸引访客的眼球，然后突出的表现想表现的东西，这样就更加促成了转换率了。第五、利用div+css制作页面。网页设计固然重要，但是最关键的是如何将网页制作出来，设计和制作上面还会有不小的冲突，在切图后将页面排版出来，做出最初的div模型。制作时可以使用各种插件辅助工作，因为网上的js插件都是开源的，使用起来不用担心问题。Div模型制作出来之后将各种产品的排版加入其中，使之成为一个完整的页面。然后可以考虑的动画效果问题。这个问题需要考虑的更多，对于各种浏览器的支持以及兼容性问题，争取能兼容各大浏览器。第六、的测试与交互网页的div+css排版制作完成后需要交给制作后台的人员进一步工作，交付前需要进

18、行兼容性测试，测试完成后将静态的网页文件交出进行后台添加变成动态网页。完成产品的添加以及各种功能的实现。第4节 栏目设计首页导航栏：点击导航栏能进行挑战，本页面跳转。轮播栏：轮播栏展示公司主要推荐购买的三种产品。秒杀栏：倒计时秒杀，做出动画显示倒计时，使网页看起来不是那么死板。产品展示栏：产品展示，通过后台添加图片和介绍在前台展示，此处暂时只作为效果展示，不具备后台。友情栏：网页友情，将用于推广网页。可后台添加，此处只作为效果展示。脚部声明栏：必要的网页声明，否则，只作为效果展示。公司介绍页公司介绍页面主要为公司照片展示与公司文字介绍。产品详情页产品展示栏：展示产品的大图，并且添加价格及优惠。

19、同时提供购买和加入购物车选项。产品详情页面：产品详细介绍，以及优惠详情，各种信息可以加入其中，把想告诉客户的全部放在详情页面中。限时抢购页限时抢购商品展示栏：展示前面的限时抢购商品，提供抢购按钮，并且时间到了才能抢。政策法规页面结构大体上与公司详情页一样，可以排版图文。第四章 公司制作第一节 设计草图首先需要确定的是网页的宽度，现在的主流显示器的分辨率有1280*960（4:3屏幕）、1366*768（低分屏笔记本）、1440*900（低分屏宽屏）或者更高1080P、2160P等。设计网页为了使这些分辨率的电脑都能使用，设计的宽度不能超过1280主流显示器的宽度。又为了保证横向的滚动条不会显示

20、出来，采用了1248px宽度。整个网页居中显示，每一栏目使用栏目背景颜色填充，使能适应各种分辨率。画出草图如图4-1所示：图 4-1 草图1首页的页面规定好之后接下来的所有页面可以按照首页的模板制作头部和脚部，只用替换掉中间的容即可。图4-2是抢购页面：图 4-2 草图2抢购页面产品如果有多个产品可以无限延伸下去。剩下的政策法规、公司简介栏目只需要替换首脚部，中间使用图文混排并居中即可。第二节 设计制作PSD模板使用工具PS制作网页效果图，并且使用切片工具将图片切成小图，避免不必要的背景色图片浪费图片资源，用户加载慢。优化打开速度和用户体验。制作时合理使用PS中的辅助线工具能让网页看起来格式对

21、齐。先确定结构是左右结构还是一块块拼接或者瀑布流。确定后考虑配色，将的配色确定后，一块一块的设计完成组装起来成为一个页面，页面可能比较长，超过10000px的页面不能保存为psd，解决方法：保存为psb格式文件或者分成两个psd分别保存与切片，都需要与开发人员写注释或者交流清楚。首先需要制作的头部如图4-3所示。图 4-3 网页设计1首先设计出的logo及加上起名等，在旁边做出文字介绍等容。列出需要的页面做出菜单，并将选中的菜单项目稍微调色表示选中，如图4-4所示。图 4-4 网页设计2随后制作搜索框，一定要保证文本与搜索框对齐，不然排版会显得参差不齐。接下来制作轮播页面，暂时先把轮播页面的图

22、片排好版，将使用如下图片示例，图文混搭做出banner图效果后。可以在网上下载按钮等文件表示此图将轮播，在图片下方需要使用块来告诉用户有几轮播，可以通过点击块来跳转页面。图 4-5 设计3图片制作好后，把他加入到网页中，插入按钮等一定要注意对齐。图 4-6 设计4接下来秒杀栏目使用网上的瓶装葡萄酒图片素材加上文案做出图4-7效果：图 4-7 设计5商品展示栏做出三个风格差不多的样式，都是使用上面标题加上下面小块商品拼接而成，商品只是做出一个模板可以复制多个：图 4-8 设计6最后制作脚部，再次强调文本一定要对齐，并且尽量不要使用宋体。由于LW红酒只是作为示没有申请各种文件，此处使用x将声明信息

23、打码，友情方面只作为样式参考。图 4-9 设计7整页psd样式，其中商品展示栏需要制作多个这里不再赘述：图 4-10 设计8由于页面太长，需要设计一个专门做导航来浮动显示，随时可以跳转到位置，此处二维码可以替换成为公司的手机站或者app，暂时使用无关的二维码仅作示。图 4-11 设计9接下来使用切片工具仔细的将页面中的图片切出来，然后主页就完成啦。图 4-12 设计10接下来完成子页面，子页面基本都是单页，使用ps将页面设计完成。全站头脚都使用首页的样子，只是稍微改动中间部分。图 4-13 设计11当然这个页面中的所有文字都是可以更改的，价格标题都是为了给后台开发人员作为样式参考。然后是公司简

24、介，只需要替换头脚中间图文居中即可：图 4-14 设计12政策法规页面与公司简介页面一致。第3节 利用DIV+CSS制作页面开始制作页面，首先需要创建一个html文档，根据HTML5标准写上声明： 红酒特卖当然也可以根据html4的标准声明，这只是HTML5把他简化了而已。使用很多软件创建空白html文档的时候会自动生成声明。现在需要将外部样式表css链入文档中，顺便将需要使用的js也一起进去。比如jQuery库和自己用来写代码的js。将以上说的这些写在中间。根据前面设计好的草图先大概做出div的框架。图 4-15 制作1然后设计导航栏，使用hr标签来把每个A标签分隔开，之后在href中写上的

25、位置，页面跳转至div用#号表示。将处分别填上想要跳转至的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;to

26、p:200px;right: 30px;text-align: center;#daohang acolor:#fff;font-family: 黑体;font-size: 18px;font-weight: bold;text-decoration: none;line-height: 40px;vertical-align: middle;然后开始制作头部，将logo和搜索框制作出来，将需要的图片命名好之后放入images文件夹，在wrap中添加代码：热门：博高干红葡萄酒伯爵冰葡萄酒宝得根庄园红葡萄酒在css.css中定义好中间各class样式将页面的表现与psd中的展示一致。并且在a标签

27、的href中添加javascript:void(0);实现鼠标指针指上去时候变成手型并且不会进行任何跳转。此在后期制作后台的时候会替换掉。不然会影响到的seo，搜索引擎的权重会因为这个降低。然后是关于菜单的制作。菜单样式在ps中有规定颜色，并且选中的菜单会有不一样的效果，此处可以用切图，但是会导致占用很多资源导致使用起来的用户体验降低。尽量要使用文字来解决这个问题。想起来画面蛮复杂的，实际上菜单的前台其实很简单，使用ul、li标签直接制作出来就可以了：首页限时抢购 预售公司简介政策法规购买咨询菜单可以出效果的主要原因是定义样式，在css.css中加入样式：.nav_menu position: relative;height: 44px;line-height: 44px;font-size: 16px;background-color:#700702;.nav_menu ul li float: left;margin:0 0.5%;.nav_menu ul li a