PSD a HTML5 conversión: agregar un Slider HTML5 a una página web - parte 1 (3 / 6 paso)

Paso 3: La cabecera

En el diseño establecido anteriormente, lo primero que vemos es el logo. Así que colocar un logo debe ser nuestro primer paso que convertir el diseño en una página HTML5. Para esto, hacer una etiqueta de encabezado dentro de la etiqueta body y, a continuación, hacer un div con una clase de contenedor. Entonces usando una etiqueta de imagen definir la ruta de la imagen de logo y que se puede conectar, utilice la etiqueta de ancla y punto a cualquier página de su sitio web, como nos hemos vinculado a la página de inicio, que es una práctica común.

A continuación, en el diseño PSD, verá que no hay un contacto. a la derecha del logo. Así, hacer una nueva etiqueta de la sección y darle una clase única, luego introducir una etiqueta span y el contacto no. y cierre de etiquetas span y sección respectivamente.

La barra de navegación

< nav >
< ul >
< clase li = "activo" >< a href = "#" > Inicio < /a >< /li >
< li >< a href = "#" > Acerca de nosotros < /a >< /li >
< li >< a href = "#" > Noticias < /a >< /li >
< li >< a href = "#" > Póngase en contacto con nosotros < /a >< /li >
< li >< a href = "#" > productos < /a >< /li >
< li >< a href = "#" > servicios < /a >< /li >
< li >< a href = "#" > testimonios < /a >< /li >
< /ul >
< / nav >

Hemos hecho la barra parte del encabezado de navegación. Desde el inicio de HTML5, haciendo una barra de navegación se ha convertido en mucho más fácil, ya que ahora tenemos la etiqueta nav dedicado en su lugar. Así que usando la etiqueta nav, hacer una lista sin ordenar o etiqueta de UL en su interior y dentro de la etiqueta UL, hacer etiquetas lista o LI 7 y coloque las opciones del menú dentro de ellos. Además, dar la primera etiqueta LI un único nombre de clase, es decir, 'activa', que va a venir bien en el css. Por otra parte, no se olvide de añadir una etiqueta de ancla para cada opción de menú. Como se puede ver que no hemos definido ninguna URL de web en la etiqueta href, en cambio tenemos apenas utilice una etiqueta de hash. Pero puede reemplazar esas pequeñas etiquetas hash con URL de sus sitios web en una secuencia.

Contenedor de bandera izquierdo

< id sección = "banner_container" >
< artículo clase = "left_banner" >
PROYECTO de ejemplo de < h2 > < / h2 >
< p > Proyecto signos y pancartas ha sido el área de Buffalo durante los últimos 14 años. Hacemos prácticamente todos los tipos de carteles y pancartas.  Puesto que la mayoría de nuestros signos se realizan personalizada, por favor llame, fax o correo electrónico para una cotización exacta. < /p >
< / sección >

El contenedor de banner izquierdo es donde colocas el texto además de la barra deslizante de la imagen como se muestra en el archivo de diseño. Así que para, en primer lugar hacer una etiqueta de sección y darle un id de banner_container. Luego realizar una etiqueta de sección adicional con una clase de left_banner. Este es el comienzo de nuestro envase del banner izquierdo. Ahora crear una etiqueta H2 y coloque el título en su interior. Después de la partida, tenemos que colocar el texto, así que para hacer una nueva etiqueta de párrafo y coloque el texto y cerrar la etiqueta. Ahora también cerrar la etiqueta de sección de la bandera izquierda solamente.

El deslizador de HTML5

< artículo clase = "slider_container" >
< artículo clase = "slider" >
< artículo clase = "slide_content" >
< img src="common/images/banner_img_1.jpg" width = "495" height = "303" alt = "#" >
< artículo clase = "text_line" > Proyecto signos ha sido una fuente local, regional y nacional a las necesidades gráficas signo, bandera y flota de cientos de clientes! < / sección >
< / sección >
< artículo clase = "slide_content" >
< img src="common/images/banner_img_2.jpg" width = "495" height = "303" alt = "#" >
< artículo clase = "text_line" > Proyecto signos ha sido una fuente local, regional y nacional a las necesidades gráficas signo, bandera y flota de cientos de clientes! < / sección >
< / sección >
< / sección >

Slider HTML5 es lo que queríamos enseñar desesperadamente. Como en principio incluso les contamos que muchos desarrolladores les resulta difícil hacer un slider HTML5 y empezar a utilizar algunos deslizadores hechas de antemano.

Así que para hacer un slider HTML5, crear una etiqueta de sección con una clase de slider_container, junto con crear dos etiquetas de sección más y darles una clase de deslizador y slide_content respectivamente.

Ahora para colocar las imágenes en el cursor, utilice la etiqueta de imagen y proporcione la ruta de la imagen en la etiqueta de la fuente. Y también especifican el ancho y la altura de la imagen. Luego hacer una nueva etiqueta de la sección y darle una clase de text_line y escribir el texto correspondiente y cerrar esto como la etiqueta de sección anterior con una clase de slide_content ahora.

Por ahora, hemos colocado una imagen en nuestro slider HTML5 con éxito. Pero un slider siempre debe tener al menos dos o más imágenes para trabajar. Así que para poner la segunda imagen y su texto, sólo copiar la primera de ellas y pegarlo. Ahora cambiar la fuente de la imagen y punto a la segunda imagen, la anchura y la altura del mismo. Luego reinstale la línea del texto (si es necesario) y las etiquetas respectivas junto con la segunda etiqueta de sección. Que es él, nuestro HTML5 básica slider es ahora completa, así que vamos a avanzar y hacer el control deslizante.

< a href = "#" class = "Flecha_Izquierda" >< /a >
< a href = "#" class = "right_arrow" >< /a >

< / sección >
< / sección >
< / div >
< / encabezado >

Como hemos hecho el deslizador con éxito, ahora necesitamos proveer los visitantes del sitio web con sus controladores para que también pueden cambiar las diapositivas a su voluntad. Así que hacer ancla dos etiquetas, una con una clase de Flecha_Izquierda y uno con una clase de right_arrow y cerca de las las etiquetas.

sí sabemos que estás sorprendido al notar por eso no tenemos lugar nada entre las etiquetas de anclaje. Pero no te preocupes, ya pondremos imágenes apropiadas para estas dos etiquetas mediante CSS3. Tan sólo espera, reloj y práctica. Ahora nuestra sección de encabezado completa así cerrar todas las etiquetas restantes excepto las etiquetas html y cuerpo.