DREAM WEAVER

Adobe Dreamweaver es una aplicacin en forma de estudio (basada en la forma de estudio de

Adobe Flash) que est destinada a la construccin, diseo y edicin de sitios, vdeos y aplicaciones
Web basados en estndares. Creado inicialmente por Macromedia (actualmente producido por
Adobe Systems) es el programa ms utilizado en el sector del diseo y la programacin web, por
sus funcionalidades, su integracin con otras herramientas como Adobe Flash y, recientemente,
por su soporte de los estndares del World Wide Web Consortium.

Sus principales competidores son Microsoft Expression Web y BlueGriffon (que es de cdigo
abierto) y tiene soporte tanto para edicin de imgenes como para animacin a travs de su
integracin con otras. Hasta la versin MX, fue duramente criticado por su escaso soporte de los
estndares de la web, ya que el cdigo que generaba era con frecuencia slo vlido para Internet
Explorer y no validaba como HTML estndar. Esto se ha ido corrigiendo en las versiones recientes

CONFIGURACIN DE UN SITIO LOCAL

Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o
un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va
a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los
documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener
las imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de
sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es
lo que se conoce como sitio local. Despus se podrn copiar los archivos en un servidor web, en el
denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podr verlo en
Internet. La organizacin de los archivos en un sitio permite administrar y compartir archivos,
mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor,
etc. Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que
los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL
genrica. Por ejemplo, si escribiramos la direccin genrica http://www.peru.com en el
navegador, ste intentara cargar la pgina http://www.peru.com/index.htm, por lo que se
producira un error en el caso de que no existiera ninguna pgina con el nombre index.htm.

CREANDO EL SITIO
1-Crear una carpeta en el escritorio ponerle el nombre Autos, crear dentro la carpetas imgenes y
CSS, poner los nombres de las carpetas en minsculas, luego Ir al Men Sitio / Administrar Sitios.
En esta ventana podr eliminar o conservar aquellos Sitios que Ud. desee.

2- Dar clic a Nuevo / Sitio.

3- Clic en el icono de la carpeta para buscar la ubicacin donde vamos guardar nuestro SITIO.
Escriba el nombre del sitio y siga el ejemplo del cuadro

4-hora clic en la opcin configuracin avanzada / informacin local / clic en el icono de la carpeta
de nombre carpeta predeterminada de imgenes

5-Seguidamente se abrir un cuadro donde buscaremos nuestra carpeta y ah la carpeta imgenes,

le daremos abrir y luego seleccionar, seguidamente guardar y listo

6-Inmediatamente aparecer la ventana de archivos, si no aparece pulsar F8

Tipo de Vista
(local o remota)

Nombre del sitio

Ubicacin

Desde esta ventana, puede realizar las mismas operaciones

que podra hacerlas desde Windows, obviamente con los
archivos del sitio (copiar, pegar, eliminar, renombrar,
mover, crear carpetas, etc.).
La estructura del sitio, ubicacin y contenido, pueden
transportarse fcilmente a travs de un archivo que puede
ser exportado e importado, para continuar un trabajo desde
otro equipo.

SUBIR ARCHIVOS AL SERVIDOR

Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers
subir los archivos al sitio que hayas contratado o conseguido gratuitamente.
Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers ir
subiendo uno a uno cada archivo y creando las carpetas t mismo. Este proceso puede hacerse
muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu
carpeta del disco duro. Si no los enlaces no funcionarn correctamente, y es posible que algunas
imgenes no se muestren.
Para subir los archivos va web debers seguir las instrucciones que te proporcionar tu servidor.
La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos.
Esta forma es, de lejos, mucho mejor que la anterior.
Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de
Windows) y, obviamente, nos es mucho ms til para subir los archivos.

Uno de los programas gratuitos ms utilizados es FileZilla, desde su pgina web podrs descargarte
el programa. Esto se vera mas adelante

CREACIN DE DOCUMENTOS HTML.

Las pginas que vemos en Internet estn escritas utilizando el lenguaje HTML (Hyper Text
Markup Language). Este lenguaje est basado en etiquetas que marcan el inicio y fin de cada
elemento de la pgina Web.
Por ejemplo, el ttulo de la pgina Web se escribe entre las etiquetas <title> y </title>.
Como ves, ambas etiquetas consisten en poner un mismo comando entre los smbolos "<" y ">".
La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final.
Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el
que actan. Por ejemplo, <table border="1"> indica que la que se trata de una tabla, y que
tendr un borde de grosor 1.

Una pgina HTML bsica tendra el siguiente aspecto:

<html>
<head>
<title> Mi primera pgina web </title>
</head>
<body>
<p><a href="http://www.uni.edu.pe/"> Haz clic aqu para ir a
la Web dela UNI</a>
y conocer acerca de los cursos.</p>
</body>
</html>

El ejemplo anterior mostrara una pgina con un slo prrafo en el que parte del texto enlaza con
la web dela universidad de ingeniera, por ejemplo. Puedes probarlo copiando el cdigo y
pegndolo en un archivo de texto, que debes guardar con la extensin .htm.
Observa que cada etiqueta tiene una apertura y un cierre, y que estn anidadas unas dentro de
otras. Las etiquetas que se introducen en un documento HTML no son visibles cuando el
documento se muestra en un navegador (IExplorer, Firefox, Opera, Chrome, etc). Cuando un
usuario desde Internet solicita ver una pgina el servidor Web enva la pgina al navegador y este
interpreta las etiquetas para dar la pgina correctamente formateada.
Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que preocuparnos de
todo esto. Dreamweaver inserta automticamente las etiquetas necesarias para construir la
pgina con la apariencia y contenido definidos en el editor grfico. Esto nos facilita muchsimo el
trabajo.

PARTES DEL CDIGO HTML

Esencialmente las pginas web se dividen en 4 partes: inicio, cabecera, cuerpo, final.

INICIO [<HTML>]
Se le indica al navegador que comienza un nuevo cdigo html, para ello se utiliza la etiqueta
<html>

CABECERA [<HEAD> Y <TITLE>]

Esta parte se ocupa entre otras cosas para poner el ttulo de la pgina web. Primero le indicamos
que comienza la cabecera con la etiqueta <head>, luego el ttulo de la pgina es lo que va entre
<title> y </title>, finalmente indicamos que se acaba la parte de la cabecera con </head>. En html
se vera:
<head><title> ttulo de la pgina </title></head>

Este es un perfecto ejemplo de anidacin de etiquetas.

CUERPO [<BODY>]
En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el
<head> no contiene ms que unas pocas. Esta parte es lo que realmente se ve en los navegadores,
es decir el es cuerpo del documento, para indicar que comienza se utiliza la etiqueta <body>, luego
se pone el contenido de la pgina web, por ejemplo ahora pondremos slo un texto, para ello
ocupamos la etiquetas <p> y </p>, todo lo que va entre estas etiquetas es lo que el navegador
mostrar en pantalla. En html se vera:

<body><p> texto de la pgina </p></body>

FIN [</HTML>]

Luego le indicamos hasta aqu llega la pgina web, esto lo hacemos con la etiqueta </html>

Lista de Elementos HTML5 (etiquetas)

Todos los elementos del estandar HTML5 estn listados aqu, descritos por su etiqueta de apertura
y agrupados por su funcin. Contrariamente al indice de elementos HTML el cual lista todas las
posibles etiquetas, estandar, no-estandar, vlidas, obsoletas o aquellas en desuso, esta lista
solamente los elementos vlidos de HTML5. Solamente aquellos elementos listados aqu son los
que deberan ser usados en nuevos sitios Web.
El simbolo This element was added as part of HTML5 indica que el elemento fue aadido en
HTML5. Ntese que otros elementos listados aqui pueden haber sido modificados o extendido en
su significado por la especificacin HTML5.

Elemento Raz
Elemento

Descripcin

<html>

Representa la raz de un documento HTML o XHTML. Todos los dems elementos

deben ser descendientes de este elemento.

Metadatos Del Documento

Elemento

Descripcin

<head>

Representa una coleccin de metadatos acerca del documento, incluyendo enlaces

a, o definiciones de, scripts y hojas de estilo.

<title>

Define el ttulo del documento, el cual se muestra en la barra de ttulo del

navegador o en las pestaas de pgina. Solamente puede contener texto y
cualquier otra etiqueta contenida no ser interpretada.

<base>

Define la URL base para las URLs relativas en la pgina.

<link>

Usada para enlazar JavaScript y CSS externos con el documento HTML actual.

<meta>

Define los metadatos que no pueden ser definidos usando otro elemento HTML.

<style>

Etiqueta de estilo usada para escribir CSS en lnea.

Scripting
Elemento

Descripcin

<script>

Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de

programacin es JavaScript

<noscript>

Define una contenido alternativo a mostrar cuando el navegador no soporta

scripting.

Secciones
Elemento

Descripcin

<body>

Representa el contenido principal de un documento HTML.

Solo hay un elemento <body> en un documento.
Define una seccin en un documento.

<section>
<nav>

Define una seccin que solamente contiene enlaces de

navegacin

<article>

Define contenido autnomo que podra existir

independientemente del resto del contenido.

<aside>
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>

<header>

<footer>

<address>

Define algunos contenidos vagamente relacionados con el

resto del contenido de la pgina. Si es removido, el
contenido restante seguir teniendo sentido
Los elemento de cabecera implementan seis niveles de
cabeceras de documentos; <h1> es la de mayor y <h6> es la
de menor importancia. Un elemento de cabecera describe
brevemente el tema de la seccin que introduce.
Define la cabecera de una pgina o seccin. Usualmente
contiene un logotipo, el ttulo del sitio Web y una tabla de
navegacin de contenidos.
Define el pie de una pgina o seccin. Usualmente contiene
un mensaje de derechos de autora, algunos enlaces a
informacin legal o direcciones para dar informacin de
retroalimentacin.
Define una seccin que contiene informacin de contacto.

Elemento

Descripcin

<main>

Define el contenido principal o importante en el

documento. Solamente existe un elemento <main> en el
documento.

Agrupacin De Contenido
Elemento

Descripcin

<p>

Define una parte que debe mostrarse como un prrafo.

<hr>

Representa un quiebre temtico entre parrafos de una seccin o articulo o

cualquier contenido.

<pre>

Indica que su contenido esta preformateado y que este formato debe ser
preservado.

<blockquote>

Representa una contenido citado desde otra fuente.

<ol>

Define una lista ordenada de artculos.

<ul>

Define una lista de artculos sin orden.

<li>

Define un artculo de una lista ennumerada.

<dl>

Define una lista de definiciones, es decir, una lista de trminos y sus

definiciones asociadas.

<dt>

Representa un trmino definido por el siguiente <dd>.

<dd>

Representa la definicin de los terminos listados antes que l.

Representa una figura ilustrada como parte del documento.

<figure>
Representa la leyenda de una figura.
<figcaption>
<div>

Representa un contenedor genrico sin ningn significado especial.

Semntica A Nivel De Texto

Elemento

Descripcin

<a>

Representa un hiperenlace , enlazando a otro recurso.

<em>

Representa un texto enfatizado , como un acento de intensidad.

<strong>

Representa un texto especialmente importante .

<small>

Representa un comentario aparte , es decir, textos como un descargo de

responsabilidad o una nota de derechos de autora, que no son esenciales para
la comprensin del documento.

<s>

Representa contenido que ya no es exacto o relevante .

<cite>

Representa el ttulo de una obra .

<q>

Representa una cita textual inline.

<dfn>

Representa un trmino cuya definicin est contenida en su contenido

ancestro ms prximo.

<abbr>

Representa una abreviacin o un acrnimo ; la expansin de la abreviatura

puede ser representada por el atributo title.

<data>

Asocia un equivalente legible por mquina a sus contenidos. (Este elemento

est slamente en la versin de la WHATWG del estandar HTML, y no en la
versin de la W3C de HTML5).

<time>

Representa un valor de fecha y hora; el equivalente legible por mquina puede

ser representado en el atributo datetime.

<code>

Representa un cdigo de ordenador .

<var>

Representa a una variable, es decir, una expresin matemtica o contexto de

programacin, un identificador que represente a una constante, un smbolo que
identifica una cantidad fsica, un parmetro de una funcin o un marcador de
posicin en prosa .

<samp>

Representa la salida de un programa o un ordenador.

<kbd>

Representa la entrada de usuario o usuaria, por lo general desde un teclado,

pero no necesariamente, este puede representar otras formas de entrada de
usuario o usuaria, como comandos de voz transcritos.

<sub>,<sup>

Representan un subndice y un superndice, respectivamente.

Elemento

Descripcin

<i>

Representa un texto en una voz o estado de nimo alterno, o por lo menos de

diferente calidad, como una designacin taxonmica, un trmino tcnico, una
frase idiomtica, un pensamiento o el nombre de un barco.

<b>

Representa un texto hacia el cual se llama la atencin para propsitos

utilitaros. No confiere ninguna importancia adicional y no implica una voz
alterna.

<u>

Representa una anotacin no textual sin-articular, como etiquetar un texto

como mal escrito o etiquetar un nombre propio en texto en Chino.

<mark>
<ruby>

Representa texto resaltado con propsitos de referencia, es decir por su

relevancia en otro contexto.
Representa contenidos a ser marcados con anotaciones ruby, recorridos cortos
de texto presentados junto al texto. Estos son utilizados con regularidad en
conjunto a lenguajes de Asia del Este, donde las anotaciones actan como una
gua para la pronunciacin, como el furigana Japons.
Representa el texto de una anotacin ruby .

<rt>
<rp>

Representa los parntesis alrededor de una anotacin ruby, usada para mostrar
la anotacin de manera alterna por los navegadores que no soporten
despliegue estandar para las anotaciones.

<bdi>

Representa un texto que debe ser aislado de sus alrededores para el

formateado bidireccional del texto. Permite incrustar un fragmento de texto
con una direccionalidad diferente o desconocida.

<bdo>

Representa la direccionalidad de sus descendientes con el fin de anular de

forma explcita al algoritmo bidireccional Unicode.

<span>

Representa texto sin un significado especfico. Este debe ser usado

cuando ningn otro elemento semntico le confiere un significado adecuado,
en cuyo caso, provendr de atributos globales como class, lang, o dir.

<br>

Representa un salto de lnea.

<wbr>

Representa una oportunidad de salto de lnea, es decir, un punto sugerido de

envoltura donde el texto de mltiples lneas puede ser dividido para mejorar su
legibilidad.

Ediciones
Elemento

Descripcin

<ins>

Define una adicin en el documento.

<del>

Define una remocin del documento.

Contenido Incrustado
Elemento

Descripcin

<img>

Representa una imagen.

<iframe>

Representa un contexto anidado de navegacin, es decir, un documento

HTML embebido.

<embed>

Representa un punto de integracin para una aplicacin o contenido

interactivo externo que por lo general no es HTML.

<object>

Representa un recurso externo, que ser tratado como una imagen, un subdocumento HTML o un recurso externo a ser procesado por un plugin.

<param>

Define parmetros para el uso por los plugins invocados por los
elementos <object>.

<video>

Representa un video , y sus archivos de audio y capciones asociadas, con la

interfaz necesaria para reproducirlos.
Representa un sonido o stream de audio.

<audio>
<source>

Permite a autores o autoras especificar recursos multimedia alternativos para

los elementos multimedia como <video> o <audio>.

<track>

Permite a autores o autoras especificar una pista de texto temporizado para

elementos multimedia como <video> o <audio>.

<canvas>

Representa un rea de mapa de bits en el que se pueden utilizar scripts para

renderizar grficos como grficas, grficas de juegos o cualquier imagen
visual al vuelo.

<map>

En conjunto con <area>, define un mapa de imagen.

<area>

En conjunto con <map>, define un mapa de imagen.

Define una imagen vectorial embebida.

<svg>

Elemento

Descripcin
Define una frmula matemtica.

<math>

Datos Tabulares
Elemento

Descripcin

<table>

Representa datos con ms de una dimensin.

<caption>

Representa el ttulo de una tabla.

<colgroup>

Representa un conjunto de una o ms columnas de una tabla.

<col>

Representa una columna de una tabla.

<tbody>

Representa el bloque de filas que describen los datos contretos de una tabla.

<thead>

Representa el bloque de filas que describen las etiquetas de columna de una

tabla.

<tfoot>

Representa los bloques de filas que describen los resmenes de columna de una
tabla.

<tr>

Representa una fila de celdas en una tabla.

<td>

Representa una celda de datos en una tabla.

<th>

Representa una celda encabezado en una tabla.

Formularios
Elemento

Descripcin

<form>

Representa un formulario, consistendo de controles que puede ser enviado

a un servidor para procesamiento.

<fieldset>

Representa un conjunto de controles.

<legend>

Representa el ttulo de un <fieldset>.

<label>

Representa el ttulo de un control de formulario.

<input>

Representa un campo de datos escrito que permite al usuario o usuaria

editar los datos.

<button>

Representa un botn .

Elemento

Descripcin

<select>

Represents un control que permite la seleccin entre un conjunto de

opciones.
Representa un conjunto de opciones predefiniddas para otros controles.

<datalist>
<optgroup>

Representa un conjunto de opciones, agrupadas lgicamente.

<option>

Representa una opcin en un elemento <select>, o una sugerencia de un

elemento <datalist>.

<textarea>

Representa un control de edicin de texto multi-lnea.

Representa un control de par generador de llaves.

<keygen>
Representa el resultado de un clculo.
<output>
Representa el progreso de finalizacin de una tarea.
<progress>
<meter>

Representa la medida escalar (o el valor fraccionario) dentro de un rango

conocido.

Elementos interactivos
Elemento

Descripcin

<details>

Representa un widget desde el que un usuario o usuaria puede obtener

informacin o controles adicionales.

<summary>

Representa un resumen, ttulo o leyenda para un

elemento <details> dado.
Representa un comando que un usuario o usuaria puede invocar.

<command>
Representa una lista de comandos .
<menu>

CREANDO UNA PGINA WEB HTML

1- Una vez configurado el Sitio, ir al men Archivo / Nuevo, o simplemente pulsar
CTRL+N para crear una nueva pgina,
2- En la ventana NUEVO DOCUMENTO, elegir PAGINA EN BLANCO, tipo de pgina:
HTML, Diseo: NINGUNO, tipo de documento HTML 5, Clic en CREAR.

1
4
2

En la zona superior, la vista (1) se halla el modo DISEADOR, y tendr la siguiente apariencia.
Observe los botones CODIGO, DIVIDIR y DISEO (2), el cuadro en donde se puede insertar el
TITULO DE LA PAGINA (3). Y LA CARACTERSTICA (4)

3- Activar el botn CODIGO, y escribir las siguientes

etiquetas HTML:
Al lado de la etiqueta title Bienvenidos a Mundo Autos.
Luego en la etiqueta body al lado agregarle bgcolor y
Podr darse cuenta que a medida que escribe se
muestra una ayuda inteligente que le permite completar
las etiquetas, darle enter.

4-Inmediatamente aparecer el siguiente panel de

colores que se muestra, aparecer una espacie de
gotero y haremos clic sobre el color rojo.

5-Ahora digitar debajo de la etiqueta body bgcolor

<h1> Hola Pilotos</h1>
<P>
Esta es mi primera Pagina
</P>
y quedara como se muestra

6-Ir al Men Archivo / Guardar, o simplemente

pulse CTRL+S, y colocar por nombre inicio. Por
defecto se guarda con extensin html.
7-Active el botn DIVIDIR y DISEO, y observe la vista previa.

Podemos ver que:

Body bgcolor=color de fondo de la pagina
h1= elemento de cabecera
p=agregar parrafos

8-Ahora activar la vista diseo

9-Ahora ver en vista en Vivo