INIZIO: MODIFICA DEL LOGO
Torna alla lista webmaster

Iniziamo finalmente a modificare il tema precedentemente scaricato e partiamo dal logo, che potremo sostituire in questo articolo con un altro disegno qualsiasi a nostro piacimento. Come prima cosa lanciamo il programma BlueGriffon che abbiamo imparato a conoscere nell’articolo precedente. Una volta aperto BlueGriffon allarghiamo al massimo la finestra di lavoro e da menù “File” clicchiamo su “Apri file…”, cercando il file “index.html” nella cartella del tema come illustrato nella figura n.1 e facendoci doppio click sopra per aprirlo all'interno di BlueGriffon:

Figura 1

A questo punto abbiamo aperto la pagina “home” del sito, anche chiamata solitamente come nel file col nome di “index.html”. Sotto all’immagine clicchiamo sempre su “Dual View” per avere, a destra dell’immagine, il corrispondente codice HTML così da poter visualizzare pure qui le modifiche che faremo da un punto di vista grafico a sinistra. Siamo quindi nella situazione della figura n. 2 e fino a qui abbiamo ripetuto la sequenza di operazioni fatte nello scorso articolo, mentre ora procederemo finalmente ad effettuare la prima modifica.

Figura 2

Potremmo scegliere di modificare per primo il menù della pagina, cioè le varie voci (“Home”, “Italiano”, ecc…) che conducono alle pagine corrispondenti, oppure potremmo optare per la modifica del testo sotto al menù o altro ancora, ma ho pensato di iniziare le modifiche dal logo che si trova (spesso, come in questo caso) in alto a sinistra oppure (più raramente) in alto a destra o lateralmente.

In questo momento, come possiamo osservare, come logo c’è una semplice scritta: “Classe 5° E”. Nel nostro caso la sostituiremo con un disegno, un’immagine presa da internet o creata con qualche programma di grafica. Facciamo sempre molta attenzione a prendere e ad usare immagini e foto prese dal web, perché potrebbero essere soggette a copyright da parte dei rispettivi autori con possibili divieti legali per il loro utilizzo. Nel nostro caso sceglieremo una immagine presa dal sito https://pixabay.com/it/ , un sito che mette a disposizione migliaia di foto e immagini completamente libere da copyright.

Voi potete scegliere quella che preferite selezionando l’argomento (es. digitando la parola “logo”) e il tipo (es. se volete una foto o un disegno) tra le funzioni della ricerca su Pixabay, dopodiché premete invio e sbizzarritevi a cercare ciò che più vi piace. Per quest’articolo personalmente ho scelto l’immagine della figura n. 3, che voi potrete sostituire con il brand della vostra ditta per un sito aziendale o con qualsiasi altra immagine desideriate.

Figura 3

Quello che ora cercheremo di fare è mettere questa immagine al posto della scritta “Classe 5° E”, attualmente usata come logo. Come prima cosa selezioniamo col mouse tutta la frase “Classe 5° E” e notiamo che, contemporaneamente, a destra verrà selezionata la stessa frase anche all’interno del codice HTML. Il tutto è illustrato nella figura n. 4, che ci permette anche di vedere in che punto del codice (a destra) è posizionato un certo oggetto selezionato da noi nella parte grafica (a sinistra).

In questo modo impareremo piano piano a conoscere anche il codice HTML, poi ovviamente se vorrete approfondirlo dovrete studiarlo in altri ambiti per poter fare modifiche più sofisticate al tema del sito, ma potreste anche limitare la vostra conoscenza (finchè vi accontenterete di fare semplici modifiche come quelle di questa rubrica) all’uso di BlueGriffon e quindi a modificare direttamente la grafica senza interessarvi troppo del codice.

Figura 4

Dopo aver selezionato (a sinistra dove c’è l’immagine, NON a destra dove c’è il codice) la scritta, possiamo cancellarla e noteremo che verrà cancellata contemporaneamente anche a destra nel codice. Ora, sempre a sinistra dove la scritta non c’è più, inseriremo la nostra immagine col nuovo logo. Per farlo possiamo andare sul menù “Inserisci” e scegliere “immagine” nel sottomenù, oppure possiamo andare direttamente nell’iconcina dell’immagine in alto vicino all’iconcina dell’ancora. Nell’uno o nell’altro modo verrà aperta la finestra come da figura n. 5, dove selezioniamo il percorso attraverso il quale apriremo l’immagine del nuovo logo.

Figura 5

Aprendo la cartellina indicata dalla freccia più piccola andiamo quindi a scegliere l’immagine, in questo caso quella da me scelta su pixabay, scriviamo infine “logo” nei due campi evidenziati dal rettangolo rosso e poi clicchiamo su “OK”, la finestrella verrà chiusa e l’immagine verrà posizionata al posto della scritta precedente. Sempre contemporaneamente, a destra nel codice, ci sarà ora una serie di istruzioni HTML (che non andremo ad approfondire in questa sede) che indicheranno la presenza dell’immagine e non più della scritta come invece era prima.

Tutto qui. Abbiamo visto come sia facile, anche senza conoscere nulla del codice HTML ma usando un programma come BlueGriffon, modificare qualcosa all’interno di una pagina del sito e in questo caso sostituire il logo precedente, sia esso scritta o immagine. Il risultato finale con il nuovo logo è rappresentato qui di seguito nella figura n. 6 insieme alla modifica automatica nel codice a destra.

Figura 6