Tecnología

Inicio

Cómo hacer una barra lateral derecha y la izquierda en una plantilla utilizada en Dreamweaver

Puede cambiar el diseño de su sitio web en Dreamweaver mediante la inserción de nuevos "<div>" etiquetas que añaden un derecho y barra lateral izquierda a la plantilla existente. Esta funcionalidad le permite insertar secciones a su página existente sin alterar el contenido existente. Una vez que haya añadido una barra lateral a la izquierda y una barra lateral a la derecha, la plantilla ya existente se mostrará como una columna completa en el centro de su diseño.

Instrucciones

1 Lanzar Adobe Dreamweaver CS5.5.

2 Haga clic en "Archivo" en la parte superior de la ventana, haga clic en "Open", haga doble clic en la plantilla que desea editar.

3 Haga clic en el botón "Split" en la esquina superior izquierda de la ventana. Esta mostrará la plantilla en la sección "Diseño" en la parte derecha de la ventana, al tiempo que muestra simultáneamente el código HTML de la plantilla en la sección "Código" en el lado izquierdo de la ventana.

4 Haga clic en cualquier lugar dentro de la sección "Diseño" en la parte derecha de la ventana.

5 Busque la barra horizontal en la parte inferior de la ventana que se inicia con la etiqueta "<body>", a continuación, haga clic en la etiqueta "<div>" directamente a la derecha de la misma. Por ejemplo, si la barra horizontal muestra el mensaje "<body> <div.container>", debe hacer clic en "<div.container>". Esto pondrá de relieve toda la "<div>" en la sección "Código" de la ventana.

6 Haga clic dentro de la etiqueta "<div>" en la parte superior del texto resaltado.

7 Añadir "style =" float: left; ". A la etiqueta Por ejemplo, si se está trabajando con un" <div> "con" class = "contenedor" "código, a continuación, la completa" <div> "etiqueta sería" <div class = estilo de "contenedor" = "float: left;"> ".

8 Haga clic en la etiqueta "<div>" en la barra horizontal en la parte inferior de la ventana de nuevo, a continuación, haga clic sobre el texto resaltado en la sección "Código" de la ventana.

9 Tipo "<div id ="-barra lateral izquierda "style =" float: left;> Su contenido aquí </ div> "Reemplazar" Su contenido aquí "con la información que desea incluir en la barra lateral izquierda..

10 Haga clic en la pestaña "<div>" en la barra horizontal en la parte inferior de la ventana de nuevo, a continuación, haga clic directamente debajo del texto resaltado dentro de la sección "Código" de la ventana.

11 Tipo "<div id =" "style =" derecha barra lateral float: left; "> Su contenido aquí </ div>". Reemplazar "Su contenido aquí" con la información que desea incluir en la barra lateral derecha.

12 Haga clic en "Archivo" en la parte superior de la ventana, haga clic en "Guardar" para guardar los cambios.

Consejos y advertencias

  • Si la plantilla se diseñó previamente para adaptarse a una determinada resolución de la pantalla, es posible que tenga que modificar el ancho de la "<div>" recipiente que previamente ayudar a la totalidad de su contenido. Esta propiedad se puede encontrar en la sección "<head>" de la plantilla, o en un archivo CSS adjunto.