PRIMERO LEAN EL EJERCICIO EN SU TOTALIDAD!
TRATEMOS DE ENTENDER LOS PASOS Y PORQUE LOS HACEMOS,
NO LO USEN COMO UN TUTORIAL HACIENDO PASO A PASO!!
Antes que nada, vamos a indicarle a Dreamweaver una carpeta raíz local en nuestra computadora!
Esto nos sirve para que al insertar elementos o crear vínculos relativos, la ruta indicada comience desde esa carpeta.
Para esto, en Dreamweaver nos vamos a “Sitio / Administrar sitios…” y creamos un “Nuevo sitio”, nos aparecerá la ventana de Configuración, donde le colocamos un nombre al sitio, para poder identificarlo posteriormente, e indicamos cual será la carpeta raíz local en nuestro equipo. Guardar y Listo!
Ahora cuando creamos un archivo html se guardara por defecto en la carpeta indicada y todos los vínculos internos o inserción de elementos serán relativos a esa carpeta.
Todo lo que este por fuera de la carpeta raíz, no pertenece a nuestro sitio, solo los archivos del sitio deben estar dentro de esta carpeta! Nada mas! Todas las imágenes sin optimizar, bocetos, imágenes de referencia o cualquier otro archivo no utilizado directamente no deben estar dentro, seamos ordenados!
Porque es tan importante?
porque si no indicamos una carpeta raíz, al insertar un elemento, la ruta comenzará desde nuestro disco rígido, por ejemplo: src=”file:///C:/Users/seba/OneDrive/Escritorio/carpeta_raiz/imagen.jpg” pero si creamos la carpeta raíz, la ruta será solamente: src=”imagen.jpg”.
Ten en cuenta que el archivo mostrara la ruta completa hasta que hayas guardado el archivo html en su carpeta raíz!!
En principio, este problema no es visible para la persona que crea el archivo, porque esa ruta si existe en su computadora. Pero cuando subamos el archivo al servidor, esa ruta no es accesible para el resto de personas que vean el sitio, porque esa ruta solo existe en la computadora del que hizo el archivo… lógico, no?
Despues podremos elegir entre los diferentes Sitios que tengamos creados desde el panel de Archivos para seleccionar con cual estemos trabajando.
Ahora si! a crear un nuevo archivo HTML y lo nombramos como prueba_de_imagenes.html
Siempre utilizando la vista de CODIGO, vamos a buscar y modificar el texto contenido que hay entre las etiquetas <title>Documento sin título</title> y ponemos un titulo a nuestra página.
Ahora entre la etiquetas <body> y </body>, vamos a insertar tres imágenes OPTIMIZADAS en los formatos que vimos en clase: png, jpg y gif obviamente resaltando su correcta aplicación (puntos extras si me gustan las imágenes o temática, pero si no llegan a estar optimizadas… hay tabla!).
Podemos insertarlas desde la opción “imagen” del panel de INSERTAR (Ventana / Insertar o Ctrl+F2)
O directamente escribiendo la etiqueta <img/> *ojo que esta es una de las raras etiquetas que no tienen una etiqueta de apertura y otra de cierre, img es una sola etiqueta que cierra en si misma…
La etiqueta completa es la siguiente:
<img src=”imagen.jpg” width=”500″ height=”500″ alt=””/>
Como pueden ver, la etiqueta <img/> cierra en si misma con la barra o slash /
Dentro de la misma etiqueta se coloca el src= que significa “fuente o source”, que indica la ruta al archivo, siempre entre comillas “subcarpeta/archivo.extensión”, por ejemplo src=”imagen.jpg” Luego se indica la medida de la imagen el ANCHO width=”500″ y el ALTO height=”500″ (por defecto en pixeles) y antes del cierre tenemos el texto alternativo alt=”” que se coloca para describir la imagen y se muestra en el caso de que la imagen no pueda mostrarse, por ejemplo alt=”arte de museo”.
Luego agregaremos una cuarta imagen, a la cual “abrazaremos” con las etiquetas <a></a>
<a><img src=”imagen.jpg” width=”500″ height=”500″ alt=””/></a>
Indicamos el href=”index.html”, convirtiendo nuestra imagen en un botón vinculado a nuestro archivo index.html del ejercicio anterior.
<a href=”index.html”><img src=”imagen.jpg” width=”500″ height=”500″ alt=””/></a>
Pensaste que ya terminamos…? dale un poquito mas!
Antes de subir los archivos, vamos a editar el archivo index.html que creamos en el ejercicio anterior, lo primero es mover el index.html a la carpeta raíz que creamos en este ejercicio, luego lo abrimos y vamos a insertar un nuevo texto que vincule al archivo html que creamos en este ejercicio. No te digo como y tampoco te fijes como se hacia, proba hacerlo de una! Etiqueta <a> con el href=””, alguna <h> el texto y los cierres de las etiquetas.
Una vez listo, subimos a nuestro servidor los archivos html y las imágenes optimizadas dentro de la carpeta “public_html”
Podremos acceder a nuestro dominio y ver el resultado!
- Si ves un error que indica 403 Forbidden, revisa que tu archivo html se llame index
- El error 404 Not Found, indica que el navegador no puede encontrar el archivo que hayas indicado en la ruta.
- Si alguna imagen o archivo no se ve, recuerda que no debes usar acentos, mayúsculas, espacios o caracteres especiales al nombrar los archivos. Tampoco nombres muy largos.
- Si no ves reflejados los cambios al actualizar los archivos en el servido, recuerda refrescar el navegador con “shift+F5” asi evitamos que se vean archivos temporales.
