Tutoriales de programas

Edición páginas web

I Edición páginas web con Page Mill

Objetivo: crear una página personal con nuestro CV
En esta práctica vamos a diseñar un curriculum utilizando el programa de edición de páginas Page Mill de la casa Adobe. Aunque hay programas más modernos este es muy didáctico porque lo que es ideal para dar los primeros pasos.

1) Primeros pasos: crear el site

Hacemos una carpeta en [Mis Documentos] con nuestro nombre o apellido (vamos a suponer que es Pepe) para guardar las páginas web y dentro una carpeta llamada dibujos, para poner las imágenes. Queremos que el CV tenga cuatro páginas web:

Ejectuamos el programa Page Mill y aparecerá una página web de color gris que tiene el nombre del archivo untitled.htm

Es importante darse cuenta que no sólo vamos a hacer una página web sino un conjunto de ellas, es decir, un SITE. El primer paso será crear la estructura del site.

Haga clic en la barra de menú en la opción [SITE] , y luego elija la opción [NEW]. Escriba en el cuadro de diálogo "CV de..." y ponga su apellido.

Para poner la [location] pulse donde pone [Browse] e identifique la carpeta de Mis Documentos donde está su apellido. Cuando termine haga clic en el botón CREATE.

Cuando haya hecho esto, en el programa podrá ver la estructura que ha creado el programa. En [FILE] [SAVE PAGE AS] guarde la página en blanco con el nombre index.htm. Esta será la página principal del sitio, no cambie este nombre.

Para hacer más páginas en blanco tiene varias opciones, por ejemplo mantenga abierta la página index.htm y hagar [FILE] [SAVE PAGE AS]. Estaremos así creando páginas en blanco, tantas como las que sean necesarias, y que en nuestro caso deberemos llamar: formacion.htm, experiencia.htm y otros.htm.

Consejo: no ponga ñ ni acentos, espacios en blanco
En los nombres de los ficheros no ponga eñes ni acentos ni espacios en blanco o caracteres raros. Piense que ese será el nombre de su página y no se podrá acceder o será complicado.

Otra forma de hacer lo mismo es hacer click con el botón derecho sobre la carpeta que lleva su apellido y elija la opción [FILE] [NEW PAGE], para crear una nueva página.

Al terminar de crear y nombrar todas las páginas, su estructura deberá quedar como lo muestra la figura de la izquierda.

Ahora que tenemos ya creadas todas las páginas (aunque están en blanco), podemos empezar a escribir en ellas.

La práxima vez que entre al programa, puede hacer [SITE] [LOAD] y elegir su CV.

Truco para cargar el sitio directamente
Desde Windows situe el cursor en la carpeta Pepe y con el botón derecho del ratón puede hacer OPEN AS SITE IN PAGE MILL. A veces es más cómodo.

2) Formato: negrita, cursiva, etc.

Empezamos con la página index.htm, para lo cual vamos a hacerle un doble clic sobre su nombre.
De este modo se abrirá, aunque no veremos nada en ella pues está en blanco.

En primer lugar escribiremos arriba el Title: "CV de Pepe...". Es muy importante pues es el lo que se fijan los buscadores.

Y ya podemos empezar a escribir.

En el menú STYLE o en la barra de herramientas tenemos la posibilidad de cambiar los estilos: negrita, cursiva, etc. De vez en cuando vaya al menú FILE y ejecute la opción SAVE PAGE, con lo que estará grabando esta página.

3) Párrafos

En el menú FORMAT o en la barra de herramientas tenemos la posibilidad de cambiar el tipo de párrafo. El normal es Paragraph. Por ejemplo Bullet list se usa para listados.

4) Colores

Pulsando la tecla F5, o en el menú VIEW -> SHOW COLOR PANEL aparece el panel de control con los colores más habituales.

Pulsando pulsando en la pestaña inferior con forma de triángulo obtenemos más colores.

Los colores se pueden personalizar pulsando en la pestaña inferior con forma de triángulo y ampliando la gama de colores. Después se arrastra el color seleccionado sobre los 16 más utilizados.

Así se puede cambiar el color del texto y de otros objetos como el sombreado interior de una tabla.

5) Línea horizontal

INSERT -> HORIZONTAL RULE permite insertar una línea horizontal.

Estas líneas son objetos y todos objetos se pueden modificar con la opción VIEW -> SHOW INSPECTOR, o bien pulsando la tecla F8.

El inspector sirve para cambiar la anchura y tamaño de la línea, así como si lleva sombra.

También sirve para cambiar las preferencias de la página, como el color del fondo, el tamaño de un dibujo o los bordes de una tabla, como veremos.

6) Dibujos

Por ejemplo, podemos coger la imagen de la izquierda y guardarla en nuestra carpeta dibujos.

A continuación, para insertar la imagen lo hacemos en el menú INSERT -> OBJECT -> IMAGE.

Podemos centrar las imágenes en relación al texto.

Para cambiar el tamaño podemos usar el inspector, recordemos que la Tecla F8, o VIEW -> SHOW INSPECTOR.

Para editar el dibujo situamos el cursor en la imagen y pulsamos [Control D] o bien EDIT -> IMAGE -> OPEN IMAGE WINDOW. La imagen aparece en una pantalla nueva donde se pueden hacer efectos como la opción "Transparency" si está en formato gif.

7) Tablas

Crearemos una tabla de tres columnas y tres filas, en la que insertaremos su fotografía y el texto que corresponda.

INSERT -> TABLE

 Empresa  Puesto  Fecha
 Ebroman  Contable  junio 2001-diciembre 2001
 Talsa  Jefe Contabilidad  diciembre 2001 - marzo 2002

Y con el inspector F8 y el panel de colores F5 sombrear, quitar o poner un borde, centrar las filas o columnas.

Con el botón derecho del ratón se pueden insertar filas o columnas.

8) Enlaces externos

Es muy sencillo, se selecciona las palabras donde va a ir el link y en la parte de abajo a la izquierda donde pone [Link To:] se pone la dirección, empezando con http://.

Ejemplo: He estudiado en la Universidad de Zaragoza

Podemos conseguir que el enlace se abra en una ventana nueva, en la misma, etc. Para ello situamos el cursor sobre el enlace y con el botón derecho del ratón aparece un nuevo menú, que permite seleccionar la opción elegida.

Para visualizar cómo va quedando la página pulsamos en la parte superior derecha, en el icono: Para volver a editar la página, pulsamos en el icono:.

9) Enlaces internos

También podemos poner un enlace a otra página nuestra, por ejemplo a experiencia.htm. En ese caso se selecciona las palabras donde va a ir el link y en la parte de abajo a la derecha donde pone [Browse] se selecciona la página experiencia.htm

Truco para evitar los enlaces erróneos

Vd puede cambiar el nombre de uno de los ficheros y automáticamente se modifican los ficheros que tienen vínculos a ese ficheros. Por ejemplo si decide renombrar el fichero experiencia.htm y llamarle trabajo.htm el programa le avisará que en index.htm hay un enlace a experiencia.htm que debe ser cambiado a trabajo.html. Esto lo hace programa.

En cambio si cambia el nombre del fichero desde windows no se actualiza y habrá un error, un enlace viudo. Por eso los cambios en los nombres de los ficheros deben hacerse desde el editor de páginas web.

El programa también chequea errores y comprueba que los enlaces externos funcionan. Donde Pone Errors, Externals y WWW links.

Esto también sirve para descarcar un documento en word, pdf, excel. Simplemente en [Browse] se elige el documento que queremos que descargue el usuario.

Truco para hacer documentos pdf
El programa para leer documentos pdf, es el Adobe Acrobat Reader, disponible en la página de Adobe (http://www.adobe.com). pero para escribir documentos pdf hay que comprar el Adobe Acrobat. No obstante en esta página nos dejan convertir 5 documentos Word a Pdf gratis (https://createpdf.adobe.com). Funciona online, no hay que instalar nada.

Para poner un enlace interno a una parte de la página el procedimiento es es:

 

 Por ejemplo, al pinchar aqui

nos desplazamos aqui

10) Pasteboard

El pasteboard sirve para cortar o copiar en el mismo iconos, fragmentos que utilizamos con frecuencia y que luego podemos pegar en las páginas.

VIEW -> SHOW PASTEBOARD

Podemos arrastrar un objeto como una tabla, un dibujo, un icono y queda allí. Luego siempre podemos visualizar el psteboard y arrastrar el objeto a la página.

Se recomienta arrastrar el dibujo manteniendo pulsada la tecla control para copiar en vez de cortar.

11) Fondo página

Pulsando F8 o VIEW -> SHOW INSPECTOR podemos cambiar el fondo de la página o poner una imagen o background que se repite en toda la página, normalmente un fondo tipo marmol.

12) Ver HTML

Aunque estos programas son muy sencillos de usar siempre es interesante ver el código fuente para conocer como el lenguaje HTML que hay por debajo. Lo podemos hacer en VIEW -> SOURCE MODE o [Control H].

Truco para copiar efectos vistos en otras páginas
Esta opción de ver el código fuente sirve para cuando uno ve efectos interesantes en otras páginas copiar el cógigo y pegarlo en nuestras páginas. Como ejercicio, de la página de inicio de Ciberconta podemos traernos este efecto que permite cambiar de sección y adaptarlo a las secciones de nuestro CV.

<Applet>: algunos efectos especiales para las páginas
Otros efectos son las etiquetas <APPLET> </APPLET> que permiten la ejecución de un programa externo escrito en el lenguaje de programación Java. Hay applets muy variados. Podemos ver un ejemplo de uno de estos applet pinchando aquí.

Resumen de opciones

File
New Page - Crea una página nueva
Open - Abre una página ya creada
Place - Sirve para insertar un gráfico o cualquier otra cosa. Al seleccionar esta opción, aparecerá una caja para buscar el archivo, pero con una particularidad: un botón Place (que inserta la imagen en la página) y otro botón Link to (que crea un enlace con el archivo que le hayamos indicado - esta opción es ideal para "colgar" enlaces a nuestros documentos).
Save Page - Guarda la página que tengamos seleccionada.
Save Page As - Guarda la página con otro nombre, o en otra carpeta.
Save Frameset - Cuando dividimos la página en dos frames, lo que hacemos es trabajar con 3 archivos a la vez. Siempre uno de ellos guarda la "rejilla" de frames que hemos creado. Este archivo es otra página (otro archivo html), que es el frameset.
Save Frame - Para guardar el frame que tengamos seleccionado.
Save Frame as - Para guardar el frame con otro nombre (o en otro sitio).
Save everything - Guardar todo. Si aún no hemos salvado nuestras páginas, nos irá preguntando dónde y con qué nombre guarda cada fichero (primer los frames, luego el frameset).

Edit
Undo - Para "deshacer" lo último que hayamos hecho.
Cut, copy, paste - Igual que en cualquier procesador de textos, sirve para cortar, copiar, pegar lo que tengamos seleccionado.

View
Show (o Hide) Inspector - Muestra / oculta la ventana Inspector. Esta ventana es realmente importante.
Show (o Hide) Pasteboard - Esta ventana sirve de "portapapeles" entre las aplicaciones. Nosotros podemos arrastrar a esta ventana una imagen (por ejemplo), un link, etc. También es útil si queremos linkar dos ventanas. En lugar de abrir las dos y linkar de una a otra arrastrando el icono de página (que está en la esquina sup. izda de la ventana) sobre el texto a enlazar, podemos arrastrar los iconos de página al "portapapeles", creando así un enlace con el nombre de la página, y luego arrastrar ese enlace a la página donde queramos meter el link.
Show (o Hide) ColorPanel - Esta ventana es una paleta de colores. Podemos dar color a un texto seleccionándolo y arrastrando el color que queremos sobre él.

Insert
Anchor - Inserta un "ancla" en la página. Después de insertarla, podemos utilizar la ventana "Inspector" para cambiarle el nombre y así poder crear enlaces al ancla.
HTML Source - Sirve para ver directamente el código real de la página. Viene fenomenal para según qué cosas.
Split Horizontally - Divide la página (o el frame que tengamos seleccionado) en dos frames horizontales. Tened en cuenta que al dividir estamos creando nuevos archivos, que hay que salvar uno por uno con la opción file -> Save Frame, y además salvar el frameset, que es realmente la "página maestra".
Split Vertically - Lo mismo, pero en vertical.
Download Statistics - Esta opción os cuenta lo que tardaría vuestra página en cargarse a través de Internet, y lo que ocupa en total.

Style
Las distintas opciones de este menú sirven para cambiar el estilo de los textos (negrita, etc.). Las dos últimas opciones (Increase Font Size y Decrease Font Size) sirven para aumentar y disminuir el tamaño relativo de los textos.

Format
Estas opciones sirven para dar formato a los textos.
Indent Right - Sangra (desplaza) el texto a la derecha.
Indent Left - Sangra el texto a la izquierda.

Search - Para hacer búsquedas en la página (o en el código HTML, que es donde viene realmente bien).

Window - Este menú muestra/oculta las distintas ventanas que se pueden utilizar en PageMill, además de las ventanas web que tengamos abiertas.

Para aprender más: La siguiente lección amplía información sobre el HTML con trucos para webmasters (http://ciberconta.unizar.es/leccion/html).

Ir a CiberConta© Citar como: Serrano Cinca, C (2002): "Tutoriales sobre varios programas de Internet", [en línea] 5campus.org, Sistemas Informativos Contables <http://www.5campus.org/leccion/web> [y añadir fecha consulta]este  Inicio leccion
[Índice]