I.E. Presentacin de Mara

Familia Profesional: Computacin e InformticaEspecialidad: Operacin de Computadoras Mdulo: Diseo Web Grado y Seccin:Fecha:

HOJA DE INFORMACIN N 4TEMA: INTRODUCCIN AL PROGRAMA ADOBE DREAMWEAVER MI PRIMERA PGINA WEBCAPACIDAD: Crea su primera pgina Web, reconociendo y configurando el entorno de trabajo de Dreamweaver e insertando objetos como textos, tablas, imgenes, listas y anclajes.QU ES DREAMWEAVER?Adobe Dreamweaver es un editor de cdigo HTML para la administracin de sitios y creacin de pginas web. Permite disear sin escribir una sola lnea de cdigo. Este programa inicialmente fue creado por la empresa Macromedia, actualmente se produce por Adobe Systems.

Recopilacin de algunas versiones de Dreamweaver desde sus inicios:

Requisitos para instalar el programa DW CS5, en el caso que tengas S.O. Windows:Procesador Intel Pentium 4 o AMD Athlon 64 bits.

Microsoft Windows XP con Service Pack 2 (se recomienda Service Pack 3); Windows Vista o Windows 7.

512 MB de RAM

1 GB de espacio disponible en disco duro para la instalacin

Pantalla de 1280 x 800 con adaptador de grficos de 16 bits

Unidad de DVD-ROM

Se requiere una conexin a Internet de banda ancha para los servicios en lnea.

Responde:Cmo puedes saber las caractersticas de tu computadora para poder instalar DW? Segn lo mostrado en la TV qu elementos puedes insertar en un sitio o pgina web?

INGRESANDO A DW1. Haz clic en Inicio2. En la zona de bsquedas escribe Dreamweaver3. Haz clic en el cono verde que aparece4. Clic en soy nuevo, lee lo que sale y coloca Siguiente, siguiente hasta que salga el botn finalizar.5. Una vez dentro del programa vers una ventana con varias opciones6. Haz clic en HTML.7. A continuacin vers una ventana parecida al siguiente grfico, que es el entorno de trabajo de DW.

ELEMENTOS DEL ENTORNO DE TRABAJO DE DW1. Barra de ttulo: muestra el nombre del programa y los botones de control (Maximizar, minimizar y cerrar).2. Barra de men3. Barra insertar: contiene botones para la insercin de objetos (imgenes, tablas, etc.)4. Barra de herramientas del documento: Contiene botones para la vista diseo y la vista cdigo, opciones de visualizacin y la vista previa en un navegador. Vista cdigo, dividir o Diseo? .Completa

5. Grupo de paneles: conjunto de paneles agrupados bajo un encabezado los cuales se pueden desplegar y contraer. Haz clic para contraerHaz clic para desplegar

Si un panel no es visible haz clic en el men ventana y selecciona el nombre del panel.

6. Regla Horizontal y Vertical: permite medir las dimensiones de la pgina web, las cuales estn expresadas en pxeles.7. Ventana del documento: zona blanca en la cual se insertaran las imgenes, texto, etc.8. Selector de etiquetas: Muestra la jerarqua de etiquetas que rodea a la seleccin actual.9. Panel de propiedades: Muestra las propiedades del objeto o texto seleccionado y permite a la vez modificar dichas propiedades.QU ES UN SITIO WEB?Es un conjunto de documentos y archivos vinculados, con un diseo similar y un objetivo en comn. En DW el trmino sitio se emplea para referirse a una ubicacin de almacenamiento local o remoto de los documentos (Imgenes, pginas html, videos, audio, etc.) que pertenecen a un sitio web. Un sitio permite organizar y administrar todos los documentos web, cargar el sitio en un servidor web, controlar y mantener sus vnculos.

El primer paso al crear un sitio web consiste en planificarlo; es decir, disearlo y planificar la estructura del sitio web antes de crear las pginas que va contener. Luego el siguiente paso consiste en configurar DW para poder trabajar con la estructura bsica del sitio. Si ya se dispone de un sitio en un servidor web podemos utilizar DW para modificarlo.

1

Pasos para crear un sitio local:PRIMER PASOCrear la estructura de carpetas, en tu escritorioCopia las imgenes que la profesora que va a dar a tu carpeta Imgenes.

Y2

SEGUNDO PASOConfigurar el Sitio Web

1. Clic en Sitio (Se encuentra en la barra de men)/ Nuevo Sitio2. Aparece una ventana en la cual debes escribir el nombre que tendr tu sitio3. Luego define la Carpeta o sitio local (Elige la carpeta que creaste en el Primer Paso) 4. Clic en Guardar.Una vez creado el sitio vers que se activa el panel archivos, este panel se utiliza para crear documentos HTML; ver, abrir y mover archivos; crear carpetas y borrar elementos. Los elementos que componen un sitio se visualizan en el panel archivos.

LAS PLANTASSon seres que nacen, crecen se reproducen y muerenPartes de las PlantasRaizTalloHojaFlorFruto

Ejercicio: Escribe el texto que se muestra a la derecha, luego configura las propiedades que se muestran abajo.Propiedades del documento o pginaIngresamos a propiedades del documento o pgina de dos formas:a. En la vista diseo, buscamos un espacio vaco en el documento y hacemos clic derecho, luego se escoge propiedades de la pgina. Aqu podemos hacer las modificaciones deseadas.b. En el panel propiedades busca un botn denominado Propiedades de la pgina y haz clic sobre l. Vers aparecer una ventana donde podrs hacer los cambios al documento.

Ejercicio: Ingresa a propiedades de la pgina y realiza los siguientes cambios.

Gestin de archivos y carpetas.Para abrir un archivo:1. En el panel archivos selecciona un sitio2. Localiza y selecciona el archivo que deseas abrir3. Haz doble clic en el cono del archivo/ o haz clic derecho y elige abrir.

5

Para crear un archivo o carpeta:1. En el panel archivos selecciona una carpeta.2. Clic derecho sobre la carpeta y selecciona la opcin nuevo archivo o nueva carpeta3. Escribe el nombre para el nuevo archivo o carpeta y luego presiona enter.Otra forma: (Clic en Men Archivo/Nuevo/Clic en HTML/Clic en Crear) Para eliminar un archivo o carpeta:1. Clic derecho sobre la carpeta o archivo2. De las opciones escoge Edicin luego clic en Eliminar. Otra forma: Clic en el archivo o carpeta luego presiona la tecla suprimir.Para guardar un archivo:1. Clic en archivo (Se encuentra en la barra de men)2. Escoge Guardar como3. Ubica la carpeta configurada como sitio local4. Escribe el nombre del archivo y luego en la opcin Tipo escoge HTML Documents.5. Clic en guardar.Si ya has guardado anteriormente el archivo y deseas solo guardar0 los cambios realizados pulsa las teclas CTRL+S

Mi primera pgina web.Qu significa la interactividad lineal?La palabra interactividad implica el enviar una orden y que la computadora te proporcione una respuesta. En el caso de las pginas web la interactividad lineal est referida a los vnculos que se realizan a la misma pgina pero te direcciona a partes especficas puede dirigirte hacia arriba, abajo, o en el intermedio de la pgina dependiendo del anclaje insertado.

CREAR LISTA SIN ORDENAR (VIETAS)1. Escribe los elementos de la lista 2. Seleccinalos y luego en el panel propiedades haz clic en el botn HTML3. Clic en el botn Lista sin ordenar.CREAR LISTA ORDENADA (NUMERACIN)Escribe los elementos de la lista 1. Seleccinalos y luego en el panel propiedades haz clic en el botn HTML2. Clic en el botn Lista ordenada

INSERTANDO TABLAS1. Haz clic en Insertar, de la barra de men2. Escoge tabla3. Define el nmero de filas y columnas, como tambin grosor.4. Clic en Aceptar.Selecciona las celdas a combinar y en el panel propiedades vers el siguiente botn haz clic sobre l.Para dividir celdas, solo debers hacer clic en este botn.

INSERTAR IMGENESActividad: Crea esta tabla y aplcale formato

1. Primero debes buscar las imgenes para tu sitio desde internet u otro medio2. Descarga las imgenes a la carpeta IMAGENES que debe estar dentro de tu sitio creado.3. Clic en el men Insertar4. Elige Imagen5. Clic en la imagen deseada y clic en Aceptar.6. Listo. Nota: Puedes modificar la ubicacin y espacio de separacin entre la imagen y texto a travs del panel de propiedadesINSERTAR LNEA HORIZONTAL1. Coloca el cursor donde quieres que aparezca la lnea horizontal (En este caso, debajo del ttulo)2. Clic en Insertar3. Clic en Regla Horizontal4. Si quieres que se vea ms gruesa, en propiedades aumenta el alto a 155. Tambin puedes cambiar el color de la lnea utilizando la vista cdigo. LA ETIQUETA MARQUEE: Esta etiqueta permite dar movimiento al texto1. Selecciona el ttulo2. Clic en la vista dividir3. Busca el texto seleccionado y antes de ese texto escribe y al finalizar

Se debe ver as: LAS PLANTAS ACTIVIDAD:1. Ahora crea una pgina Web para explicar la clasificacin de las plantas segn su tamao (rbol, arbusto, hierba)a) Agrega textos.b) Inserta una lnea horizontal que separe el ttulo del contenidoCLASIFICACIN DE LAS PLANTAS SEGN SU TAMAOSegn esta clasificacin podemos encontrar tres grandes clases de plantas, de mayor a menor:

rbol Arbusto Hierba

c) Crea Vietad) Crea tablase) Inserta imgenesf) Aplica formatosg) Aplica color de fondo2.

TEMA: INTRODUCCIN AL PROGRAMA ADOBE DREAMWEAVER MI PRIMERA PGINA WEBCAPACIDAD: Crea su primera pgina Web, reconociendo y configurando el entorno de trabajo de Dreamweaver e insertando objetos como textos, tablas, imgenes, listas y anclajes.

AADIENDO ANCLAJES (PGINA DE INTERACTIVIDAD LINEAL)Qu es un anclaje? Un anclaje es una marca que indica donde se encuentra un objeto sirve para establecer una conexin hacia la misma pgina. Pasos para aadir anclajes

PRIMERA PARTE: Creacin del anclaje

Primero disea tu pgina Web sobre las plantas (Pero esta pgina Web si es completa) Observa el modelo de la separata virtual Modelo de pgina con anclajes a) Selecciona el texto LAS PLANTAS de la primera tablab) Clic en vista dividirc) Aadirs la etiqueta article antes del texto LAS PLANTAS y cerrarlo despus del texto LAS PLANTASDebe verse as: LAS PLANTAS Nota: El id es el nombre del anclaje

Contina aadiendo ms anclajes Partes de una planta Destino partes Clasificacin de las plantas Destino clasificacion Importancia de las plantas Destino importanciaTipos y formas de hojas Destino tiposBiodiversidad Destino biodiversidad

SEGUNDA PARTE: CREACIN DE UN HIPERVNCULO HACIA EL ANCLAJEEsta parte es ms sencilla.1. Selecciona el texto que se encuentra en el ndice Qu son las Plantas?2. En la barra de propiedades, en la zona de vnculo escribe # seguido del nombre del id del anclaje que has creado, en este caso #definicion

Contina aadiendo los vnculos a los dems textos del ndice

Actividad: Elige un tema libre, y desarrolla una pgina Web sobre ese tema. Debers aplicar todo lo aprendido.1. Primero crea tu carpeta de archivos2. Luego Configura tu Sitio Web3. Finalmente procede con la creacin de tu pgina Web (Aplica todo lo aprendido: Tablas, imgenes, formatos) Pero primordialmente, debes aplicar anclajes.