网页设计论文Word格式.docx
- 文档编号:18978438
- 上传时间:2023-01-02
- 格式:DOCX
- 页数:11
- 大小:149.02KB
网页设计论文Word格式.docx
《网页设计论文Word格式.docx》由会员分享,可在线阅读,更多相关《网页设计论文Word格式.docx(11页珍藏版)》请在冰豆网上搜索。
切勿禁不住诱惑,觉得非要放入大幅的图画不可;
应考虑只用三两幅短小精悍的图像。
主页整体上要能够迅速传送。
如果载入的时间超过十至十五秒,很多用户就会等得不耐烦。
如果情况许可,最好先测试你的主页在稍差的条件下的传送速率,14.4千波特的调制解调器,或透过Prodigy等网上服务接驳万维网等。
此外、还须注意配合最低档的设备,例如标准的小型显示器,不要假设人人都用高解像度的大荧幕。
运用先进浏览软件所提供的一些尖端功能是可以的、但应确保你的主页在次一级的浏览软件上(例如某些网上服务所提供的专用浏览软件)仍可畅顺地显现。
4、善用图像
用户在网上四处漫游,你必须设法吸引和维护他们对你的主页的注意力。
万维网的其中一个最重大资源是其多媒体能力,所以我们无论如何要善加利用。
主页上最好有醒目的图像、新颖的画面、美观的字款,使其别具特色,令人过目不忘。
图像的内容应有一定的实际作用,切忌虚饰浮夸。
最佳的图像应集美观与传讯于一身。
注意图画可以弥补文字之不足,但并不能够完全取代文字。
很多用户把浏览软件设定为略去图像,以求节省时间他们只看文字。
因此,制作主页时,必须注意将图像所带的重要信息或联接其他页面的指示用文字重复表达—次。
用“纯文中”模式测试已制成的主页,确保其传达到所有信息。
5、吸引用户浏览
既然绞尽脑汁把主页弄得美观实用,没有人来欣赏就太可惜了。
为吸引所有网中人来浏览,必须使主页易于寻找。
通知其他网站(例如题材相关的网站),他们可能想连接你的主页。
安排将自己的网址列在所有相关的网址目录、索引、查找程序和“What’snew”页面上。
尽量将网址传播开去,使之出现在Internet和所有传统煤体上、例如书刊广告、公关文件、宣传品等。
二、网页设计与制作的美学原则
1、美的原则
什么是美呢?
美的事物应该具备什么条件呢?
我们根据人类美感的共通性可以定出十个美的原则:
连续、渐变、对称、对比、比例、平衡、调和、律动、统一、完整。
以下是关于十个美的原则的概述:
(1)连续
「连续」是一种没有开始、没有终结、没有边缘的严谨性秩序排列,它祇是反复的一种特殊情形,因此有规律的反复并不一定能产生连续。
「连续」是无限地扩张,它可超越任何架框限制。
「连续」包括「二方连续」和「四方连续」。
「二方连续」是单位形向左右或上下作反复的规律式排列。
它可作直线方向、曲折式、波浪式的方向延申。
「四方连续」是单位形向左右也向上下延申的现象,可产生四方连续的图形。
由二方连续造成的线条加上左右上下反复的排列,是创作四方连续图形的方法之一。
(2)渐变
「渐变」就是逐渐的改变,其有一定的秩序与规律。
「渐变」除形状渐变外,尚有「大小渐变」、「色彩渐变」、「位置渐变」和「方向渐变」等等,均可单独或混合运用。
任何构成元素之渐变,都有其开始与终结,或由一方开始,经渐变又回复原来的循环现象。
例如形状渐变,可从某一形状开始,逐渐变化成为另一形状,或由另一形状又逐步回复到某一形状。
无论是开始或终结,在渐变的设计中均可成为设计上的焦点,且在开始与终结的整个重复过程中,均会造成节奏感。
渐变形成的方式可由上而下、由左而右、或由中央发射、或作多元化的发展。
渐变的表现形式包括:
﹝1﹞自然形象之渐变、﹝2﹞形状之渐变、﹝3﹞大小之渐变、﹝4﹞位置之渐变、
﹝5﹞方向之渐变、﹝6﹞色彩之渐变。
(3)对称
视觉上,以一个点或一条线为基准,上下或左右看起来相等的形体,称为「对称」。
「对称」具有相称、均齐、均整的意思。
左右对称的形体向来都被认为是安定且具有机能的。
「对称」的表现形式包括:
﹝1﹞线对称、﹝2﹞点对称、﹝3﹞感觉对称。
通常对称的图形具有单纯简洁的美感,以及静态的安定感,但易流于单调、呆板。
一般来说,单纯的对称图形具有大方、强力的性格;
细密的对称图形则能增加作品的充实感。
许多商品设计即运用此特性而设计。
(4)对比
将相对的要素配置一起,相互比较,以形成二种抗拒的紧张状态,称为「对比」。
这种造成相对排斥性质的要素,即一般所谓的「对比要素」。
「对比要素」包含的范围非常广泛,举凡造形、色彩、质感、方向、面积等均属之。
圆形、三角形、方形是属于造形的对比,例如红砖、金砖两者具有相同的造形,而其质感因明显的不同,具有对比的性质。
对比现象的强弱与否,端赖对比要素的配置关系而定。
一般而言,不同的要素结合在一起,彼此刺激,会产生对比的现象,使强者更强、弱者更弱、大者更大、小者愈小。
亦即经由对比的关系可以增强个别要素所具有的特性。
「对比」的表现形式包括:
﹝1﹞线形的对比、﹝2﹞形状的对比、﹝3﹞份量的对比、﹝4﹞明度的对比、
﹝5﹞彩度的对比、﹝6﹞色相的对比、﹝7﹞质地的对比、﹝8﹞动态的对比、
﹝9﹞位置的对比、﹝10﹞其它的对比。
(5)比例
在造型上所谓的「比例」乃是指长度或面积等属于量度之间的一种比率,它描述的是部份与部份;
或部份与全体之间的关系。
在人类的历史中,「比例」一直是被运用在建筑、家俱、工艺以及绘画上。
尤其是希腊、罗马的建筑中「比例」被当是一种美的表征。
除了建筑之外,有几个理想的比例,古代的学者就把它公式化,而作为设计的基本原理,以便求得统一与变化。
其中最基本并且最重要的比例就是「黄金比例」。
古希腊人把「黄金比例」认为是最完美的比例而活用时造型中。
它的基本方法是把一条线分割成大小两段,小线段与大线段之长度比等于大线段与全部线段之长度比。
这种比例分割方法就是「黄金比例」。
(6)平衡
「平衡」是指两个力量相互保持的意思,也就是说把两种以上的构成要素,互相均匀地配置在一个基础的支点上,以保持力学上的平衡而达到安定的状态。
在造形的秩序中,「平衡」是极重要的一项。
由于造形的作品,并不是真正讲究实际的重量关系,所以「平衡」一词,在平面造形的世界中,应当是属于视觉的平衡。
这和力学的平衡、数学的平衡以及其它学科中所讲的「平均」是不一样的。
对「平衡」来说,有对称和非对称平衡之分。
在「平衡」的练习中,着眼点在于如何求得视觉上的安定与心理上的平衡。
例如形态、色彩、材质在画面中所具有的重量、大小、明暗、色彩、强弱、质感...等,都必须保持平衡状态,才会令人产生安定的感觉。
(7)律动
凡是规则的或不规则的反复和排列,或属于周期性、渐变性的现象,均是「律动」。
它给人具有抑扬顿挫而又有统一感的运动现象。
一般说来,律动和时间的关系密切,因为在其它具有时间性的艺术领域中,均能表现律动美,如音乐、舞蹈、电影、戏剧、诗歌等。
以音乐来说,利用时间间隔会使声音的强弱或高低表现出律动美,而呈现抑扬顿挫的变化。
而在我们的生活环境中,四季的变化、植物的成长、动物的运动以及各种生理反应等都存在着律动的现象。
此外自然界中的海浪、沙丘、麦浪、炊烟、屋瓦等形象,亦具有连续发展的反复,并呈现出视觉的一种律动美。
三、网页的布局设计
1.页面尺寸:
由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页面范围变得越来越小。
一般分辨率在800x600的情况下,页面的显示尺寸为:
780x428个象素;
分辨率在640x480的情况下,页面的显示尺寸为:
620X311个象素;
分辨率在1024X768的情况下,页面的显示尺寸为:
1007x600。
从以上数据可以看出,分辨率越高页面尺寸越大。
浏览器的工具栏也是影响页面尺寸的原因。
一般目前的浏览器的工具栏都可以取消或者增加,那么当你显示全部的工具栏时,和关闭全部工具栏时,页面的尺寸是不一样的。
在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。
但我想提醒大家除非你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。
如果需要在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览。
2.整体造型:
什么是造型,造型就是创造出来的物体形象。
这里是指页面的整体形象,这种形象应该是一个整体,图形与文本的接合应该是层叠有序。
虽然,显示器和浏览器都是矩形,但对于页面的造型,你可以充分运用自然界中的其它形状以及它们的组合:
矩形,圆形,三角形,菱形等。
3.页头:
页头又可称之为页眉,页眉的作用是定义页面的主题。
比如一个站点的名字多数都显示在页眉里。
这样,访问者能很快知道这个站点是什么内容。
页头是整个页面设计的关键,它将牵涉到下面的更多设计和整个页面的协调性。
页头常放置站点名字的图片和公司标志以及旗帜广告。
4.文本:
文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定者整个页面布局的可视性。
在过去因为页面制作技术的局限,文本放置的位置的灵活性非常小,而随着DHTML的兴起,文本已经可以按照自己的要求放置到页面的任何位置。
5.页脚:
页脚和页头相呼应。
页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。
你能看到,许多制作信息都是放置在页脚的。
6.图片
图片和文本是网页的两大构成元素,却一不可。
如何处理好图片和文本的位置成了整个页面布局的关键。
而你的布局思维也将体现在这里。
7.多媒体
除了文本和图片,还有声音,动画,视频等等其它媒体。
虽然它们不是经常能被利用到,但随着动态网页的兴起,它们在网页布局上也将变得更重要。
四、网页的风格的设计与制作
风格一词在词典上的解释是“气度、作风;
某一时期流行的一种艺术形式”。
具体到网页设计的基础上,网页设计师的风格就是在运用自己的所拥有的手段,包括所拥有的审美的素质、应用软件的能力、以及感受生活的敏锐的觉察力,来建立起自己独特的设计形式、独特的作风。
从这个概念出发,设计师就应该有自己的风格。
在网络如此发达的今天,网页也是五花八门,千奇百怪,但是作为一个设计师的地位还没有得到应有的提升,造成今天的网页设计师的风格没有真正的得以体现,使网页的设计在一个低层次的水平上重复。
同时由于大家的相互“借鉴”,使网页的页面布局基本上成了某种约定俗成。
这样的直接后果是网页作为新的媒体,本应该是方便人们的使用为目标的,却有很多的地方不能够使人满意,而这些不令人满意的地方却原封不动的保留了下来,有些是功能上的,例如在按钮或者是导航的设置上,有些形成了常规的按钮安排方式是令人不方便的。
同样在一些用色的规范或者是其它元素的应用限制了设计师作用的发挥,造成了这样的僵化模式。
所以在这个新的时代,急切的呼唤具有自己的风格的设计师来作出一些更好更方便的网页来。
五、网页的图像的制作方法
1:
用图片制作圆角表格
这是最常用也是最通用的方法,它能很好地适应各种浏览器和不同分辨率,大部分网页都使用这种方法。
先用Photoshop等作图软件绘制一个圆角矩形,再用“矩形选框工具”选取左上交的圆角部分(如图1),复制它。
不要取消选取,直接新建一副图像,Photoshop会根据选取部分的高度、宽度自动设置新建图像的大小。
张贴后,保存为WEB所用格式即可。
重复步骤②,分别用“水平翻转”工具和“垂直翻转”工具,保存另外三个方向的圆角。
打开网页制作软件,这里以Dreamweaver为例。
插入一个一行三列的表格,设置其CellPad、CellSpace和Border属性值都为0。
在第一列插入图片1.gif,第三列插入图片3.gif,并设置单元格的高度和宽度与图片一致。
设置第二列的背景颜色为与圆角图片一致的颜色,设置宽度为整个表格的宽度减去两个图片的宽度,并打开源代码察看器,删除这列中的字符””(Dreamweaver会自动在每个单元格中插入此字符,若不删除会撑大表格)。
依葫芦画瓢,做好下半部分的圆角。
再已插入的两个表格中间再插入一个一行三列同宽的的表格,CellPad、CellSpace和Border属性值都为0,宽度为100%。
设置第一列和第三列背景颜色为与圆角图片一致的颜色,宽度为1像素,并打开源代码察看器,删除这两列中的字符””。
到这,一个圆角表格就做好了,您可以在第二列中添加您想要的内容。
(如图3)
2:
利用VML技术
用VML技术可以更容易地制作一个圆角表格,而且还有投影哦!
修改表识为
在区域添加如下代码:
〈style〈brv““:
*〈br〉〈/style
在您要添加圆角表格的地方加入以下代码:
br
这里输入表格中的内容
您可以在上面的代码中设置圆角表格的宽度、高度、投影颜色等。
这样,一个有投影的圆角表格就制作好了(如图4)。
这种添加圆角表格的方法虽然很方便,但是它不能很好的适应每个浏览器版本,且在设计时是以层的方式现实,不利于版面设计,所以尽量使用第一种方法。
六、网页动画的设计与制作方法
1、动画的基本知识
动画是由若干不同景物和形体的画面连续播放时所形成的视觉现象。
动画中的每幅画面(图形或图像)称为一帧。
动画在原理上利用了人眼睛的“视觉残留”现象(视觉印象在人的眼中大约可保持0.1秒之久),使连续播放的不同画面形成“动”的感觉。
动画是一种非常重要的媒体形式。
本书所讨论的动画主要是指计算机动画:
利用计算机图形、图象处理技术,使用计算机程序制作出来的动画。
计算机动画是动画艺术与计算机技术的结合。
本知识点的学习要求掌握动画的基本知识包括:
计算机动画的概念、特点、分类、常用软件和动画制作方法。
(1)计算机动画特点
计算机能处理动画制作过程中重复、琐碎的工作,减少成本,提供工作效率;
能方便地对作品进行修改、复制、放大、缩小操作,减少了传统动画制作过程中的大量重复劳动。
将物理学及其他相关学科的知识与计算机强大的运算能力结合起来,可以模拟各种复杂的运动变化,创建逼真的三维虚拟画面。
(2)计算机动画分类
计算机动画有多种分类方法。
按空间视觉效果,动画可分为二维动画和三维动画;
按实现方式,动画可分为帧动画与造型动画;
按播放方式来,动画可分为顺序动画和交互动画。
(3)常用软件
在计算机动画领域最常用的动画制作软件包括:
网页动画制作软件Flash,集成工具Director,三维动画制作软件Maya和3DSMAX。
读者应该了解这些软件的功能和特点。
(4)动画制作方法
对于平面动画制作,主要工作步骤包括背景和关键帧的制作,补间帧的生成,不同角色的运动和动画的后期合成(配上音乐或视频)。
对于三维动画,还需要为各种对象进行三维空间建模,给模型表面赋予合适的材质,配置灯光和摄像机最后对模型进行渲染上色。
2、动画制作软件Flash
Flash是一种平面动画制作软件,非常适合制作网页动画,是目前网络动画制作的主流工具。
Flash在Web上大量应用的一个重要原因在于它采用矢量格式保存动画,动画体积小、适于在网络上传输。
同时Flash具有跨平台特性,具有很强的交互性。
本知识点要求掌握的知识包括:
Flash的特点、主要组件及其功能、工具箱中工具的用法、Flash制作动画的基本方法。
Flash的重要组件包括:
舞台、图层、时间轴、帧、播放头、调色板、属性面板、库等。
工具箱中比较重要的工具包括:
选择工具、矢量图绘制工具、调色工具、任意变形工具、填充变形工具、滴管工具等等。
对于这些重要的工具,从功能到用法都需要掌握,并能灵活运用。
此外,读者还要了解Flash作品的发布方法,发布的文件格式,了解Flash的一些基本参数,比如Flash默认每秒钟播放12帧,这个帧频非常适合网络动画,而Flash的帧频设置范围为0.1~120。
3、动画制作软件3DMax
3DStudioMAX是Autodesk公司开发的基于PC机平台的三维动画制作软件。
该软件应用领域非常广阔,包括建筑、装潢设计、广告设计、三维游戏等。
尽管近年来许多优秀的三维制作软件,如Maya、SoftImage、LightWave、Lightscape等也从工作站平台移植PC机平台上来了,3DStudioMAX仍有大量用户,在三维动画制作领域占有十分重要的地位。
三维动画制作不是本章的主要内容,但读者需要掌握三维动画的一些基础知识,包括3DMax的基本功能和特点,了解三维动画制作的基本方法和步骤,特别是建模、灯光、摄像机、渲染等在平面动画制作中没有涉及的概念。
4、动画制作技术
对于平面动画制作,需要掌握Flash的帧动画、补间动画、引导动画、遮罩动画的概念和制作方法。
Flash的补间动画分为形状补间和动作补间两种,而且两种动画所针对的对象类型是不同的。
补间动画除设置关键帧外,还需要设置属性以控制动画效果,如补间类型、简易值、旋转等。
二维平面动画和三维立体动画的制作流程有很大差别。
Flash平面动画的基本过程为:
(1)制定创作计划:
确定要执行哪些基本任务。
(2)添加媒体元素:
创建或导入媒体元素,如图像、视频、声音和文本等。
(3)编排动画:
在舞台上和时间轴上组织媒体元素,定义显示时间和显示方式。
(4)特效制作:
根据需要应用特殊效果,如模糊、发光等,并混合这些效果。
(5)编写脚本:
控制媒体元素的行为方式,包括这些元素对用户交互的响应方式及场景播放次序等等。
(6)测试并发布作品:
将制作完成的FLA文档发布为能在网页中显示并可用FlashPlayer回放的SWF文件。
元件是Flash中一个重要概念,如果将Flash作品看成一台机器,元件就是组成这台机器的定制零件。
Flash的元件有3种类型,分别是影片剪辑、按钮和图型。
要了解这些元件类型的特点和它们之间的差别,特别是具有独立时间轴的影片剪辑元件,在实际动画制作过程中起着重要作用。
实际上,一个Flash作品就是各种元件的集合。
在Flash使用元件能可使其发布文件的大小显著地缩减,使动画的播放速度加快,也使动画的编辑更加简单化。
拖动元件到舞台上,产生元件实例。
一个完整的Flash作品包括多个场景,相当于戏剧中的“幕”,通过添加脚本可以将这些场景连接起来,根据需要的次序播放。
Flash支持基于JavaScript的ActionScript脚本语言。
使用ActionScript脚本编写的一段预置程序称为一个动作,如场景切换、开始播放、停止播放等。
使用脚本能够制作更复杂的动画,支持动画交互性。
三维动画制作方面知识的重点在于了解动画的制作步骤,特别是与二维平面动画不同的部分。
三维动画需要先建立对象的三维模型,经过材质赋予、灯光设置、摄像机设置后,通过渲染才能产生逼真的画面。
3DMax三维动画的制作流程为:
(1)前期制作:
是指在使用计算机制作前,对动画片进行的规划与设计,主要包括:
文学剧本创作、分镜头剧本创作、造型设计、场景设计。
(2)动画片段制作:
根据前期设计,在计算机中通过相关制作软件制作出动画片段,制作流程为建模、材质、灯光、动画、摄影机控制、渲染等,这是三维动画的制作特色。
(3)后期合成:
影视类三维动画的后期合成,主要是将之前所做的动画片段、声音等素材,按照分镜头剧本的设计,通过非线性编辑软件的编辑,最终生成动画影视文件。
七、网页的测试与发布
1、网站测试
网站测试:
网站发布之前,通常都会检查网页在不同版本浏览器下的显示情况。
尤其是制作大型的或访问量高的网站,这个步骤十分必要。
由于各种版本的浏览器支持的HTML语言的版本不同,所以要让网页能够在大多数浏览器中顺利显示,就不得不做尽可能仔细的检查,必要时还得舍弃一些较新的效果。
(一).测试的内容:
(1)确保页面在目标浏览器中能够如预期的那样工作,并确保这些页面在其他浏览器中要么工作正常,要么“明确地拒绝工作”。
(2)应尽可能多地在不同的浏览器和平台上预览页面。
这使您有机会查看布局、颜色、字体大小和默认浏览器窗口大小等方面的区别,这些区别在目标浏览器检查中是无法预见的
(3)检查站点是否有断开的链接,并修复断开的链接。
(4)监测页面的文件大小以及下载这些页面所占用的时间
(5)运行一些站点报告来测试并解决整个站点的问题。
(6)检查您的代码中是否存在标签或语法错误
(二).运用Dreamweaver提供的站点报告测试功能
Dreamweaver提供的站点测试功能可以帮助我们检测网页在六种不同版本的常用浏览器中的支持情况,最后还会自动生成一份报告。
若要运行报告以测试站点,请执行以下操作:
(1)选择“站点”—>
“报告”,出现“报告”对话框。
提示:
若要仅为站点运行辅助功能报告,可以选择“文件”—>
“检查页”—>
“检查辅助功能”,报告将出现在“结果”面板组的“站点报告”面板中。
(2)选择要报告的类别和要运行的报告类型。
(3)单击“运行”,创建报告。
结果列表出现在“站点报告”面板(在“结果”面板组中)中。
根据运行的报告的类型,可能会提示您保存文件、定义站点或选择文件夹(如果尚未执行这些操作)。
2、使用LeapFTP将静态网页设计课程网站发布到服务器上
网页检测完以后就可以发布到服务器上了。
发布可以使用专门的FTP工具,也可以充分利用Dreamweaver的网页发布功能。
常用的FTP工具软件有LeapFTP、CuteFTP等,大家可以根据自己的爱好选择。
如果你没有自己的服务器,就可以到互联网上申请免费空间或购买空间,这里我们可以使用操作简单的LeapFTP工具发布网页。
(一)、启动LeapFTP,如下图所示:
2)输入FTP服务器地址、用户名和密码,端口号默认为21,回车,账号和密码正确,系统会显示登录成功信息:
3)在LeapFTP左边找到我们做好的精品课程网页,将其拖放放到右侧的服务器文件中,网页就开始发布了。
4)等所有资料(网页、图片文件夹及相关文件)上传完毕,就完成了网页发布。
5)打开自已的浏览器,输入http:
//192.168.67.4/html,访问一下,如果能正确显示我们做的页面效果,网站就发布成功了。
3、网站维护
网页制作好了,也上传到服务器上了,是不是以后就没什么事了?
并非如此,如果参观网站的访问者每次看到的网站都是一样的,那么它们日后就会渐渐失去兴趣。
所以网站日后的更新维护才是最重要的!
更新维护不仅仅只局限于简单的更换文字稿,有时会是网站框架的变更,板块的调整,色彩的更换等,甚至整站改版等,站在网络技术角度看,还会存在一些网页安全问题,这就是网站维护,修改好的内容再用步骤二的方法,将新的内容发布到服务器上。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 论文