普通框架网页设计-优快云博客

普通框架

框架的概念

框架技术：将一个浏览器窗口划分成若干个小窗口，每个小窗口显示一个独立的网页。

框架集和框架页

框架集<frameset> :主要用来划分窗口的。
框架页<frame> ：主要用来指定窗口默认显示的网页地址。

框架与窗户很像，一个窗户由窗格（框架）和玻璃（框架页）构成。
先规划窗格，然后再确定每个窗格中放的玻璃，（先有结构，后有内容）
框架网页的DTD必须是以下这种类型的（即：框架型的DTD）：
<!DOCTYPEhtml PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

<frameset>属性

1，cols :划分左右型框架
如：cols=“20%” //划分框架时，可以用百分比来表示；
cols=“200” //左框架的宽度为200px。剩下的都是右框架的；
cols=“180,.180" //左框架和右框架的宽都为180px，剩下的都是中间框架的
2，rows :划分上下型框架
如：rows=“20%” //划分框架时，可以用百分比来表示；
rows=“200” //上框架的高度为200px。剩下的都是下框架的；
rows="180,.180” //上框架和最低下框架的高度都为180px，剩下的都是中间框架的。
注意：cols和rows不可同时并列使用，即：不能对于一个网页即左右又上下设置框架，但外部框架网页与其内部的窗口中的网页的框架互不干忧；
3，frameborder :是否显示框架的边框线，取值：yes或no,1或0

<frame>框架页的属性

src :文件名，源路径，网页地址
noresize :不能调整小窗口的大小，如：noresize=“noresize”
scrolling :是否显示滚动条，取值：auto(自动：内容超过窗口则显示，否则不显示) yes，no;
name :给当前小窗口起个名字，这个name就是给<a>标记target属性（在何处打开）来用的。

<noframes>
描述：当你的浏览器不支持时，显示的提示信息，一般情况下，浏览器版本过低时不支持框架；
语法格式：<noframes>对不起，你的电脑太老了，换了吧，</noframes>

框架嵌套

框架中支持小窗口使用框架；
例：

网页框架的使用

注意：<frameset>框架，可以称为“普通框架”；
在“普通框架”中，框架制作分为两个部分：（1）框架的结构规划；（2）制作具体的页面；
在“普通框架”的结构划分中，不能出现<body>标记，因为划分框架时不要放具体内容
例：一个公司的后台管理网站的制作：css框架代码如下

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    <html>

    <head>
        <title>css框架</title>
    </head>
    <frameset rows="100,*" frameborder="no">
        <frame src="top.html" noresize="noresize" scrolling="no" />
        <!-- 框架嵌套框架 -->
        <frameset cols="150,*" frameborder="no">
            <frame src="left.html" noresize="noresize" />
            <frame src="main.html" name="mainframe" />
        </frameset>
        </frame>

    </frameset>
    <noframes> 对不起，你的浏览器不支持frameset元素！</noframes>

    </html>

顶部窗口的文件（top.html）：

<html>

<head>
    <title>框架中的top窗口</title>
</head>

<body bgcolor="007FFF" background="images\th3.jpg" height="100">

</body>

</html>

左边窗口的文件（left.html）:

<html>

<head>
    <title>css框架的left窗口</title>
    <style type="text/css">
        /* css层叠样式表的部分 */


        body {
            padding: 0px;
            /*
        边线以内的补白为0
        */
            margin: 0px;
            /*
        边线以外的补白为0
        */
        }
    </style>
</head>

<body bgcolor="#CDCDCD">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr align="center">
            <td>
                <font color="#007FFF" size="4"><a href="cssFrame.html" target="_top">返回首页</a></font>
            </td>
            <!-- 单元格标记，文本标记，文本颜色，文本大小，超链接标记，指定超链接目标的URL，文件在何处打开，表示最顶层窗口，超链接结束标记，文本结束标记，单元格结束标记 -->
        </tr>
        <tr align="center">
            <td background="images\th5.jpg" height="20">
                <font color="#007FFF">网站管理菜单</font>
            </td>
        </tr>
        <tr align="center">
            <td background="images\th6.jpg" height="20">
                <font color="#007FFF"><a href="about.html" target="mainframe">公司简介</a></font>
            </td>
        </tr>
        <tr align="center">
            <td background="images\th7.jpg" height="20">
                <font color="#007FFF"><a href="news.html" target="mainframe">新闻动态</a></font>
            </td>
        </tr>

    </table>

</body>

</html>

主窗口的第一个默认文件（main.html）:

<html>

<head>
    <title>css框架的main主窗口</title>
</head>

<body bgcolor="#00FFFF">
    <font color="#007FFF" size="7">主页</font>
</body>

</html>

公司简介的超链接对应文件（about.html）（在主窗口显示）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公司简介的html文件</title>
</head>
<body>
    <font color="red">本公司由马老师引领......</font>
</body>
</html>

新闻动态的超链接对应文件（news.html）（在主窗口显示）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻动态的html文件</title>
</head>

<body align="center">
    <p>
        <font color="#00FFFF">
            <h1>Cynic</h1><br />

            走到今日并非理所当然<br />
            顽风尚然强劲不挠<br />
            确实之物比想象中的<br />
            不要少吧<br />
            是因为记忆被岁月模糊了吗<br />
            还是说心灵被未曾见过的陌生人所烦扰了呢？<br />
            其实是支配躯体的疼痛啊<br />
            即使这样还是来到了这里<br />
            心无旁骛地瞻望终点就好<br />
            仅此唯一的理由<br />
            便是得以撒入回归之土<br />
            但那浅淡微薄的梦想<br />
            如能秉持初心不曾改变<br />
            未来也就不会无聊了吧......<br />
            半途而废这种事<br />
            还真是意料之外呢...愚蠢至极<br />
            说谎早已熟能生巧<br />
            大肆宣讲起性善论<br />
            到底是何者将世界推入这种境况？<br />
            是起初便怀于内心的感情所掀起的误解之潮吗？<br />
            其实是那支配心灵的有爱啊<br />
            这样便只剩一个<br />
            永远埋藏心底的小小思念<br />
            重叠交错后遗留下来，确是板上钉钉的绝对<br />
            即便如此从今以后我也不会再继续成长了<br />
            有你陪伴在身边什么的<br />
            也只是个美妙的错觉罢了<br />
            逐渐支离破碎的那些宝物<br />
            全部都是我曾拥有的<br />
            骗你的呐......<br />
            可自始至终的一切，我都无从理解啊...<br />
            将切身感受到的<br />
            这份起伏波涛般的烦躁思绪<br />
            狠狠刺入绯红穹苍...<br />
            即使这样还是来到了这里<br />
            心无旁骛地瞻望终点就好<br />
            仅此唯一的理由<br />
            便是得以撒入回归之土<br />
            但那浅淡微薄的梦想<br />
            如若能秉持初心不曾改变<br />
            未来也就不会无聊了吧...<br />
        </font>
    </p>
</body>

</html>

打开cssFrame.html文件来展示效果：