modifica di una pagina esistente

UTILIZZO DEL TEMPLATE
Parte 5 – Gestione sito
MODIFICA DALLA PRIMA PAGINA
Apriamo la pagina index.html sia in HTML-KIT sia con il browser
1) RIGHE 7 - 10 - Incominciamo con il titolo e i Meta Tag
(queste voci non saranno visualizzate):
Modifichiamoli in questo modo (questo è un esempio che può e deve essere modificato
secondo le proprie esigenze):
<meta name="copyrigt" content="circolo didattico - PAESE - varese" />
<meta name="description" content="circolo didattico, scuole, NOME DELLA SCUOLA, NOME
DEL PAESE, varese, presentazione scuole, programmazione, piano offerta formativa, scuola
dell'infanzia, scuola primaria" />
<meta name="keywords" content="NOME DEL PAESE, varese, circolo didattico, scuola
primaria, piano offerta formativa, comune di , scuola, giornalino scolastico, pof, p.o.f., istruzione,
programma offerta formativa" />
QUESTA SEZIONE UNA VOLTA DEFINITA DEVE ESSERE COPIATA E INCOLLATA IN
TUTTE LE PAGINE DEL SITO.
2) RIGHE 26-32 – Istruzioni di navigazione.
Le righe che seguono servono soltanto in particolari browser come in Opera.
Anche qui dovremo completare le righe e poi copiare in tutte le pagine. Al posto dei trattini
andranno messi i nomi dei file da richiamare.
<!-- Istruzioni di navigazione per alcuni browser -->
<link rel="up" href="#testata" title="Torna in alto." />
<link rel="contents" title="cortenuti della pagina" href="#struttura" />
<link rel="start" href="http://www.---.it" title="Pagina principale del sito." />
<link rel="help" href="http://www.---.it/aiuti/aiuti.html" title="Aiuto." />
<link rel="index" href="http://www.---.it/aiuti/mappa.html" title="Indice dei contenuti." />
<link rel="search" title="cerca in questo sito" href="http://www.---.it/aiuti/mappa.html" />
<link rel="author" title="Per contattare l'autore" href="mailto:[email protected]" />
3) RIGHA 36 – icona
<!-- istruzione per richiamare un eventuale logo in miniatura -->
<link rel="shortcut icon" href="http://www.------.it/ic.ico" />
SHORTCUT ICON serve ad inserire e visualizzare durante la navigazione un’icona di
riconoscimento del sito, ovviamente occorre creare l’icona e memorizzarla nella dir principale .
Per creare un’icona occorrono programmi specifici.
Al posto dei puntini va messo l’indirizzo del sito.
Parte 5 - Gestione sito
pag. - 31
4) RIGHE 56-58 - Logo
<a href="INDEX.html" title="Ritorna alla prima pagina"><span class="nascosto"> | </span><img
class="vuota" alt="Logo della scuola" src="immagini/porte-1.jpg" height="140" width="140"
/></a>
La riga è composta da 3 parti:
LINK - collegamento alla pagina principale
<a href="INDEX.html" title="Ritorna alla prima pagina">
SPAN – richiama una classe definita nel foglio stile CSS ed inserisce il simbolo ”|” in una
visualizzazione testuale per separare il link dall’immagine
<span class="nascosto"> | </span>
IMG – Inserimento del logo. Andrà modificato il nome del file. Notate che la grandezza
dell’immagine è di 140 per 140 pixel.
<img class="vuota" alt="Logo della scuola" src="immagini/porte-1.jpg" height="140"
width="140" />
5) RIGHE 61 – 67 Menu orizzontali
Se non vengono fatte modifiche alla struttura questi menu restano invariati.
Ipotizziamo di voler creare una nuova pagina per poter mettere delle news e vogliamo che il
collegamento sia messo sul menu di navigazione principale.
Selezioniamo la riga 63, copiamo, creiamo una nuova riga, ed inseriamo (ora nella 63 vuota) il
testo.
<li><a href="aiuti/mappa.html" tabindex="3" accesskey="M" title="Mappa"><span
class="accesskey">M</span>appa</a></li>
Modifichiamola in questo modo
<li><a href="aiuti/news.html" tabindex="4" accesskey="N" title="Ultime novit&agrave;"><span
class="accesskey">N</span>ews</a></li>
Salviamo e visualizziamo, questo è il risultato:
Questa riga se definitiva andrà incollata su tutte le pagine
6) RIGHE 70 – 74 Intestazione scuola
Qui possiamo inserire le informazioni sulla scuola
7) RIGHE 146 in poi inserimento delle informazioni e immagini della prima pagina.
Parte 5 - Gestione sito
pag. - 32
8) Righe 141 – 143 inseriamo gli indirizzi e-mail corretti
Queste righe se definitive andranno incollate su tutte le pagine
Creazione della nuova pagina NEWS
Apriamo il file aiuti.html contenuto della cartella AIUTI
Partiamo da questa pagina perché i principali collegamenti sono già stati fatti e il tutto diventa
più semplice.
Salviamo questa pagina col nome news.html prima di fare qualsiasi operazione.
1. Modifichiamo il TITLE <title>News</title>
2. Se non è stato già fatto inseriamo i meta tag aggiornati e le istruzioni di navigazione
3. Se non è stato già fatto inseriamo la riga precedentemente scritta nella index
<li><a href="aiuti/news.html" tabindex="4" accesskey="N" title="Ultime
novit&agrave;"><span class="accesskey">N</span>ews</a></li>
4.
5.
6.
7.
Dobbiamo però fare una piccola ma importante modifica;
Nell’istruzione -- href="aiuti/news.html" – dobbiamo togliere AIUTI in quanto siamo già
all’interno della cartella AIUTI
Questo vuol dire che dovremo sempre specificare il percorso completo per raggiungere
la pagina desiderata.
A salire inseriremo il percorso, ad esempio se dalla pagina INDEX devo andare alla
pagina MAPPA contenuta nella cartella AIUTI dovrò scrivere AIUTI/MAPPA.HTML
A scendere inserirò il simbolo ../ che indica il ritorno indietro, ne inserirò tante quante
sono le cartelle, ad esempio se dalla pagina NEWS devo tornare alla pagina INDEX
devo tornare indietro di una cartella pertanto scriverò ../index.html
Il testo corretto è href="news.html".
nella riga 118 quella delle briciole modifico AIUTI con NEWS
Questa riga serve ad indicare il percorso fatto per raggiungere questa pagina
Cancello le righe 124 – 179 ed inserisco il nuovo testo
Se non è stato già fatto modifichiamo il piè di pagina
Salvo e verifico
Creazione di una sottocartella e di una pagina
•
•
Creiamo la sottocartella INSEGNANTI nella cartella SEGRETERIA
Apriamo il file segreteria.Html e salviamolo col nome insegnenti.html cella cartella
insegnanti
Tutte le modifiche ai meta tag ecc. sono date per fatte
Riga 6 – Modifichiamo il “title” in INSEGNANTI
Righe 19 e 23 in queste righe dobbiamo modificare il collegamento ai file css aggiungendo un
ulteriore ritorno indietro della cartella
Da così
@import url(../css/prova.css ); a così @import url(../../css/prova.css );
Parte 5 - Gestione sito
pag. - 33
Riga 57 – anche qui la stessa cosa per poter far caricale l’immagine e per il ritorno alla pagina
index
<a href="../../INDEX.html" title="Ritorna alla prima pagina"><span class="nascosto"> |
</span><img class="vuota" alt="Logo della scuola" src="../../immagini/porte-1.jpg" height="140"
width="140" /></a>
Righe 63 – 65 Stessa cosa in queste righe
<li><a href="../../aiuti/mappa.html" tabindex="3" accesskey="M" title="Mappa"><span
class="accesskey">M</span>appa</a></li>
Righe 91- 98 Menu destro
Riga 90 modifichiamo in INSEGNANTI.
In questa sezione si inseriranno le eventuali pagine inerenti questa sezione, e bene mettere
come prima riga il richiamo a se stessa.
<li><a class="dovesono" tabindex="20" accesskey="V" href="insegnanti.html" title="Vai
nella pagina insegnanti"><span class="accesskey">[V]</span> INSEGNANTI</a></li>
Ricordiamoci di modificate la stringa class="dovesono" che serve ad evidenziare la pagina
attiva.
Le righe in eccesso andranno cancellate.
Righe 111 - 116
Menu di navigazione orizzontale
Copiamo la riga 114 creiamo una riga vuota e incolliamo
Modifichiamo il tabindex – accesskey – href – title – testo
<li> | <a class="dovesono" tabindex="12" accesskey="3" href="insegnanti.html" title="Vai
nella sezione insegnati"><span class="accesskey">[3]</span> INSEGNANTI</a></li>
Questa stringa andrà copiata e incollata in tutte le pagine che fanno parte della cartella
segreteria
Riga 122 Briciole
Modifichiamo in questo modo
<div id="briciole">Ti trovi in &gt;<a class="generico" href="../index.html">Home Page</a>&gt;
segreteria &gt &gt INGEGNANTI
Riga 128 Qui possiamo inserire il teso
Questo è il risultato
Parte 5 - Gestione sito
pag. - 34