网页设计使用框架创建多页面布局

1、主要内容 建立水平或垂直的框架分割窗口建立水平或垂直的框架分割窗口 用嵌套框架分割窗口用嵌套框架分割窗口 对滚动条进行控制对滚动条进行控制 在空白窗口显示网页在空白窗口显示网页 在框架或浮动框架上进行链接在框架或浮动框架上进行链接框架简介l框架技术可以将浏览器分割成多个小窗口，并且在每个小窗口中，可以显示不同的网页，这样我们就可以很方便的在浏览器中浏览不同的网页效果。l当浏览器分割成多个窗口后，各窗口就会扮演不同的角色，实现不同的功能。举例来说，有些论坛就是把浏览器分割成两个窗口，一个窗口主要来显示帖子的标题，而另一个窗口会显示具体的内容。这样的设计显然比起一个窗口的网页在浏览时方便得多，而且

2、用户也可以任意的切换题目。框架的基本结构 l框架的基本结构主要分为框架和框架集两个部分。它是利用标记与标记来定义。其中标记用于定义框架，而标记则用于定义框架集。框架的基本结构 框架的基本结构框架的基本结构 框架的设置l常见的对窗口的分割包括：水平分割、垂直分割常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用际需要，可用标记中的标记中的rows（水（水平分割）或平分割）或cols（垂直分割）属性来进行分割。（垂直分割）属性来进行分割。 窗口的水平分割 lrows属性可定义一个属性可定义一个水平分割水平分割的

3、窗口框架。的窗口框架。 窗口的水平分割l语法说明语法说明rows属性的值代表各子窗口的高度，第一个子窗口高为高度1，第二个子窗口高为高度2，依此类推，而最后一个*，则代表最后一个子窗口的高度，值为其他子窗口高度分配后所剩余的高度。设置高度数值的方式有两种：采用整数设置，单位为像素（px），语法如下：用百分比设置，语法如下：窗口的水平分割采用整数设置窗口的水平分割采用整数设置窗口的水平分割 窗口的水平分割窗口的垂直分割lcols属性可定义一个垂直分割的窗口框架。l基本语法： 一个垂直分割的例子采用百分比设置窗口的垂直分割采用百分比设置窗口的垂直分割 窗口的垂直分割窗口的嵌套分割 l如果想构建更复

4、杂的框架格局，可以通过如果想构建更复杂的框架格局，可以通过标签嵌套另一个标签嵌套另一个标标签来实现。这种嵌套方式成为框架的嵌套。签来实现。这种嵌套方式成为框架的嵌套。l通过框架的嵌套，可以使网页的布局更具有层次通过框架的嵌套，可以使网页的布局更具有层次性，这种框架集合将浏览器按行或按列分成许多性，这种框架集合将浏览器按行或按列分成许多部分。部分。l在实际应用中，在实际应用中，“厂厂”字型框架使用极为广泛。字型框架使用极为广泛。“厂厂”字型的网页就是窗口中包含水平和垂直分字型的网页就是窗口中包含水平和垂直分割，实现割，实现“厂厂”字型框架需要对窗口进行嵌套分字型框架需要对窗口进行嵌套分割。割。窗

5、口的嵌套分割窗口的嵌套分割窗口的嵌套分割 窗口的嵌套分割框架格式化 显示或隐藏边框lframeborder属性用于控制窗口框架的周围是否显示框属性用于控制窗口框架的周围是否显示框架，此属性可使用在架，此属性可使用在标记与标记与标标记中，如果使用在记中，如果使用在标记内时，可控制窗口标记内时，可控制窗口框架的所有子窗口，如果用在框架的所有子窗口，如果用在标记中，则只能标记中，则只能控制该标记所代表的子窗口。控制该标记所代表的子窗口。l基本语法：基本语法：l语法说明：0表示不显示边框，1表示显示边框，默认值为1。显示或隐藏边框 l在在标记中，可运用标记中，可运用border属性控属性控制分割窗口框

6、架的边框的宽度。制分割窗口框架的边框的宽度。l基本语法：基本语法：l语法说明：语法说明：n为整数，代表此窗口框架的宽度，单位为像素(px)。显示或隐藏边框框架的边框控制框架的边框控制 显示或隐藏边框添加边界颜色l如果想要改变边框边界的颜色，可运用如果想要改变边框边界的颜色，可运用bordercolor属性来实现。属性来实现。l基本语法：基本语法：添加边界颜色框架的边框颜色控制框架的边框颜色控制 添加边界颜色设置子窗口的边距 l网页的边距可以通过网页的边距可以通过“margin”来设定，那么框来设定，那么框架和网页一样也可设置边距，可以利用架和网页一样也可设置边距，可以利用标记中的标记中的mar

7、ginwidth属性来设置属性来设置框架左右边缘的宽度；框架左右边缘的宽度；marginheight属性可以属性可以设置框架上下边缘的宽度。设置框架上下边缘的宽度。l基本语法：基本语法：l语法说明：语法说明：在HTML文件中，利用框架标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。设置子窗口的边距设置框架边距 设置子窗口的边距控制子窗口滚动条 lscrolling属性用于控制窗口框架中是否显示滚动属性用于控制窗口框架中是否显示滚动条，使用此属性，可以避免条，使用此属性，可以避免HTML文件因内容过文件因内容过多而无法完全显示。此属性用于多而

8、无法完全显示。此属性用于标记标记中。中。l基本语法：基本语法：l语法说明：语法说明：yes表示为显示滚动条，no表示不显示滚动条，auto为自动设置。控制子窗口滚动条控制框架滚动条 控制子窗口滚动条调整子窗口的尺寸调整子窗口的尺寸l在前面的学习中，我们学习了如何运用在前面的学习中，我们学习了如何运用标记的标记的rows和和cols属性来水平或属性来水平或垂直分割窗口。但设置后，各窗口框架的大小并垂直分割窗口。但设置后，各窗口框架的大小并非固定无法更改，当我们想更改窗口框架大小时，非固定无法更改，当我们想更改窗口框架大小时，可以将鼠标指针移到要更改的框架上，待指针呈可以将鼠标指针移到要更改的框架

9、上，待指针呈现双箭头符号时，再用鼠标进行拖拽，就可调整现双箭头符号时，再用鼠标进行拖拽，就可调整窗口的大小。窗口的大小。l当然我们不希望用户能随意地改变子窗口的大小，当然我们不希望用户能随意地改变子窗口的大小，那么这时我们可以在那么这时我们可以在标记中，添加标记中，添加noresize属性，语法如下：属性，语法如下：l浮动框架l在浏览网页的时候会看到在浏览器窗口含有孤立在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记要使用成对的标记，同，同样，我们会用样，我们会用src属性来设置框架中显示文件的路属性

10、来设置框架中显示文件的路径。径。l基本语法：基本语法：l语法说明：语法说明：与框架不同的是，浮动框架可以包含在标记中。浮动框架浮动框架 设置浮动框架源文件属性设置浮动框架源文件属性 添加一个浮动框架添加一个浮动框架浮动框架创建导航l使用框架导航，用户可以在一个框架中单击并在使用框架导航，用户可以在一个框架中单击并在另一个框架中浏览显示的结果。另一个框架中浏览显示的结果。l实现框架导航功能，要引入实现框架导航功能，要引入name、target属性。属性。Name属性标识一个框架，属性标识一个框架，target属性在锚点属性在锚点中使用，指定这个链接要载人到哪个框架中。中使用，指定这个链接要载人到

11、哪个框架中。指定子窗口显示网页lsrc属性是用来指定要导入到某个子窗口的属性是用来指定要导入到某个子窗口的HTML文件的位置，语法如下：文件的位置，语法如下：l基本语法：l语法说明：src属性的设置方法和前面介绍的标记的src属性的用法是一样的，下面的标记，将设置子窗口显示名称为的网页。指定子窗口显示网页指定子窗口显示网页指定子窗口显示网页 指定子窗口显示网页定义子窗口名称 lname属性用来指定窗口的名称，当完成子窗口属性用来指定窗口的名称，当完成子窗口的名称定义后，可指定超链接的链接目标显示到的名称定义后，可指定超链接的链接目标显示到网页的某个子窗口。网页的某个子窗口。l基本语法：基本语法

12、： 定义子窗口名称指定子窗口的名称指定子窗口的名称 创建网站链接导航l将浏览器画面分割成多个子窗口时，可赋予各子窗口不同将浏览器画面分割成多个子窗口时，可赋予各子窗口不同的功能。最常见的应用方式，就是以一个子窗口作为网页的功能。最常见的应用方式，就是以一个子窗口作为网页的主画面，另一个窗口则用于控制该窗口的显示内容。要的主画面，另一个窗口则用于控制该窗口的显示内容。要达到这个目的，我们可以运用达到这个目的，我们可以运用标记的标记的target属性，属性，来指定显示链接网页的子窗口。来指定显示链接网页的子窗口。l基本语法：基本语法： 创建网站链接导航创建导航创建导航 创建网站链接导航无标题文档无

13、标题文档   新闻管理新闻管理   相册管理相册管理 创建网站链接导航   留言管理留言管理   查看注册会员查看注册会员     创建网站链接导航无标题文档无标题文档创建网站链接导航无标题文档无标题文档 添加新闻页面添加新闻页面 厂字型布局图 适应非支持框架的浏览器l在在HTML文件中，利用文件中，利用标签设置浏览器标签设置浏览器不支持框架时，显示的网页文件的内容，通常网页设计不支持框架时，显示的网页文件的内容，通常网页设计者会提供一条简短的代替信息。当不设置该标签时，对者会提供一条简短的代替信息。当不设置该标签时，对于不支持框架的浏览器，则显示空白。于不支持框架的浏览器，则显示空白。l基本语法：基本语法： 小结l本章主要介绍了两种框架方式：一种是分割窗口本章主要介绍了两种框架方式：一种是分割窗口式，一种是嵌入式，两种框架的介绍主要包括插式，一种是嵌入式，两种框架的介绍主要包括插入方式、大小调整、显示方式、初始页设置、名入方式、大小调整、显示方式、初始页设置、名称设置等内容，框架一般来说应用比较多的是在称设置等内容，框架一般来说应用比较多的是在导航这块内容，因为一般来说一个网站的导航栏导航这块内容，因为一般来说一个网站的导航栏是相似的，比如可以包含一些广告，或相