Clase #5 Dreamweaver I
¿Qué es Dreamweaver?
Dreamweaver es un programa para diseñar páginas web en código HTML. En este
caso lo utilizaremos para generar gacetillas con ese código que nos darán una
mayor libertar y organización en el diseño.
Una vez instalado el programa, lo abren y generan un nuevo archivo.
Aparecerá este nuevo cuadro de diálogo. Elegimos Página básica y HTML y
pulsamos en el botón Crear
Procedemos, a continuación, a su guardado. Le damos a Archivo > Guardar
Propiedades del documento
Cuando creamos un documento nuevo tenemos que configurar las características
que lo definen (configurar sus atributos). Para ello, en la barra de menú
seleccionamos Modificar, Propiedades de la página. Desde aquí podemos modificar
las características de nuestra página: Aspecto, Vínculos, Encabezados, Título e
Imagen de rastreo.
Aspecto: aquí podemos definir la fuente, el tamaño y el color del texto que tendrá
nuestro archivo. También el color de fondo del documento e incluso añadir una
imagen de fondo. El apartado de los márgenes hace referencia a la distancia hasta
los bordes superior e inferior de la ventana del navegador.
En Vínculos, definimos el color de los enlaces y cómo queremos que aparezca
nuestro enlace (siempre subrayar, nunca subrayar, etc.).
En Encabezados se define el tamaño y el color de la fuente para seis tipos de
encabezados distintos.
En Título podemos poner el título al archivo. Aparecerá arriba del todo en el
navegador. Es una de las informaciones útiles para los motores de búsqueda que
indexan las páginas web.
La codificación se refiere a los caracteres del documento (alfabeto utilizado). Para
el español y otors idiomas de Europa Occidental hay que seleccionar Europeo
Occidental.
Y, finalmente, el apartado de Imagen de rastreo se utiliza para disponer de una
imagen de fondo a la que podemos dar distintos grados de transparencia. Esta
imagen no se verá en el navegador. Es como una imagen que se usa para calcar o
realizar la maquetación encima de ella. Sirve como ayuda visual.
Comenzar a generar los contenidos en Dreamweaver
Dreamweaver utiliza básicamente la misma lógica que el Word. Esto significa –
sobre todo teniendo en cuenta el uso que le daremos- que pueden comenzar a
escribir textos y formatearlo de la misma manera que lo hacen en el Word o
cualquier programa de edición de textos.
Los links en el Dreamweaver.
Es importante cuando creamos enlaces (o vínculos) conocer la ruta entre el
documento de origen y el de destino. Las rutas más habituales son: las rutas
absolutas y las rutas relativas.
Rutas absolutas: indican el URL completo del documento vinculado (o de la
página vinculada). Ejemplo: si queremos poner un enlace a la sección de publicidad
de Google España desde nuestra página tendremos que escribir la dirección
completa [Link]
Rutas relativas: suelen hacer referencia a nuestro sitio web. Ejemplo: si tenemos
tres apartados (inicio, quiénes somos, contacto) en nuestra web, con los nombres
de archivo siguientes: [Link], quienes_somos.html y [Link], y queremos
hacer un enlace desde una de ellas a otra (por ejemplo enlazar INICIO con
CONTACTO, tenemos que escribir sólo el nombre del archivo. No es necesario (como
ocurre en la absoluta) escribir TODA la dirección completa, (en este caso
escribiríamos [Link]).
Nosotros utilizaremos las rutas absolutas ya que las rutas relativas sirven
principalmente cuando trabajamos con una página web. Eso significa que cada vez
que ingresemos un link debe comenzar con http:// y estar completa.
Como incluir una dirección de mail
Tenemos 3 posibilidades para incluir un dirección de mail en nuestro mail.
1. Que figure de la siguiente manera contacto@[Link] con el link
incorporado. De esta manera el interesado simplemente hace clic sobre el
mail y se le abrirá una ventana para escribir un nuevo mail desde su
programa de correo habitual (Outlook etc.)
2. La segunda opción es la siguiente: contactar vía mail. Funciona de la misma
manera que el primero con la diferencia que la dirección de mail no está a
simple vista.
3. La tercera opción es generar una imagen con la dirección de mail o una
gráfica acorde y que haciendo clic sobre la imagen se abra la ventana para
escribir el mail.
Ver ejemplos: [Link]
PASO A PASO PARA INCLUIR UNA DIRECCIÓN DE MAIL O LINK.
1. escribir el texto al cual se le insertará el mail o link. Ejemplos: “contacto”,
“enviar mail” o pepe@[Link].
2. Seleccionar la palabra a la cual se le insertará el mail o link. En el menú de
propiedades escribir el mail o enlace. Importante es que sepan como es el
formato que deben ingresar.
a. En el caso de mail: malito:cecilia@[Link]
b. En el caso de un link: [Link] En el caso que el
link redirija al un formulario de contacto recomiendo que ingresen al
formulario de contacto y copien la dirección que ven en el navegador
para evitar errores de tipeo.
En el caso que utilicen una imagen:
Insertar la imagen en el HTML. (Atención! Esto lo veremos en la
clase#7)
Seleccionar la imagen e incluir desde el menú de propiedades de la
imagen el mail o link.
Si les aparece un borde azul en la imagen pueden volver a
seleccionar la imagen e ingresar un 0 (cero) donde dice borde.
Utilizar tablas en nuestras gacetillas
Las tablas son muy importantes para el diseño, ya que les permitirán organizar de
manera más ordenada la gacetilla o el boletín de noticias que quieran enviar.
Para insertar una tabla Insertar > Tabla
Aparecerá un cuadro de diálogo como éste:
Lo primero que deben definir son la cantidad de filas y columnas que quieren que
tenga la tabla. En segundo lugar el ancho de la tabla. En el caso de estar trabajando
una gacetilla, recomiendo que fijen el ancho en 600 píxeles, (o bien 720 píxeles).
Este ancho predeterminado mantendrá el texto ordenado en un ámbito que
permiten casi todos los programas y servicios de correo en el caso de los 600
píxeles.
Para definir el borde que queremos para nuestra tabla podemos optar por uno
“invisible” ingresando el número 0 en la casilla de grosor del borde. Pueden
ingresar 1 y tendrán un borde sutil. Depende para qué están utilizando las tablas.
Gacetilla realizada con tablas pero escondiendo los bordes. Simplemente se
utilizaron para lograr que las imágenes mantengan cierta ubicación etc.
[Link] esta gacetilla les ha sido enviada por mail
junto a la clase y al trabajo práctico, así como el boletín de .
Pueden observar como la inclusión de tablas nos permite una edición y disposición
del texto mucho más detallada. La tabla que observan a continuación la generé con
2 filas y 3 columnas. La posibilidad de combinar celdas nos permite lograr una
disposición como la que observan. Las celdas 2 y 3 de la segunda fila están
combinadas.
texto texto texto texto Ko ko ko ko ko ko ko Huh huh hu hu hu hu hu
texto texto texto texto ko ko koko ko ko ko ko hu hu hu hu hu hu hu
texto texo ko ko ko ko ko ko ko ko huhu hu hu hu hu huh hu
ko koko hu hu hu hu hu hu hu hu
hu
Larica Larica laricla hjs Sari sari sari sari sari sari sari sari sari sari sari sari sari
hjks hjskjhs jhjks J.C. fu fuf fu fuf uf fuf fuf fuf fuf fuf fuf fuf fuf fuf fuf fuf f uf
hjkugghjk ghjkj ghjkjhg fuf ufufuffuf ufufufufufuf
ghjkjhg ghjkjhg ghjk
Algunos ejemplos:
[Link]
[Link] Aquí pueden ver como
se pueden utilizar los bordes o no. Si seleccionan el newsletter podrán ver
claramente la utilización de tablas.
Las líneas blancas que ven son las tablas. Este es un buen recurso para ver como
están hechos los boletines y gacetillas que les gustan y les resultan demasiado
complicados.
Podemos definir, de entrada, el número de filas y columnas, el ancho que
ocupará en % o en píxeles, el grosor del borde, el relleno de celda o el espacio
en píxeles que hay desde el borde de la celda al comienzo de los datos, sea
escritura o imagen. El espacio entre celdas es lo que indica el nombre, definido
en píxeles también.
A modo de ejemplo vamos a insertar una tabla con 2 filas y 3 columnas.
Modificar la tabla
Si colocamos el cursor en una de las celdas, el Inspector de Propiedades tendrá
un aspecto similar a éste:
Lo que hay por encima justo del panel del Inspector de Propiedades son las
etiquetas del lenguaje HTML que veremos más adelante. De momento, indicar
que la etiqueta <body> (de body, cuerpo) hace referencia a todo el documento
que se visualiza con el navegador. La etiqueta <div> (de division, división) hace
referencia a una división o un espacio acotado en el que se pueden situar
determinados elementos. La etiqueta <table> (de table, tabla) hace referencia a la
tabla entera, la etiqueta <tr> (de table row, fila de la tabla) a la fila en la que está
el cursor y la etiqueta <td> (de table data, o datos de la tabla) a la celda. Observa
que la última etiqueta está marcada. Eso quiere decir que es la celda la que está
seleccionada y todo lo que ponga en el Inspector de Propiedades será con
referencia a esa celda.
Si queremos centrar la tabla, la seleccionamos pinchando con el cursor en cualquier
punto interno y presionando la etiqueta <table> . La tabla quedará marcada con
un borde de color negro con unos cuadraditos (tiradores) en los puntos medios de
los lados lateral derecho e inferior.
IMPORTANTE: Uno de los problemas más frecuentes a la hora de utilizar tablas es
el tema de las selección mencionada. Si no les aparece el borde con los tiradores es
porque no han seleccionado la tabla completa.
Una vez seleccionada, observen que el Inspector de Propiedades está
relacionado con la tabla. Allí seleccionan Alinear > Centro
Pueden cambiar el número de filas y el de columnas. Establecer un ancho y un alto
diferentes (en % o en píxeles). Cambiar los rellenos de celda y los espacios entre
celdas, alinear diferente, cambiar el borde. En la parte inferior, dejamos los iconos
de la izquierda de momento y observamos el Color de Fondo, el Color del borde
y la imagen que puedo colocar como fondo de la tabla.
Vamos a hacer algún cambio en la tabla:
Prueben por ejemplo seleccionar un color para el borde de la celda. Para que el
color se vea es necesario que ingresen en el recuadro del borde un número, por
ejemplo 1 o 2.
Anclas en DreamWeaver
Las anclas son marcadores que nos permiten enlazar a una parte concreta de un
documento HTML. En el uso que le vamos a dar nosotros nos va a permitir navegar
en nuestro boletín o gacetilla.
Ejemplo: [Link]
[Link]
En el segundo link ingresamos directamente a la información del docente Del
Campo. En la página podrán volver a ver los profesores oprimiendo VOLVER y elegir
otro para ver su CV.
¿Cómo se utilizan?
Una vez terminado el contenido de la página deben insertar anclas. En el menú
verán el icono del ancla. El ancla es el marcador. Por ejemplo, yo utilicé el
ancla delante del nombre de los profesores (abran el HTML que les envié para el
tema anclas). Se les abrirá una ventana donde deberán ingresar un nombre.
Ejemplo: delcampo. Una vez que insertaron el ancla / marcador ya pueden
generar un vínculo que permita una navegación exactamente a ese punto del
documento.
En el caso del archivo que les pasé utilicé el vínculo en la primera parte donde
figuran todos los profesores.
Seleccioné el nombre e ingresé en el link (al igual que con direcciones de mail y
links) #delcampo porque es en el mismo documento. Deben anteponer al nombre
que dieron al marcador el signo # sin espacios.
En el caso que quieran dirigirlo a otra página deben incluir todo el link + el
ancla. [Link] Como ven
aunque hagan clic desde un documento Word van a aterrizar exactamente en la
información de Del Campo.
Vamos a continuar con el tema anclas en la próxima clase y trabajo práctico.