costruire un sito web 7ª lezione: martedì 13 marzo - dreamweaver
TRANSCRIPT
![Page 1: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/1.jpg)
Costruire un Sito Web
7ª Lezione: Martedì 13 Marzo - Dreamweaver
![Page 2: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/2.jpg)
L’ultima lezione Come si usano i frames?target? Come si inizia a costruire un sito?
- titolo- menu- pagina principale- pagine secondarie- contatti- tag meta
![Page 3: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/3.jpg)
Frame (continua) La scorsa lezione eravamo rimasti ai frames e
in particolare ci eravamo “arenati” qui:<frameset rows="80,*"><frame src="title.html"><frame src="main.html"></frameset>
Questi tag dividono la nostra pagina in due righe, la prima riga conterrà il documento title.html e la seconda main.html
Bene, oggi andiamo avanti.. Un attributo fondamentale per i frame è: name
![Page 4: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/4.jpg)
index.html Proviamo a scrivere un documento con i frame:
<html><head><title>Esercizio sui frame</title></head> <frameset rows="80,*"><frame src=“title.html”><frame src=“main.html”></frameset></html>
Questo è il codice che identifica il documento con i frame, chiamiamolo index.html.
title.html cosa sarà?Sarà la pagina html contenente il titolo del sito e il menu di navigazione.
![Page 5: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/5.jpg)
title.html Quindi creiamo un esempio per il documento title.html
<html><head><title>Esempio title.html</title></head><body><center>Titolo del Sito</center></br><center><a href=“curriculum.html”>Collegamento al Curriculum vitae<a></center></body></html>
Bene, che cosa abbiamo fatto in questo documento? Provate..
![Page 6: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/6.jpg)
main.html Ora creiamo i documenti main.html e curriculum.html. Il documento main sarà la prima pagina visualizzata sul
nostro sito, vediamo il codice:<html><head><title>Esempio main.html</title></head><body><center>Prima pagina del sito</center></br><center>Benvenuti sul mio sito web</center></body></html>
![Page 7: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/7.jpg)
curriculum.html<html><head><title>Esempio curriculum.html</title></head><body><center>Questa è la pagina del curriculum vitae di …</center></br>Data di nascita:Comune di Nascita:….</body></html>
Ora aprite il documento index.html, che cosa otterrete?
![Page 8: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/8.jpg)
index.html (2)
![Page 9: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/9.jpg)
index.html (3)
E se cliccate su “collegamento al C..”
![Page 10: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/10.jpg)
target e name Cavoli!!Si è aperto il documento del
curriculum vitae nella finestra del titolo!!Doveva aprirsi al posto della pagina principale..
Come si fa a farlo aprire nel frame della pagina principale?
Usando l’attributo name nella dichiarazione del <frame> e target come attributo di <a href>
Apriamo il codice di index.html e aggiungiamo gli attributi che mancano..
![Page 11: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/11.jpg)
target e name (2)<html><head><title>Esercizio sui frame</title></head> <frameset rows="80,*"><frame src=“title.html” name=“title”><frame src=“main.html” name=“main”></frameset></html>
Avete fatto?Ora andate ad inserire l’attributo target in title.html
![Page 12: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/12.jpg)
target e name (3)<html><head><title>Esempio title.html</title></head><body><center>Titolo del Sito</center></br><center><a href=“curriculum.html” target=“main”>Collegamento al Curriculum vitae<a></center></body></html>
Come per magia ora funzionerà tutto…quindi ricordatevi di aggiungere sempre questo attributo quando scrivete i collegamenti del menu!!
![Page 13: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/13.jpg)
Attributi dei frame Ma l’attributo “name” non è il solo
attributo di frame, ve ne sono tanti altri, tra i quali citiamo:scrolling: l’attributo scrolling serve per far comparire la barra di scorrimento a lato del documento. Qual è la barra di scorrimento?frameborder: attributo di frameset serve per nascondere il bordo e quindi a celare la struttura del documento.border: altro attributo di frameset che identifica le dimensioni del bordo.
![Page 14: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/14.jpg)
Il nostro sito web Dopo esserci annoiati con il tag frameset e i suoi
attributi possiamo dedicarci alla costruzione del nostro sito web con Dreamweaver.
Prima di tutto apriamo Dreamweaver e creiamo un documento nuovo, lo salviamo nella cartella Corso con il nome index.html
Voi vi direte perché proprio con questo nome? Per essere breve e chiaro vi dico che bisogna dare il nome index.html alla pagina principale del sito, dalla quale sono collegate tutte le altre.
Per esempio, se digitiamo http://www.falletto.it si aprirà il documento index.html contenuto all’interno dello spazio di falletto.it
![Page 15: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/15.jpg)
Il nostro sito web A questo punto create i vostri frame con
Dreamweaver. Ma come si fa? Andate su Inserisci-
>HTML->Frame Come faccio a definire le dimensioni del
primo frame? E del secondo? Cliccate sul bordo del frame e vi
troverete i dati dei due frame in questione, che non sono nient’altro che gli attributi border, frameborder, scrolling..
![Page 16: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/16.jpg)
Le proprietà dei frame Come potete notare avete tutti i dati
necessari per personalizzare i vostri frame. Viene evidenziato il primo frame, ma se voi cliccate con il mouse sul secondo frame verrà evidenziati le sue proprietà.
![Page 17: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/17.jpg)
Il nostro sito web (2) Abbiamo creato i nostri 2 frame, ma
dobbiamo salvarli, come si fa? Andiamo con il mouse sul primo frame,
clicchiamo con il tasto destro, poi andiamo su File->Salva frame
Utilizzate lo stesso procedimento per il secondo frame.
Quando applicate una modifica al documento, al posto di salvare ogni singolo frame, fate “File->Salva tutto”
![Page 18: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/18.jpg)
Il nostro sito web (3) A questo punto sorge una domanda:
come facciamo a centrare il testo e a giustificarlo?e soprattutto come facciamo a inserire il nostro menu?Usiamo le tabelle
Prima di tutto, come si è già ripetuto più volte dobbiamo aver chiaro che cosa vogliamo creare e ottenere (fase di progettazione).
Creiamo il menu: creiamo una tabella, con 2 righe, 1 colonna, larga 750 pixel. Come mai 750 pixel?
![Page 19: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/19.jpg)
Il menu Sulla prima riga inseriamo il titolo del sito, un
logo, etc.. Sulla seconda riga andremo a mettere il nostro
menu, quindi dividete la riga/cella in N colonne, dove N sta al numero di scelte/bottoni che vogliamo inserire nel nostro sito. Per esempio:N=5 (Home, Curriculum, Pensieri, Foto, Contatti)
In ogni cella che si è creata andremo a mettere i nomi dei nostri collegamenti e a dilettarci ad allinearli, colorarli, ridimensionarli, etc..
![Page 20: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/20.jpg)
Le pagine Anche per le pagine richiamate nel “main”, ovvero il
secondo frame utilizzeremo le tabelle..perchè? Perché ci permettono di centrare, giustificare il testo
senza problemi e di gestire all’interno eventuali foto e altri documenti.
Provate a costruire il vostro sito, poi lo vediamo insieme..
Suggerimento: nelle lezioni precedenti avete provato a costruire il vostro sito in html, quindi utilizzate le pagine html che avete già creato precedentemente, richiamatele e apportate le opportune modifiche.
Richiamarle?come si fa a inserire in un frame una pagina html già creata in precedenza?
Andate nel menu File->Apri in frame Buon lavoro
![Page 21: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/21.jpg)
La fine Una volta che avete terminato la
creazione del vostro sito, dovete controllare:- collegamenti corretti- caratteri e dimensioni proporzionati- giusto compromesso di colori- controllo del codice- etc..
![Page 22: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/22.jpg)
e i meta tag? Vi siete ricordati di mettere i meta tag? Come
fanno i motori di ricerca senza di loro?Piangono..
Se non lo avete fatto..andate su Inserisci->HTML->Tag Heade provvedete ad inserire almeno le parole chiave e la descrizione del sito.
Ora potete mettere on line il vostro sito! Bravi..avete creato il vostro primo sito web!
Complimenti.. oggi avete iniziato la vostra carriera da webmaster.
![Page 23: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/23.jpg)
Conclusioni In quest’ultima lezione vi ho solo dato delle linee guida
da seguire per la creazione del vostro sito, essendo una procedimento molto pratico dovete provare e riprovare talvolta facendo degli esperimenti..
Dedichiamo un’ora di lezione alla parte pratica per provare a creare il vostro sito web e a “sbattere” il naso con Dreamweaver, i suoi segreti e i suoi enigmi.
Come avete potuto vedere durante queste 7 lezioni, costruire un sito non vuol dire prendere un qualsiasi programma di editor web e “pasticciarci” sopra, come abbiamo fatto noi in queste due lezioni, ma conoscere il linguaggio html e saper interagire con i programmi utilizzati, per ottenere un buon risultato in termini di: semplicità, usabilità e soprattutto leggibilità.
![Page 24: Costruire un Sito Web 7ª Lezione: Martedì 13 Marzo - Dreamweaver](https://reader035.vdocuments.mx/reader035/viewer/2022070313/5542eb76497959361e8e0205/html5/thumbnails/24.jpg)
Conclusioni (continua) Le ultime due cose che voglio dirvi sono: Fate
attenzione a non utilizzare immagini troppo “pesanti” (alias: comprimetele) e a salvare sempre i documenti, le foto, le pagine web con nomi senza spazi.
Al posto degli spazi magari inserite gli underscore (_).
Vi saluto e a presto. Per qualsiasi cosa Luca ed io siamo a vostra
disposizione. Le nostre mail “purtroppo” le avete, ora siamo rovinati!!!
Buon proseguimento..ciao, ciao