Pianificazione di un sito

03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 30
Adobe Dreamweaver CS3 a colori
Pianificazione di un sito
Dopo aver visto velocemente i principali elementi dell’interfaccia di
Dreamweaver CS3, vediamo come progettare e costruire un sito Web.
Un sito Web non è altro che una serie di pagine Web collegate tra
loro, e ogni pagina contiene un insieme di vari media (testi, suoni,
video, immagini, animazioni) opportunamente strutturati.
Dreamweaver CS3 permette di creare sia singole pagine Web, sia
un intero sito. Naturalmente un sito può anche essere composto da
una sola pagina. Per un sito Web formato da più pagine è invece
necessario progettare e pianificare in maniera appropriata il sito prima di creare le pagine. Il primo passo dunque per la creazione di
un sito Web è la pianificazione.
È opportuno seguire una serie di fasi di pianificazione per
garantire il funzionamento ottimale del sito:
1. Decidere gli obiettivi del sito.
2. Scegliere il pubblico di riferimento per determinare i tipi
di computer, di velocità di connessione e di browser
utilizzati.
3. Organizzare la struttura del sito.
4. Creare un disegno di esempio che raffiguri su carta
l’aspetto che si desidera per il sito.
5. Progettare l’aspetto della navigazione.
6. Infine creare e raccogliere le risorse necessarie.
30
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 31
Definire un sito
Definizione del sito
Dopo aver pianificato la struttura del sito, in Dreamweaver CS3 occorre definire un nuovo sito prima di iniziare il lavoro. Iniziamo quindi a costruire il sito Web definendone la struttura.
Come esempio realizzeremo il sito di presentazione di un libro:
1. Dopo aver avviato Dreamweaver CS3, seleziona il menu Sito e
fai clic sulla voce Nuovo sito per attivare la creazione guidata
del nuovo sito.
2. Nella finestra “Definizione del sito” inserisci nel campo Come si desidera chiamare il sito? il nome da assegnare al sito, digita quindi Sito personale e fai clic sul pulsante Avanti.
3. Nella seconda schermata devi indicare se il sito che stai costruendo utilizzerà tecnologie server-side le quali permettono
per esempio la connessione con un Database. Seleziona l’opzione Sì, voglio utilizzare una tecnologia server.
31
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 32
Adobe Dreamweaver CS3 a colori
4. All’apertura del menu a comparsa Quale tecnologia server?
fai clic sulla freccia rivolta verso il basso per aprire il menu e seleziona la voce ASPVBScript, il linguaggio Microsoft per creare
applicazioni lato server. Di seguito fai clic sul pulsante Avanti.
5. Nella schermata successiva nella sezione Come si intende lavorare sui file durante lo sviluppo? seleziona l’opzione Eseguendo modifiche e prove localmente (il server di prova
è su questo computer) per usare il Web-server locale.
6. Come puoi notare nella sezione inferiore della finestra,
Dreamweaver CS3 è in grado di rilevare il Web-server attivo
sulla tua macchina e la posizione dei suoi file. Lascia come
posizione dove archiviare i file che costituiranno il sito, la directory proposta: c:\inetpub\wwwroot\Sito personale.
Fai quindi clic sul pulsante Avanti.
32
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 33
Definire un sito
7. All’apertura della nuova schermata, Dreamweaver CS3 propone
l’URL del Web-server locale, cioè il nome con cui lo richiama
dal browser: http://localhost/Sito personale/. Fai clic sul pulsante Prova URL per verificare che tutto funzioni correttamente,
poi chiudi la finestra di conferma e fai clic sul pulsante Avanti.
8. Nella successiva schermata, lascia attiva la scelta No per indicare a Dreamweaver CS3 di non trasferire i file su un server remoto, ma di lavorare sul computer locale. Fai quindi clic sul pulsante Avanti per passare alla successiva schermata.
9. L’ultima finestra riporta le informazioni relative alle impostazioni
assegnate al sito. Fai clic sul pulsante Fine per concludere la
definizione del sito in questione.
33
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 34
Adobe Dreamweaver CS3 a colori
10. A questo punto verrà creata all’interno del Web-server la cartella DreamweaverCS3 che conterrà tutti i dati relativi al sito e ospiterà tutti i file che lo costituiranno. Puoi osservare nel gruppo di
pannelli File, nel pannello Sito, la cartella appena creata e il relativo indirizzo.
Tutti i sistemi Windows dispongono di un Web-server, IIS (Internet Information Services) per i sistemi professionali, oppure PWS (Personal Web Service) per i sistemi casalinghi.
IIS non viene però installato per impostazione predefinita
ma è possibile aggiungerlo mediante la finestra di dialogo
Installazione applicazioni del Pannello di controllo.
Per installare IIS: Fai clic su Start, apri il Pannello di controllo e
quindi fai clic su Installazione applicazioni. Fai clic su Installazione
componenti di Windows. Viene visualizzata l’Aggiunta guidata componenti di Windows. Segui le istruzioni visualizzate per installare, rimuovere o aggiungere componenti a IIS.
34
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 35
Definire un sito
Definizione delle pagine Web
Dopo aver creato la cartella principale del sito, definiamo da quante e quali pagine il sito sarà composto.
Dreamweaver offre un ambiente flessibile in cui lavorare a più tipi
di documenti Web. Oltre ai documenti HTML, è possibile creare e
aprire un’ampia gamma di documenti basati su testo, tra cui CFML
(ColdFusion Markup Language), ASP, JavaScript e CSS (Cascading
Style Sheets). Sono supportati anche i file contenenti codice sorgente, per esempio Visual Basic, .NET, C# e Java. Dreamweaver fornisce diverse opzioni per creare un nuovo documento. È possibile
scegliere una delle opzioni seguenti:
●
●
●
Un nuovo documento o modello vuoto.
Un documento basato su uno dei layout di pagina predefiniti forniti con Dreamweaver, tra cui oltre 30 layout di pagina basati su CSS.
Un documento partendo da uno dei modelli esistenti.
È possibile anche impostare le preferenze dei documenti. Per esempio, se normalmente si lavora con un solo tipo di documento, è possibile impostarlo come tipo di documento predefinito per la creazione di nuove pagine. Nella vista Progettazione o Codice, è possibile definire con facilità le proprietà dei documenti, come i tag meta, il titolo
del documento, i colori di sfondo e molte altre proprietà della pagina.
Procediamo dunque definendo la Home Page, cioè la pagina che
farà da ingresso al sito:
1. Seleziona il menu Sito e fai clic
sulla voce Gestisci siti.
2. Nella finestra Gestisci siti è possibile visualizzare e scegliere il
sito da modificare. Al momento è presente e selezionato il sito DreamweaverCS3 in quanto unico sito definito. Fai clic sul
pulsante Modifica.
35
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 36
Adobe Dreamweaver CS3 a colori
3. Nella finestra Definizione del sito per DreamweaverCS3 fai
clic sulla linguetta della scheda Avanzate.
4. Nel riquadro Categoria seleziona la voce Layout mappa del sito.
5. Nel campo
Home page
digita
default.htm,
che è il nome
predefinito
per la prima
pagina di un
sito nel server Microsoft.
6. Lascia inalterati tutti gli altri campi e fai quindi clic sul pulsante OK.
7. Una finestra di dialogo ti avvisa che il file default.htm non esiste, e ti chiede se desideri crearlo. Per confermare fai clic sul
pulsante OK.
8. Fai clic sul pulsante Fine per completare l’operazione e chiudere la finestra Modifica siti.
9. Come puoi osservare nel
gruppo dei pannelli File,
nel pannello Sito è presente, indentata sotto l’icona
del sito DreamweaverCS3, l’icona della pagina
default.htm appena creata.
36
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 37
Definire un sito
Creazione pagine
di primo livello
Dopo aver definito la Home page, che fungerà da pagina di apertura
del sito, bisogna definire le pagine successive, dette di primo livello in
quanto all’interno della struttura del sito sono a un livello inferiore rispetto alla Home page (questo concetto sarà ripreso e approfondito
più avanti). È possibile creare pagine contenenti un layout CSS predefinito, oppure creare pagine completamente vuote in cui utilizzare
un layout personalizzato. Vediamo come definire una nuova pagina:
1. Potremmo definirla usando la finestra di benvenuto ma è preferibile percorrere la “vecchia” strada soprattutto se si dovesse decidere
di non visualizzarla più e per avere maggiori dettagli di ciò che si
sta per creare. Seleziona il menu File e fai clic sulla voce Nuovo.
2. La finestra Nuovo documento permette di scegliere, per la
creazione delle pagine, fra varie categorie di tipi di file. Seleziona Pagina vuota, nel riquadro Categoria la voce Pagina di base e nel riquadro delle opzioni Tipo di messaggio fai clic sulla voce HTML. Non selezionare nessun tipo di layout.
37
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 38
Adobe Dreamweaver CS3 a colori
3. Si tratta di una semplice pagina HTML, ma come puoi notare
dalla finestra è possibile scegliere tra diversi tipi di pagine. Per
creare il documento, fai clic sul pulsante Crea.
Se vuoi ottenere una nuova pagina contenente un layout CSS,
seleziona un layout CSS predefinito dalla colonna Layout; negli altri casi, seleziona la voce Nessuno. In base alla selezione effettuata, a destra della finestra di dialogo vengono visualizzate un’anteprima e una descrizione del layout selezionato.
I layout CSS predefiniti forniscono i seguenti tipi di colonne:
Larghezza fissa. La larghezza della colonna è specificata
in pixel. La colonna non viene ridimensionata in base alle
dimensioni del browser o alle impostazioni del testo del visitatore del sito.
Elastiche. La larghezza della colonna viene specificata in
un’unità di misura (ems) relativa alle dimensioni del testo.
L’impostazione usata varia se il visitatore del sito modifica
le impostazioni relative al testo, ma non in caso di modifica delle dimensioni della finestra del browser.
Liquide. La larghezza della colonna viene specificata come
percentuale della larghezza del browser usato dal visitatore del
sito. L’impostazione usata varia se il visitatore del sito allarga o
restringe la finestra del browser, mentre non cambia in base
alle impostazioni del testo usate dal visitatore del sito.
Ibride. Le colonne sono una combinazione delle tre opzioni
precedenti. Per esempio, il layout a due colonne ibride nella
barra laterale destra ha una colonna principale liquida che
viene scalata in base alle dimensioni del browser, e una colonna elastica a destra che viene scalata in base alle dimensioni delle impostazioni del testo del visitatore del sito.
38
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 39
Definire un sito
4. Nell’area di lavoro viene aperta una nuova finestra con la pagina appena creata.
5. Seleziona il menu File e fai clic sulla voce Salva con nome
per salvare la pagina e assegnarle un nome.
6. Nella finestra Salva con nome inserisci nel campo Nome file il nome da assegnare alla pagina, digita dunque introduzione e fai clic sul pulsante Salva.
7. Puoi notare che nel pannello File è ora presente il file
introduzione.htm.
39
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 40
Adobe Dreamweaver CS3 a colori
8. Anche la barra del titolo della finestra del documento riporta ora
il nome assegnato alla pagina. Definita la pagina, puoi ora chiudere la finestra del documento (la riaprirai in seguito per inserire
i contenuti) facendo clic sul pulsante Chiudi in alto a destra.
Definisci altre tre pagine seguendo le modalità viste sopra e salvale con i seguenti nomi di file:
●
●
●
Chi siamo
Hobbies
Link utili
A fine lavoro nel pannello File
osserva i file appena creati.
Aggiungiamo una pagina dinamica, cioè una pagina che farà riferimento a un database dove estrapolare i dati da visualizzare nella pagina:
1. Seleziona il menu File e fai clic sulla voce Nuovo.
2. Nella finestra Nuovo documento seleziona nel riquadro Categoria la voce Pagina vuota e nel riquadro delle opzioni Tipo di
messaggio fai clic su ASP VBScript. Fai clic sul pulsante Crea.
40
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 41
Definire un sito
3. Seleziona il menu File e fai clic sulla voce Salva con nome.
Nel salvare la pagina assegnale il nome libro ospiti.
4. Come puoi notare, nel
pannello File la pagina libro ospiti ha l’estensione .asp e non
.htm come le altre,
questo perché hai precedentemente impostato la pagina come
pagina dinamica.
Hai così definito quelle che saranno le pagine del sito, sei pagine,
ognuna dedicata a un aspetto relativo all’argomento del sito.
Come vedremo più avanti, in qualunque momento sarà
possibile in seguito aggiungere o eliminare pagine dal sito,
rinominarle oppure cambiare nome e directory.
41
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 42
Adobe Dreamweaver CS3 a colori
Mappa del sito
Una delle caratteristiche fondamentali di una pagina Web è l’interattività,
cioè la possibilità di passare da una pagina all’altra grazie a una struttura “ipertestuale” che cioè collega pagine che fanno riferimento ad altre
pagine situate sullo stesso computer o su computer diversi. Dopo aver
definito le pagine che costituiscono il sito, è necessario creare la
struttura ipertestuale del sito cioè il collegamento fra le pagine.
Dreamweaver permette di realizzare ciò creando una mappa del sito nella quale organizzare i collegamenti fra le pagine. Vediamo quindi come creare la mappa del sito dell’esempio precedente:
1. Nel pannello File fai clic sul pulsante Espandi per visualizzare siti locali o remoti.
2. Il pannello viene espanso a tutto schermo occupando l’intera
area di lavoro.
3. Fai clic sul pulsante Mappa del sito e tenendo premuto il pulsante
del mouse seleziona, dal menu a comparsa, Mappa e file.
42
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 43
Definire un sito
4. Come puoi notare, il pannello è diviso in due sezioni principali, nella parte destra sono presenti i file delle pagine che costituiranno il
sito; nella parte sinistra, che ospiterà la mappa vera e propria del
sito, è per ora presente solo l’icona della Home page default.htm.
5. Per collegare la Home page a un’altra pagina del sito fai clic sull’icona della sezione sinistra per fare apparire il pulsante di trascinamento (icona a forma di mirino).
6. Fai clic sul pulsante di trascinamento e tenendo premuto il
pulsante del mouse trascina il mirino sull’icona della pagina
introduzione.htm presente nel riquadro destro della finestra.
43
03-DreamweaverCS3.qxd
19-09-2008
14:14
Pagina 44
Adobe Dreamweaver CS3 a colori
7. Rilascia il pulsante
del mouse, a questo punto vedrai apparire nel riquadro
sinistro della finestra il collegamento
effettuato tra la home page e la pagina di introduzione.
8. Collega, seguendo
le stesse modalità
(passi 6-7), la home page con le altre pagine fino ad
avere una mappa di
collegamenti come
mostrato in figura.
La mappa realizzata presenta una semplice struttura di collegamenti detti di primo livello; naturalmente è possibile realizzare
collegamenti a ulteriori livelli, collegando per esempio le pagine
di primo livello a ulteriori pagine e così di seguito.
Inoltre è possibile realizzare collegamenti tra pagine di livelli diversi, ottenendo una fitta “ragnatela” di connessioni che dà vita
alla struttura ipertestuale del sito.
9. Ora che hai definito i collegamenti tra le pagine, fai clic sul pulsante Comprimi per mostrare solo il sito locale o remoto per comprimere il pannello e riportarlo nella posizione originaria nel gruppo di pannelli File.
44