Definire un sito - Mondadori Informatica

Definire un sito
03
In questo capitolo
In questo capitolo apprenderai quali sono i criteri alla base della pianificazione per la
realizzazione di un sito Web. Imparerai a definire un sito e le pagine che lo costituiscono e realizzare i collegamenti fra le pagine. Apprenderai anche a realizzare e salvare la
mappa del sito. Infine vedrai come verificare il corretto funzionamento delle pagine
sul browser. Questo è il primo passo fondamentale nella progettazione e creazione di
pagine e siti Web: andando avanti nella lettura del libro apprezzerai ancora di più le
potenzialità di Dreamweaver CS5.
Pianificazione di un sito
Dopo aver visto velocemente i principali elementi dell’interfaccia di Dreamweaver
CS5, 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.
nota
È 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.
Dreamweaver CS5 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 for47
05-Cap3.indd 47
9-07-2010 14:06:10
C A P I TO L O
03
mato da più pagine è invece necessario progettare e pianificare in maniera appropriata
il sito prima di creare le pagine. Il primo passo per la creazione di un sito Web è dunque
la pianificazione.
Definizione del sito
Dopo aver pianificato la struttura del sito, in Dreamweaver CS5 occorre definire un
nuovo sito prima di iniziare il lavoro. Inizia quindi a costruire il sito Web definendone
la struttura.
nota
Prima di procedere verifica se il Web-server IIS è installato
sul tuo computer. 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 installato per impostazione predefinita, ma è possibile aggiungerlo mediante la
finestra di dialogo Installazione applicazioni del Pannello
di controllo.
Per installare IIS procedi nel modo seguente:
1. Fai clic su Start, apri il Pannello di controllo e quindi fai clic su Programmi.
Di seguito fai clic sulla voce Attivazione o disattivazione delle funzionalità di
Windows. Viene visualizzata l’Aggiunta guidata componenti di Windows; seleziona Internet Information Services e fai clic sul pulsante OK. Segui le istruzioni
visualizzate per installare i componenti IIS.
2. Dopo aver avviato Dreamweaver CS5, seleziona il menu Sito e fai clic sulla voce
Nuovo sito per attivare la creazione guidata del nuovo sito (figura 3.1).
Figura 3.1
Il comando Nuovo sito
48
05-Cap3.indd 48
9-07-2010 14:06:10
Definire un sito
3. Nella finestra Configurazione sito (figura 3.2) inserisci nel campo Nome del sito
il nome da assegnare al sito, per esempio Negozio, quindi imposta per la cartella
locale la directory C:\inetpub\wwwroot\negozio (figura 3.2).
Figura 3.2
La finestra Configurazione sito
4. Fai clic sulla voce Server per visualizzare la relativa schermata (figura 3.3).
Figura 3.3
La schermata Server
5. Fai clic sul pulsante Aggiungi nuovo server presente in basso nella finestra (figura
3.4).
49
05-Cap3.indd 49
9-07-2010 14:06:11
C A P I TO L O
03
Figura 3.4
La schermata Server
6. Imposta nel campo Indirizzo FTP la modalità Locale/Rete (figura 3.5).
Figura 3.5
La modalità Locale/Rete
7. Nella schermata successiva seleziona nel campo Cartella server la directory C:\
inetpub\wwwroot e fai clic sul pulante Avanzate (figura 3.6).
8. Seleziona nel campo Modello server l’opzione ASP VBScript e fai clic sul pulsante Salva (figura 3.7).
50
05-Cap3.indd 50
9-07-2010 14:06:11
Definire un sito
Figura 3.6
Impostazioni Server
Figura 3.7
Il campo Modello server
9. Spunta il riquadro di selezione della voce Di prova per poter eseguire modifiche e
prove localmente (il server di prova è su questo computer) usando il Web-server
locale. Fai quindi clic sul pulsante Salva per confermare le impostazioni effettuate
(figura 3.8).
10. A questo punto verrà creata all’interno del Web-server la cartella DreamweaverCS5 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 (figura 3.9).
51
05-Cap3.indd 51
9-07-2010 14:06:11
C A P I TO L O
03
Figura 3.8
Il campo Di prova
Figura 3.9
La cartella del 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 varie opzioni tra cui scegliere per creare un nuovo documento:
•• 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 basato su 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.
52
05-Cap3.indd 52
9-07-2010 14:06:12
Definire un sito
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.
nota
Con Dreamweaver CS5 puoi usare vari tipi di file. Il tipo di file
fondamentale utilizzato è il file HTML. I file HTML (HyperText
Markup Language) includono il linguaggio basato sui tag
responsabile della visualizzazione di una pagina Web in
un browser. Puoi salvare i file HTML con estensione .html o
.htm. Per impostazione predefinita, Dreamweaver CS5 salva
i file utilizzando l’estensione .html. Per un rapido promemoria riportiamo di seguito alcuni dei tipi di file più comuni
che è possibile utilizzare con Dreamweaver CS5:
• CSS. I file CSS (Cascading Style Sheet) hanno l’estensione
.css. Sono utilizzati per formattare i contenuti HTML e controllare il posizionamento dei vari elementi di una pagina.
• GIF. I file GIF (Graphics Interchange Format) hanno l’estensione .gif. Il formato GIF è un formato per la grafica Web
molto diffuso per sequenze animate, immagini con aree
trasparenti e animazioni. I file GIF contengono un massimo di 256 colori.
• JPEG. I file JPEG (Joint Photographic Experts Group, dal
nome dell’organizzazione che ha creato questo formato)
hanno l’estensione .jpg e generalmente rappresentano
immagini fotografiche o a elevati contenuti cromatici. Il
formato JPEG è la scelta ottimale per le fotografie digitali
o scansionate, le immagini che utilizzano texture, le immagini con transizioni di colori sfumati o qualsiasi immagine che richieda più di 256 colori.
• XML. I file XML (Extensible Markup Language) hanno
l’estensione .xml. Includono dati in forma non elaborata
che possono essere formattati tramite il linguaggio XSL
(Extensible Stylesheet Language).
• XSL. I file XSL (Extensible Stylesheet Language) hanno
l’estensione .xsl o .xslt. Sono utilizzati per applicare stili ai
dati XML che si desidera visualizzare in una pagina Web.
• CFML. I file ColdFusion Markup Language hanno l’estensione .cfm. Sono utilizzati per l’elaborazione delle pagine
dinamiche.
•ASPX. I file di ASP.NET hanno l’estensione .aspx e vengono
impiegati per elaborare le pagine dinamiche.
• PHP. I file di Hypertext Preprocessor hanno l’estensione
.php e vengono impiegati per elaborare le pagine dinamiche.
53
05-Cap3.indd 53
9-07-2010 14:06:12
C A P I TO L O
03
Procediamo dunque definendo la home page, cioè la pagina di ingresso del sito:
1. Seleziona il menu File e fai clic sulla voce Nuovo (figura 3.10).
Figura 3.10
Il comando File > 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 Tipo di pagina la voce HTML e nel riquadro Layout fai clic sulla voce Nessuno (figura 3.11).
Figura 3.11
La finestra Nuovo documento
54
05-Cap3.indd 54
9-07-2010 14:06:12
Definire un sito
nota
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.
nota
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.
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 (figura 3.12).
Figura 3.12
Il pulsante Crea
55
05-Cap3.indd 55
9-07-2010 14:06:12
C A P I TO L O
03
4. Nell’area di lavoro viene aperta una nuova finestra con la pagina appena creata
(figura 3.13).
Figura 3.13
La nuova pagina
5. Seleziona il menu File e fai clic sulla voce Salva
con nome per salvare la pagina e assegnarle un
nome (figura 3.14).
Figura 3.14
Il comando Salva con nome
56
05-Cap3.indd 56
9-07-2010 14:06:13
Definire un sito
6. Nella finestra Salva con nome inserisci nel campo Nome file il nome da assegnare
alla pagina, digita dunque default, che è il nome predefinito per la prima pagina
di un sito nel server Microsoft, e fai clic sul pulsante Salva (figura 3.15).
Figura 3.15
La finestra Salva con nome
7. Come puoi osservare nel gruppo di pannelli File, nel pannello Sito è ora presente,
indentata sotto l’icona del sito Negozio, l’icona della pagina default.htm appena
creata (figura 3.16).
Figura 3.16
Il pannello File
8. Anche la barra del titolo della finestra del Documento riporta ora il nome assegnato alla pagina. Definita la pagina, puoi chiudere la finestra del Documento (la
riaprirai in seguito per inserire i contenuti) facendo clic sul pulsante Chiudi in
alto a destra (figura 3.17).
Figura 3.17
Il pulsante Chiudi sulla barra del titolo
57
05-Cap3.indd 57
9-07-2010 14:06:13
C A P I TO L O
03
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. È possibile creare pagine
contenenti un layout CSS predefinito, oppure creare pagine completamente vuote in
cui utilizzare un layout personalizzato.
Vediamo come definire ulteriori pagine:
1. Seleziona il menu File e fai clic sulla voce Nuovo. Definisci altre nuove pagine
seguendo le modalità viste sopra e salvale con i seguenti nomi di file:
·· homepage;
·· Chi siamo;
·· raggiungerci;
·· link.
2. A fine lavoro, nel pannello File puoi osservare i file appena creati (figura 3.18)
Figura 3.18
Il pannello File
Aggiungiamo ora alcune pagine dinamiche. Una pagina dinamica fa riferimento a un
database dal quale estrapolare i dati da visualizzare all’interno della pagina stessa:
1. Seleziona il menu File e fai clic sulla voce Nuovo (figura 3.19).
Figura 3.19
Il percorso di menu
2. Nella finestra Nuovo documento seleziona la voce Pagina vuota e nel riquadro
delle opzioni Tipo di pagina fai clic sulla voce ASP VBScript. Fai infine clic sul
pulsante Crea (figura 3.20).
3. Seleziona il menu File e fai clic sulla voce Salva con nome. Nel salvare la pagina
assegnale il nome catalogo (figura 3.21).
58
05-Cap3.indd 58
9-07-2010 14:06:13
Definire un sito
Figura 3.20
La finestra di dialogo Nuovo documento
Figura 3.21
Salvataggio della pagina
4. Come puoi notare, nel pannello File la pagina “catalogo” ha l’estensione .asp e non
.html come le altre, perché hai precedentemente impostato la pagina come pagina
dinamica (figura 3.22).
59
05-Cap3.indd 59
9-07-2010 14:06:14
C A P I TO L O
03
Figura 3.22
La pagina dinamica nel pannello Sito
5. Se necessario crea ulteriori pagine dinamiche e salvale.
Hai così definito quelle che saranno le pagine del sito, ognuna dedicata a un aspetto
relativo all’argomento del sito.
nota
Come vedremo più avanti, in seguito sarà possibile in qualunque momento aggiungere o eliminare pagine dal sito,
rinominarle oppure cambiare nome e directory.
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 opportunamente 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 i collegamenti fra le pagine.
Vediamo quindi come creare la mappa del sito dell’esempio precedente:
1. Nel pannello File, fai doppio clic sul file default.html per aprire la pagina nell’area
di lavoro (figura 3.23).
Figura 3.23
Il file default.html
60
05-Cap3.indd 60
9-07-2010 14:06:14
Definire un sito
2. Fai clic sulla pagina per attivare il cursore di inserimento. Digita quindi i nomi
delle pagine da collegare (figura 3.24).
Figura 3.24
Le pagine da collegare
3. Seleziona il testo della pagina da collegare (figura 3.25).
Figura 3.25
Selezione di testo
4. Nella finestra di ispezione Proprietà fai clic sul pulsante Cerca file (figura 3.26).
Figura 3.26
Il pulsante Cerca file
5. Per collegare il testo alla pagina relativa, seleziona la pagina e fai clic sul pulsante
OK (figura 3.27).
61
05-Cap3.indd 61
9-07-2010 14:06:14
C A P I TO L O
03
Figura 3.27
La pagina selezionata
6. Fai clic nell’area di lavoro per deselezionare il testo e osserva come lo stesso appaia
ora di colore blu e sottolineato a indicare il collegamento effettuato (figura 3.28).
Figura 3.28
Collegamento tra pagine
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à (passaggi 3-7), i rimanenti titoli con le relative pagine (figura 3.29).
62
05-Cap3.indd 62
9-07-2010 14:06:15
Definire un sito
Figura 3.29
La pagina default.html e i collegamenti effettuati
9. Salva la pagina.
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.
Il browser Web
Strumento indispensabile per la visualizzazione delle pagine Web è il “browser Web”.
I più utilizzati sono “Microsoft Explorer” e “Netscape Navigator”. Dreamweaver CS5
permette di visualizzare un’anteprima delle pagine in costruzione aprendo il file automaticamente nel browser.
Ritornati all’area di lavoro verifichiamo, tramite il browser, che i collegamenti effettuati nella mappa del sito siano corretti e funzionanti:
1. Dal pannello File fai doppio clic sull’icona default.htm per aprire la pagina
nell’area di lavoro (figura 3.30).
63
05-Cap3.indd 63
9-07-2010 14:06:15
C A P I TO L O
03
Figura 3.30
La pagina default.html
2. Nell’area di lavoro viene aperta la finestra del Documento, contenente la pagina
default.htm (figura 3.31).
Figura 3.31
La pagina nella finestra del Documento
3. Come puoi osservare, nella pagina default.htm, definita come pagina principale
e collegata alle altre pagine del sito, sono presenti diversi termini sottolineati, ovvero le pagine collegate. Tali punti o parole chiavi e sono detti “link”. Facendo clic
su un link si accede alla pagina a esso collegata. Da Dreamweaver CS5 non è però
possibile verificare direttamente i collegamenti facendovi clic sopra, ma occorre
aprire la pagina con il browser. Per far ciò seleziona dal menu File la voce Visualizza anteprima nel browser e di seguito fai clic sulla voce IExplore (figura 3.32).
64
05-Cap3.indd 64
9-07-2010 14:06:15
Definire un sito
Figura 3.32
Il comando Visualizza anteprima nel browser
nota
Per visualizzare immediatamente la pagina nel browser,
premi il tasto F12 sulla tastiera del tuo computer.
4. Ecco come appare la pagina Web nel browser Microsoft Internet Explorer. Se posizioni il cursore su un link, lo stesso assume la forma di una manina chiusa con
l’indice puntato a indicare la presenza di un collegamento, e nella barra di stato
del browser puoi leggere il percorso e il file collegato. Fai clic sui link e verifica che
tutto funzioni correttamente (figura 3.33).
5. Le pagine collegate sono chiaramente vuote perché ancora non è stato inserito
nessun tipo di contenuto. Per verificare che la pagina collegata sia quella giusta,
controllane il nome nel campo Indirizzo del browser (figura 3.34).
65
05-Cap3.indd 65
9-07-2010 14:06:15
C A P I TO L O
03
Figura 3.33
La pagina default.html nel browser
Figura 3.34
La pagina collegata
66
05-Cap3.indd 66
9-07-2010 14:06:16