Web design – manuale
INDICE:
Prefazione
1. CONCETTI SUL WEB
1.1. Termini chiave
1.1.1. Comprendere come Internet supporti un insieme di servizi come il World Wide Web (WWW), Trasferimento File, E-mail, Mesaggistica Istantanea (Instant Messaging)
1.1.2. Comprendere i termini client/server. Comprendere funzionalità e relazione tra browser e web server
1.1.3. Comprendere I termini dominio, Uniform Resource Locator (URL), hyperlink, web hosting, motore di ricerca.
1.1.4. Comprendere l’uso dei protocolli principali: Transmission Control Protocol/ Internet Protocol (TCP/lP), Hypertext Transfer Protocol (HTTP), File Transfer Protocol (FTP)
1.2. Web Publishing
1.2.1. Identificare i principali vantaggi dell’avere un sito web: accesso a un pubblico globale, facilità di aggiornamento, interattività con il pubblico e risparmio.
1.2.2. Comprendere il processo del caricare un sito online: registrazione del dominio, selezione di un servizio di web hosting.
1.2.3. Riconoscere le tecniche di ottimizzazione per i motori di ricerca e.g. includere metadati adeguati, includere una mappa del sito e link, registrarsi con un motore di ricerca.
1.2.4. Riconoscere i fattori che influenzano la velocità di download del sito: audio, video, oggetti grafici, contenuti animati, compressione dei file
1.3. Questioni Legali
1.3.1. Comprendere il termine copyright e le sue implicazioni relativamente a testi, immagini, audio e video disponibili su siti web.
2 HTML
2.1. Basi di HTML
1.3.2. Comprendere il termine Hypertext Markup Language (HTML).
1.3.3. Comprendere il ruolo del consorzio W3C nella creazione di linee guida per l’HTML. Comprendere i benefici offerti da queste linee guida come: l’interoperabilità dei siti web attraverso browser diversi, l’accessibilità aumentata, dichiarazione dei tipi di documento coerenti.
2.2. Usare HTML
1.3.4. 2.2.1. Usare il browser per vedere il codice sorgente
2.2.3. Usare i tag di markup per sviluppare il layout di una pagina web
3 CREARE UNA PAGINA WEB
3.1. PROGETTAZIONE
3.1.1. Riconoscere tecniche di pianificazione e progettazione quali: valutazione dei bisogni del proprio target, creazione di storyboard, organizzazione della struttura del sito, creazione di modelli per il layout della pagina, decisione sullo schema di navigazione
3.2 Usare l’Applicazione
3.2.1 Aprire, chiudere un’ applicazione di web authoring. Aprire, chiudere pagine web.
3.2.2 Crea, salva una nuova pagina web in una cartella sul disco
3.2.3 Crea e salva una nuova pagina partendo da un modello disponibile.
3.2.4 Aggiungi e modifica una pagina web descrittiva
3.2.5 Differenza tra codice sorgente e vista design
3.3 Migliorare la produttività
3.3.1 Impostare preferenze di base nell’applicazione: browser predefinito per le anteprime, estensione predefinita del file, codifica e caratteri.
Browser predefinito
3.3.2 Utilizzare le funzioni Help disponibili
3.4 Inserimento del testo e formattazione
3.4.1 Inserire, modificare e cancellare un testo
3.4.2 Capire e utilizzare la dimensione di carattere
3.4.3 Applicare la formattazione del testo: grassetto, corsivo, tipo di carattere e colore
Creare un testo in grassetto: selezionare il testo desiderato e cliccare Formato (Format) -> Stile (Text Style) -> Grassetto (Bold)
Creare un testo in corsivo: selezionare il testo desiderato e cliccare Formato (Format) -> Stile (Text Style ) -> Corsivo (Italic)
3.5 Creare paragrafi
3.5.1 Configurare le proprietà di un paragrafo
3.5.2 Inserire, rimuovere un’interruzione di paragrafo o un’interruzione di linea.
3.5.3 Creare, modificare un elenco numerato e puntato
Per creare un elenco, selezionare gli elementi che dovranno farne parte e in seguito cliccare il menù Formato (Format) -> Elenco ( List) -> Numerato/Puntato (Numbered/Bulleted).
3.6 Formattazione di pagina
3.6.1 Impostare margini di pagina: superiore, inferiore, sinistro, destro
Per modificare i margini, cliccare il menù File -> Imposta Pagina (Page Setup) e, all’interno della finestra di dialogo, selezionare la sezione Margini & Intestazione/Piè di pagina (Margins & Header/Footer) dove sarà possibile definire la misura dei margini.
3.6.2 Aggiungere, modificare, rimuovere un colore dello sfondo della pagina, immagine
3.6.3 Cambiare il colore di un collegamento ipertestuale: visitato, attivo, non visitato.
3.7 Collegamento ipertestuale
3.7.1 Capire il significato dei termini: collegamento ipertestuale assoluto e relativo
Il termine collegamento ipertestuale è utilizzato per definire un testo, un’immagine e qualsiasi altro elemento che, se cliccato, ci permette di raggiungere un’altra destinazione.
3.7.2 Inserire, aggiungere, rimuovere un collegamento ipertestuale: testo, immagine
Aprire la pagina web in modalità Anteprima (Preview) e selezionare il testo che è stato scelto come collegamento ipertestuale.
3.7.3 Inserire, modificare, rimuovere un indirizzo e-mail come un collegamento ipertestuale: testo, immagine.
3.7.4 Definire un collegamento ipertestuale destinazione: stessa finestra, nuova finestra
All’apertura di un collegamento ipertestuale si avranno due opzioni: si potrà aprire una nuova pagina anziché quella esistente e ciò significa che, la pagina che è aperta in quel momento si chiuderà o una nuova pagina si aprirà nel browser mentre quella che è già aperta rimarrà tale.
3.7.5 Definire un’ancora, inserire un collegamento ad un’ancora
3.8 Tabelle (Tables)
3.8.1 Inserire e cancellare una tabella
3.8.2 Inserire e creare il titolo di una tabella (table caption)
3.8.3 Allineare una tabella: sinistra, centro, destra
3.8.4 Unire e dividere le celle (Merge, split cells)
3.8.5 Modificare spessore cornice, riempimento della cella e interlinea della cella (border width, cell padding, cell spacing)
4. UTILIZZO DEGLI OGGETTI
4.1 Oggetti grafici
4.1.1. Aggiungere /rimuovere un’immagine su una pagina web
4.1.2 Definire e modificare le caratteristiche di un’immagine su una pagina web: dimensioni, margini, allineamento, testo alternativo (size, border, alignment, alternative text)
4.2 Moduli (Forms)
4.2.1. Aggiungere un modulo (Form) ad una pagina web
4.2.2. Aggiungere ed eliminare campi di testo di una o più righe
Aggiugere una riga:
Indicare nelle righe azzurre puntinate per esempio, Nome (Name) e successivamente selezionare campo modulo (Form Field) sotto Modulo (Form)
4.2.4. Definire e modificare le proprietà di un campo: campo del testo, menu a tendina, casella, pulsante a scelta singola (text field, drop-down, check box, radio button)
Per cambiare le impostazioni di un menu a tendina occorre evidenziarlo e selezionare Formato -> Selezione proprietà (Format – > Selection List Properties)
4.2.6. Tasti Aggiungere (add), Eliminare (remove), Invio (submit) e reset
4.2.7 Definire e modificare un modulo per inviarlo via mail
Queste attività sono descritte nel primo passaggio per la creazione di moduli (nome modulo, indirizzo ….) (form name, address…). Per modificarli, cliccare in un punto qualsiasi all’interno del modulo e cliccare il lato destro del mouse e selezionare Proprietà del Modulo (Form Properties)
5. STILI
5.1 Concetti CSS
5.1.1 Capire il termine Fogli di stile a cascata (Cascading Style Sheets – CSS), il loro uso e i benefici.
5.1.2 Riconoscere le strategie più importanti per applicare gli stili: elementi in linea, elementi interni ed elementi esterni.
Approccio esterno: le definizioni dei fogli di stile a cascata CSS sono situate al di fuori del documento HTML. Questo approccio rende possibile separare completamente il contenuto della pagina dal layout stesso. I file CSS sono file che contengono soltanto le definizioni dei fogli a cascata CSS ed hanno l’estensione ” CSS “, ad esempio mySite.css.
5.1.3 Capire la struttura di una regola CSS: selettore e dichiarazione (proprietà, valore).
5.2 Utilizzare i fogli di stile a cascata CSS
5.2.1 Creare, salvare un nuovo file CSS.
5.2.2 Creare, modificare le regole dei fogli di stile CSS: colore, sfondo, font.
5.2.3 Allegare un foglio di stile esterno CCS a una pagina web
6. PREPARARE IL CARICAMENTO
6.1. Controllo
6.1.1. Identificare e correggere collegamenti rotti in un sito web
6.1.2 Riconoscere l’uso corretto di un contenuto di una pagina web: incluso dati aggiornati, dettagli del software richiesto per aprire e visualizzare file, assicurare la compatibilità dei contenuti con altri browser
6.1.3 Controllo ortografico e modifiche necessarie
6.2 Pubblicare
6.2.1. Capire il processo di caricamento, scaricamento di un sito web da un server web
6.2.2 Caricare, scaricare un sito web da e su un server.
Dopo aver riservato uno spazio ospitante, sarà possibile caricare la pagina web su un server web.
CONDIZIONI GENERALI D’USO
Ricerca personalizzata
