HTML语法2

4.9 表格标签 <回细说索引>

【网页中的表格观念】 举个例子来说，如果今天我们要做一个3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好几个步骤的，第一个步骤，利用<TABLE></TABLE>标签告诉电脑我要做一个表格；第二个步骤，利用一组<TR></TR>标签先做一个横列，然后在横列中利用三组<TD></TD>标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系，以下咱们就来慢慢的看个仔细：   首先我们来看一个最简单的表格： 原始码 呈现结果 <TABLE BORDER=1> <TR><TD>1</TD></TR> </TABLE> 1 利用<TABLE>这个标签来告诉电脑，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组<TR></TR>是设定一横列的开始。一组<TD></TD>则是设定一个栏位。当然，文字就是要摆在这里面。   现在我们再来增加二个格子： 原始码 呈现结果 <TABLE BORDER=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> </TABLE> 1 2 3   看见没有，<TR></TR>没有增加，<TD></TD>却增加了二组。那如果我要再加上一列呢？很简单，就像这样： 原始码 呈现结果 <TABLE BORDER=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> </TABLE> 1 2 3 4 5 6   【合并表格栏位】   并非所有的表格都是规规矩矩的只有几栏、几列而已，有时候，我们还会希望能够“合并栏位”，让表格更美观、更实用一点，而谈到“合并栏位”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是横列间的合并），一种是左右合并（也就是直栏间的合并），这两种合并方式各有不同的属性设定方法。   左右栏位合并：基本上，您的表格已经学会啰！接下来，咱们就来看看，如何将 1、2、3 格通通合并变成一大格： 原始码 呈现结果 <TABLE BORDER=1> <TR><TD COLSPAN=3>1</TD></TR> <TR><TD>4</TD><TD>5</TD><TD>6</TD></TR> </TABLE> 1 4 5 6 您应该会发现，怎么2、3都消失了？只剩下1，而且该栏的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右栏位合并”的属性，COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”，也正因如此，本来的两个<TD>都可以省掉了，因为都被并掉了嘛！   上下栏位合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将 1、4格通通合并变成一大格： 原始码 呈现结果 <TABLE BORDER=1> <TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD>5</TD><TD>6</TD></TR> </TABLE> 1 2 3 5 6 有了上一次的经验后，我们就知道，要合并栏位就一定有些栏位会被“牺牲”掉（也就是那些被合并的栏位啦！），这次我们要“上下合并”，我们将1与4合并成一个栏位，那么被牺牲的是哪一个栏位呢？没错就是下面那一个倒楣的4，我们看看上图，果然4已经删掉了，而在1的<TD>标签中则多了个生面孔ROWSPAN，这就是“上下栏位合并”的属性，ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”，其结果如下：     【表格栏位对齐位置设定】   我可以自己设定表格的大小吗？当然可以，您可以自由设定表格的“宽”及“高”喔！我们来制作一个宽100、高60的表格，做法如下： 原始码 呈现结果 <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD>1</TD></TR> </TABLE> 1   哎呀！怎么 1 老是在表格的左边呢？可以弄到中间吗？当然可以，只要在<TD>加入 ALIGN=CENTER 这参数即可： 原始码 呈现结果 <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD ALIGN=CENTER>1</TD></TR> </TABLE> 1 此外，利用 ALIGN=RIGHT可以让表格中物件置右、利用 ALIGN=LEFT可以让表格中物件置左（预设值），至于为什么要加在<TD>中呢？因为，<TD>是一个栏位的意思，我们要指定在这栏位中的东西要置中或置左置右，就必须将ALIGN加在<TD>中。   既然可以置中，那么也可以控制表格内文字靠上方、靠下方吗？可以的，只要利用 VALIGN=TOP 这种属性即可让表格内物件靠上方对齐。 原始码 呈现结果 <TABLE WIDTH="100" BORDER="1" HEIGHT="60"> <TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR> </TABLE> 1 利用VALIGN=MIDDLE可以让表格中物件垂直置中（预设值），VALIGN=BOTTOM可以H让表格中物件靠下方。

【表格背景、底色设定】   那么表格可以设定底色吗？可以的不但表格可以，您也可以指定某栏或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色码"就行了。底下是指定整格表格背景颜色的方法： 原始码 呈现结果 <TABLE BORDER="1" BGCOLOR=#FFCC33> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> 1 2 3 4 将BGCOLOR="颜色码"加在<TR>中，可以指定“一列”的背景颜色： 原始码 呈现结果 <TABLE BORDER="1" > <TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> 1 2 3 4 将BGCOLOR="颜色码"加在<TD>中，可以指定“一栏”的背景颜色： 原始码 呈现结果 <TABLE BORDER="1" > <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> 1 2 3 4   表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要将BACKGROUND="图片名称"加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，您也可以指定某栏或某列的背景图片： 原始码 呈现结果 <TABLE BORDER="1" BGCOLOR=#FFCC33> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> 1 2 3 4 将BACKGROUND="图片名称"加在<TD>中，可以指定“一栏”的背景颜色： 原始码 呈现结果 <TABLE BORDER="1"> <TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> 1 2 3 4   【表格框线设定】   如何设定表格粗细？只要利用BORDER="粗细值"就行了。 原始码 呈现结果 <TABLE BORDER=5> <TR><TD>1</TD></TR> </TABLE> 1   如何设定表格颜色？只要利用BORDERCOLOR="颜色码"就行了。 原始码 呈现结果 <TABLE BORDER="5" BORDERCOLOR="#0080FF"> <TR><TD>1</TD></TR> </TABLE> 1   另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感喔！只要利用 BORDERCOLORLIGHT="#颜色码"（亮面设定） BORDERCOLORDARK="颜色码"（暗面设定）就行了。 原始码 呈现结果 <TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97"> <TR><TD>1</TD></TR> </TABLE> 1   【表格栏距设定】   我们可以利用CELLPADDING属性自由设定表格内文距离格线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言内定值为2，不过我建议设定为4比较漂亮。 原始码 呈现结果 <TABLE BORDER="1" CELLPADDING="10"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE> 1 2   我们可以利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2，不过我通常习惯设为 0 。 原始码 呈现结果 <TABLE BORDER="1" CELLSPACING="5"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE> 1 2

4.10 序列标签 <回细说索引>

【无序标签】     序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。至于“有序条列”就是指各条列之间是有顺序的，从1、2、3…一直延伸下去。   我们先来看看“无序列表标签”如何使用： 原始码 呈现结果 <UL> <LI>姓名：杰克升 <LI>生日：1974/11/21 <LI>星座：天蝎座 </UL> 姓名：杰克升 生日：1974/11/21 星座：天蝎座 其中<UL>标签即为“无序列表标签”，每增加一列内容，就必须加一个<LI>。   前面的符号一定是要圆形的吗？不，我们可以加入TYPE="形状名称"属性来改变其符号形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种（由于本页使用CSS故仅于Netscape看得出效果。）： 原始码 呈现结果 <UL TYPE="CIRCLE"> <LI>姓名：杰克升 <LI>生日：1974/11/21 <LI>星座：天蝎座 </UL> 姓名：杰克升凯 生日：1974/11/21 星座：天蝎座   【有序标签】     接下来，我们来看看“有序列表标签”如何使用： 原始码 呈现结果 <OL> <LI>姓名：杰克升 <LI>生日：1974/11/21 <LI>星座：天蝎座 </OL> 姓名：杰克升 生日：1974/11/21 星座：天蝎座 其中<OL>标签即为“有序列表标签”，每增加一列内容，就必须加一个<LI>。   和无序列表标签一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种： 原始码 呈现结果 <OL TYPE="A"> <LI>姓名：杰克升 <LI>生日：1974/11/21 <LI>星座：天蝎座 </OL> 姓名：杰克升 生日：1974/11/21 星座：天蝎座   另外，我们亦可指定序列起始的数目，其方法如下： 原始码 呈现结果 <OL START="8"> <LI>姓名：杰克升 <LI>生日：1974/11/21 <LI>星座：天蝎座 </OL> 姓名：杰克升 生日：1974/11/21 星座：天蝎座   【定义列表标签】     接下来我们要说明的这个标签，是“定义列表标签”也是属于序列标签之一。我们先来举个例子，我们常常会在文章中看见这样的格式： CSS（Cascading style sheet） CSS是由W3C于1996年12月所公布的一项新技术，什么叫做Cascading style sheet？简单说来他是一种具有阶层性的形式设定，能够让网页设计者在设计网页时，对于网页上的任何物件均有更佳的操控性… 网页里也有可以做到这种效果的标签喔！现在要来跟各位说的就是这个标签。咱们先来看看这标签的用法：   我们先来看看“定义列表标签”如何使用： 原始码 呈现结果 <DL> <DT>小标题 <DD>标题的内容说明 </DL> 小标题 标题的内容说明

4.11 表单标签 <回细说索引>

【表单的用途】 对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CGI、JAVA Script程式或是ASP程式来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！ 本单元纯粹以介绍各式表单为主，至于一些CGI或ASP观念在此我就不提出了，因为提供零碎的观念，倒不如去看看专门介绍CGI的书籍来的妥当。 【各种输入类型】     文字输入列：每个表单之所以会有不同的类型，原因就在于TYPE="表单类型"设定的不同而已，我们就先来看看第一个类型：文字输入列。文字输入列的形态就是TYPE="TEXT，其使用方法如下： 呈现结果 姓名： 原始码 <FORM> 姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20"> </FORM> 其有下列可设定之属性：     NAME="名称"，是设定此一栏位的名称，程式中常会用到。 SIZE="数值"，是设定此一栏位显现的宽度。 VALUE="预设内容"，是设定此一栏位的预设内容。 ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 MAXLENGTH="数值"，是设定此一栏位可设定输入的最大长度。 单选核取表单：利用TYPE="RADIO"就会产生单选核取表单，单选核取表单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，故为单选核取表单。 呈现结果 性别：男 女 原始码 <FORM> 性别： 男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY"> 女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL"> </FORM> 其有下列可设定之属性：     NAME="名称"，是设定此一栏位的名称，程式中常会用到。 VALUE="内容"，是设定此一栏位的内容、值或是意义。 ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 CHECKED，是设定此一栏位为预设选取值。 复选核取表单：利用TYPE=" CHECKBOX "就会产生复选核取表单，复选核取表单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，故为复选核取表单。 呈现结果 喜好： 电影 看书 原始码 <FORM> 喜好： <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影 <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书 </FORM> 其有下列可设定之属性：     NAME="名称"，是设定此一栏位的名称，程式中常会用到。 VALUE="内容"，是设定此一栏位的内容、值或是意义。 ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 CHECKED，是设定此一栏位为预设选取值。 密码表单：利用TYPE=" PASSWORD "就会产生一个密码表单，密码表单和文字输入表单长得几乎一样，差别就在于密码表单在输入时全部会以星号来取代输入的文字，以防他人偷窥。 呈现结果 请输入密码： 原始码 <FORM> 请输入密码：<INPUT TYPE="PASSWORD" NAME="INPUT"> </FORM> 其有下列可设定之属性：     NAME="名称"，是设定此一栏位的名称，程式中常会用到。 SIZE="数值"，是设定此一栏位显现的宽度。 VALUE="预设内容"，是设定此一栏位的预设内容，不过呈现出来仍是星号。 ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 MAXLENGTH="数值"，是设定此一栏位可设定输入的最大长度。 送出按钮：通常我们表单填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用TYPE=" SUBMIT "及TYPE=" RESET "来产生，相当的简单易用。 呈现结果 原始码 <FORM> <INPUT TYPE="SUBMIT" VALUE="送出资料"> <INPUT TYPE="RESET" VALUE="重新填写"> </FORM> 其有下列可设定之属性：     NAME="名称"，是设定此一按钮的名称。 VALUE="文字"，是设定此一按钮上要呈现的文字，若是没有设定，浏览器也会自动替您加上“送出查询”、“重设”等字样。 ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 按钮元件：表单中或是JAVA SCRIPT常会用到按钮来作一些效果，因此，我们可以利用TYPE=" BUTTON "来产生一个按钮，相当简单。 呈现结果 请按下按钮： 原始码 <FORM> 请按下按钮：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意"> </FORM> 其有下列可设定之属性：     NAME="名称"，是设定此一按钮的名称。 VALUE="文字"，是设定此一按钮上要呈现的文字。 ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 隐藏栏位：表单中有时有些东西因为某些因素，不想让使用者看到，但因程式需要却又不得不存在，此时，我们就可以利用TYPE=" HIDDEN "来产生一个隐藏的栏位。 呈现结果 隐藏栏位： 原始码 <FORM> 隐藏栏位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到"> </FORM> 其有下列可设定之属性：   NAME="名称"，是设定此一栏位的名称。 VALUE="文字"，是设定此一栏位的值、文字或意义。 【大量文字输入元件】     有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用<TEXTAREA></TEXTAREA>来产生一个可以输入大量文字的元件，夹在两个标签中的文字会出现在框框中，可作为预设文字。 呈现结果 请输入您的意见： 原始码 <FORM> 请输入您的意见：<BR> <TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA> </FORM> 其有下列可设定之属性：   NAME="名称"，是设定此一栏位的名称。 WRAP="设定值"，是设定此一栏位的换行模式。设定值有三种：OFF（输入文字不会自动换行）、VIRTUAL（输入文字在荧幕上会自动换行，不过若是使用者没有自行按下ENTER换行，送出资料时，也视为没有换行）、PHYSICAL（输入文字会自动换行，送出资料时，会将荧幕上的自动换行，视为换行效果送出）。 COLS="数值"，是设定此一栏位的行数（横向字数）。 ROWS="数值"，是设定此一栏位的列数（垂直字数）。 【下拉式选单】     下拉式选单令整个网页看起来有很专业的感觉，我们只要利用<SELECT NAME="名称">便可以产生一个下拉式选单，另外，还需要配合<OPTION>标签来产生选项，这样才算完整喔！ 呈现结果 您喜欢看书吗？： 非常喜欢还算喜欢不太喜欢非常讨厌 原始码 <FORM> 您喜欢看书吗？： <SELECT NAME="LIKE"> <OPTION VALUE="非常喜欢">非常喜欢 <OPTION VALUE="还算喜欢">还算喜欢 <OPTION VALUE="不太喜欢">不太喜欢 <OPTION VALUE="非常讨厌">非常讨厌 </SELECT> </FORM> 其有下列可设定之属性：   SIZE="数值"，是设定此一栏位的大小，预设值为1，若是您的选项有四个，然后您将SIZE设成4，那么，下拉式选单便会变成选项方块，将四个选项一起呈现在方块中。 MULTIPLE，是设定此一栏位为复选，可以一次选好几个选项。

4.12 框架标签 <回细说索引>

【框架的基本概念】     首先，各位先看看右手边这张图，我将利用这张图来作解说，这样子，讲起来可能会清楚一点。 OK！我们可以看见，右边的这个视窗，一共分为 1 、 2 、 3 三个框架，每一个框架，各有其显示的内容分别是a.htm、b.htm、c.htm三个档案。然而左下角的那个 index.htm 是做什么用的呢？   原来，左下角的这个档案 index.htm，就是要告诉电脑，我们要将画面分割成这样，也就是说，所有Frame的标签，其实都只摆在 index.htm 这个档案里。（当然，不是档名一定要叫做 index.htm 取其他档名也是可以的。）   这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的html档案（假如您要分割100个框框，就要有100个html档就对了。），另外，还会多一个档案是来告诉电脑要如何分割的。（也就是例中的 index.htm 档啦！） 【开始分割】     别急、别急，分割视窗可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想像画面是一个蛋糕，你要怎么割，才能割成那样呢？ 原始码 呈现结果 <HTML> <HEAD> <TITLE>框窗实作</TITLE> </HEAD> </HTML>   各位会发现，奇怪，在上面的语法中，怎么都没见到<BODY></BODY>熟悉的身影？呵呵...没错，它已经被待会儿要加进去的<FRAMESET></FRAMESET>标签给取代了！也就是说，如果我们要分割画面，就要先用<FRAMESET>标签告诉电脑说：‘喂！我要开始分割了！’此时，<BODY>是派不上用场的，所以躲到一旁凉快去了！   现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！），如下图： 原始码 呈现结果 <HTML> <HEAD> <TITLE>框窗实作</TITLE> </HEAD> <FRAMESET COLS="120,*" > 　<FRAME SRC="a.htm" NAME="1"> 　<FRAME SRC="b.htm" NAME="2"> </FRAMESET> </HTML>   在<FRAMESET>中，我们要告诉电脑到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成<FRAMESET COLS="120,*" >。COLS="120,*" 就是说，左边那一栏强制定为 120点，右边则随视窗大小而变。除了直接写点数外，我们亦可用百分比来表示，例如COLS="20%,80%"也是可以的。   然后，再将右边的框窗再割成上下两个画面（也就是框窗 2 和 3 了）。如下图： 原始码 呈现结果 <HTML> <HEAD> <TITLE>框窗实作</TITLE> </HEAD> <FRAMESET COLS="120,*"> 　<FRAME SRC="a.htm" NAME="1"> 　<FRAMESET ROWS="100,*"> 　　<FRAME SRC="b.htm" NAME="2"> 　　<FRAME SRC="c.htm" NAME="3"> 　</FRAMESET> </FRAMESET> </HTML>   看见了没？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 点的语法中）被另一组<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二组<FRAMESET ROWS="100,*" >是被第一组<FRAMESET COLS="120,*" >所包围起来的喔！（乱七八糟了对不对？）   呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm，然后再准备三个档 a.htm 、b.htm 、c.htm那么就完工啰！当然，这是一个最阳春的分割法，我会再将一些进阶的标签在底下一一说明。   【其他标签参数说明】 <FRAMESET COLS="120,*" frameborder=0 framespacing=5>   COLS="120,*" 就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS="30,*,50" （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！   ROWS="120,*" 就是横向切割画面，也就是将画面上下分开，切法同上。   frameborder=0 设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。   framespacing=5 表示框架与框架间的保留空白的距离，以免看起来太挤。   <FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>   SRC="a.htm" 设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚）   NAME="1" 设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。   frameborder=0 设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。   scrolling="no" 设定是否要显示卷轴，YES是要显示卷轴，NO是无论如何都不要显示，AUTO是视情况显示。   noresize 设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。   marginhight=2 表示框架高度部份边缘所保留的空间。   marginwidth=2 表示框架宽度部份边缘所保留的空间。 【相关用法】 ◆ <noframe>   使用方法：<noframe>请换有支援Frame功能的浏览器</noframe>   标签解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此标签，让这些网友知道，该换换浏览器了。或者，你也可以在这标签中，摆上没有Frame语法的网页标签，那么，没有支援Frame功能的浏览器，便会自动显示没有Frame语法的网页。 ◆ target=框窗名称   使用方法：<A HREF="d1-1.htm" target=3>显示内容</A>   标签解说：常常有一个情况是，我想在框窗 1 的地方按下连结，但是希望他的内容出现在框窗 3 中（请参照上面那个图），那应该如何写呢？就像上面加个 target=框窗名称 就行啦！ ◆ target=_top   使用方法：<A HREF="http://www.kimo.com" target=_top>奇摩站</A>   标签解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入 target=_top这个参数，那么，这个新连到的网站，就会重新占据整个荧幕啦！

4.13 其他技巧 <回细说索引>

■ 网页配色及背景音乐

首先是网页的底色，通常是白白的，要怎么做变化呢？可以做自己的背景图片。

要注意一点，如果背景和文字颜色一样～或者颜色相近，天啊～那谁知道你在写什么呀？最好文字与背景颜色有对比，像敝人当初，网页背景是黑的，字是白的红的，就可以很明显的突显出文字。如果图片中有文字，也要尽量淡化，否则影响内容就不好啰！

内容的东西颜色要配的适宜（除非你想要有奇怪的风格），不然像背景大红大红，太刺眼了，有人会想去吗？剩下的就让您自己配配看吧！

然后是音乐，有人喜欢用bgsound标签

<bgsound src="music.mid">

可是用NetScape看就没有声音了最好用embed标签 <embed src="music.mid">

这样就可以正常播放了唷～

■ 首页应有的特质及重要性

1. About Open Page：打开browser看到网站的第一个部份，有人称之为Open Page(通常是首页的一半或三分之一)，这个部份应该包含网站的主功能(亦即使用者上这个网站最希望或者最可能做的事)，ex. 一进入Allproducts.com即可看到“Key word search”及“Search by category”，应该尽量避免让使用者还要使用mouse上下左右拉才能看到他(她)所想要的功能或资讯，有时资讯太多，在不得已的情况下，页面可以往下沿申，但切忌右左划面过大，不符一般人的使用习惯，也会造成列印上的困扰。
   
   
2. 主题明确：Open Page应包含公司Logo、网站主题(最好是一段简短的Slogan，让使用者一看就知道这个网站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers)
   
   
3. Navigation：让使用者很明确了解他(她)目前在网站的什么地方(或功能)，首页上应该有主要功能的连结，各个icon如果可能的话，尽可能加上一些纯文字的说明及link；至于icon或者link的摆放亦应有其相对应的逻辑，如与整个网站或大架构较为相关的，放在较外层，与目前执行的功能或页面较为相关的link应该放在内层；另外，最好能在首页上提供Site Map的连结，让使用者可以很快了解网站的架构；所有的link应该把握 intuitive , obvious , fast的原则。
   
   
4. Color or image：对于颜色的采用，应该考虑到该网站的特性及与其它相关网站的区别，特别是首页的颜色配置，应该让使用者感觉很舒服、没有压迫感，但又不失其专业性，但切忌过度追求美感而牺牲其功能性，就公司目前的网站设计理念，应该是功能性的考量优于纯美术的考量，首页的设计最好设定在60k以内，而且不要用太多层的table。
   
   
5. Meta tag：该部份不会出现在前端的页面上，但网站规划时应该将该部份一并考量，做为网站登录时使用，网站上线时务必将相关资料加入。
   
   
6. 其它：首页上应该有service account 及 联络资料

■ Meta Tag 的简介

一般常用的格式如下：

• <Title>All Products Online</title>
  这虽说不是meta的一部份，但是也不可忽略，总长度不要超过85个Character (约10个字)。
  
  
• <meta http-quive="content-type" content="text/html; charset=iso-8859-1">
  说明网站的格式及编码方式，另外这个功能也可以拿来说明网站的名称。
  
  
• <meta name="keyword" contents="关键字一, 关键字二, 关键字三, …..">
  铲明整个网站的关键字，关键字间用逗点隔开，总长度最好不要超过1000个Character (约44个字)。
  
  
• <meta name="description" contents="整个网站的描述….">
  铲明整个网站为何吸引人的地方，可用逗点隔开，总长度最好不要超过200个Character (约15个字)，若文章真的太长，可以切割成两个部分，较不重要的部分置入下一个Description。
  
  
• <meta name="robots" content=" ALL, NONE, INDEX, NOINDEX, FOLLOW, NOFOLLOW">
  此功能是要给搜寻引擎使用的，是要用来告诉Spider哪些网页是要去撷取的或不用去撷取的，一般都设定成All(内定值)。