网页设计论文豆丁网文档格式.docx
- 文档编号:21020497
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:14
- 大小:3.05MB
网页设计论文豆丁网文档格式.docx
《网页设计论文豆丁网文档格式.docx》由会员分享,可在线阅读,更多相关《网页设计论文豆丁网文档格式.docx(14页珍藏版)》请在冰豆网上搜索。
文字,图片,排列方式和主色调,这四者相辅相成,缺一不可。
1.1.图片要素
要设计出漂亮的主页,首先要成为计算机图形高手,仅这一点就可以让初学者花上一年半载的时间。
图片的要求与页面的内容有关,一些较随意的主页像股票、医药站点等,来访者并不在乎你能否做出精彩的图片,有些时候他们反而觉得放置图象后影响了访问速度,他们关心的只是页面内容;
相反像一些需要靠图象来吸引访客的主页,如游戏介绍、影视介绍、风光名胜等站点,图象是一个极为重要的要素,在这里缺少了恰当的图象,整个页面就会黯然失色、就是一个不完整的主页。
这需要去学习像photoshop这样的图形图像处理软件,还要有一定的美术基础,如审美观、创意技巧等,
1.2.排列方法要素
主页的第二个要素是排列方法,即网页布局。
网页作为一种版面,既有文字,又有图片;
文字有大有小,还有标题和正文之分;
图片页有大小而且有横竖之别。
图片和文字都需要同时展示给观众,不能简单地将其罗列在一个页面上,否则会搞得杂乱无章。
关于具体的网页布局,常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等,关于它们,在网页设计的相关书籍中或者在网络上都可以看到详细的叙述。
比如如果内容非常多,就要考虑用“国字型”或拐角型;
而如果内容不算太多而一些说明性的东西比较多,则可以考虑标题正文型;
而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采,封面性是首选;
Flash型更灵活一些,好的Flash大大丰富了网页,但是它不能表达过多的文字信息。
还没有提到的就是变化型了,只有不断的变化才会提高,才会不断丰富我们的网页。
F、基于屏幕的可视开发环境;
G、可视编程环境;
H、高级可控制外观组件支持;
I、数据绑定;
J、Web服务和XML的预建数据连接器;
K、项目管理功能;
L、源代码控制系统;
M、其它
1.3.色彩要素
色彩在网页所占比重很大。
有了合理清新的色调,会弥补主页上的其它不足。
页面的色彩搭配是与网站的主题分不开的,一个网站必须有一种或两种主题色。
不至于让浏览者迷失方向,也不至于单调乏味。
一般来说,页面的主体文字应尽量使用黑色等较深的颜色,与背景对比明显,按钮、边框等使用彩色。
例如教育类网站使用蓝色为主题色,再用红色和黑色作为配色,就能表达出严肃、稳重的效果。
图1.1完整的页面
2、网页设计技巧
一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。
在这里从框架和CSS样式的运用两方面来介绍网页设计的技巧。
2.1.框架的使用
FRAME(框架)是Web上经常会看到的页面结构。
框架的最常见用途就是导航。
一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。
使用框架具有以下优点:
访问者的浏览器不需要为每个页面重新加载与导航相关的图形;
每个框架都具有自己的滚动条(如果内容太大,在窗口中显示不下),因此访问者可以独立滚动这些框架。
例如,当框架中的内容页面较长时,如果导航条位于不同的框架中,那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。
使用框架具有以下缺点:
可能难以实现不同框架中各元素的精确图形对齐;
对导航进行测试可能很耗时间。
许多专业Web设计人员不喜欢使用框架,并且许多浏览Web的人也不喜欢框架。
在大多数情况下,这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如,每当访问者单击导航按钮时就重新加载导航框架内容的框架集)。
如果框架使用得法(例如,在允许其他框架的内容发生更改的同时,使一个框架中的导航控件保持静态),则这些框架对于某些站点可能非常有用。
2.2.CSS样式的使用
CSS(层叠样式表)是一种制作网页的新技术,它的全称是级联样式表,即CascadingStyleSheets的缩写,又称之为风格样式表单。
CSS是在网页制作过程中普遍用到的技术。
采用了CSS技术控制的网页,设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。
如图1.2
3.涉及软件
3.1DreamWeaVercs3介绍
DreamweaverCS3是Adobe(奥多比)公司收购Macromedia公司后最新推出的CreativeSuite3设计套装中用于网页设计与制作的组件。
作为全球最流行,最优秀的所见即所得的网页编辑器,Dreamweaver可以轻而易举地制作出跨操作系统平台,跨浏览器的充满动感的网页,是目前制作Web页站点,Web页和Web应用程序开发的理想工具。
Dreamweaver,Fireworks,Flash被称为网页制作的“三剑客”,这三款工具相辅相承,是制作网页的最佳拍档之一。
3.2DreamWeaVercs3操作界面
DreamWeaVercs3界面设计友好,空间广阔,操作精微细致,是一种所见即所得的网页编辑器,既有效的减少了代码编写的工作量,也确保所设计文档的专业性和兼容性。
,如图3.1所示。
图3.1DreamWeaVercs3操作界面
4.制作前期工作
4.1歌曲类型选取
在确定了设计主题为FLASHMTV后,下一个步骤,就是歌曲类型的选取。
歌曲的分类颇为广泛,要选择一个适合自己的类型进行制作,考虑了下面几个问题。
该类型是否具有一定意义,是否能让作品做到不俗套,更容易让人接受。
在经过慎重考虑只后,我选择了流行歌曲的MTV制作,流行歌曲是目前少男少女们最喜爱的音乐类型,为了使MTV做起来比较顺利,我首先听了不同风格的歌曲,在其中找自己最喜欢,最有MTV画面的音乐。
通过以上因素,所以毕业作品歌曲的类型就定为了抒情类情歌。
4.2歌曲选择
歌曲类型确定后,要选择一首怎样的歌曲进行制作,考虑到为了使观众从我的作品中感受到喜悦,我决定采用久别重逢为主题,通过反复的听取不同的歌曲,最后我决定用许绍洋唱的“身边”作为本次毕业设计MTV的歌曲。
5.作品制作过程
5.1利用CorelDRAW绘制图画
利用CorelDRAW矩形工具、钢笔工具绘制出厨房,并通过CorelDRAW自带的色彩填充工具填充上相应的色彩,如图5.1所示。
图5.1厨房绘制
5.2制作FLASH元件
打开FLASH软件,通过“文件”→“导入”→“导入到库”,将绘制好的厨房图片导入FLASH中,并将其元件命名为“厨房”,如图5.2所示。
图5.2图片导入
5.3FLASH库中实例展示
图5.3
图5.4
图5.5
图5.6
图5.7
(因元件过多,不一一例举,完整元件请参照作品内部。
)
5.4FLASH具体制作过程
新建图层,将其分别命名。
将先前制作好的元件插入相应图层中。
(其中包括将音乐导入FLASH库中,并将其拖入到图层中。
)如图5.8所示。
图5.8
新建图层,将图层命名为“脚本”,选中第一帧,在脚本编辑框中加入“stop();
”,从而达到动画停在第一帧的效果,如图5.9所示。
图5.9动画停止
人物行走为逐帧动画,在时间轴上每隔一帧便插入一个空白关键帧,然后将人物行走时四肢律动的图片放入相应帧上,以完成人物整个行走过程,如图5.10所示。
(注意每个帧上的人物高度都需一致)
图5.10男生走入
通过帧的运用,切换计算机屏幕的图片,从而达到模拟计算机启动时的效果,如图5.11所示。
图5.11电脑启动
首先在需要被遮罩层的上方新建一个图层,然后在新图层上画一个矩形,矩形的位置在被遮罩层文字的左边,接下来在第二个关键帧上调整矩形的宽度,使矩形完全遮住文字,最后在放置矩形的图层上单击鼠标右键→“遮罩层”即可,如图5.12所示。
图5.12打字
首先将花瓣制成“图形元件”,再将制作好的图形元件拉入到影片剪辑当中,通过“动画补间动画”,使花瓣成自然下落的效果,并将第二个关键帧的实例“透明度”调成“0”。
回到场景中,将刚才做好的花瓣下落的影片剪辑拉入到场景之中,并在属性框中将实例命名为“a”,新建一个图层,在第一个关键帧的脚本编辑框中输入“c=1;
”,在第二帧上插入“空白关键帧”,并在脚本框中输入脚本,即可在动画中实现花瓣随机飘零效果。
如图5.3所示。
图5.13花瓣飘零
人物行走为逐帧动画,在时间轴上每隔一帧便插入一个空白关键帧,然后将人物行走时四肢律动的图片放入相应帧上,以完成人物整个行走过程。
(注意每个帧上的人物高度都需一致)如图5.14所示。
图5.14女生走入
制作手部动画,双手需要在独立图层之中,通过“变形工具”调整第二个关键上手的位置,两个关键帧之间的距离由设计者自己设定,最后两个关键帧之间加入“动画补间”即可,如图5.15所示。
图5.15制作食物
插入第一个关键帧,将实例放入场景中,然后再插入一个关键帧,两关键帧之间的距离由设计者自己设定,接着将第二个关键帧上的实例放大,最后在两帧之间插入“动画补间”即可,如图5.16所示。
图5.16镜头拉伸
调整左手的位置,使手与盒盖的运动保持一致;
盒盖的运动首先需要将中心点定在盒盖与盒底的交界处,然后通过变形工具调整各个关键帧上盒盖的形状,各个关键帧之间的距离由设计者自己设定,最后在各个关键帧之间加入“动画补间”即可,如图5.17所示。
图5.17打开戒指盒
在第一个关键帧处,将飞机先放在场景的左上角,然后在第二个关键帧处将飞机移动到场景的右上角,两个关键帧之间的距离由设计者自己设定,最后在两个关键帧之间加上“动画补间”即可,如图5.18所示。
图5.18飞机飞过
在第一帧上插入关键帧,将“门”拉入到场景中,随后再插入几个关键帧,每个关键帧的位置由设计者自己调整。
通过“变形工具”调整门在不同时期的形状,每两个关键帧之间插入“动画补间”即可,如图5.19所示。
图5.19开门
先将礼花制成“图形元件”,再将制作好的图形元件拉入到影片剪辑当中,通过“动画补间动画”,使礼花从左往右飞行,并将第二个关键帧的实例“透明度”调成“0”。
回到场景中,将刚才做好的礼花飞行的影片剪辑拉入到另一个影片剪辑之中,并在属性框中将实例命名为“red”然后在脚本框中加入礼花脚本,最后将带有脚本的影片剪辑拉入到场景中相应的位置即可。
通过以上方法便可做出不同色彩的礼花效果,实例名由设计者自己设定,如图5.20所示。
图5.20礼花
首先插入一个关键帧,在场景上方画一个矩形,宽度需和场景一致,然后插入第二个关键帧,两个关键帧之间的距离由设计者自己设定,将第二个关键帧上的矩形高度通过“变形工具”调整得遮住整个场景,最后在两帧之间加入“形状补间”即可,如图5.21所示。
图5.21闭幕
在第一个关键帧上将文字放入场景下方,在第二个关键帧上将文字位置调整到场景中心,最后在两个关键帧之间加入“动画补间”即可,如图5.22所示。
图5.22字幕
“Replay”按钮的制作,新建一个“按钮”元件,在“弹起”帧上输入“Replay”,并添加“阴影”滤镜,然后在“指针经过”和“按下”帧上改变字体的颜色,接下来在“点击”帧上画出一个响应区,如图5.23所示。
图5.23“Replay”按钮
(因操作太多,无法完全显现,完整操作请参照作品。
三、网页设计经验谈
一般的来说,绝大多数普通受众图形,插件,applets和其它有关的高级Web浏览器特性。
对我们来说,页面的实用可能比漂亮更重要,对于用户来说,没有什么比页面能够快速下载更重要了,简而言之,精简你的站点,这是一条最佳的捷径。
另外还要注意,不要依赖图形。
就站点设计而言,的确能够通过成功的图形设计招徕或者丢失访问者。
并非所有的访问者可以完全看到图片,某些人为了加快存取网络的速度已经关闭了浏览器端的图形。
简而言之,图形并不能正确的在客户端加载。
然而,图形经常被用来作为导航按钮。
第三要注意,仅仅在需要的时候使用帧(FRAME)。
使用帧可以把一个浏览器分成几个不同的窗口,对于站点的结构的把握是一个不错的方法。
但是,你还是必须知道,还是有人在使用不支持帧的浏览器。
在你开始打算设计一个帧的时候,你该仔细的考虑考虑你是否的确真的需要。
经常,你这样的需求可以通过表格来组织站点的结构。
网页设计涉及到对多种软件、多种知识的学习和应用,以及个人的审美观等等。
所以要想制作出漂亮的网页,需要一个逐步学习和经验积累的过程。
网页设计还有更多的技巧,有待于我们去挖掘和研究。
◆
参考文献及资料出处
[1]纪晓亮、金超、詹强、刘玉鹏.《FLASH精彩动画设计》.清华大学出版社.2006年7月
[2]甘登岱.《FLASH8创意与设计百例》.航空工业出版社.2007年10月
致谢:
在作品和论文制作和写作过程中,得到了曹玉婵老师的大力支持与悉心的指导,特此致谢。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 论文 豆丁网