Capitulo 1. Definiendo mi sitio
Una cosa importante: este es el paso más importante: setear, dejar bien configurado en qué carpeta vamos a colocar TODO lo que vamos a diseñar, y dejar así armado el sitio TAL CUAL lo vamos a tener en el FTP, es decir, en el dominio que tengamos ya contratado para tener nuestra página online. En resumen, les quiero decir que, si tenemos todo disperso por cualquier parte de nuestro rígido, el mismo programa nos va a pedir que coloquemos todo en un mismo lado.
El desarrollo de un sitio Web con Dreamweaver comienza en la definición de una carpeta local para el sitio. En esta carpeta se guardarán todos los archivos que lo conformen.
Debemos hacer una carpeta en nuestro disco para cada sitio que deseemos crear.
El paso siguiente es abrir el programa Dreamweaver.
Abrimos el programa y nos encontramos con dos ventanas (si tenemos las preferencias por default) una hoja en blanco (listo para diseñar) y otra que se denomina Site, es decir nos muestra todo lo que tenemos en nuestra raíz. Elegimos Sitio/Nuevo Sitio (Site/New Site). Se abrirá un cuadro de diálogo de definición de sitios. En listado Categorías (Categories), seleccionamos Información Local (Local Info). En el campo Nombre del Sitio (Site Name) escribimos un nombre para nuestro sitio. En Ruta de Carpeta Local (Local Root Folder) debemos indicarle haciendo un click en la carpeta amarilla, la ruta a la carpeta que predefinimos anteriormente para nuestro sitio.
Una vez que navegamos hasta la carpeta hacemos un clic en Guardar (Save).
Inmediatamente hacemos clic sobre el botón OK y el programa nos preguntará si queremos que el programa haga un caché de los archivos existentes para que actualice rápidamente los enlaces cuando cambiamos, renombramos o borramos archivos.
Seleccionamos Crear (Create).
Ya hemos definido nuestro sitio y la ventana de sitio (Site Window) nos muestra que no tenemos todavía ningún archivo. Esta ventana nos permite administrar, borrar, copiar, pegar, mover y abrir los archivos que componen el sitio como si estuviéramos en el explorador de Windows. También nos permite subir a la Web nuestros archivos.
Capitulo 2. Paleta de objetos, título de páginas, texto
Sin cerrar la ventana de sitio, nos posicionamos en archivo y abrimos nueva ventana. Con el documento en blanco abriremos ahora, si es que no está en pantalla, la Paleta de Objetos (Object Palette). Para ellos vamos a Ventana/Objetos (Window/Objects).
También (si es que no se encuentra abierto) necesitaremos el Inspector de Propiedades (Property Inspector). Lo abrimos desde Ventana/Propiedades (Window/Properties).
En este punto vamos a guardar nuestro primer documento. Dado que será la página principal, lo guardaremos como index.html. Para ello, nos dirigimos a Archivo/Guardar como... (File, Save as...) y lo guardamos en la carpeta que predefinimos como carpeta del sitio. Prestar suma atención para no equivocarnos al guardar nuestros documentos.
Definiendo el título de las páginas
Pondremos un título a nuestra página. Este título es el que aparecerá en la barra del navegador y ayudará a los navegantes a identificar nuestro sitio y saber dónde se encuentra. Si el usuario agregara nuestra página a Favoritos, ésta se guardaría con el título que nosotros le hayamos puesto.
Para definir el título de una página, con la ventana de Documento activa seleccionamos Modificar/Propiedades de página (Modify/Page Properties). Se abrirá un cuadro de diálogo y en el campo Título (Title) tipeamos el título de nuestra página. Luego hacemos click en Aceptar .
Insertando texto: Para introducir texto en un documento, simplemente tenemos que tipearlo.
Formateando texto
Podemos darle formato a nuestros textos seteando las propiedades del mismo en el Inspector de Propiedades (Property Inspector).
Primero debemos seleccionar el texto al que queremos darle formato y luego seleccionar las propiedades para el mismo en el Inspector de Propiedades.
Formato (Format): Aplica un estilo predefinido al texto.
Combinación de Fuentes (Font Combination) : Aplica una combinación de fuentes al texto. Las fuentes están agrupadas por familias. Si el usuario no posee instalada la primera fuente del listado, el navegador buscará la segunda de la lista y luego la tercera. Si ninguna de ellas está presente, mostrará el texto con el tipo de fuente estándar con el que del navegador.
Tamaño (Size): Aplica un tamaño de fuente específico en una escala que va de 1 a 7 o un tamaño de fuente relativo al tamaño por defecto del navegador. En este caso los valores van de + o -1 a+ o -7.
Negrita e Itálica (Bold/ltalic): Aplican al texto estos estilos.
Izguierda, Centro y Derecha (Left, Center, Right): Aplican alineación al texto.
Color de texto (Text Color): Define el color para el texto seleccionado.
Existen dos tipos de saltos que podemos introducir en nuestro texto:
el salto de línea y el salto de párrafo.
Cuando pulsamos Enter, ingresamos un salto de párrafo.
Cuando pulsamos Shift Enter, insertamos un salto de línea (más pequeño ).
Capitulo 3. Reglas, grilla, código html, imágen o color de fondo Reglas
Para ayudarnos a ubicar los elementos en nuestra página, Dreamweaver puede mostrar una regla en el borde superior y otra el lado izquierdo de la página. Para mostrar la regla debemos ir a Ver/Reg las/Mostrar (View/Rulers/Show) .
Grilla
También podemos hacer aparecer una grilla para guiarnos en el diseño de nuestra página. Para ello debemos ir a Ver/Grilla/Mostrar (View/Grid/Show). Desde aquí también podemos especificarle al programa cada cuantos pixels, pulgadas o centímetros tendremos las líneas de nuestra grilla. Para ello debemos ir a Ver/Grilla/Seteos (View/Grid/Settings) .
Para que nos resulte más fácil ubicar con respecto ala grilla los objetos que insertamos en nuestra página, podemos tildar la opción Ajustar a (Snap to) que se encuentra en Ver/Grilla (View/Grid). De esta forma, las líneas de nuestra grilla adoptarán un efecto de imán que atraerán los objetos para alinearlos mejor cuando los incorporemos al espacio de nuestra página.
Código HTM
Para ver el código HTML asociado con nuestra página, debemos hacer click sobre el primer icono del ángulo inferior derecho de nuestra página. Esto abrirá una ventana con el código HTML y podremos modificar el código y ver automáticamente los resultados en la ventana de documento. Resultará útil dejar abierta la ventana de código para quienes quieran aprender a manejar el código ya que cualquier modificación que hagamos en la página se verá reflejada en el código y viceversa (esta es la característica que posee Dreamweaver llamada Roundtrip HTML).
Imagen o color de fondo
Utilizamos el cuadro de diálogo que se abre al entrar en Modificar/Propiedades de página (Modify/Page properties) para definir un color o una imagen de fondo para nuestra página. Pulsando en la opción Fondo (Background) se abrirá la paleta de colores para quepodamos seleccionar uno.
Si lo que queremos es utilizar una imagen de fondo, debemos indicarle mediante el botón Navegar (Browse) cuál es (recordemos que la imagen debe estar dentro de la carpeta de nuestro sitio). Si la imagen es más pequeña que la ventana del navegador, Dreamweaver la repetirá hasta cubrir toda la superficie.
También en esta misma ventana donde definimos el color de fondo de nuestra página, podemos indicarle al programa qué colores se utilizarán para los textos y enlaces. En la opción Texto (Text) le indicamos por medio de la paleta el color que se aplicará por omisión a nuestros textos.
.
Existen tres tipos de colores para nuestros enlaces:
Color del enlace (links): El color que mostrarán los enlaces de nuestras páginas.
Enlaces visitados (visited links): El color que mostrarán los enlaces que ya hayan sido visitados por los visitantes de nuestro sitio.
Links activos (active links): El color que mostrará el enlace cuando el usuario esté haciendo click sobre él.
Capitulo 4. Configuración de navegadores, insertar imágenes, vínculos
Lo primero que vamos a querer hacer después de haber introducido algo de texto en nuestra página, es ver cómo está quedando. Para ello, pulsamos la tecla F12 y se abrirá nuestro navegador (el que tengamos instalado). Si tuviéramos más de un navegador, podemos indicarle al programa cómo acceder a él. Para ello debemos ir a Archivo/Previsualización en Navegador/Editar la lista de navegadores (File/Preview in Browser/Edit Browser List). Se abrirá un cuadro de diálogo que nos permitirá agregar navegadores secundarios para previsualizar. El botón Agregar (Add) se utiliza para definir un nuevo navegador. El botón Editar (Edit) nos permite cambiar los seteos para el navegador seleccionado. El botón Remover (Remove) nos permite quitar de la lista un navegador. Para previsualizar una página con el navegador secundario debemos oprimir Ctrl F12.
Insertemos imágenes
Para insertar una imagen en una página Web debemos colocar el cursor en el punto donde queremos introducir la imagen y luego pulsar el botón Insertar imagen (Insert Image) de la paleta de objetos. Hacemos clic en Navegar y seleccionamos la imagen. Para centrar la imagen colocamos el cursor justo a la izquierda o a la derecha de la imagen y pulsamos el botón centrar de la paleta de propiedades.
Para poder colocar texto a la derecha de una imagen debemos alinearla a la izquierda.
El campo ALT de la paleta de propiedades de la imagen sirve para escribir una descripción de la imagen. Hay navegadpres que no muestran imágenes o usuarios que eligen no bajarlas. Por lo tanto, completando este campo podremos darle una idea del contenido de la imagen a estos visitantes.
Realizemos un vínculo
Para crear un vínculo de una página a otra página del mismo sitio debemos seleccionar la palabra o palabras que servirán de enlace.
Luego hacemos clic en el icono Carpeta (Folder) que aparece a la derecha del campo Vínculo (Link). Aparecerá un cuadro de diálogo que nos pedirá que le indiquemos a qué archivo dentro del sitio queremos hacer un enlace. Una vez que ubicamos el archivo lo
seleccionamos con doble clic y en el menú Relativo a (Relative to) le indicamos Documento (Document).
Con esto se habrá establecido un vínculo. Para que una imagen se convierta en un vínculo debemos seguir los mismos pasos pero en lugar de seleccionar texto, seleccionamos la imagen.
Podemos elegir la ubicación en la cual se abrirán los vínculos entre una serie de opciones (destino o target):
_blank: Abre el vínculo en una nueva ventana del navegador
_parent: Abre el vínculo en el conjunto de marcos "padre" del marco actual.
_self: Abre en la misma ventana donde se encuentra el enlace.
_top: Abre en toda la ventana del navegador. Si el enlace se encontraba en una página con marcos (frames), la nueva página removerá los marcos.
A la hora de hacer enlaces existen tres tipos de ruta: absoluta,relativas a la raíz del sitio y relativas al documento.
Ruta absoluta: la ruta completa aun archivo.
Por ej. :
http:1 Iwww .yahoo.com.arlcorreolconsultar .html. Este tipo de enlace se utiliza cuando queremos linkear a una página que está fuera de nuestro sitio.
Ruta relativa al directorio raíz: Todos los archivos de un sitio que son visibles para los visitantes, son aquellos que se encuentran dentro de lo que se llama la raíz del sitio. La raíz de un sitio está compuesta por el protocolo (http) y todo el resto de la dirección HASTA el país (en el caso de EEUU hasta el .com o .net, .org, etc).
Un enlace relativo a la raíz de un sitio es aquel cuya ruta solo menciona los pasos luego de la raíz. Por ejemplo, para el ejemplo anterior: Icorreolconsultar.html. Todas las rutas relativas al directorio raíz comienzan con una barra (/) que le indica al servidor que empiece desde la raíz del sitio que estamos viendo.
Conviene trabajar con este tipo de enlace cuando los archivos html de nuestro sitio cambian de lugar con frecuencia. Cuando se utiliza este tipo de enlace, éstos siguen funcionando aún si el archivo fue movido a otro lugar del sitio. Este tipo de enlace no es apropiado para sitios que serán vistos en forma local (en nuestra computadora) ya que
solo son bien interpretados por los servidores. En este caso deberem'os usar enlaces relativos al documento.
Ruta relativa al documento: Este es el tipo de ruta que se utiliza con mayor frecuencia. Este tipo de ruta es relativa ala carpeta que contiene el documento. Por ejemplo: consultar.html o correo/consulta.html (sin la barra inicial) se refiere a un documento
dentro de la carpeta actual.
Capitulo 5. Tablas, capas, anclas
Las tablas sirven para organizar datos e imágenes en un archivo HTML.
Consisten de tres elementos básicos: filas, columnas y celdas (que surgen de la intersección de una fila con columna). Para crear una tabla debemos hacer clic sobre el botón Insertar tabla (Insert Table) de la paleta de Objetos. Se abrirá un cuadro de diálogo que nos preguntará cuántas filas y cuantas columnas tendrá nuestra tabla, qué ancho tendrá y si tendrá borde.
El Cellpading: especifica la cantidad de pixels entre la celda y el borde de la celda.
El Cellspacing: especifica la cantidad de pixels entre celda y celda.
Las tablas se hacen en principio con las medidas en porcentaje pero si luego queremos que el usuario al achicar su navegador, éste no intente redimensionar la tabla al nuevo tamaño, lo que debemos hacer es convertir las medidas de porcentaje a pixels. Esto se hace con la tabla seleccionada desde el inspector de propiedades. Hay un icono con la sigla Px que permite convertir las medidas de tabla a
pixels.
Podemos importar en Dreamweaver como una tabla, datos creados y con otra aplicación como Microsoft Excel. Para ello debemos hacer click sobre el botón Insertar datos tabulados (Insert tabular data) de la paleta de objetos. Se abrirá un cuadro de diálogo que nos pedirá que le indiquemos la ubicación del archivo. En el campo Delimitador debemos indicarle el tipo de delimitador con que fue guardado el archivo que estamos importando (coma, punto y coma, etc.). Luego debemos ingresar un ancho de tabla :
Ajustar a los datos (Fit to data): Para que adopte el ancho de acuerdo al valor mas largo de nuestro archivo.
Fijar (Set) : Para fijar el ancho de la tabla en porcentaje con respecto
a la ventana del navegador o en pixels.
Luego seleccionamos las opciones de formato de la tabla (borde,itálica, negrita, espaciado de celdas) y oprimimos OK para importar.
Capas (Layers)
Una capa es un contenedor que se puede posicionar en cualquier parte de la página Web. Las capas o layers pueden contener texto, imágenes, formularios, plug-ins y hasta otras capas.
Las capas proporcionan al diseñador un control exacto del posicionamiento de los objetos en las páginas Web. Incluso es posible colocar capas por delante de otras y hasta animarlas.
Dreamweaver puede crear dos tipos de capas:
Capas CSS: Posicionan texto en una página utilizando las etiquetas DIV y SPAN. Las especificaciones de las capas CSS son definidas por el World Wide Web Consortium's Positioning HTML Elements with Cascading Style Sheets. Este tipo de capas es soportado por los dos navegadores IE 4 y Netscape 4.
Capas Netscape: Posicionan el contenido en una página utilizando la etiqueta de Netscape LAYER y lLAHYER. Solo el Netscape soporta capas creadas de esta forma.
Los navegadores anteriores mostrarán el contenido de las capas pero no lo posicionarán.
Lo que conviene hacer para no perder compatibilidad con navegadores anteriores es trabajar con capas y una vez que tenemos todos los elementos posicionados, utilizar la opción Convertir layers a menú Modificar (Modify).
Puntos de fijación (Anclas o Anchor)
Para colocar un enlace a otro punto de la misma página debemos primero colocar un ancla en el punto de destino del vínculo. Para ello, ubicamos el cursor en el punto de la página adonde deseamos crear una referencia y vamos a Insertar/Ancla con nombre (Insert/Named Anchor). Introducimos un nombre que represente esta ubicación en la
página. Podemos asignar cualquier nombre, pero es recomendable escoger uno que sea fácil de recordar cuando se asigne el vínculo que navegará a esta ubicación. De esta forma se introduce un punto de fijación, representado por un pequeño icono con un ancla. Este icono no se verá luego al visualizar la página en un explorador .
Si aparece un cartel de advertencia es porque usted tiene seteado su programa para no mostrar elementos invisibles. Para mostrarlos y poder ver el ancla, deberá ir a Ver/Elementos invisibles (View/Invisible Elements).
Una vez creado el ancla podrá linkear a ella desde cualquier otro punto de la página (texto o gráfico ). Para hacer el vínculo deberemos tipear en el campo Vínculo (Link) el símbolo numeral seguido del nombre del ancla al que queremos linkear. Por ejemplo #textol.
Si desea poner un vínculo aun punto de fijación que se encuentra en otra página, lo que deberá hacer es escribir # y el nombre del ancla luego del nombre de la página adónde se encuentra dicho ancla. Por ej. : prueba.html#ancla.
