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

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

(Sesión 4)

Ricardo Ferrís Castell

([email protected])

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


3

– Abrir SharePoint Designer

– Cerrar la página que queda por defecto


Págin

as H

TM

L


4

– Crear un nuevo ‘sitio web’


Págin

as H

TM

L


5

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


Págin

as H

TM

L


6

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


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.


7

Págin

as H

TM

L


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


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


10

• Estilos

Estilos

Págin

as H

TM

L


11

• Estilos

Estilos

Págin

as H

TM

L


12

• Estilos

Estilos

Págin

as H

TM

L


13

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

Estilos

Págin

as H

TM

L


14

• Estilos: Modificar estilos existentes

Estilos

Págin

as H

TM

L


15

Estilos


Págin

as H

TM

L


16

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


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


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


19

Estilos

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

Págin

as H

TM

L


20

Estilos

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

ágin

as H

TM

L


21

Estilos

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

ágin

as H

TM

L


22

Estilos

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

ágin

as H

TM

L


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


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


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


26

Estilos

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

Documents