CSS Layout delle pagine
|
|
|
- Ilaria Agostini
- 7 anni fa
- Visualizzazioni
Transcript
1 Laboratorio di Tecnologie Web CSS Layout delle pagine Dott. Stefano Burigat
2 Strategie di layout Esistono diverse strategie per definire il layout generale delle pagine web: Layout fisso: il layout mantiene le proprie dimensioni indipendentemente dalla dimensione della finestra del browser o del testo Layout fluido o liquido: le dimensioni del layout cambiano in modo proporzionale alle dimensioni della finestra Layout elastico: le dimensioni del layout cambiano in modo proporzionale alla dimensione del testo Layout ibrido: combina aree fisse e aree le cui dimensioni variano dinamicamente Layout fissi Nei layout fissi, i designer controllano direttamente la dimensione delle pagine e le relazioni tra elementi delle pagine, allineamenti e lunghezza delle linee (la lunghezza ottimale delle linee è parole oppure caratteri). Un layout fisso viene creato impostando in pixel la larghezza delle pagine (una dimensione comune è 960px) e dei loro componenti (colonne, margini, etc.). Tipicamente, il contenuto dell'intera pagina viene inserito all'interno di un elemento <div> (che può essere posizionato al centro della pagina in modo che eventuale spazio extra si disponga equamente sui due lati). Gli svantaggi di un layout fisso sono dovuti al fatto che non
3 si adatta alla dimensione della finestra del browser (che può quindi diventare più piccola o molto più grande del contenuto da visualizzare). <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> #wrapper { width: 750px; position: absolute; margin-left: auto; margin-right: auto; padding: 0px; #col1 { position: absolute; top: 0px; left: 0px; width: 200px; background: orange; #col2 { position: absolute; top: 0px; right: 0px; margin-left: 225px; </style> </head> <body> <div id="wrapper"> <div id="col1"> <h1>colonna 1</h1> <p>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
4 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.</p> <div id="col2"> <h1>colonna 2</h1> <p>sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> </body> </html> Layout fluidi Nei layout fluidi, la dimensione delle pagine e delle colonne al loro interno varia dinamicamente in funzione dello spazio a disposizione. Si può creare un layout di questo tipo impostando la larghezza delle pagine e degli elementi in percentuale (o non usare la proprietà width del tutto, nel qual caso questa è impostata ad auto e gli elementi occupano tutto lo spazio a loro disposizione). Il principale svantaggio di questi layout è che possono
5 portare a righe di testo (ed elementi in generale) molto lunghe o molto corte, pregiudicandone la leggibilità. Per mitigare questo problema si può fare uso delle proprietà min-width e max-width. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> #col1 { width: 70%; margin-right: 5%; float: left; #col2 { width: 25%; float: left; background: orange; </style> </head> <body> <div id="col1"> <h1>colonna 1</h1> <p>sed...</p> <div id="col2"> <h1>colonna 2</h1> <p>lorem...</p> </body> </html> Layout elastici Nei layout elastici, la dimensione delle pagine e degli
6 elementi si adatta alla dimensione del testo. Questo permette di avere righe sempre della stessa lunghezza (in termini di numero di parole o caratteri). I layout elastici vengono creati impostando le dimensioni degli elementi in em. Questo tipo di layout è meno flessibile del layout fluido in ambito mobile e non si applica particolarmente bene a contenuti non testuali. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> #col1 { width: 12em; margin-right: 2em; float: left; #col2 { width: 12em; float: left; background: orange; </style> </head> <body> <div id="col1"> <h1>colonna 1</h1> <p>sed...</p> <div id="col2"> <h1>colonna 2</h1> <p>lorem...</p> </body> </html>
7 Layout ibridi I layout ibridi utilizzano una combinazione di dimensioni definite in px, percentuali ed em, in base alle esigenze. Ad esempio, il codice suguente combina una colonna a dimensione fissa con una colonna a dimensione variabile. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> #col1 { width: 200px; position: absolute; top: 0px; left: 0px; background: orange; #col2 { width: auto; position: absolute; top: 0; left: 225px; </style> </head> <body> <div id="wrapper"> <div id="col1"> <h1>colonna 1</h1> <p>lorem...</p> <div id="col2"> <h1>colonna 2</h1> <p>sed...</p>
8 </body> </html> Layout multicolonna In questa sezione, vedremo alcuni esempi di layout a due e a tre colonne. Gli esempi sono volutamente minimali, utilizzano elementi generici e sono da intendersi come base per sviluppare layout più sofisticati e completi. Utilizzo di float La proprietà float è al momento la più utilizzata per creare layout multicolonna nelle pagine web. L'esempio seguente crea un layout fluido a due colonne per una pagina contenente un header, due aree di contenuto (contenuto principale e secondario) ed un footer. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> body { padding: 0; #header { background-color: #CCC; padding: 15px; #main { float: left;
9 width: 60%; margin: 0 5%; background: orange; #secondary { float: left; width: 25%; margin: 0 5% 0 0; #footer { clear: left; padding: 15px; background: #CCC; </style> </head> <body> <div id="header"><p>header</p> <div id="main"> <p>contenuto principale</p> <p>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.</p> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li> <li>link 2</li> <li>link 3</li> <li>link 4</li> </ul> <div id="footer"><p>footer</p> </body> </html>
10 Entrambe le aree di contenuto sono state definite come elementi floating a sinistra ed hanno una dimensione specificata in percentuale. L'area di contenuto principale ha un margine a destra e a sinistra mentre l'area secondaria ha un margine solo a destra. I margini superiori sono stati impostati a 0 per ottenere l'allineamento verticale. Il footer utilizza la proprietà clear in modo che sia posizionato sotto le aree di contenuto. E' possibile applicare max-width e min-width per migliorare l'usabilità su schermi molto grandi o molto piccoli. Tali proprietà possono essere applicate ai singoli elementi oppure si possono inserire tutti gli elementi all'interno di un unico <div> e impostare i vincoli a questo. L'esempio seguente crea un layout fisso a due colonne per la stessa pagina. A differenza del layout fluido, in questo caso tutta la pagina viene inserita all'interno di un elemento <div> di cui viene specificata la dimensione in pixel ed anche le dimensioni delle due aree di contenuto e dei margini vengono trasformate in pixel. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> body { padding: 0;
11 #wrapper { width: 960px; #header { background-color: #CCC; padding: 15px; #main { float: left; width: 650px; margin: 0 20px; background: orange; #secondary { float: left; width: 250px; margin: 0 20px 0 0; #footer { clear: left; padding: 15px; background: #CCC; </style> </head> <body> <div id="wrapper"> <div id="header"><p>header</p> <div id="main"> <p>contenuto Loremprincipale</p> <p>lorem...</p> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li>... </ul> <div id="footer"><p>footer</p> </body> </html>
12 Per ottenere un layout centrato sulla finestra del browser, è sufficiente settare la proprietà margin del wrapper al valore 0 auto facendo così in modo che vengano creati automaticamente dei margini destro e sinistro delle stesse dimensioni nello spazio a disposizione. Se si vuole fare in modo che l'header ed il footer occupino l'intera larghezza della finestra mentre le due aree di contenuto siano centrate, è sufficiente spostare il wrapper in modo che racchiuda solo le aree di contenuto, senza necessità di modificare le regole di stile. Il seguente esempio crea un layout fluido a tre colonne, aggiungendo un elemento <div> alla pagina precedente e modificando le dimensioni delle colonne di conseguenza. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> body { padding: 0; #header { background-color: #CCC; padding: 15px; #navigation { float: left; width: 22.5%; margin: %;
13 #main { float: left; width: 45%; margin: 0 2.5%; background: orange; #secondary { float: left; width: 22.5%; margin: 0 2.5% 0 0; #footer { clear: left; padding: 15px; background: #CCC; </style> </head> <body> <div id="header"><p>header</p> <div id="navigation"> <p>menu</p> <ul> <li>link 1</li>... </ul> <div id="main"> <p>contenuto principale</p> <p>lorem...</p> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li>... </ul> <div id="footer"><p>footer</p> </body> </html>
14 Per trasformare questo layout in un layout fisso, si procede come nell'esempio a due colonne (provatelo come esercizio). Utilizzo del posizionamento assoluto Un metodo alternativo all'utilizzo di float per creare layout multicolonna è rappresentato dal posizionamento assoluto. Un problema di questa soluzione è il fatto che gli elementi che vengono posizionati in modo assoluto non fanno parte del flusso normale e quindi non influenzano gli altri elementi. Questo non permette di creare facilmente un footer al di sotto delle colonne. L'esempio seguente crea un layout fluido a tre colonne. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> body { padding: 0; #header { background-color: #CCC; padding: 15px; #contenuto { position: relative; #navigation {
15 width: 20%; position: absolute; top: 0; left: 2.5%; #main { width: 50%; position: absolute; top: 0; left: 25%; background: orange; #secondary { width: 20%; position: absolute; top: 0; right: 2.5%; </style> </head> <body> <div id="header"><p>header</p> <div id="contenuto"> <div id="main"> <p>contenuto principale</p> <p>lorem...</p> <div id="navigation"> <p>menu</p> <ul> <li>link 1</li>... </ul> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li>...
16 </ul> </body> </html> La soluzione si basa sul creare un containing block per le tre colonne con posizione relativa e specificare poi la posizione assoluta delle colonne al suo interno. Notate anche che, al contrario dell'utilizzo della proprietà float, non è necessario che le tre colonne compaiano nel codice nell'ordine in cui vengono visualizzate (in questo esempio, il contenuto principale è presente nel codice prima delle due barre laterali). L'esempio seguente crea un layout fisso tramite posizionamento assoluto. Oltre all'utilizzo di dimensioni in pixel, viene aggiunto un wrapper per racchiudere l'intera pagina. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> body { padding: 0; #wrapper{ width: 960px; margin: 0 auto; #header { background-color: #CCC;
17 padding: 15px; #contenuto { position: relative; #navigation { width: 200px; position: absolute; top: 0; left: 0; #main { width: 520px; position: absolute; top: 0; left: 220px; background: orange; #secondary { width: 200px; position: absolute; top: 0; right: 0; </style> </head> <body> <div id="wrapper"> <div id="header"><p>header</p> <div id="contenuto"> <div id="main"> <p>contenuto principale</p> <p>lorem...</p> <div id="navigation"> <p>menu</p> <ul> <li>link 1</li>
18 ... </ul> <div id="secondary"> <p>articoli correlati:</p> <ul> <li>link 1</li>... </ul> </body> </html> Grid frameworks (e oltre) Nel corso degli anni, sono stati proposti diversi framework che permettono di semplificare la creazione di layout basati su un'organizzazione del contenuto a griglia. Tipicamente, tali framework sono rigidi nel senso che non permettono variazioni rispetto all'organizzazione supportata. Per questo motivo, sono utilizzati principalmente in fase di prototipazione del design di un sito più che in fase di produzione. Un esempio di framework molto diffuso è il 960 Grid System che si può scaricare all'indirizzo Esso si basa su pagine di dimensione 960px, suddivise in 12 oppure 16 colonne, larghe rispettivamente 60 o 40 pixel, con margini di 10px attorno ad ogni colonna (esiste anche una versione a 24 colonne di 30 pixel). L'esempio seguente crea un layout a due colonne con header e footer. Per farlo funzionare, dovete scaricare il framework dal sito sopra riportato e fare riferimento al
19 foglio di stile esterno 960.css presente nel framework. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> <style> #header, #footer { background: #CCC;.column { </style> </head> <body> <div class="container_12"> <div id="header" class="grid_12"><p>header 960px</p> <div class="clear"> <div class="grid_8 column"> <p>contenuto principale 620px</p> <p>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.</p> <div class="grid_4 column"> <p>menu 300px</p> <ul> <li>link 1</li> <li>link 2</li> <li>link 3</li> <li>link 4</li>
20 </ul> <div class="clear"> <div id="footer" class="grid_12"><p>footer 960px</p> <div class="clear"> </body> </html> Potete trovare un esempio più complesso, che evidenzia anche i limiti di utilizzo di un framework di questo tipo, all'indirizzo Oltre a 960, esistono diversi altri framework che permettono di creare layout (anche di tipo responsive, ossia che cambiano in funzione dello spazio di schermo a disposizione). Alcuni esempi sono Blueprint ( BlueTrip ( yui ( Skeleton ( Bootstrap ( Future tecnologie di layout Oltre alle strategie di layout descritte nelle sezioni precedenti, sono state proposte o sono in fase di definizione altre modalità per organizzare gli elementi sulle pagine web. La maggior parte di queste sono supportate solo dalle ultime versioni dei browser. Un'aggiunta a CSS che consentirà di poter semplificare la definizione dei layout è la possibilità di suddividere un
21 qualsiasi elemento in colonne tramite proprietà quali column-width e column-count. La specifica completa può essere trovata al seguente indirizzo: L'esempio seguente mostra la suddivisione di un elemento <div> in due colonne. <!DOCTYPE html> <html> <head> <title> Tecnologie web </title> <style> div { -webkit-column-count: 2; </style> </head> <body> <div> <p>contenuto principale</p> <p>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.</p> </body> </html> Il Flexible Box Layout Model (noto come FlexBox) permette di organizzare facilmente i box degli elementi gli uni rispetto agli altri, senza dover utilizzare float, margini negativi o altre complicate strategie. Alla pagina
22 potete trovare una presentazione estesa di questo modello. La documentazione W3C può essere trovata al seguente indirizzo: Alla pagina può essere trovata la descrizione di un altro modello per la definizione del layout delle pagine basato su griglia.
Istituto Comprensivo GIUSEPPE GARIBALDI
Istituto Comprensivo GIUSEPPE GARIBALDI GENOVA Via XX Settembre 123 16100 Genova (GE) Tel. 010 12345678 Fax 010 12345678 e-mail: info@icgaribaldi.gov.it sito: www.icgaribaldi.gov.it FRONTESPIZIO (standard
CSS Posizionamento degli elementi
Laboratorio di Tecnologie Web CSS Posizionamento degli elementi Dott. Stefano Burigat www.dimi.uniud.it/burigat Tutti gli esempi che abbiamo visto finora sfruttavano regole di posizionamento standard (il
!)Ku,Ky(! Luca Visone : PORTFOLIO :.
.: PORTFOLIO :. ...perchè!)ku,ky(!...perchè!)ku,ky(!...perchè!)ku,ky(!...perchè!)ku,ky(!... i 2 punti esclamativi all inizio ed alla fine del logo rappresentano la ferma volontà di voler riuscire in quelli
Linee guida del logo istituzionale e dell immagine coordinata del Comune di Malnate
Linee guida del logo istituzionale e dell immagine coordinata del Lo stemma e il logo istituzionale Elementi Base 1.1 Lo stemma: origini Lo stemma comunale raffigura un campo di cielo caricato di tre stelle
Piemonte Turismo Brand Manual
Piemonte Turismo Brand Manual Piemonte Turismo Brand Manual Indice 01 Introduzione 02 2 Modulistica 17 1 Il marchio 1.1 Versione colore 1.2 Dimensioni e proporzioni 1.3 Versione bianco e nero 1.4 Versione
Laboratorio di Tecnologie Web CSS Altre tecniche Dott. Stefano Burigat
Laboratorio di Tecnologie Web CSS Altre tecniche Dott. Stefano Burigat www.dimi.uniud.it/burigat CSS Reset Come abbiamo visto, i browser hanno un loro foglio di stile che viene applicato se non definiamo
CORPORATE DESIGN MANUAL. Fitnet Srl
CORPORATE DESIGN MANUAL Fitnet Srl Manuale d uso della corporate design del Brand Tonic Network Benessere Versione 1.0 01 Aprile 016 1 Indice Premessa Introduzione 1. Marchio/Logo Istituzionale 1.a Marchio/Logo
LOGO ISTITUTI ITALIANI DI CULTURA
LOGO ISTITUTI ITALIANI DI CULTURA GUIDELINES Regole principali Colori Pantone 1797 C Pantone 7741 C Pantone Black 3 C C 15 - M 100 - Y 90 - K 10 C 75 - M 25 - Y 100 - K 0 C 11 - M 0 - Y 15 - K 82 R 162
Manuale d uso del marchio Turismo Veneto
d uso del marchio Turismo Veneto Regione del Veneto Turismo Veneto Sommario Sommario 1.0 Il marchio, il logotipo, il pay-off 1.1 Costruzione geometrica della stella 1.2 Definizione dei colori ed uso relativo
Sei. La consulenza evoluta
Sei. La consulenza evoluta Consulenza: la tradizione Fideuram diventa riferimento per il mercato. Da oltre quaranta anni la nostra missione è offrire ai nostri clienti consulenza finanziaria con un alto
Manuale. per l utilizzo del format FSC. iniziativa cofinanziata con Fondo di Sviluppo e Coesione.
Manuale per l utilizzo del format FSC Format FSC > elementi primari logo posizionato in alto a destra elementi grafici > possono essere ripetuti all interno del materiale di comunicazione FSC, in questo
FASCICOLO Annual Edition Preview Copertina
L attività divulgativa di Plana è supportata dalla pubblicazione di cataloghi, libri e soprattutto da FASCICOLO, rivista fondata nel 1977 che nasce come quadrimestrale trattando rubriche di design, architettura,
BSpknstudio. è una Digital Creative Agency. Realizziamo strategie di comunicazione digitali vincenti, grazie al nostro modello
BSpknstudio è una Digital Creative Agency Realizziamo strategie di comunicazione digitali vincenti, grazie al nostro modello BESPOKEN DESIGN, di servizio sartoriale maturato in più di 10 anni di esperienza
Presentazione di ARCHITETTI & INGEGNERI s.r.l.
Architetti & Ingegneri srl ID Presentazione 3 Questo esempio di presentazione è stato realizzato con ACTAFOLIO versione 1.0 I dati inseriti nella presentazione sono del tutto inventati a solo scopo dimostrativo.
colori istituzionali PANTONE 185 C PANTONE 295 C PANTONE 185 C
2 Questo manuale presenta gli elementi del sistema di identità visiva di 50&PiùEnasco. Il presente documento è destinato agli utilizzatori al fine di riprodurre correttamente il simbolo di 50&PiùEnasco,
ANUALE D USO. del Marchio di Certifi cazione ICIM S.p.A.
ANUALE D USO del Marchio di Certifi cazione ICIM S.p.A. Indice Nota informativa 4 Il Marchio di Certifi cazione 6 Sistema di Gestione Certifi cato 8 Sistema di Gestione Certifi cato: Esempi 20 Prodotto
B. Stampati per corrispondenza
B. Stampati per corrispondenza Indice Premessa Linea operativa 01 Carta intestata Camere di Commercio 02 Carta intestata con specifica 03 Carta intestata Unioni Regionali 04 Carta intestata Aziende Speciali
Chi siamo Dove siamo Il nostro staff Lavora con noi Contattaci Newsletter LOGO. News Nuovo Usato Outlet Veicoli commerciali Assistenza Servizi
Wireframe: home page Cerca tra il nuovo usato tipo Volumi volumi Marca Modello marca modello Promo (slider) Prezzo (iva inclusa) I nostri servizi prezzo Cerca ricerca avanzata Vetture nuove speciali Vetture
UNIVERSITÀ DEGLI STUDI DI MILANO-BICOCCA MANUALE DI CORPORATE IDENTITY
UNIVERSITÀ DEGLI STUDI DI MILANO-BICOCCA MANUALE DI CORPORATE IDENTITY 2 INDICE MANUALE TECNICO IL MARCHIO Il marchio 03 Dipartimenti e scuole 08 STAMPATI DI CONSUMO Carta intestata 10 Busta 13 Cartelletta
RDL Lighting System. Catalogo Prodotti
Catalogo Prodotti RDL Lighting System. Catalogo Prodotti RDL Lighting System. Catalogo Prodotti Minigonna 7 Minigonna Applique 7 Fantasy 7 Edith 7 Laetitia 7 Sfera 7 Zoe 7 Christelle 7 Ingot 7 Brigitte
ANUALE D USO. del Marchio di Certifi cazione ICIM S.p.A.
ANUALE D USO del Marchio di Certifi cazione ICIM S.p.A. Indice Nota informativa 4 Il Marchio di Certifi cazione 6 Sistema di Gestione Certifi cato 8 Sistema di Gestione Certifi cato: Esempi 19 Prodotto
Info e Contatti
Info e Contatti segreteria@pdlodigiano.it/ 0371.412141 www.pdlodigiano.it Circolo di Lodi www.pdlodi.it scannerizza il codice QR per sapere come arrivare alla Festa Progetto grafico di Andrea Cassinari
Milano Design Week 8 13 Aprile Circuito Ufficiale di zona Tortona Savona. Posizione Mainsponsor del circuito
Milano Design Week 8 13 Aprile Circuito Ufficiale di zona Tortona Savona Posizione Mainsponsor del circuito Tortona Around Design Il nuovo fuorisalone di zona Tortona-Savona Tortona Around Design è un
10 anni del Premio Anima. Per la crescita di una coscienza etica
10 anni del Premio Anima Per la crescita di una coscienza etica VISTA DALLA TERRAZZA CAFFARELLI IN CAMPIDOGLIO DURANTE IL PREMIO ANIMA Luigi Abete, Presidente Premio Anima 2008 2011 Lorem ipsum dolor sit
Guida OpenOffice Writer 4.1.1 Indice
Guida OpenOffice Writer 4.1.1 Indice INTRODUZIONE...2 I MARGINI DELLA PAGINA, LA DIMENSIONE DELLA PAGINA, L'ORIENTAMENTO DELLA PAGINA...3 IMPOSTARE IL COLORE SFONDO PAGINA E BORDO PAGINA...4 NUMERO COLONNE
layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto
Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding
Come fare soldi scrivendo ebook di successo
Come fare Soldi scrivendo ebook di successo - I Lezione - Questo prodotto è distribuito gratuitamente ai lettori e amici di laboratorioebook.it E permessa la gratuita distribuzione, ma vietata la commercializzazione,
Bando Storico, Artistico e Culturale 2014 - II fase. Fondazione CON IL SUD PROPOSTA DI PROGETTO. Numero progetto: null FAC-SIMILE
Bando Storico, Artistico e Culturale 2014 - II fase Fondazione CON IL SUD PROPOSTA DI PROGETTO Numero progetto: null Titolo: IL BANDO SAC (PARTE II) Soggetto Responsabile: NORDA 1.DATI GENERALI: PROGETTO
Come fare Soldi scrivendo ebook di Successo
Nicolò Corrente Come fare Soldi scrivendo ebook di Successo Lezione nr. 1 Pubblicato da: Copyright 2014 Nicolò Corrente Laboratorio ebook Edizioni Seconda edizione digitale Aprile 2014 Quest opera è protetta
Comune di Brescia. Manuale di identità visiva
Comune di Brescia Manuale di identità visiva Indice Lo stemma comunale Lo stemma del Comune di Brescia Varianti Restyling Lo stemma araldico Il nuovo stemma Le regole d uso Font e logotipo Distanza stemma-logo
Promuoviamo la tua struttura ricettiva nel mercato cinese dei turisti top spender
Promuoviamo la tua struttura ricettiva nel mercato cinese dei turisti top spender Il Portale Wechina presenterà IL TUO HOTEL al mercato cinese. NON SIAMO UNA OTA NON SIAMO UN CHANNEL MANAGER All interno
Undici storie di nuovi calciatori italiani raccontate da: Violetta Bellocchio, Cristiano Cavina, Emidio Clementi, Paolo Cognetti, Giorgio Fontana,
Undici storie di nuovi calciatori italiani raccontate da: Violetta Bellocchio, Cristiano Cavina, Emidio Clementi, Paolo Cognetti, Giorgio Fontana, Massimo Gardella, Fabio Genovesi, Fabio Guarnaccia, Davide
Pieghevole A4-2 ante. Pieghevole A4-3 ante pag. 4-5. Pieghevole A4 - piega a croce pag. 6-7. pag. 2-3 1 FRONTE 1 FRONTE FRONTE
Pieghevole A - 2 ante pag. 2- Pieghevole A - ante pag. - Pieghevole A - piega a croce pag. 6- RETRO Pieghevole A - 2 ante Se il lavoro è certificato Nei lavori certificati è necessario lasciare uno spazio
WeChina. Progetto Destination Management e Marketing Turistico
WeChina Progetto Destination Management e Marketing Turistico MISSION Promuoviamo l esperienza da vivere e da raccontare attraverso il soggiorno negli hotel del network chinese friendly NON SIAMO UNA OTA
MANUALE DI STILE 2013
MANUALE DI STILE 2013 Indice 01. LOGO 01.01 - Descrizione - Stemma - Elemento testuale - Costruttivo - Colori utilizzati 01.03 - Declinazioni - Logo OUTLINE versione positiva - Logo OUTLINE versione negativa
patrizialai graphicwebdesigner
patrizialai graphicwebdesigner Lavora nel campo della grafica e dello sviluppo web da più di 14 anni e al momento, oltre a lavorare come responsabile di tutta la parte grafica per una società che fornisce
Applicazioni Web 2013/14
Applicazioni Web 2013/14 Lezione 5: Cascading Style Sheets Matteo Vaccari http://matteo.vaccari.name/ matteo.vaccari@uninsubria.it (cc) Matteo Vaccari. Published in Italy. Attribution Non commercial Share
Linee guida per l'utilizzo del logo dell'università di Siena
DI Linee guida per l'utilizzo del logo dell'università di Siena DI Indice 1. Il nuovo sigillo 2. Lo sviluppo di un logotipo per applicazioni web e social network 3. Proporzione 4. Grandezza minima 5.
Progettare pagine html. Studium Generale, a.a. 2013-2014, II semestre
Progettare pagine html Studium Generale, a.a. 2013-2014, II semestre Quanto deve essere grande la nostra pagina? http://www.newfangled.com/optimal_site_width DIMENSIONE PAGINA Secondo le statistiche
I CAMMINI DELLA REGINA PERCORSI TRANSFRONTALIERI LEGATI ALLA VIA REGINA
WP6 LINEE GUIDA MANUALE D IDENTITÀ VISIVA PERCORSI TRANSFRONTALIERI LEGATI ALLA VIA REGINA Questo manuale nasce per determinare le linee guida di utilizzo del marchio, dell immagine coordinata e della
Grafica ed interfacce per la comunicazione Scienze della Comunicazione
Grafica ed interfacce per la comunicazione Scienze della Comunicazione Paola Vocca Lezione 17: Progettare il testo Lucidi tradotti e adattati da materiale presente su http://www.hcibook.com/e3/resources/
Il Manuale d identità visiva
Il Manuale d identità visiva 2 Il Manuale normativo d identità visiva dell Università degli Studi di Foggia La Premessa Il progetto di costruzione di un sistema d identità visiva dell Università degli
Linee guida per l utilizzo del marchio e degli obblighi informativi dei beneficiari POR FESR MARCHE 2007/2013. Insieme c è futuro
Linee guida per l utilizzo del marchio e degli obblighi informativi dei beneficiari POR FESR MARCHE 2007/2013 Insieme c è futuro LOGO Versione a colori Proporzioni e area di rispetto Codici cromatici Caratteri
COMUNICARE NEL MONDO REALE
PAGE 1 COMUNICARE NEL MONDO REALE WWW.TPECONSULTING.IT AUTORE: MATTEO LOCANE 2014 WWW.DESIGNDISTRICT.COM Comunicare nel mondo reale In questo video: PAGE 2 Opzioni Implicazioni Di cosa stiamo parlando?
Guida redazionale del logo 2015
Guida redazionale del logo 2015 IT Foto: David Lliff Gruppo del PPE al Parlamento europeo Rue Wiertz 60 1047 Bruxelles Belgio Editor Indice Introduzione...2 Coerenza grafica...2 Un identità unica...3 Un
AutoPronti. Wireframe: home page. Range Rover Sport 45.300 40.300. Cerca tra il nuovo. Promo (slider) Nuove speciali. I nostri servizi.
Wireframe: home page Cerca tra il nuovo usato Tipo tipo Volumi volumi Marca Modello marca modello Promo (slider) Prezzo (iva inclusa) I nostri servizi prezzo Cerca ricerca avanzata Vetture usate Nuove
Portraits of Milan. Fotografie di Andrea Rovatti. Recomposing the imaginary. a cura di Denis Curti
Portraits of Milan Recomposing the imaginary Fotografie di Andrea Rovatti a cura di Denis Curti una mostra fotografica dal titolo Portraits of Milan di Andrea Rovatti in accordo con SEA per l inaugurazione
1. MANUALE DI COMUNICAZIONE ISTITUZIONALE
1. MNULE DI COMUNICZIONE ISTITUZIONLE PREMESS Il Manuale di Comunicazione Istituzionale è un progetto di comunicazione integrata che si rivolge a tutti i soci, dipendenti, clienti e portatori di interesse
WEB I FOGLI DI STILE. Gabriele Murara
WEB I FOGLI DI STILE Gabriele Murara 1 Cosa sono e a cosa servono HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento
Il Modello di Gestione e Sviluppo delle Risorse Umane. Il Sistema di Rilevazione delle Competenze. Il Sistema di Valutazione delle Prestazioni
INDICE 2 6 10 17 20 28 30 32 33 34 35 37 Lo Scenario I Valori Inpdap Il Modello dei Processi Il Modello di Gestione e Sviluppo delle Risorse Umane Il Sistema Professionale Il Sistema di Rilevazione delle
APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE
ESEMPIO FILE.CSS PER REALIZZARE MODELLO SITO WEB: www.modellinirobotanno80.altervista.org /*questo codice va aggiunto al css principale per far si che tutti i browser possano riconoscere correttamente
Autore: Nicola Ceccon. Classe: QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004. Scuola: Itis Euganeo LAYOUT E CSS
Autore: Classe: Nicola Ceccon QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004 Scuola: Itis Euganeo LAYOUT E CSS Dispensa Obiettivo di questo documento non è quello di affrontare la tematica, assai
la scrittura e la lettura sul web Luisa Carrada Berna, 25 aprile 2013
la scrittura e la lettura sul web Luisa Carrada Berna, 25 aprile 2013 25 aprile 2013 nel bel mezzo di una rivoluzione un anno spartiacque un tweet e via! navigare on-the-go leggere e scrivere on-the-go
ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE. Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag.
ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. 1
Versione 2.1. Manuale d uso per il marchio e identità visiva Cagliari - Sardegna Capitale Europea della Cultura Città Candidata 2019
Versione 2.1 Manuale d uso per il marchio e identità visiva Cagliari - Sardegna Capitale Europea della Cultura Città Candidata 2019 Manuale d uso per il marchio e identità visiva Cagliari - Sardegna Capitale
BRAND BOOK SANTA TERESA GALLURA
BRAND BOOK Manuale normativo per l uso del marchio e logotipo Santa Teresa Gallura. Corporate identity e modalità d applicazione sui principali strumenti di comunicazione. stiledibologna.com agenzia di
QOS2011 QUASAR OUTER-SPACE OLTRE SPAZIO QUASAR. QOS 2011 Quasar Outer-space//spacestation files
presenta 1 Quaderni dell Istituto Quasar Collana diretta da Luna Todaro QOS è un progetto ideato e coordinato da Carlo Prati e Luna Todaro www.qos.istitutoquasar.com QOS2011 QUASAR OUTER-SPACE OLTRE SPAZIO
Progettazione multimediale
Progettazione multimediale Le tabelle 1 Obiettivi Perché si usano le tabelle Le proprietà delle tabelle Inserimento e modifica delle proprietà 2 Perché si usano le tabelle Una pagina Web è formata da testo
Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà
HTML e CSS Sommario HTML e CSS I fogli di stile cosa sono principali proprietà CSS CSS La specifica HTML elenca le linee guida su come i browser dovrebbero visualizzare i diversi elementi del documento
3.6.1 Inserimento. Si apre la finestra di dialogo Inserisci Tabella:
3.6.1 Inserimento Per decidere dove collocare una tabella è necessario spostare il cursore nella posizione desiderata. Per inserire una tabella esistono diversi modi di procedere: Menù Tabella Inserisci
www.tesseract.it Io, Informatico Un Viaggio consapevole tra Informatica e Computer Capitolo 12 Ipermedia e HTML Carlo A. Mazzone
www.tesseract.it Io, Informatico Un Viaggio consapevole tra Informatica e Computer Capitolo 12 Ipermedia e HTML Carlo A. Mazzone Tutti i diritti sono riservati. Nessuna parte di questa pubblicazione può
GIANLUCA DI DOMENICA progettazione grafica.
gianluca.di.domenica 2015 GIANLUCA DI DOMENICA progettazione grafica. 1_proposta APPLICAZIONE IMMAGINE CORDINATA INTESTATI AZIENDALI data. 15.luglio.2015 Spett. le Papermoon srl di Antonio Di Petta via
CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09
CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09 Selettori class e id! Sono due attributi fondamentali applicabili a tutti gli elementi! Consentono di superare le limitazioni intrinseche
Video Scrittura (MS Word) Lezione 3 Formattazione e Stampa documenti
Video Scrittura (MS Word) Lezione 3 Formattazione e Stampa documenti Formattazione di un documento La formattazione di un documento consente di migliorare l impaginazione del testo e di dare al al documento
FOGLI DI STILE PER IL SITO SCOLASTICO
1 FOGLI DI STILE PER IL SITO SCOLASTICO 1) PREFAZIONE Questa guida è stata redatta per tutti quegli insegnanti che fino ad oggi hanno utilizzato il linguaggio HTML per strutturare il proprio sito scolastico
Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne.
Le tabelle Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne. E' difficile? All'inizio costruire le tabelle in HTML
Principio. di base per una buona riuscita
Una delle attività da affrontare nel nostro lavoro è quella di realizzare un layout, ossia una struttura dove posizionare contenuti per creare una pagina web. Ci sono molti tipi di pagine web quindi diverse
INFORMATICA settembre Docente Salvatore Mosaico 2ASA corso HTML(parte 2)
Vediamo oggi 3 comandi Comando Cosa fa Scrive una intestazione: devo specificare il testo Va a capo Genera un link: cosa vedere dove andare nuova pagina help in linea (toltip) a.htm
manuale di identità visiva - graphic portfolio
manuale di identità visiva - graphic portfolio PRISCA PILOT PROJECT EU-LIFE + Environment Policy and Governance LIFE/11/ENV/000277 PRISCA (PILOT PROJECT FOR SCALE RE-USE STARTING FROM BULKY WASTE STREAM)
LA FORMATTAZIONE Impostare la pagina, i paragrafi e il corpo del testo
LA FORMATTAZIONE Impostare la pagina, i paragrafi e il corpo del testo Prima di apprestarsi alla stesura del documento è opportuno definire alcune impostazioni riguardanti la struttura della pagina, dei
APPUNTI DI HTML (QUARTA LEZIONE)
APPUNTI DI HTML (QUARTA LEZIONE) 1. LA STRUTTURA BASE DELLE TABELLE Le tabelle sono una parte estremamente importante del codice HTML. Sono uno strumento indispensabile per gestire i layout grafici. Immaginiamo
il ponte // inserzioni Listino prezzi novitá 2012 offline & online il ponte compie 20 anni
l a r i v i s t a i t a l i a n a i n d a n i m a r c a il ponte novitá 2012 offline & online Listino prezzi inserzioni 2012 il ponte compie 20 anni l a r i v i s t a i t a l i a n a i n d a n i m a r
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS) Gli stili rappresentano un metodo per definire come il browser debba visualizzare i tag HTML. Il loro vantaggio è che possono essere utilizzati a differenti
SOMMARIO. Crateca: il vino, la terra la riscoperta della tradizione. L editoriale di Enrico Buono
SOMMARIO 4 8 9 22 L editoriale di Enrico Buono Benvenuti a bordo di Salvatore Lauro Speciale: Giro d Italia la tappa di Ischia di Enrico Buono Angela Merkel la cancelliera tedesca ritorna ad Ischia di
GERBERA D ORO 2017 XVI GIORNATA NAZIONALE DEL SOLLIEVO 28 MAGGIO 2017
GERBERA D ORO 2017 XVI GIORNATA NAZIONALE DEL SOLLIEVO 28 MAGGIO 2017 Premio Gerbera d oro, offerto dalla Fondazione Nazionale Gigi Ghirotti e dalla Conferenza delle Regioni e delle Province autonome ad
Le sezioni logiche di una pagina web
Le sezioni logiche di una pagina web Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti. Strutturare logicamente i contenuti di una pagina, creare un template (modello)
Gruppi. Configurazione e gestione
Gruppi Configurazione e gestione 2 Informazioni sulla guida Grazie per aver creato un gruppo su XING! Di seguito sono indicati i passaggi fondamentali per iniziare a utilizzare e a gestire il tuo gruppo.
jquery come utilizzare javascript senza troppi problemi
jquery come utilizzare javascript senza troppi problemi Queste slide Queste slides fanno parte del corso Web Design II & HTML II. Il sito del corso, con il materiale completo, si trova in http://www.gabrieleruscelli.com.
SCHEDE SINTETICHE ESEMPI PROGETI. Gruppo A politica 1 politica 2 politica 3 URBAN CENTER
ELORTO / TVOL / RELZIONE TENI Obiettivi. Facilitare la creazione, la lettura e la comprensione dei contenuti. Soluzioni: - Esplicitare la mission dell Urban enter con il suo allestimento per raccontare
Mario App - Mario App Preventivi - Mario App Pronto Intervento ll sistema di Mario App permette agli utenti di richiedere preventivi o interventi a qualsiasi orario in qualsiasi città in cui Mario è presente
Guida all utilizzo PREVENTIVI I preventivi permettono agli utenti di comparare fino ad un massimo di 5 offerte per un determinato lavoro e di scegliere la migliore in base ai dettagli dell offerta ricevuta.
Realizzare il layout di un sito web senza utilizzare frame e tabelle
Realizzare il layout di un sito web senza utilizzare frame e tabelle Questa guida descrive in maniera semplice e essenziale i passi necessari alla realizzazione di una pagina web strutturata in maniera
Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini
STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)
Creazione di tabelle.
Creazione di tabelle. Argomenti trattati: - Premessa: Cosa sono le tabelle in HTML. - Costruiamo una tabella: Come realizzare semplici tabelle con i tag principali ed i loro attributi. - Personalizziamo
Il formato XML. Versione 1.2 - Aprile 2013. Roberto Tua. Hyperfilm - Il formato XML pag. 1 di 25
Il formato XML Versione 1.2 - Aprile 2013 Roberto Tua Hyperfilm - Il formato XML pag. 1 di 25 Indice generale Glossario...3 Introduzione...4 1 La struttura del documento...5 2 Il nodo ...6 3 Il nodo
Istituto Superiore di Scienze Religiose Beato Niccolò Stenone NORME REDAZIONALI PER LA COMPILAZIONE DEGLI ELABORATI SCRITTI
Istituto Superiore di Scienze Religiose Beato Niccolò Stenone NORME REDAZIONALI PER LA COMPILAZIONE DEGLI ELABORATI SCRITTI Pisa 2015 Premessa Le pagine che seguono non hanno altra finalità se non quella
INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2. Internet + HTML + HTTP = WWW
1 INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2 Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML
6. Editor Divi. Il layout. Guida Sintetica Wordpress //
6. Editor Divi Divi è un editor visuale che utilizza il sistema drag and drop per creare layout di pagina con facilità. Nella fase di creazione di una nuova pagina o un nuovo articolo, si avrà la possibilità
Responsive Web Design
Responsive Web Design Università di Pisa pievatolo@dsp.unipi.it 26 aprile 2015 Sommario Griglie fluide, immagini flessibili, e oltre 1 Griglie fluide, immagini flessibili, e oltre Che cosa significa responsive?
ll sistema di Mario App permette agli utenti di richiedere preventivi o interventi a qualsiasi orario in qualsiasi città in cui Mario è presente.
Guida all utilizzo ll sistema di Mario App permette agli utenti di richiedere preventivi o interventi a qualsiasi orario in qualsiasi città in cui Mario è presente. Basta entrare nell'app e scegliere la
CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile
CSS Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html CSS: Cascading Style Sheet! Tecnologia W3C per la definizione dello stile di una pagina web! Contenuto e
Diego Martinelli Selection of works 2014. architect, graphic designer
Diego Martinelli Selection of works 2014 architect, graphic designer Milan, September 2014 Diego Martinelli Selection of works 2014 architect, graphic designer Italian Pavilion Innesti /Grafting 14. International
Laboratorio di reti I: Cascading Style Sheets
Laboratorio di reti I: Cascading Style Sheets Stefano Brocchi brocchi@dsi.unifi.it 10 novembre, 2009 Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, 2009 1 / 45 Cascading Style Sheets Un Cascading
Grafici. 1 Generazione di grafici a partire da un foglio elettronico
Grafici In questa parte analizzeremo le funzionalità relative ai grafici. In particolare: 1. Generazione di grafici a partire da un foglio elettronico 2. Modifica di un grafico 1 Generazione di grafici
Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine
Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare
OZONO. studio e applicazione. www.ok-benessere.it
OZONO studio e applicazione www.ok-benessere.it La Multiossigen è stata costituita nel 1992, per tradurre in attività produttiva le decennali esperienze maturate nella ricerca e nelle applicazioni dell
Università degli studi di Verona. Corso di Informatica di Base. Lezione 4 - Parte 2. Rifinitura di un documento
Università degli studi di Verona Corso di Informatica di Base Lezione 4 - Parte 2 Rifinitura di un documento In questa seconda parte vedremo le principali rifiniture di un documento. In particolare: 1.
(b) - Creazione del layout delle pagine nella vista Layout
(b) - Creazione del layout delle pagine nella vista Layout La vista Layout di Dreamweaver semplifica l utilizzo delle tabelle per il layout delle pagine. Nella vista Layout, è possibile progettare le pagine
HTML5. Approfondimento su layout Responsive
Approfondimento su layout Responsive In pasato la risoluzione di riferimento è stata 1024px mentre per il web design la larghezza di riferimento delle pagine è stata di 960px. Attualmente questo non è
Collection one NAPTIME SUPPERTIME GLORIOUSTIME Collection living PASHA SHAPEt
Quando il mercato è abbondante, quando l offerta è confusa, bisogna saper giocare con le emozioni. Eccoci qui: BEAUTIFOOL è una nuova azienda, una nuova maniera di fare business, un nuovo approccio al