mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-27 19:02:21 +00:00
302 lines
9.5 KiB
HTML
302 lines
9.5 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>Líneas y trucos</title>
|
|
<!-- compliance patch for microsoft browsers --><!--[if lt IE 7]>
|
|
<script src="../ie7/ie7-standard-p.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
<link type="text/css" href="../nvu2005.css" rel="stylesheet">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../multi2.css" type="text/css">
|
|
<link href="../body.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div id="localizador">
|
|
<p>Multimedia>>Imagen</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="sonido/multi2.htm" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="multi1e.htm" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
|
|
<div class="solapas">
|
|
<ul>
|
|
|
|
|
|
<li><a href="multi1.htm">Conceptos
|
|
generales</a></li>
|
|
|
|
|
|
<li><a href="multi1b.htm">Formatos
|
|
gráficos</a></li>
|
|
|
|
|
|
<li><a href="multi1c.htm">Escalar
|
|
imágenes</a></li>
|
|
|
|
|
|
<li><a href="multi1d.htm">Recortar y rotar</a></li>
|
|
|
|
|
|
<li><a href="multi1e.htm">Insertar
|
|
imágenes</a></li>
|
|
|
|
|
|
<li class="activo"><a href="multi1f.htm">Líneas
|
|
e
|
|
imagen fantasma</a></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="principal">
|
|
<h2>Las líneas horizontales</h2>
|
|
|
|
|
|
<p></p>
|
|
|
|
|
|
<p><img class="flotizq" style="width: 333px; height: 264px;" alt="Panel de propiedades de línea" title="Panel de propiedades de línea" src="imagenes/propiedadesdelinea.png">Un
|
|
componente que podemos considerar como elemento gráfico de
|
|
las páginas son las líneas horizontales.</p>
|
|
|
|
|
|
<p>En muchos momentos pueden ser un recurso visual que ayude a
|
|
delimitar las zonas de la pantalla y fijar la atención en
|
|
alguna de ellas.</p>
|
|
|
|
|
|
<p>Las propiedades sobre las que se puede incidir en las
|
|
líneas son su grosor, su longitud, su alineación
|
|
horizontal y la presentación en forma de línea
|
|
tridimensional o como una línea sólida. </p>
|
|
|
|
|
|
<p>Para acceder a la creación de una línea
|
|
usaremos la opción del menú <span class="refmenu">i</span><span class="refmenu">nsertar
|
|
</span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu">
|
|
línea horizontal</span>
|
|
o el icono <img style="width: 59px; height: 40px;" alt="Línea horizontal" title="Línea horizontal" src="imagenes/iconolineahorizontal.png"> de la
|
|
barra de herramientas. Por cierto, es probable que no veas ese icono en
|
|
tu barra de herramientas, dado que no es de los que aparecen por
|
|
defecto. Si quieres incorporarlo puedes hacerlo pulsando con el
|
|
botón derecho sobre la propia barra de herramientas para
|
|
personalizarla, arrastrando alguno de los iconos complementarios para
|
|
situarlos en un hueco libre. </p>
|
|
|
|
|
|
<p>Otra posibilidad es utilizar como línea alguna
|
|
imagen compuesta especialmente para que cumpla esa función.
|
|
Puedes encontrar varias conectándote a <a href="http://www.areas.net/colorvivo.htm" target="_blank">ColorVivo</a>,
|
|
aunque para la próxima actividad puedes utilizar la
|
|
siguiente:</p>
|
|
|
|
|
|
<p class="centrado"><img style="width: 582px; height: 21px;" alt="Línea gráfica para hacer prácticas" title="Línea gráfica para hacer prácticas" src="imagenes/lineadepegamento.gif"></p>
|
|
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 36" title="Actividad 36" src="../imagenes/numeracion/treintayseis.gif">
|
|
<ul>
|
|
|
|
|
|
<li> Crea un nuevo documento.</li>
|
|
|
|
|
|
<li>Redacta un par de párrafos.</li>
|
|
|
|
|
|
<li>Prueba a separar los párrafos con
|
|
líneas horizontales, modificando los grosores,
|
|
tamaños y alineaciones para comprobar el efecto visual.</li>
|
|
|
|
|
|
<li>Prueba también a utilizar la imagen que precede
|
|
al ejercicio. (Por cierto, puedes utilizar Gimp para cambiar la
|
|
orientación si abres la imagen y utilizas la
|
|
opción <span class="refmenu">imagen</span><b class="refmenu"> <img src="../imagenes/flechamenu.png" height="13" width="14"> </b><span class="refmenu">transformar</span><b class="refmenu">
|
|
<img src="../imagenes/flechamenu.png" height="13" width="14"> </b><span class="refmenu">voltear
|
|
horizontalmente</span>). </li>
|
|
|
|
|
|
<li> Salva el trabajo como <strong>actividad36.html</strong></li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
<div class="codigo">
|
|
<p>El código que corresponde a
|
|
las líneas horizontales es </p>
|
|
|
|
|
|
<code><hr size="4" align="right"
|
|
width=40%></code><br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
Si los atributos <code>size</code> y <code>align</code>
|
|
no aparecen es porque se han tomado los
|
|
valores por defecto: grosor de 2 píxeles y
|
|
alineación central.<br>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
Cuando se ha desmarcado el Sombreado 3-D para crear una
|
|
línea sólida aparece el atributo noshade</div>
|
|
|
|
|
|
<h2>La imagen invisible</h2>
|
|
|
|
|
|
<p>A estas alturas ya habrás comprobado por
|
|
experiencia que los procedimientos para la creación de una
|
|
página WEB son bastante menos versátiles que los
|
|
que acostumbras a utilizar en un procesador de texto. De hecho, algo
|
|
tan simple como sangrar la primera línea de un
|
|
párrafo puede convertirse en una verdadera odisea.</p>
|
|
|
|
|
|
<p>Precisamente ha sido la falta de flexibilidad del lenguaje
|
|
HTML la que ha potenciado el desarrollo de alternativas imaginativas
|
|
para dar solución a situaciones problemáticas.
|
|
Una de las más originales es la que podríamos
|
|
denominar "la imagen fantasma".</p>
|
|
|
|
|
|
<p>Las imágenes ocupan un espacio de la
|
|
página que no puede emplearse para mostrar texto, salvo que
|
|
se utilicen como fondo de la página o de una tabla.
|
|
Partiendo de esa idea a alguien se le ocurrió que si
|
|
ponía una imagen que no se viera podía hacer que
|
|
determinados espacios de la página quedaran en blanco. Para
|
|
poder poner en práctica la idea sólo
|
|
hacía falta que la imagen fuera transparente y eso es lo que
|
|
se puede hacer con las imágenes en formato gif: guardarlas
|
|
de forma que uno de los colores que las forman sea transparente.</p>
|
|
|
|
|
|
<p>El último detalle que faltaba para que la
|
|
ocurrencia fuera redonda era que la imagen fuera muy
|
|
pequeña. Aunque ¿cómo hacer para
|
|
ocupar un espacio mayor que el de la propia imagen? La respuesta a
|
|
estas dos preguntas consiste en crear una imagen de dos colores y con
|
|
un tamaño pequeño pero que permita localizarla al
|
|
pasar el ratón sobre ella, por lo que sugiero que sea de 5x5
|
|
píxeles (antes utilizaba una imagen de 1x1 y me resultaba
|
|
casi imposible encontrarla). </p>
|
|
|
|
|
|
<p>Cuando quiera que la imagen ocupe más de esos 5
|
|
píxeles de alto y de ancho puedo utilizar el espaciado
|
|
vertical y horizontal, o bien permitirme el lujo de transgredir la
|
|
norma que se sugirió de no modificar el tamaño
|
|
arrastrando los bordes de la imagen (ten en cuenta que el sentido de la
|
|
norma era no transmitir mucha información para ocupar poco
|
|
espacio, no el inverso que es lo que haríamos en este caso).</p>
|
|
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 37" title="Actividad 37" src="../imagenes/numeracion/treintaysiete.gif">
|
|
<ul>
|
|
|
|
|
|
<li><img style="width: 390px; height: 482px; float: right;" alt="Opciones para crear una imagen fantasma con Gimp" title="Opciones para crear una imagen fantasma con Gimp" src="imagenes/crearimagenfantasma.png" hspace="10">Abre
|
|
Gimp y utiliza la opción <span class="refmenu">archivo</span><strong class="refmenu"> <img src="../imagenes/flechamenu.png" height="13" width="14"> </strong><span class="refmenu">nuevo</span>. Tendrás
|
|
que pulsar sobre opciones avanzadas para poder elegir que el relleno de
|
|
la nueva imagen se realice con transparencia tal como se muestra en la
|
|
imagen.<br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>Para minimizar al máximo el "peso" de la
|
|
imagen utilizaremos la opción de menú<strong>
|
|
</strong><span class="refmenu">imagen</span><b class="refmenu"><b><b> <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
</b></b></b><span class="refmenu">modo</span><b class="refmenu"><b> <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
</b></b><span class="refmenu">indexado</span>
|
|
y la convertiremos en una imagen con dos colores marcando: <br>
|
|
|
|
|
|
<img src="../gimp/usarpaletabn.png" height="21" width="191"><br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>A continuación acude a <span class="refmenu">archivo <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
guardar</span>
|
|
y nombra la imagen,
|
|
incluyendo la extensión gif (p.ej: fantasma.gif)<br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li> Ahora puedes arrancar el editor y probar a sangrar las
|
|
primeras líneas de cada párrafo de texto para que
|
|
empiecen, por ejemplo a 35 píxeles del margen izquierdo.<br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>¿Recuerdas la actividad 27?
|
|
Es muy
|
|
probable que te costara mucho hacer que el texto no se superpusiera al
|
|
fondo de página. ¿Podría solucionarse
|
|
si creas una tabla de una fila y dos columnas y colocas en la fila de
|
|
la izquierda tu imagen fantasma? Prueba a hacerlo ajustando el
|
|
espaciado horizontal a los píxeles que necesites.<br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li> Salva el trabajo como<strong> actividad37.html</strong>
|
|
</li>
|
|
</ul>
|
|
<br clear="all">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|