COLEGIO JORGE ISAACS

Transcripción

1 COLEGIO JORGE ISAACS EVALUACION DE RECUPERACION DE LOGROS DOCENTE: MARIA ANGELICA MENDOZA ASIGNATURA: SISTEMAS GRADO: 8ª-8b ESTUDIANTE: VALOR DEL MES:HONESTIDAD GUIA No: 1 FECHA DE INICIO: JULIO 16 DE 2014 FECHA FINALIZACIÓN: JULIO 19 DE 2014 PERIODO: III TITULO/TEMA: CONOCIENDO EL ENTORNO DE TRABAJO DE DREAMWEAVER.- DISEÑOS DE PAGINAS WEB A. LEE CON MUCHA ATENCION Conceptos básicos de DREAMWEAVER MX Dreamweaver MX es un software fácil de usar que nos permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver MX nos permiten agregar rápidamente diseño y funcionalidad a las páginas, sin necesidad de saber programar el código HTML que es el usado para las páginas web. En Dreamweaver se puede crear tablas de texto con imágenes, editar marcos, crear formularios, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Además este programa incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web. Además de Dreamweaver, existen otra serie de buenos editores de página web, como pueden ser Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos. OPERACIONES BASICAS SOBRE DREAMWEAVER COMO ARRANCAR DREAMWEAVER Primeramente lo podemos hacer desde el botón Inicio. Hacemos clic sobre botón Inicio/clic en todos los programa/buscar Macromedia y seguidamente hacer clic en la Macromedía Dreamweaver MX, De esta manera arrancará el programa. También podemos ingresar al programa desde el icono de Dreamweaver MX del escritorio. COMO ABRIR UN DOCUMENTO EN DREAMWEAVER Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botón abrir de la barra de Pulsar la combinación de teclas Ctrl+O. Abrir. Hacer doble clic sobre el archivo en la ventana del sitio. Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botón abrir de la barra de Pulsar la combinación de teclas Ctrl+O. Nuevo. Hacer doble clic sobre el archivo en la ventana del sitio. Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página básica, HTML. COMO CERRAR DREAMWEAVER Para cerrar Dreamweaver MX, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botón cerrar 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. COMO GUARDAR UN DOCUMENTO EN DREAMWEAVER Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botón guardar de la barra de Pulsar la combinación de teclas Ctrl+S. Guardar. Dreamweaver incluye la posibilidad de, que 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 Guardar todo. Al tener varios documentos abiertos es fácil olvidarse de todos las modificaciones hechas en cada uno de ellos.

2 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. B. AHORA PRÁCTICA MI PRIMERA PAGINA WEB 1. Ingresa a Dreamweaver como se indicó en la página anterior. 2. Aparece seguidamente esta ventana de trabajo. 3. Introduce en el documento en blanco, el texto que aparece en la imagen de la ventana. 4. Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento. Para ello debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página. 5. Entonces se abrirá una ventana como la de abajo. 6. Cambia el Título por "Mi primera página". En Fondo escribe "#6699CC", de este modo el fondo del documento pasará a ser de color azul. Seguidamente pulsa sobre el botón Aceptar. 7. Ahora insertaremos una imagen debajo de la segunda línea de texto. Puedes seleccionar una imagen cualquiera de la carpeta Mis Imágenes, sino, descarga una imagen previamente de la Internet. 8. Para insertar la imagen, ve al menú Insertar y escoge la opción Imagen. Abre la carpeta donde se encuentra la imagen, selecciónala y luego pulsa Aceptar. Organiza la imagen que quede de un tamaño apropiado con el texto. 9. Ahora vamos a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que está ubicado 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, con la opción Propiedades. 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 pulsar sobre el botón, que aparece junto al nombre. 10. Selecciona la primera línea de texto y cambia el Formato por "Encabezado 1" y el color por "#000066". Luego Selecciona la imagen y las dos últimas líneas de texto. Pulsa sobre el botón para centrarlos. 11. Selecciona la segunda línea de texto y cambia el Formato por "Encabezado 3", pulsa una vez sobre el botón y pulsa tres veces sobre el botón. 12. Selecciona de nuevo la última línea, y en Vínculo introduce " para crear un enlace a esa otra página. 13. Después de todos estos pasos, puedes ver como ha quedado el documento pulsando la tecla F12. Por último guarda el documento prueba1.htm en el escritorio de Windows. 14. Ve al escritorio de Windows y observa que el documento que acabas de crear se guarda como un documento de Internet. Actívalo y observa como se visualiza a través del navegador Internet Explorer. Has clic en el enlace a la página del tiempo y verifica que se conecta a esta página.

3 C, RECORTAR PEGAR E IDENTIFICAR EL ESPACIO DE TRABAJO DE DREAMWEAVER: Ahora vamos a ver cuáles son los elementos básicos de Dreamweaver MX, 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. 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, como veremos más adelante. 1. COLOCA COMO TITULO EN TU CUADERNO EL ENTORNO DE TRABAJO DE DREAMWEAVER. LUEGO RECORTA ESTA VENTANA Y PÉGALA. 2. AHORA RECORTA CADA PARTE DE LA VENTANA DE TRABAJO DE DREAMWEAVER, Y DEBAJO DE ELLA COLOCA SU RESPECTIVA DESCRIPCIÓN. PUEDES AYUDARTE OBSERVANDO EL PROGRAMA.

4 DESCRIPCIONES La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable La barra de título contiene el nombre del programa. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.

5 La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de Estas operaciones son las de cambio de vista del documento, vista previa, etc. El lanzador se encuentra en la barra de tareas. Con un simple clic sobre los iconos es posible mostrar y ocultar los paneles correspondientes a éstos, sin la necesidad de tener que desplazarse a través de los menús para abrirlos. Es posible personalizar el lanzador, para que solamente aparezcan los iconos deseados por el usuario. El inspector de propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc. Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior-derecha. Seguramente será la herramienta de Dreamweaver que más vayas a utilizar. El panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú insertar. Los botones están clasificados según su categoría: tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez. 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. La barra de herramientas éstandar contiene iconos para ejecutar de forma inmedíata algunas de las operaciones más habituales, como Abrir,Guardar, etc.