Guiadreamweaver5

Universidad de Carabobo Facultad de Ciencias de la Educación

Departamento de Matemática Unidad de Computación

Asignatura: Modulo de Diseño ME

Prof. Madelen Piña R. 2005

2

Índice Pág.

Pensar la Web Objetivos 1.-Crear un Sitio (Carpeta web local) 2.-Crear una página web 3.-La Ventana de Dreamweaver 4.-Guardar la página Web 5.-Mostrar la página web en el navegador 6.-Fondo o color a la página web 7.-Texto de la página web 8.-Imágenes y botones Flash 9.-Tamaño de la Imagen 10.-Combinar Imágenes y textos 11.-Insertar un botón Flash 12.-Vínculos o Hipervínculos 13.-Imagen de sustitución 14.-Formularios 15.-Propiedades de cada uno de los campos del formulario: 16.-Tablas 17.-Creando una Tabla 18.-Tabla externa 19.-Tabla Interna 20.-Propiedades de Celda 21.-Marcos 22.- Bibliografía

3 4 5 6 6 7 7 7 7 8 8 8 9 9 9 10 10 12 13 13 14 14 15 16

Guía Dreamweaver, Prof. Madelen Piña

3

Pensar la Web

Podemos sintetizar el proceso que va desde el momento que decidimos hacer una página para la

Web hasta que la tenemos finalizada para su implementación en un servidor, tal como se indica en la

Figura 15.1. Este Capítulo abarca la primera etapa (Prediseño o Boceto)), y para ello rescatamos un

par de herramientas esenciales en cualquier tipo de proyectos y que quienes utilizamos computadoras

tendemos a olvidar: lápiz y papel. Lápiz y papel que nos ayuden a “pensar la Web” antes de escribir ni

una sola línea de HTML.

En la Fig. 1 esta graficada las Etapas a considerar en la construcción de una Página Web.

Fig. 1


4

El punto de vista desde el cual analizamos el proceso de diseño es el de pensar la Web no como

la interrelación usuario-tecnología, sino como interacción humana, mediatizada por la tecnología.

Es decir, entender la Web como medio de comunicación entre personas. Estas ideas deberían

servirnos como brújula durante todo el proceso del diseño y ayudarnos a pensar permanentemente en

“el otro”, la persona invisible y desconocida para quien hacemos nuestra página web.

De todas las palabras que utilizamos para hablar de Internet, la que más deberíamos tener en

cuenta los diseñadores es la que designa al acto de instalar un sitio web en un servidor: la palabra

publicar. Publicar, hacer público un sitio, pensar en el público, pensar en cómo piensa el público,

como veremos enseguida.

La etapa de prediseño o conceptualización puede, a su vez, dividirse en cinco componentes, lo

que facilitará nuestro análisis. Ellos son: objetivos, público, contenidos, estructura y visualización. No

se trata de etapas, sino de elementos del prediseño que interactúan entre sí y se condicionan

mutuamente (ver Figura 15.2).

Objetivos

De estos cinco elementos hay

uno que “manda”, que determina al

resto: los objetivos de la Web.

Hay que responder a la

pregunta: ¿para qué se publica esta

página web?, o, dicho en otros

términos: ¿qué deseamos que suceda

a raíz de la publicación de una

página web?.

Empecemos a conocer los diferentes comandos del programa de aplicación Dreamweaver, el cual nos permitirá construir tu página web, para luego alojarla en la web.


5

1.-Crear un Sitio (Carpeta web local) Antes de empezar a crear una pagina web, se debe crear un sitio ocarpeta web local para alojar el conjunto de elementos que conformaran el diseño de su pagina web.

1. Menú, Sitio, Administrar sitios Clic al botón Nuevos… Sitio Se despliego en cuadro de dialogo Definición del Sitio, Parte 1: donde dice: Sitio sin nombre 1, lo sustituirás por el de:

Pág. Web + tu nombre: Pág. Web Made. Luego clic al botón Siguiente. Parte 2: El asistente le preguntara: ¿Desea trabajar con una tecnología del servidor…?, has clic en el circulo NO, no deseo….

Parte 3: Clic en el círculo: Editar copias locales y clic en la carpeta para indicar el lugar donde se ubicara el sitio o carpeta web local creada, te solicita de nuevo el nombre del sitio escribe: Pág. Web made Luego clic el botón Siguiente.

Parte 4: Le preguntara ¿Cómo conecta con su servidor?, harás clic en NINGUNO. Parte 5:

Luego Clic al botón Siguiente, se desplegara el Resumen. Clic al botón Completado.


6

2.-Crear una página web 1. Menú, archivo, nuevo.

Se despliega cuadro de dialogo Nuevo Documento:

Sitio o carpeta web local: Pág. Web Made, donde se guardara todos los archivos de tu Pág. Web.

2. General, Categoría: clic a Pagina Básica y HTML, luego clic al botón Crear.

3.-La Ventana de Dreamweaver

Barra Documentos

Barra de Propiedades

Barra Menú Barra de Titulo

Barra Objetos: - Común - Diseño - Formulario - Texto - HTML - Aplicación - Elementos Flash


7

4.-Guardar la página Web Guardar con frecuencia la página web es un hábito muy recomendable, para no perder su trabajo en caso que su computador se cuelgue o se apague por falta de luz. La primera página web creada en donde se enlazaran todas las demás siempre se llamara: index 1. Escriba en el área de Titulo: index

Luego clic 2. Menú, Archivo, Guardar como

Se desplegara el cuadro de dialogo Guardar como en donde abrirás la carpeta Pág. Web Made y guardaras esta primera Pág. Web con el nombre de index.

El nombre de la página web index deberá mostrarse ahora a la derecha, en el panel Archivos. De no ser

así, pulse el botón Actualizar o F5.

5.-Mostrar la página web en el navegador

Para visualizar el sitio en el navegador, seleccione la opción del:

1. Menú, Archivo, Vista previa en el navegador, ¡iexplore ó en la barra h. Documento, haz clic al

icono Vista previa.

6.-Fondo o color a la página web 1. Menú, Modificar, Propiedades de la página. Nota: Antes de insertar el motivo de fondo a su página web, primero es necesario guardar la imagen dentro de su Carpeta web local o carpeta Pág. Web Made. 7.-Texto de la página web Cuando escriba directamente un texto en la interfaz de Dreamweaver, se considerara un párrafo. El texto de los párrafos situados directamente en el fondo se adapta siempre al tamaño de la ventana del


8

navegador. En una ventana de navegador de tamaño pequeña, el texto se repartirá en más líneas cortas que una ventana más grande. Puede modificar la ubicación del texto a través de las tablas, al sombrear el texto podrá cambiar la fuente, el estilo (negritas, cursiva, etc.), alinear un párrafo, lista ordenada (números o viñetas), aumentar la sangría y el tamaño, a través de la Barra de Propiedades.

Al modificar las fuentes, se recomienda utilizar las estándar, debido a que los visitantes del sitio web no siempre poseerán la fuente elegida por el autor por no estar instaladas en sus ordenadores. 8.-Imágenes y botones Flash Se recomienda mantener el uso de los elementos de la multimedia en un nivel razonable, recuerde el tiempo de transferencia. Insertar una Imagen 1. Coloque el curso en el

lugar donde insertara la imagen, luego haga clic ela

n

2. barra de herramienta de Dreamweaver, y seleccione la opción Imagen

3. Seleccione la imagen localizada en su sitio web local o Pág. Web Made.

9.-Tamaño de la Imagen Puede ampliar la imagen:

1. Clic a la imagen 2. Coloque el cursor en el punto de control de la esquina inferior derecha de y arrástrelo con el

ratón. También puede reducir la imagen, pero en sentido contrario. 10.-Combinar Imágenes y textos Al hacer clic a la imagen la Barra de Propiedades, despliega los atributos de la imagen: Ancho, alto,


9

Alinear (Línea base, Medio, Superior, Inferior, Izquierda, Derecha, etc.) Vinculo, etc. 11.-Insertar un botón Flash Haz clic en la:

1. Barra objeto, Común, botón Media, Botón Flash.

Se despliego un cuadro de dialogo, donde seleccionaras o Indicaras:

2. el Estilo. 3. el texto del botón: ejemplo:

FaCE 4. la Fuente. 5. El Vinculo: ejemplo:

http://www.face.uc.edu.ve 6. Destino 7. Color de fondo 8. Guardar como, es el nombre del archivo botón: face.swf

12.-Vínculos o Hipervínculos

1. Escriba el texto 2. Sombree el texto 3. Menú, insertar,

Hipervínculo Se despliega el cuadro de dialogo Hipervínculo. Rellene los espacios de Texto, Vínculo, Destino, Titulo. Luego

4. clic en el botón aceptar.

3.-Imagen de sustitución

na imagen de sustitución, en realidad consta de dos imágenes que se alterna cuando el usuario pasa

. Clic en el lugar donde se

2. n,

Se despliega un cuadro de

:

1 Upor encima el cursor. 1

insertara la imagen. Barra Objeto, ComúImagen, Imagen en Sustitución.

dialogo: Insertar Imagen desustitución, la cual te solicita

a) Nombre de la Imagen b) Imagen Original


10

c) Imagen de Sustitución imagen de sustitución.

URL. Lue

4.-Formularios

e permite recabar información de los

Objeto, haz clic en el botón

a barra objeto cambia

1) El 1er icono Campo de texto: te permite colocar espacios para que el usuario escriba su

2) ar su sexo. sitio

5) l correo del destinatario.

5.-Prolario creado:

to, y todo el formulario

d) Clic a carga previa de lae) Texto alternativo. f) Al hacerse clic, ir ago haz clic en aceptar.

1 Tusuarios. En la barraComún y selecciona Formularios. L

dirección electrónica y el comentario o mensaje del visitante de la Pág. web. El 6to icono Opción: te permite construir el botón opción, que permitirá indic

3) el 8vo icono Lista/Menú: te permite hacer una lista/Menú, le permitirá dar su opinión del4) el 12avo icono Botón: te permite crear el botón de enviar o Restablecer, le permite enviar el

formulario o borrara el contenido del formulario El 2do icono Campo Oculto, te permite colocar e

1 piedades de cada uno de los campos del formulario: Definamos las propiedades de cada uno de los campos del formu

1. clic icono <form>, el la barra de Propiedades, el cual cambia de aspecqueda seleccionado permitirá indicar al navegador su dirección de correo para poder enviar el mensaje formulario:


11

a. En el campo Acción, escriba la dirección http de su proveedor de servicio de correo o

FormMail es CGI, que hace muy fácil recibir datos enviados desde un formulario en sus

e pulsar en "Enviar", obtenga el correo de su buzón. Disponible:

b. En el campo Método, seleccione POST.

2. aga clic en el primer campo de texto del formulario y la barra de propiedades cambia de

3. Haga clic en el segundo campo de texto del formulario y la barra de propiedades cambia;

4. Clic en el primer botón de opción y la barra de propiedades cambia, escribe en botón de

5. Clic en el botón Lista/Menú y la barra de propiedades cambia, selecciona Tipo: Menú y Clic en Valores de lista, ella te permite colocar los valores de Bueno, Regular y Malo.

FormMail. un programa

páginas web. Para probarlo, escriba abajo sus datos y dirección de e-mail y alguno de los campos. Después dhttp://dominios.net/manuales/formmail.html

Haspecto, escriba en el campo de texto: email y en Ancho car 40, que le permitirá establecer lalongitud de 40 caracteres.

escribe en el campo de texto: comentario, Ancho car: 40, Líneas núm: 5 y clic en Varias líneas.

opción: radiohombre, en valor activado: hombre, Estado Inicial: Desactivado y en Clase: ninguna.


12

El icono +, permite agregar otro valor y el icono – limina el valor, el icono … …, para cambiar el orden de

do de

no Enviar y la barra de propiedades cambia, escribe en el nombre del botón: enviar, Etiqueta: Enviar y selecciona el icono Acción: enviar formulario

7. Clic en el icono Restablecer y la barra de propiedades cambia, escribe en el nombre del botón: restablecer, Etiqueta: Restablecer y selecciona el icono Acción: Restablecer formulario.

destinatario y en Valor la dirección de correo del destinatario.

6.-Tablas on una tabla de tamaño fijo es posible organizar la página web de forma clara y elegante, estando

e se presentara de la misma manera para todos los usuarios.

elos valores. Hago clic en acepta cuando hay terminacolocar los valores.

6. Clic en el ico

8. Clic al botón Campo Oculto y la barra de propiedades cambia, escribe en el Campo oculto:

1Cseguro de qu


13

17.-Creando una Tabla uestro ejemplo consiste, de hecho, en dos tablas: una externa y una interna, la interna contendrá el

la Barra Objeto, y la barra Objeto muestra las propiedades del

2) Clic en el botón tabla, aparecerá un cuadro de dialogo para definir la tabla:

Rel or del borde: 0 uego haga clic en Aceptar.

el borde exterior de la bla.

y el contenido de las mismas.

ccesibilidad: le permite añadir un texto de ayuda a tabla para los usuarios con discapacidad visual.

l hacer clic en Aceptar se insertara la tabla:

dica debajo de la tabla, sobre un

,1) y agréguele un color de fondo

de

Nmenú o características de la tabla. 18.-Tabla externa

1) Clic en el botón Diseño de Diseño.

lene los espacios: Filas: 3 ; Columnas: 2; Ancho de la tabla: 600 píxeles; Gros

L Grosor del borde: el grosor dtaRelleno de celda: la distancia entre el borde de las celdas Espacio entre celdas: la distancia entre celdas. Encabezado: Ala A

Observe que el ancho de da la tabla se infondo verde claro.

Insertaremos una imagen en la celda (1haciendo clic en el botón de propiedades de la página en la barra de Propiedades, en la secciónaspectos.


14

19.-Tabla Interna

sertemos una tabla interna el la celda (2,1): 1) Coloque el curso el la celda y haga clic

2) o correspondiente a

as de

3) n y en

4) ldas de

. 20.

ara cambiar las propiedades de una celda, basta con colocar el cursor en la misma y cambiar los dades

Vert: alineación vertical del contenido de la celda, por ejemplo Medio.

verificación si no desea que el texto salte automáticamente a la tud es superior al ancho de la celda.

-

21. a

os marcos (en ingles, frames) dividen una pagina web en distintas zonas, por ejemplo que una pagina solo marco, significa que cada zona de la pagina web muestra paginas distintas.

In

en el botón tabla de la barra Insertar del Menú Diseño. La tabla deberá tener 10 filas, 1 columna, un Anchla columna y un Relleno de celd3, luego haga clic en Aceptar. Coloque el cursor en la fila 7 y haga clic en el botón derecho del ratóel menú emergente seleccione: Tabla,Dividir celda, seleccione Fila:1 y Columna:2; luego clic botos Aceptar. Luego sombree con el cursor las ce(3,1) y (3,2) y con el menú emergente l ratón, seleccione: Tabla, Combinar tabla, y coloca la fecha de Edición de la pagina web

-Propiedades de Celda Pvalores en el panel de propie

- Horiz: Alineación horizontal del contenido de la celda, por ejemplo Centro. - - An: la anchura de la celda. - Al: la altura de la celda. - No aj: active esta casilla de

línea siguiente si su longi- Enc: active esta casilla para centrar el contenido de la celda y darle formato en negrita.

Fnd: fondo de la celda (color o imagen). - Borde: el color del borde de la celda.

-M rcos Lweb tenga un


15

Normalmente, la pagina de menú suelo estar colocada fijo en un marco. Dividamos una página web en dos zonas diferenciadas (con marco).

1. Selecciones de la barra Menú Archivo, Nuevo.

2. En el cuadro de dialogo Nuevo documento, selecciones la opción: General, Conjunto de marcos, Izquierdo fijo.

3. Clic al botón Crear.

4. Para administrar las propiedades de los marcos, deberá abrir el panel Marcos. 5. Selecciones la opción de la barra Menú, Ventana, Marcos.

En el panel de Marcos observara tres zonas:

1. la zona del todo (frameset) la llamemos index, 2. la zona de la izquierda (leftFrame), la llamaremos marco 3. y la zona de la derecha (mainframe), la llamaremos paginaprincial


16

- Desplaz: puede decidir si se mostrara o no una barra de desplazamiento en el supuesto que el contenido supere el tamaño de la ventana del navegador.

- Mismo tamaño: indica si los visitantes pueden o no cambiar el tamaño de los marcos arrastrando las barras de separación con el ratón.

- Bordes /Color borde: el tipo de línea que separara los arcos y su color. - Ancho / Alto del margen: la distancia entre el límite del marco y el contenido. - Nombre del marco: pueden renombrar el marco

Bibliografía Utilización de Dreamweaver. Disponible:

http://www.macromedia.com/support/documentation/es/dreamweaver/ Utilización de Dreamweaver 4. Disponible: http://www.abcdatos.com/tutoriales/tutorial/l2272.html

Juan Carlos Asinsten (2004). Prediseño de una página web. Disponible: htt://www.face.uc.ed.ve/ mpina


Guiadreamweaver5

Documents

Transcript of Guiadreamweaver5