Per vedere come apparirà il nostro lavoro sul browser, è possibile visualizzarne l anteprima facendo clic sulla scheda Anteprima accanto alla scheda HTML, in basso al foglio. Se la scheda Anteprima non compare significa che non è stato installato Internet Explorer, Nescape Navigator o altro. Per tornare in visualizzazione Normale fare clic sulla scheda Normale. Una visione più corretta e completa dell anteprima si può ottenere selezionando dal menù File, Visualizzazione Anteprima nel browser. Si apre una finestra in cui vengono elencati i browser installati nel proprio computer. Figura 54. Visualizza anteprima nel browser Poiché non tutti i browser visualizzano FrontPage nello stesso modo, è consigliabile installare almeno i più utilizzati (Internet Explorer e Netscape Navigator) e verificare con entrambi come verranno visualizzate le informazioni. Se uno dei due non è stato installato è sufficiente fare clic sul pulsante Aggiungi. Figura 55. Aggiungi browser Nella finestra che si apre digitare il nome del browser che si vuole ricercare, fare clic su Sfoglia, selezionare la cartella Programmi, successivamente File. Qualora Netscape non sia presente, è possibile scaricarlo gratuitamente dal sito www.netscape.com. Fare clic sul pulsante Anteprima nella Figura 56 per vedere come verrà realizzato in Internet. Fare clic su per tornare a FrontPage. Chiudere tutte le finestre e chiudere la pagina. 42
Capitolo 5 I COLLEGAMENTI I collegamenti ipertestuali hanno notevole importanza nella costruzione di un web: sono loro che ci consentono il passaggio da una pagina all altra in modo da poter fruire in tutte le sue sezioni il sito internet. Al di là della loro realizzazione pratica, peraltro molto semplice, è fondamentale sottolineare l importanza che deve essere dedicata all organizzazione delle informazioni cioè alla definizione dei percorsi per il reperimento di informazioni durante la navigazione. 5.1 INSERIRE UN COLLEGAMENTO IPERTESTUALE Per prima cosa occorre creare una nuova pagina all interno della Lezione1 e salvarla con nome file link e titolo I collegamenti (seguire le indicazioni alle pagine 7-8). Digitare al suo interno il testo seguente: I collegamenti Collegamento ad un file del computer locale Collegamento ad un indirizzo di posta elettronica Collegamento ad un sito esterno e formattarla come indicato in Figura 56. Fare clic su Salva. Si deve aver ottenuto la seguente struttura: 43
Figura 56. Cartella Lezione1 Chiudere la pagina link.htm. La procedura per realizzare di un collegamento ipertestuale è la seguente: selezionare il testo o l immagine a cui si vuole associare un collegamento ipertestuale. Nel nostro progetto, si vuole realizzare un collegamento secondo il quale, cliccando sul testo Lezione1 presente nella Home Page, si arriva alla pagina index.htm di titolo Lezione1 della cartella Lezione1. Aprire quindi, la pagina index.htm Home Page e selezionare il testo Lezione1. cliccare sull icona Inserisci collegamento ipertestuale menù Inserisci scegliere Collegamento Ipertestuale. nella barra Standard oppure dal Nella finestra che si apre, vedi Figura 57, selezionare il file di destinazione nell elenco dei file della finestra centrale. Fare attenzione a reperire il file nella relativa cartella di appartenenza. Nel nostro esercizio selezionare la pagina index.htm di titolo Home della cartella Lezione1 all interno della cartella Lezione1, come indicato nella Figura 57 che segue. 44
Figura 57. Crea collegamento Quindi fare clic su OK. Si faccia clic in un punto qualsiasi della pagina per vedere il risultato: si osserva che il testo Lezione1 risulta sottolineato e di colore blu elettrico. 5.2 VISITARE I COLLEGAMENTI IPERTESTUALI Per controllare se il collegamento ipertestuale è stato effettuato in maniera corretta, cliccare sulla scheda Anteprima; spostando il cursore sul collegamento appena effettuato si osserva che diventa una manina, segno che quella parola è un link ad un altra pagina, cliccare sul collegamento per visitarlo e per verificarne il corretto funzionamento; si deve aprire la pagina index della cartella Lezione1. Per tornare in visualizzazione Normale fare clic sulla scheda Normale. Una visualizzazione più completa e corretta si ottiene selezionando Visualizza anteprima nel browser, dal menù File e successivamente su Anteprima. In alternativa, dalla pagina aperta in visualizzazione Normale, è possibile seguire il collegamento posizionandosi col cursore del mouse sul collegamento, e tenendo premuto il tasto Ctrl fare clic sul collegamento stesso. O ancora, facendo clic col tasto destro del mouse sul collegamento, scegliere dal menù a scelta rapida che si apre, Visita collegamento. 5.3 ALTRI TIPI DI COLLEGAMENTI E possibile definire anche altri tipi di collegamenti; Si apra la pagina link.htm e si selezioni il testo Collegamento ad un file del computer locale e cliccare sull icona Collegamento ipertestuale apre la finestra di Figura 57; si osservino le seguenti specifiche. ; si 45
Se si fa clic sull icona è possibile creare un collegamento ad un file disponibile sul computer locale. Se si fa clic sull icona di posta è possibile creare un collegamento ad un indirizzo di posta elettronica. Questo collegamento consente di inviare direttamente una e-mail ad un determinato indirizzo. L icona Nuova pagina consente di creare un collegamento ad una pagina nuova ancora da creare. Se il collegamento deve essere fatto ad un indirizzo internet esterno è sufficiente digitarlo nella casella URL. Nel nostro esercizio, per realizzare un collegamento ad un file locale cliccare sull icona e selezionare l immagine stemma che si trova sul desktop del proprio computer; per realizzare un collegamento di posta elettronica selezionare, nella pagina link.htm, il testo Collegamento ad un indirizzo di posta elettronica, cliccare sull icona Inserisci collegamento ipertestuale, nella finestra che si apre cliccare su, nella successiva finestra digitare un indirizzo di posta elettronica (ad esempio il proprio) fare clic su OK e successivamente di nuovo su OK. Selezionare ora il testo Collegamento ad un sito esterno, cliccare sull icona Inserisci collegamento ipertestuale, nella finestra che si apre, nella casella URL, digitare ad esempio l indirizzo del sito www.unirsm.sm. Fare clic su OK e salvare le modifiche. Verificare, con le diverse modalità di visita di un collegamento, indicate sopra, tutti i collegamenti realizzati. 5.4 MODIFICARE UN COLLEGAMENTO IPERTESTUALE Per correggere un collegamento, è necessario cliccare col tasto destro del mouse sul collegamento da modificare e dal menù a scelta rapida che si apre, selezionare Proprietà collegamento ipertestuale. Si apre la finestra illustrata in Figura 57, in cui apportare le modifiche. 5.5 RIMUOVERE UN COLLEGAMENTO IPERTESTUALE Per rimuovere un collegamento, cliccare col tasto destro del mouse sul collegamento da rimuovere e dal menù a scelta rapida che si apre, selezionare Proprietà collegamento ipertestuale, nella finestra illustrata in Figura 57, nella casella URL, è sufficiente cancellare tutto il testo. 5.6 DEFINIRE I COLORI DEI COLLEGAMENTI Dal menù File selezionare Proprietà e nella finestra che si apre cliccare sulla scheda Sfondo. In questa pagina, è possibile stabilire i colori per le tre funzioni di un collegamento: - collegamento normale - collegamento visitato - collegamento attivo. Il collegamento normale è un collegamento ancora non visitato da nessuno, il suo colore deve essere scelto con attenzione visto che sarà visualizzato spesso (generalmente per questo collegamento si sceglie il blu elettrico). Il colore del collegamento visitato compare quando si è già precedentemente cliccato sul collegamento. Il colore del collegamento attivo compare nel momento in cui si clicca sul collegamento. 46
Figura 58. Proprietà sfondo collegamenti E possibile creare anche un effetto particolare al passaggio del mouse sul collegamento. Per far questo è sufficiente spuntare la casella Consenti effetti di attivazione per i collegamenti e far clic sul pulsante Stile attivazione. Si apre la seguente finestra: 47
Figura 59. Carattere In questa finestra selezionare uno degli effetti proposti; nel nostro caso è stato scelto l effetto Maiuscoletto e lo stile Grassetto. Chiudere le finestre facendo clic su OK. Salvare le modifiche e controllare il nuovo effetto selezionando Visualizza anteprima nel browser, dal menù File e fare clic su Anteprima. Si noterà che al passaggio del mouse sul collegamento, quest ultimo assume il carattere grassetto e maiuscolo. Nel nostro esercizio si vogliono realizzare i collegamenti che colleghino tutte le pagine attualmente realizzate. Si apra la pagina index.htm della cartella Lezione1 e si digiti il testo Lavorare con le immagini, I collegamenti, I segnalibri e in fondo alla pagina, allineato a destra digitare il testo Torna alla Home Page come indicato in Figura 60. 48
Figura 60. Nuovo testo Si realizzi il collegamento per il quale il testo Lavorare con le immagini venga collegato al file immagini.htm; analogamente il testo I collegamenti venga collegato al file link.htm. In fondo alla pagina, selezionare il testo Torna alla Home Page e collegarlo alla pagina index.htm di titolo Home page; per far ciò però, poiché ci si trova all interno della cartella Lezione1, occorre tornare su di un livello facendo clic sull icona Su di un livello, come indicato in Figura 61. 49
Si ottiene la seguente finestra Figura 62. Figura 61 50
Figura 62. Modifica collegamento In questa finestra, cliccare sul file index.htm di titolo Home Page. Fare attenzione a non selezionare il file con l icona con la matita, tale icona indica esclusivamente che il file è aperto e che non è abilitato a memorizzare modifiche. 51
Figura 63. Risultato lezione1 Analogamente nella pagina link.htm digitare il testo Torna alla Lezione1 e collegarlo alla pagina index.htm di titolo Home della cartella Lezione1 posta all interno della cartella Lezione1 avendo cura di selezionare la cartella Lezione1 come indicato in Figura 64 Figura 64 52
Ripetere lo stesso procedimento per la pagina immagini.htm. Chiudere tutte le pagine rispondendo Sì alla domanda di salvataggio. Per verificare che tutti i collegamenti funzionino, aprire la Home del sito, index.htm e cliccare sull icona Visualizza anteprima nel browser. Si deve aver ottenuto la seguente sequenza: dalla Figura 65 si clicchi su Lezione1 Si ottiene l apertura della seguente: Figura 65 Figura 66. Sequenza 53