Proyecto: Granjero cosmopolita

  1. Defina un sitio llamado Granjero cosmopolita.
  2. Añada una carpeta para imágenes.
  3. Pulse ctrl. N para añadir una nueva página. Guárdela con el nombre index.html. Ponga título Granjero cosmopolita.
  4. Si pone un color de fondo oscuro se debe cambiar el color del texto que, por defecto, es negro. Debe utilizar un color claro para poder ver el texto. El color por defecto se fija con botón derecho sobre la página; propiedades de página > color de texto. Posteriormente puede seleccionar texto y cambiar los atributos para poner el color que desee.
  5. Fije las propiedades de la página con botón derecho del ratón. Color de fondo negro . Color de texto blanco . Un color claro para los vínculos y los vínculos activos . Un color naranja para los vínculos visitados . Guarde la página.
  6. Inserte la imagen banner.gif que encontrará en su carpeta materiales/granjero. Ponga como texto alternativo Información sobre anuncios. Como la imagen insertada está fuera del proyecto, Dreamweaver le informa que debe copiar la imagen insertada en su carpeta de imágenes dentro del proyecto. En esa ventana de diálogo, haga clic en y localice y abra la carpeta de imágenes de su proyecto para que se copie en ella la imagen insertada. Haga clic a la derecha de la imagen. Pulse Intro.
  7. Escriba: Indicamos medidas y precios. Tipo de párrafo encabezado 1. Pulse Intro.
  8. Escriba: GRANJERO Cosmopolita ofrece 3 medidas y precios para los anuncios. Seleccione este texto. Seleccione fuente Arial,…. A diferencia de lo que ocurre con la casilla formato que afecta a todo el párrafo, la casilla fuente sólo afecta al texto seleccionado. Ponga en cursiva el nombre GRANJERO Cosmopolita. Coloque el cursor al final de la frase.
  9. Inserte una regla horizontal con 90% de ancho y alineamiento izquierda..
  10. Haga clic debajo de la regla horizontal y escriba: Botón cuadrado. Como formato ponga Encabezado 2.
  11. Observe que las etiquetas de código HTML aparecen en la línea situada por encima del inspector de propiedades . Una forma rápida de seleccionar texto es hacer clic en la línea y luego en la etiqueta h2. Ponga fuente Arial,…, color amarillo claro . Haga clic al final de la línea y pulse Intro.
  12. Observe que la lista de estilos se va ampliando con los nuevos estilos creados.
  13. La nueva línea arrastra en parte el formato anterior. Nos liberamos de él. Despliegue la lista de estilos y seleccione Ninguno.
  14. Inserte la imagen cuadrado.jpg. Haga clic a la derecha de la imagen. Aumente la sangría . Pulse Intro.
  15. Haga clic en el botón lista sin ordenar . Escriba: 100 euros al mes. Pulse Intro. Escriba: Dimensiones 125 x 125. Pulse Intro. Haga clic de nuevo en el botón lista sin ordenar para finalizar la lista. También se deshace si hace clic en anular sangría .
  16. Inserte Una línea horizontal , alineación izquierda y 90% de ancho.
  17. Guarde todo.
  18. Debajo de la última línea, pondremos ahora la siguiente cabecera: Banner o marquesina completa. Pulse Intro.
  19. La cabecera anterior debe tener el mismo formato que utilizó en Botón cuadrado. Puede repetir el proceso indicado en los apartados 9 y 10 pero hay una forma más fácil.
  20. Haga clic en el párrafo del formato que quiere copiar, en este caso donde pone Botón cuadrado. Observe en el inspector de propiedades el estilo.Utilizarlo ahora es sumamente sencillo. Haga clic en el párrafo al que quiere aplicar el estilo (el último párrafo que tenemos escrito). Seleccione formato Encabezado 2. Seleccione, en la lista de estilos del inspector de propiedades, el estilo que quiere aplicar. Verá como el estilo se pega al párrafo. Pulse Intro
  21. Como ve, en el inspector de propiedades, hemos arrastrado parte del estilo al nuevo párrafo. Para limpiarlo haga clic en Estilo ninguno. Verá en el inspector de propiedades que el estilo desaparece.
  22. Inserte la imagen full_banner.gif. Sitúe el cursor a la derecha de la imagen y pulse el botón Aumentar sangría . Pulse Intro.
  23. Haga clic en el botón Lista sin ordenar . Escriba: 560 euros al mes. Pulse Intro. Escriba: Dimensiones: 468 x 60. Pulse Intro. Haga clic en el botón Anular sangría para finalizar la lista.
  24. Inserte una línea horizontal . Alineación izquierda, 90% de ancho. Haga clic a la derecha de la línea y pulse Intro. Si pulsa Intro cuando tiene seleccionada la línea la borrará porque sustituirá el elemento seleccionado por un Intro.
  25. Escriba: Medio banner o marquesina. Aplique el estilo de los encabezados anteriores. Pulse Intro. Seleccione Estilo ninguno, para limpiar el siguiente párrafo.
  26. Inserte la imagen Half_banner.gif. Haga clic a la derecha de la imagen y clic en el botón Aumentar sangría . Pulse Intro.
  27. Haga clic en el botón Lista sin ordenar . Escriba: 230 euros al mes. Pulse Intro. Escriba: Dimensiones: 234 x 60. Pulse Intro. Haga clic en el botón Anular sangría  para finalizar la lista.
  28. Inserte una línea horizontal . Alineación izquierda, 90% de ancho. Haga clic a la derecha de la línea y pulse Intro.
  29. Escriba: Información de contacto. Aplique formato Encabezado 1. Con el cursor a la derecha del párrafo, pulse Intro.
  30. Seleccione fuente Arial,…. Escriba: El departamento de ventas de GRANJERO Cosmopolita se sentirá feliz al aceptar su contrato. Contacte con nosotros y se lo haremos. Llame al 555768900 o mande un e-mail a
  31. Tenemos que poner un vínculo a e-mail de forma que cuando el cliente haga clic sobre él se abra su programa de correo electrónico automáticamente y añada la dirección de destino. DreamWeaver tiene un botón de la barra Insertar Común que añade el código fuente necesario. Haga clic en el icono en forma de sobre de correos . En el campo Texto escriba el asunto: Departamento de anuncios. En correo electrónico escriba: ads@cosmofarmer.com. Acepte y pulse Intro para crear un nuevo párrafo.
  32. Escriba: Para más información sobre anuncios en línea visita nuestra dirección de Internet.
  33. Seleccione las palabras: dirección de Internet. Va a insertar un vínculo que lleve a la página Web destino.
  34. En el campo “Vínculo” escriba: http://www.iab.net. Haga clic a la derecha del párrafo y añada una línea horizontal de 90% de ancho y alineación izquierda.
  35. Haga clic debajo de la línea y escriba: Copyright 2004, GRANJERO Cosmopolita.. Seleccione este párrafo y ponga tamaño de letra 12. Guarde todo.

Aspecto de la página: