Gestione del testo. Dreamweaver e il testo. Richiamare la pagina

Transcript

1 Gestione del testo 04 In questo capitolo In questo capitolo imparerai a utilizzare gli strumenti di formattazione del testo. Imparerai come impostare uno stile a un testo per un titolo o un paragrafo. Apprenderai anche come allineare un testo. Infine imparerai ad assegnare un carattere, un aspetto, una dimensione e un colore a un testo o porzione di esso. Come potrai notare utilizzando gli strumenti disponibili in Dreamweaver CS4, potrai inserire, posizionare e formattare il testo a tuo piacimento. Dreamweaver e il testo Dopo aver definito e creato una semplice struttura di un sito Web, passiamo a inserire nelle pagine Web, ancora vuote, gli elementi che costituiranno il contenuto vero e proprio del sito. Vediamo come inserire il testo in una pagina e come formattarlo utilizzando gli strumenti di Dreamweaver CS4 per controllarne l aspetto e il posizionamento. Richiamare la pagina Avendo precedentemente realizzato la struttura del sito, nel nostro esempio una home page collegata a diverse pagine, iniziamo a lavorare su una delle pagine del sito per inserire un semplice testo di presentazione. La prima cosa da fare è richiamare in Dreamweaver CS4 la pagina sulla quale intendiamo lavorare, nel nostro caso sceglieremo la pagina presentazione.html. 1. Dal pannello File fai doppio sull icona della pagina presentazione.html (figura 4.1). 73

2 CAPITOLO 04 Figura 4.1 L icona della pagina presentazione.html 2. Viene così aperta nella finestra del documento la pagina presentazione precedentemente creata, come puoi notare dal titolo nella barra del titolo (figura 4.2). Figura 4.2 La pagina presentazione nella finestra del documento 74

3 Gestione del testo NOTA Assegnare al documento un nome di file salvandolo, non equivale ad assegnare un titolo alla pagina. Il titolo di una pagina HTML fornisce ai visitatori del sito informazioni sul contenuto della pagina e consente di identificare la pagina nella cronologia e nei segnalibri del visitatore. 3. Per impostare le proprietà relative al titolo della pagina, seleziona il menu Elabora e fai clic sulla voce Proprietà di pagina (figura 4.3). Figura 4.3 Il percorso di menu 4. All apertura della finestra di dialogo Proprietà di pagina seleziona nel riquadro Categoria la voce Titolo/Codifica e inserisci il titolo relativo al contenuto della pagina. Nel campo Titolo digita Presentazione del sito e fai clic sul pulsante OK (figura 4.4). Figura 4.4 La finestra di dialogo Proprietà di pagina 75

4 CAPITOLO Salva la pagina e avvia l anteprima nel browser. Come puoi osservare, il titolo è visualizzato nella barra del titolo (figura 4.5). Figura 4.5 La barra del titolo Naturalmente la pagina appena aperta è ancora bianca e vuota perché non è stato ancora inserito nessun elemento. Nel prossimo paragrafo vedremo come inserire quello che è un fondamentale strumento di comunicazione: il testo. Inserimento del testo Ci sono diversi modi di inserire un testo in una pagina: digitare il testo sulla tastiera del computer; copiare il testo da una porzione di testo digitale già esistente; richiamare un file di testo. Vediamo inizialmente come inserire un semplice testo nella pagina di introduzione digitandolo da tastiera. 1. Come in un qualunque editor di testo, il cursore lampeggiante indica il punto dove sarà posizionato il testo che stai per inserire. Digita la parola Presentazione, che farà da titolo alla pagina (figura 4.6). Figura 4.6 Inserimento del testo 2. Per andare a capo premi il tasto Invio sulla tastiera, ogni volta che premi Invio viene creato un nuovo paragrafo. Digita il testo Questo sito nasce dal desiderio di illustrare un nuovo modo di intendere la MULTIMEDIALITÀ (figura 4.7). 76

5 Gestione del testo Figura 4.7 Nuovo paragrafo 3. Premi nuovamente il tasto Invio per andare a capo e creare un nuovo paragrafo; digita il testo La multimedialità comunemente viene intesa come Ecco come appare il testo inserito nella pagina (figura 4.8); tre parti di testo che dovrai formattare per realizzare un impaginazione composta da un titolo e due brevi paragrafi. Figura 4.8 Il testo digitato Formattazione del titolo Per far da titolo a una pagina, un testo deve essere ben dimensionato, adeguatamente posizionato e risaltare sugli altri elementi della pagina. Deve quindi essere opportunamente formattato. Vediamo come formattare il titolo dell esempio, la parola Presentazione, in maniera adeguata. 1. Come prima operazione, seleziona il testo facendo clic a fine parola e, tenendo premuto il pulsante del mouse, trascina il cursore fino a inizio parola, il testo selezionato appare in colore inverso cioè bianco su sfondo nero (figura 4.9). Figura 4.9 Il testo selezionato 77

6 CAPITOLO Per la formattazione del testo appena selezionato, utilizza gli strumenti della finestra di ispezione Proprietà. Fai clic sulla freccia del menu a comparsa Formato e seleziona Titolo 1 (figura 4.10). Figura 4.10 Il menu Formato 3. Come puoi osservare il menu Formato presenta sei diversi stili per i titoli, dove al numero più basso corrisponde un testo più grande; sono inoltre presenti uno stile Paragrafo, uno stile Preformattato e lo stile Nessuno. Il testo ha ora assunto dimensioni maggiori, più adatte a un titolo di pagina (figura 4.11). Figura 4.11 Il testo ridimensionato 4. Fai clic sul pulsante CSS presente in basso a sinistra nella finestra Proprietà (figura 4.12). Figura 4.12 Il pulsante CSS 5. La finestra visualizza ora i controlli CSS. Fai clic sul pulsante Allinea al centro (figura 4.13). 78 Figura 4.13 Il comando Allinea al centro

7 Gestione del testo 6. Viene aperta la finestra di dialogo Nuova regola CSS (figura 4.14). Figura 4.14 La finestra Nuova regola CSS 7. Seleziona nel campo Tipo di selettore la voce Tag e fai clic sul pulsante OK (figura 4.15). 8. Il testo selezionato risulta ora centrato nella pagina (figura 4.16). Figura 4.15 Impostazioni della finestra Figura 4.16 Il testo centrato nella pagina 79

8 CAPITOLO 04 NOTA È possibile allineare e centrare blocchi di testo completi, ma non parti di un intestazione o di un paragrafo. 9. Per modificare il colore del testo, di default nero, fai clic sulla casella Colore per aprire la tavolozza dei colori (figura 4.17). Figura 4.17 La casella Colore 10. Sposta il puntatore del mouse (che appare a forma di contagocce) sopra la tavolozza per scegliere un colore e fai clic per esempio sul colore verde (figura 4.18). Figura 4.18 La tavolozza dei colori 11. A questo punto fai clic in una zona vuota della pagina per deselezionare il testo e osservare il risultato della formattazione applicata al titolo (figura 4.19). Figura 4.19 Il testo formattato 80

9 Gestione del testo Salvataggio e anteprima della pagina Web È buona abitudine durante le operazioni di creazione delle pagine, ricordarsi di salvare la pagina e di visualizzare un anteprima nel browser per verificare che l aspetto della pagina corrisponda a ciò che si sta realizzando. 1. Seleziona il menu File e fai clic sulla voce Salva. La pagina verrà salvata con lo stesso nome, nella stessa cartella e sostituita alla precedente (figura 4.20). Figura 4.20 Il percorso di menu 2. Per visualizzare un anteprima della pagina così come sarà visualizzata nel browser, seleziona dal menu File la voce Visualizza anteprima nel browser e se il browser settato è Internet Explorer fai clic sulla voce IExplore. In alternativa per accedere velocemente all anteprima puoi premere il tasto F12 sulla tastiera del tuo computer per visualizzare immediatamente la pagina nel browser (figura 4.21). Figura 4.21 Il comando Visualizza anteprima nel browser 81

10 CAPITOLO 04 Ecco come si presenta la pagina appena creata e visualizzata nel browser Internet Explorer (figura 4.22). Figura 4.22 Anteprima nel browser Il testo del paragrafo Dopo aver formattato opportunamente il titolo della pagina, continuiamo a formattare il restante testo modificando i paragrafi successivi. 1. Seleziona tutto il testo dei due paragrafi: per far ciò posiziona il cursore prima della parola Questo, fai clic e tenendo premuto il pulsante del mouse trascina il cursore fino all ultima parola come... (figura 4.23). 82 Figura 4.23 Selezione dei paragrafi

11 Gestione del testo 2. Nella finestra di ispezione Proprietà fai clic sulla freccia della casella Carattere e seleziona dal menu a discesa il carattere Arial (figura 4.24). Figura 4.24 Il menu dei caratteri 3. All apertura della finestra Nuova regola CSS fai clic sul pulsante OK (figura 4.25). Figura 4.25 La finestra Nuova regola CSS 4. Di default il testo è allineato a sinistra, per cambiarne l ordine utilizza i pulsanti di allineamento della finestra Proprietà, centra per esempio il testo nella pagina selezionando il pulsante Allinea al centro. 5. Manda a capo il testo MULTIMEDIALITÀ. Per fare ciò fai clic prima della parola MULTIMEDIALITÀ per posizionare il cursore in quel punto. Di seguito premi i tasti Maiusc + Invio per mandare a capo il testo dopo il cursore (figura 4.26). 83

12 CAPITOLO 04 Figura 4.26 Interruzione di riga nel primo paragrafo NOTA La combinazione dei tasti Maiusc + Invio crea un interruzione di riga mandando a capo il testo senza creare un nuovo paragrafo come invece avviene con il tasto Invio. Il testo continua quindi a mantenere la stessa distanza di riga del paragrafo. 6. Seleziona infine la parola MULTIMEDIALITÀ e modificane l aspetto per renderla più evidente rispetto al resto del testo. Seleziona il pulsante HTML presente nella finestra di ispezione Proprietà, quindi fai clic sul pulsante I per applicare un semplice corsivo (figura 4.27). Figura 4.27 Il pulsante Corsivo 7. Fai clic in una zona vuota della pagina per deselezionare il testo (figura 4.28). Figura 4.28 Il testo formattato 84

13 Gestione del testo 8. Salva la pagina e visualizza l anteprima nel browser (tasto F12) (figura 4.29). Figura 4.29 Anteprima nel browser NOTA È bene ricordare che è più semplice formattare un testo dopo averlo selezionato, piuttosto che scegliere prima la formattazione e poi digitare il testo, in quanto a fine inserimento di una porzione di testo con propria formattazione, si dovrà disattivare la formattazione precedente per non applicarla al resto del testo. Come abbiamo visto, la finestra di ispezione Proprietà permette di selezionare, specificare e assegnare al testo selezionato gli attributi di formattazione. Nell esempio proposto il breve testo inserito da tastiera e modificato per aspetto e posizione grazie a una semplice formattazione, è solo un facile esempio di ciò che Dreamweaver CS4 permette di fare. 85

14