Departament DInformtica CREACIN DE PGINAS WEB CON SHAREPOINT

Departament D’Informàtica CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007 (Sesión 4) Ricardo Ferrís Castell (Ricardo. Ferris@uv. es)

Recuperar el ‘site’ • Conectarse al servidor a traves del ‘sistema de archivos’ Abrir el ‘explorador’ Pulsar sobre ‘Herramientas->Conectar a unidad de red’ Poner en ‘Carpeta’: \disco. uv. esnombre_usuario Pulsar sobre ‘Finalizar’ • Recuperemos el ‘site’ para poder empezar a trabajar – – Abrir Share. Point Designer Cerrar la página queda por defecto Crear un nuevo ‘sitio web’ Pulsa sobre ‘Publicar sitio’ y conectarse al servidor utilizando el método ‘Sistema de archivos’ Creación de páginas Web con Share. Point Páginas HTML – – 2

Recuperar el ‘site’ – Abrir Share. Point Designer – Cerrar la página queda por defecto Páginas HTML Creación de páginas Web con Share. Point 3

Recuperar el ‘site’ – Crear un nuevo ‘sitio web’ Páginas HTML Creación de páginas Web con Share. Point 4

Recuperar el ‘site’ – Pulsa sobre ‘Publicar sitio’ y conectarse al servidor utilizando el método ‘Sistema de archivos’ Páginas HTML Creación de páginas Web con Share. Point 5

Recuperar el ‘site’ – Seleccionar todos los ficheros y directorios y pulsar sobre la flecha azul Páginas HTML Creación de páginas Web con Share. Point 6

Temario • • • Introducción a internet: Cliente/Servidor. Introducción a Office Share. Point Designer 2007. Comenzar a crear una página web. Trabajar con imágenes. Hipervínculos. Tablas. Estilos. Formularios. Inserción de contenidos multimedia. Creación de páginas Web con Share. Point 7

Estilos • Estilos en las páginas html: – Estilos embebidos. – Hojas de estilos (css: cascade style sheets) <link rel="stylesheet" type="text/css" href="Estilos. css" /> – Estilos ‘in-line’ Propiedad 'style' en las etiquetas Creación de páginas Web con Share. Point Páginas HTML <style type="text/css"> … </style> 8

Estilos • Estilos ‘in-line’: Propiedad 'style' en las etiquetas Páginas HTML Creación de páginas Web con Share. Point 9

Estilos • Estilos ‘in-line’: Propiedad 'style' en las etiquetas Páginas HTML Creación de páginas Web con Share. Point 10

Estilos • Estilos embebidos y hojas de estilos Páginas HTML Nombre/Vinculador (suele empezar con '. ') { opcion: valor; . . . } Opciones/Valores: – – – font-size: tamaño (puntos/valores) font-family: fuente font-style: italic/normal. . . font-weight: normal/bold. . . Creación de páginas Web con Share. Point 11

Estilos • Estilos embebidos Páginas HTML Creación de páginas Web con Share. Point 12

Estilos • Hojas de estilos Páginas HTML Creación de páginas Web con Share. Point 13

Estilos • Estilos Páginas HTML Creación de páginas Web con Share. Point 14

Estilos • Estilos Páginas HTML Creación de páginas Web con Share. Point 15

Estilos • Estilos Páginas HTML Creación de páginas Web con Share. Point 16

Estilos • Estilos: Adjuntar hoja de estilos a un página web Páginas HTML Creación de páginas Web con Share. Point 17

Estilos • Estilos: Modificar estilos existentes Páginas HTML Creación de páginas Web con Share. Point 18

Estilos • Estilos: Modificar estilos existentes Páginas HTML Creación de páginas Web con Share. Point 19

Estilos • Estilos: Modificar estilos existentes Páginas HTML Creación de páginas Web con Share. Point 20

Estilos • Abre la página ‘index. html’ y elimina de ella todos los estilos ‘inline’ (estilos de la página actual). Páginas HTML Creación de páginas Web con Share. Point 21

Estilos • Abre la página ‘index. html’ y elimina de ella todos los estilos ‘inline’ (estilos de la página actual). Páginas HTML Creación de páginas Web con Share. Point 22

Estilos • Crear una página de estilos separada donde definiremos propiedades para las etiquetas existentes: h 1: Color rojo, tipo cursiva h 2: Color púrpura a: Color blanco p: justificado dd: italica Guarda la hoja de estilos como ‘estilos. css’ y añádela a la página ‘index. html’. • Publica la página de estilos y la página ‘index. html’ y observa las modificaciones. Creación de páginas Web con Share. Point Páginas HTML – – – 23

Estilos • Crear nuevos estilos sobre la página ‘estilos. css’ Páginas HTML Creación de páginas Web con Share. Point 24

Estilos • Crear nuevos estilos sobre la página ‘estilos. css’ –. elemento. Negrita Páginas HTML Creación de páginas Web con Share. Point 25

Estilos • Crear nuevos estilos sobre la página ‘estilos. css’ –. elemento. Campo Páginas HTML Creación de páginas Web con Share. Point 26

Estilos • Crear nuevos estilos sobre la página ‘estilos. css’ – p Páginas HTML Creación de páginas Web con Share. Point 27

Estilos Apellidos: Ferrís Castell Nombre: Ricardo …. elemento. Negrita: . elemento. Campo • Publica la página y observa lo publicado. • Observa también los cambios en ‘index. html’ * Recuerda guardar las páginas antes de publicarlas y publicar Páginas HTML • Aplica la hoja de estilos a la página ‘profesores. html’. • Aplica los nuevos estilos a diferentes partes de la página ‘profesores. html’. también la hoja de estilos (estilos. css) Creación de páginas Web con Share. Point 28

Estilos Creación de páginas Web con Share. Point Páginas HTML • Crea siete nuevas páginas, cada una para la explicación de un tema. Básate en la hoja ‘http: //www. uv. es/rferris/Temas. txt’ • Aplícales a todas la hoja de estilos creada. • Pon los hipervínculos adecuados en la página ‘index. html’ • Publica todas las páginas y observa lo publicado. 29

Estilos • Modifica la hoja de estilos: • Publica la nueva hoja de estilos y observa lo publicado. Creación de páginas Web con Share. Point Páginas HTML – Cambia el color del estilo ‘h 1’ a rojo oscuro – Cambia el tamaño de letra del estilo ‘p’ a 9 puntos – Añade un nuevo estilo para la etiqueta ‘a’: Ponle color azul, tipo de letra Arial y tamaño 9 puntos. 30