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

MyBatis dynamic SQL comprehensive explanation

Table of contents Preface Dynamic SQL 1. Take a l...

Detailed steps to install nginx on Apple M1 chip and deploy vue project

brew install nginx Apple Mac uses brew to install...

How to use SVG icons in WeChat applets

SVG has been widely used in recent years due to i...

The easiest way to install MySQL 5.7.20 using yum in CentOS 7

The default database of CentOS7 is mariadb, but m...

Several ways to hide Html elements

1. Use CSS Copy code The code is as follows: style...

How to modify the default storage location of Docker images (solution)

Due to the initial partitioning of the system, th...

How to upgrade https under Nginx

Purchase Certificate You can purchase it from Ali...

Problems and solutions encountered when connecting node to mysql database

I installed a new version of MySQL (8.0.21) today...

js implements a simple English-Chinese dictionary

This article shares the specific code of js to im...

Solution to mysql error when modifying sql_mode

Table of contents A murder caused by ERR 1067 The...

Detailed explanation of server and location configuration of simple forwarding request of nginx

Let's briefly sort out the configuration of s...

javascript countdown prompt box

This article example shares the specific code of ...

How to make select support readonly when the background cannot read data when the disabled attribute is set

Copy code The code is as follows: <span style=...

Why Use DOCTYPE HTML

You know that without it, the browser will use qui...

JavaScript implements fireworks effects with sound effects

It took me half an hour to write the code, and th...