… CSS
Primero lo que ya aprendiste en Photoshop
Sectoriza
Guarda para Web
Ahora entremos en Dreamweaver
CONTROL + N  crea un nuevo archivo de formato  HTML
CONTROL + J Recuerda colocar márgenes 0 y asignar color de fondo CONTROL + ALTA + T Inserta la estructura principal
Abre el panel  CSS STYLE  y observa como se creo un estilo que se llama  body . El estilo body se creo automáticamente cua...
Presiona  CONTROL + N  y crea un archivo de  formato CSS
Aparecerá un nuevo archivo vacío como este
Ahora vamos a linkear o vincular el archivo de formato CSS con el archivo HTML
Ahora lo que vamos a hacer es  mover o pasar el estilo body al archivo de estilo externo , para eso lo seleccionamos (1) e...
Párate en (1) y presiona  enter  para agregarle más opciones al archivo CSS. Al hacerlo va a parecer un panel (2). Selecci...
Para que la celda tenga el estilo que acabas de crear ingresa en la celda y selecciona el nombre del estilo en la casilla ...
Para que se vea bien es necesario que agregues las siguientes propiedades
Ahora que ya está funcionando el estilo para la primera celda,  vamos a crear los estilos  para la  tercera  y la  cuarta ...
Para que las celdas tenga el estilo selecciona el nombre del estilo en la casilla  Clase
Como la tercera celda ya tiene un fondo es necesario agregar una nueva tabla (celda_tercera_dos) en la tercera celda para ...
Escribe el siguiente estilo y asígnalo a la tabla que creaste
A esto nos referíamos, la imagen del chico estará siempre a la izquierda, sin importar el tamaño del monitor
Ahora colocaremos la Tabla donde van a estar los textos y fotos
527px 26px
Inserta una tabla de una fila, una columna y  no le asignes ancho, déjalo en blanco
Para que la table nueva se separe 26px del lado izquierda como está en el diseño agregamos  padding-left: 26px a la Celda_...
Vamos a crear dos estilos para poder generar el  borde más oscuro (#6a0101)  que tiene el rectángulo.  El  padding: 1px  e...
Ahora agregaremos  color: #f09361  para el color del texto medio naranja. Padding: 18px  (arriba),  20px  (derecha),  18px...
Asígnale a la tabla que creaste el estilo  Tabla_Texto
Inserta la segunda tabla para los textos de una fila, una columna y  no le asignes ancho, déjalo en blanco
Asígnale a la segunda tabla que creaste el estilo  Tabla_Texto_dos
Ahora colocaremos los textos y las fotos
Aproximadamente 130px Los  márgenes  son para que la imagen se separe del título y del texto que está a su derecha. El  co...
Mira que ahora el estilo no empieza con un punto  (.div_fotos)  ahora empieza con un michi  (#div_fotos)  esta variante de...
Antes de crear los estilos te recomiendo que primero coloques todos los textos y las fotos. Observa que no he separado con...
Selecciona la foto y luego cambia de vista a CODE. De esa forma cuando cambie de vista estará seleccionado el código de la...
Escribe <div> antes de el código de la imagen y </div> después
Ahora  agrégale un id  y selecciona el # div_fotos  que creaste en el archivo de estilos
El estilo asignado a una división empuja el texto hacia abajo, vamos a corregir eso para que el texto aparezca a la derecha
Agreguemos en el estilo  float:left  y asunto solucionado.
Para que se vea mejor nos paramos aquí y presionamos  CONTROL + ENTER eso bajará el texto una línea.
Trabajemos ahora los vínculos, primero selecciona un texto que quieras sea vínculo y asígnale # como destino.
El vínculo se va a poner azul y subrayado. Ahora vamos a corregir ese detalle
a{ }  es el vínculo en su estado normal y  a:hover{ }  es el estado del vínculo cuando pasamos el mouse por encima
 
Upcoming SlideShare
Loading in...5
×

CSS para Diseño web

1,756

Published on

CSS para diseo web

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,756
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "CSS para Diseño web"

  1. 1. … CSS
  2. 2. Primero lo que ya aprendiste en Photoshop
  3. 3. Sectoriza
  4. 4. Guarda para Web
  5. 5. Ahora entremos en Dreamweaver
  6. 6. CONTROL + N crea un nuevo archivo de formato HTML
  7. 7. CONTROL + J Recuerda colocar márgenes 0 y asignar color de fondo CONTROL + ALTA + T Inserta la estructura principal
  8. 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. 9. Presiona CONTROL + N y crea un archivo de formato CSS
  10. 10. Aparecerá un nuevo archivo vacío como este
  11. 11. Ahora vamos a linkear o vincular el archivo de formato CSS con el archivo HTML
  12. 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. 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. 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. 15. Para que se vea bien es necesario que agregues las siguientes propiedades
  16. 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. 17. Para que las celdas tenga el estilo selecciona el nombre del estilo en la casilla Clase
  18. 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. 19. Escribe el siguiente estilo y asígnalo a la tabla que creaste
  20. 20. A esto nos referíamos, la imagen del chico estará siempre a la izquierda, sin importar el tamaño del monitor
  21. 21. Ahora colocaremos la Tabla donde van a estar los textos y fotos
  22. 22. 527px 26px
  23. 23. Inserta una tabla de una fila, una columna y no le asignes ancho, déjalo en blanco
  24. 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. 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. 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. 27. Asígnale a la tabla que creaste el estilo Tabla_Texto
  28. 28. Inserta la segunda tabla para los textos de una fila, una columna y no le asignes ancho, déjalo en blanco
  29. 29. Asígnale a la segunda tabla que creaste el estilo Tabla_Texto_dos
  30. 30. Ahora colocaremos los textos y las fotos
  31. 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. 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. 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. 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. 35. Escribe <div> antes de el código de la imagen y </div> después
  36. 36. Ahora agrégale un id y selecciona el # div_fotos que creaste en el archivo de estilos
  37. 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. 38. Agreguemos en el estilo float:left y asunto solucionado.
  39. 39. Para que se vea mejor nos paramos aquí y presionamos CONTROL + ENTER eso bajará el texto una línea.
  40. 40. Trabajemos ahora los vínculos, primero selecciona un texto que quieras sea vínculo y asígnale # como destino.
  41. 41. El vínculo se va a poner azul y subrayado. Ahora vamos a corregir ese detalle
  42. 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

×