open-source del gruppo Mozilla ed è wysiwyg, ossia è basato sul concetto what h you see is what you get.

Transcript

1 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

2 New view

3 È 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.

4 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.

5 Il programma genera pagine visualizzabili da qualsiasi browser.

6 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.

7 La v visualiz zzaz È possibile visualizzare la pagina web come una normale pagina di un programma di videoscrittura in modalità Normale

8 La visualizzazion zzaz...o visualizzare, in modalità Tag HTML, i tag, ossia marcatori o etichette funzionali a rappresentare l aspetto grafico di un testo

9 La visualizzazion zzaz...o infine visualizzare, in modalità Sorgente, il testo in linguaggio HTML.

10 La cone Per pubblicare un sito web è necessario prima avere progettato le pagine e avere preparato struttura e testi.

11 La cone In questa pagina sono stati ti inseriti iti alcuni elementi distinti. Proviamo a esaminare come sono stati costruiti.

12 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.

13 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.

14 La costruz z Le immag gini Nvu: un editor di pagine web Questa immagine è composta da varie sezioni ed è costruita utilizzando una tabella.

15 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.

16 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.

17 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.

18 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.

19 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.

20 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.

21 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.

22 La c Lo s fondo Nvu: un editor di pagine web Così appare la pagina con il nuovo sfondo.

23 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.

24 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.

25 La c I col llegame enti Nvu: un editor di pagine web In questo caso il collegamento è a una altra pagina del nostro sito.

26 La c I col llegame enti Nvu: un editor di pagine web Per inserire un collegamento esterno è sufficiente digitare l indirizzo nell apposito campo.

27 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

28 Le ancore La c Con questa finestra si definisce il nome dell ancora che in questo caso corrisponde a uno dei sottoparagrafi.

29 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.

30 Le ancore La c Una volta selezionata la parola progettaz, si utilizza il pulsante

31 Le ancore La c Dalla finestra Proprietà collegamento si seleziona la voce Progettaz, ossia il nome dell ancora creata.

32 Le ancore La c Se si ripete l operaz per tutti i titoli si ottiene una struttura simile a quella presentata nell immagine laterale.

33 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

34 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.

35 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.

36 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.

37 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.

38 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.

39 La pubblicaz Per la pubblicaz i del sito è sufficiente cliccare sulla icona che vedi a sinistra e poi completare la finestra Pubblicaz pagina.

40 Il programma è scaricabile all indirizzo: