Manuale di WEBsite by rinvio11

WEB DESIGNER

Manuale in italiano

Copyright Questa documentazione è protetta dalla legge. Tutti i diritti, soprattutto quelli di duplicazione, circolazione e traduzione, sono riservati. Nessuna parte di questa pubblicazione può essere riprodotta in forma di copie, microfilm o altri processi. Essa non può essere trasmessa in un linguaggio utilizzato da macchine, soprattutto macchine di elaborazione dati, senza il consenso scritto dell'editore. Tutti i diritti riservati Tutti gli altri nomi di prodotti sono marchi di fabbrica delle case produttrici corrispondenti. Errori nel cambiamento dei contenuti così come modificazioni del programma, sono riservati. Xara è un marchio registrato di Xara Group Ltd. Xara Group Ltd. è un'azienda affiliata a MAGIX GmbH & Co. KGaA. MAGIX è un marchio registrato di MAGIX GmbH & Co. KGaA. Altri nomi di prodotti menzionati possono essere marchi registrati dei rispettivi produttori. This product uses MAGIX patent pending technology. Copyright © Xara Group Ltd., 1994-2016. Tutti i diritti riservati.

www.magix.com

Indice Copyright

Assistenza

Introduzione Cosa c'Ă¨ di nuovo in MAGIX Web Designer? Web Designer vs Web Designer Premium Garanzia di aggiornamento 365 giorni Domade e risposte sulla Garanzia 365 giorni Cosa rende cosĂŹ particolare Web Designer? Creazione di un sito web in 6 passaggi Aiuto

13 13 16 20 21 22 23 24

Primi passi Layout del programma Oggetti sulla pagina Web Design basato sull'oggetto Il Selector Barra degli strumenti del sito web Creazione di un sito web Visualizzazione in anteprima del tuo sito web Utilizzare, modelli, clipart & widget Colori del sito web Sfondi per siti web La Galleria di design locale Il Catalogo Contenuti Online Foto Text Dimensioni pagina Salvataggio del lavoro. Creazione di un sito web Oggetti stretch Link, Pulsanti & Barre di navigazione Gruppi Strumenti per il disegno Menu con accesso tramite tasto destro Livelli, Mouseover (Rollover) & Pop-up

25 25 28 29 30 32 32 32 34 36 40 41 42 44 48 53 54 55 55 58 60 69 69

4 Animazioni web Creazione di pulsanti, banner e di altre grafiche web Pubblicazione del sito web

75 76 78

Utilizzo dei documenti Avvio di un nuovo documento Apertura di un documento esistente Condivisione di documenti su diversi dispositivi La finestra di MAGIX Web Designer Aprire una seconda finestra Modifica del valore dello zoom Spostamento del documento all'interno della finestra Modifica delle dimensioni pagina Pagine multiple nel documento Salvataggio del documento Cartelle di supporto Chiudere il documento Backup automatico Griglia sullo schermo Righelli QualitĂ di visualizzazione Tasto di limitazione Gallerie Annulla e Ripristina

80 80 80 81 81 86 86 88 89 90 93 94 95 95 98 99 100 101 102 110

Utilizzo degli oggetti Il Selector Spostamento degli oggetti Eliminazione di oggetti dal documento Duplicazione e clonazione Spostamenti di oggetti avanti e indietro Ruotare gli oggetti Scalatura di oggetti (cambio dimensioni) Riflesso di oggetti Estensione e compressione di oggetti Inclinare gli oggetti Allineamento Oggetti guida e linee guida Elenco dei comndi veloci sulla tastiera numerica

111 111 115 118 118 119 120 122 125 125 126 127 131 133

www.magix.com

Copyright Raggruppa oggetti e sciogli gruppi Conflitti nei layout di pagina Gruppi Leggeri Allineamento Copiare stili - incolla attributi Nomina oggetti Oggetti ripetuti Oggetti a piĂ¨ di pagina e oggetti che si allungano insieme alla pagina

133 135 135 137 140 141 142 145

Disegnare una linea o una forma Lo Strumento linea retta & freccia Lo strumento Editor Forme Allungamento della linea Conclusione della linea Aggiunta di un nuovo punto maniglia Selezione di punti maniglia multipli Cancellazione di punti Spostamento dei punti maniglia - Strumento Editor forma Smussatura di una linea Limitazione della linea Modifica delle curve Trasformazione di una linea retta in una curva ( e viceversa) Unione di linee Divisione di una forma Chiusura di una forma Cambia l'ampiezza della linea (spessore)

148 148 150 152 152 152 153 154 154 155 156 156 158 159 159 160 161

Elaborazione Forma Strumenti di disegno forme Cambio la larghezza della linea (spessore) Creazione di rettangoli e quadrati Creazione di cerchi ed ellissi SmartShape Come modificare SmartShape Creazione di poligoni e stelle

162 162 162 163 164 164 165 166

Utilizzo del colore La barra dei colori Applicare i colori di riempimento e linea tramite trascinamento

169 169 171

6 Applicare un colore dello sfondo testo Elaborazione del colore di un oggetto Il Color Editor Colori locali e colori Tema Schemi del tema del colore Modifica dei colori con nome Importazione di colori con nome Sostituzione colori Colori normali, toni, tonalitĂ e colori collegati

173 173 174 176 176 177 178 179 181

Utilizzo del testo Introduzione Terminologia Strumento di testo Il menu Font Simboli Sostituzione font Testo semplice Testo in una colonna Aree di testo Testo lungo una curva Modifica del testo Controllo ortografico Sincronizzazione di Testo utilizzando Soft Groups Tabulatori, margini e rientri linea Oggetti posizionati intorno al testo Grafiche ancorate Grafica incorporata Elenchi puntati e numerati Stili di testo Applicazione degli stili di testo Link di testo Testo all'interno di gruppi per siti web Copia degli stili di testo Copia/incolla testo formattato (RTF) Controllare i font in uso Inserimento caratteri CompatibilitĂ del testo con i browser

183 183 184 184 186 188 190 190 191 192 194 196 198 199 200 204 206 209 210 211 217 219 220 220 221 221 222 222

www.magix.com

Copyright Lo strumento Riempimento Creare un riempimento di colore graduato Tipi di riempimento InfoBar dello strumento di riempimento Riempimenti uniformi Riempimenti lineari Riempimenti circolari Riempimenti ellittici Riempimenti bitmap Riempimenti frattali Gradazioni di colore di vari livelli La Galleria di riempimento

223 223 223 224 226 226 227 228 228 231 232 232

Trasparenza Applicazione della trasparenza piatta Applicare la trasparenza graduata Applicazione della trasparenza a vari oggetti

235 235 235 236

Ombre Lo Strumento ombra Applicazione dell'ombra Modifica del colore dell'ombra o dell'effetto di riempimento Eliminazione di un'ombra Applicazione di un'ombra a vari oggetti Selezione degli oggetti utilizzando lo strumento Ombra Copiare ombre su altri oggetti

237 237 238 240 240 241 241 241

Dialogo delle proprietĂ web Scheda Link Scheda Sito web Scheda Pagina Scheda Immagine Scheda per la pubblicazione ProprietĂ MouseOver Scheda segnaposto

242 243 248 250 252 257 258 258

Responsive web design Riguardo RWD Varianti multiple

262 262 263

8 Creazione di siti web RWD da modelli Creazione di siti web RWD da siti esistenti Condivisione tra varianti. Varianti ed oggetti ripetuti Varianti e barre di navigazione Pubblicazione delle varianti

263 264 265 266 266 266

Sfondi per siti web Modelli di sfondi e ricolorazione Sfondi fissi che non scorrono Utilizzo di foto come sfondo Impostazione della parte superiore della pagina Layer di sfondo pagina e pasteboard Varianti e sfondi Web design adattivo

267 269 269 270 270 271 272

Pubblicazione del sito web Pubblicazione sul sito Xara Online Website M Pubblicazione su un web host alternativo Inserisci il tuo sito web nella galleria utenti Pubblicazion e veloce (solo file modificati)

273 273 275 278 278

Gestione foto 279 Introduzione 279 Oggetti foto 279 Importazione foto 280 Copie memoria zero 282 Galleria Bitmap 283 File JPEG integrati 286 QualitĂ di visualizzazione delle foto 287 Salvataggio ed esportazione delle foto 288 Attributi dell'elaborazione foto 289 Modificare il contorno delle foto 290 Ritaglio foto 291 Colorazione delle foto 291 Modifica delle dimensioni, rotazione e posizionamento di una foto all'interno del suo frame 292 Raddrizzamento dell'orizzonte 294 Visualizzazione di una foto in scala nella sua dimensione integrale 295 Rendere una foto della sua dimensione integrale. 295

www.magix.com

Copyright Ottimizzazione delle foto e delle Bitmap Conversione di oggetti o disegni in bitmap Documenti fotografici Elaborazione di file fotografici

295 299 299 300

Strumento Fotografico Introduzione Utilizzo dello strumento di foto Funzioni fotografiche comuni Strumento di ottimizzazione Strumento ritaglio Note relative al Photo Tool

302 302 303 304 305 308 311

Barre di Navigazione Utilizzo di modelli per barre di navigazione Dialogo delle proprietĂ della barra di navigazione Barra di Navigazione del sito Barre di navigazione con un solo pulsante Pulsanti & menu Aggiornare la navbar su tutte le pagine. Modifiche non possibili sulla tela. Modificare i font sui tasti della navbar Importare & incollare navbar Creazione di Barre di Navigazione personali Margini dei pulsanti Avanzate - Modificare un design di pulsante di una navbar Barre di navigazione con il primo o ultimo pulsante differenti

312 312 313 315 317 318 321 322 322 322 323 324 324 326

Widget per siti web Widget & segnaposto - Ă¨ tutto automatico! Widget della Galleria design Aggiungere file con filmati e animazioni Widget da siti di altri widget Ridimensionamento di widget Aggiungere segnaposto widget manualmente

328 328 329 332 335 335 337

Galleria pagine & layer Galleria Pagine & Layer Pagine Livelli

338 338 341 341

10 Operazioni con i layer Layer speciali Nascondere livelli ModalitĂ Solo Blocco livelli Mostra tutto & Sblocca tutto Spostamento di oggetti tra i livelli

344 346 346 346 347 347 348

Importazione ed Esportazione Note generali sulle funzioni di importazione e esportazione Importazione ed esportazione dei formati di file supportati Importazione file Esportazione file Panoramica della finestra di dialogo JPEG, PNG e GIF

349 349 349 352 355 358

Personalizzazione Web Designer Modificare il documento modello vuoto Visualizzazione delle tue icone nella scheda di un browser: favicons Opzioni nel menu Strumenti Scheda generale Scheda Griglia e righello Scheda Mouse Scheda Dimensioni pagina Scheda Backup Barre di controllo

364 364 364 365 366 370 371 372 373 373

Comandi veloci del menu e della tastiera Introduzione Menu File Menu Elaborazione Menu Ordina Menu Inserisci Menu Strumenti Menu Condividi Menu finestra Menu Aiuto Comandi veloci tastiera

377 377 377 381 383 385 386 388 388 390 392

Index

397

www.magix.com

Assistenza

Assistenza Gentile cliente MAGIX, è nostro obiettivo fornire costantemente un aiuto pratico, rapido e risolutivo ai nostri clienti. Per questo ti mettiamo a disposizione una vasta gamma di servizi: •

•

Assistenza web illimitata: Come cliente registrato MAGIX riceverai un servizio di assistenza web illimitato tramite il pratico portale MAGIX http://support.magix.net. Qui avrai accesso ad un assistente, FAQ, patch e informazioni da altri utenti costantemente aggiornate. Come unico requisito è richiesta la registrazione del prodotto al sito www.magix.com. Online Community, una piattaforma di scambio e di aiuto rapido: Come cliente registrato MAGIX hai a disposizione gratuitamente e senza limiti la Online Community www.magix.info. La Community comprende oltre 120.000 membri ed offre la possibilità di porre domande sui prodotti MAGIX o cercare argomenti specifici e risposte tramite l'apposita funzione di ricerca. Oltre a domande e risposte troverai anche un glossario, video introduttivi (tutorial) e un forum di discussione. I tanti esperti che troverai ogni giorno su www.magix.info ti garantiscono tempi di risposta rapidi a volte nell'arco di pochi minuti. Assistenza via e-mail per prodotti MAGIX: Per ciascun nuovo prodotto MAGIX riceverai in automatico a partire dalla data di acquisto per 12 mesi un servizio di assistenza per e-mail gratuito. Assistenza Premium via e-mail: Per ottenere un servizio di assistenza prioritario o se desideri ricevere l'aiuto del team di assistenza per problemi di hardware non relativi a MAGIX, potrai acquistare un ticket di Assistenza Premium via e-mail. Accedi al sito del support MAGIX http://support.magix.net e clicca, dopo aver effettuato il log-in, su "Acquista codice di accesso“. Il ticket è valido per un determinato problema tecnico, fino alla sua risoluzione e non si limita ad una sola e-mail. Attenzione: Per poter utilizzare l'assistenza Premium per e-mail e l'assistenza gratuita al prodotto per e-mail tramite Internet, dovrai registrare il tuo programma MAGIX con il numero di serie. Il numero di serie si trova sulla custodia del CD di installazione o nel lato interno della confezione del DVD.

•

Servizio clienti telefonico supplementare: Oltre i numerosi servizi clienti gratuiti hai a disposizione un ulteriore servizio di assistenza telefonica a pagamento.

Al seguente link troverete una lista dei numeri telefonici per contattare il nostro supporto tecnico:

12 http://support.magix.net Posta: MAGIX Development GmbH., CP 20 09 14, 01194 Dresden, Germania Ti preghiamo di tenere a portata di mano le seguenti informazioni: • • • • • • •

Quale programma MAGIX (versione) stai utilizzando? Quale sistema operativo possiedi? Come si chiama la scheda grafica e quale risoluzione dello schermo è impostata? Come si chiama la tua scheda audio? Stai utilizzando il sistema sound del computer? Per programmi video: come si chiama la tua scheda video/Firewire? Quanto è grande la tua RAM? Quale versione DirectX è installata?

Vendita e distribuzione Numero telefonico: +390662207339 I nostri venditori sono a tua disposizione nei giorni feriali per: • • • •

Ordini Assistenza al prodotto (prima dell'acquisto) Richieste Upgrade Restituzioni

www.magix.com

Introduzione

Introduzione La maggior parte dei siti web hanno una "natura grafica", per questo la presentazione del tuo sito è molto importante: se ad esempio desideri un sito web dall'aspetto professionale, questo programma ti aiuterà a crearne uno senza dover usare troppi strumenti differenti (di grafica o HTML). Avrai inoltre la massima libertà e flessibilità nell'applicazione dei testi, foto e grafiche. La creazione di siti web è simile a quella dei file PDF: non è necessario sapere ciò che avviene "dietro le quinte". I file PDF infatti non vengono elaborati direttamente. Analogamente, non è necessario conoscere il linguaggio HTML che serve a creare il tuo sito web.

Cosa c'è di nuovo in MAGIX Web Designer? Ottimizzazioni edizione di testo L'edizione flessibile del testo è una delle forze di Web Designer ma siamo riusciti ad apportare ulteriori miglioramenti:

Simboli & Icone • • • • • •

Prova ''INSERISCI'' > ''SIMBOLO'' . Non si tratta soltanto di simboli ed icone utili che puoi aggiungere al tuo testo, ma anche di forme vettoriali del tutto editabili! La famosa collezione Font Awesome è stata aggiornata ed è ora integrata da una collezione di icone Material Design di Google, in tutto oltre 1.500 simboli Abbiamo aggiunto una funzione di ricerca per i simboli: cerca, ad esempio, "Face" e subito compariranno i simboli di Facebook, emoji, etc. I simboli verranno aggiornati in automatico non appena è disponibile una nuova versione Inoltre, è stato ottimizzato il comportamento dei simboli aggiunti al testo (ad es. questi non sono colpiti dalle modifiche applicate al font del testo) Una nuova opzione di click per la sostituzione di simboli con il tasto destro del mouse (inclusi i simboli degli elenchi puntati)

Altre ottimizzazioni testo • • • • •

Un migliore comportamento del testo sui pulsanti (cosicché il font e le dimensioni del font siano sincronizzate nello stato di mouse off/on) Posizionamento ottimizzato di pedice/apice Una nuova opzione di respingimento testo rettangolare. Opzione per modificare la casella del testo selezionato, passando da testo maiuscolo a minuscolo. Il controllo ortografico ti permette adesso di impostare la lingua per tutto il documento

14 •

• •

Ottimizzazioni per la crenatura automatica (la crenatura supporta adesso anche le differenze fra classi di caratteri diversi, così che molti nuovi font OpenType renderizzano ora con la crenatura giusta) Ottimizzazione editing liste E molte altre ottimizzazioni minori

Contenuto Nuovi modelli & altri contenuti • • • • •

Oltre 20 nuovi temi per siti web, tutti dotati di varianti per dispositivi portatili Una nuova categoria di grafiche Ulteriori sfondi per siti web Una selezione di nuove barre di navigazione moderne e design per pulsanti standalone Un nuovo, pratico widget per il contatore visite

Un nuovo catalogo di contenuti online Incluso gratuitamente per un anno un catalogo di contenuti online come parte della nostra garanzia di aggiornamento 365 giorni. Basato sul catalogo di contenuti della versione 11, questo offre adesso una versione migliorata dotata di: • • •

La Galleria design (detta ora 'Galleria di design locale') viene ora usata per visualizzare solo le grafiche/i contenuti attualmente in uso (quelli che hai scaricato dal Catalogo di contenuti online 365 o da CD di back up opzionale), velocizzando l'accesso alle risorse che stai già usando.

Nuove SmartShape Le SmartShape sono uno strumento facile e veloce per creare e modificare con eccellenti risultati alcune delle forme più richieste. Sono state apportate alcune ottimizzazioni anche alla modalità di funzionamento delle SmartShape (ad es. maniglie migliorate) oltre ad alcune fantastiche, nuove aggiunte al catalogo di queste forme pronte da usare estremamente modificabili: • • •

Nuovi pannelli di testo e pannelli foto Tutte le nuove SmartShape includono forme semplici come rettangoli, di cui puoi modificare angoli e linee Nuove varianti di SmartShape già esistenti come freccie e nuvolette di pensiero

www.magix.com

Introduzione Presto metteremo a disposizione un'interfaccia di programmazione pubblica per tutti coloro che sono interessanti a sviluppare SmartShape personali (programmato in Javascript). Contattaci

Griglie di foto Con queste potrai visualizzare le tue foto e troverai la nuova categoria alla voce "COMPONENTI" > "RISORSE IMMAGINE" .

Altro Ottimizzazioni nell'importazione ed esportazione. • •

Importazione PDF ottimizzata Importazione ed esportazione di RTF ottimizzata

Semplici spostamento, rotazione & scalatura di foto Seleziona una foto nello strumento foto e sulla foto vedrai alcune nuove maniglie per scalare, ruotare e tagliare. È molto più semplice e intuitivo che usare lo strumento di riempimento per queste azioni semplici ma frequenti, ed è anche più avveduto perché ti assicura di non vedere nessuno spazio vuoto intorno agli angoli della foto quando la sposti nella cornice. Consiglio professionale: fantastico per la correzione dell'orizzonte!

Garanzia di aggiornamento 365 giorni: ricevi tutte le nuove funzioni, non appena disponibili! Sappiamo che molti di voi trovano frustrante dover aspettare un anno intero prima di ricevere gli aggiornamenti: consapevoli di questo, stiamo elaborando - ed abbiamo quasi terminato - nuove funzioni e contenuti. Abbiamo la risposta! Per la prima volta avrai accesso a nuove funzioni e contenuti non appena sviluppati, in qualsiasi momento durante i 365 giorni dopo il tuo acquisto. Potrai scaricare e usare queste nuove funzioni senza costi supplementari, in aggiunta alla versione da te acquistata. La garazia di aggiornamento 365 giorni ti dà accesso per 365 giorni a: • • •

Xara Online Designer, incluso ogni aggiornamento durante quel periodo Il nuovo catalogo di contenuti online, incluso ogni modello pubblicato durante quel periodo Aggiornamenti e patch di Web Designer pubblicati nei 365 giorni dopo l'acquisto e la registrazione.

Nota: questi aggiornamenti continuano a funzionare anche dopo i 365 giorni con qualsiasi versioni installata precedemente alla data di scadenza di questo periodo, ma se installi di nuovo il software dopo la scadenza della garanzia di aggiornamento (e non la rinnovi) allora questi aggiornamenti non saranno inclusi (il software tornerà alla versione della data di acquisto o di registrazione).

Altre ottimizzazioni •

• •

•

Un nuovo media player ottimizzato (per impostazione standard usa la tecnologia HTML5 del browser web per riprodurre audio e video, lì dove il browser è compatibile, altrimenti Flash) La finestra di anteprima è stata aggiornata per includere l'anteprima MS Edge (Windows 10) Adesso puoi assegnare dei nomi individuali agli oggetti della Galleria Pagine & Layer in modo da ritrovare più facilmente gli oggetti ed organizzare meglio le tue grafiche Operazioni di distribuzioni sono state aggiunte alla barra degli strumenti 'Allineamento'.

Web Designer vs Web Designer Premium Web Designer Premium offre una serie di funzioni extra per user professionisti per la creazione e la pubblicazione del sito I possessori di MAGIX Web Designer possono aggiornare il software in modo semplice. Vedi la pagina www.magix.com per maggiori dettagli.

Web Authoring / Web Publishing • • • • • • • •

Presentazioni Animazioni (flash e gif) Nuovi widget Transizioni animate di pagine e livelli Mappe del sito Explorer FTP Modelli e widget extra Codice dell'intestazione

Strumenti grafici • • • • • • • • • • •

Disegno libero e pennello Quickshape Nello strumento Testo: Trova & Sostituisci Nello strumento Riempimento: alcune forme e profili di riempimento. Nello strumento Trasparenza: alcune forme e profili di trasparenza Ombra Smussatura Matrice Sfumatura Estrusione 3D Nello strumento Foto: occhi rossi, panorama, in base al contenuto, maschere

www.magix.com

Introduzione

Gallerie • • •

Linea Frame In Pagine & Layer: naviga tra gli oggetti

Generale • • • • • •

Unisci le figure. Funzione "Incolla" avanzata Denominazione colori e modelli di colore. Stampa Screen Capture Alcuni formati di importazione e esportazione

Web Authoring / Web Publishing Presentazioni. Con Web Designer Premium puoi creare presentazioni con slide show e i visitatori del tuo sito possono passare da una fase all'altra tramite le frecce della tastiera. Applica delle transizioni animate nel passaggio da una pagina o da una fase all'altra della presentazione. È possibile anche eseguire tele conferenze web (a ‘Webinar’) per mostrare le tue pagine ad una serie di invitati Animazione (Flash e gif).Web Designer Premium ti permette di creare in modo semplice animazioni Flash funzionanti. Il pragramma supporta anche creazioni GIF animate. Widget extra.Web Designer Premium include una vasta gamma di Widget visibili nella Galleria design. Sono compresi anche i nuovi widget con foto e content slideshow ridimensionabili che renderanno il tuo sito più interessante e dinamico. Plus Premium include una serie di chart interattivi e widget di grafica e-commerce Widget, e un widget "Incorpora un sito web". Quest'ultimo è perfetto per l'incorporamento nella tua pagina di blog, micrositi e simili. Font incorporati La tecnologia di incorporamento font di Web Designer Premium supera la restrizione che impone di limitarsi alla piccola selezione dei font chimati "web safe". Questa tecnica è compatibile con la maggior parte dei browser di rete più moderni e funziona con l'incorporamento di una versione speciale del font nel sito web che il browser può scaricare e visualizzare. Numeri e punti graficiNella versione Premium puoi disegnare punti e numeri particolarmente utili nelle presentazioni e che potranno migliorare notevolmente l'aspetto dei tuoi elenchi. Transizioni animate di pagine e livelli. Web Designer Premium ti permette di aggiungere in modo semplice una vasta gamma di effetti animati a livelli e link di

18 pagine del tuo sito web. Puoi aggiungere transizioni animate a qualsiasi link di collegamento ad una pagina o livello pop-up. Mappature sito. È possibile generare automaticamente una mappa del sito per aiutare i motori di ricerca con la scansione del tuo sito web Explorer FTPPuoi navigare, visualizzare e cancellare file e cartelle del tuo server FTP tramite il Web Space Explorer integrato di Web Designer Premium. Modelli e widget extra. Web Designer Premium offre alcuni modelli aggiuntivi che non sono compatibili con la versione classic soprattutto per le presentazioni Flash di Web Designer ed altre funzioni. Ed inoltre c'è una slezione di widget commerciali Aggiungere facilmente il codice di intestazione ad una pagina o sito web. Web Designer Premium ti permette ora di inserire il codice HTML nella testa e nel corpo della tua pagina web offrendo una maggiore versatilità per personalizzare il tuo sito. Puoi aggiungere il codice (o il codice di un provider di widget) in una pagina singola o su tutte le pagine in modo semplice.

Strumenti grafici Strumento di disegno libero e pennello.Puoi utilizzare questo strumento per disegnare a mano libera come faresti con una matita. Può essere usato anche per creare colpi di pennello. Include l'opzione che permette di tracciare linee di larghezza variabile utilizzando un dispositivo di disegno sensibile a pressione compatibile come una tavoletta grafica. Strumento effetti live plugin per Photoshop. Nella versione Premium, gli effetti dei plugin di Photoshop possono essere applicati sia a foto che a grafiche vettoriali aprendo una vasta gamma di speciali effetti grafici. Inoltre abbiamo incluso più di 40 plug-in provenienti da MAGIX e Xara. Strumento QuickShapeLo strumento Quickshape ti permette di creare quasi ogni tipo di forma regolare, simmetrica con angoli vivi o arrotondati. Alcune opzioni dello strumento di testo (Trova e sostituisci). La funzione Trova & Sostituisci esegue una ricerca in tempo reale per cui, mentre digiti la stringa di ricerca, il testo viene ricercato e selezionato in tempo reale. Alcune opzioni aggiuntive dello strumento Riempimento (forme di riempimento e profili). Lo strumento di riempimento ti permette di applicare colori di riempimento agli oggetti. La versione Premium contiene coni, diamanti, riempimenti a 3 e 4 colori e un comando per il profilo di riempimento. Alcune opzioni aggiuntive dello strumento Trasparenza (forme e profili di trasparenza).Lo strumento Trasparenza ti permette di specificare quale quantità

www.magix.com

Introduzione appaia dei colori sottostanti e degli oggetti fondamentali attraverso un oggetto. La versione Premium include inoltre altri tipi di trasparenze. STRUMENTO OMBRA. Lo Strumento Ombra ti permette di applicare, rimuovere e

modificare ombre semi-trasparenti (o "soft"). STRUMENTO SMUSSATURA. Strumento Smussatura smussatura dà un senso di

profondità agli oggetti sulla pagina. Lo Strumento Matrice. Lo strumento Matrice ti permette di creare prospettive e profondità sulla pagina Sturmento Sfumatura.Lo strumento Sfumatura ti permette di sfocare i contorni di un oggetto di modo che sfumi o si dissolva in un oggetto dello sfondo. Strumento di estrusione 3D Lo strumento di estrusione costituisce un modo semplice e veloce per convertire forme e testi in 2D in versioni estruse 3D ad alta qualità. Nello strumento Foto: occhi rossi, panorama, in base al contenuto, maschere • •

•

Occhi rossi. Occhi rossi: questo strumento ti permette di rimuovere rapidamente l'effetto occhi rossi dai volti. Panorama. Web Designer Premium include uno strumento che può combinare automaticamente fino a 6 fotografie in un unico ampio panorama ad alta risoluzione. Mascheramento Diverse operazioni necessitano di una maschera che indichi su quali parti della foto o del disegno bisogna intervenire: per esempio scalatura in base al contenuto, Taglio/Copia/Incolla, ottimizzazione foto.

Gallerie Galleria lineeLa Galleria Linee si può usare per applicare diversi stili o attributi, come colpi di pennello, tratteggi, frecce e altri ancora. Nella Galleria Pagine & Layer: la versione Premium offre la possibilità di gestire anche oggetti nella galleria e non soltanto pagine e layer.

Generale Aggiornato.Alcuni formati di importazione ed esportazione - esportazione AVI, Flash e GIF animati. Importazione SVG, beta Open Office (.odp) e PowerPoint (.pptx). Unisci le forme.L'opzione del menu "ORDINA" > "COMBINA FORME" (o con un cliccando con il tasto destro del mouse e scegliendo l'opzione COMBINA FORME ) mette a disposizione molti strumenti per l'elaborazione e la combinazione delle forme. Puoi utilizzare delle forme combinate su ogni tipo di oggetto incluse bitmap.

20 Funzione "Incolla" avanzata Nuove operazioni rendono la funzione "incolla" più flessibile; si tratta di: Incolla in posizione, Incolla dimensioni, Incolla e sostituisci selezione, Incolla nel livello corrente e Incolla in posizione nel livello corrente. Denominazione colori e alcuni modelli di colore. La versione Premium comprende supporto per RGB, scala di grigi, 3D e tavolozza colori web. Se desideri utilizzare questo colore in parti diverse del documento, ti raccomandiamo di farlo diventare un Colore con Nome in modo che appaia nella barra dei colori e possa essere selezionato con facilità. Quando dopo continuerai con l'elaborazione tutti gli oggetti ai quali è applicato questo colore vengono cambiati. Stampa. Puoi stampare i tuoi documenti con Web Designer Premium Screen Capture. Web Designer Premium include una funzione di screen grab facile da usare. Alcuni formati aggiuntivi di importazione ed esportazioneImporta grafiche dal web ed esporta Flash e GIF animati.

Garanzia di aggiornamento 365 giorni Sappiamo che molti di voi trovano frustrante dover aspettare un anno intero prima di ricevere gli aggiornamenti: consapevoli di questo, stiamo elaborando - ed abbiamo quasi terminato - nuove funzioni e contenuti. Abbiamo la risposta! Per la prima volta avrai accesso a nuove funzioni e contenuti non appena sviluppati, in qualsiasi momento durante i 365 giorni dopo il tuo acquisto. Potrai scaricare e usare queste nuove funzioni senza costi supplementari, in aggiunta alla versione da te acquistata. • •

•

Ricevi una licenza perpetua per la versione più attuale del software al momento dell'acquisto Promettiamo di continuare ad ottimizzare e sviluppare il software, che include la garanzia di aggiornamento. Pubblicheremo regolarmente per tutto l'anno nuove funzioni e modelli Avrai accesso a queste nuove funzioni e ai contenuti mentre li sviluppiamo, piuttosto che dover aspettare un anno per il release. Ciò significa che puoi essere sempre tenere il passo ed essere aggiornato con le ultime tendenze nel web design!

www.magix.com

Introduzione

Domade e risposte sulla Garanzia 365 giorni Cosa succede dopo 365 giorni? Se non esegui l'upgrade, la tua garanzia 365 giorni scade. I servizi online premium cesseranno o torneranno alle funzionalità base. Per i prodotti attualmente dotati della garanzia 365 giorni, ciò significa: • •

Web Designer: continuerai a poter usufruire dell'hosting e dell'Online Designer gratuiti, ma non avrai più accesso al Catalogo dei contenuti online* Web Designer Premium: il servizio hosting M torna al servizio di hosting gratuito, Premium Xara Online Designer torna a Online Designer gratuito, il Catalogo di contenuti online non sarà più disponibile*

Inoltre, non riceverai più aggiornamenti di funzioni e contenuti. La copia o le copie installate fino al momento della data di scadenza continueranno a funzionare senza limiti di tempo, MA, se installi di nuovo il programma su un altro computer dopo la scadenza della garanzia, questo ritornerà alla versione originariamente acquistata (senza gli aggiornamenti eseguiti durante l'anno).

Quanto costa il rinnovo? Il costo sarà simile a quello attuale di upgrade. Nota: questo non è un abbonamento, non ci sarà un prolungamento automatico e tu dovrai scegliere come sempre se eseguire l'upgrade alla nuova versione e prolungare la garanzia di aggiornamento per altri 365 giorni.

Perché lo fai? È frustrante tanto per noi, quanto per te, disporre di nuove funzioni e contenuti che potrebbero mantenere il nostro prodotto in una posizione leader sul mercato e rendere felici i nostri clienti, e non usarli. Il web design è un mercato sempre in movimento ed abbiamo bisogno di un modello che lo riconosca. Inoltre, il ciclo di pubblicazioni annuali rappresenta un fardello notevole per sviluppatori, tester e assistenza nel periodo in cui i nostri principali vengono aggiornati, cosa che in questo periodo può comportare un abbassamento del servizio di qualità. Distribuendo, invece, tutti i nuovi release lungo il corso dell'anno, potrai approfittare di un livello più consistente di testing pre-release e di assistenza post-release. Win win! In altre parole, stiamo cercando di darti i vantaggi di un modelli di abbonamento senza offrire davvero un abbonamento. Un'altra considerazione pratica è che Xara Online Designer si sta sviluppando rapidamente, aggiornamenti futuri richiederanno update di compatibilità per Web

22 Designer sempre più frequenti e perciò abbiamo bisogno di un modello che sia in sintonia con il ciclo di release di Online Designer.

Quando iniziano i 365 giorni? Al momento della registrazione. Se ordini il prodotto nel negozio online di Xara, allora la tua copia sarà registrata al momento dell'acquisto, ma se non acquisti il prodotto online, la data di registrazione potrebbe avvenire in seguito alla data di acquisto.

Come vengo a sapere delle nuove funzioni? Riceverai una notifica riguardante i nuovi aggiornamenti e pubblicheremo ulteriori informazioni sulla pagina What's New e sulla nostra newsletter mensile, the Outsider (puoi iscriverti a Outsider qui http://www.xara.com/uk/outsider/). In alternativa puoi unirti a noi su Facebook http://www.xara.com/facebook o Google+ https://plus.google.com/+XaraGroup o seguirci su Twitter http://www.twitter.com/xaragroup.

* Come funziona il nuovo Catalogo di contenuti online / Galleria di design locale?* In Web Designer 365, la galleria di design locale mostra solo i contenuti che hai già usato, mentre il Catalogo Contenuti Online mostra tutta la gamma della grafica. Quando selezioni un qualsiasi elemento di design dal Catalogo dei contenuti, questo viene scaricato e installato sul tuo computer e apparirà nella Galleria di design locale, dove in futuro vi avrai accesso anche se ti trovi offline. Così, se sai di voler accedere regolarmente a una categoria specifica di design, clicca con il tasto destro del mouse sul nome di una cartella (nb. devi aver scaricato almento una grafica affinché appaia la cartella) nella Galleria di design locale e seleziona 'Scarica tutto'. Oppure puoi naturalmente aggiungere un CD di back up alla tua cartella. Il CD include l'intera gamma dei modelli.

Cosa rende così particolare Web Designer? Web Designer è unico in quanto è il solo strumento di progettazione web realmente a modulo libero che permette libertà di progettazione web; con 'qualsiasi cosa, ovunque' e che produce risultati WYSIWYG accurati. In altre parole, puoi posizionare testo, grafiche, foto in qualsiasi parte della pagina, con qualsiasi dimensione, angolo, con sovrapposizioni, trasparenza e Web Designer produrrà una pagina in pixel HTML accurata e perfettamente funzionante. Web Designer comprende funzioni considerate quasi impossibili con altri sotware di web-authoring come il respingimento del testo intorno a forme irregolari e foto. Include inoltre strumenti di grafica vettoriale avanzati per la progettazione di forme semplici fino a loghi aziendali complessi. Include un'ottimizzazione grafica automatica

www.magix.com

Introduzione (che non produce solo immagini con una risoluzione ottimizzata, ma che individua automaticamente elementi in ripetizione all'interno del sito producendo così siti web più veloci e meglio ottimizzati). Supporta layer CSS con funzioni avanzate come trasparenza, trasparenza graduata ed effetti mouse-over e altre ancora. Crea inoltre siti web HTML cross-browser e multipiattaforma completamente compatibili con XHTML. Inoltre, Web Designer è probabilmente lo strumento più semplice disponibile per imparare l'utilizzo del web authoring. Web Designer è adatto per graphic designer che non desiderano imparare il linguaggio HTML o di scripting. È lo strumento di 'prototipazione rapida di siti web' perfetto. Inoltre si rivolge ai pricipianti che hanno bisogno del modo più semplice per creare dei siti web dall'aspetto professionale. Web Designer non fornisce strumenti di programmazione, script editing e nemmeno una 'visualizzazione HTML'. LAa nostra filosofia di progettazione è questa: non devi conoscere il linguaggio di programmazione PDF per produrre file nel formato PDF. Allo stosso modo, non è necessario avere conoscenza di HTML o Javascript per creare dei siti web.

Creazione di un sito web in 6 passaggi Per chi ha una bassa soglia di attenzione (è la maggior parte di noi) possono scoprire i vantaggi principali di Web Designer semplicemente seguendo le istruzioni presenti nel documento iniziale, quando avvii Web Designer. Si tratta di un'introduzione base e di una vera pagina web da utilizzare per i tuoi sperimenti. Puoi anche trovare questo documento modello nella galleria dei design. Clicca sul pulsante, apri la categoria INTRODUZIONE ed effettua un doppio click sul primo documento. Qui scopri come modificare i colori del tuo sito web, elaborare il tuo testo, posizionare foto tramite drag & drop, spostare oggetti intorno alla pagina e molto altro. Annulla Ricorda, puoi annullare ogni modifica utilizzando il pulsante annulla o la combinazione di tasti Ctrl+Z. Tenendo premuto il pulsante, puoi annullare rapidamente tutte le tue azioni, tornando all'inizio.

Aiuto Se hai bisogno di aiuto per imparare ad utilizzare questo programma, qui ci sono alcune utili fonti d'informazione: • •

•

• • •

Aiuto del programma: seleziona " AIUTO DI MAGIX WEB DESIGNER" (contenente centinaia di pagine informative) dal menu "AIUTO" . Barra di stato - prova a leggere il testo sulla barra di stato nella parte inferiore della finestra principale di MAGIX Web Designer. Esso descrive sempre quali azioni è possibile effettuare al momento e quali sono le sue funzioni (persino durante il trascinamento) e ti aiuta ad imparare l'uso degli strumenti di MAGIX Web Designer. Fornisce anche dettagli sui pulsanti e comandi, nel momento in cui punti il mouse su di essi. Consulta la sezione Barra di stato per ulteriori dettagli. ToolTips (sulla pagina 24): se tieni brevemente l'indicatore del mouse su un pulsante o un controllo, viene visualizzato un breve messaggio con la descrizione della sua funzione. Menu: se desideri sapere qual'è la funzione di una voce di menu, selezionala e premi "F1". Finestre di dialogo: se desideri sapere cos'è o come usare una finestra di dialogo, clicca su AIUTO. Filmati: utilizza l'opzione di menu AIUTO > FILMATI.

Info documenti "FILE- > "INFO DOCUMENTI" mostra le informazioni sul documento selezionato, ad esempio sulle sue dimensioni e sui font utilizzati. È un buon modo per scoprire se ti manca un font da cui potrebbe dipendere la corretta visualizzazione del documento.

Qualsiasi cosa digiti nel campo dei commenti viene memorizzata come parte del file. Questo commento viene visualizzato ogni volta che apri la finestra di dialogo info documenti.

Tooltip Quando ti sposti sopra un pulsante, un tooltip ti informa sulla funzione del tasto.

Su MAGIX Web Designer Scegli AIUTO > SU MAGIX WEB DESIGNER . Quest'opzione ti mostra informazioni generali sul programma. Se contatti l'assistenza di Xara potrai aver bisogno di queste informazioni.

www.magix.com

Primi passi

Primi passi Questa sezione fornisce una panoramica della funzionalitĂ principali di Web Designer. Le sezioni seguenti descrivono ogni strumento in maniera piĂš dettagliata.

Layout del programma

Barra informazioni - cambia a seconda dello strumento Zoom Anteprima pagina/Anteprima sito web Galleria design locale (barra Gallerie) Galleria Pagine & Layer (barra gallerie) Strumento di selezione Strumento di elaborazione foto Strumenti di disegno Strumento di testo

26 Strumento ombra Schede per tutti i documenti aperti. L'icona indica il tipo di documento Barra dei colori Nota: tutte le barre informazioni di <Programmaname_short> sono provviste di funzione di renderizzazione del testo avanzata per una migliore visualizzazione nel caso nel Pannello di controllo di Windows siano presenti testi ClearType. Ci sono cinque pulsanti nella barra superiore, che si riferiscono a funzioni del sito web. Due di questi hanno barre a comparsa che appaiono quando muovi il puntatore del mouse su di essi e che mostrano altri pulsanti per funzioni web.

Esporta e mostra anteprima della pagina web/sito ProprietĂ link Opzioni sito web Esporta

Sposta il puntatore del mouse su ogni pulsante nella barra a comparsa per visualizzare un tooltip con relativa descrizione.

Ci sono due modi per creare un sito web nuovo. Iniziando con un modello giĂ pronto che personalizzerai con testi, foto e schema colori. Oppure creando un sito web da zero, ponendo nella pagina tutti gli elementi necessari, i testi, la grafica e le foto . Nota: per impostazione predefinita, Web Designer apre un nuovo documento che mostra solo una pagina. Per vedere tutte le pagine del tuo sito web, clicca con il tasto destro sulla pagina e scegli VISUALIZZAZIONE PAGINE MULTIPLE. Adesso puoi scorrere verso l'alto e verso il basso nella finestra di Web Designer per visualizzare tutte le pagine del documento.

www.magix.com

Primi passi

Zoom / Scorrimento / Spostamento della pagina Queste sono operazioni comuni molto semplici da svolgere • • •

Per lo Zoom in e out tieni premuto il tasto Ctrl e utilizza la rotella del mouse. Per spostare la pagina, premi la rotella del tuo mouse e muovilo (sì, la rotella è anche un pulsante) Per scorrere la pagina, usa la rotella del mouse (o le barre di scorrimento) I documenti web vengono visualizzati, per impostazione predefinita, nella modalità pagina singola; i documenti di stampa nella modalità di visualizzazione pagine multiple. Passa da una modalità di visualizzazione ad un altra cliccando sulla pagina o clipboard con il tasto destro del mouse e selezionando o deselezionando VISUALIZZAZIONE PAGINE MULTIPLE dal menu a tendina. Un esempio di pagine multiple è mostrato a sulla sinistra. Puoi trascinare elementi tra le pagine tramite drag and drop. Se esegui modifiche del colore tema su tutto il documento, puoi vedere l'effetto che tali modifiche hanno su tutte le pagine. La pagina corrente è contrassegnata con 4 parentesi poste in corrispondenza degli angoli.

In questo esempio vedi alcuni oggetti che sono stati spostati nell'area di lavoro posta accanto alle pagine. L'area di lavoro è utile come luogo in cui salvare temporaneamente o elaborare grafiche, foto o altri oggetti. Questi oggetti non vengono esportati come parte del documento se non vengono posizionati sullo speciale lyer di sfondo della pasteboard. In questo caso vengono esportati presumendo che debbano formare parte dello sfondo del tuo sito.

Barre a comparsa Alcuni strumenti nella barra degli strumenti principale sono raggruppati sotto una sola icona. Queste icone hanno un piccolo indicatore triangolare nell'angolo in basso a destra e quando muovi il puntatore del mouse su una di queste appare una barra a comparsa. La barra contiene le altre icone degli strumenti presenti in questi gruppi. Muovi il puntatore del mouse su ogni icona per visualizzare un tooltip e clicca per selezionare lo strumento necessario.

28 Se selezioni uno strumento modale dalla barra a comparsa, esso diventa lo strumento principale di quel gruppo. Vedrai la sua icona evidenziata sulla barra strumenti principale. Ci sono inoltre delle barre a comparsa anche sulla barra strumenti in cima alla finestra. Anch'esse sono utilizzate per raggruppare operazioni simili sotto una sola icona. In questo modo saranno facilmente accessibili senza dover rubare troppo spazio alla barra. Vedi il capitolo Personalizzazione (sulla pagina 364) per maggiori informazioni sulle barre a comparsa

Oggetti sulla pagina Sia che tu personalizzi un modello, sia che crei le tue grafiche partendo da zero, puoi ruotare, modificare le dimensioni e posizionare qualsiasi cosa sulla pagina ed ovunque tu voglia. Puoi facilmente cambiare le dimensioni della pagina in ogni grandezza necessaria ed aggiungere nuove pagine web. Alcune funzioni, come la modifica degli schemi di colori, funzionano su tutte le pagine simultaneamente. Questi sono i tipi base di elementi di pagina: •

•

Testo: usando lo STRUMENTO TESTO puoi creare qualsiasi tipo di testo anche di una singola parola, intestazioni per colonne di testo, titoli, interi paragrafi oppure testi fluttuanti tra gli oggetti. Inoltre, puoi creare elenchi puntati o numerati. La barra informazioni dello STRUMENTO TESTO mette a disposizione i comandi per la selezione del carattere, la dimensione, gli spazi e molto altro. È possibile modificare le dimensioni del testo tramite lo STRUMENTO DI SELEZIONE o selezionando il testo nel modo consueto e cioè scegliendo dimensioni alternative per punti o pixel. È possibile anche ruotare il testo intorno a qualsiasi angolo e usando RESPINGI TESTO (clicca con il tasto destro su un oggetto per trovare questa opzione) puoi far fluttuare il testo attorno agli oggetti della pagina. Grafiche: ogni tipo di logo, intestazione e la maggior parte dei pulsanti presenti sul tuo sito web sono elementi grafici. Web Designer è un programma di grafiche vettoriali; ciò significa che puoi modificare la forma, ruotare e modificare le dimensioni dei tuoi oggetti grafici senza alcuna perdita di qualità (diversamente dagli strumenti di elaborazione di pixel come Photoshop). E nonostante non esista uno standard di grafiche vettoriali per le pagine web (per i siti web, tutte le grafiche devono essere nei formati JPG, GIF o PNG), Web Designer crea automaticamente il formato e la risoluzione corretti. Se ad esempio desideri creare un campo colorato da posizionare dietro il tuo testo, fallo disegnando un oggetto rettangolare o rotondo sulla pagina e posizionandolo dietro il testo. Quando esporti il sito web, questo viene convertito automaticamente in una grafica PNG con la risoluzione corretta.

www.magix.com

Primi passi •

•

Foto: sono davvero pochi i siti che non contengono alcun tipo di foto. MAGIX Web Designer dispone di molti strumenti per l'elaborazione fotografica. Puoi trascinare le foto direttamente dalla fotocamera o dalla finestra File Explorer sulla pagina, ruotare, tagliare e Web Designer creerà un file JPG con la giusta risoluzione. Sostituire le foto esistenti nei modelli è semplice come il drag and drop. Inoltre puoi modificare le dimensioni e angolo delle foto all'interno della loro cornice. Puoi creare in modo semplice delle foto cliccabili in miniatura che dispongono una versione ingrandita pop-up. Questa può contenere dei comandi della galleria che permettono ai visitatori di navigare tra le foto o di visualizzare uno slideshow automatico. Segnaposto: si tratta di oggetti grafici sulla pagina che rappresentano le dimensioni e la posizione dei "widget" dinamici come animazioni flash, video oppure forme. Quando il sito viene esportato, la grafica del segnaposto viene sostituita dal codice necessario per far funzionare il widget. In questo modo il widget in funzione compare sulla pagina nella stessa posizione. Per maggiori informazioni, consulta il capitolo Widget per siti web (sulla pagina 328).

Web Design basato sull'oggetto Tutti i tipi di elementi sopra descritti vengono generalmente definiti come oggetti. Uno dei particolari vantaggi di Web Designer consiste nella libertà assoluta di posizionare ogni oggetto in qualsiasi punto della pagina; il tuo sito web visualizzerà poi tutto in maniera assolutamente fedele. Il SELECTOR può essere usato per selezionare ogni oggetto sulla pagina e quindi spostarlo, cambiarne le dimensioni e ruotarlo. Puoi regolare la disposizione con un click destro del mouse e scegliendo quindi l'opzione DISPONI o usando le opzioni del relativo menu. Con il SELECTOR puoi modificare la dimensione degli oggetti trascinando le maniglie che si trovano agli angoli o utilizzare le stesse per ruotare un oggetto. Anche se il sito non supporta testi ruotati, Web Designer sa come creare automaticamente la grafica adatta per la pagina finale. Seleziona lo strumento

TESTO

e clicca sulla pagina e inizia a scrivere.

Puoi anche creare colonne di testo cliccando e trascinando il mouse in orizzontale con lo strumento testo attivo oppure creare interi campi di testo trascinandolo in diagonale. Vedi la sezione Testo (sulla pagina 48) nel manuale pdf per maggiori dettagli e il capitolo relativo alla gestione del testo per una completa descrizione di tutte le funzioni di elaborazione testo di MAGIX Web Designer. Puoi anche usare lo strumento di disegno per creare rettangoli, cerchi ed ellissi e ogni altro tipo di forma usando lo strumento FORMA .

30 Consulta la sezione dello strumento di Disegno (sulla pagina 60) nel manuale PDF per maggiori informazioni.

Ordine di successione Tutti gli oggetti sulla pagina sono posizionati uno sull'atro. L'ultimo oggetto creato si trova sempre in cima di fronte a tutti gli altri Puoi modificare la posizione usando il comando ORDINA del menu contestuale oppure con l'apposito menu ORDINA. Per esempio quando disegni un nuovo rettangolo questo copre tutti gli oggetti che stanno dietro. Cliccando sul tasto destro e scegliendo ORDINA o premendo "Ctrl+B" (o dal menu ORDINA) l'oggetto si sposta dietro a tutto il resto. Ctrl+F sposta invece tutti gli oggetti sopra a tutto il resto. Però c'è un altra complicazione: i layers Inoltre i vari elementi possono essere posizionati nei livelli con nome. Un livello può avere una quantità indefinita di oggetti e può essere attivato e disattivato.. Quando il livello è disattivato gli oggetti sono invisibili. Vedi la sezione Layer (sulla pagina 69) per maggiori dettagli.

Il Selector Il selettore è uno strumento di uso comune che ti consente di selezionare, spostare, cambiare le dimensioni e ruotare tutti gli oggetti presenti sulla tua pagina web. Puoi eseguire queste operazioni semplicemente trascinando gli oggetti sulla pagina, o sulle maniglie di selezione intorno all'oggetto, oppure puoi inserire valori numerici precisi. L'oggetto selezionato viene visualizzato con 4 o 8 maniglie poste all'esterno e la barra di stato posta nella parte inferiore dello schermo indica ciò che è selezionato.

Trascina una delle maniglie poste all'angolo, per modificare le dimensioni di un oggetto. Trascina l'oggetto solo dalle maniglie interne (come mostrato a sinistra) per ruotarlo. I rettangoli hanno otto maniglie con le quali puoi modificarne le dimensioni. Altri oggetti come gruppi, blocchi di testo e foto dispongono solo di 4 maniglie e non possono essere allungati (perchè altrimenti si deformerebbero).

www.magix.com

Primi passi

Avanzamento graduale degli oggetti Le frecce direzionali possono essere utilizzate per spostare gradualmente l'oggetto selezionato, solo un pixel alla volta. Se premi il tasto shift, sposterai gli oggetti 10 pixel alla volta.

Rotazione oggetti Esistono due modi per ruotare un oggetto. Cliccando sull' oggetto una seconda volta, in modo che le maniglie di selezione si trasformino in maniglie di rotazione da trascinare per ruotare l'oggetto. Oppure, quando appaiono le maniglie di selezione, muovendo l'indicatore del mouse all'interno delle maniglie agli angoli, finché l' indicatore del mouse si trasformerà in indicatore di rotazione; potrai così trascinare l'oggetto ruotandolo. Di solito in Web Designer puoi ruotare quasi tutti gli oggetti, incluse foto, titoli e persino blocchi di testo. Dal momento che i browser web non sono in grado di visualizzare il testo ruotato, Web Designer lo convertirà automaticamente in grafica.

Barra delle informazioni Quando un oggetto è selezionato, la barra delle informazioni, subito sopra il tuo documento, mostra tutti i rispettivi comandi relativi allo strumento attuale. Questa barra cambia a seconda dello strumento selezionato. Ecco la barra delle info nello strumento selettore:

La barra delle informazioni collocata sopra il tuo documento mostra i comandi per lo strumento selezionato.

Puoi inserire valori numerici in ogni campo, ad es. per ridurre le dimensioni di un oggetto del 20%, puoi inserire 80% nel campo W (dunque una dimensione percentuale). Il piccolo lucchetto determina se larghezza ed altezza debbano essere modificate insieme.

Copia degli oggetti Puoi usare normalmente le opzioni COPIA (CTR+C) ed INCOLLA (CTRL+V) del menu contestuale oppure, più rapidamente trascinando il mouse. È possibile anche copiare ed incollare una pagina dove vuoi da un documento all'altro. Consulta la sezione Copia & Incolla (sulla pagina 91).

Barra degli strumenti del sito web La BARRA DEGLI STRUMENTI DEL SITO WEB posta in cima a MAGIX Web Designer permette di avere accesso alle funzioni web principali utilizzate regolarmente.

Anteprima Link Opzioni sito web Esporta

Sposta il puntatore del mouse su ogni bottone nella barra flyout per visualizzare un tooltip con la descrizione del pulsante.

Creazione di un sito web Ci sono due modi per creare un sito web. Iniziando con un modello da personalizzare con testi, foto e colori. Oppure creando un sito web da zero, ponendo tutti gli elementi necessari, testo, grafica e foto. Segnaposto: si tratta di oggetti grafici sulla pagina che rappresentano le dimensioni e la posizione dei "widget" dinamici come animazioni flash, video oppure forme. Consulta la sezione seguente nel capitolo corrispondente del manuale pdf per maggiori informazioni sui segnaposto.

Visualizzazione in anteprima del tuo sito web Quando crei il tuo sito web in Web Designer, il documento a cui stai lavorando mostra un'anteprima statica accurata, ma per controllare il corretto funzionamento delle finestre pop-up, degli effetti mouseover, Flash e altri widget Ă¨ necessario utilizzare la corretta anteprima del browser. Ci sono due opzioni di anteprima situate sulla barra degli strumenti web.

www.magix.com

Primi passi esporta e crea anteprima solo della pagina corrente. Questo risulta utile nel caso di grandi siti dove il caricamento di tutte le pagine impiegherebbe più tempo. Puoi aprire velocemente un'anteprima della pagina sulla quale stai lavorando.

ANTEPRIMA PAGINA

La funzione ANTEPRIMA SITOWEB esporta tutte le pagine del sito e visualizza la finestra con l'anteprima. In questo modo tutte le pagine e i link del sito dovrebbero essere in funzione. I tasti di navigazione nella barra superiore dell'anteprima ti permettono di spostarti avanti ed indietro come in un browser web e con il tasto Home torni alla pagina dalla quale hai avviato l'anteprima.

Puoi effettuare una anteprima del sito a schermo intero cliccando il tasto SCHERMO INTERNO in alto a destra alla finestra di anteprima (premi Esc per abbandonare la modaltà Schemo intero o F11 per ripristinarla) Quando chiudi la finestra di anteprima e la riapri, Web Designer mostra l'ultima modalità selezionata per la finestra: normale, massimizzata o a schermo intero. Se non hai ancora esportato il sito, queste anteprime eseguono l'esportazione in una cartella temporanea del tuo computer. Dopo aver esportato, lo stesso luogo di esportazione viene utilizzato ogni volta che esegui un'anteprima di modo che il sito web sia sempre aggiornato.

Scegli il browser di anteprima Anche se l'anteprima usa per default una versione semplificata del browser Internet Explorer, puoi scegliere uno dei sei tipi di browser più comuni per visualizzare la tua pagina o il tuo sito web dalla finestra di anteprima. Per vedere l'anteprima del tuo sito web dal tuo browser preferito, clicca su quella corrispondente posta sulla barra sopra la finestra di anteprima: Nota: questi pulsanti sono attivi solo se hai installato sul computer il browser corrispondente. Vedi anteprima sito web su Google Chrome Vedi anteprima sito web su Mozilla Firefox

34 Vedia anteprima sito web su Internet Explorer Vedi anteprima sito web su Opera Vedi anteprima sito web su Safari Vedi anteprima della tua pagina o del tuo sito web su MS Edge (solo Windows 10) Se clicchi uno di questi tasti, si apre il browser corrispondente con la pagina del tuo sito in anteprima. Se vuoi vedere l'anteprima della tua pagina in un altro browser non tra quelli proposti, puoi cliccare con il tasto destro del mouse sul file .htm esportato e selezionare l'opzione APRI CON... oppure trascinare il file sulla finestra del browser aperta. Dopo aver effettuato l'esportazione, ogni volta che clicchi sui pulsanti di anteprima, l'esportazione viene aggiornata; pertanto non resta che cliccare sul pulsante "Aggiorna" del tuo browser (o premere il tasto F5).

Utilizzare, modelli, clipart & widget Apri il CATALOGO CONTENUTI ONLINE dal menu "INSERISCI" > "DAL CATALOGO CONTENUTI" (oppure usa "FILE " > "NUOVO DAL CATALOGO DEI CONTENUTI "). Il catalogo mostra cartelle contenenti collezioni di design per siti web e file di grafiche ordinati in base ad un tema specifico. Vai alla voce "SITI WEB" > "TEMI PER SITI WEB" per trovare tutti i modelli di design disponibili per costruire rapidamente una sito web di qualitĂ . Alla voce "SITI WEB">"TEMA BUSINESS" trovi siti web completi e pronti all'uso per svariati tipi di attivitĂ commerciali. Ogni sezione con temi per siti web comprende una serie di layout di pagina alternativi e utili elementi. Inoltre, ogni tema contiene un modello di sito web completo e diversi "schemi colori". Puoi modificare l'intero sito con uno schema di colori diverso semplicemente per drag & drop, importando lo schema dal catalogo nella tua pagina. Mentre importi schemi e modelli nella tua pagina, allo stesso tempo questi vengono aggiunti nella GALLERIA DI DESIGN LOCALE. Alla voce COMPONENTI troverai un'ampia gamma di grafiche e widget da aggiungere al tuo sito: pulsanti, barre di navigazione, pannelli di testo, moduli, servizi e-commerce e slideshow fotografici. Importali direttamente dal catalogo sulla tua pagina. Allo stesso tempo, saranno aggiunti anche alla GALLERIA DI DESIGN LOCALE. Se sei online, il catalogo si aggiorna automaticamente per mostrarti gli ultimi modelli e i nuovi elementi.

www.magix.com

Primi passi

Aggiunta di pagine nuove al tuo sito web Puoi trascinare ogni modello di design dal/la CATALOGO CONTENUTI ONLINE/GALLERIA DI DESIGN (SULLA PAGINA 42) sulla tua pagina. Se si tratta di un modello di pagina, verrà aggiunta una nuova pagina al tuo sito dopo aver richiesto se desideri abbinare delle modifiche di colori. Se trascini un elemento clipart come un pulsante, un'intestazione o una foto, questo verrà aggiunto alla tua pagina nel punto in cui lo rilasci e ancora una volta ti verrà richiesto se desideri abbinare delle modifiche ai colori. Per aggiungere una nuova pagina dello stesso design, il modo più semplice è utilizzare il pulsante DUPLICA PAGINA CORRENTE nel menu elabora o lo stesso tasto sulla toolbar. In questo modo riproduci la pagina attuale sottostante. Puoi cancellare o modificare gli elementi come richiesto. In questo modo mantieni sempre la stessa struttura di navigazione. Oppure puoi copiare e incollare una pagina esistente nello stesso o in un altro documento. Clicca col tasto destro del mouse su uno spazio vuoto della pagina e clicca su COPIA PAGINA. Nel documento di destinazione, clicca con il tasto destro e scegli INCOLLA > PAGINA (oppure premi "Ctrl+V"). La nuova pagina negli appunti viene aggiunta accanto alla pagina corrente. La pagina che è stata incollata adotta le dimensioni di pagina del documento nel quale è stata copiata (se è attiva la casella di controllo TUTTE LE PAGINE DEL DOCUMENTO UGUALI alla voce FILE > OPZIONI PAGINA ). Vengono quindi incollati i livelli, gli attributi e tutti gli oggetti presenti sulla pagina. Puoi aggiungere una nuova pagina bianca cliccando l'opzione NUOVA PAGINA del menu contestuale (click destro) o usando il tasto INSERISCI PAGINA VUOTA del menu flyout della pagina. Puoi eliminare delle pagine, cliccando con il tasto destro del mouse su ELIMINA PAGINA ATTUALE o sul pulsante ELIMINA PAGINA ATTUALE NELLA BARRA DEL MENU A COMPARSA DI 'PAGINA'.

Integrazione dei video, file Flash e altri Widgets Puoi incorporare in modo semplice filmati, file audio MP3, animazioni Flash, GIF animati, gallerie fotografiche e widgdet con slideshow ed altri tipi illimitati di widget interattivi sul tuo sito web con MAGIX Web Designer. Per maggiori informazioni, consulta il capitolo Widget per siti web (sulla pagina 328). Grazie a MAGIX Web Designer puoi creare delle animazioni Flash e GIF personalizzate Vedi il capitolo Animazioni.

Widgets Alcuni degli elementi della GALLERIA DESIGN sono widget dinamici che puoi aggiungere al tuo sito web in modo semplice e veloce. Quando trascini uno di questi elementi nella pagina, si apre un browser su un sito web widget che ti permette la sua configurazione. Di conseguenza per utilizzare i widgets devi essere online . Non appena conclusa la configurazione del widget clicca sul tasto INSERISCI in fondo alla finestra del browser. Viene generato in questo modo un segnaposto che è come una foto istantanea di quello che sarà l'aspetto del tuo widget quando verrà visualizzato sul sito web. Il widget non funzionerà sulla pagina di MAGIX Web Designer: vedrai soltanto un'immagine di anteprima. Apri l'anteprima della tua pagina per vedere il widget in azione! Se su Internet trovi degli altri widget interessanti, di solito il provider ti fornisce una porzione di codice HTML da copiare e incollare sul sito web. Con MAGIX Web Designer è molto semplice. Basta aprire il SELECTOR ed incollare il codice sulla tua pagina. MAGIX Web Designer riconoscerà il codice HTML che hai inserito è creerà un immagine segnaposto che apparirà in pochi secondi sulla tua pagina. Dopodiché basta visualizzare l'anteprima della pagina per vedere il widget in funzione. In alternativa puoi incollare il codice di un widget sulla testa della tua pagina se necessario. Clicca la scheda del segnaposto (sulla pagina 258) nel dialogo delle PROPRIETÀ WEB e clicca il tasto del CODICE HTML (TESTA) e infine incolla il codice nel dialogo del codice HTML (testa). Per maggiori informazioni vedi il capitolo Widget (sulla pagina 328) nel manuale in pdf.

Colori del sito web Tutti i modelli utilizzano una piccola gamma di colori base e varie sfumature dei colori base. Il modo più semplice per ricolorare il tuo sito è utilizzare uno degli schemi di colori alternativi disponibili con ogni tema web nella GALLERIA PROGETTI. Clicca due volte sopra uno schema o trascinalo nella tua pagina per modificare il colore dell'intero sito. Oppure puoi modificare personalmente i singoli colori base. Appaiono sul lato sinistro della barra dei colori posta nella parte inferiore della finestra.

www.magix.com

Primi passi Contorno corrente e colore di riempimento Color Editor Selezionatore a contagocce "Nessun colore" Colori Tema e Colori Collegati Tavolozza fissa dei colori standard Tieni il puntatore su un colore per visualizzarne il nome. Barra di stato. Mostra ciĂ˛ che Ă¨ selezionato e fornisce suggerimenti Basta cliccare su uno dei colori tema e selezionare l'opzione Modifica (puntando l'indicatore sul colore, vedrai il tooltip con il nome).

38 L'editor colori offre una semplice modalità per la selezione dei colori. Clicca sui comandi avanzati per inserire valori RGB. Attenzione: quando cambi un colore base in questo modo, vengono modificate nel documento anche tutte le sfumature ad esso connesse.

Colorazione delle forme Puoi riempire tutte le forme disegnate con un colore, trascinando il colore dalla BARRA DEI COLORI e rilasciandolo sulla forma, oppure selezionando prima l'oggetto e cliccando poi sulla barra dei colori e selezionando l'opzione 'INSERISCI COLORE DI RIEMPIMENTO '. In alternativa clicca sulla piccola icona dell'Editor Colori (o premi Ctrl+E) per visualizzare l'Editor Colori, dove puoi definire qualsiasi colore. Puoi riempire gli oggetti disegnati con una gradazione di colori utilizzando lo Strumento di riempimento (sulla pagina 223).

Colorazione della Clipart importata Quando importi una grafica clipart trascinandola dalla GALLERIA DESIGN, utilizzando l'opzione "FILE" > "IMPORTA o trascinando un file .web o .xar sulla tua pagina, di solito ti viene chiesto se desideri adeguare le impostazioni relative ai colori. Se selezioni NON ACCORDARE , ogni colore con nome utilizzato nella grafica verrà aggiunto alla barra dei colori. Cliccando su uno dei colori della barra, avrai la possibilità di modificare il colore in questione. Puoi modificare i colori di ogni oggetto multi-color slezionandolo e cliccando un colore sulla barra dei colori. Appare in questo modo una finestra di dialogo che ti mostra la serie di colori in uso nell'oggetto; clicca su quello che desideri modificare. Oppure apri il Color editor. La lista che appare in alto include la stessa gamma di colori: seleziona quello che desideri modificare.

Colorazione di foto Se provi a colorare una foto, questa si trasforma in una foto "a mezza tonalità", ad es. se desideri fare una foto in bianco e nero, basta selezionarla nel solito modo e cliccare sul campo dei colori bianco e nero alla fine della barra dei colori. Puoi selezionare come colore scuro o chiaro qualsiasi colore, tranne appunto il bianco e il nero. Nota: se la foto è parte di un gruppo, come accade per molti degli oggetti foto nei modelli o per molte clipart, devi selezionare la foto prima all'interno (sulla pagina 112) del gruppo. Puoi farlo tenendo premuto il tasto Ctrl e cliccando sull'oggetto nello strumento selettore. Un altro modo di selezionare la foto direttamente è cliccare su di essa nello STRUMENTO FOTO.

www.magix.com

Primi passi

Sfumature collegate Puoi creare colori come ombra pi`chiara o più scura di un'altro colore cosi quando modifichi il colore principale anche le ombre si adatteranno. Ad esempio un ombra su un tasto Questo è un semplice rettangolo arrotondato con un colore di riempimento con lo strumento RIEMPIMENTO . Nello strumenti di RIEMPIMENTO puoi cliccare sulla fine o sulle frecce per impostare il colore. Se crei il colore principale verde come colore con nome e poi crei un'ombra più chiara o più scura e quando cambi il colore con nome le ombre verranno adattate.

Per creare un ombra apri i controlli extra nell'editor del colori e seleziona il menu COLORE NORMALE e scegli l'opzione "Ombra di un altro colore".

40 Clicca questo tasto per aprire i controlli extra Ora puoi selezionare una sfumatura piĂš chiara o piĂš scura del colore originale. La crocetta segnala il colore originale. Scegli FORMA da questa lista e quindi il colore da applicare. Puoi anche creare un'ombra che appare sulla Color Line (e la potrai applicare ad ogni altro oggetto). Nel momento in cui decidi di creare un nuovo colore con nome, puoi decidere di collegarlo alla "sfumatura di un altro colore".

Colore di sfondo del browser/pasteboard Colore dello sfondo pagina Puoi cambiare facilmente il colore della PASTEBOARD o dello SFONDO PAGINA trascinando e rilasciando un colore dalla BARRA COLORI o tramite il COLOR EDITOR . Quando crei un nuovo documento ("FILE" > "NUOVO") per impostazione predefinita la pagina si presenta trasparente (nessun colore); si vede solo il colore della pasteboard

www.magix.com

Primi passi dietro di essa che è bianco. Vedrai inoltre anche un leggero contorno guida a forma di rettangolo che mostra i margini della pagina rispetto alla pasteboard. Inoltre, nella GALLERIA DESIGN , è presente una vasta gamma di motivi per sfondi. Per utilizzarli basta una semplice operazione di drag and drop nella pasteboard. Vedi Sfondi per siti web (sulla pagina 267) per maggiori informazioni al riguardo.

La Galleria di design locale La galleria è una memoria locale di contenuti importati dal CATALOGO CONTENUTI (sulla pagina 42). Come implica il nome, questa ti mostra unicamente i contenuti che hai presente localmente sul tuo dispositivo, o perché è installati con il programma usando il CD di backup o perché scaricati dal CATALOGO CONTENUTI ONLINE . Ciò rende più semplice trovare ed accedere a grafiche che usi regolarmente. ONLINE

Per aprire questa galleria: • •

Clicca sulla scheda GALLERIA DI DESIGN LOCALE sulla barra delle gallerie. Oppure seleziona "STRUMENTI" - > "GALLERIE" > " GALLERIA DESIGN" .

42 Le cartelle ai livelli superiori sono suddivise in quattro categorie principali. • • • • •

First Look Componenti Siti web Stampa Presentazioni

Aggiungi più contenuto cercando nelle cartelle e clicca su + PIÙ ONLINE... Ciò aprirà la cartella corrispondente a questa categoria nel CATALOGO CONTENUTI ONLINE, dalla quale potrai importare i contenuti nella GALLERIA DI DESIGN LOCALE.La struttura di cartelle nella GALLERIA DI DESIGN LOCALE rispecchia quella del CATALOGO CONTENUTI ONLINE e ciascuna cartella nella galleria presenta un link che ti permette di arrivare direttamente alla cartella corrispondete nel CATALOGO DEI CONTENUTI ONLINE , così da poter vedere direttamente che altro tipo di contenuto è disponibile in quella cartella. Ogni volta che apri o importi un elemento di design dal catalogo, quel file appare poi nella Galleria e, di conseguenza, lo potrai usare anche quando ti trovi offline. L'elemento importato di fresco sarà anche aperto nel tuo documento attuale. Puoi scaricare un'intera categoria, così da averla a disposizione anche offline, cliccando con il tasto destro del mouse sul nome della categoria nella Galleria e selezionando l'opzione SCARICA TUTTO . La scheda della Galleria ti informa riguardo allo stato di aggiornamento. Per aprire un modello o un elemento di contenuto dalla galleria come nuovo documento, cliccaci sopra due volte. Per importarlo nel tuo documento attualmente aperto, trascinalo e lascialo sopra il disegno. In questo modo al documento corrente verranno aggiunti dei nuovi modelli come nuove pagine. Altri modelli e widget vengono inseriti nella pagina corrente. Consulta Gestione documento (sulla pagina 80) per maggiori informazioni riguardo all'uso delle gallerie in generale.

Il Catalogo Contenuti Online Il catalogo dei contenuti online è essenzialmente uno spazio "cloud" della GALLERIA DI DESIGN LOCALE . Vale a dire che tutto il contenuto è salvato online ed è quindi necessario essere collegati ad Internet per averne accesso ed importare gli elementi nella Galleria di design locale. Il catalogo contiene la biblioteca completa di SmartShapes, simboli, siti web, temi, modelli e widget salvati sul PC come parte di Web Designer e ti offre una modalità semplice ed intuitiva per avere accesso a tutti i contenuti. Quando importi una parte di contenuto dal Catalogo Contenuti, questa viene scaricato nel tuo PC e resta disponibile anche in modalità offline nella Galleria di design locale.

www.magix.com

Primi passi Come aprire il Catalogo Contenuti • •

Clicca su "FILE" > NOVITÀ DAL CATALOGO CONTENUTI" (Shift+Ctrl+Alt+K) Clicca su "INSERISCI" > "DAL CATALOGO CONTENUTI" (Shift+Alt+I)

Il Catalogo Contenuti Online

Il catalogo è una finestra ridimensionabile: trascina i bordi o l'angolo in basso a destra per modificarne le dimensioni. Puoi inserire un termine di ricerca per cercare in tutte o in una sola categoria oppure puoi ricercare direttamente tramite le diverse categorie sulla sinistra. Una piccola anteprima pop up appare mentre scorri sulle categorie: clicca per selezionare e quella categoria si aprirà sul lato a destra. Per le categorie costituite da molti elementi è disponibile un controllo di pagina in alto a destra, che permette di passare da una pagina all'altra del contenuto. Un Catalogo Contenuti Online è incluso gratuitamente per un anno come parte della nostra garanzia di aggiornamento 365 giorni. Cosa offre adesso: • • •

Aggiornamenti periodici dei modelli come parte della garanzia di aggiornamento 365 giorni Ricerca tramite parola chiave completa nell'intero catalogo Una nuova struttura del contenuto più logica per un flusso di lavoro migliore Nella versione di prova, gli elementi di colore blu, posti nella lista contenuti a sinistra, possono essere utilizzati gratuitamente durante tutta la fase di test. Tutti gli elementi in rosso sono immediatamente disponibili dopo aver acquistato e sbloccato il programma.

Foto Trascina un file fotografico dal tuo file explorer sulle foto in Web Designer Se la rilasci sullo sfondo, questa viene importata e posizionata sulla pagina, nel punto in cui l'hai rilasciata. Tutte le foto importate vengono estratte con una larghezza di 500 pixel. Ma queste dimensioni possono essere modificate in ogni momento con il SELECTOR .

Trascina e rilascia la tua foto su una foto esistente per sostituirla. Rilasciala sullo sfondo per importarla come nuova foto

Quando sostituisci una foto esistente lo strumento RIEMPIMENTO viene selezionato e vengono mostrate delle frecce sull'angolo destro della foto. Questo proprio perchĂ¨ la foto Ă¨ come un riempimento dentro la forma. Puoi trascinare le foto per posizionarla altrove o trascinare le frecce del riempimento per modificarne le dimensioni

www.magix.com

Primi passi

Trascina la foto per riposizionarla all'interno della sua cornice. Trascinala in corrispondenza dell'estremità delle frecce per modificarne le dimensioni e ruotarla.

Importazione di grandi foto Quando si importano delle foto ad alta risoluzione (cioè sopra i 1920 pixel sia in altezza che larghezza) in un documento web, MAGIX Web Designer ridimensiona automaticamente l'immagine alla misura HD dello schermo senza chiederti se desideri importare una versione con una risoluzione più bassa. Nel caso di un documento web le dimensioni ridotte non compromettono l'alta qualità delle immagini. Quindi non è necessario importare un documento a piena risoluzione se è destinato al web.

Strumento Foto Lo strumento Foto ti consente di ottimizzare o tagliare foto in diversi modi.

Per ritagliare una foto, basta passare su di essa quando ti trovi nello STRUMENTO DI OTTIMIZZAZIONE FOTO . Puoi modificare il bordi del ritaglio con

le maniglie. Oppure utilizza lo STRUMENTO RITAGLIO per avere maggiore controllo sui tagli. Leggi il capitolo Gestione foto per ricevere informazioni sulla modalità di gestione delle foto di MAGIX Web Designer ed il capitolo Strumento fotografico (sulla pagina 302) sull'utilizzo di questo strumento.

Foto in miniatura con po-up Puoi creare in modo molto semplice piccole foto in miniatura (basta renderle molto piccole) ed ingrandirle nuovamente semplicemente cliccando su di esse. Rimpicciolisci la tua foto normalmente utilizzando lo STRUMENTO SELECTOR . Seleziona la piccola foto in miniatura e seleziona l'opzione FOTO POP-UP nel tabulatore LINK della finestra di dialogo ProprietĂ Web (clicca sul pulsante LINK nella BARRA DEGLI STRUMENTI WEB )

Clicca il tasto IMPOSTAZIONI accanto all'opzione foto popup, per passare alla scheda IMMAGINE della finestra di dialogo delle PROPRIETĂ&#x20AC; WEB .

www.magix.com

Primi passi

Qui puoi modificare la modalità con cui appare il tuo pop-up. Un'opzione ti permette di posizionare un titolo sopra ogni foto pop-up. Immetti il titolo utilizzando il campo TITOLO . Puoi inoltre visualizzare un titolo sotto la foto pop-up. Imposta la DIDASCALIA IMMAGINE (Alt testo) per la miniatura nella stessa finestra di dialogo. Per maggiori informazioni sulle opzioni disponibili vedi il la sezione foto pop-up (sulla pagina 246) del capitolo relativo alla finestra di dialogo delle proprietà web.

Risoluzione foto automatica Quando si importano delle foto ad alta risoluzione (cioè sopra i 1920 pixel sia in altezza che larghezza) in un documento web, MAGIX Web Designer ridimensiona automaticamente l'immagine alla misura HD dello schermo senza chiederti se desideri importare una versione con una risoluzione più bassa. Nel caso di un documento web le dimensioni ridotte non compromettono l'alta qualità delle immagini. Quindi non è necessario importare un documento a piena risoluzione se è destinato al web. Tuttavia quando importi una foto di grandi dimensioni in un documento di stampa o di animazione, MAGIX Web Designer ti chiede se desideri importare con una risoluzione più bassa. Se il tuo documento contiene molte foto potresti scegliere l'opzione con risoluzione ridotta. Altrimenti con foto di grandi dimensioni, il file contenente il progetto potrebbe essere troppo grande (perché comprende una copia di ogni immagine) e la memoria disponibile non sufficiente al caricamento, modifica ed esportazione del documento. Se non sei sicuro se avrai bisogno dell'immagine a risoluzione piena, puoi importarla con le dimensioni originali e modificarla in seguito. Per ottimizzare una foto, clicca con il tasto destro e scegli l'opzione OTTIMIZZA dal menu contestuale. Puoi decidere di

48 ottimizzare tutte le immagini del documento in una sola volta tramite "STRUMENTI" -> "OTTIMIZZA TUTTE LE IMMAGINI". Web Designer salva sempre l'immagine originale importata (la sua versione ridotta, come detto sopra). Questo significa che è possibile cambiare le dimensioni della tua immagine o ritagliarla senza perdita di qualità. Programmname_short> converte automaticamente tutte le foto nella risoluzione corretta per immagini JPEG durante il salvataggio del sito web. Non ti devi preoccupare di dpi, dimensioni, pixel o simili. Quello che vedi su Web Designer (con un livello di zoom al 100%) è esattamente quello che verrà riprodotto sulla tua pagina web. Se desideri cambiare le dimensioni di una foto o di un oggetto in un determinato valore, inserisci le dimensioni richieste nei campi ampiezza e altezza della barra delle informazioni dello STRUMENTO DI SELEZIONE . Se rilasci una foto sulla pagina (senza però sostituire una foto esistente), la sua ampiezza sarà di 500 pixel. Ma se desideri che questa sia larga esattamente 200 pixel, basta inserire il valore 200pix nel campo W delle dimensioni dello STRUMENTO DI SELEZIONE Puoi inserire questo valore in qualsiasi unità di misura, inserendo ad es. il valore 2in, l'ampiezza della foto sarà di 2 pollici.

Text Puoi modificare il testo selezionando lo STRUMENTO TESTO . Hai a disposizione tutte le solite possibilità di elaborazione del testo e puoi incollarlo dalla clipboard di sistema. Con un doppio click selezioni una parola e con un triplo selezioni un'intera riga, che può essere utile per selezionare tutto il testo di un pulsante. Come sempre, la barra informazioni fornisce una vasta gamma di comandi relative a questo strumento. In alternativa puoi cliccare con il tasto destro per selezionare le PROPRIETÀ AVANZATE DEL TESTO .

Il menu font mostra un elenco dei caratteri ed è diviso in tre sezioni. La sezione superiore mostra caratteri già utilizzati nel documento; la seconda sezione mostra caratteri "web safe"; la terza sezione mostra tutti i caratteri installati sul tuo computer.

www.magix.com

Primi passi

Pop-up dimensioni font in tempo reale Font utilizzati nel documento corrente Font web safe Tutti gli altri font Variazioni di stile disponibili per il font selezionato Non tutti i caratteri dispongono di queste variazioni. Nel menu puoi selezionare i font in tempo reale. Mentre scorri il menu, il testo selezionato cambia font permettendoti di vedere un'anteprima immediata di come apparirà nel documento.

Dimensioni dei caratteri Il campo delle dimensioni dei caratteri mostra le dimensioni dei caratteri in pixel, dato che questo è il metodo più affidabile di impostare le dimensioni del testo per l'uso in Internet. Puoi però inserire ogni dimensione in punti (o qualsiasi altra unità), inserendo un valore con pt (che sta per punto), ad es. 72pt o 1cm, che verrà poi convertito nella corretta dimensione indicata in pixel.

Utilizzare i font del tuo sito web I font della sezione web safe possono essere utilizzati senza problemi nei siti web perché riconosciuti dalla maggior parte di computer e dispositivi Puoi anche utilizzare le centinaia di font di Google in quanto vengono scaricati automaticamente dal browser quando qualcuno visita il tuo sito Puoi utilizzare altri font che hai installato e che vengono integrati automaticamente nel sito web se la relativa licenza lo permette. Per maggiori informazioni consulta il capitolo Trattamento Testo Se trasformi un oggetto di testo in un elemento grafico, puoi utilizzare qualsiasi tipo di font. Vedi la sezione Gruppi (sulla pagina 58) sotto, per maggiori dettagli.

Creazione di nuovi oggetti di testo Esistono tre tipi di oggetti di testo: una riga singola di testo, una colonna di testo o un'area di testo rettangolare. Per creare una riga semplice di testo, seleziona lo strumento "testo"; potrai così cliccare in qualsiasi punto dello sfondo ed iniziare a digitare. Per creare una colonna, clicca e trascina orizzontalmente sullo sfondo e comincia a scrivere. Puoi regolare l'ampiezza della colonna in qualsiasi momento. Per creare un'area di testo, clicca e trascina diagonalmente. Puoi regolare l'ampiezza e l'altezza di un'area di testo.

Testo ruotato Stranamente (unicamente per uno strumento di web authoring) puoi ruotare qualsiasi oggetto di testo, persino colonne di testo utilizzando l'opzione di rotazione del selettore. Ma dal momento in cui i browser web non supportano il testo ruotato, Web Designer converte qualsiasi testo ruotato in una grafica, quando la pagina viene esportata come sito web.

Elenchi puntati e numerati Usa gli appositi comandi nello strumento TESTO per inserire rapidamente le liste numerate o puntate. Cliccando con il tasto destro del mouse accedi al menu contestuale dal quale puoi scegliere PROPRIETÀ ELENCO... e modificare lo schema numeri della lista. Puoi anche utilizzare delle grafiche per avere elenchi numerati o puntati. Per maggiori informazioni, vedi il capitolo Strumento Testo (sulla pagina 183).

Sfumature delicate, Riempimento a colori del testo, Testo trasparente Puoi applicare questi effetti utilizzando gli strumenti appropriati. Ad esempio se trascini il testo nello strumento di riempimento darà un colore progressivo, o se lo trascini con lo strumento Sfumatura darà come risultato una sfumatura tenue. In tutti questi casi Web Designer convertirà automaticamente il testo in una grafica sul tuo sito web esportato.

www.magix.com

Primi passi

Testo fluttuante intorno agli oggetti Se clicchi con il tasto destro su un oggetto come una foto e selezioni l'opzione "TESTO (sulla pagina 204)" puoi far scorrere il testo intorno all'oggetto che è in cima al testo.

FLUTTUANTE IN BASSO

Molti oggetti come foto, pannelli, pulsanti e intestazioniusati nei modell delCATALOGO CONTENUTI ONLINE (sulla pagina 42) sono automaticamente repellenti e cioè il testo fluttua intorno a questi oggetti quando li trascini. Gli oggeti repellenti respingono solo i testi che si trovano dietro l'oggetto e quindi sarà necessario portare in primo piano glioggetti. In aternativa, se vuoi che un oggetto respinga il testo su un unico layer, lo puoi porre al di sotto, in modo che non respinga il testo. Vedi Proprietà del layer (sulla pagina 345). Tutte le operazioni nello STRUMENTO TESTO avvengono in tempo reale. Il testo compie di nuovo l'azione se effettui modifiche. Nota: adesso puoi anche far fluttuare il testo intorno agli oggetti ancorati (sulla pagina 51).

Oggetti ancorati Se vuoi che un oggetto grafico appaia in una precisa parte del campo di testo puoi ancorare l'oggetto al testo in modo che si muovano insieme. Clicca con il tasto destro e scegli l'opzione ANCORA AL TESTO . Con l'uso del SELECTOR clicca e trascina il simbolo as ancora he appare in alto a sinistra dell'oggetto, nel punto dove desoderi che l'oggetto sia ancorato.. Se sposti o elabori il testo l'oggetto ancorato segue il punto al quale e legato.

Campi di testo Proprio nel momento in cui i pulsanti della galleria dei Design si allungano per adattarsi al testo, alcuni campi di testo possono adattarsi alla larghezza o alla lunghezza del testo inserito in essi.

Lo sfondo del campo varia per adattarsi a blocchi di testo più lunghi e larghi.

Puoi regolare l'ampiezza di una colonna di testo selezionando lo strumento di testo e trascinando la colonna in corrispondenza delle maniglie (sotto la prima riga di testo). Nella maggior parte dei modelli della galleria dei design vi sono un paio di campi di testo che hanno a che fare con l'argomento in questione. Alcuni campi di testo possono estendersi solo verticalmente, altri verticalmente ed orizzontalmente. Per creare pulsanti o campi di testo estendibili, utilizza un pulsante o un campo di testo presente nella galleria dei design ed adattalo colorandone nuovamente lo sfondo o regolando il colore, le dimensioni e l'ampiezza del testo. Nota: puoi creare nuovi componenti estendibili utilizzando Xara Xtreme Pro.

Controllo ortografico Sulla barra delle informazioni dello STRUMENTO TESTO vi è un pulsante che seleziona le opzioni e la lingua del controllo ortografico. Selezionando l'opzione CONTROLLA ORTOGRAFIA AL MOMENTO DELL'INSERIMENTO , tutte le parole sconosciute vengono contrassegnate da una sottolineatura rossa tratteggiata. Clicca con il tasto destro del mouse su ogni parola contrassegnata per visualizzare i suggerimenti alternativi.

Caratteri inseriti Web Designer memorizza le forme di tutti i caratteri utilizzati nel tuo documento. Ciò significa che se dai a qualcun altro il tuo file o trasferisci il file ad un altro computer, su quel computer verrà visualizzato esattamente ciò che tu vedi sul tuo, persino se su quel computer non sono installati i caratteri corretti. Ciò vale però solo per i caratteri utilizzati nel documento (non viene incluso alcun carattere completo). Pertanto, può essere che nei computer in cui mancano dei caratteri, al nuovo testo inserito manchino le forme corrette dei caratteri.

www.magix.com

Primi passi

Consiglio: ci sono diversi comandi veloci disponibili nello strumento di testo. Consulta la sezione sui comandi veloci presenti sulla tastiera (sulla pagina 395) per visualizzarli tutti. Uno comando veloce utile per sperimentare layout di pagina è Ctrl+Shift+L, con cui puoi inserire testi casuali in pseudo-latino.

Dimensioni pagina Le pagine della GALLERIA DESIGN sono disegnate in modo tale che la loro larghezza si adatti alla maggior parte degli schermi di computer. Si consiglia di non creare pagine più ampie; anche se dovessi disporre di un computer con lo schermo più grande, l'esperienza insegna che la maggior parte degli utenti preferisce avere una pagina con un'ampiezza fissa. Comunque puoi regolare le dimensioni della pagina secondo la tua convenienza. Puoi impostare qualsiasi dimensione pagina selezionando la scheda PAGINA della (clicca con il tasto destro del mouse e scegli OPZIONI DI PAGINA oppure la stessa voce dal menu FILE ). Si raccomanda di non impostare l'ampiezza della pagina con più di 990 pixel, dal momento che questa è l'ampiezza massima per molti schermi di computer (1024 meno una piccola quantità riservata alla barra di scorrimento). La tipica ampiezza di pagina si aggira intorno agli 800 pixel. FINESTRA DELLE OPZIONI

Puoi regolare direttamente l'altezza della tua pagina semplicemente trascinando il margine inferiore della pagina. Selezionando a tale scopo lo STRUMENTO DI SELEZIONE e puntando l'indicatore del mouse sul bordo inferiore della pagina, l'indicatore cambia aspetto in modo che tu possa modificare l'altezza della pagina trascinando il bordo stesso.

Modifica delle dimensioni pagina dei modelli Puoi modificare le dimensioni verticali dei modelli predefiniti, semplicemente trascinando il bordo inferiore della pagina. Mentre esegui questa operazione gli oggetti a piè di pagina rimarranno automaticamente nella parte inferiore della pagina e i pannelli di sfondo si allungheranno automaticamente di modo che la sua struttura venga mantenuta con qualsiasi lunghezza.

Salvataggio del lavoro. Creazione di un sito web Usa le opzioni di menu SALVA o SALVA CON NOME per salvare il tuo lavoro non ancora completato. In questo modo salvi un file con l'estensione .web, che è il formato di file originale di Web Designer (non si tratta di un sito web). Si raccomanda di salvare regolarmente il proprio lavoro. Se desideri modificare o aggiornare il tuo sito web in futuro devi salvare un file .web in questo modo ed effettuare ulteriori aggiornamenti. Inoltre consigliamo di lavorare mantendo attiva la funzione automatica di back up. Questa funzione è regolabile dalla tab Backup del dialogo STRUMENTI->OPZIONI. Se attiva verrà effettuato regolarmente un backup dei tuoi documenti aperti modificati. Qui puoi anche scegliere come deve comportarsi il programma quando viene chiuso. Ti può venire richiesto di salvare o eliminare ogni documento aperto modificato oppure tutti i documenti verranno salvati nella posizione di backup e ripristinati nel successivo avvio del programma. Per salvare il tuo sito web, costituito dai file HTML e dagli altri file ad essi associati da pubblicare in rete, utilizza l'opzione di menu "esporta sito web" o clicca su questo pulsante posto sulla barra superiore del sito web. Creerai così un file .htm per ogni pagina ed una cartella che contiene tutti i file grafici presenti nel tuo sito web. Quando esporti un sito web, tutte le pagine vengono esportate simultaneamente ed al nome dato per l'esportazione viene aggiunta l'appendice _1, _2 ... alla fine del nome del file assegnato al momento dell'esportazione. La cartella _files contiene tutte le grafiche e gli altri file che compongono il tuo sito web. Puoi assegnare un nome ad ogni singola pagina utilizzando il tab PAGINA del dialogo delle PROPRIETÀ DEL WEB oppure puoi far uso della Galleria pagine & layer (sulla pagina 337) Il nome di default dato al tuo sito web è index.htm, dato che questo è il nome usuale per la prima pagina di un sito web. Puoi visualizzare in anteprima il sito web da te salvato in qualsiasi browser web, trascinando il file index.htm (o qualsiasi altro .htm) dal tuo Windows File Explorer in una finestra browser.

Backup automatico Nella sezione backup (STRUMENTI > OPZIONI) è possibile attivare o disattivare la funzione di backup automatico. Questa funzione salva ad intervalli regolari una copia di sicurezza del tuo documento. Si consiglia di tenere attivata questa funzione. Puoi anche decidere se devi venire informato se ci sono dei documenti che non sono stati salvati al momento della chiusura del programma o se tutti i documenti aperti devono venir salvati e conservati fino al nuovo avvio del programma. Vedi il capitolo Utilizzo dei documenti (sulla pagina 95) per maggiori dettagli su questa funzione.

www.magix.com

Primi passi

Oggetti stretch Molti degli oggetti grafici, come pulsanti stretch e campi di testo, possono essere adattati automaticamente alle loro dimensioni, a seconda della grandezza o della lunghezza del testo. Molte serie di modelli e tutti i pulsanti della cartella "ELEMENTI DI PAGINA E WIDGET" > "PULSANTI" nella GALLERIA DESIGN sono presenti nelle versioni con ampiezza fissa e variabile. Nel momento in cui si crea una fila di pulsanti (di solito costituita da una raccolta orizzontale o verticale di link o pulsanti), si raccomanda di adottare la stessa larghezza per tutti, in modo che abbiano le stesse dimensioni.

Allo stesso modo, molti dei campi laterali o di testo presenti nei modelli, e talvolta l'area di testo principale, possono regolare le loro dimensioni verticali e quelle orizzontali. Nel caso dei campi di testo, puoi regolare la larghezza della colonna nello STRUMENTO TESTO , trascinandola in corrispondenza dell'estremitĂ sinistra o destra dell'indicatore della colonna.

Link, Pulsanti & Barre di navigazione Puoi aggiungere un link web a qualsiasi oggetto, pulsante grafica o testo. Seleziona l'oggetto e clicca sull'icona del link posta in alto, per inserire l'indirizzo che desideri collegare tramite link.

Inserisci nel campo evidenziato l'indirizzo web che desideri collegare.

La scheda link nella finestra di dialogo Proprietà del sito, ti consente di controllare ciò che succede quando clicchi sull'oggetto collegato tramite link sulla pagina. Puoi saltare da una pagina web all'altra (puoi rimandare rapidamente ad ogni altra pagina del tuo sito web, utilizzando il menu a tendina COLLEGAMENTO ALLA PAGINA TRAMITE LINK ) e scegliendo se aprire la pagina in una finestra separata. Puoi anche collegare tramite link i layer pop up che hai creato. Per assegnare la funzione di link ad uno dei tuoi pulsanti, basta selezionarlo (cliccandoci sopra con lo STRUMENTO DI SELEZIONE ), cliccare sull'icona ed inserire l'indirizzo web, oppure selezionare una delle pagine del menu a tendina e cliccare su APPLICA . Ecco fatto!

Collegamento tramite link ad un'ancora Puoi creare un link ad un testo o ad un oggetto in qualsiasi punto del tuo sito web, utilizzando delle "ancore". Devi prima applicare un nome all'oggetto che desideri collegare tramite link. Questo viene detto "ancora". Seleziona prima l'elemento (che può essere una grafica o un testo) e poi il menu SERVIZI -> NOMI... per visualizzare la finestra di dialogo dei nomi. Inserisci un nome a piacere e clicca su AGGIUNGI. Per collegare tramite link l'ancora da qualsiasi punto del tuo sito web (un pulsante o sempllicemente un testo) apri la finestra di dialogo del link (mostrata sopra) e seleziona il nome dalla lista dei nomi a tendina "COLLEGAMENTO ALL'ANCORA TRAMITE LINK ".

www.magix.com

Primi passi

Collega a file Potresti voler inserire sulla tua pagina un video o altri file. Per questo usa la funzione COLLEGA A FILE . Seleziona l'oggetto o gli oggetti sulla pagina dove desideri inserire il link. Quindi d'opzione Collega a file cerca il file che vuoi collegare. Viene poi aggiunta una copia del file nella cartella del design e questo verrà poi esportato e pubblicato con la pagina. Alla cartella viene dato il nome del design con l'aggiunta di "_files". Clicca su OK per visualizzare un anteprima della pagina dove potrai verificare il funzionamento del Link. Se vuoi cambiare il file linkato esegui lo stesso procedimento e scegli un altro file. Vedi il capitolo delle PROPRIETÀ WEB per maggiori informazioni su questa funzione ed il capitolo Lavorare con i documenti per saperne di più riguardo alle cartelle di supporto.

Modifica del testo del tasto Per modificare il testo di un pulsante, seleziona lo STRUMENTO DI TESTO° e clicca sul testo che desideri modificare. Click triplo sul testo del tasto e clicca poi sull'intera linea del testo per sostituire durante la digitatura.

Pulsanti mouse over (rollover) Avrai notato che la maggior parte dei pulsanti viene evidenziata nel momento in cui punti l'indicatore del mouse su di loro nel tuo browser. Questo effetto viene chiamato mouseover o (a volte) rollover. È automatico per la maggior parte dei pulsanti utilizzati nei modelli o presi dalla sezione pulsanti del CATALOGO CONTENUTI ONLINE (sulla pagina 42). Ma puoi anche creare dei tasti con funzione mouse-over personalizzati. Consulta la sezione Layer.

Aggiunta di nuovi pulsanti Nel CATALOGO CONTENUTI ONLINE (sulla pagina 42), ogni tema ha una collezione di grafiche per i pulsanti che puoi semplicemente trascinare sulla pagina. Di solito ci sono due tipi di pulsanti. Quelli chiamati Pulsanti stretch si allungano per adattarsi al testo dell'etichetta. In aggiunta, alla voce COMPONENTI si trova una categoria di pulsanti, che contiene una collezione di design per pulsanti, che può essere aggiunta nello stesso modo alla tua pagina. Oppure puoi copiare un pulsante già esistente. Puoi applicare il copia/incolla e per maggiore rapidità puoi trascinare tenendo premuto il tasto destro del mouse. (si tratta di un comando veloce generalmente utilizzato per copiare qualsiasi oggetto). Ora puoi elaborare il testo ed il link come desideri.

58 Consiglio: se tieni premuto il tasto "Ctrl" mentre trascini il pulsante, questo verrà trascinato in maniera perfettamente orizzontale o verticale, rendendo davvero semplice la creazione di una fila di colonne di pulsanti.

Barre pulsanti (NavBars) La maggior parte dei siti web e dei modelli di design che forniamo sono provvisti di una riga o una colonna per la navigazione nel sito e in altri punti. Questa viene chiamata barra di navigazione; MAGIX Web Designer include un supporto speciale per queste barre. Per elaborare una barra di navigazione clicca due volte su la stessa o clicca con il tasto destro e scegli l'opzione ELABORA BARRA DI NAVIGAZIONE del menu contestuale. Si apre quindi il dialogo della barra di navigazione. Da qui puoi cambiare i tasti, i link ed i tootip, aggiungere o cancellare, riordinare i menu o aggiungerne di nuovi. Se clicchi due volte sul campo della URL, si apre un dialogo che è lo stesso utilizzato per l'impostazione del link su un oggetto normale come descritto in precedenza in questo capitolo e più dettagliatamente nel dialogo delle proprietà web. Poiché non puoi applicare un effetto di transizione sul link di una barra di navigazione, i comandi della transizione del link sono di colore grigio. Nel dialogo delle proprietà della barra di navigazione puoi attivare l'opzione BARRA DI NAVIGAZIONE DEL SITO . In questo modo la barra compare automaticamente sulle pagine nuove che hai aggiunto; tasti e link vengono aggiunti automaticamente alla barra su ogni nuova pagina. Tuttavia non puoi modificare la barra sulla tela quando questa opzione è attiva, ma solo tramite questo dialogo. Per aggiornare una barra di navigazione posta su tutte le pagine, qualora non sia una barra di navigazione per sito automatica, clicca con il tasto destro e scegli RIPETI SU TUTTE LE PAGINE . Questa opzione rende la barra pulsanti un oggetto ripetuto e la copia dalla pagina corrente su tutte le altre pagine. Leggi il capitolo riguardante le barre di navigazione (sulla pagina 312) per maggiori dettagli a riguardo.

Gruppi Puoi raggruppare qualsiasi selezione di oggetti presenti sulla pagina. I gruppi funzionano come singoli oggetti, in modo tale da poter essere trascinati lungo la pagina, modificati nelle dimensioni e ruotati, come se fossero un solo oggetto. Molti elementi di modelli presenti nella GALLERIA DESIGN, come pulsanti, campi di testo ed oggetti fotografici sono elementi raggruppati.

www.magix.com

Primi passi Ad esempio puoi disegnare un semplice pulsante da zero, disegnando un rettangolo con lo STRUMENTO RETTANGOLO e posizionando poi un'etichetta di testo al di sopra con lo STRUMENTO TESTO . Si tratta di oggetti separati che puoi spostare indipendentemente l'uno dall'altro con lo STRUMENTO DI SELEZIONE. Ma se selezioni entrambi con lo STRUMENTO DI SELEZIONE (puoi anche trascinare una casella intorno ai due elementi in modo da includerli o puoi tener premuto il tasto "Shift "mentre clicchi sui singoli oggetti), clicchi con il tasto destro e scegli RAGGRUPPA (o premi "Ctrl+G" o utilizzi il menu "ORDINA" > "RAGGRUPPA" ), essi diventano un oggetto raggruppato (nota: la barra di stato posta in basso indica sempre ciò che è selezionato). Se ora sposti questo oggetto, lo ruoti o ne modifichi le dimensioni, tutte le parti componenti il gruppo vengono spostate e trasformate come se fossero un unico oggetto. Importante: gli oggetti raggruppati solitamente vengono convertiti in un singolo oggetto grafico nel momento in cui esporti la tua pagina web. Nel momento in cui sciogli il gruppo (clicca con il tasto destro e scegli SCOMPONI o premi "Ctrl+U"), puoi accedere nuovamente a tutte le parti del tuo gruppo, per effettuare qualsiasi modifica. A volte, in alternativa, è possibile modificare gli elementi direttamente dentro un gruppo. Ad esempio, utilizzando lo STRUMENTO TESTO per modificare il testo o lo strumento foto per modificare una foto; basta un click per selezionare automaticamente l'elemento all'interno del gruppo GRUPPO

Cambia o modifica un colore separato utilizzato in un gruppo selezionandolo e cliccando su un colore della barra colori. In alternativa puoi aprire il Color Editor. Vedi la sezione Sostituire colori per maggiori informazioni.

Conversione del testo in una grafica Come già accennato precedentemente, nei browser web è disponibile solo un numero limitato di caratteri. Se vuoi utilizzare un carattere diverso su un pulsante o come intestazione, puoi farlo trasformandolo in una grafica e tutto ciò che devi fare è raggruppare l'oggetto affinchè ciò avvenga automaticamente. Puoi ancora modificare il testo all'interno del gruppo, anche se i gruppi vengono convertiti automaticamente in una grafica quando il sito web viene esportato.

Dunque non devi far altro che includere un carattere come questo per raggrupparlo. Non deve essere raggruppato con niente altro; puoi raggrupparlo con se stesso, semplicemente selezionando RAGGRUPPA dal menu DISPONI o premendo "Ctrl+G".

60 Nota tecnica: quando questi gruppi vengono esportati come immagini su una pagina web, i testi contenuti vengono utilizzati come testi HTML "Alt" sull'immagine (a meno che non abbia impostato tu stesso un testo Alt). Ciò significa che il testo verrà preso ancora dai motori di ricerca e da strumenti di "lettura ad alta voce" utilizzati dai non vedenti anche se il testo non appare direttamente sulla pagina web. Se non desideri che il testo Alt venga impostato in questo modo, puoi annullare questa operazione specificando per il gruppo un altro testo Alt sulla scheda dell'immagine degli Strumenti > Finestra di dialogo delle proprietà web.

Gruppi leggeri C'è un altro tipo di gruppo detto "Soft", un set di oggetti collegati in maniera più blanda. Per maggiori dettagli vedi il capitolo Utilizzo degli oggetti (sulla pagina 135).

Testi sincronizzati Esiste anche un'altra applicazione molto interessante per i gruppi soft. Se hai lo stesso testo su due o più oggetti all'interno di un gruppo soft il testo verrá sincronizzato quando lo elabori. Questo meccanismo viene usato per mantenere lo stesso testo del tasto su sia sul tasto normale che su quello mouse over.

Oggetti ripetuti È comune che su tutte le pagine del documento siano presenti elementi come tasti di navigazione, intestazioni o loghi che si ripetono. MAGIX Web Designer ha la capacità di far ripetere qualsiasi elemento nello stesso posto su tutte le tue pagine web. Quando aggiorni una delle copie, puoi riprodurre le stesse modifiche su tutte le pagine. Per maggiori dettagli vedi la sezione Oggetti ripetuti (sulla pagina 142) del capitolo Gestione oggetto.

Strumenti per il disegno Web Designer fornisce tutti gli strumenti grafici di cui hai bisogno per creare qualsiasi oggetto grafico sulla tua pagina web, nonché una serie di elementi grafici già pronti nella Galleria Design. Hai a disposizione tre strumenti di disegno base che ti consentono di creare rettangoli, ellissi o altre forme.

Web Designer fornisce anche strumenti per la grafica vettoriale che ti consentiranno di modificare le dimensioni, i contorni e i colori senza perdita di qualità. Puoi zoomare quasi infinitamente e tutte le azioni sono annullabili.

www.magix.com

Primi passi Per disegnare un rettangolo, seleziona lo strumento RETTANGOLO e trascinalo attraverso la pagina. In questo modo crei un rettangolo nero. Clicca il tasto "Angoli curvi" sulla Infobar per ottenere un rettangolo stondato. Per ottimizzare l'arrotondamento puoi trascinare le maniglie.

Trascina una delle maniglie poste all'angolo, per modificare le dimensioni di un oggetto.

Con la funzione di drag & drop, trascina un colore dalla BARRA DEI COLORI sopra il tuo oggetto per colorarlo. Vedi Colorazione delle forme (sulla pagina 38). Con lo STRUMENTO DI SELEZIONE puoi trascinare, ridimensionare e ruotare l'oggetto che hai creato come desideri. Vedi Strumento di selezione (sulla pagina 30). Puoi posizionare questo rettangolo dietro a tutti gli oggetti, come un'immagine di sfondo, premendo Ctrl+B per "Porta sullo sfondo". In alternativa, se l'oggetto si trova davanti a tutti gli altri (Ctrl+F) potrai fare clic con il tasto destro del mouse sull'oggetto e selezionare "RESPINGI TESTO SOTTOSTANTE" per far sĂŹ che il testo sulla pagina scorra intorno ai bordi della forma (un altro Web Designer prima per qualsiasi strumento di web authoring). Lo STRUMENTO DI MODIFICA DELLA FORMA ti consente di create delle forme vettoriali dettagliate e di modificarne il contorno. Per le forme preimpostate, come per esempio rettangoli o ellissi, o se desideri modificare i contorni del carattere del testo, dovrai prima convertire l'oggetto in una forma modificabile. Potrai eseguire questa operazione selezionando i tasti Ctrl+1 della tastiera. A questo punto puoi usare lo strumento di modifica delle forme per eseguire le varie modifiche vettoriali. Consulta la sezione referenze (sulla pagina 149) per scoprire come usare tanti strumenti molto potenti.

Attributi correnti (stili) Un "attributo" è una caratteristica di un oggetto che puoi modificare su MAGIX Web Designer. Per esempio, gli attributi di una forma includono il suo colore, contorno e colore del contorno stesso. Come già detto sopra, puoi modificare gli attributi di un oggetto dopo averlo disegnato selezionandolo e modificando il suo colore di riempimento, larghezza della linea o qualsiasi altro attributo. MAGIX Web Designer memorizza anche gli attributi "correnti" che sono quelli che vengono applicati agli oggetti appena disegnati al momento della loro creazione.

Impostazione manuale degli attributi correnti Se, per esempio, desideri che il rettangolo successivo che disegni sia di colore rosso, assicurati di non aver selezionato nessun elemento (premi Esc o clicca su una parte vuota della pagina) e poi clicca sul rosso nella barra dei colori. Adesso, il colore di riempimento corrente impostato è il rosso. Ora quando disegni una nuova forma, questa sarà di colore rosso. Puoi impostare altri attributi correnti nello stesso modo: prima ti assicuri che non ci siano elementi selezionati e poi modifichi il valore dell'attributo.

Impostazione automatica degli attributi correnti Come impostazione predefinita, MAGIX Web Designer aggiorna automaticamente gli attributi correnti perché si accordino con l'ultimo oggetto disegnato o selezionato. Se, per esempio, disegni un rettangolo e lo fai di colore verde, la forma successiva che disegnerai sarà dello stesso colore. Se nel tuo progetto hai un rettangolo di colore blu e desideri disegnarne un altro uguale, per prima cosa seleziona il rettangolo blu (questo rende i suoi attributi "correnti") e anche il rettangolo successivo sarà di colore blu. Quindi, con un semplice click su un oggetto puoi impostare gli attributi correnti perché concordino con esso. Questo ti permette di utilizzare gli oggetti esistenti come una "tavolozza" degli stili disponibili. Clicca su un oggetto per selezionarlo e poi disegna nuovi oggetti con quello stile. Puoi disattivare questa funzione tramite il TABULATORE GENERALE (sulla pagina 366) della finestra di dialogo STRUMENTI->OPZIONI. Seleziona l'opzione ASSEGNA AI NUOVI OGGETTI GLI ATTRIBUTI PIÙ RECENTI (GNOMRA). Ora gli attributi più recenti cambiano solo se li imposti manualmente come descritto sopra.

www.magix.com

Primi passi

Gruppi di attributi Molte grafiche sono costituite da una combinazione di forme chiuse piene e di forme aperte (linee in cui i punti di inizio e fine non sono coincidenti). Di solito, non è conveniente utilizzare gli attributi di una forma aperta su una chiusa o viceversa. Quindi, gli attributi di forme aperte e chiuse vengono tenuti separati e sono chiamati gruppi di attributi. Quando si impostano i valori di un gruppo, quelli dell'altro gruppo non vengono alterati. Di conseguenza, se si seleziona un rettangolo pieno senza contorno, ciò non provoca la modifica della larghezza di linea corrente a zero nel caso di forme aperte. Allo stesso modo, gli strumenti di testo costituiscono un terzo gruppo. Il gruppo degli attributi di testo viene impostato solo quando selezioni oggetti di testo o se imposti gli attributi manualmente mentre ti trovi nello strumento di testo.

Escludere gli attributi Alcuni attributi non vengono impostati come correnti automaticamente, anche quando l'opzione "Applica ai nuovi oggetti gli attributi più recenti" è attiva. Questo perché alcuni attributi possono creare dei problemi. Altri attributi possono influenzare negativamente il modo in cui i design eseguono l'esportazione o possono aumentare significativamente il tempo necessario per rendere il design e per questo motivo non dovrebbero essere applicati se non è necessario. Esempi di attributi copiati automaticamente: •

Colori di riempimento, stili di riempimento, larghezze di linee, barra dei colori, stile delle linee, stile della giunzione delle linee, testa/coda delle frecce, dimensioni dei font del testo, margini del testo.

Esempi di attributi che non possono essere copiati automaticamente: •

Trasparenza, ombra

Resetta attributi correnti Puoi resettare tutti i gruppi di attributi correnti immediatamente premendo ESC, se non ci sono oggetti selezionati. Se sono stati selezionati degli oggetti, premendo "Esc" la selezione verrà cancellata; premi nuovamente Esc per riportare gli attributi correnti sui loro valori standard.

Strumento forma Lo STRUMENTO SHAPE EDITOR ti consente di creare delle forme vettoriali dettagliate e di modificarne il contorno. Per le forme preimpostate, come per esempio rettangoli o ellissi, o se desideri modificare i contorni del carattere del testo, dovrai prima convertire l'oggetto in una forma modificabile. Potrai eseguire questa operazione selezionando i tasti "Ctrl+1" della tastiera. A questo punto puoi usare lo STRUMENTO SHAPE EDITOR per eseguire le varie modifiche vettoriali. Consulta la sezione referenze (sulla pagina 149) per scoprire come usare tanti strumenti molto potenti.

Lo Strumento linea retta & freccia Lo STRUMENTO LINEA RETTA & FRECCIA rende piĂš facile tracciare singoli segmenti di linee rette o aggiungere delle teste di freccia o code ad ogni tipo di linea. Basta un clic e trascinare sulla pagina per disegnare una linea retta. Puoi cliccare su qualsiasi linea esistente per selezionarla e una volta selezionata puoi cliccare e trascinare su entrambe le estremitĂ per spostare la fine della linea.

Aggiungere teste o code di frecce con lo strumento Linea retta La barra informazioni ha sulla sinistra due elenchi a tendina che ti permettono di scegliere uno stile di testa di freccia o coda per ogni ogni estremitĂ finale della linea selezionata.

www.magix.com

Primi passi indicato dallo slider delle dimensioni. Se allarghi la linea anche la testa di freccia si aggiorna in accordo. Inserisci quindi un valore minore del 100% per ridurre le dimensioni della testa di freccia (e della coda), o pi첫 grande del 100% per aumentarla. Anche se lo slider accetta un valore fino ad un massimo di 800% puoi inserire, nel campo di testo delle dimensioni, valori percentuali pi첫 grandi

Inverti percorso Premi il pulsante Inverti percorso sulla barra informazioni per passare sulla testa e sulla coda della linea selezionata.

Aggiungere pi첫 segmenti di linea Ovviamente le linee create con lo STRUMENTO LINEA RETTA sono compatibili con altri strumenti da disegno. Per cui se desideri aggiungere pi첫 segmenti ad una linea, renderla curva oppure trasformala in una forma chiusa, utilizza lo strumento EDITOR FORME .

Strumento rettangolo Per disegnare un rettangolo, seleziona lo strumento RETTANGOLO e trascinalo attraverso la pagina. Mentre trascini lungo la pagina, compare una forma piena e compatta che indica il colore di riempimento e di linea e i margini della forma che stai disegnando. Clicca il tasto "Angoli curvi" sulla Infobar per ottenere un rettangolo stondato. Per ottimizzare l'arrotondamento puoi trascinare le maniglie

Trascina una delle maniglie poste all'angolo, per modificare le dimensioni di un oggetto.

Con la funzione di drag & drop, trascina un colore dalla Barra dei colori, sulla forma per ricolorarla. Vedi la sezione Colorazione delle forme (sulla pagina 38). Con lo STRUMENTO SELECTOR puoi trascinare, ridimensionare e ruotare l'oggetto che hai creato, come desideri. Vedi la sezione Strumento Selector (sulla pagina 30) Puoi posizionare questo rettangolo dietro a tutti gli oggetti, come un'immagine di sfondo, premendo Ctrl+B per "Porta sullo sfondo". In alternativa, se l'oggetto si trova davanti a

66 tutti gli altri ("Ctrl+F") potrai fare clic con il tasto destro del mouse sull'oggetto e selezionare RESPINGI TESTO SOTTOSTANTE per far sì che il testo sulla pagina scorra intorno ai bordi della forma (un altro Web Designer prima per qualsiasi strumento di web authoring).

Strumento di riempimento Qui puoi semplicemente inserire un riempimento colore su una forma usando questo strumento (e molti altri). Seleziona lo strumento e trascinalo sull'oggetto. La freccia di riempimento può essere regolata trascinando le frecce per alterare l'angolo della direzione ed estendere la graduazione.

Rettangolo stondato con riempimento graduato

Nota: se trascini con lo strumento per il riempimento sugli elementi raggruppati come il pannello testo, tutti gli elementi del gruppo avranno lo stesso stile di riempimento. Per evitare questo è necessario per prima cosa selezionare l'elemento che vuoi riempire. Questa operazione la puoi eseguire in diversi modi. Un singolo click sull'elemento con lo strumento per il riempimento seleziona solo quell'elemento come un click sul Selector tenendo premuto il tasto Ctrl (Questo comando si chiama Seleziona dentro per seleziona solamente il singolo elemento all'interno del gruppo). Con il trascinamento questo riempirà solo l'oggetto selezionato. Per elaborare l'inizio o colorare il riempimento trascina un colore dalla linea sulla forma o clicca sulla fine della freccia di riempimento nello strumento di riempimento e usa il Color Editor (Ctrl+E). Puoi creare un riempimento multi-stage graduato assicurandoti che la freccia sia visibile (selezionala con lo strumento di riempimento) trascina quindi un colore dalla Color Line e portalo della linea della freccia dove vuoi avere il nuovo colore. Puoi quindi trascinare questo punto di riempimento o selezionare Ctrl+E per regolare il colore usando il Color Editor. Ci sono differenti stili di riempimento per esempio questo è un cerchio con un riempimento circolare.

www.magix.com

Primi passi

L'ombra è un'altra ellisse con un riempimento del colore graduato.

Strumento trasparenza

I browser moderni supportano effetti di trasparenza avanzati, e lo stesso vale per Web Designer. Puoi regolare la trasparenza di qualsiasi oggetto grafico o foto per renderlo trasparente. Prova con il rettangolo che hai creato come esempio. Seleziona lo strumento Trasparenza ed esegui la regolazione dallo slider grande posto sulla InfoBar. Inoltre, Web Designer supporta la trasparenza graduata. Questa funzione è molto simile a quella del riempimento colore graduato. Nello strumento trasparenza, trascina l'oggetto per vedere le sfumature di trasparenza. Potrai regolare il grado di trasparenza di ciascuna estremità della freccia di riempimento cliccando su ognuna delle frecce e agendo sul regolatore della Trasparenza. Lancia l'anteprima per vedere questo effetto "già all'opera" nel tuo browser.

Strumento ombra Un effetto grafico molto diffuso consiste nella creazione di una delicata sfumatura posta al di sotto di una grafica o di un testo. Questo effetto serve a far risaltare l'oggetto rispetto allo sfondo su cui è posto. Lo STRUMENTO OMBRA ti consente di arricchire qualsiasi oggetto, testo, grafica o foto con una sfumatura tenue. Seleziona lo STRUMENTO OMBRA e trascinalo sull'oggetto. Puoi regolare la definizione e la trasparenza dell'ombra utilizzando i comandi della barra informazioni.

Testo con ombra soffusa.

68 Per regolare la posizione di un'ombra, seleziona lo STRUMENTO OMBRA e trascinalo in corrispondenza dell'ombra.

Esempi grafici

Questo pulsante combina molte delle applicazioni descritte di sopra - viene disegnato combinando alcune forme sfumate ed utilizzando la trasparenza graduale (l'effetto riflesso bianco). Il testo ha un ombra leggera e il tasto ha un ombra luminosa. Il tutto è inserito in un gruppo. (Non è necessario disegnare questo pulsante dato che lo trovi nella GALLERIA DESIGN). Il maggior vantaggio della grafica vettoriale rispetto alla grafica bitmap creata in software di elaborazione dei pixel come Photoshop, è che puoi colorare da capo, elaborare, ruotare e modificare le dimensioni del tasto senza perdita di qualità. Rimane nitido anche se lo ingrandisci di molto.

L'operazione di ricolorazione è semplice: clicca su un colore e scegli quello che vuoi sostituire dall'elenco mostrato nella finestra di dialogo di Sostituzione colore. Tutte le operazioni di Web Designer sono non distruttive (è possibile elaborare sempre senza perdita di qualità).

Ciò che richiede tempo e capacità in altri programmi con Web Designer è semplicissimo.

www.magix.com

Primi passi

Menu con accesso tramite tasto destro Cliccando con il tasto destro su uno degli oggetti nell'area di lavoro in MAGIX Web Designer, appare una lista di operazioni utili relative all'oggetto selezionato. Se per esempio clicchi col tasto destro su un rettangolo che hai appena disegnato, nel menu appariranno solo le azioni eseguibili su un rettangolo. Tuttavia, se clicchi su una foto, alcune delle opzioni di menu che appaiono possono essere applicate solo su foto mentre altre sono simili alle operazioni eseguibili su un rettangolo. Le operazioni specifiche vengono elencate all'inizio dell'elenco nel menu a tendina. Nel nostro esempio, le prime tre sono solo applicabili solo a rettangoli. È possibile inoltre cliccare con il tasto destro sulla pagina e la clipboard per visualizzare un elenco delle operazioni possibili relativie a questi due elementi. Se selezioni più di un oggetto e clicchi con il tasto destro, il menu elenca sia le operazioni specifiche degli oggetti multipli come raggruppamento, allineamento e mixdown, sia quelle comuni come taglia, copia e cancella. Se invece clicchi su oggetti precedentemente raggruppati, vengono elencate le operazioni relative ad un gruppo. È consigliato cliccare su un oggetto o sui gruppi nell'area di lavoro per avere accesso ai relativi menu. Dopo aver eseguito questa funzione alcune volte, saprai quali operazioni possono essere eseguite velocemente tramite i menu accessibili tramite il tasto destro.

Livelli, Mouseover (Rollover) & Pop-up Come già menzionato, gli oggetti hanno un ordine circolare sulla pagina: dal più lontano al più vicino.

Questi oggetti sono livellati l'uno sopra l'altro.

Inoltre, tutti gli oggetti possono essere posizionati in livelli a cui è possibile assegnare il nome. Ogni livello può contenere una quantità indefinita di oggetti e può essere attivato e disattivato. Quando il livello è disattivato, tutti gli oggetti saranno invisibili.

70 I livelli si possono controllare dalla GALLERIA PAGINE & LAYER sulla barra superiore. In Web Designer i livelli sono usati per le funzioni mouseover (a volte chiamate rollover) sul tuo website. Questo include i tasti con highlighting (si illuminano quando si passa sopra il mouse) e anche altri effetti pop-up, come il text panel che contiene una breve descrizione del prodotto.

Effetti Mouseover Effects Puoi controllare due tipi di effetti mouseover. Innanzitutto quello usato dai pulsanti mouseover, in cui qualsiasi oggetto con un indirizzo web può mostrare un oggetto grafico sovrapposto che appare su un livello chiamato MouseOver. Cfr. di seguito per ulteriori dettagli. Sono a tua disposizione le funzioni mouseover con le quali è possibile far apparire i contenuti di diversi layer. Questo layer popup può contenere testo, grafica, foto e combinazioni di questi. Vedi sotto.

I livelli di MouseOff e MouseOver Tutti gli oggetti principali del tuo sito sono posizionati sul livello inferiore, solitamente chiamato MouseOff. I pulsanti che si illuminano al passaggio del mouse sull pagina web avranno un oggetto diverso posto sul livello chiamato MouseOver.

Se apri la Galleria dei layer potrai visualizzare o nascondere qualsiasi livello impostando o togliendo la spunta dalla casella visibilità (colonna sinistra sotto l'icona dell'occhio). Questo è un modo per mostrare come appariranno gli elementi di MouseOver nella tua pagina web.

www.magix.com

Primi passi Il livello attuale è sempre evidenziato nella Galleria dei layer, il livello MouseOff nel diagramma posto sopra, e questo è il layer in cui vengono disegnati tutti i nuovi oggetti. Per posizionare gli oggetti su qualsiasi altro livello, fai click sul livello desiderato nella Galleria Livelli, assicurati che le caselle Visibilità e Modifica siano selezionate per quel rispettivo livello. Nota: Il livello di MouseOver deve essere sempre sopra, ovvero sopra il livello di MouseOff, come mostrato nell'esempio sopra. Per elaborare gli oggetti su un livello sia il simbolo dell'occhio che quello del lucchetto devono essere aperti - Questo significa che puoi visualizzare ed elaborare i livelli (Come descritto sopra nel MouseOff layer)

Pulsanti Mouseover (Rollover) Quasi tutti i pulsanti della GALLERIA DEI DESIGN hanno un effetto mouseover in Web Designer. Questi vengono creati tramite due versioni dello stesso pulsante, la principale sul livello MouseOff ed una evidenziata sul livello MouseOver. Di solito non c'è bisogno di preoccuparsi di questo dal momento che i due pulsanti si comportano come se fossero uno solo; le modifiche, ad esempio quelle del testo, vengono eseguite su entrambe le versioni del pulsante. Se sposti, trascini o modifichi le dimensioni di un pulsante sul livello MouseOff, verrà modificata anche la versione del livello MouseOver, anche se non sei in grado di visualizzarla. Ciò avviene con l'ausilio dei Gruppi Soft (sulla pagina 60).

Crea i tuoi pulsanti mouseover Puoi creare dei pulsanti mouseover personalizzati disegnando gli elementi necessari a partire da rettangoli, testi ecc. Basta disegnare le parti principali del pulsante sul livello MouseOff (ricordati di raggupparlo (sulla pagina 58)) e di posizionare la corrispondente versione "evidenziata" sul livello MouseOver. Finché la versione MouseOff ha un link con indirizzo email, la versione MouseOver verrà visualizzata automaticamente non appena posizioni sopra il puntantore del mouse. (Il layer MouseOver deve essere sopra il layer MouseOff). In altre parole, tu conferisci all'oggetto principale un indirizzo web utilizzando l'opzione link, poi selezioni il livello MouseOver nella GALLERIA PAGINE & LAYER e posizioni le versioni mouseover necessarie del tuo pulsante su questo layer in modo che si sovrapponga all'oggetto collegato tramite link. Nota tecnica: qualsiasi oggetto grafico sul layer MouseOver verrà mostrato finché almeno il 50% si sovrappone all'oggetto sul layer MouseOff. Le due versioni dei pulsanti MouseOver sono mantenute in sincronia utilizzando la funzione Gruppi soft.

72 Quando selezioni il pulsante su un layer, viene selezionata automaticamente la versione soft group sull'altro layer anche se questo è disattivo. Quando modifichi il testo del pulsante su un layer, viene automaticamente sincronizzato con l'altra versione del pulsante. Per assicurare che entrambi gli stati Off e On cambino quando li modifichi, raggruppa in un gruppo soft i pulsanti posti sui due layer. Per eseguire questa operazione dovrai attivare entrambi i layer nella GALLERIA PAGINE & LAYER e selezionare entrambi i pulsanti. La barra di stato dovrebbe indicare se è stato selezionato tutto. Seleziona l'opzione "ORDINA -> APPLICA GRUPPO SOFT" . Ora quando modifichi il testo sul layer Off, cambia anche sul livello sovrastante anche se nascosto. (Nota: questo funziona solo se il testo Off ed Over è lo stesso da cui cominciare e si basa sugli oggetti a cui è stato applicato un gruppo soft. Una volta ottenuto un pulsante funzionante, puoi facilmente trasformarlo in una barra di navigazione. Seleziona il pulsante (insieme al suo stato MouseOver, se ne ha uno) e scegli "ORDINA" > "CREA BARRA DI NAVIGAZIONE" . Appare la finestra di dialogo della barra di navigazione che ti permette di eseguire la configurazione. Vedi il capitolo Barra di navigazione (sulla pagina 312) per maggiori informazioni anche su come differenziare il primo e l'ultimo tasto della barra.

Disposizione dei livelli su documenti di siti web. Se il tuo documento ha degli effetti di mouseover, livelli popup e forse anche effetti di mouseover su quei livelli popup, ci sono delle regole importanti che devi seguire riguardo la loro disposizione. Se non segui queste regole di disposizione, alcuni degli effetti potrebbero non funzionare. Se consideri i livelli a turno partendo dallo sfondo fino al primo piano (che nella galleria Pagine & Livelli va dal basso verso l'alto) per prima cosa devi avere tutti i livelli STATICI. Questi livelli sono sempre visibili e non vengono utilizzati come popup. Nella maggior parte dei progetti ne è presente solo uno: il livello "Mouseoff". Alcuni progetti, però, possono contenerne diversi, nel cui caso devono essere i primi del gruppo livelli. Dopodiché è il turno del livello MouseOver, se nei livelli statici sono presenti degli effetti di mouseover. Questo livello contiene stati di mouseover per tutti i tasti mouseover. Esso deve essere seguito dal livello "Mousedown, se nei livelli statici sono presenti degli effetti di mousedown. Di seguito puoi avere un layer popup. Se gli oggetti di questo layer hanno effetti mouseover, il layer seguente deve essere quello che sostiene tali effetti. Deve avere un nome che cominci con "MouseOver, per es. "MouseOverPopup1". E se il layer popup ha anche effetti mousedown, quello successivo, che deve contenere questi effetti, deve avere un nome che cominci per MouseDown.

www.magix.com

Primi passi Dopodiché può seguire un altro livello popup, seguito nuovamente da livelli mouseover e mousedown. . E così via. Puoi avere il numero di livelli popup che desideri Per concludere quanto detto: in generale la disposizione dei livelli deve rispettare l'elenco seguente che è uguale all'ordine mostrato dalla GALLERIA PAGINE & LAYER (partendo dal primo piano fino allo sfondo). Tutti i livelli sono opzionali e puoi scegliere i nomi che desideri, eccetto per i caratteri mostrati in grassetto i quali indicano i livelli speciali di mouseover e mousedown. MouseDown popup n MouseOver popup n Layer popup n ... MouseDown popup 1 MouseOver popup 1 Livello popup 1 MouseDown MouseOver Livello statico n ... Livello statico 2 MouseOff Osserva che devi tener conto di queste regole di disposizione solo se stai costruendo delle pagine complesse con effetti popoup multipli. Se invece stai utilizzando i modelli di progetto forniti dalla GALLERIA DESIGN, non dovresti aver problemi nella disposizione dei livelli.

Spostamento di oggetti da un livello all'altro Puoi tagliare un oggetto (Ctrl+X), selezionare un nuovo livello (cliccando sul suo nome nella galleria dei livelli) ed incollare l'oggetto al suo interno (Ctrl+V). Un'ottima alternativa consiste nell'opzione "Incolla nel punto esatto" (Ctrl+Shift+V), la quale consente di incollare l'oggetto esattamente nel punto da cui lo hai copiato. Devi solo assicurarti che le caselle "visibile" e "modificabile" siano state selezionate, per poter visualizzare e modificare l'oggetto nel nuovo livello.

Layer pop-up Un'alternativa più efficiente ti consente di visualizzare i contenuti di un layerr tramite l'effetto MouseOver o cliccando su un oggetto. Questa opzione può essere utilizzata per una vasta gamma di effetti pop-up differenti, come le foto pop-up, i menu o le descrizioni dettagliate di oggetti.

74 A tale scopo, posiziona tutti gli oggetti da visualizzare come pop-up su un nuovo layer (nella GALLERIA PAGINE & LAYER clicca su NUOVO LAYER dopo aver selezionato un layer. Non utilizzare il layer MouseOver) imposta poi le proprietà MouseOver (scheda MOUSEOVER della finestra di dialogo delle Animazioni Web) dell'oggetto originale per visualizzare questo layer ogni volta che sposti il puntatore del mouse su un oggetto. Ad esempio, quando passi il mouse su un testo, puoi visualizzare un pop-up simile:

Ecco qui elencati i passaggi per creare un blocco di testo pop-up come questo: 1. Clicca su NUOVO LAYER nella GALLERIA PAGINE & LAYER , dopo aver selezionato un

layer, per crearne uno nuovo. 2. Disegna un rettangolo arrotondato con lo STRUMENTO RETTANGOLO e clicca su un

colore (chiaro) sulla BARRA DEI COLORI per assegnargli un colore di riempimento. Aggiungi inoltre una sfumatura tenue (seleziona lo STRUMENTO OMBRA e trascinalo sul rettangolo). 3. Crea un blocco di testo in cima al rettangolo. Seleziona lo STRUMENTO TESTO e trascinalo in diagonale attraverso il rettangolo. Digita un testo. Probabilmente ora desideri nascondere il layer pop-up, deseleziona pertanto la casella in corrispondenza dell'"occhio"del nuovo livello. 4. Torna al livello base (MouseOff), selezionalo cliccandoci su nella GALLERIA PAGINE & LAYER e seleziona poi il testo che vuoi visualizzare tramite pop-up). Apri poi la finestra di dialogo "Animazioni web (clicca con il tasto destro e scegli ANIMAZIONI WEB... ) e nella scheda MOUSEOVER seleziona il nuovo layer dal menu a comparsa MOSTRA LAYER POP-UP. Clicca su OK . 5. Apri l'anteprima e testa il tuo effetto MouseOver. Se desideri che il pop-up venga visualizzato solo quando clicchi, seleziona l'opzione nella scheda LINK della finestra di dialogo delle Proprietà Web (sulla pagina 242). MOSTRA LAYER POP-UP

Nota: il livello MouseOver appare e scompare nel momento in cui sposti l'indicatore del mouse sull'oggetto e lo allontani da esso. Se per visualizzare il layer adotti il metodo click esso viene mostrato attraverso un click sull'oggetto ed è nascosto quando clicchi su un altro punto della pagina.

www.magix.com

Primi passi

Foto pop-up Vi è una seconda e più semplice possibilità per mostrare foto ingrandite da immagini di anteprima, senza chiamare in causa la creazione di nuovi livelli. Vedi qui (sulla pagina 46). Questo metodo è particolarmente consigliato nel momento in cui si dispone di grandi foto pop-up, dal momento che le foto pop-up non vengono caricate fino a quando non clicchi sull'immagine in anteprima.

Animazioni web La finestra di dialogo delle ANIMAZIONI WEB ti permette di scegliere cosa accade ogni qualvolta un utente sposti il puntatore del mouse sull'oggetto selezionato. Per esempio, puoi animare il MouseOver con una vasta gamma di effetti: puoi fare in modo che un testo o un intero layer di contenuto compaiano come pop-up quando un utente passa con il puntatore del mouse su una foto o oggetto della pagina web.

qui puoi applicare un effetto animato sia all'intero documento, quindi solo sul layer MouseOver, sia ad un oggetto selezionato. È inoltre possibile indicare una velocità per la durata dell'animazione.

EFFETTO MOUSEOVER:

76 qui puoi indicare in testo del "titolo pop-up" di un oggetto. Il browser mostra questa funzione come un piccolo pop-up quando l'utente passa sopra l'oggetto con il puntatore del mouse. Per esempio, se hai una miniatura che produce una versione più grande dell'immagine quando questa viene cliccata (vedi la sezione SCHEDA IMMAGINE (sulla pagina 252)), puoi inserire nel pop-up il testo "Amplia immagine" . Il testo apparirà come quando si passa con il puntatore del mouse sopra la miniatura.

MOSTRA TESTO POP-UP (TITOLO):

oltre ad aggiungere un layer al tuo design che viene visualizzato quando l'utente clicca sopra l'oggetto (Vedi la sezione LINK TAB (sulla pagina 243)), puoi anche far in modo che il layer venga mostrato quando si passa semplicemente il puntatore del mouse sopra l'oggetto. Il testo scompare quando il puntatore del mouse non si trova più sopra l'oggetto. Seleziona questa opzione e scegli il layer da quelli in dotazione.

MOSTRA LAYER POP-UP:

Creazione di pulsanti, banner e di altre grafiche web Web Designer è un grande strumento per la creazione di grafiche web indipendenti da usare in altri programmi o strumenti di web authoring. Puoi creare questi oggetti dal nulla utilizzando gli strumenti di disegno o utilizzare le clipart preconfezionate dalla GALLERIA DEI DESIGN . Basta disegnare, creare o importare un elemento dalla GALLERIA DESIGN su una pagina vuota. Modifica l'elemento a tuo piacimento: cambiane le dimensioni, coloralo e cambia il testo o i caratteri come preferisci ed esporta l'elemento come PNG o JPG. Ad esempio, ecco come puoi creare un pulsante indipendente da un modello: Apri la GALLERIA DESIGN e la categoria pulsanti (o icone o banner o qualsiasi altra categoria desiderata). Effettua un doppio click su un design per aprirlo in un nuovo documento. Modificalo come preferisci; ad esempio puoi: • • •

Modifica le dimensioni (o ruotalo) utilizzando il SELECTOR Modifica il colore cliccando sui colori appropriati all'estremità sinistra della barra dei colori e selezionando l'opzione "modifica" Cambia il testo con lo STRUMENTO DI TESTO

Una volta che sei soddisfatto del risultato seleziona l'oggetto ed esportalo in formato PNG o JPG usando i tasti posti sulla barra Website (questi si trovano sulla barra flyout sull'icona per l'esportazione HTML). Per quasi tutte le grafiche, come pulsanti, intestazioni, icone ed altri oggetti non fotografici, si consiglia di usare il formato PNG. Per elementi che contengono foto o

www.magix.com

Primi passi che hanno parti stampate con foto, il JPEG è il formato più appropriato. Se desideri salvare una foto ruotata o una con una sfumatura tenue o un bordo smussato, si consiglia di utilizzare il formato PNG, anche se vi è il pericolo che il file creato abbia dimensioni molto più grandi rispetto al JPEG. Se clicchi sul pulsante delle IMPOSTAZIONI nella finestra di dialogo Esporta file potrai accedere ad un pannello di controllo avanzato, che ti consentirà di ottimizzare l'immagine.

Qui puoi confrontare due versioni differenti della stessa immagine. Ad esempio puoi confrontare un JPEG con una versione PNG della stessa grafica, per confrontare la qualità e/o le dimensioni del file, oppure puoi confrontare due immagini PNG diversamente ottimizzate. Leggi a tal proposito il capitolo sulla finestra di dialogo di esportazione (sulla pagina 358) nel manuale in pdf. Nell'esempio di cui sopra, la compressione JPEG è stata regolata per produrre dimensioni di file ottimali.

Pubblicazione del sito web Per inserire immediatamente il tuo sito web su Internet, puoi pubblicarlo sia su Xara Hosting, che include un servizio di hosting gratuito, o su qualsiasi altro spazio web. La pubblicazione su Xara Hosting è la soluzione più semplice perché già integrata in Web Designer. Seleziona "FILE" >"PUBBLICA" sito web. Dopodiché registrati su MOW o premi il link PUBBLICA SU UN WEB HOST ALTERNATIVO . Hosting Xara Premi il pulsante REGISTRATI se ancora non disponi di un account Xara Hosting. La registrazione è veloce, semplice e gratuita. Esegui il log-in inserendo l'indirizzo e-mail e la password e clicca su MEMORIZZA I MIEI DATI per evitare di dover eseguire l'accesso ogni volta che apri Web Designer. Quando appare la finestra di dialogo per la pubblicazione su Xara Hosting, clicca sul tasto PUBBLICA per posizionare il sito nella radice dello spazio web oppure inserisci prima il nome di una sottocartella se desideri pubblicare più siti. Per ottenere un indirizzo web diverso, premi il pulsante NUOVO INDIRIZZO INTERNET Altro web host Inserisci i dati di accesso FTP per il tuo spazio di web hosting. Questi dati vengono forniti dalla compagnia di web hosting scelta. Sono necessari: • • • • •

dati dell'indirizzo di hosting Nome utente Password Sottocartella URL del sito web pubblicato

Consulta la sezione Pubblicazione sito web (sulla pagina 273) per maggiori informazioni.

Trasferimento dati 1. Dopo aver cliccato su ESPORTA (o PUBBLICA), Web Designer visualizza una

piccola finestra che mostra la progressione del trasferimento dei dati ed indica quando la pubblicazione è stata completata. Se hai inserito L'URL del tuo sito web con i dati di accesso FTP, puoi raggiungerlo direttamente da questa locazione.

www.magix.com

Primi passi 2. In alternativa, non appena il trasferimento si è concluso, puoi aprire la finestra di

un browser e navigare fino all'URL del sito pubblicato. Nota: se hai inserito una sottocartella nella scheda di pubblicazione della finestra di dialogo delle Proprietà web, il sito web viene salvato in quella locazione. Nota: in molti server web va fatta attenzione alle maiuscole ed alle minuscole. Di conseguenza l'indirizzo web xara.com/prodotti.htm non può essere considerato uguale a xara.com/Prodotti.htm. Per ridurre la confusione e gli errori, Web Designer fa in modo che tutti i nomi delle pagine siano scritti con la minuscola e contengano solo caratteri consentiti. Ciò significa che nei nomi delle pagine non sono consentiti spazi. Consigliamo di utilizzare un trattino basso come separatore.

Utilizzo dei documenti Avvio di un nuovo documento Esistono tre differenti tipi di documenti in MAGIX Web Designer, ad es. pagina web e foto. Per avviare un nuovo documento: Seleziona FILE > NUOVO Questo apre un sottomenu con molti modelli predefiniti dai quali iniziare. Il primo modello è quello standard e viene impiegato per creare un nuovo documento dopo aver avviato MAGIX Web Designer. Il tasto NUOVO DISEGNO sulla barra di controllo standard crea un nuovo documento usando il modello predefinito(Ctrl+N). Puoi salvare i tuoi modelli con il comando "FILE" > "SALVA MODELLO" . Per maggiori dettagli leggi "Modifica del documento modello (sulla pagina 364)"

Apertura di un documento esistente Apri un documento esistente: •

• • •

Trascina un file tramite Drag & drop. Seleziona il file in Windows Explorer o sul tuo desktop, trascinalo su un documento aperto già esistente per importarlo in quel documento o in un'altra parte della finestra di Web Designer per poterlo aprire. Oppure effettua un doppio click su un file Web Designer. Oppure apri un file usato recentemente da FILE > APRI O seleziona l'opzione FILE > APRI (comando veloce "Ctrl + O"). •

O clicca sul tasto APRI posto sulla barra di controllo STANDARD .

Verrà visualizzata la finestra di dialogo Apri. Questo dialogo permette la selezione di più file, Ctrl+Click per selezionare vari file o Shift+Click per selezionare una serie di file. Con questo tasto puoi cambiare la visualizzazione dei file in modalità miniature o dettagli come nell'Explorer. Se la voce MOSTRA ANTEPRIMA che si trova nell'angolo in alto a destra è attiva, il file selezionato viene mostrato in una anteprima più grande (questo non funziona per la selezione multipla).

www.magix.com

Utilizzo dei documenti

Condivisione di documenti su diversi dispositivi Web Designer supporta una gamma di nuove funzioni legate ai servizi "cloud drive". Questi servizi forniscono la possibilitĂ di salvare i file gratuitamente nel cloud ed un piccolo strumento per il desktop che puĂ˛ essere installato sul PC e che sincronizza i file salvati sull'hard disc con il cloud. Web Designer si accorge se i file sono stati modificati e li aggiorna e ricarica automaticamente. Per cui se lo stesso file Ă¨ aperto su piĂš computer e viene modificato e salvato, Web Designer lo aggiorna anche negli altri dispositivi. Inoltre, se si utilizza la condivisione cloud, puoi condividere il file con altri utenti e le loro modifiche verranno aggiornate anche nel tuo PC. Questo non risolve i conflitti che possono sorgere durante le modifiche. Se modifichi un file contemporaneamente ad un altro utente, il Web Designer ti informa che sono avvenuti dei cambiamenti e ti propone di aprire il file aggiornato in un documento nuovo.

La finestra di MAGIX Web Designer

82 Barra del titolo Nome file per il file corrente. Barra dei pulsanti standard Barra gallerie Barra informazioni Barra degli strumenti Righelli Pagina Pasteboard Barra dei colori (color line) Barra di stato Live drag / indicatori di allineamento Barra degli strumenti web Schede documenti per i file aperti La finestra di Web Designer è simile a un foglio di carta posto su una tela o su un cavalletto. Il rettangolo bianco rappresenta il foglio di carta (estensione o pagina). Il bordo grigio è la pasteboard. Per modificare le dimensioni della pagina cliccaci sopra con il tasto destro del mouse e scegli OPZIONI PAGINA, poi clicca sulla scheda DIMENSIONI PAGINA (sulla pagina 372).

Documento selezionato e barra del titolo Puoi tenere aperti più file contemporaneamente che Web Designer mostra come schede poste in alto nell'area di lavoro. Il documento corrente è mostrato nell'area di lavoro e il relativo nome è evidenziato in grigio nelle schede documenti. Il tipo di documento corrente è indicato nell'angolo in alto a sinistra della finestra di Web Designer, accanto alle opzioni di menu. Tutte le azioni vengono applicate al documento corrente. Un asterisco posto dopo il nome del file indica che ci sono delle modifiche non salavate nel documento.

Le schede documenti indicano tutti i documenti aperti; la scheda del documento corrente è evidenziata in grigio.

www.magix.com

Utilizzo dei documenti

Barre di controllo Esse contengono tasti che puoi utilizzare per azionare Web Designer. Puoi personalizzare le barre di controllo in diversi modi per esempio puoi riordinarle, crearne delle nuove o nasconderle. La finestra standard mostra la barra dei pulsanti STANDARD con i tasti utilizzati normalmente:

Puoi personalizzare la barra di controllo STANDARD allo stesso modo delle altre barre di controllo. Le icone con un indicatore triangolare nell'angolo in basso a destra hanno delle "barre fly-out". Tieni premuto il puntatore del muse su queste icone e vedrai apparire la barra con piĂš icone. Per informazioni sulla personalizzazione delle barre di controllo, consulta la sezione "Personalizzazione di Web Designer (sulla pagina 373)".

Barra delle informazioni Si tratta di speciale barra di controllo speciale. La visualizzazione dei contenuti varia nel momento in cui si seleziona uno strumento diverso. Le barre delle info relative a determinati strumenti sono descritte nei rispettivi capitoli. Non Ă¨ possibile personalizzare la barra delle informazioni.

La barra delle informazioni relativa al selettore

Barra degli strumenti principale Ă&#x2C6; una barra di controllo che contiene inizialmente tutti gli strumenti disponibili in Web Designer (vedi a sinistra). Puoi personalizzare la barra degli strumenti o spostare strumenti in altre barre di controllo. Alcune delle icone delle barre degli strumenti hanno un piccolo indicatore triangolare nell'angolo in basso a destra. Questo indica che c'Ă¨ una barra flyout che contiene altri strumenti. Tieni il puntatore del mouse fermo sull'icona dello zoom per veder apparire la barra flyout. Sposta il puntatore del mouse su ogni bottone nella barra flyout per visualizzare un tooltip con la descrizione del pulsante.

Clicca su uno strumento per selezionarlo (per alcuni strumenti sono disponibili anche combinazioni di tasti). Per informazioni sulla personalizzazione delle barre di controllo, consulta la sezione "Personalizzazione di Web Designer (sulla pagina 373)".

Regolatori Puoi nascondere i regolatori, modificare il loro zero e usarli per creare linee guida. Per maggiori informazioni vedi Regolatori (sulla pagina 99).

Linea di stato

Oggetti selezionati: Opzioni disponibili Indicatori Puntatore del mouse X-Y Questo appare infondo della finestra. La linea di stato ti indica quali sono gli oggetti selezionati, le opzioni disponibili, gli indicatori, gli indicatori live e la posizione del puntatore del mouse X/Y.

www.magix.com

Utilizzo dei documenti

Gli indicatori Appaiono sul lato destro della barra di stato Indicatore Live Drag: Questo indicatore mostra se il live drag è attivo oppure no (è attivo come impostazione predefinita). Clicca due volte sull'indicatore per attivare/disattivare il live drag. Quando è attivo e riposizioni, modifichi le dimensioni o ruoti un oggetto, esso si muove interamente (non solo un contorno) rendendo più semplice dare un giudizio sugli effetti delle tue modifiche in tempo reale. Se si disegna utilizzando gli strumenti, LINEA RETTA, RETTANGOLO ed ELLISSE questa opzione è attiva in tempo reale. Se il tuo computer non è in grado di far fronte ad un documento di particolare complessità, attiverà automaticamente il drag off per assicurare che le modifiche restino veloci ed efficienti. Indicatore allineamento: Questo indicatore è attivo quando la funzione di aggancio agli oggetti è attiva (per default nei documenti web - clicca il pulsante AGGANCIA ALL'OGGETTO (mostrato in basso a sinistra) per attivarla o disattivarla. Aggancia a oggetti ti permette di vedere punti di aggancio potenziali ad altri oggetti, il centro della pagina e bordi mostrando delle linee blu per di aggancio e pallini rossi che indicano i punti mentre trascini un oggetto. Per maggiori informazioni sull'allineamento vedi la sezione "Gestione oggetti (sulla pagina 131)".

Coordinate X-Y Web Designer le misure relative all'angolo in basso a sinistra della pagina o doppia pagina. Quest'opzione è comunque configurabile. Per maggiori informazioni consulta il capitolo Utilizzo dell'oggetto.

Modalità schermo normale/schermo intero Nella modalità schermo normale, parte della finestra è occupata dalla barra dei titoli, barra del menu e barre di scorrimento. Questa visualizzazione potrebbe non essere pratica se desideri disporre della superficie massima di lavoro. Web Designer offre una seconda modalità, a schermo intero, che mostra uno schermo più dinamico. Puoi configurare le modalità schermo a tuo piacere. Per esmpio, ogni modalità può avere la propria configurazione delle barre di controllo. La configurazione viene salvata e applicata ogni volta che si passa da una modalità all'altra. La funzione schermo normale/intero è regolabile tramite "FINESTRA" > "SCHERMO INTERO" o cliccando con il tasto destro e scegliendo SCHERMO INTERO ("8" nel tastierino numerico). Per visualizzare la barra del menu nella modalità schermo intero, sposta il puntatore del mouse sulla parte superiore dello schermo.

Aprire una seconda finestra È possibile che tu voglia aprire una seconda finestra nello stesso documento per: • • •

ottenere una visualizzazione ampliata o ridotta del documento; mostrare un'altra parte del documento; avere due visualizzazioni della stessa area con impostazioni di qualità differenti. Le impostazioni di qualità sono descritte più avanti.

Per aprire un'altra finestra seleziona Finestra > Nuova finestra. Puoi avere varie finestre aperte sullo stesso documento.

Selezionare quale finestra visualizzare Ogni finestra aperta viene visualizzata con una scheda sotto la infobar. Clicca su una scheda per visualizzare la finestra o clicca sul menu FINESTRA e scegli un nome sulla parte inferiore.

Disposizione di finestre multiple L'opzione "FINESTRA - > ARRANGIA FINESTRE" ti aiuta ad organizzare più finestre. Ogni finestra ha la sua barra dei titoli ma non ha barre di controllo. Clicca su una finestra per farla diventare la finestra attuale. Premendo "Ctrl + F6" passi in sequenza attraverso le finestre. Tramite l'opzione ORGANIZZA FINESTRE è possibile visualizzare le finestre disposte verticalmente o, nel caso in cui vi siano più di tre finestre, disposte a tegole.

Riduzione a icona di più finestre Riducendo a icona una delle diverse finestre, si vede una icona sullo sfondo della finestra principale di Web Designer. Effettua un click doppio sull'icona per aprire nuovamente la finestra.

Modifica del valore dello zoom Spesso può essere utile aumentare la visuale del documento per esaminare dei dettagli oppure ridurla per avere un'impressione d'insieme. Valori di zoom superiori a 100 % danno luogo ad una visualizzazione ampliata (come se stessi utilizzando una lente di ingrandimento); valori inferiori a 100 % danno luogo ad una visuale ridotta. Ciò che cambia è solo la visualizzazione del documento - le dimensioni originali del documento e gli oggetti contenuti rimangono invariati (il cambio di dimensioni di un documento

www.magix.com

Utilizzo dei documenti viene spiegato più avanti). Per modificare il valore dello zoom puoi usare lo strumento ZOOM , il mouse o le barre di controllo. Sono disponibili alcuni comandi rapidi per un'impostazione rapida dei valori di zoom: i numeri 1, 2, 3, 4 impostano il valore di zoom tra 100% e 400%. Il numero 5 imposta il valore su 50%.

Utilizzo dello strumento di zoom Per eseguire uno zoom: • • • •

Seleziona lo strumento ZOOM dalla barra degli strumenti principale. Oppure premi Alt+Z per cambiare dallo strumento attuale allo strumento ZOOM e viceversa. Oppure premi e mantieni premuti Alt + Z per passare temporaneamente allo strumento ZOOM (rilasciando Alt+Z tornerai allo strumento precedente). Oppure clicca su  + F7 per selezionare lo strumento ZOOM .

Modifica del valore di zoom tramite il mouse Se il tuo mouse dispone di una rotella: •

tieni premuto Ctrl e scorri con la rotella del mouse per cambiare il livello di zoom. Puoi anche configurare un pulsante del mouse affinché serva ad eseguire lo zoom in o zoom out. Inoltre puoi cambiare la funzione della rotella del mouse tra spostamento e zoom in Strumenti > Opzioni > Mouse tab (sulla pagina 371). Per attivare la funzione opposta premi Ctrl.

In alternativa puoi selezionare lo strumento ZOOM e poi: • • •

clicca per eseguire uno zoom in (ampliamento).  + click per ridurre il valore di zoom (per vedere una porzione maggiore del documento). Trascina il mouse diagonalmente per creare un rettangolo. Quando rilasci il pulsante del mouse, l'area all'interno del rettangolo viene ampliata alle dimensioni della finestra.

Cambia lo zoom usando lo zoom infobar/barra di controllo Nella toolbar standard trovi una barra (flyout) che ti permette di accedere velocemente alle funzioni di zoom senza dover entrare nello strumento zoom. Tieni il puntatore del mouse fermo sull'icona dello zoom per veder apparire la barra flyout.

88 Per cambiare lo zoom: Comando veloce: Ctrl+R. Clicca sul tasto ZOOM PRECEDENTE . Questo è il valore che era impostato prima di quello attuale. Questo tasto ti permette di zoomare velocemente sul documento e ingrandire l'immagine nuovamente. Questo è molto importante se si vuole passare velocemente da una visualizzazione in dettaglio ad una visualizzazione di insieme di un documento. Per ogni finestra viene conservato il valore precedente dello zoom. Anche se passi da una finestra all'altra i valori precedenti dello zoom vengono conservati. Comando veloce "1" porta lo zoom al valore del 100%. Comando veloce: Ctrl+N+J. Clicca il tasto ZOOM PER DISEGNO . La finestra mostra tutti gli effetti nel documento. Comando veloce: Ctrl+P. Clicca il tasto ZOOM SULLA PAGINA. La finestra mostrerà l'intera pagina o coppie di pagine. Comando veloce Ctrl ++ Z. Clicca il tasto ZOOM SU SELEZIONATI Gli oggetti selezionati si adattano alla finestra. Inserisci un valore nella casella di testo. Premi "" per attivare le modifiche o seleziona i valori preimpostati dello zoom incluso quelli di sopra (pagina, disegno, selezionati, precedente) nel menu a tendina.

Spostamento del documento all'interno della finestra Il modo più rapido per spostare il documento è premendo il tasto centrale del mouse (che solitamente corrisponde alla rotella), se ne hai uno. Tieni premuto il tasto centrale del mouse e poi muovi il mouse. Rilascia il pulsante per tornare allo strumento precedente. Per spostare il documento all'interno della finestra puoi anche: •

usare le barre di scorrimento e le frecce al lato della finestra. La visualizzazione delle barre di scorrimento è opzionale. Scegli Finestra > Barre > Barre di scorrimento per disattivarle.

•

Usa la rotella del mouse per scorrere in alto e in basso nel documento (Shift + rotella del mouse per spostarsi a destra e sinistra)

www.magix.com

Utilizzo dei documenti

Puoi cambiare la funzione della rotella del mouse tra scorrimento e zoom in Strumenti > Opzioni > Mouse tab. La funzione opposta si ottiene premento il tasto Ctrl. Oppure seleziona lo strumento SPOSTAMENTO dalla barra degli strumenti principale (comando veloce +F8). • •

Oppure premi la barra spaziatrice o Alt+X per cambiare tra lo strumento attuale e lo strumento di SPOSTAMENTO. Oppure tieni premuta la barra spaziatrice o Alt+X per passare temporaneamente allo strumento di SPOSTAMENTO (rilasci a i tasti per tornare allo strumento precedente). Poi puoi utilizzare il mouse per trascinare il documento nella finestra.

La barra informazioni dello strumento di SPOSTAMENTO è uguale alla barra informazioni dello strumento ZOOM (descritto in alto).

Modifica delle dimensioni pagina Quando apri un nuovo documento Web Designer, le dimensioni della pagina sono di 760 x 700 pixel (SVA web page). Comunque puoi cambiare le dimensioni della pagina se lo necessario, ad esempio supportando altre risoluzioni dello schermo, come la VGA. 1. Seleziona menu "SERVIZI - > OPZIONI". 2. Se necessario, clicca sul tabulatore delle dimensioni pagina. 3. Seleziona le dimensioni di pagina desiderate.

Se selezioni l'opzione PERSONALIZZA nel selettore delle dimensioni, puoi impostare una larghezza ed un'altezza desiderata nei campi sottostanti. Ogni pagina del documento (sito web esportato) può avere dimensioni diverse. Grazie all'opzione TUTTE LE PAGINE DEL SITO WEB CON LE STESSE DIMENSIONI puoi definire le stesse dimensioni per tutte le pagine del documento. Puoi ridefinire l'altezza della pagina trascinando il bordo inferiore della pagina con il selettore.

Pagine multiple nel documento Un documento MAGIX Web Designer può contenere pagine multiple. Ogni pagina viene esportata in una pagina HTML separata ed ogni documento presente in <product> corrisponde ad un sito web. Per impostazione predefinita quando apri o crei un nuovo documento web, Web Designer mostra solo una pagina. I documenti che devono essere stampati, tuttavia, per importazione predefinita, sono mostrati nella visualizzazione pagine multiple. Clicca con il tasto destro su una pagina o pasteboard e seleziona/deseleziona la VISUALIZZAZIONE PAGINE MULTIPLE per passare da una modalità di visualizzazione all'altra.

La pagina attuale Se clicchi su una pagina di un documento multipagina, questa diventerà la pagina attuale. La pagina attuale è importante quando si inseriscono, duplicano o spostano pagine, come descritto nelle sezioni seguenti. Nel documento, la pagina corrente è mostrata da degli indicatori posti sugli angoli della pagina stessa.

Inserisci pagine nel documento Clicca con il tasto destro su una pagina e scegli NUOVA PAGINA o NUOVA DOPPIA PAGINA . Viene inserita una nuova pagina bianca dopo quella attuale o clicca sulla

pagina con il tasto destro e scegli DUPLICA PAGINA CORRENTE o DUPLICA LA DOPPIA PAGINA ATTUALE . Viene inserito un duplicato della pagina corrente.

La nuova pagina sarà uguale all'originale, per quanto riguarda la dimensione e l'orientamento; essa sarà dotata di tutto il suo contenuto e la potrai utilizzare come modello per un nuovo contenuto. È possibile anche usare la voce "ELABORA" > "PAGINE".

www.magix.com

Utilizzo dei documenti Inoltre la toolbar standard è provvista di una barraa comparsa che permette di aggiungere, duplicare ed eliminare velocemente le pagine.

Sposta il puntatore del mouse sulle icone nella barra flyout per visualizzare un tooltip con la descrizione delle opzioni. Puoi aggiungere una pagina vuota, duplicare la pagina corrente o eliminarla.

Copiare e incollare pagine Puoi copiare e incollare pagine intere nel documento corrente o incollarle su un altro. Verrano copiate le dimensioni di pagina, livelli ed altri attributi oltre a tutti gli oggetti presenti. Per copiare la pagina corrente, annulla ogni selezione cliccando Esc, su una parte vuota della pagina o sulla pasteboard. La barra di stato indica "Nessun oggetto selezionato". Clicca con il tasto destro su una parte vuota di una pagina e scegli COPIA PAGINA (oppure premi "Ctrl+C"). Quando incolli una pagina copiata, viene aggiunta immediatamente accanto alla pagina corrente. Per incollare premi "Ctrl+V" o clicca sulla pagina con il tasto destro e scegli INCOLLA > PAGINA dal menu contestuale. Nota se nel documento nel quale incolli la pagina l'opzione TUTTE LE PAGINE DEL DOCUMENTO UGUALI attiva alla voce FILE > OPZIONI PAGINA , le dimensioni della pagina incollata saranno sostituite dalle dimensioni di pagina del documento. Per cui alla nuova pagina verranno assegnate le stesse dimensioni di tutte le altre pagine nel documento.

Sposta pagine all'interno del documento Il modo più semplice per cambiare l'ordine delle parole del documento è trascinare sulla pagina le miniature della Galleria Pagine & Layer (che è posta sulla destra, per impostazione predefinita). Inoltre puoi selezionare più di una pagina per volta e trascinare per per riordinare. In alternativa per spostare la pagina corrente: •

Seleziona l'opzione "MODIFICA -> PAGINE -> SPOSTA PAGINA IN ALTO" oppure clicca con il tasto destro e seleziona SPOSTA PAGINA IN ALTO per scambiare la pagina corrente con la precedente.

92 •

Seleziona l'opzione "MODIFICA -> PAGINE -> SPOSTA PAGINA IN BASSO" oppure clicca con il tasto destro e seleziona SPOSTA PAGINA IN BASSO per scambiare la pagina corrente con la successiva

Queste opzioni del menu saranno disattivate ma visibili se ti trovi rispettivamente sulla prima o sull'ultima pagina del documento.

Rimuovi pagine dal documento Per cancellare la pagina corrente dal tuo documento clicca con il tasto destro e scegli CANCELLA PAGINA CORRENTE oppure seleziona "MODIFICA > "PAGINE" > "CANCELLA PAGINA CORRENTE" . La pagina corrente verrà cancellata insieme al suo contenuto. Oppure seleziona più pagine nella galleria Pagine & Layer e premi il pulsante Cancella o il tasto Canc della tastiera.

Naviga tra le pagine Oltre ai metodi tradizionali per spostarti all'interno del tuo documento (come le barre di scorrimento o la rotella del mouse), ci sono altri modi per navigare tra le pagine: Pagina su: sposta il documento in alto. La parte di documento spostata dipende dal tuo livello di zoom. Più ti allontani e più grande è il movimento. Ctrl + Pagina su va alla pagina precedente e la centra. Pagina giù: sposta il documento in basso. La parte di documento spostata dipende dal tuo livello di zoom. Più ti allontani e più grande è il movimento. Ctrl + Pagina giù: va alla pagina successiva e la centra. Oppure clicca sulla freccia per andare in alto o in basso sulla barra di stato: La barra di stato è utile anche per sapere quali pagine stai consultando in quel momento. Nota. Tutti questi movimenti sono relativi alla pagina che stai consultando e non alla pagina attuale.

Galleria pagine & layer Puoi anche usale la Galleria Pagina & Layer per controllare le pagine del tuo documento. Da qui è possibile aggiungere, duplicare, eliminare, riordinare le pagine. Per maggiori informazioni consulta il capitolo Galleria Pagina & Layer (sulla pagina 337)

www.magix.com

Utilizzo dei documenti

Salvataggio del documento In questo paragrafo viene illustrato il salvataggio nel formato proprio di Web Designer (formato originale). Consulta il paragrafo "Importazione ed Esportazione (sulla pagina 349)" per saperne di più sull'esportazione in altri formati. Si raccomanda di salvare i documenti con una certa regolarità. Un documento complicato può avere alle spalle molte ore di lavoro ed eventuali cali della tensione elettrica o crash del computer possono vanificare tutto il lavoro precedente. Assicurati di aver attivato la funzione di backup automatico in modo che vengano effettuati backup del tuo documento mentre lavori. Vedi Backup automatici (sulla pagina 95) per maggiori informazioni.

Salva opzione (sul menu File) (Comando veloce Ctrl+S oppure clicca sul pulsante di salvataggio sulla barra di controllo STANDARD .) Questo ti fornisce un modo rapide di salvare di nuovo un documento con lo stesso nome di file. L'opzione non è disponibile finché non sono presenti modifiche non salvate nel documento. (Cioè hai effettuato delle modifiche e non le hai salvate sul disco.) Per un nuovo documento che non è stato salvato sul disco, questa funzione corrisponde a "Salva con nome" (descritta di seguito).

Salva con nome (nel menu File) Quest'opzione apre una finestra di dialogo che ti consente di salvare il documento con un nome diverso o in una cartella differente. Quest'opzione è utile per effettuare backup di documenti di Web Designer.

Salva tutto (sul menu file) Questo comando serve al salvataggio di tutti i file aperti in determinato momento senza dover utilizzare i comandi SALVA o SALVA CON NOME.

Cartelle di supporto Alcuni documenti usati per creare siti web devono fare riferimento a file esterni che non possono essere integrati nel file di progetto .web. Per esempio il sito può usare un file Flash (.swf) e sarà utile tenerlo insieme ai file del progetto perché non è possibile esportare un sito pienamente funzionante dal file di progetto senza includere anche il file Flash. Per passare il progetto a qualcun altro o per spostarlo su un altro computer, inoltre, devi trasferire anche il file Flash a cui è collegato. Così MAGIX Web Designer usa una cartella opzionale “di supporto” affiancata al file di progetto per contenere questi importanti file esterni.

Nomi delle cartelle di supporto Il file di progetto e le cartelle di supporto che vi corrispondono sono legati attraverso i loro nomi. La cartella di supporto per "ilmiosito.web" è sempre "ilmiosito_web_files". Questa convenzione per i nomi rende ovvio a quali file appartenga ogni cartella di supporto. Così se rinomini, copi o sposti un file di progetto devi sempre ricordarti di fare lo stesso con l'eventuale cartella di supporto! Se devi mandare un file di progetto a qualcuno manda anche la cartella dei file di supporto. Se carichi un progetto che ha una cartella di supporto e poi usi il comando Salva come per salvarne un'altra copia, MAGIX Web Designer copia anche tutta la cartella supporto, se c'è.

Contenuto della cartella di supporto Quando usi la Scheda Placeholder (sulla pagina 258) della finestra di dialogo PROPRIETÀ WEB per inserire un rimando a un file esterno nel progetto del tuo sito (usando i tasti Browse) MAGIX Web Designer copierà automaticamente il file nella cartella di supporto del progetto. Se la cartella di supporto non esiste, ne viene creata una. Ricordati che, se in seguito cambi il placeholder in modo che faccia riferimento a un file diverso, il file originale non viene cancellato automaticamente dalla cartella di supporto. Se un file non serve più, quindi, devi rimuoverlo manualmente. Puoi anche copiare manualmente tutti i file che desideri nella cartella di supporto di un progetto, creando manualmente anche la cartella se serve. MAGIX Web Designer non cancellerà mai alcun file dalla cartella, che i file siano o no usati dal file di progetto corrispondente. Il motivo di questa scelta è che ci sono diversi modi in cui un progetto può collegarsi a un file esterno. Per esempio si può inserire in un progetto un complesso stralcio di codice HTML che in qualche punto usa un file esterno posizionato nella cartella di supporto. Altrimenti uno dei file esterni può richiamarne

www.magix.com

Utilizzo dei documenti un altro! In nessun modo MAGIX Web Designer può assicurarsi che un file non sia usato dal sito, quindi non cancella mai alcun file.

Esportare i siti con le cartelle di supporto Quando esporti il documento di un sito, i file nella corrispondente cartella di supporto sono copiati nella cartella che comprende tutte le immagini generate dal sito. Quindi se esporti “ilmioSito.web” in “index.htm”, tutti i siti nella cartella “ilmioSito_web_files” sono copiati nella cartella “index_htm_files folder”.

Chiudere il documento Come chiudere il documento • • • •

Scegli "'FILE" > "CHIUDI. Oppure premi "Ctrl + F4", o "Ctrl + W". O ancora clicca la X più piccola delle due presenti nell'angolo in alto a destra. Oppure clicca sulla scheda del documento con il tasto destro per visualizzare un menu sensibile al contesto che comprende una serie di opzioni per la chiusura sia di una che di tutte le schede aperte.

Clicca con il tasto destro su una scheda per visualizzare il salvataggio multiplo e le opzioni di chiusura.

Backup automatico MAGIX Web Designer può salvare delle copie di sicurezza dei documenti aperti mentre tu lavori. Questo ti permette di evitare perdite nel caso di crash del programma e di tornare ad una passata versione del documento. Per attivare o disattivare questa funzione vai alla sezione BACKUP dal menu STRUMENTI > OPZIONI.

Backup dei documenti aperti Per attivare il backup attiva questa casella e poi indica la frequenze con la quale devono essere effettuati. Si suggerisce di selezionare un periodo di frequenza di 10 minuti dall'ultimo backup (o dall'apertura o la creazione del documento). Nota che una volta fissato l'intervallo il primo backup verrà eseguito se il programma rimane inattivo per 15 secondi. Questo serve ad non interrompere il tuo lavoro per eseguire i back up di un documento. Nella prassi è poco probabile che si verifichino periodi di inattività regolari di 15 o più secondi. Ma ricorda che se lavori attivamente al documento per un periodo di tempo più esteso potrebbe risultare molto pi `lungo dell'intervallo impostato per il backup. Il Backup automatico non salva le modifiche applicate in sotto-documenti "modifica all'interno" aperti. Quando avviene un backup programmato, viene salvato solo il documento madre principale nel suo stato corrente senza le modifiche non salvate dei gruppi. Per questa ragione si consiglia di salvare le modifiche "modifica all'interno" a cadenze regolari, nel documento madre. Quando si effettua un backup viene visualizzata la barra della progressione del completamento del salvataggio.

Percorso Backup: Indica il percorso se vuoi cambiare la cartella per il salvataggio dei backups. Potrai accedere in ogni momento ai documenti backup salvati qui dal menu FILE > APERTI DI RECENTE > BACKUP . Cosi si apre una finestra sulla cartella del backup dalla quale puoi aprire, cancellare i file backup.

www.magix.com

Utilizzo dei documenti

Revisioni Come impostazione standard vengono prese 10 revisioni di ogni design nella cartella backup ma è possibile modificare la quantità. Le revisioni più vecchie in eccesso vengono cancellate automaticamente. Ad ogni file backup viene dato un nome usando il nome del documento dal quale sono presi con l'aggiunta dell'ora e la data del backup. ATTENZIONE: nota che se hai più documenti che hanno in comune lo stesso nome in cartelle diverse sul computer anche i backup avranno lo stesso nome. Quindi cerca di non ripetere i nomi in modo che i backup non si sovrascrivano.

Documenti senza titolo I documenti che hai creato a non ancora salvato vengono messi in sicurezza con il nome "Untitled" seguito da un numero e l'ora e la data. Il nome ed il numero corrispondono a quelli che vengono mostrati nella barra del titolo quando elabori un nuovo documento non salvato. ATTENZIONE: fino a che tutti dcoumenti non salvati avranno i nomi Untitled1, Untitled2, etc. è molto probabile che i backup vengano sovrascritti. I documenti più importanti dovrebbero venir salvati con un nome che permetta di indentificarli semplicemente nella cartella dei backup.

Backup dei documenti aperta alla chiusura del programma La sezione backup nel dialogo delle opzioni ti permette anche di attivare l'opzione backup AUTOMATICO E RIPRISTINO. Se questa opzione è attiva Non ti verrà chiesto alla chiusura di MAGIX Web Designer se vuoi salvare le modifiche dei documenti modificati. Viene invece effettuato un backup di tutti i documenti e poi si chiude il programma. Al nuovo avvio del programma vengono caricati nuovamente gli stessi documenti e potrai continuare il lavoro da dove l'avevi lasciato. Nota che se hai aperto la visualizzazione di sotto-documenti "Modifica all'interno", questi vengono chiusi e salvati nel documento principale quando si chiude il programma. Allo stesso tempo viene fatto un backup del documento principale. Le visualizzazioni "modifica all'interno" dei sotto-documenti non verranno aperte ad un successivo riavvio del programma. Vedi Modifiche all'interno dei gruppi.

Recupero dopo una chiusura anormale del programma Se la funzione di backup automatico è attiva e il programma si chiude d'improvviso (magari per la mancanza di corrente elettrica) al momento del nuovo avvio ti verrà chiesto se vuoi caricare l'ultimo backup e aprire i documenti nello stato prima dell'interruzione.

98 Non vengono riconosciute le chiusure anormali del programma se non è stato ancora effettuato un backup dall'ultima chiusura.

Backup alla chiusura del sistema Se chiudi Window senza prima chiudere il programma, tutti i documenti aperti vengono salvati anche se la relativa opzione non è attiva. Questo permetterà al sistema di procedere senza che MAGIX Web Designer di chieda se vuoi salvare i documenti non salvati o modificati. Quando avvii nuovamente il programma ti verrà chiesto se vuoi caricare i documenti che erano aperti al momento della precedente chiusura.

Ripristino dei backup Puoi accedere ai backup del tuo documento dal menu File > APERTI DI RECENTE > BACKUP . Cosi si apre una finestra sulla cartella del backup dalla quale puoi aprire, cancellare i file backup. È possibile usare questo dialogo anche per eliminare i backup più vecchi. Quando carichi un backup questo non è automaticamente associato al design dal quale è stato preso. Questo viene trattato come un semplice documento indipendente. Se vuoi mantenere un documento backup dovresti usare l'opzione FILE > SALVA COME per salvarlo con un nome adatto.

Griglia sullo schermo Per aiutarti a definire il layout del documento, Web Designer può mostrare un griglia sullo schermo (appare solo sullo schermo non viene esportata o stampata). La griglia ti aiuta ad allineare gli oggetti (come quando si usa la carta millimetrata per disegnare). Clicca con il tasto destro e scegli MOSTRA GRIGLIA/GUIDE" > MOSTRA GRIGLIA per attivare/disattivare la griglia oppure scegli "AGGANCIA A" > "AGGANCIA ALLA GRIGLIA" Puoi scegliere anche "FINESTRA" > "AGGANCIA ALLA GRIGLIA" . I punti della griglia si comportano come calamite, e mentre muovi gli oggetti questi si allineano sul punto della griglia più vicino. I documenti web hanno come impostazione standard la funzione "AGGANCIA ALLA GRIGLIA" attiva con una griglia da 1 pixel. Il tipo di griglia (isometrica/rettangolare), il punto 0.0 (origine) e la spaziatura dei punti della griglia, sono controllati dalla SCHEDA GRIGLIA & RIGHELLO (sulla pagina 370) della finestra di dialogo delle opzioni. Le modifiche vengono applicate solo al documento selezionato. Nei documenti web l'allineamento magnetico di oggetti è attivo per impostazione predefinita. L'allineamento degli oggetti è un modo per allineare in modo accurato

www.magix.com

Utilizzo dei documenti linee, punti e margini di oggetti ad ogni altro oggetto perché si tocchino in maniera esatta. Per allineare i centri degli oggetti puoi utilizzare questa funzione, oppure puoi allineare gli oggetti al centro della pagina, oppure orizzontalmente e verticalmente nella parte centrale o sul margine della pagina. Per attivare o disattivare l'allineamento oggetti, clicca sul tasto AGGANCIA A OGGETTI o clicca con il tasto destro e scegli AGGANCIA A > AGGANCIA A OGGETTI . Puoi scegliere anche "FINESTRA" > "AGGANCIA ALLA GRIGLIA" . Consulta la sezione Gestione oggetti (sulla pagina 131) per maggiori dettagli sull'allineamento griglia e oggetti.

Righelli Per impostazione predefinita i righelli non sono attivi. Pe attivarli: • • •

Clicca con il tasto destro e scegli "MOSTRA GRIGLIA/GUIDE" > "MOSTRA RIGHELLI" per attivare/disattivare la griglia. Premi "Ctrl + Shift + Alt + R" Oppure seleziona "FINESTRA" > "BARRE > "MOSTRA RIGHELLI".

Anche Web Designer usa i righelli: •

Contolla testo margini (sulla pagina 199), schede e documenti nello STRUMENTO DI TESTO

• • •

Ti permettere di sapere quale parte della pagina viene visualizzata; Mostra la posizione corrente del puntatore X/Y: Applica linee guida. Se "FINESTRA" > "AGGANCIA GRIGLIA" è attivo, le linee guida si allineano alle divisioni sul righello. Per ulteriori informazioni sulle linee guida vedi guide & linee guida nella sezione "Gestione oggetti" (sulla pagina 131).

Quando crei o modifichi degli oggetti in scala, puoi utilizzare il righello per controllare la loro grandezza. Oppure puoi utilizzare lo STRUMENTO SELECTOR (vedi la selezione "Selezionare oggetti" per maggiori informazioni). I righelli vengono visualizzati sulla sinistra e nella parte superiore della finestra. Una linea tratteggiata su ogni righello segue la posizione corrente del puntatore. Le unità e il numero di divisioni sul righello sono gli stessi fissati per adattare la griglia sullo schermo Vengono fissati utilizzando la scheda Griglie & righelli (sulla pagina 370) della finestra di dialogo delle opzioni. Le unità correnti e ogni fattore di scala, sono visualizzati sul lato destro del righello superiore.

100

Mostrare/nascondere righelli Clicca con il tasto destro e scegli MOSTRA GRIGLIA/GUIDE" > "MOSTRA RIGHELLI" ("Ctrl + Shift + R") per attivare disattivare i righelli. Ogni modifica apportata alla finestra corrente verrà applicata anche alle finestre successive che verranno aperte. Non ha effetto sulle altre finestre già aperte.

Modifica del punto zero dei righelli Spesso è più facile misurare gli oggetti se allinei il punto 0,0 dei righelli con l'oggetto. Per spostare il punto 0,0 trascina il quadrato che si trova nell'intersezione tra i due righelli.

Puoi trascinare verticalmente od orizzontalmente lungo i righelli in qualsiasi parte della finestra di elaborazione di Web Designer. Mentre esegui lo spostamento, una linea punteggiata sottolinea la nuova posizione. Questa operazione sposta anche l'origine della griglia, in modo che le divisioni sul righello sia sempre allineata con la griglia. Puoi anche spostare il punto zero dalla tabella GRIGLIA &RIGHELLO della finestra di dialogo delle opzioni (descritta in basso).

Qualità di visualizzazione Esistono 5 differenti impostazioni della qualità nel menu QUALITÀ di WINDOWS in base alle quali il documento apparirà differentemente in MAGIX Web Designer. • • • • •

Solo contorno. Ora con anti-aliasing completo per una migliore visualizzazione sullo schermo. Contorno con passaggi di transizione. A colori (senza anti-aliasing). Alta qualità (anti-aliasing completo e livellamento immagine) Qualità molto alta (il migliore anti-aliasing nel settore). La nuova visualizzazione fotografica bicubica migliora notevolmente la qualità delle foto a scala ridotta).

www.magix.com

Utilizzo dei documenti Con l'impostazione A COLORI il documento viene mostrato a colori ma con l'anti-aliasing disattivato. Nell'impostazione CONTORNO vengono visualizzati solo i contorni della figura (rappresentati come una griglia in rete). Ciò rende più facile la selezione di oggetti nascosti dietro altri oggetti. Le impostazioni della qualità non hanno effetto sulla modalità di esportazione e di stampa eccetto per le l'esportazione della bitmap che usa queste impostazioni.

Tasto di limitazione Il tasto "Ctrl" ha una funzione speciale in Web Designer. Limita l'operazione corrennte. Per esempio, generalmente è possibile far ruotare un oggetto ad ogni angolo. In Web Designer, però, se tieni premuto "Ctrl" mentre fai ruotare un oggetto, la rotazione è limitata ad un sottoinsieme di angoli possibili. Per impostazione predefinita, l'oggetto ruoterà solo intorno ai multipli di 45 gradi più eventuali rotazioni in cui un bordo diritto significativo dell'oggetto diventa veritcale o orizzontale. La linea di colore nero sulla sinistra può essere ruotata di qualsiasi angolo all'interno del cerchio. Sulla destra compare la stessa linea ma se si tiene premuto "Ctrl" può ruotare solo nella posizione indicata. Allo stesso modo, se si limita un rettangolo si crea un quadrato perfetto mentre nel caso di un'ellisse si crea un cerchio perfetto. Rilascia il tasto "Ctrl" per non applicare la limitazione. L'angolo di limitazione è definito nelle OPZIONI >GENERALI > LIMITAZIONE ANGOLARE (sulla pagina 369).

101

102

Gallerie MAGIX Web Designer si serve delle gallerie per fornire facile accesso alle librerie di contenuto come modelli, colori, ClipArt e bitmap/foto. Questa sezione del manuale fornisce informazioni generali sulle caratteristiche comuni alle gallerie multiple. Le singole sezioni del manuale descrivono le caratteristiche specifiche di ogni galleria.

Per impostazione predefinita la galleria Pagine e Layer Ă¨ aperta in modalitĂ pagine (che mostra solo le pagine e non i layer) e appuntata sulla destra della finestra di Web Designer

Pagine & Layer Design Bitmap Riempimenti La galleria delle PAGINE E LAYER ti permette di visualizzare ed elaborare le pagine del documento e i relativi layer.

www.magix.com

Utilizzo dei documenti Le GALLERIE dei DESIGN , dei RIEMPIMENTI ti permettono anche di scegliere tra differenti modelli e stili in dotazione in MAGIX Web Designer. La GALLERIA BITMAP ti mostra la bitmap e le foto che vengono usate da tutti i documenti correnti. Varie gallerie sono descritte in dettaglio più avanti.

Visualizzazione di una galleria. Per visualizzare una galleria: 1. Clicca o fai scorrere il puntatore del mouse sulla scheda verticale della galleria a

destra dell'area di lavoro (barra gallerie) La galleria si apre automaticamente. Quando sposti il puntatore del mouse dalla galleria, questa si chiude automaticamente. 2. Per tenere la galleria sempre aperta mentre lavori, clicca sul tasto NASCONDI AUTOMATICAMENTE (puntina) posto sull'angolo in alto a destra. Il tasto NASCONDI AUTOMATICAMENTE fa in modo che la puntina sia orientata verso il basso ad indicare che la galleria è fissata sul sull'area di lavoro. 3. Per chiudere una galleria "appuntata", vedi la sezione Chiudere una galleria (sulla pagina 108). La galleria non "appuntata" si chiude automaticamente quando sposti altrove il puntatore del mouse. La galleria "appuntata" rimane aperta anche quando sposti il puntatore del mouse e può venire spostata e fissata (sulla pagina 103) altrove. Nota: come impostazione predefinita la GALLERIA RIEMPIMENTI non mostra il suo titolo ma solo l'icona finché non viene aperta. Web Designer mostra sempre il titolo dell'ultima galleria che hai aperto.

Spostare e fissare un galleria Puoi "staccare" una galleria dalla relativa barra e spostarla in un punto più comodo dell'area di lavoro. È anche possibile fissare la galleria (o un gruppo di gallerie) in alto, in basso a destra o a sinistra dell'area di lavoro.

103

104

Una galleria può essere spostata ovunque all'interno dell'area di lavoro.

Per spostare una galleria: 1. Apri una galleria e clicca il tasto NASCONDI AUTOMATICAMENTE per fissare la

galleria su un'altra area. Il pulsante si trasforma in una puntina orientata verso il basso ad indicare che la galleria può essere spostata e fissata altrove. 2. Clicca e trascina sulla barra del titolo della galleria per spostarla. Puoi decidere di lasciare che la galleria "fluttui" nell'area lavoro o fissarla in un altro punto. Se sposti la bitmap o la galleria riempimenti, le due gallerie sono raggruppate e si spostano insieme. Accedi ad una galleria individuale cliccando sulla relativa scheda sulla parte inferiore del gruppo oppure clicca e trascina una scheda per spostarla dal gruppo. Quando clicchi e trascini la barra del titolo di una galleria che può essere spostata, compariranno delle frecce ad indicare che la galleria può essere fissata su un'altra area.

www.magix.com

Utilizzo dei documenti

Trascinando la galleria appaiono le frecce nel centro, in alto, in basso, a sinistra e destra dell'area di lavoro. Fissa la galleria trascinandola su una freccia.

Esempio di una galleria che Ă¨ stata fissata sulla parte sinistra dello spazio di lavoro.

105

106 Per fissare una galleria: 1. Clicca e trascina la galleria sulla freccia che punta verso l'area su cui la desideri

posizionare. Per esempio, se desideri posizionare la galleria in cima allo schermo, spostala sulla freccia che punta verso l'alto nella parte superiore dell'area di lavoro. 2. Quando il puntatore del mouse raggiunge la freccia, una casella grigia trasparente evidenzia la nuova sede della galleria. 3. Rilascia il tasto del mouse per ancorare una galleria. Ora quando chiudi la galleria (o si chiude automaticamente) la sua scheda appare nella nuova posizione. 4. Posiziona il mouse sulla scheda o cliccaci sopra per riaprire la galleria. Nota: per spostare tutte le gallerie nella posizione standard, scegli BARRE DI CONTROLLO dalla FINESTRA di menu, clicca su GALLERIE e poi su RESET .

Uso delle gallerie Per aprire o chiudere una sezione in una galleria: • • •

Clicca sull'icona APRI/CHIUDI. Oppure clicca due volte sul titolo. O clicca con il tasto destro su una sezione per mostrare un menu pop-up. Seleziona APRI/CHIUDI. Il menu pop-up ha anche le opzioni per scorrere alla sezione precedente o successiva.

Questa illustrazione mostra la galleria aperta. Le altre gallerie sono simili.

www.magix.com

Utilizzo dei documenti Il pulsanti in alto dipendono dalla galleria (per es. RIEMPI e TRANSP si trovano solo nella galleria BITMAP .) Comunque, la maggior parte delle gallerie ha questi pulsanti: inserisce gli elementi selezionati nella galleria. Clicca sugli elementi per selezionarli.

APPLICA

OPZIONI

• • • • •

apre un menu in cui puoi scegliere:

descritto in seguito nella sezione per la ricerca di un nome di un elemento. — descritto in seguito nella sezione di ri-ordinamento degli elementi in una galleria. PROPRIETÀ — offre il controllo delle dimensioni delle icone e della quantità di informazioni mostrate nella galleria. AGGIUNGI (clipart, riempimento e font) — descritto successivamente nella sezione sull'aggiunta di elementi a una galleria. RIMUOVI (clipart, riempimento e font) — descritto in seguito nel capitolo sull'eliminazione delle sezioni di una galleria. TROVA

ORDINA

Seleziona elementi Per selezionare un elemento: • • •

clicca su un elemento per selezionarlo. Oppure clicca su un elemento e poi clicca su un altro elemento tenendo premuto  - tutti gli elementi compresi tra i due punti verranno selezionati. Oppure clicca tenendo premuto Ctrl per aggiungere quell'elemento alla selezione.

Riordino degli elementi di una galleria In alcune gallerie con il comando OPZIONI > ORDINA si accede ad un dialogo. Puoi ordinare le gallerie in base al nome o altri criteri, secondo la galleria. La chiave primaria controlla l'ordine iniziale. Per alcuni parametri come il tipo del file o la lunghezza del nome ci potrebbero essere due o tre file corrispondenti. Questi file possono quindi essere ordinati usando la chiave secondaria.

Cerca un nome di elemento Puoi ricercare, ad esempio, tutti i nomi contenenti la parola rosso: 1. scegli Opzioni > Trova. 2. Scrivi ROSSO nella casella di testo. 3. Seleziona CERA NOMI & PAROLE CHIAVE (per

selezionare solo i nomi elemento - file colore ecc.) oppure CERCA TUTTE LE INFORMAZIONI (per cercare i nomi e le parole chiave disponibili in alcune gallerie)

107

108

Aggiunta di elementi a una galleria Potresti voler aggiungere elementi extra a queste gallerie (solo gallerie DESIGN & RIEMPI ). A tale scopo: 1. Copia i file che vuoi aggiungere in una nuova directory (cartella) usando Esplora

Risorse di Windows. Per la GALLERIA CLIPART questi file possono essere diversi tipi di immagini vettoriali o bitmap. Per la GALLERIA RIEMPIMENTI possono appartenere a uno qualsiasi dei formati di bitmap supportati da Web Designer (elencati in importazione ed esportazione (sulla pagina 349)). 2. Nella galleria desiderata, clicca sul pulsante "DESIGN /DISC FILLS" . Si aprirà così una finestra di dialogo. 3. Usa la finestra di dialogo per selezionare la cartella che vuoi aggiungere. 4. Clicca su "AGGIUNGI" . In questo modo crei una nuova sezione della galleria. Se in seguito vuoi aggiungere altri elementi alla cartella: 1. Copia i nuovi file nella cartella esistente. 2. Nella galleria desiderata, clicca sul pulsante "DESIGN/DISC FILLS" . Si aprirà così

una finestra di dialogo. 3. Usa la finestra di dialogo per selezionare la cartella che vuoi aggiungere. 4. Clicca su "AGGIORNA" per aggiornare la sezione della galleria.

Eliminazione di sezioni da una galleria Per cancellare una sezione da una galleria (solo gallerie CLIPART & RIEMPIMENTI): 1. Clicca sul titolo delle sezione o le sezioni che vuoi cancellare. 2. Clicca su "RIMUOVI" .

Se in seguito vorrai ripristinare la sezione aggiungi la sua cartella alla galleria (come descritto prima).

Chiudere una galleria Per impostazione predefinita il tasto della galleria NASCONDI AUTOMATICAMENTE (per es. il tasto NASCONDI AUTOMATICAMENTE nell'angolo in alto a destra non è sbloccato) per cui la galleria si chiude automaticamente quando sposti il puntatore del mouse. Tuttavia se hai disattivato il tasto NASCONDI AUTOMATICAMENTE, la galleria deve essere chiusa manualmente. Per chiudere la galleria fluttuante, clicca su CHIUDI nella parte in alto a destra della galleria. La galleria si chiude e la sua scheda appare nella barra della galleria.

www.magix.com

Utilizzo dei documenti Per chiudere una galleria ancorata, clicca il tasto NASCONDI AUTOMATICAMENTE o CHIUDI posti in altro a destra nella galleria. La galleria si chiude e la sua scheda è visualizzata nell'area di lavoro dove è stata ancorata. Per riaprire la galleria, posizionaci sopra il puntatore del mouse o clicca sulla sua scheda.

Rimuovere una galleria dall'area di lavoro. Per impostazione predifinita, quando chiudi una galleria, Web Designer la riposiziona nella barra gallerie in modo da poter essere riaperta puntando il mouse sulla sua icona o scheda. Tuttavia puoi configurare Web Designer in modo da rimuovere le gallerie dallo spazio di lavoro se non sono necessarie. Per rimuovere delle gallerie non desiderate dallo spazio di lavoro, procedi come segue: •

•

Scegli GALLERIE dal menu UTILITÀ e scegli la galleria che desideri rimuovere. La galleria selezionata sparisce dallo spazio di lavoro. Se desideri reintegrare una galleria, scegli GALLERIE dal menu UTILITÀ e scegli la galleria che desideri reintegrare. Scegli BARRE DI CONTROLLO dal menu FINESTRA e scorri in basso l'elenco di barre disponibili per trovare GALLERIE. Clicca la casella GALLERIE per visualizzare la relativa barra degli strumenti. Clicca su CHIUDI. Nella barra degli strumenti delle gallerie che appare ora sopra lo spazio di lavoro, puoi attivare/disattivare la visualizzazione di una galleria cliccando sul tasto della sua barra strumenti.

Ripristina le barre/gallerie di controllo predefinite Scegli "FINESTRA'" > "BARRE DI CONTROLLO" e clicca RESET per ripristinare le barre di controllo all'impostazioni predefinite.

109

110

Annulla e Ripristina Cosa sono annulla e ripristina? Tutti facciamo errori o cambiamo idea. Web Designer rende più facile correggere errori o cancellare cambiamenti indesiderati. Ogni azione che compi viene registrata in una lista di annullamenti che ti permette non solo di annullare l'ultima operazione, ma anche di tornare indietro eliminando passaggi successivi. In questo modo hai la libertà di sperimentare sapendo che potrai eliminare qualsiasi passaggio non venga come desideravi.

Il comando Annulla Annulla cancella l'effetto dell'ultima operazione. Per annullare un'operazione: • • • •

Clicca sul pulsante ANNULLA sulla barra di controllo STANDARD . Oppure vai a Elabora > Annulla (la descrizione esatta ti dice qual'è il prossimo passaggio di annullamento, per esempio annullamento della scala). Oppure premi Ctrl+Z. Oppure premi il tasto della virgola (in qualsiasi strumento eccetto lo strumento di TESTO ).

Puoi ripeter l'azione di annullamento e retrocedere attraverso la sequenza delle operazioni precedenti.

Il comando Ripristina Ripristina cancella l'ultima azione di annullamento. Per ripristinare l'ultima operazione: • • • •

Clicca sul pulsante RIPRISTINA nella barra di controllo STANDARD . Oppure vai a Elabora > Ripristina (la descrizione esatta ti dice qual'è il prossimo passaggio di ripristino, per esempio ripristino della scala). Oppure premi Ctrl+Y. Oppure premi il tasto del punto (in qualsiasi strumento eccetto lo strumento di TESTO ).

Puoi ripristinare solo immediatamente dopo l'annullamento. Non puoi ripristinare dopo avere modificato il documento (per esempio, spostando o aggiungendo un oggetto).

www.magix.com

Utilizzo degli oggetti

Utilizzo degli oggetti Il Selector Il SELECTOR è lo strumento principale per selezionare, spostare, ridimensionare e ruotare gli oggetti. Tipicamente è lo strumento più usato ed è quello principale per modificare i documenti.

Dimensioni della selezione Controlli della dimensione % Blocca rapporto d'aspetto Ruota e inclina Flip Scala larghezza della linea Applica nomi Per usare il SELECTOR : • •

Clicca sul SELECTOR nella BARRA DEGLI STRUMENTI PRINCIPALE . Altrimenti premi i tasti "Alt + S", "V", o "F2".

Quando passi al SELECTOR , se ci sono degli oggetti selezionati in un gruppo o altri tipi di oggetti misti, l'oggetto che li raggruppa viene selezionato al loro posto. Dal momento che il SELETTORE è lo strumento più usato, esiste un comando veloce aggiuntivo che serve a passare al selettore ed a tornare velocemente allo strumento precedente. Se stai utilizzando un altro strumento, puoi passare in modo semplice al SELETTORE : •

Premi e rilascia i tasti "Alt + S" per passare al SELETTORE. Premi nuovamente questa combinazione per tornare allo strumento precedente.

Selezione oggetti Clicca su una parte visibile dell'oggetto per selezionare un singolo oggetto.

111

112

Cambia la selezione dell'oggetto Dopo aver selezionato un oggetto, puoi utilizzare i seguenti tasti per modificare la selezione: • • • •

Con "Fine" selezioni l'oggetto posteriore. Con "Inizio" selezione l'oggetto anteriore. Con "Tab" selezioni l'oggetto posto subito dopo l'oggetto. Con  + "Tab" selezioni l'oggetto posto subito prima dell'oggetto.

Gli oggetti anteriori e posteriori sono descritti in "Gestione oggetto (sulla pagina 111)".

Selezione cornice Per selezionare diversi oggetti tieni premuto il tasto del mouse. Trascinando il mouse, puoi disegnare un rettangolo di selezione e tutti gli oggetti che si trovano completamente all'interno del rettangolo vengono selezionati. In altri programmi di grafica, quest'opzione viene chiamata selezione rettangolare. Se un oggetto costituisce un ostacolo impedendoti di disegnare un rettangolo e costringendoti a spostarlo, tieni premuto  mentre trascini il rettangolo di selezione.

Estendi selezione Per selezionare oggetti supplementari: • •

 + clicca sugli oggetti. O  + trascina il mouse. In questo modo disegni un rettangolo di selezione ed aggiungi alla selezione gli oggetti all'interno del rettangolo.

Seleziona sotto Tieni premuto Alt per selezionare gli oggetti nascosti da altri oggetti. Cliccando e tenendo premuto Alt puoi passare attraverso vari oggetti sovrapposti.

Seleziona dentro Puoi selezionare un oggetto all'interno di un gruppo o di una altro oggetto container tenendo premuto "Ctrl" mentre ci clicchi sopra. Questa operazione è chiamata selezione all'interno di un gruppo L'oggetto su cui clicchi sarà sempre selezionato anche se si trova infondo a tanti livelli di gruppi annidati. Quando hai dei gruppi annidati così profondi, potresti voler selezionare uno dei gruppi (un gruppo contenuto in un altro). Per eseguire questa selezione, tieni premuti i tasti "Alt" e "Ctrl". Il primo click seleziona il gruppo di livello superiore (proprio come succede con un click

www.magix.com

Utilizzo degli oggetti normale). Clicca nuovamente e verrà selezionato invece e il gruppo successivo di livello inferiore nella gerarchia. Continua a cliccare per andare sempre più infondo alla struttura del gruppo fino a selezionare il gruppo desiderato. Alcune operazioni non sono consentite con la selezione interna. Per esempio, la selezione rettangolare e la copia effettuata cliccando con il tasto destro del mouse non funzionano con la selezione all'interno.

Spostamento di oggetti selezionati o all'interno di altri Se hai bisogno di spostare un oggetto selezionato che è sotto un altro o all'interno di un gruppo, limitarti a trascinarlo non basta perché porterà con sé altri oggetti. Per evitarlo premi "Ctrl + Alt" e inizia a trascinare. Questo trascinerà sempre l'oggetto selezionato. Puoi rilasciare i tasti quando inizi il trascinamento. Altrimenti puoi usare i tasti freccia  sulla tastiera per spostare l'oggetto poco a poco.

Selezione e layer Puoi selezionare anche oggetti in layer bloccati o invisibili. Vedi Galleria pagine e layers (sulla pagina 337) per maggiori dettagli

Selezione di tutti gli oggetti Per selezionare tutti gli oggetti: • •

scegli Elabora > Seleziona tutto. Oppure premi Ctrl+A.

Deseleziona un oggetto Per deselezionare tutti gli oggetti: • • •

clicca in qualsiasi punti su una parte inutilizzata del documento. oppure scegli Elabora > Elimina selezione. Oppure premi Esc.

Per deselezionare un oggetto tra molti: •

Shift + click sull'oggetto. In questo modo deselezioni l'oggetto. Gli altri oggetti rimangono selezionati.

113

114

Marker di selezione Ogni oggetto selezionato mostra un singolo marker di selezione che indica che è stato selezionato. Questo è un utile promemoria per quando selezioni e deselezioni vari oggetti.

Linea di stato Anche la linea di stato nella parte inferiore della finestra descrive ciò che è selezionato.

Maniglie di selezione Le maniglie di selezione ti permettono di ridimensionare ed espandere gli oggetti selezionati. Vedi Estensione e compressione di oggetti per ulteriori dettagli. Cliccando più volte su un oggetto alterni la visualizzazione delle maniglie di selezione e di rotazione.

Tab Con un qualsiasi oggetto selezionato, premendo Tab e  puoi muoverti attraverso gli oggetti selezionati (oggetto precedente e successivo nel documento).

www.magix.com

Utilizzo degli oggetti

Spostamento degli oggetti Per spostare un oggetto attraverso la pagina 1. scegli lo strumento di SELEZIONE. 2. Trascina l'oggetto nella posizione richiesta. Tieni premuto Ctrl per limitare la

direzione del movimento ad uno degli angoli di limitazione. Gli angoli di limitazione sono definibili dall'utente. Vedi il capitolo Personalizzazione di Web Designer (sulla pagina 364). Se tieni premuti i tasti Ctrl+Alt puoi trascinare l'oggetto selezionato anche se il cursore non si trova sopra di esso. Questo risulta utile quando l'oggetto selezionato Ă¨ nascosto dietro un altro oggetto o parte di un gruppo. Rilascia i tasti Ctrl e Alt dopo aver iniziato lo spostamento, a meno che tu non voglia limitare il movimento. Puoi muovere gli oggetti anche utilizzando i tasti freccia. Questo viene descritto nella prossima pagina.

Rilascia una copia Durante un movimento (e sempre tenendo premuto il pulsante sinistro del mouse) clicca il pulsante destro del mouse o premi + sulla tastiera numerica per rilasciare una copia dell'oggetto. L'oggetto originale non si muove. Puoi eseguire questa operazione quante volte vuoi per creare una serie di copie di oggetti. Oppure, analogamente, tieni premuto il tasto destro del mouse e trascina. In questo modo viene trascinata immediatamente una copia dell'oggetto. Clicca sul tasto sinistro per rilasciare la copia nella posizione attuale del mouse.

Riempimenti Normalmente, muovendo un oggetto si muove con esso anche il riempimento:

Movimento normale da sinistra a destra con un oggetto lineare con riempimento.

Questo si applica anche alla rotazione, inclinazione, scalatura e distorsione degli oggetti.

115

116 Web Designer può anche muovere l'oggetto senza muovere il riempimento. Per farlo clicca sul tasto - nella tastiera numerica durante il movimento.

Lo stesso movimento, premendo però il tasto - (meno) durante il trascinamento.

Spostamento progressivo degli oggetti Solitamente puoi muovere un oggetto per una breve distanza usando i tasti freccia . (Questi tasti a volte hanno altre funzioni, specialmente nello strumento di TESTO.) Lo spostamento progressivo non è influenzato dallo snapping magnetico o di griglia. (Lo snapping viene descritto in seguito.)

Modificatori dello spostamento progressivo Per modificare la distanza dello spostamento progressivo, usa queste combinazioni di tasti mentre utilizzi i pulsanti freccia: • • • • •

Ctrl  Ctrl +  Alt Alt + 

5 volte la distanza normale 10 volte la distanza normale 1/% della distanza normale spostamento di 1 pixel spostamento di 10 pixels

Puoi cambiare la distanza normale di spostamento nella tabella GENERALE in Strumenti > Opzioni. (Vedi il capitolo Personalizzazione di Web Designer (sulla pagina 369).) Lo spostamento progressivo funzioni nella maggior parte degli strumenti.

Taglia, copia e incolla Questi comandi ti permettono di spostare o copiare un oggetto nello stesso documento o tra documenti diversi. La procedura è: 1. Seleziona l'oggetto 2. Per eliminare l'oggetto, scegli "ELABORA -> TAGLIA" (o "Ctrl + X"). Per copiare

l'oggetto senza spostarlo, scegli "ELABORA -> COPIA" (o "Ctrl + C"). Entrambe le opzioni mettono l'oggetto o una sua copia negli appunti. 3. Scegli "ELABORA" -> "INCOLLA", "Ctrl + V", o "INSERISCI". Questo comando imposta i contenuti degli appunti nel documento

www.magix.com

Utilizzo degli oggetti Nota che se gli oggetti che copi sono tutti sullo stesso layer, puoi incolarli su qualsiasi layer, rendendolo prima layer corrente e scegliendo poi "ELABORA" > "INCOLLA" > "INCOLLA SUL LAYER" o In questo caso il layer da cui sono copiati i livelli viene ignorato. Tuttavia se gli oggeti che copi sono su diversi layer, nell'operazione di copiatura la strutura dei layer viene mantenuta. In questo modo di sarà possibile copiare dati a più livelli all'interno di un documento o su un altro ancora. I layer mancanti nel documento di destinazione sono creati automaticamente tramite questa operazione. Per cui se per esempio copi un tasto con funzione mouse-over, che ha un oggetto sul layer mouseOff e un altro oggetto sul livello MouseOver, su un documento nuovo, questi due layer , se non esistono già, verranno creati e il tasto oggetti copiato al loro interno. "Ctrl + Shift + V" o "ELABORA" > "INCOLLA IN POSZIONE", incolla il contenuto degli appunti nella stessa posizione X/Y da cui è stato tagliato o copiato. Questo si applica solo agli oggetti tagliati o copiati all'interno di Web Designer. Oggetti importati da altri programmi vengono sempre incollati al centro della visuale attuale. L'oggetto rimane negli appunti in modo che tu lo possa incollare più volte. Se ci sono diversi formati negli appunti, MAGIX Web Designer mostrerà una finestra di dialogo INCOLLA SPECIALE che ti permette di scegliere il formato in cui vuoi incollare (per es. quando incolli del testo puoi scegliere se incollarlo formattato o meno). Inoltre, è possibile vedere le opzioni per incollare seguenti, a seconda del contenuto degli appunti

Incolla testo non formattato Incolla i testi memorizzati negli appunti, sul tuo documento senza dover formattare.

Incolla formato/attributi Preserva il formato (per es., carattere e dimensioni) o attributi di stile (per es. colore di linea e di riempimento) dell'oggetto incollato.

Incolla nel layer corrente Funziona come INCOLLA NELLA POSIZONE, ma in questo caso l'ogetto verrà incollato solo sul layer corrente. È utile se desideri mostrare o nascondere solo l'oggetto incollato quando i layer sotto e sopra sono visibili.

Incolla nella posizione sul layer corrente Funziona come il comando INCOLLA NEL LAYER CORRENTE con la differenza che l'oggetto verrà incollato in the current layer nella stessa posizione da cui è stato copiato.

117

118

Eliminazione di oggetti dal documento Per prima cosa seleziona gli oggetti che desideri eliminare. In seguito puoi tagliare gli oggett negli appunti oppure cancellarli.

Tagliare gli oggetti Scegli "Elabora -> Taglia" o premi "Ctrl + X". Il contenuto degli appunti viene sovrascritto e puoi incollare l'oggetto o gli oggetti cancellati altrove se lo desideri.

Cancellare gli oggetti Scegli "Elabora -> Elimina" o premi "Canc" o clicca sul pulsante ELIMINA sulla barra di controllo STANDARD . In questo caso gli oggetti cancellati non vengono messi negli appunti. Se cancelli accidentalmente un oggetto, annulla lo recupera.

Duplicazione e clonazione Entrambe queste opzioni creano una copia dell'oggetto selezionato. L'oggetto originale viene deselezionato e il duplicato o clone diventa l'oggetto selezionato. Puoi anche duplicare un oggetto durante un movimento, rotazioni, scalatura o inclinazione. Durante l'azione di trascinamento (e mentre continui a tenere premuto il tasto sinistro del mouse) clicca il pulsante destro del mouse o premi + sulla tastiera numerica per rilasciare una copia dell'oggetto. L'oggetto originale non si muove. Puoi fare ciĂ˛ quanto volte preferisci per creare una serie di oggetti duplicati. Un metodo semplice per creare una o piĂš copie di un oggetto allineato orizzontalmente o verticalmente consiste nel trascinare l'oggetto, tenere premuto il tasto Ctrl per limitare il movimento, e cliccare col tasto destro del mouse (oppure premere + nella tastiera numerica) per ogni copia desiderata.

Per sostituire velocemente una linea di oggetti, disegnane uno, trascinalo tenendo premuto Ctrl e clicca col tasto destro per ogni copia necessaria.

www.magix.com

Utilizzo degli oggetti

Duplicazione Scegli Elabora > Duplica o premi Ctrl+D. La copia viene disposta leggermente al lato dell'originale, in genere in basso a destra. La distanza di duplicazione Ă¨ definibile dall'utente - vedi il capitolo Personalizzazione di Web Designer (sulla pagina 369)

Clonazione Scegli Elabora > Clona oppure premi Ctrl+K. In questo modo viene posizionata una copia esattamente sopra l'originale. La clonazione Ă¨ un metodo semplice per creare forme concentriche.

Questo esempio utilizza come originale una grande lettera A con riempimento negro ed un contorno bianco di 4 pt di spessore ed un clone senza riempimento e ina linea nera di 1 pt di spessore.

Spostamenti di oggetti avanti e indietro Le illustrazioni complesse hanno molti oggetti disposti uno sopra l'altro, come in questo caso:

il bersaglio sulla sinistra Ă¨ composto da tre cerchi disposti uno sopra l'altro.

Per essere sicuro che gli oggetti siano sovrapposti nel giusto ordine, puoi aver bisogno di modificarne la sequenza. (L'oggetto in primo piano copre sempre gli oggetti inferiori,

119

120 che a loro volta coprono altri oggetti disposti dietro. Ogni nuovo oggetto viene sempre creato in cima agli altri oggetti.) Il menu Adatta ti fornisce quattro opzioni. • • • •

(Ctrl + F): questo comando porta l'oggetto selezionato in primo piano. Quindi nasconderà ogni oggetto che copre. SPOSTA AVANTI (Ctrl +  + F): questo comando muove l'oggetto in avanti di un livello verso il primo piano, come avanzare su una scale un gradino alla volta. SPOSTA INDIETRO (Ctrl +  + B): questo comando muove l'oggetto indietro di un livello. PORTA IN FONDO (Ctrl+B): questo comando sposta l'oggetto sul fondo. PORTA IN PRIMO PIANO

Queste opzioni spostano gli oggetti avanti e indietro all'interno dei loro livelli. I comandi SPOSTA AL LIVELLO DAVANTI e SPOSTA AL LIVELLO INDIETRO ti permettono di muovere gli oggetti tra i livelli visibili. (I livelli invisibili vengono saltati quando muovi gli oggetti.) Per maggiori informazioni sui livelli vai al capitolo Livelli (sulla pagina 337).

Ruotare gli oggetti Si tratta di una funzione del SELETTORE . Quando sei in modalità rotazione, il centro di trasformazione (attorno al quale ruota l'oggetto) inizialmente appare al centro dell'oggetto, come viene indicato da un piccolo mirino come questo. Clicca di nuovo sull'oggetto per mettere il selettore in modalità rotazione. Per spostare il centro di trasformazione, trascina il mirino come ti serve. Attenzione: Se il centro di rotazione viene spostato, rimane in questo punto per tutti gli oggetti selezionati fino a quanto tutti gli oggetti non vengono deselezionati. A quel punto torna al centro degli oggetti selezionati.

Rotazione con il mouse Per visualizzare le maniglie di rotazione (invece delle maniglie di ridimensionamento) nella forma selezionata nello strumento di selezione, clicca nuovamente su di essa. Trascina una freccia in uno degli angoli. Mentre la trascini, l'oggetto ruota attorno al centro di trasformazione. La InfoBar mostra l'angolo di rotazione attuale.

www.magix.com

Utilizzo degli oggetti " + trascina" serve a ruotare l'oggetto sul suo centro (il centro di trasformazione viene ignorato). Tieni premuto Ctrl durante la rotazione per eseguire una rotazione limitata. Questo significa che l'oggetto ruoterà solo con una selezione limitata di angoli. Ruoterà solo con multipli del valore dell'angolo limitato che per impostazione predefinita è di 45 gradi. Ma in aggiunta, includerà angoli ai quali ogni bordo dritto significativo è allineato verticalmente o orizzontalmente. Per cui diventa semplice far ruotare un rettangolo che è girato leggermente di modo che sia nuovamente messo in posizione diritta (allineato allo schermo). Oppure per rendere un bordo dritto una forma verticale o orizzontale. Questi bordi devono essere almeno il 25% della larghezza o dell'altezza della forma per essere considerati significativi durante una rotazione limitata. L'angolo bloccato è definito dall'utente. Vedi "Personalizzazione di Web Designer (sulla pagina 369)". Per creare una copia durante la rotazione, clicca "+" sul tastierino numerico mentre ruoti o premi il tasto destro del mouse.

Rotazione con angolazione precisa (utilizzando la InfoBar) Inserisci il valore di angolazione nella casella di rotazione e premi "". Gli angoli positivi ruotano in senso antiorario e quelli negativi in senso orario. Clicca sulle frecce verso destra per sposatare leggermente l'angolo di rotazione

Rotazione degli oggetti in modalità "Modifica dimensioni"

121

122 È possibile ruotare ed inclinare un oggetto anche se non si è in modalità di rotazione. Utilizzando la modalità "Modifica dimensioni", muovi l'indicatore del mouse in piccole aree vicino le maniglie dell'area di selezione così come illustrato sopra. L'indicatore del mouse si trasforma in un'icona simboleggiante la rotazione o l'inclinazione, mostrandoti che ora sei in grado di ruotare o inclinare.

Scalatura di oggetti (cambio dimensioni) Questa opzione fa parte dello strumento di SELEZIONE.

Pulsante scala larghezza della linea Con il pulsante SCALA LARGHEZZA DELLA LINEA attivato, scalando un oggetto vengono scalate anche le ampiezze delle sue linee. Con il pulsante disattivato, le ampiezze delle linee rimangono invariate. Puoi attivare e disattivare questo pulsante durante il trascinamento cliccando sul tasto / sulla tastiera numerica. Questo controllo determina anche se i valori X, Y, ampiezza e altezza nella barra informazioni includono l'ampiezza del contorno o pennello. A volte è utili essere in grado di vedere e controllare le dimensioni esatte della forma ignorando lo spessore della linea.

Pulsante Blocca rapporto d'aspetto Con il pulsante BLOCCA RAPPORTO D'ASPETTO attivato, il rapporto larghezza/altezza rimane costante quando modifichi le dimensioni dell'oggetto. In altre parole, le proporzioni della forma rimangono uguali a quelle originali. Si raccomanda di attivare questo pulsante nella maggior parte dei casi per evitare deformazioni quando cambi le dimensioni di un oggetto. Se questo pulsante è disattivato, puoi cambiare il rapporto d'aspetto quando modifichi le dimensioni dell'oggetto, in altre parole puoi ampliare l'oggetto in una direzione o in un'altra quando trascini una maniglia di angolo o quando inserisci una nuova dimensione.

Scalatura di foto (solo documenti web) Quando trascini le maniglie laterali su una foto in un documento web, invece di comprimerla o allungarla (cosa che raramente è utile e quasi sempre la rovina) il ritaglio della foto è modificato Di nuovo, se davvero vuoi distorcere l'immagine, tieni premuto Alt mentre la trascini.

www.magix.com

Utilizzo degli oggetti

Ridimensionamento con il mouse Il SELETTORE deve essere in modalità ridimensiona (le maniglie di selezione sono a forma di quadratini). Se necessario, clicca sull'oggetto per passare alla modalità di ridimensionamento. Trascina una delle maniglie negli angoli. L'oggetto si ridimensiona mentre sposti il puntatore in diagonale. La InfoBar mostra il ridimensionamento attuale. L'oggetto si ridimensionerà tra la maniglia trascinata e quella opposta. Per usare un altro punto dell'oggetto come punto fisso sposta il centro di trasformazione su di esso e usa o pulsanti della InfoBar per ridimensionare. Tieni premuto  mentre trascini per ridimensionare l'oggetto sul suo centro. Questa operazione funziona a prescindere dalla posizione del centro di trasformazione. Trascinare tenendo premuto "Ctrl" ridimensiona l'oggetto per multipli delle sue dimensioni originali (x2, x3, e così via). Per creare una copia mentre ridimensioni (lasciando l'originale al suo posto) clicca con il tasto destro o premi "+" sul tastierino numerico. Trascinando le maniglie laterali allunghi o restringi l'oggetto. Questo processo viene descritto in Estensione e compressione di oggetti.

Ridimensionamento con la InfoBar

Scrivi nei riquadri RIDIMENSIONA TESTO e premi "". • •

Ridimensionare sotto il 100% rimpicciolisce l'oggetto. 50 dimezza le dimensioni dell'oggetto. Ridimensionare sopra il 100% ingrandisce l'oggetto. 200 raddoppia le dimensioni dell'oggetto.

Se BLOCCA PROPORZIONI è attivato, puoi scrivere in uno qualsiasi dei riquadri per ridimensionare l'oggetto della percentuale desiderata. Se il pulsante non è attivato puoi inserire valori separati per la larghezza e l'altezza. Altrimenti, scrivi la larghezza e l'altezza desiderate nei riquadri di testo W e H .

123

124 Se il pulsante BLOCCA PROPORZIONI è attivato, ridimensiona l'oggetto mantenendone le proporzioni. Puoi inserire le dimensioni in qualsiasi unità di misura, come 1 cm. Ridimensionare con i pulsanti dell'Infobar (o riquadri numerici) ridimensiona sempre l'oggetto attorno al centro di trasformazione. Lo puoi posizionare in qualsiasi punto dell'oggetto, come descritto in "Rotazione degli oggetti".

Ridimensionamento gruppi Se ridimensioni un gruppo tramite le maniglie laterali, l'operazione avverrà in maniera intelligente evitando che che gli elementi del gruppo vengano compressi. Prendi come esempio questo gruppo a piè di pagina:

Il risultato che si ottiene dovrebbe essere questo:

Il testo ha mantenuto le stesse dimensioni e anche gli angoli arrotondati non sono stati alterati. Funziona meglio su alcuni gruppi rispetto ad altri a seconda del design e della complessità che li caratterizza. Se invece desideri che il risultato sia di compressione, dove ogni elemento del gruppo viene semplicemente ridimensionato, basta tenere premuto il tasto Alt mentre esegui l'operazione di trascinamento.

Come puoi vedere, il testo è stato compresso e gli angoli arrotondati non sono più rotondi. Questo tipo di ridimensionamento può essere utile per alcuni gruppi, generalmente grafiche che non includono testi o angoli arrotondati.

www.magix.com

Utilizzo degli oggetti

Riflesso di oggetti Questa opzione fa parte dello strumento di SELEZIONE. Cliccando sul pulsante RIFLETTI viene riflesso l'oggetto verticalmente od orizzontalmente intorno al centro di trasformazione. Le dimensioni e il rapporto d'aspetto non cambiano - l'oggetto viene riflesso e basta.

Estensione e compressione di oggetti Questa operazione è simile al ridimensionamento ma l'oggetto viene ridimensionato in una sola direzione. Allungare e accorciare sono sostanzialmente la stessa operazione: entrambe modificano le dimensioni dell'oggetto, una allargandolo e l'altra riducendolo.

Estensione/compressione con il mouse Il SELETTORE deve essere in modalità ridimensiona. (Le maniglie di selezione sono quadrati). Se necessario, clicca sull'oggetto per passare alla modalità di ridimensionamento. Usa le maniglie ai lati, in alto e in basso invece di quelle agli angoli per allungare o accorciare una forma in una sola dimensione. Le maniglie compaiono solo sui rettangoli che non contengono immagini fotografiche, perché altrimenti cambiare una sola dimensione di un oggetto raramente produce risultati utili (le foto si distorcono). Trascina una delle maniglie sui lati. L'oggetto si ridimensiona mentre sposti il puntatore nella direzione desiderata. La InfoBar mostra il ridimensionamento attuale. Il pulsante BLOCCA PROPORZIONI viene ignorato. Clicca con il tasto destro del mouse o premi "+" sul tastierino numerico mentre trascini per allungare o accorciare l'oggetto lasciando l'originale al suo posto.

Estensione/compressione con la InfoBar Il pulsante BLOCCA PROPORZIONI deve essere disattivato (se è attivo, ridimensioni l'oggetto invece che allungarlo o accorciarlo). Scrivi nel riquadro della larghezza o dell'altezza (secondo le necessità) e premi "". Altrimenti inserisci una modifica in percentuale di larghezza o altezza. Inserendo

125

126 200% nel riquadro percentuale superiore renderà l'oggetto largo il doppio mantenendo la stessa altezza. Se BLOCCA PROPORZIONI è attivo non si allargherà.

Inclinare gli oggetti Si tratta di una funzione del SELETTORE .

Sulla sinistra c'è l'oggetto originale, sulla destra c'è lo stesso oggetto inclinato orizzontalmente.

Inclinazione con il mouse Imposta il SELETTORE nella modalità ruota/inclina (le maniglie di selezione sono a forma di freccia) cliccando sull'oggetto. Trascina una freccia sui lati, in alto o in basso per inclinare l'oggetto. Le maniglie compaiono solo sui rettangoli che non contengono immagini fotografiche, perché altrimenti inclinare un oggetto raramente produce risultati utili (le foto si distorcono). Mentre lo trascini, l'oggetto si inclina nella direzione del movimento (verticale od orizzontale).

La InfoBar mostra l'angolo di inclinazione attuale.

" + trascinamento" per inclinare l'oggetto rispetto al suo centro. Tieni premuto "Ctrl" per limitare l'inclinazione agli angoli forzati. Clicca con il tasto destro del mouse o premi "+" sul tastierino numerico mentre trascini per creare una copia lasciando l'originale al suo posto. O trascina tenendo premuto il tasto destro del mouse per creare copie istantanee e copie in più cliccando con il tasto sinistro. Puoi anche inclinare un oggetto con la modalità di ridimensionamento del Selettore usando le aree di inclinazione. Vedi Rotazione in modalità ridimensionamento (sulla pagina 121).

Inclinazione con la InfoBar Per inclinare orizzontalmente inserisci da tastiera un angolo nella casella di testo di inclinazione e premi "".

www.magix.com

Utilizzo degli oggetti

Allineamento L'allineamento ti consente di posizionare con facilità e precisione bordi o punti specifici sugli oggetti. Può essere utilizzato per allineare bordi ad un punto specifico od una linea, oppure per creare spazi tra gli oggetti usando la griglia. MAGIX Web Designer offre tre tipi di allineamento. • • •

Allinea alla griglia Allineamento magnetico Allinea alle linee guida o agli oggetti guida

L'allineamento alla griglia è utile per creare spazi tra gli oggetti a intervalli regolari, oppure per moltiplicare le dimensioni di un dato valore. Le linee guida sono utili per allineare i bordi (anche se gli oggetti guida sono ancora migliori) e l'allineamento magnetico è un metodo generale per posizionare linee, punti o bordi esattamente sopra altre linee, punti o bordi di oggetti vicini.

Aggancia alla griglia Quando la funzione AGGANCIA ALLA GRIGLIA è selezionata, i punti della griglia si comportano come delle calamite. Clicca col il tasto destro sulla pasteboard e scegli AGGANCIA A > AGGANCIA GRIGLIA o utilizza l'opzione di menu FINESTRA > "AGGANCIA GRIGLIA" , (oppure premi "." (punto decimale) sulla tastiera numerica. Puoi regolare la spaziatura della griglia dal dialogo delle opzioni (clicca con il tasto destro e scegli OPZIONI PAGINA o utilizza il comando di menu "UTILITÀ " > "OPZIONI ") sulla scheda Griglia e righello. Per default i modelli di documenti web devono allinearsi alla griglia con una sola griglia pixel così che di solito tutte le dimensioni e posizioni dell'oggetto sono interi pixel. Quando si trascinano degli oggetti i margini si allineano ai punti della griglia. Se le dimensioni dell'oggetto sono tali che entrambi i margini opposti non possono essere allineati, il margine che si allinea dipende dalla direzione nella quale l'oggetto viene trascinato.

127

128

Compare così una griglia con 5 suddivisioni tra divisioni maggiori. La forma ha un contorno molto spesso di colore grigio. Dato che l'oggetto è stato trascinato verso il basso e a sinistra, i margini inferiori esterni sono scattati verso i punti griglia più vicini.

Nota: la spaziatura standard della griglia è di 50 pixel per linee di griglia principali con 50 suddivisioni. Questo significa che la griglia è distanziata di esattamente un pixel e dare l'impressione che non stia funzionando con un normale zoom al 100%. Se zoomi del 500% puoi vedere come scatta in modo corretto. Altrimenti cambia i valori della griglia in modo da avere 10 suddivisioni il che significa avere i punti della griglia su un confine di 5 pixel.

Ancoraggio e spessore delle linee Il comando SCALA LARGHEZZE DELLE LINEE nella InfoBar dello STRUMENTO SELECTOR , ha un effetto se l'allineamento avviene ai margini degli oggetti inclusi i loro contorni. L'esempio in alto mostra una forma con un contorno grigio molto spesso. Mostra anche (linea nera sottile) il contorno della forma stessa (il contorno più spesso è centrato sulla linea centrale in modo che due parti uguali si sovrappongano all'interno della forma e al suo esterno). Se la funzione scala larghezze delle linee è attiva, la larghezza del contorno è ritenuta importante e così la funzione "aggancia griglia" allinea alla griglia i margini degli oggetti, inclusi i contorni. Aggancia oggetti, ti permette di allineare utilizzando i margini o i contorni di mezzeria. Se i contorni, così come appaiono sullo schermo sono piccoli, c'è una minima differenza tra queste due posizioni si allineamento e quindi si

www.magix.com

Utilizzo degli oggetti preferiscono allineamenti dei margini. Quindi esegui lo zoom in se vuoi allineare le linee centrali dei contorni. Se la funzione scala larghezze delle linee non è attiva, le funzioni "aggancia griglia" e "aggancia oggetti" allinea le linee centrali degli oggetti ignorando le larghezze dei contorni. Poiché l'allineamento segue le larghezze di scala, attivarlo significa che i bordi utilizzati sono gli stessi riportati dalla barra informazioni dello STRUMENTO SELECTOR .

Allineamento oggetti magnetico (aggancia ad oggetti) Questa funzione rende molto più semplice il posizionamento preciso degli oggetti gli uni rispetto agli altri o rispetto al centro pagina o ai bordi. Se, per esempio, desideri che diverse linee comincino esattamente nello stesso punto, o vuoi che una linea si congiunga in modo preciso al bordo di un cerchio, utilizza allora la funzione "agganciamento oggetti magnetico". Puoi utilizzare questa funzione per allineare i centri degli oggetti, o allineare gli oggetti verso il centro della pagina, oppure orizzontalmente o verticalmente nella parte centrale della pagina. L'allineamento magnetico funziona quando si sposta o modifica in scala un oggetto con lo STRUMENTO DI SELEZIONE. Per attivare o disattivare l'allineamento magnetico agli oggetti, clicca il pulsante AGGANCIA OGGETTI posto in cima alla barra strumenti. In alternativa clicca con il tasto destro sulla pasteboard e scegli "AGGANCIA A" > "AGGANCIA OGGETTI" oppure utilizza l'opzione di menu "FINESTRA" > "AGGANCIA OGGETTI". Puoi attivarlo/disattivarlo durante il tascinamento premendo "s". Clicca e trascina l'oggetto che vuoi allineare. Mentre trascini, Web Designer visualizza l'icona di una calamita, linee blu e punti rossi ogni volta che ti trovi vicino ad un "punto di interesse" a cui è stato agganciato.

129

130 Indicatori di allineamento

Gli indicatori di allineamento vengono mostrati ogni volta che avviene un allineamento. Cioè, ogni volta che un punto di interesse nell'oggetto che stai trascinando entra nel raggio del punto di interesse del documento (potrebbe essere sia un altro oggetto che parte di una pagina). Web Designer esegue l'allineamento al punto di interesse e il puntatore del mouse assume la forma di una calamita per indicare che è avvenuto un allineamento. Altre informazioni compaiono sullo schermo per indicare quale allineamento è avvenuto. • • •

Un punto rosso indica che è stato allineato un punto specifico. Una linea blu indica un allineamento su elementi di un altro oggetto (per es. il bordo di un rettangolo). Un linea arancione indica un allineamento ad un elemento della pagina (angoli, bordi, centro).

Le linee dell'indicatore di allineamento lampeggiano per mostrare che sono indicatori "live" e per essere visibili rispetto ai diversi colori dello sfondo. La distanza di allineamento è regolata dalla scheda del MOUSE della finestra di dialogo delle OPZIONI ("UTILITÀ" > "OPZIONI" oppure clicca su una pagina col tasto destro e scegli OPZIONI PAGINA ).

www.magix.com

Utilizzo degli oggetti Puoi specificare due distanze di allineamento nella sezione "Raggi di allineamento magnetico", che regola la distanza degli elementi prima che vengano allineati. Le dimensioni di un cerchio intorno ai punti (punto) e la distanza di entrambi i lati delle linee (linee). Ă&#x2C6; consigliato fissare un valore del punto che sia piĂš grande di quello della linea, in modo che sia piĂš facile allineare ai punti finali delle linee. La sezione "Personalizzare Web Designer (sulla pagina 364)" contiene informazioni complete sulla finestra di dialogo delle opzioni.

Oggetti guida e linee guida Gli oggetti guida e le linee guida sono oggetti su un livello speciale, il livello delle guide. Il livello delle guide viene creato automaticamente quando inserisci una linea guida (vedi sotto), oppure puoi crearlo manualmente cliccando con il tasto destro nella GALLERIA LAYER e selezionando CREA LAYER GUIDA (vedi "Layer (sulla pagina 337)" per ulteriori informazioni sui livelli). Usa ADATTA ALLE GUIDE nel menu Window (o il tasto 2 sul tastierino numerico) per attivare l'agganciamento degli oggetti alle guide. Ogni oggetto posizionato nel livello delle guide diventa un oggetto guida. Possono essere oggetti di ogni tipo comprese linee inclinate, forme irregolari e forme rapide. Puoi creare, ridimensionare e cancellare gli oggetti nel livello guide come al solito, ma compaiono sempre come profili tratteggiati in rosso: se applichi uno spessore per la linea o un riempimento di colore viene ignorato. Questa informazione viene mantenuta e se in seguito sposti l'oggetto dal livello guide a un altro lo spessore delle linee e i colori vengono nuovamente mostrati. Puoi usare gli oggetti guida per tracciare linee di costruzione geometrica come quelle che passano da un punto di fuga in un disegno in prospettiva.

Posizionamento di oggetti sul livello guida Per prima cosa assicurati che sia presente un livello guida nella GALLERIA DI LIVELLI vedi sopra. Puoi creare oggetti direttamente sul livello guida, selezionando e creando oggetti nel modo consueto.

131

132 Puoi quindi tagliare o copiare oggetti da un altro livello ed incollarli nel livello guida. Per incollare gli oggetti nella stessa posizione corrispondente nel livello guida, usa il comando veloce Ctrl +  + V.

La galleria di livelli mostra un livello guida selezionato sopra altri due livelli.

I comandi SPOSTA AL LIVELLO DAVANTI e SPOSTA AL LIVELLO INDIETRO sul menu Adatta ignorano il livello guida e quindi non possono essere usati per muovere oggetti sul livello guida.

Creazione di una linea guida Le linee guida sono linee orizzontali o verticali e sono un modo rapido e semplice per allineare una serie di oggetti sulla pagina. • •

Attiva i righelli (Ctrl+L). Trascina da un righello sulla pagina.

Oppure •

Clicca sue volte sul righello per creare una linea guida allineata al punto dove hai cliccato.

Questo crea automaticamente un livello guida e posiziona le linee guida su questo livello. Oppure, usando la galleria di livelli: 1. 2. 3. 4. 5.

Clicca col tasto desto sulla galleria di livelli e scegli PROPRIETÀ. Se necessario, clicca sulla tabella Guide. Seleziona orizzontale o verticale. Clicca su Nuovo. Inserisci la posizione desiderata.

Eliminazione di una linea guida Utilizzando lo strumento di selezione trascina la linea guida sull'apposito righelli (il righello verticale per le linee guida verticali, il righello orizzontale per quelle orizzontali): Oppure, clicca col tasto destro sulla linea guida e poi scegli Cancella.

www.magix.com

Utilizzo degli oggetti

Elenco dei comndi veloci sulla tastiera numerica +

crea una copia mentre trascini, cambi le dimensioni, inclini ecc. L'oggetto originale non cambia.

lascia l'ampiezza di lineea invariata durante la scalatura.

lascia i riempimenti invariati durante i movimenti, le scalature, le inclinazioni ecc.

attiva/disattiva l'allineamento magnetico degli oggetti.

Raggruppa oggetti e sciogli gruppi Gli strumenti di ombra e trasparenza offrono risultati diversi a seconda che gli oggetti siano raggruppati o no. Per maggiori informazioni consulta i capitoli Trasparenza (sulla pagina 235) e Ombre (sulla pagina 237). Spesso creerai forme complesse da oggetti differenti. L'opzione Adatta > Raggruppa ti consente di bloccare insieme questi oggetti per formare cosĂŹ ciĂ˛ che appare come un singolo oggetto. Poi puoi selezionare gli oggetti raggruppati e copiare, cambiare le dimensioni, spostare od eseguire qualsiasi altra operazione applicandola all'intero gruppo.

Per creare un gruppo 1. Seleziona tutti gli oggetti che vuoi nel gruppo. 2. Scegli Adatta > Raggruppa (oppure Ctrl + G) per creare il gruppo.

Sciogli gruppi di oggetti 1. Seleziona il gruppo. 2. Scegli Adatta > Sciogli gruppo (oppure Ctrl + U).

Dopo di questo, tutti gli oggetti individuali nel gruppo rimangono selezionati.

Per aggiungere piĂš oggetti ad un gruppo 1. 2. 3. 4.

Seleziona il gruppo. Sciogli gruppo (Ctrl+U) Seleziona gli oggetti extra. Raggruppa nuovamente (Ctrl+G)

133

134 Puoi anche incorporare un gruppo in un secondo gruppo saltando il passaggio 2. Web Designer ricorda le informazioni sul raggruppamento originario. Se in seguito sciogli il gruppo di oggetti, il gruppo originale rimane.

Eliminazione di oggetti da un gruppo 1. Sciogli i gruppi di oggetti. 2.  + click sugli oggetti che vuoi rimuovere. In questo modo vengono

deselezionati—gli altri oggetti rimangono selezionati. Poi puoi scegliere Adatta > Raggruppa per raggruppare di nuovo gli oggetti rimanenti.

Selezione di un singolo oggetto da un gruppo (Per esempio, per cambiarne il colore.) Ctrl+click sull'oggetto. (Puoi usare questo comando anche per selezionare un ‘gruppo all'interno di un gruppo’.) Premendo Tab o  + Tab muovi la selezione all'interno del gruppo, all'oggetto successivo o precedente. Una volta che hai selezionato un oggetto dentro un gruppo, puoi usare Alt+click per selezionare l'oggetto al di sotto dell'oggetto selezionato. Questa operazione è chiamata "seleziona dentro".

Gruppi e livelli Per maggiori informazioni sui livelli consulta il capitolo Livelli (sulla pagina 337). Se tutti gli oggetti da raggruppare sono su un livello, il gruppo viene creato in questo livello. Il gruppo è alla posizione del membro più alto del gruppo. (Cioè, il gruppo non diventa automaticamente l'oggetto in primo piano.) Se gli oggetti si trovano su più livelli, il gruppo viene creato nel livello contenente l'oggetto più vicino al primo piano.

www.magix.com

Utilizzo degli oggetti

Conflitti nei layout di pagina Quando troppi oggetti sulla pagina influiscono reciprocamente sulla loro posizione o dimensione apparirà un messaggio che dice... LA MODIFICA DEL LAYOUT RICHIESTA È TROPPO COMPLESSA DA ELABORARE. SEI PREGATO DI SEMPLIFICARE LA PAGINA E DI RIPROVARE

Per risolvere questo problema è necessario ridurre le interazioni fra gli oggetti sulla pagina. Il ché significa eseguire operazioni quali: • •

• • •

Raggruppare (sulla pagina 133) o creare gruppi leggeri di oggetti che devono spostarsi insieme Togliere l'anti-sovrapposizione dove non necessaria, specialmente con oggetti che allungati o che sono posizionati "a piè di pagina" o "automaticamente" (sulla pagina 145) Impostare la posizione della pagina su "Fissa" o "Piè di pagina" Togliere il markup di allungamento Eliminare respingente (sulla pagina 204)

Gruppi Leggeri I Gruppi Ordinari descritti in “Raggruppamento e divisione degli oggetti (sulla pagina 133)” si trovano su un solo livello. I GRUPPI LEGGERI sono un modo alternativo per collegare tra loro gli oggetti, anche se si trovano su livelli diversi. Selezionare un elemento di un gruppo leggero seleziona anche tutti gli altri, anche quelli su livelli invisibili o bloccati. Questo significa che quando cancelli, sposti, ruoti o comunque trasformi un elemento in un Gruppo Leggero modifichi anche gli altri analogamente. La linea di stato indica quando è selezionato un Gruppo Leggero. I Gruppi Leggeri sono utili per tenere insieme elementi strettamente collegati. Per esempio gli stati MOUSEOFF e MOUSEOVER di un pulsante per Internet sono uniti come Gruppo Leggero, così se uno stato viene spostato o modificato viene aggiornato anche l'altro.

Creazione di Gruppi Leggeri Per creare un Gruppo Leggero, seleziona tutti gli oggetti da includere e scegli “ARRANGIA->APPLICA GRUPPO LEGGERO ” (o premi “Ctrl+Alt+G”). Se il Gruppo Leggero

deve includere elementi in livelli invisibili o bloccati, devi renderli temporaneamente

135

136 visibili e modificabili usando la Galleria Layer per selezionare gli oggetti e unirli in un Gruppo Leggero. Un oggetto non può appartenere a più di un gruppo leggero e i gruppi leggeri non si possono inserire l'uno nell'altro.

Eliminazione di Gruppi Leggeri Per sciogliere un gruppo leggero, selezionalo e scegli “ARRANGIA->RIMUOVI GRUPPO LEGGERO ” (o premi “Ctrl+Alt+U”). Gli oggetti non vengono cancellati: semplicemente non sono più collegati in un Gruppo Leggero.

Sincronizzazione del testo In alcune circostanze gli oggetti di testo di un gruppo soft sono sincronizzati di modo che le modifiche apportate su uno di essi vengano applicate su tutti gli altri. Questa funzione è stata aggiunta prima che fosse introdotto il supporto per LIVE COPY . Le LIVE COPY sono molto più flessibili e potenti ed rendono questa meno utile rispetto al passato. Ma molti modelli ed elementi inclusi nella GALLERIA DESIGN fanno ancora affidamento sulla sincronizzazione che è utilizzata generalmente per i pulsanti con funzione MouseOver i cui stati (siano off o over) devono mostrare sempre la stessa etichetta. Quando l'etichetta del pulsante con lo stato off viene modificata, anche lo stato di MouseOver cambia di conseguenza. Effetti simili ad ombre possono essere raggiunti talvolta posizionando due o più copie di testo molto vicine l'una all'altra ma facendo in modo che non si tocchino. Ovviamente se una copia viene modificata, le modifiche sono immediatamente applicate anche alle altre. Perché rimangano sincronizzati, gli oggetti testo devono: • • •

Essere nello stesso gruppo soft. Avere esattamente lo stesso testo nel momento in cui è stato creato il gruppo soft. Ed avere delle caselle che si sovrappongono o essere su layer diversi o su diversi fotogrammi di animazione.

Se desideri che il testo venga sincronizzato anche in altre circostanze, utilizza le LIVE COPY .

www.magix.com

Utilizzo degli oggetti

Allineamento In questo modo puoi allineare in maniera accurata o distribuire due o più oggetti.

Allineamento veloce Seleziona gli oggetti che vuoi allineare e clicca con il tasto destra la selezione per scegliere ALLINEA dal menu a comparsa e poi esegui una delle seguenti azioni: • •

Allinea gli oggetti verticalmente sacegliendo BORDI A SINISTRA, DISTRIBUISCI I CENTRI o BORDI A DESTRA . Allinea gli oggetti orizzontalmente scegliendo BORDI SUPERIORI, CENTRI, DISTRIBUISCI I CENTRI o BORDI INFERIORI .

Allineamento e distribuzione degli spazi Se desideri inserire dello spazio tra gli oggetti ed allinearli, selezionali, clicca con il tasto destro la selezione e scegli "ALLINEA > "ALLINEAMENTO" per visualizzare la finestra di dialogo di allineamento oggetti. In alternativa scegli "DISPONI" > ALLINEAMENTO" ("Ctrl + Shift + L") Il piccolo diagramma in cima alla casella di dialogo mostra l'effetto che risulta dalla selezione di ogni opzione. Gli oggetti selezionati nel documento non cambiano finché non clicchi APPLICA. La finestra di dialogo di allineamento non è modale, questo significa che puoi tenerla aperta sullo schermo e continuare a lavorare sul documento. In questo modo puoi scegliere degli strumenti e cambiare la selezione del tuo oggetto e poi selezionare in modo semplice da varie opzioni di allineamento. Se la selezione non è corretta, la puoi modificare e poi cliccare su tasto APPLICA per applicare nuovamente le ultime impostazioni di allineamento. Questo può costituire un vero risparmio di tempo.

137

138

Interno Questa sezione della finestra di dialogo controlla i margini a cui allinei o in cui distribuisci gli oggetti. Le opzioni sono: MARGINI DI SELEZIONE : I margini sono i profili esterni

degli oggetti selezionati. La loro posizione relativa nella pagina o nel foglio non è rilevante.

MARGINI DELL'OGGETTO INDIETRO : I margini sono i profili esterni dell'oggetto selezionato più indietro rispetto agli altri. Questo oggetto non viene influenzato dall'allineamento.

Puoi usarlo per definire l'oggetto "di riferimento" quando vuoi allineare, per esempio, diversi oggetti in fila. Con la normale funzione "Margini di Selezione" attivata l'oggetto di riferimento (quello che non viene spostato) è quello più a sinistra. PAGINA : Se gli oggetti sono su una singola pagina, i margini sono ai bordi della pagina. (Questo ti permette, per esempio, di centrare gli oggetti sulla pagina o allinearli al bordo della pagina).

Allineamento Per allineare degli oggetti per es. 1. Seleziona gli oggetti e cliccaci sopra con il tasto destro. 2. Scegli "ALLINEA" > "MARGINI SINISTRA ".

L'oggetto selezionato si sposta per allineare i bordi a sinistra. In alternativa: 1. Scegli "ALLINEA" > "ALLINEAMENTO" o premi "Ctrl + Shift + L" o scegli

dal menu ORDINA per aprire il dialogo di allineamento. Seleziona l'opzione ALL'INTERNO necessaria. Seleziona ALLINEA A SINISTRA per posizioni orizzontali. Lascia le posizioni verticali a NESSUN CAMBIAMENTO. Clicca su APPLICA. ALLINEAMENTO

2. 3. 4. 5.

www.magix.com

Utilizzo degli oggetti L'oggetto selezionato si sposta per allineare i bordi a sinistra. Tutte le opzioni di allineamento agiscono allo stesso modo. Per ragioni di brevità, verrà descritta solo l'opzione di allineamento mostrata nell'illustrazione nella casella di dialogo. Sperimenta a piacere per imparare le altre opzioni Per selezionare una selezione di allineamenti verticali o orizzontali clicca con il mouse nel diagramma: •

• •

Basta un semplice click per allineare posizioni verticali e orizzontali alla posizione cliccata ad una delle nove combinazioni di in alto-al centro-in basso/sinistra-al centro-destra. "Ctrl+ clic" non altera la posizione orizzontale e sistema gli oggetti in una fila allineata in alto, centrale o in basso. "+ clic non altera la posizione verticale e sistema gli oggetti in una colonna allineata a sinistra, centralmente o a destra.

Distribuisci Le opzioni di distribuzione posizionano tutti gli oggetti selezionati in modo regolare attraverso l'area All'interno (solitamente dentro i limiti di selezione, ma potrebbe essere anche la pagina o la doppia pagina). Tutte le opzioni di distribuzione funzionano in modo analogo. Gli esempi seguenti mostrano le differenti opzioni di posizione verticale per allineare gli oggetti: DISTRIBUZIONE DEI BORDI SUPERIORI : le parti superiori degli oggetti vengono distribuite in modo regolare. DISTRIBUZIONE DEI BORDI INFERIORE è l'inverso—le parti inferiori degli oggetti vengono distribuite in modo regolare. DISTRIBUZIONI DEI CENTRI : le parti centrali degli

oggetti vengono distribuite in modo regolare.

DISTRIBUZIONE EQUIDISTANTE : gli oggetti sono

distribuiti a distanze regolari l'uno dall'altro..

Lo opzioni di posizionamento orizzontale sono simili ma operano in direzione orizzontale.

139

140 Se ad esempio vuoi distribuire questa collezione di ellissi posizionate casualmente in modo che siano tutte equidistanti ed allineate al bordo superiore: • • • • • •

Seleziona le forme Apri la finestra di dialogo dell'Allineamento (Ctrl +  + L) Assicurati che la sezione ALL'INTERNO mostri i LIMITI DI SELEZIONE Seleziona Posizioni orizzontali: Distribuisci centri Seleziona Posizione verticale: Allinea in alto Clicca su APPLICA

Il risultato apparirà così, con le ellissi tutte equidistanti in linea orizzontale e allineate alla parte superiore. Ricorda che se fai un errore puoi sempre annullare l'operazione.

Copiare stili - incolla attributi Questa funzione ti consente di copiare attributi (come modelli di linee o colori di riempimento) tra gli oggetti. È un modo rapido di applicare attributi multipli ad un oggetto. Il quadrato ha un determinato colore, una determinata ombra ed uno stile di linee e di riempimento. Se lo copi ed incolli i suoi attributi nel cerchio posto al centro, come risultato avrai il cerchio a destra. 1. 2. 3. 4.

Seleziona l'oggetto dal quale desideri copiare gli attributi. Copia la selezione negli appunti. ("MODIFICA -> COPIA" , o "Ctrl + C".) Seleziona gli oggetti ai quali desideri applicare gli attributi. Scegli "MODIFICA" -> "INCOLLA ATTRIBUTI", o "Ctrl + Shfit + A".

L'oggetto resta sugli appunti fino a quando non viene sovrascritto attraverso un'operazione di taglio o di copia. Puoi così incollare gli attributi tutte le volte che è necessario.

www.magix.com

Utilizzo degli oggetti

Librerie di stili È abbastanza semplice usare questa tecnica per creare documenti che possono essere utilizzati come librerie di stili. Crea una serie di piccoli oggetti con diversi riempimenti, stili di colore o altri attributi. Il modo più rapido per utilizzare uno di questi stili è il seguente: • •

•

Clicca sull'oggetto sorgente, "Ctrl + C" per copiare lo stile Muovi l'oggetto di destinazione (che può essere in un altro documento, "Ctrl + Tab" per passare rapidamente da un documento aperto all'altro), clicca sull'oggetto a cui desideri applicare lo stile. Premi "Ctrl + Shift + A" per applicare gli attributi Nota: la maggior parte degli attributi può essere copiata in questo modo, inclusi gli stili di riempimento ecc.

Nomina oggetti Puoi dare un nome a qualsiasi oggetto in MAGIX Web Designer usando il pulsante APPLICA, RIMUOVI O ESAMINA NOMI DEGLI OGGETTI nello STRUMENTO SELEZIONE della InfoBar.. Nominare i file può servire a vari scopi, alcuni dei quali sono descritti nel seguito. In genere i nomi sono usati per creare dei raggruppamenti flessibili di oggetti.

Aggiunta nomi Per aggiungere un nome a un oggetto, selezionalo e apri la FINESTRA DI DIALOGO usando il pulsante sulla INFOBAR DEL SELETTORE .

APPLICA/RIMUOVI NOMI

Scrivi il nome nel campo "Nuovo nome" o usa la lista a discesa dello stesso campo per selezionare un nome già usato altrove nello stesso documento. Clicca su "CREA". Dovresti vedere il nome apparire nella lista “NOMI USATI”.

Nomi usati Il campo “NOMI USATI” mostra i nomi applicati alla selezione corrente. Se è selezionato più di un oggetto, viene visualizzata una lista di nomi solo se tutti gli oggetti della selezione hanno applicato esattamente lo stesso set di nomi. Altrimenti viene visualizzato “<molti>” che indica che i nomi applicati ai vari oggetti nella selezione sono diversi. Per eliminare un nome dagli oggetti selezionati, cliccaci sopra nella lista “Nomi usati” per selezionarlo e clicca sul tasto RIMUOVI .

141

142

Oggetti ripetuti È comune che su tutte le pagine del sito siano presenti elementi come tasti di navigazione, intestazioni o loghi che si ripetono. MAGIX Web Designer ha la capacità di far ripetere qualsiasi elemento nello stesso posto su tutte le tue pagine web. Quando aggiorni una delle copie, Web Designer replica automaticamente queste modifiche su tutte le pagine che hanno quell'oggetto ripetuto. Nella maggior parte dei modelli di progetto i pulsanti di navigazione principali si ripetono. Ogni oggetto, come un tasto, può diventare un oggetto ripetuto: basta cliccarci sopra con il tasto destro e scegliere l'opzione RIPETI SU TUTTE LE PAGINE . L'oggetto è copiato nella stessa posizione su tutte le pagine; nell'angolo in alto a destra viene visualizzata l'icona del simbolo di ripetizione. Se applichi altri cambiamenti a questo elemento, tutte le copie verranno aggiornate automaticamente. Se la barra viene impostata come BARRA DI NAVIGAZIONE DEL SITO , appare automaticamente su tutte le pagine del tuo sito e, per queste barre, non sarà necessario replicare gli oggetti. Il logo e i tasti a pie di pagina sono normalmente oggetti che si ripetono nei modelli. Questo significa che li puoi elaborare su una pagina lo stesso oggetto verrà aggiornato automaticamente su tutte le altre pagine. Nota: la funzione usa la pagina corrente come fonte degli elementi ripetuti da aggiornare in tutte le altre pagine.

La casella rossa evidenzia il simbolo dell'oggetto ripetuto, mostrato su ogni occorrenza dell'oggetto ripetuto.

www.magix.com

Utilizzo degli oggetti Quando modificato, l'oggetto ripetuto viene aggiornato automaticamente solo su quelle pagine dove già compare. Ciò significa che puoi scegliere quali pagine del tuo documento debbano avere l'oggetto ripetuto e quali no.

Elaborare i contenuti di un oggetto ripetuto Quando Web Designer crea un oggetto ripetuto, gli elementi che si ripetono sono posizionati in un "gruppo di ripetizione" simile ad un gruppo normale. Se desideri modificare un elemento all'interno di un gruppo di ripetizione, premi Ctrl+click sull'elemento per selezionarlo all'interno (sulla pagina 112) del gruppo. In alternativa se vai in uno strumento specifico, puoi cliccare direttamente su un oggetto applicabile a quello strumento e verrà selezionato all'interno del relativo gruppo di ripetizione (o qualsiasi altro tipo di gruppo). Per esempio, puoi selezionare un rettangolo all'interno di un gruppo di ripetizione, tramite lo strumento Rettangolo e cliccare sulla forma. Naturalmente trattandosi di un oggetto che si ripete, ogni modifica in un gruppo di ripetizione è applicata a tutte le copie presenti sulle altre pagine.

Bloccare un oggetto in ripetizione Puoi bloccare un oggetto in ripetizione cliccandoci sopra con il tasto destro e scegliendo BLOCCA OGGETTO IN RIPETIZIONE . Dopo essere stato bloccato, l'oggetto non è più selezionabile. Ma l'elaborazione di una copia di quell'oggetto in ripetizione su un'altra pagina, che non sia bloccato, modifica tutte le copie, inclusa quella bloccata. Nota che sebbene la copia che hai bloccato non è selezionabile, e quindi non può essere modificata, tutte le altre possono essere modificate e si aggiorneranno rispettivamente tranne l'elemento bloccato.

Intestazioni / note a piè pagina Il tuo sito contiene pagine di varie lunghezze e desideri che alcuni oggetti in ripetizione vengano posizionati sopra ogni pagina e altri (per es. le note) vengano posizionati sul fondo di ogni pagina. Puoi configurare MAGIX Web Designer perché esegua questa operazione, di modo che oggetti ripetuti come intestazioni e note a piè pagina si spostino nel rispetto della parte superiore e inferiore di ogni pagina. La posizione sulla pagina dell'oggetto ripetuto determina se deve essere considerato un'intestazione o una nota a piè pagina. Se una parte dell'oggetto è nella metà superiore della pagina, MAGIX Web Designer lo tratta come un'intestazione e lo sposterà nella stessa posizione relativa alla parte superiore di ogni pagina. Gli oggetti interamente nella metà inferiore della pagina sono tratti come note a piè di pagina e MAGIX Web Designer e li posiziona in relazione con il fondo di ogni pagina indipendentemente dalla lunghezza della pagina.

143

144 Per alcuni oggetti ripetuti, questa operazione automatica che determina se l'oggetto debba essere posizionato in relazione alla parte superiore o inferiore delle pagine potrebbe essere inappropriata. Quindi se necessario, puoi forzare ogni oggetto ripetuto perché venga posizionato relativamente alla parte superiore o inferiore delle pagine cliccando su di esso e scegliendo l'opzione "RIPETI POSIZIONE > "SOPRA o RIPETI POSIZIONE" > "SOTTO". Per ripristina il normale posizionamento automatico ad un oggetto ripetuto, cliccaci sopra con tasto destro e scegli "RIPETI POSIZIONE" > "AUTO" .

Interruzione degli oggetti ripetuti Clicca su un oggetto con il tasto destro e scegli ARRESTA AGGIORNAMENTO per disattivare la natura ripetitiva di un oggetto e di tutte le sue copie nel sito. Se scegli ARRESTA AGGIORNAMENTO dal menu DISPONI avviene anche quanto segue. Ti verrà chiesto se vuoi stoppare solo l'oggetto selezionato o tutte le copie dell'oggetto sul sito web. Scegli l'opzione TUTTI. Adesso è possibile elaborare copie separatamente e la prossima volta che una copia viene modificata le altre rimangono intatte. Usa questo se per esempio hai usato l'opzione RIPETI SU TUTTE LE PAGINE per copiare l'oggetto su tutte le pagine del sito web ma poi vuoi che gli oggetti sulle pagine siano differenti. La funzione ARRESTA AGGIORAMENTO è necessaria anche quando desideri fare una copia di un oggetto ripetuto (per es. una nota a piè pagina o un logo) su una pagina ma non vuoi che quella copia venga aggiornata. Per Questo quando ti viene chiesto scegli SOLO QUESTA COPIA . Si ricorda che non è possibile utilizzare la funzione ARRESTA RIPETIZIONE sulle barre di navigazione in cui l'opzione BARRE DI NAVIGAZIONE SITO è attiva nel DIALOGO DELLE BARRE DI NAVIGAZIONE Questo perchè le barre di navigazione vengono aggiornate sempre su tutto il sito. Vedi il capitolo Barra di navigazione (sulla pagina 312) per maggiori informazioni a riguardo.

Cancellare oggetti ripetuti Se desideri eliminare una copia dell'oggetto ripetuto, cancellalo semplicemente da quella pagina. MAGIX Web Designer visualizza un prompt dove ti viene chiesto se cancellare solo quella copia o tutte le copie dell'oggetto ripetuto. Premendo "Ctrl + Canc" viene cancellato solo l'oggetto ripetuto selezionato senza che venga chiesto se si desidera cancellare tutte le ricorrenze o solo questa.

www.magix.com

Utilizzo degli oggetti

Oggetti a piè di pagina e oggetti che si allungano insieme alla pagina In un normale documento web, non tutte le pagine hanno la stessa lunghezza e potresti avere degli oggetti che desideri rimangano ad una distanza fissa dalla parte inferiore della pagina anche se questa viene allungata o accorciata. Li chiamiamo oggetti piè di pagina Potresti avere delle forme che dallo sfondo della pagina devono allungarsi o accorciarsi in base alle trasformazioni della pagina di modo che siano sempre posizionate correttamente. Il sotto-menu POSIZIONE NELLA PAGINA del menu contestuale, fa in modo che gli oggetti si comportino in questa maniera. Clicca con il tasto destro su un oggetto e visualizza il sotto-menu POSIZIONE NELLA PAGINA . Grazie a questo menu puoi controllare la posizione che l'oggetto deve

assumere quando le dimensioni della pagina variano.Le prime tre voci del sotto-menu si comportano come gruppo radio (puoi selezionarne solo una per oggetto dato).

Fisso Questa è l'opzione standard e l'impostazione per la stragrande maggioranza degli oggetti di un documento. La posizione dell'oggetto è fissata rispettando la parte superiore della pagina di modo che non si sposti quando la lunghezza di quest'ultima cambia.

Testo a piè di pagina Questo contrassegna l'oggetto come un oggetto a piè di pagina Mantiene sempre la stessa distanza dal fondo della pagina per cui se quest'ultima si allunga l'oggetto scenderà della stessa misura. Anche quando copi l'oggetto e lo INCOLLI IN POSIZIONE su un'altra pagina di lunghezza diversa, esso verrà posizionato alla stessa distanza dal fondo. Se fai diventare oggetto a piè di pagina un oggetto ripetuto, esso verrà posizionato alla stessa distanza dal fondo di ogni pagina su cui compare.

Automatico Questa opzione è utile principalmente in modelli di pagina per oggetti ripetuti. Fa in modo che un oggetto si comporti come un oggetto a piè di pagina solo se è posizionato nella metà inferiore della pagina stessa. Se viene spostato nella metà superiore della pagina, si comporta come oggetto fisso. Questa caratteristica è importante perché gli oggetti a piè di pagina servono di solito solo se relativamente vicini al fondo. Questa è l'impostazione standard per gli oggetti ripetuti. In altre parole, se fai diventare ripetuto un oggetto vicino al fondo della pagina, verrà posizionato alla stessa distanza

145

146 su tutte le pagine in cui compare. Ma se viene spostato sulla metà superiore della pagina non verrà più trattato come oggetto a piè di pagina.

Allunga con la pagina Se fai in modo che un oggetto si ALLUNGHI CON LA PAGINA, quando questa viene allungata la parte superiore dell'oggetto non si muove. La parte inferiore, però, si sposta di modo che resti alla stessa distanza rispetto al fondo della pagina. Pertanto l'oggetto viene scalato verticalmente L'opzione è utile solo per gli oggetti posti sullo sfondo della pagina. Per esempio molti modelli di pagine web della Galleria design hanno rettangoli colorati sul layer dello sfondo della pagina che formano parte del design. Generalmente la funzione ALLUNGA CON LA PAGINA è impostata di modo che la struttura venga mantenuta ad ogni variazione di lunghezza.

Oggetti anti-sovrapposizione Gli oggetti anti-sovrapposizione sono utili principalmente in modelli di pagina per mantenere la struttura quando il testo viene esteso o ridotto. Gli oggetti anti-sovrapposizione non possono sovrapporsi l'uno con l'altro; per cui se uno di essi si allunga o si sposta invadendo lo spazio di un altro, spinge l'altro oggetto verso la parte inferiore della pagina. E se un oggetto anti-vovrapposizione viene "spinto" fuori dalla parte inferiore della pagina, questa si allunga automaticamente per includerlo nuovamente. Perché un oggetto diventi anti-sovrapposizione, cliccaci sopra col tasto destro del mouse e scegli ANTI-SOVRAPPOSIZIONE... dal sotto-menu POSIZIONE NELLA PAGINA . Si apre la finestra di dialogo ANTI-SOVRAPPOSIZIONE .

Seleziona la casella di controllo Anti-sovrapposizione per attivare la funzione per gli oggetti selezionati. Dopodiché puoi anche modificare la parte inferiore e superiore dei margini. Per impostazione predefinita i margini superiori e inferiori sono bloccati insieme. Clicca sul pulsante di blocco se desideri impostarli separatamente. Il valore

www.magix.com

Utilizzo degli oggetti del margine superiore determina quanto un altro oggetto anti-sovrapposizione si possa avvicinare ad esso, prima che si sposti verso il basso e fuori dalla sua posizione. Fa quindi in modo che altri oggetti anti-sovrapposizione non si avvicinino troppo. Allo stesso modo il valore del margine inferiore specifica quanto vicino ad un altro oggetto anti-sovrapposizione posto sotto di esso, possa andare questo oggetto prima che venga mosso dalla sua posizione. Esso determina inoltre la distanza minima che deve essere mantenuta tra l'oggetto e il margine inferiore della pagina (la pagina si allunga se necessario) per evitare che l'oggetto sia proprio poco sopra. Il campo ALLUNGA LATI fa in modo che l'oggetto anti-sovrapposizione si comporti come se fosse più largo di quando non sia in realtà. Questo significa che può far spostare oggetti sotto di esso (o essere spinto dall'alto) anche se gli oggetti sono separati orizzontalmente. Per esempio un rettangolo largo 100 pixel con funzione anti-sovrapposizione e ALLUNGA LATI impostata a 50px, per quanto riguarda la funzione di anti-sovrapposizione si comporterà come se fosse largo 200 pixel. Come già accennato sopra, quando un oggetto anti-sovrapposizione si allunga, spinge gli altri oggetti anti-sovrapposizione sotto di esso, infondo alla pagina e, se necessario, la pagina si estende per icluderli. Ma cosa succede se l'oggetto anti-sovrapposizione si riduce nuovamente (per es. se del testo è stato cancellato da un oggetto testo)? Ora c'è spazio per gli oggetti anti-sovrapposizione sotto di esso e possono ritornare verso l'alto. Per cui, finché gli oggetti fin dall'inizio erano posizionati vicini l'uno all'altro prima che il testo venisse rimosso, succede che gli oggetti anti-sovrapposizione più in basso si spostano verso l'alto colmando lo spazio vuoto che si creerebbe altrimenti. Allo stesso modo, se necessario, il fondo della pagina si muoverà verso l'alto accorciandola. Quindi, in sintesi, applicare l'anti-sovrapposizione agli elementi principali della pagina serve a preservare il layout sia che si aggiunga o si cancelli del contenuto.

147

148

Disegnare una linea o una forma Per disegnare linee rette e forme puoi usare sia lo strumento LINEE RETTE E FRECCE o lo strumento EDITOR FORMA (F4). L'EDITOR FORMA è lo strumento migliore per disegnare curve e linee in modo accurato. Inoltre è lo strumento principale per modificarle. Lo strumento LINEE RETTE & FRECCE è la scelta migliore se desideri tracciare singoli segmenti di linee rette o aggiungere delle teste o code di freccia ad ogni tipo di linea.

Lo Strumento linea retta & freccia Grazie a questo strumento è più facile disegnare singoli segmenti di linee rette e aggiungere teste di freccia o code su qualsiasi linea.

Perchè uno strumento linea retta? Prima dell'aggiunta di questo semplice strumento, molti nuovi utenti di MAGIX Web Designer avevano grandi difficoltà nell'eseguire un'operazione non complessa come disegnare una linea retta utilizzando altri strumenti da disegno. Questo perchè l'editor FORMA è più orientato verso il disegno di linee multi-segmento e forme mentre lo strumento Disegno libero si concentra di più sul disegno a mano libera. Qui la necessità di questo strumento che rende evidente come fare qualcosa di elementare.

Disegnare & modificare linee rette Basta un clic e trascinare sulla pagina per disegnare una linea retta. Puoi cliccare su qualsiasi linea esistente per selezionarla e una volta selezionata puoi cliccare e trascinare su entrambe le estremità per spostare la fine della linea.

www.magix.com

Disegnare una linea o una forma

Aggiungere teste di freccia & code La barra informazioni ha sulla sinistra due elenchi a tendina che ti permettono di scegliere uno stile di testa di freccia o coda per ogni ogni estremità finale della linea selezionata.

Testa di freccia Coda di freccia Dimensioni testa/coda di freccia Inverti percorso Lo slider sulla barra informazioni ti permette di modificare le dimensioni della testa e coda di freccia sulla linea corrente selezionata. Oppure puoi inserire un valore percentuale nel campo di testo delle dimensioni posto a destra dello slider. Per impostazione predefinita, le nuove teste di freccia sono create con una larghezza di circa 6 volte quella della linea e viene considerata come dimensione al 100%, come indicato dallo slider delle dimensioni. Se allarghi la linea anche la testa di freccia si aggiorna in accordo. Inserisci quindi un valore minore del 100% per ridurre le dimensioni della testa di freccia (e della coda), o più grande del 100% per aumentarla. Anche se lo slider accetta un valore fino ad un massimo di 800% puoi inserire, nel campo di testo delle dimensioni, valori percentuali più grandi

Inverti percorso Premi il pulsante INVERTI PERCORSO sulla barra informazioni per passare sulla testa e sulla coda della linea selezionata.

Aggiungere più segmenti di linea Ovviamente le linee create con lo strumento Linea retta sono compatibili con altri strumenti da disegno. Per cui se desideri aggiungere più segmenti ad una linea, renderla curva oppure trasformala in una forma chiusa, utilizza lo strumento Editor forme.

149

150

Lo strumento Editor Forme Lo STRUMENTO EDITOR FORMA Ă¨ lo strumento principale utilizzato sia per creare curve, linee e forme precise, che per modificarle.

Aggiungi/Cambia/Elabora indicatori Crea curva Crea linea Collegamento piatto Sharp join Separa nei punti ancora Cancella punti Inverti percorsi Posizioni delle maniglie Livellamento La barra informazioni, mostrata sopra, offre una vasta gamma di comandi cosĂŹ come un preciso controllo numerico. Tutte le linee e le figure in MAGIX Web Designer vengono create da una sequenza di sezioni di linee rette e curve. Le curve vengono a volte dette "curve di BĂŠzier" dal nome del matematico che per primo le ha descritte.

Le sezioni o i segmenti di una linea sono marcati da piccole maniglie nere a forma di punto. Puoi trascinare, aggiungere e cancellare queste maniglie per manipolare la forma della linea o del contorno.

www.magix.com

Disegnare una linea o una forma

Come disegnare un segmento di linea retta Nello strumento EDITOR FORMA , per iniziare una linea retta: 1. clicca sul punto da cui vuoi far partire la linea. (Puoi iniziare da qualsiasi

estremità - non devi necessariamente lavorare da sinistra a destra o dall'alto in basso.) Così si crea un punto maniglia. Questo è visualizzato come un quadrato rosso , per segnalare che è selezionato. 2. Se necessario seleziona il pulsante CREA LINEA sulla barra informazioni. (Comando veloce: L) Questo garantisce che il prossimo click disegnerà un segmento di linea retta.

Clicca dove vuoi collocare il prossimo punto maniglia, oppure clicca e trascina, poi rilascia il pulsante del mouse quando la linea è corretta. Questa operazione crea un segmento di linea e seleziona il nuovo punto maniglia finale.

Miscelazione di linee curve e rette Per creare un oggetto che sia composto sia da segmenti di linea retta che segmenti di linea curva, utilizza i due tasti CREA CURVA e CREA LINEA (puoi anche premere i tasti "L" o "C"). Nota: puoi utilizzare il comando veloce "X" per creare un cusp join o "S" per creare uno smooth join, quando utilizzi lo STRUMENTO EDITOR FORME . Questi due comandi influenzano il modo in cui due segmenti di linea si uniscono. Un cusp join crea due maniglie di controllo Bezier che puoi modificare separatamente. Con un cusp join puoi creare un angolo acuto. Uno Smooth Join crea una giuntura che funziona come un'altalena. Se trascini verso il basso una maniglia di controllo Bezier, la maniglia opposta va verso l'alto.

Come disegnare un segmento di linea curva Il procedimento è analogo a quello per iniziare una linea retta (descritto in precedenza).

151

152 1. Clicca nel punto in cui fui far iniziare la linea. 2. Se necessario seleziona il pulsante CREA CURVA . (Comando veloce: C.) 3. Clicca o trascina (come descritto per le linee rette) per creare un secondo punto

maniglia e un segmento curvo verrà aggiunto alla linea.

Un segmento curvo ha MANIGLIE CURVA associate con il punto maniglia selezionato. Puoi trascinare queste maniglie per adattare l'angolo e il raggio della curva.

Allungamento della linea Verifica che sia selezionata una maniglia finale (contorno rosso) e poi semplicemente clicca di nuovo per aggiungere una nuova linea o una sezione curva. Ogni clic successivo aggiunge una nuova maniglia e un nuovo segmento lineare alla maniglia a punto selezionata.

Conclusione della linea  + clic completa la linea (mantenendola selezionata), altrimenti puoi premere "Esc" per chiudere la linea e deselezionarla. Dopo questo passaggio, un ulteriore clic avvierà una nuova linea.

Aggiunta di un nuovo punto maniglia Lo strumento EDITOR FORMA ha tre modalità, a seconda che non sia selezionato nessun punto maniglia (un click avvia una nuova linea), sia selezionata una maniglia finale (un click aggiunge una nuova sezione), oppure siano selezionati uno o più punto maniglia (puoi trascinare o cambiare le maniglie). La barra informazioni mostra la modalità attuale.

• • •

NUOVO —clicca

per iniziare una nuova linea, per estendere la linea, CAMBIA —trascina o elimina i punti maniglia da cambiare. AGGIUNGI —clicca

Questo si applica solamente allo strumento Editor forma.

www.magix.com

Disegnare una linea o una forma

Alla fine della linea:

Assicurati che la linea sia selezionata e poi: 1. Se necessario clicca sul punto di fine per selezionarlo. 2. Posiziona il pointer e clicca per aggiungere una nuova sezione.

Al centro di una linea:

Assicurati che la linea sia selezionata e poi: 1. Clicca sulla linea per aggiungere un nuovo punto maniglia sulla stessa 2. Trascina le maniglie nella posizione che preferisci.

All'inizio di una linea: Se è selezionato il punto finale, cliccare sul punto iniziale chiude la figura (come descritto in "Chiudere una forma” ). Per aggiungere una nuova maniglia di controllo all'inizio di una linea: 1. Concludi la linea usando  + Clic. 2. Clicca sulla maniglia di inizio. 3. Posizione il puntatore e clicca.

Selezione di punti maniglia multipli Può capitare che tu voglia selezionare vari punti maniglia per, ad esempio, cancellarli, spostarli come un gruppo oppure trasformare una regione di punti in linee curve o rette. Per farlo: 1. seleziona un punto maniglia normalmente cliccandoci sopra. 2. Shift+click sugli altri punti maniglia per selezionarli. ( + click anche per

deselezionare.) Oppure  + Ctrl+click su un punto maniglia per selezionare tutti i punti maniglia sulla linea.

153

154 Trascina il cursore del mouse diagonalmente per creare una selezione rettangolare. Tutti i punti maniglia nel rettangolo sono selezionati. Oppure trascina il cursore del mouse diagonalmente tenendo premuto  per creare una selezione rettangolare. Quest'operazione aggiunge tutti i punti all'interno del rettangolo a quelli già selezionati. 3. Se la linea ha uno o più punti maniglia selezionati: con "Fine" sposti la selezione alla fine della linea. Con "Home" sposti la selezione all'inizio della linea. Con "Tab" sposti la selezione sul prossimo punto maniglia verso la fine. Con  + Tab sposti la selezione al prossimo punto maniglia verso l'inizio. -

I punti di inizio e fine sono importanti quando applichi le frecce.

Cancellazione di punti Seleziona i punti maniglia come descritto in precedenza e clicca sul pulsante CANCELLA PUNTI (barra informazione dell'Editor forma) oppure premi il tasto Canc.

Spostamento dei punti maniglia - Strumento Editor forma Puoi muovere una o più maniglie selezionate: • •

trascina le maniglie usando il mouse. Oppure usa i tasti freccia sulla tastiera.

Oppure, per muovere una singola maniglia, inserisci nuovi valori nelle caselle di testo nella barra informazioni (vedi in basso).

Riordino con la Infobar Al centro delle due caselle di testo si trovano le coordinate del punto selezionato.

www.magix.com

Disegnare una linea o una forma I campi X/Y circostanti mostrano le coordinare delle maniglie delle curve su ogni lato del punto selezionato. Le coordinare sono relative a all'angolo in basso a sinistra della pagina. Puoi cambiar questo dalla tab Griglia e regolatori (sulla pagina 370) nelle opzioni. Se il punto selezionato si trova alla fine di una linea retta il campo a sinistra mostra la lunghezza e l'angolo della linea. Puoi regolare i valori inserendo un nuovo valore e premendo Invio.

Lunghezza ed angolo per la linea retta. Posizione del punto selezionato Posizione della maniglia della curva

Smussatura di una linea Solo con lo strumento Editor forma. Le forme importate o le forme del bitmap tracer possono contenere punti superflui su una linea. Le linee con troppi punti possono essere difficile da elaborare e rallentano il processo di renderizzazione. MAGIX Web Designer può smussare la linea per rimuovere i punti non necessari. Seleziona tutti i punti sulla parte di linea che vuoi smussare. (Vedi sopra). Il metodo più semplice di selezionare molti punti contemporaneamente è quello di selezionare trascinando un'area con lo strumento EDITOR FORMA.

Trascina il regolatore di livellamento sull'estremità della barra informazioni EDITOR FORMA .

155

156

I punti rimossi vengono tenuti in memoria, cosĂŹ puoi in seguito eseguire modifiche della linea spostando il regolatore. I punti rimossi vengono cancellati quando effettui ulteriori elaborazioni della linea, ad esempio trascinando una maniglia. Consiglio: per essere certo di non cancellare dei punti importanti, assicurati che non siano selezionati. (ď&#x192;ą + click su un punto selezionato per deselezionarlo.)

Limitazione della linea Quando trascini un punto maniglia, tenendo premuto il tasto Ctrl limiterai il movimento ai multipli dell'angolo di limitazione (che controlli dalla finestra di dialogo OPZIONI , tabella GENERALE ). Quando trascini una maniglia di curva l'angolo Ă¨ limitato.

Modifica delle curve Utilizzo della maniglia di curva Trascinando la maniglia di curva si adatta la curvatura dei segmenti di curva contigui. Muovi la maniglia di curva verso il punto maniglia o in direzione opposta per spostare la curva nella direzione desiderata.

www.magix.com

Disegnare una linea o una forma

Trascinamento dei segmenti di linea Puoi anche modificare la curva trascinando il segmento di linea tra i punti.

Va sottolineata la differenza tra il trascinare la linea per modificarne la forma e cliccare sulla linea per aggiungere una nuova maniglia a punto. Trascinare un segmento di linea retto lo trasforma in uno curvo.

Crea angoli precisi Generalmente, MAGIX Web Designer disegna una curva smussata tramite un punto maniglia. Per questo, le due maniglie di curva ai due lati del punto maniglia sono collegate. Muovendo una maniglia di curva si muove anche l'altra. In alcuni casi puoi voler creare un angolo a punta. Per farli Ă¨ necessario scollegare le maniglie di curva: 1. clicca due volte sul punto maniglia. 2. Oppure seleziona il punto maniglia e poi:

clicca sul pulsante COLLEGAMENTO A PUNTA o premi Z sulla tastiera. Adesso puoi spostare ogni maniglia di curva in modo indipendente.

Creazione di curve smussate Per convertire un collegamento a punta in una curva smussata: 1. clicca due volte sul punto maniglia. 2. Oppure seleziona il punto maniglia e poi:

clicca sul pulsante COLLEGAMENTO PIATTO o premi S sulla tastiera.

157

158 Le due maniglie di curva diventano collegate e si spostano ai lati opposti del punto maniglia. Questo può modificare la forma della curva.

Bilanciamento delle curve Il bilanciamento fa in modo che le due maniglie della curva abbiano la stessa distanza dalla maniglia del punto producendo delle curve più morbide e più simmetriche. Per bilanciare una curva, seleziona la maniglia del punto e poi trascina una delle maniglie della curva tenendo premuto il tasto SHIFT. Mentre muovi una maniglia della curva, l'altra si sposterà per essere esattamente nella posizione opposta e alla stessa distanza dalla maniglia del punto.

Trasformazione di una linea retta in una curva ( e viceversa) 1. Seleziona i punti maniglia alle due estremità del segmento di linea. 2. Clicca sul pulsante CREA LINEA o CREA CURVA sulla barra informazioni o premi L o

C sulla tastiera.

Dopo aver cambiato il tipo di linea, è possibile che tu abbia bisogno di spostare le maniglie di curva per creare una transizione armoniosa tra i segmenti di linea curvi e quelli diritti. Puoi selezionare vari segmenti di linea e convertirli tutti. I punti maniglia ad entrambe le estremità del segmento devono essere selezionati.

www.magix.com

Disegnare una linea o una forma

Unione di linee Puoi unire due linee solo se sono entrambe selezionate (si vedono le maniglie a punto su entrambe le linee): Usando il Selettore tieni premuto ñ e clicca sulle linee per selezionarle (se sei già nello strumento Editor Forme puoi premere "Alt + S" per passare momentaneamente al Selettore," + clic" per selezionare la seconda linea e di nuovo "Alt + S" per tornare al Selettore). La selezione degli oggetti è descritta per esteso in "Selezione degli oggetti (sulla pagina 111)". Quando entrambi gli oggetti sono selezionati nello strumento EDITOR FORME , trascina la maniglia finale di una linea sull'estremità dell'altra linea. Mentre trascini il puntatore del mouse mostrerà un simbolo + per indicare che le linee verranno unite.

Se le estremità delle due linee sono già molto vicine tra loro (ma non unite), puoi o zoomare o trascinare il punto finale più lontano e poi riportarlo indietro in modo che si sovrapponga all'altro, e vedrai il segno + che indica che sta per avvenire un'unione. Per creare una forma piena, trascina insieme le altre due maniglie finali. Dato che a unirsi sono le maniglie finali, puoi unire le linee ma non le forme. Le forme sono oggetti chiusi quindi non hanno maniglie finali.

Divisione di una forma Per dividere una linea o una forma: seleziona una delle maniglie esistenti sulla linea o il contorno della forma o creane una nuova nel punto in cui desideri avvenga la separazione. Basta cliccare sulla linea nello strumento EDITOR FORMA(vedi sopra).

159

160 Clicca DIVIDI AL PUNTO e premi "B"

Se dividi una linea non si vedono modiche . Ma se muovi le maglie ti accorgerai che si sposta solo una parte della linea. Se dividi una forma questa diventa una linea. Tutti i riempimenti spariscono.

Chiusura di una forma Una forma Ă¨ un oggetto chiuso senza maniglia iniziale o finale. Solo le forme si possono riempire di colore. Per chiudere una forma: 1. Crea un oggetto aperto con la maniglia finale

vicina a quella iniziale. Tutte le maniglie a punto (tranne quella finale) dovrebbero essere nella posizione desiderata. 2. Metti il puntatore sulla maniglia finale. 3. Trascina la maniglia finale su quella iniziale e rilascia il tasto del mouse. Le due maniglie si uniscono.

Oppure: 1. Crea un oggetto aperto con tutte le maniglie di

controllo nella posizione corretta. Non creare il segmento finale. 2. Sposta il puntatore sul punto iniziale. Sulla destra del puntatore, quando si trova sulla maniglia iniziale, comprare A+. 3. Clicca per creare il segmento di linea finale e chiudere la forma. Oppure: 1. Scegli lo strumento EDITOR FORME . 2. Clicca su un punto finale per selezionarlo. 3. Premi il tasto "ď&#x201A;ż".

Tutti questi metodi chiudono la forma. Se c'Ă¨ un colore di riempimento selezionato, la forma viene riempita con esso.

www.magix.com

Disegnare una linea o una forma

Cambia l'ampiezza della linea (spessore) Per cambiare lo spessore della linea o del contorno di una forma, seleziona innanzi tutto l'oggetto o gli oggetti: Inserisci una nuova ampiezza di linea nel campo di testo sulla barra di controllo STANDARD o scegli uno dei valori standard dal menu. Lo spessore della linea è generalmente misurato in punti, la cui abbreviazione è pt. 1 1/72 di un pollice o circa 0,3 mm, avvero un valore di poco inferiore allo spessore di un pixel dello schermo visualizzato con lo zoom al 100%. Puoi utilizzare qualsiasi unità di misura standard di MAGIX Web Designer. Puoi inserire il valore dello spessore in qualsiasi unità di misura, MAGIX Web Designer lo convertirà nel corretto numero di punti corrispondenti. Per esempio puoi inserire il valore 0,5 cm, e otterrai una linea spessa mezzo centimetro, ma nel campo relativo all'ampiezza di linea comparirà il valore di 14 pt. Se nessun oggetto è selezionato e modifichi il valore dello spessore di linea, questo cambiamento viene applicato come standard per tutte le nuove linee. Nota: il valore zero per l'ampiezza di linea rappresenta un caso speciale e non dovrebbe solitamente essere utilizzato. Questo disegna infatti una line di un pixel del dispositivo. Le dimensioni reali dipendono quindi dal dispositivo su cui viene visualizzato il video. Sul monitor di uno schermo un pixel è chiaramente visibile e non viene mai visualizzato con anti-aliasing. Su dispositivi come stampanti, particolarmente stampanti fotografiche, che hanno risoluzioni molto maggiori, la linea è quasi invisibile. (Le linee con ampiezza zero nei file importati vengono convertite in 0,25 pt.)

161

162

Elaborazione Forma Strumenti di disegno forme

Puoi utilizzare questi strumenti per creare forme regolari. • • •

STRUMENTO RETTANGOLO STRUMENTO ELLISSE

("M")

("L")

STRUMENTO QUICKSHAPE

("Shift + F2")

Lo STRUMENTO RETTANGOLO crea rettangoli e quadrati. Lo STRUMENTO ELLISSE crea cerchi ed ellissi. Lo STRUMENTO QUICKSHAPE crea poligoni, stelle e Smartshpe.

Cambio la larghezza della linea (spessore) Per cambiare lo spessore della linea o del contorno di una forma, prima seleziona l'oggetto o gli oggetti: Scrivi un nuovo spessore della linea nel box di testo sulla barra di controllo STANDARD o scegli lo spessore standard dal menu. Lo spessore della linea è tradizionalmente misurato in punti, abbreviato in pt. 1 punto è di pollice (circa 0,3 mm), che è leggermente inferiore allo spessore di un pixel dello schermo visto con un ingrandimento del 100%. 1/72mo

Puoi inserire il valore dello spessore in qualsiasi unità di misura e MAGIX Web Designer lo convertirà nel numero corretto di punti. Per es. puoi inserire 0,5 cm e otterrai una linea spessa mezzo centimetro, ma nel campo dello spessore della linea verranno indicati poco più di 14 punti. Se cambi il valore dello spessore della linea senza avere alcun oggetto selezionato cambi il valore standard di tutte le nuove linee.

www.magix.com

Elaborazione Forma

Creazione di rettangoli e quadrati Per creare un rettangolo: •

Usa lo strumento RETTANGOLO (" + F3", o "M").

Clicca e trascina sull'area di disegno per tracciare un rettangolo.

Creazione di un quadrato Per creare un quadrato invece di un rettangolo, tieni premuto il tasto Ctrl mentre trascini.

Creazione e Modifica di rettangoli ad angoli arrotondati Per smussare gli angoli di un rettangolo, selezionalo e premi il pulsante “Angoli arrotondati” della Infobar dello STRUMENTO RETTANGOLO. Puoi quindi trascinare le maniglie di selezione sugli angoli per regolare il diametro degli angoli arrotondati.

Puoi ridimensionare i rettangoli usando lo STRUMENTO RETTANGOLO (trascinando le maniglie sugli angoli) o il SELETTORE. Se cambi le proporzioni di un rettangolo ad angoli arrotondati usando lo STRUMENTO DI (allungandolo in una sola dimensione) le proporzioni degli angoli smussati non vengono allungate ma rimangono le stesse. Se però hai selezionato più oggetti, o se stai allungando un gruppo che contiene un rettangolo ad angoli arrotondati, la proporzione degli angoli non viene mantenuta.

SELEZIONE

CONSIGLIO: quando si fanno ruotare dei rettangoli o qualsiasi forma con angoli dritti, tieni premuto Ctrl per fare in modo che uno dei bordi dritti sia esattamente orizzontale o verticale.

163

164

Creazione di cerchi ed ellissi Per creare un'ellisse o un cerchio: Seleziona lo STRUMENTO ELLISSE ("Shift + F4", o "L") dalla barra strumenti principale. I pulsanti RAGGIO E DIAMETRO posti sulla barra informazioni creano automaticamente dei cerchi.

Raggio Diametro Creazione di delimitazioni Selezione l'opzione RAGGIO per disegnare cerchi. Il punto da cui inizi a trascinare Ă¨ il centro del cerchio. Seleziona l'opzione DIAMETRO. Ora il punto da cui inizi a trascinare determina la posizione del bordo del cerchio. Con lo strumento CHIUDI CREAZIONE selezionato, trascina sull'area di disegno per tracciare un'ellisse. Tieni premuto "Ctrl" mentre trascini per creare un cerchio invece che un'ellisse. Puoi trasformare un'ellisse in un cerchio in qualsiasi momento cliccando due volte su una maniglia di controllo.

SmartShape Le SmartShapes sono oggetti grafici dotati di maniglie speciali, sulle quali si puĂ˛ cliccare e che possono essere trascinate per personalizzare l'oggetto. Per vedere e usare le maniglie su una SmartShape, seleziona l'oggetto e vai nello STRUMENTO QUICKSHAPE.

Cornice, angoli variabili, segmento circolare, spirale, campo di testo e SmartShapes triangolari.

www.magix.com

Elaborazione Forma Le SmartShape sono disponibile nel catalogo dei contenuti e alla voce del menu INSERISCI . Ad esempio, scegli "INSERISCI" > "FORMA" dal menu principale per scegliere da una selezione di SmartShape semplici. Oppure con lo STRUMENTO QUICKSHAPE selezionato, clicca sul pulsante INSERISCI sulla barra delle informazioni. Se selezioni... • • • • •

Rettangolo Ellissi Pannello di testo Pannello Foto Fumetto

Allora la forma sarà posta direttamente nel tuo documento. Le altre opzioni aprono il CATALOGO CONTENUTI ONLINE (sulla pagina 42), in cui è presente un gamma ancora più ampia di forme. Scegli una forma e importala semplicemente nel tuo documento con un doppio click oppure cliccando su pulsante IMPORTA .

Come modificare SmartShape Le SmartShape dispongono di maniglie predefinite che permettono di modificare le forme in modo semplice ed intuitivo. Mettere a punto o curvare una freccia, modificare una nuvoletta tramite le maniglie, sono operazioni semplicissime. Le maniglie appaiono quando, per doppio click, selezioni la forma tramite lo STRUMENTO QUICKSHAPE e se sposti il cursore su una di esse, la barra di stato fornisce un'utile descrizione della sua funzione.

SmartShape originali (sinistra) e versioni modificate (destra) con relative maniglie.

Per quando riguarda la nuvoletta, le maniglie ti permettono di modificarne le dimensioni, aggiungere curvature, controllare l'area di testo e mettere a punto dimensioni e curvatura dell'uncino.

165

166 Quando le SmartShpe contengono un testo, puoi modificarlo cambiandone dimensione e font come faresti per qualsiasi tipo di testo tramite lo STRUMENTO DI TESTO (sulla pagina 395). Per modificare i colori di una smartshape, puoi selezionare la forma e cliccare i colori sulla barra colori oppure puoi aprire il COLOR EDITOR Oppure trascina e rilascia il colore scelto dalla barra dei colori. Dove nella forma sono presenti colori multipli, appare la finestra di dialogo della Sostituzione colore (sulla pagina 179) che permette di scegliere quale colore modificare. Ci sono diversi tipi di SmartShapes e ne vedrai comparire sempre di nuove nel corso del tempo nel catalogo dei contenuti.

Creazione di poligoni e stelle Utilizza lo strumento QUICKSHAPE per creare quasi ogni tipo di forma regolare, simmetrica con angoli vivi o arrotondati. DopodichĂŠ puoi trascinare i bordi per curvare i lati e e puoi modificare il numero di lati o trasformare l'oggetto in un'ellisse, un poligono o una stella. 1. Seleziona lo Strumento QUICKSHAPE ("Shift + F2") dalla barra strumenti

principale a comparsa. 2. Seleziona CREA POLIGONI o POLIGONI STELLATI dalla barra informazioni. 3. Seleziona il numero di lati dal menu o digitando una cifra nella casella di

testo.

ModalitĂ di creazione: raggio/diametro/margine Poligono Ellipse Forme a stella Angoli stondati Ripristina bordi Numero di lati Voci di menu modificabili Modifica campi Inserisci SmartShape

www.magix.com

Elaborazione Forma Per creare un poligono stellato, trascina nello stesso modo necessario per un cerchio o un'ellisse utilizzando i pulsanti Raggio, Diametro e Bordi per controllare il punto di origine della forma. • • •

dal centro verso l'esterno (tasto RAGGIO), o da un margine esterno (tasto DIAMETRO ), Oppure in diagonale per creare un rettangolo immaginario che racchiuda il poligono (pulsante CHIUDI CREAZIONE ) rendendone possibile la distorsione.

Poligoni o stelle con angoli arrotondati Seleziona il pulsante ANGOLI oppure clicca due volte su un punto dell'angolo.

ARROTONDATI

Il poligono è dotato di maniglie extra (maniglie raggio) da cui inizia l'arrotondamento. Per aumentare o diminuire il raggio, trascina una delle apposite maniglie.

Per rimuovere gli angoli arrotondati: • •

Clicca sul pulsante ANGOLI ARROTONDATI. Oppure clicca due volte su una maniglia di controllo.

Modifica di poligoni e stelle Lo strumento di SELEZIONE ti permette di modificare le dimensioni o ruotare. Lo strumento di SELEZIONE è descritto nella sezione Gestione oggetto (sulla pagina 111). Tramite lo strumento QUICKSHAPE , puoi modificare le dimensioni e ruotare. • •

Trascina le maniglie negli angoli. Oppure seleziona DIMENSIONI & ROTAZIONE dal menu ELEMENTI MODIFICABILI Digita i valori necessari nelle caselle di testo. Dimensioni Rotazione

È anche possibile modificare di poco i valori tramite i tasti posti sulla destra. Per spostare:

167

168 • • •

Trascina la maniglia nel centro della forma. Oppure utilizza le frecce direzionali sulla tastiera. O ancora, seleziona CENTRO dal menu ELEMENTI MODIFICABILI. Digita i valori X/Y necessari, nei campi di testo.

Applica o rimuovi gli angoli arrotondati cliccando sul pulsante ANGOLI ARROTONDATI .

Trasforma un poligono in un ellisse cliccando il pulsante CREA ELLISSE o con un doppio click nel centro del poligono. Traforma un poligono semplice in uno stellato cliccando sul pulsante POLIGONI STELLATI . Oppure clicca due volte su un lato. Trascina i lati per farli curvare: Conduci il cursore sopra il bordo del poligono (in questo modo si trasforma in una freccia). Ora puoi trascinare i lati. Le forme originali sono a sinistra. Trascina sui lati per creare delle curvature. "Ctrl + doppio clic" su un lato oppure clicca il pulsante RIPRISTINA BORDI per rendere tutti i lati nuovamente dritti.

Modifica il numero di lati digitando o selezionando una cifra nel menu.

www.magix.com

Utilizzo del colore

Utilizzo del colore La barra dei colori La barra dei colori appare nella parte inferiore della finestra. Mostra i colori del riempimento corrente e della barra, permette l'accesso al Color Editor e fornisce una tavolozza di colori predefiniti incluso lo speciale "nessun colore".

COLOR SWATCH: la parte esterna del color swatch, sulla parte sinistra della barra dei colori, mostra il colore della linea e la parte centrale riporta il colore di riempimento. Questi sono i colori di ogni oggetto selezionato o gli attributi del colore, se non sono presenti oggetti selezionati.

Questo pulsante permette l'accesso al Color editor (sulla pagina 174) CONTAGOCCE COLORE: usa il contagocce per raccogliere un colore da una determinata posizione del documento o da qualsiasi area dello schermo. Vedi il paragrafo Utilizzare il contagocce per selezionare colori (sulla pagina 175) per ulteriori informazioni NESSUN COLORE: cliccando su questo comando viene applicato un riempimento "nessun colore". Se clicchi tenendo contemporaneamente premuto il tasto Shift il 'nessun colore' viene applicato alla linea. Questo non è uguale alla trasparenza al 100%. "Nessun colore" e trasparenza sono due cose diverse. Una forma sulla quale è applicata la trasparenza rimane una forma solida, mentre una forma con "nessun colore" è effettivamente vuota. Il pulsante NESSUN COLORE può anche essere usato per ripristinare i colori originali di una foto a cui è stato applicato un colore contone.

Marker del colore di riempimento corrente Marker del colore barra corrente Se la lunghezza della barra colore supera la finestra, puoi usare la barra di scorrimento o "Alt+trascinamento". MAGIX Web Designer fornisce molte opzioni per le dimensioni visualizzate della barra dei colori (descritte in Personalizzazione Web Designer).

169

170

Colori sulla linea colore

Colori tema : prima vengono i Colori tema (se presenti nel documento, vedi sotto). I colori con nome si usano per dare dei colori specifici a modelli e progetti, in modo che lo schema di colore di un progetto si possa cambiare facilmente senza dover modificare i singoli oggetti. I Colori Collegati sono rappresentati diversamente sulla linea dei colori e cioè attraverso dei rettangoli arrotondati più piccoli di modo che sia più facile distinguere quali sono Colori tema normali ed indipendenti e quali sono collegati ad un colore madre. Colori della tavolozza: ci sono 46 colori predefiniti nella tavolozza. Ci sono 5 sfumature di 7 tonalità e 10 variazioni di grigio, nero e bianco. I colori standard della tavolozza non sono modificabili (cioè non sono Colori con Nome) e sono progettati come semplice selezione limitata di colori da applicare agli oggetti (trasportandoli sull'oggetto o cliccandoci sopra). Dei piccoli segni nelle icone dei colori mostrano quali colori con nome (se ce ne sono) o colori della tavolozza sono stati applicati agli oggetti selezionati. Indicatori a forma di rombo mostrano i colori utilizzati dagli oggetti selezionati. Un rombo sull'angolo in alto a sinistra indica il colore di riempimento; uno sull'angolo in alto a destra indica la linea colore. Marchi a forma di croce mostrano gli attributi dei colori correnti se non ci sono oggetti selezionati. La linea colore sulla destra, il colore di riempimento sulla sinistra. I marker triangolari mostrano i colori di un riempimento, qualora ne sia stato applicato uno. Questa operazione funziona anche quando si sceglie un colore con il contagocce da oggetti esistenti, vedi Uso del contagocce per selezionare i colori (sulla pagina 175). I marker della linea colore si aggiornano all'istante e indicano il colore dell'oggetto sotto il contagocce mentre si esegue il trascinamento con il mouse.

Riordina i colori sulla riga dei colori È possibile che tu preferisca riordinare i colori sulla riga dei colori. A tale scopo premi, "Ctrl + trascina" i colori lungo la riga dei colori. In questo modo puoi riordinare anche la GALLERIA DEI COLORI . Solo i colori nominati possono essere riordinati sulla riga dei colori.

www.magix.com

Utilizzo del colore

Menu contestuale della barra dei colori Clicca su un colore sulla barra dei colori per mostrare un menu contestuale con le seguenti opzioni: ELABORA

Apre il color editor per modificare il colore con nome (non disponibile per i colori della tavolozza)

IMPOSTA COLORE DI RIEMPIMENTO/IMPOSTA COLORE LINEA

Imposta il colore di riempimento o della linea dell'oggetto selezionato con questo colore

SOSTITUISCI COLORI

Questa opzione è mostrata solo quando l'oggetto selezionato ha componenti multiple o colori multipli, come un gruppo pulsanti.

RINOMINA

Rinomina un colore con nome (non disponibile per i colori della tavolozza)

CANCELLA

Elimina un colore con nome (non disponibile per i colori della tavolozza)

Se l'oggetto selezionato è una bitmap, puoi anche vedere le OPZIONI IMPOSTA COLORE CONTONE SCURO/IMPOSTA COLORE CONTONE CHIARO Vedi la sezione Colorazione delle bitmap (sulla pagina 229) per ulteriori informazioni. Quando clicchi su "nessun colore", le opzioni del colore di riempimento e della linea sono sostituite da: ELIMINA COLORE RIEMPIMENTO/ELIMINA COLORE LINEA .

Applicare i colori di riempimento e linea tramite trascinamento • • • • •

Per applicare un colore di riempimento a un oggetto (selezionato o meno), trascina un colore dalla barra dei colori sul centro della forma. Per impostare il colore della linea o del profilo, trascina il colore sul bordo. Per cambiare l'attuale colore di riempimento, trascina un colore in uno spazio vuoto. Per cambiare il colore di sfondo, trascina un colore sullo sfondo della pagina Per cambiare un colore di un oggetto complesso o multi-color come un pulsante, un campo di testo, una forma riempita graduata, ecc. basta semplicemente rilasciare il colore sull'oggetto.

Quando trascini i colori un indicatore accanto al puntatore ti dice che effetto avrà quel colore:

171

172 Imposta il colore uniforme (quello che vedi quando lo trascini sopra un oggetto) o la gamma di colori di riempimento multi-color (sulla pagina 232). Imposta il colore delle linea (visualizzabile quando lo trascini su una linea). Imposta il colore di riempimento corrente (visibile quando lo trascini su uno spazio vuoto). Imposta il colore iniziale del riempimento sfumato (visibile quando lo trascini sull'inizio del riempimento). Imposta il colore finale del riempimento sfumato (visibile quando lo trascini sulla fine del riempimento). Imposta il colore di sfondo della pagina o della pasteboard (visibile quando lo trascini un colore sulla pagina o sullo sfondo). Invece di trascinarlo, se hai selezionato un oggetto, puoi semplicemente cliccare sulla barra dei colori. Si apre in questo modo il menu contestuale della barra dei colori. In qualsiasi altro caso, puoi cambiare il colore della linea cliccando sulla barra dei colori tenendo premuto il tasto "Shift". Se hai selezionato una foto o una forma riempita con una bitmap, cliccando sulla barra dei colori appare il menu contestuale incluse le opzioni di contone. Questo significa che la bitmap viene convertita in scala di grigio (bianco e nero) e il colore di base viene usato come colore chiaro al posto del bianco. Il colore contone scuro di solito Ă¨ il nero. Puoi impostare entrambi i colori contone attraverso il menu contestuale della barra dei colori (vedi sopra). Vedi Colorazione delle Bitmap (sulla pagina 229) per ulteriori informazioni. Per impostare un riempimento o una linea su nessun colore (vuoto), svolgi le operazioni delineate sopra usando l'opzione "nessun colore" invece di un colore.

www.magix.com

Utilizzo del colore

Applicare un colore dello sfondo testo Per applicare un colore dello sfondo testo (un colore di sfondo in stile evidenziatore)...

• • •

Evidenzia una porzione di testo tramite lo STRUMENTO TESTO o seleziona oggetto/i di testo utilizzando lo STRUMENTO DI SELEZIONE (sulla pagina 30) Clicca con il tasto destro su un colore nella COLOR LINE Seleziona IMPOSTA SFONDO TESTO

Per eliminare il colore di sfondo... • • •

Seleziona il testo Clicca con il tasto destro su "NESSUN COLORE sulla COLOR LINE (sulla pagina 169) Seleziona l'opzione CANCELLA SFONDO TESTO

Elaborazione del colore di un oggetto Seleziona l'oggetto del quale vuoi cambiare il colore. Per elaborare il colore di riempimento dell'oggetto o degli oggetti selezionati: • • •

seleziona Strumenti > Editor colori (comando veloce: Ctrl+E). Oppure clicca sull'icona ELABORA COLORE sulla linea di colori. Oppure clicca due volte sul pannello del colore di riempimento attuale sulla linea di colori.

Per elaborare il colore di linea dell'oggetto o degli oggetti selezionati: • •

Clicca col tasto destro (o  + click) sull'icona ELABORA COLORE . Oppure clicca due volte sul pannello del colore di linea attuale.

In questo modo viene visualizzato l'EDITOR COLORE che ti consente di scegliere tra tutti i colori dello spettro. A differenza della maggior parte dei programmi di grafica, l'Editor colore può rimanere sullo schermo mentre continui a lavorare. Si modifica per riflettere il colore degli oggetti selezionati, così puoi adattare facilmente e direttamente il colore dell'oggetto selezionato.

173

174

Il Color Editor Il Color Editor si usa per cambiare il colore degli oggetti nel documento.

Quando elabori un colore, puoi utilizzare la pipetta del colore per acquisire colori dallo schermo e persino da altre finestre aperte. Seleziona il colore da elaborare: colore di riempimento/colore riga dell'oggetto selezionato o uno qualsiasi tra quelli con nome. Clicca qui per mostrare i comandi avanzati relativi ai colori Colore precedente Colore attuale Trascina da qui per selezionare una sfumatura di tonalità di colore Trascina da qui per selezionare una tonalità Trascina qui per ingrandire la finestra Il modo più semplice per creare un nuovo colore è scegliere la tonalità lungo la fascia di colori in basso. Tutte le possibili sfumature di questa tonalità vengono visualizzate nella sezione superiore per cui clicca o trascina nella sezione superiore per selezionare il nuovo colore. Noterai che gli oggetti selezionati cambiano colore mentre li modifichi nel Color Editor (anteprima in tempo reale) Per esempio per selezionare il rosa, che è una sfumatura chiara di rosso, seleziona il rosso in basso e poi un rosso molto pallido (rosa) dalla parte destra della sezione in alto.

www.magix.com

Utilizzo del colore

Colore precedente ed attuale Mentre trascini il cursore sull'Editor colore, entrambi i piccoli quadrati in alto a destra nell'Editor colore mostrano il colore attuale e quello precedente (prima che iniziassi a modificare il colore). Questo è utile se vuoi eseguire una piccola modifica e mettere a confronto il nuovo colore con quello vecchio.

Uso del contagocce per selezionare i colori Invece di selezionare le tinte e le ombre sul COLOR EDITOR è possibile invece prendere un colore da qualsiasi parte del documento o dello schermo, anche da altre finestre o programmi. Per far questo clicca e trascina sullo strumento contagocce. Quando trascini vedrai il Color Editor che raccoglie il colore. Rilascia il tasto del mouse quando hai ottenuto il colore che desideri. Questo è un modo semplice e veloce per utilizzare nuovamente lo stesso colore e copiare i colori da foto o da un oggetto all'altro. Il color picker non raccoglie semplicemente il colore dello schermo (RGB). Se punti invece su una forma con un colore di riempimento solido il picker prenderà il vero colore della forma incluso il modello (RGB, HSV o CMYK) il colore copiato sarà così identico a quello selezionato. Se il colore target è un colore con un nome o della tavolozza, invece di copiare il colore, il color picker applicherà lo stesso colore all'oggetto selezionato. Se l'oggetto sotto il puntatore del mouse è complesso (es. con trasparenza) e il colore non può essere determinato, viene applicato il colore schermo RGB. Il color sampler mostra un piccolo pop-up vicino al puntatore del mouse che indica il colore che viene raccolto in quel punto. Qui può apparire il nome del colore sulla tavolozza, il nome del colore, il modello o il valore.

Operazioni avanzate con i colori Clicca sull'icona MOSTRA OPZIONI AVANZATE nel Color Editor per visualizzare la parte bassa della finestra di dialogo che mostra altre opzioni.

175

176 Colore senza riempimento Valori di colore HSV Valore RGB Tipo colore: Vedi Creazione di una tonalità, di una sfumatura o un colore collegato. Qui puoi inserire valori di colore precisi RGB (o HSV). Il metodo più comune per la grafica per il web è inserire un colore hex RGB. I campi H , S e V ti permettono di specificare i colori in valori percentuali HSV (hue saturation value). Nel campo # puoi inserire un valore RGB in numeri esadecimali (0-F). Qui sono disponibili anche un pulsante 'No colore riempimento' e uno per la guida.

Colori locali e colori Tema Web Designer dispone di due tipi di colore: •

•

I COLORI LOCALI sono utilizzati in una sola posizione del documento. Ogni oggetto ha un colore separato e nessuno viene condiviso. Questo risulta molto utile se intendi cambiare il colore di un oggetto senza modificare gli altri. I colori locali sono il modo più semplice e veloce per documenti che usano pochi colori. I paragrafi "Applicazione del colore" e "Elaborazione del colore di un oggetto" descrivono come si lavora con i colori. I COLORI TEMA possono essere invece utilizzati ripetutamente nel documento. I colori tema (come se fossero stili in un word processor) sono utilizzati nei modelli e assicurano un aspetto uniforme degli elementi della pagina come pulsanti o barre di navigazione. Tutte le modifiche che effettui su un colore Tema si riflettono immediatamente su tutti gli oggetti e parti del disegno che utilizzano quel colore. I colori tema possono essere copiati da un documento all'altro. Se nel progetto sono già presenti dei colori tema e carichi o incolli dei modelli dalla galleria progetti che contengono dei colori tema con gli stessi nomi, ti verrà chiesto se desideri far corrispondere i colori tema importati con quelli già esistenti. I colori tema dei modelli sono nominati in modo coerente e quando vengono importati elementi da diversi colori tema corrispondo in modo perfetto.

Schemi del tema del colore Molti dei temi web presenti nella GALLERIA DESIGN e nei pacchetti di modelli acquistabili separatamente, includono schemi di colore che possono essere applicati facilmente a siti Internet che utilizzano lo stesso tema per trasformare immediatamente lo schema di colore. Gli schemi di colore si trovano solitamente nella galleria design in ogni tema dopo tutti i layout di pagina e separano gli elementi

www.magix.com

Utilizzo del colore grafici che costituiscono il tema. Nei loro titoli nella galleria design, hanno tutti uno "Schema di colori" e possono essere quindi identificati facilmente. Per applicare uno schema di colori al tuo sito web, devi semplicemente trascinarlo dalla galleria design e rilasciarlo sulla pagina. Puoi provare ad applicare gli schemi di colore di un tema su un sito creato da un modello di un altro tema. Otterrai dei risultati misti e alcuni schemi non funzioneranno bene con altri temi. Per questo, per ottenere risultati migliori attieniti agli schemi di colore che hai utilizzato per creare un sito. Uno degli schemi del colore forniti con ciascun tema corrisponde ai colori standard usati per quello stesso tema. Questo permette di tornare rapidamente al colore originale se lo desideri dopo aver provato un nuovo colore.

Modifica dei colori con nome Per visualizzare il colore con nome nel COLOR EDITOR in modo che possa essere modificato scegli dal COLOR EDITOR trascina il colore dalla Linea Colore nel COLOR EDITOR . Puoi poi modificare il colore come desiderato. Tutti gli oggetti che utilizzano questo colore vengono aggiornati automaticamente e immediatamente per visualizzare il nuovo colore. Per rinominare un COLORE CON NOME mentre lo modifichi , clicca con il tasto destro sul e seleziona RINOMINA o clicca con il tasto destro sulla Linea Colore e seleziona RINOMINA . COLOR EDITOR

Per cancellare un colore con nome, clicca con il tasto destro sul colore nella Linea Colore e scegli ELIMINA.

177

178

Importazione di colori con nome Quando un progetto viene importato nel documento corrente (per es. se importi dalla GALLERIA DESIGN o importi un file XAR o incolli oggetti da un altro progetto), e nel progetto importato sono presenti dei colori con nome che hanno gli stessi nomi ma valori del colore diversi rispetto ai colori del progetto corrente, appare il seguente messaggio di avviso:

Se desideri che gli oggetti importati ereditino i colori del tuo progetto corrente, scegli l'opzione "ACCORDA". In questo modo tutti gli oggetti che utilizzano un dato colore con nome, useranno la versione esistente di quel colore come appare nel documento corrente. Oppure se desideri che gli oggetti importati mantengano i loro colori indipendenti, seleziona l'opzione "NON ACCORDARE". In questo modo vengono aggiunti nuovi colori con nomi che presentano, insieme al nome, anche un numero per distinguerli dai colori già presenti nel progetto. In questo modo gli oggetti importati mantengono i loro colori originali. Nota che se importi degli oggetti da più design e scegli ogni volta "NON ACCORDARE", sulla barra dei colori sarà presente una grande quantità di colori con nome, separati. Non è una condizione molto utile. Un'opzione migliore è quella di utilizzare la funzione Sostituisci colore descritta sopra per cambiare i colori degli oggetti nel caso in cui non desideri assumano i colori tema del tuo documento. Lo stesso messaggio appare se ci sono differenze nello stile di testo tra il documento e il design importato. Per cui, quando viene visualizzato questo messaggio non significa necessariamente che ci sono diverse definizioni di colori con nome: si potrebbe trattare di stili di testo differenti. Per maggiori dettagli vedi la sezione Stili di testo del capitolo Trattamento testo . Il suggerimento di accordo citato sopra include anche la casella "NON VISUALIZZARE PIÙ QUESTA OPZIONE . Se barri la casella, l'opzione che scegli sarà applicata a tutte le

successive importazioni, senza che venga richiesto nuovamente. Essa, comunque, è

www.magix.com

Utilizzo del colore valida solo per la sessione corrente: se riavvii il programma e nell'importazione è presente un conflitto di colori la richiesta si presenterà nuovamente. Se utilizzi l'opzione ACCORDA, puoi scegliere un modello, modificare i suoi colori tematici ed importare più modelli dello stesso tema. I disegni importati accetteranno immediatamente il tema da te modificato. Ad esempio, importa un pulsante grafico di colore rosso dalla GALLERIA DESIGN, cambia il suo colore tema principale da rosso a verde, poi importa un logo grafico di colore rosso dello stesso tema e scegli l'opzione "ACCORDA" . Quando il logo appare nel tuo progetto, invece di essere rosso, esso accetterà automaticamente il colore tematico verde da te scelto. Visto che per la maggior parte dei temi il loro tema colore principale è chiamato "Colore tema 1", ottieni dei buoni risultati quando importi degli elementi grafici da temi diversi ed accordi i colori.

Sostituzione colori Web Designer facilita la ricolorazione di complessi oggetti raggruppati come pulsanti, campi di testo, barre di navigazione ecc., elencando i colori e premettendoti di scegliere quali debbano essere sostituiti.

La finestra di dialogo per la sostituzione colori ti permette di selezionare quale colore sostituire all'interno del gruppo.

Ricolora un elemento in uno dei seguenti modi: • • •

Con la funzione di drag & drop, trascina un colore dalla Barra dei colori sull'elemento. Seleziona un elemento e clicca su un colore nella barra colori. Seleziona un elemento e poi apri il COLOR EDITOR (Ctrl+E).

Il color editor mostra un elenco con i colori in un menu a tendina. Seleziona quello che desideri modificare e poi utilizza il color editor come di consueto.

179

180 Nota che quando sostituisci dei colori negli elementi grafici in questo modo, puoi anche sostituire l'utilizzo di colori con nome con colori locali o senza nome o vice versa. Per cui, per esempio, potresti prendere un pulsante che utilizza un Colore tema 1 e sostituire con un Colore tema 2. D'ora in poi, ogni volta che modifichi il Colore tema 2 del tuo documento, cambia anche il colore del pulsante. Oppure sostituisci il Colore tema 1 con un colore locale, di modo che il pulsante non sia piĂš collegato ai colori tema. Puoi utilizzare questa funzione per applicare in modo rapido colori con nome ad elementi grafici che originariamente non erano stati progettati per l'utilizzo di colori con nome.

L'elemento penna Ă¨ selezionato ed il color editor mostra la gamma di opzioni disponibili per la sostituzione colori.

Nota che quando un oggetto con colori multipli Ă¨ selezionato, la lista a tendina nel color editor elenca solo i colori che contiene. Il colore di riempimento locale, il colore linea locale e l'elenco dei colori con nome non sono inclusi nella lista in questo contesto per evitare di renderla troppo lunga e poco chiara.

www.magix.com

Utilizzo del colore

Modifica del colori di sfondo Trascina e rilascia dei colori della barra colori nello sfondo di pagina o pasteboad per impostare il loro colore. Se nello sfondo sono presenti più colori, appare la finestra di dialogo per la sostituzione colori in modo da poter scegliere quale sostituire. Funziona nello stesso modo descritto sopra per i gruppi con colori multipli. Per utilizzare il color editor per modificare i colori di sfondo, clicca con il tasto destro sulla pagina e scegli "SFONDO PAGINA" >"MODIFICA COLORE PAGINA" ; oppure clicca sulla sfondo della pasteboard e scegli"PASTEBOARDSFONDO">"MODIFICA COLORE DELLA PASTEBOARD".

Colori normali, toni, tonalità e colori collegati Colori normali Si tratta dei normali colori applicabili agli oggetti. MAGIX Web Designer è anche in grado di definire i colori collegati ad un altro colore, in modo che al cambiare del colore principale cambia anche il colore collegato. Esistono tre modi per poter collegare un colore alle sue TONALITÀ, OMBRE, ed a i suoi COLORI COLLEGATI . Si tratta di tecniche molto efficaci che consentono ad esempio di ri-colorare disegni complessi e le relative ombre con un solo click. Alcuni degli esempi di clipart utilizzano questa tecnica.

Toni I tono sono basati su altri colori (chiamati colori originari) e sono sempre una versione più pallida del colore originario. Hanno due utilizzi principali: • •

quando hai un'ombreggiatura più pallida di un colore originario e vuoi che questa venga modificata automaticamente quando cambi il colore principale. Per estendere la gamma di colori disponibili degli inchiostri di stampa. Per esempio, un tono di 25% di rosso crea un colore rosa. Per questo usando solo un inchiostro rosso puoi ottenere sia il rosso puro sia il rosa. In modo analogo, usando solo una stampante in bianco e nero è spesso utile poter far ricorso ai toni di colore per creare varie gradazioni di grigio. Se stai stampando con una gamma limitata di colori (è solitamente più conveniente stampare con uno o due colore, piuttosto che fare una stampa a quattro colori o addirittura completa).

Un tono può essere basato su qualsiasi tipo di colore, incluso un altro tono.

181

182 Ogni cambiamento eseguito sul colore originario comporta una cambiamento nel tono basato su tale colore. Per esempio, se imposti un colore rosa come tono di 50% di rosso, cambiando il colore originario in arancio, il rosa verrà automaticamente convertito in arancio chiaro.

Tonalità Questo strumento permette di creare, sulla base di un colore originario, sia colori più chiari sia colori più scuri. Modificando il colore originario vengono modificati tutte le tonalità associate. Per esempio, un di una macchina può utilizzare tonalità diverse per le zone di luce e ombra della carrozzeria. Una singola elaborazione del colore originario causa la modifica di tutti gli altri colori della carrozzeria, mantenendo comunque corretta l'ombreggiatura. Configurare le tonalità in questo modo richiede del tempo, ma è un metodo molto efficace per modificare i colori. Per ottenere migliori risultati, il colore originario dovrebbe essere un colore saturato "puro". Se si utilizza una modalità colore HSV, la saturazione ed il valore dovrebbero essere 100%. NELL'EDITOR COLORE la croce dovrebbe essere nell'angolo in alto a sinistra.

Colori collegati I colori collegati sono simili ad ombre ma offrono una maggiore flessibilità. Essi si basano su un colore originario, tuttavia puoi definire gli attributi che il colore collegato deve condividere con il colore originario. Ad esempio puoi creare un colore collegato che è più o meno la versione saturata del colore originario, ma la tonalità di colore e la luminosità / oscurità seguono quelle del colore originario.

www.magix.com

Utilizzo del testo

Utilizzo del testo Introduzione Le funzioni di modifica del testo di MAGIX Web Designer sono molto simili a quelle del tuo software di videoscrittura, ma con in piĂš una serie di caratteristiche che non sono presenti in questi programmi.

Puoi ingrandire un testo fino ad un altissimo grado.

Puoi applicare la serie normale di attributi ed effetti di MAGIX Web Designer come riempimenti, trasparenza, sfumature di colore, ombre, e nel frattempo continuare a modificare il testo. Puoi convertire i contorni di un carattere in forme che possono essere modificate come normali sagome.

Adattare testo ad una curva . Un testo puĂ˛ essere ruotato, inclinato o allungato.

183

184

Terminologia FONT

o CARATTERE: una serie di caratteri con uno stile coerente.

FONT FAMILY : una serie di font simili. Per esempio Garamond e Gramond Italic sono

due caratteri diversi della stessa famiglia di Garamond. GIUSTIFICAZIONE: un modo alternativo per descrivere l'allineamento del testo. Un testo allineato a sinistra talvolta è chiamato giustificato a sinistra o flush-left o ragged right. MONOSPAZIATI : tutti i singoli caratteri di un font monospaziato hanno la stessa larghezza. Talvolta vengono chiamati font a larghezza fissa. Sono utili per program listings. Courier è il font monospaziato più comune. La maggior parte dei caratteri sono proporzionali, ciò significa che variano in larghezza. PUNTI : le dimensioni di un testo o di un carattere si misurano di solito in punti,

abbreviato pt. 1 è circa 1/72 pollici, per cui un testo di 72 pt è alto circa un pollice benché diversi font di una data grandezza possono variare.

Strumento di testo Utilizza lo STRUMENTO di TESTO ("F8") per inserire o modificare un testo.

InfoBar STRUMENTO TESTO lato sinistro

Font Dimensioni del carattere Grassetto Corsivo Sottolineato Giustificato

www.magix.com

Utilizzo del testo

InfoBar STRUMENTO TESTO lato destro

Pedice/Apice Interlinea Distanza tra paragrafi Elenchi puntati Elenchi numerati Rientro Togli rientro Controllo ortografico MAGIX Web Designer supporta tre tipi base di oggetti di testo. • • •

Linee di testo semplici: clicca sulla pagina e digita il testo. Colonne di testo: clicca e trascina per creare una colonna e poi scrivi. Aree di testo: clicca e trascina diagonalmente per creare un'area rettangolare e poi scrivi.

Dopo aver creato un oggetto di testo puoi trasformarlo (ruotare, modificare in scala, inclinare) e applicare tutti gli attributi normali come colore di riempimento, trasparenza, sfumatura ecc., utilizzando gli strumenti normali. Puoi anche attaccarlo ad una curva. Il testo rimane sempre modificabile.

185

186

Il menu Font

Pop-up dimensioni font in tempo reale Font utilizzati nel documento corrente Font web safe Tutti i font installati Variazioni di stile disponibili per il font selezionato Non tutti i caratteri dispongono di queste variazioni. Nel menu font sono elencati tutti i caratteri installati è si divide in tre sezioni. Nella parte superiore sono visualizzati i caratteri attualmente in uso nel documento. La seconda sezione mostra i font detti "web safe". Questi font possono essere utilizzati con sicurezza nelle pagine web in quanto vengono supportati da tutti i browser più comuni. Consulta la sezione Font web safe. La terza sezione mostra un elenco alfabetico di tutti gli altri font installati. Il nome di ogni font è visualizzato nel menu nel suo proprio carattere tipografico. In questo modo la selezione avviene in modo più semplice. Quei font per cui sono disponibili stili multipli, sono mostrati con dei piccoli triangoli neri sul lato destro del menu. Basta tenere il puntatore del mouse sul nome di un carattere per uno o due secondi ed apparirà un piccolo sotto-menu a destra del menu principale, con l'elenco di tutti gli stili disponibili relativi a quel carattere. Puoi spostare il puntatore del mouse sul menu per selezionare lo stile desiderato.

www.magix.com

Utilizzo del testo

Font web safe Questi font possono essere utilizzati senza problemi nei siti web perché riconosciuti dalla maggior parte di computer e dispositivi. Nel tuo sito web puoi anche utilizzare uno qualsiasi delle centinaia di font di Google. Se la licenza lo permette, puoi anche utilizzare altri font che hai installato.

Anteprima caratteri in tempo reale Se sposti il puntatore del mouse su una voce del menu dei caratteri il testo selezionato nel documento viene aggiornato al immediatamente per visualizzare l'anteprima del carattere. Non si tratta di una modifica permanente a meno che non clicchi sul carattere richiesto. Muovendo l'indicatore del mouse sul menu, torni indietro al carattere iniziale finché non ti sposti su un'altra voce. Si tratta di una funzione molto utile se desideri visualizzare l'anteprima di una grande quantità di caratteri in modo rapido. Se tieni premuto il tasto delle maiuscole mentre scorri il menu caratteri, la selezione del font non è aggiornata immediatamente ma c'è una breve pausa prima che avvenga l'aggiornamento. Questa funzione è utile se trovi che l'anteprima isantanea rallenti lo scorrere all'interno del menu (per esempio se hai selezionato una grossa porzione di testo).

Anteprima delle dimensioni dei caratteri in tempo reale Accanto al menu per le dimensioni dei font, un cursore a pop-up come quello utilizzato in altre parti di Web Designer. Grazie a questo cursore puoi regolare le dimensioni del font direttamente e in tempo reale.

Clicca per visualizzare il pop-up per le dimensioni dei font

Allo stesso modo dei regolatori pop-up usati comunemente, anch'esso può essere impiegato in due modi. Cliccando sulla freccia e rilasciandola, il pop-up verrà visualizzato e rimarrà sullo schermo. Ora puoi trascinare il regolatore o usare la rotella di scorrimento del mouse sul controllo per regolare rapidamente i valori. In questo caso esso fornisce un rapido modo per regolare le dimensioni con il mouse e visualizzare il risultato direttamente sulla pagina del documento a cui stai lavorando. Il metodo alternativo di usare il regolatore pop-up è cliccare sul pulsante, trascinarlo e rilasciarlo. Questo è un modo più diretto di regolare il controllo (richiede meno click).

187

188

Navigazione rapida nel menu dei caratteri Nel menu dei caratteri, puoi digitare le lettere iniziali del carattere per passare direttamente alla rispettiva sezione del menu. Se ad esempio digiti "ver", il carattere Verdana viene visualizzato automaticamente

Simboli I simboli sono rappresentati da un'ampia gamma di icone dimensionabili, che vengono periodicamente aggiornate non appena ne sono disponibili di nuove. Sono costituiti sia da simboli del Font Awesome sia del Google Material Design: puoi inserirli nel testo o nel documento come elementi grafici autonomi. I simboli sono divisi in varie categorie, come icone per applicazioni web, icone di marche, icone per l'editor di testo, icone direzionali ecc. e si trovano alla voce INSERISCI del menu. "INSERISCI" > "SIMBOLO". Compaiono anche nel CATALOGO CONTENUTI ONLINE (sulla pagina 42) alla categoria FONT SIMBOLI . Sposta verso il basso la barra di scorrimento per visualizzare l'intera lista.

Alcuni dei simboli Font Awesome

C'è una funzione di RICERCA: scrivi ad es. 'Pagamento' e ti mostrerà i simboli della carta dello shopping, di credito, PayPal e simili. Puoi sostituire facilmente i simboli del tuo documento: clicca sul tasto destro del mouse sul simbolo e seleziona "SOSTITUISCI SIMBOLO" per visualizzare le icone. Ciò vale anche per i simboli degli elenchi puntati: clicca col tasto destro del mouse su uno degli elenchi puntati e seleziona "SOSTITUISCI SIMBOLO DELL'ELENCO PUNTATO" .

www.magix.com

Utilizzo del testo Sarai avvertito se è disponibile una versione aggiornata di un simbolo o se sono stati aggiunti nuovi font. L'installazione di font nuovi o aggiornati avviene in automatico. È importante accettare questi aggiornamenti perché la selezione dei simboli e il Catalogo Contenuti mostrano sempre i simboli delle versioni dei font più nuovi e potrebbe succedere che, se non li hai aggiornati, alcuni dei font che decidi di usare potrebbero non funzionare sul tuo dispositivo. Le Material Icons hanno un design in base al quale il tratto del simbolo è posto più in alto rispetto a quello del Font Awesome. Puoi verificarlo direttamente mettendo a confronto un Font Awesome affianco ad un simbolo delle Material Icons. Lo puoi correggere inserendo un simbolo sulla pagina ("INSERISCI > SIMBOLO" senza posizionare il cursore sul testo), che fa sì di inserire il simbolo come una forma. Poi, copialo negli appunti e incollalo nel testo.

Inserimento dei simboli nel testo Posizione il cursore dello STRUMENTO TESTO (sulla pagina 395) nel punto in cui desideri posizionare l'icona e poi clicca su un'icona all'interno dell'elenco. Il simbolo è inserito nel testo Quando inserisci dei simboli nel tuo documento in questo modo, i caratteri del simbolo utilizzano il font Font Awesome o i font Material Icons. Se in seguito pubblichi il tuo documento nel formato HTML, apparirà un messaggio in cui vieni avvisato che il font verrà pubblicato con il tuo documento o con il tuo sito. Questo non è un problema in quanto la licenza per il font permette un simile uso.

Simbolo inserito come font tramite lo Strumento testo.

Inserimento di simboli come elementi grafici Assicurati che il cursore di testo non sia presente prima di cliccare per inserire un'icona come grafica vettoriale ridimensionabile. Per eliminare il cursore di testo, passa allo strumento di selezione o qualsiasi altro strumento ad eccezione dello Strumento Testo (sulla pagina 395). Il simbolo appare al centro dell'area di lavoro (che potrebbe essere dietro al simbolo della finestra di dialogo). Utilizza lo strumento di selezione per spostarlo all'interno del documento, ridimensionarlo ecc.

189

190 Quando inserisci un simbolo in questo modo, il documento non ha più bisogno del font appropriato, in quanto è stato convertito in un elemento grafico. Quindi, se pubblichi nel formato HTML, non apparirà il messaggio di avviso descritto sopra.

Simbolo inserito come elemento grafico scalabile.

Sostituzione font Spesso è utile sostituire un font su tutto il documento o sito web, in particolar modo quando non si dispone di quel font specifico o si desidera utlizzarne un altro. Nello Strumento Testo clicca con il tasto destro nel testo che contiene il font che desideri sostituire e scegli l'opzione SOSTITUISCI FONT CON... dal menu contestuale. Tutte le ricorrenze di quel font vengono sostituite nel documento ciascuno con la variante e la dimensione corrispondente scelta.

Testo semplice Se desideri digitare una piccola quantità di testo semplice, posiziona l'indicatore laddove vuoi inserire il testo e cliccare. Un cursore rosso viene visualizzato nel punto in cui hai cliccato ed ora puoi cominciare a digitare sulla tastiera. Se fai un errore, usa "Cancella" ed il tasto "Backspace" nella maniera usuale. Premendo "Invia" completi la riga ed avvii una nuova riga di testo al di sotto di questa. Lo spazio interlinea è controllato dalla rispettiva casella di testo posta sulla barra informativa. Un testo semplice non è adatto a paragrafi grandi perché non si può contare sul ritorno a capo automatico. In questo caso, utilizza una colonna o un area di testo (vedi sotto). L'impostazione standard prevede che il contorno del testo non sia colorato. Cliccando su un colore posto sulla barra dei colori e tenendo premuto il tasto Shift, il contorno del testo selezionato viene colorato - lo spessore del contorno dal comando "spessore linea", così come di solito. Il Tipo di linea di unione deve essere impostato come

www.magix.com

Utilizzo del testo "arrotondato", per ottenere un aspetto più armonioso (controllo al di sopra della GALLERIA LINEE ). La larghezza della riga è descritta nella sezione Modificare la lareghezza (spessore) (sulla pagina 161, sulla pagina 162). L'applicazione del colore è descritta nella sezione Utilizzo dei colori (sulla pagina 169). Puoi continuare ad inserire il testo anche dopo la rotazione, dopo averlo colorato al suo interno o posizionato su una curva.

Testo in una colonna Se devi inserire grandi parti di testo, su più righe, è consigliato utilizzare una colonna. Modificando la larghezza di una colonna, il testo si adatta automaticamente. Per scrivere una colonna di testo:

1. Seleziona lo STRUMENTO TESTO . 2. Sposta il puntatore del mouse sul punto da cui desideri parta la colonna. 3. Trascina tenendo premuto il tasto destro per creare una linea orizzontale, la

larghezza della colonna. La linea verde/rossa discontinua ti mostra l'ampiezza della colonna. Non viene mai importata o stampata. 4. Se scrivi il testo, la linea verde/rossa discontinua viene sostituita da una linea rossa continua. Non è necessario premere "Invio" quando si giunge alla fine di una riga. Quanto il testo ha raggiunto il bordo di una colonna, va a capo automaticamente. NOTA : se clicchi da un'altra parte o cambi gli strumenti prima di cominciare a

scrivere, la linea verde/rossa discontinua della colonna verrà sostituita da una linea verde, indicante una colonna di testo inattiva. Per riattivare la colonna, cliccaci di nuovo sopra con lo strumento testo e la linea tornerà al suo stato attivo e tu potrai ricominciare e scrivere. Invece di digitarlo direttamente, puoi creare un testo su un altro editor testi o processore word, per poi copiarlo negli appunti e incollarlo in MAGIX Web Designer. La funzione "Copia e incolla " supporta testi formattati in RTF. Le parole vengono divise lungo la riga solo se contengono un trattino (tasto del meno).

L'effetto di digitare un trattino in esecuzione

191

192 Se digiti "Ctrl + -" viene inserito un trattino nascosto che appare soltanto quando la parola può essere divisa e andare a capo alla fine di una riga. Questo trattino è particolarmente utile nel caso di colonne di testo strette per evitare aree bianche. Se si inserisce un trattino normale la parola viene divisa alla fine della riga. Viene chiamato trattino "nascosto" perché quando la parola appare nel mezzo di una riga, esso scompare (diversamente dagli altri tipi di trattino). Le parole vengono divise solo se necessario. Quando si modifica un testo, il trattino nascosto viene trattato come un carattere invisibile (non occupa nessuno spazio), ma puoi visualizzarlo ogni volta che sposti il cursore a destra/sinistra nella area in cui è posizionato. Un trattino fisso può essere inserito digitando "Ctrl + Shift + -" (il tasto del meno). Il trattino fisso fa in modo che non si vada a capo. È molto utile quando hai dei trattini in delle parole che non desideri dividere alla fine di una riga.

Modifica l'ampiezza della colonna Trascina una delle due maniglie rosse alle estremità della linea.

Modifica l'angolazione della colonna Premi n e trascina una delle maniglie rosse all'estremità della linea per cambiare l'angolazione della colonna. In alternativa, trascina premendo Ctrl per contenere la linea agli angoli di limitazione. Oppure puoi utilizzare lo strumento di SELEZIONE per ruotare l'oggetto nel modo usuale. Per amggiori informazioni sugli angoli di limitazione, consulta il capitolo Introduzione a MAGIX Web Designer (sulla pagina 101).

Aree di testo Se nello Strumento di TESTO cicchi e trascini diagonalmente sulla pagina, crei un'area di testo rettangolare. Il cursore intermittente sarà posizionato nell'angolo in alto a sinistra e tu potrai scrivere o incollare un testo. Un area di testo può contenere una porzione di testo scorrevole. Questo è il caso di una singola parte di testo che scorre da un'area di testo ad un'altra. È chiamato testo scorrevole in quanto sei si aggiunge o rimuove del testo in un area, esso va ad occupare aree collegate o ritorna o le abbandona. Se il testo esce dalla parte inferiore dell'area, verrà mostrato di colore grigio ma sarà comunque possibile continuare a modificare questo testo normalmente.

www.magix.com

Utilizzo del testo

Connessione di aree di testo - flusso di testo Quando il testo scorre oltre il fondo dell'area di testo, appare, in questa posizione, una freccia di colore rosso. Se trascini lungo questa o qualsiasi area, il testo verrà fatto scorrere nella nuova area di testo la quale verrà connessa alla precedente. Questa operazione viene mostrata tramite una freccia di scorrimento.

Area di testo in eccedenza con freccia rossa.

Se il cursore di testo si trova in un'area con un testo che eccede il suo spazio, clicca e trascina sulla pagina per creare una nuova area. La nuova area di testo viene connessa automaticamente ed il testo scorre nella nuova area. Consiglio: puoi far scorrere il testo da un'area ad un'altra di qualsiasi pagina, anche quelle precedenti. Se desideri far scorrere in un area il testo di molte pagine, usa il metodo descritto sopra anche se puoi rimpicciolire le dimensioni pagina con lo zoom e trascinare la freccia lungo tutte le pagine. Per separare un'area di testo da un'altra trascina l'indicatore di eccedenza e rilascialo lontano dall'area di testo. Oppure clicca sulla freccia di scorrimento sul fondo dell'area di testo e seleziona SCOLLEGA FLUSSO DI TESTO . Se cancelli un'area di testo che è connessa ad un'altra, viene eliminata solo questa area ed il testo scorre nelle aree rimanenti.

Modifica dimensioni area di testo Attraverso lo strumento di TESTO puoi cliccare e trascinare a partire da una delle maniglie di controllo poste agli angoli. Il testo presente nell'area verrà riformattato in base alle nuove dimensioni. Se ridimensioni un'area di testo tramite lo STRUMENTO DI SELEZIONE , accade lo stesso: il testo non viene ridimensionato in scala, ma viene modificata solo l'area e il testo scorre al suo interno adattandosi alla nuova dimensione. Se desideri modificare le dimensioni del testo, apri lo STRUMENTO TESTO, seleziona tutto il testo tramite Ctrl+A e modifica la grandezza del font nella barra informazioni.

193

194 Puoi far ruotare un'area di testo utilizzando lo STRUMENTO di SELEZIONE in modo usuale e il testo scorrerà normalmente attraverso l'area ruotata.

Se fai ruotare un'area di testo, lo scorrere del testo non subisce alcun effetto.

Tieni premuto "Ctrl" per limitare la rotazione del testo ad angoli di 90° ed allineati allo schermo. Tramite lo strumento di testo, puoi cliccare e trascinare una delle maniglie di controllo poste sugli angoli. L'area di testo viene riformattata per adattarsi alla nuova dimensione. Se ridimensioni un'area di testo tramite lo strumento di selezione, accade lo stesso: il testo non viene ridimensionato in scala, ma viene modificata solo l'area e il testo scorre al suo interno adattandosi alla nuova dimensione. Se desideri modificare le dimensioni del testo, apri lo Strumento testo, seleziona tutto il testo tramite Ctrl+A e modifica la grandezza del font nella barra informazioni.

Conteggio parole Il conteggio totale delle parole e dei caratteri del testo corrente è visualizzato nella linea di stato. Qui viene mostrato anche il numero di parole eccedenti. Se una qualsiasi parte del testo è selezionata, viene mostrato il conteggio riguardante la selezione.

Testo lungo una curva Per posizionare un testo lungo una curva a tua scelta devi: 1. creare sia un testo base che uno

in una colonna o area di testo (vedi sopra). 2. Seleziona il tuo oggetto di testo ed una curva. 3. Scegli ORDINA -> Adatta testo alla curva.

www.magix.com

Utilizzo del testo In alternativa, puoi selezionare una curva o linea e cliccare poi nello Strumento di TESTO sulla linea nel punto ic cui desideri che inizi il testo e poi puoi iniziare a scrivere. In questo modo il testo viene adattato automaticamente lungo la linea. Quando hai raggiunto la fine della linea il testo si avvolgerà su una nuova linea immediatamente sotto l'inizio della linea precedente Se non desideri che il testo si sviluppi su un'altra linea, " + clicca" sulla linea. Per nascondere la cura di modo che non sia visibile, seleziona lo Strumento "SHAPE e imposta il colore della linea a SENZA COLORE o con la voce di larghezza NESSUNO . In questo modo puoi modifcare la curva nel modo usuale.

EDITOR"

L'applicazione del colore è descritta nella sezione Utilizzo dei colori (sulla pagina 169).

Adattamento del margine sinistro e destro del testo su una curva Se inizi a scrivere su una curva o a posizionarvi una colonna di testo, puoi cambiare la posizione iniziale e quella finale delle maniglie rosse. Trascinale lungo la curvo come preferisci. Se centri il testo questi saranno i due margini.

Cambio dei lati della linea Clicca col tasto destro del mouse sul testo e seleziona l'opzione menu INVERTI TESTO SULLA CURVA . In alternativa, se inverti la direzione della linea (strumento EDITOR FORMA , pulsante sulla barra informazioni), il testo si sposterà sull'altro lato della linea oppure, nel caso di una forma chiusa, si muoverà dall'interno verso l'esterno della forma.

INVERTI TRAIETTORIA

195

196

Modifica del testo Se clicchi due volte su un oggetto di testo in uno strumento, vieni condotto nello Strumento di TESTO e il cursore viene posizionato nel testo nella posizione di click. È possibile utilizzare tutte le normali operazioni eseguibili con il cursore e il mouse nello stile di un processore word. Per esempio, • • • • •

Clicca in un punto qualsiasi per poter posizionare il cursore. Utilizza le frecce direzionali destra e sinistra o su e giù. Utilizza la combinazione "Ctrl + frecce a destra e sinistra" per spostare una parola verso destra o verso sinistra. Premi "Home" o "End" per andare all'inizio o alla fine di una riga. Premi "Ctrl + Home" o "Ctrl + End" per andare all'inizio o alla fine di un oggetto di testo.

Selezionare del testo • • • • • •

" + uno qualsiasi" dei tasti nominati sopra, per selezionare un testo. Clicca due volte per selezionare una parola Se clicchi tre volte verrà selezionata un'intera riga di testo o "Ctrl + L" Se clicchi quattro volte viene selezionato un paragrafo di testo Oppure scorri lungo il testo nello Strumento di Testo per poterlo selezionare. Con la combinazione "Ctrl + A" viene selezionato tutto il testo nel oggetto di testo (devi essere nello Strumento di TESTO.)

Se hai selezionato un testo, ogni cambiamento di attributo verrà applicato solamente all'area di testo selezionata. Hai posizionato nel testo solo il cursore, ogni cambiamento di attributi, come la selezione di un colore nuovo, apparirà soltanto quanto scriverai il testo.

Selezione dell'intero oggetto di testo C'è un pratico comando veloce per selezionare l'intero oggetto di testo. Invece di usare Ctrl+A o trascinare attraverso tutto il testo, premi semplicemente il tasto ESC . Questa operazione elimina il cursore ma seleziona l'intero testo (la linea di stato confermerà 1 oggetto di testo). Questo facilita l'applicazione di un effetto o attributo all'intera storia di testo. Per esempio, per cambiare le dimensioni del font dell'intero oggetto di testo, premi ESC e seleziona le nuove dimensioni dalla barra informazioni.

Scrittura maiuscola/minuscola Usa il menu contestuale per modificare il tipo di scrittura del testo selezionato: clicca col tasto destro del mouse e scegli fra le opzioni seguenti...

www.magix.com

Utilizzo del testo • • •

"PASSA A" > "MINUSCOLA" "PASSA A" > "MAIUSCOLA" "PASSA A" > "CITAZIONE"

In aggiunta Se premi "Ctrl + Shift + F1" puoi modificare tutto il testo e renderlo in maiuscole o tutto in minuscole. Così, se per caso hai scritto una sezione di testo con il tasto per le maiuscole attivato, basta solo selezionarlo e premere "Ctrl + Shift + F1". Premere "Ctrl + W" sostituisce il carattere dopo il cursore e muove il cursore in avanti. Puoi cambiare il carattere di una sezione di testo selezionata nello stesso modo. I carattere maiuscoli diventano minuscoli e viceversa. Il corusore non verrà mosso.

Virgolette intelligenti Se scrivi i caratteri ' o ", MAGIX Web Designer li convertirà automaticamente nelle citazioni di apertura o di chiusura esteticamente più appropriate ed accurate. Inoltre, è intelligente inserire l'uso di virgolette singole (apostrofi) all'interno di parole, per indicare dei caratteri mancanti.

Inserimento di caratteri speciali Esiste una serie di utili comandi veloci che consentono di inserire caratteri speciali, come © o ™. Consunta la sezione Caratteri speciali (nello strumento di testo) (sulla pagina 396) nel capitolo "Menu e comandi veloci della tastiera". Tutti questi comandi veloci (ad eccezione dello spazio rigido) sono compatibili con Microsoft Word.

Inserimento di testi fac-simile ("Lorem Ipsum") Quando si crea il layout di una pagina, è abitudine comune utilizzare un testo fac-simile, il quale corrisponde ad un testo simile al latino (in realtà non ha alcun significato) ma ha l'aspetto di un tipico testo in inglese (o di altre lingue simili a quelle basate sul latino). Il testo comincia con "Lorem ipsum dolor sit amet..." Nota storica: questo stesso testo è stato utilizzato come testo fac-simile per più di 500 anni nell'industria tipografica e alcune parti del testo latino possono essere rintracciate in testi scritti più di 2000 anni fa.

197

198 Puoi inserire un paragrafo del testo "Lorem ipsum" digitando "Ctrl + Shift + L" ("L" sta per Lorem) mentre utilizzi lo strumento di testo. Per inserire un blocco di testo più grande, premi la combinazione di tasti più di una volta.

Controllo ortografico Lo STRUMENTO TESTO include un controllo ortografico; clicca sulla icona CONTROLLO ORTOGRAFICO / CORREZIONE AUTOMATICA sulla barra informazioni dello STRUMENTO TESTO e apparirà un menu a tendina. Per usare il controllo ortografico, seleziona "CONTROLLO ORTOGRAFICO MENTRE SCRIVI ". Ora, mentre scrivi, tutte le parole del tuo documento che non vengono riconosciute vengono sottolineate di rosso. ff

Per correggere una parola scritta male, clicca con il tasto destro del mouse su di essa e il menu contestuale ti suggerirà delle alternative. Per sostituire la parola sottolineata, basta selezionare uno dei suggerimenti del menu.

Selezionare la lingua Il menu che appare cliccando sull'icona del Controllo ortografico elenca tutte le lingue per le quali è disponibile un dizionario. Come standard è selezionata la lingua corrispondente all'impostazione locale corrente. Per cambiare la lingua associata ad un oggetto di testo, seleziona l'oggetto; dopodiché nello strumento di testo scegli la lingua che desideri dal sottomenu "IMPOSTA LA LINGUA PER TUTTO IL TESTO" . Ora tutti gli oggetti di testo verranno controllati secondo il dizionario della lingua scelta. Per cambiare la lingua associata ad un oggetto di testo, seleziona l'oggetto con lo STRUMENTO DI TESTO e scegli la lingua che desideri dal menu del Controllo ortografico. Ora l'oggetto di testo verrà controllato secondo il dizionario della lingua scelta. Se non vuoi che venga eseguito il controllo ortografico su nessuno degli oggetti di testo del tuo documento, seleziona"IMPOSTA LA LINGUA PER TUTTO IL TESTO" > "NESSUNA LINGUA (IGNORA)" . Se desideri che ad un testo non venga applicato il controllo ortografico, seleziona l'oggetto usando lo STRUMENTO TESTO e scegli l'opzione "NESSUNA LINGUA (IGNORA)" dal menu del Controllo ortografico.

www.magix.com

Utilizzo del testo

Dizionario dell'utente Parole che utilizzi regolarmente ma che non sono presenti nel dizionario fornito da MAGIX Web Designer possono essere aggiunte al tuo dizionario personale. Clicca con il tasto destro sulla parola e scelgi "aggiungi al dizionario dell'utente". Ora la parola non verrĂ piĂš riconosciuta come errore. Il dizionario dell'utente si applica a tutti i documenti che utilizzi nel tuo PC e a tutte le lingue.

Sincronizzazione di Testo utilizzando Soft Groups In alcuni progetti potresti aver bisogno di oggetti ti testo multipli per poter mostrare sempre lo stesso testo ma utilizzando stili diversi. Di solito, quando desideri combiare il testo mostrato su questi oggetti, dovreisti modificarli sigolarmente. Aggiungendo degli oggetti di testo collegati in un Soft Group avrai la sicurezza che mostreranno sempre lo stesso testo. Per aggiungere gli oggetti di testo collegati in Soft Group, per prima cosa assicurati che tutti abbiamo esattamente lo stesso testo (altrimenti non vengono sincronizzati). Poi selezionali tutti utilizzando lo Strumento Selector. DopodichĂŠ seleziona "DISPONI"->"APPLICA SOFT GROUP" (Ctrl+Alt+G). Quando il testo viene modificato in un oggetto di testo, gli altri verranno aggiornati automaticamente anche sono sparsi su diversi layer all'interno del documento. Nota che questa sincronizzazione funziona anche quando alcuni oggetti di testo sono su layer protetti o invisibili. Per sciogliere un Soft Group, seleziona "DISPONI" -> "RIMUOVI SOFT GROUP " (Ctrl+Alt+U). Per ulteriori informazioni sui Soft Groups vedi la sezione Soft Group del capitolo Manipolazione Oggetti (sulla pagina 135)

199

200

Tabulatori, margini e rientri linea Righelli Per adattare i tabulatori, i margini e i rientri è necessario attivare i righelli sul tuo documento. Per fare questo: • • •

Scegli Finestra > Barre > Righelli Oppure premi Ctrl++R (è un nuovo comando veloce). Oppure premi Ctrl+L (quando non sei nello strumento di TESTO).

Le caratteristiche di testo avanzate compariranno sul righello solo quando stai usando lo strumento di TESTO e quando il cursore di testo è dentro una storia di testo o quando l'oggetto di testo è selezionato nello strumento di TESTO. Nello strumento di testo, quando trascini i margini o i tabulatori sul righello, ottieni una guida verticale temporanea per facilitare l'allineamento dei tabulatori o margini agli oggetti in altri punti della pagina.

Margini e rientri Tutti i cambiamenti che fai vengono applicati al paragrafo attuale del testo (cioè la parte di testo dove si trova il cursore), oppure, se hai selezionato una sezione di testo, ai paragrafi della sezione selezionata. Puoi applicare modifiche a tutto il testo in una storia di testo, selezionando tutto il testo all'interno di quella storia (Ctrl+A). Per modificare più di una storia di testo, seleziona gli oggetti di testo nello strumento di SELEZIONE e poi passa allo strumento di TESTO ed effettua i cambiamenti necessari. Margine sinistro. Trascina questo per cambiare il margine sinistro del testo. Margine di prima linea. Trascina questo per cambiare il margine sinistro per la prima linea del paragrafo (utile per gli elenchi, come si vede in basso). Margine destra. Trascina questo per cambiare il margine destro del testo.

www.magix.com

Utilizzo del testo

Esempi di margine sinistro e margine di prima linea

Esempio di margine destro

Testo lungo una curva Se hai adattato una singola riga di testo alla curva utlizzando l'opzione ADATTA TESTO ALLA CURVA , la riga della curva è il margine. Se il testo è più lungo della riga andrà fuori

dal margine. Se ha cliccato su una riga o adattato una colonna di testo ad una curva o riga, hai degli indicatori di margine a destra e a sinistra (dei quadratini rossi) che possono essere trascinati lungo la riga per regolare i margini utilizzati per la giustificazione.

201

202

Tabulatori Come impostazione standard, le storie di testo sono create con tabulatori configurati a 0,5 cm. Questo significa che puoi premere il tasto Tab e il tuo testo si sposterĂ sul prossimo punto di tabulazione. Devi solo definire le nuove posizioni di tabulazioni se desideri una spaziatura differente. Questi tabulatori standard sono visualizzati come L sul righello:

Tabulatori standard, indicati da L

Tabulatori personalizzati Per creare una posizione di tabulatore personalizzata, clicca sul righello dove desideri posizionare il nuovo tabulatore. CosĂŹ verranno sostituiti i tabulatori standard fino a quel punto del righello. Per esempio:

il triangolo presenta un tabulatore personalizzato

Per impostare piĂš di un tabulatore clicca svariate volte sul righello. Per muovere un tabulatore personalizzato trascinalo lungo il righello. Per rimuovere un tabulatore trascinalo fuori dal righello (i tabulatori standard ritornano automaticamente nelle loro posizioni).

Tipi di tabulatori personalizzati Puoi impostare diversi tipi di tabulatori personalizzati. Come standard, i tabulatori personalizzati sono quelli di allineamento a sinistra. Questo significa che il testo viene allineato con il tabulatore sulla sinistra del testo. Per cambiare il tipo di tabulatore, clicca sull'icona corrispondente sul righello.

www.magix.com

Utilizzo del testo Sono disponibili i seguenti tipi di tabulatori. Non sei limitati ad un solo tipo di tabulatore in una storia, puoi anche scegliere tipi diversi e impostare tabulatori addizionali. Allinea a sinistra: il testo verrà allineato con il tabulatore a sinistra.

Allinea a destra: il testo verrà allineato con il tabulatore a destra.

Allinea al centro: il testo verrà centrato sul tabulatore.

Allinea punti decimali: i punti decimali nel testo verranno allineati con il tabulatore. Quest'opzione è utili per gli elenchi e, qualsiasi sia la quantità, i punti decimali (virgole) vengono allineati col tabulatore.

Come creare rientri sospesi I rientri sospesi sono dove la prima linea di un paragrafo ha un margine negativo o un margine che è sospeso sulla sinistra del normale margine sinistro. Gli elenchi numerati o puntati sono esempi di rientri sospesi. Per creare rientri sospesi: 1. trascina il margine sinistro verso l'interno.

203

204 2. Clicca sul righello lontano dal margine sinistro (crea un nuovo punto di arresto

del tabulatore) e trascina questo punto esattamente sul margine sinistro. 3. Adesso ogni linea inizierà con un rientro - puoi inserire un qualsiasi carattere

speciale o numero e premere Tab per muoverti sul margine sinistro. Di conseguenza (come per il paragrafo) tutte le linee seguenti del testo hanno un rientro sul margine sinistro.

Oggetti posizionati intorno al testo In MAGIX Web Designer puoi fare in modo che un oggetto respinga il testo, in modo tale che il testo posto al di sotto scorra automaticamente intorno all'oggetto invece di essere visualizzato sotto di esso. Ciò facilita l'esecuzione del layout delle pagine contenenti lunghi passaggi di testo uniti a foto ed a grafici. Dopo aver selezionato questa impostazione, puoi regolare le posizioni dei tuoi grafici e delle foto cosicchè il testo verrà regolato automaticamente e scorrerà intorno a loro. Puoi anch fare in modo di respingere solo il testo all'interno di un layer; in questo modo gli oggetti all'interno di un leyer smettono di respingere il testo su altri layer e inoltre il testo sul layer non verrà respinto dagli oggetti posti su layer superiori.

Oggetti respingenti Per fare in modo che un oggetto respinga il testo, clicca con il tasto destro e seleziona l'opzione "RESPINGI TESTO IN BASSO " Qualsiasi oggetto di testo nello stesso layer ma al di sotto dell'oggetto respingente (consulta la Galleria pagine e layer (sulla pagina 337)) sarà respinto con un margine di 5 pixel fra testo e oggetto. Nota che gli oggetti che respingono il testo respingono solo il testo posto al di sotto degli oggetti ed in alcun modo quello posto al di sopra.

www.magix.com

Utilizzo del testo In alternativa clicca con il tasto destro del mouse sull'oggetto e seleziona RESPINGI & per visualizzare il dialogo di RESPINGIMENTO E ANCORAGGIO TESTO .

ANCORA

Clicca la casella RESPINGI TESTO INTORNO A QUESTA GRAFICA E se vuoi che il testo intorno all'oggetto venga respinto come un rettangolo, clicca sull'opzione RESPINGIMENTO RETTANGOLARE . Con questa opzione succede che il testo viene respinto intorno ai contorni di una forma rettangolare posta intorno all'oggetto, ignorandone i contorni veri e propri.. Ciò risulta più efficiente nel caso in cui il tuo documento o il tuo sito web riporta dei testi lunghi e molti oggetti respingenti ancorati al testo. L'opzione è impostata per default se vuoi attivare il respingimento per gli oggetti rettangolari.

Testo respingente intorno a un oggetto (a sinistra) e respingimento rettangolare (a destra).

Se lo desideri imposta un margine di rinvio per l'oggetto per fissare lo spazio tra il testo e l'oggetto. Se desideri un altezza o un larghezza diversa, clicca sul simbolo a forma di lucchetto e inserisci l'altezza del margine nella casella H (orizzontale) e la larghezza nella casella V (verticale). Clicca su OK . Per disattivare il respingimento clicca con il tasto destro sull'oggetto e scegli l'opzione RESPINGI TESTO SOTTO . Oppure clicca con il tasto destro e seleziona RESPINGIMENTO & ANCORAGGIO per aprire nuovamente il dialogo di respingimento & ancoraggio testo.

205

206 Clicca la casella di controllo RESPINGI TESTO INTORNO A QUESTA GRAFICA per deselezionare e clicca su OK . Nota che le singole linee di testo non reagiscono in alcun modo agli oggetti respingenti, bensì solo le aree e le colonne di testo. Per respingere solo il testo all'interno dello stesso layer dell'oggetto, consulta Proprietà layer (sulla pagina 345)

Grafiche ancorate Puoi posizionare una grafica o un gruppo, di modo che sia legato ad una posizione nel testo, cosicché se il testo si sposta a causa di modifiche, l'oggetto grafico si sposta mantenendo la stessa posizione relativa. In ogni caso l'ancoraggio dovrebbe essere applicato solo per quegli oggetti che stanno fuori dai bordi del testo (per. es. una foto posta a destra o sinistra di una colonna di testo) o dietro un testo. Utilizza l'incorporamento per gli oggetti posti entro i limiti del testo (vedi sotto). 1. Il modo migliore di ancorare una grafica o un gruppo è cliccarci sopra e scegli

2. 3.

4. 5. 6.

l'opzione ANCORA AL TESTO. Se desideri elaborare anche le proprietà di ancoraggio, clicca con il tasto destro sull'oggetto e seleziona RESPINGIMENTO & ANCORAGGIO per visualizzare la relativa finestra di dialogo. Clicca sulla casella SPOSTA GRAFICA CON TESTO Per impostazione predefinita viene selezionato anche SPOSTA SOLO IN VERTICALE di modo che la grafica si sposti solo verticalmente mentre il testo viene modificato. Normalmente questa è l'opzione più utile. Se desideri che l'oggetto tenga traccia della posizione di ancoraggio orizzontalmente, l'operazione di incorporamento è l'opzione migliore. Un simbolo di ancoraggio appare in altro a sinistra nell'oggetto ad indicare che ora è stato ancorato. Usa lo STRUMENTO DI SELEZIONE o TESTO, clicca e trascina il simbolo di ancoraggio per visualizzare la freccia rossa. Sposta la testa della freccia e rilasciala nella posizione del testo in cui desideri che l'oggetto venga ancorato. Segno di omissione di colore rosso (una T rovesciata) indica la posizione di ancoraggio. Mentre elabori il testo intorno al suo segno di omissione, il punto di ancoraggio e l'oggetto ancorato si spostano con il testo.

www.magix.com

Utilizzo del testo

Un oggetto ancorato mostra un simbolo a forma di ancora e una freccia che punta sul punto di ancoraggio, mostrato come un segno di omissione di colore rosso. Questi simboli appaiono mentre scrivi, salvo quando sei vicino ad un punto di ancoraggio.

Nota: se trascini la freccia in una posizione della pagina dove non è presente del testo, questa si trasforma in un'ancora rossa che indica che le proprietà di ancoraggio dell'oggetto andranno perdute se viene rilasciato in questa posizione. Questo succede anche quando la freccia è rilasciata sull'oggetto stesso. Comunque nota che l'oggetto ancorato non si sposta fuori dall'area della pagina come conseguenza dello spostamento del punto di ancoraggio. L'oggetto ancorato si sposterà solo sul margine della pagina.

Questo è un esempio di colonna di testo con vari elementi grafici posti sulla sinistra. Ognuno di essi è ancorato all'inizio di una riga di testo immediatamente alla sua destra.

207

208 È possibile ancorare oggetti grafici o gruppo, inclusi gruppi contenenti testo, come pannello laterale dell'esempio mostrato sopra. È possibile inoltre ancorare gli oggetti perché appaiano in cima o sotto il testo. La grafica con il fiore blu pallido dell'esempio mostrato sopra, è ancorato in questo modo e scorre con il testo. se un oggetto ancorato ha anche la funzione di respingere, verrà respinto solo il testo a cui l'oggetto è ancorato. NOTA:

NOTA: il respingimento è limitato agli oggetti ripetuti: il testo all'interno di un gruppo

ripetuto viene respinto solo dagli oggetti che hanno questa funzione all'interno del gruppo. Singoli oggetti repellenti all'interno di un gruppo ripetuto respinge solo il testo che si trova all'interno del gruppo stesso. I gruppi ripetuti come unica entità respingono qualsiasi testo messo in basso nella pagina.

Spostare oggetti ancorati Viene aggiunto o cancellato un nuovo testo, l'oggetto si sposta mentre il testo scorre ma mantiene sempre la sua nuova posizione relativa al punto ancora. Puoi spostare un elemento grafico ancorato trascinandolo. Questo cambia posizione rispetto al punto di ancoraggio; il punto di ancoraggio non viene però spostato e rimane invisibile alla fine della freccia ad ancora mentre clicchi/sposti la grafica. Se desideri spostare il punto ancora, individua un altra area nel testo, clicca e trascina sul simbolo dell'ancora per creare una nuova freccia e trascinala nella nuova posizione. Se tagli e incolli il testo che contiene il segno di accento circonflesso, l'oggetto ancorato viene a sua volta tagliato e incollato.

Visualizzazione del punto ancora Il punto ancora di un oggetto ancorato è visibile solo se clicchi su di esso nello STRUMENTO SELECTOR o clicca nella area di testo circostante nello STRUMENTO TESTO . Quando clicchi su un'area di testo con lo STRUMENTO TESTO , appaiono i punti di ancoraggio all'interno di un simbolo a forma di T rovesciata; inoltre parte una freccia dal punto di ancoraggio fino al simbolo dell'ancora in alto a sinistra su ogni oggetto ancorato. Per cui il modo più semplice per visualizzare tutti i punti ancora per un testo è cliccandoci sopra con lo STRUMENTO TESTO . In ogni caso quando cominci a modificare un testo, l'accento circonflesso rosso, la freccia e il simbolo dell'ancora sparisce temporaneamente finché non smetti di scrivere. Se sei vicino al punto di ancoraggio, Web Designer fa apparire l'accento circonflesso e una freccia che punta verso il simbolo dell'ancora per indicare quando sei vicino.

www.magix.com

Utilizzo del testo

Oggetti ancorati Se desideri inserire un piccolo elemento grafico in una linea di testo, per esempio un'icona come questa, che sia in linea con il testo di modo che scorrano insieme, trascina o incolla l'immagine come oggetto ancorato che respinge e posiziona il suo punto ancora su un'area della copia. È consigliato utilizzare caratteri spazio non-breaking (non divisibile) (Ctrl+barra spaziatrice).

Gruppi Leggeri Puoi incollare i Gruppi Leggeri (sulla pagina 135) allo stesso modo, anche quando una parte del gruppo è su un altro livello. Per esempio i pulsanti web con gli effetti del mouseover o pop-up su livelli diversi possono essere ancorati in questo modo.

Rimuovere un ancora Per rimuove un'ancora da un oggetto, cliccaci sopra con il tasto destro e scegli nuovamente ANCORA AL TESTO per disattivare l'opzione. Ora quando clicchi sull'oggetto nello STRUMENTO SELECTOR o sul testo nello STRUMENTO TESTO , il simbolo dell'ancora non viene più visualizzato.

Grafica incorporata Puoi inserire un oggetto nel testo di modo che si comporti come un carattere del testo. Copia l'oggetto negli appunti (Ctrl+C), entra nello STRUMENTO TESTO (sulla pagina 395) e posiziona il curso re di testo dove desideri che venga inserito l'oggetto e poi incolla (Ctrl+V).

Puoi selezionare, copiare, incollare e cancellare l'oggetto incorporato insieme al testo posto intorno ad esso, come se fosse un carattere del testo stesso. In ogni caso, puoi sempre selezionarlo direttamente utilizzando lo STRUMENTO DI SELEZIONE . Utilizza questa tecnica di incorporamento al posto dell'ancoraggio, se puoi, perché è più efficiente in termini di elaorazione necessaria per la formattazione del testo.

209

210

Elenchi puntati e numerati Usa gli appositi comandi nello strumento TESTO per inserire rapidamente le liste numerate o puntate. Cliccando con il tasto destro del mouse accedi al menu contestuale dal quale puoi scegliere PROPRIETĂ&#x20AC; ELENCO... e modificare lo schema numeri della lista. Puoi anche utilizzare delle grafiche per avere elenchi numerati o puntati. Per maggiori informazioni, vedi il capitolo Strumento Testo (sulla pagina 183).

Lista puntata Puoi creare una lista con ogni testo selezionando il testo e poi il tasto sulla lista puntata nella infobar. Ad ogni paragrafo del testo viene dato un punto. Se premi invio per interrompere un riga quella seguente iniziera con un punto. Per terminare la lista puntata premi invio sull'ultimo punto e premi subito Invio sulla nuova riga puntata. Questo elimina le righe puntate senza contenuto e ti permette di inserire nuovo testo. Puoi applicare l'indentazione anche alla lista puntata cliccando l'apposito tasto sulla Infobar. Questo applica l'indentazione ad una riga puntata e cambia il tipo di punto per distinguerla dalle altre.

Un esempio di una lista puntata indentata

Per spostare un punto da una sotto lista alla lista puntata posiziona il cursore e premi l'apposito tasto, Ă&#x2C6; molto semplice creare ed elaborare i tasti di una lista puntata usando questi tasti.

www.magix.com

Utilizzo del testo

Lista numerata Puoi creare ed elaborare liste numerate nella stessa maniera come descritto per le liste puntate usando il tasto per le liste numerate. Puoi anche decidere lo schema numerico da usare per ogni lista usando il dialogo delle proprietá della lista. Posiziona il cursore del testo in uno dei punti della lista numerata, premi il tasto destro del mouse se scegli la voce LISTA PROPRIETÀ... dal menu contestuale.

Nel dialogo puoi scegliere da una larga varietà di schemi numerici ed anche inserire il valore che dovrebbe essere usato per la prima volta ch si entra nella lista. Il numero viene quindi aumentato per il secondo e i seguenti nella lista.

Stili di testo STILI DI TESTO sono un modo efficiente per modificare i caratteri del documento con pochissimi click.Uno STILE TESTO è una serie di attributi con nome come font, dimensioni, colore, spaziatura e altri attributi di testo. Per esempio, l'intestazione principale nella parte superiore di questo documento potrebbe avere uno stile chiamato "Intestazione 1", il sottotitolo più piccolo, come per questa sezione, e tutte le intestazioni di sezione, uno stile chiamato "Intestazione 2".

Aggiornando la definizione di "Intestazione 2", perché abbia un font diverso, ogni intestazione simile all'interno del documento verrà aggiornata allo stesso modo. In modo simile il testo principale, a volte chiamato "corpo di testo". di un documento, è anch'esso uno stile particolare che Web Designer chiama "Testo normale". Aggiornando quello stile per avere Times New Roman di grandezza 12 punti, tutti i "Testi normali" all'interno del documento possono essere cambiati in una sola volta senza dover selezionare e applicare lo stesso font volta per volta. Gli STILI DI TESTO sono pertanto come la funzione "Colori con nome" supportata da Web Designer dove è possibile aggiornare "Colore Tema 1" perché diventi un nuovo

211

212 colore e tutte le parti del documento che lo utilizzano verranno aggiornate automaticamente.

Barra informazioni Stili di testo Nella BARRA INFORMAZIONI DELLO STRUMENTO TESTO è presente un menu a tendina che ti permette di creare stili, applicarli a qualsiasi testo e aggiornare la definizione di stile.

Per impostazione predefinita c'è una serie di stili già impostati che includono "Testo normale" e tre stili di intestazione che vanno da Intestazione 1 a 3.

Stile paragrafo e stile carattere Stili di testo disponibili in due varietà. Stili paragrafo e Stili carattere. Uno Stile paragrafo è indicato dal simbolo ¶ sul menu degli stili. Il simbolo A denota uno Stile carattere. Gli stili paragrafo vengono applicati a tutti i paragrafi e sono utilizzati generalmente anche per le intestazioni. Non è possibile applicare uno Stile paragrafo ad una sezione più piccola di un paragrafo. Ad esempio, non può essere applicato ad una singola parola all'interno di un paragrafo. Se fai una prova, vedrai che tutto il paragrafo acquisisce quello stile. Posiziona il cursore di testo sulla riga e seleziona uno Stile paragrafo dal menu per applicarlo a tutto il paragrafo. Gli stili carattere, invece, possono essere applicati a qualsiasi parte di testo selezionata, compresi i singoli caratteri. Per esempio, se desideri evidenziare delle parole del testo con un colore diverso, uno Stile carattere è la scelta ideale. Il vantaggio è che si può, quindi, modificare il colore (o font, ecc) di tutte queste parole evidenziate con un unico aggiornamento di stile.

www.magix.com

Utilizzo del testo Crea uno Stile carattere cliccando su CREA STILE nel menu Stile a tendina e selezionando l'opzione STILE CARATTERE dalla finestra di dialogo mentre crei un nuovo stile di testo. Per maggiori informazioni, consulta Creazione di nuovi stili (sulla pagina 214). Gli stili paragrafo possono definire tutti gli attributi di testo eccetto le proprietà di elenchi puntati e numerati. Gli stili carattere possono definire solo gli attributi di testo che possono essere applicati ai singoli caratteri quali colore del testo, dimensioni e spessore dei font.

Aggiornamento degli stili di testo Per aggiornare uno Stile testo esistente: seleziona una porzione di testo che sia già nello stile che desideri aggiornare. Applica le modifiche necessarie, come un font alternativo o una grandezza diversa. 3. Seleziona AGGIORNA NOME STILE DA ADATTARE dall'apposito menu a tendina posto sulla barra informazioni del testo. 1. 2.

Per esempio, per modificare tutto il TESTO NORMALE perché assuma un font diverso, seleziona alcune parole nello stile del TESTO NORMALE, cambia il font (ed ogni altro attributo) e poi seleziona AGGIORNA 'NORMALE' DA ADATTARE dal menu Stili posto sulla barra informazioni dello strumento testo. Quando lavori su un documento web con varianti RWD è possibile aggiornare uno stile di testo per una singola variante. Questa opzione è utile quando è necessario che il testo di una variazione per supporto portatile sia più grande o con un font diverso. Per aggiornare lo stile di una singola variante, modifica il testo come indicato sopra e seleziona AGGIORNA 'NOME STILE' DI QUESTA VARIANTE dal menu a tendina Stile posto sulla barra informazioni del testo. Questa è una opzione aggiuntiva reperibile nel menu STILI utile quando lavori su un documento con varianti multiple. Per maggiori informazioni sulle varianti vedi Responsive Web Design (sulla pagina 262).

Ridefinizione degli stili di testo Talvolta è possibile che tu voglia far sembrare uno stile testo come un testo che non ha ancora applicato quel genere di stile. Ad esempio, un testo importato da qualche altro documento. Non puoi applicare lo stile esistente a quel testo perché altrimenti perderebbe il suo aspetto. Usa, allora l'opzione AGGIORNA UN ALTRO STILE DA ADATTARE... nel menu stile. 1. Posizione il cursore del testo all'interno del testo (o seleziona parte del testo). 2. Seleziona AGGIORNA ALTRO STILE DA ADATTARE... dall'apposito menu a tendina

posto sulla barra informazioni del testo.

213

214 3. Scegli lo stile che vuoi aggiornare dalla finestra di dialogo AGGIORNA STILE DA AGGIORNARE...

4. Spunta le caselle giuste per decidere se vuoi adattare lo stile testo solo al nuovo

testo e/o a tutti i testi simili nel documento. Deseleziona APPLICA A TUTTI I TESTI se vuoi che lo stile sia applicato al paragrafo su cui è posato il cursore del testo. 5. Clicca su APPLICA. Il testo è ora ridefinito in base allo stile testo selezionato. SIMILI IN QUESTO DOCUMENTO

L'opzione APPLICA A TUTTI I TESTI SIMILI IN QUESTO DOCUMENTO è utile per applicare stili testo a documenti esistenti che non usano già questi stili testo, come ad esempio PDF importati. Affinché si applichi uno stile a tutti i tipi di testo simili all'interno del documento, il testo deve avere lo stesso font, con la stessa dimensione per almeno il 50% di un paragrafo, oltre ad avere lo stesso allineamento e impostazioni di rientro e tabulazione (con una piccola tolleranza).

Stili basati su altri stili In Web Designer, è possibile basare uno stile su di un altro. Per esempio, se desideri un altra variante dello stile dell'Intestazione 2 che sia identico in ogni aspetto ad eccezione del colore, quando crei il nuovo stile fai in modo che si basi sull'"Intestazione 2" della finestra di dialogo CREA STILE . Questo significa che se aggiorni "Intestazione 2" modificando font o dimensioni, il nuovo stile acquisisce anche quel font o quella misura. Nuovi stili di carattere si basano generalmente sullo stile paragrafo di base ma con le modifiche che vuoi apportare. Questo significa che se disponi di uno Stile carattere che imposta solo il colore del testo e niente altro, applicato su una singola parola, quando alteri lo stile paragrafo, questa si modifica in base allo stile senza cambiare il colore.

Creazione di nuovi stili Per creare uno stile completamente nuovo, modifica una porzione di testo perché appaia come desideri e poi seleziona il menu CREA STILE dall'elenco a tendina degli stili nella BARRA INFORMAZIONI DELLO STRUMENTO TESTO . Se desideri creare nuovo Stile paragrafo si consiglia di selezionare e applicare le modifiche su un intero paragrafo prima di scegliere l'opzione di menu CREA STILE .

www.magix.com

Utilizzo del testo

Questa finestra di dialogo mostra un nuovo stile (NuovoStile2) creato che consiste in uno STILE PARAGRAFO basato su uno stile di INTESTAZIONE 2 esistente. L'opzione PARAGRAFO SUCCESSIVO determina quale stile verrà utilizzato per il paragrafo seguente durante la scrittura. La parte inferiore della finestra di dialogo mostra la definizione completa di questo stile. In questo caso puoi vedere che si basa sull'Intestazione 2 con solo una modifica di colore. Per creare uno stile che non sia basato su di un altro, cioè che non "erediti" attributi da un altro stile, seleziona (Nessuno stile) dall'opzione Basato su: come mostrato sotto.

Questo dialogo mostra che sto creando un NuovoStile2 cioè uno stile paragrafo basato su nessun altro stile. La sezione inferiore elenca tutti gli attributi che costituiscono questo stile. In questo caso si può notare che ho utilizzato il font Platino, 12px con margine rientrato. Anche i restanti attributi elencati qui sono stati presi dal testo selezionato per cui questo stile consiste di una completa definizione che elenca tutti i possibili attributi.

215

216 In questo caso quando si inserisce un testo con questo Stile, il "Paragrafo successivo" (cioè quando viene premuto Indietro) sarà nuovamente nello stesso stile. Cacellare Stili: gli stili che non sono utilizzati ovunque nel documento, vengono cancellati automaticamente quando salvi e carichi nuovamente un documento. Tuttavia, gli stili predefiniti (Testo normale e Intestazione da 1 a 3) non vengono mai cancellati.

Eliminare stili L'elenco STILI dell'omonimo menu, include la voce NESSUNO STILE . Selezionando questa voce lo stile (paragrafo e/o stile del carattere) viene rimosso dalla selezione e riporta il testo selezionato alla formattazione predefinita.

Proprietà di stile Se desideri modificare la definizione di uno stile come, per esempio, lo stile su cui si basa, o semplicemente prendere in visione la sua definizione, utilizza l'opzione PROPRIETÀ... del menu stili. È necessario selezionare una porzione di testo al quale è stato applicato quello stile prima di eseguire questa operazione per indicare lo stile che desideri modificare. Si apre la finestra di dialogo delle PROPRIETÀ DI STILE che lo stesso aspetto dellla finestra di dialogo CREA STILE mostrata sopra. La descrizione dello stile posta nella parte inferiore della finestra di dialogo descrive come lo stile si differenzi da quello su cui è basato. Per cui, se desideri visualizzare tutti gli attributi di stile, seleziona temporaneamente la voce NESSUNO STILE dall'elenco BASATO SU , per avere a disposizione una descrizione completa. Non dimenticare di reimpostare lo stile BASATO SU oppure clicca Cancella in questa finestra di dialogo se non desideri cambiare stile!

www.magix.com

Utilizzo del testo

Applicazione degli stili di testo Modificare delle dimensioni dei font Ci sono diversi modi di modificare le dimensioni dei font: • • • •

•

Indica un valore nuovo nella casella di testo per le dimensioni posta sulla barra informazioni e premi . Oppure seleziona dall'elenco a tendina DIMENSIONI FONT posto sulla barra informazioni. Oppure utilizza il cursore pop-up per le dimensioni dei font (sulla pagina 187). Oppure puoi aumentare/diminuire le dimensioni con le combinazioni di tasti "Ctrl + Shift + >" e "Ctrl + Shift + <". Questa funzione è applicabile soltanto se tutte le parti di testo selezionate hanno i font delle stesse dimensioni. Utilizza lo strumento SELETTORE per ridimensionare l'oggetto testo.

Grassetto & Corsivo Clicca sul pulsante GRASSETTO o CORSIVO posto sulla barra informazioni ("Ctrl + B" o "Ctrl + I") Qui viene applicata la variante grassetto o corsivo del carattere attuale. Attenzione: MAGIX Web Designer non ti consente di applicare il grassetto o il corsivo al testo se il carattere corsivo/grassetto necessario non è installato. Tuttavia puoi facilmente riprodurre lo stesso effetto. Per rendere un carattere in grassetto, basta attribuirgli una piccola larghezza ed applicare un colore della linea. Per inclinare un carattere, utilizza l'effetto inclinazione dello strumento di selezione. Per ulteriori informazioni leggi la sezione "Menu caratteri"

Sottolineatura del testo Per applicare una sottolineatura al testo selezionato, clicca sul pulsante sottolineato posto sulla barra informazioni. Il colore e le dimensioni della sottolineatura derivano automaticamente dal colore e dalle dimensioni del testo.

217

218

Giustificazione o allineamento del testo La giustificazione viene sempre applicata all'intera linea. Le selezioni non vengono quindi considerate. Quando usi il testo semplice, la posizione iniziale del click sulla pagina viene presa come orogine per la giusitiifcazione del testo.

Giustificazione a SINISTRA: allinea il margine sinistro del testo alla posizione iniziale del click. Giustificazione al CENTRO: centra il testo intorno alla posizione del click. Giustificazione a DESTRA: allinea il margine destro del testo alla posizione iniziale del click. Giustificazione COMPLETA: questa opzione si applica quando il testo si trova lungo una curva o in una colonna e quando c'è almeno una linea di testo completa da giustificare.

Indentanzione Indentazione paragrafo in alto Indentazione paragrafo in basso

Pedice & apice Clicca sull'apposito pulsante sulla BARRA INFORMAZIONI. Testo normale pedice apice

Interlinea L'interlinea consente di modificare lo spazio tra due righe (in questo modo si agirà sull'interlinea verticale) L'interlinea è indicato in valori percentuali (120%) o punti (12pt). Poi digitare il valore dell'interlinea direttamente della casella di test oppure clicca le frecce per modificare i valori. I valori percentuali hanno il vantaggio di cambiare scala in accordo con le modifiche delle dimensioni dei font. Se un valore percentuale è applicato ad una linea di testo con font di dimensioni diverse, viene utilizzato il carattere più grande. Per esempio, se una linea comprende 90% e 100%, l'interlinea calcolato su 100%.

www.magix.com

Utilizzo del testo

Distanza tra paragrafi Gli ultimi due campi alla fine della barra informazioni dello Strumento Selettore ti permette di fissare la spaziatura sopra e/o sotto i paragrafi. Questa funzione è particolarmente utile se desideri avere tra i paragrafi una distanza di mezza riga. Come con Microsoft Word, quando utilizzi la spaziatura sia sopra che sotto i paragrafi, la distanza tra di essi è data da qualsiasi sia il valore più grande (non è cumulativa). La spaziatura sopra i paragrafi sposterà il primo paragrafo verso il basso in una cornice di testo.

Link di testo Puoi applicare un link in ogni parte dell'oggetto di testo di modo che quando il documento viene esportato nel formato HTML il testo appare come un link di un browser web. Utilizza lo STRUMENTO DI TESTO per selezionare le parole o i caratteri che desideri applicare al link e clicca sul relativo pulsante link sulla barra strumenti del WEB . Si aprirà a questo punto la finestra di dialogo PROPRIETÀ DEL WEB con la scheda LINK selezionata. In questa scheda puoi scegliere se inserire il collegamento ad un URL, ad un'altra pagina del tuo sito web o addirittura ad un layer pop-up. Come impostazione standard, quando applichi un link ad un testo, il testo appare sottolineato e con il colore del link di testo definito per il documento corrente. Puoi modificare il colore del link e decidere se debba apparire sottolineato oppure no, nella scheda SITO WEB della finestra PROPRIETÀ DEL WEB (clicca col tasto destro e scegli PROPRIETÀ DEL WEB o menu FUNZIONI >PROPRIETÀ DEL WEB ) Inoltre, puoi decidere quale colore appare quando l'utente passa col puntatore del mouse sopra il link ("Mouse Over Color”); puoi anche impostare il "Visited Color" utilizzato per mostre i link che l'utente ha già visitato. Quando imposti i tre colori globali di un link testuale, puoi selezionare sia i colori tematici elencati nel tuo sito web utilizzando gli elenchi a tendina, oppure puoi cliccare il pulsante MODIFICA per far apparire il COLOR EDITOR in modo da poter scegliere i colori che desideri. Hai inoltre la possibilità di ignorare i colori globali dei link di testo per singoli collegamenti, se necessario. Sul pulsante del link del dialogo delle Proprietà del Web, annulla la selezione dell'opzione "utilizza i colori comuni dei link per siti web". In questo modo il link selezionato viene mostrato con il colore di testo che hai impostato nel documento.

219

220

Testo all'interno di gruppi per siti web Quando un documento viene esportato come sito web, tutti i gruppi vengono esposrtati come immagini. Per cui qualsiasi testo all'interno di gruppi non può essere selezionato e copiato come testo da un visitatore del tuo sito. Questo è consigliabile per pulsanti grafici, titoli, loghi ect in quanto il testo diventa parte della grafica. Ma possono esserci delle porzioni di testo più consistenti all'interno dei gruppi che nella pagina web esportata desideri rimangano come testi. Per ottenere questo risultato, devi semplicemente applicare al tuo oggetto di testo il nome “HTMLText”. Il modo più semplice è il seguente: 1. 2. 3. 4.

Vai allo STRUMENTO DI TESTO e clicca sul tuo testo per inserire il cursore di testo. Premi esc in modo da selezionare l'intero oggetto di testo. Apri la finestra di dialogo Nome ("STRUMENTI->NOMI..." ). Seleziona il nome “HTMLTEXT” dall'elenco a tendina "APPLICA NOME " se lo ha già utilizzato nel documento corrente o scrivi sul nome “HTMLText”. Dopodiché clicca su "AGGIUNGI" per aggiungere il nome.

Ora quando esporti il sito web, il tuo testo resterà testo e il resto del gruppo verrà convertito in immagine. Tutti i pannelli di testo forniti nella GALLERIA DESIGN hanno già applicato questo nome agli oggetti di testo al loro interno per cui il testo sui pannelli verrà esportato come testo. I browser non rendono testi rotati per cui non ti è possibile utilizzare questo nome per esportare i testi rotati come testi. In questo caso il nome viene ignorato.

Copia degli stili di testo È facile copiare lo stile di qualsiasi testo e applicarlo a qualsiasi altra area di testo usando lo strumento INCOLLA ATTRIBUTI : • • • •

seleziona l'area di origine dalla quale vuoi copiare lo stile. L'area può anche essere ridotta ad una singola parola (basta fare un doppio click). Seleziona Elabora > Copia (oppure Ctrl+C). Seleziona l'area di testo in cui vuoi applicare lo stile. Seleziona Elabora > Incolla Attributi (Ctrl++A).

Se hai solamente il cursore di testo posizionato nel testo quando INCOLLI ATTRIBUTI , questi vengono inseriti in questo paragrafo (per esempio tabulatori, margini). Se hai selezionato un'area di testo, la funzione INCOLLA ATTRIBUTI inserisce tutti gli attributi visuali del testo fonte.

www.magix.com

Utilizzo del testo

Applicazione di attributi alle storie di testo complete Se il cursore si trova in un oggetto semplice o in una colonna di testo, premendo Esc selezionerai l'intero oggetto di testo. In seguito puoi applicare un attributo, per esempio un colore, e l'intero oggetto di testo viene modificato. Questo metodo è spesso più rapido che selezionare tutto (Ctrl+A). Con le aree di testo questo metodo funziona solamente se tutte le aree di testo della storia sono selezionate. Puoi fare questo nello strumento di SELEZIONE premendo ñ e cliccando sulle varie aree di testo per selezionarle. Ma questo metodo è possibile solamente se le aree di testo sono su una singola pagina. Se la tua storia di testo scorre su varie pagine e desideri modificare tutto il testo, è necessario selezionare tutto (Ctrl+A) e poi applicare gli attributi desiderati.

Copia/incolla testo formattato (RTF) Puoi copiare il "rich text" (come a volte è chiamato) da altre applicazioni come editor di testo e incollarlo in MAGIX Web Designer come testo, e i font, i margini e l'interlinea verranno mantenuti. Questo rende notevolmente più facile mantenere lo stile e l'aspetto del tuo testo. Quando incolli testo in formato RTF da altre applicazioni ti viene chiesto di scegliere tra l'inserimento del testo "non formattato", nel senso che utilizzerà il font e lo stile presenti nel punto dove incolli, oppure Rich Text Format, che significa che viene mantenuto lo stile del testo di origine. Questo funziona anche al contrario. Puoi copiare del testo in Web Designer e incollarlo in altre applicazioni compatibili con Rich Text e lo stile (font, dimensioni, colori, margini ecc.) verrà mantenuto. Questo funziona solamente se selezioni e copi un singolo oggetto di testo oppure da un singolo flusso di testo. Alcune applicazioni, come Microsoft Word, hanno una speciale opzione del menu "Incolla speciale", che offre una vasta gamma di opzioni di inserimento. Queste applicazioni ti consentono a volte di scegliere il formato dell'oggetto incollato (testo o grafica).

Controllare i font in uso Spesso è utile controllare quali font vengono utilizzati nel documento, in particolare se devi condividere dei file con altri utenti di Web Designer che potrebbero disporre di font diversi. Per visualizzare la lista completa dei font in uso nel tuo documento scegli "FILE" > "PROPRIETÀ DOCUMENTO".

221

222 Tutti i caratteri in uso nel documento ma che non sono installati nel tuo computer sono contrassegnati dalla voce NON INSTALLATO. Un altro modo per vedere quali font sono in utilizzo nel tuo documento è aprire il menu font (sulla pagina 186) della barra informazioni dello STRUMENTO TESTO. Nella sezione superiore sono visualizzati i caratteri usati nel documento.

Inserimento caratteri MAGIX Web Designer memorizza le forme dei caratteri di tutti i font utilizzati nel tuo documento. In questo modo se dai il tuo progetto qualcuno altro o trasferisci il file su un altro computer, il testo avrà esattamente lo stesso aspetto, anche se i font necessari non sono installati su quel computer. Sono fissati però solo i caratteri in uso nel documento (non sono inclusi tutti i font). Quando viene aggiunto un testo su computer a cui mancano i font, potrebbe venire a mancare la forma corretta dei caratteri mancanti.

Compatibilità del testo con i browser È spiacevole che diversi browser mostrino lo stesso testo in modo leggermente diverso, di solito con una piccola differenza di dimensione o lunghezza delle righe (per cui un testo da 10pt non è visualizzato ad una misura di 10pt ma nella grandezza in pixel più vicina (13 pixel). MAGIX Web Designer è progettato per imitare le funzioni dei browser più comuni e regola i valori di grandezza intermedi perché siano pixel interi; regola inoltre la lunghezza delle righe per rendere al meglio il testo sui browser di Windows. Puoi disattivare questa variabili nella finestra di dialogo delle OPZIONI, scheda GENERALE (clicca con il tasto destro del mouse e scegli OPZIONI DI PAGINA oppure seleziona OPZIONI dal menu STRUMENTI ) deselezionando l'opzione MOSTRA LUNGHEZZE DI TESTO COMPATIBILI CON WINDOWS . Nota:utilizzando MAGIX Web Designer o disattivi l'opzione di compatibilità e inserisci un valore di grandezza intermedio, come 13.6 pixel o 10pt, il testo verrà reso esattamente con questa dimensione. Ricorda, però, che la maggior parte dei browser web mostreranno questo testo con dimensioni leggermente più grandi o più piccole rispetto a MAGIX Web Designer. Un'altra conseguenza di questo funzionamento non corretto è che per quanto riguarda le dimensioni piccole dei font c'è un aumento considerevole da una dimensione all'altra. Per cui se desideri delle dimensioni di font, diciamo, tra 9 e 10 pix, non sarà possibile. La maggior parte dei browser mostrano una grandezza intermedia (sia che utilizzi Punti o un'altra unità di misura). Di conseguenza, mentre modifichi le dimensioni degli oggetti testo vedrai come le dimensioni di MAGIX Web Designer saltino da una grandezza ad un altra.

www.magix.com

Lo strumento Riempimento

Lo strumento Riempimento Creare un riempimento di colore graduato Il processo di creazione di un riempimento diverso Ă¨ quasi identico per tutti i tipi di riempimento: 1. 2. 3. 4.

Seleziona l'oggetto o gli oggetti ai quali desideri applicare il riempimento. Sleziona lo strumento RIEMPIMENTO ("G"). Seleziona il tipo di riempimento dal menu a comparsa. Clicca e trascina lungo l'oggetto per creare il riempimento. Oppure trascina una delle maniglie di riempimento per regolare la grandezza e la posizione del riempimento.

Mentre trascini, MAGIX Web Designer fornisce un'anteprima interattiva e in tempo reale del riempimento. Durante il trascinamento viene creata una freccia che indica la direzione del riempimento. Le maniglie possono essere selezionate e trascinate per regolare posizione e angolo del riempimento.

Colorare i riempimenti Seleziona una delle maniglie di riempimento e clicca su un colore della BARRA COLORI oppure richiama il COLOR EDITOR e scegli un nuovo colore. Puoi premere il tasto "Scheda" della tastiera per passare da una maniglia all'altra.

Tipi di riempimento Web Designer dispone di questi tipi di riempimento colore: RIEMPIMENTI UNIFORMI

- la forma ha un colore o tono uniforme

lungo la superficie. RIEMPIMENTI LINEARI

- il colore cambia gradualmente da un

colore ad un altro. RIEMPIMENTI CIRCOLARI - il cambiamento di colore si diffonde da un solo punto con una struttura circolare.

223

224 - simili a quelli circolari, ma il cambiamento di colore si diffonde seguendo una struttura ellittica.

RIEMPIMENTI ELLITTICI

Riempimenti bitmap - l'oggetto è riempito di una o due copie affiancate di un bitmap o foto. Tutte le foto che vedi su MAGIX Web Designer sono forme riempite con bitmap (di regola dei rettangoli, naturalmente). Può essere utilizzata qualsiasi foto o bitmap nelle gallerie BITMAP o RIEMPIMENTO.

NUVOLE FRATTALI - produce un riempimento non uniforme molto utili per le nuovole o la foschia.

- un riempimento casuale non uniforme che presenta più contrasto rispetto una nuvola frattale.

PLASMA FRATTALE

Con lo strumento RIEMPIMENTO puoi applicare questi tipi di riempimenti agli oggetti selezionati o modificarli e regolarli. Seleziona dentro automaticamente Nello strumento di Riempimento, la funzione "Seleziona dentro (sulla pagina 112)" automaticamente si ottiene cliccando su un oggetto, cioè viene selezionata una parte di un gruppo, invece di selezionare il gruppo intero. Nello strumento di Riempimento se clicchi su un oggetto all'interno di un gruppo, viene selezionato al posto dell'intero gruppo. Questa operazione viene chiamata "seleziona dentro". Ti permette di lavorare con più facilità su foto e riempimenti all'interno di gruppi. Se desideri cambiare l'attributo di riempimento di un gruppo (anche se improbabile), devi selezionare il gruppo utilizzando per prima cosa lo strumento Selector.

InfoBar dello strumento di riempimento

Tipo di riempimento Segmentazione del riempimento Effetto riempimento Nome bitmap Maniglia di riempimento/risoluzione Colore delle maniglie/Venatura

www.magix.com

Lo strumento Riempimento Il comando TIPO DI RIEMPIMENTO seleziona il tipo di riempimento. Selezionando da questo menu: • •

con un oggetto selezionato, applica il riempimento all'oggetto; se non si è selezionato nessun oggetto, fissa il tipo di riempimento corrente stadard, che viene poi utilizzato per gli oggetti appena disegnati.

SEGMENTAZIONE DEL RIEMPIMENTO è utilizzato quando si applicano bitmap e riempitori frattali. Le opzioni sono descritte in seguito nei riempimenti bitmap. La segmentazione del riempimento modifica la ripetizione dell'effetto di riempimento. Le opzioni sono:

• • •

Semplice - il riempimento è utilizzato solo una volta indipendentemente dalla grandezza dell'oggetto. L'area intorno al singolo tassello è trasparente. Ripetizione/mosaico a ripetizione - ripete l'effetto di modo che riempia l'intero oggetto. Mosaico a ripetizione invertito - disponibile solamente su riempimenti frattali e bitmap. È simile al mosaico a ripetizione ma ogni tessera è invertita. Aiuta a nascondere le linee di giunzione lì dove le tessere combaciano

Riempimento ellittico all'interno di una forma ellittica.

è utilizzato per tutti i tipi di riempimento. Regola come i colori si trasformano dal colore iniziale a quello finale.

EFFETTO RIEMPIMENTO

• •

sfuma tra i due colori in maniera lineare sfuma lungo il margine più corto della della ruota di colori dello spazio HSV. Per esempio, una sfumatura dal giallo al ciano passa per giallo-verde-ciano.

DISSOLVENZA ARCOBALENO

Questa opzione non ha effetto se i due colori sono nero, bianco o grigio. •

ALT ARCOBALENO : simile alla funzione arcobaleno con la differenza che la sfumatura ha luogo lungo il margine più lungo della ruota di colori. Per esempio, una sfumatura da giallo a ciano passa per giallo-rosso-magenta-blu-ciano.

Il NOME DELLA BITMAP mostra un menù a tendina dotato di mini foto delle bitmap nella e permette di selezionare con facilità la bitmap/ foto richiesta per un riempitore bitmap.

GALLERIA BITMAP

225

226 indica se la maniglia di inizio o fine è selezionata. Questo spazio è bianco per riempimenti uniformi.

MANIGLIA DI RIEMPIMENTO

La funzione RISOLUZIONE (solo bitmap e riempimenti frattali) mostra la risoluzione della bitmap (purché tu non abbia selezionato una maniglia di riempimento). Puoi digitare una nuova risoluzione in modo da cambiare la grandezza della bitmap. Le basse risoluzioni mostrano i singoli pixel della bitmap. Avrai raramente bisogno di una risoluzione maggiore di 150 DPI anche per typeset output. È sufficiente una risoluzione schermo di 96 DPI. (eccetto riempimenti bitmap) indica il colore applicato alla maniglia di riempimento selezionata.

COLORE DELLA MANIGLIA DI RIEMPIMENTO

Riempimenti uniformi Per applicare o cambiare un riempimento uniforme: 1. Seleziona riempimento uniforme dal menu tipi di

riempimento. 2. Scelgi un colore dalla BARRA COLORI. La barra colori è descritta in Utilizzo colori (sulla pagina 169).

Riempimenti lineari Per applicare un riempimento lineare:

1. Seleziona il riempimento lineare dal menu dei tipi di riempimento. (Non è

necessario se l'oggetto ha attualmente un riempimento piatto.) 2. Posiziona il cursore nel punto in cui desideri che inizi il riempimento. (Può essere

anche al di fuori dell'oggetto.) 3. Trascina il cursore del mouse sul punto dove vuoi che finisca il riempimento.

(Anche questo può essere anche al di fuori dell'oggetto.) La freccia tracciata sull'oggetto selezionato è chiamata freccia di riempimento. Indica la direzione e l'estensione del riempimento. Puoi selezionare entrambe le estremità della freccia cliccandoci sopra.

www.magix.com

Lo strumento Riempimento

Spostamento della maniglia di inizio o fine del riempimento Per cambiare la direzione e l'estensione del riempimento: 1. sposta il cursore sopra la maniglia che vuoi muovere. Quando è sopra

la maniglia, la forma del cursore cambia. 2. Trascina la maniglia.

Cambiare i colori di un riempimento. Per cambiare il colore in un riempimento: • •

•

Trascina il colore dalla BARRA COLORI in una maniglia di riempimento (non è necessario selezionare prima la maniglia) Oppure trascini il colore nell'oggetto. Ogni riempimento ha una linea centrale immaginaria a metà, lungo la freccia di riempimento. Rilasciando il colore sul lato della maniglia di inizio, modi il colore della maniglia di iniziono e il lato della maniglia di fine modifica la maniglia di fine. Oppure se una delle maniglie di fine è selezionata (è evidenziata) clicca su un colore. Puoi premere "Tab" per selezionare l'atra maniglia di riempimento e clicca sul colore necessario per l'altra estremità. La barra colori è descritta in Utilizzo colori (sulla pagina 169).

Ogni metodo cambia il colore di una sola maniglia; non cambiano altre maniglie di riempimento selezionate. Per fare questo: 1. Seleziona la maniglia desiderata (o le maniglie: funziona anche con oggetti

multipli) 2. Scegli il necessario dalla Barra colori 3. In questo modo vengono modificate tutte le maniglie di riempimento selezionate.

Riempimenti circolari Per i riempimenti circolari, le operazioni di applicazione del riempimento, spostamento delle maniglie e cambiamento dei colori sono le stesse che per i riempimenti lineari. La maniglia di inizio è il centro del riempimento. I riempimenti circolari sono utili per creare effetti di luce. Cambiando il rapporto altezza/larghezza dell'oggetto, un riempimento circolare viene automaticamente trasformato in un riempimento ellittico (vedi sotto). Un metodo veloce per applicare un riempimento circolare è: •

 + trascina per creare un riempimento circolare.

227

228

Riempimenti ellittici Applicare un riempimento ellittico è simile ad applicare un riempimento lineare. Mentre trascini il cursore del mouse crei un cerchio con due maniglie di fine. In seguito puoi trascinare le maniglie di fine per creare un'ellisse appropriata.  + trascina mantiene l'aspect ratio del riempimento. Ctrl+trascina limita la rotazione agli attuali angoli di limitazione. Le operazioni di spostamento delle maniglie e modifica dei colori sono le stesse che per i riempimenti lineari.

Riempimenti bitmap

Tipo di riempimento Segmentazione del riempimento Non utilizzata Nome bitmap Risoluzione Non utilizzata La Galleria bitmap è descritta in La Galleria Bitmap (sulla pagina 283) nel capitolo Gestione foto; per la galleria dei riempimenti vedi sotto (sulla pagina 232). I riempimenti bitmap sono uno dei tipi di riempimento più potenti. Essi ti consentono di usare ogni foto o texture come riempimento per ogni forma e di avere il controllo diretto sulle dimensioni, l'angolo, la posizione e la segmentazione. I riempimenti bitmap possono essere colorati. Puoi utilizzare ogni tipo di bitmap come riempimento, incluse le foto JPEG e bitmap con canale alpha (semi trasparenti). Quando importi un file foto su MAGIX Web Designer (per es. un file JPG o PNG) viene mostrato come una forma con un tipo di riempimento bitmap. Quando un oggetto di questo tipo viene selezionato, la barra di stato lo mostra come "foto", ma si tratta semplicemente di una forma a cui è stata applicata la foto come riempimento bitmap Per riempire una forma con un riempimento bitmap o fotografico, opera nei seguenti modi.

www.magix.com

Lo strumento Riempimento • • •

Trascina una bitmap dalla GALLERIA BITMAP o dal tuo Windows File Explorer su una figura, tieni premuto Shift e rilascia, oppure trascina una forma di riempimento dalla GALLERIA RIEMPIMENTI sulla forma (in questo caso non è necessario tenere premuto Shift per rilasciare) Seleziona 'Bitmap' dalla parte sinistra del menu a tendina della BARRA INFORMAZIONI dello STRUMENTO DI RIEMPIMENTO e seleziona poi la bitmap richiesta dal menu a tendina dei nomi delle bitmap (mostra solo le bitmap che sono caricati attualmente o precedentemente).

Puoi riempire un oggetto con file singoli o multipli (ripetizioni dell'immagine bitmap).

Tessera singola (foto)

Ripetizione tessera

Ripetizione invertita - i file si combinano perfettamente.

Il riempimento ha tre maniglie. Utilizzale per Ridimensionare e riposizionare i riempimenti bitmap (sulla pagina 230). Un modo alternativo per regolare le dimensioni della bitmap è inserire una risoluzione nel campo della barra informazioni. Prima devi deselezionare la maniglia di riempimento cliccando su un altro punto dell'immagine lontano da una maniglia di riempimento, poi basta digitare una nuova risoluzione dpi.

Sostituire riempimenti bitmap Se una forma contiene già un bitmap o è una foto, allora basta trascinare e rilasciare un nuovo bitmap da una qualsiasi fonte come Windows Explorer, e questo sostituirà il bitmap esistente. La nuova immagine è inserita al meglio nella forma e si adatta al meglio. Questa operazione sostituisce tutte le altre ricorrenze di quella foto della pagina corrente se comprese nello stesso GRUPPO SOFT. Tieni premuto SHIFT mentre sostituisci una foto in questo modo, posizione, scala e rotazione del riempimento bitmap vengono mantenuti.

Colorazione di bitmap Puoi colorare ogni bitmap o riempimento foto semplicemente cliccando su un colore posto sulla LINEA DEI COLORI (assicurati che non vengano selezionate le maniglie di riempimento, cliccando sull'immagine). Creerai così un colore continuo (tecnicamente si tratta di un Duotone) a metà tra il nero ed il colore selezionato. In alternativa clicca con il tasto destro del mouse sulla linea dei colori e seleziona l'opzione "IMPOSTA IL

229

230 COLORE CHIARO DEL TONO CONTINUO " o "IMPOSTA IL COLORE SCURO DEL TONO CONTINUO ".

Così, ad esempio, per rendere un'immagine bianca e nera, basta solo cliccare sulla patch del colore bianco della linea dei colori. Per annullare ogni colore applicato, seleziona NESSUN COLORE per ciascuna maniglia di riempimento. Questa opzione ripristina i colori originali della bitmap. Nella casella della RISOLUZIONE posta sulla BARRA INFORMAZIONI viene visualizzata la risoluzione che può essere modificata spostando le maniglie di riempimento o digitando un valore.

Ridimensionamento e riposizionamento dei riempimenti dei bitmap Se tieni premuto Shift e clicchi e trascini una forma che è già provvista di una bitmap, viene creato un nuovo riempimento bitmap in corrispondenza di questo punto. Se tieni premuto il anche tasto "Ctrl", l'angolo viene limitato, facilitando così la creazione di un riempimento bitmap verticale. Dopo aver creato il riempimento puoi trascinarlo in qualsiasi punto dell'immagine per riposizionare il riempimento all'interno della forma.

Quando fai scorrere il mouse sopra le maniglie di riempimento esterne, il puntatore del mouse si modifica in un cursore di "rotazione". Trascinando queste maniglie, il riempimento bitmap si allungherà e ruoterà, ma il rapporto delle proporzioni verrà preservato; tieni premuto "Shift" mentre trascini per modificare indipendentemente le dimensioni orizzontali e verticali e alterare il riempimento. La barra informazioni ti mostra la risoluzione del riempimento del bitmap (puoi regolarla e con essa le dimensioni del bitmap inserendo un nuovo valore).

www.magix.com

Lo strumento Riempimento

Riempimenti frattali MAGIX Web Designer supporta due tipi di riempimenti frattali, che sono modelli creati matematicamente ma che hanno un aspetto molto naturale. Sono utilissimi per simulare cielo e nuvole o altri sfondi naturali. Ogni volta che crei un nuovo riempimento frattale viene creato un nuovo modello. Per sostituire un frattale esistente con un nuovo modello, scegli nuovamente l'opzione "Frattale" dal menu dei riempimenti. Il controllo GRANO sulla BARRA fornisce controllo sulla granulosità del motivo. I valori bassi creano un motivo dolce e fluido, mentre i valori alti creano un motivo granuloso.

INFORMAZIONI

Puoi adattare le dimensioni e la posizione del riempimento frattale nella maniera consueta, trascinando e adattando le maniglie di riempimento. Deseleziona le maniglie di riempimento (clicca sul riempimento fuori da una maniglia) per visualizzare i controlli di risoluzione e granulosità.

Riempimeno di nuvole frattali. Sulla sinistra un valore di granulosità 1, sulla destra un valore di 50.

Riempimento di plasma frattale. Sulla sinistra un valore di granulosità 5, sulla destra un valore di 50.

Nota la differenza tra granulosità e risoluzione. La granulosità controlla il flusso del motivo. La risoluzione imposta la dimensione della bitmap frattale e determina la visibilità dei singoli pixel.

231

232 Puoi cambiare i colori di inizio e fine di un riempimento frattale. Selezione le maniglie centrali o esterne e poi applica un colore usando la linea dei colori o la galleria COLORI. Per cancellare un qualsiasi colore applicato, usa la funzione Nessun colore.

Gradazioni di colore di vari livelli Molti dei tipi di riempimenti di colore con gradazione (lineare, circolare, ellittico, conico, diamante) supportano riempimenti di gradazione di vari livelli; questo significa che invece di creare semplicemente una transizione da un colore ad un altro, hai la possibilità di passare attraverso una grande quantità di colori intermedi.

Per aggiungere un nuovo grado di coloroe ad una gradazione, seleziona lo strumento di riempimento fino a visualizzare la freccia del riempimento e in seguito: • •

trascina un colore sulla freccia di riempimento dove richiesto. Oppure clicca due volte sulla freccia di riempimento per creare una nuova maniglia, poi clicca un colore o visualizza l'EDITOR COLORE .

Puoi riposizionare le maniglie di riempimento trascinandole. Se una maniglia di riempimento è selezionata, premendo il tasto Tab selezioni quella successiva. Se l'EDITOR COLORE è aperto, questo viene aggiornato per riflettere la nuova maniglia di riempimento. Per eliminare una maniglia di livello di riempimento, cliccaci sopra per selezionarla e premi il tasto Canc.

La Galleria di riempimento La GALLERIA DI RIEMPIMENTO contiene trame bitmap utilizzabili come riempimenti bitmap. Un riempimento viene copiato nel documento solo quando viene utilizzato. Per visualizzare la GALLERIA DI RIEMPIMENTO : • •

Seleziona STRUMENTI -> GALLERIE -> GALLERIA DI RIEMPIMENTO. Oppure premi " + F11".

www.magix.com

Lo strumento Riempimento

IMPORTA - importa nel documento la bitmap selezionata. Una copia della bitmap viene

visualizzata poi nella GALLERIA BITMAP . Puoi anche trascinare la bitmap su una parte bianca della pagina. Questo di solito è più facile che cliccare su IMPORTA . RIEMPIMENTO - importa ed applica la bitmap selezionata come:

• •

riempimento bitmap all'oggetto selezionato (qualora ve ne siano). Oppure, se non ci sono oggetti selezionati, inserisce la bitmap nel documento come nuovo oggetto fotografico.

Puoi anche trascinare la bitmap su un oggetto per applicare un riempimento bitmap.

233

234 Ci sono alcune differenze tra il trascinamento di una bitmap dalla GALLERIA BITMAP e dalla GALLERIA DI RIEMPIMENTO: trascinando bitmap dalla GALLERIA DI RIEMPIMENTO e rilasciandoli su forme per creare un riempimento bitmap, il riempimento diventerà un mosaico e non verrà adattato alla forma. Questo comportamento, differente dal trascinamento dalla galleria bitmap, è dovuto al fatto che normalmente le trame sono applicate dalla galleria di riempimenti e questi dovrebbero di norma essere a mosaico e non adattati nelle dimensioni. TRASPARENZA - importa ed applica la bitmap selezionata come:

• •

una bitmap trasparente all'oggetto selezionato (se ne esiste uno). Oppure imposta l'attributo di trasparenza corrente.

CARICA RIEMPIMENTO : scarica riempimenti gratuiti da Xara. SFONDO : imposta il riempimento selezionato come sfondo della pagina. ELIMINA : elimina il riempimento o la cartella selezionata. RIEMPIMENTI DISCO : aggiunge nuovi riempimenti dal tuo disco fisso o da un CD. OPZIONI : ti consente di selezionare le dimensioni delle icone di anteprima e di decidere

se visualizzare le informazioni complete sulla bitmap, inoltre serve a ricercare e ad ordinare i riempimenti. INTERROMPI DOWNLOAD : se hai una connessione troppo lenta puoi interrompere il

download dei riempimenti e riprenderlo in un secondo momento. Le funzioni di ricerca e ordine sono descritte nel capitolo Utilizzo dei documenti (sulla pagina 102). Il capitolo Utilizzo dei documenti (sulla pagina 102) contiene informazioni generali sulle gallerie.

www.magix.com

Trasparenza

Trasparenza Lo strumento TRASPARENZA ti permette di specificare quale quantità appaia dei colori e degli oggetti fondamentali attraverso un oggetto.

Forma Segmentazione Nome bitmap Maniglia/ risoluzione Quantità di trasparenza Puoi controllare il livello di trasparenza a partire da completamente opaco a completamente trasparente. Web Designer supera gli altri offrendo un´ampia gamma di gradazioni di trasparenza. Puoi applicare una trasparenza uniforme o graduata a tutti i tipi di oggetti, incluse le bitmap.

Applicazione della trasparenza piatta Viene chiamata trasparenza "piatta" perchè tutte le parti degli oggetti hanno la stessa trasparenza, a differenza della trasparenza graduata. 1. Seleziona l'oggetto o gli oggetti 2. Seleziona lo strumento di trasparenza (comando veloce F6) 3. Trascina il regolatore di trasparenza sulla barra informazioni

MAGIX Web Designer fornisce un'anteprima live. Mentre trascini il regolatore di trasparenza gli oggetti sul documento vengono modificati, in questo modo puoi vedere l'effetto immediatamente..

Applicare la trasparenza graduata La trasparenza graduata funziona in modo molto simile ai riempimenti di colore (sulla pagina 223) graduati. Trascina gli oggetti nello STRUMENTO TRASPARENZA per creare una trasparenza evanescente. Hai a disposizione una gamma di forme di trasparenza molto simile di cui la più semplice è lineare fino ad arrivare alle trasparenze circolari o ellittiche. Per creare una dissolvenza graduata:

235

236 1. Seleziona l'oggetto o gli oggetti. 2. Nello STRUMENTO TRASPARENZA trascina il mouse lungo gli oggetti per creare una

dissolvenza lineare. 3. Seleziona forme di trasparenza alternative dal menu a tendina posto sulla barra

informazioni Puoi selezionare, regolare la posizione e la forza di trasparenza attraverso le maniglie che compaiono sull'oggetto. Consulta la sezione Riempimenti (sulla pagina 223) per avere piĂš informazioni sulle maniglie di regolazione e le varie forme di riempimento (in questo caso forme di trasparenza).

Applicazione della trasparenza a vari oggetti Se raggruppi gli oggetti ed applichi la trasparenza, l'intero gruppo viene considerato come un unico oggetto e reso trasparente. Ma se gli oggetti non sono raggruppati ed applichi la trasparenza, ad ogni singolo oggetto viene applicata una trasparenza separata ed ottieni cosĂŹ un effetto completamente differente quando gli oggetti sono sovrapposti.

Trasparenza individuale (sinistra) o trasparenza di gruppo (destra)

Combinazione di trasparenze individuali e di gruppo Puoi mescolare i metodi descritti per creare complesse combinazioni di trasparenza. Per esempio puoi impostare un oggetto al 50% di trasparenza, poi raggrupparlo e applicare una trasparenza anche al gruppo. Ă&#x2C6; anche possibile applicare prima una trasparenza ad un gruppo e poi di applicare attributi ad oggetti singoli all'interno di un gruppo. Tieni premuto Ctrl, clicca sul singolo oggetto e cambiane gli attributi.

www.magix.com

Ombre

Ombre Lo Strumento ombra Lo Strumento d´OMBRA (shortcut "Ctrl + F2) ti permette di applicare, rimuovere e modificare ombre semi-trasparenti (o "soft").

Nessuna ombra Tipi di ombra Sfocatura ombra Trasparenza ombra Posizione ombra MAGIX Web Designer possiede tre tipi di ombre: • •

Tipo muro, dove l'ombra è inserita su un muro dietro l'oggetto Tipo pavimento, dove l'oggetto sembra stare su una superficie in posizione verticale.

Tipo splendore, dove l'ombra viene utilizzata per aggiungere un alone intorno all'oggetto

La trasparenza delle ombre soft aumenta verso i margini dando un effetto molto realistico. Le ombre sono indipendenti dalla risoluzione e in questo modo puoi graduarle senza una diminuzione di qualità.

237

238

Applicazione dell'ombra Applicazione di un'ombra parete Per applicare un'ombra parete: 1. seleziona l'oggetto. 2. Scegli lo strumento OMBRA. 3. Seleziona il pulsante PARETE sulla barra

informazioni dello strumento OMBRA. 4. Puoi trascinare l'ombra fuori o verso l'oggetto per creare piĂš o meno distanza tra l'oggetto e la parete immaginaria. In alternativa, per creare una parete: 1. seleziona l'oggetto. 2. Scegli lo strumento OMBRA. 3. Trascina il cursore dal centro dell'oggetto in direzione dell'ombra.

Applicazione di un'ombra terreno 1. Seleziona l'oggetto. 2. Scegli lo strumento OMBRA. 3. Seleziona il pulsante TERRENO sulla barra

informazioni dello strumento OMBRA. 4. Trascina il cursore verso o fuori dall'oggetto per cambiare le dimensioni o la direzione radiale. L'angolazione puĂ˛ essere di 70Â° dalla verticale.

Applicazione di un effetto bagliore Aggiungendo un bagliore o un alone dietro un oggetto si possono grafiche di grande effetto. Per creare un effetto bagliore:

www.magix.com

Ombre 1. seleziona l'oggetto. 2. Scegli lo strumento OMBRA. 3. Seleziona il pulsante BAGLIORE sulla barra

informazioni dello strumento OMBRA. 4. Trascina il cursore verso o fuori l'oggetto per modificare le dimensioni del bagliore.

Sfuma i bordi dell'ombra Questo modifica le dimensioni dell'ombra. Una piccola sfocatura crea l'effetto di una piccola sorgente luminosa concentrata, mentre una grande sfocatura crea l'impressione di una sorgente luminosa diffusa o distante. Si consiglia di sfumare sempre leggermente le ombre, per creare un effetto piĂš realistico. Per sfumare il bordo dell'ombra: 1. Seleziona l'oggetto. 2. Scegli lo strumento OMBRA. 3. Sulla barra informazioni dello strumento OMBRA, trascina il regolatore di

sfumatura oppure inserisci un valore nella casella di testo sulla destra.

Modifica la trasparenza dell'ombra Un'ombra semi-trasparente Ă¨ piĂš realistica di un'ombra solida. Ad ogni modo puoi cambiare il livello di trasparenza per adattarla alle tue esigenze.

Per cambiare la trasparenza: 1. Seleziona l'oggetto. 2. Scegli lo strumento OMBRA. 3. Sulla barra informazioni dello strumento OMBRA, trascina il regolatore di

trasparenza oppure inserisci un valore nella casella di testo sulla destra.

239

240

Modifica del colore dell'ombra o dell'effetto di riempimento Dopo aver applicato un'ombra ad un oggetto, puoi cambiare il colore o l'effetto riempimento dell'ombra. Puoi applicare uno qualsiasi degli effetti colore di MAGIX Web Designer, inclusi i riempimenti a più livelli. Come modificare il colore dell'ombra: Per maggiori informazioni sui colori e sulla linea dei colori consulta il capitolo Utilizzo del colore (sulla pagina 169). •

•

Il modo più semplice consiste nel trascinare un colore dalla linea di colori e rilasciarlo sull'ombra. (Assicurati di rilasciare il colore sull'ombra e non sull'oggetto.) È possibile anche un metodo alternativo, leggermente più complesso ma che ti assicura pieno controllo sul colore: 1. seleziona l'ombra utilizzando lo strumento di SELEZIONE. (Assicurati di selezionare l'ombra e non l'oggetto.) 2. Utilizza l'EDITOR COLORE per elaborare il colore.

Eliminazione di un'ombra Per eliminare un'ombra morbida: 1. seleziona l'oggetto. 2. Scegli lo strumento OMBRA. 3. Seleziona il pulsante NESSUNA OMBRA sulla

barra informazioni dello strumento OMBRA.

www.magix.com

Ombre

Applicazione di un'ombra a vari oggetti Il risultato dell'applicazione di un'ombra dipende dal fatto se gli oggetti sono raggruppati o meno: • • •

se gli oggetti sono raggruppati, le ombre che si sovrappongono vengono unite (non diventano più scure al sovrapporsi). Se gli oggetti non sono raggruppati, ogni oggetto ha un'ombra separata. Le aree delle ombre che si sovrappongono sono più scure. Se hai selezionato vari oggetti con ombra, ogni cambiamento viene applicato a tutte le ombre.

Selezione degli oggetti utilizzando lo strumento Ombra Prima di poter applicare o elaborare un'ombra su un oggetto, devi prima selezionare l'oggetto. Il metodo regolare di selezione degli oggetti consiste nell'utilizzare lo strumento di SELEZIONE , ma puoi anche usare lo strumento OMBRA , semplicemente cliccando sull'oggetto mentre ti trovi nello strumento OMBRA.

Copiare ombre su altri oggetti Dopo aver definito un'ombra, puoi copiarla su altri oggetti tramite la funzione "COPIA FORMATO/ATTRIBUTI ". Copia l'oggetto con l'ombra ("MODIFICA" > "COPIA" ), seleziona l'oggetto o gli oggetti ai quali desideri che venga incollata l'ombra e scegli "MODIFICA" > "INCOLLA FORMATO/ATTRIBUTO" .

241

242

Dialogo delle proprietà web Il dialogo delle proprietà web è una fienstra con più schede che permette di aggiungere e configurare le maggior parte delle funzioni legate al web in MAGIX Web Designer e di impostare diverse proprietà web su oggetti, pagine o su tutto il tuo sito Internet Per aprirlo clicca con il tasto destro su un oggetto e scegli PROPRIETÀ DEL WEB oppure utilizza l'opzione di menu "UTILITÀ" > "PROPRIETÀ DEL WEB... " (combinazione tasti: Ctrl + Shift + W). Si può accedere ad ogni scheda del dialogo anche dai tasti della barra a comparsa delle Proprietà web che si trova sulla barra degli strumenti website.

Link tab (sulla pagina 243) Tabella del sito web (sulla pagina 248) Tabulatore pagina (sulla pagina 250) Image Tab (sulla pagina 252) Mouse-over Tab (sulla pagina 258) Placeholder (sulla pagina 258) Pubblica (sulla pagina 256) Crea/Elabora Navbar (sulla pagina 312) Essendo un dialogo non modale, lo puoi lasciare aperto mentre selezioni diverse pagine e oggetti del tuo documento. In questo modo sarà più facile impostare rapidamente le proprietà su vari oggetti e pagine del tuo sito web. Utilizza il tasto OK per applicare le modifiche e chiudere il dialogo oppure premi il tasto APPLICA per applicare le modifiche senza chiudere il dialogo. Le sezioni che seguono trattano singolarmente le schede del dialogo.

www.magix.com

Dialogo delle proprietĂ web

Scheda Link

Le impostazioni su questa linguetta di navigazione si applicano agli oggetti o testi selezionati. Puoi utilizzare questa scheda per aggiungere un link ad un oggetto della tua pagina web (un tasto o una foto) o ad un testo di modo che quando un visitatore del tuo sito clicca sull'oggetto/testo viene rimandato ad un altra pagina. Puoi aggiungere dei link ad altre pagine del tuo sito web, ad un URL (indirizzo web) o anche far apparire una finestra popup. Per aggiungere un link soltanto ad alcune parole di un paragrafo di testo, vai allo STRUMENTO TESTO e trascina sul testo al quale desideri aggiungere un link, per selezionarlo. DopodichĂŠ imposta questo link in questo tab. La sezione principale di questa scheda di permette di scegliere cosa deve accadere quando l'oggetto o testo selezionato viene cliccato.

Link a indirizzo web Inserisci un indirizzo web da collegare a quell'indirizzo. Se mantieni selezionata la casella "CORREGGI INDIRIZZO AUTOMATICAMENTE", il tuo indirizzo verrĂ regolato se

243

244 richiesto quando clicchi su OK o Applica. Ad esempio, se inserisci "www.magix.com" verrà corretto in http://www.magix.com/. Nel campo di inserimento dell' indirizzo del link, puoi inserire un indirizzo email; in questo caso cliccando sul link verrà aperto il programma di lettura email dove alla voce A comparirà: campo inserito. Nel caso puoi anche specificare cosa deve comparire alla voce Oggetto, aggiungere indirizzi CC o BCC da copiare nell'email e puoi anche specificare il testo standard da utilizzare. Per esempio qui vengono impostati l'indirizzo email alla voce A e tutti i quattro parametri opzionali: iltuonome@ovunque.com oggetto:email da un sito web cc:unaltro@ovunque.com bcc:ancoraunaltro@ovunque.com testo:email generata automaticamente Nota tecnica: MAGIX Web Designer codifica il tuo indirizzo email per ridurre la probabilità che venga trovato da generatori di SPAM nella tua pagina web. Per questo è necessario un Javascript che venga abilitato nel browser (attualmente >95% dei browser).

Link a Seleziona questa opzione per creare un collegamento con un altra pagina nel sito web corrente o se ti trovi in un documento di presentazione per creare un link con la fase precedete o successiva della presentazione stessa. La lista a tendina ti permette di selezionare la pagina o la fase a cui dev'essere collegata. CONSIGLIO: se nel tuo documento web hai molte pagine, dare un nome ad ognuna di esse rende più semplice impostare e mantenere i link della tua pagina perché in questo modo l'elenco delle pagine mostrerà i nomi e non a dicitura "pagina2", "pagina3" ecc. Vedi la sezione Scheda pagina (sulla pagina 250) che segue per scoprire come impostare il nome della pagina o elaborare i nomi delle pagine nella galleria Page & Layer. Oltre ad una voce per ogni pagina del tuo sito, la lista a tendina contiene anche le voci speciali PAGINA SEGUENTE e PAGINA PRECEDENTE . Pagina seguente/precedente Utilizzale per aggiungere un link che porta alla pagina seguente o precedente del tuo sito. Per l'uso di questi link, l'ordine delle pagine è determinato dall'ordine in cui appaiono in MAGIX Web Designer. Il link "seguente" posto sull'ultima pagina collega alla prima mentre il link "precedente posto sulla prima collega all'ultima pagina.

www.magix.com

Dialogo delle proprietà web

Collega all'anchor Questa opzione di permette di far saltare il visitatore ad una parte specifica di una pagina del tuo sito web. Per impostare un anchor point, per prima cosa vai alla pagina e sull'oggetto sui quali desideri che il visitatore venga rinviato. Seleziona l'oggetto e assegnagli un nome cliccando con il tasto destro e scegliendo l'opzione NOMI... . Poi seleziona l'oggetto al quale desideri aggiungere il link e scegli il nome dell'anchor che hai aggiunto, dalla lista dotata dell'opzione "Link to anchor". Osserva che quando crei il link per un oggetto che si trova infondo alla pagina, il browser fa scorrere la pagina in giù in modo che il tuo anchor sia visibile. NOTA:

non puoi applicare una transizione a un link che collega ad un'ancora.

Collega a file Questa opzione è importante se vuoi aggiungere un video o qualsiasi altro tipo di file da mettere a disposizione dei visitatori del tuo sito. Per esempio un file PDF. Seleziona l'oggetto ed il tasto che vuoi collegare. Quindi attiva l'opzione collega a Link e usa il tasto SFOGLIA per selezionare il file all'interno del tuo computer. Il nome del file appare nel campo alla sinistra del tasto Sfoglia. Clicca su Ok ed il link viene applicato. Oltre ad applicare il link MAGIX Web Designer crea una copia del tuo file e lo posiziona nella cartella si supporto del design. Questa cartella si trovo vicino al file .web o .xar. Se il tuo design è chiamato "MySite.web" la cartella di supporto viene chiamata "MySite.web_files". Tutti questi file nella cartella di supporto vengono pubblicate insieme al tuo sito web in modo da far funzionare il link. Il capitolo Utilizzo dei documenti (sulla pagina 93) contiene informazioni a riguardo. Nota: poiché esiste una copia separata del tuo file che si trova nella cartella support del tuo design, è necessario aggiornare la copia ogni volta che modifichi il file. Oppure puoi seguire il processo di collegamento per cercare il file aggiornato. Anche se inserisci una copia del design ad un altro computer è necessario che la cartella di supporto venga copiata insieme al file del design se questa contiene parti importanti del tuo sito.

Pop-up layer Puoi aggiungere qualsiasi contenuto da un layer separato della tua pagina che verrà mostrato come un popup solo quando il visitatore clicca su un link. Per esempio

245

246 potresti aggiungere del testo che descrive una foto della pagina che appare solo se l'utente ci clicca sopra. Per aggiungere un layer popup, innanzi tutto devi aggiungere il layer stesso tramite la GALLERIA PAGINE & LAYER per poi aggiungere il contenuto popup. Per maggiori informazioni, consulta il capitolo GALLERIA PAGINA & LAYER . Dopodiché puoi selezionare il layer dal relativo elenco posta a fianco all'opzione "layer popup". Ora quando un utente clicca sull'oggetto, appaiono i contenuti del layer. Per far scomparire il popup, basta cliccare su un punto qualsiasi della pagina. Nota che tutto il contenuto del layer poup viene caricato non appena l'utente visita la tua pagina. Se vuoi invece avere molte photo popup usa la funzione Photo pop-up (sulla pagina 246) descritta qui sotto. Il capitolo "Per iniziare" (sulla pagina 73) include delle istruzioni dettagliate su come aggiungere dei popup layer.

Foto pop-up: Questa opzione ti permette di aggiungere un foto popup ed altre funzioni della galleria fotografica al tuo sito web in modo molto semplice e senza dover aggiungere dei layer. Importa la foto e utilizza lo STRUMENTO SELECTOR per ridurlo in scala fino ad assumere le dimensioni di una miniatura. Selezionalo e scegli questa opzione "FOTO POPUP " Clicca sul tasto IMPOSTAZIONI vicino a questa opzione per passare alla SCHEDA DELL'IMMAGINE dove puoi impostare la dimensione del pop-up, aggiungere titoli e didascalie e scegliere tra una vasta gamma di opzioni. Per maggiori dettagli vedi la sezione Tabella immagini (sulla pagina 252). Selezionando l'opzione Foto pop-up viene selezionata anche la casella corrispondente: entrambe attivano la stessa opzione.

Utilizza colori normali per link di siti web Questa opzione di permette di scegliere l'aspetto dei link di testo. È già attivo come preimpostazione, per cui il link di testo verrà mostrato con il colore che hai scelto per l'intero sito web. Puoi impostare questo colore tramite la tabella Sito web (vedi la sezione Tabella sito web). Se deselezioni questa opzione il link di testo selezionato mantiere il colore che hai assegnato ai link della pagina. Se desideri, puoi assegnare un colore diverso ad ogni link.

www.magix.com

Dialogo delle proprietà web

Apri il link in: Questa opzione non funziona se le opzione "Layer popup" o "Popup foto" sono selzionate. Ma per altri link ti permette di istruire il browser web su come caricare la pagina web. La preimpostazione prevede che sia fissata su "Non specificato" per cui il browser aprirà il link nella stessa finestra di navigazione e nello stesso frame del link. L'elenco a tendina contiene quattro opzioni che fanno in modo che il browser esegua funzioni spaciali. Puoi selezionare una di queste opzioni o digitare il nome di un frame. apre il link in una nuova finestra di navigazione apre il link in questo frame (il frame che contiene questo

• •

NUOVA FINESTRA (_BLANK)

•

PARENT FRAME (_PARENT) apre

STESSO FRAME (_SELF)

oggetto). il link in una finestra madre o frameset che

contiene questo frame. •

STESSA FINESTRA (_TOP) apre il link nella finestra di navigazione principale, sostituendo i frame già presenti.

Se desideri che il link venga caricato in un frame in particolare del browser, digita il nome del frame in questo campo.

247

248

Scheda Sito web

Le impostazioni di questa tabella si applica all'intero documento/sito web corrente, per cui non è importante quale oggetto o pagine siano selezionati. TITOLO, DESCRIZIONE & PAROLE CHIAVE : questi campi sono descritti nella sezione Tabella della pagina (sulla pagina 250). Puoi imposta qui questi campi perché vengano applicati ad ogni pagina del tuo sito, se non sono stati annullati dalle impostazioni della Tabella della pagina. Per cui per esempio una pagina che non ha un titolo impostato nella Tabella della pagina, avrà il titolo che inserisci qui.

www.magix.com

Dialogo delle proprietà web CODICE HTML (CORPO): questo tasto ha la stessa funzione di un tasto con codice HTML (corpo) della Tabella della pagina (sulla pagina 250) e ti permette di inserire e modificare grandi quantità di codici HTML nel corpo di tutte le pagine del sito.

Se il codice è specificato nella TABELLA DEL SITO WEB viene incluso anche in ogni pagina insieme a tutti i codici inseriti per ogni pagina nella Tabella della pagina. Questo ti permette di avere dei codici inclusi su ogni pagina anche mentre ne aggiungi degli altri alle pagine che lo richiedono.

Colori del link del sito web Questa sezione della Scheda del sito web ti permette di controllare l'aspetto dei link di testo sul tuo sito. SOTTOLINEA LINK DI TESTO : la sottolineatura è utilizzata solitamente per evidenziare i

link del testo che possono essere cliccati Deselezionala se desideri che i link di testo non siano sottolineati. MOUSE-OFF : qui puoi scegliere il colore che desideri venga utilizzato per tutti i link di testo. Puoi anche scegliere un Colore tema con nome dall'elenco a tendina (se sono presenti ne tuo documento) o puoi cliccare sul pulsante Modifica per aprire il Color editor in modo da scegliere un altro colore. MOUSE-OVER : i link di testo cambiano colore quando un utente sposta il puntatore del

mouse sopra di essi. VISITATO : i link di testo che indicano una pagina che è già stata visitata avranno questo

colore al posto del colore Mouse-off.

Presentazioni sul web Clicca la casella di controllo SITO WEB DI PRESENTAZIONE per convertite un sito esistente in una presentazione. Nota: se hai creato il documento di presentazione scegliendo l'opzione PRESENTAZIONE 955 PIX dal menu NUOVO , la casella di controllo del SITO WEB DI PRESENTAZIONE viene selezionata automaticamente. RITAGLIA NEI BORDI DELLA PAGINA (attiva per impostazione predefinita): se nel tuo sito sono presenti degli oggetti che superano i bordi della pagina, clicca questa casella di controllo per ritagliarli di modo che sia visibile solo la parte compresa nella pagina. Deseleziona questa casella di controllo se desideri che l'oggetto scorra oltre i bordi della pagina, in modo che sia visibile anche la parte che va ad occupare la pasteboard.

249

250 Nota: se hai dei livelli o fasi di presentazioni a cui sono state applicate delle transizioni che scorrono dai lati, dalla parte superiore o inferiore della pagina, disattivando questa casella di controllo fa in modo che la transizione inizi dal bordo della finestra del browser e non dal bordo della pagina.

Scheda Pagina

Le opzioni su questa scheda si applicano alla pagina corrente ma non agli oggetti selezionati. La pagina si riconosce dalle linee nere angolari posto appena fuori dagli angoli della pagina. Tutti i campi su questa scheda sono opzionali; non Ă¨ necessario compilare questi campi per ogni pagina del tuo sito. Se desideri che ogni pagina abbia lo stesso titolo, descrizione e parole chiave, li puoi impostare una sola volta sulla scheda sito web senza dover intervenire su ogni pagina presente. NOME DEL FILE DELLA PAGINA : fai uso di questo campo per inserire il nome che desideri sia utilizzato per quata pagina quando viene esportata. Se vuoi esportare la pagina come "home.htm" scrivi sul campo "home".

www.magix.com

Dialogo delle proprietà web Normalmente si rende la prima pagina di un sito web “index.htm” o “home.htm”, perché se un utente specifica un URL che consiste di un solo dominio senza un il nome della pagina (per es. “www.xara.com”), viene collegato automaticamente dal server alla pagina index.htm se è presente. Nota che i caratteri inseriti in questo campo vengono trasformati automaticamente in caratteri minuscoli e accentati mentre alcuni caratteri alfanumerici non sono permessi. Questo serve a ridurre le possibilità di incompatibilità con server web diversi nel momento in cui pubblichi il tuo sito. TITOLO DELLA PAGINA: hai la possibilità di scegliere un titolo da assegnare alla tua pagina. Questo titolo è utilizzato dai browser per mostrare il titolo di una pagina nel frame o nella scheda della finestra di navigazione. Per esempio quando si scrivere la home page “Graphics Software by Xara” che viene mostrato dal browser.

Avanzate: il titolo è inserito nell'intestazione della pagina utilizzando l'elemento ‘<titolo>’ HTLM. DESCRIZIONE DELLA PAGINA : questo testo di descrizione della pagina può essere mostrato dai motori di ricerca nei loro risultati quando gli utenti trovano la tua pagina attraverso una ricerca su internet. La descrizione della pagina puo venire mostrata anche dai browser o altri servizi di rete.

Avanzate: la descrizione è inserita nell'intestazione della pagina come metadato (<meta nome="descrizione" .....) qui puoi inserire delle parole chiave che desideri siano raccolte dai motori d ricerca per aiutare gli utenti a trovare il tuo sito web. Inserisci le parole che i potenziali visitatori potrebbero inserire se cercano delle pagine o dei siti simili al tuo.

PAROLE CHIAVE DELLA PAGINA:

Per coloro che hanno dimestichezza con HTML, le parole chiave sono inserite nel intestazione della pagina come metadati. Avanzate: le parole chiave sono inserite nell'intestazione della pagina come metadati. (‘<meta nome="parole chiave" …..). CODICE HTML (CORPO): clicca per aprire il dialogo del codice HTML (corpo) dove puoi incollare o digitare grandi quantità di codice direttamente nel corpo della pagina web. Il codice viene inserito non modificato alla fine della pagina proprio prima del tag </body) di chiusura.

Questi dialoghi devono essere utilizzati con prudenza perché se inserisci un codice o script non valido potrebbero sorgere problemi seri per l'intera pagina web.

251

252 Se devi inserire sempre lo stesso codice su ogni pagina, puoi utilizzare il tasto del codice HTML (corpo) posto sulla Scheda sito web (sulla pagina 248) di questo dialogo, non dovendolo inserire così per ogni singola pagina utilizzando la Tabella della Pagina

Scheda Immagine

Foto pop-up Questa sezione ti permette di aggiungere molto semplicemente alla tua pagina foto pop-up ed altre applicazioni dalla galleria delle foto. Importa la foto e utilizza lo SELECTOR per ridurlo in scala fino ad assumere le dimensioni di una miniatura. Quindi seleziona la casella Pop-up foto. Indica le dimensioni del pop-up inserendo il valore nell'apposito campo. Effettua un'anteprima per verificare il funzionamento del pop-up. Quando attivi la funzione di pop-up foto usando la checkbox la stessa funzione viene attivata nella finestra Link. Questo perchè un click sulla foto mostrerà la foto pop-up e non sarà possibile inserire altri link sullo stesso oggetto. Ogni link inserito precedentemente dalla finestra link verrà eliminato. Un grande vantaggio di questi pop-up (come descritto nella sezione LINK qui sopra) e che le foto più grandi vengono caricate solamente quando si clicca sulla miniatura. Questo metodo è consigliato. Vengono inizialmente caricate solamente se miniature. Questo velocizza il caricamento della pagina.

www.magix.com

Dialogo delle proprietà web

Questa funzione si adatta bene, oltre alle foto, a oggetti come forme e gruppi ma non può essere utilizzata direttamente sul testo. Puoi inserire il testo in un gruppo (Ctrl+G) perché funzioni in quest'area limitata. Titolo pop-up Dai alla foto selezionata un titolo usando questo campo e questo verrà mostrato sopra la foto. Questa funzione deve essere attivata dal menu delle opzione delle foto pop-up. Normalmente i titoli non vengono mostrati.

Opzioni foto popup Clicca il tasto OPZIONI per aprire il relativo dialogo. Qui sono presenti tantissime opzioni che influenzano la visualizzazione del pop-up delle foto.

Opzioni popup Le opzioni seguenti modificano l'aspetto del pop-up. OSCURA PAGINA QUANDO IL POPUP È APERTO : se questa opzione è selezionata la pagina viene oscurata quando viene visualizzata la foto popup. Questo mette in risalto il popup sullo sfondo scuro.

253

254 MOSTRA OMBRA DIETRO IL POPUP : questa opzione inserisce un'ombra dietro la foto

popup perché risalti rispetto allo sfondo della pagina. MOSTRA TITOLO IMMAGINE : se hai inserito un titolo (vedi sopra) per ognuna delle foto,

con questa funzione il titolo verrà posizionato sopra la foto popup.

Nota che il testo del titolo è separato dalla didascalia che appare sotto la foto. Vedi sotto per informazioni sull'impostazione del testo delle didascalie. Opzioni galleria Le seguenti opzioni attivano le funzioni della galleria per le tue foto popup. MOSTRA COMANDI GALLERIA BROWSER : attiva questa funzione per mostrare i comandi

della galleria sulla tua foto popup.

LA galleria appare sopra una foto ogni volta che ci passi sopra con il puntatore del mouse. Permette a chi visita il sito web di visualizzare le altre foto presenti nella pagina corrente senza dover chiudere la finestra popup e cliccare sulle miniature. È possibile andare alla foto precedente o successiva, avviare e arrestare uno slideshow automatico in cui ogni foto è mostrata solo per pochi secondi prima di passare alla seguente.

www.magix.com

Dialogo delle proprietà web MOSTRA STRISCIA CON MINIATURE IN FONDO ALLA FOTO : se attivi questa opzione una

striscia con delle miniature delle foto appare sotto la finestra della foto popup. In questo modo chi visita il sito può andare su una qualsiasi foto popup cliccando semplicemente sulle miniature della striscia senza dover chiudere la finestra della foto popup. AVVIA SLIDESHOW AUTOMATICAMENTE : attiva questa funzione se desideri che si avvii

uno slideshow ogni volta che l'utente clicca su una delle foto popup. Puoi decidere, inoltre, per quanti secondi deve essere mostrata ogni foto durante lo slideshow. Ricorda che solo le foto incluse nella galleria foto sono quelle immagini sulla pagina corrente che funzionano come popup. Tutte le altre non appariranno nella galleria, per cui assicurati di utilizzare la tab Link del dialogo delle Proprietà web per attivare l'opzione foto popup su ogni immagine che desideri sia inclusa nella galleria.

Didascalie immagini Puoi inoltre visualizzare una didascalia sotto la foto popup. Inserisci il testo in questo campo nella scheda immagine. Nota che questa funzione si applica ad oggetti oltre che a foto, come forme e gruppi ma non può essere utilizzata direttamente su un testo. Puoi inserire del testo su un gruppo (Ctrl+G) per ovviare a questa limitazione.

255

256 Per coloro che conoscono il linguaggio HTML, questo testo viene usato anche come il testo ALT sull'immagine che viene esportata per l'oggetto corrente selezionato sia che l'immagine abbia un popup oppure no. I browser web mostrano questo testo sulla pagina al posto dell'immagine, se questa non può essere visualizzata.

Tipo immagine Web Il linguaggio HTML impone di convertire gli oggetti che puoi vedere e che puoi selezionare al momento dell'esportazione del sito web. Tutto questo succede automaticamente quando apri l'anteprima ed esporti ma i comandi ti permettono di controllare direttamente la creazione dell'immagine. Ricorda che ogni gruppo, forma, heading, logo, foto, pannello, sfondo ecc. viene esportata come singola immagine. Vedendo come gli oggetti vengono raggruppati puoi controllare come molte immagini vengono esportate per creare il tuo sito. Se per esempio hai due forme separate non raggruppate queste verranno esportate separatamente. Puoi raggruppare le due forme (Ctrl+G) per esportarle come singolo oggetto. Questa selezione della Image Tab ti permette di specificare come esportare l'oggetto selezionato. MAGIX Web Designer decide per te. Questo signific che normalmente le foto vengono esportate in formato JPEG (che è il miglio formato per le foto) e gli atri oggetti in PNG (il migliore per le grafiche). Le foto che sono state ruotate o che hanno un ombra semi trasparente vengono esportate in PNG perché il formato JPEG non supporta la trasparenza. Con l'apposita funzione puoi scegliere tu in quale formato (JPEG o PNG) esportare un file. Se è selezionata l'opzione JPEG puoi selezionare la qualità JPEG anche per l'immagine. Più è alta la qualità più grande è il file.

www.magix.com

Dialogo delle proprietà web

Scheda per la pubblicazione

La scheda Pubblica serve per configurare o modificare le impostazioni che ti permettono di pubblicare il tuo sito su Internet. Tuttavia non è necessario aprire questa finestra di dialogo per eseguire la pubblicazione. Tramite un apposito messaggio avrai la possibilità di inserire i dettagli necessari se non sono stati ancora indicati.

•

Clicca un pulsante IMPOSTAZIONI per configurare le impostazioni per XARA il MAGIX ONLINE WORLD o un ALTRO WEB HOST (VIA FTP). Scegli l'opzione che fa in modo che il tuo sito venga incluso nella galleria creata dagli utenti di Web Designer spuntanto la casella INCLUDI IL MIO SITO WEB NELLA GALLERIA UTENTI . Spunta la casella PUBBLICAZIONE VELOCE (SOLO FILE MODIFICATI per ripubblicare solo i file nuovi. HOSTING ,

•

Per maggiori dettagli sulla pubblicazione, vedi il capitolo principale Pubblicazione sito web (sulla pagina 273). Nota:

Web Designer non supporta la creazione di mappe del sito.

257

258

ProprietĂ MouseOver Le proprietĂ MouseOver sono parte della finestra di dialogo ANIMAZIONI WEB . Quando clicchi su questa icona, si apre la scheda MouseOver della finestra di dialogo delle Animazioni web che ti permette di scegliere cosa accade ogni qualvolta un utente sposti il puntatore del mouse sull'oggetto selezionato. Per esempio, puoi animare il MouseOver con una vasta gamma di effetti: puoi fare in modo che un testo o un intero layer di contenuto compaiano come pop-up quando un utente passa con il puntatore del mouse su una foto o oggetto della pagina web. Per maggiori informazioni vedi Animazioni web (sulla pagina 75)

Scheda segnaposto

La scheda segnaposto Ă¨ utilizzata per aggiungere e modificare manualmente widget modificabili. Si tratta di widget che incolli manualmente nella pagina web con codice HTML o tramite importazioni di file Flash o movie. Generalmente non ti serve una

www.magix.com

Dialogo delle proprietà web scheda segnaposto per widget che hai aggiunto dalla GALLERIA DESIGN perché il codice e i file che li fanno funzionare sono gestiti automaticamente. Per maggiori informazioni, consulta il capitolo Widget per siti web (sulla pagina 328) Per trasformare un oggetto in un segnaposto per widget, selezionalo e poi apri la scheda della finestra di dialogo delle Proprietà web. Decidi se desideri che il widget si basi su una porzione di codice HTML che hai ottenuto da un sito web per widget su un file Flash o grafico. Cerca il file o incolla il codice HTML. Clicca su OK : ora il tuo oggetto è un segnaposto. Questo significa che assume le dimensioni e la posizione del contenuto che hai inserito; nella pagina esportata l'oggetto viene sostituito dal codice o il file che hai inserito. Esiste anche un modo più semplice per inserire un file o un codice sulla tua pagina. Basta trascinare un file flash o GIF animato dall'Explorer di Windows sulla tua pagina. Un'immagine segnaposto viene generata e viene posizionata sulla pagina. Viene poi aggiunta una copia del file nella cartella di supporto e verrà poi esportato e pubblicato con la pagina. Quando esporti o pubblichi la pagina il segnaposto viene sostituito con il file importato. Se hai copiato un codice HTML da un altro sito, puoi semplicemente copiare il codice in MAGIX Web Designer (assicurati di lavorare nello STRUMENTO SELECTOR e non nello STRUMENTO TESTO ). MAGIX Web Designer riconosce il codice HTML e lo usa per creare un segnaposto che appare sulla tua pagina. Puoi aggiungere un segnaposto per codice HTML direttamente nel corpo di una pagina cliccando il tasto del codice HTML (corpo), che fa comparire un dialogo un dialogo dove puoi incollare o modificare grandi quantità di codici. Quando esporti o pubblichi la pagina il segnaposto viene sostituito con il file importato. Per maggiori informazioni, consulta il capitolo Widget per siti web (sulla pagina 328).

Sostituisci con &Flash Scegli questa opzione per sostituire il segnaposto un oggetto con una animazione Flash. Usa il tasto sfoglia per scegliere il file Flash che vuoi usare. Il file scelto viene automaticamente copiato nella cartella di supporto del design in questione in modo che quando esporti il tuo sito web il file viene incluso nella cartella _htm_files insieme alle altre immagini per il tuo sito. Il capitolo Utilizzo dei documenti contiene informazioni generali sulle gallerie.

Sostituisci con file &grafico Seleziona questa opzione se vuoi inserire una grafica o un immagine nel tuo sito web nella posizione del segna posto (es. PNG, GIF o altri file compatibili).

259

260 Il file scelto viene automaticamente copiato nella cartella di supporto del design in questione in modo che quando esporti il tuo sito web il file viene incluso nella cartella _htm_files insieme alle altre immagini per il tuo sito. Il capitolo Utilizzo dei documenti contiene informazioni generali sulle gallerie.

Sostituisci con codice &HTML Grazie a questa opzione puoi incollare un codice HTML ottenuto da un'altra fonte nel corpo della pagina; per es. tra i codici <body></body>. Per esempio molti siti fornisco widget che possono essere aggiunti alla tua pagina incollando il codice HTML qui. Segui le istruzioni fornite dal provider. Come già detto, poi incollare il codice HTML direttamente nella pagina invece di inserirlo in questo dialogo (mentre ti trovi nello STRUMENTO SELECTOR ). Con questo metodo viene creata un immagine segnaposto che che ha l'aspetto del vero widget. Questo è il metodo consigliato per inserire un codice HTML di un widget. ATTENZIONE: inserisci solamente codici dei quali conosci la provenienza. I codici non validi o difettosi arrecheranno danni alla tua pagina web perchè MAGIX Web Designer inserisce i codici nella pagina semplicemente senza controllarli e modificarli. Se usi i moduli Xara (www.xaraonline.com) http://www.xaraonline.com/frontpage.asp?MKCode=<TRC> puoi incollare in questo campo uno snippet per aggiungere il modulo alla tua pagina web. Se il codice HTLM che vuoi inserire si riferisce a file esterni che vuoi visualizzare nel tuo sito allora è necessario copiare questi f ile nella cartella support del tuoi design. Il capitolo Utilizzo dei documenti (sulla pagina 80) contiene informazioni a riguardo. Una volta salvati nella cartella support i file verranno automaticamente copiati nella cartella _htm_files al momento dell'esportazione. Devi inoltre assicurarti che ogni riferimento a questi file nel codice HTML si riferisca alla locazione giusta. Adesso lo spieghiamo con un semplice esempio. Immaginiamo di voler inserire un piccolo pezzo di un codice HTML per aggiungere un immagine al website. Il codice HTML che aggiungo dovrà essere riferito a qualche file salvato da qualche parte. Per prima cosa copio nella cartella support del mio documento il file immagine chiamato “myLogo.gif”. Se il documento è “mySite.gif” la cartella sarà “mySite_web_files”. So che quando esporto il sito lo esporterò con il nome “mysite.htm”. Questo significa che tutte le immagini generate per l mio sito e una copia di “myLogo.gif” verranno esportate alla cartella mysite_htm_files”. Devo inolte fare in modo che il codice che sto inserendo sia riferito al file immagine in questa posizione. Per cui posso inserire: <img src="mysite_htm_files/myLogo.gif" />

www.magix.com

Dialogo delle proprietà web Nota che questo è riferito al file immagine nela cartella dell'immagine esportata (_htm_files),. Non direttamente nella cartella support (_web_file) perché solo la cartella dell'immagine esportata viene copiata nel server insieme a my web page quando viene pubblicata la pagina Ovviamente se voglio inserire solo un immagine sul mio sito è molto più pratico importare la foto direttamente in MAGIX Web Designer. Ma questo è un piccolo esempio che mostra come aggiungere un codice HTML che è riferito ad un file esterno. Vedi la sezione Integrazione di YouTube, Flash ed altri widget (sulla pagina 35) per altri esempi.

Oggetti segnaposto Il segna posto è al momento incluso nel tuo sito web è può essere mostrato al visitatore in alcune circostanze. Per esempio se hai aggiunto una animazione Flash e se il visitatore non ha installato Flash sul proprio computer o se non è attivato il browser visualizzerà l'immagine segnaposto. Si consiglia quindi di inserire come segnaposto un oggetto diverso da un semplice rettangolo nero. Potrestu decidere di usare una immagine statica come anteprima del contenuto Flash. Oppure puoi usare un gruppo come oggetto segnaposto che include un testo che invita il visitatore a installare o attivare Flash sul proprio computer al fine di poter visualizzare il file Flash.

261

262

Responsive web design Riguardo RWD Con il crescente utilizzo di dispositivi portatili per la navigazione su Internet, aumenta la necessità di progettare siti che siano adatti al formato dei loro schermi. Benché dispositivi moderni come gli smartphone dispongano di browser eccellenti capaci di visualizzare qualsiasi tipo di sito, un sito progettato appositamente per un dispositivo mobile non richiede la funzione di zoom per la visualizzazione del testo. Questo significa che il contenuto principale è costituito da una singola colonna. I siti Internet per dispositivi portatili hanno spesso un contenuto ridotto e sono navigabili facendo semplicemente scorrere un dito sullo schermo. Creare due siti separati, uno progettato per lo schermo di un dispositivo portatile ed un altro per un desktop tradizionale, riproducendo il contenuto su due siti, sarebbe un'operazione scomoda e che richiede tempo soprattutto perché necessaria per ogni aggiornamento di testi o immagini. Il Web design adattivo è una tecnica che permette al tuo sito di adattarsi in modo dinamico alle dimensioni dello schermo. Invece di creare due siti separati, quindi due pagine HTML diverse, disponi di una pagina web che può adattare il suo layout a seconda della grandezza dello schermo (e della risoluzione) del dispositivo in uso.

Due varianti dello stesso sito web. La prima per schermi larghi e la seconda per schermi stretti, come quelli dei dispositivi portatili. La colonna di testo è più stretta e immagini ed elementi di pagina vengono riorganizzati per adattarsi ad uno schermo più piccolo.

Browser più datati come IE8 e precedenti non supportano il Web design adattivo e di conseguenza visualizzeranno solo la versione principale del sito.

www.magix.com

Responsive web design

Varianti multiple Generalmente la creazione di siti RWD implica la programmazione di Javascript complessi. Ma visto che Web Designer è uno strumento che esclude la programmazione, l'utente ha il potere di progettare il layout liberamente e di creare liberamente varianti multiple dello stesso sito web. Puoi creare una variante progettata per gli schermi di dispositivi portatili, forse anche un altro layout per gli schermi intermedi dei tablet e un'altra variante per schermi schermi larghi tradizionali. La cosa importante è che il contenuto, cioè testi, immagini, elementi grafici e schemi di colori, siano condivisi da tutte le varianti. Il secondo punto importante è che le varianti con layout multipli per ogni pagina non sono file HTML separati ma parte di un unico file HTML che cambia in modo dinamico da un layout ad un altro a seconda della larghezza del browser. Per ogni variante prodotta, il layout out può essere adattato liberamente. Puoi modificare le dimensioni, riposizionare gli elementi della pagina e questi resteranno presenti su tutte le varianti. Modifica il testo per la variante di dispositivi portatili ed esso verrà aggiornato anche nelle altre varianti. Puoi anche decidere di aggiornare lo stile di testo (sulla pagina 48) di una variante ed applicare le modifiche solo ad essa. Oppure, puoi decidere di assegnare ad una variante contenuti e grafiche diverse (generalmente le varianti per dispositivi mobili dispongono di contenuti ridotti). Quando aggiungi o cancelli una pagina di una variante, il programma crea o rimuove la pagina anche sulle altre varianti. In questo modo le modifiche al tuo sito vengono applicate a tutte le varianti. Alle pagine web deve essere assegnato un nome. Questo è necessario per fare in modo che vengano condivise da tutte le varianti. Alle pagine senza nome, ne viene assegnato uno automaticamente.

Creazione di siti web RWD da modelli Il modo più semplice per cominciare ad utilizzare delle varianti è quello di servirsi dei modelli presenti nella GALLERIA DESIGN o nel CATALOGO CONTENUTI . I modelli che comprendono delle varianti sono contrassegnati da una (R) posta accanto al nome della cartella. Per aprire un modello, cliccaci sopra due volte e dai inizio alle modifiche. Quando apri un modello, disponi di due schede: una costituisce il documento principale del sito web a cui ci si riferisce con variante principale e l'altra, un modello più stretto, che sarà la variante per dispositivi portatili. Web Designer mostra ogni singola variante in una scheda separata per poter passare facilmente da una all'altra.

263

264 Potrebbe essere utile organizzare i documenti web tramite l'opzione di menu "FINESTRA" > "ORDINA VISUALIZZAZIONI" per disporre le varianti una accanto all'altra.

Creazione di siti web RWD da siti esistenti Per creare la variante di un sito esistente è necessario aprire la finestra di dialogo delle VARIANTI DI SITI WEB nei seguenti modi. • •

•

Clicca su "STRUMENTI" > "VARIANTI DI SITI WEB" >VARIANTI DI SITI WEB . Clicca con il tasto destro sulla scheda del documento e seleziona "VARIANTI DI SITI WEB" per aprire la relativa finestra di dialogo e per visualizzare le varianti già presenti. Clicca con il tasto destro in un punto dell'area di lavoro del documento e seleziona "VARIANTI DEL SITO WEB" > "VARIANTI DEL SITO WEB" per visualizzare la finestra di dialogo.

Finestra di dialogo delle varianti di sito web

Clicca sul pulsante CREA e scegli una larghezza in pixel. Le due varianti sopra sono pagine web da 760 pixel per la versione principale più grande, mentre una versione per dispositivi portatili ha una larghezza predefinita di 480 pixel. Quello che succede è che un browser web con una larghezza di 620 pixel o maggiore visualizza la variante principale mentre un browser con una larghezza inferiore a 620 pixel visualizza la versione per dispositivi portatili. Puoi visualizzare e modificare le dimensione delle varianti esistenti cliccando sul pulsante PROPRIETÀ... . Quando crei una nuova variante, tutto il contenuto del sito web principale appare praticamente invariato, ma le dimensioni di pagina e lo sfondo sono state adattate. Puoi riorganizzare a piacere il layout di questa nuova variante. Puoi spostare liberamente gli elementi all'interno della pagina, ridurre la larghezza delle colonne di testo, modificare le dimensioni e riposizionare le immagini per tutte le pagine della variante del sito.

www.magix.com

Responsive web design Puoi modificare il titolo e la larghezza pixel di una variante cliccando sui pulsanti PROPRIETÀ e poi AGGIORNA nella finestra di dialogo. Nota che il punto di rottura tra due varianti è a metà tra le larghezze di entrambi. Per cui, nel caso descritto sopra per browser con larghezza inferiore a 620, verrà visualizzata la variante più stretta; per valori superiori, la variante più larga. Nota inoltre che la maggior parte dei dispositivi portatili cerca sempre di adattare il contenuto del browser anche se la pagina è più larga dei pixel dello schermo: verrà ridotta in scala dal browser, per adattarsi.

Condivisione tra varianti. Quando crei una nuova variante, la maggior parte del contenuto è condivisa o liveshared su tutte le varianti ma le dimensioni e posizione di quel contenuto varia a seconda della variante. • •

• •

Le modifiche al testo vengono applicate su tutte le varianti. Le modifiche alle dimensioni di oggetti vengono applicate ad una sola variante (è probabile che si desideri avere posizioni e dimensioni diverse nelle diverse varianti. Se trascini e rilasci un'immagine su una esistente, essa verrà sostituita su tutte le varianti. Se hai modificato la forma della foto, l'hai tagliata oppure hai modificato il riempimento (dimensioni, rotazione o posizione all'interno della cornice), si tratta di cambiamenti applicati singolarmente ad ogni variante. Questa è una una funzione importante che ti permette non solo di modificare le dimensioni e la posizione delle immagini sulle varianti, ma anche di applicare modifiche al formato e ritaglio dell'immagine.

Clicca su un oggetto per vedere se è "liveshared" oppure no. Questa foto ha un doppio indicatore di linea in alto a destra che indica che l'immagine è "liveshared" su una o più varianti. Puoi ridimensionare, tagliare e adattare il riempimento come desideri e queste modifiche saranno presenti solo su quella variante. Se invece sostituisci l'immagine trascinandone una nuova sopra, essa verrà sostituita su tutte le varianti.

Quando crei un nuovo oggetto, come per es. un'area di testo, una foto o una grafica, inizialmente non viene condiviso da tutte le varianti. Se desideri che sia presente su tutte le varianti, utilizza il menu "STRUMENTI" > "SITO WEB VARIANTI" oppure cliccaci

265

266 sopra con il tasto destro e seleziona "VARIANTI SITO WEB" > "CONDIVIDI CON TUTTE LE se desideri che un oggetto non venga condiviso su tutte le varianti. Questo menu ti offre anche la possibilità di cancellare l'oggetto da tutte le varianti.

VARIANTI" . Seleziona "INTERROMPI CONDIVISIONE CON VARIANTI"

Nota tecnica: se disponi di diverse versioni delle foto cioè con dimensioni, taglio e riempimenti vari, Xara deve creare delle versioni multiple di quella foto per il sito pubblicato. Questo non provoca un sovraccarico delle prestazioni (cioè non rallenta il sito) in quanto il browser carica prima la versione corretta e poi "in background" scarica le immagini nell'altra versione. Questo significa che la versione iniziale che viene visualizzata (sia su dispositivi portatili che nella versione desktop) verrà sempre scaricata il più velocemente possibile; se però modifichi la larghezza o l'orientamento del browser passerà immediatamente all'altra versione.

Varianti ed oggetti ripetuti Quando oggetti ripetuti (sulla pagina 142) come barre di navigazione, intestazioni o piè di pagina, appaiono in versioni che non possono essere condivise tra le varianti. Ogni variante possiede la sua serie di oggetti ripetuti.

Varianti e barre di navigazione È probabile che su una variante ridotta, si desideri una barra di navigazione o un layout diversi Le barre di navigazione di ogni variante sono indipendenti e quindi possono essere personalizzate a piacere. Sono incluse anche modifiche nel design che possono essere apportate scelgliendo tra le varie opzioni della GALLERIA DESIGN con una semplice operazione di drag & drop. Per esempio, per un sito largo potrebbe essere necessaria una barra orizzontale; per uno stretto una barra verticale. Una soluzione efficiente per una barra di navigazione da visualizzare su un sito stretto adatto ad un dispositivo portatile, è quella di avere una barra con un solo pulsante con un menu contenente i link che rimandano alle altre pagine del sito, piuttosto che una barra con un pulsante per ogni pagina. Vedi Barre di navigazione con pulsante singolo (sulla pagina 317) per maggiori informazioni.

Pubblicazione delle varianti Pubblicare il tuo sito con varianti è semplice e non si differenzia dalla pubblicazione di siti ordinari. Il tuo sito determina automaticamente la risoluzione dello strumento da cui viene visualizzato e fornisce la variante necessaria in base alla larghezza. Puoi fare una prova modificando la larghezza del browser durante l'anteprima del sito. Rendilo più stretto per vederlo passare immediatamente alla versione per dispositivi portatili.

www.magix.com

Sfondi per siti web

Sfondi per siti web La maggior parte dei design di pagina nella GALLERIA DESIGN hanno due tipi di sfondi. Uno sfondo di pasteboard largo che si estende lungo tutto lo sfondo dell'intera finestra del browser quando il sito viene esportato. Sopra di esso risiede lo sfondo di pagina con i vari elementi che costituiscono la pagina web. Per impostazione predefinita, i mododelli web della Galleria design hanno una variante principale ed una per dispositivi portatili, contenute all'interno dello stesso documento web.

Sfondo browser/pasteboard Sfondo pagina Impostare i colori di sfondo pagina e pasteboard Quando crei un nuovo documento ("FILE" > "NUOVO") per impostazione predefinita la pagina si presenta trasparente (nessun colore); si vede solo il colore della pasteboard dietro di essa che Ă¨ bianco. Questa Ă¨ l'area della pagina dove posizionare tutti gli elementi del sito web. Vedrai inoltre anche un leggero contorno guida a forma di rettangolo che mostra i margini della pagina rispetto alla pasteboard. Puoi disattivare questo aiuto cliccando con il tasto destro sulla pagina e deselezionando "SFONDO PAGINA" > "MOSTRA DIMENSIONI PAGINA"

267

268 Se trascini un colore sulla pasteboard dalla barra dei colori e lo rilasci, l'intero sfondo acquisirà quel colore. Questo succede perché lo sfondo pagina nel suo stato predefinito è trasparente e quindi riflette il colore sottostante cioè quello della pasteboard. E questo è esattamente quello che vedrai nel browser web quando visualizzi l'anteprima della pagina.

Puoi anche fissare la pasteboard di un solo colore, come descritto sopra, e poi assegnare allo sfondo di pagina un colore diverso. Basta rilasciare un colore nello sfondo di pagina. Ora quando visualizzi l'anteprima della pagina vedi che il colore dello sfondo della finestra del browser è quello della pasteboard e il rettangolo dello sfondo pagina ha il suo colore.

www.magix.com

Sfondi per siti web Utilizza il color editor per modificare questi colori. Clicca con il tasto destro sulla pagina e seleziona "SFONDO PAGINA" > "MODIFICA COLORE PAGINA" per visualizzare il color editor e apportare la modifica. Per modificare il colore di sfondo della pasteboard, clicca con il tasto destro sulla pasteboard e seleziona "SFONDO PASTEBOARD" > "MODIFICA COLORE PASTEBOARD" . Per ripristinare lo sfondo della pasteboard al colore bianco predefinito, clicca sulla pasteboard con il tasto destro e seleziona "SFONDO PASTEBOARD" > "RIPRISTINA" . Per ripristinare lo sfondo pagina al suo stato chiaro o trasparente, cliccaci sopra e seleziona SFONDO PAGINA" > "RIPRISTINA". Ecco come procedere se il tuo documento web contiene più di una pagina e desideri applicare colori di sfondo e pasteboard a tutte le pagine. Clicca sulla pasteboard o sullo sfondo pagina e scegli COPIA SFONDO PASTEBOARD" oppure COPIA SFONDO PAGINA e scegli INCOLLA PASTEBOARD/SFONDO PAGINA SU TUTTE LE PAGINE

Modelli di sfondi e ricolorazione MAGIX Web Designer ti permette di aggiungere al tuo documento, tramite drag and drop, una gamma di sfondi per siti web già pronti direttamente dalla GALLERIA DESING . Scegli dalla selezione di sfondi nella sezione SFONDI PER SITIWEB della galleria. Puoi personalizzare i texture con colori a tua scelta trascinandoli dalla barra dei colori per aprire il menu "SFONDO PASTEBOARD" > "MODIFICA COLORE PASTEBOARD" e visualizzare il Color editor. Quando modifichi il colore di uno sfondo che è composto da una serie di colori, noterai che Web Designer ti chiederà di quale colore desideri cambiare. Si potrebbe trattare di colori con nome, nel caso tu stessi lavorando su uno dei temi di modelli di siti web o colori a cui hai assegnato un nome precedentemente; oppure potrebbero essere colori locali nel caso in cui stessi modificando i colori scelti in una selezione precedente. Vedi la sezione Sostituzione colori (sulla pagina 179) per maggiori dettagli. Nota che quando trascini nella pasteboard uno degli sfondi per siti web predefiniti, esso sostituisce tutti gli oggetti presenti correntemente sullo layer di sfondo della pasteboard. Si tratta di un'operazione distruttiva.

Sfondi fissi che non scorrono Generalmente se la tua pagina web è lunga la si può far scorrere nel browser e lo sfondo di questo scorre con la pagina di modo che il contenuto rimanga nello stesso punto in relazione allo sfondo. Puoi anche fissare lo sfondo di modo che non scorra con il contenuto della pagina. Clicca con il tasto destro sulla pasteboard e seleziona "SFONDO PASTEBOARD" > "FISSO . Ora quando visualizzi l'anteprima, il contenuto scorre sopra uno sfondo fisso (perché sia visibile fai in modo che la pagina sia lunga abbastanza da avere una barra di scorrimento).

269

270 Per ritornare alle normali opzioni di scorrimento, seleziona SFONDO PASTEBOARD" > "SCORRIMENTO" .

Utilizzo di foto come sfondo Creare sfondi con foto Se desideri creare sfondi con foto personali o texture bitmap invece di personalizzare gli sfondi già pronti della Galleria design, procedi come segue. Per prima cosa importa la foto o texture nel tuo documento, come faresti per metterlo su una pagina. Poi clicca con il tasto destro sulla foto e scegli IMPOSTA PAGINA COME SFONDO o IMPOSTA PASTEBOARD COME SFONDO a seconda di quello che vuoi impostare. Segmentazione A seconda della natura e dimensioni dell'immagine decidi se desideri che essa venga divisa in tante immagini ripetute in modo da riempire lo sfondo Per modificare questa impostazione clicca con il tasto destro sullo sfondo pagina o pasteboard (sempre a seconda di quello che desideri modificare) e seleziona o deseleziona l'opzione "mosaico" nel sotto-menu sfondo pagina/sfondo pasteboard. Finestra browser file Quando utilizzi una foto sullo sfondo della pasteboard (che diventa lo sfondo del browser web) hai a disposizione un'ulteriore opzione. Puoi decidere di modificare le dimensioni della tua foto in relazione alla grandezza del browser del visitatore. Se si modificano le dimensioni della finestra del browser anche quelle della foto vengono adattate. Clicca con il tasto destro sulla pasteboard e seleziona "SFONDO PASTEBOARD"" > "RIEMPI FINESTRA BROWSER" .

Impostazione della parte superiore della pagina Se dai alla pagina e alla pastebord colori differenti nell'anteprima vedrai che la pagina si estende verso destra sulla parte superiore della finestra del browser. Non vedrai il colore della pastebord sulla tua pagina. Comunque è possibile aggiungere un Offset in modo da creare spazio sopra la tua pagina nel browser. Aggiungendo un offset sposti l'origine della pagina. Normalmente l'origine della pagina è fissata nell'angolo in alto a sinistra. Se per esempio sposti l'origine di 20 pixel, aggiungerai un margine di 20 pixel sopra la pagina nella visualizzazione di un browser. Puoi cambiare l'origine in due modi. Il modo più semplice è quella di aprire a STRUMENTI > OPZIONI accedere a GRIGLIA & RIGHELLO e alzando il valore delle coordinate Y del punto di origine. Questo è normalmente il valore verticale delle

www.magix.com

Sfondi per siti web dimensioni della pagina; aumentalo di quanto vuoi sia largo ilo margine. Se per esempio la pagina è di 700 pixel, sposta l'origine a 720 pixel in modo da aggiungere un margine si 20 pixel. In alternativa è possibile impostare il punto di origine interattivamente. Gira il regolatore da FINESTRA > MOSTRA REGOLATORE (Ctrl+L). Clicca quindi sul tasto a forma di mirino che si trova dove si incotrano le assi. Ora puoi riposizionare l'origine trascinandola sull'asse verticale sopra l'angolo in alto a sinistra della pagina. Cambiando la posizione orizzontale dell'origine non si hanno effetti sulla posizione orizzontale della pagina. Si consiglia quindi di lasciare questo elemento invariato.

Layer di sfondo pagina e pasteboard Se apri la GALLERIA PAGINE & LAYER puoi vedere sia il LAYER DELLO SFONDO PAGINA che il LAYER DELLO SFONDO PASTEBOARD Questi layer contengono gli oggetti che costituiscono i due sfondi del tuo documento. Sono normalmente bloccati e quindi non puoi selezionarli o modificarne i contenuti. È comunque possibile sbloccarli nella GALLERIA PAGE & LAYER in modo da effettuare alcune modifiche limitate per personalizzare lo sfondo della pagina o della pasteboard. Clicca sui lucchetti posti affianco dei layer per sbloccarli. Dopo averli sbloccati, puoi rendere corrente un layer di sfondo (di modo da poterci trascirare dei nuovi oggetti) o modificare gli oggetti presenti. Se hai posizionato degli elementi sulla pasteoard come grafiche, foto o altri elementi in corso di lavorazione che non desideri appaiano come parte del documento web, non saranno visibili quando visualizzi l'anteprima della pagina. Se desideri che appaiano come parte dello sfondo, devi spostarli sul layer dello SFONDO PASTEBOARD .

Le due stelle sono sul livello pasteboard e appaiono quindi come parte della pagina web quando si apre l'anteprima della finestra del browser.

271

272 Nota che quando clicchi con il tasto destro su un oggetto sul layer sfondo sbloccato, appare il normale menu relativo agli oggetti sul layer e non il menu relativo al layer di sfondo stesso che Ă¨ quello che vedi quando questo Ă¨ bloccato.

Varianti e sfondi Web design adattivo Con un sito web Web design adattivo (sulla pagina 262) il colore o design principale dello sfondo della pasteboard (l'area intorno alla pagine che determina lo sfondo del browser quando la pagina viene pubblicata) puĂ˛ variare da una versione ad un'altra ed ogni ogni pagina e variante di pagina viene esportata con il proprio rettangolo pasteboard. Puoi posizionare altri oggetti nel layer dello sfondo della pasteboard e anch'essi possono differire tra le varianti di pagina. Per esempio, una forma che va oltre il bordo pagina, puĂ˛ essere posizionata differentemente in ogni variante o mancare del tutto in alcune.

www.magix.com

Pubblicazione del sito web

Pubblicazione del sito web Pubblicazione sul sito Xara Online Website M Per inserire immediatamente il tuo sito web su Internet, puoi pubblicarlo su Xara Online o MAGIX Online World (MOW) che includono un servizio di hosting gratuito, o su qualsiasi altro spazio web. La pubblicazione su Xara Online è la soluzione più semplice perché già integrata in Web Designer. Gli utenti di MAGIX Online World (MOW) possono sempre pubblicare su MOW nel modo tradizionale ma i nuovi utenti non possono più registrarsi a questo servizio. Xara Online è l'opzione preferita per i nuovi utenti che desiderano utilizzare un servizio di hosting gratuito. Gli utenti di MOW devono cliccare su PUBBLICA SU UN WEB HOST ALTERNATIVO... e seguire le istruzioni di registrazione dalla finestra di dialogo"XARA ONLINE" > "IMPOSTAZIONI" Scegli "FILE" > "PUBBLICA SITO WEB " oppure clicca sull'icona di pubblicazione nella barra degli strumenti del sito. Se esegui questa operazione per la prima volta, appare la finestra di dialogo per il login nel Xara Online.

Esegui l'accesso utilizzando il tuo nome utente e la password. Disponi già di questi dati se hai acquistato o registrato Web Designer nel sito web di MAGIX. Altri utenti possono cliccare sul pulsante REGISTRAZIONE GRATUITA per ottenere subito un nome

273

274 utente ed una password. Puoi decidere di restare collegato di modo che se esci da Web Designer e poi rientri il login avverrà automaticamente. Dopo aver eseguito l'accesso appare la seguente finestra di dialogo.

Seleziona il tuo indirizzo del sito web dal menu a tendina. Puoi anche inserire il nome di una sottocartella come "sito1" che viene aggiunto alla fine dell'indirizzo del tuo sito web nel campo sovrastante. È utile se desideri pubblicare più siti con lo stesso account Xara Online. Puoi mettere ogni sito in una sottocartella diversa. Risulta pratico anche se desideri aggiungere una password per proteggere una cartella. Clicca su PUBBLICA. Il tuo sito verrà pubblicato mentre potrai visualizzare la finestra di trasferimento dati che indica lo stato di progresso del trasferimento. A pubblicazione ultimata, ti sarà possibile accedere al tuo sito tramite il link che appare nella finestra di trasferimento dati. Quando si pubblica sul Xara Online si genera automaticamente una mappa del sito che vedrai come file sitemap.xml nel tuo spazio web. Si tratta di un elenco delle pagine del tuo sito che aiuta i motori di ricerca a trovare ed elencare tutte le pagine che contiene. Il pulsante PROTEGGI CON PASSWORD ti conduce al Xara Online dove è possibile gestire l'accesso alle cartelle impostando una password. Puoi creare una lista di contatti che può essere suddivisa in gruppi di utenti. I visitatori di un'aerea protetta, dovranno fornire un indirizzo e-mail ed una password per poter ottenere l'accesso. Il pulsante CENTRO DI CONTROLLO ti conduce al Xara Online da dove è possibile amministrare il tuo account oltre a poter navigare, visualizzare e cancellare i file che hai caricato sullo spazio web. Clicca sul pulsante NUOVO INDIRIZZO INTERNET se desideri selezionare un indirizzo web diverso. Per esempio, potresti acquistare un tuo dominio personale (es. xara.com) invece di avere come indirizzo magix.net. Se acquisti altri indirizzi Internet, questi compaiono dell'elenco a tendina de "Il tuo sito web" durante la prossima pubblicazione. Usa l'opzione "Aggiorna" di quell'elenco per aggiornarlo, se non include ancora tutti gli indirizzi inseriti.

www.magix.com

Pubblicazione del sito web

Pubblicazione su un web host alternativo Se non desideri pubblicare nel MAGIX Online World, seleziona l'opzione PUBBLICA SU per aprire la schede PUBBLICA della finestra di dialogo delle PROPRIETÀ WEB dove puoi configurare i dettagli di accesso FTP di una compagnia di hosting alternativa.

UN WEB HOST ALTERNATIVO

È necessario trovare i dati di accesso FTP: indirizzo di hosting, nome utente, password, percorso completo di una cartella - incluse le sotto-cartelle, se necessario - richieste dalla compagnia per realizzare la pubblicazione.

Inserimento dati di pubblicazione

1. Scegli su quale host FTP desideri pubblicare. In questo caso sceglierai ALTRO WEB HOST (VIA FTP).

2. Ora clicca su IMPOSTAZIONI nella finestra di dialogo per configurare le

impostazioni FTP, se non stai utilizzando l'opzione MAGIX ONLINE WORLD Si apre così la seguente finestra di dialogo.

275

276

1. Nella casella FTP HOST ADDRESS , digita il tuo indirizzo di hosting FTP.

2. 3. 4.

5. 6.

Questo è spesso uguale al nome del dominio, se ne sei già in possesso. Per esempio, per gli utenti di MAGIX Online World il dominio è FTP.MAGIX-ONLINE.COM. Nella casella UTENTE FTP , digita il tuo nome utente FTP. Nella casella PASSWORD FTP , digita la tua password FTP. La casella opzionale SOTTO-CARTELLA ti permette di pubblicare il tuo sito web in una sotto-cartella. Se imposti una sottocartella in questa locazione, tutte le pagine del sito web verranno pubblicate su questa cartella. Se sia necessario o no pubblicare su una sotto-cartella dipende dai requisiti richiesti dalla compagnia di web hosting scelta. Alcune non necessitano affatto la pubblicazione su una sotto-cartella, mentre altre richiedono di pubblicare su una sotto-cartella "pubblica" o "www", per esempio. È necessario controllare l'intero percorso FTP sul quale la compagnia di web hosting richiede la pubblicazione, prima di pubblicare il tuo sito web, in quanto i requisiti possono variare ampiamente. Per esempio, se la tua compagnia di web hosting ti richiede di pubblicare su ‘http://yourdomain.com/public_html’, dovrai digitare allora ‘public_html/’ nel campo della sottocartella. Clicca il pulsante ESPLORA SPAZIO WEB per navigare, visualizzare e cancellare i file che hai caricato sul tuo server FTP. Quando hai terminato clicca su OK per ritornare sulla scheda PUBBLICA della finestra di dialogo delle PROPRIETÀ WEB.

www.magix.com

Pubblicazione del sito web

Clicca su OK . Web Designer mostra una finestra di dialogo che conferma i dati di pubblicazione che stanno per essere utilizzati. Clicca su PUBBLICA.

Finestra di dialogo dei dettagli di pubblicazione

Trasferimento dati 1. Dopo aver cliccato su PUBBLICA, Web Designer visualizza una piccola finestra che

mostra la progressione del trasferimento dei dati ed indica quando la pubblicazione è stata completata. Se hai inserito L'URL del tuo sito web con i dati di accesso FTP, puoi raggiungerlo direttamente da questa locazione. 2. In alternativa, non appena il trasferimento si è concluso, puoi aprire la finestra di un browser e navigare fino all'URL del sito pubblicato. Gli utenti di MAGIX Online World possono aprire il sito web tramite il loro indirizzo sull'Online World: http://yourname.MAGIX.net/public. Nota: se hai inserito una sottocartella nella scheda di pubblicazione della finestra di dialogo delle Proprietà web, il sito web viene salvato in quella locazione. Importante: se non hai ancora inserito un nome specifico per le pagine nella Galleria Pagine & Layer, l'ultimo nome esportato, verrà utilizzato come base per tutte le altre pagine del sito. Per esempio, se apri un modello di sito web e lo pubblichi come "test", questo assumerà il nome test.html e le pagine aggiuntive si chiameranno test_2.htm, test_3.htm etc.

277

278 index.htm è il nome usuale per la prima pagina di un sito web. Nota: in molti server web va fatta attenzione alle maiuscole ed alle minuscole. Di conseguenza l'indirizzo web xara.com/prodotti.htm non può essere considerato uguale a xara.com/Prodotti.htm. Per ridurre la confusione e gli errori, Web Designer fa in modo che tutti i nomi delle pagine siano scritti con la minuscola e contengano solo caratteri consentiti. Ciò significa che nei nomi delle pagine non sono consentiti spazi. Consigliamo di utilizzare un trattino basso come separatore.

Inserisci il tuo sito web nella galleria utenti La casella di controllo INCLUDI IL MIO SITO NELLA GALLERIA UTENTI è attiva solo se hai aggiunto un URL valido (o se utilizzi Xara Online/MAGIX Online Word). Se selezioni questa opzione dopo aver pubblicato, il tuo sito viene considerato per l'integrazione nella galleria dei siti web degli utenti creata dagli utenti di Web Designer. Visita la galleria su http://www.xara.com/websitegallery oppure clicca sul pulsante Info per saperne di più.

Pubblicazion e veloce (solo file modificati) È consigliato lasciare selezionata la casella di controllo PUBBLICAZIONE VELOCE (SOLO FILE MODIFICATI) . In questo modo, nella maggior parte dei casi, questa operazione è

più rapida in quanto vengono pubblicati solo i file modificati nell'ultima pubblicazione.

www.magix.com

Gestione foto

Gestione foto Introduzione Le foto sono una parte integrale di tanti tipi di creazioni multimediali come siti web, flyer, brochure, DTP ecc. La gestione delle foto in MAGIX Web Designer programmi di grafica.

è differente da quella di altri

In MAGIX Web Designer puoi colorare, tagliare, copiare, In MAGIX Web Designer puoi colorare, tagliare, copiare, ottimizzare secondo le tue esigenze. La natura non distruttiva della gestione foto fa in modo che per es. quando modifichi le dimensioni di un'immagine, non viene alterata quella originale ma solo una copia per la visualizzazione. L'immagine importata originale viene salvata nel file .web in modo che tu possa in seguito elaborarla senza alcuna perdita di qualità. Puoi anche ripristinare le foto tagliate. La gestione delle foto è incredibilmente veloce. Puoi aprire una foto a 50 Megapixel ed eseguire tutte le operazioni e ruotare l'immagine in tempo reale. Questo capitolo si occupa dei principi basilari per la manipolazione di foto e immagini bitmap con MAGIX Web Designer. L'operazione dello strumento foto (sulla pagina 302) viene illustrata separatamente nel relativo capitolo. *Benchmark basati sulla composizione della foto creati con hi-res JPG digital photos

Oggetti foto In Web Designer le foto (o bitmap) sono soltanto un altro oggetto sulla pagina. Puoi trascinare e rilasciare le foto nella pagina dal tuo file explorer e poi modificare le dimensioni, farle ruotare, copiarle e spostarle come qualsiasi altro oggetto. Inoltre puoi regolare la trasparenza, anche la trasparenza graduata, tagliare e ritagliare forme con facilità. La funzione di trasparenza ti permette di offuscare, fondere e creare foto composite. Diversamente da altri strumenti fotografici in cui dovresti utilizzare dei livelli, ogni oggetto presente su MAGIX Web Designer è sul suo livello e, come ogni altro oggetto sulla pagina, puoi spostarlo in avanti o indietro perché compaia davanti o dietro altri oggetti.

279

280

Importazione foto MAGIX Web Designer supporta una vasta gamma di foto o tipi di bitmap incluse JPEG, PNG, TIFF e RAW ed altri ancora. Il termine "bitmap" è il termine generico che comprende tutti i tipi ma è intercambiabile con la parola "foto".

Il modo più semplice per aprire un'immagine è trascinare il file o bitmap dal Windows Explorer nella finestra di Web Designer. Puoi usare anche la funzione APRI nel menu FILE o IMPORTA nel menu Opzioni. Quando si importano delle foto ad alta risoluzione (cioè sopra i 1920 pixel sia in altezza che larghezza) in un documento web, MAGIX Web Designer ridimensiona automaticamente l'immagine alla misura HD dello schermo senza chiederti se desideri importare una versione con una risoluzione più bassa. Nel caso di un documento web le dimensioni ridotte non compromettono l'alta qualità delle immagini. Quindi non è necessario importare un documento a piena risoluzione se è destinato al web. Se trascini una foto su una già esistente questa verrà sostituita. Rilasciala sullo sfondo per importarla come nuova foto singola

www.magix.com

Gestione foto

Riposizionamento foto Se trascini e rilasci un file fotografico (dal Windows Explorer o dalla Galleria immagini) su una foto esistente questo si sostituirà ad essa mantenendo le stesse dimensioni. Questo processo è modo importante per la sostituzione di foto e modelli. Puoi usare il RIEMPIMENTO per definire la dimensione, la posizione e l'angolo della foto all'interno del suo contorno. Questo non vale per i documenti fotografici (sulla pagina 299) dove trascinando la foto questa verrà importata sempre come un nuovo documento. Durante la sostituzione delle foto o di una bitmap in questo modo viene posizionata nella migliore posizione con le migliore dimensioni all'interno dell'immagine. Se tieni premuto il tasto Shift durante la sostituzione di una foto quella nuova verrá inserita con le stesse dimensioni e posizione della vecchia foto. Questo è molto utile quando regoli manualmente la scala e la rotazione di un riempimento e poi vuoi sostituire l'immagine con un altra che ha lo stesso rapporto di pagina. Se ci sono varie copie della stessa foto su una pagina delle stesso gruppo soft, per esempio una piccola miniatura e una copia più grande su un layer popup, quando trascini e rilasci, tutte queste verranno sostituite con la foto principale.

Uso delle foto come riempimento È possibile anche usare le bitmap come sfondo per il riempimento. Trascina semplicemente il file sulla forma e tieni premuto il tasto Shift prima di lasciare. Questo sostituirà il riempimento già esistente con una bitmap che si adatterà all'oggetto. Puoi usare lo STRUMENTO DI RIEMPIMENTO per regolare la dimensione, l'angolo e la posizione.

Dimensioni iniziali della foto Quando importi una foto di grosse dimensioni, se più grande, questa viene ridotta ad una risoluzione HD (1920x1080) (in documenti di stampa o animazione viene richiesto immediatamente). E viene ridotta così sulla pagina a 500 pixel di larghezza. Per ridurre le dimensioni basta trascinare una delle maniglie poste in corrispondenza degli angoli utilizzando lo strumento di selezione o inserire una nuova larghezza nel rispettivo campo posto nella barra informazioni dello strumento di selezione.

Se sostituisci una foto trascinandola mediante drag and drop, le dimensioni della foto vengono adattate perfettamente a quelle dell'oggetto esistente, ciò significa che le sue dimensioni e la sua risoluzione dipendono dalle dimensioni dell'oggetto.

281

282

Copie memoria zero Una delle differenze più rivoluzionarie tra Web Designer ed altri software consiste nel fatto che quando copi una qualsiasi foto sulla pagina, in realtà non viene eseguita una copia completamente nuova della foto originale importata, bensì viene mostrata un'altra "visualizzazione" dell'immagine originale. Il motore di renderizzazione di Web Designer è abbastanza rapido da poter visualizzare qualsiasi numero di copie della stessa immagine "al volo". In questo modo puoi risparmiare enormi quantità di memoria e ridurre drasticamente le dimensioni dei file. Ciò non pregiudica o limita quello che puoi fare con ogni copia, e le copie possono essere trattate come copie indipendenti, completamente separate. Ogni copia non deve essere identica. Puoi modificare ognuna di esse come desideri, modificandone le dimensioni, ruotandole, tagliandole, colorandole o applicando una vasta gamma di effetti fotografici e di trasparenza Il tutto senza aumentare lo spazio di memoria o le dimensioni dei file originale.

Qui puoi vedere diverse copie della stessa immagine, ognuna modificata in modo diverso. Ognuna di esse conserva la risoluzione completa del JPEG originale importato, come puoi vedere dall'immagine a destra. La memoria (RAM e dimensioni del file) non è superiore rispetto alle dimensioni del JPEG. Dal momento che si tratta della stessa immagine visualizzata in dimensioni diverse, la risoluzione, dpi o ppi, varia. Nell'esempio di cui sopra, l'occhio è di 115dpi, (dal momento che l'immagine è stata ingrandita) mentre l'immagine sulla sinistra è di oltre 1200dpi.

www.magix.com

Gestione foto

Galleria Bitmap Il capitolo Utilizzo dei documenti (sulla pagina 102)contiene informazioni generali sulle gallerie. La GALLERIA BITMAP mostra tutte le bitmap o foto uilizzate in ogni documento con le informazioni riguardo a pixel e la dimensione del file. Puoi aprirlo cliccandoci sopra oppure dalla barra gallerie o dal menu STRUMENTI > GALLERIE o con il tasto "F11".

Questo mostra la GALLERIA BITAMAP per il documento superiore e mostra l'immagine originale JPEG della ragazza che Ă¨ inserito nel file web nativo. Come detto sopra tutte le copie di questa immagine vengono mostrate direttamente dal master in modo che

283

284 solo la singola immagine venga visualizzata e non le quattro varianti presenti sulla pagina. Vengono visualizzate le seguenti utili informazioni riguardo l'immagine originale: • •

• • •

Nome file del JPEG originale Il tipo di file in questo caso un JPEG e la dimensione del file 1,006K. (Questa è la dimensione originale del file e anche quanto del file web viene preso da questa immagine). La dimensione in pixel dell'originale, la dimensione Megapixel (in questo caso appena sotto 2MP). La profondità del colore, in questo caso 24 bit che a volte è chiamata colore vero. L'immagine Xara è un immagine a 4 bit. La risoluzione originale dell'immagine, in questo caso 96dpi

La GALLERIA BITMAP contiene sempre una bitmap standard con l'immagine grigia Xara. Questa viene usata come bitmap standard per riempimenti o dove non sono presenti le altre bitmap. È importante avere anche un segna posto. Come per tutte le gallerie puoi trascinare gli oggetti dalla galleria e rilasciarli nella pagina per creare una nuova copia. Oppure puoi selezionare un'immagine della galleria e cliccare uno dei tasti posti in alto. La prossima sezione riguarda nel dettaglio i controlli della GALLERIA BITMAP la maggior parte dei quali sono adatti ad utenti esperti.

Riempimento delle forme con la bitmap Seleziona la forma nella pagina, poi seleziona i bitmap nella galleria e clicca sul pulsante di riempimento. In alternativa puoi trascinare l'immagine dalla GALLERIA BITMAP in qualsiasi forma, tenendo premuto il tasto "Shift". Puoi regolare la dimensione, l'angolo ecc. con le maniglie di aggiustamento foto.

Impostazione della trasparenza della bitmap Queste funzioni sono pensate per gli user più esperti. Puoi usare ognuna delle bitmap come maschera di trasparenza su ogni forma o bitmap riempita. La luminosità della bitmap ha effetti sulla trasparenza dell'oggetto selezionato. La dimensione della trasparenza della bitmap, la rotazione possono essere controllate con le strumento "TRASPARENZA" (sulla pagina 235).

Elimina immagini dalla galleria Quando cancelli un bitmap dalla pagina, questo rimane nella GALLERIA BITMAP . Ogni bitmap inutilizzato è cancellato dal file quando viene salvato e riaperto. In ogni caso puoi forzare la cancellazione di ogni bitmap selezionandolo e premendo il pulsante CANCELLA . Se il bitmap viene usato nel documento, viene sostituito dal bitmap standard di Xara.

www.magix.com

Gestione foto

Impostazione di una bitmap come sfondo della pagina Seleziona l'immagine bitmap nella galleria e clicca sul tasto SFONDO . Appare un menu che ti permette di scegliere tra l'impostazione dello SFONDO PASTEBOARD o dello SFONDO PAGINA . Quando imposti lo sfondo pasteboard, se l'immagine è più stretta della pagina, si presume tu desideri che essa venga divisa in modo da riempire l'intero sfondo del browser. Altrimenti l'immagine è applicata come unica tessera. Puoi modificare queste impostazioni cliccando con il tasto destro sulla pasteboard e consultando il sotto-meni dello sfondo pasteboard. Puoi anche applicare un'immagine allo sfondo senza utilizzare questa galleria: basta cliccare con il tasto destro sull'immagine e consultare le opzioni del menu contestuale. Vedi Sfondi per siti web (sulla pagina 267) per maggiori informazioni al riguardo.

Salva Seleziona la bitmap e clicca su SALVA per salvare l'immagine generale. Nel caso di un immagine JPEG integrata si salverà il file JPEG originale. Altri tipi di bitmap è meglio salvarli come bitmao PNG.

Proprietà bitmap Il pulsante PROPRIETÀ visualizza informazioni sul bitmap selezionato nella galleria. Qui hai anche la possibilità di eliminare il livellamento delle immagini quando i bitmap sono ingranditi. Di solito tutti i bitmap vengono livellati quando vengono ingranditi sullo schermo o viene effettuato uno zoom. Per disattivare questa opzione è disponibile una casella di controllo nella finestra di dialogo delle proprietà, in modo che i singoli pixel siano visibili quando si effettua lo zoom. Qui inoltre vengono fornite informazioni sulle proprietà di animazione del bitmap. Questa opzione in realtà è applicabile solo alle immagini GIF animate ANIMAZIONE GIF:

• •

(il tempo in cui il frame viene visualizzato sullo schermo) di ripristino dell'animazione GIF regola ciò che accade tra ogni frame in un'animazione GIF. "Niente" significa che non è stata eseguita alcuna azione. Molti browsers interpretano ciò allo stesso modo dell'opzione "Non modificare". L'opzione "Non modificare" visualizza i frame l'uno sopra l'altro - se i frame sono trasparenti, più frame sono visibili contemporaneamente. Alcuni browser cancellano l'animazione prima di un ciclo di ripetizione, altri no. L'opzione "Sfondo" ripristina il colore dello sfondo (di solito bianco) dell'immagine GIF dell'area coperta dalla grafica. L'opzione "Ripristina precedente" ripristina l'area coperta dal frame ad uno stato precedente alla visualizzazione del frame. Ciò è interpretato dal alcuni browser in maniera tale

RITARDO

RIPRISTINA: l'impostazione

285

286 che venga cancellata l'immagine e mostrato il colore dello sfondo prima di ogni frame, mentre altri browser al contrario mostrano le immagini una sopra l'altra. Dal momento che i browser interpretano questi valori in modi differenti, potrebbe essere necessario sperimentare questa impostazione prima di ottenere il risultato desiderato.

File JPEG integrati I file JPEG sono compressi notevolmente in relazione al loro stato originale, fino ad essere 10 volte più piccoli rispetto all'immagine originale non compressa. Nell'esempio di cui sopra, l'immagine originale non compressa richiede più di 7mb di memoria, ma come mostra la GALLERIA BITMAP , questo file JPEG è di appena 1mb. Una riduzione significativa. Ecco perchè le immagini JPEG sono il tipo di file standard per la fotografia digitale e l'utilizzo sul web. Quando trascini un file JPEG mediante drag and drop (o usi le opzioni di menu "Apri" o "Importa") il JPEG originale viene salvato nel documento, e questo è ciò che è salvato nel file .xar quando salvi il tuo documento. È importante capire in che modo questo programma si differenzia dagli altri strumenti di grafica, tanto dai software per disegno vettoriale quanto dai programmi di photo editing. Altri prodotti normalmente decomprimono l'immagine e la salvano come dati "grezzi" non compressi nella memoria e salvano questi a loro volta nel loro formato file originale. Inoltre, ogni copia creata di solito è una copia completa dell'immagine grezza originale, come si è detto precedentemente. Se crei quattro copie della tua foto e salvi il tuo file - questo sarà quattro volte grande. In MAGIX Web Designer il file non aumenta le sue dimensioni, indipendentemente da quante copie siano state create. Includendo dunque il file JPEG originale invece di salvare l'immagine non compressa, si risparmia uno spazio di memoria 7 volte superiore rispetto agli altri editor grafici. Il fatto che ci siano quattro copie complete dell'immagine significa che in questo caso particolare la memoria usata è di circa 30 volte inferiore. Questo significa un notevole risparmio di spazio di memoria (e di tempo) rispetto agli altri programmi di grafica*. *Ciò è facile da testare. Importa un JPEG nel tuo editor grafico preferito, crea quattro copie e modifica leggermente una di queste, colorandola, offuscandola o ruotandola. Salva poi il file originale e confrontalo con il JPEG originale e l'equivalente file .Xar. Un file originale .Xar ha approssimativamente le dimensioni del JPEG originale, non importa quante copie dell'immagine siano state create.

Estrazione del JPEG originale Clicca con il tasto destro su un'immagine della GALLERIA BITMAP e seleziona l'opzione di menu SALVA per salvare il JPEG originale nel tuo sistema file.

www.magix.com

Gestione foto

Qualità di visualizzazione delle foto MAGIX Web Designer può mostrare le foto in uno dei cinque livelli di qualità. Le due impostazioni più importanti rifiniscono l'immagine in modo da evitare che i pixel siano visibili o che siano presenti sezioni non regolari. Modifica il livello di qualità attraverso la voce QUALITÀ nel menu WINDOW. QUALITÀ MOLTO ALTA (DEFAULT)

Visualizza le immagini utilizzando la campionatura bicubica. Questa modalità visualizza le immagini nella migliore qualità ed è particolarmente adatta per foto ad alta risoluzione rimpicciolite o con livelli di zoom molto bassi.

ALTA QUALITÀ

L'anti-aliasing è attivo, ma le immagini sono rese più velocemente e con una qualità minore.

A COLORI

Senza anti-aliasing, ma mostra comunque i singoli pixel. Questa impostazione può essere utile nel momento in cui si effettua uno zoom e si desidera distinguere chiaramente i singoli pixel.

CONTORNO CON PASSAGGI DI TRANSIZIONE.

È particolarmente utile per rilevare i diversi passaggi di una transizione. Le transizioni non sono supportate da MAGIX Web Designer. Tuttavia i file .xar importati possono contenere delle transizioni.

CONTORNO

Sono mostrati solo i contorni dell'oggetto. Questa funzione è utile per individuare e selezionare oggetti difficili da vedere a causa di altri oggetti posti davanti o dietro di essi.

C'è un controllo aggiuntivo che ti consente di eliminare il livellamento o l'effetto anti-aliasing su tutte le immagini le cui dimensioni vengono aumentate o zoomate. In altri termini, invece di un'immagine livellata, vedrai tutti i pixel quando effettui lo zoom. Apri la GALLERIA BITMAP , clicca con il tasto destro sull'immagine e seleziona "proprietà". Nella finestra di dialogo deseleziona la casella "Livella immagini ingrandite". Ora, indipendentemente dalla qualità di visualizzazione selezionata, l'immagine (e tutte le sue copie), non verrà più livellata nel momento in cui verrà ingrandita o zoomata. Nota: Se utilizzi l'effetto Metti a fuoco / Sfoca dello strumento fotografico, le immagini devono essere visualizzate con la massima qualità. Dunque, se pensi che la qualità di visualizzazione non sortisca più alcun effetto, certamente dipende dal fatto di aver messo a fuoco o sfuocato l'immagine con lo strumento fotografico.

287

288

Salvataggio ed esportazione delle foto Selezionando l'opzione SALVA si salverà sempre il file nativo . xar. Per salvare una foto come JPEG, PNG o in altri formati è necessario usare le opzioni per l'ESPORTAZIONE o il comando veloce Ctrl+Shift+E Sulla barra principale sono presrenti due icone che costituiscono comandi veloci per salvare la selezione di JPG o PNG. Questi si trovano nella barra flyout che appare quanto passi con il mouse sull'icona dell'esportazione HTML. Consigliamo di salvare le foto come JPEG (a volte chiamate JPG) dato che questo formato offre la migliore compatibilità e il miglior rapporto dimensione / qualità. Quando esporti un JPEG o PNG trovi delle IMPOSTAZIONI sulla finestra di salvataggio. Selezionandole si accede a tante opzioni avanzate per l'esportazione confrontando i diversi effetti che hanno anche per formati file alternativi come il PNG. Quando si esporta un immagine JPEG, viene visualizzata un'anteprima del dialogo dove è possibile effettuare diverse configurazioni per l'esportazione, confrontando i diversi effetti che hanno anche per formati file alternativi come il PNG. Il dialogo dell'anteprima di esportazione permette di regolare la dimensione, la risoluzione e la qualità del JPEG e permette anche di scegliere tra tre diversi tipi di formato per l'esportazione dei file. Il valore standard dovrebbe essere adatto in tutti i casi e basta quindi cliccare sul tasto Esportazione per salvare la foto. Da non dimenticare durante l'esportazione • •

Per prima cosa seleziona l'oggetto o gli oggetti che vuoi esportare La dimensione standard per l'esportazione dell'immagine corrisponde alla dimensione che vedi sullo schermo con uno zoom del 100%.

Qui viene descritto in dettaglio la finestra dell'anteprima esportazione.

(sulla pagina 358)di

Nota: puoi controllare la qualità del JPEG nella tabella Opzioni. Il valore consigliato e standard è 85%

www.magix.com

Gestione foto Il sistema JPEG è progettato di modo che un'impostazione di 85 sia il valore ottimale. Consigliamo di non salvare i file JPEG con qualità al 100%, dato che il risultato è praticamente identico al valore di 85%, ma con lo svantaggio che le dimensioni del file e quindi la memoria utilizzati sono molto più grandi

Quando si salva per l'uso sul web è possibile ridurre la qualità sotto l'85 per aumentare la velocità di visualizzazione della pagina. La finestra di anteprima mostra la qualità corrispondente ad ogni valore selezionato. Nota: è possibile effettuare ogni altro tipo di elaborazione sulla immagine esportata, per esempio per creare l'immagine nuovamente con nuove dimensioni. Ciò manterrà l'immagine master senza perdite e con tutte le modifiche apportate.

Esempio - come modificare le dimensioni di una foto e salvarla come nuovo JPEG Questo processo è molto semplice e veloce • •

• •

Trascina la tua foto su Web Designer (o in una pagina vuota o sopra la barra titoli per creare un nuovo documento) Puoi trascinare una delle maniglie d'angolo nel Selector oppure inserisci i valori di altezza e larghezza negli appositi campi della infobar. Controlla che le dimensioni delle immagini sia al 100%. Clicca su "Esporta selezione come JPG" sulla barra superiore. Inserisci un nome per il file. Clcca sul tasto IMPOSTAZIONI se vuoi controllare la compressione o clicca su SALVA

Per salvare ogni immagine come PNG segui lo stesso processo selezionando come tipo di file PNG.

Attributi dell'elaborazione foto Tutte le elaborazioni effettuate con l'uso dello STRUMENTO FOTOGRAFICO (sulla pagina 302), come le modifiche della luminosità, del contrasto, del colore, dei valori di messa a fuoco o sfocatura e persino le regolazioni più avanzate del livello, vengono salvate nella foto come Web Designer

289

290 Nello stesso modo in cui puoi modificare il colore di una forma o di una linea senza modificare la forma della sottolineatura, così gli attributi del Photo Tool modificano l'apparenza visibile della foto senza modificare l'immagine originale (questa elaborazione non distruttiva). Un altro modo di considerare la cosa è che MAGIX Web Designer salva solo una lista di elaborazioni applicate alla tua foto e tu puoi modificare, eliminare o aggiungere nuove elaborazioni. Puoi sempre recuperare la foto originale non modificata, ogni modifica della sua luminosità o delle sue dimensioni, persino dopo averla tagliata. Gli attributi possono essere copiati e incollati tra gli oggetti. Questo non va bene solo per gli attributi più comuni come il colore e lo spessore della linea, ma funziona anche con tutti gli attributi del PHOTO TOOL incluse le impostazioni dei Livelli. Ciò significa che puoi copiare facilmente tutte le ottimizzazioni applicate ad una foto a tutte le altre foto con la funzione copia / incolla. Questo riguarda anche tutti gli altri attributi della foto, come la larghezza ed il colore della linea, la colorazione della foto (colore continuo), le ombre, ecc; tutti gli attributi possono essere copiati da una foto all'altra utilizzando la stessa tecnQues

Modificare il contorno delle foto Puoi usare l'EDITOR FORMA per adattare la forma dei contorni della foto. Analogamente, puoi applicare i contorni per tutte le forme, ombre, etc. Utilizzando lo STRUMENTO EDITOR FORMApuoi tirare o spingere i lati della foto. Questo esempio ha anche un contorno nero e un'ombra leggera. Per ripristinare la forma rettangolare dell'immagine originale, seleziona il comando "Elimina ritaglio" nella modalità taglio della barra informazioni dello STRUMENTO FOTO (sulla pagina 302). Quando esegui l'elaborazione foto in questo modo, queste vengono trattate come qualsiasi normale forma vettoriale, che contiene un riempimento bitmap. Ecco perchè puoi utilizzare le normali funzioni di elaborazione delle linee e delle forme e naturalmente anche lo Strumento per aggiustare le maniglie (sulla pagina 292) per regolare dimensioni, angolo e posizione del "ripieno" della foto all'interno della forma.

www.magix.com

Gestione foto

Ritaglio foto Il modo più semplice per tagliare una foto è trascinarla su una delle maniglie intelligenti per aggiustare le foto (sulla pagina 292), che compare quando selezioni una foto usando lo strumento foto. Posiziona il cursore sopra una delle maniglie per visualizzare le informazioni di funzionamento. Per un controllo maggiore del taglio, seleziona il TASTO CLIP posto nella barra flyout dello STRUMENTO FOTO (sulla pagina 302), che ti permette ti regolare il rapporto delle pagine e un controllo numerico del taglio preciso. È disponibile anche un tasto per annullare l'azione e ripristinare l'immagine originale. Una caratteristica importante è che questa funzione di taglio è davvero dinamica, in altre parole, si tratta di un taglio non distruttivo e puoi aggiustare il bordo del taglio in seguito per rivelare delle parti nascoste della foto. Se vuoi davvero tagliare la foto rendi il taglio distruttivo in modo che che rimuova davvero le parti nascoste usando la funzione di Ottimizza foto (sulla pagina 295)

Colorazione delle foto Seleziona una foto qualsiasi, clicca sulla barra dei colori e scegli dal menu un colore cotone da applicare all'immagine. Cliccando la patch Luce Bianca e selezionando IMPOSTA COLORE CONTONE CHIARO ogni foto verrà visualizzata in bianco e nero. È chiamato contone perche è un tono continuo che va da nero a bianco.

291

292 Se clicchi sulla puoi selezionare tutti i colori come anche il contone chiaro o scuro. Oppure puoi utilizzare il COLOR EDITOR (Ctrl+E) e selezionare il colore che preferisci. Il menu a tendina in alto nel Color Editor controlla se elabori colori chiari o scuri. BARRA COLORI

Puoi ripristinare il colore originale di una foto cliccando sul pulsante tratteggiato "nessun colore" posto alla sinistra della barra dei colori e selezionando l'opzione "Ripristina colore". Se desideri colorare una foto all'interno di un gruppo, tieni premuto Ctrl e clicca per selezionarla ed applica il cotone come descritto sopra.

Modifica delle dimensioni, rotazione e posizionamento di una foto all'interno del suo frame La forma della foto Ă¨ un contorno completamente elaborabile. Quindi quando ritagli o modifichi il contorno della forma non ci saranno effetti sull'immagine contenuta. Le foto e le bitmap sono sempre contenute all'interno di una forma. Non solo Ă¨ possibile modificare la forma del contorno ma Ă¨ possibile modificare dimensioni, rotazione e posizione della foto all'interno della cornice, usando le maniglie di aggiustamento foto smart, che ti forniscono un modo semplice e veloce per eseguire le operazioni di elaborazione piĂš comuni.. Le maniglie si visualizzano in automatico ogni volta che selezioni una foto con lo strumento FOTO (sulla pagina 302).

www.magix.com

Gestione foto

Ad esempio, per scalare, ruotare e arrotondare l'immagine sulla sinistra, trascina sulle maniglie di aggiustamento corrispondenti. Se posizione il cursore su un punto, apparirà una piccola informazione. • • • • •

Per ruotare e scalare, trascina l'icona bianca circolare in alto a destra. Per spostare l'immagine all'interno della cornice, trascina l'icona a forma di manina in basso a sinistra. Per smussare gli angoli della cornice, trascina la maniglia arancione sull'angolo. Per ruotare tutta la cornice, trascina l'icona blu e circolare in alto a destra. Per scalare la cornice, trascina la maniglia in basso a sinistra.

Considera che, diversamente dalle maniglie molto simili a queste da comandare dello STRUMENTO DI RIEMPIMENTO , queste maniglie sono intelligenti, ossia limitano il movimento della foto nella forma, di modo che non risultino mai delle parti vuote/invisibili nella foto. Così, ad esempio, se sposti la foto verso sinistra, si impedisce che la foto venga spostata così tanto da non restare alcuna parte dell'immagine a destra. Per riportare la foto allo stato ottimale di adattamento rispetto alla cornice, esegui un doppio click sulla maniglia di rotazione/scalatura. Per centrare l'immagine nella sua cornice, esegui un doppio click sull'icona a forma di manina. Le maniglie sugli angoli della foto ti permettono di modificare la forma della cornice della foto. Queste operazioni sono intelligenti e l'immagine viene tagliata, scalata e spostata automaticamente, allo scopo di assicurare sempre che la nuova forma della cornice sia riempita completamente. Un doppio click su una maniglia qualsiasi posta ai bordi modifica la cornice per adattarla esattamente all'intera foto. Queste operazioni di foto intelligenti funzionano anche con foto di qualsiasi altra forma, non soltanto con foto rettangolari e, a differenza dello strumento di riempimento, funzionano anche con GRUPPI DI FOTO e CLIPVIEW. Per maggiore controllo sul taglio, usa lo STRUMENTO CLIP (sulla pagina 307).

293

294

Raddrizzamento dell'orizzonte

Utilizzando le maniglie intelligenti per aggiustare la foto, come descritto precedentemente, è semplice raddrizzare l'orizzonte di una foto inclinata. •

•

Clicca su una foto usando lo STRUMENTO FOTO. Questo visualizzerà le maniglie di aggiustamento, che ti permettono di scalare, ruotare e posizionare il riempimento all'interno della forma. Trascina sulle maniglie di rotazione per ruotare e scalare come desiderato.

Qui di seguito viene raffigurato un paesaggio (creato con la funzione panorama di Web Designer) che ha un proprio orizzonte inclinato.

Trascina la maniglia di aggiustamento (icona circolare) per ruotare e scalare la foto all'interno della cornice; si visualizza il grado di rotazione. Puoi anche riposizionare la foto all'interno della cornice usando l'icona a forma di "manina" per spostare la foto (in basso a sinistra).

www.magix.com

Gestione foto Le maniglie sugli angoli della foto ti permettono di modificare la forma della cornice della foto. Queste operazioni sono intelligenti e l'immagine viene tagliata, scalata e spostata automaticamente, allo scopo di assicurare sempre che la nuova forma della cornice sia riempita completamente. Un doppio click su una maniglia qualsiasi posta ai bordi modifica la cornice per adattarla esattamente all'intera foto. Per riportare la foto allo stato ottimale di adattamento rispetto alla cornice, esegui un doppio click sulla maniglia di rotazione/scalatura. Per centrare l'immagine nella sua cornice, esegui un doppio click sull'icona a forma di manina.

Visualizzazione di una foto in scala nella sua dimensione integrale Il tasto ZOOM 1:1 sulla barra informazioni dello strumento fotografico regola lo zoom in modo che l'immagine selezionata sia mostrata nella sua dimensione integrale che si ha quando ogni pixel dell'immagine è associtato ad ogni pixel dello schermo. Questa funzione è utile se desideri modificare un'immagine che è stata ridotta in scala sulla pagina ma che vuoi vedere nelle sue dimensioni integrali per poterci lavorare sopra.

Rendere una foto della sua dimensione integrale. Il tastoSCALA FOTO AL 100% sulla barra informazioni dello strumento fotografico prende la foto selezionata e la porta alla sua dimensione integrale sulla pagina. Per cui se la foto selezionata è ridotta a 500 pixel, ma l'originale importata era di 1000 pixel di larghezza, la foto sulla pagina verrà portata fino a 1000 pixel di larghezza. Quando lo zoom del documento e al 100% significa che ogni pixel dell'immagine corrisponde ad un pixel dello schermo.

Ottimizzazione delle foto e delle Bitmap Visto il costante aumento della risoluzione e delle dimensioni dei file JPEG delle videocamere digitali, se hai un documento contenente molte immagini, il file diventa velocemente molto grande. Per esempio un documento multipagina contenente 20 immagini JPEG con la massima risoluzione, ognuna di 5 mb, produrrebbe un file .xar di oltre 100 mb*. Inoltre queste foto spesso non necessitano una risoluzione così alta. Ridurre una foto fatta con una videocamera da 8 megapixel, a ad una larghezza di 2 pollici (5 cm) sulla pagina, produrrà un'immagine di circa 1500 dpi. Un'immagine ad alta risoluzione offre maggiore flessibilità per la stampa (e puoi zoomare o ingrandire alcune piccole parti della foto), ma si tratta di standard ben più alti di quelli necessari anche per la stampa commerciale della migliore qualità o per grafiche web o per produzioni HTML.

295

296 Se ritagli una piccola parte dell'immagine o tagli solo un parte delle foto, potrebbero esserci grandi parti nascoste dell'immagine fuori dall'area visibile. Se intendi apportare delle modifiche, questo "live crop" è una funzione utilissima, in quanto ti permette di annullare l'operazione di ritaglio, modificare le dimensioni, posizione e scala e l'immagine rimane sempre nitida. Ma per documenti già ultimati potrebbe essere necessario rimuove le parti invisibili.

L'immagine della farfalla tagliata ha ancora attaccata la foto. Tramite lo STRUMENTO DI puoi avere un'idea più chiara modificando le dimensioni del riempimento all'interno del contorno. Per cui le parti dell'immagine al di fuori della farfalla, saranno considerate superflue nella versione finale del documento.

RIEMPIMENTO

Clicca con il tasto destro su una foto e seleziona OTTIMIZZA FOTO oppure seleziona "STRUMENTI" > "OTTIMIZZA FOTO...".. Questa finestra di dialogo ha tre importanti funzioni • • •

Eliminazione parti invisibili di foto Riduzione della risoluzione delle foto Conversione PNG o della bitmap nei JPEG inseriti per ottimizzare le dimensioni del file.

Selezionando questa opzione di menu per qualsiasi bitmap, verrà mostrato il dialogo OTTIMIZZAZIONE FOTO .

www.magix.com

Gestione foto Per impostazione predefinita le impostazioni per immagini JPEG fanno in modo che la foto venga ottimizzata ad un JPEG a 96 dpi (normale risoluzione delle schermo) con le dimensioni che appaiono nella tua pagina. Queste sono le dimensione di probabilmente vorrai adottare per la tua pagina. Quando si ottimizzano immagini non JPEG, Web Designer decide automaticamente se sia meglio ottimizzare in favore di un PNG o di un JPEG a seconda della natura stessa dell'immagine. Puoi cliccare sul tasto IMPOSTAZIONI di questa finestra di dialogo se desideri cambiare delle impostazioni come il formato dell'immagine utilizzato per l'ottimizzazione, qualità del JPEG ecc.

Puoi modificare la risoluzione in utilizzo su questo dialogo, sia scegliendo le dimensioni fisiche che desideri per l'immagine ottimizzata (larghezza/altezza in pixel) sia inserendo un dip diverso (per es. 150 dpi se desideri una qualità adatta alla stampa). Se scegli l'opzione dpi, il valore che inserisci viene memorizzato e diventa il valore predefinito per la sessione corrente. Puoi anche mantenere la risoluzione corrente della foto scegliendo l'opzione CORRENTE dall'elenco PPI. Poui anche decidere di ottimizzare nel formato PNG (che produce immagini più grandi ma di qualità migliore per grafica e immagini di testo) oppure puoi modificare la qualità in uso per l'ottimizzazione JPEG (maggiore qualità significa JPEG di dimensioni maggiori). Se la tua foto è ritagliata, solo la parte visibile dell'immagine viene conservata nell'immagine ottimizzata.

297

298 La risoluzione di 150 dpi ha buoni risultati per la stampa anche se i migliori risultati si raggiungono con una risoluzione di 300dpi (la maggior parte delle persone non può riconoscere la differenza tra 150dpi e 300 dpi ma quest'ultima richiede più tempo e spazio in memoria). Nota: la qualità JPEG ottimale è 85%. Consigliamo di NON salvare i JPEG con una qualità del 100%: sono praticamente non distinguibili dai JPEG salvati al 85% ma occupano notevolmente più memoria e spazio di file. Attenzione: "OTTIMIZZA FOTO" è un'operazione distruttiva. Quando salvi il file le parti dell'immagine che sono state rimosse vengono perse e la risoluzione è modificata in modo permanente (ovviamente puoi annullare le modifiche mentre il file è aperto per l'elaborazione). Puoi ottimizzare foto multiple in una sola operazione se desideri che abbiano tutte lo stesso DPI. Seleziona la foto che vuoi ottimizzare e poi seleziona l'operazione OTTIMIZZA come descritto sopra. Se le tue foto hanno dimensioni diverse, la possibilità di ottimizzare in base alle dimensioni dei pixel non è attiva e devi solo scegliere il dpi necessario. Oppure puoi utilizzare la funzione STRUMENTI ->OTTIMIZZA TUTTE LE IMMAGINI per ottimizzare con una sola operazione tutte le immagini bitmap presenti nel tuo documento. Il processo di ottimizzazione convertirà immagini non JPEG di grandi dimensioni in immagini JPEG più piccole se decide che possano essere salvate ed esportate come JPEG con una perdita di qualità accettabile. Nota che dopo l'ottimizzazione la foto originale non ottimizzata e ora senza riferimento rimane nella GALLERIA BITMAP. Questo significa che si trova ancora nella memoria per cui i requisiti di memoria del tuo progetto non sono stati ridotti. Salva il progetto e ricarica dopo aver ottimizzato per eliminare le immagini originali di grandi dimensioni.

www.magix.com

Gestione foto

Conversione di oggetti o disegni in bitmap Facilmente puoi creare un bitmap da un oggetto, da parte del tuo disegno o da altri bitmap. I bitmap possono avere qualsiasi dimensione o risoluzione e possono contenere trasparenze. Puoi anche creare bitmap con un numero ridotto di colori, opzione adatta all'uso in Internet. Per creare un bitmap da oggetti: 1. Seleziona l'oggetto sulla pagina 2. Clicca con il stasto destro e scegli CREA COPIA BITMAP oppure CREA COPIA BITMAP

dal menu ARRANGE ("Ctrl+Shift+C"). 3. Nella casella della finestra di dialogo, seleziona la profondità del colore, le

dimensioni ed altre opzioni. Per ottenere la massima qualità, imposta la profondità del colore su "colore vero", o se vuoi che la trasparenza venga inclusa seleziona "colore vero + alpha" (trasparenza alpha è il termine tecnico). Puoi creare bitmap con meno colori selezionando una profondità di colore di 256 colori o meno. In questo modo puoi controllare il mix di colori e le opzioni della tavolozza. Queste opzioni sono descritte nella sezione dedicata ai bitmap di esportazione (sulla pagina 358). Nota che vengono creati sempre file PNG, dal momento che questo tipo di file è in grado di salvare la migliore qualità d'immagine. D'altra parte questi file richiedono una grande quantità di memoria con foto ad alta risoluzione e con una profondità di colore completa. Utilizza la funzione di ottimizzazione foto per convertire le immagini PNG in immagini JPEG integrate per ridurre le dimensioni del file.

Documenti fotografici A volte è utile lavorare su una foto sola, piuttosto che sugli "oggetti su una pagina". Questa modalità, in Web Designer, è definita "documento fotografico" o "modalità fotografica" ed il programma si comporta più come un editor fotografico tradizionale. Puoi creare un documento fotografico in diversi modi: • • •

Trascina un file fotografico dal tuo file explorer sulla barra dei titoli o degli strumenti di Web Designer Seleziona "File -> Apri" e seleziona un file fotografico Crea un documento fotografico vuoto selezionando "FILE -> NUOVO -> FOTO VUOTA"

I documenti fotografici sono caratterizzati dalle seguenti differenze di comportamento rispetto ai documenti tradizionali di Web Designer:

299

300 • •

• •

•

Non ci sono pagine bianche visibili. Infatti le dimensioni della pagina vengono regolate automaticamente ed adattate alla foto più altri oggetti da te aggiunti. I documenti fotografici hanno come impostazione standard una griglia da 1 pixel e l'opzione di allineamento griglia è attiva. Ciò permette di impostare in maniera precisissima aree di taglio o ritaglio. La tavola da disegno (l'area intorno alla foto) è più scura. In questo modo è facile distinguere ad un primo sguardo i documenti fotografici dai disegni. Lo zoom del documento è impostato in modo tale che la foto riempia la visualizzazione ed lo Strumento fotografico venga selezionato come strumento attuale. Trascinando altri file foto sopra una foto già esistente, si aggiunge una nuova foto al documento invece di sostituire l'immagine nella sua cornice. Non è stata modificata la dimensione delle immagini a 500 pixel durante l'importazione cosi come appaiono normalmente nei documenti, ma vengono importate 1:1; cosicché con lo zoom al 100% l'immagine verrà visualizzata nelle dimensioni reali. Le opzioni di livellamento pixel sono modificate. L'impostazione standard di visualizzazione selezionata è la modalità "Qualità molto alta", il meglio per le immagini le cui dimensioni vengono rimpicciolite o in cui lo zoom viene allargato. Inoltre il livellamento pixel viene disattivato quando si effettua lo zoom in, in modo tale che i singoli pixel siano visibili negli alti livelli di zoom.

In tutti gli altri casi, i documenti fotografici si comportano come normali documenti MAGIX Web Designer. Puoi utilizzare tutti i normali strumenti di disegno e di testo. Se vuoi creare un documento fotografico di una data misura puoi modificare le "tele" o le dimensioni delle pagine selezionando "STRUMENTI -> OPZIONI" ed il tabulatore "PAGINA" ed inserendo le dimensioni richieste.

Nei Documenti fotografici vengono attivati due comandi extra. I tasti AVANTI e INDIETRO permettono di passare dall'immagine precedente alla successiva nella cartella dalla quale l'immagine è stata aperta. L'immagine corrente viene chiusa e ti può venire richiesto di salvare il file.

Elaborazione di file fotografici Puoi utilizzare MAGIX Web Designer per modificare facilmente le tue foto JPEG e salvare il JPEG moficato. Diversamente dalla maggior parte degli editor foto puoi eseguire questa operazione più volte senza perdita di qualità anche se il JPEG è un formato con perdita. Questo è possibile perché MAGIX Web Designer è in grado di salvare le tue modifiche insieme alla foto originale senza perdita di dati. Ecco come funziona.

www.magix.com

Gestione foto Apri per prima cosa il JPEG tramite FILE->APRI, drag & drop; oppure nel Windows File Explorer clicca con il tasto destro del mouse e scegli MAGIX Web Designer dall'elenco "apri con". La foto viene aperta come un documento foto. Modifica la foto tramite gli strumenti fotografici come descritto sopra. Dopodiché se vai su FILE->SALVA (Ctrl+S), il file JPEG che hai caricato viene sovrascritto con l'immagine modificata. In ogni caso MAGIX Web Designer, per impostazione predefinita, salva la tua foto nel suo formato .xar originale. Questo file è inserito in un "master folder" accanto al file JPEG. Ha lo stesso nome del file fotografico ma con un'estensione .web. Il file .xar include le modifiche eseguite e naturalmente anche i dettagli di queste modifiche. In futuro, se carichi il file JPEG modificato per eseguire ulteriori modifiche, MAGIX Web Designer controllerà nella cartella master per vedere se per quella foto è disponibile un file .xar. In caso positivo il file .xar viene caricato al posto del JPEG e puoi continuare ad apportare modifiche dal punto in cui avevi smesso. Nel salvataggio successivo il file JPEG viene sovrascritto nuovamente e un file .xar aggiornato viene salvato nella cartella master Naturalmente se non vuoi sovrascrivere il file JPEG originale con le modifiche, puoi andare su FILE ->SALVA CON NOME , per salvare la foto modificata in un'altra destinazione; oppure puoi utilizzare i tanti strumenti di esportazione per esportare la foto in formati diversi. Per ottenere la foto originale dal file .web apri il file, vai sulla GALLERIA BITMAP e clicca con il tasto destro sulla foto e scegli l'opzione SALVA. Nella scheda di Elaborazione foto della finestra di dialogo "Strumenti" > "OPZIONI" puoi scegliere di modificare la modalità di salvataggio descritta sopra. Puoi decidere di non far salvare automaticamente un file .xar nella sotto cartella Master oppure puoi fare in modo che venga salvato al suo posto il file fotografico originale. Nota: se disattivi questa funzione di salvataggio, la foto originale andrà perduta.

301

302

Strumento Fotografico Introduzione Con lo strumento fotografico puoi ritagliare, regolare i livelli di luminosità, mettere a fuoco foto, persino immagini ad alta risoluzione, in modo diretto e molto rapido. Questo strumento fornisce: • • • • •

Ottimizzazione automatica in un clic (sulla pagina 306) delle tue foto; è particolarmente utile per immagini sbiadite e male illuminate. Regolazione manuale di luminosità, contrasto, saturazione del colore, temperatura di colore,sfocatura e la messa a fuoco di foto. Ritaglio immagini (sulla pagina 307). Si tratta di uno strumento "live", in modo che tu possa adattare e regolare il ritaglio in ogni momento. Clicca sulla funzione "Confronta" per comparare in modo veloce i cambiamenti con l'originale. Copia/incolla in modo semplice tutte le modifiche di ottimizzazione tra diverse immagini.

Tutte queste operazioni sono interattive e con aggiornamenti in tempo reale. Regolando questi valori, l'immagine viene aggiornata immediatamente. Anche questa operazione è non distruttiva, per cui l'immagine originale non viene alterata e ogni modifica puoi essere annullata.

Benefits strumento Foto Questo strumento ha 3 grandi vantaggi. 1. Non è distruttivo 2. Molto veloce anche per immagini molto grandi 3. Le elaborazioni non hanno bisogno di spazio in memoria.

Per maggiori informazioni sui vantaggi degli strumenti di elaborazione foto, vedi il capitolo Gestione foto.

Vediamo nel dettaglio i benefici Non-destructive significa che le modifiche non trasformano l'immagine originale. Puoi affinare o eliminare le modifiche e l'immagine originale rimane inalterata. Questa è la differenza rispetto alla maggior parte dei programmi di fotoritocco in cui una modifica fa un cambiamento permanente ai pixel della foto. In Web Designer puoi modificare le impostazioni tutte le volte che vuoi sicuro del fatto che non stai alterando i dati originali della foto.

www.magix.com

Strumento Fotografico Anche la funzione di taglio non è distruttiva (ecco perché è chiamata clip). Puoi ripristinare le aree tagliate e ridurre o allargare l’area di taglio in qualsiasi momento, anche dopo aver salvato un file. Il significato di speed è palese, ma per avere una buona dimostrazione della velocità ruota una foto a risoluzione molto alta. Con altri strumenti dovrai fornire un certo numero di gradi e poi aspettare il tempo necessario per completare la procedura. In MAGIX Web Designer puoi trascinare e ruotare un'immagine a risoluzione completa in tempo reale (o inserire un valore di rotazione) e usare la campionatura Bi-cubica ad alta qualità dell’immagine per assicurarti i risultati migliori. La dicitura no memory si riferisce al fatto che la maggior parte dei programmi di fotoritocco deve copiare in memoria una bitmap per offrire le opzioni di Annulla e di solito fa una copia ogni volta che ridimensioni o fai modifiche. Per le foto digitali grandi e ad alta risoluzione questo può significare che la richiesta della quantità di memoria per la modifica della foto sia molto elevata (una foto digitale tipica di 8 mb richiede 32 mb di memoria; dopo dieci modifiche la quantità di memoria necessaria arriva a 320 mb). MAGIX Web Designer non richiede memoria. Puoi fare tutte le modifiche che preferisci e fare altrettante copie della foto nel documento e lo spazio supplementare del file e la RAM aggiuntiva richiesta è quasi pari a zero. Infine, le immagini JPEG sono incluse nel file .xar nativo e non sono espanse in immagini raw mentre sono usate con altri strumenti grafici. Ciò significa avere una dimensione di file nativo che in genere è almeno 10 volte più piccola. Aggiungi questo alle copie che non usano memoria e alla caratteristica dell’applicazione in tempo reale descritta precedentemente e si possono ragionevolmente ottenere file 30 volte più piccoli di quelli ottenuti con altri strumenti grafici. E significa anche che sono molto più rapidi da gestire, salvare, processare e trasferire.

Utilizzo dello strumento di foto Per accedere agli STRUMENTI FOTOGRAFICI , muovi il mouse sull'icona della videocamera nella barra strumenti principale sulla parte sinistra della finestra. Appare così una barra a comparsa con delle icone per ogni foto disponibile.

Se ti trovi nello Strumento selettore puoi passare allo STRUMENTO FOTO cliccando due volte su una foto.

303

304

Funzioni fotografiche comuni I seguenti pulsanti sono disponibili sulla barra informazioni quando ti trovi negli strumenti fotografici di ottimizzazione, ritaglio, occhi rossi o di regolazione delle dimensioni con protezione dei contenuti.

Comandi per la rotazione di 90°

Le due icone di rotazione ruotano la foto o le foto selezionate di 90 gradi in senso antiorario o in senso orario.

Precedente & Successivo

Quando “apri” una foto usando MAGIX Web Designer la foto viene caricata in un nuovo Documento Foto perché Web Designer presume che desideri modificare od osservare la foto in sé piuttosto di usarla come componente di un'illustrazione o di altri documenti. Quando hai aperto una foto puoi usare i pulsanti “Precedente” e “Successivo” sulla infobar dello Strumento Foto per chiudere il documento della foto corrente e per aprire la foto successiva (o precedente) nella stessa cartella della foto corrente. Permette di navigare tra le foto di una cartella, senza doverle aprire e chiudere tutte. Se non hai ancora salvato qualche modifica alla foto, ti verrà chiesto se desideri salvare i cambiamenti quando clicchi su precedente o successivo. Per ulteriori dettagli, consulta il capitolo Documenti fotografici (sulla pagina 299).

Zoom 1:1 Seleziona una foto e clicca sul pulsante Zoom 1:1. Il fattore dello zoom per il documento è regolato in modo da vedere la foto selezionata a 1:1 (1 pixel della foto è uguale 1 pixel sullo schermo). Usa questa opzione se desideri lavorare su una foto a dimensioni piene in un documento in cui hai ridotto la foto.

Scala foto al 100% La funzione SCALA FOTO AL 100% porta la foto selezionata alla sua dimensione integrale.

www.magix.com

Strumento Fotografico Per cui se la foto selezionata è ridotta a 500 pixel, ma l'originale importata era di 1000 pixel di larghezza, la foto sulla pagina verrà portata fino a 1000 pixel di larghezza. Quando lo zoom del documento e al 100% significa che ogni pixel dell'immagine corrisponde ad un pixel dello schermo.

Strumento di ottimizzazione Clicca sull'icona della videocamera per aprire lo STRUMENTO DI OTTIMIZZAZIONE

Con lo strumento FOTO puoi ritagliare, regolare i livelli di luminosità, mettere a fuoco foto, persino immagini ad alta risoluzione, in modo diretto e molto rapido. Questo strumento fornisce: • • • • • •

Ottimizzazione automatica in un click (sulla pagina 306) delle tue foto; è particolarmente utile per immagini sbiadite e male illuminate. Regola manualmente la luminosità, il contrasto, la saturazione del colore, la sfocatura e la messa a fuoco di foto. Ritaglio immagini (sulla pagina 307). Si tratta di uno strumento "live", in modo che tu possa adattare e regolare il ritaglio in ogni momento. Correzione del colore e del bilanciamento del bianco. Clicca sulla funzione "Confronta" per comparare in modo veloce i cambiamenti con l'originale. Copia/incolla in modo semplice tutte le modifiche di ottimizzazione tra diverse immagini.

I primi sei tasti della barra informazioni posti sulla sinistra (non mostrati sopra) sono comuni a tutti gli strumenti e sono descritti sopra (sulla pagina 303)

Ottimizzazione automatica Luminosità Contrasto Saturazione colore Temperatura del colore Controllo tonalità

305

306 Sfuoca / Metti a fuoco Confronta con l'originale Con questo strumento puoi regolare luminosità, contrasto, saturazione, temperatura, tonalità e sfocatura/messa a fuoco. È possibile inserire i valori direttamente nel campo di testo o usare lo slider nel pop-up per regolare i valori.

Comandi del regolatore pop-up I regolatori pop-up possono essere utilizzati in uno o due modi:

1. Clicca e rilascia la freccia di po-up. Ora il comando a cursore resta sullo schermo

e ti permette di regolare i valori tutte le volte che desideri trascinando il cursore. In alternativa, se ti soffermi con il mouse sul cursore, la rotellina può essere utilizzata per applicare regolazioni minime. Cliccando su un'altra area del documento il cursore scompare. 2. Oppure puoi cliccare e tenere premuto il testo del mouse e trascinare sulla barra del cursore per regolare il valore. Quando rilasci il tasto del mouse, il pop-up si dissolve. Questo è un modo più rapido e diretto in quanto per regolare i valori basta soltanto di cliccare e rilasciare.

Ottimizzazione automatica Cliccando sul pulsante di "OTTIMIZZAZIONE" puoi analizzare la luminosità generale ed il contrasto dell'immagine e regolare automaticamente i valori di ottimizzazione per ottenere la migliore immagine possibile. È particolarmente efficace con immagini male illuminate (oscure). Dopo aver applicato l'ottimizzazione automatica ad una foto puoi regolare i valori scelti, utilizzando i comandi posti alla destra del pulsante di "ottimizzazione". Cliccando sul pulsante "CONFRONTA" potrai ripristinare l'originale, con un ulteriore click potrai ripristinare gli ultimi valori di ottimizzazione.

www.magix.com

Strumento Fotografico

Luminosità/Contrasto/Temperatura/Saturazione del colore/Tonalità Luminosità

Contrasto

Saturazione

Temperatura del colore

Regolando questi valori, l'immagine viene modificata. La saturazione modifica l'intensità del colore. Nell'impostazione minima di -100, l'immagine diventa un'immagine in bianco e nero. Il comando che regola la Temperatura del colore assegna all'immagine dei colori più caldi. Il comando che regola la tonalità applica una sfumatura all'immagine e ti permette di controllare l'intensità del colore selezionato. Tonalità Il regolatore di tonalità controlla l'intensità del colore selezionato.

Sfocatura/Messa a fuoco

Questo comando sfoca le immagini, se viene regolato al di sotto dello zero e mette a fuoco le immagini, se è sopra lo 0. Per la messa a fuoco si raccomanda che vengano usati solo piccoli valori, e solo su immagini le cui dimensioni siano state ridotte notevolmente.

Confronta e ripristina l'originale Il pulsante CONFRONTA può essere usato per ripristinare tutti i valori dello strumento OTTIMIZZAZIONE , riportando la foto al suo stato originale. Premendo il pulsante confronta una seconda volta, i valori precedenti verranno ristabiliti. Pertanto puoi utilizzare il pulsante confronta per passare dalla tua foto modificata alla foto originale e viceversa in modo da poter vedere gli effetti delle modifiche effettuate. Dal momento che tutte le ottimizzazioni e le modifiche dei livelli sono non distruttive, premendo il pulsante "confronta" puoi eliminare in modo semplice gli attributi di ottimizzazione, ripristinando così l'immagine originale. Il pulsante confronta può essere utilizzato in ogni momento dopo che un'immagine è stata modificata.

307

308

Taglio o ritaglio di immagini Il modo più semplice per tagliare una foto è quello di trascinare il mouse lungo la foto stessa con lo STRUMENTO DI OTTIMIZZAZIONE selezionato. Il taglio viene eseguito non appena il mouse viene rilasciato. La foto tagliata che risulta da questa operazione presenta delle maniglie per il taglio attraverso cui è possibile regolare il margini.

Questa operazione è "non distruttiva" in quanto, dopo aver tagliato, è possibile sia regolare la zona di taglio che annullare l'operazione e ripristinare l'immagine. Questo processo regola i contorni dell'immagine ma l'intera foto resta compresa nel contorno rettangolare. Per questo motivo viene chiamato ritaglio benché abbia lo stesso scopo dello Strumento di Taglio

Strumento ritaglio In alternativa puoi inserire lo STRUMENTO RITAGLIO selezionando l'icona Ritaglio nella barra informazioni dello Strumento Foto. In questo modo ottieni una serie di opzioni di ritaglio aggiuntive. Puoi inserire valori di pixel precisi e selezionare diversi rapporti di taglio. Per il taglio interattivo ed altre opzioni che riguardano il formato dell'immagine, inserisci la MODALITÀ RITAGLIO attraverso il tasto STRUMENTO RITAGLIO . In virtù di ciò la barra informazioni ha il seguente aspetto:

Trascinando il ritaglio sopra la fotografia, il rettangolo di taglio viene selezionato. • • •

Puoi regolare l'area trascinando l'angolo o le maniglie laterali Puoi spostare l'area trascinando all'interno dell'area di taglio Seleziona il pulsante di TAGLIO o effettua un doppio click all'interno dell'area per eseguire l'operazione di taglio.

www.magix.com

Strumento Fotografico

Puoi verificare se una foto è stata tagliata controllando la barra di stato che la descrive come una "foto tagliata".

Annulla Premi il pulsante "ANNULLA" , o clicca al di fuori della zona di taglio contrassegnata per annullare l'attuale rettangolo di taglio.

Regola dei terzi C’è una regola pratica che facilita la composizione di molte fotografie ed è chiamata “la regola dei terzi”. In breve, significa disporre gli oggetti chiave nelle foto suddividendo l'immagine in terzi. Per esempio spesso è meglio posizionare l'orizzonte a un terzo dell'immagine partendo dall'alto piuttosto che metterlo al centro. Quando trascini un’area di inquadratura attraverso la foto, vengono visualizzate delle linee che suddividono in terzi l’immagine per aiutarti a posizionare gli oggetti.

Annulla taglio Premi il pulsante ANNULLA TAGLIO dopo aver selezionato la foto tagliata per ripristinare la foto tagliata. In questo modo ripristini il rettangolo di taglio che puoi regolare o annullare cliccando all'esterno. Il pulsante Annulla taglio nello Strumento ritaglio modifica il contorno di ogni foto tagliata e delle forme createsi arbitrariamente che contengono un riempimento bitmap, nel contorno rettangolare della foto completa o della bitmap usata come riempimento. È possibile che si debba selezionare il pulsante "Cancella" per cancellare il rettangolo di taglio (oppure clicca al di fuori del rettangolo).

309

310

Regolazione dell'area clip Dato che il tasto di un-clip ripristina il rettangolo della clip (che mostra la parte esterna più in chiaro), puoi fare facilmente le regolazioni di precisione a una foto bloccata. Seleziona la foto, premi il tasto un-clip e regola i lati del rettangolo della clip quanto serve. Clicca due volte all'interno della foto per riattivare la clip.

Larghezza / Altezza Dopo aver disegnato un rettangolo di taglio, puoi inserire i valori direttamente nei campi destinati alla larghezza ed all'altezza sulla barra delle informazioni per regolare le esatte dimensioni del rettangolo di taglio.

Conserva proporzioni pagina Seleziona la casella di controllo "CONSERVA PROPORZIONE PAGINA" per conservare una proporzione pagina ragionevole del rettangolo di taglio durante il trascinamento. I pulsanti radio posti a destra della casella di controllo determinano la proporzione pagina utilizzata. Seleziona "ATTUALE" per conservare la proporzione della foto prima del taglio. Tieni conto del fatto che il rettangolo di controllo modifica automaticamente il suo orientamento tra formato orizzontale e verticale, nel momento in cui trascini un angolo del rettangolo. Se dunque lo trascini lateralmente, l'area viene creata in formato orizzontale. Se lo trascini più verso il basso viene creato in formato verticale. Sono disponibili le comuni proporzioni pagina: 4:3 (per la maggior parte delle camere digitali e i televisori e monitor di computer di vecchia generazione), 3:2 (per le camere dei film tradizionali e fotocamere reflex digitali) e 16:9 (per i televisori widescreen). Premendo il tasto Ctrl durante il trascinamento puoi disattivare il blocco della proporzione pagina. Se al contrario trascini (o regoli) un rettangolo di taglio senza aver attivato il blocco di proporzione pagina, premendo il tasto "Ctrl" bloccherai la proporzione impiegando l'ultima proporzione selezionata. Allo stesso modo, se attivi la proporzione pagina e premi "Ctrl", il blocco proporzione pagina verrà temporaneamente disattivato.

Usare la funzione clip nelle fotografie. Nella modalità foto, c’è una griglia da un pixel applicata alla foto (quando è a 96dpi, la risoluzione predefinita) e il rettangolo della clip si aggancia a questa griglia. Ciò rende molto facile ottenere il clipping esatto dei pixel. Per un allineamento più accurato o esatto dei pixel, è meglio operare in modalità foto e usare lo zoom in modo da poter vedere chiaramente i pixel. Per ulteriori dettagli consulta il capitolo Documenti fotografici (sulla pagina 299).

www.magix.com

Strumento Fotografico

Note relative al Photo Tool 1. Puoi selezionare diverse foto usando gli STRUMENTI FOTOGRAFICI semplicemente

cliccando su una di queste. Funziona amche con foto all'interno di gruppi 2. Cliccando e trascinando una foto con lo STRUMENTO DI OTTIMIZZAZIONE , avrà

5. 6.

inizio il taglio della foto la quale hai cominciato a trascinare. Oppure, se cominci a trascinare dallo sfondo, il taglio verrà applicato alla prima foto che verrà toccata dall'operazione di trascinamento. Il pulsante ELIMINA RITAGLIO nello STRUMENTO RITAGLIO modifica il contorno di ogni foto tagliata e delle forme createsi arbitrariamente che contengono un riempimento bitmap, nel contorno rettangolare della foto completa o del bitmap usato come riempimento. Potrebbe essere necessario selezionare il pulsante Cancella per cancellare il rettangolo di ritaglio Tutte le modifiche applicate alle foto possono essere annullate. Diversamente dai normali editor foto o pixel, l'immagine originale non viene alterata fino all'operazione di ottimizzazione che rende permanenti le modifiche applicate. Ciò significa che puoi fare tante modifiche, come vuoi e quando vuoi, salvare e caricare i file .xar/.web, quando vuoi, senza che l'immagine perda qualità (tutte le operazioni di modifica sono non distruttive e senza perdite) o che il file aumenti di dimensioni. Tutte le opzioni dello STRUMENTO FOTO, incluso il controllo dei livelli, operano sugli oggetti riempiti con bitmap ed anche su foto singole. Se apri una foto con MAGIX Web Designer (con "FILE" ->"APRI" ) questa viene aperta come un Documento fotografico. Dopo aver apportato delle modifiche, puoi sovrascrivere il tuo file fotografico tramite "FILE" ->"SALVA" ("Ctrl+S"). Un file .web o .xar viene salvato in un "master folder" accanto alla foto modificata, che contiene la foto originale e le modifiche apportate. Per maggiori dettagli vedi il capitolo sull'uso delle foto.

311

312

Barre di Navigazione La maggior parte dei siti web ha una brarra di navigazione, orizzontale o verticale dalla quale si può accedere a tutte le pagine importanti del sito.

MAGIX Web Designer include un supporto speciale per le barre di navigazione (abbreviate in Navbar) che permette in modo semplice di aggiungere, modificare e cancellare i tasti. I tasti di una barra di navigazione possono regolare la loro larghezza per adattarsi automaticamente alle etichette e vengono riposizionate automaticamente dopo ogni modifica che hai apportato. Puoi inserire anche dei menu a tendina e dei sottomenu e decidere di avere dei tasti che vengono aggiunti automaticamente mentre aggiungi e cancelli delle pagine. Gli utenti più esperti possono creare delle barre personalizzate dai design dei tasti e modificare i design utilizzati in una navbar già esistente e applicarne di nuovi lungo tutta la barra.

Utilizzo di modelli per barre di navigazione La galleria desing contiene una vasta gamma di modelli per barre di navigazione. Ci sino sia barre orizzontali che verticali totalmente personalizzabili. Trascina e rilascia una barra dalla galleria e posizionala nella tua pagina. Oppure sostituisci una barra già esistente rilasciandone una nuova sopra di essa. La nuova barra acquisisce tutti i pulsanti, link e menu di quella che sostituisce. Quando rilasci una barra ti verrà richiesto di accordare lo schema colori del documento se essa non è dotata dello stesso. Puoi utilizzare la funzione di sostituzione colore; il tutto senza che sia necessario scomporre la barra negli oggetti che la compongono. Selezionala e clicca su un colore sulla barra colori, oppure apri il color editor e scegli il colore dall'elenco a tendina che appare.

www.magix.com

Barre di Navigazione Vedi la sezione Schemi di colori tema (sulla pagina 176) per maggiori informazioni sulla modifica di colori tema. Consulta inoltre la sezione Sostituzione colori (sulla pagina 179) per vedere come personalizzare i colori in modo semplice. Ovviamente è possibile creare barre di navigazione personalizzate partendo da qualsiasi tipo di pulsante. Vedi la sezione seguente ui questo stesso capitolo.

Dialogo delle proprietà della barra di navigazione Il miglior modo per modificare etichette, link e altri attributi di una barra di navigazione e per aggiungere o rimuovere dei pulsanti, è utilizzare la finestra di dialogo delle proprietà della barra di navigazione. Clicca due volte su una barra per visualizzare la finestra di dialogo o cliccaci sopra con il tasto destro e scegli MODIFICA BARRA DI NAVIGAZIONE dal menu contestuale.

La metà superiore del dialogo permette di impostare diverse proprietà della navbar. La metà inferiore permette di aggiungere e rimuovere pulsanti e menu e di modificare le etichette di ogni tasto e voce del menu.

313

314

Orientamento Decidi se posizionare la barra orizzontalmente o in verticale. Nel caso di navbar verticali è consigliato avere tasti tutti della stessa larghezza (la larghezza del tasto più largo) in modo da ottenere una barra rettangolare. Vedi l'opzione sotto "ADATTA TUTTI I TASTI ALL'ETICHETTA PIÙ LARGA " che controlla questa funzione.

Giustifica Decidi come vuoi che reagisca la barra quando cambia la sua lunghezza mentre modifichi delle etichette o aggiungi/rimuovi dei pulsanti. Un barra orizzontale GIUSTIFICATO A SINISTRA si espanderà verso destra se aggiungi più tasti o allunghi le etichette. Mentre il margine sinitro della barra rimane nella stessa posizione. Allo stesso modo una barra GIUSTIFICATO A DESTRA mantiene il suo margine destro nello stesso punto e si allarga verso sinistra. Una barra GIUSTIFICATO AL CENTRO si allarga a destra e sinistra nella stessa misura. Scegli l'opzione centrata se, per esempio, desideri una navbar centrata sulla parte superiore della pagina. Per quanto riguarda le barre verticali le opzioni di giustificazione sono in alto, al centro, in basso. Come per le barre orizzontali, l'impostazione determina se la barra si allarga verso l'alto (in basso), verso il basso (in alto) o in entrambe le direzioni (al centro) quando vengono aggiunti dei pulsanti.

Adatta la larghezza dei pulsanti ai loro testi Attiva questa opzione se desideri che i pulsanti siano elastici in modo che possano crescere o restringersi come necessario perché siano adatti al testo dell'etichetta applicato al pulsante. Se questa opzione non è attiva, i tasti non cambieranno dimensione e di conseguenza un'etichetta troppo lunga per il tasto si espanderà oltre i suoi margini.

Stessa larghezza per tutti i pulsanti Questa funziona solo se l'opzione 'Adatta la larghezza dei pulsanti ai loro testi' è attiva. Seleziona questa opzione per rendere tutti i tasti della larghezza del tasto più lago. Per le barre verticali questa opzione è sempre consigliata per ottenere una barra rettangolare. Per quanto riguarda quelle orizzontali, la barra appare più ordinata se i tasti hanno tutti la stessa misura; questo però richiede più spazio e quindi potrebbe non essere possibile inserire tanti pulsanti quando questa opzione è attiva.

Spaziatura pulsanti: Qui puoi scegliere di inserire uno spazio tra ogni pulsante di modo che nella barra orizzontale entrino a contatto l'uno con l'altro. Inserisci il numero di pixel che desideri e vedi subito il risultato sulla tela.

www.magix.com

Barre di Navigazione

Barra di Navigazione del sito Questa è un'importante opzione della FINESTRA DI DIALOGO DELLA BARRA DI NAVIGAZIONE che attiva un collegamento automatico per cui link e pulsanti sono aggiunti sulla barra mentre aggiungi delle pagine. E tutte le modifiche che effettui alla barra si riflettono su ogni pagina del sito, non appena chiudi il dialogo della navbar. Generalmente questa opzione viene attivata solo se si desidera che la barra di navigazione appaia su tutte le pagine del sito. Puoi comunque cancellare la barra da ogni pagina manualmente. La barra di navigazione del sito è utile anche per "ripopolare" gli elementi del menu di un singolo pulsante di navigazione dopo averlo convertito da una barra di navigazione con pulsanti multipli. Vedi Barre di navigazione con pulsante singolo (sulla pagina 317) per maggiori informazioni.

Spostare e trasformare una barra di navigazione di un sito Se sposti una barra di navigazione su una pagina, questa verrà spostata di posizione su tutte le altre pagine su cui compare. Allo stesso modo, se la ingrandisci o la riduci tramite lo STRUMENTO SELETTORE, la stessa trasformazione è applicata su tutte le copie della barra presenti sulle altre pagine. Utilizzando lo STRUMENTO SELETTORE non sono supportate altre trasformazioni della navbar (rotazione, inclinazione, modifiche in scala delle dimensioni)

Linking automatico delle pagine Oggi volta che aggiungi una nuova pagina al tuo sito, viene aggiunto un link relativo a quella pagina sulla barra di navigazione e alla nuova pagina verrà fornita di una copia della barra se non dovesse essere già presente. Se la barra ha un pulsante non utilizzato il primo di questo tipo viene collegato alla nuova pagina. Se tutti i pulsanti sono stati già collegati, un nuovo tasto viene aggiunto automaticamente sulla parte finale della barra e viene collegato alla nuova pagina. In entrambi i casi, l'etichetta del tasto viene modificata perché corrisponda al nome della nuova pagina, se ha un nome, o a "Nuova pagina", altrimenti. Di solito è pratico modificare immediatamente questa nuova etichetta nel dialogo della navbar. Quando cancelli una pagina dal tuo sito, il tasto di collegamento per questa pagina posto sulla barra di navigazione viene cancellato automaticamente da tutte le pagine del sito.

Attivare e disattivare le barre di navigazione del sito. Se disattivi l'opzione della barra di navigazione del sito nel dialogo della navbar, essa verrà disattivata su tutte le copie della barra presenti sulle pagine del sito web.

315

316

Cancellare una barra di navigazione da una pagina Se desideri che su una pagina in particolare non compaia la barra di navigazione, puoi cliccarci sopra su quella pagina per selezionarla e premere Canc. Ti verrà richiesto se desideri cancellare quella barra solo da quella pagina o anche da tutte le altre. Tuttavia se elimini una barra da una o più pagine e successivamente disattivi l'opzione della barra di navigazione del sito (per eseguire delle modifiche su dei tasti che non puoi eseguire se l'opzione è attiva) e poi la riattivi, la barra verrà aggiunta automaticamente a tutte le pagine del tuo sito che non ce l'hanno.

Modelli e barre di navigazione per siti Tutti i singoli modelli di pagina nella GALLERIA PROGETTI hanno delle navbar già impostate per essere delle barre di navigazione quando vengono caricate dalla galleria per iniziare un nuovo documento con un sito web. In questo modo puoi costruire un piccolo sito web con tutte le pagine collegate alla barra senza dover aggiungere dei tasti o link di pagine manualmente. Allo stesso modo tutti i modelli di siti web hanno le barre di navigazione già attive. Se desideri che non siano attive, disattiva l'opzione tramite il DIALOGO DELA NAVBAR . Le navbar autonome presentate con ogni tema nella galleria, non hanno l'opzione di navigazione del sito attiva come impostazione predefinita. Questo è dovuto al fatto che un utente che aggiunge delle barre manualmente, difficilmente desidera che quella barra compaia su ogni pagina del sito con un link per ogni pagina. In ogni caso l'opzione può essere attivata facilmente dal dialogo della navbar, se necessario.

Altri punti da tener presente Se cancelli un tasto che collega ad una delle tue pagine, o cambi il suo link per modicare il collegamento, non è necessaria nessuna azione particolare per ripristinare un link di un pulsante che colleghi alla pagina. Si presume che tu abbia deciso di non volere un link diretto per quella pagina sulla tua barra di navigazione. Vengono creati nuovi link e tasti solo quando viene aggiunta una pagina.

www.magix.com

Barre di Navigazione

Barre di navigazione con un solo pulsante I siti progettati per essere visualizzati su piccoli dispositivi portatili dispongono di poco spazio per barre di navigazione orizzontali o verticali. Una soluzione è l'utilizzo di barre di navigazione con un solo pulsante ed un menu, indipendentemente dal numero di pagine che compongono il sito.

Barra di navigazione verticale con un solo pulsante

Per trasformare una barra strumenti tradizionale in una con un solo pulsante, basta aprire la finestra di dialogo delle PROPRIETÀ DELLA BARRA DI NAVIGAZIONE (doppio click sulla barra di navigazione) e cancellare tutti i pulsanti tranne uno. Elimina inoltre, dal pulsante, anche il link (clicca sul campo dell'URL accanto al pulsante nella finestra di dialogo e seleziona NESSUNA AZIONE nella finestra di dialogo del link). Ora puoi iniziare ad inserire manualmente voci di menu nella barra di navigazione oppure in modo automatico. Per aggiungere i link automaticamente, attiva l'opzione BARRA DI NAVIGAZIONE DEL SITO nella finestra di dialogo (oppure disattivala e riattivala se già in funzione). Il menu si riempirà di link per ogni pagina del tuo sito. Modifica i nomi di ogni voce se desideri differenziarli dai nomi delle pagine. Nella GALLERIA DESIGN alla voce ELEMENTI DI PAGINA & WIDGET" > "BARRE DI è presente una selezione di diversi stili di barre di navigazione. Ognuno dei temi alla voce Temi per siti web (Generale) dispongono dei loro stili di barre di navigazione. Cambia lo stile della tua barra di navigazione trascinandone uno nuovo dalla Galleria Design. NAVIGAZIONE"

IMPORTANTE: in alcune barre di navigazione lo stile del primo e dell'ultimo pulsante si differenzia dal resto dei pulsanti. Queste barre di navigazione sono adatte per la creazione di barre con un solo pulsante pertanto nella finestra di dialogo delle

317

318 Proprietà della barra di navigazione non è possibile cancellare i pulsanti a destra e sinistra per lasciarne solo uno. Scegli uno stile in cui tutti i pulsanti nella barra hanno lo stesso aspetto. Tutti i pulsanti uguali - adatto per una barra di navigazione con un solo pulsante. Diversi design per pulsanti finali - non adatto per un barra di navigazione con un solo pulsante.

Per riconvertire una barra di navigazione con un solo pulsante ad una con più pulsanti, basta aggiungerne di nuovi e cancellare le voci di menu dal primo pulsante se non necessarie.

Pulsanti & menu Modifica le etichette dei pulsanti, i link e altri loro attributi tramite la tavola e i comandi ad albero nella parte inferiore del DIALOGO DELLA NAVBAR . Ogni riga della tabella corrisponde a un pulsante nella barra o ad una voce di un menu sotto uno dei pulsanti.

Aggiungere & modificare pulsanti Per aggiungere un pulsante clicca due volte nella prima colonna alla voce "Doppio clic per aggiungere un pulsante". Viene aggiunta una nuova riga sotto la riga dell'ultimo tasto. Oppure clicca su AGGIUNGI in fondo al dialogo, per aggiungere un tasto che segua quello selezionato. Puoi cominciare subito ad apportare le modifiche sull'etichetta del nuovo pulsante. Premi indietro per completare la modifica oppure clicca fuori dall'etichetta. Puoi modificare un pulsante cliccando sulla riga opportuna per selezionarlo e poi cliccando nuovamente nella prima prima colonna per iniziare a modificare dell'etichetta. Per inserire il link su un tasto, clicca due volte sul campo URL, oppure, se la riga è già selezionata, cliccaci sopra solo una volta. Compare così il DIALOGO DELLE PROPRIETÀ WEB . Dovrebbe esserti familiare in quanto è lo stesso dialogo di link (sulla pagina 243)

www.magix.com

Barre di Navigazione che utilizzi per aggiungere altri link alla tua pagina; di conseguenza hai a disposizione le stesse opzioni. Alcune opzioni non sono attive perché non applicabili alla navbar e ai menu dei link, come per esempio l'opzione foto popup che funziona solo se applicata su un'immagine. Inoltre puoi impostare il testo del tooltip per ogni tasto utilizzando la terza colonna. Modifica il testo allo stesso modo procedendo come per le etichette. Nel sito web esportato, quando il cursore del mouse è sopra il pulsante o la voce del menu, il testo inserito appare come un piccolo tootip popup.

Aggiungere menu e sottomenu Nella prima prima colonna (di etichette) noterai che è presente l'icona di un più. posta a sinistra di ogni etichetta. Si tratta di un comando ad albero (tree control) e se clicchi sull'icona vicino all'etichetta di un pulsante, espande quel nodo permettendoti di aggiungere un menu a quel tasto. Clicca sul testo DOPPIO CLIC PER AGGIUNGERE VOCE DI MENU posto sotto il tasto per aggiungere un menu. Oppure clicca su AGGIUNGI in fondo al dialogo per aggiungere una voce di menu sotto l'elemento selezionato. Visualizza una nuova riga nella tabella per ogni voce di menu che aggiungi. Imposti etichetta, link e tooltip per ogni voce di menu come hai già fatto per i pulsanti. Inoltre, puoi aggiungere dei sottomenu a qualsiasi menu allo stesso modo: espandendo per prima cosa il nodo del menu di entrata di un albero.

Separatori di menu Puoi aggiungere un separatore nel tuo menu cliccando il tasto AGGIUNGI SEPARATORE posto in fonfo al dialogo. Il separatore è aggiunto di seguito alla voce selezionata. I separatori consentono di raggruppare visivamente gli elementi correlati nel menu.

319

320

Stili del menu Clicca sul tasto STILE DI MENU... per aprire il DIALOGO DELLO STILE DEL MENU . Questo dialogo ti permette di modificare l'aspetto dei menu della tua navbar.

Font Scegli un font da utilizzare per il testo dei menu. Sono elencati solo i font sicuri per il web, che sono i caratteri di cui dovrebbero disporre tutti i visitatori del tuo sito. Ă&#x2C6; presente anche un'opzione per rendere il font in grassetto e modificarne le dimensioni. NOTA: questa funzione modifica solo i font utilizzati per i menu ma non quelli delle etichette dei pulsanti. Per modificare il font dell'etichetta dei pulsanti vedi la sezione apposita piĂš avanti in questo capitolo. Direzione: Scegli la direzione verso la quale si devono aprire i menu. Per le barre di navigazione orizzontali di solito si preferisce l'apertura verso il basso e per le barre verticali a destra o a sinistra a seconda della posizione della barra sulla pagina.

www.magix.com

Barre di Navigazione Spazio: Attraverso questa impostazione puoi aggiungere dello spazio tra le voci del tuo menu, separandole l'una dall'altra e ingrandendo quindi il menu. Bordo Aggiungi un bordo ai riquadri dei menu inserendo una larghezza in pixel. Animazione Per impostazione predefinita, i menu si apriranno immediatamente. ´Qui puoi decidere di far animare il menu mentre si apre. Trasparenza Puoi rendere i menu semitrasparenti in modo che la pagina sia visibile attraverso il contorni dei menu. Inserisci in percentuale il livello di trasparenza che desideri. Offset orizzontale/offset verticale Puoi compensare i contorni del menu orizzontalmente o verticalmente dai pulsanti. Inserisci il numero di pixel di offset necessari.

Aggiornare la navbar su tutte le pagine. Come descritto sopra se l'opzione BARRA DI NAVIGAZIONE DEL SITO è attiva per una navabr, tutti le modifiche che apporti a quella barra, inclusa la posizione della barra nella pagina, vengono applicate automaticamente a tutte le altre pagine. In ogni caso se l'opzione non è attiva, dovrai utilizzare l'operazione per copiare le modifiche sulla barra della pagina corrente, su tutte le altre pagine. Nota che verranno aggiornati tutti gli altri oggetti ripetuti della pagina come righe a piè di pagina o loghi, utilizzando la pagina corrente come fonte per l'aggiornamento. Per maggiori informazioni sugli oggetti vedi il capitolo Gestione oggetti.

ORDINA ->AGGIORNA OGGETTI RIPETUTI

321

322

Modifiche non possibili sulla tela. Puoi modificare le etichette dei tasti direttamente sulla tela tramite lo STRUMENTO TESTO . Vai sullo STRUMENTO TESTO e clicca nell'etichetta per iniziare le modifiche. Se l'oggetto di testo è un oggetto ripetuto (clicca con il tasto destro e scegli RIPETI SU TUTTE LE PAGINE ) tutte le modifiche apportate su una copia dell'oggetto vengono applicate a tutte le altre copie.

Modificare i font sui tasti della navbar Puoi modificare i font utilizzati per le etichette dei pulsanti di una navbar in modo semplice. Seleziona la barra cliccandoci sopra. Vai allo STRUMENTO TESTO e seleziona dall'elenco font sulla sinistra della BARRA INFORMAZIONI DELLO STRUMENTO TESTO . Mentre sposti il puntatore del mouse sui diversi font nell'elenco, la navbar si aggiorna all'istante in modo da poter vedere l'aspetto di quel font. Seleziona il font desiderato. Se la tua barra ha la funzione di mouseover, viene aggiornata per utilizzare lo stesso font. Allo stesso modo puoi modificare le dimensioni del font utilizzando il comando dimensione del font posto accanto all'elenco di selezione degli stessi.

Importare & incollare navbar Se importi o incolli una navbar sul tuo documento, l'opzione di navigazione del sito su quella navbar viene disattivata automaticamente, se era attiva In questo modo si evitano dei conflitti con altre barre di navigazione già presenti nel tuo documento. In ogni caso se la barra che viene inserita è dello stesso tema e tipo della barra di navigazione del tuo sito (cioè sono parte dello stesso gruppo ripetuto), sarà aggiornata immediatamente per accordarsi alla barra di navigazione esistente. Quindi, in questo caso, la barra non apparirà nella tua pagina nella sua forma originale. Se la barra è di un tema o tipo diversi (cioè non sono parte dello stresso gruppo ripetuto) apparirà non modificata.

www.magix.com

Barre di Navigazione

Creazione di Barre di Navigazione personali Puoi creare una barra di navigazione da ogni design di pulsante. La GALLERIA DESIGN contiene diversi design di pulsanti oppure puoi crearne uno personalizzato. Vedi la sezione "Crea i tuoi pulsanti mouseover (sulla pagina 71)" del capitolo "Per iniziare" per informazioni su questo argomento. Il pulsante può includere o non icludere lo stato di mouseover. Per creare una navbar, seleziona il tasto e poi vai su ORDINA->CREA BARRA DI NAVIGAZIONE . Compare così il DIALOGO DELLA BARRA DI NAVIGAZIONE da cui puoi aggiungere subito altri pulsanti, così come per le altre barre di navigazione. Ino,ltre puoi creare delle Navbar con più di un design di pulsante (in modo da disporre di design diversi per il primo e/o l'ultimo tasto della barra.). Consulta al riguardo la sezione sotto.

Restrizioni riguardanti i design dei pulsanti Ci sono delle regole da seguire quando si creano dei pulsanti personalizzati da utilizzare sulle barre di navigazione. Limitazioni dei pulsanti elastici Per ottenere risultati affidabili, quando i pulsanti vengono allungati automaticamente, si consiglia di assicurarsi che non vi siano punti di controllo del percorso o punti di controllo di riempimento/trasparenza graduati nell'area orizzontale occupata dall'oggetto testo dell'etichetta del pulsante. Testo di un pulsante Ogni stato del design pulsanti deve essere un oggetto gruppo che contiene a sua volta un oggetto che funge da etichetta del pulsante. Questo oggetto dovrebbe essere un testo semplice (sulla pagina 190) e non una colonna o un'area di testo. Cioè, deve essere creato nello Strumento testo cliccando sulla pagina e scrivendo con la tastiera e non trascinando una riga o una casella di testo. Raggruppamento soft degli stati dei pulsanti Se sul tuo tasto sono presenti stati diversi; per es., mouseoff e mouseover, devono essere raggruppati in gruppi soft (sulla pagina 199) in modo da rimanere insieme quando uno sato viene spostato o trasformato.

323

324

Margini dei pulsanti In questa sezione chiamiamo margini gli spazi tra le etichette dei pulsanti e estremità del pulsante. Per quanto riguarda i pulsanti elastici (quelli con l'opzione "Adatta la larghezza dei pulsanti ai loro testi" attiva), è determinato dal pulsante master dal quale viene creata la navbar. Regolando i margini del pulsante master, fissi i margini per gli altri pulsanti della barra. Il modo più semplice per modificare il margine sul primo pulsante è il seguente. 1. Apri il DIALOGO DELLA NAVBAR 2. Disattiva l'opzione ADATTA LA LARGHEZZA DEI PULSANTI AI LORO TESTI di modo

che i pulsanti non si allarghino a causa della modifica del testo delle etichette. 3. Modifica l'etichetta del pulsante master (il primo tasto, se sulla navabr non hai

design di tasti multipli - vedi sezione successiva). Scegli un modello di testo per etichette che abbia la giusta lunghezza per ottenere i margini che desideri per il pulsante master. 4. Riattiva l'opzione ADATTA LA LARGHEZZA DEI PULSANTI AI LORO TESTI . Tutti i tasti avranno gli stessi margini che hai impostato per il pulsante master. 5. Reimposta il testo del pulsante master allo stato iniziale.

Barra originale

Barra con margine modificato più piccolo

Barra con margine modificato più grande

Se la tua barra ha design diversi per l'inizio/fine (vedi sotto per sapere come ottenere questo risultato) allora i design di inizio e fine hanno i loro margini che possono essere controllati separatamente.

Avanzate - Modificare un design di pulsante di una navbar Indipendentemente da come è stata creata la tua barra, puoi modificare il design del pulsante che ha in uso. Per le barre per le quali i pulsanti hanno lo stesso design, il primo tasto della barra è utilizzato come master dal quale vengono copiati tutti gli altri. Per cui, modificando il primo design di pulsante modifichi il design dell'intera barra.

www.magix.com

Barre di Navigazione

Modifiche interne Su alcune barre puoi eseguire le modifiche del design dei pulsanti direttamente sul primo tasto utilizzando l'opzione "selezionare all'interno di". Questa funzione ti permette di selezionare le forme all'interno del gruppo di pulsanti. Vedi le informazioni riguardo lo Strumento selettore nel capitolo Gestione oggetti (sulla pagina 112) per maggiori dettagli sull'opzione "seleziona all'interno di". Tuttavia non puoi selezionare la funzione di modifica interna se una delle seguenti opzioni è attiva nella finestra di dialogo Navbar. • •

BARRA DI NAVIGAZIONE DEL SITO ADATTA LA LARGHEZZA DEI PULSANTI AI LORO TESTI

Se una di queste opzioni è attiva ed esegui una selezione interna, ti verrà richiesto e data la possibilità di aprire il dialogo della Navbar in modo che sia possibile disattivare queste opzioni e poi riprovare. Se queste opzioni non sono attive, puoi utilizzare "seleziona all'interno di" e modificare le forme che costituiscono il tuo pulsante utilizzando i normali strumenti da disegno. IMPORTANTE: ricorda che il primo pulsante della barra è il pulsante master (se non hai non hai tasti di inizio e fine diversi - vedi sotto). Per cui devi modificare il primo pulsante e le modifiche sono applicate immediatamente a tutti i tasti della barra. Se però intervieni su un pulsante diverso dal master, le modifiche non verranno applicate e andranno perdute non appena modifichi la tua barra.

Sciogliere gruppi, modificare e raggruppare Se desideri apportare delle modifiche importanti sul design dei pulsanti, è meglio separare i componenti che costituiscono la navbar e raggrupparli successivamente. Per separare la barra, selezionala cliccandoci sopra sulla tela ed esegui la normale operazione di separazione (ORDINA->SCIOGLI GRUPPO o Ctrl+U). Oppure clicca sul tasto SCIOGLI GRUPPO PER MODIFICARE LA GRAFICA posto in fondo al dialogo della navbar. Nota: se la tua navbar avesse l'opzione "Barra di navigazione del sito" attiva, dovrai riattivarla successivamente, se necessario, dopo aver nuovamente raggruppato la barra modificata. Dopo averne separato i componenti, non si ha più una barra di navigazione. Per cui se l'opzione "STESSA LARGHEZZA PER TUTTI I PULSANTI " era attiva, la separazione può causare la modifica delle larghezze perché questa opzione ha effetto solo quando i

325

326 tasti sono parte di una barra. Anche se si devono fare modifiche progettuali al pulsante master (o ai pulsanti master), di norma si lasciano tutti gli altri pulsanti sulla pagina. Essi vengono utilizzati quando raggruppi nuovamente la navbar per ristabilire tutte le etichette, i link etc. in modo da non doverle reinserire un 'altra volta. Se lo stato di mouseover è attivo, i due gruppi che compongono il pulsante master verranno riuniti in gruppo soft in modo da restare insieme quando li trascini sulla pagina. Separali tramite DISPONI->ELIMINA GRUPPO SOFT (Crtl+Alt+U). Dopodiché puoi separare ogni stato dei tasti sui layer di MouseOff e MouseOver (Ctrl+U) in modo da poter lavorare sui rispettivi design. Vedi la sezione "Crea i tuoi pulsanti mouseover" del capitolo Per cominciare (sulla pagina 71) per informazioni sulla creazione di pulsanti. Ricorda di raggruppare nuovamente ogni stato dei pulsanti e di ristabilire il gruppo soft per mantenere insieme i due stati del pulsante una volta eseguite le modifiche. Esegui questa operazione assicurandoti che entrambi i layer siano attivi nella GALLERIA PAGINE & LAYER (sulla pagina 337); seleziona entrambi i gruppi di stato dei pulsanti e poi ORDINA> APPLICA GRUPPO SOFT. Per maggiori informazioni sui gruppi soft (sulla pagina 135) vedi il capitolo Gestione oggetti. È consigliato di verificare il funzionamento del pulsante attraverso un'anteprima della pagina, prima di ricostituire la barra. Per rimettere insieme la barra, seleziona il pulsante modificato e scegli ORDINA> Crea Barra di Navigazione.

Barre di navigazione con il primo o ultimo pulsante differenti A volte può essere utile avere una barra che abbia primo e ultimo tasto che si differenziano. Per esempio, una barra con le estremità arrotondate ma con tasti rettangolari nella parte centrale.

Questo tipo di barre necessitano 2 (se deve differenziarsi solo un'estremità) o 3 (se si tratta di entramabe le estremità) design di pulsanti. Posiziona i design da sinitra verso destra come dovrebbero apparire in una navbar orizzontale. Oppure dall'alto verso il basso come apparirebbero in una barra verticale. Seleziona poi tutti e tre i design (insieme ai loro stati di mouseover se presenti) e seleziona ORDINA->CREA BARRA DI NAVIGAZIONE . Quando crei una barra da più di un pulsante, come in questo caso, MAGIX Web Designer deve sapere come verrnno utilizzati sulla barra. Appare quindi un dialogo con la richiesta di scegliere tra una serie di opzioni.

www.magix.com

Barre di Navigazione

Uguale per tutti i pulsanti: scegli questa opzione se desideri che tutti i pulsanti della barra abbiano lo stesso design del primo pulsante selezionato. Questo è tipo di bara più comune. PRIMO PULSANTE DIVERSO: scegli questa opzione se desideri che il primo tasto abbia un design diverso rispetto agli altri. ULTIMO PULSANTE DIVERSO: scegli questa opzione se desideri che l'ultimo tasto abbia un design diverso rispetto agli altri. Può essere necessaria in una barra che mostra un divisore tra ogni pulsante. Tutti i tasti tranne l'ultimo avranno bisogno del divisore per apparire a destra del design del tasto.

L'ultimo pulsante in questo esempio è diverso, non ha un divisore sul bordo destro.

questa opzione ti permette di applicare design diversi per il primo e ultimo tasto in modo da dare alla barra delle calotte di protezione. Naturalmente perché questa opzione venga applicata devi aver selezionato almeno 3 pulsanti.

PRIMO E ULTIMO PULSANTE DIVERSI:

327

328

Widget per siti web Questo capitolo descrive come aggiungere del contenuto dinamico al sito web come filmati, animazioni, forme e le migliaia di gadget come page counter o convertitori di valuta. Chiamiamo questi contenuti "widget".

Widget & segnaposto - è tutto automatico! In MAGIX Web Designer un widget è un oggetto che puoi posizionare sulla tua pagina web e che mostra del contenuto che può essere anche interattivo. Quel contenuto può essere fornito da un sito esterno (per es. un news feed widget) o può essere pubblicato con il sito web (per es. un widget per slideshow Una delle tele di Web Designer un widget è rappresentato da un'immagine "segnaposto" statico che definisce la posizione e le dimensioni del widget sulla pagina. E attaccati al segnaposto ci sono il codice HTML e i file (per es. Flash, Javascript, foto ecc.) che fanno funzionare il widget nella pagina esportata. Un segnaposto è di solito un'immagine che ha l'aspetto di un'istantanea statica del widget stesso ma può anche essere un semplice rettangolo o qualsiasi oggetto. Il segnaposto di solito ha le stesse dimensioni del widget in modo che sia possibile posizionarlo correttamente rispettando gli altri elementi della pagina. La buona notizia è che le immagini segnaposto sono rese automaticamente da Web Designer.

www.magix.com

Widget per siti web

Tipi di widget Ci sono tre tipi di widget che si differenziano nel modo in li cui personalizzi e configuri in MAGIX Web Designer. Segue una breve descrizione di ogni tipo; maggiori dettagli saranno forniti più avanti in questo capitolo. Per tutti i tre tipi di widget puoi cliccare due volte sull'immagine segnaposto per modificarli.

Widget modificabili sul web Quando personalizzi questi widget una finestra di un browser web si apre nel sito web remoto che fornisce il widget e configura e personalizza il widget utilizzando quell'interfaccia web. Per esempio con un map widget fornito da un sito di mapping, in genere viene scelta la posizione geografica e le dimensioni della mappa. Una volta fatto, clicca sul tasto INSERISCI in fondo alla finestra del browser Normalmente questi widget vengono inseriti dalla GALLERIA DESIGN

Widget modificabili a livello locale Questi widget vengono elaborati direttamente su Web Designer ma di solito in una documento multi pagina separato che rende l'intera serie di contenuti per il widget facilmente modificabili. Per esempio per uno slide show con 10 foto, le immagini saranno visibili e modificabili facilmente all'interno del documento multi pagina del widget utilizzato per la sua elaborazione. Come già detto, di solito questi widget vengono inseriti dalla GALLERIA DESIGN.

Widget modificabili manualmente Si tratta di widget che vengono inseriti manualmente incollando il codice HTML relativo direttamente in Web Designer o tramite la scheda "STRUMENTI" > "PROPRIETÀ WEB " > "SEGNAPOSTO ". Oppure puoi crearli anche importando nella pagina un file di animazione o che contiene un film. Per l'elaborazione di widget, Web Designer non fornisce un'altra interfaccia, tranne la scheda del SEGNAPOSTO che ti permette di modificare il file o il codice che definisce il widget.

Widget della Galleria design Molti degli elementi nella cartella "Elementi di pagina & widget" della galleria design sono widget (come indicato nei titoli). Per aggiungere un widget trascinalo dalla galleria e rilascialo sulla pagina. Ciò che accade subito dopo dipende dal tipo di widget. Se si tratta di un widget modificabile sul web, si apre la finestra di un browser che ti permette di configurare il widget direttamente sulla pagina del provider. Se è un widget modificabile localmente, sulla tua pagina appare l'immagine di un segnaposto. Clicca due volte sul segnaposto e

329

330 all'interno di Web Designer si apre un nuovo documento che ti permette di personalizzare il widget.

Inserimento Premi il tasto AIUTO posto in fondo alla finestra per visualizzare delle informazioni che ti guidino nel processo di configurazione e inserimento del widget nella tua pagina. Per la maggior parte dei widget devi arrivare al punto in cui il sito web ti offre il codice HTML che deve essere inserito nella tua pagina web. Non appena è visibile, puoi cliccare il tasto Inserisci posto in fondo alla finestra. MAGIX Web Designer trova il codice e lo inserisce nella pagina. Per alcuni widget MAGIX Web Designer non è in grado di recuperare il codice HTML direttamente dal sito, in questo caso dovrai copiare il codice nella clipboard. Seleziona il codice nella finestra del browser e schiaccia Ctrl+C. Molti widget sono provvisti di un tasto per la copiatura posto vicino al codice. Una volta copiato il codice clicca il tasto INSERISCI .

Generazione automatica di segnaposto Quando premi il tasto Inserisci, se MAGIX Web Designer ha trovato il codice, la finestra del sito web del widget si chiude e compare l'indicazione che MAGIX Web Designer sta lavorando per rendere un'immagine segnaposto. Dopo alcuni secondi appare sulla tua pagina un'immagine del tuo widget. Per la maggior parte dei widget quella resa è la grandezza del widget stesso per cui può essere posizionato dove desideri tramite lo STRUMENTO SELETTORE . Ora tutto ciò che devi fare è aprire un'anteprima della pagina web per vedere il widget in funzione.

Iscrizione al sito web del widget Per alcuni wdget è necessario aprire una account con il provider prima di poterne far uso. La maggior parte sono gratuiti, ma alcuni offrono servizi premium oltre l'offerta gratuita. Per dettagli vedi ogni singolo widget e le informazioni sul fornitore del sito.

Modifica di widget esistenti Puoi cliccare in ogni momento sul segnaposto del widget (oppure clicca con il tasto destro e e scegli MODIFICA WIDGET) sulla pagina di Web Designer per tornare al sito web del provider del widget in modo da poter modificare o sostituirlo in modo semplice. I provider che forniscono anche un account, solitamente conservano una copia dei widget che hai creato. In questo modo puoi fare il login sul tuo account durante il processo di inserimento e trovare, modificare o inserire un widget che hai creato

www.magix.com

Widget per siti web precedentemente. Inserire widget esistenti è come inserirne dei nuovi: clicca su INSERISCI , quando ti viene dato il codice HTML oppure copia il codice HTML nella clipboard e clicca su INSERISCI. Widget modificabili a livello locale Alcuni widget, presi dalla GALLERIA DESIGN e che rilasci sulla pagina non aprono la pagina di un browser come descritto sopra per i widget modificabili sul web. Si tratta in questo caso di widget modificabili a livello locale che puoi elaborare direttamente su Web Designer utilizzando una finestra di documento diversa. Elaborazione Dopo aver rilasciato il widget sulla pagina, cliccaci sopra due volte e dà inizio alle modifiche. Su Web Designer si apre una nuova finestra di documento (chiamato "documento di elaborazione" del widget"). Quello che viene mostrato da questa finestra dipende dal widget, ma di solito vedrai un documento multipagina che ti permette di modificare e personalizzare in modo semplice i contenuti. Generalmente, a lato o sopra la prima pagina, vengono mostrare delle istruzioni specifiche che descrivono quali aspetti del widget possono essere modificati nel documento ed altre utili informazioni. Nella maggior parte dei casi puoi modificare il testo utilizzando lo STRUMENTO TESTO ma di solito font e stile del testo non possono essere modificati. Puoi sostituire delle foto rilasciando dei nuovi file fotografici nelle immagini di Windows Explorer, nello stesso modo in cui sostituisci delle foto i documenti normali. Puoi modificare le foto tramite il PHOTO TOOL e regolarle con lo STRUMENTO RIEMPIMENTO , ecc. Personalizza testi e foto di ogni pagina. Alcuni oggetti possono essere bloccati (cliccandoci sopra non si ottiene alcun effetto) e ciò significa che non puoi modificare quell'aspetto del widget o forse verrà modificato intervendendo sugli oggetti non bloccati su una delle altre pagine. Tutti gli oggetti bloccati sono presenti come un aiuto visivo, per contribuire a rendere chiaro il contesto delle parti sbloccate e quindi modificabili del design. Aggiungere più contenuti Alcuni widget ti permettono di aggiungere al widget maggiori contenuti duplicando le pagine mostrate (clicca sulla pagina con il tasto destro e scegli DUPLICA PAGINA CORRENTE ). Un widget di slide show può permettere l'aggiunta di foto in questo modo. Dopo aver duplicato la pagina, cambia foto e testi come richiesto. Le istruzioni del widget di indicano se puoi duplicare pagine per aggiungere contenuti in questo modo.

331

332 Generalmente se apporti delle modifiche che secondo le istruzioni non sono permesse, vengono ignorate. Tuttavia potresti provocare il malfunzionamento del widget per cui è meglio modificare solo gli aspetti del design che vengono indicate dalle istruzioni. Alcuni widget ti permettono di aggiungere dei link cliccabili. Le istruzioni che accompagnano ogni widget forniscono maggiori informazioni al riguardo. Modifica i valori standard di questi link come faresti per i link di un normale documento sito web. Modifica delle dimensioni Solo alcuni Widget modificabili a livello locale sono ridimensionabili Seleziona il segnaposto del widget nel tuo documento sito web e trascina una delle maniglie agli angoli per ridimensionarlo. Se il widget non è ridimensionabile, anche se si trascinano le maniglie agli angoli le sue dimensioni non verranno modificate. Generalmente, dopo aver modificato le dimensioni, il programma genera nuovamente un'immagine segnaposto per visualizzare l'aspetto del widget con le nuove dimensioni. Salvare le modifiche Dopo l'elaborazione, chiudi il documento ti verrà chiesto se desideri salvare o meno le modifiche apportate. In alternativa clicca su "Ctrl+S", le modifiche saranno salvate, il documento di elaborazione chiuso e il programma ritorna al documento del sito web. L'immagine widget segnaposto dovrebbe aggiornarsi Apri l'anteprima della tua pagina per vedere gli effetti delle modifiche sul widget in funzione.

Aggiungere file con filmati e animazioni MAGIX Web Designer include supporto diretto per alcuni tipi di file che probabilmente dovrai aggiungere al tuo sito. Puoi spostare questi file da Windows Explorer alla tua pagina per drag & drop o tramite FILE->Importa. Durante l'importazione viene individuato il tipo di file, viene aggiunto alla pagina un segnaposto appropriato o un link e il file è copiato nella cartella di supporto per il tuo progetto nella cartella di supporto. È una cartella posta accanto al file di progettazione e viene creata automaticamente. Se il nome del file del tuo progetto è "MySite.web" la cartella di supporto si chiamerà „MySite_web_files". I contenuti di questa cartella sono inclusi insieme a tutti i file di immagini, ogni volta che il sito viene esportato e pubblicato.

www.magix.com

Widget per siti web

File video MP4 & FLV Importa un fle MP4 o FLV e MAGIX Web Designer analizza il file per determinare il rapporto di aspetto ed altre informazioni sul filmato. Ti vine chiesto se desideri che il filmato si avvii automaticamente appena viene caricata la pagina (auto start). Dopodiché inserisce nella cartella di supporto il file del filmato ed altri file per un lettore video Flash. Un'immagine segnaposto simile al lettore video appare sulla tua pagina. Posiziona e ridimensiona il segnaposto utilizzando lo STRUMENTO DI SELEZIONE e visualizza l'anteprima della pagina. Clicca sul tasto play del lettore per avviare la riproduzione del filmato (è necessario aver installato Flash). Ecco fatto! Il lettore video include comandi base per regolare volume, avvio e arresto e per saltare su qualsiasi punto del filmato. In alternativa, per presentare il tuo filmato, puoi utilizzare alcuni dei widget nella GALLERIA DESIGN . In questo modo hai maggiore controllo sul filmato. Vedi ELEMENTI DI PAGINA & WIDGET> AUDIO / VIDEO.

Altri formati video MAGIX Web Designer non supporta altri formati video direttamente ma visita questa pagina web http://rdir.magix.net/?page=H1Q9XX0777AR sul sito di MAGIX per avere informazioni su come convertire facilmente i filmati in un formato che può essere aggiunto alla tua pagina web.

File Flash Per includere un'animazione Flash al tuo sito web, importa il file Flash (.swf). Il file viene copiato nella cartella di supporto del tuo progetto e in questo modo verrà esportato e pubblicato nel tuo sito. Inoltre, viene resa un'immagine segnaposto e posizionata nella pagina. È possibile ridimensionare le animazioni Flash, per cui utilizza lo STRUMENTO per modificare le dimensioni dell'immagine segnaposto e posizionala per trascinamento.

SELETTORE

Apri l'anteprima della tua pagina e vedrai così l'animazione Flash in funzione. Naturalmente devi prima aver installato Flash.

333

334

File MP3 Importa un file MP3 per aggiungere l'audio al tuo sito. Una finestra ti chiederà se l'audio dovrà partire automaticamente al caricamento della pagina, oppure se dovrà essere avviato solo tramite il pulsante Play del player. Come per altri formati, verrà generata un'immagine segnaposto che rappresenta il player e verrà posizionata sul tuo sito. Il file MP3 e tutti gli altri file necessari per il funzionamento del player verranno copiati nella cartella di aiuto del tuo documento ed inclusi nel sito esportato. Avvia l'anteprima di pagina per vedere il player in azione. Il player è semplice e discreto. Puoi avviare e arrestare l'audio, cliccare sulla Timeline per saltare a diversi punti dell'audio, regolare il volume (clicca sul regolatore del volume) e impostare su mute (clicca sull'icona dell'altoparlante). Nota tecnica: per riprodurre l'audio, il player usa le funzionalità native HTML 5 del browser web solo se questo supporta tali funzionalità e il formato MP3. In caso contrario verrà usato Flash. Ciò significa che il player funzionerà nei browser principali (i vecchi browser non supportano l'HTML 5 ed anche alcuni di quelli moderni non supportano direttamente il formato MP3).

GIF animati. Aggiungi un GIF animato alla tua pagina allo stesso modo dei file Flash. Importa o trascina il file GIF nella tua pagina. Il file viene copiato nella cartella di supporto del tuo progetto e viene generato un segnaposto statico. Posiziona e ridimensiona il segnaposto, visualizza l'anteprima della pagina e hai finito!

File PDF Puoi importare dei file PDF in un documento web in due modi diversi. Puoi importarlo così che i contenuti del file vengano copiati sulla tua pagina (come quando si importa una foto). Oppure puoi inserire un link che colleghi ad una copia del file nel tuo sito web e il file viene pubblicato insieme al sito. Quando si importa un file PDF viene visualizzato un prompt per farti scegliere tra queste due opzioni Quando aggiungi un link, il file PDF viene copiato nella cartella di supporto del tuo progetto in modo da venire esportato e pubblicato con il resto del sito. Inoltre viene aggiunto un link che ha l'aspetto di questo:

Cliccando il link sulla pagina esportata si apre il file PDF, ma il funzionamento esatto varia a secondo delle impostazioni del browser dell'utente.

www.magix.com

Widget per siti web

Widget da siti di altri widget Ci sono centinaia di migliaia di siti che offrono widget di tutti i tipi e la Galleria design offre solo una piccola gamma di quello che è disponibile in rete. Quasi tutti i widget vengono forniti all'utente sotto forma di un piccolo pezzo di codice HTML. Il fornitore di widget ti fornirà alcune semplici istruzioni su come inserire il codice nella tua pagina web, ma con MAGIX Web Designer questa operazione diventa davvero semplice. Copia il codice dal fornitore di widget nella clipboard del tuo sistema proprio come quando copi un testo nel programma di scrittura. A volte il provider può fornire il pulsante 'copia' che copia il codice per te. Dopodiché su MAGIX Web Designer vai sullo Strumento Selettore e ed incolla normalmente, (Ctrl+V). MAGIX Web Designer riconosce il codice HTLM e comincia immediatamente a creare un'immagine segnaposto come quando si inserisce un widget dalla Galleria design. Il segnaposto appare sulla tua pagina solitamente nella dimensione adatta per il widget. Dopodiché puoi aprire un'anteprima della pagina web per vedere il widget in funzione. NOTA: se quando incolli il codice ti trovi nello Strumento Testo, viene incollato come testo e non viene prodotto un segnaposto. E una volta che hai incollato i contenuti della clipboard come testo, verrà sempre incollato come testo anche se passi allo Strumento Selettore e incolli nuovamente. In questo caso, ritorna al sito del widget e copia il codice un'altra volta. Dopodiché incollalo quando ti trovi nello Strumento Selettore.

Ridimensionamento di widget Puoi modificare le dimensioni dell'immagine segnaposto di filmati Flash, MP4 e di GIF animati per ridimensionare in modo simile il contenuto così come appare sulla tua pagina perché questo tipo di contenuto è ridimesionabile in scala. Ma la maggior parte dei widget non supporta questa operazione e riprodurrà sempre le stesse dimensioni. Per questi widget l'oggetto segnaposto determina solo i limiti della zona in cui il widget può essere reso, per cui se il segnaposto è troppo piccolo per il widget, nella tua pagina web viene ritagliato. L'immagine segnaposto viene rigenerata ogni volta che la ridimensioni riflettendo ogni ritaglio del widget come mostrato in questo esempio.

Segnaposto con dimensione predefinita

Segnaposto con dimensione ridotta

335

336 Questo è un esempio del tasto PayPal e-commerce 'Acquista ora' che permette di vendere merci o servizi dal tuo sito web. Questo è uno dei widget disponibili nella galleria Progetti. Allo stesso modo se ingrandisci il segnaposto per questo tipo di widget, risulterà soltanto un spazio vuoto intorno al widget sulla pagina e nell'immagine segnaposto. Per i widget che non possono essere ridimensionati correttamente, quando modifichi le dimensioni del segnaposto, è meglio mantenere la grandezza predefinita. Questi sono dei widget che possono essere migliorati ridimensionando il segnaposto anche se il widget non scala. Alcuni riempiranno il luogo in cui sono inseriti, il che potrebbe comportare che i widget vengano resi più grandi di quanto sia necessario, con aree vuote a riempire lo spazio. Puoi provare a ridimensionare il segnaposto di questi widget in ogni direzione e questo potrebbe rendere il widget più piccolo senza perdere le sue parti fondamentali. Questo widget Forma è stato resto troppo largo e alto per cui c'è dello spazio sprecato sotto e a destra dei comandi di forma. Riducendolo non si modificano le dimensioni dei comandi di forma e risulta solo che la forma è stata ritagliata. Di conseguenza si ha un segnaposto di forma più ordinata che occupa meno spazio nella pagina.

Segnaposto con dimensione predefinita

Segnaposto più stretti e corti

Disattivare rigenerazione dei segnaposto L'immagine segnaposto viene rigenerata ogni volta che ridimensioni o cambi il codice o il file al quale è allegato. A volte è utile disattivare la rigenerazione di modo che l'immagine segnaposto non cambi nuovamente. È possibile effettuare questa operazione deselezionando la casella di controllo in fondo alla TAB DEL SEGNAPOSTO in STRUMENTI ->DIALOGO PROPRIETÀ WEB .

www.magix.com

Widget per siti web

Aggiungere segnaposto widget manualmente Se desideri che MAGIX Web Designer non crei un'immagine segnaposto automaticamente puoi crearne uno tu stesso. Prima crea un oggetto segnaposto (magari un rettangolo della grandezza giusta o un'immagine importata che vuoi utilizzare per rappresentare il widget sulla pagina). Seleziona la pagina e poi apri la scheda del segnaposto in STRUMENTI-> PROPRIETĂ&#x20AC; DEL WEB. Oppure premi il tasto del segnaposto sulla barra flyout delle proprietĂ del web sulla barra superiore. In questo dialogo puoi associare l'oggetto selezionato ad un file Flash o di altro tipo, o ad un codice HTML che il dialogo ti permette di incollare nella testa o nel corpo della pagina web. Vedi la sezione SCHEDA SEGNAPOSTO del capitolo Dialogo delle ProprietĂ Web (sulla pagina 258) per maggiori informazioni su questo dialogo. Di solito non selezioni l'opzione "Rigenera segnaposto" se desideri mantenere l'oggetto segnaposto che hai creato. Se selezioni questa opzione il segnaposto viene sostituito con un'immagine generata dal codice o file che hai specificato in questa finestra di dialogo.

337

338

Galleria pagine & layer Galleria Pagine & Layer Per impostazione predefinita, la GALLERIA PAGINE & LAYER è sempre aperta sul lato destro della finestra di Web Designer, quando si apre programma. Puoi fissare, spostare o agganciare le Gallerie per maggiori informazioni. Puoi aprire e chiudere la galleria cliccando sulla scheda GALLERIA PAGINE & posta sulla barra delle gallerie o premendo F10.

LAYER

La Galleria Pagine & Layer elenca tutto ciò che è presente nel tuo documento, dalle pagine e i layer fino ad ogni singolo elemento della pagina. Ti permette inoltre di selezionare, nascondere e riordinare questi elementi. Funziona su diversi livelli: pagine, layer e oggetti. Le gerarchia degli elementi è la seguente: Pagine Layer Elementi della pagina che possono includere gruppi Contenuti dei gruppi Alcune delle caratteristiche principali della galleria PAGINE & LAYER includono: Controllo pagine • • • • •

Mostra un elenco di tutte le pagine La modalità pagina nuova mostra un elenco ristretto di miniature di pagine per una facile navigazione. Aggiunge, duplica o cancella pagine Modifica l'ordine all'interno della pagina per trascinamento Rinomina le pagine

Controllo layer • • • • •

Mostra una lista di tutti i layer di ogni pagina, da quello in basso (di solito il layer di sfondo) fino a quello più in alto. Crea, cancella, riordina e rinomina layer Nascondi o mostra layer Blocca layer (rende il layer non più modificabile) Solo un layer - disattiva tutti gli altri layer

www.magix.com

Galleria pagine & layer Controllo oggetti Mostra una lista di elementi (oggetti) nell'ordine di sovrapposizione in cui appaiono nella pagina, dal basso verso l'alto. • • • • • •

•

Nasconde o mostra qualsiasi elemento Muove la serie su e giù Blocca ogni oggetto rendendolo non più modificabile. Individua ed evidenzia degli oggetti nella galleria cliccandoci sopra quando ci si trova nella modalità "Localizza" - attiva e disattiva il pulsante LOCALIZZA. Solo un oggetto - disattiva tutti gli altri oggetti Sposta gli oggetti dentro o fuori da un gruppo tramite la funzione drag and drop; o sposta un oggetto da un gruppo all'altro. (Nota che questa funzione è compatibile solo con gruppi semplici, quindi non ancorati o ripetuti). Rinomina oggetti

Inoltre la GALLERIA Pagine & Layer mostra una miniatura di ogni pagina e una miniatura ancora più piccola di ogni elemento che contiene. Posiziona il puntatore del mouse su un oggetto per ingrandire la miniatura.

339

340

Questo mostra che il layer MouseOff è stato allargato per visualizzarne i contenuti Mostra un gruppo di barre di navigazione e altri gruppi, righe e colonne di testo e alcuni gruppi ombra. Facendo passare il puntatore del mouse sopra le miniature appare una miniatura più grande che permette di identificare facilmente ogni oggetto sulla pagina. Nota che le due colonne sulla destra indicano (e controllano) se gli elementi sono modificabili (una freccia sbiadita) o bloccati (icona con lucchetto) e se sono visibili nella pagina (icona con occhio aperto sbiadito) o nascosti (icona con occhio chiuso di colore più scuro). Cliccando su queste icone puoi modificare la visibilità e/o lo stato di blocco o modificabilità di ogni oggetto.

www.magix.com

Galleria pagine & layer

Pagine Cliccando il tasto PAGINE in cima alla GALLERIA PAGINE & LAYER (o cliccando con il tasto destro nella galleria e scegliendo MOSTRA LIVELLO PAGINA ) appaiono solo le pagine del documento che chiudono il livello del layer. Puoi riordinare le pagine trascinando l'elemento nella Galleria Pagine & Layer o cliccando su una pagina con il tasto destro e scegliendo SPOSTA PAGINA SOPRA/SOTTO . Puoi assegnare un nuovo nome ad una pagina cliccandoci sopra con il tasto destro e scegliendo l'opzione RINOMIMA PAGINA. Oltre ad essere un modo pratico per identificare le pagine all'interno di documenti estesi, il nome della pagina viene usato anche per l'esportazione del documento come sito web. Per questo motivo in documenti web il nome non può contenere alcuni caratteri o simboli (non sono accettati come nomi di pagine web). I tasti NUOVA PAGINA, DUPLICA e CANCELLA agiscono normalmente. Nota che prima devi aver selezionato una pagina (cliccaci sopra in modo che venga evidenziata in blu come mostrato sopra) perché questi tasti possano funzionare. (Se, per esempio, hai selezionato un livello, saranno attivi all'altezza del livello). In alternativa puoi cliccare sul tasto destro e scegliere le opzioni NUOVA PAGINA , DUPLICA PAGINA CORRENTE e CANCELLA PAGINA CORRENTE. L'opzione NUOVA PAGINA creerà una pagina bianca con le stesse dimensioni della pagina corrente selezionata. Puoi allargare (aprire) la pagina perché mostri i layer cliccando sia sulla freccetta che punta verso destra o cliccando due volte sulla miniatura della pagina. Se si esegue nuovamente la stessa operazione, la visualizzazione della pagina verrà ridotta a icona (chiusa).

Livelli Cosa sono i livelli? Tutto ciò che è contenuto nel tuo documento ha un ordine di sovrapposizione - ciò significa che i nuovi elementi vengono posizionati sopra quelli già presenti sulla pagina, come se tu stessi aggiungendo dei fogli sulla tua scrivania. Puoi selezionare e spostare gli oggetti attraverso un clic, ma nel caso di documenti più complessi che contengono dozzine, forse centinaia o migliaia di elementi, l'area di lavoro può risultare disordinata e difficile da organizzare. Potresti trovarti a lavorare su elementi nascosti da altri perché posti sopra.

341

342 I livelli costituiscono un metodo utile per l'organizzazione di pagine più complesse o di disegni che contengono diverse parti separate. Attraverso i livelli puoi raggruppare una serie di elementi e poi attivare o disattivare l'intera serie (renderla invisibile o nasconderla) attraverso una semplice operazione. Puoi paragonare un livello ad una cartella di plastica trasparente che contiene un gruppo di fogli separati. Se apri la cartella hai accesso ai suoi contenuti e puoi riordinarli. Ma la tua scrivania può avere diverse cartelle e come puoi riordinare le cartelle, allo stesso modo, puoi riordinare i livelli. I livelli sono gruppi di elementi. Possono essere resi invisibili per nascondere parti del tuo documento, consentendoti di lavorare su aree meno confuse e più facili da gestire. Puoi assegnare dei nomi e creare nuovi livelli o cancellarli in modo semplice. Per aprire una pagina e visualizzare i suoi contenuti (i livelli sulla pagina), basta cliccare sull'icona a forma di freccetta; la stessa operazione può essere applicata ad ogni livello per poter avere accesso ai suoi contenuti. Quando selezioni un oggetto, il livello su cui compare è mostrato nella linea di stato posta nella parte inferiore della pagina.

Il layer corrente Quando crei un nuovo oggetto sulla pagina, questo viene posizionato in uno dei layer, chiamato layer attivo o semplicemente layer corrente. Su un documento vuoto, esso verrà chiamato Layer1 o, nel caso di documenti web, MouseOff. Il layer corrente è . mostrato con una freccia di selezione. Importante: tutti i nuovi elementi disegnati, forme, foto, testi e tutti gli elementi incollati sono posizionati sul layer corrente contrassegnato dal simbolo Puoi modificare il layer corrente cliccando cliccando sulla sua riga nella galleria Pagina & layer. Ricorda che puoi selezionare oggetti su ogni layer o su layer multipli senza che questi siano necessariamente il livello corrente. Il layer corrente, con la freccia, indica solamente dove sono stati posizionati i nuovi elementi.

www.magix.com

Galleria pagine & layer

In questa galleria Pagine & Layer dell'esempio il layer è chiamato MouseOff (la pagina corrente è chiamata news). Per cui se disegna qualcosa di nuovo, verrà posizionato nel layer MouseOff. Quattro layer sono nascosti (chiamati foto vacanze 4, foto vacanze3, foto vacanze 1 e MouseOver). Il layer 'Sfondo della pagina' è bloccato.

Rendi sempre visibile il livello attuale È possibile che il layer corrente sia nascosto o bloccato. Cliccare su un layer per selezionarlo o renderlo il layer corrente, non altera il suo stato invisibile o bloccato. Ma c'è una voce nella scheda Generale (sulla pagina 366) del dialogo delle opzioni (clicca su una pagina con il tasto destro e scegli OPZIONI PAGINA o OPZIONI dal menu UTILITÀ) per rendere i layer corrente sempre visibili e modificabili. Se scegli questa opzione, ogni volta che selezioni un layer nella galleria Pagine & layer, questo sarà visibile e sbloccato. Se ti sposti su un altro layer, il precedente sarà nuovamente invisibile e bloccato.

Livelli su siti web Nei siti web salvati da Web Designer, i livelli sono utilizzati per gli effetti mouseover e popup (nel navigatore web i contenuti di questi livelli vengono mostrati quando sposti il mouse sugli elementi della pagina). Maggiori dettagli sono contenuti nel capitolo Grafica web e siti web, nella sezione Livelli, mouseover (rollover) e pop-up (sulla pagina 69).

343

344

Gruppi soft e layer Gruppi soft (sulla pagina 135) sono poco comuni in quanto si tratta di gruppi di oggetti che possono estendersi su layer diversi. (i gruppi normali devono essere contenuti all'interno di un solo gruppo). Quando selezioni una parte di un gruppo soft, vengono selezionate anche le altre parti, anche se si trovano su layer nascosti o bloccati.

Operazioni con i layer Cliccando sul tasto LAYER in cima alla Galleria pagine & layer, verranno mostrati solo i livelli della pagina corrente. Questa è una modalità - il tasto dei layer rimane premuto. Mentre ti trovi nella modalità layer e ti sposti su diverse pagine, i livelli della pagina corrente vengono sempre mostrati e tutti gli altri nodi di pagina vengono chiusi. Clicca di nuovo sul tasto LAYER per disattivare la modalità layer. Puoi riordinare i layer, cioè l'ordine di sovrapposizione sulla pagina, utilizzando la funzione di trascinamento e rilascio sui livelli della Galleria pagine & layer. Puoi assegnare un nuovo nome ad un livello attraverso un secondo clic (lento) sul nome del livello stesso. (Il primo clic seleziona il livello) Funziona in modo molto simile all'operazione di assegnazione di un nuovo nome per un file su Windows Explorer. Se ti tiene il puntatore del mouse sulle piccole icone dei livelli miniatura dei contenuti del livello.

verrà mostrata una

Dopo aver selezionato un livello (cliccandoci sopra per evidenziare il layer) i tasti NUOVO , DUPLICA e CANCELLA in cima alla Galleria pagina e layer saranno attivi. Il tasto NUOVO creerà un layer vuoto e lo posizionerà in cima alla serie. Puoi modificare l'ordine di sovrapposizione trascinandolo nella posizione desiderata. Il tasto DUPLICA copia il livello e i suoi contenuti e lo posiziona in cima alla serie - cioè sopra tutti gli oggetti della pagina.

www.magix.com

Galleria pagine & layer

Proprietà layer Apre il dialogo delle proprietà dei layer

Creazione layer e modifica delle loro proprietà Grazie alla scheda layer puoi: • • • •

Creare un nuovo layer o modificare uno già esistente. Rendere il layer visibile e modificabile come impostazione predefinita. Impostare il layer come sfondo di una pagina web che non comparirà nella stampa. Specificare che tutti gli oggetti del layer respingono oggetti di testo (sulla pagina 204) solo all'interno dello stesso livello. In questo modo si evita che il testo di un layer venga respinto da oggetti presenti in altri layer ed è utile per layer pop di pagine web.

Utilizzo delle linee guida La scheda guide ti permette di creare linee guida di layer con valori numerici precisi e di scegliere un colore per i relativi oggetti. Per ulteriori informazioni vedi la sezione OGGETTI GUIDA E LINEE GUIDA nel capitolo Galleria pagine & layer (sulla pagina 131).

345

346

Layer speciali Ci sono diversi tipi di layer speciali. Li puoi trovare nella Galleria pagine & layer e possono essere attivati o disattivati nel modo di sempre ma funzionano in maniera leggermente diversa. LAYER DI SFONDO sono layer non stampabili che compaiono in fondo al documento. Quando applichi un colore allo sfondo della pagina (per drag & drop dalla barra dei colori) si crea automaticamente un layer dello SFONDO DI PAGINA . Di solito questo layer è bloccato.

Quando si salva un documento come sito web, i layer di sfondo vengono convertiti in sfondi di pagine web. Il LAYER GUIDE si trova dove sono poste linee e oggetti guida. Quando crei una linea guida, questa crea automaticamente un livello Guide. Puoi selezionare un livello Guide e posizionare qualsiasi cosa su di esso - Per maggiori informazioni vedi Oggetti guida e linee guida nel capitolo Utilizzo degli oggetti.

Nascondere livelli Le due colonne di icone più a destra nella Galleria pagine & layer controllano la visibilità e il bloccaggio dei layer. il layer della pagina verrà nascosto e Cliccando sull'icona con l'occhio aperto . Cliccando nuovamente, il livello ritorna ad essere visibile. l'occhio apparirà chiuso Quando un elemento viene nascosto, diventa invisibile e non può essere selezionato. Per far riapparire gli elementi nascosti è necessario cliccare sulla loro icona ad occhio . Oppure puoi cliccare il tasto PIÙ... e selezionare l'opzione MOSTRA TUTTI chiuso che rende nuovamente visibili tutti gli elementi della pagina corrente.

Modalità Solo Se clicchi su una delle icone della colonna posta accanto ad ogni layer, verrà visualizzato 'solo' questo layer mentre viene nascosto ogni altro elemento. Ora potrai sull'icona, lavorare con tranquillità solo su questo layer. Se clicchi nuovamente verrà ripristinato lo stato iniziale. verso il basso per navigare Inoltre puoi cliccare e trascinare la colonna di icone velocemente tra i layer senza dover tener conto di tutti gli altri elementi. Per lasciare la modalità Solo, clicca

nuovamente il pulsante.

www.magix.com

Galleria pagine & layer

Blocco livelli Cliccando sull'icona a forma di lucchetto aperto sull'angolo destro di una fila di livelli, il livello viene bloccato (l'icona diventa un lucchetto chiuso ). Ora non puoi selezionare nessun oggetto di quel livello. I clic sugli elementi bloccati avranno effetto solo sugli elementi posti sotto di essi. Per sboccare il livello basta cliccare sull'icona a forma di lucchetto. Oppure puoi cliccare il tasto PIÙ.. e selezionare l'opzione SBLOCCA TUTTI . Gruppi "soft" C'è un'eccezione alle regole di bloccaggio. Se un oggetto di un livello bloccatto è parte di un Gruppo soft (sulla pagina 135), e si seleziona e si interviene su quel gruppo soft, sarà possibile selezionare e lavorare su tutti gli elementi bloccati di quel Gruppo soft (questa è l'operazione voluta per Gruppi soft).

Mostra tutto & Sblocca tutto Questi due comandi in cima alla galleria Pagine & layer sono una scorciatoia per mostrare tutti gli elementi della pagina corrente o per sbloccarli. E provocano un annullamento temporaneo delle impostazioni individuali dei layer. Se clicchi nuovamente sui comandi, verrà ripristinato lo stato precedente. Questo è un metodo veloce per mostra o sbloccare ogni elemento, su tutti i livelli, eseguire delle operazioni per poi ripristinare lo stato precedente. Quando entrambi i pulsanti sono premuti (vengono mostrati premuti) non è possibile cambiare lo stato di singoli elementi. Deseleziona i tasti per attivare rendere visibile e sbloccare il layer. Se clicchi sul tasto DI PIÙ appare un menu con le opzioni MOSTRA TUTTO SULLA PAGINA e SBLOCCA TUTTO SULLA PAGINA. Sono simili alle opzioni descritte sopra, ma non sono attivabili/disattivabili. Per cui se selezioni entrambe le opzioni si attiveranno o sbloccheranno tutti i layer, e non c'è un modo semplice per ripristinare lo stato precedente, se non riselezionando singolarmente lo stato di invisibilità/blocco di tutti gli elementi separati.

347

348

Spostamento di oggetti tra i livelli Ci sono diversi modi per spostare gli oggetti tra i livelli. Per prima cosa seleziona l'oggetto o gli oggetti che desideri spostare, poi • •

•

trascina e rilascia l'oggetto nel layer desiderato nella GALLERIA PAGINE E LAYER TAGLIA l'oggetto (Ctrl+X o clicca con il tasto destro e scegli TAGLIA ). Assicurati che il livello target sia quello corrente (mostrato con . clicca il livello se non lo è), poi clicca con il tasto destro e scegli INCOLLA o INCOLLA NELLA POSIZIONE . Nota che se tagli e copi elementi multipli che sono su layer diversi, quando incolli, la struttura del layer viene conservata. Gli elementi vengono incollati nello stesso layer da cui sono stati copiati/tagliati e non su quello corrente. Se desideri incollare tutti questi elementi nel layer corrente, non tenendo conto della struttura, utilizza l'opzione INCOLLA SUL LAYER CORRENTE. Se desideri mantenere la struttura del layer, scegli INCOLLA IN POSIZIONE SUL LAYER CORRENTE . Queste opzioni per incollare si trovano anche nella barra a comparsa degli appunti e nel menu MODIFICA. Clicca con il tasto destro e scegli ORDINA e poi SPOSTA NEL LIVELLO ANTERIORE /SPOSTA NEL LIVELLO POSTERIORE per spostare gli oggetti selezionati di un livello in su o in giù. Assicurati che il livello target sia selezionato come livello corrente, quindi trova l'oggetto selezionato nella GALLERIA PAGINE & LAYER (fai click sul tasto TROVA) e cliccaci sopra con il tasto destro del mouse seleziona SPOSTA NEL LIVELLO CORRENTE .

www.magix.com

Importazione ed Esportazione

Importazione ed Esportazione Note generali sulle funzioni di importazione e esportazione Web Designer offre una larga gamma di opzioni di esportazione e importazione. In primo luogo è necessario notare la differenza tra salvare ed importare dei file: •

•

La funzione SALVARE significa depositare il tuo lavoro perché tu possa aprirlo e riutilizzarlo in seguito . MAGIX Web Designer salva il tuo lavoro nel formato file .web. Consideralo come il formato del "documento principale". ESPORTARE significa convertire ad un altro formato supportato.

Formati consigliati I formati di esportazione universali che possono essere letti dal maggior numero di programmi e sono utilizzati sul web, sono i formati bitmap GIF, PNG e JPEG. È inoltre garantito che questi formati avranno lo stesso aspetto che compare sullo schermo utilizzando MAGIX Web Designer. PNG è consigliato per la grafica web e JPEG per le foto.

Importazione ed esportazione dei formati di file supportati Formati d'importazione È importante che tu utilizzi le estensioni dei file da tre lettere sotto elencate quando carichi i file in MAGIX Web Designer.

Formati d'importazione per bitmap .BMP Windows Bitmap .CUT Halo CUT (256 color) Formato immagine .DCM Digital Imaging and Communications in Medicine (DICOM) DCX DCX .FAX immagine fax di un fax ricevuto o creato con un apposito software .GIF Graphics Interchange Format .ICO Microsoft Windows Icon (16 color) .JPG JPEG

349

350 .MXB MAGIX Bitmap .PBM UNIX monocromo .PCD PhotoCD .PCT PICT .PCX PCX Pennello .PDF (vedi Importazione di un file in PDF) .PGM UNIX livelli di grigio .PNG PNG .PPM UNIX color (fino a 24 bit) .PSD Photoshop (vedi importazione ed esportazione di file in PDF (sulla pagina 356)) .RAS Sun Raster .SGI Silicon Graphics Image .TGA TrueVision TARGA .TIF TIFF (RGB, RGBA con trasparenza canale alfa & CMYK). MAGIX Web Designer supporta: file Fax TIFF (immagini in bianco e nero. I fax multi pagina vengono importati come pagine multiple); file TIFF Mac o PC byte order; TIFF con livelli e trasparenza (se salvati da Photoshop, valgono le stesse regole per la compatibilità con modalità di transizione dei file PSD); JPEG in TIFF (in questo caso la trasparenza non è possibile). .XBM X Windows (2 color) .XPM X Windows (256 color) .WBMP Wireless Bitmap Image. Formato immagine bitmap in bianco e nero (1-bit) utilizzato da dispositivi portatili.

Formati d'importazione EPS .AI Illustrator EPS ArtWorks EPS .EPS Illustrator EPS .EPS CorelDRAW 3 & 4 EPS .EPS FreeHand 3.0 EPS .EPS Photoshop EPS (per l'importazione di dati da Photoshop in MAGIX Web Designer, utilizza file PSD invece di file EPS per risultati migliori). .EPS Xara

www.magix.com

Importazione ed Esportazione

Altri formati d'importazione .ACO Adobe Color Swatch .ACT Adobe Color Table .ART Xara Studio File .WEB Xara Webster .AFF Acorn Draw .CDR CorelDRAW (3,4 & 5) .CDT modello CorelDRAW .CMX Corel CMX 5 & 6 .CPL Tavolozza CorelDRAW .DRW Acorn Draw Segnaposto GIF GIF .HTM, .HTML Graphics su pagine HTML .WMF Windows Metafile (16bit) .EMF/ .WMF Windows Metafile ottimizzato Segnaposto FLV FLV Segnaposto MP4 MP4 :PAI MAGIX Photo Clinic Image .PAL CorelDraw, Windows e tavolozze PaintShopPro Segnaposto PDF PDF .RTF testo Segnaposto Flash .SWF Segnaposto widget .XWR

Formati d'esportazione Formati d'esportazione Bitmap (vedi panoramica di dialogo d'esportazione GIF, PNG e JPEG, sulla pagina 358) .GIF CompuServe GIF .JPG JPEG .PSD Photoshop (vedi file PSD d'esportazione , sulla pagina 356) e d'importazione) .PNG PNG

351

352 Altri formati d'esportazione .EMF/ .WMF Windows Metafile ottimizzato HTML, HTM (pagine e siti web) .RTF Rich Text Format .WEB, .WIX, .XAR Xara

Importazione file Iportare un file •

•

Seleziona "FILE -> IMPORTA" - Questo comando unisce i contenuti del file con il documento esistente. Alcuni formati ti danno la possibilità di scegliere se importare il documento nella pagina corrente o su una nuova pagina. Con altri formati hai la possibilità di importare il file in modo convenzionale o aggiungendo un link al file e includendolo nel sito pubblicato. Oppure seleziona "FILE -> APRI" - Questo comando apre il file come un nuovo documento.

MAGIX Web Designer supporta l'importazione di file per trascinamento. Se trascini un file dal tuo File Explorer su un documento MAGIX Web Designer aperto, il file verrà importato, posizionato nella pagina corrente e centrato nel punto di rilascio. Trascina un file adatto da Windows Explorer su una barra a scelta o sulla barra di titolo della finestra di Web Designer.- In questo modo il file verrà aperto come un documento nuovo.

Sostituzione dei file immagine Puoi sostituire un'immagine caricata o una forma riempita con immagini con una tua. Per sostituire un'immagine, basta trascinare il tuo file (JPEG, GIF, PNG, BMP) dal tuo Windows File Explorer e rilasciarla sull'immagine che desideri sostituire. La tua foto verrà scalata automaticamente in modo appropriato per sostituire la foto modello. La nuova foto verrà selezionata e verrà attivato lo strumento di riempimento in modo che tu possa regolare facilmente la posizione e modificare le dimensioni della tua foto se necessario.

Importazione di file PhotoShop PSD Per importare un file PDS, importa il file con File > Importa o trascina e rilascia il file .psd in MAGIX Web Designer. I livelli del file PSD e le impostazioni di visibilità dei liveli saranno mantenute e diventeranno livelli MAGIX Web Designer. Puoi visualizzarli aprendo la GALLERIA LAYER .

www.magix.com

Importazione ed Esportazione

Consiglio: se su Photoshop hai degli oggetti separati che desideri poter spostare e modificare in maniera indipendente l'uno dall'altro in MAGIX Web Designer, posizionali in Photoshop su livelli separati prima di esportarli.

Importazione PDF Il PDF è un vettore di grafica complesso che si è sviluppato per oltre 10 anni e contiene numerosi sotto-formati ed opzioni. Il PDF fu progettato come un formato di documento trasportabile mirato solo alla visualizzazione e alla stampa e non era inteso come un formato per il trasferimento di dati tra applicazioni. In ogni caso MAGIX Web Designer. dovrebbe caricare la maggior parte dei file PDF. Il PDF è ormai il formato raccomandato nel trasferimento di file da Adobe Illustrator a MAGIX Web Designer. Salva come PDF e poi importa il file risultante su MAGIX Web Designer. I seguenti punti meritano di essere presi in considerazione: • •

•

I file PDF multipagina vengono importati su MAGIX Web Designer come documenti multipagina. Nel trasferimento su file PDF, il testo è diviso generalmente in tanti oggetti testo separati e di picole dimensioni. Questa caratteristica non compromette la visualizzazione o la stampa. MAGIX Web Designer. cerca di rimettere insieme le righe di testo in righe e paragrafi di testo modificabili, ma spesso troverai il testo diviso in oggetti separati. Perché l'estrazione del solo testo di un file PDF sia più facile, viene creato un nuovo layer che contiene solo il testo su quella pagina PDF. Per visualizzare questo livello utilizza la GALLERIA PAGINE & LAYER .

Cosa potrebbe non funzionare: •

• •

Molti file PDF contengono dei caratteri integrati. Non è possibile estrarre e installare questi caratteri nel tuo sistema legalmente. Di conseguenza, se non possiedi già i caratteri contenuti nel file PDF, essi verrano sostituiti con caratteri alternativi. File che sono codificati o protetti con una password non possono essere importati. Qualsiasi testo in un file PDF che usa dei caratteri di sottoinsieme integrati non sarà leggibile o modificabile.

Il PDF è un formaro altamente complesso e spesso è difficile da importare perfettamente. La maniera in cui devi importarlo dipende dall'uso che ne devi fare. L'opzione OTTIMIZZA PER LA VISUALIZZAZIONE rende il risultato dell'importazione simile a quello di Acrobat ma l'elaborazione potrebbe risultare più complicata. In

353

354 alternativa l'opzione OTTIMIZZA PER L'ELABORAZIONE semplicizza l'elaborazione di elementi in genere difficili da elaborare.

Importazione di foto RAW Puoi importare file RAW dalle fotocamere digitali, utilizzando il menu di importazione o trascinando il file mediante il drag& drop nella finestra di Web Designer. Le estensioni di file supportate includono: *.crw, *.cr2, *.nef,*.mrw,*raf,*.kdc,*.orf, *.dng, *.ptx, *.pef, *.anw, *.x3f Tuttavia ci sono molte estensioni diverse usate per i file RAW dai vari produttori di fotocamere digitali: se hai un file RAW con un'estensione non elencata qui sopra prova comunque a importarlo.

Importare da un sito web Puoi importare dei testi o degli elementi grafici direttamente dalle pagine web su Internet nel tuo documento oppure eseguendo un semplice copia e incolla. Per importare da una pagina web su Internet: 1. Scegli "FILE " -> "IMPORTA DA INDIRIZZO INTERNET" (o "Ctrl + Alt+ W"). 2. Digita l'indirizzo Internet (URL) della pagina o elemento grafico che desideri

importare. 3. Clicca Importa

Se l'URL inserito è quello di una pagina web, tutti i testi e le immagini che contiene verranno importati e posizionati nella tua pagina mantenendo approssimativamente le stesse posizioni. In altre parole, questa funzione ti dà la possibilità di importare un'intera pagina web con testi e grafica. Tuttavia nota che la maggior parte delle pagine web moderne sono costituite da complesse combinazioni di testo, grafica, JavaScript ed altre funzioni e, di conseguenza questo tipo di importazioni non possono fornire in MAGIX Web Designer. una rappresentazione accurata della pagina. Questo è un modo utile per sostituire un sito web esistente con un sito web di MAGIX Web Designer. Quando importi da pagine web, la lunghezza della tua pagina in MAGIX Web Designer verrà estesa automaticamente per adattarsi a testo e grafica in entrata.

www.magix.com

Importazione ed Esportazione

Esportazione file Per esportare un file: • •

Seleziona File>Esporta O premi Ctrl +  + E.

Apparirà un dialogo ESPORTAZIONE. Scegli un nome per il tuo file e seleziona il formato richiesto dalla lista drop-down SALVA COME TIPO. Alcuni dei formati sono illustrati in dettaglio di seguito:

Esporta come metafile di Windows (.wmf) I file in questo formato può essere letto da word e molti alti programmi.

Esportazione come formato Exporting as Extended Metafile Format (EMF) Le applicazioni moderne di windows supportano questo tipo di grafica vettoriale. Questo formato è disponibile per applicazioni che forniscono una opzione Paste Special. Nota che MAGIX Web Designer può contenere applicazioni come stili di riempimento, che non possono essere rappresentati in formato vettori come EMF. In questo caso parti delle immagini verranno esportate come bitmap. I vettori che possono essere esportati come vettori vengono esportati come vettori.

Esporto rapido di HTML e formati di grafica web Puoi utilizzare le opzioni del MENU FILE per esportare in modo rapido pagine e grafiche web senza dover selezionare i formati dalla lista completa delle esportazioni disponibili che appare quando si utilizza "FILE -> ESPORTA". • • •

FILE ->ESPORTA SITO WEB : esporta il documento del sito web corrente in un luogo a scelta del tuo computer. FILE ->ESPORTA JPEG : esporta la selezione corrente o la pagina corrente in un file JPEG. FILE ->ESPORTA PNG : esporta la selezione corrente o la pagina corrente in un file PNG.

Per maggiori informazioni, vedi il capitolo Per iniziare.

355

356

Esportazione come bitmap JPEG, GIF e PNG sono formati universali supportati dalla maggior parte delle applicazioni PNG è il formato a più alta qualità. il formato JPEG è più adatto a lavori fotografici ma possono produrre file compatti accettabili (è possibile controllare la qualità e la dimensione del file). Il formato GIF supporta solamente 256 colori e non ostante sia molto comune sui siti web, il formato PNG è migliore. PNG supporta anche la grafica semi trasparente (usa il True Color + opzioni Alpha) ma questo non è ancora supportato correttamente da Microsoft Internet Explorer. Meno colori hai in un file più piccolo é il file e più bassa è la qualità. Usando 256 colori o meno il programma fornisce tecniche molto avanzate per simulare una gamma di colori più ampie in questo modo puoi avere una qualità molto alta.

Importante Le bitmaps in uscita hanno la qualità impostata; quindi per ottenere i migliori risultati assicurati che Windows > Qualità o lo slider sulla barra di controllo STANDARD sia impostato su anti-aliasing.

Esportare file Photoshop PSD Photoshop è un bitmap editor, per cui quando si esporta nel formato PSD tutti gli oggetti vettore in MAGIX Web Designer. vengono rasterizzati. Nell´esportazione puoi selezionare la risoluzione (dpi). Prima di esportare salva sempre il tuo lavoro su MAGIX Web Designer. Se in futuro desideri modificare i tuoi oggetti originali, carica semplicemente MAGIX Web Designer, esegui le modifiche e poi esporta nuovamente gli oggetti richiesti. Per esportare come file PSD scelgi "File -> Esporta" e poi seleziona ADOBE PHTODHOP nell´elenco SALVA COME MODELLO.

Layer Quando si esporta al formato PSD i layer vengono mantenuti. Ogni layer viene rasterizzato come layer PSD separato, inclusi i nomi. Anche la visibilità dei layer viene mantenuta, per cui layer che erano impostati come invisibili in MAGIX Web Designer, verranno esportati e impostati come invisibili anche su Photoshop. Puoi attivare e disattivare i layer su Photoshop utilizzando la barra LAYER .

www.magix.com

Importazione ed Esportazione

Testo Puoi esportare del testo da MAGIX Web Designer perché diventi modificabile in Photoshop, ma esso deve essere su un layer personale (nell´operazione di importazione ti potrebbe venir richiesto di aggiornare gli oggetti di testo perché possano essere modificati su Photoshop.) Un testo che che compare su un layer con altri oggetti grafici verrà rasterizzato in quel layer e di conseguenza non sarà modificabile.

Esporta DPI Sarai in grado di impostare il DPI delle bitmap nel file PSD esportato. Un DPI di 96 è la normale risoluzione di Windows per cui se si esporta con 96 dpi apparirà in Photoshop al 100% della stessa grandezza così come accade con MAGIX Web Designer.

Per la stampa consigliamo di scegliere un DPI più alto. Puoi decidere se esportare tutta la pagina MAGIX Web Designer o solo le aree degli oggetti visibili.

Sommario Per ottenere la massima compatibilità e editabilità in Photoshop: • •

Per le parti del tuo disegno che desideri che su Photoshop rimangano dei layer separati, su MAGIX Web Designer posizionale su layer separati. Se desideri che il tuo testo sia modificabile su Photshop, posizionalo su un suo livello senza altri oggetti grafici.

357

358

Panoramica della finestra di dialogo JPEG, PNG e GIF

La finestra di dialogo di esportazione ha due finestre di anteprima di visualizzazione, ovvero IMMAGINE A sulla sinistra e IMMAGINE B sulla destra, in modo da poter confrontare le impostazioni di esportazione alternative o i tipi di file, fianco a fianco. Clicca sulla finestra destra o sinistra dell'anteprima per modificare l'anteprima attiva. Al di sopra della finestra di anteprima vi è un piccolo elenco a tendina che ti consente di selezionare i tre tipi di esportazione più comuni, JPEG, PNG e GIF. Quando hai selezionato anteprima A o B puoi regolare una vasta gamma di opzioni di utilizzando le cinque schede poste sotto l'anteprima. Alcune opzioni come le Opzioni paletta sono applicabili solo su alcuni tipi di file come PNG e tipi non rilevanti di JPEG Alte opzioni relative al tabulatore OPZIONI cambiano a seconda del tipo di file, ad esempio nell'esportazione di un JPEG, puoi impostare la qualità necessaria. Per cui il processo di esportazione immagine è come segue 1. Seleziona l'oggetto o gli oggetti sulla pagina che desideri esportare 2. Seleziona il menu di esportazione, oppure "Ctrl + Shift + E", inserisci uno nome di

file e seleziona il tipo di file dal menu a tendina. Il tipo principale di menu mostrerà il dialogo di anteprima descritto sopra.

www.magix.com

Importazione ed Esportazione 3. Questa finestra di dialogo puoi regolare le impostazioni oppure saltala se

preferisci mantenere le impostazioni predefinite. 4. Clicca sul pulsante di ESPORTAZIONE

Per i formati più utilizzati JPG e PNG, al punto 2 puoi invece utilizzare le operazioni dirette presenti nel MENU FILE : ESPORTA JPEG e ESPORTA PNG . Il dialogo di esportazione visualizzato include un tasto "Impostazioni" che dà accesso al dialogo delle impostazioni di importazione mostrate sopra. La maggior parte delle impostazioni di esportazione vengono salvate per le successive esportazioni. Ad esempio se regoli la qualità JPEG, la prossima volta che esporti un JPEG, verrà ripresa l'ultima impostazione relativa alla qualità. Dimensione immagine esportata Durante l'esportazione le dimensioni standard sono le stesse visualizzate sullo schermo con lo zoom al 100%. Le dimensioni dei pixel sono mostrate sotto la finestra di anteprima. Puoi regolare le dimensioni dei pixel regolando la grandezza dell'oggetto nella pagina prima dell'esportazione o inserendo valori pixel o dpi alternativi nella scheda delle DIMENSIONI BITMAP

Controlli Questi tasti modificano l'anteprima dell'immagine ma non hanno effetti sul file esportato. •

• • • •

Strumenti ZOOM : clicca su una anteprima per zoomare. Clicca Shift-Click zoom per zoom out. Trascina su una area dell'anteprima per zoomare sulla stessa. Strumento PUSH : permette di trascinare l'immagine nella finestra di anteprima. ZOOMA PER ADATTARE: scala l'immagine di anteprima per adattare la finestra. ZOOMA AL 100%. scala l'immagine alla dimensione massima (100%) ZOOMA LA RISOLUZIONE DELL'IMMAGINE 1:1 non ha effetti su file GIF. Scala l'immagine in modo che un pixel sulla bitmap sia un pixel sullo screen. Questo è utile per l'anteprima nella bitmap.

Lo strumento è rilevante solo per file che usano meno di 256 colori (ma vedrai i risultati solo per la TABELLA DELLE OPZIONI e selezionata): COLOR SELECTOR : muovi il puntatore del mouse sopra l'immagine per

selezionare i colori. Clicca per selezionare il colore sulla tavolozza. È possibile usare le OPZIONI TAVOLOZZA per modificare il colore.

359

360 i tasti di anteprima sono disponibili su tutte le tabelle di questo dialogo. Questo aggiorna l'anteprima per visualizzare le modifiche che hai apportato alle opzioni di esportazione.

ANTEPRIMA :

Tabella tavolozza opzioni Questa tabella ti permette di elaborare le impostazioni del colore dell'immagine che hai esportata.

Dithering & Tavolozza Le opzioni DITHERING E TAVOLOZZA si applicano solamente se esporti al massimo 256 colori e hanno effetti sulla visualizzazione e i colori dell'immagine. Si consiglia di utilizzare sempre una TAVOLOZZA OTTIMIZZATA . Imposta DITHER su nessuno che produce file più piccoli ma può essere .

Profondità colore Scegli il numero di colori che richiede la tua bitmap. Più colori ci sono più grande sarà il file e più alta sarà la qualità. L'opzione TRUE COLOR supporta fino a 16 milioni di colori. TRUE COLOR+ALPHA include applicazioni semi trasparenti come le ombre e la trasparenza. Questo è il formato consigliato per le applicazioni che supportano canali alpha nei file PNG. Se scegli 256 colori o meno, puoi scegliere se usare la trasparenza semplice (Icona "Bicchiere"). Questo non supporta pixel di semi trasparenza solo on/off pixel completamente opachi o completamente trasparenti e potrebbe creare bordi dentati.

Max Colors Se selezioni la profondità di colore di 256 o meno puoi controllare esattamente quanti colori vengono usati nel file. Questo fornisce un alto livello di controllo sulla qualità contro la dimensione del file. Inserisci la quantità di colori richiesti e premi il tasto "ANTEPRIMA" .

Tasti Questi tasti (eccetto lo SFONDO TRASPARENTE) si applica quando vengono esportate immagini con 256 colori o meno. Questi file vengono creati con una tavolozza di colori limitata e questi controlli forniscono un maggiore livello di controllo sui colori della tavolozza. Vedi COLOR SELECTOR per capire come selezionare un colore o clicca in colore sulla TAVOLOZZA).

Blocca un colore

www.magix.com

Importazione ed Esportazione Puoi specificare la quantità di colori che vuoi sulla tavolozza delle bitmap esportate. Bloccando i colori assicuri che questi siano sempre visualizzati sulla tavolozza.. Clicca su un colore per selezionarlo e quindi clicca sul comando per bloccarlo. Apparirà un piccolo quadrato sul tasto alla sinistra del colore che sta ad indicare che il colore è bloccato.

Rendi sicura per il web una tavolozza colore Se clicchi su questo tasto il colore cambierà in uno dei 216 della tavolozza dei colori web. Questo non è più importante o rilevante visto che tutti i computer possono mostrare milioni.

Clicca per rendere l'immagine di sfondo trasparente Questo fa in modo che ogni area non coperta dagli oggetti sia trasparente. La selezione di questa opzione rende un elemento della tavolozza trasparente.

Rendi una tavolozza trasparente Converte i colori inseriti trasparenti. Nota la differenza tra questa opzione, che rende parti dell'oggetto selezionato trasparenti e quella che la rende le aree dietro gli oggetti selezionati trasparenti.

Cancella un colore dalla tavolozza Cancella il colore dalla tavolozza. Ogni area nella bitmap dove è in uso il colore cancellato userà il colore più simile a quello cancellato. Meno colori hai in un file più piccolo è il file bitmap.

Ripristina colore cancellato Ripristina il colore cancellato

Rendi una tavolozza trasparente Aggiungi 28 colori alla tavolozza. Questi colori consistono nel sistema di colori di Window e un certo numero di colori primari. Questo garantisce che la paletta include un'estensione di colori e può migliorare la qualità dell'immagine, specialmente se contiene un ampia gamma di colori.

361

362

Scheda dimensioni bitmap Con questa scheda puoi modificare le dimensioni dell'immagine esportata.

Dimensioni bitmap e risoluzione Puoi modificare le dimensioni della bitmap esportato modificando: •

•

DIMENSIONI: inserisci la larghezza e l'altezza desiderata in uno dei campi. Considera che le proporzioni della bitmap sono fisse e, quindi, la modifica di una dimensione cambierà in automatico anche l'altra. DIMENSIONI è più adatto di SCALATURA se vuoi creare una bitmap con delle dimensioni specifiche in pixel. SCALATURA: (non disponibile per JPEG & PNG). Questo comando ti permette di scalare la bitmap secondo un valore percentuale. SCALATURA è più adatto di Dimensioni se, ad esempio, vuoi una bitmap più grande del 50% rispetto all'originale. RISOLUZIONE: (non disponibile per GIF & BMP) inserisci la risoluzione nel campo DPI . Se stai esportando un'immagine per guardarla su uno schermo (ad es. un sito web), in genere non avrai bisogno di un'impostazione più alta di 96 dpi. (se hai bisogno di esportare su un display Retina, puoi anche eseguire automaticamente l'esportazione con una risoluzione più alta a 192 dpi).

Area da salvare La bitmap può essere creata usando una di queste aree del documento: • • •

PAGINA :

l'intera area della pagina. l'area ricoperta da oggetti. SELEZIONE : l'area ricoperta da oggetti nella selezione. Disponibile solo se gli oggetti sono selezionati. DISEGNO :

Anti-aliasing Anti-aliasing migliora l'aspetto delle grafiche smussando i bordi irregolari: •

•

MANTIENI ANTIALIASING SCHERMO :

la bitmap esportata usa il medesimo posizionamento mostrato sullo schermo ed ha, quindi, antialiasing identico. Ciò è visibile nei bordi degli oggetti che appaiono leggermente sfocati perché non rientrano esattamente nei confini dei pixel. RIDUCI ANTIALIASING VISIBILE : questo comando riposizionerà leggermente gli oggetti di frazioni di pixel per ridurre l'antialiasing intorno ai bordi della bitmap esportata. Se non sai quale opzione scegliere, seleziona questa.

Inserisci un HTML Image Tag negli appunti Ciò ti permette di salvare l'informazione base HTML IMG tag quando salvi l'immagine bitmap. Puoi, quindi, incollare il tag nel tuo testo o nell'editor pagina HTML esterno.

www.magix.com

Importazione ed Esportazione

Esporta anche immagini bitmap Retina (192dpi) Se selezioni questa opzione puoi esportare simultaneamente un'immagine ad alta definizione Retina con 192 dpi. Questa opzione salva la tua esportazione due volte se hai bisogno di una risoluzione per dispositivi con Retina display a 96 e 192 dpi. Per immagini JPEG e PNG l'operazione è valida solo se hai selezionato l'opzione con 96 dpi. Per maggiori informazioni su immagini Retina, consulta Immagini ad alta risoluzione.

Scheda "Opzioni" Tramite questa scheda puoi alterare la compressione JPEG ed attivare opzioni progressive/di annidamento se necessario. Qualità JPEG: (Solo JPEG) un valore basso si traduce in un file di piccole dimensioni con una perdita di qualità mentre un valore alto altera di poco le dimensioni ma mantiene un'alta qualità. Nota che il file viene compresso anche con un valore del 100%. Se lo si imposta al 75% la copressione non causa una perdita di qualità visibile per la maggior parte degli utilizzi. Interlacciato: (solo GIF e PNG) è come un JPEG.Nel browser prima l'immagina appare come una bassa risoluzione. Al progredire del caricamento del file corrisponde anche un aumento della risoluzione. Trasparente: (solo GIF e PNG) ogni area non coperta dall'oggetto selezionato diventa trasparente. Se si seleziona questa opzione, automaticamente una voce della paletta diventa trasparente. Esporta ogni layer ad un file proprio: se selezioni questa opzione durante l'esportazione di un design che contiene layer multipli, si crea un file separato che viene esportato per ogni layer. I nomi di ogni layer (come impostato nella GALLERIA PAGINE & LAYER ) sono utilizzati per nominare i file esportati.

Anteprima nel browser Usando le aree A e B di anteprima nel dialogo di ESPORTAZIONE (mostrata sopra), puoi selezionare la migliore combinazione tra dimensione e qualità per la grafica web. Inoltre il miglior test è controllare come appare la grafica nel browser. Questa tabella fornisce un numero di opzioni per l'anteprima. Clicca il tasto ANTEPRIMA BROWSER per aprire il browser e visualizzare l'anteprima.

363

364

Personalizzazione Web Designer Modificare il documento modello vuoto I documenti modello vuoti sono opzioni disponibili alla voce "FILE -> NUOVO" Modelli già pronti sono presenti nella Galleria progetti (o File ->Nuovo dalla Galleria progetti). Per aggiungere un documento modello vuoto: 1. apri un documento esistente ("File -> Apri", o "Ctrl + O") oppure creane

uno nuovo con il tasto NUOVO o la barra di controllo STANDARD o con "Ctrl+N". 2. Esegui ogni modifica necessaria (come modificare le dimensioni della pagina, aggiungere un logo o un messaggio). Puoi modificare un documento modello come un qualsiasi normale documento. 3. Quando sei soddisfatto delle modifiche scegli "File -> Salva modello" e scegli un nome. Per far diventare il tuo modello il modello predefinito (cioè quello che appare sempre quando apri Web Designer e quando premi "Ctrl + N"), durante il salvataggio, scegli l'opzione UTILIZZA COME MODELLO PREDEFINITO .

Visualizzazione delle tue icone nella scheda di un browser: favicons Potresti voler visualizzare le tue icone personalizzate, per esempio, sulle schede delle pagine del tuo sito quando vengono mostrate in un browser. Web Designer ti permette di fare questo applicando il nome "favicon" alla scheda della tua icona. Per creare un "favicon" disegna o trascina e rilascia sulla pagina web l'immagine che desideri utilizzare. L'immagine può essere di qualsiasi dimensione e verrà adattata in scala automaticamente quando mostrata in un browser. Cliccaci sopra poi clicca il tasto Nomi sulla destra della barra informazioni dello STRUMENTO DI SELEZIONE. Nel dialogo Nomi, digita "favicon" nella casella APPLICA NOMI e clicca AGGIUNGI e poi CHIUDI .

www.magix.com

Personalizzazione Web Designer Apri l'anteprima del tuo sito nel browser di tua scelta. Il modo più facile è cliccare su una delle icone per l'anteprima e nella finestra di anteprima di MAGIX Web Designer per poi scegliere uno dei browser posti in alto a destra nella finestra di anteprima. La scheda della tua pagina web è visualizzata nell'icona personalizzata, come mostrato nell'esempio sotto.

Puoi utilizzare un solo favicon per sito web. Pubblica il sito per vedere il tuo favicon.

Opzioni nel menu Strumenti Comandi veloci tastiera: Ctrl+O. L'opzioni di questo menu apre il dialogo OPZIONI. Questo ti permette di impostare varie opzioni di Web Designer. Il tasto OK sul fondo del dialogo applica ogni modifica che hai eseguito e chiude il dialogo. Il Tasto APPLICA, applica le modifiche ma mantiene aperto il dialogo sullo schermo. In questa maniera è possibile effettuare altre modifiche.

365

366

Scheda generale

Layer attuale sempre visibile e elaborabile Il capitolo Layers (sulla pagina 337) descrive nei dettagli sui layer e la galleria Layer. Se questa opzione Ă¨ selezionata, la selezione di un LAYER nella galleria automaticamente lo rende visibile e elaborabile. Se questa opzione Ă¨ disattivata lo stato elaborabile e visibile di un layer rimane immodificato quando selezioni il layer.

Applica ai nuovi oggetti gli attributi piĂš recenti Esempi di attributi sono larghezze di linee, tipi di tratteggio, teste di frecce, colori, riempimenti di colore e di tipo di riempimento.

www.magix.com

Personalizzazione Web Designer Se questa opzione è impostata, ai nuovi oggetti vengono applicati gli attributi dell'oggetto che è stato disegnato o selezionato per ultimo. Per esempio puoi applicare ad una forma esistente un riempimento rosso e una linea di colore verde. Se poi disegni una nuova forma anch'essa avrà un riempimento rosso e una linea di colore verde. Vedi la sezione "Attributi correnti (sulla pagina 62) del capitolo "Per iniziare" per avere una descrizione completa degli attributi correnti e di questa opzione. Questa opzione è già attiva come impostazione predefinita.

Chiedi prima prima di impostare gli attributi correnti Questa opzione viene applicata quando si cambia gli attributi correnti. ( questo avviene se cambi un attributo senza che siano stati selezionati oggetti.) Se questa opzione è stata selezionata, ti viene chiesto di confermare se vuoi cambiare gli attributi. Se questa opzione non è stata selezionata, le modifiche vengono effettuate senza conferma.

Rendi i gruppi trasparenti Vedi capitolo Trasparenza (sulla pagina 235) per maggiori informazioni Se applichi la trasparenza ad un gruppo di oggetti, il programma applicherà la trasparenza ai gruppi come se fossero oggetti (es. non vedrai singole trasparenze all'interno del gruppo). Deselezionando questa opzione la trasparenza verrà applicata separatamente ad ogni oggetto del gruppo.

Mantieni i nomi dei livelli importati Quando questa opzione viene impostata, le informazioni sui livelli sono vengono protette se importi modelli o altri file. Se il comando IMPORTA LIVELLI NEL LIVELLO ATTIVO è selezionato, tutti gli oggetti importati appaiono nel livello corrente e le informazioni livellanti nei dati in entrata vengono ignorate. IMPORTA LIVELLI IN NUOVI LIVELLI creerà un livello per ogni livello importato.

File recenti Il menu File mostra un elenco dei file caricati o salvati più di recente nel sotto-menu "Apri documenti recenti". In questo modo puoi caricare velocemente uno di quei file. Questa opzione ti permette di modificare il numero di file elencati (tra 1 e 20 file).

367

368

Selezione oggetto Questa opzione ti permette di modificare questa impostazione predefinita con Selezione oggetto (in cui puoi trascinare un triangolo di selezione sugli oggetti che desideri selezionare). Qui puoi fare in modo che vengano selezionati anche gli oggetti toccati dal rettangolo o solo gli oggetti completamente all'interno del rettangolo.

Il documento deve diventare un sito web. Questa opzione indica a MAGIX Web Designer che il documento deve essere esportato come sito web. Cambia abilmente il comportamento del programma riguardo a come trattare i link sugli oggetti. Se questa opzione non è attiva e applichi un link ad un oggetto che si trova dentro ad un gruppo, quel link non sarà funzionante nel sito web esportato in quanto il gruppo intero è esportato con una immagine e il link su solo un membro del gruppo viene ignorato quando si esporta il sito web. In ogni caso se questa opzione è attiva il link viene evidenziato nel gruppo come se fosse stato applicato al gruppo e non ad uno solo dei suoi membri. Quindi se per esempio applichi inavvertitamente un link al testo di un tasto, invece che su l'intero tasto, con questa opzione attiva, il link viene applicato al tasto intero. Questa opzione è già attiva in tutti i modelli web.

Impostazioni browser web compatibili con lunghezze riga Vecchi browser web non erano in grado di rappresentare i testi in modo accurato. Quando richiedevi una certa dimensione del carattere, questi la ingrandivano o diminuivano, mostrando spesso una dimensione o larghezza sbagliata (rispetto al design del carattere originale e rispetto a come Web Designer, Word, i formati PDF e tutti i moderni programmi DTP lo visualizzerebbero). Le versioni precedenti di Web Designer tentavano di compensare queste imprecisioni fornendo una opzione di IMPOSTAZIONI DI COMPATIBILITÀ VECCHI BROWSER PER LUNGHEZZA RIGHE che significava che il testo era farmattato in modo leggermente diverso: la lunghezza delle righe sarebbe leggermente diversa rispetto ai normali documenti stampa o allo stesso testo in word o in formato PDF. I web browser più moderni sono in grado di visualizzare i testi più accuratamente: adesso è possibile specificare la dimensione del carattere in px o pt, o persino dimensioni frazionarie saranno visualizzate in modo accurato nella maggior parte dei casi*. La formattazione del testo dovrebbe essere lo stesso in documenti stampa, PDF e documenti layout di pagina. Ciò include crenatura automatica, crenatura manuale e spaziatura (tra le lettere) Se carichi un documento web di un Web Designer più vecchio apparirà un dialogo che ti suggerisce di aggiornare la formattazione del testo. Questo prepara il tuo documento web in modo che sia visualizzato in modo accurato sui più moderni web browser.

www.magix.com

Personalizzazione Web Designer

Eseguire l'aggiornamento della formattazione per rendere i testi compatibili con browser più moderni fa sì che il testo possa rifluire a causa di lievi differenze delle lunghezze delle linee, causando colonne di testo più o meno alte rispetto a prima. Una volta che avrai eseguito l'aggiornamento formattazione, il testo del documento resterà così e non ti sarà più chiesto di ripetere l'operazione. Per annullare la formattazione e tornare al vecchio stile, usa la SCHEDA GENERALE degli "STRUMENTI" > dialogo "OPZIONI" e accertati che sia selezionata l'opzione IMPOSTAZIONI DI COMPATIBILITÀ VECCHI BROWSER PER LUNGHEZZA RIGHE . Oppure, se stai caricando un documento più vecchio in Web Designer, seleziona semplicemente l'opzione MANTIENI FORMATTAZIONE ORIGINALE. *Al momento della creazione di un documento browser come Safari e Chrome usati su dispositivi portatili come smartphone e tablet approssimeranno le dimensioni del carattere a quelle del pixel più vicino.

Limitazione angolo Questa funzione ha effetto se si ruota o si muove un oggetto premendo il tasto Ctrl. È possibile selezionare dal menu o inserisci un valore in gradi.

Dimensione Nudge Questa funzione ha effetto quando si muovono gli oggetti usando il tasto freccia sulla tastiera. Questo casella testo definisce quanto si muove l'oggetto ogni volta che si tocca un tasto. Se il documento usa unità in scala. (per esempio 1 metro:1 km) questo dialogo mostra la distanza nell'unità in scala. (quando si realizza uno spostamento, Ctrl e  aumento la distanza di spostamento tra le cinque e le dieci volte.

Duplicazione distanza Elabora > Duplica (Ctrl+D) crea un duplicato del oggetto originale. Questa casella testo fissa la distanza dell'offset. I valori positivi creano il duplicato sopra o a destra dell'oggetto originale.I valori negativi creano un duplicato in basso a sinistra.

369

370

Scheda Griglia e righello

Spazio di griglia e righello Lo SPAZIO PRINCIPALE definisce la distanza tra la griglia principale e le divisioni del righello. L'unità utilizzata per la griglia e i righelli sono definite per le unità che utilizzi nell spazio principale. Per esempio inserendo una spaziatura maggiore di due centimetri per la griglia maggiore le unità della griglia e del righello si imposteranno in centimetri e le unità di pagina specificata nelle opzioni delle unità non avranno importanza.

Coordina direzione Qui puoi modificare la direzione delle coordinate di pagina.

www.magix.com

Personalizzazione Web Designer

Scheda Mouse

Funzione tasto mouse Web Designer ti da una gamma di azioni possibili cliccando il tasto destro o sinistro del mouse. Se per esempio sei mancino puoi impostare il tasto destro come tasto principale, oppure dare ad entrambe i tasti le stesse funzioni. Azioni possibili • • • • • • • •

Click normale: almeno uno dei tasti dovrebbe esse sempre assegnato come click normale. Shift + click. Ctrl+click. Alt+click. Mostra un menu pop-up (vedi sopra). Attiva modalità schermo interno (descritto nel capitolo per la gestione del documento (sulla pagina 85)). Zoom in o out - clicca per zoomare in Shift + click per zoom out. descritto nel capitolo di gestione del documento (sulla pagina 86)). Strumento Push (come Shift + F8)

371

372 Il menu pop-up contiene opzioni adatte per l'oggetto sul quale clicchi. Per esempio, per la maggior parte dei tipi d'oggetto il menu contiene TAGLIA, COPIA, INCOLLA, CANCELLA, DUPLICA, CLONA (descritte nel capitolo relativo al lavoro con l'oggetto) (sulla pagina 111). MOVIMENTO CON LA ROTELLA DEL MOUSE: puoi cambiare le azioni della rotella del mouse da qui, Scorrimento o Zoom. La prima è standard per il Web Designer, la seconda è per ottenere compatibilità con MAGIX Foto Designer.

Clicca su RIPRISTINA STANDARD per ritornare all'assetto originario dei tasti. Questa azione ha effetti immediati senza cliccare su OK o APPLICA. Il Pannello di controllo di windows ti permette di cambiare le funzionalità dei tasti del mouse (destro con sinistro).

Raggio dell'allineamento magnetico Il magnetismo è descritto nel capitolo riguardo al lavoro con l'oggetto (sulla pagina 131) Questi campi di testo definiscono quanto vicino puoi trascinare gli oggetti prima che si attacchi ad un oggetto magnetico. Queste distanze sono riferite allo schermo, indipendenti da ogni scala del documento.

Scheda Dimensioni pagina

www.magix.com

Personalizzazione Web Designer Se l'opzione "TUTTE LE PAGINE DEL SITO CON LA STESSA GRANDEZZA non è selezionata, alle pagine del documento possono essere assegnate dimensioni diverse utilizzando queso dialogo. Per impostare la grandezza di pagina, scegli una delle misure fornite dall'elenco a tendina o scegli "Personalizza" e inserisci la laghezza e altezza che desideri. Se l'opzione BLOCCA DIMENSIONI DI PAGINA è attiva non puoi ridimensionare una pagina trascinando il fondo o il bordo destro. La pagina non si allarga neanche se un oggetto anti-sovrapposizione viene spinto oltre il margine inferiore.

Scheda Backup Questo tab ti permette di di attivare e disattivare la funzione di backup automatico. Questa funzione salva ad intervalli regolari una copia di tutti i tuoi documenti aperti modificati. Si consiglia di tenere attiva questa funzione. Puoi anche decidere se venire informato della presenza di documenti che non sono stati salvati al momento della chiusura del programma o se tutti i documenti aperti devono venir salvati e conservati fino al nuovo avvio del programma. Vedi il capitolo Utilizzo dei documenti (sulla pagina 95) per maggiori dettagli su questa funzione.

Barre di controllo Puoi spostare le barre di controllo di Web Designer su posizioni diverse della finestra, riordinare i pulsanti, creare nuove barre di controllo, spostare o copiare pulsanti tra le barre di controllo e tante altre operazioni. Non puoi modificare la barra informazioni dipendente dalla barra informazioni o in contenuti delle barra fly-out poste sulla barra degli strumenti principale o sulla barra superiore.

Modalità schermo intero Web Designer ha due configurazione delle barre di controllo: • •

Una configurazione appare quando la finestra ha le dimensioni normali. La seconda configurazione appare selezionato windows > Schermo intero.

Ogni modifica ad una configurazione della barra di controllo (per esempio modifica dimensioni o spostamento) non ha effetti sulle altre configurazioni. Le modifiche ai tasti singoli (per esempio, impostazione opzioni) applica in entrambe le modalità schermo.

373

374

Mostrare & nascondere le barre di controllo La visualizzazione delle barre di controllo Ă¨ affidata alla finestra di dialogo BARRE DI CONTROLLO ("WINDOW" > "BARRE DI CONTROLLO "). Per ogni nome di una barra di controllo Ă¨ presente una casella di controllo. Un segno di spunta della casella mostra che la barra di controllo Ă¨ mostrata in quel momento. Per mostrare o nascondere la barra di controllo, clicca sull'apposita casella. Puoi attivare o disattivare velocemente le BARRE DI CONTROLLO cliccando con il tasto destro del mouse su un'area vuota sulla parte superiore della finestra del programma. Utilizza il menu a tendina per scegliere le barre che desideri vengano visualizzate.

Barre di controllo Docked e Free Normalmente le barre di controllo sono fisse (ai bordi della finestra). Muovendo la finestra si muovono anche le barre di controllo.

www.magix.com

Personalizzazione Web Designer Le barre di controllo possono anche essere spostate. Queste non seguono gli spostamenti della finestra.

Carre di controllo mobili (Floating)

Barre di controllo fisse (Docked)

Puoi nascondere le BARRE DI CONTROLLO usando l'apposito dialogo (Descritto sopra) o cliccando l'icona CHIUDI. Per spostare le barre di controllo, trascinala dal bordo della finestra fino all'area di elaborazione o fuori dalla finestra Web Designer. Per fissare una barra di controllo, trascina su: • • •

Bordo della finestra barra del menu. o un'altra barra di controllo

Una barra di controllo mobile ha un doppia linea durante il trascinamento. Questo diventa una linea singola quando si trova in una posizione dove può essere fissato. Se vuoi che la barra di controllo rimanga mobile, tieni premuto il tasto Ctrl durante il trascinamento.

Modifica delle dimensioni di una barra di controllo Muovi il puntatore del mouse sul bordo della barra di controllo. Questo diventa una freccia con doppia testa. Adesso puoi trascinare il bordo per modificare le dimensioni delle barre di controllo.

Creazione di una nuova barra di controllo Per creare una nuova barra di controllo: •

Trascina un tasto su nelll'area di elaborazione o fuori dalla finestra. Si apre una nuova barra di controllo che contiene il tasto.

O clicca sul NUOVO sul dialogo della BARRA DI CONTROLLO. Questo ti permette di creare una nuova barra di controllo e assegnare un nome. La nuova barra di controllo è vuota. Lo spostamento dei tasti è descritto di seguito.

375

376

Cancella le barre di controllo Ă&#x2C6; possibile cancellare le barre di controllo vuote. Quindi muovi i tasti su un'altra barra di controllo. Chiudi la barra di controllo (cliccando su CHIUDI o usando il DIALOGO DELLE BARRE DI CONTROLLO . Le barre di controllo Ă¨ cancellato automaticamente quando esci da Web Designer.

Strumenti e tasti moving I tasti e gli strumenti move 1. Muovi il puntatore del mouse su tasto che vuoi spostare. 2. Tieni premuto il tasto "Alt" per spostare il tasto oppure "AltGr" per copiare il

tasto quando viene usato da un utente definito sulla barre di controllo o su altre barre. 3. Trascina il tasto verso: Un area differente sulla stessa barra di controllo. Un altra barra di controllo O sull'area di elaborazione/off Web Designer per creare una nuova barra di controllo. Non Ă¨ possibile spostare sulla infoBar.

Nascondi tasti e strumenti Muovi i tasti e gli strumenti non desiderati su un'altra barra di controllo e poi nascondi la barra di controllo (descritto sopra). Se in futuro avrai bisogno del tasto o dello strumento usa il dialogo delle BARRE DI per visualizzarli di nuovo.

CONTROLLO

Non puoi cancellare tasti e strumenti.

www.magix.com

Comandi veloci del menu e della tastiera

Comandi veloci del menu e della tastiera Introduzione In molte posizioni queste descrizioni si riferiscono all'oggetto selezionato. In molti casi l'azione descritta viene applicata anche se sono stati selezionati più oggetti. Noi usiamo gli oggetti selezionati come Spesso è possibile selezionare le opzioni da un menu, la barra di controllo o con un comando veloce delle tastiera. Se esiste un tasto sulla barra di controllo e/o un comando veloce della tastiera, vengono mostrati dopo il nome del menu. Questo significa per esempio che esiste un tasto sulla barra di controllo standard o un comando veloce che ha lo stesso effetto del comando del menu. es:Ctrl+N. Nuovo (Standard control bar o Ctrl+N)

Menu File Nuovo (Standard control bar o Ctrl+N) Apre un nuovo document o

Novità del Catalogo contenuti Apri il Catalogo contenuti online. Seleziona, modelli, widget e clipart dalle categorie web, layout, foto e grafiche del catalogo.

Nuovo dalla galleria progetti Questa opzione apre la galleria progetti (se non fosse già aperta) e ti permette di scegliere un modello per un nuovo documento. Clicca nella galleria sull'icona a forma di cartella per aprire una cartella e clicca due volte su una miniatura di un modello per avviare un nuovo documento utilizzando quel modello. Puoi utilizzare anche la galleria disegni cliccando l'icona posta sulla barra strumenti delle gallerie

Apri (barra di controllo standard o Ctrl+O) Apre una nuova finestra di editing e carica il file in quest'ultima. Questo file può essere: •

un file Web Designer .web da visionare o per modificare un documento Web Designer .web esistente;

377

378 •

oppure uno degli altri formati di importazione (vedi Importazione & esportazione (sulla pagina 349) per avere una lista dei formati). In questo caso si apre un nuovo documento contenente il file.

File recenti Una lista dei file salvati o caricati recentemente. In questa maniera è possibile caricare velocemente ogni tipo di file. Il numero dei file di questa lista può essere modificato. Vai al capitolo Personalizza (sulla pagina 364) Web Designer per ulteriori dettagli.

Chiudi (Ctrl+W) Chiude la finestra di elaborazione attiva. Web Designer rimane caricato. Verrai avvisato se ci sono delle modifica non salvate.

Salva (Standard control bar o Ctrl+S) Salva i documento selezionato

Salva come Quest'opzione apre una finestra di dialogo che ti consente di salvare il documento in una cartella differente o con un nome differente.

Salva tutti Salva tutti i documenti caricati

Salva modelli Salva i documento selezionato come modello. Vai al capitolo Personalizza Web Designer per ulteriori dettagli. (sulla pagina 364)

Importa (Ctrl+Alt+I) Importa questo elemento nel documento selezionato. Il file può essere di ognuno dei formati di importazione (vedi Importazione & Esportazione (sulla pagina 349) per maggiori informazioni). Nota la differenza tra APRI e IMPORTA: entrambe le azioni importano tanti file di formati diversi ma APRI apre un nuovo documento. IMPORTA carica il file in un documento già aperto.

www.magix.com

Comandi veloci del menu e della tastiera

Importa da indirizzo Internet (Ctrl+Alt+W) Importa testo e grafiche nel tuo documento direttamente da delle pagine web su internet . Inserisci l'URL (indirizzo Internet) del sito che desideri importare nella casella di dialogo.

Esportazione (Ctrl+Shift+E) Oppure clicca co il tasto destro e seleziona ESPORTA. Ti permette di esportare il documento in uno dei formati di esportazione supportati da Web Designer (vedi Importazione & esportazione (sulla pagina 349) per consultare l'elenco formati).

Esporta JPEG Anche nella barra strumento per l'esportazione. Oppure clicca con il tasto destro e scegli Esporta - Esporta JPEG. Ti permette di esportare gli oggetti selezionati, una pagina o l'intero documento nel formato JPEG.

Esorta PNG Ti permette di esportare gli oggetti selezionati, una pagina o l'intero documento nel formato PNG.

Anteprima pagina web (Shift + F5) Esporta e fornisce un'anteprima della pagina corrente del documento del sito web corrente Puoi visualizzare l'anteprima cliccando il tasto anteprima della barra strumenti web. Clicca su un tipo di browser in cima alla finestra di anteprima per visualizzare l'anteprima della tua pagina nel browser preferito. Apre l'anteprima della pagina con Google Chrome Apre l'anteprima della pagina con Mozzilla Firefox Apre l'anteprima della pagina con Internet Exlorer Apre l'anteprima della pagina con Opera Apre l'anteprima della pagina con Safari

379

380

Anteprima del sito web Esporta e visualizza l'anteprima del documento web corrente. Il documento è esportato nella stessa locazione in cui è stato esportato l'ultima volta o in una locazione temporanea se il sito non è stato ancora esportato. Dopodiché appare una finestra di navigazione che mostra la prima pagina del sito web. Questo è il modo più veloce per avere un'anteprima del tuo sito durante la lavorazione. Oppure puoi aprire l'anteprima sul tasto sulla barra strumenti web.

Esporta sito web Anche nella barra strumento per l'esportazione.

Esporta il documento corrente come HTML

Pubblica il sito web Questa funzione esegue la stessa operazione del pulsante sulla barra degli strumenti web. Esporta e pubblica il documento web corrente sul tuo spazio web. Se non hai ancora inserito i dettagli FTP per il tuo spazio web, la scheda PUBBLICA della finestra di dialogo PROPRIETÀ WEB verrà mostrato per prima. In questo modo il sito verrà pubblicato nel tuo spazio web. Durante le operazioni di pubblicazione apparirà un indicatore di avanzamento. Per maggiori informazioni sulla pubblicazione consulta il capitolo Per cominciare.

Info documenti Questa opzione mostra una casella di informazione riguardo il documento selezionato che include i font in utilizzo nel documento corrente.

Opzioni di pagina. Clicca con il tasto destro e seleziona OPZIONI PAGINA . Ti permette di modificare il layout di pagina, le dimensioni ecc.

Esci Chiudi tutte le finestra e rimuovi Web Designer dalla memoria. Verrai avvisato se ci sono delle modifica non salvate.

www.magix.com

Comandi veloci del menu e della tastiera

Menu Elaborazione Annulla (Standard control bar o Ctrl+Z) Annulla l'operazione precedente. Il nome di questa funzione corrisponde all'ultima azione eseguita. Per esempio ANNULLA TAGLIO.

Ripristina (Standard control bar o Ctrl+Y) Cancella l'ultimo comando ANNULLA. Il nome di questa funzione corrisponde all'ultima azione eseguita ANNULLA.

Taglio (Elabora Barra di controllo o Ctrl+X) Taglia l'oggetto selezionato sulla clipboard. Il nome di questa funzione corrisponde l'ultimo di tipo di oggetto selezionato. Per maggiori informazioni consulta il capitolo Utilizzo dell'oggetto , sulla pagina 116)

Copia (Edit control bar o Ctrl+C) Copia l'oggetto selezionato sulla clipboard. Il nome di questa funzione corrisponde l'ultimo di tipo di oggetto selezionato. L 'oggetto rimane nel documento.

Incolla (barra di controllo elaborazione o Ctrl+V) Oppure clicca co il tasto destro INCOLLA . Incolla i contenuti degli appunti nel documento selezionato. Il testo di questa opzione riflette i contenuti degli appunti (consulta: Gestione oggetti , sulla pagina 116). Talvolta quando incolli i contenuti degli appunti in un documento, possono essere utilizzati più formati. In questo caso compare la casella di dialogo PASTE SPECIAL dove scegliere un formato. Incolla testo non formattato Incolla i testi memorizzati negli appunti, sul tuo documento senza dover formattare. Incolla nella posizione Funziona come il comando INCOLLA con la differenza che l'oggetto verrà incollato nella stessa posizione da cui è stato copiato. Questa funzione è utile quando si debbano spostare degli oggetti da un livello o da una pagina ad altri livelli o pagine senza dover cambiare la loro posizione X/Y. Incolla formato/attributi Preserva il formato (per es., carattere e dimensioni) o attributi di stile (per es. colore di linea e di riempimento) dell'oggetto incollato.

381

382 Incolla nel layer corrente Funziona come INCOLLA NELLA POSIZONE, ma in questo caso l'ogetto verrà incollato solo sul layer corrente.È utile se desideri mostrare o nascondere solo l'oggetto incollato quando i layer sotto e sopra sono visibili. Incolla nella posizione sul layer corrente Funziona come il comando INCOLLA NEL LAYER CORRENTE con la differenza che l'oggetto verrà incollato in the current layer nella stessa posizione da cui è stato copiato.

Cancella (Elabora o Cancella le barre di controllo standard) Cancella l'oggetto selezionato. Il nome di questa funzione corrisponde l'ultimo di tipo di oggetto selezionato.

Seleziona tutto (Ctrl+A) Seleziona tutti gli oggetti dei layer elaborabili (I layer elaborabili e bloccati sono descritti nel capitolo Layer, sulla pagina 337).)

Annulla selezione/Resetta attributi correnti (Esc) Deseleziona tutti gli oggetti. Se non ci sono elementi selezionati, gli attributi correnti, sulla pagina 62) vengono riportati ai valori predefiniti. Basta premere due volte il tasto ESC.

Duplica (barra comandi elaborazione o Ctrl+Alt+D) Oppure clicca con il tasto destro e seleziona DUPLICA. Copia l'oggetto selezionato posizionando la copia leggermente spostata dall'originale. La copia diventa l'oggetto selezionato. La distanza di offset può essere personalizzata (vedi la sezione Come personalizzare Web Designer, sulla pagina 369).

Clona (Ctrl+K) Come la funzione DUPLICA copia l'oggetto selezionato ma posizione la copia direttamente sull'originale. La copia diventa l'oggetto selezionato.

Pagine Oppure clicca con il tasto destro e seleziona PAGINE. Il sottomenu Pagine ti permette di aggiungere o rimuovere pagine da un documento multi pagina, duplicare la pagina corrente e spostare la pagina corrente verso l'alto e verso il basso. Per maggiori informazioni vedi il capitolo Documenti multipagina (sulla pagina 89).

www.magix.com

Comandi veloci del menu e della tastiera

Menu Ordina Spostati sul livello davanti (barra di controllo dell'arrange o Ctrl+Shift+U). Oppure clicca con il tasto destro e scegli ORDINA > SPOSTATI SUL LAYER DAVANTI . Sposta l'oggetto selzionato avanti di un layer. L'oggetto selezionato nel nuovo livello diventa l'oggetto posto indietro.

Porta in primo piano (barra di controllo dell'arrange o Ctrl+F) Oppure clicca con il tasto destro e scegli DISPONI > PORTA IN PRIMO PIANO. Sposta l'oggetto selezionato davanti a tutti gli altri oggetti dello stesso layer. Vedi la sezione Gestione oggetti (sulla pagina 111) per maggiori informazioni.

Sposta in avanti (barra di controllo Disponi o Ctrl+Shift+F) Oppure clicca con il tasto destro e seleziona ARRANGE > Sposta in avanti. Sposta l'oggetto selezionato di una posizione verso la parte anteriore.

Sposta indietro (barra di controllo Disponi o Ctrl+Shift+B) Oppure clicca con il tasto destro e seleziona DISPONI > SPOSTA INDIETRO . Sposta l'oggetto selezionato di una posizione indietro (consulta la sezione Gestione oggetti).

Sposta indietro (barra di controllo Disponi o Ctrl+B) Oppure clicca con il tasto destro ORGANIZZA > SPOSTA INDIETRO. Sposta l'oggetto selezionato dietro tutti gli altri dello stesso livello. (vedi la sezione Gestione oggetti, sulla pagina 111).

Sposta nel layer anteriore (Barra di controllo del arrange o Ctrl+Shift+D) Oppure clicca con il tasto destro e scegli ORDINA > SPOSTA NEL LAYER POSTERIORE. Sposta l'oggetto selezionato indietro di un layer. Nel nuovo layer, l'oggetto selezionato, diventa l'oggetto posto davanti.

Gruppo (barra di controllo Disponi o Ctrl+G). Clicca con il testo destro e seleziona GRUPPO. Raggruppa gli oggetti selezionati perchĂŠ appaiano come oggetto singolo (consulta la sezione Gestione oggetti, sulla pagina 111).

383

384

Sciogli gruppo (barra controllo Disponi o Ctrl+U) Oppure clicca con il testo destro e scegli SCIOGLI GRUPPO. Separa il gruppo o i gruppi in oggetti separati. Di colore grigio, se l'oggetto non Ă¨ un gruppo. Oppure, per molti oggetti selezionati, c'Ă¨ almeno un gruppo.

Applica gruppo soft (Ctrl+Alt+G) Oppure clicca con il tasto destro e seleziona APPLICA GRUPPO SOFT . Fai in modo che gli oggetti selezionati formino un gruppo soft. Diversamente dai gruppi, i gruppi soft possono includere oggetti posti su diversi livelli. Per maggiori dettagli vedi il capitolo Gestione oggetti (sulla pagina 135).

Rimuovi gruppo soft (Ctrl+Alt+U) Oppure clicca con il tasto destro e seleziona ELIMINA GRUPPO SOFT . Sciogli il gruppo soft selezionato in modo che gli oggetti possano essere nuovamente selezionati separatamente.

Allineamento (Ctrl+Shift+L) Oppure clicca con il testo destro e scegli ALLINEA. Utilizzato per allineare diversi oggetti. Non ha effetto quando viene selezionato un solo oggetto (per maggiori informazioni vedi la sezione Gestione oggetti, sulla pagina 136).

Adatta testo alla curva/Rimuovi testo dalla curva Oppure clicca con il tasto destro e seleziona ADATTA TESTO ALLA CURVA/RIMUOVI TESTO DALLA CURVA . Ti permette di adattare o rimuovere un riga di testo ad una curva (per maggiori informazioni vedi Gestione oggetti.

Respingimento testo & ancoraggio Oppure clicca con il tasto destro e seleziona RESPINGI TESTO IN BASSO , ANCORA AL TESTO RESPINGIMENTO E ANCORAGGIO . Fai in modo che l'oggetto respinga il testo

sottostante e ancora un'oggetto all'interno di una colonna di testo. Per ulteriori dettagli vedi le sezioni Oggetti che respingono testi (sulla pagina 204) e Grafiche ancorate (sulla pagina 206)

Crea Barra di Navigazione Questo comando ti permette di creare una barra di navigazione da un singolo tasto. Maggiori informazioni nel capitolo BARRA DI NAVIGAZIONE (sulla pagina 312).

www.magix.com

Comandi veloci del menu e della tastiera

Oggetti ripetuti Il sottomenu per l'oggetto ripetuto ti permette di: • •

RIPETI SU TUTTE LE PAGINE (SHIFT+CTRL+ALT+R) L'oggetto

selezionato verrà copiate nello stesso punto su tutte le pagine. STOP RIPETIZIONE (SHIFT+CTRL+ALT+O) disattiva la ripetizione di un oggetto, o per l'oggetto selezionato o per tutte le copie dell'oggetto.

Consulta Oggetti ripetuti (sulla pagina 142) per ulteriori informazioni.

Menu Inserisci Dal catalogo dei contenuti (Shift+Alt+I) Apre il Catalogo Contenuti Online (sulla pagina 42). Seleziona, modelli, widget e clipart dalle categorie web, layout, foto e grafiche del catalogo.

Immagine • • •

Dalla voce File, cerca nel tuo computer un'immagine da caricare nel documento selezionato. Dalla voce Indirizzo Internet, estrae tutte le immagini da un sito web specifico. (Ctrl+Alt+W) Dalla voce Macchina fotografica rileva una web cam o altri dispositivi video di Windows collegati al tuo computer ed inserisce un fermo immagine nel documento.

Forma • • • • • • •

Rettangolo: inserisce un rettangolo nel documento corrente (Shift+R). Ellisse: inserisce un'ellisse nel documento corrente (Shift+Ctrl+Alt+E) Più forme: apre la sezione Altre forme di Smart Shape nel Catalogo contenuti online (sulla pagina 42) Freccia: appre la sezione Frecce di Smart Shape nel Catalogo contenuti online Pannello di testo: inserisce un pannello nel documento corrente (Shift+C). Più pannelli di testo: apre la sezione Pannelli di testo del Catalogo contenuti online. Nuvoletta per fumetti: inserisce una nuvoletta nel documento corrente

Per maggiori informazioni vedi la sezione "Gestione forme".

Casella di testo Inserisce una casella di testo nel documento corrente.

385

386

Nuova pagina • • •

Nuova pagina vuota: inserisce una nuova pagina vuota nel documento dopo la pagina corrente o selezionata. Duplica pagina: inserisce una duplicato di pagina nel documento dopo la pagina corrente o selezionata. Dal Catalogo contenuti: apre il Catalogo contenuti online (sulla pagina 42).

Menu Strumenti Gallerie Pagina & Galleria (barra di controllo delle Gallerie o "F10") Mostra o nasconde la GALLERIA PAGINE & LIVELLI .

Galleria Bitmap (barra di controllo Gallerie o "F11") Mostra o nasconde la GALLERIA BITMAP (vedi Trattamento Bitmap, sulla pagina 283).

Galleria design (barra di controllo delle Gallerie o" + F10") Mostra o nasconde la GALLERIA CLIPART (vedi Importazione ed Esportazione, sulla pagina 349).

Galleria di Riempimento (bara di controllo delle Gallerie o "+F11") Mostra o nasconde la GALLERIA DI RIEMPIMENTO (vedi Trattamento Bitmap, sulla pagina 279).

Color Editor (Ctrl+E) Oppure clicca con il tasto destro e seleziona RIEMPIMENTO DI COLORI Apre il COLOR EDITOR (vedi la sezione Gestione colori, sulla pagina 174).

Nomi Oppure clicca con il tasto destro e seleziona NOMI. Apre il dialogo applica/rimuovi nomi (sulla pagina 141)

www.magix.com

Comandi veloci del menu e della tastiera

Proprietà web (Ctrl+Shift+W) Oppure clicca con il tasto destro e selezione PROPRIETÀ WEB . Apre il dialogo PROPRIETÀ WEB che permette di aggiungere al documento web, funzioni come link, livelli popup, ancore etc. Inoltre, attraverso questo dialogo, puoi controllare come vengono importate le immagini per la paigna web e impostare altre proprietà web . Per maggiori dettagli vedi il capitolo Per cominciare (sulla pagina 25).

Varianti sito web •

• • • •

fa in modo che l'oggetto selezionato venga condiviso su tutte le varianti; se non è disponibile per la condivisione puoi utilizzare l'opzione che permette di creare un copia non condivisa dell'oggetto per ogni variante. CANCELLA DA TUTTE LE VARIANTI: cancella l'oggetto selezionato da tutte le varianti. STOP CONDIVISIONE SU TUTTE LE VARIANTI: interrompe la condivisione dell'oggetto selezionato. COPIA PAGINA IN TUTTE LE VARIANTI: copia la pagina selezionata in tutte le varianti. VARIANTI SITO WEB: apre la finestra di dialogo delle Varianti sito web (sulla pagina 263) CONDIVIDI CON TUTTE LE VARIANTI:

Ottimizza foto Oppure clicca con il tasto destro e seleziona OTTIMIZZA FOTO. Ottimizza risoluzione bitmap per l'uso in design di MAGIX Web Designer. Per ulteriori dettagli vedi Ottimizzazione foto (sulla pagina 295).

Ottimizza tutte le immagini Ottimizza tutte le foto e bitmap del progetto. Vedi Ottimizzazione foto (sulla pagina 295).

Controlla l'ortografia durante la digitazione Questa opzione attiva il CONTROLO ORTOGRAFICO (sulla pagina 198) dello strumento di testo.

Opzioni (Ctrl+Shift+O) Oppure clicca con il tasto destro e seleziona OPZIONI PAGINA. Apre la casella di dialogo delle OPZIONI (descritta nella sezione Personalizzare Web Designer, sulla pagina 364).

387

388

Menu Condividi Il menu condividi include vari strumenti per la condivisione dell'immagine corrente selezionata con altri servizi MAGIX o di terzi. Per esempio, puoi selezionare una foto sulla tua pagina e mandarla rapidamente a MAGIX Online Album, Facebook o Flickr. L'immagine puĂ˛ essere anche inviata ad altri programmi MAGIX compatibili installati sul tuo computer. Per esempio puoi inviare a MAGIX Movie Edit Pro MX per includere un'immagine dal Designer in un video.

Menu finestra Annulla selezione/Resetta attributi correnti (Esc) Deseleziona tutti gli oggetti. Se non ci sono elementi selezionati, gli attributi correnti (sulla pagina 62) vengono riportati ai valori predefiniti. Basta premere due volte il tasto ESC.

Visualizzazione pagine multiple Oppure clicca con il tasto destro e scegli VISUALIZZAZIONE PAGINE MULTIPLE. Per impostazione predefinita, Web Designer mostra solo la pagina corrente del documento aperto. Scegliendo la visualizzazione pagine multipla, mostra tutte le pagine del tuo documento.

Nuova vista Apre una nuova finestra sul documento selezionato.

Arrangia vista Mostra tutte le finestre di Web Designer.

Mostra barre di scorrimento Attiva/disattiva visualizzazione delle barre di scorrimento sul lato e in basso nella finestra di Web Designer.

Mostra righelli (Ctrl + L) Oppure clicca con il tasto destro e scegli MOSTRA RIGHELLI . Attiva/disattiva la visualizzazione dei righelli in alto e su lato della finestra di Web Designer.

www.magix.com

Comandi veloci del menu e della tastiera

Barre di controllo Mostra il dialogo delle BARRE DI CONTROLLO . Vedi capitolo Personalizza Web Designer (sulla pagina 373).)

QualitĂ Seleziona il modo in cui gli oggetti debbano essere visualizzati dal wireframe all'anti-aliased (vedi Utilizzo dei documenti).

Mostra schede documenti Attiva/disattiva la visualizzazione delle schede del documento che forniscono accesso veloce ad ogni documento aperto in alto nella finestra di Web Designer. Cliccando su una scheda, quel documento viene selezionato. Un asterisco posto dopo il nome del documento indica che ci sono delle modifiche non salavate.

Schermo intero (8 sulla tastiera numerica) Attiva/Disattiva la modalitĂ a schermo intero.

Mostra griglia (#) Oppure clicca con il tasto destro e seleziona MOSTRA GRIGLIA/GUIDA > MOSTRA GRIGLIA . Rende visibile la griglia su schermo (vedi la sezione Gestione documenti (sulla pagina 98)).

Mostra Guide (1 sulla tastiera numerica) Oppure clicca con il tasto destro e seleziona MOSTRA GRIGLIA/GUIDA > MOSTRA GUIDA . Mostra o nasconde le guide di un livello che contiene tutte le linee e oggetti guida.

Aggancia alla griglia (. sulla tastiera numerica) Oppure clicca con il tasto destro e seleziona AGGANCIA A > AGGANCIA ALLA GRIGLIA. Con questa opzione un oggetto si allinea ad un punto di griglia vicino al quale viene trascinato (vedi la sezione Gestione documenti (sulla pagina 131)).

Allinea alle linee guida (2 sulla tastiera numerica). Oppure clicca col il tasto destro o seleziona AGGANCIA A > AGGANCIA ALLE LINEE GUIDA . Con questa opzione un oggetto si allinea alla linea guida vicino alla quale viene trascinato (vedi la sezione Gestione oggetti (sulla pagina 131)).

389

390

Aggancia a oggetti (* sulla tastiera numerica) Oppure clicca con il tasto destro e seleziona AGGANCIA A > AGGANCIA A OGGETTI. Quando questa opzione viene selezionata e si trascina una maniglia vicino ad un oggetto, la maniglia si allinea all'oggetto; per maggiori informazioni, vedi la sezione Gestione oggetti (sulla pagina 131) Puoi regolare la distanza di allineamento; per maggiori informazioni vedi la sezione Personalizzare Web Designer (sulla pagina 364).

Documenti caricati È una lista dei documenti caricati attualmente. È possibile selezionare il documento cliccando sul nome. (con Ctrl+F6 si cambia tra i documenti selezionati). Un * dopo il nome del documento indica che sono state eseguite delle modifiche che non sono ancora state salvate.

Menu Aiuto Aiuto MAGIX Web Designer Usa il comando Aiuto MAGIX Web Designer nel menu Aiuto per aprire la pagina iniziale dell'Aiuto del programma. In questo modo puoi lavorare step by step passando alle sezioni specifiche grazie alla struttura ad albero sul lato destro.

Aiuto Questo comando è disponibile quasi in ogni momento del programma e apre la sezione dell'Aiuto del programma in ogni contesto e funzione. Comando veloce:

Film Porta ad una pagina web che contiene tutorial video sull'utilizzo di Web Designer.

Dettagli su Web Designer Questo menu contiene utili link su MAGIX e altre risorse online.

Consiglio del giorno Guarda il consiglio del giorno. C'è anche una checkbox sotto il consiglio del giorno dove puoi selezionare se visualizzare il consiglio del giorno ogni volta che si avvia Web Designer.

www.magix.com

Comandi veloci del menu e della tastiera

Aggiorna programma Esegue un controllo online sulla disponibilità di nuovi aggiornamenti del programma Inizialmente ti viene mostrato uno schermo che ti indica se è disponibile una versione aggiornata del Web Designer che desideri potenziare. Dopodiché se hai effettuato la registrazione con Xara, avrà inizio un processo di aggiornamento automatico che cercherà gli aggiornamenti gratuiti disponibili. Se è disponibile un aggiornamento, esso viene scaricato automaticamente, MAGIX Web Designer viene chiuso e l'aggiornamento viene installato. Il programma viene riavviato automaticamente. Utilizza l'opzione REGISTRA posta nel menu AIUTO per registrare il programma con MAGIX.

Info pop-up Ti permette di visualizzare i "tooltip" che contengono informazioni che appaiono tramite un popup ogni volta che il puntatore del mouse passa sopra le barre strumenti, i tasti, la barra dei colori o altri elementi compresi nella finestra di Web Designer.

Info su MAGIX Web Designer Mostra informazioni relative al copyright e il numero della versione di MAGIX Web Designer.

Registra Utilizza questa opzione per registrare online il tuo acquisto con Xara in modo da avere aggiornamenti gratuiti, sconti sui potenziamenti e altre offerte e benefici.

391

392

Comandi veloci tastiera Gli strumenti STRUMENTO DI SLEZIONE

F2 o V o Alt + S

STRUMENTO MASCHERA A MANO LIBERA

Alt + F4

STRUMENTO MASCHERA RETTANGOLO

Alt + F5

STRUMENTO EDITOR FORMA

STRUMENTO RETTANGOLO

 + F3 o M

STRUMENTO ELLISSE

 + F4 o L

STRUMENTO DI TESTO

F8 o T

STRUMENTO DI RIEMPIMENTO

STRUMENTO TRASPARENZA

STRUMENTO OMBRA

Ctrl + F2

STRUMENTO FOTO

STRUMENTO DI SPOSTAMENTO

 + F8 o H o Alt + X (o la barra spaziatrice quando non è nello strumento di testo)

STRUMENTO ZOOM

 + F7 o Z o Alt + Z

Gallerie Galleria progetti

 + F10

Galleria Rempimenti

 + F11

Galleria Pagine & Layer

F10

Galleria Bitmap

F11

Zoom Zoom precedente

Ctrl +R

Zooma sulla selzione

Ctrl +  +Z

Zoom sul disegno

Ctrl +  +J

Zomma sulla pagina

Ctrl +  +P

Zoom in (allarga)

Ctrl + + sulla tastiera numerica

Zoom out (riduci)

Ctrl + - sulla tastiera numerica

Zoom al 100%

www.magix.com

Comandi veloci del menu e della tastiera Zoom al 200%

Zoom al 300%

Zoom al 400%

Zoom al 50%

È possibile anche zoomare e scorrere il documento usando la rotella del mouse Ctrl+rotella mouse zoom in/out).

Manipolazione di documenti Nello Strumento di Testo gli shortcut contrassegnati con un´asterisco (*) compiono un´azione differente -vedi sotto (sulla pagina 395). Nuovo documento

Ctrl + N

Apri documento

Ctrl + O

Chiudi documento

Ctrl + W

Attiva documento

Ctrl + Tab

Stampa documento

Ctrl + P

Salva documento con nome

Ctrl + S

Importa

Ctrl + Alt + I

Importa elementi grafici dal web

Ctrl + Alt + W

Esporta

Ctrl +  + E

Cronometra il redraw di un documento

Ctrl +  + T

Mostra griglia

Mostra linee guida

1 sul tastierino numerico

Aggancia alla griglia

sulla tastiera numerica.

Aggancia alle guide

2 sulla tastiera numerica

Aggancia all'oggetto

* sulla tastiera numerica

Seleziona schermo intero

8 sulla tastiera numerica

Mostra regolatori

Ctrl +  + R o Ctrl +L

Annulla

Ctrl + Z o < o,

Ripristina

Ctrl + Y o > o

393

394

Manipolazione oggetti Nello Strumento di Testo gli shortcut contrassegnati con un´asterisco (*) compiono un´azione differente -vedi sotto (sulla pagina 395). Seleziona tutto

Ctrl + A*

Seleziona oggetto successivo

Tab

Annulla selezione

Cancella

Cancella selezione

Esc

Porta oggetto in avanti

Ctrl + F

Sposta oggetto indietro

Ctrl + B*

Sposta oggetto in avanti

Ctrl +  + F

Sposta oggetto indietro

Ctrl +  + B

Sposta oggetto sul livello in primo piano

Ctrl +  + U

Sposta oggetto sul livello dietro

Ctrl + + D

Gruppo oggetti

Ctrl + G

Sciogli gruppo

Ctrl + U

Clona oggetto

Ctrl + K

Duplica oggetto con offset

Ctrl + D

Copia oggetto sulla clipboard

Ctrl + C

Taglia la selezione sulla clipboard

Ctrl + X

Incolla oggetto dalla clipboard

Ctrl + V

Incolla oggetto nella posizione orgnale

Ctrl +  + V

Incolla attributi

Ctrl + + A

Crea copia bimap

Ctrl +  + C

Apri finestra di dialogo allineamento

Ctrl +  + L

Indirizzo web

Ctrl +  + W

Sposta gli oggetti selezionati: tasti direzionali con lo STRUMENTO DI SELEZIONE (vedi Sposta oggetti (sulla pagina 116)) Sposta le maniglie: cursori (frecce) in strumenti diversi dallo strumento di selezione.

www.magix.com

Comandi veloci del menu e della tastiera

Strumento di testo Tasti cursori

Spostano il cursore di testo verso l'alto, verso il basso, a destra o sinistra. un carattere alla volta.

Home

Sposta il cursore di testo sull'inizio della riga.

Fine

Sposta il cursore di testo alla fine della riga.

Ctrl+cursore destra/sinistra

Sposta il cursore di testo verso la destra o la sinistra di una parola.

Ctrl+Home

Sposta il cursore di testo sull'inizio della prima riga in un oggetto di testo.

Ctrl+End

Sposta il cursore di testo fino alla fine dellÂ´ultima riga di un oggetto di testo.

Ctrl+A

Seleziona tutti i caratteri di un oggetto di testo.

Ctrl+B

Apllica il grassetto.

Ctrl + I

Applica il corsivo.

Ctrl + C

Copia l'area del testo selezionata sulla clipboard.

Ctrl+L

Seleziona tutti i caratteri della riga che contengono il cursore di testo.

Ctrl + Invio

Inserisci interruzione di pagina

Ctrl+Shift+Invio

Inserisci interruzione di colonna

Ctrl + Shift + L

Inserisce testi fac-simile ("Lorem Ipsum")

Ctrl+V

Incolla il testo sulla posizione del cursore di testo (se la clipboard contiene il testo).

Ctrl+W

Sostituisce il carattere sulla destra del cursore di testo.

Ctrl+Shift+F1

Alterna la selezione testo fra maiuscole e minuscole.

Ctrl+-

Inserisce un trattino nascosto (appare soltanto se si scorre sulla fine della riga).

Ctrl + Shift + -

Inserisce un trattino fisso (trattino) per evitare che un trattino venga confuso a fine riga con una lineetta

Ctrl + <

Aumentano/diminuiscono la grandezza del carattere del testo selezionato (solo se tutto ciĂ˛ che si Ă¨ selezionato ha la medesima grandezza)

Ctrl + > Alt+tasti cursori

Aumenta/diminuisce spaziatura/crenatura.

395

396 

Inizia una nuova riga di testo

Elimina

Cancella il carattere dalla destra del cursore. Se il cursore si trova sulla fine di una riga, unisce questa riga alla riga sottostante.

Backspace

Cancella il carattere dalla sinistra del cursore. Se il cursore si trova sull'inizio di una riga, unisce questa riga alla riga al di sopra.

Shift+tasti cursori

Seleziona il testo tra la posizione del cursore e l´inizio della riga.

Shift + End

Seleziona tutto il testo tra la posizione del cursore e la fine della riga.

Caratteri speciali (nello strumento testo) Hard space (parole con hard spaces tra " will not wrap" e la fine della linea)

Ctrl + Spazio Ctrl + NumPad –

–

EN dash (Un EN dash è più lungo di un meno e più corto di un ‘dash’)

Ctrl + Alt + NumPad –

—

EM dash (Un EM dash è più lungo di un dash)

Ctrl + Alt + .(punto)

…

Ellisse (Un ellisse sono tre punti)

Ctrl + Alt + C

Ctrl + Alt + R

Registrato

Ctrl + Alt + T

™

Trademark

Ctrl + Alt + B

•

Pallottola

Altri Color Editor

Ctrl + E (apre e chiude)

Dialogo opzioni

Ctrl +  + O

MAGIX Web Designer Aiuto

www.magix.com

Index

Index A Adatta la larghezza dei pulsanti ai loro testi..................................................................... 314 Adatta testo alla curva/Rimuovi testo dalla curva ........................................................ 384 Adattamento del margine sinistro e destro del testo su una curva............................ 195 Aggancia a oggetti (* sulla tastiera numerica) ............................................................... 390 Aggancia alla griglia ................................................................................................................ 127 Aggancia alla griglia (. sulla tastiera numerica).............................................................. 389 Aggiorna programma.............................................................................................................. 391 Aggiornamento degli stili di testo ....................................................................................... 213 Aggiornare la navbar su tutte le pagine. ............................................................................ 321 Aggiungere & modificare pulsanti....................................................................................... 318 Aggiungere file con filmati e animazioni............................................................................332 Aggiungere menu e sottomenu............................................................................................ 319 Aggiungere piĂš segmenti di linea ........................................................................................149 Aggiungere segnaposto widget manualmente ................................................................337 Aggiungere teste di freccia & code .....................................................................................149 Aggiunta di elementi a una galleria.....................................................................................108 Aggiunta di nuovi pulsanti....................................................................................................... 57 Aggiunta di pagine nuove al tuo sito web ........................................................................... 35 Aggiunta di un nuovo punto maniglia ................................................................................ 152 Aggiunta nomi ...........................................................................................................................141 Aiuto....................................................................................................................................24, 390 Aiuto MAGIX Web Designer............................................................................................... 390 Al centro di una linea: ............................................................................................................. 153 Alla fine della linea: ................................................................................................................. 153 Allinea alle linee guida (2 sulla tastiera numerica)........................................................ 389 Allineamento............................................................................................................ 127, 137, 138 Allineamento (Ctrl+Shift+L) ................................................................................................ 384 Allineamento oggetti magnetico (aggancia ad oggetti)................................................ 129 All'inizio di una linea: .............................................................................................................. 153 Allungamento della linea ....................................................................................................... 152 Altri............................................................................................................................................. 396 Altri formati video....................................................................................................................333 Altri punti da tener presente................................................................................................. 316 Ancoraggio e spessore delle linee ....................................................................................... 128 Animazioni web.......................................................................................................................... 75 Annulla....................................................................................................................................... 309 Annulla (Standard control bar o Ctrl+Z) ........................................................................... 381 Annulla e Ripristina ..................................................................................................................110 Annulla selezione/Resetta attributi correnti (Esc) ...............................................382, 388 Annulla taglio ........................................................................................................................... 309 Anteprima caratteri in tempo reale..................................................................................... 187 Anteprima del sito web ......................................................................................................... 380 Anteprima delle dimensioni dei caratteri in tempo reale .............................................. 187

397

398 Anteprima nel browser ..........................................................................................................363 Anteprima pagina web (Shift + F5) ....................................................................................379 Apertura di un documento esistente ................................................................................... 80 Applica ai nuovi oggetti gli attributi piĂš recenti ..............................................................366 Applica gruppo soft (Ctrl+Alt+G).......................................................................................384 Applicare i colori di riempimento e linea tramite trascinamento .................................171 Applicare la trasparenza graduata...................................................................................... 235 Applicare un colore dello sfondo testo ...............................................................................173 Applicazione degli stili di testo .............................................................................................217 Applicazione della trasparenza a vari oggetti ..................................................................236 Applicazione della trasparenza piatta................................................................................ 235 Applicazione dell'ombra ........................................................................................................238 Applicazione di attributi alle storie di testo complete....................................................221 Applicazione di un effetto bagliore.....................................................................................238 Applicazione di un'ombra a vari oggetti.............................................................................241 Applicazione di un'ombra parete ........................................................................................238 Applicazione di un'ombra terreno.......................................................................................238 Apri (barra di controllo standard o Ctrl+O) ..................................................................... 377 Apri il link in: .............................................................................................................................247 Aprire una seconda finestra.................................................................................................... 86 Aree di testo ..............................................................................................................................192 Arrangia vista ...........................................................................................................................388 Assistenza ..................................................................................................................................... 11 Attivare e disattivare le barre di navigazione del sito.....................................................315 Attributi correnti (stili) ............................................................................................................ 62 Attributi dell'elaborazione foto............................................................................................289 Avanzamento graduale degli oggetti .................................................................................... 31 Avanzate - Modificare un design di pulsante di una navbar........................................324 Avvio di un nuovo documento ............................................................................................... 80

B Backup alla chiusura del sistema........................................................................................... 98 Backup automatico ............................................................................................................ 54, 95 Backup dei documenti aperta alla chiusura del programma .......................................... 97 Backup dei documenti aperti.................................................................................................. 96 Barra degli strumenti del sito web ........................................................................................ 32 Barra degli strumenti principale............................................................................................. 84 Barra delle informazioni ..................................................................................................... 31, 83 Barra di Navigazione del sito .................................................................................................315 Barra informazioni Stili di testo.............................................................................................212 Barre a comparsa....................................................................................................................... 27 Barre di controllo .................................................................................................... 83, 373, 389 Barre di controllo Docked e Free .........................................................................................374 Barre di Navigazione................................................................................................................312 Barre di navigazione con il primo o ultimo pulsante differenti ....................................326 Barre di navigazione con un solo pulsante.........................................................................317 Barre pulsanti (NavBars) ......................................................................................................... 58 Benefits strumento Foto ........................................................................................................302 Bilanciamento delle curve ......................................................................................................158

www.magix.com

Index Blocco livelli.............................................................................................................................. 347

C Cambia la selezione dell'oggetto .......................................................................................... 112 Cambia l'ampiezza della linea (spessore).......................................................................... 161 Cambia lo zoom usando lo zoom infobar/barra di controllo .........................................87 Cambiare i colori di un riempimento. .................................................................................227 Cambio dei lati della linea...................................................................................................... 195 Cambio la larghezza della linea (spessore) ...................................................................... 162 Campi di testo..............................................................................................................................51 Cancella (Elabora o Cancella le barre di controllo standard)...................................... 382 Cancella le barre di controllo ............................................................................................... 376 Cancellare gli oggetti ............................................................................................................... 118 Cancellare oggetti ripetuti .....................................................................................................144 Cancellare una barra di navigazione da una pagina........................................................ 316 Cancellazione di punti ............................................................................................................ 154 Caratteri inseriti.......................................................................................................................... 52 Caratteri speciali (nello strumento testo)........................................................................ 396 Cartelle di supporto...................................................................................................................94 Casella di testo ........................................................................................................................ 385 Cerca un nome di elemento .................................................................................................. 107 Chiedi prima prima di impostare gli attributi correnti................................................... 367 Chiudere il documento .............................................................................................................95 Chiudere una galleria ..............................................................................................................108 Chiudi (Ctrl+W)...................................................................................................................... 378 Chiusura di una forma ............................................................................................................160 Clona (Ctrl+K) ......................................................................................................................... 382 Clonazione .................................................................................................................................. 119 Collega a file ...................................................................................................................... 57, 245 Collega all'anchor.................................................................................................................... 245 Collegamento tramite link ad un'ancora..............................................................................56 Color Editor (Ctrl+E).............................................................................................................. 386 Colorazione della Clipart importata ......................................................................................38 Colorazione delle forme ...........................................................................................................38 Colorazione delle foto............................................................................................................. 291 Colorazione di bitmap............................................................................................................ 229 Colorazione di foto ....................................................................................................................38 Colore precedente ed attuale ............................................................................................... 175 Colori collegati.......................................................................................................................... 182 Colori del link del sito web.................................................................................................... 249 Colori del sito web .....................................................................................................................36 Colori locali e colori Tema ..................................................................................................... 176 Colori normali ............................................................................................................................ 181 Colori normali, toni, tonalitĂ e colori collegati................................................................... 181 Colori sulla linea colore .......................................................................................................... 170 Comandi del regolatore pop-up .......................................................................................... 306 Comandi per la rotazione di 90Â°......................................................................................... 304 Comandi veloci del menu e della tastiera..........................................................................377 Comandi veloci tastiera......................................................................................................... 392

399

400 Combinazione di trasparenze individuali e di gruppo....................................................236 Come creare rientri sospesi ..................................................................................................203 Come disegnare un segmento di linea curva .....................................................................151 Come disegnare un segmento di linea retta.......................................................................151 Come modificare SmartShape ..............................................................................................165 CompatibilitĂ del testo con i browser ................................................................................ 222 Conclusione della linea ...........................................................................................................152 Condivisione di documenti su diversi dispositivi ............................................................... 81 Condivisione tra varianti........................................................................................................265 Conflitti nei layout di pagina..................................................................................................135 Confronta e ripristina l'originale ..........................................................................................307 Connessione di aree di testo - flusso di testo ...................................................................193 Conserva proporzioni pagina................................................................................................ 310 Consiglio del giorno ................................................................................................................390 Conteggio parole ..................................................................................................................... 194 Contenuto della cartella di supporto.................................................................................... 94 Controlla l'ortografia durante la digitazione.....................................................................387 Controllare i font in uso ..........................................................................................................221 Controlli .....................................................................................................................................359 Controllo ortografico ....................................................................................................... 52, 198 Conversione del testo in una grafica .................................................................................... 59 Conversione di oggetti o disegni in bitmap ......................................................................299 Coordina direzione ..................................................................................................................370 Coordinate X-Y .......................................................................................................................... 85 Copia (Edit control bar o Ctrl+C).........................................................................................381 Copia degli oggetti ..................................................................................................................... 31 Copia degli stili di testo..........................................................................................................220 Copia/incolla testo formattato (RTF) .................................................................................221 Copiare e incollare pagine........................................................................................................ 91 Copiare ombre su altri oggetti ..............................................................................................241 Copiare stili - incolla attributi............................................................................................... 140 Copie memoria zero ...............................................................................................................282 Copyright ........................................................................................................................................2 Cosa c'Ă¨ di nuovo in MAGIX Web Designer?..................................................................... 13 Cosa rende cosĂŹ particolare Web Designer?...................................................................... 22 Cosa sono annulla e ripristina?............................................................................................. 110 Crea angoli precisi....................................................................................................................157 Crea Barra di Navigazione.....................................................................................................384 Crea i tuoi pulsanti mouseover ............................................................................................... 71 Creare un riempimento di colore graduato ...................................................................... 223 Creazione di Barre di Navigazione personali.................................................................... 323 Creazione di cerchi ed ellissi ................................................................................................ 164 Creazione di curve smussate ................................................................................................157 Creazione di Gruppi Leggeri ..................................................................................................135 Creazione di nuovi oggetti di testo ....................................................................................... 50 Creazione di nuovi stili ............................................................................................................214 Creazione di poligoni e stelle................................................................................................ 166 Creazione di pulsanti, banner e di altre grafiche web ...................................................... 76 Creazione di rettangoli e quadrati........................................................................................163 Creazione di siti web RWD da modelli ..............................................................................263

www.magix.com

Index Creazione di siti web RWD da siti esistenti..................................................................... 264 Creazione di un quadrato....................................................................................................... 163 Creazione di un sito web.......................................................................................................... 32 Creazione di un sito web in 6 passaggi................................................................................ 23 Creazione di una linea guida ................................................................................................. 132 Creazione di una nuova barra di controllo ........................................................................375 Creazione e Modifica di rettangoli ad angoli arrotondati.............................................. 163

D Dal catalogo dei contenuti (Shift+Alt+I) .......................................................................... 385 Deseleziona un oggetto........................................................................................................... 113 Dettagli su Web Designer .................................................................................................... 390 Dialogo delle proprietĂ della barra di navigazione .......................................................... 313 Dialogo delle proprietĂ web ................................................................................................. 242 Didascalie immagini ................................................................................................................255 Dimensione Nudge................................................................................................................. 369 Dimensioni dei caratteri...........................................................................................................49 Dimensioni iniziali della foto................................................................................................. 281 Dimensioni pagina ..................................................................................................................... 53 Disattivare rigenerazione dei segnaposto ........................................................................ 336 Disegnare & modificare linee rette......................................................................................148 Disegnare una linea o una forma .........................................................................................148 Disposizione dei livelli su documenti di siti web. .............................................................. 72 Disposizione di finestre multiple ...........................................................................................86 Distanza tra paragrafi ............................................................................................................. 219 Distribuisci................................................................................................................................. 139 Divisione di una forma............................................................................................................ 159 Dizionario dell'utente.............................................................................................................. 199 Documenti caricati ................................................................................................................. 390 Documenti fotografici............................................................................................................ 299 Documenti senza titolo ............................................................................................................97 Documento selezionato e barra del titolo ...........................................................................82 Duplica (barra comandi elaborazione o Ctrl+Alt+D).................................................... 382 Duplicazione............................................................................................................................... 119 Duplicazione distanza............................................................................................................ 369 Duplicazione e clonazione ...................................................................................................... 118

E Effetti Mouseover Effects ........................................................................................................70 Elaborare i contenuti di un oggetto ripetuto..................................................................... 143 Elaborazione del colore di un oggetto ................................................................................ 173 Elaborazione di file fotografici .............................................................................................300 Elaborazione Forma................................................................................................................. 162 Elenchi puntati e numerati..............................................................................................50, 210 Elenco dei comndi veloci sulla tastiera numerica............................................................ 133 Elimina immagini dalla galleria............................................................................................ 284 Eliminare stili............................................................................................................................. 216

401

402 Eliminazione di Gruppi Leggeri .............................................................................................136 Eliminazione di oggetti da un gruppo..................................................................................134 Eliminazione di oggetti dal documento .............................................................................. 118 Eliminazione di sezioni da una galleria .............................................................................. 108 Eliminazione di una linea guida.............................................................................................132 Eliminazione di un'ombra ..................................................................................................... 240 Esci ..............................................................................................................................................380 Esempi grafici ............................................................................................................................. 68 Esempio - come modificare le dimensioni di una foto e salvarla come nuovo JPEG289 Esorta PNG................................................................................................................................379 Esporta come metafile di Windows (.wmf) ..................................................................... 355 Esporta DPI ............................................................................................................................... 357 Esporta JPEG.............................................................................................................................379 Esporta sito web ......................................................................................................................380 Esportare file Photoshop PSD ..............................................................................................356 Esportare i siti con le cartelle di supporto........................................................................... 95 Esportazione (Ctrl+Shift+E) .................................................................................................379 Esportazione come bitmap ...................................................................................................356 Esportazione come formato Exporting as Extended Metafile Format (EMF) ......... 355 Esportazione file ...................................................................................................................... 355 Esporto rapido di HTML e formati di grafica web........................................................... 355 Estendi selezione .......................................................................................................................112 Estensione e compressione di oggetti ................................................................................125 Estrazione del JPEG originale ...............................................................................................286

F File Flash .................................................................................................................................... 333 File JPEG integrati....................................................................................................................286 File MP3 .....................................................................................................................................334 File PDF ......................................................................................................................................334 File recenti ....................................................................................................................... 367, 378 File video MP4 & FLV............................................................................................................. 333 Film..............................................................................................................................................390 Font web safe ............................................................................................................................187 Forma..........................................................................................................................................385 Formati d'esportazione ...........................................................................................................351 Formati d'importazione..........................................................................................................349 Foto ...............................................................................................................................................44 Foto in miniatura con po-up ................................................................................................... 46 Foto pop-up ....................................................................................................................... 75, 252 Foto pop-up: .............................................................................................................................246 Funzione tasto mouse .............................................................................................................371 Funzioni fotografiche comuni.............................................................................................. 304

G Galleria Bitmap.........................................................................................................................283 Galleria pagine & layer ....................................................................................................92, 338 Galleria Pagine & Layer..........................................................................................................338

www.magix.com

Index Gallerie.....................................................................................................................102, 386, 392 Garanzia di aggiornamento 365 giorni.................................................................................20 Generazione automatica di segnaposto ........................................................................... 330 Gestione foto............................................................................................................................ 279 GIF animati. .............................................................................................................................. 334 Giustifica .................................................................................................................................... 314 Giustificazione o allineamento del testo............................................................................ 218 Gli indicatori ................................................................................................................................85 Gli strumenti ............................................................................................................................ 392 Gradazioni di colore di vari livelli .........................................................................................232 Grafica incorporata................................................................................................................. 209 Grafiche ancorate ................................................................................................................... 206 Grassetto & Corsivo ................................................................................................................ 217 Griglia sullo schermo ................................................................................................................98 Gruppi ...........................................................................................................................................58 Gruppi e livelli ........................................................................................................................... 134 Gruppi leggeri ............................................................................................................................ 60 Gruppi Leggeri ................................................................................................................ 135, 209 Gruppi soft e layer .................................................................................................................. 344 Gruppo (barra di controllo Disponi o Ctrl+G)................................................................. 383

I I livelli di MouseOff e MouseOver ........................................................................................70 Il Catalogo Contenuti Online ..................................................................................................42 Il Color Editor ............................................................................................................................ 174 Il comando Annulla ..................................................................................................................110 Il comando Ripristina ...............................................................................................................110 Il documento deve diventare un sito web. ....................................................................... 368 Il layer corrente........................................................................................................................ 342 Il menu Font............................................................................................................................... 186 Il Selector ..............................................................................................................................30, 111 Immagine .................................................................................................................................. 385 Importa (Ctrl+Alt+I) .............................................................................................................. 378 Importa da indirizzo Internet (Ctrl+Alt+W).................................................................... 379 Importante ................................................................................................................................ 356 Importare & incollare navbar ................................................................................................322 Importare da un sito web...................................................................................................... 354 Importazione di colori con nome ......................................................................................... 178 Importazione di file PhotoShop PSD ...................................................................................352 Importazione di foto RAW ................................................................................................... 354 Importazione di grandi foto.....................................................................................................45 Importazione ed Esportazione............................................................................................. 349 Importazione ed esportazione dei formati di file supportati ....................................... 349 Importazione file ......................................................................................................................352 Importazione foto ................................................................................................................... 280 Importazione PDF ....................................................................................................................353 Impostazione della parte superiore della pagina ............................................................ 270 Impostazione della trasparenza della bitmap.................................................................. 284 Impostazione di una bitmap come sfondo della pagina ............................................... 285

403

404 Impostazioni browser web compatibili con lunghezze riga .........................................368 Inclinare gli oggetti...................................................................................................................126 Incolla (barra di controllo elaborazione o Ctrl+V)...........................................................381 Indentanzione............................................................................................................................218 Info documenti ................................................................................................................. 24, 380 Info pop-up.................................................................................................................................391 Info su MAGIX Web Designer..............................................................................................391 InfoBar dello strumento di riempimento ...........................................................................224 Inserimento ...............................................................................................................................330 Inserimento caratteri .............................................................................................................. 222 Inserimento dei simboli nel testo ........................................................................................ 189 Inserimento di caratteri speciali ...........................................................................................197 Inserimento di simboli come elementi grafici.................................................................. 189 Inserimento di testi fac-simile (............................................................................................197 Inserisci il tuo sito web nella galleria utenti......................................................................278 Inserisci pagine nel documento ............................................................................................. 90 Integrazione dei video, file Flash e altri Widgets .............................................................. 35 Interlinea.....................................................................................................................................218 Interno .........................................................................................................................................138 Interruzione degli oggetti ripetuti........................................................................................ 144 Intestazioni / note a piĂ¨ pagina ............................................................................................143 Introduzione............................................................................................13, 183, 279, 302, 377 Inverti percorso ........................................................................................................................ 149 Iscrizione al sito web del widget..........................................................................................330

L La barra dei colori .................................................................................................................... 169 La finestra di MAGIX Web Designer .................................................................................... 81 La Galleria di design locale....................................................................................................... 41 La Galleria di riempimento.................................................................................................... 232 La pagina attuale........................................................................................................................ 90 Larghezza / Altezza................................................................................................................ 310 Layer ...........................................................................................................................................356 Layer attuale sempre visibile e elaborabile.......................................................................366 Layer di sfondo pagina e pasteboard...................................................................................271 Layer pop-up............................................................................................................................... 73 Layer speciali ............................................................................................................................346 Layout del programma ............................................................................................................. 25 Limitazione angolo ..................................................................................................................369 Limitazione della linea.............................................................................................................156 Linea di stato ...................................................................................................................... 84, 114 Link a.......................................................................................................................................... 244 Link a indirizzo web.................................................................................................................243 Link di testo................................................................................................................................219 Link, Pulsanti & Barre di navigazione.................................................................................... 55 Linking automatico delle pagine ...........................................................................................315 Lista numerata............................................................................................................................211 Lista puntata ............................................................................................................................. 210 Livelli ............................................................................................................................................341

www.magix.com

Index Livelli su siti web ..................................................................................................................... 343 Livelli, Mouseover (Rollover) & Pop-up...............................................................................69 Lo strumento Editor Forme ................................................................................................... 150 Lo Strumento linea retta & freccia............................................................................... 64, 148 Lo Strumento ombra ...............................................................................................................237 Lo strumento Riempimento...................................................................................................223 Luminosità/Contrasto/Temperatura/Saturazione del colore/Tonalità .................. 307

M Maniglie di selezione ...............................................................................................................114 Manipolazione di documenti ............................................................................................... 393 Manipolazione oggetti........................................................................................................... 394 Mantieni i nomi dei livelli importati ................................................................................... 367 Margini dei pulsanti................................................................................................................ 324 Margini e rientri.......................................................................................................................200 Marker di selezione ..................................................................................................................114 Menu Aiuto .............................................................................................................................. 390 Menu con accesso tramite tasto destro ..............................................................................69 Menu Condividi ....................................................................................................................... 388 Menu contestuale della barra dei colori ............................................................................. 171 Menu Elaborazione.................................................................................................................. 381 Menu File ...................................................................................................................................377 Menu finestra........................................................................................................................... 388 Menu Inserisci ......................................................................................................................... 385 Menu Ordina ............................................................................................................................ 383 Menu Strumenti ...................................................................................................................... 386 Miscelazione di linee curve e rette....................................................................................... 151 Modalità schermo intero........................................................................................................373 Modalità schermo normale/schermo intero ......................................................................85 Modalità Solo ........................................................................................................................... 346 Modelli di sfondi e ricolorazione......................................................................................... 269 Modelli e barre di navigazione per siti ............................................................................... 316 Modifica dei colori con nome ............................................................................................... 177 Modifica del colore dell'ombra o dell'effetto di riempimento .....................................240 Modifica del colori di sfondo ................................................................................................. 181 Modifica del punto zero dei righelli.....................................................................................100 Modifica del testo .................................................................................................................... 196 Modifica del testo del tasto..................................................................................................... 57 Modifica del valore dello zoom ..............................................................................................86 Modifica del valore di zoom tramite il mouse....................................................................87 Modifica delle curve................................................................................................................ 156 Modifica delle dimensioni di una barra di controllo .......................................................375 Modifica delle dimensioni pagina..........................................................................................89 Modifica delle dimensioni pagina dei modelli .................................................................... 53 Modifica delle dimensioni, rotazione e posizionamento di una foto all'interno del suo frame .................................................................................................................................. 292 Modifica di poligoni e stelle .................................................................................................. 167 Modifica di widget esistenti................................................................................................. 330 Modifica dimensioni area di testo ....................................................................................... 193

405

406 Modifica la trasparenza dell'ombra ....................................................................................239 Modifica l'ampiezza della colonna.......................................................................................192 Modifica l'angolazione della colonna ..................................................................................192 Modificare delle dimensioni dei font...................................................................................217 Modificare i font sui tasti della navbar .............................................................................. 322 Modificare il contorno delle foto ........................................................................................ 290 Modificare il documento modello vuoto ...........................................................................364 Modifiche non possibili sulla tela........................................................................................ 322 Mostra barre di scorrimento ................................................................................................388 Mostra griglia (#)....................................................................................................................389 Mostra Guide (1 sulla tastiera numerica) .........................................................................389 Mostra righelli (Ctrl + L)........................................................................................................388 Mostra schede documenti ....................................................................................................389 Mostra tutto & Sblocca tutto ...............................................................................................347 Mostrare & nascondere le barre di controllo ...................................................................374 Mostrare/nascondere righelli .............................................................................................. 100

N Nascondere livelli ....................................................................................................................346 Nascondi tasti e strumenti....................................................................................................376 Naviga tra le pagine .................................................................................................................. 92 Navigazione rapida nel menu dei caratteri ....................................................................... 188 Nomi ...........................................................................................................................................386 Nomi delle cartelle di supporto.............................................................................................. 94 Nomi usati .................................................................................................................................. 141 Nomina oggetti ......................................................................................................................... 141 Note generali sulle funzioni di importazione e esportazione.......................................349 Note relative al Photo Tool .....................................................................................................311 NovitĂ del Catalogo contenuti ............................................................................................. 377 Nuova pagina............................................................................................................................386 Nuova vista ...............................................................................................................................388 Nuovo (Standard control bar o Ctrl+N) ............................................................................ 377 Nuovo dalla galleria progetti ................................................................................................ 377

O Oggetti a piĂ¨ di pagina e oggetti che si allungano insieme alla pagina ......................145 Oggetti ancorati ................................................................................................................ 51, 209 Oggetti foto...............................................................................................................................279 Oggetti guida e linee guida .....................................................................................................131 Oggetti posizionati intorno al testo ................................................................................... 204 Oggetti respingenti ................................................................................................................ 204 Oggetti ripetuti........................................................................................................ 60, 142, 385 Oggetti segnaposto..................................................................................................................261 Oggetti stretch ........................................................................................................................... 55 Oggetti sulla pagina .................................................................................................................. 28 Ombre ........................................................................................................................................ 237 Operazioni avanzate con i colori ..........................................................................................175 Operazioni con i layer............................................................................................................ 344

www.magix.com

Index Opzioni (Ctrl+Shift+O) ......................................................................................................... 387 Opzioni di pagina. ................................................................................................................... 380 Opzioni foto popup..................................................................................................................253 Opzioni nel menu Strumenti ................................................................................................ 365 Ordine di successione...............................................................................................................30 Orientamento............................................................................................................................ 314 Ottimizza foto.......................................................................................................................... 387 Ottimizza tutte le immagini ................................................................................................. 387 Ottimizzazione automatica .................................................................................................. 306 Ottimizzazione delle foto e delle Bitmap.......................................................................... 295

P Pagine.................................................................................................................................341, 382 Pagine multiple nel documento............................................................................................. 90 Panoramica della finestra di dialogo JPEG, PNG e GIF.................................................. 358 Pedice & apice .......................................................................................................................... 218 Per aggiungere più oggetti ad un gruppo........................................................................... 133 Per creare un gruppo............................................................................................................... 133 Perchè uno strumento linea retta? ......................................................................................148 Percorso Backup:........................................................................................................................96 Personalizzazione Web Designer ....................................................................................... 364 Poligoni o stelle con angoli arrotondati.............................................................................. 167 Pop-up layer ............................................................................................................................. 245 Porta in primo piano (barra di controllo dell'arrange o Ctrl+F) .................................. 383 Posizionamento di oggetti sul livello guida ........................................................................ 131 Precedente & Successivo...................................................................................................... 304 Presentazioni sul web ............................................................................................................ 249 Primi passi.................................................................................................................................... 25 Proprietà bitmap ..................................................................................................................... 285 Proprietà di stile ....................................................................................................................... 216 Proprietà layer.......................................................................................................................... 345 Proprietà MouseOver ............................................................................................................ 258 Proprietà web (Ctrl+Shift+W)............................................................................................. 387 Pubblica il sito web................................................................................................................. 380 Pubblicazion e veloce (solo file modificati) ..................................................................... 278 Pubblicazione del sito web ............................................................................................ 78, 273 Pubblicazione delle varianti.................................................................................................. 266 Pubblicazione su un web host alternativo .........................................................................275 Pubblicazione sul sito Xara Online Website M ...............................................................273 Pulsante Blocca rapporto d'aspetto .................................................................................... 122 Pulsante scala larghezza della linea .................................................................................... 122 Pulsanti & menu ....................................................................................................................... 318 Pulsanti mouse over (rollover) ............................................................................................... 57 Pulsanti Mouseover (Rollover)................................................................................................71

Q Qualità ....................................................................................................................................... 389

407

408 QualitĂ di visualizzazione...................................................................................................... 100 QualitĂ di visualizzazione delle foto ...................................................................................287

R Raddrizzamento dell'orizzonte.............................................................................................294 Raggio dell'allineamento magnetico................................................................................... 372 Raggruppa oggetti e sciogli gruppi ......................................................................................133 Recupero dopo una chiusura anormale del programma ................................................. 97 Registra .......................................................................................................................................391 Regola dei terzi.........................................................................................................................309 Regolatori .................................................................................................................................... 84 Regolazione dell'area clip ...................................................................................................... 310 Rendere una foto della sua dimensione integrale. ..........................................................295 Rendi i gruppi trasparenti ......................................................................................................367 Respingimento testo & ancoraggio.....................................................................................384 Responsive web design..........................................................................................................262 Restrizioni riguardanti i design dei pulsanti...................................................................... 323 Revisioni....................................................................................................................................... 97 Ridefinizione degli stili di testo .............................................................................................213 Ridimensionamento con il mouse ........................................................................................123 Ridimensionamento con la InfoBar......................................................................................123 Ridimensionamento di widget ............................................................................................. 335 Ridimensionamento e riposizionamento dei riempimenti dei bitmap.......................230 Ridimensionamento gruppi....................................................................................................124 Riduzione a icona di piĂš finestre............................................................................................ 86 Riempimenti................................................................................................................................115 Riempimenti bitmap ...............................................................................................................228 Riempimenti circolari.............................................................................................................. 227 Riempimenti ellittici ................................................................................................................228 Riempimenti frattali .................................................................................................................231 Riempimenti lineari .................................................................................................................226 Riempimenti uniformi.............................................................................................................226 Riempimento delle forme con la bitmap ...........................................................................284 Riflesso di oggetti .....................................................................................................................125 Righelli ................................................................................................................................ 99, 200 Riguardo RWD .........................................................................................................................262 Rilascia una copia ......................................................................................................................115 Rimuovere un ancora............................................................................................................. 209 Rimuovere una galleria dall'area di lavoro. ....................................................................... 109 Rimuovi gruppo soft (Ctrl+Alt+U)......................................................................................384 Rimuovi pagine dal documento ............................................................................................. 92 Riordina i colori sulla riga dei colori.................................................................................... 170 Riordino con la Infobar ............................................................................................................154 Riordino degli elementi di una galleria............................................................................... 107 Riposizionamento foto ............................................................................................................281 Ripristina (Standard control bar o Ctrl+Y) ........................................................................381 Ripristina le barre/gallerie di controllo predefinite......................................................... 109 Ripristino dei backup ................................................................................................................ 98 Risoluzione foto automatica ................................................................................................... 47

www.magix.com

Index Ritaglio foto ............................................................................................................................... 291 Rotazione con angolazione precisa (utilizzando la InfoBar).......................................... 121 Rotazione con il mouse .......................................................................................................... 120 Rotazione degli oggetti in modalitĂ ...................................................................................... 121 Rotazione oggetti ........................................................................................................................31 Ruotare gli oggetti.................................................................................................................... 120

S Salva ........................................................................................................................................... 285 Salva (Standard control bar o Ctrl+S) ............................................................................... 378 Salva come................................................................................................................................ 378 Salva con nome (nel menu File).............................................................................................93 Salva modelli ............................................................................................................................ 378 Salva opzione (sul menu File).................................................................................................93 Salva tutti .................................................................................................................................. 378 Salva tutto (sul menu file) .......................................................................................................93 Salvataggio del documento .....................................................................................................93 Salvataggio del lavoro. Creazione di un sito web ..............................................................54 Salvataggio ed esportazione delle foto ............................................................................. 288 Scala foto al 100%.................................................................................................................. 304 Scalatura di foto (solo documenti web) ............................................................................ 122 Scalatura di oggetti (cambio dimensioni) ......................................................................... 122 Scheda Backup..........................................................................................................................373 Scheda dimensioni bitmap ................................................................................................... 362 Scheda Dimensioni pagina ....................................................................................................372 Scheda generale ...................................................................................................................... 366 Scheda Griglia e righello........................................................................................................ 370 Scheda Immagine ....................................................................................................................252 Scheda Link............................................................................................................................... 243 Scheda Mouse .......................................................................................................................... 371 Scheda Pagina.......................................................................................................................... 250 Scheda per la pubblicazione..................................................................................................257 Scheda segnaposto................................................................................................................. 258 Scheda Sito web ...................................................................................................................... 248 Schemi del tema del colore ................................................................................................... 176 Schermo intero (8 sulla tastiera numerica) ..................................................................... 389 Sciogli gruppi di oggetti.......................................................................................................... 133 Sciogli gruppo (barra controllo Disponi o Ctrl+U)......................................................... 384 Sciogliere gruppi, modificare e raggruppare .....................................................................325 Scrittura maiuscola/minuscola ............................................................................................ 196 Seleziona dentro........................................................................................................................ 112 Seleziona elementi................................................................................................................... 107 Seleziona sotto .......................................................................................................................... 112 Seleziona tutto (Ctrl+A) ....................................................................................................... 382 Selezionare la lingua................................................................................................................ 198 Selezionare quale finestra visualizzare.................................................................................86 Selezione cornice ...................................................................................................................... 112 Selezione degli oggetti utilizzando lo strumento Ombra .............................................. 241 Selezione dell'intero oggetto di testo ................................................................................. 196

409

410 Selezione di punti maniglia multipli.....................................................................................153 Selezione di tutti gli oggetti ....................................................................................................113 Selezione di un singolo oggetto da un gruppo ..................................................................134 Selezione e layer ........................................................................................................................113 Selezione oggetti ....................................................................................................................... 111 Selezione oggetto ....................................................................................................................368 Separatori di menu...................................................................................................................319 Sfocatura/Messa a fuoco......................................................................................................307 Sfondi fissi che non scorrono ...............................................................................................269 Sfondi per siti web........................................................................................................... 40, 267 Sfuma i bordi dell'ombra........................................................................................................239 Sfumature collegate.................................................................................................................. 39 Sfumature delicate, Riempimento a colori del testo, Testo trasparente..................... 50 Simboli........................................................................................................................................ 188 Sincronizzazione del testo......................................................................................................136 Sincronizzazione di Testo utilizzando Soft Groups ........................................................ 199 SmartShape............................................................................................................................... 164 Smussatura di una linea..........................................................................................................155 Sommario .................................................................................................................................. 357 Sostituire riempimenti bitmap .............................................................................................229 Sostituisci con &Flash ............................................................................................................259 Sostituisci con codice &HTML............................................................................................ 260 Sostituisci con file &grafico ..................................................................................................259 Sostituzione colori....................................................................................................................179 Sostituzione dei file immagine ............................................................................................. 352 Sostituzione font...................................................................................................................... 190 Sottolineatura del testo...........................................................................................................217 Spaziatura pulsanti:..................................................................................................................314 Spazio di griglia e righello......................................................................................................370 Sposta in avanti (barra di controllo Disponi o Ctrl+Shift+F) .......................................383 Sposta indietro (barra di controllo Disponi o Ctrl+B)....................................................383 Sposta indietro (barra di controllo Disponi o Ctrl+Shift+B).........................................383 Sposta nel layer anteriore (Barra di controllo del arrange o Ctrl+Shift+D)..............383 Sposta pagine all'interno del documento............................................................................. 91 Spostamenti di oggetti avanti e indietro ............................................................................ 119 Spostamento degli oggetti ......................................................................................................115 Spostamento dei punti maniglia - Strumento Editor forma ..........................................154 Spostamento del documento all'interno della finestra.................................................... 88 Spostamento della maniglia di inizio o fine del riempimento ...................................... 227 Spostamento di oggetti da un livello all'altro ..................................................................... 73 Spostamento di oggetti selezionati o all'interno di altri ..................................................113 Spostamento di oggetti tra i livelli ......................................................................................348 Spostamento progressivo degli oggetti .............................................................................. 116 Spostare e fissare un galleria................................................................................................ 103 Spostare e trasformare una barra di navigazione di un sito..........................................315 Spostare oggetti ancorati ..................................................................................................... 208 Spostati sul livello davanti (barra di controllo dell'arrange o Ctrl+Shift+U)............383 Stessa larghezza per tutti i pulsanti.....................................................................................314 Stile paragrafo e stile carattere.............................................................................................212 Stili basati su altri stili..............................................................................................................214

www.magix.com

Index Stili del menu............................................................................................................................ 320 Stili di testo................................................................................................................................. 211 Strumenti di disegno forme................................................................................................... 162 Strumenti e tasti moving....................................................................................................... 376 Strumenti per il disegno .......................................................................................................... 60 Strumento di ottimizzazione................................................................................................ 305 Strumento di riempimento ......................................................................................................66 Strumento di testo ......................................................................................................... 184, 395 Strumento forma........................................................................................................................64 Strumento Foto...........................................................................................................................45 Strumento Fotografico........................................................................................................... 302 Strumento ombra.......................................................................................................................67 Strumento rettangolo................................................................................................................65 Strumento ritaglio ................................................................................................................... 308 Strumento trasparenza.............................................................................................................67 Su MAGIX Web Designer .......................................................................................................24

T Tab ................................................................................................................................................114 Tabella tavolozza opzioni...................................................................................................... 360 Tabulatori.................................................................................................................................. 202 Tabulatori personalizzati....................................................................................................... 202 Tabulatori, margini e rientri linea........................................................................................200 Taglia, copia e incolla............................................................................................................... 116 Tagliare gli oggetti .................................................................................................................... 118 Taglio (Elabora Barra di controllo o Ctrl+X) ..................................................................... 381 Taglio o ritaglio di immagini................................................................................................. 308 Tasto di limitazione ..................................................................................................................101 Terminologia .............................................................................................................................184 Testi sincronizzati..................................................................................................................... 60 Testo............................................................................................................................................357 Testo all'interno di gruppi per siti web.............................................................................. 220 Testo fluttuante intorno agli oggetti ......................................................................................51 Testo in una colonna................................................................................................................ 191 Testo lungo una curva ................................................................................................... 194, 201 Testo ruotato...............................................................................................................................50 Testo semplice..........................................................................................................................190 Text................................................................................................................................................48 Tipi di riempimento .................................................................................................................223 Tipi di tabulatori personalizzati........................................................................................... 202 Tipo immagine Web............................................................................................................... 256 TonalitĂ ....................................................................................................................................... 182 Toni............................................................................................................................................... 181 Tooltip...........................................................................................................................................24 Trascinamento dei segmenti di linea.................................................................................. 157 Trasformazione di una linea retta in una curva ( e viceversa)..................................... 158 Trasparenza...............................................................................................................................235

411

412

U Usare la funzione clip nelle fotografie................................................................................ 310 Uso del contagocce per selezionare i colori ......................................................................175 Uso delle gallerie ..................................................................................................................... 106 Utilizza colori normali per link di siti web .........................................................................246 Utilizzare i font del tuo sito web............................................................................................ 50 Utilizzare, modelli, clipart & widget...................................................................................... 34 Utilizzo degli oggetti ................................................................................................................. 111 Utilizzo dei documenti ............................................................................................................. 80 Utilizzo del colore.................................................................................................................... 169 Utilizzo del testo .......................................................................................................................183 Utilizzo della maniglia di curva .............................................................................................156 Utilizzo dello strumento di foto ...........................................................................................303 Utilizzo dello strumento di zoom .......................................................................................... 87 Utilizzo di foto come sfondo.................................................................................................270 Utilizzo di modelli per barre di navigazione.......................................................................312

V Varianti e barre di navigazione ............................................................................................266 Varianti e sfondi Web design adattivo .............................................................................. 272 Varianti ed oggetti ripetuti....................................................................................................266 Varianti multiple ......................................................................................................................263 Varianti sito web......................................................................................................................387 Vediamo nel dettaglio i benefici ..........................................................................................302 Virgolette intelligenti...............................................................................................................197 Visualizzazione del punto ancora....................................................................................... 208 Visualizzazione delle tue icone nella scheda di un browser - favicons.....................364 Visualizzazione di una foto in scala nella sua dimensione integrale..........................295 Visualizzazione di una galleria. ............................................................................................ 103 Visualizzazione in anteprima del tuo sito web .................................................................. 32 Visualizzazione pagine multiple ..........................................................................................388

W Web Designer vs Web Designer Premium.......................................................................... 16 Widget & segnaposto - Ă¨ tutto automatico! ....................................................................328 Widget da siti di altri widget ................................................................................................ 335 Widget della Galleria design ................................................................................................329 Widget per siti web.................................................................................................................328 Widgets........................................................................................................................................ 36

Z Zoom ..........................................................................................................................................392 Zoom / Scorrimento / Spostamento della pagina ........................................................... 27 Zoom 1:1 .................................................................................................................................... 304