| PRIMEROS PASOS: PENSAR EN LAS IMÁGENES |
Lo primero que tendríamos que hacer es escribir, en un papel, en un word, o lo que sea, los nombres de los posts que queremos incluir en nuestro índice. Yo os recomiendo que los clasifiquéis en secciones, así será mucho más fácil la búsqueda.
Una vez elegidos los posts, tenemos que seleccionar las fotos que queremos que ilustren cada una de las entradas. Aquí sois muy libres de hacer lo que queráis. En mi caso he hecho unos diseños que ilustren, más o menos, el contenido. Una vez elegidas las fotos, las guardaremos en una carpeta, para tener todo más a mano.
Tendremos que adaptar el tamaño de la foto al espacio del que dispongamos. Esto lo veremos en el tutorial, pero os lo aviso, para que os vayáis preparando. Yo lo haré con picmonkey, pero podéis usar pixlr, por ejemplo.
Una vez que hayamos escrito los posts que queremos incluir, hayamos guardado las fotos que ilustren los posts en una carpeta, es el momento de elegir la disposición. Yo os voy a dejar 4 disposiciones diferentes, vosotros podéis elegir la que queráis. En el vídeo os contaré cómo hacer las modificaciones. Y ahora os hago el resumen:
Una vez elegidos los posts, tenemos que seleccionar las fotos que queremos que ilustren cada una de las entradas. Aquí sois muy libres de hacer lo que queráis. En mi caso he hecho unos diseños que ilustren, más o menos, el contenido. Una vez elegidas las fotos, las guardaremos en una carpeta, para tener todo más a mano.
Tendremos que adaptar el tamaño de la foto al espacio del que dispongamos. Esto lo veremos en el tutorial, pero os lo aviso, para que os vayáis preparando. Yo lo haré con picmonkey, pero podéis usar pixlr, por ejemplo.
Una vez que hayamos escrito los posts que queremos incluir, hayamos guardado las fotos que ilustren los posts en una carpeta, es el momento de elegir la disposición. Yo os voy a dejar 4 disposiciones diferentes, vosotros podéis elegir la que queráis. En el vídeo os contaré cómo hacer las modificaciones. Y ahora os hago el resumen:
| SOLO 4 FOTOS |
<tr>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
| SOLO 3 FOTOS |
<table style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%; cellpadding="10" cellspacing="2""><tbody>
<tr>
<td style="border:1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border:1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
<tr>
<td style="border:1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border:1px solid #666666; padding: 5px; width: 180px;"> texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
| 4 FOTOS CON TEXTO DEBAJO |
<table 10="" cellspacing="2" style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><tbody>
<tr>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto </td>
</tr>
</tbody></table>
<table 10="" cellspacing="2" style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><tbody>
<tr>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
</tr>
</tbody></table>
| 3 FOTOS CON TEXTO |
<table 10="" cellspacing="2" style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><tbody>
<tr>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto</td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;">texto </td>
</tr>
</tbody></table>
<table 10="" cellspacing="2" style="font-family: arial; font-size: 9px; letter-spacing: 2px; margin: 10px auto; text-align: center; text-transform: uppercase; width: 100%;"><tbody>
<tr>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
<td style="background: #000000; border: 0px solid #666666; padding: 5px; width: 180px;">texto </td>
</tr>
</tbody></table>
- -En color rojo: el tipo de letra. Yo creo que la Arial quedará bien en cualquier blog, queremos que se vea, no una tipografía con mil historias.
- -El color verde: es el tamaño de la tipografía. En este caso la he puesto en un tamaño 11, suficiente para que se vea bien.
- -El color azul: es el espacio entre las letras. Si no queréis espacio poned un 0, si queréis menos espacio poned 1,2, etc.
- -El color naranja: es el ancho de la línea. Podéis aumentar el tamaño lo queráis, pero yo no pondría más de 3.
- -El color morado: es el color del borde. En este caso tiene un color gris, pero en esta página podéis elegir el color que más os guste.
- -El color amarillo: es el estilo de la línea. Solid significa línea sólida, sin puntos ni nada. Podéis cambiarlo por dashed (líneas) o dotted (puntitos).
