Capítulo 9. Estructura y layout

/751#8"")2/
3*78-1WC6758"785=-=187
Cap’tulo 9. Estructura y layout
'+ (5,-$'+ &,*!'*+ %-+,*& $+ &+ ,!)-,+ !+('&!$+ (* %** 1
+,*-,-** $%&,' !&!.!-$ $+ (3!&+ /; ,$+9 $!+,+9 &$+9 (3**'+9
!%3&+9 ,< -&)- '%!&&' ++ ,!)-,+ + ('+!$ ** -$)-!* (3!& /9 &' +
('+!$ *)-$+(3!&+%-+,*&+,*-,-*+'%($"+<
%1'*5 (3!&+ !+('&& +,*-,-*+ '%($"+ '*%+ ('* .*!+ '$-%&+
'&,&!'+ 1 ',*' ,!(' !.!+!'&+< ,!$!2&' 0$-+!.%&, &' + ('+!$ **
+,++,*-,-*+'%($"+91)-+!%(*+!&!$%($*$+ '"++,!$'+ <
' '+,&,9 $'+ +,!$'+ &+!,& $ 1- @ (* ** $'+ !+6'+ %3+
.&2'+< & '&*,'9 $ 7!' + &* *-(* $'+ $%&,'+ $ (3!& &
!*&,+ !.!+!'&+ & -&!7& +- !&$!; $ 2'& $ * $ (3!&9 $ 2'& '&,&!'+9 -& 2'& $,*$ (* $ %&8 1 ',*+ +!'&+ %&'*+9 $ 2'& $ (! (3!&9
,<
+!-!&, !%& %-+,* $-&+ $+ 2'&+ !&!+ & $ (3!& (*!&!($ $ +!,!'
///<$!+,(*,<'%;
)'85WCOC+$.3-1#$3 ')/"1.3-$+$6758"785#"1/$7)48$76#):
* *-(* $'+ $%&,'+ )- '*%& 2'& ' !.!+!7& $ (3!& + -,!$!2 $ ,!)-,
<div>;
;;;C-)!516;$!C$6
119
3*78-1WC6758"785=-=187
<div>
/751#8"")2/
):)6)1/$6
Atributos comunes
! 6)"16A)OV/=$:$/716
Atributos
espec’ficos
G
Tipo de elemento
-148$
Descripci—n
'583$-$.$/716#$!-148$
$ &'%* $ ,!)-, div ,!& +- '*!& & $ ($* divisi—n9 1 )- +, ,!)-, !&
2'&+ ' !.!+!'&+ &,*' -& (3!& < & -$)-!* +'9 +! ,''+ $'+ !+6'*+
/ -,!$!2& $ ($* "capa" (* **!*+ -& E!.!+!7&E< -&)- + ,*, -& **'* *.
B$+ (+ + *& %!&, -& (*'(! $$% z-indexC + (**!$ +-!*
$$%&' "capas" $+ 2'&+ !&!+ '& $ ,!)-, <div> (* ('* &,&*+ '& $ *+,'
!+6'*+<
+ (3!&+ / '%($"+ )- +,3& !& !+6+ -,!$!2& &+ ,!)-,+ <div>< '&
%- !*&!9 $'+ ,*!-,'+ %3+ -,!$!2'+ '& +, ,!)-, +'& id B(* !&,!!* $ (
'*%8&!C1 class B(*($!*$(+,!$'+ C<
' + . (*'-&!2* & $ (*'+' !+6* -& (3!& / %!&, <div>9 1 )- &' +
('+!$ !+6* -& (3!& / '%($" -,!$!2&' $%&,'+ <div> +!& -,!$!2* '"+ +,!$'+
<
'* 8$,!%'9 +! '+*.+ $ 7!' $-&+ (3!&+ / '%($"+9 .*3+ )- $ %1'*5
-,!$!2& $'+ %!+%'+ &'%*+ (* !&,!!* +-+ !.!+!'&+< '+ &'%*+ %3+ '%-&+9 1 +-+
)-!.$&,+&!&$4+9+%-+,*&'&,!&-!7&;
contenedor BwrapperC+-$&***$%1'*(*,$'+'&,&!'+$(3!&1+
%($(*!&!*$+*,*5+,!+3+!+$(3!&;+-& -*9+-+'*+9
!%3&+$,*$+9+!+&,*'&'*+(,'$.&,&$&.'*9,<
cabecera BheaderC)-!&$-1,''+$'+$%&,'+!&.*!&,+$(*,+-(*!'*$
(3!&B$'',!('9!%&'&&*9-*'8+)-+-(*!'*9,<C
contenido BcontentC&$'$'&,&!'(*!&!($$+!,!'B$2'&&',!!+9$2'&
*,5-$'+9$2'&(*'-,'+9,<(&!&'$,!('+!,!'/C
menu BmenuC+%($(**-(*,''+$'+$%&,'+$%&8$,*$&.!7&
$(3!&
pie BfooterC)-!&$-1,''+$'+$%&,'+!&.*!&,+$(*,!&*!'*$(3!&
B.!+''(1*! ,9('$5,!(*!.!9,4*%!&'+-+'9,<C
lateral BsidebarC+%($(**-(*$'+$%&,'+$+'$-%&+$,*$+1
+-&*!+$(3!&<
+,'*%9$+)-$,'-&(3!& '%($"+-$+*+!%!$*$+!-!&,;
...
<div id="contenedor">
120
;;;C-)!516;$!C$6
/751#8"")2/
3*78-1WC6758"785=-=187
<div id="cabecera">
...
</div>
<div id="contenido">
<div id="menu">
..
</div>
...
</div>
<div id="pie">
...
</div>
</div>
...
$)-!.$&,(*$+(3!&+&!&$4++*5$+!-!&,;
...
<div id="wrapper">
<div id="header">
...
</div>
<div id="content">
<div id="menu">
..
</div>
...
</div>
<div id="footer">
...
</div>
</div>
;;;C-)!516;$!C$6
121