del sito con Dreamweaver & Fireworks CS6 Creazione del sito 2 ‣ Il primo passo consiste nell’impostazione di un sito con Dreamweaver ‣ Il sito corrisponde ad una cartella sul computer locale che contiene tutti i file del sito remoto vero e proprio ‣ Dreamweaver è in grado di sincronizzare rapidamente le due versioni (locale e remota) Cartella locale Sito remoto
del sito con Dreamweaver & Fireworks CS6 Impostazione del sito 3 Impostare il nome del sito (visibile solo in DW) Impostare la cartella locale che contiene il sito
del sito con Dreamweaver & Fireworks CS6 Impostazione del sito 4 Nella sezione server vanno impostati i parametri per la connessione al server remoto. In questa esercitazione non è necessario farlo.
del sito con Dreamweaver & Fireworks CS6 Impostazione del sito 5 Cartella in cui DW registra le immagini generate automaticamente da alcune funzioni. Non è necessario impostarla File contenente le eventuali regole CSS per il design responsivo Indirizzo del sito web Il modo in cui DW deve scrivere i collegamenti I collegamenti con distinzione M/m sono necessari nei siti ospitati su server Unix. Nel dubbio lasciare attivato Memoria cache interna di DW. velocizza alcune operazioni
del sito con Dreamweaver & Fireworks CS6 Percorsi assoluti e percorsi relativi 6 ‣ Il percorso (o path) di un file è la “strada” da percorrere per individuarlo all’interno di un sito web (o più genericamente di un filesystem) ‣ I collegamenti web (da un documento a un altro documento, a un’immagine, ecc...) devo quindi rappresentare il percorso per arrivare dal primo al secondo file ‣ I percorsi assoluti (nel pannello DW → collegamenti relativi alla cartella principale del sito) sono quelli che partono dalla base del sito (la root, o cartella principale, indicata dal carattere “/”), quelli relativi (→ collegamenti relativi al documento) partono dal primo file per arrivare al secondo ‣ I percorsi assoluti non possono essere utilizzati su versioni locali dei siti (quelli presenti sul computer), ma solo sui siti remoti
del sito con Dreamweaver & Fireworks CS6 Percorsi assoluti e percorsi relativi 7 Root File1 File2 Cartella1 File3 File4 Percorsi assoluti di File1: /File1 e File4: /Cartella1/File4 Percorsi relativi da File1 a File4: Cartella1/File4 da File4 a File1: ../File1
del sito con Dreamweaver & Fireworks CS6 Impostazione del sito 8 Con la maschera attivata, i documenti con queste estensioni saranno ignorati nelle operazioni di upload e sincronizzazione
del sito con Dreamweaver & Fireworks CS6 Impostazione del sito 9 Note condivisibili con altri sviluppatori (che usino DW) Impostazioni del pannello “file” Integrazione con Contribute, software per l’editing dei contenuti delle pagine web Opzioni per la gestione dei modelli DW Opzioni per Spry, libreria JavaScript di Adobe Opzioni per l’integrazione nel sito di webfonts
del sito con Dreamweaver & Fireworks CS6 Impostazione del sito 10 ‣ Dopo la registrazione, il sito appare nel pannello “file” ‣ È possibile modificare le impostazioni riaprendo il panello di impostazione del sito in uno di questi modi: ‣ Dal Menu Sito → Gestisci siti... ‣ Dal menu di selezione dei siti nel pannello “File” → Gestisci siti... ‣ Con un doppio clic sul nome del sito nel menu di selezione dei siti nel panello “File” (in questo caso si salta il pannello “Gestisci siti” e si va direttamente al pannello di impostazione del sito)
del sito con Dreamweaver & Fireworks CS6 Il pannello “Gestisci siti” 11 Elimina il sito selezionato Duplica il sito selezionato Modifica il sito selezionato Esporta un file “.ste” con le impostazioni del sito selezionato Importa un file “.ste” Crea un nuovo sito I siti Business Catalyst sono gestiti da un sistema online, in modo analogo ad un CMS
del sito con Dreamweaver & Fireworks CS6 L’area di lavoro di Dreamweaver CS6 12 Pannello Inserisci Pannello Proprietà Pannello Stili CSS Pannello Sito Vista codice Vista progettazione Pannello stile rendering Pannello codifica
del sito con Dreamweaver & Fireworks CS6 Creazione del documento 13 ‣ Per la creazione della pagina HTML della nostra esercitazione è necessario: ‣ Creare un nuovo documento HTML5 ‣ Scaricare e collegare il framework CSS Skeleton ‣ Costruire la struttura HTML ‣ Creare il foglio stile CSS ‣ Inserire contenuto e immagini
del sito con Dreamweaver & Fireworks CS6 Registrazione del documento 16 ‣ Salvare subito il nuovo documento nella root del sito appena creato con il nome “index.html” ‣ Il nome “index” è quello utilizzato di default da tutti i server web come nome file da richiamare quando l’url richiesto non lo specifica (es. www.miosito.it = www.miosito.it/index.html) ‣ L’estensione indica che il file è un documento HTML ‣ Nel pannello del sito, utilizzando il tasto destro del mouse creare le directory in cui andremo a posizionare i vari file ‣ Nella cartella CSS copiare il file skeleton.css ‣ da www.getskeleton.com ‣ NB: versione a 12 colonne scaricabile all’indirizzo https://github.com/offshoot/Skeleton
del sito con Dreamweaver & Fireworks CS6 Cartelle mascherate ‣ Oltre ai file “mascherati” già visti nelle impostazioni del sito, è possibile mascherare un’intera cartella in modo che non sia utilizzata nelle operazione di upload e sincronizzazione ‣ Utilizzare una cartella mascherata è utile per tenere insieme documenti legati al sito senza mescolarli insieme agli altri ‣ Per mascherare una cartella, selezionarla nel pannello sito → Maschera file → Applica maschera file 17
del sito con Dreamweaver & Fireworks CS6 Collegamento a Google Fonts 21 Selezionare il charset Copiare il codice e incollarlo nella parte head del documento creato Prendere nota della regola CSS da usare nel nostro foglio stile
del sito con Dreamweaver & Fireworks CS6 Creazione della struttura 22 ‣ Per prima cosa è necessario creare un elemento <div> che conterrà la struttura skeleton Metodo 1: Dal pannello “Inserisci” → “Comuni” selezionare “Inserisci Tag Div” Nel pannello, selezionare la classe “container” (presente nel file skeleton.css) e premere OK
del sito con Dreamweaver & Fireworks CS6 Inserimento del div.container 23 Dreamweaver crea il codice HTML e mostra il risultato nella finestra Progettazione
del sito con Dreamweaver & Fireworks CS6 Metodo alternativo 24 In vista codice cominciare a scrivere il tag. Dreamweaver mostra un menu di autocompletamento Continuando a scrivere, verranno mostrati sempre menu di suggerimento contestuali alla parte che si sta scrivendo, in modo di rendere più veloci e senza errori la scrittura Continuare fino a completare il tag
del sito con Dreamweaver & Fireworks CS6 Creazione della struttura 26 Con la stessa metodologia continuare ad inserire il codice per la parte superiore del documento e per il menu utilizzando i tag appropriati
del sito con Dreamweaver & Fireworks CS6 Creazione della struttura 27 ‣ Utilizzare il tag header per l’intestazione della pagina, al suo interno creare due div per logo e tag-line ‣ Utilizzare un tag aside o div per l’immagine di testata ‣ Utilizzare un tag nav per il menu ‣ Il menu vero e proprio va costruito con una lista non ordinata ‣ I link alle pagine interne possono essere temporaneamente indicati con “#” ‣ Per indicazioni più dettagliate sulla semantica dei tag da utilizzare, consultare i testi in bibliografia ‣ In particolare “HTML 5 for Web Designers” di Jeremy Keith (http://www.abookapart.com/ products/html5-for-web-designers)
del sito con Dreamweaver & Fireworks CS6 Creazione dei link ‣ I link delle voci di menu (e in generale tutti i link), possono essere creati utilizzando il pannello proprietà 28 In vista progettazione, selezionare le parole a cui associare il link e quindi scrivere il collegamento nello spazio apposito (o selezionarlo dal disco tramite l’icona della cartella) È anche possibile selezionare un documento dal pannello file trascinando il mirino sul file desiderato
del sito con Dreamweaver & Fireworks CS6 Assegnazione delle classi skeleton ‣ Prima di proseguire con la creazione della struttura, è bene cominciare ad assegnare le classi del Framework Skeleton che ci permetteranno di ricostruire la struttura a griglia ‣ Skeleton utilizza classi con nomi molto semplici che corrispondono al loro significato ‣ Ad esempio un box che si espande su tre colonne avrà le classi “three” e “columns” 29
del sito con Dreamweaver & Fireworks CS6 Skeleton 30 ‣ Le classi di Skeleton: ‣ Con il framework della versione a 12 colonne è necessario aggiungere al container la classe container-twelve per utilizzare la formattazione a 12 colonne (container-sixteen per quella a 16, entrambi si esapndono per una larghezza di 960px) ‣ one, two, three... + columns (o column, al singolare) creano un box che si espande per il numero di colonne indicato ‣ Nel caso di box nidificati, aggiungere la classe alpha al primo box e omega all’ultimo ‣ È possibile creare una riga che si interrompa prima della dodicesima colonna aggiungendo la classe clearfix (in sostanza forza la struttura ad andare “a capo”) ‣ Lo stesso effetto si ottiene aggiunge un div intermedio con classe row, o inserendo, dopo i box nidificati, un elemento con classe clear ‣ Infine è possibile spostare un elemento verso destra con la classe offset-by-xxx, dove xxx indica il numero di colonne (es.: offset-by-two sposta l’elemendo a destra di due colonne) ‣ In realtà l’elemento non viene spostato, ma viene aggiunto un padding (= margine interno) a sinistra pari all’ampiezza delle colonne
del sito con Dreamweaver & Fireworks CS6 Il codice con le classi skeleton 32 ‣ Aggiungendo le classi skeleton, la pagina comincia a disporsi secondo la griglia, tranne il menu che avrà bisogno di regole css specifiche che vedremo più avanti
del sito con Dreamweaver & Fireworks CS6 Le immagini ‣ Le immagini sono già presenti nel nostro layout Fireworks, ma vanno esportate singolarmente nel formato più adatto ‣ Per il web si utilizzano normalmente tre formati di immagine: gif, png e jpeg ‣ Google ha proposto da poco un nuovo formato, il webP (si pronuncia weppy), attualmente supportato solo da Chrome e Opera 35
del sito con Dreamweaver & Fireworks CS6 Il formato GIF ‣ il GIF (Graphics Interchange Format) è un formato abbastanza datato destinato a cadere in disuso ma ancora presente nel web. ‣ È stato per molto tempo utilizzatissimo anche grazie al fatto che riesce a comprimere le immagini senza perdita di dati (lossless) ‣ Adatto per immagini a tinte piatte, è un formato a colori indicizzati (i colori utilizzati nel file sono definiti in una palette specifica del file). ‣ Uno dei colori può essere definito come trasparente ‣ La trasparenza dei gif non è comunque paragonabile a quelle di un immagine con un canale alfa (non sono possibili trasparenze intermedie, sono possibili potenziali problemi di aliasing) ‣ Esiste una versione del formato gif (gif89a) in grado di gestire immagini animate 36
del sito con Dreamweaver & Fireworks CS6 Trasparenza indice e trasparenza alpha 37 Immagine originale in Fireworks GIF (Il colore trasparente è il bianco) PNG 8bit PNG 32bit le stesse immagini su fondo colorato I pixel bianchi derivano dall’opzione di anti-aliasing impostata
del sito con Dreamweaver & Fireworks CS6 Il formato PNG ‣ Come il gif, anche il PNG (Portable Network Graphics) è un formato lossless particolarmente adatto (ed efficiente) con immagini a tinte piatte ‣ È in grado di gestire anche immagini di tipo fotografico, ma in questo caso è molto meno efficiente del formato jpeg ‣ Si è diffuso in seguito alla decisione (più tardi revocata) da parte dei detentori del brevetto del formato gif di richiedere il pagamento di royalties per il suo utilizzo ‣ Una delle caratteristiche più importanti del formato png è la possibilità di gestire canali alfa per la trasparenza ‣ In base al numero di colori utilizzato, il png può avere una palette a 8, 24 o 32 bit (la palette a 24 bit non ha canale alfa) ‣ Esiste una variante del png per le immagini animate (MNG, Multiple-image Network Graphics) che però non ha mai avuto grande diffusione ed è scarsamente supportata 38
del sito con Dreamweaver & Fireworks CS6 Il formato JPEG ‣ Il JPEG (Joint Photographic Experts Group) è uno standard ISO definito adatto alla registrazione di immagini di tipo fotografico ‣ Utilizza un sistema di compressione che può essere sia lossless che lossy (a perdita di dati): qualità dell’immagine finale e spazio occupato su disco sono quindi inversamente proporzionali ‣ Il formato JPEG non supporta canali alfa 39
del sito con Dreamweaver & Fireworks CS6 Esportazione delle immagini dal prototipo 41 ‣ Per esportare le immagini dal prototipo in Fireworks possiamo scegliere tra diverse opzioni ‣ La scelta dipende da diversi fattori: formati delle immagini da ottenere, complessità del layout e, non ultimo, preferenze personali ‣ La prima opzione consiste nel copiare e incollare le singole parti del prototipo su nuovi documenti, salvando poi ogni singolo file indipendentemente dagli altri ‣ La seconda consiste nell’utilizzare la funzione Fireworks “Livelli su file” ‣ La terza si basa sull’utilizzo dello strumento “Porzioni” ‣ La quarta, da utilizzare solo in casi particolari, consiste nella tecnica dei CSS sprites
del sito con Dreamweaver & Fireworks CS6 Esportazione singole immagini ‣ È l’opzione più semplice: si copia l’immagine interessata, si crea un nuovo documento (Fireworks propone automaticamente le dimensioni corrispondenti all’area copiata) e quindi si salva nella cartella immagini del sito 42
del sito con Dreamweaver & Fireworks CS6 Esportazione singole immagini 43 Salvare il nuovo file come documento Fireworks (estensione .fw.png) nella cartella immagini del sito
del sito con Dreamweaver & Fireworks CS6 Esportazione dell’immagine ottimizzata 44 ‣ Tramite il pannello “Ottimizza” scegliere il formato e le opzioni più adatte all’immagine, scegliere quindi File → Esporta per salvare l’immagine ottimizzata ‣ Salvare l’immagine ottimizzata nella stessa cartella dell’immagine originale
del sito con Dreamweaver & Fireworks CS6 Esportazione da livelli Fireworks ‣ Quest’opzione permette di produrre più immagini partendo da un’unico file Fireworks ‣ È necessario predisporre il file FW in modo che ogni livello (principale) corrisponda ad’immagine. Il nome del livello sarà il nome del file ‣ La limitazione principale è che tutte le immagini prodotte saranno ottimizzate secondo i parametri decisi per il file FW. Non è possibile avere ottimizzazioni specifiche per ogni livello 45
del sito con Dreamweaver & Fireworks CS6 Esportazione da livelli Fireworks 46 Creare i singoli livelli per l’immagini. Selezionarle una per una e trascinarle nel relativo livello
del sito con Dreamweaver & Fireworks CS6 Esportazione da livelli Fireworks 47 Terminata l’operazione, disabilitare la visualizzazione dei livelli che non devono essere esportati e impostare l’ottimizzazione per quelli da esportare
del sito con Dreamweaver & Fireworks CS6 Esportazione da livelli Fireworks 48 Esportare le immagini scegliendo l’opzione “Livelli su file” e assicurandosi che “Taglia immagini” sia selezionato. Salvare i file nella cartella “immagini” del sito
del sito con Dreamweaver & Fireworks CS6 Lo strumento Porzioni ‣ Lo strumento “Porzioni”, analogo a quello esistente in Photoshop o Illustrator, permette di evidenziare parti del documento Fireworks che saranno poi esportate come singole immagini ‣ Per ogni porzione è possibile specificare un nome e un tipo di ottimizzazione 49
del sito con Dreamweaver & Fireworks CS6 Lo strumento Porzioni 50 Selezionare lo strumento “Porzioni” e assicurarsi che l’opzione sottostante “Mostra porzioni e punti attivi” sia attivata Usando lo strumento, evidenziare le porzioni di immagine che si desidera esportare
del sito con Dreamweaver & Fireworks CS6 Lo strumento Porzioni 51 Selezionando ogni porzione, specificare il nome da assegnare all’immagine, avendo cura di indicare come tipo “Immagine di primo piano”. Impostare inoltre i parametri di ottimizzazione desiderati Utilizzare infine il comando “Esporta” per salvare le singole immagini
del sito con Dreamweaver & Fireworks CS6 CSS sprites ‣ La tecnica dei CSS sprites va utilizzata con immagini utilizzate come background in un file css ‣ È normalmente utilizzata per gestire icone, o elementi che non hanno specifico valore semantico nel documento e che quindi non hanno necessità di un markup strutturale ‣ Con la diffusione dei browser moderni, questa tecnica può essere rimpiazzata dall’uso di webfonts al posto delle immagini per le icone 52
del sito con Dreamweaver & Fireworks CS6 CSS sprites ‣ Il beneficio fondamentale che si ha usando questa tecnica è quello di ridurre le richieste al server ‣ Ogni immagine presente in una pagina web necessita infatti di una specifica richiesta al server ‣ Più alto è il numero di richieste, più lento sarà il caricamento della pagina ‣ La tecnica dei css sprites consiste nell’accorpare più immagini in un singolo file in modo di ridurre le richieste ‣ Il file sarà ovviamente più pesante, ma il suo peso è generalmente inferiore alla somma dei singoli documenti e naturalemente avremo il beneficio di avere una singola richiesta ‣ La tecnica ha senso naturalmente solo con file di piccole dimensioni 53 Le richieste al server di una pagina contenente molte immagini (Google ricerca immagini)
del sito con Dreamweaver & Fireworks CS6 CSS sprites 54 Creare un nuovo documento Fireworks e disegnare o importare le varie icone Creare le porzioni per ogni icona assegnando ad ognuna il nome desiderato (sarà il nome della classe css). Non impostare ottimizzazioni specifiche Impostare l’ottimizzazione desiderata. La procedura di esportazione utilizza le impostazioni predefinite, quindi se quella impostata non è in elenco occorre salvarla
del sito con Dreamweaver & Fireworks CS6 CSS sprites 55 Dal comando esporta, scegliere l’opzione “Sprite CSS”. Impostare le opzioni per i file immagine e css generati Generalmente si imposta il selettore di classe, assegnando, se desiderato, un prefisso o suffisso per le classi. “Riempimento” indica un’eventuale spaziatura extra tra icona e icona. “Layout” specifica come disporre le icone nel file generato. Con l’ultima opzione si sceglie l’ottimizzazione predefinita
del sito con Dreamweaver & Fireworks CS6 CSS sprites: i file generati 56 .sprites{7background:url("sprites.png")7top7left7no@repeat;7} .icona@stella{7width:19px;7height:21px;7background@position:@10px7@10px;7} .icona@freccia{7width:20px;7height:21px;7background@position:@10px7@41px;7} .icona@quadrato{7width:20px;7height:21px;7background@position:@10px7@72px;7} .icona@pentagono{7width:20px;7height:21px;7background@position:@10px7@103px;7} .icona@cerchio{7width:20px;7height:21px;7background@position:@10px7@134px;7} immagine css I file vanno posizionati nel sito facendo attenzione al percorso del file di background che deve rimanere sempre raggiungibile correttamente dal css. Se necessario, possono essere aggiunte altre regole al css.
del sito con Dreamweaver & Fireworks CS6 Inserimento delle immagini nel file HTML ‣ Le immagine preparate possono ora essere collegate al documento HTML, tramite il tag IMG 58 L’immagine può essere inserita utilizzando lo strumento apposito della barra “Inserisci” Dopo aver selezionato il file, viene richiesto l’inserimento di un testo alternativo, utile nei casi in cui l’immagine non venga visualizzata. La visualizzazione di questo pannello dipende da quanto impostato in Preferenze → Accessibilità
del sito con Dreamweaver & Fireworks CS6 Inserimento delle immagini nel file HTML 59 Il tag IMG inserito Le piccole immagini di ogni articolo sono contenute in tag div con classe image_container (il tag div ci permetterà di controllare con maggiore precisione eventuali immagini di dimensioni inferiori o superiori). In HTML5 esiste un tag apposito da utilizzare come “contenitore” delle immagini, il tag figure. Possiamo quindi cambiare i tag div in figure (eliminando la classe) e inserire le immagini.
del sito con Dreamweaver & Fireworks CS6 Anteprima nel browser 61 È bene tenere sempre sotto controllo l’esito nel browser. Possiamo utilizzare il comando di visualizzazione dell’anteprima nel browser
del sito con Dreamweaver & Fireworks CS6 Anteprima nel browser 62 In Firefox, si nota subito una differenza rispetto a DW: le immagini piccole appaiono spostate verso destra
del sito con Dreamweaver & Fireworks CS6 Verifica del codice nel browser 63 Avendo preventivamente installato l’estensione Firebug per Firefox (www.getfirebug.com), fare clic con il tasto destro su una delle immagini e scegliere “Controlla elemento con Firebug” In Chrome, il comando da utilizzare è “Ispeziona elemento”, senza necessità di installare plugin
del sito con Dreamweaver & Fireworks CS6 Verifica del codice nel browser 64 Il tag IMG selezionato non ha nessuna impostazione di stile, il problema deve essere quindi relativo ad un suo elemento genitore
del sito con Dreamweaver & Fireworks CS6 Verifica del codice nel browser 65 Spostando il cursore sul tag figure, scopriamo che esiste un’impostazione di margine, dovuta ai valori di default del browser
del sito con Dreamweaver & Fireworks CS6 Verifica del codice nel browser 66 Effettuiamo un’altra verifica installando il bookmark che visualizza la griglia nella nostra pagina (http://javascriptgrid.org/ → griglia 960.gs a 12 colonne) Trascinare nella barra dei segnalibri
del sito con Dreamweaver & Fireworks CS6 Correzione degli errori 68 ‣ Per il default del tag figure è necessario applicare un reset che ripulisca tutte le impostazioni di base del browser ‣ Per il problema della tagline è necessario effettuare una correzione sul framework css ‣ La versione a 12 colonne di skeleton è una versione non ufficiale e non curata come quella originale ‣ In linea di massima, errori di questo genere dovrebbero invitare ad abbandonare il framework, ma in questo caso, la semplicità delle regole css utilizzate permettono di decidere diversamente
del sito con Dreamweaver & Fireworks CS6 Applicare un reset ‣ Con CSS reset si intende genericamente un breve insieme di regole volte ad azzerare eventuali impostazioni di default del browser ‣ In rete se ne trovano moltissimi (vedi → www.cssreset.com); nel nostro caso utilizziamo la versione per HTML5 di Eric Meyer (meyerweb.com/eric/tools/css/reset) ‣ Le operazione da fare sono quindi: ‣ Recuperare il codice del reset ‣ Creare un nuovo documento CSS (esercitazione.css) e collegarlo alla nostra pagina: ‣ File → Nuovo ‣ Pagina Vuota → CSS ‣ Incollare all’inizio del documento il codice del reset ‣ Salvare il nuovo file bella cartella css ‣ Collegare il file css al documento html 69
del sito con Dreamweaver & Fireworks CS6 Correzione del css skeleton 71 ‣ Nel framework originale a 16 colonne, l’effetto di offset viene creato aggiungendo un padding (margine interno) pari al numero di colonne da “saltare” ‣ Nella versione a 12 colonne viene invece usata la regola margin che in teoria avrebbe lo stesso effetto, ma che in pratica sovrascrive altri margini utilizzati da altre classi nel file css ‣ È quindi necessario sostituire tutti i “margin” nelle classi offset con “padding” ‣ Creare una copia del file skeleton chiamata skeleton_fixed.css ‣ Effettuare la correzione ‣ Aggiornare il collegamento nel file HTML
del sito con Dreamweaver & Fireworks CS6 Il CSS 73 ‣ Completato il markup della pagina, possiamo cominciare ad elaborare il css ‣ Utilizzeremo il file elaborazione.css nel quale abbiamo già copiato il reset ‣ il primo step è stabilire dimensioni e font della radice della pagina: html,&body&{ & background3color:&#fff; & color:� & font3family:&Cambria,&Georgia,&"Times&New&Roman",&Times,&serif; & font3size:&14px; & font3style:&normal; & line3height:&18px; & font3weight:&normal; }
del sito con Dreamweaver & Fireworks CS6 Il CSS ‣ Queste regole hanno stabilito il punto di partenza del mio foglio stile, da adesso in poi è necessario far attenzione a usare il meno possibile unità di misura assolute ma solo relative, in modo di poter legare ogni regola con la precedente ‣ Possiamo continuare a scrivere le regole del foglio stile basandoci sulle specifiche del prototipo ‣ È importante non lavorare sulle larghezze dove queste siano già gestite dalle classi Skeleton, altrimenti le regole si sommerebbero alterando la struttura 74
del sito con Dreamweaver & Fireworks CS6 Il pannello CSS 76 Riepilogo della cascata delle proprietà per il testo selezionato Riepilogo della cascata delle regole per il testo selezionato Proprietà della regola selezionata Modalità di visualizzazione delle proprietà Mostra tutte le regole della cascata o info su quella selezionata Collega file css Nuova regola Modifica, disattiva, elimina regola Mostra tutte le regole del foglio stile o solo quella corrente
del sito con Dreamweaver & Fireworks CS6 Creare una nuova regola css per la tagline 77 Selezionare un punto qualsiasi del testo e fare clic su nuovo regola CSS (in basso a destra del pannello CSS) Scegliere il foglio su cui scrivere la regola DW propone il percorso DOM per l’elemento selezionato. Non avendo problemi di specificità (stiamo agendo su un ID) possiamo ridurre i selettori fino a lasciare solo #tagline
del sito con Dreamweaver & Fireworks CS6 Creare una nuova regola css per la tagline 79 Dopo la conferma, le regole css verranno scritte nel foglio stile indicato.
del sito con Dreamweaver & Fireworks CS6 Conversione in em 80 ‣ Le regole scritte hanno però unità di misure assolute (px), mentre è utile averle in unità relative, come gli em ‣ Le unità di misure relative sono basate sul genitore dell’elemento ‣ L’elemento genitore che ha un dimensione utilizzabile è il tag <body> ‣ Per calcolare la dimensione da px a em si usa una semplice formula: dimensione in px / dimensione del genitore in px ‣ Nel nostro caso: 16px / 18px = 1.143em ‣ Per l’altezza dobbiamo basarci sull’elemento stesso, quindi il riferimento non è più 14px ma 16: 54px / 16px = 3.375em ‣ Con lo stesso metodo è possibile completare tutto il foglio stile Le regole della tagline in em Per la conversione esiste un comodo tool online: http://pxtoem.com
del sito con Dreamweaver & Fireworks CS6 Conversione in em 81 Facendo clic con il tasto destro sulla tagline → “Controlla elemento con Firebug” (o “Ispeziona elemento” su Chrome), possiamo verificare come le dimensioni elaborate dal browser corrispondano esattamente alle dimensioni in pixel del prototipo
del sito con Dreamweaver & Fireworks CS6 Controllo dell’interlinea ‣ Come per la griglia verticale, esiste un bookmarklet per verificare l’interlinea: baseliner (http://keyes.ie/things/baseliner/) ‣ Anche in questo caso per l’installazione è sufficiente trascinare il link nella barra dei segnalibri 82
del sito con Dreamweaver & Fireworks CS6 Titolo e testata ‣ La testata non pone particolari problemi, salvo la presenza del titolo sovrapposto all’immagine ‣ Abbiamo due possibilità: ‣ Inserire l’immagine come background e gestire il titolo senza particolari esigenze. L’utilizzo dell’immagine come background potrebbe comportare limitazioni per quanto riguarda l’ottimizzazione per i motori di ricerca o complicazioni per slide-show o simili ‣ Utilizzare il posizionamento assoluto del titolo ‣ Non viene presa in considerazione l’ipotesi di inserire il titolo direttamente nell’immagine 84 WHVWDWDVOLGHVKRZ
del sito con Dreamweaver & Fireworks CS6 La proprietà position ‣ La proprietà position stabilisce come un elemento venga posizionato nella pagina web ‣ Il valore di default è static: l’elemento segue il normale flusso della pagina ‣ Il valore fixed blocca l’elemento relativamente alla finestra del browser secondo il valore delle proprietà top / bottom e left / right ‣ top indica la distanza dall’alto ‣ bottom la distanza dal basso ‣ left la distanza da sinistra ‣ right la distanza da destra ‣ Con position relative, un elemento può essere spostato in modo relativo alla sua posizione originale, secondo il valore delle proprietà top / bottom e left / right. L’elemento continuerà però a occupare lo spazio originale nel flusso del documento. ‣ Gli elementi con position absolute sono posizionati al di fuori del normale flusso del documento, secondo i soliti parametri top, bottom, left e right, all’interno del più vicino elemento genitore con posizionamento assoluto o relativo ‣ Se dopo il posizionamento, due elementi risultano sovrapposti, quello che appare per ultimo nel markup verrà posizionato sopra l’altro ‣ La sovrapposizione può essere però regolata dalla proprietà z-index: valori più alti (non è necessaria unità di misura) corrispondono a livelli più alti 85
del sito con Dreamweaver & Fireworks CS6 CSS per testata e titolo 86 Alcune regole css possono essere recuperate direttamente da Fireworks grazie al pannello “Proprietà CSS”
del sito con Dreamweaver & Fireworks CS6 CSS per testata e titolo 87 In Dreamweaver, gli elementi con posizionamento assoluto, possono essere trascinati e posizionati con il mouse Il css di titolo e testata. Notare che alcune regole (come text- shadow) non vengono visualizzate in DW.
del sito con Dreamweaver & Fireworks CS6 Il menu ‣ Il menu non presenta particolari problemi (salvo eventuali considerazioni legate al design responsivo non trattate in questa esercitazione) ‣ Il markup utilizzato è una lista non ordinata (ul), che di default ha un andamento verticale 88 WHVWDWDVOLGHVKRZ
del sito con Dreamweaver & Fireworks CS6 Le proprietà display e float ‣ Un tag viene rappresentato nella pagina web in base alla proprietà display (list-item nel caso delle liste) ‣ Per il menu è necessario assegnare agli elementi di lista la proprietà display block: in questo modo potranno essere assegnate dimensioni alle voci di menu ‣ In questo modo però i blocchi si dispongono verticalmente: con la proprietà float: left è possibile allinearli orizzontalmente 89
mcassandro
hjmkth
hrtnde
hinofu
videlvequio
sugiyama_sukedachi
uhooi
takaikanako
okazakityo
tsuyoshika
root_recruit
otanet
hursman
holman
malarkey
csswizardry
tenderlove
jnunemaker
sferik
philnash
lynnandtonic
mongodb
shpigford
jakevdp
