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

How to change the root password of Mysql5.7.10 on MAC

First, start MySQL in skip-grant-tables mode: mys...

Summary of practical methods for JS beginners to process arrays

join() method: connects all elements in an array ...

Steps to create a Vite project

Table of contents Preface What does yarn create d...

Three ways to jump to a page by clicking a button tag in HTML

Method 1: Using the onclick event <input type=...

How to use MySQL limit and solve the problem of large paging

Preface In daily development, when we use MySQL t...

Nginx implements dynamic and static separation example explanation

In order to speed up the parsing of the website, ...

Example code for CSS pseudo-classes to modify input selection style

Note: This table is quoted from the W3School tuto...

MySQL 5.7.17 zip installation and configuration tutorial Solution to MySQL startup failure

MySQL 5.7.17, now seems to be the latest version,...

mysql 5.7.18 winx64 free installation configuration method

1. Download 2. Decompression 3. Add the path envi...

The solution of html2canvas that pictures cannot be captured normally

question First, let me talk about the problem I e...

WeChat applet development practical skills: data transmission and storage

Combining the various problems I encountered in m...

Summary of common operation skills of MySQL database

This article summarizes common operating techniqu...

How to effectively compress images using JS

Table of contents Preface Conversion relationship...

A brief discussion on the underlying principle of mysql join

Table of contents join algorithm The difference b...

Detailed explanation of the execution process of mysql update statement

There was an article about the execution process ...