Windows LiveWindows Live™
 
 
locker2man's profile探索Msn Spaces的奥秘BlogLists Tools Help

Blog
    08/07/2005

    HTML基础学习之调色原理

    三原色可混合成一千六佰多万种顏色
    HTML的顏色表示可分两种：
        以命名方式定义常用的顏色，如RED。
        以RGB值表示，如#FF0000表示red。
    命名方式涵括的色种不多亦不甚方便，较少采用，以下介紹 RGB 值的原理：
        众所皆知顏色是由 "red" "green" "blue" 三原色组合而成的，在HTML中对于彩度的定义是十六进位的，对于三原色HTML分別给予两个十六进位去定义，也就是每个原色可有256种彩度，故此三原色可混合成一千六佰多万种顏色。
    例如：
    白色的组成是red=ff, green=ff, blue=ff, RGB值即为 ffffff
    红色的组成是red=ff, green=00, blue=00, RGB值即为 ff0000
    绿色的组成是red=00, green=ff, blue=00, RGB值即为 00ff00
    蓝色的组成是red=00, green=00, blue=ff, RGB值即为 0000ff
    黑色的组成是red=00, green=00, blue=00, RGB值即为 000000
    应用时常在每个RGB值之前加上符號#以示分別，但不加亦可。
    颜色 英文代码 形像颜色 HEX格式 RGB格式
      LightPink 浅粉红 #FFB6C1 255,182,193
      Pink 粉红 #FFC0CB 255,192,203
      Crimson 猩红 #DC143C 220,20,60
      LavenderBlush 脸红的淡紫色 #FFF0F5 255,240,245
      PaleVioletRed 苍白的紫罗兰红色 #DB7093 219,112,147
      HotPink 热情的粉红 #FF69B4 255,105,180
      DeepPink 深粉色 #FF1493 255,20,147
      MediumVioletRed 适中的紫罗兰红色 #C71585 199,21,133
      Orchid 兰花的紫色 #DA70D6 218,112,214
      Thistle 蓟 #D8BFD8 216,191,216
      plum 李子 #DDA0DD 221,160,221
      Violet 紫罗兰 #EE82EE 238,130,238
      Magenta 洋红 #FF00FF 255,0,255
      Fuchsia 灯笼海棠(紫红色) #FF00FF 255,0,255
      DarkMagenta 深洋红色 #8B008B 139,0,139
      Purple 紫色 #800080 128,0,128
      MediumOrchid 适中的兰花紫 #BA55D3 186,85,211
      DarkVoilet 深紫罗兰色 #9400D3 148,0,211
      DarkOrchid 深兰花紫 #9932CC 153,50,204
      Indigo 靛青 #4B0082 75,0,130
      BlueViolet 深紫罗兰的蓝色 #8A2BE2 138,43,226
      MediumPurple 适中的紫色 #9370DB 147,112,219
      MediumSlateBlue 适中的板岩暗蓝灰色 #7B68EE 123,104,238
      SlateBlue 板岩暗蓝灰色 #6A5ACD 106,90,205
      DarkSlateBlue 深岩暗蓝灰色 #483D8B 72,61,139
      Lavender 熏衣草花的淡紫色 #E6E6FA 230,230,250
      GhostWhite 幽灵的白色 #F8F8FF 248,248,255
      Blue 纯蓝 #0000FF 0,0,255
      MediumBlue 适中的蓝色 #0000CD 0,0,205
      MidnightBlue 午夜的蓝色 #191970 25,25,112
      DarkBlue 深蓝色 #00008B 0,0,139
      Navy 海军蓝 #000080 0,0,128
      RoyalBlue 皇军蓝 #4169E1 65,105,225
      CornflowerBlue 矢车菊的蓝色 #6495ED 100,149,237
      LightSteelBlue 淡钢蓝 #B0C4DE 176,196,222
      LightSlateGray 浅石板灰 #778899 119,136,153
      SlateGray 石板灰 #708090 112,128,144
      DoderBlue 道奇蓝 #1E90FF 30,144,255
      AliceBlue 爱丽丝蓝 #F0F8FF 240,248,255
      SteelBlue 钢蓝 #4682B4 70,130,180
      LightSkyBlue 淡蓝色 #87CEFA 135,206,250
      SkyBlue 天蓝色 #87CEEB 135,206,235
      DeepSkyBlue 深天蓝 #00BFFF 0,191,255
      LightBLue 淡蓝 #ADD8E6 173,216,230
      PowDerBlue 火药蓝 #B0E0E6 176,224,230
      CadetBlue 军校蓝 #5F9EA0 95,158,160
      Azure 蔚蓝色 #F0FFFF 240,255,255
      LightCyan 淡青色 #E1FFFF 225,255,255
      PaleTurquoise 苍白的绿宝石 #AFEEEE 175,238,238
      Cyan 青色 #00FFFF 0,255,255
      Aqua 水绿色 #00FFFF 0,255,255
      DarkTurquoise 深绿宝石 #00CED1 0,206,209
      DarkSlateGray 深石板灰 #2F4F4F 47,79,79
      DarkCyan 深青色 #008B8B 0,139,139
      Teal 水鸭色 #008080 0,128,128
      MediumTurquoise 适中的绿宝石 #48D1CC 72,209,204
      LightSeaGreen 浅海洋绿 #20B2AA 32,178,170
      Turquoise 绿宝石 #40E0D0 64,224,208
      Auqamarin 绿玉\碧绿色 #7FFFAA 127,255,170
      MediumAquamarine 适中的碧绿色 #00FA9A 0,250,154
      MediumSpringGreen 适中的春天的绿色 #F5FFFA 245,255,250
      MintCream 薄荷奶油 #00FF7F 0,255,127
      SpringGreen 春天的绿色 #3CB371 60,179,113
      SeaGreen 海洋绿 #2E8B57 46,139,87
      Honeydew 蜂蜜 #F0FFF0 240,255,240
      LightGreen 淡绿色 #90EE90 144,238,144
      PaleGreen 苍白的绿色 #98FB98 152,251,152
      DarkSeaGreen 深海洋绿 #8FBC8F 143,188,143
      LimeGreen 酸橙绿 #32CD32 50,205,50
      Lime 酸橙色 #00FF00 0,255,0
      ForestGreen 森林绿 #228B22 34,139,34
      Green 纯绿 #008000 0,128,0
      DarkGreen 深绿色 #006400 0,100,0
      Chartreuse 查特酒绿 #7FFF00 127,255,0
      LawnGreen 草坪绿 #7CFC00 124,252,0
      GreenYellow 绿黄色 #ADFF2F 173,255,47
      OliveDrab 橄榄土褐色 #556B2F 85,107,47
      Beige 米色(浅褐色) #6B8E23 107,142,35
      LightGoldenrodYellow 浅秋麒麟黄 #FAFAD2 250,250,210
      Ivory 象牙 #FFFFF0 255,255,240
      LightYellow 浅黄色 #FFFFE0 255,255,224
      Yellow 纯黄 #FFFF00 255,255,0
      Olive 橄榄 #808000 128,128,0
      DarkKhaki 深卡其布 #BDB76B 189,183,107
      LemonChiffon 柠檬薄纱 #FFFACD 255,250,205
      PaleGodenrod 灰秋麒麟 #EEE8AA 238,232,170
      Khaki 卡其布 #F0E68C 240,230,140
      Gold 金 #FFD700 255,215,0
      Cornislk 玉米色 #FFF8DC 255,248,220
      GoldEnrod 秋麒麟 #DAA520 218,165,32
      FloralWhite 花的白色 #FFFAF0 255,250,240
      OldLace 老饰带 #FDF5E6 253,245,230
      Wheat 小麦色 #F5DEB3 245,222,179
      Moccasin 鹿皮鞋 #FFE4B5 255,228,181
      Orange 橙色 #FFA500 255,165,0
      PapayaWhip 番木瓜 #FFEFD5 255,239,213
      BlanchedAlmond 漂白的杏仁 #FFEBCD 255,235,205
      NavajoWhite Navajo白 #FFDEAD 255,222,173
      AntiqueWhite 古代的白色 #FAEBD7 250,235,215
      Tan 晒黑 #D2B48C 210,180,140
      BrulyWood 结实的树 #DEB887 222,184,135
      Bisque (浓汤)乳脂,番茄等 #FFE4C4 255,228,196
      DarkOrange 深橙色 #FF8C00 255,140,0
      Linen 亚麻布 #FAF0E6 250,240,230
      Peru 秘鲁 #CD853F 205,133,63
      PeachPuff 桃色 #FFDAB9 255,218,185
      SandyBrown 沙棕色 #F4A460 244,164,96
      Chocolate 巧克力 #D2691E 210,105,30
      SaddleBrown 马鞍棕色 #8B4513 139,69,19
      SeaShell 海贝壳 #FFF5EE 255,245,238
      Sienna 黄土赭色 #A0522D 160,82,45
      LightSalmon 浅鲜肉(鲑鱼)色 #FFA07A 255,160,122
      Coral 珊瑚 #FF7F50 255,127,80
      OrangeRed 橙红色 #FF4500 255,69,0
      DarkSalmon 深鲜肉(鲑鱼)色 #E9967A 233,150,122
      Tomato 番茄 #FF6347 255,99,71
      MistyRose 薄雾玫瑰 #FFE4E1 255,228,225
      Salmon 鲜肉(鲑鱼)色 #FA8072 250,128,114
      Snow 雪 #FFFAFA 255,250,250
      LightCoral 淡珊瑚色 #F08080 240,128,128
      RosyBrown 玫瑰棕色 #BC8F8F 188,143,143
      IndianRed 印度红 #CD5C5C 205,92,92
      Red 纯红 #FF0000 255,0,0
      Brown 棕色 #A52A2A 165,42,42
      FireBrick 耐火砖 #B22222 178,34,34
      DarkRed 深红色 #8B0000 139,0,0
      Maroon 栗色 #800000 128,0,0
      White 纯白 #FFFFFF 255,255,255
      WhiteSmoke 白烟 #F5F5F5 245,245,245
      Gainsboro Gainsboro #DCDCDC 220,220,220
      LightGrey 浅灰色 #D3D3D3 211,211,211
      Silver 银白色 #C0C0C0 192,192,192
      DarkGray 深灰色 #A9A9A9 169,169,169
      Gray 灰色 #808080 128,128,128
      DimGray 暗淡的灰色 #696969 105,105,105
      Black 纯黑 #000000 0,0,0
    23:04 | Add a comment | Read comments (28) | Permalink | View trackbacks (47) | Blog it | HTML 系列
    05/07/2005

    网页制作十大要点

    01.归类编排
    制作网页不能走一步改一步，那会累死你的；从资料的收集开始，你就要分类存放好；制作前跟写文章一样，要拟订大纲与细节；其他诸如：版面如何配置、视窗如何取用....，这都要花点时间去衡量与分析的；就网页编排來說，每一适当語法都要自行分段，各主要內容应标注<!--开始与結束-->，以利日后维护。

    02.笔记帮手
    別以為所有网页编辑器工具都很好用，请试一试电脑內附的记事本；尤其属于文字编辑的网页制作，不但方便存放与携带，速度比你在任何软件上执行还快很多；我是把经常把要用到的JavaScript或资料等，分类用记事本存好，当编辑要用到时，就很方便了。

    03.备齐工具
    有许多很好用的网页制作简便工具，如：色码选择、影像地图、文字空格处理器等等；这不但能加快你的速度，更能提升你的制作水准。

    04.善用表格
    不论內为文字或图片、不论是单页或分割视窗，表格是你整理版面最好的语法；建议有时间，多参考別人是如何发挥表格強大的功能。

    05.巧用剪貼
    我不用编辑软件写网页，你一定会想說，这么多語法你怎能记得或一字一字刻上去；当然，熟能生巧是免不了的，最重要的还是我很彻底的使用剪(Cut)贴(Paste)功能。

    06.随时备份
    电脑是无情的，绝对不能太依赖它，不知到那一天，你数百小時的努力，真的会一时变成乌有；为了万一，养成随时按Save及定期备份资料习惯，这对你并不会太麻烦。

    07.上网时机
    我用80%时间在自己电脑上作业，20%上网测试收集资料；大部份都是在早晨上网，头脑不但清楚而且我不需要ADSL就能跑的很快，千万別把时间浪费在等待上；记得今天早点睡，明早起來试试看。

    08.不耻下问
    不懂才要学，不会就要问，这沒什么好丢脸的；一个简单问题，可能耗掉几小時甚至几天时间；问不到，找书來看或上网查，千万別趴在电脑前一直转来转去。

    09.观摩竞赛
    参观才会进步，观摩更能让你产生共鸣与创意；只有竞争才会进步，尽可能参加任何比賽，重点不在得奖，他会促使你更加努力以赴。

    10.登录搜索
    不要以为你做好的网站，自然会有人來参观；不断的找搜索引擎登录你的网站，否则再漂亮的网站或充实的內容，只能孤芳自赏了。

    11:38 | Add a comment | Read comments (45) | Permalink | View trackbacks (12) | Blog it | HTML 系列
    04/07/2005

    HTML基础学习之鼠标指针样式

    请将鼠标移动到链接上查看效果。
    手型
    代码：<A style="cursor:hand">手型</A>
    十字型
    代码：<A style="CURSOR: crosshair">十字型</A>
    文本型
    代码：<A style="CURSOR: text">文本型</A>
    等待效果
    代码：<A style="CURSOR: wait">等待效果</A>
    默认效果
    代码：<A style="CURSOR: default">默认效果</A>
    问号效果
    代码：<A style="CURSOR: help">问号效果</A>
    向右箭头效果
    代码：<A style="CURSOR: e-resize">向右箭头效果</A>
    向右上箭头效果
    代码：<A style="CURSOR: ne-resize">向右上箭头效果</A>
    向上箭头效果
    代码：<A style="CURSOR: n-resize">向上箭头效果</A>
    向左上箭头效果
    <A style="CURSOR: nw-resize">向左上箭头效果</A>
    向左箭头效果
    <A style="CURSOR: w-resize">向左箭头效果</A>
    向左下箭头效果
    代码：<A style="CURSOR: sw-resize">向左下箭头效果</A>
    向下箭头效果
    代码：<A style="CURSOR: s-resize">向下箭头效果</A>
    向右下箭头效果
    代码：<A style="CURSOR: se-resize">向右下箭头效果</A>
    由系统自动给出效果
    代码：<A style="CURSOR: auto">由系统自动给出效果</A>
    16:03 | Add a comment | Read comments (49) | Permalink | View trackbacks (15) | Blog it | HTML 系列
    03/07/2005

    HTML基础学习之CSS滤镜

    CSS全名是：Cascading Style Sheets；中文名称：叠加式样层。CSS不是一个浏览器插件，也不是一个单独的软件，它是微软为增强浏览器功能特别开发并整合在IE里面的一类功能集合。你可以在html标记中直接定义，也可以用式样表的方法进行链接。IE3.0支持CSS1.0版，IE4.0X则可支持CSS2.0版。滤镜是CSS2.0中的一项功能。Style属性如果用于文字可以在<span>和<td>标签中定义，如果用于图片可以在<img>标签中定义。使用CSS所提供的功能，可以使您的网页无比靓丽，给人留下难忘的回忆。
    语法：STYLE="filter:filtername(parameter1,parameter2,parameter3...)"
    其中：filtername为滤镜的名称；parameter1,parameter2等为滤镜的参数。
    滤镜名称及功能说明： （以下效果绝非使用Photoshop制作完成）
    1. Alpha:透明度
      参数设置：：Opacity=20,FinishOpacity=100,Style=1
    2. Blur:高速运动模糊效果
      参数设置：Add=1,Direction=90,Strength=5
    3. Chroma:特殊色彩的透明效果
      参数设置：Color=#FFFF00
    4. DropShadow:阴影效果
      参数设置：Color=red,OffX=3,OffY=3,Positive=1
    5. FlipH:水平镜像的效果
    6. FlipV:垂直镜像的效果
    7. Glow:物体边缘加发光效果
      参数设置：Color=red,Strength=5
    8. Gray:去掉图像的色彩效果
    9. Invert:反色效果
    10. Light:放置光源的效果
    11. Mask:透明的遮罩效果
      参数设置：Color=red
    12. Shadow:偏移的阴影效果
      参数设置：Color=red,Direction=45
    13. Wave:沿X轴波形扭曲效果
      扭曲效果演示
    14. XRay:X光照射
    22:17 | Add a comment | Read comments (18) | Permalink | View trackbacks (15) | Blog it | HTML 系列
    27/06/2005

    HTML基础学习之HTML表单

    第九课 HTML表单

    最基本的留言版应该大家都用过吧！没错这就是一个表单运用很好的例子。表单提供了一个管道让读者发表心声，让网站不再只是设计者的天下，而是能够让更多网友共同参与的地方。另外在商业用途上，表单也扮演着相当吃重的角色，藉由这些表单配合相关程序，使得公司能够在网络上发展电子商务，所以说表单可以说是网页实用化、商务化相当重要的一环喔！
    表单的用途
    • 对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CGI、JAVA Script程序或是ASP程序来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！
    • 本单元纯粹以介绍各式表单为主，至于一些CGI或ASP观念在此工友就不提出了，因为提供零碎的观念，倒不如去看看专门介绍CGI的书籍来的妥当。
    各种输入类型
    1. 文字输入列：每个表单之所以会有不同的类型，原因就在于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="数值"，是设定此一字段可设定输入的最大长度。
    2. 单选核取表单：利用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，是设定此一字段为预设选取值。
    3. 复选核取表单：利用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，是设定此一字段为预设选取值。
    4. 密码窗体：利用TYPE=" PASSWORD "就会产生一个密码窗体，密码窗体和文字输入窗体长得几乎一样，差别就在于密码窗体在输入时全部会以星号来取代输入的文字，以防他人偷窥。
      <FORM>
      请输入密码：<INPUT TYPE="PASSWORD" NAME="INPUT">
      </FORM>
      其有下列可设定之属性：
      • NAME="名称"，是设定此一字段的名称，程序中常会用到。
      • SIZE="数值"，是设定此一字段显现的宽度。
      • VALUE="预设内容"，是设定此一字段的预设内容，不过呈现出来仍是星号。
      • ALIGN="对齐方式"，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
      • MAXLENGTH="数值"，是设定此一字段可设定输入的最大长度。
    5. 送出按钮：通常我们窗体填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用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（绝对置下）等。
    6. 按钮组件：窗体中或是JAVA SCRIPT常会用到按钮来作一些效果，因此，我们可以利用TYPE=" BUTTON "来产生一个按钮，相当简单。
      <FORM>
      请按下按钮：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
      </FORM>
      其有下列可设定之属性：
      • NAME="名称"，是设定此一按钮的名称。
      • VALUE="文字"，是设定此一按钮上要呈现的文字。
      • ALIGN="对齐方式"，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。
    7. 隐藏字段：窗体中有时有些东西因为某些因素，不想让使用者看到，但因程序需要却又不得不存在，此时，我们就可以利用TYPE=" HIDDEN "来产生一个隐藏的字段。
      <FORM>
      隐藏字段：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到">
      </FORM>
      其有下列可设定之属性：
      • NAME="名称"，是设定此一字段的名称。
      • VALUE="文字"，是设定此一字段的值、文字或意义。
    8. 大量文字输入组件：有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用<TEXTAREA></TEXTAREA>来产生一个可以输入大量文字的组件，夹在两个卷标中的文字会出现在框框中，可作为预设文字。
      <FORM>
      请输入您的意见：<BR>
      <TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
      </FORM>
      其有下列可设定之属性：
      • NAME="名称"，是设定此一字段的名称。
      • WRAP="设定值"，是设定此一字段的换行模式。设定值有三种：OFF（输入文字不会自动换行）、VIRTUAL（输入文字在屏幕上会自动换行，不过若是使用者没有自行按下ENTER换行，送出资料时，也视为没有换行）、PHYSICAL（输入文字会自动换行，送出资料时，会将屏幕上的自动换行，视为换行效果送出）。
      • COLS="数值"，是设定此一字段的行数（横向字数）。
      • ROWS="数值"，是设定此一字段的列数（垂直字数）。
    9. 下拉式选单：下拉式选单令整个网页看起来有很专业的感觉，我们只要利用<SELECT name=名称>便可以产生一个下拉式选单，另外，还需要配合<OPTION selected>卷标来产生选项，这样才算完整喔！
      <FORM>
      您喜歡看書嗎？：
      <SELECT NAME="LIKE">
      <OPTION VALUE="非常喜欢">非常喜欢
      <OPTION VALUE="还算喜欢">还算喜欢
      <OPTION VALUE="不太喜欢">不太喜欢
      <OPTION VALUE="非常讨厌">非常讨厌
      </SELECT>
      </FORM>
      其有下列可设定之属性：
      • SIZE="数值"，是设定此一字段的大小，默认值为1，若是您的选项有四个，然后您将SIZE设成4，那么，下拉式选单便会变成选项方块，将四个选项一起呈现在方块中。
      • MULTIPLE，是设定此一字段为复选，可以一次选好几个选项。
    11:14 | Add a comment | Read comments (6) | Permalink | View trackbacks (5) | Blog it | HTML 系列
    26/06/2005

    HTML基础学习之HTML序列卷标

    第九课 HTML序列卷标

    什么叫做序列卷标？其实，这是一个大家都蛮熟悉的东西，只是在网页中换个名称来称呼罢了，序列卷标的功能在WORD里面叫做「项目符号及编号」，也就是将每一要点以数字，如：1.2.3.4…或符号一条一条的清楚的列出的功能。
    无序卷标
    1. 序列卷标基本上可分为两种，一种是「无序条列」，一种是「有序条列」。所谓「无序条列」当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序卷标，在各条列前面均有一符号以示区隔。至于「有序条列」就是指各条列之间是有顺序的，从1、2、3…一直延伸下去。
    2. 我们先来看看「无序列表卷标」如何使用：
      <UL>
      <LI>姓名
      <LI>生日
      <LI>星座
      </UL>
      其中<UL>卷标即为「无序列表卷标」，每增加一列内容，就必须加一个<LI>。
    3. 前面的符号一定是要圆形的吗？不，我们可以加入TYPE="形状名称"属性来改变其符号形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种。
      <UL TYPE="CIRCLE">
      <LI>姓名
      <LI>生日
      <LI>星座
      </UL>
    有序卷标
    1. 接下来，我们来看看「有序列表卷标」如何使用：
      <OL>
      <LI>姓名
      <LI>生日
      <LI>星座
      </OL>
      其中<OL>卷标即为「有序列表卷标」，每增加一列内容，就必须加一个<LI>。
    2. 和无序列表卷标一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种：
      <OL TYPE="A">
      <LI>姓名
      <LI>生日
      <LI>星座
      </OL>
    3. 另外，我们亦可指定序列起始的数目，其方法如下：
      <OL START="8">
      <LI>姓名
      <LI>生日
      <LI>星座
      </OL>
    定义列表卷标
    • 「定义列表卷标」也是属于序列卷标之一。
      <DL>
      <DT>小标题
      <DD>标题的内容说明
      </DL>
      11:20 | Add a comment | Read comments (5) | Permalink | View trackbacks (4) | Blog it | HTML 系列
      25/06/2005

      HTML基础学习之HTML框架（二）

      第八课 HTML框架（二）

      <FRAMESET COLS="120,*" frameborder=0 framespacing=5>
      1. COLS="120,*"
        就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS="30,*,50" （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！
      2. ROWS="120,*"
        就是横向切割画面，也就是将画面上下分开，切法同上。
      3. frameborder=0
        设定框架的边框，其值只有0和1 ，0就是不要边框， 1就是要显示边框。边框是无法调整粗细的。
      4. framespacing=5
        表示框架与框架间的保留空白的距离，以免看起来太挤。
      <FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>
      1. SRC="a.htm"
        设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚）
      2. NAME="1"
        设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。
      3. frameborder=0
        设定框架的边框，其值只有0和1 ， 0就是不要边框，1就是要显示边框。边框是无法调整粗细的。
      4. scrolling="no"
        设定是否要显示滚动条，YES是要显示滚动条，NO是无论如何都不要显示，AUTO是视情况显示。
      5. noresize
        设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。
      6. marginhight=2
        表示框架高度部份边缘所保留的空间。
      7. marginwidth=2
        表示框架宽度部份边缘所保留的空间。
      <noframe>
      1. 使用方法：<noframe>请换有支持Frame功能的浏览器</noframe>
      2. 卷标解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此卷标，让这些网友知道，该换换浏览器了。或者，你也可以在这卷标中，摆上没有Frame语法的网页卷标，那么，没有支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。
      target=框窗名称
      1. 使用方法：<A HREF="d1-1.htm" target=3>显示内容</A>
      2. 卷标解说：常常有一个情况是，我想在框窗1的地方按下连结，但是希望他的内容出现在框窗3中（请参照上面那个图），那应该如何写呢？就像上面加个target=框窗名称 就行啦！
      target=_top
      1. 使用方法：<A HREF="http://www.mainsoft.net" target=_top>链接名称</A>
      2. 卷标解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入target=_top这个参数，那么，这个新连到的网站，就会重新占据整个屏幕啦！
      22:24 | Add a comment | Read comments (3) | Permalink | View trackbacks (4) | Blog it | HTML 系列
      24/06/2005

      HTML基础学习之HTML框架（一）

      第七课 HTML框架（一）

      框架（Frame）也就是所谓的分割窗口、分割画面、框窗效果（还真是五花八门），这个技巧在运用上问题比较多，用的好的话，有助于网友快速且有条理的浏览网页，运用不好的话，呵呵...那笑话可就闹大了。
      框架的基本概念
      1. 首先，各位先看看右手边这张图，我们将利用这张图来作解说，这样子，讲起来可能会清楚一点。OK！我们可以看见，右边的这个窗口，一共分为1 、2 、3 三个框架，每一个框架，各有其显示的内容分别是a.htm、b.htm、c.htm三个档案。然而左下角的那个index.htm 是做什么用的呢？

      2. 原来，左下角的这个档案 index.htm，就是要告诉计算机，我们要将画面分割成这样，也就是说，所有Frame的卷标，其实都只摆在 index.htm 这个档案里。（当然，不是档名一定要叫做 index.htm 取其它档名也是可以的。）
      3. 这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的html档案（假如您要分割100个框框，就要有100个html档就对了。），另外，还会多一个档案是来告诉计算机要如何分割的。（也就是例中的 index.htm 档啦！）
      开始分割
      1. 分割窗口可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想象画面是一个蛋糕，你要怎么割，才能割成那样呢？
        <HTML>
        <HEAD>
        <TITLE>框窗实作</TITLE>
        </HEAD>
        </HTML>
      2. 各位会发现，奇怪，在上面的语法中，怎么都没见到<BODY></BODY>熟悉的身影？呵呵...没错，它已经被待会儿要加进去的<FRAMESET></FRAMESET>卷标给取代了！也就是说，如果我们要分割画面，就要先用<FRAMESET>卷标告诉计算机说：『喂！我要开始分割了！』此时，<BODY>是派不上用场的，所以躲到一旁凉快去了！
      3. 现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗1了，右边就暂定为2，等一下还要分割呢！）
        <HTML>
        <HEAD>
        <TITLE>框窗实作</TITLE>
        </HEAD>
        <FRAMESET COLS="120,*" >
            <FRAME SRC="a.htm" NAME="1">
            <FRAME SRC="b.htm" NAME="2">
        </FRAMESET>
        </HTML>
      4. 在<FRAMESET>中，我们要告诉计算机到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成<FRAMESET COLS="120,*" >。COLS="120,*" 就是说，左边那一栏强制定为120点，右边则随窗口大小而变。除了直接写点数外，我们亦可用百分比来表示，例如COLS="20%,80%"也是可以的。
      5. 然后，再将右边的框窗再割成上下两个画面（也就是框窗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>
      6. 原本的<FRAME SRC="b.htm" NAME="2">在第3 点的语法中）被另一组<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二组<FRAMESET ROWS="100,*" >是被第一组<FRAMESET COLS="120,*" >所包围起来的喔！
      7. 其实只要将最后完成的那些语法存成index.htm，然后再准备三个档 a.htm 、b.htm 、c.htm那么就完成了。
      22:41 | Add a comment | Read comments (21) | Permalink | View trackbacks (5) | Blog it | HTML 系列

      HTML基础学习之HTML超链接

      第六课 HTML超链接

      HTML使用超级链接来连接到网络上的其他页面。
      锚标签和href属性
      • HTML使用锚标签（<a>）来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。
      • 创建一个锚的语法：
        <a href="url">Text to be displayed</a>
      • 锚可以指向网络上的任何资源：HTML页面，图像，声音，影片等等。
      • 标签<a>被用来创建一个链接指向的锚，href属性用来指定连接到的地址，在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。
      target属性
      • 使用target属性，你可以定义从什么地方打开链接地址。
      锚标签和name属性
      • name属性用来创建一个命名的锚。使用命名锚以后，可以让链接直接跳转到一个页面的某一章节，而不用用户打开那一页，再从上到下慢慢找。
      • 你可以为锚随意指定名字，只要你愿意。
      • 你应该注意到了：命名锚的显示方式并没有什么与众不同的。
      • 想要直接链接到“tips”章节的话，在URL地址的后面加一个“#”和这个锚的名字。
      • 一个链接到本页面中某章节的命名锚是这样写的：
        <a name="#tips">Jump to the Useful Tips Section</a>
      基本注意点——有用的技巧
      • 尽量在子目录路径后面加一个左斜杠。假如你像下面这样写：href="http://www.locker2man.com/html"，将会产生向服务器产生两个HTTP请求，因为服务器会在后面追加一个左斜杠，产生一个新的请求，就像这样：href=http://www.locker2man.com/html/。
      • 命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚，到这些锚的链接被放在页面的顶端。
      • 如果浏览器无法找到指定的命名锚，它将转到这个页面的顶部，而不显示任何错误提示。
      21:45 | Add a comment | Read comments (19) | Permalink | View trackbacks (4) | Blog it | HTML 系列

      HTML基础学习之HTML实体

      第五课 HTML实体

      有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。
      想要在HTML中显示一个小于号“<”，需要用到字符实体。
      字符实体
      • 在HTML中，有些字符拥有特殊含义，比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。
      • 一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）
      • 想要在HTML文档中显示一个小于号，我们必须这样写：&lt;或者&#60;
      • 使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。
      • 注意：实体名是大小写敏感的。
      不可拆分的空格
      • 在HTML中，最常见的字符实体就是不可拆分空格。
      • 通常，HTML会合并你文档中的空格。假如在你的HTML文本中连续写了10个空格，其中9个会被去掉。想要在HTML中插入空格，可以使用实体： &nbsp;
      最常用的字符实体
      • 不可拆分的空格  &nbsp;  &#160;
      • 小于  &lt;  &#60;
      • 大于  &gt;  &#62;
      • &符号  &amp;  &#38;
      • 双引号  &quot;  &#34;
      • 单引号  &#39;
      09:49 | Add a comment | Read comments (5) | Permalink | View trackbacks (4) | Blog it | HTML 系列
      23/06/2005

      HTML基础学习之HTML格式化

      第四课 HTML格式化

      HTML定义了很多元素用来格式化输出，比如加粗和倾斜文本。
      格式化文字：
      • <html>
        <body>
        <b>This text is bold</b>
        <br>
        <strong>
        This text is strong
        </strong>
        <br>
        <big>
        This text is big
        </big>
        <br>
        <em>
        This text is emphasized
        </em>
        <br>
        <i>
        This text is italic
        </i>
        <br>
        <small>
        This text is small
        </small>
        <br>
        This text contains
        <sub>
        subscript
        </sub>
        <br>
        This text contains
        <sup>
        superscript
        </sup>
        </body>
        </html>
      预格式化文本：
      • <html>
        <body>
        <pre>
        This is
        preformatted text.
        It preserves      both spaces
        and line breaks.
        </pre>
        <p>The pre tag is good for displaying computer code:</p>
        <pre>
        for i = 1 to 10
             print i
        next i
        </pre>
        </body>
        </html>
      “计算机输出”标签：
      • <html>
        <body>
        <code>Computer code</code>
        <br>
        <kbd>Keyboard input</kbd>
        <br>
        <tt>Teletype text</tt>
        <br>
        <samp>Sample text</samp>
        <br>
        <var>Computer variable</var>
        <br>
        <p>
        <b>Note:</b> These tags are often used to display computer/programming code.
        </p>
        </body>
        </html>
      缩写和首字母缩略法：
      • <html>
        <body>
        <abbr title="United Nations">UN</abbr>
        <br>
        <acronym title="World Wide Web">WWW</acronym>
        <p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
        <p>This only works for the acronym element in IE 5.</p>
        <p>This works for both the abbr and acronym element in Netscape 6.2.</p>
        </body>
        </html>
      文字方向：
      • <html>
        <body>
        <p>
        If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):
        </p>
        <bdo dir="rtl">
        Here is some Hebrew text
        </bdo>
        </body>
        </html>
      块引用：
      • <html>
        <body>
        Here comes a long quotation:
        <blockquote>
        This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
        </blockquote>
        Here comes a short quotation:
        <q>
        This is a short quotation
        </q>
        <p>
        With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special.
        </p>
        </body>
        </html>
      删除和插入文字：
      • <html>
        <body>
        <p>
        a dozen is
        <del>twenty </del>
        <ins>twelve </ins>
        pieces
        </p>
        <p>
        Most browsers will overstrike deleted text and underline inserted text.
        </p>
        <p>
        Some older browsers will display deleted or inserted text as plain text.
        </p>
        </body>
        </html>
      22:55 | Add a comment | Read comments (12) | Permalink | View trackbacks (4) | Blog it | HTML 系列

      HTML基础学习之HTML基本标签

      第三课 HTML基本标签

      HTML中最重要的标签是定义标题元素，段落和换行的标签。
      标题元素
      • 标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的。
        <h1>This is a heading</h1>
        <h2>This is a heading</h2>
        <h3>This is a heading</h3>
        <h4>This is a heading</h4>
        <h5>This is a heading</h5>
        <h6>This is a heading</h6>
      • HTML自动在一个标题元素前后各添加一个空行。
      段落
      • 段落是用<p>标签定义的。
        <p>This is another paragraph</p>
      基本注意点——有用的技巧
      • 当你写下HTML文本的时候，你不能确知在另外一个浏览器中，这些文本将被如何显示。有人用着大的显示器，有的人用的小一些。每次用户调整窗口大小的时候，文本都将被重新格式化。不要想在编辑器中写一些空行和空格来协助排版。
      • HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。一点附加信息：在HTML里面，一个空行也只被当作一个空格来处理。
      • 使用空段落<p>来插入空白行是一个坏习惯，请使用<br>标签来替代。（但是不要用<br>标签来创建列表，我们后面会专门学习HTML列表的。）
      • 你也许注意到了段落可以不写结束标记</p>。别依赖它，HTML的下一个版本将不准你漏掉任何一个结束标签。
      • HTML自动在某些元素前后增加额外的空行，就像在段落和标题元素的前后一样。
      22:21 | Add a comment | Read comments (14) | Permalink | View trackbacks (4) | Blog it | HTML 系列

      HTML基础学习之HTML元素

      第二课 HTML元素

      HTML文档是由HTML元素组成的文本文件。
      HTML元素是预定义的正在使用的HTML标签
      HTML标签
      • HTML标签用来组成HTML元素。
      • HTML标签两端有两个包括字符：“<”和“>”,这两个包括字符被称为角括号。
      • HTML标签通常成对出现，比如<b>和</b>。一对标签的前面一个是开始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容。
      • HTML标签是大小写无关的，<b>跟<B>表示的意思是一样的。
      HTML元素
      • 下面是一个HTML元素：
        <b>This text is bold</b>
      • 此HTML元素以开始标签<b>起始， 内容是：This text is bold，以结束标签</b>中止。<b>标签的目的是定义一个需要被显示成粗体的HTML元素。
      为什么使用小写标签？
      • 我们刚说过，HTML标签是大小写无关的：<B>跟<b>含义相同。当你上网的时候，你会注意到多数教程在示例中使用大写的HTML标签，我们总是使用小写标签。为什么？
      • 假如你想投入到下一代HTML中，你应该开始使用小写标签。W3C在他们的HTML4建议中提倡使用小写标签，XHTML（下一代HTML）也需要小写标签。
      标签属性
      • 标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。
      • 标签<body>定义了HTML页面的主体元素。使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样：
        <body bgcolor="red">
      • 属性通常由属性名和值成对出现，就像这样：name="value"。属性通常是附加给HTML元素的开始标签的。
      引号样式
      • 属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。
        在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。比如：name='John "ShotGun" Nelson'。
      • 注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。
      21:58 | Add a comment | Read comments (24) | Permalink | View trackbacks (7) | Blog it | HTML 系列

      HTML基础学习之HTML介绍

      第一课 HTML介绍

      HTML文件是什么？
      • HTML表示超文本标记语言（Hyper Text Markup Language）。
      • HTML文件是一个包含标记的文本文件。
      • 这些标记保速浏览器怎样显示这个页面。
      • HTML文件必须有htm或者html扩展名。
      • HTML文件可以用一个简单的文本编辑器创建。
      想不想尝试一下？

      假如你运行的是windows系统，打开记事本，在其中输入以下文本：

      • <html>
        <head>
        <title>Title of page</title>
        </head>
        <body>
        This is my first homepage.
        <b>This text is bold</b>
        </body>
        </html>
      将此文件保存为“myfirstpage.htm”。双击打开，浏览器将显示此页面。
      例子解释
      • HTML文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。
      • 在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。
      • 在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
      • 在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。
      • 在<b>和</b>标签之间的文本会以加粗字体显示。
      关于HTML编辑器：
      1. 用一些所见即所得的编辑器，比如frontpage，dreamwaver，你可以很容易创建一个页面，而不需要在纯文本中编写代码。
      2. 但是假如你想成为一名熟练的网络开发者，强烈推荐你用纯文本编辑器编写代码，这有助于学习HTML基础。
      21:14 | Add a comment | Read comments (93) | Permalink | View trackbacks (11) | Blog it | HTML 系列