liceo mayor de palermo€¦ · ayuda de business catalyst que es un sistema de alojamiento de...

LICEO MAYOR DE PALERMO

“GENERADORES DEL FUTURO CON VISIÓN COMERCIAL Y

AUTOVALORACIÓN PERSONAL”

ASIGNATURA: INFORMÁTICA

GRADO: NOVENO

GUIA DE TRABAJO No. 002

NOMBRE: ______________________________________ FECHA: ___________________

VISTAS DE UN DOCUMENTO

Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento:

La vista Diseño

La vista Diseño permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

OBJETIVO: Conocer los aspectos básicos de DREAMWEAVER para

continuar haciendo el sitio web de la empresa.





GRADO: NOVENO

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.

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.





GRADO: NOVENO

|

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 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.





GRADO: NOVENO

LA AYUDA

www.pixton.com

http://www.pixton.com/





GRADO: NOVENO

A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas: 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. 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.

CONFIGURAR UN SITIO LOCAL 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.





GRADO: NOVENO

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 https://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 exactamente https://www.aulaclic.es/nombrepagina.htm

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.

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...

https://www.aulaclic.es/nombrepagina.htm





GRADO: NOVENO

En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos

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.





GRADO: NOVENO

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.





GRADO: NOVENO

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. Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

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.

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 en nuestro sitio buscar.htm, paraplantilla.htm, platossemana.htm, postresemana.htm y las carpetas imágenes 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.





GRADO: NOVENO

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. 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.





GRADO: NOVENO

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.

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.

http://filezilla-project.org/





GRADO: NOVENO

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. 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.





GRADO: NOVENO

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 html, public_html o httpdocs y sube tus archivos allí.

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.





GRADO: NOVENO

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. 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.





GRADO: NOVENO

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:

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.





GRADO: NOVENO

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:

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.





GRADO: NOVENO

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





GRADO: NOVENO

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.

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: .





GRADO: NOVENO

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. 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.

ACTIVIDAD Teniendo en cuenta la información suministrada:

1. Siga construyendo la página inicial de su empresa.

2. Conteste las siguientes preguntas: 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.





GRADO: NOVENO

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. 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.

liceo mayor de palermo€¦ · ayuda de business catalyst que es un sistema de alojamiento de...

Documents