MANUALES

Macromedia Dreamweaver

4. Conceptos y linea de actuación

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.

Imagen 1

Formateando texto

Podemos darle formato a nuestros textos seteando las propiedades del mismo en el Inspector de Propiedades (Property Inspector).

Imagen 2

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).

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.

Imagen 3

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.

Configuremos uno o más exploradores para visualizar las páginas

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).

Imagen 4

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://www.yahoo.com.ar/correo/consultar.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: /correo/consultar.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.

Páginas:
1 2 3 4 5 6 7 8 9 10