PRIME INDICAZIONI. La pagina principale del vostro sito, la home page, deve essere salvata sempre come index.html.

Transcript

1 CONSIGLI E TRUCCHI

2 PRIMA DI COMINCIARE Prima di cominciare a costruire qualsiasi sito è bene controllare se siano visibili le estensioni dei file. Sapere, ad esempio, che c'è un file index è avere una informazione incompleta se non conosciamo anche l'estensione: il file sarà index.html o index.htm o, peggio, index.html.html (succede anche questo)?. E' meglio fare in modo che Windows visualizzi sempre l'estensione dei file. 1. Se avete XP andate in Pannello di controllo > Opzioni di cartella, Se avete Windows Vista andate in Pannello di controllo > Aspetto e Personalizzazione > Opzioni di cartella. 2. Scegliete la scheda Visualizzazione. 3. Nel riquadro Impostazioni Avanzate trovate l opzione Nascondi le estensioni per i tipi di file conosciuti e deselezionatela. 4. Cliccata sul pulsante Applica e successivamente sul pulsante Ok.

3 PRIME INDICAZIONI Tutto il sito va sempre messo in una cartella, chiamata ad esempio, mioweb. E' molto consigliabile inserire nella cartella mioweb una sottocartella, chiamata ad esempio immagini, in cui verranno inseriti disegni, foto, banner ed altri elementi grafici. Nella cartella mioweb vanno messi anche gli eventuali file musicali o quelli relativi ai video e, se ci sono, i file.jps. La cartella mioweb non va messa sul desktop (questo lo fanno solo gli sprovveduti ed i pasticcioni e voi non lo siete!): mettete la cartella in Documenti. Tutte le cartelle, file e relative estensioni si scrivono con i caratteri minuscoli. Non lasciare mai spazi nei nomi dei file né mettere caratteri speciali (accenti, simboli ). Esempi corretti: panoramafirenze.jpg ; cartellasuoni ; pagina1.html ; banner.gif, novita.html Esempi scorretti: panorama di Firenze.jpg ; Cartella suoni ; Pagina 1.HTML ; Banner.Gif, novità.html. La pagina principale del vostro sito, la home page, deve essere salvata sempre come index.html. Non usate mai per lo sfondo un'unica immagine gigantesca : la vostra bellissima foto dalle dimensioni di 1600X1200 pixel sarà decisamente troppo ingombrante (e lenta da scaricare!). Per gli sfondi vanno benissimo invece piccole immagini (.jpg o.gif) che verranno automaticamente ripetute dal browser. Fare sempre molta attenzione anche alle dimensioni delle altre immagini: se sono troppo grandi (o pesanti ) bisogna ridimensionarle con uno dei tanti programmi, anche gratuiti, che si trovano in Rete. Fino a poco tempo si consigliava di realizzare pagine web, complete di tutti gli elementi grafici, dal peso complessivo di Kb!! Al giorno d'oggi c'è l' ADSL ma ricordiamo sempre che non tutti gli utenti del vostro sito hanno un collegamento Internet veloce. Vale sempre la regola dei dieci secondi: questo è il tempo massimo che deve metterci la vostra pagina web per aprirsi, pena l'abbandono del sito. Un sito web deve offrire soprattutto informazioni: spesso animazioni flash, artifici sonori e grafici nascondono solo povertà di informazione reale. Usate i file musicali.mp3 solo quando sono necessari: rendono infatti la pagina lentissima da scaricare. Chi visita il vostro sito si aspetta tre cose fondamentali: 1. informazioni aggiornate 2. una navigazione che non dia problemi ( quanti siti violano questa regola!!) 3. uno scaricamento veloce delle pagine web. Certamente una veste grafica gradevole non guasta; l'esperienza però insegna che spesso i siti più ricchi di informazione sono quelli graficamente più semplici (semplice spesso è anche sinonimo di elegante).

4 TOGLIERE ALCUNI IMPICCI Quando si apre KompoZer si viene accolti dalla finestra dei suggerimenti che, a lungo andare, diventa veramente noiosa: Conviene allora togliere la spunta a Mostra suggerimenti all' avvio. Se si volessero rivedere i suggerimenti, basta cliccare nella barra dei menù il simbolo? e poi su Suggerimento del giorno. Anche la finestra gestione dei siti spesso occupa inutilmente parte dell'area di lavoro. Basta cliccare sulla X per farla sparire: Per far riapparire la finestra Gestione siti è sufficiente cliccare sul tasto F9.

5 INSERIMENTO CORRETTO IMMAGINI Con KompoZer, per evitare problemi con l'inserimento di immagini o dello sfondo con immagine, si deve procedere nel seguente modo. Si apre una nuova pagina con KompoZer e si salva, con il nome che si desidera, la pagina stessa (es. pagina.html), anche se la pagina da realizzare è ancora vuota. Poiché la pagina è stata già salvata, al momento di inserire le immagini ci sarà automaticamente il segno di spunta accanto a "L'URL è relativo all'indirizzo della pagina" e le immagini saranno perciò inserite correttamente. Finito tutto, si risalva la pagina (nel caso dell'esempio, come pagina.html). Se non si fosse salvato la pagina prima di inserire le immagini, bisogna correggere il collegamento delle immagini stesse. Aprire KompoZer, aprire poi il file con l'immagine (o le immagini). Fare questo procedimento per ogni immagine del file: cliccare sull'immagine, cliccare su Inserisci e poi su Immagine. Cliccare nel quadratino a sinistra della frase "L'URL è relativo all'indirizzo della pagina". Cliccare su OK. Risalvare il file al termine delle operazioni. Per l'immagine di sfondo: aprire con KompoZer il file, cliccare su Formato e poi su Sfondo e colori pagina. Cliccare nel quadratino a sinistra di "L'URL è relativo all'indirizzo della pagina". Cliccare su OK e risalvare la pagina.

6 TESTO ALTERNATIVO Talvolta è bene inserire anche un testo alternativo alle immagini. Se si ha, ad esempio, una foto panoramica di Firenze (panoramafirenze.jpg) si può inserire il testo alternativo in questo modo: Ricordarsi di inserire il testo anche nella casella Tooltip in modo che il testo sia visualizzata anche se si usa Firefox (il codice sorgente per Explorer è alt= testo, quello per Firefox è title= testo ).

7 BORDI TABELLE E CELLE Colorare i bordi di una tabella Fare clic destro all'interno della tabella. Cliccare su Proprietà cella della tabella e poi cliccare sulla linguetta Tabella. Cliccare su Proprietà avanzate e poi sulla linguetta Stile in linea. In Attributo battere border e in Valore solid 2px #ff0000. Cliccare su OK.

8 ( Nella finestra Proprietà tabella controllare se l'allineamento tabella sia esatto. Apportare le modifiche necessarie per mettere la tabella a sinistra o al centro o a destra). Nella finestra Proprietà tabella cliccare su Applica e su OK. Attributi e valori diversi: Border fa sì che tutti i bordi della tabella siano colorati. border top colora solo il bordo superiore della tabella border bottom colora solo il bordo inferiore della tabella border left colora solo il bordo sinistro della tabella border right colora solo il bordo destro della tabella solid indica che la linea sarà continua dashed indica che la linea sarà tratteggiata dotted indica che la linea sarà punteggiata 2px indica che la linea sarà spessa 2 pixel; 4px spessore si 4 pixel ecc. #ff0000 color rosso; #00ff00 verde; #0000ff blu ecc. Colorare i bordi di una cella Fare clic destro all'interno della cella. Cliccare su Proprietà cella della tabella e poi cliccare sulla linguetta Celle. In Seleziona scegliere cella. Cliccare su Proprietà avanzate e poi sulla linguetta Stile in linea. In Attributo battere border e in Valore solid 2px #ff0000. Cliccare su OK. Nella finestra Proprietà tabella cliccare su Applica e su OK. Per attributi e valori diversi valgono le regole per i bordi delle tabelle.

9 TABELLE 1 Immaginiamo di avere una tabella formata da una riga e due colonne della larghezza di 600 pixel (e quindi due celle di 300 pixel ciascuna) e di dover scrivere qualcosa in una cella. Succede questo: Tutta la cella si è allargata verso destra. Ciò succede perché non abbiamo precedentemente fissato la larghezza le celle. Dopo aver inserito la tabella, fare clic destro nella cella di sinistra e cliccare ancora su Proprietà cella della tabella. Accertarsi che sia selezionata la linguetta Celle. Nella sezione Dimensioni della finestra Proprietà tabella inserire il valore 300 (pixel) in larghezza: Nella sezione Selezione cliccare su Successiva e mettere nuovamente il valore 300 (pixel) in larghezza. Cliccare su Applica e poi su OK.

10 Ora il testo non farà cambiare la larghezza della cella: TABELLE 2 Immaginiamo ora di dover fare una tabella di una riga (ma potremmo metterne quante vogliamo) e di tre colonne (celle) della larghezza di 100, 300 e 200 pixel ciascuna. Impostando una tabella della larghezza di 600 pixel avremmo questo risultato: Dobbiamo perciò modificarla. Fare clic destro nella prima cella e poi cliccare su Proprietà cella della tabella. Accertarsi che sia selezionata la linguetta Celle. Nella sezione Dimensioni della finestra Proprietà tabella inserire il valore 100 (pixel) in larghezza. Nella sezione Selezione cliccare su Successiva e mettere in Dimensioni il valore 300 (pixel) in larghezza. Nella sezione Selezione cliccare su Successiva e mettere in Dimensioni il valore 200 (pixel) in larghezza. Cliccare su Applica e poi su OK. Ecco il risultato, quello voluto:

11 Tabelle 3 A volte, lavorando con le tabelle, può succedere che si voglia posizionare in una cella il cursore del mouse in alto a sinistra, ma non si riesca a far ciò: sembra che il cursore sia bloccato. Ecco la situazione: Per riportare il cursore in alto a sinistra, fare clic destro nella cella e poi cliccare su Proprietà cella della tabella. Accertarsi che sia selezionata la linguetta Celle. Nella sezione Allineamento contenuto cliccare su Verticale In alto e in Orizzontale Sinistra: Cliccare su Applica e poi su OK. Il cursore si porterà nel punto voluto della cella.

12 INSERIRE UN CODICE SORGENTE IN UNA PAGINA WEB. Talvolta è necessario inserire del codice sorgente nella nostra pagina web, per esempio quando si vuole realizzare un menù con i Css; inserire un file musicale; usare degli script per realizzare un calendario La procedura non è complicata. Per prima cosa aprire il file con KompoZer e cliccare sulla linguetta Sorgente che si trova in basso: Cambierà la visualizzazione e si vedrà il codice sorgente della pagina web che state realizzando. Ridurre ora ad icona KompoZer agendo sull'icona in alto a destra: Aprire ora il file (con un doppio clic) dove c'è il codice da aggiungere e fare la copia del codice stesso (selezionare il codice e poi fare clic destro e clic su Copia). Ridurre ad icona anche questo file (o chiuderlo se non serve più). Riaprire Kompozer, fare clic nel punto dove va inserito il codice, fare clic destro e poi clic su incolla. Cliccare ora sulla linguetta Disegno: Salvare il file con nome (se necessario).

13 ESEGUIRE UN FILE.mp3 IN UN SITO Per eseguire un file.mp3 ( di nome, p.es., inno.mp3) automaticamente all apertura della pagina web il codice sorgente è: <embed src="inno.mp3" hidden="true" autostart="true" loop="true" height="0" width="0"> (Non viene visualizzata la barra del player) Per eseguire un file.mp3 automaticamente all apertura della pagina web il codice sorgente è: <embed src="inno.mp3" hidden="false" autostart="true" loop="true" height="32" width="100"> (Viene visualizzata la barra del player e l esecuzione del file può essere interrotta cliccando sull icona del player ). Per non eseguire un file.mp3 automaticamente all apertura della pagina web il codice sorgente è: <embed src="inno.mp3" hidden="false" autostart="false" loop="true" height="32" width="100"> ( L esecuzione del file avviene solo se si clicca l icona del player ) I valori di height e di width possono essere liberamente cambiati, ma in linea di massima vanno bene quelli sopra riportati. Ovviamente il file inno.mp3 deve essere messo nella cartella del sito. INSERIRE UN FILMATO IN UN SITO Per inserire un filmato (chiamato ad esempio movie.wmv) <embed src="movie.wmv" width="400" height="600" autostart="true" loop="1"></embed> Il codice funziona sia con Firefox sia con Explorer, sicuramente con i file.avi.wmv.mpg. Bisogna adattare i valori di width e di height a seconda del file video (fare clic destro sul file e cliccare su proprietà: si dovrebbe vedere la larghezza e l'altezza del video). Se si mette autostart= false bisogna far partire il file in manuale, cliccando sulla freccetta del player. Mettendo altri valori in loop (2, 3 ) si fa ripetere il filmato. Ovviamente il file movie.wmv deve essere messo nella cartella del sito. MOTIVO MUSICALE CONTINUATO A volte si può volere che un file musicale, inserito in una pagina web (chiamata ad es. pagina1.html) non si interrompa quando si apre un'altra pagina (chiamata ad es.pagina2.html). Per far questo basta modificare leggermente il codice sorgente del link. Per passare dalla pagina1.tml alla pagina2.html basterebbe un link di questo tipo: <a href="pagina2.html">vai alla pagina seguente</a> Il link va modificato in questo modo: <a href="pagina2.html" target= _blank >Vai alla pagina seguente</a>

14 Un codice sorgente possibile sarebbe perciò il seguente: <html> <head> <meta content="text/html; charset=iso " http equiv="content type"> <title>test</title> <embed src="mozart.mp3" hidden="true" autostart="true" loop="true" height="0" width="0"> </head> <body><br><br><br> <a href="pagina2.html" target="_blank">vai alla pagina seguente</a><br> <br><br><br> </body> </html> AGGIUNGERE L'INDIRIZZO DEL PROPRIO SITO AI PREFERITI Tra i tag < head > e </head> inserire questo codice: <script type="text/javascript"> function bookmarksite(title, url){ if (document.all) window.external.addfavorite(url, title); else if (window.sidebar) window.sidebar.addpanel(title, url, " ") } </script> Aggiungere, nel punto voluto, dopo il tag <body> Il seguente codice: <a href="javascript:bookmarksite('titolo del sito', ' questo sito ai preferiti</a> Ovviamente, bisogna mettere l'url esatto del vostro sito e il nome del vostro sito. Questo script funziona sia con Explorer sia con Firefox.

15 UN SEMPLICE MENU' CON I CSS La tecnica dei fogli di stile (CSS) permette di realizzare pagine Web veramente buone. E' anche possibile trovare in Rete script interessanti che possono essere copiati e poi incollati nel codice sorgente delle nostre pagine Web. Ad esempio, si può realizzare un semplicissimo ma elegante menù di navigazione. Partiamo da questo semplice menù realizzato con una tabella composta da una riga e da una colonna: Finora il risultato non è entusiasmante. Copiamo però questo codice tra <head> e </head> nel codice sorgente della nostra pagina Web: <style type="text/css"> <!-a:link {text-decoration: none; color: #000000} a:visited {text-decoration: none; color: #000000} a:hover {color: #ff0000} --> </style> e risalviamo il file. Il risultato sarà questo: Al passaggio del cursore del mouse il link diventa di color rosso. Lo script è facilmente modificabile: ad esempio per avere un link giallo che diventa verde al passaggio del mouse, basta sostituire il codice dei colori ( #ffff00 giallo; #00ff00 verde).

16 MAPPA IMMAGINE CON GIMP KompoZer non ha un menù specifico o delle icone per realizzare una mappa immagine. Inizialmente gli sviluppatori hanno pensato a tale possibilità: Come si vede, il pulsante è di color grigio, quindi non attivabile. Forse lo sviluppo di questa applicazione non è proseguito poiché è possibile ricavare il codice della mappa immagine ricorrendo a GIMP. Partiremo da questa immagine, panorama.jpg (Piazza dell' Unità d'italia, a Trieste):

17 Aprire ora GIMP, cliccare su File e poi su Apri. Cliccare sull'immagine voluta (in questo caso panorama.jpg) e poi su Apri. La foto ora sarà caricata in GIMP: Cliccare su Filtri, Web e poi su Mappa immagine. Ora si aprirà una nuova finestra: A sinistra vediamo le tre sagome che servono per ritagliare una parte della foto: il rettangolo, il cerchio, oppure un poligono. Cliccare sulla sagoma del rettangolo e disegnare il rettangolo attorno alla fontana.

18 Disegnato il rettangolo, fare un bel clic. Si aprirà allora una nuova finestra:

19 Nella finestra rettangolare (URL da attivare ) scrivere il nome del file.html che verrà aperto dopo aver cliccato sulla fontana (nell' esempio battere fontana.html). Cliccare ora su Applica e poi su OK. Si tornerà alla finestra precedente. (Per mappare altri elementi, basta ripetere i passaggi già descritti). Cliccare ora su File e su Salva come: si vedrà proposto un file chiamato, in questo caso, panorama.jpg.map. Scegliere dove salvare e cliccare su Salva. Aprendo con un doppio clic il file panorama.jpg.map, si otterrà il codice sorgente da copiare e poi incollare nella pagina Web: <img src="panorama.jpg" width="500" height="331" border="0" usemap="#map" /> <map name="map"> <! #$ :Image map file created by GIMP Image Map plug in > <! #$ :GIMP Image Map plug in by Maurits Rijk > <! #$ :Please do not edit lines starting with "#$" > <! #$VERSION:2.3 > <! #$AUTHOR:ecofive > <area shape="rect" coords="53,100,215,289" href="fontana.html" /> </map> Sembra un po' complicato, ma in realtà tutta l'operazione non presenta particolari difficoltà. Trieste, 14 dicembre 2009