SlideShare una empresa de Scribd logo
1 de 60
Descargar para leer sin conexión
TUTORIAL DE DREAMWEAVER
Barrera Aguilar Jesús Salvador.
Gaitán Velázquez Maryfer
¿Qué es dreamweaver?
■ es un software fácil de usar que permite crear páginas web
profesionales. Las funciones de edición visual de Dreamweaver
permiten agregar rápidamente diseño y funcionalidad a las páginas, sin
la necesidad de programar manualmente el código HTML. Se puede
crear tablas, editar marcos, trabajar con capas, insertar
comportamientos JavaScript, etc.., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo
entre otras cosas trabajar con mapas visuales de los sitios web,
actualizando el sitio web en el servidor sin salir del programa. Para
seguir este curso te puedes descargar la versión gratuita de
Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30
días, pero seguro que te dará tiempo a entenderlo y decidir si quieres
adquirir la versión completa de este fantástico programa
■ Dreamweaver es una aplicación en forma de estudio que está
destinada a la construcción, diseño y edición de sitios, videos y
aplicaciones Web basados en estándares. Dreamweaver CS5
es un software fácil de usar que permite crear páginas web
profesionales. Las funciones de edición visual de
Dreamweaver CS5 permiten agregar rápidamente diseño y
funcionalidad a las páginas, sin la necesidad de programar
manualmente el código HTML. Se puede crear tablas, editar
marcos, trabajar con capas, insertar comportamientos
JavaScript, etc.., de una forma muy sencilla y visual.
Novedades de Dreamweaver.
■ En este punto comentaremos las
características que aporta esta nueva versión
sobre la anterior.
■ • Plantillas diseño fluido. El acceso a la web a través
de todo tipo de dispositivos está experimentando un
aumento importante. Ahora es habitual acceder a
internet desde el teléfono móvil y desde las tabletas.
Esto complica el diseño de los sitios web porque los
dispositivos son de diferentes dimensiones. Una
forma de afrontar este problema es utilizando el
diseño fluido, este tipo de diseño hace que la página
se adapte automáticamente a las dimensiones del
dispositivo. Este tipo de diseño utiliza HTML 5 por los
que los navegadores antiguos no son capaces de
representarlo correctamente. Sin embargo, existen
librerías de JavaScript que solucionan este
inconveniente. Dreamweaver incorpora estas
■ •Transiciones. Las transiciones permiten pasar propiedades CSS de un
estado inicial a otro estado final de forma continua.Con transiciones se
pueden lograr vistosos efectos de animaciones.
■ • Fuentes Web. Existen sitios web con multitud de nuevas fuentes que
pueden dar un aire distinto a nuestros diseños de páginas web. En esta
versión, Dreamweaver permite incorporar los archivos de nuevas fuentes de
forma sencilla.
■ • Intergración con PhoneGap mejorada. PhoneGap es un servicio para
generar aplicaciones para teléfonos móviles en las plataformas más
utilizadas (Android, Apple, ...) ahora se ha mejorado la compatibildad con
PhoneGap desde Dreamweaver .
■ • Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva
forma de adquirir productos Adobe, como Dreamweaver, mediante
suscripción mensual o anual, de esta forma se tiene acceso más rapido a las
actualizaciones y se puede disponer de los archivos de trabajo en cualquier
ubicación con acceso a internet. Además hay funciones que sólo están
disponibles para los suscriptores de Cloud, como la inserción de etiquetas
HTML 5 desde el panel Insertar, la compatibilidad con Edge Animate o la
búsqueda dinámica en Mac.
■ Cualquier editor de texto permite crear páginas web. Para
ello sólo es necesario crear los documentos con la extensión
HTML o HTM, e incluir como contenido del documento el
código HTML deseado. Puede utilizarse incluso el Bloc de
notas incluido en Windows para hacerlo.
■ Pero crear páginas web mediante el código HTML es más
laborioso que hacerlo utilizando un editor gráfico. Al no
utilizar un editor gráfico cuesta mucho más insertar cada uno
de los elementos de la página, al mismo tiempo que es más
complicado crear una apariencia profesional para la página,
sobre todo si no estamos demasiado familiarizados con el
HTML.
■ Aunque también es cierto que escribir el código nos da más
control sobre él, y sobre todo al principio, nos ayudará a
entender lo que estamos haciendo y podremos aprender
HTML rápidamente.
■ Hoy en día existe una amplia gama de editores de páginas
web. Uno de los más utilizados, y que destaca por su
sencillez y por las numerosas funciones que incluye, es
Adobe Dreamweaver.
■ Además de Dreamweaver, existen otra serie de buenos
editores de páginas web, como pueden ser Microsoft
Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta
Plus. Algunos de los cuales tienen la ventaja de ser
gratuitos.
Cómo tener una página en Internet
■ Para poder poner una página web en Internet, es necesario contratar a
alguna empresa con servidores que pueda alojarla y hacerla accesible desde
Internet las 24 horas del día. El precio por disponer de espacio propio en el
servidor dependerá de la empresa, del espacio en disco, volumen de
transferencia y otras opciones que podamos contratar. hay empresas que
ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco
espacio de disco, lentitud y nombre de nuestra página precedido por el de la
suya. Hay que tener también en cuenta que estas empresas deben generar
ingresos de alguna forma, por lo que se dedican a vender espacios
publicitarios dentro de nuestras páginas, publicidad que no podremos
negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar
hospedaje gratuito para la página de una empresa, aunque sí es aceptable
para una página personal, sobre todo al comienzo. Por otro lado, hay
grandes empresas de Internet que ofrecen otras alternativas para publicar
en Intenet de forma gratuita en forma de blog.Como por ejemplo, Blogger
de Google o MySpace de Microsoft. Un blog tiene una estructura definida y
no ofrece tanta libertad como una página web a la hora del diseño.
Arrancar y cerrar Dreamweaver.
■ •Veamos las dos formas básicas de arrancar Dreamweaver CS6.
■ Desde el botón Inicio Botón de Inicio situado, normalmente, en la esquina inferior
izquierda de la pantalla.Colocar el cursor y hacer clic sobre el botón Inicio, se despliega
un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá
directamente. O puedes pulsar enTodos los programas y buscarlo en la lista con los
programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS6 y haz
clic sobre él para arrancar el programa.
■ Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes . Puedes arrancar
Dreamweaver CS6 ahora para ir probando todo lo que te explicamos.Cuando realices
los ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el
tema mientras utilizas Dreamweaver, como te explicamos aquí. Básico
■ • Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes
operaciones: Hacer clic en el botón cerrar , en la esquina superior derecha, como en
cualquier ventana deWindows. Pulsar la combinación de teclas Alt + F4.
Abrir un documento en la barra de
herramientas.
■ Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible). Pulsar
la combinación de teclas Ctrl + O.
■ Hacer clic sobre el menú Archivo y elegir la opciónAbrir....
■ Hacer clic sobre el menú Archivo y elegir la opciónAbrir reciente.
■ Muestra los últimos archivos abiertos.
■ Hacer clic sobre el menú Archivo y elegir la opción Examinar en Brigde.
■ Se abrirá el programa Brigde que muestra las carpetas y archivos de forma gráfica.
Hacer doble clic sobre el archivo en la ventana del sitio.
■ Hacer clic derecho sobre el archivo en el explorador deWindows, y elegir la opción
Abrir con → Adobe Dreamweaver CS6.
Abrir un documento nuevo.
■ • Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes
operaciones.:
■ Hacer clic en el botón nuevo nuevo de la barra de herramientas estándar (si está
visible).
■ Pulsar la combinación de teclas Ctrl + N.
■ Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
■ Después de esto aparecerá una nueva ventana, en la que deberás elegir laCategoría
Página en blanco.
■ En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya
creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño
ninguno.A continuación pulsamos el botón Crear.
Mi primera página
■ Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una
página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página.
■ Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los
elementos básicos con los que están hechas la mayoría de las páginas web.
■ Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es.
■ Lo primero que tienes que hacer es abrir Dreamweaver.Ya has visto en la página anterior
como puede hacerse.
■ Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la columna
Diseño dejamos la opción por defecto: Seguidamente, haz clic sobre la zona blanca del
documento y escribe lo siguiente:
■ Para poder poner una página web en Internet, es necesario contratar a alguna empresa
con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del
día. El precio por disponer de espacio propio en el servidor dependerá de la empresa,
del espacio en disco, volumen de transferencia y otras opciones que podamos
contratar.
■ Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones:
poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya.
Hay que tener también en cuenta que estas empresas deben generar ingresos de
alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras
páginas, publicidad que no podremos negarnos a incluir en ellas.
■ Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una
empresa, aunque sí es aceptable para una página personal.
¿QUIEN CREO DREAMWEAVER?
Creado inicialmente por Macromedia(actualmente producido porAdobe Systems) es el
programa más utilizado en el sector del diseño y la programación web, por sus
funcionalidades, su integración con otras herramientas como Adobe Flash y,
recientemente, por su soporte de los estándares delWorldWideWeb Consortium.
DEFINICION
(Macromedia Dreamweaver). Creador y editor de páginas web tipo
WYSIWYG creado por Macromedia (actualmente de Adobe Sistemas) Es la
aplicación de este tipo más usada en el sector de diseño y programación
web. Posee, como toda la línea Macromedia/Adobe, excelentes
funcionalidades e integración con otras herramientas. La aplicación
permite crear sitios de forma totalmente gráfica, y dispone de funciones
para acceder al código HTML generado.
INTRODUCCIÓN
■ Este artículo tratará acerca de una herramienta muy útil para el diseño
web como es la que ofrece la compañíaAdobe Systems Incorporated la
cual de denomina: Adobe Dreamweaver CS3 el cual es una de las
recientes versiones aunque la última es CS6. Dreamweaver nos ofrece
un sin número de cosas que nos permitirán la creación de un sitio web
de acuerdo a nuestras necesidades. Hay que tomar en cuenta que no
sólo podemos utilizar lo que éste nos ofrece también hay como
agregarle aplicaciones de Adob Flash o Adobe Illustrator lo cual nos
ayudará a mejorar nuestro sitio web.
A los que son aprendices se les puede hacer algo complicado manejar este programa, pero
en realidad es muy fácil su utilización, pero pueden recurrir a internet donde encontrarán
tutoriales que nos enseñarán a manejar Dreamwaever y a emplear sus múltiples
herramientas para que nuestro website quede como lo hemos planificado.
INTRODUCCIÓN - Entorno de desarrollo compatible con PHP, J2EE y Microsoft.NET -
Diseño de páginasWebs con un interfaz completamente gráfico - Barra de herramientas
de programación, que facilita las operaciones de programación más usuales - Contracción
del código, para centrarse solo en el que se está utilizando - Barra de herramientas de
reproducción de estilos, con la que se puede ver el resultado final - Comparar archivos para
ver qué ha cambiado - Facilidad para añadir vídeos Flash - Notificación y registro de
eventos - Se integra en MicrosoftWord, Flash,Adobe Photoshop y otras - Optimiza las
páginas para las diferentes versiones de los navegadores….
ADOBE DREAMWEAVERTE BRINDARÁ
ACCESO RÁPIDO A LOS MISMOS:
■ - Entorno de desarrollo compatible con PHP, J2EE y Microsoft.NET
■ - Diseño de páginasWebs con un interfaz completamente gráfico
■ - Barra de herramientas de programación, que facilita las operaciones de programación más usuales
■ - Contracción del código, para centrarse solo en el que se está utilizando
■ - Barra de herramientas de reproducción de estilos, con la que se puede ver el resultado final
■ - Comparar archivos para ver qué ha cambiado
■ - Facilidad para añadir vídeos Flash
■ - Notificación y registro de eventos
■ - Se integra en MicrosoftWord, Flash,Adobe Photoshop y otras
■ - Optimiza las páginas para las diferentes versiones de los navegadores….
CARACTERÍSTICAS
Ofrece la posibilidad de crear botones flash,
formularios, JavaScripts, y más, es de gran ayuda.
Además de poder insertar elementos web,
encontramos una gran precisión en la
importación de información deWord y Excel,
con las funciones de copiar y pegar.
VENTAJAS:
· La gran ventaja de este editor sobre otros es su gran poder de
ampliación y personalización del mismo, puesto que en este programa,
sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un
comportamiento) están hechas en JavascriptC, lo que le ofrece una gran
flexibilidad en estas materias.
· Como editorWYSIWYG que es, Dreamweaver permite ocultar el
código HTML de cara al usuario, haciendo posible que alguien no
entendido pueda crear páginas y sitios web fácilmente sin necesidad de
escribir código.
■ · Un aspecto de alta consideración de Dreamweaver es su
funcionalidad con extensiones. Es decir, permite el uso de
"Extensiones".
■ Las extensiones, tal y como se conocen, son pequeños
programas, que cualquier desarrollador web puede escribir
(normalmente en HTML y Javascript) y que cualquiera puede
descargar e instalar, ofreciendo así funcionalidades añadidas
a la aplicación.
DESVENTAJAS
■ Aunque muchos usuarios afirmen en los foros de DW que no
tiene desventajas, tampoco se puede decir que Dreamweaver
lo puede utilizar cualquiera, al ser tan avanzado el único
inconveniente es que puede resultar difícil su manejo para
usuarios menos experimentados en el diseño de páginas web,
ya que quien lo utiliza tiene que tener un conocimiento básico
de este programa.
■ Bien entonces una vez que ya hemos analizado la definición,
su características y sus ventajas ya tenemos una idea de lo
que se trata Adobe Dreamweaver qué es lo que nos ofrece y
en qué nos puede servir. Pues quizás los estudiantes no le
veamos la importancia de utilizar este programa, a lo mejor
no nos sirva ahora, pero cuando ya nos involucremos en el
campo laboral ya sabremos cómo se utilizan los programas de
Adobe, además con esta práctica ya tenemos una idea de lo
que será nuestro website, ese es el objetivo de estudiar ese
diseñador web.
Barra de herramientas de Dreamweaver
■ La barra de herramientas de Dreamweaver contiene
botones que permiten alternar entre diferentes vistas
del documento rápidamente, cambiar el título del
documento o previsualizar la página en el navegador.
Los elementos del menú Opciones (botón situado en
el extremo derecho de la barra de herramientas)
cambia en función de la vista que seleccione.
El panel objetos
■ Este panel contiene botones que permiten la creación
e inserción de diversos tipos de objetos, como tablas,
vínculos, capas e imágenes. El pánel contiene siete
categorías de forma predeterminada: Común,
Formularios, Marcos, Head, Invisibles y Caracteres.
También contiene botones que cambian de vista:
Estándar y Disposición. Cada uno de estos elementos
serán explicados en temas posteriores.
Si desea insertar un objeto en el documento haga clic en el
correspondiente botón del pánel o arrastre el ícono del botón
hasta la ventana de documento. Dependiendo del objeto,
aparecerá un cuadro de diálogo en el cual se le pedirá que
seleccione o inserte el archivo u objeto deseado.
■ Cualquier editor de texto permite crear páginas web. Para ello
sólo es necesario crear los documentos con la extensión
HTML o HTM, e incluir como contenido del documento el
código HTML deseado. Puede utilizarse incluso elBloc de
notas incluido enWindows para hacerlo.
Editar paginas web
■ Pero crear páginas web mediante el código HTML es más
costoso que hacerlo utilizando un editor gráfico. Al no utilizar
un editor gráfico cuesta mucho más insertar cada uno de los
elementos de la página, al mismo tiempo que es más
complicado crear una apariencia profesional para la página,
sobre todo si no estamos demasiado familiarizados con el
HTML. Aunque también es cierto que escribir el código nos da
más control sobre él, y sobre todo al principio, nos ayudará a
aprenderlo rápidamente. Hoy en día existe una amplia gama
de editores de páginas web. Uno de los más utilizados, y que
destaca por su sencillez y por las numerosas funciones que
incluye, es Adobe Dreamweaver
■ Además de Dreamweaver, existen otra serie de buenos
editores de páginas web, como pueden ser Microsoft
ExpresionWeb, Amaya, Bluefish, NVU, KompoZer o Quanta
Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.
La pagina Inical
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 y dónde, como
veremos más adelante.
Arrancar y cerrar Dreamweaver
■ Desde el botón Inicio situado, normalmente, en la esquina
inferior izquierda de la pantalla. Colocar el cursor y hacer clic
sobre el botón Inicio, se despliega un menú. Puedes
comenzar a escribir el nombre del programa, y aparecerá
directamente. O puedes pulsar enTodos los programas y
buscarlo en la lista con los programas que hay instalados en
tu ordenador. Buscar Adobe Dreamweaver CS5 y haz clic
sobre él para arrancar el programa.
*Desde el icono de Dreamweaver CS5 del
Escritorio, si lo tienes .
■ Puedes arrancar Dreamweaver CS5 ahora para ir probando
todo lo que te explicamos. Cuando realices los ejercicios
también puedes compaginar dos sesiones de la forma que
puedas ver el tema mientras utilizas Dreamweaver, como te
explicamos aquí.
■ Para cerrar DreamweaverCS5, podemos utilizar
cualquiera de las siguientes operaciones:
■ Hacer clic en el botón cerrar , en la esquina superior
derecha, como en cualquier ventana deWindows.
■ *Pulsar la combinación de teclas Alt + F4.
■ *Hacer clic sobre el menúArchivo y elegir la opción
Salir.
■ *Si existe algún documento modificado que no ha
sido guardado antes de cerrar Dreamweaver, se te
pedirá confirmación para guardar o no cada uno de
ellos
■ En la segunda columna
seleccionamos HTML,
observamos que hay
muchos diseños ya
creados que podemos
elegir, para nuestro
primer ejemplo
elegimos en Diseño
ninguno.A
continuación pulsamos
el botón Crear.
Abrir y guardas documentos
■ *Para abrir un documento, puedes utilizar cualquiera de las siguientes
operaciones:
■ *Hacer clic en el botón abrir de la barra de herramientas estándar (si
está visible).
■ *Pulsar la combinación de teclas Ctrl + O.
■ *Hacer clic sobre el menúArchivo y elegir la opciónAbrir....
■ *Hacer doble clic sobre el archivo en la ventana del sitio.
■ *Hacer clic derecho sobre el archivo en el explorador deWindows, y
elegir la opciónAbrir con → Adobe Dreamweaver CS5.
■ Para abrir un documento nuevo, puedes utilizar cualquiera de
las siguientes operaciones.:
■ *Hacer clic en el botón nuevo de la barra de herramientas
estándar (si está visible).
■ *Pulsar la combinación de teclas Ctrl + N.
■ *Hacer clic sobre el menú Archivo y elegir la opción Nuevo.
■ *Después de esto aparecerá una nueva ventana, en la que
deberás elegir la Categoría Página en blanco.
*Para guardar un documento, puedes utilizar cualquiera de las siguientes
operaciones. *Hacer clic en el botón Guardar de la barra de herramientas
estándar.
*Pulsar la combinación de teclas Ctrl + S.
*Hacer clic sobre el menúArchivo y elegir la opción Guardar.
■ *Dreamweaver incluye la posibilidad de, en el caso de estar trabajando
simultáneamente con varios documentos, poder guardar todos de
golpe, sin la necesidad de hacerlo uno por uno.
■ Para guardar todo puedes realizar cualquiera de las siguientes
operaciones.
■ *Hacer clic en el botón Guardar todo de la Barra de herramientas
estándar.
■ *Hacer clic sobre el menúArchivo y elegir la opción Guardar todo.
■ Al tener varios documentos abiertos es fácil olvidarse de
todas las modificaciones hechas en cada uno de ellos. Debes
tener mucho cuidado al utilizar la opción guardar todo, ya que
en ocasiones es posible no desear guardar los cambios en
todos los documentos modificados. Por ello es conveniente
que al principio no utilices esta opción, al menos hasta que te
hayas habituado a manejar el programa. De todas formas,
observa que cuando hay cambios sin guardar aparece un *
tras el nombre del documento
Formatos que utiliza
■ HTML
■ SWF
■ JPEG
■ HTM
La barra de título
■ 1.-La barra de título contiene el nombre del programa (Marcromedia
Dreamweaver) 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.
Barra de herramientas
■ 2.-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 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.pueden hacer a partir de estos menús, pero para algunas es preferible o
indispensable hacerlas desde los paneles.
Barra de herramientas estándar.
■ 3.-La barra de herramientas estándar contiene
iconos para ejecutar de forma inmediata
algunas de las operaciones más habituales
Barra de herramientas de documentos.
■ 4.-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.
Los paneles o inspectores.
■ 6.-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ónVentana, 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.
■ 6.-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ónVentana, 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.
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 (InsertTable) 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.}
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áginasWeb. Incluso es posible colocar capas por delante de otras y
hasta animarlas.
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 campoVí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
Vínculos a direcciones de correo
electrónico
■ Para insertar un enlace a una dirección de correo electrónico, simplemente hacemos
clic en el botón Insertar enlace de e-mail (Insert E-mail link) de la paleta de Objetos
(Objects). En el cuadro de diálogo que aparece tipeamos cuál va a ser el texto que
linkee a la dirección de e-mail y en la segunda línea indicamos cuál es la dirección de
correo.También lo podemos hacer de la siguiente manera: seleccionamos en nuestra
página el texto que servirá de enlace ala dirección de e-mail y pulsamos el botón
Insertar enlace de e-mail (Insert E-mail link) de la paleta de Objetos (Objects).
Ahora solo tendremos que escribir la dirección de e-mail.
Plantillas
■ Podemos utilizar plantillas para crear documentos para un sitio cuya estructura y aspecto
es común a lo largo del mismo. Cuando creamos una plantilla, indicamos qué elementos de
una página deberán permanecer constantes (no editables) y qué elementos podrán
cambiar. Luego, haremos nuestras páginas basados en la plantilla
que hayamos creado. Podemos editar una plantilla aún si ya ha sido utilizada para crear
documentos ya que los mismos se actualizarán automáticamente.
■ Para crear una nueva plantilla debemos ir aVentana/Plantillas (Window/Templates). Se
abrirá una ventana con tres iconos en su parte inferior derecha.Tocamos el primer icono
para crear una nueva plantilla. Le damos un nombre y oprimimos Enter. Ahora tendremos
que editar esta plantilla que hasta el momento está vacía. La seleccionamos y tocamos el
segundo botón de la parte inferior, Abrir Plantilla (Open Template). Inmediatamente se
abrirá una ventana igual a las de documentos comunes con la diferencia que la extensión de
este archivo es .dwt y es una plantilla que podremos aplicar a otras páginas.
■ El siguiente paso es crear las zonas de la plantilla que querremos fijas en todas
nuestras páginas. Podemos insertar imágenes de navegación, banners, todo lo que
vaya a quedar fijo. Estas zonas no se podrán editar cuando creemos páginas basadas
en la plantilla.
Debemos crear también una o varias zonas editables porque si no hacemos ninguna
zona editable, no podremos modificar nada cuando creemos un documento a partir de
nuestra plantilla. Puede ser simplemente una palabra, un párrafo, una tabla, pero
debemos delimitar alguna zona editable. Para ello, seleccionamos la zona que será
editable y vamos a Modificar/Plantillas/Marcar la selección como editable
(Modify/Templates/Mark Selection as editable).
■ Nos pedirá un nombre para el área editable, lo introducimos y hacemos click en OK.
Para crear un nuevo documento basado en una plantilla todo lo que debemos hacer es
seleccionarArchivo/Nuevo desde plantilla (File/New fromTemplate). En la caja de
diálogo que aparece seleccionamos la plantilla a partir de la cual queremos basar
nuestra nueva página.
También es posible crear un nuevo documento y después aplicarle una plantilla
seleccionándola de la paleta Plantillas (Templates) y arrastrándola hacia el
documento.
Podemos separar un documento de una plantilla seleccionando
Modificar/Plantillas/Separar de plantilla (Modify/Templates/Detach from template).
■ Los formularios poseen campos que son enviados a una secuencia de comandos CGI
que se encuentra en el servidor para su procesamiento. Los formularios nos permiten
recolectar información de nuestros usuarios. Requieren de dos elementos: el código
HTML que describa el formulario y una secuencia de comandos (CGI) que procese su
contenido. Para insertar un formulario debemos ir a la subpaleta Formularios (Forms)
de la paleta de objetos.
■ Ahora veremos que se ha creado en nuestra página un recuadro con línea punteada de
color rojo.Todos los elementos de formulario que querramos insertar deberán ir
dentro de este recuadro. Lo primero que debemos hacer es seleccionar el formulario
haciendo clic sobre la línea roja. En el inspector de propiedades veremos las
propiedades del formulario.
En el campo Nombre (Form name) escribimos un nombre para nuestro formulario.
En el campoAcción (Action) debemos escribir la ruta completa de la secuencia de
comandos que procesará el contenido del formulario (CGI). Por lo general los
proveedores de alojamiento de páginasWeb ya poseen en sus servidores secuencias
de comando estándar para hacer diversas tareas. Debemos consultarlos acerca de la
ruta para accederlos y su utilización. Por convención, los programas CGI se guardan
generalmente en una carpeta de nombre cgi-bin.

Más contenido relacionado

La actualidad más candente

Tp 4 alvaro
Tp 4 alvaroTp 4 alvaro
Tp 4 alvaromausheng
 
Crea tu Wordpress: primeros pasos
Crea tu Wordpress:  primeros pasosCrea tu Wordpress:  primeros pasos
Crea tu Wordpress: primeros pasosFundació Bit
 
Presentación sobre conceptos de Dw
Presentación sobre conceptos de DwPresentación sobre conceptos de Dw
Presentación sobre conceptos de DwXimenaOrrantia
 
678910 herramientas telematicas
678910 herramientas telematicas678910 herramientas telematicas
678910 herramientas telematicashtlared
 
Curso dreamweavergrup4
Curso dreamweavergrup4Curso dreamweavergrup4
Curso dreamweavergrup4TamyLop
 
Curso dreamweavergrup4
Curso dreamweavergrup4Curso dreamweavergrup4
Curso dreamweavergrup4RosssyMM
 
Curso dreamweavergrup4
Curso dreamweavergrup4Curso dreamweavergrup4
Curso dreamweavergrup4TamyLop
 
Pestañas FBML facebook fan pages
Pestañas FBML facebook fan pagesPestañas FBML facebook fan pages
Pestañas FBML facebook fan pagesJulieta Jimz
 

La actualidad más candente (11)

Manual html
Manual htmlManual html
Manual html
 
Tp 4 alvaro
Tp 4 alvaroTp 4 alvaro
Tp 4 alvaro
 
Crea tu Wordpress: primeros pasos
Crea tu Wordpress:  primeros pasosCrea tu Wordpress:  primeros pasos
Crea tu Wordpress: primeros pasos
 
Presentación sobre conceptos de Dw
Presentación sobre conceptos de DwPresentación sobre conceptos de Dw
Presentación sobre conceptos de Dw
 
678910 herramientas telematicas
678910 herramientas telematicas678910 herramientas telematicas
678910 herramientas telematicas
 
DREAMWEAVER
DREAMWEAVERDREAMWEAVER
DREAMWEAVER
 
Curso dreamweavergrup4
Curso dreamweavergrup4Curso dreamweavergrup4
Curso dreamweavergrup4
 
Curso dreamweavergrup4
Curso dreamweavergrup4Curso dreamweavergrup4
Curso dreamweavergrup4
 
Curso dreamweavergrup4
Curso dreamweavergrup4Curso dreamweavergrup4
Curso dreamweavergrup4
 
Pestañas FBML facebook fan pages
Pestañas FBML facebook fan pagesPestañas FBML facebook fan pages
Pestañas FBML facebook fan pages
 
0102 paginaen html5
0102 paginaen html50102 paginaen html5
0102 paginaen html5
 

Similar a Jesus maria-fernanda

Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222Jose David
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222Jose David
 
Cap 1 curso_dreamweaver 8
Cap 1 curso_dreamweaver 8Cap 1 curso_dreamweaver 8
Cap 1 curso_dreamweaver 8marichela2013
 
Trabajo para 11
Trabajo para 11Trabajo para 11
Trabajo para 11remington
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5AyllenZue
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222Jose David
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222Jose David
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222Jose David
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222Jose David
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222Jose David
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222Jose David
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222Jose David
 

Similar a Jesus maria-fernanda (20)

Dreamweaver Tutorial
Dreamweaver Tutorial Dreamweaver Tutorial
Dreamweaver Tutorial
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Manual Dreamweaver
Manual DreamweaverManual Dreamweaver
Manual Dreamweaver
 
Linda eljach
Linda eljachLinda eljach
Linda eljach
 
Cap 1 curso_dreamweaver 8
Cap 1 curso_dreamweaver 8Cap 1 curso_dreamweaver 8
Cap 1 curso_dreamweaver 8
 
Trabajo para 11
Trabajo para 11Trabajo para 11
Trabajo para 11
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Dreamweaver.
Dreamweaver.Dreamweaver.
Dreamweaver.
 
Dreamweaver.
Dreamweaver.Dreamweaver.
Dreamweaver.
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Dreamweaver.
Dreamweaver.Dreamweaver.
Dreamweaver.
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 
Dreamwaver2222222222222
Dreamwaver2222222222222Dreamwaver2222222222222
Dreamwaver2222222222222
 

Más de Jesus22barrera

Más de Jesus22barrera (20)

Ultima hora (1)
Ultima hora (1)Ultima hora (1)
Ultima hora (1)
 
Alice22
Alice22Alice22
Alice22
 
Alice 1
Alice 1Alice 1
Alice 1
 
CUESTIONARIO SEGUNDA UNIDAD
CUESTIONARIO SEGUNDA UNIDADCUESTIONARIO SEGUNDA UNIDAD
CUESTIONARIO SEGUNDA UNIDAD
 
Orta lugo rene_manuel
Orta lugo rene_manuelOrta lugo rene_manuel
Orta lugo rene_manuel
 
Diagramas
DiagramasDiagramas
Diagramas
 
Cuestionario
CuestionarioCuestionario
Cuestionario
 
Instrucciones basicas para_c_
Instrucciones basicas para_c_Instrucciones basicas para_c_
Instrucciones basicas para_c_
 
Ley jerarquia de_las_operaciones
Ley jerarquia de_las_operacionesLey jerarquia de_las_operaciones
Ley jerarquia de_las_operaciones
 
tutorial visual C++
tutorial visual C++tutorial visual C++
tutorial visual C++
 
Instrucciones basicas para_c_
Instrucciones basicas para_c_Instrucciones basicas para_c_
Instrucciones basicas para_c_
 
Estructura basica para_c_
Estructura basica para_c_Estructura basica para_c_
Estructura basica para_c_
 
Tablas de verdad_para_c_
Tablas de verdad_para_c_Tablas de verdad_para_c_
Tablas de verdad_para_c_
 
Tipos de datos_para_c_
Tipos de datos_para_c_Tipos de datos_para_c_
Tipos de datos_para_c_
 
Ley de la_jerarquia_de_operaciones
Ley de la_jerarquia_de_operacionesLey de la_jerarquia_de_operaciones
Ley de la_jerarquia_de_operaciones
 
tutorial de c++
tutorial de c++tutorial de c++
tutorial de c++
 
tutorial de code blocks
tutorial de code blockstutorial de code blocks
tutorial de code blocks
 
Diapositivas salvavidas
Diapositivas salvavidasDiapositivas salvavidas
Diapositivas salvavidas
 
Presentacion1
Presentacion1Presentacion1
Presentacion1
 
Evidencias fotos
Evidencias fotosEvidencias fotos
Evidencias fotos
 

Último

Presentación MF 1445 EVALUACION COMO Y QUE
Presentación MF 1445 EVALUACION COMO Y QUEPresentación MF 1445 EVALUACION COMO Y QUE
Presentación MF 1445 EVALUACION COMO Y QUEJosé Hecht
 
Filosofía del gobierno del general Alfaro
Filosofía del gobierno del general AlfaroFilosofía del gobierno del general Alfaro
Filosofía del gobierno del general AlfaroJosé Luis Palma
 
Cuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdfCuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdflizcortes48
 
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdfMEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdfJosé Hecht
 
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptxLa-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptxMAURICIO329243
 
Descripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldaduraDescripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldaduraJose Sanchez
 
Apunte de clase Pisos y Revestimientos 1
Apunte de clase Pisos y Revestimientos 1Apunte de clase Pisos y Revestimientos 1
Apunte de clase Pisos y Revestimientos 1Gonella
 
Salvando mi mundo , mi comunidad , y mi entorno
Salvando mi mundo , mi comunidad  , y mi entornoSalvando mi mundo , mi comunidad  , y mi entorno
Salvando mi mundo , mi comunidad , y mi entornoday561sol
 
Trabajo de electricidad y electrónica 2024 10-1
Trabajo de electricidad y electrónica 2024 10-1Trabajo de electricidad y electrónica 2024 10-1
Trabajo de electricidad y electrónica 2024 10-1juandiegomunozgomez
 
Apunte de clase Pisos y Revestimientos 2
Apunte de clase Pisos y Revestimientos 2Apunte de clase Pisos y Revestimientos 2
Apunte de clase Pisos y Revestimientos 2Gonella
 
Revista Apuntes de Historia. Abril 2024.pdf
Revista Apuntes de Historia. Abril 2024.pdfRevista Apuntes de Historia. Abril 2024.pdf
Revista Apuntes de Historia. Abril 2024.pdfapunteshistoriamarmo
 
historieta materia de ecologías producto
historieta materia de ecologías productohistorieta materia de ecologías producto
historieta materia de ecologías productommartinezmarquez30
 
Actividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 EducacionActividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 Educacionviviantorres91
 
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxTALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxMartaChaparro1
 
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOS
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOSCALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOS
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOSdarlingreserved
 
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.karlazoegarciagarcia
 
LOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejorLOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejormrcrmnrojasgarcia
 

Último (20)

Acuerdo segundo periodo - Grado Once.pptx
Acuerdo segundo periodo - Grado Once.pptxAcuerdo segundo periodo - Grado Once.pptx
Acuerdo segundo periodo - Grado Once.pptx
 
Sesión ¿Amor o egoísmo? Esa es la cuestión
Sesión  ¿Amor o egoísmo? Esa es la cuestiónSesión  ¿Amor o egoísmo? Esa es la cuestión
Sesión ¿Amor o egoísmo? Esa es la cuestión
 
Presentación MF 1445 EVALUACION COMO Y QUE
Presentación MF 1445 EVALUACION COMO Y QUEPresentación MF 1445 EVALUACION COMO Y QUE
Presentación MF 1445 EVALUACION COMO Y QUE
 
Filosofía del gobierno del general Alfaro
Filosofía del gobierno del general AlfaroFilosofía del gobierno del general Alfaro
Filosofía del gobierno del general Alfaro
 
Cuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdfCuadernillo de actividades eclipse solar.pdf
Cuadernillo de actividades eclipse solar.pdf
 
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdfMEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
MEDIACIÓN INTERNACIONAL MF 1445 vl45.pdf
 
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptxLa-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
La-cosmovision-del-curriculo-educativo-en-Venezuela (1).pptx
 
Act#25 TDLab. Eclipse Solar 08/abril/2024
Act#25 TDLab. Eclipse Solar 08/abril/2024Act#25 TDLab. Eclipse Solar 08/abril/2024
Act#25 TDLab. Eclipse Solar 08/abril/2024
 
Descripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldaduraDescripción del Proceso de corte y soldadura
Descripción del Proceso de corte y soldadura
 
Apunte de clase Pisos y Revestimientos 1
Apunte de clase Pisos y Revestimientos 1Apunte de clase Pisos y Revestimientos 1
Apunte de clase Pisos y Revestimientos 1
 
Salvando mi mundo , mi comunidad , y mi entorno
Salvando mi mundo , mi comunidad  , y mi entornoSalvando mi mundo , mi comunidad  , y mi entorno
Salvando mi mundo , mi comunidad , y mi entorno
 
Trabajo de electricidad y electrónica 2024 10-1
Trabajo de electricidad y electrónica 2024 10-1Trabajo de electricidad y electrónica 2024 10-1
Trabajo de electricidad y electrónica 2024 10-1
 
Apunte de clase Pisos y Revestimientos 2
Apunte de clase Pisos y Revestimientos 2Apunte de clase Pisos y Revestimientos 2
Apunte de clase Pisos y Revestimientos 2
 
Revista Apuntes de Historia. Abril 2024.pdf
Revista Apuntes de Historia. Abril 2024.pdfRevista Apuntes de Historia. Abril 2024.pdf
Revista Apuntes de Historia. Abril 2024.pdf
 
historieta materia de ecologías producto
historieta materia de ecologías productohistorieta materia de ecologías producto
historieta materia de ecologías producto
 
Actividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 EducacionActividades eclipse solar 2024 Educacion
Actividades eclipse solar 2024 Educacion
 
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptxTALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
TALLER_DE_ORALIDAD_LECTURA_ESCRITURA_Y.pptx
 
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOS
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOSCALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOS
CALCULADORA CIENTIFICA - ANALISIS DE ARTEFACTOS
 
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.ENSEÑAR ACUIDAR  EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
ENSEÑAR ACUIDAR EL MEDIO AMBIENTE ES ENSEÑAR A VALORAR LA VIDA.
 
LOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejorLOS AMBIENTALISTAS todo por un mundo mejor
LOS AMBIENTALISTAS todo por un mundo mejor
 

Jesus maria-fernanda

  • 1. TUTORIAL DE DREAMWEAVER Barrera Aguilar Jesús Salvador. Gaitán Velázquez Maryfer
  • 2. ¿Qué es dreamweaver? ■ es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual. Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa
  • 3. ■ Dreamweaver es una aplicación en forma de estudio que está destinada a la construcción, diseño y edición de sitios, videos y aplicaciones Web basados en estándares. Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.
  • 4. Novedades de Dreamweaver. ■ En este punto comentaremos las características que aporta esta nueva versión sobre la anterior. ■ • Plantillas diseño fluido. El acceso a la web a través de todo tipo de dispositivos está experimentando un aumento importante. Ahora es habitual acceder a internet desde el teléfono móvil y desde las tabletas. Esto complica el diseño de los sitios web porque los dispositivos son de diferentes dimensiones. Una forma de afrontar este problema es utilizando el diseño fluido, este tipo de diseño hace que la página se adapte automáticamente a las dimensiones del dispositivo. Este tipo de diseño utiliza HTML 5 por los que los navegadores antiguos no son capaces de representarlo correctamente. Sin embargo, existen librerías de JavaScript que solucionan este inconveniente. Dreamweaver incorpora estas
  • 5. ■ •Transiciones. Las transiciones permiten pasar propiedades CSS de un estado inicial a otro estado final de forma continua.Con transiciones se pueden lograr vistosos efectos de animaciones. ■ • Fuentes Web. Existen sitios web con multitud de nuevas fuentes que pueden dar un aire distinto a nuestros diseños de páginas web. En esta versión, Dreamweaver permite incorporar los archivos de nuevas fuentes de forma sencilla. ■ • Intergración con PhoneGap mejorada. PhoneGap es un servicio para generar aplicaciones para teléfonos móviles en las plataformas más utilizadas (Android, Apple, ...) ahora se ha mejorado la compatibildad con PhoneGap desde Dreamweaver . ■ • Funciones exclusivas para Creative Cloud. Creative Cloud es la nueva forma de adquirir productos Adobe, como Dreamweaver, mediante suscripción mensual o anual, de esta forma se tiene acceso más rapido a las actualizaciones y se puede disponer de los archivos de trabajo en cualquier ubicación con acceso a internet. Además hay funciones que sólo están disponibles para los suscriptores de Cloud, como la inserción de etiquetas HTML 5 desde el panel Insertar, la compatibilidad con Edge Animate o la búsqueda dinámica en Mac.
  • 6. ■ Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo. ■ Pero crear páginas web mediante el código HTML es más laborioso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. ■ Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a entender lo que estamos haciendo y podremos aprender HTML rápidamente. ■ Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver. ■ Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.
  • 7. Cómo tener una página en Internet ■ Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo. Por otro lado, hay grandes empresas de Internet que ofrecen otras alternativas para publicar en Intenet de forma gratuita en forma de blog.Como por ejemplo, Blogger de Google o MySpace de Microsoft. Un blog tiene una estructura definida y no ofrece tanta libertad como una página web a la hora del diseño.
  • 8. Arrancar y cerrar Dreamweaver. ■ •Veamos las dos formas básicas de arrancar Dreamweaver CS6. ■ Desde el botón Inicio Botón de Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla.Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes pulsar enTodos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS6 y haz clic sobre él para arrancar el programa. ■ Desde el icono de Dreamweaver CS6 del Escritorio, si lo tienes . Puedes arrancar Dreamweaver CS6 ahora para ir probando todo lo que te explicamos.Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aquí. Básico ■ • Para cerrar Dreamweaver CS6, podemos utilizar cualquiera de las siguientes operaciones: Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana deWindows. Pulsar la combinación de teclas Alt + F4.
  • 9. Abrir un documento en la barra de herramientas. ■ Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible). Pulsar la combinación de teclas Ctrl + O. ■ Hacer clic sobre el menú Archivo y elegir la opciónAbrir.... ■ Hacer clic sobre el menú Archivo y elegir la opciónAbrir reciente. ■ Muestra los últimos archivos abiertos. ■ Hacer clic sobre el menú Archivo y elegir la opción Examinar en Brigde. ■ Se abrirá el programa Brigde que muestra las carpetas y archivos de forma gráfica. Hacer doble clic sobre el archivo en la ventana del sitio. ■ Hacer clic derecho sobre el archivo en el explorador deWindows, y elegir la opción Abrir con → Adobe Dreamweaver CS6.
  • 10. Abrir un documento nuevo. ■ • Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.: ■ Hacer clic en el botón nuevo nuevo de la barra de herramientas estándar (si está visible). ■ Pulsar la combinación de teclas Ctrl + N. ■ Hacer clic sobre el menú Archivo y elegir la opción Nuevo. ■ Después de esto aparecerá una nueva ventana, en la que deberás elegir laCategoría Página en blanco. ■ En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno.A continuación pulsamos el botón Crear.
  • 11. Mi primera página ■ Para que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. ■ Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. ■ Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es. ■ Lo primero que tienes que hacer es abrir Dreamweaver.Ya has visto en la página anterior como puede hacerse. ■ Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la columna Diseño dejamos la opción por defecto: Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:
  • 12. ■ Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. ■ Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas. ■ Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal.
  • 13. ¿QUIEN CREO DREAMWEAVER? Creado inicialmente por Macromedia(actualmente producido porAdobe Systems) es el programa más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares delWorldWideWeb Consortium.
  • 14. DEFINICION (Macromedia Dreamweaver). Creador y editor de páginas web tipo WYSIWYG creado por Macromedia (actualmente de Adobe Sistemas) Es la aplicación de este tipo más usada en el sector de diseño y programación web. Posee, como toda la línea Macromedia/Adobe, excelentes funcionalidades e integración con otras herramientas. La aplicación permite crear sitios de forma totalmente gráfica, y dispone de funciones para acceder al código HTML generado.
  • 15. INTRODUCCIÓN ■ Este artículo tratará acerca de una herramienta muy útil para el diseño web como es la que ofrece la compañíaAdobe Systems Incorporated la cual de denomina: Adobe Dreamweaver CS3 el cual es una de las recientes versiones aunque la última es CS6. Dreamweaver nos ofrece un sin número de cosas que nos permitirán la creación de un sitio web de acuerdo a nuestras necesidades. Hay que tomar en cuenta que no sólo podemos utilizar lo que éste nos ofrece también hay como agregarle aplicaciones de Adob Flash o Adobe Illustrator lo cual nos ayudará a mejorar nuestro sitio web.
  • 16. A los que son aprendices se les puede hacer algo complicado manejar este programa, pero en realidad es muy fácil su utilización, pero pueden recurrir a internet donde encontrarán tutoriales que nos enseñarán a manejar Dreamwaever y a emplear sus múltiples herramientas para que nuestro website quede como lo hemos planificado. INTRODUCCIÓN - Entorno de desarrollo compatible con PHP, J2EE y Microsoft.NET - Diseño de páginasWebs con un interfaz completamente gráfico - Barra de herramientas de programación, que facilita las operaciones de programación más usuales - Contracción del código, para centrarse solo en el que se está utilizando - Barra de herramientas de reproducción de estilos, con la que se puede ver el resultado final - Comparar archivos para ver qué ha cambiado - Facilidad para añadir vídeos Flash - Notificación y registro de eventos - Se integra en MicrosoftWord, Flash,Adobe Photoshop y otras - Optimiza las páginas para las diferentes versiones de los navegadores….
  • 17. ADOBE DREAMWEAVERTE BRINDARÁ ACCESO RÁPIDO A LOS MISMOS: ■ - Entorno de desarrollo compatible con PHP, J2EE y Microsoft.NET ■ - Diseño de páginasWebs con un interfaz completamente gráfico ■ - Barra de herramientas de programación, que facilita las operaciones de programación más usuales ■ - Contracción del código, para centrarse solo en el que se está utilizando ■ - Barra de herramientas de reproducción de estilos, con la que se puede ver el resultado final
  • 18. ■ - Comparar archivos para ver qué ha cambiado ■ - Facilidad para añadir vídeos Flash ■ - Notificación y registro de eventos ■ - Se integra en MicrosoftWord, Flash,Adobe Photoshop y otras ■ - Optimiza las páginas para las diferentes versiones de los navegadores….
  • 19. CARACTERÍSTICAS Ofrece la posibilidad de crear botones flash, formularios, JavaScripts, y más, es de gran ayuda.
  • 20. Además de poder insertar elementos web, encontramos una gran precisión en la importación de información deWord y Excel, con las funciones de copiar y pegar.
  • 21. VENTAJAS: · La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en JavascriptC, lo que le ofrece una gran flexibilidad en estas materias. · Como editorWYSIWYG que es, Dreamweaver permite ocultar el código HTML de cara al usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web fácilmente sin necesidad de escribir código.
  • 22. ■ · Un aspecto de alta consideración de Dreamweaver es su funcionalidad con extensiones. Es decir, permite el uso de "Extensiones". ■ Las extensiones, tal y como se conocen, son pequeños programas, que cualquier desarrollador web puede escribir (normalmente en HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así funcionalidades añadidas a la aplicación.
  • 23. DESVENTAJAS ■ Aunque muchos usuarios afirmen en los foros de DW que no tiene desventajas, tampoco se puede decir que Dreamweaver lo puede utilizar cualquiera, al ser tan avanzado el único inconveniente es que puede resultar difícil su manejo para usuarios menos experimentados en el diseño de páginas web, ya que quien lo utiliza tiene que tener un conocimiento básico de este programa.
  • 24. ■ Bien entonces una vez que ya hemos analizado la definición, su características y sus ventajas ya tenemos una idea de lo que se trata Adobe Dreamweaver qué es lo que nos ofrece y en qué nos puede servir. Pues quizás los estudiantes no le veamos la importancia de utilizar este programa, a lo mejor no nos sirva ahora, pero cuando ya nos involucremos en el campo laboral ya sabremos cómo se utilizan los programas de Adobe, además con esta práctica ya tenemos una idea de lo que será nuestro website, ese es el objetivo de estudiar ese diseñador web.
  • 25. Barra de herramientas de Dreamweaver ■ La barra de herramientas de Dreamweaver contiene botones que permiten alternar entre diferentes vistas del documento rápidamente, cambiar el título del documento o previsualizar la página en el navegador. Los elementos del menú Opciones (botón situado en el extremo derecho de la barra de herramientas) cambia en función de la vista que seleccione.
  • 26.
  • 27. El panel objetos ■ Este panel contiene botones que permiten la creación e inserción de diversos tipos de objetos, como tablas, vínculos, capas e imágenes. El pánel contiene siete categorías de forma predeterminada: Común, Formularios, Marcos, Head, Invisibles y Caracteres. También contiene botones que cambian de vista: Estándar y Disposición. Cada uno de estos elementos serán explicados en temas posteriores.
  • 28. Si desea insertar un objeto en el documento haga clic en el correspondiente botón del pánel o arrastre el ícono del botón hasta la ventana de documento. Dependiendo del objeto, aparecerá un cuadro de diálogo en el cual se le pedirá que seleccione o inserte el archivo u objeto deseado.
  • 29. ■ Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso elBloc de notas incluido enWindows para hacerlo. Editar paginas web
  • 30. ■ Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a aprenderlo rápidamente. Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver
  • 31. ■ Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft ExpresionWeb, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.
  • 32. La pagina Inical 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.
  • 33. ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento y dónde, como veremos más adelante.
  • 34. Arrancar y cerrar Dreamweaver ■ Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes pulsar enTodos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS5 y haz clic sobre él para arrancar el programa.
  • 35. *Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes .
  • 36. ■ Puedes arrancar Dreamweaver CS5 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aquí.
  • 37. ■ Para cerrar DreamweaverCS5, podemos utilizar cualquiera de las siguientes operaciones: ■ Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana deWindows. ■ *Pulsar la combinación de teclas Alt + F4. ■ *Hacer clic sobre el menúArchivo y elegir la opción Salir. ■ *Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos
  • 38. ■ En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno.A continuación pulsamos el botón Crear.
  • 39. Abrir y guardas documentos ■ *Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones: ■ *Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible). ■ *Pulsar la combinación de teclas Ctrl + O. ■ *Hacer clic sobre el menúArchivo y elegir la opciónAbrir.... ■ *Hacer doble clic sobre el archivo en la ventana del sitio. ■ *Hacer clic derecho sobre el archivo en el explorador deWindows, y elegir la opciónAbrir con → Adobe Dreamweaver CS5.
  • 40. ■ Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.: ■ *Hacer clic en el botón nuevo de la barra de herramientas estándar (si está visible). ■ *Pulsar la combinación de teclas Ctrl + N. ■ *Hacer clic sobre el menú Archivo y elegir la opción Nuevo. ■ *Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.
  • 41. *Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. *Hacer clic en el botón Guardar de la barra de herramientas estándar. *Pulsar la combinación de teclas Ctrl + S. *Hacer clic sobre el menúArchivo y elegir la opción Guardar.
  • 42. ■ *Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. ■ Para guardar todo puedes realizar cualquiera de las siguientes operaciones. ■ *Hacer clic en el botón Guardar todo de la Barra de herramientas estándar. ■ *Hacer clic sobre el menúArchivo y elegir la opción Guardar todo.
  • 43. ■ Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opción, al menos hasta que te hayas habituado a manejar el programa. De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento
  • 44. Formatos que utiliza ■ HTML ■ SWF ■ JPEG ■ HTM
  • 45. La barra de título ■ 1.-La barra de título contiene el nombre del programa (Marcromedia Dreamweaver) 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.
  • 46. Barra de herramientas ■ 2.-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 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.pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.
  • 47. Barra de herramientas estándar. ■ 3.-La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales
  • 48. Barra de herramientas de documentos. ■ 4.-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.
  • 49. Los paneles o inspectores. ■ 6.-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ónVentana, 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.
  • 50. ■ 6.-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ónVentana, 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.
  • 51. 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 (InsertTable) 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.}
  • 52. 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áginasWeb. Incluso es posible colocar capas por delante de otras y hasta animarlas.
  • 53. 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). .
  • 54. ■ 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 campoVí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
  • 55. Vínculos a direcciones de correo electrónico ■ Para insertar un enlace a una dirección de correo electrónico, simplemente hacemos clic en el botón Insertar enlace de e-mail (Insert E-mail link) de la paleta de Objetos (Objects). En el cuadro de diálogo que aparece tipeamos cuál va a ser el texto que linkee a la dirección de e-mail y en la segunda línea indicamos cuál es la dirección de correo.También lo podemos hacer de la siguiente manera: seleccionamos en nuestra página el texto que servirá de enlace ala dirección de e-mail y pulsamos el botón Insertar enlace de e-mail (Insert E-mail link) de la paleta de Objetos (Objects). Ahora solo tendremos que escribir la dirección de e-mail.
  • 56. Plantillas ■ Podemos utilizar plantillas para crear documentos para un sitio cuya estructura y aspecto es común a lo largo del mismo. Cuando creamos una plantilla, indicamos qué elementos de una página deberán permanecer constantes (no editables) y qué elementos podrán cambiar. Luego, haremos nuestras páginas basados en la plantilla que hayamos creado. Podemos editar una plantilla aún si ya ha sido utilizada para crear documentos ya que los mismos se actualizarán automáticamente. ■ Para crear una nueva plantilla debemos ir aVentana/Plantillas (Window/Templates). Se abrirá una ventana con tres iconos en su parte inferior derecha.Tocamos el primer icono para crear una nueva plantilla. Le damos un nombre y oprimimos Enter. Ahora tendremos que editar esta plantilla que hasta el momento está vacía. La seleccionamos y tocamos el segundo botón de la parte inferior, Abrir Plantilla (Open Template). Inmediatamente se abrirá una ventana igual a las de documentos comunes con la diferencia que la extensión de este archivo es .dwt y es una plantilla que podremos aplicar a otras páginas.
  • 57. ■ El siguiente paso es crear las zonas de la plantilla que querremos fijas en todas nuestras páginas. Podemos insertar imágenes de navegación, banners, todo lo que vaya a quedar fijo. Estas zonas no se podrán editar cuando creemos páginas basadas en la plantilla. Debemos crear también una o varias zonas editables porque si no hacemos ninguna zona editable, no podremos modificar nada cuando creemos un documento a partir de nuestra plantilla. Puede ser simplemente una palabra, un párrafo, una tabla, pero debemos delimitar alguna zona editable. Para ello, seleccionamos la zona que será editable y vamos a Modificar/Plantillas/Marcar la selección como editable (Modify/Templates/Mark Selection as editable).
  • 58. ■ Nos pedirá un nombre para el área editable, lo introducimos y hacemos click en OK. Para crear un nuevo documento basado en una plantilla todo lo que debemos hacer es seleccionarArchivo/Nuevo desde plantilla (File/New fromTemplate). En la caja de diálogo que aparece seleccionamos la plantilla a partir de la cual queremos basar nuestra nueva página. También es posible crear un nuevo documento y después aplicarle una plantilla seleccionándola de la paleta Plantillas (Templates) y arrastrándola hacia el documento. Podemos separar un documento de una plantilla seleccionando Modificar/Plantillas/Separar de plantilla (Modify/Templates/Detach from template).
  • 59. ■ Los formularios poseen campos que son enviados a una secuencia de comandos CGI que se encuentra en el servidor para su procesamiento. Los formularios nos permiten recolectar información de nuestros usuarios. Requieren de dos elementos: el código HTML que describa el formulario y una secuencia de comandos (CGI) que procese su contenido. Para insertar un formulario debemos ir a la subpaleta Formularios (Forms) de la paleta de objetos.
  • 60. ■ Ahora veremos que se ha creado en nuestra página un recuadro con línea punteada de color rojo.Todos los elementos de formulario que querramos insertar deberán ir dentro de este recuadro. Lo primero que debemos hacer es seleccionar el formulario haciendo clic sobre la línea roja. En el inspector de propiedades veremos las propiedades del formulario. En el campo Nombre (Form name) escribimos un nombre para nuestro formulario. En el campoAcción (Action) debemos escribir la ruta completa de la secuencia de comandos que procesará el contenido del formulario (CGI). Por lo general los proveedores de alojamiento de páginasWeb ya poseen en sus servidores secuencias de comando estándar para hacer diversas tareas. Debemos consultarlos acerca de la ruta para accederlos y su utilización. Por convención, los programas CGI se guardan generalmente en una carpeta de nombre cgi-bin.