¿Cómo hacer un sitio web: para principiantes

¿Siempre ha querido hacer una página web? Tal vez usted ha leído algunos de nuestro HTML (comprensión HTML) y tutoriales CSS, pero no saben cómo utilizar estas lenguas en un proyecto más grande.5 pasos para la comprensión básica Código HTML5 pasos para la comprensión básica Código HTMLLee mas

Hoy me los va a guiarle por el proceso de hacer un sitio web completo desde cero. No se preocupe si esto parece una tarea difícil, voy a guiar a través cada paso del camino.

Va a producir este sitio web utilizando HTML, CSS y javascript con un toque de jQuery (guiar a jQuery). Usted no va a hacer nada De Verdad sangrado borde, por lo que este código debería funcionar bastante bien en la mayoría de los navegadores modernos.

Si no está seguro de cualquier CSS, echar un vistazo a la guía de CSS en W3Schools.com.

El diseño

Aquí está el diseño de este sitio web. Echar un vistazo una imagen de alta resolución en si quieres un mejor aspecto, o incluso mejor, descargar el proyecto completo aquí.

He diseñado este sitio web para una empresa ficticia en Adobe Photoshop CC 2017. Si usted está interesado, asegúrese de agarrar el archivo PSD de la descarga haz. Esto es lo que se obtiene en el archivo de Photoshop:

En el interior del PSD, encontrará todas las capas agrupadas, con nombre y código de colores:

Usted necesitará algunas fuentes instaladas por las cosas que mirar correcta. La primera es la fuente impresionante, que se utiliza para todos los iconos. Las otras dos fuentes son PT Serif y Myriad Pro (incluido con Photoshop). Si no estás seguro de cómo instalar las fuentes, a continuación, lea nuestra guía.Cómo instalar fuentes en Windows, Mac & LinuxCómo instalar fuentes en Windows, Mac & LinuxLee mas

No se preocupe si usted no tiene Photoshop, que no lo necesita para continuar.

Código inicial

Ahora que el diseño es clara, vamos a comenzar la codificación! Crear un nuevo archivo en el editor de textos (estoy usando Sublime Texto 3). Guardar como index.html. Se puede llamar a esto lo que quiera, la razón que muchas páginas se llaman índice es debido a la forma de trabajo de servidores web. La configuración por defecto para la mayoría de los servidores es servir a la página index.html si no se especifica la página.

Si no quieres aprender los detalles, ir a tomar el código completo de la descarga.

Aquí está el código que necesita:

lt;htmlgt;lt;cabezagt;lt;meta charset="UTF-8"gt;lt;títulogt;medios de ruidotítulogt;lt;enlazar rel="hoja de estilo" tipo="text / css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"gt;lt;estilogt;/ * CSS va aquí, en la parte superior de la página * /estilogt;cabezagt;lt;cuerpogt;lt;guión src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" tipo="text / javascript"gt;guióngt;lt;guión tipo="text / javascript"gt;/ * javascript va aquí, en la parte inferior de la página * /guióngt;cuerpogt;htmlgt;

Esto hace varias cosas:

• Define el código HTML mínimo requerido.
• Define un título de la página de “Medios de ruido”
• Incluye jQuery alojado en Google CDN (lo que es un CDN).
• Incluye fuente impresionante alojado en Google CDN.
• define una estilo etiqueta para escribir el código CSS en.
• define una guión etiqueta para escribir su código javascript en.

Guarde el archivo de nuevo y abrirlo en el navegador web. Probablemente no va a notar mucho, y ciertamente no se verá como una página web por el momento.

Note como el título de la página es medios de ruido. Esto se define por el texto dentro de la título etiqueta. Esta tiene a estar dentro de la cabeza las etiquetas.

la cabecera

Vamos a crear la cabecera. Esto es lo que parece:

Vamos a empezar con un poquito de color gris en la parte superior. Es un color gris claro con un ligero color gris oscuro por debajo. Aquí está un primer plano:

Añadir este código HTML dentro de la cuerpo etiqueta en la parte superior:

lt;div carné de identidad="barra superior"gt;divgt;

Mientras esté aquí, vamos a descomponerlo. UN div es como un recipiente para poner otras cosas. Este “otras cosas” puede ser más contenedores, texto, imágenes, nada realmente. Hay algunas restricciones en lo que puede entrar en ciertas etiquetas, pero divs son cosas bastante genéricos. Tiene una carné de identidad de barra superior. Esto será utilizado para diseñarlo con CSS, y la orienten con javascript si es necesario. Asegúrese de que sólo tiene un elemento con un ID particular, - que debe ser único. Si desea que varios elementos que tienen el mismo nombre, utilice una clase lugar - es lo que están diseñados para! Aquí está la CSS que necesita para diseñarlo (poner en la parte superior dentro de su estilo etiqueta):

html, cuerpo {margen: 0-relleno: 0-Familia tipográfica: `Helvetica`, `Arial`- / * Fuentes iniciales * /}#barra superior {anchura: 100%-fondo: # F1F1F1- /* gris claro */border-bottom: 1px solid # D4D4D4- /* gris oscuro "subrayar" * /altura: 25px-}

Observe cómo se utiliza el signo de almohadilla (#, hashtag, signo de libra) antes del nombre. Esto significa que el elemento es un ID. Si estaba utilizando una clase, se utilizaría un punto (.) En su lugar. los html y cuerpo etiquetas tienen su relleno y el margen ponen a cero. Esto evita cualquier problema de separación no deseados.

Es el momento de pasar a la barra de navegación y el logotipo. Antes de empezar, es necesario un recipiente para poner este contenido en. Vamos a hacer de esto una clase (por lo que puede volver a utilizarlo más adelante), y como es no un sitio web de respuesta, que sea 900 píxeles de ancho.

HTML:

lt;div clase="normal envoltura"gt;divgt;

CSS:

.normal envoltura {anchura: 900px-margen: 0 auto-relleno: 15px 40px-fondo: rojo-rebosar: auto-}

Puede ser difícil saber lo que está pasando hasta que termine el código, por lo que puede ser útil añadir un fondo de color (temporal) para ver lo que está pasando:

fondo: rojo-

Es el momento de crear el logotipo ahora. Fuente impresionante es necesaria para el icono de sí mismo. Impresionante fuente es un conjunto de iconos envasados ​​como una fuente vectorial - increíble! El código inicial por encima ya la fuente de instalación impresionante, así que es todo listo para ir!

Añadir este código HTML dentro el normal envoltura div:

lt;div carné de identidad="logo-contenedores"gt;lt;yo clase="fa fa-de disminución del volumen logo-icono"gt;yogt; lt;h1gt;medios de ruidoh1gt;divgt;

CSS:

.logo-icono {color: # 000000-tamaño de fuente: 60pt-flotador: izquierda-}h1 {flotador: izquierda-margen: 21px 25px 0 0-}

No se preocupe por las otras fuentes que no coincidan con el diseño - usted ordenar que hasta más adelante. Si desea utilizar diferentes iconos, en la cabeza a la página de fuentes Iconos impresionante, y luego el cambio fa-volumen-down al nombre del icono que desea utilizar.

Pasando a la barra de navegación, se utilizará una lista desordenada (UL) para esto. Añadir este código HTML después el logo-contenedores (Pero aún dentro de la normal envoltura):

lt;ul carné de identidad="barra de navegación"gt;lt;ligt;lt;un href=""gt;Casaungt;ligt;lt;ligt;lt;un href=""gt;Acerca deungt;ligt;lt;ligt;lt;un href=""gt;Comentariosungt;ligt;lt;ligt;lt;un href="" clase="último enlace" gt;Contactoungt;ligt;ulgt;

los href se utiliza para enlazar a otras páginas. Este sitio web tutorial no tiene ninguna otra página, pero se puede poner la ruta y nombre de archivo (si es necesario) aquí, por ejemplo, reviews.html. Asegúrese de poner esto dentro de los dos comillas dobles.

Aquí está la CSS:

#navbar {list-style-type: ninguna- / * Eliminar viñetas * /margen: 29px 0 0 0-relleno: 0-flotador: derecho-tamaño de fuente: 16pt-}li #navbar {monitor: en línea- / * Hacer que los elementos horizontales * /}#navbar li a: link, #navbar li a: visited, #navbar li a: active {text-decoration: ninguna- / * * Quitar subrayado /color: # 000000-relleno: 0 0 16px 10px- / * * Enlaces espacio de separación /margen: 0-border-right: 2px # B4B4B4 sólida- / * * Divisor /}#navbar li a: link.last-link {/ * * Remove divisor /border-right: 0px-}#navbar li a: hover {/ * Cambio de color en vuelo estacionario (mouseover) * /color: # EB6361-}

Este CSS comienza con una lista desordenada. A continuación, elimina los puntos de la bala utilizando list-style-type: ninguno-. Los enlaces están separados entre sí un poco, y se les da un color cuando se pasa el ratón sobre ellos. El divisor pequeño gris es un borde derecho de cada elemento, que se retira entonces para el último elemento utilizando la último enlace clase. Esto es lo que parece:

Todo lo que queda de esta sección es el punto culminante de color rojo horizontal. Añadir este código HTML después de la normal envoltura:

lt;div carné de identidad="top-color splash"gt;divgt;

Y aquí está la CSS:

# Top-color salpicaduras {anchura: 100%-altura: 4 píxeles-fondo: # EB6361-}

Esa es la sección superior hecho. Esto es lo que parece - muy similar a la del derecho de diseño?

Área de contenido principal

Ahora es el momento de pasar al área de contenido principal - el llamado “encima de la tapa”. Esto es lo que esta parte se ve así:

Esta es una parte bastante simple, un poco de texto de la izquierda con una imagen de la derecha. Esta área será flojamente dividida en tres partes, más o menos se aproxima a la golden Ratio.Usando el cociente de oro en la fotografía para una Mejor ComposiciónUsando el cociente de oro en la fotografía para una Mejor Composición¿Usted lucha con la composición de la foto? Aquí hay dos técnicas basadas en la proporción áurea que mejorará drásticamente sus tomas con poco esfuerzo de su parte.Lee mas

Usted tendrá la imagen de muestra para esta parte. Está incluido en la descarga. Esta imagen es de 670 píxeles de ancho, y es de nuestra Panasonic Lumix DMC-G80 / G85 Revisión.

Añadir el código HTML después el top-color splash elemento:

lt;div clase="normal envoltura"gt;lt;div clase="un tercio"gt;lt;h2 clase="no-margin-top"gt;¡Bienvenido!h2gt;lt;paggt;Medios de ruido es una empresa de tecnología especializada en tecnología revisión.paggt;lt;paggt;Somos muy buenos en lo que hacemos, pero, por desgracia, no somos una empresa real.paggt;lt;paggt;Asegúrese de visitar makeuseof.com para el completo tutorial sobre cómo construir este sitio web.paggt;lt;paggt;Como alternativa, visita nuestra opinión del G80 Panasonic muestra a la derecha!paggt;divgt;lt;div clase="dos tercios"gt;lt;img clase="Foto principal" src="image_1.jpg" / Gt;divgt;divgt;

Nótese cómo el normal envoltura elemento ha regresado (que es la alegría de la utilización de clases). Usted puede preguntarse por qué la imagen (img) Etiqueta no se cierra. Esta es una etiqueta de cierre automático. La barra inclinada (/ Gt;) Indica esto, ya que no siempre tiene sentido tener que cerrar una etiqueta.

CSS:

.un tercio {anchura: 40%-flotador: izquierda-cuadro de dimensionamiento: frontera-box- / * Asegurar el relleno y los bordes no aumentan el tamaño * /margin-top: 20px-}.dos tercios {anchura: 60%-flotador: izquierda-cuadro de dimensionamiento: frontera-box- / * Asegurar el relleno y los bordes no aumentan el tamaño * /padding-left: 40px-texto alineado: derecho-margin-top: 20px-}.Foto principal {anchura máxima: 500px- / * Reducir tamaño de la imagen mientras se mantiene la relación de aspecto * /}.no-margin-top {margin-top: 0- / * Eliminar margen en cosas como las cabeceras * /}

El atributo más importante aquí es caja de tamaño: Frontera-caja-. Esto asegura que los elementos están siempre van a ser 40% o 60% de ancho. El valor por defecto (sin este atributo) es el ancho especificado más cualquier relleno, márgenes y bordes. La clase de imagen (Foto principal) tiene un anchura máxima de 500px. Si sólo se especifica una dimensión (una anchura o altura), y dejar la otra en blanco, css adaptará la imagen mientras se mantiene su relación de aspecto.

Área cotización

Vamos a crear la zona de cotización. Esto es lo que será similar a:

Esta es otra área sencillo. Contiene un fondo gris oscuro, blanco con el texto centrado.

Añadir este código HTML después el anterior normal envoltura:

lt;div carné de identidad="Cotización en el área"gt;lt;div clase="normal envoltura"gt;lt;h3gt;“MakeUseOf es el mejor sitio web nunca”h3gt;lt;h4gt;Joe Coburnh4gt;divgt;divgt;

Y entonces este CSS:

# Cotización en el área {fondo: # 363636-color: #FFFFFF-texto alineado: centrar-relleno: 15px 0-}h3 {font-weight: normal-tamaño de fuente: 20pt-margin-top: 0px-}h4 {font-weight: normal-tamaño de fuente: 16pt-margin-bottom: 0-}

No hay mucho que hacer aquí. El tamaño es el principal ajuste necesario - el tamaño de fuente, el espaciado y así sucesivamente. Esto es lo que todo el asunto se parece ahora - se está empezando a parecerse a un sitio web!

icono del área de

Vamos a seguir presionando sobre - es casi terminado! Aquí está la próxima área que necesita la creación de:

En esta parte se utilizan varias clases. Los tres iconos son en su mayoría del mismo, con la excepción del contenido, así que tiene sentido utilizar clases en lugar de los identificadores. Añadir este código HTML después el anterior Cotización en el área:

lt;div clase="normal envoltura"gt;lt;div clase="icon-exterior"gt;lt;div clase="icono de círculo"gt;lt;yo clase="fa fa-youtube logo-icono"gt;yogt;divgt;lt;h5gt;Youtubeh5gt;lt;paggt;Pedido de nuestro canal de YouTube para más tecnología opiniones, tutoriales y regalos!paggt;divgt;lt;div clase="icon-exterior"gt;lt;div clase="icono de círculo"gt;lt;yo clase="logo-icono fa fa-cámara-retro"gt;yogt;divgt;lt;h5gt;Comentariosh5gt;lt;paggt;Si usted está pensando en comprar un nuevo aparato, consulte primero. Le daremos el examen a fondo de los últimos dispositivos.paggt;divgt;lt;div clase="icon-exterior"gt;lt;div clase="icono de círculo"gt;lt;yo clase="fa fa-dólar logo-icono"gt;yogt;divgt;lt;h5gt;Guías de comprah5gt;lt;paggt;En guías de compra nos esforzamos por ofrecer a los lectores las herramientas para obtener el mejor material para la menor cantidad de dinero.paggt;divgt;divgt;

Estos tres iconos también son Font-impresionante. El HTML es una vez más utilizando la normal envoltura clase. Aquí está la CSS:

.icon-exterior {cuadro de dimensionamiento: frontera-box- / * Asegurar el relleno y los bordes no aumentan el tamaño * /flotador: izquierda-anchura: 33,33%-relleno: 25px-margen: 0-texto alineado: centrar-}.icono de círculo {fondo: #eeeeee-color: # B4B4B4-anchura: 200px-altura: 200px-frontera de radio: 200px- / * Hacer esquinas redondeadas * /margen: 0 auto-frontera: 2px sólida # d6d6d6-cuadro de dimensionamiento: frontera-box- / * Asegurar el relleno y los bordes no aumentan el tamaño * /tamaño de fuente: 75pt-relleno: 30px 0 0 0-cursor: puntero-}.icono de círculo: la libración {/ * Cambio de color en vuelo estacionario (mouseover) * /color: #FFFFFF-fondo: # EB6361-}h5 {margen: 15px 10px 0 0-tamaño de fuente: 20pt-}

Hay algunas cosas nuevas que tienen lugar en el CSS. Las esquinas redondeadas se están estableciendo por frontera de radio: 200px-. Al establecer este valor el mismo que el ancho de los resultados en un círculo perfecto. Puede reducir este si usted prefiere más de un cuadrado con esquinas redondeadas. Observe cómo las acciones de la libración se aplica a los divs - no se limita únicamente a los enlaces. Esto es lo que esta sección se parece ahora:

el pie de página

Lo último que hay que hacer es el pie de página! Esto es muy simple, ya que es sólo una zona gris sin texto. Añadir este código HTML después de que las áreas icono normal envoltura:

lt;div carné de identidad="pie de página"gt;divgt;

Aquí está la CSS:

#pie de página {anchura: 100%-fondo: # F1F1F1- /* gris claro */border-top: 1px solid # D4D4D4- /* gris oscuro "Topline" * /altura: 150px-}

Ver - cosas realmente simple.

Añadir algunas piezas

Eso es todo, la codificación se hace! Puede dejar absolutamente las cosas como son, es una página web acabada. Usted puede haber notado sin embargo, que no se ve exactamente como el diseño. La razón principal de esto es las fuentes utilizadas. Vamos a resolver eso.

La fuente utilizada para la mayoría de los títulos es Myriad Pro. Esto viene con Adobe Crear la nube, pero que no está disponible como una Fuente Web. La fuente utilizada actualmente en la página web es Helvetica. Esto se ve bien, por lo que podría dejarlo como está, sin embargo PT Sans está disponible como una Fuente Web. La fuente usada para todo el texto es PT Serif, que está disponible como una Fuente Web.

Fuentes web son un proceso simple. Al igual que la carga de una nueva fuente en tu ordenador, páginas web pueden cargar fuentes en la demanda. Una de las mejores maneras de hacer esto es a través de Google Fuentes.

Añadir este CSS para cambiar a las mejores fuentes:

@importar url ( `https://fonts.googleapis.com/css?family=PT+Sans`)-@importar url ( `https://fonts.googleapis.com/css?family=PT+Serif`)-h1, h2, h4, h5, h6 {Familia tipográfica: `PT Sans`, `Helvetica`, `Arial`-}

Ahora modifique sus elementos HTML y el cuerpo para utilizar los nuevos tipos de letra:

Familia tipográfica: `PT Serif`, `Helvetica`, `Arial`-

Observe cómo el elemento h3 no está incluido en la lista - esto será por defecto PT-Serif en lugar de PT-Sans.

Como último bit de lo bonito, vamos a usar algo de javascript para desplazarse a través de tres diferentes imágenes destacadas. Necesitará imagen_2 y IMAGE_3 para esta parte, y de nuevo, es opcional. La página web es totalmente funcional en este punto sin esta característica. Esto es lo que se verá así (acelerado):

Vídeo: Como hacer una pagina Web Simple con Dreaweave & Fireworks CS6 - Tutorial

Modificar el código HTML para incluir tres imágenes destacadas. Observe cómo dos de ellos tienen una clase CSS de oculto. Cada imagen se ha dado un ID para que el javascript puede dirigirse a cada uno de ellos de forma independiente.

lt;div clase="dos tercios"gt;lt;img carné de identidad="f-image-1" clase="Foto principal" src="image_1.jpg" / Gt;lt;img carné de identidad="f-image-2" clase="-Imagen ofrecida oculta" src="Image_2.jpg" / Gt;lt;img carné de identidad="f-image-3" clase="-Imagen ofrecida oculta" src="Image_3.jpg" / Gt;divgt;

Aquí está el CSS necesario para ocultar las imágenes destacadas adicionales: