利用表格制作网页详细介绍

 更新时间:2016年9月20日 19:03  点击:1517

  将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中,还是在网页设计中,表格通常都可以使信息更容易理解。HTML 具有很强的表格功能,使用户可以方便地创建出各种规格的表格,并能对表格进行特定的修饰,从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列,从而获得特定的表格效果。

  表格在网页设计中的地位非常重要,可以说如果您表格用不好的话,就不可能设计出出色的网页。大多数初学者一开始就接触表格,对表格都有一定的了解,但是要实现真正细致甚至强大的功能,仔细理解table的代码结构至关重要!我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题,了解和掌握了这些内容,你将发现,table原来是这样的亲切易用!

  一、创建基本的表格

  一个表由<table>开始, </table>结束,表的内容由 <tr>,<th>和<td>定义。<tr>说明表的一个行,表有多少行就有多少个<tr>;<th>说明表的列数和相应栏目的名 称,有多少个栏就有多少个<th>;<td>则填充由<tr>和 <th>组成的表格。

  表格重要的基本标记不多,但每个标记都有很多的属性,考虑到一下子把这些属性都列出来,可能让初学者感到无从下手,所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。

  在讲解之前,我们先来看看表格的基本构造。 下图是一个3行3列的表格。

 

  这里面有两个概念要弄明白:表格单元格。他们的关系是整体与局部的关系,如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的,所以一定要分清楚。前面已经说过表格的最基本标记为<table>、<tr>、<td>,可以先树立这样一个概念:描述整个表格的属性标记放在<table>里,描述单元格的属性标记放在<tr>、<td>里。 有这样一个概念后,我们学习起来就可能简单些。

  1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色

  表格以及单元格的大小是用“width=#”和“height=#”属性说明,“width=#”表示宽,“height=#”表示高,,#是以象素或者百分比为单位的数字。表格边框的宽度是用“border=#”属性说明,,#为宽度值,单位是象素,表格边框的颜色是用“bordercolor="#"属性说明,#是16进制的6位数,格式为rrggbb,分别表示红、 绿、兰三色的分量。或者是16种已定义好的颜色名称,参见文本颜色,单元格边框的颜色属性与表格的相同,但只适用于IE。下面是一个宽为300,高为80,边框宽为4,边框颜色为“FF0000”的一行两列表格,其中第一个单元格的宽为200,高为80,第二个单元格的边框颜色为“0000FF”。

   

  1、不要将链接全部放在图像中

  以往的网页中的链接都是文字,而且用下划线以资识别。但不久人们就讨厌了这些文字链接,于是都采用了图像链接。后来,更加嫌一个图像一个链接太麻烦了,于是将所有的链接都放进了一个图像中去。但并不是所有的用户都打开图像载入,如果你把所有的链接都放入图像中去,而没有任何同样功能的文字链接的话,用户也许会不知所措。

  2、慎用自动滚动

  曾经到过一个内容“丰富”的网页,它使用了很多常见的网页制作技巧:现在的时间、访问时的时间等等。不过有一个用得不是很好,就是窗口的自动滚动。我只是想发个邮件给网页的主人,但我却无法使滚动条停下来让我点击链接,于是我花了很久才“命中”窗口中的E-mail链接——真后悔军训的时候没有练好射击!

  3、不要用延时效果的JavaScript

  现在的网页制作者为了使网页更加具有影响力,都疯狂地加入JavaScript。以现在的“猫”奔跑的速度而言,这些脚本也算不了什么,用户不会介意。但是,如果这些脚本可能导致延时的话,用户的态度就不同了。

  某个国人网页的首页在载入时窗口的底色———窗口里面没有任何内容———由白色逐渐变成黑色,整个过程耗费了几秒,嘿!别小看这几秒,我能检查全部的邮箱了!

  4、不要依赖浏览器

  太多的网站首页中加入了“请在800×600分辨率下使用IE浏览器浏览本网站”等字样的文字。我是安装了IE、NC和Opera,因为我要制作网页,需要它们来检验网页在这些浏览器下的可读性。但一般用户不会安装那么多的浏览器,更加不会牢记着哪个网站需要用哪个浏览器浏览。

  也许不可能让网页在使用所有的浏览器浏览都有一样的效果,但尽量地去达到该目的,会让网页在这个浏览器下有这样的特色、在另一个浏览器下又有不同的特色,这是网页制作者的工作,不是吗?

  5、不要忘记版权

  现在,网上侵犯知识产权的问题非常猖獗,某免费个人网页提供商上的网页尤其严重——甚至有盗版光盘贩卖呢!为此一些新的免费个人网页提供商就要求用户在申请时提交详细的、真实的个人资料,以防备不可预料的事情发生。

  所以,如果你的网页需要引用别人的东西的话,要么你就和他联系一下,征求意见;要么就在明显的位置注明其版权归属。这并非多余,这是你的网页“长寿”的秘方!

  当然,如果是你自己制作的图像或自己撰写的文章,你绝对有权声明版权归你自己所有!

  6、不要懒于更新

  某个个人网页聚居地上有很多的网页都是很久前建立而至今没有更新过的,姑且不说这是浪费公用资源的行为,访问过这些网页的人看到网页主人如此懒惰,你说他还会再去访问吗?



  有位朋友来信,向我提了两个问题:为什么我们的网站用了不少较大的图,而速度依然挺快?他说自己从不用大图做底纹用。另外,为什么我的一幅尺寸比他的作品大了不少的图象,文件倒反而更小?

  我在网上也经常看到,有的朋友对图象压缩似乎并未太多用心,比如用Photoshop存储JPEG格式吧,我猜想大多数情况下都是直接用Save as或Save a copy as这样的命令。当选择压缩比率时,软件仅提供了十个等级,压缩后的效果也不能马上看到,另外,如果是Photoshop4.0或5.01版,对JPEG的压缩,运用于网络也不算理想。网络图象,较大的也就是接近1024x768。因为显示器目前较大的就是17寸。更多的,则是在600或700点左右,这时,压缩成JPEG格式,弄不好就会把图象搞得模糊。至于GIF格式,它的压缩手段主要在颜色数和颜色表的选择等方面,经常使用GIF的人不一定就对它有很好的控制。而GIF的压缩方式及效果,在不同的软件里往往不同,大家还是应该稍加注意。有位网友在首页上用了一幅图象,也就是页面的五分之一,但首页下载速度相当慢。我把图象存下来一看,居然有85K。我重新把它存了一下,也就是24K左右。我是用Photoshop5.5存储这幅图象的。

  Photoshop5.5已经发布很长时间了,不过,当中文版的5.01流行之后,许多人不大关心5.5英文版。实际上这是个大失误,尤其对各位网友们更是如此。因为,Photoshop5.5最大的变化,就是对网络的支持。近来,Adobe对网络的关心是大大增加了,Golive的出现、ImageStyler给网页美术带来的方便、ImageReady2.0与Photoshop5.5的捆绑,都能说明问题。

  在5.5版里,无论是Photoshop还是ImageReady,当你输出JPEG或GIF文件时,你将得到完全的自由控制权。ImageReady2.0还能极容易地制作动画GIF,想了解这方面内容,请看我的《用ImageReady2.0作动画》,这里对ImageReady2.0不作介绍了,反正,这两个软件几乎没什么界面上的差别。

  至于Photoshop5.5,当你将文件存储时,不论是JPEG还是GIF,建议你用File里的Save for Web命令。会出现一个新的控制板,左侧的大块面积是图象的预览效果,注意请选择左上角的Optimized显示方式,这时你看到的图象就是目前压缩比率下的效果,下方还有文件压缩后的大小及在不同传输速率下的传输时间。右边,是压缩控制区,我已将它剪切下来,请仔细看看,并不复杂。输出JPEG时,你可以控制压缩比率,从1%到100%,随你选择,同时,可以观察压缩效果,Blur是模糊度选择,当图象太硬,也就是说锐化程度过高时,可以稍微加一点模糊度。其它各项大家自己研究一下,不难理解的。需要说明的一点是,当你输出较大的图象时,不要选择Progressive复选框,这样,图象会随着下载过程一部分一部分地显示。如果你选择了Progressive,则只好等图象全部下载后才能显示了。

  对于GIF,情况与JPEG类似。这时你控制的是颜色数,不再是压缩比率。 Photoshop5.5的GIF压缩很聪明,假如你的图象只用了两种颜色,并且尺寸很大,上面画了些光滑曲线。这时,如果存成JPEG,线条将很容易模糊,大面积的等值色块也将出现色斑。要避免这种问题,必须选择GIF格式。将颜色数选为2或4,你设定的那两种颜色会很好地保留下来,而文件又小,你该满意了,并且感谢Adobe吧。

  当然,无论是JPEG还是GIF,图象压缩的程度,除了你的控制因素外,还与图象本身的具体情况有关。所谓压缩,是指程序将每一行像素点中相同的连接部分以简单的数字进行记录,JPEG则在这个基础上加入了特殊的算法。比如你画了一条水平线,压缩程序会记录这条线的颜色,长度等内容,而无须按每个像素的方式重复记录,这是压缩的基本原则。所以,当图象的色调变化非常大时,即使只占据了整个画面的一部分,压缩时,那些多色调区必须一点一点地记录,所以,文件也将较大的。编辑图象时须考虑到这一点。

  最后,谈谈网站速度的问题。朋友说我们的网站下载速度较快,这是可能的,虽然并不总是这样。我们的网站是正式申请的,交了钱,从域名可以看得出来。选择的服务商也较新,先进的技术,先进的设备,无疑起了大作用。这一点,免费站点是作不到的。如果你对自己的网站怀着极大的期望与信心,劝你想点办法,申请一个正式的域名吧,当然,要谨慎选择服务商。




  注意:本文讨论的是关于网页代码级的加密方法,而非程序级的加密索

  关于网页加密,一般是使用unescape函数,它只是简单地将一些特定的符号、中文、字符变换成特定的编码,而对于英文,则基本上是原文显示,加密效果对比如下:

原代码:

<html>
<head>
</head>
<body>
<b>ok</b>
</body>
</html>

加密后的代码:

<script>
<!--
document.write(unescape("%3Chtml%3E%0D%0A%20%20%3Chead%3E%0D%0A%20%20%3C/head%3E%0D%0A%20%20%3Cbody%3E%0D%0A%20%20%20%20%3Cb%3Eok%3C/b%3E%0D%0A%20%20%3C/body%3E%0D%0A%3C/html%3E"));
//-->
</script>


  需要指出的是,这种在线加密一般同时也都提供了解密功能,所以,这种加密是没有什么意义的,徒增了网页的体积而已。

  下面我来介绍另一种加密方式:JSCRIPT.ENCODE & VBSCRIPT.ENCODE(注意:它要求浏览者必需使用IE5及其上的浏览器)

  它可以将JS或VBS或ASP代码编译成一串完整的状如乱码的字符串,对其中任何一个字符的修改将直接导致整个代码的不可用。它的安全性和保证代码的完整性方面是前一种方法所不可比拟的。其加密效果对比如下:

原代码:

alert("hello")

加密后的代码:

<script language=jscript.encode>#@~^EwAAAA==C^+.D`rt+^VKE#p@#@&EwUAAA==^#~@</script>
 

  从中找不到一点原代码的影子。

  要使用这种加密方式,首先需要到微软网站下载一个SCRENC脚本编码器,请注意,它是一个在DOS提示符下使用的命令,但安装之后,会有相关的非常详细的图形界面下的帮助文件。

  以下是该程序的语法解释:

  描述
  对脚本编写源代码进行加密,使其不会轻易地被用户查看或修改。

  语法
  SCRENC [/s] [/f] [/xl] [/l defLanguage ] [/e defExtension] inputfile outputfile

  脚本加密程序语法的组成部分如下:

  部分 描述

  /s 可选的。 开关,它指定脚本加密程序的工作状态是静态的,即产生无屏幕输出。如省略,缺省为提供冗余输出。

  /f 可选的。指定输入文件将被输出文件覆盖。 注意,该选项会破坏您原来的输入源代码。如省略,输出文件不会被覆盖。

  /xl 可选的。指定不把 @language 伪指令添加到 .ASP 文件顶部。如省略,@language 指令添加到所有的 .ASP 文件中。

  /l defLanguage 可选的。指定在加密过程中使用的缺省脚本编写语言 (JScript? 或 VBScript)。被加密文件中的脚本块如不包含语言属性,即被认为是由指定语言写成。 如省略,JScript 是 HTML 页和脚本小程序的缺省语言,VBScript 是动态网页的缺省语言。对于普通文本文件,由文件扩展名 ( .js 或 .vbs)决定缺省脚本编写语言。

  /e defExtension 可选的。把输入文件与一个特定的文件类型相关联。当输入文件的扩展名不能明显显示出文件的类型时,即,当输入文件扩展名不是可识别的扩展名,但文件内容又可以归为可识别的类型时,使用该开关。该选项无缺省值。如果遇到一个带不可识别的扩展名的文件,且该选项未被指定,则脚本加密程序不能处理该不可识别的文件。可识别的文件扩展名有 asa、asp、cdx、htm、html、js、sct和 vbs。
inputfile 必需的。要被加密的文件名称,包括相对于当前目录的任何需要的路径信息。
outputfile 必需的。要生成的输出文件的名称,包括相对于当前目录的任何需要的路径信息。




Web网页配色方案

一、红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色。红色容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。

1. 在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。

2. 在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。

3. 在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。

4. 在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。

二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中,最为娇气的一种色。只要在纯黄色中混入少量的其它色,其色相感和色性格均会发生较大程度的变化。

1. 在黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失,趋于一种平和、潮润的感觉。

2. 在黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

3. 在黄色中加入少量的黑,其色感和色性变化最大,成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。

4. 在黄色中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易于接近。

三、蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一个深远、广埔、平静的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色,均不会对蓝色的性格构成较明显的影响力。

1. 如果在蓝色中黄的成份较多,其性格趋于甜美、亮丽、芳香。

2. 在蓝色中混入小量的白,可使橙色的知觉趋于焦躁、无力。

四、绿色是具有黄色和蓝色两种成份的色。在绿色中,将黄色的扩张感和蓝色的收缩感相中和,将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。

1. 在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。

2. 在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。

3. 在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。

五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。

1. 在紫色中红的成份较多时,其知觉具有压抑感、威胁感。

2. 在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。

3. 在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。

六、白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。

1. 在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。

2. 在白色中混入少量的黄,则成为一种乳黄色,给人一种香腻的印象。

3. 在白色中混入少量的蓝,给人感觉清冷、洁净。

4. 在白色中混入少量的橙,有一种干燥的气氛。

5. 在白色中混入少量的绿,给人一种稚嫩、柔和的感觉。

6. 在白色中混入少量的紫,可诱导人联想到淡淡的芳香。

明白了配色方案,在具体操作的时候少不了会用到:

安全色谱

Snow 255 250 250 #FFFAFA
GhostWhite 248 248 255 #F8F8FF
WhiteSmoke 245 245 245 #F5F5F5
<
[!--infotagslink--]

相关文章

  • element表格行列拖拽的实现示例

    本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-02
  • java 画pdf用itext调整表格宽度、自定义各个列宽的方法

    这篇文章主要介绍了java 画pdf用itext调整表格宽度、自定义各个列宽的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-31
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • C#实现动态生成表格的方法

    这篇文章主要介绍了C#实现动态生成表格的方法,是C#程序设计中非常实用的技巧,需要的朋友可以参考下...2020-06-25
  • vue 中使用 vxe-table 制作可编辑表格的使用过程

    这篇文章主要介绍了vue 中使用 vxe-table 制作可编辑表格的使用过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-13
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 基于jquery实现表格无刷新分页

    这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • Vue 自适应高度表格的实现方法

    这篇文章主要介绍了Vue 自适应高度表格的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-14
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • JavaScript实现动态生成表格

    这篇文章主要为大家详细介绍了JavaScript实现动态生成表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-02
  • BootStrap和jQuery相结合实现可编辑表格

    这篇文章主要介绍了BootStrap和jQuery相结合实现可编辑表格的相关资料,需要的朋友可以参考下...2016-04-23
  • 解析C#自定义控件的制作与使用实例的详解

    本篇文章是对C#中自定义控件的制作与使用实例进行了详细的分析介绍,需要的朋友参考下...2020-06-25
  • 基于elementUI竖向表格、和并列的案例

    这篇文章主要介绍了基于elementUI竖向表格、和并列的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-26
  • vue.js表格分页示例

    这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
  • ps怎么制作人物影子效果

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

    本篇文章是对使用c#在word文档中创建表格的方法进行了详细的分析介绍,需要的朋友参考下...2020-06-25
  • 用ps制作二寸证件照

    有没有觉得外面拍的证件照都很丑。那么本文就教大家制作二寸证件照的方法,学会了就能做自己美美的证件照了哈哈! 步骤 双击打开php,首先教大家制作两寸照片的大小。...2016-12-21
  • jQuery实现可以编辑的表格实例详解【附demo源码下载】

    这篇文章主要介绍了jQuery实现可以编辑的表格,涉及jQuery响应鼠标事件动态操作页面元素的相关技巧,需要的朋友可以参考下...2016-07-25
  • php搜索csv表格中是否存在指定数据

    php搜索csv中的数据原理是打开csv文件,然后一行行搜索指定的内容是否包含在我们读取这代码中,如果是返回true。 //搜索csv中指定内容 代码如下 复制代码...2016-11-25