|
发信人: hujiyang() 整理人: microant(1999-08-02 12:13:18), 站内信件 |
|
HTML入门手册 第一讲：HTML简介 作者：飞翔鸟软体驿站 Mars 虽然说对于主页的制作已经非常熟悉，但是忽然要面对这样大的一个题目，我也 不禁有些茫然不知所措。随着98年网络的火爆，99年又有电信降价，今年的上网 热一定又是一场势不可挡的风潮，国内相对贫乏的中文网络资源也相对丰富了许 多，这不得不归功于网上大大小小的个人主页，这样说完全不算过分，确实，个 人主页就象草原上一朵朵美丽的野花，五光十色，把原本无聊的世界点缀的缤纷 多彩。不客气的说的国内网络热潮的大部分功劳应归功于个人主页，如果仅仅有 ISP和ICP提供的网站网费再低又有谁会稀罕呢？ 国人凡长篇大论者，都有一个毛病，要先为自己的题目正名，正所谓“名不正， 言不顺”，本人也不能免俗。因起名“为完全个人主页DIY手册”，要涉及的内容 很多，要每一部分都有涉猎，而且都有比较详细的介绍，所以有超长的篇幅是毋 庸置疑的。本文并非速成一类的教程，现在虽然有很多软件采用了所见即所得（ WYSWYG，What You See, What You Get）的软件，如FrontPage98，但本人认为要 完全的掌握Web页面的编制技术，还是从原代码学起更好，大家不用担心，HTML语 言并非编程（但也包含脚本的编制），所以对于逻辑、数学能力的强弱没有什么 要求，了解原代码只能让你更快的掌握网页编辑工具的使用。本文安排的课程顺 序可以分为：HTML部分、样式单部分、Frontpage部分、Dreamweaver部分、有可 能的话再介绍一些关于Flash或VRML的知识，最后我会把维护主页的诸多事宜做一 总结，相信大家只要按照本文的提示和安排，在结束时你会发现自己对于HomePa ge已经了如指掌！ 从头说起 HTML（超文本语言，之所以为超文本是因为它有比文本更多的格式和跳转的别的 文件的链接）是Hyper Text Makeup Language的全称，也是本文介绍的主角，它 广泛应用于网络中，但是如果我说它的用途比网络更广泛，你会感到诧异吗？ HTML是一种标记语言，如果你用过老式的字处理软件WordStar就一定会清楚的了 解它的工作原理，所谓标记就是在HTML代码中的一些以“<>”组成的，当浏览器 遇到这样的标记时就会根据具体的标记内容进行解释，比如要在一句话为强调某 个单词而然它显示粗体，可以用以下代码表示： This is a bold word. 其中的为标记，代表粗体（Bold），浏览器从这个标记开始对里面的内容进行 处理，然后到表示标记的结束，我们通常把</?>俗称为“关门”，一般的 标记都是由一对一对构成的，注意：“<>”间的内容是不会被浏览器显示的，这 行代码的效果应该如下： This is a bold word. 说到着，你可能已经有些明白了，“<>”中的内容就好象人为的对计算机进行的 提醒，告示它这里的文字该用粗体了，而在相应的地方又提醒计算机粗体该结束 了，字体恢复正常。HTML就是由这样许许多多的标记构成的，而标记与标记之间 的嵌套组合就形成了千姿百态的网页，而我们的任务就是了解这些标记的作用而 已。 由于当时的环境和所能认识的地步，HTML的功能是十分有限的，从91年第一个浏 览器Gopher，到大大促进了网络发展的Mosaic，到划时代的Netscape Navigator ，到现在的Internet Explorer，浏览器经过了数次竞争和淘汰，各个浏览器也为 了自己能产生更好的浏览效果不断的向HTML中添加新的标记，虽然大大丰富了HT ML的内容，但是由于厂家的分歧和各自为政，致使出现了许多各种独有的标记， 给HTML带来了很大的混乱。 这种情况下必须有一个公正的机构来制定一个统一的标准，这样W3C（是The Wor ld Wide Web Consortium的简称）就产生了，它并非刚刚成立，而早在HTML诞生 之日起就存在了，是负责开发World Wide Web公用标准的世界公认机构。它主要 负责更新HTML和HTTP标准以及与其相关的问题。W3C有许多会员，其中包括Micro soft、Netscape（很奇怪的是Microsoft和Netscape直到1997年才加入W3C并承认 标准）和SUN等大公司，W3C从会员处得到意见，并根据得到的信息调整标准，它 既是一个开发者，也是一个协调者，会员的浏览器都必须遵守W3C的标准，经过了 多次修改，HTML的版本也升级为目前的4.0，应该说W3C对于统一标准还是有一定 作用的，尽管IE和NC有时还是我行我素:-<。 好了解了这些，对于我们下面的学习已经是绰绰有余了，接下来的课程中，我会 详细的叙述HTML4.0的规范方法。对于HTML的编辑大家不必担心要用到什么特殊的 软件，使用Windows自带的记事本（NotePad）就可以了，另外就是要有一个网页 的浏览器，我推荐你使用IE4或NC4以上版本的浏览器，它们都是共享软件或免费 软件，可以到我们的主页下载（http://joysoft.soim.net）。 HTML入门手册 第二讲：HTML的文档结构 作者：飞翔鸟软体驿站 Mars 上一讲中，我简单介绍了HTML语言的历史和基本源理，你一定感到很简单吧。就 算你还有疑虑也不必担心，在下面的课程中我会按照“语法－实例－语法”的方 式讲解，本人一贯相信“实践是学习知识的最佳途径”，事实证明也实际操作也 可以大大加快知识掌握的速度。 本部份知识不需要其他的辅助软件，使用Windows自带的记事本就可以了，我们学 习HTML为的是做网页，浏览器当然少不了了，我推荐你使用IE4以上版本的浏览器 ，有几个原因：IE有中文版，更易操作，并且以后我们还会学到用FrontPage编辑 网页，它和IE的关系更加密切；而根据一些网页浏览分析来看使用IE浏览器的用 户几乎可以占到70％，所以网页对IE的兼容性更重要些；三是因为IE获得网页源 代码的方法更加简单，虽然NC也提供网页的源代码浏览，但是不允许即时修改， 而在IE里，你只需在网页中点鼠标右键，然后选择查看源代码就可以了。好，废 话少说，还是让我们开始HTML的学习吧。 了解HTML结构 如果我第一个要给你讲解的元素是<html>标记你一定不会感到吃惊吧:-)。是的， 其实你完全可以用记事本打开一个扩展名为“.htm”或“.html”的文件，因为它 本身就是由ASCII码组成的，为了区别HTML文件和TXT文本文件或其他文件的区别 ，在每个HTML文件的开头都要加上<html>标记，告示浏览器这个文件要按照网页 的格式解释，而在文件的末尾都加上</html>，表示该网页的结束，所以一个最简 单的HTML文档相信你已经猜到： <html></html> 当然这样的网页没有任何意义，但是它确实是一个网页，最简单的网页。 在整个HTML文档中，又可以分为两个大部分：头和体，你一定不明白了，何谓“ 头”，又何谓“体”呢？其实很简单，<head>就是头，<body>是体，<head>标记 中的内容是不在网页中显示的，它存放一些关于网页信息的参数、文档题目和浏 览器的参数等等，而<body>标记中才是网页中真正要显示的内容，要记住它们都 是容器型的标记，也就是说要记得关门。 那么现在我们就又可以制作出一个结构更加完整页面： <html> <head></head> <body></body> </html> 同样的，它只是一个框架，在浏览器中也是什么也不显示的。你也许要问，那么 <head>是不是没有用呢？我要回答你的是：<head>不但非常有用，而且非常重要 ，其中还包含许多元素，我在下面一一讲解： Base元素，它用于制定文档当前的初始的URL（全球信息资源定位系统，也就是我 们通常说的超级链接，使得包含在当前文档中的链接都以它定义的初始地址为基 础，比如说把Base设为“http://www.netease.com”，那文档中的相对链接（如 “index.htm”）都会以它为基础（显示为“http://www.netease.com/index.ht m”），详细的说明等到讲解超级链接的时候我会详细说明。 Link元素，它表示当前文档和另一个文档之间的关系，具体参数如下： 属性 功能 HREF 指定指向另一文档的URL REL 定义当前文档和另一文档的关系 REV 定义其他文档和当前文档的关系 TYPE 表明链接风格单的类型和参数 上文的内容如果你一时无法理解也没有关系，随着对HTML学习和实践加深，慢慢 的你就会明白的。每个元素都有自己的属性，表示的方式如：<元素 属性1=”… …” 属性2=”……” ……>，Link元素的实例如下： <LINK REL=”StyleSheet” HREF=”stylesheet.css”type=”text/css”> 表示链接外部样式单“stylesheet.css”。 META元素，它指定给浏览器的一些参数，有很多功能，比如指定浏览器使用哪种 字库对文档进行解码（繁体、简体），标识文档的相关信息，浏览器还规定了一 些参数可以完成一些简单的命令，如： <META HTTP-EQUIV=refresh CONTENT=”60”> NC和IE会每隔60秒重新装载网页，就象按下浏览器Refresh按钮的效果一样。它的 具体属性如下： 属性 功能 HTTP-EQUIV 定义元素的特性 NAME 对元素的附加说明，缺省则和HTTP－EQUIV相同 URL 定义一个目标文档 CONTENT 提供HTTP-EQUIV响应值 当然，文档中的很多META仅仅起标识的作用。 Title元素，它没有任何参数，Title中的内容会显示在浏览器窗口的标题栏里， 可以用来提醒浏览者当前的页面，如： <TITLE>我的HOMEPAGE</TITLE> 在<HEAD>标记中还可以包含脚本和样式单，我们将在以后逐渐接触到它们，目前 的情况大家知道就可以了。 我已经讲解了HEAD里的大部分内容，下面再来看看BODY中包含的内容。BODY是HT ML文档中显示的网页内容的部分，网页中包括的内容可以有文字、图片、插件、 JAVA程序，总的来说，整个HTML文档中主要元素的相互包含的关系大致如下： BODY－DIV（层）－Table（表格）－p（段落）－Font（字体） | －img（图片） | －APPLET（JAVA程序） | －EMB（插件） | －其他元素 今天为大家讲解了HTML文档的大体结构，从下一讲开始我们开始接触到HTML的主 要部分，请大家继续关注本文。 HTML入门手册 第三讲：讲解Body标记 作者：飞翔鸟软体驿站 Mars 上一讲，我为大家解释了HTML文档的结构，说来也简单，就是两部分：Head和Bo dy，通过上一次的学习，你已了解了Head中的大部分元素，下面我将逐步讲解HT ML中的Body部分。不过各位读者请注意：本文旨在教会大家最快的主页制作方法 ，并非完整的HTML4.0的介绍，一切都是点到为止，其实使用FrontPage98等所见 即所得的编辑器，编制网页要容易几十甚至上百倍，但是我认为如果完全不明白 HTML就使用FrontPage98的话就象小学生写大学论文，恐怕高明有限。所以，咱们 还是从头开始，讲一些最基本的HTML道理，目的还是以后更好的利用FrontPage9 8等软件，你说好吗？对制作网页有兴趣的朋友如果对本文有任何疑问或发现本人 犯了什么错误，请发信给我，我尽力而为。我的信箱：[email protected]。 上次说到Body也是一个标记，你可以把它看成是一页纸，而其他所有的内容无论 是文字还是图形都记录在纸上，Body标记记录的内容是纸张的大小、背景和前景 的颜色（或背景的图片、音乐）等等内容。记录这些内容的各个参数如下： 属性 功能 ALINK 定义活动链接的颜色（也就是正在点击链接的颜色） BACKGROUND 用做网页背景图象的URL地址 BGCOLOR 定义背景颜色 BGPROPERTIES 只有一个参数：FIXED，背景图象将呈现水印效果 LEFTMARGIN 定义文档到网页左边界的距离 LINK 定义未访问链接的颜色 TEXT 定义文档的颜色 TOPMARGIN 定义文档到网页上边界的距离 VLINK 定义已访问链接的颜色 其中各个参数的作用，表中已经说的比较清楚，这里还要解释几句：定义颜色的 参数使用十六进制的表示方法，也就是#??????，其中“#”代表数字以十六进制 表示，共有六位，也就是说可以定义256×256×256＝16777216种颜色，也就是我 们通常说的24位真彩，HTML也允许使用英文单词表示颜色，其中有16种基本颜色 ，与数值对应关系如下表；BGPROPERTIES中的水印效果是因为其背景不动的效果 象便签中的水印而得名的（我也不明白:<），使用之后背景图象不会随页面滚动 条的滚动而移动，只有IE支持；LEFTMARGIN与TOPMARGIN用来控制页面的边距，类 似于出版物的四白，以象素为单位；如果既有背景色又有背景图象，背景图象将 覆盖住背景色。 颜色 数值 Black 黑色 #000000 Maroon 深褐色 #800000 Green 绿色 #008000 Olive 橄榄色 #808000 Navy 海军蓝 #000080 Purple 紫色 #800080 Teal 水鸭绿 #008080 Gray 灰色 #808080 Silver 银色 #C0C0C0 Red 红色 #FF0000 Lime 酸橙色 #00FF00 Yellow 黄色 #FFFF00 Blue 蓝色 #0000FF Fuchsia 品红 #FF00FF Aqua 水蓝 #00FFFF White 白色 #FFFFFF 现在我们可以得到类似如下的页面： <body Bgcolor=black text=#FFFFFF Leftmargin=100 Topmargin=50> ……（其中内容略去） </body> 页面效果如图1所示。 要注意，一个元素可能有很多参数，但是并不是每个参数都要写出来，对于那些 没有声明的参数，页面将使用默认值，又如： <body background=somepic.jpg BGPROPERTIES=FIXED> …… </BOdy> 页面的背景则以会以指定路径的图片显示。有些人也许不明白网页中指向文件的 链接是怎样表示的，我可以先简单的讲一下。网页中的一切链接只有两种形式： 绝对链接和相对链接，所谓“绝对链接”就是指定使用URL表示文件的位置，现在 假定我们我们已经申请了一个个人主页空间，就定在大家最熟悉的网易，用户自 然是Mars了，那要访问这个主页，就可以在浏览器的地址栏中输入http://www.n etease.com/~mars，当然这个地址是咱们杜撰的，要使用这个地址下的“somepi c.jpg”作为页面背景，background参数也可以写成“http://www.netease.com/ ~mars/somepic.jpg”，这样网页不论在那里，只要可以访问到这个图片，就会以 它作为背景；再假设http://www.netease.com/~mars下有一个网页名为“index. htm”（一般的服务器都把它作为目录下的缺省文件名），那么要使用背景，就可 以象上面body标记里显示的例子，如果这个图片在“http://www.netease.com/~ mars/images”目录下，那Background参数就应该为“images/somepic.jpg”，如 果是在index.htm的上层目录下，则使用“..”代表上层目录（和DOS很相似）， 如“../somepic.jpg”，这下你明白它为什么叫做相对路径了吧。相对路径和绝 对路径各有各的好处，这些你可能一时还体会不到，不过随着主页维护经验的提 升，你一定会有同感的。关于链接的内容我们将在以后更仔细的讨论，如果你还 是不太明白也不要紧，这仅仅是开了个头，后面的知识会再次解释。 好，今天就讲到这里，下次我会告诉你网页中文本编排的方法，我们正在步步深 入，记住有疑问就给我来信哦。 HTML入门手册 第四讲：讲解段落标记 作者：飞翔鸟软体驿站 Mars 大家好，经过前三次的学习，你应该对HTML有些入门了吧，它就是由许多<……> 的标记组成，标记的属性可以用参数表示。对！实际上就这么简单，以后的内容 也跳不出这些框框，只不过介绍一些不同标记的使用罢了。好，还是让我们继续 第四讲的学习吧。 前几次的学习，我们都是在讲HTML文档的结构，而今天我们要开始接触我们所真 正关心的内容：网页内容，还是让我们从比较简单的文本讲起。 HTML文档的基本单位是段落，就如同我们平时写文章一样，整个网页也可以分为 若干个段落，而段落的标记就是<p>。先让我们建立一个网页的基本框架： 在记事本中建立一个新文件，然后输入以下代码： <html> <head> <title>测试页面</title> </head> <body></body> </html> 把该文件储存为名为“test.htm”的页面，以后就可以把这页当成样板页面，其 他的网页都可以在这个基础上完成（用“另存为”命令）。大家注意：由于篇幅 问题，我以后不能把整个页面的代码全部给出，而大致结构都是一样的。下面为 这个页面添加一些内容： <p>大家好，欢迎光临我的主页。</p> <p>俺的爱好很多啦，比如制作网页。<p> …… 保存文件，然后在浏览器中观看一下效果，如图1（html0401.jpg）， 大家可以看到，网页中的段落与段落之间间距较大，<p>标记也可以单独使用，而 不需要</p>，后一个<p>标记就可以看作是前一个<p>的结束，但是为了给大家造 成一种规范，本文中使用</p>对段落进行封口。浏览器一般是会对长较段落进行 换行环绕的，但是如果想要强制换行，可以使用<br>标记，要注意<br>标记不是 一个容器型的标记，即它不需要</br>的出现，你可以在段落中的任何一处加入< br>试试效果。在网页编制中要尽力避免硬回车<br>的出现，由于窗口的大小可能 会对文本的换行环绕造成意想不到的效果，如图2（html0402.jpg）所示， 但有时在一些浏览器中，如Netscape中，你会看到文本并不换行，而是一直拖延 下去，这是因为没有设定浏览器的解释网页需要的语言所致，在<head>中加一参 数即可： <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 该参数表明使用中文GB码对网页进行分析。 还要提醒大家的是，HTML文档中一切的格式效果都是通过标记的标识完成的，它 不考虑源文件中的格式，如： <p>大家好， 欢迎光临我的主页。</p> 它的效果和“<p>大家好，欢迎光临我的主页。</p>”完全一样，另外在HTML中的 一些特殊字符，如“<”、“>”是用特殊的字符“<”和“>”表示的，空格 在HTML中也比较特殊，当它处于字符之间时，无论在源文件中有多少个字符，它 都只按一个字符解释，而当空格处于段落之前时它被省略，如： “<p>大家好，欢迎 光临我的主页。</p>”等价于：“<p>大家好，欢迎 光临我 的主页。</p>”。而“<p> 大家好，欢迎光临我的主页。</p>”等价于“<p>大家 好，欢迎光临我的主页。</p>”。它也可以用特殊字符“ ”代替，大家知 道就可以，以后使用FrontPage98做主页时就没有这些麻烦；另外还可以使用预定 义格式<pre>格式标记，这样源文件中的空格就不会被省略，注意：<pre>标记和 <p>是可以互相替换的，有了<pre>就不需要<p>。 段落<p>标记还有一个参数属性：“align”，它表示段落的对齐方向，align有三 个值“left”，“right”和“center”，分别代表左对齐、右对齐和中间对齐， 浏览器默认的对齐方式是左对齐，如： <p>大家好，欢迎光临我的主页。</p> <p align=center>俺的爱好很多啦，比如制作网页。<p> <p align=right>我的E-mail是：[email protected]</p> 如图3所示（html0403.jpg）。 很多其他的标记中也有align属性，使用方法也基本一样，大家以后就会接触到。 除去<p>标记外，还有其他的段落标记吗？当然有！大家都知道英文“headline” 是什么意思吧，一般报纸的大标题就可以称为“headline”――头版头条。HTML 中也为网页中的标题显示制定了标记：从<h1>到<h6>分别表示标题内容的重要性 ，以黑体显示，<h1>的字体最大，表示最重要，<h6>的字体最小，表示最不重要 ，如： <h1>欢迎光临我的主页</h1> <h2>欢迎光临我的主页</h2> <h3>欢迎光临我的主页</h3> <h4>欢迎光临我的主页</h4> <h5>欢迎光临我的主页</h5> <h6>欢迎光临我的主页</h6> 效果如图4。这些head标记也有align属性，大家下去试一下吧。 好，今天为大家讲解了HTML内容的格式化，下次我会给大家讲解段落内部的格式 化问题，比如字体的属性、颜色等等，这些在一些聊天室里还是很有效的哦。咱 们下次再见吧。 HTML入门手册 第五讲：谈网页内的文本格式化 作者：飞翔鸟软体驿站 Mars 嗨，你好！又到了做主页的学习时间了，如果你觉得前几讲太枯燥的话，从这一 回开始我们的内容开始渐渐有趣了！今天我会告诉你如何格式化文本，包括改变 字体、颜色，如何在网页中插入图片等等。在一些HTML形式的聊天室里，支持插 入HTML语言，那你就可以在聊天室里使用不同的颜色的字体和朋友交谈，在聊天 室里插入图片等等，当然也可以捣乱啦，待会儿你就明白是怎么回事了。^_^ 还要提醒大家的是：你一定发现了，HTML的标记都是固定的，如果你把标记打错 了一个字母，或使用了未规定的标记，浏览器对这些不能识别的标记是不理睬的 ，要注意哦。 Font标记 英文“Font”是字体的意思，你一定知道吧，它也是HTML处理字体的主要标记， 它是以开始，以结束的一组容器型标记，可以用来定义字体的大小 （Size）、字体（Face）和颜色（Color）也就是它的三个参数。Size属性有1到 7个等级，1级最小，7级的字体最大，默认的字体大小是3号字（大约相当于Word 里的5号字，12个象素），你可以使用“Size=?”定义字体的绝对大小，如： <html> <body> 你好！这是1号字的效果<br> 你好！这是2号字的效果<br> 你好！这是3号字的效果<br> 你好！这是4号字的效果<br> <font size=5>你好！这是5号字的效果<br> <font size=6>你好！这是6号字的效果<br> <font size=7>你好！这是7号字的效果 </body> </html> 结果如图1所示。 也可以使用相对大小，也就是说在前一个字体的大小基础上调整大小，比如有下 面这样一个网页： 你好！<font size=+2>欢迎访问我的HomePage！ 效果如图2。 首先定义的字体大小是3号字，然后后面又有一个Font标记，其中“Size=+2”表 示在3号字的基础上加2，“你好！”也就按5号字显示了，同样的，你也可以用“ -”代表比原字体小多少，当字体大小的数值大于或小于字体规定的两端时，最小 字体按1号字处理，最大的字体则按7号字处理。 Face属性规定的是字体的名称，如中文字体的“宋体”、“楷体”、“隶书”等 等，你可以在写字板和Word等字处理软件中找到当前系统中安装的字体名称，比 如下面的代码： <html> <body> <font size=5> 宋体 隶书 方正彩云繁体 文鼎古印体繁 </body> </html> 你可能已经想到了，这些字体在我的系统里是有的，但是在别人的电脑上没有这 种字体怎么办？那浏览器就会使用Windows系统默认的字体代替，虽然使用某些方 法（如样式单，我们以后会讲）可以在下下载字体，但是由于中文字体文件都比 较大（一般都有几兆），而英文字体一般只有几十K，这个方法就不那么实用了。 所以大家在使用字体的时候一定要考虑到在别人的浏览器上的效果是怎样的，毕 竟你的网页是做给别人看的。 Color属性，我们在讲Body标记的背景颜色时就提到过，它可以用浏览器承认的颜 色名称和十六进制数值表示（如或）， 注意字体的颜色一定鲜明，并且和底色配合，否则你想象一下白色背景和灰色的 字或是蓝色的背景红色的字有多么的难看刺眼。 关于字体还有很多其他的标记，要记住，它们都是容器型的，要关门： 用粗体显示文本 用斜体显示文本 以下划线显示文本 <strike> 以删除线显示文本 <sub> 下标元素，使该标记内的文本比其他文本位置低 <sup> 上标元素，使该标记内的文本比其他文本位置高 如下页面将解释这些文本标记的用处： <p>这是一个粗体字的例子。</p> <p>这是一个斜体字的例子。</p> <p>知道下划线是什么样子了吗？</p> <p><strike>删除线</strike>就是这个样子啦。</p> <p>下标元素使字体<sub>下沉</sub>。</p> <p>上标元素使字体<sup>上升</sup>。</p> 见图3。 哈哈，就是这么容易！聪明的读者一定明白了HTML语言为什么可以完成各种内容 形态丰富多采的网页，不错，虽然每个标记的作用各不相同，但是当它们互相嵌 套的时候，奇迹发生了！你现在也知道怎样在聊天室里改变自己的字体了吧，你 只需要把HTML语言一条一条打到发言的框框里就可以了，当然鄙人从前总是用这 些法子捣乱，譬如一次把字体改成和背景色一样的白色，害得聊天室里20多号人 狂发Message，浏览器的滚动条一劲的下移大家就是什么也看不见（读者：什么！ ！就是你干的！？害得我那天……扁他！）。大家学会了今天的知识就不会让我 这样的网络“残渣”得逞了，并且现在的聊天室一般都关掉了HTML功能，要不然 我还有其他利害的招数，用Javascript做个死循环，重复发送信息等等，唉现在 都不管用了，不好玩，干脆不去聊天了。下一次我会再为你解决为HTML中插入图 象的问题，继续来哦。 HTML入门手册 第六讲：讲解如何在网页中插入图片 作者：飞翔鸟软体驿站 Mars 大家好，又到了我们学习制作主页的时间了。有些人总觉得制作主页是件很高深 的事情，其实这在于你对主页的要求，象微软的主页无论是结构、内容还是内部 的技术都是很多人劳动的结晶，非个人单枪匹马可比，但是说白了，微软的主页 又有什么了不起？如果你完全了解了HTML、样式单、脚本技术和ActiveX技术，就 会发现不过也就是这样，不会复杂到哪里。做主页最需要的还是精力，有一点点 主页知识，一点点审美能力，配合网页的主题，经过不断的努力就能做出一个受 欢迎的好主页。我说的都是真的，而现在我教给大家的就是建造主页的最基础的 知识，随后我们会渐渐深入，你会发现制作主页是多么的有趣，你可以在上面随 意发表自己的见解看法，Internet就是这样。 上次教给了大家网页中文本格式化的标记和使用方法，其实文本的格式化也就是 这么简单，但是网页是五彩缤纷的，没有图片的网页想必也不会好看。一幅优美 的风景画摆在面前的时候，每个人都会感觉到它的美丽，而要他们用语言把这幅 画描述出来就可能产生一些空洞的语言：“太美了！太漂亮了！……”到底怎么 “美”恐怕只有去看一看才能知道。网页中的图形更能起到画龙点睛的效果，用 一组别致的按钮图片代替枯燥的文字，在文章中做到图文并茂，以适当的背景烘 托出整个网站的氛围，这些都是一个好的主页的标志。 在主流浏览器中现在普遍支持的图片格式有很多，比如“bmp、tiff、gif、jepg 、pgn”等等，但运用的最多的还是Gif格式和JEPG格式，Gif格式有很多好处，比 如它可以在网页中提供动画，可以使用透明图象，可以在网页中隔行交叉显示， 和256色的Gif图象相比JEPG格式是24位真彩的，它比较适合于在网上发布照片和 高质量的图片，而这两种格式的一个共同特点就是体积小，也是它们适合在网络 中使用的原因（还有一种格式PGN，它本来是想把GIF和JEPG的优点融合在一起， 但是当它推出的时候以上两种格式已经成了人们心中的标准，所以PGN格式也就没 有流行起来）。现在国内的网络带宽还很窄，专线和ISDN用户很少，大部分的人 还是使用拨号上网，所以尽量减小网页中图形的体积，就是减少了浏览者所要花 费的时间，大家一定要记住这点！网页一定要小，保持快速的下载也是一个站点 受不受欢迎的关键。关于制作网页图片的获得还要靠大家平时的积累，浏览别人 的主页时看到好的图片就及时保存下来，方法是在IE中在图片上点右键，选择菜 单“图片另存为”或“背景另存为”，在NC中也类似，在图片上点击右键选择菜 单“Save image as”或“Save background as”。有些图片是有版权的，只要你 不把人家站上的专用图片移植到自己的站上就行，因为我们的站点一般是非商业 化的个人站点，即使你侵犯了别人的版权，也没有什么制裁的手段，不过“公道 自在人心”，网上舆论的威力也是不容轻视的，我奉劝大家还是不要触犯众怒。 我要警告大家的是千万不要在网上发布不健康的黄色图片，这是会受到国家法律 制裁的！ 好关于图片的话题我说了这么多，还是让我们回过头来看看，怎样在网页中插入 图片吧。 路径，如相对路径“../pic1.gif”表示位于上级目录的“pic1.gif”文件，或绝 对路径“http://www.netease.com/~mars/logo.gif”。如“……<img src=”sa mp.gif”>……”。（图0） 另一个参数是“ALT”，它是对图片的文字说明，当你把鼠标放在图片上稍作停留 的话，ALT参数的值就会以浮动的形式显示出来，另外它对于为提高浏览速度而关 闭了图片下载的用户也有说明的作用。如“<img src="samp.gif" alt="Interne t Explorer 5.0">”。（图1） “Width”和“Height”标记表示图片长和宽的象素值，当没有指定这两个参数时 ，图片将以原始大小显示，指定了长和宽后图片的面积就以指定值为准，图片按 照既定的尺寸扩展或缩小。如“<img src="samp.gif" alt="Internet Explorer 5.0" width=200 height=80> <img src="samp.gif" alt="Internet Explorer 5.0" width=150 height=150>”。（图2） “Border”属性表示图象的边框粗细程度，如“<img src=”samp.gif”border= 8>”，默认值“Border”为“0”。（图3） “Align”属性我们已经接触过了，它表示图片的对齐方式，但是在这里它又和段 落的对齐方式有所差别，如果未指定图片的对齐方式，在段落中它将占一个行的 位置，这样如果图片远大于字体大小时非常难看，我们可以给它一个“Align”属 性，当“Align”为Left的时候，图片靠到最左方，周围的文字在其右侧环绕，当 为Right时，文字在其右边环绕，如：“<p><img src=”samp.gif” align=left >……（中间内容省略）……<img src=”samp.gif” align=right>……</p>”。 “Align”还有很多其他的值，具体内容见下表。（图4） Top 沿图象顶部对齐文本 Middle 沿图象中间对齐文本 Bottom 沿图象底部对齐文本 Left 左侧显示图象，文本环绕 Right 右侧显示图象，文本环绕 “Vspace”和“Hspace”分别表示图象在垂直和水平方向上与文本的间距，为了 保持版式的美观，最好使图象和文本之间空出一些距离。如“<p><img src="sam p.gif" alt="Internet Explorer 5.0" align=left vspace=10 hspace=15>…… </p>”。（图5） 在网页编制中为了完成一个图象的造型，常常要使用比较大的图象，这时我们一 般先用PhotoShop等图象编辑工具把整个图片切割成许多小块，然后在HTML文件中 再把它们拼接起来，这样分散了图象下载的尺寸，浏览者也就不会因为长时间的 等待而感到不耐烦，也是网页制作的一个很常用的技巧。 图象可以作为超级链接的一部分，也可以把一个大的图象分成若干个链接热点（ 并不把图象物理分解），这些都涉及到超链接的内容，也是互联网中最吸引人的 地方，我会在下一次教给你建立链接的方法，记住没有链接的网页就不能被成为 链接，链接是把你从一点引向无尽网络空间的唯一捷径。 HTML入门手册 第七讲：讲解如何在网页中插入超链接 作者：飞翔鸟软体驿站 Mars 上回我给大家讲了如何在网页中插入图片，再加上第五讲讲的如何格式化文本， 有了这些知识在一些支持HTML的聊天室里大概已经可以游刃有余了，你也不会因 为别人贴了个图或者使用了不同颜色的字体而大惊小怪了，感兴趣的话可以去一 些聊天室试试，如中网（http://www.netchina.com.cn）的聊天室。但记住在聊 天室里发含HTML语的Message时一定要记得封口，另外就是不要瞎捣乱，否则被别 人踢出去的感觉可不大好，这点本事要用来捣乱还差的很远呢。 今天要给大家讲的是网页中最有价值的东东――“链接”，互联网的博大精深就 在于奇妙的链接，它可以把你从地球的一端引向任何地方，顺着一个链接找下去 ，你得到的将是整个世界，这还不伟大吗？ 实际上链接的形式及其简单，也许你不相信就是这么一个简单的标记，当然用 起来还不仅仅是这样，且听我慢慢道来： 链接标记中最重要的参数：“Href”，看清楚了可不是“Here”，它表示要链 接到的地方。这里要解释一点的是网络上的协议问题，也许你经常听到“Http” 、“FTP”等名称，它们是什么意思呢，实际上它们就是网络上的各种协议，HTT P协议是网上传输HTML文件的协议，而“FTP”是指文件传输协议，我们平时说的 登录FTP服务器就是它了，还有“Talnet”指远程登录协议，等等等等，要记住不 同的协议是不同的，它告诉浏览器去链接哪部分服务器，所以即使是http://www .netease.com和ftp://www.netease.com的含义也是完全不同的，得到的结果也不 同，而Href参数没有默认的协议。现在我们可以创建一个最简单的链接： 我的家 这是绝对链接，Href也可以使用相对链接，假定我们现在在http://www.netease .com/~myhome下，那么下面的代码： <a href=”about.htm”>关于我 表示的URL为“http://www.netease.com/~myhome/about.htm”，如果要链接到F TP服务器上也很容易“ftp://www.netease.com/~myhome/winamp.zip”。 有的朋友可能会问：那怎么用链接打开E-mail程序呢？非常简单，把协议换成“ mailto:”，如：<a href=”mailto:[email protected]”>给我来信，这样点击 该链接的话系统就会大开默认的E-mail程序进行处理，另一个和它相似的协议是 “newsgroup:”，它将打开默认的新闻组程序，用法和打开E-mail类似。 一个链接可以是文字也可以是图片，也可以是文字和图片的混合体，不信在链接 标记中插入些图片试试。我要提醒大家的是有时候你会发现键入代码却没有作用 ，这是怎么回事呢？回去检查你敲的有没有问题吧，很可能是一个疏忽造成了错 误，其中一个比较多的错误是标记中的代码使用了全角标点，在你看来全角的冒 号和半角的冒号可能没有什么区别，但是计算机会认为它们之间完全不同呢。 有时候我们需要在打开一个链接的时候让浏览器自动打开一个新窗口，特别是在 给朋友做友情链接的时候，你总不希望访客一溜烟的都跑到别人的家里，这时新 开一个窗口即方便了别人又便宜了自己，一举两得。怎么做呢？这里需要讲道 留在讲道帧的时候在告诉你。如果要打开新窗口，请把Target的值设为“_blank ”，如： <a href=”http://www.netease.com/~myfriend” target=”_blank”>朋友的家 这样点击改链接就会在新窗口中打开朋友的网页。 链接标记除去可以链接到外部的文件外，还可以在网页的内部建立链接称为锚点 （anchor），它是一个自动定位系统，需要先定义一个锚点，然后再让另一个链 接指向这个锚点，这样当点击这个链接时，浏览器就会自动滚动从而把屏幕定位 于锚点所在的位置，还是让我们看一个例子： <!-- 定义锚点 --> <a name=”#here”>我在这儿呢 …… <!-- 定义链接 --> <a href=”#here>点这里 你明白了吗？先定义锚点，使用参数name，其值之前一定要有“#”，然后在后面 的链接中定义链接就搞定了！上面代码中的<!-- …… -->表示注释作用，是为查 看代码方便而设的，浏览器将略过这些信息。 锚点也可以和普通的链接混合使用，假定已有一个文件“about.htm”，其中定义 了一个锚点叫做“here”，那么就可以使用下面的代码： <a href=”about.htm#here”>Click here 这样浏览器就会先下载这个网页，然后在定位到锚点所在的位置，一切OK了吧？ 今天心情特好，再免费奉送一个HTML标记<hr>，它用来在网页生成分割线，要注 意<hr>并不是一个容器型的标记。各参数如下表： 参数 说明 Align 对齐方式，可以为left、right、center，默认是向中间对齐 Width 规定分割线的长度，可以是象素或百分比（根据窗口或父标记）数值 Size 规定分割线的宽度 Noshade 如果使用该属性，浏览器将不显示三维效果 Color 规定分割线的颜色 如下面的页面： <html> <body> <h1 align=center>我的HOMEPAGE</h1> <hr color=red width="90%" size="4"> ………… </body> </html> （图1） 好今天的内容又结束了，下次我会为你讲解如何在网页中插入表格，它也是网页 内容定位的最佳方法，请继续关注。 -- ※ 来源:．月光软件站 http://www.moon-soft.com．[FROM: 202.102.28.20] |
|
[关闭][返回] |