COLEGIO DE BACHILLERES DEL

ESTADO DE OAXACA
PLANTEL 02, EL ESPINAL, OAXACA
“EDUCACIÓN PÚBLICA DE CALIDAD”

PAGINAS WEB

MORALES PIÑON EDUARDO (606)

29 DE MARZO 2019
Dreamweaver
Es una aplicación informática destinada a la construcción,
diseño y edición de sitios y aplicaciones Web basados en
estándares. Este programa fue creado inicialmente
por Macromedia y tras la desaparición de esta compañía
pasó a manos de Adobe Systems. Sirve para diseño y
programación web, básicamente para hacer o modificar
páginas de Internet. Para utilizarlo necesitas básicamente
al menos algún conocimiento de lenguaje HTML o PHP,
estos son códigos generales en formatos

Dreamweaver formato
La aplicación de formato a texto en Dreamweaver es
similar a la utilización de un programa estándar de
tratamiento de texto. Puede establecer estilos de formato
predeterminados (Párrafo, Encabezado 1, Encabezado 2,
etc.) para un bloque de texto, cambiar la fuente, el tamaño,
el color y la alineación del texto seleccionado o aplicar
estilos de texto, como negrita, cursiva, monoespacio y
subrayado.
Dreamweaver dispone de dos inspectores de propiedades
integrados en uno solo: el inspector de propiedades de CSS y el inspector de
propiedades de HTML. Al utilizar el inspector de propiedades de CSS, Dreamweaver
aplica formato al texto mediante CSS (Cascading Style Sheets: hojas de estilos en
cascada). Los estilos CSS ofrecen a los diseñadores y desarrolladores web un
mayor control sobre el diseño de la página web.

Tipos de archivos de Dreamweaver

Dreamweaver le permite trabajar con una gran variedad de tipos de archivos. El tipo
de archivo principal con el que va a trabajar es el archivo HTML. Los archivos HTML
—o archivos en lenguaje de formato de hipertexto— incluyen un lenguaje basado
en etiquetas que es el responsable de mostrar la página web a través del navegador.

CSS Los archivos de Hojas de estilos en cascada tienen la extensión. Se utilizan

para aplicar formato al contenido HTML y controlar la posición de los
distintos elementos de la página.

GIF Archivos de Formato de intercambio de gráficos, que tienen la extensión

.gif. El formato GIF es un formato gráfico popular en la Web para cómics,
logotipos, gráficos con zonas transparentes y animaciones.
JPEG Archivos de Grupo conjunto de expertos fotográficos (el nombre de la
organización que creó el formato) que tienen la extensión .jpg y suelen ser
fotografías o imágenes de tonalidades intensas.

XML Archivos de Lenguaje de formato ampliable, que tienen la extensión .xml.

Contienen datos en formato original al que se puede aplicar formato
mediante el lenguaje XSL (Lenguaje de hoja de estilos ampliable,
Extensible Stylesheet Language).
Creación
Fue creado inicialmente por Macromedia (actualmente producido por Adobe
Systems). Es el programa de este tipo 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 del World
Wide Web Consortium. Su principal competidor es Microsoft Expresión Web y tiene
soporte tanto para edición de imágenes como para animación a través de su
integración con otras. Hasta la versión MX, fue duramente criticado por su escaso
soporte de los estándares de la web.

Se vende como parte de la suite Adobe Creative Suite 3 y 4.

Tipos de imágenes que acepta Dreamweaver

Las imágenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero
no todos estos formatos son adecuados para una web, debido a que pueden ocupar
mucha memoria o a que no son compatibles con algunos navegadores.
Los formatos más utilizados son el GIF y el JPG, que a pesar de ser imágenes de
menor calidad que las imágenes BMP, son más recomendables debido a que
ocupan menos memoria.

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.

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.

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.
Al modificar estos valores, lo que se pretende es que la imagen ocupe menos
memoria. Para optimizar una imagen desde Dreamweaver hay que seleccionar la
imagen, y seguidamente dirigirse al menú Comandos, opción Optimizar imagen en
Fireworks.

Transparencias

En ocasiones puede resultar útil poder hacer invisibles algunos colores que forman
parte de una imagen. Normalmente lo que se desea hacer transparente es el fondo.
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.
Otros Programas de diseño
Adobe Photoshop
De entre las mejores herramientas de edición de imágenes, Photoshop es
particularmente conocida por su buena función en tareas de retoque de fotografías
y gráficos. Es líder mundial del mercado de las aplicaciones de edición de imágenes.

Adobe ilustrador
Este programa lleva más de 25 años enfocándose al dibujo vectorial y al diseño de
elementos gráficos casi para cualquier soporte, pudiendo ser usado para dibujo
profesional, diseño editorial, web o gráfico para móviles.

Gimp
Gimp es un programa que sirve para la edición y manipulación de imágenes.
Además, es un software multiplataforma, ya que se puede utilizar en varios sistemas
operativos.

Picasa
Este programa de diseño gráfico permite recortar fotos, cambiarle los colores,
editarlas y retocarlas.

ACDsee pro
Es uno de los programas más completos para mejorar y controlar la producción de
imágenes. Administra las imágenes digitales, las procesa, las edita, y las pública en
todos los formato de archivo habituales.
Pixlr
Es un editor de fotos online que permite realizar de manera rápida modificaciones
en las fotografías sin tener que descargar ni instalar ninguna aplicación.

Ventana del Programa Dreamweaver

La ventana de documento muestra el documento actual aproximadamente igual a

como aparecerá en un navegador Web. La barra de título de la ventana de
documento muestra el título de la página y, entre paréntesis.

• La barra de estado, situada en la parte inferior de la ventana de documento,

proporciona información adicional sobre el documento que está creando.
• El selector de etiquetas muestra las etiquetas HTML padre que controlan el texto
o los objetos seleccionados. Haga clic en una de estas etiquetas para resaltar su
contenido en la ventana de documento. Haga clic en <body> para seleccionar todo
el cuerpo del documento.
• La ventana emergente Tamaño de ventana permite cambiar el tamaño de la
ventana de documento para que adopte dimensiones predeterminadas o
personalizadas. Consulte Cambiar el tamaño de la ventana de documento.
• A la derecha del menú emergente Tamaño de ventana observará la estimación
del tamaño del documento y del tiempo de descarga de la página, incluidos todos
los archivos dependientes, como imágenes y otros archivos multimedia.
• La barra del lanzador aparece a lo largo de la parte inferior de la ventana de
documento. De forma predeterminada, los botones de la barra del lanzador abren
la ventana Sitio, el panel Activos, el panel Estilos HTML.

Herramientas
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 de aplicaciones B. Barra de herramientas Documento C. Ventana

Documento D. Conmutador de espacios de trabajo E. Paneles F. Vista de código G. Barra de
estado H. Selector de etiquetas I. Vista en vivo J. Barra de herramientas

Descripción general de los elementos del espacio de

trabajo

El espacio de trabajo incluye los siguientes elementos:

Barra de la aplicación
Se encuentra a lo largo de la parte superior de la ventana de la aplicación y contiene un
conmutador de espacios de trabajo, menús (solo Windows) y otros controles de la
aplicación.
Barra de herramientas Documento
Se encuentra en la parte izquierda de la ventana de la aplicación y contiene botones
específicos para cada vista.
Ventana Documento
Muestra el documento actual mientras lo está creando y editando.
Inspector de propiedades
Le permite ver y cambiar diversas propiedades del objeto o texto seleccionado. Cada objeto
tiene varias propiedades.
Selector de etiquetas
Situado en la barra de estado de la parte inferior de la ventana Documento. Muestra la
jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la
jerarquía para seleccionar la etiqueta y todo su contenido.
Paneles
Le ayudan a supervisar y modificar el trabajo realizado. Son ejemplos de paneles el panel
Insertar, el panel Diseñador de CSS y el panel Archivos.

El panel Extract
Permite cargar y ver sus archivos PSD en Creative Cloud. Con este panel, puede extraer
CSS, texto, imágenes, fuentes, colores, degradados y medidas de las composiciones PSD en
su documento.
WEB 2.0

Comprende aquellos sitios web que facilitan el compartir

información, la interoperabilidad, el diseño centrado en el
usuario y la colaboración en la World Wide Web. Web 2.0
permite a los usuarios interactuar y colaborar entre sí,
como creadores de contenido. La red social conocida
como web 2.0 pasa de ser un simple contenedor o fuente
de información; la web en este caso se convierte en una
plataforma de trabajo colaborativo.

WEB 3.0

Esta Web 3.0. nace ante la necesidad de ayudar a los

usuarios a encontrar la información que ese usuario
concretamente necesita. Debido a la gran avalancha de
información, trata de proporcionarle al usuario las
experiencias más cercanas. Se trata de un cambio de
concepción que implica también una evolución
tecnológica, aplicando nuevos lenguajes, nuevas técnicas
de búsqueda y de almacenamiento.