• Like
  • Save
Manual fron2 parte
Upcoming SlideShare
Loading in...5
×
 

Manual fron2 parte

on

  • 1,230 views

 

Statistics

Views

Total Views
1,230
Views on SlideShare
484
Embed Views
746

Actions

Likes
0
Downloads
1
Comments
0

3 Embeds 746

http://tecnosanfrancisco.blogspot.com 393
http://www.tecnosanfrancisco.blogspot.com 336
http://feeds.feedburner.com 17

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Manual fron2 parte Manual fron2 parte Document Transcript

    • Poner color, imágenes o música de fondo1. Color de fondoPodemos elegir el color de fondo de una página web siguiendo estos pasos:Vamos al menú Formato y seleccionamos Fondo.Nos sale la siguiente ventana: Aquí podemos elegir el color de fond2. Imagen de fondoEn la misma ventana de antes podemos elegir una imagen de fondo, en vez de un color de fondo. Normalmente se utilimágenes pequeñas, en formato gif o jpg. Tenemos que tener en cuenta que la imagen que elegimos, aunque sea pequno se va a aumentar hasta llenar la pantalla, sino que se va a repetir indefinidamente en forma de mosaico, como si fuazulejos.Vamos a ver algunas muestras:
    • Pincha en las imágenes para ver cómo queda una página web con esa imagen de fondo.En internet podemos encontrar cantidad de fondos para páginas web. Por ejemplo:http://www.graphicsbydezign.com/backgrounds.htmhttp://www.webpersonal.net/fym/fondos_web.htmhttp://www.zonagratuita.com/a-disenio/fondos_web_gratis.htmCuando encontramos en internet una imagen que nos gusta, tenemos que pinchar sobre ella con el botón derecho delratón y seleccionar Guardar imagen como... y guardarla dentro de nuestro sitio web, preferiblemente en la carpeta im3. Sonido de fondoEn una página web podemos poner un sonido de fondo. El formato más utilizado es el sonido MIDI (archivos .mid) porqocupa muy poco espacio. De lo contrario la página podría tardar muchísimo en cargar, sobre todo para quien no tengabanda ancha.Podemos encontrar una gran cantidad de midis con el siguiente buscador:http://www.vanbasco.com/ Aquí sólo tenemos que buscar por título, autor, tema o estilo y nos llevará a páginas con mCuando encontramos uno que nos gusta, hay que pinchar con el botón derecho sobre el enlace y seleccionar Guardardestino como... entonces lo guardamos en alguna parte dentro de nuestro sitio web. No estaría mal crear una carpeta"sonidos", igual que tenemos la carpeta images.Una vez que tenemos el sonido guardado, tenemos que ponerlo de fondo en la página web, siguiendo estos pasos:En el menú Archivo seleccionamos Propiedades. Nos saldrá esta ventana:
    • Donde pone sonido de fon pinchamos en examinar, buscamos el archivo de so que tenemos guardado, lo seleccionamos y damos a Aceptar.El texto y las tablas1. El textoIntroducir texto en Frontpage es básicamente igual que en el Word, pero conviene tener en cuenta un par de aspectos - No podemos (no debemos) elegir el tipo de letra que más nos guste. Hay que tener en cuenta que los usuariossolamente podrán ver la página tal como la hemos diseñado en el caso de que tengan instalada en su ordenador la fueque hemos utilizado. De lo contrario, su ordenador mostrará la página con cualquier otra fuente y los resultados puedeser muy malos (puede aparecer todo descolocado, al ser un tamaño diferente). Por esto, en las páginas web se utilizanlas fuentes más comunes, como son: Arial o Times New Roman. Un consuelo: para los niños podemos utilizar la Comicsin miedo. La tiene todo el mundo. - La tecla Enter realiza un salto de párrafo, equivalente a dos líneas. Si queremos un salto de línea simple, tenemos qpulsar la tecla de mayúsculas + la tecla Enter.2. Las TablasLas tablas se utilizan muchísimo en las páginas web, lo que pasa es que normalmente son invisibles. Se utilizan paraorganizar y distribuir los elementos de la página en el espacio: colocar un texto en varias columnas, poner un texto a laderecha de una fotografía, etc.Para comprender todo el potencial que nos ofrecen las tablas tenemos que tener en cuenta estas características:
    • - Dentro de las celdas de la tabla se pueden introducir todo tipo de elementos: texto, imágenes, etc.- Se pueden establecer propiedades diferentes para cada una de las celdas (un fondo diferente, por ejemplo)- Se puede insertar una tabla dentro de otra.- Se pueden combinar celdas para adaptar el diseño a nuestras necesidades.- Se pueden hacer tablas "invisibles": basta con poner Tamaño del borde = 0. Estas tablas "invisibles" se utilizan muchís 2.1. Insertar una tablaPodemos insertar una tabla si vamos al menú Tabla y dentro de él seleccionamos insertar >tabla.Entonces nos sale la siguiente ventana, donde podemos ajustar las propiedades de la tabla que vamos a crear: Primero elegimos el número de filas y de columnas. A continua elegimos la alineación (normalmente elegiremos centrar, salvo algún interés especial). Posteriormente podemos especificar el ancho: si elegimos 100 porcentaje, la tabla generada ocupará todo el ancho de pantal sea cual sea. Esto está bien, pero en algunos casos nos interesa ancho fijo, para que no se nos descoloquen los elementos que dentro (texto, imágenes, etc). Entonces introduciremos un núm en píxeles. Hay que tener en cuenta que los monitores antiguo tienen un ancho de 800 píxels, y los modernos de 1024, con lo - Una tabla de ancho 750 píxeles ocupará casi todo el ancho pantalla en un monitor antiguo. En uno moderno se verá exactamente igual pero con más espacio libre a los lados. - Una tabla de ancho 1000 píxeles se verá completa en un monitor moderno pero no en uno antiguo. A continuación elegiremos el tamaño y el color de los bordes. S elegimos tamaño cero tendremos una tabla invisible, utilizada colocar los textos y las imágenes. A continuación podemos elegir un color o incluso una imagen d fondo para la tabla. ¡OJO! Tiene que ser una imagen que esté dentro del sitio web (preferentemente dentro de la carpeta im No vale enlazar a una imagen que esté por ejemplo en Mis Imágenes, ya que cuando publiquemos nuestro sitio web, esa
    • imagen se va a quedar en nuestro ordenador. 2.2. Ajustar las propiedades de una celdaLas celdas son cada una de las casillas que componen una tabla. Se pueden ajustar las propiedades de cada una de lascasillas individualmente. Esto nos permite poner un fondo diferente para cada una, por ejemplo. Esto se hace pinchandcon el botón derecho del ratón dentro de la celda, y seleccionando propiedades de celda. En la ventana que nos salepodemos elegir el fondo, tamaño etc. Conviene ajustar la alineación horizontal y vertical, que es cómo queremos que spresente el texto dentro de esa celda. 2.3. Combinar celdasParecerá que ni siquiera con las tablas conseguimos colocar todo donde queremos, pero eso normalmente se solucionla opción combinar celdas:Esto era una tabla de 3x3, con borde azul y fondo amarillo:Esta celda más grande es el resultado de combinar dos celdas iguales a las dearriba.Para combinar celdas primero seleccionamos las que queremos combinar, arrastrando el ratón con el botón apretadoencima de ellas. A continuación vamos al menú Tabla > Combinar Celdas.También se puede meter una tabla dentro de otra. Este sería el resultado si en la tabla anterior metemos otra de 3x3 eprimera celda:Insertar un título en una página webSi queremos poner un título bonito a nuestra página web tenemos un problema: No conviene usar tipos de fuenteextrañas. Para que la página web sea visible por todo el mundo debemos limitarnos a fuentes de uso general, como TimNew Roman, Arial, Comic Sans o Tahoma.
    • En el FrontPage también disponemos de la herramienta WordArt que podremos usar siempre y cuando utilicemos lasfuentes mencionadas anteriormente. El wordart se inserta con el iconoLo que sí que se puede meter sin problemas en una página web son imágenes, en formato .jpg o .gif. (Estos son losformatos en los que se guardan las fotografías digitales). Así que la mejor solución será crear el rótulo con un programtipo Corel, Photoshop, Paint, etc. y guardar el resultado como imagen jpg dentro de la carpeta images de nuestro sitioA continuación sólo tendremos que insertar esa imagen en la página web, tal como veremos en posteriores capítulos.Los hipervínculosHemos llegado por fín a la esencia de las páginas web: los hipervínculos.Los hipervínculos son los enlaces que nos llevan de una parte a otra del documento, o de una página a otra. Se reconoporque al pasar sobre ellos el cursor se transforma en un dedo, que nos indica que ahí se puede "pinchar".1. Tipos de hipervínculosEste es un hipervínculo que nos lleva a un sitio web diferente. Si pinchas en él serás conducido a google.Este es un hipervínculo que nos lleva a una página de este mismo sitio web. Si pinchas en él te llevará al índice.Este es un hipervínculo que nos lleva a otra parte de esta misma página. Si pinchas aquí te llevará al final de este mismdocumento. Este hipervínculo está hecho sobre una imagen, no sobre texto. Si pinchas en la imagen también te llevarágoogle.2. Crear un hipervínculo Para crear un hipervínculo lo primero que tenemos que hacer es seleccionar el texto o la imagen sobre el cual tendráque pinchar los usuarios. Podemos seleccionar una palabra o una frase simplemente arrastrando el ratón sobre ella,manteniendo el botón apretado. Las imágenes se seleccionan simplemente pinchando sobre ellas. Una vez seleccionado el texto o la imagen, hacemos clic sobre ella con el botón derecho del ratón, y en el menú queaparece seleccionamos hipervínculo. Entonces nos sale esta ventana:
    • Si queremos hacer un enlace a otro sitio web escribiremos su dirección URL en la casilla donde pone dirección. Así:Si queremos hacer un enlace a otra página de nuestro sitio web, tenemos que buscarla en la lista de carpetas que nosaparece en el centro.3. Otros elementosAntes de pinchar en aceptar podemos, si queremos, introducir la "información de pantalla". Se trata de un mensajeexplicativo que aparecerá sobre el hipervínculo cuando los usuarios pasen el ratón sobre él. Prueba a pasar el ratón soel siguiente enlace, sin pinchar sobre él:GooglePara introducir la información de pantalla tenemos que pinchar en en la ventana de "insertarhipervínculo". Luego escribimos el texto que queramos y damos a aceptar.También podemos elegir el marco de destino de nuestro hipervínculo. Es decir, podemos elegir si queremos que la págde destino aparezca en esta misma ventana o en una ventana nueva. Vamos a ver dos ejemplos:Este hipervínculo abrirá google en esta misma ventana. Cuando aparezca, pincha en para volver a esta páginEste hipervínculo abrirá google en una ventana nueva. Cuando aparezca la nueva ventana, la puedes cerrar en ,yepágina seguirá estando aquí.Si no especificamos lo contrario, nuestros hipervínculos se abrirán en la misma ventana, como en el primer ejemplo. Si
    • queremos que se abran en una ventana nueva tenemos que pinchar en . Nos sale el siguientemenú: . Seleccionamos nueva ventana y damos a Aceptar.4. Los marcadoresSi queremos hacer un hipervínculo que nos lleve a otra parte de un mismo documento, primero tenemos que hacermarcadores, lo cual veremos en el capítulo correspondiente.Los marcadores1. Definición2. Insertar marcadores3. Enlazar a los marcadores1. DefiniciónSeguramente hemos visto alguna vez una página web que arriba del todo tiene un índice de los apartados y debajo tiecontenido. El ejemplo más cercano es esta misma página. Arriba tenemos el índice, y cada uno de los títulos es unhipervínculo que nos lleva al correspondiente apartado dentro de esta misma página. A lo largo de la página tambiéntenemos otros hipervínculos que nos llevan de vuelta a la parte superior.Hemos visto que para hacer hipervínculos tenemos que especificar a qué página web queremos que nos lleve el enlacepero en este caso el hipervínculo nos tiene que llevar a un lugar de esta misma página. Para ello, antes de hacer loshipervínculos tenemos que hacer los marcadores, que son marcas ocultas que definen zonas dentro de una página. Loponemos donde queremos y luego al hacer los hipervínculos solamente tendremos que decir "llévame al marcador 1,llévame al marcador 2, ..." (no con estas palabras, claro).Volver arriba2. Insertar marcadoresPara insertar un marcador primero ponemos el cursor en el lugar deseado (normalmente al inicio de un apartado).Entonces vamos al menú Insertar > marcador y nos sale una ventana como esta:
    • Conviene poner un nombre al marcador que nos permi identificarlo fácilmente. En este ejemplo he puesto "definición" porque así sería el marcador correspondien primer apartado de esta página.Cuando insertamos un marcador nos aparecerá el símbolo en el lugar correspondiente. Este símbolo es para quesepamos que ahí hay un marcador, pero no aparecerá en la página web publicada.También podemos poner un marcador en la parte superior de la página y llamarlo top o arriba.Volver arriba3. Enlazar a los marcadoresYa solo nos queda hacer los hipervínculos que nos lleven a esos marcadores. Para ello seguimos el procedimiento de hun hipervínculo normal: seleccionamos el texto o imagen correspondiente, pinchamos encima con el botón derecho yseleccionamos hipervínculo. En la ventana que nos aparece pinchamos en y nos sale la lista de marcadoreque hay en la página actual. Entonces seleccionamos el marcador deseado y ya está.Volver arribaLas imágenesUno de los elementos que más enriquecen los sitios web son las imagenes.1. Insertar imágenes desde archivoCuando tenemos una imagen guardada (siempre que sea dentro del sitio web, preferiblemente en la carpeta images)
    • podemos insertarla en una página web de la siguiente manera:Vamos al menú Insertar y seleccionamos Imagen > desde archivoA continuación usamos la ventana de exploración hasta encontrar la imagen correspondiente. La seleccionamos ypinchamos en Aceptar.2. Insertar una imagen desde el catálogo de imágenesEsta es una de las opciones más interesantes de FrontPage 2003. Si vamos a Insertar > Imagen > Imágenes Prediseñadanos encontraremos con una ventana como esta: Con esta opción podemos buscar imágenes entre unos catálogos online amplísimos. En el ejemplo de esta imagen, he insertado la palabra "coleg he pinchado en buscar. Entonces nos salen las miniaturas y sólo nos qued elegir una y hacer doble clic para que nos la inserte en la página web. Para utilizar las imágenes prediseñadas de FrontPage se requiere conexió internet. Cuando en una página web hayamos insertado imágenes de internet nos ocurrir lo siguiente: al ir a guardar la página web (Archivo > Guardar) nos aparecerá la siguiente pantalla: Est a ven tan a sirv e par a dec irle al Frontpage en qué parte de nuestro propio sitio web queremos guardar la imagen que hemos incrustado en la página. Es conveniente pinchar en Cambiar carpeta... y seleccionar la carpeta images.
    • 3. Insertar una imagen desde internetSi encontramos en internet una imagen que nos interese y cuyo uso esté permitido libremente, podemos insertarla ennuestra página de la siguiente manera:Navegando por internet, encontramos una imagen, pinchamos sobre ella con el botón derecho y seleccionamos CopiaLuego, en nuestra página web pinchamos con el botón derecho en el lugar deseado y seleccionamos Pegar.Conozco un par de sitios que permiten copiar sus imágenes con la condición de citar la procedencia (incluyendo un enlsu página). Se trata de:ARTIE: Con cientos de imágenes animadas.GRAPHICSBYDEZIGN: con diseños especialmente pensados para sitios web.Seguro que hay muchos más, pero no he buscado mucho.Por cierto, una imagen animada (normalmente llamados gifs animados) es esto: Pues eso, una imagen que se mueve.4. Modificar imágenesSi pinchamos sobre cualquiera de las imágenes que hemos insertado en nuestra página, nos aparecerá la barra deherramientas de imagen:Si no aparece iremos al menú Ver > Barras de herramientas > Imagen. Insertar imagen desde archivo. (Una imagen que está dentro de nuestro ordenador). Insertar un texto superpuesto a una imagen. Crea una miniatura de la imagen.
    • Coloca la imagen en posición absoluta (por encima de todas las demás capas) Estos iconos colocan la imagen por delante o por detrás de otras capas. Estos son para rotar la imagen 90 º, a la izquierda o a la derecha.Rotar: --> Estos son para voltear la imagen, horizontal o verticalmente:Voltear horizontal: Voltear vertical: Ajustar contraste y brillo de la imagen. Recortar: Si queremos recortar un trozo de la imagen (por ejemplo, de una foto de cuerpo entero quedarnos sólola cara) hay que pinchar en este botón, luego seleccionar el trozo deseado y luego volver a pinchar en el botón. Definir color transparente. Si insertamos una imagen como esta sobre un fondo de color:Si queremos que la imagen se integre en el fondo tenemos que hacer transparente el color blanco de la imagen. Eso sehace con la herramienta , que vuelve transparente el color que pincha. El resultado es este:
    • Ajustar color: poner en blanco y negro, escala de grises, etc. Dar efecto biselado:Sin biselado: Con biselado: Volver a muestrear. Es necesario pulsar este botón cada vez que se cambie el tamaño de una imagen, para que qumemorizada con el nuevo tamaño. Estas herramientas sirven para definir zonas activas en una imagen. Esto sirve para definir zonas conhipervínculos diferentes dentro de una misma imagen. En esta imagen, cada futbol nos llevará a su propia págin pinchamos sobre él. Es porq hemos definido zonas activa Para ello elegimos la herramienta: Definir zona rectangula Definir zona elíptica o circular Definir zona poligonal (e más utilizado para formas n definidas. Se define el conto
    • de la zona activa punto a puCuando definimos una zonadentro de la imagen con estherramientas nos sale almomento la ventana en la qtenemos que insertar elhipervínculo (la dirección aque nos tiene que llevar cadzona activa)