Dreamweaver
- Un sito semplice :
-
Impariamo a usare dreamweaver CS4... Possiamo usare qualsiasi template gratuito che troviamo nel web.
Il nostro sito avrà due parti importanti:
Sito locale: una cartella sul disco rigido dove depositare i nostri file ed elaborali.
Sito remoto: cartella del provider che ospita il nostro sito web per poter essere visto in internet.
Iniziamo dal nostro sito locale:
1 - Dal menu sito scegliamo > Gestisci sito vedi foto menu sito
2 - Scegliamo Nuovo e quindi sito ... vedi foto crea sito
3 - Inseriamo i parametri richiesti in sito locale ... vedi foto percorso
4 - Nella casella di testo Nome del sito, inserire Magazine ovvero il nome del sito
5 - Nella casella di testo Cartella principale locale, specificare il percorso dove abbiamo creato e salvato il nostro sito sull' Hard Disk.(nel nostro caso abbiamo salvato il tutto in C:\Program Files\EasyPHP5.3.0\www\magazine\) ... vedi foto percorso
6 - Nella casella di testo Cartella immagini predefinita , specificare il percorso della cartella immagini magazine. Nel nostro caso: C:\Program Files\EasyPHP5.3.0\www\magazine\images.
È possibile fare clic sull'icona gialla a forma di cartella per individuare e selezionare la cartella dove inserire le immagini, oppure immettere un percorso predefinito nella casella di testo Cartella immagini. vedi foto cartella immagini
7 - Premendo fine appare sulla destra il sito che abbiamo appena creato con le sue cartelle. Premiamo due volte F4 e si chiude il pannello laterale. vedi foto pannello laterale sito
Abbiamo creato il nostro sito locale dove depositare i files.
Ora abbiamo due strade per costruire la nostra pagina web:
1 - La prima è andare nel menu File > nuovo e dalla schermata che si apre scegliere:
Pagina vuota (a sinistra nella schermata)
Tipo di pagina: HTML
Layout: scegliere quello desiderato
Tipo di documento: impostare la voce a XHTML 1.1
Layout css: aggiungi a HEAD (di default)
e premere Crea
Avremo la nostra pagina web di base già formattata e pronta ad essere modificata.
2 - La seconda strada (consigliata) :
scarichiamo il file
check_magazine_pt5_cmplete.zip (by www.adobe.com), ma possiamo trovare molti altri templates free visitando il sito dreamweaver-templete.org.
Scompattiamo il tutto e copiamo i files (eccetto il file text) all'interno della cartella magazine del nostro sito.
Abbiamo il nostro sito caricato e pronto per essere modificato e pubblicato su server remoto.
8 - Apriamo il file index (doppio click) e possiamo vedere la struttura del nostro sito completo.
9 - Possiamo osservare andando in visualizzazione codice (vedi foto codice) che è presente un foglio di stile (riga 6 <link href="check_magazine.css" rel="stylesheet" type="text/css" />) che determina il layout (ovvero l'impaginazione) della nostra home page e un menu spry (riga 7).
10 - Andiamo nel menu > finestra e scegliamo risultati > convalida. vedi foto menu finestra
Si aprirà un menù a soffietto in basso. Premiamo sulla freccia verde a sinistra e scegliamo convalida documento corrente. vedi foto convalida
Vediamo se il nostro sito supera l'esame delle convalida senza errori di programmazione. Perfetto nessun errore.
In caso di errori verranno segnalati nel riquadro a sinistra. A destra troverete la spiegazione del tipo di errore e un collegamento ad adobe per le soluzioni relative.
Abbiamo finito e siamo pronti per le modifche.
Per il testo basta cancellare quello presente e riscrivere le nostre notizie. Lo stesso procedimento per le immagini. Cancelliamo quelle presenti e le sostituiamo con altre.
Per le immagini dell'intestazione bisogna aprire il file .css (vedi foto css) e trovare i relativi file (.jpg o .gif) e sostituirli con altre immagini.
I passaggi seguenti sono facoltativi.
11 - Proviamo a renderlo compatibile con le ultime norme del W3C per il formato xtml 1.1 strict.
Torniamo nella visualizzazione codice e selezioniamo le prime due righe ovvero fino a <head> della nostra pagina index.
Dal menu file di dreamweaver (in alto a sinistra) scegliamo Nuovo.
Dalla finestra che si apre scegliamo tipo di
Pagina: HTML
Layout: Nessuno
e in basso a destra
Tipo documento: XHTML 1.1
quindi premiamo crea. Dalla schermata che appare (dovremmo essere già in visualizzazione codice, selezionare le prime due righe e copiarle nella nostra pagina index nella medesima posizione (vanno a sostituire la selezione che avevavo fatto prima). Salviamo.
Ora proviamo a verificare se vi sono errori con il nuovo formato xhtml 1.1 ripetendo il passo 10. Nessun errore.
Abbiamo la nostra pagina web compatibile xhtml 1.1 pronta per essere modificata nel testo e nelle immagini.
continua...
