如何制作框架网页？

在学习web前端的时候，会学习到关于框架的内容，框架可以将同一个页面分成不同的几部分，每一部分加载不同的网页，我教大家实现一个页面分成两部分，点击左边部分的链接在右边部分显示

操作方法

  • 01

    新建一个网页文件frame.html，后缀名是html，用sublime Text打开

  • 02

    然后写上网页的基本结构，内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>1</title> </head> <body> 您的浏览器不支持框架 </body> </html>

  • 03

    框架标签必须卸载head标签中，在head标签中添加如下内容 <frameset cols="20%,80%" border="1"> <frame src="./left.html" name=""></frame> <frame src="https://zhinan.sogou.com/" name="right"></frame> </frameset>

  • 04

    在当前目录下新建一个网页文件，名字必须和上面的框架源代码中使用的名字想通过，这里是left.html,然后写上如下内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>left</title> </head> <body> <ul> <li><a href="https://zhinan.sogou.com/" target="right">首页</a></li> <li><a href="https://wenwen.sogou.com/?pid=zn.wenwen&ch=zn.daohang.wenwen&src=zhinan" target="right">问问</a></li> <li><a href="http://pic.sogou.com/" target="right">图片</a></li> </ul> </body> </html>

  • 05

    使用浏览器打开frame.html文件，结果如下

  • 06

    点击左边的文件，右边就会显示结果

赞 (0)

相关推荐

  • 电脑如何将Excel表格制作成网页形式

    电脑如何将Excel表格制作成网页形式

    excel是我们现在经常使用的办公软件,有时候我们需要使其以网页形式进行展示,那么今天小编跟大家分享下电脑如何将Excel表格制作成网页形式.具体如下:1. 首先我们需要先打开电脑,然后打开一份Exc ...

  • 电脑怎么将Excel表格制作为网页形式

    电脑怎么将Excel表格制作为网页形式

    我们在使用Excel表格的时候可以将其以网页形式呈现.今天小编跟大家分享的是电脑怎么将Excel表格制作为网页形式.具体如下:1. 首先我们在电脑中新建一个Excel表格,双击打开,然后将一个表格数据 ...

  • 使用Dreamweaver CS 6 制作动态网页需要了解的

    如果你对Dreamweaver 一无所知,或者在链接数据库制作动态网页时遇到了麻烦,那你在使用之前你可能要了解DW CS6不适合制作动态网页 操作方法 01 如果你想用Dreamweaver cs6 ...

  • 免费在线制作表白网页

    表白的方式有多种多样,每一种方式都会给女孩带来不一样的感觉.如何通过网页进行表白呢?接下来我来和大家分享一下. 操作方法 01 搜狗搜索"免费在线制作表白网页". 02 点击进入网 ...

  • html网页制作入门：怎么制作一个网页？

    html网页制作入门,怎么制作一个网页呢?下面我们就来看一下详细的操作吧. 操作方法 01 想要做一个网页,首先要找到一个合适的代码编辑软件,我这边使用的是Notepad++. 02 打开软件之后,点 ...

  • 使用记事本快速制作一个网页

    用系统自带的记事本,输入简单的代码,来制作一个网页的全过程. 操作方法 01 在桌面的空白处单击右键,会弹出一个快捷菜单,我们选"新建", 02 此时会弹出新建的下拉菜单,在这里我 ...

  • 如何用html制作一个网页（怎么做html网页）

    如何用html制作一个网页（怎么做html网页）

    把txt文件变成html网页文件如果您看过<HTML是什么?--零基础自学网页制作>这篇教程,请按照其中说明创建一个txt文件.具体过程如下:step1:在您方便的磁盘中建立一个文件夹,命 ...

  • Dreamweaver怎么制作一个网页，如何保存网页？

    如何用DW制作网页并保存网页呢?我就在这里教给大家最基础的创建网页和保存网页. 操作方法 01 启动软件后,在左上角点击[文件],在下拉菜单中点击[新建]. 02 在弹出的窗口中选择[html],文档 ...

  • 自己怎么制作微信网页链接

    想在微信上分享你制作的连接网页,一般有以下几种方法,方法都比较难,需要有一定技术: 一.开通微信公众平台,开通后制作相关页面来分享到你朋友圈. 二.通过其它APP(手机应用软件 )制作好的网页来分享到 ...