NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Creación de páginas web desde cero (6 Diseño)

11 de Noviembre del 2011 por Josep Antoni Bover, 5 visitas, 0 comentarios, 0 votos
Categorías : HTML, CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...
Creación de páginas web desde cero (6 Diseño)

En los tutoriales anteriores se han tratado varios temas de una índole muy básica respecto a etiquetas HTML y estilos CSS, pero en cuestiones de diseño no se ha hecho gran cosa. Por ello hoy vamos a ver algunas técnicas para crear marcos y posicionarlos a vuestro gusto.

Esto os llevara a crear una serie de marcos y alinearlos de a la derecha, a la izquierda y al centro.

También veréis por encima como añadir una imagen de fondo y como crear efectos de transparencia en los marcos.

Empezaremos por añadir una imagen de fondo a la etiqueta body utilizando CSS :


CSS Añadir una imagen de fondo
1
2
3
4
5
body {
background-image:url("/Web/Graficos/Tutorial_HTML5_6_Fondo.jpg"); /* Imagen de fondo */
background-repeat:no-repeat; /* Tipo de repetición */
background-position:center top; /* Posición del fondo */
}

Ahora vamos a definir el ancho del documento que será de 1000 pixeles. Porque de 1000 pixeles? pues si os fijáis en la gran mayoría de páginas web suelen tener un tamaño similar en el documento, esto es porque la resolución mínima utilizada en los sistemas operativos de PC es de 1024x768. Y porque no especificamos 1024 de ancho? pues tened en cuenta que los navegadores muestran una barra de scroll lateral que suele ocupar un máximo de 20 pixeles, así que ya lo redondeamos y lo dejamos en 1000 pixeles.

CSS clase .AnchoDocumento
1
2
3
.AnchoDocumento {
width:1000px; /* Ancho en pixeles para el documento */
}

Para asignar el ancho se utiliza la propiedad "width".

Lo siguiente será definir una clase para poder centrar objetos de derecha a izquierda :

CSS clase .Centrado
1
2
3
4
.Centrado {
margin-left:auto; /* Margen a la izquierda automatico */
margin-right:auto; /* Margen a la derecha automatico */
}

Para la clase ".Centrado" se han utilizado las propiedades "margin-left" y "margin-right" en las que se ha especificado el valor "auto". Al especificar en el margen derecho y el margen izquierdo el valor "auto", el navegador entiende que ese objeto debe ir centrado de derecha a izquierda.

La propiedad "margin" establece el margen por fuera de un objeto, pero debéis saber que existe la propiedad "padding" que establece el margen interno del objeto, es decir si por ejemplo tenemos un texto dentro del objeto podemos especificar con padding que exista una separación desde el principio del objeto al texto.

Ahora vamos a definir una clase para el titulo de nuestra página :

CSS clase .Titulo
1
2
3
4
.Titulo {
text-align:center; /* Alineación del texto : centrado */
text-shadow:2px 2px 2px rgb(0, 0, 0); /* Sombra para el texto */
}

En esta clase se ha utilizado la propiedad "text-align" para alinear el texto, ojo porque una cosa es alinear un marco, y otra muy distinta es alinear el texto. En este caso establecemos el valor "center" para centrar el texto, pero también puede ser "left" izquierda, o "right" derecha.

La propiedad "text-shadow" ya la vimos en el tutorial anterior por lo que no la voy a volver a explicar. De todas formas si queréis ver un articulo donde hablo mas explícitamente sobre esa propiedad podéis visitar el siguiente enlace : CSS3 : Sombras y bordes redondeados.

Ahora nos toca definir un marco con borde, color de fondo y un efecto de transparencia :

CSS clase .MarcoTranslucido
1
2
3
4
5
6
7
8
9
10
11
.MarcoTranslucido {
position:relative; /* Posición relativa al objeto inmediatamente superior */
border-width:2px; /* Borde con el tamaño de un pixel */
border-color:rgb(0, 0, 0); /* Color del borde negro */
border-style:solid; /* Estilo del borde solido */
background-color:#333; /* Color del fondo */
color:rgb(255, 255, 255); /* Color del texto blanco */
border-radius:6px; /* Redondeamiento de las puntas del marco a 6 pixeles*/
opacity:0.9; /* Opacidad al 0.9% */
box-shadow:3px 3px 3px rgb(0, 0, 0); /* Sombra para el marco */
}

De este último ejemplo ya conocéis varias propiedades, sobre las propiedades que ya conocéis solo voy a remarcar que se ha utilizado la propiedad "position:relative" ya que de esta forma podemos manipular la posición y el tamaño de este objeto.

Hay tres propiedades que aun no conocéis :

Para terminar con los estilos CSS solo nos falta especificar una clase para el documento, y una clase para la sección lateral :

CSS clases .Documento y ,SeccionLateral
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.Documento {
margin-top:10px; /* Margen superior 10 pixeles */
width:700px; /* Ancho 700 pixeles */
height:600px; /* Alto 600 pixeles */
padding:5px; /* Padding 5 pixeles */
float:left; /* Posicionamiento hacia la izquierda */
}
.SeccionLateral {
margin-top:10px; /* Margen superior 10 pixeles */
width:260px; /* Ancho 260 pixeles */
height:600px; /* Alto 600 pixeles */
padding:5px; /* Padding 5 pixeles */
float:right; /* Posicionamiento hacia la derecha */
}

De las propiedades que no conocéis "height" indica al altura en pixeles para las clases, "padding" como ya comente antes especifica el margen interno del objeto, y "float" que es la más importante especifica hacia donde tiene que alinearse el objeto.

La propiedad "float" puede tener los siguientes valores : "left" alinear a la izquierda, "right" alinear a la derecha, y "none" sin alineación que es la que viene por defecto.

Para entender un poco mejor la propiedad "float" imaginaros que tenemos dos etiquetas div de 500 pixeles que queremos situar una al lado de la otra, con "float:none" (que viene por defecto) esto no sería posible y acabaríamos con un div debajo del otro, en cambio si a uno le especificamos "float:left" y al otro le especificamos "float:right" estos objetos se alinearan bien uno al lado del otro.

Por último os falta ver el código HTML y ya podréis ver el ejemplo y entenderlo mejor :

Tutorial_HTML5_6_Ejemplo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE HTML> <!-- Documento HTML 5 -->
<html> <!-- Inicio del documento HTML -->
<head> <!-- Inicio del head -->
<title>Ejemplo del tutorial 6</title>
<!-- Codificacion UTF-8 -->
<meta charset="UTF-8">
<!-- Hoja de estilos CSS para este documento -->
<style type="text/css">
body {
background-image:url("/Web/Graficos/Tutorial_HTML5_6_Fondo.jpg"); /* Imagen de fondo */
background-repeat:no-repeat; /* Tipo de repetición */
background-position:center top; /* Posición del fondo */
}
.AnchoDocumento {
width:1000px; /* Ancho en pixeles para el documento */
}
.Centrado {
margin-left:auto; /* Margen a la izquierda automatico */
margin-right:auto; /* Margen a la derecha automatico */
}
.Titulo {
text-align:center; /* Alineación del texto : centrado */
text-shadow:2px 2px 2px rgb(0, 0, 0); /* Sombra para el texto */
}
.MarcoTranslucido {
position:relative; /* Posición relativa al objeto inmediatamente superior */
border-width:2px; /* Borde con el tamaño de un pixel */
border-color:rgb(0, 0, 0); /* Color del borde negro */
border-style:solid; /* Estilo del borde solido */
background-color:#333; /* Color del fondo */
color:rgb(255, 255, 255); /* Color del texto blanco */
border-radius:6px; /* Redondeamiento de las puntas del marco a 6 pixeles*/
opacity:0.9; /* Opacidad al 0.9% */
box-shadow:3px 3px 3px rgb(0, 0, 0); /* Sombra para el marco */
}
.Documento {
margin-top:10px; /* Margen superior 10 pixeles */
width:700px; /* Ancho 700 pixeles */
height:600px; /* Alto 600 pixeles */
padding:5px; /* Padding 5 pixeles */
float:left; /* Posicionamiento hacia la izquierda */
}
.SeccionLateral {
margin-top:10px; /* Margen superior 10 pixeles */
width:260px; /* Ancho 260 pixeles */
height:600px; /* Alto 600 pixeles */
padding:5px; /* Padding 5 pixeles */
float:right; /* Posicionamiento hacia la derecha */
}
</style>
</head> <!-- Final del head -->
<body> <!-- Inicio del cuerpo para el documento HTML -->
<header> <!-- Inicio para la etiqueta de la cabecera -->
<!-- div con las clases AnchoDocumento, Titulo, MarcoTranslucido, y Centrado -->
<div class='AnchoDocumento Titulo MarcoTranslucido Centrado'>
<h1>La mejor de las tormentas!</h1> <!-- Titulo -->
</div>
</header> <!-- Final para la etiqueta de la cabecera -->
<!-- Parte donde se ubicara el documento y la sección lateral -->
<section>
<div class='AnchoDocumento Centrado'> <!-- Inicio del div que contiene el Documento y la SeccionLateral -->
<div class='Documento MarcoTranslucido'> <!-- div con la parte del documento que se alineara a la izquierda -->
<p>Documento</p>
</div>
<div class='SeccionLateral MarcoTranslucido'> <!-- div con la sección lateral que se alineara a la derecha -->
<p>Sección lateral</p>
</div>
</div> <!-- Final del div que contiene el Documento y la SeccionLateral -->
</section>
<footer> <!-- Inicio del pie de la pagina -->
<div class='AnchoDocumento Centrado'>
<p><b>Documento creado por devildrey33.</b></p>
</div>
</footer> <!-- Fin del pie de la pagina -->
</body> <!-- Final del cuerpo para el documento HTML -->
</html> <!-- Final del documento HTML -->

En especial me gustaría que os fijarais en la línea 14 donde hay un div con varias clases "AnchoDocumento", "Titulo", "MarcoTranslucido", y "Centrado". Ese div mostrara un marco de 1000 pixeles de ancho centrado de derecha a izquierda y que contiene un texto centrado para el titulo.

Y en segundo lugar también quiero que os fijéis en la línea 21, 22 y 25 donde creamos 3 divs. El div de la línea 19 crea un espacio de 1000 pixeles centrado de derecha a izquierda, en el que luego añadimos dos div más. La idea es que no podemos centrar dos objetos a la vez de izquierda a derecha, por eso se ha creado el div de la línea 19 que contiene los dos objetos, ya que al ser un solo objeto sí que es posible centrarlo.

Y con esto terminamos la sexta parte del tutorial, si lo deseáis podéis ver el ejemplo online o descargar el ejemplo para poder editarlo en vuestro ordenador. Buen fin de semana.

Ver Ejemplo Descargar Ejemplo

Podéis seguir con el siguiente tutorial HTML5 : Creación de páginas web desde cero (7 Botones).