CSS / BOX MODEL e PSEUDOCLASSI. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
|
|
|
- Maria Teresa Quaranta
- 6 anni fa
- Visualizzazioni
Transcript
1 CSS / BOX MODEL e PSEUDOCLASSI LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
2 CSS: RIPRESA DELLA SCORSA LEZIONE CSS: servono per separare il contenuto dal visual per questo è preferibile usare i fogli di stile esterni (tag <link> all interno del tag <head>). I selettori servono a determinare gli oggetti a sui si applicano le dichiarazioni definite all interno della regola possono essere di tre tipi dal più generico al più specificio (il più specifico è più forte) TAG HTML / selettore universale * {color: black;} e tag p {color: black;} CLASSI /.nero {color: black;} IDENTIFICATORI / #footer {color: black;} Priorità regole: Ordine nel codice sorgente < Specificità < Importanza LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 2
3 CSS / TAG <DIV> E CSS Ricalcare la griglia d impaginazione grazie ai tag DIV e al CSS LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 3
4 UNA STRUTTURA PER I CONTENUTI Il linguaggio di marcatura (HTML) ha il compito di caratterizzare e inserire i contenuti (titoli, paragrafi, liste, collegamenti, tabelle, immagini ecc.) realizzare la struttura in cui inserire i contenuti stessi Per realizzare la struttura è opportuno raggruppare gli elementi in modo da trattarli come un oggetto unico: l elemento chiave è il tag <div>. Il tag <div> è un contenitore generico. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 4
5 LA DISPOSIZIONE DEGLI ELEMENTI NELL HTML Una pagina HTML non è altro che un insieme di blocchi rettangolari. Il flusso dell informazione è sempre verticale. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 5
6 LA DISPOSIZIONE DEGLI ELEMENTI NELL HTML La visualizzazione di un documento con CSS avviene identificando lo spazio di visualizzazione di ciascun elemento del documento. Il flusso di dati è sempre dall alto verso il basso. Ogni elemento è definito da una scatola o box all interno del quale sta il contenuto. I box sono in relazione agli altri come segue: I box degli elementi contenuti stanno dentro al box dell elemento genitore. Flusso normale di tipo blocco: i box di tipo blocco sono posti uno sopra l altro in successione verticale (come paragrafi). L elemento che contiene i vari box, assume la dimensione massima data dalla somma delle dimensioni degli elementi in esso contenuti La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo contengono. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 6
7 ELEMENTI BLOCCO VS IN LINEA Un elemento block-level (h1, h2..., p, div...) è un elemento che forma un blocco separato, può contenere elementi block-level e elementi inline e gli si possono attribuire delle dimensioni. Gli elementi block-level vengono disposti verticalmente, formando una nuova riga (a meno che questo non venga dichiarato float, posizionato o modificandone la sua natura con la proprietà display). Un elemento block level di dimensioni non specificate occupa tra margini, bordi, padding e contenuto, tutta la larghezza messa a disposizione del suo box contenitore. In verticale occuperà l altezza necessaria al suo contenuto. Un elemento in linea (img, span...) è un elemento che rimane in linea con il resto del contenuto: può contenere solo altri elementi inline. Ad un elemento inline (a meno che questo non venga dichiarato float, posizionato o modificandone la sua natura con la proprietà display) non si possono attribuire delle dimensioni. Elementi inline adiacenti vengono disposti orizzontalmente, come se fossero sulla stessa linea di testo. Un elemento inline occuperà sia in orizzontale che in verticale l altezza necessaria al suo contenuto. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 7
8 BOX MODEL Ogni blocco o box è caratterizzato da: Larghezza dello spazio per i contenuti (width) Altezza dello spazio per i contenuti (height) Spazio fra contenuti e bordi (padding) Bordo (border) Spazio fra il bordo e gli altri oggetti della pagina (margin) width height Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 8
9 BOX MODEL Esempio: div { width: 300px; height: 100px; padding: 20px; border: 20px; margin: 20px; } height width LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 9
10 LARGHEZZA E ALTEZZA La larghezza (width) e la altezza (height) del box possono essere espresse: In percentuali rispetto alle dimensioni del box contenitore Tramite le unità di misura px Tramite il valore auto Se non si specifica la larghezza (width) dei contenuti del box, questo si allargherà (margini compresi) per riempire tutto lo spazio a sua disposizione. Se non si specifica la altezza (height) dei contenuti del box, questo si espanderà in verticale il minimo possibile per ospitare gli oggetti al suo interno. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 10
11 LARGHEZZA E ALTEZZA Quando si specifica la larghezza di un box, questa diviene indipendente dalla dimensione effettiva dei suoi contenuti. È possibile anche indicare una larghezza minima e una larghezza massima tramite le proprietà min-width e max-width. Quando si specifica l altezza di un box questo non si espanderà per ospitare eventuali contenuti che richiedono maggiore spazio. È possibile anche indicare una altezza minima e una altezza massima tramite le proprietà min-height e max-height. Quando espressa in %, l altezza di un box si riferisce all altezza esplicitamente del box genitore, quando definita tramite la proprietà height. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 11
12 LARGHEZZA E ALTEZZA Nel computo dell ingombro totale di un box, si deve tenere conto dei padding e del bordo! Quindi se un box deve occupare 300px e ha 20 px di padding destro e 20 px di padding sinistro e un bordo di 5 px per lato, dichiareremo padding-left: 20px; padding-right: 20px; border-left: 5px; border-right: 5px; width: 250px; = 300px TOTALI LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 12
13 PADDING Il padding è la distanza fra i contenuti e i bordi di un box (una sorta di imbottitura) I padding possono essere specificati: Individualmente A coppie (top/bottom, right/left) Globalmente Le unità di misura possono essere valori percentuali % o valori fissi (in pixel) Per specificare i singoli padding è possibile utilizzare le proprietà padding-top, padding-right, padding-bottom, padding-left Esempio: div { padding-left:10px; padding-top:20px } LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 13
14 PADDING I quattro padding possono essere specificati anche attraverso la sintassi abbreviata. div { padding: 10px 5px 0 20px; } I padding risultano specificati in senso orario: top, right, bottom, left. Attraverso la sintassi abbreviata, possiamo specificare anche le coppie di padding top/bottom e right/left: div { padding: 10px 20px; } Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente: div { padding: 10px; } LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 14
15 BORDER I bordi (border) sono caratterizzati da tre aspetti: stile spessore colore Questi aspetti possono essere definiti separatamente con: border-style (border-top-style, ) / border-width (border-top-width, ) / border-color (border-top-color, ) Sono ammesse le dichiarazioni compatte per i 4 lati come per i padding: (border-style: <stile> <stile> <stile> <stile>) Per definire contemporaneamente i tre aspetti si usa la seguente sintassi: border: <spessore> <stile> <colore> border-top: <spessore> <stile> <colore> LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 15
16 BORDER Gli stili a disposizione sono: solid (linea continua singola); dotted (punteggiato); dashed (tratteggiato); double (doppia linea continua è necessario uno spessore di almeno 3px per ottenere l effetto desiderato); groove (scavato); ridge (effetto opposto a groove, il bordo appare sbalzato); inset (incastonato, l effetto grafico equivale a un pulsante premuto); outset (effetto opposto a inset, l effetto grafico equivale a un pulsante non ancora premuto). none (nessun bordo, valore predefinito); LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 16
17 BORDER Lo stile predefinito è none, dunque se non si specifica lo stile del bordo questo non sarà comunque mostrato. Lo spessore border-width del bordo può essere espresso attraverso le varie unità di lunghezza (solitamente in px) i tre valori thin, medium, thick, N.B. le unità percentuali non sono ammesse Il colore, se non specificato tramite border-color, corrisponde a quello del testo usato nel box. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 17
18 MARGIN I margin è la distanza i bordi di un box e gli altri box I margin possono essere specificati: Individualmente A coppie (top/bottom, right/left) Globalmente I margin possono essere espressi In percentuali rispetto alle dimensioni del box contenitore Tramite le unità di misura px Tramite il valore auto LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 18
19 MARGIN Per specificare i singoli margin è possibile utilizzare le proprietà margin-top, margin-right, margin-bottom, margin-left Esempio: div { margin-left:10px; margin-top:20px } I quattro margin possono essere specificati anche attraverso la sintassi abbreviata. Esempio: div { margin: 10px 5px 0 20px; } I margin risultano specificati in senso orario: top, right, bottom, left. Attraverso la sintassi abbreviata, possiamo specificare anche le coppie di margin top/bottom e right/left: Esempio: div { margin: 10px 20px; } Infine è possibile specificare un solo valore per tutti e quattro i lati contemporaneamente: Esempio: div { margin: 10px; } LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 19
20 MARGIN Quando impostati sul valore auto, i margini laterali determinano la centratura orizzontale del box a cui i margini sono applicati. Quando impostati sul valore auto, i margini superiore e inferiore assumono il valore che il browser assegna loro normalmente. Nelle specifiche CSS non è prevista la centratura verticale dei blocchi. A differenza del padding, la proprietà margin accetta anche valori negativi. Per esempio div { margin-top: -20px; } div { margin: -60px auto 20px auto; } LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 20
21 MARGIN Quando due o più margini sono adiacenti, ovverosia sono non separati da bordi o padding, questi collassano in un unico margine: <div id= box-1 > </div> <div id= box-2 > </div> #box-1 { margin: 10px; } #box-2 { margin: 20px; } I margini non collassano quando sono separati da un bordo o dal padding: <p>lorem ipsum dolor </p> <div><p>quisque imperdiet </p></div> div{border:solid;margin:0;} p{margin:1em 0;background:#CCC;color:#000;} div p{margin:10px;} I margini di blocchi flottanti o dei blocchi posizionati in modo assoluto, non collassano in nessun caso. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 21
22 BOX MODEL Margini: l area che separa un box dall altro, necessariamente trasparente. margin-top, margin-bottom, margin-left, margin-right: dimensioni del margine del box. Border: l area ove visualizzare un bordo per il box. border-top, border-bottom, border-left, border-right, border-width, border-color: dimensioni ed aspetto del bordo. border-style: può assumere come valori none, dotted, dashed, solid, double, groove, ridge, inset, outset. Padding: l area di respiro tra il bordo del box ed il contenuto. Ha il colore dello sfondo del contenuto. padding-top, padding-bottom, padding-left, padding-right: dimensioni del padding. Content: l area dove sta il contenuto dell elemento. background-color, background-image, background-repeat, background-attachment, background-position: colore, immagine dello sfondo del box. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 22
23 CSS3 / BACKGROUND-ORIGIN / BACKGROUND-CLIP background-origin specifica relativamente a quale area di un box avviene il posizionamento di un immagine di sfondo. padding-box border-box content-box; background-clip specifica l area di un box su cui si estenderà lo sfondo definito nel foglio di stile, si tratti di un immagine o di un colore solido. padding-box border-box content-box; LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 23
24 OVERFLOW Quando i contenuti eccedono le dimensioni del blocco è possibile definire il comportamento del blocco stesso attraverso la proprietà overflow. La proprietà overflow può assumere i seguenti valori: visible (valore predefinito) hidden scroll auto Il valore visible indica che i contenuti vanno mostrati normalmente. I contenuti dovrebbero essere mostrati senza alterare la dimensione del contenitore. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 24
25 OVERFLOW Il valore scroll indica che i contenuti vanno tagliati, se necessario. Le barre di scorrimento devono comunque apparire. Il valore hidden indica che i contenuti vanno tagliati e non devono apparire barre di scorrimento. Il valore auto indica che i contenuti vanno tagliati, se necessario. Le barre di scorrimento devono apparire dove necessario. La dimensione del div non è alterata. Per esempio: div { overflow: auto; } LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 25
26 DISPLAY display è una proprietà importante CSS per il controllo dell impaginazione. Ciascun elemento ha un valore predefinito di display a seconda del tipo di elemento di cui si tratta. Il valore predefinito per la maggior parte degli elementi è solitamente block oppure inline. Altri valori comuni sono: display: inline-block; gli elementi inline-block sono come gli inline ma in più possono avere una larghezza e una altezza. display: none; farà in modo che la pagina venga disegnata come se l elemento non esistesse; display: inherit; erediterà la proprietà dal progenitore; Per esempio li { display: inline-block; } Per un elenco degli altri valori della proprietà display: https: / LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 26
27 MENU CON ELENCO NON ORDINATO + DISPLAY:INLINE; La dichiarazione display: inline; si utilizza molto per orientare le voci di un menu, realizzato con una lista non odinata ( <ul> e rispettivi <li>) Di solito, per un menu orizzontale, si dichiara una lista non ordinata Si dichiarano le voci di menu ( home, chi siamo, dove, contatti ) come dei list item. Si associa ad un elemento li e ul il rispettivo selettore con la property display:inline; ul li { display:inline; padding:10px; margin:20px; background-color: #CCCCCC; } LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 27
28 MENU, LINK E PSEUDOCLASSI Quando si usano i CSS per gestire dei collegamenti è possibile sfruttare come selettori css le pseudo-classi a:link, a:visited, a:focus, a:hover, a:active per creare effetti di roll-over al passaggio del mouse, o evidenziare un azione. Per funzionare correttamente devono essere inseriti in questo ordine: 1. a:link / indica i collegamenti non visitati. La pseudo-classe :link definisce uno stato di un link (colore quando non è stato visitato). 2. a:visited / indica i collegamenti visitati. 3. a:focus / indica l elemento che ha il focus (viene usato dagli elementi che accettano eventi dalla tastiera o da altri dispositivi di input). 4. a:hover / il posizionamento del puntatore del mouse sopra un elemento 5. a:active / l attivazione di un elemento (esempio click sull elemento) LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 28
29 MENU, LINK E PSEUDOCLASSI N.B. Posso assegnare un comportamento generico a tutti i link della pagina o a link specifici utilizzando id e classi N.B. Posso assegnare un comportamento solo ad alcuni stati. Esempi di sintassi: a { color: #CC0000; } /* assegno un colore a tutti i tag a in tutti gli stati */ a:visited { color: #CCCCCC; } /* assegno un colore allo stato visited */ a:hover { color: #FF0000; } /* assegno un colore allo stato hover */ #menu a:link { color: green; } #menu a:visited { color: red; } #menu a:focus { color: blue; } #menu a:hover { color: orange; } #menu a:active { color: aqua; } LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 29
30 DOMANDE? LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 30
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
Tabelle HTML. Tabelle Un po di notazione.
Tabelle HTML!! Le tabelle in HTML permettono di rappresentare tabelle di dati ", ma anche di formattare del testo, delle immagini, altre tabelle in righe e colonne, possono cioè essere usate per l impaginazione
OBIETTIVI MINIMI Anno scolastico TIC-TIT. 1. Foglio elettronico: funzioni fondamentali (Excel)
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI CLASSI CORSI OBIETTIVI MINIMI Anno scolastico 2010-2011 TIC-TIT OBIETTIVI 1. Foglio elettronico: funzioni fondamentali (Excel) CONTENUTI / tipologia
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
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
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
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
APPUNTI DI HTML (QUARTA LEZIONE)
APPUNTI DI HTML (QUARTA LEZIONE) 1. LA STRUTTURA BASE DELLE TABELLE Le tabelle sono una parte estremamente importante del codice HTML. Sono uno strumento indispensabile per gestire i layout grafici. Immaginiamo
Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne.
Le tabelle Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne. E' difficile? All'inizio costruire le tabelle in HTML
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
Capitolo 18 - Progetto DWG Creazione del layout di stampa
Capitolo 18 - Progetto DWG Creazione del layout di stampa Avviate MasterChef dall icona presente sul vostro Desktop. Nota: Se state utilizzando una versione dimostrativa, una volta caricato il programma,
CSS. Cascading Style Sheets. Regola: selezionatore { proprietà : valore } h1 { color : green; } ul { font-style : italic; } H1 { color : green }
1 2 Foglio di stile Cascading Style Sheets CSS Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Regola: selezionatore
Valori e unità di misura (1)
Valori e unità di misura (1) I valori di una proprietà non vanno mai messi tra virgolette. Uniche eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola (esempio:
L INTERFACCIA GRAFICA DI EXCEL
Dopo l avvio del foglio elettronico apparirà un interfaccia grafica nella quale verrà aperta una nuova cartella di lavoro alla quale il PC assegnerà automaticamente il nome provvisorio di Cartel1. La cartella
CSS font-size: pt, px o em? Che unità di misura utilizzare?
CSS font-size: pt, px o em? Che unità di misura utilizzare? In linea di massima possiamo dire che ogni unità di misura ammessa nei CSS ha una destinazione d'uso precisa: pt I punti (pt) sono l'unità di
Grafici e Pagina web
Grafici e Pagina web Grafici Un grafico utilizza i valori contenuti in un foglio di lavoro per creare una rappresentazione grafica delle relazioni esistenti tra loro. Quando si crea un grafico ogni riga
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
Un grafico utilizza i valori contenuti in un foglio di lavoro per creare una rappresentazione grafica delle relazioni esistenti tra loro;
EXCEL Modulo 3 I Grafici Grafici Un grafico utilizza i valori contenuti in un foglio di lavoro per creare una rappresentazione grafica delle relazioni esistenti tra loro; Quando si crea un grafico ogni
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
Informatica d ufficio
Informatica d ufficio Anno Accademico 2008/2009 Lezione N 3 Microsoft Word - prima parte Microsoft Word E un Word processor,cioè un programma che consente di creare e modificare documenti. Prevede numerose
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
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)
CSS. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
CSS Politecnico di Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola I cascading style sheet I CSS permettono
PROGRAMMA DEL CORSO ADOBE DREAMWEAVER CS5
PROGRAMMA DEL CORSO ADOBE DREAMWEAVER CS5 Unità didattica 1 - Architettura di pagina statica HTML Dimostrazione 1-1: Visualizzazione del sito Unità didattica 2 - Prime operazioni Introduzione a Dreamweaver
U.T.E FOGLIO ELETTRONICO. Università della Terza Età. Sede di Novate Milanese. Corso Informatica Approfondimento. Docente: Giovanni Pozzi
U.T.E Università della Terza Età Sede di Novate Milanese Corso Informatica Approfondimento FOGLIO ELETTRONICO Docente: Giovanni Pozzi FOGLIO ELETTRONICO MS-Excel E un programma che permette di effettuare:
Capitolo 6: Inserimento infissi
Capitolo 6: Inserimento infissi Avviate MasterChef dall icona presente sul vostro Desktop. Nota: Se state utilizzando una versione dimostrativa, una volta caricato il programma, un messaggio vi comunicherà
1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.
Sommario CSS 1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.... 1 1.1 Fogli di stile "in linea"... 2 1.2 Fogli di stile "interni"... 2 1.3 Fogli di stile "esterni"... 2 1.4 Che tipo di
Fogli di stile CSS. Fogli di stile (2) Fogli di stile (3) Introduzione ai CSS. Regole
Fogli di stile CSS I fogli di stile permettono la separazione della forma dal contenuto. Il concetto di foglio di stile è quello di creare un documento separato che contenga tutte le informazioni necessarie
Word Formattazione del testo. Samuele Mazzolini
Word Formattazione del testo Samuele Mazzolini Imposta pagina Potrebbe essere utile per certi documenti impostare la pagina in orizzontale invece che in verticale. Questo è possibile con il comando Imposta
PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER
PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER Il percorso Web Graphic Designer con Certificazione internazionale Adobe Dreamweaver prepara lo studente ad acquisire solide conoscenze per la figura professionale
Sommario. Nozioni di base su HTML
Sommario Parte 1 Ringraziamenti.................................................... xiii Introduzione...................................................... xvi Che cos'è HTML?.................................................
Versione 1.1 20 marzo 2008 Riccardo Bresciani
The bookest class Versione 1.1 20 marzo 2008 La classe bookest è un estensione della classe standard book, classe alla quale si appoggia e che viene caricata con le opzioni di default. Le estensioni fornite
EXCEL: FORMATTAZIONE E FORMULE
EXCEL: FORMATTAZIONE E FORMULE Test VERO o FALSO (se FALSO giustifica la risposta) 1) In excel il contenuto di una cella viene visualizzato nella barra di stato 2) In excel il simbolo = viene utilizzato
(b) - Creazione del layout delle pagine nella vista Layout
(b) - Creazione del layout delle pagine nella vista Layout La vista Layout di Dreamweaver semplifica l utilizzo delle tabelle per il layout delle pagine. Nella vista Layout, è possibile progettare le pagine
Quick Print. Quick Print. Guida Utente. Copyright 2013 Hyperbolic Software. www.hyperbolicsoftware.com
Quick Print Quick Print Guida Utente I nomi dei prodotti menzionati in questo manuale sono proprietà delle rispettive società. Copyright 2013 Hyperbolic Software. www.hyperbolicsoftware.com 1 Tabella dei
Capitolo 16: Piano di lavoro speciale
Capitolo 16: Piano di lavoro speciale Avviate MasterChef dall icona presente sul vostro Desktop. Nota: Se state utilizzando una versione dimostrativa, una volta caricato il programma, un messaggio vi comunicherà
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:
www.collemarathonclub.it
Il sito consta di una pagina così strutturata Parte superiore con logo, nome e top menù Colonna sinistra con i vari menù e la sezione del Login Parte centrale dove vengono presentati i vari contenuti Colonna
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.
Manuale Utente CMMG Corso Medici Medicina Generale
CMMG- Manuale Utente CMMG Aprile 2014 Versione 1.1 Manuale Utente CMMG Corso Medici Medicina Generale CMMG-Manuale Utente.doc Pagina 1 di 14 CMMG- Manuale Utente AGGIORNAMENTI DELLE VERSIONI Versione Data
VISUAL BASIC FOR APPLICATION
VISUAL BASIC FOR APPLICATION LA PIATTAFORMA DI SVILUPPO GLI ELEMENTI DI VBA Finestra di progetto: mostra l elenco gerarchico dei progetti aperti e di tutti i moduli di codice e finestre di interfaccia
LE MASCHERE CORSO ACCESS PARTE V
LE MASCHERE Creazione di una maschera Selezionare il pulsante Maschere nella finestra del database; Scegliere creazione guidata (consigliata per le maschere basate su tabelle) oppure creazione (manuale)
l'editing delle pagine web non è nella forma ma nella metodologia di costruzione e di pubblicazione.
CHE COS'È UNA WEB-UNIT? Web-unit è uno strumento per la costruzione di pagine web: la differenza con altri strumenti per l'editing delle pagine web non è nella forma ma nella metodologia di costruzione
La disposizione estetica della lettera commerciale
La disposizione estetica della lettera commerciale Gli elementi costitutivi della lettera commerciale vengono disposti sul foglio secondo stili diversi: ogni a- zienda, infatti, caratterizza la sua immagine
Corso di Web Programming
Corso di Web Programming 5. Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica
NUVOLA COMUNICAZIONI
NUVOLA COMUNICAZIONI Indice Del Manuale 1 - Introduzione al Manuale Operativo 2 - Come creare una comunicazione 2.1 Creare una categoria 2.2 Creare una Comunicazione 2.2.1 Come utilizzare gli editor di
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,
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
HTML. Hyper Text Markup Language
HTML Hyper Text Markup Language IL WEB Le componenti principali del web sono: HTML: definizione del contenuto delle pagine CSS: definizione dell aspetto delle pagine Javascript: definizione del comportamento
ACCESS. Database: archivio elettronico, dotato di un programma di interfaccia che facilita la registrazione e la ricerca dei dati.
ACCESS Database: archivio elettronico, dotato di un programma di interfaccia che facilita la registrazione e la ricerca dei dati. Database Relazionale: tipo di database attualmente più diffuso grazie alla
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
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
Vassoio standard oppure opzionale da 250 fogli. Percorso carta nell'unità fronte/retro (vassoio 1) Cartoncino X X X X. Carta lucida X X X X X
Pagina di 5 Guida ai supporti La stampante supporta i seguenti formati di carta e di altri supporti speciali. Selezionare i formati personalizzati fino al valore massimo specificato per l'impostazione
Autodesk Map parte I digitalizzazione e importazione dati
Autodesk Map parte I digitalizzazione e importazione dati Marco Negretti e-mail: marco.negretti@polimi.it http://geomatica.como.polimi.it V 5.1 10/10/08 I dati in Autodesk Map I dati vengono memorizzati
PRIMA DI PROCEDERE CON L ASCOLTO DELLE LEZIONI E DEGLI ESERCIZI COPIARE LA CARTELLA ESERCIZI SUL DESKTOP
PRIMA DI PROCEDERE CON L ASCOLTO DELLE LEZIONI E DEGLI ESERCIZI COPIARE LA CARTELLA ESERCIZI SUL DESKTOP SEQUENZA FILMATI ED ESERCIZI: 1. INIZIO 1) IL FOGLIO ELETTRONICO 2) NOZINI DI BASE DI EXCEL 2010
Video Scrittura (MS Word) Lezione 2 Tabelle e Immagini
Video Scrittura (MS Word) Lezione 2 Tabelle e Immagini Word consente di inserire nello stesso documento, oltre al testo, molte altri generi di informazioni: - Tabelle - Immagini - Disegni, forme particolari
Manuale d utilizzo. Indice:
Manuale d utilizzo Indice: - L interfaccia (area di gestione) pag. 2 - Menu lingua pag. 3 - La gestione delle cartelle pag. 4 - Menu novità pag. 7 - I contatti pag. 8 - Gestione delle aree destra e sinistra
INFORMATIVA SULL'USO DEI COOKIE
INFORMATIVA SULL'USO DEI COOKIE UTILIZZO DI COOKIE Questo sito utilizza i Cookie per rendere i propri servizi semplici e efficienti per l'utenza che visiona le pagine di questo sito web. Gli utenti che
Marziana Monfardini 2004-2005 lezioni di word
1 2 3 4 5 TABUlAZIONI, RIENTRI, ELENCHI...IN BREVE PER IMPOSTARE UNA TABULAZIONE... Posizionarsi nella riga in cui si vuole inserire una tabulazione. Selezionare il tipo di tabulazione desiderato sul pulsante
TUTORIAL LIBRI IN SIMBOLI
TUTORIAL LIBRI IN SIMBOLI Questo tutorial guida alla costruzione di un libro in simboli utilizzando il programma SYMWRITER e OPENOFFICE DRAW. I programmi devono essere aperti entrambi. Si consiglia di
Primi passi con HTML. Il documento HTML
Primi passi con HTML. Il documento HTML La mia prima pagina in HTML Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga.
Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura:
COMANDI BASE HTML Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura: Nome del documento All'interno
Vademecum inserimento Modello Organizzativo attraverso
Vademecum inserimento Modello Organizzativo attraverso Valeri@ Il modello organizzativo dell ufficio, inserito dagli uffici giudiziari attraverso le pagine web Valeri@, è stato modificato per tenere conto
Disconnessione Utente
Home Page La home page di Smart Sales contiene due sezioni per indicare quali criteri di ricerca applicare alle offerte per identificare con facilità quelle che il cliente desidera acquistare. I valori
Procedura operativa per la gestione della funzione di formazione classi prime
Procedura operativa per la gestione della funzione di formazione classi prime Questa funzione viene fornita allo scopo di effettuare la formazione delle classi prime nel rispetto dei parametri indicati
HTML 5. Tabelle. Bordi di una tabella. Il tag <TABLE> Le tabelle. Tag fondamentali. Costruzione di tabelle riga per riga. Esempi
HTML 5 Tabelle Tag fondamentali Costruzione di tabelle riga per riga Le tabelle Esempi 1 Tecnologie di Sviluppo per il WEB 2 Il tag Una tabella è suddivisa in righe e ciascuna riga è suddivisa
Ogni PC, per iniziare a lavorare, ha bisogno di un sistema operativo. Infatti questo è il primo programma che viene eseguito e che permette
Ogni PC, per iniziare a lavorare, ha bisogno di un sistema operativo. Infatti questo è il primo programma che viene eseguito e che permette all'utente e ai programmi di gestire i dispositivi e le periferiche
Introduzione ai CSS. CSS esterni e interni. Proprietà di base. selettore { proprietà: valore } selettore { proprietà1: valore1; proprietà2: valore2 }
Introduzione ai CSS I Cascade Style Sheets (CSS), noti in Italia come "Fogli di stile a cascata", sono lo strumento definito dal W3C per definire l'aspetto delle pagine web. Prima dell'introduzione dei
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
Video Scrittura (MS Word) Lezione 1 Funzioni di base
Video Scrittura (MS Word) Lezione 1 Funzioni di base Cos e un programma di Video Scrittura Un programma di Video Scrittura serve per effettuare tutte quelle operazioni che consentono di creare, modificare,
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
INTRODUZIONE ALLE BASI DATI RELAZIONALI
INTRODUZIONE ALLE BASI DATI RELAZIONALI RELAZIONI E TABELLE Nelle BASI DI DATI RELAZIONALI le informazioni sono organizzate in TABELLE; Le tabelle sono rappresentate mediante griglie suddivise in RIGHE
liceo B. Russell PROGRAMMAZIONE INDIRIZZO: SCIENTIFICO SCIENZE APPLICATE TRIENNIO: TERZA DISCIPLINA: INFORMATICA
INDIRIZZO: SCIENTIFICO SCIENZE APPLICATE PROGRAMMAZIONE TRIENNIO: TERZA DISCIPLINA: INFORMATICA MODULO 1: HTMLe CSS UNITÀ ORARIE PREVISTE: 35 Il linguaggio HTML ed il web I principali tag I fogli di stile:
In questa guida viene descritta la procedura di acquisto ed installazione di un mazzo di nuove parole.
In questa guida viene descritta la procedura di acquisto ed installazione di un mazzo di nuove parole. 1 Selezione dell acquisto Avviare il vostro web browser e inserire wowords.com nella barra degli indirizzi
Creare classi e ID per applicare gli stili, pagina 93. Applicare gli stili a collegamenti ipertestuali, pagina 96
Panoramica del capitolo Creare classi e ID per applicare gli stili, pagina 93 Applicare gli stili a collegamenti ipertestuali, pagina 96 Creare e collegare fogli stile esterni, pagina 98 6 Introduzione
EXCEL. Alfabetizzazione Informatica Prof. GIUSEPPE PATTI
EXCEL Alfabetizzazione Informatica Prof. GIUSEPPE PATTI Operazioni base Excel è un programma che trasforma il vostro computer in un foglio a quadretti, così come Word lo trasformava in un foglio a righe.
Guida all uso del logo MANDARINA DUCK
Guida all uso del logo MANDARINA DUCK Fabrizio Schiavi Design per Sartoria Comunicazione www.fsd.it 29-03-00 Il logo Il logo su fondo positivo e negativo Pantone 109 Pantone 404 Pantone 109 Pantone 404
Cimini Simonelli - Testa
WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire
Strumento di conversione DWG/DXF
Strumento di conversione DWG/DXF Introduzione...2 Interfaccia grafica dello strumento di conversione...2 Funzioni avanzate...3 Font di caratteri non trovata...3 Alternare il colore di sfondo della finestra
Esercizio INTERNET. Esercizio
Esercizio INTERNET A titolo di esempio si intende realizzare un prototipo di pagina web contenente i seguenti elementi: - sfondo - pulsanti - testo scritto - collegamento ipertestuale ad un altra pagina
Excel. I fogli di calcolo Le funzioni base Gli strumenti. 1
Excel I fogli di calcolo Le funzioni base Gli strumenti www.vincenzocalabro.it 1 I fogli di calcolo Utilizzando questo programma possiamo costruire fogli di calcolo più o meno complessi che ci consento
Appunti sulle Tabelle
Appunti sulle Tabelle Prof. Riccardo conti Le pagine seguenti illustrano, attraverso semplici lezioni, come realizzare tabelle per le tue pagine Web. zatrabeoj I tre tag principali sono: E' il tag principale.
Principio. di base per una buona riuscita
Una delle attività da affrontare nel nostro lavoro è quella di realizzare un layout, ossia una struttura dove posizionare contenuti per creare una pagina web. Ci sono molti tipi di pagine web quindi diverse
Sommario. A proposito di A colpo d occhio 1. Novità e miglioramenti 5. Introduzione a Excel Ringraziamenti... xi Autore...
Sommario Ringraziamenti............................................ xi Autore................................................. xiii 1 2 3 A proposito di A colpo d occhio 1 Niente computerese!.....................................
ELENCHI. 1. Prima 2. Seconda 3. terza. Prima Seconda terza
ELENCHI Un elenco è una serie di voci di testo che possono essere contrassegnate da un punto elenco oppure da un numero o da una lettera e volendo anche da un elemento grafico. Si possono avere elenchi
ELENCHI DEL PERSONALE
ELENCHI DEL PERSONALE Cineca CSA Pagina 1 di 23 Funzione di menu: ELENCHI DEL PERSONALE. Percorso di menu (previa necessaria autorizzazione all uso): PERSONALE > ELENCHI DEL PERSONALE Nelle pagine successive
HTML per tu+ Chiara Pere+
HTML per tu+ Chiara Pere+ Cos é L HTML è il linguaggio con cui potete indicare come i vari elemen7 saranno dispos7 in una pagina Web. L estensione del file è.html e verrà visualizzato corre?amente trascinandolo
Come utilizzare i riferimenti assoluti e relativi in Microsoft Excel
Come utilizzare i riferimenti assoluti e relativi in Microsoft Excel In un foglio elettronico, le celle sono identificate mediante delle coordinate; in genere, sono utilizzate le lettere per identificare
* in giallo le modifiche apportate rispetto alla versione precedente datata 17/04/2012
Nota Salvatempo Contabilità 22 MAGGIO 2012 * in giallo le modifiche apportate rispetto alla versione precedente datata 17/04/2012 Nuova modalità di esportazione dei dati dalla Contabilità all Unico Persone
(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
1.1. Come funzionano le pagine Web.
Se tu hai voglia di creare il tuo sito web in HTML, oppure stai semplicemente cercando un supporto aggiuntivo perché pensi che le lezioni di HTML che ricevi all università non sono abbastanza chiare e
VBA è un linguaggio di scripting derivato da Visual Basic, da cui prende il nome. Come ogni linguaggio ha le sue regole.
Excel VBA VBA Visual Basic for Application VBA è un linguaggio di scripting derivato da Visual Basic, da cui prende il nome. Come ogni linguaggio ha le sue regole. 2 Prima di iniziare. Che cos è una variabile?
Prof. Pagani Corrado HTML
Prof. Pagani Corrado HTML IPERTESTI E MULTIMEDIALITÀ Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave sensibili (link). Può essere visto come una rete; i documenti
Modulo 17: Invio del BF tramite
Modulo 17: Invio del BF tramite E-mail Obiettivi del modulo 17 Gestione dell invio In questo modulo viene spiegata la funzione che permette di inviare per e-mail al cliente la prenotazione creata in agenzia
Javascript e CSS nelle pagine WEB
1 Javascript e CSS nelle pagine WEB Esempi applicativi Autrice: Turso Antonella Carmen INDICE ARGOMENTI 2... 5 LEZIONE 1... 6 COSA SONO I JAVASCRIPT... 6 LEZIONE 2... 8 STRUTTURA DEL LINGUAGGIO JAVASCRIPT
Prof. G.Ferrario - Progettazione, Costruzioni ed Impianti 3 F C.A.T. A.S. 2014/15
Prof. G.Ferrario - Progettazione, Costruzioni ed Impianti 3 F C.A.T. A.S. 2014/15 1 1) FORMATO DEL FOGLIO I formati dei fogli da disegno si ottengono a partire dalle seguenti condizioni: 1) tutti i formati
PROGRAMMA DEL CORSO MASTER WEB DEVELOPER
PROGRAMMA DEL CORSO MASTER WEB DEVELOPER Il corso Master Web Developer con Certificazione internazionale Adobe Dreamweaver prepara lo studente a entrare nel mondo dello sviluppo Web (blog, siti, portali).
Guida all uso del Registro Elettronico da parte delle famiglie. Liceo Classico e Linguistico I. Kant A.S. 2015/2016
Guida all uso del Registro Elettronico da parte delle famiglie Liceo Classico e Linguistico I. Kant A.S. 2015/2016 Accesso al registro elettronico Per consultare le informazioni relative all andamento
Layout Editor e Stampa
Layout Editor e Stampa Allo scopo di rendere il più possibile flessibili le stampe inerenti liste di articoli, abbiamo pensato di sfruttare un meccanismo semplicissimo che permetta di costruire a proprio