您的位置：360文档中心› 网页表格制作速查手册

网页表格制作速查手册

网页表格制作速查手册
网页表格制作速查手册

网页表格制作速查手册

创建网页表格的基本原则和方法

将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。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”。

代码如下：

＜table border="4" width="300" height="80" bordercolor="#FF0000"＞

＜tr＞

＜td width="200" height="80"＞＜/td＞

＜td bordercolor="#0000FF"＞＜/td＞

＜/tr＞

＜/table＞

2、表格的水平摆放位置

2、表格的水平摆放位置

表格的水平摆放位置是用align="#" 属性说明的，#为left(左对齐), right(右对齐), center(居中)。分别见下例，注意这三个表格与边界的位置关系：

第三个表格的代码如下：

＜table width="80" border="1" align="right" height="30"＞

＜tr＞

＜td＞右对齐＜/td＞

＜/tr＞

＜/table＞

3、单元格里内容的位置属性

水平对齐方式，用align="#"属性说明，#为left(左对齐), right(右对齐), center(居中)；垂直对齐方式，用valign="#"属性说明，#为top(上对齐), bottom(下对齐), middle(居中)。分别见下例，注意单元格里的内容与边框的的位置关系：

代码如下：

＜table width="450" border="1"＞

＜tr＞

＜td width="150"＞

＜div align="left"＞内容左对齐＜/div＞

＜/td＞

＜td width="150"＞

＜div align="center"＞内容居中＜/div＞

＜/td＞

＜td＞

＜div align="right"＞内容右对齐＜/div＞

＜/td＞

＜/tr＞

＜/table＞

代码如下：

＜table width="150" border="1"＞

＜tr＞

＜td height="40" width="146" valign="top"＞内容上对齐＜/td＞

＜/tr＞

＜tr＞

＜td height="40" width="146" valign="middle"＞内容居中＜/td＞

＜/tr＞

＜tr＞

＜td height="40" width="146" valign="bottom"＞内容下对齐＜/td＞

＜/tr＞

＜/table＞

4、表格的背景色、背景图片，单元格的背景色、背景图片

背景色属性：bgcolor="#" ，背景图片属性：background="#"。见下例：

代码如下：

＜table width="450" border="1" bgcolor="#539996" bordercolor="#FFFFFF" height="90"＞

＜tr＞

＜td＞＜/td＞

＜td background="Back01.gif"＞＜/td＞

＜/tr＞

＜tr＞

＜td＞＜/td＞

＜td＞＜/td＞

＜/tr＞

＜tr＞

＜td bgcolor="#FF0000"＞＜/td＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

说明：在上例中，整个表格的背景色是bgcolor="#539996"，第一行第二列的单元格背景图片是background="Back01.gif"，第三行第二列的单元格背景色是bgcolor="#FF0000",根据显示结果可以看出：设置表格的背景色后再设置单元格的背景色或背景图片，将优先显示单元格的属性。

5、表格属性cellspacing、cellpadding

5、表格属性cellspacing、cellpadding

cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字，表示单元格间隙所占的像素点数。

我们来看下面的两个表格：

上面第一个表格的单元格之间没有空白距离，而第二个的单元格之间有很大的空白距离，我们来比较一下他们的源代码：

第一个表格的代码：

＜table width="200" cellspacing="0" border="1" bordercolor="#000000"＞

＜tr＞

＜td＞＜/td＞

＜td＞＜/td＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

第二个表格的代码：

＜table width="200" cellspacing="8" border="1" bordercolor="#000000"＞

＜tr＞

＜td＞＜/td＞

＜td＞＜/td＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

比较代码，上边两个表格中只有cellspacing 的设置不同，一个为“0”，一个为“8”，显示的结果就是第一个表格的每个单元格之间的距离为0(在本例中由于我们为了显示

的方便，将表格边框设为“1”，所以单元格的真实距离是“2”，若将表格边框设为“0”，则单元格的距离就是0了，第二个单元格同理)，第二个表格的每个单元格之间的距离为8。

cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。我们先来看看这个例子:

我们来看下面两个表格：

第一个表格单元格的内容与单元格边界之间没有空白距离，而第二个表格单元格的内容与单元格边界之间有空白距离，我们来比较一下他们的源代码：

第一个表格的代码：

＜table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="０"＞

＜tr＞

＜td width="120"＞网页陶吧＜/td＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

第二个表格的代码：

＜table width="240" cellspacing="0" border="1" bordercolor="#000000" cellpadding="15"＞

＜tr＞

＜td width="120"＞网页陶吧＜/td＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

两个表格只有红色部分代码不同。第一个表格中"网页陶吧"这几个字离它所在的单元格为0,那是因为设置了cellpadding="0"的原因.第一个表格中的"网页陶吧"这几个字离它所在的单元格比较远，那是因为cellpadding="15",也就是说"网页陶吧"离它所在的单元格的边界的距离为20像素。简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。

我们在以后的篇幅中会大量用到这两个属性，所以请大家不要弄混乱了, 为了形象的理解，请参考下图：

二、网页表格制作进阶

前面第一部分我们介绍的是表格最基本也最常用的属性，要用好表格，就必须熟悉和掌握这些最基本的属性。在对这些基本的属性有了一定的了解之后，我们再来看看表格的其他几个似乎并不常用的属性，以便对表格有一个整体的认识。事实上，即使不了解下面所讲的内容，多数情况下也不会影响你对表格的使用，所以我们只是简略的带过。

1、拆分表格

colspan表示该一储存格向右打通的栏数。rowspan表示该一储存格向下打通的栏数。

看下面的表格：

表格代码：

＜table width="450" border="1" cellspacing="0" cellpadding="2" bordercolor="#009900"＞

＜tr＞

＜td＞第一行第一栏＜/td＞

＜td colspan="2"＞第一行的第二、三栏＜/td＞

＜/tr＞

＜tr＞

＜td rowspan="2"＞第二行及第三行的第一栏＜/td＞

＜td＞第二行第二栏＜/td＞

＜td＞第二行第三栏＜/td＞

＜/tr＞

＜tr＞

＜td＞第三行第二栏＜/td＞

＜td＞第三行第三栏＜/td＞

＜/tr＞

＜/table＞

你可能看的不大明白。如果借助于Dreamweaver来再现表格制作过程，相信你会很快明白其中的奥秘。先制作一个三行三列的表格(这可以说是上面表格的“原形”)，见下图，然后将第一行的第二、三栏合并，第二行的第一栏、第三行第一栏合并，这样就得到了上例中的表格。你可以自己动手检验一下。

熟练掌握表格的colspan、rowspan属性，可以随心所欲的制作出复杂的表格。

2、表格中的标题列

2、表格中的标题列

＜CAPTION＞的作用是为表格标示一个标题列，如同在表格上方加一没有格线的打通列，通常用来存放表格标题，参数有align、valign。

align表示表格标题列相对于表格的对齐方式(水平)，可选值为：left, center, right, top, middle, bottom，若align="bottom" 的话标题列便会出现在表格的下方，不管你的原代码是把＜caption＞放在＜table＞中的头部或尾部。

valign表示表格标题列相对于表格的对齐方式(上下)，可选值为：top, bottom。见下例：

表格代码：

＜table width="400" border="1" cellspacing="0" cellpadding="2"＞

＜caption＞＜font color="#FF0000"＞＜b＞网页陶吧访问统计＜/b＞＜/font＞＜/caption＞

＜tr align="CENTER"＞

＜th＞Month＜/th＞

＜th＞% of IE visitor＜/th＞

＜th＞% of NC visitor＜/th＞

＜/tr＞

＜tr align="CENTER"＞

＜td＞August＜/td＞

＜td＞91%＜/td＞

＜td＞9%＜/td＞

＜/tr＞

＜/table＞

3、行组(IE有效)

每个表格可以有一个表头、一个表尾和一个或多个表体，分别以THEAD、TFOOT 和TBODY元素表示。通常，文档中它们的次序首先是THEAD，然后是TFOOT，然后是不同数目的TBODY。

＜thead＞ ... ＜/thead＞- 表的题头

＜tbody＞ ... ＜/tbody＞- 表的正文

＜tfoot＞ ... ＜/tfoot＞- 表的脚注

表格代码：

＜table border width="300"＞

＜thead＞

＜tr＞

＜td＞Food＜/td＞

＜td＞Drink＜/td＞

＜td＞Sweet＜/td＞＜/tr＞

＜/thead＞

＜tbody＞

＜tfoot＞＜tr＞

＜td＞A＜/td＞

＜td＞B＜/td＞

＜td＞C＜/td＞＜/tr＞＜/tfoot＞

＜tr＞

＜td＞D＜/td＞

＜td＞E＜/td＞

＜td＞F＜/td＞＜tr＞

＜/tbody＞

＜/table＞

4、列组(IE有效)

4、列组(IE有效)

＜colgroup align=#＞#=left, right, center

见下例：

表格代码：

＜table border width=160＞

＜colgroup align=left＞＜colgroup align=center＞＜colgroup align=right＞＜thead＞＜tr＞

＜th＞Food＜/th＞

＜th＞Drink＜/th＞

＜th＞Sweet＜/th＞

＜/thead＞＜tbody＞

＜tr＞

＜td＞A＜/td＞

＜td＞B＜/td＞

＜td＞C＜/td＞

＜tr＞

＜td＞D＜/td＞

＜td＞E＜/td＞

＜td＞F＜/td＞

＜/tbody＞

＜/table＞

5、列的属性控制

＜COL＞定义一个列组中的列，以便对它们能够同时设置有关属性

＜col span=#＞#=从左数起，具有指定属性的列的列数

＜col align=#＞#=left, right, center

表格代码：

＜table border width=160＞

＜colgroup＞＜col align=center span=2＞＜colgroup align=right＞＜thead＞

＜tr＞

＜th＞Food＜/th＞

＜th＞Drink＜/th＞

＜th＞Sweet＜/th＞

＜/thead＞＜tbody＞

＜tr＞

＜td＞A＜/td＞

＜td＞B＜/td＞

＜td＞C＜/td＞

＜tr＞

＜td＞D＜/td＞

＜td＞E＜/td＞

＜td＞F＜/td＞

＜/tbody＞

＜/table＞

以上内容考虑到实用性，没有展开讨论，欲了解详细的内容可参考清华大学《HTML 语言教程》或其他相关书籍。

三、活用表格美化网页

表格的作用不仅仅局限于页面的元素定位、排版布局，在实际的应用我们还可以利用它来美化整个页面。接下来我们就将接触到表格的灵活应用，你会发现：原来表格的世界还可以这么精彩！

考虑到现在DreamWeaver、Frontpage等软件的广泛使用，完全用手写代码来编制网页的人越来越少，所以，在制作以下实例的过程中，我们多是利用DreamWeaver 来完成前期工作，然后再手工修改代码，最终实现我们所期望的效果。

1、一个象素宽的分隔线

有时候在网页排版时，我们需要一条细线，用图片似乎有点劳师动众了，其实，这个小问题用表格就能搞定。请看下面的例子：

代码：

＜table width="100%" cellspacing="0" border="0" bgcolor="#000000" height="1"

cellpadding="0"＞

＜tr＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

在DreamWeaver中的快速通道

在Dreamweaver中插入一个一行一列的表格，表格的属性面板设置如下：

切换到原代码视窗，将＜td＞＜/td＞中的“”去掉就ok了。如下图：

说明：其实就是一个高为“1pix”的表格，需要注意的是表格内不要有其他任何内容。如果你还需要其他颜色的分隔线，只需要改变表格的背景色bgcolor 就可以了。利用这种方法我们还可以制作出细竖线，将表格的宽该为“1”就可以了。

练习：试制作出如下的效果

2、利用“cellspacing”属性制作细线表格

2、利用“cellspacing”属性制作细线表格

有时候我们需要用表格边框来区分各部分内容，若将表格边框宽度设置为“1”，又显得过于突出，影响整个页面的美观，怎么办呢？我们来看看下面两个表格以及它们的代码（注意红色部分代码）：

表格A代码：

＜table width="160" border="1" cellspacing="0" height="40"＞

＜tr＞

＜td＞

＜div align="center"＞表格A＜/div＞

＜/td＞

＜/tr＞

＜/table＞

表格B代码：

＜table width="160" cellspacing="1" border="0" bgcolor="#000000" height="40"＞

＜tr＞

＜td bgcolor="#FFFFFF"＞

＜div align="center"＞表格B＜/div＞

＜/td＞

＜/tr＞

＜/table＞

表格A直接设置边框宽度为1，显示的结果并不令人满意，表格B则利用了“cellspacing”属性，边框明显细多了，显的更加精致。

在DreamWeaver中的快速通道

在Dreamweaver中插入一个一行一列的表格，表格的属性面板设置如下：

选择单元格，把单元格的背景色设置为白色就ok了！

说明：前面已经知道，cellspacing属性用来指定表格各单元格之间的空隙。我们设置整个表格的背景色时也包含了这个空隙，而设置单元格的背景色时却不包含这个空隙，所以，浏览器中显示的表格“边框线”并不是真正意义上的表格边框，而是单元格与单元格的空隙（此处的空隙我们设置的是“1pix”）。

练习：试制作出如下的效果(提示：原理同上，不同的是需要将每个单元格的背景都设置为白色。)

3、利用“cellpadding”属性制作等间距细线表格

3、利用“cellpadding”属性制作等间距细线表格

我们可能经常在大网站中看到这种效果的表格：

这又是怎么做出来的呢，似乎让人有点摸不着头脑。我们来先来看看他的代码（注意红色部分的代码）

表格代码：

＜table width="420" border="0" cellspacing="2" cellpadding="1" height="10"＞

＜tr＞

＜td bgcolor="#000000"＞

＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞

＜tr＞

＜td bgcolor="#FFFFFF"＞＜/td＞

＜/tr＞

＜/table＞

＜/td＞

＜td bgcolor="#000000"＞

＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞

＜tr＞

＜td bgcolor="#FFFFFF"＞＜/td＞

＜/tr＞

＜/table＞

＜/td＞

＜td bgcolor="#000000"＞

＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞

＜tr＞

＜td bgcolor="#FFFFFF"＞＜/td＞

＜/tr＞

＜/table＞

＜/td＞

＜td bgcolor="#000000"＞

＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞

＜tr＞

＜td bgcolor="#FFFFFF"＞＜/td＞

＜/tr＞

＜/table＞

＜/td＞

＜td bgcolor="#000000"＞

＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞

＜tr＞

＜td bgcolor="#FFFFFF"＞＜/td＞

＜/tr＞

＜/table＞

＜/td＞

＜td bgcolor="#000000"＞

＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞

＜tr＞

＜td bgcolor="#FFFFFF"＞＜/td＞

＜/tr＞

＜/table＞

＜/td＞

＜/tr＞

＜/table＞

代码好象很多，但理清它的结构后会发现其实并不复杂，它主要利用了表格的嵌套以及表格的“cellpadding”属性。在一个一行六列表格的每个单元格里又插入了一个这样一个表格：

＜table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%"＞

＜tr＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

在DreamWeaver中的快速通道

首先制作一个一行六列的表格，表格的属性面板设置如下：

将该表格每个单元格的背景色设置为黑色（注意：是单元格而不是整个表格），设置完后表格显示如下：

然后在每个单元格中插入一个表格，将插入表格的属性面板按如下设置就ok了。

需要注意的就是上面代码中加了红色的属性一个也不能少！

说明：cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。明白了这个属性后，上面的例子就不难理解。红色代码中width="100%"的意思是插入的表格的宽是被插入表格宽度的100%,也就是在宽度上把底下表格占满，但被插入的表格有这样一个属性cellpadding="1",所以就算是100%,被插入的表格也要在4边留下1px的空白距离.同理，height="100%"也就是在高度上也要顶满下面的表格,但由于被插入的表格的cellpadding="1"的原因,在上与下方都留了1px的空白距离。这样，在浏览器中显示的“表格边框”并不是真实的边框，而是被背景色填充的这“1px”的空白距离。

4、圆角表格的制作

4、圆角表格的制作

做网页常常使用一些技巧，比如在表格的四周加上圆角，这样可以避直接使用表格的直角，而显得过于呆板,很多网友都提到过解决的办法，我们选取最有代表性两种方法来再现圆角表格的制作过程。

第一种制作方法：

1. 做两个圆角的图片，这两个图片可以先做一个图片，然后

用相关软件垂直翻转一下就行了。

2. 在两个图片中间插入一个背景颜色同图片一样的表格，长

度也设为图片的长度，将这个表格的cellpad设为1，其他都为0。

3. 将表格的单元格背景色设置为白色（从2、3

两步可以看出这里其实是制作了一个细线边框的表格）

4. 最后我们就可以在表格里面填写内容了，我们可以把这个

部分当然一个整体，复制并粘贴到页面上不同的地方，当然你也可以改变整个圆角表格的尺寸，要做的就是改变圆角图片和插入表格的尺寸了。

代码如下：

＜img height=15 src="411-w01.gif" width=125＞＜br＞

＜table width="124" cellspacing="1" cellpadding="0" bgcolor="#0000FF"＞

＜tr＞

＜td bgcolor="#FFFFFF"＞经过这样的处理后表格是不是漂亮多了呢！＜/td＞

＜/tr＞

＜/table＞

＜img height=13 src="411-w02.gif" width=125＞

说明：其实就是两个圆角图片与一个细线表格（上面第二个技巧所讲到的细线表格）

组合在一起。

练习：试制作如下效果的表格(提示：在上面的表格里在插入一个表格，利用插入

的表格来控制排版)

圆角表格的第二种制作方法：

第二种制作方法：

1. 准备工作：制作两个小圆角图片，如右图。可以先制

作一个，让后用相关软件翻转就可以了

2. 制作一个一行三列的表格。表格的cellpadding、

cellspacing均设置为零。（此处为了便于说明，暂

时将border设置为"1"）

3. 将第一步的两个小图片分别插入第一、第三单元格

4. 设置第一个单元格的align=left、valign=top，使图片

在单元格的左上方，第三个单元格的align=right 、

valign=top，使图片在单元格的右上方。并调整单元

格的大小

5. 将单元格的背景色（注意是单元格）设置为插入的图

片颜色相同。

6. 将表格的border设置为"0",然后在下面再插入一个

同样边框颜色的细线表格（此步骤省略，如果不会，

可参照上面的细线表格技巧）,现在就可以在细线表

格里写入内容了。

代码如下：

＜table width="150" cellpadding="0" cellspacing="0" border="0"＞

＜tr bgcolor="#7090ff"＞

＜td valign="top" align="left" width="10"＞＜img src="411-w03.gif" width="7" height="7"＞＜/td

＞

＜td width="127" bgcolor="#7090ff"＞＜/td＞

＜td align="right" valign="top" width="10"＞＜img src="411-w04.gif" width="7" height="7"＞＜

/td＞

＜/tr＞

＜/table＞

＜table width="150" cellspacing="1" cellpadding="0" border="0" bgcolor="#7090ff"＞

＜tr＞

＜td bgcolor="#FFFFFF"＞这种表格是不是很眼熟啊？的确，我们可以在很多的大网站找到它的

身影。＜/td＞

＜/tr＞

＜/table＞

说明：它由两个单独的表格组成，其中第一个表格是出现圆角的关键！

5、两个并排的表格

5、两个并排的表格

有时候我们需要把两个单独的表格并排排列，但是当我们连续插入两个表格的时

候，表格会自动分成上下排列，如何解决这个问题呢？

利用表格的嵌套：我们可以先做一个一行两列的表格，然后在这个表格的每个单元

格里在插入一个表格就行了,效果如下：

代码如下：

＜table width="440" cellpadding="0" cellspacing="0" border="0"＞

＜tr＞

＜td＞

＜table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1"＞

＜tr＞

＜td＞＜/td＞

＜/tr＞

＜/td＞

＜td＞

＜table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1"＞

＜tr＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

＜/td＞

＜/tr＞

＜/table＞

利用表格自身属性：连续插入两个表格后，将第一个表格（注意，是表格而不是单元格）的align设置为“left"”就ok了！

代码如下：

＜table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1"

align="left"＞

＜tr＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

＜table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1"＞

＜tr＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

6、利用表格做空格

在排版的过程中，空格对我们来说是在熟悉不过的了。为了版面的整齐和规范，我们会多次用到空格，对于文字和图片来说，非常简单，但是如果有一个表格内容，为了整个版面的协调，也要象文字那样在开头空两格，这时候单纯的输入空格解决不了问题，利用嵌套表格好象有点麻烦，怎么办呢？其实有一个非常简单但很实用的技巧。我们先来看看效果：

代码如下：

＜table width="30" align="left"＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

＜table width="200" cellspacing="0" cellpadding="0" bordercolor="#000000" border="1"＞

＜tr＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

分析一下代码，可以看出来这其实就是第5种技巧的另一个应用。现在，相信不用表格的嵌套，你也可以做出这样的效果吧！

网页设计与制作期末试题及答案

网页设计与制作模拟试题 一、单项选择题(每空1分，共10分) 1. 客户/服务器系统的最大特点是客户机和服务器 ( D ) A. 必须运行在同一台机器上 B. 必须运行在同一个网络上 C. 必须运行在不同的计算机上 D. 不必运行在同一计算机上 2. 若需要软件把LAN上的客户机从Internet上隐藏起来，并为客户机执行Web 请求，则下面( D )软件能实现此项功能。 A. Internet Information Server B. Index Server C. Personal Web Server D. 代理服务器 3. 通常一个站点的主页默认文档名是 ( C ) A. Main.htm B. Webpage.htm C. Index.htm D. Homepage.htm 4. 通常，比较好的建立站点目录的习惯是 ( A ) A. 在根目录下建立一个总的IMAGE目录放置图象文件 B. 直接把图象文件放置在各栏目的目录下 C. 为各栏目建立一个单独的IMAGE目录放置图象文件 D. 在每个目录下建立一个IMAGE目录放置图象文件 5. 以下有关页面布局的说法正确的是 ( D ) A. 分辨率越高，可供使用的页面尺寸越大 B. 网页布局与平面设计一样，不受页面大小的影响 C. 页眉和页脚中只能出现文本，不能出现图形 D. 页面布局通常是通过手工设计的，目前还没有相应的电脑软件完成这一工作 6. 以下关于HTML文档的说法正确的一项是 ( A ) A. 与这两个标记合起来说明在它们之间的文本表示两个HTML 文本 B. HTML文档是一个可执行的文档 C. HTML文档只是一种简单的ASCII码文本 D. HTML文档的结束标记可以省略不写 7. 正确描述创建一个一级标题居中的句法是 ( D ) A. Heading Text B.

Heading Text

C. Heading Text

网页设计与制作实例教程

网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1．A 2．B 3．C 4．C 5．A 二、判断题 1．√2．×3．√4．×5．√ 三、问答题 略 第2章网页规划设计 一、选择题 1．D 2．A 3．C 4．A 5．C 二、判断题 1．×2．×3．×4．√5．√ 三、问答题 1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。） 2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容 3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略） 第3章初识网页制作软件 一、选择题 1．C 2．C 3．B

二、填空题 1．代码、拆分、设计2．文件、资源、规则3．超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A 二、判断题 1．√2．√3．×4．√5．√6．√7．√8．√9．×10．√三、操作题 略 第5章设置网页超级链接 一、选择题 1．D 2．D 3．A 4．D 5． C 二、判断题 1．×2．×3．×4．√5．× 第6章使用CSS样式美化网页 一、选择题 1．B 2．C 3．C 4．B 5．A 6．D 7．D 8．D 9．B 10．C 11．A 12．A 13．C 14．D 15．D 16．A 17．A 18．B 19．D 20．D 二、简答题 1．×2．×3．×4．×5．×6．×7．√8．×9．√10．√11．×12．×13．×14．√15．√16．√ 第7章规划布局网页 一、选择题 1．B 2．A 3．B 4．B 5．D 二、简答题

制作包含列表和表格的网页

实验五：制作包含列表和表格的网页 一、实验任务： 1、掌握正确的在网页中添加项目列表和表格，合理设置表格属性，能够根据网页版面布局的需要，合理运用表格进行布局。 2、完成【任务5-4】。 3、根据任务5-4的制作，观察和说明表格边框、单元格边距、单元格间距之间的差别。 二、实验步骤： 1.创建站点单元5，并创建文件夹“task05-4”在该文件夹中创建子文件夹“CSS”。在文件夹“task05-4”中创建网页文档0504.html。 2.通过表格对话框插入表格1，在表格对话框设置行数、列数、表格宽度、宽度的像素、边框粗细的大小等。

代码示图 3.设置表格1的属性。

4.设置表格1单元格的背景图片。 5.设置表格1单元格的水平对齐方式为“居中对齐”和垂直方式为“居中”，并选不换行复选框。在设置高和像素。 6.在表格1的第一行和第二行输入所需的文本。 7.将第二行的文字设置为滚动效果。 8.插入一个两行三列表格2，并设置宽、边框、间距、边距等属性。

9.将表格二的对齐方式设置为居中对齐。 10.将表格二的第一列宽度设置为“405像素”、第二列宽度设置为“360像素”、第三列宽度设置为“115像素”。

11.将表格二第一行的高设置为“28像素”。 12.将表格二的第一列的两个表格合并，将表格二第三列的两个表格合并。 13.在表格二的第一列的单元格中插入图像“001.jpg”。 14.设置所插入的图像的属性：“宽”为“405”、“高”为“300”、“替换”文本为“千岛湖全貌”。 15.设置表格二第二列上方单元格的背景图像、水平对齐方式、垂直对齐方式、输入文本及文字大小、颜色、字形、样式。

Fireworks-网页设计综合实例

Fireworks-网页设计综合实例

Fireworks 网页设计综合实例 在本文中我们将帮助您亲身体验Fireworks 在网页创作中的强大功能，我们通过一个网站页面的设计过程，为您详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。通过解决您所遇到的每一个具体的任务，您将对Fireworks的主要功能有一个统一的全局性的了解，同时为您在设计中如何利用Fireworks 提供一个清晰的思路。下图是这个教程完成后的外观： 我们将根据这一个典型网站其中一个页面设计流程，使您逐步学习到以下内容： 1、导入并编辑位图图像。 2、自动任务处理

3、创造矢量图形 4、创建文字 5、创建按钮 6、创建导航条 7、设定按钮属性 8、建立切片 9、创建拖拽翻转效果 10、创建弹出菜单 11、创建变形动画 12、优化图像 13、输出HTML文件到Dreamweaver 14、在Dreamweaver中进行往返表格编辑 一、设计前准备 1、网站介绍： 在教程介绍之前首先让我们来看一下我们将要完成的主要任务。这是一个服饰公司的企业网站设计，公司主要以男式服饰为主，同时也兼顾部分女士服饰。网站的主要任务是帮助浏览者了解公司的基本概况和产品信息，并作为公司的

一个展示窗口，向参观者展示企业的形象及产品系列。根据业主的要求，网站包含了企业概况、企业人才、产品展示、公司荣誉以及联系方式。我们将以此得到网站的导航结构。 2、设计指导思想： 本网站设计的指导思想是在网络上营造一 个优雅、高贵、宁静的氛围，为了体现这一主题，设计者将纹理、景深、光影、基调与有形的模特照片和静态的文字结合起来，更多的使用直线、坚硬的边缘、暗的色调来组成网站界面。页面中以较大面积的男性模特图片突出男式服饰这一 主题，以穿插的直线段体现一种服装纹理的感觉。公司的名称则以一种柔软光滑的粗倩体来表现，以打破整个页面的坚硬感，同时以白色突出企业名称，达到非常亮眼的感觉。 3、页面结构： 整个网站采用统一的结构，分为上下两个部分，上面为网站的导航条，下面左边以不同的男式服饰图片及文字标题表示各页主题。右边为内容区，以深色带条纹的图片作为背景。

html设置表格和页面一样大

竭诚为您提供优质文档/双击可除html设置表格和页面一样大 篇一：html表格的设置 宜宾学院教案 _网页设计与制作_课程 -1– -2– -3– 篇二：html创建网页表格的基本原则和方法 html创建网页表格的基本原则和方法 将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。html具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的修饰，从而使网页更加生动活泼。html表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。表格在网页设计中的地位非常重要，可以说如果您表格用不好的话，就不可能设计出出色的网页。大多数

初学者一开始就接触表格，对表格都有一定的了解，但是要实现真正细致甚至强大的功能，仔细理解table的代码结构至关重要！我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题，了解和掌握了这些内容，你将发现，table原来是这样的亲切易用! 一、创建基本的表格 一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th＞和＜td＞定义。＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜t h＞组成的表格。表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。 在讲解之前，我们先来看看表格的基本构造。下图是一个3行3列的表格。 这里面有两个概念要弄明白：表格与单元格。他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。前面已经说过表格的最基本标记为＜table＞、＜

网页设计与制作简答题

简答题 1.图象处理工具主要有那几类应用？ 答：使用图像处理工具可对图像进行编辑修饰`优化`图形文件格式转换等处理。 包括：1图形编辑。图形编辑包括制作页面中的字体`制作3D效果，建立透明GIF文件，插入背景阴影，处理字体`箭头`徽标等页面元素。并能对图像进行剪切`移动和旋转处理。 图像修饰。 图像优化。 2.什么是Web服务器？Web浏览器的作用是什么？简述浏览器打开文件的步骤. 答：Web服务器是是用于存储WWW文件并响应处理客户机请求的计算机.浏览器的作用在于 解释并显示超文本档，包括指向其他文档的引用（或指针），与其他HTTP服务器上非常相似，这些指针也称链接。从一个超文本页上选择一个链接时，浏览器将请求送该回到新的服 务器，然后在客户端上显示另一个充满链接的页面。 打开一个Web文件的基本步骤如下： 1）.在浏览器中指定要访问的Web文件的URL。 2）.浏览器将请求发送给服务器。 3）.服务器将请求转递给指定的URL处的服务器。 4）.该服务器将文件送回到服务器上。 5）.服务器将文件送回到客户端浏览器上。 6）.浏览器将文件显示在计算机屏幕上。 3.网站设计过程中的最重要原则是什么？为什么？ 答：网站设计过程中的最重要原则是创意。虽然一个网站的主要目的是传递给人们信息，但是在传递信息的同时还要把他的文化同样也传递给获取这些信息的人们，比如众所周知的2 63首都在线.新浪网.网易.ChinaRen等网站的页面都是非常朴实的，没有太多的花逍的效 果，运用普通的制作软件就能够制作完成，但它们的页面只需要看一眼见就能够让人马上识 别他是谁，这是因为他们不仅向访问者传达了新闻等网站的信息，更传递了自己的独特风格。 网站的设计基本上是按照一定的步骤进行的，不同的站点开发人员有他们不同的习惯， 对于网页设计都有自己独特的见解。但一般来说有些原则是共同的，有些主要概念也是共同的：仅仅会输入文本，制作超级链接和排列图片，不是真正意义上的网页制作，或者说还不 能称为网页创作。因为网页制作最重要的原则是创意。这个原则也可以看成是网页制作的根本，没有创意的网站不能算一个成功的网站，而这个网站也不能长期存在。 因此，创意是最重要的原则。 4.什么是站点的风格？典型的商业站点具有那些风格特征？ 答：站点的风格是指整个网站所采用的结构布局.色调.文字.标志.图案等要素带给浏览者的 关于该网站的印象。 商业公司站点由于其目的与个人站点以及非营利性的组织完全不一样，因此他的站点风 格也与其他两类站点的风格完全不一样。典型的商业站点的风格特征主要体现在以下几个方 面： 1）.公司的徽标或商标应出现在页面的最上方，尽可能作到色彩醒目，同时占用版面小。 2）.可以采用主题图形产品广告来突出公司形象和风格。主题图形或产品广告应精心设计， 给浏览者以良好印象。 3）.主题栏目一般采用图文并茂的超级链接实现，要考虑到主要栏目图片.文字之间的色彩

网页设计与制作简答题

1、简述Web浏览器打开一个Web文件的工作过程。 2、描述网页设计的一般步骤。 3、简述网页设计的基本准则。 4、简述规划网站目录结构时应遵循的原则。 5、描述版面布局的步骤。 6、什么是“HTML”？HTML“标记”又是什么？ 7、简述“HTML”文档的基本结构。 8、简述以下一段HTML代码中各对标记的作用。 〈html〉 〈head〉 〈title〉网页设计〈/title〉 〈/head〉 〈body〉 〈h2〉北国风光〈/h2〉 〈/body〉 〈/html〉 9、如何进行本地网页的测试？ 10、网站管理和维护的主要工作有哪些？ 11、什么是Web浏览器? 12、简述网页设计中所需要注意的通用规则。 13、简述DHTML的概念及主要组成。 14、简述使用FrontPage在网页中插入一个日历的过程。 15、简述色彩的三原色的概念及每种颜色的调配范围。 16、为什么要采用DHTML技术？客户端动态网页技术有哪些优点？ 17、网站栏目划分的原则是什么？ 18、XML与HTML相比的主要优点有哪些？

19、请简述一下网站的设计流程？ 20、简述FireWorks的特点。 21、网页制作的步骤是什么？ 22、怎样让链接没有下划线? 23、怎样在网页中加入多媒体播放? 24、怎样让网页的背景图像不滚动? 25、怎样定义网页的关键字? 26、什么是Web浏览器? 27、网页上所说的重心平衡指的是什么? 28、什么是DHTML？DHTML技术主要由哪几部分组成？ 29、在CSS中，对字体的的设置所涉及到的属性有哪些？ 30、用HTML语言回答一个HTML文件应具有的基本结构。 31、比较GIF格式和JPG格式的原理与各自的适用范围。 32、为什么要采用DHTML技术?客户端动态网页技术有哪些优点? 33、简述站点的概念以及虚拟目录和实际目录之间的对应关系。 34、什么是Web安全色? 35、简述虚拟主机的概念和功能。 36、简述Dreamweaver的工作窗口由哪些部分组成。 37、在Dreamweaver中，插入图像的方法有哪些？ 38、在Fireworks中，如何使文字附加于路径？ 39、在Flash MX中可以创建哪些类型的元件？各元件的含义是什么？ 40、HTML中
标记和

标记有何区别?

表格制作一般规范

表格制作一般规范 页面设臵：无论是表格还是文字材料，页面设臵中的页边距，必须是左大于右，这个需要重点注意。本表格中的页面设臵，左是2.9厘米，右是2.1厘米，上是3，下是2.5，但这个2.9、2.1、3、2.5并不是固定标准，不是死数，在实际操作中，要根据表格或文字材料所含内容多少进行灵活设臵，怎么合适、怎么好看怎么弄，但有一点，就是左页边距一定要大于右页边距。 表格标题：标题内容要表述完整、到位。标题字体采用华文中宋，这个不但是表格，文字材料也强烈建议使用华文中宋作为标题字体。大小为二号，加粗居中。标题下面的时间，写成2011年9月16日这样的格式。 序号：任何表格一定不要忘了序号这一栏，平时很多单位都没有这个习惯，咱的领导很在意这个。另外，序号这一栏尽量压缩，不要太宽，有必要的时候，可以将序号栏下面的1、2、3、4的字体与后边栏目里的字体区分开来，使用不同设臵。例如鱼粉这份，序号下面的1、2、3、4就是宋体，后面的都是仿宋。 表格中小标题：字号要比表格内容稍大半号，比如想标题使用的4号，表格下文中就用小四。字体不能与下列表格内容字体一致，例如选用黑体，让人一目了然。有单位的必须在标题下边小括号内加上单位，比如元、万元。 表格内容：以鱼粉这份为例，企业名称最好尽量详细，故障

原因表述到位，报告时间、维修时间统一格式---月、日。备注中 的内容也必须表述到位，所作的一切都是为了让领导看了不会产 生疑问。 文字材料一般规范 页面设臵：跟表格一样，左边的页边距设臵大于右边，我一般都是左边2.9，右边2.1，至于上、下，上不能顶太高，下不能落太矮，不要一篇材料打出来，满满当当满篇都是，一看心里溜满的。 标题：华文中宋、二号加粗、居中设臵。标题与正文之间空一行。 正文：正文三号仿宋，每段一开始的小题目换成另类字体加粗，例如材料是三号仿宋，每段的题目就是三号黑体加粗。以前我跟着区里学，正文三号仿宋之后也加粗，确实是比较好看，但目前刘局长不大喜欢这种形式，而且，如果一篇材料过长的话，正文加粗，每段题目也加粗，区分的不明显。 行间距、字符间距：都在格式内选择，字符间距在字体内，一般选择标准，重点是行间距，行距在段落中选择，强烈建议在30磅-33磅中间选择，再小了满篇材料打出来一看，就显得太满。 页码：一般的文字材料，每页都加页码，如果是局里正式下发红头文，首页不显示页码。页码字号可以双击后更改，不要太小。

网页设计与制作试卷试题(附答案)

“双语”教育2012-2013第2学期 《网页设计与制作》 年级专业：学号姓名： 一、单选题（共45小题，每小题1分，共45分） 1、在网站设计中所有的站点结构都可以归结为【 B 】 A、两级结构 B、三级结构 C、四级结构 D、多级结构 2、在客户端网页脚本语言中最为通用的是【 A 】 A、javascript B、VB C、Perl D、ASP 3、所学网布局的方法是【 E 】 A、表格 B、布局 C、层 D、DIV E、都是 4、在HTML中，标记的Size属性最大取值可以是【 C 】 A、5 B、6 C、7 D、8 5、所学网页页面构成有【 E 】 A、顶部（标题） B、底部（注释） C、正文 D、导航 E、都有 6、用户登陆页面不可能用到的是【 B 】 A、服务器行为检查新用户 B、绑定字段 C、用户身份验证 D、建立数据库 7、成绩录入系统不能用到的【 C 】 A、建立数据库 B、绑定插入记录集 C、检查表单 D、重复区域 8、非彩色所具有的属性为【 C 】 A、色相 B、饱和度 C、明度 D、纯度 9、下面说法错误的是【 D 】 A、规划目录结构时，应该在每个主目录下都建立独立的images目录

B、在制作站点时应突出主题色 C、人们通常所说的颜色，其实指的就是色相 D、为了使站点目录明确，应该采用中文目录 10、目前在Internet上应用最为广泛的服务是【B 】 A、FTP服务 B、WWW服务 C、Telnet服务 D、Gopher服务 11、Web安全色所能够显示的颜色种类为【C 】 A、4种 B、16种 C、216种 D、256种 12、为了标识一个HTML文件应该使用的HTML标记是【C 】 A、 B、 C、 D、

13、框架结构页面正确的说法是【 D 】 A、点击左边导航显示右边 B、只能链接图片 C、框架页面为新建常规页面 D、插入可编辑区域可以生成模板 14、显示页面设计时不能用到的是【 D 】 A、建立数据库 B、设置数据源 C、连接数据库 D、更新记录集 15、对远程服务器上的文件进行维护时，通常采用的手段是【B 】 A、POP3 B、FTP C、SMTP D、Gopher 16、下列Web服务器上的目录权限级别中，最安全的权限级别是【A 】 A、读取 B、执行 C、脚本 D、写入 17、Internet上使用的最重要的两个协议是【B 】 A、TCP和Telnet B、TCP和IP C、TCP和SMTP D、IP和Telnet 18、网页的特征是【 A 】 A、HTML文档的基本特征——超文本 B、标识语言，网页中不能没有标记（Tag） C、网页提供了一些措施以防在网上冲浪的过程中迷失方向 D、网页实现了对原文档信息的无限补充或扩展 19、与上网无关 ．．的协议是【 C 】 A、HTTP B、SMTP C、SOKET D、POP3 20、设置字体大小的代码是【D 】

制作网站——表格布局网页

制作网站——表格布局网页（第3-4课时） 教学目标： 1．知识与技能 （1）了解网页设计中表格的作用。 （2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能 够在单元格中正确插入文字和图片。 （3）能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。 2．过程与方法 （1）掌握软件学习中的对比学习法，培养学生迁移学习的能力。 （2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多 样性，培养学生的发散思维能力。 （3）通过自主探究，使学生掌握软件的使用规则，由摸索、探究性学习到形成性学习，培 养学生学会学习，驾御学习的能力。 3．情感态度与价值观 （1）通过对比学习使学生体验软件学习的一般方法及规律，提高学生自主学习信息技术的 能力。 （2）通过运用表格布局网页对象活动（各人根据网站主题，设计网页），进一步掌握各种 不同对象的属性设置方法和规律，体验创造的快乐。 （3）通过“动物——人类的朋友”表格页的设计与制作，再次激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。 教学重点、难点： 1．教学重点： （1）了解表格在网页设计中的重要作用和功能。 （2）掌握插入、编辑表格的方法及表格的属性设置方法。 （3）掌握单元格的修饰与属性设置。 2．教学难点： 表格的嵌套设计在网页设计中的应用。 教学方法： 对比教学法、探究学习法、模仿学习法。 教学准备： 各自制作的站点文件夹，整理、归类相关素材并按要求摆放。 教学过程： 1．复习 以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入，学 生认真回顾，回答教师提问。为本节课教学做一定铺垫。 2．引入 （1）观看两个页面并进行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定规律；另一个页面凌乱，图文混杂，摆放杂乱。你更喜欢怎样的页面布局？ 提出问题：有什么办法可以达到第一个页面的效果？ （2）观察第三个页面，内容与第一个页面相同，显现页面的表格边框。 学生讨论，交流，回顾Word中学习过的表格，明白表格在FrontPage中的作用。

网页设计与制作试卷(含答案)

网页设计与制作试卷(含答案)

“双语”教育2012-2013第2学期 《网页设计与制作》 年级专业：学号姓名： 题号一二三四五六总分 得分 一、单选题（共45小题，每小题1分，共45分） 1、在网站设计中所有的站点结构都可以归结为【 B 】 A、两级结构 B、三级结构 C、四级结构 D、多级结构 2、在客户端网页脚本语言中最为通用的是【 A 】 A、javascript B、VB C、Perl D、ASP 3、所学网布局的方法是【 E 】 A、表格 B、布局 C、层 D、DIV E、都是 4、在HTML中，标记的Size属性最大取值可以是【 C 】 A、5 B、6 C、7 D、8 5、所学网页页面构成有【 E 】 A、顶部（标题） B、底部（注释） C、正文 D、导航 E、都有 6、用户登陆页面不可能用到的是【 B 】 A、服务器行为检查新用户 B、绑定字段 C、用户身份验证 D、建立数据库 7、成绩录入系统不能用到的【 C 】 A、建立数据库 B、绑定插入记录集 C、检查表单 D、重复区域 8、非彩色所具有的属性为【 C 】 A、色相 B、饱和度 C、明度 D、纯度 9、下面说法错误的是【 D 】 A、规划目录结构时，应该在每个主目录下都建立独立的images目录

B、在制作站点时应突出主题色 C、人们通常所说的颜色，其实指的就是色相 D、为了使站点目录明确，应该采用中文目录 10、目前在Internet上应用最为广泛的服务是【B 】 A、FTP服务 B、WWW服务 C、Telnet服务 D、Gopher服务 11、Web安全色所能够显示的颜色种类为【C 】 A、4种 B、16种 C、216种 D、256种 12、为了标识一个HTML文件应该使用的HTML标记是【C 】 A、 B、 C、 D、

13、框架结构页面正确的说法是【 D 】 A、点击左边导航显示右边 B、只能链接图片 C、框架页面为新建常规页面 D、插入可编辑区域可以生成模板 14、显示页面设计时不能用到的是【 D 】 A、建立数据库 B、设置数据源 C、连接数据库 D、更新记录集 15、对远程服务器上的文件进行维护时，通常采用的手段是【B 】 A、POP3 B、FTP C、SMTP D、Gopher 16、下列Web服务器上的目录权限级别中，最安全的权限级别是【A 】 A、读取 B、执行 C、脚本 D、写入 17、Internet上使用的最重要的两个协议是【B 】 A、TCP和Telnet B、TCP和IP C、TCP和SMTP D、IP和Telnet 18、网页的特征是【 A 】 A、HTML文档的基本特征——超文本 B、标识语言，网页中不能没有标记（Tag） C、网页提供了一些措施以防在网上冲浪的过程中迷失方向 D、网页实现了对原文档信息的无限补充或扩展 19、与上网无关 ．．的协议是【 C 】 A、HTTP B、SMTP C、SOKET D、POP3 20、设置字体大小的代码是【D 】

网页设计与制作期末考试复习题.doc

《网页设计与制作》期末考试复习题 2008春学期 一、名词解释 1．互联网 答：互联网是目前世界上最大的计算机通信网络，遍布全球，将世界上各种规模的计算机网络连接成一个整体，从而实现信息交流与共享，主要提供了WEB、BBS、TELNET、FTP等服务。 2．网络协议 答：是一系列通信规则的总称，分为硬件协议和软件协议，主要包括用户数据与控制信息的结构和格式，需要发出的控制信息以及相应要完成的操作与响应，对事件实现顺序的详细说明等三部分内容。 3．TCP/IP 答：TCP即传输控制协议，工作在OSI模型中的传输层，用于建立和校验数据连接，而IP即网际协议，工作在OSI模型中的网络层，用于处理网络上一个主机到别一个主机的数据报路由选择。 4．IP地址 答：通过IP层协议为互联网中的每一个网络和每一台主机所分配的惟一通信地址，它由32位二进制数表示，每8位为一组，以圆点“.”分隔，主要分为ABCDE五类IP地址。 5．DNS 答：DNS全称为Domain Name System，它实质上是一个分布式数据库，包括提出数据的标准格式，数据库查询方法，以及本地更新数据的标准方法。 6．WWW 答：万维网（World Wide Web，www）又称全球信息网，简称WEB，是目前互联网上最流行的交互式信息查询服务。 7．网页 答：网页即是基于超文本和超媒体的信息载体，它的核心是HTML。 8．WEB浏览器 答：WEB浏览器是指一个运行在用户计算机上的程序，它负责下载、显示网页，因此称为www客户程序。 9．重心平衡 答：重心平衡即页面重心反映网页上各种元素分布的协调程序，协调方式有对称布局与非对称布局两种形式。 10．WEB安全色 答：WEB安全色指浏览器所能识别的00、33、66、99、cc、ff 六组数据任意选3种组合成的216种颜色。 11．抖动 答：抖动指在WEB显示时，采用WEB安全色去替代予之相近网页元素颜色，而产生的颜色的偏差。 12．站点风格

Fireworks网页设计综合实例

Fireworks网页设计综合实例1 在本文中我们将帮助您亲身体验Fireworks在网页创作中的强大功能，我们通过一个网站页面的设计过程，为您详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。通过解决您所遇到的每一个具体的任务，您将对Fireworks的主要功能有一个统一的全局性的了解，同时为您在设计中如何利用Firework s提供一个清晰的思路。最终完成的实际页面请看这里。下图是这个教程完成后的外观： 我们将根据这一个典型网站其中一个页面设计流程，使您逐步学习到以下内容： 1、导入并编辑位图图像。 2、自动任务处理 3、创造矢量图形 4、创建文字 5、创建按钮 6、创建导航条 7、设定按钮属性 8、建立切片 9、创建拖拽翻转效果 10、创建弹出菜单 11、创建变形动画 12、优化图像 13、输出HTML文件到Dreamweaver 14、在Dreamweaver中进行往返表格编辑 一、设计前准备 1、网站介绍： 在教程介绍之前首先让我们来看一下我们将要完成的主要任务。这是一个服饰公司的企业网站设计，公司主要以男式服饰为主，同时也兼顾部分女士服饰。网站的主要任务是帮助浏览者了解公司的基本概况和产品信息，并作为公司的一个展示窗口，向参观者展示企业的形象及产品系列。根据业主的要求，网站包含了企业概况、企业人才、产品展示、公司荣誉以及联系方式。我们将以此得到网站的导航结构。

2、设计指导思想： 本网站设计的指导思想是在网络上营造一个优雅、高贵、宁静的氛围，为了体现这一主题，设计者将纹理、景深、光影、基调与有形的模特照片和静态的文字结合起来，更多的使用直线、坚硬的边缘、暗的色调来组成网站界面。页面中以较大面积的男性模特图片突出男式服饰这一主题，以穿插的直线段体现一种服装纹理的感觉。公司的名称则以一种柔软光滑的粗倩体来表现，以打破整个页面的坚硬感，同时以白色突出企业名称，达到非常亮眼的感觉。 3、页面结构： 整个网站采用统一的结构，分为上下两个部分，上面为网站的导航条，下面左边以不同的男式服饰图片及文字标题表示各页主题。右边为内容区，以深色带条纹的图片作为背景。 下面我们将根据上述设计分析，分不同的部分为您介绍制作过程。在新建一个文件后，我们需要对我们的工作环境进行简单的设定，以符合我们的任务要求。首先需要设定工作区的面积及背景颜色，打开Modify>Ca nvas Size针对常见的800x600分辨率，我们设定工作区的长为776这可以根据需要设定，但最好不要超过778，高为515根据实际内容确定，再执行Modify>Canvas Color设定背景色为黑色。再打开View>Grid>Edit Grid 对话框，设定水平方向网格间距为10像素，垂直方向为5像素，并将网格颜色设为暗灰色以不影响观察页面，打开网格显示和网格捕捉。如下图所示： Fireworks网页设计综合实例2 一、导入并编辑位图图像。 Fireworks4带有完善的位图创建、修改和处理功能，我们可以导入外部位图文件并对它进行编辑，可以修改和删除位图中的颜色，可以向对矢量图一样增加效果。我们的工作将从层面板开始，新建一个文件后，默认的只有两个图层Web层和Layer1层，双击Layer1层，将层名改为“背景层”。如下图所示：

用表格做网页

用表格做网页，表格在网页制作中有着举足轻重的地位，很多网站的页面都是以表格为框架制作的，这是因为表格在内容的组织、页面中文本和图形的位置控制方面都有很强的功能，灵活、熟练地使用表格，会使你在网页制作中如虎添翼。 插入第一个表格 我们看一下这个网页，虽然看起来很复杂，但主要是利用表格制作的。去掉文字和图形，可以看到其表格框架为下面这个样子。 下面我们就利用表格制作这个网页。启动Dreamweaver后，自动产生一个空文档。我们先来定义网页尺寸，不同的分辨率所查看的网页最终结果是不一样的，为了照顾更多的上网者，我们设置640×480分辨率（图3），单击状态栏上的窗口尺寸箭头，在弹出的列表中选择“600×300 （640×480），Maximized”，窗口就小了，做出的网页在640×480分辨率下会显示正常，编辑区大小为600×300，我们编辑的网页宽度就定为600，高度可以大些，在浏览器中显示时会有竖直滚动条。设置页面尺寸我们看一下网页的布局，共有三个主要表格，最上面的表格放置logo图标和banner广告条，中间的表格为主要栏目切换条，最下面的表格为网页正文。根据网页布局，我们先来制作最上面的表格。单击“对象面板”中的插入表格图标，弹出“Insert Table”对话框。设置行数（Rows）为1，列数（Columns）为2，表格宽度（Width）为590Pixels，表格线宽度（Border）为0，另两个选项“Cell Padding”表示表格内文本与表格线的距离，“Cell Spacing”表示表格单元格之间的距离，这里我们不做设置，单击“OK”，表格就插进来了。 “插入表格”对话框 将光标定位在表格的第一个单元格内，可以看到状态栏左侧的标签选择器处显示为 “{body}{table}{tr}{td}”，其中table表示表格，tr表示表格中的行，td表示单元格，现在td被加粗显示，说明光标处在单元格内。单击一下{table}，标签选择器处显示为“{body}{table}{tr}{td}”（图5），再看编辑区内的表格，表格周围为一圈黑线，表示表格被选中了，四周还有几个黑色的小方块，是表格拖放手柄，可以用来改变表格的大小。用标签选择器选择表格选中表格后，我们查看一下属性面板，可以看到刚刚设置的一些表格属性，行数（Rows）为1，列数（Cols）为2，表格宽度（W）为590Pixels。以后要改变表格的属性，就可以在属性面板中进行了。 表格的属性面板 按Ctrl+S，将此文件保存在D盘myweb文件夹下。 接下来我们在表格中插入图形。在第一个单元格内单击，然后按下Ctrl+Alt+I键，弹出插入图片对话框，选择事先做好的logo图片，单击“Select”，图片就插到第一个单元格中了。

网页设计与制作简答题

1、简述Web 浏览器打开一个Web 文件的工作过程。 2、描述网页设计的一般步骤。 3、简述网页设计的基本准则。 4、简述规划网站目录结构时应遵循的原则。 5、描述版面布局的步骤。 6、什么是“ HTML”？HTML “标记”又是什么？ 7、简述“ HTML”文档的基本结构。 &简述以下一段HTML代码中各对标记的作用。 〈html 〉 〈head 〉 〈title 〉网页设计〈/title 〉 〈/head 〉 〈body 〉 〈h2 〉北国风光〈/h2 〉 〈/body 〉 〈/html 〉 9、如何进行本地网页的测试？ 10、网站管理和维护的主要工作有哪些？ 11、什么是Web 浏览器? 12、简述网页设计中所需要注意的通用规则。 13、简述DHTML的概念及主要组成。 14、简述使用FrontPage 在网页中插入一个日历的过程。 15、简述色彩的三原色的概念及每种颜色的调配范围。 16、为什么要采用DHTML技术？客户端动态网页技术有哪些优点? 17、网站栏目划分的原则是什么？ 18、XML与HTML相比的主要优点有哪些?

请简述一下网站的设计流程？ 简述 FireWorks 的特点。 网页制作的步骤是什么？ 怎样让链接没有下划线 ? 怎样在网页中加 入多媒体播放 ? 怎样让网页的背景图像不滚动 ? 怎样定义网页的关键字 ? 什么是 Web 浏览器 ? 网页上所说的重心平衡指的是什么 ? 什么是 DHTML ？DHTML 技术主要由哪几部分组成？ 在css 中，对字体的的设置所涉及到的属性有哪些？ 用 HTML 语言回答一个 HTML 文件应具有的基本结构。 比较GIF 格式和JPG 格式的原理与各自的适用范围。 为什么要采用 DHTML 技术？客户端动态网页技术有哪些优点 简述站点的概念以及虚拟目录和实际目录之间的对应关系。 什么是 Web 安全色 ? 简述虚拟主机的概念和功能。 简述 Dreamweaver 的工作窗口由哪些部分组成。 在 Dreamweaver 中，插入图像的方法有哪些？ 在 Fireworks 中，如何使文字附加于路径？ 在Flash MX 中可以创建哪些类型的元件？各元件的含义是什么? HTML 中＜BR=#记和＜P ＞标记有何区别 19、 20、 21、 22、 23、 24、 25、 26、 27、 28、 29、 30、 31、 32、 33、 34、 35、 36、 37、 38、 39、 40、

Word中制作表格时四种方法让Word表格版面更美观

Word中制作表格时，往往会因为一两个字或一行（列）的增加挤压了单元格空间，而使表格无法按要求排版，让许多新手朋友急得抓耳挠腮。不用急，看看以下这些调整方法： 1.让直接“拖拽”更精确 也许本列只需要再增加1、2mm就不至于使表格多出一行，其他列也许能再挤一挤，而这个数目已是最大限度了，可是用鼠标拖动表格线时，总是无法达到理想的位置…… 在“视图”的“工具栏”中调出“绘图”，在“绘图”菜单中打开“绘图网格”对话框，把网格设置中的“水平间距”和“垂直间距”设置到最小（0.01字符和0.01行），如图所示，如果常用此项最好设置成默认值。再拖动表格线试试，已经服服帖帖任你摆布了。 2.字体缩放 在格式工具栏里有字体缩放按钮，平时可能不常用它，就是A头上长着两个箭头的那个。它提供的“百分比”可以让字体肥起来，也可以瘦下去，应用中我们多数是要它苗条。虽然苗条了，它的字号却没有变，这样即使有字号要求也不用怕了。 3.不改字的容颜缩小字间距 一般情况下字间距默认为“标准”，对于表格中的列无法再拓宽，而这一列又需要为一两个字挤出空间时，把原来的“标准”改为“紧缩”，也许可以挤进去一两个字。至于使用的字号能紧缩多少，与字号的大小有关系。如5号字在紧缩1磅时，文字已经相互交错了，0.5磅才能保持字体的完整，而3号字紧缩1磅仍能保持字体完整。 4.行距调整能让出不少空间

一般情况下，如果想在某个页面内再加一行（列）时，如果这个页面已满，可以通过拖动（向上或向左）表格右下角的斜双向箭头的方法挤出一行（列）的地儿。但是，这种方法受文档网格的限制，在网格固定的情况下，可能会无法再挤压出空间。这时候就可以通过取消网格限制（在页面设置对话框中，找到“文档网络”标签，选用“无网络”）来调整行间距以缩小表格所占用的面积，为加上一行（列）找出了空间。只有取消了网络限制，行距的调整才能体现出明显效果（有时候，因网格的限制，1.5倍行距和2倍行距没有区别）。另外，行距不光是单倍、1.5倍、2倍，可以通过“多倍行距”在“设置值”中输入参数，如：0.8、1.1等。 四种方法比较而言，最后一种办法挤出的空间最多，为了达到满意效果，我们可以把这几种方法结合起来使用。

网页设计与制作期末试题及答案

网页设计与制作模拟试题（一） 一、单项选择题(每空1分，共10分) 1.目前在Internet上应用最为广泛的服务是( B )。 A.FTP服务 B.WWW服务 C.Telnet服 务 D.Gopher服务 2.在域名系统中，域名采用( C )。 A.树型命名机制 B.星型命名机制 C.层次型命名机制 D.网状型命名机制 3.HTTP协议是一种(D )协议。 A．文件传输协议 B．远程登录协议 C．邮件协议 D．超文本传输协议 4.HTML语言中的转行标记是(B )。 A. B.
C. D.<p > 5.在HTML中，标题字体标记<hx>中x的最大取值是( C )。 A.4 B.5 C.6 D.7</p><p>6.以下不能用来定义表格内容的标记为( A )。 A.<br> B.<tr> C.<th> D.<td> 7.下面不是组成一个HTML文件基本结构标记的是( C )。 A.<HTML></HTML> B.<HEAD></HEAD> C.<FORM></FORM> D.<BODY></BODY> 8. 加入一条水平线的HTML代码是( A )。 A. <hr> B. <img src="name" border=?> C. <img src="name" align=?> D. <img src="name"> 9.在HTML中，标记<pre>的作用是( B )。 A.标题标记 B.预排版标记 C.转行标记 D.文字效果标记 10.要创建一个Email地址的链接，下面正确的句法是 ( A )。 A. <a href=“mailto:mirror@https://www.360docs.net/doc/cc18000115.html,”>与我联系</a> B. <a href=“files:mirror@https://www.360docs.net/doc/cc18000115.html,”>与我联系</a> C. <a href=“http:mirror@https://www.360docs.net/doc/cc18000115.html,”>与我联系</a> D. <a href=“usenet:mirror@https://www.360docs.net/doc/cc18000115.html,”>与我联系</a> 11. 客户/服务器系统的最大特点是客户机和服务器( D ) A. 必须运行在同一台机器上 B. 必须运行在同一个网络上 C. 必须运行在不同的计算机上 D. 不必运行在同一计算机上</p><h2>怎样制作表格</h2><p>怎样制作表格 制作表格建建议用Excel，很方便的。 1.新建一个excel文件。 2.在草纸上画好草稿，将需要数据的表格样式及列数和行数确定。比如我需要建立一个五行六列的表格，最上面是标题行。 3.在新建excel中，用鼠标选中需要的表格行数列数，然后点右键，“设置单元格格式”——“边框”，在“预置”中根据需要选择“外边框”、“内部”边框。 4.根据需要加边框。如果是标题处，可以取消外边框，合并横向或者纵向的表格。方法也是先选中需要设置的表格（第一行），然后右键点击“设置单元格格式”——“对齐”，然后选中“合并单元格”。</p><p>5.根据标题长度、宽度调整一下标题行。如我的标题是“XXXXXX公司表”题目比较长，将标题行拉宽，设置“自动换行”方法如上图，然后根据需要左右缩进，调整居中，然后设置字体大小等。 看调整前的图表： 根据字体调整表，如图：</p><p>6.其他空格内容填好后，同样根据内容调整一下就可以。 7.如果需要打印，就要设置页面了。我们这个表一看就是横向的，所以选择“文件”--“页面设置”，选择“横向”，然后打印预览一下。如果要求居中打印但是表格处于页面左上角，就调整一下页边距。调整好位置后打印即可。</p><p>8.如果需要将此表插入到word文档以便其他使用，也很简单。先将刚做好的Excel表格保存为一个文件名《设备表》到桌面上。将此页的页面设置成横向，否则表格会显示不全的。在Word文档中需要插入的地方，点击一下鼠标，然后选择上面“插入”---“对象”——“由文件创建”，然后找到刚刚保存的《设备表》，插入，确定，然后就插入到Word中了。效果图如下：</p></div> <div class="rtopicdocs"> <div class="coltitle">相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="17399329"><a href="/topic/17399329/" target="_blank">网页表格制作</a></li> <li id="5121014"><a href="/topic/5121014/" target="_blank">网页设计与制作简答</a></li> <li id="11331489"><a href="/topic/11331489/" target="_blank">网页设计综合实例</a></li> <li id="16630042"><a href="/topic/16630042/" target="_blank">制作表格页面</a></li> </ul> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/8011178409.html" target="_blank">制作表格网页中动态效果的制作</a></li> <li><a href="/doc/cb9973246.html" target="_blank">《网页制作》复习题(含“答案”)..</a></li> <li><a href="/doc/fb4850607.html" target="_blank">运用表格制作网页</a></li> <li><a href="/doc/0c19443071.html" target="_blank">FrontPage2003网页制作</a></li> <li><a href="/doc/5e19154591.html" target="_blank">网页设计-表格、表单及框架</a></li> <li><a href="/doc/a811185869.html" target="_blank">表单网页的制作方法</a></li> <li><a href="/doc/cc18000115.html" target="_blank">网页表格制作速查手册</a></li> <li><a href="/doc/2312332075.html" target="_blank">CSS制作好看的网页表格</a></li> <li><a href="/doc/8810841121.html" target="_blank">网页制作的过程</a></li> <li><a href="/doc/b110370525.html" target="_blank">利用表格制作网页的详细步骤</a></li> <li><a href="/doc/fa2851213.html" target="_blank">用嵌套表格制作一个简单的网页</a></li> <li><a href="/doc/0a3044476.html" target="_blank">制作包含列表和表格的网页</a></li> <li><a href="/doc/5011989460.html" target="_blank">用表格做网页</a></li> <li><a href="/doc/936119764.html" target="_blank">网页的排版 表格篇</a></li> <li><a href="/doc/ce14315230.html" target="_blank">静态网页制作教程 第三章 表格</a></li> <li><a href="/doc/1e16458381.html" target="_blank">教你如何制作网页表格(ppt 86页)</a></li> <li><a href="/doc/7d15253057.html" target="_blank">嵌套表格制作一个简单的网页</a></li> <li><a href="/doc/bd8073844.html" target="_blank">网页表格制作</a></li> <li><a href="/doc/de10288189.html" target="_blank">利用表格设计和制作网页 PPT</a></li> <li><a href="/doc/457934824.html" target="_blank">制作包含列表和表格的网页</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "cf1e9ac569dc5022abea005c"; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a>  ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br /> 本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈 </div> <script type="text/javascript">foot()</script> </div> </body> </html>