deseoaprender.com
Aprende Dreamweaver CS5 online, curso gratis
Si quieres aprender a crear una web con Dreamweaver CS5, te ofrezco este curso gratis..., aprenderás muy fácil   │  ** Para facilitarte tu regreso, añade este sitio a tus Favoritos
No olvides que además de este curso, tienes otros varios que seguramente pueden interesarte. Mira el menú (apartado "Otros cursos publicados...").
Manual en línea de Adobe Dreamweaver CS5.5 y estilos CSS: el menú en "sidebar"
  
dreamweaver CS5.5

01. Presentación del curso DW-CS5.
02. Conociendo el Panel de trabajo.
03. Hay que crear un nuevo sitio.
04. Ahora vemos como crear archivo.
05. Tus preferencias de trabajo.
06. Aprender a usar las vistas.
07. Nuestro trabajo, en los navegadores.
08. Conoce la barra de propiedades.
09. Crear la cabecera con Photoshop.
10. Completamos cabecera o "header".
11. Guardando nuestro trabajo.
12. Configurar el título de la cabecera.
13. Y ahora, configuramos subtítulo.
14. Si queremos cambiar color de título.
15. Cambios en el "body" - CSS.
16. Y cambios en el "container" - CSS.
17. Colocamos una barrita en la página.
18. Un título, y su configuración.
19. Usando el "sidebar-1" - CSStutorial dreamweaver
20. Añadiendo un bloque mediante CSS.
21. Otro bloque, para colocar texto.
22. El "footer" o pié de página - CSS.
23. Contenido en uno de los bloques.
24. Y texto en el otro bloque creado.
25. Insertando contenido en página.
26. Insertando contenido en página (2).
27. Ahora aplicamos formato al texto.
28. Creamos un menú muy sencillo.
29. Los hipervínculos o "links".
30. Los hipervínculos o "links" (2).
31. Creamos una regla para texto.
32. Manejando "anclas" para vínculos.
33. Menú desplegable con SPRY.
34. Menú desplegable con SPRY (2).

Dreamweaver CS5.5

Ofimática: Word 2007.
Ofimática: Excel 2007.
Ofimática: Access 2010.
Ofimática: Power Point 2007.
Outlook 2010; correo electrónico.
Internet básico para principiante.
Informática básica para novato.
WordPress - Joomla 1.5 - Blogger.
 manual en linea Dreamweaver CS5.5  Ir a la página principal de esta web.

curso dreamweaver cs5      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.
     Como cualquier parte de una página, es muy personal la forma que cada uno quiera dar a ese "sidebar", pero como hay que decidirse por una forma para el ejercicio de esta lección, yo voy a optar por una forma cualquiera, que más adelante --cuando hayas aprendido a manejarlo-- tú podrás transformar fácil... Se trata pues de que observer la forma tan sencilla con la que podemos modificar el sidebar por defecto.

¡DE QUÉ ESTAMOS HABLANDO?.

       Al hablar del sidebar, me refiero concretamente a esta parte en la izquierda de la página::

aprender dreamweaver cs5

       Si hacemos clic en la pestaña "Dividir" veremos en el código que se trata sencillamente de una "lista ordenada" de datos con unos vínculos --estilo menú--. Fíjate que si seleccionamos esos cuatro apartados del menú, verás como en el código HTML, queda seleccionado lo siguiente:

el sidebar en una página; modificarlo

     En mi caso, para el ejemplo voy a eliminar ese menú (pues verás en otra lección cómo preparamos otro más personal, aunque podrías dejarlo si quisieras), para ello simplemente selecciono el código HTML --que verás comienza por <ul class="nav"> y termina por </ul>. Pulsamos la tecla <Supr> y desaparecerá.
     Quedará entonces solamente el texto de ese sidebar... Lo que haremos ahora será dotar a esa parte del sidebar, de un borde para que destaque en la página. Para ello vamos a estilos CSS:

curso online de Dreamweaver CS5 en español

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

manual en línea de Dreamweaver CS5 gratis       curso gratis en línea para webmaster

     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":

aprender Dreamweaver CS5 como en primero

     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":

aprender fácil Dreamweaver CS5

     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í:

curso online de Dreamweaver CS5 fácil

      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.

  
subir
Hemos recibido ya la visita de:

usuarios.