W3C标准网页制作 主讲教师:张 涛.

Slides:



Advertisements
Similar presentations
第四讲 课 题:在 Dreamweaver8 中使用表格布置页面 目的及要求:使用表格布置页面 教学重点:重点掌握设置表格属性的方法 教学难点:嵌套单元格设置布局表格的形式对网页进 行布局 教学课时: 2 课时 教学方法:提问与比较教学方式,激发学生兴趣; 教学内容与步骤:
Advertisements

LOGO 《静态网页设计》课程整体设计 电子信息工程系 计算机专业 李超燕. LOGO 2 课程在专业课程体系中的定位 3 岗位分析 目 录 1 课程的基本信息 6 本课程的特色和效果 4 教学整体设计 5 教学基本条件.
第六章 网页设计与制作基础.
HTML第一课 李 伟 HTML开发语言基础.
專題製作 許惠淑.
第5章 HTML 標籤介紹.
活力校園 5C 顏慧玲.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
网页制作 第一讲
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
第三讲 站点链接与表格布局.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
网页 设计与制作.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
第五单元课1-3 层叠样式表.
第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
Dreamweaver的工作界面.
dreamweavercs5 页面的框架结构
A級無障礙網頁製作 主講人:劉威良 臺南大學資訊教育所
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
第二章 網際網路網頁的設計.
HTML.
网页设计(1) 第12讲 网页技术简介 马秀麟 2014年5月 2018/9/17 制作人:马秀麟.
第五章 网页设计 网页制作的语言和工具 网页制作步骤和原则 使用Dreamweaver工具制作网页 使用FrontPage工具制作网页
ASP动态网页设计实用教程 主讲教师: 开课单位:.
  本章共分21个实例,主要内容包括HTML 创建与测试、html的文档结构、常用标记的使 用、表格和层的使用技灵活掌握等内容。
网页制作 第五讲 Dreamweaver基础.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
网页设计 上海建桥学院信息技术系 矫桂娥
网 页 制 作 DREAMWEAVERMX 2004.
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
DreamWeaver MX (VI) 林偉川.
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
HTML 钟晖云 QQ:
第2章 超文本标记语言HTML.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
网页制作与设计 主编 耿 杰 科学出版社.
W3C标准网页制作 主讲教师:张 涛.
授课教师:姬广永 QQ: TEL: 学习交流网站:
网 站 设 计 与 建 设 Website design and developments
十二年國民基本教育中等學校教師教學專業能力研習五堂課
项目9 使用框架布局制作网页.
学生网页作品情况分析.
W3C标准网页制作 主讲教师:张 涛.
W3C标准网页制作 主讲教师:张 涛.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
网页制作基础 授课老师: 黄露.
運用 Google Earth 製作戶外考察報告
網站總復習之重點 李燕秋
Prepared by : Au Kit Ming
DreamWeaver MX (III) 林偉川.
HTML大探索.
指導單位:教育部 辦理單位:花蓮縣政府教育處、花蓮縣教育網路中心 協辦單位:國立東華大學
指導單位:教育部 辦理單位:花蓮縣政府教育處、花蓮縣教育網路中心 協辦單位:國立東華大學
CHAPTER 14 視窗與超連結的各種變化.
第6章 框架实现多窗口网页.
連結 (anchor link).
网页设计三合一教程 主讲教师 2019/6/2.
《网页动画设计与制作》 课程导读.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
网站规划与建设 第2章 典型网站分析 学习网站:
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
HTML5.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

W3C标准网页制作 主讲教师:张 涛

第12讲、使用框架结构 12.1.什么是框架 12.2.框架集标记<FRAMESET> 12.3.框架标记<FRAME> 12.4.不支持框架标记<NOFRAMES> 12.5.浮动框架<IFRMAE> 12.6.框架与链接

12.1.什么是框架    如果网页的各部分为相互独立的网页,又由一个网页将这些分开的网页组成一个完整的网页,显示于浏览者的浏览器中,重复出现的内容被固定下来,每次浏览者发出对页面的请求时,只下载发生变化的框架的页面,其他子页面保持不变,必然会给浏览者带来方便,节省时间。     框架的作用就是把浏览器窗口划分为若干个区域,每个区域可以分别显示不同的网页。使用框架可以非常方便地完成导航工作,而且各个框架之间决不存在干扰问题,所以框架技术一直普遍应用于页面导航。     如图12-1所示的就是一个典型的框架网页页面。该网页将一个浏览器窗口分割成了两个部分,分别是左、右两个框架。这样,使用框架分割一个页面后,同一页面里就可以调用不同的HTML文件。其中,左侧是框架网页的导航,右侧是单击导航后打开的主页面。     如图12-2所示,单击左侧的栏目后只有右侧的页面产生变化。     使用框架网页最主要的目的是创建链接的结构。导航条被放置于一个框架之中,可以单击导航条向服务器请求网页,链接的网页出现在另外的框架中,而导航栏所在的网页不发生变化。就好比是看电视时使用遥控器,电视画面出现在电视机中。不管显示在电视中的频道发生怎样的变化,手中的遥控器不会变化。     同时,框架网页还可以免除浏览者来回滚动窗口。如果网页中的内容部分很长,浏览者拖动滚动条到了页面底部后要切换到别的页面,可以不必再拖动滚动条返回页面顶部,因为导航条在另外的框架中,并不受内容框架滚动的影响。

12.2.框架集标记<FRAMESET> 框架主要包括两个部分,一个是框架集,另一个就是框架。框架集是在一个文档内定义一组框架结构的HTML网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。而框架则是指在网页上定义的一个显示区域。 如下代码是基本的页面代码: <HTML> <head> <Title>基本框架代码</title> </head>     <frameset>      <Frame>      <frame>      …… </frameset> </html> 在使用了框架集的页面中,页面的<BODY>标记被<FRAMESET>标记所取代,然后通过<FRAME>标记定义每一个框架。下面按照框架的分割方式来介绍框架集标记。主要的分割方式有以下3种:  

12.2.1 左右分割窗口属性COLS 在水平的方向,浏览器可以被分割成多个窗口,这需要使用到框架的左右分割窗口属性COLS。基本语法 <Frameset  cols=“value, value,……”>       <frame>       <frame> …… </frameset> 语法解释 VALUE为定义各个框架的宽度值,单位可以是像素,也可以是百分比。 文件范例:12-1.htm 将浏览器分成左右分割的窗口。 <!-- ------------------------------------------ --> <!--            文件范例:12-1.htm            --> <!--          文件说明:左右分割窗口              --> <!-- ------------------------------------------ --> <HTML> <HEAD>

12.2.1 左右分割窗口属性COLS <TITLE>左右分割窗口</TITLE> </HEAD> <FRAMWSET COLS=“30%,70%”>      <FRAME>      <FRAME>  </FRAMESET>  </HTML> 文件说明 第9行将窗口分割成左右两个,宽度分别为30%和70%。第10行和第11行就对应这两个窗口。 显示结果     如图12-3所示的就是左右分割窗口的显示结果。  

12.2.2  上下分割窗口属性ROWS 在垂直的方向,浏览器可以被分割成多个窗口,这需要使用框架的上下分割窗口属性ROWS。 基本语法 <Frameset ROWS=“value, value,……”>      <frame>      <frame>      …… </frameset> 语法解释 VALUE为定义各个框架的宽度值,单位可以是像素,也可以是百分比。 文件范例:12-2.htm 将浏览器分成上下分割的窗口。 <!-- ------------------------------------------ --> <!--            文件范例:12-2.htm            --> <!--          文件说明:上下分割窗口              --> <!-- ------------------------------------------ --> <HTML>  <HEAD>

12.2.2 上下分割窗口属性ROWS <TITLE>上下分割窗口</TITLE> </HEAD> <FRAMWSET ROWS=“20%,60%,*”>      <FRAME>      <FRAME>      <FRAME> </FRAMESET> </HTML> 文件说明     第9行将窗口分割成上、中、下3个,高度分别为20%,60%和20%。其中“*”代表分割剩下的部分。第10行~第12行就对应这3个窗口。 显示结果 如图12-4所示的就是上下分割窗口的显示结果。

12.2.3 嵌套分割窗口属性ROWS 如果希望在同一个浏览器窗口中,将其既按照行来分割,又按照列来分割,这种框架称为嵌套框架。     如图12-5所示的就是一种典型的嵌套框架,先进行左右分割,然后将右侧的窗口进行上下分割。 基本语法 <Frameset ROWS=“value, value,……”>      <frame>          <Frameset cols=“value, value,……”>              <Frame>              <Frame>   ……      </Frameset>      <frame>   …… </frameset> 语法解释 上述代码先将框架按照行进行上下分割,然后在第二个框架中进行按照列的左右分割。

12.2.3 嵌套分割窗口属性ROWS 文件范例:12-3.htm 将浏览器分成嵌套分割的窗口。 <!-- ------------------------------------------ --> <!--            文件范例:12-3.htm            --> <!--          文件说明:嵌套分割窗口              --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>嵌套分割窗口</TITLE> </HEAD> <FRAMWSET COLS=“20%,*”>     <FRAME>     <FRAMESET ROWS=“20%,*”>        <FRAME>        <FRAME>     </FRAMESET> </FRAMESET> </HTML>

12.2.3 嵌套分割窗口属性ROWS 文件说明     第9行将窗口分割成左右两个,宽度分别为20%和80%。第10行对应左侧的窗口。第11行将右侧的窗口分割成上下两个,高度分别为20%和80%。第12行和第13行对应右侧上下两个窗口。 显示结果 如图12-6所示的就是嵌套分割窗口的显示结果。

12.2.4 框架集边框宽度属性FRAMESPACING 通过这个属性,能够设定框架集的边框宽度。 基本语法 <frameset Framespacing=“value”> 文件范例:12-4.htm 设定框架集的边框宽度。 <!-- ------------------------------------------ --> <!--            文件范例:12-4.htm            --> <!--        文件说明:设定框架边框宽度           --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>设定框架边框宽度</TITLE> </HEAD> <FRAMWSET COLS=“20%,*” FrameSpacing=15>     <FRAME>     <FRAMESET ROWS=“20%,*”>        <FRAME>        <FRAME>     </FRAMESET>

12.2.4 框架集边框宽度属性FRAMESPACING </FRAMESET> </HTML> 文件说明 第9行设定框架边框宽度为15像素。 显示结果 如图12-7所示的就是设定框架边框宽度的显示结果。

12.2.5 框架集边框颜色属性BORDERCOLOR 通过这个属性,能够设定框架集边框的颜色。 基本语法 <frameset Bordercolor=“Color_value”> 文件范例:12-5.htm 设定框架集的边框颜色。 <!-- ------------------------------------------ --> <!--            文件范例:12-5.htm            --> <!--        文件说明:设定框架边框颜色           --> <!-- ------------------------------------------ -->  <HTML>  <HEAD> <TITLE>设定框架边框颜色</TITLE> </HEAD> <FRAMWSET COLS=“20%,*” FrameSpacing=15 BorderColor=“#336699”>      <FRAME>      <FRAMESET ROWS=“20%,*”>     

12.2.5框架集边框颜色属性BORDERCOLOR   <FRAME>        <FRAME>     </FRAMESET> </FRAMESET> </HTML> 文件说明 第9行设定框架边框颜色为#336699。 显示结果 如图12-8所示的就是设定框架边框颜色的显示结果。

12.3.框架标记<FRAME>     每一个框架都有一个显示的页面,这个页面文件称为框架页面。通过<FRAME>标记可以定义框架页面的内容。 12.3.1  框架页面源文件属性SRC 通过SRC属性设置框架显示的文件路径。 基本语法 <frame SRC=“File_NAME”> 文件范例:12-6.htm 设定框架页面的内容。 <!-- ------------------------------------------ --> <!--            文件范例:12-6.htm            --> <!--       文件说明:设定框架页面的内容          --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>设定框架页面的内容</TITLE> </HEAD>

12.3.框架标记<FRAME> <FRAMWSET COLS=“50%,50%”>      <FRAME SRC=12-6-1.htm>      <FRAME SRC=12-6-2.htm> </FRAMESET> </HTML> 文件说明 第10行和第11行指定框架显示的页面,这两个页面是第8章制作的8-1-1.htm和8-1-2.htm页面。 显示结果 如图12-9所示的就是设定框架页面源文件的显示结果。

12.3.2  框架名称属性NAME 我们可以为每一个链接命名,所起的名称将被用于页面的链接和脚本描述,所以框架的命名有一定的规则,框架名称必须是单个单词,允许使用下划线(_),但不允许使用连字符(-)、句点(.)和空格。框架名称必须以字母起始,而不能以数字起始。框架名称区分大小写。不要使用JavaScript中的保留字(例如top或navigator)作为框架名称。 基本语法 <frame SRC=“File_NAME” NAME=“Frame_NAME”> 文件范例:12-7.htm 设定框架页面的名称。 <!-- ------------------------------------------ -->  <!--            文件范例:12-7.htm            --> <!--         文件说明:设定框架的名称             --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>设定框架的名称</TITLE> </HEAD> <FRAMESET  cols=50%,50%>    <FRAME name=main  src="2.html" scrolling=auto>    <FRAME name=rightmain  src="3.html" scrolling=auto>  </FRAMESET> </HTML> 文件说明 第10行和第11行指定框架显示的页面,并分别为两个框架命名。 显示结果 框架的名称并不会影响显示的效果,所以请参考图12-9的显示。

12.3.2  框架名称属性NAME <FRAME name=main  src="2.html" scrolling=auto>    <FRAME name=rightmain  src="3.html" scrolling=auto>  </FRAMESET> </HTML> 文件说明 第10行和第11行指定框架显示的页面,并分别为两个框架命名。 显示结果 框架的名称并不会影响显示的效果,所以请参考图12-9的显示。

12.3.3  框架边框显示属性FRAMEBORDER 框架的显示情况根据其所属框架集的设定而决定,也就是说该框架继承其框架集的边框属性。 基本语法 <frame SRC=“File_NAME” FRAMEBORDER=“Value”> 语法解释 VALUE取值为0或1,0为不显示边框,1为显示边框。 文件范例:12-8.htm 设定框架边框显示。 <!-- ------------------------------------------ --> <!--            文件范例:12-8.htm            --> <!--       文件说明:设定框架边框的显示          --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>设定框架边框的显示</TITLE> </HEAD> <FRAMWSET COLS=“50%,50%”>      <FRAME SRC=12-6-1.htm FrameBorder=1>   

12.3.3  框架边框显示属性FRAMEBORDER <FRAME SRC=12-6-2.htm FrameBorder=0> </FRAMESET> </HTML> 文件说明 第10行设定左侧的边框显示,第11行设定右侧的边框为不显示。 显示结果 如图12-10所示的就是设定框架边框显示的结果。

12.3.4  框架滚动条显示属性SCROLLING 当框架内的空间不够显示页面的内容时,可以通过滚动条来实现页面的滚动,使用户看到隐藏的内容。这个属性可以设定滚动条是否显示。 基本语法 <frame SRC=“File_NAME” SCROLLING=“value”> 语法解释 VALUE取值范围如表12-1所示。 文件范例:12-9.htm 设定框架滚动条的显示。 <!-- ------------------------------------------ --> <!--            文件范例:12-9.htm            --> <!--      文件说明:设定框架滚动条的显示        -->

12.3.4  框架滚动条显示属性SCROLLING <HTML> <HEAD> <TITLE>设定框架滚动条的显示</TITLE> </HEAD> <FRAMWSET COLS=“50%,50%”>      <FRAME SRC=12-6-1.htm Scrolling=“No”>      <FRAME SRC=12-6-2.htm Scrolling=“Auto”>  </FRAMESET> </HTML> 文件说明 第10行设定左侧的滚动条为不显示,第11行设定右侧的滚动条为自动显示。 显示结果 如图12-11所示的就是设定框架滚动条是否显示的结果。

12.3.5  框架尺寸调整属性NORESIZE 浏览带有框架的页面时,有些框架的尺寸是可以改变的,而有些则不可以。这主要是由NORESIZE属性来控制的。 基本语法 <frame SRC=“File_NAME” Noresize> 语法解释 NORESIZE代表禁止改变框架的尺寸大小。 文件范例:12-10.htm 设定不允许调整框架的尺寸。 <!-- ------------------------------------------ --> <!--            文件范例:12-10.htm           --> <!--      文件说明:设定不允许调整框架尺寸     --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>设定不允许调整框架尺寸</TITLE> </HEAD> <FRAMWSET COLS=“50%,50%”>     

12.3.5  框架尺寸调整属性NORESIZE  <FRAME SRC=12-6-1.htm NoResize>      <FRAME SRC=12-6-2.htm Scrolling=“Auto”> </FRAMESET> </HTML> 文件说明 第10行设定禁止调整左侧的框架尺寸。 显示结果 如图12-12所示的就是设定不允许调整框架尺寸的显示结果,鼠标无法拖动框架的边框。

12.3.6  框架边缘宽度属性MARGINWIDTH HTML页面有其页边距设定,框架与页面一样,也存在着框架边距。通过MARGINWIDTH能够设定框架的左右边缘宽度。 基本语法 <frame SRC=“File_NAME” MarginWidth=“Value”> 文件范例:12-11.htm 设定框架的边缘宽度。 <!-- ------------------------------------------ --> <!--            文件范例:12-11.htm           --> <!--        文件说明:设定框架的边缘宽度        --> <!-- ------------------------------------------ --> <HTML>  <HEAD> <TITLE>设定框架的边缘宽度</TITLE> </HEAD> <FRAMWSET COLS=“50%,50%”>     <FRAME SRC=12-6-1.htm Scrolling=“No” MarginWidth=40>     <FRAME SRC=12-6-2.htm Scrolling=“Auto”> </FRAMESET> 。

12.3.6  框架边缘宽度属性MARGINWIDTH </HTML> 文件说明 第10行设定框架的边缘宽度为40像素。 显示结果 如图12-13所示的就是设定框架边缘宽度后的显示结果

12.3.7 框架边缘高度属性MARGINHEIGHT 和框架的边缘宽度相似,通过MARGINHEIGHT能够设定框架的上下边缘高度。 基本语法 <frame SRC=“File_NAME” MarginHeight=“Value”> 文件范例:12-12.htm 设定框架的边缘高度。 <!-- ------------------------------------------ --> <!--            文件范例:12-12.htm           --> <!--        文件说明:设定框架的边缘高度        --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>设定框架的边缘高度</TITLE> </HEAD> <FRAMWSET COLS=“50%,50%”>      <FRAME SRC=12-6-1.htm Scrolling=“No” MarginHeight=40>      <FRAME SRC=12-6-2.htm Scrolling=“Auto”> </FRAMESET>

12.3.7 框架边缘高度属性MARGINHEIGHT </HTML> 文件说明 第10行设定框架的边缘高度为40像素。 显示结果 如图12-14所示的就是设定框架边缘高度后的显示结果。

12.4不支持框架标记<NOFRAMES> 虽然框架技术是较早使用的一种导航技术,但是仍然有一些早期版本的浏览器不支持框架。对于制作人员这一现象可能无法改变,我们所能做的只能是显示该浏览器不支持框架技术,有些内容无法看到。使用<NOFRAMES>标记可以完成这一任务,当浏览器不能加载框架集文件时,会检索到<NOFRAMES>标记,并显示标记中的内容。 基本语法 <Frameset>      <frame>      <frame>      ……            <Noframe>          ……      </Noframe> </Frameset> 语法解释     放在<NOFRAMES>标记之间的部分就是在不支持框架的浏览器中显示的内容,也就是<BODY>标记中的内容。

12.4不支持框架标记<NOFRAMES> 文件范例:12-13.htm 设定不支持框架的浏览器显示的页面。 <!-- ------------------------------------------ --> <!--            文件范例:12-13.htm           --> <!--   文件说明:设定不支持框架的浏览器的页面  -->  <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>设定不支持框架的浏览器的页面</TITLE> </HEAD> <FRAMWSET COLS=“50%,50%”>     <FRAME SRC=12-6-1.htm Scrolling=“No”>     <FRAME SRC=12-6-2.htm Scrolling=“Auto”>     <NoFrame>     对不起,您的浏览器不支持框架页面的显示。     </NoFrame> </FRAMESET> </HTML> 文件说明 第12行~第14行设定不支持框架的浏览器显示的页面内容。 显示结果 对于不支持框架的低版本浏览器,将显示代码第13行的文字。

12.5浮动框架<IFRMAE> 浮动框架是一种特殊的框架页面,在浏览器窗口中可以嵌套子窗口,在其中显示页面的内容。 基本语法 <Iframe Src=“File_URL” HEIGHT=value width=value name=“IFRAME_name” align=“value”> </Iframe> 语法解释 这些属性的含义如表12-2所示。

12.5.1  浮动框架的SRC属性 通过SRC属性设置浮动框架显示的文件路径。 基本语法 <iframe SRC=“File_name”> 文件范例:12-14.htm 设定浮动框架页面的内容。

12.6框架与链接 使用框架的一个重要目的就是不同的框架中显示不同的页面,下面介绍通过链接为框架指定显示的页面。      每个链接都有一个Target属性,设置不同的Target属性可以使链接的页面在不同的框架或者窗口中显示。

12.6.1 普通框架与链接 下面我们来制作一个小型的框架网站,网站是左右的框架结构,左侧有3个栏目,单击3个栏目后,能够在右侧框架显示不同栏目的内容。这个网站包含以下几个页面:     首页是由左右两个框架组成,称为12-22.htm页面。     左侧框架的页面称为12-22-Left.htm,放置页面的主导航,包含3个到栏目页面的超级链接。     右侧框架放置3个栏目,分别是12-22-Right-1.htm,12-22-Right-2.htm和12-22-Right-3.htm。 在默认的情况下,首页显示右侧的第一个页面,即12-22-Right-1.htm。 文件范例:12-22.htm 设定框架集页面,包含左右两个框架。 <!-- ------------------------------------------ --> <!--            文件范例:12-22.htm           -->  <!--              文件说明:框架集                   --> <!-- ------------------------------------------ -->

12.6.1 普通框架与链接 <HTML> <HEAD> <TITLE>框架集</TITLE> </HEAD> <FRAMESET COLS=“25%,75%”>     <FRAME SRC=12-22-Left.htm Scrolling=“No”>     <FRAME SRC=12-22-Right-1.htm Name=“right”> </FRAMESET> </HTML> 文件说明 第9行将窗口分割成左右两个,宽度分别为25%和75%。第10行和第11行指定框架显示的页面,这两个页面是下面要制作的12-22-Left.htm和12-22-Right-1.htm。另外,在第11行设定了右侧框架的名称为right,这个名称将用于后面的链接调用中。 文件范例:12-22-Left.htm 制作网站左侧框架的页面。 <!-- ------------------------------------------ --> <!--          文件范例:12-22-Left.htm        --> <!--             文件说明:左侧框架                  --> <!-- ------------------------------------------ -->

12.6.1 普通框架与链接 <HTML> <HEAD> <TITLE>左侧框架</TITLE> </HEAD> <BODY> <IMG SRC=12-14-1.jpg><p> <A href=“12-22-Right-1.htm” Target=“right”>Dreamweaver MX 2004</A><P> <A href=“12-22-Right-2.htm” Target=“right”>Fireworks MX 2004</A><P>    <A href=“12-22-Right-3.htm” Target=“right”>Flash MX 2004</A><P> </FRAMESET> </HTML> 文件说明     第10行插入了一张图片,第12行~第13行设定了3个链接,分别指向3个页面,并通过Target属性设定了链接的目标窗口是right。 文件范例:12-22-Right-1.htm 制作网站右侧框架一的页面。 <!-- ------------------------------------------ --> <!--        文件范例:12-22-Right-1.htm        --> <!--            文件说明:右侧框架一                --> <!-- ------------------------------------------ -->

12.6.1 普通框架与链接 <HTML> <HEAD> <TITLE>右侧框架一</TITLE> </HEAD> <BODY> <H1>Dreamweaver MX 2004</H1> DREAMWEAVER MX 2004作为网页设计软件的代表,具有站点管理和页面制作两大核心功能。如果你也拥有织梦的理想,那么这个软件无疑是帮助你实现梦想的最好手段。完全的可视化编辑、优秀的代码控制,完整的站点规划和管理、超乎寻常的动态效果设计,这些都为设计人员提供了得心应手的途径。MX 2004版本的软件将动态网站和传统的静态页面功能进行了更进一步的整合,无疑为制作网站提供了更多的实现方式。 </BODY> </HTML> 文件范例:12-22-Right-2.htm 制作网站右侧框架二的页面。 <!-- ------------------------------------------ --> <!--        文件范例:12-22-Right-2.htm        --> <!--            文件说明:右侧框架二                --> <!-- ------------------------------------------ -->

12.6.1 普通框架与链接 <HTML> <HEAD> <TITLE>右侧框架二</TITLE> </HEAD> <BODY> <H1>Fireworks MX 2004</H1> Fireworks MX 2004作为网页图像设计软件的代表,在继承了前期版本图形绘制、页面特效功能的同时,大大地发展了位图图像方面的处理功能,这无疑使这个软件有了更大的向Photoshop挑战的资本,而其在网页设计方面的诸多应用,又是无任何软件可与之媲美。与Dreamweaver MX 2004的整合使其在专业网站图像设计过程中,早已并继续扮演着不可或缺的角色。 </BODY> </HTML> 文件范例:12-22-Right-3.htm 制作网站右侧框架三的页面。 <!-- ------------------------------------------ --> <!--        文件范例:12-22-Right-3.htm        --> <!--            文件说明:右侧框架三                --> <!-- ------------------------------------------ -->

12.6.1 普通框架与链接 <HTML> <HEAD> <TITLE>右侧框架三</TITLE> </HEAD> <BODY> <H1>Flash MX 2004</H1>  FLASH MX 2004作为网页矢量交互动画软件的代表,提供了图形绘制,动画制作和交互三大功能。掌握了这个软件的核心,也就有能力在网上冲浪的同时,充当一把闪客的角色。越来越多的个人、商业网站采用FLASH技术,广告BANNER、动画片头、MTV,交互游戏,广阔的应用为FLASH的学习者提供了广泛的发展平台,学习FLASH MX 2004软件更是一个具有诱惑力的过程。 </BODY> </HTML> 文件说明 上述代码就是右侧框架对应的3个页面。 显示结果 如图12-22所示的就是框架网站的首页,默认显示右侧的第一个Dreamweaver MX 2004 页面。 当单击了左侧的“Fireworks MX 2004”栏目后,会在右侧的窗口打开12-22-Right-2.htm页面,如图12-23所示。     同样,如图12-24所示,当单击了左侧的“Flash MX 2004”栏目后,会在右侧的窗口打开12-22-Right-3.htm页面。

12.6.2  浮动框架与链接 在浮动框架中,也可以制作页面之间的链接。 文件范例:12-23.htm 制作浮动框架页面间的链接。 <!-- ------------------------------------------ --> <!--            文件范例:12-23.htm           --> <!--          文件说明:浮动框架与链接             --> <!-- ------------------------------------------ --> <HTML> <HEAD> <TITLE>浮动框架与链接</TITLE> </HEAD> <BODY> <IFRAME SRC=12-22-Right-1.htm WIDTH=400 HEIGHT=250 NAME=“iframe” ALIGN=“center”> </IFRAME><P> <CENTER> <A href=“12-22-Right-1.htm” Target=“iframe”>Dreamweaver MX 2004</A><BR> <A href=“12-22-Right-2.htm” Target=“iframe”>Fireworks MX 2004</A><BR>    <A href=“12-22-Right-3.htm” Target=“iframe”>Flash MX 2004</A>

12.6.2  浮动框架与链接 </CENTER> </BODY> </HTML> 文件说明     第10行嵌入的框架是12-22-Right-1.htm,宽度为400像素,高度为250像素,名称为iframe,居中排列。     第13行~第15行设定了3个链接,分别链接到12-22-Right-1-htm,12-22-Right-2.htm和12-22-Right-3.htm,且链接的目标窗口都是浮动框架的名称iframe。 显示结果     如图12-25所示的就是浮动框架的默认首页。默认显示Dreamweaver MX 2004页面。     当单击了左侧的“Fireworks MX 2004”或“Flash MX 2004”栏目后,会在浮动的窗口中打开12-22-Right-2.htm或12-22-Right-3.htm页面。

谢谢!