-a 01)
Pete presenta il corso e vi porta su un tour lampo
di alcune novità meno noti e vi offre una panoramica
generica sul corso ed il resto delle nuove funzioni trattate:
Tra altre:
Come usare i design notes
Creare o modificare i tasti di scorciatoia
Dove trovare il javascript debugger.

-b 01)
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


-b 02)
Tabelle - il vecchio metodo (ancora disponibile):
In questo tutorial ci rinfreschiamo la memoria sulla
gestione tabelle standard con alcune novità aggiunte.

- b03)
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.

- b04)
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)

- b05)
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.

- b06)
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.

- b07)
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.

- b08)
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.

- b09)
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.

- b10)
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.

- c01)
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.

- c02)
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.

- c03)
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).

- c04)
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.

- d01)
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.

- d02)
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?

- d03)
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.)

- d04)
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...

- d05)
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.

- d06)
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?

- d07)
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!

- d08)
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.

- e01)
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.

- e02)
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.

- f01)
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.

- f02)
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!)

- f03)
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.

- f04)
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.

- f05)
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.

- f06)
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.

- g01)
3 metodi :
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.

- g02)
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.

- g03)
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.

- g04)
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.

- g05)
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!

- g06)
Prova con Explorer sul Mac:
Funziona?...CEEERRTTTOOOO!
Le pagine con fogli stile con javascript
funzionano perfettamente

- g07)
Prova con Netscape sul Mac:
Le pagine da Pierino e da intelligente non del
tutto ma le pagine con fogli stile con javascript
funzionano perfettamente

- g08)
Prova con iCab sul Mac:
Funziona?...CEEERRTTTOOOO!

- g09)
Prova con Explorer su Windows:
Funziona?...CEEERRTTTOOOO!

- g10)
Prova con Netscape su Windows:
Le pagine da Pierino e intelligente non del tutto ma
INCREDIBILE - le pagine con fogli stile con javascript
funzionano perfettamente.

Ordinare QUI