Upload
ismael-paz
View
5
Download
1
Embed Size (px)
Citation preview
CREACIÓN DE PÁGINAS WEB CON SHAREPOINT DESIGNER 2007
(Sesión 2)
Ricardo Ferrís Castell
Departament D’Informàtica
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.• Formularios.• Inserción de contenidos multimedia.
Creación de páginas Web con SharePoint
2
Comenzar a crear una página webPágin
as H
TM
L
Creación de páginas Web con SharePoint
3
Comenzar a crear una página webPágin
as H
TM
L
Creación de páginas Web con SharePoint
4
Comenzar a crear una página webPágin
as H
TM
L
Creación de páginas Web con SharePoint
5
• Cabecera (<head>)
Comenzar a crear una página webPágin
as H
TM
L
Creación de páginas Web con SharePoint
6
Comenzar a crear una página webPágin
as H
TM
L
Creación de páginas Web con SharePoint
7
• Cabecera (<head>)
Comenzar a crear una página webPágin
as H
TM
L
Creación de páginas Web con SharePoint
8
• Cabecera (<head>)
• Cuerpo (<body>)
Comenzar a crear una página webPágin
as H
TM
L
Creación de páginas Web con SharePoint
9
• Cuerpo (<body>)
Comenzar a crear una página webPágin
as H
TM
L
Creación de páginas Web con SharePoint
10
Comenzar a crear una página webPágin
as H
TM
L
Creación de páginas Web con SharePoint
11
• Cuerpo (<body>)
Comenzar a crear una página webPágin
as H
TM
L
Creación de páginas Web con SharePoint
12
• Cuerpo (<body>)
Págin
as H
TM
L
Creación de páginas Web con SharePoint
13
• Cuerpo (<body>)
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
14
• Estilos de párrafos
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
15
• Realización de una página completa y su publicación:– Realizar una página del curso:
A partir de la hoja de descripción del curso, realiza una página donde se expliquen los objetivos del curso (y a continuación se enumeren), los puntos a tratar del curso y el profesor que dará el curso (nombre, departamento, facultad o escuela, con su dirección de correo electrónico).
Para el fondo de la página pondréis la imagen:http://www.uv.es/rferris/images/universidad.jpg
Pondréis el color de fondo que creáis conveniente.
Cambiad también el título de la página, las palabras clave y la descripción de la página.
Poned márgenes a la página (100 puntos alrededor del texto).
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
16
• Publicación:
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
17
• Publicación:
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
18
• Publicación:
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
19
• Publicación:
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
20
• Publicación:
http://www.uv.es/rferris/
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
21
• Modifica la página:Cambia el fondo de la página pondréis la imagen:http://www.uv.es/rferris/images/Escudo01.gif
Poned un color de fondo “oscuro” (no negro).
Cambiad el color del texto a un color “claro”.
Publicad de nuevo la página.
Observad los cambios realizados en el explorador.
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
22
• Listas:– Listas ordenadas:
1. Introducción a internet: Cliente/Servidor.2. Introducción a Office SharePoint Designer 2007.3. Comenzar a crear una página web.4. Trabajar con imágenes.5. ...
Marca (tag): <ol></ol>
Opciones:– type: "1", "a", "A", "i", "I"– start: "numero"
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
23
• Listas:– Listas desordenadas:
• Internet y web.• Modelo cliente/servidor.• Edición de páginas web sencillas (html).• Publicación de páginas en la web de la
Universitat.
Marca (tag): <ul></ul>
Opciones:– type: "circle", "disc", "square"
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
24
• Listas:– Listas de definiciones (o glosario de términos):
Internet:conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP
Web:sistema de documentos de hipertexto o hipermedios enlazados y accesibles a través de Internet
...
Marca (tag): <dl></dl>
Opciones:– dir: "rtl", "ltr"
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
25
Comenzar a crear una página web
• Listas:
Págin
as H
TM
L
Creación de páginas Web con SharePoint
26
Comenzar a crear una página web
– Listas ordenadas:
Págin
as H
TM
L
Creación de páginas Web con SharePoint
27
Comenzar a crear una página web
– Listas desordenadas:
Págin
as H
TM
L
Creación de páginas Web con SharePoint
28
Comenzar a crear una página web
– Listas de definiciones:
• Edición de la etiqueta “a mano”.
Págin
as H
TM
L
Creación de páginas Web con SharePoint
29
• Incluir, al final de la página, un glosario de términos con sus definiciones.
• Incluye, al menos cinco definiciones.
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
30
• Otros elementos interesantes:– Lineas horizontales <hr></hr>, <hr>, <hr \>
Opciones:– align– size– width– noshade
– Saltos <br></br>, <br>, <br \>
Comenzar a crear una página web
Págin
as H
TM
L
Creación de páginas Web con SharePoint
31
• Otros elementos interesantes:
Comenzar a crear una página web
• Modifica la página que estamos elaborando y añádele líneas horizontales entre cada una de las secciones.
Añade una línea al inicio de la página que ocupe el 100% de la anchura de la página.
Las líneas entre secciones serán del 90% y un grosor de 10 puntos.
Añade una nueva sección ‘pie de página’ separada por una linea horizontal de 100%.
En el pie de página pondremos:Última actualización: 30/09/2010
Págin
as H
TM
L
Creación de páginas Web con SharePoint
32
Comenzar a crear una página web
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.• Formularios.• Inserción de contenidos multimedia.
Creación de páginas Web con SharePoint
33
Págin
as H
TM
L
Creación de páginas Web con SharePoint
34
Trabajar con imágenes
• Imágenes:Marca (tag): <img></img>, <img />
Opciones:– src– width, height– alt– longdesc– align: "left", "right", ...– border
Págin
as H
TM
L
Creación de páginas Web con SharePoint
35
• Insertar una nueva imagen:
Trabajar con imágenes
Págin
as H
TM
L
Creación de páginas Web con SharePoint
36
Trabajar con imágenes
• Insertar una nueva imagen:
Págin
as H
TM
L
Creación de páginas Web con SharePoint
37
Trabajar con imágenes
• Insertar una nueva imagen:
Págin
as H
TM
L
Creación de páginas Web con SharePoint
38
Trabajar con imágenes
• Insertar una nueva imagen:
Págin
as H
TM
L
Creación de páginas Web con SharePoint
39
Trabajar con imágenes
• Insertar una nueva imagen:
Págin
as H
TM
L
Creación de páginas Web con SharePoint
40
Trabajar con imágenes
• Inserta dos nuevas imágenes en la página:– Una como cabecera del documento que ocupe el 100% de la
cabecera, con un borde de 5 puntos.
La imagen a utilizar será: loguvhom.gif
– Otra como icono en el pie de página, alineada a la derecha y de un tamaño de 100 puntos, sin ningún borde.
La imagen a insertar será: infoPollo_Transparente.gif