Aiuto:Stile

Mediawiki, è concepito per scrivere un'enciclopedia e per darle una impaginazione sobria e standardizzata. Pur apprezzandone la grafica, ormai classica, vogliamo qui incoraggiare una maggiore libertà stilistica, nei limiti di misura e decenza accettati dalla comunità. In particolare incoraggiamo ciò che aiuta a mettere in rilievo il testo , a cominciare da grassetto e corsivo, e da ornamenti come i virgolettati , i apolettera, e altro.

L'editor non è, al momento, attrezzato per un uso visualmente intuitivo, del tipo in cui "ciò che vedi è ciò che appare", ma in compenso, a differenza di Wikipedia, sono qui a disposizione quasi tutti gli strumenti della grafica web: HTML e CSS.

Chi non sa come usarli può copiare e incollare il codice che trova negli esempi messi a disposizione o nelle altre voci.

Va però tenuto presente che anche un semplice testo con una foto, nello stile di Wikipedia, fa una gran bella figura, ed è di più di quanto non venga dedicato a tanti personaggi famosi nelle voci di quell'enciclopedia. Ciò che conta è cosa si scrive, non come si impagina. L'importante è scrivere quelle prime parole e caricare la prima foto, piantare il seme.

Strumenti dell'editor

Quando viene cliccata una icona o un'opzione nella barra degli strumenti dell'editor, viene immesso del codice che aiuta a formattare o stilizzare la pagina. Non è la soluzione più elegante, ma permette di raggiungere lo scopo. Se, ad esempio cliccate l'icona "Spazio bianco" vedrete apparire il codice &# 160; che serve semplicemente a inserire uno spazio bianco aggiuntivo tra due parole, così.
Se selezionate delle parole e cliccate sul bottone , al loro fianco apparirà il codice:

<span style='color:black; font-family:arial; font-size:100%;'>delle parole</span>

che vi permette di cambiare, nell'ordine, il colore, il carattere e la dimensione del testo. Se, ad esempio, cambiate i valori di default lì riportati con

<span style='color:red; font-family:georgia;font-size:150%'> delle parole </span>

ottenete: delle parole .

Se invece cliccate l'opzione Capolettera nel menù Stile vedrete apparire il codice:

  {{Dropcap|colore=black|carattere=arial||grande=3.50em|marginealto= 0.14em|
 marginedestra= 0.28em|primorientro= -0.5em|lettera= |restoparola=}}

che vi permette di stilizzare, ingrandendola, la lettera iniziale di un paragrafo. Il seguente effetto, ad esempio:

Quod erat demonstrandum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

è ottenuto con questo markup:

{{Dropcap|colore=gray|carattere=gabriola||grande=3.45em|marginealto= 0.14em|marginedestra= 0.58em|primorientro= -1.5em|lettera=Q |restoparola=uod}} erat demonstrandum. Lorem ipsum dolor...

Div

Il "div" è un contenitore, una sottoporzione della pagina che può racchiudere di tutto: testi, grafica, altri contenitori, e vi permette di stilizzarla in modo differente dal resto. La tipica pagina web che vedete schematizzata a destra, come anche quella che state leggendo, è costruita in genere da una suddivisione in quattro o cinque div principali che a loro volta possono contenerne di secondari.

Il contenuto di un div è racchiuso tra i tag: <div> e </div>, il suo "aspetto" invece è specificato da codice contenuto nel primo dei due tag. Se scrivo nell'editor:

<div style= "background:beige;">''' questo div non è un gran che</div>'''

ottengo:

questo div non è un gran che

Se ora specifico la sua larghezza aggiungendo:

<div style= "background:beige; width:20%">''' questo div non è un gran che, ma ora il testo è costretto a incolonnarsi e ho ottenuto un riquadro</div>'''

ottengo:

questo div non è un gran che, ma ora il testo è costretto a incolonnarsi e ho ottenuto un riquadro

Se ora invece aggiungo:

<div style= "background:beige; width:20%; border: 3px solid #cccccc; padding:20px; margin: 10px : float:left" > Ora ho messo una cornice, dei margini interni ed esterni, e ho permesso lo scorrimento del testo a destra

Ora ho messo una cornice, dei margini interni ed esterni, e ho permesso lo scorrimento del testo a destra

ottengo il riquadro a sinistra.
L'istruzione "float:left" è particolarmente importante perchè non solo decide della posizione del div, ma permette anche al testo (sottostante) di scorrergli accanto e, ad eventuali immagini (o anche div), di affiancarsi.
Per interrompere invece lo scorrimento in alto, quando non è desiderato, inserire il codice
{{clear}} sopra gli elementi che non si vogliono far salire.

Per far si che il contenuto del div non venga schiacciato contro la cornice o al testo accanto, vanno aggiunti degli spazi di margine interni ed esterni secondo il modello rappresentato qui a destra (questi spazi si aggiungono alle dimensioni del div).

Se si vogliono specificare margini o cornici diverse per ogni lato del div, vanno scritti in ordine orario: alto, destra, basso, sinistra.
Posso anche usare l'ampiezza del "margin" per spostare il div all'interno della pagina allontanadolo dai suoi bordi: "margin: 0px 0px 0px 200px;", ad esempio sposterà il div di 200 pixels dal bordo sinistro.

Se volete scrivere il vostro testo principale su due colonne anzichè una (come in questo esempio), cliccando l'opzione Stile - Doppia colonna, vi apparirà il codice.

<div style= "width:45%;float:left; margin:15px;">Qui il testo della prima colonna</div>  
<div style= "width:45%;float:left; margin:15px;">Qui il testo della seconda colonna </div>

che vi agevolerà nell'impaginazione. Se volete cambiare il rapporto tra le due colonne o usarne magari tre, potete farlo con semplici ritocchi.

Se cliccate invece l'opzione Stile - Div vi apparirà il codice

<div style= "float:left;color:black; background-color:#fcfcfc; width:45%; border-style:solid; border-color:black; border-width:1px 0px 1px 0px; padding:20px 20px 20px 20px; margin:10px 30px 10px 0 px;border-radius: 0px" > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div>'''

che produce il riquadro :

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

'

che può essere da voi personalizzato modificando i valori scelti.

Naturalmente esistono molti altri modi di stilizzare un div. La proprietà "border-radius", ad esempio serve ad arrotondare gli angoli.

Questo div ha un border-radius di 20px

La proprietà z-index attribuisce una coordinata di profondità e permette di creare sovrapposizioni (quelli che hanno uno z-index più alto sono più in primo piano), come nel caso dei due div qui in basso che appaiono incorniciati. Il codice, come sempre, è visibile cliccando "modifica" qui in alto a destra, come anche quello che sfrutta la proprietà "display:none" per far apparire dal nulla una foto non appena il mouse si posa sul più vicino quadrato verde.

Questo div l'ho addirittura incorniciato!

Questo l'ho attaccato storto!

<CSS> .hphoto {

border: 1px solid white; position:relative; }

.hphoto img:hover { border: 1px solid blue; } .hphoto span{ display:none; position:absolute; padding: 5px; border: 1px solid gray; left:100px; top:0px; z-index:2; } .hphoto:hover span{ display:block; } </CSS>

I miei bisnonni!

Altri tag Html

Div è solo uno dei tanti tags HTML qui utilizzabili (altri non sono abilitati per motivi di sicurezza).

Ad esempio i tags

<h1>titolo</h1>, <h2>sottotiolo</h2>, <h3>sottosottotitolo</h3>

sono equivalenti al wikitesto

=titolo= , ==sottotitolo==, etc.

con la differenza che i primi sono stilizzabili, in modo simile ai div (potete cambiare colore, carattere, etc..)

Altro tag importante è <span>, un contenitore simile a div, che ne differisce perché può esser facilmente inserito "in linea" per stlizzare gruppi di parole (appare, ad esempio, cliccando il tasto ).

Un'altro tag che menzioniamo è <p>, che sta per paragrafo. Mediawiki lo inserisce automaticamente ogni volta che andate a capo due volte (ma non quando usate
).

Se scrivete ad esempio:

<css> p {text-indent:30px;} </css>

la prima linea di ogni vostro paragrafo viene indentata di 30 pixels.

CSS

Sono qui disponibili, con alcuni accorgimenti, anche tutte le tipiche opzioni di stilizzazione attraverso CSS. Il codice può essere usato "in linea", "incorporato" o "collegato":

Nel caso in linea viene usato, all'interno del tag, il normale attributo "style":

<tag1 style="proprietà1:valore1;proprietà2:valore2;...">...</tag>

Nel caso incorporato il codice di stile è racchiuso da speciali tags <css>...</css> che fanno le veci dei normali <style>...</style>:

<css> selettore {proprietà1 : valore1; proprietà2 : valore2, ...;} </css>

Nel caso collegato le istruzioni di stile sono contenute in un altra pagina,e vanno richiamate con un link inserendo il codice:

{{#css:Nomepagina.css}}

Lo stile della pagina che state leggendo, ad esempio, è deciso da un foglio di stile chiamato "Vector.css" fornito con l'installazione di Mediawiki.

Hoverphoto e Hovergallery

Come mostrato sopra, una foto può esser fatta apparire dal nulla non appena il mouse scorre sopra un bersaglio. Questo principio può esser utilizzato per ingrandire delle immagini quando si passa sulle loro miniature e costruire delle gallerie.
Se cliccate Stile - Hoverphoto vi appare il codice:

{{hoverphoto}}
{{hphoto|nomefile=esempia.jpg|grandeprimapx=100|grandedopopx=500|quantodestra=230px|quantobasso=0px |sfondo=white|testocolore=black|
testogrande=150%|carattere=arial|didascalia=Esempia Esempi}}

che produce l'esempio:

<CSS> .hphoto {

border: 1px solid white; position:relative; }

.hphoto img:hover { border: 1px solid blue; } .hphoto span{ display:none; position:absolute; padding: 5px; border: 1px solid gray; left:100px; top:0px; z-index:2; } .hphoto:hover span{ display:block; } </CSS>

Esempia Esempi

che è facilmente personalizzabile. Se, ad esempio, volete spostare più in alto l'immagine ingrandita, dovete inserire un numero negativo nell'opzione quantobasso=0px .

Se, sempre nel menù Stile , cliccate: Hovergallery, vi appare invece:

{{hovergalleryV |unasolacolonna?=no|grandeprimapx=100|grandedopopx=500|quantodestra=230px|quantobasso=|bordo=1px solid gray| sfondo=beige|spaziatura=10px| esempia.jpg|esempio.jpg| | | | | | | | | | | | | | |}}

che produce l' esempio:

<css> .gallerycontainer{ position: relative; max-height: 200px; /*Add a height attribute and set to largest image's height to prevent overlaying*/ }

.hgphoto img{ border: 1px solid white; margin: 0 5px 5px 0; }

.hgphoto:hover{ background-color: transparent; }

.hgphoto:hover img{ border: 1px solid blue; }

.hgphoto span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; }

.hgphoto span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; }

.hgphoto:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; left: 230px; /*position where enlarged image should offset horizontally */ z-index: 50; } </css>

{{#if: esempia.jpg|