Dreamweaver CS4

Poichè si crea un nuovo sito gestito per ogni progetto se si lavora in Dreamweaver, tenere traccia di tutti i siti è relativamente facile. È possibile visualizzare un elenco di tutti i siti gestiti come segue:

• Pannello File: il pannello File elenca i file da un sito gestito selezionato. Per modificare la visualizzazione da un file da un sito ad un file di un altro sito, selezionare il sito desiderato, scegliendo dall’elenco dei siti gestiti.
• Finestra di dialogo Gestione Siti: Scegli Sito ➪ Gestisci siti per aprire la finestra di dialogo Gestione Siti. Seleziona il tuo sito desiderato dalla lista e fai clic sul pulsante OK per passare al sito selezionato e vedere i file di quel sito elencato nel pannello file. Si può vedere in breve l’apertura delle finestre di dialogo Opening Site e Uploading Site Cache appena Dreamweaver apre il sito selezionato.

Duplicare siti

Crea il duplicato esatto di copie di qualsiasi sito esistente, definite facendo clic sul pulsante Duplica nella finestra di dialogo Gestione Siti. Dreamweaver copia tutte le impostazioni e crea il nuovo sito con lo stesso nome file allegato con la
parola “copy”.
Ad esempio, se duplicate un sito chiamato Società ABC, il nome del nuovo sito gestito duplicato sarebbe Società ABC copy fino a che lo rinominiamo.
Questo non copia i file effettivi. Crea semplicemente un nuovo sito all’interno di Dreamweaver, che sarà poi possibile modificare. Spesso, dovrete anche duplicare la cartella locale e tutti i suoi file in modo da avere una nuova copia per lavorare in Dreamweaver.

Esportazione ed importazione di siti

Dreamweaver consente di salvare e riaprire siti come file XML utilizzando il tool Import Export. In altre parole, potrai esportare un sito con tutte le sue impostazioni in un file XML e quindi importare il sito con le stesse impostazioni più tardi, sia sulla stessa macchina o su un’altra macchina. Questo metodo è utile per ottenere un nuovo computer installato e funzionante con tutti i siti che stai gestendo.

Esportazione dei siti

Per salvare un sito come un file XML, attenersi alla seguente procedura:

1. Scegli sito ➪ Gestione siti per aprire la finestra di dialogo Gestione siti.
2. Seleziona uno o più siti e fai clic sul pulsante Esporta. Usare Ctrl + clic (Windows) oppure Mela + clic (Mac) per selezionare più file.
3. Individuare, selezionare e salvare la posizione per l’esportazione di ciascun sito. Il file esportato viene salvato come file XML con estensione .ste.

Importazione di siti

Per importare i file XML precedentemente esportati in Dreamweaver, seguire questi passaggi:

1. Scegli sito ➪ Gestione siti per aprire la finestra di dialogo Gestione siti.
2. Fare clic sul pulsante Importa.
3. Sfogliare e selezionare uno o più siti con l’estensione .ste. Usare Ctrl + clic (Windows) oppure Mela + clic (Mac) per selezionare più file.
4. Fare clic su Apri per avviare il processo di importazione. La finestra di dialogo Gestisci siti elenca il nome del sito quando il processo di importazione è stato completato.

Cancellare un sito dalla lista Gestione siti

Quando si rimuovono siti, tenete a mente che i siti elencati nella finestra di dialogo Gestione siti sono solo i puntatori alla posizione dei file sul computer specificato e non i file e le cartelle effettivi.
Pertanto, la rimozionedi un sito dall’elenco dei siti gestiti rimuove solo le informazioni di localizzazione di cui Dreamweaver ha bisogno per lavorare sui file nel sito specificato.
Come un backup, prima di rimuovere un sito gestito, si può esportare il sito utilizzando la procedura di esportazione come già descritto sopra. Avrete così una copia a portata di mano nel caso avreste mai bisogno di importare in Dreamweaver.
Per rimuovere il sito da Dreamweaver, selezionare il sito dalla finestra di dialogo Gestione Siti e fare clic sul pulsante Rimuovi. Dreamweaver visualizza “ Non è possibile annullare questa azione”e. Non disperiamo, se accidentalmente eliminiamo un sito gestito dalla lista, si può semplicemente ri-creare.

Se sei un designer esperto, probabilmente vorrai usare la scheda avanzata della finestra di dialogo Definizione del sito per specificare le impostazioni gestite in locale.

Per iniziare il lavoro in modo rapido, è possibile impostare solo la cartella locale per ora, è possibile tornare alla finestra di dialogo Definizione del sito in qualsiasi momento per aggiungere cartelle remote e di prova.

Detto questo, se avete già tutte le informazioni necessarie per il vostro sito, inserendo tutto in una volta può essere più semplice.

Tecnicamente, è solo necessario compilare la categoria Informazioni locali e la categoria Informazioni su remoto anche se si intende utilizzare Dreamweaver per caricare il sito su un server remoto.

Potete completare le restanti categorie, se necessario.

Per ottenere il tuo sito attivo e funzionante a livello locale, procedere come segue:

1. Sito Scegli ➪ nuovo sito.

   La finestra di dialogo Definizione del sito si apre.

2. Selezionare la scheda Avanzate.

   La scheda Avanzate della finestra di dialogo Definizione del sito, come mostrato nella seguente figura
   

3. Nel campo Nome sito, immettere il nome del tuo sito. Scegliere un nome che corrisponde al nome del cliente o che indica lo scopo del sito è la cosa migliore, come ABC Company o mio blog.
4. Verificare che il campo Local Root Folder abbia il corretto url alla cartella della root sul web server

   Per mantenere i vostri file organizzati, aggiungere la cartella myblog (\ MyBlog \), per esempio, alla fine della root del vostro Web in modo che tutti i file relativi a questo sito siano in una cartella web accessibile. Ciò non è necessario, ma

   evita di tenere troppi files non collegati nella vostra web root.

5. Lasciare il campo Default Images Folder vuoto.

   Poiché si tratta di un nuovo sito, non vi è alcuna cartella ancora creata per archiviare tutte le immagini all’interno. È possibile creare tale cartella ora, o aggiungendone una dopo dopo che il sito è stato gestito. La maggior parte delle immagini vanno in cartelle chiamate immagini o img.

6. Seleziona il documento come Collegamenti relativi al setting.

   Questa opzione crea dei links nel vostro sito che si riferiscono ad altri files utilizzando le loro posizioni relative al file attivo. Questo consente di spostare con facilità il vostro sito in una directory diversa.

7. Nel campo Indirizzo HTTP , inserire http://localhost/directoryname, dove directoryname è la directory locale nella tua directory principale Web inserita nella Fase 5.

   Per esempio, se si sta utilizzando la ricetta sotto la directory Web principale, inserire http://localhost/myblog.

8. Lasciare il controllo link link Case-Sensitive Controllo. Questa opzione dice a Dreamweaver di non preoccuparti per il case di nomi nei links.
9. Lasciare la casella di controllo Abilita cache selezionata. Questa opzione consente di aumentare l’utilizzo di files in Dreamweaver.
10. Fare clic su OK nella finestra di dialogo Definizione del sito.
11. Fare clic sul pulsante Fine della finestra di dialogo Gestisci siti. Il tuo sito si apre, visualizzando tutti i files esistenti (se presenti) nella cartella principale nel pannello File.

Le sezioni seguenti descrivono le altre categorie

Informazioni remote

Dopo aver specificato la cartella locale, inserire le informazioni Remote. La cartella remota è il posto per memorizzare i file per la collaborazione, il controllo, produzione e distribuzione.

Se il server Web è in esecuzione sul computer locale, non è necessario impostare la cartella remota, sempre che la cartella locale specificata punti allo stesso file.

Testare il server

Nella categoria Testing Server, specificare il percorso in cui volete che le pagine dinamiche vengano processate. In altre parole, questa cartella è un percorso alternativo dove è possibile verificare i file su un server con un database con identiche configurazioni, senza dover distribuire i files sul sito live mentre sono ancora in fase di sviluppo. Il server di prova può essere sul vostro computer locale o su un server di produzione.

Controllo versione

Questa categoria è il controllo della versione in cui è possibile l’accesso remoto al setup di un server che esegue il software Subversion al cui interno del sito può essere visto, in confronto, e tornare a versioni precedenti del sito. Se non si sta utilizzando un software per il controllo delle versioni Subversion, ignorare questa impostazione.

Cloaking

Il cloaking previene che specifici files o cartelle specificato i file e le cartelle siano incluse in varie operazioni del sito, come la sincronizzazione dei file tra locale e del server remoto. Ad esempio, potreste voler un cloak di pesanti video di grandi dimensioni o grosse cartelle di design senza che ogni volta che si aggiorna il file del sito venga aggiornato il server remoto.

Note design

Dreamweaver consente di creare e condividere le Design Notes sui files del sito, che vengono poi memorizzate in una posizione separata. Attivare questa funzione quando si comunica all’interno di un team di progettazione o gruppo di lavoro su un sito comune gestito. E’ possibile allegare Design Notes ai documenti, modelli, immagini, filmati Flash, controlli ActiveX e applet.

File view columns

Nel pannello Files espanso, Dreamweaver visualizza dettagli di file e cartelle in colonne accanto al nome del file. È possibile personalizzare tali files e cartelle apportando modifiche alla categoria File View Colonne.

Ad esempio, si può nascondere e visualizzare, aggiungere ed eliminare, riordinare, condividere e rinominare le impostazioni delle colonne.

Contribute

Quando si crea un sito per l’utilizzo con il software Adobe Contribute, è Contribute che deve abilitare la compatibilità prima di passare il sito in Dreamweaver. La categoria Contribute consente di immettere impostazioni di amministrazione.

Templates

Per impostazione predefinita, l’opzione di aggiornamento Template è impostata su non riscrivere i percorsi relativi del documento. Per disattivare questa funzione, deselezionare la casella di controllo.

Spry

Se si desidera, è possibile specificare il percorso della cartella per gli assets Spry. Tuttavia, una cartella denominata SpryAssets è predisposta per essere creata nella cartella principale locale. Non modificare questa opzione a meno che sapete davvero cosa state facendo.

Costruire un sito gestito con Dreamweaver significa semplicemente definire un sito locale sul vostro computer, in modo che Dreamweaver sappia dove salvare i documenti e cercare i file ad esso collegati.
Avete la possibilità di creare un sito gestito per ogni progetto su cui state lavorando, in modo tale da poter aprire e modificare file specifici di un determinato sito dal pannello File.
Provate sempre a progettare o a gestire il sito prima di iniziare a svilupparlo, per garantire che il sito tragga profitto dalle eccezionali possibilità di gestione offerte da Dreamweaver, come ad esempio il supporto per gli aggiornamenti automatici dei collegamenti e il controllo dei collegamenti dell’intero sito.
Dreamweaver vi permette di creare facilmente un sito gestito, in due modi.
Il metodo Generale usa un wizard con una procedura guidata, mentre il metodo Avanzato vi consente di scegliere manualmente tutte le impostazioni relative alle cartelle locali, remote e di prova, come pure altre opzioni divise per categoria.
Se state muovendo i primi passi con Dreamweaver, vi consigliamo caldamente di usare il wizard.
Se invece preferite seguire la via Avanzata, date un’occhiata all’ articolo successivo (“Costruire un sito in modalità Avanzata) per ulteriori dettagli.
Per costruire un sito con Dreamweaver usando il wizard, seguite questa procedura:

1. Fate clic sul menu Sito, e poi su Gestisci siti.
   È anche possibile lanciare il wizard selezionando l’opzione Gestisci siti dal menu a discesa Gestisci siti contenuto nel pannello File. Per evitare completamente la finestra di dialogo Gestisci siti, fate clic sul menu Sito, poi su Nuovo sito e andate direttamente al punto 3.
   A questo punto si aprirà la finestra di dialogo Gestisci siti.
2. Fate clic su Nuovo, e dal menu a discesa che compare, scegliete la voce Sito.
   Si aprirà la finestra di dialogo Definizione del sito.
3. Fate clic sulla linguetta Generali.
   La Figura  illustra il wizard Generali. Il wizard vi conduce passo dopo passo nella costruzione di un nuovo sito.
   
4. Date un nome al sito e scrivete l’indirizzo HTTP del sito (l’URL); poi fate clic sul pulsante Avanti.
   Il nome che scrivete è totalmente arbitrario e può essere scelto a piacere in maniera tale da ricordare il nome del file sul computer locale. Ad esempio, potreste voler chiamare il sito come il cliente per cui lo state realizzando, (ad esempio FlepStudio), oppure quando il nome del cliente è molto lungo (ad esempio Associazione Giovani Imprenditori Torinesi), potreste voler usare un’abbreviazione, come AGIT.
5. Decidete se volete lavorare con una tecnologia server
   No, non voglio utilizzare una tecnologia server: selezionate quest’opzione e poi fate clic su Avanti.
   Sì, voglio utilizzare una tecnologia server: selezionate una tecnologia server dal menu a discesa e poi fate clic su Avanti.
   Se non siete sicuri, per il momento fate clic su No. Potrete sempre ritornare indietro in un secondo momento e aggiungere le informazioni relative al server. Per ulteriori informazioni sulla scelta e sull’impostazione di una tecnologia server, pubblicheremo articoli specifici.
6. Scegliete se eseguire le modifiche sui file localmente prima di caricarli, oppure se lavorare direttamente sul server usando una rete locale. Inoltre, specificate la posizione sul computer in cui saranno archiviati i file del sito (ovvero la cartella principale locale del sito). Fate clic su Avanti.
   Anche se qui viene presentata come possibilità, non vi consigliamo di lavorare o effettuare modifiche direttamente sul server, perché ciò equivarrebbe a modificare il sito Web finale senza aver effettuato alcun test. Ovviamente non si tratta di una buona idea, né per i principianti né per gli esperti.
   Dreamweaver potrebbe tentare di recuperare automaticamente la posizione sul vostro computer, basandosi sul nome del sito fornito durante il primo passaggio. Se volete cambiarlo, fate clic sull’icona della cartella vicino alla casella di testo, per navigare sul vostro computer locale e scegliere la cartella che fa al caso vostro.
7. Scegliete un metodo di connessione con il server remoto. La parte inferiore della finestra cambia a seconda del metodo selezionato. Fate clic su Avanti.
   Ad esempio, se pensate di connettervi usando l’impostazione Locale/rete, scrivete il percorso della cartella sul server dove saranno memorizzati i file.
   Per una spiegazione esauriente di queste opzioni, consultate il Volume V, Capitolo 3.
8. Se avete selezionato l’opzione server remoto, scegliete se abilitare il deposito/ritiro dei file remoti per questo sito. Fate clic su Avanti.
   Se attivate quest’opzione, solo una persona alla volta può ritirare i file. È anche necessario selezionare un metodo che Dreamweaver userà per trattare i file al momento del ritiro, e inserire il proprio nome e l’indirizzo e-mail.
9. Appare un riepilogo delle impostazioni del sito, perché possiate ricontrollare il tutto, come illustrato in Figura.
   Usate il pulsante Indietro per ritornare a una schermata precedente se dovete effettuare delle modifiche.
10. Fate clic sul pulsante Fine per accettare le impostazioni e chiudete il wizard Generali.
11. Fate clic sul pulsante Fine nella finestra di dialogo Gestisci siti.
    La finestra di dialogo Gestisci siti si chiude e in Dreamweaver si apre il sito appena definito: tutti i file eventualmente già presenti vengono visualizzati nel pannello File, sotto la cartella principale.
    
    Se il server, o il computer su cui lavorate, non viene sottoposto a backup regolari, prendete seriamente in considerazione l’opportunità di creare una copia di backup locale del sito prima di effettuare di volta in volta le modifiche. Effettuare i backup è una pratica consigliabile, che vi può essere davvero utile se fate degli errori, se perdete dei dati o volete ritornare indietro a una versione precedente.
    

Dopo aver deciso quale sarà la struttura generale del vostro sito Web, il passo successivo è quello di decidere come organizzare e collegare tra loro i file, relativamente alla cartella principale (la cartella di livello più alto).

Ogni pagina di un sito Web possiede un indirizzo o URL (Uniform Resource Locator) univoco, come ad esempio http://www.adobe.com/products/dreamweaver/index.html. Quando realizzate un collegamento locale (un collegamento tra due file contenuti nello stesso sito), tuttavia, in genere non sarà necessario specificare l’URL completo del file a cui vi state collegando. Al contrario, sarà necessario impostare soltanto il percorso relativo, cioè il percorso che va dal file corrente o dalla cartella principale del sito verso il file a cui vi volete collegare. Ad esempio, per creare un collegamento da una pagina about.html verso una pagina contact.html, entrambe residenti nel livello principale di un URL, il codice per il collegamento locale sarebbe:

<a href=”contact.html”>Contact Us</ a>

È possibile usare tre tipi di percorsi per i link:

1. Percorsi relativi ai documenti. Questo tipo di collegamento specifica il percorso e il nome del documento verso cui il link punta, come ad esempio about.html o photogallery/ MollySurfing.html.
   Il concetto generale che sta alla base dei percorsi relativi ai documenti è che non è necessario aggiungere l’URL assoluto (completo), comprensivo di http://, per farli funzionare, perché tutti i file collegati risiedono o nel livello principale o in una sottocartella della cartella principale locale.Usando la struttura del sito Pacific Surf contenuta in Figura 3.1 per creare un percorso relativo al documento verso un file contenuto in una sottocartella del livello principale, aggiungete uno slash dopo il nome della cartella contenente il file a cui volete collegarvi, come in quest’esempio:

   photogallery/MollySurfing.html

   Questo percorso comunica al browser di scendere di un livello nella gerarchia del sito, cioè dal livello principale verso la cartella di nome Photogallery, per trovare un file di nome MollySurfing.html. Se poi voleste aggiungere un link testuale che vada dalla pagina MollySurfing.html alla pagina about.html, dovreste aggiungere due punti fermi seguiti da uno slash (../) prima del nome del file, scrivendo ../about.html. I due punti fermi servono per dire al browser di risalire di un livello nell’albero delle cartelle. La Tabella seguente fornisce diversi scenari di collegamenti possibili, che possono aiutarvi a comprendere un po’ meglio la struttura del percorso.

   Link da A a B - esempio link
   Da index.html ad about.html - about.html
   Da about.html a MollySurfing.html - /photogallery/MollySurfing.html
   Da MollySurfing.html a KimAndJeff.html - KimAndJeff.html
   Da MollySurfing.html a contact.html - ../contact.html

   Fate attenzione: è necessario salvare i nuovi file prima di creare i percorsi relativi ai documenti, per garantire che il percorso venga salvato senza errori. Altrimenti, potreste vedere nel codice un percorso temporaneo che inizia con file://, finché il file non viene salvato e Dreamweaver può aggiornare tutti i percorsi temporanei creando percorsi relativi.

2. Percorsi relativi alla cartella principale del sito. I link che usano i percorsi relativi alla cartella principale del sito visualizzano il percorso e il nome del documento a cui ci si collega, ma direzionano il browser in modo che inizi la ricerca del percorso cominciando dal livello principale del sito. Per indicarli, specificate uno slash prima del primo nome di file o di cartella nel codice del link, come in questi due esempi:

   /contact.html
   /services/widgets.html

   Lo slash indica la cartella principale del sito. Usate questi percorsi per siti grandi che risiedono su parecchi server diversi, per un sito che ha host multipli o per siti che usano i Server Side Include (SSI).

3. Percorsi assoluti. Un percorso assoluto è l’URL completo del documento verso cui si punta, come in quest’esempio:

   http://www.example.com/services/widgets.html

   È necessario usare i percorsi assoluti per i file residenti su altri server, come nel caso di un link per comprare un libro su amazon.com o un link che vi porta verso una certa pagina o un certo blog.
   L’uso dei percorsi assoluti è alquanto sconsigliabile per le pagine locali del sito, poiché i link che puntano ai file spostati da un nome di dominio all’altro o da una cartella all’altra diventano inutilizzabili.
   Quindi, a meno di avere un buon motivo per usare i percorsi assoluti, provate a usare i percorsi relativi ai documenti quando possibile.

Prima di creare e gestire con Dreamweaver il vostro primo sito Web, è necessario acquisire familiarità con la struttura generale dei siti Web e capire i fondamenti dei diversi tipi di organizzazione della cartella principale del vostro computer, trattati nei prossimi articoli di questo blog.

Struttura dei siti Web

I siti Web di solito sono formati da due o tre parti fondamentali:

• la cartella locale: questa cartella, definita anche cartella principale locale, contiene tutti i file, le immagini e le altre risorse del sito gestito dal programma. Il livello principale, in parole povere, è il livello superiore o il punto di partenza usato dal browser per individuare gli oggetti all’interno di un sito Web. La cartella locale di solito è collocata sul disco fisso del vostro computer, ma a volte può anche stare su un’unità mappata o su un server di rete. Indipendentemente dal luogo in cui risiede, è necessario specificare la collocazione della cartella principale locale nella finestra di dialogo Definizione del sito.
• la cartella remota: si tratta della cartella in cui pubblicate il sito, collocata tipicamente su un server Web remoto. Ad esempio, quando comprate un servizio di hosting Web, state essenzialmente affittando un posto in cui parcheggiare il vostro sito, all’interno di quel parcheggio virtuale che si chiama Internet. Il parcheggio si trova nel server Web remoto dell’host. Per garantire che il sito che volete pubblicare funzioni e sia sempre aggiornato, trasferirete i file dalla cartella locale alla cartella remota. Al momento di impostare la cartella remota, potete scegliere tra molte opzioni.
• la cartella server di prova: si tratta della cartella in cui Dreamweaver processa i dati per creare il contenuto dinamico e si connette con un database quando voi create e testate il sito. Il server di prova può trovarsi sul computer locale, può essere un server di sviluppo o virtuale, oppure un server di produzione. Non vi consigliamo di usare la cartella remota come cartella server di prova, perché potreste incontrare alcuni problemi.