孙阿姨快递网站的设计与实现
摘 要：人们生活节奏的不断提高，快递行业的发展越来越快，大家对快递服务的效率也越来越高，在我们学院，快递服务业却处在两难的境地，存在一定程度的市场空缺，需要我们建立校园快递服务平台进行填补。本论文着重对div+css布局与美化公司网页进行了讨论；同时根据客户需求，采用div+css实现了快递公司网页的设计，具体实现了首页、关于我们、我们的服务、客户指南、行业问题、行业资讯和联系我们等功能，系统符合公司网站的需求。
目 录
一、引 言 1
二、需要分析 1
三、开发工具选择 1
四、主体设计 2
（一）总体设计 2
1. 功能示意图，如图41所示： 2
2. 网页的布局结构 2
（二）首页div结构和层样式 3
（三）子页div结构和层样式 4
（四）网站基本功能 5
1. “首页”实现 5
2. “关于我们”实现 8
3. “我们的服务”实现 9
4. “客户指南”实现 10
5. “行业问题”实现 11
6. “行业资讯”实现 12
7. “在线反馈”实现 13
8. “联系我们”实现 14
9. 三级页面实现 15
（五）JavaScript特效介绍 16
1. 图片切换 16
2. 百度地图 17
六、总结 17
致 谢 19
参考文献 20
一、引 言
快递行业的发展越来越快，需求也变得更多。在这个潮流下,出现了许多校园代理服务点，这促进了校园快递的发展，同时也更好的提供了快递服务。快递业是随着电子商务的繁荣而迅速兴起的，想要发展好就要在网络上提升自己的服务质量。主流快递网站及网点的普及使消费者越来越方便。孙阿姨快递网站是针对在校大学生而设计的一个快递网站，它的服务范围是整个教育园，服务的人群主是教育园里面的学生和老师，对比一般的网点，它的服务范围变小，也变得精准，使快递的收发更加便捷。通过网站，老师和学生可以了解更多的校园快递服务信息，了解更多的相关行业问题，也
*好棒文|www.hbsrm.com +Q: #351916072#
可以通过网站来加强与师生在校园快递方面的交流沟通。
本网站通过调查快递行业的发展与现状、了解快递行业的相关信息。对收集的素材进行分类，筛选一些可用，及时的信息内容放入网站。在Photoshop中完成图片制作，应用Dreamweaver软件进行编辑排版，使用CSS样式表进行页面的美化。并运用JS技术来添加动画效果制作，最后通过超链接让各页面链接起来，制作一个结构完整，内容丰富的网站。
二、需要分析
本网站是针对当前学校的快递问题，当前学校师生了解快递公司的主要途径是网上购物及文件包裹递送，在电子商务平台日趋完善的今天，网购越来越普遍了，校园是一个广阔的市场需求也是在校园快递下的一个大商机。校园快递代理点的出现说明了这个事实，通过孙阿姨快递网站把校园代理点的服务信息传递给广大师生，使广大师生能通过本网站快捷方便的找到相关信息，同时享受到更好的服务。
三、开发工具选择
网站模块主要为首页简介以及内页详情介绍，给浏览者呈现完整且内容丰富的一个网站。
开发网站主要分为设计与实现运用到了不少相关软件，例如photoshop，Dreamweaver，CSS等。 Photoshop是网络平台上必不可少的一个修图软件，它能够大大提高图片的质量，是由Adobe Systems开发和发行的图像处理软件。 Photoshop处理的对象一般是像素功能不全面或者不清晰的图像。这个修图软件有着大量的编辑和修图工具，在制作过程中我们可以使用这些的修图工具，可以很有效率地进行图片编辑工作，让图像变得更加美观，也提高了图片质量。网站的设计中我主要是应用Photoshop软件进行图像处理和页面的设计，将网页设计好后，切图然后进行网页编辑。在本网站的设计上采用了Photoshop对图片进行处理，而且运用Photoshop工具进行页面整体效果的设计，其中应用了图层样式，文本工具以及图形工具等。
Dreamweaver是创建和管理网页的常用的可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术可以让用户任意导入HTML文档而无需重新设置代码格式。
Div技术的应用和表格的布局相比，减少了很多代码，同时提高了网页运行速度，使用div进行页面布局排版能力更完整，将设计部分剥离出来放在一个独立样式文件中，减少了没有用的代码，让网页的制作效率变高，效果变好。CSS样式表的运用，对页面进行了美化，对网页的背景、颜色、大小及段落排版等进行一系列的设置，想要拥有细化效果，只需修改样式表的内容，所有应用该样式的内容会随之全部改变。同时一个样式表可以在任意一个页面调用，大大的减少工作量，提高工作效率。通过样式表的规则设计的网站页面具有统一的风格，修改变得方便快捷。
四、主体设计
（一）总体设计
网页在制作过程中不仅要考虑到色彩和版式，更重要的也要在设计之初确认网站的功能结构，按照确立的功能结构制作网站，才行做到条理清楚，本网站根据功能需要制作功能结构。
功能示意图，如图41所示：
图41图站结构图
网页的布局结构
根据需求可以知道，在页面上部要有logo和导航，接下来使banner，中间部分的左侧显示若干次要的栏目，右侧则显示部分文章的内容及作品展示，页面最底端为页脚区域，显示一些版权信息。很明显可以用四行两列的布局方式来安排页面内容。如图42所示：
图42首页布局安排
内页在布局上沿用了首页的logo导航和banner 以及版权信息部分模版，在中间改变成左右结构，在左侧加上了二级菜单，方便用户进行切换内容的操作。右侧是与导航对应的内容信息。如图43所示：
图43内页布局安排
（二）首页div结构和层样式
首页采用层层叠加的布局模式，具体的布局，如图44所示：
图44首页div结构
首页div结构如下：
层样式如下：
（三）子页div结构和层样式
子页采用层嵌套的布局模式，具体的布局，如图45所示：
图4 5子页div结构
子页div结构如下：
层样式如下：
（四）网站基本功能
“首页”实现
首页设计内容包括logo、导航、 banner动画、关于我们简介、我们的服务、行业资讯及版权信息。
（1）Logo：针对自己对快递网的想法和认知，logo设计采用以白色为主搭配蓝色，设计图案似一个奔跑的人，突出“快递”的主题。如图46所示：
图46 Logo设计
（2）Banner：这个模块的设计，可以让观众一目了然，通过动态图片的切换，有效能吸引观众的一块功能，本功能模块调用了JS文件，图片有自动切换和手动点击切换的效果，进而仔细阅读网站的文字内容。如图47所示：
目 录
一、引 言 1
二、需要分析 1
三、开发工具选择 1
四、主体设计 2
（一）总体设计 2
1. 功能示意图，如图41所示： 2
2. 网页的布局结构 2
（二）首页div结构和层样式 3
（三）子页div结构和层样式 4
（四）网站基本功能 5
1. “首页”实现 5
2. “关于我们”实现 8
3. “我们的服务”实现 9
4. “客户指南”实现 10
5. “行业问题”实现 11
6. “行业资讯”实现 12
7. “在线反馈”实现 13
8. “联系我们”实现 14
9. 三级页面实现 15
（五）JavaScript特效介绍 16
1. 图片切换 16
2. 百度地图 17
六、总结 17
致 谢 19
参考文献 20
一、引 言
快递行业的发展越来越快，需求也变得更多。在这个潮流下,出现了许多校园代理服务点，这促进了校园快递的发展，同时也更好的提供了快递服务。快递业是随着电子商务的繁荣而迅速兴起的，想要发展好就要在网络上提升自己的服务质量。主流快递网站及网点的普及使消费者越来越方便。孙阿姨快递网站是针对在校大学生而设计的一个快递网站，它的服务范围是整个教育园，服务的人群主是教育园里面的学生和老师，对比一般的网点，它的服务范围变小，也变得精准，使快递的收发更加便捷。通过网站，老师和学生可以了解更多的校园快递服务信息，了解更多的相关行业问题，也
*好棒文|www.hbsrm.com +Q: #351916072#
可以通过网站来加强与师生在校园快递方面的交流沟通。
本网站通过调查快递行业的发展与现状、了解快递行业的相关信息。对收集的素材进行分类，筛选一些可用，及时的信息内容放入网站。在Photoshop中完成图片制作，应用Dreamweaver软件进行编辑排版，使用CSS样式表进行页面的美化。并运用JS技术来添加动画效果制作，最后通过超链接让各页面链接起来，制作一个结构完整，内容丰富的网站。
二、需要分析
本网站是针对当前学校的快递问题，当前学校师生了解快递公司的主要途径是网上购物及文件包裹递送，在电子商务平台日趋完善的今天，网购越来越普遍了，校园是一个广阔的市场需求也是在校园快递下的一个大商机。校园快递代理点的出现说明了这个事实，通过孙阿姨快递网站把校园代理点的服务信息传递给广大师生，使广大师生能通过本网站快捷方便的找到相关信息，同时享受到更好的服务。
三、开发工具选择
网站模块主要为首页简介以及内页详情介绍，给浏览者呈现完整且内容丰富的一个网站。
开发网站主要分为设计与实现运用到了不少相关软件，例如photoshop，Dreamweaver，CSS等。 Photoshop是网络平台上必不可少的一个修图软件，它能够大大提高图片的质量，是由Adobe Systems开发和发行的图像处理软件。 Photoshop处理的对象一般是像素功能不全面或者不清晰的图像。这个修图软件有着大量的编辑和修图工具，在制作过程中我们可以使用这些的修图工具，可以很有效率地进行图片编辑工作，让图像变得更加美观，也提高了图片质量。网站的设计中我主要是应用Photoshop软件进行图像处理和页面的设计，将网页设计好后，切图然后进行网页编辑。在本网站的设计上采用了Photoshop对图片进行处理，而且运用Photoshop工具进行页面整体效果的设计，其中应用了图层样式，文本工具以及图形工具等。
Dreamweaver是创建和管理网页的常用的可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术可以让用户任意导入HTML文档而无需重新设置代码格式。
Div技术的应用和表格的布局相比，减少了很多代码，同时提高了网页运行速度，使用div进行页面布局排版能力更完整，将设计部分剥离出来放在一个独立样式文件中，减少了没有用的代码，让网页的制作效率变高，效果变好。CSS样式表的运用，对页面进行了美化，对网页的背景、颜色、大小及段落排版等进行一系列的设置，想要拥有细化效果，只需修改样式表的内容，所有应用该样式的内容会随之全部改变。同时一个样式表可以在任意一个页面调用，大大的减少工作量，提高工作效率。通过样式表的规则设计的网站页面具有统一的风格，修改变得方便快捷。
四、主体设计
（一）总体设计
网页在制作过程中不仅要考虑到色彩和版式，更重要的也要在设计之初确认网站的功能结构，按照确立的功能结构制作网站，才行做到条理清楚，本网站根据功能需要制作功能结构。
功能示意图，如图41所示：
图41图站结构图
网页的布局结构
根据需求可以知道，在页面上部要有logo和导航，接下来使banner，中间部分的左侧显示若干次要的栏目，右侧则显示部分文章的内容及作品展示，页面最底端为页脚区域，显示一些版权信息。很明显可以用四行两列的布局方式来安排页面内容。如图42所示：
图42首页布局安排
内页在布局上沿用了首页的logo导航和banner 以及版权信息部分模版，在中间改变成左右结构，在左侧加上了二级菜单，方便用户进行切换内容的操作。右侧是与导航对应的内容信息。如图43所示：
图43内页布局安排
（二）首页div结构和层样式
首页采用层层叠加的布局模式，具体的布局，如图44所示：
图44首页div结构
首页div结构如下：
层样式如下：
（三）子页div结构和层样式
子页采用层嵌套的布局模式，具体的布局，如图45所示：
图4 5子页div结构
子页div结构如下：
层样式如下：
（四）网站基本功能
“首页”实现
首页设计内容包括logo、导航、 banner动画、关于我们简介、我们的服务、行业资讯及版权信息。
（1）Logo：针对自己对快递网的想法和认知，logo设计采用以白色为主搭配蓝色，设计图案似一个奔跑的人，突出“快递”的主题。如图46所示：
图46 Logo设计
（2）Banner：这个模块的设计，可以让观众一目了然，通过动态图片的切换，有效能吸引观众的一块功能，本功能模块调用了JS文件，图片有自动切换和手动点击切换的效果，进而仔细阅读网站的文字内容。如图47所示：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/684.html
