Inizio Progettare e realizzare un sito web con dreamweaver.

Presentazione sul tema: "Inizio Progettare e realizzare un sito web con dreamweaver."— Transcript della presentazione:

1 inizio Progettare e realizzare un sito web con dreamweaver

2 Il mio sito web Cosa serve: Un progetto Un editor web
Un Provider per la pubblicazione

3 Il Progetto Prima di accingersi a costruire delle pagine web è bene disegnare, anche se per grandi linee, il progetto di comunicazione che si vuole realizzare. Ciò evita in seguito di perdere il filo del progetto e facilita gli aggiornamenti e le modifiche. L’estrema flessibilità delle tecnologie web non ci deve indurre costruire le nostre pagine alla rinfusa, perché dopo un po’ ci accorgeremmo di sapere come evolve il progetto e cosa sono tutti quei files e oggetti che compaiono nella lista del nostro sito. Fate attenzione a nominare i files creati, evitate nomi generici tipo: pag1,pag2 ecc. Il nome del file è come il titolo di un libro: ne deve riassumere il contenuto. E’ bene anche costruire un archivio di cartelle che ci permettono di individuare velocemente la struttura del nostro progetto Uno schema semplice Uno schema complesso

4 Il Progetto Realizziamo il nostro progetto web: La 1° pagina;
La pagina con i frames; I fogli di stile; Collegamenti e ancore; Visualizzare nuove pagine; I livelli e i comportamenti; Procedure javascript; Visualizzare documenti di applicativi Usare la barra di navigazione The end

5 Uno schema semplice Il Progetto
Questo schema di progetto, abbastanza intuitivo, ha una struttura ad “albero” con una root iniziale da cui si diramano una serie di pagine concatenate fra di loro in modo gerarchico. La prima pagina (homepage) è quella d’ingresso e normalmente viene chiamata index.htm o default.htm. Ciò consente di non dichiararla quando si apre un sito: mentre quando navighiamo nelle pagine all’indirizzo del dominio viene aggiunta la pagina richiamata:

6 Uno schema complesso home 2° fav 3° fav 1° fav sfondo Il Progetto
In questo schema le pagine, pur mantenendo uno schema ad albero, condividono diversi oggetti home 1° soggetto 2° soggetto 3° soggetto 2° fav 3° fav 1° fav sfondo suoni

7 DREAMWEAVER MX Dreamweaver MX è un editor professionale con il quale possiamo costruire non solo semplici pagine web, ma un vero progetto anche usando database. Ai classici menù a tendina e ai tools ad icone, sono aggiunti dei pannelli che racchiudono comandi e funzioni per tipologia: comportamenti server, comportamenti, fogli stile ecc. Descrizione dell’interfaccia

8 La mia prima pagina selezionare Clicco qui
E’ un’area di lavoro che riempio di testo e immagini. Costruiamo il 1° livello del diagramma Realizziamo l’homepage su una pagina vuota. Dal menù File – nuovo – pagina di base – html Questa è la mia pagina homepage che andrò a salvare col nome: index.htm Procedura: menù- File –salva con nome –index.htm selezionare Clicco qui

9 Formattiamo la 1° pagina
Ciò che ho scritto lo seleziono per formattarlo, assegnando alcuni attributi per renderlo più presentabile. Procedura: con il cursone dentro il foglio clicco il tasto destro del mouse (menù d’ispezione) e seleziono: proprietà di pagina. Seleziono un colore per lo sfondo e uno per il testo. Per il tipo e corpo del carattere posso definirli dalla barra degli strumenti, oppure apro il menù Formato e seleziono: carattere. Aggiungo un bottone per il collegamento. Procedura: menù Inserisci- Inserisci pulsante flash –seleziono un pulsante- testo pulsante: benvenuti Testo pulsante

10 Formattiamo la pagina La maniglia ti consente di nascondere i pannelli
Sul bottone flash attiviamo il collegamento ipertestuale alla pagina frameset_principale.htm che creeremo in seguito.

11 La pagina con i frames Struttura principale sommario
Per realizzare questa pagina usiamo um modello di frame. Dal menù File – Nuovo – Set di frame (scegliamo un modello) intestazione sommario principale Un Frameset è costituito da “una cornice” che richiama i frames che a loro volta sono singoli oggetti (files). Il modello scelto è costituito da 4 oggetti: il frameset e 3 frames

12 La pagina con i frames Questa pagina (frameset) assembla 3 frames. Il frames superiore lo usiamo come titolo delle nostre pagine, il frame di sinistra come sommario dei nostri servizi, il frame al centro dove visualizzeremo le pagine dei nostri servizi Nel file superiore abbiamo inserito una tabella costituita da 1 riga e due colonne. Dal menù Inserisci – Tabella Essa ci serve per meglio posizionare il contenuto della nostra intestazione. A sinistra inseriamo un’immagine che abbiamo costruito con un programma grafico e a destra scriviamo il titolo Trascinando la maniglia che separa le celle determiniamo la larghezza delle celle

13 La pagina con i frame Per attivare il collegamento dalla homepage (modalità ipertestuale), dobbiamo costruire la pagina di destinazione. Questa pagina la costruiamo utilizzando i frame Per creare i frame seleziono un modello fra quelli proposti. Per creare i frame posso usare il menù File oppure dal pannello inserisci seleziono frame e un modello Procedura: Menù File –Nuovo – Set di frame (scegli il modello) – crea Alla successiva schermata –ok-

14 La pagina con i frame Creiamo l’intestazione della pagina con il logo a sinistra e una scritta a destra. Per meglio controllare il logo e la scritta attiviamo dentro il frame una cartella con 2 colonne e una riga. Nelle prima cella metto il logo, nella seconda la scritta. Procedura: Menù Inserisci – Tabella (inserisco i valori che mi servono: 1 riga e 2 colonne e seleziono la larghezza a 100 percentuale, ovvero determino che la tabella sia visualizzata a tutto monitor –clicco ok –(ancora –ok- alla finestra successiva Seleziono e formatto le due celle separatamente, ovvero seleziono un sfondo per ognuna e ciò vale soprattutto per la seconda, perchè il logo faccio in modo di farlo rientrare nell’intera cella. Le tabelle sul web non servono solo per archiviare dati ma soprattutto per controllare porzioni di video Click

15 La pagina con i frame Per selezionare il frameset (il contenitore dei frame) basta fare clic sul bordo tra due frame e appare la finestra delle Proprietà che mi consentirà di assegnare una serie di attributi. Per far comparire la Finestra delle proprietà di un Frame, posiziono il cursone nel frame e faccio click tenendo premuto il tasto ALT. Posizionandomi sul bordo di due frame posso trascinare (allungare o restringere) il frame stesso. Sul frame sx definisco un indice delle categorie che illustrerò nel sito Nel frame principale inserisco una tabella per posizionare un’ immagine e una breve presentazione. Ho costruito una tabella con due righe e due colonne e ho compilato anche la didacalia che appare sopra. Ho unito le due celle sottostanti dove ho scritto la mia breve presentazione. Procedura: (seleziono le due celle adiacenti), Menù Elabora – Tabella –Unisci celle Ho formattato il testo e dato uno sfondo usando la finestra Proprietà sottostante

16 La pagina con i frame Ecco il risultato.
Avendo aggiunto delle voci all’indice esse non vengono visualizzate. E’ necessario attivare al frame la barra di scorrimento verticale. Per fare ciò attivo la finestra Proprietà con ALT+click dentro il frame. Attivo lo scorrimento Automatica e spunto Non ridimensionare. Click in una zona vuota della finestra ed ecco il risultato Se vogliamo possiamo anche cambiare qualche attributo ad un blocco di testo su cui abbiamo applicato una classe di stile, ma attenzione perché ciò può creare intrecci fra stili il cui risultato non è detto sia quello atteso. Alla 1° voce dell’indice cambio colore e corpo usando le Proprietà dei caratteri

17 Le pagine dell’indice: news; biblioteca; cd-rom; orari; personale; recapiti
Collego le voci del mio sommario al frame principale così da sfogliare le categorie, lasciando inalterato l’elenco del frame di sinistra. Creiamo tante pagine quante sono le voci dell’indice Per primo creiamo il file news con in testa un indice da cui sfogliamo i documenti che compongono la pagina. Per creare l’indice usiamo le tabelle (1 riga per 5 colonne) ed in ogni cella inseriamo una voce. Appena sotto creiamo un’altra tabella con 1 riga e due colonne.

18 Le pagine dell’indice: news; biblioteca; cd-rom; orari; personale; recapiti
Prima di scrivere in alto l’intestazione delle news definisco una classe di stile: titolo_h1.css, ridefinendo il tag h1 Dal Menù Testo – Stili CSS – Nuovo Seleziono il tag h1 (che assegna il formato ai titoli) e scelgo alla schermata successiva gli attributi del carattere. Nella Finestra Proprietà - Formato seleziono Titolo1 e scrivo in alto nella pagina: News che viene visualizzato applicando automaticamente gli attributi assegnati nella creazione di titolo_h1.css.

19 I fogli di stile Per dare un aspetto più gradevole al nostro testo finora abbiamo utlizzato o il menù Formato oppure gli attributi della finestra Proprietà sottostante. Può essere utili definire delle classi di stili e dei fogli di stile che posso assegnare ad una pagina ovvero ad una selezione di pagina. Procedura: Menù Testo – Stili CSS . Chiamo questa classe stile1 e la definisco solo per questo documento. Nella finestra successiva definisco gli attributi per le categorie che mi interessano. In particolare Tipo, Sfondo e Blocco di testo. Seleziono il blocco di testo dove voglio applicare la classe di stile e dal pannello: Progettazione – Stili CSS – Applica Stili cattura Stile1. Posso selezionare la classe di stile1 anche dal menù Testo – Stile CSS –Stile1 Per aggiungere altri caratteri, basta selezionarli da Modifica elenco caratteri.

20 Fogli di stile da collegare
Un foglio di stile si può associare a più pagine web e si salva come file con l’estensione css. Dal Menù –Testo – Stili CSS – Nuovo stile CSS Lo chiamo fogliostile1 (da distinguerlo da stile1), seleziono Nuovo file....-ok- salvo il file: Fogliostile1.css Assegno alle varie categorie diversi attributi. Esso viene aggiunto al pannello Progettazione – Stili CSS. Questo file lo posso associare a qualsiasi pagina e a tutti i tag definiti vengono assegnati gli attributi scelti. Come possiamo notare i fogli di stile ci consentono di assegnare allo stesso tag molti più attributi altrimenti utilizzabili dalla barra degli strumenti e dalla finestra proprietà. Pur avendo associato un foglio di stile alla pagina, posso comunque cambiare la formattazione ad un blocco di testo, ma devo far attenzione perchè potrei mischiare le assegnazioni degli attributi e il risultato non essere quello atteso.

21 Fogli di stile e ancora Creo una nuova classe di stile per i titoli delle news e un altro per i sotottitoli. Scelgo, per ogni classe, un nuovo carattere e anche un suo background. Creo una tabella con una sola riga, senza didascalia, a 5 colonne. In ogni colonna metto il titolo di una news. Inserisco un Filetto orizzontale (menù Inserisci) e nell’area sottostante creo una tabella con 5 righe e 2 colonne. Scrivo (copio/incollo) la prima news, senza preoccuparmi di definirne la formattazione, nella prima cella a sx, e scrivo top nella cella adiacente. Ripeto l’operazione per tutte e cinque le righe. Alla fine seleziono i blocchi di testo e applico gli stili di classe che ho creato. Seleziono il primo titolo che sta in testa alla news e clicco sull’icona “Ancora” (si visualizza dal pannello Inserisci- Comune) e assegno un nome all’ancora “progetto”. Ripeto le operazioni per le altre news. Seleziono il primo titolo nella tabella in alto. Mi posiziono nella riga collegamento e scrivo -#progetto; ripeto l’operazione con gli altri titoli assegnando al collegamento preceduto da # il nome dell’ancora corrispondente. Nella navigazione, per risalire “all’indice” con top, creo sui titoli della tabella in alto un’ancora e il corrispondente collegamento con # da top.

22 Fogli di stile: modifiche
Effettivamente i miei titoli sono troppo sgargianti e allora decido di cambiarne aspetto. Precedentemente avevo creato 4 classi di stile con le quali avevo formattato il titolo della pagina, la tabella in alto, i titoli e i sottotitoli delle news. I titoli delle news sono stati formattati da classe2 che fa parte ddello stile classe2.css Cambio lo sfondo e la spaziatura sia delle parole che delle lettere, provo diverse soluzioni tramite il bottone Applica e quando mi ritengo soddisfatto -ok

23 Definire il sito Per poter pubblicare il sito ho bisogno di utilizzare uno spazio su un Server Web che tipicamente viene gestito da un Provider. Solo dopo aver pubblicato le pagine su un server web esse sono visibili da Internet Procedura: menù Sito – Gestiti sito – nuovo –sito Ho due scelte: la finestra generali e avanzate che fanno la stessa cosa. La prima è guidata, la seconda ha un menù di scelta. Scegliamo avanzate. Attiviamo la categoria: informazioni locali. Diamo un nome al sito locale: citicord(n) Scegliamo la cartella locale su cui andremo a salvare il tutto. Se non l’abbiamo precedentemente creata la possiamo creare adesso, dopo aver attivato sfoglia. Procedura: Apri-Selezione Spuntiamo la cache

24 Definire il sito Clicca qui per selezionare una cartella locale

25 Definire il sito Definire il sito
Seleziono la categoria: informazioni su remoto. In questa categoria devo assegnare le specifiche che mi vengono fornite dal Provider: la modalità d’accesso (tipicamente FTP), il nome o l’IP dell’Host, come è stata chiamata la cartella remota, il nome utente e la password. Dunque ho bisogno di una cartella locale, che gestisco io, e di una cartella remota (lo spazio web assegnatomi dal provider) dentro la quale vado a trasferire i files con FTP Spunta Usa FTP passivo

26 Definire il sito Le altre categorie non mi servono per questo progetto e chiudo la finestra con ok e fine. Adesso è attiva la cartella locale e remota Questa freccia attiva il trasferimento dalla cartella locale al remoto del sito ovvero dei file selezionati Questa freccia attiva il trasferimento dal remoto al locale In questo menù posso selezionare la cartella locale oppure la cartella remota

27 Definire il sito Seleziono Server di prova.
Se non ripropone gli stessi valori de: Informazioni su remoto li correggo. Con questa modalità utilizzo la cartella remota per provare le mie pagine. Questa modalità mi garantisce che ciò che vedo io vede chiunque naviga in internet per visitare il sito

28 Un nuovo frameset per i servizi di biblioteca
Creiamo un nuovo file e selezioniamo set di frame. Anche per questo frameset scelgo tre frame: intestazione_biblioteca.htm; sommario_bibblioteca.htm; principale_biblioteca.asp. Collego ogni singola voce del sommario al mainframe in modo tale che la navigazione rimane nella pagina. Ho diviso la narrativa in: italiani e stranieri (la stessa cosa la ripeto per gli altri generi) e faccio in modo che cliccando su italiani/stranieri mi compaia nel frame principale l’elenco degli autori presenti

29 La tabella degli autori
Innanzitutto creiamo dei collegamenti sui titoli delle opere che si apriranno in una nuova pagina sovrapposta (per ottenere ciò selezioniamo _blanck nella pannello Proprietà – dest dopo aver definito il file di collegamento nel rigo collegam. Creiamo nuove classi di stile da applicare a questa pagina e a quelle ad essa collegate.

30 Fogli di stile: nuove classi
Se ho bisogno di aggiungere degli altri formati perchè mi sono accorto che tra quelli che ho creato non ve ne sono che mi soddisfano per formattare un blocco di testo (nel caso i titoli diversi dagli autori) creo un’altra classe di stile e l’aggiungo al foglio di stile stile_autore.css. Menù Testo –Stili CSS –Nuovo Assegno un nome alla classe: titoli_opere, seleziono Crea stile ..., lo definisco in stile_autore.css –ok Creo anche un’altra classe di stile per le biografie degli autori e una per il sunto delle opere Classi di stile aggiunte a stile_autore.css Per aggiungere una classe posizioinandosi con il cursore vicino al foglio di stile e cliccare il tasto dx del mouse

31 I livelli I livelli ci consentono di controllare agevolmente una porzione di video e possono essere anche nidificati. Ai livelli viene assegnato un id che possiamo richiamare per attivare una serie di comportamenti come vedremo in seguito. Per attivare un livello: dal Menù Inserisci-Livello. Nell’area del livello posssiamo inserire testo, immagini, tabelle ecc. Se non appare l’icona bisogna verificare dal Menù: Modifica- Preferenze –Livelli – Visibilità-Default Al livello possiamo assegnare vari attributi che compaiono nel pannello Proprietà (in fondo alla pagina). E’ bene dargli un nome significativo cambiando quello generico che appare sotto ID livello Nel pannello proprietà, oltre agli attributi che abbiamo avuto modo già di incontrare, ve ne sono due che ci serviranno in seguito. Il 1° -ordine- è la profondità (rilievo) dell’area e il secondo -Vis- è la possibilità di rendere invisibile il livello, ovvero renderlo visibile a seguito di un’azione.

32 I livelli Costruiamo la pagina della biografia di un autore:Tolstoj.htm e inseriamo due livelli (uno che contiene l’immagine dell’autore e l’altro una sintesi dell’opera Anna Karenina. Facciamo in modo che abbiamo le stesse dimensioni. Diamo due nomi diversi agli ID livello Selezioniamo Tolstoj e nella riga Comportamenti del Pannello Proprietà scriviamo: javascript:; Il nostro obiettivo è di far apparire e scomparire questi riquadri (livelli) al passaggio o al click del mouse sulla parola Tolstoj e sull’icona inserita nel testo. Per far ciò abbiamo bisogno di attivare dei comportamenti

33 Attivare i comportanti
Il pannello comportamenti (Menù finestra – Comportamenti) ci consente di attivare una serie di eventi alla selezione attivata sulla pagina corrente. Dreamweaver automaticamente inserisce delle procedure javascript che vengono richiamate al click o al passaggio del mouse. Cliccando su + ci viene mostrato l’elenco dei comportamenti (eventi) attivabili (in grassetto) alla selezione effettuata sull’area di lavoro. Altri comportamenti (in grigio) pur presenti non sono associabili alla selezione Selezionando il bottone a fianco dell’autore attiviamo un pop up che ci dica in quale secolo è vissuto

34 Attivare i comportanti
Selezioniamo la parola tolstoj (facciamo attenzione che nel rigo Collegamenti ci sia scritto javascript:) e attiviamo il comportamento Mostra-nascondi livelli. La finestra di dialogo ci elenca tutti i livelli presenti nella pagina. Selezioniamo tolstoj e clicchiamo sul bottone Mostra. Riattiviamo Comportamenti e riselezioniamo tolstoj. Ma questa volta clicchiamo sul bottone Nascondi. Ripetiamo l’operazione con l’icona per la quale non è necessario scrivere nel rigo collegamento: javascript Selezioniamo il 1° livello e nel rigo Vis attiviamo hidden. Ripetiamo l’operazione anche per il 2° livello

35 Attivare i comportanti
Le pagine delle biografie degli autori facciamo in modo che siano aperte come nuove finestre all’attivazione del relativo collegamento. Selezioniamo il nome dell’autore e attiviamo il comportamento: Apri finestra browser. Nell’url di destinazione selezioniamo il file che abbiamo precedentemente costruito e assegniamo-variamo i parametri presenti, mentre nella finestra Proprietà al rigo collegamenti scriviamo: javascript:; Selezioniamo il titolo dell’opera: Anna Karenina e anche questa pagina la visualizziamo in una nuova finestra che riporta la sintesi dell’opera.

36 Inserire immagini con contorno
Quando inseriamo un immagine e poi vi dobbiamo aggiungere una didascalia a fianco, possiamo assegnare due attributi nella finestra proprietà: Allinea- ( Centro per centrare la didascalia) Spazio O –(assegniamo un valore in pixel che distanzia ciò che scriviamo Didascalia che affianca l’immagine Testo affiancato usando i livelli dall’immagine. Se vogliamo che il testo contorni la figura abbiamo due strumenti: le tabelle oppure i livelli che ci consentono di sezionare la pagina e di conseguenza il testo, ma che a video sembra un tutt’uno.

37 Procedure Javascript Finora abbiamo inserito diverse procedure javascript, ma vi ha provveduto automaticamente dreamweaver. Proviamo adesso ad inserire noi delle semplici procedure che possiamo recuperare da internet. Essendo degli script devono essere inseriti direttamente nel codice, pertanto bisogna cliccare sull’icona –mostra codice -per far apparire nell’area di lavoro. Il codice è formato da una serie di tag e script La procedura normalmente viene inserita fra i tag <head> </head> e richiamata da una riga inserita nel <body> … <a href="#" onClick="Javascript:printit()">stampa</a> …….</body>. A video compare la parola stampa con colore blu e con un collegamento attivato (manina) <head> <script language="javascript"> <!-- function printit() { parent.window.print(); } //--> </script> <title>biografia di Tolstaj</title> <meta http-equiv="Content-Type" content="text/html; charset=iso "> </head>

38 Procedure Javascript Possiamo attivare un evento all’apertura della pagina, facendo eseguire una procedura javascript. Questa a fianco fa apparire l’ora che si aggiorna in continuo in un rigo che decidiamo noi, nella pagina richiamata. <HEAD> <SCRIPT LANGUAGE="JavaScript"> var timerID = null; var timerRunning = false; function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; } function showtime () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds() var timeValue = "" + ((hours >12) ? hours -12 :hours) timeValue += ((minutes < 10) ? ":0" : ":") + minutes timeValue += ((seconds < 10) ? ":0" : ":") + seconds timeValue += (hours >= 12) ? " p.m." : " a.m." document.clock.face.value = timeValue; // you could replace the above with this // and have a clock on the status bar: // window.status = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true; } function startclock () { // Make sure the clock is stopped stopclock(); showtime(); </SCRIPT> </HEAD> <BODY bgcolor="white" onLoad="startclock() ; timerONE=window.setTimeout"> <form name="clock" onSubmit="0"> <input type="text" name="face" size=13 value=""> </font> </body>

39 Procedure Javascript <script language="Javascript"> // script per pop up newwindow=window.open (‘popup.htm', '', 'width=420,height=320,scrollbars=yes') window.opener=self </script> La procedura sopra riportata, inserita in una pagina attivata con un collegamento, alla sua apertura apre un pop up (popup.asp)

40 Visualizzare files di applicativi
Per visualizzare dei documenti creati in word, excel, power point, acrobat ecc., ovvero creati con un programma applicativo che genera documenti, basta creare un collegamento al documento stesso. Selezionando il testo o l’immagine nella riga dei collegamenti scrivere il nome del documento con l’estensione e il relativo percorso, se esso risiede in una cartella diversa, ovvero usare l’icona cerca file. Quando si attiva il collegamento ci viene mostrata la finestra qui a fianco che ci chiede se vogliamo salvare il file o aprirlo. Ovviamente se decidiamo di aprirlo immediatamente bisogna avere installato sul proprio computer l’applicativo che l’ho ha generato, altrimenti mi ritorna errore

41 Visualizzare files di applicativi
Se invece vogliamo che il documento appaia in pagina web bisogna salvare il documento, aprendolo con l’applicativo che lo ha generato, e salvare con l’estensione web. Nel caso di documenti adobe acrobat bisogna aver installato sul proprio pc il reader File word in formato web File pdf

42 Usare la barra di navigazione
Adesso vediamo una modalità diversa di visualizzare le biografie degli autori in catalogo Apriamo un nuovo foglio formato da due frame: uno superiore e uno inferiore. Nel frame superiore mettiamo la barra di navigazione. Dal Menù Inserisci – Immagini interattive – barra di navigazione Creiamo tre bottoni e per ognuno usiamo due bottoni: uno che sarà visualizzato in posizione di “riposo” e l’altro quando vi passiamo sopra con il mouse. Questo secondo conterrà anche una scritta che riassume il periodo di appartenenza degli autori Il frame inferiore sarà quello di destinazione dove verranno visualizzate le biografie

43 Usare la barra di navigazione
I singoli bottoni possono essere collegati direttamente ad un file, ma possiamo anche attivarvi dei comportamenti. Useremo il comportamento Mostra menu popup che ci consente di assegnare al bottone selezionato diversi eventi (files) e di definire la posizione, colore e aspetto del menù che comparirà passando sopra il bottone

44 the end