Vés al contingut (premeu Retorn)

Pestanyes

Dificultat Mitjana-Alta

Les pestanyes o Tabs en anglès són contenidors que ens mostren el contingut actiu quan estan seleccionades.

 


Contingut de la primera pestanya...
Contingut de la segona pestanya...
Contingut de la tercera pestanya...
Contingut de la quarta pestanya...

Crear un conjunt de pestanyes

Seleccionar la plantilla

Obrirem l'editor del Genweb i buscarem el botó que ens permet obrir uns continguts predefinits, en concret l'anomenat Pestanyes, el qual ens deixa inserir trossos de codi html que hem d'adaptar a la realitat que volem, sovint editant codi html.

Farem clic a la barra d'eines a la part superior i del desplegable seleccionarem l'ítem que diu Pestanyes. Tot seguit farem clic al botó de la part inferior on posa insereix.

D'aquesta forma el codi predefinit a la plantilla s'inserirà a la posició  en la qual hàgim deixat el cursor a l'editor de la nostra pàgina (per defecte o inserirà a l'inici del document).

Visualitzar el codi HTML

El codi html és bàsic per a editar continguts en qualsevol plataforma CMS, com per exemple, aquesta. És per això que us deixem un enllaç a aquest tutorial, on podeu trobar una guia de referència.

Un cop tenim carregada la plantilla podem accedir al codi fent clic al botó HTML de la barra d'eines del nostre editor.

Interpretar el codi HTML

El codi html que forma la pàgina se'ns mostrarà d'una forma similar a la de la imatge, però és aconsellable tenir un editor html extern ja sigui d'un programari amb llicència descarregable de la pròpia web de distribució de software d'UPCnet o algun que sigui gratuït com per exemple Notepad++, ja que, per segons quin nivell d'edició de codi ens resultarà més fàcil editar el codi en aquests programes i inserir-lo de nou un cop editat. 

El primer que aconsellem és tabular el codi, es a dir, identificar on comencen les etiquetes <tags> capes <div>, etc. que engloben altres capes i etiquetes.

En aquest cas tenim una llista amb totes les pestanyes que es diu <ul class="nav nav-tabs" id="myTab"> 

dintre iteren els ítems que conformen la llista de pestanyes, essent el que porta la classe active el que està activat per defecte

<li class="active"><a href="#primera" data-toggle="tab">Primera</a></li>
<li><a href="#segona" data-toggle="tab">Segona</a></li>
<li><a href="#tercera" data-toggle="tab">Tercera</a></li>
<li><a href="#quarta" data-toggle="tab">Quarta</a></li>
</ul>

 tot seguit tenim una capa que conté totes les descripcions o continguts que hi ha a cada ítem respectiu

<div class="tab-content">

Essent la classe tab-pane active la que està activada per defecte.

<div class="tab-pane active" id="primera">Contingut de la primera pestanya...</div>
<div class="tab-pane" id="segona">Contingut de la segona pestanya...</div>
<div class="tab-pane" id="tercera">Contingut de la tercera pestanya...</div>
<div class="tab-pane" id="quarta">Contingut de la quarta pestanya...</div>

</div>

Personalitzar les nostres pestanyes. Dubtes freqüents

És important, com a qualsevol altre contingut que vulguem editar, tenir clar què volem des del principi. Per exemple, quantes pestanyes volem d'inici i quins seran els continguts que volem que es mostrin, així com totes les consideracions que siguin necessàries en funció del que vulguem aconseguir. Personalitzar plantilles avançades com aquesta requereix un cert nivell de coneixement de codi html.

Podeu trobar més informació al respecte, fent clic aquí.