Upload
manuel2929
View
10
Download
0
Embed Size (px)
DESCRIPTION
para la buena lectura
Citation preview
Creacin de pginas Web
D. Jos Ramn Balsas [email protected]
D. Juan Ruiz de [email protected]
D. Vctor Manuel Rivas [email protected]
Departamento de InformticaUniversidad de Jan
Creacin de pginas WEB
1. Introduccin
Curso de Creacin de Pginas Web - Depto. de Informtica 3
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 4
1.2 Rediris
Curso de Creacin de Pginas Web - Depto. de Informtica 5
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: El Protocolo TCP/IP
Red 3
Red 2
Red 1
Red 4
R
R
RR
Curso de Creacin de Pginas Web - Depto. de Informtica 6
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.
Curso de Creacin de Pginas Web - Depto. de Informtica 7
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
Curso de Creacin de Pginas Web - Depto. de Informtica 8
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
Curso de Creacin de Pginas Web - Depto. de Informtica 9
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
Curso de Creacin de Pginas Web - Depto. de Informtica 10
1.8 La World Wide Web
Curso de Creacin de Pginas Web - Depto. de Informtica 11
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.
Curso de Creacin de Pginas Web - Depto. de Informtica 12
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 servidor Direccin IPwwwdi.ujaen.es150.214.178.11
/sci/redes/index.html1
Contenido de index.html
Index.html
5
Curso de Creacin de Pginas Web - Depto. de Informtica 13
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
Curso de Creacin de Pginas Web - Depto. de Informtica 14
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://@ El servidor nos solicitar la contrasea Ejemplo:
ftp://[email protected]/ftp://[email protected]/ Una vez conectados podremos crear directorios y copiar archivos
arrastrando hacia/desde la ventana de conexin
Curso de Creacin de Pginas Web - Depto. de Informtica 15
1.11 Servicio de pginas Web personales de la UJA
La Universidad de Jan 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 contrasea coincide con la cuenta
de correo electrnico 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 Ms informacin
http://www.ujaen.es/sci/redes/web/hospedaje/hospedajepp.html
Creacin de Pginas Web
2. HTML
Curso de Creacin de Pginas Web - Depto. de Informtica 17
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
Curso de Creacin de Pginas Web - Depto. de Informtica 18
2.1 Estructura Bsica
La forma ms bsica de una pgina es:
El ttulo de mi pgina
El cuerpo de mi pgina, lleno de texto, imgenes y etiquetas
Cada etiqueta suele ir cerrada por su anti-
etiqueta Algunas etiquetas pueden llevar atributos
que modifiquen su comportamiento
Curso de Creacin de Pginas Web - Depto. de Informtica 19
2.1.1 Formato de prrafo: ...
Ejemplo de prrafo
Este es el primer prrafo de nuestra pgina... qu alineacin tendr por
defecto?
Este es un prrafo alineado a la derecha. Puede servir para poner la fecha.
Curso de Creacin de Pginas Web - Depto. de Informtica 20
2.1.2 Formato de cabeceras: H1, H2, H3, H4, H5, H6
Ejemplo de Cabeceras
Ejemplo de CabecerasEsta es la cabecera H2Esta es una cabecera H3Esto vuelve a ser una cabecera H2Finalmente, esto es una cabecera H4
Curso de Creacin de Pginas Web - Depto. de Informtica 21
2.1.3 Formato de texto: , , ,
Ejemplo de Formato de
Texto
Esta frase comienza
con las primeras palabras en negrita. Contina con algunas palabras en cursiva, que en la mayor parte de navegadores tambin se puede poner as.
Adicionalmente, se puede
subrayar un texto e incluso mezclar varios formatos, o ponerlo en subndice o.superndice
Curso de Creacin de Pginas Web - Depto. de Informtica 22
2.1.4 Formato de texto:...
Ejemplo de Formato de
Texto con FONT
Ejemplo de formato de texto usando FONT (Ntese que NO produce un salto de lnea).
Se pueden
mezclar varios font uno dentro de otro..
Curso de Creacin de Pginas Web - Depto. de Informtica 23
2.1.5 Salto de lnea: , o bien,
Ejemplo de Salto de
Lnea
Para provocar un salto de
lnea no basta con escribir en la
lnea de abajo sino que hay que utilizar la
etiqueta BR
Se puede observar que esta
etiqueta introduce un salto ms pequeo que el de la etiqueta P.
Tambin podemos utilizar una
lnea para delimitar secciones
Curso de Creacin de Pginas Web - Depto. de Informtica 24
2.3 Hiperenlaces
Permiten la navegacin entre distintas pginas web o dentro de una de ellas Texto o
imagen del enlace
....Texto de enlace
Curso de Creacin de Pginas Web - Depto. de Informtica 25
2.3.1 Hiperenlaces externos
Ejemplo de Hiperenlaces a
pginas externas
Hiperenlaces a pginas
externas
A continuacin le presento algunos
enlaces por si quiere visitarlos:
Universidad de Jan
Ejemplo de Cabeceras
Linux!
Curso de Creacin de Pginas Web - Depto. de Informtica 26
2.3.2 Hiperenlaces internos
Ejemplo de Hiperenlaces a
posiciones internas
Hiperenlaces a posiciones
internas
Primero defino los enlaces: Pos. 1 - Pos. 2 - Pos. 3
Ahora las secciones:
Esta sera la posicin 1!
Esta sera la posicin 2!
Curso de Creacin de Pginas Web - Depto. de Informtica 27
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{ color: red; font-weight: bold}
Esto debe salir en rojo y negrita!
Ms informacin sobre HTML y hojas de estilo en : http://www.w3c.org
Curso de Creacin de Pginas Web - Depto. de Informtica 28
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
Curso de Creacin de Pginas Web - Depto. de Informtica 30
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
Curso de Creacin de Pginas Web - Depto. de Informtica 31
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
Curso de Creacin de Pginas Web - Depto. de Informtica 32
3.1.- Instalacin (cont.)
Pinchar aqu, instalacin automtica
Curso de Creacin de Pginas Web - Depto. de Informtica 33
3.1.- Instalacin (cont.) Ejecucin del programa: pulsar el icono en el men Inicio
Curso de Creacin de Pginas Web - Depto. de Informtica 34
3.1.- Instalacin3.1.1.- Configuracin bsica
Qu navegadores mostrarn nuestra pgina? Qu servidor web alojar nuestra pgina?
Curso de Creacin de Pginas Web - Depto. de Informtica 35
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)
Curso de Creacin de Pginas Web - Depto. de Informtica 36
3.2.- Creacin de una nueva web 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!!
Curso de Creacin de Pginas Web - Depto. de Informtica 37
3.2.- Creacin de una nueva web 3.2.1.- Importacin de web existente (cont.)
3.- Importacin
Curso de Creacin de Pginas Web - Depto. de Informtica 38
3.2.- Creacin de una nueva web 3.2.2.- Creacin de una web vaca
Dnde se va a alojar la pgina?: Carpeta local URL remota (requiere
extensiones servidor de FP)
Pinchar aqu
Curso de Creacin de Pginas Web - Depto. de Informtica 39
3.2.- Creacin de una nueva web 3.2.2.- Creacin de una web vaca (cont.)
Curso de Creacin de Pginas Web - Depto. de Informtica 40
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
Curso de Creacin de Pginas Web - Depto. de Informtica 41
3.3.- El entorno de trabajo3.3.1.- El explorador de FP
Interfaz para la gestin de los elementos que constituyen la web
Vista Carpetas Gestin de los ficheros del
webestilo explorador de windows
Mover, borrar, renombrar ficherosy carpetas
Arrastrar carpetas o ficheros externos que se deseen aadir al web o utilizar opcin
Archivo->Importar
Curso de Creacin de Pginas Web - Depto. de Informtica 42
3.3.- El entorno de trabajo3.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
Curso de Creacin de Pginas Web - Depto. de Informtica 43
3.3.- El entorno de trabajo3.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
Curso de Creacin de Pginas Web - Depto. de Informtica 44
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
Edicin Normal edicin tipo procesador de textos
Curso de Creacin de Pginas Web - Depto. de Informtica 45
3.3.- El entorno de trabajo3.3.1.- El editor de FP (cont.)
Edicin HTML edicin HTML estilo editor de textos
Curso de Creacin de Pginas Web - Depto. de Informtica 46
3.3.- El entorno de trabajo3.3.1.- El editor de FP (cont.)
Edicin Normal + etiquetas Pulsar Ctrl + } desde la edicin normal
Curso de Creacin de Pginas Web - Depto. de Informtica 47
3.3.- El entorno de trabajo3.3.1.- El editor de FP (cont.)
Vista previa Muestra cmo se visualizar la pgina
Curso de Creacin de Pginas Web - Depto. de Informtica 48
3.4.- Edicin bsica de texto3.4.1.- Ttulo
Dar ttulo a la pgina Sobre el editor, botn derecho ratn, opcin "Propiedades de pgina"
Curso de Creacin de Pginas Web - Depto. de Informtica 49
3.4.- Edicin bsica de texto3.4.2.- Encabezados
Encabezados FP permite los 6 niveles del estndar HTML
Curso de Creacin de Pginas Web - Depto. de Informtica 50
3.4.- Edicin bsica de texto3.4.3.- Fuente, tamao, color, negrita, ...
Se establecen a travs del men o de la barra de herramientas (como MS Word) Fuente (1)
Tamao (2)
Color (3)
Negrita (4)
Cursiva (5)
Subrayado (6)
Formato->fuente
1 2 4 5 6 3
12
3
56
4
Curso de Creacin de Pginas Web - Depto. de Informtica 51
3.4.- Edicin bsica de texto3.4.4.- Alineacin de texto
Se establecen a travs del men o de la barra de herramientas (como MS Word)
Texto centrado (1)
Alineacin izquierda (2)
Alineacin derecha (3)
Formato->prrafo
1 23
1
23
Curso de Creacin de Pginas Web - Depto. de Informtica 52
3.4.- Edicin bsica de texto3.4.5.- Lnea horizontal
Permite separar de manera lgica el texto de una pgina
Curso de Creacin de Pginas Web - Depto. de Informtica 53
3.4.- Edicin bsica de texto3.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
Curso de Creacin de Pginas Web - Depto. de Informtica 54
3.5.- Publicacin de la web Servidor que aloja la web (ruta completa)
Identificacin en el servidor
Curso de Creacin de Pginas Web - Depto. de Informtica 55
3.5.- Publicacin de la web (cont.)
Ficheros de la web local Ficheros de la web en el servidor
Curso de Creacin de Pginas Web - Depto. de Informtica 56
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
Curso de Creacin de Pginas Web - Depto. de Informtica 57
3.6.- Listas (cont.)
Anidamiento de listas: 2 veces sangra dentro del elemento
Curso de Creacin de Pginas Web - Depto. de Informtica 58
3.6.- Listas (cont.) Propiedades de las listas
Pulsar botn derecho sobre la lista o sublista y elegir "Propiedades de lista"
Curso de Creacin de Pginas Web - Depto. de Informtica 59
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)
Curso de Creacin de Pginas Web - Depto. de Informtica 60
3.7.- Tablas (cont.) Propiedades de la tabla:
Pulsar botn derecho sobre la tabla y elegir "Propiedades de tabla"
Curso de Creacin de Pginas Web - Depto. de Informtica 61
3.7.- Tablas (cont.) Propiedades de la celda:
Pulsar botn derecho sobre la celda y elegir "Propiedades de celda"
Curso de Creacin de Pginas Web - Depto. de Informtica 62
3.7.- Tablas (cont.) Dividir y combinar celdas
Barra herramientas "Tablas"
Curso de Creacin de Pginas Web - Depto. de Informtica 63
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
Curso de Creacin de Pginas Web - Depto. de Informtica 64
3.8.- Hiperenlaces (cont.) Propiedades del hiperenlace: botn derecho sobre el enlace y elegir
"Propiedades de hipervnculo"
Curso de Creacin de Pginas Web - Depto. de Informtica 65
3.8.- Hiperenlaces (cont.) 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 marcador2.- Vincular el marcador a texto o imagen insertando el hipervnculo como antes
Curso de Creacin de Pginas Web - Depto. de Informtica 66
3.8.- Hiperenlaces (cont.)
Insertar enlace para enviar correo electrnico Marcar el texto o imagen del enlace e Insertar hipervnculo
Curso de Creacin de Pginas Web - Depto. de Informtica 67
3.8.- Hiperenlaces (cont.)
Insertar hiperenlace a otra pgina nueva de nuestra web Marcar el texto o imagen del enlace e Insertar hipervnculo
Se crea la nueva pgina y se enlaza Se aade la nueva pgina al editor (en primer o segundo plano)
Curso de Creacin de Pginas Web - Depto. de Informtica 68
3.8.- Hiperenlaces (cont.)
Quitar un hiperenlace botn derecho sobre el enlace y elegir "Propiedades de hipervnculo" Pulsar el botn "Quitar vnculo"
Curso de Creacin de Pginas Web - Depto. de Informtica 69
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 web Crear un dibujo Autoformas y wordart de MS Word Vdeos (avi, ra, ...) (depende de plugins)
Curso de Creacin de Pginas Web - Depto. de Informtica 70
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!!)
Curso de Creacin de Pginas Web - Depto. de Informtica 71
3.9.- Insercin de imgenes (cont.)
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
Curso de Creacin de Pginas Web - Depto. de Informtica 72
3.9.- Insercin de imgenes (cont.)
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
Curso de Creacin de Pginas Web - Depto. de Informtica 73
3.9.- Insercin de imgenes3.9.1.- Color e imagen de fondo
Color e imagen de fondo botn derecho sobre la pgina y elegir "Propiedades de pgina"
Curso de Creacin de Pginas Web - Depto. de Informtica 74
3.9.- Insercin de imgenes3.9.2.- Imgenes en listas
Los puntos de las listas pueden ser cualquier imagen Ir a propiedades de la lista
Curso de Creacin de Pginas Web - Depto. de Informtica 75
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
Curso de Creacin de Pginas Web - Depto. de Informtica 76
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
Curso de Creacin de Pginas Web - Depto. de Informtica 77
3.10.- Adicin y eliminacin de pginas al/del sitio web3.10.1.- Enlazar pginas
Insertar hiperenlace a una pgina de nuestra web Marcar el texto o imagen del enlace e Insertar hipervnculo
Curso de Creacin de Pginas Web - Depto. de Informtica 78
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
Curso de Creacin de Pginas Web - Depto. de Informtica 79
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
Curso de Creacin de Pginas Web - Depto. de Informtica 80
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
Curso de Creacin de Pginas Web - Depto. de Informtica 81
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)
Curso de Creacin de Pginas Web - Depto. de Informtica 82
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
Curso de Creacin de Pginas Web - Depto. de Informtica 83
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
Curso de Creacin de Pginas Web - Depto. de Informtica 84
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
Curso de Creacin de Pginas Web - Depto. de Informtica 85
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
Curso de Creacin de Pginas Web - Depto. de Informtica 86
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
Curso de Creacin de Pginas Web - Depto. de Informtica 87
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
Curso de Creacin de Pginas Web - Depto. de Informtica 88
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
Curso de Creacin de Pginas Web - Depto. de Informtica 89
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
Curso de Creacin de Pginas Web - Depto. de Informtica 90
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
Curso de Creacin de Pginas Web - Depto. de Informtica 91
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/
Curso de Creacin de Pginas Web - Depto. de Informtica 92
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
Curso de Creacin de Pginas Web - Depto. de Informtica 93
3.17 Modificando Temas
Seleccin de Colores Combinaciones preestablecidas Rueda de colores Color personalizado para cada etiqueta (ejem. )
Grficos automatizados (ejem. Barra de navegacin) Imagen Fuente
Texto Tipos de letra para etiquetas de formato (ejem. )
Almacenar un Tema Permite almacenar la configuracin seleccionada con un
identificador
Curso de Creacin de Pginas Web - Depto. de Informtica 94
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
Curso de Creacin de Pginas Web - Depto. de Informtica 95
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
Curso de Creacin de Pginas Web - Depto. de Informtica 96
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
Curso de Creacin de Pginas Web - Depto. de Informtica 97
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
Curso de Creacin de Pginas Web - Depto. de Informtica 98
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
Curso de Creacin de Pginas Web - Depto. de Informtica 99
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 .htaccessConfiguracin: http://www.ujaen.es/sci/redes/web/protegerdir
Contenido del fichero .htaccessAuthType BasicAuthName Zona restringidaAuthUserFile /home/username/ficheroclavesrequire valid-user
Contenido del fichero de clavesjrbalsas:ZaQ8Kz8Nz2A3U alumno:R9oyGPbHmSYOg