{"id":630,"date":"2025-04-10T15:23:27","date_gmt":"2025-04-10T15:23:27","guid":{"rendered":"https:\/\/profe.evilspout.com\/tutos\/?p=630"},"modified":"2025-05-02T20:09:53","modified_gmt":"2025-05-02T20:09:53","slug":"630","status":"publish","type":"post","link":"https:\/\/profe.evilspout.com\/tutos\/index.php\/2025\/04\/10\/630\/","title":{"rendered":"Creaci\u00f3n de sitio web HTML en Dreamweaver"},"content":{"rendered":"

En el presente tutorial trabajaremos en la creaci\u00f3n de un sitio web en el software Adobe Dreamweaver. Puntualmente insertaremos un mapa de imagen con conexiones a sitios webs externos.<\/p>\n

1.- Iniciamos el software Adobe Dreamweaver y creamos un archivo nuevo. Seguimos las especificaciones de la siguiente imagen de referencia.\"\"<\/a><\/p>\n

2.- Veremos la interfaz, nos cercioraremos de que est\u00e9 en \u201cC\u00f3digo Dividir<\/strong> En vivo\u201d (marco letra A) y notaremos la parte visual (zona blanca B) en la parte superior y la parte de c\u00f3digo (zona negra con programaci\u00f3n C). Desplegaremos la Barra de Propiedades desde la Pesta\u00f1a Ventana \/ Propiedades <\/em>(o podemos utilizar el atajo de teclado Ctrl + F3). Finalmente activaremos la pesta\u00f1a Insertar desde el panel de la derecha (cuadro D) dejando activa la opci\u00f3n HTML.\"\"<\/a><\/p>\n

3.- Iniciaremos observando la l\u00ednea n\u00famero 8 de la zona de programaci\u00f3n. En ella encontraremos la palabra body (en el rect\u00e1ngulo amarillo de la imagen), <\/em>lo cual nos indica que es el cuerpo de la p\u00e1gina web y en esa zona se agrega la informaci\u00f3n visual con interacci\u00f3n. Colocaremos el puntero despu\u00e9s de la palabra, tal como se observa en la imagen, activ\u00e1ndose el cursor de escritura.
\n\"\"<\/a><\/p>\n

4.- Agregaremos en esta parte la gr\u00e1fica que ser\u00e1 nuestro mapa de imagen con conexiones a sitios webs externos. Nuestro cursor de escritura estar\u00e1 parpadeando (en modo activo para agregar informaci\u00f3n) y eso nos indica que daremos un doble click a la palabra Image <\/em>en el panel derecho de insertos HTML (en el rect\u00e1ngulo amarillo de la imagen). Se abrir\u00e1 una interfaz solicitando la imagen a utilizar. Lo ideal es tener guardada la imagen en una carpeta destinada para guardar todo lo utilizado en este proyecto. Respecto a los formatos de imagen, utilizaremos JPEG con medidas de 1920 x 1080 y resoluci\u00f3n 72.<\/p>\n

\"\"<\/a>
\n\"\"<\/a><\/p>\n

5.- Aceptamos insertar la imagen, esta se posiciona en el cuerpo de la p\u00e1gina web y podemos verla en la zona visual superior de la interfaz de Dreamweaver. Tambi\u00e9n nos fijaremos que en la zona de programaci\u00f3n bajo la l\u00ednea 8 del cuerpo (body<\/em>) de la web, la l\u00ednea 9 aloja a la imagen, mostrando su ruta de origen.<\/p>\n

\"\"<\/a><\/p>\n

6.- Guardaremos nuestra web en la misma carpeta en la que est\u00e1 la imagen de la l\u00ednea de tiempo utilizada. Para ello vamos a la pesta\u00f1a Archivo \/ Guardar o podemos utilizar el atajo de teclado CTRL + S.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

7.- Ahora procederemos a crear zonas activas en la imagen para linkear a enlaces externos (p\u00e1ginas webs en pesta\u00f1as nuevas del navegador). Seleccionamos la imagen en la zona visual de la interfaz de Dreamweaver y luego cambiaremos el modo de visualizaci\u00f3n desde \u201cC\u00f3digo Dividir<\/strong> En vivo\u201d a \u201cC\u00f3digo Dividir<\/strong> Dise\u00f1o\u201d (rect\u00e1ngulo anaranjado arriba en la imagen). Se activar\u00e1n las figuras geom\u00e9tricas para crear zonas activas de linkeo en la Barra de propiedades de la imagen (rect\u00e1ngulo anaranjado abajo en la imagen).<\/p>\n

\"\"<\/a><\/p>\n

8.- De las figuras geom\u00e9tricas para linkear elegiremos el cuadrado y dibujaremos un cuadrado en la zona de la imagen que queremos que tenga una zona activa hacia otro sitio web. El cuadrado quedar\u00e1 de un color verdoso claro indicando que est\u00e1 activo y listo para programar (cuadrado anaranjado grueso en la imagen) y la barra de propiedades mostrar\u00e1 una zona para agregar el v\u00ednculo y en qu\u00e9 tipo de p\u00e1gina se abrir\u00e1 (cuadrado anaranjado fino en la imagen).<\/p>\n

\"\"<\/a><\/p>\n

9.- Primero borraremos el s\u00edmbolo de gato (hashtag) y luego agregaremos la direcci\u00f3n del sitio web de destino que se vincular\u00e1 al hacer click en la zona activa. En Destino elegiremos _blank para que el sitio se abra en una pesta\u00f1a nueva. Repetiremos el procedimiento de creaci\u00f3n de zonas activas en todas las im\u00e1genes de la l\u00ednea de tiempo. Finalmente para testear el sitio creado procederemos a presionar F12 y revisaremos la funcionalidad de los links.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

Sitio web resultante L\u00ednea de Tiempo V de Vendetta<\/em><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

En el presente tutorial trabajaremos en la creaci\u00f3n de un sitio web en el software Adobe Dreamweaver. Puntualmente insertaremos un mapa de imagen con conexiones a sitios webs externos. 1.- Iniciamos el software Adobe Dreamweaver y creamos un archivo nuevo. Seguimos las especificaciones de la siguiente imagen de referencia. 2.- Veremos la interfaz, nos cercioraremos de que est\u00e9 en \u201cC\u00f3digo Dividir En vivo\u201d (marco letra A) y notaremos la parte visual (zona blanca B) en la parte superior y la parte de c\u00f3digo (zona…<\/p>\n","protected":false},"author":1,"featured_media":641,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47,55,18,49,46,45,54,53],"tags":[5,6,23,7,25,52,58,8,50,57,56],"class_list":["post-630","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-adobe","category-blog","category-diseno","category-html5","category-portal","category-web","category-web-blog","category-wordpress","tag-adobe","tag-color","tag-composicion","tag-digital","tag-diseno","tag-html5","tag-portal","tag-tutorial","tag-web","tag-web-blog","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/posts\/630","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/comments?post=630"}],"version-history":[{"count":10,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/posts\/630\/revisions"}],"predecessor-version":[{"id":672,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/posts\/630\/revisions\/672"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/media\/641"}],"wp:attachment":[{"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/media?parent=630"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/categories?post=630"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/profe.evilspout.com\/tutos\/index.php\/wp-json\/wp\/v2\/tags?post=630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}