Macromedia Dreamweaver

Corsi e tutorial Dreamweaver
per chi desidera imparare ad usare
Dreamweaver e creare siti con Dreamweaver.

Macromedia Dreamwaver

Il più completo corso interattivo su Dreamweaver
per PC e Mac mai prodotto in italiano.

tutorial dreamweaver    dreamweaver, corsi dreamweaver

Creare siti con Dreamweaver è facile ed i nostri corsi sono il metodo più veloce
per diventare esperti di Macromedia Dreamweaver.

 

Usare Dreamweaver  --- entrare qui

Qui sotto troverete solo alcuni dei concetti insegnati sui due corsi autodidattici per Macromedia Dreamweaver.

Dreamweaver svelato:

Veloce contenuto di ciò che imparerete per usare Dreamweaver.
Per vedere il contenuto completo dei due corsi - entrate QUI.

Gestione Testo

Vari modi di inserire elementi testuali.
I primi tag: modifica dell'aspetto del testo
definito come paragrafo od intestazione.
Diversi modi di importare file di testo ed html creati con altri programmi, (mantenedo anche la formatazione)...
...anche con Word. Una volta esportato da Word in HTML, facciamo qualche
ripulitura del codice HTML da elementi indesiderati in Dreamweaver...e lui ci pensa a tutto
('Clean Up Word HTML')....('Barra di Stato')...('Clean Up HTML')


I Caratteri, o font. (serif, graziati, bastoni sanserif)
Definire l'aspetto delle pagine con l'uso di caratteri appropriati.
'Size' dei caratteri....?
Singoli font e classi di caratteri.
Modifica della lista predefinita di caratteri.
Differenza tra le piattaforme Mac & Windows.
Dimensione dei caratteri, la teoria della relatività.
Tabelle ...e tutto quello che
non vi hanno mai svelato su di essi!
(tempo del tutorial - 34 minuti)

Usare e selezionare questi versatili contenitori.
Righe, collonne e celle.
Diversi modi di selezionare le tabelle e i loro componenti.
Diversdi modi per creare una tabella.
Finestra dialogo 'Insert Table'...e come evitarla.
Analisi e modifica delle proprietà delle tabelle.

Colore di sfondo per una tabella.
Colori delle cornici e compatibilità.
Immagini di sfondo nelle tabelle.
Inserimento di elementi nelle celle e loro disposizione
con le proprietà delle celle.
Allineare il testo nelle celle.
Fondere più celle (merge) e vedere che cosa succede al loro contenuto e al codice HTML...i tag <td colspan>
Inserire un'immagine in una tabella.
Modificare la tabella per adattarla al contenuto...
... non sempre così ovvio e semplice.

Corsi Macromedia Dreamewaver    ---- entrare qui


Complichiamoci la vita: le tabelle nidificate....
... un casino della maddonna.
Perticolarità delle tabelle quando non vogliono 'collaborare'.
Utilizzo di immmagini "invisibili" (trasparenti) per assegnare dimensioni precise alle celle di tabella.....roba da veri webmaster!
Cancellare solo una colonna in una tabella.


Ordinare il contenuto di una tabella alfabeticamente
od in ordine di numero... (finestra dialogo 'sort table').
Esportare i dati di una tabella con delimitatori, per un'altro programma/piattaforma.
Modificare i colori delle celle di tabella e delle celle di tabelle nidificate.... altri eventuali mal di testa...ma niente paura...vi sveliamo tutto.
Convertire una tabella in livelli.(astrofisica non per tutti)
Finestra 'Convert Tables to Layers')
Opzioni di conversione di una tabella in livelli.
Modifica della posizione dei livelli.
Conversione inversa: i livelli tornano a
formare una tabella visibile a tutti i browser!
Finestra 'Convert Layers to Tables')
(i Browser sono dei veri figli di buona mamma!!! grazie Bill)


Importare tabelle da altri software (Word - Excel) una
funzione che vale tutto il costo di Dreamweaver!
Finestra 'Insert Tabular Data')
Frameset, frames e la navigazione
(tempo del tutorial - 1 ora e 5 minuti)
Se dopo questo tutorial non conoscete i Frame allora
buttate il vostro computer e andate a lavorare alle Poste!
Frames generico
Suddividere una pagina in frames e trasformarla in
un frameset... Menu-Frameset - split.
I nuovi oggetti frameset predefiniti...
... .Objects - Frames... Finestra 'Frames'
Caricare diversi documenti da inserire in diverse
aree del frameset... Proprieta 'Frames'
Creazione di frameset complessi.
Controllo e modifica dei frameset con le
varie finestre di Dreamweaver.
Varie impostazioni delle dimensioni dei frames e loro controllo.
Frames relativi, a pixel, o a percentuale....questo è (era) il dilemma.

Frames generico
Impostazione di frameset nidificati: la pagina contiene
varie altre pagine che a loro volta ne contengono
altre che a loro volta...Save Frameset.
Differenze fra la suddivisione di una pagina
in molti frames e frameset nidificati.
Inserire collegamenti in un frame.
Target, ovvero dare una destinazione ai collegamenti:
dimmi cosa vuoi caricare e dimmi anche in
che frame vuoi caricarlo.
(e mentre che ci sei, dimmi anche che stai
incominciando a capire i Frame)
Come far funzionare il tutto con link che caricano
altre pagine o frameset in quello appena creato.

Tutorial Dreamweaver    ---- entrare qui

Frames JavaScript
Più facile di quanto sembra dato che se ci riesce
Pete, ci riuscirebbe anche il gatto di Nic!
Preparare il frameset con una sbara di navigazione che
carica altre pagine nei altri frame...anche due alla volta.
Occhio su come, cosa e dove salvate i documenti creati automaticamente in un framest... (save all)
Lavorare nel frameset o nei documenti che
esso contiene ma separatamente?

Preparare il diversi documenti che verranno caricati,
dare a loro un colore di sfondo diverso per differenziarli,
e creare un semplice motore di navigazione in JavaScript
che preleva documenti anche da diverse 'irarchie'
di cartelle che li contengono.
Le due parti del nostro JavaScript.
Attenzione di assegnare i nomi corretti dei documenti nel javaScript..ciò che Pete non ha fatto... he he he.
Assicuriamoci che i nomi dei frame nelle
palette delle proprietà sono compatibili con il javaScript.
Spiegazione di come questo javaScript funziona.
.....ed ora..... speriamo che funziona....per ora tutto bene.
Creiamo altri link per caricare ancora altri documenti....funzionerà?
Noooo! non funziona più...vediamo perchè con un po
di 'debugging'... Eureka! ora funziona.
Completiamo l'ultimo link di navigazioine ed è fatta.
(meno male visto che il maestro virtuale
stava per avere un'esaurimento nervoso
durante l'esecuzione di questo tutorial)

Frames - navigazione standard
Associare collegamenti a stringhe di testo nello stesso framest.
Realizzare una barra di navigazione grafica
con tutto di rollOver e scambio immagini.
Finestra 'Insert Navigation Bar')
Associare immagini e collegamenti agli
elementi della barra, impostarne le opzioni.
La Navigation Bar ora contiene dei javaScript creati automaticamente da Dreamweaver...questi si possono
esaminare tramite la finestra 'Behaviours'.
Creare velocemente diversi documenti che utilizzano
la stessa barra di navigazione.

Elementi di navigazione in un frameset predefinito
Definire un frame di base ove far caricare i collegamenti
di una pagina del frameset.
Finestra 'Insert Base' e corregere il
codice HTML di questo.
Inserire un menu a tendina per la scelta rapida dei collegamenti, definirne gli elementi ed i frame di destinazione.
Finestra 'Insert Jump Menu'.
Box dialogo 'List Values'
Modificare le opzioni di un menu a tendina
attraverso le proprietà ed i behaviour.
Limiti dei menu a tendina: due modi diversi di accedere
a tutti i collegamenti di un menu di scelta rapida.
Inseriamo un 'button'.
Usiamo il behaviour 'Jump Menu Go'.
Ridefinire l'aspetto della barra di navigazione.
Finestra 'Modify Navigation Bar'.
Ogni documento può contenere SOLO una barra di 'navigation'.
Aggiungere funzionalità alla barra di navigazione con altri behaviour....Actions -> 'Show-Hide Layers'...'on mouseOver'
I Moduli o Form

Inserire dei moduli per richiedere
all'utente di inserire dei dati.
Inseriamo un campo e definiamo le sue proprietà.
Proprietà di elementi dei form.
Aggiungiamo un behaviour 'validate form'...
... o al pulsante o al form.
Settiamo le preferenze della convalida dei dati senza
andare sul server assegnando azioni JavaScript.
Modificare i messaggi di errore (traducendoli in Italiano anche) riservati a chi inserisce i dati a casaccio nei moduli.
'onBlur' - 'onChange'.
Usare la stessa funzione con diversi
eventi per diversi oggetti. - f02)
Inserire pulsanti di opzione (radio buttons) ed assicurarsi
che siano davvero esclusivi...o scegli uno o l'altro ma non entrambi.

Imparare ad usare Dreamweaver    ---- entrare qui


Inserire un'immagine in una pagina e definire aree con
diversi link all'interno della stessa immagine usando
la palette delle proprieta... ('hot-spot')
Modificare le proprietà delle aree attive o spostarle.
Utilizzo della barra delle proprietà per controllare
l'immagine o le singole aree attive. - h] -Elementi riutilizzabili:
- Template ed Oggetti di libreria
(tempo del tutorial -13 minuti)


Utilità dei modelli (template).
Creare un template a partire da un html esistente.
'save as template -dwt'
Esame del codice sorgente di un template,
tra aree modificabili ed aree fisse.
Impostare aree modificabili 'editable regions' e
far funzionare il template.

Esame delle diverse modalità di generare
nuovi documenti basati sul modello... Finestra 'template'.
Raporto tra i template e la palette delle proprietà.
Modificare i documenti generati, modificare il modello ed aggiornare tutto il sito... Finestra 'update template files'.
Menu file 'New from Template'

Gestione di un modello attraverso la finestra dei templates.
"Staccare" un documento da un template in diversi modi.
Menu modify - templates - 'Detach from Template'.

Cosa possiamo modificare in un template e cosa possiamo invece modificare in un documento generato a partire da un template.

Oggetti di libreria:
Come archiviare elementi di uso frequente
trascinandoli sulla finestra 'Library'.
La finestra della libreria e come lavorarci.
Creare nuovi oggetti, modificarli ed aggiornare
tutte le pagine che li utilizzano.
Palette proprietà 'Library Item'. e file '.lbi'
History o la "storia" del documento

Significato della finestra 'History'.
Ritornare sui propri passi annullando una o più azioni.

Ripetere una azione od una serie di azioni grazie
alla finestra della history con il 'replay'
Selezionare azioni successive o meno.
Copiare azioni eseguite da un documento
ed incollarle in un altro.... 'Copy Steps'

Usare Macromedia Dreamweaver    ---- entrare qui


Macro? Creare nuovi comandi a partire dalla
finestra della history... 'Save as Command'.
Utilizzare il comando aggiuntivo per inserire un nuovo elemento.
Modificare la lista dei comandi disponibili... 'Edit command List'


Registrare una sequenza 'start recording' di azioni mentre le eseguiamo per metterla temporaneamente in memoria.
Differenze fra la creazione di nuovi comandi e la semplice registrazione di una sequenza.- j] -Modifiche rapide col Quick Tag Editor
(tempo del tutorial -7 minuti)


Modificare un tag esistente attraverso la comoda interfaccia
del 'Quick Tag Editor', aggiungere un nuovo tag attorno a quello selezionato od inserire nuovo HTML.
Come usare il Quick Tag Editor.
Modifica delle impostazioni predefinite del Quick Tag Editor e
suoi effetti sulla 'history' del documento... 'TagAttributeList'

Formattare documenti con gli
  stili HTML o gli stili CSS
(tempo del tutorial -8 minuti)

Creare un nuovo stile HTML.
Definire le impostazioni per il nuovo stile... 'Define HTML Style'
Assegnare uno stile ad una selezione.
Utilizzare diversi stili per diversi elementi della pagina.
Come rimuovere i stili HTML.

CSS o 'fogli di stile a cascata', definizione e funzionamento.
Realizzare un nuovo foglio di stile...linkato...
...'Link External Style Sheet'... 'New Style'.
Impostare una nuova classe di stili, ri-definire un TAG
esistente od utilizzare il selettore CSS predefinito.
Impostare la definizione degli elementi del
documento con un foglio di stile.
Modifica dell'aspetto di un link testuale
al transito del puntatore del mouse...'hover'
Considerazioni sulla compatibilità degli stili con i diversi browser. - L] -Layers (livelli) per tutti i gusti.


Definizione dei livelli... 'layers'...cosa sono?
I diversi tipi di livelli esistenti, i loro 'TAG' e la loro compatibilità.
...(SPAN, DIV, LAYER, ILAYER)
Le principali proprietà dei livelli: 'Layer ID'..., unità di misura per posizione e dimensioni dei livelli ed opzioni di visualizzazione.
... 'Z-Index' ... 'hidden-visible-inherit-default '
Immagine di sfondo dei livelli...
Che succede se un livello contiene un'immagine più grande
del livello stesso?... ('overflow, hidden, scroll, auto')... 'clip' -L 02)
Ordine di sovrapposizione dei livelli.
La finestra 'Layers'.
Modifica di alcune proprietà dei livelli attraverso la finestra Layers.
Sovrapposizione di livelli contenenti immagini, testo od
animazioni create con Flash....'Indice - Z'

Corsi e tutorial Dreamweaver    ---- entrare qui


Inserire livelli in una pagina vuota:
crearne uno predefinito, oppure disegnarlo.
Modificare le impostazioni di creazione di un livello predefinito.
Selezione di un livello nella pagina: differenza fra
un livello selezionato ed uno attivo.
Inserimento di elementi in un livello.. testo, immagini od altro.
Modifica di altre proprietà dei livelli... cambiare dimensioni,
ed eliminare il colore di sfondo.
Osservazioni sulla sovrapposizione di livelli contenenti
vari elementi fra i quali animazioni Flash.


Nidificare livelli... gerarchia dei livelli, ovvero
un contenitore che ne contiene un altro.
Controllare la 'parentela' dei livelli mediante la finestra Layers.

Introduzione alla Timeline... l'animazione dei livelli.
Cosa possiamo animare, e quali browser ci capiranno qualcosa?
Aggiungere oggetti alla Timeline...'add to timeline'.
Inserire fotogrammi chiave (Keyframes).
Cartoni animati per tutti... registrare il percorso di un livello trascinandolo in giro per la pagina.
Inserire Behaviors nella Timeline per far eseguire
automaticamente l'animazione al caricamento della
pagina o per farla riprodurre continuamente.
Cambiare l'indice -Z' dei livelli lungo il tempo.

Verifica della compatibilità dei livelli con i Browser
(che bastardi)... 'Check Target Browser'
Creazione di una pagina che descrive in dettaglio la
compatibilità della nostra pagina con i diversi browser.
Possiamo ancora convertire i nostri livelli in una tabella?...
...si, con qualche accorgimento, osserviamo come fare.
Evitiamo la sovrapposizione dei livelli.

Cambiare il contenuto di un livello attraverso il DHTML
... (HTML dinamico) senza saper nè leggere nè scrivere. 
Modificare il testo contenuto in un livello al passaggio del
puntatore del mouse su un pulsante...
... behaviour 'Set Text of Layer'.

Netscape Resize Fix:
come inserire o rimuovere con facilità uno script che sistema un 'bug' di Netscape Navigator e che permette
di creare, senza troppi batticuori, pagine contenenti livelli.
..e poi come rimuovere il NR-Fix.

Usare Dreamweaver    ---- entrare qui


Rivediamo la timeline e i livelli con
dei behaviour particolari.. .'onFrame-Loop-onClick ecc.'

Creare un semplice gioco permettendo al'utente
di trascinare in giro un livello...
...behaviour e box dialogo del 'Drag-Layer'.
Definire le impostazioni di trascinamento...
... assegnare un'area di trascinamento ed un
punto di destinazione per il livello trascinato...
...'snap if Within' azionato dal ('on-Load')
L'hai messo al posto giusto?
Come associare una funzione che venga eseguita solo se
l'utente mette il livello dove gli abbiamo chiesto di metterlo.
Finestra di allert... 'popup Message'..e modificarne il codice HTML.
Limitare il movimento del livello trascinato a
scorrimento orizzontale o verticale.
...dopo aver finito questa sezione Nic è stato
ricoverato in una clinica di psichiatria e messo sotto
osservazione nel loro programma "Alieni si nasce o si diventa"...
... attendiamo ancora gli esiti.
Controllare un filmato Flash.
(tempo del tutorial -3 minuti)


Inserire un filmato Flash in una cella di tabella e ridimensionarlo.
Assegnare comportamenti di controllo della animazione
Flash ad elementi presenti nella pagina HTML...
...('Control Shockwave or Flash') .
Azionare un'animazione, fermarla od andare ad
un determinato fotogramma.
Differenze fra la definizione dei fotogrammi in Flash ed
in DHTML, ovvero in Dreamweaver. - n] -Estendere le funzionalità di base di Dreamweaver.
(tempo del tutorial -8 minuti)


Extension Manager, il 'gestore' delle estensioni...
... che cos'è e come trovarlo.
Visitiamo il sito Macromedia Exchange e scarichiamo qualche estensione . ..quello della Nokia per i telefonini.
Scelta delle estensioni da installare,
Novità o ricerca dell'estensione desiderata.


Ecco un'estensione utile per i patiti del telefonino,
come scaricarla, installarla ed utilizzarla.
Una volta scaricata l'estensione, usare
l'Extension Manager per installarla.
Un trucchetto per non dover chiudere Dreamweaver e lanciarlo nuovamente dopo aver installato una nuova estensione.
Vogliamo realizzare contenuti da vedere anche
su piccoli display dei telefonini 'wap'?

Usare Macromedia Dreamweaver    ---- entrare qui


MFX - SlideMenu:
Un'estensione per creare un menu a scorrimento
basato su livelli dinamici già bell'è pronto? Voilà!
Impostazioni del menu a scorrimento.
Importare HTML creato da Fireworks.
(tempo del tutorial -7 minuti)

Analisi di un documento creato da Fireworks.
Cenni sull'utilizzo di Fireworks... suddividere un'immagine
con lo 'slicing' in una tabella HTML contenente una
serie di piccole immagini, una applicazione ibrida che
importa molti formati grafici ed esporta in HTML.
Diverse opzioni di esportazione.

Il codice HTML generato da Fireworks e come 'ottimizzarlo'.
Immagini invisibili senza doverle creare? Ci sono già!
Definizione delle dimensioni di righe e colonne nelle
tabelle create da Fireworks.
Modificare queste tabelle.
Sostituire un'immagine contenuta in una cella con altro contenuto ed impostarla come immagine di sfondo della cella.
(Un bel trucchetino che non tutti conoscono.)
Integrazione di Fireworks con Dreamweaver....
lanciare il programma dalla barra delle proprietà di Dreamweaver.
Tips utili
(tempo del tutorial - 18 minuti)
Usare un behaviour per aprire automaticamente
una seconda window del Browser...
... utile per 'catturare' l'attenzione dei naviganti....e spesso
usato sul sito per pubblicità da 'spingere'.


Inserire elementi nell'intestazione dell'HTML....
molto importante per la 'visibilità' del vostro capolavoro sul web.
Definire le parole chiave... 'keywords'
Inserire una descrizione per il sito... 'description'.
Assegnare un 'tempo di visualizzazione'...
per il nostro documento... il META 'refresh'.
Utilizzare il refresh per creare un ciclo fra due pagine,
caricate automaticamente dopo un certo tempo.
(Un bel trucchetino...che non tutti aprezzano....
..a parte il fatto che in materia di colori di
bandiere Nic è stato bocciato!)

Usare Macromedia Dreamweaver    ---- entrare qui


Link senza underline senza usare i CSS?
- p04a Frames e motori di ricerca - pte 1)
Cosa fanno i 'bot' automatici dei motori di ricerche
e come agevolare a loro il compito di
categorizzare il vostro sito nei loro database.

Frames e motori di ricerca - pte 2)
E come risolvere il problema dei bot che
non 'visitano' i 'meta-tags' nei frameset.
Andiamo su un motore (Virgilio) per vedere dove e
come 'suggerire' il vostro sito.
Quanto tempo ci mettono ad inserirvi nei loro directory?

Frames e motori di ricerca - pte 3)
Andiamo anche su Yahoo per vedere la procedura.
Consigli su come 'assistere' i vostri clienti sul
concetto di inserire il loro sito nei motori.Questioni di domini
(tempo del tutorial - 16 minuti)
Pete vi fa due palle con un suo concetto sul posesso
dei domini e la loro registrazione (è mio è mio è mio!).
... (è pazzo!)
L'inserzione nel 'whois' di Networksolutions anche con
casella postale (C.P.) senza indirizzo fisso o nome del gestore.
Siete un webmaster senza un proprio dominio...?... allora siete solo un mezzo-webmaster. (Idem per parrucchieri e fiorai)
("Mi dissassocio da queste allucinazioni"... (Nic)
Meglio il  .com o il  .it ?
E se non volete che i vostri parenti e amici (e moglie!)
sappiano che siete webmaster di un sito porno?

Usare Macromedia Dreamweaver    ---- entrare qui


La interfaccia
Nuove funzioni tabelle
Testo Flash
Bottoni Flash
Link e-mail automatiche
Inserimento ora
Archivio riferimento
Controllo risorse
Gestione siti
Definire uno nuovo sito
Linkare le pagine con punta e clicca
Scaricare il sito sul server con Dreamweaver
Definire un sito già esistente
CSS - Fogli stile
(TUTTO che potreste mai voler,
poter, dover sapere su di essi)
Senza CSS
Creare un Foglio stile esterno
Applicare, modificare, collegare i CSS
Agguingere nuovo CSS
Dettagli utili sui CSS
Stili interni
Esportare un CSS interno in uno esterno
Ridefinire i tag HTML
Selettore CSS
Le categorie dei CSS
Tipo
Bordo
Elenco
Sciopero - per quelli che non funzionano
CSS multipiattaforma:
3 metodi per lavorare
Metodo da Pierino e da intelligenti
Metodo da esperto
Il javascript che indovina la piattaforma
Verifica in diversi browser su Mac e Windows per
vedere dove funziona cosa e come viene visto.
Come usare i design notes
Creare o modificare i tasti di scorciatoia
Dove trovare il javascript debugger.

Novità principali nella v.4.0
(tempo del tutorial - 54 minuti)
La interfaccia:
Le nuove opzioni di visualizzare i documenti in Dreamweaver
con o senza il codice ovvero col code inspector.
Come aggiungere numeri alle linee di codice per
semplificarci il debugging.
Altri accorgimenti sulla interfaccia
Tabelle - il vecchio metodo (ancora disponibile):
In questo tutorial ci rinfreschiamo la memoria sulla
gestione tabelle standard con alcune novità aggiunte.

Tabelle - il nuovo metodo:
Possiamo ora disegnare tabelle di varie forme e
posizionamento con estrema libertà.
Infatti non per nulla si chiama anche "layout".
Ottima funzione per i designer che non sono proprio esperti di HTML, ma anche per gli esperti questa nuovissima funzione risparmierà molto tempo ed offrirà nuove possibilità prima impensabili.
Nozioni anche su cosa non si può fare con questa funzione.
Ampie nozioni su come manovrare e modificare
le tabelle una volta create con questo metodo.
Come spostare le celle all'interno della tabella.

Nuove opzioni per la gestione dei frame set:
Nuovi 'oggetti' frame.
Facile da usare se sapete poi cosa avete creato
e dove va salvato.
Utile non dimenticare di definire un sito
per usare la funzione frame senza intoppi.
Inoltre da considerare anche come una rinfrescatina
di memoria sull'lavorare con i frame (ampiamente coperto
nel corso Dreamweaver Nightmare nr. 1)

Usare Macromedia Dreamweaver    ---- entrare qui


Testo Flash:
Non avete Flash?
Non sapete usare Flash?
Nessun problema... ci pensa Dreamweaver.
Questa nuova funzione consente con due click
del mouse di creare testo animato come
se fosse creato in Flash. Infatto si crano ogetti Flash.
Se seguite alcuni utili suggerimenti contenuti in
questo tutorial è una funzione che è facile da usare
e può aggiungere quelle cigliegine sulla torta del vostro
sito per renderlo animato, dinamico e 'multimediale'.
Tra altro è uno dei modi più veloci e semplici per
creare testo col effetto 'rollover' in Dreamweaver.


Bottoni Flash:
Non avete Flash? Non sapete usare Flash?
Nessun problema... ci pensa Dreamweaver.
Praticamente simile a quella del 'Testo Flash'
con la differenza che si possono usare bottoni
con stili già predisposti nella libreria di Dreamweaver.
Carino.

Link e-mail automatizzate:
Un semplice metodo per inserire senza
errori link e-mail nei nostri documenti.
Se avete dita come patate e spesso fate
errori di battitura allora fa per voi.


Insert Date:
Ovvero inserisci una data con diversi formati come
'stampa' della data di modifica del sito.
Utile se desiderate comunicare ai visitatori
quando una pagina è stata aggiornata.
Infatti Dreamweaver può aggiornare la data ogni
volta che salviamo un particolare documento.

Usare Macromedia Dreamweaver    ---- entrare qui


Archivio rifferimento:
Un archivio on-line su tutti i tag HTML,
fogli stile, java script ecc.
Un'ottimo supporto on-line per il programmatore
medio-esperto ma anche per chi sta imparando a
programmare pagine web con codice scritto
manualmente ed anche per capire cosa è permesso
e cosa probabilmente non funzionerà mai.
Tra altro questa funzione segnala anche le
eventuali compatibilità con i diversi browser.
Inoltre in questo tutorial ci rinfreschiamo la
memoria sull'uso del quick-tag editor.

Controllo risorse:
Un utile manager degli 'assets' (risorse) che tiene
sotto occhio tutti gli elementi usati in un intero sito.
Può mostrare tutti i link interni, immagini usati,
elementi Flash e mulimediali inseriti ecc.
Ci consente di usare elementi in diverse pagine
usando questo manager come una specie di libreria.
Utile per piccoli e grandi siti per evitare
confusione e di avere una idea precisa dove il
tutto si trova e se rischiamo di dimenticare
qualche immagine quando scarichiamo sul server.

 

Gestione Siti
(tempo del tutorial -17 minuti)
Definire un sito nuovo:
Per la gestione dei file e per poter usufruire di molte
funzioni interne di Dreamweaver è saggio definire un sito.
Una procedura strana e non del tutto intuitiva ma se seguite
questo tutorial il tutto vi sarà svelato.
Una volta fatto possiamo usare l'interfaccia grafica
delle icone e del organigramma creato (site map layout)
da Dreamweaver per gestire molte cose a livello di icone.
Collegamenti tra le pagine senza aprirle:
Si fa semplicemente cliccando, trascinando e cliccando.
Una funzione che sembra superflua ed infatti è poco
usata ma quando serve diventa molto utile.
Abbiamo anche un feedback visivo nella site map
dei collegamenti assegnati.

Usare Macromedia Dreamweaver    ---- entrare qui



Scaricare un sito sul server con Dreamweaver:
Una procedura esotica ma molto
semplice una volta compreso la dinamica.
Occhi ad alcune informazioni che spesso i
provider si dimenticano a darvi - tipo il
Passive Mode Transfers (PASV).
Tutto svelato in questo tutorial.
Infatti in questa lezione non solo configuriamo
Dreamweaver per poter accedere al nostro server
ma scarichiamo in diretta delle pagine su uno
spazio web cosi potete seguire il tutto passo per
passo e capire bene le procedure.
In fine ci colleghiamo al sito per verificare che
il tutto è andato in porto (o sul server).


Definire un sito già esistente:
A differenza della procedura per definire un
sito ex-nuovo, questa invece ci consente di definire
un sito già esistente e aggiungerlo nelle definizioni
per poterlo gestire sotto Dreamweaver.
CSS - I Fogli stile - le basi...
(tempo del tutorial - 33 minuti)


Usare i fogli stile oppure no?
ragionamenti vari su come procedere e
decidere se usare i CSS dato che tra la Macromedia
la Microsoft e la AOL ci sono più incompatibilità che
tra il pepperoncino e lo zucchero.
Eh si... la guerra dei Browser è notevole in questo
settore e Pete vi racconta delle belle.
Cosa sono i fogli stile?:
Vediamo come si potrebbe creare un foglio
stile ma incominciamo col vedere le opzioni che
abbiamo quando NON vogliamo usare i CSS.
In Dreamweaver i CSS (fogli stile o stili) sono simili
ai style sheets in Quark XPress... ma non del tutto.
Tra altro noi usiamo già dei 'stili' in Dreamweaver
anche se non usiamo i CSS...qual'è la differenza?

Creare un fogloi stile esterno:
Finalmente passiamo a creare un foglio stile esterno
e sebbene la procedura è cambiata minimamente
dalla versione precedente di Dreamweaver
è sempre un bel casino.
Seguite il tutorial e sarete più saggi di prima.
Ci ricordiamo di assegnare dei nomi logici ai
stili o ai fogli stile per evitare eventuali confusioni.
Creiamo un stile personalizzato che sarà
contenuto nel foglio stile esterno.
Occhio alle opzioni nella palette 'Nuovo Stile'.
Ma sopratutto attenzione al nome che assegnate
al foglio stile dato che in alcuni casi Dreamweaver
aggiunge da solo l'estensione .css, ma in altri
se ne infischia e la dovete aggiungere voi.
Fatto questo possiamo incominciare ad impostare
le caratteristiche del stile (font, colore ecc.)

Applicare, modificare, collegare i stili:
Una volta creato uno stile contenuto in un foglio stile
come si fa a modificarlo?
Come lo si applica ad un paragrafo nel documento?
E come si fa a poter usare questo foglio stile in
altre pagine senza doverlo ricreare da capo?
Seguite seguite...


Aggiungiamo un nuovo stile:
Per aggiungere un nuovo stile al nostro
foglio stile già esistente non ci vuole molto...
se sapete come fare.
Lo scopo è di crearlo solo una volta
e poi averlo a disposizione in tutti i documenti
che usano il nostro foglio stile.

Usare Macromedia Dreamweaver    ---- entrare qui


Concetti utili da sapere:
Alcune nozioni che fareste meglio a digerire prima
di creare il nuovo sito della Fiat con 25 mila pagine.
Ricapitoliamo ciò fatto finora ma vediamo
anche le problematiche dei conflitti dei stili.
Cosa succede se su una scritta alla quale abbiamo
applicato uno stile dal nostro foglio stile
applichiamo un colore dalla palette delle proprietà?
Quale vince?
Stili interni:
ora affrontiamo il concetto dei stili interni
ovvero quelli che saranno utilizzabili solo nel
documento dove sono stati creati.
Qual è la differenza tra stili esterni ed interni?
Buona domanda.
Scopriamo che in un documento possiamo avere
stili esterni ed anche stili interni...che casino.
E perchè mai vorremmo creare stili interni dato
che non li possiamo usare in altre pagine?
Beh... una ragione ci sarebbe.
E poi...nessuno ha detto che i stili interni
non si possono trasportare!

Portare uno stile interno in un foglio stile esterno:
In efetti è una completa cazzata ma molti non sanno
che esiste e non sanno come procedere.
Con un truchettino del tutto ovvio, possiampo tranquillamente spostare uno stile interno in un foglio stile esterno.
Acenni su cosa succede se eliminate uno stile già applicato
ad un paragrafo e cosa fa Dreamweaver in tal caso.
Altre opzioni esotiche nei CSS:
(tempo del tutorial - 8 minuti)

Ridefinire i tag HTML:
Se avete nozioni base di HTML allora potreste
trovare utile questa funzione.
Qui possiamo cambiare l'aspetto di molti
tag di default in modo che gli viene assegnato uno stile
ed ogni volta che viene usato applica quel stile.
Per esempio si potrebbe settare in tal modo che
ogni volta che si applica il neretto <b>, questo viene
applicato al carattere ma aggiunge anche il colore rosso.
Ovviamente ci sono cosette da considerare che
vengono spiegate in questo tutorial.
selettore CSS:
Suggeriamo che lo usa solo chi di HTML ne capisce.
Ci offre l'opzione di abbinare diversi tag
HTML ed a loro applicare uno stile.
Per esempio inserendi td b nel box si potrebbe
ridefinire il tag <b> ma solo quando viene
applicato ad un testo contenuto in una tabella.

- Categorie dei fogli stile
(tempo del tutorial - 26 minuti)

Usare Macromedia Dreamweaver    ---- entrare qui


Categoria "Tipo":
Le categorie dei CSS sono le individuali opzioni che
Dreamweaver ci offre per le varie 'categorie' di roba modificabile.
Per esempio nella categoria "Tipo" possiamo gestire l'aspetto dei caratteri, i font e la loro grandezza, colore ecc.
Molti dei settaggi si possono applicare dalla palette
delle proprietà ma altri invece no.
Utilissima la funzione "Weight".
Occhio ai asterischi.
In questo tutorial incominciamo anche a mettere
sotto prova i svariati Browser:
iCab, Explorer e Netscape (Povero Netscape!)
Nella categoria Tipo possiamo anche settare i link nelle
pagine in modo che non sono sottolineate.
Categoria "Sfondo" & "Bordo":
Opzioni esotiche che ci consentono di applicare
uno sfondo anche ad una righa di testo.
Uno sfondo sia di un colore che con una immagine di sfondo.
Anche quest'ultima viene applicata solo sotto la righa di testo.
Qui potete controllare con precisione un'immagine di sfondo e come desiderate che questa appare sulla pagina.
Ciò che non si può fare nelle proprietà di pagina.
La funzione bordo è altretanto interessante ma come sempre bisogna fare diverse prove almeno nei 2 browser principali.
(povero Netscape!)

Categoria "Blocco di Testo":
Qui possiamo operare su paragrafi ed anche
settare il tracking ed il kerning ovvero le
spaziature tra le singole lettere o parole.
Funzioni di precisione di controllo del testo...
... peccato che di nuovo abbiamo problemi con i browser.
Da usare con cauzione e sagezza.

Categoria "Elenco":
Come il nome sottointende, questa categoria ci da dei
bei controlli su testi che sono formattati come elenchi.
Tra diverse cose possiamo sostituire il 'bullet' (la pallina) delle
liste con una imagine importata.
Possiamo settare anche l'aspetto della bullet
e decidere la sua posizione in rispetto dell'allineamento
della stessa lista.
Utile.

Categoria "Sciopero":
"Elementi Pagina" - "Posizione" - "Estensioni"
Qui Pete fa sciopero e tranne alcune bestemmie,
si rifiuta di spiegare alcune categorie che nonostante
le buone intenzioni della Macromedia, non
funzionano nei browser oppure sono così esotiche
che è meglio di ignorarli del tutto.
Conclusione ed osservazioni utili:
Ricapitoliamo e cerchiamo di usare le categorie con
dovuta cutela mettendo il tutto sotto prova nei browser
per evitare tempo perso e pagine web non consultabili.
Alla fine i fogli stile possonoi essere il migliore
amico del webmaster in Dreamweaver ma potrebbero
essere anche il peggior disastro che vi è mai capitato
nel design e gestione di un sito web.

 

Fogli stile multipiattaforma
(tempo del tutorial - 30 minuti)

Ci sarebbero 3 metodi nel lavorare con
Dreamweaver ed i fogli stile.
Il metodo da Pierino che non è da scartare.
Il metodo intelligente invece è quello forse più consigliato.
Ma se desiderate fare bella figura allora per
forza dovrete usare il metodo per Esperti.
Questo ci consente di avere un sito che a secondo
da quale piattaforma viene visto (Mac - Windows - Unix)
viene mostrato al visitatore la pagina con un foglio
stile dinamico che viene proposto automaticamente
con l'uso di un semplice javascript.
I primi 2 metodi:
Il metodo da Pierino consiste nel NON usare nessun
foglio stile accontentandosi delle opzioni standard che Dreamweaver ci offre per la gestione degli elementi
piazzati nelle pagine.
Se dovete fare un sito con solo due pagine,
questo è il metodo più immediato.
Potrebbe anche essere adoperato in un sito
di più pagine se per forza volete che il sito poi
viene visto da tutti i browser.
Il metodo intelligente invece usa solo quei
stili dalle categorie che sappiamo per forza
che saranno visibili almeno dal browser
principale che attualmente è Explorer 5.x su entrambi
le piattaforme.

Il metodo da esperti:
Dato che Windows e Macintosh offrono diverse risoluzioni di grandezza dei caratteri attravero i browser ai visitatori bisogna
creare due fogli stile.
Inanzitutto creiamo un foglio stile estermo che
sarebbe quello per la piattaforma sul quale lavoriamo principalmente per creare i siti (nel nostro caso Macintosh).
Poi lo duplichiamo nella mappa del sito e ne
creiamo un foglio stile per l'altra piattaforma (Windows).
Ora colleghiamo entrambi fogli stile ma separatamente
al nostro documento ed impostiamo
le grandezze dei caratteri adeguate per ogni piattaforma.
Per finire scolleghiamo entrambi fogli stile dal documento.

Usare Macromedia Dreamweaver    ---- entrare qui


Il javascript che controlla il tutto:
Rivediamo il nostro lavoro finora e poi inseriamo un
semplice javascript nel documento che farà svariate cose.
Il script prima vede se la pagina viene vista da un
Mac o da un PC e a secondo quale piattaforma
carica uno o l'altro foglio stile.
Questo consente una regolare visione del sito
senza disastrose disparità nella grandezza dei font
per cui sia il visitatore PC che quello Mac vedrà
più o meno la stessa cosa.


Scarichiamo sul server:
Ora con FTP scarichiamo le nostre pagine
assieme con i fogli stile sul server dato che il
javascript è server-dipendente ovvero vedremo
solo il risultato desiderato dal server collegandoci
direttamente in rete al sito (www.deabendata.com).
Tra altro abbiamo scaricato tutte le pagine create
ovvero sia quelle usando il metodo da Pierino,
da intelligente che da esperto...
Le pagine rimarranno sul sito e nei
tutorial troverete un link diretto per verificare
se ve l'abbiamo raccontata giusta!
Prova con Explorer sul Mac:
Funziona?...CEEERRTTTOOOO!
Le pagine con fogli stile con javascript
funzionano perfettamente

 

Corso Dreamweaver nr 1     Corso Dreamweaver nr 2      Struttura Corso Dreamweaver  
 Insegnanti esperti Dreamweaver   Ordinare corso Dreamweaver