HTML framework_Powernode Java Academy

HTML framework_Powernode Java Academy

1. Framework

A browser document window can only display one web page file, but by using frames, more than one page can be displayed in the same browser window. A page that uses a frame mainly consists of two parts: one is the frame set, and the other is the specific frame file.

Frameworks are mostly used for the layout of website backend or intranet systems.

1. Frameset (<frameset></frameset>): It is a file used to define this HTML document as a frame mode and set how the window is divided. To put it simply, a frameset is a file that stores the framework structure and is also the entry file for accessing the framework file. If a web page consists of two frames on the left and right, then in addition to the two web page files on the left and right, there is also a total frame set file. In a page that uses frames, the <body> tag is replaced by the frame tag <frameset>. Each frame contained in the frame page is defined by the <frame> tag.

rows attribute: split the window horizontally. Horizontal split window cuts the page horizontally, that is, divides the page into multiple windows arranged vertically. Rows can take multiple values, each value represents the horizontal width of a frame window, and its unit can be pixels or a percentage of the browser. However, it should be noted that generally, if several rows values ​​are set, several frames are required, that is, a corresponding number of <frame> parameters are required.

  <html>
  
  <head>
  
  <title>The effect of horizontal split window</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>

cols attribute: split the window vertically. Vertically splitting windows means splitting the page into multiple windows along the vertical direction, that is, dividing the page into multiple windows arranged left and right. cols can take multiple values, each value represents the horizontal width of a frame window, and its unit can be pixels or a percentage of the browser. Similar to horizontally splitting windows, generally, if you set several cols values, you will need several frames, that is, several <frame> parameters.

  <html>
  
  <head>
  
  <title>The effect of vertically splitting the window</title>
  
  </head>
  
<frameset cols="20%,55%,25%">
 
     <frame>
 
     <frame>
 
     <frame>
 
 </frameset>
 
 </html>

frameborder attribute: set the border. By default, the frame window is surrounded by a border line. The display of the border line can be adjusted through the frameborder parameter. The syntax is:

<frameset frameborder="Whether to display"> or <frame frameborder="Whether to display">. The value of frameborder can only be 0 or 1. If the value is 0, the border will be hidden; if the value is 1, the border will be displayed. Setting it in frameset will be effective for the entire frame, while setting it in frame will only be effective for the current frame.

  <html>
  
  <head>
  
  <title>Set the border display effect of the frame window</title>
  
  </head>
  
  <frameset rows="20%,55%,25%">
 
 <frame frameborder="1">
 
 <frameset cols="35%,65%" frameborder="0">
 
 <frame>
 
 <frame>
 
 </frameset>
 
 <frame frameborder="0">
 
 </frameset>
 
 </html>

framespacing attribute: the border width of the frame. The frame border width is 1 pixel by default, and can be adjusted by the parameters framespacing.

Syntax: <frameset framespacing="border width">

Note: Border width is the width of the lines between the borders on the page, measured in pixels. This parameter can only be used for frame sets and is invalid for individual frames.

  <html>
  
  <head>
  
  <title>Set the border width of the frame</title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10">

     <frame>
 
       <frameset cols="20%,55%,25%" framespacing="30">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>

bordercolor attribute: the border color of the frame. Use the bordercolor parameter to set the border color of the frame set.

Syntax: <frameset bordercolor="color code">

Note: This parameter is also only valid for the entire frame set, not for a single frame.

  <html>
  
  <head>
  
  <title>Set the frame border color</title>
  
  </head>
  
 <frameset rows="30%,70%" framespacing="10" bordercolor ="#CC99FF">
 
     <frame>
 
      <frameset cols="20%,55%,25%" framespacing="30" bordercolor ="#9900FF">
 
         <frame>
 
         <frame>
 
         <frame>
 
       </frameset>
 
 </frameset>
 
 </html>

2. Frame (<frame>) and src attributes.

Each page in the frame structure is a separate text, and these files are set through the src parameter.

Syntax: <frame src="page source file address">

Note: The page file is where the specific content of the frame page is located. For a frame without a source file set, it is just a blank page and has no effect. The source file of the page can be a normal HTML file, or it can be a picture or other file.

  <html>
  
  <head>
  
  <title>Set page source file</title>
  
  </head>
  
 <frameset rows="30%,70%">
 
     <frame src="pic01.gif">

     <frame src="src01.html">
 
 </frameset>
 
 </html>

3. <noframes></noframes> tag

The <noframes></noframes> tag is used to display page content when the browser does not support frames.

  <html>
 <frameset cols="25%,50%,25%">
    <frame src="/example/html/frame_a.html">
    <frame src="/example/html/frame_b.html">
    <frame src="/example/html/frame_c.html">
  <noframes>
  <body>Your browser can't handle frames! </body>
  </noframes>
  </frameset>
 </html>

2. Floating frame (<iframe>)

A floating frame is a special frame that nests a child window in a browser window. That is, the entire page is not a frame page, but contains a frame window. Display the corresponding page content in the frame window. Floating frames are also called inline frames, and they get their name from that.

Syntax: <iframe src="page source file"></iframe>

Note: Similar to ordinary frame structures, floating frames can also set many parameters, such as name, scrolling, frameborder, etc. However, compared with ordinary frames, floating frames do not contain framespacing and bordercolor parameters.

src attribute: The most basic parameter in the floating frame is src, which is used to set the source file address of the floating frame page and is also a required parameter for the floating frame page. Because the floating frame only makes sense if the content of the source file is set. Syntax: <iframe src="page source">

Width and height attributes: In a normal frame structure, since the frame is the entire browser window, there is no need to set its size. But in floating frame, it is inserted into normal HTML page and the size of the whole frame can be adjusted. Syntax: <iframe src= src="floating frame page source file" width="page width" height="page height">, the width and height values ​​of the page are both in pixels.

 <html>
 <body>
<iframe src="/i/eg_landscape.jpg" width="550" height="310" ></iframe>
 <p>Some older browsers do not support iframes. </p>
 <p>If not supported, the iframe will be invisible. </p>
 </body>
 </html>

3. An example of a frame layout

  <html>
  <head>
      <title>Framework Main Page</title>
  </head>
 <frameset rows="20%,*"><!--Frameset, container for control files-->
      <frame name="topFame" src="3.html" noresize/>
        <frameset cols="240px,*">
            <frame name="leftFrame" src="1.html"/>

      <frame name="rightFrame" src="2.html" marginwidth="20px" scrolling="no"/>
             
         </frameset>
        <noframes>
        <!--The noframes tag can contain the body tag-->
         <body> 
             This page does not support the frameset tag!
         </body>
     </noframes>
  </frameset>
 </html>

4. How to link out of the frame

In the website background layout, frameworks are used more frequently. In many cases, we need to jump out of the frame and reload the page. So how can the link jump out of the frame? In fact, you only need to specify the target attribute of the <a></a> tag as "_top" to achieve this. Here is a simple example.

  <html>
  
  <body>
  
  <p>Locked in a frame? </p> 
  
  <a href="/index.html"
  Please click here! </a> 
  
 </body>
 </html>

<<:  Practice of dynamically creating dialog according to file name in vue+el-element

>>:  Ubuntu builds Mysql+Keepalived high availability implementation (dual-active hot standby)

Recommend

Detailed explanation of how to use Node.js to implement hot reload page

Preface Not long ago, I combined browser-sync+gul...

How to simulate enumeration with JS

Preface In current JavaScript, there is no concep...

Use docker to build kong cluster operation

It is very simple to build a kong cluster under t...

HTML left, center, right adaptive layout (using calc css expression)

In the latest HTML standard, there is a calc CSS e...

Implementing a simple timer in JavaScript

This article example shares the specific code of ...

How to deploy MySQL master and slave in Docker

Download image Selecting a MySQL Image docker sea...

Introduction to the B-Tree Insertion Process

In the previous article https://www.jb51.net/arti...

Six tips to increase web page loading speed

Secondly, the ranking of keywords is also related ...

Detailed explanation of WordPress multi-site configuration under Nginx environment

The multi-site feature of WordPress allows you to...

Summary of JavaScript Timer Types

Table of contents 1.setInterval() 2.setTimeout() ...

A brief discussion on the built-in traversal methods of JS arrays and their differences

Table of contents forEach() (ES6) method map() (E...

How to modify the initial password of MySQL on MAC

Problem description: I bought a Mac and installed...

Advanced Usage Examples of mv Command in Linux

Preface The mv command is the abbreviation of mov...

HTML Basics_General Tags, Common Tags and Tables

Part 1 HTML <html> -- start tag <head>...

Nginx dynamically forwards to upstream according to the path in the URL

In Nginx, there are some advanced scenarios where...