tEst


Vai ai contenuti

Pagina 5

CSS & HTML        

Segnalo un sistema per poter avere dei CSS custom (per modifiche globali) ed editabili durante la costruzione del sito, quindi con la possibilità di mantenere le modifiche senza che il programma "azzeri" tutto.

Create col Blocco note due file e chiamateli (per esempio)
s_custom.css e t_custom.css, li andrete a riempire di istruzioni man mano che vi servono le modifiche.

Aprite il file
index.html (col Blocco note va benissimo) che si trova nella cartella Hor o Ver del modello da voi scelto. Ricordo che, se non avete cambiato il percorso in fase d'installazione del programa, i modelli si trovano in: C:\Programmi\WebSite X5 Evolution\Models
Inserite dopo la tag
<head> le seguenti 2 stringhe:

<link rel="stylesheet" type="text/css" href="files/s_custom.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="files/t_custom.css" media="screen" />


Aprite WS e caricate il vostro progetto (assicuratevi che state lavorando sullo stesso modello del file index.html appena editato) e create (per esempio) una pagina nascosta dove inserirete un oggetto "Codice HTML" e, (al suo interno) collegherete tramite l'apposita icona " File collegati al codice HTML" i due css (s_custom.css e t_custom.css).
WS colloca tutti i file collegati ad un codice HTML nella cartella
files del vostro sito (e in locale), quindi non c'è bisogno di upparli separatamente sul server.

Bene, ora abbiamo i nostri file .css "agganciati" al progetto. Non resta che inserirci le istruzioni delle modifiche quando ci occorrerano.

Note: se inserite una nuova istruzione nei vostri file css a WS aperto dovrete chiudere e riaprire il programma per vedere le modifiche oppure rimuovere il/i file .css per poi riaggiungerlo/i all'oggetto "Codice HTML"
Possiamo (più semplicemente) aprire l'oggetto "Codice HTML" da dove abbiamo collegato i file .css ed aprire la finestra (tramite l'apposita icona) per poi richiuderla con OK

aggiornato il 10/02/09    

Esempi        

Il titolo della pagina (Pagina 5) è spostato di 156 pixel dal bordo sinistro.
Per ottenere ciò è sufficiente inserire nel file
s_custom.css questo codice:

h2 {margin-left: 156px; }



Il menu orizzontale è "allineato" a destra (float).
Per ottenere ciò è sufficiente inserire nel file
t_custom.css questo codice:

#imMenuMain {float: right; }



Le note a piè pagina (
tEst) sono spostate di 226 pixel dal bordo sinistro.
Per ottenere ciò è sufficiente inserire nel file
t_custom.css questo codice:

#imFooter_L {margin-left: 226px; }



aggiornato il 11/05/08    


tEst

Torna ai contenuti | Torna al menu