-
Cómo codificar un Website Layout
-
Usted puede pagar a alguien un buen dinero para diseñar un gran diseño para su sitio web, o puede aprender a hacerlo usted mismo y ahorrar todo ese dinero! Un agradable, limpia diseño web profesional no tiene por qué ser gráfico-intenso o complicado. Si se toma el tiempo para aprender cómo codificar un diseño de página web, también puede ser más rico en el sentido de que tendría algún conocimiento valioso que cualquier webmaster que desea. Hay programas que hacen que sea más fácil de codificar un diseño web, pero también puede hacerlo a mano sin demasiada dificultad.Instrucciones
1 Utilice Adobe Photoshop o Microsoft Paint para elegir los colores exactos que desea utilizar. La creación de una imagen visual maqueta le ahorrará la molestia de ensayo y error cuando se está haciendo la codificación real y el diseño. Mira otros diseños de página web que le gusten en busca de inspiración.
2 Utilice la forma rectangular en su programa de edición gráfica y dibujar un rectángulo que es de 900 píxeles de ancho y al menos 600 píxeles de alto. Este será el "contenedor" que mantendrá la totalidad de los otros elementos de su diseño. Al codificar el diseño que será capaz de centrar este contenedor en el centro de la pantalla o mantenerlo más a la izquierda.
3 Dibuje un rectángulo horizontal que se extiende desde un extremo de la parte interior del recipiente al otro. Este rectángulo representa su cabecera. Dibuje una columna bajo el encabezamiento, al menos 150 píxeles de ancho, con la herramienta rectángulo. Esto representará la barra lateral. Dibuje otra, más grande la columna al lado de él, lo que representará el elemento de la página principal. Las anchuras de estas dos columnas más cualquier espacio adicional entre ellos deben sumar a la anchura del contenedor. Dibuje otro rectángulo horizontal, en las dos verticales para representar el pie de página.
4 Abra su programa de procesamiento de textos. Abrir un documento en blanco y escribir el código:
<Html>
<Head>
<Title> El título de la página web </ title>
</ Head>
<Body>
</ Body>
</ Html>Guarde el documento con una extensión de archivo .HTML o .PHP y subirlo al directorio de su sitio web.
5 Escribe este código en entre las etiquetas <body> y </ body>:
<Div class = "contenedor">
<Div class = "header">
Su tope o Título
</ Div>
<Div class = "barra lateral">
Datos de barra lateral y el menú principal.
</ Div>
<Div class = "contenido">
La página principal.
</ Div>
<Div class = "pie">
información de pie.
</ Div>
</ Div>Cada uno de los rectángulos representan los "divs" o elementos separados del diseño.
6 Use un .CSS (Cascading Style Sheet) presentar el diseño de cada elemento y asignar a ellos sus dimensiones. Consulte el Recurso 1 como una guía para la codificación de un archivo .CSS. Utilice la opción "cuentagotas" o selector de color en el editor gráfico para obtener los códigos de color hexadecimal que utilizó en su maqueta. Cuando haya codificado el archivo .CSS, cargarlo en el directorio de su sitio web. Pon este código en algún lugar entre las etiquetas <head> y </ head> de la página que ha realizado.
<Link rel = "stylesheet" type = "text / css" href = "yourstylesheet.css" />
Poner el nombre de archivo del archivo .CSS entre el último conjunto de comillas. Este fragmento de código se "llamar" el archivo .CSS y darle a su disposición el estilo.
Consejos y advertencias
- Si desea omitir la totalidad de la escritura de código, siga el enlace en la Referencia 2 y descargar una plantilla de diseño libre para jugar y personalizar.
