CSS
Le CSS ovvero Cascading Style Sheet (o se preferiamo in italiano Fogli di stile a cascata) consentono di inserire gli elementi nella nostra pagina Web senza dover usare le tabelle HTML (ricordate il Tag <TABLE> ?), ma non solo, possono addirittura sovrapporre due immagini, cosa peraltro impensabile con i normali Tags dell'HTML.
I fogli di stile (li chiamo in italiano per puro patriottismo) possono essere posizionati sia all'interno della pagina Web (nella sezione <HEAD>) oppure esterni al documento stesso in un normale file di testo con estensione ".css".
Esempio:| Operazione | Codice | Esempio: |
| Codice prec. Testata Apro Stile 1 Comando CSS 2 Comando CSS Chiudo Stile e Testata Corpo testo 1 immagine 2 immagine Chiude il testo Chiude la pagina |
... <HEAD> <STYLE TYPE="text/css"> #image1{position:absolute; left:50px; top:50px; visibility:show;} #image2{position:absolute; left:100px; top:0px; visibility:show;} </STYLE> </HEAD> <BODY> <div id="image1"><img src="scroll1.gif" alt="immagine 1" width="500" height="18"> </div> <div id="image2"><img src="scroll2.gif" alt="immagine 2" width="18" height="500"> </div> </BODY> </HTML> |
Questo è un esempio di Css interno, viene dichiarato dentro il tag <HEAD> mediante il tag <STYLE>, in cui specifichiamo che è di tipo testo.
A questo punto con il carattere "#" diamo un nome alla prima immagine fornendo degli attributi che sono racchiusi dalle parentesi graffe. La stessa operazione si ripete con la seconda immagine ed infine chiudiamo il tag STYLE. Non ci resta infine che richiamare le immagini mediante il Tag <DIV> il quale non fa altro che dividere l'immagine dal resto del corpo della pagina creando un livello a sé stante. Naturalmente questo esempio non è molto utile in sé stesso ma serve ad avere un'idea della potenza intrinseca dei fogli di stile.
Vengono maggiormente utilizzati per allineare immagini tra loro, soprattutto quando tentiamo di dividere un'immagine in quattro o più immagini che al caricamento della nostra pagina Web dovrà diventare una sola immagine, oppure per formattare il testo delle nostre pagine senza far ricorso ogni volta ai vari attributi.
I Layer
Il Layer non è altro che un Livello indipendente in un documento DHTML. Ma cosa è un livello? Immaginiamo la nostra pagina Web come ad una lastra di vetro composta da due, tre, o più strati; ebbene ogni strato della lastra corrisponde ad un livello, se noi disegnamo un cerchio nel primo livello, guardando la lastra noteremo il cerchio disegnato. Ora immaginiamo di disegnare un rettangolo sulla seconda lastra nello stesso punto dove è posizionato il cerchio del primo strato. Cosa osserveremo? Guardando la lastra di vetro noteremo un cerchio che viene sovrapposto da un rettangolo. Ebbene il Layer non è altro che il corrispondente di uno strato della nostra lastra di vetro.
Esempio:| Operazione | Codice | Esempio: |
| Codice prec. Testata Script 1 Comando Javascript 2 Comando Javascript Chiudo lo Script e Testata Corpo testo Apro Form Chiudo Form 1 Tag DIV 2 Tag DIV 3 Tag DIV Chiude la pagina |
... <HEAD> <SCRIPT language="javascript"> function carica() function scorri() </SCRIPT> </HEAD> <BODY onload="carica()"> <FORM> </FORM> <div id="L1"> </div> <div id="L2"> </div> <div id="L3"> </div> </BODY> </HTML> |
Nella tabella in alto il codice è stato semplificato per ragioni di spazio, ora analizzeremo le varie voci:
Prima di tutto utilizzo il tag <SCRIPT language=javascript> per comunicare al Browser che il codice usato successivamente è uno script in javascript, poi pongo una condizione essenziale affinché il codice javascript funzioni sia con IE sia con Netscape; inizializzo due variabili n=(document.layer) e ie=(document.all). Questo perchè IE non riconosce il tag "layer". A questo punto creo la prima funzione che chiamerò function carica(){ (occhio alla parentesi graffe) e pongo la condizione: if (n) stringa=document.L2 (associo la stringa (n)=document.L2) e if (ie) stringa=L2.style (associo la stringa (ie)=L2.style; ora non mi rimane che definire la posizione del margine destro della layer stringa.xpos=parseInt(stringa.left) (la posizione x della stringa= al NumeroIntero(margine destro della stringa) "}".
Ora definisco la funzione "scorri()" per permettere al layer di spostarsi automaticamente: function scorri(){, pongo la condizione if (stringa x.pos < 500 { (500 è il limite massimo che ho posto per lo spostamento) stringa. xpos +=5 (incrementa di 5 il valore del margine destro della layer) uguaglio il valore stringa.left=stringa.pos ed inserisco un contatore che ripeta l'operazione per un tot di tempo idTimeouT=setTimeout="scorri()",30)}, se la condizione <500 non si verifica allora else{ stringa.xpos=0 uguaglio la posizione della stringa =0, stringa.left=stringa.xpos ed infine richiamo la funzione "scorri()" scorri()}}.
Dopo la scrittura del codice javascript ci manca solamente richiamare la funzione "carica()" nel tag <BODY> <BODY onload="carica()">. Immettiamo il tag <FORM> per contenere gli elementi di input (il pulsante), inseriamo un pulsante <INPUT type=button onClick="javascript:scorri()"> che richiama la funzione "scorri()" quando si verifica l'evento "click". Chiudiamo il tag <FORM> ed apriamo i tags per creare i tre livelli; <DIV ID=L1 style="L1: 180px; position:absolute; left:200px; top:200px; visibility: show;">LAYER N°1, con "ID" identifichiamo il layer e con "style" gli diamo le coordinate per visualizzarlo. Faremo la stessa operazione per ogni layer cambiando solo le coordinate necessarie per visualizzare i tre layers uno sotto l'altro; ora non ci rimane che verificare la funzionalità del nostro progetto. (Premi il pulsante Esempio 2 per visualizzare l'anteprima).
| < Indietro |
Avanti > |