DREAMWEAVER MX - DiUniTopatti/teaching/Dreamweaver1.pdf2 DREAMWEAVER MX I parte MATEC 2004-2005...

2

DREAMWEAVER MX

I parte

MATEC 2004-2005 Viviana Patti

Che cos'è Macromedia Dreamweaver? È un programma professionale per la progettazione e lo sviluppo di siti Web. Permette di programmare pagine Web avendo a disposizione sia un editor di testo che un editor visivo (WYSIWYG) in cui il testo e gli oggetti possono essere inseriti con facilità; rispetto ad altri editor HTML, come il Composer di Netscape, rende sempre possibile abbandonare la modalità di lavoro visuale e modificaredirettamente il codice HTML.

A differenza dei semplici editor HTML, Dreamweaver non fornisce solo strumenti per formattare documenti HTML, ma permette anche di controllare tutte le fasi dello sviluppo di un sito, dalla sua progettazione in locale, alla sua pubblicazionesu un web server; fornisce inoltre utili strumenti per la manutenzione giornaliera e l’eventuale gestione distribuitadel sito pubblicato.

Dreamweaver MX: Queste le principali novità rispetto alle precedenti versioni: rinnovata tecnologia dei fogli di stile (CSS); strumenti per la creazione di siti web dinamici (e non solo statici) con il linguaggio lato server preferito (ASP,JSP, PHP...); strumenti per la validazione del sito anche dal punto di vista dell'accessibilità.

3

Editor di testo Editor visivo WYSIWYG

Dreamweaver consente di costruire pagine web tramite un editorvisivo HTML WYSIWYG (What You See is What You Get), dove viene presentata un'approssimazione della pagina che verrà visualizzata sul browser. Si crea una pagina web inserendo testo e oggetti in modo intuitivo e il codice HTML corrispondente viene generato automaticamente. A differenza di altri editor consente sempre il passaggio alla scrittura manuale di codice HTML

Codifica manuale e editor WYSYWYG

In generale per scrivere un documento HTML è sufficiente utilizzare un semplice editor di testi ASCII, ovvero un’applicazione che produce un file che contiene soltanto testi, senza alcun codice di formattazione (ASCII standard ). Ad esempio se disponete di un sistema Windows potete usare il Blocco Note.

Tuttavia la progettazione di siti complessi richiede l’uso di strumenti più raffinati. Per questo sono stati sviluppati editor di progettazione visiva o What You See Is What You Get (WYSYWYG), che permettono di creare una pagina Web inserendo il testo e gli oggetti (grafici, multimediali, etc...) con facilità. Il codice HTML corrispondente viene prodotto automaticamente:quello di Dreamweaver si distingue per essere particolarmente pulito.

Anche utilizzando l’editor visivo più sofisticato, può essere necessario andare a programmare manualmente parti di documento per ottenere l’effettovoluto, modificando il codice HTML (e per fare questo è necessario conoscerel'HTML!). La precisione di controllo sul codice che si può esercitare con la scrittura manuale è a volte irrinunciabile.

Per questo in Dreamweaver viene offerta la possibilità di scegliere in ogni momento se sviluppare la pagina utilizzando un editor visuale o inserendoistruzioni HTML nel codice sorgente. In particolare è disponibile un editor visivo che offre una vista su un documento HTML molto simile a quella del browser. Ma in ogni momento è possibile passare a visualizzare e a modificare direttamente il codice HTML del documento (editor del codice). Ogni modifica apportata al documento nell’editor visuale si riflette nell’editor del codice e viceversa.

4

A livello di file system…

Gestione del sito: diverse viste

Struttura logico-gerarchica

Gestione complessiva del sito

A differenza dei semplici editor HTML, Dreameweaver (DW) fornisce oltre agli strumenti per formattare documenti HTML, anche degli strumenti per la gestione complessiva del sito, sicché ogni documento su cui si sta lavorando può essere visualizzato nel contesto più ampio del sito di cui fa parte.

In particolare, DW offre:

a) degli strumenti per la definizione/modifica della struttura di un sito a livello di file system, il che ha a che fare con la struttura fisica del sito, ossia con la collocazione delle pagine e del materiale del sito all’interno del file system dello sviluppatore

b) degli strumenti per la visualizzazione/modifica della struttura logico-gerarchica del sito, dove la struttura rappresentata è quella relativa ai collegamenti ipertestuali frai file che compongono il sito e alla struttura ad albero da essi definita una volta specificata come homepage una determinata pagina.

5

Fasi di sviluppo di siti Web

Progettazione in locale

Pubblicazione sul server

Manutenzione e gestione distribuita…

L’interfaccia di gestione del sito in Dreamweaver permette di verificare modificare e creare i collegamenti fra diversi file, il che risulta particolarmente utile durante la fase di sviluppo del sito in locale. Inoltre, incorporato nell’applicativo, abbiamo unclient FTP che permette di pubblicare il proprio sito in remoto su un server su cui si abbia a disposizione uno spazio web. Siccome sempre più rari sono i siti web progettati sviluppati e gestiti da un’unica persona, Dreameweaver comprende alcune caratteristiche per facilitare la collaborazione. In particolare la funzione di deposito/ritiro dei file permette ai membri del team di controllare chi sta lavorando su quale file e di evitare che i file siano erroneamente sovrascritti.

6

L’ambiente di lavoro

finestrella a schede

Finestra proprietà

Barra Inserisci

Finestra principale del documento

gruppi di pannelli

Interfaccia di Dreamweaver MX per Windows

L’interfaccia principale di Dreamweaver è molto simile a quella utilizzata dai principali software di grafica, che unisce al menu testuale della finestra principale una serie di barre degli strumenti e finestre di opzioni, dette pannelli, disposte sul bordo destro dello schermo. Queste ultime sono spesso organizzate in gruppi di pannelli, talvolta con un ordinamento a schedario .

La finestra principale mostra il documento HTML su cui si vuole/si sta lavorando.

Nella configurazione iniziale sulla sinistra si trova la Barra Inserisci che contiene strumenti per la creazione di vari tipi di oggetti, come immagini, tabelle, livelli, etc. In centro schermo si trova la finestra di ispezione proprietà che ci permetterà man mano di specificare le proprietà del testo e degli oggetti che inseriremo nella nostra pagina HTML .

Altre opzioni, informazioni, strumenti sono raggruppati in pannelli, a loro volta raggruppate in piccole finestre, visibili inizialmente sul lato destro dello schermo. È possibile spostare i pannelli da una finestrella ad un’altra.

Il raggruppamento proposto inizialmente da Dreamweaver può essere modificato a piacere spostando le finestrelle. Queste finestrelle possono essere chiuse; è possibile riaprirle dal menu Window.

7

L’ambiente di lavoro

apri/chiudi pannello

menu contestuale per spostare un pannello in un altro gruppo

Interfaccia di Dreamweaver MX: pannelli

Per aprire una finestra (gruppo di pannelli) fate clic sulla freccia accanto al nome del gruppo. Per nascondere la finestra fate nuovamente clic sulla freccia. I gruppi di pannelli possono essere chiusi; è possibile visualizzarli nuovamente all'occorrenza dal menu Window.

Il raggruppamento proposto inizialmente da Dreamweaver può essere modificato a piacere. È possibile spostare i pannelli da una finestrella ad un’altra selezionando il pannello da spostare e poi facendo click sul menu contestuale che vi offrirà di raggruppare il vostro pannello in un altro gruppo, di rinominareil gruppo di pannelli, etc.

8

Creazione di un sito in locale

File HTML: livello radice

Eventuali cartelle di archivioo materiale riusabile per la lavorazione

(modelli, etc)

cartella dei media contenente immagini, suoni video, etc.

cartella principale

Quando si vuole creare un nuovo sito web è necessario progettarne la struttura in modo preciso, per poter poi gestire il tutto con facilità.

Generalmente (regole di web design) la struttura di un sito Web consta di:

•la cartella principale (root): ogni elemento del sito su cui si lavora (pagine HTML, immagini, file audio...) deve stare su un'unica cartella sull'hard disk, la cartella principale locale (o root) del sito web. Questa cartella contiene il sito locale, o di sviluppo dove si costruisce e si collauda il sito, prima di pubblicarlo su un server web

• la/le cartella/e dei media contenenti immagini, suoni, video e così via;

• eventuali cartelle contenenti materiale di archivio o materiale riusabile per la lavorazione (modelli, etc.);

• un insieme di documenti HTML a livello radice che compongono il sito.

Dreamweaver permette di implementare questa struttura. Il punto di partenza e la creazione di una cartella sull’hard disk locale, che conterrà l’intero progetto comprensivo di eventuali sottocartelle.

9

Definire un nuovo sitoEsercizio 1

12

3

Esercizio 1: Definire un nuovo sito

Per creare un nuovo sito sezionare New Site dal menu Site: Site -> New Site;

Appare la finestra di dialogo Site Definition, che comprende varie opzioni per la definizione del nuovo sito. Selezionate il tab Basic per azionare il wizard di creazione guidata.

Passo 1: Specificate un nome a piacere per il vostro sito (es. viviana_site) ; con questo nome identificherete facilmente il sito in un’ipotetica lista di siti su cui state lavorando.

Passo 2: Creeremo un sito statico...

Passo 3: Selezionate sull'hard-disk la cartella che volete contenga i file che costituiscono il sito, facendo click sull’icona della cartella sulla destra del campo Local Root Folder, e dopo andando a cercare/selezionare la cartella prescelta. Notate che in generale potete

1) creare una nuova cartella che ancora non contiene pagine HTML dove andrete a archiviare i file sul disco fisso. Potete anche creare questa cartella con gestione risorse, predisponendo tutte le sotto-cartelle che avete ritenuto necessarie durante la fase di progettazione, eventualmente inserendo la grafica e gli elementi multimediali che intendete inserire nelle pagine del sito e poi selezionare la cartella in questa fase. Tutti i documenti HTML verranno costruiti con Dreamweaver dopo la fase di definizione del sito oppure… (continua)

10


4

5

6

Esercizio 1: …continua

oppure...

2) selezionare una cartella che contiene già un sito in via di costruzione e che fino ad ora avete sviluppato senza l’aiuto diDreamweaver.

Durante questo esercizio create una nuova cartella dw_vostrocognome. Una volta selezionata la cartella apparirà il percorso corrispondente.

Passo 4: Sospendete per ora il giudizio per quanto riguarda le opzioni relative al server web su cui andrete a pubblicare il sito, dal momento che lo ignorate ancora.

Passo 5: In questa finestra vi vengono riassunte le scelte compiute ai passi precedenti. Potete tornare indietro per operare delle modifiche o cliccare su Done per concludere

Passo 6: Al termine della creazione guidata vi viene visualizzata la finestra Site di gestione del sito.

11


Esercizio 2: Definire un nuovo sito

Il wizard di definizione guidata del sito fornisce a un utente inesperto un metodo semplice per impostare un sito web. Ma una volta diventati utenti esperti potreste trovare utile sfruttare le opzioni disponibili nella scheda Advanced (che peraltro è molto simile alla finestra di definisci sito a cui sono abituati gli utenti di Dreamweaver 4).

Passo 1: Per creare un nuovo sito sezionare New Site dal menu Site: Site -> New Site;

Appare la finestra di dialogo Site Definition, che comprende varie opzioni per la definizione del nuovo sito. Selezionate il tab Advanced.

Passo 2: Specificate per il vostro sito il nome viviana_site nel campo etichettato con Site Name; con questo nome identificherete facilmente il sito in un’ipotetica lista di siti su cui state lavorando.

Passo 3: Selezionate sull'hard-disk la cartella che volete contenga i file che costituiscono il sito, facendo click sull’icona della cartella sulla destra del campo Local Root Folder, e dopo andando a cercare/selezionare la cartella prescelta. Notate che in generale potete

1) creare una nuova cartella che ancora non contiene pagine HTML dove andrete a archiviare i file sul disco fisso. Potete anche creare questa cartella con gestione risorse, predisponendo tutte le sotto-cartelle che avete ritenuto necessarie durante la fase di progettazione, eventualmente inserendo la grafica e gli elementi multimediali che intendete inserire nelle pagine del sito e poi selezionare la cartella in questa fase. Tutti i documenti HTML verranno costruiti con Dreamweaver dopo la fase di definizione del sito oppure… (continua)

12


C:/dw_lezione1


oppure...

2) selezionare una cartella che contiene già un sito in via di costruzione e che fino ad ora avete sviluppato senza l’aiuto diDreamweaver.

Durante questo secondo esercizio cercate e selezionate la cartella dw_lezione1. Una volta selezionata la cartella apparirà il percorso corrispondente.

Passo 4: potete selezionare la cartella dove andrete a inserire le immagini.

Passo 5: Per ottenere prestazioni più rapide assicuratevi che l’opzione per l’uso della cache sia selezionata prima di dare l’OK e abilitatene la creazione della cache per il nuovo sito quando vi viene richiesto. L’uso della cache renderà più rapide alcune operazioni, come l’aggiornamento dei collegamenti quando muovete, rinominate o cancellate i file del vostro sito.

13

Altre opzioni di definisci sito

Opzioni per personalizzare le modalità di visualizzazione della mappa del sito e le informazioni relative ai file

Informazioni sul sito remoto dove si pubblicherà il sito ultimato e sul trasferimento file

comunicazioni

In tutto nella finestra di dialogo Site Definition sono presenti 8 opzioni per definire un nuovo sito. Nell’esercizio precedente cisiamo concentrati sulla prima, relativa alle specifiche locali del sito. Commentiamo le altre:

Sito remoto e trasferimento di file da locale a remoto:

Remote Info: tramite questa opzione è possibile inserire le informazioni relative al sito remoto in cui verrà pubblicato il proprio progetto una volta terminato. Per esempio sarà possibile specificare nome utente e password necessari ad abilitare il client FTP alla connessione al server web su cui si vuole pubblicare il sito.

Cloaking: si può desiderare che solo una parte dei file del sito locale siano trasferiti sul sito remoto. Si pensi alle librerie di oggetti e ai modelli: si tratta di materiale il cui scopo è quello di assistere il progettista nella creazione del sito in locale ma la loro utilità sul server web e nulla. L'opzione di mascheramento dei file (Cloaking) consente di attivare/disattivare il mascheramento su certi tipi di file identificati in base all'estensione o su cartelle.

Design Notes: l’opzione permette di mantenere ed eventualmente condividere informazioni sui file.

Site Map Layout: permette di definire e personalizzare le modalità di visualizzazione della mappa del sito

File View Columnes: permette di definire quali informazionisi desidera vengano visualizzate riguardo ai file del sito (es. ultima data di modifica, etc…)

14


Nuova cartella

Site Files: visualizzo il sito a livello di file system


A questo punto appare la finestra Site che mostra la porzione del file system contenente il vostro sito, e la sua eventuale struttura in cartelle e sottocartelle.

E’ possibile utilizzare questa finestra come finestra di gestione dei file del sito, per creare, cancellare, rinominare, spostare file e cartelle.

La creazione di nuove cartelle e di file avviene in modo analogoa quello utilizzato per gestire le risorse sul proprio hard-disk e cioè…

Passo 5: Seleziondo File -> New Folder dal menu principale (o dal menu contestuale che appare cliccando col pulsante destro del mouse), crea una nuova sottocartella video allo stesso livello di immagini, dove raccoglieremo i video da inserire nelle nostre pagine web.

Passo 6: la finestra può essere ora nascosta o chiusa. Nel caso la chiudiate potete riaprirla in ogni momento dal menu Site-> Site files.

15

Site View: local folder e remote site

Visualizzo il sito a livello di file system

Notate che questa modalità di visualizzazione è la stessa utilizzata dal client FTP che utilizzeremo più avanti per pubblicare le nostre pagine. Una volta stabilita la connessione col server che ospita il sito remoto, la lista dei documenti contenuti sul sito remoto apparirà a fianco di quella dei file locali e si potranno effettuare operazioni di caricamento/scaricamento e così via.

16

Map View

La modalità di visualizzazione Site Map fornisce una rappresentazione ad alto livello della struttura di un siti locale. La modalità è utilizzabile solo se si è definita una homepage nelle impostazioni del sito. Infatti la homepage appare come radice dell’ albero del sito. Al di sotto vengono visualizzati i collegamenti (sia a file locali che a siti remoti) presenti nella homepage.

In questa modalità è possibile gestire i file come nella modalità Site view (aggiungere, cancellare, rimuovere, cambiare i linkda una pagina all’altra.

17

Homepage e mappa del sitoEsercizio 2

Site Map

Definisci un documento HTML come homepage

Ci sono diversi modi per definire una homepage. Il modo più semplice è usare il menu contestuale della finestra Site.

Esercizio 2: Definizione della homepage e map view

Passo 1: Rendi attiva la finestra Site. Se è chiusa rendila visibile utilizzando il menu Window > Site Files.

Passo 2: Nella finestra Site, nella zona dove appaiono le cartelle e i file del sito seleziona il file HTML che vuoi trasformare inhomepage del sito: indice.htm.

Passo 3: Seleziona l’opzione Set as homepage dal menu contestuale che si apre cliccando con il pulsante destro del mouse.

Passo 4: Fai clic sull’icona site map per passare alla visualizzazione della mappa del sito (Puoi scegliere fra solo mappa e mappa e files) .

18

Mappa del sitoEsercizio 2

File dipendenti

titolovs

nome file

…continua

Passo 5: Configurare la visualizzazione in modo che venga mostrato in alternativa al nome del file il suo titolo (tag title).

View -> Show Page Titles.

Passo 6: Configurare la visualizzazione in modo che vengano mostrati anche i collegamenti ad altri file non HTML (es. file di immagine: View -> Show Dependent Files.

19

Mappa del sito: simbologia

Doppio clic sul documento locale per aprirlo nella finestra documento

Un po’ di simbologia:

• Nome del file scritto in rosso: il documento contiene uno o più collegamenti interrotti

• Nome del file scritto in blu: link a un documento esterno al sito, ad esempio un altro sito o un indirizzo di posta elettronica

• Lucchetto: il file è di sola lettura

I segni di spunta indicano lo status di modifica del file. Vengono visualizzati solo qualora il progetto sia svolto da più persone.In particolare:

• Segno di spunta verde: il file è aperto in locale;

• Segno di spunta rosso: il file è aperto da qualche altro membro del team

20

Creazione di una pagina web

Ora che abbiamo definito la struttura del sito, andiamo a vederecome usare l’editor di Dreamweaver per costruire/modificare una nuova pagina HTML.

Creeremo una nuova pagina da collegare poi a quelle esistenti. Impareremo a definire le proprietà principali di una pagina, ad aggiungere testo, immagini, elementi multi-mediali, link ad altre pagine.

Se non sono già aperte, apriamo prima di cominciare l’esercizio

• la barra Insert,

• la finestra di ispezione proprietà: Properties,

• la finestra relativa alle Risorse del sito: Assets.

21

Code view e design view

editor sorgente: codice

editor visuale: progettazione

editor “misto”: dividi

E’ possibile visualizzare e modificare le pagine HTML in 3modalità diverse:

• Show code view: visualizza il codice del documento

• Show Design View: visualizza il layout del documento, in una modalità simile a quella di un normale editor di testo.

• Show code and design view: visualizza in un pannello doppio entrambe le modalità (editor misto in figura).

22

Visualizza anteprima su browser

Anteprima sul browser e design view

Notate che nonostante l’editor visuale di DW sia molto avanzato e mostri la pagina quasi come si presenta sul browser ci sono delle limitazioni. Per vedere come si presenta la pagina e, per esempio, provare il corretto funzionamento dei collegamenti o visualizzare il movimento di una gif animata, dovremo utilizzare l’anteprima su browser selezionando il browser che ci interessa per l’anteprima (Explorer o Netscape).

Per selezionare il browser da usare per l’anteprima aprire il menu a tendina relativo al pulsante con l’icona del mondonella barra principale degli strumenti (evidenziato in figura). Cliccare sul browser desiderato.

23

Le proprietà generali Esercizio 3

Esercizio 3: Le proprietà generali: il titolo, i meta-tag, lo sfondo, il colore del testo, il colore dei link

Passo 1: Selezionate il documento vuoto apertosi al momento del caricamento di Dreamweaver e visualizzatelo con l'editor misto.

Osservate il codice HTML generato da DW prim'ancora di qualsiasi nostro intervento

Passo 2: Salvate il file selezionando File > Save. Nella finestra di dialogo Save As selezionare la cartella dw_lezione1 e salvare lì il file chiamandolo galleria.htm (livello radice).

24

Le proprietà generali Esercizio 3

Immagine dibackground

Storie di s. Nicola: galleria di immagini

Esercizio 3: Le proprietà generali: il titolo, i meta-tag, lo sfondo, il colore del testo, il colore dei link

Passo 3: Aprire la finestra di dialogo per specificare le proprietà generali della pagina selezionando Page properties dal menu Modify.

Passo 4: Specificare il titolo della pagina (Storie di s. Nicola: galleria di immagini, il colore di background (scegliamo il blu dalla tavolozza dei colori web safe), il colore del testodei link già visitati (a piacere).

Notate che potete caricare come sfondo un’immagine di uno dei formati supportati da Dreamweaver (ossia GIF, JPEG, PNG, vedi più avanti).

25

Scelta dei colori

Tavolozza completa

Tavolozza dei colori Web Safe

Fig 1: finestra di dialogo Color

Fig 2: finestra Assets(Risorse), categoria colori del sito

menu contestuale

I colori

I colori possono essere modificati immettendo direttamente il valore in esadecimale o aprendo la tavolozza dei colori (fig. 1). Una volta aperta la tavolozza dei colori il mouse prende l’aspetto di un contagocce che permette di selezionare un colore della palette. Inizialmente vengono proposti solo i colori sicuri per il web (web safe), ossia quei colori che tutti i browser NN e IE sia PC che MAC sono in gradi di riprodurre. Volendo scegliere altri colori, si può cliccare sul pulsante apposito, evidenziato nell’immagine che permette di visualizzare la tavolozza completa. E’ anche possibile selezionare con il contagocce un colore qualsiasi presente sullo schermo, muovendo il mouse/contagocce sul desktop e cliccando sul colore prescelto.

La voce Colors della finestra Assets (fig. 2) elenca i colori utilizzati nel sito e le loro caratteristiche. Può essere utile per vedere immediatamente quanti colori sono stati utilizzati nel sito e se sono Web safe o no. Ovviamente tali colori possono essere selezionati muovendo il contagocce sulla finestra.

Esercizio 3

Passo 5: visualizzate ora i colori del sito dalla finestra Assets (refresh site list se occorre)

26

La finestra Page Properties e l’HTML

Il comando BODY ha della opzioni (ATTRIBUTI) che permettono di stabilire lo stile dei caratteri e in particolare: colore, …

<BODY BGCOLOR="colore sfondo"TEXT="colore testo"BACKGROUND="pathname del file con

immagine per lo sfondo"LINK="colore link da visitare" VLINK="colore link visitati"

>

…<HEAD><TITLE>Storie di s. Nicola: galleria di immagini</TITLE></HEAD>…

La specifica dei valori e dei dati appena data nella finestra Page Properties corrisponde alla specifica di un titolo per il nostro documento (tag TITLE annidato in HEAD) e degli attributi fondamentali del del tag BODY, relativi al colore/immagine dello sfondo del documento, al colore del testo e ai colori dei collegamenti da visitare.

27

La finestra Page Properties

28

Page properties Esercizio 4

Esercizio 4

Dalla finestra Site selezionate il documento indice.htm.

Passo 1: applichiamo gli stessi colori per quanto riguarda le proprietà della pagina applicati nel caso di galleria.htm. Usiamo il contagocce e selezioniamo i colori dalla finestra Assets

29

Immissione e modifica del testo

Fig 1: finestra proprietà per il testo

Fig 2: formattazione predefinita a paragrafi

In generale la finestra principale è una pagina nella quale è possibile inserire subito del testo, anche incollandovi appunti da un’altra applicazione.

La formattazione predefinita del testo è a paragrafi (Paragraph). Questo significa che premendo INVIO si crea un nuovo paragrafo (<p>, vedi fig.2). Il ritorno a capo normale (<br>) si ottiene digitando MAIUSC + INVIO (come anche in Microsoft World).

Una volta inserito del testo, le sue proprietà sono specificabili attraverso la finestra Property (fig. 1) o attraverso le opzioni del menu principale Text.

30


titoli

HEADERS: permettono di indicare quali parti di testo vengono usate come titoli

<H1> titolo1 </H1>...<H6> titolo6 </H6>

OSSERVAZIONE: H1, ..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli

HEADERS: permettono di indicare quali parti di testo vengono usate come titoli

<H1> titolo1 </H1>...<H6> titolo6 </H6>

OSSERVAZIONE: H1, ..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli

Specificare la formattazione del testo tramite la finestra properties:

Una volta selezionato una parte di testo del documento, possiamo definirla come titolo scegliendo fra i vari header disponibili nel menu a tendina del campo Format (H1, …, H6).

31


<FONT size=“5” color="red" face=Courier>Questo testo viene visualizzato in rosso, ha dimensione 5 e font Courier</FONT>

face color

size

Stili fisici

<B> testo </B> testo in grassetto

<I> testo </I> testo in corsivo

Align =Left | right| center

Specificare la formattazione del testo tramite la finestra properties

Altre caratteristiche di formattazione che possono essere specificate sono quelle che corrispondono agli attributi principali del tag <FONT>: il tipo di carattere (FACE), la dimensione assoluta o relativa del carattere (SIZE), il colore del carattere (COLOR).

E’ possibile inoltre definire lo stile del carattere (grassetto, corsivo), il che corrisponde ad associare uno stile fisico al testo selezionato. Altri stili (es. sottolineato) sono specificabili mediante le opzioni della voce Text del menu principale. E’ infine possibile definire l’allineamento del testo rispetto alla pagina (centrato | allineato a sinistra | allineato a destra).

32


header 2, centrato, Verdana

Esercizio 4

Passo 2: selezionate la parola biografia prima del paragrafo contenente le informazioni bibliografiche sul beato angelico e tramite la finestra proprietà applicategli come formattazione H2, tipo di font Verdana e allineamento centrato.

fate lo stesso con gli altri titoletti del documento: le opere; storie di s. nicola di bari, link utili

33

Barra Insert e Commenti

• Può essere utile inserire nel documento dei commenti che non sono visualizzati dal browser



Il browser IGNORA qualsiasi testo racchiuso all’interno di questo tag: il commento non viene visualizzato sulla pagina dal browser MA può essere letto quando si chiede al browser di visualizzare il codice sorgente.

Inserisci commento

Vista Codice

Vista Progettazione

Esercizio 4

Per inserire nel testo dei commenti dell’autore che non vengano visualizzati dal browser in HTML utilizziamo i tag rispettivamente di apertura e chiusura .

Per inserire un commento in Dreameweaver utilizziamo la barra Insert facendo clic sull’icona Insert Comment (categoria Common). Nella finestra di dialogo Insert commentdigitiamo il testo che vogliamo venga commentato e clicchiamo su OK. Nell’editor visuale apparirà una piccola icona con un punto esclamativo laddove è stato inserito il commento. Cliccando sul simbolo potremo in ogni momento rivisualizzare/modificare il commento.

Passo 3: Inserite in cima al documento il commento: Questa è una pagina di prova

34

Linee orizzontali

• Per separare parti di testo si può usare il comando <HR> che crea un filetto orizzontale nella pagina Web ______________________________________________

Questo comando ha quattro attributi per specificare modo in cui la linea si presenta sullo schermo:

<HR size=numero {spessore in pixel}width=numero | numero% {lunghezza in pixel

o in percentuale rispetto a lunghezza schermo}align={left | right | clear} {posizione}noshade {elimina effetto tridimensionale}

>

Inserisci linea orizzontale

Per separare parti di testo possiamo utilizzare il tag <HR>(horizontal rule) che inserisce nel documento una linea orizzontale per cui possiamo specificare spessore, larghezza, allineamento rispetto al documento, effetto tridimensionale.

In Dreamweaver possiamo inserire una linea orizzontale andando a cliccare sul pulsante Insert Horizontal Rule(evidenziato in figura) della barra degli oggetti, categoria Common. Le varie caratteristiche della linea (attributi di HR elencati in figura) possono poi venire definite tramite la finestra Property.

Se volete specificare la larghezza in percentuale è sufficiente che selezioniate il simbolo % come in figura e quindi digitiate nel capo W il valore numerico della percentuale.

35

Linee orizzontali

Verdana, giustificato, size=2

paragraph, Verdana, centrato

<hr align="center" width="50%" size="3" noshade>

Esercizio 4

center

Esercizio 4: continua...

Passo 4: definire le proprietà della barra attraverso la finestra properties come specificato in figura. Essenzialmente in questo modo specifico valori per gli attributi fondamentali del tag HR.

36

Edit Tag

<hr align="center" width="50%" ... color="#FFFFCC">

Esercizio 4

Esercizio 4: continua...

Supponiamo adesso di volere aggiungere l'informazione sul colore della barra. Fra quelli specificabili per HR dalla finestra proprietà non compare nessun attributo che mi consente di specificare questo aspetto.

Passo 5: apriamo la finestra di ispezione del tag per vedere se esiste qualche attributo per il tag HR che fa al caso nostro. Posizioniamoci col cursore in vista codice nel campo di HR (in alternativa si può selezionare la barra in vista progettazione) e dal menu contestuale selezioniamo Edit Tag pewr aprire la finestra di ispezione del tag.

Passo 6: Visualizziamo la lista degli attributi proprietari di browser: troviamo che il colore della barra può essere specificato attraverso il tag color; ATTENZIONE: si tratta di un attributo proprietario decodificabile solo da un browser specifico, ossia Explorer. Altri browser come ad esempio Netscape ignorano le informazioni specificate per questo attributo.

Passo 7: specificate per la barra il colore FFFFCC e lanciate l'anteprima sia su Explorer sia su Netscape per vedere la differente visulaizzazione

Passo 6: ispezionate la finestra tag editor

37

Liste di elementi

fig. 3elenco non ordinatoelenco ordinato

rientro a sx del testo

rientro a dx del testo

Esercizio 5.1

In Dreamwever possiamo creare elenchi ordinati, elenchi non ordinati e liste di definizioni. In particolare possiamo creare un elenco ex novo o convertire un testo esistente in un elenco. E' possibile inoltre realizzare delle liste annidate ossia delle liste di voci che sono a loro volta organizzate in liste (vedi fig. 1).Vediamo come creare ex novo l'elenco indicato in figura 1.

Esercizio 5.1 Creare elenchi

Passo 1: Trasformate le due voci sotto il titolo storie di s. nicola in in un elenco puntato e specificate per l'elenco lo stile square (quadratino).

38

Elenchi annidati

Text -> List

fig. 2

fig. 3elenco non ordinatoelenco ordinato



Esercizio 5.2

fig. 1

E' possibile inoltre realizzare delle liste annidate ossia delle liste di voci che sono a loro volta organizzate in liste (vedi fig. 1).Vediamo come creareex novo l'elenco indicato in figura 1.

Esercizio 5.2 Creare elenchi annidati

Selezionate la pagina vuota galleria.htm e fate il seguente esercizio che poi cancelleremo

Passo 1: selezionare dal menu principale Text -> List la voce che corrisponde al tipo di lista che si vuole creare, Unordered list (fig. 2).

Passo 2: dalla finestra proprietà cliccare sulla voce List item (fig. 3) per visualizzare la finestra di dialogo relativa alle proprietà dell'elenco puntato. Selezionate come stile dell'elenco square. Fate clic su OK e digitate la voce laurea triennale e andate a capo.

Passo 3: Viene inserito automaticamente un nuovo punto. Per inserire la sottolista numerata cliccate sul pulsante rientro a dx del testo. Poi specificate che volete una lista ordinata cliccando sul pulsante Elenco Ordinato della finestra proprietà. Nella finestra List properties specificate il tipo di ordinamento alphabeth small.

Passo 4: digitate la voce impresa della sottolista (fig.1).Andate a capo e automaticamente verra' inserito il secondo punto della lista. Digitate la seconda voce (massa) e andate nuovamente a capo.

39

fig. 2

per chiudere una lista

Liste di elementi

doppio invio

elenco non ordinatoelenco ordinato



Esercizio 5.2

fig. 1

...continua

Passo 5: Riselezionate l'opzione lista non ordinata (pulsante Elenco non ordinato della finestra proprieta') e per tornareal livello della lista principale fate clic sul pulsante della finestra proprietà Rientro a sx del testo. Digitate la seconda voce (laurea specialistica) della lista principale.

Passo 6: Continuate da soli l’esercizio e ricordate che alla fine per chiudere un elenco occorre cliccare 2 volte su INVIO. Dovrete quindi dare il doppio invio 2 volte: una volta per chiudere la sottolista numerata con gli indirizzi del diploma, un’altra volta per chiudere l’elenco puntato principale.

40

Immagini

Formati immagine supportati

I formati d’immagine

I formati di immagine che è possibile inserire in un documento HTML sono principalmente il JPEG, sviluppato dal Joint Photographic Experts Group e il GIF (Graphics Interchange Format). E’ accettato anche il formato PNG (Portable Network Graphics), il nuovo formato raccomandato dal W3C per la presentazione di immagini di qualità in Internet. Questo formato offre compressione senza perdita, come il GIF, ed è in grado di comporre milioni di colori come il JPEG. Inoltre offre un supporto della trasparenza molto superiore rispetto agli altri due formati.

Notate che Dreameweaver permette di visualizzare le immagini PNG inserite nella finestra del documento allo stesso modo delle immagini GIF o JPEG ma il nuovo formato non è supportato da tutti i browser (prima delle versioni 4.0 i vari browser supportavano PNG solo tramite plug-in e tuttora Internet Explorer per MAC non supporta il formato).

41

Immagini

1. Definire una cartella delle immagini all’interno del sito corrente

2. Salvare il documento all’interno del sito prima di inserire le immagini

La localizzazione del file immagine

Quando vogliamo inserire un’immagine in un certo documento definito come parte di un sito in Dreamewaver è buona regola che questa sia contenuta in una cartella all’interno della directory del sito. Infatti se cercate inserire un’immagine che si trova altrove nel vostro file system, l’applicativoDreameweaver visualizza un messaggio dove vi viene chiesto se volete creare una copia dell’immagine all’interno del sito.

Consiglio: per sfruttare pienamente le funzioni di gestione del sito in Dreameweaver è buona regola:

1. definire una cartella delle immagini all’interno del sito su qui si sta lavorando e

2. salvare il documento corrente all’interno del sito prima di cominciare a inserire le immagini.

42

Inserire Immagini

Formato URL inseririto nel codice

Fig 2: La finestra di dialogo per la selezione del file di immagine

Fig 3: La finestra Risorse del sito

Fig 1: Inserisci immagine

Miniatura

Per inserire un’immagine statica nei formati sovraindicati o una gif animata potete

• scegliere dal menu principale Insert -> Image oppure

• dalla barra Insert selezionare il pulsante Insert Image (fig. 1)

Viene aperta la finestra di dialogo Select Image Source (fig. 2) che vi permette di selezionare il percorso o l’indirizzo del file di immagine. Per visualizzare in anteprima un’immagine prima di caricarla assicuratevi che l’opzione Preview Images sia contrassegnata da un segno di spunta. Nel codice sorgente verrà inserito l’URL indicato nel campo URL (fig. 1). Se 1)avete salvato la pagina Web all’interno del sito prima di inserire l’immagine e 2) quest’ultima si trova nell’interno della cartella principale del sito, verrà automaticamente inserito un indirizzo relativo al documento. Se una delle due condizioni non è soddisfatta Dreamweaver inserisce il prefisso file:///C: e l’indirizzo assoluto che individua la posizione del file all’interno dell’intero file system. Questo vi può causare molti problemi in fase di pubblicazione del sito dove le immagini potrebbero apparire come collegamenti interrotti quindi cercate di evitarlo.

In alternativa potete inserire un’immagine trascinando una miniatura o un nome di file dalla finestra Assets delle Risorse del sito (categoria immagini cerchiata in rosso, fig. 3) alla finestra documento.

43

Proprietà delle immagini

<IMG SRC=pathname o URL dell'immagineALIGN=left | right | centertop | bottom | middle | absmiddletextop | baseline | absbottom{le ultime voci servono per controllare

l'allineamento con il testo} ALT=text{testo alternativo all'immagine}BORDER=numero{larghezza in pixel del bordo}HEIGHT=numero{altezza in pixel}WIDTH=numero{larghezza in pixel}HSPACE=numero{spazio in pixel a destra e sinistra dell'immagine}VSPACE=numero{spazio in pixel sopra e sotto l'immagine}ISMAP

>

<IMG SRC=pathname o URL dell'immagineALIGN=left | right | centertop | bottom | middle | absmiddletextop | baseline | absbottom{le ultime voci servono per controllare

l'allineamento con il testo} ALT=text{testo alternativo all'immagine}BORDER=numero{larghezza in pixel del bordo}HEIGHT=numero{altezza in pixel}WIDTH=numero{larghezza in pixel}HSPACE=numero{spazio in pixel a destra e sinistra dell'immagine}VSPACE=numero{spazio in pixel sopra e sotto l'immagine}ISMAP

>

Fig 1: La finestra proprietà e gli attributi di IMG

miniatura

Allineamento rispetto alla paginaCollegamento a un file/indirizzo web

Una volta inserita un’immagine in Dreamweaver, il tag <IMG> viene inserito nel codice HTML del documento.

Tenendo l’immagine selezionata, attraverso la finestra Properties (fig. 1) è possibile accedere alle proprietà dell’immagine, per specificare l’allineamento rispetto al testo (Align), le dimensioni (Width e Height), gli spazi vuoti attorno all’immagine (V Space, H Space) l’eventuale collegamento a un altro file (Link), assegnare un titolo all’immagine (Alt), inserire attorno all’immagine un bordo rettangolare (Border) etc. La specifica di tali proprietà corrisponde nella maggior parte dei casi alla specifica dei diversi attributi che è possibile assegnare al tag <IMG>.

Per completezza ecco il significato del campo Low Src (Preorig) (non c'è corrispondenza con alcun attributo di IMG.

Low Src (Preorig): permette di specificare l'immagine che deve essere caricata prima di quella principale. Molti Web designer usano una versione a 2 bit (bianco e nero) dell'immagine principale perché viene caricata rapidamente e dà ai visitatori un'idea dell'immagine principale quasi immediatamente, prima della fine del caricamento dell'immagine vera e propria.

44

Proprietà delle immagini

Inserisci annunciazione.jpg da Assets

ridimensiona e centra

Esercizio 6.1

center

Esercizio 6.1:

Passo 1: Aprite la finestra delle risorse, seleziona il file di immagine annunciazione.jpg e trascinalo al centro pagina di indice.htm subito sopra il menu degli argomenti

Passo 2: Ridimensionate l'immagine rimpicciolendone in proporzione altezza e larghezza e attribuitele allineamento centrato.

45

Inserisci una gif animata

file:galleria.htm

inserisci una gif animata: fish.gif

Esercizio 6.2

Esercizio 6.2

Passo 2: Apri il file galleria.htm e inserisci in cima alla pagina al centro la gif animata fish.gif. Nota che nella vista progettazione l'immagine risulterà statica. Per avere l'anteprima dell'animazione: File -> Anteprima -> Explorer.

46

Creare collegamenti

http://www.di.unito.it

a) Casella di testo del campo collegamento: digitare l’ URL (doc. locale o remoto)

b) Icona Select File: selezionare il file

c) Icona Point to File: trascinare il mirino sul file della finestra Sito

Finestre sovrapposte

Un collegamento ipertestuale (link) si associa a un oggetto che puòessere una parola o una frase del documento HTML, un’immagine che funge da pulsante di navigazione o una sezione di un’immagineopportunamente mappata (di solito una grande immagine le cui parti sono associate a diversi collegamenti. L’utente facendo click col mouse su queste zone dello schermo (dette anche zone calde) può: saltare a un’altra parte del documento HTML; accedere a un altro documento HTML nello stesso sito web; accedere a un documento HTML che si trova in un altro sito del WWW.

Per associare un collegamento (link) a un oggetto in Dreamweaver èsufficiente selezionare l’oggetto che funge da pulsante o parola calda e poi utilizzare uno dei seguenti metodi:

1) scegliere dal menu principale Modifiy ->Hyperlink -> Make Link(CTRL+ L) e selezionare il file a cui il collegamento deve riferirsi;

2) Nel campo Link della finestra Proprietà dell’oggetto:

a) Digitare direttamente l’URL nella casella di testo (es. http://www.di.unito.it; maito:[email protected], etc…) oppure

b) Selezionare l’icona con la cartella a fianco della casella di testo e attraverso la finestra Select file oppure

c) Dopo avere scelto per la finestra documento la modalità finestre sovrapposte, trascinare il mirino della finestra proprietà (icona Point to file) sulla pagina HTML locale a cui ci si vuole collegare (se questa è aperta in quel momento in una finestra documento) o sul nome della pagina nella finestra Sito.

47

Creare collegamenti

file: indice.htm

oggetto immagine: link a sito esterno http://www.di.unito.it e target=blank

Esercizio 7.1

Esercizio 7.1

Passo 1: selezionate l'immagine dell'annunciazione e nell'area collegamento digitate l'URL di un collegamento esterno al sito, ad. es. http://www.di.unito.it.

Passo 2: Trattandosi di un link esterno al sito, selezioniamo il target blank; in questo modo specifichiamo che il collegamento specificato nel campo link venga aperto in una nuova finestra del browser.

48

Creare collegamenti

indice.htm

mailto:[email protected]

Esercizio 7.1

link a snicola.htm: <a href="snicola.htm">

Esercizio 7.1 ...continua...

Passo 3: Sempre su indice.htm proviamo a inserire ora un link a una pagina interna al sito. Selezionate la frase Storie di s. nicola e fate clic sull'icona della cartella.

Passo 4: Selezionate il file snicola.htm (il percorso a partire dalla cartella principale viene visualizzato nell'area link).

Passo 5: A fondo pagina inserite la frase "Per ulteriori informazioni spedisci una mail a VOSTRO_NOME_COGNOME". Allineate il tutto a dx. Selezionate il vostro nome e cognome e nel campo link inserite un collegamento al vostro indirizzo e-mail (nell'esempio:mailto:[email protected])

49

Inserire Ancore

Fig. 1

Fig. 2

Valori speciali di target

Fig. 3Insert Anchor

Fig. 4

sorgente:

editor visuale:

<a name="bio">Biografia</a>

Ancore

Quando create un collegamento in Dreamweaver, nel codice HTML la coppia di tag di ancoraggio <A></A> circonda il testo o l’oggetto grafico che avete collegato. L’URL che avete specificato appare come valore dell’attributo necessario di <a> HREF (Fig 1). Creando un collegamento, qualora si utilizzi una struttura a frame, è utile decidere in quale frame si vuole aprire il collegamento, ossia specificare un certo valore per l’attributo TARGET di <A>. In Dreamweaver questo è possibile selezionando uno dei valori speciali di target nel menu a tendina del campo target, finestra Proprietà (Fig. 2) o digitando il nome del frame destinazione nella casella di testo del campo target.

Con il comando <A> è anche possibile etichettare un punto di un documento con un nome (una label o ancora) e quindi saltare direttamente a quel punto grazie ad un link. L’attributo NAME di <a> viene utilizzato per etichettare la sezione: <A name="nomelabel">testo a cui saltare</A>. In Dreamweaver le ancore sono oggetti invisibili (come i commenti) e possono essere inseriti posizionandosi col cursore nel punto del documento dove si vuole inserire l’ancora e o poi selezionando l’icona Insert Named Anchor della barra degli oggetti, categoria Invisible (CTRL + ALT + A). E’ indispensabile attribuire un nome all’oggetto ancora creata tramite l’opportuna finestra di dialogo (fig.4 sx.).

Notate che in generale i collegamenti non sono attivi nella finestra documento di Dreamweaver dove pure appaiono sottolineati o preceduti dal simbolo dell’ancora. Per provarne il funzionamento occorre visualizzare il documento in anteprima sul browser.

50

Inserire Ancore

aggiungi ancore e link alle ancore

file:indice.htm

Esercizio 7.2

Esercizio 7.2

Sul file indice.htm

Passo 1: definite ancore per le quattro sottosezioni del documento

Passo 2: inserite per le 4 voci del menu collegamenti alle rispettive 4 ancore, usando la seguente sintassi: #nomeancora

51

Inserire Ancore

aggiungi ancore...

Esercizio 7.2

file:snicola.htm

...e link alle ancore

vaticani

umbria

file:indice.htm

snicola.htm#umbria


Sul file snicola.htm

Passo 3: definite ancore per le due sottosezioni del documento (nomi delle ancore: vaticani e umbria ripettivamente).

Passo 4: inserite per le 4 voci del menu collegamenti alle rispettive 4 ancore, usando la seguente sintassi: #nomeancora

Sul file indice.htm

Passo 5: inserire per le voci dell'elenco puntato della sezione Storie di S. Nicola il link alle sezioni corrispondenti del file snicola.htm.

52

Map view


Passo 6: Visualizzate ora la mappa del sito.

DREAMWEAVER MX - DiUniTopatti/teaching/Dreamweaver1.pdf2 DREAMWEAVER MX I parte MATEC 2004-2005...

Documents

Transcript of DREAMWEAVER MX - DiUniTopatti/teaching/Dreamweaver1.pdf2 DREAMWEAVER MX I parte MATEC 2004-2005...