30

Adobe Dreamweaver CS3 a colori

Dopo aver visto velocemente i principali elementi dell’interfaccia diDreamweaver CS3, vediamo come progettare e costruire un sito Web.

Un sito Web non è altro che una serie di pagine Web collegate traloro, 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, siaun intero sito. Naturalmente un sito può anche essere composto dauna sola pagina. Per un sito Web formato da più pagine è invecenecessario progettare e pianificare in maniera appropriata il sito pri-ma di creare le pagine. Il primo passo dunque per la creazione diun sito Web è la pianificazione.

Pianificazione di un sito

È opportuno seguire una serie di fasi di pianificazione pergarantire il funzionamento ottimale del sito:

1. Decidere gli obiettivi del sito.

2. Scegliere il pubblico di riferimento per determinare i tipidi 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.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 30

31

Definire un sito

Dopo aver pianificato la struttura del sito, in Dreamweaver CS3 oc-corre definire un nuovo sito prima di iniziare il lavoro. Iniziamo quin-di 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 efai clic sulla voce Nuovo sito per attivare la creazione guidatadel nuovo sito.

2. Nella finestra “Definizione del sito” inserisci nel campo Co-me si desidera chiamare il sito? il nome da assegnare al si-to, digita quindi Sito personale e fai clic sul pulsante Avanti.

Definizione del sito

3. Nella seconda schermata devi indicare se il sito che stai co-struendo utilizzerà tecnologie server-side le quali permettonoper esempio la connessione con un Database. Seleziona l’op-zione Sì, voglio utilizzare una tecnologia server.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 31

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 se-leziona la voce ASPVBScript, il linguaggio Microsoft per creareapplicazioni lato server. Di seguito fai clic sul pulsante Avanti.

5. Nella schermata successiva nella sezione Come si intende la-vorare sui file durante lo sviluppo? seleziona l’opzione Ese-guendo 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 attivosulla tua macchina e la posizione dei suoi file. Lascia comeposizione dove archiviare i file che costituiranno il sito, la di-rectory proposta: c:\inetpub\wwwroot\Sito personale.Fai quindi clic sul pulsante Avanti.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 32

33

Definire un sito

7. All’apertura della nuova schermata, Dreamweaver CS3 proponel’URL del Web-server locale, cioè il nome con cui lo richiamadal browser: http://localhost/Sito personale/. Fai clic sul pul-sante 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 indi-care a Dreamweaver CS3 di non trasferire i file su un server re-moto, ma di lavorare sul computer locale. Fai quindi clic sul pul-sante Avanti per passare alla successiva schermata.

9. L’ultima finestra riporta le informazioni relative alle impostazioniassegnate al sito. Fai clic sul pulsante Fine per concludere ladefinizione del sito in questione.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 33

34

Adobe Dreamweaver CS3 a colori

10. A questo punto verrà creata all’interno del Web-server la cartel-la DreamweaverCS3 che conterrà tutti i dati relativi al sito e ospi-terà tutti i file che lo costituiranno. Puoi osservare nel gruppo dipannelli File, nel pannello Sito, la cartella appena creata e il re-lativo indirizzo.

Per installare IIS: Fai clic su Start, apri il Pannello di controllo equindi fai clic su Installazione applicazioni. Fai clic su Installazionecomponenti di Windows. Viene visualizzata l’Aggiunta guidata com-ponenti di Windows. Segui le istruzioni visualizzate per installare, ri-muovere o aggiungere componenti a IIS.

Tutti i sistemi Windows dispongono di un Web-server, IIS (In-ternet Information Services) per i sistemi professionali, op-pure PWS (Personal Web Service) per i sistemi casalinghi.IIS non viene però installato per impostazione predefinitama è possibile aggiungerlo mediante la finestra di dialogoInstallazione applicazioni del Pannello di controllo.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 34

35

Definire un sito

Dopo aver creato la cartella principale del sito, definiamo da quan-te e quali pagine il sito sarà composto.

Dreamweaver offre un ambiente flessibile in cui lavorare a più tipidi documenti Web. Oltre ai documenti HTML, è possibile creare eaprire un’ampia gamma di documenti basati su testo, tra cui CFML(ColdFusion Markup Language), ASP, JavaScript e CSS (CascadingStyle Sheets). Sono supportati anche i file contenenti codice sor-gente, per esempio Visual Basic, .NET, C# e Java. Dreamweaver for-nisce diverse opzioni per creare un nuovo documento. È possibilescegliere una delle opzioni seguenti:

● Un nuovo documento o modello vuoto.● Un documento basato su uno dei layout di pagina predefiniti forni-

ti 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 esem-pio, se normalmente si lavora con un solo tipo di documento, è pos-sibile impostarlo come tipo di documento predefinito per la creazio-ne di nuove pagine. Nella vista Progettazione o Codice, è possibile de-finire con facilità le proprietà dei documenti, come i tag meta, il titolodel documento, i colori di sfondo e molte altre proprietà della pagina.

Procediamo dunque definendo la Home Page, cioè la pagina chefarà da ingresso al sito:

Definizione delle pagine Web

1. Seleziona il menu Sito e fai clicsulla voce Gestisci siti.

2. Nella finestra Gestisci siti è pos-sibile visualizzare e scegliere ilsito da modificare. Al momen-to è presente e selezionato il si-to DreamweaverCS3 in quan-to unico sito definito. Fai clic sulpulsante Modifica.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 35

36

Adobe Dreamweaver CS3 a colori

3. Nella finestra Definizione del sito per DreamweaverCS3 faiclic sulla linguetta della scheda Avanzate.

4. Nel riquadro Categoria seleziona la voce Layout mappa del sito.

5. Nel campoHome pagedigita de-fault .htm ,che è il nomeprede f in i toper la primapagina di unsito nel ser-ver Microsoft.

9. Come puoi osservare nelgruppo dei pannelli File,nel pannello Sito è presen-te, indentata sotto l’iconadel sito Dreamweaver-CS3, l’icona della pagina default.htm appena creata.

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 esi-

ste, e ti chiede se desideri crearlo. Per confermare fai clic sulpulsante OK.

8. Fai clic sul pulsante Fine per completare l’operazione e chiu-dere la finestra Modifica siti.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 36

37

Definire un sito

Dopo aver definito la Home page, che fungerà da pagina di aperturadel sito, bisogna definire le pagine successive, dette di primo livello inquanto all’interno della struttura del sito sono a un livello inferiore ri-spetto alla Home page (questo concetto sarà ripreso e approfonditopiù avanti). È possibile creare pagine contenenti un layout CSS pre-definito, oppure creare pagine completamente vuote in cui utilizzareun layout personalizzato. Vediamo come definire una nuova pagina:

1. Potremmo definirla usando la finestra di benvenuto ma è preferibi-le percorrere la “vecchia” strada soprattutto se si dovesse decideredi non visualizzarla più e per avere maggiori dettagli di ciò che sista per creare. Seleziona il menu File e fai clic sulla voce Nuovo.

2. La finestra Nuovo documento permette di scegliere, per lacreazione delle pagine, fra varie categorie di tipi di file. Selezio-na Pagina vuota, nel riquadro Categoria la voce Pagina di ba-se e nel riquadro delle opzioni Tipo di messaggio fai clic sul-la voce HTML. Non selezionare nessun tipo di layout.

Creazione pagine di primo livello

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 37

38

Adobe Dreamweaver CS3 a colori

3. Si tratta di una semplice pagina HTML, ma come puoi notaredalla finestra è possibile scegliere tra diversi tipi di pagine. Percreare 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; ne-gli altri casi, seleziona la voce Nessuno. In base alla selezio-ne effettuata, a destra della finestra di dialogo vengono visua-lizzate un’anteprima e una descrizione del layout selezionato.

I layout CSS predefiniti forniscono i seguenti tipi di colonne:

Larghezza fissa. La larghezza della colonna è specificatain pixel. La colonna non viene ridimensionata in base alledimensioni del browser o alle impostazioni del testo del vi-sitatore del sito.

Elastiche. La larghezza della colonna viene specificata inun’unità di misura (ems) relativa alle dimensioni del testo.L’impostazione usata varia se il visitatore del sito modificale impostazioni relative al testo, ma non in caso di modifi-ca delle dimensioni della finestra del browser.

Liquide. La larghezza della colonna viene specificata comepercentuale della larghezza del browser usato dal visitatore delsito. L’impostazione usata varia se il visitatore del sito allarga orestringe la finestra del browser, mentre non cambia in basealle impostazioni del testo usate dal visitatore del sito.

Ibride. Le colonne sono una combinazione delle tre opzioniprecedenti. Per esempio, il layout a due colonne ibride nellabarra laterale destra ha una colonna principale liquida cheviene scalata in base alle dimensioni del browser, e una co-lonna elastica a destra che viene scalata in base alle di-mensioni delle impostazioni del testo del visitatore del sito.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 38

39

Definire un sito

4. Nell’area di lavoro viene aperta una nuova finestra con la pagi-na appena creata.

5. Seleziona il menu File e fai clic sulla voce Salva con nomeper salvare la pagina e assegnarle un nome.

6. Nella finestra Salva con nome inserisci nel campo Nome fi-le il nome da assegnare alla pagina, digita dunque introdu-zione e fai clic sul pulsante Salva.

7. Puoi notare che nel pannel-lo File è ora presente il fileintroduzione.htm.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 39

40

Adobe Dreamweaver CS3 a colori

8. Anche la barra del titolo della finestra del documento riporta orail nome assegnato alla pagina. Definita la pagina, puoi ora chiu-dere la finestra del documento (la riaprirai in seguito per inserirei contenuti) facendo clic sul pulsante Chiudi in alto a destra.

Definisci altre tre pagine seguendo le modalità viste sopra e salva-le con i seguenti nomi di file:

● Chi siamo ● Hobbies● Link utili

A fine lavoro nel pannello Fileosserva i file appena creati.

Aggiungiamo una pagina dinamica, cioè una pagina che farà riferimen-to 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 Catego-

ria la voce Pagina vuota e nel riquadro delle opzioni Tipo dimessaggio fai clic su ASP VBScript. Fai clic sul pulsante Crea.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 40

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.

Hai così definito quelle che saranno le pagine del sito, sei pagine,ognuna dedicata a un aspetto relativo all’argomento del sito.

4. Come puoi notare, nelpannello File la pagi-na libro ospiti ha l’e-stensione .asp e non.htm come le altre,questo perché hai pre-cedentemente impo-stato la pagina comepagina dinamica.

Come vedremo più avanti, in qualunque momento saràpossibile in seguito aggiungere o eliminare pagine dal sito,rinominarle oppure cambiare nome e directory.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 41

42

Adobe Dreamweaver CS3 a colori

Una delle caratteristiche fondamentali di una pagina Web è l’interattività,cioè la possibilità di passare da una pagina all’altra grazie a una struttu-ra “ipertestuale” che cioè collega pagine che fanno riferimento ad altrepagine situate sullo stesso computer o su computer diversi. Dopo averdefinito le pagine che costituiscono il sito, è necessario creare lastruttura ipertestuale del sito cioè il collegamento fra le pagine.Dreamweaver permette di realizzare ciò creando una mappa del si-to nella quale organizzare i collegamenti fra le pagine. Vediamo quin-di come creare la mappa del sito dell’esempio precedente:

1. Nel pannello File fai clic sul pulsante Espandi per visualiz-zare siti locali o remoti.

2. Il pannello viene espanso a tutto schermo occupando l’interaarea di lavoro.

3. Fai clic sul pulsante Mappa del sito e tenendo premuto il pulsantedel mouse seleziona, dal menu a comparsa, Mappa e file.

Mappa del sito

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 42

43

Definire un sito

4. Come puoi notare, il pannello è diviso in due sezioni principali, nel-la parte destra sono presenti i file delle pagine che costituiranno ilsito; nella parte sinistra, che ospiterà la mappa vera e propria delsito, è 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 sul-l’icona della sezione sinistra per fare apparire il pulsante di tra-scinamento (icona a forma di mirino).

6. Fai clic sul pulsante di trascinamento e tenendo premuto ilpulsante del mouse trascina il mirino sull’icona della pagina introduzione.htm presente nel riquadro destro della finestra.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 43

44

Adobe Dreamweaver CS3 a colori

7. Rilascia il pulsantedel mouse, a que-sto punto vedrai ap-parire nel riquadrosinistro della fine-stra il collegamentoeffettuato tra la ho-me page e la pagi-na di introduzione.

8. Collega, seguendole stesse modalità(passi 6-7), la ho-me page con le al-tre pagine fino adavere una mappa dicollegamenti comemostrato in figura.

La mappa realizzata presenta una semplice struttura di collega-menti detti di primo livello; naturalmente è possibile realizzarecollegamenti a ulteriori livelli, collegando per esempio le paginedi primo livello a ulteriori pagine e così di seguito. Inoltre è possibile realizzare collegamenti tra pagine di livelli di-versi, ottenendo una fitta “ragnatela” di connessioni che dà vitaalla struttura ipertestuale del sito.

9. Ora che hai definito i collegamenti tra le pagine, fai clic sul pul-sante Comprimi per mostrare solo il sito locale o remo-to per comprimere il pannello e riportarlo nella posizione origi-naria nel gruppo di pannelli File.

03-DreamweaverCS3.qxd 19-09-2008 14:14 Pagina 44