瑞星卡卡安全论坛技术交流区系统软件 网页制作各种妙招,技巧【推荐】

12   1  /  2  页   跳转

网页制作各种妙招,技巧【推荐】

网页制作各种妙招,技巧【推荐】

网页制作各种妙招,技巧

网页制作妙招




由于网站正以惊人的速度在飞速增加,互连网通道是越来越拥挤了,网页的下载速度也越来越慢,给网页减重是网页设计工作者首先考虑的问题之一。减少图片数量、降低图片质量、采用jpg、gif等压缩图片文件,如此等等,其目的都有是为了给网页减重,提高传输速度。我这里再告诉你几种方法来给网页减重(本文介绍的方法均在Dreamweaver3中实现,若在其它网页制作工具中具体作法稍有改变):
1、不使用图片获得各种颜色的线条

图1 各种颜色的线条
在Dreamweaver3或Forntpage中虽有插入水平线的功能,但他插入的线条无法改变颜色,为了获得特定颜色的线条你不得不使用图片,这无疑增大了网页负担,有没有其它办法呢?有!你可以使用表格来实现,考虑到表格是以行为单位来定位的,为了能更方便的定位线条,我们把表格放到层上,这样你就可以任意把线条放到任何位置了。具体作法如下:
(1)单击功能面板上的插入层图标,在页面上画一个层,再在功能面板上点击插入表格图标,在弹出的表格面板上把表格的行和列均设置为1;
(2)选取表格,在表格的属性面板上把“cellpad”、“cellspace”、“border”均设置为“0”,把“W”设置为“100%”,“H”设置为2pixels(象素),设置好表格的背景色(也就是线条的颜色。
(3)在单元格中点一下,在单元格的属性面板上把“W”设置为“100%”,把“H”设置为2pixels(象素);
(4)在快速启动栏上点击源代码检示窗图标,在源代码编辑窗中把单元格中的“ ”(“空格”代码)删去。
到此,一条特定颜色的水平线已画好。若要改变线条颜色,只要改变表格的背景色就行了;若要改变线条高度(即线条的粗细),只要修改(2)、(3)中的“H”即可;改变层的宽度,就可改变线条的长度;若要把水平线变为垂直线,只要把(2)、(3)中的“W”和“H”的值换一下就行了,是不是方便极了。

2、巧作渐变色背景

图2 渐变色背景示例
象图2这样的渐变色背景能给人一种梦幻般想象的感觉或产生明显的立体感,当我们需要使用渐变色背景图像时,我们不必做与所填充的面积等大的图像,只要做一幅能包含所有渐变色的图像单元就行了,这样即使是填充整页的背景,其图像文件的大小也不到1K,而且横向渐变色,背景区纵向高度任意改变不必改动背景图像;纵向渐变色,背景区横向宽度任意改变不必改动背景图像;真是方便。
制作方法如下:
(1)横向渐变色图像单元制作
在Potoshop中,单击“File”主菜单,选择“New”,在新建图象属性对话图上,在图象宽度输入框中输入你的背景区域宽度,在图象高度输入框中输入1pixels,按“OK”键,再用渐变色填充,根据需要修饰一下,用Export输出 jpg、gif均可。
(2)纵向渐变色图像单元制作
在Potoshop中,单击“File”主菜单,选择“New”,在新建图象属性对话图上,在图象高度输入框中输入你的背景区域宽度,在图象宽度输入框中输入1pixels,按“OK”键,再用渐变色填充,根据需要修饰一下,用Export输出 jpg、gif均可。
有了图象单元,只要在需要渐变色背景的区域把相应的背景图象单元作为背景图象就行了。

3、拉线背景的制作技巧

图4 拉线背景示例
拉线背景已成为一种时尚,目前一些大型网站的网页都在大量使用拉线背景,制作拉线背景同样无需制作整幅的拉线图象,只需制作一幅拉线单元图象就行了。制作方法如下:
(1)在Potoshop中,单击“File”主菜单,选择“New”,在新建图象属性对话图上,在图象高度输入框中输入2pixels,在图象宽度输入框中输入1pixels,按“OK”键,再用填充工具把其中的一个象素填充上你所要的颜色,根据需要修饰一下,用Export输出 jpg、gif均可。
(2)在需要拉线背景的区域,选择上面做好的图象作为背景图象,就一切OK了。而且无论你是多大的背景区域均不必修改图象单元。

4、拉丝图象的制作技巧

图5 拉丝图象示例
拉丝图象给人一种朦胧的想象感觉,另外,他可以用质量比较低的图片,这大大减少了图片文件的份量,加快了下载速度,我想这可能是其流行起来的主要原因之一。拉丝图象的制作方法已有不少文章介绍。我在这里介绍的方法与一般方法不同,它能更进一步减少你的网页重量,提高制作拉丝图象的效率。制作方法如下:
(1)在Potoshop中,单击“File”主菜单,选择“New”,在新建图象属性对话图上,在图象高度输入框中输入2pixels,在图象宽度输入框中输入1pixels,图象背景选择(透明背景)“Transprent",按“OK”键,再用填充工具把其中的一个象素填充上你所要的拉丝颜色,根据需要修饰一下,用Export输出 gif即可;
(2)在Dreamweaver3中,单击功能面板上的插入层图标,在页面上画一个层,再在功能面板上点击插入图象的图标,在层上插入你所要的图象;
(3)再单击功能面板上的插入层图标,在页面上画一个层,在该层的属性面板上,在层背景图象输入框中输入你刚制作的拉丝单元图象文件名;
(4)把上面制作的有拉丝背景的层拖到图象上,并调整层的大小与图片大小一致,一幅漂亮的拉丝图象就做成了。
若要把网页中已有的图象变为拉丝图象,只要重复(3)、(4)两步操作就行了。用本方法还可以把动画变成拉丝动画呢?怎么做,不用我讲了吧?!把图片换成动画就大功告成了。是不是太方便了。这里提醒你注意:第(1)步操作中把图象背景设为透明是关键,否则你就看不见下面的图片了。

最后编辑2006-08-05 13:56:49
分享到:
gototop
 

网页制作的50个秘诀!


一、内容 

1、让读者有理由逗留。要把网页作得趣味盎然,引人入胜。但首要的是要让它有用处。这样做的一个很简单的办法是提供相互参与——让读者做一些事情,如报名获取定期发送的通讯,并用某种方式报答他们的参与,如每周抽奖或给予下载一些东西的机会。

2、对访问者来说最具价值的站点是那些立刻就能让人明白哪些信息可以获取,怎样获取,以及可能还有怎样让读者来更正他自己认为有错误的地方或加上他自己的内容。

3、签上自己的名字,并展示得到的荣誉——但不要在这里弄上一个长长的签名。少许的自我宣传可能是中肯的,尤其是当你想让自己的网页具有个人特色时,但这可能会带来困窘和妨碍实质内容。你所要作的只是连接到关于作者的那一页,该页也是弃权、版权声明及类似说明的合适地方。

4、不要包括一些一般化的Web参考信息和人人都有的已不再是热点的连接。连接到Alta Vista和Yahoo可能就已足够了,否则你的外部连接应该是具有特殊意义和读者还没有遇到过的地方。

5、要是有以评论或读者意见的形式取得的肯定性的反馈,可考虑把它包括在主页之内——也许在开头的某个地方,或者作为到荣誉页的一个连接。如果做得恰到好处,可以鼓励新的访问者并使他们放心。相反,要是做得不合适,就会被认为是自我吹嘘,而真正的内容反而处于次要地位。

6、忘掉已学会的在纸上写作的大多数习惯。基于文字、面向纸张的写作所面临的任务是精心安排的叙述,在提供知识、愉悦心情或说服别人的过程当中要能保持读者的兴趣;但是文字并不是大多数Web版面的主要组成部分——即便是页面上的文字比其他元素多,也常常是其他组成部分(图像、超媒体连接)被认为比单纯的文字更重要。

7、结构至关重要。网页可能会看起来是二维的,但不应如此理解。印刷页面的原有结构在Web已不复存在;写作者得着重于文件以可见的方式表现出来的结构,因为它可能已具有更微妙的交流功能。

8、Web的读者不会去读每一个词,他们的阅读方式更近似于快速阅读而不是象读呆板的树式文件那样的逐行阅读。通过计算机屏幕阅读并不是件格外舒服的事情,因此读者希望最好能尽快得到结果。

9、在Web页面创作中读者实际上是一个配合者。除了要注意在任何类型的写作中都要考虑的词汇、语调和其他事项外,网页作者还要意识和具体考虑到读者的身体运动——按鼠标键、滚动页面、写作邮件——也是交流过程的一部分。

二、页面设计

10、有了一个HTML编辑器和几兆服务器空间并不能说马上就可以设计网页了。在开始编写文字、寻找图像和进行HTML标记之前应该先把基本的网页结构组织号。如果没什么要说的,就什么也不要说。要是开始的时候在脑子里没有一个相当明确的结构,那几乎肯定会以一团糟而告终。开始时谨慎一些,然后不停地学习,不停地改进。卸载一些你喜欢的页面,核对HTML源文件,看它是怎样写的,把它全部或部分粘贴到一个试验文件进行检验。整页地拷贝别人的东西是剽窃行为,但是向别人学习则是研究过程。

11、人们第一次进入你的主页时,他们通常不是在寻找值得阅读的地方,他们可能正在寻找可供选择的东西,以超文本术语说即是可用鼠标点取的词句、图像、按钮等等,接下来是阅读文字,选定一个可选项,按鼠标键,下页出现后又重复此过程。这里的技巧是确定阅读时按键的适当比率。提供的可选项要是太少,访问者会觉得没意思,要是太多又会吓倒别人。

12、要是页面包含的内容信息量大,在开始设计页面之前就要先确定好读者对象。对新手或新的访问者来说用一种固定的文件结构并在开始的时候给予说明是有意义的。例如,关于内容的说明表格或某种类似结构。如果你要满足知识或经验不在同一个层次的读者,提供限制性的线索可以让某些读者跳过基本内容直达目标。提供连接时要考虑到各个层次的读者。

13、不要让读者不知所措。不必非要用声音和图像充斥网页,也不要把文件做得太长以至于在装载文件时让读者等得脚后跟发凉,因此使用图像时要谨慎:大的图像显然会降低页面建立的速度,但许多需要顺序装载的小图像也会如此。


三、布局

14、别轻易让文字居中和使用粗体或斜体字符。除了视感混乱之外,很多流览器不能很好地显示斜体字,也不能补偿由于字母倾斜引起的空白变化。

15、利用短的段落,加点列示,适当的整块引用文字,用水平线分节,用影象地图指引主要连接,使你的页面能吸引人和容易阅读。

16、不要在每一页使用风格不同的图标。

17、不必在以页面上填满图像来增加视觉趣味。尽量使用彩色圆点——它们较小并能为列表项增加色彩活力(并能用于彩色列表)。彩色分隔条也能在不扰乱带宽的情况下增强图形感。

18、对用作背景的GIF要谨慎。它们可以使一个页面看起来很有趣,甚至很专业,但是装饰背景很容易使文字变得不可辨读。要把背景做得好,光有颜色对比是不够的。背景要么很亮(文字较暗)要么很暗(文字较亮)。如果背景含有图像,对比度要较低才不至于过于分散读者的注意力。

19、在 IMG 行加 ALT 标记。假设标题图像显示为 The Offal Eaters' HomePage,你可以在括号内加上一个 ALT 标记,ALT="The Offal Eaters' HomePage",直接把它加在 IMG SRC=Offal.com.uk/images/gif/home-top.gif之后。这样就会让使用基于文本的流览器的读者除了看到 [IMAGE] 以外还能看到别的一些东西,使用图形流览器的读者在图像未能成功载入之时也会看到一些东西,而你也能让自己的HTML文件相当整洁。

20、也可以在分隔条上使用ALT标记,这样就使得使用基于文本的流览器的读者能看到一些更有趣的东西,而不只是一条直线。

21、不要把重要的内容放到页尾——有些读者可能不会往下看那么远。

22、不要让什么东西看起来象是一个按钮却不起按钮的作用。

四、HTML格式

23、应避免使用交叉标记。不同的浏览器对交叉标记的反映会不同。

24、使用交织 GIF 和 Jpeg 。因为交织图像是分级显示出来的——首先以很低的分辨率显示,然后逐步提高分辨率,直至最后达到正常显示——这种方式有时候会使较大的图像看起来好象装载得快一些(实际上并非如此,但这是一种有益的错觉)。这样也便于读者在图像装载的过程中看到它的模样,如果他们不喜欢或不想看的话就有机会中断传输或转向别的地方。

25、另一种增加可得带宽的巧妙方法是在HTML底稿中使用 Lowsrc 命令。比如说有一张400×600像素的1600万色扫描图,所占空间约为35K。使用 Paint Shop Pro 这一类的工具对原图重新取样,比如说高度为100像素(也许为了达到你自己的要求你得进行调整才能找到最合适的大小,但可以从高度除以4开始),Paint Shop Pro 会自动计算新画面的宽度。保存新画面,它的大小现在应为6K或更小。然后在HTML文件中可以这样写上: <img src="bigpic.jpg" lowsrc="smallpic.jpg" width="600" height="400"> Lowsrc命令指示浏览器在真正的画面载入以前先装载低分辨率的图像,这样就让读者清楚将会出现什么样的画面。(为确保浏览器能即时以合适的大小显示图像,高度和宽度很重要)。

26、当然,可以用 Lowsrc 提取你想要的任何图像。一条双色的“请等待下传”的信息可能只占几百字节,同时由于图像是存在浏览器的缓存区,因此可用“请等待”信息代替所有画面。当图像平静地消失于背景之中的时候,读者可以悠闲地浏览你的网页。

27、可以在一个 HTML 元素内嵌入一个连接,如:
<H1><A HREF="Destina-tion.html">Myheading</A></H1>
但不能反其道而行之,把一个标题或其他HTML元素嵌入一个连接。下面这样的结构是正式的 HTML 规定禁止的,并可能在大多数最新的浏览器下不见效果:
<A HREF="Destination.html"><H1>Myheading</H1></A>


五、长文件

28、当页面为单个长文件时要小心。它的传输时间明显要比较短的页面的传输时间长,即使通信速率为 28.8Kbps 的读者也可能会失去耐心。阅读大的文件时页面滚动也很困难。大的文件和较慢的装载速度可能会使人沮丧,再也不会返回到你的网点。

29、如果你觉得文件大小很重要,不便改变,就要考虑读者将会怎样使用网页。努力确保读者浏览长文件时浏览器滚动条小的移动不会在页面上产生大的跳跃。作为一条经验规则,按一次滚动条页面移动的范围要少于一页,这样就还看得见上一个窗口的部分内容。任何比这更大的移动都会让人迷失方向。

30、要不然就把一个长文件分成几个子文件,在主页给予连接。不过要记住子页可能会成为死页——有时候命中率要低于10%。做得聪明一点,给读者一个很好的理由装入子页或给他们一个很好的理由浏览它。

31、如果页面很多,在主页给出一个内容列表或目录显然是个好办法。不要非得作成那种常规的、令人厌烦的、死板的树形布局,把它做得有趣一些,让读者有理由进入连接,帮助他们了解他们可能看不出来的内容。

32、要是你必须把所有的内容都放在一个文件里面,使用一个内容列表,从表的项目可直接跳到各部分的开头。或者做得更好,提供一个独立的文本文件用于下传——去掉所有的格式符——使下传的时间减到最少。

六、连接

33、通常的顺序文本写作与在线文件写作之间的一个主要区别是在线文件的读者可能在文件的任何一点进入该文件。尽管你已做了一个漂亮的首页作为入口,其他人可能会对你的杰作内的具体指针或子页给出连接。向这些新的访问者提供一些关于他们在什么地方以及为什么在这里的线索是有意义的。

34、从头至尾都要使用导航图标,尤其是要用“返回到首页”连接。可以在每部分都做这样做。比如在每页的顶端(或底部)都有一小串图标,第一个回到首页,第二个回到章,第三个回到节。

35、在页面上应该有一些连接帮助访问者来回跳转。总是以相同的格式把这些连接放到所有页面上,这样读者就总能知道到哪儿去找到它们以及怎样使用它们。

36、一般来说应该使用相对连接,因为:(1) 这样容易把一组文件移到另一个地方(相对路径名仍然有效),(2) 输入量较少。在同一页的连接项当然应该使用相对地址,因为使用绝对地址后可能会每选择一个连接都要把该页重新装载一次。

37、连接到不直接相关的文件时使用绝对路径。这样以后要是把源文件移到另外的目录下就不需更改连接了。

38、确保可选择的连接清楚直观——用标题或明显相关的图像来表明它有什么内容。特别要避免“请按这里”,任何要“按这里”的人都会慎重考虑,它是不是正好就在“这里”,并且连接无误。不要让连接的名称与连接的 URL 相同,这样会使读者要作的工作增加。

39、Mail to 连接中应把 e-mail 地址作为连接名称。例如,可能有一个人名和一个 e-mail 地址,人名连接到他的主页,e-mail 地址连接到 mailto。新闻组连接应当直接用组名。

40、核对 href ,不要在页内出现任何没有出路的连接,也不要让连接落掉。


七、通则

41、实际上,网页要么处于建设之中要么就是死的——如果你不更新它,并且它不是纯粹的历史资料,它马上就会变旧。“最后一次更新”记录是一个好办法。且不说别的,如果你的页面变化太少,你很快就会在读者评论中得到讽刺意见。

42、鼓励读者通过填表或发邮件反馈意见。但要准备处理随之而来的事务——要尽快地回E-mail,增加连接,修改输入错误等等。给通过 E-mail 进行评论的人回感谢信。

43、在页内告诉读者如果他们在自己的主页内设置一个指向你的连接你不会介意,并表明你也同样会设置一个指向他的主页的连接。每个人都希望有人访问自己的网页,而这种相互支持会鼓励对见解类似的网点的访问。

44、联机时间是昂贵的,而访问者的注意时间之短是众所周知的。想办法告诉读者下传要用的时间——告诉他们要出现的图像的大小或下传一个文本文件或二进制文件要用多久的时间。为把联机时间减到最少,指出你会给出FTP地点或提供到其他页的连接,读者会欣赏你的这种做法。

45、利用 Digital 的优秀检索工具 Alta Vista 找出谁已建立了指向你的Web的连接。在高级检索方式下,输入:
link:http://my.site.com/ANDNOTurl:http://my.site.com/
在简单查询中也可同样做到,输入:
+link:http://my.site.com/-url:http://my.site.com/

46、Web上的大多数写作都相当糟糕。由于多数网页都是空话连篇,自我吹嘘,编写粗糙,编辑审核也不存在,好的写作就很突出了。

47、不要忘记为你的主页加一个描述性的标题,当某个人把它保存在自己的热点目录后能知道这里是什么内容。

八、设备独立

48、HTML不包括文件显示时用到的字体、段落形式及空白信息。这正是它的意义所在,无论在什么平台上,包括文字终端,你的文件都能成功地显示出来。由此产生出最低命令标准。因此要了解不同的浏览器用不同的空白和字体。

49、假设你的页面要用某个特定的浏览器阅读时要当心。要是没有鼠标器,让别人“按这里”是不会有效的,如果你的读者使用 Internet Explorer 或Spry Mosaic,Netscape2.0 的插件就不会有效,除非你能保证读者有 Netscape 或 Internet Explorer 兼容的浏览器,否则重新调整过的图像可能会以预想不到的大小显示出来,表格也会很难看(或根本看不见)。在少数浏览器上,你根本不能看Jpeg图像。

50、不会有很多读者不能处理16位的图像,但是要注意,如果用16位(64K色)或24位(1670万色)的调色板制作精巧的背景,你可能会发现使用较老的设备的人只能跳过去。用8位图看彩色背景时会降为可怕的图形。带视卡但 RAM 少于 2M 的 PC 是不能观看图像的。
gototop
 

FrontPage 2000 技巧三则
  一、给图形增加一个缩略图  
  如果网络速度比较慢,可以给图片增加一个缩略图,快速地显示图片的概图。缩略图是指把原图像按比例缩小,作为原图的预览,即当访问者点击一个到图片的链接后,在图片下载的过程中,网页上首先出现图片的略图,直至原图全部出现。
  在FrontPage中插入图片,然后单击鼠标右键,选“图片属性”。选择“常规”选项卡,单击“替代表示”栏中的“浏览”按钮,找到刚才所制作的缩略图,也可以在“文本”栏中填入相应的说明文字。击“确定”按钮,完成此操作。
  二、如何禁用JavaScript
  从动画到应用程序,站点内的各种对象都可以使用 JavaScript。但有些浏览器并不支持 JavaScript,所以有时访问者在查看包含Javacritp的网页时可能无法正确显示,或者会包含错误。
  我们在用FrontPage制作网页时,可以将站点设置为与特定的浏览器兼容或是与某种技术兼容。比如我们可以禁止 JavaScript,或将我们所制作的站点设置为与不支持 JavaScript 的浏览器兼容,甚至将FrontPage 菜单上有关插入或使用 JavaScript 的命令设置无效 (菜单会变成灰色) 。
  设置方法:
  单击“工具”菜单,选择“网页选项” 然后单击 “兼容性” 选项卡。 要禁止JavaScript,就取消“JavaScript”复选框,单击“确定”,设置就完成了。
  同样,您还可以启用或禁用ActiveX控件、动态HTML,或者CSS等。
  三、怎样插入竖直线
  我们都知道用<hr> 可以插入一条水平线,但如何插入一条竖直线呢?
  我们既可以利用插入表格的方法,也可以利用 <hr> 的方法。
  先看看用 <hr> 方法插入竖直线。建立一个表格,然后在某一单元格内插入一条水平线,然后将此线选中,单击鼠标右键,选择“水平线属性”命令,将其宽度设为1个像素,高度为100像素,一条高为100像素的垂直线就出来了。
  如果想要更长的线,只将高度设大是没用的,不信你试试,设置高度为200,但在 浏览器中只能看到100像素高。这是因为HTML只承认100像素高的水平线。这时你可以加回车键,然后再画一条同样的水平线,或者在竖直方向上的两个单元格内都加一条同样的水平线。我们还可以改变线的颜色,以达到不同的效果。
  第二个办法也很简单,就是在一个表格中,单击鼠标右键,选“表格属性”,设置表格的单元格边距和间距均为0。
  再单击鼠标右键,选“单元格属性”,设置某一单元格的指定宽度为1个像素,高度为100个像素,并设置合适的背景色。

网页设计:一种细腻的导航效果的制作方法


一般的导航效果大家都很熟悉了,例如用CSS给导航文本设置上、下划线、背景颜色或位移等。前面的帖子中有网友提到http://www.tonta.com.cn/这个网站,偶发现其首页中的导航效果不错,虽然flash做的没有很眩的效果,但是比较细腻,看上去很舒服。
  闲来无事,尝试在dw中实现同样的导航效果。效果如下所示:http://vip.5d.cn/flood/daohang/1.htm
  首先分析效果的组成,鼠标经过时背景发生变化,小图象转动。Ok!考虑使用dw中的swap image(翻转图)+背景图象变化(CSS定义)应该可以实现效果。
  准备4张gif图象分别为:
  鼠标经过时的背景图象(在fw中使用animate可以很简单的实现渐变效果,本图象透明度由0%渐变到100%)

鼠标划出时的背景图象(本图象透明度由100%渐变到0%)

动态小图象

静止小图象(在fw中设置图象格式为gif后保存即可)


  1.背景效果实现
  使用CSS定义两个类:

.style1 { background-image: url(bg.gif)}
.style2 { background-image: url(b.gif)}

  分别用于鼠标经过和划出时的背景图象
  然后在单元格中添加如下代码:

onmouseover="this.className='style1'"
onmouseout="this.className='style2'"

  就可以实现鼠标经过时背景渐变出现,移开后背景渐变消失的效果。
  2.翻转图效果实现
  在单元格中插入静止小图象,使用行为添加swap image效果,设置鼠标经过后翻转为动态小图象。
  为更贴近效果,需要把翻转图效果应用到单元格上,在静止小图象代码中剪切如下代码:

onMouseOver="MM_swapImage('Image2','','2.GIF',1)"
onMouseOut="MM_swapImgRestore()"

  粘贴到单元格代码td标签中。
  就可以实现鼠标经过单元格时图象翻转,产生动态的效果。
  至此即可实现全部的效果。
  在这个例子中,使用dw实现的效果几乎可以与flash制作的效果媲美,甚至更好一点(我们实现了鼠标划出单元格时背景渐变消失的效果)。
  小节:
  1.在fw中精心制作渐变的背景图象(我只是随便做了两个渐变图象)+对导航单元格修饰可以使效果更加细腻,出色;
  2.在使用该方法制作导航效果时,需要使用到多个单元格,注意swap效果不能被拷贝,拷贝代码后需要修改两处代码:

onMouseOver="MM_swapImage('Image3','','2.GIF',1)"
<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3">

  修改翻转图的name为不同的值即可。
  3.这个例子的技术含量并不是很高;而且偶不是很熟悉flash,不知道制作起来用dw或flash哪种更简单一些,这里提出来只是给大家提供一种解决问题的方法。
  4.两个简单效果的叠加就可以制作出比较酷的效果,希望对大家能有所启示
补充一点:制作动画背景图象时,为实现效果,需要设置gif动画的循环为no looping(不循环)
gototop
 

十六则Dreamweaver使用快技法

1、灵活运用样式

熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用Style。

2、活用Format Table命令

    在复杂的网页设计中,表格的应用是最多的,因为利用表格可以自由地控制文本和图象在网页上出现的具体位置,从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后,我们可以使用其中的“Format Table”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式,先将光标置于表格的任意一个单元格内,再选择“Command”→“Format Table”命令, 在随后出现的对话框中,从左边的列表中选择一个设计方案。按“Apply” 键来查看效果,如果不满意的话,还可以重新设置或者修改部分参数的值,如边界粗细,背景颜色等等。

3、同时链接到两个网页

    我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档,可以使用“Go To URL”JavaScript 行为。打开一个有框架的网页,选择文字或图象,然后从行为面板中选择“Go To URL”。我们会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。

4、不给文件起中文名称

    大家在制作好了网页后,通常会给网页起一个具有代表性的中文名称,一来能使人一看文件名就能大概了解文件所包含的内容,二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做,就会发现Dreamweaver对中文文件名支持得不是太好,经常会有页面调用不正确的现象发生,所以我们以后在Dreamweaver中保存网页的时候,尽量用英文或者数字作为文件名称,这样就可以避免上面的出错现象。

5、巧妙设置字体分辨率

    我们在制作网页的时候,经常有这种体会,那就是制作好的网页在本地计算机上浏览时很正常,但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了,这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示,在 Dreamweaver中得到了较好的解决。在文档窗口的右下角,Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字,在弹出式菜单中可以为当前的页面指定显示分辨率,通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。

6、巧妙隐藏标签

    如果在网页中插入了不可见的元素时,Dreamweaver会自动在页面上添加一个与之相应的元素标签,以便于我们选择不可见元素。但这并不全是件好事,比如我们在一个有很多层的页面中的第一行便插入一个表格,就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行,虽然在浏览时并不影响效果,但这确确实实会阻碍我们的工作。所以当我们觉得某个元素标签碍手碍脚时,就索性将之屏蔽掉。方法是按Ctrl+U打开Preferences面板,在Category中选中Invisibel Elements,在面板的右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉,以后它就保证不会再出现了。

7、善用拖放技巧

    我们在使用Dreamweaver编辑网页的时候,经常需要插入一些图象什么的,假设要插入的图象很多,按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把Dreamweaver的操作窗口变成活动窗口,以腾出空间来显示Explorer窗口,找到要插入的图象文件后,把它们一一用鼠标拖动到网页的适当部位,Dreamweaver将自动把这些图象的url添加到文件的HTML代码中,当然这里要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在网页中的图象也是一样,直接拖过来就可以了。但如果被拖动的图象上有超级链接,就不可以再使用拖动技术了,因为那时拖过来的仅仅是超级链接地址。

8、自动设置更新时间

    我们知道一个网页要想获得更多的回头率,一个很重要的一条就是要不断更新。但对于我们这些个人网页来说,要天天及时更新恐怕不是很容易的事情。因此,我们希望网页能自动更新,下面笔者就提供一个能自动更新修改时间的源代码,我们只要把这段源代码添加到…< /BODY>之间就能实现更新时间的目的了:
< Script Language="JavaScript"> < /style>;二是用鼠标依次单击Dreamweaver中的Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag,并从中选择a,然后在decoration中选中none,最后单击确定就成功了。

12、巧妙复制文字

    在几个不同的应用程序中间相互复制文字,是我们在实际工作中可能要常做的事情。但是,如果我们从Dreamweaver中复制编辑区中的文字到另外一个应用程序的时候,HTML代码和文字将一起被复制过去了,那么我们该如何才能只把编辑区中的文字复制下来呢?我们知道,通常复制时都用快捷键 Ctrl - C 来操作,如果我们在复制的时候多按一个C键,那么Dreamweaver将只会复制选中的文字了。

13、善用快捷键

    为了提高操作的效率,我们可以在Dreamweaver中使用快捷键,例如使用Ctrl-B或Ctrl-I来为文字应用黑体或斜体格式,也可以使用以下一些键盘快捷键来为选中的文本应用HTML格式:Ctrl-0: 无格式   Ctrl-T: 段落   Ctrl-1: 标题 1  Ctrl-2: 标题 2 Ctrl-3: 标题 3   Ctrl-4: 标题 4   Ctrl-5: 标题 5   Ctrl-6: 标题 6

14、自动关闭网页

    如果我们希望自己的网页在指定的时间内能自动关闭,不妨在网页源代码中的标签后面加入如下代码: < script LANGUAGE="JavaScript"> < /script>其中代码中的3000表示3秒钟,它是以毫秒为单位的。

15、巧妙设置对象名称

    我们在用Dreamweaver来制作非常复杂的效果时,有可能需要经常重复地使用某一个或者多个对象,例如我们经常需要定位某个特定的表格、图象等,如果我们没有给某一个网页中的多个对象取名的话,那么在重复应用这些对象的时候,可能很麻烦或者容易出错。为了能够方便调用这些对象,我们应该在每创建一个新的对象时,都记得给它取一个有代表性而且比较容易记忆的名称。在给这些对象命名时,我们可以通过对象的“属性”面板来操作就行了。

16、为图象链接增加动态效果

    有时我们为了要达到一种逼真的效果,希望鼠标移动到某个链接上时能有动感产生。使用Dreamweaver可以很容易实现这种效果。设计时,我们首先需要准备两幅图象,第一幅是原始图象,第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图,在属性面板中的链接栏中填上要链接的文件,然后单击键盘上的F8键,在弹出的Behaviors窗口中单击“+”号,随后选择“swap image”,在接着出现的窗口中选择第二幅图象,最后单击确定就可以了。
gototop
 

网页背景设计全攻略

  网页中的背景设计是相当重要的,尤其是对于个人主页来说,一个主页的背景就相当于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接受程度,还能影响访问者对整个网站的印象。如果你经常注意别人的网站,你应该会发现在不同的网站上,甚至同一个网站的不同页面上,都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景,还有它们的设计方法都是怎样的呢,现在就由我来为大家作一个比较完整的总结。

  1.颜色背景

  颜色背景的设计是最为简单的,但同时也是最为常用和最为重要的,因为相对于图片背景来说,它有无与伦比的显示速度上的优势。在网页文件中,一般通过<body>标签来指定页面的颜色背景,其HTML语法为:

  <body bgcolor="color">

  其中的"color"表示不同的颜色,可以用各种不同的颜色表示方法,比较常用的有直接用颜色的英文名称,如blue、yellow、black等等,还可以用颜色的十六进制表示方法,如#0000FF、#FFFF00、#000000等等,此外还可以用百分比值法和整数法,其效果都是一样的。

  颜色背景虽然比较简单,但也有不少地方需要注意,如要根据不同的页面内容设计背景颜色的冷暖状态,要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。

  2.沙纹背景

  沙纹背景其实属于图片背景的范畴,它的主要特点是整个页面的背景可以看作是局部背景的反复重排,在这类背景中以沙纹状的背景是为常见,所以我们将其统称为沙纹背景。

  初学主页制作者都有这样的经历,当试图把自己的照片作为页面的背景是,却发现浏览器上显示出来的不仅仅是一个照片,而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法,利用这一规律我们可以用一小块图片作为页面背景,让它自动在页面上重复排列,铺满整个页面,从而使网页的体积大大减小。

  读者到现在恐怕都已经知道了沙纹背景的原理和实现方法,就是找一个小的图片,越小越好,但注意要使最后的背景看起来要像一个整体,而不是若干图片的堆砌。其实现的HTML语法如下:

  <body background="picture">

  其中的"picture"表示背景图片的URL路径。

  3.条状背景

  条状背景与沙纹背景是比较相似的,它适用于页面背景在水平或竖直方向上看是重复排列的,而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列,与沙纹背景所不同的是它只让图片在一个方向上重复排列。

  以在竖直方向上排列为例,首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片,其长度与页面的宽度相当。也通过
  <body background="picture">

  将其设为页面背景,经浏览器显示后,就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然,也可以用类似的方法实现条状背景在水平方向上的重复排列。

  4.照片背景

  把自己或朋友的照片作为页面的背景让大家看到,是有点令人激动的事情,但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢?只有想不到的,没有做不到的,这里我们用上一点简单的CSS。在网页文件的<head>……</head>之间加入下面的CSS语句:

  <style type="text/css"><!--body{background-image:url(myphoto.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:50% 50%}--></style>

  这样,在网页页面中,就可以看到你的照片位于页面的正中间,而且在拉动浏览器窗口的滚动条时,照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意,你也可以随意地调整它在页面中的位置,只需要调整"background-position"的值就可以了。

  5.复合背景

  如果你在练习上面的“照片背景”时“不小心”也设置了<body>标签里的颜色背景,那么你看到了什么?颜色背景还起作用吗?对,你能看到你的照片浮于你设的颜色背景之上,二者能够同时正常地显示出来。这就是复合背景的魅力,更为吸引人的是,当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候,浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法,就不用我再多说了吧!

  6.局部背景

  前面我们所说的背景都是整个页面的背景,能不能在页面上为某个局部的内容设置属于它自己的背景呢?回答是肯定的。
  最为常见的是在表格的设计当中,我们可以为表格设置一个不同于页面的背景,甚至在不同的表格单元中,我们也可以设置各个表格单元自己的背景。请看下面这个表格例子:

<table border="1" width="240" height="101" bgcolor="#C0C0C0">
    <tr>
      <td width="80" height="46" bgcolor="#00FFFF"></td>
      <td width="80" height="46"></td><td width="80" height="46" bgcolor="#00FF00"></td>
    </tr>
    <tr>
      <td width="80" height="47" bgcolor="#FFFF00"></td>
      <td width="80" height="47" bgcolor="#FF0000"></td>
      <td width="80" height="47" bgcolor="#FF00FF"></td>
    </tr>
</table>

  在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。
  除此之外,我们还可以单独为某个文字段落设置背景,甚至为这个文字段落中的某几个文字设置自己的背景,是不是有点相当不错,这也需要用上一些CSS。请先看一下下面的这个例子:
  <HTML><HEAD><TITLE>不仅仅是页面的背景</TITLE><STYLE TYPE="text/css"><!--BODY{BACKGROUND:#FFFFDD;COLOR:red}div{BACKGROUND:red;COLOR:white}--></STYLE></HEAD><BODY><P STYLE="BACKGROUND:black url(../images/bg.jpg);COLOR:black}">
  记得毛主席有这么一首诗:"<div>坐地日行八万里,巡于遥看一千河。</div>"伟人就是了不起,……几万里就出去了。</P></BODY></HTML>
  在浏览器中的显示效果如图所示,现在是不是有点兴奋了,啊,原来文段也可以有自己的背景。只要你愿意,你就可以为页面的任何一个部分定义自己的背景,从而把页面打扮得更加漂亮和吸引人。
  说到这,关于网页背景设计的问题也就说得大概也就差不多了,但新的网页制作技术也在不断涌现,说不定今天你看了这篇文章,明天就觉得它太过时了。笔者写这篇文章,目的是引起广大网页制作者对背景设计的注意,毕竟,背景对网页来说实在是太重要了,当然,网站还是要以内容为第一的。
gototop
 

网页设计的艺术处理原则


    主页的设计主要是网页设计软件的操作与技术应用的问题。但是,要使主页设计、制作得漂亮,必然离不开对主页进行艺术的加工和处理,这就要涉及到美术的一些基本常识。本文将介绍一些主页设计中经常涉及到的艺术处理原则,供各位在进行主页制作的时候参考。

一、风格定位

  主页的美化首先要考虑风格的定位。任何主页都要根据主题的内容决定其风格与形式,因为只有形式与内容的完美统一,才能达到理想的宣传效果。目前主页的应用范围日益扩大,几乎包括了所有的行业,林林总总,包罗万象,但归纳起来大体有这么几个大类:新闻机构、政府机关、科教文化、娱乐艺术、电子商务、网络中心等。对于不同性质的行业,应体现出不同的主页风格,就像穿着打扮,应依不同的性别以及年龄层次而异一样。例如:政府部门的主页风格一般应比较庄重,而娱乐行业则可以活泼生动一些;文化教育部门的主页风格应该高雅大方,而商务主页则可以贴近民俗,使大众喜闻乐见。

  主页风格的形成主要依赖于主页的版式设计,依赖于页面的色调处理,还有图片与文字的组合形式等。这些问题看似简单,但往往需要主页的设计和制作者具有一定的美术素质和修养。

  还有,动画效果也不宜在主页设计中滥用,特别是一些内容比较严肃的主页。主页毕竟主要依靠文字和图片来传播信息,它不是动画片,更不是电视或电影。至于在主页中适当链接一些影视作品,那是另外一回事。

二、版面编排
  
  主页的设计首先涉及到的是页面的版面编排问题。“版面编排”实际上就是中国古代画论中的“经营位置”。主页作为一种版面,既有文字,又有图片。文字有大有小,还有标题和正文之分;图片也有大小,而且有横有竖之别。图片和文字都需要同时展示给观众,总不能简单地罗列在一个页面上,这样往往会搞得杂乱无章。因此必须根据内容的需要,将这些图片和文字按照一定的次序进行合理的编排和布局,使它们组成一个有机的整体,展现给广大的观众。可以依据如下几条来做:

  1.主次分明,中心突出。在一个页面上,必然考虑视觉的中心,这个中心一般在屏幕的中央,或者在中间偏上的部位。因此,一些重要的文章和图片一般可以安排在这个部位,在视觉中心以外的地方就可以安排那些稍微次要的内容,这样在页面上就突出了重点,做到了主次有别。

  2.大小搭配,相互呼应。较长的文章或标题,不要编排在一起,要有一定的距离,同样,较短的文章,也不能编排在一起。对待图片的安排也是这样,要互相错开,造成大小之间有一定的间隔,这样可以使页面错落有致,避免重心的偏离。

  3.图文并茂,相得益彰。文字和图片具有一种相互补充的视觉关系,页面上文字太多,就显得沉闷,缺乏生气。页面上图片太多,缺少文字,必然就会减少页面的信息容量。因此,最理想的效果是文字与图片的密切配合,互为衬托,既能活跃页面,又使主页有丰富的内容。

三、线条和形状  

  文字、标题、图片等的组合,会在页面上形成各种各样的线条和形状。这些线条与形状的组合,构成了主页的总体艺术效果。必须注意艺术地搭配好这些线条和形状,才能增强页面的艺术魅力。

  1.直线(矩形)的应用。直线条的艺术效果是流畅、挺拔、规矩、整齐,所谓有轮有廓。直线和矩形在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的主页题材。

  2.曲线(弧形)的应用。曲线的效果是流动、活跃,具有动感。曲线和弧形在页面上的重复组合可以呈现流畅、轻快,富有活力的视觉效果。一般应用于青春、活泼的主页题材。

  3.曲、直线(矩形、弧形)的综合应用。把以上两种线条和形状结合起来运用,可以大大丰富主页的表现力,使页面呈现更加丰富多彩的艺术效果。这种形式的主页,适应的范围更大,各种主题的主页都可以应用。但是,在页面的编排处理上,难度也会相应大一些,处理得不好会产生凌乱的效果。最简单的途径是,在一个页面上以一种线条(形状)为主,只在局部的范围内适当用一些其它线条(形状)。

四、色彩处理  

  色彩是人的视觉最敏感的东西。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是“总体协调,局部对比”,也就是:主页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上,可以根据主页内容的需要,分别采用不同的主色调。因为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色,例如:军警的橄榄绿,医疗卫生的白色等。色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。另外,色彩还有民族性,各个民族由于环境、文化、传统等因素的影响,对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性,可以使我们的主页具有深刻的艺术内涵,从而提升主页的文化品位。下面介绍几种常用的配色方案:

  1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用,可使主页呈现温馨、和煦、热情的氛围。

  2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用,可使主页呈现宁静、清凉、高雅的氛围。

  3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如:红与绿、黄与紫、橙与蓝等。这种色彩的搭配,可以产生强烈的视觉效果,给人亮丽、鲜艳、喜庆的感觉。当然,对比色调如果用得不好,会适得其反,产生俗气、刺眼的不良效果。这就要把握“大调和,小对比”这一个重要原则,即总体的色调应该是统一和谐的,局部的地方可以有一些小的强烈对比。

  最后,还要考虑主页底色(背景色)的深、浅,这里借用摄影中的一个术语,就是“高调”和“低调”。底色浅的称为高调;底色深的称为低调。底色深,文字的颜色就要浅,以深色的背景衬托浅色的内容(文字或图片);反之,底色淡的,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。这种深浅的变化在色彩学中称为“明度变化”。有些主页,底色是黑的,但文字也选用了较深的色彩,由于色彩的明度比较接近,读者在阅览时,眼睛就会感觉很吃力,影响了阅读效果。当然,色彩的明度也不能变化太大,否则屏幕上的亮度反差太强,同样也会使读者的眼睛受不了。
gototop
 

网站配色思考


    曾经费尽心思想替网站设计一套令人眼睛为之一亮的色彩组合吗?或者你一直不解为何银行、公司行号或金融机构的网站总是使用蓝色系?那么你来对地方了。虽然大部分的网站开发人员都很清楚网络所使用的色盘和计算色彩的 16 进位系统,但对色彩学和有效色彩组合背后所隐含的原理依然懵懵懂懂。

  几世纪以来,颜色本身就是一个难解的谜题。举例子来说,苏格拉底就曾经假设说「火」之源起,乃是因眼睛结合了对象本身的「白」(whiteness)所产生的颜色。之后,牛顿更探索光与色彩之间的关系;其后历经许多科学研究,终于在20世纪确认了光波与色彩感应之间的绝对关系。

  如今,色彩调和与色彩调性方面的研究信息,直接影响了艺术家、设计师和广告AE人员。本篇关于色彩理论的指南,旨在探索如何于网站上有效使用色彩,同时也提供了许多色彩调和技巧,让您善用色彩来驾驭网站设计。

  色彩学

  我们能看到颜色是靠三个元素相互作用而成:光源、物体的反射特性、以及人体视网膜和脑部视觉皮质区对光波的处理方式。不管我们使用哪种媒材来作业 -- 绘画、印刷或网络 -- 我们都得依赖上述过程才能有效使用颜色。

  色彩的排列 -- 彩虹

  十七世纪末期,牛顿证明了色彩并非存在于物体本身,而是光作用的结果,且只要将可视光谱上的长短光波结合起来即可形成白光。这些可视光的波长可对应到七个不同的颜色:红、橙、黄、绿、蓝、靛、紫。

  牛顿在实验中所分离出来的可视光谱其实才占了所有电磁光谱的一小部分,整个光谱范围从分为「短频、长波区」(例如收音机调频)到「高频、短波区」(例如 X 光)。可视光谱的区域是介于红外线与紫外线之间,波长约为 400nm (紫色) 到 700nm (红色) 之间。虽然牛顿证明这些光波结合在一起即形成白光,但其实只需要红、绿、蓝三光波就可以产生白光。

  光的吸收与反射

  当光波投射在物体身上后,该物质会传送、吸收或反射不同部分的光波。根据不同物体的特性以及它本身的原子构造,它可能反射了绿光但吸收了其它的波长。这时候人们的视网膜和脑部视觉皮质区会处理此一反射光,然后形成我们所看到的颜色。

  艺术家和设计师将颜色复制到画布或纸张上的时候,他们便是仿真此一过程,利用颜料吸收了某个部分的光波、反射出其它光波。例如要产生绿色,我们可使用会吸收红、蓝光波的颜料即可。此一过程是所有绘画与印刷媒体的色彩模式基础。

  一切靠眼睛

  当然,不论是反射自物体或是发射自光源本身,我们处理光波的能力都是靠视网膜和脑部的视觉皮质区。视网膜内有三个接收器(或者说是锥细胞)可响应某些光波的频率。红色锥细胞能感应低频率的波长,绿色锥细胞反应的是中频率的波长,蓝色锥细胞反应的是高频率的波长。这些锥细胞的运作并非二元性的,而是类似频道一样,可将刺激分别传达至脑部的视觉皮质区,经过处理后才产生出我们所看到的颜色。

  为了产出特定颜色,艺术家/设计师们必须靠着增减光波的方式,让人体内的视觉接收器只反应到某些光波。至于应该用加法或减法原理,则要看你使用何种材质来表现你的作品了。
设计师处理颜色的方法通常有两种:一、加色法,混合不同颜色的光波以形成白光;二、减色法,使用颜料来减少光波。传统的艺术家所使用的色盘和 CMYK 系统都是减色法模式。在网站上,我们所面对的是光的投射,而不是从物体上反射回来的光,所以使用的是加色法模式,我们称它为RGB。

  加色法

  在大自然中,我们所看到的光波是经过物体反射进入我们的视网膜,但产生色彩的方式不仅只这一种。例如,舞台灯光是利用白光穿过有色滤镜来产生不同的色光。计算机屏幕也是使用投射光波的方式,但不同的是它藉由让电子光枪发光投射到含磷的屏幕来产生色光。这些电子光枪可以发出三种颜色:红、绿、蓝。藉由这三种色光,计算机屏幕可制作出完整的光谱。这就是大家所熟知的 RGB 色系。

  在 RGB 系统中,设计师也可以透过混合三原色的方式做出一个光谱。混合任两个原色,就会产生三个次原色:青、洋红、黄。如前面所说的,将光的三原色加在一起就可以做出白光。所以,如果一个 RGB 的值为 255,255,255 则表示为白色。如果完全拿掉这三原色的光 (RGB: 0,0,0) 则产生黑色。

  减色法

  RGB 模式的相反模式就是 CMYK 模式,也就是使用减少光波的方式来产生颜色。由于物体颜色来自于反射的光波,此一系统乃使用三原色来吸收物体的红、绿或蓝光。例如,如果你减少了红光,那么多余的绿色波和蓝色波就会产生青色。用来除去红光、反射绿、蓝光的颜料就会显示青色。相同的,平面印刷设计师会使用洋红来吸收掉一部份的绿光,以及使用黄光来吸收掉一部份的蓝光。

  这样一来,我们很明显的可以知道 CYMK 模式中所使用的三原色就是 RGB 模式中的次颜色,反之亦同。再者,如果将红、绿、蓝光混合在一起形成白光,那么就表示将青、洋红、黄三色的颜料混合在一起就会产生黑色,因为三原色的光波都将被颜料所吸收了。然而受限于颜料和印刷系统的因素,混合青、洋红、黄并无法完全吸收掉所有的光波。因此实际上还必须加上一个黑色才能完成,所以就产生了 CMYK 里面的 K 元素了。

  色彩管理

  由于有这两套不同的复制颜色方式,设计师若必须同时创作数字与印刷影像可就伤脑筋了。除了对应加色法和减色法之间的困难外,RGB 和 CMYK可使用的色彩范围差异也相当大。因此对跨媒体设计师而言,拥有一套可根据输出设备做色系转换的色彩管理系统可减轻不少头痛问题。色彩管理系统可包含在操作系统,某些应用软件之中。


视觉设计最大的挑战之一便是找出有效的调和色彩,让色系既不过于单调,也不过于夸大。想了解色彩平衡之间的关系,可从了解色环开始着手。色环呈现出某一色彩模式中所有可能的色相

  每个色彩模式都包含了一组三原色,然后经由这一组三原色的相互混合而产生不同的颜色。在传统色彩学中,三原色指的是蓝、红、黄;而在 RGB 色彩模式中,色光的三原色是指红、绿、蓝。任何两个色光的组合会产生一组次颜色。三次色则是混合了原色与次色,或者是混合两种次原色所产生。我们用色环来呈现颜色的逻辑性。你可以从下面的图中看出, RGB 的色环和传统艺术家们所使用的色环是很不一样的。

  同色调和:单一颜色,只是深浅、色调和明暗度不同。

  近似色调和:使用邻近的颜色或在色环上很接近的颜色做调和。

  互补色调和:使用色环上两个相对的颜色做调和。这样的颜色组合通常可以提供最大程度的对比感觉,但若过份使用使会流于夸大。

  对比色调和:使用一种颜色,再加上其互补色旁边的两个颜色做调和。对比色调和能提供比互补色调和较柔和的对比。

  三角调和:使用色环上三个等距离颜色。

  双互补调和:使用两组 (共四色) 互补颜色。

  在探索色彩调和的时候,通常最好从纯色下手,然后再尝试不同程度的渲染、色调和明暗度。接着你可使用网站仿真图先行测试某颜色组合的视觉特效。记得,对比的重要性不只是在于为了吸引人而设计;它也可能帮助或妨碍网站的阅读性。




视觉设计最大的挑战之一便是找出有效的调和色彩,让色系既不过于单调,也不过于夸大。想了解色彩平衡之间的关系,可从了解色环开始着手。色环呈现出某一色彩模式中所有可能的色相

  每个色彩模式都包含了一组三原色,然后经由这一组三原色的相互混合而产生不同的颜色。在传统色彩学中,三原色指的是蓝、红、黄;而在 RGB 色彩模式中,色光的三原色是指红、绿、蓝。任何两个色光的组合会产生一组次颜色。三次色则是混合了原色与次色,或者是混合两种次原色所产生。我们用色环来呈现颜色的逻辑性。你可以从下面的图中看出, RGB 的色环和传统艺术家们所使用的色环是很不一样的。

  同色调和:单一颜色,只是深浅、色调和明暗度不同。

  近似色调和:使用邻近的颜色或在色环上很接近的颜色做调和。

  互补色调和:使用色环上两个相对的颜色做调和。这样的颜色组合通常可以提供最大程度的对比感觉,但若过份使用使会流于夸大。

  对比色调和:使用一种颜色,再加上其互补色旁边的两个颜色做调和。对比色调和能提供比互补色调和较柔和的对比。

  三角调和:使用色环上三个等距离颜色。

  双互补调和:使用两组 (共四色) 互补颜色。

  在探索色彩调和的时候,通常最好从纯色下手,然后再尝试不同程度的渲染、色调和明暗度。接着你可使用网站仿真图先行测试某颜色组合的视觉特效。记得,对比的重要性不只是在于为了吸引人而设计;它也可能帮助或妨碍网站的阅读性。
gototop
 

技巧之一:提高使用Request集合的效率 

访问一个ASP集合来提取一个值是费时的、占用计算资源的过程。因为这个操作包含了一系列对相关集合的搜索,这比访问一个局部变量要慢得多。因此,如果打算在页面中多次使用Request集合中的一个值,应该考虑将其存贮为一个局部变量。例如将代码写成下面的形式以加快脚本引擎处理速度:

strTitle=Request.Form("Title")
strFirstName=Request.Form("FirstName") 
strLastName=Request.Form("LastName") 
If Len(strTitle) Then strTitle=strTitle & " " 
If strFirstName="" Then strFullName=strTitle & " " & strLastName 
Elseif Len(strFirstName)=1 Then
strFullName=strTitle & strFirstName & ". " & strLastName
Else
strFullName=strTitle & strFirstName & " " & strLastName 
End If


技巧之二:直接访问适当的集合

如果不是别无选择,否则不要使用strPage=Request("page")的这样的形式来获取参数,因为这将按顺序搜索全部的集合—QueryString、Form、Cookies、ClientCertificate、ServerVarible直到发现第一个匹配值的名称。这样做比直接访问适当的集合效率低,并且是不安全的,除非能绝对保证这个值不会出现在另外一个集合中。
例如,可能希望搜索满足客户请求的WEB服务器名称,这通过出现在每个查询中的Request.ServerVarables集合中寻找“SERVER_NAME”来实现。然而,假如其他的集合也包含名为“SERVER_NAME”的值(键名不区分大小写),当使用Request("server_Name")时,就会得到错误的结果。总而言之,应尽可能直接访问适当的集合。


技巧之三:在费时操作前使用Response.IsClientConnected属性

使用Response.IsClientConnected是观察用户是否仍连到服务器并正在载入ASP创建的网页的有用方式。如果用户断开连接或停止下载,我们就不用再浪费服务器的资源创建网页,因为缓冲区内容将被IIS丢弃。所以,对那些需要大量时间计算或资源使用较多的网页来说,值得在每一阶段都检查游览者是否已离线:

…… Code to create first part of the page
If Response.IsClientConnected Then
Response.Flush
Else
Response.End
End If
…… Code to create next part of page

技巧之四:优化ASP中的ADO操作

通常面言,数据构成了WEB站点的实际内容。所以,优化ADO操作以加速ASP代码执行,十分有用:
a. 仅选择所需的列:当打开ADO记录集时,除非需要获得所有的列,否则不应自动地使用表名(即SELECT *)。使用单独的列意味着将减少发送到服务器或从服务器取出的数据量。即使需要使用全部列,单独地命名每个列也会获得最佳的性能,因为服务器不必再解释这些列的名字。

b. 尽可能的使用存储过程。存储过程是预先编译的程序,含有一个已经准备好的执行计划,所以比SQL语句执行更快。

c. 使用适当的光标和锁定模式。如果所做的全部工作只是从记录集中读取数据,并将其显示在屏幕上,那么就使用缺省的只能前移、只读的记录集。ADO用来维护记录和锁定的细节的工作越少,执行的性能就越高。

d. 使用对象变量。当遍历记录集时一个肯定能提高性能的方法是使用对象变量指向集合中的成员。例如:

While Not RsGc.EOF
Response.Write "工程名称:" & RsGc("GcMC") & "(工程代码:" & RsGc("GcCode") & ")
" 
RsGc.MoveNext
Wend

可以用改写为下面的代码以加快执行:

set GcMc=RsGc("GcMc")
set GcCode=RsGc("GcCode") 
While Not rsGc.EOF Response.Write "工程名称:" & GcMc & "(工程代码:" & GcCode & ")
" RsGc.MoveNext 
Wend

新的代码建立了对象变量的引用,所以可以使用对象变量而不是实际的变量,这意味着脚本引擎的工作减少了,因为在集合中进行索引的次数变少了。


技巧五:不要混用脚本引擎

我们知道,ASP页面中既可以使用VBScript,也可以使用JScript。但是在同一个页面上同时使用JScript和VBScript则是不可取的。因为服务器必须实例化并尝试缓存两个(而不是一个)脚本引擎,这在一定程度上增加了系统负担。因此,从性能上考虑,不应在同一页面中混用多种脚本引擎。
gototop
 

Dreamweaver层使用八定律


    当然,这些并非真正的定律,而只是一些有益的忠告,使你免陷于使用层时可能的困顿中。原来有九条定律的,我们精简掉一条,还有下面的八条:

    1. 如果你要嵌套层,决不要使用多重父层,应共享一个共同的单一父层。如果你必须使用未在样式表中作完全限定的嵌套层,应在 Netscape4x 中做经常的检查。

    2. 总是将文本放在层中的一个表格里 - 表格应该是绝对大小的(以像素为单位,而不是百分比)且不大于层,不过主表中的嵌套表可以设置为相对的百分比大小。这样做可以防止当窗口大小改变时,NC4xx会重新调整文字到不可预期的位置。

    3. 决不放置层在表格中。Netscape 4x 将不能正确地理解表格中的层。

    4. 总是使用 Netscape Resize Fix 这个插件于任何具有层或 CSS 样式的页面。

    5. 不要期望当浏览器窗口大小或屏幕分辨率发生变化后,绝对定位的层仍能保持与居中的表格或页面内容的对齐。有插件可用来动态的实现这个效果。

    6. 不要试图在层中放置滚动条(用 overflow 属性)- 使用一个 DHTML 滚动器或者 Project Seven IFRAME 技术来代替,对于Netscape 4.x用户,可以在IFRAME中设置一个特定的弹出页面。

    7. 决不给层和一幅图像相同的命名 - 每个层应该有自己唯一的并区别于页面中的其它元素的名字(事实上,你不应该让两个具有相同的名称的元素出现在同一个页面中)。

    8. 不要直接对层应用事件/行为。它们将不能跨浏览器地工作。应用它们到层中的内容(链接或图像)而不是层自身。
gototop
 

HTML文件HEAD内部标记浅析

    今天,使用各种所见即所得工具制作主页已经是一件非常容易的事情了。但是了解HTML源代码和语法,无疑对我们制作主页有更大的帮助,也可以使用户能更精确地控制页面的效果。介绍HTML语法的文章已经很多,但是除了TITLE标记外,HEAD里还有其他的几个标记。这些标记虽然不常用,但是需要我们对他们有一定的了解。

  一、META

  META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能,又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法:

  *<META NAME="keywords" CONTENT="yourkeyword">
  <META NAME="description" CONTENT="your homepage's description">
  本页的关键字和描述。在页面里加上这些定义后,一些搜索引擎就能够让读者根据这些关键字查找到你的主页,了解你的主页内容。

  * <META HTTP-EQUIV="refresh" CONTENT="60; URL="new.htm">
  浏览器将在60秒后,自动转向到new.htm。你可以利用这个功能,制作一个封面,在若干时间后,自动带读者来到你的目录页。
  如果URL项没有,浏览器就是刷新本页。这就实现了WWW聊天室定期刷新的特性。

  * <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=GB2312">
  描述本页使用的语言。浏览器根据此项,就可以选择正确的语言编码,而不需要读者自己在浏览器里选择。GB2312是指简体中文,而台湾BIG5内码的主页则是用BIG5。

   * <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  强制性调用网上的最新版本。浏览器为了节约时间,在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时,直接显示硬盘上的文件,而不是网上的。如果你想让读者每次都看到最新的版本,就加上这句话。

  二、LINK

  显示本文档和其他文档之间的连接关系。一个最有用的应用就是外部层叠样式表的定位。格式如下:

  <LINK REL="stylesheet" HREF="style.css">

  REL参数说明两个文档之间的关系,HREF说明目标文档名。

  关于层叠样式表,请参考其他文章。

  三、BASE

  BASE主要有两种用处:

  1、<BASE HREF="原始地址">
  本文档的原始地址。这样,读者下载你的文档之后,也可以知道是从哪里下载的。

  2、<BASE TARGET="目的框架名">
  在一个框架(frame)页中,如果要把某个框架的连接在另外一个框架显示,例如,把menu框架中的连接显示到content框架,就可以在menu框架中的页面加上<BASE TARGET="content">,这样,就没有必要在menu页面的所有连接的<a>标记中添加target属性了,除非这个连接不是在content框架中显示。
gototop
 
12   1  /  2  页   跳转
页面顶部
Powered by Discuz!NT