50-Como disenar una pagina web

Un sitio Web tiene las seguientes zonas o secciones

• Encabezado
• Menu de navegacion
• Contenido principal o cuerpo
• Contenido lateral o sidbar
• Pie de pagina

Cuando dibujas una pagina web tienes que saber para que fin se va a usar y adaptar el diseno a su funcionalidad

...

El encabezado

Los encabezados se colocan en la parte superior, por bajo o por arriba del menu de navegacion

Normalmente contienen el logotipo de la empresa y el nombre, li puedes poner un fondo de la empresa o dejalo en blanco

Esto es un encabezado

Soy un encabezado

---

Barra de navegacion

La barra de navegacion es el elemento que ayuda a los usuarios a navegar por el sitio web

normalmente es una lista de enlaces , se ve horizontalmente y se puede colocar por debajo del encabezado o por encima

Ejemplo

Active link Link Disabled link

Codigo completo de como se hacen los navegadores

//estilos
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
</style>

//El codigo
<div class="topnav">
  <a href="#">Enlace Nº1</a>
  <a href="#">Enlace Nº2</a>
  <a href="#">Enlace Nº3</a>
</div>
    

---

Contenido

El local onde vamos a colocar el contenido, depende mucho de la imaginacion de cada usuario

podemos tener un contenido de solo uno contenedor, usando solo 1 columna que ocupe las 12 posiciones del la pagina

podemos dividir el cuerpo en dos partes cada una con 6/6 o 8/4 o 3/9 etc

El importante aqui es que en la altura de dividir las columnas ocupen siempre 12 posiciones

Ejemplos

Soy un contenido de 12 posiciones

Soy un contenido de 6 posiciones

Soy un contenido de 6 posiciones

Podemos colocar 3 columnas de contenido y cuando la pantalla sea mas pequena se reduzca solo a una columna

Ejemplo

Columna

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error enim repudiandae hic numquam! Fuga beatae aperiam cum accusantium ullam sequi ratione enim, impedit optio ducimus quisquam porro quidem perferendis. Tempore.

Columna

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error enim repudiandae hic numquam! Fuga beatae aperiam cum accusantium ullam sequi ratione enim, impedit optio ducimus quisquam porro quidem perferendis. Tempore.

Columna

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Error enim repudiandae hic numquam! Fuga beatae aperiam cum accusantium ullam sequi ratione enim, impedit optio ducimus quisquam porro quidem perferendis. Tempore.

Codigo del ejemplo

        //Los estilos
        <style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
</style>
//El codigo
<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column">
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
</div>
    

---

Columnas desiguales

Para crear columnas desiguales con CSS se les cambia el porcentagen del ancho de cada columna, le ponemos 70% de ancho para una columna

e para la seguiente 30%

Ejemplo

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

Codigo del ejemplo

//Los estilos
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
</style>

//El codigo
<div class="row">
  <div class="column middle">
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>
  
  <div class="column side">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>

    

---

Pie de página

El pie de la pagina se coloca al final de la pagina e se hace con una columna que ocupe el 100% del ancho de la pagina

Normalmente el pie contiene informacion sobre el autor de la pagina, las politicas de la pagina, los cookies etc.

Ejemplo

autor:frioyelectronica.blogspot.com

nuestros cookies

Ir al indice