La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "inizio Il mio sito web Cosa serve: Un progetto Un editor web Un Provider per la pubblicazione."— Transcript della presentazione:

1

2 inizio

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

4 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. Lestrema 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

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

6 Uno schema semplice 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 dingresso e normalmente viene chiamata index.htm o default.htm. Ciò consente di non dichiararla quando si apre un sito: mentre quando navighiamo nelle pagine allindirizzo del dominio viene aggiunta la pagina richiamata: Il Progetto

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

8 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 dellinterfaccia

9 La mia prima pagina E unarea di lavoro che riempio di testo e immagini. Costruiamo il 1° livello del diagramma Realizziamo lhomepage 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

10 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ù dispezione) 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

11 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.

12 La pagina con i frames Per realizzare questa pagina usiamo um modello di frame. Dal menù File – Nuovo – Set di frame (scegliamo un modello) Struttura principale 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

13 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 unimmagine 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

14 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-

15 La pagina con i frame Creiamo lintestazione 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 nellintera cella. Le tabelle sul web non servono solo per archiviare dati ma soprattutto per controllare porzioni di video Click

16 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

17 Ecco il risultato. Avendo aggiunto delle voci allindice 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 dellindice cambio colore e corpo usando le Proprietà dei caratteri La pagina con i frame

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

19 Prima di scrivere in alto lintestazione 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.

20 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.

21 Fogli di stile da collegare Un foglio di stile si può associare a più pagine web e si salva come file con lestensione 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.

22 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 nellarea 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 loperazione 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 sullicona Ancora (si visualizza dal pannello Inserisci- Comune) e assegno un nome allancora 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 loperazione con gli altri titoli assegnando al collegamento preceduto da # il nome dellancora corrispondente. Nella navigazione, per risalire allindice con top, creo sui titoli della tabella in alto unancora e il corrispondente collegamento con # da top.

23 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

24 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 labbiamo precedentemente creata la possiamo creare adesso, dopo aver attivato sfoglia. Procedura: Apri-Selezione Spuntiamo la cache Definire il sito

25 Clicca qui per selezionare una cartella locale Definire il sito

26 Seleziono la categoria: informazioni su remoto. In questa categoria devo assegnare le specifiche che mi vengono fornite dal Provider: la modalità daccesso (tipicamente FTP), il nome o lIP dellHost, 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 Definire il sito

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

28 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 Definire il sito

29 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 lelenco degli autori presenti

30 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.nuove classi di stile

31 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 unaltra classe di stile e laggiungo 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 unaltra 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

32 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. Nellarea del livello posssiamo inserire testo, immagini, tabelle ecc. Se non appare licona 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) dellarea e il secondo -Vis- è la possibilità di rendere invisibile il livello, ovvero renderlo visibile a seguito di unazione.

33 Costruiamo la pagina della biografia di un autore:Tolstoj.htm e inseriamo due livelli (uno che contiene limmagine dellautore e laltro una sintesi dellopera 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 sullicona inserita nel testo. Per far ciò abbiamo bisogno di attivare dei comportamenti I livelli

34 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 lelenco dei comportamenti (eventi) attivabili (in grassetto) alla selezione effettuata sullarea di lavoro. Altri comportamenti (in grigio) pur presenti non sono associabili alla selezione Selezionando il bottone a fianco dellautore attiviamo un pop up che ci dica in quale secolo è vissuto

35 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. Attivare i comportanti Selezioniamo tolstoj e clicchiamo sul bottone Mostra. Riattiviamo Comportamenti e riselezioniamo tolstoj. Ma questa volta clicchiamo sul bottone Nascondi. Ripetiamo loperazione con licona per la quale non è necessario scrivere nel rigo collegamento: javascript Selezioniamo il 1° livello e nel rigo Vis attiviamo hidden. Ripetiamo loperazione anche per il 2° livello

36 Le pagine delle biografie degli autori facciamo in modo che siano aperte come nuove finestre allattivazione del relativo collegamento. Selezioniamo il nome dellautore e attiviamo il comportamento: Apri finestra browser. Nellurl 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 dellopera: Anna Karenina e anche questa pagina la visualizziamo in una nuova finestra che riporta la sintesi dellopera. Attivare i comportanti

37 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 dallimmagine. 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 tuttuno. Didascalia che affianca limmagine Testo affiancato usando i livelli

38 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 sullicona –mostra codice -per far apparire nellarea di lavoro. Il codice è formato da una serie di tag e scriptserie di tag La procedura normalmente viene inserita fra i tag e richiamata da una riga inserita nel … stampa …….. A video compare la parola stampa con colore blu e con un collegamento attivato (manina) biografia di Tolstaj

39 Possiamo attivare un evento allapertura della pagina, facendo eseguire una procedura javascript. Questa a fianco fa apparire lora che si aggiorna in continuo in un rigo che decidiamo noi, nella pagina richiamata. Procedure 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(); }

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

41 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 limmagine nella riga dei collegamenti scrivere il nome del documento con lestensione e il relativo percorso, se esso risiede in una cartella diversa, ovvero usare licona cerca file.collegamento 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 lapplicativo che lho ha generato, altrimenti mi ritorna errore

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

43 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 laltro 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

44 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 Usare la barra di navigazione

45


Scaricare ppt "inizio Il mio sito web Cosa serve: Un progetto Un editor web Un Provider per la pubblicazione."

Presentazioni simili


Annunci Google