Galleria di foto nel proprio sito

Il vantaggio più segnato portato dal web 2.0 è la possibilità è la possibilità di condivisione dei contenuti, usando strumenti messo a disposizione da gruppi di programmatori di grande società, quali google, ad esempio.

Picasa è lo strumento che offre Google per gestire le proprie fotografie, mettendo a disposizione ben 1GB di spazio gratuito per le nostre immagini (circa 4.000 foto). Questo strumento (e ci sono altre nella rete!) è utile perché possiamo usarlo per integrare nel nostro proprio sito le foto che carichiamo li. E il tutto con due righe di codici.

Per usare questa tool è necessario aver un account google. Chi ha già un indirizzo di posta gmail non deve creare un altro account. Creare un account in google è molto semplice e non significa dover creare un nuovo indirizzo. Possiamo usare anche un indirizzo yahoo, ad esempio. Basta accederea questo link e compilare il modulo.

Fatta l’iscrizione, entrando nel sito di google, bisogna fare il login. Dopo il login, nella parte superiore, a sinistra, dello schermo troviamo un menu orizzontale. Tra le voci del menu troviamo “foto” (se non la vediamo, dobbiamo cliccare in “Altro”). Per caricare le foto, è sufficiente cliccare nel tasto “Carica”, sempre nella parte superiore dello schermo. Vi chiederà un nome per l’album che state creando. E poi bisogna scegliere le foto da inserire nel album. Tutto è molto intuitivo e penso non ci siano problemi.

Creato l’album, lo troveremmo nelle miniature che appaiono quando clicchiamo in “home”, del menu di picasa. Cliccando sopra apriamo tutte le miniature della galleria. Nella colonna di destra troviamo una frase linkata: “Link a questo album”. Quando clicchiamo sopra si aprono due righe di codice: la prima è il link e la seconda un codice che mostra una foto dell’album. A noi, invece interessa inserire l’album nel sito. Pertanto cliccheremmo  sulla riga “incorpora slide show”. Si apre una finestra con il codice che ci interessa. Un quadretto giallo contiene il codice che servirà. Dobbiamo copiarlo, selezionandolo e copiando (destro del mouse + copia).

Dopo aver copiato il codice, dobbiamo aprire dreamweaver, aprire la pagina che conterrà questo codice. Essendo un codice, non lo possiamo inserire nella modalità design. Quindi, dopo aver aperto il file nel quale vogliamo inserire l’album, scegliamo la modalità di visualizzazione “Split” (cioè, vediamo il codice e il disegno). Per essere sicuri di inserire nel posto giusto, clicchiamo col cursore del mouse, nel disegno, nel punto in cui vorremmo inserire l’album. Quindi vedremmo il cursore anche nel codice. Facciamo un click con il mouse nel punto giusto del codice e incolliamo il codice copiato da Picasa.

Basta salvare e trasferire l’archivio Online e avremmo un bell’album nel nostro sito.

Immagini in Dreamweaver

Dopo aver editato l'immagine conforme i parametri desiderati, la salviamo nella cartella del sito che abbiamo creato a posta per metterci le nostre immagini. Se prendiamo l'immagine dal web, basta cliccare con il destro del mouse e usare l'opzione "Salva immagine con nome".
Aperta la pagina in cui dobbiamo inserire l'immagine, certifichiamo di mettere il cursore nel punto in cui la vogliamo. Possiamo quindi seguire l'opzione dal menu Insert + images + ok
Nella finestra che appare bisogna compilare il campo "Alternate text". Questo sarà il testo che apparirà quando l'utente andrà col mouse sull'immagine.
Cliccando sull'immagine, nella parte inferiore dell'area di lavoro di Dreamweaver troviamo le sue proprietà. Possiamo impostare alcune caratteristiche:
Align - mettendo, ad esempio, right, definiamo che l'immagine si sposterà a destra e l'eventuale testo scorrerà intorno.
Bordo - definisce il bordo dell'immagine
VSpace - É bene mettere "5". Definisce lo spazio tra l'immagine e l'eventuale testo (sopra e sotto)
HSpace - É bene mettere "5". Definisce lo spazio tra l'immagine e l'eventuale testo (destra e sinistra)

Abbiamo anche la possibilità di creare delle "aree cliccabile" dentro dell'immagine. Cioè, invece di mettere un link che comprende tutta l'immagine, possiamo dire, ad esempio, che cliccando sulla sua parte superiore  andiamo ad una pagina, mentre cliccando in quell'inferiore finiremo su altra pagina.
Per usare questo strumento, tenendo selezionada l'imagine, come sopra, nelle sue proprietà troviamo "Map". Scegliamo uno strumento tra i 3 disponibile e traciamo un disegno (tenendo premuto il tasto del mouse) sull'immagine.Fatto il nostro disegno, nella parte inferiore appare il quadro delle proprietà di questo disegno: link (ad esempio http://www.google.com), target (ad esempio "_blank") e Alt (la descrizione che sarà vista quando l'utente mette il mouse sopra).

Le tabelle con Dreamweaver

In Dreaweaver assicuriamoci che sia attiva la finestra inserisci (Finestra + inserisci). Clicchiamo sulla “linguetta” ‘layout’.

Apriamo la nostra pagina in DreamWeaver.  Di seguito ci posizioniamo, con il cursore sul punto in cui dovrebbe andare la tabella. Clicchiamo quindi sull’icona simile ad una tabella, nella linguetta “comuni”.

Si apre una finestra che domanda le proprietà della tabella che sto per inserire. Queste proprietà possono essere cambiate anche in un secondo momento. Per ora scegliamo 2 righe e 2 colonne. Mettiamo anche un bordo (1) per vedere bene come funzionano le tabelle.

Inserita la tabella, possiamo modificare ogni singola cella della tabella.

Ad esempio, per cambiare il colore di sfondo, ci posizioniamo col cursore sulla cella interessata. Nella parte inferiore dell’area di lavoro di DreamWeaver dovrebbe apparire “proprietà” (ci assicuriamo che sia spuntata l’opzione “html” di proprietà). In questa posizione sono presenti diverse opzioni: colore, altezza, larghezza.

Per aggiungere nuove righe, se necessario, devo assicurarmi che sia selezionata la linguetta “layout” della finestra “inserisci”. Ci mettiamo in una riga della tabella. Scegliamo quindi una delle opzioni rappresentate dall’icona di inserimento di righe e o colonne.

Per layout complessi possiamo procedere con inserimento di tabelle dentro di singole celle.

Possiamo provare costruendo una pagina simile a questa di questo link.

Un menu con DreamWeaver CS5

Il programma permette di creare, con pochi clicks un menu d’accordo con le nostre necessità, creando automaticamente tutti gli stili necessari.

1. Se ancora non visibile dobbiamo attivare il panello “Inserisci” (Finestra + Inserisci) – Il quadro con le differenti opzioni dovrebbe apparire sotto le voci del menu orizzontale del programma.
2. Dalle opzioni (linguette) scegliamo “Layout”.
3. Mettiamo il cursore nel punto dove vogliamo il nostro menu e clicchiamo sulla terza iconcina, “Barra di Menu Spray”.
4. Una finestra chiede conferma di quale tipo di menu vogliamo, orizzontale o verticale. Scegliamo “orizzontale”.
5. Automaticamente appare nella pagina un menu standard che possiamo modificare conforme le nostre esigenze.
6. Quando salviamo la pagina ci vieni ricordato che sono stati creati dei files (cartella “SpryAssets”), che devono essere trasferiti, via FTP, sul nostro server web.
7.  Per editare il menu, dobbiamo dividere lo schermo, per vedere il codice HTML, e cambiare le voci inserite automaticamente. Ogni menu si trova dentro del codice
8. Quindi possiamo eliminare o aggiungere delle voci al nostro piacimento.
9. Dreamweaver crea automaticamente un foglio di stile per il menu. Lo possiamo modificare, usando la solita finestra CSS.

Modificare il file di foglio di stile con Dreamweaver

Esistono 2 modo di farlo

1. Aprire il file css (ad esempio "mio_stile.css") e cliccare sull’elemento che vogliamo cambiare (ad esempio la class “luca”.
   Nella finestra CSS appaiono tutte le attuali impostazioni seguita da un link “Aggiunge proprietà”, che offre la possibilità di scegliere altre proprietà da aggiungere. Inoltre, nella parte inferiore della finestra CSS appare un’icona a forma di matita. Cliccando in essa si apre il quadro che abbiamo usato quando abbiamo creato lo stile.

1. Un secondo modo è aprire qualsiasi file HTML  (ad esempio "prova.html") al quale è collegato il Foglio. Cliccando su qualsiasi elemento della pagina, un paragrafo, ad esempio, nella finestra CSS appaiono le proprietà che possono essere editate.

Cliccare qui per scaricare un file word con altre informazioni

Collegare il foglio di stile ad una pagina con Dreamweaver

1. Dopo aver finito il foglio di stile (mio_stile.css), creiamo una pagina html (File + New) – “prova.html”
2. Con in file “prova.html” aperto e la finestra dei CSS (a destra di Dreamweaver) visibile clicchiamo sull’icona catena, nella parte inferiore della finestra dei CSS
3. Si aprirà una finestra nella quale dobbiamo indicare il foglio di stile, presumendo che il CSS creato si chiami “mio_stile.css” 
4. A tutti i files del sito si deve ripetere questa procedura di associazione di foglio di stile al file

Scarica arquivo word con altre indicazioni

Creare un archivio CSS in Dreamweaver

1. Apriamo DreamWeaver e dall’elenco “Crea nuovo” scegliamo “CSS” 
2. Salviamo il file con un nome tipo “mio_stile” (automaticamente aggiungerà .css).
3. Salvato il file, tenendolo aperto, nell’area di lavoro di DreamWeaver, facciamo apparire il quadro relativo agli stile CSS
4. Per inserire nuovi elementi nel foglio di stile usiamo l’icona + messa alla parte inferiore del quadro di stile
5. Cliccando sull’icona appare una finestra nella quale dobbiamo scegliere tra 4 opzioni di stile:
   A. Classe: Possiamo inventare qualsiasi nome ("luca") e poi chiamare questo stile in ogni momento della nostra pagina
   B. ID – Possiamo inventare il nome ("matteo"), ma potremmo usarlo unicamente nell’elemento indicato, ad esempio nel paragrafo
   C. TAG – Definiamo lo stile che avrà determinato tag
   D. COMPOSTO – Definiamo alcune caratteristiche dei links 6.Una volta dato il nome o scelto l’opzione, si apre una nuova finestra dove definiamo le caratteristiche dello stile

Scarica file word con immagini guide

Creazione nuovo sito con DreaWeaver

Prima di iniziare con Dreamweaver, creiamo nel nostro computer, in MyDocuments, una cartella che conterrà tutti i files del nostro site. La chiamiamo, ad esempio, "sito_web". Dentro di questa creiamo una cartella chiamata "immagini" dove andremmo a mettere tutte le immagini del sito. Ricordiamoci di non creare dei files con nomi contenendo spazi o lettere accentate.

1. Apriamo Dreamweaver e dal menu orizzontale scegliamo Site > New site.
2. Nel primo campo inseriamo un nome per il nostro sito, tipo “Il nostro sito”
   Nel secondo inseriamo l’indirizzo, ad esempio: http://www.ilmiosito.org
3. Nel quadro seguente, diciamo che non vogliamo usare una server tecnology
4. Nel terzo quadro spuntiamo “edit local copies” e, nel campo sotto, mettiamo il percorso dove se incontra la cartella che contiene tutti i files del mio sito, ad esempio C:\MyDocuments\miosito\
5. Nel 4 quadro, dal menu a tendina scegliamo “None” e clicchiamo in Next
6. Il 4 quadro riassume le impostazioni. Clicchiamo in “Done”
7. Completata l’operazione, dovrò vedere nel panello “Files” a destra dell’area di lavoro di DreaWeaver, l’elenco con le cartelle e files del nostro sito

Qualora volessimo cambiare le impostazioni del sito, basta scegliere, dal menu orizzontale, Site > Manage site