CSS para diseo web

1. … CSS

2. Primero lo que ya aprendiste en Photoshop

3. Sectoriza

4. Guarda para Web

5. Ahora entremos en Dreamweaver

6. CONTROL + N crea un nuevo archivo de formato HTML

7. CONTROL + J Recuerda colocar márgenes 0 y asignar color de fondo CONTROL + ALTA + T Inserta la estructura principal

8. Abre el panel CSS STYLE y observa como se creo un estilo que se llama body . El estilo body se creo automáticamente cuando asignaste márgenes:0 y color de fondo.

9. Presiona CONTROL + N y crea un archivo de formato CSS

10. Aparecerá un nuevo archivo vacío como este

11. Ahora vamos a linkear o vincular el archivo de formato CSS con el archivo HTML

12. Ahora lo que vamos a hacer es mover o pasar el estilo body al archivo de estilo externo , para eso lo seleccionamos (1) en el panel CSS STYLE y lo arrastramos (2) dentro del archivo prueba_css.css. Observa (3) como en el archivo aparece el estilo body{ } 1 2 3

13. Párate en (1) y presiona enter para agregarle más opciones al archivo CSS. Al hacerlo va a parecer un panel (2). Selecciona la opción background-image . Aparecerá (3) inmediatamente la opción browse … Busca la imagen y selecciónala. 1 2 3

14. Para que la celda tenga el estilo que acabas de crear ingresa en la celda y selecciona el nombre del estilo en la casilla Clase

15. Para que se vea bien es necesario que agregues las siguientes propiedades

16. Ahora que ya está funcionando el estilo para la primera celda, vamos a crear los estilos para la tercera y la cuarta celda

17. Para que las celdas tenga el estilo selecciona el nombre del estilo en la casilla Clase

18. Como la tercera celda ya tiene un fondo es necesario agregar una nueva tabla (celda_tercera_dos) en la tercera celda para colocar la imagen del chico que está a la derecha

19. Escribe el siguiente estilo y asígnalo a la tabla que creaste

20. A esto nos referíamos, la imagen del chico estará siempre a la izquierda, sin importar el tamaño del monitor

21. Ahora colocaremos la Tabla donde van a estar los textos y fotos

22. 527px 26px

23. Inserta una tabla de una fila, una columna y no le asignes ancho, déjalo en blanco

24. Para que la table nueva se separe 26px del lado izquierda como está en el diseño agregamos padding-left: 26px a la Celda_Tercera_dos

25. Vamos a crear dos estilos para poder generar el borde más oscuro (#6a0101) que tiene el rectángulo. El padding: 1px es para que la tabla interna se separe 1px de cada lado: arriba, derecha, abajo e izquierda y se vea 1px del color oscuro (#6a0101) que está atrás.

26. Ahora agregaremos color: #f09361 para el color del texto medio naranja. Padding: 18px (arriba), 20px (derecha), 18px (abajo) y 20px (izquierda). También asignamos la fuente font: Arial, Helvetica, sans-serif. Alineaciñon del texto justificada: text-align:justify.

27. Asígnale a la tabla que creaste el estilo Tabla_Texto

28. Inserta la segunda tabla para los textos de una fila, una columna y no le asignes ancho, déjalo en blanco

29. Asígnale a la segunda tabla que creaste el estilo Tabla_Texto_dos

30. Ahora colocaremos los textos y las fotos

31. Aproximadamente 130px Los márgenes son para que la imagen se separe del título y del texto que está a su derecha. El color de fondo es el color del borde

32. Mira que ahora el estilo no empieza con un punto (.div_fotos) ahora empieza con un michi (#div_fotos) esta variante de estilo sirve para asignarlo a una división que tiene id (nombre de identificación)

33. Antes de crear los estilos te recomiendo que primero coloques todos los textos y las fotos. Observa que no he separado con ENTER el texto de la foto

34. Selecciona la foto y luego cambia de vista a CODE. De esa forma cuando cambie de vista estará seleccionado el código de la foto

35. Escribe <div> antes de el código de la imagen y </div> después

36. Ahora agrégale un id y selecciona el # div_fotos que creaste en el archivo de estilos

37. El estilo asignado a una división empuja el texto hacia abajo, vamos a corregir eso para que el texto aparezca a la derecha

38. Agreguemos en el estilo float:left y asunto solucionado.

39. Para que se vea mejor nos paramos aquí y presionamos CONTROL + ENTER eso bajará el texto una línea.

40. Trabajemos ahora los vínculos, primero selecciona un texto que quieras sea vínculo y asígnale # como destino.

41. El vínculo se va a poner azul y subrayado. Ahora vamos a corregir ese detalle

42. a{ } es el vínculo en su estado normal y a:hover{ } es el estado del vínculo cuando pasamos el mouse por encima