web编程技术(4-6)剖析课件

《web编程技术(4-6)剖析课件》由会员分享，可在线阅读，更多相关《web编程技术(4-6)剖析课件（101页珍藏版）》请在金锄头文库上搜索。

1、第4章 超级链接,本章内容： 超级链接 电子邮件链接 锚记链接 图像链接 单图多链接 下载文件链接 脚本链接 无地址链接,网页文件的最大魅力是超越各个文件的空间，通过超链接相互连接构成一个纷繁复杂的互联网世界。 超链接（hyperlink）是一个网站的精髓，超链接在本质上属于一个网页的一部分，它是一种允许一个网页同其他网页或站点之间进行链接的元素。各个网页链接在一起后，才能真正构成一个网站。 超文本具有的链接能力，层层链接相关文件，这种具有超级链能力的特性，即称为超链接。 超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。,4.1

2、 超级链接的原理,超级链接一定是从一点跳跃到另一点。链接的起点称为源点(Source)，链接的终点称为目标点(Target)，从源点指向目标点的路径地址称为统一资源定位器（URL）。 超级链接的目标点可以是一个网页，可以是同一个网页中的不同位置，也可以是一个电子邮箱等。 从链接源点指向链接目标点的路径地址URL是实现链接的关键。URL不仅可以在单机上定位文件，而且可以在Internet上全球定位万维网上的主机、网站和网页文件，故称统一资源定位器。,4.2 超级链接标记,超链接标记是行内标记，以开始，以结束，可以指向网络上的任何资源：一张HTML页面，一幅图像，一个声音或视频文件等。其主要功能是

3、实现超级链接。 格式：超链接名称 属性： href：定义了这个链接所指的目标地址，也就是路径。 Title：给链接添加提示信息。 Name：给链接命名。 target:指定链接的目标窗口，有 4 个保留的目标名称用作特殊的文档重定向操作。 _blank:在新窗口中打开被链接文档。 _self:默认。在相同的框架中打开被链接文档。 _parent:在父框架集中打开被链接文档。 _top:在整个窗口中打开被链接文档。,4.2 超级链接种类,4.3.1 普通链接 普通链接就是按照超链接的基本格式发生的链接。 例:超级链接中的提示信息。 超链接的提示信息 计算机学院实验中心 计算机维护技术学习平台(新

4、版) 计算机维护技术学习平台 大型仪器共享平台 江苏大学摄影协会 ,4.3 超链接的种类,例:超级链接标记A的href属性 HTML代码如下： 超链接 网易 搜狐 新浪 ,4.3 超链接的种类,4.3.2锚记链接 在浏览页面时，如果页面篇幅很长，要不断的拖动滚动条，给浏览带来不便，要是浏览者既可以从头阅读到尾，又可以很快寻找到自己感兴趣的特定内容进行部分阅读，这个时候就可以通过书签链接来实现。当浏览者单击页面上的某一“标签”，称为“锚记”，就能自动跳到网页相应的位置进行阅读，给浏览者带来方便。 使用两条语句实现锚记链接：设置锚记和链接。 格式： 而超级链接的源点仍然使用的标记，不过href的参

5、数URL改成锚记名。 格式： ,4.3 超链接的种类,4.3.3电子邮件链接 在HTML页面中建立E-mail链接，用户单击链接，系统会自动启动默认的电子邮件软件，打开一个邮件窗口。 格式：邮箱地址文本 例：电子邮件地址为：ma_，在网页上有“与我联系”文字链接源点。建立电子邮件链接。 代码如下： 和我联系 ,4.3 超链接的种类,4.3.4 FTP链接 FTP是一种文件传输协议，它是计算机与计算机之间能够相互通信的语言，通过FTP可以获得Internet上丰富的资源。 基本语法： 链接文字 例： ftp链接 这是一个FTP链接： FTP服务器 ,4.3 超链接的种类,4.3.5 下载文件链接

6、 如果希望制作下载文件的链接，只需在链接地址处输入文件所在的位置即可。当浏览器用户单击链接后，浏览器会自动判断文件的类型，以做出不同情况的处理。 基本语法： 链接内容 说明：url代表文件所在的相对路径或绝对路径 文件类型可以是word文档、PDF文档、可执行文件、压缩文件等等。,4.3 超级链接的种类,4.3.5 下载文件链接 例题：代码如下 下载文件链接 下载专区 1. dreamwaver cs3 2. Microsoft office 2003 3. HTML ,4.3 超级链接的种类,4.3.6 图像链接 图像超链接的建立与文本的超链接相似，只是选择的不是文本而是图片。图像连接可以实

7、现单图单链接和单图多链接。 1. 单图单链接：一个图像只能加一个a标签，做一个链接 格式： 例： ,2.单图多链接 单图多链接：如果把一幅图像分成多个区域，每个区域被称为一个热点，每个热点指向不同的超链接。 格式如下： 说明： 单图多链接主要由两部分：图像部分和链接部分，二者用usemap=map 名称 来关联。 标记，插入一个名为zgdt.jpg图片，另一个是名为DT的标记。在标记中使用usemap=“#DT”来实现关联。,定义热点区域名称 指定每个热点区域 Shape指定形状 rect（矩形，4个参数）, poly（多边形，2n个参数）, circle（圆，三个参数） Coords确定形状

8、 href指定链接的位置 注：图像地图有两个弊端，建议大家尽量不要使用。 1.图像太多，加载速度慢 2.搜索引擎在图像上的文字搜索不到,4.3 超级链接的种类,4.3.7脚本链接 在网页上实行某种动态功能，可用超链接实现。 链接一个脚本。 例：网页中的脚本链接。代码如下： 脚本链接 感谢 ,4.3 超级链接的种类,4.3.8 空链接 在a链接的href属性处不填写任何数值，只是用“#”赋值。 例：当单击“检验” 字时，执行Checkit()事件处理函数。 代码如下： 检验 ,例：图片链接 图片链接 江苏大学景色 ,第5章 表格与框架,本章内容： 表格Table、tr、td标记 表格的背景、边框

9、 合并单元格 表格的嵌套 布局表格的应用 创建框架 框架的嵌套,表格在网站应用中非常广泛，几乎所有的 HTML页面中都或多或少地采用表格，表格可以方便灵活地实现对网页的排版，可以把相互关联的信息元素集中定位，使浏览页面的人一目了然，赏心悦目。所以说要制作好网页，就要学好表格，熟练掌握和运用表格的各种属性。,5.1 创建表格,5.1.1 表格的基本构成table、tr、td 表格的标记为，表格行标记为、单元格标记为。 表格标记的格式为： . . . ,5.1 创建表格,5.1.1 表格的基本构成table、tr、td 例: 写出一个两行、两列的边框（border）宽1像素的表格的标记。代码： ,

10、5.1 创建表格,5.1.2 设置表格的标题 caption 放在tr标签之前，放在table的内部使用 例:caption标记的使用。代码： caption标记 热门图书,5.1 创建表格, 图书名称 单价 作者 网页设计 21.20 王大海 ,5.1 创建表格,5.1.3 表格的表头标记 th 例:表格的标记。代码： th标记 热门图书,5.1 创建表格, 图书名称 单价 作者 网页设计 21.20 王大海 ,标签:指表格的第一行，文字样式为居中、加粗显示。,5.1 创建表格,5.1.4 表格的结构 为了清楚区分表格结构，将一个表格分三个部分在网页上显示出来，HTML语言规定了、3个标签分

11、别对应于表格的表首、表主体和表尾。 基本语法： ,例: thead、 tbody、 tfoot的使用方法。代码如下： 表格结构 图书名称 单价 作者 网页设计 21.20 王大海 , c语言程序设计 25.00 白云 Flex入门 31.20 孙旺 欢迎购买 ,5.1 创建表格,练习：创建如下表格，写出代码：,5.2 设置表格的属性,表格是网页布局中的重要元素，它有丰富的属性，可以对其进行相关设置。 5.2.1 设置表格的宽度与高度 对于表格（table）、行（tr）和单元格（td）标记都可以设置宽度（width）和高度（height）方法是一样的。 格式： 说明： 表格的宽度和高度的值可以是

12、像素（px），也可以是百分比(%)，如果不指定，则默认宽度自适应。,5.2 设置表格的属性,5.2.2 设置背景 表格可以设置背景颜色(bgcolor)和背景图像(background)。 格式： 说明： 如果同时设置了表格的背景色和背景图像，只能显示背景图像，看不见背景颜色。,5.2 设置表格的属性,5.2.3 设置边框 可以设置表格边框的宽度(border)、颜色(bordercolor)。 格式： 说明： 宽度值单位为像素px。,5.2 设置表格的属性,5.2.4设置表格单元格间距 单元格的间距 通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过

13、于紧凑。一般不设该属性，或者将cellspacing=“0”。 基本语法： ,5.2 设置表格的属性,5.2.5 设置表格单元格边距 单元格边距 单元格边距是指单元格中的内容与单元格边框的距离。 基本语法： ,5.2 设置表格的属性,5.2.6 设置对齐方式 表格标记中可以设置对齐方式，以决定表格在其父容器中的水平位置。对齐方式由属性align决定，它的取值可以为left、center和right。 格式： ,5.3 编辑表格,5.3.1 水平合并单元格 水平方向合并单元格实际上是将不同列（column）上的单元格合并，属性colspan就是指合并时水平方向上跨越的列数。 格式： ,5.3 编

14、辑表格,5.3.2 垂直合并单元格 垂直方向合并单元格实际上是将不同行（row）上的单元格合并，属性rowspan就是指合并时垂直方向上跨越的行数。 格式 ,5.3 编辑表格,5.3.3 表格嵌套 表格嵌套就是根据插入元素的需要，在一个表格的某个单元格里再插入一个若干行和列的表格。对嵌套表格，可以像对任何其他表格一样进行格式设置，但是其宽度受它所在单元格的宽度的限制。利用表格的嵌套，一方面可以编辑出复杂而精美的效果，另一方面可根据布局需要来实现精确的编排。不过，需要注意的是，嵌套层次越多，网页的载入速度就会越慢。,5.3.4 用表格布局网页 早期的网页都是用表格进行布局的。使用表格布局的最好工

15、具就是Dreamweaver 。 使用Dreamweaver ，可以方便地绘制“布局表格”和“布局单元格”以定义文档的设计区域。 而且绘制好的单元格还可以随意放大、缩小和移动位置。 后台的代码由系统自动编写和修改。这些代码全部是、和标记。,5.4 框架,5.4.1 创建框架 框架技术可以将浏览器分割成多个小窗口，并且在每个小窗口中，可以显示不同的网页，这样我们就可以很方便的在浏览器中浏览不同的网页效果。 当浏览器分割成多个窗口后，各窗口就会扮演不同的角色，实现不同的功能。举例来说，有些论坛就是把浏览器分割成两个窗口，一个窗口主要来显示帖子的标题，而另一个窗口会显示具体的内容。这样的设计显然比起

16、一个窗口的网页在浏览时方便得多，而且用户也可以任意的切换题目。 框架定义语句在head与body标记之间,5.4框架,5.4.2 frame和frameset标记 框架的基本结构主要分为框架和框架集两个部分。 它是利用标记与标记来定义。其中标记用于定义框架，而标记则用于定义框架集。 1.框架标记 格式： 其中： Src：框架中显示的网页的URL地址。 Name：框架名称，这是每个框架的标识。,5.4 框架,5.4.2 frame和frameset标记 常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。 2.框架集标记 格式： 其中： rows 是将窗口分成上、下两个框架。（水平分割） Cols是将窗口左、右分割成框架（垂直分割）。 如果分成多个