C L A S E 1 I N T R O D U C C I Ó N Dreamweaver es un editor visual profesional para la creación y administración de sitios y páginas Web. Con Dreamweaver resulta fácil crear y editar páginas compatibles con cualquier explorador y plataforma. Dreamweaver proporciona herramientas avanzadas de diseño y formateo, y facilita el uso de funciones de HTML dinámico, como capas y comportamientos animados, sin necesidad de escribir en el código. El establecimiento de destino de exploradores comprueba el trabajo para averiguar si hay problemas potenciales en las plataformas y los exploradores más habituales. Dreamweaver se puede personalizar totalmente. Puede crear sus propios objetos y comandos, modificar menús y métodos abreviados de teclado, e incluso escribir código JavaScript para ampliar las posibilidades que ofrece Dreamweaver con nuevos comportamientos e inspectores de propiedades. Entorno de trabajo Pantalla principal: Barra de herramientas de documento. T ít ulo de la página 1
Barra de estado DISEÑO WEB La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>). Vistas de un documento La Vista Diseño La Vista Código La Vista Código y Diseño La vista Diseño permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente 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. La vista Código y Diseño permite dividir la ventana en dos zonas. La zona superior muestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra. Crear o editar un sitio web sin conexión a internet Define Un Sitio nuevo: A) Debes crear una carpeta nueva en la computadora que se llame por ejemplo "misitio", en ella guardarás todos los archivos referentes al sitio web, es importante que nada ajeno esté en esa carpeta. B) Dentro de carpeta \misitio crea otra carpeta que se llame \images, en ella deberás colocar todas las imágenes que uses en tu página, así podrás localizarlas rápidamente. C) El siguiente paso es crear el sitio desde el programa que forma parte del editor. 1. Hacer clic en el menú sitio nuevo sitio 2. En la ventana que aparece debemos completar algunos datos, nombre del sitio y dirección en internet si ya nos hemos registrado en algún sitio. 3. siguiente paso: Desea trabajar con una tecnología de servidor como asp.net, asp, jsp o php? No, no deseo utilizar una tecnología de servidor. 2
4. Cómo desea trabajar con los archivos durante la etapa de desarrollo? Editar copias locales en mi equipo y luego cargarlas el servidor cuando estén listas Editar directamente en el servidor utilizando la red local En que lugar del equipo desea almacenar los archivos? 5. En la siguiente ventana Como conecta con su servidor remoto? En este paso no nos conectaremos al servidor, mas adelante cuando subiremos nuestro sitio detallaremos en más profundidad todos los elementos. Propiedades del texto CARACTERÍSTICAS DEL TEXTO Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a través del menú Texto. Formato: Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o pre formateado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato pre formateado 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 pre formateado se respetará que hayan varios espacios en lugar de solo uno. 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, Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica. 3
Tamaño: Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, centímetros, etc... Color: 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. Estilo: Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva. A través del menú Texto también se puede, entre otras cosas, 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. Alinear: 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. Lista: Estos botones permiten crear listas con viñetas o listas numeradas. 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ú Texto. La lista con viñetas (desordenada) se selecciona a través del botón se selecciona a través del botón., mientras que la lista numerada (ordenada) Ejemplo de lista numerada (ordenada): 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 (desordenada): Perro Gato Aves o Canario o Loro Hámster 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. 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 4
Caracteres especiales A veces necesitarás introducir caracteres especiales en tus páginas., podemos incluir caracteres como á, ê, ì, ö, ç.. de forma rápida por 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 en el menú Insertar > HTML > Caracteres especiales, o en la pestaña Texto. 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. DISEÑO WEB Práctico Crear el sito desde el asistente y en un documento nuevo realizar la siguientes páginas. (adobe dremaweaver, una página en construcción, un curriculum digital) 5