Lo prometido es deuda, así que aquí tenéis la segunda parte del tutorial. Si estás leyendo esto sin haber visto la primera parte, muy mal, así que aquí tienes la primera parte, empieza por el principio. Como ya os dije el otro día no os recomiendo nada nada hace un índice solo con las imágenes, podéis hacerlo, sois libres pero no lo recomiendo, ahí queda.
Como ya os amenacé hoy vamos a insertar una imagen que acompañe al texto que hicimos en la entrada anterior. Ya os dije que fueráis poco a poco, pero sin parar que cuanto antes tengáis vuestro índice mejor. Como vais a ver en el tutorial insertar las imágenes está tirado, facilísimo (con musiquilla y todo) de hecho podéis ver cómo quedan las imágenes en mi índice de entradas. Aquí os dejo una imagen para que os hagáis una idea de cómo os puede quedar. | Curso: mini web master |
Si quieres aprender todo lo que sé sobre cómo crear un blog, web o una tienda online en blogger, te recomiendo este curso. Es muy completo y lo mantengo actualizado con novedades. Toda mi web está hecha siguiendo los pasos que te cuento aquí. |
| Quiero saber más sobre el curso |
Diseño de ebooks, catálogos, manuales, guías y cursos online.
|
presentaciones
con power point
|
|
|
| Antes de empezar |
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: |
- Escribimos los posts en un papel o en un word
- Elegimos las fotos que queremos incluir en el índice.
- Guardamos todas las fotos en una carpeta
- Ajustamos el tamaño de las imágenes para que sean todas iguales.
- Vemos el tutorial
Materiales
|
| Aprende a crear una web o un blog más profesional y responsive |
<table style="font-family: arial; font-size: 10px; letter-spacing: 2px; margin: 3px 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>
<td style="border: 1px solid #666666; padding: 5px; width: 180px;"> texto </td>
</tr>
</tbody></table>
<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>
<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>
<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>
| Explicación del código |
| Como podréis ver el índice es muy sencillo: texto no muy grande, en letras mayúsculas, una línea en el borde y chinpún. Sin fondos ni nada, todo muy sencillo (que yo creo que es la mejor opción). Aunque en el vídeo os lo explico os comento un poquito: |
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). |
| Otros cursos para seguir trabajando |
Pack estudiante Cum Laude |
Curso papelería organizar papelería para organizar |
Curso tus apuntes flamantes |
Curso diseños para el trabajo |
curso diseño de packaging
recurso Las 41 plantillas word
clase Diseña líneas del tiempo
clase Programaciones y unidades didácticas
clase Diseña papelería de navidad
clase Cuenta vuestra historia en una línea del tiempo.
clase Diseño de árboles genealógicos
clase Diseña catálogos de productos y servicios, manuales, guías, ebooks y cursos online
La newsletter
Suscríbete a la newsletter, más conocida como cartica y descubre un poco de todo: novedades, mi vida, mis desahogos, las miserias de la vida, ofertas y promociones especiales, etc. No hay una fecha concreta, la envío cuando me brota, cuando tengo algo que contar.
Tus datos serán tratados de acuerdo a la política de privacidad,. Yo, Maite, soy la que te enviará toda la información pero le pido ayuda a MadMimi. No serán cedidos a terceros, ni utilizados para otros fines que no sean los expuestos anteriormente. Si lo deseas, podrás darte de baja y no volveré a utilizar tus datos. Y, para ejercer cualquier derecho que tengas, escríbeme a hola@creativemindly.com
