Creare lo "scheletro scheda", html, table, altro

ƒilippo

Posted on 16/7/2015, 12:16

+4

.

Disagio Member

Group: Fan

Posts: 7,524

NAN Points: +584

Status: Anonymous

Dato che il Pino mi ha insignito, ahimé, di questo incarico...

CITAZIONE (Ødin @ 18/6/2015, 18:31)

fil da quel che ho visto sei molto pratico, queste cose vanno sia per i nanniani, sia fuori dal forum. aka, utenti che cercano html e trovano gdr °L° potresti prenderti la sezione in moderazione

E dato che finalmente ho un po' di tempo libero, ma la ragazza è in montagna :zopia2:

, proverò per ora a scrivere ~~un tutorial~~ qualcosa circa la creazione di uno scheletro scheda.
Parecchie delle nozioni descritte qui sono le medesime già spiegate da Odin, nel precedente tutorial, per cui se già avete letto quello, troverete molte cose ripetute.

Ecco l'accenno di scheda che ho creato per l'evenienza e che proverò ad analizzare:

Uzumaki Naruto

Dati Personali

Nome: Naruto
Clan: Uzumaki
Villaggio natale: Konoha
Età: 16

[...]

Abilità

Abiliità innata: Chakra Uzumaki
I membri del clan Uzumaki possiedono un incredibile forte forza vitale in grado sia di sopportare e sopravvivere a lesioni più gravi, più un incredibile longevità. I membri del clan sono anche benedetti con grandi capacità di recupero, in grado di recuperare rapidamente da estrema stanchezza e riparare lesioni in più brevi periodi di tempo. Alcuni possono migliorare ulteriormente i poteri di guarigione e mordendo e succhiando il loro chakra è possibile guarire da ogni ferita trasferendo il proprio chakra. La loro forza vitale è tanta da poter resistere per un po di tempo anche all'estrazione di un demone. Alcuni membri Uzumaki hanno dimostrato di possedere una forma forte e speciale di chakra, manifestandolo con Catene di chakra che protrudono dal loro corpo che possono manipolare a loro volontà in battaglia.
I membri di questo clan inoltre erano molto portati all'arte della fūinjutsu, ed erano rispettati e temuti in tutto il mondo a causa della loro abilità prodigiosa.

Abilità speciale: Senjutsu
[...]

Caratteristica PG: Resistenza fuori dal comune
[...]

Tecniche

Rasengan
Tipo: Ninjutsu
Rango: A
Sigilli: No
Nome Originale: Rasengan 螺旋丸
Descrizione: Tecnica che porta il controllo della forma del chakra al suo massimo. il ninja, dopo lungo allenamento, impara a far ruotare il chakra nel palmo della mano creando una sfera azzurro brillante dall'alto potenziale distruttivo. La forza rotatoria è tanto grande da lanciare la vittima lontano di diversi metri e creare crateri nella roccia all'impatto. Diversamente da altre tecniche come il Chidori, il Rasengan è una tecnica incompleta, che non integra alcun elemento del chakra, e questo la rende estremamente versatile. Oltre alle derivate, in numero e forma delle sfere, è possibile creare una o più Tecniche Avanzate che integrino elementi del chakra all'interno del Rasengan, come Arte del Vento - Rasengan.

Rasengan Superiore Gigante
Tipo: Ninjutsu
Rango: A
Sigilli: No
Nome Originale: Chōōdama Rasengan 大玉螺旋丸
Descrizione: Enorme, devastante versione del Rasengan che richiede una quantità abnorme di chakra, ottenibile solo con il Senjutsu o particolari abilità. Lo shinobi crea una sfera più grande persino del proprio corpo che se va a segno può persino distruggere una montagna.

Rasengan Superiore Gigante
Tipo: Ninjutsu
Rango: A
Sigilli: No
Nome Originale: Chōōdama Rasengan 大玉螺旋丸
Descrizione: Enorme, devastante versione del Rasengan che richiede una quantità abnorme di chakra, ottenibile solo con il Senjutsu o particolari abilità. Lo shinobi crea una sfera più grande persino del proprio corpo che se va a segno può persino distruggere una montagna.

Semplice, senza fronzoli inutili, senza simil-bottoni apparentemente magici (che magari descriverò un'altra volta). Insomma, la base delle schede più utilizzate. Vedi Banxi, Odin, Drago, ...
Qui di seguitò - in spoiler - il codice privo di scritte inutili.

SPOILER (clicca per visualizzare)

CODICE

<div align="center"><div style="display:block; margin: 0px; overflow:auto; width:612px; border: 10px solid #000000; padding:3px; background-image: url(http://i288.photobucket.com/albums/ll194/dra31/Forum%20images/eren-back.png); align:center; text-color: #000000">[size=1]
<table border="0"><tr><td width="50%" align="justify" text-color: #000000"><fieldset style="border:3px solid black; padding:1px"><legend align="right"><b><i>Dati Personali</i></b></legend><div style="height: 150px; overflow-y:scroll; padding:5px;">
// DATI PERSONALI //
</div></fieldset>
</td>
<td width="50%" align="justify" text-color: #000000"><fieldset style="border:3px solid black; padding:1px;"><legend align="right"><b><i>Abilità</i></b></legend><div style="height: 150px; overflow-y:auto; padding:5px;">
// ABILITÀ //
</div></fieldset>
</td>
</tr><tr>
<td colspan="2" align="justify" text-color: #000000"><fieldset style="border:3px solid black; padding:1px;"><legend align="right"><b><i>Tecniche</i></b></legend><div style="height: 150px; overflow-y:auto; padding:5px;">
// TECNICHE //
</div></fieldset>
</td></tr></table>[/size]</div></div>

Iniziamo dal principio, la struttura esterna, portante, della scheda.

L'ESOSCHELETRO

CODICE

<div align="center"><div style="display:block; margin: 0px; overflow:auto; width:612px; border: 10px solid #000000; padding:3px; background-image: url(http://i288.photobucket.com/albums/ll194/dra31/Forum%20images/eren-back.png); text-align:center; text-color: #000000">
//SCRIVERE QUI //
</div></div>

Il < div align ... > esterno, chiuso con l'ultimo < /div >, serve solo per indicare la posizione della scheda rispetto all'impaginazione. Tutti gli elementi racchiusi tra quel div, sino alla sua chiusura, saranno centrati.

Passiamo alle cose utili, all'interno del secondo div, che corrisponde con lo scheletro esterno visto sopra.

display: da lasciare in "block", assolutamente.

margin: indica lo spazio che separa il vostro oggetto (in questo caso lo scheletro della vostra scheda) da altri oggetti vicini. In questo caso ho lasciato 0px, poichè la scheda è normalmente l'unico elemento che si inserisce nel relativo topic.
È possibile indicare separatamente i margini dei quattro lati, così:

CODICE

margin-top: 10px;
margin-bottom: 20px;
margin-left: 5px;
margin-right: 5px;

In particolare possono essere utili "top" e "bottom" per lasciare dello spazio rispettivamente sopra e sotto la scheda, in modo che non siano troppo appiccicati alla skin del foto. De gustibus...

overflow: inutile se non inserite un parametro di altezza (height) rigido. Cosa sconsigliata. Si può lasciare in "auto", all'occorrenza, o eliminare proprio. Il suo funzionamento sarà spiegato meglio dopo...

width: indica la larghezza della scheda. Se non inserito la scheda si allargherà per tutto lo spazio necessario, con un risultato più o meno malvagio...

border: il bordo esterno della scheda, banalmente.
Si compila in questo modo: 10px solid #000000;
ovvero: dimensione proprietà colore.

È possibile giocare sui bordi, anche indicando proprietà diverse per ogni lato. Ad esempio:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in urna quis enim lobortis dignissim. Nam sit amet eleifend purus. Nullam volutpat viverra porta. Vivamus tincidunt vulputate nulla at sagittis. Aliquam id felis dolor. Quisque hendrerit et lorem et dapibus. Etiam eu ipsum risus.

Un pugno nell'occhio, che in html si traduce così:

CODICE

border-top: 20px double #000000;
border-bottom: 30px groove blue;
border-left: 10px ridge red;
border-right: 10px dotted green;

padding: proprietà sottovalutata. È il margine interno, che separa il bordo, per esempio, dal testo. Fondamentale se si usa un testo giustificato!
Come sempre si può separare padding-top, -bottom, -left, -right.

background-image(link) o background-color: sfondo della scheda, può essere un colore (in codice esadecimale o, nel foro, in inglese), oppure un'immagina. Generalmente si sceglie un'immagine piccola, che si ripeterà automaticamente, perchè più leggera. Ma nulla vieta di scegliere un'immagine che calzi a pennello le dimensioni della scheda.

align: proprietà che regola l'impaginazione interna all'esoscheletro. Per quanto sia indubbio che il testo giustificato ("giustify"), sia più figo, è bene invece inserire la proprietà "center", per garantire simmetria agli oggetti interni (una tabella). I testi o le immagini, eventualmente fuori dalla tabella, possono essere allineate con un successivo div align.

Metto un punto di pausa qua, anche per spaccare un attimo il tutorial, che sennò apparirebbe come un muro di testo infinito.
:asd:

Fra qualche ora (?!) posto la descrizione della parte più complicata, ovvero la table interna e i fieldset (questo che vedete!), con i quali si andrà a fare ordine nella scheda.

Piccola, ma doverosa, parentesi sui div. Il tag div è uno dei più utilizzati nell'impaginazione grafica HTML, diciamo che per quello che serve in un forum è l'elemento per eccellenza.
div sta per divide ed in effetti il suo utilizzo è quello di dividere gli spazi della pagina, attribuendo le proprietà che andate ad inserire nel relativo style.
Ad esempio:

CODICE

Donerà le proprietà di height, overflow, padding a quello che è inserito fra l'apertura e la chiusura del tag.
Parentesi chiusa.

Ora, dopo aver creato un buon esoscheletro, bisogna ovviamente riempirlo.
È ovviamente possibile limitarsi ad un testo, come nei codici di postaggio, magari affianco immagini, con l'attributo align.

CODICE

(c'è il pulsantino apposito per generare questo codice, quello con la "A" affiancata al testo)
Due parole sull'attributo float. Semplicemente posizione l'oggetto (o blocco o spazio o quello che volete) a sinistra/destra/sopra/sotto rispetto al resto. Ovvero al testo-blocco-oggetto fuori dal div.
È come se lo "volatilizzasse" rispetto al resto della pagina, che invece segue le regole della sequenzialità.

Esempio:

CODICE

<div style="float: left; margin-right: 10px">A</div> X

A

X

CODICE

<div style="float: right; margin-left: 10px">A</div> X

A

X

FIELDSET

Per creare invece delle caselle, con le quali separare elementi testuali da altri, si può usare il fieldset

CODICE

<fieldset>CONTENUTO</fieldset>

Che può essere arricchito con un titolo o legenda.

CODICE

<fieldset><legend>TITOLO</legend></fieldset>

Nel medesimo modo del tag div, anche fieldset e legend possono essere arricchiti con svariati attributi. Già descritto sopra.

CODICE

<fieldset style="border:3px solid black; padding:1px;"><legend align="right"><b><i>TITOLO</i></b></legend>CONTENUTO</fieldset>

TITOLOCONTENUTO

SCROLLBAR

Ed ecco l'overflow!
Questo attributo serve essenzialmente ad attivare lo scrollbar. O meglio, indica come gestire un overflow delle dimensioni del blocco rispetto ai valore di larghezza-altezza selezionati.

#1
#2
#3
#4
#5
#6
#7
#8
#9

Il questo caso il codice era questo.

CODICE

<div style="height: 100px; width: 250px; overflow:auto; padding:5px;">
CONTENUTO
</div>

Notare come invece, selezionate height e width fisse, lo scrollbar si sia "attivato" solo in altezza, ovvero solo se necessario. Questo perchè abbiamo scelto "auto".

Scrivendo invece "overflow:scroll", lo scrollbar sarà comunque presente, anche in assenza di overflow. Es:

CODICE

<div style="height: 100px; width: 250px; overflow:scroll; padding:5px;">
CONTENUTO
</div>

#1
#2
#3

È possibile trattare separatamente l'overflow in altezza e in larghezza, o trattare uno solo di questi. Per far questo basta indicare in questo modo qual è la direzione alla quale fa riferimento overflow.
y è quella verticale (height), x quella orizzantale (width).

CODICE

overflow-y: ...
overflow-x: ...

padding, in questo caso, è consigliato in modo che il contenuto del blocco div, nel quale comparirà lo scrollbar, non sia appiccicato alla barra di scorrimento. Direi bruttino.

Altro consiglio, poichè ne ignoro una possibile risoluzione più carina.
Quando si vuole inserire uno scrollbar all'interno di un fieldet, viene un obbrobrio se si elenca l'attributo overflow in fieldset style, in quando la barra di scorrimento finisce per accavallarsi con il bordo superiore-inferiore. Insomma, provare per credere, non viene un granchè.
Si ottiene un risultato migliore inserendo all'interno del fieldset un ulteriore div dentro al fieldset, al quale si può dare un valore, anche molto piccolo, di padding. Così:

CODICE

<fieldset style="border:3px solid black; padding:1px; width: 200px; "><legend align="right"><b><i>Dati Personali</i></b></legend><div style="height: 150px; overflow-y:scroll; padding:5px;">Nome: Naruto
Clan: Uzumaki
Villaggio natale: Konoha
Età: 16

[...]
</div></fieldset>

Risultato:

Dati Personali

Nome: Naruto
Clan: Uzumaki
Villaggio natale: Konoha
Età: 16

[...]

Altro giro, altro regalo.
Al prossimo l'ultimo (credo, e spero presto) col table.

Guida ancor più dettagliata

Edited by The Law - 7/7/2021, 18:17

.

Altair~

Posted on 16/7/2015, 12:20

.