Università degli Studi di Padova Facoltà di Lettere e Filosofia Progettazione di siti web (ING-INF/05) LMSGC, mutuato da LMLIN e Sc. Stat. a.a. 2010-11 Indice: Prof. Maristella Agosti, Ing. Marco Dussin Cascading Style Sheets: CSS Cascading Style Sheets (CSS): motivazioni Dove si interviene con i CSS?
Cascading Style Sheets (CSS): motivazioni Una pagina web è formata fondamentalmente da due elementi: i contenuti veri e propri e la presentazione ovvero l'aspetto attraverso il quale i contenuti sono mostrati all'utente. Image from http://www.alistapart.com/ Inizialmente le pagine Web erano state pensate soprattutto per i contenuti, con pochissime possibilità di personalizzazione della presentazione. Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 2
Cascading Style Sheets (CSS): motivazioni http://www.w3.org/history/19921103-hypertext/hypertext/www/theproject.html Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 3
Cascading Style Sheets (CSS): motivazione Per ovviare a queste limitazioni stilistiche, i designer di pagine Web adottarono man mano diverse tecniche, che possiamo così sintetizzare e affiancare ad un semplice esempio: l uso di estensioni HTML proprietarie; http://update.microsoft.com/windowsupdate/ la conversione del testo in immagini; http://www.dams.lettere.unipd.it/ il posizionamento del testo utilizzando tabelle annidate; http://www.lettere.unipd.it/ la creazione di programmi sostitutivi all HTML. http://www.viaggiatreno.it/ Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 4
Cascading Style Sheets (CSS): motivazioni Separazione presentazione e contenuto: CSS + HTML CSS1: 1996 CSS2: 1998 CSS3: Working Draft Specifica W3C: http://www.w3.org/style/css/ Permettono agli autori di esprimere il proprio gusto grafico preservando la semplicità del codice HTML così come è stato progettato Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 5
Cascading Style Sheets (CSS): motivazioni Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 6
Dove si interviene con i CSS? Caratteristiche degli elementi nella pagina: visibilità, dimensioni, bordi, spaziature Posizionamento degli elementi nella pagina: alto, basso, sinistra, destra, posizionamenti relativi ed assoluti Testo: dimensione, colore, font, allineamento, sistema di interlinea, decorazioni, spaziare lettere e parole Stili: diversi per titoli, sottotitoli, paragrafi, liste Sfondo: colore, immagini, immagini ripetute o centrate Bordi: tabelle, pagina, immagini, blocchi di testo Ancora: colore, colore dopo visita, colore selezione Altro: caratteristiche del puntatore, lettere capitali, ecc Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 7
Università degli Studi di Padova Facoltà di Lettere e Filosofia Progettazione di siti web (ING-INF/05) LMSGC, mutuato da LMLIN e Sc. Stat. a.a. 2010-11 Indice: Prof. Maristella Agosti, Ing. Marco Dussin CSS e pagine Web: prima parte Elementi di una pagina Web Costruire una pagina Web Elementi blocco ed elementi inline DIV e SPAN: due elementi speciali Struttura di una pagina Web I selettori
Elementi di una pagina Web Una pagina Web è un insieme di elementi disposti uno di fianco all altro nello spazio (chiamato canvas) messo a disposizione dal browser per la loro visualizzazione. Tali elementi galleggiano sullo spazio, cercando di occuparlo al meglio. Image from http://www.alistapart.com/ Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 9
Costruire una pagina Web Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 10
Costruire una pagina Web <html> <head> <title>turismo a Padova</title> </head> <body> </body> </html> Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 11
Elementi blocco Elementi blocco: se inseriti nel testo determinano una nuova riga e possono contenere altri elementi. Essi tendono ad occupare tutta la larghezza a loro disposizione. <h1>... <h6> Testate <p> Paragrafo <ul>, <ol>, <dl> Liste (unordered, ordered e definition) <li>, <dt>, <dd> Elemento di lista, termine da definire, definizione <table> Tabella <blockquote> Blocco di citazione <pre> Blocco di codice pre-formattato <form> Una maschera per l inserimento dati (form) Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 12
Costruire una pagina Web <html> <head> <title>turismo a Padova</title> </head> <body> <h1>arte e cultura</h1> <h2>monumenti</h2> <p>padova ha molti monumenti famosi e importanti.</p> <h2>visite guidate e itinerari</h2> <h2>musei</h2> <h1>ospitalità</h1> <h2>alberghi</h2> <h2>b&b e ostelli</h2> <h1>enogastronomia</h1> <h2>ristoranti</h2> <h2>agriturismi</h2> <h1>news ed eventi</h1> </body> </html> Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 13
Elementi inline Elementi inline: possono essere inseriti all interno di altri elementi di blocco e possono contenere a loro volta altri elementi inline, ma non di blocco. Tendono ad occupare minor spazio possibile in larghezza. Non forzano la creazione di una nuova riga <a> Ancora <strong> Rende il testo marcato (usato al posto di <b>) <em> Aggiunge enfasi (usato al posto di <i>) <img /> Immagine <br> Line-break <input> Campi di inserimento dati di un elemento <form> <abbr> Abbreviazione <acronym> Acronimo Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 14
Costruire una pagina Web <p> <a href= http://www.padovanet.it/ >Padova</a> ha <strong>molti monumenti <em>famosi</em> e <em>importanti</em></strong>. </p> Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 15
DIV e SPAN: due elementi speciali Vi sarete accorti che gli elementi blocco e inline presentati finora vengono visualizzati dal browser con un loro stile particolare, nella dimensione del testo, nella scelta di un font grassetto piuttosto che corsivo, e via dicendo. Sono stati quindi introdotti, anche in seguito all avvento dei CSS, due elementi base e privi di stile, da personalizzare a piacimento: <div></div> è l elemento blocco base <span></span> è l elemento inline base Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 16
Box Model: canvas e non solo! Una pagina HTML è un insieme di box rettangolari: elemento blocco o in linea la loro gestione fa parte del box model. Canvas Margine Superiore Bordo Superiore Padding Superiore Margine Sinistro Bordo Sinistro Padding Sinistro Height Area del contenuto Width Padding Inferiore Padding Destro Bordo Destro Margine Destro Margine Inferiore Bordo Inferiore Box Rettangolare Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 17
Box Model: canvas e non solo! Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box. Area del contenuto valore della proprietà width per il valore della proprietà height. Larghezza di un box margine sinistro + bordo sinistro + padding sinistro + larghezza del contenuto + padding destro + bordo destro + margine destro Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 18
<html> <head> Struttura di una pagina Web La struttura di una pagina Web è gerarchica <title>turismo a Padova</title> </head> <body> <h1>arte e cultura</h1> <h2>monumenti</h2> <p> <a href= http://www.padovanet.it/ >Padova</a> ha <strong>molti monumenti <em>famosi</em> e <em>importanti</em></strong>.</p> <h2>itinerari</h2> <h2>visite guidate</h2> <h2>musei</h2> <h1>ospitalità</h1> <h2>alberghi</h2> <h2>b&b e ostelli</h2> <h1>enogastronomia</h1> <h2>ristoranti</h2> <h2>agriturismi</h2> <h1>news ed eventi</h1> </body> </html> HEAD TITLE struttura ad albero HTML STRONG BODY P H2 H1 H2 Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 19 EM A Gli elementi sono in un rapporto genitore-figlio.
Struttura ad albero ed ereditarietà HTML Livello 0 Nodo Radice HEAD BODY Livello 1 TITLE H1 H2 P P Livello 2 A IMG A BR Livello 3 STRONG Livello 4 Ereditarietà le proprietà impostate per un elemento sono automaticamente ereditate dai suoi discendenti Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 20
I selettori Ogni elemento della pagina può essere identificato utilizzando i selettori : ogni tag HTML è un selettore: * indica tutti gli elementi della pagina; a indica tutti gli elementi della pagina con tag a; a, b indica tutti gli elementi della pagina con tag a oppure b; a b indica tutti gli elementi della pagina con tag b contenuti in elementi con tag a, a qualsiasi livello di profondità (sfruttando l ereditaritetà); a > b indica tutti gli elementi della pagina con tag b figli di elementi con tag a, quindi ad un livello di profondità; a + b indica l elemento b adiacente all elemento a. gli ultimi due selettori non sono ben supportati da tutti i browser Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 21
I selettori identificatori: possono essere associati agli elementi per definire una entità unica all interno del documento: sono vietati identificatori duplicati. Sono alfanumerici con la sola eccezione del carattere underscore _. <img id= logo src= /> <p id= numero_di_telefono >0123456</p> #logo indica l elemento (che, ricordo, è unico) della pagina con identificatore logo. Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 22
I selettori classi: utilizzate per creare gruppi di elementi con lo stesso comportamento. Sono alfanumeriche con la sola eccezione del carattere underscore _. <p class= saluto id= informale >ciao</p> <div id= frasi > <span class= saluto id= formale_am >buongiorno</span> <span class= saluto id= formale_pm >buonasera</span> </div>.saluto indica tutti gli elementi della pagina con classe saluto; span.saluto indica tutti gli elementi della pagina con tag span e contemporaneamente classe saluto; div span.saluto indica tutti gli elementi della pagina, contenuti nel tag div, con tag span e contemporaneamente classe saluto; #frasi saluto indica tutti gli elementi contenuti in quello con identificatore frasi e con classe saluto. e via dicendo, valgono le regole presentate prima Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 23
I selettori: esempio Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 24
Lorem Ipsum: una curiosità Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Cos è? Un passaggio fittizio usato dall industria tipografica fin dal 1500 per verificare il layout delle pagine Dove? Ad esempio nel sito Web http://www.lipsum.com/ è possibile generare un numero di paragrafi variabile da usare nelle proprie pagine in costruzione Significato? In genere si pensa sia una passaggio costruito da parole scelta a caso, invece è un insieme di passaggi presi da Cicerone, 45 a.c. : I termini estremi del bene e del male Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 25
Università degli Studi di Padova Facoltà di Lettere e Filosofia Progettazione di siti web (ING-INF/05) LMSGC, mutuato da LMLIN e Sc. Stat. a.a. 2010-11 Indice: Prof. Maristella Agosti, Ing. Marco Dussin CSS e pagine Web : seconda parte Come è fatto un CSS Incorporare i CSS nelle pagine
Esempio di uso dei CSS Pagina HTML: esempio1.html CSS: stylees1.css <html> <head> <link rel="stylesheet" href="stylees1.css" /> </head>.p1{ color:orange; font-weight:bold; } p1 = classe definita nel CSS <body> <h1>esempio numero 1</h1> <p class="p1">elemento paragrafo 1</p> <p class="p1">elemento paragrafo 2</p> <p class="p1">elemento paragrafo 3</p> </body> </html> Si dice alla pagina HTML che deve caricare e applicare il foglio di stile CSS. Scrivi una volta applica dove vuoi! La classe p1 è definita nel CSS ed è applicata agli elementi nella pagina HTML Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 27
Come è fatto un CSS? Un CSS è formato da regole. Le regole sono formate 3 parametri: selettore proprietà valore h1 color : red; Selettore { proprietà : valore;} Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 28
Raggruppare selettori e regole h1 color : red; h1 background : white; h1 color:red; background:white; Selettore { proprietà:valore ; proprietà:valore; ; } Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 29
Raggruppare selettori e regole h1 color : red; h2 color : red; h1, h2 color:red; selettore 1, selettore 2,, selettore n { proprietà:valore; } Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 30
CSS interni ed esterni Un foglio di stile si dice ESTERNO se è definito in un file separato (file.css) dalla pagina HTML. Un foglio di stile di dice INTERNO quando il suo codice è inserito direttamente nella pagina HTML. I CSS possono essere collegati, incorporati o in linea Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 31
<html> <head> CSS collegati: mediante link <link rel="stylesheet" type="text/css media= screen href="stylees1.css" /> </head> <body> </body> </html> 1. rel: descrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet fogli di stile alternativi. 2. href: serve a definire l'url assoluto o relativo del foglio di stile. È obbligatorio. 3. type: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. L'attributo è obbligatorio. 4. media: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale. Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 32
CSS collegati: mediante @import <html> <head> </head> <body> </body> </html> <style> @import url(stylees1.css); </style> Miglior modo per risolvere i problemi di compatibilità tra browser. Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 33
CSS incorporati <html> <head> <title>css INCORPORATI</title> <style type="text/css"> </style> </head> body { background: #FFFFCC; }.p1{ color:orange; font-weight:bold; } <body></body></html> Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 34. Il foglio di stile è incorporato nella pagina HTML e non in un file esterno. Deve essere inserito all interno del tag <head>. La dichiarazione del foglio di stile è all interno del tag <style>. attributo type obbligatorio attributo media opzionale
CSS in linea <h1 style="color: red; background: black; > Titolo 1 </h1> Definizione del CSS in linea La dichiarazione dello stile avviene all interno dei singoli tag HTML mediante l attributo style Si perde buona parte dei vantaggi dati dall uso dei CSS, ma possono essere utili in alcun casi particolari. Tag HTML <h1> Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 35
Esempio dichiarazione CSS <html> <head> <link rel="stylesheet" href= stylees1.css" /> <style type="text/css">.p2{ color:blue; font-weight:bold; } </style> <title>struttura del documento</title> </head> <body> <h1>esempio uso dei fogli di stile: </h1> <p class="p1">css collegato mediante file esterno</p> <p class="p2">css incorporato</p> CSS collegato via link CSS incorporato CSS in linea <p style="color:red; font-weight:bold;">css in linea</p> </body></html> Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 36
CSS: attributo MEDIA L attributo MEDIA può accompagnare sia l elemento LINK che l elemento STYLE Si definiscono stili diversi per supporti diversi. <link rel="stylesheet" type="text/css media= screen href="stylees1.css" /> * all: il CSS si applica a tutti i dispositivi di visualizzazione. * screen: valore usato per la resa sui normali browser web. * print: il CSS viene applicato in fase di stampa del documento. * projection: usato per presentazioni e proiezioni a tutto schermo. * aural: da usare per dispositivi come browser a sintesi vocale. * braille: il CSS viene usato per supporti basati sull'uso del braille. * embossed: per stampanti braille. * handheld: palmari e simili. * tv: web-tv. Progettazione di siti web, a.a. 2010-11 Maristella Agosti, Marco Dussin 37