CSS para Diseño web
2 recomendaciones850 vistas
Este documento proporciona instrucciones para crear un sitio web utilizando Dreamweaver y hojas de estilo en cascada (CSS). Explica cómo crear archivos HTML y CSS separados y vincularlos, así como cómo agregar estilos a diferentes elementos como celdas de tabla, divisiones y enlaces para controlar su formato y apariencia. También muestra cómo insertar imágenes y texto y aplicar estilos CSS para posicionarlos y dar formato a los colores, fuentes, bordes y rellenos.
CSS para Diseño web
- 1. … CSS
- 2. Primero lo que ya aprendiste en Photoshop
- 3. Sectoriza
- 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