Autore: Nicola Ceccon. Classe: QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004. Scuola: Itis Euganeo LAYOUT E CSS

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Autore: Nicola Ceccon. Classe: QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004. Scuola: Itis Euganeo LAYOUT E CSS"

Transcript

1 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 vasta, della progettazione dell interfaccia e più in generale del sito in base ai paradigmi dell usabilità e della accessibiltà, ma introdurre alla realizzazione di interfacce con l utilizzo della tecnologia CSS di livello 2 in sostituzione della tecnica, sino ad ora utilizzata ma che è destinata al disuso, delle tabelle Quindi dalle tabelle utilizzate nella realizzazione dell interfaccia per il semplice motivo che permettono la suddivisione della pagina in aree, cioè il posizionamento dei diversi elementi costitutivi di una pagina web, all'uso dei CSS.

2 2 Premessa Una pagina web e quindi un sito e internet nel suo complesso riescono a fornire le informazioni, cioè a soddisfare l esigenza primaria di un utente web che è una esigenza di ricerca/assunzione di informazione (o contenuto), se l interfaccia aiuta il recupero delle informazioni. L interfaccia, quindi, assume in un documento online, come una pagina web, una funzione fondamentale: può essere l elemento che aiuta il recupero del contenuto o quello che lo ostacola, nascondendolo. Diventa quindi vincolante la progettazione dell interfaccia in termini di usabilità 1 e accessibilità 2, ricordando che una di questa caratetteristica non implica l altra e che non sono mutuamente esclusive. Obiettivo di questo documento non è quello di affrontare la tematica, assai vasta, della progettazione dell interfaccia e più in generale del sito in base ai paradigmi dell usabilità e della accessibiltà, ma introdurre alla realizzazione di interfacce con l utilizzo della tecnologia CSS di livello 2 in sostituzione della tecnica, sino ad ora utilizzata ma che è destinata al disuso, delle tabelle. Nel dibattito in corso nelle webzine sul tema Table vs CSS la mia posizione è quella di realizzare con le tabelle quello che non è possibile con i CSS in attesa di sviluppi futuri sia sulla tecnologia CSS che sulle versioni dei browser e sulla loro capacità 3 di supportare in modo univoco e coerente questa tecnologia. Elementi di una pagina Gli elementi basilari di una pagina web, che sono: 1. Il logo. 2. Lo strumento di navigazione principale che permette l accesso alle aree o sezioni del sito, che tipicamente assume la forma di una barra orizzontale di collegamenti, testuali o pittorici, posta sotto il logo. 3. Lo strumentoi di navigazione locale che permette l accesso alle pagini locali dell area attiva, che tipicamente assume la forma di un menu di collegamenti, testuali o pittorici, posti prevalentemente a sinistra della pagina. 1 Facilità di utilizzo per semplicità. 2 Fruibilità del contenuto a persone affette da disabilità per semplicità. 3 E questa la principale critica e riserva da parte dei webdesigner ai CSS e la loro preferenza per le tabelle.

3 3 4. Lo strumento di navigazione supplementare 4 che permette da un lato l accesso alle pagine con uno schema diverso dal browsing 5 e dal searching 6 con l utilizzo di una mappa del sito o di un indice del sito e dall altro il collegamento diretto a pagine di servizio (come l aiuto) oppure a pagine di servizi (come la pagina di contatto). Tipicamente assume la forma di una barra di collegamenti, testuali o pittorici, posti sul margine destro della pagina all altezza del logo. 5. Lo strumento per il searching costituito da una casella di inseriemnto e un pulsante posto di norma a destra del logo in posizione centrale. 6. Il contenuto (testuale e grafico) strutturato in titoli, sottotili e paragrafi. Questi elementi basilari sono posizionati in diversi modi e attualmente il layout più utilizzato prevede la l organizzazione della pagina in tre zone a cui sono assegnate specifiche informazioni e compiti: 1. Nella prima zona, posta in alto, si inserisce un banner contenente il logo, la barra supplementare e alla fine del banner la navigazione principale che fornisce l accesso alle diverse sezioni del sito. 2. Nella seconda zona, posta a sinistra si inserisce la navigazione locale all interno della sezione attiva. 3. Nella terza zona, posta a destra della navigazione locale e che occupa il resto della pagina si inserisce il contenuto della pagina. 4 Esistono altri modi di identificare questo strumento di navigazione e le funzioni possono esere molteplici a seconda dei collegamenti inseriti. 5 Modalità di ricerca che prevede il seguire i collegamenti. 6 Modalità di ricerca che prevede l accesso diretto dopo una ricerca all inetrno del sito con uno strumento sf di ricerca.

4 4 Layout con le tabelle Le tabelle sono utilizzate nella realizzazione dell interfaccia per il semplice motivo che permettono la suddivisione della pagina in aree, cioè il posizionamento dei diversi elementi costitutivi di una pagina web. Il layout tipico visto in precedenza prevede una tabella contenitore di 2 righe e 2 colonne con l unione delle colonne della prima riga e l inserimento sempre nella prima riga di una tabella di 2 righe e due colonne con l unione delle righe della prima colonna (per l inserimento del logo). A partire da questo schema, poi, si possono inserire all interno della seconda riga della tabella contenitore di altre tabelle per la sudivizione in colonne e più in generale per la costituzione di aree per gli elementi. Le colonne o celle poi sono dotate di una cornice o di colori di sfondo per la realizzazione dell effetto contrasto che assieme all effetto di spaziatura (realizzato con le tabelle) sono alla base della progettazione di una interfaccia. La larghezza della tabella contenitore dipende dal tipo di layout. Nel layout liquido la tabella contenitore ha una larghezza impostata in percentuale da 100 (massima area del browser) ad una percentuale inferiore con, in questo caso, allineamento a sinistra oppure al centro della tabella. Nel layout fisso, invece, la larghezza è fissatsa in pixel e la misura dipende dall ipotesi del progettista sulla risoluzione video utilizzata. Nel caso, tipico, di 800x600 pixel si assume una larghezza variabile tra 770 e 780 pixel utilizzando un colore di sfondo o talvolta una immagine per evidenziare la pagina web nel caso di utilizzo di una risoluzione video maggiore. Anche in questo caso l allineamento della tabella è a sinistra oppure al centro. E sicuramente preferibile il layout liquido poiché in caso di risoluzione video diversa (in entrambe le direzzioni) la pagina si adatta, ma spesso i webdesigner preferiscono il layout fisso per avere un maggior controllo dell interfaccia della pagina.

5 5 Layout con CSS Con i CSS non si utilizzano le tabelle per la realizzazione del interfaccia e quindi l uso delle tabelle ritorna ad essere quello originario: una forma di rappresentazione di dati in formato tabellare. I CSS, quindi, non sono utilizzati esclusivamente per la definizione dello stile degli elementi di una pagina, ma anche per la costituzione dell interfaccia permettendo quindi una reale separazione tra il contenuto e la sua struttura dato dall HTML e la presentazione data dai CSS. Per capire la realizzazione di layout con i CSS è necessario affrontare i seguenti concetti di base: 1. Struttura ed ereditarietà di una pagina HTML 2. Unità di misura 3. Il Box model 4. Il posizionamento

6 6 Struttura ed ereditarietà di una pagina HTML Se analizziamo una pagina HTML come struttura, tralasciando il contenuto, ci si accorge che questa è costituita da un insieme di elementi, cioè una pagina è costituita da rettangoli disposti sullo schermo: un paragrafo, una immagine, una tabella, un titolo sono elementi. Gli elementi sono di tre tipi: 1. Blocco 2. Inline 3. Lista Gli elementi blocco sono i rettangoli che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento. Per esempio nel caso di queste due righe HTML: <h1>titolo</h1> <p>pargrafo</p> le parole "titolo" e "paragrafo" appariranno su due righe diverse, perchè <h1> e <p> sono elementi blocco. Gli elementi inline come un immagine, invece, non possono contenere elementi blocco, ma solo altri elementi inline oltre che il loro stesso tipo di contenuto, essenzialmente testo. Quando un elemento inline è inserito nel documento non viene creata una nuova riga nel flusso del documento. Per esempio nel caso di queste righe HTML: <p> Lorem ipsum dolor sit amet, <b>consectetuer adipiscing</b> elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br>ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<br>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum... </p> Il browser visualizza: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum...

7 7 Un documento ha una struttura ad albero: si tratta di una gerarchia ordinata in cui tutti gli elementi hanno tra di loro delle relazioni di parentela. Le relazioni sono: 1. Relazione del tipo genitore-figlio 7 e ogni elemento è genitore o figlio di un altro, cioè quando si scende direttamente di un livello. Un elemento si dice genitore quando contiene altri elementi e si dice figlio quando è racchiuso in un altro elemento. 2. Relazione del tipo antenato 8 -discendente 9 in cui un elemento è antenato di un elemento sotto di due livelli. Per esempio nella seguente pagina: <html> <head> <title>struttura del documento</title> </head> <body> <h1>titolo</h1> <div> <p><a href="contatto.htm">contatta la scuola</a></p> </div> <p>telefono<b> </b></p> </body> </html> La struttura ad albero risulta essere: 7 Parent-Child in inglese. 8 Ancestor in inglese. 9 Descandant in inglese.

8 8 Si può dire che HEAD è figlio di HTML, che A è figlio di P, etc. Tra DIV e A, invece si scende di due livelli: diciamo allora che DIV è un antenato di A e che questo è rispetto al primo un discendente. E importante sottolineare che c'è un solo elemento che racchiude tutti e non è racchiuso: HTML e si dice che esso è l'elemento radice 10. Le relazioni sono importanti perché il meccanismo fondamentale dei CSS è l'ereditarietà: molte proprietà impostate per un elemento sono autamaticamente ereditate dai suoi discendenti. Per esempio nel seguente foglio di stile: body { margin:0px 0px 0px 0px; font-size: 12px; font-family: Arial; color: Black; background: White; p,h1,h2 { margin:0px 30px 10px 30px; h1 { font-size:20px; color: Orange; Il colore nero del testo impostato in BODY è ereditato dai P e H2, mentre H1 reimposta il colore nell arancione. Il FONT arial, come lo sfondo BACKGROUND bianco è ereditato da tutti. Unità di misura Ci sono diverse unità di misura usate per definire dimensioni, spazi o distanze, anche se nella realizzazione delle pagine sono utilizzate solo alcune. Le principali sono: o pt (points - punti): unità di misura tipografica destinata essenzialmente a definire la dimensione dei font o em (em-height): è un unità di misura relativa, 1 em equivale all'altezza media di un carattere per un dato font. o px (pixels): unità di misura ideale su monitor. E' quella più usata e facile da comprendere. 10 Root in inglese.

9 9 Il valore può essere espresso in modo assoluto (770px) oppure relativo utilizzando il percentuale (90%) e un valore espresso in percentuale è da considerare sempre relativo rispetto ad un altro valore, in genere quello espresso per l'elemento parente. Per esempio nel seguente foglio di stile: body { margin:0px 0px 0px 0px; font-size: 12px; font-family: Arial; color: Black; background: White; p,h1,h2 { margin:0px 30px 10px 30px; font-size: 1em; h1 { font-size:200%; color: Orange; La dimensione del testo in P e H2 è pari a 1em e in H1 è il doppio rispetto a 12px impostato in BODY.. Questo comporta che nel caso di personalizzazione della dimensione del carattere nel browser Explorer H1 rimane fisso, mentre variano P e H2. Box model Un elemento blocco è costituito da elementi di base modificabili da proprietà dei CSS ed è fondamentale capire quali sono. Si può immaginare un blocco come 3 cornici innestate: Le cornici sono: 1. Area del contenuto. 2. Bordo del contenuto, cornice interna. 3. Cornice esterna, che è uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti. Possiamo infatti definire il margine come la distanza tra il bordo di un elemento e gli elementi adiacenti. Le cornici possono essere sovrapposte o spaziate tra loro a seconda del valore delle proprietà che entrano in gioco nel box model.

10 10 Le proprietà sono: 1. Width, larghezza dell area del contenuto. Se non si imposta alcun valore per la proprietà width o se il valore usato è Auto la larghezza di un box è uguale a quella dell'area del contenuto dell'elemento contenitore. 2. Height, altezza dell area del contenuto o più precisamente definisce la distanza tra il bordo superiore e quello inferiore di un elemento. 3. Padding-top, distanza tra il bordo superiore e il confine superiore dell area del contenuto. 4. Padding-bottom, distanza tra il bordo inferiore e il confine inferiore dell area del contenuto. 5. Padding-right, distanza tra il bordo destro e il confine destro dell area del contenuto. 6. Padding-left, distanza tra il bordo sinistro e il confine sinistro dell area del contenuto. 7. Margin-top, distanza tra il bordo superiore e il confine superiore della cornice esterna 8. Margin-bottom, distanza tra il bordo inferiore e il confine inferiore della cornice esterna. 9. Margin-right, distanza tra il bordo destro e il confine destro della cornice esterna. 10. Margin-left, distanza tra il bordo sinistro e il confine sinistro della cornice esterna.

11 11 Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box: la prima è data dal valore della proprietà Width 11, la seconda è data dalla somma delle diverse grandezze: o Altezza: Margin-bottom + Padding-bottom + Height + Padding-top + Margin-top o Larghezza: Margin-left + Padding-left + Width + Padding-left + Margin-left E' possibile ovviamente che i due valori coincidano: accade quando di un particolare elemento non si impostino margini, paddding e bordi; o quando il valore di tali proprietà sia uguale a 0 L altezza in realtà dipende dall altezza dell area del contenuto che dipende da cosa contiene, che ha quindi natura variabile. Il box può essere dotato di: o Un bordo, che è una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto. In questo caso la misura della larghezza dell elemento deve tener conto anche del bordo. o Uno sfondo che comprende oltre all area del contenuto anche il padding. Per esempio nel seguente foglio di stile: #div1 { background: Orange; margin : 40px; border : 10px solid #CC0033; padding : 10px; width : 200px; height : 100px; La larghezza complessiva dell'elemento, cioè l'area che occupa sullo schermo, va dal bordo della finestra fino all''estremo del margine destroè di 320px data da: o = 320 Altra cosa è, invece, la proprietà Width che è di 200px: va quindi intesa come l'area dove trova spazio il testo dell'elemento. 11 Explorer 5/5.5 su Windows interpreta male il concetto di larghezza, infatti intende la larghezza globale dell'elemento, compresi margini, padding e bordi. In Explorer 6 se nel documento, infatti, non si usa nessun DOCTYPE il browser di Microsoft funziona in modalità retro-compatibile, ripetendo bug ed errori dei suoi predecessori. Un comportamento utile per gli sviluppatori che possono così simulare nella versione 6 i comportamenti delle precedenti versioni.

12 12 Per due box adiacenti in senso verticale che abbiano impostato un margine inferiore e uno superiore la distanza non sarà data dalla somma delle due distanze. A prevalere sarà invece la distanza maggiore tra le due. E' il meccansimo del cosiddetto margin collapsing. Tale meccanismo non si applica ai box adiacenti in senso orizzontale. Il valore Auto. Solo per tre proprietà è possibile impostare il valore auto: margini, altezza e larghezza (width). L'effetto è quello di lasciar calcolare al browser l'ammontare di ciascuna di esse in base alla risoluzione dello schermo e alle dimensioni della finestra. Solo i margini possono avere valori negativi. Ciò non è consentito per padding, bordi, altezza e larghezza.

13 13 Posizionamento Position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata. Valori o static o absolute o fixed o relative Ciascuno di questi valori merita un spiegazione approfondita da cui emergeranno i concetti di base che governano le regole sul posizionamento. Static E' il valore di default, quello predefinito per tutti gli elementi non posizionati secondo un altro metodo. Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento. Absolute L'elemento, o meglio, il box dell'elemento viene rimosso dal flusso del documento ed è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom. Il posizionamento avviene sempre rispetto al box contenitore dell'elemento. Questo è rappresentato dal primo elemento antenato (ancestor) che abbia un posizionamento diverso da static. Se tale elemento non esiste il posizionamento avviene in base all'elemento radice HTML, che in condizioni standard coincide con l'area del browser che contiene il documento e che ha inizio dall'angolo superiore sinistro di tale area.un elemento posizionato in modo assoluto scrorre insieme al resto del documento. Fixed Usando questo valore il box dell'elemento viene, come per absolute, sottratto al normale flusso del documento. La differenza sta nel fatto che per fixed il box contenitore è sempre il cosiddetto viewport. Con questo termine si intende la finestra principale del borwser, ovvero l'area del contenuto. Altra differenza fondamentale: un box posizionato con fixed non scorre con il resto del documento. Rimane, appunto, fisso al suo post. L'effetto è lo stesso che si può ottenere con l'uso dei frame, in cui una parte della pagina rimane fissa e il resto scorre. Solo che qui il documento è solo uno. Purtroppo, il valore non è supportato da Explorer su Windows.

14 14 Relative L'elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l'elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, bottom, right. Ma qui esse non indicano un punto preciso, ma l'ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore. Passiamo ora all'analisi delle proprietà che concretamente definiscono dove un elemento posizionato va a collocarsi, dal momento che che con position stabiliamo solo il come. Le proprietà visibility, clip e z-index influiscono invece sull'aspetto visuale dei box definendone la visibilità e la relazione con gli altri box presenti nella pagina. Top Il significato di top cambia secondo la modalità di posizionamento. Per gli elementi posizionati con absolute o fixed definisce la distanza verticale rispetto al bordo superiore dell'elemento contenitore. Per gli elementi posizionati con relative stabilisce invece l'ammontare dello spostamento rispetto al lato superiore della posizione originaria. In questo caso, usando valori positivi il box viene spostato sotto, mentre con valori negativi lo spostamento avviene verso l'alto. Left Per gli elementi con posizione assoluta o fissa definisce la distanza dal bordo sinistro del box contenitore. Per quelli con posizione relativa stabilisce lo spostamento rispetto al lato sinistro della posizione originaria. Valori positivi spostano l'elemento verso destra, valori negativi verso sinistra. Bottom Per i box con posizione assoluta o fissa definisce la distanza dal bordo inferiore dell'elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato inferiore della posizione originaria. Right Per i box con posizione assoluta o fissa definisce la distanza dal bordo destro dell'elemento contenitore. Per quelli posizionati relativamente lo spostamento rispetto al lato destro della posizione originaria.

15 15 Z-index Con questa proprietà si imposta l'ordine di posizionamento dei vari elementi sulla base di una scala di livelli. E' un meccanismo simile a quello dei layer sovrapposti di Photoshop ed è utile nel contesto del posizionamento dinamico. In seguito ad un posizionamento, infatti, è possibile che un elemento si sovrapponga ad un altro rendendolo illeggibile. Impostando lo z-index è possibile modificare l'ordine di tutti gli elementi. Le tre proprietà che esamineremo in questa lezione possono modificare radicalmente la presentazione del documento. Sono, dunque, strumenti potenti ma come quei giocattoli un pò pericolosi vanno usati con molta cautela e sapendo bene cosa si fa, tenendo anche conto di serie implicazioni a livello di rendering tra i diversi browser. Display Torniamo per un attimo alla prima lezione. Avevamo chiarito in quella sede la fondamenatle distinzione tra elementi blocco, inline e lista che è alla base di (X)HTML. Bene, quello che sembrava un assioma inconfutabile, può essere sconvolto con l'uso della proprietà display. Essa ha una sola, semplice funzione: definire il trattamento e la presentazione di un elemento. Fin quando non la si usa ognuno segue la sua natura e il suo comportamento standard, ma con display possiamo intervenire su di esso e in certi casi ribaltarlo. La proprietà è ereditata. Nel caso del valore none. L'elemento non viene mostrato. O meglio: è come se non fosse nemmeno presente nel documento, in quanto non genera alcun box. Diversa, come vedremo, la proprietà visibility:hidden, che invece si limita a nascondere l'elemento. Float Con questa proprietà è possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro con il valore Right o Left) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float. La proprietà non è ereditata.

16 16 Layout tipici Consideriamo i seguenti layout: 1. ALA like. 2. Layout classico. 3. Tre colonne fluido.

17 17 ALA like Il nome deriva dal design del sito di Alistapart : si tratta di una struttura su due colonne con la navigazione e il logo a sinistra, l area del contenuto a destra e non vi è la presenza l area del banner. La pagina HTML ha la seguente struttura: <html> <head> <title>layout ALA</title> </head> <body> <div id= sinistra > <p>contenuto</p> </div> <div id= destra > <p>menu</p> </div> </body> </html> Codice CSS body { #000; margin:0px 0px 0px 0px; font-family: Courier; font-size: 12px; height: 100%; background: Orange; #sinistra { float:left; width:67%; background:#fff; border-right:2px solid #000; border-bottom:2px solid margin-right:15px; padding-bottom:20px; #destra { background: Orange; height: 100%; p,h1,h2 { margin:0px 30px 10px 30px; h1 { h2 { font-size:20px; color: Orange; font-size:16px; color: black; #destra p { font-size:14px; margin-left:30px; padding-top:5px; font-family: Verdana;

18 18 Layout classico E il più utilizzato e consiste nella suddivisione della pagina in tre zone: intestazione con navigazione primaria, corpo diviso tra navigazione locale e contenuto. Una variante prevede il pié di pagina per la firma: nome dell organizzazione, indirizzi, contatto e data ultimo aggiornamento. La pagina HTML ha la seguente struttura: <html> <head> <title>layout Classico</title> </head> <body> <div id= banner > <p>navigazione primaria</p> </div> <div id= sinistra > <p>navigazione locale</p> </div> <div id= destra > <p>contenuto</p> </div> </body> </html> ALA Layout

19 19 Codice CSS body { margin:0px 0px 0px 0px; padding:0px; font-family: Arial; font-size:12px; height: 100%; background:orange; #destra { width:80%; float:left; background:white; padding-bottom:10px; border-left:1px solid Gray; padding-left:80px; padding-right:80px; #sinistra { width:20%; float:left; background:orange; padding-bottom:10px; height: 100%; #banner { padding:10px 10px 10px 10px; background:#ffa; border-bottom: 2px solid Gray; font-size:40px; color:orange; p,h1,h2 { margin-top:0px; margin-left:10px; margin-right:10px; h1 { h2 { font-size:25px; color: Orange; font-size:16px; color: black; #sinistra p { font-family: Verdana; font-size:14px;

20 20 Nel caso dell introduzione della zona di firma (piè di pagina) si aggiunge al foglio di stile la seguente regola: #pie { float:left; padding:10px 10px 10px 10px; border-top: 1px solid Gray; font-size:12px; background:#ffa; color:orange; width:100%; E si aggiunge alla fine della pagina HTML il codice: <div id= pie > <p>firma</p> </div> Layout classico

21 21 Tre colonne fluido Si tratta di un layout per l home page che prevede la suddivisione della pagina in quattro zone: intestazione con navigazione primaria, corpo diviso in tre colonne con la centrale a larghezza maggiore. Per esempio nella prima colonna (sinistra) si inseriscono le news, nella seconda il contenuto o i collegamenti con testo anticipatorio alle principali sezioni e nella terza (destra) altre informazioni omogenee. Una variante prevede il pié di pagina per la firma: nome dell organizzazione, indirizzi, contatto e data ultimo aggiornamento. La pagina HTML ha la seguente struttura: <html> <head> <title>layout 3 colonne fluido</title> </head> <body> <div id= banner > <p>navigazione primaria</p> </div> <div id= sinistra > <p>news</p> </div> <div id= centro > <p>contenuto</p> </div> <div id= destra > <p>informazioni o servizi</p> </div> </body> </html>

22 22 Codice CSS body { margin:0px 0px 0px 0px; padding:0px; font-family: Arial; font-size:12px; height: 100%; background:orange; #destra { width:20%; float:left; background:orange; padding-bottom:10px; color: Black; height: 100%; #centro { width:60%; float:left; background:#fff; padding-bottom:10px; border-left:1px solid Gray; border-right:1px solid Gray; #sinistra { width:20%; float:left; background:white; padding-bottom:10px; height: 100%; border-bottom: 1px solid Gray; #banner { background:#ffa; border-bottom: 2px solid Gray; p,h1,h2 { margin:0px 10px 10px 10px; h1 { font-size:40px; color: orange; h2 { font-size:16px; color: black; #destra p { font-size:12px #banner h1 { margin:0px; padding:10px #sinistra p { font-family: Times New Roman; font-size:12px; color:orange; font-weight: bold

23 Titolo: Autore: Classe: Layout e CSS Nicola Ceccon QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004 Scuola: Note legali: Itis Euganeo Via Borgofuro, 6 Via Borgofuro Este (PD) - Italy Telefono Fax Diffusione consentita con obbligo di citarne le fonti

Logo Gruppi del cuore Istruzioni per l uso

Logo Gruppi del cuore Istruzioni per l uso Logo Gruppi del cuore Istruzioni per l uso Le istruzioni per l uso del logo dei gruppi del cuore contengono informazioni e spiegazioni per utilizzarlo in pratica. Definiscono le proporzioni tra immagine

Dettagli

ACCESSIBILITÀ: PROBLEMI E SOLUZIONI

ACCESSIBILITÀ: PROBLEMI E SOLUZIONI Autore: Classe: Nicola Ceccon QUINTA INFORMATICA (5IA) Anno scolastico: 2003/2004 Scuola: Itis Euganeo ACCESSIBILITÀ: PROBLEMI E SOLUZIONI Dispensa In questa dispensa si affrontano alcuni problemi tipici

Dettagli

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 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

Dettagli

FOGLI DI STILE PER IL SITO SCOLASTICO

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

Dettagli

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

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)

Dettagli

APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE

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

Dettagli

velit. Castia è una piattaforma facile, veloce ed economica, Progetto Castia Il progetto CASTIA

velit. Castia è una piattaforma facile, veloce ed economica, Progetto Castia Il progetto CASTIA Progetto Castia Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud

Dettagli

MANUALE DI GUIDELINES MARCHIO ENTI EROGATORI PUBBLICI E PRIVATI SISTEMA SANITARIO REGIONE LOMBARDIA

MANUALE DI GUIDELINES MARCHIO ENTI EROGATORI PUBBLICI E PRIVATI SISTEMA SANITARIO REGIONE LOMBARDIA MANUALE DI GUIDELINES MARCHIO ENTI EROGATORI PUBBLICI E PRIVATI SISTEMA SANITARIO REGIONE LOMBARDIA Nella comunicazione al cittadino, Regione Lombardia sottolinea l unitarietà del lombardo affiancando

Dettagli

Progettare pagine html. Studium Generale, a.a. 2013-2014, II semestre

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

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali

Dettagli

MANUALE DI GUIDELINES MARCHIO ASL REGIONE LOMBARDIA

MANUALE DI GUIDELINES MARCHIO ASL REGIONE LOMBARDIA MANUALE DI GUIDELINES MARCHIO ASL REGIONE LOMBARDIA Il nuovo marchio ASL di Regione Lombardia nasce per offrire al pubblico un immagine coordinata unitaria e immediatamente riconducibile all ente istituzionale.

Dettagli

Le sezioni logiche di una pagina web

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)

Dettagli

Guida alla realizzazione di un layout fluido

Guida alla realizzazione di un layout fluido Guida alla realizzazione di un layout fluido I siti Web possono essere realizzati secondo due diversi schemi di layout: layout fissi e fluidi. La differenza tra i due tipi di layout consiste in una diversa

Dettagli

GUIDA ALL IMPAGINAZIONE DEGLI INTERNI DEL LIBRO

GUIDA ALL IMPAGINAZIONE DEGLI INTERNI DEL LIBRO GUIDA ALL IMPAGINAZIONE DEGLI INTERNI DEL LIBRO INDICE 1. Come sono composti i modelli 2. Duplica una sezione tipo 3. Elimina una sezione tipo 4. Inserisci il testo 5. Inserisci le immagini 6. Inserisci

Dettagli

WEB I FOGLI DI STILE. Gabriele Murara

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

Dettagli

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA

Dettagli

01. Conoscere l area di lavoro

01. Conoscere l area di lavoro 01. Conoscere l area di lavoro Caratteristiche dell interfaccia Cambiare vista e dividere le viste Gestire i pannelli Scegliere un area di lavoro Sistemare le barre degli strumenti Personalizzare le preferenze

Dettagli

Coder Dojo Tutorial 3

Coder Dojo Tutorial 3 Coder Dojo Tutorial 3 Complimenti ancora, son certo che hai già imparato molte più cose di quel che pensi! Tempo per fare qualcosa di un po più divertente, come mettere insieme un foglio dedicato a definire

Dettagli

layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto

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

Dettagli

B. Stampati per corrispondenza

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

Dettagli

Il linguaggio HTML - Parte 2

Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza

Dettagli

GUIDA PER LA REALIZZAZIONE DEI SITI WEB ASSOCIAZIONI LOCALI SCIENZA & VITA

GUIDA PER LA REALIZZAZIONE DEI SITI WEB ASSOCIAZIONI LOCALI SCIENZA & VITA GUIDA PER LA REALIZZAZIONE DEI SITI WEB ASSOCIAZIONI LOCALI SCIENZA & VITA Febbraio 2007 1. Premessa Questo breve manuale ha lo scopo di fornire le indicazioni tecniche per lo sviluppo dei siti web delle

Dettagli

I sistemi di posta elettronica standard

I sistemi di posta elettronica standard Famiglia Cultura Informazione Studio Legale Paternostro EDU Le notifiche a mezzo posta elettronica certificata Modulo 1 I sistemi di posta elettronica standard Prerequisiti operativi Per poter realizzare

Dettagli

paragrafo. Testo Incorniciato Con bordo completo Testo Incorniciato Con bordo incompleto

paragrafo. Testo Incorniciato Con bordo completo Testo Incorniciato Con bordo incompleto Applicare bordi e sfondi ai paragrafi Word permette di creare un bordo attorno ad un intera pagina o solo attorno a paragrafi selezionati. Il testo risulta incorniciato in un rettangolo completo dei quattro

Dettagli

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. 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

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000

lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Capittol lo 2 Visualizzazione 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Nel primo capitolo sono state analizzate le diverse componenti della finestra di Word 2000: barra del titolo, barra dei menu,

Dettagli

BANNER TOP. Dimensione 140x60 BANNER

BANNER TOP. Dimensione 140x60 BANNER BANNER BANNER TOP Il banner è situato in alto, al di sotto dell'header. La categoria TOP prevede 6 posizioni allineate orizzontalmente per l'intera larghezza della pagina. Offre un'immediata visualizzazione

Dettagli

Versione aggiornata al 11.11.2014

Versione aggiornata al 11.11.2014 Word Processing Versione aggiornata al 11.11.2014 A cura di Massimiliano Del Gaizo Massimiliano Del Gaizo Pagina 1 SCHEDA (RIBBON) HOME 1. I L G R U P P O C A R AT T E R E Word ci offre la possibilità,

Dettagli

LOGO ISTITUTI ITALIANI DI CULTURA

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

Dettagli

Microsoft Word. Nozioni di base

Microsoft Word. Nozioni di base Microsoft Word Nozioni di base FORMATTARE UN DOCUMENTO Gli stili Determinano l aspetto dei vari elementi di testo di un documento Consistono in una serie di opzioni (predefinite o personalizzate) salvate

Dettagli

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css. Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,

Dettagli

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat

Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat www.dimi.uniud.it/burigat File HTML e tag Un file HTML non è nient'altro che un puro file di testo al cui interno sono presenti delle

Dettagli

Eccellere. nell innovazione

Eccellere. nell innovazione Eccellere nell innovazione Cos è la creatività? Per Monnalisa rappresenta la leva competitiva per eccellenza, da preservare e valorizzare come una delle componenti chiave del patrimonio intangibile dell

Dettagli

Il foglio elettronico

Il foglio elettronico Il foglio elettronico Foglio di calcolo, Spreadsheet in inglese, Permette di elaborare DATI NUMERICI. E una TABELLA che contiene numeri che possono essere elaborati con FUNZIONI matematiche e statistiche.

Dettagli

Modulistica. Giugno 2007. Manuale di Identità Visiva Sapienza Università di Roma

Modulistica. Giugno 2007. Manuale di Identità Visiva Sapienza Università di Roma Modulistica Giugno 2007 Modulistica. Stampati per corrispondenza. Linea operativa Carta intestata Formato: 210x297 mm. Marchio/Logo: PMS 202 EC. Carta: Fedrigoni Splendorgel Extrawhite 100/115 gr/m 2 o

Dettagli

Indice generale. Prefazione alla prima edizione...xvii. Introduzione...xix. Capitolo 1 Gli standard e i CSS... 1

Indice generale. Prefazione alla prima edizione...xvii. Introduzione...xix. Capitolo 1 Gli standard e i CSS... 1 Indice generale Prefazione alla prima edizione...xvii Introduzione...xix Organizzazione dell opera...xx I capitoli...xx Le appendici...xxi Materiale online...xxi A chi si rivolge il libro...xxi Prerequisiti...xxii

Dettagli

Città di TREVIGLIO IMMAGINE COORDINATA. Manuale d uso e linee guida per l'identità visiva

Città di TREVIGLIO IMMAGINE COORDINATA. Manuale d uso e linee guida per l'identità visiva IMMAGINE COORDINATA Manuale d uso e linee guida per l'identità visiva L intelligenza è la capacità di adattarsi al cambiamento. Stephen Hawking (matematico, fisico e cosmologo britannico) Concept, testi,

Dettagli

Utilizzo dei CSS: regole

Utilizzo dei CSS: regole Tutorial per siti scolastici accessibili con editor web open source Utilizzo dei CSS: regole Adotta un template CSS - Regole pag. - 1 Autore Questa guida è stata realizzata da Gianfranco Bilotti e fa parte

Dettagli

PROGRAMMA Oratorio di San Filippo Neri. gennaio / marzo 2011. incontri, concerti, rassegne, spettacoli

PROGRAMMA Oratorio di San Filippo Neri. gennaio / marzo 2011. incontri, concerti, rassegne, spettacoli PROGRAMMA Oratorio di San Filippo Neri gennaio / marzo 2011 incontri, concerti, rassegne, spettacoli 3 3 4 5 6 7 8 8 9 9 10 incontri, concerti, spettacoli Italiani! Immagini come sogni Ti racconto una

Dettagli

Word Processor: WORD (livello base) Classificazione

Word Processor: WORD (livello base) Classificazione Parte 5 Word Processor: WORD (livello base) Elementi di Informatica - AA 2008/2009 - MS Word 1 di 60 Classificazione Esistono diversi strumenti per la realizzazione di documenti testuali: Editor di testo

Dettagli

Realizzare il layout di un sito web senza utilizzare frame e tabelle

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

Dettagli

Digital Identity Ferrovie dello Stato Corporate. Versione 1.0 Aprile 2011

Digital Identity Ferrovie dello Stato Corporate. Versione 1.0 Aprile 2011 Digital Identity Ferrovie dello Stato Corporate Aprile 2011 Indice 1 Premessa 4 Footer 2 3 Scopo del manuale Utilizzo del manuale Layout di pagina Colori Visual Icone Gabbia e misure Griglia modulare Layout

Dettagli

Programma Corso Office ECDL

Programma Corso Office ECDL Programma Corso Office ECDL FASE DI AULA PRIMA LEZIONE MICROSOFT WORD Concetti generali: Primi passi Aprire (e chiudere) Microsoft Word. Aprire uno o più documenti. Creare un nuovo documento (predefinito

Dettagli

Tutta un altra storia

Tutta un altra storia Rival srl _ Tutta un altra storia RIVAL ha una storia lunga 45 anni e il suo nome nasce dalle parole che ne spiegano l originale oggetto societario: Rivestimenti Industriali, 1969 2014 Vernici ed Affini

Dettagli

Multifunzionalità in bianco e nero con i vantaggi del colore!

Multifunzionalità in bianco e nero con i vantaggi del colore! Multifunzionalità in bianco e nero con i vantaggi del colore! La produttività del bianco e nero e l innovazione del colore, in una sola attrezzatura Oggi gli uffici aziendali devono garantire massima produttività

Dettagli

Avviare il computer e collegarsi in modo sicuro utilizzando un nome utente e una password.

Avviare il computer e collegarsi in modo sicuro utilizzando un nome utente e una password. Uso del computer e gestione dei file Primi passi col computer Avviare il computer e collegarsi in modo sicuro utilizzando un nome utente e una password. Spegnere il computer impiegando la procedura corretta.

Dettagli

Word Processor: WORD. Classificazione

Word Processor: WORD. Classificazione Parte 5 Word Processor: WORD Classificazione Esistono diversi strumenti per la realizzazione di documenti di testuali: Editor di testo (Es: Blocco Note) Word Processor (Es: MS Word, Open Office ) Applicazioni

Dettagli

PROGETTAZIONE DI UN SITO WEB

PROGETTAZIONE DI UN SITO WEB PROGETTAZIONE DI UN SITO WEB UN BUON SITO DEVE AVERE DUE CARATTERISTICHE: USABILITA ACCESSIBILITA Navigazione fluida con contenuti facilmente reperibili. Organizzazione dei contenuti e predisposizione

Dettagli

Corporate Design Manual Hotel Granbaita. www.hotelgranbaita.com/corporate versione agosto 2012. Gardena.Net

Corporate Design Manual Hotel Granbaita. www.hotelgranbaita.com/corporate versione agosto 2012. Gardena.Net Corporate Design Manual Hotel Granbaita www.hotelgranbaita.com/corporate versione agosto 2012 Gardena.Net Introduzione Il Corporate Design è la guida che descrive e caratterizza lo stile di un attività

Dettagli

&RUVRGLLQWURGX]LRQH DOO LQIRUPDWLFD. Microsoft Word. Tutorial

&RUVRGLLQWURGX]LRQH DOO LQIRUPDWLFD. Microsoft Word. Tutorial &RUVRGLLQWURGX]LRQH DOO LQIRUPDWLFD Microsoft Word Tutorial Sommario Introduzione Formattazione del documento Formattazione della pagina Layout di pagina particolari Personalizzazione del documento Integrazione

Dettagli

HTML+XML= XHTML. Che cos è l XHTML

HTML+XML= XHTML. Che cos è l XHTML HTML+XML= XHTML Il ritorno al futuro del WEB A cura di Barbara Lotti Che cos è l XHTML Nel gennaio del 2000 il W3C ha rilasciato, anziché una nuova versione, una riformulazione dell HTML come applicazione

Dettagli

Introduzione. Guida ai fogli di stile (Standard CSS 2) Demis Ballis

Introduzione. Guida ai fogli di stile (Standard CSS 2) Demis Ballis <demis@dimi.uniud.it> Introduzione Guida ai fogli di stile (Standard CSS 2) Demis Ballis Questo documento è liberamente tratto dalla guida ai CSS di base di Cesare Lamanna, disponibile nella sua versione

Dettagli

Lezione 1: Introduzione Struttura e aspetto di PowerPoint Sviluppare una presentazione. Patente Europea di Informatica ECDL Modulo 6

Lezione 1: Introduzione Struttura e aspetto di PowerPoint Sviluppare una presentazione. Patente Europea di Informatica ECDL Modulo 6 Patente Europea di Informatica ECDL Modulo 6 Lezione 1: Introduzione Struttura e aspetto di PowerPoint Sviluppare una presentazione Anno 2009/2010 Syllabus 5.0 Microsoft PowerPoint è un software progettato

Dettagli

Germano Pettarin E-book per la preparazione all ECDL ECDL Modulo 3 Elaborazione testi Word Argomenti del Syllabus 5.0

Germano Pettarin E-book per la preparazione all ECDL ECDL Modulo 3 Elaborazione testi Word Argomenti del Syllabus 5.0 Germano Pettarin E-book per la preparazione all ECDL ECDL Modulo 3 Elaborazione testi Word Argomenti del Syllabus 5.0 G. Pettarin ECDL Modulo 3: Word 2 Modulo 3 Elaborazione testi Word G. Pettarin ECDL

Dettagli

Salone Franchising Milano

Salone Franchising Milano PMI2USA Salone Franchising Milano - International Retail Expo Salone Franchising Milano International Retail Expo Salone Franchising Milano: la prima fiera in Italia per sviluppare il tuo business Date

Dettagli

Territorio. il Marketing. Sistema Territorio e Passaparola. del PARTECIPAZIONE INNOVAZIONE SVILUPPO DEL TERRITORIO

Territorio. il Marketing. Sistema Territorio e Passaparola. del PARTECIPAZIONE INNOVAZIONE SVILUPPO DEL TERRITORIO marketing, comunicazione 1979-2004 25 ANNI DI COMUNICAZIONE PUBBLICA il Marketing Territorio del PARTECIPAZIONE INNOVAZIONE SVILUPPO DEL TERRITORIO Sistema Territorio e Passaparola Il territorio è un Sistema

Dettagli

Relazione sulla verifica accessibilità

Relazione sulla verifica accessibilità Relazione sulla verifica accessibilità Sito web: www.comune.stresa.vb.it Premessa Il presente rapporto e l effettiva attività di controllo requisiti per l accessibilità, sono stati effettuati seguendo

Dettagli

In questa lezione, vedremo come modificare alcune proprietà-valore, utilizzando le spiegazioni del codice direttamente sul progetto del nostro sito.

In questa lezione, vedremo come modificare alcune proprietà-valore, utilizzando le spiegazioni del codice direttamente sul progetto del nostro sito. Corso html 5. Di Roberto Abutzu. Lezione 18 "CSS - Formattazione testo ed elementi". Formattazione css base degli elementi. In questa lezione, vedremo come modificare alcune proprietà-valore, utilizzando

Dettagli

UTILIZZO DI WORD PROCESSOR

UTILIZZO DI WORD PROCESSOR UTILIZZO DI WORD PROCESSOR (ELABORAZIONE TESTI) Laboratorio Informatico di base A.A. 2013/2014 Dipartimento di Scienze Aziendali e Giuridiche Università della Calabria Dott. Pierluigi Muoio (pierluigi.muoio@unical.it)

Dettagli

MANUALE PER LA PRODUZIONE DI TESTI PER IL WEB

MANUALE PER LA PRODUZIONE DI TESTI PER IL WEB MANUALE PER LA PRODUZIONE DI TESTI PER IL WEB Questo manuale fornisce una guida tecnica per scrivere testi da copiare all interno di siti web minimizzando il lavoro necessario per adattare tali testi affinché

Dettagli

Cos è un word processor

Cos è un word processor Cos è un word processor è un programma di videoscrittura che consente anche di applicare formati diversi al testo e di eseguire operazioni di impaginazione: font diversi per il testo impaginazione dei

Dettagli

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:

Dettagli

VALUE SMART. Manuale operativo d utilizzo del marchio Linee guida per l uso dell identità visiva del marchio Smart Value

VALUE SMART. Manuale operativo d utilizzo del marchio Linee guida per l uso dell identità visiva del marchio Smart Value dsdas Manuale operativo d utilizzo del marchio Linee guida per l uso dell identità visiva del marchio Smart Value Linee guida per l uso dell identità visiva del marchio Smart Value 1 Realizzazione Altravia

Dettagli

Il nuovo entrato nella gamma Bosch: Sistemi sterzanti per automobili e veicoli commerciali

Il nuovo entrato nella gamma Bosch: Sistemi sterzanti per automobili e veicoli commerciali Il nuovo entrato nella gamma Bosch: Sistemi sterzanti per automobili e veicoli commerciali Sempre sicuro sulla carreggiata con i sistemi ed i componenti sterzanti Bosch Maggiori aree Sterzo Sterzo Sterzo

Dettagli

Word Elaborazione testi

Word Elaborazione testi I seguenti appunti sono tratti da : Consiglio Nazionale delle ricerche ECDL Test Center modulo 3 Syllabus 5.0 Roberto Albiero Dispense di MS Word 2003 a cura di Paolo PAVAN - pavan@netlink.it Word Elaborazione

Dettagli

CSS Posizionamento degli elementi

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

Dettagli

Applicazioni Web 2013/14

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

Dettagli

Microsoft Access - dispensa didattica ECDL Modulo 5 - a cura di Antonino Terranova PAG 1

Microsoft Access - dispensa didattica ECDL Modulo 5 - a cura di Antonino Terranova PAG 1 Microsoft Access - Determinare l input appropriato per il database...2 Determinare l output appropriato per il database...2 Creare un database usando l autocomposizione...2 Creare la struttura di una tabella...4

Dettagli

Foglio Elettronico. Creare un nuovo foglio elettronico Menu File Nuovo 1 clic su Cartella di lavoro vuota nel riquadro attività

Foglio Elettronico. Creare un nuovo foglio elettronico Menu File Nuovo 1 clic su Cartella di lavoro vuota nel riquadro attività Foglio Elettronico Avviare il Programma Menu Start Tutti i programmi Microsoft Excel Pulsanti 2 clic sull icona presente sul Desktop Chiudere il Programma Menu File Esci Pulsanti Tasto dx 1 clic sul pulsante

Dettagli

Introduzione alla realizzazione di pubblicazioni personalizzate professionali

Introduzione alla realizzazione di pubblicazioni personalizzate professionali Introduzione alla realizzazione di pubblicazioni personalizzate professionali Vantaggi di Publisher Publisher non consente solo di creare notiziari o brochure, ma fornisce anche modelli predefiniti per

Dettagli

Foglio elettronico. OpenOffice.org Calc 1.1.3

Foglio elettronico. OpenOffice.org Calc 1.1.3 Foglio elettronico OpenOffice.org Calc 1.1.3 PRIMI PASSI CON IL FOGLIO ELETTRONICO Aprire il programma Menu Avvio applicazioni Office OpenOffice.org Calc. Chiudere il programma Menu File Esci. Pulsanti

Dettagli

FONDAMENTI DI INFORMATICA. 3 Elaborazione testi

FONDAMENTI DI INFORMATICA. 3 Elaborazione testi FONDAMENTI DI INFORMATICA 3 Elaborazione testi Microsoft office word Concetti generali Operazioni principali Formattazione Oggetti Stampa unione Preparazione della stampa Schermata iniziale di Word Come

Dettagli

PROGRAMMA Oratorio di San Filippo Neri. aprile / giugno 2011. incontri, concerti, rassegne, spettacoli

PROGRAMMA Oratorio di San Filippo Neri. aprile / giugno 2011. incontri, concerti, rassegne, spettacoli PROGRAMMA Oratorio di San Filippo Neri aprile / giugno 2011 incontri, concerti, rassegne, spettacoli 3 4 6 7 7 8 9 9 10 3 4 5 5 6 8 incontri, concerti, spettacoli Maserati-OSCA Concerto in onore di S.

Dettagli

Andrea Maioli Instant Developer: guida all uso

Andrea Maioli Instant Developer: guida all uso Andrea Maioli Instant Developer: guida all uso 11.8 L editor di temi grafici A partire dalla versione 11.5, Instant Developer contiene uno strumento di aiuto alla personalizzazione dei temi grafici e degli

Dettagli

Grafica: creare pulsanti con i css.

Grafica: creare pulsanti con i css. Grafica: creare pulsanti con i css. L'articolo originale in lingua inglese Graphics: making buttons with css proviene dal sito eosdev.com ed è stato tradotto e riprodotto per gentile concessione dell'autore.

Dettagli

Chiudere il Programma Menu File Esci Pulsanti 1 clic sul pulsante Tasto dx 1 clic sulla barra del titolo Chiudi Tastiera Alt+F4

Chiudere il Programma Menu File Esci Pulsanti 1 clic sul pulsante Tasto dx 1 clic sulla barra del titolo Chiudi Tastiera Alt+F4 Foglio Elettronico PRIMI PASSI CON IL FOGLIO ELETTRONICO Avviare il Programma Menu Start Tutti i programmi Microsoft Excel Pulsanti 2 clic sull icona presente sul Desktop Chiudere il Programma Menu File

Dettagli

MS Word per la TESI. Barra degli strumenti. Rientri. Formattare un paragrafo. Cos è? Barra degli strumenti

MS Word per la TESI. Barra degli strumenti. Rientri. Formattare un paragrafo. Cos è? Barra degli strumenti MS Word per la TESI Barra degli strumenti Cos è? Barra degli strumenti Formattazione di un paragrafo Formattazione dei caratteri Gli stili Tabelle, figure, formule Intestazione e piè di pagina Indice e

Dettagli

Risultati della validazione (Linee Guida: Stanca) Report relativo agli errori ( individuati, 0 Istanze): Congratulazioni! Nessun errore individuato.

Risultati della validazione (Linee Guida: Stanca) Report relativo agli errori ( individuati, 0 Istanze): Congratulazioni! Nessun errore individuato. 09/02/2014 22:38 URL del file sorgente: http://lnx.isusanpaolo.it/joomlafap2/ Titolo del file sorgente: Home Risultati della validazione (Linee Guida: Stanca) Report relativo agli errori ( individuati,

Dettagli

Settaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template.

Settaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template. I TEMI PREDEFINITI (TEMPLATE) Scelta del tema I temi predefiniti di wordpress sono la base di un sito che usa un utente che per ragioni pratiche o per incapacità non può creare un sito usando solo codice

Dettagli

Dipartimento di Storia, Società e Studi sull Uomo Università del Salento Ing. Maria Grazia Celentano Mariagrazia.celentano@gmail.

Dipartimento di Storia, Società e Studi sull Uomo Università del Salento Ing. Maria Grazia Celentano Mariagrazia.celentano@gmail. Dipartimento di Storia, Società e Studi sull Uomo Università del Salento Ing. Maria Grazia Celentano Mariagrazia.celentano@gmail.com Indice: La finestra di Word Barra del titolo Barra dei menu Barra degli

Dettagli

Microsoft Word -II Lezione

Microsoft Word -II Lezione Microsoft Word -II Lezione Approfondiamo alcuni aspetti di Word e in particolare: Disegno e modifica di oggetti come forme, linee, frecce etc. Gestione delle tabelle Impostazione e cura dell estetica di

Dettagli

Guida Joomla. di: Alessandro Rossi, Flavio Copes

Guida Joomla. di: Alessandro Rossi, Flavio Copes Guida Joomla di: Alessandro Rossi, Flavio Copes Grafica e template 1. 15. La grafica e i template Personalizzare l'aspetto del sito aggiungendo nuovi template e customizzandoli 2. 16. Personalizzare il

Dettagli

Comandi di Excel. Tasti di scelta rapida da Barra delle Applicazioni MAIUSC+F12 CTRL+N. dall utente MAIUSC+F1 ALT+V+Z

Comandi di Excel. Tasti di scelta rapida da Barra delle Applicazioni MAIUSC+F12 CTRL+N. dall utente MAIUSC+F1 ALT+V+Z 2.1 Primi passi con Excel 2.1.1 Introduzione Excel è il foglio elettronico proposto dalla Microsoft ed, in quanto tale, fornisce tutte le caratteristiche per la manipolazione dei dati, realizzazioni di

Dettagli

SOMMarIO INIZIARE. iii. Adobe dreamweaver CS5 ClASSroom in A book

SOMMarIO INIZIARE. iii. Adobe dreamweaver CS5 ClASSroom in A book SOMMarIO INIZIARE XI Informazioni su questo libro................................xi Prerequisiti.................................................xi Installare il programma....................................

Dettagli

XSL: extensible Stylesheet Language

XSL: extensible Stylesheet Language XSL: extensible Stylesheet Language XSL è un insieme di tre linguaggi che forniscono gli strumenti per l elaborazione e la presentazione di documenti XML in maniera molto flessibile. I tre linguaggi devono

Dettagli

I 5 - M A F A L D A B A C C A R O a. a. 2 0 1 1 / 2 0 1 2 I I a n n u a l i t à. Compito 2.

I 5 - M A F A L D A B A C C A R O a. a. 2 0 1 1 / 2 0 1 2 I I a n n u a l i t à. Compito 2. I 5 - M A F A L D A B A C C A R O a. a. 2 0 1 1 / 2 0 1 2 I I a n n u a l i t à T 0 4 Compito 2. P R II N C II P II D II G R A F II C A E L AY O U T Si immagini di dover progettare il layout grafico di

Dettagli

MODULO 3. Microsoft Excel. TEST ED ESERCIZI SU: http://www.informarsi.net/ecdl/excel/index.php

MODULO 3. Microsoft Excel. TEST ED ESERCIZI SU: http://www.informarsi.net/ecdl/excel/index.php MODULO 3 Microsoft Excel TEST ED ESERCIZI SU: http:///ecdl/excel/index.php Foglio Elettronico - SpreadSheet Un foglio elettronico (in inglese spreadsheet) è un programma applicativo usato per memorizzare

Dettagli

Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine

Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine www.comune.udine.it relazione a cura di Fabrizio Chittaro fchittaro@gmail.com

Dettagli

G. Pettarin ECDL Modulo 3: Word 84

G. Pettarin ECDL Modulo 3: Word 84 G. Pettarin ECDL Modulo 3: Word 84 La scheda vai a La scheda Vai è probabilmente la meno utilizzata delle tre: permette di spostarsi in un certo punto del documento, ad esempio su una determinata pagina

Dettagli

INFORMATICA settembre Docente Salvatore Mosaico 2ASA corso HTML(parte 2)

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

Dettagli

Prova di informatica & Laboratorio di Informatica di Base

Prova di informatica & Laboratorio di Informatica di Base Prova di informatica & Laboratorio di Informatica di Base Prof. Orlando De Pietro Programma L' hardware Computer multiutente e personal computer Architettura convenzionale di un calcolatore L unità centrale

Dettagli

Esercitazione n. 11: Sito web con Kompozer

Esercitazione n. 11: Sito web con Kompozer + Strumenti digitali per la comunicazione A.A 2013/14 Esercitazione n. 11: Sito web con Kompozer Scopo: Creare un sito Web che fornisce informazioni su un negozio di articoli sportivi chiamato Championzone.

Dettagli

Microsoft Excel. Sommario. Cosa è un foglio elettronico. L interfaccia Utente. La cartella di Lavoro. Corso di introduzione all informatica

Microsoft Excel. Sommario. Cosa è un foglio elettronico. L interfaccia Utente. La cartella di Lavoro. Corso di introduzione all informatica Corso di introduzione all informatica Microsoft Excel Gaetano D Aquila Sommario Cosa è un foglio elettronico Caratteristiche di Microsoft Excel Inserimento e manipolazione dei dati Il formato dei dati

Dettagli

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti EUROPEAN COMPUTER DRIVING LICENCE WEBSTARTER - Versione 1.5 Copyright 2009 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

Disegnare il Layout. www.vincenzocalabro.it 1

Disegnare il Layout. www.vincenzocalabro.it 1 Disegnare il Layout www.vincenzocalabro.it 1 Il problema dell interfaccia Una buona interfaccia deve assolvere a diverse funzioni: far percepire i contenuti permettere di individuare le principali aree

Dettagli

Sommario. Prefazione... 15. Parte 1 - Introduzione

Sommario. Prefazione... 15. Parte 1 - Introduzione Sommario Prefazione... 15 Parte 1 - Introduzione 1.1 L interfaccia utente e le operazioni più comuni... 19 La scheda File...24 Ridurre la barra multifunzione...29 Personalizzare la barra multifunzione...29

Dettagli

Esercitazione n. 10: HTML e primo sito web

Esercitazione n. 10: HTML e primo sito web + Strumenti digitali per la comunicazione A.A 0/4 Esercitazione n. 0: HTML e primo sito web Scopo: Creare un semplice sito web con Kompozer. Il sito web è composto da una home page, e da altre due pagine

Dettagli