Caractersticas

Es un programa con el cual podemos crear pginas Web de una forma visual, con conocimientos elementales en HTML. Gracias a esto slo tenemos que concentrarnos en el diseo sin necesidad de saber programar. En el 2007 FrontPage se desdoblo en dos productos: Sharepoint Designer y Expression Web. Crear sitios Web, sin necesidad de escribir cdigo Separa desarrollo, diseo y contenido

Entorno de trabajo

Sitio Web SahePoint

Un sitio Web se compone del conjunto de pginas que diseemos para un objetivo concreto. Sin embargo, no es lo mismo disear un sitio Web para un uso personal que para una empresa. Cada uno tiene sus necesidades y planificar con antelacin qu es lo que vamos a hacer nos puede evitar muchos problemas posteriores.
Al construir una Web, la ms importante es planificar

Ejercicio 1: Crear un Sitio Web en SahePoint

Archivo Nuevo Sitio Web General Sitio Web Vacio

Nombre: CURSOWEB. Ubicacin en disco: c:\misitio

5

Crear un Sitio Web en SahePoint: Resultado

Sitio web: metadatos ocultos

Contienen informacin acerca del sitio para para llevar a cabo las funciones de administracin, control y gestin. La carpeta _vti_cnf contiene informacin sobre los archivos: vnculos que existen o quin modific el archivo y cundo. La carpeta _vti_pvt guarda toda la informacin de configuracin

Abrir un Sitio Web en SahePoint

Configuracin de un Sitio Web

Sitio web: crear carpetas

Ponemos la vista de carpetas y pulsamos con el botn derecho del ratn sobre cualquier parte vaca parte derecha y hacemos clic en Nueva - Carpeta.
10

Sitio web: anlisis y configuracin

En la pestaa Sitio, disponemos de las herramientas necesarias para analizar, configurar y administrar nuestro sitio Web. Carpetas: Sitio Web local (en nuestro PC) Sitio Web remoto: Equipo donde se publican los contenidos Configuracin del Sitio: Nos permite definir las caractersticas que tendrn por defecto todas la pginas Resto: las veremos cuando tengamos la estructura creada

11

Definir caractersticas generales de nuestras pginas

Archivo Nuevo Pgina General HTML Opciones .....

12

Crear una pgina Web

Archivo Nuevo Pgina General HTML

13

Ejercicio 2: Crear una pgina Web

Al arrancar el programa, nos aparece por defecto el sito Web. Creamos una pgina HTML Damos un clic en el rea en blanco y escribimos lo siguiente: Hola, esta es mi primera pgina Web <intro> Aqu tenemos un enlace al peridico El Pais Seleccionaremos las palabras "el Pas" y pulsaremos en Insertar y despus, en el men que se nos abre, en Hipervnculo. En Direccin escribiremos lo siguiente: http://www.elpais.es Hemos creado un vnculo a otra pgina y ntese que el texto cambia de color y aparece subrayado para indicar que es un hipervnculo. Guardamos la pgina en nuestro sitio Web, con el nombre 1.htm
14

Ejercicio 2: Crear una pgina Web

Insertar Hipervnculo

15

Ejercicio 2: Crear una pgina Web

Archivo Vista Previa en el Explorador Explorer 7.0

16

Editor de Etiquetas
Nos permite trabajar sobre las etiquetas html de forma directa, pero hay que tener presente que actuamos sobre toda ella.

17

Hojas de Estilo
Dar formato de manera rpida y sencilla a pginas SharePoint mediante herramientas eficaces de hojas de estilo en cascada (CSS)

18

Hojas de Estilo: Crear

19

Ejercicio 3: Crear una Hoja de Estilo

Abrimos la pgina del ejercicio 2 Definimos 3 estilos, asignando un nombre a cada uno de ellos. Distinta fuente, color, etc. Aplicamos estilos a los contenidos y salvamos pgina Marcamos el texto El Pais Aplicamos estilo (botn derecho) Vemos resultados en el navegador. (F12)

20

Ejercicio 3: Hojas de Estilo: Modificar y Aplicar

Al modificar un estilo, modificamos todos los contenidos que lo utilizan

21

Barra de formato

Dar formato al texto directamente

Ejemplo: Fuente de Texto

22

Dar Formato a la Pgina

Para conseguir un aspecto ms atractivo de la pgina o de todas las pginas, podemos aplicar un tema de fondo, que es una combinacin de colores, tipos de letras, separadores, etc. que guardan un mismo estilo y una concordancia.

23

Imgenes: conceptos
Para mostrar imgenes, se usan los siguientes formatos:
GIF: 256 colores, usado para mostrar dibujos, fondos y pequeas fotos. Caractersticas: entrelazado y transparencia. No pierde calidad. El entrelazado permite que la imagen se cargue poco a poco. La transparencia permite elegir un color para hacerlo transparente. GIF89a: versin de GIF permite contener varias imgenes en la misma imagen consiguiendo animacin. JPG o JPEG: 16 millones de colores, fotos con gran calidad, comprime la imagen para que ocupe menos espacio y se carguen rpido. Prdida de calidad. PNG: Color real, archivos de gran tamao, incluye transparencia, entrelazado, correccin de gamma (ajuste de luz y sombras) y paletas de colores. BMP: formato estndar de Windows, formado por un mapa de bits independiente del dispositivo. No comprime y con paleta RGB.
24

Imgenes: insertar
<img border="0" src="coverCD.jpg" width="2480" height="2480" align="left">

GIF , JPG , PNG.

25

Imgenes: cambiar de tamao

Hacemos clic con el botn izquierdo del ratn sobre la imagen y aparecern 4 cuadraditos en la imagen. Pinchando en ellos con el botn izquierdo del ratn y sin soltar, arrastrando el ratn, podemos cambiar el tamao.

26

Imgenes: configurar
<img border="0" src="coverCD.jpg" width="2480" height="2480" align="left">

27

usar una imagen como fondo de pgina

Para usar una imagen como fondo de una pgina: Formato Fondo En la ventana hacemos clic en la pestaa Formato y marcamos la opcin Imagen de fondo. Despus tenemos que buscar qu imagen queremos poner como fondo, haciendo clic en Examinar. La imagen saldr como fondo de pgina y, si no ocupa toda la pantalla, el explorador la llenar con copias de la imagen. Podemos activar la opcin de convertir en marca de agua. En ese caso el fondo no se desplaza cuando nos movemos por la pgina (barra de desplazamiento).
28

Ejercicio 4: Imgenes
Partiendo de la coleccin de imgenes que disponemos en el CD /imgenes, realizamos la siguientes operaciones:

1. 2. 3. 4. 5. 6.
7. 8. 9. 10.

Creamos una nueva pgina HTML Escribimos algo de texto en la pgina Carpeta varios, insertamos la imagen: mtin19.jpg Vemos que podemos variar sus propiedades. Salvamos la pgina y la vemos en el navegador (F12) Volvemos a la pgina e insertamos un fondo: Carpeta fondos\fondo2.jpg Salvamos la pgina y la vemos en el navegador (F12) Insertamos una segunda imagen (mtin20.jpg) Configuramos el texto e imgenes Salvamos la pgina y la vemos en el navegador (F12)
29

Hypertex Hyperlinks - Hipervnculos

Es un enlace, normalmente entre dos pginas de un mismo sitio o de otro sitio Web, a un fichero, a una imagen, etc.
Links absolutos Links relativos

30

Tipos de Hipervinculos
fichero imagen url (web) texto mail

Introducir hipervnculos: Mtodos

Pulsar en el men Insertar y despus, en Hipervnculo. Pulsar el botn de la barra formato.
<a href="index.htm">pgina de incio</a>

31

Ejercicio 5: Crear Hipervnculos

Partiendo de la pgina del ejercicio 1, vamos a insertar un link. Seleccionamos el texto que queremos que sea el enlace (EL Pas) Al ulsar: Insertar Hipervinculo nos aparece una ficha. En Direccin: escribiremos la direccin a dnde nos tiene que llevar el hipervnculo, (http://www.elpais.es). Pulsamos en Aceptar. Salvamos y vemos funcionamiento en 32 navegador.

Destino de los hipervnculos

Valor pred: Es el valor por defecto del Sitio Web El mismo marco: si queremos usar la propia ventana. Toda la pgina: si queremos usar toda la ventana Nueva ventana: si queremos usar una nueva ventana. Marco Primario: si queremos usar el marco de donde procede.
33

Hipervnculos: Marcadores
Es una seal invisible que se deja en cierta parte de una pgina web para acceder directamente a la misma.

34

Hipervnculos: Marcadores

35

Ejercicio 6: Crear Marcadores

Partiendo de la pgina HTML: 0 Marcadores/ley.htm, vamos a generar un ndice inicial con marcadores y links a los artculos. 1. Creamos un ndice en la parte superior 2. Nos situamos en la zona donde quiero insertar el marcador (artculo 1) 3. Pulso: Insertar marcador me a aparece una ventana donde asigno nombre al mismo. 4. Repetimos con artculo 2 y 3. 5. Seleccionamos el elemento 1 del ndice y insertamos link. Indicando el marcador de destino. 6. Repetimos con 2 y 3. 7. Salvamos y verificamos en navegador

36

Hipervnculos: Mapas / Zonas Activas

Cuando crebamos un hipervnculo en una imagen, al hacer clic en cualquier parte de la imagen, activbamos el hipervnculo. En cambio, si creamos un mapa de imagen, podemos tener varios hipervnculos en una misma imagen. Cada hipervnculo est situado en una zona de imagen. Para crear las zonas activas tenemos que activar la barra Imgenes.

37

Ejercicio 7: Crear Zonas Activas

1. Creamos una nueva pgina HTML e Insertamos la imagen: imagenes/varios/extremaduraC .jpg. Salvamos 2. Creamos otra pgina HTML e Insertamos la imagen: imagenes/varios/extremaduraB.jpg. Salvamos 3. Creamos una tercera pgina e insertamos la imagen: imagenes/varios/extremadura .gif 4. Creamos dos zonas activas poligonales, una para cada provincia, y configuramos como link la pgina correspondiente, de las cradas anteriormente. 5. Salvamos y verificamos en navegador

Al crear la zona activa, el ratn cambiar su forma a un pequeo lpiz.

38

Tablas
Estructura de la tabla <table> <tr> <td width="50%">AA</td> <td width="50%">BB</td> </tr> <tr> <td width="50%">CC</td> <td width="50%">DD</td> </tr> <tr> <td width="50%">EE</td> <td width="50%">FF</td> </tr> </table>
AA CC EE BB DD FF
39

Tablas: Tamao
En porcentaje El tamao de las tablas se especifica de manera relativa a la ventana, para redimensionarse a la pantalla. En pxeles. su tamao permanece constante, independiente del tamao de la pantalla en la que se muestre.
Ancho y alto de tabla Ancho y alto de celda

40

Tablas: Consideraciones
Regla 1 la suma de los anchos de columna debe ser igual al ancho de la tabla Regla 2 el contenido es el que manda

Regla 3 Ojo a las celdas sin contenido, pueden desaparecer

41

Tablas: Crear

42

Tablas: Propiedades
Cmo cambiar las propiedades de tabla Cmo cambiar las propiedades de celda

43

Tablas: Propiedades
Fondo y borde de tabla Fondo y borde de celda

44

Tablas: Propiedades
Espaciado entre celdas y margen de celdas

45

Tablas: Anidar

46

Tablas: Dividir Celdas

47

Tablas: Combinar Celdas

48

Tablas: Autoformato

49

Tablas: modificar
Mtodo 1

Mtodo 2

Eliminar
50

Crear Listas

<ul> <li>aaaaaaaaaa</li> <li>bbbbbbbbb</li> <li>cccccccccc</li> <li>ddddddddd</li> </ul>

51

Dar Formato a las Listas

<ul> <li>aaaaaaaaaa</li> <li>bbbbbbbbb</li> <li>cccccccccc</li> <li>ddddddddd</li> </ul>

52

Ejercicio 8: Crear Tablas y Listas

En una nueva pgina HTML, crear una tabla de 4 filas por 3 columnas. En la primera fila unir todas las columnas a una sola celda En la fila 2 y 3, unir las celdas de la primera columna a una sola celda. Sobre esta ltima crear una lista Dar formato a la tabla.

53

Marcos
Un marco es una divisin de la ventana del explorador en dos o ms partes. En cada una de ellas podemos colocar una pgina. Por ejemplo, podemos dividir la pantalla en dos y cargar el ndice de una Web en un marco y el contenido de la Web en el otro.
<frameset cols="150,*"> <frame name="contenido" target="principal" src="xxxxx.htm"> <frame name="principal" src="xxxxx.htm"> <noframes> <body> <p>Esta pgina utiliza marcos, pero su explorador no los admite.</p> </body> </noframes> </frameset>
54

Marcos: Crear

En cada una de las partes de la frame, nos aparecen unos botones donde nos permite establecer la pgina a incluir y su destino
55

Marcos: Configurar
Pulsamos sobre el marco de actuacin para ctivarlo. Pulsamos botn derecho del ratn

56

Ejercicio 9: Trabajar con marcos

Creamos 5 pginas HTML En la 1 ponemos un ttulo y lo centramos En la 2 creamos una lista con dos entradas En la 3, 4 y 5 escribimos 0, 1 y 2 Creamos una nueva pgina HTML: archivo nuevo pgina Pgina de Marcos Seleccionamos plantilla: Titular y Contenido Sobre la cabecera, pulsamos establecer pgina inicial y le asignamos la creada anteriormente como 1. Sobre la zona derecha, pulsamos establecer pgina inicial y le asignamos la creada anteriormente como 3 Sobre la zona izquierda, pulsamos establecer pgina inicial y le asignamos la creada anteriormente como 2 En la lista de la izquierda aadimos un link a la 4 y 5, dando como marco de destino el de la derecha. Salvamos y verificamos en navegador.
57

Capas
Las capas no son ms que unos recuadros, que pueden situarse en cualquier parte de la pgina, en los que podemos insertar contenido. Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona grandes posibilidades de diseo.
<div properties>xxxxxxxxxxxxxx</div>

Propiedades
Default : visibilidad segn el navegador Inherit : se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando Visible :muestra la capa, aunque la pgina no se est viendo Hidden : la capa est oculta Overflow: se mostrar o no el contenido cuando no pueda ser visualizado en su totalidad, por ser la capa pequea.
58

Capas Ejemplo

59

Capas: crear

Pulsamos sobre el icono y se genera la capa.

60

Capas: propiedades
Para modificar su tamao, solo tenemos que seleccionarla y con el botn derecho del ratn alterar su tamao. Podemos actuar sobre el cuadro de capas, seleccionado la misma y pulsando botn derecho del ratn.

Las capas con un mayor z-index se colocarn ms arriba (se dibujarn al final, encima de las otras). Debe ser un valor positivo y nico: dos capas no pueden tener el mismo valor. A travs del atributo id se le da un nombre a la capa, se usa como referencia en las Hojas de Estilo
61

Capas: colocacin en pantalla

Mediante left (izquierda) y top (superior) se establece la posicin de la capa respecto a los mrgenes izquierdo y superior de la pgina. Se puede dar en px o en %. Mediante width (anchura) y height (altura) se establece el tamao de la capa. Se puede dar en px o en %.
Position absolute: la capa se sita con top y left.
Position relative el elemento se sita en relacin de donde esta.

62

Capas / Imgenes: Colocacin del texto

El estilo "float" sirve para alinear un elemento, haciendo que el texto de alrededor del mismo se agrupe entorno a dicho elemento. Valores: "left" (para alinear el elemento a la izquierda) y "right" (para alinearlo a la derecha). El estilo "clear, lo utilizamos cundo queremos que elementos que tienen cerca un elemento flotante dejen de alinearse junto a l. Valores: left (sin flotantes a su izquierda ), right (sin flotantes a su derecha ) o both (sin flotantes a ningn lado).

63

Capas: cdigo
<div id="capa" style="position:absolute; width:200px; height: 115px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 120%; margin: 10 px; margin-bottom: 20px; text-decoration: none; z-index: 3; visibility: visible; background-color: #0099CC; background-image: url(imagenes/fondocapa.gif);> .contenidos.. </div>
64

Ejercicio 9: Capas
1. Creamos una capa, le damos nombre y la situamos en pantalla 2. Seleccionamos la capa y escribimos contenido en la misma 3. Verificar que podemos mover la capa por la pantalla 4. Creamos una segunda capa, con un z-index diferente 5. Escribimos contenido en la segunda capa 6. Solapamos la dos 7. Salvamos pgina html y vemos resultado en navegador 8. Modificamos ms propiedades, salvamos y vemos resultado
65

Formularios
Los formularios nos permiten crear una interfase sencilla entre el cliente y nosotros, proporcionando interactividad en nuestro sitio Web. Por medio de ellos, las personas que se conectan a nuestro sitio Web pueden enviarnos sus datos, comentarios, etc.
<FORM ACTION= xxxxxxxxxxxxxxx" METHOD= "POST" > <INPUT TYPE= "text" NAME= xx" size=40 maxlength=80 VALUE= zz" > </FORM>

ACTION: programa que va a procesar los datos del formulario METHOD: mtodos para la transmisin de informacin

Definimos (TYPE) es "text" (texto), nombre de la variable (NAME), el tamao (SIZE) de la caja es de 40 caracteres, con 80 caracteres (MAXLENGTH). El valor por defecto (VALUE) es zz".

66

Formularios: ejemplo

<form method="POST" action=xxxxxxx"> <br>Este es un ejemplo de formulario</p> <input type="text" name="T1" size="40" value="Escriba aqu su nombre"> <br> <input type="submit" value="Enviar" name="B1"> <input type="reset" value="Restablecer" name="B2"> </form>

67

Formularios: Opciones
Mtodo GET todas las variables se envian por la URL separadas por el signo ? y por cada campo el smbolo &, por ejemplo:
http://www.mtas.es/mipagina.cqi?nombre=Juan&cargo=empleado.

Mtodo es POST el cual enva la informacin directamente al servidor no pasando por el URL y de forma oculta.

Formularios: envi de un mail

Una forma sencilla de obtener los datos introducidos en un formulario es recibirlos por correo electrnico ACTION="mailto:pmerino@mtin.es"

68

Formularios: Elementos
Cuadro de texto: introducir texto. rea de texto: introducir informacin larga. Casillas de verificacin: mostrar varias opciones, para seleccionar una o ms. Botn de opcin: Es similar a las casillas de verificacin, con la diferencia de que los botones son excluyentes entre s.

Cuadro desplegable: Cuadro con varias opciones. Por defecto slo podemos elegir una. Podemos configurarlo para hacer selecciones mltiples.
Botn de comando: Nos permite crear botones y asignarles acciones. Imagen: Nos permite poner imgenes.
69

Formularios: Ejemplos

70

Formularios: crear
Pulsamos Formulario en la barra de herramientas

Generando en pantalla los controles generales del formulario. Posteriormente, iremos aadiendo los distintos elementos del formulario
71

Formularios: Configurar

72

Ejercicio 10: Formulario por mail

Intentamos crear el siguiente formulario:

Variacin: Establecemos como accin el envo por mail

mailto:pmerino@mtin.es
73

Elementos interactivos y multimedia

Un elemento interactivo es un elemento que puede cambiar dependiendo de cmo acte el usuario. Un elemento multimedia puede ser un sonido, una cancin, una animacin, un vdeo...

74

Elementos interactivos y multimedia

75

Elementos interactivos y multimedia: Marquesinas

Se trata de un efecto en el cual un texto se desplaza por la pantalla. Es muy usado tanto para llamar la atencin sobre un texto, que puede ser de publicidad, de noticias, etc.

76

Elementos interactivos y multimedia

Botn Atrs, hacemos clic en el lugar dnde queremos que est el botn. Entonces hacemos clic en la vista HTML para ver el cdigo y, en el lugar dnde se encuentre el cursor, aadimos esto:
<FORM><INPUT TYPE="button" VALUE="Atrs" onClick="history.back()"></FORM>

Botn Siguiente, hacemos lo mismo con:

<FORM><INPUT TYPE="button" VALUE="Adelante" onClick="history.forward()"></FORM>

Botn Subir/Bajar , hacemos clic en Insertar y despus en Componente Web. Aparecer elegimos Efectos dinmicos y Botn interactivo. En sus propiedades, ponemos lo que queramos que salga en el botn en Texto del botn. Para crear un vnculo al ancla, escribimos su nombre predecido del smbolo #. Supongamos que el ancla que hemos creado se llama ancla
77

Elementos interactivos y multimedia: Msica

Sobre la pgina botn derecho del ratn propiedades pgina.

78

Elementos interactivos y multimedia: Transiciones

Se trata de un efecto que se produce al cargar una pgina o al salir de ella, y hace que se haga de una forma atractiva. En vez de aparecer la pgina de golpe, aparece tras un efecto de cortinilla, mezcla, etc.

79

Hojas de Estilo: CSS ("Cascade Style Sheet")

Son un conjunto de reglas y caractersticas que, aplicadas a una pgina Web o a un conjunto de ellas, pueden modificar su apariencia. De esta forma, podemos separar en cierta forma el diseo de l pgina de su contenido. Gracias a las mismas podemos de alguna manera homogeneizar el diseo de una Web.

80

Hojas de Estilo: Crear

81

Hojas de Estilo: Crear

82

Hojas de Estilo: Crear

Selector: Etiqueta HTML sobre la que actuar o nombre de la classe.

Definir en: Donde se va a generar. Categora: Sobre la que acta y valores de la misma. Vista Previa: Como lo vamos aver. Descripcin: Comentarios
83

Comportamientos
Los comportamientos son acciones que suceden cuando los usuarios ejecutan alguna accin sobre un objeto, como puede ser mover el ratn sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc. No existen como cdigo HTML y se programan en JavaScript, basndose en eventos. Los eventos permiten construir aplicaciones interactivas en el lado del cliente. Los eventos estn siempre asociados a una accin sobre un elemento determinado.

84

Comportamientos

<input type='button' name='b1' value='p' onClick = 'alert(has pulsado"); return true;' >

85

Comportamientos

86

Comportamientos: Ejemplo1
Intercalar imgenes 1 Insertamos una imagen 2 Seleccionamos la imagen 3 Comportamiento: Intercalar imagen

87

Capas 1 Insertamos dos capas y las situamos en pantalla 2 En la capa de la izquierda insertamos las imgenes OP1.gif y Op2.gif 3 Comportamiento: Intercambiar imagen (OP11.gif y Op22.gif) 4 Comportamiento: Establecer Texto en la capa

Comportamientos: Ejemplo2

88

Sitio Web: vista carpetas

La parte de la izquierda nos recuerda al rbol de directorios de Windows, pero la derecha muestra un esquema de las pginas de la Web.
89

Sitio web: vista Sitio Web remoto

90

Sitio web: vista informes

91

Sitio web: vista informes

92

Sitio web: vista hipervinculos

93

Otros Elementos

94

Plantillas Pginas Maestras

Formato de la pgina. Permanecen asociadas a las pginas, de forma que cuando cambia una plantilla, cambian todas las pginas asociadas a ella. Permiten actualizar con facilidad un gran nmero de pginas. La pgina maestra = default.master est ubicada en la carpeta _catalogs/masterpage del sitio Su extensin es: dwt Las zonas donde esta permitido escribir se denominan: Marcadores de posicin
95