HTML Frameset Example Code

HTML Frameset Example Code

This article introduces a framework made by Frameset that is as simple as it can be.

Well, let's first take a look at the page structure of this framework. Since it is a purely manual test program, I just made some code in Notepa++, which is very rough. But it still contains the general content of Frameset. Okay, let’s get back to the topic and first take a look at the file structure.

1.Frame.html contains the structure of the frame

2.link.html contains the menu bar on the left side of the frame

3.firstPage.html contains a line of text for the main page of the framework (I am lazy and didn’t do it well)

4.secondPage.html is similar to 3 above and is used for testing.

Here is a screenshot (not clear, first time doing this)

Let's take a look at the code in Frame.htm:

<html>
<head>
</head>
<frameset cols="159px,*">
<frame name="a1" src="link.html" noresize="yes" border="1px" scrolling="auto" bordercolor="blue" >
<frame name="a2" src="firstPage.html">
</frameset>
</html>

Doesn’t it feel simple? It is mainly a Frameset element, and then the attribute cols="159px,*" is set. The purpose of this attribute is to divide the page into 159px and other two areas. As shown in the picture above.

Then comes the frame tag. The cols attribute above has several values, and the <frame> child elements below should have the same number of values. Then there are some common attributes of <frame>. Including the width of the border, whether a scroll bar appears, the border color, and whether the user is allowed to change the size. Which source file is it and so on.

Then the second source file points to firstPage for testing.

Next is link.html:

<style type="text/css">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
width:180px;
line-height: 24px;
list-style-type: none;
text-align:left;
/*Define the row height and background color of the entire ul menu*/
}
/*==================First level directory===================*/
#nav a {
width: 160px;
display: block;
padding-left:20px;
/*Width (must be), otherwise the Li below will be deformed*/
}
#nav li {
background:#CCC; /*Background color of the first-level directory*/
border-bottom:#FFF 1px solid; /*white border at the bottom*/
float:left;
/*float: left, should not be set, but cannot be displayed normally in Firefox
Inherit the width of Nav, limit the width, and li automatically extends downwards*/
}
#nav li a:hover{
background:#CC0000; /*Background color displayed onMouseOver of the first-level directory*/
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
/*==================Secondary Directory===================*/
#nav li ul {
list-style:none;
text-align:left;
}
#nav li ul li {
background: #EBEBEB; /*Background color of the secondary directory*/
}
#nav li ul a{
padding-left:10px;
width:160px;
/* The text in the padding-left secondary directory moves to the right, but the Width must be reset = (total width - padding-left)*/
}
/*The following is the link style of the secondary directory*/
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;
text-decoration:none;
font-weight:normal;
background:#CC0000;
/* Secondary onmouseover font color, background color*/
}
/*===============================*/
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
#nav ul.collapsed {
display: none;
}
-->
#PARENT{
width:180px;
}
*#PARENT{
width:100%;
}
</style>
<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">My Website</a>
<ul id="ChildMenu1" class="collapsed">
<li><a href="firstPage.html" target="a2">First page</a></li>
<li><a href="secondPage.html" target="a2">Second page</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">My Account</a>
<ul id="ChildMenu2" class="collapsed">
<a href="#">Payment</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Online Payment</a></li>
<li><a href="#">Register for remittance</a></li>
<li><a href="#">Online Found</a></li>
<li><a href="#">Historical Accounts</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">Website Management</a>
<ul id="ChildMenu3" class="collapsed">
<li><a href="#">Login</a></li>
<a href="#">Role Management</a></li>
<li><a href="#">User Management</a></li>
</ul>
</li>
</ul>
</div>
<script type=text/javascript>
<!--
var LastLeftID = "";
function menuFix() {
var obj = document.getElementById("nav").getElementsByTagName("li");

for (var i=0; i<obj.length; i++) {
obj[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
function DoMenu(emid)
{
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
if((LastLeftID!="")&&(emid!=LastLeftID)) //Close the previous Menu
{
document.getElementById(LastLeftID).className = "collapsed";
}
LastLeftID = emid;
}
function GetMenuID()
{
var MenuID="";
var _paramStr = new String(window.location.href);
var _sharpPos = _paramStr.indexOf("#");

if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
{
_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
}
else
{
_paramStr = "";
}

if (_paramStr.length > 0)
{
var _paramArr = _paramStr.split("&");
if (_paramArr.length>0)
{
var _paramKeyVal = _paramArr[0].split("=");
if (_paramKeyVal.length>0)
{
MenuID = _paramKeyVal[1];
}
}
}

if(MenuID!="")
{
DoMenu(MenuID)
}
}
GetMenuID(); //*Pay attention to the order of these two functions, otherwise GetMenuID() will not work in Firefox
menuFix();
-->
</script>

This is actually just a lazy idea. I made a drop-down menu using DIV+CSS+JS found on the Internet. If you are interested, you can take a look at it yourself. I feel like I can use it and it will be OK as long as I know how to modify it.

Below are two test pages. Since anyone who knows a little HTML can write a test page, I will only post the code for page 1 here:

<html>
<head>
<title>First page</title>
<style>
</style>
</head>
<body>
<h1>First page</h1>
</body>
</html>

I guess all the experts would puke when seeing this and would say it's rubbish, but it's just a record of the little things I made. Haha, I'm sorry.

<<:  Solution to the docker command exception "permission denied"

>>:  Analyze the usage and principles of Vue's provide and inject

Recommend

Cross-origin image resource permissions (CORS enabled image)

The HTML specification document introduces the cr...

Simple implementation method of two-way data binding in js project

Table of contents Preface Publish-Subscriber Patt...

vue-cropper component realizes image cutting and uploading

This article shares the specific code of the vue-...

Vue Getting Started with Weather Forecast

This article example shares the specific code of ...

Detailed installation tutorial of mysql5.7.19 decompressed version (with pure cracked Chinese version SQLYog)

Mysql5.7.19 version is a new version launched thi...

CSS to achieve text on the background image

Effect: <div class="imgs"> <!-...

Five ways to achieve automatic page jump in HTML

In the previous article, we introduced three comm...

Low-version Druid connection pool + MySQL driver 8.0 causes thread blocking and performance limitation

Table of contents Phenomenon Root Cause Analysis ...

Install CentOS 7 on VMware14 Graphic Tutorial

Introduction to CentOS CentOS is an enterprise-cl...

MySQL efficient query left join and group by (plus index)

mysql efficient query MySQL sacrifices group by t...

Node+socket realizes simple chat room function

This article shares the specific code of node+soc...

Use of VNode in Vue.js

What is VNode There is a VNode class in vue.js, w...

Implementation of HTTP and HTTPS services with Nginx reverse proxy for multiple domain names

Currently, Nginx has reverse proxyed two websites...

How to correctly modify the ROOT password in MySql8.0 and above versions

Deployment environment: Installation version red ...

VMware ESXi 6.0 and deployment of virtual machine installation tutorial (picture and text)

The company had a well-configured server that was...