lunes, 20 de mayo de 2019
martes, 8 de marzo de 2011
Adobe Dreamweaver - Imágenes y CSS
Algo que caracteriza a Dreamweaver es el uso más desarrollado que tiene de las hojas de estilo en cascada ( Cascade Style Sheet).
Inicialmente configuraciones como el formato del texto y colores de sectores de la página web se detallaban dentro del mismo codigo HTML.
Las CSS vinieron a reemplazar el hecho de tener que escribir el mismo código en cada página. En lugar de eso se puede crear un archivo CSS el cual contiene las caracteristicas de ciertos sectores de la página o sus componentes. Luego la biblioteca de CSS de Dreamweaver puede exportar o crear nuevas copias (incluso asignarle nombres asociados) para poder usarlos libremente.
Vamos a ver un ejemplo de como generar una regla CSS
Cuando seleccionamos un elemento como un texto, el inspector de propiedades en la barra inferior del Dreamweaver nos mostrará 2 opciones, HTML o CSS.
Al elegir el primer cambio nos aparecerá una ventana para pedirnos que definamos un nombre para el formato que vamos a aplicar.
Básicamente, necesitamos darle un nombre, el cual va a identificar esta combinacion de estilos para la regla. De esta manera, podemos volver a usarlo dentro del documento simplemente aplicandola. Luego veremos cómo.
También vemos una descripción de cómo va a afectar a nuestro codigo.
Damos aceptar para que se cree la regla.
Luego en el panel de CSS haciendo doble clic en el nombre que le dimos a la regla CSS (en este caso he llamado "descripc1" para este cuerpo de texto) y nos aparecerá una ventana para configurar los cambios al texto. Recuerda que son cambios que aplican a un parrafo de texto, por lo tanto no todas las opciones se verán reflejadas, tan sólo las que correspondan para un párrafo de texto.
Detalles como el color de fondo o la imagen de fondo no tendrán efecto en un párrafo de texto libre.
En la misma ventana hay muchas opciones que podemos usar para modificar la regla de descripc1.
Una vez creada una regla, podemos encontrarla en el panel de CSS a la derecha y editarlas con doble clic de nuevo.
En el inspector de propiedades veremos cómo aplicar, eliminar o crear nuevas reglas, las cuales nos servirán para más adelante.
También nos falta indicar que las reglas CSS pueden estar limitadas a aplicarse sólo en este documento (html) o en todo el sitio. En caso que deseemos usarlas para todo el sitio, se creará un archivo *.css el cual servirá para toda página dentro de la raíz de mi sitio web.
En el primer caso, se llaman CSS locales (escritas sólo en el código del documento. En el segundo caso se llaman CSS externas o adjuntas, las cuales se llaman por medio de un código, pero no vamos a profundizar en el detalle.
Desplegando la lista tenemos las opciones principales y seleccionando el elemento a modificar podemos ir viendo cómo se agrega el código en la barra de código donde ahora vemos <body><p>
Como la regla ya está creada, tan sólo la seleccionamos por su nombre y se aplicará con sus cambios sobre lo elegido (en este caso es texto).
Si se fijan bien, donde decia <body><p>
ahora dirá <body><p .Descripc3>
si elegimos esa regla. Es el código que necesita el párrafo para llamar a la regla y aplicarla sobre el párrafo en cuestión.
Más adelante con la práctica verán que tan fácil es usar los estilos de hoja en cascada cuando se trata de texto, ya que según vimos en la primer parte del curso, lo ideal de un sitio web es que tenga una COHERENCIA DE ESTILO, en lo que respecta a TEXTO, lo ideal es no variar entre página y página, a menos que esa sea la idea de nuestro sitio, o sea con un propósito creativo en particular.
El resto de las particularidades de las CSS las veremos en clase brevemente también.
INSERTAR IMAGENES EN DREAMWEAVER
En esta sección veremos cómo insertar las imágenes en nuestra página web.
Comenzamos por ir al menú Insertar - - Imagen
Dado esto podremos ver las opciones que son simples pero muy importantes para que todo funcione bien.
Luego de presionar Aceptar, se nos pedirá una descripción alternativa. Esto ayuda en el caso de problemas de carga de nuestra imagen, con una pequeña frase que dirá lo que iba a aparecer en el lugar de la imagen.
Vamos a saltear esa parte clic en Aceptar de nuevo.
En este caso la version CS5 que estoy usando para el Blog está casi 100% basada en el uso de las CSS para darle posición y formato a las imágenes también, pero esto precisaría de otros elementos de diseño que por el momento no voy a detallar.
En cambio, vamos a dejar la imagen en la izquierda, y agregar antes texto para el título de la página (que llamé Ejemplo1) , agregar una linea más por medio de la tecla Enter y luego otra linea más para darle título a la imagen ("Castillo N°1")
Bien , las imagenes son algo sencillo si se usan en una estructura como una tabla. De lo contrario, se deberán usar elementos DIV para acomodarlas. En un primer lugar vamos a usar tablas, las cuales se generan dentro del código de la página misma y nos servirán para ordernar la estructura.
La imagen se puede redimensionar, pero es ideal tener una imagen más pequeña para secciones como galería, la cual tiene Miniaturas de lo que se verá y no precisa de tanto detalle, sino ser de carga rápida (por lo tanto, tener archivos de poco peso).
Lo ideal en esta situación es usar cualquier programa para achicar una imagen y guardarla con nombre similar o identificable, para ser usada en nuestro sitio.
En el modo diseño, las imagenes se pueden borrar con la tecla Delete o Suprimir sencillamente, además de reacomodarse con las opciones de las propiedades.
En la siguiente lección aprenderemos a armar una tabla y a modificarla según necesitemos.
Suscribirse a:
Entradas (Atom)