CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007 (Sesión 4) Ricardo Ferrís Castell (...
-
Upload
teresa-venegas-lara -
Category
Documents
-
view
216 -
download
0
Transcript of CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007 (Sesión 4) Ricardo Ferrís Castell (...
![Page 1: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/1.jpg)
CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007
(Sesión 4)
Ricardo Ferrís Castell
Departament D’Informàtica
![Page 2: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/2.jpg)
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’
![Page 3: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/3.jpg)
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’
![Page 4: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/4.jpg)
Págin
as H
TM
L
Creación de páginas Web con SharePoint
4
– Crear un nuevo ‘sitio web’
Recuperar el ‘site’
![Page 5: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/5.jpg)
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’
![Page 6: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/6.jpg)
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’
![Page 7: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/7.jpg)
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
![Page 8: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/8.jpg)
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
![Page 9: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/9.jpg)
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
![Page 10: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/10.jpg)
Págin
as H
TM
L
Creación de páginas Web con SharePoint
10
• Estilos
Estilos
![Page 11: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/11.jpg)
Págin
as H
TM
L
Creación de páginas Web con SharePoint
11
• Estilos
Estilos
![Page 12: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/12.jpg)
Págin
as H
TM
L
Creación de páginas Web con SharePoint
12
• Estilos
Estilos
![Page 13: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/13.jpg)
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
![Page 14: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/14.jpg)
Págin
as H
TM
L
Creación de páginas Web con SharePoint
14
• Estilos: Modificar estilos existentes
Estilos
![Page 15: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/15.jpg)
Págin
as H
TM
L
Creación de páginas Web con SharePoint
15
Estilos
• Estilos: Modificar estilos existentes
![Page 16: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/16.jpg)
Págin
as H
TM
L
Creación de páginas Web con SharePoint
16
Estilos
• Estilos: Modificar estilos existentes
![Page 17: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/17.jpg)
• 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
![Page 18: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/18.jpg)
• 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
![Page 19: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/19.jpg)
• 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
![Page 20: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/20.jpg)
• 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
![Page 21: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/21.jpg)
• 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
![Page 22: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/22.jpg)
• 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
![Page 23: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/23.jpg)
• 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
![Page 24: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/24.jpg)
• 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
![Page 25: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/25.jpg)
• 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
![Page 26: 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.](https://reader035.fdocuments.co/reader035/viewer/2022062500/5665b4d41a28abb57c940cce/html5/thumbnails/26.jpg)
• 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