giovedì 28 aprile 2011

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.

mercoledì 27 aprile 2011

L' impaginazione di una pagina web


Se la nostra pagina contiene un testo unico, senza formattazione speciale, non abbiamo bisogno di preoccuparci con il layout della pagina, ma poiché il contenuto esige una presentazione particolare, il problema si pone. Prendiamo l'immagine sotto come un esempio.



Per formattare una pagina simile al disegno dobbiamo ricorrere alle tabelle o ai div. Esiste molta discussione su quale dei due metodi usare (vediamo qui lo svantaggio delle tabelle). Praticamente i siti moderni usano i div per la formattazione, mentre prima si usavano spesso le tabelle. Comunque le tabelle continuano a essere uno strumento valido, sopratutto in fase di apprendistato.
In relazione ai div, potete usare questo link per leggere e vedere degliesempi. Imparare il suo uso è fondamentale per il webmaster.
Noi iniziamo, con il prossimo post, imparando come usare le tabelle in Dreamweaver.
.

giovedì 14 aprile 2011

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.

giovedì 7 aprile 2011

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.

mercoledì 6 aprile 2011

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

martedì 5 aprile 2011

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