网页中制作线条的技巧

 更新时间:2016年9月20日 19:02  点击:1728

    线条是网页中使用得比较多的一种 HTML 对象,在 HTML 语言中提供了一个 <HR> 的标签,也就是水平直线。但由于这个标签的局限性使我们在制作网页时遇到了一些麻烦,比如:线条的颜色以及怎样制作纵向的线条。在这里,笔者就在网页中制作线条的这两个方面的技巧介绍一点自己的心得。
  为了顾及各种浏览器之间的兼容性,网页制作者在制作网页的时候常常需要考虑标签的各种属性在每一种浏览器中是否能够正确的显示。其中就有一个水平线的颜色属性问题。我们都知道
<HR> 标签具有一个 Color 属性,例如我们要制作一条红色的线条就可以用这样的代码:
<hr color="#FF0000"
noshade>
  当你在IE中浏览这一段代码时你能得到一个你希望的红色线条,可是如果你的浏览器是 Netscape 的话,那么你看到的只是一个灰色的线条,因为 Netscape 根本就不支持 HR 的 Color 属性。我们该怎么办呢?


  1、使用表格
  现在流行的网页制作中我们大多数是用表格来规划一个网页的基本布局,因此使用表格的单元格来制作线条不会给你增加太多的麻烦。
  1. 首先我们需要将表格的单元格边距属性(cellpadding)设置为 0 。如:<table cellpadding="0">,注意:只有将这个边距属性设置为 0 你才能制作一个小于 4 个象素的线条。因为 HTML 中 Cellpadding的默认值是 2 个象素,上下两个边距相加就是 4 个象素。如果不设置 Cellpadding 属性哪怕是你将这个单元格的高度(Height)设置为0 ,这个单元格的实际高度仍然是 4 个象素。
  2. 将单元格的高度(Height)设置为你希望得到的线条的高度。
  3. 设置单元格的背景颜色,如:#FF0000。到这一步还没有完,如果你这时在 Netscape中来浏览这个表格的话,你仍看不到任何颜色。下面就进行关键性的一步。
  4. 利用图像制作软件制作一个 1 * 1 的 GIF格式的图像(一个点)。这里又有一个技巧,你可以将这个图像设置为透明的,这样你就可以利用这个“点”来制作任何颜色的线条,而不需要为每一种颜色的线条都制作一个这样的“点”。 这时你再用 Netscape 浏览这个表格你就可以看到一个红色的线条了。也就是说在 Netscape 中当一个单元格中什么也没有的时候,无法显示这个单元格的背景色,而只要这个单元格中有一点东西,就可以显示单元格的被景色。笔者也不知道什么原因但事实如此。使用这一种方法你也可以制作纵向的线条。你只是需要将上述步骤的第2步的宽度改为你想要的线条的宽度,然后再设置高度或者调整这个单元格的行跨度以达到你想要的长度。这需要你在网页制作过程中根据自己的实际要求来做出相应的处理。顺便说一句,以前《电脑报》登过一篇文章说可以使用HR的 Size 属性来制作纵向线条,但我在实际中发现这种方法只能制作 100 个象素长的纵向线条。




<     Jakob Nielsen是 Sun Microsystems 的杰出科学家,他已写了好几本关于可用性的书,是指导人们在 Web 上如何阅读和查看信息方面的行家。他认为任何为 Web 写的文章在几个重要方面应与为印刷媒体而写的同一主题的文章有所不同。首先,Web 文章应该约为印刷文章长度的一半。在他的研究中,Nielsen 发现人们在 Web 上阅读时的注意力集中时间远比阅读报刊文章短。
  Web 写作是一项新技能,如果您真地想使人们注意您在 Web 上发布的信息,那就有必要学会用一种新的方法进行写作。
  由于大多数人已为印刷材料写作多年,他们发现打破旧习惯是很难的。但 Nielsen 认为写 Web 文章时改变写作方式是很必要的。他建议,为 Web 写的所有东西都应简洁明快,以大纲形式提出,并且不要使用所有商业措辞。
  使所写内容便于浏览 使用突出显示的文字,将段落限制为表达一个中心思想,并将所有内容全部放入公告牌和列表中。 多增加一些内容,少一些华而不实的东西
  将 Web 站点中的更多空间留给要发布的实际文章和其他内容,将较少空间留给导航菜单、广告以及图形。他还说,许多站点只使用每个屏幕像素的 20% 来刊登实际站点内容。
  建立可信度
  研究表明人们认为那些看起来象专业设计的 Web 站点上的信息更为可靠。编辑中仔细删除排版错误和经常更新站点上的信息也能提高可信度,因为大多数人认为新的信息比较可信。添加一些与其他 Web 站点的链接也能帮助提高可信度,因为这可使您的站点似乎与其他 Web 的连接更紧密。
    减少商业味道
  Web 用户讨厌那些免费的,自我吹嘘的商业信息。Nielsen 说,“他们真正想要的是铁的事实,” “而不是那些自吹自擂的信息。然而,如果您在 Web 上浏览一下,就知道所有站点都是这么做的。”如果您抛弃那些商业化的讨论,人们就不必再在自己的头脑中思考这些内容,他们更可能会继续读下去。
  采用倒金字塔形式
  在写 Web 文章时,一般采用倒金字塔形式。假定大多数人在读到结尾前就放弃,所以把结论放在开头,然后首先列出最重要的信息。
  用超级链接缩短长度
  由于文章力求简洁,可以用超级链接来缩短文章长度。不必向您的读者解释那些不重要的想法,可以在这些文字中添加超级链接,以转到其他辅助条目、相关文章以及感兴趣读者可从中获取信息的其他站点。超级链接是缩短白皮书和其他长科技文章的有效途径。要参看 Nielsen 如何在他的文章中使用超级链接,请参阅他关于 Web 写作方面的短评 (http://www.useit.com/papers/webwriting/)。
  去掉不必要的图形
  由于 Web 受下载时间的限制,所以不要让您的读者等待下载图形和大页面。Nielsen 说,大多数人如果等待页面出现的时间超过一秒钟,就会变得焦急不安,除非对他们来说是非常重要的信息,否则他们的等待时间不会超过 10 秒钟。在 Web站点(http://www.useit.com/papers/responsetime.html) 上可以获得 Nielsen 关于此主题研究的详细说明。
  并不是信息越多越好
  请记住:真正重要的不是为 Web 读者提供更多信息,而是为他们提供更简洁的信息。那么究竟多少才是过多了呢?这主要取决于对象的情况,但作为一条通用的规则,Nielsen 警告我们:不应让您的读者在读到文章末尾前向下单击三屏以上。
  结论
  迟早会有一天,几乎每一位科技人员都有可能不得不写一篇科技文章,或者讲述他们如何进行研究工作。在内部或外部 Web 站点上发布信息的可能性总是有的。如果您想要人们真正地阅读您所写的东西,就请注意 Nielsen 所说的内容。


    Meta标签放在每个网页的<head>...</head>中,我们大家比较熟悉的如:
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">说明编辑工具;
<meta name="KEYWORDS" content="...">说明关键词;
<meta name="DESCRIPTION" content="...">说明主页描述;
<meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80">和
<meta http-equiv="Content-Language" content="zh-CN">说明所用语言及文字...
   可见META有两种,name和http-equiv。
name主要用于描述网页,对应于content,以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找META值来给你的网页分类)。这其中最重要的是DESCRIPTION(你的站点在引擎上的描述)和KEYWORDS(搜索引擎籍以分类的关键词),应该给你的"每一页”都插入这两个META值。当然你也可以不要搜索引擎检索,可用:
<meta name="ROBOTS" content="all | none | index | noindex | follow | nofollow"> 来确定:
设定为"all"时文件将被检索,且页上链接可被查询;
设定为"none"则表示文件不被检索,而且不查询页上的链接;
设定为"index"时文件将被检索;
设定为"follow"则可查询页上的链接;
设定为"noindex"时文件不检索,但可被查询链接;
设定为"nofollow"则表示文件不被检索,但可查询页上的链接.
http-equiv顾名思义相当于http文件头的作用,可以直接影响网页的传输。比较直接的
例子如:
1、自动刷新,并指向新网页
<meta http-equiv="Refresh" content="10; url= http://yourlink"'>http://yourlink"> 10秒后刷新到http://yourlink;
2、网页间转换时加入效果
<meta http-equiv="Page-Enter" content="revealTrans(duration=10, transition=50)">
<meta http-equiv="Page-Exit" content="revealTrans(duration=20, transition=6)">
加在一个网页中,进出时有一些特殊效果,这个功能即FrontPage 98的Format/PageTransition.不过注意所加网页不能是一个Frame页;
3、强制网

    在浏览网页的时侯,常常可以看见一些“当前网站上的人数是XXX人”的在线人数同计。如何用ASP来做一个呢?首先,分析一下它的做法,一般来说,这些线上人数统计都是指一个时段内的访客人数统计。比如(5分钟内,10分钟内)而这个时间的长短,是由设计者设定的。
  在这个时段内同计各个不同IP的访客总数,就可以得出当前的线上人数了,但这里有一个精确问题需要解决,至于用什么办法来精确地统计,那就是各人不同的做法了,比如可以用自动提交的页面,隔一段时间读取COOKIES等等,而在ASP中,有一个更好的技巧,就是使用session对象来统计,这里介绍一下gobal.asa这个文件,这是一个很重要的一个文件,请看看它的结构。
<SCRIPT LANGUAGE="VBScript" RUNAT="Server">
Sub Session_OnStart
End Sub
Sub Session_OnEnd
End Sub
sub Application_OnStard
End Sub
sub Application_OnEnd
End Sub
</SCRIPT>
  当有一个会话发生时(用户浏览网页,向Web服务器发出请求)那么,如果自服务器启动后第一个用户的话,就会同时发生Application_OnStard和Session_OnStart这两个事件,之后,再有别的用户发出请求的话,就只发生Session_OnStart这个事件,而session的生存期是多长,是可以设定的,Session.timeout=X(分钟)
  好了,有了这个很好用的方法,我们就能准确地统计出在线人数了,而人数总计是用一个application变量来保存,当在第一个会话开始时,在Application_OnStard事件中放置一条清空计数器的语句application("online")=0,然后,在Session_OnStart事件中,放置一条增加在线人数的语句
application("online")=application("online")+1,而在Session_OnEnd事件相应地放一条减少在线人数的语句,令计数值减一。
  这样,这个文件就改为如下
<SCRIPT LANGUAGE="VBScript" RUNAT="Server">
Sub Session_OnStart
application("online")=application("online")+1
End Sub
Sub Session_OnEnd
application("online")=application("online")-1
End Sub
sub Application_OnStard
application("online")=0
End Sub
sub Application_OnEnd
application("online")=0
End Sub
</SCRIPT>


  接下来编一个显示图形数字的程序,把在线人数显示在指定的页面上。这样就能得出在人数了
*online.asp
<% @language="vbscript" %>
<%
tmp=application("online")
tmp=Cstr(tmp)
dim disp(20)
dim images(20)
dbbits=len(tmp)
for i= 1 to dbbits
disp(i)=left(right(tmp,i),i-(i-1))
next
for i=dbbits to 1 step -1
images(i)="<img src="&"http://xxxx.com.cn/pic"&"/"&disp(i)&".gif>"
response.write "document.write('"&images(i)&"');"
next
%>


  上面的程序很简单,这里不作分析了,请大家自己阅读一下。在调用在线统计的页面上用一句script语句引用online.asp文件,以显示图形统计器。
   <script language="JavaScript" src="http://xxxx.com.cn/online.asp"></script>
  现在可以了,记住要点,你必须把gobal.asa放在正确的web应用程序根目录上,而最好单独为这个统计新建一个web应用程序,不要与其它别的程序混乱了,不然得出的数据是不准确的,而把这个程序修改为多用户的在线统计也很简单。这样就可以提供在线统计服务了,如何实现请又大家去思考一下吧....




<

    色彩的运用在网页中的作用真是太重要了,有些网页看上去十分典雅、有品位,令人赏心悦目,但是页面结构却很简单、图象也不复杂,这主要是色彩运用得当,因此我特地将本来属于图象制作内的色彩作为一个独立拦目来介绍。
   1、色彩基本概念
  自然界中的颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色,而其他所有颜色均属于彩色。任何一种彩色具有三个属性:
   (1)色相(Hue):
  也叫色泽,是颜色的基本特征,反映颜色的基本面貌。
   (2)饱和度(Saturation):
  也叫纯度,指颜色的纯洁程度。
   (3)明度(Brightness或Lightness或Luminousity):
  也叫亮度,体现颜色的深浅。
  非彩色只有明度特征,没有色相和饱和度的区别。
   2、色彩的三原色
  电脑屏幕的色彩是由RGB(红、绿、蓝)三种色光所合成的,而我们可通过调整这三个基色就可以调校出其它的颜色,在许多图像处理软件里,都有提供色彩调配功能,你可输入三基色的数值来调配颜色,也可直接根据软件提供的调色板来选择颜色。

   3、电脑影像的色彩
  电脑影像的色彩是经由位元(BIT)的计算和组合而来,单纯的黑白图像是最简单的色彩结构,在电脑上用到1位元的资料,虽说只有黑色和白色,但仍能透过疏密的矩阵排列,将黑与白组合成近似视觉上的灰色调阶。
  灰阶(Grayscale)的影像共有256个阶调,看起来类似传统的黑白照片;除黑、白二色之外,尚有254种深浅的灰色,电脑必须以8位元的资料,显示这256种阶调。 
  全彩(Fullcolor)是指RGB三色光所能显示的所有颜色,每一色光以8位元表示,各有256种阶调,三色光交互增减,就能显示24BIT的1677万色(256*256*256=16,777,216),这个数值就是电脑所能表示的最高色彩,也就是通称的RGBTureColor。
  8位元色是指具有256种阶调,或256种色彩的影像,而我们在常常见到GIF格式的图象文件就是带有256种色彩的图象文件。若要把24位元的全彩图片转成256色的8位元,通常必须经过索引的步骤(Indexed),也就是在原本24位元的1677万色中,先建立颜色分布表(histogram),然后再找出最常用的256种颜色,定义出新的调色盘,最后再以新色盘的256色取代原图。
  让我们看看每一位元色包含多少种颜色:
   1位 2种颜色
   2位 4种颜色
   4位 16种颜色
   8位 256种颜色
   16位 65536种颜色
   24位 1677万种颜色
   32位 1677万种颜色和256级灰度值
   36位 687亿种颜色和4096级灰度值
 通常所称的标准VGA显示模式是8位显示模式,即在该模式下能显示256种颜色;而高彩色(Hi Color)显示是16位显示模式,能显示65536种颜色,也称64K色;还有一种真彩色(True Color)显示模式是24位显示模式,能显示1677万种颜色,也称16M色,这是现在一般PC机所能达到的最高颜色显示模式,在该模式下看到的真彩色图象的色彩已和高清晰度照片没什么差别了。在图形制作片中我们已提到过色彩在页面中的重要性,在页面中尽量使用看上去比较淡雅、简洁的色彩;比如背景尽量少用灰暗、深沉的色彩(除非特殊需要),并且根页面的主题来选择主色调,可能有一些不搞美术的朋友不知道色彩代表的含义,请参阅下表:
   红色:代表热情、奔放、喜悦、庆典
   黑色:代表严肃、夜晚、沉着;
   黄色:代表高贵、富有
   白色:代表纯洁、简单
   蓝色:代表天空、清爽
   绿色:代表植物、生命、生机
   灰色:代表阴暗、消极
   紫色:代表浪漫、爱情
   棕色:代表土地
   上面举出的是几种主要色彩的含义,希望对你有所帮助。




[!--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
  • 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
  • 图解Sublime Text3使用技巧

    通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识,对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
  • 腾讯视频怎么放到自己的网页上?

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

    这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题,需要的朋友可以参考下...2016-05-14
  • Python爬虫必备技巧详细总结

    本篇文章介绍了我在爬虫过程中总结的几个必备技巧,都是经过实验的,通读本篇对大家的学习或工作具有一定的价值,需要的朋友可以参考下...2021-10-22
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • 解析C#自定义控件的制作与使用实例的详解

    本篇文章是对C#中自定义控件的制作与使用实例进行了详细的分析介绍,需要的朋友参考下...2020-06-25
  • Illustrator像素级完美绘制经验技巧分享

    今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说像素级完美绘制的经验技巧,各位想知道具体信息的使用者们,那么下面就快来跟着小编一起看一看。 给...2016-09-14
  • ps怎么制作人物影子效果

    ps软件是现在很多人比较喜欢的,通过ps软件可以制作很不错的图片效果。这次文章就给大家介绍下使用ps怎么制作任务影子,具体制作方法下面一起来看看。 ps人物影子效...2017-07-06
  • 用ps制作二寸证件照

    有没有觉得外面拍的证件照都很丑。那么本文就教大家制作二寸证件照的方法,学会了就能做自己美美的证件照了哈哈! 步骤 双击打开php,首先教大家制作两寸照片的大小。...2016-12-21
  • C#实现Winform中打开网页页面的方法

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

    本文主要介绍了前端开发必知的15个jQuery小技巧。具有很好的参考价值,下面跟着小编一起来看下吧...2017-01-26
  • 教大家制作简单的php日历

    最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示。如下图所示:一、计算数据 1、new一个Calendar类2、初始化两个下拉框中的数据,年份与月份3、初始...2015-11-24
  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
  • 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