Gestire un sito con Nvu 0.41http://www.nvu.com

di Isabelle MotteFacultés Universitaires Notre-

Dame della Paix di Namur Traduzione italiana: nilocram@netscape.net

Mappa del corso

Introduzione : descrizione della finestra di lavoro

I Parte : gestione di un sito web II Parte : modifica delle pagine webIII Parte : trucchi e astuzie per guadagnare tempo

Introduzione : descrizione della finestra di lavoro

barra del titolo

barra strumenti

barra di stato

corpo del documento

barra del menu

nome del file

gestione del sito

barra di formattazione del testo

linguette di visualizzazione

La barra degli strumenti

gestirei documenti

inviare il documento nel sito remoto

vedere un documento nel browser(se è salvato in un sito)

inserire degli oggetti

stampareil documento

Le differenti modalità di visualizzazione

Modalità normale : per modificare le pagine(le tabelle e le ancore sono visibili)

Le differenti modalità di visualizzazione

Modalità HTML : per vedere i tag principali

modalità pratica per applicare degli stili !

Le differenti modalità di visualizzazione

Modalità Source : per vedere il codice

Les differenti modalità di visualizzazione

Modalità preview : per vedere un anteprima del risultato … ma la cosa più semplice è visualizzare il risultato con un browser : pulsante

Da fare in laboratorio

• aprire un documento creato interamente con codice HTML contenente degli oggetti di tipo differente (testo, immagine, tabella, ancora …)

• provare i differenti pulsanti della barra strumenti nella finestra documento;

• aprire una pagina web creata con Word e osservare il codice.

Prima parte : gestione di un sito web

Nvu site managerAccessibile con il tasto F9

Nvu site manager

• La cosa più semplice per gestire un sito web è configurare un sito locale (nel vostro computer) e un sito remoto (nel server);

• Evitate di usare più parole per il nome del sito e evitate per sicurezza anche le lettere accentuate e altri caratteri speciali .

Nvu site managerDefinire un sito locale …basta scegliere la directory radice.

Nvu site manager… e un sito remoto !

operazionisu cartellee file(possibili solo in locale !)

Nvu site manager• Sito locale : possibilità di creare delle nuove

cartelle, di modificare i nomi dei file, …• Sito remoto : per il momento, si possono solo

salvare dei file mediante l'accesso ftp. Occorre perciò creare le cartelle mediante un accesso ftp indipendente.

=> Miglioramenti da fare …

Nvu site managerper pubblicare …

Da fare in laboratorio• configurare un sito locale (non sul desktop !),

mettere alcuni documenti nel sito e testare la visualizzazione di questi documenti per mezzo del pulsante Browse;

• configurare un sito remoto (attenzione, stessa struttura !) e pubblicare i documenti del sito locale sul sito remoto;

Seconda Parte : modifica di pagine web

1) Le pagine web semplici2) La formattazione del testo3) Le immagini4) La formattazione delle pagine5) I link6) Gli elenchi7) Le tabelle8) I frames

Seconda Parte :modifica di pagine web

9) I moduli10) I media11) Gli stili12) I tag META

=> struttura analoga al corso di HTML !

1) Le pagine web semplici

A/ Le operazioni sui file

… come in tutti gli editor

di testo

per pubblicare sul sito remoto

1) Le pagine web semplici

B/ Le proprietà della pagina (Edit – Preferences)

sceltaimportante

per riformattare un documento

creato con un altro

programma(Word, …)

1) Le pagine web semplici

B/ Le proprietà della pagina

scelta del fontper la

visualizzazione in modalità

normaleo Preview

Questa scelta è indipendentedalla visualizzazione nel browser.=> è solo per modificare le pagine

1) Le pagine web semplici

B/ Le proprietà della pagina

parametridi default

dellenuovepagine

1) Le pagine web semplici

B/ Le proprietà della pagina

possibilità di scaricaree di installare delle estensioniper delle funzioni specifiche(scientifiche, linguistiche …)

1) Le pagine web semplici

B/ Le proprietà della paginanel caso in

cui unaconnessione

direttanon sia

configurata

opzioneper

la modifica delle pagine

… che sembra

nonfunzionare !

1) Le pagine web semplici

C/ Il codice• La modalità HTML Source permette di lavorare

direttamente nel codice;• La modalità HTML Tags permette di visualizzare i

principali tag e accedere ai loro attributi attraverso un doppio clic.

1) Le pagine web semplici

C/ Il codice• Il menu Tools – Validate HTML permette di

convalidare il codice HTML di un documento. Occorre que questo documento sia in un sito remoto (connessione) perché lo script eseguito non è disponibile nel programma in locale, ma nel sito del W3C.

Nvu propone d'inserire un link verso lo script nel codice del documento che visualizza una icona che attesta la validità del vostro codice :

2) La formattazione del testo• Il menu Format permette di

definire tutte le proprietà del testo :– i font (Arial, …);– le dimensioni (1,…,7,…);– lo stile (sottolineato, …);– il colore (red, …);– la direzione della scrittura;– L'eliminazione di stili, link,

ancore;– i paragrafi (P, H1, …);– Gli elenchi (3 tipi);– l'indentazione;- l'allinemento (centrato, …);- …

La barra di formattazione del testo permette di accedere alle principali proprietà del testo :

formattazione paragrafo

fontdel testo

coloredel testo

coloredi sfondo

colore

del testoevidenziazione

diminuire,aumentare

le dimensioni

del testo

grassetto,corsivo,

sottolineato

elenchi

allinemento

indentazione

livelli

2) La formattazione del testo

3) Le immagini

• le immagini sono inserite attraverso il menu Insert – immagine o attraverso il pulsante della barra strumenti;

• i differenti attributi del tag IMG sono definiti tramite l'ispezione di proprietà con cui si accede all'inserimento dell'immagine o attraverso un doppio clic sulla immagine.

3) Le immaginiL'ispezione di proprietà delle immagini :

SRC

ALT

3) Le immaginiL'ispezione di proprietà delle immagini :

WIDTHHEIGHT

3) Le immaginiL'ispezione di proprietà delle immagini :

HSPACEVSPACEBORDER

ALIGN

USEMAP(ancora da fare)

3) Le immaginiL'ispezione di proprietà delle immagini :

A HREF

altriattributi

3) Le immaginiLe barre orizzontali :

• le barre orizzontali sono inserite attraverso il menu Insert – Horizontal Line;

• i differenti attributi del tag HR sono definiti tramite l'ispezione di proprietà a cui si accede con doppio clic sul tag HR in modalità HTML Tags :

4) La formattazione delle pagine• il colore di sfondo, il colore di testo di default …

sono definiti attraverso il menu Format – page color and background);

• L'allinemento di un elemento è controllato con i pulsanti della barra strumenti;

• La separazione tra paragrafi (P) è realizzata attraverso il menu Format – Paragraph – Paragraph o attraverso la scorciatoia Alt+o+p+p;

• per inserire un salto di riga senza creare un nuovo paragrafo (BR), utilizzare ENTER;

• Le intestazioni sono create con il menu Format - Paragraph o con la barra di formattazione del testo ;

• Il testo preformattato è ottenuto attraverso il menu Format - Paragraph o con la barra strumenti ;

• Per far rientrare del testo, si può utilizzare il menu Format – Increase indent o i pulsanti della barra di formattazione del testo ;

• Gli spazi indivisibili sono automaticamente inseriti utilizzando la barra di spaziatura;

• Le lettere accentuate e i simboli speciali possono essere inseriti attraverso il menu Insert – Characters and Symbols;

• Non esiste alcun modo automatico per creare un raggruppamento di righe (NOBR) e dei salti di righe conditionali (WBR) perché questi tag sono poco considerati. Possono però essere inseriti direttamente nel codice.

5) I linkA/ creare des • inserire un link : selezionare il testo o

l'immagine e cliccare sul pulsante o scegliere Insert – Link :

per scegliere il target: definire

l'attributo TARGET

5) I linkA/ creare des link• inserire un'ancora con nome : utilizzare il pulsante

o il menu Insert – Named anchor;• inserire un link a una sezione di pagina : creare

un link alla pagina e aggiungere # seguito dal nome di l'ancora.

• è possibile modificare il colore di default dei link (non visitati, visitati, attivi, …) attraverso la proprietà della pagina (menu Format – pagina title and properties ). MA in generale è sconsigliato !

6) Gli elenchi

Gli elenchi di definizioni si creano in inserendo alternativemente il termine da definire e la definizione separati da degli a capo (ENTER).I rientri e la formattazione vengono creati automaticamente selezionando i termini o definizioni e cliccando su Format – List – Term o Definition. A volte ci sono dei problemi di formattazione e Occorre andare nel codice e collocare correttamente i tag <DT> e <DD>.

Gli elenchi numerati e gli elenchi puntati si creano a partire del menu testo – Liste o tramite l'ispezione di proprietà con i pulsanti .

7) Le tabelle• inserire un tabella : attraverso il menu

Table – Insert o attraverso il pulsante

rapidamente …

7) Le tabelle• inserire un tabella : attraverso il menu

Table – Insert o attraverso il pulsante

in modopiùpreciso …

7) Le tabelle• inserire un tabella : attraverso il menu

Table – Insert o attraverso il pulsante

altriattributi diformattazione…

7) Le tabelle• di default, tutte le celle della tabella hanno la

stessa misura e le dimensioni delle celle si adattano automaticamente al contenuto;

• per modificare le dimensioni delle celle, basta di spostare i delimitatori nei righelli orizzontale e verticale :

7) Le tabelle• modificare una tabella : attraverso il

menu Table si possono inserire/ eliminare righe e colonne, unire delle celle, …

• alcune azioni possono essere realizzate attraverso le maniglie della cella :

eliminare la riga

aggiungere una rigasopra

aggiungere una riga sotto

eliminare la colonna

aggiungere una colonnaa sinistra

aggiungere una colonnaa destra

7) Le tabelle• gli attributi della tabella possono essere

sempre modificati con un doppio clic :

7) Le tabelle• gli attributi della tabella possono essere

sempre modificati con un doppio clic :

8) I frames

I frames non sono implementati in Nvu perché sono sconsigliati dai motori di ricercaOccorre anche evitare di aprire un file che contenga dei frames perché Nvu rischia di danneggiare il codice.

9) I moduli

• La cosa più semplice è utilizzare le pulsante Form della barra strumenti :

9) I moduli

• definire il modulo (FORM)

SELECT

TEXT

TEXTAREA

RADIO

CHECKBOX

SUBMITRESET

RIEPILOGOHTML

9) I moduli

• inserire i campi TEXT, PASSWORD, RADIO, CHECKBOX, …

9) I moduli

• inserire un campo TEXTAREA :

9) I moduli• inserire un menu a tendina (SELECT) :

9) I moduli• inserire un menu a tendina (SELECT) :

9) I moduli• inserire un pulsante di invio o di reset

(SUBMIT o RESET) :

10) I multimédia

• l'inserimento di file sonori o video non è direttamente implementato in Nvu;

• I file multimediali possono essere inseriti come link a dei file esterni : inserire il percorso dei file nella casella Link;

• si può anche incorporarli direttamente nella pagina : inserire il tag <EMBED …> direttamente nel codice;

Da fare in laboratorio

utilizzare i differenti strumenti di Nvu per :• Formattare il testo (colore, …);• inserire un'immagine e modificare i suoi

attributi;• inserire un righello orizzontale;• inserire dei link e scegliere il loro target;• inserire degli elenchi;• inserire delle tabelle e personalizzare le celle;• inserire degli elementi dei moduli.

11) Gli stili

CSS = Cascaded Style Sheet - gli stili locali : uno stile applicato a una parte di una pagina ;- gli stili interni : uno stile applicato a tutta la pagina ;- gli stili esterni : uno stile applicato a più pagine ;Gli stili locali sono prioritari, vengono poi gli stili interni e infine gli stili esterni.

11) Gli stili

utilizzare gli stili locali …per sostituire tag e attributi sconsigliati (raccomandazione del W3C)• Menu Edit – Preferences;• barrare la casella Use CSS instead of HTML tags.

11) Gli stiliL'editor CSS :

per vedere i differenti stili

per definire i fogli di stile

per definire gli stili

per gliespertidi codice HTML per fare un link

a un foglio di stile esternoper creare un fogliodi stile interno

11) Gli stiliPrima fase : creare un foglio di stile interno• cliccare sul pulsante stile elt : inserire il nome

del foglio di stile, per i media, è meglio non mettere niente;

clic

11) Gli stiliPrima fase : creare un foglio di stile interno

per inserire degli stili in questo foglio di stile

11) Gli stiliSeconda fase : creare degli stilicreare una classe :• pulsante Rule, opzione "named stile";• Inserire il nome della classe :

clic

11) Gli stiliSeconda fase : creare gli stilicreare una classe :• personalizzare le proprietà della classe;

11) Gli stiliSeconda fase : creare gli stilipersonalizzare le proprietà di un tag• pulsante Rule, opzione "stile applied to

elements of type";• inserire il nome del tag da personalizzare :

clic

11) Gli stiliSeconda : creare degli stilipersonalizzare le proprietà di un tag• personalizzare le proprietà del tag :

11) Gli stiliSeconda fase : creare degli stilicreare un id :• pulsante Rules, opzione "stile applied to all

elements matching the following selector";• inserire # e il nome dell'id :

11) Gli stiliSeconda fase : creare degli stilicreare un id :• personalizzare le proprietà dell'id :

11) Gli stiliTerza fase : utilizzare uno stile • per inserire uno stile di livello blocco, Occorre

inserire un tag DIV cliccando sul l'épingle dei livelli ;

• gli stili di livello riga sono inseriti selezionando direttamente il testo interessato e utilizzando il menu a tendina degli stili (solo la classe!);

Nota : per visualizzare il menu a tendina degli stili, occorre personalizzare la barra di formattazione del testo (vedere Terza parte).

11) Gli stiliTerza fase : utilizzare uno stile • la cosa più semplice è di mettersi nella

modalità HTML tags e di selezionare il tag a cui verrà attribuito lo stile o la parte di testo o l'oggetto interessato;

• per applicare uno stile classe, la cosa più semplice è di utilizzare il menu atendina disponible in la barrre di formattazione del testo;

• per applicare un stile id, utilizzare il tasto destro e nelle proprietà avanzate completare manualmente l'attributo id.

11) Gli stiliQuarta fase : creare un foglio di stile esterno • selezionare un foglio di stile interno da

esportare;• cliccare sul pulsante Export stylesheet …• dare un nome con l'estensione .css

clic

11) Gli stiliQuarta fase : creare un foglio di stile esterno• attenzione, il percorso visualizzato è il percorso

assoluto => mettere il percorso relativo nel codice prima di trasferirlo nel server

11) Gli stiliQuinta fase : utilizzare un foglio di stile esterno • pulsante Link elt; • cliccare su Choose file per scegliere il file :

clic

Da fare in laboratorio

• creare un foglio di stile interno con dei tag personalizzati, delle classi e degli id;

• applicare gli stili a dei paragrafi di livello riga e di livello blocco.

Terza Parte : trucchi e astuzie per guadagnare tempo

1) personalizzare Nvu2) utilizzare i modelli

1) Personalizzare Nvu

E' possibile personalizzare le barre dei menu di Nvu con un clic col tasto destro su queste barre o attraverso i menu :• View – Show/Hide – Customize Toolbar – Format Toolbarad esempio per aggiungere un menu a tendina che contiene gli stili di tipo classe• View – Show/Hide – Customize Toolbar – Main Toolbarad esempio per aggiungere un pulsante per i righelli orizzontali

1) Personalizzare Nvu

E' possibile personalizzare le barre dei menu di Nvu con un clic col tasto destro su queste barre o attraverso i menu :

2) Utilizzare i modelliChe cos'è un modello ?• Un modello è un documento la cui

formattazione deve essere riprodotta in diverse pagine.

• La formattazione viene definita una volta per tutte nel modello e vengono create le pagine a partire del modello.

• L' aggiornamento del modello riguarda tutte le pagine dove è utilizzato.

• Di default, tutta la pagina modello non è modificabile e occorre inserire delle aree modificabili dove inserire il contenuto variabile.

2) Utilizzare i modelliCreare un modello :• File – New – Blank Template;• personalizzare il documento;• inserire delle aree modificabili (Insert – Templates – Insert editable area);• salvare (File – save).o• a partire da un documento html esistente• File – Save as – HTML TemplateNota : i modelli Nvu hanno l'estensione .mzt

2) Utilizzare i modelliutilizzare un modello :• File – New – documento based on a template;• selezionare il modello;• ok;Ma, il percorso verso il modello è il percorso assoluto => mettere il percorso relativo nel codice prima di mettere il file nel server.Non è ancora possibile aggiornare i file a partire dal file modello e a volte succede che si possano modificare delle aree definite come non modificabili.=> miglioramenti da fare …

Da fare in laboratorio

• personalizzare le barre dei menu;• creare un modello e più documenti

collegati a questo modello;

Conclusione

per la gestione di siti web che non contengano troppi media, Nvu è un programma che cerca di diventare l'equivalente di Dreamweaver.Da migliorare :• il site manager;• l'utilizzo dei modelli;• un' interfaccia per la creazione d'immagini mappate

Bibliografia

• "N|vu Ze|N tutoriel" di Fun Sun presentato nel sito http://www.framasoft.net

• I forum Nvu nel sito http://forum.nvudev.org/

RingraziamentiGrazie a tutti gli stagisti CUD che hanno partecipato alla sperimentazione del programma e che hanno contribuito a questo testo con diversi suggerimenti : Thierry-Narcisse KOUAGOU-BANGASSI - Remy William ANGORA - Othon Olivier LIKENG - Jean Fidèle NZIHOU -Innocent Mano – Farès TOUNSI –Eric BAREKE – Emery Patrice KALONJI MUYA – Djamila ZITOUNI – Cubaka MUGUMAODERHA – Binta Fatouma BOUBACAR KALME – Ayitchéou Judicaël Tchedji DEGUENON – Augustin KANYIMBU MUTOMBO – Anatolie SINGIRANKABO – Valéry MUCOWINTORE – Venant Irenee NYANDWI – Xavier LEONARD

RingraziamentiQuesto corso su Nvu fa parte della formazione realizzata nel quadro dello stage "Formation aux techniques multimédia et à leur utilisation nel domaine de l'auto-formation" finanziato dalla Coopération Universitaire au Développement e che si è tenuto alle Facoltà Universitarie Notre-Dame della Paix di Namur.