Siti web e Dreamweaver. La schermata iniziale

Transcript

1 Siti web e Dreamweaver Dreamweaver è la soluzione ideale per progettare, sviluppare e gestire siti web professionali e applicazioni efficaci e conformi agli standard e offre tutti gli strumenti di progettazione e di modifica del codice necessari per realizzare il progetto dall inizio alla fine. Prima di cominciare, però, è doveroso ricordare cos è un sito web. Un sito web è un insieme organizzato di pagine web che condividono una linea grafica predefinita, indirizzato alla comunicazione di idee, alla promozione di un prodotto o di un azienda, ecc. La grafica omogenea garantisce al visitatore di percepire il sito come un unica struttura informativa di cui fanno parte tutte le pagine che man mano visualizza. Dal punto di vista tecnico un sito web è una quota di spazio sul disco di un computer (server web) utilizzabile 24 ore al giorno dagli utenti di Internet. La schermata iniziale Appena lanciato, Dreamweaver si presenta con una schermata a tre colonne: nella colonna sinistra è riportato l elenco dei file aperti di recente, la colonna centrale ci consente di creare un nuovo file vuoto, proponendoci diversi tipi, infine quella destra permette di creare un file partendo da alcuni modelli preimpostati.

2 Dreamweaver permette di creare pagine senza bisogno di specificare un sito locale. Per aumentare la produttività del lavoro e utilizzare tutte le funzionalità di Dreamweaver, è però necessario definire un sito locale prima di iniziare a realizzare le pagine web. Dreamweaver consente una procedura per la definizione dei siti attraverso la funzione di definizione automatica del sito. Pertanto, fai clic sulla voce Sito di Dreamweaver... per creare un nuovo sito. In alternativa, puoi crearne uno anche attraverso la voce Nuovo sito presente nel menu Sito. Parte una procedura guidata denominata Definizione del sito che ci guiderà passo passo nella definizione del sito. Come si evince dalla figura, il primo passo da compiere è quello di assegnare un nome al sito e indicare l URL in cui verrà pubblicato. Esaminiamo la creazione di un sito locale che dovrà essere ripubblicato di volta in volta quando decideremo di aggiornarlo. Proviamo ad assegnare un nome, ad esempio Questo è il mio sito, e digitiamo, di seguito, l URL, ad esempio: Fai clic sul pulsante Avanti per passare alla seconda finestra della procedura guidata. Ora ci viene chiesto se vogliamo utilizzare una tecnologia server. Se selezioniamo l opzione Sì si aprirà un menu discesa dal quale dobbiamo selezionare la tecnologia lato server tra quelle supportate da Dreamweaver 8; se, invece, facciamo clic su No potremo procedere a definire un sito di pagine HTML. Optiamo per il No e facciamo clic su Avanti; Dobbiamo, ora, specificare dove vogliamo creare e modificare i nostri file; le alternative sono due:

3 Modificando copie locali sul proprio computer, caricando sul server quando pronti (consigliato); Modificando i file direttamente sul server attraverso la rete locale. Dovendo realizzare pagine HTML la scelta raccomandata è la prima. Dreawmeaver suggerisce come cartella di destinazione del sito locale una cartella col nome scelto nel primo passaggio della procedura, all interno della cartella che contiene gli altri siti web. Se desideri puoi sempre cambiarla. Fai clic su Avanti per passare al prossimo passaggio; Ora viene richiesto come vogliamo connetterci al server remoto Se non desideri specificarlo in questo momento, puoi scegliere la voce Nessuno, altrimenti l opzione utilizzata più frequentemente è FTP, in questo caso i campi richiesti sono: l indirizzo FTP o nome dell host, la cartella di destinazione, il nome utente e la password (quando si inserisce quest ultima la casella Salva necessaria per memorizzare la password verrà automaticamente spuntata). Seleziona Locale/rete e inserisci il nome della cartella del server su cui archiviare il file: digita, ad esempio, C:\Archivio. Fai clic su Avanti per passare al prossimo passaggio; La nuova finestra di dialogo ci chiede se vogliamo abilitare il deposito e ritiro dei file del sito, procedura utile quando si lavora in team poiché impedisce a più persone di lavorare contemporaneamente sullo stesso file. Noi spuntiamo No e andiamo avanti. Dreamweaver visualizza un rapporto delle impostazioni del sito. Fai clic su Fine: il sito viene creato insieme alla sua cartella che sarà visibile nel pannello File. Creato il sito siamo pronti per realizzare le pagine che gli daranno vita! Creare le pagine Esistono vari modi per creare le pagine del sito: noi sceglieremo quello più veloce e intuitivo, lasciando a te, poi, il compito di ricercare le altre alternative. Cominciamo a creare la home page del sito. Dalla schermata iniziale (quella con tre colonne) fai clic su Crea nuovo HTML oppure apri il menu File e seleziona la voce Nuovo. In entrambi i casi controlla controlla che sia selezionata la voce DTT (document type) XHTML 1.0 strict. La pagina è stata creata e compare all interno della videata di Dreamweaver. Modifica del titolo del documento 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. Le pagine a cui non è stato assegnato alcun titolo vengono indicate come Documento senza titolo nella finestra del browser e negli elenchi cronologici e dei segnalibri. Assegnare al documento un nome di file salvandolo non equivale ad assegnare un titolo alla pagina. Per modificare il titolo di una pagina: 1. Con il documento aperto, effettuare una delle seguenti operazioni: Scegliere Elabora > Proprietà di pagina. Scegliere Visualizza > Barre degli strumenti (se tale voce non è già selezionata). Fare clic con il pulsante destro (Windows) o fare clic tenendo premuto il tasto Ctrl (Macintosh) in un area vuota del documento, quindi selezionare Proprietà di pagina. 2. Nella casella di testo Titolo, digitare il titolo della pagina, quindi premere Inserisci o Invio. 3. Se si modifica il titolo nella finestra di dialogo Proprietà pagina, fare clic su OK.

4 Il titolo viene visualizzato nella barra del titolo della finestra del documento (e nella barra degli strumenti, se visualizzata). Il nome del file della pagina e la relativa cartella vengono salvati e visualizzati tra parentesi accanto al titolo nella barra del titolo. Un asterisco indica che il documento contiene modifiche che non sono state ancora salvate. Definire i tag HEAD Probabilmente la prima cosa che sarà necessario fare quando si realizza una pagina web è impostare le sue proprietà inserendo o modificando i tag nidificati all'interno del tag <head> e gli attributi del tag <body>. Accedendo alla barra degli strumenti "Inserisci" e scegliendo il gruppo "HTML" troviamo il menu Head: che permette di inserire altri tag nell'head della pagina. Scegliendo la voce Meta si apre il seguente pannello che permette di inserire nella pagina delle informazioni aggiuntive che verranno utilizzate dal server o da altri sistemi automatizzati. Più semplicemente questo strumento (e gli altri del menu "Head") ci permettono di inserire delle informazioni nella pagina che ne definiscono alcune caratteristiche, pur rimanendo non visibili al navigatore. Il concetto è simile a quello dei tag che permettono di memorizzare in un file mp3 il nome della canzone, il suo autore, etc... La voce Parole chiave permette di elencare alcune parole che definiscono la pagina. In realtà i moderni crawler dei motori di ricerca come Google fanno sempre meno caso a questo tag e sempre più attenzione all'effettivo contenuto della pagina. Tuttavia questo strumento rimane ancora fondamentale per la creazione di pagine facilmente catalogabili dai sistemi automatici. La voce Descrizione serve per inserire una breve descrizione del contenuto della pagina, anch'esso utile ai motori di ricerca. Aggiunta di testo ad un documento Esistono diversi modi per aggiungere del testo ad un documento Dreamweaver. È possibile digitare il testo direttamente nella finestra del documento, oppure tagliarlo e incollarlo o importarlo da altri documenti. Per aggiungere del testo al documento, effettuare una delle seguenti operazioni: Digitare il testo direttamente nella finestra del documento. Copiare il testo da un altra applicazione, passare a Dreamweaver, collocare il punto di inserimento nella Vista struttura della finestra del documento e scegliere Modifica > Incolla. Dreamweaver non conserva la formattazione applicata al testo nell applicazione di origine, ma le interruzioni di riga rimangono inalterate. Per applicare i tag di paragrafo e di intestazione standard, utilizzare il menu a comparsa Formato della finestra di ispezione Proprietà oppure il sottomenu Testo > Formato paragrafo.

5 Creazione di elenchi puntati e numerati Nella finestra del documento, è possibile selezionare un testo esistente o inserire un nuovo testo e convertirlo in un elenco numerato (ordinato), puntato (non ordinato) o di definizioni. Gli elenchi di definizioni non prevedono l'aggiunta di punti o numeri e vengono spesso utilizzati per la creazione di glossari e descrizioni. Gli elenchi possono anche essere nidificati. Gli elenchi nidificati contengono al loro interno altri elenchi. Ad esempio, si può nidificare un elenco ordinato o puntato all'interno di un elenco ordinato o puntato di livello superiore. Per creare un nuovo elenco: 1. Nel documento Dreamweaver, portare il punto di inserimento nella posizione in cui si desidera aggiungere l'elenco ed effettuare una delle seguenti operazioni: o o Fare clic sul pulsante Elenco puntato o Elenco numerato nella finestra di ispezione Proprietà. Selezionare Testo > Elenco e scegliere il tipo di elenco desiderato: Elenco non ordinato (puntato), Elenco ordinato (numerato) o Elenco definizioni. Nella finestra del documento viene visualizzato il carattere iniziale della voce dell'elenco specificata. 2. Digitare il testo della voce di elenco, quindi premere Invio per ogni nuova voce da creare. 3. Per completare l'elenco, premere due volte il tasto Invio. Per creare un elenco utilizzando un testo esistente: 1. Selezionare una serie di paragrafi da convertire in elenco. 2. Fare clic sul pulsante Elenco puntato o Elenco numerato nella finestra di ispezione Proprietà oppure scegliere Testo > Elenco e selezionare il tipo di elenco desiderato: Elenco non ordinato, Elenco ordinato o Elenco definizioni. Per creare un elenco nidificato: 1. Selezionare le voci di elenco da nidificare. 2. Fare clic sul pulsante Rientra a destra nella finestra di ispezione Proprietà o selezionare Testo > Rientra a destra. Dreamweaver fa rientrare il testo e crea un elenco separato utilizzando gli attributi HTML dell'elenco originario. 3. Per applicare un nuovo tipo di elenco o stile al testo rientrato, attenersi alla procedura descritta sopra. La gestione delle immagini

6 Esattamente come le proprietà delle pagine, anche per le immagini Dreamweaver mette a disposizione svariati modi per la loro gestione. Posizionati nel punto in cui desideri inserire l immagine, quindi: Apri il menu Inserisci e seleziona la voce Immagine, oppure Apri il menu Immagine della barra degli strumenti Inserisci e scegli la voce Immagine, oppure Usa la combinazione di tasti Ctrl+Alt+I. In ogni caso, viene visualizzata la finestra di dialogo Seleziona file di origine immagine attraverso la quale puoi selezionare l immagine desiderata. È possibile selezionare un immagine sia del sito locale, sia navigando all interno del computer con l Esplora risorse integrato nella scheda Sito. Attraverso la scheda Risorse, invece, facendo clic sull icona delle immagini presenti nel sito verranno visualizzate tutte le immagini contenute nel sito locale ed è possibile selezionarne una e inserirla premendo il tasto Inserisci. Una volta che l immagine è inserita nella pagina e selezionata possiamo controllarne le proprietà dal pannello Proprietà. Dreamweaver inserisce, come attributi dell immagine, il percorso relativo al file e le dimensioni La (larghezza) e Al (altezza). Queste dimensioni si rifanno alle dimensioni originali del file, anche se è possibile modificarle assegnando all immagine misure differenti rispetto a quelle originarie non fatelo mai, ridimensionate sempre le immagini fuori da Dreamweaver. Nel pannello Proprietà sono presenti alcuni pulsanti che consentono di agire su specifiche proprietà dell immagine selezionata. Il pulsante Ottimizza in Fireworks apre una schermata di Fireworks e permette di eseguire varie operazioni di ottimizzazione. Il pulsante Ridefinisci serve a ripristinare, come attributi HTML dell immagine, le dimensioni originali del file, sia quando queste mancano, sia quando sono differenti dall altezza e larghezza del file; in questo caso le dimensioni visualizzate nel pannello Proprietà appariranno in grassetto. è molto importante specificare le dimensioni della immagine. Ciò permette ai browser di caricare più rapidamente la pagina e mostrare più velocemente il contenuto testuale. Il browser, in questo modo, sarà in grado di conoscere le dimensioni dell immagine ancora prima di aver finito di scaricarla e potrà, così, attribuire all immagine il giusto spazio e posizionare gli altri elementi della pagina di conseguenza. Il pulsante Luminosità e contrasto apre la finestra di dialogo riportata qui a fianco che ci permette di alterare la luminosità ed il contrasto dell immagine. Il pulsante Precisione permette di aumentare il contrasto dei pixel intorno ai bordi degli oggetti per aumentare la definizione o la nitidezza dell immagine. Il funzionamento è analogo a quello del pulsante descritto in precedenza. Compilando il campo Colleg(amento) si trasforma l immagine in un collegamento ipertestuale. È possibile inserire un collegamento nei seguenti modi: - scrivendo il collegamento direttamente nel campo; - facendo clic sull icona cartella, navigando all interno del computer e selezionando il documento o il file da linkare; - facendo clic sull icona puntatore e trascinando il mouse fino a un documento del pannello Sito. Nel campo ALT scrivete una descrizione dell immagine (compilate sempre questo campo!) Nella parte inferiore (a scomparsa) del pannello Proprietà è possibile scegliere altre opzioni.

7 Nel campo Bordo possiamo inserire la dimensione del bordo (in pixel) dell immagine. Le altre voci Spazio O e Spazio V, e i pulsanti Allinea a destra, Allinea a sinistra o Allinea al centro per il momento li lasciamo da parte! Inserire i collegamenti ipertestuali È possibile applicare un collegamento ipertestuale al testo, ad un immagine o ad una mappa immagine. Quando l immagine non è un collegamento, Dreamweaver inserisce automaticamente nel campo Bordo il valore zero. Se, invece, l immagine è un collegamento, viene automaticamente contornata da un bordo che ha gli stessi colori dei collegamenti testuali. Se, però, si desidera che l immagine collegamento non sia contornata dal bordo occorre inserire il valore zero nel campo Bordo. Per inserire il collegamento ipertestuale si può digitare direttamente il riferimento nel campo omonimo oppure si può fare clic sull icona cartella, navigare nel disco e selezionare il file da associare al documento. Quando si crea un collegamento, Dreamweaver si comporta in modo analogo all inserimento delle immagini. I collegamenti assumono tre colori diversi da quelli del testo: un colore predefinito, uno del collegamento attivo, quando si fa clic su esso, ed uno per i collegamenti visitati. È possibile cambiare i colori predefiniti attraverso la definizioni di regole CSS che analizzeremo in seguito.