Dreamweaver80第七讲 初试HTML和CSS语言.doc

第七讲 初试HTML和CSS语言（中） 通过上一讲的学习，我们了解了HTML的基本语法和文档总体结构，学习了使用HTML控制文字外观和段落格式，并且学习了使用HTML修饰页面。现在我们开始新的课程，通过本讲的学习，我们希望达到下面的学习目标： ◆ 学会使用HTML创建超级链接； ◆ 掌握创建图片超级链接的方法； ◆ 了解表格的HTML； ◆ 学会使用HTML语言控制图片。 7.1 使用HTML创建超级链接 在学习使用HTML创建超级链接之前，要搞清楚二个重要的概念---绝对路径和相对路径。 什么是绝对路径？计算机要找到需要的文件就必须知道文件的位置，而表示文件的位置的方式就是路径，例如只要看到这个路径：c:/website/index.htm，就知道index.htm文件是在c盘的website文件夹下面。类似于这样完整的描述文件位置的路径就是绝对路径。用户不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。而在网站中类似/index.htm这样的路径来确定文件位置的方式也是绝对路径。 另外，在网站的应用中，通常使用/来表示根目录，/img/photo.jpg就表示photo.jpg文件在这个网站的根目录上的img目录里。但是这样使用对于初学者来说是具有风险性的，因为要知道这里所指的根目录并不是初学者的网站根目录，而是你的网站所在的服务器的根目录，因此当网站的根目录与服务器根目录不同时，就会发生错误。因此，做好的网页在自己机器上可以正常浏览，而把页面传到服务器上就总是出现看不到图片或Flash等错误。 什么是相对路径？先来分析一下为什么会发生图片不能正常显示的情况。举一个例子，现在有一个页面index.htm,在这个页面中联接有一张图片photo.jpg。它们的绝对路径如下： c:/website/index.htm 　　c:/website/img/photo.jpg 　　如果使用绝对路径c:/website/img/photo.jpg，那么在自己的计算机上将一切正常，因为确实可以在指定的位置即c:/website/img/photo.jpg上找到photo.jpg文件，但是将页面上传到网站的时候就很可能会出错了，因为网站可能在服务器的c盘，可能在d盘，也可能在aa目录下，更可能在bb目录下，总之没有理由一定会有c:/website/img/photo.jpg这样一个路径。那么，在index.htm文件中要使用什么样的路径来定位photo.jpg文件呢？对，应该是用相对路径，所谓相对路径，顾名思义就是自己相对与目标位置。在上例中index.htm中联接的photo.jpg可以使用img/photo.jpg来定位文件，那么不论将这些文件放到哪里，只要他们的相对关系没有变，就不会出错。 　　根据DOS里的规则，使用“../”来表示上一级目录，“../../”表示上上级的目录，以此类推。再看几个例子，注意所有例子中都是index.htm文件中联接有一张图片photo.jpg。 　　例： 　　c:/website/web/index.htm 　　c:/website/img/photo.jpg 　　在此例中index.htm中联接的photo.jpg应该怎样表示呢？ 　　错误写法：img/photo.jpg 　　这种写法是不正确的，在此例中，对于index.htm文件来说img/photo.jpg所代表的绝对路径是：c:/website/web/img/photo.jpg，显然不符合要求。 　　正确写法：使用../img/photo.jpg的相对路径来定位文件 　　通过以上的例子可以发现，在把绝对路径转化为相对路径的时候，两个文件绝对路径中相同的部分都可以忽略，不做考虑。只要考虑他们不同之处就可以了。 　　最后，为了避免在制作网页时出现路径错误，可以使用dreamweaver的站点管理功能来管理站点。新建站点并定义站点目录之后，dreamweaver将自动的把绝对路径转化为相对路径，并且当用户在站点中移动文件的时候，与这些文件关联的连接路径都会自动更改。 7.1.1 用a标签创建超级链接 要实现文档的链接和跳转就要用到超级链接标签a。同前面提及的font标签一样，a标签也是一个封闭标签，必须使用a对象/a的形式，否则浏览器会把a之后的所有内容当作超级链接，直到有/a出现。 a标签有两个常用的属性href及target。 a标签的href属性规定了链接指向的文档位置，称为文档的URL（Uniform Resource Locat，统一资源地址），它包括两个部分： 1. 用来访问资源的协议，例如http（超文本传输协议）