毕业设计（论文）
Acer商业网站的制作
学 号： ************ 学生姓名： 系 部： 信息工程系 专 业： 电脑艺术设计 班 级： 高电艺0802 指导教师：
株洲职业技术学院教务处制
株洲职业技术学院毕业设计论文
目 录
摘要 ………………………………………………………………… 4 第一章 网页设计简介 ……………………………………………… 5
1.1 网页设计的理念 ………………………………………… 5 1.2 网页设计的要点 ………………………………………… 5 1.3 本章小结 ………………………………………………… 5 第二章 关于网页制作的工具………………………………………… 6
2.1 制作工具的介绍 ……………………………………………6 2.2 本章小结…………………………………………………… 6 第三章 Acer网站的设计分析………………………………………… 7
5.1 相关术语及解释…………………………………………… 7 5.2 商业网站的设计与规划…………………………………… 8 5.3 本章小结…………………………………………………… 8 第四章 Acer网站的制作 ………………………………………………9
3.1 商业网站的定位 ……………………………………………9 3.2 首页的制作 ……………………………………………… 9 3.3 子页的制作 ………………………………………………13 3.4 本章小结……………………………………………………15 第五章 Acer网站的实现………………………………………………16
4.1 首页的搭建 ………………………………………………16 4.2 子页的搭建 ………………………………………………19 4.5 本章小结……………………………………………………23 第六章 Acer网站的展示………………………………………………24
6.1 首页的展示…………………………………………………25 6.2 分页的展示…………………………………………………25
2
株洲职业技术学院毕业设计论文
6.3 本章小结………………………………………………………27 第七章 总结与展望………………………………………………………28 结论 ………………………………………………………………… 29 参考文献 …………………………………………………………… 30 后记 ………………………………………………………………… 31
3
株洲职业技术学院毕业设计论文
摘 要
网页英文是web page，一般可以分为静态网页和动态网页，所谓静态网页就是，就是纯html语言架构的，优点是浏览速度快，制作简单，缺点是维护困难；动态网页就是在html代码中嵌入asp，jsp等脚本语言构成的，优点是维护简单，可以表现一些复杂的功能：缺点技术不易掌握。动态网页不是指会动的网页就叫动态网页，动态网页和静态网页的区别在于一个要手工制作，一个是程序自动完成，只要编写脚本语言即可 。
在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。静态网页的网址形式通常为：也就是以.htm、.html、.shtml、.xml等为后后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。
动态网站体现在网页一般是以asp，jsp，php，aspx等结束，而静态网页一般是HTML结尾，动态网站服务器空间配置要比静态的网页要求高，费用也相应的高，不过动态网页利于网站内容的更新，适合企业建站。
关键词：动态网页 静态网页 html语言 asp，jsp等脚本语言
4
株洲职业技术学院毕业设计论文
第一章 网页设计的简介
1.1 网页设计的理念
（1）内容决定形式。
（2）先整体，后局部，最后回归到整体。 （3）功能决定设计方向。
1.2 网页设计的要点 2.1.1确定网站的整体风格。
将标志Logo尽可能放在每个网页上最突出的位置，突出标准色彩。
2.1.2网页色彩的搭配。
色彩控制尽量在三至五种色彩以内。背景与前景要有对比，以便突出文字内容。
2.1.3设计第一，技术第二。
1.3 本章小结
介绍网页设计的理念，和要点。
5
株洲职业技术学院毕业设计论文
第二章 网页制作的工具介绍
2.1 制作工具的介绍
2.1.1 梦幻网页的编织者—Dreamwave CS3
Dreamwave CS3是集网页制作和网站管理于一身的网页编辑器，利用它可以轻松地制作出充满动感的网页，还可以轻松创造跨平台和浏览器的页面。
Dreamwave还可以为用户做到：使用动态HTLM功能，是一个完全自定义的应用程序，用户可以创建自己的对象和命令修改菜单，快捷键。
Dreamweaver CS3本身支持JavaScript、java、Flash及网页设置和网页编程功能，这些功能无论是从设计还是编码都可以很方便的制作页面，可以锁，Dreamweaver适合从业余到专业的所有网页制作人员。
2.1.2 影像与动画的制作软件—Adobe Photoshop CS3
Adobe Photoshop CS3是目前最流行的图形、图像编辑设计软件，在处理数码影像、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都广泛地应用。
（1）文字处理更加方便。
（2）增加的图层集使图层管理更有序。 （3）图像的剪切和裁剪更加方便。 2.1.3 Flash制作软件
Flash是一款动画制作软件，可以轻松制作出专业的网页Banner。
2.1 本章小结
介绍网页制作的相关工具：Dreamwave CS3，Adobe Photoshop CS3，Adobe
Photoshop CS3。
6
株洲职业技术学院毕业设计论文
第三章 Acer网站的设计与分析
3.1 相关术语及解释
3.1.1网站
网站是由网页集合而成的，我们通过浏览器看到的画面就是网页。具体地说，一个网页就是一个HTML文件，而浏览器是用于解读这份文件的。实际上，网站是由许多的HTML文件集合而成。至于多少网页集合在一起才能称作网站，这并没有限制，因为即使某个站点只拥有一个网页也可称为网站。
3.1.2 首页
首页，也称为主页，它是一个单独的网页，和一般网页一样，可以存放各种信息，同时又是一个特殊的网页，作为整个网站的起始点，是浏览者访问一个网站的第一个网页。
3.1.3 URL
URL（Uniform Resource Locator），统一资源定位器，通俗点就是指文件在网上的地址，是使用数字和字母按一定顺序排序来确定的Internet地址，由访问方法、服务器名、端口号，以及文档位置组成。
3.1.3 浏览器
浏览器产品的很多可供选择，他们都可以浏览WWW上的内容。目前最普及的浏览器当属微软（Microsoft）公司的Internet Explorer（俗称“IE”）。
3.2 Acer商业网站的设计与规划
3.2 1 确定网站的主题
首先要解决的就是网站内容问题，即确定网站的主题。对于内容主题的选择，
我认为要做到小而精髓，主题定位要小，内容要精。不要试图去制作一个包罗万象的网页，这样往往会失去网站的特色，同样也带给我们高强度的劳动。我的商业网站主题是：体现我对该产品的个人见解，做出自己的特色：在突出自己的风格和特点的同时，还可以参照现在流行的网站。
7
株洲职业技术学院毕业设计论文
3.2 2 网站界面功能的描述
（1）产品展示
产品展示是给浏览网页的人留下深刻印象的主要影响力，在其中要重点突出该产品的外型，功能，让消费者能够一目了然，同样也要吸人眼球。
（2）售后服务
当下是个讲究服务的时代，产品的售后服务也是产品能够吸引消费者的重要大关，必须让消费者能够很清楚的了解到该产品的售后如何，是否值得购买。
（3）新品推荐
刚出产的新品要快速取得消费者的赏识与认可，就要依靠这一栏目来快速让消费者了解当下最新型的产品。
（4）个人中心
一个产品想要获得消费者的认可与喜爱，与消费者的沟通必不可少，所以给大众一个平台，听取意见，适当改进产品。
3.3 本章小结
本章主要介绍该产品的设计分析，介绍我的分析理念和网页的设计板块。
8
株洲职业技术学院毕业设计论文
第四章 Acer商业网站的制作
3.1 商业网站的定位
我选择的是电脑网页的制作，现今社会，电脑是相当普及的，同样，人们对电脑的需求量也越来越大，可以说电脑已以生活必需品的身份登上市场，所以，我给它的定位就是突出产品特性，吸引消费者的眼球。
3.2 首页的制作
（1）采用统一色系，将其Logo放于突出位置，贴上广告标语，完全自定义文字属性:字体黑体，字号20，配合整个版式效果，包括文字字体，大小，颜色等。如图1.1：
1.1
（2）顶部采用大大的Flash图，与产品Logo相结合。如图2.1，2.2（缓动效果）：
9
株洲职业技术学院毕业设计论文
2.1
2.2
（3）网页内容以产品推荐为主，可以让消费者更快更迅速的了解到该公司旗下的精英产品，当然，要配合消费者的消费心理，适当推出类似于价钱降低，质量不减的机型，写清楚机型的配置，用来吸引和满足一部分消费人群。如图3.1：
3.1
（4）网站内容的排版因为考虑到可读性，几个栏目的文字排版都比较简
10
株洲职业技术学院毕业设计论文
单，利于阅读。如图 4.1 4.2：
4.1 4.2
（5） 注意细节的处理，从细节上增添整个页面的整体性，完善整个页
面。例如：顶部小图标的处理 （5.1）；底部利用PS把杂志人物与文字适当的结合（5.2）；文字前的一些小图标 （5.3）.（5.4）等。
5.1
5.2
11
株洲职业技术学院毕业设计论文
5.4
（6）页面底部，我给版面加了一个Flash图，让它每个重点产品滚动展
示，能让消费者更明确的看到产品的多样性。如图6.1：
6.1
（7）最后，利用切片工具，对页面进行适当的切片，如图7.1，鼠标右击切片并且导出保存，如图7.2：
7.1
12
株洲职业技术学院毕业设计论文
7.2
3.3 子页的制作
3.1.1产品展示
把Acer旗下最新产品做出陈列，让读者能够一目了然，包括该产品的外观，
机型，配置等，一句短而精髓的话来概括出来的产品特性，能更先入为主的让读者了解各个产品的个性。如图1.1；底部由在线咨询，热卖信息，我的账户，付款方式，服务与支持的图片构成，且用白边圆角矩形匡边。如图1.2：
13
株洲职业技术学院毕业设计论文
1.1
1.2
3.1.2十一促销
由Flash构成整个页面，简约大方，虽然网页为静态页面，为了给网页增添活力，必须在Flash制作上增添整个网页的活力，给图片中的电脑给予一定的光泽度，如图2.1，字体注入活力，如图2.2
2.1
14
株洲职业技术学院毕业设计论文
2.2 3.1.3 售后服务
保证电脑的销售，售后服务至关重要，页面必须明确的写出售后服务的多重保障。由于售后服务单是文字太过单挑，所以插入了一到两张Acer电脑的图片增添整个页面的完整性。如图3.1
3.1
3.4 本章小结
详细介绍Acer产品的首页面与子页面效果图的设计与制作过程。
15
株洲职业技术学院毕业设计论文
第五章 Acer网站的实现
4.1 首页的搭建
首先新建一个CSS样式，单击→新建CSS规则（如图4.1）,在CSS样式里创建一个body的高级项（如图4.2）。
4.1
16
株洲职业技术学院毕业设计论文
4.2
然后利用DIV标签进行搭建框架，分门别类，且给予样式（如图4.3），在
Div标签中插入表格，设置好边框宽度960，表格粗细和表格边距为0。
4.3
对应完成的效果图，把切好的图片和Flash分别贴入各表格区域，给予CSS
样式，调节文字的字体，颜色，大小。创建好链接。带有文字的图片，我们在切片的时候应该删除其文字，切出没有文字的图片（如图4.4），然后作为背景导入表格，这样，就能在表格内再次添加文字。不过在添加文字之前，必须要创建表格来添加文字（如图4.5）。
17
株洲职业技术学院毕业设计论文
4.4
4.5
文字给予CSS样式（如图4.6），用link去掉文字链接的下划线，在修饰中
勾选“无” （如图4.7），给予文字滑过后颜色改变的效果，同样创建一个CSS样式—“hover”，把颜色修改为白色。
18
株洲职业技术学院毕业设计论文
4.5
4.7
4.2 子页的搭建
子页面的搭建主要采用的是主页的模板，首先，在子页面的效果图上进行切片，
参照主页面效果图，将切片一一放进主页的模板，适当的修改模板的CSS样式以及Div大小，另外CSS样式修改好必须要另存为新的CSS样式，如果没有另存为这一步，
19
株洲职业技术学院毕业设计论文
主页的网页就会有所变动。完成所有子页面的搭建。
在完成所有子页面的搭建效果之后，就建立页面与页面之间的相互链接。如图4.6
20
株洲职业技术学院毕业设计论文
4.6
21
株洲职业技术学院毕业设计论文
4.7
22
株洲职业技术学院毕业设计论文
4.8
完成子页和子页的超链接，子页面的搭建就完成了，最后查看网页效果，页面与页面可以相互跳转，商业网站的搭建就完成了。
4.3 本章小结
本章主要描述的是用Dreamweaver CS3中的Div标签与CSS样式的建立与设置，然后利用Div与表格介绍搭建好网页的所有页面。
23
株洲职业技术学院毕业设计论文
第六章 Acer网站的展示
6.1 首页的展示
24
株洲职业技术学院毕业设计论文
6.2 子页的展示
25
株洲职业技术学院毕业设计论文
26
株洲职业技术学院毕业设计论文
6.3 本章小结
本章主要是网页的效果图展示。
27
株洲职业技术学院毕业设计论文
第七章 总结与展望
明确建站目的
在开始你的工作之前，首先要明确自己的建站目的，就像是出门前首先要明确出去做什么，然后才能出门。有很多人就是因为没有目的，提交了申请却不知道该放些什么。
页面“版式”规划
所谓“页面”，即网页，是网站内容与功能的表现形式。网站所有内容与功能在网页上会按照一定的规律进行设置与摆放，表现出不同的网页构成，如果套用报纸编辑学的概念，也就是“版式”。
网站编辑工作所考虑和决定的范畴包括：主页的设计是否能突出核心产品
及竞争力、吸引网民的访问与参与，加深网民对网站的粘性等；各个网页中内容与功能如何设置，是突出内容还是突出功能；内容与功能在网页上的大体位置如何？网页的主色调和基本版式如何体现网站传播主旨和风格等。在确定了这一切之后，对各个具体的页面进行设计。
网站内容构架
网站编辑工作的主要任务之一是对网站的整体内容及各个板块、频道、栏目进行准确而清晰的定位和规划。对网站整体、频道、栏目的规划必然反映出编辑的传播理念和思路，也是网站、频道、栏目在今后进行更新、维护、建设的基础。例如，很多网站都开设了有关IT的板块，登载一些业内的热门话题和最新消息，而千龙新闻科技频道设置的“IT茶坊”却将经营的重点放在培养本网的IT撰稿人上。这就是在频道规划方面的一种思路。围绕这个思路，编辑要做的工作当然很多，其中一个重点就是要考虑这个“IT茶坊”在网站上出现时的“样子”，应有哪些“子栏目”和“子子栏目”？作者和主持人之间是否要形成讨论社区？页面风格如何？要用到哪些交互手段？等等。只有将这一切确定下来，并通过技术制作部门的配合“摆放”到网上后，编辑才可以对这个栏目进行内容上的持续经营和推广。
28
株洲职业技术学院毕业设计论文
结 论
每个人都会赞同可用性是网站的一个很重要的方面的说法。无论你是在做一
个作品集网站、网上商店还是网络应用，让你的页面对用户来说可以容易和快乐的使用是一个关键。
此次毕业设计让我更加熟悉了从理论到实践的跨越，畴前台网页设计的实
现，到后台代码的编纂，我用到的软件主要有photoshop、fireworks、dreamweaver、 flash等，在系统的开发过程中，很多以前感觉很模糊的常识，或者说一知半解的内容，如软件工程、数据库原理、面向对象程序设计等变得清晰起来，强烈地感觉到这几门理论课程在实践中的重要性。
29
株洲职业技术学院毕业设计论文
参考文献
[1]任学文、范严编 [网页设计与制作] 中国科学技术出版社 第18页—第3页 [2]李世杰 [Active Server Pages(ASP)3.0 网页设计手册] 北京清华大学出版社 [3]赵小林、刘志强、郑洁 [网页制作技术教程] 2008年第 25期 [4]叶汶华、程永灵主编 [ASP.NET网页制作教程] 冶金工业出版社
[5]张文杰 [Active Server Pages(ASP)3.0 网页设计] 北京清华大学出版社 [6] 张军、王佩 [ASP动态网站设计经典案例] 2008年第15期
[7]李世杰 [网站全程设计技术（修订本）] 北京清华大学出版社 北京交通大学出版社 1999 第10页—第16页
[8] 沈大林 [中文Flash 8案例教程] 中国铁道出版社 [9] 杜巧玲 [网页设计超级梦幻组合] 清华大学出版社 [10] 庄王健编 [网页设计三剑客白金教程] 电子工业出版社 [11] 金颖 [新编网页制作三合一教程] 中国铁道出版社
[12] 陈强,霍继文,叶兵 [网页制作实用技术 FrontPage 2000] 清华大学出版社 [13] 庄王健编 [网页设计三剑客白金教程] 电子工业出版社 [14] 张福成，谭国鹏 [制作网页宝典] 人民邮电出版社 2000
[15] 王凯，张家才 [跟我学网页制作 网页制作技巧与实例] 冶金工业出版社 1999
[16]刘洪发 [Internet/Intranet应用与网页制作实训教材] 西安电子科技大学出版社
[17]丁淼 [网页设计与制作] 东南大学出版社 [18]郭初生 [网页制作教程] 人民邮电出版社
[19]宫茜 [网页动画与三维文字动画制作教程] 机械工业出版社 [20] imageready 3.0 web网页动画制作 人民邮电出版社
30
株洲职业技术学院毕业设计论文
后 记
网页制作是枯燥繁琐而又富有挑战的。但老师的谆谆诱导，同学的出谋划策
是我坚持完成论文的动力源泉。在此，我要特别感谢教导我毕业设计制作的周礼老师，和我的朋友，与他们交流使我受益颇多，正因为有了他们，我所做的一切才更有意义；也正因为有了他们，我才又了追求进步的勇气和信心。
时间的仓促及自身专业水平的不足，整篇论文肯定存在尚未发现的缺点和错
误。恳请阅读此篇论文的老师多予指正，不胜感激。
31
因篇幅问题不能全部显示，请点此查看更多更全内容