IL MIO PRIMO SITO CON XTOTEM FREESTYLE

Transcript

1 Pagina 1 CON Sommario CON...1 Introduzione...2 Sulla carta...3 Preparo i contributi grafici...4 Inizio con XTOTEM...4 E' la prima volta che accedo a XTOTEM...5 Definisco l' AREA...6 Scelgo l'area su cui operare...6 Trasferisco le immagini sul Sito...7 Creo la Cartella...7 Trasferisco le immagini...8 Imposto i menu di navigazione...9 Stile Pagina...10 Tabella base...11 Aggiungo le immagini...13 Proprietà delle celle...14 Segnaposto...14 Testo sulle Pagine...15 Stile Pulsanti...16 Pulsanti nel menu superiore...16 Pulsanti nel menu laterale...17 Creo la struttura del Sito...18 Pulsanti Principali...18 Associo lo Stile alle Pagine Principali...20 Verifico il risultato...20 Pulsanti Dipendenti...22 Associo lo Stile alle Pagine Dipendenti...24 Verifico il risultato...24 Riordino il Pulsanti...25 Scrivo i Testi...26 Correggo l'impaginazione Abbellimenti e personalizzazioni...29 Immagine sulla pagina...29 Slide show e galleria d'immagini...31 Revisione 10.08

2 Pagina 2 Introduzione Questo documento, il primo di una serie, spiega passo dopo passo come creare un semplice sito di prova. Le spiegazioni sono molto dettagliate all'inizio e più sintetiche alla fine del documento. Vedremo come disegnare il Sito, copiare immagini sul Sito, usare Contenitori per le Notizie (descritto in un manualetto a parte), collegare , inserire una mappa (descritto in un manualetto a parte) e uno Slide Show. Ho registrato il mio Dominio (di tipo Windows) presso un Provider, ho copiato sul mio nuovo spazio, e ora mi appresto a creare il mio primo sito di prova...

3 Pagina 3 Sulla carta Per prima cosa disegno, anche sommariamente, il sito. E' volutamente molto semplice, poi vedremo come renderlo più accattivante. La testata dovrà essere così: Penso adesso alla struttura del Sito, che con XTOTEM potrò in seguito cambiare come voglio. Semplifico al massimo, il menu principale conterrà CHI SIAMO e CONTATTI, quello secondario altri pulsanti. La struttura complessiva sarà: CHI SIAMO ATTIVITA' NOVITA' (descritto nel manuale Il mio primo Sito - Contenitori di News ) ESPERIENZE CONTATTI DOVE SIAMO (descritto nel manuale Il mio primo Sito Mappe Google ) Un totale di 5 pulsanti (di cui 2 principali) e 5 pagine.

4 Pagina 4 Preparo i contributi grafici Per semplificarmi il lavoro successivo preparo, usando un qualsiasi programma grafico, 2 immagini distinte1: La prima di 150x200 pixel che chiamerò TESTATA1 che comprende anche lo sfondo grigio, mentre la seconda di 760x130 pixel non lo comprende e sarà chiamata TESTATA2. Vedremo in seguito come questa scelta, anziché predisporre un'unica immagine, ci agevola il lavoro. Le immagini saranno in uno dei formati standard Internet e cioè PNG, JPG oppure GIF (la scelta dipende dal tipo di immagine). Inizio con XTOTEM Adesso accedo al mio sito (che per semplicità chiamerò scrivendo sul browser Scrivo la mia user-id e la password quindi clicco su OK e sono dentro XTOTEM. 1 Preparo due immagini perché sono di altezze diverse e perché sotto la seconda immagine ci sarà il menu.

5 Pagina 5 E' la prima volta che accedo a XTOTEM La prima volta devo eseguire un'operazione di impostazioni iniziali, poi non dovrò più accedere a questa sezione. e poi su e clicco sulla scheda SITO: Scrivo il nome del Dominio e la cartella che il Provider ha definito in lettura e scrittura2, definisco il tipo di installazione SITO e indico se al piede di tutte le pagine dovrà apparire il pulsante AGGIORNA per permettere l'accesso ad XTOTEM da ogni pagina del Sito (si può in ogni caso accedere scrivendo il nome del Dominio seguito da /TOTEM). Al termine clicco su OK e poi su in alto. E' indispensabile per attivare le modifiche. 2 Se il vostro provider è ARUBA la cartella si chiama PUBLIC come nell'esempio

6 Pagina 6 Definisco l' AREA La prima operazione da svolgere è definire l'area3 su cui operare. e poi nella sezione clicco su. Nella colonna di sinistra clicco sul pulsante Più: e compilo come indicato: Clicco quindi su. La pagina cambia così: Imposto la casella PREDEFINITO4 e quindi clicco su. Questa operazione deve essere svolta solo la prima volta. Scelgo l'area su cui operare Ogni volta che si entra in XTOTEM occorre scegliere l'area su cui operare. Se avessi una sola Area questa è già impostata e non occorre alcuna operazione. e poi nella sezione scelgo Primo Sito : 3 XTOTEM può operare su più AREE contemporaneamente, un'area si deve considerare come fosse un SITO virtuale con proprie regole, pagine e impaginazione. Almeno un'area è indispensabile. 4 PREDEFINITO è il Sito/Area che si apre quando il navigatore scrive il nome del dominio senza specificare alcuna pagina (nell'esempio

7 Pagina 7 Trasferisco le immagini sul Sito Per poter utilizzare le due immagini che ho creato, devo prima trasferirle sul Sito. Creo la Cartella Le immagini, i filmati, gli allegati PDF sono inseriti in Cartelle che agevolano la loro ricerca. Clicco su e nella sezione FOTO E ALLEGATI clicco su. E' presentato l'elenco delle Cartelle disponibili: Scelgo la prima Cartella vuota e scrivo Primo Sito Impaginazione : quindi clicco su.

8 Pagina 8 Trasferisco le immagini e nella sezione FOTO E ALLEGATI clicco su 5. Seguo attentamente queste operazioni: Scelgo la Cartella Attiva6: Primo Sito Impaginazione ADD Scelgo sul mio computer le due immagini da copiare sul Sito UPLOAD e attendo che compaia OK OK. E' molto importante! In questo modo ho copiato sul sito le due immagini che ora posso usare. 5 Su alcune versioni di Browser questo comando potrebbe non funzionare, al suo posto usare che trasferisce una sola immagine per volta. 6 Se dimenticassi questa operazione, le immagini sono caricate nella cartella indicata al momento, si possono spostare usando il comando

9 Pagina 9 Imposto i menu di navigazione Il Sito userà due menu, uno principale nella parte superiore e uno dipendente a sinistra. Come per tutte le operazioni con XTOTEM occorre sempre partire dal fondo, quindi prima di poter usare i menu sulle Pagine occorre definirli. e nella sezione STILI clicco su, si apre una pagina con i Menu disponibili. Scegliere le prime due righe libere e le compilo come indicato cliccando su aver compilato ogni singola riga. dopo

10 Pagina 10 Stile Pagina Gli Stili sono come degli sfondi su cui si appoggiano le pagine, contengono i dati fissi di ogni pagina (come la testata) e i segnaposto che saranno sostituiti dai relativi dati (come ad esempio i Menu o il Testo). e nella sezione STILI clicco su Scelgo Aggiunge un nuovo Stile di Pagina e clicco su Se non fosse evidenziato, clicco su l'operazione precedente., si apre:. Nella colonna di sinistra compare:. Lo stile da preparare è --- NEW ---, creato con in corrispondenza di --- NEW ---, si apre una pagina molto lunga. I piccoli riquadri con i menu, a sinistra e a destra, permettono di scorrere velocemente le varie sezioni: Innanzitutto cambio il nome in alto da --- NEW --- in Primo Sito per identificare lo Stile più facilmente.

11 Pagina 11 Tabella base Il metodo più semplice e intuitivo per impaginare documenti Internet è usare le Tabelle. Costruisco una tabella così definita: Cioè 3 righe per 2 colonne7. Clicco all'interno della pagina vuota per posizionare il puntatore del mouse all'inizio della pagina e quindi clicco su Sulla pagina compare, scelgo INSERISCI TABELLA per definire righe e colonne: che identifica la nuova tabella inserita. 7 La prima cella, con il Logo, è in realtà costituita da una colonna e due righe unite fra loro.

12 Clicco all'interno della Tabella, in un punto qualunque, clicco nuovamente Pagina 12 e scelgo PROPRIETA' DELLA TABELLA, si apre una finestra che imposto come segue:, quindi clicco OK. Adesso la pagina è: Evidenzio le prime due celle della prima colonna cliccando all'interno della prima e trascinando il mouse: quindi clicco su e scelgo CELLA UNISCI CELLA:

13 Pagina 13 Aggiungo le immagini Adesso inserisco il logo nella prima cella. Posiziono il cursore al suo interno e clicco, quindi clicco su. Si apre la finestra: Nel menu a tendina Immagini disponibili scelgo TESTATA1.PNG che si trova nella Cartella Primo Sito Impaginazione. Quindi clicco su OK. Ora sposto il puntatore del mouse nella prima cella di destra e ripeto l'operazione inserendo TESTATA2.png.

14 Pagina 14 La finestra diventa: Noto che sotto il logo, a sinistra, c'è una riga vuota, ci clicco dentro e la cancello con la tastiera usando il pulsante Cancella a sinistra sulla tastiera8. Se per errore cancello il logo clicco su ANNULLA. Proprietà delle celle Ora mi posiziono via via all'interno delle singole celle e cliccando su e scegliendo CELLA PROPRIETA' DELLA CELLA le imposto così: Cella Larghezza Altezza Allineamento Orizzontale Allineamento Verticale Riga 1/2, colonna Sinistra Bottom Riga 3, colonna Sinistra Top Riga 1, Colonna No No Riga 2, Colonna Sinistra Middle Riga 3, Colonna Sinistra Top Lascio invariate le altre caselle. La cella di Riga 2, Colonna 2 deve avere il fondo grigio per ospitare il menu. Clicco dentro la cella e clicco su e scelgo CELLA PROPRIETA' DELLA CELLA scheda AVANZATO colore sfondo #CCCCCC (senza le virgolette)9. Segnaposto E' ora di indicare dove andranno i dati. Clicco dentro la cella di Riga 2, Colonna 2 e clicco su quindi scelgo Menu Orizzontale: Primo Sito Sopra, uno dei due menu creati in precedenza. 8 E' possibile che durante la creazione della tabella il sistema abbia inserito nelle celle degli spazi o dei ritorni a capo, è una limitazione di Internet che altrimenti non farebbe vedere le celle della tabella. Se l'impaginazione non è quella voluta il più delle volte dipende da questo. 9 E' il colore che ho usato anche sull'immagine del Logo. Il programma grafico che ho usato mi indica questo codice.

15 Pagina 15 E' inserito il segnaposto che sarà sostituito dai pulsanti del menu orizzontale. Clicco dentro la cella di Riga 3, Colonna 1 e ripeto l'operazione scegliendo Menu Verticale: Primo Sito Lato. Poi clicco nella cella di Riga 3, Colonna 2, ripeto l'operazione e scelgo Testo. Il risultato finale è: E' meglio salvare il lavoro cliccando su. Testo sulle Pagine Scorrere verso il basso oppure cliccare su TESTO nei piccoli menu a sinistra o a destra. Ci sono molti parametri, per ora modifico solo questi (attenzione alle dimensioni dei caratteri): Per modificare i colori basta cliccare nella casella e scegliere nella finestra che si apre il colore voluto, alla fine clicco su.

16 Pagina 16 Stile Pulsanti Lo Stile Pagina prevede due menu: ogni menu conterrà una serie di Pulsanti che prevediamo differenti per il Menu superiore e per quello laterale. In questo momento userò pulsanti semplici di solo testo. Pulsanti nel menu superiore e nella sezione STILI clicco su e clicco su, nella pagina che si apre scelgo in modo da creare uno Stile di Pulsanti, nella colonna di sinistra ho infatti un nuovo Stile che si chiama --- NEW ---. in corrispondenza di --- NEW ---. Voglio dei pulsanti testuali semplici, imposto come descritto qui di seguito lasciando invariato il resto.

17 Pagina 17 Pulsanti nel menu laterale e nella sezione STILI clicco su, nella pagina che si apre scelgo: in modo da DUPLICARE lo Stile appena creato che modificherò in seguito. in corrispondenza di --- NEW --- che ho appena creato. Voglio dei pulsanti testuali sottolineati di larghezza fissa 190 pixel, così restano 10 pixel di bordo prima del testo. Modifico il Nome in Primo Sito Laterale e:, quindi: e ancora: Al termine salvo.

18 Pagina 18 Creo la struttura del Sito E' giunto il momento di creare Pulsanti e Pagine secondo la struttura che avevamo previsto: CHI SIAMO ATTIVITA' NOVITA' ESPERIENZE CONTATTI DOVE SIAMO Pulsanti Principali nella sezione PULSANTI E PAGINE clicco su, si apre: Scelgo PULSANTI PRINCIPALI ATTIVA PP01 (o qualsiasi altro, ne ho 30 a disposizione) e clicco su.

19 Pagina 19 Nella finestra che si apre modifico solo: Ripeto l'operazione per il pulsante CONTATTI. Ora il menu di sinistra è: questo se l'interruttore MENU in alto a destra è impostato così:, se invece è impostato così: il menu di sinistra sarà: L'operatività è, in questa fase, identica, vedremo più avanti quale usare.

20 Pagina 20 Associo lo Stile alle Pagine Principali in corrispondenza di CONTATTI e scorro la pagina fino a Stile che imposto così: quindi clicco su. Eseguo la stessa operazione con CHI SIAMO. Verifico il risultato Per verificare il risultato controllo gli interruttori in alto a destra:. Se sono come indicato significa che il Sito è stato pubblicato automaticamente10 e mi basta cliccare su SITO per aprire una nuova scheda con il Sito aperto al Pubblico: 10 La Pubblicazione Automatica significa che ad ogni salvataggio tutte le pagine del Sito sono ricostruite automaticamente. Alcune modifiche NON possono pubblicare automaticamente e in questo caso il pulsante PUB lampeggia e occorre premerlo per effettuare la pubblicazione. Si consiglia la Pubblicazione Manuale solo quando il Sito è di grandi dimensioni e si stanno effettuando grandi lavori di modifica del Sito.

21 Pagina 21 Se invece gli interruttori sono così: significa che la pubblicazione automatica non è attiva e devo cliccare sul pulsante PUB prima di SITO. Consiglio di cliccare sul primo pulsante per trasformarlo in (L'ordine dei pulsanti sul Sito è invertito, ma lo correggerò più tardi)..

22 Pagina 22 Pulsanti Dipendenti La struttura dei Pulsanti di Navigazione prevede: CHI SIAMO ATTIVITA' NOVITA' ESPERIENZE CONTATTI DOVE SIAMO devo quindi aggiungere tre Pulsanti Dipendenti da CHI SIAMO e due da CONTATTI. nella sezione PULSANTI E PAGINE clicco su, si apre:

23 Pagina 23 Dopo aver impostato la pagina come indicato clicco su e noto come nella colonna di sinistra sotto il primo pulsantino azzurro sia comparso un triangolino bianco che sta ad indicare che il Pulsante Principale CONTATTI contiene Pulsanti Dipendenti. Ora clicco nuovamente su per creare l'altro Pulsante Dipendente che mi occorre. Per il Pulsante CHI SIAMO potrei usare la stessa tecnica, naturalmente modificando un parametro nella pagina di destra alternativa., ma preferisco usare un'altra tecnica in corrispondenza di CHI SIAMO, e lo faccio TRE volte. Adesso la colonna di sinistra è: Pulsante Principale, cliccare su Pulsanti Dipendenti Pulsante Dipendente, cliccare su per vedere i per nascondere i Pulsanti Dipendenti Pulsante Dipendente, cliccare su per nascondere i Pulsanti Dipendenti Pulsante Principale, cliccare su Pulsanti Dipendenti per vedere i NOTA: se la colonna di sinistra non apparisse come indicato provare a cliccare sui pulsantini a destra per aprire o chiudere i Pulsanti Dipendenti. Se per errore si fossero creati troppi Pulsanti Dipendenti, basta cliccare su per cancellarli.

24 Pagina 24 Associo lo Stile alle Pagine Dipendenti in corrispondenza di --- NEW --- (una ad una) e le modifico come segue. Per tutti i Pulsanti imposto: prestando attenzione che quando si sceglie lo Stile della Pagina occorre attendere un istante perché la pagina è salvata e i due menu a tendina successivi sono aggiornati (la tendina Menu in cui è inserito il Pulsante inizialmente non è visibile perché XTOTEM non sa quale Stile Pagina si userà). Per quanto riguarda CONTATTI DOVE SIAMO CHI SIAMO ATTIVITA' NOVITA' ESPERIENZE scrivere: Verifico il risultato Per verificare il risultato clicco su e provo a navigare: C'è qualche miglioria da fare... la faremo. Innanzitutto riordino i Pulsanti.

25 Pagina 25 Riordino il Pulsanti nella sezione PULSANTI E PAGINE clicco su Imposto i parametri come indicato e clicco su., si apre:

26 Pagina 26 Scrivo i Testi E' giunta l'ora di scrivere un po' di testi... Per ognuno dei Pulsanti clicco su e scrivo il testo (nel mio caso finto testo) ma inizio scrivendo il titolo della pagina e cliccando su Stili Titolo 1, in questo modo tutti i titoli saranno uguali e basterà modificare lo Stile delle Pagine per cambiare lo stile di tutti i titoli. Per ora non scrivo testo sulle pagine: NOVITA' DOVE SIAMO perché conterranno dei comandi molto interessanti... Il risultato: Necessita però di una piccola correzione, il menu laterale è troppo in alto...

27 Pagina 27 Correggo l'impaginazione e nella sezione STILI clicco su, e nella colonna di sinistra clicco su, quindi su. Ora clicco esattamente prima della parantesi graffa di {MENU_V22... e premo contemporaneamente, sulla tastiera, MAIUSCOLO+INVIO (o RITORNO A CAPO) per inserire un'interruzione di riga11.. Tutte le pagine sono state modificate. Le pagine del Sito sono adesso: La pagina delle Novità sarà spiegata nel successivo manuale Il mio primo Sito - Contenitori di News 11 Internet prevede che ad ogni ritorno a capo sia inserita una riga vuota, per ovviare a questo ed inserire solo il ritorno a capo occorre indicarlo esplicitamente inserendo un ritorno di riga (e non di a capo ) premendo MAIUSCOLO insieme all'invio.

28 Pagina 28 Apro la pagina cliccando su e scrivo, nella riga sotto il titolo, Clicca qui per inviare una . Adesso evidenzio Clicca qui e clicca su, si apre: scrivo l'indirizzo preceduto da mailto: senza virgolette e senza spazi ma con i due punti, come nell'esempio, quindi salvo la pagina12. Il risultato è e cliccando sulla frase azzurra si apre l'agente di posta installato sul computer. La pagina Dove siamo sarà spiegata nel successivo manuale Il mio primo Sito Mappe Google 12 mailto: è il comando Internet per scrivere una anziché collegare una pagina.

29 Pagina 29 Abbellimenti e personalizzazioni Quello che ho disegnato è un sito molto semplice, con poche pagine. Vediamo come poter inserire nuovi elementi. Immagine sulla pagina Una cosa che certamente è richiesta in molte pagine è l'aggiunta di immagini e fotografie. Le immagini devono essere prima inserite sul Sito, come descritto a pagina 8. E' buona norma utilizzare immagini create nelle dimensioni corrette anche se è possibile ridimensionarle direttamente sulla pagina. In questo esempio userò un'immagine già presente in XTOTEM, fra le clipart. Apro la pagina CHI SIAMO con, clicco nel punto in cui inserire l'immagine e clicco su, si apre: Scelgo in IMMAGINI DISPONIBILI l'immagine da inserire (sono in ordine alfabetico, raggruppate nelle proprie cartelle), modifico eventualmente le dimensioni (per lasciare l'immagine proporzionata, scrivo una sola dimensione, l'altra sarà calcolata automaticamente). La scheda AVANZATO permette ulteriori personalizzazioni, come ad esempio bordi e spaziature. Alla fine clicco su OK. Se non ricordo il nome dell'immagine, per vedere le immagini disponibili clicco su destra, si apre una colonna con tutte le immagini da cui si può ricavare il nome: in alto a

30 Pagina 30 La finestra ora è: Si può trascinare l'immagine dove desiderato, si può ridimensionare usando le 8 maniglie. Per allineare l'immagine ci clicco sopra per evidenziarla e uso il comando FORMATO STILI IMMAGINE A DESTRA / SINISTRA / NON ALLINEATA: Dopo aver salvato il risultato sarà:

31 Pagina 31 Slide show e galleria d'immagini Per inserire immagini che cambiano oppure gallerie d'immagini occorre creare degli Slide Show. e nella sezione SLIDE SHOW clicco su, si apre una finestra in cui scrivo come NOME Primo Sito Galleria (senza virgolette) e scelgo Lightbox, quindi clicco su OK. Adesso nella colonna di sinistra c'è, clicco su e compilo come segue: quindi clicco su per gestire le immagini e quindi su, si apre: Nella colonna di sinistra evidenzio tutte le immagini da inserire (usando il mouse insieme al pulsante CTRL oppure MAIUSCOLO secondo lo standard Windows) e clicco eventualmente con nuove immagini e clicco su :, ripeto

32 Pagina 32 Per ogni immagine inserisco eventuali titoli, didascalie, collegamenti, numero d'ordine (si consiglia di 10 in 10 per poter inserire eventuali altre foto)13. Al termine clicco su (cliccare sempre, anche se non sono state fatte modifiche). per un'anteprima del risultato. Occorre ora inserire lo Slide Show appena creato sulla pagina. Apro la pagina ATTIVITA' con clicco nel punto in cui inserire l'immagine e clicco su scelgo PRIMO SITO GALLERIA. La pagina diventa:. Il risultato sul Sito è: 13 Questa maschera è differente per diversi tipi di Slide Show., e, nella finestra che si apre,

33 e cliccando su un'immagine: Pagina 33