Gestire un sito con Nvu

Transcript

1 Gestire un sito con Nvu di Isabelle Motte Facultés Universitaires NotreDame della Paix di Namur Traduzione italiana:

2 Mappa del corso Introduzione : descrizione della finestra di lavoro I Parte : gestione di un sito web II Parte : modifica delle pagine web III Parte : trucchi e astuzie per guadagnare tempo

3 Introduzione : descrizione della finestra di lavoro

4 nome del file barra del titolo barra del menu barra strumenti barra di formattazione del testo corpo del documento linguette di visualizzazione gestione del sito barra di stato

5 La barra degli strumenti gestire i documenti vedere un documento nel browser (se è salvato in un sito) inviare il documento nel sito remoto inserire degli oggetti stampare il documento

6 Le differenti modalità di visualizzazione Modalità normale : per modificare le pagine (le tabelle e le ancore sono visibili)

7 Le differenti modalità di visualizzazione Modalità HTML : per vedere i tag principali modalità pratica per applicare degli stili!

8 Le differenti modalità di visualizzazione Modalità Source : per vedere il codice

9 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

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

11 Prima parte : gestione di un sito web

12 Nvu site manager Accessibile con il tasto F9

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

14 Nvu site manager Definire un sito locale basta scegliere la directory radice.

15 Nvu site manager e un sito remoto!

16 operazioni su cartelle e file (possibili solo in locale!)

17 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

18 Nvu site manager per pubblicare

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

20 Seconda Parte : modifica di pagine web 1) 2) 3) 4) 5) 6) 7) 8) Le pagine web semplici La formattazione del testo Le immagini La formattazione delle pagine I link Gli elenchi Le tabelle I frames

21 Seconda Parte : modifica di pagine web 9) I moduli 10) I media 11) Gli stili 12) I tag META => struttura analoga al corso di HTML!

22 1) Le pagine web semplici A/ Le operazioni sui file come in tutti gli editor di testo per pubblicare sul sito remoto

23 1) Le pagine web semplici B/ Le proprietà della pagina (Edit Preferences) per riformattare un documento creato con un altro programma (Word, ) scelta importante

24 1) Le pagine web semplici B/ Le proprietà della pagina scelta del font per la visualizzazione in modalità normale o Preview Questa scelta è indipendente dalla visualizzazione nel browser. => è solo per modificare le pagine

25 1) Le pagine web semplici B/ Le proprietà della pagina parametri di default delle nuove pagine

26 1) Le pagine web semplici B/ Le proprietà della pagina possibilità di scaricare e di installare delle estensioni per delle funzioni specifiche (scientifiche, linguistiche )

27 1) Le pagine web semplici B/ Le proprietà della pagina nel caso in cui una connessione diretta non sia configurata opzione per la modifica delle pagine che sembra non funzionare!

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

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

30 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, );

31 2) La formattazione del testo La barra di formattazione del testo permette di accedere alle principali proprietà del testo : formattazione paragrafo font del testo colore colore del testo evidenziazione del testo colore di sfondo elenchi indentazione diminuire, grassetto, allinemento livelli aumentare corsivo, le sottolineato dimensioni del testo

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

33 3) Le immagini L'ispezione di proprietà delle immagini : SRC ALT

34 3) Le immagini L'ispezione di proprietà delle immagini : WIDTH HEIGHT

35 3) Le immagini L'ispezione di proprietà delle immagini : HSPACE VSPACE BORDER ALIGN USEMAP (ancora da fare)

36 3) Le immagini L'ispezione di proprietà delle immagini : A HREF altri attributi

37 3) Le immagini Le 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 :

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

39 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;

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

41 A/ creare des 5) I link 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

42 5) I link A/ 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!

43 6) Gli elenchi Gli elenchi numerati e gli elenchi puntati si creano a partire del menu testo Liste o tramite l'ispezione di proprietà con i pulsanti. 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>.

44 7) Le tabelle inserire un tabella : attraverso il menu Table Insert o attraverso il pulsante rapidamente

45 7) Le tabelle inserire un tabella : attraverso il menu Table Insert o attraverso il pulsante in modo più preciso

46 7) Le tabelle inserire un tabella : attraverso il menu Table Insert o attraverso il pulsante altri attributi di formattazione

47 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 :

48 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 : aggiungere una riga sopra eliminare la riga aggiungere una riga sotto aggiungere una colonna a sinistra eliminare la colonna aggiungere una colonna a destra

49 7) Le tabelle gli attributi della tabella possono essere sempre modificati con un doppio clic :

50 7) Le tabelle gli attributi della tabella possono essere sempre modificati con un doppio clic :

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

52 9) I moduli La cosa più semplice è utilizzare le pulsante Form della barra strumenti :

53 9) I moduli definire il modulo (FORM)

54 RIEPILOGO HTML SELECT TEXT TEXTAREA RADIO CHECKBOX SUBMIT RESET

55 9) I moduli inserire i campi TEXT, PASSWORD, RADIO, CHECKBOX,

56 9) I moduli inserire un campo TEXTAREA :

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

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

59 9) I moduli inserire un pulsante di invio o di reset (SUBMIT o RESET) :

60 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;

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

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

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

64 11) Gli stili L'editor CSS : per vedere i differenti stili per definire i fogli di stile per gli esperti di codice HTML per fare un link a un foglio di stile esterno per definire gli stili per creare un foglio di stile interno

65 11) Gli stili Prima 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

66 11) Gli stili Prima fase : creare un foglio di stile interno per inserire degli stili in questo foglio di stile

67 11) Gli stili Seconda fase : creare degli stili creare una classe : pulsante Rule, opzione "named stile"; Inserire il nome della classe : clic

68 11) Gli stili Seconda fase : creare gli stili creare una classe : personalizzare le proprietà della classe;

69 11) Gli stili Seconda fase : creare gli stili personalizzare le proprietà di un tag pulsante Rule, opzione "stile applied to elements of type"; inserire il nome del tag da personalizzare : clic

70 11) Gli stili Seconda : creare degli stili personalizzare le proprietà di un tag personalizzare le proprietà del tag :

71 11) Gli stili Seconda fase : creare degli stili creare un id : pulsante Rules, opzione "stile applied to all elements matching the following selector"; inserire # e il nome dell'id :

72 11) Gli stili Seconda fase : creare degli stili creare un id : personalizzare le proprietà dell'id :

73 11) Gli stili Terza 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).

74 11) Gli stili Terza 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.

75 11) Gli stili Quarta 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

76 11) Gli stili Quarta 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

77 11) Gli stili Quinta fase : utilizzare un foglio di stile esterno pulsante Link elt; cliccare su Choose file per scegliere il file : clic

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

79 Terza Parte : trucchi e astuzie per guadagnare tempo 1) personalizzare Nvu 2) utilizzare i modelli

80 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 Toolbar ad esempio per aggiungere un menu a tendina che contiene gli stili di tipo classe View Show/Hide Customize Toolbar Main Toolbar ad esempio per aggiungere un pulsante per i righelli orizzontali

81 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 :

82 2) Utilizzare i modelli Che 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.

83 2) Utilizzare i modelli Creare 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 Template Nota : i modelli Nvu hanno l'estensione.mzt

84 2) Utilizzare i modelli utilizzare 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

85 Da fare in laboratorio personalizzare le barre dei menu; creare un modello e più documenti collegati a questo modello;

86 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

87 Bibliografia "N vu Ze N tutoriel" di Fun Sun presentato nel sito I forum Nvu nel sito

88 Ringraziamenti Grazie 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

89 Ringraziamenti Questo 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.