Practicas DreamWeaver

download Practicas DreamWeaver

of 14

Transcript of Practicas DreamWeaver

  • 8/6/2019 Practicas DreamWeaver

    1/14

    PRACTICA 1: TEXTOS

    1. Crea una nueva pgina en el sitio EJEMPLO1, y la guardamos con el nombre TEXTO1.

    2. Escribe directamente en ella este texto:Sabas que...

    ... el refrn " en las manos de un idiota ni la plvora arde " viene de las guerrasnapolenicas.

    Al parecer el mismo Napolen Bonaparte profiri esta frase a propsito del general HardrickVon Jaun, comandante del ejercito austrohngaro, tras arrasar al ejercito aliado en la batallade Jena.

    Lo curioso es que Bonaparte, en sus aos de academia militar en Lyon, era conocido comoel cadete "Oblique" (oblicuo) por sus sucesivos errores en las prcticas de artillera.

    3. Aplica a la primera lnea un Encabezado1 y a la segunda un Encabezado2.

    4. Selecciona el ltimo prrafo.

    5. Corta el prrafo seleccionado y lo pegas por encima del anterior.

    6. Convierte los dos ltimos prrafos en una lista ordenada.

    7. Cambia la lista ordenada a Lista sin ordenar.

    8. Aplica la fuente Arial a los elementos de la lista.

    9. Aplica color azul oscuro a los encabezados.

    10. Convierte en prrafos normales los elementos de la lista, y sngralos una vez.

    11. Aplica un color de gris al fondo de la pgina.

    12. Guardamos los cambios.

    13. Finalmente visualiza el resultado en el navegador.

  • 8/6/2019 Practicas DreamWeaver

    2/14

    PRACTICA 2: ENLACES DE PGINAS

    1. Crea una pgina nueva llamada INDEXen un sitio nuevo, que se llame EJEMPLO2. sta vaa ser la pgina principal. Acostmbrate a llamar a las pginas principales de esta forma

    (index.htm). Es un mtodo utilizado universalmente por los servidores para reconocer lapgina inicial de un sitio web.

    Con el siguiente esquema vamos a enlazar mediante vnculos cada una de las pginas,segn indican las flechas. Para ello crea las pginas necesarias y escribe los textos queconsideres oportunos para cada uno de los enlaces.

    NOTAS

    El contenido de la informacin de la energa elica tiene la siguiente estructura:

    Parques elicos= parqueseolicos.htm

    Cmo funciona un aerogenerador? = saberaero.htm

    El contenido de la informacin de la energa solar se va ha componer de dos apartados con susdos pginas:

    Conexin directa a red = conexin.htm

    Cmo funciona una clula fotovoltaica? = sabercelula.htm

    El contenido de la informacin de los productos es similar.

  • 8/6/2019 Practicas DreamWeaver

    3/14

    PRACTICA 3: TABLAS ANIDADAS

    2. Crea las siguientes tablas, en una pgina nueva dentro de tu sitio EJEMPLO 1. Guarda lapgina con el nombre TABLAS01.

    NOTAS

    Para poner el tamao de texto a 2, haz clic en el men Texto y en la opcin Tamao y clic en 2. Siest desactivado esto ltimo, haz clic en el men Edicin y en la opcin Preferencias y en lacategora General, desactiva la casilla Utilizar CSS en lugar de etiquetas HTML. Y haz clic en elbotn Aceptar.

  • 8/6/2019 Practicas DreamWeaver

    4/14

    PRACTICA 4: HIPERVINCULOS DE ANCLAJE

    3. Crea una pgina nueva HTML en el sitio EJEMPLO1. Guarda la pgina con el nombreROLLO2.

    4. Escribe y copia un texto cualquiera hasta rellenar varias pantallas.

    5. Inserta los siguientes ttulos, con el formato Encabezado 2, en tu pgina:

    PRINCIPIO

    DESARROLLO DEL TEMA

    CONCLUSIONES

    6. Inserta 3 puntos de anclaje, que coincidan con los ttulos anteriores:

    Pon el nombre PRINCIPIO al primer anclaje.

    Pon el nombre DESARROLLO al segundo anclaje.

    Pon el nombre CONCLUSIONES al tercer anclaje.7. Ahora, crea 2 hipervnculos al comienzo de la pgina, con los siguientes textos:

    Para ir al Desarrollo del tema, haz clic aqu.

    Para ir a las conclusiones del tema, haz clic aqu.

    8. Por ltimo, crea un hipervnculo al final de la pgina, que salte al principio de la pgina.

    9. Guarda todos los cambios y comprueba que funcionan los hipervnculos.

  • 8/6/2019 Practicas DreamWeaver

    5/14

    PRACTICA 5: TABLAS

    10. Crea un sitio nuevo con el nombre PRACTICA05.

    11. Crea 4 pginas nuevas html. Gurdalas con los nombres INDEX, HISTORIA, CONCEPTOSy SERVICIOS.

    12. En la pgina INDEX haz el siguiente diseo:

    El ttulo est escrito en la fuente Arial, Helvetica, sans-serif, con el formato Encabezado 1 yest centrado.

    La tabla tiene 3 columnas de 170 pxeles de ancho cada una y 1 fila de 145 pxeles de alto.El grosor del borde es 1 pxel. Est centrada.

    Los hipervnculos estn escritos en la fuente Arial, Helvetica, sans-serif, con el formatoPrrafo. Estn centrados.

    13. En la pgina HISTORIA haz el siguiente diseo:

    El ttulo est escrito en la fuente Arial, Helvetica, sans-serif, con el formato Encabezado 1.

    La tabla est al 90 %, la primera columna est al 13% y la segunda columna est al 87%.Tiene 10 filas. El grosor del borde es 1 pxel.

  • 8/6/2019 Practicas DreamWeaver

    6/14

    El texto de la primera columna est escrito en la fuente Arial, Helvetica, sans-serif ennegrita y con color rojo. Est centrado.

    El texto de la segunda columna est escrito en la fuente Arial, Helvetica, sans-serif.

    14. En la pgina SERVICIOS crea el siguiente diseo:

    La tabla y los textos tienen las mismas propiedades que en la pgina HISTORIA. (Puedescopiar y pegar la tabla).

    15. En la pgina CONCEPTOS crea el siguiente diseo:

    La tabla y los textos tienen las mismas propiedades que en la pgina HISTORIA. (Puedescopiar y pegar la tabla).

    16. En el men Modificar, en la opcin Propiedades de la pgina y en la categora Aspecto,puedes cambiar el color de fondo de la pgina y poner un ttulo.

    17. Pon un hipervnculo en las pginas de HISTORIA, SERVICIOS y CONCEPTOS para quevuelvan a la pgina INDEX.

    18. Pon un hipervnculo para enviar un e-mail [email protected]. Guarda todo y comprueba los hipervnculos.

    mailto:[email protected]:[email protected]
  • 8/6/2019 Practicas DreamWeaver

    7/14

  • 8/6/2019 Practicas DreamWeaver

    8/14

    PRACTICA 6: DISEO DE TABLAS

    1. Crea un sitio nuevo con el nombre PRACTICA06.

    2. Crea una pgina nueva html. Gurdala con el nombre INDEX.3. Escribe el ttulo MIS SEIS WEBS IMPRESCINDIBLES. Est escrito en la fuente Arial, Helvetica,

    sans-serif, con el formato Encabezado 1 y est centrado, dentro de una tabla centrada de 750 x110. Usa el botn Estndar para escribir.

    4. Disea una tabla de 750 x 260.

    5. Busca una imagen que te guste. Puedes usarwww.google.es. Cpiala en tu sitio web.

    6. Inserta una celda en la tabla anterior. Inserta dentro de la celda la imagen.

    7. En la otra celda de la tabla, escribe los siguientes vnculos:

    Alerta antivirus www.alerta-antivirus.com

    Diccionarios online www.diccionarios.comDescarga de software - Softonic www.softonic.com

    Viajes - Gua Micheln www.michelin.com

    Informacin de telfonos www.paginasamarillas.es

    Enciclopedia Wipipedia es.wikipedia.org

    Los hipervnculos estn escritos en la fuente Arial, Helvetica, sans-serif, con el formato Prrafo.Estn centrados.

    8. Pon un hipervnculo para enviar un e-mail [email protected], con el formatoPrrafo y la fuente Arial, Helvetica, sans-serif , en la parte inferior derecha de la pgina.

    9. Guarda todo y comprueba los hipervnculos.

    http://www.google.es/mailto:[email protected]:[email protected]://www.google.es/mailto:[email protected]
  • 8/6/2019 Practicas DreamWeaver

    9/14

    PRACTICA 7: GALERIA DE IMGENES

    En esta prctica vamos a crear una galera de imgenes. Se trata de crear una pgina principal conlas imgenes pequeas y, despus, una pgina separada por cada imagen original-grande. Se

    hace esta separacin para que la carga de la galera no sea excesivamente lenta.

    1. Crea una pgina nueva HTML con el nombre INDEX, en un sitio nuevo con el nombrePRACTICA07.

    2. Busca enwww.google.es seis imgenes que te gusten. Guarda cada imagen en una carpetade imgenes de tu sitio web.

    3. Usa el men Comandos y la opcin Crear lbum de fotos web.

    4. Rellena el cuadro de dilogo Crear lbum de fotos web:

    a. En la casilla Ttulo del lbum de fotos escribe: MIS SEIS FOTOS PREFERIDAS

    b. En la casilla Informacin de subencabezado escribe: UNA IMAGEN VALE MAS QUEMIL PALABRAS.

    c. En la casilla Otra informacin escribe: PRACTICA 7 DEL CURSO.

    d. En la casilla Carpeta de imgenes de origen, selecciona con el botn Examinar tucarpeta de imgenes que has buscado en google.

    e. En la casilla Carpeta de destino, selecciona la carpeta de tu sitio web.

    f. Las dems opciones del cuadro puedes dejarlas como estn.

    g. Pulsa el botn Aceptar.

    5. Guarda todos los cambios y comprueba los resultados en el navegador.

    http://www.google.es/http://www.google.es/http://www.google.es/
  • 8/6/2019 Practicas DreamWeaver

    10/14

    PRACTICA 8: REPASO

    Definir el sitio Web y establecer propiedades de pgina

    1. Cada prctica debe hacerse paso a paso, y en el mismo orden sin saltos.2. Crea un sitio local con el nombre DEPORTES, en tu carpeta Mis documentos.

    3. Crea una pgina HTML con el nombre INDEX y modifica las propiedades de pgina (menModificar). En el ttulo escribe Quines somos?, en el color de fondo selecciona el color#99CCCCy el color de texto ser #003333.

    4. Guarda los cambios y cierra la pgina.

    Modificar las propiedades de texto

    1. Crea una pgina HTML con el nombre INSTALACIONES, en el sitio DEPORTES.

    2. Escribe en la primera lnea el texto NUESTRAS INSTALACIONES.

    3. Selecciona el formato Encabezado 1 al texto NUESTRAS INSTALACIONES.

    4. Escribe 6 lneas describiendo las instalaciones, con una lista sin ordenar (men Texto).

    5. Pon 2 sangras a la lista anterior (men Texto).

    6. Guarda los cambios y cierra la pgina.

    Inserta imgenes

    1. Abre la pgina INSTALACIONES.

    2. Busca en www.google.es una imagen de deportes. Guarda la imagen en la subcarpetaIMAGENES (Si no existe crala) de DEPORTES.

    3. Inserta la imagen anterior a la derecha del texto de las instalaciones.4. Guarda los cambios y cierra la pgina.

    Formatos de tablas

    1. Crea una pgina HTML con el nombre RESERVAS, en el sitio DEPORTES.

    2. Crea la siguiente tabla y selecciona algn formato de tabla (men Comandos).

    ACTIVIDAD PRECIO/HORA

    AEROBIC 3

    CARDIO

    PESAS 4

    3. Guarda los cambios y cierra la pgina.

    Crear hipervnculos

    1. Crea una pgina HTML con el nombre QUIEN, en el sitio DEPORTES.

    2. Crea un hipervnculo a http://es.sports.yahoo.com en la pgina QUIEN. Utiliza el destino_blank (en el panel Propiedades) para que se abra en una ventana nueva del navegador.

    3. En la pgina INDEX, crea un hipervnculo para cada pgina del sitio.

    4. Guarda los cambios y cierra la pgina.

  • 8/6/2019 Practicas DreamWeaver

    11/14

    PRACTICA 9: REPASO

    1. Crea un sitio local con el nombre PRACTICA 10.

    2. Crea una pgina HTML nueva y modifica las propiedades de la pgina para poner uncolor de fondo #00FFCC.

    3. Escribe como ttulo RECETAS en el ttulo de la pgina.

    4. Guarda la pgina con el nombre INDEX.

    5. Escribe el ttulo RECETAS DE LA ABUELA, con el formato Encabezado 1, centrado ycon la fuente Courier New, Courier, mono.

    6. Crea otra pgina HTML con el nombre CONSEJOS. Inserta la siguiente tabla:

    CONSEJOSUno de los mtodos ms empleados en la cocina consiste en sumergir los

    alimentos en un recipiente con agua y aplicar calor durante un tiempo,

    hasta que estn cocidos. En ocasiones los distintos elementos se agregan

    al agua fra, como es el caso de hortalizas frescas, legumbres

    ablandadas, pescados, carne para caldo, huevos, etc., mientras que en

    otras ocasiones, se aaden cuando el agua est en ebullicin: pasta,

    arroz, algunas verduras, la carne del cocido, etc.

    Tiempos de coccin Minutos

    Alcachofas 20-30

    Apio 30-40

    Calabacines 20-30

    Calabaza 30-40

    Cardos 45-50

    Cebollas 25-30

    Coles de Bruselas 20-25

    Coliflor 15-20

    Escarola 15-20

    7. La fuente es Courier New, Courier, mono.

    8. Escribe el texto CONSEJOS PRACTICOS en el ttulo de la pgina.

    9. Guarda los cambios.

    10. Crea un men de salto, con la siguiente lista:

    El mundo de las recetas http://www.mundorecetas.com

    Recetas tradicionales http://www.recetas.net

    Recetas internacionales http://www.arecetas.com

    Recetas espaolas http://www.acocinar.com/recetas.htm

    11. Crea una barra de navegacin, con dos imgenes ( imagen arriba y sobre imagen).Pon un hipervnculo que salte a la pgina de consejos.

    12. Inserta una direccin de e-mail para solicitar ms informacin (mailto:)

  • 8/6/2019 Practicas DreamWeaver

    12/14

  • 8/6/2019 Practicas DreamWeaver

    13/14

    PRACTICA 10: MARCOS

    1. Crea un sitio Web, con el nombre PRACTICA 12, donde la pgina principal est dividida en

    3 marcos; el marco superior para el ttulo TIENDAS DE MUSICA ONLINE, otro marco a laizquierda con los hipervnculos, y el marco principal, que muestre el contenido de cadahipervnculo de las tiendas de msica online.

    2. Las pginas de los marcos deben estar diseadas con las siguientes propiedades:

    a. El fondo de la pgina del marco principal debe contener una imagen o un color defondo.

    b. El marco superior debe tener el ttulo con Encabezado 1, con el tipo de letra y elcolor que quieras.

    3. Los hipervnculos del marco izquierdo deben estar diseados con las siguiente propiedades:

    a. Los prrafos deben estar con el tipo de letra y color que elijas. La alineacin debeser centrada.

    b. Los hipervnculos son:

    Terra Msica Premium http://musicapremium.terra.es/index.cfm

    MSN Music http://music.msn.es

    Wanadoo Jukebox http://jukebox.ritmic.com

    Apple iTunes Music Store http://www.apple.com/es/itunes/store

    4. Modifica las propiedades de los bordes de los marcos, para que se visualicen como telijas.

    5. Guarda todo y comprueba los resultados en el navegador.

    http://musicapremium.terra.es/index.cfmhttp://music.msn.es/http://jukebox.ritmic.com/http://www.apple.com/es/itunes/storehttp://musicapremium.terra.es/index.cfmhttp://music.msn.es/http://jukebox.ritmic.com/http://www.apple.com/es/itunes/store
  • 8/6/2019 Practicas DreamWeaver

    14/14

    PRACTICA 13: GALERIA DE IMGENES Y MARCOS

    En esta prctica vamos a crear una galera de imgenes. Se trata de crear una pgina principal con

    las imgenes pequeas y, despus, una pgina separada por cada imagen original-grande. Sehace esta separacin para que la carga de la galera no sea excesivamente lenta.

    6. Crea una pgina nueva HTML con el nombre INDEX, en un sitio nuevo con el nombrePRACTICA13.

    7. Disea marcos, en la pgina INDEX.

    8. En la pgina INDEX, escribe el texto GALERIA DE IMGENES con el formato Encabezado 1,centrado y con la fuente Arial, Helvetica, sans-serif. Debajo de este texto, escribe el texto HAZCLIC EN CADA IMAGEN PARA AMPLIARLA!, con el formato Encabezado 2, centrado y lafuente Arial, Helvetica, sans.serif.

    9. En el marco de la izquierda, inserta la imagen PUESTA DE SOL, de la carpeta IMAGENES DEMUESTRA. Copia la imagen dentro de tu sitio en una carpeta de imgenes. Si es necesariocrea la carpeta de imgenes. En la imagen anterior, cambia el ancho a 80 pxeles y el alto a 60pxeles.

    10. Debajo de PUESTA DE SOL, inserta la imagen COLINAS AZULES, de la carpeta IMAGENESDE MUESTRA. Copia la imagen dentro de tu sitio en una carpeta de imgenes. En la imagenanterior, cambia el ancho a 80 pxeles y el alto a 60 pxeles.

    11. Debajo de COLINAS AZULES, inserta la imagen INVIERNO, de la carpeta IMAGENES DEMUESTRA. Copia la imagen dentro de tu sitio en una carpeta de imgenes. En la imagenanterior, cambia el ancho a 80 pxeles y el alto a 60 pxeles.

    12. Debajo de INVIERNO, inserta la imagen NENUFARES, de la carpeta IMAGENES DEMUESTRA. Copia la imagen dentro de tu sitio en una carpeta de imgenes. En la imagenanterior, cambia el ancho a 80 pxeles y el alto a 60 pxeles.

    13. Crea 4 hipervnculos para que cada imagen del marco izquierdo, se abra en el marco principal.

    14. Guarda todos los cambios y visualiza el resultado en el navegador.