*Caractersticas 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 contenidoEs 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.

*Entorno de trabajo

*Sitio Web SahePointUn 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 VacioNombre: CURSOWEB.Ubicacin en disco: c:\misitio

*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 carpetasPonemos la vista de carpetas y pulsamos con el botn derecho del ratn sobre cualquier parte vaca parte derecha y hacemos clic en Nueva - Carpeta.

*Sitio web: anlisis y configuracinEn 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 contenidosConfiguracin del Sitio: Nos permite definir las caractersticas que tendrn por defecto todas la pginasResto: las veremos cuando tengamos la estructura creada

*Definir caractersticas generales de nuestras pginasArchivo Nuevo Pgina General HTML Opciones .....

*Archivo Nuevo Pgina General HTMLCrear una pgina Web

*Ejercicio 2: Crear una pgina WebAl 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 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

*Insertar HipervnculoEjercicio 2: Crear una pgina Web

*Archivo Vista Previa en el Explorador Explorer 7.0Ejercicio 2: Crear una pgina Web

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

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

*Hojas de Estilo: Crear

*Ejercicio 3: Crear una Hoja de EstiloAbrimos la pgina del ejercicio 2Definimos 3 estilos, asignando un nombre a cada uno de ellos. Distinta fuente, color, etc.Aplicamos estilos a los contenidos y salvamos pginaMarcamos el texto El PaisAplicamos estilo (botn derecho)Vemos resultados en el navegador. (F12)

*Ejercicio 3: Hojas de Estilo: Modificar y Aplicar Al modificar un estilo, modificamos todos los contenidos que lo utilizan

*Dar formato al texto directamenteBarra de formatoEjemplo: Fuente de Texto

*Dar Formato a la PginaPara 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.

*Imgenes: conceptosPara 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.

*Imgenes: insertar

GIF , JPG , PNG.

*Imgenes: cambiar de tamaoHacemos 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.

*Imgenes: configurar

*usar una imagen como fondo de pginaPara usar una imagen como fondo de una pgina:Formato FondoEn 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).

*Ejercicio 4: ImgenesPartiendo de la coleccin de imgenes que disponemos en el CD /imgenes, realizamos la siguientes operaciones:Creamos una nueva pgina HTMLEscribimos algo de texto en la pginaCarpeta varios, insertamos la imagen: mtin19.jpgVemos 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 imgenesSalvamos la pgina y la vemos en el navegador (F12)

*Hypertex Hyperlinks - HipervnculosEs un enlace, normalmente entre dos pginas de un mismo sitio o de otro sitio Web, a un fichero, a una imagen, etc. Links absolutosLinks relativos

*Tipos de Hipervinculospgina de incioIntroducir hipervnculos: Mtodos Pulsar en el men Insertar y despus, en Hipervnculo.Pulsar el botn de la barra formato.

*Ejercicio 5: Crear HipervnculosPartiendo 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 navegador.

*Destino de los hipervnculosValor pred: Es el valor por defecto del Sitio WebEl mismo marco: si queremos usar la propia ventana.Toda la pgina: si queremos usar toda la ventanaNueva ventana: si queremos usar una nueva ventana.Marco Primario: si queremos usar el marco de donde procede.

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

*Hipervnculos: Marcadores

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

*Hipervnculos: Mapas / Zonas ActivasCuando 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.

*Ejercicio 7: Crear Zonas ActivasCreamos una nueva pgina HTML e Insertamos la imagen: imagenes/varios/extremaduraC.jpg. SalvamosCreamos otra pgina HTML e Insertamos la imagen: imagenes/varios/extremaduraB.jpg. SalvamosCreamos una tercera pgina e insertamos la imagen: imagenes/varios/extremadura .gifCreamos dos zonas activas poligonales, una para cada provincia, y configuramos como link la pgina correspondiente, de las cradas anteriormente.Salvamos y verificamos en navegadorAl crear la zona activa, el ratn cambiar su forma a un pequeo lpiz.

*Tablas

AA BB CC DD EE FF

Estructura de la tabla

AABBCCDDEEFF

*Tablas: TamaoEn 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

*Tablas: ConsideracionesRegla 1 la suma de los anchos de columna debe ser igual al ancho de la tablaRegla 2 el contenido es el que mandaRegla 3 Ojo a las celdas sin contenido, pueden desaparecer

*Tablas: Crear

*Tablas: PropiedadesCmo cambiar las propiedades de tablaCmo cambiar las propiedades de celda

*Tablas: PropiedadesFondo y borde de tablaFondo y borde de celda

*Tablas: PropiedadesEspaciado entre celdas y margen de celdas

*Tablas: Anidar

*Tablas: Dividir Celdas

*Tablas: Combinar Celdas

*Tablas: Autoformato

*Tablas: modificarMtodo 1Mtodo 2Eliminar

*

aaaaaaaaaa bbbbbbbbb cccccccccc ddddddddd

Crear Listas

*

aaaaaaaaaa bbbbbbbbb cccccccccc ddddddddd

Dar Formato a las Listas

*Ejercicio 8: Crear Tablas y ListasEn una nueva pgina HTML, crear una tabla de 4 filas por 3 columnas.En la primera fila unir todas las columnas a una sola celdaEn la fila 2 y 3, unir las celdas de la primera columna a una sola celda.Sobre esta ltima crear una listaDar formato a la tabla.

*Marcos

Esta pgina utiliza marcos, pero su explorador no los admite.

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.

*Marcos: CrearEn cada una de las partes de la frame, nos aparecen unos botones donde nos permite establecer la pgina a incluir y su destino

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

*Ejercicio 9: Trabajar con marcosCreamos 5 pginas HTMLEn la 1 ponemos un ttulo y lo centramos En la 2 creamos una lista con dos entradasEn la 3, 4 y 5 escribimos 0, 1 y 2Creamos una nueva pgina HTML: archivo nuevo pgina Pgina de MarcosSeleccionamos plantilla: Titular y ContenidoSobre 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 3Sobre la zona izquierda, pulsamos establecer pgina inicial y le asignamos la creada anteriormente como 2En 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.

*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. xxxxxxxxxxxxxx PropiedadesDefault : visibilidad segn el navegadorInherit : se muestra la capa mientras la pgina a la que pertenece tambin se est mostrandoVisible :muestra la capa, aunque la pgina no se est viendo Hidden : la capa est ocultaOverflow: se mostrar o no el contenido cuando no pueda ser visualizado en su totalidad, por ser la capa pequea.

*Capas Ejemplo

*Capas: crearPulsamos sobre el icono y se genera la capa.

*Capas: propiedadesPara 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

*Capas: colocacin en pantallaMediante 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.

*Capas / Imgenes: Colocacin del textoEl 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).

*Capas: cdigo

*Ejercicio 9: CapasCreamos una capa, le damos nombre y la situamos en pantallaSeleccionamos la capa y escribimos contenido en la mismaVerificar que podemos mover la capa por la pantallaCreamos una segunda capa, con un z-index diferenteEscribimos contenido en la segunda capaSolapamos la dosSalvamos pgina html y vemos resultado en navegadorModificamos ms propiedades, salvamos y vemos resultado

*FormulariosLos 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.

*Formularios: ejemplo

*Formularios: OpcionesMtodo 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 mailUna forma sencilla de obtener los datos introducidos en un formulario es recibirlos por correo electrnico ACTION="mailto:pmerino@mtin.es"

*Formularios: ElementosCuadro 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.

*Formularios: Ejemplos

*Formularios: crearPulsamos Formulario en la barra de herramientasGenerando en pantalla los controles generales del formulario. Posteriormente, iremos aadiendo los distintos elementos del formulario

*Formularios: Configurar

*Ejercicio 10: Formulario por mailIntentamos crear el siguiente formulario:Variacin: Establecemos como accin el envo por mailmailto:pmerino@mtin.es

*Elementos interactivos y multimediaUn 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...

*Elementos interactivos y multimedia

*Elementos interactivos y multimedia: MarquesinasSe 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.

*Elementos interactivos y multimediaBotn 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:

Botn Siguiente, hacemos lo mismo con:

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

*Elementos interactivos y multimedia: MsicaSobre la pgina botn derecho del ratn propiedades pgina.

*Elementos interactivos y multimedia: TransicionesSe 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.

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

*Hojas de Estilo: Crear

*Hojas de Estilo: Crear

*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

*ComportamientosLos 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.

*Comportamientos

*Comportamientos

*Comportamientos: Ejemplo1Intercalar imgenes1 Insertamos una imagen2 Seleccionamos la imagen3 Comportamiento: Intercalar imagen

*Comportamientos: Ejemplo2Capas 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

*Sitio Web: vista carpetasLa parte de la izquierda nos recuerda al rbol de directorios de Windows, pero la derecha muestra un esquema de las pginas de la Web.

*Sitio web: vista Sitio Web remoto

*Sitio web: vista informes

*Sitio web: vista informes

*Sitio web: vista hipervinculos

*Otros Elementos

*Plantillas Pginas MaestrasFormato 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.masterest ubicada en la carpeta _catalogs/masterpage del sitio

Su extensin es: dwt

Las zonas donde esta permitido escribir se denominan: Marcadores de posicin

**********************************************************************************************