Curso Dreamweaver CS6 Unidad 1. Conceptos básicos de Dreamweaver CS6
1.1. Qué es Dreamweaver CS6 1.2. Novedades de Dreamweaver CS6 HTML básico 1.3. Editar páginas web 1.4. Cómo tener una página en Internet 1.5. Arrancar y cerrar Dreamweaver Dr eamweaver CS6 1.6. Abrir y guardar documentos Compaginar dos sesiones 1.7. Mi primera página
Unidad 2. El entorno de Dreamweaver CS6
2.1. La pantalla inicial 2.2. Las barras 2.3. Inspectores y paneles Personalizar el área de trabajo 2.4. Vistas de un documento 2.5. La ayuda
Unidad 3. Configurar un sitio local
3.1. Introducción 3.2. Crear o editar un sitio web sin conexión a Internet 3.3. Abrir un sitio 3.4. Ver el sitio 3.5. Subir archivos al servidor 3.6. Propiedades del documento Comprobar tamaño para optimizar la carga 3.7. Los colores
Unidad 4. El texto: propiedades y formato
4.1. Características del texto 4.2. Listas 4.3. Caracteres especiales 4.4. Estilos CSS. Introducción 4.5. Crear un estilo personalizado 4.6. Definir o editar un estilo El panel Estilos CSS 4.7. Aplicar un estilo 4.8. Hojas de estilos
Unidad 5. Hiperenlaces
5.1. Introducción 5.2. Tipos de referencia 5.3. Crear enlaces Configurar nuevos enlaces 5.4. Destino del enlace 5.5. Formato del enlace 5.6. Enlace a correo electrónico Vínculos rotos
Unidad 6. Imágenes
6.1. Introducción 6.2. Insertar una imagen Formatos de imagen para web 6.3. Propiedades de una imagen 1
Mapas de imagen Cambiar formato y crear transparencias Programas de edición de imágenes 6.4. Cambiar el tamaño de una imagen 6.5. Imagen de sustitución. Rollover Menú CSS 6.6. Objetos inteligentes
Unidad 7. Tablas
7.1. Introducción 7.2. Insertar una tabla 7.3. Rellenar las celdas 7.4. Seleccionar elementos de una tabla 7.5. Formato de tabla 7.6. Formato CSS 7.7. Cambiar tamaño de tabla y celdas 7.8. Añadir y eliminar filas y columnas 7.9. Anidar, dividir y combinar celdas 7.10. Modos de tabla 7.11. Adaptar webs a distintas resoluciones
Unidad 8. Marcos
8.1. Introducción 8.2. Crear marcos 8.3. Seleccionar marcos 8.4. Guardar 8.5. Configurar marcos 8.6. Contenido del marco
Unidad 9. Formularios
9.1. Introducción 9.2. Elementos de formulario 9.3. Crear formularios 9.4. Validar formularios
Unidad 10. Multimedia
10.1. Películas Flash (SWF) 10.2. Sonido 10.3. Vídeos
Unidad 11. Las plantillas
11.1. Introducción 11.2. Crear plantillas 11.3. Establecer regiones editables en una plantilla 11.4. Basar páginas en una plantilla
Unidad 12. HTML desde Dreamweaver
12.1. Etiquetas 12.2. Entidades HTML Listado de Entidades HTML 12.3. El inspector de código 12.4. Completar las etiquetas 12.5. Contraer y expandir código 12.6. Errores en el código 12.7. Buscar y reemplazar Expresiones Regulares Búsqueda en Etiquetas
2
Mapas de imagen Cambiar formato y crear transparencias Programas de edición de imágenes 6.4. Cambiar el tamaño de una imagen 6.5. Imagen de sustitución. Rollover Menú CSS 6.6. Objetos inteligentes
Unidad 7. Tablas
7.1. Introducción 7.2. Insertar una tabla 7.3. Rellenar las celdas 7.4. Seleccionar elementos de una tabla 7.5. Formato de tabla 7.6. Formato CSS 7.7. Cambiar tamaño de tabla y celdas 7.8. Añadir y eliminar filas y columnas 7.9. Anidar, dividir y combinar celdas 7.10. Modos de tabla 7.11. Adaptar webs a distintas resoluciones
Unidad 8. Marcos
8.1. Introducción 8.2. Crear marcos 8.3. Seleccionar marcos 8.4. Guardar 8.5. Configurar marcos 8.6. Contenido del marco
Unidad 9. Formularios
9.1. Introducción 9.2. Elementos de formulario 9.3. Crear formularios 9.4. Validar formularios
Unidad 10. Multimedia
10.1. Películas Flash (SWF) 10.2. Sonido 10.3. Vídeos
Unidad 11. Las plantillas
11.1. Introducción 11.2. Crear plantillas 11.3. Establecer regiones editables en una plantilla 11.4. Basar páginas en una plantilla
Unidad 12. HTML desde Dreamweaver
12.1. Etiquetas 12.2. Entidades HTML Listado de Entidades HTML 12.3. El inspector de código 12.4. Completar las etiquetas 12.5. Contraer y expandir código 12.6. Errores en el código 12.7. Buscar y reemplazar Expresiones Regulares Búsqueda en Etiquetas
2
Unidad 13. Otros elementos
13.1. Fuentes web 13.2. Marquesinas 13.3. Fecha 13.4. Regla horizontal 13.5. Código de otras páginas
Unidad 14. Capas
14.1. Introducción 14.2. Insertar una capa 14.3. Formato de una capa
Unidad 15. Comportamiento Comportamientoss
15.1. Introducción 15.2. Insertar un comportamiento 15.3. Mostrar-Ocultar elementos 15.4. Llamar JavaScript Eventos
Unidad 16. Comportamientos avanzados
16.1. Mensajes emergentes 16.2. Carga previa de imágenes 16.3. Abrir nueva ventana del navegador 16.4. Cambiar propiedades CSS 16.5. Comprobar Plug-ins 16.6. Menús de salto 16.7. Transiciones
Unidad 17. Estilos CSS Avanzados
17.1. Aplicar estilos CSS 17.2. Sintaxis CSS 17.3. Selectores compuestos 17.4. Selectores de atributo 17.5. Pseudo-clases y Pseudo-elementos CSS 17.6. Orden de aplicación de los estilos CSS 17.7. Controles de fuente 17.8. Espaciado y alineación 17.9. Apariencia del texto 17.10. Controles de ratón 17.11. Controles de lista 17.12. Controles de fondo 17.13. Controles de margen interior y exterior Inspección de CSS 17.14. Bordes 17.15. Elementos flotantes 17.16. Controles de elementos de bloque y en línea 17.17. Controles de posición 17.18. Controles de visibilidad
Unidad 18. Diseño de página. Maquetación web
18.1. Maquetar una página web 18.2. Tamaño 18.3. Desbordamiento 18.4. Posicionamiento 18.5. Posicionamiento relativo 18.6. Posicionamiento absoluto 18.7. Posicionamiento flotante
3
18.8. Posicionamiento fijo 18.9. Ancho de la página, líquido o elástico 18.10. Maquetación prediseñada en Dreamweaver 18.11. Videotutoriales. Creando un sitio web completo 18.12. Diseño de cuadrícula fluida con Dreamweaver
Unidad 19. Sitios remotos
19.1. Configurar un Sitio Remoto 19.2. El panel Archivos 19.3. Sincronizar Sitios
Unidad 20. Servidor de Pruebas
20.1. Introducción a PHP Bases de datos 20.2. Estructura PHP 20.3. Instalar un servidor local con WampServer 20.4. Configuración inicial 20.5. Trabajar con un servidor local WampServer 20.6. Configurar un servidor de pruebas 20.7. Introducción a phpMyAdmin 20.8. Crear una base de datos en phpMyAdmin 20.9. Crear una tabla en phpMyAdmin 20.10. Insertar datos en una tabla 20.11. Modificar la estructura de la tabla 20.12. Modificar datos de una tabla 20.13. Establecer privilegios en phpMyAdmin
Unidad 21. Páginas dinámicas
21.1. Introducción 21.2. Crear una conexión a la base de datos 21.3. Juegos de registros o RecordSets 21.4. Mostrar datos dinámicos 21.5. Repeticiones 21.6. Orden de juegos de registros 21.7. Filtrado de juegos de registros 21.8. Paginación de Registros 21.9. Mostrar/Ocultar regiones 21.10. Uso de variables 21.11. Páginas Maestro-Detalle 21.12. Asistente de inserción de registros 21.13. Asistente de actualización de registros 21.14. Asistente de eliminación de registros 21.15. Juegos de registros avanzados
Unidad 22. Cómo crear un Blog
22.1. Introducción 22.2. Estructura de datos 22.3. Interfaz pública 22.4. Interfaz privada 22.5. Insertar nuevos elementos 22.6. Listado de elementos 22.7. Modificación de elementos 22.8. Eliminación de elementos 22.9. Restringir acceso
Unidad 23. XML y RSS
23.1. Introducción 23.2. Importar datos de un archivo externo
4
23.3. Trabajar con elementos XML 23.4. Crear repeticiones 23.5. Ordenar elementos 23.6. Sentencias condicionales 23.7. Insertar un fragmento XSLT 23.8. Paso de parámetros
Unidad 24. Acceso a datos con Spry
24.1. Introducción 24.2. Conjunto de datos XML 24.3. Crear una región de Spry 24.4. Repetición de elementos 24.5. Listas de repetición 24.6. Mostrar Maestro - Detalle
Unidad 25. AJAX y Spry Framework
25.1. Introducción 25.2. Incluir Spry 25.3. Importar datos 25.4. Definiendo regiones Spry 25.5. Mostrar información 25.6. Crear repeticiones 25.7. Ordenar registros 25.8. Condicionales 25.9. Filtros 25.10. Eliminar filas repetidas 25.11. Actualizar la carga de un archivo XML 25.12. Modo Maestro/Detalle 25.13. Modo Maestro/Detalle con diferentes fuentes XML 25.14. Spry y estilos CSS 25.15. Importar datos (II)
Unidad 26. Spry y Formularios
26.1. Introducción 26.2. Validación de campos de texto 26.3. Estados de validación 26.4. Validación de campos desplegables 26.5. Grupo de opciones 26.6. Casillas de verificación 26.7. Áreas de texto 26.8. Contraseñas 26.9. Campo de confirmación
Unidad 27. Controles Spry Avanzados
27.1. Introducción 27.2. Barra de menús 27.3. Navegación por Fichas 27.4. Control Acordeón 27.5. Panel con Contracción 27.6. Cambiar Estilos CSS
5
Unidad 1. Conceptos básicos de Dreamweaver CS6 (I) 1.
Qué es Dreamweaver CS6 Dreamweaver CS6 es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver CS6 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc..., de una forma muy sencilla y visual. Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa. Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa. Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe. Las páginas web están escritas en HTML. Si no conoces las características básicas de HTML puedes verlas aquí.
2.
Novedades de Dreamweaver CS6 En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.
Plantillas diseño fluido. El acceso a la web a través de todo tipo de dispositivos está experimentando un aumento importante. Ahora es habitual acceder a internet desde el teléfono móvil y desde las tabletas. Esto complica el diseño de los sitios web porque los dispositivos son de diferentes dimensiones. Una forma de afrontar este problema es utilizando el diseño fluido, este tipo de diseño hace que la página se adapte automáticamente a las dimensiones del dispositivo. Este tipo de diseño utiliza HTML 5 por los que los navegadores antiguos no son capaces de representarlo correctamente. Sin embargo, existen librerias de Javascript que solucionan este inconveniente. Dreamweaver incorpora estas soluciones en sus nuevas plantillas de diseño fluido que veremos en la unidad 18.
6
Transiciones. Las transiciones permiten pasar propiedades CSS de un estado inicial a otro estado final de forma continua . Con transiciones se pueden lograr vistosos efectos de animaciones. Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un aire distinto a nuestros diseños de páginas web. En esta versión, Dreamweaver permite incorporar los archivos de nuevas fuentes de forma sencilla.
Intergración con PhoneGap mejorada. PhoneGap es un servicio para generar aplicaciones para teléfonos móviles en las plataformas más utilizadas (Android, Apple, ...) ahora se ha mejorado la compatibildad con PhoneGap desde Dreamweaver .
Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva forma de adquirir productos Adobe, como Dreamweaver, mediante suscripción mensual o anual, de esta forma se tiene acceso más rapido a las actualizaciones y se puede disponer de los archivos de trabajo en cualquier ubicación con acceso a internet. Además hay funciones que sólo estan disponibles para los suscriptores de Cloud, como la inserción de etiquetas HTML 5 desde el panel Insertar , la compatibilidad con Edge Animate o la búsqueda dinámica en Mac.
Unidad 1. Básico: HTML básico Las páginas que vemos en Internet están escritas utilizando el lenguaje HTML (Hyper Text Markup Language). Este lenguaje está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web. Por ejemplo, el título de la página Web se escribe entre las etiquetas
y .
Como ves, ambas etiquetas consisten en poner un mismo comando entre los símbolos " <" y ">". La primera etiqueta indica inicio, y la segunda, que incluye el símbolo " /", indica final.
7
Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan. Por ejemplo,
border="1">
indica que la que se trata de una tabla, y que tendrá
un borde de grosor 1. Una página HTML básica tendría el siguiente aspecto:
Mi primera página web Haz aulaClic y aprender más sobre páginas web.
clic
aquí
para
ir
a
El ejemplo anterior mostraría una página con un sólo párrafo en el que parte del texto enlaza con la web de aulaClic. Puedes probarlo copiando el código y pegándolo en un archivo de texto, que debes guardar con la extensión .htm . Observa que cada etiqueta tiene una apertura y un cierre, y que están anidadas unas dentro de otras. Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en un navegador (IExplorer, Firefox, Opera, Chrome, etc). Cuando un usuario desde Internet solicita ver una página el servidor Web envía la página al navegador y este interpreta las etiquetas para dar la página correctamente formateada. Cuando utilizamos Dreamweaver para crear una página Web no tenemos que preocuparnos de
todo esto. Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico. Esto nos facilita muchísimo el trabajo.
3.
Editar páginas web Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM , e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo. Pero crear páginas web mediante el código HTML es más laborioso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a entender lo que estamos haciendo y podremos aprender HTML rápidamente. Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.
8
Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.
4.
Cómo tener una página en Internet Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo. Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para publicar en Intenet de forma gratuita en forma de blog. Como por ejemplo, Blogger de Google o MySpace de Microsoft. Un blog tiene una estructura definida y no ofrece tanta libertad como una página web a la hora del diseño. También tenemos Google Sites que permite modificar directamente el código HTML. En el resto del curso nos referiremos preferentemente a páginas web creadas desde cero por el usuario, sin restricciones de diseño. Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio , tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. La terminación hace
9
referencia al pais (.es para España, .com.mx para México, .pe para Perú, ...) o al tipo de página (.com para comerciales, .org para organizaciones, .mobi para teléfonos móviles o celulares, ...) En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada. A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web. Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com. En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo. Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se encuentre a disposición de todo el mundo en Internet. Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y
como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán. Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni
espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él. Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también,
los nombres en minúscula . Algunos servidores (los que utilizan linux) distinguen entre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg . Evitarás horas perdidas buscando fallos.
5.
Arrancar y cerrar Dreamweaver CS6 Veamos las dos formas básicas de arrancar Dreamweaver CS6.
Desde el botón Inicio
situado, normalmente, en la esquina inferior izquierda de la
pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS6 y haz clic sobre él para arrancar el programa.
Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes
.
10
Puedes arrancar Dreamweaver CS6 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aquí. Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows. Pulsar la combinación de teclas Alt + F4. Hacer clic sobre el menú Archivo y elegir la opción Salir .
Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.
6.
Abrir y guardar documentos Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible). Pulsar la combinación de teclas Ctrl + O. Hacer clic sobre el menú Archivo y elegir la opción Abrir... . Hacer clic sobre el menú Archivo y elegir la opción Abrir reciente. Muestra los últimos archivos abiertos. Hacer clic sobre el menú Archivo y elegir la opción Examinar en Brigde. Se abrirá el programa Brigde que muestra las carpetas y archivos de forma gráfica. Hacer doble clic sobre el archivo en la ventana del sitio. Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir con Adobe Dreamweaver CS6. →
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:
Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible). Pulsar la combinación de teclas Ctrl + N. Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en
blanco. En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno . A continuación pulsamos el botón Crear .
11
Para guardar un un documento, puedes utilizar cualquiera de las siguientes operaciones.
Hacer clic en el botón Guardar de la barra de herramientas estándar. Pulsar la combinación de teclas Ctrl + S. Hacer clic sobre el menú Archivo y elegir la opción Guardar .
Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones.
Hacer clic en el botón Guardar todo de la Barra de herramientas estándar . Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.
Al tener varios va rios documentos abiertos es fácil olvidarse de todas las modificaciones modifica ciones hechas en cada cad a uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento.
.
Unidad 1. Básico: Compagi Compaginar nar dos sesiones s esiones Aquí te explicaremos cómo conseguir tener la pantalla dividida en e n dos partes, una un a con el curso y otra con Dreamweaver CS6. 1. Abre la sesión con el curso en tu navegador habitual. habitual.
12
2. Abre la sesión de Dreamweaver CS6. 3. Pulsar con el el botón derecho sobre cualquier parte vacía de la barra de tareas, en la parte inferior de la ventana de Windows (del escritorio). Es la barra en la que se encuentra el botón Inicio. 4. Elegir la opción Mosaico ventanas en paralelo. Observa como la pantalla ha quedado dividida en dos partes, como en la figura:
5. Una vez tenemos las dos sesiones con con el tamaño tamaño adecuado, basta hacer clic clic con el ratón ratón para pasar de la una a la otra. Para volver a dejar las ventanas con su tamaño normal, hacer clic en el botón Maximizar
.
Esto va bien con monitores habituales (de 17" o más pulgadas), sobre todo si son panorámicos. Con monitores pequeños como los de las Netbooks , quizás prefieras dejar las ventanas con su tamaño normal e ir pasando de una a otra presionando las teclas
Alt + tabulador (manteniendo
pulsada Alt, presionar la tecla tabulador) o pulsando el botón correspondiente a la sesión en la barra de tareas en la última línea de la pantalla.
7.
Mi primera página Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página
web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es. Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la columna Diseño dejamos la opción por defecto:
. Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
13
Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento. Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la
página. Entonces se abrirá una ventana como la que aparece a continuación:
En Color de Fondo escribe #CCCCFF , de este modo el fondo del documento pasará a ser de color azul. Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi p rim era p ági na . Para aplicar los cambios, pulsa sobre el botón Aceptar .
14
Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando nuestras páginas, habitualmente en una subcarpeta dedicada a las imágenes. Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensas publicar la página en Internet, hay que respetar los derechos de autor de la imagen. Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos creando. Guárdala en la carpeta donde vas a guardar la página que acabas de crear.
Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar, situamos el cursor al final de la segunda línea y creamos un salto de línea (tecla
Enter).
Después nos
dirigimos al menú Insertar , opción Imagen.
En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, seleccionarla y pulsar Aceptar . Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:
Si no te aparece, puedes mostrarlo a través del menú Ventana, opción Propiedades.
15
Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades. Selecciona la primera línea de texto. En el inspector de propiedades pulsa HTML y aplica el formato Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadroFormato .
Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS a la izquierda. Mediante el inspector de propiedades en Dreamweaver CS6 accedemos tanto a las propiedades de CSS como a las propiedades de HTML.
Podemos decir que en una página web, HTML se encarga de estructurar el contenido, la información, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado. Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseño de la página Web y reducen el tamaño del archivo. Selecciona la primera línea. En Regla de destino selecciona , para aplicar el formato solo al texto seleccionado. También aplica el estilo de FuenteAri al, Helvetic a, sans-serif , color azul #009 y centra el texto con el segundo botón de la parte derecha
, tal y
como muestra la imagen siguiente:
Selecciona la segunda línea de texto, y seleccionando como antes , marca los botones
para ponerlo en negrita y cursiva respectivamente.
Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p.
16
Ahora, en Regla de destino selecciona y centra el párrafo como hemos visto hasta ahora, pulsando en
.
Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel de Propiedades a las propiedades de HTML. En el campo Vínculo , escribe la URL de la página a enlazar, como se ve en la imagen:
Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar .
Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o html. Por ejemplo, lo hemos llamado miprimerapagina.htm , y la hemos guardado en la misma carpeta que la imagen descargada. Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12. Si pulsas aquí podrás ver cómo debería haber quedado la página después de haber seguido todos los pasos anteriores. Compara esta página con la tuya, para ver si lo has hecho todo bien.
17
Evaluación 1: Conceptos básicos de Dreamweaver CS6 Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución. Si pulsas Restablecer podrás repetir la evaluación.
1. Las páginas web pueden tener la extensión HTML. a) Verdadero. b) Falso.
2. Los servidores gratuitos son recomendables para alojar páginas de empresas. a) Verdadero. b) Falso.
3. En Internet pueden existir páginas con el mismo nombre pero distinta terminación. a) Verdadero. b) Falso.
4. En Dreamweaver no pueden utilizarse combinaciones de teclas. a) Verdadero. b) Falso.
5. El botón
significa...
a) Abrir. b) Nuevo. c) Cerrar.
6. El icono
significa...
a) Abrir. b) Nuevo. c) Cerrar.
7. El icono
significa...
a) Abrir. b) Nuevo. c) Cerrar. d) Propiedades.
18
8. Si hacemos clic sobre el botón Nuevo de la barra de herramientas: a) Aparecerá directamente un nuevo documento vacío en pantalla. b) Aparecerá una nueva ventana en la que hay que elegir el tipo de documento que se desea crear. c) Creamos un nuevo código HTML dentro de nuestra página. d) Ninguna de las opciones anteriores.
9. La combinación de teclas Ctrl + O sirve para... a) Crear un nuevo documento. b) Abrir un documento existente. c) Organizar nuestros archivos. d) Guardar los archivos modificados.
10. Si se pulsa sobre el icono
...
a) Se guardarán todos los documentos modificados y los nuevos. b) Se guardarán solamente todos los nuevos documentos. c) Se guardarán solamente todos los documentos modificados. d) Se creará una copia de seguridad de nuestros archivos.
19
Unidad 2. El entorno de Dreamweaver CS6 (I) Vamos a ver cuáles son los elementos básicos de Dreamweaver CS6, la pantalla, las barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.
1.1.
La pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.
En el resto de esta unidad vamos a ir describiendo los puntos más importantes señalados en esta imagen por los números en azul del 1 al 9. 1.- Las barras. 2.- Las pestañas de documentos. 3.- La barra de estado. 4.- El panel de propiedades. 5.- Área de paneles. 6.- Paneles y ventanas. 7.- Línea inferior de pestañas. 8.- Vista diseño del documento. 9.- Vista código del documento.
20
1.2.
Las barras 1.- La barra de la aplicación.
La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior. Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo yuna caja de
búsquedas para obtener ayuda on line.
Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que ya veremos.
Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo veremos más adelante. Los menús, están agrupados en categorías.
Al hacer clic en Insertar , por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.
2.- Las pestañas de documento.
Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos. Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.
21
3.- La barra de estado.
Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo. A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha tenemos las herramientas de Selección, Mano (para desplazarse) y Zoom. Más a la derecha encontramos tres iconos para ver la página en tres tamaños de pantalla: móvil, tableta y PC escritorio.Y al final hay otros datos como el tamaño de la ventana, el tamaño de la página o su codificación. Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde el menú Ver
→
Barras de herramientas.
La barra de herramientas estándar .
La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy útil, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado ( Ctrl + G para guardar, Ctrl + C para copiar, etc.) La barra de herramientas de documento.
La contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, vistas previa en multipantalla, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.
22
La barra de representación de estilos.
Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso. Hay varias opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor está sobre un elemento. La barra de navegación con navegador . Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo, como ya veremos. Como también veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.
1.3.
Inspectores y paneles Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles (ventanas) o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales fijas. A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. A continuación vamos a ver el inspector de Propiedades y más adelante veremos el panel Insertar.
4.- El inspector de Propiedades
El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, como sucede en la imagen que puedes ver, mostrará su ubicación, dimensiones, peso, clase, etc... En otros elementos, como párrafos y estilos, este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando.
23
5.- Área de paneles. En la parte derecha de la pantalla tenemos el área o pila de paneles.
Inicialmente, el área de paneles contiene unos determinados elementos, pero podemos quitar y
poner los elementos que queramos. Para quitar un elemento del área de paneles basta hacer clic con el botón derecho sobre su nombre para que aparezca un menú con la opción Cerrar . Para añadir un elemento al área de paneles hay que ir al menú Ventana y hacer clic en el elemento que queramos añadir, si el elemento se abre en una ventana flotante, bastará arrastrarlo al área de paneles.
6.- Paneles. Una vez tenemos el áea de paneles con los elementos que más nos interesen, podemos abrirlos o desplegarlos de tres formas.
1. Abrir el panel dentro del área de paneles. Para ello primero hay que expandir el área de paneles pulsando el botón de la parte superior derecha
, a continuación, basta hacer clic en
cada panel para que se abra dentro del área de paneles. Para cerrar el panel hacer doble clic. Por ejemplo, en la siguiente imagen vemos el panel Archivos abierto dentro del área de paneles. Se pueden abrir varios paneles a la vez y ajustar sus tamaños colocando el cursor en el borde inferior y arrastrándolo.
24
2. Abrir el panel al lado del área de paneles. Para ello hay que partir del área de paneles sin expandir, y al pulsar en un panel, este se abrirá pegado al lado, como vemos en la siguiente figura.
3. Abrir como panel flotante . Para ello hay que pinchar en el título del panel y arrastar el panel fuera del área de paneles, el panel se puede colocar en cualquier zona de la pantalla, incluso fuera
25
de la pantalla de Dreamweaver. Al hacer doble clic en el título del panel, este se contrae pero sigue flotando en la misma posición. Para expandirlo, volver a hacer doble clic. En al siguiente imagen vemos el panel Archivos flotando y epandido.
Hemos visto un inspector y ahora vamos a ver un panel, el panel Insertar .
El panel Insertar . En el panel Insertar , encontramos todos los elementos que podemos encontrar en el menú Insertar , clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.
Como vemos en las imágenes, es posible configurar este panel para verlo como menú (imagen anterior), como panel flotante o como una barra de herramientas integrada en la ventana de trabajo (imagen siguiente)
26
. Personalizar el área de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este avanzado
.
7. Línea inferior de pestañas. En al parte inferior de la pantalla tenemos una línea que contiene varias pestañas (Buscar, Validación , ... )
Para abrir una pestaña basta hacer clic sobre ella, para cerrarla hacer doble clic en su título. Estas pestañas se pueden configurar de forma similar a como acabamos de ver con el área de paneles. Es decir, se pueden añadir y quitar, convertir en flotantes, etc.
Unidad 2. Avanzado: Personalizar el área de trabajo (I) Abrir y cerrar paneles Todos los paneles son accesibles a través del menú Ventanas. Para cerrar un panel, basta con hacer clic derecho sobre su pestaña y elegir Cerrar del menú.
Un comando que puede resultarnos útil es la tecla F4. Al pulsarla, todos los paneles se ocultan. Para mostrarlos, la volvemos a pulsar.
Acoplar y desacoplar paneles A la derecha (por defecto) encontramos la área o pila de paneles.
27
Algunos paneles aparecen acoplados. Eso quiere decir que se muestran como pestañas, pudiendo ver el que queramos haciendo clic, pero sin poder ver dos a la vez. Para desacoplarlos, basta con hacer clic sobre la pestaña y arrastrar.
Al mover el panel sobre distintos elementos, veremos que lo podemos acoplar en otros lugares (zonas de colocación), que aparecerán resaltados en azul (imagen anterior). Esto nos permite intercambiar paneles entre grupos acoplados o dejarlos como flotantes si los sacamos fuera. Incluso algunos paneles, como el panel Insertar , nos permiten acoplarlos en la barra de herramientas.
Cambiar el aspecto del panel insertar Es posible cambiar el aspecto del panel. Como ya hemos dicho, podemos arrastrarlo hasta la barra de menús para que tome un aspecto de fichas, como se aprecia en la siguiente imagen:
Pero también puede tener este otro aspecto, en menú:
Para alternar estos aspectos, hacemos clic derecho sobre el nombre en el menú y seleccionamos la opción Mostrar como Fichas o Mostrar como menú, según el caso.
28
Cambiar los métodos abreviados de teclado Los métodos abreviados de teclado son las combinaciones de teclas que permiten acceder a algunas opciones sin la necesidad de moverse a través de los menús. Para modificar las combinaciones de teclas hay que dirigirse al menú Edición, a la opción Métodos abreviados de
teclado. En esta nueva ventana es necesario seleccionar un comando y una de las combinaciones de la lista de Métodos abreviados, situar el cursor en el campo Pulse tecla, seguidamente pulsar la combinación de teclas deseada, y por último hacer clic sobre el botón Cambiar . Es posible que no se permita modificar las combinaciones de teclas del conjunto seleccionado, por ser combinaciones que provienen de fábrica, por lo que se pedirá confirmación para crear una copia modificable del conjunto. Hay que tener también en cuenta que no se permite asignar a un comando una combinación de teclas que ya está asignada a otro diferente.
Color de los iconos Por defecto, los iconos de Dreamweaver se muestran de color gris, y al pasar el cursor por encima, se muestran de color.
Pero como ves en la imagen anterior, podemos hacer que todos los iconos se muestren de color. Para ello no tenemos más que elegir la opción Iconos de colores del menúVer .
29
Espacios de trabajo Si adaptamos a nuestro grupo el entorno y cerramos el programa, al volver a iniciarlo se mantendrá nuestra configuración. Pero a la larga iremos haciendo cambios, abriendo paneles que necesitemos puntualmente, cerrando otros por accidente, etc. Por eso es muy útil guardar nuestra configuración y poder restaurarla cuando queremos. A esta configuración del entorno, se l e denomina Espacio de trabajo. Y podemos guardar nuestra configuración actual desde el menú Ventana
→
Diseño del espacio de trabajo
→
Nuevo
espacio de trabajo.... y darle un nombre.
Como vemos en el la imagen, www.aulaclic.es es un espacio personalizado. Además vemos que Dreamweaver trae una serie de espacios ya creados que podemos utilizar. Para cargarlo, basta con seleccionarlo en el menú. Otra opción muy interesante que encontramos en este menú es la de Restablecer 'espacio'. Esto lo volverá a cargar, muy útil cuando lo hemos desorganizado.
1.4.
Vistas de un documento Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento:
8.- La vista Diseño
La vista Diseño permite trabajar con el editor visual.
30
Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.
9.- La vista Código
La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.
El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño.
31
- La vista Dividir La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona izquierda muestra el código fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.
- La Vista en vivo La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado
final no editable. A diferencia de la vista Diseño, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con el navegador. La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeños cambios se previsualizan correctamente en el navegador. No obstante, siempre hay que comprobar la página con los principales navegadores del mercado que serán los que emplearán nuestros visitantes. De hecho, a lo largo del curso verás cómo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseño, en la vista en vivo o en el navegador. También es conveniente comprobar la página con los distintos tamaños de pantalla, teléfono móvil, tablet y PC.
- La vista Código en vivo Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir , pero sin que podamos editar el código. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente código fuente y refleja los cambios 32
dinámicamente al interactuar con la página. Si además pulsamos el botón
podremos
ver los estilos asociados a cada elemento. Por ejemplo, al colocar el cursor sobre un párrafo podemos ver sus márgenes, como se aprecia en la siguiente imagen.
1.5.
La ayuda
A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:
33
Si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1 se accede a la ayuda en línea de Adobe Community Help donde puedes buscar por temas o por búsqueda de palabras clave.
Ayuda de Business Catalyst que es un sistema de alojamiento de páginas web con funciones adicionales. Es de Adobe y hay diferentes opciones de pago al mes.
Ayuda de Spry Framework. Veremos Spry Framework a partir de la unidad 14.
Referencia abre un panel en el que encontrarás la sintaxis y descripción de las etiquetas HTML.
Acceder al Centro de soporte de Dreamweaver en la web.
Dreamweaver Exchange es un sistema para compartir extensiones.
Acceder al Foros en línea de Adobe.
Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los términos de la búsqueda y buscar, iremos a la ayuda online de Adobe.
Evaluación 2: El entorno de Dreamweaver CS6 Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución. Si pulsas Restablecer podrás repetir la evaluación.
1. Los botones para minimizar y maximizar la ventana del programa Dreamweaver se encuentran en la Barra Insertar. a) Verdadero. b) Falso.
2. Las vistas del documento pueden cambiarse a través del panel Propiedades. a) Verdadero. b) Falso.
3. La pestaña Favoritos en la barra Insertar puede personalizarse para mostrar unos u otros iconos. a) Verdadero. b) Falso.
4. Las barras de herramientas pueden ser flotantes. a) Verdadero. b) Falso.
5. La apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. a) Verdadero. b) Falso. 34
6. Los paneles e inspectores se muestran y ocultan a través del menú ... a) Insertar. b) Comandos. c) Ventana.
7. En el panel de Insertar... a) se puede cambiar las vistas del documento. b) los botones están clasificados según su categoría. c) se configuran las propiedades del objeto seleccionado. d) respuesta
8. Se puede trabajar con el editor visual mediante las vistas... a) diseño. b) código. c) vista en vivo. d) cualquiera de las anteriores.
9. El botón
sirve para...
a) pasar a la vista código. b) pasar a la vista código y diseño. c) pasar a la vista diseño. d) pasar a la vista código en vivo.
10. La vista diseño... a) es la vista predeterminada en el entorno de trabajo clásico. b) es la que se suele utilizar habitualmente. c) las dos afirmaciones anteriores son verdaderas. d) las tres afirmaciones anteriores son falsas.
35
Unidad 3. Configurar un sitio local (I) En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.
1.
Introducción Un sitio web es un conjunto de archivos y carpetas , relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet. Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto. La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc. La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html , ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre. Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.es en el navegador, éste intentaría cargar la página http://www.aulaclic.com/index.htm , por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm , y no se podría navegar por el sitio a no ser que se escribiese exactamentehttp://www.aulaclic.es/nombrepagina.htm
2.
Crear o editar un sitio web sin conexión a Internet Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta
raíz, ya es posible definir el nuevo sitio. Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo
sitio.
36
Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos. También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio...
En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos
37
Por supuesto, pueden existir varios sitios locales en un mismo ordenador, como podemos ver en la imagen. Desde esta ventana podemos realizar varias acciones. Debajo de la lista de sitios tenemos cuatro botones
que nos permiten borrar un sitio, editarlo, duplicarlo y exportarlo.
A continuación tenemos otros cuatro botones: - Importar sitio. Si previamente lo hemos exportado, normalmente, desde otro ordenador. - Importar sitio de Business Catlyst. Catalyst es un sitstema de hospedaje de pago de Adobe. - Nuevo sitio. A continuación explicaremos esta opción. - Nuevo sitio de Business Catlyst. En la parte inferior derecha tenemos el botón Listo que nos abrirá el sitio seleccionado. Tanto si se pulsa el botón Nuevo sitio, como si se elige el botón Editar , se mostrará la misma ventana en la que definir o modificar las características del sitio.
Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda. Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella. Las dos únicas opciones imprescindibles son las que encontramos en la categoría Sitio, y de momento son las únicas que cambiaremos: Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo único que empleemos de momento: Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de sitios. La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.
Estas dos características son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan. Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.
38
Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.
3.
Abrir un sitio Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.
También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable Archivos. 2.
Para practicar realiza el Ejercicio paso a paso Crear un sitio web local . En este ejercicio, configuraremos un sitio que iremos completando más adelante.
Unidad 3. Ejercicio: Crear un sitio web local Objetivo Practicar las operaciones que hay que realizar para crear un sitio sin conexión a Internet. En cada tema hay ejercicios paso a paso y ejercicios propuestos , en ambos casos es importante que realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios están diseñados para ir construyendo una página web completa y si intentas realizar un ejercicio sin haber hecho los anteriores puede que no veas un resultado muy coherente o no puedas seguir el ejercicio.
Nota: Si es la primera vez que realizas los ejercicios, recuerda que encontrarás todos los archivos necesarios en la carpeta de ejercicios . Esta carpeta se incluye con los cursos de pago, pero también puede ser descargada gratuitamente por cualquier usuario registrado en aulaClic.
Ejercicio 3.
Crea una carpeta en tu disco duro, dentro de la carpeta ejercicios donde guardar los archivos de los distintos que vayamos creando. Llámala mis_sitios .
4.
Copia a ella la carpeta cocina que encontrarás en la carpeta ejercicios del curso.
5.
Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
6.
Haz clic sobre el menú Sitio.
7.
Elige la opción Administrar sitios. Se abrirá una nueva ventana.
8.
Pulsa el botón Nuevo....
9.
Se abrirá una nueva ventana, selecciona la opción Sitio.
10. En Nombre del sitio escribe Cocina . 11. En Carpeta del sitio local busca la carpeta c o c i n a que acabas de copiar, y que se encuentra dentro de la carpeta mis_sitios . Selecciónala. Puedes hacerlo a través del botón con forma de carpeta. 12. Pulsa el botón Guardar y el sitio estará listo.
39
A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una página como la que aparece si pulsas aquí.
4.
Ver el sitio El panel Archivos (menú Ventana
→
Archivos o tecla F8) es uno de los paneles más importantes
de Dreamweaver, ya que nos da acceso a los archivos del sitio.
En
este
caso
vemos
todos
los
documentos
creados
sitio buscar.htm , paraplantilla.htm , platossemana.htm , postresemana.htm y
en
nuestro las
carpetas imagenes y varios . Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar sobre el botón
que aparece en la parte superior del panel y de la ventana.
Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. También el servidor de pruebas o las bases de datos.
40
En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a la derecha) con nuestros archivos.
Dreamweaver guarda la caché de nuestro sitio, cómo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver, automáticamente actualizará todas las referencias a ese archivo (enlaces desde otras páginas, origen de la imagen, etc). En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc, ya que Dreamweaver simplemente no encontrará la página. Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventana similar a ésta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados.
Simplemente hay que pulsar sobre el botón Actualizar , aunque esto dependerá de si tenemos configurada la opción Mensaje al actualizar vínculos si movemos archivos. Lo cual podemos establecer desde el menú Edición, opción Preferencias, categoría General.
41
5.
Subir archivos al servidor Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) deberás subir los archivos al sitio que hayas contratado o conseguido gratuitamente. Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás ir subiendo uno a uno cada archivo y creando las carpetas tú mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se
encuentra en tu carpeta del disco duro . Si no los enlaces no funcionarán correctamente, y es posible que algunas imágenes no se muestren. Para subir los archivos vía web deberás seguir las instrucciones que te proporcionará tu servidor. La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.
Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el Explorador de Windows) y, obviamente, nos es mucho más útil para subir los archivos. Uno de los programas gratuitos más utilizados es FileZilla, desde su página web podrás descargarte el programa. Una vez instalado, abre el programa y haz clic en Archivo
→
Gestor de sitios y luego en Nuevo
sitio para configurar un nuevo sitio FTP.
Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus páginas: Servidor , Usuario y Contraseña. Rellena los campos y haz clic en Conectar . Se conectará automáticamente y podrás ver una carpeta donde podrás copiar los archivos que hayas creado.
42
La parte central de la pantalla estará dividida en dos columnas. A la izquierda, la marcada como Sitio local, nos permite explorar la estructura de archivos y carpetas de nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos ubicados en el servidor FTP.
Ahora no tenemos más que arrastrar los archivos del sitio local al remoto para subirlos, o del remoto al local, para descargarlos al equipo. Verás como el programa empieza a copiar la información de tu disco a Internet. Cuando haya finalizado, sólo tendrás que introducir tu dirección de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer ...) ¡y verás el sitio en Internet! Los servidores de pago , normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta h t m l , public_html o h t t p d o c s y sube tus archivos allí.
6.
Propiedades del documento Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página . Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinación de teclas Ctrl
+ J.
Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página .
43
Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página .
Se abrirá el cuadro de diálogo siguiente:
Las propiedades están organizadas en categorías. En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades:
Fuente de página: es el tipo de letra que le aplicaremos al texto.
Tamaño: es el tamaño de la fuente que aplicaremos al texto.
Color del texto: es el color de la fuente.
Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo.
Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repita o dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.
Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador. En la categoría Apariencia (HTML), como vemos en la imagen siguiente, encontramos las
propiedades:
44
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo.
Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
Texto: es el color de la fuente.
Vínculos: es el color que mostrará el texto de los vínculos.
Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.
Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el mismo.
Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.
Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica nuestra configuración utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos últimos están cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al diseño. Por eso, te desaconsejamos su uso. En la categoría Vínculos (CSS) encontramos las propiedades:
45
Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo.
Tamaño: es el tamaño del texto de los vínculos.
Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas.
Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si unos vínculos ya han sido visitados o no.
Vínculos de sustitución: es el color del texto del vínculo cuando situamos el ratón encima del vínculo.
Vínculos activos: es el color de los vínculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado. En la categoría Encabezados (CSS) encontramos la propiedad:
Fuente de encabezado: permite establece el tipo de fuente de los encabezados.
El resto propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño y color que queremos aplicar a cada tipo de encabezado. En la categoría Título/Codificación encontramos la propiedad:
Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver En la categoría Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo.
46
Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en el navegador. Para ver cómo comprobar el tamaño de los documentos, pulsa aquí
.
Unidad 3. Avanzado: Comprobar tamaño para optimizar la carga Si las páginas tienen muchos elementos (imágenes, tablas, etc.) y son muy grandes, posiblemente tarden mucho tiempo en mostrarse totalmente en el navegador. Esto no es nada recomendable, ya que los usuarios pueden perder la paciencia, y no visitar más nuestra página. Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy elevado. Dreamweaver permite calcular automáticamente el tiempo de descarga de las páginas. Para ello hay que dirigirse al menú Edición, a la opción Preferencias.
En esta nueva ventana lo primero que hay que hacer es seleccionar una Categoría. En este caso nos interesa la de Tamaños de vantanas. En ella habrá que establecer una Velocidad de conexión. La velocidad por defecto, la velocidad es de 56,0 kbps que es la velocidad a la que se conectaban lo módems telefónicos. Actualmente, las conexiones de ADSL y cable llegan a cifras mucho mayores, de varios MB/s. No obstante, ha que establecer el valor al de la conexión media de la región de los usuarios a los que va destinada la web. Una vez establecida una velocidad de conexión, y aceptados los cambios, Dreamweaver calculará el tamaño y el tiempo de descarga de la páginas a partir de esa velocidad de conexión. Hay que tener en cuenta que el tamaño de descarga de una página no solo se calcula a partir del tamaño de esa página en disco, sino que hay que considerar también el tamaño de las imágenes que aparecen en ella, y del resto de elementos.
47
Cuando en la ventana de documento de Dreamweaver esté abierta alguna página, se mostrarán su tamaño y su tiempo de descarga en la barra de estado. Por ejemplo, esta página que estás viendo tiene un tamaño de descarga de 39K, y se presupone un tiempo de descarga de 1 segundos (para una conexión ADSL), ya que en labarra de estado de la ventana de documento aparecen estos datos entre el tamaño de la ventana de documento y el panel de propiedades, representados por 70K/10 s .
7.
Los colores Para asignar colores es posible desplegar una paleta de colores como ésta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior. Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en cualquier navegador bajo cualquier sistema operativo. Esto no quiere decir que sólo podamos utilizar estos colores. Podemos personalizarlos a través del botón
de la parte superior de la paleta.
Los colores pueden asignarse a través de los botones:
.
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la página, que vimos en este tema. El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris
, lo
que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el número hexadecimal del color en el recuadro blanco. Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul con valor #39F , el botón quedaría del siguiente modo:
.
En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos (Rojo, Verde y Azul). Para indicar la cantidad de cada uno, se utilizan números hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16). El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su intensidad total. Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del código.
48
Por tanto, podemos definir un color como # F7F0E2 donde el primer par corresponde al rojo, el segundo al azul y el último al verde. En Dreamweaver observarás muchas veces que se emplean sólo tres valores. En este caso, se interpreta que los valores de los pares están repetidos. Es decir, los colores # FF22AA y # F2A son el mismo. Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y modificar sus propiedades.
Unidad 3. Ejercicio: Crear nuevo documento y modificar sus propiedades Objetivo. Practicar las operaciones que hay que realizar para crear un nuevo documento html y configurar las propiedades de la página.
Ejercicio 1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2. Abre el menú Archivo y elige la opción Nuevo, o bien haz clic sobre el botón
de la barra
de herramientas. 3. Selecciona Página en blanco en Categoría. 4. Selecciona HTML en Tipo de página. 5. Haz clic sobre el botón Crear . 6. A partir de este momento vamos a realizar todos los ejercicios en la vista diseño. Haz clic sobre el botón Mostrar vista de diseño
.
7. Haz clic con el botón derecho del ratón sobre el documento en blanco, para abrir su menú contextual. 8. Elige la opción Propiedades de la página en el menú contextual y selecciona la categoría Apariencia (CSS). 9. En Color de texto: escribe #585858. 10. En Color de fondo: escribe #FEFEFE . 11. Haz clic en la categoría Vínculos CSS. 12. En Color de vínculos: escribe #DFA01B . 13. En Vínculos visitados: escribe #F9CA69 . 14. En Vínculos activos: escribe #FFB900 . 15. Haz clic en la categoría Título/codificación. 16. En Título, escribe Cocina . 17. Haz clic sobre el botón Aceptar .
49
18. Haz clic sobre el botón Guardar
de la barra de herramientas. Guarda el documento con el
nombre menu.htm , dentro de la carpeta mis_sitios/cocina que habrás creado en ejercicio anterior.
Ejercicios unidad 3: Configurar un sitio local En cada tema hay ejercicios paso a paso y ejercicios propuestos, en ambos casos es importante que realices los ejercicios por orden, sin saltarte ninguno. Estos ejercicios están diseñados para ir construyendo una página web completa y si intentas realizar un ejercicio sin haber hecho los anteriores puede que no veas un resultado muy coherente. Si no tienes abierto Dreamweaver, ábrelo para realizar los ejercicios planteados a continuación. A partir de este momento vamos a realizar todos los ejercicios en la vista Diseño, a no ser que se indique lo contrario. Haz clic sobre el botón Mostrar vista de diseño.
.
Ejercicio 1: Deportes. 1. Copia
la
carpeta deportes que
encontrarás
en
la
carpeta ejercicios a
la
carpeta mis_sitios (creada en los ejercicios paso a paso del tema). Crear un sitio local con el nombreDeportes , cuya carpeta raíz sea la carpeta deportes , que se encuentra dentro de la carpeta mis_sitios . 2. Abrir el documento index.htm. 3. Modificar sus propiedades para que el color de los vínculos, sea cual sea su estado, sea #000 y nunca se encuentren subrayados. 4. Asígnale la imagen fondo-logo.gif que se encuentra en la carpeta imagenes del sitio aparezca como fondo sin repetición. 5. Haz que la fuente del documento sea Verdana, Arial, sans-serif 18px , y de color #535D6F . 6. Haz que el título de la página sea Tu tienda de deportes . 7. Guardar todos los cambios y cerrar los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una página como la que aparece si pulsas aquí.
50
Ejercicio 2: Animales. 1. Copia
la
carpeta animales que
encontrarás
en
la
carpeta
de ejercicios a
la
carpeta mis_sitios , creada en el primer ejercicio paso a paso de la unidad. 2. Crear un sitio local con el nombre Animales , cuya carpeta raíz sea la carpeta animales , que se encuentra dentro de la carpeta mis_sitios , copiada en el paso anterior. 3. Abre el documento consultas.htm y modifica sus propiedades, para que su título sea Consultas. 4. Abre el documento gatos.htm y modifica sus propiedades, para que su título sea Gatos . 5. Abre el documento perros.htm y modifica sus propiedades, para que su título sea Perros. 6. Abre el documento index.htm y modifica sus propiedades, para que su título sea Inicio. 7. Guarda los cambios y cierra los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una página como la que aparece si pulsas aquí.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aquí te lo explicamos.
Ayuda ejercicios unidad 3: Configurar un sitio local
51
Ejercicio 1: Deportes Apartado 1 Copia la carpeta deportes que encontrarás en la carpeta ejercicios a la carpeta mis_sitios . Para crear un sitio nuevo accede al menú Sitio y elige Nuevo sitio.... En la nueva ventana, asegúrate de tener seleccionada la categoría Sitio. En Nombre del sitio hay que escribir Deportes . En Carpeta del sitio local hay que seleccionar la carpeta deportes , que has copiado a la carpeta mis_sitios . Por último, hay que hacer clic sobre el botón Guardar .
Apartado 2 Para abrir el documento index.htm puedes hacer doble clic sobre él en el panel Archivos. Puedes abrir el panel a través del menú Ventana, opción Archivos y seleccionar el sitio en el menú desplegable que aparece.
Apartado 3 Una vez abierto el documento en Dreamweaver, elige a la opción Propiedades de la página del menú Modificar . En la nueva ventana haz clic en la categoría Vínculos (CSS), y en los campos que aparecerán a la derecha modifica Color de vínculo, Vínculos visitados, Vínculos de sustitución y Vínculos
activos y dales el valor #000 , en el campo Estilo subrayado escoge Nunca subrayar . Apartado 4 Selecciona la categoría Apariencia (CSS) y modifica los campos a los siguientes valores: Imagen de fondo : imagenes/fondo_logo.gif ; Repetir : no-repeat.
Apartado 5 Modifica también los campos Fuente de página: Verdana, Arial, sansserif ; Tamaño: 16 y Color de texto: #535D6F . Apartado 6 En la categoría Título/Codificación escribe Tu tienda de deportes como Título. Por último, pulsa el botón Aceptar .
Apartado 7 Haz clic sobre el botón Guardar botón Cerrar
(o pulsa las teclas Ctrl + S), y después sobre el
. El botón de cerrar cambia dependiendo del diseño de vista de la página, si es
como fichas o como ventanas flotantes.
Ejercicio 2: Animales Apartado 1 Para crear un sitio nuevo accede al menú Sitio y elige Nuevo sitio.... En la nueva ventana, asegúrate de tener seleccionada la categoría Sitio En Nombre del sitio hay que escribir Animales . En Carpeta del sitio local hay que seleccionar la carpeta animales , que habrás copiado de la carpeta ejercicios a mis_sitios . Por último, hay que hacer clic sobre el botón Guardar .
Apartado 2 Para abrir el documento consultas.htm puedes hacer doble clic sobre él, en el panel Archivos . Puedes abrir el panel a través del menú Ventana, opción Archivos . Escribe Consultas en el campo Título de la barra de herramientas de documento. Si no la ves, puedes activarla desde el menú Ver
→
Barras de herramientas
Documento.
→
Apartado 3 Para abrir el documento gatos.htm puedes hacer doble clic sobre él, en el Archivos . Escribe Gatos en el campo Título de la barra de herramientas de documento.
52
Apartado 4 Para abrir el documento perros.htm puedes hacer doble clic sobre él, en el panel Archivos . Escribe Perros en el campo Título de la barra de herramientas de documento.
Apartado 5 Para abrir el documento index.htm puedes hacer doble clic sobre él, en el panel Archivos . Escribe Inicio en el campo Título de la barra de herramientas de documento.
Apartado 6 En todos los documentos, hacer clic sobre el botón Guardar botón Cerrar
, y después sobre el
.
Otra opción sería utilizar el menú Archivo
→
Guardar todo y menú Archivo
→
Cerrar todo.
Evaluación 3: Configurar un sitio local Sólo una respuesta es válida por pregunta. Haz clic en la respuesta que consideres correcta. Contesta todas las preguntas y haz clic en el botón Corregir para ver la solución. Si pulsas Restablecer podrás repetir la evaluación.
1. Es posible visualizar un sitio en el panel Archivos o en una ventana. a) Verdadero. b) Falso.
2. El botón
sirve para cambiar la vista del sitio.
a) Verdadero. b) Falso.
3. El botón
sirve para ver los archivos del Sitio.
a) Verdadero. b) Falso.
4. Si los archivos se mueven de una carpeta a otra desde fuera de Dreamweaver, las páginas se mostrarán correctamente. a) Verdadero. b) Falso.
5. No importa que las páginas sean voluminosas y ocupen mucha memoria. a) Verdadero. b) Falso.
6. Es conveniente que todas las páginas de un sitio sigan un mismo formato. a) Verdadero. b) Falso.
7. Una imagen de rastreo sirve para... a) Insertar una barra de menús.
53
b) Establecer una imagen como fondo, que no se mostrará en el navegador. c) Buscar imágenes en Internet, al pulsar sobre ella.
8. ¿Para qué sirve este otro botón
?
a) Para crear un sitio nuevo. b) Para cambiar la vista del sitio. c) Para elegir un color.
9. Los colores seguros para web son... a) Los colores que no afectan a la vista. b) Imágenes de fondo para los documentos. c) Los colores que seguro se mostrarán de la misma forma en cualquier navegador. d) Ninguna de las opciones anteriores.
10. Los colores... a) Se representan con un número hexadecimal. b) Pueden personalizarse. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
54
Unidad 4. El texto: propiedades y formato (I) A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos
CSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos.
1.
Características del texto Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades . Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS. Comenzamos viendo las propiedades HTML
Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.
Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas. Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.
55
Estilo: El botón B encierra el texto en una etiqueta , que por defecto se muestra en negrita. El botón I, lo encierra entre , que por defecto se ve en cursiva. Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso.
Lista: Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado.
Sangría: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto. Si
lo
aplicamos
sobre
texto
normal,
lo
encerrará
en
una
etiqueta , que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta. Accediendo a las propiedades CSS. Las hojas de estilo en cascada ( CSS , C ascading S tyle S heets) nos permiten formatear nuestra página y darle el diseño que queramos. Podemos cambiar desde propiedades simples, como el color de fondo, hasta cosas más vistosas, como hacer que un bloque se muestre en una posición determinada o que un elemento cambie al pasar el cursor sobre él. Profundizaremos en esto más adelante, por ser una parte fundamental en la creación de páginas web. Tenemos más posibilidades a la hora de aplicar formatos. Dreamweaver CS6 nos proporciona numerosas funciones para la creación de estilos mediante hojas de estilos en cascada .
Regla de destino: Las reglas CSS sirven para definir a qué elemento aplicamos el estilo, y cómo lo hacemos. Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema.
56
Editar regla: Mediante este botón accedemos a las opciones para la creación o modificación de estilos CSS, de la regla seleccionada.
Panel CSS: Este botón abre el panel CSS si no lo tuviéramos abierto.
Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetic a, sans-serif , el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica.
Estilo: Estos botones ponen el texto en negrita y cursiva respectivamente. Pero en este caso, generan un estilo css en línea.
Alineación: A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre un párrafo.
Tamaño: Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, porcentajes del tamaño base, etc...
Color:
57
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro. Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades.
Unidad 4. Ejercicio: Insertar texto y modificar sus propiedades Objetivo Practicar las operaciones de insertar texto y modificar sus propiedades.
Ejercicio 1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2. Si no aparece el panel Archivos , ábrelo a través del menú Ventana, opción Archivos. 3. Selecciona el sitio Cocina en el panel Archivos . Recuerda que creamos este sitio en el tema anterior . 4. Haz doble clic sobre el documento q uienes.htm , que aparece en los archivos desplegados en el panel de Archivos. Se abrirá el documento en Dreamweaver. 5. Sitúa el punto de inserción antes de la primera letra de la primera línea. 6. Escribe el texto Qu ié n es so m o s y pulsa la tecla Intro para saltar de línea. 7. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 8. Haz clic en el texto Qu ié n es so m o s . 9. En Formato, del inspector de propiedades HTML , elige Encabezado 1. Observa como ahora el texto es de mayor tamaño. 10. En la barra de herramientas de documento , haz clic sobre la caja de texto Título, y escribe Qu ié n es s o m os . 11. Haz clic sobre el botón Guardar
2.
de la barra de herramientas.
Listas Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas. Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Formato. La lista con viñetas (sin ordenar) se selecciona a través del botón numerada (ordenada) se selecciona a través del botón
, mientras que la lista
.
Ejemplo de lista numerada (ordenada):
58
1. Preparar la mochila 1. Sacar los libros de ese día 2. Introducir los libros del día siguiente 2. Ponerme el pijama 3. Lavarme los dientes 4. Poner el despertador Ejemplo de lista con viñetas (sin ordenar): o
Perro
o
Gato
o
Aves
o
Canario
Loro
Hámster
Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. A través del menú Formato, opción Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algún lugar de la lista para que se active este submenú. En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento.
Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en un a lista.
Unidad 4. Ejercicio: Convertir texto en una lista Objetivo Practicar las operaciones que hay que realizar para convertir texto en una lista desordenada.
Ejercicio 1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
59
2. Si no aparece el panel Archivos , ábrelo a través del menú Ventana, opción Archivos. 3. Selecciona el sitio Cocina en el panel Archivos . Recuerda que creamos este sitio en el tema anterior a partir de archivos de la carpeta Ejercicios . 4. Haz doble clic sobre el documento pos tresemana.htm , que aparece en los archivos desplegados en el panel Archivos . Se abrirá el documento en Dreamweaver. 5. Si no aparece el Inspector de propiedades HTML , ábrelo a través del menú Ventana, opción Propiedades. 6. Haz clic en la primera línea Postre de la semana . 7. En el desplegable Formato, elige Encabezado 1. 8. Haz clic en la segunda línea Boniatos a la mallorquina . 9. En el desplegable Formato, elige Encabezado 2. 10. Selecciona las tres líneas de texto desde 1kg de boniatos hasta Abun dante aceite . 11. Haz clic sobre el botón Lista sin ordenar
del Inspector de propiedades HTML .
12. Selecciona las líneas desde Mondar los boniatos hasta el final. 13. Haz clic sobre el botón de Lista ordenada
del inspector de propiedades.
14. Haz clic sobre la barra de herramientas, para cambiar el Título, e introduce Postre de la . semana 15. Haz clic sobre el botón Guardar
de la barra de herramientas. Si esta barra no aparece
visible, pulsa Ctrl + S.
3.
Caracteres especiales A veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á , ê , ì , ö , ç .. de forma rápida. Pero si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación. Lo mismo ocurrirá con los caracteres que no tenemos en el teclado. Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen inferior.
60
Sólo coloca el cursor del ratón sobre Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado. Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño. Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia:
4.
Estilos CSS. Introducción Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto. También permiten, como veremos más adelante, definir prácticamente cualquier propiedad de los elementos que contendrán nuestra web.
61
Podemos definir los estilos para determinadas etiquetas, como encabezados ( ,
... ),
párrafos (
), enlaces (), etc... lo que formateará todas las apariciones de esta etiqueta en el ámbito del estilo. También podemos crear clases. Algo así como definir un estilo y darle un alias. El estilo afectará a todos los elementos a los que apliquemos esa clase. Por otro lado, al crear el estilo, podemos definirlo como un estilo en línea (afectará sólo al elemento seleccionado) o crear una regla, que puede afectar a toda la página, o a todo el sitio si la guardamos en un archivo CSS. Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos. Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente.
5.
Crear un estilo personalizado Con Dreamweaver CS6, las características que apliquemos a un texto a través del Inspector de
propiedades CSS crearán automáticamente estilos CSS. Aunque tenemos que decidir a qué elementos afecta. Veámoslo:
Crear un estilo en línea. Por ejemplo, si queremos que un determinado estilo afecte a un único elemento y en un caso puntual, podemos crearlo como un estilo en línea. Esto incrustará el estilo en la propia etiqueta HTML, por lo que si alguna vez queremos modificarlo, deberemos de ir al elemento. En el Inspector de propiedades CSS , en Regla de destino, seleccionamos
línea>.
A continuación, definimos las propiedades del estilo. Insistimos que esta opción es la menos flexible y debe empelarse sólo en casos concretos, cuando el estilo no se repita, y no tenga sentido mantenerlo si borramos esa etiqueta concreta.
Crear una regla de estilo: Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, sólo a las que estén contenidas en determinados elementos o una clase.
62
Para ello, En el Inspector de propiedades CSS , en Regla de destino, seleccionamos
regla CSS>.
Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos aparecerá la siguiente ventana:
Tipo de selector: el tipo de selector es fundamental, ya que determina a qué elementos afectará el estilo. Podemos elegir entre cuatro tipos de selector:
Clase. Es el alias que tomará el estilo, y para que afecte a un elemento, debemos de aplicarle esa
clase.
El nombre de la clase va precedido por un punto, y si no lo ponemos lo hará Dreamweaver.
ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma única y concreta. Por tanto, el estilo sólo puede afectar a un elemento en cada página, al que tenga ese ID. En el selector, se escribe precedido por #.
Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.
Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta únicamente a los párrafos con la clase resaltado, pero no a los encabezados con esa clase. También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén dentro de un elemento de una lista con el id m e n u .
Nombre del selector : esta opción permite asignar un nombre al selector.
63
Depende íntimamente del tipo de selector, pues aquí introduciremos el nombre de la clase, id, etiqueta, etc... Por defecto, indicará el elemento seleccionado, pero podemos escribir el que queramos.
Definición de regla: esta opción nos permite guardar el estilo en el documento actual o en un nuevo archivo .css.
Si elegimos (Sólo este documento) la definición del estilo se guardará en la cabecera de la página, por lo que sólo estará disponible dentro de ésta. Si elegimos (Nueva hoja de estilo) se creará un archivo CSS. Podremos emplear estos estilos en cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dónde guardar el archivo css que contendrá los estilos. Normalmente en la misma carpeta que las páginas. Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aquí y los estilos se añadirán ella.
6.
Definir o editar un estilo Una vez creado, tenemos que definir las propiedades que formarán el estilo. Para ello, encontramos las opciones básicas en el Inspector de propiedades CSS.
Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se van añadiendo a la lista. Si queremos acceder a todas las propiedades, podemos pulsar en el botón Editar regla. Se abrirá la ventana Definición de regla.
64
Aquí encontramos todas las propiedades CSS agrupadas por Categorías. Las veremos más adelante. Esta ventana es la opción más cómoda nada más crear el estilo, cuando tenemos que cambiar varias propiedades. Para pequeños cambios que no podamos hacer desde el Inspector de propiedades y otras funciones extras, disponemos del panel Estilos CSS. Podemos acceder a él desde el menú Ventanas o pulsando en el botón Panel CSS.
En la parte superior vemos las propiedades que afectan al elemento, en medio las reglas aplicadas, y en la parte inferior las propiedades del estilo actual. También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qué tipo de texto se va a aplicar. Para ello accedemos al panel Estilos,hacemos clic con el botón derecho sobre el estilo y seleccionamos la opción Cambiar nombre... Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior.
Si quieres aprender más sobre el panel Estilos CSS, puedes hacerlo aquí
.
Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber explicado previamente cada una. Más adelante detallaremos qué hacen las propiedades existentes. No obstante, sabiendo un poco de inglés resultan muy intuitivas.
65
Para practicar lo que hemos visto, puedes realizar el Ejercicio paso a paso Redefinir el estilo de una etiqueta.
Unidad 4. Ejercicio: Redefinir el estilo de una etiqueta Objetivo Practicar las operaciones necesarias para crear un estilo de clase y estilos para etiquetas.
Ejercicio 1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2. Si no aparece el panel Archivos , ábrelo a través del menú Ventana, opción Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento postresemana.htm , que aparece en el panel Archivos. Se abrirá el documento en Dreamweaver. 5. Haz clic sobre cualquier texto, sin seleccionar. 6. En el Inspector de propiedades CSS , en el desplegable Fuente elige Arial,Helvetica,sans-
serif . 7. Se abrirá la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta, en Nombre de
selector elige body, y en Definición de regla deja Sólo este documento. 8. Pulsa Aceptar . Observarás como cambia toda la tipografía de la página. 9. Haz clic en la primera línea Postre de la semana . 10. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige
regla CSS>. 11. Cambia el valor de Tamaño a 140%. 12. Se abrirá la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de
selector , asegúrate de que ya pone h1. 13. Pulsa Aceptar . 14. Vamos a editar la regla. Haz clic en el botón Editar regla. 15. En la categoría Fondo , en Background-color escribe #F9CA69 . Pulsa Aceptar . 16. Haz clic en la segunda línea Boniatos a la mallorquina . 17. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige
regla CSS>. 18. Pulsa en el icono
para poner el texto en cursiva.
19. Se abrirá la ventana Nueva regla CSS. En Tipo de selector elige Etiqueta. En Nombre de
selector , asegúrate de que ya pone h2. 20. Pulsa Aceptar . 21. En el desplegable Fuente, elige Verdana, Geneva, sans-serif. 22. Haz clic en el desplegable de color e introduce #6F9DBE . 23. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige body. 24. Pulsa el botón Editar regla.
66
25. En la categoría Fondo , en background-image elige la imagen fondococina.png que encontrarás en la carpeta imagenes del sitio. Pulsa Aceptar . 26. Haz clic sobre el botón Guardar todo
de la barra de herramientas o pulsa Ctrl + S para
guardar los cambios.
Unidad 4. Avanzado: El panel Estilos CSS (I)
Veamos cómo funciona el panel Estilos CSS
.
El panel Estilos CSS Hemos visto como Dreamweaver nos permite crear estilos de una forma muy rápida y sencilla, los estilos creados de esta manera se pueden guardar en nuestro documento, pero también podemos utilizar estilos que se encuentren en hojas externas al documento. Esta particularidad es muy útil cuando diseñamos un sitio web con varias páginas ya que permite definir una sola hoja de estilos que utilizarán todas las páginas del sitio y así facilitar el diseño. Vamos a ver cómo funcionan las hojas de estilo a través del panel CSS que puede abrirse a través del menú Ventana, opción Estilos CSS. Existen otras alternativas para abrir este panel, una es pulsando Mayús + F11, o puedes hacer clic en el botón Panel CSS que aparece en el Inspector
de Propiedades CSS. El panel tiene dos modos de visualización, representados por dos botones bajo el nombre del panel. Veámoslos: El modo Actual.
Este modo nos ofrece información sobre qué estilos están afectando a la selección.
67
Se divide en tres secciones: En Resumen de la selección, se muestran las propiedades aplicadas sobre la selección, aunque estas provengan de distintas reglas. Por ejemplo, a un texto le pueden afectar las reglas generales de la página, las del párrafo, etc. La parte central muestra la sección Reglas / Acerca de, pudiendo cambiar entre ellas con los botones
.
La vista Reglas muestra las reglas que afectan a la selección. La vista Acerca de nos dice dónde está definida la propiedad seleccionada. La vista Propiedades de nos muestra las propiedades de la regla seleccionada. Aquí podemos editarlas.
Una opción muy interesante del panel es que nos permite activar/desactivar propiedades solo con hacer clic a la izquierda de su nombre. Esto nos permite comprobar rápidamente cómo afectan los estilos a nuestra página. El modo Todo .
En este modo obtenemos información sobre los estilos disponibles en el documento actual, independientemente de la selección.
68
Tenemos dos secciones: 4.
En Todas las reglas, aparece un listado de las reglas disponibles, definidas en el propio documento o en hojas de estilo enlazadas.
5.
En Propiedades de encontramos las propiedades de la regla seleccionada, pudiendo editarlas. En ambos modos, en la parte inferior encontramos las mismas opciones. Desde los botones primer
botón
podrás ordenar las propiedades de diferentes maneras. Con el mostrarás
todas
las
propiedades
ordenadas
por
categorías
(Fuente,Fondo , Bloque , Borde, etc.); también puedes mostrarlas ordenadas de la A a la Z con el segundo botón. En la esquina inferior derecha encontramos los controles que nos permiten gestionar las reglas:
De izquierda a derecha, estos controles nos sirven para adjuntar una hoja de
estilo, crear una regla, editar la regla seleccionada o borrarla.
Gestionar estilos CSS Para añadir una nueva regla de estilo desde el panel, basta con pulsar el icono
, y seguir
los pasos que vimos para definir estilos desde el Inspector de Propiedades CSS. Otra opción es ir al final de la lista de propiedades, y pulsar en Añadir propiedad.
En este caso deberemos introducir el nombre de la propiedad en la columna de la izquierda (podremos seleccionarlo de la lista) y su valor en la columna de la derecha. Para modificar un estilo ya existente, seleccionamos el estilo a modificar en la lista de estilos del panel y hacemos clic en el botón
, se abrirá la ventana donde se puede definir las
características del estilo. También podemos abrir esta ventana pulsando con el botón derecho sobre el estilo en el panel CCS, y seleccionar del menú desplegable la opción Edición. O incluso modificarlo directamente desde la lista de propiedades que se encuentra en el panel, editando la columna derecha que contiene el valor. Ten en cuenta que si modificas un estilo CSS que pertenezca a una hoja de estilos vinculada, es decir, a un archivo CSS externo, todas las páginas que contengan ese estilo serán actualizadas al instante. Para borrar un estilo de una hoja de estilos, seleccionamos el estilo en la lista de estilos del panel y hacemos clic en el botón
.
69
7.
Aplicar un estilo En el caso de haber creado una regla para una etiqueta, no será necesario aplicarla, ya que directamente afecta a todas las etiquetas de ese tipo. Por tanto lo que tendremos que aplicar serán los estilos que definamos como clases. Veamos cómo hacerlo: En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de inserción, pero sin seleccionar , el estilo se aplicará a la primera etiqueta que contenga el texto (por ejemplo el párrafo). En el inspector de Propiedades seleccionamos la opción CSS y seleccionamos el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las propiedades HTML también podemos hacerlo, utilizando el desplegable Clase.
Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra de estado, y seleccionar la clase deseada del menú Establecer clase.
70
Todas las reglas disponibles estan accesibles desde el menú Formato
→
Estilos CSS.
Observa que existe una clase llamada ninguna . Lo que hace esta opción es quitar la clase al elemento. La barra de estado nos ayudará a saber qué clase tiene aplicada un elemento. La clase aparecerá junto al nombre de la etiqueta, separada por un punto.
Para practicar puedes realizar el Ejercicio paso a paso Crear y aplicar una clase y el ejercicio paso a paso Modificar el estilo de una lista.
Unidad 4. Ejercicio: Crear y aplicar una clase Objetivo Practicar las operaciones necesarias para crear un estilo de clase y estilos para etiquetas.
Ejercicio 1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2. Si no aparece el panel Archivos , ábrelo a través del menú Ventana, opción Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento postresemana.htm , que aparece en el panel Archivos. Se abrirá el documento en Dreamweaver. 5. Haz doble clic sobre la palabra Comensales para seleccionar la palabra completa. 6. En el Inspector de propiedades CSS, pulsa el icono
para poner el texto en cursiva.
7. Se abrirá la ventana Nueva regla CSS. En Tipo de selector asegúrate de que está elegido Clase. 8. En Nombre de selector , escribe info , y en Definición de regla deja Sólo este documento . 9. Pulsa Aceptar . 10. En el selector de color, escribe #678090 . 11. Selecciona el texto Tiempo d e reparación . 12. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige info . 13. Selecciona el texto Tiempo de cocc ión , y repite el paso anterior. 14. Haz doble clic sobre Ingredientes para seleccionar el texto. 15. En el Inspector de propiedades CSS, pulsa el botón Editar regla. 16. Se abrirá la ventana Nueva regla CSS. En Tipo de selector elige Clase. En Nombre de
selector , escribe instrucciones . 17. Pulsa Aceptar . 18. En la categoría Tipo, en Font-weight, selecciona bold. 19. En Color introduce #678090 . 20. Pulsa Aceptar . 21. Haz doble clic sobre Preparación para seleccionar el texto.
71
22. En
el Inspector
de
propiedades
CSS,
en
el
desplegable Regla
de
destino elige instrucciones . 23. Haz clic sobre el botón Guardar
de la barra de herramientas o pulsa Ctrl + S para
guardar los cambios. El aspecto de la página postresemana.htm , con los cambios que hemos realizado hasta este ejercicio es el que puedes ver aquí.
Unidad 4. Ejercicio: Modificar el estilo de una lista Objetivo Practicar las operaciones necesarias para crear un estilo de clase y estilos para etiquetas.
Ejercicio 1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2. Si no aparece el panel Archivos , ábrelo a través del menú Ventana, opción Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento menu .htm , que aparece en el panel Archivos. Recuerda que este archivo lo creamos en ejercicios anteriores. Se abrirá el documento en Dreamweaver. 5. Inserta los siguientes párrafos: Qu ié ne s s o m os Plato Semana Postre Semana Tu Receta
72
6. Selecciona todos los párrafos y pulsa el botón
para convertirlo en una lista no ordenada.
Debes hacerlo desde el Inspector de propiedades HTML . 7. Haz clic sobre la etiqueta de la barra de estado para seleccionar la lista. 8. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige
regla CSS> y pulsa en Editar regla. 9. Se abrirá la ventana Nueva regla CSS. En Tipo de selector asegúrate de que está elegido Clase. 10. En Nombre de selector , escribe .menu , y en Definición de regla deja Sólo este
documento. 11. Pulsa Aceptar . 12. En la categoría Tipo, en Font-weight, selecciona bold, y en Font-size 12px . 13. En la categoría Cuadro, en Width introduce 100px . Padding , deja marcado Igual para todo e introduce 0 en Top. En Margin, desmarca Igual para todo e introduce auto enLeft y Right. 14. En la categoría Lista, en List-style-type selecciona none. 15. Pulsa Aceptar . 16. Aplícale la clase a la lista desde el desplegable Clase del Inspector de propiedades HTML. 17. Haz clic en el primer elemento de la lista. 18. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige
regla CSS> y pulsa en Editar regla. 19. Observa que aparece el selector compuesto .menu li . Es decir, el estilo afectará a los elementos de lista que estén dentro de una lista con la clase menu . Pulsa Aceptar . 20. En
la
categoría Fondo,
en background-color introduce #FFF ,
en background-
image pulsa Examinar y elige fondo-menu.png de la carpeta imagenes . 21. En Background-repeat elige repeat-x y en background-position (Y) elige bottom. 22. En la categoría Bloque , en Text-align, selecciona center . 23. En la categoría Cuadro , en Margin, desmarca Igual para todo e introduce 10 en Bottom. 24. En la categoría Borde , en Style, deja marcado Igual para todo y elige solid en Top. En Width introduce 1 . Desmarca Igual para todo en Color e introduce, de arriba a abajo,#999 , #333 , #333 , #999 . 25. Pulsa Aceptar . 26. Haz clic en el primer elemento de la lista. 27. En el Inspector de propiedades CSS, en el desplegable Regla de destino elige
regla CSS> y pulsa en Editar regla. 28. Observa que aparece el selector compuesto .menu li . Complétalo para que quede .menu (cuando el cursor esté sobre el elemento). Pulsa Aceptar . li:hover 29. En la categoría Fondo , en background-color introduce #FFEDCF y pulsa Aceptar . 30. Haz clic sobre el botón Guardar
de la barra de herramientas o pulsa Ctrl + S para
guardar los cambios.
73
8.
Hojas de estilos Exportar estilos Es frecuente que comencemos creando los estilos en la propia página, y después al ver que los necesitaremos en otras páginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite exportar estos estilos fácilmente. Utilizamos el panel Estilos CSS (Mayús + F11). En este caso nos será más útil la vista Todo. Agrupados en
