�ݺ�ߣ

Modifiche dentro DW
(e qualche ritorno su ID)

 Altra overview di DW
 modifiche:CSS
 modifiche: audio/video
 modifiche: font embeddati

Aggiungere nuovo browser
 andare su Preferenze->Anteprima nei browser

Prima di iniziare
 come fatto con InDesign, per ragioni di brevità nelle
slide Dreamweaver verrà abbreviato in DW
 Non ci sono nuove nozioni di base, si prendono come
riferimento le nozioni apprese nella prima parte del
corso
 background-color
 color
 display
 uso del tag <span>

All’interno del Manifest, ritroviamo i tag
che gestiscono i metadati, quelli che avevamo
impostato nel pannello “Info File” in InDesign

La Spine contiene la struttura del file.
Ritroviamo i documenti che compongono il nostro libro
La Guide serve a iBooks per gestire la semantica del libro
- indicare quale copertina deve essere visualizzata all’interno di iBooks
- la Tabella dei Contenuti che abbiamo sviluppato con ID

Dalla voce di menù modifica (o con il comando veloce CMD+F per Mac e
CRTL+F per Windows) troviamo la finestra “Trova e Sostituisci”, dove
possiamo cercare specifiche porzioni di testo per sostituirlo con altro
• utilizzabili anche le espressioni regolari per cercare particolari
stringhe di testo

stessa cosa si può ritrovare in qualsiasi altro editor appena visti, come
Textwrangler

i link vengono gestiti come fossero contenuti dentro un sito web.
In questo caso si distingue tra:
- link assoluti, quelli che puntano in un altro sito
<a href=“http://www.labnova.it”>ulteriori info</a>
- link relativi, quelli che puntano in un altro punto del testo
- <a href=“ferrara.xhtml”>altra città</a>

Modifiche: CSS
 doppia modalità di visualizzazione anche per i CSS

CSS Designer
 4 pannelli:
 Origini, per aggiungere e
vedere i file CSS
 @Oggetto
multimediale, per
eventuali media queries
 Selettori, per
selezionare i selettori
CSS desiderati
 Proprietà, per
aggiungere, modificare,
togliere proprietà CSS

 aggiungere nuovo
file
 selezionare il
percorso

 possibilità di andare direttamente sul selettore css
all’interno del foglio di stile che abbiamo appena
collegato

CSS Designer:selettori
 quando selezioniamo un foglio di stile nel pannello
Origini, spuntano tutti i selettori contenuti al suo interno
 si può aggiungere, togliere, cercare un determinato
selettore

CSS Designer:primo esempio
 CSS Designer Proprietà + modalità “Dividi”

ePub Zen Garden
su ePub Zen Garden si trovano varie fonti di ispirazione per strutturare un
particolare stile CSS

ePub Zen Garden
andando a vedere con il browser il codice sorgente, possiamo risalire allo
stile CSS utilizzato

ePub Zen Garden
ricopiamolo il codice sul foglio di stile (creato in maniera automatico da ID)
e salviamo

In alternativa, possiamo salvare il nostro CSS in un file a parte (esempio
AltroStile.css)

PRIMO STEP
 Studio dell’interfaccia
 Importare la cartella OeBPS
 Possibili collegamenti ai fogli di stile
 Utilizzare il pannello “Origini” del CSS Designer
 Utilizzo del pannello proprietà
 Cambiare lo stile di font allo stile di paragrafo “Sezione”

Gli stili vengono generati in maniera
automatica da ID.
L’indentazione del codice è automatica.
I colori del codice rappresentano
le parti del CSS che vengono visualizzate
In maniera predefinita:
- fucsia per le classi
- blu scuro per le proprietà
- blu elettrico per i valori
- verde per le stringhe comprese
tra caratteri

colore del testo
stile del testo
margine del testo
settaggi per il flusso testuale
settaggi generali per il testo
numero minimo di vedove che possono essere presenti

Proprietà CSS speciali
 page-break-before
 page-break-inside
 page-break-after
 orphans
 widows
disciplinano la struttura del testo
regolano quante righe devono apparire
all’inizio e alla fine della pagina

Proprietà CSS speciali
 le aggiungiamo anche dal pannello proprietà,
selezionando la voce “+” e scrivendo la proprietà voluta

CSS Designer:secondo
esempio
 CSS Designer Selettori+ modalità “Codice”

con la doppia modalità di visualizzazione, si tengono sotto traccia
tutte le modifiche che stiamo apportando al testo

la doppia visualizzazione può essere impostata mentre si
compiono modifiche sul CSS

Nell’esempio si modificano due proprietà:
• text-indent per modificare l’indentazione del testo
• font-size per modificare la grandezza del font

Elementi Float
Si vuole rendere Float(=fluttuante) un elemento

vediamo la stessa struttura appena vista su ID all’interno di DW,
utilizzando la doppia visualizzazione

aggiungiamo la proprietà Float:left;

Problemi: il testo è troppo attaccato al bordo dell’immagine

aggiungere la proprietà margin-right (nell’esempio sono solo 5px,
ma possiamo aggiungere di più...)

risultato finale su Adobe Digital Editions
procedura fattibile anche con le versioni CS6, CS5.5 etc.

combo ID+DW
aggiungere una nuova casella di testo, ancorarla all’ultimo paragrafo.
Cliccare con il tasto destro e selezionare la voce “Testo”

personalizzare ulteriormente lo stile con il pannello “Stile Oggetto”

aggiungere le seguenti proprietà
• border-style
• position:
• margin-left:
• margin-right:
• margin-top:
• margin-bottom:

Adobe Kuler
 https://kuler.adobe.com
 permette ulteriori combinazioni di colore

Ulteriori esempi
 aggiungere la proprietà background-color a body

 sistemare nel dettaglio il padding e il margin-left

 aggiungere text-decoration al selettore sezione

 controllare altre modifiche?

SECONDO STEP
 prima modifica: rendere float un'immagine
 utilizzare “float:left;”

SECONDO STEP
 seconda modifica: aggiungere uno stile personalizzato
ad un'immagine

SECONDO STEP
 terza modifica: modifica dello stile CSS dello stile di
paragrafo "TITOLO"

Modifiche:audio/video
 Vediamo due procedure
 Inseriamo un file audio direttamente su DW
 Inseriamo un file video su ID

Inserire elemento audio
• inserire un nuovo elemento nella cartella OEBPS
• aggiornare il manifest con un nuovo elemento <item>
• inserire il corrispettivo tag HTML5 dell’elemento audio (l’omonimo <audio>)

Inserire video da ID
 Utilizzare il pannello “File multimediali”

 Possibilità di scegliere la modalità di riproduzione
 vedere anche l’anteprima del file in questione
 Possibilità di inserire un’immagine (scegliendo tra i vari
fotogrammi)
utili per altri
formati, come
.swf

 inserire video da URL
 evitabile, a meno che non diamo per certo la possibilità di
collegamento del lettore
 nell’esempio, non posso inserire il file con protocollo
https://

 ricordarsi l’esportazione in ePub 3.0
 risultato finale standard

Problemi file multimediali
 a volte vi è una cattiva esportazione, oppure i nuovi
aggiornamenti degli standard non fanno più funzionare
le vecchie procedure
<audio src=/slideshow/4-dw-parte2modifiche/44266595/“../Audio/file.mp3” type=“audio/mpeg”>
 il modo migliore è assicurarsi che la dichiarazione
effettiva del file multimediale sia
<audio type=“audio/mpeg”>
<source id=“sorgente”
src=/slideshow/4-dw-parte2modifiche/44266595/“../Audio/file.mp3”>
</source>
</audio>
assicurarsi di avere
il tag <source>

 lato codice

 Lato progettazione (con pulsante “dal vivo”)
se la modalità “progettazione”
non fa andare la visualizzazione, premere sempre tasto “dal vivo”

TERZO STEP
 aggiungere un elemento video dentro InDesign
 aggiungere un elemento video dentro Dreamweaver
 EXTRA: aggiungere uno stile CSS personalizzato
all’elemento video

Aggiungere un nuovo font
 acquistare e scaricare un nuovo font
 scaricarlo anche gratis, con il consenso del creatore

Selezioniamo il nuovo font agendo sul pannello Stili paragrafo

controlliamo se la voce “Includi font da incorporare” sia attiva

Alternativa su DW
• dichiarare il nuovo font come nuovo <item> nel Manifest
• scrivere una regola @font-face dove si specifica il nome del nuovo font
e il percorso dove trovarlo (in questo caso nella cartella Font)

aggiungere il nuovo font nello stile di paragrafo in cui lo vogliamo applicare

esempio font gratis: Anke
 font reso disponibile dal suo stesso creatore
 ankesans.com

Utilizzo pannello Proprietà
 Dopo averlo installato, sul pannello Proprietà andare a
prendere il font in questione

utilizzo pannello Proprietà
 la proprietà font-family:Anke viene subito assegnata

 creata nuova cartella “webfonts”, con uno stile apposito
 creato il file apposito .xml
com.apple.ibooks.display-option.xml

Se dovesse dar problemi sul
tablet....
 impostare questa configurazione: mettere la cartella
webfonts dentro l’OeBPS principale
 modificando anche la directory, nella proprietà src

QUARTO STEP
 Aggiungere un font embeddato con DW
 selezionarlo con il pannello Proprietà
 importarlo con il CSS
 controllare il risultato su Readium

 il file <link> precede la dichiarazione del file
 si comincia ufficialmente con <?xml....

 assicurarsi che sia sempre nella prima riga del file!

 problemi con l’attributo controls del tag <video>
 è dichiarato senza valore, sarebbe corretto cambiato in
controls=“controls”

Validazione!
 due tipi: WARNING
ed ERROR
 di solito, mancano
dei riferimenti nel
manifest
 sono stati cancellati
i file senza
aggiornare il
manifest stesso
 potrebbero dar
problemi in fase di
upload sullo store

Per la prossima volta...
 Provare a inserire un video
 Provare ad aggiungere il seguente stile (con CSS
Designer o meno) al video
 fluttuante a destra
 ricordarsi di aggiungere “clear:both;”
 margine di 30px;
 padding di 10px;
 colore di sfondo arancione
 border-top:dotted red 10px;

�ݺ�ߣ

4 dw parte2-modifiche

Recommended

More Related Content

What's hot (12)

Similar to 4 dw parte2-modifiche (20)

More from Lab Nova (6)

4 dw parte2-modifiche