Oggetti che si ripetono

È normale avere alcuni elementi che si ripetono sulle varie pagine del sito. Il titolo, l'header, i pulsanti di navigazione in alto e il fondo pagina di questo sito sono ottimi esempi. In Web Designer sono chiamati "Oggetti ripetuti". Quando vengono selezionati, mostrano un piccolo simbolo di riconoscimento a forma di fiore come questo in alto a sinistra. È facile creare da soli uno di questi elementi. Prova ad aggiungere un oggetto alla pagina, una foto oppure disegna un rettangolo con il Selector seleziona l'oggetto e il menu:    Arrange -> Repeti su tutte le pagine Usando la galleria delle pagine puoi vedere l'elemento che si ripete nella stessa posizione su ogni pagina. Se lo cambi verrà cambiato su tutte le pagine. Un altro elemento che si ripete è il testo a piè di pagina. Usando lo strumento Testo puoi cliccare sul piè di pagina ed editarne il testo. Le modifiche interessano tutte le pagine. (Consiglio: se non vuoi l'elemento su di una pagina in particolare, cancellalo semplicemente dalla pagina interessata. Se vuoi che una copia non venga aggiornata automaticamente seleziona l'opzione di menu Ordina >Arresta l'aggiornamento)

Responsive Web Design (solo Designer Premium)

Web Designer può creare siti web mobili ottimizzati in grado di adattarsi alle varie larghezze dei dispositivi. In questo modo potrai ottenere una versione del tuo sito su misura per per schermi più piccoli come quelli di smartphone e offrire allo stesso tempo un layout e una dimensione del font diversi più adatti a schermi più grandi come ad es. tablet e computer desktop.  Ecco un esempio  basato su uno dei modelli inclusi che fornisce varianti di per dispositivi mobili, tablet e normali computer desktop. Nota: la versione per schermi più piccoli impiega font più grandi, elementi di navigazione e colonne diverse più adatti per i piccoli schermi dei cellulari. Web Designer inoltre crea automaticamente delle immagini e grafiche ad alta risoluzione per Retina e altri schermi ad alta risoluzione.

Supersite (solo Designer Premium)

Un'altra nuova funzione di Web Designer 10 si chiama Xara Supersite,e offre transizioni di pagina e animazioni accattivanti, nonché un ridimensionamento "fit-to-screen" automatico. Un modo perfetto per rendere il tuo sito unico e originale. Esempio supersite 1 : Un menu di un ristorante responsive per browser di tablet e computer desktop. Ruota il dispositivo (o cambia la larghezza del browser) per vedere un layout diverso per formato panoramico e ritratto (non per cellulari) con effetto "fit-to-screen" automatico. Esempio supersite 2 : Un semplice slideshow di foto con effetto "fit-to-screen", rilevatore di orientamento e immagini con risoluzione Retina. Nota: contiene foto ad alta risoluzione di grandi dimensioni, pertanto si raccomanda per connessioni veloci. Entrambi questi esempi supportano gesti su dispositivi touch per la navigazione da pagina a pagina.

Presentazioni (solo Designer Premium)

Se stai usando la versione premium di Web Designer puoi creare presentazioni web, che consistono in slideshow simili a quelli di PowerPoint ma per il web.  visitatori del tuo sito possono sfogliare le singole slide, oppure sarai tu a controllare la presentazione per determinati visitatori da te invitati. Ecco un   esempio di presentazione web.

Stili

Web Designer supporta Stili di testo. Nello Strumento Testo trovi sulla barra informazioni un menu a comparsa degli Stili che mostra l'elenco di Stili usati nel documento corrente. "Normal" indica il testo del corpo principale del documento e ci sono due stili di intestazione. Lo stile 'Intestazione 2' è quello usato in cima a questo paragrafo e altri. Per aggiornare l'aspetto di tutte le intestazioni, selezionane una, modificala secondo le esigenze, cambiando il font, la dimensione, il colore ecc. e quindi nel menu a comparsa degli Stili seleziona 'Aggiorna Intestazione 2'

Font di Google (solo Premium)

Questo testo usa un font chiamato Open Sans, una serie di font dall'aspetto chiaro, moderno inclusi con Web Designer. Ma ora puoi scegliere tra oltre 600 font grazie ai font di Google. Web Designer include un selezionatore di font che ti consente di scaricare automaticamente e installare qualsiasi font scegli. Inoltre, si tratta di normali font Windows che, una volta installati funzioneranno con qualsiasi applicazione Windows. Quando vengono impiegati in documenti web, questi font si appoggiano ai server di Google (consentendoti di salvare larghezza id banda) e sono compatibili con tutti i moderni browser. Per visualizzare e installare un font di Google, da dal menu a comparsa dei font (Strumento Testo), clicca il link Aggiungi mostrato qui.

Testo fluido intorno agli oggetti

Se vuoi che un oggetto respinga il testo, clicca su uno di questi e seleziona "Respingi testo sotto". Questo fa serpeggiare il testo attorno agli oggetti quando li sposti sulla pagina. Questa azione modificherà la tua pagina e sarà quindi necessario riposizionare gli elementi o reimpostare le dimensioni delle pagine.

Adattamento pagina

Se aggiungi o elimini un testo qui, la pagina si ridimensiona adattandosi alle modifiche del testo. Tutti gli elementi che si trovano sopra o sotto ad esso si sposteranno, incluse grafiche e piè di pagina: anche l'immagine del fiore in basso nella pagina resterà nella posizione corretta. Questi elementi si controllano dal menu contestuale Posizione nella pagina (clicca con il tasto destro nello Strumento Selector). Gli elementi con l'attributo di anti-sovrapposizione (come questa colonna di testo) spingerà il piè di pagina e tutti gli altri elementi con questo attributo. Puoi incollare grafiche o foto da inserire nel testo oppure ancorare grafiche ad un punto preciso. Ciò significa che le grafiche si sposteranno in funzione al testo circostante mentre lo modifichi. Le due immagini qui sotto sono esempi. Aggiungi qualche riga vuota nel testo qui per vedere come le grafiche si spostano.

Selezione e visualizzazione delle pagine

La Galleria Pagine & Layer appare sul lato destro della finestra. Clicca su una delle miniature per spostarti alla pagina richiesta. Clicca il triangolino vicino ad ogni pagina per espandere la galleria per mostrare i layer della pagina. Se preferisci una visualizzazione verticale della sequenza delle pagine (come in un programma di videoscrittura), clicca con il tasto destro del mouse sullo sfondo della pagina e seleziona "Visualizzazione Pagine Multiple".

Riordinare e rinominare le pagine

Trascina le miniature nella galleria Pagine e layer per riordinarle. Per cambiare nome alla pagina seleziona prima la pagina cliccando su di questa a poi clicca di nuovo sul nome in basso alla miniatura della pagina (La prima pagina di ogni sito dovrebbe sempre chiamarsi "Index")

Aggiungere e rimuovere pagine

Se vuoi creare una nuova pagina simile a quella corrente clicca su questa icona sulla barra (Oppure Elabora e Menu Pagine). Se vuoi aggiungere una nuova pagina dai modelli disponibili apri la Galleria dei Design e dalla sezione Temi Sito Web -> Esempio gratuito trascina una grafica sul questo documento. Hai visto come è facile abbinare i colori? La serie principale di modelli pagina installati si trova in Temi Sito Web, dove troverai tante grafiche diverse.

Atri strumenti

Vediamo anche altri strumenti e altre funzioni di Web Designer. Puoi provare questi sul fumetto semi trasparente in basso. Per la maggior parte delle operazioni è necessario selezionare prima l'elemento sul quale si vuole applicare. (Clicca su questo con il Selector). Cambia il colore  trascina un colore dalla linea dei colori sulla forma. Oppure prova il Color Editor (Ctrl+E). Cambia le dimensioni, posizione e angolo: usando il Selector e trascina i 4 punti di controllo attorno alla forma. Applica una leggera ombra: seleziona lo Strumento Ombra e trascina la sagoma del fumetto. Regola gli elementi di controllo in alto. Dai un colore graduato per il riempimento: seleziona lo strumento di riempimento e spostati con il mouse sulla forma. Trascina la punta della freccia per regolare. Prova ad inserire un colore sulle estremità della freccia di riempimento. Oppure seleziona una delle estremità e prova il Color Editor (Ctrl+E). Rendi semitrasparente: seleziona lo strumento di trasparenza (bicchiere di vino) ed aggiusta i valori usando lo slider scorrevole posto in alto. Trascina la forma sulla pagina per vedere l'effetto trasparenza. Nello strumento trasparenza spostati con il mouse attraverso l'oggetto che ora avrà una trasparenza graduata. Elabora forme: questa è una funzione avanzata. Seleziona la forma, apri lo Strumento Forma (nel menu a comparsa del secondo strumento sulla sinistra), quindi trascina uno dei bordi o uno dei piccoli punti di controllo. Se hai già usato uno strumento di elaborazione vettoriale di bezier, questo strumento ti risulterà familiare. Infine: effettua un'anteprima per visualizzare le modifiche nel browser! (Se hai già usato un software di elaborazione HTML capirai subito i vantaggi che offre Web Designer. La semplicità con la quale si possono posizionare gli oggetti in completa libertà e i tanti strumenti grafici rendono Web Designer uno strumento unico ed inimitabile.)