Αντρω δι Νεξυνω

Bannerini scorrevoli in tabella

« Older   Newer »
  Share  
view post Posted on 2/3/2014, 08:08
Avatar

Nubbio x Sempre

Group:
Moderazione globale
Posts:
7,226

Status:


Salve ragazzi.

Questo tips, che non vuole essere esaustivo ma solo "semplice", deriva da una richiesta rivoltami recentemente cui non ho avuto possibilità di rispondere, dato che non avevo mai gestito un forum nel circuito forumfree.

La domanda, di per se semplice, era su come inserire bannerini di siti amici ... non sapevo rispondere, dato che non conoscevo "come" funzionavano le cose in forumfree, per fortuna che c'era il nostro buon @Malko che s'è fatto carico del problema e lo ha risolto.

Essendo che trovo seccante trovarmi a non saper rispondere a domande, per il mio metro, così semplici ho guardato un po' come funzionano le cose e deciso di fare un tips esemplificativo in merito, nel caso possa servire a qualcuno ... si affronterà la situazione che mi era stata posta, cioè : inserire bannerini entro una tabella, ovviamente il discorso interessa solo gli amministratori grafici dei forum ;)

Per gestire la faccenda, il grafico del forum deve accedere alla destione dello HTML della pagina, lo farà tramite i comandi di menu "Amministrazione => Grafica => Codice HTML"

image-bannerini01-0F9C_53134A4B



Entrati in amministrazione dello HTML aggiuntivo al suo forum il grafico avrà disponibile un particolare strumento : lo "Generatore di tabelle"

image-bannerini02-EB2C_53134A4B



Tale strumento fornisce un generatore di codice che provvede, una volta definito il numero di righe e di colonne che si vogliono avere, a generare una tabella secondo i canoni del tema corrente del forum che si sta gestendo.

Nel problema posto la tabella in questione era composta da due righe e diverse colonne, potrebbe farsi anche direttamente ma ... è bene pensarci un po' su prima, e fare alcune considerazioni :
La prima considerazione è che definendo uno specifico numero di colonne, noi saremo vincolati ad un massimo di elementi pari a tale numero, un domani potremmo dover rifare il lavoro e le colonne potrebbero diventare troppo fitte;
La seconda considerazione è che nel circuito forumfree esiste di fatto una articolazione basata su siti "Affiliati, "Gemellati" e "Amici", rispettare tale articolazione richiede "TRE righe di tabella:
La terza considerazione è data dalla constatazione che ho visto, in diversi forum, i bannerini scorrere da una parte all'altra dello schermo ... applicare tale metodologia ci solleva dal dover definire un numero di colone qualsivoglia grande o piccolo.

Quindi quello che a noi serve è una tabella composta da una riga e due colonne, SI, lo so che ho detto tre righe ... seguitemi e capirete il perché ;)

image-bannerini03-0633_53134A78


allora, impostata una rabella 1x2 premiamo il pulsante "Genera HTML" ed otterremo il codice necessario per crearla, selezionatelo e copiatelo, quindi andate alla sezione "Codice HTML che sarà mostrato in FONDO a tutte le pagine" e sotto a quello che c'è già (se volete conservarvelo) incollate il codice copiato .... si comincia a lavorare :D

Individuate la riga (la quarta)
HTML
<div class="mtitle">TITOLO</div>

e cambiate la parola "TITOLO" nella descrizione che volete dare alla vostra tabella (io ho intestato "TEST - Siti amici")

individuare queste quattro righe poco più sotto :
HTML
<tr><!--RIGA1-->
<td class="ww">COLONNA1</td>
<td class="aa">COLONNA2</td>
</tr>


esse rappresentano le istruzioni per creare una singola riga di tabella, non entro in merito al funzionamento delle tabelle potete guardare questa guida per informazioni più dettagliate, vi spiegherò solo a che serve quello che fate ;)

copiatevi queste quattro righe e immediatamente sotto di esse due volte, avrete così definito tre righe di tabella, rinominate il commento "RIGA 1" nel rispettivo numero d'ordine per non imbrogliarvi, sarete nella seguente condizione :
HTML
[HTML]<tr><!--RIGA1-->
<td class="ww">COLONNA1</td>
<td class="aa">COLONNA2</td>
</tr>
[HTML]<tr><!--RIGA2-->
<td class="ww">COLONNA1</td>
<td class="aa">COLONNA2</td>
</tr>
[HTML]<tr><!--RIGA3-->
<td class="ww">COLONNA1</td>
<td class="aa">COLONNA2</td>
</tr>


ora andate alla "RIGA 1" e modificate la riga
HTML
<td class="ww">COLONNA1</td>

come segue :
HTML
<td class="ww" style=style="width:15%;">COLONNA1</td>

così facendo avete definito la larghezza della prima colonna pari al 15% dello spazio disponibile, tale impostazione sarà ereditata dalle prime colonne delle righe successive, ora modificate i valori "COLONNA 1" in "Amici", "Affiliati" e "Gemellati" rispettivamente dalla 1 alla 3 (ovvio che potete dare un altro ordine se volete) questo avrà sistemato le intestazioni di riga

Impostazione di testo/immagini scorrevoli


ora sostituite tutte le scritte "COLONNA2" con il codice che segue :
HTML
<marquee direction="left" scrollAmount=2></marquee>


L'istruzione "marquee" è una istruzione fuori dallo standard HTML, però supportata dalla maggior parte dei browser in circolazione ed ampiamente utilizzata nella docs di Forumfree, ne troverete parecchie esemplificazioni in giro.
il parametro "direction="left"" definisce che lo spostamento di testo o immagini nella seconda colonna debba avvenire da destra verso sinistra (se volessimo l'opposto basterebbe sostituire "right" a "left")
il parametro "scrollAmount=2" definisce la velocità dello spostamento in una scala che va da 1 a salire (il mio è lente).
Questo è quello che ci serve sapere per questa istruzione, chi volesse approfondire può farlo per esempio qui.
la nostra istruzione di definizione della seconda colonna sarà diventata quindi :
HTML
<td class="aa"><marquee direction="left" scrollAmount=2></marquee></td>


per inserire il bannerino di un sito amico ci sarà sufficiente prelevare il codice da includere dal forum amico ed inserirlo nei tag di apertura e chiusura di marquee, se, ad esempio, colessimo inserire il codice del bannerino di InternetGNU, che è
HTML
<a href="http://internetgnu.forumfree.it/"><img src="http://i39.tinypic.com/35hh9mu.jpg" alt="Image and video hosting by TinyPic" /></a


la nostra riga diventerebbe
HTML
<td class="aa"><marquee direction="left" scrollAmount=2><a href="http://internetgnu.forumfree.it/"><img src="http://i39.tinypic.com/35hh9mu.jpg" alt="Image and video hosting by TinyPic" /></a></marquee></td>


nell'immagine sotto ciò che vedreste nella finestra del codice a questo punto

image-bannerini04-4518_53134A78



Si lo so, così a prima vista confonde chi non c'è abituato ma basta fare un attimino mente locale ed è semplicissimo, per inserire un ulteriore bannerino basta dare uno spazio(per non imbrogliardsi, verrà ignorato) ed incollare, sempre all'interno dei tags "marquee" il codice, la riga adatterà l'altezza in automatico a quella del bannerino più alto, sotto un esempio di cosa avviene, ovviamente dopo aver premuto "Salva modifiche" :

image-bannerini05-6977_53134A99



Edited by nuzzopippo - 2/3/2014, 16:23
 
Web  Top
0 replies since 2/3/2014, 08:08   175 views
  Share