Diseño de páginas web

USO DEL EDITOR HTML PARA PÁGINAS

Este editor nos permitirá editar los contenidos que se muestran en la web mediante los siguientes campos:

Opción.-
Especifica el directorio de opción donde se encuentra. Plantilas.-
Permite cargar un aplantilla con un formato ya hecho que se puede modificar.

Keywords.-
Permite cargar una definición corta del contenido de la página que se está introduciendo para facilitar posteriores búsquedas tanto dentro del panel como del sitio web si estuviera habilitado.

Título.-
Le da nombre a la página insertada. Nombre que aparecerá posteriormente en los listados de búsqueda.

Botón: Guardar página.-
Guarda los cambios realizados en la página.

Botón: Cerrar.-
Cierra la ventana sin guardar los cambios.

Barra de heramientas.-
Opciones para la creación y modificación del formato y estilo de las páginas y así poder adaptarlas al diseño principal del website.

USO DEL EDITOR HTML PARA PRODUCTOS

Este editor nos permitirá editar los contenidos de los porductos que se muestran en la web mediante los siguientes campos:

Opción.-
Especifica el directorio de opción donde se encuentra.

Plantilas.-
Permite cargar un aplantilla con un formato ya hecho que se puede modificar.

Keywords.-
Permite cargar una definición corta del contenido de la página que se está introduciendo para facilitar posteriores búsquedas tanto dentro del panel como del sitio web si estuviera habilitado.

Título.-
Le da nombre a la página insertada. Nombre que aparecerá posteriormente en los listados de búsqueda.

Botón: Seleccionar imágenes.-
Muestra el editor web de Administración de imágenes que permite ver, insertar o subir la imagen seleccionada que se quiere agregar al producto.

Botón: Ver.-
Abre una nueva ventana para visualizar la imagen seleccionada.

Mini descripción.-
Campo para insertar una breve descripción del producto, que aparecerá en la portada del listado.

Precio.-
En formato xxx,xx Eur, para insertar el precio del producto. Botón:

Guardar producto.-
Guarda los cambios realizados en el producto.

Botón: Cerrar.-
Cierra la ventana sin guardar los cambios.

Barra de heramientas.-

Opciones para la creación y modificación del formato y estilo de los productos y así poder adaptarlos al diseño principal del website.

USO DE LA BARRA DE HERRAMIENTAS DEL EDITOR HTML

Otorga la posibilidad de crear una página o producto completos partiendo de cero o editar los contenidos de uno ya generado.

Ver código fuente.-
Permite acceder al código de programación de la página.

Previsualizar.-
Permiter obtener una vista previa de la página resultante.

Imprimir.-
Imprime el contenido.

Cortar.-
Copia al portapapeles los elementos seleccionados eliminándolos al mismo tiempo.

Copiar.-
Copia al portapapeles los elementos seleccionados.

Pegar.-
Pega el elemento contenido en el portapapeles en la zona seleccionada.

Deshacer.-
Elimina la última acción realizada.

Rehacer.-
Restaura la última acción deshecha.

Eliminar formato de texto.-
Deshace el formato de texto del párrafo seleccionado.

Negrita.-
Cambia a letra negrita el texto seleccionado.

Subrayado.-
Subraya el texto seleccionado.

Cursiva.-
Cambia a letra cursiva el texto seleccionado.

Insertar lista numerada.-
Crea una sucesión de párrafos numerados en lista.

Insertar lista.-
Crea una sucesión de párrafos en lista precedidos por puntos.

Disminuir espaciado.-
Disminuye el espacio entre el párrafo donde se encuentra el cursor y el principio de la línea de escritura.

Aumentar espaciado.-
Aumenta el espacio entre el párrafo donde se encuentra el cursor y el principio de la línea de escritura.

Superíndice.-
Cambia a formato de superíndice el texto seleccionado debiendo deshabilitar esta opción para continuar con la escritura normal.

Subíndice.-
Cambia a formato de subíndice el texto seleccionado debiendo deshabilitar esta opción para continuar con la escritura normal.

Alinear a la izquierda.-
Una vez seleccionado el texto lo alinea al margen izquierdo con el borde derecho discontinuo.

Alinear en el centro.-
Centra los objetos o el texto seleccionado.

Alinear a la derecha.-
Alinea el texto u objetos seleccionado al margen derecho con el borde izquierdo discontinuo.

Alineación justificada.-
Alinea el texto u objetos seleccionados a los márgenes derecho e izquierdo.

Crear o modificar enlace.-
Crea un enlace del texto u objetos seleccionados a una página externa, interna, correo electrónico o una imñagen en pop-up.

Crear enlace de correo electrónico.-
Una vez seleccionado el texto o la imagen crea un enlace para el envío de correo electrónico.

Fuente, Tamaño, Formato, Estilo.-
Diferentes opciones para dar formato al texto seleccionado. Color de texto. Color de fondo de texto.

Funciones de tablas.-
Al seleccionar esta opción es posible realizar las siguientes operaciones:

    • Insertar tabla.
      Inserta una cuadrícula de tabla.
    • Modificar propiedades de tabla.
      Permite cambiar el color de fondo, borde, ancho, margen de celdas, espacio entre celdas de las tablas.
    • Modificar propiedades de la celda.
      Permite cambiar el color de findo, alineación horizontal, alineación vertical, y el ancho de celda de una selección de celdas.
    • Insertar columna a la derecha.
    • Insertar columna a la izquierda.
    • Insertar fila anterior.
    • Insertar fila posterior.
    • Borrar fila.
    • Borrar columna.
    • Incrementar espacio de columna.
    • Reducir espacio de columna.

Funciones de formularios.-
Permite realizar las siguientes operaciones:

    • Insertar formulario.
      Agrega un documento de áreas vacías en las que es posible reunir y organizar información.
    • Modificar propiedades de formulario.
      Permite cambiar el color de fondo, borde, ancho, margen de celdas, espacio entre celdas de las tablas.
    • Insertar o modificar campo de texto.
      Permite cambiar el color de findo, alineación horizontal, alineación vertical, y el ancho de celda de una selección de celdas.
    • Insertar o modificar campo oculto.
    • nsertar o modificar botón.
    • Insertar o modificar campo de chequeo.
    • Insertar o modofocar botón de opción.
    • Borrar fila.
    • Borrar columna.
    • Incrementar espacio de columna.
    • Reducir espacio de columna.

Insertar o modificar imagen.-
Da acceso al administrador de imñagenes desde el cual será posible ver, modificar o agregar las imágenes a mostrar en el website. Insertar línea horizontal.

Insertar carateres especiales.-
Muestra la lista de caracteres especiales para incluir en la página.

Mostrar / Ocultar guías.-
Muestra u oculta las líneas directrices de la página editada.

USO DEL CUADRO DE MANTENIMIENTO DE OPCIONES DE MENÚ

Aparece en la parte derecha de la pantalla y sirve para definir las características de cada opción.

Tipo de opción.-
Permite seleccionar el tipo de opción a insertar (opción, página,producto)

Nombre.-
Para definir un nombre de opción.

Descripción.-
Para describir la opción en edición.

Imagen [ ver/seleccionar/quitar].-
Es posible que en lugar de mostrar el título de la opción se muestre una imagen asociándola a esta opción desde el listado de imágenes.

USO DEL CUADRO LISTADO DE IMÁGENES

Mostrar imagen tipo.-
Permite mostrar las imágenes por tipo (Ej: Todas, jpeg, gif...). Al final de la ventana aparecen las opciones para desplazarse entre las imñagenes encontradas (EJ: << Anteriores Mostrando desde 1 hasta 8 Siguientes >> )

Descripción.-
Para describir la opción en edición.

Imagen [ ver/seleccionar/quitar].-
Es posible que en lugar de mostrar el título de la opción se muestre una imagen asociándola a esta opción desde el listado de imágenes.

USO DEL CUADRO MANTENIMIENTO DE IMÁGENES

Aparece en la parte derecha de la pantalla y sirve para tratar las imágenes utilizadas en el website.

Campo Imagen, animación FLASH, Archivo HTML o PHP.-
Donde se debe de indicar la ruta de estos tipos de archivos que pueden ser agregados al website.

Botón Examinar.-
Permite subir archivos de los distintos tipos apareciendo la ruta automñaticamente en el campo anterior.

Categoría padre.-
Permite seleccionar la categoría donde se desean almacenar las imágenes.

Pie de foto.-
Permite introducir un texto que posteriormente se visualizará en el pie de la imagen.

Keywords.-
Permite introducir una definición corta de la imagen para facilitar posteriores búsquedas.

Ampliar imagen / Editar imagen.-
Permite variar las características de la imagen seleccionada.

Botón Guardar.-
Guarda los cambios realizados anteriormente.

Botón Cancelar.-
Cancela los cambios realizados.


    Descargate aquí el tutorial en formato PDF.
    

Esquema.-

    Conceptos básicos.-
    Sección explicativa.-     Sección técnica.-

 


Promocion del mes. Contrata Posydi ya y te regalamos una plantilla para el diseño de tu pagina web Gratis al contratar Posydi, la herramienta para controlar las visitas a tu web.
Screenshots
Ejemplo del panel de control
Ejemplo del panel de control
Screenshots
Versiones Tipos de pago online Contactar Modulo de tienda basicoModulo de tienda plus Gestion de noticias