SlideShare una empresa de Scribd logo
1 de 17
DISEÑO DE PAGINAS WEB ISABEL LAFUENTE
OBJETIVOS Conocer la estructura básica de un sitio web utilizándola para crear nuestro propio sitio web Utilizar el vocabulario técnico adecuado para denominar los diferentes elementos (hipertexto, hipervínculo, código html, FTP, etc) Diseñar un sitio web en el cual se integren todos los elementos utilizando el programa adecuado Dreamweaver, Front Page, etc..
CONTENIDOS Estructura de los sitios web: Arból de carpetas Estructura de las páginas web Diseño de nuestro propio tema : Código HTML, etiquetas, elementos multimedia, marquesinas, etc.. El texto Las imágenes El tema Los elementos: Botones, marquesinas Los hipervínculos Subir un sitio web a la red: FTP.
DESARROLLO DE LOS CONTENIDOS El diseño de páginas WEB ha evolucionados en los últimos años. Se diferencian entre dominios y páginas personales. Los dominios precisan pagar una pequeña cuota y pueden ser utilizados con fines comerciales Las páginas personales son gratuítas y hoy han evolucionado a los blogs o vitacóras que a su vez se han incorporado a las redes sociales.
EL ÁRBOL DE CARPETAS. Para crear un sitio web deberemos tener primero la información adecuada. Por ello, se van a construir sitios web en donde se explique cómo se construye un blog y como se incorpora a una red social Los editores de página WEB son muy diferentes pero nosotros vamos a utilizar DREAMWEAVER.
DREAMWEAVER Primero hay que crear una árbol de carpeta en donde introduzcamos todos los archivos precisos Entre dichos archivos destacan las imágenes, botones, documentos, etc. Una vez que se tengan los elementos se comienza por diseñar el tema de nuestro sitio WEB, o bien se elige desde una de las plantillas que ofrece Dreamweaver o el programa que se utilice como editor.
DREAMWEAVER
DREAMWEAVER
DISEÑO DE NUESTRO TEMA Son elementos esenciales el encabezado y numeración de las páginas El número de páginas que tendrá nuestro sitio WEB El fondo y la organización de hipervínculos entre . No se debe olvidar que el portal es siempre index El uso de marcos es optativo.
EL TEMA
CONSTRUCCIÓN DEL SITIO WEB Una vez creado el tema se copia el número de veces que se crea necesario (el número de hojas que tenga el sitio WEB) Después se rellenan las hojas siguiendo las indicaciones de construcción de documentos. El tipo de fuente, su tamaño y su color Se introducen las imágenes que se crean pertinentes.
INSERCIÓN DE ELEMENTOS Son elementos claves de los sitios WEB Botones Marquesinas Marcadores Animaciones flash
LOS HIPERVÍNCULOS Los sitios WEB deben configurarse de forma relacional a excepción de index que debe estar comunicado con todos de forma jerarquica Los hipervínculos pueden ser  Internos entre páginas del propio sitio Externos con páginas externas al sitio Con el correo electrónico
SUBIR EL SITIO A LA RED Se debe buscar un host o contratar un dominio en donde se nos proporcionará una dirección de FTP La dirección de FTP nos permite configurar el FTP de Dreamweaver, o el programa de FTP que se utilice para ello Se utiliza el nombre de usuario y la contraseña para subir la página con dicha aplicación Y sólo tenemos que ir a la página que nuestro host nos ha proporcionado.
EL FTP
EVALUACIÓN Diseñar un sitio WEB en donde se explique qué es un blog y para que se puede utilizar Utilizar el DREAMWEAVER para crear el sitio WEB construido Subir dicho sitio WEB a una página personal, para lo cual se utilizará un programa FTP.

Más contenido relacionado

La actualidad más candente

Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
tomyycerr
 

La actualidad más candente (16)

1Minutesite Tutorial guia Paso a paso
1Minutesite Tutorial guia Paso a paso1Minutesite Tutorial guia Paso a paso
1Minutesite Tutorial guia Paso a paso
 
Mi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notasMi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notas
 
DiseñO Web
DiseñO WebDiseñO Web
DiseñO Web
 
El Slideshare
El SlideshareEl Slideshare
El Slideshare
 
Pasos para crear paginas web
Pasos para crear paginas webPasos para crear paginas web
Pasos para crear paginas web
 
Pasos para crear una pagina web
Pasos para crear una pagina webPasos para crear una pagina web
Pasos para crear una pagina web
 
Informe
InformeInforme
Informe
 
Conceptos Basicos de Html
Conceptos Basicos de HtmlConceptos Basicos de Html
Conceptos Basicos de Html
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Como Crear Paginas Web
Como Crear Paginas WebComo Crear Paginas Web
Como Crear Paginas Web
 
Curso html-dreamweaver-basico
Curso html-dreamweaver-basicoCurso html-dreamweaver-basico
Curso html-dreamweaver-basico
 
Guía paso a paso para crear una página web
Guía paso a paso para crear una página webGuía paso a paso para crear una página web
Guía paso a paso para crear una página web
 
Ejemplos paginas html
Ejemplos paginas htmlEjemplos paginas html
Ejemplos paginas html
 
Programacion web
Programacion webProgramacion web
Programacion web
 
Pasos para crear un sitio web
Pasos para crear un sitio webPasos para crear un sitio web
Pasos para crear un sitio web
 
Página Web
Página WebPágina Web
Página Web
 

Destacado

Destacado (8)

Clase1 intro
Clase1 introClase1 intro
Clase1 intro
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
Diseño de páginas web
Diseño de páginas webDiseño de páginas web
Diseño de páginas web
 
Introduccion a la plataforma .NET
Introduccion a la plataforma .NETIntroduccion a la plataforma .NET
Introduccion a la plataforma .NET
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTML
 
Visual Basic .NET
Visual Basic .NETVisual Basic .NET
Visual Basic .NET
 
Entorno de desarrollo integrado de Visual Basic .NET
Entorno de desarrollo integrado de Visual Basic .NETEntorno de desarrollo integrado de Visual Basic .NET
Entorno de desarrollo integrado de Visual Basic .NET
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 

Similar a Diseño de paginas web

Manual actiweb (equipo)
Manual actiweb (equipo)Manual actiweb (equipo)
Manual actiweb (equipo)
Peluchin Jeje
 
Mi primera pagina_web[1]
Mi primera pagina_web[1]Mi primera pagina_web[1]
Mi primera pagina_web[1]
estaseylugo1992
 

Similar a Diseño de paginas web (20)

Manual actiweb (equipo)
Manual actiweb (equipo)Manual actiweb (equipo)
Manual actiweb (equipo)
 
DiseñO Web
DiseñO WebDiseñO Web
DiseñO Web
 
Unidad II
Unidad IIUnidad II
Unidad II
 
Páginas web actividad uno (2)
Páginas web actividad uno (2)Páginas web actividad uno (2)
Páginas web actividad uno (2)
 
Clase Edicion de Sitios Web - TGD 31/05/11
Clase Edicion de Sitios Web - TGD 31/05/11Clase Edicion de Sitios Web - TGD 31/05/11
Clase Edicion de Sitios Web - TGD 31/05/11
 
Presentación1
Presentación1Presentación1
Presentación1
 
Freewebs
FreewebsFreewebs
Freewebs
 
Free webs go
Free webs go  Free webs go
Free webs go
 
Diseño pagina web- html
Diseño pagina web- html Diseño pagina web- html
Diseño pagina web- html
 
Diseño web
Diseño webDiseño web
Diseño web
 
Mi primera pagina_web[1]
Mi primera pagina_web[1]Mi primera pagina_web[1]
Mi primera pagina_web[1]
 
Paginas web
Paginas webPaginas web
Paginas web
 
Recursos web
Recursos webRecursos web
Recursos web
 
Introducción Diseño Web
Introducción Diseño WebIntroducción Diseño Web
Introducción Diseño Web
 
Paginas web
Paginas webPaginas web
Paginas web
 
HTML 5
HTML 5HTML 5
HTML 5
 
Pagina web y cazatesoro 2013
Pagina web y cazatesoro 2013Pagina web y cazatesoro 2013
Pagina web y cazatesoro 2013
 
1 introduccion a dreamweaver
1 introduccion a dreamweaver1 introduccion a dreamweaver
1 introduccion a dreamweaver
 
Paginas web
Paginas webPaginas web
Paginas web
 
DESARROLLO DE APLICACIONES WEB.pdf
DESARROLLO DE APLICACIONES WEB.pdfDESARROLLO DE APLICACIONES WEB.pdf
DESARROLLO DE APLICACIONES WEB.pdf
 

Más de isabellafuente

Herramientas tic para cálculos matemáticos
Herramientas tic para cálculos matemáticosHerramientas tic para cálculos matemáticos
Herramientas tic para cálculos matemáticos
isabellafuente
 

Más de isabellafuente (20)

St patrick`s day
St patrick`s daySt patrick`s day
St patrick`s day
 
St patrick`s day
St patrick`s daySt patrick`s day
St patrick`s day
 
Dibujo1º
Dibujo1ºDibujo1º
Dibujo1º
 
Reunión de padres
Reunión de padresReunión de padres
Reunión de padres
 
Robomind
RobomindRobomind
Robomind
 
El puente
El puenteEl puente
El puente
 
El faro
El faroEl faro
El faro
 
El sonido
El sonidoEl sonido
El sonido
 
Redes de ordenadores
Redes de ordenadoresRedes de ordenadores
Redes de ordenadores
 
Sistemas Operativos
Sistemas OperativosSistemas Operativos
Sistemas Operativos
 
Introducción a la informática
Introducción a la informáticaIntroducción a la informática
Introducción a la informática
 
Herramientas tic para cálculos matemáticos
Herramientas tic para cálculos matemáticosHerramientas tic para cálculos matemáticos
Herramientas tic para cálculos matemáticos
 
Herramientas tic para cálculos matemáticos
Herramientas tic para cálculos matemáticosHerramientas tic para cálculos matemáticos
Herramientas tic para cálculos matemáticos
 
Herramientas tic para cálculos matemáticos
Herramientas tic para cálculos matemáticosHerramientas tic para cálculos matemáticos
Herramientas tic para cálculos matemáticos
 
Herramientas tic para cálculos matemáticos
Herramientas tic para cálculos matemáticosHerramientas tic para cálculos matemáticos
Herramientas tic para cálculos matemáticos
 
Blog
BlogBlog
Blog
 
Blog
BlogBlog
Blog
 
Robolab
RobolabRobolab
Robolab
 
Diseño2
Diseño2Diseño2
Diseño2
 
Autocad
AutocadAutocad
Autocad
 

Último

🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
EliaHernndez7
 

Último (20)

Posición astronómica y geográfica de Europa.pptx
Posición astronómica y geográfica de Europa.pptxPosición astronómica y geográfica de Europa.pptx
Posición astronómica y geográfica de Europa.pptx
 
Usos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicasUsos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicas
 
La Evaluacion Formativa SM6 Ccesa007.pdf
La Evaluacion Formativa SM6  Ccesa007.pdfLa Evaluacion Formativa SM6  Ccesa007.pdf
La Evaluacion Formativa SM6 Ccesa007.pdf
 
Actividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docxActividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docx
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
Power Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptxPower Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptx
 
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdfPlan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 
AEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptxAEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptx
 
Código Civil de la República Bolivariana de Venezuela
Código Civil de la República Bolivariana de VenezuelaCódigo Civil de la República Bolivariana de Venezuela
Código Civil de la República Bolivariana de Venezuela
 
Lecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigosLecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigos
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Supuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docxSupuestos_prácticos_funciones.docx
Supuestos_prácticos_funciones.docx
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
 
activ4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdfactiv4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdf
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
Louis Jean François Lagrenée. Erotismo y sensualidad. El erotismo en la Hist...
Louis Jean François Lagrenée.  Erotismo y sensualidad. El erotismo en la Hist...Louis Jean François Lagrenée.  Erotismo y sensualidad. El erotismo en la Hist...
Louis Jean François Lagrenée. Erotismo y sensualidad. El erotismo en la Hist...
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 

Diseño de paginas web

  • 1. DISEÑO DE PAGINAS WEB ISABEL LAFUENTE
  • 2. OBJETIVOS Conocer la estructura básica de un sitio web utilizándola para crear nuestro propio sitio web Utilizar el vocabulario técnico adecuado para denominar los diferentes elementos (hipertexto, hipervínculo, código html, FTP, etc) Diseñar un sitio web en el cual se integren todos los elementos utilizando el programa adecuado Dreamweaver, Front Page, etc..
  • 3. CONTENIDOS Estructura de los sitios web: Arból de carpetas Estructura de las páginas web Diseño de nuestro propio tema : Código HTML, etiquetas, elementos multimedia, marquesinas, etc.. El texto Las imágenes El tema Los elementos: Botones, marquesinas Los hipervínculos Subir un sitio web a la red: FTP.
  • 4. DESARROLLO DE LOS CONTENIDOS El diseño de páginas WEB ha evolucionados en los últimos años. Se diferencian entre dominios y páginas personales. Los dominios precisan pagar una pequeña cuota y pueden ser utilizados con fines comerciales Las páginas personales son gratuítas y hoy han evolucionado a los blogs o vitacóras que a su vez se han incorporado a las redes sociales.
  • 5. EL ÁRBOL DE CARPETAS. Para crear un sitio web deberemos tener primero la información adecuada. Por ello, se van a construir sitios web en donde se explique cómo se construye un blog y como se incorpora a una red social Los editores de página WEB son muy diferentes pero nosotros vamos a utilizar DREAMWEAVER.
  • 6. DREAMWEAVER Primero hay que crear una árbol de carpeta en donde introduzcamos todos los archivos precisos Entre dichos archivos destacan las imágenes, botones, documentos, etc. Una vez que se tengan los elementos se comienza por diseñar el tema de nuestro sitio WEB, o bien se elige desde una de las plantillas que ofrece Dreamweaver o el programa que se utilice como editor.
  • 9. DISEÑO DE NUESTRO TEMA Son elementos esenciales el encabezado y numeración de las páginas El número de páginas que tendrá nuestro sitio WEB El fondo y la organización de hipervínculos entre . No se debe olvidar que el portal es siempre index El uso de marcos es optativo.
  • 11. CONSTRUCCIÓN DEL SITIO WEB Una vez creado el tema se copia el número de veces que se crea necesario (el número de hojas que tenga el sitio WEB) Después se rellenan las hojas siguiendo las indicaciones de construcción de documentos. El tipo de fuente, su tamaño y su color Se introducen las imágenes que se crean pertinentes.
  • 12. INSERCIÓN DE ELEMENTOS Son elementos claves de los sitios WEB Botones Marquesinas Marcadores Animaciones flash
  • 13. LOS HIPERVÍNCULOS Los sitios WEB deben configurarse de forma relacional a excepción de index que debe estar comunicado con todos de forma jerarquica Los hipervínculos pueden ser Internos entre páginas del propio sitio Externos con páginas externas al sitio Con el correo electrónico
  • 14.
  • 15. SUBIR EL SITIO A LA RED Se debe buscar un host o contratar un dominio en donde se nos proporcionará una dirección de FTP La dirección de FTP nos permite configurar el FTP de Dreamweaver, o el programa de FTP que se utilice para ello Se utiliza el nombre de usuario y la contraseña para subir la página con dicha aplicación Y sólo tenemos que ir a la página que nuestro host nos ha proporcionado.
  • 17. EVALUACIÓN Diseñar un sitio WEB en donde se explique qué es un blog y para que se puede utilizar Utilizar el DREAMWEAVER para crear el sitio WEB construido Subir dicho sitio WEB a una página personal, para lo cual se utilizará un programa FTP.