SlideShare una empresa de Scribd logo
Lic. María Teresa Restrepo Guzman
ESTRUCTURAR UNA PÁGINA DESDE DREAMWEAVER
Es importante tener organizada la información que debe contener el documento o página web
1. BASE
a) Cabecera
Logotipo
Banner
b) Menú Horizontal
c) Contenedor
Menú lateral
Cuerpo
Publicidad
d) Pie de página
Para trabajar dicha organización con Dreamweaver se deberá
1. Tener un sitio Creado para ello
2. Un nuevo documento HTML guardado con el nombre INDEX
3. Otro nuevo documento pero de tipo CSS y guardado como estilos
4. La opción estilos se refiere a ciertos diseños que se pueden predeterminar para cambiar el formato del
documento
Es necesario vincular los dos archivos creados anteriormente; para ello
Ubíquese nuevamente en el documento html
Se debe tener activo el panel de estilos
Lic. María Teresa Restrepo Guzman
En el panel que se activa, buscar vincular
De clic en examinar y seleccione el archivo estilos
Los archivos quedan vinculados para mejorar fuentes y formatos de presentación
5. Ahora se realizarán las divisiones necesarias para lograr organizar la página
6. En el panel de la derecha se encuentra el bloque Insertar, de clic sostenido para habilitar otras
opciones
7. Ubique el cursor en el lugar donde se va a realizar la primera división y Seleccione insertar etiqueta Div
8. En la ventana que aparece asigne el nombre de Base al espacio ID
9. Notará que se crea un espacio bordeado y el código necesario para esto
10. De clic al final del texto y oprima Enter para crear la división dentro de la misma
11. Cree la división con el ID cabecera y quedará dentro del marco base.
Lic. María Teresa Restrepo Guzman
12. La tercera división se llama menú_horizintal debajo de cabecera
13. Realice las divisiones necesarias para lograr:
Tenga en cuenta que la ubicación de las divisiones permite organizar la página según la estructura
indicada desde el comienzo
14. Ubíquese al lado de la cabecera, allí deberá estar el logo y el banner
15. En el contenedor se encuentra el menú lateral, el cuerpo y la publicidad
16. Se debe comprar las divisiones haciendo clic desde el código fuente y revisar que cada división
seleccione el identificador (ID) adecuado. Ej:
Al dar clic a la cabecera. Se seleccionará cabecera, logo y banner
17. Guarde los cambios

Más contenido relacionado

La actualidad más candente

Funciones de registro
Funciones de registroFunciones de registro
Funciones de registro
Mayra Alejandra Arcila Valencia
 
Entorno de visual foxpro
Entorno de visual foxproEntorno de visual foxpro
Entorno de visual foxproxxvackerdark95
 
Cuestionario info 7 grado
Cuestionario info 7 gradoCuestionario info 7 grado
Cuestionario info 7 grado
Inmaculada Concepción
 
Tutorial página web
Tutorial página webTutorial página web
Tutorial página web
Christian Carrera
 
Cuestionario 8 grado
Cuestionario 8 gradoCuestionario 8 grado
Cuestionario 8 grado
Inmaculada Concepción
 
Inf 1 (instalación de visual studio code)
Inf 1 (instalación de visual studio code) Inf 1 (instalación de visual studio code)
Inf 1 (instalación de visual studio code)
Carlos Guzmán
 
Inf 8 (tablas eliseth)
Inf 8 (tablas eliseth)Inf 8 (tablas eliseth)
Inf 8 (tablas eliseth)
Carlos Guzmán
 
Informe 6
Informe 6Informe 6
Informe 6
OliverGuaman1
 
Dn11 u3 a4_avd
Dn11 u3 a4_avdDn11 u3 a4_avd
Dn11 u3 a4_avd
arturo-22
 
El patos
El patosEl patos
El patos
Rocnar
 
Inf 20 (fpdf)
Inf 20 (fpdf)Inf 20 (fpdf)
Inf 20 (fpdf)
Carlos Guzmán
 
LA BUSQUEDA
LA BUSQUEDALA BUSQUEDA
LA BUSQUEDA
marlenehiguera1
 

La actualidad más candente (15)

Eiquetas
EiquetasEiquetas
Eiquetas
 
Funciones de registro
Funciones de registroFunciones de registro
Funciones de registro
 
Entorno de visual foxpro
Entorno de visual foxproEntorno de visual foxpro
Entorno de visual foxpro
 
Cuestionario info 7 grado
Cuestionario info 7 gradoCuestionario info 7 grado
Cuestionario info 7 grado
 
Tutorial página web
Tutorial página webTutorial página web
Tutorial página web
 
Cuestionario 8 grado
Cuestionario 8 gradoCuestionario 8 grado
Cuestionario 8 grado
 
Gili
GiliGili
Gili
 
Inf 1 (instalación de visual studio code)
Inf 1 (instalación de visual studio code) Inf 1 (instalación de visual studio code)
Inf 1 (instalación de visual studio code)
 
Inf 8 (tablas eliseth)
Inf 8 (tablas eliseth)Inf 8 (tablas eliseth)
Inf 8 (tablas eliseth)
 
Visual fox pro 6.0
Visual fox pro 6.0Visual fox pro 6.0
Visual fox pro 6.0
 
Informe 6
Informe 6Informe 6
Informe 6
 
Dn11 u3 a4_avd
Dn11 u3 a4_avdDn11 u3 a4_avd
Dn11 u3 a4_avd
 
El patos
El patosEl patos
El patos
 
Inf 20 (fpdf)
Inf 20 (fpdf)Inf 20 (fpdf)
Inf 20 (fpdf)
 
LA BUSQUEDA
LA BUSQUEDALA BUSQUEDA
LA BUSQUEDA
 

Destacado

MK resume 022417
MK resume 022417MK resume 022417
MK resume 022417
Michael Kunhenn
 
LÍQUIDOS Y ELECTROLÍTOS CORPORALES
LÍQUIDOS Y ELECTROLÍTOS CORPORALES LÍQUIDOS Y ELECTROLÍTOS CORPORALES
LÍQUIDOS Y ELECTROLÍTOS CORPORALES
JOSUE SANTANA
 
Caratula de historia
Caratula de historiaCaratula de historia
Caratula de historia
cintiazapanaquispe
 
Hybrid gente e historias
Hybrid gente e historiasHybrid gente e historias
Hybrid gente e historias
Jody Bowman
 
Indikator Standar Nasional Pendidikan
Indikator Standar Nasional PendidikanIndikator Standar Nasional Pendidikan
Indikator Standar Nasional Pendidikan
I Ketut Sukajaya, S.Pd., M.Pd
 
security of IOT
security of IOTsecurity of IOT
security of IOT
Yashar Esmaildokht
 
овідій
овідійовідій
овідій
SnezhanaP10
 
Mushroom Processing and Cooking Demo
Mushroom Processing and Cooking DemoMushroom Processing and Cooking Demo
Mushroom Processing and Cooking Demo
Bureau of Agricultural Research
 
The Connected Building Transformation
The Connected Building TransformationThe Connected Building Transformation
The Connected Building Transformation
Trane Commercial
 
Curso Dreamweaver CS6
Curso Dreamweaver CS6Curso Dreamweaver CS6
Curso Dreamweaver CS6
Daniel Olalde Soto
 

Destacado (10)

MK resume 022417
MK resume 022417MK resume 022417
MK resume 022417
 
LÍQUIDOS Y ELECTROLÍTOS CORPORALES
LÍQUIDOS Y ELECTROLÍTOS CORPORALES LÍQUIDOS Y ELECTROLÍTOS CORPORALES
LÍQUIDOS Y ELECTROLÍTOS CORPORALES
 
Caratula de historia
Caratula de historiaCaratula de historia
Caratula de historia
 
Hybrid gente e historias
Hybrid gente e historiasHybrid gente e historias
Hybrid gente e historias
 
Indikator Standar Nasional Pendidikan
Indikator Standar Nasional PendidikanIndikator Standar Nasional Pendidikan
Indikator Standar Nasional Pendidikan
 
security of IOT
security of IOTsecurity of IOT
security of IOT
 
овідій
овідійовідій
овідій
 
Mushroom Processing and Cooking Demo
Mushroom Processing and Cooking DemoMushroom Processing and Cooking Demo
Mushroom Processing and Cooking Demo
 
The Connected Building Transformation
The Connected Building TransformationThe Connected Building Transformation
The Connected Building Transformation
 
Curso Dreamweaver CS6
Curso Dreamweaver CS6Curso Dreamweaver CS6
Curso Dreamweaver CS6
 

Similar a Estructurar una pagina desde dreamweaver

Maquetación Web con Dreamweaver y Photoshop (1/2)
Maquetación Web con Dreamweaver y Photoshop (1/2)Maquetación Web con Dreamweaver y Photoshop (1/2)
Maquetación Web con Dreamweaver y Photoshop (1/2)
José Alberto García Gutiérrez
 
Manual Pagina web enword
Manual Pagina web enwordManual Pagina web enword
Manual Pagina web enword
Maura Varela Aparicio
 
Hands on Lab: Construyendo un lector RSS desde Visual Studio y Expression Blend
Hands on Lab: Construyendo un lector RSS desde Visual Studio y Expression BlendHands on Lab: Construyendo un lector RSS desde Visual Studio y Expression Blend
Hands on Lab: Construyendo un lector RSS desde Visual Studio y Expression Blend
Sorey García
 
Administracion del blog de wordpress 1
Administracion del blog de wordpress 1Administracion del blog de wordpress 1
Administracion del blog de wordpress 1dany_1997
 
Manual x d como hacer una página web en word
Manual x d como hacer una página web en wordManual x d como hacer una página web en word
Manual x d como hacer una página web en wordjesus lopez castillo
 
Manual dreamweaver CC
Manual dreamweaver CCManual dreamweaver CC
Manual dreamweaver CC
WILDER VILCAHUAMAN
 
Tutorial Stores Factory Sitio Web Y Comercio
Tutorial Stores Factory Sitio Web Y ComercioTutorial Stores Factory Sitio Web Y Comercio
Tutorial Stores Factory Sitio Web Y Comercio
MariLu Franco
 
Manual como hacer una pagina web en word
Manual como hacer una pagina web  en word Manual como hacer una pagina web  en word
Manual como hacer una pagina web en word Maura Varela Aparicio
 
Manual x d como hacer una página web en word
Manual x d como hacer una página web en wordManual x d como hacer una página web en word
Manual x d como hacer una página web en wordjesus lopez castillo
 
Manual x d como hacer una página web en word
Manual x d como hacer una página web en wordManual x d como hacer una página web en word
Manual x d como hacer una página web en wordjesus lopez castillo
 
Manual de dreamweaver
Manual de dreamweaverManual de dreamweaver
Manual de dreamweaver
Mena75
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
angimelli
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaverangimelli
 

Similar a Estructurar una pagina desde dreamweaver (20)

Maquetación Web con Dreamweaver y Photoshop (1/2)
Maquetación Web con Dreamweaver y Photoshop (1/2)Maquetación Web con Dreamweaver y Photoshop (1/2)
Maquetación Web con Dreamweaver y Photoshop (1/2)
 
Manual Pagina web enword
Manual Pagina web enwordManual Pagina web enword
Manual Pagina web enword
 
Manual x d listo
Manual x d listoManual x d listo
Manual x d listo
 
Manual x d listo
Manual x d listoManual x d listo
Manual x d listo
 
Manual x d
Manual x dManual x d
Manual x d
 
Manual x d
Manual x dManual x d
Manual x d
 
Hands on Lab: Construyendo un lector RSS desde Visual Studio y Expression Blend
Hands on Lab: Construyendo un lector RSS desde Visual Studio y Expression BlendHands on Lab: Construyendo un lector RSS desde Visual Studio y Expression Blend
Hands on Lab: Construyendo un lector RSS desde Visual Studio y Expression Blend
 
Manual x d
Manual x dManual x d
Manual x d
 
Administracion del blog de wordpress 1
Administracion del blog de wordpress 1Administracion del blog de wordpress 1
Administracion del blog de wordpress 1
 
Manual x d como hacer una página web en word
Manual x d como hacer una página web en wordManual x d como hacer una página web en word
Manual x d como hacer una página web en word
 
Manual dreamweaver CC
Manual dreamweaver CCManual dreamweaver CC
Manual dreamweaver CC
 
Manual de pagina web desde word
Manual de pagina web  desde wordManual de pagina web  desde word
Manual de pagina web desde word
 
Tutorial Stores Factory Sitio Web Y Comercio
Tutorial Stores Factory Sitio Web Y ComercioTutorial Stores Factory Sitio Web Y Comercio
Tutorial Stores Factory Sitio Web Y Comercio
 
Manual como hacer una pagina web en word
Manual como hacer una pagina web  en word Manual como hacer una pagina web  en word
Manual como hacer una pagina web en word
 
Manual x d como hacer una página web en word
Manual x d como hacer una página web en wordManual x d como hacer una página web en word
Manual x d como hacer una página web en word
 
Manual x d como hacer una página web en word
Manual x d como hacer una página web en wordManual x d como hacer una página web en word
Manual x d como hacer una página web en word
 
Manual de dreamweaver
Manual de dreamweaverManual de dreamweaver
Manual de dreamweaver
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaver
 

Último

Estructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdfEstructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdf
cristianrb0324
 
Actividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdfActividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdf
NajwaNimri1
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
AlejandraCasallas7
 
modelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptxmodelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptx
evelinglilibethpeafi
 
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB  S2. PARA VSATMANUAL DEL DECODIFICADOR DVB  S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
Ing. Julio Iván Mera Casas
 
Computacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajasComputacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajas
sofiahuarancabellido
 
Sitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajasSitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajas
paulroyal74
 
herramientas de sitio web 3.0 2024
herramientas de sitio web 3.0  2024herramientas de sitio web 3.0  2024
herramientas de sitio web 3.0 2024
julio05042006
 
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVATECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
LilibethEstupian
 
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
AMADO SALVADOR
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
ItsSofi
 
Trabajo tecnología sobre Conceptos Básicos De Programación
Trabajo tecnología sobre Conceptos Básicos De ProgramaciónTrabajo tecnología sobre Conceptos Básicos De Programación
Trabajo tecnología sobre Conceptos Básicos De Programación
SofiaCollazos
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
ValeriaAyala48
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
JimmyTejadaSalizar
 
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
sarasofiamontezuma
 
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
CesarPazosQuispe
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
cofferub
 
actividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañerosactividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañeros
aljitagallego
 
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTALINFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
CrystalRomero18
 
Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
coloradxmaria
 

Último (20)

Estructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdfEstructuras Básicas_Tecnología_Grado10-7.pdf
Estructuras Básicas_Tecnología_Grado10-7.pdf
 
Actividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdfActividad Conceptos básicos de programación.pdf
Actividad Conceptos básicos de programación.pdf
 
Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.Desarrollo de Habilidades de Pensamiento.
Desarrollo de Habilidades de Pensamiento.
 
modelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptxmodelosdeteclados-230114024527-aa2c9553.pptx
modelosdeteclados-230114024527-aa2c9553.pptx
 
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB  S2. PARA VSATMANUAL DEL DECODIFICADOR DVB  S2. PARA VSAT
MANUAL DEL DECODIFICADOR DVB S2. PARA VSAT
 
Computacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajasComputacion cuántica y sus ventajas y desventajas
Computacion cuántica y sus ventajas y desventajas
 
Sitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajasSitios web 3.0 funciones ventajas y desventajas
Sitios web 3.0 funciones ventajas y desventajas
 
herramientas de sitio web 3.0 2024
herramientas de sitio web 3.0  2024herramientas de sitio web 3.0  2024
herramientas de sitio web 3.0 2024
 
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVATECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
 
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
 
Estructuras básicas_ conceptos básicos de programación.pdf
Estructuras básicas_  conceptos básicos de programación.pdfEstructuras básicas_  conceptos básicos de programación.pdf
Estructuras básicas_ conceptos básicos de programación.pdf
 
Trabajo tecnología sobre Conceptos Básicos De Programación
Trabajo tecnología sobre Conceptos Básicos De ProgramaciónTrabajo tecnología sobre Conceptos Básicos De Programación
Trabajo tecnología sobre Conceptos Básicos De Programación
 
Conceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdfConceptos básicos de programación 10-5.pdf
Conceptos básicos de programación 10-5.pdf
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
 
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdfDESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
DESARROLLO DE HABILIDADES DE PENSAMIENTO.pdf
 
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
 
Conceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación ProyectoConceptos Básicos de Programación Proyecto
Conceptos Básicos de Programación Proyecto
 
actividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañerosactividad 2 tecnologia (3).pdf junto con mis compañeros
actividad 2 tecnologia (3).pdf junto con mis compañeros
 
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTALINFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
INFORME DE LAS FICHAS.docx.pdf LICEO DEPARTAMENTAL
 
Conceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. TecnologíaConceptos Básicos de Programación. Tecnología
Conceptos Básicos de Programación. Tecnología
 

Estructurar una pagina desde dreamweaver

  • 1. Lic. María Teresa Restrepo Guzman ESTRUCTURAR UNA PÁGINA DESDE DREAMWEAVER Es importante tener organizada la información que debe contener el documento o página web 1. BASE a) Cabecera Logotipo Banner b) Menú Horizontal c) Contenedor Menú lateral Cuerpo Publicidad d) Pie de página Para trabajar dicha organización con Dreamweaver se deberá 1. Tener un sitio Creado para ello 2. Un nuevo documento HTML guardado con el nombre INDEX 3. Otro nuevo documento pero de tipo CSS y guardado como estilos 4. La opción estilos se refiere a ciertos diseños que se pueden predeterminar para cambiar el formato del documento Es necesario vincular los dos archivos creados anteriormente; para ello Ubíquese nuevamente en el documento html Se debe tener activo el panel de estilos
  • 2. Lic. María Teresa Restrepo Guzman En el panel que se activa, buscar vincular De clic en examinar y seleccione el archivo estilos Los archivos quedan vinculados para mejorar fuentes y formatos de presentación 5. Ahora se realizarán las divisiones necesarias para lograr organizar la página 6. En el panel de la derecha se encuentra el bloque Insertar, de clic sostenido para habilitar otras opciones 7. Ubique el cursor en el lugar donde se va a realizar la primera división y Seleccione insertar etiqueta Div 8. En la ventana que aparece asigne el nombre de Base al espacio ID 9. Notará que se crea un espacio bordeado y el código necesario para esto 10. De clic al final del texto y oprima Enter para crear la división dentro de la misma 11. Cree la división con el ID cabecera y quedará dentro del marco base.
  • 3. Lic. María Teresa Restrepo Guzman 12. La tercera división se llama menú_horizintal debajo de cabecera 13. Realice las divisiones necesarias para lograr: Tenga en cuenta que la ubicación de las divisiones permite organizar la página según la estructura indicada desde el comienzo 14. Ubíquese al lado de la cabecera, allí deberá estar el logo y el banner 15. En el contenedor se encuentra el menú lateral, el cuerpo y la publicidad 16. Se debe comprar las divisiones haciendo clic desde el código fuente y revisar que cada división seleccione el identificador (ID) adecuado. Ej: Al dar clic a la cabecera. Se seleccionará cabecera, logo y banner 17. Guarde los cambios