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

《网页设计与制作毕业论文设计》由会员分享，可在线阅读，更多相关《网页设计与制作毕业论文设计（30页珍藏版）》请在装配图网上搜索。

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

2、公司创建的目的与意义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 Ben Frai

3、n, 响应式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、涵盖的X围很广，一般可分为代理商、商家和消费者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，门店在线Online to Partner，O2P等8种模式。近年电子商务在中国开展

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

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

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

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

10、和新的供求，因为这样做费用最低.效率最高。原如此上，全世界任何人，只要知道了企业的网址，就可以看到企业的产品和服务。因此，关键在于如何将企业网址推广出去。公司在对于老客户的沟通方面也非常方便，使用公司的电子业务让公司每年省下一大笔费用，同时实现对客户的实时沟通也是非常重要的。第二章 DIV+CSS设计与制作技术第一节 网页设计与制作的主要工具网页设计工具：PS、CorelDraw、Ai、Flash等网页制作的主要工具有：Dreamweaver、VisualStudio、Idea、PHPStorm、记事本等网页设计与制作的工具有很多，很多软件具有强大的开发辅助功能。设计方面需要一个图像制作软件，

11、图像处理软件很多。功能强大并且越顺手越适合使用，软件需要提供切片功能。制作方面，Dreamweaver作为一个保姆型入门软件将所有的方面考虑的很周全，让网页开发变得简单。熟练后也会发现Idea工具非常好用。而后面提到了记事本，明确网页的制作工具要求其实非常的低，是个文本编辑器根本都是可以制作网页的，文本工具占用的磁盘空间非常小，而网页的体积小也正是他流通的优势。本文接下来主要使用的工具有PS+VisualStudio。第二节 DIV+CSS技术介绍DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格table布局定位的方式不同，它可以实现网页页面内容与表现相别离。提起DIV

12、+CSS组合，还要从XHTML说起。XHTML是一种在HTML标准通用标记语言的子集根底上优化和改良的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。通过外链样式CSS，可以给进展模板制作，将样式的编写操作屡次引用达到节省操作的目的。第三节 制作流程第一步：确定需求。客户将自己所要建设的功能以与相关要求告知设计人员，如想要的效果，开设的栏目，想要的风格等。同时需提供制作的相关资料，产品描述，详细的框架设计要求等。第二步：制定制作方案双方就制作的内容、风格、细节等问题进展协商，以达成共识。为建设的开展做铺垫。第三步：签定制作合同，支付预付款双方签定制作合同，合约是双

13、方利益的保障。支付预付款之后开始动工了。第四步：注册域名、空间选择适宜的注册域名和空间。为之后的开发做良好的铺垫。第五步：制作定位确定的定位，作为产品销售和公司介绍的，给定好位。利于接下来的开发。第六步：风格设计的风格包括很多方面，整个的总体风格，每个栏目频段自己独有的风格，根本框架的设计等。最后将初步做好的与客户进展讨论并加以改良。第七步：制作应当有一个很清晰的介绍，有一个简洁的界面，需要告诉访问者能够提供些什么，以便访问者能找到想要的东西。有效的导航条和良好的结构，使人们很容易找到需要的产品，这对客户很重要。第八步：验收制作完成后，将会反复审核、测试、修改最后通过客户的验收，才算建好。第九

14、步：宣传推广工作建好之后，需要对进展宣传推广，可以聘请网络优化团队，为的搜索进展优化。第十步：后期维护建成验收以后，如果涉与到图片文字更换与数据库升级、修改漏洞与找回管理员密码等情况需要修改，属于的后期维护。第三章 某公司设计第一节 确定公司创建的目的与意义根据论文题目，以售酒公司作为例子，售酒公司需求一个在线售卖红酒的。目的是开展公司的线上销售业务，来推动公司收益。公司创建能有效的宣传公司产品以与提高销量，并且参加电子商务行列。第二节 需求分析首先公司售酒的需要一个在线能购置公司产品的功能，也需要页面实现对于公司文化的介绍。对于每一件商品需要有一个产品详情页面，能通过后台添加产品详情信息。需

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

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

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

18、产品的添加以与各种功能的实现。第四节 栏目设计首页导航栏：点击导航栏能进展挑战，本页面内跳转。轮播栏：轮播栏展示公司主要推荐购置的三种产品。秒杀栏：倒计时秒杀，做出动画显示倒计时，使网页看起来不是那么死板。产品展示栏：产品展示，通过后台添加图片和介绍在前台展示，此处暂时只作为效果展示，不具备后台。友情栏：网页友情，将用于推广网页。可后台添加，此处只作为效果展示。脚部声明栏：必要的网页声明，否如此某某，只作为效果展示。公司介绍页公司介绍页面主要为公司照片展示与公司文字介绍。产品详情页产品展示栏：展示产品的大图，并且添加价格与优惠。同时提供购置和参加购物车选项。产品详情页面：产品详细介绍，以与优惠

19、详情，各种信息可以参加其中，把想告诉客户的全部放在详情页面中。限时抢购页限时抢购商品展示栏：展示前面的限时抢购商品，提供抢购按钮，并且时间到了才能抢。政策法规页面结构大体上与公司详情页一样，可以排版图文。第四章 公司制作第一节 设计草图首先需要确定的是网页的宽度，现在的主流显示器的分辨率有1280*9604:3屏幕、1366*768低分屏笔记本、1440*900低分屏宽屏或者更高1080P、2160P等。设计网页为了使这些分辨率的电脑都能使用，设计的宽度不能超过1280主流显示器的宽度。又为了保证横向的滚动条不会显示出来，采用了1248px宽度。整个网页居中显示，每一栏目使用栏目背景颜色填充，

20、使能适应各种分辨率。画出草图如图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随后制作搜索框，一定要保证文本与搜索框对齐，不然排版会显得参差不齐。接下来制作轮播页面，暂时先把轮播页面的图片排好版，将使用如如下图片示例，图文混搭做出banner图效果后。可以在网

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

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

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

25、。返回顶部秒杀名庄酒菁英特荐周年爆款 关闭最后的关闭按钮使用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:

26、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标签的href中添加javascript:void(0);实现鼠标指

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

28、ht: 44px;font-size: 16px;background-color:#700702;.nav_menu ul li float: left;margin:0 0.5%;.nav_menu ul li a display: inline-block;padding: 0 17px;color: #fff;text-align: center;这样添加之后菜单就已经成型了，还差一个选择的效果，给它定义一个class=selected。并且在css中参加：.nav_menu ul li a:hover, .nav_menu ul li a.selected background-co

29、lor:#8C0903;text-decoration: none;这样子菜单的样式就已经完成了，hover定义将鼠标指上去时，而平时高亮显示出来的菜单，只需要给它加上一个selected的样式就可以了。接下来需要给购置咨询添加一个弹出 的提示框的事件，在购置咨询中参加：onclick=alert(请拨打 028-*);如下样式：购置咨询轮播的头图可以去网上找jQuery插件修改起来比拟方便，找到适宜的轮播插件下载下来后，将自己的图片替换上去，并且自己修改一些参数，比如速度，轮播的动画方式。前台使用规定格式的代码不要出错，不然插件也会出问题，还有就是记得要引用jQuery。接下来是抢购栏目了，

30、因为之前ps中制作到这个栏目都是用的图片，所以在做网页的时候也非常方便，做好div用img标签把图片放进去就好了： 对于class：mid定义的是居中，下面会引用好几次，所以作为class写入外部css中，psd中可以看出这个页面的背景是填充满页面的，所以需要定义外面包含的大块#content：#contentbackground:#fdd42e;商品展示页面需要将标题制作成图片居中：将图片放好之后就要慢慢的去制作商品的模板了，由于商品价格和标题以与介绍都是后台要能改动的，所以不能使用图片直接来放在页面上。先制作出一个商品的展示块：宝得根庄园红葡萄酒2010(名庄预售)￥1888波尔多梅多克1

31、855分级列级酒庄之5级列庄(5st GCC en 1855) 原价：￥3500立省：￥1612  立即  抢购后面还需要制作很多个这样的商品展示块，所以不能使用id来选择。中间所有的样式全部用class选择。其中的各种需要细心慢慢去调整，必要时可以更改定位方式position属性，relative属性是相对定位，相对于之前的容器。float属性使用时要注意方法不要影响到之后的样式。css样式中这样写：.jiuwidth:230px;height:240px;background:#f63;float:left;margin-right:5px;marg

32、in-bottom:5px;.jiu_onewidth:230px;height:190px;background:#fff;.jiu_twowidth:230px;height:50px;background:#F63;.font_hide position: relative;left: 0px;top: -72px;width:130px;height:43px;overflow:hidden;background:#fff;然后可以将这一块商品展示复制8次，变成页面上的样子，并且根据文案修改成不一样的文字、价格查看效果：图 4-16 制作2紧接着会发现当介绍的文案过长时div装不下那么

33、多字只显示出来一半，需要做一个隐藏显示操作来将所有的文案显示出来，之前定义的font_hide样式现在就有用了，可以通过jQuery选择器选中所有具有font_hide样式的块为他绑定事件。所以在my.js中参加：$(.font_hide).hover(function()$(this).css(height,170px););$(.font_hide).mouseleave(function()$(this).css(height,43px););并在css中写入：.font_hide atext-decoration:none;color:#111;font-weight: bold;特别

34、注意.font_hide中要参加两条属性，一个是透明度，一个是层次：opacity:0.7;z-index:10;当鼠标移动上去的时候，这个div的高度变成了170像素，鼠标移开之后又恢复原样。并且这个介绍文字会有一个透明度70%。下面来查看效果：图 4-17 制作3图 4-18 制作4然后制作第二第三个商品展示栏目的时候，可以整体复制第一个商品展示栏目改掉id为content_one和content_two。然后将设计好的标题替换掉之前的图片，配色方案选择好。不要看起来特别奇怪，将背景颜色改变后可以进展进一步的商品管理设计。想要在第三个商品展示栏加上如图4-19效果的模块：图 4-19 制作

35、5这其实也非常简单，只需要在content_two中，所有的div class=jiu之上参加两个div。这也是div与css技术非常方便的一点，可以像制作表格一样随意插入在某div上面。使用map属性来给图片加上，使用户能够点击抢购按钮跳转。最后把友情和声明做好，由于都是文本，所以做起来格外简单。要注意的是字体千万不要用宋体，会显得与其他内容格格不入，代码如下：友情：百度新浪开放平台诚聘英才联系我们合作法律声明廉正举报阿里巴巴集团Copright XXXXXXXXXXXXXXXX All Rights Receved蜀ICP备xxxxxxxxxxxx号 XXXXXX 所有联系 ：xxxxxx

36、xxxxxxx紧接着添加css：.linkpadding: 15px 0;background-color: #e5e5e5;position: relative;.link .link_left, .link .link_rightfont-size: 13px;.link .link_leftfloat: left;.link .link_left spancolor: #FD9909;.link .link_rightmargin-left: 65px;.link .link_right adisplay: inline-block;color: #444;margin-right: 1

37、5px;vertical-align: middle;.footermin-width:1024px;margin: 0 auto;padding: 30px 0px;font-size: 14px;color: #fff;line-height: 160%;background-color:#000;首页就制作完成啦，然后将制作好的html和css保存，开始使用各种浏览器测试。很多浏览器中带有兼容性检查的插件，不过还是要手动测试一些浏览器的兼容性。需要测试的主流浏览器有：Safari、chrome、IE、Google、opera以与新出现的Edge。首页制作完成之后开始制作子页面，制作公司简

38、介。先把css和jQuery引用，将页面保存在html文件夹中，引用css时，需要修改路径：href=./css/css.css 。把首页的头部和菜单复制过来，并且需要修改class=selected的位置到公司简介位置：公司简介然后将页面的友情和声明复制过来放在页面最下部。根据前面设计的psd模板，设计页面结构设计出来：LW红酒葡萄园 将简介的内容放在P标签中参加页面，公司简介页面就制作完成了，然后需要做一个的跳转，首先找到首页的公司首页a标签将添加好：公司简介。随后找到公司简介页面的a标签修改：首页。制作政策法规页面时，直接将gs.html复制一份，因为大体框架都是一样的，只需要

39、替换中间的文案局部。将图片删除，标题替换到hr标签中，正文每一段使用一个p标签。稍微再调整一下行距、样式等，政策法规页面就完成了。然后修改完成的三个页面的跳转，使制作出来的页面可以互相跳转。菜单栏selected一定要记得剪切到政策法规标签中了，样式就出来啦：图 4-20 制作6抢购页面也是按照之前做好的模板样式来制作，首先拷贝首页的头脚局部，将css和jQuery引用。然后开始制作产品的排版。首先需要一个铺满全网页的背景：将背景样式定义好之后，把产品展示的div放在其中，排版的效果按照psd中显示的一样。其中中间块的背景色在ps中吸取产品上面的颜色。代码如下： 博高干红葡萄酒博高干红葡萄酒介

40、绍XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXX XXXXXXXXXXX XXXXXX XXXXXXXXXX立即抢购Css样式如下：.xxh1color:White;font-family: 微软雅黑;font-size:60px;.xxatext-indent:2em;color:White;font-family: 微软雅黑;margin-left:2em;margin-right:2em;.xxa a:link color:White;text-decoration:underline;.xx

41、a a:visited color:White;text-decoration:none;.xxa a:hover color:White;text-decoration:none;.xxa a:active color:White;text-decoration:none;.leftfloat:left;.w100width:100%;此页面中通过浮动的方法使所有的文字图片等完成psd中的效果，当然文字与价格仅仅是作为一个样式示X来给后天开发人员看到效果，而所有的文字都是会从数据库中读取的。制作好一段之后在浏览器中查看效果：图 4-21 制作7然后复制四段，替换掉其中的图片和背景颜色。发现所

42、有的产品都在一边，然后找到img标签中的 class=left ，如果需要产品图片显示在右边，将其删除即可。然后查看效果：图 4-22 制作8成功，页面完成。检查所有页面菜单栏跳转，根本完成。第五章 总结制作一个需要多个页面，当需要制作一个网页时，那不会很难。当制作一个优秀的时，那工作量就大了。需要确定整站风格，确定整站样式，整站需求，还有站内跳转，数据来源等等。还有一系列工序，本文仅仅是介绍了div+css技术制作能交付后台开发使用的网页。在电子商务飞速开展的今天，学好html将成为求职路上一块重量级的敲门砖。第六章 致谢在这次论文写作之前对于div+css实战经验缺乏的我，通过对于这次论文

43、的写作扎实了自己的知识。在这短短几个月的时间学习到了许多书本上学习不到的知识，感谢学校对于论文写作的规X要求，让我对于文章的排版大有改善。随着毕业设计的完成，我也将要毕业了，再也无法像过去三年可以在学校吃，在学校住，在学校学习。感谢学校三年来对我的栽培，感谢计科系教师的教诲。特别要感谢的是我的论文指导教师XX。大学期间担任科代表，学到的知识远超过其他同学。不光是学习，青教师还处处指导方方面面的小事情。大学期间什么事情都有与青教师商量的习惯，也耽误了教师不少时间。青教师也没有不耐烦过，谢谢您的教诲。在论文写作期间，教师也处处指导，仔仔细细检查论文格式以与内容上面需要修改的地方。相信整篇论文一定花

44、了不少时间吧，让您费心了。再次感谢论文指导教师XX。感谢实习指导教师林超对论文写作的指导与帮助。感谢网络资料以与参考文献的分享者。参考文献1 中华人民某某国商务部，中国电子商务报告(2014)，中国商务。2 美国零售市场研究报告，连锁2014年6月刊。3 Ben Frain, 响应式Web设计,人民邮电，2015年7月3日4 李东博，Dreamweaver+Photosho网页设计，清华大学,20105 喻浩，CSS+DIV网页样式与布局，清华大学,20136 8Mark Pilgrim，HTML5 Up and Running，2010年8月9X西杰、柳林，HTML、CSS、JavaScri

45、pt网页制作从入门到精通，人民邮电，2013年1月1日10布莱恩特 (Jay Bryant)，高性能HTML5，电子工业，2014年5月1日XXXXXXXX学院毕业论文设计实施过程记录表毕业论文设计题目设计与制作DIV+CSS)指导教师XX班级XXXXXXXX某某XX学号XXXXXXXX选题与布置任务书阶段进展情况记录：搜集资料查阅，明白选择的题目的主要内容，选择适宜的题目。确定任务书上的要求，给自己一个明确的方向，以便于接下来工作的开展。大X围的选择相关资料备用。指导教师指导意见： 指导教师签名 年 月 日资料收集和初稿撰写阶段进展情况记录：更加明确的选择资料，找出对论文有用的参考资料，同时

46、开始撰写初稿。先理清论文的大纲，将主要框架制作完成，再思考细致的方面应该怎样去完成。制作作品时同步完成初稿的撰写。指导教师指导意见： 指导教师签名 年 月 日修改完善和定稿阶段进展情况记录：对于格式进一步检查与规X，同时对于内容中冗长局部的删减，对描述不足局部进展补充。对于作品不足的地方进展修改同时修改论文，对图片进展编号。指导教师指导意见： 指导教师签名 年 月 日XXXXXXXX学院毕 业 论 文设 计评 审 表班 级XXXXXXXX姓 名XX学 号XXXXXXXX设计论文题目设计与制作DIV+CSS)指导教师XX评价内容评 语总分为评分沟通与反应10分调查论证、文献查阅资料整理能力20分论文质量50分论文特色、创新点20分论文设计总分评阅人签字： 年 月 日30 / 30