SlideShare una empresa de Scribd logo
1 de 3
Descargar para leer sin conexión
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 (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 (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

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 BlendSorey 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
 
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 ComercioMariLu 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 dreamweaverMena75
 
Ventana dreamweaver
Ventana dreamweaverVentana dreamweaver
Ventana dreamweaverangimelli
 
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

Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...JaquelineJuarez15
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELmaryfer27m
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxazmysanros90
 
ejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sofejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sofJuancarlosHuertasNio1
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...FacuMeza2
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptMiguelAtencio10
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaarkananubis
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersIván López Martín
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativaAdrianaMartnez618894
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxJOSEMANUELHERNANDEZH11
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 

Último (20)

Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
El gusano informático Morris (1988) - Julio Ardita (1995) - Citizenfour (2014...
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFEL
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptx
 
ejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sofejercicios pseint para aprogramacion sof
ejercicios pseint para aprogramacion sof
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
ATAJOS DE WINDOWS. Los diferentes atajos para utilizar en windows y ser más e...
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.ppt
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en mina
 
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 TestcontainersSalmorejoTech 2024 - Spring Boot <3 Testcontainers
SalmorejoTech 2024 - Spring Boot <3 Testcontainers
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativa
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 

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