Como ves, dentro de los estilos buscamos sidebar1 que es el que corresponde a esta zona, y hacemos doble clic para abrirlo:

Por ejemplo, en el apartado "Cuadro" le cambiamos el ancho de 180 px. por 250px., y en "Float" a la izquierda left. Además fíjate en los valores que colocaremos en los apartados "Padding" y en "Margin" (teniendo en cuenta que "Top"=arriba; "Right"=derecha; "Bottom"=abajo; y "Left"=izquierda).
Vamos ahora a "Fondo":

Y le quitamos el color de fondo (lo seleccionamos y clic en <Supr>) para que quede blanco (ver imagen de arriba). Finalmente vamos a "Borde":

Aquí es fácil aplicar un borde, pues simplemente elegimos en "Style": "dashed" o bien "dotted", o "solid" (o lo que es lo mismo, guiones, punteado o bien línea continua), luego en "Width" el ancho del borde, que lo ponemos en 1 píxel, y por último en "Color" le aplicamos uno a ese borde. Si hacemos clic ahora sobre los botones de abajo a la derecha, Aplicar y Aceptar, veremos que se muestra así:

Evidentemente, a primera vista tiene un aspecto un poco pobre esa parte izquierda "sidebar", pero no te preocupes porque poco a poco iremos dando forma a nuestra página hasta dejarla con una apariencia muy interesante, ya lo verás. Si eres observador, te habrás dado cuenta también que el texto que había a la derecha de este "sidebar", se ha ido hacia abajo, quedando un gran hueco vacío en la parte derecha..., ¿qué ha pasado?, pues es simple: al hacer el "sidebar" más ancho (de 180 a 250), ha empujado el bloque de texto hacia abajo, pues la suma del ancho de ambos bloques, supera al ancho total del cuerpo de la página ¿comprendido?; esto lo solucionaremos rápidamente.
Seguiremos en próximas lecciones.
Desde este botón azul de abajo puedes subir al menú con las lecciones del curso.
Llamamos sidebar a esa parte lateral de la página en la que suele colocarse un menú, y que suele estar en la parte izquierda o derecha de dicha página, a voluntad.

