Impostiamo una pagina - Vediamo come viene - Aggiunta immagini - Aggiunta Iframe


IMPOSTAZIONE DI UNA PAGINA DI PRIMO LIVELLO CON ESEMPIO
Limitiamoci a impostare una pagina e ad elencare i contenuti per consentire poi a ognuno di impostare la sua pagina.
di Lino Bertuzzi
IMPOSTIAMO UNA PAGINA SUDDIVIDENDOLA IN ZONE:
Diamo qui un esempio con lo schema della pagina che desideriamo costruire, indicando in ogni suddivisione (div) i contenuti con una riga di spiegazione Per maggior facilità di comprensione coloriamo diversamente le singole zone come nella figura che segue. Lo sfondo nero indica la 'cornice', che è larga quanto lo schemo e che serve per centrare il resto dello schema nella schermata

In questa DIV metteremo loghi, immagini, ed eventuali testi che andranno, se vogliamo, in tutte le pagine a qualunque livello.
In questa DIV metteremo il menu verticale che servirà
per una serie di pagine

in questo spazio metteremo una DIV che chiamiamo "CORPO"
che contiene una colonna a sinistra - in colore giallo - e che più avanti doteremo di altre divisioni con testo, figure, o tutto
quello che vogliamo.

FIGURA 1. Suddivisione di una schemata (pagina) in zone


PROCEDIMENTO: Riprendiamo nel nostro editor il file html dell'ultima pagina che abbiamo preparato precedentemente, e scriviamo le divisioni (DIV) al posto del testo tra <body> e </body>. Per evidenziare che la zona in giallo è contenuta nella zona in verde lasciamo uno spazio alla sua sinistra

PER PRIMA COSA PREPARIAMO UN FOGLIO DI STILE CHE CONTIENE TUTTE LE ZONE CHE ABBIAMO INDICATE IN QUESTA FIGURA (figura 1) con le loro principali caratteristiche. questo testo può essere inserito direttamente in ogni pagina HTML che vogliamo suddividere come in figura. La cosa migliore da fare però è scrivere un file .css a parte e poi inserirlo come riferimento nella pagina. Vedemo poi come.

<style type="text/css">

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; }

</style>

Nome Originale Valore Traduzione Spiegazione
BODY   Corpo Corpo della pagina XHTML
margin-left :0px (pixels) Larghezza margine sinistro
margin-top 0px (pixels) margine su Larghezza margine in alto (top)
margin-right 0px (pixels) margine des Larghezza margine a destra (right)
margin-bottom 0px (pixels) margine giù Larghezza margine inferiote (left)
       
#cornice     Cornice contenitore largo quanto lo schermo
padding 0px (pixels) Imbottitura distanza interna tra contenuto della cella e bordo
text-align center Centra Il testo è centrato nella pagina
margin 0px (pixels) Margine Tutti i margini sono azzerati
       
#testata     identifica la DIV id="testata"
width 760px Larghezza Larghezza totale scelta per la cella
height 80px Altezza Altezza totale della cella
margin 0px auto Margine Margine: distanza tra il bordo esterno della pagina e l'elemento adiacente
top 0px Cima Distanza tra la cella e il bordo superiore della pagina, o elemento in cui si è
width 960px Larghezza Larghezza della testata rispetto allo spazio del contenitore "cornice"
background-color #EDFCFE Colore di sfondo Colore azzurro: codice determinato scegliendo dalla palette dei colori
#colonna-sinistra     identifica la DIV id="colonna-sinistra"
width 352px Larghezza Larghezza totale scelta per la cella
height 598px Altezza Altezza totale della cella
background-color #FFCC00 Colore di sfondo Colore giallo: codice determinato scegliendo dalla palette dei colori
position absolute posizione la posizione assoluta dentro il contenitore, si piazza dall'alto
left 5ox sinistra la finestra inizia a 5px di distanza dal bordo
#corpo     contenitore largo quanto vogliamo larga la pagina
margin 0px auto Margine Tutti i margini sono azzerati. 'auto' serve per centrare il corpo nella cornice
border 0px Bordo Bordo invisibile
width 980px Larghezza Larghezza totale scelta per la pagina web
height 600px Altezza Altezza totale della pagina web
padding   inmbottitura distanza da cui inizia la posizione dl contenuto dal bordo interno
background-color #FFCC00 Colore di sfondo Colore giallo: codice determinato scegliendo dalla palette dei colori
       
       

Facciamo le cartelle nel nostro PC dove salvare i nostri files

            Principale            
          |            
|   |    
Scripts   CSS  


Rispetto al nostro foglio di stile naturalmente possiamo cambiare le dimensioni, i colori e i margini delle varie zone secondo le dimensioni del nostro schermo. Per costruire il foglio di stile,

  • dentro la cartella che avete creato per il vostro sito - create una cartella e chiamateta CSS o come volete, che conterrà tutti i vostri fogli di stile css
  • aprite il vostro editor
  • allinizio della pagina scrivete @charset "utf-8"
  • copiate e incollateci sotto il testo compreso tra <style type="text/css"> e </style> senza questi due elementi e senza il bordo della tabella
  • salvate il file nella cartella dei CSS chiamandolo come volete, ma dandogli l'estensione .css

Per costruire la prima pagina del vostro sito

  • aprite il vostro editor
  • copiate e incollate il testo che segue - escluso il bordo della tabella
  • salvatelo con il nome index.html

VEDIAMO LA PAGINA NELLO SCHERMO

Cominciamo con la DIV 'cornice' che serve per centrare nello schermo il resto dello schema, disponendola tra i TAG <body> e </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">

<!--- inseriamo il foglio sdi stile tramite ol riferimento a un file css che lo contiene e che METTEREMO NELLA DIR CSS . ricordiamo che in ogni pagina l'indirizzi di questo file va preso neklla cartella dove l'avbbiamo messo - se no non funzione HTML --->

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

<!--- questi sopra sono elementi comuni a tutte le pagine con i quali si danno gli standard di funzionamento HTML --->

<head>

<!--- head = intestazione. Qui - tra i tag <head> e </head> scriviamo diversi elementi. che poi vedremo per ora il meta tag per determinare il set di caratteri -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Questo è il titolo che appare sul browser quando apriamo la pagina</title>
<meta name="description" content="Diamo un esempio di strutturazione di una pagina web passo per passo- inserimento dei principali metatag nella pagina base"/>
<meta name="keywords" content="pagina web, pagina, base, meta, tag"/>

</head>

<!--- qui sotto, tra i tag <body> e </body> sciveremo i contenuti del corpo pagina --->

<body>

<!--- per ora mwttiamo nella pagina solo la cornice -->

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

</body>
</html>

Cliccando il bottone relativo VEDIAMO le pagine con opportune modifiche successsive cliccando i bottoni nella tabella seguente:

Esempi di inserimento di suddivisione della pagina HTML in zone DIV

Cliccate il bottone Contenuto della pagina

Codice tra i TAG
<body> e </body>
1 Pagina con sola cornice colorata in azzurro abbiamo lasciato un margine
2 Pagina con sola cornice come sopra.ma bianca e senza margine <DIV id="cornice"></DIV>
3 All'interno della DIV "cornice" inseriamo la DIV "testata"

<DIV id="cornice">
<DIV id="testata"></DIV>
</DIV>
4 All'interno della DIV "cornice" inseriamo la DIV "corpo", posra sotto la DIV "testata"

<DIV id="cornice">
<DIV id="testata"></DIV>
<DIV id="corpo" </DIV>
</DIV>
5 Inseriamo la DIV "colonna-sinistra" nella DIV "corpo". Mettiamoli per chiarezza con colori diversi

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

TABELLA 1

Esempi di inserimento di suddivisione della pagina HTML in zone DIV tra i TAG <body> .....</body>. Se non vi è chiaro il codice come riportato in tabella, guardatelo mediante i comandi del vostro browser dopo aver richiamato la pagina.

Se avete premuto il bottone 1 noterete che rimane un bordo bianco attorno alla zona azzurra. Infatti non abbiamo dato ancora istruzioni sulle caratteristiche generali della pagina stessa, e non abbiamo detto che i margini non ci devono essere.

Tips and tricks
Per vedere come è fatta la pagina - ad esempo quella finale, che si apre cliccando il bottone 5 - e quali elementi contiene, con il vostro browser ' apritela e 'salvate con nome' in una cartella che avrete già predisposta. Chiudete il browser e andate a vedere cosa avete salvato, Troverete il file CSS dentro una sottocartella e il file html dentro la cartella, che potrete aprire ed esaminare con il vostro editor.

NOTA. Il foglio CSS contiene tutti gli elementi che ci servono e resta sempre uguale per tutte le pagine. Dopodiché per far apparire una DIV nella pagina basta inserirla tra i TAG <body> ..... </body>. Modificando il foglio di stile cambieranno tutte le pagine alle quali è collegato.

AGGIUNGIAMO IMMAGINI

Nell'ordine, dopo aver tolto i colori di sfondo, aggiungeremo i seguenti elementi

  • Un'immagine di sfondo alla pagina. L'immagine è stata prelevata da internet e manipolata in modo da attenuare i colori e ridurne per quanto possibile il peso (per le istruzioni riferirsi alla parte di questo sito relativa)
  • Un'immagine di sfondo nella colonna sinistra. L'immagine è stata prelevata da internet e manipolata in modo da adattarla alle dimensioni e ridurne per quanto possibile il peso (per le istruzioni riferirsi alla parte di questo sito relativa)
  • Una colonna a destra nella div 'corpo' e relative immagini di sfondo
  • Una striscia di immagini nella testata. Le immagini sono state prelevate da internet, manipolate in modo da adattarla alle dimensioni e incollate in una striscia (per le istruzioni riferirsi alla parte di questo sito relativa)

Esempi di modifica dei CSS con aggiunta immagini

Cliccate il bottone Elemento da modificare nel CSS

Istruzione del CSS modificata
1 body body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;background-image:url(../../../images/roma-di-notte.jpg);}
2 #colonna-sinistra
Aggiunta di una immagine di sfondo con dimensioni inferiori alla DIV che quindi viene ripetuta fino a riempirne lo spazio		 #colonna-sinistra { width: 200px; height: 598px; position:absolute; background-image:url(../../../images/sanpietro1.png ) ; text-align: center; }
3 #testata
Aggiunta di una immagine di sfondo come sopra

#testata { margin: 0px auto; top: 0px; width: 100%; height: 80px; position: relative; background-image: url(../../../images/testaroma.jpg);
}
4 COME SOPRA MODIFICANDO IL CSS NELLA LARGHEZZA DELLA TESTATA AL 100%

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

TABELLA 2

Esempi di modifica dei CSS della pagina HTML precedente. Questo consente di modificare nello stesso modo tutte le pagine collegate a un certo foglio di stile. Per esempio, cambiando le immagini di sfondo nel CSS, cambiano nello stesso modo in tutte le pagine che contengono il collegamento al CSS

AGGIUNGIAMO ELEMENTI MEDIANTE GLI 'IFRAME'

Gli ' iframe' sono elementi che si identificano ognuno con un proprio nome, e permettono le seguenti funzioni:

a) inserire una pagina htm dentro una DIV

b) cambiare la pagina contenuta nell'iframe di cui sopra dando come indirizzo con il nome dell'iframe'

Per miglior comprensione vi faccio un esempio grafico utilizzando lo schema della precedente di FIGURA 1, inserendo un IFRAME in ogni DIV

utilizziamo la DIV testata per mettere qui un iframe identificato con name="sopra" che a sua volta contiene una pagina con loghi e quant'altro
utilizziamo la DIV colonna sinistra per metterci un iframe identificato come name="sinist" che a sua volta contiene una pagina con un menu
In questa parte della DIV 'corpo' inseriamo una DIV

Inseriamo la DIV id="colonna-destra" per metterci un iframe identificato come 'dest' cioè name ="dest" che a sua volta contiene una pagina iniziale.

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

FIGURA 2 - disposizione di 'iframe' nella pagina

Ecco il foglio di stile modificato con l'aggiunta di una colonna destra, affiancata a quella sinistra e di larghezza complementare.

<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>


Come si vede abbiamo inserito iuna colonna destra con una immagine semitrasparente che consentirà di vedere meglio le pagine scritte che ci metteremo.

Provvediamo ra a costruire le pagine per i diversi i frames di sinistra di destra. Per la testata provvedete da voi a costruire una pagina adatta, ricordando che l'altezza del frame non deve superare 80px.

A) Menu semplice per la colonna di sinistra

Facciamo un esempio dell'istruzione da scrivere tra <div id="colonna-sinistra> ..... </div> per aggiungere il menu - denominato paginamenu.htm

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

Inizialmente in ogni 'iframe' avremo già una pagina iniziale. Cliccando un link nel menu della colonna a sinistra si può cambiare la pagina nella colonna destra assegnando come 'target' (destinazione) il nome dell'iframe immesso nella colonna destra. Ecco il link della voce di menu che porta nell'iframe un file html chiamato 'pagmissione.htm' . L'inserimento avviene quando si clicca un link dal menu.

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

Nell'ordine facciamo il menu, e qualche pagina da inserire a destra con i relativi collegamenti i assegnati a ogni voce nel menu a sinistra.

Elementi da inserire negli IFRAME

Cliccate il bottone Elemento

foglio CSS

1 la pagina con menu da usare in un iframe: paginamenu.htm

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 Chiamiamo pagmissione.htm la pagina con descrizione dell'obbiettivo da mettere nell'iframe "dest" CHIAMATE LA PAGINA, E GUARDATE DA SOLI COME È FATTO IL CODICE HTML.
Il foglio di stile è incorporato nella head della pagina. Potete anche separarlo
3

Nella pagina di Figura 2 inseriamo:
1) il menu 'paginamenu.htm' nell'iframe 'sinist'
2) La pagina 'pagmissione' nell'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>

TABELLA 3
Elementi da inserire negli iframe

ESERCITAZIONE: aprite la pagina premendo il bottone 3 e provate il funzionamento del menu. Poi salvate con un nome a piacere dal browser la pagina in una cartella che avrete preparato. Potrete aprire con l'editor tutti i files relativi alla pagina e anche vedere le immagini salvate.

a) Fate una sotto-cartella 'immagini' e portateci le immagini.
b) Fate una sottocartella 'archivi' e portateci tutti i files linkati dal menu
c) Fate una sottocartella 'menu' e portateci la pagina del menu
d) Fate una sottocartella css e con l'editor fate un foglio di stile (.css) copiando quello incorporato nella pagina principale e poi nella pagina principale sostituite il testo del foglio di stile con il link al foglio di stile della cartella CSS
e) Cambiate i link del menu, con riferimento alla cartella dove avete messo i files.
f) Cambiate i link in ognuno dei files per collegarli alle immagini o altro
g) Aprite la pagina principale

Se dopo aver fatto tutto questo, riuscite a far funzionare la vostra pagina principale avete superato l'esame. Potete fare delle nuove pagine HTM e aggiungerne i link al menu.

NOTE

Per inserire un iframe in una DIV bisogna scrivere tra DIV ... </DIV> una istruzione tipo la seguente cioè:

1) assegnare il nome (name) al frame, in questo caso name = "dest"
2) mettere nel frame la pagina voluta con l'istruzione src="../../software/esempi/opere/pagmissione.htm" dove in questo caso abbiamo richiamato pagmissione.htm
3) assegnare margine e dimensioni, e altre caratteristiche del frame congruenti

<iframe name="dest" src="../../software/esempi/opere/pagmissione.htm" margin="0" width="760" height="100%" frameborder="0" overflow-style="visible" scrolling="no"></iframe>

Quando da un menu si vuol cambiare la pagina dentro il frame basta indirizzare il target col nome del frame.

Qui gli iframe sono dentro le DIV, ma ci possono essere delle DIV dentro un iframe. Il linguaggio XHTML è molto versatile e facile. Basta capire i meccanismi.

ATTENZIONE: LE PAGINE E TUTTI I FILES - CSS FIGURE SCRIPT ETC - SONO RICHIAMATI TRAMITE UN INDIRIZZO. CIOÈ DALLA POSIZIONE IN CUI SI TROVANO RISPETTO AL FILE DA CUI SONO CHIAMATI. Se non vi è chiaro questo concetto, andate a vedervi l'articolo 'strutturare un sito'

Lino Bertuzzi - Roma Agosto 2014