Una volta installato avviamo il programma KompoZer, quindi clicchiamo su questo pulsante per nascondere la funzione Gestione siti

Transcript

1 Prima di tutto installiamo il programma KompoZer Una volta installato avviamo il programma KompoZer, quindi clicchiamo su questo pulsante per nascondere la funzione Gestione siti il programma appena aperto si posizionerà subito su una pagina vuota e senza titolo. Troverete il cursore intermittente simile a quello di un programma di scrittura. Iniziate a scrivere nel programma il testo Prima pagina miosito come in esempio qui sotto. Come potete notare la differenza con un programma di scrittura é minima. Dopo aver digitato la frase come in esempio, andiamo a salvare la nostra prima pagina web, clicchiamo l'icona Salva, si aprirà una finestra come quella qui sotto, inseriamo il nome pagina1 e clicchiamo su OK 1

2 se abbiamo creato la cartella miosito sul desktop vi sarà facile ritrovarla, cliccate sull'icona Desktop, entrate nella cartella miosito e troverete il nome già dato al file, cliccate il pulsante Salva andiamo ad aprire la cartella miosito e dentro troveremo la nostra prima pagina web, date il doppio click sul file pagina1.html per aprirla si aprirà Internet Explorer o altro browser da voi utilizzato e comparirà la vostra prima pagina web, evviva, aprite lo spumante :o) 2

3 Il nome dato al file viene impostato anche come nome della pagina, (vedi il cerchio rosso nella figura sopra) questo di solito è utile quando si memorizza il sito nei preferiti, in seguito vedremo come modificarlo, per il momento avete capito quando e semplice creare una pagina web, e vi assicuro che tutto il resto e ancora più semplice, avete voglia di continuare? Seguitemi. In questa lezione spiegheremo come posizionare il testo, la scelta dei caratteri, la grandezza, il colore del testo e dello sfondo NOTA: ricordatevi che stiamo eseguendo prove di studio, una volta capite tutte le procedure ricomincerete daccapo per creare il vostro sito, non impegnatevi adesso, a scrivere materiale come se fosse definitivo. Concentratevi a capire come funziona il programma, realizzando le prove descritte nel corso, quando conoscerete a fondo il programma, iniziare la costruzione del sito sarà un gioco da ragazzi. Torniamo alla pagina che avete salvato in precedenza, se avete chiuso il programma dalla precedente lezione, riavviamo KompoZer e clicchiamo l'icona Apri selezionate il file precedentemente salvato e clicchiamo su Apri A questo punto selezioniamo la frase "Prima pagina miosito", posizioniamo la freccia del mouse da una parte del testo e tenendo premuto il tasto sinistro del mouse passate sul testo da selezionare. Una volta selezionato il testo andiamo nel menu Formato, qui possiamo scegliere il tipo di carattere, la dimensione, lo stile, il colore del testo e la direzione di scrittura le stesse operazioni si possono fare anche dai pulsanti nella barra strumenti, ma i controlli sono più approssimativi, provateli entrambi per fare pratica Possiamo colorare, ingrandire e diminuire i caratteri anche su un solo carattere, l'importante e selezionare prima il testo da modificare come possiamo vedere non c'è limite alla fantasia, c'è un solo problema che riguarda qualsiasi tipo di editor si utilizzi per quanto riguarda l'utilizzo dei FONT, se scegliete un font con effetto grafico, questo Font lo vedete solo voi, infatti se selezionate un Font grafico e questo non è installato su un altro computer, il computer utilizzerà il font di default come il Times New Roman 3

4 quindi utilizzare solo i font standard che sono Arial, Verdana, Tahoma e Times New Roman, in quanto questi sono presenti in tutti i computer e comunque cambiano di poco l'aspetto, per i titoli grafici utilizzeremo le immagini, come quella qui sotto, che permettono di creare titoli affascinanti se il font grafico non è installato sul computer del visitatore del nostro sito, vedrà la stessa scritta in questo modo Prima pagina Usate quindi grandezze e colori a vostro piacere, ma per i font limitatevi a quelli di base appena indicati. Il lavoro con le immagini verrà trattato più avanti. Questi pulsanti impostano il grassetto, corsivo e sottolineato al testo questi pulsanti permettono di allineare il testo a sinistra, al centro, a destra e giustificato se impostate la formattazione al testo, andando a capo vi porterete dietro la stessa formattazione per eliminare la formattazione del titolo basta selezionate il testo con il pulsante sinistro del 4

5 mouse e spuntare la voce Rimuovi tutti gli stili tornerà cosi ad essere un testo senza formattazione, noterete un riquadro rosso intorno al testo, non preoccupatevi, e solo un contorno che non sarà visibile in anteprima vediamo adesso come si imposta un colore di sfondo nella pagina, andiamo nel menu Formato - Sfondi e colori pagina cliccate sul pulsante cerchiato comparirà questa finestra, selezionate prima il colore di base a destra, poi spostate con il mouse la croce per migliorare la gradazione e quando trovare il colore preferito cliccate su OK il colore impostato si vedrà in anteprima sul testo di esempio, mettiamo caso che il colore di sfondo da voi scelto fosse nero, dovrete modificare il colore del Testo semplice da nero a bianco altrimenti non si leggerebbe in questa finestra potete anche selezionare un'immagine da inserire come sfondo della pagina, basta cliccare sulla cartellina, ma questo lo spiegheremo più avanti, clicchiamo su Ok e come possiamo vedere il colore verde e stato impostato come sfondo a tutta la pagina, in basso ho selezionato due pulsanti Normale e Anteprima Normale e la finestra dove lavoriamo e che abbiamo visto nelle schermate precedenti, Anteprima è quello che vedreste una volta salvata la pagina, ad esempio il riquadro rosso di 5

6 selezione testo e scomparso vediamo adesso come si imposta il Titolo della pagina, quello cioè che compare nei preferiti, andiamo nel menu Formato - Titolo e proprietà pagina vi ricordate nella lezione precedente che il nome con cui abbiamo salvato la pagina veniva impostato anche come titolo, qui possiamo e dobbiamo cambiarlo in modo che se un visitatore inserisca nei propri preferiti il nostro sito, possa rintracciarlo immediatamente nella lista modifichiamo quindi il Titolo a nostro piacere, il testo può essere anche lungo ma non esagerate, pensate alla vostra lista dei preferiti un titolo lungo diventa illeggibile, uno corto e chiaro e facilmente rintracciabile, nel campo Autore inserite il vostro nome e se volete anche il vostro indirizzo , nel campo Descrizione inserite una breve descrizione del vostro sito, questi dati verranno utilizzati dai motori di ricerca ed è bene che ci siano, cliccate quindi su OK clicchiamo sul pulsante sorgente, vedremmo la nostra pagina web in codice HTML e fra questi anche i campi appena inseriti 6

7 salviamo la pagina ed ecco come vedremo il nostro lavoro su Internet Explorer, con tanto di titolo del nostro sito Un avviso importante da ricordare sempre, ogni volta che lavorate su una pagina, ricordatevi di salvare spesso il lavoro, basta cliccare sull'icona floppy, potrebbe altrimenti accadere che un'operazione sbagliata vi faccia perdere il lavoro, questo comunque vale su qualsiasi lavoro fate con il computer, e non da meno, fate sempre delle copie di riserva di tutti i vostri dati, virus e altri pericoli sono sempre in aguato. 7

8 [04] - Inseriamo Immagini e sfondi Una volta spiegato come formattare il testo, passiamo a spiegare come inserire immagini di sfondo, icone e immagini varie. Per immagine di sfondo si intende l'immagine che compare come sottofondo su tutta la pagina, lavorando con il testo avevamo lo sfondo della pagina di un solo colore, bianco o verde come preso in esempio nel capitolo precedente. <Cliccando qui> potete vedere un esempio di pagina web con uno sfondo grafico, potete notare che inserendo uno sfondo grafico su una pagina web se ne può migliorare l'aspetto o anche peggiorarlo in alcuni casi, i gusti sono personali, comunque siamo qui per spiegare come si inserisce. Come inserire uno sfondo grafico su una pagina web? Prima di tutto se vogliamo inserire qualsiasi immagine nella pagina web, dobbiamo prima copiare l'immagine nella cartella del sito, nel nostro caso miosito, e in particolare nella cartella precedentemente creata per questo scopo a cui abbiamo dato nome foto. Prendiamo quindi l'immagine che ci interessa dal nostro computer e copiamola nella cartella foto come vediamo nell'immagine qui sotto. Una volta inserita l'immagine che ci interessa nella cartella foto, torniamo in Kompozer e dal menu Formato selezioniamo Sfondo e colori pagina in questa finestra clicchiamo sull'icona cartella portiamoci nella cartella foto,selezioniamo l'immagine e clicchiamo su Apri torneremo alla finestra precedente dove troveremo il percorso dell'immagine selezionata, clicchiamo su OK l'immagine e stata inserita come sfondo, modifichiamo il colore del testo in modo che sia visibile sul colore dello sfondo, salviamo e clicchiamo su Anteprima. vedremmo cosi la nostra pagina web con sfondo grafico come lo vedranno i visitatori del nostro sito ma c'è un problema, se l'immagine di sfondo ad esempio e di 800x600 pixel e il nostro visitatore utilizza una risoluzione maggiore, tipo 1024x768, la pagina comparirebbe come nella figura sotto, ho inserito delle linee bianche per mostrare che l'immagine viene ripetuta in verticale e orizzontale, 8

9 possiamo pensare che per risolvere il problema basta inserire un'immagine più grande, ad esempio 1024x768, ma l'immagine che ho utilizzato era già a 1024x768, io utilizzo una risoluzione a 1280x768 e questo sotto e il risultato, quindi non c'è soluzione a questo problema, le immagini di grandi dimensioni non sono utilizzabili come sfondo web la soluzione per impostare una bella grafica di sfondo sono le miniature web, immagini ridotte che se affiancate non mostrano la separazione, prendiamo questa immagine come esempio impostandola come sfondo vediamo che l'immagine viene ripetuta come quella grande, ma in questo caso non si notano le separazioni ma anche qui abbiamo un problema, l'immagine non è adatta a contenere testo, andrebbe bene come sfondo per creare una pagina dove inserire una foto grande al centro, ma il testo risulta illeggibile a meno che di non scrivere con caratteri molto grandi quindi per lo sfondo della pagina e meglio utilizzare una grafica meno disturbata, chiara o scura che sia, come ad esempio questi mattoni come vediamo lo sfondo grafico e gradevole e non disturba affatto la scrittura, ovviamente bisogna cambiare colore al testo per adattarlo allo sfondo. vediamo adesso come inserire le immagini nella pagine web, per fare le stesse prove potete utilizzare le immagini che si trovano su questa pagina, selezionatele con il pulsante destro del mouse e nel menu spuntate la voce Salva immagine con nome, salvateli nella cartella miosito/foto prima di collegarle alla vostra pagina, oppure utilizzate le vostre immagini, non è importante cosa inserite ma come si inseriscono torniamo nella nostra pagina di prova, posizionate prima di tutto il cursore dove volete inserire l'immagine 9

10 quindi clicchiamo l'icona Immagine in questa finestra clicchiamo la cartellina per caricare l'immagine per facilitare la ricerca clicchiamo l'icona in alto a destra e spuntiamo Anteprima, quindi selezioniamo l'immagine da caricare e clicchiamo su Apri 10

11 torneremo alla finestra precedente per le immagini lasciamo sempre spuntata la voce L'URL è relativo all'indirizzo della pagina, se sull'immagine si inserisce un collegamento ipertestuale, dobbiamo spuntare la voce Testo alternativo (i collegamenti verranno spiegati nelle lezioni successive), se l'immagine e presente sulla pagina solo come immagine a se stessa spuntiamo la voce Non usare testo alternativo, clicchiamo quindi su OK ecco che l'immagine comparirà dove avevamo posizionato il cursore, vediamo che il testo si posizionerà alla base dell'immagine 11

12 per far salire il testo in modo che venga affiancato all'immagine, tipo impaginazione di riviste e giornali, selezioniamo l'immagine con il pulsante destro del mouse e selezioniamo Proprietà immagine clicchiamo in alto su Aspetto, poi in Allineamento testo clicchiamo sulla freccia e spuntiamo 12

13 la voce inserisci a destra e OK come vediamo qui sotto, il testo in BLU non si allinea all'immagine in modo perfetto, ho commesso volutamente un errore, come possiamo notare la freccia rossa rivolta verso l'alto indica una linea nera, si tratta del cursore del testo che inizialmente era impostato per un carattere più grande, ho dato uno spazio e ho continuato a scrivere con un carattere più piccolo, ma l'impostazione del testo grande e rimasto e l'immagine si adatta con il carattere a cui e più vicino, quindi prima di inserire l'immagine assicuratevi che non esiste un carattere più grande prima del testo nella parte bassa con testo in NERO possiamo vedere il testo che si allinea perfettamente all'immagine ATTENZIONE - E' di vitale importanza che le immagini che utilizzate nella vostra pagina web siano prima copiate nella cartella foto e solo dopo collegate alla vostra pagina, quando lo andremo a pubblicare sul web invieremo tutto il contenuto che si trova nella cartella miosito, se avete collegato qualche immagine che si trova fuori da questa cartella, non verrà inviata e pertanto non si potrà vedere sul sito on line. 13

14 Altra avvertenza, per qualsiasi file che inserirete nel vostro sito, che siano immagini, file di testo o altro, dovete sempre indicare i caratteri esatti del nome del file, mi spiego meglio In rete vengono utilizzati computer con sistemi operativi UNIX che a differenza dei computer con Windows, hanno la particolarità di vedere i caratteri maiuscoli e minuscoli come caratteri diversi, esempio una B maiuscola e una b minuscola, per UNIX sono due caratteri completamente diversi e quindi se nella vostra pagina web indicate di aprire un'immagine dal nome back.jpg, ma l'immagine o il file che avete inserito è nominata come Back.jpg, l'immagine non sarà caricata in rete perché appunto il sistema UNIX vede quel nome diverso dall'altro. In Windows questo non succede in quanto le due lettere hanno lo stesso valore. Se collegate file e immagini dai menu come indicato qui sopra non ci saranno problemi, ma se andate a modificarli manualmente ricordatevi di usare maiuscole e minuscole esattamente come è impostato il nome del file Altro consiglio: Windows permette di gestire nomi con più parole e separati da spazi, per quanto riguarda la lunghezza delle parole nessun problema, ma evitate in qualsiasi modo di inserire gli spazi nel nome di un file, in quanto gli spazi verrebbero modificati con il segno %, segno che non sarà compreso nel collegamento e renderebbe lo stesso non funzionante o comunque creerebbe dei problemi. Se volete separare una parola dall'altra usate i trattini, es: il_mio_cane.jpg. invece di il mio cane.jpg, se il nome del file contiene spazi rinominatelo, selezionate il file con il pulsante destro del mouse e dal menu spuntate la voce Rinomina, sostituite gli spazi con i trattini e premete Invio prima di collegarle sulla pagina web. [01] - Spazio Web Gratuito - Registrazione Altervista Per poter pubblicare il proprio sito su internet, si deve disporre di uno spazio web, se non ne abbiamo già uno lo dobbiamo registrare. Fra gli spazi web gratuiti, consiglio di utilizzare quello di Altervista, il motivo principale di questa scelta è che non inserisce banner pubblicitari, inoltre é semplice da utilizzare, offre molti servizi aggiuntivi e dispone di uno spazio web di 200 Mb Per registrare lo spazio web GRATUITO di Altervista clicchiamo su questo indirizzo La registrazione e semplicissima, leggere sempre il regolamento prima di accettare qualsiasi iscrizione. Nella prima pagina trovate questo riquadro, dovete inserire il nome da dare al vostro sito, nome che dovrebbe essere adeguato alla materia che tratterete nel sito, qui come esempio ho inserito il nome CorsoWebmaster, se il nome che avete scelto è ancora libero comparirà la scritta OK, dominio disponibile, potete cliccare su Prosegui, se invece compare Dominio non disponibile dovete scegliere un altro nome perché quello è stato già registrato da un altra persona. 14

15 nella pagina successiva compare un modulo, nella casella 5 parole per farvi trovare devi inserire cinque parole che sono attinenti al tuo sito, se ad esempio il tuo sito parla di moto sportive, in questa casella devi inserire ad esempio moto, sport, motociclette, motocros, motogp occhio ogni parola deve essere separato da una virgola spuntate anche la casella Registra il tuo alias di posta questo permette di ricevere messaggi senza far conoscere il tuo vero indirizzo , potete anche non utilizzarlo, comunque spuntatelo continuiamo a riempire il modulo con i nostri dati, alla fine dobbiamo riportare il codice sicurezza nella casellina a fianco, se commettete un errore ve lo segnala permettendovi di correggerlo, quando la spunta di questo codice è verde clicchiamo su Prosegui Per la registrazione sul web non utilizzate mail la vostra principale, registratene una su Hotmail, Gmail o Yahoo, questi siti sono seri e affidabili, l'indirizzo serve per ricevere il messaggio di conferma e i dati di accesso allo spazio web. 15

16 nella pagina successiva un avviso di scaricare la posta per confermare l'iscrizione, se non arriva controllate nella posta indesiderata o Spamming, a volte vengono dirottati in queste cartelle aprite il messaggio e cliccate sul link si apre nuovamente il browser, attendete qualche secondo e subito dopo verremo dirottati nella pagina principale con il benvenuto 16

17 nel messaggio di attivazione troverete anche i dati di accesso al pannello su Altervista e per l'accesso FTP la password generata con la registrazione potrebbe essere troppo complicata, per cambiare la password di accesso al pannello di Altervista per utilizzare i vari servizi, cliccate su IO e poi su Profilo quindi inserite nelle due caselle in alto la password che voi preferite e in quella in basso la password indicata nel messaggio , cliccate su Cambio Password la password FTP invece non si può cambiare, comunque resta memorizzata nel programma FTP Conservate il messaggio ricevuto da Altervista, meglio ancora stampatelo cosi non lo perdete. Nel caso dimenticate la password, cliccate sul sito di Altervista sul link Dimenticato la password, dovrete inserire il vostro Nickname e la con cui vi siete registrati, vi verrà inviato una nuova password. Questo articolo si riferisce solo alla registrazione dello spazio web, seguite le lezioni di Kompozer che richiameranno queste lezioni accessorie quando necessario. 17