Adobe dreamweaver Cs3

ALUMNO: David Mamani Mamani.
PROFESOR:. Emilio Félix Alberto
4 º « H»
26/09/2013
DERECHOSRESERVADOSDE:David
MamaniMamani
1

DEFINICIÓN
• Dreamweaver CS3 es un software fácil de usar que permite
crear páginas web profesionales.
26/09/2013
MamaniMamani
2

FUNCIONES
• Las funciones de edición visual de Dreamweaver CS3 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.
26/09/2013
MamaniMamani
3

ENTORNO DE TRABAJO
• El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos.
Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda
realizar cambios en los documentos rápidamente.
• A. Barra Insertar
• B. Barra de herramientas Documento
• C. Ventana de documento
• D. Grupos de paneles
• E. Selector de etiquetas
• F. Inspector de propiedades
• G. panel Archivos
26/09/2013
MamaniMamani
4

NOVEDADES….
• Mejoras en Spry. El "Framework" o estructura Spry ha
recibido un fuerte impulso en esta versión de Dreamweaver.
Spry es un conjunto de archivos JavaScript que permiten la
inclusión de elementos dinámicos en las páginas HTML. Por
ejemplo se pueden incluir acordeones, barras de
menus, validación de formularios, acceso a datos XML, etc.
• Mayor integración con Photoshop y Fireworks. Ahora es
posible pegar directamente imágenes desde Photoshop en
una página HTML de Dreamweaver. Luego con un doble clic
podremos ir a editar la imagen en Photoshop. Se pueden
importar imágenes con capas.
• Mejoras en la comprobación de la compatiblidad con
diferentes navegadores. Dreamweaver CS3 puede generar
informes con los problemas de visualización de elementos
CSS en los navegadores más utilizados.
26/09/2013
MamaniMamani
5

 Adobe CSS Advisor es un sitio web accesible desde
Dreamweaver que contiene información útil para resolver
los problemas de compatibilidad entre navegadores.
• Mejoras en CSS. La administración de CSS es más fácil,
ahora se pueden trasladar elementos CSS entre diferentes
hojas de estilo. También ha aumentado la cantidad de
plantillas CSS disponibles para aplicar a nuestras páginas
web.
• Adobe Device Central, incluido en la Adobe Creative Suite,
facilita la publicación en dispositivos móviles, PDAs, etc..
26/09/2013
MamaniMamani
6

EL TEXTO
• Las características del texto seleccionado pueden ser
definidas a través del menú Texto, y a través del inspector
de propiedades. Vamos a ver las posibilidades que se nos
ofrecen a través del inspector de propiedades, aunque sean
menos que las que se nos ofrecen a través del menú Texto.
26/09/2013
MamaniMamani
7

PROPIEDADES DEL TEXTO:
• FORMATO:
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser
encabezado, párrafo o preformateado. Los encabezados se utilizan para establecer títulos
dentro de un documento.
El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por
ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al
establecer el formato preformateado se respetará que hayan varios espacios en lugar de solo
uno.
Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar
de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su
ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario
no tenga una fuente se aplique otra del conjunto. Por ejemplo, si
seleccionamos Arial, Helvetica, Sans-serif, el texto se verá con la fuente Arial, pero si esta no
existe se verá en Helvetica.
26/09/2013
MamaniMamani
8

• Tamaño:
Permite cambiar el tamaño del texto. El tamaño lo podemos
indicar en diversas unidades, en píxeles, centímetros, etc...
• Color:
Permite seleccionar el color de la fuente, ignorando el color
que se haya definido en las propiedades de la página. Si no se
ha establecido ningún color en las propiedades de la página ni
aquí, el color del texto por defecto será el negro.
26/09/2013
MamaniMamani
9

• Estilo:
Estos botones permiten establecer si el texto aparecerá en
negrita o en cursiva. A través del menú Texto también se
puede, entre otras cosas, subrayar el texto.
• Alinear:
A través de estos botones es posible establecer la alineación
del texto de una de estas cuatro formas distintas: izquierda,
centrada, derecha y justificada.
26/09/2013
MamaniMamani
10

• Lista:
Estos botones permiten crear listas con viñetas o listas
numeradas.
• Sangria:
Estos dos botones permiten sangrar el texto y anular la sangría.
La sangría es una especie de márgen que se establece a ambos
lados del texto. En este caso caso los botones se refieren a
sangría a la izquierda del texto.
26/09/2013
MamaniMamani
11

HIPERENLACE
• Un hiperenlace, hipervínculo, o vínculo, no es más que un
enlace, que al ser pulsado lleva de una página o archivo a
otra página o archivo.
• Es posible asignar un vínculo a un texto, a una imagen, o a
parte de una imagen.
26/09/2013
MamaniMamani
12

IMÁGENES
• Vamos a ver un poco más sobre estos formatos:
• Formato GIF:
Utilizan un máximo de 256 colores, y son recomendables para
imágenes con grandes áreas de un mismo color o de tonos no
continuos. Suelen utilizarse con gran frecuencia, ya que
permiten contener transparencias y animación.
26/09/2013
MamaniMamani
13

• Formato JPG:
Las imágenes son de mayor calidad que las GIF, al poder
contener millones de colores, pero el tamaño de la imagen es
mayor y tarda más en descargarse.
Puedes incluir imágenes en otros formatos a través de
Dreamweaver, que podrán ser visualizadas en algunos
navegadores. Este es el caso de las imágenes BMP y PNG.
Si introduces una imagen BMP en Dreamweaver, te aparecerá
un cuadrado gris en su lugar. La imagen solo se mostrará
correctamente en el navegador.
26/09/2013
MamaniMamani
14

OPTIMIZACIÓN DE UNA IMAGEN
• Es posible optimizar una imagen insertada en un documento
abierto en Dreamweaver, a través de Fireworks. De este
modo puede modificarse el formato de la imagen, la
transparencia, la paleta de colores que utiliza, etc.
26/09/2013
MamaniMamani
15

TRANSPARENCIAS
26/09/2013
MamaniMamani
16
Por ejemplo, en la imagen de la derecha el fondo puede
desentonar con el fondo de la página, o hacer que su apariencia
sea más pobre.
Lo primero que hay que hacer es establecer un color de fondo
para la imagen, de modo que éste no coincida con el color de
ningún otro elemento del dibujo, para que éste último pueda
seguir mostrándose correctamente después de aplicar la
transparencia.
Después podrá aplicarse la transparencia sobre el color deseado, desde algún
programa de tratamiento de imágenes, como puede ser Fireworks.
Una forma de aplicar transparencia mediante Fireworks es a través de los
botones que puedes ver en la pantalla anterior (en optimizar imagen).

MULTIMEDIA
• Las películas Flash pueden insertarse en una página a través
del menú Insertar, Media, opción Flash, o
pulsando Ctrl+Alt+F.
También pueden insertarse pulsando sobre la opción Flash que
aparece en la pestaña Común del panel Insertar, botón Media.
26/09/2013
MamaniMamani
17

• Sonido:
• Los formatos de sonido más habituales en Internet
son, fundamentalmente, el MP3, el WAV y en algunas
ocasiones el MIDI, aunque existen otros formatos diferentes
que también pueden utilizarse. Lo ideal es incluir algún
archivo de audio que no ocupe mucho espacio, y que no por
ello sea de mala calidad.
• Para insertar un archivo de audio en un documento tienes
que dirigirte al menú Insertar, Medía, opción Plug-in.
26/09/2013
MamaniMamani
18

PLANTILLAS
• Las plantillas son una especie de copia de la página en la que
van a estar basadas el resto de páginas del sitio web, pero que
incluyen la posibilidad de establecer unas zonas
editables y otras zonas que serán fijas, que no podrán ser
modificadas.
• No es posible modificar las propiedades de una página que
está basada en una plantilla, a excepción del título. Cuando se
desea que existan páginas con, por ejemplo, diferente color de
fondo, es necesario crear plantillas diferentes con los distintos
colores, y basar las páginas en una u otra plantilla, según el
color de fondo que se desee para cada una.
26/09/2013
MamaniMamani
19

CAPAS
Las capas no son más que unos recuadros, que pueden situarse en cualquier
parte de la página (es decir, que tienen una posición absoluta en la
página), en los que podemos insertar contenido HTML. Dichas capas pueden
ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de
diseño.
26/09/2013
MamaniMamani
20

OTROS ELEMENTOS
Marquesinas
26/09/2013
MamaniMamani
21
Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes,
que pueden desplazarse de un lado a otro de la ventana en forma de línea. A
continuación tienes un ejemplo de marquesina.

EJERCICIOS:
26/09/2013
MamaniMamani
22
Barra de Herramientas
Barra de Estado
Barra de propiedades

26/09/2013
MamaniMamani
23
Barra Insertar
Color de borde de imágenes y líneas horizontales

• Diseña la siguiente página con el apoyo de las herramientas de arriba y las
pautas que se indican a continuación:
• Elige un texto para tu página e imágenes a elección sobre un tema en particular.
Cuida de pegar el texto en Dreamweaver con la opción EdiciónPegado
Especialsolo texto, para evitar traer el formato Web.
• Luego deberás diseñar una página libre que contenga:
• Formatos de texto diversos (Tipo de fuente, tamaño, color, etc.)
• Debe tener un título.
• Como mínimo 3 imágenes a las que se le deberán modificar sus propiedades
(imágenes recortadas, con modificaciones de color o brillo, borde de diferente
grosor y color, alineaciones diferentes.).
• Formatos de página (Fondos de color o imagen de fondo).
• Como mínimo 2 líneas horizontales de diferente color, ancho, grosor, alineación
y tipo de línea sólido. ( ).
• Al menos 4 hipervínculos (también llamados vínculos) en texto e imágenes
hacia:
• direcciones Web externas (http://www.......),
• direcciones de correo (mailto:nombre@direccion.com),
• paginas Web que tengas en tu carpeta (nombre.html)
• archivos de tu carpeta (imágenes, documentos de texto, etc)
• Guarda el archivo en tu carpeta personal con el nombre Eje02_DWlibre.
• Abre el archivo con el Navegador Internet Explorer (Vista previa o F12) para ver
los resultados.
26/09/2013
MamaniMamani
24

EJERCICIO 2:
26/09/2013
MamaniMamani
25

26/09/2013
MamaniMamani
26

• Instrucciones
•
• Ingresa a la cuenta de Google: formulario.proyecto@gmail.com
• Accede a la opción Docs y dentro de ella seleccionar Crear
nuevoFormulario
• Ingresa las preguntas como se ve en la imagen sabiendo que:
•
• La primera y segunda es tipo texto
• La tercera es tipo test
• La cuarta es elegir de una lista
• La quinta es casillas de verificación
•
• Luego haz clic en el botón Mas acciones-->Insertar
• Copia el código proporcionado y pégalo en una nueva página Web
creada en Dreamweaver entre las etiquetas <body> y </body>
• Guarda la página Web con el nombre formdocs.html
• Abre el navegador y observa el resultado
26/09/2013
MamaniMamani
27

EJERCICIO 3:
26/09/2013
MamaniMamani
28
Barra de Estado
Barra Insertar
Barra herramientas

• Diseña la página con el apoyo de las herramientas de arriba y
pautas que se indican a continuación:
• Elige un texto para tu página e imágenes a elección sobre un
tema en particular. Cuida de pegar el texto en Dreamweaver
con la opción EdiciónPegado Especialsolo texto, para
evitar traer el formato web. Luego deberás diseñar una página
libre que contenga:
• Formatos de texto diversos (Tipo de fuente, tamaño, color,
etc.)
• Como mínimo 2 imágenes a las que se le deberán modificar
sus propiedades (con modificaciones de color o brillo, con
borde, etc.).
• Formatos de página (Fondos de color o imagen de fondo)
• Debe tener título
26/09/2013
MamaniMamani
29

26/09/2013
MamaniMamani
30
•Guarda el archivo en tu carpeta personal con el
nombre Eje01_DWlibre
•Abre el archivo con el Navegador Internet Explorer
(Vista previa o F12) para ver los resultados.

26/09/2013
MamaniMamani
31

Adobe dreamweaver Cs3

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a Adobe dreamweaver Cs3

Similar a Adobe dreamweaver Cs3 (20)

Último

Último (20)

Adobe dreamweaver Cs3