1网页设计要素
(1)排列方式要素排列方式也叫网页布局,是网页设计中又一个关键要素。网页的版面充斥的内容很多,既要有文字,也要有图片。而文字字体和大小的格式之分,文字于整篇文章中又有标题和正分之分。图片则同样有大小和横竖的差别。不管是文字还是图片都是为了给浏览网站的人展示网站的特色和内容,不能将其一股脑罗列于网页版面上,无条理即会显得杂乱。有关网页排列方式,常用的型式有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型和变化型等,这些型式可利用上网浏览各种网页直接观看,不再详细介绍。(2)色彩要素色彩要素于网页设计中占有的比例比较大。通过合理的色彩搭配,可使网页在浏览者眼前一亮,一定程度上弥补主页设计吸引力的不足。网页的色彩搭配和相应网站所呈现的主题紧密联系。一般来说,一个网站的主题色可有一种或两种组成,这样做简单明了,不至于使浏览者迷失方向或枯燥乏味。为使浏览者更方便于快速浏览文字内容,可将主体文字的颜色设计为深色,相应的网页背景、按钮或条框等则设计为彩色。
2基于CSS技术的网页设计实例
CSS技术是级联样式表(CascadingStyleSheets)的简称,也可称之为风格样式表单。CSS技术在很多网页设计中受用率极高,应用CSS技术可使设计工作量减少,同时也能有效对网页整体布局、色彩搭配、字体设计、链接组成和背景分布等进行更为精确的设计控制。作为一项可快速设计网页的应用技术,CSS技术更易于控制网页布局、提升编程代码的重用率、简化HTMLCompanyName-PageName@import"css/master.css";写入完毕,即可保存为index.html,然后创建文件夹css,images。设计版面的大框,需在html文件中写入Helloworld,然后创建css文件,并命名为master.css,保存在/css/文件夹下。同时写入:#page-container{width:760px;background:red;}控制html的ID是page-container的盒子,且宽度为760px,且背景色彩设计为红色。为使得盒子设计居中,可写入margin:auto;保存css文件为:#page-container{width:760px;margin:auto;background:red;}这样一来,盒子与浏览器顶部具有8px的间隙,若需消除间隙可在css文件中写入:html,body{margin:0;padding:0;}(2)第七步:网站头部图标与logo部分的设计。为了增加网页的整体效果,可专门制作网页头部。首先,本例需要采用两张网络图片(如图1和图2)。#header层设计背景图案,可通过添加方式引用图1。写入:#header{height:150px;background:#db6d16url(../images/head-ers/about.jpg);}通常,使用背景的属性可以是简写属性名,这样可以规定好背景的颜色、图案、定位、能否重复使用和如何重复使用等多方面问题。另外,需要注意的是图片的保存路径是相对css存放路径来定位的,而不是很多人误解的html文件。替换标签中的“spider-man”,设计该图片(如图2)浮于顶部左上方,写入属性值为:h1{margin:0;padding:0;float:right;margin-top:57px;padding-right:31px;}这样一来,该图片可向右自由浮动,且上边距为57px,右间隙为31px。另外,由于IE浏览者自身的原因,进行css编程需尽量采用padding属性,可有效避免IE浏览器的附加调试。以上浅略分析结合工作中总结的网页设计经验,在网页设计中应用CSS技术可将网页整体布局、色彩搭配、字体设计、链接组成、背景分布以及其他效果的实现简化,设计控制过程更为便捷,只要通过对CSS代码进行局部修改便可实现基于同一版面而衍生出来页数不同、外观不同和格式不同的多个版面。CSS技术的应用范围宽泛且于网页设计的作用显著,还体现在所有浏览器均可适用、可轻松实现图片转换功能和快速下载页面、网页内字体设计美观性更强且更便于页面的文字排版工作和网页页面的布局设计更容易得到掌控等。此外,基于第一次设计网页版面的编程内容可随时更改部分CSS代码来调整所有版面的风格,不再需要依次对每个不同网页进行修改。究其原因则在于所有网页版面包括文字、图片、排列方式和色彩等元素都采取一个CSS文件进行牵头控制,只要改动这个CSS文件,其他版面相应指令随之发生改变。如果网页设计仍然没有应用到CCS技术将如何轻松控制网页整体布局、色彩搭配、字体设计、链接组成、背景分布以及其他效果呢?以前主要依靠HTML标签的方式来实现,编码过程十分繁琐,一个网页版面所需写入的代码就会显得极为臃肿。而CSS技术的引入则有效地解决了这一棘手问题,当然所呈现出来的CSS应用技术也仅仅是其九牛之一毛,实际应用中也绝非如想象中那么容易。
3结语
阐述了网页设计中所涉及主要的文字元素、图片元素、色彩元素和排列方式元素,同时稍有归纳有关网页设计方面的一些技巧。第二节内容中重点讨论基于CSS技术的网页设计实例探究。以DIV+CSS网页设计举例说明,展开该设计所包括的10个关键步骤,并以其中“第二步:创建html模板及文件目录等”和“第七步:网站头部图标与logo部分的设计”重点剖析和论述。实际上,一个好的网站在其网页设计工作当中不仅仅只是拥有几个漂亮的版面就能称得上好,网页设计所涉及的内容还有很多,如视、音频链接等,这上海职称也是共同关注的问题。
作者:甄凤其 单位:湖南湘西民族职业技术学院