Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

Creando una web, 5ª parte y final

7 marzo, 2011
en CSS, Diseño Web, Webmaster
1
Creando una web, 5ª parte y final
Share on FacebookShare on Twitter

Continuamos con el diseño de la web, esta vez vamos a dar forma a las imágenes de abajo

Recordamos los pasos realizados desde el inicio de la web

  1. Colocar imagenes en donde estan los divs de fotografias, dejamos el espacio para ellas
  2. Dar estilo al menú
  3. Reemplazar texto por imagenes en el encabezado
  4. Colocar un background en el pie de pagina
  5. Remplazar los cuadros grises por las imágenes

5. Remplazar los cuadros grises por las imágenes

Para facilitar que imagen va en que lugar he llamado a las imagenes de una forma que no se pueden confundir, esto es fotoX_n y fotoX_c, resalto la X porque es una variable que va de 1 a 6, es un criterio para seguir en los nombres de las fotografias y el _n o _c nos indica si lafotografia esta en negro o si es color.

Una vez interpretado esto vemos la estructura html de esos 6 elementos grises que es esta:


<div id="fotos">
 <div id="foto1">Fotografia 1</div>
 <div id="foto2">Fotografia 2</div>
 <div id="foto3">Fotografia 3</div>
 <div id="foto4">Fotografia 4</div>
 <div id="foto5">Fotografia 5</div>
 <div id="foto6">Fotografia 6</div>
</div>

Una vez repasado cual es el codigo ahora lo que haremos sera nuevamente reemplazar texto por imagenes. ¿Cómo lo hacemos? sobre cada div con id fotoX (pongo como x una variable) ponemos la siguientes propiedades de CSS:

div#fotoX{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/fotoX_n) no-repat;
 }

Es decir que tendremos que agregar todos este codigo 6 veces cambiando X por el numero que corresponda, quedaria asi:


div#foto1{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat; }

div#foto2{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

div#foto3{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

div#foto4{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

div#foto5{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

div#foto6{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

Resumiendo hasta aquí:
Empezamos la expliación en este punto: 07-creando-web.html
Como paso intermedio tenemos: 08-creando-web.html
Finalmente hemos llegado a: 09-creando-web.html

Para mejorar un poco el resultado final, podemos hacer que las imagenes se pongan en color al pasar el raton por encima: 09-creando-web.html

Nota: en el código CSS para colocar las imágenes, vemos que parece muy largo y que se repite lo mismo 6 veces, mas o menos. Una forma de escribir menos código y conseguir que el fichero de CSS pese menos sería de la siguiente forma:

Hemos puesto este código seis veces, uno por cada imagen, imagina la tortura que será añadir más imágenes:


div#foto1{
overflow: hidden;
display: block;
text-indent: -999%;
background: url(Images/foto1_n.jpg) no-repeat;
}

Podemos poner el siguiente código con el cual tendremos el mismo resultado y al añadir mas imágenes no es necesario modificar la hoja de estilos


div#foto div{
overflow: hidden;
display: block;
}

Explicación: con esta css conseguimos que todos los div que esten dentro del div #foto tengan la misma forma y tamaño

Etiquetas: creando webcss
ANUNCIO
Post anterior

Chuleta CSS o Cheat Sheet de Hojas de Estilo

Próximo Post

Enviar formularios desde la web

Otros Posts

Conoce la historia del marketing digital

Conoce la historia del marketing digital

8 noviembre, 2022
0

Tras la revolución que ha supuesto para nuestra sociedad la llegada de Internet, las empresas se han visto obligadas a adaptarse a este nuevo paradigma publicitando, para ello, los productos y servicios que ponen a...

SEO

Los 3 mejores plugins de SEO para WordPress

30 octubre, 2022
0

Hemos comentado ya muchas veces que cuando comienzas a construir tu sitio web tienes que centrarte en la  optimización de motores de búsqueda (SEO). Mejorar el SEO es esencial para clasificar una web en lo...

Por favor logueate para comentar

Recomendados

Guía para una buena redacción SEO

Guía para una buena redacción SEO

13 agosto, 2021
MySQL: Buscar y reemplazar partes de un texto

MySQL: Buscar y reemplazar partes de un texto

27 agosto, 2011
Utilidades para chequear y medir la reputación del servidor de correo

Utilidades para chequear y medir la reputación del servidor de correo

2 octubre, 2019
Corregir error al iniciar Xampp: Apache shutdown unexpectedly.

Solucionar el error «Intl extension is not loaded» de XAMPP

28 febrero, 2019

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .