Joetex Creare siti accessibili con Dreamweaver

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Joetex Creare siti accessibili con Dreamweaver"

Transcript

1 Joetex Joetex Creare siti accessibili con Dreamweaver Materiali didattici - Elementi di informatica - Sistema Operativo Windows Percorso Formativo relativo alla conoscenza del programma Dreamweaver utile alla creazione di siti accessibili normati della Legge n. 4 del 09/01/2004 SOMMARIO Legge n. 4 del 9 gennaio 2004 Disposizioni per favorire l'accesso dei soggetti disabili agli strumenti informatici (G.U. n. 13 del 17 gennaio 2004) Decreto Legislativo 17 luglio 2005 Legge 9 gennaio 2004, n. 4 Adeguamento in corso Indicazioni operative La finestra di Dreamweaver Creare un sito in locale Predisponi le caratteristiche dell'accessibilità Inserisci la lingua nel tag <html> Inserisci il titolo della pagina Utilizza i metatag Creare una tabella per l'intestazione l codice <html> Inserire un'immagine nella pagina o nella tabella Utilizzare i metatag Creare una pagina standard:inserire elementi di testo nell'intestazione e nel corpo, accorgimenti vari Liste ordinate e non ordinate La struttura di un sito: pagine di primo, secondo e terzo livello - la struttura ad albero I collegamenti ipertestuali Utilizza un modello di Dreamweaver Verifica il progetto con diversi Browser Installa browser diversi Installa il browser Mozilla Configura Il Browser Mozilla di navigazione in Internet Installa il browser Firefox Installa il browser Opera

2 I fogli di stile Tipi di fogli di stile 1. Locazione dei fogli CSS 2.Tipologia in base all'oggetto al quale si riferisce Crea un foglio di stile Associa un foglio di stile già creato Importa un foglio di stile Modifica ed elimina un css Visualizza il codice di un foglio di stile Il foglio di stile della pagina Aggiungere selettori al foglio di stile già creato Assistenza nella realizzazione di css mediante codice I colori dei collegamenti ipertestuali per una pagina che non presenta "css" già associati Utilizza un codice preconfezionato Utilizza due diverse formattazioni per i collegamenti ipertestuali valido solo con il browser Opera Inserisci immagine float Un collegamento Inserire un testo alternativo ad un link testuale Crea un form per inviare registrazioni a mezzo posta elettronica La validazione del W3C La validazione di Bobby Legge 9 gennaio 2004 n. 4 La legge n. 4 del gennaio 2004 punta alla difesa dei navigatori di internet che hanno qualità fisiche o psico-attitudinali tali da necessitare di siti particolarmente adatti. Si tratta, in buona sostanza, di una legge che tenta di estendere il diritto di informazione a tutti i cittadini, evitando di privilegiare quelli del tutto prestanti abilitati all'accesso a tutti i tipi di media comunicativi tipici della navigazione in rete. In particolare la legge, anche se discutibile per alcune sue inadeguatezze, tenta di sostenere gli individui disabili nell'accesso alle informazioni, per cui un sito di un'istituzione pubblica deve essere necessariamente dotato di requisiti di accessibilità. Per accessibilità vanno intese diverse componenti, tra le quali Correttezza del codice, Efficienza relativa agli aggiornamenti e alla raggiungibilità delle pagine, Efficacia comunicativa e Soddisfacimento del consumatore. La correttezza del codice va intesa come creazione di pagine con linguaggio che sia in conformità delle seguenti autorità internazionali: delle indicazioni internazionali presenti nelle Reccomendation del World Wide Web Consortium (W3C) e nello specifico del progetto Web Accessibility Initiative (WAI) delle norme definite nel paragrafo della Section 508 del Rehabilitation Act degli USA dei protocolli delle regole e delle specifiche tecniche suggerite dalla International Organization for Standardization (ISO)

3 L'efficienza deve essere relativa agli strumenti informatici che vengono posti in gioco, quali ad esempio: campi moduli di form possibilità di contatti mediante collegamenti ipertestuali validi che non terminino in pagine inesistenti L'efficacia consiste nelle seguenti qualità principali: aggiornamento costantemente dei i dati in ragione delle novità in campo normativo, delle disponibilità dei servizi offerti al pubblico, della velocità di accesso ai dati anche mediante accesso riservato; creazione di un progetto web facile dal punto di vista della navigazione, con indicazioni costanti della pagina in corso di visualizzazione (orientamento); chiarezza dell'esposizone, semplificazione argomentativa, sintesi verbale ed eventualmente anche visiva, finalizzate alla comprensione generale; Infine la Customer Satisfaction dovrebbe essere l'obiettivo finale del sito dell'istituzione Pubblica, riscontrabile anche mediante moduli di pagine web anonimi. Infine va detto che la legge resta vaga per quanto attiene la creazione dei siti Adeguamento in corso La legge specifica in modo chiaro che per tutti i siti di nuova realizzazione utilizzare almeno la versione 4.01 dell HTML o preferibilmente la versione 1.0 dell XHTML, in ogni caso con DTD (Document Type Definition - Definizione del Tipo di Documento) di tipo Strict. Questo significa che per nuovi siti si può utilizzare soltanto l'html 4.01 con definizione di tipo Strict oppure l'extensible HTML. Ciò nonostante è consentito l'uso del HTML 4.01 Transitional alle condizioni che gli attributi siano realizzati nei fogli di stile praticamente quello che si va realizzando con questo documento. Restano poco chiare invece la indicazioni relative alla transizione ad altro linguaggio, in quanto non prevedono tempi di attuazione e appaiono vaghe per quanto attengono alla comunicazione addirittura alla Presidenza del Consiglio dei Ministri - DIpartimento per l'innovazione e le tecnologie ecc. 3) pianificare la transizione dell intero sito alla versione con DTD Strict del linguaggio utilizzato, dandone comunicazione alla Presidenza del Consiglio dei Ministri Dipartimento per l innovazione e le tecnologie e al Centro nazionale per l informatica nella pubblica amministrazione.

4 Sembra non attuabile la creazione di un sito alternativo che contenga le stesse informazioni di uno non accessibile dal punto di vista dei requisiti della legge in questione: Enunciato: Per le pagine di siti esistenti che non possano rispettare i suelencati requisiti (pagine non accessibili), in sede di prima applicazione, fornire il collegamento a una pagina conforme a tali requisiti, recante informazioni e funzionalità equivalenti a quelle della pagina non accessibile ed aggiornata con la stessa frequenza, evitando la creazione di pagine di solo testo; il collegamento alla pagina conforme deve essere proposto in modo evidente all inizio della pagina non accessibile. Questo enunciato secondo alcuni va letto come divieto di costruire siti alternativi a norma di accessibilità accanto a quelli cosiddetti tradizionali. Sembrerebbe che soltanto le singole pagine possano trovare forme alternative con indicazioni chiare all'inizio della stessa. Indicazioni operative Ecco alcuni punti fondamentali da rispettare per avere il sito delle Pubblica Amministrazione a norma di legge: 1. Verificare che il sito venga visualizzato in modo simile nei vari browser (Mozilla, Firefox, Opera, Internet Explorer ecc.); 2. Verificare che il contenuto informativo sia identico nei vari browser; 3. Verificare che il sito sia navigabile comodamente senza scaricare le immagini; 4. Verificare che ogni forma di comunicazione non verbale sia accompagnata da descrizioni verbali; questo vuol dire che per ogni immagine, filmato, documento sonoro è necessario che vi sia il corrispettivo descrittivo verbale; ad esempio per ogni immagine di una certa rilevanza è obbligatorio sia il testo alternativo (di cui vedremo meglio l'uso e le corrispondenze tecniche) che una long description, solitamente indicata tra parentesi quadre [ld]; 5. Verificare che la navigabilità sia possibile anche senza l'uso del puntatore e quindi attraverso l'uso della tastiera; 6. Verificare che a navigabilità sia possibile anche senza l'uso del foglio di stile, applet, script o altro mezzo informatico; 7. Verificare che il webmaster rediga "un rapporto nel quale l esperto tecnico indica la conformità, la non conformità o l eventuale non applicabilità di ogni singolo requisito della pagina esaminata" (punto "e" comma 2 dell'allegato "A" del Decreto Ministeriale 8 luglio 05); 8. Verifica mediante supporto informatico via Internet della corretta sintassi delle pagine web ed eventuale correzione mediante w3c Evaluation, Repair, and Transformation Tools for Web Content Accessibility 9. Verificare che i link delle pagine web evitino l'apertura di nuovo browser ed eventualmente avvertire sia per l'apertura della pagina che per il passaggio ad altro sito 10.Verificare l'assoluta mancanza di frames, vietati energicamente perché non consentono agli "screen reader" dei non vedenti o ipovedenti di leggere i contenuti della pagina; 11.Verificare che il colore eventualmente non visualizzato del browser sia di disturbo alla navigazione o ne comprometta l'utile accesso alle informazioni; 12.Verificare che non vi siano testi in movimento, lampeggianti o similari; 13.Verificare che vi sia un elevato contrasto tra figura e sfondo, ossia tra testo e sfondo; 14.Verificare che le "mappe immagini" mappe immagini siano lato client e non lato server, tranne che non sia possibile utilizzare forme geometriche disponibili lato client 15.Verificare che la mappa immagine abbia il link con testo alternativo;

5 16.Verificare che nell' utilizzare tabelle, vi siano attributi che descrivano le intestazioni di righe e colonne; 17.Verificare che nell'utilizzare le tabelle siano presenti elementi (marcatori) e gli attributi previsti nella DTD adottata per associare le celle di dati e le celle di intestazione che hanno due o più livelli logici di intestazione di righe o colonne. 18.Verificare che ingrandendo il testo anche oltre il 200% (con i browser Firefox, Mozilla, Opera, Netscape) non si verifichi la sovrapposizione di carattere che renda illeggibile il testo; 19.Verificare che le tabelle possano essere lette in una versione linearizzata (non a colonne parallele, ma su righe diverse); 20.Verificare che le etichette dei form siano chiare ed esplicite per agevolare la compilazione; 21.Verificare che sia resa chiara la ed univoca la destinazione di ogni link evitando che si possa accedere a pagine diverse mediante percorsi diversi; 22.Verificare che se previsto un intervallo di tempo per la fruizione di un servizio di una pagina, è necessario avvisare l' utente; 23.Verificare che l'attivazione dei link mediante tastiera o altro metodo diverso dal puntatore presenti le distanze standard che sono quella orizzontale tra link di almeno 0,5 "em" e verticale 0,5 cm 24.Verificare che in ogni Home page sia inserita una mappa del sito con gli opportuni collegamenti ipertestuali; 25.Verificare che in ogni Home page sia presente un contatore di accessi; 26.Verificare che in ogni Home page sia una data di aggiornamento del sito; 27.Verificare che in ogni pagina sia presente in modo chiaro un titolo con il contenuto della pagina e il suo eventuale riferimento orientativo rispetto al sito; 28.Verificare che non vi siano errori formali, ortografici, grammaticali e false informazioni relative a norme, servizi erogati e comunicazioni; 29.Verificare che il linguaggio utilizzato sia semplice e chiaro, corretto e sintetico; 30.Verificare che ci siano strumenti di aiuto per gli utenti; 31.Verificare che simboli e parole siano coerenti in tutte le pagine, evitando che vi siano doppi significati, informazioni ambigue o vaghe; 32.Verificare quali conseguenze possono verificarsi per azioni impropri dell'uso dello strumento informatico; 33.Verificare la gradevolezza dell'ambiente; Torna su La finestra di Dreamweaver - 1 Dopo avere installato il programma Dreamweaver della Macromedia aprire il programma con il semplice clic sull'icona del menù Start:

6 La finestra di dialogo si presenta simile all'immagine sotto riportata Si può utilizzare la schermata iniziale per aprire gli ultimi file utilizzati elencati a sinistra, un file non presente nella lista mediante comando Apri, si può anche scegliere quale tipo di linguaggio utilizzare nella sezione centrale. Infine è possibile anche aprire pagine di modelli preconfezionati, come vedremo meglio. Torna su

7 La finestra di Dreamweaver - 2 Apriamo un foglio vuoto di HTML: Clic su HTML La finestra si presenta in un modo simile alla seguente immagine Sono state indviduate 6 aree, che non comprendono tutte quelle disponibili ma sono le principali e abbastanza comode da utilizzare. Torna su

8 La finestra di Dreamweaver - 3 Per prima cosa inseriamo i pannelli che comprendono quasi tutti i comandi utili ad inserire o modificare oggetti nella pagina. Posizioniamo il puntatore sopra la barra degli strumenti + Tasto destro + Inserisci + Compaiono i pannelli dei comandi selezionabili con un semplice clic Vediamo le varie icone presenti nei vari pannelli: Pannello Comune tabella che elenca le icone Pannello Comune Collegamento ipertestuale Collegamento Ancoraggio con nome Tabella Inserisci immagine

9 Segnaposto immagine immagine rollover HTML di Fireworks Barra di navigazione Disegna punto attivo rettangolo Disegna punto attivo ovale Disegna punto attivo poligono Supporto Inserisci Flash Pulsante Flash Testo Flash Shockwave Applet Param Activex Plugin Data Commento Modelli

10 Selettore tag Pannello Layout Pannello Moduli Pannello testo Editor di tag font Bold (grassetto) Italic (corsivo) Forte Enfasi Enfasi Paragrafo Blocco Citazione Pre Titolo 1 Titolo 2 Titolo 3 Lista puntata Lista numerata Lista Elenco Definizioni termine definizioni Descrizione definizioni Abbreviazione Acronimo Caratteri speciali

11 Pannello Html Filetto orizzontale Tag Head Tabelle Frame Script Pannello Applicazione Pannello Elementi di flash Pannello Preferiti L'immagine mostra un pannello Preferiti creato dall'utente, nel seguente modo: Posiziona il puntatore sulla barra degli strumenti + Tasto destro + Personalizza Preferiti Si apre una finestra di dialogo che presenta i vari pannelli divisi in categorie sulla sinistra e il pannello Preferiti sulla destra; seleziona l'icona comando + clic sulle freccine + terminata l'operazione

12 Per eliminare le icone di comando selezionarle nel riquadro destro del Pannello Oggetti preferiti + Cestino spazzatura (rimuovi oggetti) Per spostare le icone utilizza le frecce nere Sposta su - Sposta giù Torna su La finestra di Dreamweaver - 4 L'area 2 è quella di lavoro. Si può lavorare direttamente inserendo oggetti, intendendo per essi testo, immagini, suoni, applet, form o altro. Il sistema utilizzato è Quello che vedi è quello che crei: WYSIWYG, ossia What You See Is What You Get. Barra dei file aperti Nella testa dell'area 2 sono presenti i file aperti, visualizzabili son un semplice clic sul nome a forma di Scheda: La presenza dell'asterisco accanto al nome del file scompare quando il file viene salvato. Barra degli strumenti "Documento" Nella barra degli strumenti "Documento" sono visibili i tasti utili a visualizzare la pagina in tre modi differenti: soltanto il Codice sia il codice che la visualizzazione WYSIWYG la mera visualizzazione Progettazione, quella WYSIWYG

13 Accanto ai tre tasti è la finestra Titolo, quella che dà il titolo alla pagina web. Succedono le seguenti icone: Visualizza errori, che presenta un quadratino giallo con punto esclamativo rosso se vi fossero errori di codice ;

14 gestione file, per la gestione dei file su internet Verifica la pagina col Browser Aggiorna ; ; ; Opzioni di visualizzazione Barra Standard Nuovo documento che apre la finestra di dialogo con varie opzioni; Apri ; Salva; Salva tutti i file aperti; taglia copia Incolla; annulla ultimo comando; ripristina ultimo comando annullato; Torna su La finestra di Dreamweaver - 5 L'area proprietà è quella che consente le modifiche maggiori ai vari oggetti. Basta selezionare l'oggetto, anche con un clic sul selezionatore di tag, per ottenere automaticamente l'area proprietà dell'oggetto selezionato. Selezioniamo una parola di testo + ispezioniamo l'area Proprietà Area Proprietà oggetto testo Si sconsiglia l'uso diretto della sezione Proprietà in quanto crea una formattazione non proprio utile alla creazione di siti accessibili; meglio conoscere e utilizzare opportunamente i comandi dell'area Proprietà. Formato può essere:

15 Paragrafo Titolo 1, Titolo 2, Titolo 3, ecc. Pre; il tag pre crea una scatola in cui il carattere predefinito è il Courier New con larghezza standard per ogni lettera o numero, ossia la larghezza del carattere "i" è uguale a quella del carattere "m" oppure "4"; Carattere (scegliere una terna di caratteri diversi) Stile, si riferisce a formattazioni create e salvate in fogli di stile, di cui si vedrà meglio più avanti; Dimensione, opportunamente creata nel foglio di stile in misura percentuale bold, italic, allineato a sinistra, centrato, a destra e giustificato; colore, che si può scegliere anche visualizzandolo mediante clic sulla freccina del quadratino colore; diminuisci rientro - aumenta rientro, elenco puntato e numerato collegamento ipertestuale destinazione, utilizzato per l'apertura di nuovi browser al clic del collegamento ipertestuale. Area Proprietà oggetto immagine L'area Proprietà dell'oggetto immagine è ovviamente molto diversa: Nella parte superiore Visualizzazione dell'immagine larghezza in pixel altezza in pixel luogo in cui è conservato il file immagine collegamento ipertestuale Testo alternativo, obbligatorio per facilitare la comprensione dei non vedenti; Modifica mediante programma fireworks (applicazione dell'azienda Macromedia) Classe Nella parte inferiore vi sono altre opzioni tra le quali il bordo, il nome della mappatura eventuale, le icone di creazione di mappe con il clic drag & drop ecc.

16 Area Proprietà oggetto Ancora Area Proprietà oggetto tabella Posiziona il cursore all'interno di una cella di una tabella per ottenere i tag di selezione nell'apposita area: Posiziona il cursore nel paragrafo dove è la tabella + clic sul selettore di tag, che in questo caso è paragrafo, cella, riga o intera tabella: Torna su La finestra di Dreamweaver - 6 Le aree Progettazione, Codice, Applicazione, finestra di ispezione Tag, FIle e Frame sono tutte a destra. Visualizzarle tutte contemporaneamente non è possibile per questioni di spazio, per questo sono utilizzabili con un clic sulla freccina nera con vertice orizzontale che diventa poi verticale. Area Progettazione

17 Apertura dell'area Progettazione con scheda CSS (Cascade Style Sheet) o fogli di stile: Area File Visualizza le cartelle e i file del sito secondo una tipica visione simile ad Esplora Risorse di Windows. Visualizzazione della grandezza dell'area di lavoro e indicazione in secondi del tempo di scaricamento della pagina con un modem a 33Kbps (33 kilo bit per seconds). Evitare di superare un numero di secondi eccessivo, tempo inadeguato da fare aspettare al navigatore che spesso cambia pagina interrompendo il caricamento. Torna su Creare un sito in locale Clic su Gestisci siti

18 oppure Sito + Gestisci siti... Si apre la finestra di dialogo di creazione dei siti

19 Nella scheda Avanzate inserire le indicazioni utili

20 Predisponi le caratteristiche dell'accessibilità Posiziona il puntatore sulla cartella principale del sito + tasto di scelta rapida

21 Assegna il nome index.htm Inserisci la lingua nel tag <html> Posiziona il cursore dopo la "l" di <html>, digita lo spazio e si apre la finestra di dialogo dei tag disponibili:

22 Selezionare "lang" + invia appare la scritta "lang""" con il cursore interposto alle virgolette + digita "it"si apre la finestra di dialogo delle lingue; digita "it" Inserire il titolo della pagina Nella sezione "<head> cancella la scritta "Documento senza titolo" compresa tra i tag <title> e </title> oppure utilizza l'apposita finestra Titolo della barra degli strumenti della pagina

23 Utilizzare i metatag I metatag sono informazioni relative alla pagina, al suo autore, alle modifiche del documento, alle parole chiave che aiutano i motori di ricerca e altro. Per inserirli nel loro posto corretto, ossia nella "head", il programma lo fa automaticamente. Utilizza la scheda HTML e la freccina dell'icona "Head:Meta" Icona del menù "Head: Meta" Utilizzare la freccina per ottenere il menù a discesa: Clic su Meta esempio di meta è per inserire informazioni tipo Nome (name), Valore e contenuto; tipico <meta http-equiv="content-type" content="text/html; charset=iso "> verificare la disposizione automatica del meta-tag direttamente nella"head" (ossia tra <head> e </head>);

24 La finestra di dialogo di Meta di Dreamweaver: Parole chiave sono quelle parole utili a facilitare il compito dei motori di ricerca; La finestra di dialogo di Parole Chiave di Dreamweaver: Description consente di inserire un testo che descriva il sito; La finestra di dialogo Description di Dreamweaver:

25 Creare una tabella per l'intestazione della pagina Inserire una tabella con una riga e tre colonne, larghezza 100%, senza bordo, margine celle a piacere, per inserire l'intestazione della pagina che va segnalato nel summary, presente con finestra Riepilogo: Utilizzare l'icona Tabella della scheda Comune oppure il comando della barra dei menù Inserisci + Tabella Finestra di dialogo "Tabella" Assegnare la grandezza alle colonne, ad esempio 25%, 50% e 25% rispettivamente alla prima, alla seconda e alla terza nel seguente modo: Seleziona tabella con un clic quando il puntatore posizionato sul bordo superiore diventa freccia nera con vertice verso il basso + digita 25% nell'apposita casella Larghezza Visualizzazione Tabella con puntatore posizionato sul bordo superiore che diventa freccia nera con vertice verso il basso

26 Tabella con colonna selezionata Digita la percentuale desiderata nella finestra Larghezza "La" Ripeti l'operazione per le altre colonne assegnando 50% e 25% alle restanti due. Nella prima colonna inserisci l'immagine Logo Immagine della tabella come visibile nella fase di lavoro con Dreamweaver Tabella come visibile nel browser di navigazione internet [ld]

27 Il codice <html> Vediamo il codice html che dreamweaver ha creato nell'area Corpo "body" della pagina (compreso tra i tag <body> </body>) <table width="100%" border="0" cellspacing="4" cellpadding="4" summary="testata"> <tr> <td width="25%"><img src="imgs/logo_siti_access.png" alt="logo siti accessibili" width="160" height="130" longdesc="long_description_logo.htm"></td> <td width="50%"> </td> <td width="25%"> </td> </tr> </table> Il tag tabella è <table></table>, con gli attributi larghezza width="100%", bordo border="0", margine celle e margine testo cellspacing="4" cellpadding="4", riepilogo tabella summary="testata"; Il tag riga è <td> </td> (table date) che contiene i tag colonna (table row) <tr></tr>, uno per ogni colonna inserita (per questo tre volte <tr></tr>; affinché sia visibile la colonnna va, però, inserito almeno un carattere o uno spazio vuoto, indicato appunto dai simboli " "; Il tag immagine "<img" non necessita di tag di chiusura, il suo attributo necessario è src che sta per source (risorsa) e indica il percorso relativo dell'immagine nella cartella sito. Nel nostro caso l'immagine logo_siti_access.png è all'interno della cartella "imgs" indicata con slash imgs/: <img src="imgs/logo_siti_access.png" longdesc="long_description_logo.htm"> alt="logo siti accessibili" width="160" height="130" Presenta i seguenti attributi: testo alternativo obbligatorio per i siti a norma di accessibilità ; larghezza width="160" e altezza height="130", descrizione verbale lunga del contenuto dell'immagine "longdesc="long_description_logo.htm"". La descrizione verbale lunga del contenuto dell'immagine va scritta su una pagina a parte che deve essere attivabile mediante simboli esterni e vicini all'immagine in forma di testo "[ld]" Clicca per avere un'idea della long_description_logo.htm del logo inserito nella tabella visibile nell'immagine soprastante. Inserire un'immagine nella pagina o nella tabella Utilizzare l'icona Immagine della scheda Comune oppure il comando della barra dei menù Inserisci + Immagine Viene fuori il browser con la cartella del sito + apri la cartella immagini oppure imgs (images) che contiene tutte le immagini del sito

28 Browser con la cartella del sito Browser con la cartella immagini (imgs) Selezionare l'immagine da inserire + OK

29 Si apre la finestra di dialogo che consente di immettere il testo alternativo e la pagina della long description: Visualizziamo il testo alternativo nel browser di navigazione internet quando sovrapponiamo il puntatore sopra un'immagine Creare una pagina standard: inserire elementi di testo nell'intestazione e nel corpo, accorgimenti vari Nella colonna centrale inseriamo un testo senza formattarlo perché la formattazione sarà affidata ad un foglio di stile che avremo modo di guardare meglio prossimamente: Clic col puntatore all'interno della cella centrale dell'intestazione + digita il testo che identifica il sito "Creare siti accessibili" + invia per andare a capo e creare un nuovo paragrafo + digita "utilizzando il programma Dreamweaver" + Clic col puntatore all'interno della cella destra dell'intestazione + digita il testo che identifica il sito "ultimo aggiornamento" + invia per andare a capo e creare un nuovo paragrafo + digita "28 novembre 2005"

30 Inserire una seconda tabella per la barra di navigazione Sia la home page che le altre pagine devono essere fornite di barra di navigazione tale da consentire il raggiungimento agevole e veloce dei contenuti desiderati riassunti in una o due parole per ognuno dei link. La colonna di destra potrebbe essere utilizzata per una seconda barra di navigazione e quella di sinistra, più ampia per informazioni varie. Se vi fossero informazioni importanti la seconda barra di navigazione potrebbe essere riportata in tutte le pagine del sito, probabilmente sovraccaricandolo in modo inopportuno. Procedura Posizione il puntatore alla fine della tabella intestazione già creata, clic sull'icona Tabella della barra degli strumenti + inserire i dati nella finestra di dialogo della tabella 1 riga, sei colonne, 100% larghezza, bordo = 0, margine 4, spaziatura celle 4, Didascalia "Navigazione" e Riepilogo "barra di navigazione" (si veda immagine) In ognuna delle sei celle inserire il testo del menù di navigazione: home

31 Informazioni Percorsi formativi Progetti Docenti Studenti Dopo ogni parola abbiamo inserito un divisore dopo uno spazio. Il divisore si chiama "pipe" e si ottiene pigiando maiuscolo + contro_slash (tasto che precede il numero 1). A questo punto posizioniamo il puntatore sul bordo destro di ogni cella e la restringiamo con il clic-drag & drop per impedire che il testo stretto dalla cella vada a capo automaticamente + inserisci il cursore lampeggiante nella tabella + clic sul tag che appare sul selezionatore di oggetto + Elabora + Tabella + Converti larghezza in percentuale Selezionatore di oggetto: Con un clic su <table> si seleziona la tabella per procedere all'assegnazione automatica della larghezza delle colonne in percentuale

32 Ecco come appare la tabella con all'interno il cursore lampeggiante Per un fatto prettamente estetico inseriamo una linea divisoria tra la prima e la seconda tabella procedendo nel seguente modo: Posizionare il puntatore alla fine della tabella intestazione già creata + Inserisci + HTML + Filetto orizzontale

33 Ripetiamo l'operazione per inserire un secondo Filetto orizzontale dopo la barra di navigazione Inserire una terza tabella per creare una pagina completa di testo Inserire una terza tabella per creare una pagina completa di testo. La seconda tabella può essere a scelta con due o tre colonne, a seconda dei contenuti e delle necessità. Inseriamo una tabella desumendo le informazioni anche dalla prossima immagine Procedura Posizione il puntatore alla fine del Filetto orizzontale già creato, clic sull'icona Tabella della barra degli strumenti + inserire i dati nella finestra di dialogo della tabella 1 riga, sei tre, 100% larghezza, bordo = 0, margine 4, spaziatura celle 4, Didascalia "corpo" e Riepilogo "corpo pagina e barra di navigazione secondaria" (si veda immagine)

34 Creata la tabella assegna valori simili ai seguenti: cella 1 30% cella 2 1% cella 3 59% Nella cella 1 inserisci il seguente testo (ipotetico) Utilia POF Segreteria Iscrizioni Circolari Link utili Progetti didattici Italiano Filosofia Scienze Arte Volontariato Stage Viaggi d'istruzione Orario classi Orientamento

35 Nella cella 2 inserisci un "pipe" e mantenendo pigiato il comando maiuscolo (shift) invia con la tastiera + ripeti l'operazione un certo numero di volte sino a raggiungere la corrispondenza del testo "Orientamento" che si era scritto precedentemente nella cella 1. Nella cella tre inserisci il testo introduttivo di presentazione dell'istituto Superiore. Piede della pagina con collegamento interno per tornare all'inizio della pagina Alla fine della pagina è opportuno creare un link interno (un'ancora il cui tag di "anchor" è <a> che va chiuso con </a>) alla pagina che consente di tornare all'inizio della pagina allorquando si verificasse una mancata visualizzazione della pagina. La scritta "" è importante per i navigatori ipovedenti e non vedenti, in quanto lo screen reader che solitamente questo tipo di navigatori possiedono legge in forma sonora il testo. Appare opportuno, però, inserire anche una freccia orientata verso su che comunichi visivamente ad altri tipi di navigatori la possibilità di tornare verso l'intestazione senza utilizzare la scroll bar. Procedura: Con il puntatore posizionare il cursore lampeggiante dopo e all'esterno della tabella "corpo" + Inserisci + HTML + Filetto orizzontale + posizionare il cursore lampeggiante dopo il Filetto orizzontale + Inserisci + Immagine + tornasu.png (immagine di freccia già preparata) + scrivi testo alternativo "Torna all'inizio della pagina" + OK + digita uno spazio + digita il testo "torna su" A questo punto va assegnato il collegamento ipertestuale con un'ancora che inseriremo tra breve prima dell'immagine Logo dell'azienda pubblica. Procedura del collegamento ipertestuale all'immagine e al testo:: seleziona immagine e testo "" (come in immagine) + posiziona il cursore lampeggiante nella finestra "Collegam" della finestra Proprietà + digita cancelletto + nome dell'ancora (all'ancora daremo nome "tornasu") Inserire un'ancora prima del logo dell'azienda pubblica:

36 Posizionare il puntatore prima del Logo + clic sull'icona ancora (oppure Inserisci + Ancoraggio con nome) + assegna nome "tornasu" (è vietato inserire spazi nei nomi "ancora"). L'ancora sembra spostare l'immagine verso destra, ma questo spostamento non sarà visibile nei browser di navigazione internet. Vediamo uno schema di contenuti di una pagina standard:

37 Vediamo il piede della pagina con i collegamenti ipertestuali interni che consentono con un clic di raggiungere l'inizio della pagina Ci occuperemo prossimamente degli aspetti grafici della pagina. Per ora basti notare l'intestazione con il logo a sinistra in alto, il tipo di Istituzione Pubblica, l'indirizzo, il n. telefonico,

38 la barra di navigazione principale, quella secondaria (se necessita), il testo, i filetti orizzontali che consento di separare graficamente le parti, il collegamento ipertestuale interno per tornare all'inizio della pagina. Ci siamo cimentati a realizzare un tipo standard di pagina web. Dopo avere creato l'intestazione e la barra di navigazione. Vediamo ora i tag utilizzati. Tag utilizzati nella pagina standard: Sin'ora abbiamo visto il tag <img> ed il tag <Table>. Altri oggetti inseriti sono il filetto orizzontale che ha tag semplicissimo,horizontal rule <hr>. Per ispezionare il tag seleziona l'oggetto (come in immagine) + clic sul pulsante Dividi + visualizza il tag Il tag della linea orizzontale <hr>

39 Il tag della tabella "corpo" <table width="100%" border="0" cellspacing="4" cellpadding="4"> <tr> <td width="30%" valign="top"><p>utilia</p> <UL> <LI><A href="#">pof</a> <LI><A href="#">segreteria</a> <LI><A href="#">iscrizioni</a> <LI><A href="#">circolari </A> <LI><A href="#">link utili </A></LI> </UL> <DIV class=relatedlinks> Progetti didattici <UL> <LI><A href="#">italiano</a> <LI><A href="#">filosofia</a> <LI><A href="#">scienze</a> <LI><A href="#">arte</a> </LI> </UL> </DIV><DIV > Volontariato <UL> <LI><A href="#">stage</a> <LI><A href="#">viaggi d'istruzione </A> <LI><A href="#">orario classi </A> <LI><A href="#">orientamento</a></li> </UL> </DIV><p> </p></td> <td width="1%" valign="top">

40 </td> <td width="70%"><p>titulus</p> <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </P> <P>Restantibus</P> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p></td> </tr> </table>

41 Il tag del collegamento ipertestuale "" <hr> <a href="tornasu"><img src="imgs/tornasu.png" alt="torna all'inizio della pagina" width="25" height="25" border="0"> torna su </a> Il marcatore del collegamento ipertestuale è <a> che deriva da "anchor" (ancora) con l'aggiunta del riferimento "href" a "cosa" deve collegarsi o ancorarsi l'oggetto (nel nostro caso gli oggetti sono 2, l'immagine e il testo). Il simbolo che collega all'interno di una pagina è cancelletto # (nel nostro caso non esiste indicazione di pagina ma solo cancelletto + nome dell'ancora, quindi il cancelletto è interno alla stessa): <a href="tornasu"> Quando si visualizza la pagina con il browser basta cliccare gli oggetti compresi tra <a href="tornasu"> e </a> per ottenere il passaggio nel punto indicato dall'ancora e richiamato, appunto, dal comando "clic" sugli oggetti con collegamento ipertestuale. Inoltre si può vedere il testo alternativo alt="torna all'inizio della pagina" che nelle norme del corretto html deve accompagnare obbligatoriamente le immagini per descriverle in forma breve Il testo alternativo si visualizza posizionando il puntatore sopra il collegamento ipertestuale "immagine" quando si naviga con i browser di internet. Il tag dell'ancora "tornasu" <a name="tornasu"></a>

42 Il tag interrutore di riga senza creare un paragrafo Quando abbiamo inserito il "pipe" nella cella 3 mandandolo a capo utilizzando il tasto maiuscolo + invia abbiamo creato delle interruzioni (break) di riga senza però creare dei paragrafi (il tag del paragrafo è <p>, "paragraph"). Selezioniamo un pipe della cella tre e osserviamo il suo marcatore: Marcatori di tutta la pagina <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; <title>pagina </head> 4.01 Transitional//EN" charset=iso "> standard</title> <body> <div width="760"> <table width="100%" border="0" cellspacing="4" cellpadding="4" summary="testata"> <tr> <td width="25%"><a name="tornasu"></a><img src="imgs/logo_siti_access.png" alt="logo siti accessibili" width="160" height="130" longdesc="long_description_logo.htm"> <p><a href="long_description_logo.htm" target="_blank">[ld]</a></p></td> <td width="50%"><p>creare siti accessibili</p> <p>utilizzando il programma Dreamweaver</p></td> <td width="25%"><p>ultimo aggiornamento </p> <p>28 novembre 2005 </p></td> </tr> </table> <hr> <table width="100%" border="0" cellspacing="4" cellpadding="4"> <tr> <td width="9%"><div align="center">home </div></td> <td width="21%"><div align="center">informazioni </div></td> <td width="28%"><p align="center">percorsi formativi </p></td> <td width="12%"><div align="center">progetti </div></td> <td width="14%"><div align="center">docenti </div></td> <td width="16%"><div align="center">studenti </div></td> </tr> </table>

43 <hr> <table width="100%" border="0" cellspacing="4" cellpadding="4"> <tr> <td width="30%" valign="top"><p>utilia</p> <UL> <LI><A href="#">pof</a> <LI><A href="#">segreteria</a> <LI><A href="#">iscrizioni</a> <LI><A href="#">circolari </A> <LI><A href="#">link utili </A></LI> </UL> <DIV class=relatedlinks> Progetti didattici <UL> <LI><A href="#">italiano</a> <LI><A href="#">filosofia</a> <LI><A href="#">scienze</a> <LI><A href="#">arte</a> </LI> </UL> </DIV><DIV > Volontariato <UL> <LI><A href="#">stage</a> <LI><A href="#">viaggi d'istruzione </A> <LI><A href="#">orario classi </A> <LI><A href="#">orientamento</a></li> </UL> </DIV><p> </p></td> <td width="1%" valign="top">

44 </td> <td width="70%"><p>titulus</p> <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </P> <P>Restantibus</P> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p></td> </tr> </table> <hr> <a href="#tornasu"><img src="imgs/tornasu.png" alt="torna all'inizio della pagina" width="25" height="25" border="0"> torna su </a> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </body> </html> Liste ordinate e non ordinate Come è possibile vedere nella pagina prova2 potrebbe risultare opportuno creare degli elenchi puntati, che in html vengono chiamate liste non ordinate, unordered list. Il tag è <ul></ul>. All'interno di questi tag si crea un tag list <li></li>. Vediamo i tag dell'elenco puntato di prova2: <ul> <li>progetti didattici</li> <li>italiano</li> <li>filosofia</li> <li>scienze</li> <li>arte</li> </ul>

45 Il tag che invece li trasforma in liste ordinate (ordered list) con tag <ol></ol>, anch'esso utilizzato con <li></li>; Vediamo i tag dell'elenco numerato di prova2: <ol> <li>pof</li> <li>segreteria</li> <li>iscrizioni</li> <li>circolari </li> <li>link utili</li> </ol> Per modificare le liste non ordinate utilizzare i fogli di stile: Utilizzando la barra degli strumenti della sezione Stili "css" dell'area Progettazione clic su Nuovo stile + seleziona Tipo selettore "Tag" + Utilizzando la freccina del Tipo di selettore "Tag" scegli "ol" + verifica che in "Definisci in" vi sia il nome del foglio di stile col quale si lavora + OK Si apre la finestra di dialogo di Modifica stile + operare le opportune variazioni delle proprietà con la Categoria Elenchi Tipo (disco, cerchio, quadrato, decimale, romano maiuscolo, romano minuscolo, alfabetico minuscolo, alfabetico maiuscolo, nessuno) Immagine punto elenco (URL, nessuno). La struttura di un sito: pagine di primo, secondo e terzo livello, la struttura ad albero. Dopo avere creato l'intestazione con immagine e testi, aggiungiamo una barra di navigazione per raggiungere le pagine che si possono definire di secondo livello, in quanto per definizione la pagina di primo livello è una Home Page, quella che abbiamo creato. Come possiamo vedere la struttura di un sito assomiglia ad un file system con le sue directory principali e secondarie: Si può decidere di lasciare i menù della home anche nelle pagine di secondo o terzo livello, eventualmente aggiungendo ulteriori collegamenti ipertestuali nel menù di secondario.

46 Il responsabile del sito potrebbe anche decidere di creare una Home con la sola barra di navigazione principale, aggiungendo quello secondario soltanto nelle pagine di secondo livello. In ogni caso potrebbe risultare opportuno inserire un link per la Home in ogni pagina. I collegamenti ipertestuali Occupiamoci dei collegamenti ipertestuali E' stato già detto che i collegamenti ipertestuali sono delle ancore che uniscono due punti, all'interno di una stessa pagina o tra due pagine. Il collegamento tra due pagine avviene con i seguente tag: <a href="index.htm">home</a> L'oggetto, nell'esempio il testo "home", è racchiuso tra due ancore, una di apertura <a> ed una di chiusura </a>. In questo modo il testo diventa un elemento di collegamento con una pagina indicata da href. Considerato che il testo recita "home" è normale che diventi un collegamento con la Home Page che ha nome file "index.htm". Se la barra di navigazione presenta 6 link, vuol dire che ogni link deve essere collegato con una pagina che potrebbe ragionevolmente avere nome simile al testo che la collega, in questo modo <h4><a <h4><a <h4><a href="index.htm">home</a> href="informazioni.htm">informazioni</a> href="percorsi_formativi.htm">percorsi formativi</a> </h4> </h4> </h4></td> <h4><a href="progetti.htm">progetti</a> </h4> <h4><a href="docenti.htm">docenti</a> </h4> <h4><a href="studenti.htm">studenti</a> </h4> Questo significa che bisogna creare delle pagine con nomi indicati dai collegamenti ipertestuali. Procedura: Apri la pagina index.htm con dreamwever + FIle + Salva con nome + assegna nome informazioni.htm + ok. La pagina informazioni.htm sarà identica alla home page: basterà modificare soltanto la cella del corpo testo, sostituendo Home page con Informzioni, e inserendo un testo significativo. Ripetere l'operazione per ogni pagina. Le parti restanti rimangono identiche. In questo modo tutte le pagine hanno barre di navigazioni identiche e funzionanti. Dalla pagina informazioni.htm e dalle altre sarà semplice raggiungere la Home in quanto su tutte è presente il link. Da ricordare:

47 i nomi dei file.htm non devono avere spazi: per esempio per la pagina indirizzi formativi è bene che venga collegata da un solido "underscore". Ecco il nome dei file corretto: indirizzi_formativi.htm. Si consiglia di utilizzare sempre nomi senza miuscole. Se le pagine di secondo e terzo livello si decide che vengano create in una cartella di nome "pages", il collegamento ipertestuale, in modo similare all'inserimento delle immagini, prevede l'indicazione della directory: <a href="pages/studenti.htm">studenti</a> Ovviamente tutte le pagine contenute nella directory "pages" vanno segnalate nel modo detto. Vediamo lo schema del nostro progetto con tutte le pagine interne alla cartella del sito: Vediamo lo schema del nostro progetto con tutte le pagine interne alla cartella "pages" del sito: Visualizziamo meglio i link esterni, ossia tra pagine:

48 Visualizziamo meglio i link interni, ossia dentro la stessa pagina:

49 Utilizza un modello di Dreamweaver I modelli del programma sono già preconfezionati e a disposizione del webmaster. Procedura: File + Nuovo + nella scheda Generali seleziona Strutture di pagina (accessibili) + visualizza la pagina che interessa nell'anteprima + Crea

50 Oppure Apri il programma + Seleziona Strutture di pagine (accessibili) + Scegli un modello adatto + Crea + Salva con nome progetto

51

52 Salva con nome appropriato che deve essere index.htm; per comodità nelle immagigni compare col nome prova 2.

53 Modificare opportunamente il falso testo inserendo quello corretto in modo simile al presente prova2 Un altro modello di Dreamwaever che va bene per le norme di accessibilità della legge italiana, consiste anche nell'utilizzare le disponibilità di Pages Designes (CSS)

54 Selezioniamo un modello che può andare bene per il nostro sito

55 Modifica opportunamente il falso testo inserendo quello corretto in modo simile al presente prova1 Si faccia attenzione alla creazione automatica di un foglio di stile esterno nominato "2col_leftNav.css". Questo foglio di stile viene messo automaticamente nella cartella sito insieme alla pagina creata. Se si vuole cambiare il posto del foglio di stile e inserirlo in una cartella chiamata ad esempio "aa_css" si dovrà operare in questo modo: Posiziona il puntatore sopra il foglio di stile 2col_leftNav.css dell'area File + Clic drag & drop dalla posizione attuale sino alla cartella "aa_css" che è quella di destinazione desiderata + si apre una finestra di dialogo che verifica i collegamenti con quel documento che si vuole spostare e chiede di aggiornare i collegamenti + rispondere Aggiorna In questo modo la pagina che noi abbiamo chiamato "prova1" cambia automaticamente riferimento di collegamento href="aa_css/2col_leftnav.css" al foglio di stile <link rel="stylesheet" href="aa_css/2col_leftnav.css" type="text/css"> come visibile nell'immagine

56 Verifica il progetto con diversi Browser I progetti web che si costruiscono in conformità delle norme di accessibilità devono essere verificabili con diversi browser, tra i quali Mozilla o Firefox, Opera, Internet Explorer o altri. In effetti il più diffuso è Internet Explorer della Microsoft, ma si affacciano alla ribalta prepotentemente sia i browser open source come Mozilla o Firefox che quello che attualmente è a pagamento ma viene spesso offerto gratuitamente (la versione che viene utilizzata in queste pagine è proprio Opera freeware). Le differenze basate su un codice HTML approvato dalla comunità internazionale di sviluppatori di pagine web, il W3C, sono quindi minime nei vari browser. Vediamo la pagina prova1 come è visibile in alcuni browser. 1. Firefox 1. Firefox: ottimo browser utile anche ad ipovedenti in quanto consente di ingrandire il testo anche oltre il 200% gradevole nell'aspetto, abbastanza leggero, veloce nell'esecuzione e ricco di opzioni per l'user.

57 2. Mozilla Vediamo la stessa pagina con Mozilla (la grafica di mozilla è quella del tema "Pinball", leggermente diversa da quella "Classica" o "Moderna"), browser meno accattivante dal punto di vista della grafica in quanto molto "spartano" ma ugualmente funzionale e utile per ipovedenti che hanno bisogno di ingrandire il testo per leggere. La "Suite Mozilla"oltre al browser "Navigator" per navigare in internet, presenta altri quattro programmi: uno di Posta elettronica, uno di produzione e/o modifica di Pagine Web con il sistema What You See Is What You Get (WYSIWYG), uno di Rubrica e uno di Chat :

58 3. Internet Explorer Internet Explorer è un discreto programma che viene installato automaticamente con il sisteme operativo WIndows. La sua schermata gradevole non è del tutto utilizzabile da ipovedenti che non possono, attualmente, utilizzare un ingrandimento testo a piacere.

59 4. Opera La versione precedente di Opera presentava un box di messaggi pubblicitari che era incluso nella finestra del browser. Con la nuova versione freeware il box pubblicitario è stato eliminato. Agile, leggero e multi-pagina, consente un'agevole lettura per ipovedenti permettendo di ingrandire il testo a piacimento.

60 Non ci sono sostanziali differenze di visualizzazione della pagina web index per un un Istituto Scolastico Superiore tra i vari browser, e questo grazie al codice corretto di Dreamweaver. Installa almeno tre browser diversi Per installare i tre browser puoi cliccare sui seguenti indirizzi e scaricare il pacchetto da installare per Windows: Mozilla: Le procedure di installazione sono veramente semplici. In ogni caso sono stati creati dei percorsi che indicano come comportarsi durante la procedura di installazione dei programmi: Installa Mozilla Suite in italiano Apri il collegamento ipertestuale di

61 Clic su "Mozilla Suite in italiano" Scarica prima il programma Zip Windows Si apre la finestra di dialogo valida per salvare il programma: Salva il file su disco in un'opportuna cartella di C:\Programmi Scarica il programma mozilla it-it.win32.installer.exe e installalo nella cartella mozilla di C:\Programmi

62 salva il file in C:\Programmi clicca Raggiungi l'unità disco C:\ Aprire la cartella Programmi

63 Crea nuova cartella assegnando il nome "mozilla" (senza virgolette) Apri la nuova cartella che hai chiamato "mozilla"

64 Salva il file che scarichi nella cartella mozilla Apri Risorse del Computer (operando con il doppio clic) Apri l'unità disco C:\ (operando con il doppio clic) Apri la cartella Programmi (operando con il doppio clic) Apri la cartella mozilla (operando con il doppio clic) Lancia il programma di esecuzione mozilla it-it.win32.installer.exe (operando con il doppio clic) Si apre la finestre di dialogo "Installazione di Mozilla - Benvenuti" Eseguire le istruzioni: chiudere tutte le applicazioni prima di continuare Clic Avanti Accettare le condizioni d'uso del programma

65 Accetta con clic su Accetta Scegliere l'opzione desiderata (consigliata la installazione completa, in quanto è presente un programma di posta elettronica, un'agenda e un programma di creazione di pagine web col sistema WYSIWYG, what you see i what you get, ossia quello che vedi è quello che crei) Lasciare che il programma venga installato nella cartella Mozilla posizionata all'ìinterno della cartella C:\Programmi, come visibile dall'indicazione Cartella di destinazione

66 Clic Avanti Evitare di inserire l'icona in Avvio rapido del computer lasciando deselezionata la casellina quadrata Clic Avanti Ultima finestra utile per uscire dall'installazione

67 Clic Installa Richiesta di rendere Mozilla il Browser predefinito di Internet: scelta lasciata all'utente Clic su Sì se si vuole impostarlo. Aprendo internet Explorer sarà possibile reimpostarlo come Browser predefinito Allargare la finestra e navigare inserendo gli indirizzi nell'apposito indirizzario. Configurare Il Browser di navigazione in Internet Apri il Browser Mozilla Start + Tutti i programmi + Mozilla + Mozilla

68 Clic su Modifica + Preferenze Si apre la dialog box (finestra di dialogo) delle preferenze

69 Scheda aspetto Modifica l'aspetto Scheda generale Seleziona quale programma della Suite aprire all'avvio: Opzioni: a. navigatore di internet b. Composer di Pagine Web c. Posta e gruppi di discussione Seleziona il tipo di barra degli strumenti: Opzioni Immagini e testo Solo immagini solo testo Ulteriori Opzioni Utilizza il testo alternativo o tooltip quando si posiziona il mouse sull'icona della barra degli strumenti Visualizza le icone che caratterizzano i siti web Utilizza scorrimento sino alla fine Abilita la riscalatura automatica delle immagini

70 Modifica la scheda Caratteri Possibilità di scegliere Il tipo di carattere della codifica Il carattere proporzionale se con le grazie o senza (le grazie dei caratteri) La dimensione del proporzionale (scelta possibile da 8 a 72) Il tipo carattere graziato Il tipo caratter senza grazie Il corsivo Il carattere fantasioso La larghezza fissa Consentire ai documenti di utilizzare altri carattere Impostare la risoluzione in dpi dei caratteri (dpi) Installa il programma Firefox Firefox o direttamente mediante la pagina o direttamente mediante la pagina Raggiungi il sito sopra indicato clic su Installer Windows

71 Si apre la finestra di dialogo utile a salvare il programma su disco Clic su Save (salva) in un'opportuna cartella di C:\Programmi Dopo avere scaricato il programma Firefox Firefox Setup 1.5.exe Doppio clic sul file Firefox Setup 1.5.exe per lanciare il programma di installazione Si aprono due finestre temporanee, una di estrazione dei file e una di verifica delle impostazioni

72 Si apre la finestra di dialogo "Installazione di Firefox - Benvenuti" clic su Avanti

73 - Home Clic Avanti Clic su Standard + Avanti Clic Avanti Finestra di avviso dello stato di installazione in corso

74 Clic su fine Si apre automaticamente il browser Firefox con la finestra di richiesta di importare le impostazioni dei browser già utilizzati nel computer utilizzare

75 Selezionare, se interessa, il browser principale con le impostazioni maggiori. Clic Avanti Finestra di richiesta di utilizzare con Firefox una finestra leggera con motore di ricerca Lasciare l'indicazione consigliata + Avanti Finestra di riepilogo oggetti importati

76 Clic su fine. Si apre il browser con la finestra di richiesta di utilizzare Firefox come browser predefinito (di default) Scegliere l'opzione desiderata Installa il programma Opera Opera: o direttamente mediante la pagina Raggiungi il sito sopra indicato e si apre di default la finestra per salvare o aprire il file di installazione. Se non si apre clic su clic here + salva su disco il file ow32enen851.exe

77 Dopo avere scaricato il programma Opera Doppio clic sul file ow32enen851.exe per lanciare il programma di installazione Si apre la finestra di dialogo "Installazione di Opera - Benvenuti" Finestra di accettazione delle condizioni della licenza di uso

78 - Home Selezione del luogo nel quale installare il programma Finestra di dialogo di opzioni delle icone da creare

79 Icona di informazione di installazione pronta Tempo necessario all'installazione automatica

80 Clic su Finish I fogli di stile I fogli di stile prendono il nome ed estensione ".css" perché derivano dall'inglese Cascading Style Sheets. Sono elencazioni (Cascading, a cascata) di qualità di formattazione (Style, stile) della pagina (Sheets, foglio) e dei suoi contenuti, ossia di come essa deve essere visualizzata nelle sue parti costitutive, siano esse parti iconografiche e/o argomentative. In poche parole i fogli di stile consentono di formattare la pagina assegnando le seguenti qualità: Categoria tipo (si occupa essenzialmente dello stile del testo scritto) tipo carattere (Aria, Times new roman, verdana ecc.) grandezza carattere (in percentuale, in pixel, punti pollici, millimetri e altro) Spessore (normale, grassetto, grassetto spesso, sottile, spessore numerico) Stile (normale, corsivo, obliquo) variante (normale, maiuscoletto) Altezza riga (normale o valore numerico) Maiuscole/minuscole (iniziale maiuscolo, maiuscolo, minuscolo, non specificato) effetti (sottolineato, linea sopra, barrato, intermittente, nessuno) colore carattere

81 Categoria Sfondo (si occupa delle qualità dello sfondo della pagina, dell'oggetto o del tag al quale viene applicato) Colore sfondo Immagine sfondo Ripetizione (no, sì, orizzontale o verticale) Allegato (fissa o scorrevole, con la seconda opzione impedendo che si perda l'immagine fissa facendo scorrere il testo con la scroll-bar) Posizione orizzontale (sinistra, centro, destra, valore) Posizione verticale (superiore, centro, inferiore, valore)

82 Categoria Blocco di testo (definisce la formattazione di un intero gruppo di testo) Spaziatura tra le parole (normale o valore numerico) Spaziatura tra le lettere (normale o valore numerico) Allineamento verticale (Linea superiore, apice, pedice, superiore, bordo superiore testo, centrale, inferiore, bordo inferiore testo, valore numerico) Allineamento testo (sinistra, destra, centrato, giustifica) Rientro (valore in pixel o punti, pollici, cm, mm, pica, ems, ecs, %) Spazio vuoto (normale, pre, a capo disattivato) Visualizza (nessuna, in-linea, blocco, voce elenco, run-in, compatto, indicatore, tabellain-linea, tabella-riga-gruppo, tabella-piè-di-pagina, tabella-riga, tabella-colonna-gruppo, tabella-colonna, tabella-cella, tabella-didascalia)

83 Categoria Elementi di pagina Larghezza Mobile Altezza Spazio dell'elemento al bordo (uguale per tutto, oppure superiore, destra, inferiore, sinistra) Margine (uguale per tutto, oppure superiore, destra, inferiore, sinistra) Categoria Bordi Categoria Bordo Stile (uguale per tutto, oppure superiore, destra, inferiore, sinistra) Larghezza (uguale per tutto, oppure superiore, destra, inferiore, sinistra) Colore (uguale per tutto, oppure superiore, destra, inferiore, sinistra)

84 Categoria Elenco Tipo (disco, cerchio, quadrato, decimale, romano maiuscolo, romano minuscolo, alfabetico minuscolo, alfabetico maiuscolo, nessuno) Immagine punto elenco (URL, nessuno) Posizione (interno, esterno)

85 Categoria Posizione Tipo (assoluto, relativo, statico) Visibilità (ereditato, visibile, nascosto) Larghezza (automatico, valore numerico) Ordine (automatico, valore numerico) Altezza (automatico, valore numerico) Riversamento (visibile, nascosto, scorrevole, automatico) Posizione (in alto, destro, inferiore, sinistra) RItaglio (in alto, destro, inferiore, sinistra) Categoria Estensioni Interruzione pagina Prima (automatico, sempre, sinistra, destra) Dopo (automatico, sempre, sinistra, destra) Effetto visivo Cursore (mano, croce, testo, attesa, predefinito, guida, est, nordest, nord, nordovest, ovest, sudovest, sud, sud est, automatico) Filtro Alpha(Qpacity=?, FinishOpacity=?, Style=?, Sta BlendTrans(Duration=?) Blur(Add=?, Direction=?, Strength=?) Chroma(Color=?) DropShadow(Color=?, OffX=?, OftY=?, Positive= FIipH FIipV GIow(Color=?, Strength=?) Gray Invert Light

86 Mask(Color=?) RevealTrans(Duration=?, Transition=?) Shadow(Color=?, Direction=?) Wave(Add=?, Freq=?, LightStrength=?, Phase= Xray Tutte queste caratteristiche dei fogli di stile necessiterebbero di un approfondimento specifico e lo spazio tipico di una trattazione completa che va oltre i limiti degli argomenti che ci si è imposti di trattare, ossia creare siti accessibili con Dreamweaver. Per questo motivo tratteremo soltanto gli aspetti più diffusi delle caratteristiche dei fogli di stile. Tipi di fogli di stile 1. - Locazione dei CSS I fogli di stile possono essere interni alla pagina oppure esterni. I css interni sono posizionati tra il tag <head> e quello di chiusura </head>. Non sono vietati, ma sconsigliati perché se creiamo 40 pagine tutte con css interni e poi decidessimo di modificare le pagine, dovremmo modificare i css di tutte le pagine, con inutile dispendio di tempo. Le pagine vanno costruite, invece, con file esterni che terminano con estensione ".css" e vengono collegati mediante un breve marcatore che specifica anche il luogo del foglio di stile e il suo nome. Ad esempio questa pagina presente un foglio di stile che si chiama generale".css" e si trova in una cartella dal nome "aa_css". Questa cartella "aa_css" si trova all'interno della cartella del sito che abbiamo creato all'inizio, allo stesso livello della cartella "imgs" che va creata per inserire le immagini.

87 <link href="aa_css/generale".css"" rel="stylesheets" type="text/css"> Con questo foglio di stile esterno possiamo modificare contemporaneamente tutte le pagine: basta modificare il foglio ".css" e si modificheranno, immediatamente, tutte le pagine con il link a questo documento Tipologia in base all'oggetto al quale si riferisce In ragione degli oggetti ai quali si riferiscono, i fogli di stile sono distinguibili in: 1. stili personalizzati o stili di classe: permettono di assegnare qualità di formattazione a sezioni o blocchi di testo; 2. stili HTML, sono attributi assegnati a marcatori, ad esempio il tag body che caratterizza la pagina oppure a quello h1 che contraddistingue i titoli; 3. stili di selettori che assegnano qualità/attributi a gruppi di marcatori, ad esempio td con h2 che assegna il titolo di seconda grandezza h2 a tutte le celle; oppure assegnare valori di formattazione specifici a tutti i tag che presentino valore id (identificator) = top (nome messo a caso, convenzionalmente per le parti di testata della pagina). Crea un foglio di stile Procedura: Clic su Nuovo stile CSS dell'area Progettazione + si apre la finestra di dialogo che consente tre opzioni Assegna un nome opportuno + seleziona il tipo di selettore + "Definisci in" per creare un css esterno e non interno alla pagina mantieni selezionato "Nuovo foglio di stile", per crearlo interno alla pagina spunta "Solo questo documento" + clic OK + Salva in una cartella apposita (ad esempio aa_css) oppure nella cartella sito + Salva + Definisci gli stili con la finestra di dialogo.

88

89 Associa un foglio di stile già creato Se abbiamo già creato un foglio di stile, ad esempio per un altro sito, e vogliamo utilizzarlo nuovamente non dobbiamo fare altro che copiare il nostro foglio che chiameremo "old".css"" nella cartella dei nostri fogli di stile "aa_css" e poi cliccheremo su "Associa foglio di stile" presente nella sezione Stili CSS dell'area Progettazione: Clic su "Associa foglio di stile" + si apre la finestra di dialogo di associazione + Sfoglia + Seleziona foglio desiderato "old".css"" + OK + OK

90 Importa un foglio di stile Il browser Netscape 4.5 non supporta il marcatore <link href="aa_css/generale".css"" rel="stylesheets" type="text/css"> Per questo motivo è bene sostituirlo con un nuovo tag che consenta la lettura anche mediante il browser Netscape suddetto. Per fare ciò bisogna "Importare" il foglio di stile nel seguente modo: Posiziona il puntatore sopra il titolo del foglio di stile che nella prossima immagine il foglio si chiama "generale.css" + tasto destro + Associa foglio di stile... + seleziona la voce "Importazione" al posto di "Collegamento" + pigia OK.

91 Si apre una finestra di dialogo con due opzioni Collegamento e Importazione: clic su Importazione Il nuovo marcatore è il seguente: <style --> </style> type="text/css"> url("aa_css/generale.css"); Modifica ed elimina un css Con la medesima barra di strumenti della sezione Stili CSS dell'area Progettazione si possono modificare i fogli (dopo averli selezionati) oppure eliminandoli. Altro modo per farlo consiste nell'usare il tasto destro

92 Visualizza il codice di un foglio di stile Il programma Dreamweaver oltre che aprire, visualizzare e modificare le pagine web, consente anche di tali operazioni per le pagine ".css"; per ispezionare il codice dei fogli di stile basta operare un doppio clic sul foglio stesso Visualizziamo il foglio creato per la pagina prova1: Il codice dei fogli di stile è molto semplice: selettore { proprietà:valore; } Selettore è body, la proprietà è font family (famiglia dei font), il valore è Arial, sans-serif.

93 Il foglio di stile della pagina Creiamo un "css" che sia applicato alla pagina. Procedura: Utilizzando la barra degli strumenti della sezione Stili "css" dell'area Progettazione clic su Nuovo stile + seleziona Tipo selettore "Tag" + Utilizzando la freccina del Tipo di selettore "Tag" scegli "body" + Definisci in "Nuovo foglio di stile" + OK in questo modo: Dopo il clic su OK si apre la finestra di dialogo di "Salva con nome": scegliere una cartella opportuna per salvare il file."css" + Salva Dopo il salvataggio si apre la finestra di dialogo di assegnazione degli attributi della formattazione che abbiamo già visto + Assegnamo gli stili a piacimento + OK

94 Scegli la triade dei caratteri (Arial, Helvetica, Sans Serif) + Dimensione del testo + eventuale spessore + eventuale stile + colore carattere. Per quanto riguarda la Dimensione del testo è bene sapere che per le pagine accessibili deve essere possibile ingrandire i caratteri, quindi è opportuno utilizzare sempre una dimensione in percentuale. Evitare, inoltre, l'uso dell'unità di misura "ems", che deriva dall'uso tipografico di utilizzare il quadrato della "M". Questo perché alcuni browser non riescono a visualizzare in modo corretto gli "ems". La triade dei caratteri è sempre necessaria nelle definizione dei fogli di stile, perché il secondo è alternativo al primo qualora il computer che scarica la pagina web non possieda il primo font. Il terzo carattere è alternativo ai primi due per la stessa ragione. Tranne che non sia necessario, evitare di modificare l'altezza della riga, il carattere Maiuscoletto ché può stancare la lettura. Utilizzare il sottolineato, linea sopra, barrato ecc. solo per una classe applicabile a qualsiasi tag. Spesso nelle pagine web sono presenti tabelle; per formattare il testo contenuto nelle tabelle i automatico dreamweaver crea selettori multipli: body, td, th { Se non si vuole assegnare proprietà di formattazione anche alle celle e intestazioni di cella, allora si può operare direttamente sul codice: Copia + Incolla i selettori con le proprietà body, font-family font-size color td, Arial, : : : th Helvetica, 100%; #000000; { sans-serif;

95 background-color text-align } body, background-color font-family font-size color text-align } : #ffffff; justify; : td, th #ffffff; : Arial, : : Helvetica, { sans-serif; 100%; #000000; justify; : : + elimina td, th dal primo gruppo di selettori + elimina dal secondo gruppo body e introduci le opportune modifiche desiderate alle proprietà e/o ai valori. body font-family font-size color background-color text-align } td, background-color font-family font-size color } { : Arial, : Helvetica, sans-serif; 90%; #000000; #ffffff; justify; : : : th : : Times New : : { #ffffff; Roman, Times, 100%; #000000; serif; Con queste modifiche il corpo pagina avrà testo Arial 90% giustificato, mentre le tabelle avranno testo Times new roman 100% allineato a sinistra. Il foglio di stile va, ovviamente, salvato. Aggiungere selettori al foglio di stile già creato Per aggiungere altri selettori al foglio di stile già creato operiamo in questo modo: Clic su Nuovo stile + seleziona Tipo selettore "Classe" + verifica che in "Definisci in" vi sia il nome del foglio di stile + OK

96 Ai apre la finestra di dialogo utile alla creazione delle proprietà del nuovo selettore + scegliere le opzioni desiderate. Se selezioniamo tipo di selettore Classe e in alto inseriamo ad esempio il nome del selettore "top", quando viene aggiunto al foglio di stile il nuovo selettore Classe, questi presenta un "." (punto) iniziale. Tutti i selettori di Classe devono cominciare con il punto. Dreamweaver lo fa per noi, ma non lo dimentichiamo se interveniamo in modo diretto sul codice "css". Vediamo, come esempio, il selettore Classe che abbiamo chiamato "orange" nel foglio di stile "generale.css" di questa pagina: Assistenza nella realizzazione di css mediante codice Utilizzare direttamente il codice dei "css" non è molto difficile, perché il programma interviene suggerendo tra le varie possibilità disponibili. Ad esempio proviamo a cambiare il colore del selettore orange: selezioniamo il valore della proprietà colore compreso i due punti (vedi immagine) + cancella con la tastiera + digita due punti + si apre la finestra di dialogo di scelta visiva del colore + seleziona con un clic il colore desiderato

97 Automaticamente il programma inserisce il codice del colore composto da cancelletto "#" + codice esadecimale, composto da 6 caratteri alfanuerici che comprendono tutti i numeri da "0" sino a "9" più le lettere alfabetiche da "a" sino a "f". Modifica i tag dei titoli Ingrandire il testo per evidenziare titoli, titoli di argomenti, capitoli e altro è molto importante per la comunicazione visiva. Proviamo a vedere le grandezze del testo in ragione del marcatore visibile nel pannello "Testo" Visualizza la pagina con le grandezze dei vari titoli I marcatori di pagina Il pannello Testo mostra i tag direttamente senza indicarne la corrispondente grandezza titolo1 <h1>testo</h1> titolo2 <h2>testo</h2>

98 titolo3 <h3>testo</h3> titolo4 <h4>testo</h4> titolo5 <h5>testo</h5> titolo6 <h6>testo</h6> preformattato <pre>testo</pre> Si consiglia di non utilizzare i marcatori B (bold, grassetto), I (italic, corsivo), S (forte enfasi), in modo diretto, ma di utilizzare i fogli di stile come detto in precedenza. Modificare i marcatori di pagina Procedura: Utilizzando la barra degli strumenti della sezione Stili "css" dell'area Progettazione clic su Nuovo stile + seleziona Tipo selettore "Tag" + Utilizzando la freccina del Tipo di selettore "Tag" scegli "h1" + verifica che in "Definisci in" vi sia il nome del foglio di stile col quale si lavora + OK Si apre la finestra di dialogo di Modifica stile + operare le opportune variazioni delle proprietà. Questa pagina, ad esempio, presenta le prime cinque titolazioni modificate: h1 { font-family : Arial, Helvetica, sans-serif; font-size : 180%; font-weight : bold; color : #ffff00; background-color : #0000ff; } h2 { font-family : Arial, Helvetica, sans-serif; font-size : 150%; font-weight : bold; color : #ffff00; background-color : #0000ff; } h3 {

99 } font-family : Arial, Helvetica, sans-serif; font-size : 125%; font-weight : bold; color : #ffffff; background-color : #0000ff; } h4 { font-family : Arial, Helvetica, sans-serif; font-size : 110%; font-weight : bold; color : #0000ff; background-color : #ffff00; } h5 { font-family : Arial, Helvetica, sans-serif; font-size : 100%; color : #009900; background-color : #ffffff; Per modificare il testo in Bold, corsivo ecc. crea un foglio di stile nel solito modo, ossia con un clic su Nuovo stile + seleziona Tipo selettore "Classe" + assegna nome significativo (ad esempio "grassettocorsivo") + si apre la finestra di dialogo di creazione del "css" + seleziona Spessore (normale, grassetto, grassetto spesso, sottile, spessore numerico) e Stile (normale, corsivo, obliquo). A questo punto seleziona il testo + posiziona il puntatore su "grassettocorsivo" nella Sezione Stili "css" + tasto destro + Applica I colori dei collegamenti ipertestuali I browser creano di default una sottolineatura alle parole che contengono collegamenti ipertestuali. Allo stesso modo creano colori predefiniti. Se i colori predefiniti del browser non ci stanno bene e vogliamo cambiarli, usiamo il foglio di stile per indicarli a tutta la pagina.

100 Procedura: Per una pagina che non presenta "css" già associati 1. - Crea un "css" interno ed Esporta Clic su Elabora + Proprietà di pagina... + si apre la finestra di dialogo della proprietà di pagina + seleziona la Categoria "Collegamenti" + assegna i colori ai collegamenti ricordando che: <style type="text/cs indica il marcatore del foglio di stile s"> interno alla pagina <!-- a:link color: #0000FF; } { a:visited color: #000033; } { a:hover color: #FF0000; } { indica il colore ipertestuale del collegamento indica il colore ipertestuale visitato del collegamento indica il colore del collegamento ipertestuale con il puntatore soverapposto a:active { color: indica il colore del collegamento #CC0000; ipertestuale attivo in quel momento } --> </style> indica la chiusura del marcatore del foglio di stile interno alla pagina

101 Il foglio di stile interno può essere esportato all'esterno: Seleziona il foglio di stile interno posizionando il puntatore sopra il css "Stile" della sezione Stili CSS dell'area Progettazione + tasto destro + Esporta + Salva il foglio di stile con nome

102 Salva il foglio di stile con nome

103 2. - Elimina il "css" interno e Associa quello esportato a. Seleziona il foglio di stile interno posizionando il puntatore sopra il css "Stile" della sezione Stili CSS dell'area Progettazione + tasto destro + Elimina oppure Seleziona il foglio di stile interno con un clic + Elimina con un clic b. Seleziona la dicitura nessuno... + tasto destro + Associa foglio di stile... + si apre la finestra di dialogo con l'opzione Collegamento + sfoglia + seleziona e associa il "css" desiderato Finestra di dialogo di collegamento del foglio di stile

104 Utilizza un codice preconfezionato Con un doppio clic apri il foglio di stile + incolla gli elementi di codice sotto riportati: a { font-size : 100%; color : #000000; font-family : Arial, Helvetica, sans-serif; background-color : #ffffff; } a:visited { color : #0000ff; font-family : Arial, Helvetica, sans-serif; background-color : #ffffff; } a:active { color : #0000ff; font-family : Arial, Helvetica, sans-serif; background-color : #ffffff; } Le parole che contengono un collegamento ipertestuale possono anche essere diverse nello stile, nella grandezza, nel tipo carattere. Il colore di Rollover del collegamento, ossia il cambiamento del colore al passaggio del puntatore, può essere anche associato ad uno sfondo diverso, ad esempio uno sfondo scuro con testo chiaro come "hover" di un tresto scuro su sfondo chiaro. prova il testo di rollover Visualizza la differenza del testo con link e Rollover con una sola immagine Utilizza due diverse formattazioni per i collegamenti ipertestuali Dopo avere assegnato alla pagina la formattazione del collegamenti ipertestuali, potrebbe risultare utile crearne altri per aree di pagina con colore di sfondo diversi. Praticamente si possono applicare due formattazioni diverse ai collegamenti ipertestuali creando un opportuno selettore interno al foglio di stile. Immaginiamo di avere uno sfondo pagina bianco e una tabella di navigazione e una tabella intestazione con sfondo blu. La pagina deve avere link blu su sfondo bianco, mentre la tabella di navigazione link bianco grassetto con sfondo blu.

105 Creiamo prima gli elementi di codice del foglio di stile come indicato sopra per la pagina, poi aggiungiamo un selettore che chiamiamo "navigazione": Procedura: Nuovo stile + seleziona Tipo selettore "Classe" + Assegna nome "navigazione" + Definisci in "generale.css" + OK + assegna formattazione carattere: nella categoria "Tipo" scegli Arial ecc., Grassetto, 100% grandezza, colore testo bianco, nella categoria Sfondo scegli Sfondo "Blu" Vediamo il tag inserito nel foglio di stile "generale.css":.navigazione { font-family: Arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; color: #FFFFFF; background-color: #0000FF; } Seleziona il testo che deve assumere una formattazione diversa Prova "cc.htm" due formattazioni diverse per i collegamenti ipertestuali valido soltanto con il browser Opera Vediamo la pagina prova "cc.htm" con i quattro browser, rispettivamente Firefox, Mozilla, Internet Explorer e Opera:

106 Attenzione: perché tutti i browser si comportino nello stesso modo, è opportuno che la sequenza dei collegamenti sia a:link, a:visited, a:hover Inserisci immagine float Inserisci un'immagine come si è già visto in precedenza. Digita uno spazio e poi inserisci un testo abbastanza lungo da andare a capo. SI ottiene un effetto simile alla prossima immagine: Per consentire all'immagine di avere il testo accanto lungo la sua altezza si può utilizzare un foglio di stile: Apri con un doppio clic il foglio di stile già presente nella pagina + digita il seguente testo:.immagine { float: left; margin: 15px border: 0px } Il selettore è immagine, la proprietà è float e il valore sinistra; altra proprietà è quella con 15 pixel di distanza del testo dall'immagine; bordo immagine =0. Procedura Seleziona l'immagine + posiziona il puntatore sopra il selettore "immagine" del foglio di stile della pagina + tasto destro + Applica

107 Visualizza la pagina "dd.htm" per verificare un'immagine che presenti al suo fianco il testo senza utilizzo della tabella Un collegamento Nella Home Page di un sito deve essere necessario uno o più collegamenti di posta che consentano di contattare uno o più uffici o responsabili di servizi. Per un Istituto superiore può essere utile un solo collegamento di posta generico della Scuola. Il responsabile incaricato di scaricare la posta elettronica la smisterà, poi, opportunamente. Per facilitare le persone ipovedenti è bene che il link di posta sia realizzato in forma di testo. Questo però non toglie che una piccola icona di una busta o altro, che possa indicare il contatto tra navigatore e Istituzione Pubblica, possa essere proficuamente inserita. Il collegamento ipertestuale è il seguente: <a Al posto di "Scrivi" si possono inserire altre parole, tipo Contattaci, "Inviaci un mail" o altro. L'immagine avrà il suo tag specifico: <p><a src="imgs_index/ .gif" alt="cliccando qui si apre il programma di invio della posta elettronica per suggerimenti. consigli, correzioni" width="37" height="27" border="0"></a></p> Osserviamo attentamente il testo alternativo dell'immagine, che sappiamo essere obbligatorio sia per la correttezza del codice sia per le norme di accessibilità: alt="cliccando qui si apre il programma di invio della posta elettronica per suggerimenti. consigli, correzioni" Scrivi

108 Inserire un testo alternativo ad un link testuale Anche i link su parole o frasi possono avere un testo alternativo che abbia la finalità di allargare le conoscenze del navigatore e consentirgli di orientarsi meglio. Il testo alternativo del link testuale è un attributo del marcatore <a> e si chiama "title" (titolo): Posiziona il mouse sopra questo testo per visualizzare il testo alternativo Non bisogna però abusare dell'attributo title per i collegamenti testuali, in quanto finirebbero per appesantire di testo inutile i collegamenti che sono già abbastanza intuitivi. Procedura: Seleziona il testo che si vuole rendere collegamento + Inserisci + Collegamento ipertestuale + si apre la finestra di dialogo nella quale inserire la pagina da collegare (esempio.htm) o l'ancora (#nome_ancora) + digita il testo nel campo Titolo + OK Crea un form per inviare registrazioni a mezzo posta elettronica La versione 2004 di Dreamweaver non presenta pagine con "form" preconfezionate. Per questo suggeriamo di utilizzare quella allegata che invia messaggi di posta elettronica di coloro che si iscrivono per ottenere un servizio. Il messaggio viene ricevuto con elementi di codice (nomi) che non disturbano in modo relativo la lettura dei dati. Apri la pagina di iscrizione

109 Prima di attivare il servizio dell'utente controllare i dati inviati con posta elettronica posta elettronica inviata per prova required=cognome,nome, ,indirizzo,citta,provincia,nazione, ,giorno,m ese,anno,code,sesso missing_fields_redirect=http://web.tiscali.it/homedirectory/errore.html redirect=http://web.tiscali.it/homedirectory/conferma.html cognome=tex nome=joe indirizzo=via melitto, 17 citta=capurso provincia=ba CAP= nazione=it telefono_fisso= telefono_mobile= giorno=17 mese=novembre anno=1917 code=rtyuifghj sesso=m Stato civile= testo=motivo dell'iscrizione richiesta documenti autorizzazione=si submit= Invia metti il text area La validazione del W3C Il linguaggio HTML fu creato per consentire a tutti i navigatori di accedere a risorse comuni mediante collegamento ad una rete di computer che mettevano a disposizione pagine di documenti da condividere. Il codice è soggetto a mutazioni nel tempo che tendono a facilitare la navigazione, soprattutto da parte degli utenti più svantaggiati dal punto di vista fisico e/o culturale. Per questo motivo il sito di un'istituzione pubblica deve possedere un codice corretto e validato da enti internazionali. Queste pagine sono validate dal W3C, che è il Consorzio delle 3 W (WWW), istituito per i web master internazionali invitati ad utilizzare un codice approvato. Per validare la pagine del sito prima di metterle "online" è sufficiente raggiungere la pagina del consorzio internazionale e verificare direttamente sul sito:

110 La pagina si presenta come nell'immagine sotto riportata: Clic su Sfoglia + si apre la finestra di dialogo "Upload file" + cerca e seleziona la pagina nel tuo computer da validare + Apri + Check + leggi il risultato nella pagina che si visualizza dopo il comando Check.

111 Ecco il risultato di una pagina di questo corso:

112 A questo punto basta copiare il codice indicato nella pagina + Clic su Dividi del programma Dreamweaver + clicca dentro la finestra di ispezione del tag + raggiungi la fine del documento e prima del tag </body> incolla il codice copiato dalla pagina del W3C

113 Dividi la pagina del programma per ispezionare i tag, clicca al suo interno, raggiungi la fine della pagina e incolla il codice copiato dalla pagina internet: Prima di incollare il codice è sempre bene operare la validazione per ogni singola pagina. Per validare il foglio di stile basta operare con un clic su "CSS Validation Service" della pagina dalla quale hai copiato il codice. Si apre la pagina di validazione del foglio di stile:

114 Ripeti l'operazione di upload del file css, che nel nostro corso è "generale.css" Clic su Sfoglia + si apre la finestra di dialogo "Upload file" + cerca e seleziona la pagina nel tuo computer da validare + Apri + Controlla che si visualizza dopo il comando Controlla + leggi il risultato nella pagina

115 Dalla pagina risulta chiaramente che il foglio di stile non contiene errori. La validazione di Bobby La validazione con Bobby può essere effettuata soltanto dopo il trasferimento online delle pagine. Il sito è disponibile al seguente indirizzo:

WWW.ICTIME.ORG. NVU Manuale d uso. Cimini Simonelli Testa

WWW.ICTIME.ORG. NVU Manuale d uso. Cimini Simonelli Testa WWW.ICTIME.ORG NVU Manuale d uso Cimini Simonelli Testa Cecilia Cimini Angelo Simonelli Francesco Testa NVU Manuale d uso EDIZIONE Gennaio 2008 Questo manuale utilizza la Creative Commons License www.ictime.org

Dettagli

Siti web e Dreamweaver. La schermata iniziale

Siti web e Dreamweaver. La schermata iniziale Siti web e Dreamweaver Dreamweaver è la soluzione ideale per progettare, sviluppare e gestire siti web professionali e applicazioni efficaci e conformi agli standard e offre tutti gli strumenti di progettazione

Dettagli

Dichiarazione di accessibilità del sito di Ulisse - Nella rete della scienza

Dichiarazione di accessibilità del sito di Ulisse - Nella rete della scienza Dichiarazione di accessibilità del sito di Ulisse - Nella rete della scienza I riferimenti riguardano quanto indicato nelle Recommendation del World Wide Web Consortium (W3C) ed in particolare in quelle

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

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

REQUISITO DI ACCESSIBILITA

REQUISITO DI ACCESSIBILITA ISTITUTO COMPRENSIVO Pascoli - Crispi Via Gran Priorato, 11-98121 Messina Via Monsignor D'Arrigo, 18-98122 Messina Tel/Fax. 09047030 090360037 e-mail: meic87300t@istruzione.it / meee00800r@istruzione.it

Dettagli

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict.

Conformità: Conforme; tutte le pagine sono realizzate con linguaggio XHTML 1.0 Strict. Tasti di accesso rapido Al fine di migliorare l'accessibilità del sito sono stati definiti i seguenti tasti di accesso rapido, per attivare le principali funzionalità offerte: [H] = Homepage [R] = Ricerca

Dettagli

Dichiarazione di Accessibilità

Dichiarazione di Accessibilità Dichiarazione di Accessibilità Requisito n. 1 : Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili

Dettagli

POWERPOINT è un programma del pacchetto Office con il quale si possono facilmente creare delle presentazioni efficaci ed accattivanti.

POWERPOINT è un programma del pacchetto Office con il quale si possono facilmente creare delle presentazioni efficaci ed accattivanti. 1 POWERPOINT è un programma del pacchetto Office con il quale si possono facilmente creare delle presentazioni efficaci ed accattivanti. Le presentazioni sono composte da varie pagine chiamate diapositive

Dettagli

bla bla Documents Manuale utente

bla bla Documents Manuale utente bla bla Documents Manuale utente Documents Documents: Manuale utente Data di pubblicazione lunedì, 14. settembre 2015 Version 7.8.0 Diritto d'autore 2006-2013 OPEN-XCHANGE Inc., Questo documento è proprietà

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

Verifica di Accessibilità del sito www.aots.sanita.fvg.it

Verifica di Accessibilità del sito www.aots.sanita.fvg.it Verifica di Accessibilità del sito www.aots.sanita.fvg.it NOTE: Verifica effettuata in base ai requisiti descritti nell allegato A del Decreto Ministeriale 8 luglio 2005, ai sensi della legge n.4 del 9

Dettagli

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004

SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 SITI WEB DEL COMUNE DI PESARO, RAPPORTO DI CONFORMITA' AI REQUISITI TECNICI DELLA LEGGE N.4-9 GENNAIO 2004 Le pagine del sito istituzionale e dei siti tematici del Comune di Pesaro sono state progettate

Dettagli

Decreto Ministeriale 8 luglio 2005. (Ministro per l Innovazione e le tecnologie) Allegato A

Decreto Ministeriale 8 luglio 2005. (Ministro per l Innovazione e le tecnologie) Allegato A Decreto Ministeriale 8 luglio 2005. (Ministro per l Innovazione e le tecnologie) Allegato A Verifica tecnica e requisiti tecnici di accessibilità delle applicazioni basate su tecnologie internet 1. Premessa

Dettagli

APPUNTI WORD PER WINDOWS

APPUNTI WORD PER WINDOWS COBASLID Accedemia Ligustica di Belle Arti Laboratorio d informatica a.a 2005/06 prof Spaccini Gianfranco APPUNTI WORD PER WINDOWS 1. COSA È 2. NOZIONI DI BASE 2.1 COME AVVIARE WORD 2.2 LA FINESTRA DI

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

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

Esame di Informatica CHE COS È UN FOGLIO ELETTRONICO CHE COS È UN FOGLIO ELETTRONICO CHE COS È UN FOGLIO ELETTRONICO. Facoltà di Scienze Motorie

Esame di Informatica CHE COS È UN FOGLIO ELETTRONICO CHE COS È UN FOGLIO ELETTRONICO CHE COS È UN FOGLIO ELETTRONICO. Facoltà di Scienze Motorie Facoltà di Scienze Motorie CHE COS È UN FOGLIO ELETTRONICO Una tabella che contiene parole e numeri che possono essere elaborati applicando formule matematiche e funzioni statistiche. Esame di Informatica

Dettagli

Nuovo documento Anteprima di stampa Collegamento Zoom. Apri Controllo ortografico Annulla Sorgente dati. Salva Controllo automatico Ripristina Gallery

Nuovo documento Anteprima di stampa Collegamento Zoom. Apri Controllo ortografico Annulla Sorgente dati. Salva Controllo automatico Ripristina Gallery Writer è il programma per l'elaborazione di testi della suite OpenOffice.org che ti consente di creare documenti, lettere, newsletter, brochures, grafici, etc. Gli elementi dello schermo: Di seguito le

Dettagli

Layout dell area di lavoro

Layout dell area di lavoro Layout dell area di lavoro In Windows, Dreamweaver fornisce un layout che integra tutti gli elementi in una sola finestra. Nell area di lavoro integrata, tutte le finestre e i pannelli sono integrati in

Dettagli

Dichiarazione di Accessibilità

Dichiarazione di Accessibilità Dichiarazione di Accessibilità Il sito web del comune è stato progettato e realizzato con particolare attenzione a quanto prescritto dalla Legge 4/2004 (cosiddetta Legge Stanca ), contenente "Disposizioni

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

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

Corso di Informatica di Base

Corso di Informatica di Base Corso di Informatica di Base LEZIONE N 3 Cortina d Ampezzo, 4 dicembre 2008 ELABORAZIONE TESTI Grazie all impiego di programmi per l elaborazione dei testi, oggi è possibile creare documenti dall aspetto

Dettagli

EDITOR per la modifica delle pagine

EDITOR per la modifica delle pagine Pagina 1 EDITOR per la modifica delle pagine Sommario EDITOR per la modifica delle pagine...1 Apertura...2 L'EDITOR...3 Procedure...6 Inserire collegamenti...6 Inserire un'ancora...6 Inserire un collegamento...6

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

Laboratorio di Informatica. Facoltà di Economia Università di Foggia. Prof. Crescenzio Gallo

Laboratorio di Informatica. Facoltà di Economia Università di Foggia. Prof. Crescenzio Gallo . Laboratorio di Informatica Facoltà di Economia Università di Foggia Prof. Crescenzio Gallo Word è un programma di elaborazione testi che consente di creare, modificare e formattare documenti in modo

Dettagli

il foglio elettronico

il foglio elettronico 1 il foglio elettronico ecdl - modulo 4 toniorollo 2013 il modulo richiede 1/2 comprendere il concetto di foglio elettronico e dimostri di sapere usare il programma di foglio elettronico per produrre dei

Dettagli

MODULO 3 Foglio elettronico

MODULO 3 Foglio elettronico MODULO 3 Foglio elettronico I contenuti del modulo: Questo modulo verifica la comprensione da parte del corsista dei concetti fondamentali del foglio elettronico e la sua capacità di applicare praticamente

Dettagli

G. Pettarin ECDL Modulo 3: Word 125

G. Pettarin ECDL Modulo 3: Word 125 G. Pettarin ECDL Modulo 3: Word 125 Stampa unione buste: passaggio 2 di 6 Con il pulsante Sfoglia, come nei casi precedenti, seleziona il file elenco per i destinatari da stampare sulle buste. Nel quarto

Dettagli

Microsoft PowerPoint

Microsoft PowerPoint Microsoft introduzione a E' un programma che si utilizza per creare presentazioni grafiche con estrema semplicità e rapidità. Si possono realizzare presentazioni aziendali diapositive per riunioni di marketing

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

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

Dichiarazione di Accessibilità

Dichiarazione di Accessibilità Dichiarazione di Accessibilità Requisito n. 1 Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili

Dettagli

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ

REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ Pag. 1 di 13 REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ PUBBLICA AMMINISTRAZIONE Comune di Pella (NO) http://www.comune.pella.no.it/ DATA DELLA VALUTAZIONE 09/07/2008 AUTORE DELLA VALUTAZIONE Alessio Mantegna

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

Accessibilità del sito web del Comune di Triggiano

Accessibilità del sito web del Comune di Triggiano Accessibilità del sito web del Comune di Triggiano Il Comune di Triggiano, già attento nella precedente versione del suo sito web al tema dell'accessibilità delle informazioni, ha riprogrammato tutte le

Dettagli

Abstract Questo documento descrive come è gestita la WYSIWYG tramite l editor di testi integrato in MOVIO.

Abstract Questo documento descrive come è gestita la WYSIWYG tramite l editor di testi integrato in MOVIO. Titolo Tutorial MOVIO: WYSIWYG Release MOVIO SCMS 1.00 Versione Tutorial 1.00 Data 02/03/14 Autori e affiliation Rubino Saccoccio (Gruppometa) Commenti Dichiarazione di copyright Abstract Questo documento

Dettagli

La pagina di Explorer

La pagina di Explorer G. Pettarin ECDL Modulo 7: Internet 11 A seconda della configurazione dell accesso alla rete, potrebbe apparire una o più finestre per l autenticazione della connessione remota alla rete. In linea generale

Dettagli

MICROSOFT WORD INTRODUZIONE

MICROSOFT WORD INTRODUZIONE 1 MICROSOFT WORD INTRODUZIONE Word è il programma più diffuso per elaborazione di testi, il cui scopo fondamentale è assistere l utente nelle operazioni di digitazione, revisione e formattazione di testi.

Dettagli

bla bla Documenti Manuale utente

bla bla Documenti Manuale utente bla bla Documenti Manuale utente Documenti Documenti: Manuale utente Data di pubblicazione mercoledì, 25. febbraio 2015 Version 7.6.2 Diritto d'autore 2006-2013 OPEN-XCHANGE Inc., Questo documento è proprietà

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

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

Fondamenti di informatica. Word Elaborazione di testi

Fondamenti di informatica. Word Elaborazione di testi Fondamenti di informatica Word Elaborazione di testi INTRODUZIONE Cos è Word? u Word è un word processor WYSIWYG (What You See Is What You Get) u Supporta l utente nelle operazioni di: Disposizione del

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

LUdeS Informatica 2 EXCEL. Prima parte AA 2013/2014

LUdeS Informatica 2 EXCEL. Prima parte AA 2013/2014 LUdeS Informatica 2 EXCEL Prima parte AA 2013/2014 COS E EXCEL? Microsoft Excel è uno dei fogli elettronici più potenti e completi operanti nell'ambiente Windows. Un foglio elettronico è un programma che

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

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

Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti

Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti COMUNE DI GALLARATE Settore Risorse Economiche e Finanziarie Centro Elaborazione Dati Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti Dichiarazione di accessibilità Il sito del Comune

Dettagli

Guida OpenOffice.org Writer

Guida OpenOffice.org Writer Guida OpenOffice.org Writer Le visualizzazioni di Writer Writer permette di visualizzare un documento in diverse maniere tramite: Visualizza->Schermo intero: permette di visualizzare il documento Writer

Dettagli

Operazioni fondamentali

Operazioni fondamentali Elaborazione testi Le seguenti indicazioni valgono per Word 2007, ma le procedure per Word 2010 sono molto simile. In alcuni casi (per esempio, Pulsante Office /File) ci sono indicazioni entrambe le versioni.

Dettagli

Corsi ECDL 2008 2009 Fabio Naponiello

Corsi ECDL 2008 2009 Fabio Naponiello Chi inizia un'attività di ufficio con l ausilio di strumenti informatici, si imbatte subito nei comuni e ricorrenti lavori di videoscrittura. Redigere lettere, comunicati, piccole relazioni ecc, sono tipiche

Dettagli

Introduzione all'uso di

Introduzione all'uso di Introduzione all'uso di Microsoft Outlook Express 6 Outlook Express 6 è un programma, incluso nel browser di Microsoft Internet Explorer, che ci permette di inviare e ricevere messaggi di posta elettronica.

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

Sulla barra multifunzione sono disponibili i comandi più utilizzati, per consentire all'utente di averli sempre a portata di mano ed evitare ricerche

Sulla barra multifunzione sono disponibili i comandi più utilizzati, per consentire all'utente di averli sempre a portata di mano ed evitare ricerche Word 2007 nozioni di base Word 2007 barra multifunzione Sulla barra multifunzione sono disponibili i comandi più utilizzati, per consentire all'utente di averli sempre a portata di mano ed evitare ricerche

Dettagli

Microsoft Word Nozioni di base

Microsoft Word Nozioni di base Corso di Introduzione all Informatica Microsoft Word Nozioni di base Esercitatore: Fabio Palopoli SOMMARIO Esercitazione n. 1 Introduzione L interfaccia di Word Gli strumenti di Microsoft Draw La guida

Dettagli

jt - joetex - percorsi didattici

jt - joetex - percorsi didattici jt - joetex - percorsi didattici Corso dreamweaver lezione 1 Sommario 1. Creare un sito in locale 2. creare la prima pagina Creare un sito in locale Un sito va creato tutto all'interno di un'unica cartella.

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

Verifica tecnica accessibilità

Verifica tecnica accessibilità Verifica tecnica accessibilità Realizzato secondo il modello predisposto dal CNIPA per i soggetti di cui all articolo 3, comma 1, della legge 9 gennaio 2004, n. 4 Soggetto interessato: Comune di San Mauro

Dettagli

Gestione home page. Intranet -> Ambiente Halley -> Gestione homepage

Gestione home page. Intranet -> Ambiente Halley -> Gestione homepage Gestione home page egovernment L home page del portale Halley egovernment permette all Amministrazione di pubblicare contenuti e informazioni e di organizzarle in blocchi. Questa struttura per argomenti

Dettagli

NUOVO PORTALE ANCE. MANUALE per la GESTIONE della HOME PAGE VAI ALL INDICE DEI CONTENUTI

NUOVO PORTALE ANCE. MANUALE per la GESTIONE della HOME PAGE VAI ALL INDICE DEI CONTENUTI NUOVO PORTALE ANCE MANUALE per la GESTIONE della HOME PAGE VAI ALL INDICE DEI CONTENUTI DEI CONTENUTI ACCESSO AL MENU PRINCIPALE PAG. 3 CREAZIONE DI UNA NUOVA HOME PAGE 4 SELEZIONE TIPO HOME PAGE 5 DATA

Dettagli

Appunti sugli Elaboratori di Testo. Introduzione. D. Gubiani. 19 Luglio 2005

Appunti sugli Elaboratori di Testo. Introduzione. D. Gubiani. 19 Luglio 2005 Appunti sugli Elaboratori di Testo D. Gubiani Università degli Studi G.D Annunzio di Chieti-Pescara 19 Luglio 2005 1 Cos è un elaboratore di testo? 2 3 Cos è un elaboratore di testo? Cos è un elaboratore

Dettagli

Workshop NOS Piacenza: progettare ed implementare ipermedia in classe. pag. 1

Workshop NOS Piacenza: progettare ed implementare ipermedia in classe. pag. 1 1. Come iscriversi a Google Sites: a. collegarsi al sito www.google.it b. clic su altro Sites Registrati a Google Sites e. inserire il proprio indirizzo e-mail f. inserire una password g. re-inserire la

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

Creare un Web di FrontPage con un modello

Creare un Web di FrontPage con un modello P RO G E T TO 1 Creare un Web di FrontPage con un modello OBIETTIVI In questo progetto imparerete a: Descrivere FrontPage e spiegare le sue funzioni principali Definire HTML e spiegare l uso dei tag HTML

Dettagli

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 Copyright 2010 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

CORSO PRATICO WinWord

CORSO PRATICO WinWord CORSO PRATICO WinWord AUTORE: Renato Avato 1. Strumenti Principali di Word Il piano di lavoro di Word comprende: La Barra del Titolo, dove sono posizionate le icone di ridimensionamento: riduci finestra

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

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

www.renatopatrignani.it 1

www.renatopatrignani.it 1 APRIRE UN PROGRAMMA DI POSTA ELETTRONICA MODIFICARE IL TIPO DI VISUALIZZAZIONE LEGGERE UN CHIUDERE IL PROGRAMMA ESERCITAZIONI Outlook Express, il programma più diffuso per la gestione della posta elettronica,

Dettagli

On-line Corsi d Informatica sul web

On-line Corsi d Informatica sul web On-line Corsi d Informatica sul web Corso base di FrontPage Università degli Studi della Repubblica di San Marino Capitolo1 CREARE UN NUOVO SITO INTERNET Aprire Microsoft FrontPage facendo clic su Start/Avvio

Dettagli

INIZIAMO A IMPARARE WORD

INIZIAMO A IMPARARE WORD Associazione Nazionale Seniores Enel Associazione di solidarietà tra dipendenti e pensionati delle Aziende del Gruppo Enel Sezione Territoriale Lombardia - Nucleo di Milano E-Mail del Nucleo di Milano:

Dettagli

Reti Informatiche: Internet e posta. elettronica. Tina Fasulo. Guida a Internet Explorer e alla posta elettronica Windows Live Mail

Reti Informatiche: Internet e posta. elettronica. Tina Fasulo. Guida a Internet Explorer e alla posta elettronica Windows Live Mail Reti Informatiche: Internet e posta elettronica Tina Fasulo 2012 Guida a Internet Explorer e alla posta elettronica Windows Live Mail 1 Parte prima: navigazione del Web Il browser è un programma che consente

Dettagli

Capitolo3. Si apre la seguente finestra. Figura 29. Proprietà immagine di sfondo. - Università degli Studi della Repubblica di San Marino -

Capitolo3. Si apre la seguente finestra. Figura 29. Proprietà immagine di sfondo. - Università degli Studi della Repubblica di San Marino - Capitolo3 LAVORARE CON LE IMMAGINI E certo che l impatto visivo in un sito internet è molto importante ma è bene tenere presente che immagini e fotografie, pur arricchendo la struttura grafica di un web,

Dettagli

COMUNE DI COMACCHIO. Provincia di Ferrara. Settore III Servizio Finanziario e Partecipate. Servizio Informatico Ufficio CED

COMUNE DI COMACCHIO. Provincia di Ferrara. Settore III Servizio Finanziario e Partecipate. Servizio Informatico Ufficio CED COMUNE DI COMACCHIO Provincia di Ferrara Settore III Servizio Finanziario e Partecipate Servizio Informatico Ufficio CED Accessibilità L'accessibilità di un sito web è il frutto di un insieme di tecniche

Dettagli

Capitolo XI Esercitazione n. 11: Creazione di un sito web con FrontPage

Capitolo XI Esercitazione n. 11: Creazione di un sito web con FrontPage Capitolo XI Esercitazione n. 11: Creazione di un sito web con FrontPage Scopo : Creare un sito Web che fornisce informazioni su un negozio di articoli sportivi chiamato Championzone. Oltre alla home page,

Dettagli

NOMENCLATURA INTERFACCIA DI INTERNET EXPLORER PRINCIPALI PULSANTI DELLA BARRA DEGLI STREUMENTI

NOMENCLATURA INTERFACCIA DI INTERNET EXPLORER PRINCIPALI PULSANTI DELLA BARRA DEGLI STREUMENTI NOMENCLATURA INTERFACCIA DI INTERNET EXPLORER Pagina 6 PRINCIPALI PULSANTI DELLA BARRA DEGLI STREUMENTI Richiama la pagina visualizzata in precedenza Richiama la pagina visualizzata dopo quella attualmente

Dettagli

Foglio elettronico. Foglio elettronico EXCEL. Utilizzo. Contenuto della cella. Vantaggi EXCEL. Prof. Francesco Procida procida.francesco@virgilio.

Foglio elettronico. Foglio elettronico EXCEL. Utilizzo. Contenuto della cella. Vantaggi EXCEL. Prof. Francesco Procida procida.francesco@virgilio. Foglio elettronico Foglio elettronico EXCEL Prof. Francesco Procida procida.francesco@virgilio.it Il foglio elettronico è un programma interattivo, che mette a disposizione dell utente una matrice di righe

Dettagli

MODULO 5 Basi di dati (database)

MODULO 5 Basi di dati (database) MODULO 5 Basi di dati (database) I contenuti del modulo: questo modulo riguarda la conoscenza da parte del candidato dei concetti fondamentali sulle basi di dati e la sua capacità di utilizzarli. Il modulo

Dettagli

www.informarsi.net MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http://www.informarsi.net/ecdl/powerpoint/

www.informarsi.net MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http://www.informarsi.net/ecdl/powerpoint/ MODULO 6 ECDL - EIPASS STRUMENTI DI PRESENTAZIONE - PRESENTATIONS Microsoft PowerPoint http:///ecdl/powerpoint/ INTERFACCIA UTENTE TIPICA DI UN SOFTWARE DI PRESENTAZIONE APERTURA E SALVATAGGIO DI UNA PRESENTAZIONE

Dettagli

Istituto Alberghiero De Filippi Laboratorio di informatica Corso ECDL MODULO 6 ECDL. Strumenti di presentazione Microsoft PowerPoint ECDL

Istituto Alberghiero De Filippi Laboratorio di informatica Corso ECDL MODULO 6 ECDL. Strumenti di presentazione Microsoft PowerPoint ECDL Istituto Alberghiero De Filippi Laboratorio di informatica Corso ECDL MODULO 6 ECDL Strumenti di presentazione Microsoft PowerPoint ECDL Gli strumenti di presentazione servono a creare presentazioni informatiche

Dettagli

Microsoft Word 2007. La BARRA DI ACCESSO RAPIDO, che contiene alcuni comandi sempre visibili e può essere personalizzata.

Microsoft Word 2007. La BARRA DI ACCESSO RAPIDO, che contiene alcuni comandi sempre visibili e può essere personalizzata. Microsoft Word 2007 Microsoft Office Word è il programma di elaborazione testi di Microsoft all interno del pacchetto Office. Oggi Word ha un enorme diffusione, tanto da diventare l editor di testi più

Dettagli

Figura 54. Visualizza anteprima nel browser

Figura 54. Visualizza anteprima nel browser Per vedere come apparirà il nostro lavoro sul browser, è possibile visualizzarne l anteprima facendo clic sulla scheda Anteprima accanto alla scheda HTML, in basso al foglio. Se la scheda Anteprima non

Dettagli

SCRIVERE TESTO BLOCCO NOTE WORDPAD WORD IL PIU' DIFFUSO APRIRE WORD

SCRIVERE TESTO BLOCCO NOTE WORDPAD WORD IL PIU' DIFFUSO APRIRE WORD SCRIVERE TESTO Per scrivere del semplice testo con il computer, si può tranquillamente usare i programmi che vengono installati insieme al sistema operativo. Su Windows troviamo BLOCCO NOTE e WORDPAD.

Dettagli

Modulo 3 - Elaborazione Testi 3.1 Utilizzo applicazione

Modulo 3 - Elaborazione Testi 3.1 Utilizzo applicazione Università degli Studi dell Aquila Corso ECDL programma START Modulo 3 - Elaborazione Testi 3.1 Utilizzo applicazione Elaborazione testi Per scrivere una lettera, un libro, una tesi, o un semplice cartello

Dettagli

APPUNTI DI HTML (TERZA LEZIONE)

APPUNTI DI HTML (TERZA LEZIONE) Il web è costituito non da testi ma da ipertesti. APPUNTI DI HTML (TERZA LEZIONE) I link ci permettono di passare da un testo all altro. I link sono formati da due componenti: IL CONTENUTO "nasconde" il

Dettagli

Corso di Informatica di Base

Corso di Informatica di Base Corso di Informatica di Base LEZIONE N 5 Cortina d Ampezzo, 8 gennaio 2009 FOGLIO ELETTRONICO Il foglio elettronico può essere considerato come una specie di enorme tabellone a griglia il cui utilizzo

Dettagli

Word è un elaboratore di testi in grado di combinare il testo con immagini, fogli di lavoro e

Word è un elaboratore di testi in grado di combinare il testo con immagini, fogli di lavoro e Word è un elaboratore di testi in grado di combinare il testo con immagini, fogli di lavoro e grafici, tutto nello stesso file di documento. Durante il lavoro testo e illustrazioni appaiono sullo schermo

Dettagli

Foglio elettronico (StarOffice)

Foglio elettronico (StarOffice) Modulo Foglio elettronico (StarOffice) Modulo - Foglio elettronico, richiede che il candidato comprenda il concetto di foglio elettronico e dimostri di sapere usare il programma corrispondente. Deve comprendere

Dettagli

Creare e formattare i documenti

Creare e formattare i documenti Università di L Aquila Facoltà di Biotecnologie Esame di INFORMATICA Elaborazione di testi Creare e formattare i documenti 1 IL WORD PROCESSOR I programmi per l elaborazione di testi ( detti anche di videoscrittura

Dettagli

Modulo 4 Strumenti di presentazione

Modulo 4 Strumenti di presentazione Modulo 4 Strumenti di presentazione Scopo del modulo è mettere l allievo in grado di: o descrivere le funzionalità di un software per generare presentazioni. o utilizzare gli strumenti standard per creare

Dettagli

4. Fondamenti per la produttività informatica

4. Fondamenti per la produttività informatica Pagina 36 di 47 4. Fondamenti per la produttività informatica In questo modulo saranno compiuti i primi passi con i software applicativi più diffusi (elaboratore testi, elaboratore presentazioni ed elaboratore

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

DISPENSA PER MICROSOFT WORD 2010

DISPENSA PER MICROSOFT WORD 2010 DISPENSA PER MICROSOFT WORD 2010 Esistono molte versioni di Microsoft Word, dalle più vecchie ( Word 97, Word 2000, Word 2003 e infine Word 2010 ). Creazione di documenti Avvio di Word 1. Fare clic sul

Dettagli

IMPARIAMO WORD. Nella prima lezione abbiamo digitato un breve testo e abbiamo imparato i comandi base per formattarlo, salvarlo e stamparlo.

IMPARIAMO WORD. Nella prima lezione abbiamo digitato un breve testo e abbiamo imparato i comandi base per formattarlo, salvarlo e stamparlo. II^ lezione IMPARIAMO WORD Nella prima lezione abbiamo digitato un breve testo e abbiamo imparato i comandi base per formattarlo, salvarlo e stamparlo. Oggi prendiamo in esame, uno per uno, i comandi della

Dettagli

Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0)

Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0) Uso di un browser (con riferimento a Microsoft Internet Explorer 6.0) Nota Bene: Si raccomanda di leggere queste dispense di fronte al computer, provando passo dopo passo le funzionalità descritte. Per

Dettagli

Word. Cos è Le funzioni base Gli strumenti. www.vincenzocalabro.it 1

Word. Cos è Le funzioni base Gli strumenti. www.vincenzocalabro.it 1 Word Cos è Le funzioni base Gli strumenti www.vincenzocalabro.it 1 Cos è e come si avvia Word è un programma per scrivere documenti semplici e multimediali Non è presente automaticamente in Windows, occorre

Dettagli

Patente Europea del Computer ECDL - MODULO 3

Patente Europea del Computer ECDL - MODULO 3 Patente Europea del Computer ECDL - MODULO 3 Lezione 1 di 3 Introduzione a Word 2007 e all elaborazione testi Menù Office Scheda Home Impostazioni di Stampa e stampa Righello Intestazione e piè di pagina

Dettagli

MODULO 7 SEZIONE 2 Utilizzo di Outlook Express 6.0 (Windows XP)

MODULO 7 SEZIONE 2 Utilizzo di Outlook Express 6.0 (Windows XP) 7.4 POSTA ELETTRONICA MODULO 7 SEZIONE 2 Utilizzo di Outlook Express 6.0 (Windows XP) prima parte 7.4.1 Concetti e termini 7.4.1.1 Capire come è strutturato un indirizzo di posta elettronica Tre parti

Dettagli