PREPARAZIONE CON ADOBE PHOTOSHOP USO DELLE SEZIONI E SALVATAGGIO PER WEB

Transcript

1 PREPARAZIONE CON ADOBE PHOTOSHOP USO DELLE SEZIONI E SALVATAGGIO PER WEB Le sezioni Le sezioni sono classificate in base al tipo di contenuto: Tabella Immagine - Nessuna immagine e al modo in cui sono create, basate su livelli guide in automatico etc. strumento sezioni Salvare per dispositivi web File è salva per web e dispositivi Finestra di dialogo Salva per Web A. Finestra degli strumenti B. Colore contagocce C. Impostazioni di ottimizzazione e menu a comparsa con altre opzioni D. Dimensione immagine E. Opzioni di animazione F. Menu del livello di zoom G. Menu di anteprima nel browser H. Immagine originale I. Immagine ottimizzata 1 Numero di finestre per l'anteprima. La prima mostra la foto originale, la seconda mostra quella che si sta ottimizzando, la terza mostra sia l'originale che quella ottimizzata, e la quarta finestra mostra 4 specchietti diversi, 2 Il menu a tendina che vi fa scegliere il tipo di immagine 3 Progressive: Spuntando questa voce l'immagine viene caricata con diversi passaggi, in modo tale da avere da subito un immagine di riempimento che si definisce man mano che viene caricata; 4 Quality: Serve per impostare la qualità della compressione 5 Image Size: sono i parametri in pixel di larghezza e altezza 5 Indica il tempo che ci vuole per caricare questa foto

2 BIT è l' espressione della qualità del colore di un apparecchio elettronico-in questo campo la misura raddoppia sempre(es. 8bit 16bit 32bit 64bit) Es: 8 bit di larghezza Formati di file ottimizzati per il Web Potete scegliere tra quattro formati per il Web. Attenetevi alle seguenti linee guida per la scelta del formato per un immagine destinata al Web: JPEG Nella maggior parte dei casi, è il formato migliore per salvare le fotografie. PNG-24 Simile al JPEG, è un buon formato per le fotografie. Scegliete PNG-24 invece di JPEG solo per immagini contenenti trasparenze. JPEG infatti non supporta la trasparenza, che deve essere riempita con un colore alone. Le dimensioni di un file PNG-24 sono spesso maggiori rispetto a quelle del file JPEG della stessa immagine. GIF È il formato ideale per il testo, la grafica al tratto e le illustrazioni con ampie aree di colore uniforme e particolari ben definiti. Inoltre, il formato GIF è necessario per esportare immagini con animazione. PNG-8 Il formato PNG-8 è un alternativa meno nota del GIF. Può essere usato per ottenere gli stessi risultati (tranne le animazioni). WBMP - Wireless Bitmap (WBMP) formato grafico utilizzato per i dispositivi di elaborazione mobile - formato è utilizzato appositamente nella pagine WAP In alcuni casi può capitare che Photoshop si perda i formati di salvataggio ad esempio.png oppure che la voce Salva per Web non sia abilitata o non siano presenti più filtri. In questi casi i metodi per riparare il nostro Photoshop sono i seguenti: Per prima cosa controlliamo che l'immagine sia su un canale di 8 bit. Per fare questo controllo andiamo su Immagine -> Metodo -> 8Bit/canale e vediamo se questa voce è spuntata. In caso affermativo possiamo controllare che la voce plugin sia abilitata in Photoshop quindi andremo su Modifica -> Preferenze -> Plug-Ins e impostiamo il percorso dei plugin dove c'è scritto cartella addizionale. Se anche in questo caso dovremo resettare le nostre preferenze, per fare questo mentre Photoshop è in fase di avvio teniamo premuti per 10 secondi i tasti CTRL ALT e SHIFT se si ha Windows altrimenti Opzione Comando Maiusc per MAC. Percorso

3 CREAZIONE SITO CON DREAMWEAVER dal menù principale Sito è Nuovo sito Nome del sito: dare un nome sito arte (titolo sito) Cartella principale locale: creare percorso è cartella del sito (dove ci saranno i file html, cartella immagini e sottocartelle) Cartella immagini predefinita: cartella del sito è immagini Informazioni sul remoto es: WebDAV: si riferisce a un set di istruzioni del protocollo HTTP, che permettono all'utente di gestire in modo collaborativo dei file in un server remoto RDS Remote Desktop Services: consente a un utente di accedere a dati e applicazioni su un computer remoto su una rete

4 Visualizzazione pannelli di lavoro Finestra file: qui troviamo tutti i file del nostro sito / Finestra stili CSS: creare e gestire gli stili testo box etc Menù principale Menù con icone Layout (file html) Finestra proprietà Permette di modificare tabelle immagini Assegnare classi e stili etc Cambia aspetto in base alla selezione

5 DEFINIZIONE DELLE PAGINE WEB File è Nuovo Iniziare da una pagina vuota

6 o pagine esempio (set frame) FOGLIO DI STILE CSS Proprietà di pagina e regole CSS Ogni pagina del nostro sito è completamente personalizzabile dal punto di vista grafico. La maggior parte degli strumenti e delle funzionalità per la personalizzazione dello stile grafico della pagina sono disponili all'interno della finestra delle proprietà della pagina finestra delle proprietà è divisa in parecchie schede Elabora è Proprietà pagina Aspetto (CSS) Aspetto HTML Collegamenti (CSS):

7 Definire regole CSS Dreamweaver offre la possibilità di creare delle regole di formattazione per l'aspetto di alcuni elementi della nostra pagina web. Creare una nuova regola per formattare i nostri testi Nella finestra scegliamo nel menu a tendina classe (applicabile a qualunque elemento HTML) in corrispondenza di tipo selettore, inseriamo un nome per la nuova classe (ad esempio formatpersonale) e clicchiamo su ok per proseguire TAG è una parola chiave o un termine associato a un'informazione (un'immagine, una mappa geografica, un post, un video clip...), che descrive l'oggetto rendendo possibile la classificazione e la ricerca di informazioni basata su parole chiave. Titolo - Parole chiave - Descrizione - Meta tag Deve essere sufficientemente descrittivo ed accattivante per convincere il navigatore a cliccare sul link. GESTIONE DELLE IMMAGINI Inserisci è Immagini (Scegliere immagine dalla cartella del sito) La finestra di dialogo ci chiederà di inserire un tag di testo alternativo (attributo alt del tag img) per l immagine, un elemento molto importante che potrà favorire gli utenti con browser vocali (ideati per consentire l'accesso in Rete anche alle persone portatrici di disabilità visive) Proprietà immagine dimensione dell immagine possiamo assegnare un ID che identificherà in modo univoco l'immagine stessa all interno del documento possiamo inserire un collegamento ipertestuale da associare al click sull'immagine Destinazione, in quale finestra aprire il link (ad esempio possiamo selezionare _blank possiamo modificare il posizionamento dell'immagine all'interno del documento

8 Attributo target / destinazione L'attributo target specifica dove deve essere aperta la pagina collegata. _top Carica la pagina collegata nella prima finestra di un set di frame. _main principale Carica la pagina collegata nella (seconda, terza etc dipende dall impostazione) finestra di un set di frame main. _blank Apre la pagina collegata in una nuova finestra del browser. _self Carica la pagina collegata nella stessa finestra del browser. Questa è l'opzione predefinita. Se si trova in un frame o set di frame, la pagina viene caricata al suo interno. _parent Carica il documento collegato nel set di frame principale diretto del documento. GESTIONE DELLE TABELLE Inserisci è Tabelle Proprietà tabelle

9 INSERIRE OGGETTI IMMAGINE E OGGETTI MULTIMEDIALI immagini raster (Bitmap, GIF, Jpeg, PNG e altri) sotto forma di oggetto bitmap. Creazione di un pulsante roller Inserisci è Oggetti Immagine è Immagine roller è Inserisci è Oggetti multimediali specificare le immagini orig. e roller Specificare il tipo di file o applicazione: SWF (Shockwave Flash o semplicemente Flash) - è un formato file vettoriale proprietario prodotto dal software Adobe Flash - contiene animazioni e/o applet con vari gradi di interattività e diverse funzioni - file compresso e non modificabile, mentre utilizza il formato.fla come documento di lavoro modificabile e riutilizzabile FlashPaper dichiarata obsoleta a partire da Dreamweaver CS5. FLV formato video a - scaricamento progressivo scarica il file FLV sul disco rigido del visitatore del sito e lo riproduce - streaming Video esegue lo streaming del contenuto video e lo riproduce immediatamente nella pagina Web, dopo un breve periodo di buffering - si deve disporre dell'accesso ad Adobe Flash Media Server Shockwave - formato dei filmati prodotti con software Macromedia e visualizzabili nei browser con apposito plug-in Applet applicazione - è un programma che viene eseguito come "ospite" nel contesto di un altro ActiveX - componenti riutilizzabili, simili a mini-applicazioni, che possono funzionare come i plugin dei browser Plugin - è un programma non autonomo che interagisce con un altro programma per ampliarne le funzioni. Ad esempio, un plugin per un software di grafica permette l'utilizzo di nuove funzioni non presenti nel software principale Flash Video - formato video usato per inviare video su internet usando Adobe Flash Player altri formati: audio (MP3, WAV e altri), sia in streaming che per effetti sonori. video (AVI, QuickTime, MPEG, Windows Media Video, FLV). Es: Percorso del file multimediale inserito Sfondo grazie alla quale possiamo selezionare un colore di riempimento. pulsante modifica apre l'editor (Adobe Flash, ovviamente se è installato sul pc) per modificare il file Nelle caselle qualità e dimensione possiamo stabilire le opzioni per la qualità del filmato

10 Uso dei FRAME I frame sistema di strutturazione del sito che consente nella creazione di una pagina "contenitore" di altre pagine fisiche codice A livello di codice HTML, infatti, un frameset non ha corpo ma solo i riferimenti alle pagine che comporranno il frameset I set di frame (o frameset) insieme di pagine web "incastrate" tra loro mediante un sistema "a cornice" consente una visualizzazione multipla di diversi segmenti di pagine Inserisciè html è frame Un sottomenu ci mostrerà le diverse tipologie di frame che possiamo inserire: frame alto, basso, a sinistra o a destra dell area di lavoro Oppure nuovo file frame è

11 Proprietà e salvataggio dei frameset l'area delle proprietà di quel singolo frame dimensione del frame impostare un bordo e dimensione La finestra di salva con nome ci chiederà, per ogni file non ancora salvato, di specificare un nome.

12 ALCUNI TERMINI Attributo target / destinazione L'attributo target specifica dove deve essere aperta la pagina collegata. _top Carica la pagina collegata nella prima finestra di un set di frame. _main principale Carica la pagina collegata nella (seconda, terza etc dipende dall impostazione) finestra di un set di frame main. _blank Apre la pagina collegata in una nuova finestra del browser. _self Carica la pagina collegata nella stessa finestra del browser. Questa è l'opzione predefinita. Se si trova in un frame o set di frame, la pagina viene caricata al suo interno. _parent Carica il documento collegato nel set di frame principale diretto del documento. TERMINI Frame Porzione rettangolare di una pagina Web costituita da un documento HTML a parte. Le pagine Web possono avere diversi frame, ciascuno con le stesse funzioni di una pagina senza frame, come lo scorrimento e il collegamento ad altri frame o pagine. GIF Uno dei formati più diffusi di codifica dei file contenenti immagini (grafica e fotografie). E' sinonimo di "file di immagini". gif Abbreviazione di Graphic Interchange Format, un formato di archivio utilizzato per la trasmissione di immagini bitmap su Internet. È particolarmente diffuso perché ha dimensioni più ridotte dei formati corrispondenti. HTML Linguaggio di codifica dei documenti ipertestuali inviati attraverso World Wide Web. Un documento preparato con HTML, visualizzato utilizzando un broswer come Mosaic, mostrerà testo formattato, grafici e collegamenti con altri documenti. Nome di dominio Il nome univoco del server e un suffisso che individua la collocazione del server o il tipo di organizzazione che gestisce il server. I nomi di dominio sono sovente utilizzati negli URL. Ad esempio, il nome di dominio microsoft.com fa parte dell'url Pagina Web Un documento HTML che può includere testo, immagini, suoni, filmati e collegamenti ad altre pagine e archivi Web. Plug-in Un'applicazione di piccole dimensioni che aggiunge delle funzionalità ad altre applicazioni. Ad esempio, il plug-in Apple QuickTime consente a Microsoft Internet Explorer di visualizzare filmati QuickTime nella finestra del browser.

13 PNG Abbreviazione di Portable Network Graphics, un formato di archivio comunemente usato per la trasmissione di immagini bitmap su Internet grazie alle sue dimensioni ridotte rispetto a formati equivalenti. Provider fornitori (vedi anche access, oppure service provider). Ente che fornisce a terzi accessi ad Internet, gratuitamente o a pagamento. Server Web Un computer in grado di restituire una pagina Web quando un browser la richiede. Ogni server Web su Internet ha un indirizzo univoco. Sito Web Un insieme di pagine Web (dette anche documenti HTML) situate sullo stesso server Web. Le pagine di un sito Web solitamente riguardano argomenti correlati e sono conesse le une alle altre da collegamenti. La maggior parte dei siti Web ha una pagina iniziale o home page. Server programma di gestione di un servizio che invia informazioni in particolare formato che deve essere ricevuto ed intercettato da un apposito programma Client dal lato ricevente.la Worl Wide Web é un esempio di servizio server/client TAG è una parola chiave o un termine associato a un'informazione (un'immagine, una mappa geografica, un post, un video clip...), che descrive l'oggetto rendendo possibile la classificazione e la ricerca di informazioni basata su Parole chiave Titolo- Parole chiave Descrizione -Meta tag Deve essere sufficientemente descrittivo ed accattivante per convincere il navigatore a cliccare sul link. URL Abbreviazione di Uniform Resource Locator, un numero o nome univoco che specifica la collocazione di un archivio su Internet. Un URL consiste di un protocollo, come ad esempio che specifica un tipo di pagina Web, seguito dal nome di un server o di un percorso. Ad esempio, l'url del sito web Microsoft è Web World Wide Web La parte grafica e multimediale di Internet. Gli archivi più diffusi sul World Wide Web (WWW) - brevemente detto Web - sono documenti HTML noti come pagine Web.