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...

Creant un conjunt de pestanyes

Seleccionant la plantilla

Obrirem l'editor del genweb i buscarem la eina que ens permet obrir uns continguts predefinits anomenats pestanyes, els quals ens insereixen trossos de codi html que hem d'adaptar a la realitat que volem que finalment tingui el nostre contingut i per això sovint hem d'editar codi html.

Farem clic a la barra d'eines a la part superior i del desplegable seleccionarem l'item 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 que haguem deixat el cursor a l'editor de la nostra pàgina (per defecte o inserirà a l'inici del document)

Visualitzant el codi HTML

El codi html és bàsic per editar continguts en qualsevol plataforma CMS com per exemple aquesta, es 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.

Interpretant 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 software amb llicència descarregable a la 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 items que conformen la llista de pestanyes, essent el que porta la classe active el que esta 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 han a cada item respectiu

<div class="tab-content">

essent la classe tab-pane active la que esta 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>

Customitzant 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í quantes consideracions més siguin necessàries en funció del que vulguem aconseguir. Customitzar plantilles avançades com aquesta requereix un cert nivell de coneixement html.

Podeu trobar més informació fent clic aquí