Creazione di un sito WEB

1. Un sito WEB e’ un’insieme di pagine WEB correlate e collegate Per creare documenti HTML ci sono due modi: usare un editor di testo ASCII (es. BloccoNote) usare editor HTML Gli editor HTML si dividono in editor a TAG visuali (lavorano sul codice HTML) editor WYSIWYG (lavorano su una “approssimazione” della resa finale) Creazione di un sito WEB InfGen(4) - 1

2. Dreamweaver è un editor HTML di tipo WYSIWYG prodotto da Macromedia Fornisce diverse finestre (visualizzabili e nascondibili tramite il menù Window): finestra del documento la tavolozza oggetti finestra di ispezione proprietà pulsantiera Premendo F1 si attiva la guida in linea Dreamweaver InfGen(4) - 2

3. Visualizza nel modo più accurato possibile il documento come verrà reso da un browser Permette l’editing diretto del documento In fondo, la barra di stato contiene: il selettore di tag il menù dimensione finestra la dimensione ed il tempo previsto di caricamento la pulsantiera Finestra del documento InfGen(4) - 3

4. Permette l’inserimento rapido all’interno del documento di oggetti d’uso comune Esistono 4 gruppi di oggetti: comuni (es. inserisci immagine o tabella) forms (servono per l’inserimento dati) HEAD (informazioni di intestazione, es. refresh) Invisibili (informazioni non visualizzate, tipo commenti o tag <br>) Tavolozza oggetti InfGen(4) - 4

5. Permette la visualizzazione e la modifica delle proprietà dell’oggetto attualmente selezionato Ad esempio, può essere usato per applicare le proprietà di formattazione al testo: stile carattere allineamento testo dimensione carattere ..... Finestra ispezione proprieta’ InfGen(4) - 5

6. Permette un veloce accesso a finestre ausiliarie di Dreamweaver Ne studieremo due in particolare: finestra sito: permette l’accesso a funzionalità utili per la gestione del sito (es. visualizzazione della struttura del sito) finestra ispezione HTML: permette di visualizzare e modificare la rappresentazione HTML del documento Pulsantiera InfGen(4) - 6

7. Documenti HTML possono essere caricati e salvati da e su file tramite le operazioni classiche Open e Save (o Save as) La finestra proprietà di pagina (attivabile dal menù Modify) permette l’inserimento di: titolo della pagina (inserito fra i tag <TITLE>) colore del testo (normale, link, visitati, attivi) colore o immagine dello sfondo Editare pagine InfGen(4) - 7

8. Per la definizione di colori si usa la codifica RGB (composta da 6 valori esadecimali che, a gruppi di 2, rappresentano la quantità di rosso, verde e blu) Si può usare la tavolozza colori per scegliere uno fra 256 colori WEB safe (supportati dai browser). I colori WEB safe usano i soli codici 00, 33, 66, 99, CC, FF Scelta dei Colori InfGen(4) - 8

9. La visualizzazione della finestra del documento può non essere precisa, e non permette di provare i link Per avere una visualizzazione più fedele del documento si può richiamare da dreamweaver una visualizzazione tramite browser con: File - Preview in browser Visualizzazione nel Browser InfGen(4) - 9

10. Testo può essere liberamente inserito tramite la finestra del documento Le caratteristiche del testo sono definibili tramite ispezione proprietà o il menù Text: esistono 7 dimensioni assolute e 7 relative (sia in positivo che in negativo) esistono diversi tipi di formattazione (paragraph, heading, preformatted) esistono diversi tipi di stile (grassetto, italico,...) Inserimento testo InfGen(4) - 10

11. Il tipo di carattere viene definito tramite una sequenza: il browser userà il primo carattere che ha a disposizione presente nella lista mono: tipo di carattere monodimensionale (non proporzionale) serif: carattere che comprende elementi decorativi posti sulle terminazioni dei caratteri sans serif: carattere di tipo non serif Il menù Text permette la gestione del testo Tipo di carattere InfGen(4) - 11

12. Un paragrafo (che sarà delimitato dai tag <p> e </p>) viene chiuso premendo Invio Per andare a capo senza terminare il paragrafo si usa Insert-LineBreak o shift+invio Le proprietà del paragafo possono essere variate sempre tramite ispezione proprietà o il menù Text (es. definizione di liste) Inserimento Paragrafi InfGen(4) - 12

13. Una immagine può essere inserita in un documento: posizionare il cursore dove si vuole inserire l’immagine eseguire Insert-Image scegliere l’immagine desiderata I browser comunemente usano immagini JPEG (JPG) o GIF Inserimento Immagini InfGen(4) - 13

14. Il posizionamento dell’immagine rispetto al testo può essere di diversi tipi, tra i quali: top: allinea i bordi superiori middle: allinea gli assi centrali bottom: allinea i bordi inferiori left: il testo scorre a destra right: il testo scorre a sinistra NOTA riguardo alle immagini: non usarne troppe e di dimensione troppo grossa Disposizione Immagini InfGen(4) - 14

15. Esistono due tipi di collegamenti: collegamenti a documenti (tipico link ipertestuale) collegamento ad ancore all’interno di documenti (usato per muoversi all’interno di pagine divise in sezioni) I collegamenti possono essere definiti completamente tramite la finestra ispezione proprietà Collegamenti (LINK) InfGen(4) - 15

16. Per definire un collegamento ad un documento si: selezionare l’oggetto (porzione di testo o immagine) sorgente del collegamento inserire il documento destinazione nella finestrella Link della finestra ispezione proprietà Il documento destinazione può essere: esterno al sito: http://cs.unibo.it interno al sito: immagini/dest.html Collegamenti a Documenti InfGen(4) - 16

17. Per definire un collegamento ad una ancora si deve prima definire l’ancora: posizionare il cursore dove inserire l’ancora eseguire Insert-NamedAnchor inserire il nome dell’ancora Si può ora definire la sorgente del collegamento semplicemente aggiungendo #nomeAncora alla fine del riferimento al documento Collegamenti ad Ancore InfGen(4) - 17

18. I collegamenti esterni puntano a delle URL Esistono URL che non puntano a documenti HTML: ftp://ftp.cs.unibo.it/pub/techreportspermette di collegarsi ad un sito ftp mailto:zavattar@cs.unibo.it permette di spedire un messaggio di posta elettronica Collegamenti Speciali InfGen(4) - 18

19. Per creare elenchi è sufficiente: digitare il contenuto dell’elenco (in tutte le sue parti: item) selezionare il testo associare la proprietà lista ordinata o lista non ordinata Una definizione è un elenco dove: le righe dispari contengono le voci principali le righe pari contengono le definizioni Elenchi e Definizioni InfGen(4) - 19

20. Al momento della realizzazione di un sito: costruite una cartella che conterrà tutti i file che costituiscono il sito (anche le immagini) inserire la pagina iniziale del sito nella cartella con il nome index.html prevedere delle sottocartelle per le immagini utilizzate gruppi di pagine con contenuti omogenei altri tipi di file (stili, librerie, modelli) Strutturazione del Sito InfGen(4) - 20

21. Per il reperimento delle immagini da usare nel sito si possono seguire tre vie: cercare immagini in librerie di programmi installati sul proprio calcolatore cercare immagini disponibili su internet (usare il menù contestuale per salvarle in locale) crearle con programmi di grafica Le estensioni consigliate sono GIF, JPEG, JPG. Esistono anche GIF animate. Reperimento Immagini InfGen(4) - 21

22. Le tabelle rappresentano uno degli strumenti più avanzati per l’impaginazione del testo Le tabelle si basano su una struttura bidimensionale, organizzata in righe e colonne, che contiene celle All’interno di celle è possibile inserire oggetti HTML (testo, immagini, link ...) Tabelle InfGen(4) - 22

23. Per creare tabelle si: posiziona il cursore dove si vuole inserire la tabella clic su oggetto tabella (o menù Inserisci - Tabella) scegliere il numero di righe e colonne definire la larghezza. percentuale: rispetto alla videata del browser pixel: larghezza precisa Creazione di Tabelle InfGen(4) - 23

24. Per inserire oggetti nelle celle si: posiziona il cursore nella cella si applicano le solite procedure Esistono proprietà di: cella: allineamento orizzontale e verticale, dimensione, no wrap, sfondo e bordo tabella: (Modify - Table - Select table) dimensioni, spazi fra e attorno a celle, bordo, ... Modifica Tabelle InfGen(4) - 24

25. Per la gestione di tabelle è utile anche il menù Modify - Table: permette l’inserimento di righe e colonne permette la fusione di righe e colonne; utile per dare effetti asimmetrici alla tabella permette la divisione, per ripristinare lo stato originario Menu’ Modify-Table InfGen(4) - 25

26. Si può dividere la pagina del browser in parti separate ed indipendenti, ogni parte viene detta frame Ad ogni frame viene assegnato un nome identificativo La definizione dei frame e dei loro nomi viene detto frameset Frame InfGen(4) - 26

27. Per suddividere la pagina in frame si usa il comando Modify - FrameSet - Split ... Con Window - Frames si visualizza la finestra di ispezione frame: permette di selezionare i frame Si può cambiare la suddivisione dei frame trascinandone i bordi Definizione di un Frameset InfGen(4) - 27

28. Per inserire il contenuto di un frame si: seleziona il frame si inseriscono gli oggetti come al solito Il contenuto di un frame viene salvato in un file HTML separato, che viene richiamato dal file che contiene la definizione del frameset Inserimento contenuto Frame InfGen(4) - 28

29. Quando si gestiscono frame ci sono diversi meccanismi di salvataggio: File - Save: salva in una pagina HTML indipendente il contenuto del frame in cui si trova il cursore File - Save Frameset: salva il solo frameset File - Save all: salva sia il frameset che tutte le pagine con il contenuto dei singoli frame Salvataggio Frame InfGen(4) - 29

30. Quando viene caricata una nuova pagina come risultato della visita di un link, si può specificare il frame all’interno del quale far apparire il frame A tal fine si usa nel campo target del link: nome del frame _blank (nuova finestra), _parent (finestra genitore), _self (frame corrente), _top (finestra intera) Uso di Frame nei collegamenti InfGen(4) - 30

31. La finestra di ispezione HTML permette la visualizzazione e la modifica della codifica in HTML del documento attualmente in fase di editing Questa finestra è particolarmente utile per gestire aspetti non supportati da Dreamweaver, es. la definizione di un list header (tag <lh>) Finestra Ispezione HTML InfGen(4) - 31

32. Un sito viene usualmente progettato e realizzato prima sul proprio P.C. ed in seguito scaricato su un calcolatore remoto (con le funzioni di server web) Si ha così un sito locale ed un sito remoto Per spostare i file tra il sito locale ed il sito remoto si usa il protocollo FTP (file tranfer protocol) Gestione del Sito InfGen(4) - 32

33. La finestra di Gestione del Sito permette di visualizzare la struttura del sito locale e del sito remoto, e spostare file tramite FTP Per creare un sito si: crea la cartella che conterrà il sito locale nella finestra sito si esegue: Site - New site si definiscono le opzioni del sito locale e remoto Usualmente un sito ha una home page e delle sottocartelle del sito (es. cartella immagini) La Finestra di Gestione del Sito InfGen(4) - 33

34. Per permettere il frasferimento file fra sito locale e remoto si: usa il pulsante connect per eseguire il collegamento fra P.C. e server si selezionano i file che si vogliono trasferire e si usa get (da remoto a locale) oppure put (da locale a remoto) Trasferimento File InfGen(4) - 34

35. Altre fuzionalità interessanti della finestra di gestione sito sono: site map: produce una mappa del sito (rappresentazione dei collegamenti fra le pagine del sito) check links: controlla se esistono dei collegamenti la cui destinazione non è definita all’interno del sito select newer (local o remote): indica l’esistenza di file con date differenti Altre funzionalita’ InfGen(4) - 35

36. I tag html utilizzano degli attributi predefiniti che possono essere però personalizzati definendo nuovi stili stili: gruppo di attributi identificati da un solo nome fogli di stile: gruppo di stili La definizione di stili personalizzati avviene attraverso un particolare linguaggio detto CSSL (cascading styile sheet language) Stili personalizzabili InfGen(4) - 36

37. Si possono personalizzare gli stili usati usualmente da HTML Si possono definire una volta per tutte delle combinazioni di attributi che si vogliono applicare in più parti del documento Gli stili, una volta definiti ed applicati, possono essere variati in un secondo momento. La variazione si riflette in tutti i punti in cui lo stile è stato applicato. Vantaggi nell’uso degli Stili InfGen(4) - 37

38. Partire da Text - Custom Style - Edit Style Sheet Si permettono due tipi di stili principali classi: insieme di attributi applicabili a parti di testo ridefinizione TAG: si personalizzano gli stili adottati dai tag html Style Sheet in Dreamweaver InfGen(4) - 38

39. Uno stile personalizzato prevede la definizione di un nome (che inizia con il punto) la definizione degli attributi associati Esempio: si può definire una propria classe .heavy con caratteristiche di colore, font, e formattazione ben precise Creare una Classe InfGen(4) - 39

40. Si possono personalizzare gli attributi adottati dagli usuali TAG html Per esempio, si possono associare ai titoli di livello h1 delle caratteristiche personalizzate (si possono anche creare elenchi del tipo h1, h2, h3) Ridefinizione TAG html InfGen(4) - 40

41. Gli stili che vengono definiti vengono inseriti direttamente nell’header o in un file a parte (nel caso si usi l’opzione link) I file contenenti definizioni di stili usano l’estensione .css Una volta salvati, possono essere richiamati in nuovi documenti da Text - Custom Style - Edit Style Sheet - Link Salvataggio di Stili InfGen(4) - 41

42. Per applicare una classe: aprire dalla pulsantiera la finestra stili selezionare la parte di documento sulla quale di vuole applicare lo stile scegliere la classe da applicare Gli stili di tipo TAG rinominato vengono automaticamente applicati alle pagine che richiamano il nuovo stile Applicazione di Stili InfGen(4) - 42

43. Dreamweaver permette di definire oggetti di uso comune una volta per tutte inserendoli nella Libreria del sito L’oggetto può poi essere prelevato dalla libreria nel momento in cui serve all’interno di un documento Se l’oggetto viene variato all’interno della libreria, le modifiche si riflettono in tutti i documenti in cui l’oggetto è stato inserito Librerie InfGen(4) - 43

44. Gli oggetti di libreria sono costituiti da parti di codice html che vengono salvati nella cartella Library del sito con l’estensione .lbi Per aggiungere oggetti in libreria: Modify - Library - Add object Per usare gli oggetti in libreria si usa la finestra library (che si può aprire dalla pulsantiera) Cartella Library InfGen(4) - 44

45. Dreamweaver permette di creare dei documenti campione, detti modelli Quando si crea un documento partendo da un modello, si è sicuri di mantenere uno stile omogeneo La modifica apportata ad un modello viene riflessa su tutti i documenti sviluppati a partire da esso Modelli (template) InfGen(4) - 45

46. I modelli sono documenti HTML salvati utilizzando File - Save as Template.. Vengono salvati nella cartella Templates con estensione .dwt Per inserire parti modificabili all’interno di un modello si usa Modify -Template - New editable region Per sviluppare un documento a partire da un modello si usa: File - New from Template Cartella Templates InfGen(4) - 46

47. Si possono definire dei particolari comportamenti che vengono attivati quando accadono determinate situazioni Per definire questi comportamenti abbiamo a disposizione una serie di eventi che possono essere relativi ad oggetti html AZIONE = EVENTO + OGGETTO Es. onMouseOver attiva una azione quando il mouse passa sull’oggetto Comportamenti (behaviour) InfGen(4) - 47

48. Associare un messaggio all’azione onMouseDown eseguita su una immagine: selezionare l’oggetto (l’immagine) cliccare sulla pulsantiera Behaviour aggiungere l’azione desiderata (PopUp Message) I comportamenti vengono realizzati tramite il linguaggio JavaScript Esempio InfGen(4) - 48

49. Si possono inserire oggetti sovrapposti su differenti livelli posizionabili all’interno del documento Per inserire livelli si usa: Insert - Layer poi si procede come al solito (i livelli si possono ridimensionare e riposizionare) Livelli (Layer) InfGen(4) - 49

50. Si possono associare azioni in prossimitá di istanti temporali usando il pulsante TimeLine Esempio: due immagini che si scambiano a vicenda mettere le due immagini su due diversi layer inserire i layer sulla timeline (Modify - Add Object to Timeline) cambiare le proprietá di vis. (hidden - visible) Timeline InfGen(4) - 50