Your SlideShare is downloading. ×
Pagina en dreamvewear
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Pagina en dreamvewear

81

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
81
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Pagina en Dreamveawer Para empezar debemos abrir el programa dreamveawer (siguiente figura)
  • 2. 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)
  • 3. 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>
  • 4. Y luego vamos a crear las páginas de los enlaces (siguiente figura)
  • 5. 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>
  • 6. 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 />
  • 7. 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" /> <!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="images/sapito.swf" width="565" height="353"> <!--<![endif]--> <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" /> <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. --> <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> <!--[if !IE]>--> </object> <!--<![endif]--> </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>
  • 8. 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">&nbsp;</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>
  • 9. También debemos crear un archivo para el maqueteador CSS (siguiente figura)
  • 10. 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; }
  • 11. 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

×