网页设计论文

“FLASH爱好者网站”的网页设计与制作 班 级: 09春计算机网络专 学 号: 20097340170160 姓 名: 陈云峰 指导老师: 王勇 二〇一一年六月 【摘要】在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。本文从网页设计的角度出发，介绍一些设计中要素和技巧，例如框架、CSS样式的使用等等。以FLASH MTV的制作为网站主题。讨论色彩、图片、布局排版等在网页设计中的应用。 【关键词】网页设计 要素 框架 CSS 目录 目 录 前 言 ................................................................. 4 1(网页的要素 ........................................ 错误～未定义签。2 1.1图片要素 ................................... 错误～未定义书签。2 1.2 排列方法要素 ................................ 错误～未定义书签。5 1.3 色彩要素 .................................... 错误～未定义书签。5 2(网页设计技巧 ........................................................ 7 2.1 框架的使用 .................................. 错误～未定义书签。6 CSS样式的使用 .............................. 错误～未定义书签。6 2.2 3(涉及软件 ............................................................ 8 3.1 DreamWeaVer CS3介绍 ...........................................8 3.2 DreamWeaVer CS3操作界面 .......................................8 4(制作前期工作 ....................................................... 10 4.1歌曲类型选取 ................................. 错误～未定义书签。8 4.2 歌曲选择 ..................................................... 10 5. 作品制作过程 .................................................... 11 6(相关问题和结束语 ................................................... 11 参考文献及资料出处 .................................................... 12 毕业设计正文 前 言 互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。 1.、 网页设计的要素 在一个网站中，最重要的页面当属主页，所以在此以主页为例，说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素:文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。 1.1.图片要素 要设计出漂亮的主页，首先要成为计算机图形高手，仅这一点就可以让初学者花上一年半载的时间。图片的要求与页面的内容有关，一些较随意的主页像股票、医药站点等，来访者并不在乎你能否做出精彩的图片，有些时候他们反而觉得放置图象后影响了访问速度，他们关心的只是页面内容;相反像一些需要靠图象来吸引访客的主页，如游戏介绍、影视介绍、风光名胜等站点，图象是一个极为重要的要素，在这里缺少了恰当的图象，整个页面就会黯然失色、就是一个不完整的主页。这需要去学习像photoshop这样的图形图像处理软件，还要有一定的美术基础，如审美观、创意技巧等， 1.2.排列方法要素 主页的第二个要素是排列方法，即网页布局。网页作为一种版面，既有文字，又有图片;文字有大有小，还有标题和正文之分;图片页有大小而且有横竖之别。图片和文字都需要同时展示给观众，不能简单地将其罗列在一个页面上，否则会搞得杂乱无章。关于具体的网页布局，常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，关于它们，在网页设计的 4 毕业设计正文 相关书籍中或者在网络上都可以看到详细的叙述。比如如果内容非常多，就要考虑用“国字型”或拐角型;而如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型;而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选;Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。还没有提到的就是变化型了，只有不断的变化才会提高，才会不断丰富我们的网页。 1.3.色彩要素 色彩在网页所占比重很大。有了合理清新的色调，会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的，一个网站必须有一种或两种主题色。不至于让浏览者迷失方向，也不至于单调乏味。一般来说，页面的主体文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。 5 毕业设计正文 图1.1 完整的页面 6 毕业设计正文 2、 网页设计技巧 一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。在这里从框架和CSS样式的运用两方面来介绍网页设计的技巧。 2.1.框架的使用 FRAME(框架)是Web上经常会看到的页面结构。框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。 使用框架具有以下优点:访问者的浏览器不需要为每个页面重新加载与导航相关的图形;每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航 条。 使用框架具有以下缺点:可能难以实现不同框架中各元素的精确图形对齐;对导航进行测试可能很耗时间。 许多专业 Web 设计人员不喜欢使用框架，并且许多浏览 Web 的人也不喜欢框架。在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如，每当访问者单击导航按钮时就重新加载导航框架内容的框架集)。如果框架使用得法(例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态)，则这些框架对于某些站点可能非常有用。 2.2. CSS样式的使用 CSS(层叠样式表)是一种制作网页的新技术,它的全称是级联样式表,即Cascading StyleSheets的缩写，又称之为风格样式表单。CSS是在网页制作过程中普遍用到的技术。采用了CSS技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。 7 毕业设计正文 图1.2 3、涉及软件 3.1 DreamWeaVer cs3介绍 Dreamweaver CS3是Adobe(奥多比)公司收购Macromedia公司后最新推出的Creative Suite 3 设计套装中用于网页设计与制作的组件。作为全球最流行，最优秀的所见即所得的网页编辑器，Dreamweaver可以轻而易举地制作出跨操作系统平台，跨浏览器的充满动感的网页，是目前制作Web页站点,Web页和Web应用程序开发的理想工具。Dreamweaver，Fireworks，Flash被称为网页制作的“三剑客”，这三款工具相辅相承，是制作网页的最佳拍档之一。 3.2 DreamWeaVer cs3操作界面 DreamWeaVer cs3界面设计友好，空间广阔，操作精微细致,是一种所见即所得的网页编辑器，既有效的减少了代码编写的工作量，也确保所设计文档的专业性和兼容性。，如图3.1所示。 8 毕业设计正文 图3.1 DreamWeaVer cs3操作界面 9 毕业设计正文 4(FLASH MTV制作 4.1 设计思路及准备工作 .1.1剧本的确定 4 根据音乐《身边》为主题创作剧本，一个的好剧本是MV制作的灵魂，只有根据剧本才能指挥角色、元件、影片剪辑等元素进行演出，所以首先要确定剧本。 4.1.2素材、图像、元件的准备 素材、图像、元件的选择和准备工作是FLASH动画成功的基石，好的设计，不仅要考虑图片、场景、人物颜色的搭配，更要在人物的神态和动作上多下功夫，做到协调、一致、和谐[10]。在此阶段不仅要耗费大量时间和精力搜寻素材，有时更要亲手制作，利用辅助工具swishmax制作各种文字特效，利用Photoshop制作处理场景图片，利用Flash制作各种元件及矢量图像等为后期的工作做准备。 4.2导入音效和歌词 FLASH MV制作的关键是影音同步及歌词同步，将选择好并经过处理的的相关音效，文字歌词，等导入FLASH文件内。个人很喜欢根据音乐歌词寻找灵感，在音乐不同的阶段安排场景和角色，这样能使做出来的动画更符合音乐的基调和感情。整体上更和谐。根据音乐把相关的歌词填入场景中，做好歌词同步。 4.3 动画等主要元件的制作 MV中涉及很多特效及动画效果，如:花瓣摇摆、泪滴滑落、按钮、头发飘动等效果。根据音乐结合剧本创作这些动画效果及特效。按照不同的层次和顺序导入到场景中去，充分发挥自己的想象空间，做成一个完整的小动画、小故事。 4.4 MV的测试及保存 MV做好后需要大量的测试，根据情况对某些细节做调整，精益求精，在保存上应精简原则，在保证质量的基础上调整大小;由于FLASH有不同版本，在版本的选择上按就低原则，以适应不同版本的兼容和播放。 4.2 歌曲选择 10 毕业设计正文 歌曲类型确定后，要选择一首怎样的歌曲进行制作，考虑到为了使观众从我的作品中感受到喜悦，我决定采用久别重逢为主题，通过反复的听取不同的歌曲，最后我决定用许绍洋唱的“身边”作为本次毕业设计MTV的歌曲。 4.3 存在问题 本课题采用Flash为主要工具，制作音乐MV，因为FlashMV并不是真正的MV，只是根据歌词或主题制作的一段影音同步的小故事，因为所学尚浅，故还存在着许多不足之处。如: 1.Flash中人物刻画不够完善，很多动作，神态都需要有一定的美术功底及Flash基础，对于初学的我很困难，所以在此只做了一些简单的人物。 2.在Flash中的一些脚本语言初学时无从下手，只好从大量的视频、书籍里寻找，一些高难度的如鼠标跟随，swf文件加密，asv反编译等技术暂时无法实现，只好退而求次在按钮等上面加入一些简单的脚本语言。 11 作品制作过程 5(作品制作过程 5.1利用CorelDRAW绘制图画 利用CorelDRAW矩形工具、钢笔工具绘制出厨房，并通过CorelDRAW自带的色彩填充工 具填充上相应的色彩，如图5.1所示。 图5.1 厨房绘制 5.2制作FLASH元件 打开FLASH软件，通过“文件”?“导入”?“导入到库”，将绘制好的厨房图片导入FLASH 中，并将其元件命名为“厨房”，如图5.2所示。 图5.2 图片导入 12 作品制作过程 5.3 FLASH库中实例展示 图5.3 图5.4 图5.5 13 作品制作过程 图5.6 图5.7 (因元件过多，不一一例举，完整元件请参照作品内部。) 5.4 FLASH 具体制作过程 新建图层，将其分别命名。将先前制作好的元件插入相应图层中。(其中包括将音乐导入FLASH库中，并将其拖入到图层中。)如图5.8所示。 图5.8 新建图层,将图层命名为“脚本”，选中第一帧，在脚本编辑框中加入“stop();”，从而达到动 画停在第一帧的效果，如图5.9所示。 14 作品制作过程 图5.9 动画停止 人物行走为逐帧动画，在时间轴上每隔一帧便插入一个空白关键帧，然后将人物行走时四肢律动的图片放入相应帧上，以完成人物整个行走过程，如图5.10所示。(注意每个帧上的人物高度都需一致) 图5.10 男生走入 通过帧的运用，切换计算机屏幕的图片，从而达到模拟计算机启动时的效果，如图5.11所示。 15 作品制作过程 图5.11 电脑启动 首先在需要被遮罩层的上方新建一个图层，然后在新图层上画一个矩形，矩形的位置在被遮罩层文字的左边，接下来在第二个关键帧上调整矩形的宽度，使矩形完全遮住文字，最后在放置矩形的图层上单击鼠标右键?“遮罩层”即可，如图5.12所示。 图5.12 打字 首先将花瓣制成“图形元件”，再将制作好的图形元件拉入到影片剪辑当中，通过“动画补间动画”，使花瓣成自然下落的效果，并将第二个关键帧的实例“透明度”调成“0”。回到场景中，将刚才做好的花瓣下落的影片剪辑拉入到场景之中，并在属性框中将实例命名为“a”,新建一个图层，在第一个关键帧的脚本编辑框中输入“c=1;”,在第二帧上插入“空白关键帧”，并在脚本框中输入脚本，即可在动画中实现花瓣随机飘零效果。如图5.3所示。 图5.13 花瓣飘零 人物行走为逐帧动画，在时间轴上每隔一帧便插入一个空白关键帧，然后将人物行走时四肢律动的图片放入相应帧上，以完成人物整个行走过程。(注意每个帧上的人物高度都需一致) 16 作品制作过程 如图5.14所示。 图5.14 女生走入 制作手部动画，双手需要在独立图层之中，通过“变形工具”调整第二个关键上手的位置，两个关键帧之间的距离由设计者自己设定，最后两个关键帧之间加入“动画补间”即可，如图5.15所示。 图5.15 制作食物 插入第一个关键帧，将实例放入场景中，然后再插入一个关键帧，两关键帧之间的距离由设计者自己设定，接着将第二个关键帧上的实例放大，最后在两帧之间插入“动画补间”即可，如图5.16所示。 17 作品制作过程 图5.16 镜头拉伸 18 作品制作过程 调整左手的位置，使手与盒盖的运动保持一致;盒盖的运动首先需要将中心点定在盒盖与盒底的交界处，然后通过变形工具调整各个关键帧上盒盖的形状，各个关键帧之间的距离由设计者自己设定，最后在各个关键帧之间加入“动画补间”即可，如图5.17所示。 图5.17 打开戒指盒 在第一个关键帧处，将飞机先放在场景的左上角，然后在第二个关键帧处将飞机移动到场景的右上角，两个关键帧之间的距离由设计者自己设定，最后在两个关键帧之间加上“动画补间”即可，如图5.18所示。 图5.18 飞机飞过 在第一帧上插入关键帧，将“门”拉入到场景中，随后再插入几个关键帧，每个关键帧的位置由设计者自己调整。通过“变形工具”调整门在不同时期的形状，每两个关键帧之间插入“动画补间”即可，如图5.19所示。 19 作品制作过程 图5.19 开门 先将礼花制成“图形元件”，再将制作好的图形元件拉入到影片剪辑当中，通过“动画补间动画”，使礼花从左往右飞行，并将第二个关键帧的实例“透明度”调成“0”。回到场景中，将刚才做好的礼花飞行的影片剪辑拉入到另一个影片剪辑之中，并在属性框中将实例命名为“red”然后在脚本框中加入礼花脚本，最后将带有脚本的影片剪辑拉入到场景中相应的位置即可。通过以上方法便可做出不同色彩的礼花效果，实例名由设计者自己设定，如图5.20所示。 图5.20 礼花 首先插入一个关键帧，在场景上方画一个矩形，宽度需和场景一致，然后插入第二个关键帧，两个关键帧之间的距离由设计者自己设定，将第二个关键帧上的矩形高度通过“变形工具”调整得遮住整个场景，最后在两帧之间加入“形状补间”即可，如图5.21所示。 20 参考文献 图5.21 闭幕 在第一个关键帧上将文字放入场景下方，在第二个关键帧上将文字位置调整到场景中心，最后在两个关键帧之间加入“动画补间”即可，如图5.22所示。 图5.22 字幕 “Replay”按钮的制作，新建一个“按钮”元件，在“弹起”帧上输入“Replay”，并添加“阴影”滤镜，然后在“指针经过”和“按下”帧上改变字体的颜色，接下来在“点击”帧上画出一个响应区，如图5.23所示。 21 参考文献 图5.23 “Replay”按钮 (因操作太多，无法完全显现，完整操作请参照作品。) 6.相关问题和结束语 6.1相关问题 实践让我走向科技应用，走出课堂。当前，我们缺少的主要不是知识，而是缺少将知识与实际相结合的能力，我们在课堂上所学的与在实际当中遇到的是不尽相同的。只有通过理论联系实际，在实践中解决各种问题，才能提升应用能力。 6.2 结束语 在省直电大学习的三年里，在各位老师孜孜不倦地教诲下，通过自己的努力，顺利完成了专科三年的学习任务。感谢学校的各级领导给我们营造了良好的学习氛围和舒适的生活环境。通过本次毕业实践，本人在知识水平和工作能力上都有了显著的提高，专业技能有很大的提高。在此感谢指导教师的悉心指导和同学们的热心帮助。 参考文献及资料出处 [1]纪晓亮、金超、詹强、刘玉鹏.《FLASH精彩动画设计》.清华大学出版社.2006年7月 [2]甘登岱.《FLASH8创意与设计百例》.航空工业出版社.2007年10月 [3]百度网站.www.baidu.com 22