Home of the web
Pàgines de mostra
Amb els estils UBWeb 2015 posem a disposició unes pàgines de mostra on amb exemples dels diferents tipus de plantilles i la utilització dels diversos tipus de blocs ('divs') predefinits que es posen a disposició.El menú esquerre
El menú esquerre classifica les pàgines de mostra que us passem.
Les hem agrupat per tipus de contingut:
- Pàgines amb diferent nombre de columnes
- Pàgina amb blocs desplegables
- Pàgina amb enllaços pop-up
- Pàgina amb bloc de tabuladors
- Pàgina amb diferents tipus de taules
Podem tenir diversos blocs en una mateixa pàgina. Si necessitem posar blocs desplegables i taules, no cal que fem 2 pàgines diferents. Podem agafar els blocs i les taules i posar-les en la mateixa pàgina.
Bloc de text normal
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Bloc de text amb llista no numerada.
- Ut enim minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Eonsequat. Duis aute irure dolor in reprehenderit in voluptate.
- Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Presentació
El bloc de tabuladors és una mica complex. Consta de diversos sub-blocs i, a més, l'efecte és controlat per un javascript que cal col·locar al 'head' de la pàgina.
L'efecte dels tabuladors és controlat per un javascript que cal col·locar al <head> de la pàgina.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Eonsequat. Duis aute irure dolor in reprehenderit in voluptate.
- Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
- cgfg dfgsdfg sdfg sdf gsdfg
Paginador o llista amb els elements dels tabuladors
El primer sub-bloc és una llista amb la classe paginador.
Lorem de la Formació acadèmica ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Eonsequat. Duis aute irure dolor in reprehenderit in voluptate.
-
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
- Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Continguts o blocs amb el contingut per a cada tabulador
Cada tabulador s'associa a un bloc amb classe 'contingut-tabulador'.
Els blocs de contingut no es vinculen al seu tabulador per nom, sinó per l'ordre d'aparició.
Lorem ipsum de les Publicacions recents dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Taules
Taula 'tipus01' classe 'zebra': llistats de dades
Quan necessitem mostrar llistats de dades extensos, podem utilitzar, dins d'un bloc 'table01', una taula amb la classe 'zebra' (<table class="zebra" ...>).
Si s'insereix el codi javascript apropiat en el <head> de la pàgina, tot i que en Dreamweaver es vegi normal (potser el text més petit), als navegadors, el fons s'alterna en files parells i senars entre blau clar i un blau una mica més fosc.
| Nom | Telèfon | Mòbil | Adreça-e |
|---|---|---|---|
| Etiam Varius | 934 035 218 | 611 325 442 | evarius@ub.edu |
| Lorem Ipsum | 934 035 213 | 611 325 418 | lorem.ipsum@ub.edu |
| Tempus Purus Faucibus | 934 035 476 | 611 325 322 | faucibus@ub.edu |
| Viverra Eu Eget | 934 035 765 | 611 325 768 | veeget@ub.edu |
| Llabore et Dolore | 934 035 194 | dolore@ub.edu | |
| Magna Aliqua | 934 035 004 | 611 325 782 | aliqua@ub.edu |
Blocs desplegables
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Un bloc desplegable
Els blocs de text desplegables requereixen portar, abans, un encapçalament:
<h3 class="titol-desplegable">El títol que sigui</h3>,
just
per sobre del bloc amb la classe "contingut-desplegable" on hi ha la informaciò inicialment amagada.
Un altre bloc desplegable
Aquest bloc desplegable incorpora també, com a mostra, una llista tipus agenda <dl class="datalist01">.
Quins són els circuits i mecanismes cerebrals de l'emoció i la memòria? Mitjançant experiments audiovisuals il·lustrarem la influència mútua entre la música i els records personals.
- Dia:
- 4 d'abril, 19-21 h
- Lloc:
- Paranimf, Universitat de Barcelona (Gran Via de les Corts Catalanes, 585)
- Aforament:
- 500 persones
- Músics:
- (pendent)
- Experts:
- (pendent)
Web Name
Contact
- Unit or Department
- Gran Via, 585
- 08007 Barcelona
Telephon: 934 031 980 - correu.unitat@ub.edu
- How to find us
