CURSO DE INTRODUCCIÓN A LINEX
Manual abreviado de Composer para generar páginas web
Antonio Jesús Espinosa Pérez
ÍNDICE DE CONTENIDOS
Vista general del escritorio
de COMPOSER
El navegador de páginas web MOZILLA incluye un editor de página web, el COMPOSER. Este programa se constituye como uno de los más sencillos para diseñar páginas web. Aunque evidentemente existen herramientas para el diseño web mucho más potentes, si de lo que se trata es iniciarse en la elaboración de página web, COMPOSER es un instrumento muy eficaz, que podrá introducirnos por sus semejanzas a programas más sofisticados.
LA
CREACIÓN Y EDICIÓN DE UNA PÁGINA WEB
En primer lugar, abre el MOZILLA NAVIGATOR como si fueses a navegar por la red. Tienes distintas opciones, desde el icono correspondiente, una estrella roja en la barra de herramientas superior del escritorio de LinEx, o desde el menú de programas. Una vez hecho esto, te encontrarás en el familiar entorno del Mozilla Navigator.
La
creación de una nueva página web:
Ve
al menú File, y haz click en New, y a continuación a Blankpage
to edit. Se abrirá COMPOSER con una siempre temible página en blanco
dispuesta para que hinquemos el diente.
La
edición de una página existente:
Accede a la página web que quieras modificar, por
ejemplo, www.malted.com; la página se
carga, pero no se puede retocar lo que allí aparece. Para editarla, de nuevo en
el menú File, haz click sobre el comando Edit page. Se abrirá el
COMPOSER, desde el cual sí que se podrá modificar la página, de la misma forma
que antes elaborábanos una página nueva. Si quieres ver los cambios realizados,
debes guardar la nueva página en tu disco duro y a continuación puedes verla con MOZILLA NAVIGATOR.
Desde
el Mozilla Navigator, también podemos acceder a COMPOSER en el menú Tasks, y abajo Composer.
Guardar
documentos:
Para guardar un documento web en nuestro disco duro,
basta con que una vez hayamos llegado a él mediante el explorador MOZILLA desde
la barra de direcciones, vayamos al menú File, y a continuación a la
opción Save as. Igualmente podremos guardar páginas en el servidor
remoto utilizando un programa de gestión de transferencia de archivos, FTP
(GFTP es el programa que se nos proporciona en la versión de GNU LINEX).
|
Práctica 1: a) Abre
MOZILLA NAVIGATOR b) Crea una página nueva. c) Escribe
algunas líneas de texto, por ejemplo, un breve ejercicio de búsqueda en
Internet. d) Con el NAUTILUS y dentro del directorio home/linex (si es que así se denomina el usuario) crea una carpeta llamada curso y guarda allí la página que acabas de crear. Denomina el nuevo archivo como sherry.html e) Junto a este archivo .html, crea una nueva carpeta y llámala archivos. f) En la carpeta compartidos se encuentra un archivo denominado fondo-sherry.jpg. Cópialo y trasládalo a la carpeta archivos que has creado con anterioridad. |
CÓMO ESTABLECER LAS PROPIEDADES DE PÁGINA
Título y descripciones
Ahora tenemos nuestra nueva página sherry.html abierta con COMPOSER, de manera que podremos comenzar a modificarla. Lo primero que deberás hacer es establecer las propiedades de la página.
1.- Ve al menú Format y abajo pincha sobre Page
Title and Properties.
2.- El cuadro de Propiedades de la Página (Page
properties) aparecerá en la pantalla. A continuación se refiere la información
que deberás incluir:
TÍTULO: Este es el nombre de documento que aparecerá
en la barra longitudinal de la ventana de MOZILLA. Debe tener entre 5 y 15
palabras.
AUTOR: escribe tu nombre
DESCRIPCIÓN: La mayoría de buscadores despliegan
este texto cuando seleccionan cada página. No debe tener más de 200 caracteres
en total.
Colores y fondo de página
Desde
el menú Format, selecciona Page Colours and Background.
Por defecto aparece seleccionada la combinación de
colores de Mozilla. Para cambiar cualquiera de los colores de la fuente o el
color de fondo haz click sobre el cuadro que se encuentra junto al elemento que
quieres cambiar. Aparecerá una paleta de colores de donde podrás elegir. Ten
presente que si cambias la combinación de colores preestablecida podrás causar
cierta confusión dado que lo habitual es que el azul señale un vínculo no visitado
y el color violeta oscura señala un vínculo ya visitado.
Añadir una imagen como fondo de la página:
Señala la casilla Use Image en el cuadro de diálogo
anterior, Page Colours and Background. Vamos a insertar como fondo de
esta página la imagen fondo-sherry.jpg que con anterioridad has
trasladado a la carpeta archivos. También se puede explorar,
browse, pinchando en la casilla choose file hasta alcanzar el archivo
que vamos a colocar como fondo.
Es importante que la imagen permanezca en su
ubicación original y que traslademos al archivo .html junto con la carpeta archivos de manera que se cargue
siempre bien desde el servidor, si la página está publicada, bien tengamos la
página guardada en nuestro disco duro.
|
Práctica 2: en el cuadro Colors
and Background 1.- Cambia el color del
texto 2.- Añade una imagen como
fondo de la página sobre la que estás trabajando. Utiliza el archivo fondo-sherry.jpg. 3.-A continuación, en la
parte de abajo, activa la casilla ver
HTML de COMPOSER para ver el código fuente .html. Esto puede hacerse
igualmente desd MOZILLA en el menú View y a continuación View
Sourcecode. |
Existen dos opciones para añadir texto a tu página
web:
1.
Puedes
escribir texto en COMPOSER como si se tratase de cualquier procesador de
palabras.
2.
Puedes importar texto de otros archivos,
como de otra página web o de un procesador de texto, etc.
Cómo importar texto
Se procede de manera semejante a cuando se copia texto de un archivo de texto y se pega en otro archivo de texto.
|
Práctica 3:
5.
Intenta la misma operación a partir de una página web cualquiera a la que
accedas mediante MOZILLA. |
Cómo modificar la apariencia del texto
Se puede modificar la apariencia del texto con los
botones de la barra de herramientas que se encuentra. Todas las opciones
asociadas con estos botones pueden manipularse desde el menú Format (ver
figura siguiente).
1 22 3 4 5 62 72
Barra de formato
1.
PRESET
TEXT STYLES: diferentes estilos de texto. Todos van en negrita por defecto.
2.
PALETA
DE COLORES
3.
TAMAÑOs
DE FUENTE
4.
ESTILOS:
NEGRITA, CURSIVA Y SUBRAYADO
5.
VIÑETAS:
para elaborar listas.
6. sangría
de párrafo: mel
botón con la flecha hacia la derecha te permite realizar la sangría de un
párrafo completo. Para reducir o eliminar esta sangría de un párrafo utiliza el
botón de la izquierda con la flecha que señala a la izquierda.
7. ALINEACIÓN: derecha,
izquierda o centrado.
Para cualquiera de estos
estilos puedes seleccionar la opción primero y a continuación escribir texto.
El texto reflejará las opciones que se hayan elegido. Igualmente, se puede
seleccionar un fragmento del texto y a continuación seleccionar la opción de
estilo que se desee para obtener el mismo resultado.
|
Práctica 4: realiza
distintos cambios en el formato de la página que estás elaborando. 1.- Incrementa el tamaño de
la fuente del título mediante un estilo predeterminado, por ejemplo, el Header
1. 2.- Cambia el color del
título. 3.- Subraya el título. 4.- Céntralo. |
El uso de listas o viñetas:
Las listas son una manera sencilla de agrupar la información. Hay de dos tipos:
1.
Numeradas
(como ésta misma)
2.
Bulleted:
marca las distintas entradas mediante pequeños iconos (ver la lista que aparece
en creación de links más abajo).
Para crear una lista haz
click en cualquiera de los dos iconos de la barra de herramientas de formato
(la que contiene otros comandos de formato).
También se puede convertir
texto en lista. Se selecciona con el ratón y a continuación se hace click en el
tipo de lista que deseamos usar.
|
Práctica 5: 1.- Escribe una serie de
frases respecto al tema sobre el que estés trabajando. 2. Conviértelo en una lista
numerada. |
LA CREACIÓN DE LINKS
Los links son texto que
aparece resaltado, también imágenes incrustadas en la página web, que permiten
a los usuarios “saltar” a una ubicación diferente cuando hacemos click en
ellos. Hay varios tipos:
·
Links
a puntos dentro de una misma página web (anchors)
·
Links
a otras páginas web, bien en nuestro sitio o directorio web, o bien a páginas
web remotas.
·
Links
a direcciones de correo electrónico.
·
Links
a otros archivos que nos permiten descargar en nuestro equipo archivos
comprimidos, archivos de texto, gráficos, archivos .pdf, archivos de sonido,
archivos de video.
Todos estos enlaces se crean
de una forma semejante: se hace click en el icono con la cadena link de la
barra de herramientas en la parte superior de la pantalla o desde el menú Insert
y abajo hasta Link.
Icono de enlace o
hiperenlace
Aparece el cuadro de Links.
En el espacio Link text
escribimos el texto que aparece resaltado (en azul por defecto, según la
combinación de Mozilla). Cuando se hace click sobre esta frase o palabra, el
NAVIGATOR te llevará al lugar o abrirá el archivo que aparece designado en la
sección Link location.
El espacio marcado como Link
location aparece el archivo, página web o dirección de correo electrónico a
la que se nos remite tras pisar sobre el enlace.
Anchors
Icono para marcador o enlace
en la propia página
Vienen a ser lo que los
marcadores en los programas inspirados por Microsoft. Son enlaces dentro de una
misma página. Para ser usados, deben crearse previamente.
Una lista de anchors o
marcadores aparece en el cuadro de Links. Si no aparece, haz click en el cuadro
More Properties.
Vínculos a archivos.
Podemos crear enlaces hasta
distintos tipos de documentos: por ejemplo, una canción o un clip de video, un
archivo de texto, etc. Para ello, debemos escribor el nombre y dirección del
archivo en la casilla Link location. A continuación será la
configuración de nuestro equipo la que determine cómo se abrirañan estos
archivos: así, si es un archivo de sonido con extensión .mp3, al acceder a éste
una vez descargado se abrirá el Winamp, programa que lee por defecto este tipo
de archivos en la actual configuración de LINEX.
La creación de vínculos con
direcciones de correo electrónico.
De nuevo, el funcionamiento
es similar a los enlaces señalados con anterioridad. Basta escribir en el
cuadro Link Location la siguiente secuencia mailto: seguida directamente, sin
espacios, de la dirección de correo electrónico. Así: mailto:nombre@terra.es.
|
Práctica 6 En la parte inferior de tu
página crea 1.- Un enlace con la página
web que desees. 2.- Un enlace con tu
dirección de correo electrónico. 3.- Crea una segunda página
web en el directorio curso. Llámala sherry2.html. Crea en la página
sherry.html un enlace con la nueva página que has creado. |
OTROS ELEMENTOS
Anchors
Como mencionaba en la sección de enlaces, los anchors te permiten conectarte con lugares específicos dentro de la misma página web. Para crear un anchor, pon el cursor en el lugar de la página a la que el usuario debería ir cuando se haga click en el enlace.
Una vez que hayas dejado el
cursor en el punto donde quieres insertar uno de estos anchors (enlaces
internos), haz click en el icono del ancla de la barra de herramientas que se
encuentra en la parte superior de la pantalla, o ve al menú Insert y a
continuación anchor.
Se pedirá que escribas el
nombre del anchor. Estos nombres deben consistir exclusivamente en una palabra
sin espacios. Una vez que hayas hecho esto, aparece el icono de un ancla para indicar su ubicación. Esto te
permitirá localizar estos marcadores internos miestras estás diseñando la
página, si bien no serán obviamente visibles en la página web resultante, es
decir, la que vemos mediante MOZILLA NAVIGATOR.
|
Práctica 7: inserta un anchor en tu página web. |
Líneas
Las líneas horizontales son
una forma sencilla de separar las secciones de una página web. Además,
funcionan mejor que las línes gráficas por ser las primeras más flexibles y se
ajustan al ancho de cualquier navegador web y con cualquier resolución de
pantalla.
Para insertar una línea haz
click en el icono correspondiente de la barra de herramientas, horizontal
line, o ve
al menú Insert y abajo a Horizontal line.
Para ajustar las porpiedades
de esta línea, haz click sobre ella con el botón derecho del ratón y selecciona
Horizontal Line Properties. También se puede hacer click en la línea
para seleccionarla y a continuación ve al menú Format, y de éste
selecciona Horizontal line Properties. Esta opción sólo aparecerá en el menú
Format si la línea está seleccionada.
El cuadro de las propiedades
de línea contiene opciones que te permiten modificar la altura (height),
anchura (width) y la alineación (alignment) de la línea insertada.
|
Práctica 8: añade una línea
horizontal en cualquier lugar de tu página. Cambia las propiedades de manera
que sea de 5 pixels altura (height), el 80% del ancho de pantalla y esté
centrada. |
Caracteres especiales:
Los podrás encontrar en el
menú Insert y a continuación abajo Character and Symbols.
La edición de la fuente HTML:
Haz click en la etiqueta <HTML
Source>
que se encuentra en la parte inferior izquierda del escritorio de COMPOSER.
Desde aquí se puede modificar directamente el código de la página, si te
resulta familiar este tipo de lenguaje. De lo contrario, símplemente echa una
ojeada sin más pretensiones.
Las tablas son una manera muy eficaz de organizar y
agrupar la información. De hecho, muchas páginas web recurren a las “tablas
ocultas”, es decir, de bordes invisibles, para organizar la información.
A continuación aparece un ejemplo de tabla sencilla:
|
Para insertar una tabla, haz click en el icono Table
de la barra de herramientas. También se puede obtener el mismo resultado si
hacemos click en Insert y abajo Table. |
Icono de tabla |
El cuadro de propiedades (ver figura siguiente) te
permitirá seleccionar el número de filas y de columnas, el ancho de la tabla y
el tamaño de los bordes en pixels.
|
Aspecto del cuadro de inserción de tabla |
Cuadro de editor de propiedades avanzadas de tabla |
Si hacemos click en el cuadro Advance edit aparece
el cuadro de Advance Property editor, mediante el cual podremos modificar las
siguientes características de la tablas:
· Los márgenes interiores de
la celda (CELL PADDING). Carece de efecto en cuanto al tamaño del borde de la
tabla. Si lo incrementamos también lo hará el número de pixels entre el borde y
el texto o imagen de la celda.
· El espacio en pixels que
existe entre celdas (CELL SPACING).
· El tamaño de los bordes de
la tabla (BORDER), una caracteristica que ya aparece en le cuadro de Insert
Table.
· La anchura de la tabla con
relación a la página. Por defecto nos aparece un ancho de 100%.
Para modificar una tabla existente:
Haz click dentro de la tabla y a continuación ve a Table
Cell Properties en el desplegable del menú Format. También se puede
acceder a este cuadro si haces doble click con el botón izquierdo sobre la
tabla y surge el cuadro de propiedades de la tabla.
El cuadro de propiedades de la tabla es similar al
de insertar una tabla del comienzo de esta sección. La única diferencia es que
hay etiquetas adicionales en la parte superior y que sirven para modificar las
propiedades de la tabla completa, de una fila o sólo de una celda.
Para borrar una celda, fila o tabla completa pon el
cursor en la tabla, fila o celda que quieras eliminar. Haz click con el botón
derecho y aparece el cuadro emergente que aparece a continuación.
Menús emergentes de tabla
|
Práctica 9: Inserta una
tabla en el documento que estás elaborando. Puedes colocar algunos enlaces en
el texto o imágenes que pegues en el interior de las celdas. |
GRÁFICOS: CÓMO INSERTAR IMÁGENES
Para insertar una imagen haz click en el icono de la
imagen en la barra de herramientas (ver imagen inferior) o desde el menú Insert
y a continuación Image.
Icono de imágenes
Aparece el cuadro de Propiedades de Imagen que
aparece a continuación. Posee tres etiquetas que permiten modificar también las
dimensiones y la apariencia de la imagen que hayamos elegido.
Al pisar la casilla CHOOSE FILE nos aparece una
ventana con un navegador que nos permite seleccionar una imagen: por ejemplo,
una imagen que se encuentra en la carpeta curso.
Cuadro
de propiedades de imagen: activada la opción Image
El cuadro B de propiedades de la imagen nos permite modificar el tamaño de ésta.
Cuadro
de propiedades de imagen: activada la opción Dimensions
Por último, el cuadro de propiedades de imagen en la
opción appearance Permite seleccionar la alineación del texto con la imagen
(1). También podemos modificar el “margen” (SPACING) alrededor de la imagen. Si
activamos la casilla solid border (3) podremos especificar la anchura de una
línea maciza que aparecerá dibujada alrededor de la imagen. El color dependerá
del color del texto que se haya elegido, a no ser que la imagen haya sido
seleccionada como enlace (según el procedimiento que se señalaba con
anterioridad).
Cuadro
de propiedades de imagen: activada la opción Appearance
|
Práctica 10:
http://malted.cnice.mecd.es/recursos/photos.htm.
|
En cuanto a la estructura física de la web que has diseñado recomiendo que tengas siempre los archivos de imagen en una carpeta separada para un mejor mantenimiento. Debes trasladar ambos elementos, página web y carpeta siempre juntos para que se cargue adecuadamente.