CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007

(Sesión 4)

Ricardo Ferrís Castell

(Ricardo.Ferris@uv.es)

Departament D’Informàtica

Págin

as H

TM

L

Creación de páginas Web con SharePoint

2

• 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.es\nombre_usuario

– Pulsar sobre ‘Finalizar’

• Recuperemos el ‘site’ para poder empezar a trabajar– Abrir SharePoint Designer

– Cerrar la página que queda por defecto

– Crear un nuevo ‘sitio web’

– Pulsa sobre ‘Publicar sitio’ y conectarse al servidor utilizando el método ‘Sistema de archivos’

Recuperar el ‘site’

Págin

as H

TM

L

Creación de páginas Web con SharePoint

3

– Abrir SharePoint Designer

– Cerrar la página que queda por defecto

Recuperar el ‘site’

Págin

as H

TM

L

Creación de páginas Web con SharePoint

4

– Crear un nuevo ‘sitio web’

Recuperar el ‘site’

Págin

as H

TM

L

Creación de páginas Web con SharePoint

5

– Pulsa sobre ‘Publicar sitio’ y conectarse al servidor utilizando el método ‘Sistema de archivos’

Recuperar el ‘site’

Págin

as H

TM

L

Creación de páginas Web con SharePoint

6

– Seleccionar todos los ficheros y directorios y pulsar sobre la flecha azul

Recuperar el ‘site’

Temario

• Introducción a internet: Cliente/Servidor.• Introducción a Office SharePoint 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 SharePoint

7

Págin

as H

TM

L

Creación de páginas Web con SharePoint

8

• Estilos en las páginas html:– Estilos embebidos.

<style type="text/css">

…

</style>

– Hojas de estilos (css: cascade style sheets)<link rel="stylesheet" type="text/css" href="Estilos.css" />

– Estilos ‘in-line’Propiedad 'style' en las etiquetas

Estilos

Págin

as H

TM

L

Creación de páginas Web con SharePoint

9

• EstilosNombre/Vinculador (suele empezar con '.'){ opcion: valor; opcion: valor; ...}

Opciones/Valores:– font-size: tamaño (puntos/valores)– font-family: fuente– font-style: italic/normal...– font-weight: normal/bold...– ...

Estilos

Págin

as H

TM

L

Creación de páginas Web con SharePoint

10

• Estilos

Estilos

Págin

as H

TM

L

Creación de páginas Web con SharePoint

11

• Estilos

Estilos

Págin

as H

TM

L

Creación de páginas Web con SharePoint

12

• Estilos

Estilos

Págin

as H

TM

L

Creación de páginas Web con SharePoint

13

• Estilos: Adjuntar hoja de estilos a un página web

Estilos

Págin

as H

TM

L

Creación de páginas Web con SharePoint

14

• Estilos: Modificar estilos existentes

Estilos

Págin

as H

TM

L

Creación de páginas Web con SharePoint

15

Estilos

• Estilos: Modificar estilos existentes

Págin

as H

TM

L

Creación de páginas Web con SharePoint

16

Estilos

• Estilos: Modificar estilos existentes

• Abre la página ‘index.html’ y elimina de ella todos los estilos ‘inline’ (estilos de la página actual). P

ágin

as H

TM

L

Creación de páginas Web con SharePoint

17

Estilos

• Abre la página ‘index.html’ y elimina de ella todos los estilos ‘inline’ (estilos de la página actual). P

ágin

as H

TM

L

Creación de páginas Web con SharePoint

18

Estilos

• Crear una página de estilos separada donde definiremos propiedades para las etiquetas existentes:– h1: Color rojo, tipo cursiva

– h2: 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.

Págin

as H

TM

L

Creación de páginas Web con SharePoint

19

Estilos

• Crear nuevos estilos sobre la página ‘estilos.css’

Págin

as H

TM

L

Creación de páginas Web con SharePoint

20

Estilos

• Crear nuevos estilos sobre la página ‘estilos.css’– .elementoNegrita P

ágin

as H

TM

L

Creación de páginas Web con SharePoint

21

Estilos

• Crear nuevos estilos sobre la página ‘estilos.css’– .elementoCampo P

ágin

as H

TM

L

Creación de páginas Web con SharePoint

22

Estilos

• Crear nuevos estilos sobre la página ‘estilos.css’– p P

ágin

as H

TM

L

Creación de páginas Web con SharePoint

23

Estilos

• Aplica la hoja de estilos a la página ‘profesores.html’.• Aplica los nuevos estilos a diferentes partes de la

página ‘profesores.html’.Apellidos: Ferrís Castell

Nombre: Ricardo

….elementoNegrita: .elementoCampo

• 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 también la hoja de estilos (estilos.css)

Págin

as H

TM

L

Creación de páginas Web con SharePoint

24

Estilos

• 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.

Págin

as H

TM

L

Creación de páginas Web con SharePoint

25

Estilos

• Modifica la hoja de estilos:– Cambia el color del estilo ‘h1’ 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.

• Publica la nueva hoja de estilos y observa lo publicado.

Págin

as H

TM

L

Creación de páginas Web con SharePoint

26

Estilos