影像标签

影像标签 【影像标签】 在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您要的图，档名大小写不一致，如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但是一但传到网路上去时，因为系统不一样的关系（电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样的档案了，所以，可别忽略档名大小写不一致的影响。 另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我们先来看看影像的标签如何写。 使用方法：<img src="boy.gif" alt="本站特约模特儿" align=right border=0 hspace=2 vspace=2 height=56 width=32> 标签解说：目前常见的网页图形格式有两种就是gif及jpg两种格式。gif格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而jpg格式的图案是全彩失真压缩，比较适合一大堆颜色的图片，如照片就较适合用jpg格式来呈现。 使用范例： 基本用法 用法：<img src="图档名称、路径"> 显示图片最基本的方法（就是不加任何属性啦！）其中 boy.gif 就是图档的档名。 原始码 <img src="images/G-FASE4.GIF">嗨！我是本站的模特儿喔！ 呈现结果 嗨！我是本站的模特儿喔！ 长宽设定 用法：<img src="图档" height="高度" width="宽度"> 设图片的大小，其实不用设也可以，但是有设更好，可以加快浏览速度，因为浏览器就不用在那边花时间算您的图片有多大啦！此外您也可以自己随意设定图片大小。 原始码 <img src="images/G-FASE4.GIF" height=32 width=32> 呈现结果 加上说明 用法：<img src="图档" alt="说明文字"> 滑鼠一到图上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段字代替，让使用者知道这个未显示出来的图片究竟是干嘛用的。 原始码 <img src="images/G-FASE4.GIF" alt="本站特约模特儿">移到图上看看。 呈现结果 移到图上看看。 图片位置 用法：<img src="图档" align="位置"> 图片位置设定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成‘文绕图’的效果。 原始码 <img src="images/G-FASE4.GIF" align=right>嗨！我往右边靠！ 呈现结果 嗨！我往右边靠！ 原始码 <img src="images/G-FASE4.GIF" align=left>嗨！我往左边靠！ 呈现结果 嗨！我往左边靠！ 原始码 <img src="images/G-FASE4.GIF" align=top>文字对齐我头顶！ 呈现结果 文字对齐我头顶！ 原始码 <img src="images/G-FASE4.GIF" align=bottom>文字对齐我脚底！ 呈现结果 文字对齐我脚底！ 原始码 <img src="images/G-FASE4.GIF" align=middle>文字对齐我中间！ 呈现结果 文字对齐我中间！ 原始码 <img src="images/G-FASE4.GIF" align=absmiddle>文字对齐我绝对中间！ 呈现结果 文字对齐我绝对中间！ 边框设定 用法：<img src="图档" border="边框粗细"> 设定边框大小，通常都设成 0 感觉比较美观啦！因为内定的框框实在是不怎么漂亮....。尤其在连结时，设框框简直是丑毙了...。 原始码 <img src="images/G-FASE4.GIF" border="4"> 呈现结果 左右间距 用法：<img src="图档" hspace="离左右物件的距离"> 离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。 原始码 左边的字<img src="images/G-FASE4.GIF" hspace="15">右边的字 呈现结果 左边的字右边的字 上下间距 用法：<img src="图档" vspace="离上下物件的距离"> 离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。 原始码 上面的字<br><img src="images/G-FASE4.GIF" vspace="15"><br>下面的字 呈现结果 上面的字 下面的字 由于此网页有用css控制版面图文，故在netscape下观看，会稍有不正确。 【网页影像重要观念】 关于路径：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻着您的路径去找到该有的图片，所以，我们来看看该如何正确的使用路径。有些人并不喜欢将网页及图通通放在同一个目录下，比如说有人将图档全放在c:/images里，而网页档放在c:/demo里，这样子的话，我们该如何正确的写图片的路径呢？我将几种常见的情形整理成下表： html档的位置 图档的位置 写法 情形说明 c:/demo c:/demo <img src="tad.gif"> 图文均在同一目录 c:/demo c:/demo/images <img src="images/tad.gif"> 图在网页下一层目录 c:/demo c:/ <img src=" ../tad.gif"> 图在网页上一层 c:/demo c:/image <img src=" image/tad.gif"> 图文在同一层但不同目录 或许有人看到不明就理，我来说明一下，“../”是回到上一层目录的意思。“images/”则是进入下一层目录image之意，而“images/”的意思就是，回到上一层目录，然后再进入目录images中。以上我们使用的均为“相对路径”的概念。 影像单位：或许您会常常看到px这个单位，没错，这是我们在制作最常用的一个单位了。这个单位完整的写法是“pixels”，我们称之为“像素”。像素，是萤幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，萤幕本身十五寸，不会因为你的任何设定而变成十七寸。但是，其解析度是可以改变的，我们常见的解析度有以下几种：“640 ×480”、“800 ×600”、“1024 ×768”。举其中之一的640 ×480来说，其代表的就是在萤幕上有宽640个光点，高有480光点，若是我们将解析度调整为800 ×600其宽势必要从640变成800个光点，也因此，该光点便会变小一点，所以，我们看起来就会觉得解析度调高后，萤幕内的东西，变得小小的，很精致，那就是因为光点变小的原因。 影像单位：或许您会常常看到px这个单位，没错，这是我们在制作最常用的一个单位了。这个单位完整的写法是“pixels”，我们称之为“像素”。像素，是萤幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，萤幕本身十五寸，不会因为你的任何设定而变成十七寸。但是，其解析度是可以改变的，我们常见的解析度有以下几种：“640 ×480”、“800 ×600”、“1024 ×768”。举其中之一的640 ×480来说，其代表的就是在萤幕上有宽640个光点，高有480光点，若是我们将解析度调整为800 ×600其宽势必要从640变成800个光点，也因此，该光点便会变小一点，所以，我们看起来就会觉得解析度调高后，萤幕内的东西，变得小小的，很精致，那就是因为光点变小的原因。 影像格式：网页用的图档目前只有gif格式（即副档名为gif的图档，如：bg.gif）以及jpg格式（即副档名为jpg的图档，如：bg.jpg）为一般的浏览器所接受。其他如bmp格式或是pcx格式都是无法在网页上使用的，若非得要用，那就利用影像绘图软体来作格式的转换吧！ 图档范例 说明 gif格式的图形只能以256个颜色显示，虽然其色彩较少，但颜色鲜艳亮丽，若是图形颜色不多，用gif格式存档会较漂亮。 jpg格式的图形是以全彩显示，适合用在相片或是渐层颜色的图片上，压缩比例以75%为适中。 zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

分隔标签    - 2004-04-24     14:56 分隔标签 【文字上的分隔标签】 或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！ 使用方法：强制断行标签<br>、强制分段标签<p> 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（<br>），或是在写完某一段的时候便会分段（<p>），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。 使用范例： 原始码 呈现结果 这是一个断行的范例<br>看出来了吗？ 这是一个断行的范例 看出来了吗？ 这是一个分段的范例<p>基本上他会比断行还多空出一行 这是一个分段的范例 基本上分段会比断行还多空出一行 【分隔线标签】 使用方法：上一段文字内容<hr>下一段文字内容 标签解说：利用<hr>这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下： 使用范例： 一般用法 尚未加任何属性。 原始码 普通分隔线<hr> 呈现结果 普通分隔线 颜色属性 用法：<hr color="颜色码或颜色名称"> 原始码 橘色分隔线<hr color="#ff8000"> 呈现结果 橘色分隔线 宽度属性 用法：<hr width="宽度">，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占萤幕50%。 原始码 宽度为240px的分隔线<hr width="240"> 呈现结果 宽度为240px分隔线 厚度属性 用法：<hr size="厚度"> 原始码 厚度为5的分隔线<hr size="5"> 呈现结果 厚度为5分隔线 位置属性 用法：<hr align="水平对齐位置">，其设定值有三个，也就是置左align="left"、置中align="center"、置右align="right" 原始码 靠右的分隔线<hr align="right"> 呈现结果 靠右的分隔线 阴影属性 用法：<hr noshade>，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。 原始码 实心分隔线（无阴影）<hr noshade> 呈现结果 实心分隔线（无阴影） zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

其他    - 2004-04-24     14:56 其他 ■ 网页配色及背景音乐 首先是网页的底色，通常是白白的，要怎么做变化呢？可以做自己的背景图片。 要注意一点，如果背景和文字颜色一样～或者颜色相近，天啊～那谁知道你在写什么呀？最好文字与背景颜色有对比，像敝人当初，网页背景是黑的，字是白的红的，就可以很明显的突显出文字。如果图片中有文字，也要尽量淡化，否则影响内容就不好啰！ 内容的东西颜色要配的适宜（除非你想要有奇怪的风格），不然像背景大红大红，太刺眼了，有人会想去吗？剩下的就让您自己配配看吧！ 然后是音乐，有人喜欢用bgsound标签 <bgsound src="music.mid"> 可是用NetScape看就没有声音了最好用embed标签 <embed src="music.mid"> 这样就可以正常播放了唷～ ■ 首页应有的特质及重要性 About Open Page：打开browser看到网站的第一个部份，有人称之为Open Page(通常是首页的一半或三分之一)，这个部份应该包含网站的主功能(亦即使用者上这个网站最希望或者最可能做的事)，ex. 一进入Allproducts.com即可看到“Key word search”及“Search by category”，应该尽量避免让使用者还要使用mouse上下左右拉才能看到他(她)所想要的功能或资讯，有时资讯太多，在不得已的情况下，页面可以往下沿申，但切忌右左划面过大，不符一般人的使用习惯，也会造成列印上的困扰。 主题明确：Open Page应包含公司Logo、网站主题(最好是一段简短的Slogan，让使用者一看就知道这个网站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers) Navigation：让使用者很明确了解他(她)目前在网站的什么地方(或功能)，首页上应该有主要功能的连结，各个icon如果可能的话，尽可能加上一些纯文字的说明及link；至于icon或者link的摆放亦应有其相对应的逻辑，如与整个网站或大架构较为相关的，放在较外层，与目前执行的功能或页面较为相关的link应该放在内层；另外，最好能在首页上提供Site Map的连结，让使用者可以很快了解网站的架构；所有的link应该把握 intuitive , obvious , fast的原则。 Color or image：对于颜色的采用，应该考虑到该网站的特性及与其它相关网站的区别，特别是首页的颜色配置，应该让使用者感觉很舒服、没有压迫感，但又不失其专业性，但切忌过度追求美感而牺牲其功能性，就公司目前的网站设计理念，应该是功能性的考量优于纯美术的考量，首页的设计最好设定在60k以内，而且不要用太多层的table。 Meta tag：该部份不会出现在前端的页面上，但网站规划时应该将该部份一并考量，做为网站登录时使用，网站上线时务必将相关资料加入。 其它：首页上应该有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(内定值)。   zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

表格标签    - 2004-04-24     14:56 表格标签 【网页中的表格观念】 举个例子来说，如果今天我们要做一个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 zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

背景标签    - 2004-04-24     14:56 背景标签 【背景标签】 说穿了，背景标签只有<BODY>这个标签，其余的效果，只要加上一些简单的属性便可做到。 使用方法：<body bgcolor="#ffffff" background="bg.jpg"> 标签解说：这个标签其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一（哎哎哎...现在放马后炮有什么用！）。我们背景颜色或图片的设定以及连结字体的颜色，通通都放在<body>这标签里面。我就其属性来一一解说： 背景颜色 用法：<body bgcolor="颜色码"> 设定背景颜色。有人会说：‘我已经设定了背景图片，那背景颜色还有用吗？’当然有用！当使用者连结到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显现背景颜色，您说，是不是比一片灰灰的好看多了呢！ 原始码 <html> <head> <title>这是标题</title> </head> <body bgcolor="#f9e6a2"> 这里是本文区 </body> </html> 呈现结果 按下此处观看结果 背景图案 用法：<body background="图档名称、路径"> g设定背景图案。图档可以是jpg或gif格式的图档，我建议：图档不要太大，否则网页载入会蛮慢的。 原始码 <html> <head> <title>这是标题</title> </head> <body background="bg.jpg"> 这里是本文区 </body> </html> 呈现结果 按下此处观看结果 【内文、连结文字颜色设定】 使用方法：<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000> 标签解说：用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色内定值该如何修改，这个<body>标签中，便有设定内文、连结等文字的颜色内定值功能。用法如下： 内文颜色 用法：<body text="颜色码"> 设定一般文字颜色，也就是说，若没有特别去设定文字颜色的话，浏览器就会自动显现您所设定的颜色。 原始码 <html> <head> <title>这是标题</title> </head> <body text="#0906a2"> 这里是本文区 </body> </html> 呈现结果 按下此处观看结果 连结颜色 用法：<body link="颜色码"> 设定“连结”的颜色。只要是有连结的地方就会出现你指定的颜色，当然，如果按下连结后，那又会变成另一个颜色了，这底下会说明。 原始码 <html> <head> <title>这是标题</title> </head> <body link="#ff6600"> <a href="index.htm">连结文字</a> </body> </html> 呈现结果 按下此处观看结果（设定连结为橘色） 连结时颜色 用法：<body alink="颜色码"> 设定“按下连结”的颜色，也就是当您滑鼠按下那连结的瞬间所呈现的颜色。 原始码 <html> <head> <title>这是标题</title> </head> <body alink="#0099ff"> <a href="index.htm">连结中文字</a> </body> </html> 呈现结果 按下此处观看结果（滑鼠点下连结瞬间才会出现我们设定的浅蓝色） 已连结颜色 用法：<body vlink="颜色码"> 设定“按下链结后”的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些连结有去过了，哪些没去过。 原始码 <html> <head> <title>这是标题</title> </head> <body vlink="red"> <a href="demo1-10-6.htm">连结文字</a> </body> </html> 呈现结果 按下此处观看结果（设定已执行过的连结以红色显示）   zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

连结标签    - 2004-04-24     14:56  连结标签 【WWW连结标签基本概念】 连结基本概念：一般而言，所谓连结就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当游标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。 扯到连结，最基本来看有‘内部连结’及‘外部连结’，所谓‘内部连结’就是自己网站间网页的连结，至于外部连结我们稍后再来讨论。 要了解内部连结，首先必须先了解一下这两种东西，一个是‘相对路径’，一个是‘绝对路径’。 现在假设一个情形：我们在自己的电脑里设计网页，所有网页相关的档案我们通通放在 c:/www 里面，现在假设 c:/www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！ 现在我们想在 index.htm 里面设一个连结，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述： <a href="/c|/www/text1.htm"> 这就是‘绝对路径’ <a href="text1.htm"> 这就是‘相对路径’ 瞧出什么端倪了没有？嗯嗯....没错，‘绝对路径’要给电脑一个非常详尽的位置，让电脑寻着这路径去找到档案。而‘相对路径’就简单多啦！如果没有特别指定，他就会直接在 index.htm 的所在目录下找，也就是在 c:/www 底下去找text1.htm。 如果说，今天我们将 c:/www 里所有的档案都上传到网路上的网页伺服器（总不能做好了只给自己看吧！），且该伺服器是别人的电脑，而非你自己架设的主机，那么问题就来了！你猜，哪一种连结会出问题？呵呵...答案是‘绝对路径’，您猜对了吗？ 为什么说‘绝对路径’会出问题呢？因为，当您将档案上传到网路上时，您的整个网页目录架构一定会变，到时候，电脑可能找不到 c:/ （尤其是unix系列的主机）更可能找不到 www 这目录（有些会规定要放在特定的目录下才能显示网页），所以说，没事的话，尽量用‘相对路径’来作连结吧！好写又不容易出错。 另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:/www/gif/ 底下放进了p1.gif 、 p2.gif两个图，而index.htm 、 text1.htm 依旧在 c:/www 底下。现在我们想在 index.htm 下设个连结到 p1.gif 这图档（连结不限于只能连html档，图档、文字档均可），那我们又该如何来使用‘相对路径’呢？他们又不在‘同一个目录’下...？ <a href="/c|/www/gif/p1.gif"> 这是‘绝对路径’的写法 <a href="gif/p1.gif"> 这是‘相对路径’的写法 如何？不难吧！（只是字有点多，看到脑子发胀） 总整理：很乱吗？嗯...看看这表，或许会清楚些。 相对路径表示方式 代表连结位置 <a href="text1.htm"> text1.htm在目前的目录中（就例子而言，就是在c:/www中） <a href="docs/text1.htm"> text1.htm在名为docs的次目录中（就本例而言，就是在c:/www/docs中） <a href="../text1.htm"> text1.htm在目前目录的上一层目录中（就本例而言，就是在c:/底下了） 【网页内部的连结】 使用方法： 先在欲连结处作记号：<a name="here1">这里是你想连结的点</a> 设定连结：<a href="#here1">连结</a> 标签解说：有时候，当某页的内容很多时，我们可以利用网页的内部连结，来使使用者快速的找到资料。其原理不过是：在欲连结处做个记号（网页的任何地方都可以喔！），然后，连结时就寻这记号，就可以快速找到资料。很简单吧！ 使用范例： 范例 第一步骤 第二步骤 www连结标签基本概念 <a name="m1">欲连结的位置</a> <a href="#m1">www连结标签基本概念</a> 网页内部的连结 <a name="m2">欲连结的位置</a> <a href="#m2">网页内部的连结</a> 网页外部的连结 <a name="m3">欲连结的位置</a> <a href="#m3">网页外部的连结</a> 【网页外部的连结】 标签解说：连结到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网路上的服务五花八门，所以不同的服务有不同的连结方法，我将之整理在下表。 使用范例： 网站连结 好站 <a href="http://sunspot-design.com">好站</a> 电子邮件连结 写情书给我 <a href="mailto:tad@ms1.url.com.tw">写情书给我</a> ftp连结 下载档案 <a href="ftp://ftp.ntu.edu.tw">下载档案</a> news连结 seednet news服务 <a href="news:news.seed.net.tw">seednet news服务</a> gopher连结 seednet gopher服务 <a href="gopher://gopher.seed.net.tw/">seednet gopher服务</a> bbs连结 seednet gopher服务 <a href="telnet://bbs.seed.net.tw/">seednet bbs服务</a> 【连结标签的参数】 使用方法：在连结后面加入 target=_参数 标签解说：连结的参数并不多，常见的大概就属 target 这参数了，target 的意思是‘目标’，也就是网页连结的指向目标，这参数在框窗（frame）里尤为重要！ 使用范例： target=框窗名称： 这在‘框架标签’中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标签，来指定连结的内容显示到哪一个框窗中。 target=_blank： 将连结的画面内容，开在新的浏览视窗中。 target=_parent： 将连结的画面内容，当成文件的上一个画面。 target=_self： 将连结的画面内容，显示在目前的视窗中。 target=_top： 这个参数可以解决新连结的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成连结的画面内容。 zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

网页架构    - 2004-04-24     14:56 网页架构 <HTML> 　<HEAD> 　　<TITLE>网页制作教学</TITLE> 　　<Meta> 　</HEAD> 　<BODY> 　　BODY之间则为主要语法所在，也是网页的主要呈现部分。 　</BODY> </HTML> 【标签解说】 以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。 简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。 在抬头的部份<HEAD></HEAD>中，有另一组标签<TITLE></TITLE>。打在<TITLE></TITLE>这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。 您可能会发现，为什么我一直没提到<HTML></HTML>这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。   zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

文字标签    - 2004-04-24     14:56 文字标签 【文字字型设定】 使用方法：<font face="字型名称">文字</font> 标签解说：网页上也可以使用字型喔！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是宋体。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显现，不过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来显示，所以不用怕会一团乱！ 另外，如果您的网页中有加上这一行叙述<meta http-equiv="content-type" content="text/html;charset=big5">（指定网页的语言格式，以后我会解释），那么，netscape可以正确显示出中文，但英文无反应。若没有加该行，那么英文会正确显示，但中文却仍是宋体。至于 ie 系列，均能正常显示。 使用范例： 原始码 呈现结果 <font face="楷体_GB2312">楷体_GB2312</font> 楷体_GB2312 <font face="华康俪中黑">华康俪中黑</font> 华康俪中黑 【特殊字元】 使用方法：&nbsp; 标签解说：很多特殊的符号是需要特别处理的，比如说" < "、" > "这两个符号若想要呈现在网页上是没有办法直接打" < "的，要呈现" < "必须输入编码表示法：“&lt;”，常用的如下： 使用范例： 原始码 呈现结果 &nbsp;   (&nbsp;代表一个不断行空白) &lt; < &gt; > &amp; & &quot; " 【设定文字内定值大小】 使用方法：<basefont size="1~7"> 标签解说：这个标签可以改变文字大小的内定值，直接加在<body>标签之后就行了。一般而言，若是没有特别设定，文字大小内定值预定值为3。 zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

字体标签    - 2004-04-24     14:56 字体标签 【标题标签】 使用方法：<h1>标题内容</h1> 标签解说：标题的大小一共有六种，两个标签一组，也就是从<h1>到<h6>，<h1>最大，<h6>最小。使用标题标签时，该标签会将字体变成粗体字，并且会自成一行。 使用范例： 原始码 呈现结果 <h1>标题一</h1> 标题一 <h2>标题二</h2> 标题二 <h3>标题三</h3> 标题三 <h4>标题四</h4> 标题四 <h5>标题五</h5> 标题五 <h6>标题六</h6> 标题六 【设定字体大小标签】 使用方法：<font size=3>文字内容</font> 标签解说：标题的大小一共有七种，也就是<font size=1>（最小）到<font size=7>（最大），另外，还有一种写法：<font size=+1>文字内容</font>，其意思就是说：比预设字大一级。当然也可以 font size=+2（比预设字大二级），或是 font size=-1（比预设字小一级），以一般而言，预设字体多为 3。 使用范例： 原始码 呈现结果 <font size=1>字体一</font> 或是 <font size=-2>字体一</font> 字体一 <font size=2>字体二</font> 或是 <font size=-1>字体二</font> 字体二 <font size=3>字体三</font> 或是 <font size=+0>字体三</font> 字体三 <font size=4>字体四</font> 或是 <font size=+1>字体四</font> 字体四 <font size=5>字体五</font> 或是 <font size=+2>字体五</font> 字体五 <font size=6>字体六</font> 或是 <font size=+3>字体六</font> 字体六 <font size=6>字体七</font> 或是 <font size=+4>字体七</font> 字体七 【字型变化标签】 使用方法：<b>文字</b> 标签解说：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如‘强调’、‘原始码’...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标签。 使用范例： 原始码 呈现结果 <b>粗体</b> 粗体 <i>斜体</i> 斜体 <u>底线</u> 底线 <sup>上标</sup> 上标 <sub>下标</sub> 下标 <tt>打字机</tt> 打字机 <blink>闪烁</blink>（ie没效果） 闪烁 <em>强调</em> 强调 <strong>加强</strong> 加强 <samp>范例</samp> 范例 <code>原始码</code> 原始码 <var>变数</var> 变数 <dfn>定义</dfn> 定义 <cite>引用</cite> 引用 <address>所在地址</address> 所在地址 【文字颜色设定】 使用方法：<font color="#fefecb">文字颜色</font> 标签解说：文字也可以设定 颜色喔！至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧！ 使用范例： 原始码 呈现结果 <font color="#ff0000">红</font> 红色的字喔！ <font color="#ff8000">橙</font> 橙色的字喔！ <font color="#ffff00">黄</font> 黄色的字喔！ <font color="#00ff00">绿</font> 绿色的字喔！ <font color="#0080ff">蓝</font> 蓝色的字喔！ <font color="#0000a0">靛</font> 靛色的字喔！ <font color="#8000ff">紫</font> 紫色的字喔！ <font color="#000000">黑</font> 黑色的字喔！ <font color="#c0c0c0">灰</font> 灰色的字喔！ zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

表单标签    - 2004-04-24     14:56 表单标签 【表单的用途】 对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着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="数值"，是设定此一栏位可设定输入的最大长度。 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，是设定此一栏位为预设选取值。 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，是设定此一栏位为预设选取值。 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="数值"，是设定此一栏位可设定输入的最大长度。 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（绝对置下）等。 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（绝对置下）等。 NAME="名称"，是设定此一按钮的名称。 VALUE="文字"，是设定此一按钮上要呈现的文字。 ALIGN="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。 隐藏栏位：表单中有时有些东西因为某些因素，不想让使用者看到，但因程式需要却又不得不存在，此时，我们就可以利用TYPE=" HIDDEN "来产生一个隐藏的栏位。 呈现结果 隐藏栏位： 原始码 <FORM> 隐藏栏位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到"> </FORM> 其有下列可设定之属性： NAME="名称"，是设定此一栏位的名称。 VALUE="文字"，是设定此一栏位的值、文字或意义。 NAME="名称"，是设定此一栏位的名称。 VALUE="文字"，是设定此一栏位的值、文字或意义。 【大量文字输入元件】 有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用<TEXTAREA></TEXTAREA>来产生一个可以输入大量文字的元件，夹在两个标签中的文字会出现在框框中，可作为预设文字。 呈现结果 请输入您的意见： 原始码 <FORM> 请输入您的意见：<BR> <TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA> </FORM> 其有下列可设定之属性： NAME="名称"，是设定此一栏位的名称。 WRAP="设定值"，是设定此一栏位的换行模式。设定值有三种：OFF（输入文字不会自动换行）、VIRTUAL（输入文字在萤幕上会自动换行，不过若是使用者没有自行按下ENTER换行，送出资料时，也视为没有换行）、PHYSICAL（输入文字会自动换行，送出资料时，会将萤幕上的自动换行，视为换行效果送出）。 COLS="数值"，是设定此一栏位的行数（横向字数）。 ROWS="数值"，是设定此一栏位的列数（垂直字数）。 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，是设定此一栏位为复选，可以一次选好几个选项。 SIZE="数值"，是设定此一栏位的大小，预设值为1，若是您的选项有四个，然后您将SIZE设成4，那么，下拉式选单便会变成选项方块，将四个选项一起呈现在方块中。 MULTIPLE，是设定此一栏位为复选，可以一次选好几个选项。 zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

序列标签    - 2004-04-24     14:56 序列标签 【无序标签】 序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。至于“有序条列”就是指各条列之间是有顺序的，从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> 小标题 zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

框架标签    - 2004-04-24     14:56 框架标签 【框架的基本概念】 首先，各位先看看右手边这张图，我将利用这张图来作解说，这样子，讲起来可能会清楚一点。 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>是派不上用场的，所以躲到一旁凉快去了！ 各位会发现，奇怪，在上面的语法中，怎么都没见到<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%"也是可以的。 在<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那么就完工啰！当然，这是一个最阳春的分割法，我会再将一些进阶的标签在底下一一说明。 看见了没？原本的<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这个参数，那么，这个新连到的网站，就会重新占据整个萤幕啦！   zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

排版标签    - 2004-04-24     14:56 排版标签 【文字置左、置中、置右】 使用方法：老实说，刚刚我们学过的分段标签<p>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示： 原始码 呈现结果 <p align="left">文字靠左</p> 文字靠左 <p align="center">文字置中</p> 文字置中 <p align="right">文字靠右</p> 文字靠右 标签解说：嗯！秘诀就在于“align=对齐位置”而已啦！align是分段标签<p>的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。 【置中标签】 使用方法：<center>这是置中</center> 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！ 使用范例： 原始码 呈现结果 <center>这是最中间</center> 这是最中间 【向右缩排标签】 使用方法：<blockquote>要缩排的文字</blockquote> 标签解说：利用<blockquote></blockquote>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。 使用范例： 原始码 呈现结果 <blockquote>缩排1单位</blockquote> 缩排1单位 <blockquote><blockquote>缩排2单位</blockquote></blockquote> 缩排2单位 【保存原始格式标签】 使用方法：<pre>文字内容<pre> 标签解说：利用<pre></pre>这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。 使用范例： 原始码 呈现结果 <pre> 文　字 　格　式 </pre> 文　字 　格　式 zhi 发表于 14:56   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

截图软件全接触    - 2004-04-08     04:58 最基本的截图方法——初级使用篇   上面所说的截图方法，可以说是“最原始”的了，事实上很少人如此截图的，因为这样做既不方便，效率也不高。通常我们还是借助于专用截图软件。   最常见的截图方式是截取全屏画面、单个窗口或局部画面，下面就以HyperSnap-DX为例，分别介绍一下。   在截取之前，请先打开HyperSnap-DX的菜单“Options”菜单，执行“Activate Hot Keys”命令，激活默认的截图热键。在接下来的操作中，你会体会到使用热键的好处（如图1）！ 截取全屏画面   最小化HyperSnap-DX，按下热键［Ctrl+Shift+F］，软件旋即弹出截图预览窗口，当前桌面已经被截取下来了，存盘即可。 截取当前窗口   按下热键［Ctrl+Shift+W］，这时桌面上显示出一个闪烁的黑色边框，黑框随鼠标的移动而移动，将之移至需要截取的窗口中，点击一下即可。 如果按下热键［Ctrl+Shift+A］，可以快速地截取当前活动窗口，即处于活动状态的那个窗口。 截取局部画面   截取局部画面也称之为“区域截图”，意即截取当前屏幕的部分区域，由你自行定义，因此灵活性很大。按下热键［Ctrl+Shift+R］，这时屏幕上出现一个十字状的坐标，用鼠标拖出起点与终点，然后点击一下，由起点与终点组成的区域就被截取下来了！ 截出“眩”的效果——高级应用篇   截图也有特效？当然有了！因为有些效果通过正常途径是无法截取的，必须使用特殊方法。而众多的截图软件，几乎每种都有自己的看家本领——独特的功能。 静态图像截取 视频静态画面的截取   大家有没有这样的经历，在播放VCD或DVD时，很想把美丽的镜头截取下来欣赏，按下［Print Screen］键，得到的是一个黑乎乎的画面；即便用HyperSnap-DX的热键［Ctrl+Shift+W］截取，结果如出一辙。   其实HyperSnap-DX是完全可以胜任的，不过必须先做准备工作：   打开菜单［Capture］→［Enable Special Capture (DirectX,Glide)...］，在设置对话窗口，选中所有选项，将“Gamma Correction Fact”设置为“1”，按下［OK］确定（如图2）。   按下截取热键［Scroll Lock］（注意这个键，与普通截图的热键完全不同！），可以看到，视频画面似乎“暂停”了一下，然后你心爱的画面就出现了。   这里有一个小技巧，当画面比较暗时，可将 “Gamma Correction Fact”的设置值提高，然后再截取，这样截出来的画面亮一些。   通常的视频播放软件如《超解解霸》、《东方影都》、《金山影霸》、《WinDVD》等等，这类软件自身也提供了截取视频影像图片的功能（窗口上的相机状的按钮），同样可以获得很好的效果，具体的使用方法我们将在A42版介绍。 从程序文件中截图   我们所熟悉的可执行文件EXE与动态链接文件DLL中，都包含有图片！位图、图标和鼠标箭头一个也不能少。通过SnagIt可以将这些图片从中提取出来！呵呵，很神奇吧？   打开软件SnagIt，点击主界面中的“Image Capture”图标，依次选择菜单［Input］→［vanced］→［Program File］，再选取菜单［Output］→［File］。设置完毕，按SnagIt默认的截图热键［Ctrl+Shift+P］，出现一截取画面，点击“Browse...”选择程序文件，就以SnagIt的程序文件SnagIt32.exe为例（如图3），分别点击“Bitmaps”、“Icons”和“Cursors”标签，可以看到程序文件中的位图、图标与鼠标箭头已被截取出来了！选中需要截取的图片，点击图中的［Capture］就可以了。 轻松截取子菜单或按钮   我们如果想截取某个菜单下的子菜单或是某个按钮，一般情况下是截取当前的窗口，然后再剪切。其实有更好的办法啦。   先看截取子菜单，用的软件是SnagIt。点击主界面中的“Image Capture”图标，再依次点击菜单［Input］→［Menu］。然后将鼠标移至需要截取的子菜单中，按下热键［Ctrl+Shift+P］就可以了。   再看截取按钮，用的软件是HyperSnap-DX。首先将鼠标移至按钮上，这时按钮会凸起，表示已选定该按钮，按下按钮专用截取热键［Ctrl+Shift+B］，就是这样轻松。   现在你明白截取菜单、按钮是多么轻松了吧。 同时截取多个画面区域   这种截图方式就是将若干个相邻或不相邻的区域同时截取下来，这在截取多个连续的子菜单或不相邻的工具栏时特别有用。   以HyperSnap-DX为例。打开Word中的某个多级菜单，将鼠标指向其中最低一级的子菜单，按下热键［Ctrl+Shift+M］，子菜单四周出现一个闪烁的黑色边框，点击一下鼠标，该子菜单即刻反黑显示，表明已被选定；同理，依次选定其他的子菜单，全部选定后按下回车键，则整个菜单就被截取下来了（如图4）。   这种截取方式的好处在于我们无需做任何处理，即可将各级菜单一次性截取下来，而且菜单与菜单之间为空白。若采用其他方式截取，菜单与菜单之间的部分必须要另作处理，不如这种方式来得直接与方便。   若使用SnagIt作多个区域的截图测试，会发现它提供的功能更强大，因为它允许你定义截取的范围，而HyperSnap-DX仅限定于截取窗口与工具栏。打开SnagIt，点击主界面中的“Image Capture”图标，然后选择“Input”菜单中的“Region”与“Multiple Area”。截图时按下热键［Ctrl+Shift+P］，此时鼠标变为手状，在屏幕上拖出一块区域，该区域以黑色显示；接着再拖出另一块区域，选中所有你想截取的区域。最后按右键选择“Finish”，得到的截图是所有区域的交集（如图5）。 截取网页图片   这是SnagIt的一项独有的功能，它的作用是可以将网页中的图片一次性截取（其实就是下载）完毕，免得一张张地“另存”，相当麻烦。   打开SnagIt，点击主面板中的“Web Capture”，开启网页截图功能。这一步一定要做，要不然以下的步骤可能继续不了。打开菜单［Input］→［Fixed Address］→［Properties］，在“Web page address”中输入目标地址。   接着打开菜单“Output”，选择“Catalog”，意即将所截图片将保存至某目录中，目录路径请在［Output］→［Properties］→［Catalog Browser］中指定。   再接下来设置网页过滤，打开菜单“Filters”中的“Properties”选项，弹出如图6所示的对话框。   设置完毕后按［OK］键确认，继续按截图热键［Ctrl+Shift+P］，SnagIt自动连接至该网页，执行截图任务。并出现一个下载进度界面，当进度条达到100%时，会出现一个报告窗口“Web Capture Summary”，紧接着便会弹出“SnagIt Capture Preview”窗口，所有已抓图片的链接清单、图片的格式、详细的网址路径等等信息一目了然，若有不需要的图片，将前面的勾去掉（如图7）。   最后点击上图窗口工具栏中的［Finish］按钮，截取的所有图片会按照刚才设定的“Catalog”路径保存起来。同时SnagIt会自动打开“SnagIt Catalog Browser”浏览器，很方便吧？   如果你想从互联网上搜集图片或是下载图片库，这种截图方式最合适不过了！ 截取DOS窗口   这里指的是截取Windows环境下DOS程序的界面，可以利用SnagIt来实现。点击[Image Capture]按钮，然后选择[Input]→[Advanced]→[Full-screen DOS]，接着在Windows的DOS模式下执行一个程序，截取时按快捷键[Print Screen]就行啦（如图8）。 动态画面截取 截取并输出为GIF动画   向大家介绍一个小软件Gif·gIf·giF，顾名思义，这是与动态图像格式GIF有关的软件。它可以将所选区域的动态画面截取下来并保存为GIF动画（如图9）！   这个软件几乎不需要设置就可使用：先点击［Select Area］按钮，用鼠标在桌面上选择截取区域，选定后按下［Start］，软件倒计时三秒后自动截取。不过，如果指定的区域内没有动作发生，会自动停止截取。结束时按［Stop］按钮，这时会显示所截的动画帧数与生成文件的大小。最后选择菜单［File］→［Save］将之保存为GIF文件就可以了。   此外，软件提供“Edit”菜单，可截取动画进行编辑。但是未注册的版本不能使用该菜单。   这个软件最大的好处在于可以直接生成GIF文件，且生成的文件较小，便于在网络上传输或直接引用。 截取并输出为AVI动画   截取动态画面并非高不可攀，常用的截图软件SnagIt就提供了这样的功能。不信？那我们就来看看！   看到SnagIt主面板上的“Video Capture”图标了吗？按下去！接着点击“Input”菜单，选择“Region”。其实选其他的也行，但选“Region”便于选择截取动态画面的区域。按热键［Ctrl+Shift+P］，这时鼠标变成手状，按住不动，拖出一个选取区域，该区域以红色线条显示，松开鼠标，即变为斜线边框。同时出现如图10所示的“SnagIt Video Capture”窗口，点击［Start］开始截取。   在截图的过程中，斜线边框变为纯黑边框，且不停地闪烁，同时SysTray中出现一个闪动的摄像机的图标，表明正在录制动态图像。截取完毕仍旧按［Ctrl+Shift+P］，仍旧出现“SnagIt Video Capture”窗口，不过这次需要按［Stop］停止。此时黑框消失，重新变为斜线边框。弹出一个预览窗口，可以播放所截动画，满意的话按［Finish］按钮存盘，保存的格式为AVI（如图10）。   大家知道AVI是一种视频影像格式，如果你希望在截取的AVI动态文件中添加声音，可以在截取前点击SnagIt的“Input”菜单，将“Record Audio”选上即可。   另外还有两款更强大的动态图像截取工具可截取生成AVI格式的动画，且具备编辑功能，它们是HyperCam和Camtasia，。 截取并输出为SWF动画   Flash Cam可以将捕捉到的单独影像帧连起来成为一个SWF文件，还可以插入标题文字、录制旁白声音、自定义鼠标轨迹，并生成HTML+SWF文件预览在网页中的效果！   软件的安装自不必多说，运行Flash Cam，出现主界面，软件采用了向导的方式帮助新手。截取前打开菜单［Options］→［Recording Options］，在出现的窗口中，选中全部选项，按［Save］确定（如图11）。   双击界面中的“New Movie”图标，在弹出的窗口中选择截取的区域范围，这里我们选“640×480”，按［Advanced］可做更多设定。   按下［Next］，背景中出现一个虚框，即刚才指定的区域范围，可移动虚框至合适的位置，或者按虚框右下角调节其大小。   点击虚框中的［Record］按钮，软件自动隐藏至系统工具栏中，缩成一个图标，同时截取任务开始执行，只要当前区域有鼠标活动，都能捕捉下来。   用鼠标单击系统工具栏中的Flash Cam图标，结束截取任务，软件处理后会列出所截取的每一帧，对于不需要的可以删除，双击之可对之进行修改。   这是关键的一步，因为我们可以给帧做注释或添加链接。双击某一帧进入到帧修改模式，打开“Insert”菜单，共有四个选项，可以为当前帧添加文字注释（Caption）、高亮边框（Highlight Box）、点击按钮（Click Box）和图像（Image），这些对象可移至帧中的任意位置（如图12）。   若想添加语音解说，单击[Frame]→[Audio]命令，出现音频添加窗口（如图13），打开已存在的音频文件或现场录制语音注解。   修改完所有的帧之后，回到主界面中设置整个影片的属性，点击“Movie”菜单下“Preferences”命令，可以对每一帧的文字注释的显示速度、鼠标动作速度、键盘动作速度、帧与帧之间的过渡速度以及图像的压缩率作个性化设置（如图14）。   设置片头与片尾：选择［Movie］→［Start and End］，在弹出的窗口中点击［Browse］选择片头装载的文件，选中“Close Browse Window”意即放映结束后关闭浏览器。   输出影片，选择［File］→［Export］，可以看出，Flash Cam提供了多种输出方式，比如EXE文件，Movie、Word、Outlook、FTP等等。一般选择“Movie”，最终可生成含有SWF文件的HTML网页！想预览一下效果，可以点击主界面工具栏中的［Preview］按钮（如图15）。   如此，一段Flash截图就可生成了！利用Flash格式截取动态图像的好处多多，首先是生成的文件小，其次是允许编辑关键帧，并且可以加入互动对象，如点击按钮与链接目标。最后，软件可自动生成播放控制条，大大方便了浏览者！   这么说罢，如果你想制作出相当棒的Flash格式的教学影片，那么利用这款影像捕捉工具最合适不过了！ zhi 发表于 04:58   |  阅读全文    | 评论( 0 )| 引用(trackback 0 )

隐藏输入框的边框    - 2004-04-07     02:26 CSS实例：横线样式的输入框   2002-09-27· · ··   　　在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线，很多朋友对此很感兴趣。其实要实现这样的效果并不困难，我们只要用一段简短的CSS代码控制好表单输入框的样式即可。  　　示例如下：  　　请输入您的用户名： 　　下面我们就来看看这段实现效果的css代码。它主要运用了表格边框的样式控制，将左、上、右边框设置为none，只剩下下边框即可。   　　<style type="text/css"> 　　<!-- 　　.line{ 　　　　BORDER-LEFT-STYLE: none; 　　　　BORDER-RIGHT-STYLE: none; 　　　　BORDER-TOP-STYLE: none 　　} 　　--> 　　</style>   　　样式表中代码解释如下： 　　“BORDER-LEFT-STYLE:none”： 隐藏左边框 　　“BORDER-RIGHT-STYLE: none”： 隐藏右边框 　　“BORDER-TOP-STYLE: none”： 隐藏上边框 　　“BORDER-bottom-STYLE: none”： 隐藏下边框。 　　下面让我们一起来看一个应用实例： 　　<html> 　　<head> 　　<title>横线式输入框</title> 　　<style type="text/css"> 　　<!-- 　　.line{ 　　　　BORDER-LEFT-STYLE: none; 　　　　BORDER-RIGHT-STYLE: none; 　　　　BORDER-TOP-STYLE: none ; 　　} 　　--> 　　</style> 　　<!--注：此段为css代码，你还可以在这里设置出其他的样式效果--> 　　</head> 　　<body bgcolor="#FFFFFF" text="#000000"> 　　隐藏的边框的输入框： 　　<p>用户名：<input type="text" name="name" class=line> 　　 <!-- 注：class=line 这条语句将你预设的css应用在表单中 --> 　　</p> 　　</body> 　　</html>