STRUCTURING A FIRST LEVEL PAGE: PRACTICAL EXAMPLE BY DIVIDING  IT  IN  SOME ZONES

Page's setup - Build and check your page - Adding images - Using iframes - Exercise


SETTING A PAGE BY DIVIDING IT INTO ZONES:

Here we give a STEP BY STEP example with the pattern of the page that we want to build, indicating in each zone or division (div) the contents with a line of explanation. For ease of understanding we color otherwise the individual zones as in the figure below. The black background indicates the 'frame', which is as widthe as the screen, that you need to put the rest of the diagram on the screen centre.
This is the header at the screen top
    This zone is a left column
into the green container
where we will put a menu		 This green field is the zone
that we use as a container
to be centered on the screen
with the elements inside it		  

this zone in black is the main zone where put all the other DIVs

FIGURE 1. Splitting the screen into areas ( DIVs )

PROCEDURE: let's resume by our editor the last htm page that we have previously prepared , and write the divisions (DIV) in place between taTAGS <BODY> and </ BODY>.. To highlight that the one area is contained into the other, in the figure let's leave a border between the zones . The statement scheme is the following one:

<DIV id="cornice"><!-- beginning the black frame we named 'cornice'-->
   <DIV id="testata"></DIV> <!-- the header nested in 'cornice' we named 'testata'-->
     <DIV id="corpo"><!-- beginning the nested green container we named 'corpo' -->
         <DIV id="colonna-sinistra"></DIV> <!-- the yellow left-column nested in 'corpo'-->
     </DIV><!-- ending the nested green container we named 'corpo' -->
</DIV><!-- ending the black frame we named 'cornice'-->

Inside the DIV "cornice" there's the hierarchy of nested zones (<DIV> ....</DIV>), first the header "testata", and under this one the container "corpo". Inside the container "corpo" there's the column "colonna-sinistra".

With regard to DIVs it's preferable to assign 'speaking names', That is indicating by its name the position and function of each single DIV. Here I've given DIV names in my language..

The nested zones can't work properly if you don't assingn them their own properties, that is, at least width, lenght and position. There we have to assign many other properties, according to our specifications. All such properties are assigned by CSS.
Let's prepare a Style Sheet file in which all the shown areas in the previous Figure 1 shall be defined by their main features. This text can be entered directly in any HTML page that we want to divide as shown above. There are three ways to do so, the best is the following because it requires only an instruction line into the head of the HTML page.
The best way to choose is to write a separate css file, and then add it into the HTML file by reference to the file's location. The istruction sounds like that:

<link href="../../../../modellii/socialmediabut.css" rel="stylesheet" type="text/css" />

where the address of the .css file shall drive the interpreter to take the file where it's resident, starting from the page HTML that calls it. This here below is our stylesheet

@charset "utf-8"
/* CSS Document */

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; }

#cornice { padding: 0px; text-align: center; margin: 0 auto; }

#testata { margin: 0px auto; top: 0px; width: 960px; height: 80px; position: relative; background-color:#EDFCFE; }

#colonna-sinistra { width: 352px; height: 598px; position: absolute; left: 5px; background-color::#FFCC00;}

#corpo { margin: 0px auto; border: 0px solid rgb(0, 0, 0); border-image: none; width: 980px; height: 600px; text-align: left; padding: 0px; position:relative;background-color:#66FF66; }



Name Value Description
BODY   the entire page HTML itself
margin-left 0px Left margin width in pixels
margin-top 0px Top margin width in pixels
margin-right 0px Right margin width in pixels
margin-bottom 0px Bottom margin width in pixels
     
#cornice   The container frame, with width the screen's 100%
padding 0px Inside distance between the frame ad its sides
text-align center Thext inside the frame is aligned centered into the frame
margin 0px All frame margins are zero
     
#testata   This name identifies the DIV id="testata"
width 760px Total width of 'testata'.
height 80px Total height
margin 0px auto Margin: distance between the outer sides of 'testata' and the container frame
top 0px distance between the outer top sides of the div and the container frame
background-color #EDFCFE Color coded by the values of the color palette
     
#colonna-sinistra   This name identifies the DIV id="colonna-sinistra" - in yellow
width 352px Total width of this div
height 598px Total height of this div
background-color #FFCC00 Color coded by the values of the color palette - yellow
position absolute The property indicates a div placed with absolute reference
left 5px the distance from the 'corpo' left border is 5px
     
#corpo   This container must be widthe as we want our page - in green
margin 0px auto Al outside margins are zero. 'auto' centers 'corpo' into the 'cornice'
border 0px Invisible border. One can put also the value none instead
width 980px Total width of 'corpo'
height 600px Totale height of 'corpo'
padding 0px 'corpo' inside padding
background-color #2BF81B Color coded by the values of the color palette (green)
     
     

Let us create folders in our PC where to save our files

            Principal            
          |            
|   |    
Scripts   CSS  
Figure 1_1

Compared to our stylesheet we can change the size, color, and margins of the different areas according to the size of our screen and to the wanted design.
To build the stylesheet:

  • into the folder that you've created for your site, create a new folder, and name it CSS or whatever you want, that will contain all your CSS style sheets
  • open your text editor and create a new file
  • copy and paste into this file the text that is in red into the previous square
  • 'save as' your file into the CSS folder. Name it as you want but give it the suffix .css . Here I' did name this file as miepagine.css

let us now build our page using CSS and images

  • copy and paste the text below - excluding the border
  • do 'save as' and name it as index.html  - this file resides just under the 'principal' directory

BUILDING AND CHECKING OUR PAGE

Let's start with the DIV 'frame' which serves to center our page on the screen, by placing it among the TAG <body> and </ body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!--- let's insert the style sheet with reference to a CSS file that contains it. Let's PUT INT IN THE CSS DIR. and remember that on every page the addresses of this file must refer to the folder where we've placed files --->

<link href=" css/miepagine.css" rel="stylesheet" type="text/css" />

<!--- the css file contains the strucuring elements common to one or many pages. --->

<head>

<!---Header:. here - between the <head> and </ head> the title and some  meta tag -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My first page - This is the tittle </title>
<meta name="description" content="Here's an example of structuring a web page step by step- STEP 1"/>
<meta name="keywords" content="pagina web, pagina, base, meta, tag"/>

</head>

<body>
<!--- at first we put only the 'cornice', that have the properties given by the CSS-->

<DIV id="cornice"></DIV>

</body>
</html>

By clicking a button of the Following table you can see the page with appropriate subsequent modifications. Click buttons in the table below:

Table: adding subsequent divisions between <body> and </body>

Click the button Description of page's content

Code added between
<body> and </body>
1 'cornice', colored blue, with a little margin here we've let a small margin
2 Page with 'cornice', but white and without margin <DIV id="cornice"></DIV>
3 Inside the DIV "cornice" we insert the DIV "testata"

<DIV id="cornice">
<DIV id="testata"></DIV>
</DIV>
4 Inside the DIV "cornice" and under "testata" we insert the DIV "corpo"

<DIV id="cornice">
<DIV id="testata"></DIV>
<DIV id="corpo" </DIV>
</DIV>
5

Inside the DIV "corpo" we add a column at left. The characters' colors are different only to best understanding the position of the nested divs

.

<DIV id="cornice">
<DIV id="testata"></DIV>
<DIV id="corpo">
<DIV id="colonna-sinistra"></DIV>
</DIV>
</DIV>

TABLE 1

Examples of DIV in the HTML page, changing by the code to be added between tags <body>..... </ body>. If there isn't clear the code as shown in the table, look at the code through the commands of your browser.

If you press the button 1 you notice that it should remain a white border around the blue area. This is because we havn't yet given instructions about the general characteristics of the page itself, and we havn't said that margins must be 0.

Tips and tricks
To see how the page is made - example see the nr 5, which is opened by clicking the button 5, and its contained elements, open it  with your browser and ' save as'  to a folder that you have already prepared. 
Close the browser and go see what you have saved. You should find the CSS file in a subfolder and the html file in the folder, which both you can open and examine with your editor.

The CSS contains all the elements that we need to shape the page and all its elements, and remains the same for all pages, provided that in those pages there are the named DIV tags added between <body>..... </ body>. By changing the style sheet all the pages to which the CSS is linked will change.

ADDING IMAGES

After removing background colors, we want to add the following elements in order,

  • A background image on the whole page. The image was taken from nternet and manipulated so as to mitigate the colors and reduce as much as possible the weight (for instructions refer to the relevant part of this site)
  • A background image in the left column. The image was taken from the internet and manipulated so as to fit the size and reduce as much as possible the weight (for instructions refer to the relevant part of this site)
  • A column on the right in div 'corpo' and related background images
  • A strip of images in the header. The images were taken from the Internet, manipulated to fit the size and pasted in to a strip (for instructions refer to the relevant part of this site)

Examples of editing CSS with added images

Click the button CSS element to modify

CSS code modified
1 body: the image roma-di-notte.jpg is added body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;background-image:url(../../../images/roma-di-notte.jpg);}
2 #colonna-sinistra
Adding a background image with lesser dimensions than the DIV that then is repeated up to fill the space		 #colonna-sinistra { width: 200px; height: 598px; position:absolute; background-image:url(../../../images/sanpietro1.png ) ; text-align: center; }
3 #testata
Adding a background image as above

#testata { margin: 0px auto; top: 0px; width: 100%; height: 80px; position: relative; background-image: url(../../../images/testaroma.jpg);
}
4 ALTERING THE ABOVE CSS IN HEADER'S width TO 100%

#testata { margin: 0px auto; top: 0px; width: 100%; height: 80px; position: relative; background-image: url(../../../images/testaroma.jpg);
}

TABLE 2

Examples of editing CSS HTML page above. This allows you to edit in the same way all the pages linked to a style sheet. For example, changing the background images in CSS, it changes in the same way in all the pages that contain the link to this CSS

ADDING ITEMS BY 'IFRAME'

The 'iframe' is an element identified each with its own name, that enables the following functions:

a) insert an .htm page within the 'iframe'

b) insert an 'iframe' within a DIV

c) dynamically change the page contained in it giving as address with the name of the 'iframe'

For better understanding I give here an example graph using the pattern of the previous FIGURE 1, by inserting an IFRAME in each DIV

we use DIV 'testata' to put an iframe here identified with name = "sopra" which in turn contains a page with logos and whatnot
we use the DIV "colonna-sinistra" to put inside it an iframe identified as name = "sinist" which in turn it contains a page with a menu
Inside the DIV 'corpo' we put another DIV

We insert the DIV id = "colonna-destra" to put inside it an iframe identified as 'dest' ie name = "dest" which at first contains a first page.

<DIV id="cornice">
<DIV id="testata"></DIV>
<DIV id="corpo">
<DIV id="colonna-sinistra"></DIV>
<DIV id="colonna-destra"></DIV>
</DIV>
</DIV>

FIGURE 2 - setting 'iframes' into the page DIVs

Here the style sheet modified with the addition of a right column, flanked to the left column  and with complementary width.If you copy these pages remember that you've to adjust links.

<style type="text/css">

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;background-image:url(../../images/roma-di-notte.jpg);}
# cornice { padding: 0px; text-align: center; margin: 0 auto; }

#testata { margin: 0px auto; top: 0px; width: 100%; height: 80px; position: relative; background-image: url(../../../images/testaroma.jpg);
}

#colonna-sinistra { width: 200px; height: 598px; position:absolute; background-image:url(../../images/sanpietro1.png ) ; text-align: center; }

#colonna-destra { width: 760px; height: 598px; position:absolute; left: 201px;
background-image:url(../../images/pansoff..png ) ; text-align: center; }

#corpo { margin: 0px auto; border: 0px solid rgb(0, 0, 0); border-image: none; width: 980px; height: 600px; text-align: left; padding-bottom: 0px; position:relative;}

</style>


As you can see we have included a right column with a semi-transparent background-image (pansoff.png) which will allow a better sight of the text that we will write.

We provide now to build pages for different frames, left to right. If you want to build a page to fit into the header, remember that here the height of the frame should not exceed 80px.

A) Simple menu into the left column

Let's take an example of the statement to be written between <div id = "colonna-sinistra"> ..... </ div> to add a menu named paginamenu.htm

<div id="colonna-sinistra">
<iframe id= "sinist" src="paginamenu.htm" margin="0" width="350" height="500" frameborder="0" overflow="visible" ></iframe></div>

Initially in each 'iframe' we will have an fixed page. By clicking a link in the left column of the menu you can change the page to the right column by assigning as 'target' (target) the name of the iframe entered the right column. Here is the link of the menu item that brings into the right column iframe a file called 'pagmissione.htm'. The insertion occurs when you click a link from the menu.

<a href="pagmissione.htm" target="dest" accesskey="M">Co<u>M</u>e Funziona</a>

Let's build at first the menu into the left column, and after a few pages to be included on the right column byr clicking links assigned to each item in the menu on the left.

Table: elements to be included into the IFRAMEs

Click the button Item

CSS and HTML code
1 paginamenu.htm
page containing menu items to use into an iframe named "sinist" iinto the DIV "colonna-sinistra"

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
table {  table-layout: fixed; width: 200px; border:thin; border-collapse: separate; border-spacing: 5px; background:white;
border-radius:10px; column-width:200; white-space:normal;
background-size:auto; }

td {background-color:#06F; color:#FFF; font-family:Cambria; font-weight:bold; width:200px; border-radius:10px; height:35px; alignment-baseline:middle; padding-left:10px; padding-top:3px;}
2 pagmissione.htm
page to put into the iframe named "dest" into the DIV "colonna-destra"		 CALL THE PAGE AND SEE YOURSELF HOW IT IS MADE THE HTML CODE. The style sheet is embedded in the head of the page. You could also separate it in another linked style sheet
3

With these statements we put into the page of Figure 2
1) the menu 'paginamenu.htm' by the iframe 'sinist'
2) The page 'pagmissione by ' iframe 'dest'

<div id="cornice">
<div id="testata"></div>
<div id="corpo">
<div id="colonna-sinistra"><iframe name="sinist" src="../../software/esempi/opere/paginamenu.htm" margin="0" width="100%" height="100%" frameborder="0" overflow-style="visible" scrolling="no" vspace="80"></iframe></div>
<div id="colonna-destra">
<iframe name="dest" src="../../software/esempi/opere/pagmissione.htm" margin="0" width="760" height="100%" frameborder="0" overflow-style="visible" scrolling="no" vspace="80"></iframe>
</div>
</div>
</div>

TABLE 3: Elements to be included in the iframes

To insert an iframe in a DIV must write between <DIV> ... </ DIV> a statement like the following:

  • assign the name (name) to the frame, in this case name = "dest"
  • put in the frame the desired page with the statement
    src = "../../ software / examples / works / pagmissione.htm"
    where in this case we recall the page pagmissione.htm. See above code in blue.
  • assign margin. size, and other  congruent characteristics of the frame
    <Iframe name = "dest" src = "../../ software / examples / works / pagmissione.htm" margin = "0" width = "760" height = "100%" frameborder = "0" overflow-style = "visible" scrolling = "no" </ iframe>

When by menu you want to put a page inside an iframe just give the page address with the target the name of the target frame.
Here we've used iframe inside a DIV, but there may be DIV inside an iframe, or nested iframes. The language XHTML is very versatile and easy. Just enough understand the mechanisms. 

EXERCISE to try if I explained well

  1. Prepare new folders for your pages as on Figure 1_1 (Par: Setting a page)
  2. Open pressing the button 3 in the above table 3 and try to operate the menu, to check if the pages work correctly.
  3. 'Save as' with a name of your choice the browser page to the folder 'Principale' that you have prepared. This shall be the start page, that is the main page. The browser should create another subfolder that contains all the files referring to the saved page. You can open with the editors all the files related to the page and also to see the saved pictures .
  4. Drag all the images files into the folder named 'images' from the files folder created by your browser.
  5. Drag all the .htm files into the folder named 'archives' from the files folder created by your browser. Let untouched the start htm file under the folder 'principale' (Main)
  6. Drag all the .css files into the folder named 'CSS' from the files folder created by your browser. Othewise you can recreate it with the editor.
  7. In the main page head delete the stile text and replace it with a link to the stilesheet file that you've created before into the style's subfolder.
    <link href=".CSS/mycssfile.css" rel="stylesheet" type="text/css" />
    where the address of the .css file shall drive the interpreter to take the file where it is resident, starting from the page HTML that calls it.
  8. REPEAT ANALOGOUS OPERATIONS 4 - 7 TO EVERY OTHER HTM FILE IN THE SUBFOLDER ARCHIVES.
  9. NOW YOU HAVE TO CHANGE ALL LINKS TO EACH FILE, STARTING FROM THE MAIN ONE referring to the images path, htm files path css and you should change links to images.
  10. Open your main file with your browser

After all this, il you can run your main page by the DIR 'Principale',  you have passed the exam. 

NOTE:
the address of the .css file shall drive the interpreter to take the file where it is resident, referencing from the page HTML that calls it. Remember that the statement 'target' of menu links must be that of the iframe name.

Here I used iframes inside DIVs, but there may be als DIV inside an iframe. The language XHTML is very versatile and easy. You've just to understand the mechanisms.

WARNING:
HTM PAGES AND ALL FILES - CSS FIGURES SCRIPT ETC - ARE PICKED UP THROUGH AN ADDRESS. THAT IS THE POSITION AS IS COMPARED TO FILE WHICH CALLS. If there is NOT clear this concept, go to see the article 'structure a site'
 
Lino Bertuzzi - Roma August 2014 translated 17/05/2015