Ejemplos de maquetas web en papel

 

Créditos a sus respectivos autores.





Comentarios

Publicar un comentario

Entradas más populares de este blog

Posicionamiento de contenedores con CSS

Imagen
Bueno, antes que nada, debemos aclarar ¿Qué es un contenedor? Todo elemento de un documento HTML, es considerado como un contenedor o caja rectangular invisible al usuario y a la cual se le pueden aplicar ciertas propiedades para ubicar los elementos respecto a otros. Por ejemplo, si pudiéramos "visualizar" una línea al rededor de los elementos HTML que estamos programando, veríamos algo como lo siguiente:    Básicamente, todos los contenedores de HTML, tienen las mismas partes: El elemento en sí mismo. El espacio de relleno que rodea al elemento HTML. El borde que rodea al elemento y al relleno. El margen que tiene ese contenedor con respecto a otros contenedores. Una vez explicado esto, pasemos al ejemplo #1 de una página web cuyas secciones están divididas por 5 contenedores: Un contenedor principal que agrupa todo el contenido al centro de la página web y deja unos márgenes a la izquierda y a la derecha del navegador. Un contenedor para contener la cabecera de la página w...
Leer más

Formulario con estilos CSS

Imagen
A continuación se presenta un ejemplo de como personalizar los elementos de un formulario. El resultado que deseamos obtener es el siguiente:  Primeramente, se necesita tener ya un formulario programado en HTML, para eso se utilizará este: Cuyo código fuente es:  Si no lo tienes, ¡Prográmalo en tu editor de textos favorito! El siguiente paso será modificar dicho código HTML para agregarle identificadores y clases. Los cambios realizados se han marcado con un recuadro color rojo . Ahora vamos agregando el código CSS y vayamos viendo los cambios: Primero agregamos una imagen para que actúe de fondo en la página web (puedes usar la imagen que tu quieras) y cambiamos la fuente a una familia "Verdana". Código fuente:  Visualización:  Ahora agregar un contenedor para centrar el contenido de la página respecto a la ventana del navegador. Código fuente:  Visualización:  El siguiente paso es aplicarle los estilos al propio formulario:  Código fuente:  Vis...
Leer más