GUIDA ALL USO DI KOMPOZER INFORMAZIONI, CONSIGLI E TRUCCHI Di Giovanni Oliviero Edizione 2012
KompoZer è un editor WYSIWYG per file in formato HTML. Il programma, il cui sviluppo deriva dal defunto Nvu 1.0 del 2005, è un progetto open source di SourceForge portato avanti da una community di sviluppatori. È attivamente sviluppato e include le versioni localizzate nelle principali lingue tra cui l'italiano. Attualmente il codice è stato completamente riscritto rispetto a quello dell'antenato Nvu e tra le sue peculiarità vi sono un CSS editor, un Site manager, la possibilità di visualizzare e editare il codice HTML direttamente oltre alla composizione WYSIWYG. Il progetto KompoZer, che vede Fabien Cazenave come sviluppatore principale, ha subito uno stop temporaneo per impegni lavorativi del programmatore. Nel mese di giugno 2011, tramite il suo blog, egli ha fatto sapere di essere intenzionato a migliorare il lavoro fin qui svolto su KompoZer. KompoZer è un potente programma, facile da usare e gratuito, per realizzare pagine web in modo locale, per poi pubblicarle in un server remoto. Nella Guida avanzata all uso di KompoZer, oltre ad analizzare il programma nel suo aspetto completo, si vedranno le tecniche di impiego del programma di grafica Gimp per gestire immagini in un sito web e il programma di FTP FileZilla per il trasferimento dei file realizzati su un server remoto. La suite composta da KompoZer, Gimp e FileZilla costituisce un completo e potentissimo strumento per la progettazione, lo sviluppo, la realizzazione e la pubblicazione di una pagina web. Giovanni Oliviero www.aaa.lombardia.it Siti utili: http://www.aaa.lombardia.it http://www.echoecho.com/it/index.html http://www.mrwebmaster.it/html/guide/guida-html/ http://www.webdesigns.it/tutorial/marquee.htm http://www.weblink.it/ http://www.mrwebmaster.it/ http://www.html.it/ http://www.html.it/guide/guida-html5/ http://rosavitiello.altervista.org/template/template_free.htm http://www.web-link.it/html/script.htm http://filezilla.it/ http://miki92.altervista.org/ http://michelangeloscotto.net http://www.webdesigns.it/ Edizione originale liberamente riadattata da G. Oliviero ott.2012
SOMMARIO SOMMARIO... I 1. INTRODUZIONE A KOMPOZER... 1 2. DOVE E COME SCARICARE KOMPOZER... 2 2.1. Kompozer in ambiente windows... 2 2.2. Kompozer in ambiente mac... 2 2.3. Kompozer in ambiente linux... 2 3. PRIMI PASSI CON KOMPOZER... 2 3.1. Prima di iniziare... 3 3.2. Alcuni suggerimenti... 4 3.3. Alcune avvertenze... 4 3.4. Selezionare... 4 4. FORMATTARE UN TESTO... 4 4.1. Scegliere un carattere e colorare le parole.... 4 4.2. Aumentare o diminuire l'altezza dei caratteri.... 5 4.3. Grassetto, corsivo e sottolineato... 5 4.4. Allineare il testo... 5 4.5. Elenco numerato o puntato... 5 4.6. Inserire una linea orizzontale... 5 5. IMPOSTARE LA PAGINA WEB... 5 5.1. Come inserire una tabella... 6 5.2. Aprire una nuova pagina web... 6 5.3. Colorare lo sfondo della pagina... 6 5.4. Inserimento delle immagini... 6 5.5. Inserimento del testo alternativo... 7 5.6. Immagini e testo... 7 5.7. Inserire uno sfondo in una pagina... 7 6. LE TABELLE... 7 6.1. Inserire una tabella in una pagina web... 8 6.2. Togliere il bordo ad una tabelle... 8 6.3. Mettere uno sfondo colorato ad una tabella o ad una cella... 9 6.4. Aggiungere una riga alla tabella... 9 6.5. Aggiungere una colona... 9 6.6. Unire due celle... 9 6.7. Mettere uno sfondo colorato ad una o più celle... 9 6.8. Cancellare una tabella una riga o una colonna... 9 6.9. Fissaggio larghezza delle celle... 9 6.10. Tabella con colonne di dimensioni diverse... 10 7. I LINK... 10 7.1. Inserire l'indirizzo email... 10 7.2. Scaricare un file dalla nostra pagina web... 11 7.3. Inserire un link per un sito esterno... 11 7.4. Collegamenti interni (ancore)... 11 7.5. Ancora inserita in un'altra pagina web... 12 8. USO AVANZATO DELLE TABELLE... 13 8.1. Inserire lo sfondo in una tabella... 13 8.2. Inserire uno sfondo in una cella di una tabella... 14 Guida all uso di Kompozer Pag. - I -
Sommario 8.3. Colorare i bordi tabelle e celle... 14 8.4. Colorare i bordi di una cella... 14 9. ELEMENTI MULTIMEDIALI... 15 9.1. Eseguire un file.mp3 in una pagina web... 15 9.2. Motivo musicale continuato... 17 9.3. Inserire un filmato nel sito... 17 9.4. Inserire un filmato di YouTube nel sito... 18 10. RISORSE IN RETE... 18 11. PUBBLICARE UN SITO IN RETE... 18 12. UN SEMPLICE MENU' CON I CSS... 20 13. CONCETTI AVANZATI... 21 13.1. Codice sorgente... 21 13.1.1. Primo esempio pratico... 22 13.1.2. Secondo esempio pratico... 22 13.2. Togliere la sottolineatura ai link... 22 GLOSSARIO... 24 COMANDI HTML... 30 Indice delle figure. Figura 1 - Semplice pagina web... 1 Figura 2 - Abilitazione alla visualizzazione dell'estensione di file.... 3 Figura 3 - Finestra dei suggerimenti iniziale... 4 Figura 4 - Finestra Gestione siti... 4 Figura 5 - Barra degli Strumenti di formattazione... 4 Figura 6 - Modifica di un carattere... 4 Figura 7 - Tabella per l'inserimento di una pagina web... 5 Figura 8 - Creazione di una tabella... 5 Figura 9 - Inserimento di una tabella in una pagina web.... 6 Figura 10 - Apertura di un nuovo documento.... 6 Figura 11 Scelta del colore di sfondo.... 6 Figura 12 - Finestra Proprietà immagine... 7 Figura 13 - Finestra Proprietà immagine... 7 Figura 14 Posizione del testo rispetto ad una immagine.... 7 Figura 15- Finestra Proprietà immagine.... 7 Figura 16 - Posizione centrale del testo con una immagine.... 7 Figura 17 - Inserimento di uno sfondo in una pagina web.... 8 Figura 18 - Inserimento di una tabella in una pagina web.... 8 Figura 19 - Gestione di una tabella in una pagina web... 8 Figura 20 - Modifica dello sfondo di una tabella o di una cella.... 9 Figura 21 - Modifica dello sfondo di una o più celle.... 9 Figura 22 - Modifica della larghezza di una cella con il testo.... 9 Figura 23 - Dimensionamento della larghezza di una colonna.... 9 Figura 24 - Tabella correttamente ridimensionata.... 9 Figura 25 - Tabella con tre colonne.... 10 Figura 26 - Tabella correttamente ridimensionata.... 10 Figura 27 - Finestra Proprietà collegamento.... 10 Figura 28 Collegamento ad un indirizzo e-mail.... 10 Figura 29 - Finestra Proprietà collegamento.... 10 Pag. - II - Guida all uso di KompoZer
Sommario Figura 30 - Finestra Proprietà collegamento.... 11 Figura 31 - Inserzione di un link in una pagina web.... 11 Figura 32 - Finestra Proprietà collegamento.... 11 Figura 33 Logo Aiutamici.... 11 Figura 34 Pagina web con un testo molto lungo.... 16 Figura 35 Fine di una pagina web molto lunga.... 12 Figura 36 Finestra Proprietà ancora.... 12 Figura 37 Inserimento dell ancora qui.... 12 Figura 38 Fine di una pagina web molto lunga.... 12 Figura 39 Collegamento alla pg2.html.... 12 Figura 40 Inserimento di una tabella in una pagina web.... 13 Figura 41 Barra di stato di KompoZer.... 13 Figura 42 Finestra Stili in linea, scheda Sfondo.... 13 Figura 43 Opzioni per lo sfondo di una tabella.... 13 Figura 44 Pag1.html, collegamento ad una diversa pagina web.... 13 Figura 45 Pag2.html, collegamento alla pag1.html.... 13 Figura 46 Finestra Stili in linea.... 14 Figura 47 Tabella in una pagina web.... 14 Figura 48 Barra di stato di KompoZer.... 14 Figura 49 Opzioni per lo sfondo di una tabella.... 14 Figura 50 Risultato finale.... 14 Figura 51 Finestra Proprietà tabella.... 19 Figura 52 Finestra Editor proprietà avanzate.... 15 Figura 53 - Codice da copiare.... 17 Figura 54 - Finestra iniziale di FireFTP.... 19 Figura 55 - Finestra iniziale di FireFTP.... 23 Figura 56 - Finestra Account Manager.... 19 Figura 57 - Cartella del SITO miosito.... 20 Figura 58 - Trasferimento dei file.... 20 Figura 59 - Semplice menu colorato.... 21 Figura 60 - Schede disponibili.... 21 Figura 61 - Visualizza-zioni disponibili.... 21 Figura 62 - Inserimento di un codice HTML.... 22 Figura 63 Inserimento di codice HTML.... 22 Indice delle tabelle. Tabella 1 - Alcune proprietà dei bordi.... 15 Guida all uso di Kompozer Pag. - III -
Sommario Pag. - IV - Guida all uso di KompoZer
1. INTRODUZIONE A KOMPOZER KompoZer è un editor Web visuale del tipo WYSIWYG (WYSIWYG è l'acronimo di What You See Is What You Get, cioè "quello che vedi è quello che ottieni" o "ottieni quello che vedi"), che permette, in teoria, anche a chi non è esperto del codice HTML di realizzare pagine web. La conoscenza di alcuni fondamenti di HTML e dei fogli di stile CSS costituirebbe in realtà una condizione quasi necessaria per realizzare pagine web che non siano semplicissime, modificando opportunamente il codice sorgente oppure aggiungere il necessario codice. KompoZer, come tutti gli editor web visuali, è in realtà un programma che traduce ciò che mettiamo in una pagina web nel relativo codice HTML, che un browser (Explorer, Firefox, Chrome, Opera, ecc., ecc.) sono in grado di interpretare e decodificare. Una semplice pagina web, come quella della figura 1, è in realtà il risultato di un codice sorgente quello di seguito riportato. Figura 1 - Semplice pagina web Codice sorgente di una semplice pagina web come quella mostrata in figura 1: <html> <head> <meta content="text/html; charset=iso88591" httpequiv="contenttype"> <title>esempio</title> </head> <body style="background-image: url(_immagini/sfondo_rosa.jpg);"> <div style=""><big><big><big><span style=""><br> </span></big></big></big> <div style="text-align: center;"><big><big><big><span style=""><span style="color: red;">la MIA PRIMA PAGINA WEB</span></span></big></big></big><br> <big><big><big><span style=""></span></big></big></big></div> <big><big><big><span style=""><br> <br> </span></big></big></big> <div style="text-align: center;"><big><big><big><span style=""><img style="width: 160px; height: 161px;" alt="" src="_immagini/linux.jpg"></span></big></big></big><br> <big><big><big><span style=""></span></big></big></big></div> <big><big><big><span style=""><a href="pagina1.html"><br> </a></span></big></big></big> <div style="text-align: center;"><big><big><big><span style=""><small><small><a href="pagina1.html">pagina Guida all uso di Kompozer Pag. - 1 -
1</a> <a href="pagina2.html">pagina 2</a> <a href="pagina3.html">pagina 3</a></small></small></span></big></big></big><br> <big><big><big><span style=""></span></big></big></big></div> </div> </body> </html> Non sempre però KompoZer svolge il proprio dovere alla perfezione; spesso (a patto che si conosca un po' di HTML) è sufficiente una piccola correzione al codice e tutto torna a posto. Non è però il caso di spaventarsi; la maggior parte delle volte KompoZer svolge il proprio compito proprio benino (per i più esperti: non azzardatevi però a metterci dei <div> ). Usare KompoZer è abbastanza intuitivo: il programma, infatti, assomiglia, come utilizzo, ad un elaboratore di testi (Word, Writer, Abiword ); se sapete formattare un testo ed inserire delle immagini troverete che anche con KompoZer le operazioni da svolgere sono molto simili. 2. DOVE E COME SCARICARE KOMPOZER Per scaricare KompoZer è possibile collegarsi al sito http://www.kompozer.net/download. php, oppure si può utilizzare il sito di Aiutamici http://software.aiutamici.com/software? ID=80268. KompoZer è disponibile per Windows, per Mac e per Linux, di seguito sono riportati i tre esempi. 2.1. Kompozer in ambiente windows Se scaricate KompoZer dal sito di Aiutamici, lo troverete in versione USB (portatile). Mettete il file in una cartella e unzippatolo. Una volta ottenuti i files originali, basta fare doppio clic sul file KompoZer.exe per aprire il programma. Il file.zip può essere eliminarlo. Se invece fate il download dal sito di KompoZer consiglio di scaricare il file zip Kompozer 08.b3.it.win32.zip, per avere la versione che non richiede installazione. Come al solito mettete il file scaricato in una cartella e unzippatelo. Al termine dell'operazione è possibile eliminare il file zippato. Aprite le cartelle e fate doppio clic sul file KompoZer.exe per aprire il programma. Se scegliete questa versione di KompoZer potete anche metterla in una penna USB. Se invece scegliete la versione kompozer08.b3.it.win32.exe è necessario installare il programma sul proprio computer e lo troverete nel menù dei programmi. 2.2. Kompozer in ambiente mac In ambiente MAC scaricare il file KompoZer-0.8b3.it.mac-universal.dmg e metterlo in una cartella. Per l installazione seguire le note procedure tramite le istruzioni a video. 2.3. Kompozer in ambiente linux Scaricare il file di KompoZer0.8b.tar.gz dal sito KompoZer e mettetelo in una cartella facil-mente raggiungibile, ad esempio in Home oppure MiaCartella. Fare clic destro sulla cartella e cliccare su Estrai qui. Si creerà una cartella di nome KompoZer e il file.tar.gz può essere cancellato. Fare doppio clic sulla cartella KompoZer (per aprirla) e poi fare doppio clic sul file KompoZer per lanciare il programma. 3. PRIMI PASSI CON KOMPOZER Tutto il sito va sempre messo in una cartella, chiamata ad esempio, miosito. E' consigliabile inserire nella cartella miosito una sottocartella, chiamata immagini, in cui verranno inseriti disegni, foto, banner ed altri elementi grafici. Nella cartella miosito vanno messi anche i file musicali o quelli relativi ai video. E quindi opportuno creare una serie di cartelle, all interno della cartella miosito, per inserire i file musicali, video, documenti, programmi, utility, ecc., ecc. Queste cartelle possono essere: Audio, Video, Documenti, Foto, Immagini, Programmi, Utility. La cartella miosito non va Pag. - 2 - Guida all uso di KompoZer
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, di norma, con i caratteri minuscoli. Non lasciare mai spazi nei nomi dei file né mettete caratteri speciali (accenti, simboli vari, caratteri di controllo, ecc. Esempi corretti sono: panoramafirenze.jpg ; cartellasuoni ; pagina1.html ; banner.gif, novita.html. Esempi scorretti sono: 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 è certamente 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, per non appesantire il browser, è meglio ridimensionarle con Gimp o con un programma di grafica conosciuto, oppure con uno dei programmi che potete trovate in Aiutamici: http://software.aiutamici.com/software?r=y&c1=1&c2=46&c3=74 Fino a poco tempo fa si consigliava di realizzare pagine web, complete di tutti gli elementi grafici, che non superassero il peso complessivo di 50 60 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 quindi sempre la regola dei dieci secondi come tempo massimo che deve metterci la vostra pagina web per aprirsi, pena l'abbandono del sito da parte dell'utente. Un sito web deve offrire soprattutto informazioni. Spesso animazioni varie, artifici sonori e abbondanza di grafici nascondono solo povertà di informazione reale. Usate i file musicali.mp3 solo quando sono necessari, infatti, questi file rendono la pagina web 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 (spesso semplice è sinonimo di eleganza). 3.1. Prima di iniziare 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 l'estensione. Infatti il file potrebbe essere index.html o index.htm o, peggio, index.html.html, succede anche questo. E' meglio quindi fare in modo che Windows visualizza sempre l'estensione dei file, perciò: Figura 2 - Abilitazione alla visualizzazione dell'estensione di 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. Cliccate sul pulsante Applica e successivamente sul pulsante Ok. per abilitare la visualizzazione dell'estensione dei file, figura 2. Guida all uso di Kompozer Pag. - 3 -
3.2. Alcuni suggerimenti Quando si apre KompoZer si viene accolti dalla finestra dei suggerimenti che, a lungo andare, diventa veramente noiosa, figura 3. Nel caso volessimo disabilitarla, occorre togliere la spunta a Mostra suggerimenti all'avvio per evitare di visualizzarla al prossimo riavvio. Se si volessero rivedere i suggerimenti, basta cliccare nella barra dei menù il simbolo? e poi su Suggerimento del giorno. Anche la finestra Gestione siti spesso occupa inutilmente parte dell'area di lavoro. Per farla sparire basta cliccare sulla X in alto a destra, figura 4. Per far riapparire la finestra Gestione siti è sufficiente cliccare su Visualizza>Mostra/Nascondi>Gestione siti o premere il tasto F9. 3.3. Alcune avvertenze Non appena viene creata una pagina web, E' NECESSA- RIO SALVARLA, anche se è vuota. Il motivo di questa stranezza è che se non si salva subito la pagina si avranno problemi quando si tenderà di inserire delle immagini. Per salvare una pagina appena creata fare clic su File>Salva con nome. Nella finestra Titolo documento inserire il nome del file (senza estensione), ad esempio Test e cliccare su OK. Si aprirà una nuova finestra; scegliere dove salvare il file e poi cliccare su Salva. Il file sarà salvato come Test.html (l'estensione sarà messa automaticamente). Figura 3 - Finestra dei suggerimenti iniziale 3.4. Selezionare In questo tutorial troverete in diverse occasioni dove si usa il termine selezionare. Che significa? Selezionare una o più parole (ad esempio CLICCA QUI) significa far clic a sinistra delle parole CLICCA QUI, tener premuto il tasto sinistro del mouse e spostarlo verso destra fino ad annerire tutte le lettere CLICCA QUI. Per chi sa usare un elaboratore di testi, non è certo una novità e l operazione risulterà di estrema semplicità. 4. FORMATTARE UN TESTO Formattare un testo significa scegliere un carattere, stabilirne la grandezza, centrare una o più parole o giustificarle, colorare una o più parole, scrivere una o più parole in grassetto, corsivo, sottolineate. I bottoni per fare queste variazioni si trovano nella barra degli Strumenti di formattazione, figura 5. Figura 4 - Finestra Gestione siti Figura 5 - Barra degli Strumenti di formattazione Figura 6 - Modifica di un carattere 4.1. Scegliere un carattere e colorare le parole. E' possibile modificare il tipo, il colore e la dimensione di un carattere, di una frase o di un paragrafo, intervenendo sui vari parametri. Per fare un esempio battere una o più parole su una pagina appena creata, selezionarle e cliccare sulle frecce a destra di Larghezza variabile figura 6 e nel menù che appare scegliere il tipo di carattere da utilizzare. E' necessario ricordare che il carattere che si è scelto deve essere presente anche nel computer di chi visualizzerà il sito. E' bene perciò scegliere dei caratteri molto comuni ad esempio Arial, Calibri o Verdana, per Windows e Arial o Nimbus Sans L per Linux. Per colorare le parole selezionarle, cliccare sul rettangolo nero e, nel menù che si apre, scegliere il colore con un clic. Per evidenziare le parole, selezionarle e poi cliccare sull'icona indicata dalla freccia rossa, figura 6. Nel menù aperto, scegliere il colore con un clic. Pag. - 4 - Guida all uso di KompoZer
4.2. Aumentare o diminuire l'altezza dei caratteri. Per aumentare o diminuire le dimensioni di un carattere, dopo aver selezionato la o le parole, per diminuire l'altezza dei caratteri cliccare sulla A più piccola; per diminuire l'altezza dei caratteri, oppure cliccare sulla A più grande per aumentare. 4.3. Grassetto, corsivo e sottolineato Per applicare il grassetto, il corsivo o il sottolineato ad un carattere, dopo aver selezionato la o le parole, cliccare sulla B per il grassetto, sulla I per il corsivo e sulla U per il sottolineato. Attenzione: evitare di usare, se non in casi specialissimi, il sottolineato, che è riservato alle parole collegate ai link. 4.4. Allineare il testo Il testo scritto può essere allineato in diversi modi. Per allineare l'intero testo, o anche una o più parole a sinistra, cliccare sul primo bottone da sinistra; per centrare l'intero testo, o anche una o più parole, cliccare sul secondo bottone; per allineare l'intero testo, o anche una o più parole, a destra, cliccare sul terzo bottone; per giustificare cliccare sul quarto bottone. 4.5. Elenco numerato o puntato Per avere un elenco numerato o un elenco puntato, fare clic sui pulsanti indicati nella figura sopra con le frecce, dopo aver selezionato il testo. 4.6. Inserire una linea orizzontale E' possibile inserire delle linee orizzontali in modo da separare un testo da un altro. Per inserire una linea cliccare su Inserisci>Separatore orizzontale. Per modificare il separatore mettere la punta della freccia del cursore sul separatore e fare clic destro e scegliere Proprietà separatore... Nella finestra Proprietà separatore orizzontale, cambiare i valori dei vari parametri. La larghezza può essere regolata in percentuale o in pixel (cliccare sulle frecce a destra di % della finestra). 5. IMPOSTARE LA PAGINA WEB Il sito web da noi realizzato viene visto benissimo sul nostro computer, ma talvolta succede che gli amici ci avvertono che il nostro sito sui loro computer viene invece visualizzato male, soprattutto le scritte appaiono dove non erano previste. Il problema è che non tutti i computer hanno la stessa risoluzione video. Tuttavia oggi la maggior parte degli utenti web ha uno schermo con una risoluzione di oltre 1000 pixel in orizzontale e 700 in verticale. Una tecnica per minimizzare i problemi derivanti dalla risoluzione degli schermi è quella di inserire le pagine web in una tabella formata da una sola riga e una sola colonna della larghezza di circa 900-1000 pixel. E possibile anche impostare la tabella con una larghezza del 90% della finestra, ma usando i pixel avremo la certezza che la pagina sarà simile a quella da noi realizzata, figura 7. Per comodità di visualizzazione sono stati mantenuti i bordi, che vanno invece eliminati sulla pagina web vera ; lo spazio di lavoro utile è compreso nell'area rettangolare della tabella. Figura 7 - Tabella per l'inserimento di una pagina web Figura 8 - Creazione di una tabella Guida all uso di Kompozer Pag. - 5 -
5.1. Come inserire una tabella Per inserire una tabella fare clic su Inserisci>Tabella oppure sul pulsante Tabella nella barra degli strumenti. Nella finestra Inserimento tabella cliccare sulla scheda Precisamente e nella casella Numero di righe mettere 1; nella casella Numero colonne mettere 1; in Larghezza tabella cliccare sulle frecce a destra di % e, nella finestra che appare, fare clic su Pixel, nella casella Larghezza tabella mettere 900 o 1000; infine mettere 1 nella casella Bordo e cliccare su OK, figura 8. La nostra tabella però non è centrata; per fare ciò, fare clic destro all'interno della tabella e della finestra di pop-up scegliere Proprietà cella della tabella... Nella finestra Proprietà tabella che appare, fare clic sulla scheda Tabella e in Allineamento tabella scegliere Centro. Infine fare clic su Applica e poi su Ok. Per allungare la tabella verso il basso, cliccare all'interno della tabella stessa e poi battere Invio (o Enter), finché non si raggiungono le dimensioni volute, figura 9. 5.2. Aprire una nuova pagina web Per creare una nuova pagina web fare clic su File>Nuovo o premere CTRL+N, aprirà la finestra di figura 10 dove è possibile scegliere il tipo di documento da creare, se aprirlo in una nuova scheda o in una nuova finestra. 5.3. Colorare lo sfondo della pagina Per colorare lo sfondo della pagina web fare clic su Formato>Sfondo e colore pagina. Nella finestra Sfondo e colore pagina che appare fare clic su Utilizza colori personalizzati e cliccare nella casella a destra di Sfondo, figura 11- a). Si aprirà la finestra Colore sfondo blocco della figura 11-b). Cliccare su uno dei colori o nel quadrato a sinistra per scegliere il colore desiderato. Infine cliccare su OK e poi ancora su OK per chiudere tutte le finestre. Figura 9 - Inserimento di una tabella in una pagina web. 5.4. Inserimento delle immagini Con KompoZer, per evitare problemi con l'inserimento delle immagini o dello sfondo, si deve procedere nel seguente modo: Si apre una nuova pagina e la si salva, con il nome che si desidera, ad esempio miapagina.html, anche Figura 10 - Apertura di un nuovo documento. se la pagina è ancora vuota. Per inserire un'immagine fare clic su Inserisci>Immagine, si aprirà la finestra Proprietà immagine, cliccare sul simbolo della cartelletta a fianco alla casella Indirizzo immagine e scegliere l'immagine da inserire dalla finestra che appare. Nell'esempio è stato scelto il file ot.gif. a) - Finestra Sfondo e colori pagina b) - Finestra Colore sfondo blocco Figura 11 Scelta del colore di sfondo. Pag. - 6 - Guida all uso di KompoZer
Poiché la pagina è già stata salvata, al momento di inserire l'immagine ci sarà automaticamente il segno di spunta accanto a "L'URL è relativo all'indirizzo della pagina" per cui l'immagine verrà inserita correttamente, figura 12. Spuntare anche l'opzione Non usare testo alternativo e cliccare su OK. L'immagine verrà inserita correttamente nella pagina, dove è possibile ridimensionarla e variare alcune caratteristiche, ma può anche essere centrata, spostata a sinistra o destra con i pulsanti di formattazione del testo precedentemente visti. Non fa male neanche fare clic su File>Salva per salvare le modifiche fatte. Per cancellare un'immagine, fare clic sull'immagine stessa e poi premere il tasto Canc o Del. 5.5. Inserimento del 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 nella relativa casella della finestra Proprietà immagine, figura 13. E bene anche inserire il testo nella casella Tooltip in modo che sia visualizzato nei fumetti quando si porta il cursore del mouse sulla figura. Figura 12 - Finestra Proprietà immagine 5.6. Immagini e testo Potrebbe darsi che si voglia inserire un testo a destra di un'immagine; in questo caso inserite l'immagine e scrivete il testo che volete. Il risultato è mostrato in figura 14. Se si vuole avere la scritta a metà altezza dell'immagine occorre fare clic destro sull'immagine e poi su Proprietà immagine. Nella finestra Proprietà immagine che si apre, cliccare sulla scheda Aspetto e poi, nella finestra a discesa Allineamento del testo rispetto all'immagine scegliere l'opzione al centro e poi su OK, figura 15. Il risultato finale è quello mostrato in figura 16. 5.7. Inserire uno sfondo in una pagina Il procedimento per inserire uno sfondo in una pagina web è sostanzialmente simile a quello per l'inserimento di un'immagine. Si apre la pagina con KompoZer e si salva con il nome che si desidera, anche se la pagina è ancora vuota. Cliccare poi su Formato>Sfondo e colori pagina per aprire la relativa finestra, figura 17-a). Fare clic sull'icona indicata dalla freccia e cercare il file dell'immagine da inserire come sfondo. Nell'esempio è utilizzato il file sfondo.gif posto nella cartella immagini. Fare clic sul file, su Apri e quindi su OK, per concludere l'operazione. Il risultato è quello della figura 17-b). Figura 13 - Finestra Proprietà immagine Figura 14 Posizione del testo rispetto ad una immagine. Figura 15- Finestra Proprietà immagine. 6. LE TABELLE Le tabelle, un tempo utilizzate solo per incolonnare dati, Figura 16 - Posizione centrale del testo con una immagine. sono diventate un mezzo per organizzare il layout, cioè l'aspetto, della pagina web. Attualmente è Guida all uso di Kompozer Pag. - 7 -
possibile realizzare siti web senza usare le tabelle ricorrendo ai fogli di stile (CSS), ma per chi volesse realizzare un semplice sito web le tabelle sono ancora un valido strumento. Utilizzando questa tecnica è infatti possibile inserire in modo preciso gli elementi, come testo e grafica, in una pagina web. In una tabella si possono infatti inserire altre tabelle, unire le celle, affiancare in modo preciso testi ed immagini. a)- Finestra Sfondo e colori pagina b) - Risultato finale Figura 17 - Inserimento di uno sfondo in una pagina web. 6.1. Inserire una tabella in una pagina web Immaginiamo di voler inserire una tabella, centrata rispetto alla pagina web, formata da 2 righe e 2 colonne, per ottenere 4 celle. La tabella avrà la larghezza di 600 pixel. Per inserire una tabella fare clic su Tabella>Inserisci>Tabella..., oppure su Inserisci>Tabella... Nella finestra Inserimento tabella che appare, fare clic sulla scheda Precisamente e nella casella Numero di righe inserire 2; nella casella Numero colonne mettere 2, in Larghezza tabella cliccare sulle frecce a destra di % e scegliere pixel dalla finestra a discesa che appare. Nella casella Larghezza tabella mettere 600, mettere 1 nella casella Bordo e infine, cliccare su OK per completare l'operazione, figura 18. In figura 19-a) è mostrata la tabella inserita in una pagina web. Una volta creata la tabella e possibile centrarla, facendo clic destro all'interno di una cella e scegliere Proprietà cella della tabella... nella finestra di popup che appare. Nella finestra Proprietà tabella cliccare sulla scheda Tabella e in Allineamento tabella cliccare sulla finestra a discesa e poi su Centro. Fare clic su Applica e poi su Ok per terminare l'operazione, figura 19-b). Una tabella può essere modificata in qualsiasi momento facendo clic destro all'interno di una cella e scegliendo una delle voci del menù della finestra di popup che appare. Figura 18 - Inserimento di una tabella in una pagina web. a) - Creazione di una tabella b) - Centraggio di una tabella Figura 19 - Gestione di una tabella in una pagina web. 6.2. Togliere il bordo ad una tabelle Fare clic destro all'interno di una cella della tabella e cliccare su Proprietà cella della tabella... Nella finestra Proprietà tabella cliccare sulla scheda Tabella e in Larghezza bordo mettere 0. Cliccare su Applica e poi su OK. I bordi della tabella saranno tratteggiati ed appaiono solo sull'area di lavoro Pag. - 8 - Guida all uso di KompoZer
ma non nella pagina web. 6.3. Mettere uno sfondo colorato ad una tabella o ad una cella Fare clic all'interno di una cella e cliccare su Colore di sfondo tabella o cella... Nella finestra che appare, figura 20, in Sfondo per: cliccare su Tabella o Cella/e e poi su uno dei colori predefiniti oppure sceglierne uno personalizzato nel quadrato a sinistra. Infine cliccare su OK per applicare le modifiche effettuate. 6.4. Aggiungere una riga alla tabella Fare clic destro all'interno di una cella, scorrere con il mouse fino a Inserimento tabella, cliccare su Riga sotto o Riga sopra, a seconda delle esigenze. Ripetendo l'operazione si possono aggiungere quante righe si vogliono. 6.5. Aggiungere una colona Fare clic destro all'interno di una cella, scorrere con il mouse fino a Inserimento tabella, cliccare su Colonna precedente o Colonna successiva, a seconda delle esigenze. Ripetendo l'operazione si possono aggiungere quante colonne si vogliono. 6.6. Unire due celle Fare clic destro all'interno di una cella e cliccare su Unisci con la cella di destra. In alternativa è possibile selezionare le celle che devono essere unite e fare clic destro nelle celle selezionate e poi sulla voce Unisci celle selezionate dalla finestra di popup che appare. 6.7. Mettere uno sfondo colorato ad una o più celle Il procedimento è analogo a quello visto nel paragrafo precedente; basta selezionare le celle interessate tenendo premuto il tasto ctrl, scegliere l'opzione Cella/e nella finestra Colore tabella o cella scegliere il colore e fare clic su OK, figura 21. 6.8. Cancellare una tabella una riga o una colonna Fare clic destro in una cella, andare su Eliminazione tabella e poi su Tabella, una riga o colonna. 6.9. Fissaggio larghezza delle celle Immaginiamo di avere una tabella formata da una riga e due colonne della larghezza di 600 pixel, cioè due celle di 300 pixel ciascuna e di dover scrivere qualcosa in una cella. Quando si inserisce il testo, la larghezza della cella varia comprimendo quella successiva, figura 22. Ciò succede Figura 20 - Modifica dello sfondo di una tabella o di una cella. Figura 21 - Modifica dello sfondo di una o più celle. Figura 22 - Modifica della larghezza di una cella con il testo. Figura 23 - Dimensionamento della larghezza di una colonna. Figura 24 - Tabella correttamente ridimensionata. Guida all uso di Kompozer Pag. - 9 -
perché non abbiamo precedentemente fissato la larghezza delle colonne. Quindi prima di inserire il testo e subito dopo aver inserito la tabella, fare clic destro nella cella di sinistra e cliccare su Proprietà cella della tabella... Selezionare la scheda Celle e nella sezione Selezione scegliere Colonna. Nel riquadro Dimensioni nel campo Larghezza inserire il valore 300 e scegliere pixel nella finestra a discesa a fianco, figura 23. Nella sezione Selezione cliccare su Successiva e mettere nuovamente il valore 300 pixel nel campo Larghezza; e così via se ci sono altre colonne. Cliccare su Applica e poi su OK. Ora il testo non farà cambiare la larghezza della cella in cui viene inserito, figura 24. 6.10. Tabella con colonne di dimensioni diverse Supponiamo di voler creare una tabella con tre colonne dalle dimensioni di 100, 300 e 200 pixel ciascuna. Impostando una tabella della larghezza di 600 pixel avremmo il risultato della figura 25. E' necessario quindi modificarla per ottenere una corretta tabella. A tale scopo, fare clic destro nella prima cella e poi su Proprietà cella della tabella... Selezionare la scheda Celle. e nella sezione Dimensioni inserire il valore 100 pixel nel campo Larghezza. Nella sezione Selezione cliccare su Successiva e mettere nel campo Larghezza il valore 300 pixel. Ripetere lo stesso procedimento inserendo il valore 200 pixel nel campo Larghezza. Cliccare su Applica e poi su OK per ottenere il risultato mostrato in figura 26. 7. I LINK Un link ad una pagina web si fa selezionando una o più parole, dette anche parole calde, o un'immagine. Se abbiamo una pagina web chiamata paginaquattro.html e vogliamo collegarla con un link ad un'altra pagina chiamata contatti.html, nella paginaquattro.html dovremo allora scrivere una o più parole, ad esempio PER CONTATTARCI e selezionarle, figura 31, cliccare su Inserisci>Collegamento oppure premer ctrl+l, per aprire la finestra Proprietà collega-mento, figura 27. Nella casella Collegamento a: inserire la pagina a cui collegarsi, cioè contatti.html e cliccare su OK. Nel caso si volesse usare un'immagine come link, cliccare sull'immagine stessa ed eseguire il procedimento sopra descritto. ATTENZIONE: Nell'area di lavoro non si vedranno le parole sottolineate, ma lo saranno quando si aprirà la pagina web con il browser. Se siete nell'area di lavoro di Kompo- Zer non tentate nemmeno di controllare se il link funziona, cliccandoci sopra, in quanto non funzionerà. Figura 25 - Tabella con tre colonne. Figura 26 - Tabella correttamente ridimensionata. Figura 27 - Finestra Proprietà collegamento. ecofive@tiscali.it Figura 28 Collegamento ad un indirizzo e- mail. Figura 29 - Finestra Proprietà collegamento. 7.1. Inserire l'indirizzo email In un sito c'è sempre un indirizzo email per le eventuali comunicazioni. Come si fa a far aprire au- Pag. - 10 - Guida all uso di KompoZer
tomaticamente il client di posta? Nulla di difficile. Ad esempio, nel nostro sito ci può essere un riferimento simile a questo: ecofive@tiscaldi.it, figura 28. Selezionare allora l'indirizzo e-mail o l immagine a cui si vuole collegare l indirizzo e-mail, cliccare su Inserisci>Collegamento o premere Ctrl+L per far aprire la finestra Proprietà collegamento, figura 29. Nella casella Collegamento a: inserire mailto: seguito dal nostro indirizzo email e fare clic su OK per terminare l operazione. ATTENZIONE: Non lasciare spazio tra mailto: e l'indirizzo che segue. 7.2. Scaricare un file dalla nostra pagina web In una pagina web non è opportuno inserire dei documenti che occupino molte schermate (es. un testo di legge). Di solito si inserisce tale documento nel nostro spazio web come collegamento da dove è possibile scaricare il relativo file. Ad esempio, potremmo avere un documento di nome tutorialkompozer.pdf che è possibile scaricare per poterlo leggerlo successivamente. Allo scopo, nella pagina web si può inserire una frase simile a questa: Per scaricare il documento cliccare qui., oppure: Per scaricare il documento fare clic su tutorialkompozer.pdf. In entrambi i casi selezionare le parole interessate e fare clic su Inserisci>Collegamento (o cliccare sull'icona del collegamento). Nella finestra che appare, inserire nella casella Collegamento a: il nome del file, figura 30, e cliccare su OK. Allo stesso modo si possono scaricare i file con le altre estensioni (es..doc ;.ppt;.exe;.odt ; ecc.) Figura 30 - Finestra Proprietà collegamento. Figura 31 - Inserzione di un link in una pagina web. Figura 32 - Finestra Proprietà collegamento. 7.3. Inserire un link per un sito esterno A volte è necessario inserire un link in modo che dalla nostra pagina web si raggiunga un sito esterno. Ad esempio, possiamo pensare di mettere nella nostra pagina web un link che porti ad alla pagina di Aiutamici. Inserire allora le Figura 33 Logo Aiutamici. parole per il link, AIUTAMICI TI AIUTA, selezionarle e poi cliccare su Inserisci>Collegamento per far aprire la ben nota finestra; nella casella Collegamento a: inserire il link del sito al quale collegarsi e poi cliccare su OK, figura 32. Volendo, si poteva usare anche il logo di Aiutamici, inserendolo nella nostra pagina web e collegandolo al sito di Aiutamici come sopra descritto, figura 33. 7.4. Collegamenti interni (ancore) Talvolta è necessario fare un collegamento all'interno della stessa pagina web. Un esempio tipico è quello di una pagina web molto più lunga di una schermata. Infatti, arrivati alla fine della pagina bisognerebbe usare la barra di spostamento verticale per riportarsi all inizio della pagina. In figura 34 è mostrata una pagina web molto lunga che, una volta letta, se si vuole ritornare all inizio occorre scorrere indietro tutto il testo. Per fortuna è possibile creare dei collegamenti interni alla pagina in modo tale da spostarsi Guida all uso di Kompozer Pag. - 11 -
all inizio, o in qualsiasi altro punto del testo. Per fare ciò occorre tornare all inizio del testo e fare clic alla destra della prima parola e poi cliccare su Inserisci>Ancora. Figura 34 Pagina web con un testo molto lungo. Figura 35 Fine di una pagina web molto lunga. Si aprirà la finestra Proprietà ancora, figura 36. Nella casella Nome ancora: inserire il marcatore su e cliccare su OK. A destra della prima parola apparirà il simbolo di un'ancora nera in campo giallo per indicare la presenza di un marcatore. Si vada ora alla fine della pagina e selezionare le parole TORNA SU, cliccare su Inserisci>Collegamento o premere Ctrl+L. Si aprirà la finestra Proprietà collegamento e nella casella Collegamento a: inserire #su scegliendolo dalla finestra a discesa, premere infine OK, figura 37. Il collegamento interno (àncora) è stato fatto. Cliccando su TORNA SU, all interno della pagina web, si arriverà proprio all'inizio della pagina. Figura 38 Fine di una pagina web molto lunga. Figura 36 Finestra Proprietà ancora. Figura 37 Inserimento dell ancora qui. Figura 39 Collegamento alla pg2.html. 7.5. Ancora inserita in un'altra pagina web Talvolta è necessario inserire un'ancora non nella stessa pagina web ma in un'altra pagina. Per esempio, se abbiamo una pagina web chiamata pag1.html e vogliamo accedere ad un altra pagina, chiamata pag2.html, allora dobbiamo inserire nella pagina un collegamento con una scritta del tipo Pag. - 12 - Guida all uso di KompoZer
VAI ALLA PAGINA, figura 42. Allo scopo, selezionare la scritta VAI ALLA PAGINA e cliccare su Inserisci>Collegamento o premere Ctrl+L, per aprire la finestra Proprietà collegamento e nella casella Collegamento a : inserire pag2.html#qui, figura 38, e poi OK. Salvare il file pag1.html. Figura 40 Inserimento di una tabella in una pagina web. Figura 44 Pag1.html, collegamento ad una diversa pagina web. Nella pagina web chiamata pag2.html bisogna inserire il marcatore ancora #qui che ci permette di individuare la pagina con il collegamento precedente. Allo scopo cliccare a destra della scritta QUI nella pagina pag2.html, figura 43, fare clic su Inserisci>Ancora, per aprire la finestra Proprietà ancora, figura 39 e nella casella Nome ancora: inserire qui, cliccare su OK e salvare il file. Figura 41 Barra di stato di KompoZer. Figura 42 Finestra Stili in linea, scheda Sfondo. Figura 45 Pag2.html, collegamento alla pag1.html. Quando si apre la pagina web pag1.html e si cliccherà sul link VAI ALLA PAGINA, si aprirà la pagina pag2.html. 8. USO AVANZATO DELLE TABELLE Con le tabelle è possibile ottenere una pagina web molto raffinata, i cui risultati migliori si ottengono utilizzando le caratteristiche avanzate dell uso delle tabelle. I comandi per svolgere queste attività non sono disponibili nella barra del menu, ma come vedremo di seguito, esistono molti altri comandi che è possibile raggiungere con estrema facilita. Figura 43 Opzioni per lo sfondo di una tabella. 8.1. Inserire lo sfondo in una tabella Come inserire una immagine, chiamata ad esempio sfondo1.gif, contenuta nella cartella foto, in una tabella? Prima di tutto si inserisce la tabella, come mostrato in figura 40. Per continuare fare clic all'interno di una cella e nella barra di stato in basso, fare clic destro su <table>, figura 41. Nel menù che appare cliccare su Stili in linea, e nella finestra che appare cliccare sulla scheda Sfondo, figura 44. In questa scheda cliccare su Seleziona file e cercare il file sfondo1.gif nella relativa cartella e fare clic su Apri. Guida all uso di Kompozer Pag. - 13 -
Nella scheda Sfondo appariranno i collegamenti appena selezionati. Sempre in questa scheda è possibile assegnare un colore di sfondo alla tabella, scegliendolo premendo il pulsante a fianco del campo Colore:, regolare l opacità e la trasparenza agendo sul cursore appena sotto il campo colore, affiancare/non affiancare orizzontalmente o verticalmente l imma-gine, scegliere se l immagine deve scorrere con la pagina, spuntando la relativa casella, posizionare l immagine a sinistra, centro o destra, oppure in alto, in centro o in basso secondo i propri gusti. Una volta effettuate tutte le scelte, fare clic su OK per terminare l operazione. ATTENZIONE: se per qualche strano motivo KompoZer fa un collegamento errato, è necessario cancellare tutto ciò che non sia foto/sfondo1.gif, nell'esempio di figura 45 tutto ciò che è evidenziato. 8.2. Inserire uno sfondo in una cella di una tabella Talvolta può essere necessario inserire uno sfondo in una cella di una tabella. Immaginiamo di avere un file sfondotabella.gif, contenuto nella cartella immagini, e una tabella formata da una riga e due colonne, figura 47. Vogliamo inserire uno sfondo nella cella di sinistra. Per iniziare inserire la tabella con le procedure viste, fare clic nella cella di sinistra e nella barra di stato in basso e fare clic destro su <td>, figura 48. Scegliere Stili in linea dalla finestra di popup che appare per aprire la relativa finestra, figura 46. Cliccare sulla scheda Sfondo e poi su Seleziona file, cercare la cartella immagini e cliccare sul file sfondocella.gif. Fare clic su Apri, scegliere le opportune opzioni per la sistemazione dell immagine nella parte inferiore della finestra e cliccare su OK, figura 49. In figura 50 è mostrato il risultato delle nostre operazioni. Figura 46 Finestra Stili in linea. Figura 47 Tabella in una pagina web. Figura 48 Barra di stato di KompoZer. Figura 49 Opzioni per lo sfondo di una tabella. Figura 50 Risultato finale. 8.3. Colorare i bordi tabelle e celle Per colorare i bordi di una tabella fare clic destro all'interno della tabella, scegliere Proprietà cella della tabella e poi selezionare la scheda Tabella, figura 51. Cliccare su Proprietà avanzate e scegliere la scheda Stile in linea. Nel campo Proprietà: inserire la parola border e nel campo Valore: inserire la scritta solid 2px #ff0000, infine cliccare su OK, figura 52. Continuare le impostazioni nella finestra Proprietà tabella controllando nel campo Allineamento tabella il giusto posizionamento della tabella e cioè se la tabella deve essere a sinistra, al centro o a destra, infine fare clic su Applica e poi su OK per terminare le operazioni. Nella tabella 1 seguente sono riportate alcune proprietà e il relativo significato che è possibile applicare nella finestra Editor proprietà avanzate, figura 52. 8.4. Colorare i bordi di una cella Per colorare i bordi di una cella, fare clic destro all'interno della cella interessata e scegliere Pro- Pag. - 14 - Guida all uso di KompoZer