Iniziamo a strutturare html e css per un sito completo

Esempio completo per lavorare sito web Associazione Atena


Riepilogo terminologia

selettore {proprietà: valore}
 
h1 {color: red } /* metto h1 in rosso */
 
 
h2 {color: green;
 background-color:#f03499;
 }
 

vedere anche la in particolare le pagine 1 e 10


Metodi per applicare i comandi CSS all'HTML



Per visualizzare il manuale di riferimento O'Reilly sui CSS in dotazione con Dreamweaver, selezionate Aiuto → Riferimenti e selezionate O'Reilly CSS Reference dal menu a comparsa nel pannello Riferimenti.

1) in linea



<p style=”background-color:red;color:blue;”>testo</p>
 

codifica il comportamento dell'elemento p considerato.
NB. da Dreamweaver

dw-css-2.jpg


dw-css-3.jpg


2) incorporato nella pagina


nella sezione head del file html si introduce il tag style: all'interno si scrive il codice css come nel seguente esempio
che ho pesantemente commentato

<style type="text/css">
h2 {
    font-family: Arial,sans-serif;    /* testo con il font arial, se disponibile */
    font-size: 16px;                  /*dimensione testo */
    color: #09C;                      /* colore del testo in formato compattato è il colore RGB #0099cc */
    background-color: #024;           /* colore dello sfondo. NB il blocco è largo 100% ovvero quanto l'intera pagina */
}
</style>

codifica il comportamento di ogni elemento <h2> nella pagina.

ed ecco come mettere il codice CSS incorporato nella pagina da dreamveaver:

per specificare di usare un css incorporato nel documento

dw-css-4.jpg

per scrivere o modificare la regola

dw-css-5.jpg

3) file esterno incorporato

<link rel=”stylesheet” href="stile.css" type=text/css” />
Le regole css son scritte con la sintassi gia vista.
Vediamo la gestione in Dreamweaver scrivendo un file nuovo CSS e collegandolo (il secondo metodo visto a lezione)

dw-css-7.jpg





dw-css-6.jpg


3b) file esterno importato (lo vedremo dopo)


<head>
<style type="text/css">
@import url("miostile.css");
p {
background-color:red;
color:blue;
}
</style>
</head>

importa il file esterno miostile.css e lo applica alla pagina, poi codifica il comportamento dei tag p



link


Generali


Dreamweaver

nozioni sui fogli di stile in Dreamweaver
http://help.adobe.com/it_IT/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e31a.html

Approfondimenti e link citati





(da vedere in seguito )


http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/



http://css3.mikeplate.com/

http://www.css3maker.com/index.html

http://www.colorzilla.com/gradient-editor/