Internet
A titolo di esempio si intende realizzare un prototipo di pagina web contenente i seguenti elementi:
- sfondo
- pulsanti
- testo scritto
- collegamento ipertestuale ad un’ altra pagina
- tabella
- frame
Di seguito vengono riportate le istruzioni per la creazione guidata di una pagina realizzata con il programma applicativo Front Page Express che può essere scaricato dal sito www.microsoft.com .
L’utente, seguendo passo - passo queste istruzioni, é in grado di realizzare l'esempio proposto e di verificare quanto ha appreso confrontando il sito ottenuto con la versione fornita nel file “Risultati.zip”.
Struttura gerarchica
Come già sottolineato nel capitolo “Descrizione del metodo” la prima operazione da compiere è quella di creare la struttura gerarchica del sito.
Nella realtà l’applicativo Front Page Express non permette di realizzare questo a priori.
E’, quindi, più agevole, definire di volta in volta, quando si rende necessario, una nuova pagina collegandola alle precedenti attraverso link.
All’apertura di Front Page Express si aprirà, di default, una pagina nuova senza titolo, da rinominarsi in “index.htm” :
Testo
Sono essenzialmente due le modalità con cui inserire un testo all’interno di una pagina web.
E’ possibile riportare un testo scritto o utilizzando direttamente Front Page Express o preparando il testo in Word e ricopiandolo solo successivamente all’interno della pagina web.
La scelta di una o dell’altra alternativa è a discrezione dell’utente.
Essendo le parti testuali relative al nostro esempio molto brevi, si è preferito ricorrere alla prima modalità.
Evidenziando il testo riportato e cliccando su di esso col tasto destro del mouse alla voce Proprietà carattere è possibile stabilire proprietà del testo quali colore, dimensione, stile e tipologia di carattere.
Nella realizzazione dell’esempio si è scelto di utilizzare per la stesura del testo le seguenti proprietà:
Inserimento immagini
E' consigliabile inserire immagini (da utilizzare come sfondi, pulsanti e intestazioni) aventi come estensione .GIF o .JPEG in quanto occupanti un minor spazio.
Qualora si stia lavorando su disco fisso, prima di utilizzare immagini contenute in files esterni è necessario salvarle in una cartella che verrà chiamata “Images”.
Il sito proposto come esempio è stato realizzato utilizzando i files: ‘sfondo4.jpg’, ‘sym4.gif’, ‘inizanimato.gif’, ‘center.gif’, ‘piazza_duomo09_640.gif’, ‘piazza_duomo10_640.gif’, ‘galleria_640.gif’, ‘galleria_800s.gif’, ‘sanlorenzo00.gif’, ‘sanlorenzo02.gif’, ‘scala_04.gif’, ‘scala_05.gif’, ‘arco_della_pace1.gif’, ‘arco_della_pace2.gif’, ‘arco_della_pace4.gif’, ‘sforzesco_01_40.gif’, ‘sforzesco_05_40.gif’, ‘sforzesco_06_40.gif’ che si trovano nel file “input.zip”.
Le immagini presenti nell’esempio sono state inserite sulla base del seguente percorso :
Sfondo
Si è in grado di inserire un’immagine di sfondo in due modalità :
Oppure:
Il programma carica automaticamente lo sfondo desiderato sulla pagina web.
Nell’esempio è stato utilizzato, come immagine di sfondo per tutte le pagine, il file ‘sfondo4.jpg’.
Pulsante collegamento a nuova pagina
La funzione di pulsante può essere attribuita sia a oggetti contenuti all’interno di file che a scritte opportunamente posizionate all’interno della pagina web.
Se si vuole inserire un tasto “Entra” che, dalla pagina di ingresso, mi permetta il collegamento ad una nuova pagina :
Ci si ritrova, automaticamente, a lavorare sulla nuova pagina.
Si è scelto di operare su questa pagina una suddivisione dello spazio in frame.
Si ricorda che le pagine web da assegnare a ciascun riquadro devono essere create precedentemente alla creazione della pagina da suddividere.
Sulla base, quindi, delle precedenti istruzioni vengono create le pagine relative ai file ‘milano.htm’ e ‘index2.htm’ all’interno delle quali vengono inserite rispettivamente:
- nel file ‘milano.htm’ : sfondo, titolo come indicato in precedenza e una tabella sulla base delle istruzioni riportate qui di seguito;
- nel file ‘index2.htm’ : sfondo, titolo, testo e un collegamento ipertestuale ad una pagina successiva denominata ‘duomo.htm’ seguendo le indicazioni definite in precedenza.
Tabella
Inserire una tabella è molto semplice, basta specificare il numero delle righe e delle colonne che deve avere e le caratteristiche della caselle:
E’ possibile scrivere direttamente all’interno delle caselle e modificarne sia le dimensioni che i colori:
Nell’esempio si è inserita, nel file 'milano.htm' una tabella di dimensioni (6;2) avente uno sfondo “verde” e il seguente layout :
All’interno di essa sono state inserite, nell’ordine, le seguenti immagini:
‘piazza_duomo09_640.gif’, ‘piazza_duomo10_640.gif’, ‘galleria_640.gif’, ‘galleria_800s.gif’, ‘sanlorenzo00.gif’, ‘sanlorenzo02.gif’, ‘scala_04.gif’, ‘scala_05.gif’, ‘arco_della_pace1.gif’, ‘arco_della_pace2.gif’, ‘arco_della_pace4.gif’, ‘sforzesco_01_40.gif’, ‘sforzesco_05_40.gif’, ‘sforzesco_06_40.gif’.
Realizzate, quindi, le pagine da inserirsi nel file ‘documentframeset.htm’ si realizza la suddivisione della pagina.
Frame
L’applicativo Front Page Express non permette di realizzare direttamente la suddivisione in frame della pagina web su cui sto lavorando.
Il documento così creato nella realtà non ha contenuto ma si limita a segnalare come suddividere la finestra in più riquadri e specifica quale pagina web debba essere assegnata a ciascun riquadro.
Nell’esempio in esame, nella pagina suddivisa in frame, vengono inseriti i file ‘milano.htm’ e ‘index2.htm’.
Occorre specificare la larghezza (se suddivido la pagina in colonne ) o l’altezza (se suddivido la pagina in righe) dei riquadri in cui si intende suddividere la pagina.
Le operazioni di suddivisione della pagina in riquadri e di assegnazione a ciascun riquadro di una pagina web devono essere eseguite direttamente in linguaggio HTML.
Ipotizzando di voler effettuare una suddivisione di pagina in 2 colonne vado ad inserire nella codifica HTML le istruzioni necessarie al mio scopo:
A completamento dell’ esempio realizzato, nel file ‘duomo.htm’, sono state inserite :
 |
 |
 |
