A.A. 2009/2010 Facoltà di Scienze della Comunicazione Università degli Studi di Teramo
CORSO DI “TECNICHE DI PROGRAMMAZIONE MULTIMEDIALE” Prof. Domenico Marconi Nvu:: un editor di pagine web Nvu
Nvu:: un editor di p Nvu pagine g web
New view
Nvu:: un editor di p Nvu pagine g web
È un software open-source del gruppo Mozilla ed è wysiwyg, wysiwyg ossia è basato sul concetto what h you see is i what you get.
Consente di creare e modificare pagine web anche se non si conosce il linguaggio g gg di programmazione html.
Nvu:: un editor di p Nvu pagine g web
Il programma aderisce allo standard w3c stabilito dal World Wide Web Consortium, una associazione nata con lo scopo di migliorare le potenzialità della rete, i suoi linguaggi e i protocolli di comunicazione.
Nvu:: un editor di p Nvu pagine g web
Il programma genera pagine visualizzabili da qualsiasi browser.
Nvu:: un editor di p Nvu pagine g web L interfaccia grafica del programma L’interfaccia prevede la modifica diretta della pagina e la sua visualizzazione in modalità di pubblicazione. bbli i
La barra degli strumenti offre uno specimen p interessante per rilevare quanto l’uso sia immediato e simile a un programma di videoscrittura.
È possibile visualizzare la pagina web come una normale pagina di un programma di videoscrittura in modalità Normale… Normale
La v visualizzzazion ne ne
Nvu:: un editor di p Nvu pagine g web
La v visualizzzazion zzazion ne ne
Nvu:: un editor di p Nvu pagine g web
....o visualizzare, in modalità Tag HTML, i tag, ossia marcatori o etichette funzionali a rappresentare l’aspetto grafico di un testo… testo
....o infine visualizzare, in modalità Sorgente, il testo in linguaggio HTML. HTML
La v visualizzzazion zzazion ne ne
Nvu:: un editor di p Nvu pagine g web
Per pubblicare un sito web è necessario prima avere progettato le pagine e avere preparato struttura e testi. testi
La ccostruzzione zione
Nvu:: un editor di p Nvu pagine g web
La ccostruzzione zione
Nvu:: un editor di p Nvu pagine g web
In questa pagina sono stati t ti iinseriti iti alcuni elementi distinti. Proviamo a esaminare come sono stati costruiti.
La costruz c zione
Il tittolo
Nvu:: un editor di p Nvu pagine g web
Digitato il testo si è scelto dal menu a tendina Titolo 1.
Dal menu Formato è possibile operare altre scelte sul tipo di carattere, carattere sulla dimensione dimensione, sul colore colore, sullo stile e sulla distribuzione del testo, come se si operasse in un programma di videoscrittura.
La costruz c zione
Il teesto
Nvu:: un editor di p Nvu pagine g web
Per scrivere il testo si imposta p la voce Corpo del testo dal menu a tendina. tendina Utilizzando il menu Formato è poi possibile definirne l’aspetto grafico.
La costruz c zione
Le immag i gini
Nvu:: un editor di p Nvu pagine g web
Questa immagine è composta p da varie sezioni ed è costruita utilizzando una tabella.
Per inserire una tabella si clicca su Tabella, quindi I Inserisci i i e infine i fi Tabella.
Si apre la finestra Inserimento tabella: è possibile definirne lo spazio e le caratteristiche.
La costruziione
Le im mmagiini e le taabelle
Nvu:: un editor di p Nvu pagine g web
La costruziione
Le im mmagiini e le taabelle
Nvu:: un editor di p Nvu pagine g web
Definito lo spazio della tabella - indispensabile per creare una struttura organizzata si possono operare delle scelte.
C cca do co Cliccando con il tasto dest destro o su sulla a tabe tabella a ssi possono definire le caratteristiche e le dimensioni delle singole celle.
LLe finestre fi t indicano i di tutte t tt le l opzioni i i che il programma offre.
La costruziione
Le im mmagiini e le taabelle
Nvu:: un editor di p Nvu pagine g web
La costruziione
Le im mmagiini e le taabelle
Nvu:: un editor di p Nvu pagine g web
Per inserire una immagine, si posiziona il cursore nella cella, cella si clicca su Inserisci, poi Immagine. Si sceglie l’immagine utilizzando il pulsante Seleziona file.
La costruziione
Le im mmagiini e le taabelle
Nvu:: un editor di p Nvu pagine g web
Scelta l’immagine, se lo si desidera, si digita g un testo nella casella Testo alternativo. Questo testo può apparire nella pagina Web in sostituzione dell’immagine.
La costruziione
Le im mmagiini e le taabelle
Nvu:: un editor di p Nvu pagine g web
Nella pagina laterale è stata inserita l’immagine nella cella a sinistra e un testo in quella a destra.
La costruziione
Lo sfondo
Nvu:: un editor di p Nvu pagine g web
Per inserire uno sfondo basta cliccare su Formato e poi p Sfondo e colori pagina.
Si apre una finestra in cui si possono impostare i colori del testo e lo sfondo, utilizzando anche immagini prese da altri file.
La costruziione
Lo sfondo
Nvu:: un editor di p Nvu pagine g web
Così appare la pagina con il nuovo sfondo.
La costruziione
I colllegameenti
Nvu:: un editor di p Nvu pagine g web
Per inserire un collegamento bisogna selezionare l’area - testo o immagine - e utilizzare il pulsante
Il collegamento può essere interno al sito o esterno.
Con questa finestra si può definire il collegamento a una altra pagina del proprio sito o a una pagina Web, Web servendosi del pulsante Seleziona file. fil
La costruziione
I colllegameenti
Nvu:: un editor di p Nvu pagine g web
La costruziione
I colllegameenti
Nvu:: un editor di p Nvu pagine g web
In questo caso il collegamento g èa una altra pagina del nostro sito.
La costruziione
I colllegameenti
Nvu:: un editor di p Nvu pagine g web
Per inserire un collegamento esterno è sufficiente digitare l’indirizzo nell apposito nell’apposito campo.
La costruziione
Le ancore a
Nvu:: un editor di p Nvu pagine g web
Vi è anche la possibilità di p stabilire collegamenti tra un elemento e l’altro l altro all’interno della stessa pagina. A questo scopo si utilizza la funzione ancora. Per inserire un’ancora bisogna selezionare l’area interessata e utilizzare l ill pulsante
La costruziione
Le ancore a
Nvu:: un editor di p Nvu pagine g web
Con questa finestra si definisce il nome dell’ancora dell ancora che in questo caso corrisponde a uno d i sottoparagrafi. dei fi
La costruziione
Le ancore a
Nvu:: un editor di p Nvu pagine g web
Nella pagina appare ora un’ancora ’ all’inizio della sezione sulla progettazione. Per completare il collegamento bisogna g utilizzare il pulsante e indicare la parola o sezione a cui si intende ‘ancorare’ il testo selezionato.
La costruziione
Le ancore a
Nvu:: un editor di p Nvu pagine g web
Una volta selezionata la parola progettazione, si utilizza il pulsante
La costruziione
Le ancore a
Nvu:: un editor di p Nvu pagine g web
Dalla finestra Proprietà collegamento si seleziona la voce Progettazione, ossia il nome dell’ancora creata. creata
La costruziione
Le ancore a
Nvu:: un editor di p Nvu pagine g web
Se sii ripete S i t l’operazione per tutti i titoli si ottiene una struttura simile a quella presentata q p nell’immagine laterale.
Wiki di Foglio Wikipedia: F li di stile il
La costruziione
Per accedere all’editor CSS basta cliccare il pulsante strumenti e selezionare l’apposita voce.
I fog gli di sttile
Nvu:: un editor di p Nvu pagine g web
La pagina si può formattare anche impostando un foglio di stile. stile I fogli di stile a cascata (CSS Cascading Style Sheets) servono a definire la rappresentazione di documenti HTML e XHTML XHTML.
La costruziione
I fog gli di sttile
Nvu:: un editor di p Nvu pagine g web
Con il foglio di stile è possibile definire la pagina a cui si sta lavorando o un insieme di pagine. In esso vengono stabilite tutte le caratteristiche che riguardano l’impostazione generale, il testo, lo sfondo, sfondo i bordi, bordi la casella, casella gli elenchi e la modalità di lettura.
La costruziione
I fog gli di sttile
Nvu:: un editor di p Nvu pagine g web
Per utilizzare i CSS bisogna innanzitutto definire l’Elenco M di e dare Media d un Titolo al foglio di stile, st e, po poi p procedere ocede e alla creazione del foglio, utilizzando il pulsante Crea foglio di stile.
La costruziione
I fog gli di sttile
Nvu:: un editor di p Nvu pagine g web
Dopo aver cliccato sul pulsante Regola si può procedere d alla ll definizione della sezione se o e a cu cui ssi intende applicare il foglio di stile e quindi cliccare sul pulsante Crea regola g stile.
La costruziione
I fog gli di sttile
Nvu:: un editor di p Nvu pagine g web
Definito il campo di applicazione dello stile, ossia il corpo d l testo del t t (b (body), d ) sii possono determinare dete a e nello e o specifico tutte le caratteristiche: testo sfondo testo, sfondo, bordi bordi, casella, elenchi.
Immagini Sito Pagine web
Al risorse Altre i
Per salvare bisogna creare una cartella che contenga tutte le risorse utili al funzionamento e alla visione del sito.
Il salvatagg gio
Nvu:: un editor di p Nvu pagine g web
La p pubbliccazione cazionee
Nvu:: un editor di p Nvu pagine g web
Per lla pubblicazione P bbli i del d l sito è sufficiente cliccare sulla icona che vedi a sinistra e poi completare la finestra Pubblicazione pagina. pagina
Nvu:: un editor di p Nvu pagine g web
Il p programma g è scaricabile all’indirizzo: http://www.mozillaitalia.it/archive/altro.php?id=9
