Manuale Dreamweaver 8.0 Italiano

Primo Passo: Definire il Sito

8.Definire lo spazio di lavoro: il Sito Locale La prima volta che viene lanciata l'applicazione, Dreamweaver chiede all'utente di creare il sito locale Questo programma offre un vero ambiente integrato di sviluppo e pubblicazione: oltre al compilatore per tutto il codice di cui sono composti i documenti, Dreamweaver incorpora un'interfaccia di gestione del sito che permette di verificare, modificare e creare i collegamenti fra i diversi files. Inoltre esso integra una praticissima funzione FTP per la pubblicazione diretta su di un server web cui si abbia accesso, ovvero per il quale si possieda un identificativo utente e relativa password. La prima volta che viene lanciata l'applicazione, Dreamweaver chiede all'utente di creare il sito locale. Anche in seguito sarà comunque necessario definire un sito locale, ovvero una cartella sul proprio hard disk, dove risiederà il progetto che verrà creato. Per fare ciò selezionare Open Site dal menu File e scegliere il comando Define Sites, poi scegliere fra quelli già presenti nella lista il sito locale sul quale si andrà ad operare o cliccare su New per crearne uno nuovo. Gli utenti Macintosh accedono a queste funzione scegliendo DefineSites dal menu Site. Sulla sinistra della finestra di dialogo che verrà aperta saranno elencate quattro opzioni fra cui va selezionata Local Info, di default quando si crea un nuovo sito. Le altre opzioni riguardano rispettivamente la scelta del tipo di connessione da usarsi per il trasferimento dei documenti ad un server remoto (Web Server Info), le operazioni di trasferimento cui sono sottoposti i documenti per essere modificati (Check In/Check Out), e la possibilità di definire una Home Page o pagina iniziale per il sito (Site Map Layout) oltre ai parametri di visualizzazione della "mappa sito". Per default viene definito come home page il file index.htm o index.html se esistente, è comunque necessario aver definito una home page per accedere ad una particolare modalità di visualizzazione del sito detta appunto Site Map. Va ora definita nella sezione Local Info la posizione sul disco fisso ove intendiamo registrare il nostro sito, inserendo il percorso nel campo denominato Local Root Folder oppure cliccando sull'icona della cartella per scegliere o creare questa directory nella posizione che si ritiene più opportuna.. Per quanto riguarda il sito locale, è richiesta ancora solo la definizione del nome che si intende assegnare al sito. L'importanza di questa operazione risiede nel fatto che il programma utilizza questo nome per identificare il sito ed è quindi indispensabile scegliere un nome che sia al contempo descrittivo ed esclusivo. Nel campo Site Name inserire quindi il nome prescelto. I due campi rimanenti indicano opzioni di gestione dei collegamenti che il programma usa per velocizzare l'aggiornamento dei collegamenti e si tratta di opzioni che non è necessario attivare nel caso di un sito locale, presente solo sul proprio hard-disk. Avendo a gestire un sito posto su un server web remoto, si inserirà l'URL completo della propria home page nel campo HTTP Address e si selezionerà la casella di opzione Cache per permettere a Dreamweaver di creare una memoria cache che sarà utilizzata in caso di cambiamenti per accelerare l'aggiornamento dei collegamenti fra files all'interno del sito. Abilitare questa ipotesi permette di velocizzare le operazioni della Site Map; quando si sceglie questa modalità di visualizzazione verrà richiesto di creare una cache (o memoria temporanea) per ottimizzare la gestione del sito nel suo insieme ma se le risorse sul proprio computer sono molto limitate non è vincolante accettare.

9.Site View: predisporre la struttura del sito La finestra di dialogo alla modalità di visualizzazione Site View

Una volta definito ove sarà ubicato il sito e quale sarà il suo nome, scegliendo OK si passa direttamente dalla finestra di dialogo alla modalità di visualizzazione Site View In questa sede è possibile creare delle cartelle (directory) per tenere in ordine i vari tipi di documenti che compongono il lavoro, ed anche i documenti stessi. . Non esistono ovviamente regole in merito ma è buona norma tenere i documenti separati creando ad esempio una cartella per le immagini, una per i files HTML, eventualmente una ove conservare files temporanei ed altri elementi che si rendessero necessari durante la realizzazione del siti ed ogni altra cartella sia necessaria od utile per l'organizzazione del sito o la sua lavorazione. Bisogna solo tenere in mente che il web-master, ed anche chi eventualmente gli succederà nella manutenzione del sito, sia in grado di accedere con facilità ad ogni dato documento. La creazione di nuove cartelle avviene con modalità analoghe a quelle che si adoperano in genere per "gestire le risorse" sul proprio hard-disk e cioè sia selezionando New Folder dal menu File che scegliendo l'opzione New Folder dal menu contestuale che appare agendo sul tasto destro del mouse. In modalità Site View si possono anche creare dei nuovi files scegliendo l'opzione corrispondente New File dal menu contestuale o dal menu File: verranno creati dei documenti HTML vuoti che è possibile utilizzare come segnaposto per successiva lavorazione. Questo è il tipo di visualizzazione adottato durante operazioni di traferimento e gestione remota di file: le operazioni sono analoghe ai più diffusi programmi FTP, quindi una volta stabilita la connessione, la lista dei documenti contenuti nel sito remoto apparirà a fianco di quella dei file locali e si potrà procedere a quelle richieste fra le consuete operazioni di modifica, caricamento, scaricamento, etc.

10.Site Map: il sito visto dall'alto Permette delle operazioni sui file di un sito presente sul proprio hard-disk Quando ci si trova in modalità Site View e si sono già creati alcuni documenti è possibile visualizzare o creare una struttura di collegamenti che li unisca, passando nella modalità di visualizzazione Site Map che permette delle operazioni sui file di un sito presente sul proprio hard-disk (uno remoto vi va copiato per avere queste funzioni) È necessario aver definito una Home Page o pagina iniziale del sito per accedere a questa modalità e se ciò non è stato fatto viene chiesto di farlo in questo momento. Un clic sull'icona indicata dalla freccina nera di questa immagine e si passa da Site View (che è invece rappresentata dall'icona di sinistra) alla "mappa del sito". Tenere premuto il tasto del mouse mentre si sceglie la modalità permette di decidere se visualizzare unicamente la mappa del sito (Map Only) o mantenere contemporaneamente attiva la visualizzazione della lista dei files che lo compongono (Map and Files). Nella mappa, i files HTML presenti in quello definito come sito vengono visualizzati come icone, concatenate secondo la struttura dei collegamenti che uniscono i documenti stessi a partire da quello che è stato definito come pagina iniziale. Altre piccole icone e simboli possono affiancare quelle che identificano i documenti. I simboli + e - accanto alle icone dei documenti indicano rispettivamente la possibilità di espandere e quindi visualizzare, oppure quella di comprimere e quindi nascondere, il livello successivo della rete di collegamenti, i file collegati a quello evidenziato. Se il nome del file viene scritto in rosso e vi compare a fianco il simbolo significa che quel documento contiene uno o più collegamenti interrotti. Se invece il nome del documento è scritto in blu e presenta il simbolo , si tratta di un link ad un documento esterno al sito, ad esempio un altro sito su Internet, oppure di un collegamento speciale come quelli ad uno script o ad un indirizzo di posta. Il simbolo del lucchetto indica che il documento è di sola lettura. I segni di spunta che possono comparire a fianco delle icone dei file indicano il loro status di modifica: Check-Out significa aprire un file da un sito remoto per modificarlo e Check-In significa ricaricarvelo. Nel caso di progetti complessi in cui sia necessaria l'interazione di più persone puù diventare complesso

capire quali sono i documenti aperti per modifica, e la comparsa di un segno di spunta verde indica che il file è aperto su quel computer, mentre un segno di spunta rosso indica che qualche altro collaboratore vi sta lavorando. Resta da illustrare un'oggetto dall'importanza tutt'altro che marginale, che compare accanto al documento selezionato nella mappa, l'icona Point to file. Questa piccola icona, una caratteristica di Dreamweaver che si ripropone in modalità di authoring nel Property Inspector, ha un grosso potere in quanto permette di creare collegamenti fra documenti, anche in questo caso, quando essi sono ancora vuoti. Viene detta icona Point to file perchè è sufficiente un'operazione di drag-and-drop per creare un link: selezionare questa icona tenedo premuto il tasto del mouse e trascinarla su di un altro documento. Così è stato realizzato un collegamento ipertestuale, un link. Si tratta certo di un link piuttosto "grezzo", poichè il testo che lo rappresenta, di cui non è stata definita nessuna caratteristica, consisterà semplicemente nel nome del file di destinazione. Ma è pur sempre un collegamento funzionante. Anche chi è terrorizzato dall'idea di avere a che fare con la sintassi dell'HTML dovrà ammettere che non si tratta di un'operazione difficile ed i più scettici possono verificare immediatamente il funzionamento di questa semplicissima procedura cliccando due volte sull'icona che rappresenta il file da cui è stato fatto partire il collegamento (quello inizialmente selezionato). Si avvia così l'interfaccia di Authoring di Dreamweaver con la quale si inizierà a prendere confidenza attraverso semplici operazioni.

Proprietà della pagina

11.L'interfaccia Authoring La finestra principale della modalità Authoring è una pagina bianca nella quale possiamo inserire una enorme varietà di oggetti Questa serie di lezioni propone un approcio contestuale volto alla realizzazione di un contenuto complesso: i vari aspetti dell'interfaccia saranno affrontati a mano a mano che si rendono necessari per la lavorazione ma è bene ricordare che essa si compone di diverse finestre progettate per semplificare il lavoro e quindi si invitano sin d'ora gli sviluppatori a prendervi confidenza e... a non esitare a chiuderle se in alcuni momenti dovessero risultare ingombranti. Ci sono parecchi modi di riaprirle, sempre che non si esca dal programma. In questo senso si tratta di un ambiente molto versatile in cui ognuno troverà dopo qualche sperimentazione qual'è il modo più agevole per il proprio personale utilizzo. La finestra principale della modalità Authoring è una pagina bianca nella quale possiamo inserire una enorme varietà di oggetti con facilità, che presenta dei menu ed una barra di stato. Nell parte sinistra di questa barra di stato sono indicate tutte le marcature che definiscono l'area dove si trova il cursore. . Fra i consueti menu a discesa della finestra principale, come FIle o Edit ve n'è uno denominato Window, e scegliendo fra le opzioni ch'esso contiene Launcher viene aperta una finestra, che riproduce quello che appare nella parte inferiore destra della finestra principale di authoring, una serie di 5 icone che permettono accesso immediato ad altrettante modalità operative e che per ora verranno solo elencate. Fra parentesi sono indicati i tasti di scelta rapida ed alle medesime modalità si può arrivare scegliendo le rispettive opzioni dal menu Window. . Sito: rimanda alla modalità Site View (F5) oppure Site Map (MAIUSC + F5) a seconda di quale fosse l'ultima utilizzata prima di passare in Authoring.

Libreria: apre una finestra ove è possibile salvare gli elementi della pagina che vengono utilizzati più volte (F6). Stili: attraverso questa modalità si possono definire degli stili di formattazione da applicare al documento, siano essi codificati nel documento stesso con il tag <style> oppure da raggiungere tramite un link che conduca ad un CSS. (F7) Comportamenti: ecco la finestra che determina quali script sono associati ad un oggetto, quale evento li attiva e qual'è la loro compatibilità.(F8) Linea Temporale: direttamente mutuata da applicazioni come Director e Flash, questa parte dell'interfaccia permette di definire dei "punti chiave" da utilizzare come referenti o marcatori per la navigazione, oppure da impostare come "fotogrammi chiave" quando si realizza un'animazione (F9) HTML: com'è facilmente intuibile, cliccando su questa icona si accede all'interfaccia testuale che permette a chi ne conosce la sintassi di modificare direttamente il codice HTML, JavaScript e DHTML e ne facilita la comprensione a chi studia questi idiomi.(F10). Un ulteriore clic sull'icona chiude la rispettiva finestra. Da tenere sempre a portata di mouse la finestra delle proprietà, il Property Inspector (tasti di scelta rapida CTRL + F3 oppure Properties dal menu Window)

12.Definire le proprietà generali Inserire manualmente le marcature che definiscono le caratteristiche generali della pagina Non.tutti vogliono inserire manualmente le marcature che definiscono le caratteristiche generali della pagina e dalla finestra Authoring di Dreamweaver si può farlo automaticamente. Dal menu Modify scegliere Page Properties, oppure premere la combinazione di tasti CTRL + J. Nella finestra che viene aperta si possono definire, nell'ordine: Title: il titolo della pagina ovvero la stringa che verrà visualizzata nella barra in alto del browser (o barra del titolo), è una marcatura dell'intestazione head del documento, mentre le seguenti possono esservi definite come "stili", ma sono caratteristiche dei contenuti del corpo body. Background Image: un'immagine da usare come sfondo per la pagina Background: il colore di sfondo (il bianco è la scelta di default), Text: il colore del testo (il nero per default), Link: il colore del testo (o del bordo di immagine) cui è associato un collegamento, Visited Link: il colore del testo (o del bordo di immagine) di collegamenti già visitati, Active Link : il colore del testo (o del bordo) che definisce il collegamento attivo, Document Encoding: la codifica linguistica che viene adottata per il documento, Tracing Image e relativo indice di trasparenza. Questa opzione fornisce un ausilio per l'impostazione grafica della pagina.e non determina variazioni nel codice. Un designer alla ricerca di un particolare, preciso effetto grafico può inserire in questa sede un qualunque documento GIF, JPG o PNG il cui aspetto intenda ricalcare nella realizzazione di una pagina web. Impostando un indice di trasparenza di circa 50% per l'immagine tracciante, per esempio, è facile

distinguerne le forme dagli elementi modificabili tramite HTML come tabelle, frames ed immagini: non resta che ricalcarne il profilo che interessa con quello dei relativi elementi. Sfruttando un'immagine tracciante durante la realizzazione di un documento, nella modalità grafica Authoring non vengono visualizzati nè il colore che è stato indicato per lo sfondo, nè l'eventuale immagine prescelta per tappezzare lo sfondo . Non si tratta di una modifica apportata al codice, quindi la visualizzazione finale non ne risente ed essa non apparirà mai nel browser: Una volta selezionate le opzioni che si preferiscono, dare OK per chiudere la finestra delle Proprietà di Pagina.

13.Scelta dei colori Varie possibilità di scelta per quanto riguarda i colori da assegnare agli oggetti HTML La trattazione delle varie possibilità di scelta per quanto riguarda i colori da assegnare agli oggetti HTML che lo prevedono come lo sfondo della pagina, il testo, i collegamenti nei loro vari stati di attivazione ed altri merita qualche attenzione. È possibile utilizzare la splendida fotografia impostata come sfondo della propria scrivania elettronica quale fonte di particolari sfumature di colore, e si possono selezionare queste tinte direttamente, senza dover copiare lo schermo, incollarlo in qualche applicativo, leggerne i valori cromatici... Con la combinazione di tasti CTRL + J (Modify - Page Properties) viene riattivata la finestra che imposta le proprietà generali del documento HTML in cui definire un colore di sfondo, ma le funzionalità elencate qui di seguito sono valide in generale. La finestra di selezione del colore presenta una tabella di colori oltre a tre icone: è identica per tutti gli oggetti in cui è presente questa possibilità di scelta ed è indicata dall'icona Selezionarla fa del puntatore del mouse un contagocce da trascinare in un punto qualunque del desktop quindi anche nella finestra di un'altra applicazione aperta, per scegliervi un colore. Per definire la proprietà colore si può scegliere fra i 212 considerati web-safe, ovvero "sicuri" perchè visualizzabili dal maggior numero di utenti IE o NN sia PC che MAC, semplicemente scegliendone uno fra quelli presentati nella palette ed al cui inserimento viene affiancato il codice esadecimale. . SI può anche limitare la scelta a questi colori cliccando sull'icona del contagocce: selezionando in qualunque modo un colore non presente in questa palette, la scelta viene automaticamente reindirizzata al colore web-safe più simile. L'icona della gomma elimina la scelta effettuata senza inserirne una nuova. L'utente può inserire colori non presenti in questa tabella definendone il codice od allargare la propria scelta ai colori di sistema scegliendo l'icona della tavolozza.

14.Meta Tags: gli indispensabili invisibili Mediante questi tag si trovano infatti definite le parole chiave usate dai motori di ricerca Oltre a definire le proprietà principali della pagina sarebbe bene definire sin da questo momento altre caratteristiche molto importanti del documento, anche se per lo più invisibili nella visualizzazione del browser.

L'importanza apparirà chiaramente soprattutto all'atto della pubblicazione su Internet ma esercitarsi fin dall'inizio con le caratteristiche anche meno evidenti delle pagine web può aiutare a comprenderne la logica di funzionamento. Si tratta di elementi di marcatura, i cosiddetti meta tags, che non hanno sempre effetto sull'impaginazione del lavoro in quanto vengono definiti nell'intestazione head del documento HTML e non nel suo corpo (body: è quest'ultima la parte del codice che il browser visualizza nella finestra principale come "pagina web") ma non per questo la loro assenza sarebbe tollerabile. Un sito web realizzato senza definire alcuno di questi elementi potrebbe essere perfettamente funzionante e anche di aspetto professionale, ma probabilmente se ne starebbe tutto soletto nel suo angolo del cyberspazio ricevendo ben poche visite. Mediante questi tag si trovano infatti definite le parole chiave usate dai motori di ricerca (e dai loro web-crawler, i "ragni" che scandagliano la rete) per indicizzare il sito e dargli un certo grado di visibilità e rintracciabilità, vi si può scrivere una succinta ma puntuale descrizione del sito, ovvero la prima parte del sito stesso che verrà visualizzata rintracciandolo attraverso un motore di ricerca. Ogni meta tag è composto da un attributo NAME se riferito a proprietà della pagina oppure HTTP-EQUIV se conttiene informazioni di intestazione HTML, da un valore VALUE, che può essere definito secondo le proprie necessità e da un contenuto CONTENT che rappresenta l'informazione vera e propria. Ad esempio avendo definito VALUE="data di creazione" si potrebbe scrivere CONTENT="04/07/1492". Oltre ad inserire meta tags personalizzati si possono utilizzare quelli già predisposti aprendo dalla finestra principale di Dreamweaver il menu a discesa Insert, scegliendo Head fra gli elementi e selezionando quello richiesto. Le proprietà dei meta tags predefiniti possono essere definite e modificate nella rispettiva istanza della finestra Property Inspector (palette delle Proprietà).

· Keywords per inserire parole chiave ed aumentare la reperibilità del sito; ). · Description per inserire una descrizione riassuntiva dei contenuti del sito; · Base per definire un URL al quale faranno riferimento tutti i collegamenti relativi presenti nel documento (i link ad "index.htm" sono relativi, mentre quelli ad "http://www.html.it/index.htm" sono invece assoluti) e se necessario il frame di riferimento.

· Refresh per definire, se necessario, un lasso di tempo trascorso il quale la pagina viene automaticamente ricaricata dal browser, oppure in alternativa un altro indirizzo URL alternativo cui il browser viene re-indirizzato. Può essere di grande utilità trattando contenuti dinamici che vengono aggiornati di frequente (ad esempio le previsioni meteorologiche..od i prezzi...) far ricaricare automaticamente la pagina ogni minuto significa assicurarsi che l'utenza avrà sempre a disposizione le informazioni più recenti o per organizzare una "visita guidata" al sito, nel corso della quale l'interazione dell'utente sarà ridotta al minimo ma lo si porterà a visitare sequenzialmente le pagine che si sono scelte. Basta inserire nell'intestazione di ognuna di queste pagine l'opportuno META Refresh che reindirizzi alla successiva, definire dopo quanti secondi deve avvenire il re-indirizzamento, ed il gioco è fatto. Esistono molti altri Meta Tags e diversi elementi che vengono definiti nello spazio "invisibile" dell'intestazione del documento: per visualizzarli, in modalità authoring scegliere Head Content dal menu View.(CTRL + MAIUSC + W), per controllarli modificare i parametri nel Property Inspector. Invisible Elements, dallo stesso menu View (CTRL + MAIUSC + V), permette invece di visualizzare nella finestra di composizione quelle parti del codice scritte nel corpo del documento che non vengono rappresentate nel browser, come gli script od i commenti del programmatore.

Inserire Elementi 15.Inserire, definire e modificare testo Dall'interfaccia Authoring di Dreamweaver si accede facilmente ad ogni elemento di un documento HTML Dall'interfaccia Authoring di Dreamweaver si accede facilmente ad ogni elemento di un documento HTML e si possono apportare tutte le modifiche più appropriate. La finestra principale è una pagina bianca nella quale è possibile inserire subito del testo, eventualmente incollandovi quanto copiato da un'altra applicazione, solo testo senza formattazione. La formattazione predefinita del testo è a paragrafi. Le proprietà del testo sono controllabili mediante il relativo Property Inspector oppure attraverso le opzioni del menu Text e mediante il menu contestuale. Similmente a come si farebbe con un word-processor, dal menu Text o dalla finestra delle proprietà Property Inspector si possono inserire i parametri relativi al blocco di testo selezionato In assenza di una selezione attiva si definisce come apparirà il testo che verrà inserito subito dopo. ·

Format imposta il formato del testo, definendo se si tratti di un paragrafo, di un'intestazione o di un blocco di testo pre-formattato.

·

Font è un menu a scelta multipla dal quale scegliere il tipo di carattere da applicare al testo. L'ultima voce, Edit Font List, permette di personalizzare la lista di font presenti nel menu. Senza addentrarsi in una trattazione dettagliata, è bene ricordare che cercare di dare un aspetto particolare alle proprie pagine utilizzando dei set di caratteri stravaganti può essere rischioso perchè se questi non sono presenti sul computer che visualizzerà le pagine, il sistema utilizzerà il carattere predefinito ovvero Times New Roman su PC e Times su Mac.

·

Size definisce la dimensione (il corpo) del testo e può essere un valore da uno a sette avendo come predefinita una dimensione di 3. La dimensione può anche essere definita relativamente rispetto a 3 con valori preceduti dal segno meno -o dal più +

·

L'icona Color definisce il colore ed è seguita da quella per definire gli stili fisici del testo con Bold, il grassetto, ed Italics, il corsivo

·

Sulla stessa riga tre comandi per allineare il testo a sinistra, al centro, a destra

·

Subito sotto le icone per creare liste numerate o puntate ed aumentare o diminuire l'indentazione del testo, e le potenzialità del menu Text non vanno oltre l'offrire la possibilità di un controllo linguistico sul documento, mentre il Property Inspector offre tutto quello che serve per creare collegamenti ipertestuali.

Una precisazione sull'inserimento di ritorni a capo nel testo è necessaria. Premendo "invio" (o "enter" o "return") si crea un nuovo paragrafo, mentre il ritorno a capo normale, per il quale basta inserire il comando
per line break nel codice HTML, richiede la combinazione MAIUSC + INVIO (o RETURN o ENTER). È consigliabile prendere rapidamente confidenza con questa caratteristica del programma con qualche esperimento per evitare troppi paragrafi indesiderati.. La semplice marcatura che viene inserita con MAIUSC + INVIO è accessibile anche dal menu Insert con l'opzione Line Break, oppure dalla finestra Objects: dal menu Window scegliere Objects (CTRL + F2), aprire il menu con la piccola freccina nera e fra i tipi di oggetti disponibili scegliere la categoria Invisibles. Il ritorno a capo è rappresentato dall'icona con le lettere "BR".

16. Collegamenti ed ancore Gestire link ipertestuali con Dreamweaver Innanzitutto descriviamo il meccanismo di inserimento delle ancore che rappresentano le destinazioni, i punti di arrivo di collegamenti ipertestuali in diversi punti di uno stesso documento L'inizio di ogni sezione di questo testo, come "Collegamenti ed Ancore" per la presente, è caratterizzato dalla presenza di un'ancora alla quale si riferisce il collegamento in alto nella pagina. Si tratta di oggetti invisibili, che possono essere inseriti mediante la combinazione CTRL + ALT + A, dal menu Insert scegliendo Named Anchor od ancora scegliendo l'icona dell'ancoretta nella finestra degli oggetti (CTRL + F2), fra quelli invisibili. Si avrà così un punto del documento al quale è possibile far riferire un collegamento: è indispensabile assegnare un nome all'ancora con l'attributo Name.. Per associare un link o collegamento ad un oggetto, sia esso testuale od un'immagine, selezionarlo poi a scelta seguire una delle seguenti modalità: ·

scegliere dal menu Modify l'opzione Hyperlink -Make Link.(CTRL + L) e scegliere a quale file il collegamento deve riferirsi;

·

l'icona browse, la cartella, indica anche nel Property Inspector la possibilità di cercare sul disco un documento da collegare;

·

nel campo Link del Property Inspector inserire direttamente il percorso fino al file desiderato o sceglierlo dal menu a discesa;

·

ridurre la dimensione della finestra principale e dal menu File (per MAC esiste un apposito menu SIte), con l'opzione Open Site visualizzare la struttura del sito e ridimensionare anche questa finestra così da poterla affiancare all'altra, poi tornare nella finestra principale e dal Property Inspector trascinare l'icona Point to File su un documento del sito. Questa icona può anche essere trascinata su di un'ancora in un documento aperto per creare un collegamento interno;

·

trascinare dalla struttura del sito, Site View o Site Map, l'icona del documento verso cui si vuole creare il collegamento nel campo Link del Property Inspector ed il percorso sarà inserito automaticamente.

La casella Target riguarda l'indirizzamento di un collegamento ad un Frame, individuandolo con il nome Target Name e sarà trattata nel capitolo relativo ai frames.

17. Immagini Gestire e inserire immagini all'interno del documento Le immagini da inserire devono essere contenute in una cartella all'interno della directory del sito, e tentando di inserire un documento immagine che si trova altrove viene chiesto se si vuole crearne una copia all'interno del sito. I formati di immagine che è possibile inserire in un documento HTML sono principalmente il JPEG ed il GIF, il primo a milioni di colori d il secondo con colori indicizzati da 1 a 8 bit per pixel. È accettato anche il formato nativo di Macromedia Fireworks, PNG. Per inserire un'immagine statica od una animazione GIF scegliere dal menu Insert la prima voce, Image, oppure digitare la combinazione CTRL + ALT + I.

In alternativa, dalla finestra Objects (CTRL + F2) scegliere la categoria Common e selezionare l'icona Image con il quadretto dell'alberello. Selezionando l'immagine la finestra del Property Inspector cambia, per mostrare le proprietà relative all'oggetto immagine oltre ad una sua rappresentazione di anteprima, e l'indicazione del suo "peso" in termini di kilobytes e quindi di tempo di caricamento. L'assegnazione di un attributo Name facilita l'identificazione e quindi l'uso dell'immagine quando si tratterà di assegnarvi comportamenti: esso va inserito nel campo (che non presenta indicazioni) che si trova nel Property Inspector, a fianco dell'anteprima dell'immagine e sotto i campi delle sue dimensioni. I campi Width ed Height definiscono le dimensioni dell'immagine, che possono essere variate sia in questa sede, inserendo i valori in pixel o facendoli seguire dall'unità di misura adatta (cm o mm o pica) che sarà convertita in pixel nel codice HTML, sia trascinando le maniglie nere presenti nel perimetro di selezione dell'immagine. Trattandosi di immagini rasterizzate (bitmap) che non vengono ri-campionate in questo processo, è sconsigliabile modificarne le dimensioni originali, meglio ridefinirle in un programma di grafica e successivamente inserirle. ll tasto Edit situato in basso a destra nel Property Inspector permette di definire e lanciare un editor esterno di immagini con il quale elaborarle e adattarle. Sempre nel Property Inspector si incontrano i campi Src e Link, poi Align e Alt. Sia Src che Link sono accompagnati dall'ormai consueta icona Point to File per "puntare" ad un file, oltre che dall'icona della cartella che permette di cercare i documenti sul proprio disco. Il campo Src definisce quale file grafico inserire nella pagina e si può inserire manualmente il percorso, puntare ad un'immagine presente nel sito trascinando l'icona Point to File sulla mappa /lista del sito ed indicandola, oppure cercarla nel modo tradizionale con l'icona della cartella. Il campo Link definisce il collegamento con modalità analoghe a quelle descritte per i collegamenti associati ad elementi testuali. Il campo Border si riferisce allo spessore della cornice che circonda l'immagine quando vi è associato un collegamento: immettere il valore per 0 per non visualizzare alcuna cornice attorno ad una immagine collegata. È facilissimo creare una mappa immagine aprendo la relativa finestra con il tasto Map, definendo aree sensibili e collegamenti. Dreamweaver si occupa di tutto l'HTML necessario inserendo un tag <MAP> alla fine del documento. Il campo Align definisce le varie possibilità di allineamento dell'immagine rispetto al testo che la circonda ed il campo Alt permette di inserire una breve descrizione dell'immagine, che viene visualizzata come "etichetta" o tool-tip quando il puntatore del mouse vi si trova sopra. Gli utenti che avessero disabilitato la visualizzazione di immagini nel proprio browser potrebbero almeno leggerne questa descrizione sotto forma di testo alternativo. L'allineamento dell'immagine nella pagina rispetto al testo è un argomento delicato la cui trattazione dettagliata esula dagli obiettivi di questo corso introduttivo all'uso di Dreamweaver, che non pretende di sviscerare tutte le sottigliezze dell'HTML. A seconda delle dimensioni dell'immagine e della sua funzione nell'economia strutturale della pagina si opterà per un'opzione o per l'altra fra quelle disponibili nella completa lista. Citiamo solo a titolo di esempio la differenza fra l'allineamento Bottom, che allinea la parte inferiore dell'immagine alla riga di testo in cui si trova, e l'allineamento di tipo Absolute Bottom che invece allinea il bordo inferiore dell'immagine all'interlinea successiva (ovvero alla parte superiore della linea successiva). In più, questa istanza del Property Inspector definisce la presenza o meno, e le eventuali dimensioni, di un bordo, uno spazio vuoto, sopra e sotto l'immagine con V Space, ai suoi lati sinistro e destro con H Space. Un realizzatore grafico abituato ad inserire gli elementi con assoluta libertà potrebbe trovarsi limitato nelle possibilità di allineamento delle immagini rispetto al testo ma non si può non confrontarsi con questa

particolarità dell'HTML che, giova ricordiarlo, è un linguaggio che oggi permette di inserire una varietà di oggetti ma è stato creato pochi anni fa per la presentazione di documenti prettamente testuali. Un modo di aggirare qualche problema di impaginazione può essere ricercato nella strutturazione della pagina attraverso tabelle e nella creazione delle tabelle stesse sfruttando la precisione e la praticità di posizionamento dei livelli.

Impaginazione: tabelle e livelli 18. Inserimento di tabelle Con Dreamweaver è molto semplice inserire nelle pagine tabelle L'utilizzo di tabelle permette di disporre con precisione i contenuti sulle pagine HTML. Con Dreamweaver è molto semplice inserire nelle pagine tabelle la cui gestione attraverso il codice potrebbe presentare qualche difficoltà. Le tabelle possono inoltre essere nidificate (o annidate che dir si voglia) ovvero all'interno di una cella di tabella si può inserire un'intera altra tabella, di dimensioni compatibili, ma strutturata in maniera del tutto indipendente dalla tabella che funge da contenitore. Per assegnare uno stile predefinito ad una tabella, selezionarla e scegliere dal menu Commands l'opzione Format Table, quindi scegliere il modello di tabella da applicare alla propria. Non è una soluzione molto creativa, ma rapida. Una tabella può essere creata scegliendo la combinazione di tasti CTRL+ ALT + T, la voce Table dal menu Insert oppure l'icona relativa alla tabella nella finestra degli oggetti di utilizzo più frequente, accessibile scegliendo la prima voce Objects (CTRL+F2) del menu Window. La finestra degli oggetti permette di inserirne numerosi e di vario tipo: i suoi contenuti possono essere variamente estesi dallo sviluppatore di Dreamweaver; ci si assicuri per ora che il titolo della finestra sia Objects e che la sua intestazione, che identifica il tipo di oggetti, sia Common. Qualunque sia il metodo di creazione prescelto, l'inserimento di una tabella presenta all'utente una finestra di dialogo che permette di definirne le proprietà generali. Mediante Rows e Columns si controlllano rispettivamente il numero di righe e di colonne di cui sarà composta la tabella. Con il campo Width si definisce la larghezza della tabella in pixel, quindi in modo assoluto; oppure in percentuale rispetto alle dimensioni della pagina. Inserire una tabella di larghezza pari a 100% significa disporre di uno strumento di impaginazione che controlla tutta l'estensione della pagina e la cui struttura si ridimensiona relativamente alle dimensioni della finestra di browser. Una cifra inserita nel campo Cell Padding determina la distanza, in pixel, del contenuto delle celle dai loro bordi, per ottenere ad esempio una "cornice" del colore di sfondo di una cella attorno ad un'immagine più piccola che vi è contenuta.. Mediante il campo Cell Spacing si definisce in pixel lo spazio fra ogni riga e colonna e la successiva. Il campo Border consente di definire in pixel lo spessore di un bordo visibile per righe e colonne della tabella. Se si desidera creare una tabella "invisibile", da utilizzare ad esempio come strumento di impaginazione, impostare il valore del campo Border a 0. La tabella sarà comunque visualizzata, solo in fase di realizzazione e con i bordi punteggiati, scegliendo dal menu View l'opzione Table Borders.

19. Modifica di tabelle Modificare tabelle con Dreamweaver Per selezionare una tabella cliccare sull'angolo superiore sinistro della tabella, sul suo bordo inferiore o su quello destro nella finestra principale di authoring. Il menu contestuale del mouse presenta l'opzione Select Table

Come accade per altri oggetti in Dreamweaver, selezionando una tabella attorno ad essa compaiono una cornice e le maniglie di ridimensionamento. Per allineare una tabella od altro oggetto a sinistra, al centro o a destra nella pagina selezionarla e scegliere rispettivamente le opzioni left, center, right presentate per la voce Alignment dal menu Modify oppure dal menu contestuale. Prestare particolare attenzione all'aspetto della finestra delle proprietà per essere certi di avere la selezione attiva sulla tabella e non sul suo contenuto, o altrove. Quando ci si trova all'interno di una tabella, cioè all'interno di una sua cella, sarà visualizzata la finestra delle proprietà relativa al contenuto di quella cella della tabella, per default il testo, che presenta però un tasto triangolare nell'angolo inferiore sinistro che permette di controllare le proprietà della cella di tabella entro cui si sta inserendo contenuto. La finestra delle proprietà (o Property Inspector, dal menu Window - Properties CTRL+F3) relativa invece alle tabelle porta scritto Table Name e nella sua parte superiore permette di rettificare i valori impostati nella finestra di definizione della tabella con i campi Rows, Cols, W e H, CellPad, Cell Space e Border. È inoltre possibile assegnare un nome alla tabella (Table Name) e definirne l'allineamento a sinistra (left), al centro (center) o a destra (right) nella pagina, scegliendo l'opzione desiderata dal menu Align o dal menu contestuale l'opzione Alignment.. La parte inferiore dellta finestra delle proprietà per la tabella permette di eliminare tutte le informazioni sulle dimensioni delle righe e delle colonne componenti la tabellla con i due tasti Clear Row Heights e Clear Column Widths I tasti sottostanti a questi due permettono di convertire il valore impostato come larghezza della tabella in pixel od in percentuale Con i campi V Space e H Space si definisce la distanza della tabella dall'angolo superiore sinistro della pagina.o dell'oggetto entro cui la tabella è contenuta, ad esempio una cella di altra tabella nel caso di annidamento. Compaiono poi un campo Bg con l'icona Point to file e quella della cartella, che permette di inserire un'immagine a fare da sfondo alla tabella e ben quattro campi di selezione del colore. Il campo Brdr definisce il colore del bordo e Bg lo sfondo della tabella mentre gli altri definiscono i colori delle sfumature (chiara e scura) del bordo della tabella per dare un effetto di tridimensionalità, ma queste ultime due proprietà sono interpretate variamente dalle diverse piattaforme. Sia per l'intera tabella che per righe e colonne, la dimensione può essere modificata trascinandone i bordi nella finestra principale: la tabella presenta maniglie di ridimensionamento in basso e a destra ed il puntatore del mouse muta nel cursore di ridimensionamento quando lo si posiziona su di un bordo interno alla tabella. Il ridimensionamento della tabella comporta un ridimensionamento proporzionale di tutte le celle.

20. Modifica di celle di tabella Modificare celle con Dreamweaver Si è detto che quando il cursore è all'interno di una cella essa è selezionata: per selezionare più celle, premere il tasto SHIFT (Maiuscole) e cliccare all'interno delle altre celle contigue che si desidera selezionare. Premendo CTRL e cliccando si possono effettuare anche selezioni non continue, selezionando cellle variamente disposte nella tabella. Viene visualizzata una cornice nera all'interno delle celle selezionate. Cliccando in un'area vuota all'interno di una cella è anche possibile tenere premuto il tasto del mouse e trascinare il puntatore in una cella vicina, estendendovi la selezione. Le potenzialità di Dreamweaver nella gestione delle tabelle si esplicano appieno nella modifica delle proprietà di una o più celle: cliccando all'interno di una cella, visualizzare la finestra delle proprietà (CTRL+F3), uguale nella sua parte superiore a quella del testo e recante la dicitura Cell nella sua parte inferiore. In questa finestra impostare l'allineamento del contenuto della cella in senso orizzontale scegliendo fra le opzioni del campo Horz ed in senso verticale scegliendo le opzioni del menu Vert. Scegliendo Center per allineamento orizzontale e Middle per quello verticale il contenuto sarà centrato nella cella. Impostare le dimensioni della cella, larghezza conil campo W ed altezza con H. Inserire o selezionare un'immagine di sfondo per la cella e definirne eventuali colori di sfondo (Bg) e per il bordo (Brdr). La casella di opzione NoWrap permette di disabilitare il ritorno a capo automatico del testo, così che la cella

si espanda automaticamente per accoglierlo. La casella di opzione Header imposta le celle come intestazioni di tabella e vi associa il tag , per Table Headers, applicando una formattazione predefinita di grassetto e centrando orizzontalmente il contenuto della cella. Per aggiungere righe o colonne bisogna cliccare all'interno di una cella contigua alla nuova area che si vuole creare e quindi scegliere dal menu contestuale, o dal menu Modify l'opzione Table - Insert Rows or Columns. Nella finestra di dialogo che viene aperta l'utente può scegliere se inserire righe con Rows o colonne con Columns, in che numero, e se posizionarle sopra (Above) alla riga o o prima (Before) della colonna in cui si trova, oppure se inserirle sotto (Below) alla riga oppure dopo (After) la colonna. Scegliendo le opzioni Insert Row oppure Insert Column dagli stessi menu è invece possibile aggiungere automaticamente una riga od una colonna sopra o prima della posizione in cui si trova il cursore. Per unire più celle è necessario averne selezionate due o più, contigue e continue (per questa operazione sono ammesse unicamente selezioni il cui perimetro totale, quindi delle varie celle insieme, abbia una forma di rettangolo). A livello di HTML viene modificata l'estensione di una cella: essa si estendera per più righe o colonne, per una modifica degli attributi Rowspan.o Colspan del tag che definisce la cella. Per dividere una cella cliccare al suo interno e scegliere l'icona Split Cell nella finestra delle proprietà, poi scegliere nella finestra di dialogo in quante righe o colonne si desidera suddividere ulteriormente la cella.

21. I livelli, versatili contenitori Mediante l’utilizzo di livelli è possibile inserire in una pagina contenuto testuale, di immagini od altri oggetti, e posizionarlo con assoluta precisione. Gli oggetti possono essere inseriti direttamente nella pagina oppure ordinati mediante tabelle, ma chiunque abbia dimestichezza con programmi per l'impaginazione di documenti cartacei non potrà non trovarsi limitato dalla rigidità della loro struttura. Un modo di posizionare gli elementi con maggiore versatilità è quello di utilizzare i livelli. Mediante l’utilizzo di livelli è possibile inserire in una pagina contenuto testuale, di immagini od altri oggetti, e posizionarlo con assoluta precisione. I livelli possono essere definiti da diversi tags: