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.
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 PHP, HTML 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.
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.
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 Photoshop, Gimp, 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.
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.
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.
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".
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.
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:
¿Quieres saber más sobre el diseño web e internet? Pincha aquí
Buena pagina gracias