A.A. 2009/2010 Facoltà di Scienze della Comunicaz Università degli Studi di Teramo CORSO DI TECNICHE DI PROGRAMMAZIONE MULTIMEDIALE Prof. Domenico Marconi Nvu: un editor di pagine web
New view
È un software open-source del gruppo Mozilla ed è wysiwyg, ossia è basato sul concetto what h you see is what you get. Consente di creare e modificare pagine web anche se non si conosce il linguaggio gg di programmaz html.
Il programma aderisce allo standard w3c stabilito dal World Wide Web Consortium, una associaz nata con lo scopo di migliorare le potenzialità della rete, i suoi linguaggi e i protocolli di comunicaz.
Il programma genera pagine visualizzabili da qualsiasi browser.
L interfaccia Linterfaccia grafica del programma prevede la modifica diretta della pagina e la sua visualizzaz in modalità di pubblicaz. i La barra degli strumenti offre uno specimen interessante per rilevare quanto l uso sia immediato e simile a un programma di videoscrittura.
La v visualiz zzaz È possibile visualizzare la pagina web come una normale pagina di un programma di videoscrittura in modalità Normale
La visualizzazion zzaz...o visualizzare, in modalità Tag HTML, i tag, ossia marcatori o etichette funzionali a rappresentare l aspetto grafico di un testo
La visualizzazion zzaz...o infine visualizzare, in modalità Sorgente, il testo in linguaggio HTML.
La cone Per pubblicare un sito web è necessario prima avere progettato le pagine e avere preparato struttura e testi.
La cone In questa pagina sono stati ti inseriti iti alcuni elementi distinti. Proviamo a esaminare come sono stati costruiti.
Il tit tolo La c costruz z Digitato il testo si è scelto dal menu a tendina Titolo 1. Dal menu Formato è possibile operare altre scelte sul tipo di carattere, sulla dimens, sul colore, sullo stile e sulla distribuz del testo, come se si operasse in un programma di videoscrittura.
Il te esto La c costruz z Per scrivere il testo si imposta la voce Corpo del testo dal menu a tendina. Utilizzando il menu Formato è poi possibile definirne l aspetto grafico.
La costruz z Le immag gini Nvu: un editor di pagine web Questa immagine è composta da varie sezioni ed è costruita utilizzando una tabella.
Le im le ta abelle mmagi ini e Per inserire una tabella si clicca su Tabella, quindi Inserisci i e infine Tabella. La c Si apre la finestra Inserimento tabella: è Si apre la finestra Inserimento tabella: è possibile definirne lo spazio e le caratteristiche.
Le im le ta abelle mmagi ini e La c Definito lo spazio della tabella - indispensabile per creare una struttura organizzata - si possono operare delle scelte. Cliccando con il tasto destro sulla tabella a si possono definire le caratteristiche e le dimensioni delle singole celle.
La c Le im mmagi ini e le ta abelle Nvu: un editor di pagine web Le finestre indicano tutte tt le opzioni i che il programma offre.
Le im le ta abelle mmagi ini e La c Per inserire una immagine, si posiziona il cursore nella cella, si clicca su Inserisci, poi Immagine. Si sceglie l immagine utilizzando il pulsante Seleziona file.
La c Le im mmagi ini e le ta abelle Nvu: un editor di pagine web Scelta l immagine, se lo si desidera, si digita un testo nella casella Testo alternativo. Questo testo può apparire nella pagina Web in sostituz dell immagine.
La c Le im mmagi ini e le ta abelle Nvu: un editor di pagine web Nella pagina laterale è stata inserita l immagine nella cella a sinistra e un testo in quella a destra.
Lo s fondo La c Per inserire uno sfondo basta cliccare su Formato e poi Sfondo e colori pagina. Si apre una finestra in cui si possono Si apre una finestra in cui si possono impostare i colori del testo e lo sfondo, utilizzando anche immagini prese da altri file.
La c Lo s fondo Nvu: un editor di pagine web Così appare la pagina con il nuovo sfondo.
I col llegame enti La c Per inserire un collegamento bisogna selezionare l area - testo o immagine - e utilizzare il pulsante Il collegamento può Il collegamento può essere interno al sito o esterno.
I col llegame enti La c Con questa finestra si può definire il collegamento a una altra pagina del proprio sito o a una pagina Web, servendosi del pulsante Seleziona file.
La c I col llegame enti Nvu: un editor di pagine web In questo caso il collegamento è a una altra pagina del nostro sito.
La c I col llegame enti Nvu: un editor di pagine web Per inserire un collegamento esterno è sufficiente digitare l indirizzo nell apposito campo.
Le ancore La c Vi è anche la possibilità di stabilire collegamenti tra un elemento e l altro laltro all interno della stessa pagina. A questo scopo si utilizza la funz ancora. Per inserire un ancora bisogna selezionare l area interessata e utilizzare il pulsante
Le ancore La c Con questa finestra si definisce il nome dell ancora che in questo caso corrisponde a uno dei sottoparagrafi.
Le ancore La c Nella pagina appare ora un ancora all inizio della sez sulla progettaz. Per completare il collegamento bisogna utilizzare il pulsante e indicare la parola o sez a cui si intende ancorare il testo selezionato.
Le ancore La c Una volta selezionata la parola progettaz, si utilizza il pulsante
Le ancore La c Dalla finestra Proprietà collegamento si seleziona la voce Progettaz, ossia il nome dell ancora creata.
Le ancore La c Se si ripete l operaz per tutti i titoli si ottiene una struttura simile a quella presentata nell immagine laterale.
Per accedere all editor CSS basta cliccare il pulsante strumenti e selezionare l apposita voce. I fog gli di st tile La c La pagina si può formattare anche impostando un foglio di stile. I fogli di stile a cascata (CSS Cascading Style Sheets) servono a definire la rappresentaz di documenti HTML e XHTML. Wikipedia: Foglio di stile
In esso vengono stabilite tutte le caratteristiche che riguardano l impostaz generale, il testo, lo sfondo, i bordi, la casella, gli elenchi e la modalità di lettura. I fog gli di st tile La c Con il foglio di stile è possibile definire la pagina a cui si sta lavorando o un insieme di pagine.
I fog gli di st tile La c Per utilizzare i CSS bisogna innanzitutto definire l Elenco Media e dare un Titolo al foglio di stile, poi procedere e alla creaz del foglio, utilizzando il pulsante Crea foglio di stile.
I fog gli di st tile La c Dopo aver cliccato sul pulsante Regola si può procedere alla definiz della sez e a cui si intende applicare il foglio di stile e quindi cliccare sul pulsante Crea regola stile.
I fog gli di st tile La c Definito il campo di applicaz dello stile, ossia il corpo del testo t (body), si possono determinare e nello specifico tutte le caratteristiche: testo, sfondo, bordi, casella, elenchi.
Il sa lvatagg gio Sito Immagini Pagine web Altre risorse Per salvare bisogna creare una cartella che contenga tutte le risorse utili al funzionamento e alla vis del sito.
La pubblicaz Per la pubblicaz i del sito è sufficiente cliccare sulla icona che vedi a sinistra e poi completare la finestra Pubblicaz pagina.
Il programma è scaricabile all indirizzo: http://www.mozillaitalia.it/archive/altro.php?id=9