pagina en dreamvewear

Pagina en Dreamveawer

Para empezar debemos abrir el programa dreamveawer (siguiente figura)

Una vez hayamos abierto el programa debemos crear un sitio donde vamos a guardar

la pagina y demás elementos que utilizaremos en la pagina, para ello vamos a ir SITIO

DE DREAMVEAWER (siguiente figura)

Aparecerá una ventana (siguiente figura)

Debemos nombrar el sitio y definir la carpeta o ubicación del sitio en mi caso lo voy a

llamar página en dreamveawer y lo ubicare en mi memoria y luego abriré un archivo

en HTML

Y vamos a crear tres archivos con los nombres de:

INDEX

PAGINA 1

PAGINA 2

PAGINA 3

Debemos colocar el titulo

<title>Pagina de ensayo</title>

Y dentro del body vamos a crear tres link con los nombres de:

1. SAN JUAN DE PASTO

2. EL CARRO

3. ANTIGUA ROMA

<body> <p class="titulo"><a href="pagina 1.html" target="_blank">SAN JUAN DE PASTO</a></p> <p class="titulo"><a href="pagina2.html" target="_blank">EL CARRO</a></p> <p class="titulo"><a href="pagina3.html" target="_blank">ANTIGUA ROMA</a></p> </body> </html>

Y luego vamos a crear las páginas de los enlaces (siguiente figura)

Pagina uno (siguiente figura )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <style type="text/css"> .Margenizquierda { float: left; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px; } </style> <link href="estilos.css" rel="stylesheet" type="text/css" /> <style type="text/css"> a:link { color: #FF0; } a:active { color: #FFF; } </style> </head> <body> <p><img src="images/pasto.png" width="395" height="292" class="Margenizquierda" /></p> <p class="titulo"><strong>San Juan de Pasto</strong> </p> <p class="normal">Es una ciudad de <a href="http://es.wikipedia.org/wiki/Colombia" title="Colombia">Colombia</a>, capital del departamento de <a href="http://es.wikipedia.org/wiki/Nari%C3%B1o_(Colombia)" title="Nariño (Colombia)">Nariño</a> y cabecera del municipio de Pasto. La ciudad ha sido centro administrativo cultural y religioso de la región desde la época de la colonia. Es también conocida como «Ciudad sorpresa de Colombia»<br /> Como capital departamental, alberga las sedes de la Gobernación de Nariño, la Asamblea Departamental, el Tribunal del Distrito Judicial, la Fiscalía General, y en general sedes de instituciones de los organismos del Estado.<br /> El nombre del municipio y de la ciudad se origina en el nombre del pueblo indígena <a href="http://es.wikipedia.org/wiki/Pastos" title="Pastos">Pastos</a>, Pas=gente y to=tierra o gente de la tierra, que habitaba el Valle de Atriz a la llegada de los conquistadores españoles. El nombre oficial del Municipio es Pasto, y su cabecera municipal que corresponde al área urbana se conoce como San Juan de Pasto, en honor a su patrono San Juan Bautista.</p> <p class="normal"><a href="index.html">VOLVER A LAS PAGINAS</a></p> </body> </html>

Pagina dos (siguientes figuras)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <script src="Scripts/swfobject_modified.js" type="text/javascript"></script> <link href="estilos.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body,td,th { color: #00F; } a:link { color: #FF0; } a:active { color: #FFF; } </style> </head> <body> <p class="titulo">El carro</p> <p>llegó a <a href="http://es.wikipedia.org/wiki/Europa" title="Europa">Europa</a> y <a href="http://es.wikipedia.org/wiki/Asia" title="Asia">Asia</a> occidental en el cuarto milenio antes de Cristo, y al Valle del <a href="http://es.wikipedia.org/wiki/R%C3%ADo_Indo" title="Río Indo">Indo</a> hacia el tercer milenio antes de Cristo. <br />

Los carros han sido mencionados en la literatura ya en el segundo milenio antes de Cristo. El libro sagrado Rigveda India afirma que los hombres y las mujeres son tan iguales como dos ruedas de una carreta. Pequeñas carretas de mano han sido utilizadas en muchas ocasiones a lo largo de la historia. En el siglo XIX, por ejemplo, durante la migración <a href="http://es.wikipedia.org/wiki/La_Iglesia_de_Jesucristo_de_los_Santos_de_los_%C3%9Altimos_D%C3%ADas" title="La Iglesia de Jesucristo de los Santos de los Últimos Días">mormona</a> hacia el actual territorio de <a href="http://es.wikipedia.org/wiki/Utah" title="Utah">Utah</a> en los <a href="http://es.wikipedia.org/wiki/Estados_Unidos" title="Estados Unidos">Estados Unidos</a>, entre 1856 y 1860, se utilizaron estas carretas. Los llamados <a href="http://es.wikipedia.org/wiki/Rickshaw" title="Rickshaw"><em>rickshaw</em></a> todavía pueden verse en la actualidad en ciudades del sureste asiático como transporte para distancias cortas.<br /> <a href="http://es.wikipedia.org/wiki/Archivo:The_Triumphs_of_Caesar,_IX_-_Julius_Caesar_on_his_triumphal_chariot;_Andrea_Mantegna_(1484-92).JPG" title="'Aumentar' "><img border="0" width="15" height="11" src="pagina2_clip_image001.png" alt="http://bits.wikimedia.org/static-1.22wmf12/skins/common/images/magnify-clip.png" /></a> <br /> Julio César en su carro de triunfo, Andrea Mantegna, 1484-1492.<br /> </p> <p> <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="565" height="353"> <param name="movie" value="images/sapito.swf" /> <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" />  <param name="expressinstall" value="Scripts/expressInstall.swf" />   <object type="application/x-shockwave-flash" data="images/sapito.swf" width="565" height="353">  <param name="quality" value="high" /> <param name="wmode" value="opaque" /> <param name="swfversion" value="6.0.65.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" />  <div> <h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" /></a></p> </div>  </object>  </object> </p> <p><span class="normal"><a href="index.html">VOLVER A LAS PAGINAS</a></span></p> <script type="text/javascript"> swfobject.registerObject("FlashID"); </script> </body> </html>

Pagina tres (siguientes figuras)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> <link href="estilos.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body,td,th { color: #00F; } a:link { color: #FF0; } a:active { color: #FFF; } </style> </head> <body> <p class="titulo"> </p> <p class="titulo">ANTIGUA ROMA</p> <p>En la <a href="http://es.wikipedia.org/wiki/Antigua_Roma" title="Antigua Roma">antigua Roma</a> los líderes derrotados eran a menudo transportados en carretas durante la exhibición triunfal del general victorioso. Los <em>carros para la carrera</em> tenían forma de concha puesta sobre dos ruedas, más alta por delante que por detrás, con una <a href="http://es.wikipedia.org/wiki/Lanza" title="Lanza">lanza</a> muy corta, a la cual se uncían cuatro caballos de frente. Los <a href="http://es.wikipedia.org/wiki/Carro_triunfal" title="Carro triunfal"><em>carros de triunfo</em></a> tenían una forma redondeada; el vencedor iba en él en pie y dirigía por sí mismo los caballos.</p> <p><span class="normal"><a href="index.html">VOLVER A LAS PAGINAS</a></span></p> <span class="titulo"><img src="images/descarga.jpg" width="394" height="233" /></span> </body> </html>

También debemos crear un archivo para el maqueteador CSS (siguiente figura)

Una vez creado este archivo este es el código para maquetear (siguiente figura)

.titulo { font-family: "Snap ITC", "Book Antiqua", Palatino, serif; text-transform: uppercase; color:#00F; font-size:24; } .normal { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-size: 16px; font-style: normal; line-height: normal; color: #00F; } .Margenizquierda { float: left; } <style type="text/css"> a:link { color:#FF0 text-decoration: underline; } a:visited { text-decoration: underline; color: #F00; } a:hover { text-decoration: none; color: #009; }

a:active { text-decoration: underline; color: #FF0; } body,td,th { color: #000; } body { background-color: #000; } </style>

De esta manera podemos crear una página maqueteada en dreamveawer

GRACIAS

pagina en dreamvewear

Documents