Transcripciones
1. ¡Te damos la bienvenida a la clase!: Tu bandeja de entrada probablemente esté llena de correos electrónicos, promociones, ventas, tarjetas de cumpleaños, lo que sea. Pero, ¿alguna vez te has preguntado qué hace que esos correos se pongan en marcha? Hola, soy Vanessa de Bios empresa creativa. Al final de esta clase, tendrás las habilidades en tu caja de herramientas necesarias para desarrollar correos electrónicos HTML sin un editor de arrastrar y soltar. Tener conocimientos previos de HTML y CSS hará que esta clase sea más fácil, pero no lo hace un requisito. Para el proyecto de clase, desarrollarás un email HTML, comercializando tu ciudad natal o una ciudad que te gustaría visitar. Cada video de esta clase se construirá a partir del conocimiento adquirido en videos anteriores, y cada video proporcionará nuevos pasos para su proyecto de clase. Ahora, empecemos.
2. Herramientas gratuitas para esta clase: En primer lugar, necesitarás un editor de código fuente. Como usuario de Mac, prefiero Atom, que es una aplicación de código abierto y ligera que es extremadamente personalizable. Una opción gratuita para los usuarios de Windows es el Bloc de notas ++. Se siente muy similar al Bloc de notas, pero tiene características hechas para escribir código. Si ya tienes Adobe Creative Cloud, puedes usar Dreamweaver, pero cualquier editor de código fuente servirá a tu propósito. Por supuesto, hay muchas más opciones disponibles, pero estas son donde tengo experiencia en usar y me siento seguro recomendando. Los gráficos en tu correo electrónico impulsarán el engagement y la retención de la marca. Utilizo Illustrator y Photoshop para mi trabajo diario. Pero puedes usar una herramienta gratuita como Canva o Adobe chispa creando tus gráficos si no tienes acceso a las herramientas de Adobe. Si aún no tienes un editor de código fuente, descarga e instala una de las opciones gratuitas que son compatibles con tu computadora para usar para esta clase. las notas de la clase se encuentran disponibles enlaces a todas las herramientas mencionadas ,
además de algunas más.
3. ¿Cómo funciona el correo electrónico?: Entonces, el primer paso para codificar correos electrónicos es entender cómo funcionan. correos electrónicos no basados en texto se construyen usando HTML, CSS, e imágenes. Es como recibir una página web especialmente creada en tu bandeja de entrada. No obstante, hay una diferencia, las páginas web se estructuran usando Divs y HTML Semántico. Los correos electrónicos se estructuran usando tablas. Si estás familiarizado con la historia del diseño web, probablemente lo
conozcas a mediados y finales de los 90, los diseñadores usarían tablas para diseñar sus sitios web. Pero esto no son los 90's Entonces, ¿por qué carajos seguimos usando tablas para el diseño de correo electrónico? Los clientes de correo electrónico son lo que usas para recibir tus correos electrónicos, como Gmail o Outlook u otros de los que quizá
no hayas oído hablar como M Client o mailbird. Hay tantos clientes diferentes disponibles para los usuarios pero no todos interpretan HTML de la misma manera. clientes de correo electrónico más antiguos o incluso algunos de los más recientes no admiten HTML más reciente, como Divs. Sin estar 100 por ciento seguro de cómo va a estar recibiendo el correo electrónico tu destinatario, lo mejor es estar del lado seguro y usar lo que
sabes que funciona en el 100 por ciento de los clientes de correo electrónico.
4. Explicación sobre el correo electrónico en HTML: De acuerdo, entonces hay tres componentes que todos necesitan saber para crear un diseño de mesa. Tienes tu mesa,
esas son las etiquetas de apertura y cierre de mesa. Después tienes fila de tabla o TR, y luego tienes los datos de tabla, y anidas eso dentro de la fila de tabla para crear celdas o columnas. Entonces, esa es una fila, y si quieres crear otra fila debajo de esa, puedes reescribirla de nuevo, o simplemente pegarla. Vamos a añadir un Hello World, refrescar, y se puede ver que agregó otra fila debajo de él. Pero no parece mucho. Por lo tanto, puede utilizar ciertos atributos HTML para mejorar la apariencia de su tabla. Entonces, un atributo de tabla HTML que vamos a agregar en este momento, generalmente se quiere tener el borde establecido en cero, pero vamos a agregar un borde de un píxel por ahora. De esa manera se puede ver lo que están haciendo
todos los demás atributos html. Entonces, vamos a refrescarnos. Entonces, se puede ver que agregó un borde alrededor de las dos filas y las dos celdas. Solo agreguemos otra celda a cada fila aquí, así que hay un poco más para jugar. Entonces, otro atributo importante que se desea utilizar es el relleno de celdas. Entonces, si el relleno de celdas está establecido en cero, es más o menos el valor predeterminado. A mí me gusta usar un relleno celular de aproximadamente cero. Da una buena cantidad de espacio. Entonces, esto es algo así como el atributo de relleno en CSS. Entonces, se puede ver que agregó 30 píxeles en todo el camino alrededor del contenido dentro del interior de la celda. También puedes usar el espaciado de celdas que funciona un poco como márgenes, en realidad agregará relleno entre las celdas en lugar de desde el contenido. Entonces, si estás familiarizado con el modelo de caja en CSS, esto es como usar un margen. Eso es un espaciado celular de cero. Agregas un espaciado de celdas de 30. Se puede ver empujando las células más alejadas unas de otras. Cambiemos eso de nuevo al espaciado celular de cero. Color de fondo. Si deseas cambiar el color de tu mesa sería color BG. Hagamos que eso sea un gris suave y agradable y refresquemos. puede ver que cambió el color de fondo. Hay otros atributos que son importantes. No verás el efecto de la misma ahora porque ésta es solo una tabla, y si tuvieras tablas anidadas, éstas serían más importantes, pero tendrás valign que se alineará verticalmente como quieras que sea. Entonces tienes una línea que se alineará horizontalmente. También es importante tener en cuenta que la mayoría, si no todos estos no son compatibles en HTML5, pero aún funcionan en diseño de correo electrónico. También puedes aplicar CSS en línea, pero es posible que quieras apegarte a los atributos HTML al menos hasta que más clientes de correo electrónico empiecen a usar CSS en línea.
5. Cómo anidar tablas: Está bien. Entonces, digamos que quieres tener un correo electrónico que tenga dos filas, y la primera fila tiene una columna que se extiende por todo el camino, ancho completo. La segunda fila tiene tres columnas que están espaciadas uniformemente, ocupan el 33 por ciento del ancho que se les permite. Entonces, podría parecer que solo puedes hacer una fila de columna aquí y luego otra fila aquí con tres celdas dentro. Entonces, desafortunadamente, no puedes hacerlo de esa manera porque algunos de los anchos se ponen funky si
tienes una fila que tiene una celda y luego otra fila justo debajo de ella que tiene tres celdas. Entonces, hay dos opciones para arreglar esto. Puede colocar una mesa justo después de la otra, o puede anidar una mesa dentro de otra celda de mesa. Entonces, vamos a probar ambas opciones
porque ambas logran looks diferentes, pero muy similares. Entonces, si volvemos aquí, empecemos cerrando esta mesa. Entonces, esto se va a convertir en la fila que es una fila de ancho completo. Entonces vamos a convertir esto en una tabla separada, así que sólo vamos a copiar toda esta línea aquí, la etiqueta de la mesa de apertura, esa manera no tienes que reescribir todo el asunto. Vamos a pegarlo y luego solo toca tab para que acabe eso. Vamos a ahorrar y volver atrás y recargar. Ahora tienes una columna de ancho completo y tres columnas debajo de ella. No obstante, sí tiene un poco demasiado relleno aquí y eso se debe a que esto sí tiene un relleno celular de 30. Entonces, eso va a sumar 30 en todo el camino alrededor de la mesa, pero luego va a sumar 60 entre cada una de las columnas y eso es porque está sumando 30 a cada lado de la celda. Entonces, lo que podríamos hacer para deshacernos de eso, no
podemos simplemente deshacernos del relleno celular aquí porque eso solo nos deshará del relleno todo el camino. Pero, si te parece bien tener ese relleno extra ahí dentro, entonces puedes seguir adelante y usar este método. Si no quieres el relleno extra, y solo quieres tener tres columnas, puedes anidar una mesa dentro de otra celda de esta tabla. Entonces, vamos a probar esa opción. Entonces, sólo vamos a entrar y vamos a cortar esto. Entonces vamos a eliminar esta tabla ya que ya no la necesitamos. Simplemente vamos a eliminar todo el espacio extra que no necesitamos. Entonces, voy a agregar otra fila de tabla aquí justo debajo de la original, la fila de tabla de ancho completo. Entonces voy a crear otra celda de datos de tabla. Entonces, hay una fila en fila, y una celda en una celda, así que es parejo. Entonces solo vamos a crear otra tabla, y esta tabla no necesita ningún tipo de atributos, puedes agregar atributos si los necesitas, pero esta solo va a ser una tabla en blanco. Vamos a pegar lo que acabamos de cortar en él. Presiona guardar y vuelve al navegador y pulsa refrescar, y puedes ver que aún tiene un relleno de 30 alrededor,
pero no tiene ese relleno extra entre las columnas. Entonces, ese es uno de los beneficios de anidar una tabla dentro de una celda es que asume los atributos que se aplican a la tabla original como el relleno de celdas alrededor de toda la tabla, pero no tiene el relleno de 30 celdas aplicado a cada una de estas columnas. Te acostumbrarás a ver tablas anidadas ya que
así crearás diseños más estructurados. Pero ahora que tienes un agarre en la estructura del correo electrónico, diseñemos la plantilla de correo electrónico.
6. Otros consejos: Aquí te dejamos algunos consejos rápidos más antes de empezar. Para esta clase, puedes usar las imágenes que proporcioné en el archivo del proyecto o consultar los enlaces que proporcioné y las notas del proyecto para sacar el máximo provecho de tus gráficos de correo electrónico. Un gran trozo de tu lista de correo abrirá el correo electrónico en su teléfono o podrían estar en una conexión de datos más lenta. Sé consciente de tus usuarios y haz que el tamaño del archivo de imagen sea lo más pequeño posible. Tengo un enlace en las notas del proyecto con más información sobre la optimización de tus imágenes. Muchos diseñadores construirán sus correos electrónicos en Photoshop antes de que empiecen a codificar tu correo electrónico. Si no puedes construir un simulacro en Photoshop, haz un boceto de tu correo electrónico para determinar a dónde va todo. No estaremos cubriendo correos electrónicos responsivos móviles y esta clase en particular, pero eso es algo que se puede hacer. Más información y enlaces están en las notas del proyecto.
7. Proyecto: cómo empezar: Entonces, empecemos con el proyecto real. Entonces, en tus notas de proyecto, van a haber algunas descargas que he agregado ahí dentro. Va a haber una plantilla de correo electrónico que es sólo la plantilla vacía con la que vamos a estar iniciando este proyecto. Va a haber otro archivo HTML que tenga todas las imágenes y contenido y todo ya agregado. También tendré la copia y las imágenes disponibles para su descarga ahí si quieres seguir paso a paso. De no ser así, puedes usar tu propio contenido y tus propios gráficos. Entonces, esta es la plantilla con la que vamos a empezar y esto se ve así en este momento, en un navegador. Entonces, como puedes ver, no hay logotipo, no
hay fotografías, no hay contenido, ni titulares, ni enlaces, nada. Yo sí dejé este pie de página aquí. Puedes intercambiar los enlaces por tu propio contenido, o simplemente dejarlo tal como está, pero sí quieres ser compatible con CAN-SPAM y usar tus propios enlaces para darse de baja y ver enlaces
en línea y todo ese material divertido que requiere la ley. Cuando termines con
él, se verá algo así. Entonces, como puedes ver, podemos cambiar el color de fondo, agregamos una imagen de héroe, titular, un párrafo introductorio, tres columnas en todo el camino, y luego dos filas de columnas en la parte inferior. Entonces, empecemos.
8. Proyecto: parte 1, fila de una columna: Entonces, saltemos a la derecha. Entonces, todo lo que va a ser una etiqueta de cabeza y este doctype HTML, vas a querer mantener todo eso igual. Estos son solo algunos estilos específicos del cliente y algunas cosas que ayudan a que el contenido se vea un poco mejor dentro de los clientes de correo electrónico. Entonces, sólo haciendo una carrera rápida, tenemos algunas notas que he añadido específicamente para ustedes, estudiantes de The Skillshare. Esto lo voy a decir sólo,
dónde poner cierto contenido, donde ciertas cosas deben cambiarse dentro del pie de página para que usted sea abarcado conforme. Todas esas cosas buenas solo para hacer las cosas un poco más fáciles si esta es tu primera vez jugando con un correo HTML. Entonces, vamos a empezar con esta primera fila. Entonces, esta primera fila tiene un titular gráfico y un párrafo entero con un enlace. Entonces, empecemos agregando la imagen, y esto sólo va a ir a esta mesa principal aquí. Entonces, dentro de esta fila de datos de tabla vacía, no hay nada dentro. Entonces, empecemos abriendo una etiqueta de imagen, y luego agregando la fuente, lo que está dentro de la carpeta de imágenes, y luego esto se llama email hero, con mucha razón. Vamos a añadir una etiqueta alt al héroe del correo electrónico. El tag alt sólo va a ser el mismo texto que está en la imagen. Se quiere agregar todos los textos todo el tiempo porque a veces se va a tener gente que podría estar usando un lector de pantalla para que se les lea la pantalla, y luego se les dará una descripción precisa de lo que realmente es la imagen si no lo pueden ver. También quieres agregarlo, por si acaso tienes personas que tienen imágenes apagadas en sus correos electrónicos de esa manera, pueden ver las imágenes sin tener que descargarlas. En ocasiones, las personas los apagan por razones de seguridad, veces lo apagan para ahorrar datos. Entonces, guarde eso. Vuelve a plantilla de correo electrónico
y carga, y puedes verla agregada la imagen aquí. Ahora, vamos a añadir este titular y párrafo. Entonces, voy a añadir un salto de línea. Tengamos tres saltos de línea solo por buena medida, y vamos a empezar con un lapso. No se pueden usar etiquetas de titulares en diseño HTML o etiquetas de párrafo para ese caso, quiere usar etiquetas de fuente o etiquetas span, porque eso es lo que todos los clientes de correo electrónico pueden entender. Entonces, vamos a agregar algo de CSS en línea para darle estilo a esta etiqueta span, y vamos a cambiar la familia de fuentes. Puedes cambiarlo a lo que quieras, pero estoy usando Arial, Helvetica, está bastante bien, Helvetica, San-Serif, y hagamos el color de esto, hagámoslo, déjame probar este azul, vamos a ver qué se parece a este azul. Entonces hagamos el tamaño de fuente de este lapso, hagámoslo 30 puntos. Vamos a añadirle una altura de línea solo para darle un poco de espacio extra para respirar. Hagamos 140 por ciento. Refrescar. Vuelve atrás. Recargar. ¿Por qué eso no funciona? Es porque no puse nada dentro de la etiqueta span, eso ayudaría. Entonces, el titular es descubrir tu nueva ciudad favorita, punto. Guardar, refrescar, agradable. Ahora, vamos a añadir otra etiqueta span debajo de ella. En realidad, así que no tenemos que volver a escribir todo. Vamos a copiar la etiqueta span de apertura y pegarla, y luego vamos a cambiar el tamaño de la fuente a algo un poco más legible para un párrafo. Hagamos 10 puntos, y luego cambiemos el color de esto. Este va a ser el párrafo de apertura, se
quiere que sea legible, no
queremos un párrafo azul completo. Esta va a ser una imagen 25272e es mi favorita como el color negro carbón para usar, y vamos a cerrar esa etiqueta span. Entonces de la palabra documento que te proporcioné, copiemos y peguemos el párrafo en, y luego vamos a añadir un enlace aprender más. Ahora, volvamos aquí refrescar. Entonces, como puedes ver, porque estas son dos etiquetas span, se están mostrando en línea entre sí. A diferencia de la etiqueta de párrafo y una etiqueta de titular, no
es agregar en un salto de línea por sí solo. Entonces, vamos a hacer eso. Entonces, después del titular vamos a añadir sólo dos saltos de línea, guardar, refrescar, enfriar. Algo que quiero hacer con esto antes de agregar un enlace, vamos a agregar una entidad HTML o un carácter especial que es una fila que se ve así. Esta pequeña flecha orientada a la derecha agrega un poco de pop extra al enlace como dicen algunas personas, y hace que sea un poco más de aspecto clicable. Entonces, a esto se le llama la flecha derecha, pero es genial en usar &rarr, o rarr, como sea que lo llamemos. Vuelve atrás. Refrescar. Entonces, como puedes verlo, la linda flechaita ahí dentro, y vamos a envolver este aprender-más dentro de un eslabón. Entonces, tenemos etiqueta de anclaje, y luego la referencia. Está funcionando muy bien, ahora vamos a cerrar esa etiqueta de anclaje, y vamos a hacer de este el enlace que está dentro de la palabra documento. Pega, y vamos a añadir CSS en
línea para que este enlace cambie el color del enlace porque en este momento es solo el predeterminado, como morado profundo o lo que sea las etiquetas de anclaje por defecto están en los navegadores en estos días. Entonces, vamos a hacer una comprobación de estilo, igual que en el lapso y luego vamos a decir color, y vamos a usar el mismo azul en el titular, punto y coma, cerrar eso, refrescar. Ahora tenemos un bonito enlace azul que enlaza hacia fuera. También vamos a querer que esta imagen se pueda hacer clic. La mayoría de las personas, cuando hacen clic en un correo electrónico, no van a hacer clic en los pequeños enlaces que suelen hacer clic en la imagen principal. Entonces, normalmente querrás que lo más importante en el correo electrónico sea el enlace en la imagen del héroe. Entonces, si volvemos a la imagen aquí y luego delante de eso, sólo
vamos a tener una etiqueta de ancla, y luego la h-referencia, y luego vamos a cerrar esa etiqueta de anclaje, y sólo vamos a copiar eso misma longitud aquí mismo, pega eso ahí dentro, y puedo ver que se puede hacer clic. Un pequeño truco que querrás hacer cuando estés haciendo imágenes clicables, a veces si estás insertando un email clientes, se agregará este borde realmente extraño alrededor las imágenes
clicables que realmente no gel con el resto de tu diseño . Por lo tanto, se puede agregar un borde en una vista de cero a la imagen misma, no a la etiqueta de anclaje. Entonces eso eliminará esa frontera que verás dentro de los clientes de correo electrónico. Entonces, parece que eso es todo para este correo de titular de imagen de héroe de intro apertura. Realmente no me gusta ese color en este titular. Entonces, ajustemos que ese titular tenga el mismo color exacto el párrafo de ahí. Ahora, vamos a trabajar en las tres columnas que están por debajo de esta primera fila.
9. Proyecto: parte 2, fila de tres columnas: Ahora que agregamos esa primera fila, sumemos la segunda fila que tiene tres columnas yendo por todo el camino. Entonces ahora mismo, todo está dentro de esta fila de aquí. Entonces vamos a necesitar agregar una fila separada debajo de eso,
así que TR, TR y al lado
de TR, por supuesto, necesitas TD, datos de tabla. Entonces eso es agregar una columna porque esta fila de tabla tiene una columna, la de abajo necesita tener una columna. Y luego vamos a anidar otra mesa dentro de esa columna para obtener el look de tres columnas. Es columna dentro de columnas. Vamos a agregar una fila de tabla porque, como puedes ver, solo hay una fila que contiene tres columnas. Vamos a sumar tres columnas, así que tres TDs, guardar, recargar. No se puede ver nada porque todavía no hay nada en ellos. Por lo que cada uno de estos tiene una imagen. Entonces sólo vamos a sumar en las imágenes, imagen. Espero que lo esté haciendo bien. Fuente de imagen, dentro de la fuente luego escriba imagen carpeta y vamos a empezar con esta. Guardar. Vas a añadir tu etiqueta alt. Un diseñador siempre agrega etiquetas alt. Es Casa de Cadillac. Guardar. Y luego vamos a añadir la imagen a la segunda,
imagen, fuente dentro de la carpeta de imágenes. Esa es la última librería. Entonces vamos a añadir un alt de la última librería, que es un lugar increíble al que tienes que ir. Imagen, fuente, y esta tercera columna aquí dentro de la carpeta de imágenes. Y entonces este va a ser el letrero de Hollywood. Etiqueta Alt, cartel de Hollywood. Sólo di Hollywood. Si volvemos, refresca. Se pueden ver las tres imágenes. Están alineados muy bien en tres columnas. Entonces ahora vamos a sumar el contenido real, así que vamos a añadir estos pequeños subtitulares, y un párrafo, y un enlace a todos y cada uno de ellos. Entonces, lo que podemos hacer aquí es que sólo podemos copiar el titular del original. Copia el lapso del párrafo original, para que estos dos tramos y solo
los vamos a pegar aquí para que no tengas que volver a escribir todo eso de nuevo. Y luego vamos a bajar el tamaño de ese titular de párrafo que acabamos de agregar, que originalmente era de 30 puntos. Sólo cambiemos eso a 20 puntos, hazlo un poco más pequeño. Entonces vamos a actualizar el subtitular, oops, no podemos escribir y hablar al mismo tiempo. Refresca solo para ver cómo se ve. Todavía un poco demasiado grande. Hagamos sólo 16 puntos. Qué es Cuppy gran contenido de la palabra documento y pasarlo aquí. Guardar. Refrescar. Entonces, como puedes ver de nuevo igual que aquí arriba porque estos no son elementos de línea de bloque o elementos en línea, solo es agregarlo justo al lado de la imagen. Entonces, vamos a añadir un descanso después de esa imagen ahí. Creo que podemos añadir otro descanso. Eso es mejor. También vamos a añadir- agreguemos un descanso aquí a este enlace, solo uno. Por supuesto, ahora el enlace está por su cuenta. Entonces puedes ver que las cosas están cambiando pero se verá un poco diferente una vez que agreguemos el contenido a estos dos. Entonces, solo copiemos todo. En realidad, no, probablemente deberíamos cambiar el enlace porque ese no es el enlace correcto. Entonces, volviendo al documento de Word, copiando esa URL, pegando esa URL, ahora es tres URL. Ahora solo copiemos ambos de esos tramos y todo su contenido. Acude a la segunda columna aquí. Vamos a pegar eso ahí dentro, y luego sólo vamos a poner el titular correcto en este subtitular. Librería. Refrescar. Copiar el contenido correcto del documento Word. Pega. Vuelve aquí y copia la dirección de enlace correcta. Pega eso aquí, refresca. Está bien, se ve mejor. Tomemos esto otra vez por tercera vez, peguemos eso, y ahora vamos a tomar este subtitular y poner el letrero de Hollywood, luego copiar el párrafo correcto. Pega ahí el párrafo correcto. Muchos diseñadores simplemente copiando y pegando. Copiar dirección de enlace, pegar esa URL sobre la original, y boom, refrescar. De acuerdo, algo no está mirando justo aquí. Entonces todo está cambiando un poco. Y algunos de estos párrafos simplemente se están ejecutando juntos. Entonces, lo que vamos a querer hacer es que vamos a querer agregar algunos atributos HTML a esta tabla aquí. Entonces, como recuerdas de los videos anteriores, puedes agregar atributos que afectan solo a la tabla anidada y no a toda la tabla. Entonces lo que creo que deberíamos hacer es en esta tabla anidada, agreguemos un relleno de celdas de 10 píxeles. Refrescar. Todavía está mirando un poco apagado, pero ahora tenemos 20 píxeles entre cada columna, lo cual es mucho más legible. Creo que me di cuenta por qué este se ve diferente a estos dos. Entonces, como recuerdan, agregamos un salto de línea extra entre la imagen y el subtitular, pero no lo agregamos a los otros dos cuando copiamos y pegamos todo. Entonces sólo vamos a, estos dos descansos aquí, vamos a pegar eso después de la segunda imagen y después de la tercera imagen, guárdala, refresca, y ahora puedes ver que todo está alineado perfectamente. Entonces, eso es todo para esta columna aquí, así que ahora podemos pasar a la última fila del correo electrónico, que es la fila de dos columnas.
10. Proyecto: parte 3, fila de dos columnas: Entonces ahora vamos a añadir una nueva fila aquí que tiene dos columnas y se verá así cuando terminemos con ella. Entonces vamos a volver aquí y esta es la última fila en la que trabajamos. Entonces vamos a añadir una fila debajo de esta fila y anidar otro cable dentro de ella. Entonces vamos a crear esa fila. Crea esa tabla. Columna de datos por lo que ahora es una fila de columna, y vamos a anidar esa tabla dentro de ella. Después una fila, con dos columnas. Enfriar. Entonces, esta primera columna sólo
tiene una imagen. Entonces vamos a la fuente de imagen, dentro de la carpeta de imágenes, y este es observatory.png. Voy a añadir alt tag
del Observatorio Griffith, cerrar eso. Vas a ir a la segunda columna, y así podrás ver la imagen aquí. Entonces, esta columna, segunda columna va a tener los mismos tamaños de subtitular y párrafo. Entonces, podemos volver al código y copiar el subtitular y párrafo de una de esas columnas y pegarlo, y sólo podemos poner el titular correcto en él. Podemos copiar y pegar de la palabra documento. Pega eso ahí mismo y copia y pega la fila correcta aquí mismo. Guardar. Vuelve atrás. Refrescar. Enfriar. Por lo que ahora tenemos una fila con dos columnas. Pero como lo que pasaba antes con esta fila de tres columnas, simplemente no
hay suficiente espacio entre estas dos columnas. Entonces, vamos a volver a la mesa anidada. Aquí mismo y vamos a añadir un relleno celular de 10. Refrescar. Entonces, ahora se puede ver que agregó 10 píxeles a cada columna haciendo un total de 20 píxeles entre la columna. Buen álgebra vieja, y también se desplazó sobre esta imagen por 10 píxeles y ahora se alinea perfectamente con esta fila por encima de ella. Entonces sí. Creo que eso es todo para las filas. Al siguiente video.
11. Proyecto: parte 4, ajustes finales: Oye, así que casi terminamos con hacer que esta plantilla se parezca más a este objetivo terminado aquí. Entonces, la diferencia más asombrosa entre estos dos es obviamente el color de fondo. Entonces, vamos a trabajar en hacer esta mesa de fondo este color
topo aquí en lugar de este navegador liso blanco detrás de ella. Entonces, vayamos a esto, donde dice fondo, aquí
hay una pequeña etiqueta. Añadamos un bgcolor a eso, esa es la tabla principal que contiene todas las demás tablas, y vamos a agregar el código x para eso. Guardar, refrescar. Entonces como puedes ver, agregó el color de fondo a esto, pero también está este divertido borde blanco de aspecto que va todo el camino alrededor del navegador. Entonces, esta es en realidad la etiqueta del cuerpo. El tag del cuerpo de apertura necesita un color añadido también, y vamos a hacer el mismo color o tal vez te guste el borde y quieres quedarte con el borde. Puedes quedarte con la frontera si quieres, pero nos estamos deshaciendo de ella en esta. Refresca, no más frontera. De acuerdo, algo más que probablemente deberíamos cambiar es que tiene que haber un poco más de espacio para respirar entre el párrafo de apertura, fila de
intro, y esta fila de tres columnas aquí. Simplemente no hay espacio suficiente, hay mucho espacio aquí, no hay espacio aquí, arreglemos eso. Entonces, si nos desplazamos hacia abajo y encontramos este párrafo de apertura, solo
agreguemos dos saltos de línea allí. Ahorra, regresa, refresca, y ahora puedes ver que hay un poco más de espacio para respirar.
12. Próximos pasos: Si aún no lo has hecho, completa una versión de tu archivo de correo electrónico, y sube una captura de pantalla a tu proyecto en esta clase. Para enviar tu correo electrónico, necesitarás utilizar un proveedor de correo electrónico como los mencionados al inicio de esta clase. Estaré cubriendo estos más en profundidad en otra clase, o puedes encontrar más información sobre SkillShare. Comenta a continuación si tienes alguna pregunta. Buena suerte.
