Cómo crear una barra lateral izquierda y derecha en una plantilla ya existente en Dreamweaver

Escrito por matthew burley | Traducido por maria della cella figueredo
  • Comparte
  • Twittea
  • Comparte
  • E-mail

Puedes cambiar la distribución de tu sitio web en Dreamweaver insertando etiquetas nuevas "<div>" que agregan una barra lateral a la izquierda y a la derecha de tu plantilla existente. Esta funcionalidad te permite insertar secciones a tu página existente sin tener que afectar al contenido existente. Una vez que hayas agregado una barra lateral a la izquierda y otra hacia la derecha, la plantilla ya existente se visualizará como una columna completa en el centro de tu diseño.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Ejecuta Adobe Dreamweaver CS5.5.

  2. 2

    Haz clic en "Archivo" en la parte superior de la ventana, haz clic en "Abrir" y luego haz doble clic en la plantilla que deseas editar.

  3. 3

    Haz clic en el botón "Dividir" en el margen superior izquierdo de la ventana. Esto visualizará tu plantilla en la sección "Diseño" en el lateral derecho de la ventana, mientras que se visualiza el código HTML en simultáneo para la plantilla en la sección "Código" en la barra izquierda de la ventana.

  4. 4

    Haz clic en cualquier lugar dentro de la sección "Diseño" en el lateral derecho de la ventana.

  5. 5

    Ubica la barra horizontal en la parte inferior de la ventana que comienza con la etiqueta "<body>", luego haz clic en "<div>" directamente hacia la derecha de la última. Por ejemplo, si la barra horizontal visualiza "<body><div.container>", harías clic en "<div.container>". Esto destacaría "<div>" por completo en la sección de "Código" de la ventana.

  6. 6

    Haz clic en el interior de la etiqueta "<div>" en la parte superior del texto seleccionado.

  7. 7

    Agrega "style="float:left" a la etiqueta. Por ejemplo, si trabajas con una "<div>" con código "class="container"", entonces la etiqueta completa "<div>" sería "<div class="container" style="float:left;">".

  8. 8

    Haz clic en "<div>" en la barra horizontal en la parte inferior de la ventana otra vez, luego haz clic por encima del texto seleccionado en la sección "Código" de la ventana.

  9. 9

    Escribe "<div id="left-sidebar" style="float:left;>Your Content Here</div>". Reemplaza "Your Content Here" con la información que deseas incluir en la barra lateral izquierda.

  10. 10

    Haz clic en "<div>" en la barra horizontal en la parte inferior de la ventana otra vez, luego haz clic directamente debajo del texto seleccionado dentro de la sección "Código" de la ventana.

  11. 11

    Escribe "<div id="right-sidebar" style="float:left;">Your Content Here</div>". Reemplaza "Your Content Here" con la información que deseas incluir en la barra lateral derecha.

  12. 12

    Haz clic en "Archivo" en la parte superior de la ventana, luego haz clic en "Guardar" para guardar los cambios.

Consejos y advertencias

  • Si tu plantilla ya estaba diseñada para ajustarse a cierta resolución de pantalla, es posible que tengas que modificar el ancho de "" que previamente ayudó a todo el contenido. Esta propiedad se puede encontrar en la sección "" de tu plantilla, o en un archivo CSS adjunto.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles