creaciÓn de pÁginas web con sharepoint designer 2007 (sesión 4) ricardo ferrís castell (...
TRANSCRIPT
CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007
(Sesión 4)
Ricardo Ferrís Castell
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