Marcador (Arrastra con el ratón)

Abrimos nuestra index

Nos quedamos así, poner el cursor donde señalo y retroceder un espacio con el teclado

Fijaros aquí, con estas herramientas podemos llevar el cursor al la parte que necesitemos

lo ponemos en centrar

Vamos a Tabla / Insertar / Tabla

Fijaros bien en todos los valores

Tenemos esto, poner el cursor donde señalo

Botón derecho, Propiedades de celda / Especificar ancho en píxeles 600, Aceptar

Ahora tenemos una columna estrecha y la otra mas ancha, es en la que especificamos el ancho a 600

Vamos a insertar una tabla en la celda izquierda con varias filas y una columna, nos servirá para ir metiendo nuestras cosillas

Tabla / Insertar / Tabla, con estos valores

Tendremos esto

Vamos a escribir esto en cada fila, pondremos una x y un dibujillo así ≈≈≈≈≈≈ para no perdernos

hablando de "dibujillos", aprovecho para explicar de donde salen, yo los llamo cariñosamente así, pero son Símbolos
 

los encontrareis aquí

 

Vamos a la 1ª fila, quitamos la x, insertamos tabla

Tabla / Insertar / Tabla

Así se vera

Veis que tenemos tres filas, vamos a rellenar la primera y la tercera, con la imagen barra-horizontal.jpg
que tenemos en nuestra carpeta de imágenes, igual que la pusimos en la Lección - 2
 

ponemos el cursor en la 1ª celda, botón derecho / Propiedades de celda, Examinar y buscáis la imagen

Repetimos en la 3ª celda

Ponemos el cursor en el centro y escribimos otra vez la x, esto es solo para que nos sirva de guía, ya la quitaremos después.
Vamos a poner bordes a estas barras, de momento los ponemos por los 4 lados,
si mas adelante nos sobra alguno en propiedades de celda rectificamos

Hacemos esta operación en las dos celdas 1ª y 3ª

Ya tenemos bordes puestos

Fijaros donde pongo la flecha, se nos quedo la tabla pegada a la barra,

 vamos a crear un espacio entre las dos, poner el cursor donde señalo

Vamos a vista código

veréis donde parpadea el cursor

copiáis lo que esta seleccionado en la captura

y lo pegáis debajo de </table>

volver a vista diseño, ya tenemos un espacio creado, en la captura se ve moradito porque esta seleccionado

Lo ideal seria haber creado este espacio al principio antes de insertar la tabla, pero es una forma de ir trasteando códigos
y de pasada por si os sucede, saber como solucionarlo a veces pasa y cuesta mucho separar las tablas

Ahora para que no se pierda este espacio vamos a insertar una línea horizontal, si mas adelante no gusta ya se quitara,
estas líneas quedan muy bonitas como separadores, para usarlas en cualquier parte de la Web

Vamos a Tabla / Insertar / Tabla

Filas / 1
Columnas / 1
Ancho en pixeles 400
Margen de celdas / 0
Espaciado entre celdas / 0

ponemos el cursor dentro de esa tabla y vamos a

Nos saldrá la línea que veis sombreada en la captura, botón derecho, Propiedades de línea horizontal

Aquí modificamos, Ancho y Alto ( no olvidéis marcar en píxeles )
en Estilo... Formato / Borde podéis modificar la línea, yo puse punteado, color el mio claro, y ancho / 1

 

Nos quedara un espacio así, poner el cursor donde señalo y retroceder un espacio con el teclado

Nos debe de quedar así

Vamos a Vista previa

Espero que todo haya ido bien

Vista subida al dominio Aquí