OBJETIVO: Introducción al editor de páginas web Macromedia Dreamweaver.

Transcripción

1 SEMINARIO DIOCESANO DE CRISTO SACERDOTE TECNOLOGIA EN INFORMATICA GRADO: 11 TEMA: INTRODUCCIÓN A MACROMEDIA DREAMWEAVER OBJETIVO: Introducción al editor de páginas web Macromedia Dreamweaver. 1 Qué es Macromedia Dreamweaver? Macromedia Dreamweaver es un software que me permite crear páginas web de gran calidad, además este software me permite agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. De acuerdo al sitio web que desee crear puedo crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, y otros elementos de una forma muy sencilla. Macromedia Dreamweaver cuenta con su propio cliente FTP con el objetivo de actualizar el sitio web en línea. 2 Qué es HTML? HTML significa HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje utilizado para la construcción de páginas web. 3 Entorno de trabajo de Macromedia Dreamweaver La ventana de trabajo de Macromedia Dreamweaver está compuesta por los siguientes elementos: Barra de Titulo Contiene el nombre del programa y del archivo en el cual se está trabajando, además nos proporcionara la ubicación del archivo que tenemos abierto en el momento. Barra de Menús Alberga todas las operaciones del programa en menús desplegables. Al hacer clic en el menú Archivo podremos observar todas las operaciones que podremos hacer, como por ejemplo: Abrir, Guardar, imprimir y otras acciones más. Barra estándar Por medio de esta barra podre crear, abrir, guardar, cortar, copiar, pegar y deshacer o rehacer, estas operaciones son básicas en la mayoría de aplicaciones. Barra de Herramientas de documento

2 Contiene botones que permiten alternar entre diferentes vistas del documento rápidamente, además la barra contiene algunos comandos comunes relacionados con la selección de vistas y del estado del documento. Los elementos del menú opciones Opciones cambian en función de la vista que seleccione. Barra de Estado Esta barra nos indica en todo momento en que etiqueta nos encontramos, además nos permitirá realizar otras acciones como por ejemplo ajustar el zoom. 3.1 Panel de propiedades Este panel nos mostrara las propiedades del elemento que tengamos seleccionado y nos permitirá modificarlo, como por ejemplo el tipo de fuente, tamaño de la fuente, formato de la fuente y alineación. 4 ACCEDIENDO AL PROGRAMA Para ingresar al programa haz lo siguiente: Inicio Programas Macromedia Macromedia Dreamweaver MX 2004 Una vez hecho los pasos anteriormente mencionados observaras lo siguiente: Para crear una nueva página haz clic en HTML.

3 Luego tendrás lo siguiente: 5 Configurar un sitio local en Macromedia Dreamweaver 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, las hojas de estilo, 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. 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. Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.

4 5.1 Pasos para crear un sitio web sin conexión a Internet Primero deberás ingresar al explorador de Windows y determinar el sitio donde crearas la siguiente estructura de directorios (ver imagen) con el propósito de albergar toda la información pertinente y de manera ordenada de tu sitio web. Posteriormente ingrese a Dreamweaver y desarrolle los siguientes pasos: Haga clic en el menú Sitio luego clic en la opción Administrar sitios. Posteriormente aparecerá una ventana llamada Administrar sitios (ver imagen) Ahora haga clic en el botón Nuevo y luego clic sobre la opción sitio. Posteriormente debe aparecer una ventana que le indicara paso a paso como configurar su sitio. En la ventana que aparece se muestran dos pestañas las cuales son: Básica y Avanzada. Para esta práctica haga clic en Avanzadas. En la opción Nombre de Sitio asigne un nombre a su sitio web, en este caso coloque website. En la opción Carpeta raíz local ubique la unidad y el directorio donde almacenara su sitio web, en este caso busque la unidad o sitio donde creo los directorios. En la opción Carpeta predeterminada de imágenes ubique el subdirectorio de imágenes y selecciónelo. Luego haga clic en la opción que dice Mapa de disposición del sitio (es aquí donde se especifica la página principal del sitio, para ello ubique el directorio el cual almacenara el archivo llamado index.htm Para terminar haga clic en aceptar. Posteriormente podrá observar en el Panel llamado Archivos, la configuración de su sitio local. PARA COMPLEMENTAR ESTE TEMA PODRA BUSCAR INFORMACIÓN EN LA AYUDA DE DREAMWEAVER O EN INTERNET.

5 ACTIVIDAD De origen a un sitio web deberá quedar guardado en su sitio local. Desarrolle 6 páginas, la pagina principal se debe llamar index.htm