Inicio > SUB I :UNIDAD II

ESTRUCTURA DE UNA PAGINA WEB

Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.

La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).

La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código

<html>
<head>
<title>Esto es el título de la página.</title>
</head>
<body>
Hola mundo! 
Esto es negrita. 
Y esto itálica. 
</body>
</html>

generará el siguiente resultado (abre la página en otra ventana, dale al botón derecho => ver código fuente, y verás así el código HTML de la página):

Ver ejemplo en una página aparte.

Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:
 => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir (u otra etiqueta similar).
 => Indica comienzo y fin de negrita.
 => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.

Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir Esto es negrita. y Esto es negrita. produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como o <hr>.

ENTORNO DE DREAMWEAVER

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, como veremos más adelante.

Las barras

La barra de título

La barra de título contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.

La barra de menús

La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.

Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.

La barra de herramientas estándar

La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir , Guardar , etc.

La barra de herramientas de documento

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.

La barra de estado

La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>).

También nos es posible alternar entre los modos de selección, mano (para arrastrar la página), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).

Los paneles e inspectores

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.

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 y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc.

Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior-derecha.

Seguramente será la herramienta de Dreamweaver que más vayas a utilizar.

La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc.

Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.

Configuración de un sitio local

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, las hojas de estilo, 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. 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. Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica. Por ejemplo, si escribiéramos la dirección genérica https://www.miweb.com en el navegador, éste intentaría cargar la página https://www.miweb.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. Crear o editar un sitio web sin conexión a Internet Una vez creadas las carpetas que formarán un sitio local ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios. A través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opción Administrar sitio. 2 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 las características del sitio. 3 Las características 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. Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local. Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto. Estas tres características son las imprescindibles para definir un sitio local. 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. 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 y seguir las indicaciones. 4 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 de la pestaña Archivos.

Conectar con el sitio remoto

1. Abre Filezilla.

2. Seleccionar Archivo > Gestor de sitios o bien pulsa en el botón Gestor de sitios de la barra de herramientas.

3. Se mostrará el cuadro de diálogo Gestor de sitios donde se hace clic sobre la conexión para seleccionarla y se pulsa en el botón Conectar.

4. Otra posibilidad quizás más rápida sea pulsar en la cabeza de flecha negra hacia abajo que aparece en el botón Gestor de Sitios de la barra de herramientas para desplegar el árbol de conexiones y hacer clic sobre la conexión deseada.

5. Filezilla intentará establecer una conexión FTP de acuerdo a la configuración establecida. Si los datos introducidos son correctos y no existe ningún problema, se establecerá conexión al cabo de unos instantes y se podría trabajar en la sesión FTP.

6. En la ventana de Filezilla se pueden distinguir 6 áreas o paneles:

1) Barra de herramientas. Proporciona acceso a las operaciones más habituales de gestión FTP. Si pulsas en el botón situado más a la izquierda de esta barra se mostrará el Gestor de Sitios.
2) Conexión rápida. Puedes introducir los datos de conexión rápida a un sitio FTP: Dirección, Usuario, Contraseña y Puerto. A continuación se pulsa el botón Conexión Rápida. Esta información no será añadida al Gestor de Sitios.
3) Registro de mensajes. Muestra los ecos de las operaciones de comunicación entre cliente y servidor FTP. Nos permite tener un seguimiento completo de la situación de la sesión. Indica en un color diferente las respuestas del servidor, el estado de la conexión, los errores, etc.
4) Sitio Local. Se sitúa en la parte izquierda y muestra el contenido de carpetas y archivos de tu equipo local. Consta de dos ventanas. En la superior se puede navegar entre las unidades de disco y carpetas. En la ventana inferior se muestran las carpetas y archivos situados en el interior de la carpeta seleccionada arriba.
5) Sitio Remoto. Se sitúa en la parte derecha y muestra el contenido de carpetas y archivos del servidor. La carpeta que se muestra inicialmente al establecer la conexión será la que se ha definido en la casilla Directorio remoto por defecto de las opciones avanzadas de configuración del Sitio.
6) Cola de transferencia. Proporciona información de la lista de archivos que se están transfiriendo desde el equipo cliente al servidor o viceversa: nombre del archivo local; dirección de transferencia: (<-) descargas ó (->) subidas; nombre del archivo remoto; host del sitio remoto; estado: "Transferring ..."; etc.