专题讲座网页设计与构图1网页的构图.docx
- 文档编号:24795646
- 上传时间:2023-06-01
- 格式:DOCX
- 页数:15
- 大小:558.57KB
专题讲座网页设计与构图1网页的构图.docx
《专题讲座网页设计与构图1网页的构图.docx》由会员分享,可在线阅读,更多相关《专题讲座网页设计与构图1网页的构图.docx(15页珍藏版)》请在冰豆网上搜索。
专题讲座网页设计与构图1网页的构图
专题讲座:
网页设计与构图
(1)-网页的构图
网校教师:
刘涛
网络经济倍喻为“眼球经济”,正式说明了“注意力”是网站建设的关键。
这促使着网站的建设从单一、冷漠的技术型转向多元化、人性化、富有亲和力的技术艺术复合设计。
如何吸引浏览者来访问我们的网站?
内容是很关键的一块,但是页面效果的作用也是不容忽视的,就好象人总是喜欢穿好看的衣服一样,美丽的事物总是对人有很大的吸引力的。
简单来说,好看与否是我们对页面效果的评判标准。
1、网页设计与平面设计的异同
网页设计与传统的平面设计在视觉传达方面很大的相似之处,但是在技术实现方面又是有着很大的区别。
网页设计是传统的平面设计的视觉传达效果运用和网络技术实现的有机结合,我们可以说网页设计是综合平面设计艺术和网络技术的一门边缘学科。
A、艺术效果的传达
传统的平面设计讲究页面构图、版式布局、空间表现等,这些要素对于网页设计来说也是适用的。
美观、好看是我们不变的追求。
参看下列网站:
B、载体的差异
传统的平面设计作品大多数都是以印刷平的形式出现;而网页设计作品则是通过显示器出现的,并且在传输的过程中受到网络带宽的限制。
有接触过平面设计的朋友都知道,普通印刷是按照色素的减法原理进行的,设计时的颜色模式为CMYK,而计算机的显示器的色彩工作原理则是以色光合成加法原理进行的,既RGB模式,使用同样的颜色,但是在不同的颜色模式下表达的效果是有区别的。
因为受到网络带宽的限制,网页设计中的图象处理也不同于平面设计,为了加快下载速度,在图象保持质量的前提下我们要尽可能的缩小其文件大小,而不像平面设计那样为了追求图象的质量而不管其文件大小。
作为一名合格的网页设计师,在处理网络图形时应做到在保持图象清晰的前提下尽可能的缩小图象的文件大小。
C、功能的异同
很多人在设计网站的时候会有这样的一个现象,做出来的网站是很漂亮,但是让访问的人无从下手来进行访问,想从这个网站里找点自己感兴趣的内容但就是怎么也找不到,但也不是说这个网站里没有这些内容,有是有,但就是找不到或者找起来很麻烦。
这说明了一个问题,即向导性和可操作性。
传统的平面设计作品是以向人们传达某种信息或诉求为目的;而网页设计除了拥有平面设计作平的功能以外,还有重要的向导和连接功能,即网页具有很强的可操作性和互动性。
我们都知道在制作一个网站的时候一定会有个名为index.html的页面,我们一般把它称为“首页面”。
一般在我们浏览网站的时候,在IE的地址栏里输入域名后直接打开的就是这个文件名为index.html的页面,那么它的作用是什么呢?
我相信大家都有在书上找某部分内容的经历,我们一般都会打开书的目录来进行查找,为什么?
我想我在这里就不用多说了吧?
那么同理,如果把我们的网站看成是一本书的话,那么“首页面”我们就把它看成是书的目录,它的作用就是使我们尽快的找到自己想查看的信息。
动静结合是网页设计的另一重要特色,这点在平面设计里是无法实现的。
专题讲座:
网页设计与构图
(2)--网页设计的基本元素
网校教师:
刘涛
接上专题讲座:
网页设计与构图
不同性质的网站,其页面内容安排是不同的。
一般网页的基本内容包括标题、网站标识图案(LOGO)、页眉、页脚、主体内容、广告栏等。
A、页面标题
在站点的没一个页面中都有一个标题,用来提示页面的主要内容,着一信息将出现在浏览器的标题栏中,而不是在页面的布局中。
它的重要作用就是引导访问者清楚地浏览网站的各项内容,不至于迷失方向。
标题的加入在HTML语言中比较简单
B、网站标识(LOGO)
网站作为一个对外交流的重要窗口,创建者都会用来进行自身形象的宣传。
如果该企业(社团)已经导入了CIS(CorporateIdentitySystem)形象识别系统,那么在网站建设过程中应依据该系统为指导进行网页设计,其中标志性图案就是网站的LOGO。
如果还没有导入CIS,在网站建设之前应该根据网站的总体定位,设计制作一个网站的LOGO,这如同一个产品的商标,集中体现了该网站的特色、内容及其内在的文化内涵和理念。
LOGO一般设置在主页面的显要位置,二级页面的页眉位置。
如图:
C、页眉
页眉指的是页面上端的部分,大家可以参照下图,有的页面划分比较明显,有的页面没有明确的区分或者没有页眉。
页眉的注意力值较高,大多数网站制作者在此设置网站宗旨、宣传口号、广告语等,有的则把它设计成广告位出租。
D、页脚
页脚是页面底端部分,通常用来显示站点所属公司(社团)的名称、地址、版权信息、电子信箱的超连接等。
E、导航
导航是网页设计中的重要部分,也是整个WEB站点设计中的一个独立部分。
一般来说,一个网站年的导航位置在每个页面中出现的位置是固定的。
导行的位置对于站点的结构与整体布局有着举足轻重的作用。
导航的位置一般有四种标准的显示位置:
左侧、右侧、顶部和底部。
有的站点运用了多种导航,是为了增加页面的可访问性。
F、主体内容
主体内容是页面设计的主体元素。
它一般是二级连接内容的标题,或者是内容提要,或者是内容的部分摘录。
表现手法一般是文字和图象相结合。
它的布局通常按内容的分类进行分栏安排。
页面的注意力值一般是按照从上到下、从左到右的顺序排列,所以重要的内容一般安排在页面的做上位置,次要的内容安排在右下方。
专题讲座:
网页设计与构图(3)--网页空间与页面尺寸
网校教师:
刘涛
网页设计的特殊性在于其最终显示的平台是计算机的显示器,人们通过15寸或者17寸的显示器来看我们的网站,因为浏览器的工具条要占部分屏幕空间,所以在不同的显示条件下的屏幕尺寸也不相同。
目前,大部分人使用的是15寸的显示器,其显示分辨率一般设置为800X600。
显示分辨率设置为640X480或1024X768的只是少数,所以我们在进行网页设计的时候要以800X600为标准。
相信大家都见到过很多网站上都有“建议分辨率为800X600”的字样吧。
A、页面的安全宽度
我们在进行网页设计的时候都希望所有的浏览者在访问我们的网站的时候看到的都是最好的效果,不管他们是使用的什么样的操作系统,什么样的硬件设备。
自己做的是什么样,访问者看上去就是什么样。
但是我们要考虑到使用不同的显示器时分辨率的问题。
当显示分辨率设置为800X600时,即浏览器的屏幕最大宽度为800像素,因为页面最右边的滚动条占去20像素,所以网页的安全宽度应该为780像素,所以,网页设计宽度只有限制在780像素以内,在用800X600分辨率的显示器浏览的时候,水平方向才能够在视屏范围。
在网页设计中,我们可在HTML语言里控制当前页面内所有对象距离页面左边框的距离,在默认的状态下,页面中的所有对象都距边框10像素。
如图:
所以现在页面的安全宽度应该是760像素。
而当我们更改了这一默认值以后,把左边距改为0的时候,HTML语法: