1.diseño de páginas web

49
DISEÑO DE PÁGINAS WEB Microsoft FrontPage

Upload: guest23262e2

Post on 13-Jun-2015

330 views

Category:

Education


3 download

TRANSCRIPT

Page 1: 1.DiseñO De PáGinas Web

DISEÑO DE PÁGINAS WEB

Microsoft FrontPage

Page 2: 1.DiseñO De PáGinas Web

1. PÁGINAS Y SITIOS WEB.

HTML:Hyper Text Markup Language

Lenguaje de marcación de hipertexto

Ejemplo: index.html

OTROS LENGUAJES:

Ejemplo: index.asp

index.jsp

index.php

Page 3: 1.DiseñO De PáGinas Web

1. PÁGINAS Y SITIOS WEB.

SITIO WEB: Sitio localizado en la red World Wide Web organizado jerárquicamente.

Index.html

Dirección.html Departamentos.html Alumnos.html

Secretaría.html

Jefatura_estudios.html

Director.html

Matemáticas.html

Tecnología.html

Lengua_Castellana.html

Inglés.html

4ºESO

3ºESO

2ºESO

1ºESO

Page 4: 1.DiseñO De PáGinas Web

1. PÁGINAS Y SITIOS WEB.

PÁGINA DE INICIO

Page 5: 1.DiseñO De PáGinas Web

1. PÁGINAS Y SITIOS WEB.MAPA DEL SITIO: Directorio de páginas que lo

componen y su orden Jerárquico.

Page 6: 1.DiseñO De PáGinas Web

2. EDITORES HTML.

• MICROSOFT FRONTPAGE.• MACROMEDIA DREAMWEAVER.• COFFECUP HTML EDITOR.• NVU (Software libre).

What You See Is What You Get (WYSIWYG).

“Lo que ves es lo que obtienes”.

Page 7: 1.DiseñO De PáGinas Web

2. EDITORES HTML.

Page 8: 1.DiseñO De PáGinas Web

2. EDITORES HTML.

Page 9: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.

• Comercializado hasta 2006.

SharePoint Designer ExpressionWeb.

Page 10: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.

Page 11: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.PANEL DE TAREAS.

Page 12: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.PANEL DE TAREAS.

Page 13: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.PANEL DE TAREAS.

Page 14: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.PANEL DE TAREAS.

Page 15: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.BARRA DE VISTAS.

Page 16: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.BARRA DE VISTAS.

Page 17: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.BARRA DE VISTAS.

Page 18: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.BARRA DE VISTAS.

Page 19: 1.DiseñO De PáGinas Web

3. Microsoft FrontPage 2003.BARRA DE VISTAS.

Page 20: 1.DiseñO De PáGinas Web

4. CREACIÓN DE UNA PÁGINA WEB.

UNA PÁGINA WEB PUEDE SER ÚNICA O FORMAR

PARTE DE UN SITIO WEB.

IMÁGENES, TABLAS, HIPERVÍNCULOS, AUDIO, VÍDEO,….

INFORMACIÓN, PUBLICIDAD, VENTA ON-LINE, OCIO, JUEGOS

PERSONALES,….

Page 21: 1.DiseñO De PáGinas Web

4. CREACIÓN DE UNA PÁGINA WEB.

SONIDO DE FONDO.

Page 22: 1.DiseñO De PáGinas Web

4. CREACIÓN DE UNA PÁGINA WEB.

SONIDO DE FONDO.

Page 23: 1.DiseñO De PáGinas Web

VÍDEO.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 24: 1.DiseñO De PáGinas Web

OTROS ELEMENTOS.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 25: 1.DiseñO De PáGinas Web

OTROS ELEMENTOS.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 26: 1.DiseñO De PáGinas Web

OTROS ELEMENTOS MULTIMEDIA.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 27: 1.DiseñO De PáGinas Web

OTROS ELEMENTOS MULTIMEDIA.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 28: 1.DiseñO De PáGinas Web

OTROS ELEMENTOS MULTIMEDIA.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 29: 1.DiseñO De PáGinas Web

ACTIVIDADES RESUELTAS – PÁG. 197

4. CREACIÓN DE UNA PÁGINA WEB.

• CREA EL SIGUIENTE ÁRBOL DE DIRECTORIOS.

Page 30: 1.DiseñO De PáGinas Web

ACTIVIDADES RESUELTAS – PÁG. 197

4. CREACIÓN DE UNA PÁGINA WEB.

• COPIAR LA CARPETA CUADROS DESDE EL CD.

Page 31: 1.DiseñO De PáGinas Web

ACTIVIDADES RESUELTAS – PÁG. 197

4. CREACIÓN DE UNA PÁGINA WEB.

• ABRE FRONTPAGE.• NUEVO → PÁGINA EN BLANCO.

Page 32: 1.DiseñO De PáGinas Web

ACTIVIDADES RESUELTAS – PÁG. 197

4. CREACIÓN DE UNA PÁGINA WEB.

• CAMBIAR NOMBRE POR “index.htm”

Page 33: 1.DiseñO De PáGinas Web

ACTIVIDADES RESUELTAS – PÁG. 197

4. CREACIÓN DE UNA PÁGINA WEB.

• GUARDAR EN LA CARPETA “WEB PINTORAS”.

Page 34: 1.DiseñO De PáGinas Web

ACTIVIDADES RESUELTAS – PÁG. 197

4. CREACIÓN DE UNA PÁGINA WEB.

• ESCRIBE: MUJERES PINTORAS DEL SIGLO XIX.

Page 35: 1.DiseñO De PáGinas Web

INSERCIÓN Y CONFIGURACIÓN DE TABLAS.• INSERTAR UNA TABLA 4X3, TAM. BORDE: 0.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 36: 1.DiseñO De PáGinas Web

INSERCIÓN Y CONFIGURACIÓN DE TABLAS.• COMPLETAR LA TABLA: Nombre + Años.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 37: 1.DiseñO De PáGinas Web

INSERCIÓN Y CONFIGURACIÓN DE TABLAS.• COMPLETAR LA TABLA: imágenes de sus cuadros.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 38: 1.DiseñO De PáGinas Web

INSERCIÓN Y CONFIGURACIÓN DE TABLAS.• CENTRAR: TEXTO, IMÁGENES Y TABLA.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 39: 1.DiseñO De PáGinas Web

PROPIEDADES DE IMAGEN.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 40: 1.DiseñO De PáGinas Web

PROPIEDADES DE IMAGEN.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 41: 1.DiseñO De PáGinas Web

CONFIGURACIÓN DE TEXTO.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 42: 1.DiseñO De PáGinas Web

CONFIGURACIÓN DE TEXTO DEL TÍTULO.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 43: 1.DiseñO De PáGinas Web

CONFIGURACIÓN DEL FONDO.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 44: 1.DiseñO De PáGinas Web

CONFIGURACIÓN DEL FONDO.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 45: 1.DiseñO De PáGinas Web

MÚSICA DE FONDO.

4. CREACIÓN DE UNA PÁGINA WEB.

• DESDE CD: COPIAR “PURA.MID” A WEB PINTORAS.

Page 46: 1.DiseñO De PáGinas Web

MÚSICA DE FONDO.

4. CREACIÓN DE UNA PÁGINA WEB.

• MENÚ ARCHIVO → OPCIÓN PROPIEDADES.

Page 47: 1.DiseñO De PáGinas Web

MÚSICA DE FONDO.

4. CREACIÓN DE UNA PÁGINA WEB.

• GUARDAR.

• VISUALIZAR LA PÁGINA EN EL EXPLORADOR:MENÚ ARCHIVO

↓OPCIÓN VISTA PREVIA EN EL EXPLORADOR

Page 48: 1.DiseñO De PáGinas Web

VER CÓDIGO HTML.

4. CREACIÓN DE UNA PÁGINA WEB.

Page 49: 1.DiseñO De PáGinas Web

CONSIDERACIONES.

4. CREACIÓN DE UNA PÁGINA WEB.