|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.
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'-->
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.
<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
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>
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>
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
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.
After removing background colors, we want to add the following elements in order,
Examples of editing CSS with added images
ADDING ITEMS BY 'IFRAME'
The 'iframe' is an element identified each with its own name, that enables the following functions:
For better understanding I give here an example graph using the pattern of the previous FIGURE 1, by inserting an IFRAME in each 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.
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
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
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:
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.
EXERCISE to try if I explained well
After all this, il you can run your main page by the DIR 'Principale', you have passed the exam.
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.
|Lino Bertuzzi - Roma August 2014 translated 17/05/2015|