creaciÓn de pÁginas web con sharepoint designer 2007 (sesión 2) ricardo ferrís castell (...

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

(Sesión 2)

Ricardo Ferrís Castell

([email protected])

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


3


as H

TM

L


4


as H

TM

L


5

• Cabecera (<head>)


as H

TM

L


6


as H

TM

L


7



as H

TM

L


8


• Cuerpo (<body>)


as H

TM

L


9

• Cuerpo (<body>)


as H

TM

L


10


as H

TM

L


11

• Cuerpo (<body>)


as H

TM

L


12

• Cuerpo (<body>)

Págin

as H

TM

L


13

• Cuerpo (<body>)

Comenzar a crear una página web

Págin

as H

TM

L


14

• Estilos de párrafos


Págin

as H

TM

L


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


Págin

as H

TM

L


16

• Publicación:


Págin

as H

TM

L


17

• Publicación:


Págin

as H

TM

L


18

• Publicación:


Págin

as H

TM

L


19

• Publicación:


Págin

as H

TM

L


20

• Publicación:

http://www.uv.es/rferris/


Págin

as H

TM

L


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.


Págin

as H

TM

L


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"


Págin

as H

TM

L


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"


Págin

as H

TM

L


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"


Págin

as H

TM

L


25


• Listas:

Págin

as H

TM

L


26


– Listas ordenadas:

Págin

as H

TM

L


27


– Listas desordenadas:

Págin

as H

TM

L


28


– Listas de definiciones:

• Edición de la etiqueta “a mano”.

Págin

as H

TM

L


29

• Incluir, al final de la página, un glosario de términos con sus definiciones.

• Incluye, al menos cinco definiciones.


Págin

as H

TM

L


30

• Otros elementos interesantes:– Lineas horizontales <hr></hr>, <hr>, <hr \>

Opciones:– align– size– width– noshade

– Saltos <br></br>, <br>, <br \>


Págin

as H

TM

L


31

• Otros elementos interesantes:


• 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


32


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.


33

Págin

as H

TM

L


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


35

• Insertar una nueva imagen:


Págin

as H

TM

L


36



Págin

as H

TM

L


37



Págin

as H

TM

L


38



Págin

as H

TM

L


39



Págin

as H

TM

L


40


• 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

creaciÓn de pÁginas web con sharepoint designer 2007 (sesión 2) ricardo ferrís castell (...

Documents