|
HEADER (testata)
|
|
Left Menu (Menù di sinistra) |
Central top (Zona alta centrale)
|
Right Menu
(Menù di destra) |
|
Central Left
(Zona centrale sinistra) |
Central Right
(Zona centrale destra) |
|
Central bottom (Zona bassa centrale) |
|
Footer (piè di pagina) |
- Il secondo campo "Ordinamento" (Order), specifica quindi l'ordine che l'oggetto testo in questione avrà all'interno della zona scelta. Se ad esempio inseriamo 2 oggetti nella zona Header, dovremo secificare quale verrà prima (ad esempio assegnando l'ordinamento 1) e quale verrà dopo (gli assegneremo un numero maggiore di 1).
- Il terzo campo "Mostra" (Display) permette di specificare in quale zona far comparire il testo (o immagine) che stiamo editando.
Dato che nel nostro caso si tratta del logo distintivo della pagina, scegliamo di inserirlo nella zona Header
CLICCHIAMO SUL PULSANTE SAVE MODIFICATIONS E POI CHIUDIAMO L'EDITOR
(Tasto "Close" oppure la X in alto a destra)
Passaggio 2
ELIMINIAMO GLI OGGETTI "EREDITATI DALLA HOME PAGE" E SOSTITUIAMOLI CON OGGETTI UTILI PER LA NUOVA PAGINA
Cliccando sul pulsante
della barra in alto a destra, abbiamo accesso ad alcune proprietà della pagina; vediamo per il momento come usarlo per nascondere oggetti della pagina e creare sottopagine per costruire un piccolo sito personale.
Primo passaggio può essere quello di creare altre pagine oltre alla prima. Ad esempio un piccolo sito può contenere:
Home Page ----Curriculum (chi sono)---- Pagina di link ---- Pagina di pubblicità sulle iniziative----Pagina dei contatti
Dopo aver cliccato su
si aprirà questa finestra:

Qui possiamo cambiare il nome della pagina (sarà quello che appare nei menù della home page dei professionisti).
Più in basso (Titolo) c'è lo spazio dove possiamo attribuire un titolo (ad esempio "Home page di Cognome Nome - Informazioni, curiculum, e contatti prsonali - BENVENUTI !).
Possiamo infine decidere una data di scadenza oltre la quale la pagina non sarà più visibile (utile ad esempio per pagine publicitarie di eventi).
Andando poi sulla seconda linguetta in alto ("Subages") si avrà questa videata

Qui sono visulaizzate le attuali sottopagine della tua home page. Il sistema crea in automatico tre sottopagine che contengono rispettivamente: le informazioni sul tuo profilo (inserite all'atto della registrazione); una casella di posta dove puoi ricevere posta elettronica; una agenda per pianificare e mostrare i tuoi appuntamenti, eventi, ecc.
(A questo proposito ricordiamo che il modo in cui visualizzi queste pagine quando accedi come uente (quindi come proprietario delle pagine) è diverso da come appariranno ai visitatori. Il profilo informazioni ad esempio è ovviamente modificabile solo da te; l'agenda può essere vista ma non modificata, e la mailbox può essere usata solo da te. Per vedre come appaiono le pagine agli utenti puoi scolegarti dal sito andando sulla pagina di accesso e cliccando su esci, per poi tornare a visitare la tua pagina senza entrare come utente.)
A questo punto si può decidere se eliminare qualcuna di queste pagine (se inutilizzate) e/o aggiungerne altre.
Per eliminare pagine cliccate sul cestino in corrispondenza della stessa riga; per agiungere pagine cliccate sul pulsante "Aggungi sottopagine" (Add subpages).
Verrà creata una nuova riga dove inserire nome e ordinamento della nuova pagina. Vedremo successivamente altre funzioni. Consigliamo di utilizzare un nome senza spazi (per facilitarne la trascrizione su eventuali depliant, biglietti, ecc. Ad esempio potete chiamare la nuova pagina "attivita", oppure "curriculum", e specificare poi un titolo più esplicativo, semplicemente cliccando sulla bandierina a fianco e scrivendo un titoletto più completo (anche con la sua traduzione in inglese se lo desiderate), ad esempio "Pagina delle mie attività". Questo titolo apparrà nei menù di navigazione.
Avendo creato nuove pagine, sarà necessario attivarle, così come fatto per la vostra home page
Ci scusiamo per questa limitazione ma è per la vostra e nostra sicurezza.
Per attivare nuove pagine seguite il solito link che avete già usato per attivare la home page, ma dovrete inserire anzichè il solito "cognome_nome", l'indirizzo completo della nuova pagina creata. Se ad esempio avete creato una pagina chiamanola "pagina", dovrete inserire nel box di attivazione la seguente stringa "cognome_nome/pagina/" e cliccare su "Attiva"
Per ATTIVARE LA NUOVA PAGINA puoi cliccare qui
Proviamo ora ad eliminare qualcosa dalla nostra home page. Andiamo sulla linguetta in alto "Contenuti" (Contents). Avremo quanto segue:

In alto adestra abbiamo la possibilità di visualizzare i contenui presenti in una specifica zona della pagina;
scegliamo ad esempio i vedere quali sono i contenuti del menù di destra. Apparirà l'elenco completo dei vari
plug in e/o testi inseriti. Se si tratta di contenuti inseriti da voi, avrete il permesso di modificarli (cliccando sulla matitina che appare di lato
) oppure cancellarli con il solito cestino. Se si tratta di oggetti ereditati dalla home page CIPOG potrete solo decidere di non visualizzarli, cliccando sul menù a tendina che è presente accanto ad ogni oggetto e selezionando "Non mostrare in questa pagina" (Don't show in this page).
Proviamo a nascondere la tabella a destra che contene le notizie CIPOG
Vediamo che i vari oggetti sono distinti da piccole icone:
è un testo;
rappresenta un plugin "Menu" (che vedremo poi);
rappresenta un oggetto "sfondo";
Per il momento il nostro scopo è nascondere il testo delle notizie CIPOG. Vediamo che (per esclusione) l'oggetto in questione è il testo che si chiama "prossimiAppuntamentiTXT"; di lato vedrete che è selezionato "Visualizza in questa pagina" (View on this page). Selezioniamo "Non mostrare in questa pagina" (Don't show in this page).
Tutto qui
NON DIMENTICATE DI CLICCARE SU "SALVA MODIFICHE" PRIMA DI CHIUDERE, OGNI VOLTA CHE CAMBI QUALCOSA. SE CHIUDI LA FINESTRA DELLE PROPRIETA' SENZA SAVARE NON AVRAI MESSAGGI CHE TI AVVERTONO DI NON AVER SALVATO E PERDERAI LE MODIFICHE.
Chiudiamo ora la finestra proprietà e vediamo che dalla pagina è sparita la tabella che abbiamo nascosto.
Possiamo decidere di nascondere tutti gli oggetti ereditati e partire così da una pagina completamente vuota, tranne che per il logo che abbiamo inserito.
Passaggio 3
INSERIAMO ORA ALTRI OGGETTI UTILI PER LA NUOVA PAGINA
Dopo aver inserito il logo e aver creato una nuova sottopagina, possiamo ora decdere di inserire in alto un menù con cui gli utenti possano navigare nel tuo sito.
Sappiamo dunque che le pagine e sottopagine presenti sul tuo sito sono:
Home Page, Info, Mailbox, Agenda e la pagina creata ex novo (chiamiamola "pagina")
Inserendo un menù, si può decidere che questo menù permetta di collegarsi a tutte queste pagine.
Proviamo.
Clicchiamo su
che è il tasto he ci permette di aggiungere un plugin alla pagina.
I plugin che puoi aggiungere alla pagina sono numerosissimi: puoi creare menù, contenitori di testo, forum, blog, collezioni di immagini, rivista virtuale, e tantissimi altri.
Cominciamo da qualcosa di semplice, poichè con lo stesso criterio potrai aggiungere altri plugin e studiarne il funzonamento specifico.
Il plugin Menu lo trovi sotto la voce "Navigazione" (Navigation) quinta linguetta in alto.
Scegliamo "bolini_navigationmeu", selezioniamo in alto la posizione in cui vogliamo che appaia (ad esempio Left menu - vedi la tabella che abbiamo illustrato sopra e/o sotto) e clicchiamo su "Salva modifiche" (Save Modification).
A questo punto avremo inserito il plugin ma dovremo impostarne i parametri (a meno che non ci piacciano già le impostazioni standard che possiamo vedere chiudendo la pagina - evento poco probabile...).
Se abbiamo chiuso la pagina del plugin, per rientrare nei parametri di un oggetto e modificarli possiamo andare in modalità "modifica" cliccando
.
Vedrete che a questo punto ogni oggetto della pagina si evidenzia al passaggio del mouse, svelando delle piccole icone per ogni oggetto, che svolgono varie funzioni.
Tipicamente avremo 




Per ogni oggetto, la matita
permette di modificarne i parametri; l'occhio
permette di renderli invisibili (ciò che abbamo fatto prima per nascondere i contenuti ereditti dalla home page CIPOG); il cestino
permette di cancellarli; la freccetta in sù
permette di spostare più in alto un oggetto, ameno che non sia già il più alto nella sua zona di appartenenza); l'altra freccetta
fa il contrario.
In pratica, se ad esempio vogliamo sostituire l'immagine del nostro logo che abbiamo prima caricato, seguiamo questi passaggi (validi anche per ogni altro oggetto:
- Visualizziamo la pagina in modalità modifica cliccando su
in alto a destra nella pagina
- Passiamo con il mouse sull'oggetto che vogliamo modificare (ad esempio il nostro logo)
- Vedremo apparire i simboletti descritti sopra 




- Se vogliamo cancellare l'oggetto clicchiamo sul cestino
, se vogliamo nasconderlo sull'occhio
, se vogliamo spostarlo useremo una freccia
, se infine vogliamo modificarlo clicchiamo sulla matita
Cliccando sulla matita ci troviamo di nuovo nell'editor. Se stiamo modificando un testo vedremo comparire il nostro editor simile a Word; se stiamo modificando un plugin vedremo le sue proprietà.
Passaggio 4
UTILIZZIAMO UN PLUGIN
I plugin permettono di arricchire la pagina web in vari modi:
si va dai più semplici (ad esempio un plugin che permette di decidere il colore dello sfondo di un'area della pagina) ai plugin più complessi (creare il tuo blog, un forum, una raccolta di articoli, ecc.)
Ne analizzeremo alcuni partendo dal plugin menù che abbiamo inserito prima.
Visualizziamo innanzitutto la pagina in modalità modifica cliccando su
in alto a destra; passiamo con il mouse sull'oggetto menù che vogliamo modificare (lo riconosciamo dal nome o dal simbolo
)
Appariranno i simboletti descritti sopra 



; clicchiamo sulla matita e vedremo apparire le proprietà dell'oggetto come da figura

Vediamo le varie voci:
- la prima ci consente come al solito di attribuire un nome all'oggetto (facoltativo)
- la seconda ne segnala l'ordinamento nella zona in cui è collocato
- Visualizza (display) ci permette di decidere in quale zona vogliamo che sia visibile; riportiamo per comodità la tabella che illustra la suddivisione delle zone della pagina.
|
HEADER (testata)
|
|
Left Menu (Menù di sinistra) |
Central top (Zona alta centrale)
|
Right Menu
(Menù di destra) |
|
Central Left
(Zona centrale sinistra) |
Central Right
(Zona centrale destra) |
|
Central bottom (Zona bassa centrale) |
|
Footer (piè di pagina) |
- La voce "From" è fondamentale nel plugin "Menu", dato che costituisce il punto di partenza da cui il menù comincia a leggere per mostrare le pagine. Se ad esempio ho creato una pagina che ha 3 sottopagine ed indico questa pagina come punto d'inizio, il menù darà la possibilità di accedere a questa pagina e a tutte lesottopagine che verranno create sotto a questa. Per essere semplici, se creo il menù (come stiamo facendo) nella mia home page, e imposto come punto di partenza (From), il menù mostrerà il link alla home page e a tutte le sue sottopagine. Quindi sostanzialmente possiamo lasciare invariato questo campo.
- La voce "Modalità" (Mode) consente di scegliere se visualizzare i caratteri del menù in formato grafico (image mode) che però forse può essere meno leggibile a meno che non passate un po' di tempo a provare varie opzioni di colori ecc., oppure la modalità "Text mode" che più semplicemente imposta le scritte del menù con caratteri lineari. Potete fare una scelta e guardare il risultato sulla vostra pagina, che ogni volta che salvate viene agiornata.
- Colore di Sfondo (Background Color) imposta, se necessario, un colore di sfondo per il menù; come standard il colore è trasparente.
- Margin left and right permette di decidere a che distanza il menù deve trovarsi dagli altri elementi.
- "Allineamento"(Allignment) vi consente di decidere se il menù deve essere allineato a destra, sinistra o centrato
- "Opzioni di menu" (menu options) dà la possibilità di creare un bordo, quanto deve essere spesso (thickness), e la distanza tra i singoli puilsanti. Nell'esempio abbiamo crato un bordo in rilievo (outset) lasciando le altre opzioni invariate.
- Più in basso trovate le opzioni relative al tipo di carattere da utilizzare, il colore, e opzioni per il formato grafico (solo se avete scelto la modalità "Image mode"). Selezionate un colore per il testo dei links (fonts for buttons and links) poihè il colore standard è trasparente e non vedreste nulla. Per cambiare colore cliccate su
e scegliete quello che vi piace.Fate lo stesso per i colori delle scritte dei sotto menu (i links alle sottopagine) poiche quello standard è bianco e anche qui non vedreste niente; per cambiare questo colore cliccate sul quadratino bianco accanto a "Caratere per i sottotitoli" (Font for subtitles).
Quando passate dalla modalità "image mode" a "Test Mode" vi consigliamo di salvare, in quanto le successive opzioni sui caratteri e colori del testo cambiano a seconda del format che avete scelto.
Non vi resta che salvare e guardare il risultato finale.
Quelle che seguono sono le impostazioni usate nella pagina di esempio, raggiungibile al link www.cipog.com/professionisti/cognome_nome

Per fare in modo che questo menù sia visibile anche nelle altre pagine del vostro sito oltre che in questa pagina, cliccate sulla folder in alto con scritto "Properties" e alla voce "Propagation" selezionate "This page and subpages". In questo modo un oggetto creato nella home page sarà visibile ed utilizzabile anche nelle altre sottopagine, anche se ricordate che per modificarlo o eliminarlo dovrete farlo dalla pagina in cui è stato creato.
Passaggio 5
AGGIUNGERE ALTRI ELEMENTI ALLA PAGINA
Gli elementi che è possibile aggiungere alla pagina sono molti. Nella speranza di riuscire presto ad illustrarne la maggior parte, continuiamo questo tutorial cercando di aggiungere altri elementi base alla nostra pagina.
Vediamo che la parte sinistra risulta vuota. Possiamo intanto creare un colore di sfondo che eidenzi la colonna a sinistra e poi "popolarla" con dei contenuti.
Iniziamo con lo sfondo, e utilizzeremo un altro plugin. Clicchiamo in alto a destra su
e già nella prima videata possiamo individuare il plugin "bolini_fondpage", idenificato dall'icona
.
In alto (nel campo display) scegliamo di posizionare questo plugin nel menu di destra (Right menu) e salviamo.
Avremo ora la videata delle proprietà specifiche di questo plugin:
le prime quattro/cinque voci sono ormai le solite che abbiamo già visto più volte (nome, posizione, ordinamento, ecc.). Selezione sfondo (Background election) indica se vogliamo usare un colore o un'immagine come sfondi per la nostra area prescelta. Se scelgo di utilizzare un'immagine mi viene proposta la scelta tra le immagini già caricate da voi sul sito (ad esempio il logo che abbiamo caricato in precedenza); se invece vogliamo usare un colore, selezioniamo "Color" sul menù a discesa (abbiamo anche opzioni miste he potete provare) e vediamo che si attiva la possibilità di scegliere il colore con cui riempire lo sfondo.
Segliamo ora l'area su cui vogliamo che questo sfondo venga visualizzato, selezionandola dal menù a discesa da "In Zone" (nel nostro caso scegliamo di visualizzare lo sfondo nella zona "menu right").
Background repeat si usa quando usiamo delle immagini come sfondo e vogliamo che si ripetano in sequenza e lo stesso vale per l'allineamento del background, che nel cso si usi un colore viene ignorato.
"Complete zone" consente infine di scegliere un'altra zona da "colorare" oltre quella scelta sopra, evitandoci di dover utilizzare un ltro plugin per colorare un'atra zona.
Salviamo e vediamo il risultato. Qui sotto ci sono le impostazioni usate nella nostra pagina di prova.

Passaggio 6
AGGIUNGERE TABELLE E TESTO
Aggiungere testo utilizzando tabelle è un buon modo per mantenere il testo all'interno di spazi ben delimitati e formattandolo in modo appropriato. Seguite questo esempio.
Clicchiamo su
in alto a destra per aggiungere un testo e vedremo aprirsi l'editor.
Nell'editor individuiamo il pulsante
che serve per aggiungere una tabella.
Impostiamo innanzitutto Lines 2 e columns 1.
Larghezza (Width) a 160 px (cambiamo quindi il simbolo % in px)
L'altezza a 200 px e lasciamo il resto come da default (impostazioni standard)
Avremo un risultato del genere
Ora inseriamo un testo dentro la tabella; sarà sufficiente entrarci dentro con il mouse e cancellare 0/0 scrivendo quello che vogliamo, così come in figura
| Le mie notizie |
|
Nuove attività per il mese corrente:
- Gruppo intensivo
- Workshop
- Ecc.
- Ecc.
|
Vogliamo ora impostare lo sfondo della prima riga. Sempre restando con il cursore all'interno della prima riga, clicchiamo su
che ci apre la pagina delle proprietà della tabella.
Selezionando "Background color, abbiamo la possibilità di scegliere (in alto ´Properties of:´) se il colore di sfondo deve appartenere all'intera tabella o solo alla cella (cell) dove siamo poizionati; scegliamo il colore e chiudiamo. Facciamo la stessa cosa sulla seconda cella e chiudiamo.
Ora possiamo impostare il colore di sfondo di un testo nella seconda cella; entriamoci dentro con il cursore, selezioniamo tutto il testo che ci interessa evidenziare e, indviduando in alto il pulsante
clicchiamoci sopra e scegliamo il colore (nell'esempio "Gruppo intensivo" giallo ghiaro).
Questo è il risultato
| Le mie notizie |
|
Nuove attività per il mese corrente:
- Gruppo intensivo
- Workshop
- Ecc.
- Ecc.
|
Infine decidiamo che quando l'utente cliccherà su "Gruppo intensivo" vogliamo che si apra la sottopagina che abbiamo creato prima (mmettiamo che contenga i dettagli del programma del gruppo in questione)
Aggiungeremo quindi un link a questa pagina. Selezioniamo dunque il testo che dovrà diventare cliccabile, e usiamo il pulsante 
Si aprirà una struttura ad albero che visualizza tutte le pagine del nostro sito. Scegliamo la pagina che dovrà collegarsi a questo testo e clicchiamo su insert. Il testo prescelto risulterà evidenziato in grigio e con grandezza 2. Possiamo rimodificarlo (nell´esempio lo abbiamo rimpicciolito) per adattarlo alla nostra tabella.
Questo è il prodotto finale
| Le mie notizie |
|
Nuove attività per il mese corrente:
|
Scegliamo di pubblicare tutto nella zona "menu di destra" (displayed in zone "Right menu"), clicchiamo su "Save Modifications" e vediamo come risulta nella pagina.
Passaggio 7
CREARE UNA SPAZIATURA
Se avete seguito passo passo il tutorial noterete che il menù sulla sinistra risulta molto a ridosso del logo che abbiamo inserito. Occorre distanziarlo un po'.
Creiamo dunue un nuovo testo (dovreste ormai sapere che è sufficiente cliccare su
) e inseriamo come unico testo un "Invio", cioè andiamo semplicemente a capo senza scrivere nulla. Scecliamo di salvare il testo in posizione "Left menù", salviamo e chiudiamo.
Se non siamo ià in modalita "modifica" clicchiamo sull'apposito pulsante ce ci permette di visualizzare gli elemententi (
). Passando ora sul testo appena creato sulla sinistra, vedremo che è posto SOTTO al nosto menù di navigazione. Cerchiamo la freccetta
e clicchiamoci sopra. Verrà così spostato SOPRA al nostro menù, e costituirà uno spazio sufficiente a istanziare il menù dal nostro logo. Se lo spazio risultante è troppo, potet provare ad inserire invece che un "invio" (cioè un "andare a capo") un invio effettuato tenendo premuto il tasto "maiuscole". Qui sotto è illustrata la differenza:
´Testo 1´
´Testo 2´ - Questo testo (Testo 2) è separato da quello sopra (Testo 1) avendo premuto "invio" normalmente
´Testo 3´ - Questo testo (Testo 3) è separato da quello sopra (Testo 2) avendo premuto "maiusc + invio".
Passaggio 8
CREARE ALTRI TESTI (AD ESEMPIO UN'INTRODZIONE E UN CURRRICULUM)
Proviamo ora a "Popolare" la nostra pagina con del testo, ed inseriamo in una delle sottopagine il nostro curriculum.
Innanzitutto premiamo sul tasto ![Add text]()