网页制作的特殊技巧三则

 更新时间:2016年9月20日 19:03  点击:1409
1、转化网页为繁体版

  我想使网页既有简体版又有繁体版的,现在已经做好了简体版的了,请问如何把它们转化为繁体版的?

  答:Dreamweaver中就有转化的功能,选择“Modify→Page Properties”打开页面属
性窗口,在“Document Encoding”中选择“繁体Big5码”即可。但这种方法太麻烦,又不支持批量转化。推荐大家使用ConvertZ这个软件,它是一个用来转换GBK/Big5内码的小工具,支持大量文件批量转化及剪贴簿文字内容的转换等,可以到http://nj.onlinedown.net/soft/4376.htm下载。

  2、如何改变鼠标样式

  有些网页很特别,鼠标不是Windows常规的箭头,而是一些十字形、手形等。请问这个是如何制作的?

  答:在Dreamweaver打开CSS Style浮动窗口,按“+”号新建一个样式,OK后进入“Style Definition for xxx”窗口,选择最后一项“Extensions”,并选择右边“Visual Effect”下面的“Cursor”下拉框中的各个选项,即可实现鼠标的各种效果。

  3、如何制作表格虚线

  有些网页表格不是实线的,而是虚线,表格中好像只有实线的呀,请问如何制作表格虚线?

  答:你可以在表格背景中设置一个1×2的图,半黑半白,这样就可以。还有一个办法就是使用CSS,新建一个Style,选择“Redefine HTML Tag”,在下拉菜单中选择“Table”,在弹出对话框中的“Category”里选择“Border”,将Top、Left、Right、Bottom都设成1px,颜色设成你想要的边框的颜色。然后在“Style”下拉框里选择“Dashed”,点“OK”。这样所有的表格都变成虚线的了。

  随着 Internet的不断发展壮大,Internet 上的网页制作成了一门新兴科学。网页中不可避免地包含着一定数量的图形,因为较多的图像在增加吸引力的同时能给访问者提供更多更直接的信息,同时图像也较少受计算机平台、地域和语种的限制,能使网页更多地显示出制作者的创造力。 

  虽然图像具有上述优势,但是由于图像是在Internet网络上传送,而Internet线路目前的传输速率还不理想,特别是国内大多数用户是通过慢速拨号连入本地的ISP,因此图像的大小在很大程度上影响着网页的下载时间,制作不好的图像文件下载时更会浪费Internet的带宽。

  由此可见我们在制作网页时优化图像的大小是非常关键的,优化后的图像也许仅仅减少了几千个字节,但当页面中不只是一幅图像,或不止一个用户且不止一次地访问该页面时,节省的下载时间和通道带宽将是巨大的。下面我们就浅谈一下制作网页时几种用来优化图形的常用格式。 

  GIF格式 

  GIF(Graphic Interchange Format图形互换格式)是为跨平台消费市场开发的,当时消费者还没有机会使用“高档”的图形卡,大多数计算机的图形颜色比256色还少,所以256色被作为可显示的最高数目。GIF也是Internet上使用最早、应用最广泛的图像格式。GIF格式储存8位/点至l位/点的图像。其原理是减少每点的存储位数以减小图像文件的大小,这就是我们通常所说的减色抖动dithering。准确地说,GIF减少了图像调色板中的色彩数量,从而在存储时达到减小图像文件大小 的目的。该调色板通常并非Windows本身提供的标准凋色板,而是图像优化处理后的调色板。

  现在假定我们制作一幅全色图像(用photoshop的术语就是“RGB模式”),原图为120k的“PSD格式”,准备作成一份GIF的文件之前,必须将它用一个相关的颜色图转换成为一个受限制的8位图像(用photoshop的术语说就是工作于“索引颜色模式”) 

  由表1可看出,保持图像尺寸不变的情况下减少图像中每点的色彩数可以减少图像文件的大小。 
尽管支持的颜色数目较少,GIF格式仍然因拥有一些Web上使用很广泛的特殊效果而留存至今。如:交错效果、透明颜色效果以及GIF89a(动画)效果。 

  交错 

  交错即图像下载时从模糊逐渐到清晰的过程。 

  当你查看一幅本地系统的图像时,通常图像都是一下子就全部显示出来而与用什么方式储存关系不大,但是在Internet网络上就不一样,当通过Internet慢慢地下载一个包括图像的文件,浏览器能边下载边显示收到的内容,此时就可以看到图像文件显示的顺序,GIF默认的存储图像顺序为从上到下、从左到右。当下载到一半时,只显示上半部图像。如果下载得慢而下半部图像是关键部位,则必须等待下半部图像的出现,这对用户来说是相当烦人的。 

  GIF允许图像进行交错处理,此时不再严格地从上到下、一行像素一行像素地显示,而且每隔八行处理一次,然后再填补其间的空隙直到清晰为止。下载过程好比是一幅粗线条的素描变成色彩分明的图像,交错后的GIF文件容量并不变化。这种效果处理主要用于处理一些尺寸比较大的图像。

  GIF89α 

  GIF89α提供的动画实际上由多幅GIF图像组成,浏览器软件以每幅GIF图像定义的时间间隔顺序显示,形成动画效果。 

  我们可以把动画分成以下三种常见的类型 : 

  第一种类型是由多幅内容不相干但具有相同尺寸的GIF图像文件组成的动画文件,在质量允许的情况下,采用上述方法把组成GIF89α动画的每幅GIF文件的色彩数尽可能减少,便可以做到缩小文件。 

  第二种类型,我们仔细观察可以发现大部分动画的第二幅图像只是在第一幅图像的某些区域有一定的变化,因此在第二幅图像中可以只保存不相同区域的内容,这样可以极大地缩小文件。 

  第三种类型是有固定背景的动画,这样只须保存第二幅图像的前景并设背景为透明就可以了。 

  对于第二种和第三种类型我们必须保证组成动画的每幅GIF图像都使用相同的调色板进行减色抖动,同时第二幅图像定位必须准确。 

  如果我们使用一幅200×100(宽×高)点阵作背景,用上面的三种方法分别制作一幅类似于霓虹灯效果的 GIF89a动画交替显示“图像”两个字,我们将会发现三种方法的显示效果完全一样,但用第三种方法优化的文件比用第一种方法优化的小50%(表2)。 

  JPEG格式 

  由Joint Photographic Experts Group提出并因此而得名,是在Internet上被广泛支持的图像格式,JPG支持16M色彩也就是通常所说的24位颜色或真彩色,其典型的压缩比为4:1。

<

  如果你是一个网站的站长,有大量的文章要用同样的版式做成网页文件,你是否觉得用Dreamweaver或者Frongpage一页一页的制作太麻烦呢?下面这款软件可以帮上您的大忙,它可以根据设定好的版式,一次性的自动将大量文本文件转换成一个完整的网页,这样就可以省却自己手工制作的麻烦,有效的提高了效率。

  软件资料

  软件名称:王子网页转换小精灵
  软件版本:V1.1
  软件大小:516KB
  软件性质:免费软件
  支持平台:Win 9X /Win NT / Win 2000 / Win XP
  下载地址:新浪下载中心

王子网页转换小精灵(以下简称“小精灵”)是一款免费的绿色软件,解压缩后就可以使用。运行软件后界面(如图1),左边为要转换的文件列表,右边为功能按钮。


图1

  首先,把要转换的文件放到同一目录下,在主界面的左边设置好要转换文件的路径,选取好要转换的文件,若有多个文件要选取,可以配合Shift或者Ctrl键选取。在转换前,必须先进行转换的相关设置。点击主界面上写字板图标样的按钮,进入设置窗口。

  在设置窗口中提供了多种选项的设置,下面对每个选项进行具体的说明。

  一、转换类型设置

  小精灵在进行转换时,会根据文件类型有选择地进行转换。默认转换*.txt,*.rtf等文件,若有需要您可以自己增加转换类型,只要输入文件类型的扩展名后,点“增加转换类型”按钮即可。

  二、保存设置

  小精灵支持将转换后的文件保存为htm、html、asp和php后缀,在下拉框中相应的选取,这里以htm为例。点击浏览按钮,可以选择转换后文件的保存位置。

  三、特效设置

  转换后的文件,可以根据需要加入各种特效,以为您的网页增色。如果您要使用其他特效,还可以通过点“收集”按钮进行扩展,只要选择特效的源文件路径和特效名称即可。

  四、公共设置

  公共设置是最重要的设置,它直接关系到输出文件的效果。按要求分别在每个文本框中输入您的网页参数,并设置好图片、颜色、字体等即可(如图2)。


图2

  一种没有边框及菜单栏、工具栏、地址栏、状态栏等的无边框窗口(CW)曾经一度很流行,被很多网站尤其是个人网站所采用,CW也有现成的源码供网友们使用,但是最初的CW使用起来很不方便,有两个JS文件,还要设置一些参数,这对一些初学者来讲是很困难的事情。所以我就有了一个想法:重新写一个全新的无边框窗口,只用一个函数实现,以供网友方便使用。

  我给这个全新的无边框窗口起名为NBW,NBW即No Border Window的缩写,只是想区别于CW。这个无边框窗口可以随意拖动、最小化、关闭等等,不仅在IE5/IE6中测试通过,在腾讯的TE中测试也没有问题。

  首先看一下实际效果:
  调用的过程如下:(noBorderWin函数是事先定义好的,后面会对函数的实现过程进行分析)

  noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr)

  各参数的说明如下:
  fileName :要打开的文件。
  w     :窗口的宽度(px)。
  h     :窗口的高度(px)。
  titleBg  :窗口“标题栏”的背景色以及窗口边框颜色。
  moveBg  :拖动窗口时“标题栏”的背景色以及窗口边框颜色。
  titleColor:窗口“标题栏”文字的颜色。
  titleWord :窗口“标题栏”中显示的文字。
  scr    :窗口中是否出现滚动条。取值yes/no或者1/0。

  我们看到,窗口样式全部在函数的参数中设置,从而保证了使用的便捷。比如,上面例子的代码如下:
  <a href=http:///htmldata/2005-03-19/1111163004.html#none onclick=noBorderWin('test.html','400','240','#000000','#333333','#CCCCCC','一个无边窗口的测试例子','yes');>点击此处将弹出NBW窗口</a>

  如何使用已经说完了,那么,这个函数具体是如何实现的呢?下面,我们就以直接给出源码并加以注释的方式进行讲解。为了容易区分阅读,代码部分使用灰色,注释部分使用红色。

  代码和注释如下:
//--------------------------------------------------------
<script language=javascript>
//*****定制NBW窗口中几个用到的图片的路径*****
minimizebar="minimize.gif";   //窗口右上角最小化“按钮”的图片
minimizebar2="minimize2.gif"; //鼠标悬停时最小化“按钮”的图片
closebar="close.gif";         //窗口右上角关闭“按钮”的图片
closebar2="close2.gif";       //鼠标悬停时关闭“按钮”的图片
icon="icon.gif";              //窗口左上角的小图标
//***************定制结束*****************

//*******开始定义noBorderWin()函数********
function noBorderWin(fileName,w,h,titleBg,moveBg,titleColor,titleWord,scr)
{
  var contents="<html>"+
//变量contents是一个字符串变量,它是NBW窗口中的所有代码。  LOGO的应用一直是CIS导入的基础和最直接的表现形式,其重要性是不言而喻的,网络标识的设计尤其如此。

  一、标识的职能:

  作为独特的传媒符号,标识(LOGO)一直成为传播特殊信息的视觉文化语言。具信,最早的符合CIS精神的标识实例,是2433年前陪葬我国楚地的曾侯乙的一只戟上的"曾"字型图标。无论从古时繁复的欧式徽标、中式龙文,到现代洗练的抽象纹样、简单字标等都是在实现着标识被标识体的目的,即:

  通过对标识的识别、区别、引发联想、增强记忆,促进被标识体与其对象的沟通与交流,从而树立并保持对被标识体的认知、认同,达到高效提高认知度、美誉度的效果。作为时代的前卫,网络LOGO的设计,更应遵循CIS的整体规律并有所突破。

  二、网络LOGO设计的基本应用原理:

  在网络LOGO设计中极为强调统一的原则。统一并不是反复某一种设计原理,应该是将其他的任何设计原理如:主导性、从属性、相互关系、均衡、比例、反复、反衬、律动、对称、对比、借用、调和、变异等设计人员所熟知的各种原理,正确地应用于设计的完整表现。统一也可解释为,共通以上所述各原理,而更高、更概括、更综合的原理。

  构成LOGO要素的各部分,一般都具有一种共通性及差异性,这个差异性又称为独特性,或叫做变化,而统一是将多样性提炼为一个主要表现体,称为多样统一的原理。统一在各部分之中的要素中,有一个大小、材质、位置等具有支配全体的作用的要素,被称为支配。精确把握对象的多样统一并突出支配性要素,是设计网络LOGO必备技术因素。

  网络LOGO所强调的辨别性及独特性,导致相关图案字体的设计也要和被标识体的性质有适当的关联,并具备类似风格的造型。

  记得最近EASTECHO的网友论坛重新开张之时,就有小魔女对论坛的LOGO表示了异议,一个简单印刷字体的LOGO与浪子固有的独特风格、精益求精的品质有较大背离,并与整个网站LOGO缺乏联系,从而产生认知的歧义。不过作为充斥英文LOGO的浪子网站,做了中文LOGO尝试,算个突破吧。

  网络LOGO设计更应注重是一种对事物张力的把握,在浓缩了文化、背景、对象、理念及各种设计原理的基调上,实现对象最冲动的视觉体现。也可以理解为一种最受制约的冲动,在任何方面的张力不足的情况下,精心设计的LOGO常会因为不理解、不认同、不现实、不前卫、不艺术、不朴实等相互矛盾的理由而被用户拒绝或为受众排斥、遗忘。所以恰到好处的理解用户及LOGO的应用对象,是少做无用功的不二法门。不考虑国情和用户的认识水平,对自身设计能力估计不足都是要不得的。在国内给哪个卖计算机的老板设计个$300万的朗讯红圈LOGO,很容易被看作是骗钱的。

  三、网络LOGO的表现形式:

  作为具有传媒特性的LOGO,为了在最有效的空间内实现所有的视觉识别功能,一般是通过特示图案及特示文字的组合,达到对被标识体的出示、说明、沟通、交流从而引导受众的兴趣、达到增强美誉、记忆等目的。

  表现形式的组合方式一般分为特示图案,特示字体,合成字体。

  1、特示图案:

  属于表象符号,独特、醒目、图案本身易被区分、记忆,通过隐寓、联想、概括、抽象等绘画表现方法表现被标识体,对其理念的表达概括而形象,但与被标识体关联性不够直接,受众容易记忆图案本身,但对被标识体的关系的认知需要相对较曲折的过程,但一旦建立联系,印象较深刻,对被标识体记忆相对持久。

  所以对持久记忆要求高时应设计良好的特示图案形象,较好的设计如苹果公司的牙印苹果,对图案LOGO的面向推广的各种要素都把握的恰到好处,另外一些情况下,希望在较短期限内建立形象的,还应该设计相应的吉祥物,以类似苹果这样耳熟能详的概念,强化沟通和理解。

  在现代精神快餐的时代,朗讯的红圈也在成为时尚。不过这类设计在国内还只有设计公司的网站才能接收吧,但有线电视的一个最新的影视综艺节目的LOGO就出现了螺旋型的朗讯红圈,可叹借鉴时大胆有余,创意不足了。

  2、特示文字:

  属于表意符号。在沟通与传播活动中,反复使用的被标识体的名称或是其产品名,用一种文字形态加以统一。涵义明确、直接,与被标识体的联系密切,易于被理解,认知,对所表达的理念也具有说明的作用,但因为文字本身的相似性易模糊受众对标识本身的记忆,从而对被标识体的长久记忆发生弱化。

  所以特示文字,一般作为特示图案的补充,要求选择的字体应与整体风格一致,应尽可能做全新的区别性创作。

  完整的LOGO设计,尤其是有中国特色的LOGO设计,在国际化的要求下,一般都应考虑至少有中英文双语的形式,要考虑中英文字的比例,搭配、一般要有图案中文、图案英文、图案中英文、及单独的图案、中文、英文的组合形式。有的还要考虑繁体、其他特定语言版本等。另外还要兼顾标识或文字展开后的应用是否美观,这一点对背景等的制作十分必要,有利于追求符号扩张的效果。

SyntaxHighlighter.highlight();

[!--infotagslink--]

相关文章

  • photoshop打开很慢怎么办 ps打开慢的设置技巧

    photoshop软件是一款专业的图像设计软件了,但对电脑的要求也是越高越好的,如果配置一般打开ps会比较慢了,那么photoshop打开很慢怎么办呢,下面来看问题解决办法。 1、...2016-09-14
  • Jquery Ajax Error 调试错误的技巧

    JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
  • php语言中使用json的技巧及json的实现代码详解

    目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
  • 图解Sublime Text3使用技巧

    通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识,对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 基于PHP给大家讲解防刷票的一些技巧

    刷票行为,一直以来都是个难题,无法从根本上防止。但是我们可以尽量减少刷票的伤害,比如:通过人为增加的逻辑限制。基于 PHP,下面介绍防刷票的一些技巧:1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 分享12个非常实用的JavaScript小技巧

    这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题,需要的朋友可以参考下...2016-05-14
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • Python爬虫必备技巧详细总结

    本篇文章介绍了我在爬虫过程中总结的几个必备技巧,都是经过实验的,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下...2021-10-22
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • Illustrator像素级完美绘制经验技巧分享

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说像素级完美绘制的经验技巧,各位想知道具体信息的使用者们,那么下面就快来跟着小编一起看一看。 给...2016-09-14
  • url地址参数里带有?,&等特殊字符怎么办

    在使用url进行参数传递时,经常会传递一些 中文名(或含有特殊字符)的参数或URL地址,在后台处理时会发生转换错误。在有些传递页面使用GB2312,而在接收页面使用UTF8,这样接收到的参 数就可能会与原来发生不一致。使用服务器端的urlEncode函数编码的URL,与使用客户端java的encodeURI函数编码的URL,结果就不 一样。...2014-04-27
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • 前端开发必知的15个jQuery小技巧

    本文主要介绍了前端开发必知的15个jQuery小技巧。具有很好的参考价值,下面跟着小编一起来看下吧...2017-01-26
  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
  • MySQL中的binlog相关命令和恢复技巧

    操作命令:复制代码 代码如下:show binlog events in 'mysql-bin.000016' limit 10;reset master 删除所有的二进制日志flush logs 产生一个新的binlog日志文件show master logs; 或者 show binary logs; 查看二进制文...2014-05-31
  • MySQL编程中的6个实用技巧

    每一行命令都是用分号(;)作为结束对于MySQL,第一件你必须牢记的是它的每一行命令都是用分号(;)作为结束的,但当一行MySQL被插入在PHP代码中时,最好把后面的分号省略掉,例如: 复制代码 代码如下: mysql_query("INSERT INTO...2015-03-15
  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程,抓取HTML,获取标题、描述、图片等信息,并去除HTML,希望对大家有所帮助。...2020-06-25