Diseño en InternetClase 2

Para esta clase, vamos a armar una página del barrio, muy similar al material que colocaremos en breve.Para eso, aprenderemos a realizar lo siguiente:

Copiar texto desde Word Editar y colocar imágenes

Para que, finalmente, tengamos una página así:

Insertar textos

Al abrir el Dreamweaver, abran el archivo barrio.html. Veran un “esqueleto” así. En cada celda colocaremos textos y fotos, tal como haremos en el Mundet.

Fragmentar y copiar texto desde Word

Vamos a usar el reportaje del barrio a modo de prueba. No nos preocupemos –por ahora- por el contenido, lo que haremos es ir al Word, y abrimos el reportaje del barrio. Entonces, seleccionamos todo el texto, y le damos a la opción BORRAR FORMATO. De esta manera, eliminamos sangrías, negritas, cursivas y otras opciones que nos complicarían en Dreamweaver. Otra alternativa es copiar el texto, pegarlo en el Bloc de Notas, y volver a copiarlo al Word. Al pasarlo a un archivo TXT, se eliminan todos los formatos. Hay que borrar las sangrías que se podrían haber hecho “a mano”, o sea, sin el tabulador.

Con el formato borrado, seleccionamos 1.350 caracteres con espacios, copiamos, y vamos al Dreamweaver, a la primer celda, la de color rojo. Alli, pegamos el texto.

Y vamos configurando la tipografía, y dejando un espacio entre párrafo. Para ello, presionamos en forma simultánea el ENTER (Intro) + Barra Espaciadora. (En Dreamweaver, el Enter baja dos espacios. Se usa el truco de la Barra Espaciadora para que sólo salte un espacio)

Recordar: NUNCA dejar la Fuente Predeterminada. Siempre colocar algún tipo de fuente, y un número de cuerpo. Pueder ser, por ejemplo, Arial 12.

Los textos en Dreamweaver se rellenan desde el centro hacia arriba y abajo.Por ello, si no colocamos la cantidad exacta de caracteres, para que coincida con el espacio de la foto, quedará espacio en blanco por arriba y por debajo, como en este caso:

También hay que evitar dejar espacios en blanco antes y después del texto. Cuando esto sucede, se ven cosas como estas:

Entonces, con el texto volcado, debería quedar algo así:

Y vamos colocando el texto, a razón de 1.350 caracteres con espacios, en las otras celdas. Si sobra texto, lo colocamos en la última celda, la de “Texto libre”

Si vemos que la celda de la derecha se redujo, no hay que preocuparse: cuando coloquemos las fotos, volverán a su tamaño.

Editar y colocar imágenes

Para la edición de imágenes vamos a usar el programa Photoshop. Aunque el programa es muy versátil, y de hecho es el programa cabecera para retoque de fotos y armado de gráficos, sólo usaremos algunas funciones básicas.

Abrimos Photoshop, y desde ARCHIVO ABRIR vamos a la carpeta IMAGENES BRUTO. Desde aquí, elegimos una imagen del barrio.

Lo que tenemos que hacer es modificar el tamaño de la imagen a la medida de 300 px de ancho por 225 px de alto. Como seguramente la foto será más grande, habrá que usar el comando RECORTAR

Para eso, hay que ir a la barra de Herramientas, y elegir el comando RECORTAR (3º icono a la izquierda)

Y en la parte superior, colocar las medidas para recortar: 300 px de ancho y 225 px de alto

Con el ratón pasamos el ícono de cortar a lo largo y ancho de la foto, y quedara todo el borde punteado. Al finalizar, damos ENTER, y veremos que la foto se reduce de tamaño

Luego, vamos a ARCHIVO GUARDAR PARA WEB, y se despliega una ventana con 4 opciones. Elegimos la del cuadrado de la derecha-superior, y verificamos que guardemos el archivo como JPEG y de calidad ALTA. Y guardamos la imagen (el nombre, sin espacios ni mayúsculas ni acentos. Sugerencia: foto1) en la carpeta IMÁGENES OK

Y repetimos el proceso con la segunda y la tercera foto elegida.

Y cuando cerremos el Photoshop, nos preguntara si guardamos los cambios. Pongan que NO, porque sino, nos cargaríamos la foto original y la dejariamos en un tamaño más reducido. Y volvemos al Dreamweaver.

Vamos a celda que dice FOTO1, y colocamos el cursor

Nos dirigimos al ícono de INSERTAR IMAGEN y colocamos la primer foto. Luego, repetimos el proceso en la celda inferior con la segunda foto, y lo mismo para la foto siguiente. Tengamos mucha precisión en colocar el cursor en la celda que corresponde, sino, se nos desarma todo.

Un truco: ¿cómo saber cuánto texto colocar si no tengo las fotos?

Un problema que puede suceder es no saber la extensión del texto si aún no hemos colocado las fotos. El recurso de Imagen de Reemplazo lo soluciona. Se trata de colocar una “muestra” para saber el tamaño exacto.

Para ello, desde el triangulo de INSERTAR IMAGEN , hay que elegir la segunda opción. En la ventana que aparece, colocamos las medidas (300 x 225)

En el espacio asignado, veremos un recuadro que indica la medida de la foto. También podemos “manipular” sus medidas haciendo clic en el cuadro y ampliando o reduciendo desde los bordes negros.

Y al momento de colocar la foto, borramos el recuadro y colocamos la imagen que deseamos.

Vínculos y detalles

Lo último que falta son los detalles. Por ejemplo, poner el título de la página (recordemos, en el casillero TITULO de la barra superior); ver que el texto haya quedado centrado respecto a las fotos, que no tenga demasiado aire entre ellos, justificar el texto, y sacar el color de los bordes. O mejor: eliminar los bordes.

Luego nos quedarían colocar algunos vínculos, para que el texto multimedia funcione como tal.

Además de comprobar o colocar los vínculos del Master, IL3 y la UB, también hay que hacer el vínculo interno desde el icono de Inicio a la página index.html.

También colocamos 3 o 4 vínculos externos en el texto. Para ello, seleccionamos el texto como en Word, y escribimos o pegamos el vínculo web en la opción VINCULO en PROPIEDADES.Recordemos, entre los vínculos externos, de colocar la opción _blank en DEST (debajo del VINCULO), para que se abra una página externa.

Y es todo por esta clase

Al colocar el cursor en el borde de la tabla, sale una doble flecha.

Al quedar la tabla marcada, hay que ir al recuadro de Propiedades, y en Borde, ponemos “0”. Dejamos CellPad y CellSpace para que haya “aire” entre el texto y las divisiones.