L'IMPORTANZA DELLA GRAFICA IN UN SITO

Istruzioni

• 1
  Il tema grafico di un sito internet personale è un elemento fondamentale per il sito stesso. La grafica e la struttura di un sito ci permettono di capire come usufruire dei servizi forniti dal sito stesso o come ricavarne delle informazioni. Purtroppo se non si è esperti, è difficile realizzare templates generici o per cms come joomla o wordpress, soprattutto se non si ha alcuna consocenza di html o di css. Può risultare in questo caso utile un’applicazione chiamata artisteer. Artisteer e’ un software professionale, semplice da utilizzare e soprattutto economico che vi permetterà di realizzare lo schema grafico del vostro sito o del vostro blog.
• 2
  Il software artisteer ci permette di creare un template da zero per semplici pagine html, per applicazioni asp.net e per cms come joomla, blogger, wordpress e dotnetnuke. Una volta aperto il programma e selezionato il tipo di template che si vuole creare, ci si trova davanti un template di default. Ad esso è possibile applicare numerosi cambiamenti come modificare i colori, lo sfondo, il layout e la struttura delle colonne,i menu e così via.
• 3
  La prima opzione del menu in alto ci fornisce una serie di suggerimenti automatici che ci permetteranno di creare la grafica in mancanza di ispirazione. Possiamo scegliere tra diverse opzioni come suggerisci disegno (che cambierà casualmente diversi tipi di templates completi), suggerisci colori, suggerisci sfondo, suggerisci foglio e così via. Cliccando quindi piu’ volte su questi bottoni verranno realizzate numerose idee davanti ai nostri occhi e dalle quali prendere spunto.
• 4
  Una volta scelto il genere di template da utilizzare come base, la seconda voce di menu “colori e font” ci permette di modificare i colori principali del sito di regolarne la tonalità e di modificare i font e i colori principali che saranno utilizzati nei testi del sito stesso. Sarà possibile quindi scegliere il tipo di scrittura, la grandezza di questa e la posizione del testo.
• 5
  L’opzione “layout” ci fornisce due tipologie di modifiche: layout pagina e colonne. Da layout pagina è possibile analizzare e scegliere la struttura principale della pagina del nostro sito, inserire un menu principale in alto o un’intestazione o entrambi. Dall’opzione colonne, possiamo scegliere il numero delle colonne e la loro posizione; inoltre, cliccando in basso sulla voce di menu “opzioni larghezza” sarà possibile modificare i parametri della loro struttura scegliendo le dimensioni di ognuna di esse.
• 6
  Dall’opzione “sfondo” si può decidere il tipo di sfondo da utilizzare nel sito, variare la luminosità, l’immagine, la trama (inserire striature o altri motivi grafici), il gradiente di colore, i colori di sfondo; è possibile, inoltre, aggiungere tramite l’opzione “carica da file” un’immagine personale come sfondo del template e regolarne le caratteristiche direttamente dal programma stesso.
• 7
  La sezione “foglio” ci permette di regolare le dimensioni e la struttura del foglio principale su cui costruire il sito. Si può determinare l’ampiezza desiderata tramite le dimensioni suggerite, o inserirne di proprie; scegliere l’offset superiore, cioè quanto deve essere distante dal margine superiore della pagina web; lo spessore dei bordi; quanto devono essere smussati gli angoli; la trasparenza e le caratteristiche grafiche come ombre, colori o trama.
• 8
  La sezione “intestazione” si attiverà soltanto se avrete selezionato un layout che prevedeva la presenza dell’intestazione stessa. Oltre a scegliere le caratteristiche grafiche come l’ampiezza, l’altezza e il colore, si possono scegliere le dimensioni del blocco testo su cui potrete inserire il titolo e il sottotitolo del sito stesso, la trama e i giochi di luce, si può inserire un’immagine di sfondo con un proprio logo tra quelli suggeriti o caricarli dal proprio pc tramite lo strumento carica file e posizionarli dove si vuole nel blocco di intestazione stesso.
• 9
  La stessa cosa è possibile fare nella sezione “menu”. Qui si può scegliere la tipologia di bottoni, di separatori tra le voci del menu superiore, i colori dei bottoni sia senza il passaggio che con il passaggio del mouse. Un’opzione permette di attivare e modificare eventuali sottovoci del menu che scenderanno a tendina dal menu principale in alto. Anche su queste è possibile scegliere le dimensioni, la tipologia di elenco, i colori e le altre caratteristiche grafiche e testuali.
• 10
  In “articoli” si scelgono le caratteristiche dei testi o degli articoli che andranno inseriti nel sito web. Si possono inserire immagini, scegliere l’eventuale presenza di un’intestazione interna all’articolo, modificarne le caratteristiche e la posizione. Si possono modificare, inoltre, le caratteristiche del testo, delle immagini che andranno inserite, delle tabelle che si possono creare inserendo il numero di celle e colonne desiderate. Con l’opzione “footer” si modificano le parti finali del testo stesso con la possibilità di inserire icone per la stampa o il salvataggio del testo sul proprio pc.
• 11
  Dalla sezione “blocchi” si possono modificare la varie sezioni o blocchi delle colonne, le dimensioni, la spaziatura tra essi, i bordi, le caratteristiche dei titoli, dei testi, la presenza di ombre e della tipologia di queste ultime. Si possono variare l’intestazione, lo sfondo e il contenuto grafico e testuale di questi.
• 12
  In “pulsanti” è possibile scegliere e variare le caratteristiche dei bottoni del nostro sito, le dimensioni, i colori, le caratteristiche testuali e la loro posizione. Come per le altre sezioni grafiche, anche qui è possibile modificare la trama, la luce, il gradiente e il colore.
• 13
  Infine si può andare a modificare la sezione “footer” andando a variare i margini del foglio, le dimensioni come ampiezza ed altezza, la presenza di links web e l’inserimento di rss.
• 14
  Una volta creato il nostro template possiamo salvare il progetto per modificarlo in seguito ed esportarlo sia in formato html che in formato “pacchetto” per l’uso dei cms. E’ possibile, inoltre, seguire l’anteprima grafica nel browser web direttamente dal menu principali, accessibile tramite l’icona della paletta grafica presente in alto a sinistra nel programma stesso. Buon divertimento e date sfogo alla fantasia!