Costruire un Sito Web

1. Costruire un Sito Web 6ª Lezione: Martedì 6 Marzo - Dreamweaver

2. 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

3. 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!

4. 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.

5. 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.

6. 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!!

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

8. 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!

9. Avviamo il …(continua)

10. La pagina iniziale • Una volta aperto il programma comparirà la pagina iniziale che vi permetterà di …

11. 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é.

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

13. Il codice di default • Diamo uno sguardo al codice..

14. 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>.

15. 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”.

16. 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.

17. 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.

18. La prima pagina HTML (2)

19. 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!

20. 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>.

21. 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..

22. Il pannello “Proprietà”

23. 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>

24. 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.

25. 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..

26. 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.

27. I CSS (fine) • Spuntate la casella “Usa CSS invece dei..” che trovate nel menu Modifica->Preferenze->Generali

28. I menu • Adesso tralasciamo il nostro documento html e vediamo che cosa ci offre Dreamweaver.

29. 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”

30. “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!

31. 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

32. “Site” • Riprendiamo le slides della prima lezione, apriamo “Sito” o “Site” di Dreamweaver. In questo caso è la versione inglese.

33. “Site” (2) • Dreamweaver, esegue le operazioni di connessione, e di autenticazione

34. “Site” (3) • Supponiamo di voler pubblicare il file foto.gif sul server

35. “Site” (3) • Carichiamo la foto sul server come mostrato in figura

36. “Site” (4) • Sta scrivendo la foto sullo spazio web..

37. “Site” (5) • Al termine del trasferimento, il file viene visualizzato anche nella parte sinistra della finestra

38. File Manager on line

39. File Manager on line (2)

40. 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

41. WS_FTP • Per copiare i files è sufficiente inserire l’indirizzo FTP del nostro server, il nostro ID e la password

42. WS_FTP - continua

43. Prossima lezione • I frames • Esercizi • Creiamo il nostro sito web personale • Saluti e Baci!

44. 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?

45. 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?

46. I frames (2) • Facciamo un esempio:

47. I frames (3) • Ma ancora non mi è chiaro..

48. 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!

49. 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]