Creazione di Template per Siti Web e Blog con Artisteer: Tutorial Completo

Cos'è Artisteer?

Artisteer per Windows è un'applicazione che permette la progettazione di modelli per siti web e blog.

Cos'è un editor WYSIWYG?

Un editor WYSIWYG (acronimo di What You See Is What You Get) consente di creare progetti freschi e accattivanti con un semplice clic sulle opzioni e di vedere immediatamente le modifiche riflesse sullo schermo.

Per quali piattaforme di contenuti crea modelli?

Le piattaforme per le quali vengono realizzati i modelli sono: Blogger, Joomla, WordPress, Drupal e .NET.

Quali sono i formati supportati?

I formati supportati sono: ARTX, HTML, XML e ZIP.

Quali sono le parti o sezioni principali?

• Barra del titolo: mostra il nome del programma e il file attivo.
• Barra di accesso rapido: contiene le opzioni più utilizzate come Apri, Annulla, Salva, ecc. Questa barra può essere personalizzata.
• Area di lavoro: mostra il modello e le modifiche apportate.

Gruppo definito di opzioni

La Barra delle opzioni mostra le azioni organizzate in schede, come Idee, Colori e Font, Layout, Sfondo e molte altre.

Pulsante Artisteer

• Il Pulsante Artisteer offre un menu con le principali operazioni sui file, tra cui: creazione di un nuovo file, apertura di uno esistente, salvataggio, esportazione e anteprima nel browser.
• È anche possibile accedere alle attività e alle informazioni sul programma, oltre a due pulsanti nella parte inferiore del menu: uno per inserire il nome dell'artista e l'altro per uscire dal programma.

Come caricare un modello su Blogger

Una volta creato il modello, è necessario esportarlo nel formato corretto per il sito in cui si intende utilizzarlo. Per fare ciò, fare clic sul pulsante Esporta o sul comando di menu corrispondente. Nella finestra che si apre, digitare il nome del modello desiderato e la cartella in cui salvare i file.

Selezionare anche l'opzione "Esporta in un file ZIP" per comprimere e impacchettare i file del modello. Esplorando il contenuto del file ZIP, si noterà che ci sono molte immagini e il file template.xml. Insieme, questi elementi costituiscono il modello.

1. Accedere e attivare il blog su Blogger.
2. Entrare nel blog, selezionare "Layout" e cliccare su "Modifica HTML" nella barra delle schede.
3. Si consiglia di effettuare un backup del modello corrente.
4. Per caricare un nuovo modello e sostituire quello corrente, premere il pulsante Sfoglia, cercare nel disco e selezionare il file main.xml del nuovo modello. Premere "Carica" e, per completare il processo, salvare le modifiche.

Descrizione delle schede

• Layout: consente di modificare il layout della pagina e la posizione degli elementi.
• Colori e caratteri: permette di scegliere tra 3 temi di colore predefiniti o di selezionare singolarmente i colori desiderati e salvarli come tema. È possibile apportare diverse modifiche ai colori scelti. Per i caratteri, è possibile scegliere il font e la dimensione.
• Menu: qui si sceglie l'aspetto di ogni parte del menu: voci della barra e voci secondarie. È anche possibile scegliere il layout di pagina, i formati e le configurazioni.
• Idee: questa scheda consente di generare automaticamente modelli casuali, modificando l'intero design o scegliendo solo alcuni elementi singolarmente. Suggerisce colori, font, layout del modello, sfondo, foglio, intestazione, menu, oggetti di design, blocchi, pulsanti e piè di pagina. È utile quando si inizia a utilizzare il programma.
• Sfondo: è possibile scegliere un'opzione predefinita, aprirla da un file esistente o semplicemente scegliere un colore e aggiungere effetti di bagliore, sfumatura, trama o un'immagine. Cliccando su "Opzioni" si aprirà una finestra in cui è possibile impostare l'allineamento e la trasparenza del bagliore, la posizione della texture, l'altezza, il contrasto e le sfumature.
• Foglio: è possibile scegliere un foglio predefinito o crearne uno personalizzato combinando la larghezza, l'offset (dall'alto), la grondaia, il raggio, la larghezza e il colore del bordo, la trasparenza e una varietà di sfumature.
• Intestazione: consente di regolare la larghezza e l'altezza dell'intestazione, le caratteristiche del blocco di testo e lo sfondo. È anche possibile inserire un'immagine in primo piano e regolarne le dimensioni e la posizione, aggiungere un effetto flash e scegliere lo stile e il colore del titolo. Per scrivere un titolo, è necessario farlo in questa scheda dove dice "Titolo", oltre allo slogan.
• Articolo: questa scheda consente di definire le caratteristiche degli elementi di contenuto, delle voci o dei post. È possibile configurare:
  • Un'immagine di base e il suo stile, inclusi forma, margine, margine interno del testo, padding, bordo, raggio e ombra.
  • Il formato del testo, sia del corpo dell'articolo che del titolo o dell'intestazione e del piè di pagina.
  • Altri elementi come link, citazioni, fumetti, immagini e tabelle.
• Sidebar: è possibile applicare lo stesso stile con imbottitura, bagliore o non applicare nulla. È possibile determinare la sua composizione come nella scheda "Layout". È possibile inserire gli stili di blocco: sfondo, spazio tra gli oggetti, intestazione e contenuto. È inoltre possibile regolare i margini, lo spazio tra le lettere e le linee, il colore del testo, i link e gli elenchi puntati.
• Menu verticale: offre le stesse opzioni della scheda "Menu", ma per la configurazione del menu verticale.
• Pulsanti: è possibile scegliere tra gli stili di pulsanti esistenti o progettarne uno personalizzato, definendo bordo, texture, sfumatura, ombra, colore di riempimento, colore del bordo e caratteristiche del font del testo.
• Piè di pagina: offre opzioni per lo stile, come riempimento, texture, sfumatura, allineamento, margine interno del carattere del testo, trasparenza, testo, icona RSS e aspetto del collegamento ipertestuale.