Editor HTML Manuale operativo Ver. 1.0

Editor HTML
Manuale operativo
Ver. 1.0
Tel. 059-2551137
Via Malavolti 31 – 41100 Modena
www.keposnet.com
[email protected]
Fax 059-2558867
KRedazione
Manuale utente
Introduzione
Nell’ambito del KCMS l’editor HTML è uno degli strumenti più utilizzati in quanto permette non
solo di modificare i file di testo (in formato HTML) utilizzati all’interno delle pagine web ma è
inoltre integrato con il resto del sistema KCMS consentendo quindi operazioni che altrimenti
non sarebbero possibili con editor HTML qualsiasi.
In questo manuale sono descritte tutte le procedure operative necessarie ad un utente del
KCMS.
Apertura dell’editor
L’editor HTML del KCMS (d’ora in avanti riferito semplicemente come editor) è disponibile
unicamente a partire dal KDoc, dopo essersi opportunamente autenticati (vedi manuale del
KDoc).
L’editor può essere avviato in 2 modi differenti a seconda del tipo d’uso che se ne fa:
−
−
Creare un nuovo file di tipo HTML
Modificare un file esistente di tipo HTML
Creazione di un file HTML
Per creare un file di tipo HTML selezionare dapprima la cartella
all’interno della quale si vuole creare il file.
Dopodiché cliccare sul menu File e selezionare la voce Crea.
Una volta cliccato si aprirà una finestra
nella quale viene chiesto che tipo di file si
vuole creare. In questo caso bisogna
cliccare sul menu a tendina e selezionare
la voce File Html.
Una volta selezionato il tipo, cliccare su Conferma e si aprirà la finestra dell’editor HTML.
Modifica di un file HTML
In questo caso bisogna dapprima selezionare il file che
si vuole modificare, dopodiché cliccare sul menu File
e selezionare la voce Modifica.
Una volta cliccato si aprirà la finestra dell’editor HTML.
Finesta dell’editor HTML
La finestra dell’editor si presenta come nella figura seguente.
2
KRedazione
Manuale utente
Dall’alto verso il basso si distinguono le seguenti aree:
−
−
−
−
−
Titolo: inserire qui il nome del file (obbligatorio)
Abstract: inserire un eventuale commento o riassunto del file a puri fini descrittivi o
mnemonici (opzionale)
Barra dei comandi: area su sfondo grigio/beige nella quale compaiono i pulsanti relativi ai
vari comandi dell’editor. Tali comandi saranno spiegati ed approfonditi nel capitolo
successivo
Area del testo: riquadro principale, in cui inserire testo e immagini desiderati
Pulsanti generali: area in cui si trovano i 3 pulsanti generali per salvare e/o chiudere il file
Comandi dell’editor
Nella barra dei comandi compaiono una moltitudine di pulsanti mediante i quali poter operare
in vario modo sul testo: per modifiche, allineamenti, formattazioni, impostazione dei caratteri,
inserzione di immagini, di hyperlink, ecc.
Per chi è già abituato ad utilizzare programmi di elaborazione del testo come Word, StarOffice
o similari, molti di questi comandi risulteranno rapidamente familiari.
Oltre a questi ve ne sono poi alcuni che sono peculiari del KCMS e che verranno visti con
maggiore attenzione.
Notare che se si sposta il mouse sopra un pulsante e si attende qualche istante, comparirà un
piccolo riquadro giallo che riporta la descrizione del comando stesso: questo evita ovviamente
di dover imparare a memoria tutte le varie icone della barra.
Qui di seguito diamo comunque una breve descrizione di tuttu i comandi, partendo dai più
comuni per finire con quelli più specifici o articolati.
3
KRedazione
Manuale utente
Comandi generali
Icona
Comando
Descrizione
Nuova pagina
Crea una nuova pagina bianca.
ATTENZIONE: il testo e le
immagini eventualmente presenti
vengono persi.
Anteprima
Visualizza un’anteprima del file
HTML così come verrebbe
all’interno di un browser internet
(ad esempio Internet Explorer,
Firefox, Safari, ecc.)
Stampa
Stampa il file.
Annulla ultima operazione
Annulla l’ultima operazione
effettuata.
Esegui operazione annullata
Ri-esegui l’azione annullata in
precedenza.
Cerca
Funzione di ricerca di testo
all’interno del documento aperto.
Sostituisci
Funzione di sostituzione
automatica di un testo con un altro
all’interno del documento aperto.
Seleziona tutto
Seleziona tutto quanto il contenuto
del documento. Utile quando il
contenuto è grande e selezionarlo
con il mouse risulta scomodo.
Comandi per la modifica del testo
Icona
Comando
Descrizione
Taglia Copia Incolla
Abituali operazioni per tagliare,
copiare o incollare del testo
selezionato.
Incolla testo semplice
Funzione di Incolla per del testo
semplice, ossia privo di qualsiasi
formattazione grafica (grassetto,
ecc.)
Incolla da Word
Funzione di Incolla specifica per del
testo che sia stato copiato a partire
da un documento Word.
4
KRedazione
Manuale utente
Inserisci tabella
Inserimento di una tabella
all’interno del documento.
Inserisci linea
Inserimento di una linea
orizzontale.
Inserisci emoticon
Inserimento di un emoticon
all’interno del testo.
Caratteri speciali
Inserimento di caratteri speciali,
ossia di caratteri non digitabili dalla
tastiera.
Salto pagina
Inserimento di un salto pagina, per
costringere il testo successivo ad
iniziare in una pagina nuova.
Inserisci animazione Flash
Inserimento di un’animazione in
Flash.
Tastiera universale
Tastiera per inserire eventuali
caratteri in alfabeti non latini.
Comandi di formattazione del testo
Icona
Comando
Descrizione
Grassetto, corsivo, ...
Abituali comandi per formattare il
testo selezionato. Nell’ordine:
−
Grassetto
−
Corsivo
−
Sottolineato
−
Testo barrato
Apice, pedice
Comandi per mettere il testo
selezionato come apice o pedice
del testo rimanente.
Elenchi numerati o puntati
Comandi per inserire
automaticamente uno stile di
elenco numerato o puntato.
Indentazione testo
Comandi per modificare l’ampiezza
del rientro del testo selezionato
rispetto al margine sinistro
abituale.
Il primo sposta il testo verso la
sinistra, il secondo verso la destra.
Allineamento testo
Abituali comandi per allineare il
5
KRedazione
Manuale utente
testo selezionato. Nell’ordine:
−
Allineamento a sinistra
−
Allineamento centrale
−
Allineamento a destra
−
Allineamento sia a sinistra che
a destra
Stile del testo
Lista degli stili pre-impostati per la
formattazione del testo
selezionato.
Formato del testo
Lista di formati pre-impostati per la
formattazione di un intero
paragrafo.
Carattere del testo
Lista dei caratteri tipografici
disponibili per formattare il testo
selezionato.
Dimensione del carattere
Lista delle dimensioni possibili per
il carattere del testo selezionato.
Colore del testo
Lista dei colori disponibili per il
testo selezionato.
Colore dello sfondo
Lista dei colori di sfondo disponibili
per il testo selezionato.
Comandi avanzati
I comandi presenti in questa sezione sono destinati all’uso solamente di utenti estremamente
esperti sia di programmazione HTML che di progettazione KCMS.
Gli utenti che hanno ricevuto una formazione unicamente per poter gestire i contenuti del
proprio sito devono quindi evitare di utilizzare questi comandi.
Icona
Comando
Descrizione
Codice Sorgente
In questa modalità è possibile
lavorare direttamente nel formato
HTML.
Consigliato solamente ad utenti
esperti!
Modelli
Consente di selezionare un modello
pre-impostato di testo e immagine.
Modulo
Inserimento di un modulo (form)
all’interno della pagina.
Check-box
Inserimento di un elemento di tipo
check-box all’interno del
6
KRedazione
Manuale utente
documento.
Radio-button
Inserimento di un elemento di tipo
radio-button all’interno del
documento.
Campo di testo
Inserimento di un campo di testo
all’interno del documento.
Area di testo
Inserimento di un’area di testo.
Menu
Inserimento di un menu a lista.
Bottone
Inserimento di un bottone.
Bottone-immagine
Inserimento di un bottone con
immagine.
Campo nascosto
Inserimento di un campo nascosto.
Comandi per KCMS
Nell’ambito dell’editor HTML vi sono alcuni comandi speciali che fanno diretto riferimento al
KCMS ed al KDoc in particolare.
Questi comandi vengono trattati in una sezione a parte, maggiormente dettagliata, in quanto
rivestono una particolare importanza e richiedono anche una conoscenza di base del KDoc.
Inserimento di un hyperlink
Un hyperlink è un punto attivo di una pagina web, ossia un punto sul quale si può cliccare con
il mouse per attivare automaticamente un certo livello di navigazione: passare ad un’altra
pagina, sia dello stesso sito che di un sito esterno, posizionarsi in un certo punto della pagina
corrente (nel caso di pagine molto lunghe), aprire automaticamente una mail per un certo
destinatario, scaricare un file, ecc.
Nei paragrafi successivi verranno illustrati ciascuno dei possibili hyperlink e come realizzarli.
Hyperlink a pagine web
Un hyperlink ad una pagina web consente all’utente di navigare direttamente a questa pagina.
La pagina oggetto può appartenere sia allo stesso sito di partenza che ad un sito
completamente distinto: nel primo caso si parla di link interno e nel secondo di link esterno.
Per definire un hyperlink ad una pagina è necessario:
−
Selezionare il testo che deve diventare attivo
−
−
Cliccare sul pulsante Inserisci hyperlink rappresentato dall’icona
Selezionare, nel menu Tipo di Collegamento, la voce URL
.
Una volta cliccato si aprirà una finestra tramite la quale poter definire e quindi creare
l’hyperlink in questione.
7
KRedazione
Manuale utente
Per creare il link esterno è sufficiente inserire nel campo URL l’indirizzo del sito in oggetto (ad
es. www.sito-in-oggetto.it/pagina-in-questione).
Per creare un link interno è necessario invece selezionare direttamente la pagina
corrispondente all’interno del KDoc. Per farlo si deve cliccare sul pulsante Cerca nel KDoc e
quando si apre la finestra del KDoc selezionare la corrispondente cartella e pagina.
Il protocollo va impostato diversamente solo nel caso di pagine securizzate (HTTPS), pagine di
trasferimento (FTP) ecc.
In questa finestra è sufficiente operare nell’ambito della sottofinestra Informazioni
collegamento. Le altre due sottofinestre (Destinazione e Avanzate) sono dedicate ad utenti di
livello administrator e pertanto non sono oggetto di questo manuale.
Hyperlink per E-Mail
Se si seleziona E-Mail come tipo di collegamento si crea un link che consente di aprire
automaticamente una mail avendo già un destinatario ed un oggetto pre-impostati.
Questo ad esempio è il classico caso in cui si vuole inviare una mail per informazioni o per
assistenza e che vengono indirizzate automaticamente alle caselle postali designate.
Per creare un link di tipo e-mail si devono compilare i campi della sottofinestra Link info
mostrata in figura.
−
−
−
Indirizzo E-Mail: indirizzo del destinatario
Oggetto del messaggio (opzionale): titolo automatico della mail
Corpo del messaggio (opzionale): eventuale testo pre-impostato della mail
8
KRedazione
Manuale utente
La sottofinestra Avanzate è dedicata ad utenti di livello administrator e pertanto non è
oggetto di questo manuale.
Hyperlink per Ancore
Il terzo tipo di collegamento riguarda la possibilità di far scorrere la pagina corrente
direttamente in un dato punto. Questo è in genere utile (e consigliato) nel caso di pagine web
molto lunghe e che obbligano l’utente a lunghi scorrimenti con la barra laterale o la rotella del
mouse.
Per inserire un’ancora precedemente creata (vedi paragrafi successivi) è sufficiente selezionare
la relativa ancora dall’elenco a tendina Select an Anchor, come si vede nella figura
sottostante:
La sottofinestra Avanzate è dedicata ad utenti di livello administrator e pertanto non è
oggetto di questo manuale.
Modifica di un hyperlink
La modifica di un hyperlink segue esattamente lo stesso procedimento illustrato per la
creazione. È sufficiente selezionare il testo relativo all’hyperlink, dopodiché cliccare sull’icona
Crea/Modifica Hyperlink e procedere come illustrato nel paragrafo precedente.
Rimozione di un hyperlink
La rimozione di un hyperlink è molto semplice. È sufficiente selezionare il testo relativo
all’hyperlink e cliccare sul pulsante
testo semplice ed inattivo.
. In tal modo il testo selezionato torna ad essere del
Creazione di un’ancora
Un’ancora è una sorta di segnapunto all’interno di una pagina web e viene usato per poter
saltare rapidamente a quel punto senza dover scorrere pagina e testo. Le ancore sono
particolarmente utili e da usare nel caso di pagine molto lunghe all’interno delle quali l’utente
sia costretto a frequenti azioni di scorrimento con la barra laterale o con la rotella del mouse.
Per creare un’ancora è sufficiente:
−
Posizionare il cursore del mouse nel punto in cui si vuole posizionare l’ancora
−
Cliccare sul pulsante
Inserisci ancora
Nella finestra che si apre successivamente, illustrata qui di seguito, è necessario dare un nome
all’ancora. Il nome può essere qualsiasi ed ovviamente è conveniente che abbia un significato
mnemonico per la comodità d’uso successivo.
9
KRedazione
Manuale utente
Per le istruzioni su come utilizzare le ancore così definite, vedere il paragrafo Hyperlink per
Ancore.
Inserimento di immagini da KDoc
Inserisce immagini da KDoc
Inserimento di un’immagine estratta
dal KDoc. Per inserire un’immagine all’interno del testo è necessario innanzitutto che il file
contenente l’immagine (JPEG, GIF, ecc.) sia già stato caricato all’interno del KDoc.
Inserimento di immagini dalla cache
Inserisce immagini da cache
Inserimento di un’immagine dalla
cache.
Comandi non attivi
Icona
Comando
Descrizione
Elimina formattazione
Funzione non attiva
Controllo ortografico
Funzione non attiva
10