Questa è la tua prima visita? Registrati subito! Registrazione

User Tag List

Risultati da 1 a 1 di 1
  1. #1
    Il terzo cavaliere * UTENTE VIP ® * L'avatar di OminoGiallo


    Registrazione
    31/03/10
    Località
    Over the hills and far away (Bergamo)
    Messaggi
    6,191
    Punti Rep (Ricevuti)
    139
    Likes (Ricevuti)
    2237
    Gamer IDs

    PSN ID: OminoYellow

    [Tutorial] Tabelle interne per le guide: codici ed esempi

    Struttura generale
    Le guide che vengono pubblicate su CoPlaNet.it seguono uno standard preciso per quanto riguarda la visualizzazione dei contenuti. L'intera guida è racchiusa in una tabella che ovviamente è suddivisa in varie righe, tante quante sono i trofei/obiettivi da spiegare. E' sempre e comunque suddivisa in tre colonne, di cui due di dimensione fissa (la prima e l'ultima colonna) e una di dimensione elastica (liquida).

    Ecco i tag necessari per una corretta visualizzazione, per comodita' di lettura viene riportato uno spazio, ma devono essere scritti appunto senza spazi per far si che funzionino:

    • < cpngo>< /cpngo>: questo deve sempre essere il primo e l'ultimo tag della tabella principale, importantissimo in quanto permette di visualizzare la tabella nell'app CoPlaNet Go! per smartphone Android
    • < table>< /table>: all'interno di questo tag vi sara' tutto il contenuto della tabella; qualsiasi tag o testo scritto al di fuori di esso comparira' all'esterno
    • < tbody>< /tbody>: tag che identifica tutto ciò che è racchiuso all'interno del corpo della tabella; non è un tag necessario, ma è comunque buona norma utilizzarlo
    • < tr>< /tr>: tag che identifica una riga, serve a suddividere appunto i contenuti (nel nostro caso, una riga = un trofeo/obiettivo)
    • < td>< /td>: tag che identifica una cella, serve a suddividere una riga in più celle, tante quante ne desideriamo (nel nostro caso servono 3 celle: una per l'immagine del trofeo/obiettivo, una per la descrizione e una per l'icona). E' un tag obbligatorio anche nel caso si volesse creare una riga con una sola cella.



    La struttura è quindi "a matrioska", ogni tag aperto deve essere sempre chiuso. L'unico tag che non ha la chiusura è il tag < img>

    Codice HTML:
    <cpngo> //apertura
    <table> //inizio tabella
    <tbody> //inizio corpo
    <tr> //inizio prima riga
    <td></td><td></td><td></td> //apertura e chiusura celle
    </tr> //fine prima riga
    <tr> //inizio seconda riga
    <td></td><td></td><td></td> //apertura e chiusura celle
    </tr> //fine seconda riga
    </tbody> //fine corpo
    </table> //fine tabella
    </cpngo> //chiusura
    IMG TROFEO/ OBIETTIVODESCRIZIONE TROFEO/OBIETTIVOICONA TROFEO/G
    IMG TROFEO/ OBIETTIVODESCRIZIONE TROFEO/OBIETTIVOICONA TROFEO/G


    Ecco un esempio pratico che rende al meglio l'idea
    Spoiler:
    La Foglia in fiamme
    Hai completato il prologo.

    Obiettivo ottenibile giocando la modalità Avventura, impossibile mancarlo.
    [Tutorial] Tabelle interne per le guide: codici ed esempi
    Alla conferenza dei 5 Kage
    Hai completato il capitolo 1.

    Obiettivo ottenibile giocando la modalità Avventura, impossibile mancarlo.
    [Tutorial] Tabelle interne per le guide: codici ed esempi



    Nota bene: in questo tutorial, per semplicità di lettura, vengono messi degli spazi a capo in ogni pezzo di codice. Nel codice "definitivo" non dovranno esserci questi spazi (Invio sulla tastiera), tutto il codice per essere visualizzato correttamente dovrà essere scritto in modo consecutivo, senza spazi e senza a capo.

    Attributi
    Ogni tag può essere personalizzato grazie agli attributi, che consentono di impostare elementi come lunghezze, altezze, bordi, margini, sfondi, colori, ecc...
    Gli attributi presenti nei vari tag analizzati, nel nostro caso, sono:

    • width: permette di esprimere la lunghezza, in pixel o in percentuale (100% occupera' tutto lo spazio disponibile, che varia in base alla risoluzione dei monitor)
    • height: permette di esprimere l'altezza, in pixel o in percentuale
    • border: imposta un bordo alla tabella (impostando un numero più grande avremo bordi più spessi)
    • cellpadding: regola lo spazio, in pixel, tra il bordo della cella e il contenuto della stessa
    • align: allinea orizzontalmente il contenuto di una cella (nel nostro caso centralmente, ma si può anche allineare a sinistra, destra o giustificare)
    • alt: attributo per le immagini, mostra un testo nel caso l'immagine non fosse disponibile
    • src: attributo per le immagini, permette di inserire un percorso ad un'immagine
    • color: attributo del tag font, permette di colorare il testo



    Nota
    Tutti questi tag e attributi menzionati sono presenti in qualsiasi codice delle nostre guide e, ad esclusione di src e color che possono variare, vi bastera' quindi copia/incollare il codice dei tutorial per far funzionare tutto.

    Tabelle interne
    Qualora vi sembrerà opportuno inserire ulteriori tabelle all'interno delle descrizioni potrete scegliere se utilizzare una tabella semplice in BB Code o una più complessa in HTML.

    Tabella BB Code
    E' il tipo di tabella più semplice, se dovete creare degli elenchi che non hanno bisogno di troppe spiegazioni o aggiunte (immagini, video) è la scelta migliore, quella col codice meno incasinato e più comodo da modificare.

    Codice HTML:
    [table]AAA|BBB|CCC
    DDD|DDD|DDD
    [/table]
    AAABBBCCC
    DDDDDDDDD

    Ecco un esempio pratico che rende al meglio l'idea
    Spoiler:
    AbilitàMonete necessarie per crearlaEffetto
    16 rintocchi di campanaRubber, Jinbei e RayleighAumenta i danni inflitti da Colpo della ciurma, l'indicatore dell'attacco speciale si carica più velocemente.
    9 piratiRubber, Zoro, Nami, Usop, Sanji, Chopper, Robin, Franky e BrookSalute, attacco e difesa aumentano di 2 stelle, aumentano anche i danni inflitti dal Colpo della ciurma.


    Codice HTML d'esempio
    Codice HTML:
    [table][B]Abilità[/B]|[B]Monete necessarie per crearla[/B]|[B]Effetto[/B]
    16 rintocchi di campana|Rubber, Jinbei e Rayleigh|Aumenta i danni inflitti da Colpo della ciurma, l'indicatore dell'attacco speciale si carica più velocemente.
    9 pirati|Rubber, Zoro, Nami, Usop, Sanji, Chopper, Robin, Franky e Brook|Salute, attacco e difesa aumentano di 2 stelle, aumentano anche i danni inflitti dal Colpo della ciurma.
    [/table]
    Per creare una nuova riga vi basterà andare a capo col tasto Invio.
    Per creare una nuova cella vi basterà utilizzare il separatore |.
    La tabella occuperà automaticamente tutto lo spazio di cui avrà bisogno. Non è possibile modificarne la lunghezza, l'unico modo per farlo è quello di inserire un immagine abbastanza lunga (come ad esempio nelle schede dei topic ufficiali). Se doveste invece aver bisogno di tabelle con dimensioni fisse o quant'altro allora sarà necessario usare quella in HTML.


    Tabella HTML
    Apparentemente è simile alla tabella in BB Code, ma grazie all'HTML qui potremo invece ingrandire le celle, unire righe e/o colonne, modificare i bordi, inserire immagini o colori di sfondo.
    Codice HTML:
    <table><tr><td>AAA</td><td>BBB</td><td>CCC</td><tr><tr><td>DDD</td><td>EEE</td><td>FFF</td><tr></table>
    AAABBBCCC
    DDDEEEFFF


    Tabella HTML - Ingrandire le celle
    E' possibile dare una dimensione alle celle in due modi: misurandole in pixel oppure in percentuali.

    Utilizzando i pixel è sufficiente indicare quanti ne vogliamo utilizzare grazie all'attributo width all'interno del tag < td>.
    E' sufficiente impostare solo la prima riga, quelle sottostanti avranno automaticamente la stessa grandezza.
    Utile per inserire immagini create ad hoc con dimensioni prestabilite.
    Codice HTML:
    <table><tr><td width="90">AAA</td><td width="50">BBB</td><td width="200">CCC</td><tr><tr><td>DDD</td><td>EEE</td><td>FFF</td><tr></table>
    AAABBBCCC
    DDDEEEFFF


    Utilizzando le percentuali invece potremo dimensionare le celle senza dare una dimensione precisa in pixel, ma adatta alle esigenze della cella stessa. Ad esempio, se so che nella colonna centrale ci andranno i contenuti più corposi, posso darle la dimensione più grossa e poi adattare le rimanenti. Ovviamente per funzionare le percentuali devono riferirsi alla < table> principale, per cui bisognerà impostare width=100%; così facendo sapremo per certo di occupare tutto lo spazio disponibile del post.
    Codice HTML:
    <table width="100%"><tr><td width="20%">AAA</td><td width="50%">BBB</td><td width="30%">CCC</td><tr><tr><td>DDD</td><td>EEE</td><td>FFF</td><tr></table>
    AAABBBCCC
    DDDEEEFFF


    Ecco un esempio pratico. Tabella grande il 100% e prima colonna che occupa il 35% di spazio, indipendentemente dal contenuto.
    Spoiler:
    Movimento
    Attacco normale
    Attacco potente
    Tecnica speciale (se Aura disponibile)
    Schivata (anche ripetutamente, quando l'avversario attacca)
    Scatto +
    Attacco in scatto + ,
    Lancio/Contrattacco lancio
    Parata (premuto)
    Movimento laterale (premuto) +
    Provocazione
    Alterna tecnica speciale/
    Controllo visuale
    Alterna visuale Bosspremere
    Mappa
    Ogni guerriero della Sacra Scuola di Nanto ha la capacità di sferrare i così definiti Colpi Propizi: durante uno scontro, verrà visualizzato il tasto sullo schermo a seconda di certe condizioni specifiche. Se si preme il tasto tempestivamente, il guerriero che si sta usando entrerà in una modalità particolare (si illumunerà di luce, avrà una particolare aura scintillante addosso e la schermata di gioco cambierà tonalità di colore) in cui si potranno eseguire altri tipi di mosse.


    Codice HTML d'esempio
    Codice HTML:
    <table width="100%">
    <tr><td width="35%">[B]Movimento[/B]</td><td align=left>:analeft:</td></tr>
    <tr><td width="35%">[B]Attacco normale[/B]</td><td align=left>:PS3square:</td></tr>
    <tr><td width="35%">[B]Attacco potente[/B]</td><td align=left>:PS3triangle</td></tr>
    <tr><td colspan="2">Ogni guerriero della [B]Sacra Scuola di Nanto[/B] ha la capacità di sferrare i così definiti [B]Colpi Propizi[/B]: durante uno scontro, verrà visualizzato il tasto :PS3triangle sullo schermo a seconda di [B]certe condizioni specifiche[/B]. Se si preme il tasto tempestivamente, il guerriero che si sta usando entrerà in una modalità particolare (si illumunerà di luce, avrà una particolare aura scintillante addosso e la schermata di gioco cambierà tonalità di colore) in cui si potranno eseguire [B]altri tipi di mosse[/B].</td></tr></table>
    ---------------------------------------------------------------------------------

    Tabella HTML - Unire le celle con rowspan e colspan
    In alcuni casi risulta molto utile e ordinato fondere alcune righe o colonne, ad esempio se dobbiamo inserire un'immagine e a lato diverse righe di spiegazione, oppure possiamo pensare al classico esempio di domande con risposte multiple.
    Esistono due attributi specifici per fondere righe o colonne, e si tratta di rowspan e colspan, che devono essere applicati al tag < td>.

    Colspan = fusione di due celle sulla stessa riga

    AAABBB
    CCCCDDDDEEEE
    FFFFGGGG

    Codice HTML:
    <table><tr><td colspan="2">AAA</td><td>BBB</td></tr><tr><td>CCCC</td><td>DDDD</td><td>EEEE</td></tr><tr><td>FFFF</td><td colspan="2">GGGG</td></tr></table>
    Rowspan = fusione di due righe

    AAABBBCCCC
    DDDDSSSS
    FFFFZZZ

    Codice HTML:
    <table><tr><td rowspan="2">AAA</td><td>BBB</td><td>CCCC</td></tr><tr><td>DDDD</td><td rowspan="2">SSSS</td></tr><tr><td>FFFF</td><td>ZZZ</td></tr></table>
    Utilizzando questi attributi bisognera' inoltre ricordarsi di eliminare le celle in eccesso, altrimenti la tabella risultera' sformata. Ad esempio, se di base ho tre celle per riga ed uso un colspan=2 otterrei ancora 3 celle di cui una doppia e le altre due normali (occupando quindi lo spazio di 4 celle). Bastera' quindi eliminare, nel nostro caso, l'ultima cella della riga per avere il risultato dell'esempio precedente.

    Ecco un esempio pratico di colspan
    Spoiler:
    GUIDA ALLA PESCA
    Nell'immagine viene visualizzata la visuale che si ha mentre si pesca (in questo esempio si sta pescando con Kokari nella Foresta di Agata).
    In primo piano vi è il pescatore con in mano la canna da pesca (indicata dalla freccia rossa), mentre nella parte più lontana vengono visualizzati in acqua i vari pesci, caratterizzati da un'ombra che riflette le loro dimensioni reali (ad esempio il pesce indicato dal cerchio rosso).
    Per avviare la sezione di pesca sarà innanzitutto necessario parlare con il pescatore, premendo accanto a lui. A questo punto la visuale si posizionerà dietro le spalle del pescatore, esattamente come in figura, con il pescatore davanti e l'acqua con i pesci in secondo piano; questi ultimi appariranno come delle ombre che si muovono sotto il pelo dell'acqua e la dimensione dell'ombra sarà legata alla dimensione reale del pesce, anche se sarà impossibile conoscere esattamente la specie del pesce prima di averlo catturato. Tali dimensioni saranno principalmente tre: Piccolo, Medio, Grande.
    Dopo aver individuato l'esemplare di pesce che si vuole pescare, sarà necessario attivare il Pennello Celeste premendo , e continuando a tenerlo premuto si dovrà disegnare una linea che parte dalla punta della canna da pesca (indicata dalla freccia rossa) ed arriva fino al pesce che si vuole catturare, ad esempio quello incluso all'interno del cerchio rosso (si ricorda che per disegnare una linea basterà tenere premuto e muovere l'analogico ). Rilasciare il tasto usato per attivare il Pennello per fa abboccare il pesce.

    Ed ecco il codice "ripulito" per comodita'
    Codice HTML:
    <table><tr><td colspan="2">[B][COLOR="#0000CD"][SIZE=3]GUIDA ALLA PESCA[/SIZE][/COLOR][/B]</td></tr>
    <tr><td>IMMAGINE</td><td>Testo a fianco dell'immagine</td></tr>
    <tr><td colspan="2">Descrizione sotto le colonne con immagine e testo</td></tr>
    </table>

    Ecco un esempio pratico di rowspan
    Spoiler:
    Finale/TrofeoRisposta Livello 9-2Risposta Livello 9-3Risposta Livello 9-4Livello Karma
    Una nuova vitaSiNoOpzione a sinistra 100% Positivo
    Come ai vecchi tempiSiSiOpzione a sinistraPositivo
    SiNoOpzione a destra
    NoSiOpzione a destra
    Sogni d'oroSiSiOpzione a sinistraNegativo
    SiNoOpzione a sinistra

    Ed ecco il codice "ripulito" per comodita'
    Codice HTML:
    <table>
    <tr><td>[B]Finale/Trofeo[/B]</td><td>[B]Risposta Livello 9-2[/B]</td><td>[B]Risposta Livello 9-3[/B]</td><td>[B]Risposta Livello 9-4[/B]</td><td>[B]Livello Karma[/B]</td></tr>
    <tr><td>Una nuova vita</td><td>Si</td><td>No</td><td>Opzione a sinistra</td><td>100% Positivo</td></tr>
    <tr><td rowspan="3">Come ai vecchi tempi</td><td>Si</td><td>Si</td><td>Opzione a sinistra</td><td rowspan="3">Positivo</td></tr>
    <tr><td>Si</td><td>No</td><td>Opzione a destra</td></tr>
    <tr><td>No</td><td>Si</td><td>Opzione a destra</td></tr>
    <tr><td rowspan="2">Sogni d'oro</td><td>Si</td><td>Si</td><td>Opzione a sinistra</td><td rowspan="2">Negativo</td></tr>
    <tr><td>Si</td><td>No</td><td>Opzione a sinistra</td></tr>
    </table>
    ---------------------------------

    Tabella HTML - Background con colori
    E' possibile colorare ogni singola riga, o cella, di colore diverso nel caso si voglia rendere più semplice la lettura, individuare step importanti, ecc.
    Per ottenere questo risultato, bisognerà inserire un codice esadecimale (oppure un nome di colore in inglese) per ogni elemento della tabella; se si tratta di una riga (con una o più celle) sarà sufficiente inserire il colore solo nel tag < tr>, mentre se si volesse colorare la singola cella bisognerà inserire il codice solo nel tag < td> della cella desiderata.
    L'attributo da utilizzare è bgcolor="codice_colore".

    Ecco un esempio di tabella con righe colorate alterne.
    Spoiler:
    Potenziamento
    Descrizione
    Pillole necessarie
    Livello 1
    Livello 2
    Livello 3
    Salute MassimaAumenta la salute massima
    50
    100
    -
    Distanza Modalità AscoltoAumenta il raggio d'azione della modalità ascolto
    20
    30
    50
    Velocità FabbricazioneRiduce il tempo impiegato nella fabbricazione
    25
    30
    50
    Velocità curaPermette di usare più velocemente i kit di soccorso
    30
    40
    50
    Oscillazione ArmaRiduce l'oscillazione dell'arma
    50
    100
    -
    Maestro con i coltelliPermette di uccidere un Clicker con coltello quando attaccati. I coltelli al massimo della resistenza non si rompono se usati per sfuggire alla presa di un Clicker.
    75
    100
    -

    Ed ecco il codice ripulito per comodità
    Codice HTML:
    <table>
    <tr bgcolor="green"><td rowspan="2">Potenziamento</td><td rowspan="2">Descrizione</td><td colspan="3">Pillole necessarie</td></tr>
    <tr bgcolor="green"><td>Livello 1</td><td>Livello 2</td><td>Livello 3</td></tr>
    <tr><td>Salute Massima</td><td>Aumenta la salute massima</td><td>50</td><td>100</td><td>-</td></tr>
    <tr bgcolor="DDDDDD"><td>Distanza Modalità Ascolto</td><td>Aumenta il raggio d'azione della modalità ascolto</td><td>20</td><td>30</td><td>5</td></tr>
    <tr><td>Velocità Fabbricazione</td><td>Riduce il tempo impiegato nella fabbricazione</td><td>25</td><td>30</td><td>50</td></tr>
    <tr bgcolor="DDDDDD"><td>Velocità cura</td><td>Permette di usare più velocemente i kit di soccorso</td><td>30</td><td>40</td><td>50</td></tr>
    <tr><td>Oscillazione Arma</td><td>Riduce l'oscillazione dell'arma</td><td>50</td><td>100</td><td>-</td></tr>
    <tr bgcolor="DDDDDD"><td>Maestro con i coltelli</td><td>Permette di uccidere un Clicker con coltello quando attaccati. I coltelli al massimo della resistenza non si rompono se usati per sfuggire alla presa di un Clicker.</td><td>75</td><td>100</td><td>-</td></tr>
    </table>
    Qualora invece vi servissero solo delle celle, otterreste un risultato di questo tipo:

    DE45FADDDDFA47980A
    YellowRoyalBlueGreen

    Codice HTML:
    <table>
    <tr>
    <td bgcolor="DE45FA">DE45FA</td>
    <td bgcolor="DDDDFA">DDDDFA</td>
    <td bgcolor="47980A">47980A</td>
    </tr><td bgcolor="yellow">Yellow</td>
    <td bgcolor="royalblue">RoyalBlue</td>
    <td bgcolor="green">Green</td>
    </tr>
    </table>
    Come vedete nella prima riga sono presenti codici esadecimali (cifre da 0 a 9 e lettere da A a F), mentre nella seconda riga sono presenti i nomi in inglese. Il codice è indefferente per colori semplici come nero, rosso, giallo, ecc, per i quali è meglio usare i nomi in inglese per comodità; qualora invece voleste un colore in particolare dovrete utilizzare gli esadecimali.
    In questo link potrete facilmente trovare tutti i colori esadecimali e copiare il codice che vi serve : Ruota 4096 Colori Esadecimali

    ------------------------

    Tabella HTML - Background con immagini
    Nel caso invece vogliate inserire un'immagine di sfondo, oppure un'immagine più grande di 511x287 pixel (ovvero il limite di dimensione delle immagini nei post), dovrete comunque utilizzare una tabella che abbia le stesse precise dimensioni dell'immagine, per cui bisognerebbe preparare un'immagine ad hoc o "accontentarsi" di una già presente nel web con certe dimensioni.
    Ecco un esempio di tabella camuffata da immagine
    Spoiler:

    Codice HTML:
    <center><table width="800" height="667" background="http://www.coplanet.it/uploads/1373238508.jpg"><tr><td></td></tr></table></center>
    Come potete vedere, l'immagine e la tabella hanno la stessa dimensione, senza bordi bianchi.
    Per inserire un'immagine occorre utilizzare l'attributo background="_img" direttamente nel tag < table>

    -------------------------

    Questo è quanto di facoltativo si può utilizzare per abbellire e rendere più professionali tutte le vostre guide per quanto riguarda la visualizzazione dei contenuti tramite tabelle.
    Per qualsiasi domanda non esitate a contattare lo staff guide.
    Buon proseguimento su CoPlaNet.it
    Ultima modifica di OminoGiallo; 25-09-2013 alle 12:22

  2. 1 2
     
  3. # ADS
    Circuit advertisement [Tutorial] Tabelle interne per le guide: codici ed esempi
    Registrazione
    Always
    Località
    Advertising world
    Messaggi
    Many
     

 

 

Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
Tutti gli orari sono GMT +2. Adesso sono le 03:32.
Powered by vBulletin® Version 4.2.4
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
Image resizer by SevenSkins

Forum Modifications By Marco Mamdouh
Donation System provided by vBDonate v1.4.9 (Lite) - vBulletin Mods & Addons Copyright © 2020 DragonByte Technologies Ltd.
User Alert System provided by Advanced User Tagging v3.1.3 (Lite) - vBulletin Mods & Addons Copyright © 2020 DragonByte Technologies Ltd.
CoPlaNet.it online dal 27-08-2007