Ulteriori configurazioni: Difference between revisions

From rejetto wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 25: Line 25:


Segui questa procedura per inserire il modello denominato "black" .
Segui questa procedura per inserire il modello denominato "black" .
# Effettua il download del file chiamato "Beta Black Template v3.htm" da [http://ledufe.no-ip.info:2222/HFS-templates/ Templates], e copialo (o muovilo) nella cartella "Templates" precedentemente creata.<br>Se necessario, rinomina il file in "Beta Black Template v3.tpl" (es. cambia l'estensione del file) così da permettere all'editor HTML di HFS di riconoscerlo.
# Effettua il download del file chiamato "Beta Black Template v3.htm" da [http://ledufe.no-ip.info:2222/HFS-templates/ Templates] e copialo (o muovilo) nella cartella "Templates" precedentemente creata.<br>Se necessario, rinomina il file in "Beta Black Template v3.tpl" (es. cambia l'estensione del file) così da permettere all'editor HTML di HFS di riconoscerlo.
# In HFS, seleziona la voce "Edit HTML template".<br>Si aprirà l'editor che, automaticamente, caricherà il template corrente (quello di default se tu non hai apportato ancora alcuna modifica).
# In HFS, seleziona la voce "Edit HTML template".<br>Si aprirà l'editor che, automaticamente, caricherà il template corrente (quello di default se tu non hai apportato ancora alcuna modifica).
#Clicca "Import" e, se necessario, naviga verso C:\HFS\Templates. <br>Seleziona "Beta Black Template v3.tpl" e clicca Ok.  
#Clicca "Import" e, se necessario, naviga verso C:\HFS\Templates. <br>Seleziona "Beta Black Template v3.tpl" e clicca Ok.  
#Quando il nuovo modello è stato caricato nell'editor, clicca su "Apply" e quindi su "Ok" (l'ultima azione chiude l'editor).
#Quando il nuovo modello è stato caricato nell'editor, clicca su "Apply" e quindi su "Ok" (l'ultima azione chiude l'editor).
#Nella finestra di HFS, seleziona la radice del sito ((root (/)), clicca con il tasto destro del mouse e scegli il comando "Browse it" per visualizzare gli effetti delle modifiche che hai apportato.<br>Ricorda, se necessario, di aggiornare la cache del browser, premi il tasto (tasto "F5" in molti sistemi).
#Nella finestra di HFS, seleziona la radice del sito ((root (/)), clicca con il tasto destro del mouse e scegli il comando "Browse it" per visualizzare gli effetti delle modifiche che hai apportato.<br>Ricorda, se necessario, di aggiornare la cache del browser (tasto "F5" in molti sistemi).


====Modifica dei Templates====
====Modifica dei Templates====
Line 38: Line 38:
# In HFS, seleziona  "Edit HTML template" per aprire l'editor che caricherà, in automatico, il modello corrente ("Beta Black Template v3.tpl" se non hai apportato alcuna modifica).
# In HFS, seleziona  "Edit HTML template" per aprire l'editor che caricherà, in automatico, il modello corrente ("Beta Black Template v3.tpl" se non hai apportato alcuna modifica).
# Trova (con "find") la sezione style section e cerca questa riga:<br> "<nowiki>body, .row { color: #000000 }</nowiki>"
# Trova (con "find") la sezione style section e cerca questa riga:<br> "<nowiki>body, .row { color: #000000 }</nowiki>"
# INel codice HTML, i colori sono normalmente identificati con i loro valori hex. <br>"0D8BE9" rappresenta il classico colore blu.<br>Sostituisci la riga suddetta con questa: "<nowiki>body, .row { color: #0D8BE9 }</nowiki>" e clicca "Apply".
# Nel codice HTML, i colori sono normalmente identificati con i loro valori hex. <br>"0D8BE9" rappresenta il classico colore blu.<br>Sostituisci la riga suddetta con questa: "<nowiki>body, .row { color: #0D8BE9 }</nowiki>" e clicca "Apply".
# ritorna alla finestra principale di HFS window, seleziona root (/), clicca con il tasto destro del mouse e seleziona l'opzione  "Browse it" per visualizzare gli effetti del tuo cambiamento.
# ritorna alla finestra principale di HFS window, seleziona root (/), clicca con il tasto destro del mouse e seleziona l'opzione  "Browse it" per visualizzare gli effetti del tuo cambiamento.
# Ora noterai che il colore riferito a questa parte del sito è blu.<br> Ricorda, se necessario, di aggiornare la cache del browser, premi il tasto (tasto "F5" in molti sistemi).
# Ora noterai che il colore riferito a questa parte del sito è blu.<br> Ricorda, se necessario, di aggiornare la cache del browser (tasto "F5" in molti sistemi).
# Se desideri rendere permanenti queste variazioni del template, clicca "Ok" nell'editor HTML.<br>Se preferisci scartare i cambiamenti, clicca su "Undo".
# Se desideri rendere permanenti queste variazioni del template, clicca "Ok" nell'editor HTML.<br>Se preferisci scartare i cambiamenti, clicca su "Undo".
[[Image:067.png]]
[[Image:067.png]]

Revision as of 12:12, 22 December 2006

Editor HTML Editor e i Templates (Modelli)


Attenzione: alcuni utenti hanno incontrato problemi a visualizzare, nel loro browser web, i cambiamenti apportati.
Questi malfunzionamenti possono, solitamente, essere risolti resettando la cache del browser; (in molti sistemi è sufficiente utilizzare il tasto "F5").

Sebbene il modello predefinito di HFS soddisfi in maniera completa la maggior parte degli utenti, è anche possibile effettuare delle variazioni che consentono di cambiare l'aspetto del tuo sito.
Puoi provare liberamente e senza problemi in quanto HFS è munito di una utility, presente nell'editor dei modelli e chiamata "Restore default", che permette il ripristino dei valori originali del template predefinito (default *.tpl) fornito da HFS al momento della prima installazione.

Di seguito, si può vedere l'aspetto di base di un "sito di esempio" visualizzato con Firefox:

Error creating thumbnail: Unable to save thumbnail to destination

Nella figura successiva, lo stesso sito dopo aver apportato alcune variazioni al template originale (o averne inserito uno completamente nuovo):

Error creating thumbnail: Unable to save thumbnail to destination

(Note that the above pictures have been shrunk and truncated so that they are easy to view. In reality, the graph in the "black" template for example, displays (and works) perfectly.)

Cambio dei Templates

E' molto più facile modificare un modello esistente, piuttosto che crearne uno ex novo.
Puoi trovare ottimi esempi di templates da utilizzare all'indirizzo Forum come pure in questo sito.

Il modello di HFS (un file con estensione *.tpl) contiene gli elementi da cui HFS costruisce l'HTML finale.
In senso stretto, un *.tpl non è un HTML vero e proprio, ma noterai che l'editor presente in HFS potrà usare i files prelevati dai siti succitati, sempre che tu sostituisca l'estensione *.htm o *.html con *.tpl.

Prima di iniziare, sarà meglio creare una cartella denominata "Templates" nella tua cartella di "HFS". Es. C:\HFS\Templates.

Segui questa procedura per inserire il modello denominato "black" .

  1. Effettua il download del file chiamato "Beta Black Template v3.htm" da Templates e copialo (o muovilo) nella cartella "Templates" precedentemente creata.
    Se necessario, rinomina il file in "Beta Black Template v3.tpl" (es. cambia l'estensione del file) così da permettere all'editor HTML di HFS di riconoscerlo.
  2. In HFS, seleziona la voce "Edit HTML template".
    Si aprirà l'editor che, automaticamente, caricherà il template corrente (quello di default se tu non hai apportato ancora alcuna modifica).
  3. Clicca "Import" e, se necessario, naviga verso C:\HFS\Templates.
    Seleziona "Beta Black Template v3.tpl" e clicca Ok.
  4. Quando il nuovo modello è stato caricato nell'editor, clicca su "Apply" e quindi su "Ok" (l'ultima azione chiude l'editor).
  5. Nella finestra di HFS, seleziona la radice del sito ((root (/)), clicca con il tasto destro del mouse e scegli il comando "Browse it" per visualizzare gli effetti delle modifiche che hai apportato.
    Ricorda, se necessario, di aggiornare la cache del browser (tasto "F5" in molti sistemi).

Modifica dei Templates


Ora puoi inserire alcune piccole modifiche al template per variare il suo aspetto.
Per fare questo:

  1. In HFS, seleziona "Edit HTML template" per aprire l'editor che caricherà, in automatico, il modello corrente ("Beta Black Template v3.tpl" se non hai apportato alcuna modifica).
  2. Trova (con "find") la sezione style section e cerca questa riga:
    "body, .row { color: #000000 }"
  3. Nel codice HTML, i colori sono normalmente identificati con i loro valori hex.
    "0D8BE9" rappresenta il classico colore blu.
    Sostituisci la riga suddetta con questa: "body, .row { color: #0D8BE9 }" e clicca "Apply".
  4. ritorna alla finestra principale di HFS window, seleziona root (/), clicca con il tasto destro del mouse e seleziona l'opzione "Browse it" per visualizzare gli effetti del tuo cambiamento.
  5. Ora noterai che il colore riferito a questa parte del sito è blu.
    Ricorda, se necessario, di aggiornare la cache del browser (tasto "F5" in molti sistemi).
  6. Se desideri rendere permanenti queste variazioni del template, clicca "Ok" nell'editor HTML.
    Se preferisci scartare i cambiamenti, clicca su "Undo".
Error creating thumbnail: Unable to save thumbnail to destination

The above illustrates the principles of a method for safely editing an HTML template. The main alternative is to save ("Export") the different template versions as you apply and verify changes.

Background color


One of the most dramatic visual changes is to change the background color. This is controlled by this line in the style section: body { margin:0; background-color:#51595B; padding:10px; color:#FFFFFF; }. Try changing the color value here to "#0D8BE9".

Error creating thumbnail: Unable to save thumbnail to destination


Click to enlarge





Not everybody is familiar with hex color codes. You may care to download the free Pixeur application. This "pick" tool allows you to click anywhere on your screen and display the corresponding hex value (among other things).

Advanced example


The following illustration shows the template called "!!!ledufe.tpl".

Error creating thumbnail: Unable to save thumbnail to destination








At first glance it may just look like a fairly clean variation of the default template, but it actually uses some very advanced features.
If you click on the "Google" logo towards the bottom of the screen for example, your browser goes directly to the Google site where you can immediately perform Internet searches.
The central part of this webpage:

  • Shows whether you are logged into the "Hamachi" network, (and permits autologin if you're offline).
  • Allows you to invoke and sign-in to Skype messenger and use Skype phone.
  • Lets you sign into Windows messenger.
  • Lets you access other Microsoft services.

The toolbar across the top allows access to further features, including "Site" navigation, further "Hosted Sites", and to change the type of "CSS" that actually constructs this webpage within the HFS browser, a site "Search" box, and this:

Error creating thumbnail: Unable to save thumbnail to destination


This lets you use a self-made set of "HFS Tools", manipulate your browser's bookmarks or "Favorites", and lets you stream music files to site visitors using your favorite MP3 player.

There are many examples of good templates, together with notes about their construction, in the Template Examples Gallery.