《《网页设计》论文-“完美广告”网站设计.doc》由会员分享，可在线阅读，更多相关《《网页设计》论文-“完美广告”网站设计.doc（17页珍藏版）》请在三一文库上搜索。
1、XXXXX大学网页设计论文 题 目 ：“完美广告”网站设计_学院_学_专业_ 级_班学 号：_姓 名：_ 指导教师：_成 绩：_完成时间：_年 _月摘 要 随着当今社会的飞速发展，网络逐渐成为人们生活中不可缺少的因素。每天浏览网页，网上购物已经成为不可阻挡的潮流！与此同时，网页设计也已经成为当今社会炙手可热的专业，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所重视，建设出一个充满视觉享受的网站不仅可以丰富广大网名的视野，而且也体现着网站建设者的技能与艺术素养，所以设计网站也被许多网络爱好者所喜见！ 广告作为第三产业之一，已成为21世纪比较热门的专业，同时作为
2、一名广告专业的学生，我构思网页的首选思路就是广告这条线。完美作为广东著名品牌之一，主要销售保健食品、化妆品、日常生活用品，离我们的生活比较接近，所以选择对这个品牌及其畅销产品完美芦荟胶作为我这次网页的“主角”。整个网站包含18个网页，20个链接，属于一个小型的宣传企业品牌及其产品的小型网站。网站的目的就是为完美这个品牌做个宣传，增加网页浏览者对于完美这个品牌以及完美芦荟胶的认识，从而促使浏览者产生购买该品牌产品的欲望，最终提高完美的品牌效应，从而体现网站的现实意义。 设计这个网站主要运用人们通常所说的“网页三剑客”。其中有专门的网页设计软件Dreamweaver CS3以及现如今最流行的动画制
3、作软件Flash CS3还有网页图片处理软件Adobe Fireworks CS3。 关键字：网页设计 html 网页三剑客 广告AbstractWith the rapid development of society, the network have gradually become the indispensable factors in life. Every day to browse the web, online shopping has become unstoppable tide! At the same time, web design also has become
4、the most social hot professional, website building more and more close to an art is not just a technology. The art of web page design, increasingly website builder to construction out a full of visual enjoy website can not only enrich the net vision, but also embodies the site builders skills and ar
5、tistic, so web design is also many network lover whom I see!Advertising as one of the third industry, has become more popular professional in the 21 st century, at the same time as an advertising professional students, I conceived the first choice of web pages of thought is advertising that line. Pe
6、rfect as one of famous brand of guangdong province, the main sales of health food, cosmetics, daily necessities, from our lives close to, so choose to the brand and popular product-perfect aloe vera gel as I this web page of leading role. The site contains 18 pages, 20 links, belong to a small propa
7、ganda enterprise brand and product of small web sites. The purpose of the site is perfect for the brand do a propaganda, increases web page on your perfect this brand and perfect the understanding of aloe vera gel, which prompted generation to buy the brand product desire, eventually improve the per
8、fect brand effect, so as to express the practical significance of the website.Design the site mainly USES people say normally web page three musketeers. There are special web design software Dreamweaver CS3 and now the most popular animation software Flash CS3 and web image processing software Adobe
9、 Fireworks CS3.Key word: web design HTML page three musketeers literary classics目 录第 一 章绪论1第 1 节完美广告的定义及其意义1第 2 节网页设计的制作背景及意义1第 二 章网页设计工具2第 1 节页面工具 Dreamweaver 2第 2 节动画制作工具 Flash3第 3 节图形处理工具 Fireworks4第 三 章网站的总体规划5第 1 节制作网页的一般步骤及方法5第 2 节网页包含的要素以及说明6第 3 节网页的结构层次及说明8第 4 节网页的相关展示9第 四 章结论11致谢12参考文献 12 -
10、 12 -第一章：绪论第1节 ：完美广告定义及其意义广告的本质是传播，广告的灵魂是创意广告，即确定的组织或个人为了一定的目的，依靠付出费用，在规定的时间内，按照要求，由指定的媒体，将真实信息传播出去的一种交流活动。完美（中国）有限公司（以下简称“完美公司”）是马来西亚完美资源有限公司于1994年在广东省中山市投资设立的侨资企业，2006年12月1日经国家商务部批准在广东省开展直销业务，销售保健食品、化妆品和保洁用品。选择完美作为我这次网站的“主角”原因有三。其一：完美是大家熟知的广东知名品牌之一，相应的他们公司的广告投放也已进入成熟化阶段，即该品牌在市场上已有一定的占有率。所以对该品牌做广告宣
11、传不是很困难，只需稍作提醒人们就能了解！其二：完美主打产品是保健品以及日常生活用品，所以这个品牌产品离我们的生活比较贴近，人们也愿意去了解它。其三：因为熟悉所以选择。我自己本身就使用完美的一款比较好的产品完美芦荟胶。所以对于完美这款产品以及这个品牌略知一二！完美芦荟胶具有美白、祛斑、控油、除痘等多种功效，可谓是一款比较好的护肤品！第2节 ：网页设计制作背景及其意义Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为Internet上先进的、易被人所接受的信息检索手段，world wide web（简称www）发展十分迅速，成为目前世界上最大
12、的信息资源宝库！网页也是实现信息交流与沟通最直接的手段.也是互联网最重要的一环.所以我选择建立一个网络广告网站，网络作为一种新的媒体，已成为当今社会不可忽视的媒体形式，许多品牌也逐渐热衷于投放网络广告。我想让浏览者通过对我网页的浏览，更加了解完美这个品牌，从而产生购买该品牌产品的欲望。最终达到提高该品牌销售额的效果，同时提升完美的品牌效应！成功起到广告宣传的作用。第二章：网页设计工具第1节：页面工具 DreamweaverAdobe Dreamweaver是个原本由Macromedia公司所开发的著名网站开发工具。它使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系
13、统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了Opera的排版引擎 Presto 作为网页预览。Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整
14、体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。Adobe Dreamweaver界面展示：第2节 ：动画制作工具flashAdobe Flash（原称Macromedia Flash，简称Flash；前身FutureSplash），是 美国 Macromedia公司（现在已被Adobe公司收购）所设计的一种二维动画软件。通常包括Macromedia Flash，用于设计和编辑Flash文档，以及Adobe Flash Player，用于播放Flash文档。Flash是美国的MACROMEDIA公司于1
15、999年6月推出的优秀网页动画设计软件。它是一种交互式动画设计工具，用它可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。Flash界面展示：第3节 图形处理工具FireworksFireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大 Adobe Firework CS4简 化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。借助于 Macr
16、omedia Fireworks 8，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。Fireworks 业界领先的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与 Macromedia Dreamweaver? 和 Macromedia Flash? 共同构成的集成工作流程可以让您创建并优化图像，同时又能避免由于进行 Roundtrip 编辑而丢失信息或浪费时间。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。Fireworks界面展示：第3章 网站的总体规划第1节 制作网页的一般步骤及方法规划网站时必须明确两点：首
17、先要明确为什么要建立这个网站，即建立这个网站的目的：其次，要明确这个网站的主题，即这个网站的主要内容，明确之后再制定具体的建站框架。建立一个网站如同开发软件一样，一般按以下7个步骤进行：目标规划系统分析网站设计网站实现网站发布网站调试维护与管理以上7个步骤是建设一个网站大体应遵循的。在实际的工作中，用户可以根据实际情况进行具体的安排。在建立网站之前，需要对网站进行一系列的分析和设计，然后根据分析的结果提出合理的方案，这就是网站的规划与设计。网站的规划与设计一般应遵循以下三个原则： 最大限度的满足用户需求； 最有效地进行资源利用； 使用方便，界面友好，运行高效。常规的网站规划与设计方法一般有以下
18、三种：1、 自顶向下的设计方法2、 自底向上的设计方法3、 不断增补的设计方法需要注意的是这三种方法一般都是相互穿插着进行的。例如，整个网站可以用自顶向下的设计方法，而网站的某个部分则可以采用自底向上或不断增补的设计方法来实现。所以要灵活使用这三种方法，知变通，使自己设计的网站多元化。从而达到一定的预期效果！第2节 网页包含的要素以及说明网页是网站提供信息服务的主要形式，一般包括文字、图像和表格等内容以及实现信息块之间跳转的超链接。网页通常以网页文件及其附属文件形式存在。网页文件是www的基本文档，它通常是用HTML语言设计的。其他网页元素，如图像、声音等，都是以独立文件形式存在的，通过在网页
19、文件中设置一些链接形成引用关系。在初次设计网页之前，首先应该认识一下构成网页的基本元素，只有这样，才能在设计中得心应手，根据需要合理的组织和安排网页内容。1、 文本文本一直是最重要的信息载体与交流工具。网页中的信息也以文本为主，与图片相比，文字虽然不如图片那样能快速地引起浏览者的注意，却能准确的表达信息的内容和含义。2、 图片和动画图片在网页中具有提供信息、展示作品、装饰网页、表现个人情调和风格的作用。用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广的是GIF和JPEG两种格式。在网页中，为了更有效地吸引浏览者的注意，许多网站广告都做成动画的形式。3、 声音和视频声音
20、是多媒体网页的一个重要组成部分，对于不同形式的声音文件，需要用不同的方法将它添加到web网页中。在决定添加声音之前，需要考虑的因素包括用途、格式、文件大小、声音品质和浏览器差别等。不同的浏览器对于声音文件的处理方法是不同的，彼此之间很可能不兼容！用于网络的声音格式非常多，常有的有MIDI、WAV、MP3和AIF等。设计者在使用这些格式的文件时，需要加以区别。很多浏览器不要插件也可以支持MIDI、WAV和AIF格式文件，而MP3和RM格式的声音文件需要专门的浏览器播放。视频文件的格式也非常多，常见的有Realplayer、MPEG、AVI和DivX等。视频文件的采用会让网页变得精彩而有动感。4、
21、 超链接超链接技术是WWW流行起来的最重要的原因。超链接是从一个网页指向另一个目的端的链接。例如，指向另一个网页或者网页上的不同位置。目的端通常是一个网页，也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者本网页的其他位置。热点通常是文本、图片或图片中区域，也可以是一些不可见的程序脚本。当浏览者单击超链接热点时，其目的端将显示在web浏览器中，并根据目的端的类型以不同的方式打开。当指向一个AVI文件的超链接被单击后，该文件将在媒体播放器中被打开；如果单击是指向一个网页超链接，则该网页将显示在web浏览器中。5、 导航栏导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超链接，这
22、组超链接的目标就是本站点的主页或是其他重要的网页。在设计站点中的网页时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易地转向站点的其他网页。在一般情况下，导航栏应放在网页较引人注意的位置，通常是在网页的顶部或是一侧。导航栏既可以是文本链接也可以是一些图形按钮。6、 表格在网页中，表格是用来控制网页中信息的布局方式，包括两个方面：一是使用行和列的形式布局文本图像及其其他列表化数据；二是可以使用表格来精准控制各种网页元素在网页中出现的位置。7、 表单网页中表单通常用来接受用户在浏览器端输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件、网页、电子邮件，也可以是服
23、务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，设置来宾签名簿，让浏览者注册会员并以会员身份登录站点等。表单由不同的表单域组成，最简单的表单也要包括一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本，选中单选按钮或是复选框，以及以下拉列表框中选择项等。根据表单的功能与处理方式的不同，通常可以将表单分为用户反馈表单、留言薄表单、搜索表单和用户注册表单等类型。8、 其他常见元素网页中除了以上几种最基本的元素以外，还有一些其他常用的元素，包括悬停按钮、Java特效、ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐，电子商务等方面也
24、有着不可忽视的作用。第三节：网页结构层次及说明我设计的网页采用800*600的分辨率，整个网站大多采用表格布局，也有框架以及AP元素的使用。采用树状链接结构，一共有18个网页，其中5个主链接（其中一个为主页链接），14个次链接，采用两个模板。5个主链接中有3个链接的网页是采用模板来制做，其中一个“产品介绍”网页是采用AP元素制做。另外7个次链接采用模板，其他7个采用-blank链接。制作网站中的网页逐级链接，浏览者可以逐级进入再逐级退出，条理清晰，不易使浏览者“迷路”。在整个网站设计过程中，还涉及flash动画、Fireworks处理图片、交换图像行为、显示（隐藏）AP元素行为、时间轴等的使用
25、。首页首页标题栏以及主页下方插入的是flash的简单动画，导航栏按钮是采用Dreamweaver自带的flash按钮制作的，其中在主页导航栏的图片上添加了交换图像以及显示（隐藏）AP元素的行为，主页下方的图片是采用Fireworks软件制作而成的。首页主要是用来宣传完美的畅销产品完美芦荟胶的，正因为这个产品的知名度比较高才选择它为整个完美产业的代表，大半的主角是它，从而整个网站我就取名为绿色心情。其一，因为这个产品是纯天然的，它的包装跟原材料都是绿色的，根据产品特性而定。其二，我也希望通过这个网站的名称来向浏览者传达一种精神或者说是心情，希望浏览者的生活也能像大自然那般清新活泼。当然网页的主色
26、调也选用的绿色，网页的背景图片也都是这个色系的，就是希望能很好的向浏览者传达这点信息。“关于我们”及其并列的网页这其中包括1个主链接以及7个次链接。主页中“关于我们”链接到的网页中，包含7个flash按钮，又链接了7个模板网页，分别介绍了完美公司、分公司、领导、企业荣誉、生产研发、完美物流以及企业回报社会的情况。从而可以让浏览者更加详细地了解完美公司及其产品的制作细节，起到宣传企业品牌的作用。在潜移默化中增加人们对于完美的信任度，提高品牌的市场占有率。在这个模板中采用Dreamweaver中时间轴制作了来回切换的公司宣传图片作为这个模板的页头，给人一种动态感，使这个网页更加生动活泼，浏览者看着
27、也不会有种乏味感。“产品介绍”这个网页的结构相对要简单一点，只采用了5个AP元素进行编辑的，利用AP元素能使图片互相重合的这一特性，将六副完美产品的图片部分相互重合形成V字形的画面效果，给人简洁明了的感觉，可以一眼浏览完整个网页的内容，简洁中不乏美感。“企业新闻”在这个网页中包含7个子链接，就是网页左侧的七条新闻标题。这七个网页都采用了-blank链接，即在另起的一个网页中显示其内容。网页中间又是一个简单的使用时间轴制作的网页广告图片切换的效果，右侧是完美公司的一些信誉保障标志。这个网页制作的主要目的即是要让浏览者或说是完美产品的消费者及时了解完美公司的动态以及公司的一些公益活动，从而提升品牌
28、形象，树立品牌坐标，在消费者心中定位品牌的良好形象。“联系我们”这个网页主要是建立起浏览者与卖家完美的直接交流的桥梁，我从网上下载了完美总公司、分公司还有海外一些销售点的信息，其中包括具体网站的地址，这样消费者（网页浏览者）就可以通过我的网页间接地进入到完美的官方网站了，从而产生具体产品的购买行为。第4节 网页的相关展示首页：完美产品网页：公司简介：企业新闻链接网页：第四章 结论总体而言，设计这个网站还是挺有前景的，优点在于链接条理清晰，网站色彩搭配较为协调；缺点则是文件类型还有所缺陷，由于考虑到整个网站的文件量以及网页下载速度等问题，没有添加音频以及视频的相关文件，这就相当于网页的基本要素少
29、了一种，所以这是一点不足之处。通过这个网站的制作，温习了一个学期以来学习的知识，包括Dreamweaver的使用，flash、Fireworks的简单应用等。可谓是一大收获，同时也运用到了专业方面的一些知识，包括色彩的搭配等等，做这个网站不仅仅掌握了这一门技能还帮助我自己温习了专业知识，这一点我觉得是非常有利的，对我以后的学习来说。致谢在这要特别感谢XX老师一个学期以来的谆谆教导，正是您的谆谆教导才有我们今天制作完成的网站。您上课时认真的神情、您下课时和蔼的笑容，会一直记在我的脑海里，我只想说，遇到您这么认真负责的好老师是我的福气。从您身上真的学了好多东西，好想以后还能选上您带的课！同时也感谢
30、我可敬可爱的父母，是他们把我养育成人，也是他们将我送进了大学的校园，他们辛勤的劳动只为了他们的女儿以后能过上好日子，他们是这个世界上最无私的人，千言万语都无法表达我对他们的感激之情，只想将他们给我的爱都化作动力，努力学习，将来衣锦还乡之时就是对他们最大的报答了。最后，还要感谢我身边的朋友以及同学们，他们会在我伤心难过的时候送上及时的安慰，他们会在日常生活中给予我指导，是他们一直一直的伴我左右，只有了他们的陪伴我的生活才不至于平淡无味，谢谢你们的陪伴与鼓励，有你们，我的生活是幸福的，才是完整的。我想说，我们都将是祖国明天的栋梁，相信自己就一切ok！我们的未来不是梦！参考文献网站规划与网页设计（第2版）二一一年十二月二十三日