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

Presentazione sul tema: "Costruire un Sito Web 6ª Lezione: Martedì 6 Marzo - Dreamweaver."— Transcript della presentazione:

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à dellAdobe 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 uninterfaccia visuale che consente la creazione di una pagina web anche senza conoscere lhtml, 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 lultima 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.www.adobe.com/it/

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 lID 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 Linstallazione Siamo arrivati allinstallazione!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 licona 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 nellarea 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à duso N.B.: Si potrà sempre cambiare modalità di visualizzazione!Quindi la scelta non pregiudica nulla..e linstallazione è 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.

15 Il tag Mediante il tag 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 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 lindicizzazione nei motori di ricerca. Il tag non richiede chiusura ma l'aggiunta di alcuni attributi e dei rispettivi valori. Quindi la riga di codice non fa nientaltro 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 Per inserire nell'intestazione il nome dell'autore si utilizza: Per inserire nell'intestazione una descrizione del documento si utilizza: Per inserire nell'intestazione un elenco di parole-chiave che specificano l'argomento della pagina si utilizza: 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à? "Il nostro primo documento con Dreamweaver" 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 è lallineamento al centro. Di default questo editor non usa il comando, cmq è possibile impostarlo, ma usa un attributo del tag.

21 Il tag Questo Tag è utilizzato, come il Tag SPAM (più limitato), per assegnare degli attributi ad un blocco di testo. Il tag 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 ? Come abbiamo precedentemente detto questo tag serve per lallineamento del testo, vediamo la sintassi: Il nostro primo documento con Dreamweaver 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 ha lattributo di allineamento, quindi potremo allineare il nostro testo in questo modo: "Il nostro primo documento con Dreamweaver" E se volessimo allineare una tabella? Scarlett Johansson

24 I CSS CSS (Cascading Style Sheets - Fogli di Stile a Cascata) è uno dei fondamentali linguaggi standard. CSS è utilizzato per controllare laspetto 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 laspetto 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: "Il nostro primo documento con Dreamweaver" verrà sostituita da: "Il nostro primo documento Dreamweaver" Stile1 sarà un richiamo a delle caratteristiche precedentemente dichiarate.

25 I CSS (2) La caratteristica principale dei CSS è lusabilità. Tutte le volte che noi desideriamo un testo con le caratteristiche di Stile1, basta che lo inglobiamo con i tag testo senza utilizzare tutte le volte i tag classici dellhtml. 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 laspetto 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 lindirizzo 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 nellftp 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 linterfaccia 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 lFTP Per pubblicare le pagine su uno spazio web viene fornito lindirizzo 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 lindirizzo 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 dellinterlinea!Ogni volta che andate a capo viene creato un nuovo paragrafo testo, quindi dovete provvedere a mano a cancellare i tag !Il è 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 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 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]