Cmo Crear una Web sin perder los nervios?

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

Requisitos
para abordar este contenido conocer:
HTML bsico HTML avanzado CSS bsico CSS avanzado

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

1Fase
Definicin de los espacios

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

1 Fase.
Determina el ancho de la caja principal. Este ancho debera estar en relacin con el cuerpo de texto utilizado. En esta caso el tamao del cuerpo ser de 10px que genera un interlineado de 12px o 0,75em que ser la medida de las medianiles de las columnas.
804px 12px/0,75em de padding-top 792px 12px/0,75em de padding-left

Ventana del navegador

/*wrap en ingls significa abrigo */ Wrap{ width: 792px; /*Ajustando los mrgenes izquierdo y derecho conseguimos centrar la caja */ margin-left: auto; margin-right: auto; padding-left:12px; padding-top:12px; }

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

1 Fase.
Determina las medidas de las columnas en las que basaras tu diseo. Este ancho debera estar en relacin con el cuerpo de texto utilizado. 790px
12px/0,75em de padding 12px/0,75em de padding

Columnas 120px

Medianiles 12px

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

1 Fase.
Determina las medidas del interlineado. Este ancho debera estar en relacin con el cuerpo de texto utilizado. Body{ Line-height: 0.75em; }
12px/0,75em de interlineado

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

2Fase
Creacin de los mdulos contenedores inscritos en wrap

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

2 Fase.
Creacin de los mdulos contenedores bsicos Cabecera (header) Men (menu) Contenidos (content) Pie (footer)

Cabecera - header

Men - menu

Contenidos - content

Pie - footer
Cmo Crear una Web sin perder los nervios?
Profesor Juan Carlos Snchez Guirao Medios Informticos

2 Fase.
Creacin del contenedor de Cabecera (header). Aadimos el margen derecho para compensar el padding izquierdo de wrap 792px 780px

12px de margin-right y margin-bottom

Cabecera - header
#header{ Position:relative; width: 780px; Height: 120px; margin-right:12px; margin-bottom:12px; Float: left; }

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

2 Fase.
Creacin del contenedor del men (menu). El men ocupa dos columnas con lo que hay que sumarle la medianil inscrita ms el margen derecho para crear la medianil de columna. 264px
12px margin-bottom

Cabecera - header
#menu{ Position:relative; width: 264px; margin-bottom:12px; Float: left; }

Men - menu

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

2 Fase.
Creacin del contenedor de contenidos (content). El contenido ocupa cuatro columnas con lo que hay que sumarle las medianiles inscritas ms el margen derecho para compensar el padding izquierdo de wrap 528px
12px margin-bottom

Cabecera - header
#content{ Position:relative; width: 528px; margin-bottom:12px; Float: left; }

Men - menu

Contenidos - content

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

2 Fase.

12px de margin-right y margin-bottom

Creacin del contenedor pie de pgina (footer). Aadimos el margen derecho para compensar el padding izquierdo de wrap 792px 780px

Cabecera - header
#footer{ Position:relative; width: 780px; margin-right:12px; margin-bottom:12px; Float: left; }

Men - menu

Contenidos - content Pie - footer

Cmo Crear una Web sin perder los nervios?
Profesor Juan Carlos Snchez Guirao Medios Informticos

2 Fase.
Vista de los elementos creados en relacin a las columnas

Cabecera - header

Men - menu

Contenidos - content

Pie - footer
Cmo Crear una Web sin perder los nervios?
Profesor Juan Carlos Snchez Guirao Medios Informticos

3Fase
Creacin de los mdulos bsicos de los contenidos

Cmo Crear una Web sin perder los nervios?

Profesor Juan Carlos Snchez Guirao

Medios Informticos

Mdulo de una columna

3 Fase
Creacin de los mdulos bsicos de los contenidos

.Col1{ width:120px; position: relative; margin-left: 12px margin-bottom: 12px; float: left; }

132px 120px

12px

Cabecera - header

Men - menu Pie - footer

Cmo Crear una Web sin perder los nervios?

Contenidos - content

Profesor Juan Carlos Snchez Guirao

Medios Informticos

Mdulo de dos columnas

3 Fase
Creacin de los mdulos bsicos de los contenidos

.col2{ width:264px; position: relative; margin-left: 12px margin-bottom: 12px; float: left; }

264px 252px

12px

Cabecera - header

Men - menu Pie - footer

Cmo Crear una Web sin perder los nervios?

Contenidos - content

Profesor Juan Carlos Snchez Guirao

Medios Informticos

Mdulo de tres columnas

3 Fase
Creacin de los mdulos bsicos de los contenidos

.Col3{ width:384px; position: relative; margin-left: 12px margin-bottom: 12px; float: left; }

396px 384px

12px

Cabecera - header

Men - menu Pie - footer

Cmo Crear una Web sin perder los nervios?

Contenidos - content

Profesor Juan Carlos Snchez Guirao

Medios Informticos

Mdulo de cuatro columnas

12px 396px 384px

3 Fase
Creacin de los mdulos bsicos de los contenidos

.Col4{ width:516px; position: relative; margin-left: 12px margin-bottom: 12px; float: left; }

Cabecera - header

Men - menu Pie - footer

Cmo Crear una Web sin perder los nervios?

Contenidos - content

Profesor Juan Carlos Snchez Guirao

Medios Informticos

Mdulo de dos x dos columnas

264px

3 Fase
Creacin de los mdulos bsicos de los contenidos

.col2x2{ width:264px; height:264px; position: relative; margin-left: 12px margin-bottom: 12px; float: left;}

264px

Cabecera - header

Men - menu Pie - footer

Cmo Crear una Web sin perder los nervios?

Contenidos - content

Profesor Juan Carlos Snchez Guirao

Medios Informticos

4 Fase
Aplicacin de los estilos en html

Aplicacin en html de los estilos creados. Combinacin sugerida

<!-- inicio del contenedor principal --> <div id=wrap> <!-- inicio de la cabecera --> <div id=header>Cabecera</div> <!-- fin de la cabecera --> <!-- inicio de men --> <div id=menu> <div class=col2></div> <div class=col1></div> <div class=col1></div> </div> <!-- fin de men --> <!-- inicio de content --> <div id=content> <div class=col2x2></div> <div class=col1></div> <div class=col1></div> <div class=col2></div> </div> <!-- fin de content --> <!-- inicio del pie --> <div id=footer>Pie</div> <!-- fin del pie --> </div> <!-- fin del contenedor principal -->
Profesor Juan Carlos Snchez Guirao Medios Informticos

Cmo Crear una Web sin perder los nervios?