网页设计要素有哪些？

http://www.verychannel.com/ezine/example/web.html

□...网页设计时应注意哪些问题
网页设计，根据个人爱好以及网页内容的不同，版面的设计布置千变万化，换一下背景就是另一种感觉，什么样的布局好看，没有定式。笔者根据自己的经验体会特总结出如下要点：

1.网页内容的选择要不落俗套。 放眼望去，网上的许多个人主页简直就是"杂货店".内容包罗万象,题材千篇一律.人人都是"软件下载",个个都有"网络导航"，从头到尾找不出一丝“鲜”意.所以，我们在设计网页时，要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”，如能坚持天天更新的话,我相信这样的网页一定会受到大家的欢迎。

2.内容确定下来以后，不要着急开始制作页面。我们应该对整个版面规划设计一下，好好的想一想，主题是什么，大概内容该怎么安排，接着最好在纸上把这个框架画出来——这就是排版。排版是很重要的，没有一条清晰的主线，那么整个版面将是混乱一团。

3.整个页面的主线理好以后，我们还必须对它进行补充，以保证页面的完整性和整体性。比方说，页面的标题内容要简洁明了，使人一看就能明白该网站有没有自己所需要的东西；遇到长文本时，用划线把它分隔开，以便人能一目了然地看清楚；重点段落要突出显示，这样人就能有选择性地获取信息；在网页上留下通讯地址或Ｅ－ＭＡＩＬ地址，有利于用户和你交流；网页中使用商标，不能侵犯版权；以上都是要考虑的一些细节问题。同时特别要考虑到以后网站的维护更新要方便。

4.制作时,内容不要和其他网站的内容相同,适当加入一些自己的文章,评论和见解,会使大家更加相信您,尊重您.例如翻译一些英文教程,写作一些软件的用法,分析一些实例制作过程.毕竟是个人主页,要体现您的个性,风格,让大家了解,接受您的观点,是个人主页的精神所在!

5.图象的制作要兼顾大小和美观，一般来说，掌握好photophop这个强大的工具，再配合其它一些专用图象软件如ulead、paint shop pro等，不难制作出漂亮的精美的图片。但图片是为主页内容服务的，不要让整个版面太花花绿绿，喧宾夺主。在网上就可以找到很多图片、图库和动画。

6.不要使用大幅面的Java程序,能够用javascript替代效果的则尽量不要使用java.因为目前来讲java的运行速度实在慢的让人无法忍受，往往使浏览者没有耐心等页面全部显示出来，这样你的精心设计便毫无效果啦！

7.单张图片不要超过30k,每页图片总量不要超过60k(一般情况).据统计分析,每页不超过60k图片的网页,其下载速度是可以让人接受的.所有的图片都必须"减肥"小图片(100x40)一般可以控制在6k以内,动画控制在15K以内,较大的图片可以"分割"成小图片.合理采用jpg和gif格式也是至关重要的,色彩鲜艳高分辨率的用jpg,色彩单调低分辨率的用gif,采用gif89a格式的图片在download时能交错显示.

8.图片的下载较慢,要想使用户在图象没有传下来之前，就能够知道图象上的内容，我们就必须为图片加注解.这样一来，在图象没有显示出来时,可以通过注解的标注来帮助浏览者知道这是关于什么内容的图片,以方便用户作出选择，是否需要等待,是否可以点击.特别考虑到纯文本浏览者浏览的方便。

9.设计Web页面时，一定要用640×480和800×600的分辨率来 分别观察。许多浏览器使用640×480的分辨率，尽管在800×600高分辨率下一 Web页面看上去很具吸引力，但在640×480的模式下可能会黯然失色。作一点小小的努力，设计一个在不同分辨率下都能正常显示的网页。

回到目录
把〖非常频道-非常电子报〗推荐给朋友
□...巧用CSS的Border属性
冯永曜黄山村夫

制作过网页的人都有为画线而烦恼的经历，本文介绍的小技巧也许对你有所帮助。我们先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，它可以定义边框线的类型、宽度和颜色，利用这个特性，可以制作一些特殊效果。下面将通过实例来说明其应用技巧。

1、给文本加边框

上面的示例中，给一段文字加了不同的边框，只是为了说明边框线的颜色、粗细是可变的。第一个边框的CSS代码是：style="border:thin solid red"；“border”后面的三个参数的含义是：边框线的宽度是：thin（细线）；边框线的类型：solid（实线）；边框线的颜色：red（红色）。我们定义边框，实际上就是设定这三个参数值。

边框线的宽度有三个标准值：thin（细线）、medium（中粗线）和thick（粗线），此外，也可以自定义宽度，如：1pt、5px、2cm等。

边框线的类型有九个确定值：none（无边框线）、 dotted（由点组成的虚线）、 dashed（由短线组成的虚线）、 solid（实线）、 double（双线，双线宽度加上它们之间的空白部分的宽度就等于border-width定义的宽度）、 groove（3D沟槽状的边框）、 ridge（3D脊状的边框）、 inset（3D内嵌边框，颜色较深）、 outset（3D外嵌边框，颜色较浅），注意：如果系统不支持这些边框的属性值，那么“dotted”、“dashed”、“double”、“groove”、“ridge”、“inset”和“outset”都会被“solid”代替。

边框线的颜色：可以用十六进制的颜色代码，如#00ffcc。

从上面可以看出，给文本加边框确实很简单，上例中后面那几个边框的设置，我不讲你也明白了吧！在这里告诉你一点小技巧，给一段文本加边框，可把CSS加在〈P〉标记里；给几段文本加边框，先把那几段文本用DIV标记括起来，再把CSS加在〈DIV〉标记里；若是要给一行文本加几个不同的边框，则需要把文本放在表格里，再把CSS分别加到〈TD〉标记里。

2、给导航菜单加分隔线

上面这个例子中的小白线，当然可以用图象来做，但我在这里是用CSS的“border”的扩展属性画了边框的一条边，这样代码要少的多。画边框的单边与上例的边框的四条边类似，一个边框的四条边的属性如下：

边框线名称：border-top（上边框线）、border-right（右边框线）、border-bottom（下边框线）和boder-left（左边框线）；每条边框线的类型、宽度和颜色的取值与“boder”属性相同。如本例中要定义每个单元格的左边框线为白色线，线的宽度为“1px”的实线，则CSS代码是这样的：style="border-left: 1px solid #ffffff"。

在单独定义边框线时，若不给出某个值，那么就取其默认的初始值。在dreamweaver中定义CSS非常方便，不用编写代码；把常用的边框线一次定义好，放在外连式CSS文件中，要用时调用一下就行了，非常方便。

3、在一个边框中采用不同宽度和颜色的边框线

在本例中的效果，当然可以用上例中的方法来实现，但那样代码过多，可采用另一种合并的方法，把四条边的属性值分类放在一起，如本例的代码是这样的：

style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。

从上面可以看出，我把边框线的类型、宽度和颜色归类在一起定义了，这里请注意几点：

一、四条边框线的位置顺序是：上边框线、右边框线、下边框线、左边框线；

二、我在本例中边框线的类型只取了一种实线类型，实际上四条边也可以分别定义不同的类型；

三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值，则其余三个自动取相同值，如：border-style:solid与border-style:solid solid solid solid的效果完全一样；如果仅给出两个或三个值，那么缺失边的属性值将取与对边相同的值。如：boder-width:thin thick与border-width:thin thick thin thick效果相同，border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。

Border属性的灵活应用，可以产生许多特殊效果，方法与上面介绍的相同，不再一一举例了。

回到目录
把〖非常频道-非常电子报〗推荐给朋友
□...Photoshop中Ctrl、Shift和Alt的妙用
Photoshop是许多朋友所熟悉的一种图形图像处理软件，本人在使用Photoshop时深感Ctrl、Shift和Alt三键的妙处多多，灵活使用这三个键可以大大提高图形图像处理效率。现将本人使用此三键的心得总结如下，供喜爱Photoshop的朋友参考。

一、选择对象时Shift、Alt

1.椭圆选择工具(Elliptical marquee tool)和矩形选择工具(Rectangularmarquee tool)。

椭圆（矩 形）选择工具可在图像中选择椭圆（矩形）区域。

(1) 椭圆选择工具快速选择圆形（矩形选择工具快速选择正方形）。

先选中Elliptical marquee tool（或Rectangular marquee tool），再将鼠标指针移到需选择的对象上，单击左键并拖动，同时按下Shift键，完成选择后先放开左键，后放开Shift键，就可以选中圆形或者正方形。

(2) 从中心点建立选择

先选中Elliptical marquee tool（或Rectangular marquee tool），再将鼠标指针移到选择对象上，在中心点单击左键并拖动，同时按下Alt键，如左图所示，完成选择后，先放开左键，再放开Alt键，这样就快速地完成了从中心点开始的选择。

(3) 从中心点建立圆形（或正方形）选择

先选中Elliptical marquee tool（或Rectangular marquee tool），再将鼠标指针移到选择对象上，在中心点单击左键并拖动，同时按下Alt和Shift键，完成选择后先放开左键，再放开Alt和Shift键。

2. Lasso(套索)工具组间的转换

Lasso（套索）工具组可帮助用户生成边界十分复杂的选择区域，Lasso tool（套索工具）可生成边界为曲线的选择区域，Polygon lasso tool（多边形套索工具）可生成边界为折线的选择区域。

(1) 从Lasso tool转换为Polygon lasso tool

先使用Lasso tool进行曲线轮廓的选择，，保持鼠标左键为按下状态，按下Alt键后松开左键，这时即可进行折线轮廓的选择。（在进行折线轮廓选择时需保持按下Alt键。）

(2) 从Polygon lasso tool还原为Lasso tool

使用Polygon lasso tool进行折线轮廓选择后，保持鼠标左键为按下状态，松开Alt键，即可进行曲线轮廓的选择。（松开Alt键后也需保持鼠标左键为按下状态）。

二、增减选择时Shift和Alt键的使用

1. 如果要增加选择区域，按下Shift键后（鼠标指针旁边出现一个加号），选中要增加的对象，此时将当前选择加入已有选择。

2. 如果要减去一部分选择区域，按下Alt键（鼠标指针旁边出现一个减号），选中要去除的对象，此时从已有选择中减去当前选择。

3. 如果要保留两个选择区域重合的部分，先选中第一个选择域，同时按下Shift和Alt键（鼠标指针旁边出现一个乘号），再选中第二个选择域，这样可保留两个选择重合的部分。

三、变换选择时Shift键的使用

使用Free trans form（自由变换）命令可以实现选择的缩放、旋转等变换。当使用该命令后，变换矩形出现在选择旁，将鼠标指针放在变换矩形角上的小方框上，鼠标指针变成双箭头，用户可以通过拖动它来调整选择的大小，按下Shift键后再拖动，可保持选择的两个方向比例不变。

四、移动选择时Ctrl、Shift和Alt键的使用

1. 移动选择

选中对象，按下Ctrl键，将鼠标指针移至选择内（屏幕上出现带着剪刀的鼠标指针），拖至目的地后，松开Ctrl键和鼠标左键。

2. 移动选择时，按下Shift键可将移动方向限制在水平、垂直或45度方向。

3. 用箭头键移动选择时，按下Shift键一次可移动10个像素。

4. 移动并复制

选中对象，点击Move tool移动工具后按下Alt键，将鼠标指针移至选择内（鼠标指针变成双箭头），拖至目的地，松开鼠标左键和Alt键。

五、移动辅助线时Shift、Alt键的使用

辅助线可以帮助用户以精确的尺度处理图像。如需移动辅助线，先选择移动工具Move tool，将鼠标指针移至辅助线上，拖动辅助线到新的位置，拖动时按下Shift键可将辅助线锁定在网格点，或者以一定的尺寸单位移动。拖动时按下Alt键可改变辅助线的横竖方向:如为水平辅助线，拖动时按下Alt键，则变为垂直辅助线，且该垂直辅助线经过鼠标指针所在点;如为垂直辅助线，拖动时按下Alt键，则变为水平辅助线，且该水平辅助线经过鼠标指针所在点。

六、直线描绘时Alt键的使用

使用Line tool直线工具时，按下Shift键可强制直线为水平、垂直或45度。

七、路径锚点时Alt键的使用

路径的描绘是采用钢笔工具Pen tools进行的，在画了一条曲线段后，按住Alt键并单击刚建立的平滑点来删除手柄，这样可将平滑点转化成一个角点;按住Alt键并拖动刚建立的平滑点，可将平滑点转化成带有两个手柄的角点（有时称之为拐点）。

八、选择描点时Shift和Alt键的使用

选择Direct selection直接选择工具，单击路径中的任一锚点，则此点变黑，表明已被选中，按住Shift键可增加锚点，若按下Alt键，并在路径上单击，所有锚点都被选中。

九、调整曲线命令下Alt键的使用

Curves调整曲线命令可调整一幅图像的色调范围。打开Curves命令对话框，对话框中图形网格可调整，如果想使网格变小，只要按下Alt键同时单击网格即可，再一次按下Alt键同时单击网格可使网格复原。

回到目录
把〖非常频道-非常电子报〗推荐给朋友
□...UltraDev4.0使用中常见错误对策
在使用UltraDev4.0制作asp的网络应用程序时，经常会遇到“……JavaScript

error……”、软件自行退出等错误。其实这个问题与UltraDev4的稳定性和兼容性有关，出现这

个现象的原因有很多种：

1.数据库的原因：

在设计数据库时对于数据表、数据表中的字段都要避免使用中文，并且不要使用一些

ABScript中的保留字，最好的方法是在名字前加上一个前缀或后缀。还有建立后的数据库使用也

会出现错误，一般重新建立数据表或库可以解决（我曾就遇见过这样的事，看看蛮对的数据库就

是出错，照样重建就好了）；

2.当页面多次编辑后，光是在服务器行为视窗中删除的行为有时会留下许多Asp残留码，这会

导致你页面编辑失败或者测试出错等等。所以有时在编辑后最好多关心源码；

3.过多的安装了插件有时也会引起UltraDev执行错误。这个错误严重会导致UltraDev崩溃，

其实是由于插件作者对于代码没有考虑周全造成的，我曾经遇见过一使用update数据操作就出现

将当前页代码增加五倍，最后还是卸除了部分插件解决。所以对于不太使用的插件最好卸除；

4.在进行UltraDev数据库链接时不要将Access数据库处于设计状态，否则不光会链接出错，

当你预览Asp页面也会出错，而要是不太注意，这问题够你忙活的了；

5.UltraDev4跟几种内存驻留程序会不定时出现冲突，如早期的金山毒霸开着连UltraDev4都

打不开了，所以只有尽量少开后台程序了。

6.在利用UltraDev4制作登录系统中有个用户等级设置，这里的等级名称也千万不要使用中

文，否则必定会出错的。

7.“……JavaScript error……”最多出现在数据源建立时，通常出现一次错误后，即使你

再次正确设置数据源也会报错，最好是重启UltraDev，再不行就重启操作系统，那个用户等级问

题我就是这样才解决（对于解决js错误，重装UltraDev甚至重装操作系统也并不鲜见）。

8.操作系统对于UltraDev使用也会有或多或少的影响。通常使用Windows2000 server版比用

Windows 98 ＋Personal Web SerVer来得好，一来稳定，二来自带IIS5.0不必费心找服务器软件

了，而且我发现出错的概率也小很多。

使用UltraDev4.0的网友最好去升级到4.01，它是Macromedia公司四月份发布的，修改了一些

错误，避免了一些常见问题的出现，我网站有下载和升级包的简单说明。

9.千万不要使用任何UltraDev汉化包。我在UltraDev1.0使用时曾用过汉化包，结果始终出现

不明错误，后来就一直不敢用了。在论坛上听说很多网友也有类似情形，所以建议UltraDev用户

不使用汉化包。

以上这些是我在使用Dreamweaver UltraDev半年多时间中的对于出错原因的一些体会和解决

方法，希望对于你使用UltraDev有帮助。对于2000年6月才推出的软件，存在些Bug也属于正常，

关键是如何中使用中积累经验去对付它。其实有很多人对于Dreamweaver UltraDev不屑一顾，认

为是个鸡肋产品……不过我倒认为他是学习Asp的很好途径，因为它可以让你在最短的时间内做出

令自己满意的WEB程序从而获得学习的动力。