Hernández ríos Jesús 2IV4

DREM WEAVER

1-¿Qué es Dreamweaver?

Adobe Dreamweaver es un software de desarrollo web creado por Adobe. Es una herramienta que permite diseñar,
codificar y administrar sitios web y aplicaciones web. Proporciona una interfaz gráfica (GUI) para el diseño de páginas
web, junto con un editor de código para trabajar en el backend de un sitio.

2-¿Para qué sirve Dreamweaver?

Dreamweaver se utiliza principalmente para crear, editar y gestionar sitios web y aplicaciones web. Permite a los
diseñadores y desarrolladores trabajar tanto en el diseño visual como en la programación de páginas web. Su función
principal es ayudar a escribir código HTML, CSS, JavaScript y otros lenguajes de programación de forma eficiente, y se
puede utilizar tanto en entornos de desarrollo front-end (interfaz de usuario) como back-end (servidores y bases de
datos).

3-¿Cómo y mediante qué elementos se utiliza y se da instrucción de hacer

Dreamweaver utiliza varios elementos y herramientas para ayudar en el desarrollo web:

Vista de Diseño: Permite trabajar visualmente con la interfaz del sitio web sin necesidad de escribir código directamente.

Vista de Código: Aquí los desarrolladores pueden escribir y editar código HTML, CSS, JavaScript y otros lenguajes.

Vista de Div Split: Combina las dos vistas anteriores, mostrando tanto el diseño visual como el código al mismo tiempo.

Paneles y Herramientas: Dreamweaver incluye paneles para manejar el CSS, administrar archivos, realizar pruebas en
tiempo real, integrar con bases de datos, etc.

Plantillas y Previsualización en Vivo: Dreamweaver permite utilizar plantillas predefinidas y también previsualizar el
trabajo en tiempo real en diferentes dispositivos.

La instrucción de hacer se da a través de la interfaz de usuario, donde los desarrolladores pueden elegir elementos y
características de diseño de una manera intuitiva, o escribir código directamente en la vista de código.

4- ¿Qué extensión tiene los datos en Dreamweaver?

Los archivos de Dreamweaver pueden tener diversas extensiones, dependiendo del tipo de contenido o archivo que se
esté utilizando. Algunas de las extensiones más comunes son:

.html: Archivos de páginas web estáticas en HTML.

.css: Archivos de hojas de estilo en cascada (CSS).

.js: Archivos de JavaScript.

.php: Archivos para páginas dinámicas usando PHP.

.xml: Archivos de datos XML utilizados en el sitio web.

Además, Dreamweaver también soporta extensiones específicas para otros lenguajes y plataformas, como ASP, JSP,
ColdFusion, entre otros.

5-¿Cómo insertar una imagen?

Para insertar una imagen en Dreamweaver o en código HTML, se utiliza la etiqueta <img>, la cual es un elemento auto
conclusivo (no requiere una etiqueta de cierre). A continuación te muestro cómo hacerlo:

<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen" />

Explicación:

src: Especifica la ruta de la imagen (puede ser un archivo local o una URL).

alt: Proporciona una descripción alternativa de la imagen en caso de que no se pueda cargar.

Si estás trabajando en Dreamweaver, puedes hacerlo de manera visual:

En la vista de diseño, simplemente selecciona "Insertar" > "Imagen" y luego seleccionas el archivo de imagen que
quieres agregar.

6. ¿Cómo insertar texto?

El texto se inserta directamente en el código HTML sin necesidad de una etiqueta especial (a menos que quieras darle
formato). Aquí te muestro cómo insertar texto dentro de una página HTML:

<p>Este es un párrafo de texto en HTML.</p>

Explicación

<p>: La etiqueta de párrafo se utiliza para envolver un bloque de texto.

Si deseas agregar títulos, puedes utilizar etiquetas como <h1>, <h2>, etc.

En Dreamweaver, puedes agregar texto directamente en la vista de diseño o en la vista de código, y también puedes
aplicar formatos de texto como negritas, cursivas o cambiar el tamaño a través de los menús de estilo.

7. ¿Cómo insertar atributos?

Los atributos son propiedades adicionales que puedes agregar a las etiquetas HTML para definir características
específicas de los elementos. Aquí te muestro cómo usarlos con ejemplos comunes:

Ejemplo 1: Atributo class y id

<div class="mi-clase" id="mi-id">Contenido dentro de un div.</div>

Explicación:

class: Se usa para agrupar elementos que comparten características comunes (como estilos CSS).
 Hernández ríos Jesús 2IV4
id: Es un identificador único que se puede usar para referenciar un elemento específico en JavaScript o CSS.

Ejemplo 2: Atributo style

<p style="color: red; font-size: 16px;">Este texto es de color rojo.</p>

Explicación:

style: Se utiliza para aplicar estilos CSS directamente a un elemento. Aquí, se define el color del texto como rojo y el
tamaño de la fuente como 16 píxeles.

Ejemplo 3: Atributo href en enlaces

HTML:

<a href="https://www.example.com" target="_blank">Haz clic aquí para visitar un sitio web.</a>

Explicación:

href: Define la URL a la que el enlace llevará.

target="_blank": Hace que el enlace se abra en una nueva pestaña.

En Dreamweaver, al insertar elementos como imágenes o enlaces, puedes añadir estos atributos mediante sus
propiedades en el panel de propiedades (generalmente en la parte inferior de la interfaz).

8-¿conque tecla de función abrimos?

1. Abrir un archivo

Tecla de función: Ctrl + O (Windows) o Cmd + O (Mac)

Función: Abre un archivo existente desde tu computadora.

2. Nuevo archivo

Tecla de función: Ctrl + N (Windows) o Cmd + N (Mac)

Función: Crea un nuevo archivo en Dreamweaver.

3. Vista previa en el navegador

Tecla de función: F12

Función: Muestra una vista previa del sitio web o la página actual en tu navegador predeterminado.

4. Pantalla dividida

Tecla de función: Ctrl + Shift + W (Windows) o Cmd + Shift + W (Mac)

5. Panel de propiedades

Tecla de función: Ctrl + F3 (Windows) o Cmd + F3 (Mac)

Función: Abre o cierra el panel de propiedades, donde puedes editar atributos de los elementos seleccionados.

6. Insertar un elemento

Tecla de función: Ctrl + Shift + I (Windows) o Cmd + Shift + I (Mac)

Función: Abre el cuadro de diálogo para insertar elementos, como imágenes, tablas, formularios, etc.

11-Texto:

El texto común se coloca directamente en el archivo HTML, sin necesidad de una etiqueta especial (salvo si quieres darle
formato).

<p>Este es un párrafo de texto.</p>

Video:

Para insertar un video en HTML, utilizamos la etiqueta <video>.

<video controls>

<source src="video.mp4" type="video/mp4">

Tu navegador no soporta el elemento de video.

</video>

Atributos:

controls: Añade controles (pausar, reproducir, volumen).

src: La ubicación del archivo de video.

Musica:

Para insertar audio, usamos la etiqueta <audio>.

<audio controls>

<source src="musica.mp3" type="audio/mp3">

Tu navegador no soporta el elemento de audio.

</audio>
 Hernández ríos Jesús 2IV4

Listas:

Listas ordenadas (numeradas):

<ol>

<li>Elemento 1</li>

<li>Elemento 2</li>

<li>Elemento 3</li>

</ol>

Listas no ordenadas (con viñetas):

<ul>

<li>Elemento A</li>

<li>Elemento B</li>

<li>Elemento C</li>

</ul>

Hipervínculos (enlaces):

Para insertar un enlace a otra página, usamos la etiqueta <a>.

<a href="https://www.example.com" target="_blank">Haz clic aquí para ir a Example</a>

Atributos

href: Especifica la URL de destino.

target="_blank": Abre el enlace en una nueva pestaña.

Fondos (imágenes de fondo):

Para establecer un fondo con una imagen en una página o un elemento, se utiliza CSS.

<style>

body {

background-image: url('fondo.jpg');

background-size: cover;

</style>

Este código agrega una imagen de fondo que cubre toda la página.
 Hernández ríos Jesús 2IV4

Tablas:

Para crear una tabla en HTML:

<table border="1">

<tr>

<th>Cabecera 1</th>

<th>Cabecera 2</th>

</tr>

<tr>

<td>Dato 1</td>

<td>Dato 2</td>

</tr>

<tr>

<td>Dato 3</td>

<td>Dato 4</td>

</tr>

</table>

Atributos:

<tr>: Define una fila de la tabla.

<th>: Define una celda de cabecera.

<td>: Define una celda de datos.

Párrafos:

Para insertar párrafos de texto:

<p>Este es un párrafo de texto que se muestra en la página.</p>

12. ¿Cómo guardar los datos en Dreamweaver?

Para guardar tu trabajo en Dreamweaver, simplemente sigue estos pasos:

Para guardar un archivo:

Usa la tecla de función Ctrl + S (Windows) o Cmd + S (Mac).

O haz clic en Archivo > Guardar.

Si quieres guardar una copia con otro nombre, usa Ctrl + Shift + S (Windows) o Cmd + Shift + S (Mac)

O ve a Archivo > Guardar como... y elige la ubicación y el nombre del archivo.

Duplicar información

Para duplicar información o contenido en Dreamweaver, tienes varias opciones:

Usar copiar y pegar:

Selecciona el texto o código que deseas duplicar, usa Ctrl + C (Windows) o Cmd + C (Mac) para copiar, y luego Ctrl + V
(Windows) o Cmd + V (Mac) para pegar.

Duplicar en la interfaz de Dreamweaver:

Si trabajas en el panel de diseño o código, puedes seleccionar el bloque o código que deseas duplicar, y luego copiar y
pegar en el lugar deseado.

4. Comentarios en HTML

Los comentarios en HTML se insertan de la siguiente forma:

<!-- Este es un comentario en HTML -->

Los comentarios son útiles para agregar notas dentro del código que no se muestran en la página web. Pueden ayudarte
a explicar secciones de tu código o dejar recordatorios para ti o tu equipo

Resumen

Texto: <p>Texto aquí</p

Video: <video> (con <source>)

Música: <audio> (con <source>)

Listas: <ul>, <ol>, <li>

Hipervínculos: <a href="url">Texto del enlace</a>

Fondos: background-image en CSS

Tablas: <table>, <tr>, <th>, <td>

Párrafos: <p>
 Hernández ríos Jesús 2IV4
Wikipedia en español sobre Adobe Dreamweaver

Wikipedia en inglés sobre Adobe Dreamweave

Artículo de Wired sobre Dreamweaver CS

Artículo de Wired sobre la adquisición de Macromedia por Adobe

Artículo de Wired sobre la descontinuación de GoLive