Cómo hacer una web en Dreamweaver. Principios básicos

Diseño y creación web

Dreamweaver permite crear páginas web desde cero y tan complicadas como queramos. En un mundo en el que los gestores de contenido como WordPress, Joolma, Prestashop o Drupal, por nombrar algunos, cubren la mayor parte del mercado, el modo de programar una web en Dreamweaver es más educativo que práctico.

Suscríbete a mi canal: 

Es posible que trabajes con diferentes versiones del programa, que seas un nostálgico y sigas con la versión de Macromedia, antes de que lo absorbiera Adobe. Pero para lo que voy a explicar en este artículo no es importante la versión que uses para hacer la web en Dreamweaver.

Vamos por el principio, como si fuera la primera vez que nos ponemos delante del programa, es decir, como haría cualquier diseñador, con el ordenador o computadora apagada y con papel y lápiz en la mano.

Crear la estructura de una web en Dreamweaver

Hay varios detalles a tener en cuenta, si tienes algún tipo de conocimientos de páginas web puedes plantar si hacer el sitio en PHPHTML o HTLL5, utilizar animaciones o acciones con JavaScript, crear una única página o secciones dentro de includes, o incluso cambiar el aspecto con hojas de estilo CSS.

Voy a pensar que todo te suena a chino, como si fuera la primera vez que lees estas palabras raras, cuando yo empecé tampoco me enteraba de nada.

Decidir los apartados y páginas que compondrán la web

Dreamweaver permite trabajar de forma gráfica, por lo que es fácil ignorar el lenguaje de programación que vamos a usar, ya que el programa irá generando automáticamente el código según colocamos los elementos.

Pero debemos decidir que apartados van a componer nuestra web, las imágenes que utilizaremos, si tendrá un formulario de contacto o el tipo de menú que queremos utilizar. Todo lo tenemos que hacer en un papel, os puedo asegurar que es más rápido que ir probando en el ordenador si queda bien o mal.

boceto web en dreamweaver

Todo esto es muy importante para conocer la estructura de archivos que necesitamos, hay que ser organizados, ya que, si colocamos todos los archivos dentro de la misma carpeta, tendremos un problema de accesibilidad, sobre todo si queremos realizar algún cambio en el futuro.

Debemos agrupar los elementos según las necesidades:

  • Los archivos principales en la raíz del sitio, que en nuestro ordenador será una carpeta que elijamos y en el servidor online el espacio que esté dedicado a colgar la web. Estos archivos son los de extensión .html o .php, aunque hay excepciones más avanzadas que no comentaré ahora.
  • Los archivos dinámicos, de estilos, imágenes, multimedia... deben ir separados en carpetas, así los localizaremos enseguida.
estructura web en dreamweaver

Crear el diseño gráfico de la web

Una vez creado el boceto en papel, lo habitual es utilizar un programa de edición como PhotoshopGimp, Corel Photo Paint o cualquier programa que permitiera trabajar en capas, para componer visualmente el aspecto que tendremos, los fondos que utilizaremos, la colocación de los elementos, las distancias y márgenes a utilizar...

En este paso es donde se marcarán los cortes, las capas y los lugares que luego llevaremos a la web en Dreamweaver. Puede que a la hora de trasladar el diseño nos encontremos con algunas limitaciones, pero ya se solucionarán cuando lleguen, ahora hay que dejar volar la imaginación.

diseño en photoshop de web en dreamweaver

Configurar la zona de trabajo de Dreamweaver

Ahora que lo tenemos todo bien planteado podemos abrir Dreamweaver para empezar a preparar la web.

Antes que nada, hay configurar las opciones más importantes que vamos a necesitar, principalmente la gestión de los archivos y la conexión con el servidor.

Adquirir un servicio de alojamiento o hosting

Aunque siempre recomiendo ir directamente a un servicio de pago, por las prestaciones y servicios que ofrecen, siempre más superior que los que puedan ofrecer los servicios gratuitos, en esta ocasión, y al tratarse de un ejercicio sencillo, vamos a registrarnos en uno sin coste.

El elegido es BYET Internet Services, por ninguna razón en particular, sencillamente porque es gratuito como otros que podáis encontrar.

registro en byte internet services

Al completar el registro se abrirá una ventana con la información necesaria para acceder al servidor y recibiremos un correo electrónico con datos importantes de conexión, los referentes a la cuenta FTP.

conexion-FTP-con-byte
email-de-conexion-FTP-con-byte

Los datos de conexión FTP los podemos localizar también dentro del servidor, en el apartado "Archivos > Cuentas FTP"

Crear un sitio en Dreamweaver conectado al servidor

Para trabajar con un servidor en Dreamweaver se necesita tener localizada una carpeta en nuestro ordenador para poder sincronizar la web con la carpeta del servidor.

Aunque el ejemplo lo realizaré en Dreamweaver 8, puede extrapolarse a versiones posteriores, ya que los datos de conexión son los mismos.

Desde el menú superior picamos en "Sitio" y añadimos un nuevo sitio. Se abrirá una ventana donde escribiremos un nombre para identificar la carpeta en nuestro ordenador y el dominio donde alojaremos la web en el servidor, podemos encontrarlo en el correo o en la pantalla anterior.

Cuando estén rellenados los campos picamos en "Siguiente".

nuevo sitio en Dreamweaver

En las ventanas sucesivas nos preguntarán si queremos utilizar alguna tecnología de servidor, si es así seleccionamos la que corresponda y si vamos a usar sólo HTML lo dejamos como está. También tendremos que elegir la ubicación de la carpeta en nuestro ordenador.

El último paso es configurar la conexión con el servidor, donde colocaremos en las casillas los datos que nos enviaron por correo, o de la pantalla de bienvenida, que hacen referencia a la conexión FTP.

En la carpeta del servidor hay que poner "htdocs" que es la que el servidor asigna a los archivos de la web. (en otros servidores diferentes al que hemos escogido, puede que la carpeta que utilicen se llame "public_html", en ese caso hay que comprobarlo).

  • ¿Cómo conecta con su servidor remoto? = FTP
  • ¿Cuál es el nombre de host o la dirección FTP del servidor Web? = Ver FTP Server del correo
  • ¿En qué carpeta del servidor desea almacenar los archivos? = htdocs
  • ¿Cuál es su conexión FTP? = Ver FTP Login del correo
  • ¿Cuál es su contraseña FTP? = Ver FTP Password del correo

Antes de pasar al siguiente punto, haremos una prueba de conexión pulsando "Conexión de prueba". Debe aparecer un mensaje como que ha conectado correctamente con el servidor.

Las dos ventanas siguientes son para realizar colaboraciones y el resumen de la configuración.

Una vez finalizado tendremos el sitio preparado para empezar a trabajar, colocar en la carpeta del sitio una web que ya tuviéramos hecha o empezar de cero creando nuevos archivos.

Conexión a FTP del servidor

Automáticamente aparecerá en el panel de archivos la ruta de la carpeta de nuestro ordenador y los botones para sincronizar los archivos con el servidor.

Si no tenéis a la vista este panel, aparecerá presionando F8, o desde el menú superior en "Ventana > Archivos".

Sincronizar los archivos de Dreamweaver con el servidor

Esta operación se realiza desde el panel de Archivos. Disponemos de unos botones y unos menús para controlar la subida y bajada de los archivos del servidor.

Hay que tener cuidado a la hora de sincronizar, ya que si los archivos de nuestro ordenador han sido modificados y los sustituimos por los que hay en el servidor, perderemos los últimos cambios realizados.

Es mejor utilizar las flechas de subida y bajada, seleccionado los archivos sobre los que queremos actuar y utilizar el botón de sincronizar sólo cuando queramos subir o descargar un sitio completo.

Las opciones son las siguientes:

Panel archivos de Dreamweaver

¿Quieres saber más sobre el diseño web e internet? Pincha aquí

Juan Martín

Juan Martín

Soy el creador y autor del blog "J Solución creativa", una persona como tú que intenta ganarse la vida en internet. Intento llenar mi blog con contenido útil que pueda ayudar a quien lo necesite y conseguir, con esfuerzo, generar autoempleo y vivir de ello. Si te parece interesante puedes apuntarte a mi newsletter.

Deja un comentario

1 Comentario

  1. Daniel YT_

    Buena pagina gracias

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad.

Responsable de los datos: Juan Martín Pascual. Finalidad: Controlar spam, gestión y moderación de comentarios. Legitimación: Tu consentimiento expreso. Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos