.png)
Si quieres que aparezcan imágenes o imágenes con texto, iremos a este otro post. Ahora me voy a centrar, solo en un índice con texto, como el que ves aquí abajo. Lo complicado no es hacer el índice, para nada, sino pensar en las secciones, ordenar, enlazar, etc. Tardarás un rato, pero merecerá la pena. Esto de aquí abajo es lo que vamos a aprender a hacer.
| texto | texto | texto |
| texto | texto | texto |
| Curso online: MiniWeb Máster |
Resumen del curso |
Esta web, donde estáis ahora mismo, es un blog de blogger modificado por mí, y en este curso te cuento todo lo que yo he hecho para transformar un blog de blogger en una web bonita, sencilla y práctica como esta. En el curso también os cuento cómo hacer tablas responsive, que son muy prácticas para que todo se vea de maravilla en el móvil. Entre otras muchas cosas. Podéis descargar el índice desde el botón de abajo u obtener más información sobre este curso.
 |
Inicio: Lo empiezas cuando tú quieras. Te apuntas y empiezas el curso. |
 |
Final: El curso es permanente, no hay límite de tiempo. |
 |
Materiales: Instrucciones paso a paso con código en documentos Word para que sea fácil de copiar y pegar, manual y vídeos explicativos. |
 |
Vídeos El curso incluye 20 vídeos explicativos, más de 11 horas de información |
 |
Información: Curso online, permanente, lo haces a tu ritmo. Necesitas internet y word. Te daré el acceso a la plataforma de cursos desde donde podrás seguir toda la formación. |
| Paso 1: copiar el código Elige el número de columnas que quieras: dos, tres o cuatro columnas. Copia el código y lo pegas en la edición HTML de una entrada o página de blogger. Una vez pegado, podrás hacer las modificaciones. He resaltado con colores las partes que puedes modificar para personalizar, un poquito, las tablas. |
| Código para 2 columnas |
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; 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> </tr> </tbody></table> |
| texto | texto |
| Código para 3 columnas |
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; 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> |
| texto | texto | texto |
| Código para 4 columnas |
<table style="font-family: arial; font-size: 9px; letter-spacing: 0px; margin: 10px auto; text-align: center; 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> |
| texto | texto | texto | texto |
| Paso 2: las modificaciones Ahora que tienes el código pegado en la vista HTML de tu entrada o página Blogger, podráshacer los siguientes cambios. |
| Cambios básicos: | ||
Ahora te voy a explicar los cambios básicos que puedes hacer en tus tablas. Ten cuidado de no borrar ningún guion ni signo, si lo haces no te funcionará. Todos estos cambios los vamos a hacer en la visión HTML de nuestra entrada, una vez que hayamos pegado el código con el número de columnas que queramos. Font-size: Este código corresponde con el tamaño de la tipografía que aparecerá dentro de las celdas. Por defecto he puesto 9px, pero puedes cambiar el 9 por otro número, el que quieras. No borres el px, modifica solo el número. Cuando hagas el cambio, dale a vista previa para valorar si te sirve o no. Letter-spacing: Este código corresponde al espacio entre las letras. Por defecto he puesto 0px, es decir, sin espacio, pero puedes aumentar esta separación cambiando el 0 por otro número. No borres el px, modifica solo el número. Cuando hagas el cambio, dale a vista previa para valorar si te sirve o no. font-family: Se refiere al estilo de la tipografía que quieras. Yo te he dejado una muy sencilla, pero puedes modificarla. Para poder hacerlo, entrad en esta web. En ella encontrarás distintas tipografías. Elige la que quieras haciendo clic sobre ella. En la parte inferior derecha aparecerá el código de esa tipografía. Copiaremos el texto que aparece después de font family y lo pegaremos en su lugar en nuestro documento Word. Este es el código que nos aparecerá en la web. Lo resaltado en negrita y rojo será lo que copiemos y peguemos, incluido el punto y coma.
Pegaremos ese código en el lugar de arial. Asegúrate de que solo hay un punto y coma detrás del código de la tipografía. Te dejo aquí un ejemplo de cómo podría quedar.
|
| Los bordes: border Todo el código que viene detrás de border nos permitirá hacer modificaciones en las líneas de la celda. |
|
Grosor del borde: 1px Si no quieres que tus celdas tengan borde: pondremos un 0px. Ese 0px lo pondremos en todos los bordes. Si quieres un grosor mayor en el borde aumentaremos el número. No te recomiendo que pongas un tamaño mayor de 3px. Pondremos el mismo tamaño en todos los bordes. Estilo del borde: solid El estilo solid significa que la línea es sólida, lisa Si queremos una línea de puntitos, sustituiremos solid por dotted en todos los códigos de borde. Si queremos una línea discontinua, sustituiremos solid por dashed en todos los códigos de borde. Los colores El código numérico que viene detrás de la almohadilla hace referencia al color de la línea. Si has decidido que quieres que las celdas tengan línea, podremos cambiar su color. Para hacer los cambios de color iremos a esta página, elegiremos el color, lo copiaremos y lo pegaremos en su lugar. No os olvidéis de la "#" para que todo funcione bien. El número de bordes Si quiero todos los bordes, los 4 dejo border, no modifico el código original en rosa. Si quiero borde superior: sustituimos todos los border por border-top en todos los códigos del borde. Si quiero borde inferior: sustituimos todos los border por border-bottom en todos los códigos del borde. Si quiero borde izquierdo: sustituimos todos los border por border-left en todos los códigos del borde. Si queremos borde derecho: sustituimos todos los border por border-right en todos los códigos del borde. Ejemplo: dos columnas, bordes inferiores
|
| Paso 3: extras Puedes dejar las columnas como están, pero yo te invito a que hagas alguna modificación más. Aquí te dejo dos muy útiles. |
| Poner color de fondo a las celdas | ||||
Puede ser que quieras bordes en las celdas y también un color de fondo en cada una de las celdas. 1. Elegimos el código según el número de columnas que queramos. Lo copiamos y lo pegamos en nuestra entrada de blogger en la vista HTML. 2. Después de pegar el código, justo delante de border, pegaremos el siguiente código background: #f9fad3; como puedes ver en el ejemplo. No te olvides del punto y coma. 3. Podremos cambiar el color del fondo utilizando la web que he dejado más arriba. Puedes poner un mismo color en todas las celdas o combinar distintos colores, como quieras. 4. Si queremos que solo aparezca el color de fondo, pero sin línea, en el apartado de 1px pondremos 0px. 5. Utiliza la vista previa para ver cómo está quedando todo. Ejemplo: 3 columnas con color de fondo y sin líneas
|
| Poner varias filas Si solo queremos una fila de celdas, no hará falta que sigas estos pasos. Pero si quieres colocar varias celdas, unas debajo de otras, tendrás que seguir estos pasos. 1. Una vez que hayas elegido el código con el número de columnas que quieras y hayas hecho todas las modificaciones: colores, fondos, tipografías, grosores, etc. Copiaremos todo el código desde <tr> hasta </td>. 2. Justo debajo de </td> pegaremos el código que hemos copiado tantas veces como filas necesitemos. 3. Utiliza la vista previa para ver cómo está quedando todo. |
||||||||||
Ejemplo: 3 columnas y tres filas
|
| Paso 4: escribir el texto y publicar Cuando ya tengas todas las filas y celdas que quieras (podemos ver cómo está quedando todo en vista Previa) y hayas hecho todas las modificaciones de código, podrás volver a la vista de redacción de las entradas blogger y escribir el texto correspondiente en cada una de las celdas. Podrás poner links en el texto con normalidad, para que te lleve al lugar de la web que quieras o a otro link externo. Cuando todo esté listo, publicaremos la entrada o la página. |
Cursos papelería
.jpg)
| CURSO PAPELERÍA PARA ORGANIZARTE |
| Diseña toda la papelería que necesitas para organizarte: planificadores, menús, horarios y mucho más. |
| más info |
| PACK PROFES FETÉN |
Incluye el curso de apuntes flamantes, el curso de presentaciones, curso de material docente y la clase de unidades didácticas y programaciones. |
| más info |
.jpg)
| PACK ESTUDIANTES CUM LAUDE |
| Incluye el curso de apuntes flamantes, el curso de presentaciones. Perfecto para estudiantes y opositores. |
| más info |
| CURSO TUS APUNTES FLAMANTES |
| Aprende a preparar tus apuntes de una forma sencilla, práctica y significativa. Usaremos Word y Power Point. |
| más info |
.jpg)
| CURSO DISEÑA TU MATERIAL DOCENTE |
| Aprende a diseñar material para tu aula, para tu organización de profe, cuadernos de profe, actividades, unidades didácticas y mucho más. |
| más info |
.jpg)
| CURSO DISEÑO DE PACKAGING |
Diseña con Power Point tu packaging: tarjetas, kits de fiesta, etiquetas, menús, meseros. Para tus fiestas, para tu empresa. |
| más info |
.jpg)
| CLASE UNIDADES DIDÁCTICAS Y PROGRAMACIONES |
| Clase para diseñar y maquetar tus unidades didácticas y programaciones. Además de plantillas editables, te enseñaré a crear las tuyas y adaptar las mías a lo que tú necesites. |
| más info |
.jpg)
| CLASE EBOOKS, GUÍAS Y CATÁLOGOS |
| Aprende a diseñar y maquetar ebooks, cursos online, manuales, guías, catálogos, con Power Point. |
| más info |
.jpg)
| PACK DISEÑA TU ORDEN |
| Incluye el curso para diseñar papelería para y el curso para diseñar e imprimir tu agenda. |
| más info |
.jpg)
| PACK DISEÑA PAPELERÍA |
El pack de cursos para diseñar papelería para organizarte y todo el packaging que tú quieras. |
| más info |
.jpg)
| CURSO DISEÑA TU AGENDA |
| Aprende a diseñar e imprimir tu agenda perfecta. El curso incluye decenas de plantillas editables y vídeos. |
| más info |
.jpg)
.jpg)
.jpg)
.jpg)
