Creazione di un sito WEB  Un sito WEB e’ un’insieme di pagine WEB correlate e collegate  Per creare documenti HTML ci sono due modi:  usare un editor.

Presentazione sul tema: "Creazione di un sito WEB  Un sito WEB e’ un’insieme di pagine WEB correlate e collegate  Per creare documenti HTML ci sono due modi:  usare un editor."— Transcript della presentazione:

1 Creazione di un sito WEB  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) InfGen(4) - 1

2 Dreamweaver  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 InfGen(4) - 2

3 Finestra del documento  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 InfGen(4) - 3

4 Tavolozza oggetti  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 ) InfGen(4) - 4

5 Finestra ispezione proprieta’  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..... InfGen(4) - 5

6 Pulsantiera  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 InfGen(4) - 6

7 Editare pagine  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 )  colore del testo (normale, link, visitati, attivi)  colore o immagine dello sfondo InfGen(4) - 7

8 Scelta dei Colori  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 InfGen(4) - 8

9 Visualizzazione nel Browser  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 InfGen(4) - 9

10 Inserimento testo  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,...) InfGen(4) - 10

11 Tipo di carattere  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 InfGen(4) - 11

12 Inserimento Paragrafi  Un paragrafo (che sarà delimitato dai tag e ) 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) InfGen(4) - 12

13 Inserimento Immagini  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 InfGen(4) - 13

14 Disposizione Immagini  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 InfGen(4) - 14

15 Collegamenti (LINK)  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à InfGen(4) - 15

16 Collegamenti a Documenti  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 InfGen(4) - 16

17 Collegamenti ad Ancore  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 InfGen(4) - 17

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

19 Elenchi e Definizioni  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 InfGen(4) - 19

20 Strutturazione del Sito  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) InfGen(4) - 20

21 Reperimento Immagini  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. InfGen(4) - 21

22 Tabelle  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...) InfGen(4) - 22

23 Creazione di Tabelle  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 InfGen(4) - 23

24 Modifica Tabelle  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,... InfGen(4) - 24

25 Menu’ Modify-Table  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 InfGen(4) - 25

26 Frame  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 InfGen(4) - 26

27 Definizione di un Frameset  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 InfGen(4) - 27

28 Inserimento contenuto Frame  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 InfGen(4) - 28

29 Salvataggio Frame  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 InfGen(4) - 29

30 Uso di Frame nei collegamenti  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) InfGen(4) - 30

31 Finestra Ispezione HTML  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 ) InfGen(4) - 31

32 Gestione del Sito  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) InfGen(4) - 32

33 La Finestra di Gestione del Sito  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) InfGen(4) - 33

34 Trasferimento File  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) InfGen(4) - 34

35 Altre funzionalita’  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 InfGen(4) - 35

36 Stili personalizzabili  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) InfGen(4) - 36

37 Vantaggi nell’uso degli Stili  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. InfGen(4) - 37

38 Style Sheet in Dreamweaver  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 InfGen(4) - 38

39 Creare una Classe  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 InfGen(4) - 39

40 Ridefinizione TAG html  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) InfGen(4) - 40

41 Salvataggio di Stili  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 InfGen(4) - 41

42 Applicazione di Stili  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 InfGen(4) - 42

43 Librerie  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 InfGen(4) - 43

44 Cartella Library  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) InfGen(4) - 44

45 Modelli (template)  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 InfGen(4) - 45

46 Cartella Templates  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 InfGen(4) - 46

47 Comportamenti (behaviour)  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 InfGen(4) - 47

48 Esempio  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 InfGen(4) - 48

49 Livelli (Layer)  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) InfGen(4) - 49

50 Timeline  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) InfGen(4) - 50