Costruire un Sito Web

Costruire un Sito Web
6ª Lezione: Martedì 6 Marzo Dreamweaver
In questa lezione






Che cos'è Dreamveaver?
Menu’ principali
Accenno ai frames, al tag div, etc..
Richiamo al programma “site” relativo
alla prima lezione
Iniziamo a creare il nostro sito internet
con dreamveaver
La prossima lezione
Allora..iniziamo



Dreamweaver è il miglior programma per la
realizzazione di pagine e siti web, è in concorrenza
principalmente con Front Page di Microsoft e altri
quali HomeSite, Sciite, etc..
E’ un programma molto complesso, noi vedremo le
caratteristiche principali e i comandi utilizzati più di
frequente.
Qual è la casa produttrice di tale programma?
Dreamveaver è prodotto da Macromedia (dal 2005
società di proprietà dell’Adobe Systems) e la prima
versione è da datata 1997, quindi tutto sommato un
programma recente. Ora siamo alla versione 8!
A chi è rivolto?


Il programma è dotato di un’interfaccia visuale che
consente la creazione di una pagina web anche senza
conoscere l’html, ma consente anche di scrivere il
codice nudo e crudo come se fossimo nel Blocco Note
di Windows, funzione molto apprezzata dai
programmatori. N.B.: Dreamweaver interpreta i
comandi dati e li tramuta in codice, talvolta
commettendo errori e imprecisioni!
Quindi questo programma è rivolto sia a webmaster
esperti, sia a niubbi.
E’ gratuito?Dove lo trovo?



Dreamweaver è un programma shareware, ovvero un
programma a pagamento del quale viene fornita una versione
dimostrativa per un tempo limitato, in questo caso Adobe
permette di scaricare l’ultima versione del programma con tutte
le funzioni attive per un periodo di prova di 30 giorni.
Quanto costa? 479 €!!
Andate sul sito di Adobe: www.adobe.com/it/ poi su
DOWNLOAD, poi scorrete la pagina fino alla categoria “Web
design, sviluppo e pubblicazione” trovate Macromedia
Dreamweaver 8 e la possibilità di acquistarlo, scaricare la
versione di prova, aggiornare il programma alla ultima versione
o alle ultime patch (solo in versione inglese) oppure le
estensioni.
Dove lo trovo? (continua)

Scegliendo “Prova” vi verrà richiesto il vostro
identificativo di Adobe, se lo avete inserite
negli appositi campi ID e password, altrimenti
inserite l’ID e scegliete la risposta “no, ne
voglio creare una nuova” e poi il pulsante
“continua”. Al termine della registrazione
(gratuita) potete finalemente scegliere la
versione che vi interessa (es.: la versione per
Windows e non quella per Macintosh!!). Nota
bene: il programma “pesa” circa 60Mb, quindi
se avete connessioni lente non vi cimentate a
scaricarlo!!
L’installazione

Siamo
arrivati
all’installazione!La
procedura che ci permette di installare il
programma in questione è molto
semplice..cosa ci chiederà il programma
di install?
1- Dove mettere Dreamweaver
2- Per quali linguaggi settare D. come
programma predefinito
Avviamo il programma..


La prima volta che apriamo il programma (troviamo
l’icona sul desktop, o se assente andiamo a lanciare il
programma su Start->Programmi->Macromedia) ci
verrà richiesto in che modalità avviare Dreamweaver,
cosa significa? In poche parole ci viene chiesto che
interfaccia grafica (layout) utilizzare nell’area di
lavoro. Le possibilità sono due:
1- Designer e Coder
2- Schermo doppio
Si tende ad utilizzare la visualizzazione a Coder per
comodità e praticità d’uso
N.B.: Si potrà sempre cambiare modalità di
visualizzazione!Quindi la scelta non pregiudica nulla
..e l’installazione è fatta!
Avviamo il …(continua)
La pagina iniziale

Una volta aperto il programma comparirà la pagina iniziale che
vi permetterà di …
Il nostro primo documento HTML

Cliccando su “Crea Nuovo” e poi su Nuovo,
Dreamweaver crea un nuovo documento html che si
presenta come una pagina bianca, vediamo perché.
..to be continue



La pagina bianca che vedremo rappresenta la visualizzazione di
un documento html vuoto, ma noi abbiamo visto nelle
precendenti lezioni che un documento html deve avere
determinati tag per essere reso tale. Dove sono i tag?
Cosa notate nella barra delle applicazioni sopra alla nostra
pagina bianca? Le prime 3 icone-scritte identificano la modalità
di visualizzazione della pagina su cui stiamo lavorando (in
questo caso il nostro nuovo documento), poi vi è la scritta
“Titolo” con il titolo del nostro documento e altre icone che
vedremo successivamente.
Quindi..come facciamo a vedere il nostro codice html?
Clicchiamo su Codice e come per magia compariranno i nostri
tag (fondamentali e non) e tutto ci sembrerà più famigliare
(sembra di essere nel nostro caro e amato Blocco Note).
Il codice di default

Diamo uno sguardo al codice..
Il codice di default (2)



Il nostro documento inizia subito con un commento
che identifica lo standard utilizzato nella pagina
HTML. Il DOCTYPE è fondamentale se si inizia a
programmare con i linguaggi dinamici e per utilizzare
script e codici aggiuntivi, perché dice al browser in
che modo è scritta la pagina e come va interpretata,
soprattutto se usate degli editor web quali
Dreamweaver.
Proseguendo la lettura avremo il tag html con un
argomento “xmlns”. Questo attributo ha solamente
un valore informativo e lo tralasciamo.
Scorrendo il codice vedremo che è presente un altro
tag non ancora conosciuto: il tag <META>.
Il tag <META>




Mediante il tag <META> si possono inserire nell'intestazione dei dati
che non vengono visualizzati nella pagina ma servono al browser e ai
motori di ricerca per gestirne i contenuti in modo più efficace.
È possibile specificare con il tag <META> informazioni come: il nome
dell'autore della pagina, una breve descrizione dei contenuti della
pagina ed un elenco schematico di parole-chiave legate ai contenuti.
Fondamentali per l’indicizzazione nei motori di ricerca.
Il tag <META> non richiede chiusura ma l'aggiunta di alcuni attributi e
dei rispettivi valori.
Quindi la riga di codice <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
non fa nient’altro che specificare al browser (ci ricordiamo che cos’è un
browser, vero?) che il contenuto del documento è di formato testo/html
e che i caratteri corrispondono allo standard “iso-8859-1”.
Esempi di tag <META>




Per inserire nell'intestazione il nome dell'autore si utilizza:
<META NAME=author CONTENT="nome e cognome">
Per inserire nell'intestazione una descrizione del documento si
utilizza:
<META NAME=decription CONTENT="breve descrizione della
pagina">
Per inserire nell'intestazione un elenco di parole-chiave che
specificano
l'argomento
della
pagina
si
utilizza:
<META NAME=keywords CONTENT="parola1, parola2,
parola3, parola4>
Le parole chiave possono essere separate sia da spazi che da
virgole; alcuni motori di ricerca prediligono la prima tecnica, altri
la seconda.
La prima pagina HTML



Come avete potuto vedere possiamo utilizzare
Dreamweaver come il blocco note e scrivere il
codice della nostra pagina html.
Proviamo a fare una prova, scriviamo nel
campo body: “Il nostro primo documento con
Dreamweaver”, poi proviamo a centrarlo..
cosa ne uscirà?
<center>"Il nostro primo documento con
Dreamweaver"</center>
Andiamo a vedere cliccando su Progettazione.
La prima pagina HTML (2)
La prima pagina HTML (3)




Come avete potuto vedere, la modalità “Progettazione”
nasconde i tag e fa risaltare tutto quello che è specificato nel
codice. Esempio, proviamo a cambiare il colore del carattere
utilizzato, oppure il colore dello sfondo. Provate…
Avete provato?quindi abbiamo visto che modifcando il codice
modifichiamo anche la progettazione..
Nelle vostre menti malate (eh si malate perché a me non
sarebbe mai venuto in mente di iscrivermi ad un corso di html!!)
inizia a farsi largo una domanda: ma allora.. a cosa serve
Dreamweaver?
Adesso proviamo a modificare la Progettazione..
Domanda: ma si modifica la progettazione? Certo, questa è una
delle “doti” di questo programma, ovvero la possibilità di creare
e modificare una pagina web andando a modificare
direttamente “ciò che vediamo” senza mettere le mani al codice!
La prima pagina HTML (4)


Quindi ritorniamo al nostro primo documento, e
proviamo ad inserire nuovamente la scritta “Il nostro
primo documento con Dreamweaver”, ma questa
volta non lo scriverete in “Codice”, ma in
“Progettazione”. Ora andate a vedere il codice e
vedrete che è esattamente la scritta di prima inserita
in body, ma senza il center
Ma come facciamo ad centrare il testo? E qui arrivano
le novità..vi ricordate che abbiamo detto che
Dreamweaver ha delle limitazioni?bene, una di
queste è l’allineamento al centro. Di default questo
editor non usa il comando <center>, cmq è possibile
impostarlo, ma usa un attributo del tag <DIV>.
Il tag <DIV>







Questo Tag è utilizzato, come il Tag SPAM (più limitato), per assegnare degli
attributi ad un blocco di testo.
Il tag <DIV> necessità di un tag di chiusura, poiché così ci permette di
diversificare le parti del testo su cui vogliamo applicare gli attributi.
Ma quali sono gli attributi principali di <DIV>? Come abbiamo
precedentemente detto questo tag serve per l’allineamento del testo, vediamo la
sintassi:
<div align="center">“Il nostro primo documento con Dreamweaver” </div> ma
se noi lo volessimo a destra?o a sinistra?O volessimo giustificare il testo?beh,
basta sostituire a center i valori: right, left, justify
E ora provate..
e come si fa ad allineare nella progettazione? Selezionate il testo da allineare,
andate nel menu Testo->Allinea e scegliete allineamento che desiderate!
Esiste un altro modo?beh..certo..nella vostra area di lavoro, in basso trovate il
pannello “proprietà di selezione” che vi permetterà di..
Il pannello “Proprietà”
Allineamento


Come si fa ad allineare un testo o una tabella?Come abbiamo
visto possiamo utilizzare il tag div o il center, ma non
solo!Vogliamo giustificare solamente un paragrafo?anche il tag
<p> ha l’attributo di allineamento, quindi potremo allineare il
nostro testo in questo modo:
<p align="center">"Il nostro primo documento con
Dreamweaver"</p>
E se volessimo allineare una tabella?
<table align="center">
<tr>
<td>Scarlett Johansson</td>
</tr>
</table>
I CSS




CSS (Cascading Style Sheets - Fogli di Stile a Cascata) è uno dei fondamentali
linguaggi standard. CSS è utilizzato per controllare l’aspetto visuale ed estetico
di una pagina web.
I CSS (Cascading Style Sheets - Fogli di Stile a Cascata) sono una
tecnica/linguaggio che permette di fissare gli stili (per es. tipo di carattere, colori
e spaziature) da applicare ai documenti html per controllarne l’aspetto visuale ed
estetico di una pagina web.
Gli stili da utilizzare verranno inseriti una sola volta, con una sola dichiarazione
relativa al carattere, colore, spaziatura, margine, etc.. Senza dover tutte le volte
indicare indicare la caratteristiche del testo in questione.
Esempio: la seguente riga di codice nel documento html:
<strong><font color="#FF0000" size="5" face="Arial, Helvetica, sans-serif">"Il
nostro primo documento con Dreamweaver"</font></strong>
verrà sostituita da:
<span class="Stile1">"Il nostro primo documento Dreamweaver"</span>
Stile1 sarà un richiamo a delle caratteristiche precedentemente dichiarate.
I CSS (2)






La caratteristica principale dei CSS è l’usabilità. Tutte le volte che noi
desideriamo un testo con le caratteristiche di Stile1, basta che lo
inglobiamo con i tag
<span class=“Stile1”>testo</span>
senza utilizzare tutte le volte i tag classici dell’html.
E se dovessimo cambiare carattere?cambiamo il carattere nella
dichiarazione di Stile1 è le modifiche saranno automaticamente
applicate su tutto il testo identificato da Stile1 (a cascata).
Possiamo creare tutti gli stili che vogliamo e utilizzarli a nostro
piacimento.
“Stile1” è il primo stile che Dreamweaver crea automaticamente, e
prosegue numerando in via sequenziale tutti gli stile che andiamo a
creare.
Ma come si crea uno stile?Anche solo modificando il campo carattere
nel pannello proprietà otteniamo la creazione di uno stile..
Proviamo..
I CSS (3)





Riassumiamo: Con i fogli di stile è possibile precisare le caratteristiche
stilistiche che deve assumere una pagina HTML senza doverle indicare
volta per volta in ogni sezione del documento.
I fogli di stile utilizzano una sintassi diversa da quella dell'HTML:
- gli attributi sono inseriti fra parentesi graffe { };
- per assegnare i valori si utilizzano i ":" invece del segno "=".
Quando una pagina HTML viene aperta da un browser che supporta i
fogli di stile i vari elementi della pagina assumono le caratteristiche
definite nel foglio di stile. Al variare del foglio di stile varia anche
l’aspetto della pagina.
I fogli di stile possono essere di due tipi:
- Inseriti nella pagina HTML (incorporati) [Per siti di piccole dimensioni]
- Memorizzati in un file esterno che ha estensione .ccs (esterni)
[Per siti di medio-grandi dimensioni]
Visto che è un argomento complesso e richiede un po’ di dimestichezza
non utilizzeremo i fogli di stile e quindi li disabilitiamo su Dreamweaver
prima di iniziare a lavorare.
I CSS (fine)

Spuntate la casella “Usa CSS invece dei..” che trovate
nel menu Modifica->Preferenze->Generali
I menu

Adesso tralasciamo il nostro documento
html e vediamo che cosa ci offre
Dreamweaver.
I menu (2)

Come tutti i programmi che si rispettino, i menu sono ben fatti e sono
ricchi di comandi e strumenti utili, quali:
- “Visualizzazione anteprima nel browser”
- “Controlla pagina”
- “Scorciatoie da tastiera”
- “Preferenze”: fondamentale per configurare il Dreamweaver
- Le opzioni del menu “Visualizza” in parte già utilizzate (voi vi
chiedere: quando?)
- “Inserisci”: il menu principale
- “Elabora”: indispensabile perché presenti i menu di proprietà di
pagina e di selezione
- “Testo”: per manipolare le caratteristiche del testo
- “Sito”: per la gestione si un sito web e della sua pubblicazione
- e infine “Finestra”
“Sito”









Abbiamo salvato il nostro documento?
“Sito” è un tool che permette di gestire, aggiornare e manipolare il nostro sito
sul web
Prima di salvarlo creiamo la cartella in cui creare il nostro sito, come facciamo?
Andiamo su Sito->Nuovo Sito
Diamo un nome al sito, per esempio “Corso”, dopodichè ci verrà chiesto di
inserire l’indirizzo del nostro sito (se non lo abbiamo, lasciamo inalterato e
proseguiamo)
Vogliamo utilizzare una tecnologia server? Rispondere No (noi stiamo lavorando
con il semplice HTML)
Selezionale “Modificare copie locali” e scegliere in qualche posizione salvare la
nostra cartella
Se abbiamo lo spazio web e i dati necessari per collegarci nell’ftp selezioniamo
“FTP”, altrimenti “Nessuno”
Bravi..avete appena configurato il programma “Sito” che vi permetterà di
pubblicare online i vostri documenti html! Ora possiamo salvare il documento
nella cartella del nostro sito!
Pubblicare la pagina su internet

In che modo possiamo pubblicare una
pagina in rete?
- Con il tool “Sito” di Dreamweaver
- Con l’interfaccia grafica/File Manager
messo a disposizione on line dal
provider che ci fornisce lo spazio web
- Con un client ftp
“Site”

Riprendiamo le slides della prima lezione,
apriamo “Sito” o “Site” di Dreamweaver. In
questo caso è la versione inglese.
“Site” (2)

Dreamweaver, esegue le operazioni di
connessione, e di autenticazione
“Site” (3)

Supponiamo di voler pubblicare il file
foto.gif sul server
“Site” (3)
 Carichiamo
la foto
mostrato in figura
sul
server
come
“Site” (4)
 Sta scrivendo la foto sullo spazio
web..
“Site” (5)

Al termine del trasferimento, il file viene
visualizzato anche nella parte sinistra
della finestra
File Manager on line
File Manager on line (2)
Usiamo l’FTP


Per pubblicare le pagine su uno spazio
web viene fornito l’indirizzo FTP:
vediamo
come
comportarci
per
trasferire i files
Uno dei programmi più semplici da
utilizzare è WS_FTP, disponibile sia nella
versione gratuita che a pagamento
WS_FTP

Per copiare i files è sufficiente inserire l’indirizzo FTP
del nostro server, il nostro ID e la password
WS_FTP - continua
Prossima lezione




I frames
Esercizi
Creiamo il nostro sito web personale
Saluti e Baci!
The End



Ma prima di lasciarvi vi dico una cosa, provate
ad andare a capo!
Dreamweaver
ha
il
problema
dell’interlinea!Ogni volta che andate a capo
viene
creato
un
nuovo
paragrafo
<p>testo</p> , quindi dovete provvedere a
mano a cancellare i tag <p>!Il <br> è quasi
un
optional!E
qui
risulta
utile
la
visualizzazione a “Dividi”
Qualcuno di voi sa cosa sono i frames?
I frames





I frame ("cornici") possono dividere lo schermo in
finestre separate.
Ognuna di queste finestre può contenere un
documento in HTML.
Qual è il comando/tag che bisogna utilizzare per
dividere il nostro documento in più frame?frameset.
Quindi: se si vuole creare una pagina con dei frame,
bisogna prima di tutto creare il documento html con il
frameset, poi creare i normali documenti html che
dovranno essere contenuti in ognuno di questi frame.
Non ci ho capito niente!!A cosa servono i frame?
I frames (2)

Facciamo un esempio:
I frames (3)

Ma ancora non mi è chiaro..
I frames (4)




Ma come si creano i frame?
Provate un po’ a scrivere nel vostro codice body
queste due linee
<frameset rows="80,*">
</frameset>
Allora?Cosa ne viene fuori?Bene..il tag frameset va
messo fra la head e il body!Provate..
La nostra pagina verrà divisa in due da una riga
posta a 80 pixel dal margine superiore!E la seconda
riga alta tutto il resto della pagina!Abbiamo creato la
suddivisione della pagina in due frame!
I frames (5)



Bravi..ma come facciamo a richiamare un documento
nei 2 frame?Per esempio nel primo frame voglio
mettere il documento title.html e nel frame sotto
voglio quello main.html
<frameset rows="80,*">
<frame src="title.html">
<frame src="main.html">
</frameset>
Ma non basta ancora, per fare un buon documento
con i frame bisogna specificare ancora un po’ di cose,
tra le quali.. [alla prossima lezione]