Cursopaginasweb

Creacin de pginas Web
D. Jos Ramn Balsas Almagro

jrbalsas@ujaen.es
D. Juan Ruiz de Miras
demiras@ujaen.es
D. Vctor Manuel Rivas Santos
vrivas@ujaen.es
Departamento de Informtica
Universidad de Jan
Creacin de pginas WEB
1. Introduccin
1.1 Redes de ordenadores
Una red de ordenadores es un
sistema de comunicacin que
conecta ordenadores entre s
Segn su extensin 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
Curso de Creacin de Pginas Web - Depto. de Informtica 3

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 ingls routers/gateways)
Es una red heterognea
Diferentes tecnologas de transmisin de datos
Diferentes tipos de ordenadores
Diferentes tipos de Sistemas Operativos
Sin embargo, todos los ordenadores utilizan el mismo
lenguaje para comunicarse: Red 2
Red 4
R
El Protocolo TCP/IP
R R
Red 1 R Red 3
1.4 Acceso a Internet
Conexin 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 direccin IP que
lo identifique unvocamente
Las direcciones IP son asignadas en bloques por organismos
internacionales a diferentes organizaciones y empresas
Cada organizacin distribuye las IP entre los ordenadores que posee
Estructura
Formato de una direccin IP: 150.214.178.11
Las direcciones se organizan en grupos que se asignan a cada red
conectada a Internet
Una mscara de red permite indicar cuales son las direcciones que
pertenecen a la misma red
Tipos de mscaras:
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
Mscara: 255.255.255.0
Direcciones de red: 150.214.178.1-150.214.178.254
1.6 Servicios en Internet
Internet presenta una organizacin cliente/servidor
Un Servidor es un ordenador que ofrece algn servicio a otros
equipos de la red
Ejemplos de servicios
WWW
Correo
IRC
El Servidor y el Cliente utilizan un protocolo para transferir la
informacin a travs 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 direccin IP
El servicio de nombres de dominio (DNS) permite asignar un nombre a
cada direccin IP
Tiene una estructura jerrquica
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 organizacin tiene su propio servidor/es de nombres de dominio
donde asigna una IP a cada una de sus mquinas
Un ordenador conectado a Internet deber conocer la direccin 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
Ms conocida por WWW o Web
Servicio basado en la transferencia de documentos hipermedia a travs de Internet:
Pginas de Hipertexto en formato HTML
Imgenes

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 mquina: 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 tambin soportan otros protocolos de Internet

FTP, Correo, News, etc.

1.9 Arquitectura del servicio WEB
http://www.ujaen.es/sci/redes/index.html
4
Solicitud http
1
/sci/redes/index.html
Cliente Servidor
(navegador) 6 WEB
Respuesta http
Contenido de index.html
Nombre servidor 2 3 5
wwwdi.ujaen.es Direccin IP
150.214.178.11
Servidor
de nombres Index.html
(DNS)

1.10 El protocolo FTP
File Transfer Protocol
Es un protocolo para el envo/descarga de ficheros a
travs de Internet
A grandes rasgos, el protocolo FTP es ms adecuado
que el protocolo HTTP en los siguientes casos:
Transferencia de archivos de tamao elevado
Envo de archivos al servidor (http es utilizado
generalmente para descargas de informacin)
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 contrasea
Directorio de trabajo
Clientes FTP
Internet Explorer
WFTP
Acceso desde Internet Explorer
ftp://<usuario>@<servidor_ftp>
El servidor nos solicitar la contrasea
Ejemplo:
ftp://paco@www4.ujaen.es/
Una vez conectados podremos crear directorios y copiar archivos
arrastrando hacia/desde la ventana de conexin
1.11 Servicio de pginas Web
personales de la UJA
La Universidad de Jan proporciona alojamiento Web en el
servidor
www4.ujaen.es
El contenido del Web debe ser enviado por ftp
La cuenta de usuario y la contrasea coincide con la cuenta
de correo electrnico
El directorio de trabajo es public_html
El sitio web es accesible mediante la URL
http://www4.ujaen.es/~usuario
El usuario dispone de 10MB de espacio de almacenamiento
Ms informacin
http://www.ujaen.es/sci/redes/web/hospedaje/hospedajepp.html

Creacin de Pginas Web
2. HTML
El lenguaje HTML
Una pgina Web es un fichero de texto
Slo es necesario un editor de texto para generarla
Posteriormente el Navegador de pginas web las
interpreta
Nombres de ficheros:
Recomendaciones: minsculas; usar solo letras y nmeros;
sin espacios en blanco (sustituir por guin bajo); no usar ees ni
caracteres acentuados.

Extension .html
Lenguaje de marcas hipertexto
Existen marcas (o etiquetas o tags) que definen
estructura y tipografa
2.1 Estructura Bsica
La forma ms bsica de una pgina es:
<HTML>
<HEAD>
<TITLE>El ttulo de mi pgina</TITLE>
</HEAD>
<BODY bgcolor="lightblue">
El cuerpo de mi pgina, lleno de texto, imgenes 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 prrafo:
<P>...</P>
<HTML>
<HEAD>
<TITLE>Ejemplo de prrafo</TITLE>
</HEAD>
<BODY>
<P>
Este es el primer prrafo de nuestra pgina... qu alineacin tendr por
defecto?
</P>
<P align=right>
Este es un prrafo alineado a la derecha. Puede servir para poner la
fecha.
</P>
</BODY>
</HTML> Curso de Creacin de Pginas Web - Depto. de Informtica 19
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> <P>
<HEAD> Adicionalmente, <U>se puede
<TITLE>Ejemplo de Formato de subrayar un texto</U> e
Texto</TITLE> incluso <B><U>mezclar varios
formatos</U></B>, o ponerlo
</HEAD>
en <SUB>subndice</SUB>
<BODY> o.<SUP>superndice</SUP>
<P>
</P>
<B>Esta frase</B> comienza
</BODY>
con las primeras palabras en
<B>negrita</B>. Contina con </HTML>
<I>algunas palabras en
cursiva</I>, que en la mayor
parte de navegadores tambin
<EM>se puede poner
as</EM>.
</P>
2.1.4 Formato de texto:
<FONT>...</FONT>
<HTML> <P>
<HEAD> <FONT SIZE=-2>Se pueden
<TITLE>Ejemplo de Formato de mezclar <FONT
Texto con FONT</TITLE> COLOR=#ff0000>varios
font</FONT> uno dentro
</HEAD> de otro.</FONT>.
<BODY> </P>
<P> </BODY>
<FONT SIZE=+2 </HTML>
COLOR=blue>Ejemplo de
formato de texto usando
FONT</FONT> (Ntese que NO
produce un salto de lnea).
</P>

2.1.5 Salto de lnea:
<BR>, o bien, <BR/>
<HTML> <P>
<HEAD> Se puede observar que esta
<TITLE>Ejemplo de Salto de etiqueta introduce un salto
Lnea</TITLE> ms pequeo que el de la
etiqueta P.
</HEAD>
</P>
<BODY>
<hr/>
<P>
Tambin podemos utilizar una
Para provocar un salto de lnea para delimitar
lnea secciones
no basta con escribir en la </BODY>
lnea de abajo <BR>
</HTML>
sino que hay que utilizar la
etiqueta BR
</P>

2.3 Hiperenlaces
Permiten la navegacin entre distintas

pginas 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>
<P>
<HEAD> <A HREF=http://www.ujaen.es
<TITLE>Ejemplo de Hiperenlaces a >Universidad de Jan</A><BR>
pginas externas</TITLE> <A HREF=http://www.google.com
><IMG
</HEAD> SRC=logo.gif></A><BR>
<BODY> <A
<H1>Hiperenlaces a pginas HREF=ejemplo_cabeceras.html>
Ejemplo de Cabeceras</A><BR>
externas</H1> <A
<P> HREF=http://www.linux.org>Linu
A continuacin le presento algunos x!</A><BR>
</P>
enlaces por si quiere visitarlos:
</BODY>
</P>
</HTML>

2.3.2 Hiperenlaces internos
<HTML> Ahora las secciones:

<HEAD> <A NAME=1>
<TITLE>Ejemplo de Hiperenlaces a <P>
posiciones internas</TITLE> Esta sera la posicin 1!
</HEAD> </P>
<BODY> <A NAME=2>
<H1>Hiperenlaces a posiciones <P>
internas</H1> Esta sera la posicin 2!
<P> </P>
Primero defino los enlaces: </BODY></HTML>
<A HREF=#1>Pos. 1</A> - <A
HREF=#2>Pos. 2</A> - <A
HREF=#3>Pos. 3</A>
</P>
2.4 Hojas de Estilo
Permiten definir estilos que se aplican a
prrafos o caracteres de nuestra pgina.
Primero se define el estilo, y despus se usa.
Ejemplo:
<p>
<html>
<body> Esto debe salir en rojo y
<style> negrita!
</P>
p{ color: red;
</body>
font-weight: bold}
</html>
</style>
Ms informacin sobre HTML y hojas de estilo en :
http://www.w3c.org
2.5 Tratamiento de imgenes
Capturar pantalla con Imp Pant

Abrir un editor de imgenes: Paint,
IrfanView, Photoshop o cualquier otro
Utilizar Editar Pegar
Retocar, seleccionar una parte, etc.
Guardar en formato jpg, gif o png

Creacin de Pginas Web
3. Microsoft FrontPage
3.- Microsoft FrontPage
Principales caractersticas de FP
Mismo entorno de trabajo que Microsoft Office

Integrado con las herramientas de Microsoft Office
Integrado con las caractersticas especiales del servidor web de Microsoft
Fcil edicin (WYSIWYG) y mantenimiento de las pginas web, tanto local

como remotamente
Buena relacin potencia/(facilidad de aprendizaje y manejo)
No es de libre distribucin
nica herramienta de diseo web con licencia en nuestra universidad

3.1.- Instalacin
Ir a http://www.ujaen.es/sci/invdoc/index.html (Unidad de
Investigacin y Docencia del Servicio Central de Informtica)
Seleccionar FrontPage XP

3.1.- Instalacin (cont.)
Pinchar aqu,
instalacin automtica

3.1.- Instalacin (cont.)
Ejecucin del programa: pulsar el icono en el men Inicio

3.1.- Instalacin
3.1.1.- Configuracin bsica
Qu navegadores mostrarn nuestra pgina?
Qu servidor web alojar nuestra pgina?

3.2.- Creacin de una nueva web
3.2.1.- Importacin de web existente
1.- Dnde se va a alojar la pgina web?:

Carpeta local
URL remota (requiere extensiones servidor de FP)

3.2.1.- Importacin de web existente (cont.)
2.- Desde dnde se va a importar la pgina web existente?:

Carpeta local URL remota
Atencin: Derechos de autor!!

3.2.1.- Importacin de web existente (cont.)
3.- Importacin

3.2.2.- Creacin de una web vaca
Pinchar aqu Dnde se va a alojar la

pgina?:
Carpeta local

URL remota (requiere
extensiones servidor de FP)

3.2.2.- Creacin de una web vaca (cont.)

3.3.- El entorno de trabajo
Mens y Barras de herramientas similares a las de Microsoft Office
Explorador de FP:
Opciones de visualizacin
Editor de FP:
Opciones de visualizacin
WYSIWYG
HTML

Navegador

3.3.1.- El explorador de FP
Interfaz para la gestin de
los elementos que
constituyen la web
Vista Carpetas
Gestin de los ficheros del
web
estilo explorador de
windows
Mover, borrar, renombrar
ficheros
y carpetas
Arrastrar carpetas o
ficheros externos que se
deseen aadir al web o
utilizar opcin
Archivo->Importar

3.3.1.- El explorador de FP (cont.)
Vista Hipervnculos: proporciona una perspectiva visual del sitio web,

organizado en funcin de los enlaces entre las distintas pginas

3.3.1.- El explorador de FP (cont.)
Vista Informes: Informacin para la administracin del sitio web
Archivos y archivos no enlazados
Hiperenlaces: correctos, rotos, externos e internos

3.3.1.- El editor de FP
Editor HTML WYSIWYG (What You See Is What You Get)
Estilo Microsoft Word
Edicin Normal
edicin tipo procesador de textos

3.3.1.- El editor de FP (cont.)
Edicin HTML
edicin HTML estilo editor de textos

Edicin Normal + etiquetas
Pulsar Ctrl + } desde la edicin normal

Vista previa
Muestra cmo se visualizar la pgina

3.4.- Edicin bsica de texto
3.4.1.- Ttulo
Dar ttulo a la pgina
Sobre el editor, botn derecho ratn, opcin "Propiedades de pgina"

3.4.2.- Encabezados
Encabezados
FP permite los 6 niveles del estndar HTML

3.4.3.- Fuente, tamao, color, negrita, ...
Se establecen a travs del men o de la barra de herramientas (como MS
Word)
Fuente (1) 1 2 4 5 6 3
Tamao (2)
6 5
Color (3)
Negrita (4)
Cursiva (5) 4 2
3 1
Subrayado (6)
Formato->fuente

3.4.4.- Alineacin de texto
Se establecen a travs del men o de la barra de herramientas (como MS

Word) 2 31
Texto centrado (1)

1
2
Alineacin izquierda (2) 3
Alineacin derecha (3)
Formato->prrafo

3.4.5.- Lnea horizontal
Permite separar de manera lgica el texto de una pgina

3.4.5.- Lnea horizontal (cont.)
Para cambiar las propiedades de la lnea, botn derecho sobre ella y elegir
"Propiedades de lnea horizontal"
Ancho y alto
Alineacin
Color
Sombreado

3.5.- Publicacin de la web
Servidor que aloja la web (ruta completa)
Identificacin en el servidor

3.5.- Publicacin 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 pgina
Renumeracin automtica al insertar o eliminar elementos
Tipos de listas:
listas numeradas
vietas
Procedimiento:
Marcar texto (si ya existe)
Pulsar el botn correspondiente
Introducir elemento + INTRO
2 veces INTRO para fin de lista

3.6.- Listas (cont.)
Anidamiento de listas:
2 veces sangra dentro del
elemento

3.6.- Listas (cont.)
Propiedades de las listas
Pulsar botn derecho sobre la lista o sublista y elegir "Propiedades de lista"

3.7.- Tablas
Muy tiles para organizar la informacin dentro de la pgina (borde=0)
Las tablas estn formadas por filas y columnas de celdas que pueden contener
cualquier elemento de informacin (texto, imgenes, listas, tablas, ...)
Insercin y manipulacin similar a MS Word
Nmero inicial de filas y columnas

Alineacin dentro de la pgina web
Ancho de tabla (cuidado con resolucin)
Tamao borde
Relleno y espaciado del borde (segn navegador)

3.7.- Tablas (cont.)
Propiedades de la tabla:
Pulsar botn derecho sobre la tabla y elegir "Propiedades de tabla"

Propiedades de la celda:
Pulsar botn derecho sobre la celda y elegir "Propiedades de celda"

Dividir y combinar celdas
Barra herramientas "Tablas"

3.8.- Hiperenlaces
Enlazan unas pginas con otras, creando una "telaraa" (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
Creacin de un hiperenlace o hipervnculo
Seleccionar el texto o la imagen


3.8.- Hiperenlaces (cont.)
Propiedades del hiperenlace: botn derecho sobre el enlace y elegir
"Propiedades de hipervnculo"

Marcadores
Determinan posiciones dentro de una pgina
A travs de hiperenlaces se puede saltar a los marcadores
1.- Situar el cursor en el punto a marcar e Insertar el marcador
2.- Vincular el marcador a texto o imagen insertando el hipervnculo como antes

Insertar enlace para enviar correo electrnico
Marcar el texto o imagen del enlace e Insertar hipervnculo

Insertar hiperenlace a otra pgina nueva de nuestra web
Se crea la nueva pgina y se enlaza

Se aade la nueva pgina al editor (en primer o segundo plano)

Quitar un hiperenlace
botn derecho sobre el enlace y elegir "Propiedades de hipervnculo"
Pulsar el botn "Quitar vnculo"

3.9.- Insercin de imgenes
Los formatos estndar soportados por los navegadores son GIF y JPEG
Procedimiento
Situar el cursor en el punto en que se quiere insertar
Elegir opcin "Insertar" del men:
Crear una imagen titular de pgina

Imagen suministradas por terceros
Almacenada en nuestro ordenador
Adquirirla desde perifrico
Generar galera de imgenes en nuestra we b
Crear un dibujo
Autoformas y wordart de MS Word

Vdeos (avi, ra, ...) (depende de plugins)

3.9.- Insercin de imgenes (cont.)
Insertar imagen almacenada en nuestro ordenador
Men: Insertar - Imagen - Desde archivo
Elegir la imagen
Propiedades de la imagen: pestaa "Apariencia"
botn derecho sobre la imagen y elegir "Propiedades de imagen"
Alineacin respecto al texto
Borde de la imagen
Espaciado alrededor de la imagen
Modificar tamao de visualizacin
(cuidado, imagen se carga completa!!)

Propiedades de la imagen: pestaa "General"
Cambiar el fichero de la imagen
Imagen a baja resolucin previa
Texto mientras se carga y al poner el ratn
Hiperenlace

Almacenamiento de las imgenes
Al grabar la pgina con imgenes aadidas aparecer
Cambiar el nombre

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

Opciones JPG GIF

3.9.1.- Color e imagen de fondo
Color e imagen de fondo
botn derecho sobre la pgina y elegir "Propiedades de pgina"

3.9.2.- Imgenes en listas
Los puntos de las listas pueden ser cualquier imagen
Ir a propiedades de la lista

3.10.- Adicin y eliminacin de
pginas al/del sitio web
Aadir una nueva pgina a la web
Ir a vista exploracin
botn derecho sobre el elemento del que "colgar" la nueva pgina
elegir "nueva..." y despus "pgina" o
elegir "agregar pgina existente"
Dobleclick para editarla

3.10.- Adicin y eliminacin de
pginas al/del sitio web
Eliminar una pgina del web
Ir a vista exploracin
botn derecho sobre el elemento que se quiere eliminar
elegir "eliminar"
quitar la pgina de la vista exploracin
eliminar la pgina del web

3.10.- Adicin y eliminacin de pginas al/del
sitio web
3.10.1.- Enlazar pginas
Insertar hiperenlace a una pgina de nuestra web


3.11 Estructurando una pgina
web
FrontPage dispone de diferentes
utilidades para organizar la informacin
y el formato de un sitio Web
Bordes compartidos
Inclusin de ficheros
Barras de Navegacin
Marcos
Estilos
Temas
Plantillas de pginas y sitios webs
3.12 Bordes compartidos
FrontPage permite definir zonas
comunes a todas o algunas
pginas 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
comn para todas las pginas que
los utilicen
Cada pgina puede seleccionar
qu bordes visualizar
Acceso:
Formato->Bordes Compartidos
Se suelen utilizar para colocar
barras de navegacin
Inclusin de ficheros
Es posible colocar el contenido de un fichero html dentro una
pgina Web sin pegar su contenido fsicamente
Ejemplos:
Un pie de pgina comn
Algn contenido que se repite en diversas pginas
A diferencia de los bordes compartidos, los ficheros incluidos se

pueden colocar en cualquier lugar de la pgina
Acceso:
Insertar-> Componentes-> Contenido Incluido -> Pgina
Algunos elementos tiles
Fecha de modificacin
Permite mostrar
automticamente en la
pgina la fecha en que se
modific por ltima vez el
documento
Tabla de contenidos
Muestra la estructura del
sitio web en formato
jerrquico (mapa web)

3.13 Exploracin de una Web
En la vista de Exploracin podemos
definir el mapa de nuestro sitio Web
El mapa define la estructura jerrquica de
acceso entre pginas
Objetivos
Conocer la estructura del sitio Web
Crear barras de contenidos de forma
automtica
Cambiar rpidamente la estructura de un sitio
web
Los enlaces se crean arrastrando los
ficheros de pginas Web sobre la ventana
de exploracin
3.14 Barras de navegacin
Se crean automticamente a
partir de la estructura del Web
Hay que colocarlas en zonas
comunes a todas las pginas:
encabezados, laterales, etc...
Se puede personalizar su estilo
y contenido
Acceso:
Insertar->Componente Web ->
Barras de vnculos
Propiedades para realizar
modificaciones
3.15 Marcos
Los marcos dividen una pgina Web en diferentes
secciones que contienen pginas Web
independientes
Son tiles si se desea que exista una zona de la
pgina que debe permanecer esttica mientras nos
desplazamos por el resto.
Ejemplo: barra de navegacin
Tienen algunas desventajas
Existen diferencias a la hora de ser tratadas por navegadores
diferentes
Presentan inconvenientes a la hora de imprimir
Mas difciles de gestionar ya que requieren construir mltiples
pginas: definicin marcos y contenidos de cada marco
3.15 Marcos
Utilizaremos el asistente para
crear pginas
Archivo -> Nuevo -> Pgina Web
-> Plantilla de pgina
Seleccionamos el tipo de
divisin preferido
Creamos o seleccionamos una
pgina 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
Pgina inicial asociada
Altura y Anchura del marco
en pxeles o en porcentaje
respecto a la ventana del
navegador
Mrgenes para el contenido
Permitir cambiar el tamao
Activacin 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 pgina
Al crear el enlace y asociarle la pgina,
seleccionamos la opcin marco de destino
Aqu indicamos el identificador del marco donde se
mostrar la pgina

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 pgina 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
pgina Web
Edicin de estilos en FrontPage
Modificacin del estilo de las etiquetas html
Creacin de estilos definidos por el usuario
Vinculacin de una pgina Web a una hoja de estilos externa
Creacin de una pgina de estilos externa
Utilizacin 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 prrafo completo o
a caracteres individuales
En un estilo es posible modificar:
Fuente: tipo, color, espaciado
Prrafo: alineacin, sangra, espaciado
Borde, sombreado o imagen de fondo
Numeracin y vietas
Ubicacin del texto
Para aplicar un estilo, se marca el texto y
se selecciona el estilo desde la barra de
herramientas
3.16 Vinculacin de hojas de estilo
Una hoja de estilos es un
fichero que contiene
definiciones de estilo.
Tienen la extensin .css
Una pgina Web puede hacer
referencia a una pgina de
estilos externa para hacer uso
de los estilos que contiene
Se pueden vincular varias hojas
de estilo a una misma pgina
Acceso:
Formato -> Vnculos de hoja de
estilos

3.16 Creacin 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 pgina
-> 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 automtica
el aspecto global de un sitio Web
Acceso: Formato -> Tema
Permiten cambiar colores, grficos y estilos
Se pueden almacenar para posteriores usos

3.17 Modificando Temas
Seleccin de Colores
Combinaciones preestablecidas
Rueda de colores
Color personalizado para cada etiqueta (ejem. <h1>)
Grficos automatizados (ejem. Barra de navegacin)
Imagen
Fuente
Texto
Tipos de letra para etiquetas de formato (ejem. <h1>)
Almacenar un Tema
Permite almacenar la configuracin seleccionada con un
identificador

3.18 Plantillas
Plantillas de pgina
Permite crear pginas web con
formato/estilo predeterminado para
personalizar con contenidos especficos
Plantillas de sitios web
Permiten crear sitios webs completos con
estructura y formato especfico
Web personal
Web de proyecto
Galera de fotografas
Permiten generar una pgina web a partir
de un conjunto de imgenes
3.19 Informes
Contienen informacin sobre
diferentes aspectos del Web que
se est diseando
Nmero de archivos, Imgenes
Archivos no vinculados y vinculados
Pginas lentas
Archivos antiguos y agregados
recientemente
Hipervnculos : 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 Revisin de enlaces
FrontPage permite comprobar el estado de
todos los enlaces existentes en nuestra Web
Para comprobar los enlaces se utiliza la
opcin:
Herramientas -> Actualizar Hipervnculos
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 pulsacin

3.21 Revisin Ortogrfica
Es necesario asignar un lenguaje a
nuestra Web o a la pgina en
cuestin
Herramientas -> Configuracin del Web
-> Idioma
Herramientas -> Opciones de pgina ->
General
Modos de revisin ortogrfica
Mientras se escribe
Acceso: en opciones de pgina
Revisin de una pgina Web
Acceso: Herramientas -> Ortografa
Revisin del sitio Web
Corregir ms tarde, agregando pginas
con errores como tareas pendientes
3.22 Conversin de documentos
Las aplicaciones de Office disponen
de utilidades permiten exportar
contenidos a html
Word
Archivo->Guardar Como
Es conveniente seleccionar el tipo:
Pgina Web filtrada
Excel
Archivo->Guardar Como-> Tipo pgina
web
PowerPoint
Archivo -> Guardar Como
Dispone de un asistente (Publicar)
El cdigo html generado es
confuso y difcil de manipular
4. Proteccin 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 .htaccess
Configuracin: http://www.ujaen.es/sci/redes/web/protegerdir
Contenido del fichero .
Contenido del fichero
htaccess
AuthType Basic de claves
jrbalsas:ZaQ8Kz8Nz2A3U
AuthName Zona restringida
AuthUserFile alumno:R9oyGPbHmSYOg
/home/username/ficheroclaves
require valid-uCsuerrso de Creacin de Pginas Web - Depto. de Informtica 99

Cursopaginasweb

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Cursopaginasweb

Загружено:

Авторское право:

Доступные форматы

Creacin de pginas Web

D. Jos Ramn Balsas Almagro

Curso de Creacin de Pginas Web - Depto. de Informtica 3

Curso de Creacin de Pginas Web - Depto. de Informtica 4

Curso de Creacin de Pginas Web - Depto. de Informtica 6

Curso de Creacin de Pginas Web - Depto. de Informtica 10

Curso de Creacin de Pginas Web - Depto. de Informtica 11

Curso de Creacin de Pginas Web - Depto. de Informtica 12

Curso de Creacin de Pginas Web - Depto. de Informtica 13

Curso de Creacin de Pginas Web - Depto. de Informtica 15

Curso de Creacin de Pginas Web - Depto. de Informtica 20

Curso de Creacin de Pginas Web - Depto. de Informtica 22

Curso de Creacin de Pginas Web - Depto. de Informtica 23

Permiten la navegacin entre distintas

Curso de Creacin de Pginas Web - Depto. de Informtica 25

<HTML> Ahora las secciones:

Capturar pantalla con Imp Pant

Curso de Creacin de Pginas Web - Depto. de Informtica 28

Mismo entorno de trabajo que Microsoft Office

Fcil edicin (WYSIWYG) y mantenimiento de las pginas web, tanto local

Curso de Creacin de Pginas Web - Depto. de Informtica 30

Curso de Creacin de Pginas Web - Depto. de Informtica 31

Curso de Creacin de Pginas Web - Depto. de Informtica 32

Curso de Creacin de Pginas Web - Depto. de Informtica 33

Curso de Creacin de Pginas Web - Depto. de Informtica 34

1.- Dnde se va a alojar la pgina web?:

Curso de Creacin de Pginas Web - Depto. de Informtica 35

2.- Desde dnde se va a importar la pgina web existente?:

Atencin: Derechos de autor!!

Curso de Creacin de Pginas Web - Depto. de Informtica 36

Curso de Creacin de Pginas Web - Depto. de Informtica 37

Pinchar aqu Dnde se va a alojar la

Curso de Creacin de Pginas Web - Depto. de Informtica 38

Curso de Creacin de Pginas Web - Depto. de Informtica 39

Curso de Creacin de Pginas Web - Depto. de Informtica 40

Curso de Creacin de Pginas Web - Depto. de Informtica 41

Vista Hipervnculos: proporciona una perspectiva visual del sitio web,

Curso de Creacin de Pginas Web - Depto. de Informtica 42

Curso de Creacin de Pginas Web - Depto. de Informtica 43

Curso de Creacin de Pginas Web - Depto. de Informtica 44

Curso de Creacin de Pginas Web - Depto. de Informtica 45

Curso de Creacin de Pginas Web - Depto. de Informtica 46

Curso de Creacin de Pginas Web - Depto. de Informtica 47

Curso de Creacin de Pginas Web - Depto. de Informtica 48

Curso de Creacin de Pginas Web - Depto. de Informtica 49

Curso de Creacin de Pginas Web - Depto. de Informtica 50

Se establecen a travs del men o de la barra de herramientas (como MS

Texto centrado (1)

Alineacin derecha (3)

Curso de Creacin de Pginas Web - Depto. de Informtica 51

Permite separar de manera lgica el texto de una pgina

Curso de Creacin de Pginas Web - Depto. de Informtica 52

Curso de Creacin de Pginas Web - Depto. de Informtica 53

Curso de Creacin de Pginas Web - Depto. de Informtica 54

Ficheros de la web local

Curso de Creacin de Pginas Web - Depto. de Informtica 55

Curso de Creacin de Pginas Web - Depto. de Informtica 56

Curso de Creacin de Pginas Web - Depto. de Informtica 57

Curso de Creacin de Pginas Web - Depto. de Informtica 58

Nmero inicial de filas y columnas

Curso de Creacin de Pginas Web - Depto. de Informtica 59

Curso de Creacin de Pginas Web - Depto. de Informtica 60

Curso de Creacin de Pginas Web - Depto. de Informtica 61