Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pagina en dreamvewear

258 views

Published on

  • Be the first to comment

  • Be the first to like this

Pagina en dreamvewear

  1. 1. Pagina en Dreamveawer Para empezar debemos abrir el programa dreamveawer (siguiente figura)
  2. 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. 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. 4. Y luego vamos a crear las páginas de los enlaces (siguiente figura)
  5. 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. 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. 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. 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. 9. También debemos crear un archivo para el maqueteador CSS (siguiente figura)
  10. 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. 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

×