常见的网页设计范文

引言：寻求写作上的突破？我们特意为您精选了4篇常见的网页设计范文，希望这些范文能够成为您写作时的参考，帮助您的文章更加丰富和深入。

篇1

一、关于简化布局表格绘制 

 

1.问题:网页用表格布局的教程中,把修饰文字用的完整的一幅图片分开插入,参赛者用表格布局操作时间花费多。 

2.解决方法:在dreamweaver(以下简称为DW)提供的布局模式中,可以先绘制跟全图长宽一样的布局表格,将全图设为表格的背景后,再在需要插入文字的地方绘制布局单元格。例如,对下图(长宽为:800ⅹ100)的布局,具体操作如下: 

(1)在DW中进入布局模式; 

(2)绘制表格,长宽为(800ⅹ100); 

(3)退出布局模式,选中表格,将上图设为表格的背景图片; 

(4)进入布局模式; 

 

(5)在需要镶嵌文字的地方,即在图中,字1、字2…绘制布局单元格。 

这样做还有一个好处,有背景图作参照,绘制单元格时不需要手工输入位置。要注意的是,采用表格布局时,如果表格有背景图片,有时背景图片会重复导致整个页面的变形,要避免变形,要设置该表格的CSS样式:。 

 

二、关于使用透明背景的PNG图 

 

1.问题:现在的浏览器IE6.0以下的版本不支持透明背景的PNG图,在IE中保持PNG图的透明背景用代码控制,增加参赛者的负担。 

2.解决方法:在网站设计中,有些素材通常要设置成透明背景,浮在网页中其它图上让人觉得非常“自然”。 IE6.0的PNG既然是不透明的,就不从IE下手,干脆将素材在PS中制作成不透明的PNG或JPG,或IE支持透明背景的SWF,此偷梁换柱的方法没有代码,适合参赛学生采用。 

(1)在PS中处理PNG的透明背景。 

如果透明的PNG图在网页中是浮在其它图上或透明过渡到其它颜色,在此暂且把“其它图、其它颜色”称为PNG的背景。习惯上,我们处理素材时把PNG的背景和透明的PNG图是分开处理且保存在不同文件。改变一下习惯,在PS中,把PNG的背景和透明的PNG图一起处理,处理时只需将PNG的背景放在PNG图的下层,然后保存成一个PNG或JPG文件即可。这带有背景的PNG或JPG图在IE中和在PS中的透明效果是一样的。要注意的一点是,在存成JPG图时,品质要选择“最佳”,才能达到PNG 24或PNG 32的效果。 

(2)在flash中处理PNG的透明背景。 

含有透明PNG图的swf在ie中还是透明的。所以,如果透明的PNG图是用来制作SWF动画的素材,这跟平时处理素材的习惯一样。在PS中将素材单独处理并存成透明的PNG,然后导入到flash中。要注意的是, flash cs3版本不能直接导入PNG图。要解决这个问题,可先导入一张JPG图,然后在库中选中该图,右击,选“属性”,在“属性”中选“导入”,找到PNG图,打开。虽然在库中,PNG图还是JPG格式,但拖放到舞台包括SWF文件都是透明效果的。 

 

三、关于Javascript响应鼠标经过事件 

 

1.问题:响应鼠标经过事件的代码过多,不利于参赛者记忆。 

2.解决方法:当我们浏览网页,鼠标经过网页上某些文字或图片时出现丰富、漂亮的提示;还有鼠标经过一排小图时,在另一个相同位置会显示每个小图的大图,这些鼠标响应事件给网页增添了动态。用css+javascript控制比用纯css控制或 swf来实现,思路更清晰,代码更简单,方便参赛者记忆。 

(1)鼠标经过出现漂亮的提示。 

鼠标经过文字或图片出现内容丰富、漂亮的提示,是将提示内容放在 或内,纯css控制规则较多,而css+javascript更简单、好记。具体操作如下:①将提示内容放在 或,即放在层内,并设置该div的ID,如“abc”(这ID是给javascript引用的),同时设置好该div的style的属性值,就div的位置、大小可据实际情况给值,但其中有两个属性的值,即position的属性值要设为absolute,display的属性值要设为none;②在鼠标经过的文字或图片的html标签内添加onmouseover和onmouseout事件。 其中: 

①onmouseover事件的值为: 

“document.getElementById(‘abc’).style.display=’block’”; 

②onmouseout事件的值为: 

“document.getElementById('abc').style.display='none'”。 

事件值中的“abc”就是div的ID号。当然,也可在内,将事件值定义成Javascript的函数,然后在onmouseover和onmouseout事件中调用已定义的函数。 

(2)鼠标经过小图现大图。 

篇2

前言

随着我国信息时代的不断发展，人们主要通过网络来获取相关信息，网络的作用也日益凸显，而网页作为网络的重要展现形式，其在设计过程中的排版与布局会直接影响一个网页的浏览量。因此，对网页设计中排版与布局研究有着重要意义。

一、网页设计中的排版与布局的原则

排版与布局是网页设计中的重要组成部分，其主要目的是让信息页面更加美观，使信息内容更加合理且条理清晰，让浏览者得到更好的客户体验。因此，在进行网页排版与布局的过程中，为达到预期效果应遵循一定原则：首先，纵观全局，整体规划。通过对页面的文字和图片进行整体平衡，并融入趣味内容，实现页面的和谐统一；其次，突出网页主题。即利用网页版面的主次关系，将具有较高价值的信息放在版面上部位置，起到重点突出的作用；再次，版面恰当装饰。即在不影响网页功能的前提下，对网页予以简单装饰，做到疏密有度、图文并茂；最后，遵循色彩原则。为了让一个网页在众多网页中脱颖而出，在对网页进行排版设计的过程中，应对页面色彩进行合理组合，形成强烈的视觉冲击力，以引起浏览者的重点关注[1]。

二、网页设计中的排版与布局的内容

网页设计中排版与布局主要是对文字和图像进行版式设计，使两者合理组合，向浏览者准确传递相关信息的同时展现页面美感。其基本内容主要包括网页标题设计、网页文字编排、网页图文结合及页面设计的节奏感。其中网页标题一般被放在网页最上方且位置居中，根据不同需求还可使用图片予以装饰，而剩余页面文字则根据网页的具体需要以点、线、面等方式进行合理编排。不过通篇的文字叙述易使浏览者产生厌烦感，进而放弃阅读，于是页面内容文字还应配图说明，通过图文结合的形式，依据不同网页类别将相关图片与文字进行灵活搭配，使页面内容变得更加生动活泼，从而激发浏览者的阅读兴趣，充分发挥网页传递信息的作用[2]。

三、网页设计中的排版与布局的方法

在进行网页设计之前，首先，要对页面的表达内容予以整体规划，通过简洁明了的布局排版方法对主要信息予以重点突出。其次，合理控制页面主色调，即主色彩控制在五种之内，并确定一种为主色调，其它几种只起到烘托作用即可。最后，注重字体的设置。整体页面的字体在三种以内，且大小适中，同时对标题与正文的字体大小和颜色加以区分。

四、网页设计中的排版与布局的常见类型

目前，网站种类众多，从形式上划分主要包括门户类、形象类、电子商务类、企业类和政府类等，尽管不同种类的网站对网页版面要求也不尽相同，但网页排版与布局的常见类型也就几种。（一）排版的主要类型。排版的基本类型大致被分成十类，其中最为常见的有以下三种：一是满版型。满版型的整个页面被图像占满，采取图像为主、文字为辅的排版设计，使页面具有开阔之感；二是分割型。分割型是把页面进行上下分割或者左右分割，然后将文字和图片分别在两个不同区域，形成直观的视觉感受；三是倾斜型。倾斜型是将文字和图片做倾斜式编排，使页面整体形成视觉冲击效果。（二）布局的主要类型。常见的布局类型有T型、口字型和同字型，其中T型是指页面的顶部为标语和横幅部分，左下方和右下方分别分布着主菜单和详细内容。这种布局模式能使整个页面主次分明、清晰明了，但也缺乏一定灵活性，显得相对枯燥。而口字型的最大优势则是可以充分利用版面，将主题内容放在中间位置，在其上下左右分别放入横条广告、菜单、内容导航、友情链接等内容，整个布局类似一个口字型。这种布局在国外站点较为常见，在国内的使用率相对较低。除此之外，还有一种同字型布局，这种布局一般设有大标题和小标题，其位置均在页面上方，相应内容被布置在左右两侧，而页面下方通常情况下会被留白，即使有内容也多为网站基础信息及网站制造方。

五、结论

综上所述，网页设计中的排版与布局影响着网页的成败，为不断满足人们对网络的需求，网页设计人员应针对不同类型的内容采取相应的排版与布局方式，进而提高网页质量和优化网页视觉效果，为人们带来更好的浏览体验。

参考文献

篇3

就今天的生活来说，计算机是人们生活不可或缺的一部分，人们每天的网页浏览量远大于书籍的浏览量。因此，网页的美感对于人们来说是十分重要的。合理的布局、唯美的画面，往往会使人们在浏览网页时生出一种舒适感，为此各网站都花费人力、财力来进行网页的设计，尤其是布局的设计。

一、网页设计中的布局的相关概念

网页设计中的布局的相关概念，主要是一些构成成分的概念，其中包括了：整体造型、页面尺寸、页眉页脚、文本、图片等，下面就其中几个重要的概念进行讲述。这里需要指出的，网页设计中的布局，不仅仅要求的是对图像这些表面因素进行设计和布局，同时还需要对一些潜在的因素以及其他相关因素进行深入研究，只有将整体化的设计元素充分整合在一起，才能最大化地发挥网页布局的最佳效益。

（一）整体造型

页面的整体造型，指的是页面的整体形状，它所指的只包括页面填充内容所形成的形状并不是浏览器的形状，常见的造型主要有圆形、菱形、三角形等，当然也可以是这些基础类型的结合体。页面造型的选择，在一些时候是根据网站的性质来选的，带有一定的寓意。

（二）页面尺寸

页面尺寸并不是固定的，它受到很多其他因素的影响，就算是显示屏的尺寸或者分辨率都影响着页面的尺寸的大小。这几个因素是客观的，也是我们无法改变的，并且网页页面是在浏览器中呈现的，然而浏览器占据了一定的篇幅致使页面进一步的减小，但是这种情况是可以解决的，因为浏览器的工具栏等是可删除的。

二、计算机网页设计中的布局的重要性

无论是设计什么事物，人们对于其布局构造总有着严格的要求，对于网页布局也不例外。合理、美观的布局，给人们带来的是一种舒适和享受，尤其是在长时间浏览网页时，完美的布局对于减轻人的疲劳感是有重要作用的，由此可知计算机网页设计中的布局的重要性。只有这样才能创造出最大的经济价值与财富，推动计算机网页设计的进一步发展和进步。

网页布局的意义不仅仅是给人带来美感，与房屋布局一样，合理的布局在一定程度上可以增加其内容。在浏览网页时，人们可能只是简单的看一下网页页面所分布的内容，因此要想增加网页的浏览量，除了分布内容要有吸引力之外，还要保证其内容的全面性。这就要求网页的页面足够大，但是页面尺寸受很多因素的限制，所以只能从网页布局上来想办法。人们开始根据自己页面索要涉及内容的多少以及内容的类别、重要性进行页面的布局，使页面上的内容能够具有一定的层次感，并且在人们进行阅读时能给人们带来视觉上的舒适感。

三、常见的网页设计布局及其特点

在日常的网页页面中，页面布局的类型很多，常见的页面布局有“同”字型、标题正文型、综合框架型、封面型、Flash型，人们对这些布局的感观已经存在了，但是具体的布局结构还不太了解，下面笔者将将讲述以上几种布局类型。

（一）“同”字型

该类型的网页布局从内容填充的角度来说，其内容填充量较大，一般这类网页的上方都是标题栏，填充的可能是网站的主题，也有可能是横幅广告，其下可能也有小标题的存在。页面的左右也分布有相应的内容，一般可能是一些网站的最新动态简讯、网站的服务人员、附加信息以及广告，该部分的内容一般是人们不太会去注意的，同时也是可开发价值较高的区域。该类型网页的主要内容一般都是分布在中央位置，从上至下，按照内容的重要性、类别或者是所带有的色彩，对于此部分的内容一般还有细节分布，再次不再细说。至于网站的下部分一般不会分布内容，就算是有内容分布，也只是一些网页的常规内容。例如，网站制造方的信息、网站后台管理登陆以及网站的基础信息等。

（二）标题正文型

与“同”字型的页面分布有所不同的是，标题正文型页面一般没有左右的分布，其他的类似程度很大。页面的上半部分都是以标题的形式存在，如果出现的是广告也很正常，页面的中央部分分布的是主要内容，但是其主要内容所包括的含有“同”字型的侧边内容，一般网站主要内容的简讯是在标题下方，与并列的是一些附加信息，诸如天气、注册信息等。然后接着分布的就是网站的正文了。标题正文型的网页页面结构简单，一般是一些政府机构或者事业单位采用的较多。

（三）综合框架型

综合框架型在所有的页面布局中应该是结构比较复杂的一类，它的上下左右都分布着框架结构，内容基本都是分布在框架里面。它与其他类型的区别，其实就是把其它类型无形的界线描绘出来了。

（四）封面型

仅仅听着封面型，就能猜出它的基本分布，的确，正如书本的页面分布一样，封面型的页面分布就是以较大篇幅的图片为主。一般该类型的页面分布都是在网站的首页出现，页面的中央部位大篇幅的可能就是平面图片或者是动画，其周围分布着较少的信息，而此类信息一般又都是超链接的入口。一般诸如QQ空间的首页的个人主页网页页面就是采用此种类型的布局的，它主要是为了突出个人特色，以炫目吸引人们的眼球。

（五）Flash型

Flash型的页面布局与“封面型”有着异曲同工之妙，只不过Flash型网页页面运用得更多的还是Flash，当然它所运用的除了动画还有声音，因此它优于封面型的就是它的听觉效果，视觉与听觉两种效果的作用下给人们带来的除了享受还有一种震撼。关于此种类型的应用网页一般主要是游戏的登录或者是等待进入游戏的页面，当然也不排除有些个人网页的主页所采用的是Flash型的布局。

四、简述如何进行网页设计的布局

进行网页设计中的布局首先要确定页面的尺寸，确定好尺寸有利于后续内容模块的安排，在确定了页面的尺寸后开始进行整体造型的选择，选择时可根据网页主题或者是个人的爱好来进行选择。选择好整体造型根据网页所要呈现的内容类型、量、突出重点的量来进行布局的安排，在进行布局的安排时，要注意布局的疏密度，不能过度，同时也要注意突出重点。在安排好大致内容后，进行“绿叶”的点缀，可以在大致布局上增加一些其它信息以做装点。

计算机网页设计中的布局是一门艺术，它没有什么固定的格式，布局的选择、策划完全取决于个人的审美观，因此要想提升网页布局的美感，就必须要加强对于美学的研究，将生活中的美学知识运用到网页的布局上，给人们带来更多的视觉享受。

参考文献：

[1]玛依努尔・阿布都哈地尔.对计算机网页设计布局问题的探讨[J].产业与科技论坛，2012.

篇4

中图分类号：TP2 文献标识码：A 文章编号：1672-3791（2013）01（c）-0018-01

多媒体技术是利用计算机对文本、图形、图像、声音、动画、视频等多种信息综合处理、建立逻辑关系和人机交互作用的技术。随着现代生活进入数字化时代，多媒体技术的日趋成熟，网页设计者力图将各种多媒体元素融合，构成风格独特、功能全面的页面，方便用户浏览。

1 网页设计中主要使用的多媒体技术

目前，网页设计中主要使用的多媒体技术主要包括：图形、图像处理技术，动画处理技术，数字音频处理技术，视频处理技术。

1.1 图形、图像处理技术

图形、图像是网页设计的基本元素，常见的图形图像主要经过获取图像、编辑处理图像、输出图像、图像数据压缩和图像储存五个步骤，最终演变为二维或三维图像，以给用户带来强烈的视觉冲击。

1.2 动画处理技术

多媒体动画采用的是数字处理方式，它不仅给文字提供绚丽的外挂特效，还能创建出二维、三维的动态效果。动画的格式有GIF、SWF、FLIC、Java动画等，动画的创建常用到COOL 3D、flash 3DS Max等软件。

1.3 数字音频处理技术

数字音频技术突破了传统的模拟方式，实现了音频数字化，可以产生良好的音响效果，利用一些音频处理软件来将音频处理成自身需要的效果，并配合视频，将对网页的整体结构和布局起到良好的促进效果，常见的音频文件主要有MID、WAVE、MP3等格式。

1.4 视频处理技术

目前视频是网页设计中一项不可缺少的多媒体元素，我们在观看网页中的视频时，视频信号根据不同的视频信号源可分为高频或射频信号、复合视频信号、分离电视信号。获取数字视频的方式有：从VCD光盘获取、从数字摄像机获取和对模拟视频采集。

2 多媒体技术在网页设计中运用出现的问题

2.1 多媒体元素格式选择错误，且不考虑浏览者的方便性

在网页设计中，图片、音频、视频等元素格式的选择尤为关键，应实施最优化原则，尽量选择占用容量小且更接近真实的格式。我们不难发现，很多网页中就经常出现图片、视频无法打开的情况，这往往是由于浏览器不支持文件的格式，或文件太大，无法载入。

2.2 多媒体元素滥用，视觉元素的堆砌和信息内容的缺失

网页中除了包括平面视觉构成的各个元素和布局机制，还包括动态、多媒体、交互元素等网页特有的视觉元素，但是整个网页元素只是简单的堆砌，网页布局缺乏规划和审美意识的设计，不仅造成资源的浪费，而且会大大降低用户的浏览量。另外，某些设计精美的网页片面追求页面的绚丽，但实际呈现的信息内容匮乏。

2.3 技术因素带来的视觉尴尬

网页中包含的图片、影像、文字等媒体内容需要通过专门的软件（浏览器）才能显示，机器的分辨率差异会导致网页呈现出现偏差。如观赏Flas时，必须安装特定的插件程序，否则将显示空白框和提示文字。另外，不同的浏览器产品对同一网页的显示效果也有差异，用户常需切换浏览器才能达到最佳欣赏效果。

3 运用多媒体技术提高网页设计质量应注意的问题

由于多媒体自身的互动性、娱乐性，有创意的设计，自然会吸引浏览者的眼球。运用多媒体技术提高网页设计质量应注意以下问题。

3.1 多媒体技术运用时要有所选择

对于多媒体元素格式应合理选择，以免造成打不开或是文件太大难以载入，要对其进行合适的处理。比如多使用图像微缩图，对于不需要放大清晰浏览的图片可以用Photoshop这类的图形编辑软件对原图片重新取样，根据自己的需要调整到合适的大小，再保留新图样。动画标题则不宜使用太多，建议使用节省容量的静止图片。

3.2 注重多媒体技术与艺术设计的结合

网页的设计不能只单纯的将多媒体元素进行堆砌，也应考虑其艺术性，提高审美情趣。在网页设计中，更多的是追求平面视觉传达效果，将各种元素有效的结合，这种结合应注意以下几点。

（1）网页内容与形式的表现必须和谐统一，具有一定的秩序，形式表现必须服从内容要求。网页设计既要考虑整体感，又要注重细节的编排，各种多媒体元素的选择应当与网页具有相关性。

（2）突出主题要素。每个网页都应有明确的主题，其风格要与主题内容相统一。在统一的风格页面中，添加图片、文字、动画等元素时，要注意色调的统一，并按照视觉心理规律和形式将主题主动地传达给观赏者。作为主题要素，要注意编排的位置，使其成为人们浏览时的视觉焦点。网页设计中各构成要素在组合时，要注意其结构的轻重大小、虚实、多少等对比因素，加强视觉力度，以强化页面的整体吸引力。

（3）注重色彩搭配。一般来说，色彩的运用在一个页面不应超过3～4个，其中择一为主色调，遵循“总体协调，局部对比”的原则，不同网页的主题可以用不同的色彩来表现，常用色系主要有蓝色、绿色、橙色、暗红，配之运用一些黑、白、灰的颜色搭配使用。另外，需要注意的是文字的颜色与背景颜色的区分，以免对比太强或太弱影响浏览者的阅读。

（4）注重网页布局。网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、Flash型等。如果信息量大，可以选择使用国字型或拐角型；纲要性的网页可以考虑标题正文型；框架结构浏览方便、速度快，但结构变化不灵活；Flash型形式灵活，缺点是无法呈现较多的文字信息，网页设计应把尽可能多的信息集中在一个页面上，做到一目了然。

（5）恰当运用网页留白。虚实与留白是网页设计形式美的重要表现形式。运用网页留白，形成页面节奏感、版块层次感、内容主次感，以化解大量信息聚集起来造成的压迫感，给浏览者带来轻松、愉悦的享受和无限的想象空间，最大限度地激发他们的浏览兴趣。

随着多媒体技术的逐步发展和日益成熟，网页设计者需在现有多媒体技术条件下，注重两者的完美融合，以对浏览者产生强烈的视觉冲击，给其留下深刻印象。网页设计是艺术与技术的高度统一，网络技术与艺术创意的紧密结合，使网页设计由平面设计扩展到立体设计，由纯粹的视觉艺术扩展到空间听觉艺术，网页效果不再近似于书籍或报刊杂志等印刷媒体，而更接近于电影或电视的观赏效果。

参考文献