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 using JavaScript WeakMap

A WeakMap object is a collection of key/value pai...

CSS3 category menu effect

The CSS3 category menu effects are as follows: HT...

Use of MySQL query rewrite plugin

Query Rewrite Plugin As of MySQL 5.7.6, MySQL Ser...

How to forget the root password in Mysql8.0.13 under Windows 10 system

1. First stop the mysql service As an administrat...

SQL query for users who have placed orders for at least seven consecutive days

Create a table create table order(id varchar(10),...

Some functions of using tcpdump to capture packets in the Linux command line

tcpdump is a flexible and powerful packet capture...

How to create, save, and load Docker images

There are three ways to create an image: creating...

What are the differences between var let const in JavaScript

Table of contents 1. Repeated declaration 1.1 var...

HTML table markup tutorial (48): CSS modified table

<br />Now let's take a look at how to cl...

Vue implements three-dimensional column chart based on echarts

The three-dimensional column chart consists of th...

jQuery implements ad display and hide animation

We often see ads appear after a few seconds and t...

Steps for Vue3 to use mitt for component communication

Table of contents 1. Installation 2. Import into ...

MySQL character set viewing and modification tutorial

1. Check the character set 1. Check the MYSQL dat...

Detailed explanation of DOM style setting in four react components

1. Inline styles To add inline styles to the virt...

Windows10 mysql 8.0.12 non-installation version configuration startup method

This article shares the specific steps for config...