Creación de páginas WEBpagarcia/Docencia/cursopaginasweb.pdf · Transferencia de archivos de tamaño elevado ... de correo electrónico ... Capturar pantalla con Imp Pant

Creación de páginas Web

D. José Ramón Balsas [email protected]

D. Juan Ruiz de [email protected]

D. Víctor Manuel Rivas [email protected]

Departamento de InformáticaUniversidad de Jaén

Creación de páginas WEB

1. Introducción

Curso de Creación de Páginas Web - Depto. de Informática 3

1.1 Redes de ordenadores

Una red de ordenadores es un sistema de comunicación que conecta ordenadores entre sí

Según su extensión se pueden clasificar en tres tipos:

Redes de área Local o LAN Redes de área

metropolitana o MAN RIUJA

Redes de área amplia o WAN

RedIris


1.2 Rediris


1.3 ¿Qué es Internet? Internet es una Red de redes de ordenadores

interconectadas entre sí Los equipos que interconectan las redes se denominan

enrutadores, pasarelas (del inglés routers/gateways) Es una red heterogénea

Diferentes tecnologías de transmisión de datos Diferentes tipos de ordenadores Diferentes tipos de Sistemas Operativos

Sin embargo, todos los ordenadores utilizan el mismo “lenguaje” para comunicarse: El Protocolo TCP/IP

Red 3

Red 2

Red 1

Red 4

R

R

RR


1.4 Acceso a Internet

Conexión para particulares RTC, RDSI ADSL Cable LAN conectada a Internet

Adaptador de acceso al medio Modem, tarjeta ethernet, etc..

Sistema Operativo que utilice el protocolo TCP/IP Software para acceso a servicios

Navegadores Clientes de correo Etc.


1.5 Direcciones IP Todo ordenador conectado a Internet debe tener una dirección IP que

lo identifique unívocamente Las direcciones IP son asignadas en bloques por organismos

internacionales a diferentes organizaciones y empresas Cada organización distribuye las IP entre los ordenadores que posee Estructura

Formato de una dirección IP: 150.214.178.11 Las direcciones se organizan en grupos que se asignan a cada red

conectada a Internet Una máscara de red permite indicar cuales son las direcciones que

pertenecen a la misma red Tipos de máscaras:

Clase A: 255.0.0.0, aprox 16777216 Clase B: 255.255.0.0, aprox 65535 direcciones IP Clase C: 255.255.255.0, aprox 256 direcciones IP

Ejemplo: Red: 150.214.178.0 Máscara: 255.255.255.0 Direcciones de red: 150.214.178.1-150.214.178.254


1.6 Servicios en Internet

Internet presenta una organización cliente/servidor Un Servidor es un ordenador que ofrece algún servicio a otros

equipos de la red Ejemplos de servicios

WWW Correo IRC

El Servidor y el Cliente utilizan un protocolo para transferir la información a través de Internet

Un Cliente es un ordenador que se conecta a un servidor para acceder a un servicio

El Cliente debe disponer del software que utilice el protocolo adecuado para acceder a un servicio concreto

Ejemplos de software cliente Internet Explorer Netscape Navigator Outlook Express Messenger


1.7 El servicio de nombres de dominio

Para acceder a un ordenador debemos conocer su dirección IP El servicio de nombres de dominio (DNS) permite asignar un nombre a

cada dirección IP Tiene una estructura jerárquica

Dominios de primer nivel: com, net, org, es, fr, de Dominios de segundo nivel: ujaen.es, ugr.es, ibm.com Dominios de tercer o mayor nivel A cada IP se le asigna un nombre dentro de un dominio concreto

www.ujaen.es 150.214.170.105 batman.ujaen.es 150.214.178.11

Los nombres de dominio son gestionados por organismos nacionales Cada organización tiene su propio servidor/es de nombres de dominio

donde asigna una IP a cada una de sus máquinas Un ordenador conectado a Internet deberá conocer la dirección IP de un

servidor de nombres para que le resuelva los nombres de dominio


1.8 La World Wide Web


1.8 La World Wide Web Más conocida por WWW o Web Servicio basado en la transferencia de documentos hipermedia a través de Internet:

Páginas de Hipertexto en formato HTML Imágenes Sonido Aplicaciones etc.

Utiliza el protocolo HTTP (Hypertext Transfer Protocol) Los contenidos son referenciados por direcciones URL (Universal Resource Locator)

Ejemplo: http://www.ujaen.es/sci/redes/index.html Estructura de un URL

Protocolo: http:// Nombre de la máquina: www.ujaen.es Recurso /sci/redes/index.html

Un navegador es un programa que permite acceder a recursos en servidores Web, descargarse documentos utilizando protocolo HTTP y mostrarlos adecuadamente

Habitualmente, los navegadores también soportan otros protocolos de Internet FTP, Correo, News, etc.


1.9 Arquitectura del servicio WEB http://www.ujaen.es/sci/redes/index.html

Cliente(navegador)

ServidorWEB

Solicitud http

Respuesta http6

4

Servidor de nombres

(DNS)

2 3Nombre servidorDirección IPwwwdi.ujaen.es150.214.178.11

/sci/redes/index.html1

Contenido de index.html

Index.html

5


1.10 El protocolo FTP

File Transfer Protocol Es un protocolo para el envío/descarga de ficheros a

través de Internet A grandes rasgos, el protocolo FTP es más adecuado

que el protocolo HTTP en los siguientes casos: Transferencia de archivos de tamaño elevado Envío de archivos al servidor (http es utilizado

generalmente para descargas de información) Suele ser el mecanismo utilizado para colocar

archivos en un servidor Web


1.10 El protocolo FTP

Requisitos para acceder a un servidor FTP Cliente FTP Nombre del servidor Cuenta de usuario y contraseña Directorio de trabajo

Clientes FTP Internet Explorer WFTP

Acceso desde Internet Explorer ftp://<usuario>@<servidor_ftp> El servidor nos solicitará la contraseña Ejemplo:

ftp://[email protected]/ftp://[email protected]/ Una vez conectados podremos crear directorios y copiar archivos

arrastrando hacia/desde la ventana de conexión


1.11 Servicio de páginas Web personales de la UJA

La Universidad de Jaén proporciona alojamiento Web en el servidor

www4.ujaen.eswww4.ujaen.es El contenido del Web debe ser enviado por ftp La cuenta de usuario y la contraseña coincide con la cuenta

de correo electrónico El directorio de trabajo es public_htmlpublic_html El sitio web es accesible mediante la URL

http://www4.ujaen.es/~usuariohttp://www4.ujaen.es/~usuario El usuario dispone de 10MB de espacio de almacenamiento Más información

http://www.ujaen.es/sci/redes/web/hospedaje/hospedajepp.html

Creación de Páginas Web

2. HTML


El lenguaje HTML

Una página Web es un fichero de texto Sólo es necesario un editor de texto para generarla Posteriormente el Navegador de páginas web las

interpreta Nombres de ficheros:

Recomendaciones: minúsculas; usar solo letras y números; sin espacios en blanco (sustituir por guión bajo); no usar eñes ni caracteres acentuados.

Extension .html

Lenguaje de marcas hipertexto Existen marcas (o etiquetas o tags) que definen

estructura y tipografía


2.1 Estructura Básica

La forma más básica de una página es:<HTML> <HEAD> <TITLE>El título de mi página</TITLE> </HEAD> <BODY bgcolor="lightblue">

El cuerpo de mi página, lleno de texto, imágenes y etiquetas </BODY></HTML>

Cada etiqueta suele ir “cerrada” por su “anti-etiqueta”

Algunas etiquetas pueden llevar atributos que modifiquen su comportamiento


2.1.1 Formato de párrafo: <P>...</P>

<HTML><HEAD><TITLE>Ejemplo de párrafo</TITLE></HEAD><BODY><P>Este es el primer párrafo de nuestra página... ¿qué alineación tendrá por

defecto?</P><P align=”right”>

Este es un párrafo alineado a la derecha. Puede servir para poner la fecha.

</P></BODY></HTML>


2.1.2 Formato de cabeceras: H1, H2, H3, H4, H5, H6<HTML><HEAD><TITLE>Ejemplo de Cabeceras</TITLE></HEAD><BODY><H1>Ejemplo de Cabeceras</H1><H2>Esta es la cabecera H2</H2><H3>Esta es una cabecera H3</H3><H2>Esto vuelve a ser una cabecera H2</H2><H4>Finalmente, esto es una cabecera H4</H4></BODY></HTML>


2.1.3 Formato de texto: <B>, <EM>, <U>, <SUB>

<HTML><HEAD><TITLE>Ejemplo de Formato de

Texto</TITLE></HEAD><BODY><P> <B>Esta frase</B> comienza

con las primeras palabras en <B>negrita</B>. Continúa con <I>algunas palabras en cursiva</I>, que en la mayor parte de navegadores también <EM>se puede poner así</EM>.

</P>

<P>Adicionalmente, <U>se puede

subrayar un texto</U> e incluso <B><U>mezclar varios formatos</U></B>, o ponerlo en <SUB>subíndice</SUB> o.<SUP>superíndice</SUP>

</P></BODY></HTML>


2.1.4 Formato de texto:<FONT>...</FONT>

<HTML><HEAD><TITLE>Ejemplo de Formato de

Texto con FONT</TITLE></HEAD><BODY><P> <FONT SIZE=”+2”

COLOR=”blue”>Ejemplo de formato de texto usando FONT</FONT> (Nótese que NO produce un salto de línea).

</P>

<P><FONT SIZE=”-2”>Se pueden

mezclar <FONT COLOR=”#ff0000”>varios font</FONT> uno dentro de otro.</FONT>.

</P></BODY></HTML>


2.1.5 Salto de línea: <BR>, o bien, <BR/>

<HTML><HEAD><TITLE>Ejemplo de Salto de

Línea</TITLE></HEAD><BODY><P> Para provocar un salto de

línea no basta con escribir en la

línea de abajo <BR> sino que hay que utilizar la

etiqueta BR</P>

<P> Se puede observar que esta

etiqueta introduce un salto más pequeño que el de la etiqueta P.

</P><hr/>También podemos utilizar una

línea para delimitar secciones

</BODY></HTML>


2.3 Hiperenlaces

Permiten la “navegación” entre distintas páginas web o dentro de una de ellas <A href=”enlace” target=”ventana”>Texto o

imagen del enlace</A>

<A name=”posicion”>....<A href=”#posicion”>Texto de enlace</A>


2.3.1 Hiperenlaces externos<HTML><HEAD><TITLE>Ejemplo de Hiperenlaces a

páginas externas</TITLE></HEAD><BODY><H1>Hiperenlaces a páginas

externas</H1><P>A continuación le presento algunos

enlaces por si quiere visitarlos:</P>

<P><A HREF=”http://www.ujaen.es

”>Universidad de Jaén</A><BR><A HREF=”http://www.google.com

”><IMG SRC=”logo.gif”></A><BR>

<A HREF=”ejemplo_cabeceras.html”>Ejemplo de Cabeceras</A><BR>

<A HREF=”http://www.linux.org”>Linux!</A><BR>

</P></BODY></HTML>


2.3.2 Hiperenlaces internos

<HTML><HEAD><TITLE>Ejemplo de Hiperenlaces a

posiciones internas</TITLE></HEAD><BODY><H1>Hiperenlaces a posiciones

internas</H1><P>Primero defino los enlaces: <A HREF=”#1”>Pos. 1</A> - <A

HREF=”#2”>Pos. 2</A> - <A HREF=”#3”>Pos. 3</A>

</P>

Ahora las secciones:<A NAME=”1”><P> Esta sería la posición 1!</P><A NAME=”2”><P> Esta sería la posición 2!</P></BODY></HTML>


2.4 Hojas de Estilo Permiten definir estilos que se aplican a

párrafos o caracteres de nuestra página. Primero se define el estilo, y después se usa. Ejemplo:

<html><body><style> p{ color: red; font-weight: bold}</style>

<p>Esto debe salir en rojo y negrita!</P></body></html>

Más información sobre HTML y hojas de estilo en : http://www.w3c.org


2.5 Tratamiento de imágenes

Capturar pantalla con Imp Pant Abrir un editor de imágenes: Paint,

IrfanView, Photoshop… o cualquier otro Utilizar Editar – Pegar Retocar, seleccionar una parte, etc. Guardar en formato jpg, gif o png

Creación de Páginas Web

3. Microsoft FrontPage


3.- Microsoft FrontPage

Principales características de FP

Mismo entorno de trabajo que Microsoft Office Integrado con las herramientas de Microsoft Office Integrado con las características especiales del servidor web de Microsoft

Fácil edición (WYSIWYG) y mantenimiento de las páginas web, tanto local como remotamente

Buena relación potencia/(facilidad de aprendizaje y manejo)

No es de libre distribución Única herramienta de diseño web con licencia en nuestra universidad


3.1.- Instalación Ir a http://www.ujaen.es/sci/invdoc/index.html (Unidad de

Investigación y Docencia del Servicio Central de Informática)

Seleccionar FrontPage XP


3.1.- Instalación (cont.)

Pinchar aquí, instalación automática


3.1.- Instalación (cont.) Ejecución del programa: pulsar el icono en el menú Inicio


3.1.- Instalación3.1.1.- Configuración básica

¿Qué navegadores mostrarán nuestra página? ¿Qué servidor web alojará nuestra página?


3.2.- Creación de una nueva web 3.2.1.- Importación de web existente

1.- ¿Dónde se va a alojar la página web?: Carpeta local ó URL remota (requiere extensiones servidor de FP)


3.2.- Creación de una nueva web 3.2.1.- Importación de web existente (cont.)

2.- ¿Desde dónde se va a importar la página web existente?: Carpeta local ó URL remota

Atención: Derechos de autor!!


3.2.- Creación de una nueva web 3.2.1.- Importación de web existente (cont.)

3.- Importación


3.2.- Creación de una nueva web 3.2.2.- Creación de una web vacía

¿Dónde se va a alojar la página?:

Carpeta local ó URL remota (requiere

extensiones servidor de FP)

Pinchar aquí


3.2.- Creación de una nueva web 3.2.2.- Creación de una web vacía (cont.)


3.3.- El entorno de trabajo

Menús y Barras de herramientas similares a las de Microsoft Office

Explorador de FP: Opciones de visualización

Editor de FP: Opciones de visualización

WYSIWYG HTML Navegador


3.3.- El entorno de trabajo3.3.1.- El explorador de FP

Interfaz para la gestión de los elementos que constituyen la web

Vista Carpetas Gestión de los ficheros del

webestilo explorador de windows

Mover, borrar, renombrar ficherosy carpetas

“Arrastrar” carpetas o ficheros externos que se deseen añadir al web o utilizar opción

Archivo->Importar


3.3.- El entorno de trabajo3.3.1.- El explorador de FP (cont.)

Vista Hipervínculos: proporciona una perspectiva visual del sitio web, organizado en función de los enlaces entre las distintas páginas


3.3.- El entorno de trabajo3.3.1.- El explorador de FP (cont.)

Vista Informes: Información para la administración del sitio web Archivos y archivos no enlazados Hiperenlaces: correctos, rotos, externos e internos


3.3.- El entorno de trabajo3.3.1.- El editor de FP

Editor HTML WYSIWYG (What You See Is What You Get) Estilo Microsoft Word

Edición Normal edición tipo procesador de textos


3.3.- El entorno de trabajo3.3.1.- El editor de FP (cont.)

Edición HTML edición HTML estilo editor de textos



Edición Normal + etiquetas Pulsar Ctrl + } desde la edición normal



Vista previa Muestra cómo se visualizará la página


3.4.- Edición básica de texto3.4.1.- Título

Dar título a la página Sobre el editor, botón derecho ratón, opción "Propiedades de página"


3.4.- Edición básica de texto3.4.2.- Encabezados

Encabezados FP permite los 6 niveles del estándar HTML


3.4.- Edición básica de texto3.4.3.- Fuente, tamaño, color, negrita, ...

Se establecen a través del menú o de la barra de herramientas (como MS Word)

Fuente (1)

Tamaño (2)

Color (3)

Negrita (4)

Cursiva (5)

Subrayado (6)

Formato->fuente

1 2 4 5 6 3

12

3

56

4


3.4.- Edición básica de texto3.4.4.- Alineación de texto

Se establecen a través del menú o de la barra de herramientas (como MS Word)

Texto centrado (1)

Alineación izquierda (2)

Alineación derecha (3)

Formato->párrafo

1 23

1

2

3


3.4.- Edición básica de texto3.4.5.- Línea horizontal

Permite separar de manera lógica el texto de una página


3.4.- Edición básica de texto3.4.5.- Línea horizontal (cont.)

Para cambiar las propiedades de la línea, botón derecho sobre ella y elegir "Propiedades de línea horizontal"

Ancho y alto Alineación Color Sombreado


3.5.- Publicación de la web Servidor que aloja la web (ruta completa)

Identificación en el servidor


3.5.- Publicación de la web (cont.)

Ficheros de la web local Ficheros de la web en el servidor


3.6.- Listas Permiten organizar el texto y facilitan la lectura de la página Renumeración automática al insertar o eliminar elementos Tipos de listas:

listas numeradas viñetas

Procedimiento: Marcar texto (si ya existe) Pulsar el botón correspondiente Introducir elemento + INTRO 2 veces INTRO para fin de lista


3.6.- Listas (cont.)

Anidamiento de listas: 2 veces sangría dentro del elemento


3.6.- Listas (cont.) Propiedades de las listas

Pulsar botón derecho sobre la lista o sublista y elegir "Propiedades de lista"


3.7.- Tablas

Muy útiles para organizar la información dentro de la página (borde=0) Las tablas están formadas por filas y columnas de celdas que pueden contener

cualquier elemento de información (texto, imágenes, listas, tablas, ...) Inserción y manipulación similar a MS Word

Número inicial de filas y columnas Alineación dentro de la página web Ancho de tabla (cuidado con resolución) Tamaño borde Relleno y espaciado del borde (según navegador)


3.7.- Tablas (cont.)

Propiedades de la tabla: Pulsar botón derecho sobre la tabla y elegir "Propiedades de tabla"


3.7.- Tablas (cont.) Propiedades de la celda:

Pulsar botón derecho sobre la celda y elegir "Propiedades de celda"


3.7.- Tablas (cont.) Dividir y combinar celdas

Barra herramientas "Tablas"


3.8.- Hiperenlaces

Enlazan unas páginas con otras, creando una "telaraña" (web) Asignan una URL a un texto o a una imagen Cuando se pincha sobre el texto o la imagen se carga el destino de la URL Creación de un hiperenlace o hipervínculo

Seleccionar el texto o la imagen


3.8.- Hiperenlaces (cont.)

Propiedades del hiperenlace: botón derecho sobre el enlace y elegir "Propiedades de hipervínculo"



Marcadores Determinan posiciones dentro de una página A través de hiperenlaces se puede saltar a los marcadores

1.- Situar el cursor en el punto a marcar e Insertar el marcador2.- Vincular el marcador a texto o imagen insertando el hipervínculo como antes



Insertar enlace para enviar correo electrónico Marcar el texto o imagen del enlace e Insertar hipervínculo



Insertar hiperenlace a otra página nueva de nuestra web Marcar el texto o imagen del enlace e Insertar hipervínculo

Se crea la nueva página y se enlaza Se añade la nueva página al editor (en primer o segundo plano)



Quitar un hiperenlace botón derecho sobre el enlace y elegir "Propiedades de hipervínculo" Pulsar el botón "Quitar vínculo"


3.9.- Inserción de imágenes

Los formatos estándar soportados por los navegadores son GIF y JPEG Procedimiento

Situar el cursor en el punto en que se quiere insertar Elegir opción "Insertar" del menú:

Crear una imagen titular de página Imagen suministradas por terceros Almacenada en nuestro ordenador Adquirirla desde periférico Generar galería de imágenes en nuestra web Crear un dibujo Autoformas y wordart de MS Word Vídeos (avi, ra, ...) (depende de plugins)


3.9.- Inserción de imágenes (cont.)

Insertar imagen almacenada en nuestro ordenador Menú: Insertar - Imagen - Desde archivo Elegir la imagen

Propiedades de la imagen: pestaña "Apariencia" botón derecho sobre la imagen y elegir "Propiedades de imagen"

Alineación respecto al texto Borde de la imagen Espaciado alrededor de la imagen Modificar tamaño de visualización

(cuidado, imagen se carga completa!!)



Propiedades de la imagen: pestaña "General" Cambiar el fichero de la imagen Imagen a baja resolución previa Texto mientras se carga y al poner el ratón Hiperenlace



Almacenamiento de las imágenes Al grabar la página con imágenes añadidas aparecerá

Cambiar el nombre Cambiar la carpeta (dentro del web) Sobrescribir, dejar existente o no

guardar Opciones JPG ó GIF


3.9.- Inserción de imágenes3.9.1.- Color e imagen de fondo

Color e imagen de fondo botón derecho sobre la página y elegir "Propiedades de página"


3.9.- Inserción de imágenes3.9.2.- Imágenes en listas

Los puntos de las listas pueden ser cualquier imagen Ir a propiedades de la lista


3.10.- Adición y eliminación de páginas al/del sitio web

Añadir una nueva página a la web Ir a vista exploración botón derecho sobre el elemento del que "colgará" la nueva página

elegir "nueva..." y después "página" o elegir "agregar página existente" Dobleclick para editarla


3.10.- Adición y eliminación de páginas al/del sitio web

Eliminar una página del web Ir a vista exploración botón derecho sobre el elemento que se quiere eliminar

elegir "eliminar" quitar la página de la vista exploración eliminar la página del web


3.10.- Adición y eliminación de páginas al/del sitio web3.10.1.- Enlazar páginas

Insertar hiperenlace a una página de nuestra web Marcar el texto o imagen del enlace e Insertar hipervínculo


3.11 Estructurando una página web

FrontPage dispone de diferentes utilidades para organizar la información y el formato de un sitio Web Bordes compartidos Inclusión de ficheros Barras de Navegación Marcos Estilos Temas Plantillas de páginas y sitios webs


3.12 Bordes compartidos

FrontPage permite definir zonas comunes a todas o algunas páginas de la Web

Las zonas comunes se pueden definir en los laterales o en la parte superior o inferior

El contenido de los bordes es común para todas las páginas que los utilicen

Cada página puede seleccionar qué bordes visualizar

Acceso: Formato->Bordes Compartidos

Se suelen utilizar para colocar barras de navegación


Inclusión de ficheros Es posible colocar el contenido de un fichero html dentro una

página Web sin pegar su contenido físicamente

Ejemplos: Un pie de página común Algún contenido que se repite en diversas páginas

A diferencia de los bordes compartidos, los ficheros incluidos se pueden colocar en cualquier lugar de la página Acceso:

Insertar-> Componentes-> Contenido Incluido -> Página


Algunos elementos útiles

Fecha de modificación Permite mostrar

automáticamente en la página la fecha en que se modificó por última vez el documento

Tabla de contenidos Muestra la estructura del

sitio web en formato jerárquico (mapa web)


3.13 Exploración de una Web

En la vista de Exploración podemos definir el mapa de nuestro sitio Web

El mapa define la estructura jerárquica de acceso entre páginas

Objetivos Conocer la estructura del sitio Web Crear barras de contenidos de forma

automática Cambiar rápidamente la estructura de un sitio

web

Los enlaces se crean arrastrando los ficheros de páginas Web sobre la ventana de exploración


3.14 Barras de navegación

Se crean automáticamente a partir de la estructura del Web

Hay que colocarlas en zonas comunes a todas las páginas: encabezados, laterales, etc...

Se puede personalizar su estilo y contenido

Acceso: Insertar->Componente Web ->

Barras de vínculos Propiedades para realizar

modificaciones


3.15 Marcos

Los marcos dividen una página Web en diferentes secciones que contienen páginas Web independientes

Son útiles si se desea que exista una zona de la página que debe permanecer estática mientras nos desplazamos por el resto.

Ejemplo: barra de navegación

Tienen algunas desventajas Existen diferencias a la hora de ser tratadas por navegadores

diferentes Presentan inconvenientes a la hora de imprimir Mas difíciles de gestionar ya que requieren construir múltiples

páginas: definición marcos y contenidos de cada marco


3.15 Marcos Utilizaremos el asistente para

crear páginas Archivo -> Nuevo -> Página Web

-> Plantilla de página

Seleccionamos el tipo de división preferido

Creamos o seleccionamos una página para cada marco

Para cada marco debemos establecer las propiedades que definen su comportamiento


3.15 Propiedades de los Marcos

Identificador para referenciar el marco

Página inicial asociada Altura y Anchura del marco

en píxeles o en porcentaje respecto a la ventana del navegador

Márgenes para el contenido Permitir cambiar el tamaño Activación de barras de

desplazamiento


3.15 Acceso a los Marcos

Es posible crear un enlace que al seleccionarlo muestre el destino en un marco de la página

Al crear el enlace y asociarle la página, seleccionamos la opción marco de destino Aquí indicamos el identificador del marco donde se

mostrará la página Identificadores especiales:

_self, para el mismo marco _top, para el área total del navegador _blank, en una nueva ventana del navegador _parent, en el conjunto de marcos activo

Es posible crear una página para navegadores que no sean capaces de mostrar los marcos


3.16 Hojas de estilo

CSS (Cascading Style Sheets) Permiten definir estilos de formato asociados al texto de una

página Web

Edición de estilos en FrontPage Modificación del estilo de las etiquetas html Creación de estilos definidos por el usuario Vinculación de una página Web a una hoja de estilos externa

Creación de una página de estilos externa Utilización de hojas de estilo predefinidas

Acceso Formato -> Estilo


3.16 Hojas de estilo

Los estilos definidos por el usuario deben comenzar por un punto.

Ejemplo: .TextoVerde Pueden afectar a un párrafo completo o

a caracteres individuales En un estilo es posible modificar:

Fuente: tipo, color, espaciado Párrafo: alineación, sangría, espaciado Borde, sombreado o imagen de fondo Numeración y viñetas Ubicación del texto

Para aplicar un estilo, se marca el texto y se selecciona el estilo desde la barra de herramientas


3.16 Vinculación de hojas de estilo

Una hoja de estilos es un fichero que contiene definiciones de estilo.

Tienen la extensión .css Una página Web puede hacer

referencia a una página de estilos externa para hacer uso de los estilos que contiene

Se pueden vincular varias hojas de estilo a una misma página

Acceso: Formato -> Vínculos de hoja de

estilos


3.16 Creación de hojas de estilo

FrontPage dispone de varias hojas de estilo que pueden ser utilizadas

Para crear una hoja de estilo externa se puede partir de una de las plantillas predeterminadas Acceso:

Archivo->Nuevo -> Plantilla de página -> Hojas de estilo

Una vez creada la hoja de estilo, se pueden editar o crear nuevos estilos: Acceso:

Formato -> Estilo Ejemplos de hojas de estilo

http://camaleoncss.com http://csszengarden.com http://realworldstyle.com http://glish.com/css/


3.17 Temas Los temas permiten cambiar de forma automática

el aspecto global de un sitio Web Acceso: Formato -> Tema

Permiten cambiar colores, gráficos y estilos Se pueden almacenar para posteriores usos


3.17 Modificando Temas

Selección de Colores Combinaciones preestablecidas Rueda de colores Color personalizado para cada etiqueta (ejem. <h1>)

Gráficos automatizados (ejem. Barra de navegación) Imagen Fuente

Texto Tipos de letra para etiquetas de formato (ejem. <h1>)

Almacenar un Tema Permite almacenar la configuración seleccionada con un

identificador


3.18 Plantillas

Plantillas de página Permite crear páginas web con

formato/estilo predeterminado para personalizar con contenidos específicos

Plantillas de sitios web Permiten crear sitios webs completos con

estructura y formato específico Web personal Web de proyecto

Galería de fotografías Permiten generar una página web a partir

de un conjunto de imágenes


3.19 Informes

Contienen información sobre diferentes aspectos del Web que se está diseñando Número de archivos, Imágenes Archivos no vinculados y vinculados Páginas lentas Archivos antiguos y agregados

recientemente Hipervínculos : no comprobados,

rotos, externos, internos Errores de componente Tareas no completadas Temas no utilizados

Conviene revisar los informes y subsanar los errores encontrados antes de publicar la Web


3.20 Revisión de enlaces FrontPage permite comprobar el estado de

todos los enlaces existentes en nuestra Web Para comprobar los enlaces se utiliza la

opción: Herramientas -> Actualizar Hipervínculos

Un enlace puede estar en 3 estados Correcto, cuando existe el documento

destino Roto, cuando no existe el documento destino Desconocido, cuando FrontPage no ha

comprobado la existencia del documento destino

Cuando se detecta un enlace roto, se puede modificar haciendo una doble pulsación


3.21 Revisión Ortográfica Es necesario asignar un lenguaje a

nuestra Web o a la página en cuestión

Herramientas -> Configuración del Web -> Idioma

Herramientas -> Opciones de página -> General

Modos de revisión ortográfica Mientras se escribe

Acceso: en opciones de página Revisión de una página Web

Acceso: Herramientas -> Ortografía Revisión del sitio Web Corregir más tarde, agregando páginas

con errores como tareas pendientes


3.22 Conversión de documentos Las aplicaciones de Office disponen

de utilidades permiten exportar contenidos a html Word

Archivo->Guardar Como Es conveniente seleccionar el tipo:

Página Web filtrada Excel

Archivo->Guardar Como-> Tipo página web

PowerPoint Archivo -> Guardar Como Dispone de un asistente (Publicar)

El código html generado es confuso y difícil de manipular


4. Protección de contenidos Algunas opciones:

Ficheros comprimidos con clave Directorios protegidos con clave

en servidor web El servidor web protege con clave

aquellos directorios que tengan configurada dicha funcionalidad en un fichero .htaccessConfiguración: http://www.ujaen.es/sci/redes/web/protegerdir

Contenido del fichero .htaccessAuthType BasicAuthName “Zona restringida”AuthUserFile “/home/username/ficheroclavesrequire valid-user

Contenido del fichero de clavesjrbalsas:ZaQ8Kz8Nz2A3U alumno:R9oyGPbHmSYOg

Documents

Creación de páginas WEBpagarcia/Docencia/cursopaginasweb.pdf · Transferencia de archivos de tamaño elevado ... de correo electrónico ... Capturar pantalla con Imp Pant