Mi primera Web
• LA PANTALLA• EL NAVEGADOR• EL LENGUAJE• EL ASISTENTE• EL SERVIDOR• MÁS OPCIONES
LA RESOLUCIÓN DE PANTALLA
• La Resolución de pantalla está determinada por sus dimensiones en píxeles.
• La mayoría de sitios Web han sido concebidos para
800x600 píxeles.
La Pantalla y la Página .1La Pantalla y la Página .1
LA PANTALLA Y LA PÁGINA .1
• Para que nuestra Web sea vista correctamente en la mayoría de los ordenadores de usuarios, y al igual que hacemos en el Word en Configuración de página en cuanto a los márgenes del folio impreso y en Vista preliminar antes de imprimir:
• Optamos por incluir todo el contenido dentro de una Tabla
• Le damos un ancho de 780px y la vamos a situar en el centro de la Pantalla (La resolución media es de 800x600px)
• Al fondo de Pantalla le daremos un color característico
• Y le damos un margen superior de 5px La Pantalla y la Página .2La Pantalla y la Página .2
LA PANTALLA Y LA PÁGINA .2
• No hacer tan ancha la página que se necesite usar la barra de desplazamiento horizontal.
• Ni tampoco muy larga sin Índices o barra de navegación para ir con vínculos a los sitios o capítulos deseados y volver.
• De ser posible, si la página tiene más de tres avances de páginas, se aconseja hacer nuevas páginas Web vinculadas.
• Los Navegadores permiten ver las Páginas Web de un contenido tan extenso en ancho y largo casi infinito, lo que no seria cómodo para el usuario.
EL LENGUAJE Y EL CÓDIGO FUENTE
• El lenguaje HTML es el usado por las páginas Web y reconocido por la World Wide Web (www).
• Es un código para la descripción lógica de documentos.
• Los Navegadores interpretan este código para representar la página Web en pantalla.
• Es bueno conocer el lenguaje HTML, siempre se necesitará entrar en el Código fuente para introducir modificaciones. Aunque se recomiende usar un Asistente editor de páginas Web.
El Lenguaje y el Bloc de NotasEl Lenguaje y el Bloc de Notas
EL LENGUAJE Y EL BLOC DE NOTAS
Ejemplo de una página Web desde el Bloc de Notas y archivo a guardar con extensión htm o html, para ser abierto por el navegador.
EL ASISTENTE
• FrontPage es el asistente de microsoft.com para editar páginas Web sencillas.
• Macromedia Dreamweaver es el asistente de macromedia.com para proyectos complejos.
• Hay otros asistentes como Netscape Composer, Adove GoLive, StarOffice, Nvu, etc.
Es la herramienta que facilita la construcción de una página Web, insertando imágenes, textos y sonidos con su lenguaje HTML o Código fuente automáticamente.
EL NAVEGADOR
• El Navegador es un programa para visualizar las páginas Web.
• Internet Explorer se incluye con Windows.Google Chrome, Netscape, Mozilla, etc. Son otros navegadores.
EL SERVIDOR
• Es el que almacena las páginas Web de los clientes, a través del cual se pueden conectar con todos los usuarios del mundo que lo deseen.
Europa Asia
África América
Oceanía
Algunos Servidores oProveedores de Internet:
-Galeón
-Blogger -Jazztel
Mi primera WebOpciones Avanzadas
• Imágenes
• Sonidos
• Hipervínculos
• Estructura
• Tablas
• Textos
Para ver Comentario final: Clic en el PCPara ver Comentario final: Clic en el PC
ESTRUCTURAS MÁS COMUNES
Desarrollo de tres opciones
Logotipo y Título
Barra de Navegación
Contenidode la
Portada
Logotipo y Título
Bar
ra d
e N
aveg
ació
n
Contenidode la
Portada
Logotipo y Título
Bar
ra d
e N
aveg
ació
n Contenidode la
Portada
y de lasdemás páginasdel contenido
Marcos. Logo y Barra fijosCada página en nueva ventana
1 2 3
Cada página en nueva ventana
En una Página Web, la importancia la tiene su Contenido.Pero la Portada es el tema al que hay que dedicar más tiempo.....
En una Página Web, la importancia la tiene su Contenido.Pero la Portada es el tema al que hay que dedicar más tiempo.....
Las Portadas
La Portada debe resumir todo el contenido de su interior.Debe ser: Atrayente; agradable; artística; interesante y sugestiva !!!
La Portada debe resumir todo el contenido de su interior.Debe ser: Atrayente; agradable; artística; interesante y sugestiva !!!
Las Portadas
La Portada debe resumir todo el contenido de su interior.Debe ser: Atrayente; agradable; artística; interesante y sugestiva !!!
La Portada debe resumir todo el contenido de su interior.Debe ser: Atrayente; agradable; artística; interesante y sugestiva !!!
1.- Barra de navegación arriba
• Por ser una Web sencilla y de pocas páginas, la estructura de la Portada lleva entre el Título y el Contenido un Índice o barra de navegación con Enlaces a las demás páginas de la Web
Logotipo y Título
Fotos - Enlaces
Contenidode la
Portada
Página decontenido
Mis Enlacespreferidos
Página decontenidoMis Fotos
Todas las Páginasse abren en una nueva Ventana
Página 4
Página 3Página
2
2.- Barra de navegación a la izquierda
Logotipo y Título
Pág.1Pág.2Pág.3Pág.4Pág.5......
Contenidode la
Portada
• Por ser un sitio Web con más páginas, la estructura de la Portada lleva a la izquierda la barra de navegación con Hipervínculos o Enlaces a las demás páginas de la Web
Página 1 Todas las Páginas, incluido la
Portada, se abren en una nueva Ventana
Todas las Páginas, incluido la Portada, se abren en una
nueva Ventana
3.- Marcos. Título y Barra fijos
• La Portada consta de tres marcos, dos son fijos y uno que es el principal es donde aparecerán las páginas de la Web
Logotipo y Título
Pág.1Pág.2Pág.3Pág.4Pág.5......
Contenidode la
Portada y detodas las páginas
de la WebTodas las Páginasse abren dentro del marco principal
Puede constar también de dos marcos dentro de la misma ventana
HIPERVÍNCULOS
1.- INTERNOS: Dentro de un sitio Web desde la Portada a las distintas páginas y viceversa:
<a href=“poesias.htm”>Mis Poesías</a>
2.- EXTERNOS: Desde un sitio Web y para facilitar con un solo clic el acceso a sitios preferidos: <a href=“http://www.rae.es”>Real Academia Española</a>
3.- ANCLAJES: Dentro de una página, si ésta es algo larga, se ponen desde un Índice con los temas o capítulos a donde queremos ir:
<a href=“#capitulo_1”>Capítulo 1- Historia</a>Y en el capítulo: <a name=“capitulo_1”></a>
TABLAS
• Todos los contenidos de una página Web se encuentran mejor organizados y en posiciones exactas si usamos para ellos las Tablas ocultas de HTML.
• El código fuente de una tabla sencilla es así:
<table><tr><td>Contenido</td></tr></table>
Estas etiquetas son del lenguaje HTML. En las Propiedades de la Tabla tenemos todas las opciones de tamaño, situación, color, borde, etc.
TEXTOS
Todos los textos que se incluyen en la página Web están configurados a través de las Fuentes disponibles en el lenguaje HTML del Asistente del constructor de la página.
Las fuentes del proyecto Web son interpretadas por los Navegadores instalados en los PC de los usuarios y de no disponer de las mismas, emplean fuentes predeterminadas.
<font face=“Arial”>Tipo Arial</font><font color=“blue”>Color azul</font><font size=“2”>Tamaño 2</font>
Lenguaje HTMLpara las fuentes
de los Textos
Lenguaje HTMLpara las fuentes
de los Textos
IMÁGENESLas imágenes a instalar en la página Web deben ser:
• De pequeño tamaño en KB para que la descarga sea rápida.
• De dimensiones adecuadas para ser vistas en pantalla sin usar barras de desplazamiento.
Lenguaje HTMLde Imágenes
Lenguaje HTMLde Imágenes
<img src=“domino.gif” width=“135” height=“121” alt=“Seis doble” />
SONIDOS
Código fuente de una página Web con sonido en
el Asistente FrontPage
Código fuente de una página Web con sonido en
el Asistente FrontPage
Se pueden insertar sonidos de fondo de una página Web. En el ejemplo y desde FrontPage, se ha puesto un corto sonido para oírse una sola vez al abrir la página. El mismo que hemos incrustado aquí.
El navegador solo podrá reproducir los formatos que reconozca.
El navegador solo podrá reproducir los formatos que reconozca.
CONCLUSIONES
Algunos trabajos del Autor:
www.centrodiamayorejido.blogspot.comwww.centrodiamayorejido.galeon.com
www.centroadultos.galeon.com www.mayoresvelez.galeon.com
www.mayoresejido024.blogspot.com
Algunos trabajos del Autor:
www.centrodiamayorejido.blogspot.comwww.centrodiamayorejido.galeon.com
www.centroadultos.galeon.com www.mayoresvelez.galeon.com
www.mayoresejido024.blogspot.com
Esta Presentación tiene como objetivoorientar a los iniciados e interesadosen el tema, de forma clara y breve.
Sin olvidar el apoyo necesario de la Biblioteca especializada, los cursos gratis on-line
y el tiempo de prácticas.
[email protected]@yahoo.es
Top Related