Unidad 1. Conceptos básicos de Dreamweaver CS4 (I)


1.1. Qué es Dreamweaver CS4

Dreamweaver CS4 es un software fácil de usar que permite crear páginas web profesionales.



Las funciones de edición visual de Dreamweaver CS4 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.

Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.

Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.

Las páginas web están escritas en HTML. Si no conoces las características básicas de HTML puedes verlas aquí.

1.2. Novedades de Dreamweaver CS4

En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.



Nueva interfaz de usuario. Dreamweaver CS4 presenta una nueva interfaz que permite cambiar fácilmente de espacio de trabajo y adaptar los paneles de forma rápida y cómoda. Esta nueva interfaz es muy parecida a los demás programas de Adobe, como Photoshop, Illustrator, etc. Existen distintos espacios de trabajo adecuados para cada ocasión (clásico, programador, diseñador, etc. ) pero también tenemos la posibilidad de crear el nuestro propio de forma muy sencilla.

Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal y como veríamos la página en un navegador. Si hemos incluido elementos interactivos en nuestra página, como menús desplegables, menús tipo acordeón, widgets, etc, podremos interactuar con ellos en la vista en vivo, de la misma forma que lo haríamos en un navegador.



Navegador de código. La función de Navegador de código muestra las fuentes de código que afectan a la selección que tengamos activa, pueden ser CSS (hojas de estilos en cascada), funciones JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.



La nueva barra de Archivos relacionados muestra todos los archivos que de una forma u otra contribuyen al diseño final de nuestra página, como hojas de estilo css, archivos javascript, etc. Mediante esta nueva utilidad podemos pasar de un archivo a otro cómodamente y tener una visión mucho más clara de todos los archivos con los que estamos trabajando en nuestro sitio web.





Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda dividido en propiedades HTML (el que conocíamos de otras versiones) y CSS. Éste último nos permite crear y editar nuestros estilos de forma cómoda y sencilla.





Objetos inteligentes de imagen. Dreamweaver CS4 incluye la posibilidad de crear objetos inteligentes de imagen. Ahora podemos incluir un archivo psd en las páginas web, de forma que el archivo original de Photoshop y la imagen optimizada en Dreamweaver se mantienen vinculados. Podemos redimensionar o cambiar características de los objetos inteligentes de imagen directamente desde Dreamweaver.

Adobe InContext Editing. Mediante Adobe InContext Editing creamos regiones editables. De esta forma los usuarios previamente habilitados podrán actualizar el contenido de estas regiones de la página web directamente desde el navegador, sin necesidad de tener un editor de páginas web instalado.

Software Subversion. Subversion es uno de los más usados sistemas de control de versiones para equipos de desarrollo. Dreamweaver CS4 es capaz de sincronizarse con el repositorio de versiones, facilitando el trabajo a los profesionales que empleen este sistema.

Conjuntos de datos. Dreamweaver CS4 permite la creación de páginas dinámicas de forma sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidad de conocer en profundidad su funcionamiento. Resulta muy sencillo crear regiones dinámicas con la tecnología Spry.

1.3. Editar páginas web

Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.

Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a aprenderlo rápidamente.

Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.

Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.

1.4. Cómo tener una página en Internet

Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas.

Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.

Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com.

En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados.

Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.

En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.

Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se encuentre a disposición de todo el mundo en Internet.

Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán.



Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.

Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores (los que utilizan linux) distinguen entre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.

1.5. Arrancar y cerrar Dreamweaver CS4



Veamos las dos formas básicas de arrancar Dreamweaver CS4.

Desde el botón Inicio (Windows Vista) situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Adobe Dreamweaver CS4 y haz clic sobre él para arrancar el programa.

Desde el icono de Dreamweaver CS4 del Escritorio.

Puedes arrancar Dreamweaver CS4 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aquí.

Para cerrar Dreamweaver CS4, podemos utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón cerrar, en la esquina superior derecha, como en cualquier ventana de Windows.

Pulsar la combinación de teclas Alt + F4.

Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.

1.6. Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).

Pulsar la combinación de teclas Ctrl + O.

Hacer clic sobre el menú Archivo y elegir la opción Abrir.

Hacer doble clic sobre el archivo en la ventana del sitio.

Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir con → Adobe Dreamweaver CS4.



Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.:

Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible).

Pulsar la combinación de teclas Ctrl + N.

Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.

En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuación pulsamos el botón Crear.



Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.

Hacer clic en el botón Guardar de la barra de herramientas estándar.

Pulsar la combinación de teclas Ctrl + S.

Hacer clic sobre el menú Archivo y elegir la opción Guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones.

Hacer clic en el botón Guardar todo de la barra de herramientas estándar.

Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.

Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento

1.7. Mi primera página

Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es.



Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la columna Diseño dejamos la opción por defecto: <ninguno>.

Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:



Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento.

Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

Entonces se abrirá una ventana como la que aparece a continuación:



En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul.

Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera página.

Para aplicar los cambios, pulsa sobre el botón Aceptar.

Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseño de la página Web y reducen el tamaño del archivo.

Selecciona la primera línea. En Regla de destino selecciona Estilo en línea, para aplicar el formato solo al texto seleccionado. También aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y como muestra la imagen siguiente:



Observa que hemos centrado el texto pulsando en el botón.

Selecciona la segunda línea de texto, y seleccionando como antes < estilo en línea >, marca los botones para ponerlo en negrita y cursiva respectivamente.

Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p.

Ahora, centra el párrafo como hemos visto hasta ahora, pulsando en.

Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel de Propiedades a las propiedades de HTML.

En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:



Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar.

Puedes llamar al documento como lo desees, pero la extensión ha de ser htm o html. Por ejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpeta que la imagen descargada.

Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.



Si pulsas aquí podrás ver cómo debería haber quedado la página después de haber seguido todos los pasos anteriores. Compara esta página con la tuya, para ver si lo has hecho todo bien.

Unidad 2. El entorno de Dreamweaver CS4 (I)

Vamos a ver cuáles son los elementos básicos de Dreamweaver CS4, la pantalla, las barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.

2.1. La pantalla inicial



Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.



2.2. Las barras

La barra de la aplicación.



La barra la aplicación es una novedad en Dreamweaver CS4. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior.

Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.



Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que ya veremos.



Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. Lo veremos más adelante.

Los menús, están agrupados en categorías.



Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a través de los menús, aunque en ocasiones nos envíen a los paneles.

Las pestañas de documento.



Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa, o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos.

Dreamweaver CS4 añade una novedad. Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo.

La barra de estado.



Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo.

A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (para desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su codificación.



Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde el menú Ver → Barras de herramientas.





La barra de herramientas estándar.



La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.

La barra de herramientas de documento.



La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.

La barra de representación de estilos.



Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso.



Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.

2.3. Inspectores y paneles

Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales.

A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.

El inspector de Propiedades



El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará su ubicación, dimensiones, peso, clase, etc...

Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando.

El panel Insertar.



En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.

Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como panel flotante o como una barra de herramientas integrada en la ventana de trabajo.

Personalizar el área de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este avanzado.

2.4. Vistas de un documento



Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento:



La vista Diseño

La vista Diseño permite trabajar con el editor visual.



Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

La vista Código

La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.



El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño

La vista Dividir

La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona superior muestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.





La vista en Vivo

La vista en Vivo es otra de las novedades que trae Dreamweaver CS4. Nos ofrece una vista del resultado final no editable. A diferencia de la vista Diseño, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con el navegador.

La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeños cambios se previsualizan correctamente en el navegador.

No obstante, siempre hay que comprobar la página con los principales navegadores del mercado, que serán los que emplearán nuestros visitantes. De hecho, a lo largo del curso verás cómo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseño, en la vista en vivo o en el navegador.



La vista Código en vivo

Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin que podamos editar el código. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente código fuente.

2.5. La ayuda





A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas, por índice o por contenido, si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1.

Acceder a una Introducción a InContext Editing de la página de Adobe, que muestra un resumen de esta herramienta.

Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML.

Acceder a Dreamweaver Support Center en la web.

Acceder al Foros en línea de Adobe.

Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los términos de la búsqueda y buscar, iremos a la ayuda online de Adobe.



Unidad 3. Configurar un sitio local (I)

En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.

3.1. Introducción

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.

Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto.

La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.

La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.

Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.es en el navegador, éste intentaría cargar la página http://www.aulaclic.com/index.htm, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm, y no se podría navegar por el sitio a no ser que se escribiese exactamente http://www.aulaclic.es/nombrepagina.htm

3.2. Crear o editar un sitio web sin conexión a Internet





Una vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio.

Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio.

Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos.

También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio...







En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir o modificar las características del sitio.



Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.

Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.

Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo único que empleemos de momento.

Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de sitios.

La Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.

Estas dos características son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan.

Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.

Aunque sí destacaremos la opción Usar vínculos de distinción entre mayúsculas y minúsculas. Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows, muchos servidores distinguen entre mayúsculas y minúsculas. Así Dreamweaver también lo hará.

Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas.

3.3. Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.



También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable Archivos.

3.4. Ver el sitio

El panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles más importantes de Dreamweaver, ya que nos da acceso a los archivo del sito.



En este caso vemos todos los documentos creados en nuestro sitio buscar.htm, paraplantilla.htm, platossemana.htm, postresemana.htm y las carpetas imagenes y varios.

Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar sobre el botón que aparece en la parte superior del panel y de la ventana.

Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. También el servidor de pruebas o las bases de datos.

En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a la derecha) con nuestros archivos.



Dreamweaver guarda la caché de nuestro sitio, cómo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver, automáticamente actualizará todas las referencias a ese archivo (enlaces desde otras páginas, origen de la imagen, etc).

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc, ya que Dreamweaver simplemente no encontrará la página.

Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventana similar a ésta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados.



Simplemente hay que pulsar sobre el botón Actualizar, aunque esto dependerá de si tenemos configurada la opción Mensaje al actualizar vínculos si movemos archivos. Lo cual podemos establecer desde el menú Edición, opción Preferencias, categoría General.

7373180180

DICCIONARIO TERMINOLÓGICO




1. Código: Se refiere a las instrucciones contenidas en un programa, y entendibles por el ordenador. Las aplicaciones normales pueden tener miles de líneas de código que es necesario mantener y actualizar.





2. Vista en vivo: La Vista en vivo nos permite trabajar con una vista real, tal y como veríamos la página en un navegador. Si hemos incluido elementos interactivos en nuestra página, como menús desplegables, menús tipo acordeón, widgets, etc, podremos interactuar con ellos en la vista en vivo, de la misma forma que lo haríamos en un navegador.



3. Navegador de código: La función de Navegador de código muestra las fuentes de código que afectan a la selección que tengamos activa, pueden ser CSS (hojas de estilos en cascada), funciones JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.



4. Conjunto de datos: Dreamweaver CS4 permite la creación de páginas dinámicas de forma sencilla, pudiendo utilizar tanto bases de datos como archivos XML, sin necesidad de conocer en profundidad su funcionamiento. Resulta muy sencillo crear regiones dinámicas con la tecnología Spry.



5. Tablas: Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar



6. Marcos: Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.



7. Formularios: Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas



8. Campo de texto y área de texto: Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.



9. Las plantillas: Las plantillas son una especie de copia de la página en la que van a estar basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que serán fijas, que no podrán ser modificadas



10. Las barras: Esta barra contiene los siguientes elementos: los menús, varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.



11. La barra de herramientas estándar: La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer.



12. Base de datos

Conjunto de datos almacenados en tablas. Cada fila de una tabla constituye un registro de datos, y cada columna constituye un campo del registro.

13. Controlador de base de datos

Software que actúa como intérprete entre una aplicación Web y una base de datos. Los datos de una base de datos se almacenan en un formato propio de dicha base de datos.

14. Sistema de administración de base de datos

(DBMS o sistema de base de datos) Software que se utiliza para crear y manipular bases de datos. Entre los sistemas de bases de datos más habituales figuran Microsoft Access, Oracle 9i y MySQL.

15. Página dinámica

Página Web personalizada por el servidor de aplicaciones antes de que la página se envíe a un navegador.

16. Base de datos relacional

Base de datos que contiene múltiples tablas que comparten datos. La siguiente base de datos es relacional porque dos tablas comparten la columna DepartmentID.

17. Tecnología de servidor

Tecnología que utiliza un servidor de aplicaciones para modificar páginas dinámicas en tiempo de ejecución.

18. Página estática

Página Web que el servidor de aplicaciones no modifica antes de que la página se envíe a un navegador. Para más información.

19. Aplicación Web

Sitio Web que contiene páginas con contenido sin determinar, parcialmente o en su totalidad. El contenido final de estas páginas se determina sólo cuando un visitante solicita una página del servidor Web.

20. Servidor Web

Software que suministra páginas Web en respuesta a las peticiones de los navegadores Web. La petición de una página se genera cuando un visitante hace clic en un vínculo de una página Web en el navegador, elige un marcador en el navegador o introduce un URL en el cuadro de texto Dirección del navegador.

21. Cookies

Archivos que se guardan en la PC, por algún cierto tiempo, hasta que el usuario decide modificar o realizar una acción con esta.

22. Accesibilidad Web

Indica la capacidad de acceso a la Web y sus contenidos por las personas de todo el mundo, independientemente de sus capacidades físicas, intelectuales o técnicas. El organismo encargado de esto es el W3C, especialmente su grupo de trabajo WAI.

23. Html

Es el lenguaje de marcado predominante para la elaboración de páginas Web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes.



24. Enlace: Link. Refiriéndonos a Internet y páginas Web es un unión entre varios documentos dentro de un mismo servidor, o con mayor frecuencia, la posibilidad de acceder mediante la pulsación de una palabra o frase, generalmente resaltada y subrayada, a otra página situada en un ordenador distinto y ubicado en cualquier lugar del mundo, ya que en el momento de la creación de ese enlace se le ha asignado la dirección o URL a la que ha de dirigirse.



25. Vista en vivo: te permite ver lo que tu estas escribiendo y no te deja ver los códigos que se utilizan en el programa sirve mas para dreamweaver ya que tu eliges si escribir en códigos o escribir normal.



26. Dividir: te permite utilizar la vista en vivo y en códigos en una misma pagina.



27. Sitios remotos: Definir un sitio remoto significa establecer una configuración de modo que Dreamweaver sea capaz de comunicarse directamente con un servidor en Internet (por eso se llama remoto) y así poder trabajar a la vez con tus archivos en el sitio local, es decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor, en Internet.



28. PHP: PHP es un lenguaje de programación. Dreamweaver contiene las suficientes herramientas como para manejarte sencillamente sin que tengas que saber ni una línea de código



29. Vista en código: te permite escribir la codificación para que el ordenador pueda entender aunque en el programa dreamweaver es preferible escribir en vista en vivo ya que no hay equivocaciones con la codificación.

30. Hipertexto: Es una de las características de las páginas de Internet. Se le denomina así a la capacidad de saltar de un documento a otro por medio de imágenes o de "puntos calientes" en el propio texto con solo pulsar la tecla del ratón sobre él, lo que ermite "navegar" ya sea dentro de una Web o hacia otras. Se pueden resaltar de muchas formas. Ver también Enlaces.



31. JavaScript: Lenguaje de programación de páginas Web (no confundir con el Java), que lo sacó la empresa Netscape, inicialmente con el nombre de LiveScript, y su finalidad es la confección de Scripts.



32. Lenguaje de programación: Son secuencias de instrucciones, mas o menos parecidas al lenguaje humano, que permiten, una vez traducidas o compiladas, ejecutar las órdenes incluidas en el programa



33. Multimedia: Se denomina así a los sistemas o aplicaciones que permiten la utilización de sonido e imágenes



34. Hojas de estilo: Generalmente referidas a la programación Web, una hoja de estilo es la que alberga el formato que se va a utilizar: el tipo de letra, los márgenes, tamaños de los componentes, en definitiva, como va a ser cada componente. Entre las formas más comunes que se utilizan en la actualidad son las CSS (Cascading Style Sheets), hojas de estilo en cascada, que es la normalizada para documentos HTML.



35. Mensaje emergente: Este comportamiento es útil para poder enviar mensajes al usuario. Ten en cuenta que no deberás abusar de ellos, pues a la larga pueden resultar un poco incómodos, utilízalos con un objetivo concreto y no porque quieras atraer la atención del usuario. Mientras se muestre el mensaje, la ventana del navegador quedará bloqueada.



36. Opciones avanzadas: Opciones avanzadas te muestra más opciones además de las existentes.



37. Los selectores: Podemos definir una clase y aplicársela a la tabla desde el panel Propiedades, o si es una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.



38. Filtro: Un filtro se aplica sobre un dataset y descarta las filas que no lo cumpla.

Podrás aplicar un filtro dinámicamente y hacer que se aplique cuando se produzca determinado evento.



39. La barra de herramientas de documento: La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.



40. La barra de representación de estilos: Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso.



41. Marquesina: Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea.



42. Regla horizontal: El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Una regla horizontal no es más que una línea que cruza horizontalmente al elemento que la contiene.



43. Hoja de estilos: nos permite seleccionar una hoja ya existente. Las reglas se añadirán a ella.



44. Estructura de base de datos: Se refiere a los tipos de datos, los vínculos y las restricciones que deben cumplirse para los datos



45. Etiquetas: HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web.



46. Celdas: En una matriz, cualquiera de las posiciones que se identifican por un número de fila y columna. Es típico utilizarlo hablando de celdas de memoria, que es el funcionamiento de la RAM en la que cada posición se identifica con una celda, o bien en hojas de cálculo, que en principio no deja de ser, cada página, una matriz de dos dimensiones.



47. Columnas: En una tabla o fichero de base de datos, una columna es lo que anteriormente se denominaba como campo. Las columnas de la tabla indican los datos que se van a introducir en la tabla, el tipo y restricciones sobre ellos, conformando así la estructura de la tabla. Las filas serán las entradas reales de datos



48. PHP: Personal Home Page. Página de inicio personal. Esta era la denominación del primer PHP realizado por Rasmus Lerdorf. En este momento estamos en la versión 4 de este lenguaje de programación destinado a la Red, y que una vez interpretado por el servidor web genera código HTML







49. Fuente: Lenguaje fuente es el que utiliza el programador, con la sintaxis que corresponda y perfectamente legible. A partir de él, mediante los compiladores, salvo en lenguajes de programación concretos, se genera el código que el ordenador es capaz de entender



50. Combinación de celdas: Es cuando hay 2 o más celdas fusionadas o combinadas para así hacerse una sola.