CSS Layout delle pagine
|
|
|
- Ilaria Agostini
- 9 anni fa
- Просмотров:
Транскрипт
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.
!)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
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
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
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,
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
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
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
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.
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
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?
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
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
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
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
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
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
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
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
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
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)
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.
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)
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
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 [email protected] 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 [email protected] http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile
CSS Dott. Nicole NOVIELLI [email protected] 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
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
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.
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 è