viernes, 3 de septiembre de 2021

SESIÓN 9 A 12

 PARRAFO EN FIGURAS 

El panel Color que usamos para cambiar el color al texto también nos servirá para cambiar el
color a una figura.
Al dibujar una figura, de manera predeterminada se dibujará con relleno blanco y trazo de color
negro y se va a modificar de igual manera seleccionando la figura y seleccionando el color en el
panel Color.

Al tener seleccionada la figura, en el Menú del panel también tenemos la opción de cambiarle el
color de relleno, color de trazo y el grueso del trazo, pero no la opción para cambiar el grueso
de cada lado por separado.

PANEL DE TRAZO
La diferencia de con el texto es que las figuras si pueden incluir un trazo y este se puede
modificar dependiendo del gusto y el estilo que se requiera. El panel Trazo es el que nos ayudará a modificarlo.

La primera opción del panel trazo es
seleccionar el color que se requiera. Al dar
click sobre el icono se abrirán las mismas
opciones que el panel Color en el Menú del
panel, teniendo como opción guardar el
color como muestra.
El trazo se puede alinear al centro de la
figura, al interior de la figura o al exterior de
la figura como se muestra en los ejemplos.
Podrás notar la diferencia al hacer mas
grueso el trazo.



Por último, tenemos la opción para hacer mas grueso el trazo de la figura. Se puede cambiar
el grueso por cada lado, por ejemplo solo se hará mas grueso el trazo superior, pero si se tiene seleccionado el icono de cadena, se van a unificar todos sus lados.

PANEL REYENO 
En el panel Relleno contamos con más opciones para añadirle diseño a nuestra figura.

Aquí seleccionaremos si nuestra figura
tendrá un color de relleno sólido, un relleno
de degradado o bien añadirle una imagen
como fondo a nuestra figura. También
contamos con la opción añadirle o quitarle
opacidad a nuestra figura.

ENCABEZADO Y PIE DE PAJINA

El encabezado y el pie de página siempre están fijas en una página web; es por eso que se
recomienda hacer el diseño en una página maestra para que el diseño del sitio web sea coherente.
Cuando requiera hacer algún cambio solo tendrá que hacerlo a la página maestra y se actualizará en todas las páginas.
En Adobe Muse, viene de manera predeterminada activado Mostrar encabezado y pie de página, en caso de que no lo requiera se puede desactivar en Menú Ver>Ocultar encabezado y pie de página; o bien en el menú del panel se localiza el icono de Opciones de visualización en donde se puede activar o desactivar el Encabezado y el pie de página.
 El encabezado y pie de página se distinguen por las líneas guías azules. La primer línea guía define

la parte superior del sitio web, la segunda línea define el espacio que tendrá el encabezado, la tercera línea guía define el espacio que tendrá el pie de página, la cuarta línea guía define la parte inferior de la página web y la quinta y última línea guía define la parte inferior del navegador. Del lado izquierdo de las líneas hay un icono, y al dar click sobre el te muestra un cuadro donde se describe para que es cada una de las líneas.

El tamaño del encabezado y pie de página puede variar dependiendo de los elementos que se le van a añadir, por lo tanto estas líneas se pueden modificar al seleccionar el icono y arrastrarlas hacia arriba o hacia abajo, dependiendo del espacio que se les quiera dar. Solo se pueden modificar las líneas del encabezado y pie de página en la página maestra.

Normalmente, el logotipo es colocado en el encabezado y aparece en todas las páginas, por lo tanto se recomienda incluirlo en la parte del encabezado. Para colocarlo es en Menú Archivo>Colocar y seleccionar el archivo del logotipo. El logotipo debe de tener la medida en que quieras que se muestre en el encabezado. También se puede colocar texto e imágenes según se requiera. Todo los elementos deben de estar situados dentro del espacio definido como encabezado.

En el pie de página, normalmente se coloca un menú auxiliar que sirve para cuando la página del sitio web está muy alta y se tenga que utilizar la barra de desplazamiento vertical, así el usuario podrá utilizar el menú auxiliar para seguir navegando en el sitio web sin tener que subir al menú principal.

Un sitio web tiene que tener acceso a los avisos de privacidad, términos y condiciones y debe tener la leyenda de los derechos reservados; todo esto se puede incluir en el pie de página para que permanezca en todas las páginas del sitio web. Todos los elementos deben de estar situados dentro del espacio definido como pie de página.

Tienes que tener en cuenta que un sitio web tiene que ser limpio y sencillo para que el usuario permanezca en la página y no se le dificulte la navegación.




MENUS 

En Adobe Muse es muy sencillo crear un menú para tu sitio web. Existen dos tipos de menú: el menú horizontal y el menú vertical. Se recomienda que el menú se cree en la página maestra para que esté fijo en todo el sitio web.
Para crear un Menú localizaremos el panel Biblioteca de widgets en la barra de paneles. Ahí se localizarán todos los widgets que se le puede añadir a un sitio web. Encuentra la carpeta Menús en la cual podemos seleccionar si lo necesitamos horizontal o vertical.
Arrastra hacia el espacio de trabajo el tipo de menú y sitúalo en el lugar donde se requiera. De manera predeterminada se creará el menú de tu sitio web con la cantidad de botones y sus nombres que se crearon al iniciar con el mapa del sitio. También se va a abrir la ventana de propiedades, la cual se puede abrir con el icono de play localizado del lado derecho
superior del menú.
En caso de que los nombres de las páginas del sitio web no se vean en el espacio se pueden
hacer mas grandes los botones al arrastrar hacia los lados. La etiqueta de los botones no puede ser editado directamente en el menú. En caso de que sea necesario un cambio en la etiqueta se tiene que hacer directamente en el mapa del sitio.




VENTANA PROPIEDADES 
En la ventana propiedades tenemos diferentes opciones para editar el menú.

Tipo de menú:
En esta opción seleccionaremos si en el menú queremos que aparezcan solo las páginas de nivel superior o también las páginas secundarias; o bien hacer los botones del menú de forma manual.
Dirección:
En esta opción seleccionaremos si el menú será de manera horizontal o vertical sin tener que
re-hacer todo el menú.
Tamaño del elemento:
En esta opción seleccionaremos si los botones serán todos del mismo tamaño o del tamaño
dependiendo del texto que tenga dentro.
Mostrar icono a la izquierda:
Al seleccionar esta opción, nos aparecerá un cuadro en donde podemos incluir un icono para
diferenciar cada botón.
Mostrar etiqueta:
De manera predeterminada, esta opción está seleccionada y es la que nos muestra el texto en el menú.
Mostrar icono a la derecha:
En esta opción seleccionaremos si se mostrará un icono en todos los botones del menú, solo en los submenús o desactivar el mostrar el icono.
Posición de las partes:
En esta opción seleccionaremos en donde se situará las etiquetas de los botones.
Los iconos que se muestran a la izquierda o derecha, dependiendo de la opción que se haya
seleccionado se puede modificar por otra imagen creada en otro programa. El formato
recomendado para añadir el icono es .png ya que este te permite el fondo transparente. Para
añadir la imagen, selecciona dando doble click sobre el menú y sobre el icono, ya que lo tengas seleccionado da click con el botón derecho del mouse y selecciona la opción Reemplazar la imagen de fondo abriéndose la ventana para seleccionar el archivo.
Normal:
Al tener seleccionado el botón con esta opción activa, podrás seleccionar el color que tendrá el botón como predeterminado. El color lo podrás seleccionar en el menú del panel.
Rollover:
Al tener seleccionado el botón con esta opción activa, podrás seleccionar el color que tendrá el botón al poner el cursor del mouse sobre el.
Ratón pulsado:
Al tener seleccionado el botón con esta opción activa, podrás seleccionar el color que tendrá el botón al dar click sobre el.
Activo:
Al tener seleccionado el botón con esta opción activa, podrás seleccionar el color que tendrá elbotón al estar sobre esa página.
Para saber si funciona el cambio de color en el menú tenemos que guardar el archivo y seleccionar
en el Menú Archivo>Vista previa en el navegador o bien presiona al mismo tiempo las teclas
Ctrl+Shift+E para probarlo.
También podemos cambiar la fuente de las etiquetas del menú, dando doble click sobre el
menú. Al tener seleccionada solo el elemento etiqueta, localiza el panel Texto, donde se podrá seleccionar y cambiar el estilo de la fuente.
Cuando ya se tenga listo uno de los botones, se deberá cambiar el estilo de los demás botones.

WIDGETS DE COMPOCICION 

Un widget es un programa o aplicación presentado en archivos y dan fácil acceso a sus funciones.
Son archivos que ya fueron creados y pueden ser editados.
Los widgets de composición permite interactuar con un espacio de la página web y puede
implicar una animación desplazándose de un lado a otro o atenuar la composición. Estos se
encuentran en el panel Biblioteca de widgets.
Para añadir un widget de composición solo se debe de seleccionar del panel y arrastrar hacia el área donde se desea colocar.
Los widgets de composición son: en blanco, noticias destacadas, pantalla de caja de iluminación, presentación y sugerencia.



 EN  BLANCO

Este tipo de widget te sirve para crear un carrusel de imágenes. Ya que esté colocado el widget en blanco en el espacio de trabajo comenzaremos su edición.
Del lado derecho se encuentra el icono de play, al dar click sobre el se abrirá la ventana de
propiedades del widget.
El widget tendrá 3 elementos para incluir 3 imágenes en cada cuadro gris y será como
un elemento agrupado. Para editar cada elemento por separado se tendrá que dar
doble click sobre el widget. Se le puede cambiar el color de relleno e incluso añadir
una imagen.
Para cambiar el color se debe de seleccionar uno de los recuadros de la parte inferior,
después en el menú del panel seleccionar el botón Relleno o bien en el panel Relleno seleccionar el color deseado. A los elementos se les puede añadir un trazo si lo desea o se puede eliminar.
Para añadir una imagen debes de seleccionar el elemento en donde se va a incluir y en el menú del panel seleccionar el botón Relleno o bien en el panel Relleno seleccionar la imagen deseada.
 
NOTICIAS DESTACADAS 
Este tipo de widget sirve para que en la página haya un espacio de noticias. Al arrastrarlo al
espacio de trabajo, notarás que trae un texto predeterminado llamado “Lorem ipsum” y te sirve para poner texto de relleno si todavía no se cuenta con el texto final. Del lado superior izquierdo se encuentra el botón para abrir la ventana de propiedades del widget.
Parecerá que el widget tuviera sus elementos agrupados, pero al dar doble click sobre el se
podrá editar.
Del lado izquierdo del widget estarán los botones, que al dar click sobre ellos en el modo
cambiará a la nota correspondiente. El texto de los botones también es editable seleccionando la herramienta de texto y dando un click sobre la caja de texto que se quiera editar.
Las imágenes que trae predeterminadas pueden ser modificadas de la misma manera en que se modifican en el widget en blanco.
En caso de que se desee hacer mas grande o cambiar el acomodo de el widget de noticias
destacadas, se pueden modificar cada uno de sus elementos. También pueden agregarse mas botones al widget seleccionando el botón + localizado del lado derecho superior.



PANTALLA DE CAJA DE ILUMINACION 
Hay widgets que son más grandes que el área del espacio de trabajo disponible para colocar
los elementos. La pantalla de caja de iluminación es uno de esos widgets y para que el widget no quede sobre otros elementos como el pie de página, hay que modificar la línea inferior de la página para crear mas espacio en donde colocar el widget.
Este widget sirve, igual que el widget en blanco, para crear un carrusel de imágenes a diferencia de que a este puede tener texto en la parte inferior como un pie de foto. Del lado superior izquierdo se encuentra el botón para abrir la ventana de propiedades del widget.
De la misma manera que el widget anterior, el texto es de relleno pero puede modificarse
por el texto real y se edita de la misma manera seleccionando la herramienta de
texto y dando click sobre el texto que se requiera editar.
Al igual que los otros widgets el texto y las imágenes son editables. El texto se modifica
seleccionando la herramienta de texto y dando click sobre el área de texto que se desea cambiar.
Las imágenes se modifican al dar clicks para seleccionar solo el área de la imagen y después
localizando el botón del menú del panel Relleno y seleccionar la opción Añadir imagen,
o bien se puede seleccionar color sólido o un degradado.

SUJERENCIAS 
Este widget sirve para añadir recuadros de sugerencia en otros elementos o bien se puede dejar el widget solo en el espacio de trabajo.
Al tener el widget en el espacio de trabajo, se tiene la opción de cambiar sus propiedades al
seleccionar el botón localizado en el lado superior derecho.
Al dar click sobre los puntos se abrirá una ventana que puede tener imágenes y textos, además pueden estar localizados en diferentes lugares de la página.
Al igual que los otros widgets vistos anteriormente, todos sus elementos pueden editarse en
cuando al acomodo, forma, tamaño y color.
Para cambiar el texto se debe de seleccionar la herramienta de texto y dar click sobre el texto
que se requiera editar.
Para cambiar la imagen de la sugerencia se localiza el botón Relleno en el
menú del panel y se selecciona la imagen que se desea añadir.
Si es necesario mas ventanas de sugerencias, con el botón + del lado derecho de los botones o de las ventanas al dar click se van a añadir. Puedes modificar el orden y situar en diferentes lugares de la página los botones y ventanas de sugerencias según el diseño de tu página web


No hay comentarios:

Publicar un comentario

SESIÓN 9 A 12

  PARRAFO EN FIGURAS  El panel Color que usamos para cambiar el color al texto también nos servirá para cambiar el color a una figura. Al di...