网页设计论文

1、摘要、关键词网页设计【摘要：在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。本文从网页设计的角度出发，介绍一些设计中要素和技巧，例如框架、CSS样式的使用等等。 【关键词】网页设计 要素 框架 CSS 互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。

2、 目录目 录前 言11网页的要素21.1图片要素 21.2 排列方法要素51.3 色彩要素52网页设计技巧62.1 框架的使用62.2CSS样式的使用 63涉及软件73.1 DreamWeaVer CS3介绍73.2 DreamWeaVer CS3操作界面74制作前期工作84.1歌曲类型选取84.2 歌曲选择85作品制作过程95.1利用Photoshop切割网页图画95.2使用Photoshop设计网页Logo95.3 使用Photoshop设计网页Banner106网页设计经验18参考文献及资料出处18前言前 言互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个

3、方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。 由于制作经验不足，作品和论文中存在问题之处，请老师指导完善。1FLASH简介1.、 网页设计的要素 在一个网站中，最重要的页面当属主页，所以在此以主页为例，说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素：文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。 1.1.图片要素 要设计出漂亮的主页，首先要成为计算机图形高手，仅这一点就可以让初学

4、者花上一年半载的时间。图片的要求与页面的内容有关，一些较随意的主页像股票、医药站点等，来访者并不在乎你能否做出精彩的图片，有些时候他们反而觉得放置图象后影响了访问速度，他们关心的只是页面内容；相反像一些需要靠图象来吸引访客的主页，如游戏介绍、影视介绍、风光名胜等站点，图象是一个极为重要的要素，在这里缺少了恰当的图象，整个页面就会黯然失色、就是一个不完整的主页。这需要去学习像photoshop这样的图形图像处理软件，还要有一定的美术基础，如审美观、创意技巧等， 1.2.排列方法要素 主页的第二个要素是排列方法，即网页布局。网页作为一种版面，既有文字，又有图片；文字有大有小，还有标题和正文之分；图

5、片页有大小而且有横竖之别。图片和文字都需要同时展示给观众，不能简单地将其罗列在一个页面上，否则会搞得杂乱无章。关于具体的网页布局，常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，关于它们，在网页设计的相关书籍中或者在网络上都可以看到详细的叙述。比如如果内容非常多，就要考虑用“国字型”或拐角型；而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变

6、化型了，只有不断的变化才会提高，才会不断丰富我们的网页。 F、基于屏幕的可视开发环境；G、可视编程环境；H、高级可控制外观组件支持；I、数据绑定；J、Web 服务和 XML 的预建数据连接器；K、项目管理功能；L、源代码控制系统；M、其它2FLASH简介1.3.色彩要素 色彩在网页所占比重很大。有了合理清新的色调，会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的，一个网站必须有一种或两种主题色。不至于让浏览者迷失方向，也不至于单调乏味。一般来说，页面的主体文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就

7、能表达出严肃、稳重的效果。 图1.1 完整的页面3MTV简介2、 网页设计技巧 一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。在这里从框架和CSS样式的运用两方面来介绍网页设计的技巧。 2.1.框架的使用 FRAME（框架）是Web上经常会看到的页面结构。框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。 使用框架具有以下优点：访问者的浏览器不需要为每个页面重新加载与导航相关的图形；每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么

8、向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。 使用框架具有以下缺点：可能难以实现不同框架中各元素的精确图形对齐；对导航进行测试可能很耗时间。 许多专业 Web 设计人员不喜欢使用框架，并且许多浏览 Web 的人也不喜欢框架。在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如，每当访问者单击导航按钮时就重新加载导航框架内容的框架集)。如果框架使用得法(例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态)，则这些框架对于某些站点可能非常有用。 2.2. CSS样式的使用 CSS(层叠样式表)是一种制作网页的新技术,它的全称是

9、级联样式表,即Cascading StyleSheets的缩写，又称之为风格样式表单。CSS是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。 如图1.2 5涉及软件3涉及软件3.1 DreamWeaVer cs3介绍Dreamweaver CS3是Adobe(奥多比)公司收购Macromedia公司后最新推出的Creative Suite 3 设计套装中用于网页设计与制作的组件。作为全球最流行，最优秀的所见即所得的网页编辑器，Dreamweaver可

10、以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。Dreamweaver，Fireworks，Flash被称为网页制作的“三剑客”，这三款工具相辅相承，是制作网页的最佳拍档之一。3.2 DreamWeaVer cs3操作界面DreamWeaVer cs3界面设计友好，空间广阔，操作精微细致,是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。，如图3.1所示。图3.1 DreamWeaVer cs3操作界面6制作前期工作4制作前期工作4.1歌曲类型选取在确定了设计主题为FLAS

11、H MTV后，下一个步骤，就是歌曲类型的选取。歌曲的分类颇为广泛，要选择一个适合自己的类型进行制作，考虑了下面几个问题。该类型是否具有一定意义，是否能让作品做到不俗套，更容易让人接受。在经过慎重考虑只后，我选择了流行歌曲的MTV制作，流行歌曲是目前少男少女们最喜爱的音乐类型，为了使MTV做起来比较顺利，我首先听了不同风格的歌曲，在其中找自己最喜欢，最有MTV画面的音乐。通过以上因素，所以毕业作品歌曲的类型就定为了抒情类情歌。4.2 歌曲选择歌曲类型确定后，要选择一首怎样的歌曲进行制作，考虑到为了使观众从我的作品中感受到喜悦，我决定采用久别重逢为主题，通过反复的听取不同的歌曲，最后我决定用许绍洋

12、唱的“身边”作为本次毕业设计MTV的歌曲。 7作品制作过程5作品制作过程5.1利用CorelDRAW绘制图画利用CorelDRAW矩形工具、钢笔工具绘制出厨房，并通过CorelDRAW自带的色彩填充工具填充上相应的色彩，如图5.1所示。图5.1 厨房绘制5.2制作FLASH元件打开FLASH软件，通过“文件”“导入”“导入到库”，将绘制好的厨房图片导入FLASH中，并将其元件命名为“厨房”，如图5.2所示。图5.2 图片导入8作品制作过程5.3 FLASH库中实例展示图5.3图5.4图5.59作品制作过程图5.6图5.7 (因元件过多，不一一例举，完整元件请参照作品内部。)5.4 FLASH

13、具体制作过程新建图层，将其分别命名。将先前制作好的元件插入相应图层中。（其中包括将音乐导入FLASH库中，并将其拖入到图层中。）如图5.8所示。图5.8新建图层,将图层命名为“脚本”，选中第一帧，在脚本编辑框中加入“stop();”，从而达到动画停在第一帧的效果，如图5.9所示。10作品制作过程图5.9 动画停止人物行走为逐帧动画，在时间轴上每隔一帧便插入一个空白关键帧，然后将人物行走时四肢律动的图片放入相应帧上，以完成人物整个行走过程，如图5.10所示。（注意每个帧上的人物高度都需一致）图5.10 男生走入通过帧的运用，切换计算机屏幕的图片，从而达到模拟计算机启动时的效果，如图5.11所示。

14、图5.11 电脑启动11作品制作过程首先在需要被遮罩层的上方新建一个图层，然后在新图层上画一个矩形，矩形的位置在被遮罩层文字的左边，接下来在第二个关键帧上调整矩形的宽度，使矩形完全遮住文字，最后在放置矩形的图层上单击鼠标右键“遮罩层”即可，如图5.12所示。图5.12 打字首先将花瓣制成“图形元件”，再将制作好的图形元件拉入到影片剪辑当中，通过“动画补间动画”，使花瓣成自然下落的效果，并将第二个关键帧的实例“透明度”调成“0”。回到场景中，将刚才做好的花瓣下落的影片剪辑拉入到场景之中，并在属性框中将实例命名为“a”,新建一个图层，在第一个关键帧的脚本编辑框中输入“c=1;”,在第二帧上插入“空

15、白关键帧”，并在脚本框中输入脚本，即可在动画中实现花瓣随机飘零效果。如图5.3所示。图5.13 花瓣飘零人物行走为逐帧动画，在时间轴上每隔一帧便插入一个空白关键帧，然后将人物行走时四肢律动的图片放入相应帧上，以完成人物整个行走过程。（注意每个帧上的人物高度都需一致）如图5.14所示。12作品制作过程图5.14 女生走入制作手部动画，双手需要在独立图层之中，通过“变形工具”调整第二个关键上手的位置，两个关键帧之间的距离由设计者自己设定，最后两个关键帧之间加入“动画补间”即可，如图5.15所示。图5.15 制作食物插入第一个关键帧，将实例放入场景中，然后再插入一个关键帧，两关键帧之间的距离由设计者

16、自己设定，接着将第二个关键帧上的实例放大，最后在两帧之间插入“动画补间”即可，如图5.16所示。图5.16 镜头拉伸13作品制作过程调整左手的位置，使手与盒盖的运动保持一致；盒盖的运动首先需要将中心点定在盒盖与盒底的交界处，然后通过变形工具调整各个关键帧上盒盖的形状，各个关键帧之间的距离由设计者自己设定，最后在各个关键帧之间加入“动画补间”即可，如图5.17所示。图5.17 打开戒指盒在第一个关键帧处，将飞机先放在场景的左上角，然后在第二个关键帧处将飞机移动到场景的右上角，两个关键帧之间的距离由设计者自己设定，最后在两个关键帧之间加上“动画补间”即可，如图5.18所示。图5.18 飞机飞过在第

17、一帧上插入关键帧，将“门”拉入到场景中，随后再插入几个关键帧，每个关键帧的位置由设计者自己调整。通过“变形工具”调整门在不同时期的形状，每两个关键帧之间插入“动画补间”即可，如图5.19所示。14作品制作过程图5.19 开门先将礼花制成“图形元件”，再将制作好的图形元件拉入到影片剪辑当中，通过“动画补间动画”，使礼花从左往右飞行，并将第二个关键帧的实例“透明度”调成“0”。回到场景中，将刚才做好的礼花飞行的影片剪辑拉入到另一个影片剪辑之中，并在属性框中将实例命名为“red”然后在脚本框中加入礼花脚本，最后将带有脚本的影片剪辑拉入到场景中相应的位置即可。通过以上方法便可做出不同色彩的礼花效果，实

18、例名由设计者自己设定，如图5.20所示。图5.20 礼花首先插入一个关键帧，在场景上方画一个矩形，宽度需和场景一致，然后插入第二个关键帧，两个关键帧之间的距离由设计者自己设定，将第二个关键帧上的矩形高度通过“变形工具”调整得遮住整个场景，最后在两帧之间加入“形状补间”即可，如图5.21所示。15作品制作过程图5.21 闭幕在第一个关键帧上将文字放入场景下方，在第二个关键帧上将文字位置调整到场景中心，最后在两个关键帧之间加入“动画补间”即可，如图5.22所示。图5.22 字幕“Replay”按钮的制作，新建一个“按钮”元件，在“弹起”帧上输入“Replay”，并添加“阴影”滤镜，然后在“指针经过”和“按下”帧上改变字体的颜色，接下来在“点击”帧上画出一个响应区，如图5.23所示。图5.23 “Replay”按钮（因操作太多，无法完全显现，完整操作请参照作品。）17总结三、网页设计经验谈 一般的来说，