SlideShare una empresa de Scribd logo
1 de 60
DREAMWEAVER
O S C A R A L E J A N D R O P E D R A Z A TAV E R A
I V O N YA M I L E T C E R VA N T E S R A M Í R E Z
DEFINICIÓN DE ADOBE
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.
• Destacó su integración con otras herramientas como Adobe Flash y más
recientemente, su soporte de los estándares del World Wide Web Consortium.
ADOBE DREAMWEAVER EN LA
EDUCACIÓN
• Este programa le ayuda al estudiante a aprender a crear un sitio
web, mejora su creatividad y su curiosidad por emplear todas las
herramientas de este diseñador web, pero más que todo les sirve
para poder diseñar su propio sitio web con todo lo que deseen
ponerle. Quizás el profesor no les pueda enseñar a utilizar todas
las herramientas de esta aplicación, pero internet es una gran
ayuda, existen tutoriales donde enseñan a crear un sitio web y a
utilizar las otras aplicaciones de Adobe que se pueden añadir a
nuestro website.
COMO SE USA EL
DREAMWEAVER
A D O B E D R E A M W E A V E R E S U N P R O G R A M A M U Y Ú T I L , S I S A B E S C Ó M O F U N C I O N A . P A R A
A C E L E R A R E L P R O C E S O D E U S A R E S T E P R O G R A M A A H A C E R U N A P Á G I N A W E B ,
N E C E S I T A R Á S S A B E R U N O S C U A N T O S T R U C O S . L U E G O , ¡ E S T A R Á S A R M A D O Y L I S T O P A R A
E M P E Z A R A C R E A R !
1.Crea una carpeta
en el disco duro (no
en Dreamweaver) y
ponle el nombre que
quieras. Esta es la
carpeta raíz.
2.Dentro de esta
carpeta crea cuatro
sub-carpetas y
nómbralas:
"Imágenes", "Flash",
"Páginas" y "Otros".
3.Vete a
Dreamweaver y
haz clic en HTML.
Guarda esta
página en la
carpeta raíz como
“Página de inicio”
4 . E M P I E Z A C O N T U S I T I O W E B
5.DREAMWEAVER ES UN POCO LOCO A LA HORA DE
SELECCIONAR IMÁGENES, BOTONES, ETC. PARA
PONERLOS CORRECTAMENTE PRIMERO HAS DE
PONERLOS EN TABLAS. VE A “INSERTAR” Y AHÍ INSERTA
UNA NUEVA TABLA. PUEDES CONFIGURARLO PARA
PONER TODAS LAS TABLAS QUE DESEES. ES UN POCO
COMPLICADO AL PRINCIPIO LLEGAR DONDE DESEAS,
PERO FUNCIONA EL JUGAR CON EL PROGRAMA Y
CONOCERLO.
6.Si lo deseas puedes
insertar botones yendo
a “Insertar”, “Media”
(para complementos
multimedia), o la opción
botón de flash. Una vez
que lo consigas, puedes
hacer clic en él y buscar
la página que deseas
para conectarte o
escribir la url del sitio
que quieras.
7 .TA MBIÉN P U EDES
A Ñ A D IRLE T EX TO
E N F L AS H, Y
P U EDES A Ñ A D IR
I M Á GENES .
8.Cuando agregues
una imagen, no
hagas "copiar y
pegar". Ve a
“Insertar”, “Imagen”,
y luego busca la foto
o imagen que
deseas. De nuevo,
Dreamweaver es un
poco caótico.
9.Para cambiar el color de
fondo y la fuente, ve a
“Modificar”, luego a
“propiedades de la
página” y verás que es
fácilmente adaptable,
porque se explica por sí
solo en esa sección.
10.¡Esto debería ponerte
en el camino correcto!
1 . A S E G Ú R A T E D E G U A R D A R T O D O L O
Q U E C O R R E S P O N D E E N L A C A R P E T A
R A Í Z ( A R C H I V O S D E F L A S H , E N L A
S E C C I Ó N D E F L A S H , P O R E J E M P L O ) .
2 . A S E G Ú R A T E D E Q U E T O D A S L A S
S E C C I O N E S D E L A S P Á G I N A S , A
E X C E P C I Ó N D E L A P Á G I N A D E
I N I C I O , E S T É N B I E N U B I C A D A S Y
O R D E N A D A S E N L A C A R P E T A R A Í Z .
CONSEJOS
VENTAJAS
• Es muy bueno para trabajos profesionales.
• -Destaca su soporte de los estándares del World Wide Web Consortium
• -utiliza la tecnología web como CSS y Java Script.
• -Se puede diseñar y crear páginas web sin conocimiento de código HTML.
• -Permite pre visualizar las páginas web en casi todos los navegadores web.
• -Permite el uso de extinciones como HTML y Java Script.
• -Lo puede utilizar cualquier usuario para crear webs sin ser profesional.
• – Permite el uso de extensiones, que son pequeños programas que cualquier usuario puede
escribir, descargar e instalar, ofreciendo funcionalidades añadidas a la aplicación.
• -Los archivos del programa son rutinas de Javascript y hace que sea un programa fluido.
• -Está disponible para MAC, Windows y también se puede ejecutar en otras plataformas.
• -Nos permite ver los cambios que efectuamos a la vez que los realizamos.
DESVENTAJAS
• Se paga por la licencia del programa.
• -Terminada la web ahi se tiene que publicar y para eso hay que pagar
hosting y nombre de dominio.
• -El precio es muy elevado si se quiere comprar dentro de lo legal y no
se puede comprar por separado se tiene que comprar la suite completa.
• -Al ser un programa tan avanzado su manejo puede resultar complicado
para usuarios no experimentados.
ADVERTENCIA
•Dreamweaver puede llegar a ser muy frustrante,
así que trata de no “enfadarte” demasiado con
él.
VERSION 19.0
REQUISITOS DEL SISTEMA Y
CARACTERÍSTICAS DE DREAMWEAVER
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 de Word y Excel, con las funciones de copiar y pegar.
• Dreamweaver es conocido por ofrecer herramientas avanzadas en el desarrollo de
sitios web, y si bien se trata del producto de mayores características del mercado, su
uso está limitado a usuarios con experiencia, ya que de no ser así, uno se encuentra
con la dificultad de no saber por dónde comenzar
REQUISITOS DEL SISTEMA
• Procesador Intel® Pentium® 4 o AMD Athlon® de 64 bits.
• Microsoft® Windows® XP con Service Pack 2 (se recomienda Service Pack 3); Windows Vista® Home
Premium, Business, Ultimate o Enterprise con Service Pack 1; o Windows 7.
• 512 MB de RAM.
• 1 GB de espacio disponible en el disco duro para la instalación; se necesita espacio libre adicional
durante la instalación (no se puede instalar en dispositivos de almacenamiento flash extraíbles).
• Resolución de 1580 × 800 con tarjeta de vídeo de 16 bits.
• Java™ Runtime Environment 1.6 (incluido)
• Se necesita el software QuickTime 7.6.6 para la reproducción de contenido multimedia HTML5
• Este software no funcionará si no se activa. Es necesario disponer de conexión a Internet de banda
ancha y registrarse para poder activar el software, validar suscripciones y acceder a servicios online.*
No está disponible la activación por teléfono.
PRIMERA SINCRONIZACIÓN
• Al iniciar Dreamweaver en el equipo donde se instaló en primer lugar, aparecerá el
cuadro de diálogo Sincronizar configuración:
• Sincronizar configuración ahora
• Sincroniza la configuración con la nube inmediatamente.
• Sincronizar configuración siempre automáticamente
• Sincroniza la configuración automáticamente. Para obtener más información,
consulte Sincronización automática.
• Deshabilitar sincronización de configuración
• Desactiva la sincronización.
TOMA DE CONTACTO CON DREAMWEAVER
• Después de instalar Dreamweaver, la primera vez que inicie la aplicación, aparecerá un
menú de inicio rápido en la pantalla con tres preguntas para que pueda personalizar
su espacio de trabajo de Dreamweaver según sus necesidades.
• Según sus respuestas a estas preguntas, Dreamweaver se abrirá en un espacio de
trabajo de desarrollador (de aspecto minimalista centrado en el código) o en un
espacio de trabajo estándar (pantalla dividida con herramientas visuales y una
previsualización que va mostrando el código dentro de la aplicación mientras se
escribe).
• Al seleccionar un espacio de trabajo, debe elegir un tema de color con el que se sienta
cómodo. Después ya podrá comenzar.
PANTALLA INICIO MEJORADA
OPCIONES DE INICIO EN DREAMWEAVER
• Más información
• Haga clic en la ficha Formación para acceder instantáneamente a los tutoriales de
Dreamweaver desde esta pantalla.
• Inicio rápido
• Empiece por crear documentos en Dreamweaver; para ello, haga clic en los tipos de
que se muestran.
• Plantillas de inicio
• Abra una de las plantillas de inicio que incluye Dreamweaver.
• Inicio
• Haga clic en Inicio para volver a la pantalla de inicio.
INFORMACIÓN GENERAL SOBRE EL
ESPACIO DE TRABAJO
DESCRIPCIÓN GENERAL DE LOS
ELEMENTOS DEL ESPACIO DE TRABAJO
• 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
controles de la aplicación.
• Barra de herramientas Documento
• Contiene botones con opciones para las diferentes vistas de la ventana Documento(como la vista Diseño, la vista en vivo y la vista Código).
• Barra de herramientas Estándar
• Para mostrar la barra de herramientas Estándar, seleccione Ventana > Barras de herramientas > Estándar. La barra de herramientas contiene botones para
realizar las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Imprimir
código, Cortar, Copiar, Pegar, Deshacer yRehacer.
• Barra de herramientas
• 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.
INTRODUCCIÓN A LA VENTANA
DOCUMENTO
• La ventana Documento muestra el documento actual. Para cambiar de una vista del documento a otro,
sírvase de las opciones de visualización de la barra de herramientas Documento.
• También puede cambiar de vista con las opciones del menú Ver.
• Vista en vivo
• Muestra una representación realista del aspecto que tendrá el documento en un navegador, y le
permite interactuar con el documento de la misma forma que lo haría en un navegador. Puede editar
elementos HTML directamente en la vista en vivo y obtener de inmediato una vista previa de los
cambios en la misma vista. Para obtener más información sobre la edición en la Vista en vivo,
consulte Edición de elementos HTML en la Vista en vivo.
• Vista de Diseño
• Es un entorno de diseño para diseñar y editar el aspecto que tendrá la página y desarrollar
rápidamente aplicaciones. En esta vista, Dreamweaver muestra una representación visual del
documento completamente editable, similar a la que aparecería en un navegador.
CAMBIO DE UNA VISTA A OTRA
• Utilice la barra de herramientas Documento para cambiar de una vista a otra
rápidamente. Para obtener más información, consulte Introducción a la barra de
herramientas Documento.
• También puede cambiar de una vista a otra con las siguientes opciones del menú Ver:
• Solo Vista de código: seleccione Código.
• Vista dividida: seleccione Dividir y seleccione alguna de las opciones de vista dividida.
• Modo de vista: alterne entre la vista en vivo y la vista de diseño.
• Cambiar vistas: para cambiar de una vista a otra.
•
CAMBIO DE VISTAS CON LAS
OPCIONES DEL MENÚ VER
REORGANIZACIÓN O COLOCACIÓN DE LAS
VENTANAS DEL DOCUMENTO EN CASCADA O EN
MOSAICO
• Si tiene varios documentos abiertos a la vez, puede organizarlos en cascada o en
mosaico.
• Para colocar en cascada ventanas de documentos: seleccione Ventana > Organizar >
Cascada.
• Para colocar ventanas de documentos en mosaico:
• (Windows) Seleccione Ventana > Organizar > Mosaico horizontal o Mosaico vertical.
• (Macintosh) Seleccione Ventana > Organizar > Mosaico.
• Si abre más de un archivo, las ventanas de los documentos aparecen en fichas. Para
reorganizar las fichas de las ventanas de los documentos, arrastre la pestaña de una de
las ventanas a otra ubicación dentro del grupo.
CAMBIO DEL TAMAÑO DE LA VENTANA DE
DOCUMENTO
• La barra de estado muestra las dimensiones actuales de la ventana de documento (en píxeles). Para
diseñar una página cuyo mejor aspecto se logra con un tamaño específico, puede ajustar la ventana
de documento con cualquiera de los tamaños predeterminados, editar dichos tamaños o crear otros
nuevos.
• Cuando se cambia el tamaño de vista de una página en la vista de Diseño o la Vista en vivo, solo
cambian las dimensiones de la vista. El tamaño del documento no se modifica.
• Además de tamaños predeterminados y personalizados, Dreamweaver también muestra los tamaños
especificados en una consulta de medios. Cuando se selecciona un tamaño correspondiente a una
consulta de medios, Dreamweaver usa la consulta de medios para mostrar la página. También puede
cambiar la orientación de la página para obtener la vista previa de la página para dispositivos móviles
en los que el diseño de página cambia en función de cómo se sujete el dispositivo.
• Para cambiar el tamaño de la ventana de documento, seleccione uno de los tamaños del menú
emergente Tamaño de ventana, situado en la parte inferior de la ventana de documento.
TAMAÑO
MODIFICACIÓN DE LOS VALORES QUE APARECEN EN
EL MENÚ EMERGENTE TAMAÑO DE VENTANA
• Elija Editar tamaños en el menú emergente Tamaño de ventana.
• Haga clic en cualquiera de los valores de anchura o altura de la lista Tamaños de
ventana y escriba un valor nuevo. Para hacer que la ventana de documento se ajuste
solo a una anchura específica (sin modificar la altura), seleccione un valor de altura y
elimínelo.
• Haga clic en el cuadro Descripción para introducir un texto descriptivo sobre un
tamaño específico.
ADICIÓN DE UN VALOR AL MENÚ
EMERGENTE TAMAÑO DE VENTANA
INTRODUCCIÓN A LA BARRA DE
HERRAMIENTAS DOCUMENTO
INTRODUCCIÓN A LA BARRA DE
HERRAMIENTAS NAVEGACIÓN CON NAVEGADOR
PERSONALIZACIÓN DE LA BARRA DE
HERRAMIENTAS
DESCRIPCIÓN GENERAL DEL INSPECTOR
DE PROPIEDADES
MENÚS CONTEXTUALES
• Los menús contextuales proporcionan acceso rápido a los comandos y las propiedades
más útiles relacionados con la ventana o el objeto con el que esté trabajando. En los
menús contextuales solo aparecen los comandos pertinentes según la selección
realizada.
• Para abrir un menú contextual, haga clic con el botón derecho del ratón (Windows) o
presione Ctrl y haga clic (Mac) en una sección de código en la vista de código o en un
objeto en la vista en vivo o la vista de diseño.
¿PUEDO IMPORTAR SITIOS ANTIGUOS EN
LA ÚLTIMA VERSIÓN DE DREAMWEAVER?
• Sí, puede importar sitios antiguos en la última versión de Dreamweaver. Al hacerlo,
Dreamweaver busca el archivo CSS de Bootstrap en la carpeta raíz del sitio/css/.
• Si el sitio contiene un archivo CSS de Bootstrap v3, la versión de Bootstrap
en Administrar sitio > Configuración avanzada > Bootstrap se establece en 3.4.1.
• Si el sitio contiene un archivo CSS de Bootstrap v4, la versión de Bootstrap
en Administrar sitio > Configuración avanzada > Bootstrap se establece en 4.3.1.
• Si el sitio no tiene ningún archivo CSS de Bootstrap en la ruta raíz del sitio/css, la
versión de Bootstrap en Administrar sitio > Configuración avanzada > Bootstrap se
establece en 4.3.1.
USO DE LAS PLANTILLAS DE INICIO DE
BOOTSTRAP
• Las plantillas de inicio de Bootstrap le permiten crear páginas webs de temas populares en un abrir y cerrar
de ojos. Todos los archivos dependientes del framework se guardan automáticamente.
• Haga clic en Archivo > Nuevo.
• En el cuadro de diálogo Nuevo Documento que aparece, haga clic en Plantillas de inicio y luego seleccione la
plantilla necesaria de la lista de Plantillas de Bootstrap.
• Haga clic en Crear.
• Se crea una página HTML basada en la plantilla seleccionada. Ahora podrá modificar la página, añadiendo o
borrando componentes, o bien editando el texto o los activos, según sea necesario.
CREACIÓN DE DOCUMENTOS HTML
BASADOS EN EL FRAMEWORK DE
BOOTSTRAP• Puede empezar a crear su sitio web interactivo mediante la creación de un documento HTML basado en el framework de Bootstrap. También puede decidir si
crear un conjunto de archivos con el framework de Bootstrap o usar los archivos existentes. Una vez que se haya creado el documento, puede añadir
componentes de Bootstrap como acordeones y carruseles (carousel) mediante el panel Insertar de Dreamweaver. También, si tiene composiciones de
Photoshop, puede utilizar Extract para incluir las imágenes, las fuentes, los estilos, el texto y mucho más de la misma en su documento de Bootstrap.
• Haga clic en Archivo > Nuevo.
• En el cuadro de diálogo Nuevo documento, haga clic en Nuevo Documento > HTML y luego haga clic en la ficha Bootstrap.
• Para crear un nuevo archivo bootstrap.css (y el resto de archivos de Bootstrap), realice las siguientes acciones:
• Especifique si desea crear un nuevo CSS de Bootstrap o utilizar uno existente.
• Si decide crear un nuevo CSS, se creará una carpeta “css” en la raíz del sitio y el archivo bootstrap.css se copiará en la nueva carpeta. Si decide utilizar un CSS
existente, especifique la ruta de acceso o vaya a la ubicación del CSS.
CREAR NUEVO
BOTONES
COMPONENTE
USAR EXISTENTE
ABRIR ARCHIVOS DE BOOTSTRAP
• Puede abrir los archivos de Bootstrap de una de las siguientes formas:
• Haga clic en Archivo > Abrir y busque el archivo HTML de Bootstrap.
• (Recomendada) Cree un sitio de Dreamweaver y señale la carpeta del sitio en la
carpeta que contiene todos sus archivos de Bootstrap.
• Al abrir un archivo HTML de Bootstrap en Dreamweaver:
• Las filas se resaltan con líneas discontinuas en gris y las esquinas se muestran
redondeadas
• Las columnas se resaltan en azul, con líneas discontinuas
HTML
• Dreamweaver reconoce los archivos CSS asociados con cualquier otro archivo HTML de Bootstrap si en el nombre se incluye
“bootstrap”. La referencia del archivo CSS puede ser cualquiera de las siguientes o todas:
• Ruta local:El archivo CSS disminuido o no disminuido está presente localmente. Por ejemplo:
• <link href="css/bootstrap.css" rel="stylesheet"> o
<link href="css/bootstrap.min.css" rel="stylesheet">
• Ruta remota:
• Un archivo CSS disminuido o no disminuido remoto. Por ejemplo:
• <link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">
• CDN
• <link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css"
rel="stylesheet">
• Nota:
OCULTAR, MOSTRAR Y ADMINISTRAR
ELEMENTOS OCULTOS DE BOOTSTRAP
ELEMENTOS
AÑADIR COMPONENTES DE BOOTSTRAP
• La opción Componentes de Bootstrap del panel Insertar enumera todos los componentes de Bootstrap que puede añadir a
su página web en Dreamweaver. Según la versión de Bootstrap del archivo bootstrap.css vinculado a la página HTML, los
componentes correspondientes se enumeran en el panel Insertar. Por ejemplo, en Bootstrap v4.0.0, podrá ver
componentes adicionales como, por ejemplo, tarjetas y distintivos. Del mismo modo, los componentes Glyphicons, Panel,
Áreas y Miniaturas solo están disponibles en Bootstrap v3.3.7. En función de la versión de Bootstrap, verá los componentes
correspondientes en el panel Insertar.
• Los componentes del panel Insertar se rellenan según los criterios siguientes:
• Documento en foco: los componentes del panel Insertar se rellenan según la versión de Bootstrap que venga en el archivo
de Bootstrap que está vinculado al documento.
• Versión en las preferencias del sitio: para un documento que no sea de bootstrap, Dreamweaver busca la versión
en Preferencias del sitio > Avanzadas > Bootstrap. En función de la versión de esta opción, se rellenan los componentes
correspondientes. De forma predeterminada, para los sitios nuevos, la versión es la 4.3.1.
• Dónde se guardan los archivos: para un documento que no sea de Bootstrap, y que no forme parte de ningún sitio, el panel
Insertar refleja los componentes de la versión 4.3.1
•
COMPONENTES
AÑADIR FILAS
• Haga clic en la fila posterior a la que desee añadir la fila nueva. A continuación, haga
clic en el icono Añadir nueva fila. Se añadirá una fila de Bootstrap junto con dos
elementos secundarios de columnas con seis columnas cada uno.
• El código de la fila añadida es el siguiente:
• <div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>
• donde * representa el tamaño de pantalla actual en Dreamweaver.
AÑADIR COLUMNAS
• Seleccione la columna que quiera y, a continuación, haga clic en el icono de Añadir
nueva columna. La columna seleccionada se duplicará sin sus elementos secundarios.
• Las columnas que estén vacías mostrarán una altura mínima de 20 px. No obstante,
esta altura no se añade realmente a la página, sino que se muestra solo en la Vista en
vivo para facilitar la inserción de elementos dentro de las columnas.
CAMBIAR DE TAMAÑO Y DESPLAZAR LAS
COLUMNAS
• La tarea de cambiar de tamaño y desplazar las columnas se convierte en esencial cuando se
están creando diseños interactivos para varias ventanas gráficas.
• Cambiar el tamaño de las columnas
• Haga clic en la columna en cuestión y arrastre el manejador a la derecha para cambiar el
tamaño. Para un documento de Bootstrap v4.0.0, al cambiar el tamaño de una columna, se
añade la clase col-*-n, donde * representa la consulta de medios actual (sm, md, ld, xl) y n
representa el número de columnas que ocupa. Para el tamaño de pantalla Superpequeño,
se añade la clase col-n.
• Para documentos de Bootstrap v3.3.7, al cambiar el tamaño de una columna, se añade la
clase col-*-n, donde * representa la consulta de medios actual (xs, sm, md, o lg) y n
representa el número de columnas que ocupa.
DESPLAZAR COLUMNAS
• Haga clic en la columna en cuestión y arrastre el manejador a la izquierda para desplazar
dicha columna. El desplazamiento se mostrará como una zona sombreada. Para un
documento de Bootstrap v4.0.0, al desplazar la columna, se añade la clase offset-*-n, donde
* representa la consulta de medios actual (sm, md, lg o xl) y n representa el número de
columnas que ocupa.
• Para documentos de Bootstrap v3.3.7, al desplazar una columna, se añade la clase col-*-
offset-n, donde * representa la consulta de medios actual (xs, sm, md, o lg) y n representa
el número de columnas que se desplaza.
• Dreamweaver detecta el tamaño actual de la pantalla y añade la clase correcta. Si desea
desplazar las columnas para adaptarlas a ventanas gráficas específicas, cambie el tamaño
de la ventana gráfica mediante las opciones que se muestran en la esquina inferior derecha
o la barra de desplazamiento. Luego, desplace las columnas según corresponda.
VERSIÓN 2017.5 DE ADOBE
DREAMWEAVER CC
• Dreamweaver CC 2017.5 contempla las siguientes nuevas funciones y mejoras:
• Compatibilidad con Git para administrar los archivos en Dreamweaver
• Nuevos temas de código
• Experiencia de bienvenida mejorada para los nuevos usuarios
• Puede seguir leyendo, para obtener más información sobre dichas funciones y
mejoras.
COMPATIBILIDAD CON GIT EN
DREAMWEAVER
• La versión de 2017.5 de Dreamweaver CC admite Git, que es un sistema de control de versiones de
código abierto. Con la nueva compatibilidad con Git, ahora puede gestionar fácilmente sus archivos
incluyendo código fuente desde Dreamweaver.
• Ahora puede realizar operaciones comunes de Git desde Dreamweaver, sin la necesidad de utilizar
herramientas de terceros. El nuevo panel Git (Windows > Git) le permite realizar distintas operaciones
de Git, como confirmar, enviar, extraer y localizar.
• También puede utilizar Git como herramienta de colaboración creando y combinando ramas y
repositorios remotos. También puede ver las diferencias entre dos versiones de un archivo y los
historiales de repositorios y ficheros.
• Además, el panel Archivos de Dreamweaver ahora admite una nueva vista de Git. Con esta vista puede
ver y gestionar los archivos sin seguimiento, modificados, en escenario y confirmados que estén
asociados a su sitio.
• Para obtener más información sobre el uso de Git para el control de versiones y la colaboración,
consulte Uso de Git en Dreamweaver.
BIBLIOGRAFIA
• https://es.wikihow.com/usar-Dreamweaver
• https://dreamhenrytorres.wordpress.com/2012/06/16/ventajas-de-dreamweaver-3/
• http://cisnefierro.blogspot.com/2012/05/adobe-dreamweaver-caracteristicas.html

Más contenido relacionado

La actualidad más candente

Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5AyllenZue
 
Dreamweaver generalidades
Dreamweaver generalidadesDreamweaver generalidades
Dreamweaver generalidadesLuzrodrig
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaverastridcmc
 
Presentacion de dreamweaver
Presentacion de dreamweaverPresentacion de dreamweaver
Presentacion de dreamweavervaleriamont
 
Dreamweaver presentación
Dreamweaver presentaciónDreamweaver presentación
Dreamweaver presentaciónisabelach97
 
EXPOSICION DREAMWEAVER
EXPOSICION DREAMWEAVEREXPOSICION DREAMWEAVER
EXPOSICION DREAMWEAVERMarysollone
 
Procedimientos para crear una página web con dream weaver
Procedimientos para crear una página web con dream weaverProcedimientos para crear una página web con dream weaver
Procedimientos para crear una página web con dream weaverRacsosabe
 
Guia de aprendizaje
Guia de aprendizajeGuia de aprendizaje
Guia de aprendizajeimbachipilar
 
P R E S E N T A C I O N P O W E R D R E A M W E A V E R
P R E S E N T A C I O N  P O W E R  D R E A M W E A V E RP R E S E N T A C I O N  P O W E R  D R E A M W E A V E R
P R E S E N T A C I O N P O W E R D R E A M W E A V E Rguest777d3e
 
¿Como Hacer una página web? Diana Lopez
¿Como Hacer una página web?  Diana Lopez¿Como Hacer una página web?  Diana Lopez
¿Como Hacer una página web? Diana Lopezgrupoaac
 
Diseño de paginas web clase 1 lista
Diseño de paginas web clase 1 listaDiseño de paginas web clase 1 lista
Diseño de paginas web clase 1 listaJenny Palacios
 

La actualidad más candente (20)

Frontpage
FrontpageFrontpage
Frontpage
 
Microsoft Frontpage
 Microsoft Frontpage Microsoft Frontpage
Microsoft Frontpage
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Dreamweaver generalidades
Dreamweaver generalidadesDreamweaver generalidades
Dreamweaver generalidades
 
Ventana de dreamweaver
Ventana de dreamweaverVentana de dreamweaver
Ventana de dreamweaver
 
Presentacion de dreamweaver
Presentacion de dreamweaverPresentacion de dreamweaver
Presentacion de dreamweaver
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
dreamweaver
 dreamweaver dreamweaver
dreamweaver
 
Presentación front page
Presentación front pagePresentación front page
Presentación front page
 
REPASO PARA 5TO DE SECUNDARIA
REPASO PARA 5TO DE SECUNDARIAREPASO PARA 5TO DE SECUNDARIA
REPASO PARA 5TO DE SECUNDARIA
 
Manual de Dreamweaver
Manual de DreamweaverManual de Dreamweaver
Manual de Dreamweaver
 
Dreamweaver presentación
Dreamweaver presentaciónDreamweaver presentación
Dreamweaver presentación
 
EXPOSICION DREAMWEAVER
EXPOSICION DREAMWEAVEREXPOSICION DREAMWEAVER
EXPOSICION DREAMWEAVER
 
Procedimientos para crear una página web con dream weaver
Procedimientos para crear una página web con dream weaverProcedimientos para crear una página web con dream weaver
Procedimientos para crear una página web con dream weaver
 
Guia de aprendizaje
Guia de aprendizajeGuia de aprendizaje
Guia de aprendizaje
 
P R E S E N T A C I O N P O W E R D R E A M W E A V E R
P R E S E N T A C I O N  P O W E R  D R E A M W E A V E RP R E S E N T A C I O N  P O W E R  D R E A M W E A V E R
P R E S E N T A C I O N P O W E R D R E A M W E A V E R
 
Front Page ==
Front Page ==Front Page ==
Front Page ==
 
Manual dreamweaver CC
Manual dreamweaver CCManual dreamweaver CC
Manual dreamweaver CC
 
¿Como Hacer una página web? Diana Lopez
¿Como Hacer una página web?  Diana Lopez¿Como Hacer una página web?  Diana Lopez
¿Como Hacer una página web? Diana Lopez
 
Diseño de paginas web clase 1 lista
Diseño de paginas web clase 1 listaDiseño de paginas web clase 1 lista
Diseño de paginas web clase 1 lista
 

Similar a Adoble dreanweare1 (20)

tutorial de dreamweaver
tutorial de dreamweavertutorial de dreamweaver
tutorial de dreamweaver
 
Todo sobre dreamweaver
Todo sobre dreamweaverTodo sobre dreamweaver
Todo sobre dreamweaver
 
Que es dreamweaver
Que es dreamweaverQue es dreamweaver
Que es dreamweaver
 
Guiadetrabajono 1
Guiadetrabajono 1Guiadetrabajono 1
Guiadetrabajono 1
 
Como hacer una pagina web
Como hacer una pagina webComo hacer una pagina web
Como hacer una pagina web
 
Edgar torres
Edgar torresEdgar torres
Edgar torres
 
Jesus maria-fernanda
Jesus  maria-fernandaJesus  maria-fernanda
Jesus maria-fernanda
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Dreamweaver2
Dreamweaver2Dreamweaver2
Dreamweaver2
 
Guia de trabajo no.1
Guia de trabajo no.1Guia de trabajo no.1
Guia de trabajo no.1
 
Diapositivas
DiapositivasDiapositivas
Diapositivas
 
Andrés lopera rico
Andrés lopera ricoAndrés lopera rico
Andrés lopera rico
 
Dreamweaver cs5
Dreamweaver cs5Dreamweaver cs5
Dreamweaver cs5
 
Linda eljach
Linda eljachLinda eljach
Linda eljach
 
Practicas 1
Practicas 1Practicas 1
Practicas 1
 
Diapositivas
DiapositivasDiapositivas
Diapositivas
 
Diapositivas
DiapositivasDiapositivas
Diapositivas
 
DREMWEAVER
DREMWEAVERDREMWEAVER
DREMWEAVER
 
Paginas web
Paginas webPaginas web
Paginas web
 
Wordpress 2222
Wordpress 2222 Wordpress 2222
Wordpress 2222
 

Más de Alexsuper2002 (12)

Teoria del color-oapt
Teoria del color-oaptTeoria del color-oapt
Teoria del color-oapt
 
Sitio web yamilet
Sitio web yamiletSitio web yamilet
Sitio web yamilet
 
Topologias de red-yamilet
Topologias de red-yamiletTopologias de red-yamilet
Topologias de red-yamilet
 
Texto 2
Texto 2Texto 2
Texto 2
 
Texto
TextoTexto
Texto
 
TAREA ANDAMIO
TAREA ANDAMIOTAREA ANDAMIO
TAREA ANDAMIO
 
RECETARIO
RECETARIO RECETARIO
RECETARIO
 
Recetario
RecetarioRecetario
Recetario
 
Auto formas
Auto formasAuto formas
Auto formas
 
Andamio
AndamioAndamio
Andamio
 
Andamio
AndamioAndamio
Andamio
 
Formato base
Formato baseFormato base
Formato base
 

Último

CLASE - La visión y misión organizacionales.pdf
CLASE - La visión y misión organizacionales.pdfCLASE - La visión y misión organizacionales.pdf
CLASE - La visión y misión organizacionales.pdfJonathanCovena1
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfPaolaRopero2
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
plande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfplande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfenelcielosiempre
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Carlos Muñoz
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdfenelcielosiempre
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñotapirjackluis
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxlupitavic
 

Último (20)

CLASE - La visión y misión organizacionales.pdf
CLASE - La visión y misión organizacionales.pdfCLASE - La visión y misión organizacionales.pdf
CLASE - La visión y misión organizacionales.pdf
 
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdfGUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
GUIA DE CIRCUNFERENCIA Y ELIPSE UNDÉCIMO 2024.pdf
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
plande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfplande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdf
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
Plan Refuerzo Escolar 2024 para estudiantes con necesidades de Aprendizaje en...
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdf
 
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niñoproyecto de mayo inicial 5 añitos aprender es bueno para tu niño
proyecto de mayo inicial 5 añitos aprender es bueno para tu niño
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 

Adoble dreanweare1

  • 1. DREAMWEAVER O S C A R A L E J A N D R O P E D R A Z A TAV E R A I V O N YA M I L E T C E R VA N T E S R A M Í R E Z
  • 2. DEFINICIÓN DE ADOBE 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. • Destacó su integración con otras herramientas como Adobe Flash y más recientemente, su soporte de los estándares del World Wide Web Consortium.
  • 3. ADOBE DREAMWEAVER EN LA EDUCACIÓN • Este programa le ayuda al estudiante a aprender a crear un sitio web, mejora su creatividad y su curiosidad por emplear todas las herramientas de este diseñador web, pero más que todo les sirve para poder diseñar su propio sitio web con todo lo que deseen ponerle. Quizás el profesor no les pueda enseñar a utilizar todas las herramientas de esta aplicación, pero internet es una gran ayuda, existen tutoriales donde enseñan a crear un sitio web y a utilizar las otras aplicaciones de Adobe que se pueden añadir a nuestro website.
  • 4. COMO SE USA EL DREAMWEAVER
  • 5. A D O B E D R E A M W E A V E R E S U N P R O G R A M A M U Y Ú T I L , S I S A B E S C Ó M O F U N C I O N A . P A R A A C E L E R A R E L P R O C E S O D E U S A R E S T E P R O G R A M A A H A C E R U N A P Á G I N A W E B , N E C E S I T A R Á S S A B E R U N O S C U A N T O S T R U C O S . L U E G O , ¡ E S T A R Á S A R M A D O Y L I S T O P A R A E M P E Z A R A C R E A R ! 1.Crea una carpeta en el disco duro (no en Dreamweaver) y ponle el nombre que quieras. Esta es la carpeta raíz.
  • 6. 2.Dentro de esta carpeta crea cuatro sub-carpetas y nómbralas: "Imágenes", "Flash", "Páginas" y "Otros".
  • 7. 3.Vete a Dreamweaver y haz clic en HTML. Guarda esta página en la carpeta raíz como “Página de inicio”
  • 8. 4 . E M P I E Z A C O N T U S I T I O W E B
  • 9. 5.DREAMWEAVER ES UN POCO LOCO A LA HORA DE SELECCIONAR IMÁGENES, BOTONES, ETC. PARA PONERLOS CORRECTAMENTE PRIMERO HAS DE PONERLOS EN TABLAS. VE A “INSERTAR” Y AHÍ INSERTA UNA NUEVA TABLA. PUEDES CONFIGURARLO PARA PONER TODAS LAS TABLAS QUE DESEES. ES UN POCO COMPLICADO AL PRINCIPIO LLEGAR DONDE DESEAS, PERO FUNCIONA EL JUGAR CON EL PROGRAMA Y CONOCERLO.
  • 10. 6.Si lo deseas puedes insertar botones yendo a “Insertar”, “Media” (para complementos multimedia), o la opción botón de flash. Una vez que lo consigas, puedes hacer clic en él y buscar la página que deseas para conectarte o escribir la url del sitio que quieras.
  • 11. 7 .TA MBIÉN P U EDES A Ñ A D IRLE T EX TO E N F L AS H, Y P U EDES A Ñ A D IR I M Á GENES .
  • 12. 8.Cuando agregues una imagen, no hagas "copiar y pegar". Ve a “Insertar”, “Imagen”, y luego busca la foto o imagen que deseas. De nuevo, Dreamweaver es un poco caótico.
  • 13. 9.Para cambiar el color de fondo y la fuente, ve a “Modificar”, luego a “propiedades de la página” y verás que es fácilmente adaptable, porque se explica por sí solo en esa sección. 10.¡Esto debería ponerte en el camino correcto!
  • 14. 1 . A S E G Ú R A T E D E G U A R D A R T O D O L O Q U E C O R R E S P O N D E E N L A C A R P E T A R A Í Z ( A R C H I V O S D E F L A S H , E N L A S E C C I Ó N D E F L A S H , P O R E J E M P L O ) . 2 . A S E G Ú R A T E D E Q U E T O D A S L A S S E C C I O N E S D E L A S P Á G I N A S , A E X C E P C I Ó N D E L A P Á G I N A D E I N I C I O , E S T É N B I E N U B I C A D A S Y O R D E N A D A S E N L A C A R P E T A R A Í Z . CONSEJOS
  • 15. VENTAJAS • Es muy bueno para trabajos profesionales. • -Destaca su soporte de los estándares del World Wide Web Consortium • -utiliza la tecnología web como CSS y Java Script. • -Se puede diseñar y crear páginas web sin conocimiento de código HTML. • -Permite pre visualizar las páginas web en casi todos los navegadores web. • -Permite el uso de extinciones como HTML y Java Script. • -Lo puede utilizar cualquier usuario para crear webs sin ser profesional. • – Permite el uso de extensiones, que son pequeños programas que cualquier usuario puede escribir, descargar e instalar, ofreciendo funcionalidades añadidas a la aplicación. • -Los archivos del programa son rutinas de Javascript y hace que sea un programa fluido. • -Está disponible para MAC, Windows y también se puede ejecutar en otras plataformas. • -Nos permite ver los cambios que efectuamos a la vez que los realizamos.
  • 16. DESVENTAJAS • Se paga por la licencia del programa. • -Terminada la web ahi se tiene que publicar y para eso hay que pagar hosting y nombre de dominio. • -El precio es muy elevado si se quiere comprar dentro de lo legal y no se puede comprar por separado se tiene que comprar la suite completa. • -Al ser un programa tan avanzado su manejo puede resultar complicado para usuarios no experimentados.
  • 17. ADVERTENCIA •Dreamweaver puede llegar a ser muy frustrante, así que trata de no “enfadarte” demasiado con él.
  • 19. REQUISITOS DEL SISTEMA Y CARACTERÍSTICAS DE DREAMWEAVER
  • 20. 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 de Word y Excel, con las funciones de copiar y pegar. • Dreamweaver es conocido por ofrecer herramientas avanzadas en el desarrollo de sitios web, y si bien se trata del producto de mayores características del mercado, su uso está limitado a usuarios con experiencia, ya que de no ser así, uno se encuentra con la dificultad de no saber por dónde comenzar
  • 21. REQUISITOS DEL SISTEMA • Procesador Intel® Pentium® 4 o AMD Athlon® de 64 bits. • Microsoft® Windows® XP con Service Pack 2 (se recomienda Service Pack 3); Windows Vista® Home Premium, Business, Ultimate o Enterprise con Service Pack 1; o Windows 7. • 512 MB de RAM. • 1 GB de espacio disponible en el disco duro para la instalación; se necesita espacio libre adicional durante la instalación (no se puede instalar en dispositivos de almacenamiento flash extraíbles). • Resolución de 1580 × 800 con tarjeta de vídeo de 16 bits. • Java™ Runtime Environment 1.6 (incluido) • Se necesita el software QuickTime 7.6.6 para la reproducción de contenido multimedia HTML5 • Este software no funcionará si no se activa. Es necesario disponer de conexión a Internet de banda ancha y registrarse para poder activar el software, validar suscripciones y acceder a servicios online.* No está disponible la activación por teléfono.
  • 22. PRIMERA SINCRONIZACIÓN • Al iniciar Dreamweaver en el equipo donde se instaló en primer lugar, aparecerá el cuadro de diálogo Sincronizar configuración: • Sincronizar configuración ahora • Sincroniza la configuración con la nube inmediatamente. • Sincronizar configuración siempre automáticamente • Sincroniza la configuración automáticamente. Para obtener más información, consulte Sincronización automática. • Deshabilitar sincronización de configuración • Desactiva la sincronización.
  • 23. TOMA DE CONTACTO CON DREAMWEAVER • Después de instalar Dreamweaver, la primera vez que inicie la aplicación, aparecerá un menú de inicio rápido en la pantalla con tres preguntas para que pueda personalizar su espacio de trabajo de Dreamweaver según sus necesidades. • Según sus respuestas a estas preguntas, Dreamweaver se abrirá en un espacio de trabajo de desarrollador (de aspecto minimalista centrado en el código) o en un espacio de trabajo estándar (pantalla dividida con herramientas visuales y una previsualización que va mostrando el código dentro de la aplicación mientras se escribe). • Al seleccionar un espacio de trabajo, debe elegir un tema de color con el que se sienta cómodo. Después ya podrá comenzar.
  • 25. OPCIONES DE INICIO EN DREAMWEAVER • Más información • Haga clic en la ficha Formación para acceder instantáneamente a los tutoriales de Dreamweaver desde esta pantalla. • Inicio rápido • Empiece por crear documentos en Dreamweaver; para ello, haga clic en los tipos de que se muestran. • Plantillas de inicio • Abra una de las plantillas de inicio que incluye Dreamweaver. • Inicio • Haga clic en Inicio para volver a la pantalla de inicio.
  • 26. INFORMACIÓN GENERAL SOBRE EL ESPACIO DE TRABAJO
  • 27. DESCRIPCIÓN GENERAL DE LOS ELEMENTOS DEL ESPACIO DE TRABAJO • 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 controles de la aplicación. • Barra de herramientas Documento • Contiene botones con opciones para las diferentes vistas de la ventana Documento(como la vista Diseño, la vista en vivo y la vista Código). • Barra de herramientas Estándar • Para mostrar la barra de herramientas Estándar, seleccione Ventana > Barras de herramientas > Estándar. La barra de herramientas contiene botones para realizar las operaciones más habituales de los menús Archivo y Edición: Nuevo, Abrir, Guardar, Guardar todo, Imprimir código, Cortar, Copiar, Pegar, Deshacer yRehacer. • Barra de herramientas • 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.
  • 28. INTRODUCCIÓN A LA VENTANA DOCUMENTO • La ventana Documento muestra el documento actual. Para cambiar de una vista del documento a otro, sírvase de las opciones de visualización de la barra de herramientas Documento. • También puede cambiar de vista con las opciones del menú Ver. • Vista en vivo • Muestra una representación realista del aspecto que tendrá el documento en un navegador, y le permite interactuar con el documento de la misma forma que lo haría en un navegador. Puede editar elementos HTML directamente en la vista en vivo y obtener de inmediato una vista previa de los cambios en la misma vista. Para obtener más información sobre la edición en la Vista en vivo, consulte Edición de elementos HTML en la Vista en vivo. • Vista de Diseño • Es un entorno de diseño para diseñar y editar el aspecto que tendrá la página y desarrollar rápidamente aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador.
  • 29. CAMBIO DE UNA VISTA A OTRA • Utilice la barra de herramientas Documento para cambiar de una vista a otra rápidamente. Para obtener más información, consulte Introducción a la barra de herramientas Documento. • También puede cambiar de una vista a otra con las siguientes opciones del menú Ver: • Solo Vista de código: seleccione Código. • Vista dividida: seleccione Dividir y seleccione alguna de las opciones de vista dividida. • Modo de vista: alterne entre la vista en vivo y la vista de diseño. • Cambiar vistas: para cambiar de una vista a otra. •
  • 30. CAMBIO DE VISTAS CON LAS OPCIONES DEL MENÚ VER
  • 31. REORGANIZACIÓN O COLOCACIÓN DE LAS VENTANAS DEL DOCUMENTO EN CASCADA O EN MOSAICO • Si tiene varios documentos abiertos a la vez, puede organizarlos en cascada o en mosaico. • Para colocar en cascada ventanas de documentos: seleccione Ventana > Organizar > Cascada. • Para colocar ventanas de documentos en mosaico: • (Windows) Seleccione Ventana > Organizar > Mosaico horizontal o Mosaico vertical. • (Macintosh) Seleccione Ventana > Organizar > Mosaico. • Si abre más de un archivo, las ventanas de los documentos aparecen en fichas. Para reorganizar las fichas de las ventanas de los documentos, arrastre la pestaña de una de las ventanas a otra ubicación dentro del grupo.
  • 32. CAMBIO DEL TAMAÑO DE LA VENTANA DE DOCUMENTO • La barra de estado muestra las dimensiones actuales de la ventana de documento (en píxeles). Para diseñar una página cuyo mejor aspecto se logra con un tamaño específico, puede ajustar la ventana de documento con cualquiera de los tamaños predeterminados, editar dichos tamaños o crear otros nuevos. • Cuando se cambia el tamaño de vista de una página en la vista de Diseño o la Vista en vivo, solo cambian las dimensiones de la vista. El tamaño del documento no se modifica. • Además de tamaños predeterminados y personalizados, Dreamweaver también muestra los tamaños especificados en una consulta de medios. Cuando se selecciona un tamaño correspondiente a una consulta de medios, Dreamweaver usa la consulta de medios para mostrar la página. También puede cambiar la orientación de la página para obtener la vista previa de la página para dispositivos móviles en los que el diseño de página cambia en función de cómo se sujete el dispositivo. • Para cambiar el tamaño de la ventana de documento, seleccione uno de los tamaños del menú emergente Tamaño de ventana, situado en la parte inferior de la ventana de documento.
  • 34. MODIFICACIÓN DE LOS VALORES QUE APARECEN EN EL MENÚ EMERGENTE TAMAÑO DE VENTANA • Elija Editar tamaños en el menú emergente Tamaño de ventana. • Haga clic en cualquiera de los valores de anchura o altura de la lista Tamaños de ventana y escriba un valor nuevo. Para hacer que la ventana de documento se ajuste solo a una anchura específica (sin modificar la altura), seleccione un valor de altura y elimínelo. • Haga clic en el cuadro Descripción para introducir un texto descriptivo sobre un tamaño específico.
  • 35. ADICIÓN DE UN VALOR AL MENÚ EMERGENTE TAMAÑO DE VENTANA
  • 36. INTRODUCCIÓN A LA BARRA DE HERRAMIENTAS DOCUMENTO
  • 37. INTRODUCCIÓN A LA BARRA DE HERRAMIENTAS NAVEGACIÓN CON NAVEGADOR
  • 38. PERSONALIZACIÓN DE LA BARRA DE HERRAMIENTAS
  • 39. DESCRIPCIÓN GENERAL DEL INSPECTOR DE PROPIEDADES
  • 40. MENÚS CONTEXTUALES • Los menús contextuales proporcionan acceso rápido a los comandos y las propiedades más útiles relacionados con la ventana o el objeto con el que esté trabajando. En los menús contextuales solo aparecen los comandos pertinentes según la selección realizada. • Para abrir un menú contextual, haga clic con el botón derecho del ratón (Windows) o presione Ctrl y haga clic (Mac) en una sección de código en la vista de código o en un objeto en la vista en vivo o la vista de diseño.
  • 41. ¿PUEDO IMPORTAR SITIOS ANTIGUOS EN LA ÚLTIMA VERSIÓN DE DREAMWEAVER? • Sí, puede importar sitios antiguos en la última versión de Dreamweaver. Al hacerlo, Dreamweaver busca el archivo CSS de Bootstrap en la carpeta raíz del sitio/css/. • Si el sitio contiene un archivo CSS de Bootstrap v3, la versión de Bootstrap en Administrar sitio > Configuración avanzada > Bootstrap se establece en 3.4.1. • Si el sitio contiene un archivo CSS de Bootstrap v4, la versión de Bootstrap en Administrar sitio > Configuración avanzada > Bootstrap se establece en 4.3.1. • Si el sitio no tiene ningún archivo CSS de Bootstrap en la ruta raíz del sitio/css, la versión de Bootstrap en Administrar sitio > Configuración avanzada > Bootstrap se establece en 4.3.1.
  • 42. USO DE LAS PLANTILLAS DE INICIO DE BOOTSTRAP • Las plantillas de inicio de Bootstrap le permiten crear páginas webs de temas populares en un abrir y cerrar de ojos. Todos los archivos dependientes del framework se guardan automáticamente. • Haga clic en Archivo > Nuevo. • En el cuadro de diálogo Nuevo Documento que aparece, haga clic en Plantillas de inicio y luego seleccione la plantilla necesaria de la lista de Plantillas de Bootstrap. • Haga clic en Crear. • Se crea una página HTML basada en la plantilla seleccionada. Ahora podrá modificar la página, añadiendo o borrando componentes, o bien editando el texto o los activos, según sea necesario.
  • 43. CREACIÓN DE DOCUMENTOS HTML BASADOS EN EL FRAMEWORK DE BOOTSTRAP• Puede empezar a crear su sitio web interactivo mediante la creación de un documento HTML basado en el framework de Bootstrap. También puede decidir si crear un conjunto de archivos con el framework de Bootstrap o usar los archivos existentes. Una vez que se haya creado el documento, puede añadir componentes de Bootstrap como acordeones y carruseles (carousel) mediante el panel Insertar de Dreamweaver. También, si tiene composiciones de Photoshop, puede utilizar Extract para incluir las imágenes, las fuentes, los estilos, el texto y mucho más de la misma en su documento de Bootstrap. • Haga clic en Archivo > Nuevo. • En el cuadro de diálogo Nuevo documento, haga clic en Nuevo Documento > HTML y luego haga clic en la ficha Bootstrap. • Para crear un nuevo archivo bootstrap.css (y el resto de archivos de Bootstrap), realice las siguientes acciones: • Especifique si desea crear un nuevo CSS de Bootstrap o utilizar uno existente. • Si decide crear un nuevo CSS, se creará una carpeta “css” en la raíz del sitio y el archivo bootstrap.css se copiará en la nueva carpeta. Si decide utilizar un CSS existente, especifique la ruta de acceso o vaya a la ubicación del CSS.
  • 48. ABRIR ARCHIVOS DE BOOTSTRAP • Puede abrir los archivos de Bootstrap de una de las siguientes formas: • Haga clic en Archivo > Abrir y busque el archivo HTML de Bootstrap. • (Recomendada) Cree un sitio de Dreamweaver y señale la carpeta del sitio en la carpeta que contiene todos sus archivos de Bootstrap. • Al abrir un archivo HTML de Bootstrap en Dreamweaver: • Las filas se resaltan con líneas discontinuas en gris y las esquinas se muestran redondeadas • Las columnas se resaltan en azul, con líneas discontinuas
  • 49. HTML • Dreamweaver reconoce los archivos CSS asociados con cualquier otro archivo HTML de Bootstrap si en el nombre se incluye “bootstrap”. La referencia del archivo CSS puede ser cualquiera de las siguientes o todas: • Ruta local:El archivo CSS disminuido o no disminuido está presente localmente. Por ejemplo: • <link href="css/bootstrap.css" rel="stylesheet"> o <link href="css/bootstrap.min.css" rel="stylesheet"> • Ruta remota: • Un archivo CSS disminuido o no disminuido remoto. Por ejemplo: • <link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet"> <link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet"> • CDN • <link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet"> • Nota:
  • 50. OCULTAR, MOSTRAR Y ADMINISTRAR ELEMENTOS OCULTOS DE BOOTSTRAP
  • 52. AÑADIR COMPONENTES DE BOOTSTRAP • La opción Componentes de Bootstrap del panel Insertar enumera todos los componentes de Bootstrap que puede añadir a su página web en Dreamweaver. Según la versión de Bootstrap del archivo bootstrap.css vinculado a la página HTML, los componentes correspondientes se enumeran en el panel Insertar. Por ejemplo, en Bootstrap v4.0.0, podrá ver componentes adicionales como, por ejemplo, tarjetas y distintivos. Del mismo modo, los componentes Glyphicons, Panel, Áreas y Miniaturas solo están disponibles en Bootstrap v3.3.7. En función de la versión de Bootstrap, verá los componentes correspondientes en el panel Insertar. • Los componentes del panel Insertar se rellenan según los criterios siguientes: • Documento en foco: los componentes del panel Insertar se rellenan según la versión de Bootstrap que venga en el archivo de Bootstrap que está vinculado al documento. • Versión en las preferencias del sitio: para un documento que no sea de bootstrap, Dreamweaver busca la versión en Preferencias del sitio > Avanzadas > Bootstrap. En función de la versión de esta opción, se rellenan los componentes correspondientes. De forma predeterminada, para los sitios nuevos, la versión es la 4.3.1. • Dónde se guardan los archivos: para un documento que no sea de Bootstrap, y que no forme parte de ningún sitio, el panel Insertar refleja los componentes de la versión 4.3.1 •
  • 54. AÑADIR FILAS • Haga clic en la fila posterior a la que desee añadir la fila nueva. A continuación, haga clic en el icono Añadir nueva fila. Se añadirá una fila de Bootstrap junto con dos elementos secundarios de columnas con seis columnas cada uno. • El código de la fila añadida es el siguiente: • <div class="row"> <div class="col-*-6"></div> <div class="col-*-6"></div> </div> • donde * representa el tamaño de pantalla actual en Dreamweaver.
  • 55. AÑADIR COLUMNAS • Seleccione la columna que quiera y, a continuación, haga clic en el icono de Añadir nueva columna. La columna seleccionada se duplicará sin sus elementos secundarios. • Las columnas que estén vacías mostrarán una altura mínima de 20 px. No obstante, esta altura no se añade realmente a la página, sino que se muestra solo en la Vista en vivo para facilitar la inserción de elementos dentro de las columnas.
  • 56. CAMBIAR DE TAMAÑO Y DESPLAZAR LAS COLUMNAS • La tarea de cambiar de tamaño y desplazar las columnas se convierte en esencial cuando se están creando diseños interactivos para varias ventanas gráficas. • Cambiar el tamaño de las columnas • Haga clic en la columna en cuestión y arrastre el manejador a la derecha para cambiar el tamaño. Para un documento de Bootstrap v4.0.0, al cambiar el tamaño de una columna, se añade la clase col-*-n, donde * representa la consulta de medios actual (sm, md, ld, xl) y n representa el número de columnas que ocupa. Para el tamaño de pantalla Superpequeño, se añade la clase col-n. • Para documentos de Bootstrap v3.3.7, al cambiar el tamaño de una columna, se añade la clase col-*-n, donde * representa la consulta de medios actual (xs, sm, md, o lg) y n representa el número de columnas que ocupa.
  • 57. DESPLAZAR COLUMNAS • Haga clic en la columna en cuestión y arrastre el manejador a la izquierda para desplazar dicha columna. El desplazamiento se mostrará como una zona sombreada. Para un documento de Bootstrap v4.0.0, al desplazar la columna, se añade la clase offset-*-n, donde * representa la consulta de medios actual (sm, md, lg o xl) y n representa el número de columnas que ocupa. • Para documentos de Bootstrap v3.3.7, al desplazar una columna, se añade la clase col-*- offset-n, donde * representa la consulta de medios actual (xs, sm, md, o lg) y n representa el número de columnas que se desplaza. • Dreamweaver detecta el tamaño actual de la pantalla y añade la clase correcta. Si desea desplazar las columnas para adaptarlas a ventanas gráficas específicas, cambie el tamaño de la ventana gráfica mediante las opciones que se muestran en la esquina inferior derecha o la barra de desplazamiento. Luego, desplace las columnas según corresponda.
  • 58. VERSIÓN 2017.5 DE ADOBE DREAMWEAVER CC • Dreamweaver CC 2017.5 contempla las siguientes nuevas funciones y mejoras: • Compatibilidad con Git para administrar los archivos en Dreamweaver • Nuevos temas de código • Experiencia de bienvenida mejorada para los nuevos usuarios • Puede seguir leyendo, para obtener más información sobre dichas funciones y mejoras.
  • 59. COMPATIBILIDAD CON GIT EN DREAMWEAVER • La versión de 2017.5 de Dreamweaver CC admite Git, que es un sistema de control de versiones de código abierto. Con la nueva compatibilidad con Git, ahora puede gestionar fácilmente sus archivos incluyendo código fuente desde Dreamweaver. • Ahora puede realizar operaciones comunes de Git desde Dreamweaver, sin la necesidad de utilizar herramientas de terceros. El nuevo panel Git (Windows > Git) le permite realizar distintas operaciones de Git, como confirmar, enviar, extraer y localizar. • También puede utilizar Git como herramienta de colaboración creando y combinando ramas y repositorios remotos. También puede ver las diferencias entre dos versiones de un archivo y los historiales de repositorios y ficheros. • Además, el panel Archivos de Dreamweaver ahora admite una nueva vista de Git. Con esta vista puede ver y gestionar los archivos sin seguimiento, modificados, en escenario y confirmados que estén asociados a su sitio. • Para obtener más información sobre el uso de Git para el control de versiones y la colaboración, consulte Uso de Git en Dreamweaver.