Curso Dreamweaver

Crear una Página Web con Dreamweaver CS4 Curso orientado a principiantes Ahora que ya conocemos HTML, es momento de crear una página web con la ayuda de una poderosa herramienta de poder, con Dreamweaver seremos capaces de crear un portal Web de manera sencilla y práctica. Jonatan Rivera C. 01/07/2010

Crear una Página Web con Dreamweaver CS4

Autor: Jonatan Rivera C.

2010

2

Introducción

En este curso aprenderás a crear tu propia página web usando el Dreamweaver, uno de los mejores programas para diseño web.

No todo el mundo tiene el tiempo necesario para dedicar unas horas al estudio de HTML y gracias a este programa serás capaz de hacer tu web sin saber nada de HTML, (aunque no es lo recomendado) el uso del Dreamweaver para algunos es la única forma de tener su web.

Aprenderemos las principales características del Dreamweaver y podrás tener tu sitio en aproximadamente un par de horas, lo único que tienes que hacer es tener constancia y paciencia, y por supuesto leer el curso hasta el final.



2010

3

Creación del Sitio Local

Lo primero que tenemos que hacer una vez que abrimos el Dreamweaver es crearnos un sitio local, es decir, crearemos una carpeta que contendrá todos los archivos necesarios para hacer tu web, estos archivos podrán ser archivos de música, imágenes, videos, etc.

Cuando tengamos nuestra web completa subiremos todos los archivos y subcarpetas a nuestro sitio remoto "Host" y así todo el que lo desee podrá ver nuestra web.

Primero haremos clic en "Sitio>Nuevo Sitio", puedes verlo en la siguiente imagen:

Nos saldrá la siguiente imagen y haz clicremos sobre la pestaña "básicas":



2010

4

Aquí en la pestaña básicas definiremos cual será el nombre de nuestro sitio, en el ejemplo que vamos a hacer vamos diseñar una web para una tienda de motos, yo le he puesto "MOTOS - MUTIERREZ". Os recomiendo que para hacer el curso usen los mismos nombres que pongo yo para no liarnos y mientras por vuestra parte pueden ir haciendo vuestros experimentos por otro lado. El segundo recuadro lo dejamos en blanco, ahí tendríamos que poner la dirección de nuestro sitio en caso de tener ya un host y un dominio, como no es nuestro caso no ponemos nada... además para subir los archivos utilizaremos un programa llamado FILEZILLA.



2010

5

En la siguiente pantalla nos da dos opciones a elegir, nosotros haremos clic en la opción "No, no deseo utilizar una tecnología de servidor", y luego a "siguiente".

En el siguiente paso nos preguntara la forma como queremos trabajar con nuestros archivos, haremos clic en la primera opción "Editar copias locales en mi equipo y luego cargarlas al servidor cuando estén listas":



2010

6

También se nos pregunta el lugar deseamos que se guarden los archivos, el programa por defecto te crea ya una carpeta con el nombre del sitio que vamos a crear en el escritorio. A no ser que desees guardar los archivos en otra ruta dejarlo tal cual y pulsar siguiente.

Ahora nos dice que como queremos conectar a nuestro servidor remoto, elegiremos NINGUNO ya que como he dicho antes conectaremos vía FTP pero con el FILEZILLA.



2010

7

En la siguiente pantalla se nos muestran algunos datos referente a nuestro nuevo sitio, comprobamos que todo está correcto y pulsamos en Completado para dar por finalizado la configuración de nuestro sitio:



2010

8

Página Principal

Página en blanco

Luego de haber creado nuestro sitio local ahora solo queda incluirle algunas páginas, como ya he mencionado antes vamos a hacer una web para una tienda de motos y para ello vamos a empezar a crear la página principal. Como este curso va dirigido a principiantes vamos a coger como página principal una de las que el Dreamweaver ya trae en su biblioteca y nosotros solo le cambiaremos el contenido.

Para ello nos vamos a "Archivo>Nuevo":

Nos saldrá la siguiente pantalla en la que podremos elegir las distintas opciones que nos ofrece. En la primera columna podremos elegir el tipo de pagina o plantilla que queremos (elegiremos Página en blanco); la columna "Tipo de página" nos ofrece distintos lenguajes de programación (marcaremos la opción HTML); en la columna "Diseño” podremos elegir una infinidad de combinaciones de columnas y filas para nuestra página (marcaremos 2 columnas flotantes, barra lateral izquierda, encabezado y pie) y luego pulsar en "Crear":



2010

9

Para sus experimentos fuera del curso pueden elegir cualquier combinación de la columna "Diseño" y así ir investigando paralelamente mientras que continúan con el curso.



2010

10

Área de trabajo

Una vez creado la página en blanco nos mostrará lo que será la página principal de nuestra web.

Como pueden ver en la imagen he marcado algunas zonas importantes del programa:

1. Ahí podremos elegir la forma de visualizar nuestro trabajo: tiene tres opciones, si pulsamos en el primer recuadro de la izquierda veremos solamente el código HTML de nuestra página. Si pulsamos en el botón del medio (es el que esta pulsado en la imagen) veremos tanto el código HTML como el diseño de nuestra página tal y como se verá una vez que lo colguemos en internet, yo recomiendo esa opción. Y por ultimo si pulsamos en el tercer botón solo veremos el diseño.



2010

11

2. Como he dicho antes si tenemos dividida la pantalla en la parte superior veremos el código HTML.

3. Y en el recuadro inferior estaremos visualizando el diseño de nuestra página.

4. En el área marcada como número 4 estaremos viendo los archivos y carpetas de nuestra web, este recuadro es muy útil a la hora de asignar a imágenes o palabras hipervínculos.

5. En la zona inferior tenemos una barra de herramientas muy útil, podremos elegir varios formatos de texto así como el color, asignar hipervínculos, y muchas opciones que ya los veremos según vayamos avanzando en el curso.

Color de fondo

Lo primero que vamos a cambiar es el color de fondo, para ello tenéis que pulsar en el botón "Propiedades de la página" abajo del todo (en la captura de la página anterior estaba dentro del circulo con el número 5).

Nos saldrá la siguiente imagen en la que podremos cambiar varias cosas de nuestra página entre ellas el color del texto, el color de fondo, si queremos una imagen de fondo, etc. De momento solo vamos a cambiar el fondo de nuestra página, para ello pulsa en el recuadro "Color de fondo" y elige el color que quieras, o bien si te sabes el código del color que quieres escríbelo donde pone #666666. En nuestro caso para el curso escribiremos el código #C60.



2010

12

Después de haber elegido el color haremos clic en "aplicar" y después en "aceptar".

Título

Ahora elegiremos el título para nuestra página, escribiremos MOTOS MUTIERREZ en el rectángulo que pone Título.

Ha llegado el momento de ver como quedaría nuestra página con sus nuevos colores vista desde un navegador, haz clic en el dibujo en forma de planeta que está a la derecha del rectángulo de "Titulo" del paso anterior. Se nos desplegara un menú que dependiendo del número de navegadores que tengamos nos dará la opción de visualizarlo con uno o con otro, en mi caso haz clic en "vista previa en Firefox" o puedes presionar directamente F12 para verlo en el navegador por defecto que tengas configurada.

Nos preguntara que si queremos guardar los cambios en Untitled, le diremos que si pero le cambiaremos el nombre Untitled a Index a la hora de guardarlo:



2010

13

¿Por qué llamar a nuestra página principal index.html?

Nombrar tu archivo index.html. Es esencial que tengas un archivo llamado index.html (o index.htm) en el directorio principal de tu página web. El HTML de la página principal (home) es llamado index.html porque el navegador cargará automáticamente index.html de cualquier directorio principal. Cualquier otra página que quieras mostrar en el navegador, tendrá que ser vinculado desde el index.html o desde otra página que vino de ella.

Dicho esto tu página debería de verse así:



2010

14

Cabecera

Bueno ahora cambiaremos nuestra cabecera, primero haz clic y arrastra con el ratón hasta que se quede sombreado toda la palabra "Encabezado" y después escribiremos el nombre de nuestra web. En el caso del ejemplo escribiremos "MOTOS MUTIERREZ".

Evidentemente no solo podemos escribir lo que queramos para vuestras futuras Webs, sino que además podremos introducir una imagen como logo.

De momento escribe solo el título...

Paso 1: Sombrear la palabra "encabezado":



2010

15

En la parte Inferior (área de diseño de la web) he sombreado la palabra "Encabezado", pero si te fijas en la parte de arriba (área de código HTML de la web) también se ha sombreado la palabra "Encabezado". Recomiendo tener la pantalla principal dividida (código y diseño) para asegurarnos bien de lo que estamos haciendo.

Paso 2: Simplemente escribe ahora "MOTOS MUTIERREZ" y te debería quedar así:



2010

16

Ahora bien para llevar un poco de orden crearemos una carpeta dentro de nuestro sitio llamada "objetos" y ahí será donde guardaremos todas las imágenes que necesitemos para nuestra web. Para ello selecciona la carpeta "Sitio-motos-Mutierrez" y luego con el botón derecho del ratón pulsa en "Nueva Carpeta" y la renombraremos como "objetos".

Para poder insertar las imágenes solo debemos ir al Menú Insertar y escoger la opción adecuada al objeto que queremos insertar.



2010

17

Si has hecho todo bien la página vista desde tu navegador debería verse así:



2010

18

Alinear Texto e Imágenes

Las 2 imágenes que insertamos quedaron hacia la izquierda y nosotros lo vamos a poner justo en el centro de la cabecera (esto va según gustos puedes colocar el encabezado a la izquierda, a la derecha o en el centro) para el curso lo colocaremos en el centro. Para ello haz clic sobre la imagen "MOTOS MUTIERREZ" y luego ves a "Formato>Alinear>Centro" y así quedara centrada nuestra cabecera. Esto se puede aplicar para alinear tanto imágenes como texto.

Haciendo un pequeño resumen has aprendido por el momento ha cambiar el color de fondo de la página y a insertar texto e imágenes, sin ningún tipo de tecnicismos.

En la siguiente lección veremos entre otras cosas como insertar unas etiquetas <meta> para nuestra web (ya te diré que es esto de las etiquetas <meta>) y



2010

19

como poner "hipervínculos" a nuestra cabecera (también te explicare en la lección 4 que es esto de los hipervínculos).

Etiquetas Meta (metatags)

Antes de continuar con el diseño de nuestra web, vamos a un apartado menos emocionante pero igual de importante a la hora de dar a conocer nuestra web. Lo que vamos a hacer será introducir unas etiquetas llamadas "<meta>".

Las etiquetas <meta> solían ser parte del algoritmo para organizar los resultados de una búsqueda, pero debido a la facilidad con que el autor del sitio puede manipularlas en la actualidad son pocos los buscadores que hacen uso de su contenido para posicionamiento. Sin embargo, las etiquetas <meta> aún son utilizadas para lo que fueron creadas, por ende es importante conocer cómo funcionan y utilizarlas adecuadamente.

Meta Keywords

Esta etiqueta esta supuesta a contener un listado de palabras y frases clave relevantes al contenido de la página. La idea es que cualquiera (incluyendo sistemas automatizados) pueda hacerse una idea de qué temas se tratan en la página mediante estas palabras clave.

Los buscadores ignoran esta información (o le dan muy poca importancia) para efectos de posicionamiento, pero es posible que se penalice a la página si las palabras clave no son relevantes o se repiten innecesariamente.

Meta Description

Esta etiqueta debe contener una descripción breve del contenido de la página. En la actualidad los buscadores la ignoran (o le dan muy poca importancia) para efectos de posicionamiento, pero a menudo consideran esta información para mostrarla a los usuarios como la descripción del enlace en los resultados de una búsqueda.

Por esto, la descripción debe ser preparada para atraer a visitantes. Lo recomendable es escribir una descripción objetiva sobre el contenido de la página, en 200 caracteres o menos.

Las etiquetas meta deben ir en la cabecera de un página HTML, es decir, entre las etiquetas <head> y </head>. El siguiente es un ejemplo del uso adecuado de etiquetas <meta> en el código:



2010

20

<head>

<title&gtMotos Mutierrez</title>

<meta name="description" content="La mayor superficie de motos por y para el motorista">

<meta name="keywords" content="moto, motos, casco, gomas, honda, suzuki, harley davidson">

</head>

Una vez visto la pequeña descripción de las etiquetas meta vamos a ver como las introducimos en nuestra web de motos. Para ello tienes que tener la ventana principal del Dreamweaver Dividida para que se vea tanto el código HTML como el diseño:



2010

21

En esta otra captura lo veras mejor, como ves tenemos la pantalla dividida, nos vamos con la barra lateral al principio del documento y entre <head> y </head> he introducido nuestras etiquetas <meta> referentes a la descripción de nuestro sitio y también con las palabras clave para los buscadores:

¿Qué es un hipervínculo?

Un hipervínculo es un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web, a un fichero, a una imagen, etc. Para navegar al destino al que apunta el enlace, se debe hacer clic sobre él. También se conocen como hiper-enlaces, enlaces o links.

Normalmente el destino se puede saber mirando la barra de estado del navegador cuando el ratón esté sobre el hipervínculo.

Dependiendo de cuál sea el destino, hacer clic en un hipervínculo puede hacer que ocurran varias cosas. Si el destino es otra página web, el navegador la cargará y la mostrará, pero si el destino es un documento de Word, el navegador nos dará la posibilidad de abrir una sesión de Word para visualizarlo o de guardar el archivo.

Por lo tanto, podemos usar los hipervínculos para conducir a los visitantes de nuestro sitio web por donde queramos. Además, si queremos que se pongan en contacto con nosotros, nada mejor que ofrecerles un hipervínculo a nuestro correo electrónico.



2010

22

Tipos de hipervínculos.

Existen varios tipos de hipervínculos. Vamos a ver los más usados.

Hipervínculo de texto: Un hipervínculo de texto es un enlace que se encuentra asociado a un texto, de forma que si hacemos clic sobre ese texto, navegamos dónde indique el hipervínculo. Por defecto, cuando creamos un hipervínculo de texto, el texto aparece subrayado y en un color distinto al del texto normal, de forma que el visitante sepa que existe ese enlace. Si volvemos a la página después de visitar el enlace, este aparecerá con otro tono también. Aunque es interesante diferenciar el hiperenlace, es posible que no queramos que aparezca así.

Hipervínculo de imagen: Un hipervínculo de imagen es un enlace que se encuentra asociado a una imagen, de forma que si hacemos clic sobre esa imagen, navegamos dónde indique el hipervínculo. Por defecto cuando creamos un hipervínculo de imagen, la imagen aparece rodeada de un borde con un color llamativo para que el visitante sepa que existe ese enlace (nosotros también aprenderemos a quitar ese borde, puesto que resulta más atractiva la imagen y la web en general sin ese borde). Por otra parte, los hipervínculos pueden referirse a páginas del mismo sitio web o de otros sitios web.

Hipervínculo local o interno: Un hipervínculo local o interno es un vínculo a una página que se encuentra en el mismo sitio web (sitio local). Así, para referirnos a ella tan solo basta con poner la ruta o dirección en el disco duro. Si se encuentra en la misma carpeta, basta con poner su nombre.

Hipervínculo externo: Un hipervínculo externo es un vínculo a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier otro lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la dirección completa de la página incluido http://www....

Hipervínculo a una dirección de correo electrónico: Un hipervínculo a una dirección de correo electrónico es un vínculo que contiene una dirección de correo. Al pulsar en él, automáticamente se abre el programa de correo que tenga el usuario instalado para poder escribir a esa dirección de correo.



2010

23

Estilos CSS

Después de haber insertado un hipervínculo a la cabecera si le das a vista previa en el navegador veras que la imagen te sale con un recuadro, ese recuadro indica que dicha imagen tiene un vínculo asignado. Por defecto el Dreamweaver siempre lo hará así.

Para hacer desaparecer el recuadro vamos a crearnos una hoja de estilos (CSS).

¿Qué es CSS?

Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.

¿Para qué sirve?

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.

Después de esta pequeña aclaración vamos a crearnos una hoja de estilos para nuestra web para ello vamos a "Archivo> Nuevo".



2010

24

Ahora entre todas las opciones que nos sale elegimos CSS y clic en "crear".

Hecho esto nos sale un documento nuevo con el siguiente código:

@charset "utf-8";



2010

25

/* CSS Document */

Dejamos el código como esta y en la siguiente line escribimos lo siguiente:

img { border: 0 }

este código hará que ninguna de las imágenes de nuestra web que tengan asignado un hipervínculo salgan con ese recuadro tan molesto. El nuevo documento te tiene que quedar así:

@charset "utf-8";

/* CSS Document */

img { border: 0 }

Ahora simplemente lo guardaremos en la raíz de nuestro sitio asignándole el nombre "estilo". Para ello nos vamos a "Archivo> Guardar como..." y ponemos "estilo".

Si he hecho todo bien el directorio de archivos de nuestro sitio nos quedará así:



2010

26

¿Cómo creamos el menú de navegación?

En primer lugar sombreamos con el cursor del ratón todas las palabras de la columna de la izquierda que nos vienen en nuestra plantilla (ventana Diseño)y como nuestra web trata sobre las motos pues escribiremos MARCAS que será una sección de nuestra web. Ahora vamos a poner 3 marcas de motos para nuestro ejemplo y eso lo haremos mediante las etiquetas <ul> y <li>, te explico que significan estas etiquetas:

Las listas no ordenadas van dentro de la etiqueta <ul> y de su cierre </ul>. Cada punto que queramos añadir a la lista, lo haremos dentro de la etiqueta <li> y su cierre </li>. Si quisiéramos una lista ordenada (en cada elemento de la lista iría un número en lugar de un punto) en vez de <ul> y su cierre </ul> pondríamos las etiquetas <ol> y su cierre </ol>.

Después de esta pequeña aclaración nos situamos justo debajo de donde he escrito MARCAS y en la ventana del código HTML (no en la de diseño escribimos lo siguiente):

<ul> <li>Honda</li> <li>Aprilia</li> <li>Ducati</li>

</ul>

Para que lo veas mejor te pongo una captura de pantalla:



2010

27

1.- Escribimos MARCAS en la ventana diseño.

2.- Escribimos el código en la ventana HTML.

Ahora nos situamos con el cursor del ratón justo debajo de DUCATI (en la ventana de Diseño)y ponemos ACCESORIOS que será otra sección de nuestra web. Y como en el paso anterior justo debajo de donde he escrito ACCESORIOS vamos a la ventana del código HTML (no en la de diseño escribimos lo siguiente):



2010

28

<ul> <li>Cascos</li> <li>Monos</li> <li>Botas</li>

</ul>

Si has hecho todo correctamente y si pulsas en el botón de vista previa te debería haber quedado algo así:

¿Que son los encabezados?

Existen 6 tipos de encabezados o headers y sirven para indicar aéreas correspondientes a títulos: h1, h2, h3, h4, h5, h6.

La sintaxis estándar seria esta: <h1>Titulo principal</h1>, <h2>Titulo secundario</h2>, <h3>Titulo terciario</h3>, etc...

Pero según lo que se comenta por diversos foros y webs del mundo SEO solo los tres primeros encabezados (<h1>, <h2> y <h3>) son los que aportan valor como palabras clave relevantes para una web.

Consejos a la hora de poner encabezados:

• La cabecera h1 deberá ir una por pagina y a ser posible asignada al título de la misma.



2010

29

• La cabecera h2 deberá definir títulos de secciones dentro de una página. • La cabecera h3 es la de menor jerarquía de las tres y la deberíamos

usar para títulos de artículos o sub-secciones, una buena opción es usarlo para asignar enlaces.

• h4 y h6 tienen un valor igual o incluso inferior al texto normal por lo que no resulta muy beneficioso usarlos.

• Los títulos no deben de ser demasiado largos ya que nos pueden clasificar como SPAM haciéndonos un flaco favor a nuestra web.

La forma de entender los encabezados es compararlas con un libro de recetas:

<h1>Índice general</h1> <h2>Carnes</h2> <h3>Solomillo al cabrales</h3> <p>Texto normal</p> <h3>Conejo al ajillo</h3> <p>Texto normal<p> <h2>Postres</h2> <h3>Flan de huevo</h3> <p>Texto normal<p> <h3>Bizcocho</h3> <p>Texto normal</p> <h3>Tarta de manzana</h3>

Como vemos es menos común que <h1> y <h2> se asignen a enlaces, siendo los <h3> los más recomendables para enlazar a los temas principales que estén disponibles en una web.

¿Qué son las plantillas?

Dreamweaver nos ofrece la posibilidad de crearnos plantillas, como si usáramos una página Maestra. Esto es muy útil cuando tenemos muchas páginas creadas desde una misma plantilla y queremos modificar algo en todas ellas o en alguna de ellas.

Imaginemos en una web de 100 páginas y que quisierais modificar algo en el menú de navegación, demasiado trabajo ir modificando una a una no? Pues solo modificando la plantilla Maestra los cambios se nos asignaran a todas ellas.

¿Y te preguntaras? ¿Por qué le ponemos el vínculo si todavía no he creado la página honda.html? Pues tiene su explicación y te lo diré más adelante."

Ha llegado el momento de aclararlo. Veras una vez que tenemos terminada nuestra página principal es el momento de crearnos la plantilla y usaremos la



2010

30

plantilla con sus imágenes, su menú de navegación, su cabecera y su pie para las siguientes páginas de nuestra web con todo el ahorro de trabajo que eso conlleva. Por ello en la lección 5 comentaba de poner los hipervínculos al menú de navegación aunque no tuviésemos de momento ninguna página vinculada a ellos.

¿Cómo creo la plantilla?

Lo primero que vamos a hacer será seleccionar toda nuestra web, para ello dirige el cursor del ratón hacia uno de los laterales de la página y selecciónalo con un solo clic. En la captura siguiente lo veras mejor (haz clic en uno de los laterales que he marcado en rojo):



2010

31

Una vez que he hecho la selección nos vamos a: "Insertar>Objetos de Plantilla>Región Editable"

El Dreamweaver nos dirá que esto hará que el documento se convierta en una plantilla, le damos a aceptar.

Ahora para guardar esta plantilla nos vamos a: "Insertar>Objetos de Plantilla>Crear Plantilla"

Nos saldrá la siguiente imagen:



2010

32

En esta ventana podremos ver las plantillas que tenemos para nuestro sitio, evidentemente no tenemos ninguna. En descripción podemos poner algo que identifique a nuestra plantilla yo lo he dejado en blanco y por ultimo en Guardar como ingresan el nombre que quieran, en mi caso le puse Plantilla web, luego aceptan, ya tenemos nuestra plantilla creada y guardada. Si observan en pantalla directorio (a la derecha) donde tienen todos los archivos de su web notarán que se ha creado una carpeta llamada Templates pues ahí es donde se ha guardado la plantilla recién creada.

Curso Dreamweaver

Documents

Transcript of Curso Dreamweaver