Cascade DTP - Programa para crear páginas web de forma visual con editor de CSS incorporado.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Cascade DTP es una herramienta gratuita para webmasters que permite visualizar y diseñar páginas webs completas y también editar las hojas de estilo asociadas a la página.

A continuación puedes ver mas características y opciones del programa.

Mas información sobre el programa.

Indice - Contenido.

Características principales del editor.
Manual de uso.

1 - Características principales del editor.

Este es un completo entorno de edición de páginas web. Todos los textos y las imágenes que formarán la página final, se diseñan colocando regiones rectangulares (cajas), es decir que podrás crear una página de forma visual, simplemente añadiendo dichas cajas ( con texto o gráficos) y colocándolas en cualquier lugar de la página utilizando el ratón.

Luego de insertar las cajas, ya sean gráficos o texto, podrás aplicarle formato. En una página es posible añadir hasta 50 cuadros o áreas de texto, así como también hasta 50 cajas de imagen.

La página actual con la que se está trabajando, se guarda en un formato propio del programa ( ficheros con extensión. cas4). Estos archivos almacenan la información de formato (incluyendo cualquier estilo y combinación de colores), todos los textos, el tamaño de página, y también otros ajustes.

Nota: Las imágenes no se almacenan en el archivo .cas4, sólo su ubicación (es decir, la ruta del archivo y el nombre del archivo). Por esta razón, los archivos de imagen no pueden ser movidos a otra carpeta después de haber sido colocados en la página, porque esto evitará que el programa los localice cuando el fichero cas4 se vuelva a abrir, es decir cuando se vuelva a iniciar el proyecto.

Una vez finalizada la página web, es posible exportar el trabajo en un archivo HTML, haciendo clic en la opción Guardar HTML de la barra de menús ( Save HTML). También permite, editar y guardar las hojas de estilos de la página actual, desde la opción Style sheet de la barra de menús principal.

Otras características son:

Permite crear las propiedades y estilos para los ScrollBars o barras de desplazamiento.
Crear los estilos de los enlaces: Link normal, visitado, Hover y el enlace activo.
Incorpora un editor de texto.
Establecer propiedades del BackGround : propiedades de la Imagen de fondo y el color.
Vista previa del trabajo.
Exportar el Html con el código CSS en la misma página o como archivo separado.

2.1 - Configuración inicial de la página web.

Como primer paso, se deberá establecer el tamaño de la página utilizando el cuadro de diálogo Configuración de página ( Opción Page setup de la barra de herramientas).

El tamaño máximo posible para establecer es de 1000 píxeles de ancho por 5000 píxeles de alto, y el valor por defecto utilizado para una nueva página es de 700 pixeles de alto por 1000 pixeles de ancho.

También se pueden configurar desde aquí:

Margins: Los márgenes superior de la página y el margen izquierdo.
Title: Definir el título de la página web, ( el que aparecerá en la barra de título del navegador)
Layout Grid: Utilizar y configurar una cuadrícula de diseñopara tener mas precisión al colocar el contenido ( imágenes y texto)
Page Size: El valor para el alto y ancho de página.

Esta es la vista del cuadro de diálogo.

2.2 - Añadir cuadros y áreas de texto a la página.

Al hacer clic en en la opción TextBox, se podrá añadir fácilmente en el lugar que desees, un área de texto, para ingresar un párrafo entero, una línea etc ..

Inmediatamente después de añadir un cuadro de texto al diseño de la página, se visualizará el cuadro de texto en la parte derecha de la ventana ( el área con la página en blanco).

Esta es el área de la página web donde se pueden colocar textos e imágenes.

Al hacer doble clic sobre el cuadro, se abrirá un editor sencillo para ingresar el texto, y darle formato. Desde este editor se puede:

Cambiar el estilo de fuente.
Insertar código HTML directamente.
Insertar caracteres especiales.
Insertar listas ordenadas, numeradas.
Saltos de línea.
Justificar el texto.
Insertar párrafos, enlaces, cabeceras etc ..

Y en la parte izquierda, visualizar también otro cuadro de diálogo que permitirá definir el borde del área del texto, los márgenes, la posición, el padding o relleno, el espaciado de línea ente otros.

También otra opción del cuadro de diálogo, es la de poder bloquear el cuadro para que no sea modificado por accidente. Para ello hacer clic en el ícono con el candado.

Notas:

Todas las medidas de posición y márgenes son pixeles.
Para eliminar un cuadro de texto del proyecto actual, hacer clic derecho sobre el área y presionar en la opción aceptar.

2.3 - Insertar imágenes y gráficos.

Al igual que en el paso anterior, para añadir imágenes, es posible insertarlas en la página mediante cajas. Cada caja podrá contener una imagen que podrás posicionar en el lugar que desees simplemente arrastrándola mediante el mouse.

Para añadir una caja con una imagen , hacer clic en la opción Image Box del menú principal del programa.

Hecho esto, se abrirá un cuadro de diálogo, y desde la opción Open file se abrirá la ventana de windows para localizar el gráfico en una carpeta de nuestro disco duro.

También, desde aquí, es posible ajustar otras opciones y propiedades de la imagen, por ejemplo:

Bloquear la imagen para no editarla de forma accidental.
Ver la coordenadas para la posición izquierda, derecha, arriba y debajo. ( En pixeles)
Añadir el enlace o ruta de la imagen.
Insertar el texto para el atributo ALT.
Establecer el orden Z.

Nota es posible superponer un cuadro de texto encima de cualquier imagen, simplemente arrastrando el área de texto sobre el gráfico.

2.4 - Configurar fondo de página.

Haciendo clic en la opción Background, se pueden establecer algunas propiedades para el fondo de la página, por ejemplo:

No image: Fondo sin imagen.
Image repeated. Imagen en mosaico vertical y horizontal.
Image not repeated. Imagen normal sin repetición.
BackGround Color: El color de la página.

2.5 - Configuración de los enlaces.

Al hacer clic en la opción "Estilo de enlaces" ( Link style) se abrirá un cuadro de diálogo para configurar cómo se visualizarán los vínculos, es decir poder cambiar las propiedades de apariencia de los enlaces.

Esta ventana contiene 3 apartados para definir los enlaces activos, visitados, y los que se mostrarán al pasar el mouse sobre el hipervínculo. ( Hover).

Cada apartado, permitirá aplicar el estilo del texto ( Negrita, subrayado etc ..) y también el color del texto y del background.

2.6 - Editar la hoja de estilo.

Desde la opción Style Sheet del menú principal, se abrirá un cuadro de diálogo que facilita la edición y exportación de la hoja de estilo externa (archivos. CSS) para la página.

En cualquier momento que se esté diseñando la página, se podrá visualizar la hoja de estilos mediante un Editor. Esta ventana de edición contendrá todo el código CSS de la página actual que se está creando. El código CSS puede ser guardado como un fichero CSS , o editar la hoja de estilo de forma manual.

Una vez editada una hoja de estilo, los cambios se podrán reflejar en el navegador haciendo clic en la opción de Vista previa ( opción Preview).

Nota: Al realizar la vista previa, el programa mostrará la página mediante un archivo temporal HTML que contiene el código incrustado de la hoja de estilos, es decir que la página real si no se ha guardado los cambios, no reflejará las nuevas modificaciones.