Esercizio INTERNET. Esercizio

Transcript

1 Esercizio 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 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 : - Da File si selezioni Proprietà della pagina - Nella cartella Generale, alla voce Titolo, si inserisca il nuovo nome della

2 pagina. Esso apparirà in testa al browser al momento della visualizzazione della pagina on-line. Per la realizzazione dell esempio si è scelto il titolo "Milano, il sito. 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à: - per i titoli : colore "Rosso, dimensione "6, stile "Normale, carattere "Mistral ; - per qualsiasi altra parte di testo : colore "Predefinito, dimensione "4, stile "Normale, carattere "Monotype Corsiva. Inserimento immagini

3 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 : - Da Inserisci si selezioni Immagine - Attraverso il tasto Sfoglia si cerca l immagine desiderata Sfondo Si è in grado di inserire un immagine di sfondo in due modalità : - Da File si selezioni Proprietà della pagina - Nella cartella Sfondo si evidenzi Inserimento di uno sfondo - Attraverso il tasto Sfoglia si cerca il file di sfondo desiderato Oppure: - Da Formato si selezioni la voce Sfondo - Si proceda come già indicato per il caso precedente 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.

4 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 posizioni nel punto prescelto scrivendo in formato testo "Entra - Si evidenzi la scritta - Da Inserisci si selezioni Collegamento ipertestuale - Alla voce Nuova Pagina si scriva il nome della pagina che si intende linkare (nell esempio in esame "documentframeset.htm ) assegnandole il titolo desiderato ("La città") - Si salva come pagina normale 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

5 Inserire una tabella è molto semplice, basta specificare il numero delle righe e delle colonne che deve avere e le caratteristiche della caselle: - Da Tabella si selezioni inserisci tabella. E possibile scrivere direttamente all interno delle caselle e modificarne sia le dimensioni che i colori: - Ci si posizioni all interno della cella - Tenendo premuto il tasto destro del mouse si scelga la voce Proprietà della tabella. Nell esempio si è inserita, nel file 'milano.htm' una tabella di dimensioni (6;2) avente uno sfondo "verde e il seguente layout : - dimensione bordo pari a 2 - spaziatura interna celle pari a 2 - spaziatura tra celle pari a 2 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.

6 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. - Da Visualizza si scelga la voce HTML Ipotizzando di voler effettuare una suddivisione di pagina in 2 colonne vado ad inserire nella codifica HTML le istruzioni necessarie al mio scopo: - <frameset cols= 300,* > : suddivide la mia pagina in 2 colonne; alla prima viene assegnata una larghezza di 300 pixel, alla seconda una larghezza pari allo spazio rimanente; - <frame src= milano.htm name= top /> : attribuisce al primo riquadro il file milano.htm ; - <frame src= index2.htm name= main /> : attribuisce al secondo riquadro il file index2.htm ; - </frameset> : chiude il tag <frameset>. A completamento dell esempio realizzato, nel file duomo.htm, sono state inserite : - un' immagine che indica il fatto che il sito è in costruzione ( cons17.gif ) a cui è stata attribuita la proprietà di attivarsi all apertura del file; - un immagine ( sym4.gif ) a fianco della quale si pone la scritta "Contattateci e il relativo indirizzo a cui richiedere eventuali informazioni un immagine ( inizanimato.gif ) a cui viene attribuito un collegamento ipertestuale che mi permetta di ritornare alla pagina iniziale index.htm. Dati di input Scarica i dati di input Risultati

7 Scarica i risultati