网站设计与制作(div css)大学

XXXXXXXXXX学院毕业论文论文（设计）题目：网页设计与制作
班级：
姓名：
学号：
指导教师：
时间：2016年5月30日
XXXXXXXX学院
毕业设计（论文）任务书
XXXXXXXX学院
网站设计与制作（DIV+CSS)
作者姓名（XX）
内容摘要：本文从电子商务发展出发，详细讲述了国内外电子商务的发展已经渗透到生活和工作的方方面面，而且电子商务技术也将成为新世纪商家不可缺少的发展道路。

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

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

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

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

关键词：（楷体五号）div css 售酒网站电子商务
目录
第一章绪论 (6)
第一节国内外电子商务发展的现状 (6)
第二节公司网站的重要性 (7)
第二章 DIV+CSS网站设计与制作技术 (8)
第一节网页设计与制作的主要工具 (8)
第二节 DIV+CSS技术介绍 (8)
第三节网站制作流程 (8)
第三章某公司网站设计 (10)
第一节确定公司创建网站的目的与意义 (10)
第二节需求分析 (10)
第三节设计工作流程 (10)
第四节栏目设计 (11)
第四章公司网站制作 (12)
第一节设计草图 (12)
第二节设计制作PSD模板 (13)
第三节利用DIV+CSS制作网站页面 (20)
第五章总结 (27)
第六章致谢 (28)
第一章绪论
第一节国内外电子商务发展的现状
电子商务，涵盖的范围很广，一般可分为代理商、商家和消费者（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种模式。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结下来国内外电商发展主要呈以下几种趋势：
趋势一：小商店将得到大平台的支持
趋势二：美国的巨头们将丧失对全球在线零售业的掌控
趋势三：用户参与度将是一项更重要的因素
趋势四：电子商务将变得更具社交性
电子商务越来越渗入每一个人的生活，在今后的发展中，会更加离不开电子商务。

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

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

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

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

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

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

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

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

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

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

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

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

第二章 DIV+CSS网站设计与制作技术
第一节网页设计与制作的主要工具
网页设计工具：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，可以给网站进行模板制作，将样式的编写操作多次引用达到节省操作的目的。

第三节网站制作流程
第一步：确定网站需求。

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

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

第二步：制定网站制作方案
双方就网站制作的内容、风格、细节等问题进行协商，以达成共识。

为网站建设的开展做铺垫。

第三步：签定网站制作合同，支付预付款
双方签定《网站制作合同》，合约是双方利益的保障。

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

第四步：注册域名、空间
选择合适的注册域名和空间。

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

第五步：网站制作定位
确定网站的定位，作为产品销售和公司介绍的网站，给网站定好位。

利于接下来的开发。

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

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

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

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

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

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

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

第三章某公司网站设计
第一节确定公司创建网站的目的与意义
根据论文题目，以售酒公司作为例子，售酒公司需求一个在线售卖红酒的网站。

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

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

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

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

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

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

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

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

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

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

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

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

第三、产品目录的平面设计；
定好位，并布好局，设计大的div块。

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

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

第四、各类专题广告设计；
好产品当然要有好广告，酒香也怕巷子深的哦，做个大大的广告banner，这样客户在访问网站的时候，知道当前主要推荐的内容是什么。

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

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

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

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

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

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

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

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

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

第四节栏目设计
首页
导航栏：点击导航栏能进行挑战，本页面内跳转。

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

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

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

友情链接栏：网页友情链接，将用于推广网页。

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

脚部声明栏：必要的网页声明，否则违法，只作为效果展示。

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

产品详情页
产品展示栏：展示产品的大图，并且添加价格及优惠。

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

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

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

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

第四章公司网站制作
第一节设计草图
首先需要确定的是网页的宽度，现在的主流显示器的分辨率有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-7效果：
图4-7 网站设计5
商品展示栏做出三个风格差不多的样式，都是使用上面标题加上下面小块商品拼接而
成，商品只是做出一个模板可以复制多个：
图4-8 网站设计6
最后制作脚部，再次强调文本一定要对齐，并且尽量不要使用宋体。

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

整页psd样式，其中商品展示栏需要制作多个这里不再赘述：
图4-10 网站设计8
由于页面太长，需要设计一个专门做导航来浮动显示，随时可以跳转到位置，此处二维
码可以替换成为公司的手机站或者app，暂时使用无关的二维码仅作示范。

图4-11 网站设计9
接下来使用切片工具仔细的将页面中的图片切出来，然后主页就完成啦。

图4-12 网站设计10
接下来完成子页面，子页面基本都是单页，使用ps将页面设计完成。

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

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

然后是公司简介，只需要替换头脚中间图文居中即可：
政策法规页面与公司简介页面一致。

第三节利用DIV+CSS制作网站页面
开始制作网站页面，首先需要创建一个html文档，根据HTML5标准写上声明：
<!DOCTYPE html>
<html>
<head>
<title>红酒特卖</title>
</head>
<body>
</body>
</html>
当然也可以根据html4的标准声明，这只是HTML5把他简化了而已。

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

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

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

将以上说的这些写在<head></head>中间。

<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/my.js"></script>
根据前面设计好的草图先大概做出div的框架。

图4-15 网站制作1
然后设计导航栏，使用hr标签来把每个A标签分隔开，之后在href中写上链接的位置，页面内跳转至div用#号表示。

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

<div id="daohang"><a href="#">返回顶部</a><hr /><a href="#content">秒杀</a><hr/><a href="#content_one">名庄酒</a><hr/><a href="#content_two">菁英特荐</a><hr/><a href="#content_three">周年爆款</a><hr/><img src="images/erweima.jpg" width="120" height="120" /> <a id="close">关闭</a></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;} #daohang a{color:#fff;font-family: "黑体";font-size: 18px;font-weight: bold;text-decoration: none;line-height: 40px;vertical-align: middle;} 然后开始制作头部，将logo和搜索框制作出来，将需要的图片命名好之后放入images 文件夹，在wrap中添加代码：
<div class="logo"><img src="images/logo.jpg" alt="LW红酒专卖网" /></div><div class="serach"><div class="serach_con"><input type="text" /><a href="javascript:void(0);"><img src="images/serach.png" alt="搜索" /></a></div><div class="hot_serach"><span>热门：</span><a href="javascript:void(0);">博高干红葡萄酒</a><a href="javascript:void(0);">伯爵冰葡萄酒</a><a href="javascript:void(0);">宝得根庄园红葡萄酒</a></div></div> 在css.css中定义好中间各class样式将页面的表现与psd中的展示一致。

并且在a 标签的href中添加链接javascript:void(0);实现鼠标指针指上去时候变成手型并且不会进行任何跳转。

此链接在后期制作后台的时候会替换掉。

不然会影响到网站的seo，搜索引擎的权重会因为这个降低。

然后是关于菜单的制作。

菜单样式在ps中有规定颜色，并且选中的菜单会有不一样的效果，此处可以用切图，但是会导致占用很多资源导致使用起来的用户体验降低。

尽量要使用文字来解决这个问题。

想起来画面蛮复杂的，实际上菜单的前台其实很简单，使用ul、li标签直接制作出来就可以了：
<ul><li><a href="javascript:void(0);" class="selected">首页</a></li><li><a href="javascript:void(0);">限时抢购 </a></li><li><a href="javascript:void(0);">预售</a></li><li><a href="javascript:void(0);">公司简介</a></li><li><a href="javascript:void(0);">政策法规</a></li><li><a href="javascript:void(0);">购买咨询</a></li></ul>
菜单可以出效果的主要原因是定义样式，在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 {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-color:#8C0903;text-decoration: none;}
这样子菜单的样式就已经完成了，hover定义将鼠标指上去时，而平时高亮显示出来的菜单，只需要给它加上一个selected的样式就可以了。

接下来需要给购买咨询添加一个弹出电话号码的提示框的事件，在购买咨询中加入：
onclick="alert('请拨打电话028-********');"如下样式：
<li><a href="javascript:void(0);" onclick="alert('请拨打电话
028-********');">购买咨询</a></li>
轮播的头图可以去网上找jQuery插件修改起来比较方便，找到合适的轮播插件下载下
来后，将自己的图片替换上去，并且自己修改一些参数，比如速度，轮播的动画方式。

前台
使用规定格式的代码不要出错，不然插件也会出问题，还有就是记得要引用jQuery。

接下来是抢购栏目了，因为之前ps中制作到这个栏目都是用的图片，所以在做网页的
时候也非常方便，做好div用img标签把图片放进去就好了：
<div id="content"><div id="content_mid" class="mid"><div id="tu_1"><img
id="tu1" src="images/prod01.jpg" width="239" height="478" /></div> <div
id="tu_2"><img id="tu2" src="images/prod02.jpg" width="239" height="478" />
</div><div id="tu_3"><img id="tu3" src="images/prod03.jpg" width="239"
height="478" /></div><div id ="tu_4"><img id="tu4" src="images/prod04.jpg"
width="239" height="478" /></div></div></div>
对于class：mid定义的是居中，下面会引用好几次，所以作为class写入外部css中，
psd中可以看出这个页面的背景是填充满页面的，所以需要定义外面包含的大块#content：#content{background:#fdd42e;}
商品展示页面需要将标题制作成图片居中：
<div id="content_one_pic"><img src="images/title06.jpg" width="938"
height="270" /></div>
将图片放好之后就要慢慢的去制作商品的模板了，由于商品价格和标题以及介绍都是后
台要能改动的，所以不能使用图片直接来放在页面上。

先制作出一个商品的展示块：<div class="jiu"><div class="jiu_one"><img style="float:left;"
src="images/jiu_1.jpg" width="93" height="177" /><div class="name"><a
href="javascript:void(0)" title="宝得根庄园红葡萄酒2010(名庄预售)">宝得根庄园红
葡萄酒2010(名庄预售)</a></div><div class="price">￥1888</div><div
class="font_hide"><a>波尔多梅多克1855分级列级酒庄之5级列庄(5st GCC en 1855)</a> </div></div><div class="jiu_two"><div style="height:5px;"></div><div
class="price_old">原价：￥3500<br />立省：￥1612</div><div class="lijiqianggou"><a
href="#">&nbsp;&nbsp;立即<br />&nbsp;&nbsp;抢购</a></div></div></div>
后面还需要制作很多个这样的商品展示块，所以不能使用id来选择。

中间所有的样式
全部用class选择。

其中的各种需要细心慢慢去调整，必要时可以更改定位方式position
属性，relative属性是相对定位，相对于之前的容器。

float属性使用时要注意方法不要影
响到之后的样式。

css样式中这样写：
.jiu{width:230px;height:240px;background:#f63;float:left;margin-right:5px;m
argin-bottom:5px;}
.jiu_one{width:230px;height:190px;background:#fff;}
.jiu_two{width:230px;height:50px;background:#F63;}
.font_hide {position: relative;left: 0px;top:。