Adobe Muse CC: diseño y lanzamiento de sitios web sin necesidad de saber de códigos. Aprende sobre diseño web.

1. Video promocional y resumen de video: ¿ Y si te dijera que puedes diseñar y lanzar sitios web sin tener que conocer ningún código pero en realidad diseñar y volver a dimensionar imágenes y mover lanza alrededor para crear nuestros propios sitios web originales de nuevo sin tener que conocer ningún código? En este curso, aprenderás a usar Adobe Muse. Adobe Muse es un potente programa que se puede utilizar para crear sitios web receptivos que se vean bien a través de diferentes tipos de pantallas de computadora y dispositivos móviles. Aprenderás consideraciones efectivas de imagen de formato de texto, cómo agregar diseños dinámicos y elementos de navegación y mucho, mucho más. Si sigues junto con mi ejemplo usando los archivos de soporte incluidos en este curso, este es el sitio estará diseñando y construyendo, independientemente de si utilizas los archivos de soporte o construyes un sitio web usando tus propias fotos y texto. Este curso te ayudará a aprender a agregar menús móviles. Agregue imágenes de espaciado y formato de diseño consistentes para la Web, un texto justo usando diseño responsive y mucho, mucho más. Soy Chad Newman y llevo diseñando sitios web incluyendo desde los años noventa, cuando estaba en la preparatoria en la universidad temprana. He trabajado como director de desarrollo de Internet en una firma de diseño publicitario como maestro Web, en un periódico regional y en un sistema bibliotecario y como editor gerente de revistas de diseño demasiado gráfico también han diseñado sitios web codificados para clientes incluyendo fotógrafos, organizaciones sin fines de lucro y negocios. Desde una tienda de surf en skate hasta un campo de golf, Adobe Muse es un programa increíble, y espero con interés la oportunidad de guiarte y había utilizado eficazmente este programa en papel. Ahora avísame si tienes alguna pregunta otra vez. El curso viene de archivos de soporte e instrucciones de alta calidad para que puedas empezar a diseñar y lanzar sitios web usando Adobe Muse, un programa increíble y de fondo. 2. 1.1 Introducción al curso: Hola ahí. Bienvenido al curso Dhobi Muse. En este curso, aprenderás a diseñar y lanzar sitios web sin tener que conocer ningún código. Adobe Muse es un potente programa que se puede utilizar para crear sitios web receptivos que se vean bien a través de diferentes tipos de pantallas de computadora y dispositivos móviles. Aprenderás consideraciones efectivas de imagen de formato de texto, cómo agregar diseños dinámicos y elementos de navegación y mucho, mucho más. Si sigues junto con mi ejemplo usando los archivos de soporte incluidos en este curso, este es el sitio estará diseñando y construyendo, independientemente de si utilizas los archivos de soporte o construyes un sitio web usando tus propias fotos y texto. Este curso te ayudará a aprender a agregar menús móviles. Agregar imágenes de espaciado consistente y formato de diseño para la Web. Un texto justo usando diseño responsive y mucho, mucho más. Soy Chad Newman y he estado diseñando sitios web incluyendo desde los años noventa, cuando estaba en secundaria, luego temprano en la universidad. He trabajado como director de desarrollo de Internet en una firma de diseño publicitario como maestro Web, en un periódico regional y en un sistema bibliotecario y como editor gerente de revistas de diseño demasiado gráfico . También he diseñado sitios web codificados para clientes que incluyen fotógrafos, organizaciones sin fines de lucro y negocios. Desde una tienda de surf en skate hasta un campo de golf, Adobe Muse es un programa increíble, y espero con interés la oportunidad de guiarte y había utilizado eficazmente este programa . Gracias de nuevo por inscribirse. Empecemos. 3. Actualización de la instalación de Adobe Muse: Adobe anunció recientemente que están discontinuando el soporte y la actualización de Muse Creative Cloud. Creo que tal vez mucha gente está usando los sitios web de terceros. A lo mejor WordPress y otros sitios como ese, tal vez squarespace, y simplemente encuentran que no tanta gente está usando este programa, pesar de que mucha gente va a seguir usándolo porque les gusta. Les gusta que simplemente puedas hacer clic y arrastrar diferentes elementos al espacio de trabajo y agregar enlaces fácilmente Así que está disponible, pero simplemente no van a ir de pie actualizarlo. Entonces eso es bueno saberlo. Pero si vas a tu adobe creative cloud y no lo ves listado aquí para tener abierto ah , no lo ves, escucha aquí incluso para instalarlo o actualizarlo en la esquina superior derecha aquí, adelante y da click en que y luego ir a Preferencias. Esto está en la aplicación de cloud creativo, y luego en Creative Cloud Tab aquí, asegúrate de comprobar mostrar APS más antiguos porque una vez que eso esté comprobado, mostrará Adobe musa ahí, y luego podemos instalarlo para que puedas seguir a lo largo en esta clase de adobe Muse Así que es frustrante a veces cuando las empresas descontinúan software que aún quieres usar. Eso es comprensible, pero al menos no lo están quitando por completo de la suscripción de adobe creative cloud donde no se puede usar en absoluto. Todavía puedes usarlo. Simplemente no se actualizará. Entonces eso es solo, ya sabes, un descargo de responsabilidad Así no lo estarán actualizando como lo hacen con photoshop en diseño. Illustrator Aftereffects, premier y así sucesivamente. Entonces así es como conseguir que eso se listen aquí para que podamos instalarlo en el programa de software APP Adobe Creative Cloud . Muy bien, gracias. 4. 1.2: descarga y uso de archivos de apoyo: después de descargar el soporte para este curso, lo que puedes hacer es correcto. Haga clic en él en el PC y vaya a extraer todo en el Mac. Simplemente puedes hacer doble clic en él, y se extraerá a esa misma carpeta en la que estás, por ejemplo, el escritorio. Y una vez que extraigas, debes tener una carpeta llamada Archivos de soporte. Y luego a partir de ahí tenemos globos y Beyond Website, que es el sitio Web final si sigues exactamente conmigo, que probablemente usarás diferentes fotos o textos diferentes. Pero esto es solo para mostrarte el sitio web final que creo en este curso mientras ves y aprendes los principios y prácticas de Adobe Muse. Y luego también está el expediente Muse. Y luego también hay fotos y textos de fotos y texto es la carpeta donde tendremos , por ejemplo, por ejemplo, las fotos de alta res se re dimensionando algunas de esas fotos de bajo riesgo que me dieron de esta empresa, y puedes seguir junto con estas fotos, las fotos bajas y los documentos que tiene el texto en formato de documento word. Y en caso de que no tengas ese formato de texto rico, que es más universal pero con el fin subir este lado. Obviamente, no queremos usar ah, las que están en baja rez en realidad de la empresa y luego documenta esto solo para la práctica Para este curso. Si desea subir su sitio realmente a un servidor o en catalizador de negocios a Adobe. Sí quieres usar tu propio contenido o contenido de un cliente con el que estás trabajando. Esto es sólo para la práctica. Para el sitio ahora bajo branding, también hay archivo ilustrador. Tan solo un logo rápido hizo cuatro cuchillas y más allá y luego para favorecer imágenes con Así estaremos cubriendo que en este curso se estará copiando y pegando el texto para tres de las páginas de esta área también estará escribiendo algún texto corto en algunas de las páginas. 5. 1.3 de acostumbrarte a el espacio de trabajo y un ejercicio rápido: adelante y abre las florece de archivos musa y más allá de los archivos de soporte, y tenemos lo que se llama el modo plan aquí mismo. Podrías tener un aire de que faltan eslabones, así que si vas a los activos y justo por aquí, podría haber un aire. Si haces click derecho en eso, puedes ir a re link y luego encontrar en la carpeta del archivo sport donde se encuentra esa imagen específica. Eso no es necesario ahora mismo, sin embargo, porque verás una vista previa las imágenes. Y esto es básicamente solo para mostrarte el archivo musa y solo el espacio de trabajo. Así que adelante y haga doble clic en la página principal aquí y te darás cuenta de que tenemos por aquí un panel de herramientas . Si no tienes eso, puedes ir a la ventana y luego a la barra de herramientas. Asegúrate de que eso esté comprobado. También hay panel de control para arriba en la parte superior. Queremos que los siempre sean revisados, porque dependiendo de la herramienta que hayamos seleccionado o del elemento que hayamos seleccionado, las opciones van a cambiar aquí arriba. Y luego utilizamos muchas de estas herramientas a lo largo del curso y a lo largo de todo. uso de adobe Muse está bien ahora más en el lado derecho son algunos atajos a diferentes paneles y estos aire todos también por debajo de la ventana. Entonces si no ves uno por ahí, puedes hacer clic en ventana, y todos están listados aquí mismo. Por lo que si obtienes un reinicio de paneles, lo restablecerá al valor predeterminado. Y así que tú eres deberías lucir algo como esto. Tenemos muestras de texto, que es efectos de desplazamiento de estado de biblioteca, capas y así sucesivamente. Sisi bibliotecas, activos y transforman panel estos aire otra vez por aquí también, sin embargo, y luego hay un par más para seleccionar de dos. Entonces para subir y bajar la página, todo lo que hacemos es hacer clic y arrastrar arriba y abajo la barra de desplazamiento. De acuerdo, eso es diferente a este control receptivo justo aquí que establece puntos de ruptura, cuales se meterán para subir y bajar. Podemos usar eso. También podemos utilizar la herramienta de mano en el panel de herramientas. Si solo haces clic y arrastras, puedes moverte así por el espacio de trabajo si tienes otra herramienta excepto la herramienta de tipo, y tenemos un cursor y en algún lugar, si tienes, digamos, por ejemplo, la herramienta de selección, esta flecha superior y presionas la barra espaciadora, cambiará a la herramienta de mano para que podamos movernos y luego soltar la barra espaciadora. Y luego volvemos a usar la selección. Herramienta dice Este es un atajo. Hablando de atajos, aquí tenemos la herramienta de zoom. Podemos hacer click y arrastrar para acercar a las áreas. Lo que me gusta hacer es presionar control en el PC o comando en el Mac y presionar, más o menos en metal. Acercar y alejar. Ahora bien, si presiono control o comando cero, simplemente lo configurará. Entonces todo está en la pantalla aquí, estos atajos de aire que puedes ver donde vas a ver y luego aquí mismo, acercar, alejar ajuste ventana de página y luego tamaños reales, Control o comando. Uno es el tamaño real. Ahora la herramienta de selección. Aquí, podemos usarlo para seleccionar objetos así. Podemos hacer click y arrastrar la esquina para cambiar el tamaño de una imagen como esta. También podemos mover cosas como esta se verá un poco diferente. Esta acaba de cambiar el tamaño es que se va a colocar una imagen colocada, y ésta el fondo se establece en una imagen tan excelente que de manera diferente. Tenemos cuadros de texto aquí, Así que si alguna vez quieres seleccionar texto o queremos añadir un nuevo cuadro de texto, podemos seleccionar la herramienta de texto y dar clic y luego escribir. Y hay algunas opciones aquí arriba en la parte superior, como el estilo de párrafo divertido, que sería ir y luego cambiar de tamaño y diferentes opciones de formato si haces clic y mantienes presionado. También hay una herramienta de tipo vertical, pero la mayoría de las veces estará usando herramienta de tipo. También hay un rectángulo y una herramienta de labios. Entonces si quieres hacer clic y arrastrar y agregar algunas formas hacia fuera y cambiar de color del Phil y el trazo, por ejemplo, debilitar, establece eso. Y también hay marcos, que son una especie de marcador de posición. Si quisieras insertar imágenes como parte del Phil para ese rectángulo, y luego finalmente hay anclas van a estar repasando que cómo establecer anclajes en una página para que podamos enlazar a partes de una página y no solo vincular dos páginas ellas mismas y cuando vamos sobre diseño responsive más adelante se va a repasar el texto de formato y luego formatear texto. Justo en ese punto de ruptura para que a medida que cambies el tamaño, por ejemplo, esto sobre Paige en una ventana del navegador o dispositivo móvil, el texto en realidad puede llegar a ser más pequeño o más grande también. Te darás cuenta arriba en la parte superior. Hay un par de modos diferentes. El modo planeado está justo aquí, donde es un plano de nuestro sitio y diferentes páginas, páginas nivel duro, páginas infantiles y luego la página maestra. Si obtienes una vista previa que preverá V este sitio y luego también podemos publicar diferentes formas aquí, estaremos repasando. También puedes publicar desde el menú de archivos, y cada vez que trabajamos y hacemos algunos cambios significativos, te sugeriría guardar como un nuevo archivo lado seguro s Así que tenemos los otros archivos es de respaldo. O bien, si sigues guardando, es el mismo archivo al menos respalda ese archivo en un dispositivo diferente, como una unidad flash o en línea. Entonces para mostrar lo fácil que es cambiar el contenido, sigamos adelante y agreguemos una imagen aquí. Sólo tienes que añadir un poco de interés. Así que sólo tienes que ir al lugar de archivo, navegar a los archivos de soporte y ir a fotos y texto. Y luego vamos a ir a fotos baja rez. Vamos como Globo nueve, haga clic en abrir y haga clic como Ir, y podemos cambiar el tamaño de esto. Queremos cambiar el tamaño y tienda de fotos, normalmente si nosotros, ya sabes, lo tenemos a un tamaño diferente para empezar. Pero para esto, sólo la práctica está bien. Seleccione este rectángulo aquí y haga clic y arrástrelo hacia abajo. Esto es sólo un área de contenido se va a repasar que vamos en su lugar otro lugar final . Solo hay una victoria rápida, solo una práctica para acostumbrarse al espacio de trabajo aquí. Y así voy a hacer que esto sea igual. La altura exacta es la otra. Solo estoy usando la herramienta de selección aquí, la flecha. Entonces una vez que hemos agregado estas fotos para algún interés visual, ve al archivo navegador de avistamiento anterior y luego navega al enlace de redes sociales aquí abajo. Y luego ahí vamos. Agregamos algunas fotos a la página de Redes Sociales para algún interés visual. Esto es solo una victoria rápida, solo una práctica rápida para mostrar lo fácil que es agregar elementos como fotos y realizar cambios en páginas Web en Adobe Muse. Si tienes el aire de activos faltante, eso no es gran cosa. No vamos a estar usando este archivo musa más allá de esta lección. Vas a estar creando este sitio desde cero. Puedes seguir adelante en mi ejemplo, o puedes usar tus propios archivos de soporte. Simplemente depende de si quieres aprovechar esta oportunidad para crear tu propio portafolio o un sitio web para un cliente o una organización o individuo, o quieres crear esta mezcla y más allá del sitio web. cualquier manera, el propósito es que usted aprenda los principios y las prácticas del diseño Web específicamente en Adobe Muse. Entonces gracias y empecemos en la siguiente lección. 6. 2.1 de crear un nuevo sitio web en Adobe Muse: Vamos a crear un nuevo sitio en Adobe Muse, Ir a archivo nuevo sitio o presionar control y en el PC o comando y en el Mac que trae este diálogo hacia arriba. El primer ajuste es fluido con versus fijo con con un fluido con el con del área de contenido de la página Web se redimensionará a medida que los tamaños del navegador, ajustados con un fijo con el látigo de página, se mantiene igual independientemente del tamaño del navegador. El contenido con se queda a las nueve, sus 60 pixeles o el tamaño que lo tengamos configurado para este proyecto, queremos ponerlo fluida con. Dado que también estaremos agregando elementos de diseño responsive al sitio web, queremos que la página Web sea dinámica en lugar de estática, por lo que el contenido se redimensionará según sea necesario al volver a dimensionar el navegador para este proyecto. Mi pantalla tiene nueve mayores 60 píxeles como la página Max predeterminada con, pero la mayoría de las pantallas tienen resolución un poco más grande que eso hoy en día, así que pongámosla a 1000 píxeles para este proyecto. Para columnas, pongámoslo en 12 centavos. Tener tres o cuatro columnas. Los layouts de Inn pueden ser estéticamente agradables al tener 12 nos dará una cuadrícula con la que trabajar ya que entonces podemos disenar. Por ejemplo, tres columnas de textos o cuatro viene de fotos en una cuadrícula que tiene 12. En general, estos tipos no se mostrarán en la página web final. Son solo para que lo usemos como guías y musa. Vamos a establecer las columnas en 12 y luego la canaleta es el espacio entre las columnas y 20 está bien para eso. Si solo estuviéramos diseñando algo para un dispositivo móvil como un teléfono, entonces podríamos usar menos columnas. Pero este sitio web se hará para diversos tipos de pantallas. Hagamos clic en la flecha junto a la configuración avanzada para que aparezcan algunas opciones más. Ah, altura mínima no necesita ser ajustada a partir de los 500 píxeles predeterminados para este proyecto. Tendremos contenido. Mueve bien más allá de eso de todos modos. Y 500 píxeles nos da un poco de espacio inicial con el que trabajar para mínimo con vamos a mantenerlo en los 320 píxeles predeterminados. Eso debería estar bien para dispositivos de navegación web más pequeños como teléfonos así como pantallas más grandes . No necesitamos ir más pequeños que eso por un mínimo con si estás familiarizado con el diseño editorial o programas como adobe en diseño, entonces deberías estar familiarizado con los márgenes. Si no estás familiarizado con eso, no es gran cosa. Los márgenes son solo guías dentro del área de contenido del sitio web. Actúan como una guía para que el diseñador Web muestre dónde necesitamos mantener el contenido, por ejemplo, alejado del borde de la página web en orden, tener algo de espacio para respirar. El relleno es relleno extra o espacio fuera del espacio en el que estamos trabajando para este proyecto. Pongamos ambos a cero, ya que no necesitaremos márgenes ni relleno de inmediato. Y podemos ajustar el espaciado de otras maneras, lo que se repasará notará que cuando cambiemos el ajuste superior de los márgenes, lo que significa que el espacio en la parte superior de la página es, cambia también los otros tres. Eso se debe a que están vinculados por defecto. Si quisiéramos solo los márgenes de un solo lado de las páginas, podríamos desactivar eso para que podamos ajustar solo uno. Por último, asegurémonos de que esto esté ajustado al centro. Debe ser por defecto bajo eso es Resolución. Estándar significa que las imágenes en la página del sitio web estarán en el estándar 72 PP I o píxeles por pulgada, independientemente de si los usuarios que navegan por el sitio web están utilizando una pantalla estándar o una pantalla de ojo DP o retina alta . Si seleccionamos alta D P I, podemos utilizar versiones de mayor resolución de las imágenes para aquellas con pantallas de alta resolución , pero sí aumenta el tiempo que se tarda en descargar páginas. Dado que las imágenes son mucho más grandes como lo indica este diálogo, mantengamos la opción de resolución establecida en estándar Sticky Footer solo significa que el contenido en el Pie de página En otras palabras, el contenido común visto a través de la página web en el parte inferior de las páginas se mostrará en la parte inferior de las páginas Web, aunque el contenido del resto de la página sea más corto que la ventana del navegador. Si desmarcamos el pie de página pegajoso, entonces el pie de página estará justo debajo del contenido de la página Web y no necesariamente en la parte inferior de la ventana del navegador Web. Entonces mantengamos eso comprobado para este proyecto. Ahora vamos a dar click. OK, tenemos configurado el archivo muse para poder empezar a construir nuestro sitio web. Adelante y digamos esto como archivo. Yo lo llamo los globos de archivo Muse y más allá. No tendremos los archivos separados como páginas HTML, imágenes incrustadas y otros contenidos hasta más adelante, cuales repasarán el click guardar y luego guardaré nuestro sitio web hasta el momento, Gracias y ya veremos en la siguiente lección. 7. 2.2 de Agregar páginas y planificar el sitio web: todo bien. Ahora que tenemos configuración divertida de archivo, podemos empezar a agregar páginas al sitio web por defecto estaban en modo planeado el cual se indica arriba en la parte superior. Se trata de una especie de mapa de todas las páginas de la página web. Idealmente, tendríamos las páginas del sitio web planeadas con anticipación incluso antes de comenzar Muse. Y mucha de esta información resultaría para reunirse con el cliente o si es tu propio sitio web, querrías decidir cuáles serían las áreas primarias o las páginas de nivel superior del sitio web. Todavía podemos planear el sitio web y la musa, aunque independientemente necesitamos agregar páginas en esta área. Podemos hacer esto haciendo clic en el signo más al lado de la página principal. Esto agregará una página de hermanos, que es otra página de nivel superior en el sitio. Vamos a nombrar esto. Vuelve a hacer clic en el signo más y curamos otra página llamada Preguntas y finalmente hacemos clic en el dedo del pie signo más. Agrega otra página y llamémoslo contacto. Podríamos agregar lo que se llaman páginas infantiles debajo de estas páginas de hermanos. Thes entonces se convertiría en sub páginas por debajo de las páginas de nivel superior y las páginas secundarias están en menús desplegables cuando creamos un menú más adelante. Por ejemplo, vamos a crear una página infantil debajo de la página de contacto y llamarla redes sociales. Vamos a crear una página infantil abajo sobre y poner direcciones allí. Hay otra forma de agregar páginas. Podemos hacer click en la página sobre el menú y hacer clic en agregar nueva página de nivel superior. También podríamos hacer clic derecho en la PC o control. Haga clic en el Mac en la parte superior de una página y haga clic en Nueva página de hermanos o en nueva página de niño. También podemos duplicar la página, eliminar la página, lo que también podemos hacer haciendo clic en la X en la esquina superior derecha de una página, renombrar la Página y abrir la página, que simplemente la abre en modo diseño. También podemos ajustar las propiedades de página de una página específica, pero vamos a repasar cómo ajustar las propiedades del sitio en un poco, lo que solo hará las propiedades de todas las páginas del sitio, lo cual es mejor para la consistencia. A menos que quisiéramos ajustar las propiedades de una página específica, también podemos ajustar si una página está incluida o no en los menús que creamos, lo cual tendrá algún sentido más adelante una vez que configuremos un menú. Por último, también podemos ajustar a qué página principal de las páginas enlazadas si tenemos más de una página maestra . Más adelante configuraremos el contenido para la página principal, por lo que no necesitamos ajustarlo ahora. Dado que solo hay una página maestra por defecto, podemos hacer clic y arrastrar las páginas en modo planificado y cambiar las páginas secundarias a páginas hermano de nivel superior , por ejemplo, y viceversa. Si estás siguiendo junto con mi ejemplo, entonces tenemos nuestras páginas configuradas hasta ahora en modo planeado. Si tienes más páginas que agregar o menos porque estás diseñando y lanzando un sitio web diferente a nuestro ejemplo, entonces ajusta las páginas en este modo según sea necesario. Asegúrese de ir a archivo guardar sitio con el fin de guardar los cambios. La próxima vez que guardemos los cambios, te sugiero que uses un nombre diferente por lo que iremos a guardar sitio como la próxima vez. Esto es solo en caso de que el archivo original se corrompa. Tenemos copias de seguridad cada vez que hacemos un montón de cambios. Esto no es obligatorio sino mejores prácticas, o al menos asegúrese de tener una copia de seguridad del archivo en una unidad diferente o en línea. Gracias. Y te veré en la siguiente lección. 8. 3.1 usando páginas maestras para elementos comunes: En esta lección, aprenderás sobre la importancia y utilidad de las páginas maestras cuando diseñamos páginas Web y agregamos contenido como fotos, ilustraciones de texto o videos. Esos elementos suelen estar sólo en esa página específica o poniéndolos. Por ejemplo, la página de direcciones a un negocio podría ser la única página que tiene un mapa en ella, y una página de biografía podría ser la única página que tiene información sobre los fundadores de una empresa. Pero algún contenido debe estar en todas las páginas de un sitio web, como una navegación consistente en la parte superior. Ah, pie de página en la parte inferior con información de contacto o enlaces de redes sociales o un color de fondo específico a través del sitio. Y queremos poder cambiar ese contenido sin tener que cambiarlo en todas las páginas una de las veces, ya sea que el sitio web tenga cinco o 500 páginas. Por eso tenemos páginas maestras. Si estás familiarizado con Adobe y diseñado, el concepto de páginas maestras debería ser familiar para ti. Si no lo estás familiarizado, no te preocupas pasarás sobre cómo usarlos de manera efectiva y musar para que tengamos elementos de diseño y funcionalidad consistentes en todo el sitio web. Entonces, empecemos. Agregando elementos comunes. Haga doble clic en la página maestra llamada Maestro Abajo aquí que trae la página maestra en modo diseño. Los guías no se mostrarán en la página web. Son solo chicos para que pasemos A medida que diseñamos, estas guías verticales aire desde las columnas mientras que la horizontal guía el aire para el encabezado y son áreas de pie de página y también para ajustar los márgenes. El espacio vertical disponible se basa en la altura mínima inicial que dijimos antes, podemos hacer clic y arrastrar la flecha interior aquí dedo del pie ADM. O espacio entre la parte inferior del navegador en la parte inferior de la página, que es controlado por esta flecha para este proyecto. Yo quiero que la carta esté al ras con la parte inferior de la ventana del navegador, sin embargo, así que volvamos eso hacia arriba. También podemos ajustar la altura del encabezado y pie de página y agregar algo de espaciado por encima del encabezado. Si es necesario, Haga clic y arrastre la flecha superior en orden del dedo del pie. Agrega algo de espaciado entre la parte superior de la página y la parte superior del navegador. Esto realmente depende de tu proyecto, ya que algunas navegaciones pueden estar al ras con la parte superior del navegador, mientras que otras no. Para este ejemplo, vamos a establecer esto en 10 píxeles para un poco de espacio de respiración por encima del encabezado y la página mientras hago clic y arrastra indica la distancia entre la parte superior de la página y la parte superior del navegador aquí. A continuación, haga clic y arrastre esta flecha a 75 píxeles, por lo que queda a 75 píxeles por debajo de la parte superior de la página, que está a 10 píxeles de la parte superior del navegador. Entonces, realidad, tenemos 85 píxeles de espacio aquí arriba trabajo con la inclusión del espaciado extra de 10 píxeles para algún espacio de respiración. Vamos en la parte superior del pie de página, dos ex de 50 píxeles, ya que eso lo pondrá a 50 píxeles por encima de la parte inferior de la página aquí, ya que nuestra altura mínima inicial se establece en 500 píxeles. A continuación, sumemos algo de contenido arriba en la parte superior para delinear el encabezado del resto de la página. Una opción sería agregar una línea aquí entre el encabezado y el resto de la página. Si estuviéramos recubriendo esto, podríamos simplemente agregar un caballo en una línea en el código, pero en Muse, podemos agregar un rectángulo y luego solo tener un lado de él. Haga clic con una línea en la herramienta de rectángulo en el panel de herramientas, y luego haga clic y arrastre por la parte superior. Aquí dijo que la parte inferior del rectángulo está a lo largo de la parte inferior del área de cabecera. Haga clic arriba en trazo hacia arriba por la parte superior y configúrelo a un color para este ejemplo. Sólo te lo voy a poner negro. Esto controla el grosor del trazo o borde, y lo mantendré establecido dedo del pie uno. Podríamos curvar las esquinas agregando un radio de esquina o algunos de ellos aquí, pero no voy a añadir eso en este ejemplo. También podemos añadir efectos como una sombra, bisel o resplandor. Pero a menudo hay aspecto poco profesional pero a veces puede ser relevante o profesional y depende de la marca del cliente y cómo se haga el efecto. También podemos ajustar la opacidad de una forma seleccionada para hacerla menos opaca y más transparente. Si queremos aquí, vuelta aquí en trazo, vamos a dar click en la palabra trazo. Vamos a asegurarnos de que el trazo esté alineado con el interior de la forma para este ejemplo, y luego también vamos a hacer clic en esto Así que estos aire no todos ligados a ser igual. Entonces haz el trazo. Espere a que la parte superior izquierda y la derecha se ajusten a cero. Tendremos una línea al fondo. Podemos previsualizar cómo se ve esto yendo a previsualizar en la parte superior. Sabe que la línea no cruza todo el camino. Eso se debe a que intencionalmente no puse la maraña correcta para ir al 100% con antes, solo para mostrar lo que hace. Esto es más relevante para arreglarlo con sitios web de diseño, aunque algunas formas y fotos pueden ser un látigo fijo, incluso en fluidos con sitios web. Pero para este ejemplo, queremos que el enlace recorra todo el camino, independientemente de lo grande que sea la ventana del navegador. Entonces con la herramienta de selección seleccionada, Haga clic y arrastre la forma para que se ajuste al borde y diga 100% para W o con asegúrese seleccionar la forma y no la barra que establece los puntos de ruptura, que pasará más tarde. Ahí vamos ahora, vamos a previsualizar y veamos la diferencia. Es así como agregamos una línea que va por todo el camino a través de la ventana, independientemente de lo grande o pequeña que sea la ventana del navegador para este proyecto. No quiero una línea, sin embargo, pero quería mostrarte cómo agregar una fácilmente. Voy a añadir un rectángulo que tenga un relleno. Ya que esto es para un cliente que da paseos en globo cazador, queremos que los colores sean brillantes y soleados. Eliminaré la forma que acabamos de diseñar para la línea, y voy a crear un rectángulo en la parte superior para el fondo del encabezado. Y voy a poner el relleno en algo azul claro, algo así como el cielo pero sigue siendo un azul fuerte. Voy a usar el código decimal de seis dígitos o un Hexi a nueve un B E a y luego entrar. Puedes usar eso o seleccionar un color diferente. Ahora agreguemos un color de fondo al área del pie de página dibujando otro rectángulo sobre esa área con los trazos que a ninguno para éste también. Cambiemos el Phil por un color que no sea súper brillante. Eso podría distraer fácilmente del contenido de la página, como las fotos que eventualmente colocarán aquí. Voy a ponerlo en C 69 C seis D, que es un color más silenciado pero aún relevante. Podríamos hacerlo más de un color naranja si quisiéramos crear un esquema de color complementario con el azul. Pero vamos a repasar los temas de color más adelante y ¿cómo configurar eso? El chulo es que podremos justo esto más adelante si es necesario, y se reflejará a través de las páginas. Dado que esto está en una página maestra, asegúrate de que el borde va al 100% a medida que dibujas esos rectángulos. Si necesitamos ajustar el tamaño después de haber calado inicialmente, podemos utilizar la herramienta de selección y hacer clic y arrastrar la parte superior o las esquinas o el lado izquierdo o derecho . Ahora tenemos configurados los fundamentos de la página maestra. El contenido se refleja en toda la página web. Cualquier cambio realizado en la página principal se reflejará a través de las páginas. Ahora digamos que queríamos ciertas páginas dedo del pie tienen un color ligeramente diferente en la parte superior o un pie de página de diferente tamaño o lo que sea. Podemos agregar una nueva página maestra aquí abajo solo en una página haciendo clic en el signo más por defecto. Se llama Ser Maestro. Voy a rápidamente sólo añadir algo de contenido para este ejemplo. ¿ Qué tal un círculo? Y añadiremos algo de color y notaremos que ninguna de las páginas tiene este contenido. Eso se debe a que todos están asociados con un maestro, que se indica debajo de cada página para cambiar eso. Simplemente a la derecha, haga clic en el PC o control, haga clic en el Mac y vaya a maestros y luego ser maestro. Ahora esta página específica tiene el contenido de la nueva página maestra. Cuando sólo una página maestra para este proyecto, sin embargo. Entonces voy a volver a poner eso de nuevo a un maestro y eliminar ser página maestra. Ahora asegúrate de guardar tu trabajo, preferentemente con un nuevo nombre. Entonces tenemos ah, archivo de copia de seguridad Orly. Guarda otra instancia de la misma en algún lugar. Gracias. Y te veré en la siguiente lección. 9. 3.2 Cambio de propiedades de fondos de todas las páginas o una página: para este proyecto. Estoy manteniendo el color de fondo establecido en el blanco predeterminado. No obstante, a veces quizá queramos cambiar el fondo por otro color o incluso por una imagen. Aquí te explicamos cómo hacer eso. Haga doble clic en una página para abrirla en el modo de diseño, luego haga clic en el navegador. Opción de llenado arriba en la parte superior. Podemos poner la espalda en un color, un Grady Int o incluso una imagen. Podemos tener una imagen pequeña que se repita a través del fondo del anterior patrón, y podemos ajustar si la imagen de fondo se desplaza o no con la página o una estática o no en movimiento mientras nos desplazamos. Para este ejemplo, vamos a cambiar el fondo a un color. Se lo acabo de decir a Blue, y eso no se ve bien en este ejemplo, pero solo estoy mostrando cómo cambiarlo. Quisiéramos asegurarnos de que el color de fondo se viera bien en la página. Por supuesto, algo más sutil para esto Así que cierra esa página, y ahora hay un color de fondo para esa página. Pero ¿y si quisiéramos mantenerlo consistente, cuál es la mejor práctica para una página de negocios como esta? Daremos doble click en la página maestra A con el fin de cambiar el color de fondo para todas las páginas del sitio, y lo cambiaré a una especie de color verde. Y ahora podemos ver que todas las páginas tienen verde excepto la página que ya habíamos cambiado para esa página. Ese color de fondo está anulando la configuración de la página principal. ¿ Cómo cambiar eso? Bueno, solo podemos hacer clic derecho en la PC o controlar, click en el Mac sobre esa página y planear modo y hacer clic en un maestro para que volvamos a aplicar la configuración de recta masiva a esta página. Por supuesto, quiero cambiar este dedo trasero blanco para este ejemplo, así que vamos a la Página maestra y ponerlo en blanco. Un consejo rápido. El código decimal Hexi para blanco es F F F F F f, y el código decimal Hexi para negro es 000000 No es necesario memorizar aquellos cuando se utiliza un programa como una musa, ya que simplemente podemos establecerlo aquí. Pero ayuda saber que en caso de que alguna vez trabajemos en el código más tarde o queremos establecer rápidamente un dedo del pie de color, una de esas configuraciones. Entonces cerremos la página maestra y luego podremos guardar el archivo si es necesario. Pero no hicimos ningún cambio, en realidad. En esta lección, quería mostrarles cómo cambiar el color de fondo de la página individual o del sitio entero si fuera necesario. Gracias, y ya lo veré en la siguiente lección. 10. 3.3 de Ajustar propiedades de el sitio de 3.3: característica útil de Muse es que podemos ajustar las propiedades de un sitio incluso después de que hayamos empezado a trabajar en él. Ir a las propiedades del sitio de archivos y los ajustes bajo diseño son las mismas opciones de configuración que teníamos antes al crear un nuevo archivo de sitio en Muse, por ejemplo, si el sitio tiene un fluido con o arreglar con el tamaño de los márgenes y el relleno y así , podemos ajustar esto incluso después de configurarlo inicialmente. Al crear un nuevo sitio, vamos a hacer clic en el contenido por defecto. Los navegadores web tendrán ciertos estilos para hipervínculos. Por ejemplo, los enlaces suelen ser azules con un subyacente con el fin de diferenciarlos del texto regular. Por lo que los usuarios de la Web no, son enlaces en los que se puede hacer clic para este proyecto. Personalicemos estos. El primer ajuste es para hipervínculos normales, decir, hipervínculos, que no tienen un cursor sobre ellos y para páginas que no han sido visitadas. Pero los enlaces por defecto son azules y subrayado ha indicado aquí con el cheque, marca notó el guión o guión aquí. Eso solo significa que el ajuste usará el estilo local en lugar de anularlo. Lo que eso significa es que se subrayará el texto de hipervínculo, pero sólo se pondrán en negrita o en cursiva si ya están estilizados. De esta forma podríamos hacer que todos los enlaces sean negritos o en cursiva, pero eso es solo mantenerlo a los valores predeterminados del ajuste local se usa, pero cambiemos ligeramente el color. Vamos a hacer clic en el azul aquí, y lo estoy cambiando a tres d 94 Si f puedes ajustarlo al color que quieras cuando pasemos el cursor sobre los enlaces, cambiemos el color a un color de cortesía que sea algo naranja. Estoy usando FF C 34 F De esta manera hará aún más obvio que el texto Subrayado es un enlace ya que reacciona cambiando de color a contraste en color para visitado un enlaces activos, voy a cambiar el mismo color. El color azul tres D 94 ff. No me preocupa indicar que una página ya ha sido visitada cambiando de color, y eso debería ser obvio ya que no hay tantas páginas en este sitio web. En fin, Active sólo significa que si hay un enlace de texto en una página en la que ya está el usuario Web, no creo que eso suceda con este sitio web, al menos con el enlace de texto, pero también lo cambió a color azul. Sugiero dejar vertical y horizontal para que las barras de desplazamiento del navegador sean automáticas, ya que no quieres que aparezcan las barras de desplazamiento si no son necesarias. Es decir, si todo el contenido está encajando en la ventana del navegador, entonces no necesitamos barras de desplazamiento para este proyecto bajo imágenes que tiene la opción de convertir archivos PNG. T. J. Peg, te voy a desmarcar esto porque si tenemos un archivo PNG que es parcialmente transparente para que el fondo se muestre a través de parte del mismo, entonces si convertimos JPEG, se perderá la transparencia. Podríamos combinar estos archivos en blisters de photoshop, tenerlo hecho comprobaciones porque aprenderemos un poco más sobre los archivos PNG más adelante. Los archivos PNG tienen compresión sin pérdidas, mientras que J. Peg a veces puede tener una calidad ligeramente menor, si no se guardan con los ajustes de calidad más altos posibles. Pero las selecciones J pueden ser archivos más pequeños que los archivos PNG, ahí el razonamiento para convertirlos a J Pegs. Pero vamos a querer mantener los archivos PNG en ese formato en este proyecto, así que desmarquemos ese bien diseñado un favor. Imagen común más adelante, que es la imagen en la barra del navegador o favoritos, y el navegador Web que acompaña a un sitio web. Esto no es obligatorio toe have para un sitio web, pero puede ser útil para branding, así que no te preocupes por eso. Por ahora, vamos a dar clic en el área avanzada pasará más adelante en la edición del navegador, pero esto solo controla si en la edición del navegador habilitar o no el texto sincronizado. Iremos más adelante en la edición del navegador mientras exportamos y en el sitio web bajo texto. Esto solo significa si los enlaces de anclaje, que son hipervínculos a partes específicas de una página llamada Anclajes siguen el estilo de estado activo . Eso desmarca, pero para este proyecto, no importa, ya que configuramos el color para que sea el mismo que un hipervínculo regular. De todos modos, la ronda que conduce a una opción de número entero controla si dejar cuál es el espaciado vertical entre líneas de texto, se redondea al número entero. En otras palabras, si el liderado automático para un determinado tamaño siguiera con 16.8, lo cambiaría a 17 puntos número de agujero, permitiendo que los conduce a una mirada más consistente a través de los navegadores. Entonces dije, solo mantenerlo comprobado con la versión más reciente de Muse. El texto utiliza las mismas métricas de fuente que las aplicaciones populares del navegador Web, por lo que el texto se ve más consistente y preciso. Pero si quieres usar posiciones de línea base más antiguas, que es algo así como la corrida inferior de la mayoría de las letras la línea base, entonces revisarías esto para hacerlo más compatible con versiones anteriores de Muse. Eso es solo mantener esto sin marcar a menos que tengas un archivo diseñado en la versión anterior de Muse, y no se ve bien y solo quieres usar La configuración más antigua se repasarán los bonos Web más adelante. Pero esta configuración sólo significa que se utiliza el subconjunto predeterminado de caracteres en una fuente. Queremos cambiarlo del dedo del pie todo. Si hay algún glitz o personajes especiales que queríamos usar que no estamos apareciendo por defecto. Sugiero mantenerlo establecido en el subconjunto predeterminado, y podemos cambiarlo más adelante si hay un carácter específico que no muestra las páginas de carga más rápido. Usar opciones de fondos de reserva sólo significa que una página Web se cargará con un fondo de respaldo en lugar de un nuevo bono Web descargado, lo que podría tardar un poco más tiempo dije, simplemente manteniendo esto sin marcar para que la página no se cargue hasta que se cargue la diversión correcta, aunque pudiera tardar un pequeño segundo o así más si el fondo aún no se ha descargado, Queremos que la página luzca correcta. Por último, mantengamos a los hombres. Si CSS trekked. Eso sólo significa que hace que el código CSS sea más compacto para que las páginas se carguen más rápidamente. CCS es sinónimo de hojas de estilo en cascada y es un lenguaje de codificación que permite el estilo, izamiento y formateo de elementos y páginas y funciona con codificación HTML. Haga clic en Aceptar y vamos a guardar este archivo En la siguiente sección estará agregando contenido, incluyendo imágenes dos páginas que veré en la siguiente lección. 11. 4.1 usando capas para la organización y el pedido: igual que otros programas de diseño gráfico de Adobe, incluyendo Photoshopped en Diseño e ilustrador Muse tiene un panel de capas, lo que puede ayudar a organizar un contenido de pedido. El panel Capas y Muse funcionan un poco diferente que el panel Capas en Photoshopped, aunque está más cerca de la funcionalidad de en diseñador o ilustrador. Pero aunque no hayas usado esos programas, no es gran cosa, ya que es bastante sencillo de entender y usar. Haga doble clic en la página principal y haga clic en el panel Capas sobre a la derecha. Si eso no está ahí por alguna razón, o simplemente para conocer otra forma de encontrarlo, podemos ir por defecto capas de ventana del dedo del pie. Sólo tenemos una capa, que se llama Capa uno Doble Haga clic en eso y llamémoslo contenido primario. El color no tiene nada que ver con el contenido. En esa capa solo hay una forma de diferenciar entre las capas, lo cual se hará evidente en un poco, así que la mantendré azul claro y pincho en Aceptar. A continuación, haga clic en el icono de agregar nueva capa en la parte inferior del panel de capas. Haga doble clic en eso y llamémoslo cabecera. Añadamos 1/3 capa y nombrémoslo pie de página. Ordenemos estos de la misma manera que están en la página para mantenerlos ordenados. Entonces haz clic y arrastra la capa de pie de página y llévala a la parte inferior de las capas, y deberíamos tener el encabezado en la parte superior y el contenido primario en el medio. Observe que hay una flecha junto a la capa de contenido principal. Eso se debe a que hay contenido en esta capa, y podemos hacer clic en eso para mostrar los objetos en esta capa. Estos son los dos rectángulos que ya hemos creado, el encabezado superior y las formas de fondo de pie de página inferior. Queremos que esos estén en sus claros de crack. Pero primero, vamos a renombrarlos Haga clic en el cuadro para apuntar al objeto. Esto debe seleccionarlo y mostrar qué rectángulo del panel Capas es. Qué rectángulo en la página Web advierte que éste está seleccionado. Entonces ahora vamos a la derecha. Haga clic en el PC o control. Haga clic en el Mac en estas capas y haga clic en renombrar. Vamos a renombrarlos pie de página, fondo y fondo de encabezado. Podemos ordenar estos dentro de la capa actual si se superponían en la página Web y queríamos que uno estuviera arriba, pero necesitamos mover estos dedo del pie otras capas, así que haz clic y arrastra el fondo del pie de página hacia abajo hasta la capa más ajustada. Podemos hacer esto haciendo clic y arrastrando sobre el propio nombre otras formas de hacer clic en el cuadro para apuntarlo. Esto es útil para cuando algunos objetos podrían estar por debajo de otros, y queremos seleccionarlo. Haga clic y arrastre en el área de cuadro de hasta la cabeza antes. Observe que el color de la capa en el panel Capas coincide con las líneas de selección alrededor de los objetos seleccionados. realidad, la página Web no tendrá estos colores delineados. Es solo para nosotros poder decir en qué más adelante estamos en qué objeto se selecciona. Ahora tenemos el icono de la papelera en la parte inferior del panel de capas, y podemos hacer clic en eso cuando se selecciona un objeto de capa en orden. Eliminarlo. También podemos hacer clic y arrastrar capas u objetos al icono del cubo de basura. El otro botón es el icono de localizar objeto. Si seleccionamos un objeto en la página Web con la herramienta de selección, comprimimos ese icono, que parece una lupa en la parte inferior del panel de capas para encontrarlo en el panel de capas. Esto es particularmente útil para los archivos que tienen muchas capas y objetos en ellos. Si estás siguiendo junto a mí, entonces estos aire todas las capas necesitarán por ahora. Así que adelante y haga clic. Ahí está la flecha orientada a la derecha para cerrar el panel. Esperemos que ahora entiendas cómo funcionan las capas y por qué las usamos en Muse. Esto se hará aún más evidente a medida que agregamos objetos, ya que si algunos objetos están uno encima del otro, es fácil reorganizarlos en el panel de capas para que ciertos objetos estén en la parte superior invisibles. Ya veré en la siguiente lección. 12. 4.2: configurar áreas de elementos para la organización y estética: antes de añadir imágenes y luego textualizar el diseño de las páginas lo que se ha cosido algunas áreas de elementos o áreas que se espaciarán para tener algún contenido. Algunas de estas áreas incluirán imágenes, texto, tanto imágenes como texto. Además de ayudar al diseño y planeación de un diseño de una página Web, nos permite agregar también el color de fondo de áreas específicas. Por lo tanto, haga doble clic en la página principal para que se abra en modo de diseño. Asegúrate de que estamos trabajando en la capa de contenido principal en el panel de capas y de nuevo, si no tienes eso, asegúrate de hacer clic en las capas de aquí a la derecha o ir a las capas de la ventana del dedo del pie. Seleccione la herramienta de rectángulo y haga clic y arrastre en el borde debajo del encabezado. Vamos a configurarlo en unos 200 píxeles de alto y establecerlo en 100% para el ancho. Por supuesto, algunos sitios web tienen un fijo con cuatro elementos y que encontramos también. Pero para este proyecto, queremos que se extienda por toda la página. Esto va a contar con un gráfico de introducción. Entonces en el panel Capas, démosle un nombre haciendo doble clic en él y escribiendo Introducción gráfico Ray debajo de esa área. Vamos a crear otro rectángulo y configurarlo en 400 píxeles de altura y 100% con. Aquí vamos y arriba en la parte superior. Si ves esta opción de cambio de tamaño aquí, si haces clic que puedes cambiar de tamaño manualmente también. Si estás teniendo un momento difícil ajustando la altura a algo específico con el ratón, puedes escribirla ahí. Y además, si hace clic en el aire abajo aquí, también podemos configurarlo en Responsive with Responsive dentro de altura o estirarse para navegar con. Este es uno que tenemos hasta ahora porque tenemos que fijar al 100%. Dejaremos eso ahí por ahora. Estará repasando el diseño responsive más adelante en el curso. Vamos a renombrarlo texto de introducción. Esto irá por debajo del gráfico de introducción en la página y en el panel Capas. A pesar de que no se superpongan. Observe cómo empuja el área del pie de página hacia abajo mientras la dibujamos. Eso ayuda, ya que queremos agregar este contenido encima del pie de página. Siguiente voluntad en un área para una llamada a la acción incluirá un botón aquí más tarde que les apuntará a una página con más información en caso de que quieran enviarla para el paseo en globo sabe que no hay lugar por encima del pie de página, sin embargo. No queremos hacer clic y arrastrar un nuevo rectángulo encima del pie de página o del encabezado, para el caso, porque entonces lo colocaría encima del pie de página o encabezado. Así que haz click y arrastra por encima de esa zona así. Entonces podemos redimensionarlo con la herramienta de selección. Por mi ejemplo, lo voy a establecer a 100 píxeles de altura en 100% con y de nuevo si podemos. Y de nuevo podemos redimensionarlo aquí o al cambiar el tamaño. Simplemente haga clic en eso y todo, escriba 100 y luego ingrese o regrese. Eso lo redimensionará para nosotros. Llamemos ahora a este texto de llamada a la acción. No tenemos que añadir estas áreas de elementos, pero puede ser útil cuando necesitamos cambiar el fondo de un área, y nos ayuda a planear el contenido del diseño de las páginas. Cerremos esta página y luego guardemos los cambios en el archivo. Veré en la siguiente lección donde empezaremos a agregar imágenes al sitio Web 13. 4.3 Agregar imágenes a tu sitio web: en esta lección, aprenderás algunas maneras diferentes. Toe agrega imágenes a tu página web. Agregaremos una imagen como fondo al rectángulo, y luego también colocaremos algunas imágenes. Si no está abierto ya, abra los globos y más allá del archivo Muse en el que hemos estado trabajando y haga doble clic en el dedo del pie de la página principal abierto en modo diseño con la herramienta de selección, Haga clic en el gráfico de introducción del rectángulo. Haga clic en la palabra llenar en la parte superior, luego haga clic en Agregar imagen. Idealmente, moveríamos cualquier foto u otras imágenes que estemos utilizando en un sitio web a una carpeta Imágenes junto a un archivo divertido para mantenerlo organizado, pesar de que cuando exportemos el sitio web posteriormente a HTML, organizará archivos para nosotros siempre y cuando el soporte amonte aire no movido ni borrado mientras trabajamos en el sitio y Muse todavía los puede encontrar, entonces no necesariamente necesitamos ponerlos en una carpeta de imágenes. En primer lugar, podríamos simplemente insertarlos desde la carpeta Archivos de soporte. Seleccione el archivo Inicio introducción gráfica y haga clic. accesorio abierto podría ajustarse al tamaño original. Este es un archivo de imagen muy grande, por lo que sólo vemos parte del cielo con estos ajustes, ya que la foto es mucho más grande que el área del rectángulo que hemos dibujado en el menú de película cambiar ajuste a escala para encajar. Esto cambia el ajuste de la imagen para que todas las imágenes vistas, aunque haya espacio en blanco a los lados. En este ejemplo, el rectángulo es mucho más ancho que la foto, que no es del todo un cuadrado pero no es muy amplio en comparación con su altura en comparación con el marco. Si la foto tuviera una orientación más amplia que el rectángulo, entonces habría espacio vacío en la parte inferior en su lugar. No queremos este espacio vacío, sin embargo, sin embargo, así que cambia el ajuste a escala para llenar. Lo que eso hace es llenar la forma del rectángulo con la foto, pero recorta el área superior e inferior para que se ajuste a la forma. Ajusta el ajuste de posición para alinear la foto con el medio o superior o inferior en este ejemplo. Si lo ajustamos a la izquierda o a la derecha, no lo afectará con este ejemplo, porque la foto ya está escalada para llenar el área longitudinalmente. Para este ejemplo, ajustemos la posición a una de las posiciones superiores. Esto nos dará una bonita foto del área de globos de aire caliente para gráfica de introducción. Ahora digamos que queremos que este área gráfica ocupe un poco más de espacio vertical. Podríamos hacer clic y arrastrar el borde del rectángulo, pero luego se solaparía con la otra área que hemos dibujado para el texto de introducción. Por lo que necesitamos cambiar el tamaño de esta forma y mover ésta hacia abajo. Entonces en lugar de eso, vamos a hacer clic, arrastrar hacia un lado aquí y seleccionar las dos formas Introducción Tech Shen y llamó a un texto de acción. Por supuesto, también podríamos presionar shift y hacer clic en ambos en el panel de capas. Da clic y arrastra un poco a esos dos hacia abajo para que tengamos más espacio para esta zona gráfica superior. A continuación, haga clic y arrastre el borde inferior del rectángulo gráfico de introducción para que se ajuste al siguiente. Así es como hacemos eso. Es así como agregar una imagen a una página Web agregándola como la forma siguiente, vamos y tres imágenes colocándolas, ir al lugar de archivo y luego seleccionar algunas imágenes de la carpeta Fotos Baja Rez. Mantenga el control en el PC o comando en el Mac y haga clic en tres Para seleccionar, estoy seleccionando Globo uno, Globo 16 y Globo 18. Haga clic en Abrir, y nuestro cursor se convierte en una pequeña vista previa de las imágenes que colocarán podemos presionar a izquierda y derecha en el teclado para recorrer las imágenes seleccionadas en orden, colocar una que queramos. En primer lugar, coloquemos tres imágenes en esta área, que antes denominamos texto de introducción. Tendremos texto en esta área, pero quiero agregar tres imágenes en la parte inferior de la misma. Para mantener el sitio web visualmente interesante, solo podemos hacer clic en el área, y eso colocará la imagen en el tamaño original. No quiero que sea eso en gran medida en este ejemplo. Entonces voy a presionar el control Z para deshacer, y en el Mac sea Command Z. Voy a dar clic y arrastrar con el fin de colocar las fotos, notar el número a la derecha del ratón mientras hacemos clic y arrastramos. Ese es el tamaño porcentual de la imagen original para que podamos hacerla más pequeña, ya que los programas de Adobe hacen un buen trabajo de re dimensionar las imágenes para ser más pequeñas pero no queremos colocar a un hijo más grande, es que la imagen original, así que asegúrate de que el número no esté por encima del 100%. Estoy dando click y arrastrando estas fotos para colocarlas. Podemos entonces usar la selección le dijo, redimensionarlos para que estén alineados en la parte superior e inferior. Son diferentes con las relaciones de altura de los dedos, por lo que no serán lo mismo dentro de este ejemplo. Pero pueden tener espaciado consistente entre ellos altura consistente así como alineados lo largo de la parte superior de la parte inferior. Estamos aplicando algunos principios de diseño, a saber, alineación y consistencia, incluyendo espaciado consistente o proximidad. Consulta las guías que aparecen en la parte superior de la parte inferior. Cuando muevo y redimensionar estas fotos, esas nos ayudan a asegurarnos de que las fotos sean las mismas. Altura y música alineada también agregarán estas guías entre las fotos. En este caso, el espaciado entre cada uno es un cierto número de píxeles. Una vez que tengan un espaciado consistente entre ellos, mantenga pulsada la tecla shift y haga clic en las tres fotos en orden. Seleccionarlos. Después podemos hacer clic y arrastrar el grupo de fotos hasta que se muestre la guía central y las próximas lecciones se repasarán un par de consideraciones más a la hora de administrar imágenes y musa también redimensionará algunas en foto tomada primero porque idealmente eso es lo que hacemos antes de insertarlos en musa. Gracias. 14. 4.4 Ajustar y usar recursos en Muse: En esta lección, aprenderá a utilizar el panel de activos para administrar activos usados como imágenes y para editarlos o añadirlos atributos. Entonces cuando colocamos activos como estas imágenes J peg aquí, deberían aparecer en el panel de activos. Está al lado del panel de capas por aquí, o podemos ir de dedo activos de ventana que enumera son imágenes que hemos utilizado hasta ahora aquí tres colocadas en la página principal y una añadida como fondo en la página principal. Si se borra o se mueve una foto, entonces conseguiríamos un aire aquí. Entonces necesitamos volver a vincularlo para que podamos hacer click derecho en PC o control. Haga clic en el enlace Mac y haga clic en Re y dígale a Muse a dónde se trasladó la foto. Si se eliminó, necesitamos encontrar otra copia o volver a descargarla. Este panel también nos dice si se cambian los activos y necesitan actualizarse, en cuyo caso aparecería este signo de exclamación y nos indicaría que se había actualizado un activo . Te mostraré lo que quiero decir. Aquí tengo globo un punto jpeg abierto en el wee Photoshopped de la carpeta rez baja. Yo sólo voy a afilar un poco. Por lo que hay un cambio en el archivo usando un efecto de máscara sin carga. De acuerdo, ahora, vamos a guardar esto como el mismo nombre final. Por supuesto. Ahora atrás y musa, hay esta alerta junto al globo un punto j panel de Peg y Activos. Esta imagen se ha actualizado en otro programa, por lo que podemos hacer clic derecho en PC o controlar, clic en Mac y luego hacer clic en Actualizar activo. Ahora esta imagen refleja los cambios que hicimos en photoshop. Ahora nota. Bajo estas opciones, también tenemos algo llamado Recoger Activo. Lo tenemos aquí para cobrar un activo individual o hacia abajo en la esquina inferior izquierda del panel de activos. Podemos cobrar todos los activos. Lo que eso significa es que podríamos hacer copias de todas las fotos y otros activos que estaban usando y ponerlas en una carpeta que realmente puede ayudar con la organización, sobre todo si las imágenes o ilustraciones colocadas están por todas partes. Pero no necesitamos hacer eso porque estaremos exportando el sitio más adelante, y tendremos archivos HTML. Archivos de imagen. Atmore, todo organizado en varias carpetas, pasará por encima de las bibliotecas cc y un poco, pero justo debajo esa es una opción útil llamada Go to Asset. Si veíamos un activo en el panel de activos pero no pudiéramos encontrarlo fácilmente en el espacio de trabajo, solo podríamos hacer clic en esto, y resaltó para nosotros. Esto es especialmente útil cuando tenemos muchas imágenes y otros activos en varias páginas de un sitio web, en Bed link Options in beds, el archivo vinculado en el archivo mews. Entonces si los estamos compartiendo útiles con otros, no nos faltarán los cuidados de Link, por ejemplo. Pero aquí no tenemos tantas opciones después de incrustarlo. No queremos hacer esto aquí porque tenemos las fotos originales, y nuevamente lo estaremos exportando más adelante en Original nos permitiría editar rápidamente un activo en otro programa. sí necesitamos asegurarnos de que el tipo de archivo esté asociado a un programa de software de edición de imágenes Sin embargo,sí necesitamos asegurarnos de que el tipo de archivo esté asociado a un programa de software de edición de imágenes, en lugar de solo un programa de software de visualización de imágenes. Sin embargo,sí necesitamos asegurarnos de que el tipo de archivo esté asociado a un programa de software de edición de imágenes, Entonces si J clavijas aire configurado para abrir por Adobe Photoshopped por defecto, entonces eso funcionaría. Si solo abre una vista previa, solo esa asociación en tu sistema operativo es un panel de control, o simplemente abre Photoshopped primero y ábrelo desde ahí, revela en Explorer solo abre la carpeta en la que el activo vinculado en este caso, se encuentra una imagen. Esto por si acaso averiguamos dónde está esa foto en la computadora. Similar a eso es la opción copiar ruta completa que copia la ruta en el equipo al archivo en el portapapeles. Esa es sólo otra forma de ver dónde se encuentran los activos. Por ahora, ya que trabajamos en el sitio web y musa Ahora, antes de repasar la opción Editar imagen Propiedades, quiero explicar rápidamente esta opción. Optimizar el tamaño del activo. Esta opción no se mostrará a menos que hayamos hecho que la imagen colocada sea más pequeña que el tamaño original . Entonces para estas fotos estaban aquí las he colocado las cambiamos de tamaño para que sean más pequeñas. Fin musa. Por lo que tenemos esta opción. Esta es solo una forma conveniente de volver a muestrear las imágenes a este nuevo tamaño más pequeño para que no sean más grandes y tamaño de archivo del necesario. Ahora es una mejor práctica utilizar un programa de software de edición de imágenes como Adobe Photoshop para editar primero los lados de las imágenes antes de usarlas y musa. Pero quería mostrarles esta opción se re dimensionando unas cuantas imágenes y tienda de votantes en la siguiente lección y luego reinsertando estas imágenes aquí. Pero esta es una forma rápida de optimizar las imágenes en Muse si no tuviéramos acceso a photoshop . Por último, el Edit Image Properties nos permite añadir consejos de herramientas, que se mostrarán cuando pasemos el mouse sobre una imagen. Por ejemplo, el texto alternativo se cargará en los navegadores Web tales lectores de pantalla para las personas con discapacidad visual . Esto es importante dedo del pie agregar porque entonces las personas con discapacidad visual podrán escuchar cuáles son las fotos como su lectura para ellas desde el lector de pantalla. Entonces para este encendido, podríamos agregar Ah, globo aerostático en Kissimmee. Cualquiera que sea el contenido de la foto, la punta de la herramienta podría ser algo similar o simplemente más información sobre el activo si quisiéramos que algo apareciera cuando lo pasamos por encima. Ahora que hemos colocado algunas imágenes y sabemos optimizarlas y ajustarlas y musa en la siguiente lección hará algún recorte preestablecido a imágenes en Photoshop para que su optimizado y redimensionado en un programa de edición de imágenes que es muy bueno en re muestreo para alta calidad y mejor tamaño de archivo 15. 4.5 recortar y Resizing fotos para coherencia en Photoshop: En esta lección, aprenderás a redimensionar y recortar de manera efectiva las fotos en Photoshopped para que sean del tamaño correcto y con relación a altura cuando las utilicemos en Muse. Si tienes cloud creativo o si compraste un paquete de software a Adobe y por lo tanto tienes tanto Muse como Photoshopped, adelante y abre tienda de votantes si no tienes acceso a la tienda de fotos. No cambié el tamaño, thes e incluirlos en los archivos de soporte también. Existen algunas opciones gratuitas para programas de software de dimensionamiento de imágenes, pero la tienda de fotos es realmente el estándar de la industria. Cuando se trata de edición de fotos e imágenes. Ir a archivo abrir y abrir las tres imágenes que colocamos en Muse Balloon one dot j peg balloon, 16 dot jpeg y balloon 18 dot jp. Podríamos ir a ti imagen, tamaño de imagen y cambiar el ancho o la altura, pero eso mantendría la relación de altura batida igual. Es decir, a menos que desmarquemos la opción de relación de aspecto de restricción. Pero entonces distorsionaría la foto. Necesitamos que las tres imágenes tengan una congruente con y altura cuando las colocamos en la página Web cuando los pies de página tienen diferentes con dos ratios de altura. Por ejemplo, algunos tienen más de una orientación vertical, y otros tienen más de una orientación paisajística. Necesitamos usar un cultivo preestablecido. Esto recortará parte de la foto, pero podemos recortar las fotos para una composición efectiva y dimensiones consistentes. Si miramos hacia atrás en la página principal, hizo señas musa. En lugar de tener tres imágenes con tres látigos diferentes, aunque con la altura y alineación consistentes, necesitamos tener aquí tres imágenes con el mismo ancho y altura. El sitio con es de 1000 píxeles y tomando en consideración el espaciado entre las imágenes, hagamos cada imagen 300 píxeles de ancho porque entonces podemos tener 25 píxeles en los espacios entre las imágenes que sumarán hasta 1000 píxeles. Exactamente de vuelta en tienda de fotos. Seleccione la herramienta de recorte. Si no ves esto, ve a herramientas de ventana para asegurarte de que el panel Herramientas esté visible. Después arriba en la parte superior. Necesitamos establecer un tamaño de recorte preestablecido. Hagámoslo 300 p x por 300 p x y 72 p p i o píxeles por pulgada. Asegúrate de poner P X. De lo contrario, podría agregar yo termino por pulgadas y eso crea un archivo enorme. Si no tienes estas opciones, asegúrate de que esté configurado en W ex H ex resolución, lo que significa con por altura por resolución, ahí nota que el área de cultivo es un cuadrado. Eso es lo que queremos. Para este ejemplo, no voy a centrar el globo ya que creo que se ve mejor usando la regla de tercios para composición. Simplemente haga clic dentro del área aquí, luego haga clic y arrastre para mover el área de cultivo alrededor. También podemos hacer clic y arrastrar la esquina para ajustarla. Notó el tamaño y los píxeles a un costado ahí por la flecha. Queremos asegurarnos de que no vaya por debajo de 300 píxeles, porque entonces está haciendo la imagen más grande que el área original, lo que podría provocar picos. Elación. No queremos hacer imágenes más grandes que el original, solo más pequeñas si es necesario. Entonces algo así, y podemos hacer doble click dentro de esta zona para aplicar el cultivo. Oregon Pulse entrar en la PC un retorno en el Mac o una prensa la marca de verificación arriba en la parte superior. Por lo que ahora tenemos nuestra imagen redimensionada y recortada. Tenemos que guardarlo como un nuevo nombre de archivo. Entonces diré esto como home page balloon one dot j. peg acaba de conseguir un archivo guardar como en lugar de solo guardar, así que lo guardamos como un nuevo archivo. Queremos repetir ese proceso para las otras dos imágenes. Lo haré un poco más rápido. Ya que es el mismo proceso, vamos a asegurarnos de que la composición sea efectiva. Guardaremos esto como globo de página principal a Siempre queremos usar guiones o bajo anotadores en lugar de espacios y nombres de archivos y diseño y codificación Web. No queremos usar espacios sin importar si se trata de un archivo HTML en archivo de imagen o incluso de un directorio. Usa guiones o guiones bajos en su lugar. Y la tercera foto, Let's Crop. Definitivamente queremos que esta área esté en la imagen y luego guarde como globo de página principal. Tres. Está bien, ahí vamos. Ahora coloquemos los's en el sitio para que tengamos imágenes de tamaño consistente, abramos el archivo Muse y haga doble clic en la página de inicio. Después seleccionemos estas tres imágenes, pero primero hago clic hacia un lado para asegurarme de que no se seleccione nada más, luego haciendo clic en estas tres imágenes mientras mantiene pulsado shift, solo elimino o retroceso en el teclado. Ahora vamos a archivar lugar y colocar las tres imágenes, como antes, podemos volver a usar la tecla de control o comando, o, en este caso, turno, ya que están al lado del otro. O simplemente podemos hacer clic y arrastrar para seleccionar los tres click open. Y sabemos que estos son el tamaño correcto para empezar, así que no necesitamos hacer clic y arrastrar, Pero simplemente haga clic, luego usando la herramienta de selección. Alinémoslos con un espaciado consistente entre ellos y notemos. Tenemos 24 píxeles entre cada uno de estos ahora, pero no coincide con los de los bordes. Entonces lo que podríamos hacer es hacer en realidad hacer clic en uno de estos y luego aparecer fue su redimensionamiento. Tenemos el ancho y la altura donde podemos simplemente teclear. También podemos afectar el eje X e y. Ahí es en realidad donde se coloca, correcto. Entonces antes dijimos que vamos a tener 25 25 25 25 y luego cada uno iba a ser 300 porque eso es 900 entonces más 4 20 cincos es 1000 Exactamente. Entonces vamos a poner esto un 25 y entrar y luego hacer clic en este. Entonces si tenemos 25 y luego tres y eso son 3 25 entonces más otro no sean 3 50 ¿verdad? Entonces es clic redimensionar sólo eso por dos píxeles. Está un poco apagado y luego 3 50 más este de aquí van a ser 6 50 más otro 25 que B 6 75 Así que vamos a seguir adelante y asegurarnos de que damos clic en este y vamos a 6 75 Enter. Ahí vamos. Entonces si hacemos clic en este, vemos que son 25 píxeles del borde de ahí, el eje X. Hacemos clic en éste que era de 3 50 y hacemos clic en éste. Eso es 6 25 Eso es si las guías inteligentes no son automáticamente lo hacen con todo lo mismo. También podemos ir a una línea y luego distribuir uniformemente también, y lo repasaremos un poco más tarde. Pero para este, solo quiero mostrarte moviéndote manualmente. Aquellos con la opción de redimensionar aparece no solo redimensionarlo. También podemos ajustarlos. los podemos rotar también Vamos a repasar fijando más adelante en el curso a y bajo redimensionar aquí que dice, Responsable dentro de altura. Por lo que notarás si voy a previsualizar a medida que lo redimensiono. Cambia el tamaño de esas fotos, ¿verdad? Por lo que cubriremos más sobre el diseño responsive más adelante en el curso. Gracias, y ya lo veré en la siguiente lección. 16. 4.6 Agregar imágenes con bibliotecas y duplicación de CC: otra forma de agregar imágenes a un sitio web y musas para usar bibliotecas creativas en la nube. El aseado de las bibliotecas es que podemos usarlas a través de diversos programas de adobe. Podemos agregar elementos como imágenes, pinceles, pinceles, colores y mawr para luego utilizarlos a través de diversos programas. Podemos agregar una foto de photoshop y usar y musa, y podemos agregar una imagen de ilustrador y usando un Photoshopped. A menudo es más conveniente que copiar y pegar o colocar. Por ejemplo, tengo los globos de archivo, guión en capas punto PST aquí, abrir en Photoshop Goto bibliotecas de ventanas para abrir ese panel. Tengo algunos artículos aquí del proyecto, unos colores y un tema de color. Por ejemplo. Vamos a crear una biblioteca específicamente para este proyecto, Así que haz click aquí donde dice mi biblioteca y haz clic en Crear nueva biblioteca. Llamemos a esto globos y sitio web Beyond, y podemos arrastrar y soltar activos como fotos, ilustraciones, etcétera. O podemos usar botones en la parte inferior del panel de la biblioteca con la capa superior seleccionada en el panel de capas. Y si no tienes eso, solo tienes unas capas de ventana. Haga clic en el signo más en la parte inferior izquierda del panel de la biblioteca, y necesitamos desmarcar el color de primer plano porque en este ejemplo, solo queríamos agregar un gráfico. Por lo que deja gráfico comprobado y haz clic en agregar, y ahora tenemos nuestro primer ítem en la biblioteca e imagen. Repitamos eso para las otras dos capas. Seleccione la capa jpeg de nueve puntos de globo, y renombré estas capas para que coincidan con el archivo de imagen del que provienen. Vuelve a hacer clic en el signo más e indicar que estamos agregando el gráfico. Si queremos ver que esa capa se debilite, conmueva el icono I en el panel de capas de la capa por encima de ella, y vamos a añadir allí la tercera capa como gráfico también. Ahora que hemos agregado tres imágenes ráster o fotos a la biblioteca, coloquémoslas en nuestro sitio web y musa. Doble clic en la página sobre. Vamos a tener un rectángulo para esta área y ponerlo a unos 1000 píxeles de altura en 100% con Vamos a tener tres imágenes en el lado derecho aquí y un libro de texto aquí a la izquierda. Posteriormente, en este panel de bibliotecas cc, está nuestra biblioteca. Creamos globos y sitio web Beyond. Si hacemos click derecho en el PC o control click en el Mac, nos da algunas opciones, como renombrarlo , duplicarlo o eliminarlo de la biblioteca. Pero necesitamos agregarlos a este diseño, así que haga clic en lugar vinculado que convertirá a la trituradora en una vista previa de la imagen. Y para este diseño, coloquemos la imagen está alineada entre sí y en el lado derecho, no el espaciado para ser consistente y para asegurarnos de que estén alineados y ya verás necesitamos bajar esto un poco. Entonces vamos a bajar este rectángulo como tan pasado 1000 solo para que estos encajen ahí, y también necesitamos que estos tengan algún espaciado consistente. Ahí vamos, y esto es importante. Asegurémonos de que estas imágenes estén ubicadas en la capa correcta. De lo contrario, haga clic y arrástrelos a la capa de contenido principal. También agregaremos colores a nuestra biblioteca en la sección sobre color efectivo en diseño Web. Ahora, antes de pasar a la siguiente lección, otra forma de reutilizar activos como imágenes y musa es duplicarlos. Por ejemplo, podemos ir a la página principal y mantener presionado shift y hacer clic en cada una de estas imágenes aquí podemos luego ir toe edit copy, que es el control C en la PC o comando. Ve en el Mac para que el contenido esté en el portapapeles. Después podremos navegar a la página de contacto. Dibujemos dos áreas de elementos o áreas de contenido con la herramienta de rectángulo. El top es donde vamos a poner el contenido del texto más adelante con la información de contacto . Los rectángulos inferiores. ¿ Dónde pasará el ritmo de esas tres imágenes? Entonces hagamos que la parte superior sea de unos 300 píxeles de alto en 100% para el ancho y el rectángulo inferior. Tono de 330 píxeles y 100% para el ancho. Entonces vamos a ir a editar pegar y luego vamos a ajustar. This ahí dijo. Aquí hay algo de consistencia en el espaciado, y allá vamos. Podríamos ajustar eso manualmente también. Pero creo que eso se ve divertido. Y vayamos al panel de capas y asegurémonos de que estos objetos estén en el contenido primario más adelante allí. Esperemos que ya entienda las diversas formas de agregar imágenes a su sitio web, incluyendo establecer un fondo de una forma colocando archivos agregando imágenes a una biblioteca y luego agregándolas a su sitio web y duplicándolas. Ya que hemos agregado un buen número de imágenes al sitio Web hasta ahora, vamos a previsualizar y asegurarnos de que todo se vea bien. Por lo pronto, la edad del hogar se ve bien. Por el momento, la página sobre se ve bien. Observe que el color en la parte superior e inferior recorre todo el camino. Eso es lo que queremos para este proyecto, y la página de contenido se ve bien. Agregaremos hipervínculos y navegación más adelante y probaremos eso previsualizando el sitio web en un navegador Web también. Gracias, y ya lo veré en la siguiente lección. 17. 4.7 de crear y añadir imágenes PNG de transparente: En esta lección, aprenderás a crear una imagen parcialmente transparente en caso de que quisieras poner algún elemento encima de otro elemento de una página Web. Tener el fondo mostrado a través de parte de la imagen para que podamos utilizar un GIF para una imagen parcial, transparente. Pero esos sólo tienen dos o 56 colores disponibles, por lo que esos son mejores para decir GIF animado como un gráfico de cine. Es preferible algún tipo de animación a usar PNG, porque ese es otro formato de imagen que podemos usar en línea diseñando para la pantalla que no se limita a 256 colores. Así que adelante y abre photoshop y abre uno de los archivos de soporte en la carpeta de alta resolución , y simplemente vamos a crear rápidamente un PNG transparente aquí. Entonces si haces la herramienta de selección rápida, solo tienes que seleccionar eso aquí en el panel de herramientas, y tenemos el pincel aquí. Si sólo ves el signo más, presiona el bloqueo de mayúsculas para asegurarte de que sea una vista previa del pincel y presiona el soporte de la mano derecha en el teclado. O puedes ajustar el tamaño aquí arriba también. Pero sin importar, quiero un buen tamaño de pincel. En su mayor parte, queremos seleccionar este objeto aquí. De acuerdo, alguien a click y drag tiene un borde bastante definido, así que eso está bastante bien, hay muchas formas diferentes de seleccionar cosas en Photoshopped. Estoy presionando el soporte izquierdo ahí para hacerlo más pequeño, derecha, destrozarlo para hacerlo más grande. Entonces eso probablemente sea lo suficientemente bueno para este propósito de este tutorial. Voy a aguantar el PC u opción el Mac y eso va a restar. Y si queremos ser realmente quisquillosos, obtenemos zoom en el control o entramos más y menos y realmente ajustamos eso, por ejemplo, podría simplemente usar la herramienta lazo y Ault hacer clic y arrastrar opción más antigua y luego si mantienes pulsado shift, su plus, así que agréguelo para que podamos utilizar las diferentes herramientas de selección en conjunto entre sí para conseguir allí una selección realmente relevante. Está bien, así que eso es bastante bueno cuando un zoom hacia fuera y así tenemos Ah, el borde aquí en lo que haríamos en realidad va y eso un poco más. Ahí vamos. Está bien. No queremos eliminar píxeles. Queremos usar una máscara, que es edición no destructiva. Entonces qué, podemos dio En realidad podríamos presionar el control J o el comando J en el Mac. Y agregaría que en una nueva capa debilita la visibilidad ahí. Pero otra forma es simplemente agregar una máscara hacia abajo en la parte inferior del panel de capas. Suprime eso y eso agrega una máscara. Y básicamente, si pintaba en, digamos, negro, se borra. Está bien, voy a controlar o mandar a Z para deshacer eso. Si pinto de blanco, trae el contenido de la foto original que capa de nuevo. De acuerdo, pero el valor predeterminado cuando teníamos la máscara es bueno. Por lo que ahora tenemos una imagen parcialmente transparente. Si decimos esto como una clavija J, lo va a aplanar, y va a agregar un color de fondo. Entonces esto no sería parcialmente transparente Si guardamos como JPEG, no queremos decir que es la clavija J. Definitivamente queremos decir que como PNG así archivo guardar como luego cambiarlo a P y G. Y voy a guardar esto en fotos alta rez. Iba a llamarlo transparente para personal transparente preguntándome punto PNG y luego el predeterminado aquí. Esto es divertido. De acuerdo, así que ahora de vuelta, Muse, no voy a incluir esto en la página web final, pero sólo quiero mostrarte lo que puede. Dio va a ir a la página principal y si tengo un lugar de archivo y luego hay transparente y abierto y solo puedo hacer clic y soltarlo, voy a redimensionarlo para que podamos ver mejor aquí otra vez. No quiero redimensionarlo en photoshop. Vamos a hacer que sea un tamaño diferente causa la tienda de pie de página es muy eficaz en el muestreo re. Pero sólo te estoy mostrando esto como ejemplo. Entonces esto probablemente sea transparente para que podamos ver a través del fondo, ¿ verdad? Para que podamos colocarlo donde quiera. Entonces solo quería mostrarte que en caso de que tengas en tu proyecto, quieres otra vez una imagen parcialmente transparente. Simplemente enmascarar esos píxeles, guárdelo como PNG, y luego podemos colocarlo en nuestra página web 18. 5.1 armonía de colores en el diseño web: en diseño Web. Al igual que en cualquier área del diseño gráfico, color es muy importante. Podemos cambiar el color de fondo de toda la página o páginas. También podemos ajustar el color de las áreas específicas del sitio web, incluyendo el texto de navegación y otras áreas como los bordes en las fotos. Queremos que esos colores coincidan con el branding del cliente, y también queremos conseguir colores que armonicen y se vean bien entre sí. Por consistencia de diseño y branding a través de las páginas. Y para la estética, necesitamos formular un esquema de color. Existen muchos tipos de esquemas de color, pero dos formas principales de armonizar el color es crear un esquema de color complementario o un esquema color análogo. Los colores complementarios son opuestos en las ruedas de color, y los colores análogos están uno al lado del otro en las ruedas de color. Revisaremos algunas formas de idear esquemas de color, pero una forma realmente efectiva es usar el color adobe. Sólo tienes que navegar a color dot adobe dot com. Este es un esquema de color análogo, lo que significa que los colores están uno al lado del otro en la rueda de color. Aquí podemos hacer clic y arrastrar el color base aquí alrededor de la rueda de color para ajustarlo. También podemos hacer clic y arrastrar colores específicos para ajustarlo ligeramente o haciendo clic y arrastrando los niveles hacia abajo. Aquí. Podemos ajustar aquí los niveles rojo, verde y azul, así como lo oscuro y lo claro que es el color. Esta lista los niveles RGB o rojo verde azul aquí. Y este es nuestro código de color decimal Hexi arriba en la parte superior, donde dice regla de color. Cambiemos eso por complementario. Estos colores son opuestos en la rueda de color, y podemos ajustarlos también. También hay algunas otras opciones, como tonos compuestos de tríada monocromática y personalizados, que realmente podemos personalizar ahora. ¿ Y si ya tenemos un color que nos guste, y queremos basar un tema de color en él? Bueno, atrás y musa con la página maestra abierta, he seleccionado la forma superior aquí arriba. Entonces, si hacemos clic en la opción de relleno, podemos resaltar, hacer clic y arrastrar sobre esto y copiar el código y luego pegar de nuevo en color adobe para el color base . Eliminar que pegarlo y luego entrar o devolver, y esto se establece es color basado. Si haces clic Los otros que establecerán los otros es la base. Si vamos dedo del pie análogo mostrar lo que quiero decir, Si movía estos alrededor del color base se mantiene igual. Pero si establecí este es el color base y me moví. Los otros se moverán con él. Así que pegué Are Hexi código de color decimal Aquí. Ponlo de nuevo a complementario. Asegurarse de que este es conjunto del color base análogo es bastante bueno para este esquema de color. Pero usemos complementario para esto es que se ve bastante bien también. Si solo nosotros los niveles RGB, va a cambiar nuestro color base. Entonces no queremos hacer eso. Yo sólo quiero que éste sea un poco más brillante. Entonces en lugar de mover los niveles RGB, en realidad voy a volver a ajustar esto a nuestro original y luego simplemente ajustar el brillo aquí. Sólo quiero hacer esto un poco más brillante. Ahora tenemos un esquema de color que queremos tener a la página web. Podríamos copiar y pegar los códigos de color decimales Hexi de los cinco colores aquí en un documento para traerlos más de 10 programa Adobe. Podríamos tenerlos a muestras y programas muy sadiq. Pero es más fácil y más conveniente para las bibliotecas de la UCC, igual que agregamos algunos gráficos a una biblioteca antes. Nosotros también podemos agregar colores, también podemos agregar colores, así que asegúrate de que has registrado en Creative Cloud. Si no sólo apuntarme aquí ahora. Una vez que tengamos el esquema de colores, cómo nos gusta, vamos a guardar llamémoslo colores del sitio web primario y guardarlo en nuestros globos y biblioteca de sitios web Beyond. Podemos añadir etiquetas por ejemplo, azul, naranja, naranja, cielo complementario brillante y así sucesivamente. Y si publicamos este tema para explorar permite a otros diseñadores gráficos y diseñadores web encontrarlo. Haga clic. Guardar Ahora significa que podemos ir a la ventana Bibliotecas CC y verlo. Si no iniciaste sesión, asegúrate de iniciar sesión en la nube creativa que el programa APS de Adobe. También podemos buscar esquemas de color en color adobe. Da click en Explorador arriba en la parte superior, y podemos escribir palabras clave como derecha, alegre azul, naranja y así sucesivamente. Si quisiéramos agregar algunos de estos a una biblioteca, simplemente hacíamos clic, guardaríamos y luego los agregaríamos a una biblioteca. Por lo que esto hace que sea realmente conveniente y útil administrar los colores y armonizar los colores en los programas de adobe, incluido yo uso y la siguiente lección aplicará estos colores en su sitio web. 19. 5.2 Aplicar temas de color en la utilización de bibliotecas de CC: Ahora que tenemos un esquema de colores, vamos a aplicarlo a nuestra página web en Muse. Navegemos a la página principal y hacia abajo en la parte inferior. Ajustemos este color en la parte inferior con la herramienta de selección. Basta con hacer clic en el rectángulo. Después, en el panel de bibliotecas CC, haga clic en el color al que queremos cambiarlo. Es así de fácil. Creo que el color azul ligeramente más oscuro es más sutil y menos distraído que los colores naranja aquí. Y, por supuesto, cuando volvemos al modo plan, podemos ver que ahora todas las páginas reflejan este cambio. Vamos a repasar algunas otras formas de aplicar color navegue a la página de contacto. Seleccionemos aquí el rectángulo que hemos configurado sin trazo y sin Phil, una NFL que cambia el color de fondo de una sección de la página Web. Otra forma de agregar color es agregar bordes a las fotos. Navegemos a la página sobre usando la herramienta de selección. Demos click en las imágenes aquí sosteniendo turno. Si no va a seleccionar, vaya al panel de capas y simplemente apunte y haga clic en las casillas que hay junto a las imágenes, podemos cambiar el color del trazo aquí arriba, pero necesitamos cambiarlo a un color específico del tema de color. Entonces abramos el panel de bibliotecas CC con las tres fotos aún seleccionadas. Aviso. Si hago clic en uno de estos colores, es solo la configuración de relleno por defecto. Entonces vamos a la derecha. Haga clic en PC o control. Haga clic en el Mac en color de trazo establecido. Ahora hagámoslo más grande y más notable haciendo clic en el aire parecen aumentar el número. Esta es solo otra idea para agregar color a un sitio web y finalmente en la página principal. Voy a ajustar esta zona baja aquí a la naranja más brillante, ya que tendrán un texto de llamada a la acción y quiero llamar la atención hacia ella. Estaremos ajustando el color más adelante también, pero quería repasar brevemente algunas maneras en que el dedo del pie agregue el color a nuestro sitio web usando el tema de color que creamos en las bibliotecas C C. En la siguiente lección, aprendes algunas formas más de formular temas de color, y agregaremos el logotipo al sitio web mientras agregamos colores de él a nuestra biblioteca 20. 5.3 otras formas de formular temas de color para sitios web: En esta lección, aprenderás algunas formas más de agregar colores a temas de color o bibliotecas en programas de adobe. Una forma es usar colores de una foto. Ten abierta esta foto de la carpeta de Alto Riesgo en Photoshop. Si nos gusta esta foto y la estamos usando de manera prominente en la portada, por ejemplo, o es un fondo a varias páginas Web, podríamos agregar colores desde ella al diseño. Asegúrese de que el panel de herramientas esté visible. Si no tiene herramientas de ventana, entonces haga clic en la herramienta cuentagotas. Podemos hacer clic en un área de la foto, y se va a muestrear ese píxel o área de píxeles, dependiendo de nuestra configuración aquí arriba para que podamos obtener un promedio de color o simplemente un color específico en el punto en el que hacemos clic. Eso cambiará el color de primer plano en la parte inferior del pago de las herramientas al color que hacemos clic. O podemos hacer clic en el color de primer plano en el panel de herramientas y luego pasar el cursor sobre la foto para seleccionar un color. Una vez un color, queremos usar este conjunto al color de primer plano. Acabamos de hacer clic en el signo más en el panel de la biblioteca y asegurarnos de que el color de primer plano esté comprobado y haga clic. Agregar ahora Podríamos usar este color en nuestra página web y musa. O podríamos usar como color base en color adobe usando el Código Decimal Hexi, igual que lo hicimos antes. Y adobe color con el código de color de la zona superior en la página web. Podemos, por supuesto, agregar múltiples colores a partir de una foto para asegurarnos de que se vean bien juntos. Por supuesto, podríamos simplemente cambiar el color de primer plano y luego agregarlo a la biblioteca. Otra forma de armonizar el color es utilizar el panel Guía de color de Adobe Illustrator también agregará un color del logotipo de la carpeta de branding de los archivos de soporte, globos abiertos y más allá del logo dot ai, un ilustrador y luego goto window guía de color. Si aún no está abierta, recoja la herramienta de selección en el panel Herramientas y haga clic en la forma del globo. Haga clic en el color en la esquina superior del panel de guía de color para establecer el color base con el color actual que está seleccionado. A continuación, haga clic en la flecha abajo aquí a la derecha, y se enumeran un montón de diferentes temas de color que se basan en este color. Ahí hay cortesía, análoga y demás. Si hacemos otra forma, podríamos agregarle un color que coincida con este tema de color. Y por supuesto, podemos agregar estos colores a la biblioteca para nuestro proyecto. Usando el panel de la biblioteca, incluso podemos agregar otros tipos de elementos, como estilos de carácter, estilos de párrafo y pinceles, etc. Pero no necesitamos hacer eso para este proyecto. Por ahora, nos estamos centrando en y gráficos y colores. Hablando de eso, sigamos adelante y agreguemos otro gráfico a la biblioteca. Podríamos copiar y pegar o colocar a este ilustrador presentándolos. Usar Los navegadores web no muestran un out files, que es el formato de archivo predeterminado para illustrator, pero podríamos convertirlo a Raster o pixel basado aquí o en photoshop, o colocándolo en musa. Pero otra forma de hacerlo es agregarlo a la biblioteca, sobre todo un gráfico como un logotipo, que podría usarse más de una vez en un proyecto de sitio web. Seleccionemos todo esto haciendo clic y arrastrando alrededor de las formas y el texto, y luego hagamos clic y arrástrelo a la biblioteca. Se llama Artwork one. Así que vamos a hacer doble clic en él y nombrarlo logo, Entonces en Muse, vamos a navegar a la página principal y luego vamos a la derecha. Haga clic en PC o Control. Haga clic en Mac y haga clic en Colocar vinculado. Vamos a hacer clic aquí y redimensionarlo, y vamos a asegurarnos de que esté en la capa correcta. Nosotros, por supuesto, también podríamos redimensionarlo en photoshop si quisiéramos. Pero esto está bien para este ejemplo. Y vamos a previsualizar esto en un archivo de navegador. Página de vista previa en el navegador. Esta es la página principal, por supuesto, así que aquí no tenemos los otros elementos o páginas, y aún no hemos agregado la navegación tampoco notamos que el retamaño de la imagen es, pero luego también cambia de estar cerca de la borde y no tan cerca del borde. Podemos abordar eso también cuando anclamos en imágenes de posición y ajustar la capacidad de respuesta del sitio web, también. Gracias, y ya veré en la siguiente lección 21. 5.4 usando degradados y otros efectos: hasta ahora, cuando hemos agregado color, hemos añadido colores sólidos. A veces un Grady int puede verse bien, pero es uno de los efectos que también puede parecer un poco poco poco profesional. En esta lección, aprenderás a agregar y ajustar los INTs Grady y algunos otros efectos para que parezcan profesionales. Navegemos a la página de direcciones y dibujemos un rectángulo para nuestro contenido aquí para que podamos agregar un fondo Grady int para que el contenido se agregue más adelante. Y, por supuesto, queremos asegurarnos de que estamos en la capa de contenido principal. Te pondré eso 500 píxeles de alto por ahora y 100% con arriba en la parte superior donde tenemos a Phil . Demos click en la palabra Phil. Por lo que obtenemos este menú. Vamos a llamarlo Grady Int. Los ingredientes pueden parecer un poco poco poco profesionales y no tan estéticamente agradables. Puede ayudar a ajustar los dos colores que utiliza para ser colores análogos o colores que están cerca uno del otro a sólo la transparencia u opacidad. ¿ Te harías solo los números aquí y esto controla si el Grady int es horizontal o vertical, Entonces en este ejemplo, podríamos tener un amanecer o algún tipo de efecto que se parezca al cielo, y esto controla el punto focal. Si te vas a la izquierda, entonces mawr de este colores visibles y figura un camino a la derecha y más de esos colores visibles. Por lo que por defecto está en el 50%. Eso es sólo mantener fijo el tamaño que automático podríamos hacer y ajustarlo de diferentes maneras , pero eso es ir dedo del pie casi tienen el mismo efecto que el punto focal, donde se tiene más de un color en comparación con el otro color. Así lo hacen automático. No se repartan uniformemente. Vamos brevemente a repasar algunos efectos más. Navegue a la página principal y con la herramienta de selección, haga clic en una de las imágenes arriba con la parte superior. Podemos ajustar la opacidad, o qué tan opacas o no transparentes son las fotos y otros gráficos. Basta con hacer clic y arrastrar eso a un número para ajustar la capacidad. Voy a volver a ajustarlo al 100% porque no queremos que estos votantes sean parcialmente transparentes. Haga clic en los efectos justo al lado del control de opacidad. Aquí tenemos tres efectos. Sombra, bisel y resplandor. El efecto de sombra, o a veces llamado sombra de gota, puede parecer un poco poco poco profesional, si no se hace de una manera sutil. Reducir la distancia y el desenfoque puede ayudar a que sea más sutil y eficaz si queremos que una foto destaque de fondo pero no se vea poco profesional. El efecto biselado también puede parecer poco profesional, aunque hay algunos clientes donde sería relevante para su marca. Simplemente no queremos exagerar, y el resplandor es similar y luego puede parecer poco profesional pero podría ser relevante para algunas marcas. Podemos ajustar el color y convertirlo en un resplandor interior, y solo el pase A, iti y desenfoque del efecto también. Espero que hayas aprendido mucho hasta ahora sobre agregar color que se ve bien a un sitio web, y en la siguiente sección se agregará la copia o texto al sitio web. Después de eso agregará la navegación y luego le agregará cierta capacidad de respuesta. Por lo que se ve bien y es legible en varios dispositivos y de varios tamaños. Gracias, y ya veré en la siguiente lección 22. 6.1 Agregar texto a tu sitio web en Adobe Muse: ahora necesitamos agregar el texto a nuestra página web, abrir el documento de texto llamado Intro, y he incluido tanto un documento word como un archivo RTF. En caso de que algunos estudiantes no tengan acceso a una palabra, vamos a copiar la primera frase de los textos para que esté en el portapapeles en Muse. Abra la página principal y, a continuación, seleccione la herramienta de tipo. Haga clic y arrastre un cuadro de texto del área aquí y asegúrese de que esté configurado en 100% con por ahora, a pesar de que podríamos ajustarlo más adelante, dependiendo de su diseño. Ahora peguemos el texto. Podemos ajustar el tamaño del tipo hasta la parte superior, y también puedes centrarlo. Si tu ventana es un poco más grande, solo depende de lo grande que sea nuestra ventana musa. Si esas opciones no están ahí como izquierda derecha, centro justificante completo, también puedes ir a ventana y luego texto. Y aquí hay algunas opciones más, aunque lo tuviéramos maximizado a toda la pantalla. Esto tiene algunas de las mismas opciones arriba de la parte superior en el panel de control, pero algunos Maura está bien y estará formateando el texto en la siguiente lección a. Pero por ahora, vamos a centrar esto y también vamos Teoh press return o enter y teclear. Conoce más, y eso será un enlace más adelante a la página sobre. A continuación, copie todo el texto en el archivo de intro y luego agregue un cuadro de texto en la página sobre. Está bien tener espacio negativo, especialmente en los lados de los diseños, en lugar de espacio negativo atrapado. Pero bajemos un poco ese texto haciéndolo un poco más grande. Por supuesto, vamos a asegurarnos de que las fotos del rectángulo del área de contenido y el aire del cuadro de texto en la capa de contenido principal . A continuación, agreguemos un área de elementos para el contenido en la página de preguntas. Asegúrate de que vaya al 100% con necesitaremos un poco de espacio para las preguntas. Entonces vamos a arrastrar un poco esto. Por supuesto. Asegúrate de que esté en la capa de contenido principal para el cuadro de texto. Usemos la herramienta de tipo y configurarla para ir desde el centro de esta columna aquí en otra columna copiar y pegar. Las preguntas más frecuentes. Ajustemos el espacio de abajo, Muy bien, No te preocupes por el formato ya que lo haremos. A continuación será agregar estilos al texto para jerarquizar y diferenciar parte del contenido. Navegemos a la página de contacto. Copiar y pegar. El dato de contacto se formará a esto más adelante, pero por ahora, licioso asegurarse de que el texto esté ahí. Todavía tenemos que añadir en algún texto Tipo dos, como títulos o copia para la página Direcciones. Pero se ha colocado todo el texto de los archivos de apoyo. En la siguiente lección, aprenderás a dar formato al texto para una legibilidad y diseño efectivos. 23. 6.2: Formateo de texto en tu sitio web en Adobe Muse: ahora que hemos tocado parte del texto en la página web, sigamos adelante y formatearlo. Haga doble clic en la página principal para abrirlo en modo diseño, seleccione la herramienta de tipo y resalte este texto. Aquí Tenemos algunas opciones de estilo arriba en la parte superior del panel de control, como ajustar la fuente, el tamaño, el color y otras opciones, como hacer que el texto sea negrita, cursiva o subrayada ventana goto texto. Podemos dejar un centro de línea, escribir una línea o justificar texto completo. seguimiento es el espaciado horizontal entre letras y una frase de palabra o párrafo, y dejar es el espaciado vertical entre líneas de texto. El sangría de primera línea se puede ajustar aquí de nuevo sobre el panel de control. También podemos simplemente enumerar opciones en estilos de párrafo aplicados, que pasarán más adelante. Algunas opciones más en el panel apretado incluyen configurar el texto para que sea todo mayúsculas minúsculas, agregar superíndice o subscript y también agregar márgenes para espaciar a la izquierda o derecha del texto también, espaciar antes o después de párrafos en a fin de diferenciar entre los párrafos. Si no hay espaciado en el estilo, entonces hay que introducir manualmente el espacio con retornos después de cada párrafo agregado con la tecla de retorno o enter o una primera línea en den con la línea resaltada, Vamos a cambiarlo toe all caps para el texto para ser más grande. Cambiemos el tamaño a 24. Vamos a volver a subir el texto de aprender más, para que no haya una línea completa de espacio entre él y el texto encima de él. Simplemente presionamos, eliminamos o retrocedemos con el cursor ahí. Eso está un poco cerca del texto por encima, sin embargo, sin embargo, así que ajustemos el arriendo de esta línea con la línea aprender más seleccionada o el cursor parpadeando en la línea en algún lugar, vamos a aumentar la delantera de sus 20 por ciento a 180% que al poco espacio que hay sin sumar un retorno completo. Por último, ajustemos ligeramente el seguimiento en este texto. Con el Senado seleccionado, aumentemos el rastreo de 0 a 1. Entonces volvamos a cambiarlo. Yo solo quiero mostrarte lo que eso hace corazón. Vamos a cerrar esa página desde el modo diseño y hacer doble clic en la página sobre para abrirla en modo diseño. Cambiemos este texto a la talla 12 por ahora, que podamos verlo todo en pantalla. Este texto tiene espacios manuales entre los párrafos. Pero y si quisiéramos ajustar Ese espaciado tendría que entrar y ajustar manualmente el inicial o el tamaño entre los párrafos, lo cual puede ser bastante engorroso. Podemos agregar espaciado entre párrafos y luego ajustarlo más adelante fácilmente, cual es mucho más fácil y ahorra tiempo. Eliminemos manualmente estos saltos de línea para que los párrafos no tengan espacio manual entre ellos . Entonces vamos a seleccionar estos párrafos y en un espacio después de los párrafos, por lo que espacio después. Llevemos eso a 12 ahora. Si queríamos ajustar el espaciado y debilitar, simplemente seleccionarlo de nuevo y ajustarlo. Ajustemos nuevamente el dedo del tamaño 18 y aumentemos el espacio entre párrafos también. Si tenemos un cursor en el cuadro de texto, podemos presionar control a en el PC o comandar en el Mac para seleccionar todo el texto. Voy a sólo las primeras palabras 2 24 para que capten la atención. Ahora ajustemos parte del texto en las preguntas. Page sabe que las preguntas aquí no se diferencian realmente de las respuestas. Ajustemos las preguntas para que sean todas audaces, solo resalta las preguntas y luego presiona el botón en negrita. Por supuesto, también podríamos cursiva o subrayar las preguntas, pero creo que tirarlas está bien para esta página que tardó un poco de tiempo en tazón. Apenas las preguntas, en un poco realmente agregarán estilos de párrafo para que podamos asignar estilos. Dos textos diferentes en la siguiente lección estarán revisando cómo cambiar fuentes y cómo agregar bonos Web Gracias. 24. 6.3 con cambiar fuentes y añadir fuentes web: una parte del estilo izando textos es cambiar la fuente. El tipo de letra correcto puede ayudar a que un sitio web se vea más profesional y ayudar con la legibilidad en la página principal. Tengo aérea por defecto, como podemos ver en el panel de control en el panel de texto. Si hacemos clic en eso con algún texto resaltado, traerá una lista de fuentes. Observe que hay otros fondos listados al lado de estos nombres de fuentes. Estos fueron los fondos de reserva asociados a estos fondos estándar. Si un navegador no tiene aérea de lo que podría tener, Helvetica Carol es un sansei reembolso Refranes es francés para Sin los, los fondos no tienen esos adornos en los extremos llamados sirvientes. Podemos cambiar esta frase dos veces, que es una divertida Sarah. Este fondo y los fondos de reserva asociados, como Times New Roman y Georgia, son todos fondos de Sarah. Estas familias de fuentes de aire básicamente, diversas fuentes que se ven muy parecidas mientras dicen que los fondos de Sir se utilizan a menudo para patillas, títulos y áreas de texto corto. Podemos utilizar párrafos surfistas de arena y diseño Web. Pero para la página sobre, probemos la familia de fuentes serif que tiene los tiempos como la diversión predeterminada. Es seguro suponer que la mayoría de los navegadores tendrán al menos uno de estos fondos en estas familias de fuentes . Entonces es encontrar un diseño y lanzar sitios web que utilicen Ariel, por ejemplo, con fondos asociados de Fallback. Pero hay otra forma de usar fuentes en el diseño Web. Podemos agregar fuentes personalizadas a un sitio web, y Muse codificará las páginas para nosotros, que se incluya esa fuente. En esta lección se incluirán los pros y los contras de tres formas diferentes de incluir bonos húmedos específicos . Destacemos el texto en el cuadro de texto. En la página sobre, solo hago clic en el área con la herramienta de tipo y luego presiono control y el mando PCR en el Mac aviso en el panel de texto que aquí hay una opción llamada fuentes Web. Tenemos los teléfonos estándar que deben estar en los navegadores computadoras. Estas son fuentes muy comunes. Después hay fondos específicos que no son tan comunes, por lo que se exportan como imágenes de uso. Cuando exportamos el sitio web, estos fondos aéreos se centran en tu computadora que probablemente no estén en la computadora de todos, luego bonos Web aquí arriba. Si hacemos clic, agregamos bonos Web o si obtenemos un archivo agregar eliminar fuentes Web. Va al mismo menú. Existen tres tipos de fuentes Web que podemos utilizar. Amuse bonos Web alojados solo significa que podemos usar los archivos de fuentes de nuestra computadora en el diseño y añadirlos a la página web. Esto si has comprado un fondo para este uso en un sitio web de fuentes. Por ejemplo, fuentes Edge Web se pueden utilizar desde Adobe incluso sin una suscripción creativa en la nube. Pero sí necesitamos cloud creativo, al menos para esta versión de Muse y luego escriba kit. Fuentes web requiere la suscripción de creatividades Cloud Haga clic en empezar. Y si tuviéramos un archivo de fuente, podríamos subirlo aquí con una pestaña auto alojada seleccionada. Pero usemos una fuente del kit de tipo. Si nos desplazamos por aquí, enumera todas las fuentes, pero vamos a hacer clic en Filtrar pasar el cursor por encima de éstas, y debería traer consejos de herramientas. Tal muestra que estos arena de aire surfear estos aire serif losa serif script letra negra mono espaciado, que cuenta con un fijo con de personajes escritos a mano o hechos a mano así como decorativo. También delinea entre fuentes recomendadas para párrafos o encabezamientos así como algunas otras opciones aquí abajo, Así que voy a seleccionar recomendado para párrafos, arena, surf y peso regular. Algunos de estos debilitan seleccionan más de uno, y podemos volver a hacer clic en ellos para cambiarlos. Entonces podemos desplazarnos por ellos con las opciones de filtro. Queremos que la diversión coincida con el branding del cliente para que algunos de estos no tengan sentido. Seleccionemos este Latour Lotto, sea lo que sea y haga clic en Aceptar, Esto trae hacia arriba el diálogo de fuentes Web agregando. Ahora que se agrega, podemos cambiar el texto resaltado y elijamos medio. Usar familias de fuentes estándar está bien, pero usar fuentes personalizadas como las del kit de tipos es útil porque entonces incorporamos fuentes específicas al sitio web. No tenemos que convertir fuentes personalizadas a imágenes. Podemos utilizarlos como parte del texto de la página web porque la fuente forma parte de la codificación del sitio web . No obstante, con el tipo get funds, hay una consideración de vista de página en el dedo del pie. Si tu sitio web se volvió viral o recibió muchos hits, entonces eso podría llevar a más cargos en la licencia, acuerdo con este sitio web en adobe dot com, tu vista de página. Los límites en el tipo de kit variarán según el plan. Si excede las vistas de página para su nivel de plan, posible que sea responsable de los costos promedio, por lo que es importante comprobar esto antes de la publicación y la música. Entonces si tenemos cloud creativo como parte de eso, obtenemos una gran cantidad de fondos diferentes bajo tipo kit. Pero hay una página de tu límite. Entonces si tienes más de esa cantidad de uso, entonces hay posibles cargos. Fuentes web servidas por Adobe Type Kit Usage Rights Limited and Click Más información y tienes el acuerdo. Por lo que sugiero usar las fuentes predeterminadas, como el sansei aéreo, nuestra familia o las veces su familia. Y si hacemos uso de fuentes personalizadas, comprarlas por una cuota única de una página web de fuentes y en la licencia, asegúrate de que puedes usar la fuente en un sitio web, y no tiene restricción en un número de vistas de páginas Web al mes. Esto sería similar a usar una foto de stock que habíamos comprado en un sitio web que diseñamos, o podríamos usar teléfonos que no requieren una suscripción. Pero las fuentes todavía están alojadas en otro lugar. Entonces si bien creo que las fuentes Web pueden ser útiles, como en el tipo gate o edge Fondos web, su mejor práctica usar una fuente comprada o gratuita que tenga una licencia con ella que nos permita usar ese sitio web interno de fondo y en realidad es alojados en el servidor que estamos usando. Y no hay limitaciones de licencia como faras. Si obtienes un cierto número de hits realmente tienes que pagar y entonces tampoco está alojado en otro lugar en otro lugar. Y hablaremos de hospedar y tener los archivos en nuestro servidor más adelante en el curso otra vez. No tenemos que usar esto. Podemos usar los fondos estándar por defecto, ¿verdad? Por lo que podría usar sólo Ariel en esta página y en la página de preguntas, misma cosa. Ya lo tengo en Ariel y en primera plana. Esta es la familia Times y luego Ariel aquí abajo. Yo solo quería mostrarles cómo usar los fondos que el aire de adobes type kit y los fondos Edge Web , y es una opción para usar esos. Pero de nuevo, queremos revisar la licencia. Entonces si no usamos estos fondos estándar aquí mismo que la gente que navega por el sitio Web debería tener en su computadora. Tenemos que incluir ese archivo de fuente en el servidor que estamos usando si cargamos como enlace Web en lugar de tener que usar type kit. Pero eso depende realmente de ti. Gracias, y ya lo veré en la siguiente lección. 25. 6.4 usando estilos para la coherencia y la facilidad de: Hemos agregado mucho del texto en nuestra página web hasta ahora y podría parecer un poco un problema haciendo un seguimiento de todos los cambios. Necesitamos consistencia en la página web para que por ejemplo, copia corporal el texto que conforma los párrafos sea consistente en todo el sitio web. Los titulares deben ser consistentes, al igual que otros tipos de texto. La consistencia es un principio de diseño efectivo ya que se ve mejor dedo del pie tienen estilo y formato consistentes de texto en todo el sitio web. Muchos sitios web y publicaciones tienen guías de estilo que dan orientación no solo en términos de consistencia de escritura, sino consistencias de diseño y formato como el uso de una fuente y tamaño específicos para historias de manera efectiva para agregar consistencia a sitios web, es usar estilos de párrafo, navegar a la página de preguntas y musa, y esto tiene algún formato predeterminado de Ariel. Pero sigamos adelante y ajustemos esto a Helvética o podríamos probar veces tus tiempos Roman Sus tiempos , creo, creo, en realidad se pondrían en realidad sólo lo dijeron. Aéreo debe estar bien en lugar de 14. Y solo hagamos este 18 por el tamaño y dejemos el otro como predeterminado. No queremos que esto italicize audaz al menos sólo queremos que el audaz para las preguntas y la copia corporal de las respuestas sea normal. Entonces vamos a seleccionar esto. Y mientras esto se selecciona este texto aquí, haga clic en el crear un nuevo estilo a partir del botón atributos aplicados y el formato está aquí . Es un estilo de párrafo, y la fuente es Ariel, y el tamaño es 18. Ahora podemos cambiarlo, decir a 12 y luego hacer clic en él y luego lo aplica. Entonces así funciona eso. Una vez que configuramos nuestros estilos y nos debilitamos, configuramos el dedo del pie. Tener cierto formato como negrita cursiva subrayar cierto tamaño, diferentes fondos. Y luego hay consistencia. Por lo que necesitamos hacer uno para encabezados o titulares. Subheds. Posiblemente copia del cuerpo y siempre que el texto vaya a ser diferente de la predeterminada y otras variaciones como tal vez una diferente para la pregunta. Según responde ahora presidente, si no te queda aquí, si haces clic en esto, sabed que no es si pasas por ahí, la herramienta de tipo que no le queda. Lo que podríamos hacer es decírselo, Teoh, plantear en el panel de texto aquí podríamos hacer es centrarlo y luego a la izquierda. Alinearlo y lo aplica. Ahí tiene ese plus. Entonces si hago click derecho arriba y pongo estilo redefinido que lo redefina a este más nuevo. Entonces si lo selecciono y me queda una línea 18 d para párrafo y luego Ariel para el fondo, entonces si queremos que otro texto sea de la misma manera, digamos esto aquí abajo. Waas Courier Nuevo y era 12 incluso un color diferente. Ahora, si hago clic en estilo de párrafo, lo hace así así para que no tengamos que cambiar. Después de los cambios, Cambio de tamaño, Un cambio inicial de formato de cambio de color. Todo está recogido en un estilo. Vamos a hacer doble clic en él y renombrarlo copia del cuerpo. Podemos ver el formateo ahí una línea tamaño izquierda 18 estilo de párrafo en los fondos Ariel. Y lo bueno es que no tenemos que dejar ahora un cambio de línea de divertidos cambios, tamaño y cualquier otro formato en pasos separados a otros párrafos. Queremos que el dedo del pie se vea igual. Podemos simplemente seleccionar un párrafo y luego hacer clic en copia de cuerpo en el panel de estilos de párrafo. Entonces si hago clic en esto, puedo aplicarlo a todos estos. Para aplicar este estilo, seleccioné cada respuesta con la herramienta de tipo. Pero ¿y si no estuviéramos aplicando a todo el cuadro de texto? Podríamos seleccionar todo el texto con la herramienta de tipo, o podríamos seleccionar el cuadro de texto con la herramienta de selección, luego aplicar aviso de que también cambia las preguntas. Eso lo arreglaremos ahora. Resalta la primera pregunta, y luego hagámosla audaz. Bueno está cursiva. Más estilo de Ted. Esto agrega un signo más junto al estilo en el panel Estilos de párrafo, lo que indica que se realizó un cambio en el texto resaltado. Podemos hacer click derecho en el PC o Control Haga clic en el Mac. Y además de algunas otras opciones aquí podríamos dar click Redefinir estilo. Esto agregaría estos cambios que acabamos de hacer al estilo, lo que cambiaría todo el otro texto que tiene un estilo vinculado a él, que no queremos. Entonces voy a deshacer eso con editar deshacer, y solo tenemos que presionar nuevamente el botón de nuevo estilo, que creará un nuevo estilo basado en el original. Pero con los ajustes al hacer clic en la primera pregunta, el nuevo estilo se resalta en el panel de estilos de párrafo, y al hacer clic en la respuesta, el estilo original se resalta en el panel Estilos de párrafo. Vamos a renombrar este nuevo haciendo doble clic en él. Vamos a llamarlo preguntas, y podemos seleccionar las otras preguntas con la herramienta de tipo y cambiarlas a las preguntas Estilo de párrafo. Ahora, ¿y si queremos cambiar todas estas preguntas a un tamaño más grande, como 24? Bueno, podemos cambiar uno de ellos manualmente y luego hacer clic derecho en PC o Control. Haga clic en el maníaco por aquí en el estilo de Pregunta y haga clic en Estilo redefinido Aviso que cambia todas las demás preguntas también, causa que esas están todas vinculadas a las preguntas Estilo de párrafo. Además de la consistencia, aquí es realmente donde los estilos de párrafo pueden ser útiles. Podemos redefinir un estilo, y los cambios se aplicarán a través de muchos párrafos o páginas, lo que ahorraría mucho tiempo en la página principal. Podemos definir aquí este titular como un estilo llamado titular, y en lugar de un estilo de párrafo, hagámoslo un titular. Uno. Ya que es un titular, si estás familiarizado con la codificación HTML, sabrás que H uno es el texto más grande en el rango de H uno a H seis h uno siendo el titular en H dos. A través de los seis años, los bancos han tenido, siendo los seis años los más pequeños. Esto es bueno para un CEO en que estamos mostrando que estos titulares aéreos principales ideas en una página Web . Ajustemos el texto aprender más firmarlo como un estilo llamado llamada a la acción, siendo la fuente Ginebra y audaz. Vamos a redefinir ese aviso de que tenemos su línea de puntos inferior aquí recientemente sólo que es sólo el contenido que está empujando fuera de esa caja original. Voy a dar clic y arrastrar un poco eso hacia abajo, así que el cuadro de texto tiene suficiente espacio y yo también voy Teoh, dale a esto un poco más de espacio también. Basta con bajar eso un poco. Ahí vamos, más en la página sobre. Hagamos esto un poco más grande solo por consistencia. 24 punto y llamemos a este ejemplar de organismo promocional. Entonces, si tuviéramos otras páginas similares, si ampliamos este sitio web, podríamos usar un estilo consistente, buen texto grande que es muy legible. Haga clic en Aceptar y en la página de contacto, emparejemos con la copia del cuerpo promocional. Pero no queremos este espacio extra entre párrafos o retornos, ya que cada línea aquí calle como un párrafo por el retorno. Entonces, solo ajustemos eso en el panel de texto y luego lo definamos como un nuevo cuerpo promocional de estilo . Copiar espaciado cero. Y agreguemos rápidamente algunos títulos a las páginas y mantengamos la consistencia en todo el sitio web . Entonces vamos a agregar preguntas frecuentemente vestidas. Hagamos esto parado en el párrafo llamado a la acción. Balas ajustan el tamaño para ser 36 dejando a Teoh 1 20% y dejemos una línea lo. Si presionamos todo en el PC u opción en el Mac mientras hacemos clic en un botón crear un nuevo estilo, permitirá renombrarlo de inmediato. Demos un nombre a este título de página y vamos a subir un poco eso. América. Y en la página sobre, agreguemos sobre nosotros en la página de contacto que nos contactan, y realmente queremos asegurarnos de que haya todo espacio consistente en el eje X e Y Podríamos mirar o simplemente ver y asegurarnos de que esté justo en el medio. Yo quisiera mirar el espaciado vertical, pero esto se ve bien. Buen título de página. Apenas entre las páginas, quiero decir tener espaciado consistente y colocación de los títulos y en la página de direcciones. Asegúrate de que tenemos aquí un rectángulo para el área de contenido. Y vamos a añadir un cuadro de texto. Vamos a tener indicaciones y finalmente, en la página de redes sociales. Asegúrate de que haya una caja aquí para el contenido, y podemos hacerlo así. Los títulos son consistentes en todo el sitio al alinearlo con una columna o guía, y hablaremos de pintar objetos y posicionar objetos también más adelante. Pero por ahora, creo que esto se ve bien. Los estilos de párrafo realmente ayudan con la consistencia y haciendo un seguimiento del formato de diversos elementos de tipo en un sitio web. Ellos lo hacen para que podamos hacer un cambio en el estilo, y luego se refleja a través de una página o de un sitio web entero a través de múltiples páginas, y podemos hacer muchos cambios en el texto con bastante rapidez. Una vez que hayamos configurado esos estilos, Gracias y ya veremos en la siguiente lección 26. 6.5 Agregar listas y personalizar: En esta lección rápida, aprendes a agregar listas a tu sitio web. Podemos utilizar listas en portadas de sitios web para mostrar qué servicios o productos hay de un negocio. Podríamos usarlo en la página de contacto u otras páginas, pero en este proyecto, usémoslo en la Página de Redes Sociales, que es una página infantil de la página de contacto. Por lo que doble clic en él. En el plan, Moto abrió la página de redes sociales en modo diseño. Como de costumbre, agreguemos un rectángulo sin felón, sin trazo a esta zona, si acaso queremos simplemente ajustar, como el color de fondo solo a esta zona. Si no tienes ya un rectángulo ahí y con la herramienta de tipo, pinchemos y arrastremos un área por aquí. Asegúrese de que estos estén en el contenido principal más adelante. Muy bien, pinchemos aquí y tecleemos el texto. Conéctate con nosotros. Entonces tecleemos algunos sitios de redes sociales, que serían enlaces externos a las páginas o perfiles de la marca. Cualquiera que añadamos, realmente no importa es sólo un ejemplo. Seleccionemos conectarnos con nosotros y ponerlo en un estilo de párrafo de titular luego para el texto aquí, vamos a resaltarlo. Y luego arriba en el panel de control, podemos agregar una nueva lista de órdenes o ordenados Lis. Seleccionemos el que ordenó Lis para este ejemplo. Aumentemos el tamaño a 24. Está bien, podríamos agregar esto como un estilo, digamos listas. Podríamos ajustar la delantera por encima con el texto del encabezado o entre India. Elemento de la lista. Pero creo que esto se ve divertido dedo del pie. Agrega otra lista que coincida con el estilo. Podríamos repetir todo ese proceso, pero un atajo que está en muchos programas Dobie es duplicarlo. Podríamos copiarlo y pegarlo, pero mejor aún delicioso. Usa la herramienta de selección y mantén todo en el PC u opción la mackin click y drag, y puedes mantener pulsado shift si quieres mantenerlo alineado, y podemos abordar el posicionamiento que ha necesitado si presionamos shift y luego los desplazamos y los movemos alrededor . Si quisieras enviarlo, por ejemplo así sería divertido también, entonces podemos ajustar el texto en el cuadro nuevo aquí. Foto y video igual que esa zona. M e o YouTube instagram so Así es como agregamos listas en Muse y nuevamente podemos hacerlas ordenadas con números o un ordenado. Si miras por encima del lado derecho, trabaja, trabaja, dice balas, si haces clic en eso, eso saca otro panel también. Y estas son las mismas opciones aquí, un Nord y listas ordenadas que también se pueden ver en el panel de control. Pero si hago clic en esto, notarás que lo mueve sobre en diferente jerarquía, diferentes niveles s para que podamos tener múltiples capas en una lista si quisiéramos con esta sangría aquí, y también puedes solo algunas otras configuraciones . Si reduzco esto hacia abajo, se puede ver que el texto se acerca más. El punto de bala. Se puede volver a subir, y luego todo se mueve si sólo eso. Entonces si pudieras darle el default aquí seis y 28 así que si lo queremos consistente, ajusta eso. Esto sólo afecta si su alianza es o no un cambio vertical. Si presiono hacia abajo, estaban arriba, los moverá hacia arriba o hacia abajo en relación, así que mantendré eso al valor predeterminado para este ejemplo, porque debería ser una línea ahí con el texto. Gracias, y ya veré en la siguiente lección 27. 6.6 de texto en las imágenes: Si has usado en diseño o incluso algunos programas de procesamiento de textos, es posible que estés familiarizado con el ajuste de texto alrededor de las imágenes en el diseño. También hay una manera de hacerlo en el diseño Web. Hasta el momento, hemos colocado o duplicado imágenes o las hemos traído desde el panel de bibliotecas CC y colocamos junto a cuadros de texto o en sus propias áreas por debajo o por encima del texto. En esta lección, aprendes cómo agregar imágenes a un cuadro de texto y cómo envolver efectivamente texto alrededor de las imágenes en Photoshop He redimensionado a de las imágenes de globo en el globo de carpeta alta Res un globo pagano de punto j a dot jpeg en las mews archivo. Abramos la página de preguntas en modo diseño. Añadamos algo de interés visual a esta página agregándole esas dos fotos a ella. Si realmente queremos controlar dónde se encuentran en la página querría simplemente colocarlos , por ejemplo, por ejemplo, si quisiéramos que aprendieran a la parte superior e inferior de este cuadro de texto y una columna a la izquierda del cuadro de texto. Pero si queremos el texto AC de una manera más fluida en relación a las fotos para que el texto rape y fluya alrededor de las fotos podemos copiarlas y pegarlas en el cuadro de texto mismos. Una forma de hacerlo es copiarlos y pegarlos después de colocarlos. Entonces Goto file place seleccionado Globo uno abierto y solo voy a dar clic porque ya está al tamaño que queríamos estar, que es de 400 píxeles de ancho. Observe que flota aquí, aunque podemos poner fotos en los ataques superiores y texto encima de las fotos o al lado. Pero para añadirlo a un cuadro de texto para que fluya alrededor de la foto, copiémosla y peguémosla en el cuadro de texto. Por lo que Goto editar y copiar. Entonces podemos eliminarlo con las herramientas de selección aún seleccionadas. Debilita el doble clic en el cuadro de texto aquí, o simplemente usa la herramienta de tipo. Cambiará al Tipo 12 3 Doble clic con la herramienta de selección. Hagamos click para colocar el cursor justo aquí, donde queremos que esta imagen esté en relación al texto. Entonces digamos que el inicio de esta línea ir a editar pegar podemos eliminar y por defecto el texto comienza en la línea base de esta imagen. Podemos conseguir que la textura envuelva mejor, sin embargo, sin embargo, así que haz clic en el panel de rap por aquí a la derecha o simplemente ve a la ventana y luego envuelve. Si seleccionamos con la herramienta de selección esta imagen aquí, notaste que hay tres opciones. Este 1er 1 es la posición predeterminada Objeto en línea con el texto. Entonces esto es actuar como un personaje, como una letra o un número, por ejemplo, sólo en línea en el texto. Si hacemos clic en esta siguiente posición, objetamos a los ataques de izquierda, entonces la envuelve alrededor de ella. Si hacemos clic en el 3er 1 entonces se envuelve alrededor de él. Pero es una línea a la derecha. En las imágenes se notan que no hay espaciado entre el texto y la imagen. Necesitamos una mejor proximidad o espaciado, que es un principio de diseño que tengan en cuenta. Entonces agreguemos un poco de espaciado aquí. Podemos aumentar esto a 10. Para este ejemplo, sin embargo, todos están encerrados juntos. Por lo que el espacio de anuncios en el lado derecho, el lado izquierdo, la parte superior de la parte inferior. Si queremos solo espacio en un lado de la misma, necesitamos desenredar esta cadena aquí y luego traerlos de vuelta al cero predeterminado y mantener ahí el lado derecho a las 10. Ahora bien, si esto hubiera terminado a la derecha y ser lo contrario, podríamos agregar espacio en el lado izquierdo en su lugar. Si eso fue un problema con el espaciado, Ahí vamos. Repitamos rápidamente ese proceso para insertar globo para esquivar una clavija. Si ya estaba en el portapapeles de otro programa, podríamos simplemente pegarlo en. Pero esta es una forma de hacerlo. Podemos simplemente colocarlo en y luego editar copia. Eso es decir que teníamos a nuestro cristiano justo aquí. Entonces cuando se ponga bien en ello, alinemos esto a la derecha y luego agreguemos algo de espaciado en el lado izquierdo. Está bien, ahí vamos. Vamos a previsualizar. Esto se ve bastante bien hasta ahora. Entonces así es como envolvemos texto alrededor de imágenes y musa. Cuando las imágenes están dentro de un cuadro de texto, a menudo colocamos las imágenes en su propio marco de imagen y no como parte de un cuadro de texto. Pero es bueno saber cómo hacer eso, si acaso queríamos tener unas cuantas imágenes dentro del área de copia de alguien. Tad. Algún atractivo visual a un layout que veré en la siguiente lección 28. 6.7 con la chequeo de colores con eficacia: En esta lección rápida, ahora aprenderás sobre la revisión ortográfica en Adobe Muse. Esperemos la copia que tu cliente te envía para ser el texto para los diversos sitios web ya haya sido copiada. No obstante, si estás escribiendo la copia para tu propio sitio web o si quieres ayudar a asegurarte de que no haya errores ortográficos en el sitio web de tu cliente, puede ayudar tener activada la revisión ortográfica. En Muse, similar a algunos programas de procesamiento de textos, Muse agrega una línea roja curvada debajo de cualquier palabra que piense que están mal escritas. Por supuesto, muchas palabras son nombres propios o no están mal escritas. Entonces en esos casos podemos agregarlos al diccionario para que no tengamos ese aire. Observe algunos estos tienen la línea debajo de ellos. Acceda a editar la ortografía y asegúrese de que la ortografía dinámica esté activada para activar esta característica. Si navegamos al diccionario del usuario, entonces podemos agregar palabras aquí, otras formas de hacer clic derecho en PC o control. Haga clic en el médico del texto con la herramienta de tipo, y muestra lo que Muse piensa que debe ser esta palabra. También podemos agregar al diccionario ahí para que la línea no indique mal ortografía estas líneas rojas no se mostrarán en la página web. , sin formas, sinembargo, cuando lo exportamos y subamos y no se mostrarán aun cuando lo estemos previsualizando y musa o en un navegador Web, es solo para indicarnos que Muse piensa que las palabras están mal escritas. Si no queremos esas líneas rojas ahí y sabemos que todas las palabras están escritas correctamente, o si tenemos un editor de copias revisando el texto o comprobamos manualmente la exactitud del texto, podemos desmarcar la ortografía dinámica y eso eliminará las líneas rojas. Yo sí sugiero revisar la copia para la exactitud ortográfica, ya que las palabras mal escritas o gramática o puntuación incorrectas también pueden hacer que un sitio web se vea un poco poco poco profesional. Gracias, y he visto la siguiente lección. 29. 7.1 Agregar hiperenlaces a páginas internas, sitios o páginas externos y Anchors y Anchors: Ahora que tenemos la mayor parte del contenido en las páginas Web, necesitamos agregarles alguna interactividad. Tengamos algunos enlaces a páginas internas y páginas externas o sitios web para que la gente pueda navegar por los sitios web y unas páginas específicas en la página de inicio. Usemos la herramienta de tipo y resaltemos las palabras. Conoce más. Podemos añadir un enlace a una página fácilmente. Simplemente haga clic arriba arriba al lado de hipervínculos el aire abajo allí. Vamos a seleccionar sobre la página sobre. También podríamos enlazar a un archivo, por ejemplo, si queremos enlazar a un archivo PDF para descargar, en cuyo caso pincharíamos aquí. Es las mejores prácticas tener ese PDF y otras finales en una carpeta local ya para mantenerlo organizado y para asegurarnos de que esté incluido cuando subamos el sitio web más sobre eso más adelante cuando hablamos de organización y exportación de nuestro sitio web. Pero para este ejemplo, sólo estamos vinculando a una página Web interna que forma parte de este sitio web. Cuando la gente haga clic en Learn MAWR, navegarán a la página sobre en la página sobre. Qué hay en un enlace de texto en la parte inferior aquí. Tipo en tener cualquier duda. Lo dejo con la herramienta de texto. Y entonces hagamos de eso un enlace a preguntas. Añadamos también un enlace a la página de direcciones dentro del párrafo en la página de preguntas. Añadamos algún texto en la parte inferior que apuntará a la página de contacto. Necesidad de mover esto. ¿ Ves esto? Ah, marco de texto aquí. Definitivamente necesitamos bajar eso. ¿ Ese texto lo repasa? OK, ahí vamos. Si traemos eso aquí un poco y este rectángulo, voy a llevar eso debajo del marco de texto. Ahí vamos. Asegúrese de que esto es que 100% con texto empujó el marco de texto hacia abajo. Por lo que sólo queremos organizar eso correctamente. Entonces tenemos la forma del rectángulo y luego tenemos el marco de texto el cuadro de texto. Ahí hay así que agreguemos algún texto en la parte inferior que apuntará a la página de contacto. Por último, en la página de contacto, agreguemos enlaces a la Página de Redes Sociales así como a la página de direcciones y hagamos de este un enlace de correo electrónico en el que se puede hacer clic. Simplemente resalta la dirección de correo electrónico y escribe masculino a una palabra colon y luego la dirección de correo electrónico . Ahora que tenemos algunos enlaces internos. Hagamos que algunos enlaces externos naveguen a la página de redes sociales. Los enlaces externos son enlaces a páginas Web o sitios web que no forman parte de este sitio web que estamos diseñando. Teníamos estos enlaces más o menos de la misma manera. Excepto que escribimos la URL aquí arriba en http colon slash, slash y luego la dirección. Para este ejemplo, es facebook dot com para slash y sería el Ural de esta página de marcas entonces golpearía enter entonces si tuviéramos un euro específico para esto. Para que una imagen escanee siendo esto es sólo sin examinar todo lo mismo aquí. Yo, uh, este sería el perfil de los medios de la vena. Entonces lo que sea que seas todo sería de Amal recogido este macho bajo, Contáctanos si hago vista previa y click Así fue todo abrir un email cuando estoy escribiendo esto . Yo no puse correo también, ya sabes, y luego inferir que esa es la forma de recubrirlo normalmente. Ahora bien, si me quito eso y solo presiono enter, lo hace por mí. Está bien, Así que agrega ese molino también. Una forma de asegurarse de que el enlace sea preciso es simplemente copiarlo y pegarlo desde la barra de direcciones del navegador Web. Y luego cuando lo estés insertando aquí arriba, solo puedes pegarlo. Y en lugar de escribir de nuevo en, eso es si fuera la página real de la marca, por supuesto, y es un tiempo más largo su URL debilita. Basta con pasar el ritmo y luego eso. Asegúrese de que sea preciso. Hay otro tipo de enlace que podemos agregar a las páginas Web. Podemos agregar enlaces a partes específicas de una página y no sólo a la página en sí. Por ejemplo, podríamos tener todas estas preguntas arriba en la parte superior, y luego si hacemos clic en ellas, nos llevaría a esa pregunta específica. Contestar en la página. No necesitamos añadir anclajes a este sitio web, ya que las páginas se airen no demasiado, pero es importante saber cómo hacerlo. Y lo que hacemos es hacer clic en este enlace de anclaje en el panel de herramientas. Por lo que haces clic en él y luego navegaríamos. Entonces di: ¿Necesitas licencia de piloto? Rubia cazadora de moscas. Entonces estas son todas las preguntas. Si lo tuviéramos ahí arriba hipotéticamente y luego simplemente le pinchamos justo aquí, lo llamaríamos necesidad pregunta licencia piloto. Entonces haga clic en Aceptar. Y ahora si resalto esto para convertirlo en un hipervínculo en lugar de vincularse a una página interna del sitio web o a una página o página externa, realidad podemos enlazar a Teoh. Está justo aquí en otras preguntas. Este ancla y lo que hace falta es que en realidad se puede vincular a un ancla en una página Web desde otra página Web para que podamos estar en, digamos, casa. Y, ya sabes, si tienen una pregunta específica, podrían hacer clic en eso y cargaría esta página hacia arriba y se desplazaría hasta esa pregunta. Entonces te mostraré lo que quiero decir. Simplemente haré vista previa. No, mi click Esto navega hacia abajo a esa zona que iría más abajo, pero no tenemos ningún contenido. Aquí s así que esto sería amable en la parte superior de la página aquí normalmente, acuerdo, así que eso es agregar anclajes y recubrirlos con sólo insertar sus enlaces regulares. Pero en lugar de a una página o a un sitio web, es a un punto de anclaje. Por lo que es solo ancla nuestros puntos en una página ubicaciones en una página que podemos navegar Teoh. Entonces no voy a guardar eso en esta página Web. Yo sólo quería mostrar cómo hacer eso. Niños que tenían un documento muy largo aquí y queremos Teoh muestran cómo Teoh consigue eso. Entonces, ¿cómo eliminamos eso? Ya sabes, solo tienes que darle click ahí, ¿ Ves? Ahora lo tengo. Podemos moverlo también. Ese es el ancla en la siguiente lección agregará un botón rollover o dedo del pie del botón de estado. Agrega un efecto interesante a un enlace. Gracias. 30. 7.2 Cómo seleccionar contenido con eficacia de efecto, añadir botones y alineación de objetos y de objetos: cuando tomas el control de la consideración al intentar seleccionar objetos y musa y usemos el botón de estado como ejemplo. ¿ Qué es eso? Un botón aquí en la parte inferior de la página principal que enlazará a la página de contacto. Podríamos poner botones o texto, para eso en la parte superior de las imágenes. Pero mantengamos esta página tal como está, pero con un botón en la parte inferior de lo que llamamos el llamado Área de Acción. Al tener este botón, así como una barra de navegación en la parte superior y algunos enlaces de la parte inferior, encontraremos que a veces tenemos que hacer clic más de una vez para seleccionar un objeto que forma parte de un widget. Por ejemplo, te mostraré a lo que me refiero. Haga clic en la biblioteca de widgets o vaya a una ventana y luego widgets. Los widgets de biblioteca son elementos pre hechos útiles que podemos agregar a las páginas Web. Abre la carpeta Botones haciendo clic en ella. A continuación, haga clic y arrastre el botón de estado a esta área, y vamos a asegurarnos de que estamos en la capa de contenido principal. Bien. Si hago clic en el botón de estado, puedo ajustar el color de relleno y otros ajustes de la forma. Si vuelvo a hacer clic, puedo ajustar el texto, como el color de relleno y así sucesivamente. Si hago doble clic en él, puedo ajustar la fuente en otros ajustes. Entonces si encuentras que quieres ajustar esta fuente y haces clic y no está funcionando, solo tienes que volver a hacer clic. Haga clic de nuevo y luego doble clic para ello A veces hay que dar clic más de una vez cuando se trata de un elemento como un botón. Usaremos esta técnica al ajustar la barra de navegación y también la siguiente lección. Personalicemos este botón para convertirlo en un enlace. Después de peinarlo, eliminemos el ícono aquí. Basta con hacer clic con la herramienta de selección. Impresionó a un líder backspace. Vamos a sumar y abordar esta tecnología. Entonces vamos a cambiar el tamaño de este botón para que esté centrado en la página y la línea a estas columnas. Ahí, ajusta el texto a leer. Contáctanos para reservar un paseo aquí, asegúrate de que el texto esté en una línea y centrado. Las guías inteligentes pueden ayudarnos con eso y cambiar el texto a título de página. Sí, creo que ese es un fondo prominente y relevante y tamaño para eso. Trae esto para que tome un poco más. Aún centrado, sin embargo. Por último, cambiemos el relleno de la forma. Podemos aplicar un color pinchando aquí arriba, pero vamos a seleccionar un color de las bibliotecas CC de nuestro tema de color que tenemos. Y lo cambiaré a esta naranja aquí por lo que destaca igual que la zona que lo rodea. O podríamos usar este otro, que todo el mundo luce mejor. Puede coincidir con este tema o algo ligeramente diferente en un centro verticalmente que 27 píxeles arriba y abajo. Para este ejemplo, cuando hago clic en esta nota que dice Normal aquí arriba, eso significa que este color se aplica cuando no se está haciendo clic en el botón y cuando el ratón no se está colocando sobre él, es el color predeterminado Click dar la vuelta, y podemos cambiar el relleno a este azul. Ahí es cuando las masas se cierren sobre el botón. Entonces ajustemos la masa al mismo color azul. Ahí es cuando el usuario hace clic en el carnero. Por último, cambiemos activo al color naranja. Pero para este ejemplo, eso no aparecerá porque este botón no está en la misma página a la que está enlazando. Serán relevantes cuando agreguemos una barra de navegación. También asegurémonos de que el Texas ponga dedo del pie blanco para todos los estados debe seleccionarlo y seleccionar blanco y veamos Active Normal Ahora que cambió el estilo de párrafo , por supuesto, y tendremos una ciencia más. Si conseguimos una ventana y luego estilos de párrafo, está aquí arriba. No queremos cambiar todas las demás instancias del estilo de párrafo del título de la página por lo que no queremos hacer click derecho y redefinir estilo. Lo que queremos hacer es nuevo estilo de párrafo. Muy bien, entonces cambiemos el nombre de esa llamada a Action Link bien, arriba en la parte superior. Cuando tengo este aviso seleccionado, tenemos algunos llamados transición aquí. Si agregamos un desvanecido de transición, podemos ajustar la animación básicamente para el rollover. Entonces, por ejemplo, cuando agregamos un 0.2 2do retraso y luego decimos duración de punto para, y luego podemos facilitar dentro y relajarnos para que simplemente lo ajuste ligeramente. Entonces es más un efecto sutil. Si has diseñado sitio web antes y un programa de software tenía referencias para voltear imágenes , esta es la misma idea, pero se llama estados como en estado de rollover, estado normal y así sucesivamente. Por último, hagamos de esto un enlace a la página de contacto. Entonces si hago click fuera aquí a un lado y hago click en contra, estoy atascado en todo pero ahí dentro y luego arriba en la parte superior aquí, ve al contacto. Centramos manualmente esto en la página usando columnas y guías inteligentes, pero hay otra forma de delinear objetos. Si esto no estaba centrado en la página así contigo, ve a una línea en el panel de control o consigue una ventana una línea. Veamos la línea al área de contenido y luego haga clic en el alinear objetos al centro horizontal. Y ahí vamos las líneas del dedo para nosotros. Además de alinear imágenes a la izquierda, derecha o centro de una selección de área de contenido o de un objeto clave, que indicaríamos pulsando, también podemos distribuir objetos. Mueve un poco las tres imágenes aquí con la herramienta de selección, y luego podemos alinearlas para que tengan el mismo tamaño. Entonces voy a seleccionar un centro comercial sosteniendo turno y dando click sobre ellos todos con la herramienta de selección Y si vamos a una línea y también hay distribuir. Entonces si forramos las rodillas de esta manera a lo largo de la parte superior a lo largo de la parte inferior o la mitad de esta área de contenido , se van a alinear unos con otros, y son del mismo ancho y altura. Entonces si los alineamos en la parte superior media inferior, van a estar alineados en la parte superior e inferior de las imágenes también. Entonces si alineamos a la izquierda, todos van a ir a la izquierda. Entonces no vamos a querer hacer eso ni el medio por el derecho porque todos están en la misma zona. Entonces si muevo a los alrededor así, ya sabes, nuevo selecto un centro comercial y luego conseguir una línea a la izquierda, entonces todos se movieron a la izquierda de su flush o su centrado o derecho dice. Y puedo ajustarlos moviéndolos arriba y abajo como lo harían estos. También podría distribuir los objetos de manera uniforme. Entonces si muevo estos alrededor así y no hay, no están distribuidos del todo uniformemente, puedes seleccionarlos todos shift click así y luego una línea, y luego tenemos distribuir desde el borde izquierdo o el medio de la derecha. Va a ser lo mismo para esta causa son iguales con, o también distribuyen por los bordes superiores, centros verticales, bordes inferiores, y luego también se puede agregar espaciado específico. Entonces si hacemos espacio horizontal y luego alineamos Teoh, si hiciste objeto clave, podrías seleccionar cuál quieres establecer como los objetos clave del resto se alinearán con él. Pero para esta área de alfabetización a contenido, distribuir por el centro horizontal. También queremos dedo del pie, alinearlos por el medio, distribuirlos uniformemente, y están a ras de la derecha en el borde. Eso es correcto porque es por el área de contenido. Entonces, ¿por qué los distribuiría por esta selección? Bueno, si los movemos un poco adentro y me siguen gustando y luego una línea una línea para ti alineó una selección, estos serán los bordes. Básicamente, no será no va a ir al borde de la página. Entonces ahora si lo distribuyo y luego también una línea, um, verticalmente. Y luego ahí vamos. Por lo que es un poco diferente a alinear a ti el área Contin en contraposición a un forro a la selección. Y así lo he seleccionado más y lo voy a centrar visualmente aquí mismo. Ahí vamos. Pasaremos por encima de la colocación de imágenes también. Posteriormente. Solo quería mostrar cómo alinear rápidamente y también distribuir imágenes si necesitábamos hacer eso. Otra forma de hacerlo, además de usar guías y columnas y guías inteligentes, y la siguiente lección agregará navegación consistente por la parte superior y agregará algunos enlaces a lo largo la parte inferior también. 31. 7.3 Agregar navegación de la barra y la navegación manual: Miss Listen agregará nuestra barra de navegación a la página web. Ahora. Llevo codificando y diseñando sitios web desde la década de los noventa, cuando estaba en la preparatoria y en la universidad y desde una de las barras de navegación de imagen de crédito. Tuvimos que crear imágenes fuera de las áreas diciendo photoshop o algún tipo de programa similar y luego insertarlas manualmente y agregar un hiper que conduce a cada uno de los botones de imagen. Y a menos que estemos usando más adelante en un PHP en conjunto con HTML y CSS o de alguna manera agregando en navegación común, como con marcos atrás en el día, tendríamos que cambiar manualmente la navegación en cada página si hiciéramos un cambio en ella en una página. En otras palabras, si eliminé un enlace o ajusté un enlace en una página de un enlace de imagen y la página, ya sabes, es una de, digamos, 40 páginas en un sitio web, bueno, eso no cambia en todas las demás. Entonces tendríamos que pasar manualmente y cambiarlos todos ahora con PHP y C s dice. Eso está fuera del contexto de este curso, realmente, Pero puedes cambiarlo con algunas de esas tecnologías. Algunos de esos lenguajes de codificación a través del tablero utilizando diferentes métodos. Pero solía tener que pasar y principalmente cambiar cada uno antes de que eso llegara. Ahora no necesitamos saber codificación como CSS y PHP Teoh una sola barra de navegación a través del tablero, través de todas las páginas en Muse. Muse hace que sea mucho más fácil crear una barra de navegación, y si le hacemos un cambio en la página principal, se refleja en todo el sitio, por lo que no tenemos que volver atrás y hacer el cambio en cada una de las páginas. Por separado, podemos. Adam creó manualmente la navegación de imágenes en la parte superior de la página principal. Pero Muse también tiene lo que se llaman widgets, incluyendo un widget de menú, que podría ser realmente útil. Abre la Biblioteca de Widgets. Se puede conseguir una ventana que la biblioteca de brujas y vamos a navegar a la carpeta Menús, y tenemos horizontal y vertical. Haga clic y arrastre el caballo en un menú hasta la página principal. Asegúrese de que esto esté en la capa de encabezado. A ver cómo no lo podemos ver. Eso se debe a que tenemos que ir a tu panel de capas, y está en el contenido primario. Entonces, solo pinchemos y arrastremos la caja ahí, hasta cabecera, y ahora puedo verlo bien, y podemos cerrar la biblioteca de brujas. Por ahora. Tenemos algunas opciones para el menú. Podemos moverlo, y también podemos hacer click en ese círculo azul haciendo click off aquí. Basta con dar click en él. Por lo que toda la cosa seleccionó y luego haga clic en este círculo azul con la flecha blanca dentro de ella . Trae las opciones, e incluso después de que hayamos movido el menú Irán, podemos seguir personalizándolo presionando eso. Vamos a cambiar el tamaño del menú aquí un poco y luego ajustar las opciones. Voy a ponerlo bien, ras del fondo de la cabeza o allá y hacer que destellos de una de las columnas, y voy a sacar un poco así. Pero vamos a sugerir que la configuración un poco más en realidad movería el servidor. Ella lo puede ver. Las opciones aquí CEO dice páginas de nivel superior. Si haces clic en eso y haces todas las páginas, incluirá páginas secundarias como parte de esos menús desplegables. Te mostraré lo que quiero decir, Así que si hago clic y arrastro esto hasta aquí estaba haciendo algo así y me dieron una vista previa, está bien. Y ahora, si hago clic en quién está la página principal haciendo clic sobre, se va sobre preguntas, va a preguntas en contacto. Tiene contacto. Ahora ve los menús desplegables de para estas páginas infantiles. Entonces si voy a direcciones, irá a la página de direcciones y luego a las redes sociales. Por lo que realmente depende de ti si quieres incluir los sub menús ahí. Si haces clic en las opciones ahí que se controla justo ahí estaban, dice todas las páginas. Entonces solo queremos páginas de nivel superior y luego que podamos ir a las páginas infantiles dentro de la navegación ya sabes, en el texto, ir en dos direcciones porque se vincula en algunas de las páginas. De cualquier manera funciona. Entonces volvamos a hacer clic en esto y vamos a las opciones y volverás a ver horizontal que vertical . Queremos horizontal, para este ejemplo. Editar juntos solo significa que si editamos una cosa configuración, digamos, color de relleno para un estado de lo que va a afectar a todos juntos. Entonces si no quieres que no lo revisemos. Voy a mantener ese cheque para este ejemplo y luego talla uniforme. Básicamente, si tienes ah, espaciado o tamaño, ¿cuál es la diferencia? Bueno, si me muevo esto aquí, va a mostrar la diferencia. Haga clic en este espaciado uniforme. Va a tener el mismo espaciado entre las palabras. Por lo que las preguntas en realidad serán más grandes en cuanto al botón general, luego sobre porque tiene más letras, yo diría tamaños uniformes mejor causa entonces hay tamaño consistente de los botones ahí. No queremos mostrar left Icon para este ejemplo alguien desmarca que sí queremos mostrar etiqueta causa de lo contrario con el texto en su automáticamente. Y entonces estamos dice Mostrar icono derecho. Eso si tienes un sub menú. Estamos incluyendo todas las páginas así. Y luego tendremos ese pequeño ícono de la derecha para indicar que hay más en ese área de menú , y luego esto solo afecta a la línea. Si lo alinas en la parte superior, aliate en la parte superior del botón y así sucesivamente. Entonces para esto, debo decir horizontalmente y luego alineado centralmente. Vamos a personalizar y darle estilo a esto en un rato. Pero primero, vamos a agregar otro menú, y este será un menú realmente personalizado que no use páginas de nivel superior por defecto por ejemplo , Así que vamos a volver a la biblioteca de Widgets y vamos a hacer clic horizontal y arrástrelo aquí fuera. Y luego por las opciones. Simplemente vamos a ir al manual en lugar de páginas de nivel superior o a todas las páginas. Y si hacemos click en él con la herramienta de selección y luego volvemos a hacer clic en él, obtenemos estos signos plus casi como si estuviéramos en el modo plan y estas páginas web de aire para que podamos agregar otro botón ahí mismo haciendo clic en ese plus son. Esto es sólo para agregar elementos de menú. Para este ejemplo, podríamos agregar enlaces externos, como enlaces a perfiles de redes sociales para el cliente o a sitios web sociales, o para información de contacto. Pero hagamos estos enlaces a páginas internas que no están incluidas arriba. Vamos a ese botón de menú único haciendo clic en el signo más. Qué es ajustar el tamaño Simplemente arrastrando un poco así. Asegurémonos de que esto esté en la capa de pie de página Civic. Tendrá capa y es ese menú ahí. Entonces vamos a conducir a más de dos pie de página. Está bien, se puede ver el verde alrededor. Indica que estamos en el pie de página, solo los guías ahí. Añadamos títulos para estos enlaces. Voy a hacer clic en él y doble clic, doble clic otra vez, y voy a escribir en direcciones. Y para este tipo en redes sociales. Entonces, ¿qué, esta seleccionada? Haga clic en él y luego haga clic en él en contra. Tenemos indicaciones aquí recién seleccionadas, y vamos a agregar que es un hipervínculo a las direcciones y luego hacer clic en esta y luego volver a hacer clic en ella . Tan solo para que este botón esté seleccionado y vamos a añadir un enlace a las redes sociales. Ahora haga clic en la palabra hipervínculos aquí arriba y podríamos agregarla para que se abra en una nueva ventana o pestaña. Eso suele ser si estamos vinculando a algo que está fuera de nuestro sitio, y queremos que esté en una nueva pestaña. Pero para éste, es un eslabón interno. Muchas veces no queremos tenerlo abierto una nueva pestaña o ventana de todos modos, porque el navegador podría bloquearlo o a la gente simplemente no le gusta eso. Quieren poder hacer click y permanecer en la misma ventana. Pero sin importar, tenemos esa opción algunos de click off ahí y solo hazlo para que solo se quede en la misma ventana en la siguiente lección personalizará y estilizará aún más esta navegación, y realmente vamos a clientes los colores, el vuelco y redimensionarlo un poco así que realmente estilo. Se hace coincidir con este branding en este cliente y se ve estéticamente agradable. 32. 7.4 de Estilizar y personalizar la navegación: en esta lección personalizará y estilizará aún más nuestra navegación. En lugar de tener aquí la altura predeterminada, voy a dar clic y arrastrar la parte superior e inferior para que lo tengamos al ras aquí con los bordes. Algunos primero lo van en línea a esa columna y luego lo arrastran hacia arriba como así la parte superior de la cabeza o allá, justo a lo largo de esa guía. Ahora podríamos poner el relleno en ninguno. Entonces si hacía clic, uno de estos se fue a llenar ninguno ahí mismo, sería transparente, por lo que el botón completo seguiría siendo clicable. Pero en realidad queremos color aquí para que destaque. Para que sea obvio eso es un botón. Pero sólo para demostrar que eso es posible, que si solo quisiéramos texto ahí que sea clicable en un estilo de botón, podríamos hacerlo. Yo quiero hacerlo. Obviamente, estas áreas que pueden hacer clic en el aire no solo tienen el texto ahí, así que vamos a tener un color al Phil. No podíamos hacer clic aquí ni ajustar los niveles aquí dentro, pero usemos el color de su tema de color. Abre el panel de bibliotecas CC, y lo voy a ajustar para que sea un poco diferente azul en el fondo Este límite azul más claro. Por lo que la navegación luce bien, ya que sus colores aire ligeramente diferentes en el fondo destaca. Pero no es distraer. Vamos a previsualizarlo hasta ahora, bien, así que vamos a añadir algunos estados a esto para que realmente podamos personalizar los efectos ahí. Entonces si hacemos clic fuera aquí y hay Click This de nuevo para que estén todos seleccionados y luego vuelva a hacer clic . Entonces estamos en este botón de inicio aquí o dice Normal. Vamos a dar la vuelta y volvamos a nuestras bibliotecas C C y para dar vuelta. Si solo somos uno de estos, yo solo los voy a todos ya que comprobamos eso antes. Entonces de nuevo, normal es justo cuando se exhibe ahí. No estamos rondando sobre él con el cursor ni dando click sobre él. Podemos ajustar los textos con estos cambios, pero cambiemos eso más adelante. Para un análisis enfocado al cambio en el color select roll over, y podríamos ajustar esto para complementar o color. Pero si eso destaca demasiado, podemos ajustar tan otro tipo de azul. En este ejemplo, éste también coincide con el pie de página. Todo es seleccionar esa, y si seleccionamos el ratón hacia abajo, Vamos a ponerlo en el mismo color. Ahí es cuando estamos pinchando sobre él. Y por último, abordemos el estado activo a ese mismo color. estado activo de nuevo es justo cuando estamos en la misma página a la que se vincula. Si lo hacemos establecido en un color diferente al estado normal, entonces esto indicará en qué página estamos. Y si hacemos clic en los otros, eso indica que también los hemos cambiado. Pero volvamos a previsualizar. Te mostraré lo que quiero decir sobre quién preguntas contacto. Doy click en casa y ahora se destaca el hogar. Haga clic en contacto y ahora entra en contacto con alta iluminación. Está bien. Ahora ajustemos la navegación inferior, que apunta a las páginas hijo thes aire enlazado desde otros lugares del sitio Web también. Pero ayuda tener otra forma de que las personas se conecten con la empresa, facilitando a los usuarios encontrar direcciones y los enlaces de redes sociales. En este ejemplo, ¿cuál es la dirección? El tamaño de éste también. Dentro del pie de página y debilitar establecer los cuatro estados a los mismos colores que arriba. ¿ Cuál es el tamaño de justicia de éste también, y una línea ahí mismo por ahora. Y si hago clic en uno de estos y luego vuelvo a hacer clic en él, cambiemos a alguien del estado que votó normal. Consiguió bibliotecas RCC. Trae eso aquí y para la vuelta para este. Para lo normal para este, coincidirá con la parte superior de ahí y luego se volteará en lugar de ser ese azul oscuro causa entonces eso en realidad coincidirá con el que está detrás. Voy a cambiarme a éste, así que es un poco diferente, y podemos añadir una transición. desvanecen ante esto. Entonces vamos a establecer el retraso 2.2 y la duración del punto para que pudiéramos experimentar. Ve cuál funciona mejor, pero entiendo esos ajustes para éste. Eso también son solo los de aquí arriba, también, en un desvanecido y, um, sí apuntan a 0.4. Está y está fuera. Y así vamos a previsualizar que sólo para mostrarte cómo se ve esto hasta ahora casa Nestle Animation donde apenas cambia ligeramente y luego lo mismo en la parte inferior. Entonces si hago click en este pozo indiquen ahora estamos en la página principal ahora. Una nota rápida sobre la edición del texto Si hago clic y luego hago clic y luego doble clic. Yo puedo, por supuesto, cambiar el fondo así. Pero también puedes simplemente hacer clic en todo el cuadro así, y aún no estamos al nivel de seleccionar el texto. Pero podemos hacer clic en texto aquí arriba en el panel de control o ir a la ventana y luego en texto, y si simplemente nos sentamos aquí, ya lo ajustará sin que te pasemos. Haga clic y luego haga doble clic para bajar a ese menú. Por lo que estos eran manuales aquí abajo. Si queremos ajustarlos y hacer clic en eso y cambiarlo también. Por supuesto, también podemos hacer doble clic y escribir algo diferente y cambiar el euro porque eso es un menú manual. Entonces si cambio eso, guardo de nuevo a 14 y luego cambio estos manteniendo un equipo, digamos en lugar de Georgia, ¿tú Ariel y lo mismo para éste, o podemos, por supuesto, ir a nuestros estilos de párrafo. Y luego a partir de ahí, puedes cambiarlo. Por supuesto, algunas de estas no van a funcionar. Solo quieres ver si alguno de ellos estaría bien. Pero para esto uno realmente quiere hacer eso. No voy a hacer nada. Y le voy a dar a Teoh Ariel y luego por el color. Acabas de decir dedo blanco, y también podemos centrarnos ahí dentro también que en realidad mover eso un poco hacia abajo. No queremos que eso suceda. Así que retrocede y hazlo un poco más pequeño que ahí. Vamos para que no cambiemos el texto aquí. ¿ En serio? Porque es automático. Es solo todas las páginas de nivel superior por defecto y los enlaces ya ahí dentro. Entonces si de verdad quieres personalizar eso debilita el estilo y cambiar el fondo todo eso. Pero si quieres una navegación manual personalizada, solo tienes que crear uno como lo hicimos en el pie de página allí. Vamos a previsualizar el sitio web hasta ahora, ¿no? Ahí está el hogar. Ese sería el índice, está bien, y luego si haces clic en esto, irá a ti, contactarte bien sobre y haga clic en él en texto, enlazar ahí e ir a preguntas. Y ahí vamos se ve bien hasta ahora antes de trabajar en hacer que este sitio web sea receptivo, necesitamos agregar algunos elementos interactivos más a este sitio web. Necesitamos agregar la página de direcciones, por ejemplo. Gracias y ya veré en la siguiente lección 33. 8.1 con contenido HTML Embedded: bueno, no tienes que conocer ningún código HTML o CSS para diseñar y lanzar sitios web usando Muse. Es posible que haya momentos en los que quieras agregar algún HTML personalizado a tu sitio, como un video incrustado de YouTube o un Google Maps incrustado. No tengo la dirección para este negocio para este ejemplo, así que acabo de tener la ciudad aquí en Google Maps. Por lo que solo escribes en maps dot google dot com Donde sea la dirección del negocio para el que estás creando tu sitio web y podemos dar click en compartir y entonces este es un enlace es si estuviéramos teniendo un enlace de texto o un enlace de imagen a este mapa aquí de lo que utilizaríamos que estás bien ahí. Pero también podemos incrustar el mapa en una página web. Simplemente copiaríamos y pegaríamos este código a un sitio web. Es bastante simple, ¿verdad? Haga click en PC o control, Haga clic en Mac y haga clic en Copiar, luego en Muse en las indicaciones de ruta. Page podría editar y luego pegar, y podemos moverla por la página usando esta herramienta de selección. No hay clic en el sitio, y en realidad tengo ese área de contenido ahí. No queremos que algunos van a capas contenido primario y haga clic en Pie de página y vea los molinos H incrustados y pie de página. No queremos eso. Eso quiero en contenido primario. Algo haga clic y arrastre eso hacia arriba. Dos. Contenido primario. Está bien, ahí vamos. Por lo que solo hago clic en esto. Puedo moverlo con la herramienta de selección. Entonces si queríamos una línea así, no podemos redimensionarla, sin embargo. Al igual que si hago clic y arrastro así, no va a funcionar, bien, solo tendré espacio en blanco ahí. Entonces lo que podríamos hacer, sin embargo, es correcto. Haga clic sobre él y vaya dedo del pie editar HTML o Control haga clic en el Mac. Entonces tenemos el HTML aquí, y esto es lo que copiamos antes. Y entonces lo que podríamos hacer, por ejemplo, con 600 podríamos ajustar que podríamos decir con 400 altura para nuestro solo dejaremos eso por 50 y pincharemos OK, y será justo el ingenio ahí. El marco para el marco del rectángulo está un poco apagado. Entonces lo que podemos Dio es correcto Haga clic en él bueno en html. Entonces eso es 404 50. Entonces podríamos hacer es hacer click y arrastrar hasta que sean 400 para el ancho y luego 4 50 para las alturas que coincidan así, donde también podríamos ir a redimensionar y luego cambiar el ancho y la altura ahí. Esta altura realmente necesita ser 4 50 Ahí vamos. Entonces eso es un poco más delgado para este ejemplo. Pero no responde. Revisaremos el diseño responsive más adelante. Por esto. En realidad voy a tener el código normal que teníamos originalmente. Por lo que no tenemos una costumbre con su altura comparada aquí arriba. Y muchas veces no tienen esto enviado a responsive. Algunos sitios web hacen algunos no, pero vamos a repasar eso ahora con indicaciones. Yo sólo voy a escribir en direcciones iría aquí, y ahí es donde se dio la copia para las indicaciones. Y es lo mismo en YouTube si querías Teoh ah, comparte un video e incrustado en un sitio web, solo vas a compartir y luego a la cama. Y luego puedes personalizar este. Por ejemplo, si muestras más y luego puedes hacer un tamaño personalizado de inmediato donde puedes hacer un preset como este y luego una vez que tengas ancho y alto, cómo lo queremos, y luego otras opciones otra vez cuando solo copias y pega eso. Ahora bien, si esa persona quita ese video o no permite la incrustación, entonces no aparecería, por supuesto, pero esto es sólo otro ejemplo de incrustar html personalizado en sitio web divertido para que pudiera haga clic en eso y reproducirlo. Por cierto, hemos utilizado un par de widgets hasta ahora, como el botón de estado y el menú de navegación. Pero si buscas directorio de Adobe Muse Witches, son algunos widgets gratuitos y de pago, y algunos de ellos ¿te das un par más de opciones para personalizar el HTML que traes desde un sitio. Diga, por ejemplo, mapas de YouTube o Google. Añadiré este enlace y recurso adicional es si te interesa. Pero ya que solo estamos cubriendo algo personalizado, HTML. Esta es solo otra forma de que el dedo del pie agregue contenido usando un widget en lugar de simplemente pegarlo. Gracias, y ya veré en la siguiente lista 34. 8.2: añadir un formulario de contacto: en esta lección, aprendes a agregar un formulario de contacto, navega a la página de contacto a menos que ajustar este texto un poco se rebase así, acuerdo? Y necesitamos un poco de espacio con el que trabajar para empezar aquí. Entonces voy a mantener turno y seleccionar un par de estos y simplemente moverlo hacia abajo solo un poquito . Podemos ajustarlo en un poco con eso. Están bien. Por lo que mantenemos ese formato de cuadrícula con el que estamos trabajando Click the Widgets Library y haga clic en la carpeta Formularios. Por lo que hemos agregado botones con botón de estado cada vez que menús para menús verticales horizontales, tanto personalizados como prefabricados, y que todavía podemos personalizar hasta cierto punto ahora, bajo formularios. Ahí se detalla en contacto. Por lo que estos aires solo contactan formularios. Y si hago clic y arrastro el detallado aquí y te mostraré lo que tiene Ah, manojo cosas diferentes, ¿ verdad? Empresa, trabajo, dirección, ciudad, estado, código postal, y así sucesivamente. Entonces si queremos uno más simple, iba a hacer clic en eso si golpeo borrarlo. Simplemente borra una de esas cosas. Si hago click, todo este asunto había borrado de nuevo ahí vamos. Si queremos unas páginas de contacto más simples, selecciona el simple contacto click y arrastra eso hacia fuera. Y entonces todavía tenemos opciones, sin embargo, para sumar otras áreas. Entonces, como un número de celular. Y haz clic en eso y cambia eso y así sucesivamente. Ahora bien, si no queremos que esos se debiliten, desmarque. El problema se nota que el fondo aquí empujó de esa manera hacia abajo los formularios de envío camino allá abajo donde podemos usar Haga clic en eso y también mantenga pulsado turno y haga clic en esta área aquí y simplemente mueva eso de nuevo hacia arriba. Sopla eso. Está bien, así que ahora si le hago clic, esta es toda la zona, acuerdo? Entonces si hago clic en las opciones laterales y esto se llama formulario de contacto pero podríamos cambiar eso si queremos ser un nombre personalizado, digamos, página de contacto. Pasé de lo que quieras llamarlo, y luego te enviará un correo electrónico por defecto a tu email asociado con su suscripción creativa en la nube, para que puedas cambiarlo si quieres. Entonces, después de enviar eso, ¿se queda en la reunión de página actual? Simplemente tendrá este texto aquí diciendo información enviada. Gracias o va a una nueva página para que puedas crear otra página? Por ejemplo, igual que la página de contacto. Sólo tienes que añadir uno. Digamos que podríamos agregar una página infantil a la página de contacto que dice Gracias. Ya sabes, gracias por enviar información. Ahora vuelve a la página de contacto de la página principal o lo que sea, o podemos mantenerlo más simple y solo tener algún texto de la parte inferior justo aquí que indicará que envían la información. Entonces esto es bastante autoexplicativo. Qué criterios queremos incluir si ponen su nombre, correo electrónico y mensaje y el punto de tener páginas de contacto es algo que no quiero poner sus correos electrónicos en la página Web. Tienen miedo de que los spammers los recojan. Pero muchos clientes de correo electrónico y nuestros días hacen un muy buen trabajo de Phil girando que si tuviéramos la página de contacto aquí, no necesariamente necesitaríamos esto aquí. Podríamos mantenerlo ahí de cualquier manera, aquí mismo. El captación Eso es para evitar que los bots envíen spam de información usando este formulario para que obtengamos los correos electrónicos de personas que necesitamos para obtener correos electrónicos de y abordar spam y y bots. Entonces si hacemos click en eso y vamos a recapturar 2.0, esto va a sumar aquí abajo. Y hay que dar click en esto donde dice aprender más con el fin de inscribirte en una clave con el fin de usar eso. Pero no se puede personalizar esto, por ejemplo, fondo diferente, y se puede tener una imagen o audio. Y entonces qué tipo de tamaño que simplemente evitamos que los bots envíen mucha información. Entonces si quieres eso, podríamos añadir eso en. De no ser así, se puede establecer. De ninguna manera. Ahora podemos personalizar un poco esto. Sabe cómo eso dice por piedad. Ahí hay texto. También hay texto y enviar nombre de correo electrónico del mensaje y así podemos usar nuestros estilos de párrafo. O simplemente puedes cambiar manualmente esto a un fondo diferente. Por ejemplo, si quisieras gustarte eso, puedes hacerlo más grande y lo que no, Así que esto podría ser personalizado según sea necesario. Tendría que configurar el formulario con su proveedor de hospedaje Web para asegurarse de que funciona con ese servidor. Debería. Pasaremos por encima de exportar y también cargaremos y probaremos sitios web más adelante. Entonces si acabas de adelantarte en este momento, no va a funcionar. Probablemente porque no tiene un servidor que luego está enviando ese correo electrónico al correo del destinatario porque es un sitio web offline. Ahora mismo , van a ser archivos HTML locales. Por ejemplo, una vez que lo exportamos en este momento, comparte archivo divertido y algunas imágenes incrustadas y así sucesivamente, eso es solo otro widget para comprobar. Si desea agregar un formulario de contacto en su sitio web, repasaremos consideraciones de probarlo más adelante cuando exportemos el sitio web y subamos Gracias. 35. 9.1 Agregar puntos de Breakpoints en la página principal: arte en esta sección. Vamos a estar agregando capacidad de respuesta a la página web, y ¿por qué querríamos dedo agregar capacidad de respuesta? ¿ Qué es la capacidad de respuesta? Bueno, medida que cambias el tamaño del navegador o estás viendo un sitio web en diferentes pantallas, por ejemplo, dispositivo móvil, una tableta en comparación con una pantalla más ancha, computadora o TV a menudo se verá diferente. Nosotros queremos hacerlo así. El sitio web responde al re dimensionamiento de la ventana o de las diferentes pantallas suspirantes para que podamos ver el contenido en el sitio web. Y, por ejemplo, la navegación no sale del borde de la ventana porque no hemos redimensionado. Por lo que la clave aquí con capacidad de respuesta es reposicionar elementos y volver a dimensionar elementos. Por lo que antes de añadir algo de capacidad de respuesta, solo quiero previsualizar el sitio web hasta el momento. Si consigues un archivo y luego previsualiza el sitio y el navegador en un almuerzo en una ventana del navegador, y solo te traeré esto aquí y así tenemos el sitio aquí. Si hago clic y arrastre y simplemente sigue haciéndose más grande que la foto aquí, y si queremos ese efecto, está bien. Pero creo que en realidad voy a ajustar esto para que no se haga más grande que un cierto tamaño va a ir sobre cómo hacer eso Y lo mismo para este cuadro de texto aquí. Pero todo lo demás se ve bien en su mayor parte, pero te darás cuenta a medida que nos hacemos más pequeños. El texto aquí recorre las fotos y la navegación de la parte superior estructural corriendo un poco cerca uno del otro. Y luego también, ese logotipo de ahí arriba se pone demasiado pequeño. Entonces cuando ajusta si algunos de esos redimensionan o no y también necesitamos volver a posicionar algunas de estas cosas, todo lo demás se ve bien. En su mayor parte, creo que eso se ve bien. Si te imaginas esto es un teléfono y te estás desplazando. Tenemos algo de espacio vacío aquí. Consigue esto corriendo sobre él y demasiado espacio aquí. Por lo que esa página necesita un poco de trabajo. Si obtienes un sobre y lo re tamaño, eso se ve bastante bien. Excepto una vez que lleguemos a esto, um , de nuevo, la navegación va a ser la misma al otro lado y luego preguntas que se ven bien, excepto aquí donde obtenemos el texto justo ahí. Es un poco aplastado en una o dos Letras en una línea no es bueno, pero una vez que lleguemos allí. Eso en realidad se ve bastante bien. Eso es probablemente más cercano. Entonces lo que queremos además de la navegación en cuanto a ser responsive y si se hace más grande en un televisor de pantalla ancha. Obviamente esto es sólo ser color de fondo o fondo aquí, pero estamos pensando en cuando se hace más pequeño. ¿ Qué aspecto tiene? Es pero el tamaño de Mac aquí hemos establecido en 1000 píxeles de ancho, y luego éste. Este widget aquí para contacto no es sensible, está lejos de tamaño Guv's. Y así vamos a querer ajustar eso también. Y luego Redes Sociales. Podríamos agregar las imágenes. Esto es sólo ejemplo, por supuesto, pero, uh, tal vez realinear algo de esto, pero como primero re dimensionándolo, realmente se mete por ahí. Por lo que está buscando indicaciones desde donde esto no es receptivo en cuanto al tamaño, por lo que podríamos agregar un mapa diferente del mismo mapa. Eso es solo más pequeño en cierto punto, pero lo comprobaremos. Entonces esa es la vista previa hasta ahora. ¿ Cómo lo hacemos así? El sitio Web se ve diferente en diferentes tamaños. En lugar de simplemente salir corriendo de la página. Bueno, agregamos lo que se llaman puntos de ruptura. Si vas al maestro A y apoyas dice 1000 son fluidos Punto de ruptura Presidente, tenemos 3 20 de los más pequeños y vemos cómo la navegación se pone un poco de aplastar ahí y luego 1000 como el máximo severo alguna vez ahí y se da clic en un reset 2000. Y para que solo previsualice el navegador con cambiarlo. ¿ Cómo reaccionarán las cosas? Entonces lo primero que queremos hacer es agregar un punto de ruptura aquí en la página principal, así que haz clic y arrastra esto un poco, y una vez que solo se acerca un poco, puede haber una corrida aquí. Esto es alrededor de seis, tal vez 6 80 por ahí. Está bien. Y si eso no es exactamente en 6 80 puedes hacer doble clic en él y luego escribirlo ahí 6 80 si queremos eso y dar click. OK. Y así en ese punto pasado de ahí, la navegación realmente se mete. Y claro, sabes que ahí abajo se pone aún peor. Entonces lo que va a querer dio es a las 6 80 Ya sabes, una vez que te hagas más pequeño que eso, tendremos que rehacer esta navegación son reconfigurarlo. Por lo que a la derecha, haga clic sobre él. Acabemos de hacer clic aquí. Basta con hacer clic aquí en todo el objeto. Derecha, Haga clic en el Control PC, Haga clic en American. Nosotros queremos ir a escondernos en punto de ruptura. Y así ahora no aparecerá en 3 20 ó 6 80 y luego reaparece aquí. Está bien. Y tendremos una navegación. Simplemente tenemos dedo del pie rehacerlo. Una vez que estamos por debajo de 6 80 probablemente sea dispositivo móvil. A lo mejor algunas tabletas, por ejemplo, serían más pequeñas. Ahora esto por aquí que el logo re tamaños y en realidad no queremos eso. Queríamos quedarnos igual. Entonces si haces clic en él y rezo en la parte superior, primer lugar, podemos anclar elementos un bolígrafo y objetos que siempre se muestra y una ubicación en el navegador. Ves, podríamos usar esas opciones o puedes encender depender del centro izquierdo, derecho de la página o contenedor. Entonces voy a fijar esto a la izquierda. Eso significa que sólo mantendrá esta distancia de la izquierda independientemente, en lugar de simplemente moverse en relación con el centro y el lado izquierdo y derecho. Y también bajo redimensionamiento queremos hacer ninguno. Entonces si doy vista previa qué va a hacer eso. Haga clic y arrastre. Ya verás. Ahora se queda. Se está quedando la misma distancia no del borde del navegador, sino del borde de ese contenedor, está bien, y luego se queda igual con ahora. Una vez que nos hacemos más pequeños, sin embargo, sí re tamaños se pueden ver, por lo que necesitamos arreglar eso. Volvamos atrás. Y una vez que se hacen más pequeños para que se hagan más pequeños, haga clic en esto, haga clic en él y luego redimensionar ninguno. Por lo que es un poco más pequeño en el uno en comparación con el otro. Si no quieres eso, si quieres lo mismo, lo que puedes dio es ir. Estoy dando click a esto aquí en el punto de ruptura regular 1000 y bajo redimensionamiento. Basta con dar click que veremos 1 67 por 70. Entonces si volvemos aquí, haga clic en eso y vaya 1 67 por 70. Eso si lo queremos exactamente igual. Es ahora si voy entre estos dos, se queda igual. Entonces eso es preferencia personal. Si lo deseas más pequeño en el tamaño de pantalla más pequeño y en la ventana del navegador más pequeña o si quieres que el logotipo sea consistente. De cualquier manera, ahora también queremos anclar esta navegación sobre la parte superior. Entonces haz click en eso y tenemos justo aquí 10 a la derecha. Entonces cuando hago clic en eso y con eso seleccionado quieto y lo fiero al lado derecho ahora, si haces clic en esto, sí queremos responder con para esta navegación. Entonces ahora si obtienes una vista previa, es solo un poco diferente, acuerdo, así que tiene ese espaciado consistente desde el lado del contenedor. Está bien. Una vez que se acerca demasiado, sin embargo, desaparece y no rebajará la navegación. Por lo que es un poco diferente, y la siguiente lección seguirá agregando algo de capacidad de respuesta a nuestro sitio web. 36. 9.2: canizado y reposición para el diseño Responsive: Ahora, cerremos la página maestra A y vayamos a la página principal y notarás que aquí hay errores para el punto de ruptura de la página maestra. Ahora bien, realmente no afectamos a los de esta vista. Pensamos debilitar, salta a ellos aquí. Pero podemos crear puntos de ruptura solo para esta página. Muy bien, Entonces lo primero en esta página que lo que quiero dio es que si notas esto, se hace más grande y más grande hasta el borde de la página. No queremos eso. Eso es realmente hacer esto no 100% en el con. Entonces, ¿qué? Nosotros canoas, Lo haces un poco más pequeño que el ancho aquí. A lo mejor 95 en realidad. Trae eso un poco en el lado derecho, también. Algo así. Y voy a traer este tipo de líneas con las guías inteligentes se partirán a ella. Y ahora cuando previsualizamos, se hace más pequeño. ¿ Verdad? Pero una vez que obtienes un cierto punto, no se hace más grande. Y creo que eso se ve mejor con el texto del texto. No va todo el camino al otro lado o alguien línea. Y luego para que esa imagen del globo no recoja tarde tampoco donde simplemente sigue haciéndose más grande y más grande con pantallas más grandes. Y podrías ajustar el ajuste ahí si quisieras, o podrías mantenerlo así. ¿ Simplemente depende de qué? Mira trabajo, tratando de lograr eso. El gran cosa es que queremos toda la información sobre aquí y que sea legible. Entonces queremos arreglar esto. Muy bien, así que cierra eso. Y simulemos cambiar el navegador con y realmente solo depende de cuando las cosas empiecen a fastidiarse así. Parece un 20 en realidad alrededor de 7 72 Así que te voy a hacer alrededor de 800 en realidad, en este, añadir un punto de ruptura en doble clic en él, asegúrate de que solo sean 100. Exactamente. Y luego una vez que nos hacemos más pequeños, ver cómo nos hacemos pequeños así. Se hace clic en lo que necesitamos dio. Saltó un punto de descanso. Voy a bajar esto sólo un poquito. Mueva esto también hacia abajo. A ver cómo se ve eso. Un clic y arrastre. Le da un poco más de espacio para respirar. Y podríamos mi en realidad en otro punto de ruptura aquí. Solo estamos viendo cómo reacciona. Realmente se va de la cultura por ahí justo por ahí. Y podríamos mover esto a ti. Adelante y en realidad hagamos eso. Voy a dar clic para saltar a este punto de ruptura, justo sobre atreve Vamos a un punto de descanso. ¿ Dónde fue eso? 6 14 Hagamos eso 6 15 Y con la herramienta de selección esto que voy a sacar eso hasta allá arriba. ¿ Todo bien? Y si no estás satisfecho como, di que quieres que esto esté en el medio, ya nos alineamos en el medio. Pero si quieres asegurarte de que se quede en el medio, también puedes hacer clic en él. Simplemente haremos clic en éste de aquí y alfilaremos en el medio justo ahí. Y ya lo he alineado, pero sí lo ayuda. Mantenlo en el centro. Pero entonces cuando miraba bien, ahora esto ve a donde llega a unos 500 o así. Incluso antes de entonces, vamos a hacer probablemente alrededor de 5 20 bien, después de eso realmente se mete. Entonces lo que podemos hacer es hacer que este tome este texto sea otra técnica. Simplemente aprendiendo las técnicas aquí y si ves donde dice formato texto a través, puntos de ruptura, Haga clic en el otro, el otro t allí donde dice texto de formato Intenta obtener la punta de la herramienta aquí dar formato al texto en pausa actual punto. Entonces lo que eso significa es que vamos a formatear Onley en este punto de ruptura, así que vamos a hacerlo más pequeño. Por lo que encaja un poco mejor en este punto de ruptura. A lo mejor no tan pequeño. Muy bien, Entonces cuando está aquí arriba, es un fondo más grande. Y luego una vez que te haces más pequeño, se hace más pequeño también que el tipo se hace más pequeño así que camino a la bomba a las 3 20 realmente mete su eso. Lo que puedes hacer es volver a dimensionarlo. Entonces aquí, podemos redimensionar esto como para ver cómo reacciona. Mueve esto hacia abajo, ¿de acuerdo? Y entonces realmente voy a añadir un punto de ruptura justo antes de eso. Y aquí, vamos a movernos. Ahí arriba un poco. Todo se trata de responder al tamaño y al espacio que tenemos, por lo que realmente podemos mover esto hacia arriba. Está bien, así que estará ahí. Ahí. Punto de ruptura inferior. Vamos al punto de ruptura más pequeño. Todos los derechos. Eso se ve bastante bien. Esto tiene que ser ahora sólo un poquito Muy bien, Así que todo es legible. Creo que esto aquí arriba. En realidad podemos ajustarnos a lo largo, sin embargo, así que solo saquemos eso. Simplemente se ve mejor, creo donde no es súper grande. Sí, saquemos todo esto. Veamos cómo reacciona eso. Muy bien, Así que esperemos que consigamos el punto. Simplemente repetirías esto con todas las diferentes páginas y solo reposicionarías y cambiarías el tamaño los elementos en diferentes puntos de ruptura. Ahora bien, si miramos hacia atrás a un maestro también, en cierto punto, probablemente quieran hacer de éste este, eh, ree Justus. Bueno, entonces haga clic derecho en este punto de escondite y ruptura. Muy bien, entonces vamos a tener un menú diferente ahí en un poco. Pero por ahora, eso se ve bien. Y la siguiente lección continuará. Un humo o técnicas aquí ajustando las pocas de las otras páginas para que responda. Mira mejor en diferentes tamaños. Gracias 37. 9.3: añadir diseño más Responsive pruebas y resolución de problemas de problemas: Muy bien, bienvenido de nuevo. Vamos a seguir agregando capacidad de respuesta a este sitio web. Adelante y doble click sobre. Y veamos cómo reacciona éste que podemos hacer es hacer que esa tecnología sea más pequeña. ¿ Verdad? Y si creo que las imágenes se ven bien, ya están respondiendo dentro de la altura. Definitivamente queremos eso porque queremos que se hagan más pequeños a medida que el navegador cambia de tamaño. Pero este Texas, lo más grande aquí, y ojalá esto sea efectivo dedo del pie aprender, porque este ejemplo es bastante fácil. ¿ Qué debilita a Dio? Veamos de dónde se pone. ¿ En serio? No vería de sus Vamos a agregar uno ahí, 5 60 Así que vamos a seleccionar todo este texto aquí, y vamos a hacer esto al título es, bueno, sólo un diferente. Y podríamos agregar estilos de párrafo para esto también. Pero iba a cambiar de fondo. Entonces de nuevo, el texto en formato T grande sobre el punto de ruptura actual, y sólo vamos a hacer un poco más pequeños. A lo mejor no tan pequeño. ¿ De acuerdo? Algo así como 18 por eso. Y luego por este. ¿ Qué dice 24? Muy bien, entonces, ¿qué aspecto tiene eso? Bueno, empieza realmente grande, legible, y luego en cierto punto me hago más pequeño. Eso se quedará así hasta el descanso más pequeño 0.3 20 y podrías notar todo este espacio en blanco en la parte inferior. Sí tenemos que arreglar eso. Entonces esto es en el 5 60 uno. Así que vamos a subir ese camino sólo haciendo clic y arrastrando allí. ¿ Algo más para ver aquí un marco de texto? Por lo tanto, trae esa libertad de texto, un oleaje que podría tener algunos retornos ahí dentro. Eso es bueno. Elimina aquellos que no tengan esa línea punteada. Está bien, así que ahí está ese ejemplo que se queda así en la pantalla pequeña. Entonces estás en la tableta del teléfono y luego en la computadora. Muy bien, vamos a sumar de nuevo. Arreglaremos un poco esa navegación. Está bien, ahora vamos, Teoh, Vete Teoh, a casa. Vamos a ir a preguntas duramente en la página de preguntas. Acabo de mover estos sobre ágil quieren archivar lugar en lugar de tenerlos como en línea con el texto. Solo quería mostrarte cómo envolver texto alrededor de las imágenes si lo deseabas en la lección anterior . Puedes mantenerlo así si quieres. Si te gusta el tamaño de las fotos, incluso en lo más pequeño, llena la pantalla, y luego la haces más grande en un poco más pequeña. Si quieres fotos responsivas, sin embargo, vamos sólo a archivar lugar y te complacientes sobre el lado derecho y solo asegúrate aquí arriba, dice, dice, sensible dentro de la altura. Y en esta podemos alterar las fotos para que no aparezcan en las inferiores. Y en realidad hacemos el texto más pequeño a medida que lo hacemos más pequeño, como un dispositivo móvil, una tableta y luego una pantalla o TV. Por lo que se están haciendo más pequeños y luego eventualmente sólo tenemos el texto ahí. Entonces te toca a ti cómo configurar eso, Pero no voy a pasar por esa causa que hemos estado pasando por eso en lecciones anteriores justo antes. Sólo otra vez. Se desea utilizar la herramienta de tipo que está formateando texto solo en el punto de ruptura actual antes de hacer que detecte más pequeño. Y luego puedes hacer click derecho sobre elementos no solo la navegación sino también fotos u otras cosas para ocultar eso en ciertos puntos de ruptura y en la página de contacto qué podemos hacer si haces click y lo arrastras sobre una determinada, digamos unos 500. Simplemente haz que el texto sea más pequeño, y eso debería estar bien. De verdad depende de ti cómo quieres configurarlo ahora con el formulario de contacto aquí. Si quieres hacer que ese desaparecido sea cierto con digamos,ahí mismo, ahí mismo en realidad podemos hacer click derecho Click Ocultar punto de ruptura. Por lo que sólo tendremos la información de contacto regular cuando sea más pequeña, a menos que necesitábamos también escondernos en este golpeando a ese tampoco. Ahora, cuando lancemos nuestro sitio, estaremos revisando cómo probar esto. Entonces lo voy a mantener en este ejemplo. Pero se puede ver que no responde. Hay widgets que tienen formas receptivas como esa. Pero, um, en este ejemplo, solo el valor predeterminado no responde. Eso está incluido en musa aquí, por lo que podemos personalizarlo en la codificación. Pero de nuevo, no se necesita un no codificación para hacer sitios web y musa. Pero sí tenemos que ajustar eso. Por lo que solo tenemos la información de contacto en tamaños más pequeños. Si quieres, en realidad podríamos ser Toma esto y muévelo así. Eso en realidad sería mejor, y podemos subir esto así y entonces aquí podemos realmente lo mismo. Yo sólo puedo llevarlo por ahí arriba y rápidamente mover esto hacia arriba. Entonces este es el defecto y luego eventualmente se convierte así cuando llega así. Entonces de nuevo, en esta capacidad de respuesta, podrías tener, digamos, algunas imágenes que atraviesan los tops un 45 imágenes así, y luego decir, en lugar de tener una cuadrícula cuatro por uno como 1234 tal vez tengas que comprar dos. En un momento dado, podría tener sólo las fotos en una sola línea. Tan solo 1234 y realmente rápidamente las direcciones. Por supuesto, esto no va a cambiar de tamaño. No responde ese mapa de Google, claro, pero de lo que queremos preocuparnos es de ese texto. Entonces una vez que llega a alrededor de ahí uno en un punto de ruptura y simplemente hacer direcciones más pequeñas y tal vez haya bien, hay ejemplo realmente simple de que un poco más pequeño 14. De acuerdo, ahí vamos, así que la dirección se queda en una línea. Está en el punto 14, luego se hace más grande ahí y luego más grande. Ahí era en realidad un mapa justo ese, por ejemplo. Una vez que lleguemos a este suspiros, tal vez quieras un mapa más pequeño aquí abajo. Entonces, ¿qué podemos hacer? Tenemos esto solo ir a un ejemplar que podemos hacer es en este punto de descanso 5 55. Vamos a seguir adelante y dar click derecho sobre eso. Ve a esconderte en punto de descanso y luego Así no tenemos hasta que esté fuera a este tamaño completo. Todavía veo parte de ella ahí. Pero entonces aquí, digamos que las direcciones están aquí al otro lado de la parte superior, y luego lo tenemos aquí abajo. Entonces lo que podemos hacer es y pegarlo, vamos a dar click derecho sobre él para editar HTML. Y voy a hacer el ancho aquí sólo que es un 500. ¿ De acuerdo? Y tiene este espacio extra en los costados. Lo que podemos hacer, va a cambiar de tamaño. Ver, eso se establece en cuatro 54. En realidad son cuatro píxeles más de lo que es el original. Entonces para esto donde hicimos cinco cientos y enumeramos cinco antes, creo que está agregando algunos de ahí en el borde, así que esto debería encajar perfectamente, acuerdo. Y entonces tenemos que dar espacio a las indicaciones, claro. Entonces cuando mueva esto hacia abajo y luego las indicaciones estarían ahí. Muy bien, entonces vamos a probar esto para el principio. Está aquí afuera y luego tienes en un poco más pequeño ahí. Está bien, esa es una forma de hacerlo. Debajo haces algo así. Y así sobre el incumplimiento. Está a un costado. Pero entonces, ¿no llegarías a cierto punto? Se acabó, ¿sabes? Tenemos que esconder éste, claro. Entonces cuando un clic derecho esconde un punto de ruptura. Entonces está aquí, luego está debajo de él. Del mismo tamaño, sin embargo, y luego a partir de aquí, en realidad está por debajo de él. Por lo que apenas un tamaño ligeramente diferente. Y en redes sociales, agregué. Tan sólo un par de puntos de ruptura, sólo lo alinearon. Está alineado y aquí mismo con el marco de texto. En realidad puedes simplemente arrastrar esa clase hacia fuera en una línea si quieres. De verdad depende de ti. Sólo muéstrame otro ejemplo. Podríamos agregar imágenes ahí dentro, pero no quiero perder el tiempo repasando todo eso porque ya hemos repasado las prácticas y principios de eso. Por lo que ya debemos saber hacer eso. Voy a cerrar eso y en realidad anterior en la vista previa del navegador, el sitio y el navegador está bien. Por lo que tenemos casa sobre preguntas, contactar todo se ve bien, puede arrastrarlo, comienza a redimensionarse. Todo sigue siendo clicable. Nada se superpone. Está bien. Acerca de lo mismo. Esas imágenes se hacen más pequeñas de lo que el texto se hace más pequeño, que teníamos ajustar manualmente preguntas. Pero las fotos a un lado. Me di cuenta de esto aquí y ver que tenemos el pie de página realmente superponiéndolo. Entonces arreglemos eso. Esto es parte de diseñadores web, ya sabes, doble comprobación de cosas. Entonces esa es la página de preguntas. Está bien, eso se ve bien. Y luego finalmente, direcciones que en cierto punto, va al fondo ahí. Está bien, eso va a salir un poco a lo más pequeño, porque ponemos eso a 500 Pero vamos a salir de las redes sociales. Está bien, ahí vamos. Y esto necesitaría más fotos. OK, así que quiero llamar la atención, agregar interés visual para que pudiéramos agregar algunas fotos. Ahí está Bueno, vamos a la página de preguntas. Esa fue una que estaba estropeando un poco. ¿ Ver? Pero esto Ah, eso se ve bien. Eso también se ve bien. Muy bien, Entonces lo que tenemos que hacer es asegurarnos de ver ese pequeño cuadro de texto aquí. Pero luego está el contenido. Ahí hay otro marco de texto. ¿ Ver? Ahí mismo. Entonces ese es el para las preguntas de causa. Entonces voy a subirlo. En realidad podría estar en el mismo si quisiéramos. Adelante y solo haz eso. Entonces, ¿ve este contenido desde aquí? Vayamos a bajar eso. Danos más espacio. Volvamos a este. Lo mismo, ese rectángulo de área de contenido. No fue lo suficientemente abajo. Creo que uno debe ser divertido. Se ve como y doble truco. Ahí hay alguien que le dé un poco más de espacio a esto. De acuerdo, se probó de nuevo. Archivo anterior Navegador de firmas. Muy bien, las preguntas se ven bien. Todavía se ve bien. Y eso se ve bastante bien. Por lo que solo quieres asegurarte de que se ve bien en el navegador con la capacidad de respuesta. Intenta darme un poco más de espacio para respirar si está haciendo algo así, y también podemos comprobar el tamaño de los marcos de texto, asegurarnos de que el rectángulo del área de contenido sea menor que el marco de texto que tenemos, y debería funcionar fuera. Gracias, y ya veré en la siguiente lección 38. 9.4 Agregar un menú móvil separado utilizando diseño Responsive: son. Ya sabes, hemos estado gastando mucho tiempo en el diseño responsive, y en esta lección, creo que será realmente divertido porque va a mostrar otro ejemplo de usar un widget . Esos elementos bonitos hechos, personalizables donde podemos agregar otra barra de navegación que s'más propicio para un dispositivo móvil por ejemplo, una tableta o teléfono. Así que adelante y navega a la página principal y notarás que tenemos la navegación desaparecerá cuando se pone un poco demasiado empapada en la parte superior. Porque quiero estar está funcionando, las palabras empiezan a encontrarse entre sí. Entonces, ¿qué podemos hacer? Podríamos hacer un menú más pequeño Por aquí, obtenemos insertar imágenes y le hacemos enlaces de imagen a todas las páginas que podamos en otro widget y simplemente redimensionarlo, hacerlo más pequeño. Pero si es sensible, todavía se va a hacer un poco más pequeño ya que lo hacemos muy pequeño ahí, ¿ verdad? A menos que lo empecemos pequeño así, es otra opción es realmente agregar un menú abatible que tendrá el logotipo en la parte superior y luego tener enlaces a las páginas que podamos cambiar. Entonces te muestro a lo que me refiero. Entonces cuando estamos en la página principal, tenemos el encabezado, ese pie de página, el área de contenido principal. Obtenemos el logo aquí. Eso es más o menos todo lo que hay en la página principal a este tamaño, Lo que podemos hacer es ir a ti los paneles de widgets para conseguir una ventana, que es biblioteca, y queremos ir a paneles y luego acordeón. Entonces haz clic y arrastra eso aquí arriba de la parte superior. Asegurémonos de que diga que se puede cerrar. Todo lo que eso va a hacer es hacerlo para que podamos hacer clic en él y expandirlo y cerrarlo. No necesitamos estos tres, sin embargo. Esto es justo si tuvieras algunos títulos en una página y puedes hacer click y da más información, pero podemos usarlo para una navegación también. Entonces lo que queremos hacer es que me voy a mover esto primero, asegurarme de que estamos en la capa correcta. Entonces estamos en la cabecera. Eso es buen acordeón ahí mismo. Podemos ver. Y entonces lo que queremos dio es que no necesitamos este aquí, así que solo hago clic en ese y veo cómo se destaca. Algunos en una prensa, retroceso o borrar. Voy a hacer clic en este retroceso o eliminar y luego hacer clic en éste. Este es el que vamos a usar. Muy bien, entonces lo que vamos a hacer es primero voy a copiar esto aquí. Entonces voy a editar copia, y luego me voy a Teoh, ¿ verdad? Haga clic en esto y diga escondite punto de ruptura para que eso esté fuera del camino. Por lo que va a desaparecer ahí. Vamos a reinsertarlo en otro lugar. Queremos Teoh doble click aquí arriba así que obtenemos justo este título aquí. Entonces es un cursor y luego sólo tienes que ir a editar pegar y eso va a pegar el logo ahí. Nosotros lo queremos centrado para que podamos ir a ventana y luego texto y luego centrarlo ahí mismo porque esta actuación es parte del texto Ahí, está en línea y alguien cierra eso para volver a la herramienta de selección. Y en realidad no necesitamos esto aquí mismo. Por lo que si hago clic en el de éste nuevamente y lo hago 1/3 vez, seleccionamos esta sección de texto aquí mismo. No necesitamos eso. Por lo que presiona retroceso o borra y luego esta zona no hay señal. Haga clic en él y lo alterna , se abre, lo cierra. Lo que necesitamos para dio es ir al menú vertical en la biblioteca de widgets y hacer clic y arrastrar sobre para que sea y ver cómo tipo de lo resalta. Quieres asegurarte de que está ahí dentro y probar que puedes hacer clic y asegurarte de que aparezca y reaparezca. De acuerdo, Si no lo hace, solo intenta reinsertarlo y asegúrate de que estamos dentro de esta zona aquí. Muy bien, entonces lo que Debilitar dio es dar click y arrastrar esto Así que ocupa todo este espacio aquí. Está bien. Dijo que te haces una idea de lo que vamos a insertar aquí y vamos a hacer clic y arrastrarlo demasiado arriba y luego asegurarnos de que va todo el camino a través. Yo quiero que esto consiga un 100% bien. Lo mismo para esto. Haga clic en esto una vez, haga clic de nuevo. Podría arrastrarlo más del 200%. Muy bien, ahora necesitamos personalizarlo un poco. Entonces, vamos a plantearlo. Bibliotecas RCC. Y voy a dar clic en este para que veamos el elemento del menú normal, y voy a cambiarlo a este color y están todos editados juntos de nuestras opciones anteriores . Aquí, puedes ver que editar juntos y volver a hacer clic en eso y luego dar la vuelta. Hagámoslo tipo de ratón de color complementario hacia abajo. Lo mismo, Estado activo, lo mismo. Y podemos sumar una transición si queremos ésta. Yo sólo voy a tener un cambio inmediato, así que no hay retraso, y vamos a pasar esto. Adelante y volvamos a aquí. Asegúrate de que todavía tenemos el otro y notado de vuelta. Aquí tenemos esto. Esto sigue aquí en todas las demás páginas en el lado más grande, así que no queremos eso. Entonces lo que haríamos es o en este, hacemos clic derecho en él ocultar y punto de ruptura. O si estamos terminados en este, obtenemos click derecho sobre él y decimos, Ocultarnos en otros puntos de ruptura. Entonces de cualquier manera, Así que vuelvo aquí o solo voy a hacer click derecho. Asegúrate de que todo esto esté seleccionado. Ahí vamos. Correcto. Consumidores, tenemos que seleccionarlo primero. Entonces estamos atrapados en todo el objeto y luego nos escondemos en punto de ruptura. Está bien, así que vamos a probar esto. La navegación se pone bastante pequeña. Entonces va a cambiar a esto. Y necesitamos que esto se cierre por defecto. Así que cierra eso y vamos a Más pequeño. Más grande. Y ahí vamos. OK, eso va a probar esto. Archivo anterior navegador de avistamiento. Muy bien, entonces vamos a cambiar el tamaño de esto. Y una vez que llega a cierto punto donde la navegación se pone un poco aprieta y también más cerca del tamaño de las tabletas, ahí vamos y también los teléfonos móviles. Entonces si hago clic en esto, va a bajar eso. Puedo navegar, navegar por aquí en un teléfono o tableta, Haga clic aquí y así sucesivamente para que pueda personalizar el fondo de eso también. Podemos personalizar. Si hicieras un menú manual, podríamos incluir también los otros dos enlaces. Simplemente realmente depende de lo que quieras para esa alternativa. Hay muchos ahí. Entonces solo para mostrarles otro ejemplo de capacidad de respuesta, gracias y ya veré en la siguiente lección 39. 10.1Diseñar y añadir una imagen de Favicon: antes en el curso, hablamos de un favor. Con imagen. Es ese icono favorito que si agrega una página Web a una lista de favoritos o cuando realmente estamos en el sitio, arriba en la parte superior de la barra de título verá una imagen diminuta, y varía según el tamaño en diferentes pantallas de diferentes dispositivos. Pero lo genial de Adobe Muse es que podemos elegir una imagen aunque no tenga el tamaño correcto. En tanto sea una plaza, podemos agregar eso como una imagen de favor con. Entonces si estás en Muse y tienes que archivar y luego las propiedades del sitio y aquí abajo bajo contenido favor con imagen, haces clic en esa carpeta y selecciona un archivo. Y por lo general habríamos favorecido la conducta I c. O en el directorio raíz. No obstante, es un poco más complicado que eso ahora, con diferentes dispositivos y diferentes tamaños de imagen. Pero con musa, debilita, selecciona incluso un archivo más grande y musa lo redimensionará y lo agregará para nosotros. Por lo que abre tienda de fotos. Si tienes cloud creativo, deberías tener acceso a eso. Si tienes toda la nube creativa. Si tienes musa a través de eso, y hay dos formas de crear. Si solo queremos crear el tamaño predeterminado, irías al archivo nuevo y luego 32 pixels por 32 pixels a 72 pixels por pulgada. Algo rápido crea, y luego abres una de las imágenes que quieres usar para poder ir a la rez alta o puedes ir a la rez baja de cualquier manera, por ejemplo, si vamos a usar esta imagen aquí, podríamos sacar eso de la pestaña ahí, usamos el movimiento a en el panel de herramientas y luego hacer clic y arrastrar eso aquí. , va a ser mucho más grande Sin embargo, va a ser mucho más grande, así que podemos mantener, cambiar y hacer clic y arrastrar la esquina allí para mantener la proporción correcta. Y entonces sólo queremos mirar la composición y a eso, cómo queremos luego golpear, entrar o regresar en un control de prensa plus, y luego aquí vemos los píxeles reales 32 píxeles por 30 píxeles de disparo. Y entonces dirías que como PNG está bien, así archivo guardar como y luego PNG y yo en realidad tenemos uno en los archivos de soporte con favor con eso. ¿ Ese es justo ahí? Tengo otro que es más grande que porque te voy a mostrar otra forma de crear un favor. Con imagen no tiene que ser tan pequeña para empezar. Entonces voy a ir a archivo abierto y desde las imágenes de alta resolución. Sólo tienes que seleccionar uno. Tenemos éste aquí. Y si vamos a imagen y un tamaño de imagen que nos muestre la resolución actual, esa es una resolución muy alta. 12 70 píxeles por pulgada. Podemos redimensionarlo con el recorte preestablecido. Recuerda, queremos tener el mismo ancho y alto porque esto necesita ser un cuadrado. Si tratamos de agregar un favor, con imagen y uso. Y no es una plaza, dirá, Hey, Hey, necesito una imagen cuadrada. Entonces tengo este 1000 pixels por 1000 pixels y luego 72 pixels por pulgada. Solo queremos trabajar aquí en la composición. Podemos mirarlo al 100% en un poco. Está bien, doble clic, luego control o comando. Plus Todo bien. Se ve bien. Y eso se puede decir como PNG en tu computadora. Ahora tengo que y ya están a favor con ahí y luego a favor con grande y así en Muse. Una vez queremos agregar ese bien de las propiedades del sitio de archivos y luego ir a favor con imagen, abrir ese favor con grande, entonces, bien, y ahora cuando vayas al sitio de vista previa de archivos y navegador y luego puedes ver ahí arriba en el arriba justo al lado del título de la página, tenemos ese favor con imagen. Entonces si lo agregamos a favoritos en algunos dispositivos móviles, en la imagen será el ícono. Si guardamos una página Web como un atajo, por ejemplo. Entonces así es como lo agregamos fácilmente en Adobe MEES Gracias, y ya veré en la siguiente lección. 40. 10.2: Verificar para la coherencia, la facilidad de uso y añadir títulos: estamos a punto de exportar y o subir nuestro sitio web. Ahora, asegúrate de que tu página Web se vea consistente en todo el tablero. Entonces lo que me gusta hacer antes de un lanzamiento, un sitio web es simplemente pasar y asegurarme de que haya consistencia. Asegúrate de que los enlaces funcionen y todo eso. Ahora, en este, sí hice muchos tipos diferentes de lanza solo para darte diferentes ejemplos con los que podrías trabajar, como listas HTML incrustadas, poniendo texto dentro de cuadros de texto específicos, aire que fluye por el costado. Por lo que no va a haber mucha consistencia además de la barra de navegación. O tal vez dónde están los títulos. Pero sólo vamos a pasar y puedes mirarlo, por supuesto, en el navegador. Pero también lo miro en thes páginas Web, y sí noto, por ejemplo, esto aquí mismo donde dice de nosotros si voy Teoh son estilos de párrafo tiene título de página ahora en la otra página. Cuando habíamos arreglado antes, ¿te das cuenta en la más grande? Necesito una corrección de este título de página. Ahí vamos, y esto fue en preguntas frecuentes sobre los puntos de ruptura de 1000 píxeles por defecto, así que arregla eso Y entonces cuando me haga más pequeño, claro, ¿ cambiarías el tamaño del fondo correcto? Y luego contáctanos. Podrías simplemente asegurarte de que estos aire todo alineado justo en medio de esta columna aquí. Consulta esa guía inteligente aquí mismo y qué más ir dedo del pie cambiar el tamaño y luego mira el acceso X e Y . Si movemos esto hacia arriba, veremos que cambia que 32 se quede igual 91. Entonces si quieres teclear eso en ST 90 y luego ir a los demás, digamos, digamos, por ejemplo, este redimensionar, y entonces ¿por qué acceder a 90? Simplemente lo va a mover hacia arriba, así que está exactamente en el mismo lugar. Solo hay un ejemplo de buscar consistencia y, finalmente, finalmente, redimensionar las redes sociales. Entonces, si vamos a previsualizar justo aquí en Muse, nos acercaremos sabe dónde está esto. Preguntas contacto. Por lo que es alineación consistente y colocación consistente y estilo de fuente de todos los títulos de la página. Eso es sólo un ejemplo. También necesitamos agregar títulos si notas no solo el título de la parte superior de la página con el título literal de la página es si estamos previsualizando esos. Fue sólo el nombre de la página que no es bueno para la optimización de motores de búsqueda Seo. Y realmente necesitamos el título personalizado de Ada allí. Entonces en cada una de las páginas y títulos, por lo que solo puedes ir a la página y luego a las propiedades de página y debajo de opciones. Aquí está el nombre de la página. Y entonces qué? Podemos dio desmarcar mismo su nombre de página y mantener el nombre de página. Son la misma causa ese es el nombre en esta navegación y el título de la página va a ser diferente. Entonces qué decir y luego sobre Paige Paige Propiedades y luego desmarque diga nombre de página HMAS . Y entonces éste será mezclas y más allá de nosotros simplemente agregando ese nombre de la empresa son. Por lo que me quedé por delante y lo hicimos por todas las páginas. Misma técnica. Por lo que ahora olvídate de un archivo anterior navegador de avistamiento más difícil de lo que puedes ver. Se han agregado los globos superiores y más allá al título de la página y luego a casa para Click About . Tiene sobre preguntas. Contacto que también direcciones en redes sociales es Así agregamos títulos a cada página. Si no queremos que sea el mismo nombre exacto que los nombres de las páginas aquí 41. 11.1 de Catalyst de Adobe Business: Una vez que tengamos nuestro sitio web cómo lo queremos, podemos seguir adelante y realmente exportarlo y o subirlo. Entonces una forma de hacerlo es usar adobes business Catalyst. Entonces si vas al archivo y luego publicas un catalizador de negocios y es pedir un nombre de sitio y esa palabra o palabras irán justo aquí, así que será tu nombre de sitio dot business catalyst dot com. Este no será tu propio punto com. Vamos a repasar cómo hacer eso. Pero para este, es bueno probar. Y también puedes usar adobes planes de hosting. Cuesta extra. Si quieres usar eso. No obstante, sólo voy a mostrarles cómo usar Catalyst empresarial, que viene con Creative Cloud que no cuesta extra. Y tienes opciones aquí, publicaste un nuevo sitio, y luego puedes personalizar el euro. Entonces voy a llamarlo mezclas y más allá del sitio de prueba, y sí te animo a cambiar parte del texto y, ah, conoces la información de contacto porque no queremos publicar realmente estos globos y más allá de la web, ya sabes, esta es una empresa real que me dio permiso para usar sus fotos y sus textos para el proyecto de clase. Pero quieres publicar tu propio sitio. Entonces lo que sea que hayas estado trabajando, si has estado trabajando en esto exactamente, solo tienes que cambiar un poco el texto y las fotos. Um, las de alta resolución están bien de usar. Los de baja res aire de ellos Y puedes, ya sabes, cambiar los nombres que arriba lo más bajo aquí arriba, y luego puedes seguir adelante y publicarlo como prueba si quieres. Um, probablemente has estado creando tu propio lado, pero si has estado telefoneando junto a mí, eso también está bien. Por lo que quiero poner a Bloom para estar en sitio de prueba y luego para el euro. Vidas tienen mezclas y más allá, ya sabes, click. OK. Y así es exportar todas las páginas que cada equipo l las imágenes CSS y cualquier otro contenido, y realmente lo está recubriendo para nosotros y luego subiéndolo para que podamos previsualizar este sitio web. Está bien. Tan publicado, completo. Y ahora estoy en internet aquí globos y más allá de dot business catalyst dot com fort fort slash index dot html, que es el nombre del archivo por defecto en el que empezamos. Entonces esa es nuestra página principal. Y así podemos pasar por esto y dar click. Y este sitio web ya está en línea, y nosotros impugnamos. Asegúrate de que todo se vea bien. Y de nuevo podemos redimensionarlo. Consigue ese dispositivo móvil fresco amigable, muchos allí también. Está bien. Y luego direcciones. El tercero enchufa aquí que incrustó mapa de Google y luego redes sociales. Está bien, vamos a contactar y impugnamos esto, pero a mi nombre Hola. Amenazas en la página web. Está bien, clic en enviar. Dice forma recibida. Y estoy en mi Gmail en otra ventana y sí me dieron el email. Entonces eso funciona. Ya está configurado con un catalizador de negocios. Ahora esto no lo hace. Por supuesto, me veo su profesional comparado con usted conoce su propio punto com. Ahora, ¿cómo se hace eso? Se puede enviar para el hosting de Adobe, y se integrará con catalizadores de negocios. Y solo tienes tu propio punto com. Se puede inscribir. Simplemente cuesta extra. ¿ Qué? Vamos a repasar cómo puedes inscribirte en otras empresas de hosting y registro y realmente exportar o usar la subida de FTP y la musa de adobe en la siguiente lección. 42. 11.2: Exportar HTML y CSS a local para subir y usar FTP: parte de la lección anterior. Subimos el sitio para que pudiéramos probarlo en el catalizador de negocios dot com que se incluye con la suscripción a Creative Cloud de Adobe. Ahora, si sí lo quieres usar sobre hosting, solo tienes que hacer clic en este enlace aquí, asignar un nombre de dominio. Será cargo extra, y puedes inscribirte a través de Adobe para obtener tu punto com real. Ahora no tienes que hacer eso. Puedes usar otras empresas también, así que vamos a repasar algunas opciones diferentes ahora si vas al archivo y luego subes al host FTP ahora. Esto es si primero consigues un dominio registrado, y hay muchas, muchas empresas diferentes utilizo Go daddy dot com, y puedes inscribirte en tu propio punto com como tengo buena academia creativa dot com, chad newman dot com Y eso es bastante barato Ahora el hosting tampoco está tan mal, pero es un poco más usualmente, por lo que necesitas registrar tu dot com y también puedes hospedar tu sitio a través de la misma empresa. Muchas empresas de hospedaje también se registran y viceversa. Muchas empresas de registro también acogen, pero utilizo una empresa diferente para hosting. Yo uso dream host dot com hay muchas empresas diferentes a las que te inscribes, sin embargo, y la empresa de hosting es la computadora, básicamente el servidor que almacena tus imágenes HTML CSS. JavaScript archiva cualquier archivo que aire parte de tu sitio web en su servidor, y luego tu empresa registradora le dice que vaya a ese servidor específico. Las instrucciones van a ser diferentes, dependiendo de la empresa registradora, Pero básicamente vas a querer iniciar sesión en tu empresa registradora y cambiar los servidores de nombres para apuntar a que empresas de hospedaje para que tengan instrucciones para llenar eso. Y tienen reps de atención al cliente que pueden ayudar es, bueno, mayoría de las empresas tienen eso. Ahora, cuando hayas iniciado sesión en tu empresa de hosting, te darán una dirección de servidor FTP para usar así como un nombre de usuario y contraseña. Lo que estarás haciendo, básicamente, básicamente, con esta opción es subir tu sitio desde Adobe Muse, usando los años nombre, contraseña y servidor FTP que nos ha dado la empresa de hosting. Y luego lo va a subir para que podamos hacer cambios y luego guardar esos cambios y luego subirlo al servidor FTP. Esto realmente depende de qué empresa de hosting vayas con. Y luego, por supuesto, su nombre de usuario y contraseña. Entonces eso va a ser diferente. No te puedo decir que, obviamente, obviamente, porque ah, eso sería a través de tu empresa de hosting y tendré algo más de información en el recurso adicional ahora es al revés. Teoh, sube tu sitio es para goto file y luego exportar como HTML y lo que esto va a hacer. Yo sólo voy a darle un nombre. Tanto cambio de ubicación, dos globos y más allá de página web. Entonces, como carpeta. Y ahora voy a seguir adelante y presionar OK. Ah, y sí tengo que darle un nombre. Por lo que no se puede simplemente poner un nombre. Este es un falso punto com. Obviamente, um, solo voy a presionar, vale, Sólo quiere un punto com en ese espacio, y esto es exportar todo el cada equipo de archivos. No es subir. Está poniéndolo en el formato adecuado. Archivos HTML CSS y JavaScript e imágenes en nuestro disco duro local. Ahora esto es una advertencia sólo porque nuestro formulario de página de contacto no coincide ahora de nuevo, la página de contacto que es lo único que también querrás que Teoh configure con tu empresa de hosting. Tendrán instrucciones específicas para eso. Muy bien, algún golpe. OK, entonces en realidad voy a mostrar los archivos que tenemos. Entonces es esto aquí mismo, Alguien doble clic en eso. Y ahora veamos esto. Tenemos 1234 56 archivos html. Llegó a documentos XML, que es el lenguaje de marcado ahí. Y luego la carpeta CSS. Algunas hojas de estilo, imágenes. Ahí hay un rodillo imágenes en el tamaño correcto que queremos y luego guiones. Archivos PHP, archivos JavaScript. Por lo que no tenemos que saber la codificación. Ahora podrías abrir este archivo HTML, por ejemplo, en un bloc de notas o Dreamweaver y realmente mirar la codificación. Pero esta no es una clase de codificación. No tenemos que saber la codificación, y aquellos de nosotros que sí sabemos codificar esto en realidad es bastante conveniente usar Muse, y luego podemos personalizarlo más adelante si queremos. Entonces lo que harías con esto es que tomarías todos estos archivos y lo subirías al directorio en lugar de usar adobe muses carga FTP. Utilizarías un programa gratuito como File Zillah, y utilizarías tus credenciales de nombre de usuario y contraseña de inicio de sesión FTP. Inicia sesión, y en realidad puedes simplemente hacer clic y arrastrarlos con el dedo del pie. Sube a tu dot com que te hayas registrado. Entonces una vez que vayas registrate dot com y luego apuntes tu registro tu dot com a tu sitio de hosting. Y luego inicias sesión en tu sitio de hosting a través del servidor FTP usando un Explorador FTP como File Zilla y lo que sea que hagas un cambio. Por lo que hiciste que cambiara sobre. Puede hacer clic y arrastrar eso hacia arriba para reemplazar el archivo, y luego los cambios se aplicarán en el sitio. Otra forma de actualizar tu sitio es usar las musas de Adobe y la edición de navegadores y A Z siempre crearas el sitio web con Muse, puedes poner tu propio dot com aquí, y luego haces click siguiente y pones las credenciales para la subida FTP y el corto de aire de FDP para el protocolo de transferencia de archivos. Acabas de subir. Hay archivos HTML, que son las páginas Web donde luego deberían descargarse en el software del navegador, por supuesto. Y así no tienes que tener adobe musa. En realidad puedes iniciar sesión en cualquier edición del navegador y hacer clic en las imágenes y cambiar diferentes aspectos al respecto. Cambiar la información, cambiar el texto de la página y guardar los cambios. Y Adobe Muse y la edición de navegadores en realidad se registra en el FDP. Y así es una manera fácil de actualizar el sitio. Basta con hacer clic en las imágenes, cambiar el formato y hacer clic en el formato de cambio de texto y luego guardar los cambios. Esa es sólo otra opción. Teoh actualiza el sitio. Lo que hago. Cuál es mi método favorito de actualización de sitios web es realmente simplemente exportar los archivos. Entonces tengo los expedientes. Tengo H archivos humanos y todos los demás tipos de archivos imágenes CSS, JavaScript y así sucesivamente. Y cuando hago un cambio de dedo uno de ellos, entonces puedo simplemente hacer clic y arrastrarlo hacia arriba y actualizar el sitio usando mi Explorador FTP. Ahora quizá prefieras usar solo musa y hacer cambios ahí dentro, y aún podríamos hacer eso, y luego podrías exportarlo de nuevo. O simplemente podrías usar la carga de host FTP en Adobe Muse, literalmente solo preferencia personal. Está haciendo lo mismo. Es subir las nuevas imágenes, los cambios que hemos realizado para que el sitio web se actualice cada vez que realizamos cambios 43. 111.3: conclusión de curso: gracias de nuevo por inscribirse en este curso. Avísame si tienes alguna pregunta. Esperemos que hayas aprendido mucho sobre los principios y prácticas del diseño de sitios Web y el lanzamiento sitios web. Siéntete libre de publicar tu página web en el área de proyectos para recibir comentarios y solo para mostrarnos lo que has diseñado. Gracias.