网页设计超链接.ppt

作业 制作页面-continent/index.html 体现以下技术的几种： 内部链接建立 外部链接建立 锚点链接 图像链接 图像映射 * 框架 广告栏顶部框架(top.htm) 商品详细介绍右侧框架(main.htm) 商品导航 左侧 框架(left.htm) 为何使用框架 在另一个固定部分 显示导航部分 在页面的一个固定部分显示徽标或静态信息 在此处显示主要内容。 站点中只有此部分是变化的。 * 9.1 框架概述 框架用于将浏览器窗口划分为若干个区域，每个区域可以分别显示不同的页面内容；另外框架可以方便地进行网页的导航。 框架集 框架主要包括两部分：框架集和框架。 框架集是在一个文档内定义一组框架结构的HTML网页，它定义了在一个窗口中显示的框架数、框架的尺寸和载入到框架中的网页等 框架指在网页上定义的一个显示区域。 * 框架集语法及属性 html head…/head frameset cols||rows=“” framespacing=“” bordercolor=“” frame src=“页面文件名称” frame src=“页面文件名称” /frameset /html frameset标签属性如下： Cols：将窗口纵向划分为几个框架 Rows：将窗口横向划分为几个框架 Framespacing：设置框架边框之间的间隔距离，默认0 Bordercolor：设置框架边框颜色（设置的是间距颜色） 注意：在框架集页面代码中不要使用body标签，即frameset与body不同时使用 * 补充例题 将窗口分割成左右两部分，左面占据20%，框架边框间距为4像素，颜色为红色（3-8.htm）（若是上下分割呢？） 代码如下： htmlheadtitle框架的应用/title/head frameset rows=190,* bordercolor=red framespacing=4 frame frame /frameset /html 此处指定上侧框架窗口为190px，*代表剩下的宽度 * 框架的设置 完成窗口分割后，需要对分割出来的每个子窗口进行控制，相应的属性在frame标签中设置，主要属性如下： src：设置子窗口中要显示的页面的路径和名称 name：设置子窗口的名称 frameborder：设置边框宽度，通常将其设置为0 scrolling：设置是否显示滚动条，取值有yes、no、auto（默认） noresize：禁止改变子窗口大小 marginwidth marginheight * Src属性应用举例 html head title框架应用/title /head frameset cols=190,* frame src=navigation.html frame src=main.html /frameset /html * Name属性举例 在frame6.htm中，点击左侧框架中的超级链接，结果都显示在新窗口中，若要把左侧框架中的超链接“课程特色”、“教学大纲”、“电子课件”、“电子教案”、“授课计划”和“教材建设”所链接的页面内容显示在右侧框架中，该如何进行？ 将右侧框架命名为right 将navigation.html中的每个超链接设置target=right 3.7.6 在框架之间进行链接 图3.20 框架之间的链接 * 9.5 浮动框架 使用普通框架很难控制页面的整体宽度和布局，而浮动框架是一种特殊的框架页面，在浏览器窗口中可以直接将浮动框架嵌入在某个单元格中，以达到通过表格控制页面布局的目的。语法如下： iframe src=“” width=“” height=“” name=“” align=“” frameborder=“” scrolling=“”/iframe 注意：浮动框架总是要显式设置高度和宽度 * 完成案例iframe.htm 770x150 设置logo 770x35 设置一级导航，内嵌1行10列表格 嵌套一行两列表格 185*400 浮动框架left Src为jxnrdh.html 585*400 浮动框架right Src为jxnr/kcts.html * 为上面案例添加外围一行一列的外围表格，用于设置页面边框效果。 * 演示例子：TG4-Source文件夹中“超链接“用例 * 提问：(因为前面讲过)，链接路径分为哪两类？ 引导回答：相对和绝对路径 * 演示： TG4-Source文件夹中“锚链接“用例 * 演示： TG4-Source文件夹中的“EMail链接” * 提问学员: 买钻石送给女朋友的,到这里来.哈哈.引出框架网页. 演示：框架，参见：TG5-Source文