Índice UNIDAD 1 ÁREA DE TRABAJO Y GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL... 1 INTRODUCCIÓN... 1 ENTORNO DE TRABAJO... 1 ELEMENTOS DE LA VENTANA... 3 LOS PANELES... 4 INSPECTOR DE PROPIEDADES... 4 PANEL ARCHIVOS... 4 PANEL ACTIVOS... 5 PANELES INSPECTOR DE ETIQUETAS... 5 PANEL HISTORIAL... 5 PANEL CSS... 5 PANEL INSPECTOR DE CÓDIGO... 6 PANEL MARCOS... 6 DISPOSICIÓN DE PANELES... 6 MENÚS... 6 MENÚS CONTEXTUALES... 6 AYUDA... 6 METODOLOGÍA DE TRABAJO EN UNA WEB... 7 PLANIFICACIÓN DE UN SITIO WEB... 7 DEFINICIÓN DE UN SITIO WEB O SITIO LOCAL... 8 INTRODUCCIÓN... 8 CREAR UN SITIO LOCAL... 8 CREAR UN SITIO LOCAL MEDIANTE EL ASISTENTE... 8 CREAR UN SITIO LOCAL MEDIANTE UNA CARPETA EN EL DISCO DURO... 9 CÓMO SUBIR LAS PÁGINAS AL SERVIDOR... 10 CONFIGURAR EL SERVIDOR... 10 ACCESO A NUESTRO LUGAR EN EL SERVIDOR... 10 SUBIR LOS ARCHIVOS AL SERVIDOR... 10 BAJAR ARCHIVOS DESDE EL SERVIDOR... 11 TRABAJAR EN MODO EXPANDIDO... 11 GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL... 12 AÑADIR ARCHIVOS/CARPETAS AL SITIO LOCAL... 12 ESTABLECER LA PÁGINA PRINCIPAL... 12 CAMBIAR EL NOMBRE DE UN ARCHIVO... 12 BORRRAR ARCHIVOS/CARPETAS... 13 TRABAJAR CON LAS PÁGINAS... 13 COMENTARIOS SOBRE LAS CARPETAS... 13 CARPETAS DE IMÁGENES... 13 TÍTULO DE PÁGINA Y NOMBRES DE ARCHIVO... 13 GUARDAR PÁGINAS... 13 ABRIR PÁGINAS EXTERNAS... 14 VISTA PREVIA EN EL NAVEGADOR... 14 Página -I-
UNIDAD 2 CREACIÓN DE PÁGINAS: PROPIEDADES... 15 ESTABLECER EL TAMAÑO DE UNA PÁGINA... 15 INTRODUCCIÓN... 15 PROPIEDADES DE UNA PÁGINA... 15 APLICAR FONDOS DE COLOR A LA PÁGINA... 15 APLICAR FONDOS BITMAP... 15 ESCRITURA DEL TEXTO... 16 INSERTAR SALTOS DE PÁRRAFO Y DE LÍNEA... 16 INSERTAR LÍNEAS HORIZONTALES... 16 INSERTAR IMÁGENES... 16 INSERTAR VÍNCULOS... 17 RESUMEN CONCEPTOS GENERALES: EDICIÓN FORMATOS Y PANEL PROPIEDADES... 18 SUGERENCIAS EN LA CONFECCIÓN DE LA WEB... 20 GUÍA PARA COMPONER CON ESTILO... 20 UNIDAD 3 ESTILOS CSS... 21 INTRODUCCIÓN... 21 COMENTARIOS SOBRE ESTILOS... 22 ELEMENTOS DE CONTROL PARA CSS... 22 EL PANEL DE ESTILOS CSS... 22 EL MODO ACTUAL DEL PANEL CSS... 23 EL MODO TODO DEL PANEL CSS... 24 CREAR ESTILOS INTERNOS CON PROPIEDADES DE PÁGINA... 24 CREAR ESTILOS INTERNOS CON EL BOTÓN NUEVA REGLA CSS... 26 EDICIÓN DE ESTILOS CSS... 27 CREAR ESTILOS EXTERNOS CSS... 27 APLICAR UNA HOJA DE ESTILOS EXTERNA A OTRAS PÁGINAS... 29 CONVERTIR UN ESTILO CSS INTERNO EN EXTERNO... 29 ANEXO: RESUMEN SOBRE HOJAS DE ESTILO CSS... 29 ESTILOS CSS DE MUESTRA... 30 DISEÑOS PREFIJADOS... 31 UNIDAD 4 ENLACES O VÍNCULOS... 32 INTRODUCCIÓN... 32 RUTAS RELATIVAS Y ABSOLUTAS... 32 ASIGNAR UN VÍNCULO... 33 VÍNCULOS DE TEXTO... 33 CAMBIO DE ATRIBUTOS PARA LOS VÍNCULOS DE TEXTO... 34 ENLAZAR CON LA FUNCIÓN SEÑALAR ARCHIVO... 34 ENLAZAR CON LA FUNCIÓN BUSCAR ARCHIVO... 34 CREAR ENLACES DE CORREO ELECTRÓNICO... 34 CREAR MARCADORES EN EL DOCUMENTO ACTUAL... 35 CREAR MARCADORES A OTRA PÁGINA DEL SITIO LOCAL... 35 VÍNCULOS CON ARCHIVOS... 35 Página -II-
CREAR VÍNCULOS GRÁFICOS... 36 ASIGNACIÓN DE DESTINO A LOS VÍNCULOS... 36 CREAR UN ENLACE A UNA PÁGINA FUERA DEL SITIO LOCAL... 37 CREAR ENLACES A ARCHIVOS COMPRIMIDOS... 37 MAPA DE IMÁGENES... 37 EDITAR LAS ZONAS SENSIBLES... 37 CREACIÓN DE BARRAS DE NAVEGACIÓN... 38 ADMINISTRACIÓN DE LOS VÍNCULOS... 39 EDITAR VÍNCULOS EN MAPA DEL SITIO... 40 CAMBIAR UN VÍNCULO EN TODO EL SITIO... 41 UNIDAD 5 TABLAS... 42 CREAR TABLAS... 42 SELECCIONAR UNA TABLA... 42 SELECCIONAR FILAS, COLUMNAS Y CELDAS... 43 AÑADIR FILAS Y COLUMNAS... 43 ELIMINAR FILAS Y COLUMNAS... 43 DIVISIÓN Y COMBINACIÓN DE CELDAS... 43 CAMBIAR EL TAMAÑO DE FILAS, COLUMNAS CELDAS Y TABLAS... 44 CAMBIAR EL TAMAÑO DE UNA TABLA... 44 CAMBIAR EL TAMAÑO DE FILAS Y COLUMNAS... 44 IGUALAR ANCHOS DE COLUMNA DE CÓDIGO Y VISUALES... 44 AMPLIAR CELDAS DE UNA TABLA... 44 IMPORTAR DATOS A LA TABLA... 45 ORDENAR EL CONTENIDO DE LAS TABLAS... 45 TABLAS ANIDADAS... 45 TABLAS DE DISEÑO... 45 CREAR CELDAS EN LA TABLA DE DISEÑO... 45 DETALLES DE LAS TABLAS Y CELDAS... 46 CUADRÍCULA... 46 CAMBIAR EL TAMAÑO DE LAS TABLAS Y LAS CELDAS EN EL MODO DISEÑO... 46 MOVER TABLAS Y CELDAS... 46 UNIDAD 6 IMÁGENES... 48 INTRODUCCIÓN... 48 PREPARACIÓN DE LAS IMÁGENES PARA LA WEB... 49 INSERTAR IMÁGENES... 49 CAMBIAR EL TAMAÑO DE LA IMAGEN... 50 ALINEACIÓN DE IMÁGENES... 51 COLOCAR UN BORDE A LAS IMÁGENES NOMBRAR Y ETIQUETAS DE TEXTO... 52 PANEL DE ACTIVOS: GESTIÓN DE IMÁGENES... 52 MARCADORES DE POSICIÓN... 53 VISTA PREVIA DE IMÁGENES... 53 CREAR THUMBNAILS DE MODO AUTOMÁTICO: ÁLBUM DE FOTOS... 54 Página -III-
IMÁGENES DE SUSTITUCIÓN... 55 GIF S ANIMADOS... 56 UNIDAD 7 MARCOS... 57 INTRODUCCIÓN... 57 INSERCIÓN DE UN CONJUNTO DE MARCOS PREDEFINIDO... 58 INSERCIÓN MANUAL DE MARCOS... 58 SELECCIONAR MARCOS: EL PANEL MARCOS... 58 GUARDAR UN CONJUNTO DE MARCOS... 59 RESUMEN: CÓMO GUARDAR UN CONJUNTO DE MARCOS Y ESTABLECER DESTINOS... 59 PROPIEDADES DE LOS MARCOS... 60 PROPIEDADES DEL CONJUNTO DE MARCOS... 60 EJEMPLO DE MARCOS... 61 UNIDAD 8 FORMULARIOS... 62 INTRODUCCIÓN... 62 FUNCIONAMIENTO DE LOS FORMULARIOS... 62 CREAR UN FORMULARIO... 62 OBJETOS DEL FORMULARIO... 63 CAMPOS DE TEXTO DE UNA LÍNEA... 63 CAMPOS DE TEXTO DE VARIAS LÍNEAS... 64 CASILLAS DE VERIFICACIÓN... 64 BOTONES DE OPCIÓN... 64 GRUPOS DE OPCIÓN... 65 ELEMENTOS DE LISTA/MENÚ... 66 BOTONES DE FORMULARIO... 66 CAMPO DE IMAGEN... 67 CAMPO DE ARCHIVO... 67 JUEGO DE CAMPOS... 67 CAMPO OCULTO... 68 MENÚ DE SALTO... 68 GESTIÓN DE LOS FORMULARIOS... 69 CGI... 69 PRUEBA DE FORMULARIOS... 70 UNIDAD 9 ELEMENTOS DE EDICIÓN... 73 EL PANEL HISTORIAL... 73 AUTOMATIZACIÓN DE TAREAS... 73 LOS COMANDOS... 74 BUSCAR Y REEMPLAZAR... 74 BUSCAR Y REEMPLAZAR ETIQUETAS... 74 VISTAS DISEÑO, DIVIDIR Y CÓDIGO... 75 EDICIÓN DEL CÓDIGO... 75 EL SELECTOR DE ETIQUETAS... 76 INSERCIÓN Y EDICIÓN DE ETIQUETAS... 76 LA VENTANA SELECTOR DE ETIQUETAS... 76 QUICK TAG EDITOR... 76 FRAGMENTOS... 77 Página -IV-
UNIDAD 10 PLANTILLAS Y BIBLIOTECAS... 78 INTRODUCCIÓN... 78 CREAR UNA PLANTILLA DESDE CERO... 78 CREAR PLANTILLAS A PARTIR DE UN DOCUMENTO... 79 CREAR UNA PLANTILLA DESDE LA BARRA INSERTAR... 79 CREAR PÁGINAS DESDE UNA PLANTILLA... 79 DEFINICIÓN DE LAS REGIONES EDITABLES... 80 ELIMINAR REGIONES EDITABLES... 81 BIBLIOTECAS... 81 CREACIÓN DE ELEMENTOS DE BIBLIOTECA... 81 COLOCAR ELEMENTOS DE BIBLIOTECA... 82 MODIFICAR ELEMENTOS DE BIBLIOTECA... 82 RECUPERAR ELEMENTOS DE BIBLIOTECA... 82 UNIDAD 11 MULTIMEDIA... 83 INTRODUCCIÓN... 83 INSERTAR ANIMACIONES FLASH... 83 INSERTAR TEXTO FLASH... 84 INSERTAR BOTONES FLASH... 85 INSERTAR VÍDEO... 85 INCRUSTAR VÍDEO EN UNA PÁGINA WEB... 86 VÍNCULO A UN ARCHIVO DE VÍDEO... 86 FLASH VÍDEO... 86 INSERTAR SHOCKWAVE... 87 INSERTAR SONIDO... 87 INCRUSTAR AUDIO EN UNA PÁGINA WEB... 88 VÍNCULO A UN ARCHIVO DE AUDIO... 88 INSERTAR APPLET DE JAVA... 88 INSTALAR Y UTILIZAR EXTENSIONES... 89 CÓMO INSTALAR LAS EXTENSIONES... 89 UNIDAD 12 ENTORNO SPRY... 90 SPRY WIDGETS... 90 BARRA DE MENÚS DE SPRY... 91 NAVEGACIÓN POR FICHAS... 92 ACORDEÓN DE SPRY... 93 PANEL DE CONTRACCIÓN SPRY... 93 SPRY Y LOS FORMULARIOS... 94 CAMPO DE TEXTO DE VALIDACIÓN SPRY... 94 SELECCIÓN DE VALIDACIÓN SPRY... 95 ÁREA DE TEXTO DE VALIDACIÓN... 96 CASILLAS DE VERIFICACIÓN... 96 Página -V-
DREAMWEAVER Unidad 1 ÁREA DE TRABAJO Y GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL INTRODUCCIÓN Dreamweaver es un editor para el diseño de sitios Web con una interfaz gráfica que permite visualizar automáticamente el código y el diseño de la página que vamos creando. ENTORNO DE TRABAJO Cuando se inicia Dreamweaver se muestra un asistente con el que podemos crear un documento vacío y acceder a los documentos que hayamos creado recientemente así como trabajar con plantillas, hojas de estilo, marcos, etc Si seleccionamos la opción HTML en la columna central, crearemos un nuevo documento vacío en el que partiendo de cero podemos crear una página en lenguaje HTML. También disponemos de opciones para iniciar una página en lenguajes para programación de sitios dinámicos (PHP, ASP, etc..) En la columna de la izquierda, aparece un listado de los documentos guardados recientemente, pudiendo abrir cualquiera de ellos. Página - 1 -
En la columna de la derecha disponemos de una serie de plantillas predeterminadas para crear páginas con hojas de estilo CSS, páginas con marcos, páginas prediseñadas, etc..para empezar a trabajar con una página en blanco, pulsar en la opción Crear nuevo>html, veremos la ventana de trabajo en Dreamweaver con una página en blanco. Además aparecen una serie de paneles repartidos por la pantalla que podemos abrir, cerrar desde el menú Ventana o cambiar de tamaño haciendo uso del ratón. En la parte inferior aparece el panel de Propiedades y en el lateral, entre otros, el panel Archivos, CSS, etc.. en función de lo que hayamos activado en el menú Ventana. En la parte superior de la pantalla tenemos la barra de menús que da acceso a todas las opciones del programa (muchas de las cuales son accesibles desde los diferentes paneles). Debajo de la barra de menús se encuentra la barra de herramientas Insertar con los elementos comunes que podemos insertar en una página Web, como son: - Común: para insertar los elementos básicos en una página web, como los hipervínculos, tablas, imágenes, multimedia, fecha, etc.. - Diseño: para trabajar más específicamente con tablas, capas, marcos, etc.. Página - 2 -
- Formularios: para trabajar con los elementos típicos de los formularios - Datos: insertar objetos de datos y elementos dinámicos. - Spry: contiene botones para crear páginas Spry, objetos de datos y widgets de Spry - Texto: con las opciones de texto más habituales - Favoritos: permite agrupar y organizar en un lugar común los botones de la barra Insertar que utilicemos con más frecuencia. Para añadir la categoría favoritos, pulsar con el botón derecho del ratón en la barra insertar y activar la opción Personalizar favoritos. Seleccionar los elementos deseados y agregar con el botón de la flecha. Si necesitamos agrupar todas las barras Insertar para que aparezcan como fichas activar Mostrar como fichas o bien Mostrar como menú (utilizando el botón derecho del ratón). ELEMENTOS DE LA VENTANA La ventana principal de Dreamweaver contiene los siguientes elementos: Barra Estándar Barra Documento Selector de etiquetas HTML Barra de estado Tamaño de la ventana Tamaño y tiempo de carga Página - 3 -
La barra Documento (en la parte superior): que contiene los botones con las diferentes vistas del documento (código, dividir y diseño), permite añadir un título a nuestro documento, administrar archivos y realizar una vista previa en nuestro navegador entre otras opciones. Si hacemos clic con el botón derecho del ratón sobre la barra Documento, se pueden activar el resto barras comunes entre otras la barra Estándar con las opciones típicas de Windows tales como Nuevo, Abrir, Guardar, Copiar, Pegar, etc.. En la Barra de estado vemos: o cada una de las etiquetas HTML que se van generando a medida que introducimos elementos en nuestra página, pudiendo seleccionar la etiqueta y modificarla, se trata del Selector de etiquetas. o La casilla Tamaño de ventana para ver el tamaño de la ventana con el que estamos trabajando en ese momento. o La casilla Tamaño y tiempo de carga en el navegador, para tener una idea aproximada del tiempo que tardará en cargarse nuestra página. El tiempo de carga dependerá de la velocidad de conexión o el módem. LOS PANELES Para activar los distintos paneles seleccionar el menú Ventana A. INSPECTOR DE PROPIEDADES Se puede abrir mediante el menú Ventana>Propiedades o bien pulsando Control + F3. Desde este panel se pueden examinar y editar las propiedades de cada elemento que seleccionemos en una página. El contenido del inspector variará en función del elemento seleccionado. La flecha de ampliación del panel (situada en la parte inferior del inspector), se amplia para ver más propiedades. El icono nos permitirá insertar directamente etiquetas HTML en la ventana flotante que aparece. El icono de la parte derecha permite controlar los paneles. B. PANEL ARCHIVOS Se utiliza para realizar las operaciones de mantenimiento de archivos, creación de documentos HTML, organización de páginas, movimientos de archivos y creación de carpetas. También permite transferir archivos entre los sitios local y remoto, es decir, entre la carpeta que tenemos en nuestro disco duro y nuestro servidor de internet. Además en este panel se puede ver un sitio local en forma de mapa visual de iconos vinculados, para agregar nuevos archivos a un sitio y para modificar, agregar o quitar vínculos. Con la tecla F8 podemos hacer visible el panel de archivos. Página - 4 -
C. PANEL ACTIVOS Se llama Activos a los diversos elementos que se almacenan en un sitio, como pueden ser las imágenes, vídeos, animaciones Flash, colores, etc y se encuentran clasificados en categorías. Mediante las herramientas de este panel podemos, entre otras acciones, seguir la pista de los colores utilizados en las páginas, insertar imágenes y elementos Flash y gestionar la biblioteca de elementos. D. PANELES INSPECTOR DE ETIQUETAS Agrupa los paneles Atributos y Comportamientos. Mediante el panel Atributos podemos editar etiquetas HTML y objetos mediante una hoja de propiedades. El panel Comportamientos permite al usuario interactuar con la página para realizar determinadas tareas, como por ejemplo una opción de menú en una página o cuando se pasa el ratón por encima de un elemento para que muestre una imagen o reproduzca un sonido. E. PANEL HISTORIAL Muestra una lista de todas las operaciones realizadas en el documento activo desde que éste se ha creado abierto, se trata en definitiva como una grabadora que va almacenando todo lo que vamos haciendo durante nuestra sesión de trabajo. F. PANEL CSS Agrupa en principio los paneles Estilos CSS y Elementos PA. El panel de estilos CSS se utiliza para crear, editar y quitar estilos CSS (hojas de estilo en cascada), los cuales permiten generar efectos de texto y controlar la colocación de los elementos de pantalla, ajuste de márgenes, propiedades de fuentes y texto, etc... El panel Elementos PA se utiliza para el control de capas en Dreamweaver. Una capa es un elemento que puede contener cualquier tipo de objeto y es susceptible de desplazarse por cualquier parte del documento. Página - 5 -
G. PANEL INSPECTOR DE CÓDIGO Permite ver y editar el código de lo que realizamos en la página en una ventana independiente de la principal. Para abrir el panel del inspector de código ir al menú Ventana>Inspector de código o pulsar la tecla F10. H. PANEL MARCOS Muestra una representación de los marcos del documento de una manera visual pudiendo seleccionar los mismos para editar o ver sus propiedades. DISPOSICIÓN DE LOS PANELES Para desplazar los paneles a otro sitio de la pantalla ( o convertirlos flotantes), arrastrar del extremo punteado que aparece a la izquierda de la barra de título del panel y soltar en otra posición. Posición de arrastre Para desplegar un panel, basta con hacer clic en la flechita pequeña situada a la izquierda del nombre del panel y la misma acción para cerrar el panel. Cuando el panel está desplegado, a la derecha de la barra de título aparece un pequeño símbolo que da acceso a un menú contextual. Para cerrar todos los paneles a la vez y trabajar más cómodamente pulsar la tecla F4 y la misma tecla para volver a visualizarlos. MENÚS EN DREAMWEAVER MENÚS CONTEXTUALES Los menús contextuales aparecen al hacer clic con el botón derecho del ratón sobre un determinado elemento de la página y nos proporcionan una serie de comandos para llevar a cabo determinadas acciones. AYUDA EN DREAMWEAVER Pulsando la tecla F1 se accede a la ayuda principal del programa, organizada como una página Web. Además de la tecla F1, el icono que se encuentra en un panel, inspector o ventana nos muestra la ayuda para ese elemento en cuestión. Página - 6 -
METODOLOGÍA DE TRABAJO EN DREAMWEAVER PLANIFICACIÓN DE UN SITIO WEB A la hora de realizar un sitio Web debemos planificarlo antes de comenzar a añadir elementos, tenemos que tener claro el número de páginas que va a contener, qué va a aparecer en cada una de ellas, a quién está destinado, cuál es el propósito, etc.. Es preciso tener en cuenta lo siguiente: Crear el sitio en papel antes de comenzar a trabajar con Dreamweaver, indicando los temas que vamos a tratar y organizarlos en categorías. Dibujar un organigrama de la Web representando las páginas con rectángulos (ver figura) y utilizar flechas para señalar los hipervínculos. Una vez decidido el contenido de las páginas, tenemos que crearlas, para ello, escribiremos el texto, el diseño de los gráficos y los archivos de audio y vídeo necesarios.. Pensar en la audiencia que observará nuestra página. Una vez planificado el sitio Web, la mecánica de trabajo con Dreamweaver es la siguiente: 1º. Crear un nuevo sitio. 2º. Crear la(s) carpetas y archivos que van a constituir nuestro sitio Web. 3º. Configurar los diferentes elementos básicos de la página (imagen o color de fondo, colores y tipos de letra, márgenes, tamaño de la página, etc..). 4º. Introducir en cada página los elementos que deseemos (texto, imágenes, vínculos, capas, animaciones, sonidos, etc..) 5º. Continuar creando la totalidad de las página que conformen nuestro sitio Web, procurando dar un formato homogéneo a los distintos encabezados y párrafos de cada página (adjuntar estilos). 6º. Comprobar el buen funcionamiento de todos los vínculos. 7º. Comprobar la compatibilidad con diferentes navegadores. 8º. Alojar el sitio Web en el servidor al que estemos suscritos. Página - 7 -
DEFINICIÓN DE UN STIO WEB O SITIO LOCAL INTRODUCCIÓN Un documento de Dreamweamer es cada página que realizamos dentro de la ventana de trabajo. El conjunto de páginas con elementos multimedia enlazadas entre sí constituyen un Sitio web. Lo usual es disponer de una página principal conteniendo los temas o apartados principales de la web desde la que accedemos a las diferentes páginas para desarrollar cada uno de esos temas de forma individual. Es conveniente, por otra parte, con vistas a tener organizado nuestro sitio, agrupar en una sola carpeta todas las imágenes que aparecen en la diferentes páginas, agrupar en otra todos los archivos de sonido, plantillas, animaciones, etc.. El lugar en el disco duro en donde se almacenan el conjunto de documentos y archivos que conforman la totalidad de una web se le llama Sitio Local o carpeta Raíz Local. Será una réplica del Sitio remoto, que es el sitio real del servidor Web al que accederán los visitantes. La creación de un sitio local, comprendido en la carpeta raíz local dentro de la que se establece la estructura de archivos y carpetas del sitio, evitará el acceso a cualquier archivo ubicado fuera de la carpeta raíz local. Los archivos del disco duro que no se encuentren en la carpeta raíz local no estarán disponibles para el servidor remoto. Es aconsejable definir un sitio local en nuestro ordenador antes de empezar a crear páginas, gráficos y demás elementos. El nombre de una carpeta raíz es simplemente para fines de gestión de archivos (no estará disponible para los visitantes de la página) y puede ser el nombre del sitio respectivo o cualquier otro nombre que deseemos. CREAR UN SITIO LOCAL Podemos crear un sitio local de varios modos: Mediante el asistente Sitio de Dreamweaver Mediante la creación de carpetas previas en el disco duro. CREAR UN SITIO LOCAL CON EL ASISTENTE SITIO DE DREAMWEAVER 1. En la ventana principal de la aplicación de Dreamweaver seleccionar una de estas dos opciones: Menú Sitio>Nuevo sitio.. Menú Sitio>Administrador de sitios >botón Nuevo >Sitio 2. Se abre el asistente con dos fichas; Básicas y Avanzadas. Seleccionar Básicas y en esta ventana tenemos que escribir el nombre que vamos a poner al sitio (que puede coincidir con el nombre de la carpeta raíz local) y la dirección URL en donde se alojará nuestro sitio en el servidor de Internet (de momento no poner nada). Pulsar el botón Siguiente. 3. En el siguiente paso del asistente, seleccionar No deseo utilizar una tecnología de servidor, la otra opción es la que debemos seleccionar cuando se trate de páginas Web dinámicas creadas con tecnologías de servidor como PHP, ASP, etc.., pulsar el botón Siguiente. 4. En este paso podemos decidir entre Editar copias locales en mi equipo y luego cargarlas al servidor cuando estén listas (crear las páginas en nuestro PC y luego subirlas al servidor) o Editar directamente en el servidor utilizando la red local, seleccionar la primera opción. En el apartado En qué lugar del equipo desea almacenar los archivos?, por defecto asigna el nombre del sitio (paso 2) a la carpeta raíz local. Página - 8 -
Debemos especificar la carpeta del disco duro en donde almacenaremos las páginas y elementos de nuestro sitio, para ello pulsar en el botón. Si queremos poner el mismo nombre al sitio y a nuestra carpeta raíz local pulsar el botón Siguiente. 5. En el siguiente paso del asistente en el apartado Cómo conecta con su servidor remoto? Seleccionar Ninguno en el desplegable, o bien indicar cómo nos vamos a conectar con el servidor remoto para enviarle todas las páginas y archivos de nuestra Web, lo usual suele ser vía FTP, en ese caso debemos rellenar todos los datos con la información que nos facilite la empresa que gestiona el servidor. Una vez introducidos los datos, pulsar en el botón Conexión de prueba para conectar con el servidor. Pulsar el botón Siguiente. 6. En el último paso del asistente se muestra la información que hemos configurado para nuestro sitio. Pulsar el botón Completado para finalizar. En el panel de Archivos aparece el nombre del sitio creado y la carpeta raíz local en la que iremos incluyendo las páginas y elementos de nuestro sitio (comprobar si está seleccionada la opción Vista local en la casilla de la derecha). 7. Si posteriormente deseamos realizar alguna modificación, seleccionar el menú Sitio>Administrador sitios y en el cuadro de diálogo Administrador de sitios pulsar el botón Editar o bien el botón Quitar si queremos eliminar el sitio creado. Dentro de la carpeta raíz local ir creando nuevas carpetas para organizar los contenidos del sitio Web, para ello seleccionar la carpeta raíz y con el botón derecho Nueva Carpeta. Para crear una página nueva seleccionar Nuevo archivo. CREAR UN SITIO LOCAL MEDIANTE LA CREACIÓN DE LA CARPETA PREVIA EN EL DISCO DURO. 1. Dentro de la aplicación de Dreamweaver seleccionar en el panel de Archivos la pestaña Archivos y posteriormente la unidad deseada (C:,D:,etc..) 2. Con el botón derecho del ratón en la unidad seleccionada elegir Nueva carpeta y poner un nombre a la que será la carpeta raíz local (puede coincidir con el nombre que le pongamos al sitio). 3. Seleccionar el menú Sitio>Nuevo sitio, en el asistente escribir un nombre para el sitio (puede ser el mismo de la carpeta raíz u otro distinto) y pulsar el botón Siguiente. 4. En el siguiente paso seleccionar No deseo utilizar una tecnología de servidor y pulsar el botón Siguiente. 5. En este paso del asistente elegir Editar copias locales en mi equipo y luego cargarlas al servidor cuando estén listas (crear las páginas en nuestro PC y luego subirlas al servidor)y en el apartado En qué lugar del equipo desea almacenar los archivos? Pulsar en el icono botón Siguiente. y seleccionar la carpeta que hemos creado en el paso -2-, pulsar el 6. En el siguiente paso del asistente en el apartado Cómo conecta con su servidor remoto? Elegir de la lista Ninguno y pulsar el botón Siguiente. 7. Para finalizar, pulsar el botón Completado. Página - 9 -
CÓMO SUBIR LAS PÁGINAS AL SERVIDOR A. CONFIGURAR EL SERVIDOR Nuestro proveedor de internet nos deberá proporcionar los datos de conexión al servidor. Los datos necesarios para un sistema de transferencia FTP (File Transfer Protocol) son los siguientes: Servidor FTP: podría ser parecido a ftp.nombre.com, usuario.servidor.org,etc.. Directorio del servidor: es la carpeta donde se ubicarán nuestra páginas y archivos, p. ej. \html, public_html, etc.. Usuario: es el nombre de usuario que nos ha asignado el servidor, p. ej. Jetxe Contraseña: es la clave para que podamos acceder a los archivos de nuestra Web en el servidor Una vez introducidos los datos pulsar en el botón Prueba o Conexión de prueba. B. ACCESO A NUESTRO LUGAR EN EL SERVIDOR Una vez configurada la conexión al servidor, es preciso conectarnos a él para llevar los archivos y páginas a la carpeta que nos han asignado en su disco duro. Pasos: 1. En el panel Archivos pulsar en el icono Conectar al servidor remoto. 2. En el panel se puede ver la carpeta del servidor en donde podremos alojar nuestros archivos y la casilla desplegable derecha deberá mostrar la opción Vista remota. 3. Si en la casilla seleccionamos la opción Vista local, lo que veremos serán los archivos y páginas que tengamos alojados en el sitio local de nuestro disco duro. C. SUBIR LOS ARCHIVOS AL SERVIDOR Una vez tengamos nuestras páginas y archivos del sitio web creados, debemos depositarlos (subirlos) en el servidor. Pasos: 1. En el panel de Archivos seleccionar la opción Vista local para visualizar los archivos y páginas que tengamos alojados en el sitio local de nuestro disco duro. Página - 10 -
2. Pulsar el icono Colocar y, tras realizarse la conexión con el servidor y solicitarnos conformidad para colocar todo el sitio en dicho servidor, comenzará la transferencia de archivos desde el sitio local al sitio remoto. 3. Una vez finalizada la transferencia, seleccionar la opción Vista remota en la casilla de la derecha en el panel Archivo para ver todos los archivos ya ubicados en el servidor y dentro de la carpeta que hayamos asignado al definir el sitio. Esta carpeta nos la ha asignado la empresa proveedora de Internet. Las carpetas del sitio local y del sitio remoto se muestran coloreadas en verde y amarillo respectivamente. D. BAJAR LOS ARCHIVOS DESDE EL SERVIDOR Para trasladar los archivos existentes en el servidor hasta el sitio local en nuestro disco duro, hay que realizar el proceso inverso al que acabamos de ver. Pasos: 1. En la casilla de la derecha seleccionar la opción Vista remota para visualizar los archivos y páginas que tengamos alojados en el servidor. 2. Hacer clic en el icono Obtener archivos y, tras solicitar conformidad, se realizará la conexión con el servidor y comenzará la transferencia de archivos desde el servidor al sitio local. TRABAJAR EN MODO EXPANDIDO Dreamweaver utiliza un sistema parecido al de otros programas FTP, como p. ej. Cute FTP para la transferencia de archivos del ordenador local al ordenador remoto. En el panel de Archivos, pulsar en el icono Expandir/Contraer. En la parte izquierda de la pantalla tenemos una vista del ordenador remoto o servidor, en tanto que en la parte derecha observamos el contenido de nuestro sitio local. Desde esta vista podemos realizar las transferencias de archivos hacia y desde el servidor utilizando respectivamente los iconos Cargar y Obtener, pero también arrastrando los archivos de un lado al otro (de izq. a der. bajamos archivos al sitio local y de der. a izq. subimos al servidor). El panel de Archivos en modo ampliado también permite: Actualizar: las listas de elementos que aparecen en los directorios local y remoto (aunque esta operación está configurada automáticamente). Archivos del sitio: muestra la estructura de archivos de los sitios local y remoto en las dos mitades de la pantalla. Servidor de prueba: muestra la estructura de directorios del servidor de prueba y del sitio local. Sólo se utiliza para la creación de páginas dinámicas. Página - 11 -
Mapa del sitio: muestra una representación gráfica del sitio basándose en los vínculos entre las páginas. Necesitamos establecer una página como principal previamente para ver el mapa del sitio. Permite seleccionar páginas, abrir una página para editarla, añadir nuevas páginas al sitio, crear vínculos entre archivos y cambiar títulos de página. Proteger y desproteger archivos: se utilizan para proteger y desproteger archivos en el servidor. GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL AÑADIR ARCHIVOS Y/O CARPETAS AL SITIO LOCAL Una vez definido el sitio local necesitamos crear las carpetas y las páginas que contiene ese sitio. A la página principal o de Inicio de nuestro sitio le pondremos el nombre de archivo que indique nuestro proveedor de Internet, normalmente recibe alguno de estos nombres; index.html, welcome.html, default.html o home.html. Para añadir páginas a nuestro sitio existen varios métodos: A. DESDE EL PANEL DE ARCHIVOS 1. En el panel Archivos, activar la Vista local y pulsar en el icono 2. Seleccionar Archivo>Nuevo archivo o Nueva carpeta 3. Aparece un nuevo archivo con el nombre por defecto untitled.html También desde el panel Archivos Seleccionar el sitio local (CARPETA RAÍZ)creado con el botón derecho del ratón y elegir la opción Nuevo archivo o Nueva carpeta del menú contextual. B. DESDE EL MENÚ ARCHIVO DE LA APLICACIÓN DE DREAMWEAVER 1. Seleccionar menú Archivo>Nuevo 2. En la ventana Nuevo documento, elegir Página en blanco y en la columna Tipo de página: seleccionar HTML (o cualquier otro diseño predeterminado) y pulsar el botón Crear. 3. Aparece un nuevo archivo con el nombre por defecto untitled.html 4. En este caso no aparece el nuevo archivo en la ventana del sitio hasta que lo guardemos con el menú archivo>guardar como y la extensión htm o html. ESTABLECER LA PÁGINA PRINCIPAL Para indicar cuál será la página principal del resto de páginas de nuestro sitio: 1. En el panel Archivos, seleccionar con el botón derecho el nombre del archivo que deseamos convertir en página de inicio o principal. 2. Seleccionar la opción Establecer como página principal. CAMBIAR EL NOMBRE DE UN ARCHIVO Hacer dos clic despacio (no doble clic) sobre el archivo deseado o seleccionarlo con el botón derecho del ratón y en el menú contextual Edición>Cambiar nombre Página - 12 -
BORRAR ARCHIVOS Y/O CARPETAS En el panel Archivos, seleccionar individualmente o en grupo (tecla CONTROL y clic) los archivos y/o carpetas deseados. TRABAJAR CON LAS PÁGINAS Para editar los archivos de las páginas, en el panel Archivos hacer doble clic sobre el nombre del archivo deseado. Posteriormente se puede cambiar entre las páginas abiertas seleccionándolas desde las pestañas que muestra la barra de Documento. COMENTARIOS SOBRE LAS CARPETAS A la hora de crear carpetas debemos tener en cuenta que éstas se ubican siempre a partir del nivel de carpeta que tengamos seleccionado. En general, las carpetas de contenidos, Imágenes, animaciones, etc.. crearlas a partir del directorio raíz (sitio local). CARPETAS DE IMÁGENES Para almacenar las imágenes en el interior de una carpeta es preferible utilizar uno de estos métodos: En Mi PC o explorador de Windows, seleccionar el archivos(s) de la carpeta deseada y copiarlos al portapapeles(control + C ) y, posteriormente en la carpeta deseada del sitio local pegarlos(control + V) En el panel Archivos, localizar la carpeta que contiene las imágenes y copiarlas al portapapeles (Control + C). Seleccionar posteriormente nuestro sitio y pegarlas en la carpeta deseada(control + V) Menú Insertar>Imagen, seleccionar de la carpeta deseada la(s) imagen(s) y pulsar Aceptar. Posteriormente indicar la ruta de destino donde deseamos insertar las imágenes. TíTULO DE PÁGINA Y NOMBRES DE ARCHIVO Cuando se accede a una página para su edición, en la barra de Documento de DW se muestra Documento sin título, esto se debe a que cada página además de tener un nombre de archivo, debe tener un título identificativo de la página (no tiene por qué ser el mismo que el del archivo). Para asignar un título a la página, hacer clic en la casilla Título: de la barra Documento y poner un nombre. También se puede seleccionar el menú Modificar<Propiedades de la página>título codificación y poner un nombre en la casilla Título. GUARDAR PÁGINAS Es recomendable guardar el trabajo que realicemos en las páginas mediante el menú Archivo>Guardar o Guardar como Siempre que modifiquemos un documento y no esté guardado aparece un asterisco (*) junto al nombre del archivo, que desaparece al guardarlo. Página - 13 -
Si hemos creado varias páginas sin tener un sitio local definido: 1. Crear primero el sitio local (ver CREAR UN SITIO LOCAL) 2. Abrir una a una las páginas y seleccionar menú Archivo>Guardar como e ir guardando cada una de las páginas en la capeta del sitio local. 3. Tras solicitarnos autorización para actualizar los vínculos el panel Archivos reflejará los cambios automáticamente. ABRIR PÁGINAS EXTERNAS Se pueden aprovechar otras páginas que tengamos almacenadas en el disco, que pueden proceder de internet y las hemos almacenado en un disco o simplemente páginas de otro sitio que queremos utilizar en el nuevo sitio. Es imprescindible para poder abrir una página Web externa en DW que esté guardada previamente en disco. Para guardar una página de internet en disco seleccionar en el menú Archivo>Guardar y en la casilla Tipo de archivo: Página Web completa Pasos: 1. Abrir el sitio local 2. Menú Archivo>Abrir y seleccionar de la unidad correspondiente el archivo deseado. 3. Una vez cargada la página, podemos modificarla, eliminar información, seleccionar elementos para copiarlos en otra página, ver su código HTML, etc.. 4. Para integrar la página en nuestro sitio local, seleccionar menú Archivo>Guardar como, seleccionar nuestra carpeta del sitio local o bien pulsar el botón Raíz del sitio y asignar un nombre de archivo. VISTA PREVIA EN EL NAVEGADOR Para comprobar cómo se verán nuestras páginas en uno o varios navegadores verificar el correcto funcionamiento de las mismas, podemos hacer uso de la vista previa. 1º. Definir los diferentes navegadores, para ello en el menú Archivo>Vista previa en el navegador>editar lista de navegadores para ver la ventana Preferencias. 2º. Pulsar el botón + para añadir nuevos navegadores e indicar su ubicación en el disco duro estableciendo si queremos que actúen como navegador principal o secundario. 3º. Una vez definidos los navegadores, para ver las páginas pulsar la tecla F12 Página - 14 -
Unidad 2 CREACIÓN DE PÁGINAS: PROPIEDADES En esta unidad vamos a ver los elementos básicos para crear páginas sencillas utilizando formatos y colores. ESTABLECER EL TAMAÑO DE LA PÁGINA INTRODUCCIÓN Los monitores tienen mucho en común con las TV. En el caso de los monitores CRT están formados por un tubo de rayos catódico también llamados tubo de vacío (dentro del tubo es casi un vacío perfecto). Los de color se obtienen mediante 3 cañones de electrones. Estos bombardean la placa de fósforo en la parte interior de la pantalla y liberan puntitos de luz a color rojo, verde y azul (RGB) llamados Píxel. La resolución se caracteriza por los píxel representados en horizontal y vertical un ejemplo es la resolución 800X600 osea 800 píxels en horizontal y 600 píxels en vertical. A más resolución más píxels representados. A la hora de crear páginas Web conviene utilizar un tamaño adecuado para que puedan verse correctamente en las resoluciones de monitor más corrientes. En este sentido la resolución óptima para la gran mayoría de monitores sería de 800 x 600 píxeles. Configurar primero el tamaño de la página antes de comenzar, para ello: 1. Antes de seleccionar el tamaño debemos visualizar el área de trabajo en modo no expandido 2. Seleccionar en la barra de estado de la ventana del documento la flecha desplegable 3. Activar la opción Editar tamaños > 800 x 600 Maximizado (opción recomendada) o 1024 x 768 PROPIEDADES DE UNA PÁGINA Para establecer las propiedades generales de una página podemos utilizar alguno de estos métodos: Botón Propiedades de página en el panel Propiedades Menú Modificar>Propiedades de página En la ventana del documento hacer clic con el botón derecho y seleccionar Propiedades de página. Veremos el cuadro de diálogo Propiedades de la página, donde se pueden aplicar en las distintas categorías, las fuentes y los encabezados, colores para los vínculos, los fondos, etc.. APLICAR FONDOS DE COLOR SÓLIDO A LA PÁGINA Botón Propiedades de página>color de fondo>seleccionar la paleta de colores APLICAR FONDOS BITMAP Las imágenes deberán estar en formato GIF, JPEG o PNG. Si la imagen es más grande que la resolución empleada no cabrá y si es más pequeña se repetirá como un mosaico en toda la ventana. Página - 15 -
Para aplicar una imagen de fondo, botón Propiedades de página>imagen de fondo>seleccionar la imagen: De la carpeta imagen del sitio De otra carpeta, en ese caso guardarla en el directorio Imagen del sitio ESCRITURA DEL TEXTO Se puede teclear directamente el texto o copiar texto al portapapeles de otra aplicación con las opciones Copiar o Cortar y Pegar posteriormente en DW en la posición donde se encuentre el cursor. Aunque forma de controlar los atributos de texto es similar a la de los procesadores de texto se utiliza el panel Propiedades, menú Texto o la ficha Texto de la barra Insertar. INSERTAR SALTOS DE PÁRRAFO Y DE LÍNEA Para insertar un salto de párrafo pulsar la tecla Intro. Para bajar sólo una línea cada vez, mantener la tecla de Mayúscula pulsada y tecla Intro. Para añadir espacios en blanco pulsar las teclas Control + Mayúscula + Barra espaciadora INSERTAR LÍNEAS HORIZONTALES 1. Ir al menú Insertar>HTML>Regla horizontal 2. Seleccionar la línea y modificar sus atributos(ancho, alto, alineación,etc..) en el panel Propiedades La inserción de líneas horizontales provoca el desplazamiento hacia abajo del texto que se encuentre por debajo de la línea (equivalente a la tecla Intro) ACTIVIDAD 1 Crear un sitio con el nombre Aula_1 que contenga cuatro páginas llamadas home.html, derecho.html. protocolo.html y ofimática.html. Añadir al sitio una carpeta llamada Images para alojar tres imágenes descargadas previamente de nuestro equipo. Establecer la página de home.html como documento principal y asignarle de título Prácticas de Secretariado. Añadir al resto de páginas y establecer un título para cada una de ellas además de un color de fondo. Posteriormente guardar todas las páginas. INSERTAR IMÁGENES La unidad 4 correspondiente al tratamiento de las imágenes, trata en profundidad el tema. Vamos a ver aspectos generales de cómo se inserta una imagen en un documento. Para ello: 1. Situar el cursor en la posición deseada. 2. Seleccionar menú Insertar>Imagen pulsar el icono en la barra Insertar>Común 3. En la ventana que aparece elegir la ruta y el nombre de archivo en donde se encuentra la imagen a colocar. Si el archivo no está ubicado en el sitio local, veremos una serie de ventanas que nos permitirán copiar el archivo en el lugar que deseemos de nuestro sitio local (normalmente en la carpeta destinada a las imágenes) Página - 16 -
INSERTAR VÍNCULOS La unidad 3 correspondiente al tratamiento de las imágenes, trata en profundidad el tema. Vamos a ver algunos aspectos de los vínculos. Para ello: Un vínculo es un enlace entre dos lugares de tal manera que al hacer clic en un elemento de la página (texto o imagen) se acceda automáticamente a otro lugar de la página, a otra página de nuestro sitio, a una imagen ampliada, una dirección de correo, etc.. 1. Seleccionar el texto al que queremos aplicar el vínculo. 2. En el panel Propiedades aparece una casilla llamada Vínculo en la que escribiremos la ruta que contiene el documento al que accederemos o bien habiendo clic en la carpeta ACTIVIDAD 2. También podemos seleccionar un texto o imagen, pulsar la tecla Mayúscula y arrastrar hacia un archivo en el panel Archivos. Asimismo se puede seleccionar el texto o imagen y arrastrar el icono (que aparece a la derecha de la casilla Vínculo) hacia el archivo deseado en el panel Archivos. Seleccionar el sitio Aula_3 en el panel de archivos y hacer doble clic en el archivo home.html. Introducir el texto Secretariado de Dirección BILBAO y poner un tamaño de 24, alinear al centro y ponerlo en negrita. En el panel Propiedades seleccionar un color de fondo cakee y para el texto color marrón. Introducir el texto Esta es una práctica de documento web de la escuela de Secretariado. En este ejercicio practicaremos con los formatos, imágenes y vínculos. En la unidad 2 estudiaremos los estilos. Para ello debajo de todas las páginas hemos insertado palabras que serán futuros enlaces. Seleccionar este párrafo y establecer lo siguiente: o Fuente (panel Propiedades); Verdana a 14 píxeles en negrita y cursiva o Color del texto blanco y alineado a la izquierda Abrir las otras páginas y copiar en ellas el texto Secretariado de Dirección y añadir a su derecha el nombre de la materia. En la parte inferior de cada página escribir las materias de las otras páginas, posteriormente guardar todo. Insertar una línea horizontal en todas las páginas debajo de cada encabezado Guardar en la carpeta images, tres fotos del Gugenheim, Puppie y la vista de Bilbao desde Artxanda e insertarlas en las páginas correspondientes justo debajo de la línea horizontal. Asignar a todas las imágenes : o un ancho y alto de 100 x 100 o alinear la imagen a la izquierda o introducir en cada imagen un comentario sobre la misma de un par de líneas Abrir el archivo home.html y crear enlaces para acceder a las páginas Puppie, Vista desde Artxanda y Guggenheim. A su vez desde cada página crear los respectivos enlaces. En la dirección http://www.pekegifs.com/webmaster/generartexto3d.htm generar un botón con la palabra Principal (seguir las instrucciones del enlace) para ir siempre a la página de inicio (home.html). En cada una de las páginas añadir el botón creado para que enlace con la página principal (se puede cinsertar la imagen con el vínculo a la página deseada y copiarlo al resto de páginas) Insertar una imagen gif animada de http://www.gifanimados.com/email/buzonesrojos/ en la parte inferior del archivo home.html,que sirva de vínculo para que nos permita abrir la aplicación de correo electrónico y se muestre la dirección del destinatario ya introducida (poned vuestra dirección de correo). Página - 17 -
Por último, añadir el siguiente texto en el archivo home.html: made by jonan y comprobar si funcionan todos los vínculos utilizando para ello la opción de Mapa del sitio. RESUMEN CONCEPTOS GENERALES: EDICIÓN, FORMATOS Y PANEL PROPIEDADES Para introducir texto, colocar el cursor en el lugar deseado y escribir, el texto se muestra con los atributos que tenga por defecto. Para insertar un salto de dos líneas, pulsar tecla INTRO Para insertar un salto de una línea, pulsar tecla MAYÚSCULA + INTRO Para separar las palabras con más de un espacio pulsar la combinación de teclas CONTROL+MAYÚSCULA+Barra espaciadora Todos los cambios de atributos que realicemos se aplicarán al texto que se encuentre seleccionado. Para cambiar el tamaño, el formato y el tipo de fuente, utilizar el panel Propiedades. También podemos hacer uso del menú Insertar>HTML>Caracteres especiales y del menú Texto. Color fuente Alineación Listas y Sangría Para añadir nuevas fuentes, en la casilla Fuente del panel Propiedades seleccionar Editar lista de fuentes : Si queremos agregar fuentes a una combinación, seleccionarla en el recuadro Lista de fuentes, elegir posteriormente la fuente a añadir en el recuadro Fuentes disponibles y pulsar en el icono para incorporarla. Para eliminar una fuente de una combinación seleccionar ésta en el recuadro Lista de fuentes, elegir la fuente a eliminar en el recuadro Fuentes elegidas y pulsar el icono. Para añadir una combinación de fuentes, en el recuadro Lista de fuentes, seleccionar la opción (Añadir fuentes de la lista siguiente), en el recuadro Fuentes disponibles seleccionar la fuente a agregar a la nueva combinación y pulsar para incorporarla. Repetir ésta última operación para ir incorporando fuentes al grupo. Para crear o eliminar nuevos grupos hacer clic en los botones Página - 18 -
Para insertar caracteres especiales, situar el cursor en la posición deseada y elegir en el menú Insertar>HTML>Caracteres especiales o bien hacer clic en el último icono a la derecha de la barra Insertar>Texto Podemos crear Listas de texto numeradas (ordenadas) y listas de texto con viñetas (sin ordenar). Se pueden crear a partir de texto previamente editado o sin editar. Para crear listas desde cero: 1. Situar el cursor donde deseemos comenzar la lista 2. En el panel Propiedades hacer clic en el icono Lista sin ordenar o bien en el icono de Lista ordenada. También se pueden utilizar los iconos del menú Insertar>Texto 3. Cada vez que terminemos una línea, pulsar Intro y para finalizar la lista pulsar Intro dos veces seguidas. Para crear listas a partir de párrafos ya escritos, basta con seleccionar la totalidad de los párrafos (elementos de texto independientes entre sí) y pulsar en uno de los iconos Para crear Listas de definición (para definir un término) utilizar los iconos de la barra Insertar>Texto. Si seleccionamos esta opción: o Pulsar el icono dl y pulsar Intro. o Pulsar el icono dt y escribir el texto a definir, el texto saltará a la segunda línea pero con una sangría izquierda para indicar que esa segunda línea describe lo que se ha dicho en la primera. Tras escribir esta segunda línea y volver a pulsar Intro, el cursor regresará a su sangría normal. Para crear Listas anidadas (combinación de listas), crear primero una lista sin ordenar o una lista ordenada y posteriormente aplicar a la línea o líneas deseadas una sangría de texto mediante el icono. El párrafo o párrafos seleccionados se desplazarán a la derecha y mostrarán viñetas diferentes. Utilizar el icono para adaptar la numeración en el caso de las listas ordenadas. Para establecer las propiedades de las listas: 1. Colocar el cursor sobre la lista. Si lo hacemos sobre los puntos principales, las modificaciones afectarán a todos estos; si lo hacemos sobre los puntos secundarios, las modificaciones solo afectarán a ese grupo secundario. 2. Seleccionar menú Texto>Lista >Propiedades o bien pulsar el botón del panel Propiedades. 3. En las casillas Tipo de lista y Estilo ajustar el formato y estilo de lista deseado. 4. En la casilla Iniciar recuento podemos introducir el valor que deberá tener una lista que no comience por el número 1 5. Si queremos cambiar únicamente algunos elementos de la lista, situar el cursor sobre dicho elemento y actuar igual que antes pero sobre las opciones de la sección Elemento de lista. Para cambiar la fuente predeterminada que aparece cuando comenzamos a escribir en DW: 1. Menú Edición>Preferencias>Fuentes, en la casilla Fuente proporcional, seleccionar la fuente que el programa utilizará para mostrar texto normal. El tamaño también se puede ajustar Para llevar a cabo la corrección ortográfica de un documento utilizar el menú Texto>Ortografía (proceder como lo haríamos en un procesador de texto). Página - 19 -
Para buscar un texto en un documento y reemplazarlo por otro ir al menú Edición>Buscar y reemplazar SUGERENCIAS EN LA CONFECCIÓN DE LA WEB Presentar una estructura bien organizada Diseñar la web en papel y hacer un mapa de distribución de las páginas uniendo con líneas cada vínculo y su página correspondiente. Recopilar toda la información que vayamos a colocar en la página (documentos de texto, imágenes, símbolos, direcciones URL de enlaces a otras webs, archivos disponibles, etc.) Pensar el nombre que vamos a dar a cada página y archivo y apuntarlo. Decidir si vamos a trabajar con tablas, plantillas, animaciones, capas, imágenes mapeadas, sonidos, animaciones flash Navegar por distintos webs para ir recopilando ideas. Despertar el interés con el tema y la apariencia. Incluir el acceso a todos los temas desde la página de bienvenida, o bien, si el tema de la web es amplio, crear una página inicial tipo periódico por medio de una tabla y desde la misma página a modo de índice acceder al resto de documentos del sitio. GUÍA PARA COMPONER CON ESTILO Utilizar 2 o 3 fuentes distintas en cada página Líneas de texto cortas Altura de texto de 10 a 12 píxeles Alinear los textos por la izquierda Dividir en varias páginas el contenido de la web (las páginas con mucha información tardan más en cargarse) No utilizar texto intermitente y no abusar de texto en mayúsculas Utilizar iconos o símbolos que puedan sustituir un texto escrito y emplearel mismo estilo para la creación de iconos. Un icono que enlace con la página principal es de gran ayuda para las webs de muchas páginas. Utilizar pocos iconos animados (ralentizan la carga de la página) Utilizar una barra de navegación o botones idénticos para todas las páginas. No utilizar imágenes grandes es preferible utilizar miniaturas o tuhnbnails que luego podamos ampliar Utilizar colores pastel o neutros para el fondo. El fondo debe ser menos importante que el contenido de la página y no debe dificultar la lectura del texto. La descripción de los enlaces debe ser clara (evitar el clásico Pinche aquí ) Posibilitar la comunicación con los visitantes a través de email o formularios para mejorar el trabajo Avisar a los usuarios de la fecha de la última actualización Si creamos enlaces a otras webs distintas, permitir la opción de que se carguen en una ventana nueva del navegador Página - 20 -
Unidad 3 ESTILOS CSS INTRODUCCIÓN Un estilo es un grupo de atributos de formato texto identificados por un nombre. El término en cascada se refiere a la secuencia ordenada de estilos. En DW cada estilo recibe inicialmente el nombre Estilo y un número. DreamWeaver trabaja por defecto con hojas de estilo en cascada (CSS) y determinadas combinaciones de atributos que aplicamos al texto las convierte en un estilo CSS que luego podemos utilizar para aplicárselo directamente de una sola vez a otro texto. Otros tipos de formato de texto como, p. ej., los encabezados que encontramos en el desplegable de la casilla Formato del panel Propiedades, no fuerzan la creación de un estilo CSS y lo que hacen es aplicar lo que se llama una etiqueta HTML. DreamWeaver trabaja combinando estilos CSS y estilos HTML, para especificar cómo queremos trabajar ir al menú Edición>Preferencias, activar la categoría General y seleccionar la casilla de Utilizar CSS en lugar de etiquetas HTML. El uso de estilos CSS permite entre otras cosas cambiar a la vez los atributos (propiedades) de texto que compartan un mismo estilo. Cada vez que se crea una combinación nueva de atributos de texto en una página, el programa crea un estilo nuevo que aparece en la casilla Estilos del panel Propiedades. PRÁCTICA CON ESTILOS SENCILLOS Para ver un ejemplo de estilos básicos realizar la siguiente práctica: 1. Escribir tres párrafos y aplicarles fuentes, tamaños, negritas y colores diferentes. 2. Comprobar los estilos creados en la casilla Estilos y aplicarlos a otros textos del documento. Los estilos se aplican a la totalidad de un párrafo, palabra o fragmento, no es necesario seleccionarlo todo. No obstante podemos aplicar estilos a palabras sueltas o fragmentos de párrafos 3. En el panel de estilos (activar en menú Ventana<Estilos CSS) ver cómo quedan configurados los estilos (pulsar en el icono +) y en las propiedades realizar algún cambio. Si realizamos alguna modificación en un estilo aplicado (formato, fuente, etc.) automáticamente se actualizan el resto de párrafos con ese estilo Página - 21 -