（2020-09-29）HTML框架

最新推荐文章于 2021-06-02 21:55:08 发布

�橙黄橘绿时。

最新推荐文章于 2021-06-02 21:55:08 发布

阅读量339

点赞数

分类专栏：基础文章标签： html

本文链接：https://blog.csdn.net/Missjuzi/article/details/108885351

版权

基础专栏收录该内容

29 篇文章 0 订阅

订阅专栏

Frameset框架

frameset标签替代了页面中的body标签，使用了frameset框架就替代了body 这个时候就不能直接编写标签或者文本。

使用方式：给每一个横向或者纵向的框架添加src属性从而设置该模块框架要展示的页面。

HTML	网页的架构（结构）	骨架
CSS	对结构的美化	肉体
JS	提供用户和界面交互行为	灵魂

所谓框架便是网页画面分成几个框架，同时取得多个URL。只要即可，而所有框架标记要放在一个总起的html档，

这个档案只记录了该框架如何划分，不会显示任何资料，所以不必放入标记。是用以划分框窗，每一框窗由一个

标记所标示，必须在范

围中使用。如下例：

<frameset cols="50%,*">
 <frame name="hello" src="up2u.html">
 <frame name="hi" src="me2.html">
</frameset>

参数设定：

例子：COLS=“90，*”垂直切割画面（如分左右两个画面），接受整数值、百分数，*则代表占用余下空间。

数值的个数代表分成的视窗数目且以逗号分隔。例如COLS=“30，，50%”可以切成三个视窗，第一个视窗是

30pixels的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗剩下的空间，第三个视窗则占整个画面

的50%宽度为一相对分割。您可以自己调整数字。ROWS=“120，”就是横向切割，将画面上下分开，数值设定同上。

唯COLS与ROWS两参数尽量不要同一个标记中frameborder=“0”设定框架的边框，其值只有“0”和“1”，0表示不要边框，

1表示要显示边框。（避免使用yes和no）border=“0”设定框架的边框厚度，以pixels为单位。

bordercolor=“#008000”设定框架的边框颜色。framespacing=“5”表示框架与框架间的保留空白的距离。

Html内嵌框架

frameborder属性定义边框，scrolling属性定义是否有滚动条，代码如下：

<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

内嵌框架与a标签配合使用

a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中，代码如下：

<a href="01.html" target="myframe">页面一</a>
<a href="02.html" target="myframe">页面二</a>
<a href="03.html" target="myframe">页面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>

知识拓展
项目实战

项目需求分析
项目步骤划分
项目功能模块的实现

项目需求分析

所谓”需求分析“，是指对要解决的问题进行详细的分析，弄清楚问题的要求，包括需要输入什么数据，要得到什么结
果，最后应输出什么.
需求分析是一个项目的开始，主要是弄明白这个项目需要做什么，用来做什么。简单来说就是弄明白这个项目(应用)
要从什么点出发达到什么目的。一个好的需求分析是整个项目成功的一半。明白客户的需求，才能时刻清楚要去做什
么，如何去做好。

项目需求分析

这个环节是由项目经理完成，项目经理首先和客户进行交流，了解客户的需求，然后分析项目的可行性，如果项目可
以被实现，项目经理写出项目需求文档交给设计师完成后续的开发。

页面设计

这个环节主要是UI设计师参与，UI设计师根据产品需求分析文档，对产品的整体美术风格、交互设计、界面结构、操
作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。

编码

这个部分由程序员来实现。（程序员分为WEB前端开发工程师和后台开发工程师。前端开发人员主要做我们可以在网
页上看的见的页面，后台就做一些我们看不见的管理系统以及功能的实现。）程序员根据UI设计师的设计，用编码来
完成整个项目的各个功能。

测试

这部分由程序测试员来完成。程序测试员主要就是测试寻找程序还存在的bug，一般来说刚编码完成的程序都是存在
问题的，就需要测试人员反复不断的测试并将存在问题的测试结果交给编码人员进行bug的修复。等到几乎所有bug
修复完成，这个项目差不多就可以上线了。

维护

程序的维护是整个项目的最后一个阶段，但也是耗时最多，成本最高最高的的一个阶段。程序的维护包括程序上线后
后续bug的修复和程序版本的更新。

小练习：
首页面：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<frameset rows="15%,75%,*" noresize="noresize" frameborder="no">
        <frame src="dingbuyemian.html">
        <frameset cols="20%,*" noresize="noresize">
            <frame src="leftyemian.html">  
            <frame src="rightyemian.html"name="rightyemian">    
        </frameset>
        <frame src="foot.html" scrolling="no"> 
</frameset>
</html>

顶部页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="pink">
    <h1 align="center">这是顶部内容</h1>
</body>
</html>

左边页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="red">
    <ul>
        <li><a href="tiaozhuanyemian.html" target="rightyemian">数码产品</a></li><br>
        <p></p>
        <li><a href="#">农业机械</a></li><br>
        <p></p>
        <li><a href="#">珠宝首饰</a></li><br>
        <p></p>
        <li><a href="#">国外旅游</a></li>
    </ul>
</body>
</html>

右边页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="yellow">
    <h1>这是右侧内容。。。</h1>
    <form action="#">
        账号：<input type="text" value="请输入账号"><br>
        密码：<input type="text" value="请输入密码"><br>
        <input type="button" value="登录">
    </form>
</body>
</html>

a标签跳转页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="#838A90">
    <h2>小米手机</h2>
    <h2>华为手机</h2>
    <h2>苹果手机</h2>
    <h2>锤子手机</h2>
    <h2>oppo手机</h2>
</body>
</html>

底部页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body bgcolor="green" align="center">
    <h2>这是底部页面</h2>
</body>
</html>