Proyecto Web

Introducción

En el  artículo anterior, vimos como instalar un blog de wordpress, en esta serie de artículos, nos centraremos en cómo crear un sitio web desde cero.

¿Por qué elegir Dreamweaver CS5?, es un diseñador web que no requiere conocimientos previos de ningún lenguaje web. Como veremos, trabajando desde la vista de diseñador, podremos realizar cualquier trabajo lo que nos facilitará nuestra realizar un sitio web sin amplios conocimientos.

Antes de empezar a explicar la interfaz de Dreamweaver, existen algunos conocimientos previos que deberíais de saber. No son precisos memorizarlos, pero si conocerlos, al menos que os suenen. Posiblemente hayáis oído hablar de HTML, es el lenguaje de programación que se utiliza en la creación de una página web, iremos explicando las etiquetas más importantes en los diferentes artículos. En la actualidad, el HTML ha pasado a llamarse XHTML, ¿qué diferencias existe entre ellos?, la mayor diferencia es que en el XHTML el diseño web trabaja de forma separada el estilo, de la estructura. A que llamamos estructura y diseño, estructura son los colores, el tipo de letra, el tamaño, el lugar donde lo colocamos, y el diseño los componentes utilizados (tablas, imágenes, flash,…). Todo esto lo iremos viendo con mucha más profundidad en los siguientes artículos.

Interfaz de Dreamweaver CS5

Pantalla de Bienvenida

Desde la pantalla de bienvenida, podemos, desde abrir un elemento reciente, en el que estemos trabajando, abrir un documento que queremos añadir, o manipular, crear documentos nuevos en diferentes formatos (html, php, xml, javascript,etc) y elementos destacados. Los elementos destacados, pueden ser muy útiles, ya que son videos de métodos de trabajo o la utilización de algunas herramientas específicas.

Si quisiéramos no ver la pantalla de bienvenida al iniciar Dreamweaver CS5, iríamos a Edición->Preferencias->General->Opciones de documento, y deseleccionamos la casilla de “Mostrar pantalla de bienvenida”, clicamos en aceptar y ya no la veremos al iniciar, si queremos volverla a ver, solo tendremos que hacer la misma operación a la inversa.

Barra insertar

Podemos encontrar la barra insertar, que se muestra en la imagen de abajo. Una barra muy útil, ya que la mayoría de herramientas que utilizaremos, están en ella o las podemos añadir, esto nos facilita el no tener que ir buscando las herramientas en las diferentes ventanas.

Como en la mayoría de barras, pueden ser personalizadas, aunque con limitaciones. Como vemos en la imagen de abajo, vemos que podemos verla como menú o como fichas que es, como se encuentra en la imagen de arriba.

Como menú, vemos que el aspecto ha cambiado, ya no tenemos las pestañas que nos indicaban las herramientas de otras secciones, como formularios, datos, spry, etc.

Pero si clicamos en el triángulo invertido que se encuentra al lado de “común“, veremos que encontramos en forma de menú, las pestañas que contenía en el modo de fichas.

Barra de herramientas del documento

En la barra de herramientas del documento, se pueden ver aspectos esenciales, que profundizaremos en tutoriales posteriores.

Describiremos a groso modo la barra y las herramientas más significativas. Como vemos, encontramos el botón “Diseño” seleccionado, está es la vista que normalmente utilizaremos, para personas que controlen el código html, algún lenguaje de programación o simplemente se quiere ver el código. Existen dos maneras de verlo, una como vemos en la imagen superior, encontramos el botón “Dividir”, pulsando ese botón, veremos la pantalla dividida, viendo en una parte el diseño y en otra el código. Y la otra, pulsando el botón “Código”,  en el que veremos solamente el código de la página y perderemos de vista el diseño.

Más adelante encontramos una bola del mundo donde podemos agregar los diferentes navegadores en los que queremos ver la página, aunque normalmente ya nos reconoce los que tenemos instalados.

Pulsando sobre el o pulsando la tecla F12, veremos en el navegador el resultado del trabajo que estamos realizando.

También vemos una caja de texto donde pone “Documento sin título”  allí escribiremos el título que pondremos a la página y que al pulsar F12 veremos nos aparece en la pestaña del navegador o en la parte de arriba de la ventana del mismo.

Inspector de Propiedades

En el inspector de propiedades como vemos en la imagen de arriba, podemos visualizar y cambiar las propiedades de los estilos CSS, que en posteriores artículos explicaremos.

También podemos apreciar que nos aparecen propiedades de la parte del documento, donde podemos aplicar etiquetas HTML que personalicen nuestro trabajo.

El inspector de propiedades es una de las partes que se convertirá en imprescindible en el proceso de un diseño web.

Paneles y grupos de paneles

A la derecha de la pantalla, podemos apreciar que nos aparece un grupo de símbolos, eso son los paneles en los que podemos encontrar los documentos que vamos creando, los comportamientos que podemos, o hemos aplicado, los CSS creados.

Para visualizarlo mejor, podemos desplegarlo como vemos en la imagen de arriba, pulsando en las dos flechas situadas en la parte superior derecha del grupo de paneles. Así podremos trabajar viendo todo lo que contienen los paneles, si nos molestase para trabajar, mejor dejarlo plegado y pulsar en el icono del panel que necesitemos en cada momento.

Múltiples documentos

Conforme vayamos trabajando, iremos creando diferentes documentos, y en ocasiones, podemos querer tener varios de ellos abiertos, como apreciamos en la imagen de arriba, nos aparecen fichas con los diferentes documento abiertos o creados. Con tan solo pulsar en las diferentes pestañas, podemos navegar por ellos sin ningún problema.

Bueno, con esto terminamos en el tutorial dedicado a describir las partes más esenciales del interfaz de Dreamweaver CS5 para que os familiaricéis con él.

Para cualquier consulta, podéis escribir a: info@asmaponline.com

Cuando empecemos a tener diferentes conceptos de diseño web, nos iremos dando cuenta de la importancia de cuidar el diseño, para hacer de nuestro sitio web un escaparate online (escaparates online enlazar), veremos la posibilidad de un negocio y necesitaremos realizar una campaña de marketing online y necesitaremos trabajar el posicionamiento SEO para ser vistos, pero todo esto son cosas que nos iremos encontrando en este mundo tan extenso de internet.

8 comentarios para “Interfaz de Dreamweaver CS5”