Layout CSS 2

01 febr. Layout CSS 2

Índex de la quarta sessió:

Primer encàrrec: Lliurament de la maquetació HTML I CSS de la home del projecte final.

• L’etiqueta DIV
  • Model de caixes.
  • Posicionament CSS amb la propietat Float.
  • Disseny de menús de navegació.
• Primer treball:
  • Lliurament de la maquetació HTML i CSS de la home del projecte final.
• Tutories del projecte.

 
En les sessions anteriors hem après construïr i estructurar una pàgina web i el seu contingut amb el llenguatge HTML, insertant etiquetes ( TAGS ) i a controlar-ne la seva aparença utilitzant el llenguatge CSS ( selectors { propietats: valors } ).

Però per entendre més bé el que estem fent i el què podem fer ens convé conèixer l’estructura del model de caixes, analitzar com es comporten, com ho interpreten els navegadors i quines son les propietats CSS que podem modificar.

Per a fer aquesta sessió serà convenient tenir instal·lat el complement d’anàlisi (Firebug) del navegador Firefox. Si no el teniu instal·lat us el podeu descarregar aqui.

El Model de caixes (Box model)

El Model de caixes o “box model” és segurament la característica més Important del Llenguatge CSS, ja que condiciona el disseny totes les pàgines web. El Model de caixes és el comportament CSS que fà que tots els elements HTML de les pàgines es representin mitjançant caixes rectangulars.

Cada vegada que insertem una etiqueta d’un element HTML en un document la veurem representada com una nova caixa que tanca els continguts que hi ha en aquell element (etiquetes).

Les caixes per defecte no son visibles i serà a través de modificar el valor de les propietats CSS que les farem visibles.

Tots els elements HTML d’una pàgina son interpretats com caixes.

Estructura del model de caixes

1. Contingut: És la zona on es pinta allò que em posat entre les etiquetes HTML. Pot ser un texte, imatge o qualsevol altre tipus de contingut.
2. Border: És el filet que rodeja la caixa.
3. Padding: És l’espai interior que separa els marges de la caixa del contingut. És una zona transparent.
4. Background-image: És la imatge de fons de la caixa. Tapa el color de fons.
5. Background color: És el color de fons de la caixa
6. Margin: És el l’espai que separa la caixa d’altres elements colindants. És una zona transparent.

Jerarquia del model de caixes

Jerarquia del model de caixa

Per exemple, analitzem aquesta caixa. Per a fer-ho activarem el complement Firebug que ens hem instal·lat abans. Inspecciona l’element HTML “div” i activa la pestanya “Maquetació” del complement. Edita els valors per veure com varia l’aparença.

Les propietats CSS que em aplicat a aquesta caixa son:

.caixa {
	width: 200px;
	height: 200px;
	padding:20px;
	border: 4px solid #000
	background-image: url(img/bkg_trama.png);
	background-position: 50%;
	background-repeat: no-repeat;
	background-color: #66FF33;
	margin: 20px;

}

Propietats CSS d’una caixa

Mesures:

width: Defineix l’amplada de la caixa de contingut.
Valors: mesura (en pixels, em,…), percentatge (50%), auto (valor per defecte. La caixa ocupa el que ocupa el seu contingut), inherit (heredada del seu contenedor superior)

{ width: 200px;} { width: 50%; } { width: auto;}

height: Defineix l’alçada de la caixa de contingut.
Valors: mesura (en pixels, em,…), percentatge (50%), auto (valor per defecte. La caixa ocupa el que ocupa el seu contingut), inherit (heredada del seu contenedor superior)

{ height: 200px;} { height: 50%; } { height: auto; }

Filet:

border: Defineix el gruix, el color i el tipus de filet de la caixa.

{ border: 4px #000 solid; }

Aquestes propietats es poden definir per separat:

border-widht:
Valors: mesura (en pixels, em,…) o mesures predefinides (thin, medium, thick)

border-color:
Valors: un color CSS (hexadecimal, RGB) o el valor: transparent

border-style:
Valors: none, hidden, dotted, dashed, solid, double, groove, ridge inset outset

Es poden definir independentment per als quatre costats de la caixa.
border-top, border-right, border-bottom, border-left
i combinar-les amb les propietats “width”, “color”, “style”. Per exemple, per definir el gruix del filet superior:

{ border-top-width: 4px; }

Proposta: Amb el Firbug analitzam aquesta caixa i apliquem canvis a la propietat “border” per a veure les possibilitats.

Marges interns:

padding: Defineix l’espai interior entre la caixa de contingut i el filet de la caixa.
Valors: mesura (en pixels, em,…)

{ padding: 20px; }

Es poden definir independentment per als quatre costats de la caixa, assignant un valor diferent a cada costat en aquest ordre (top, right, bottom, left).

{ padding: 20px 10px 10px 5px; }

o bé en aquest ordre: Primer valor (top, bottom), Segon valor (right, left)

{ padding: 20px 10px; }

o bé utilitzant les propietats:
padding-top, padding-right, padding-bottom, padding-left

{ padding-top: 20px; }

Marges externs:

margin: Defineix l’espai de separació entre el filet de la caixa i un altre element HTML.

{ margin: 20px; }

Es poden definir independentment per als quatre costats de la caixa, assignant un valor diferent a cada costat en aquest ordre (top, right, bottom, left), o bé en aquest ordre: Primer valor (top, bottom), Segon valor (right, left)

{ margin: 20px 10px 10px 5px; } { margin: 20px 10px; }

o bé utilitzant les propietats:
margin-top, margin-right, margin-bottom, margin-left

{ margin-top: 20px; }

Fons de la caixa:

background: Defineix el color, la imatge i les propietats de la imatge del fons de la caixa.
background-color, background-image, background-position, background-repeat, background-attachment

{ background: #66FF33 url(img/bkg_trama.png) 50% no-repeat scroll; }

background-color: Defineix el color de fons de la caixa.
Valors: un color CSS (hexadecimal, RGB) o el valor: transparent

{ background-color: #66FF33; }

background-image: Defineix la imatge del fons de la caixa
Valors: una URL (ruta a on es troba allotjada la imatge)

{ background-image: url(img/bkg_trama.png); }

background-position: Defineix la posició de la imatge de fons
Valors: top right bottom left, mesura (en pixels, em,…), percentatges (50%)

{ background-position: 50%; } { background-position: top center; } { background-position: 20px 50px; }

background-position: top 50%;

background-repeat: Defineix si la imatge de fons s’ha de repetir infinitament o no
Valors: repeat, repeat-x, repeat-y, no-repeat

{ background-repeat: no-repeat; }

background-attachment: Defineix el comportament de la imatge de fons en relació a l’scroll de la pàgina
Valors: scroll (es mou amb el desplaçament de la pàgina), fixed (Fixat, no es mou)

{ background-attachment: scroll; }

background-repeat: no-repeat

background-repeat: repeat-x

background-repeat: repeat-y

background-repeat: repeat

Posicionament

position: Cada elements HTML, per defecte, es posiciona en una nova linea seguint el fluxe de la pàgina. Un sota de l’altre. Amb aquesta propietat podem alterar i definir un nou posicionament d’un element HTML a la pàgina.
Valors: static, relative, absolute, fixed, float.
static: És el posicionament per defecte.
Valors: no s’aplica cap valor.

Posicionament per defecte: static

relative: És una variant del posicionament normal que consisteix en desplaçar l’element HTML respecte la seva posició inicial. Els altres elements de la pàgina no es veuen afectats i no modifiquen la seva posició.
Valors: top, right, bottom, left (mesura en pixels, em… o percentatge %).

{ position: relative; top: 50px; left: 50px; }

Posicionament relatiu (relative). La imatge es desplaça a partir del seu punt d’inserció original.

absolute: Defineix una nova posició per a l’element HTML en base al seu contenedor més proper o el primer dels seus contenedors que tingui definit un posicionament diferent a “static”. Si cap dels seus contenedors està posicionat es pendrà com a referència la finestra del navegador. El lloc de l’element desplaçat serà ocupat per algún altre element de la pàgina.
Valors: top, right, bottom, left (mesura en pixels, em… o percentatge %)

{ position: absolute; top: 50px; left: 50px; }

Posicionament absolut (absolute). La imatge agafa com a referència la finestra del navegador.

Posicionament absolut (absolute) amb un contenidor posicionat (relative). La imatge es desplaça a partir del vertex superior esquerra del contenidor.

fixed: Fixa un element en una posició concreta prenent com a referència la finestra del navegador. L’element no es mou amb el moviment de l’scroll.
Valors: top, right, bottom, left (mesura en pixels, em… o percentatge %)

{ position: fixed; top: 50px; left: 50px; }

float: Desplaça l’element el més a l’esquerra o dreta possible a partir de la seva posició original.
Valors: none, right, left.

img { float: left; }

float: left. La imatge es coloca a l’esquerra i el contingut flueix al seu voltant.

img { float: right; }

float: right. La imatge es coloca a la dreta i el contingut flueix al seu voltant.

Visualització

display: Modifica la forma en que es visualitza un element.
Valors: (els més usats) inline, block, none,…
block: Mostra l’element com un bloc
inline: Mostra l’element en linea
none: Fa desaparèixer l’element de la pàgina. els altres elements poden ocupar el seu lloc.

visibility: Permet fer visible o invisible un element encara que mantenint el lloc que ocupa.
Valors: visible, hidden, collapse, inherit

{ visibility: hidden; }

overflow: Permet amagar el contingut que sobresurt de la caixa contenedora. Per exemple una foto o un paràgraf de text,…
Valors: visible, hidden, scroll, auto, inherit

{ overflow: visible; }

overflow: visible. Caixa amb alçada fixada i molt contingut. El contingut sobrepassa els límits de la caixa.

{ overflow: hidden; }

overflow: hidden. Caixa amb alçada fixada i molt contingut. L’exedent de contingut queda amagat.

{ overflow: scroll; }

overflow: scroll. Caixa amb alçada fixada. Apareixen “scrolls” per a poder veure tot el contingut.

z-index: Permet definir la profunditat dels elements HTML. Quan dos o més elements es superposen podem decidir quin es mostrarà per sobre i quin per sota. És un concepte molt semblant al de les capes. Es considerarà el número “0” com la capa que està més a baix. Aquesta propietat només actúa si abans s’ha aplicat a l’element la propietat “position” fixed, absolute o relative.
Valors: auto, mesura (en números), inherit

{ z-index: 3; } { z-index: 1000; }

Layout CSS

Per centrar horitzontalment la nostra pàgina dins la finestra del navegador, crearem un div amb id=wrapper i li aplicarem la propietat margin amb els valors “0” per a top i bottom, i auto per a right i left:

#wrapper { margin: 0 auto; }

Per aconseguir aquesta estructura a dues columnes, capçalera i peu, aplicarem la propietat “float” als dos elements centrals: article i aside. Al footer li aplicarem la propietat “clear” per evitar solapaments.

El layout amb elements flotats

Creació d’un menú de navegació

1. En la finestra del document escriu: Inici | Informació | Projecte 1 | Projecte 2
2. Selecciona la paraula Inici
3. A Propietats clica la carpeta que hi ha a la dreta de la casella Vínculo.
4. Selecciona l’arxiu index.html, ja tens fet el primer vincle.
5. Fes tres noves pàgines html: informacio.html / projecte-1.html / projecte-2.html Guàrdales dins la carpeta ca, per indicar l’idioma de la teva web. Comprova al panell Archivo que hi són aquests arxius.
6. Ara obre totes les pàgines.
7. A cada pàgina escriu el nom de la pàgina que correspongui (Inici, Informació, Projecte 1 i Projecte 2) i al panell de propietats els marques cada un com encabezado 1: De manera que tots estiguin amb les etiquetes <h1>. Això ens servirà per veure a quina pàgina estem.
8. Selecciona en cada pàgina el text del menú i posa el vincle que li correspon.
9. Comprova amb el navegador que pots navegar per totes les pàgines i que els vincles estan bé.

Per fer-ho clica la icona del món que tens a la part superior o ves a archivo / vista previa en el navegador.

Fer un menú horitzontal a partir d’una llista (“ul”)

L’ús de les llistes per a crear menús és molt útil per a varies raons:

• És la forma natural de crear index de continguts.
• La representació natural per part dels navegadors és llògica i clara.
• Els cercadors entenen aquest grup d’ítems com un conjunt relacionat.
• Ens permet crear gerarquies de continguts (menús, submenús,…)
• Ens permeten agrupar tots els items d’un menú sota una sola etiqueta HTML “ul”
  cosa que ens facilita després aplicar regles CSS per a canviar-los-hi l’aparença.

Això és una llista desordenada (ul = unordered list)

• Inici
• Autor
• Galeria
• Contacte

Aplicant algunes regles CSS podem convertir una llista en un menú horitzontal:

#main-menu {
	padding: 0px;
	margin: 0px;
	overflow: auto;
	background: #777;
}

#main-menu li {
	display:inline;
}

#main-menu li a {
	padding: 10px;
	background: #ddd;
	border-right: 1px solid #fff;
	float:left;
}

#main-menu li a:hover {
	background: #777;
}

Pots trobar més informació a:
http://librosweb.es/css/capitulo_1.html