Copie el código mostrado anteriormente.
El formato HTML incrustado hace referencia al código fuente generado por un sitio web de terceros, como Google, YouTube, Flickr o Picasa. Puede configurar una cuenta con estos sitios web, iniciar sesión y, a continuación, copiar el código incorporado de estos sitios y agregarlo a su sitio.
Pegar HTML incrustado en una página, es como poner una ventana dentro de una página en su sitio que muestra el contenido de un sitio de un tercero dentro de ella.
HTML incrustado es un método excelente para añadir información compleja (como, por ejemplo, mapas, previsiones meteorológicas, cotizaciones en bolsa), además de contenido multimedia (como vídeos digitales, proyecciones de diapositivas y archivos de audio) de forma rápida y sencilla. Esta estrategia tiene la ventaja añadida de que permite utilizar un sitio de terceros como un servicio de alojamiento e interfaz de carga. Por ejemplo, si crea una cuenta gratuita en YouTube, puede crear su propio canal de YouTube y cargar el contenido de vídeo para su sitio. YouTube incluye una página web que simplifica el proceso de carga y aloja los archivos de vídeo en su sitio. Si desea actualizar el sitio, basta con añadir más vídeos en su canal de YouTube, copiar el código incorporado y, a continuación, pegarlo en una página para añadir nuevos vídeos a su sitio de Muse.
En esta sección, deberá copiar el código fuente de Tumblr. Se trata de un servicio en línea gratuito que requiere crear una cuenta e iniciar sesión y, a continuación, publicar entradas de blog que están a disposición del público. Los blogs son fáciles de utilizar y son especialmente útiles cuando desea que sea más fácil para alguien que no tiene muchos conocimientos técnicos actualizar su propio sitio. La mayoría de sitios de blogs incluyen una interfaz en línea, por lo que se puede utilizar cualquier navegador para iniciar sesión en su cuenta y publicar nuevas entradas, sin necesidad de tener conocimientos sobre HTML o software adicional.
Nota: no es necesario que los usuarios que visiten su sitio web tengan una cuenta de Tumblr para ver el blog que haya incrustado en la página. La única persona que necesitará tener una cuenta es usted, y la usará durante la fase de diseño para crear un blog personalizado y generar el código de incrustación que añadirá al sitio web.
<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>
Nota: en la mayoría de los casos, Muse reconocerá código HTML y se incorporará automáticamente el HTML que pegue directamente en la página. Sin embargo, si aparece el código de la página, en lugar del contenido de la página web de terceros, a continuación, intente seleccionar Objeto > Insertar HTML en su lugar.
Después de incorporar el código HTML, verá un cuadro delimitador de color azul con manejadores alrededor de las publicaciones del blog que se incluyeron para la cuenta de Tumblr de Katie's Café.
Eso es todo lo que se necesita para incorporar código HTML en las páginas de Muse. Si alguna vez desea editar el código HTML, puede hacer clic con el botón derecho en un elemento HTML incrustado y elegir Editar HTML en el menú contextual que aparece. De este modo, se abre la ventana Editar HTML para que pueda acceder al código pegado anteriormente.
Ahora es el momento de revisar los cambios realizados en la página de eventos:
Tenga en cuenta que cuando se desplaza hacia abajo por la lista de entradas del blog, el encabezado aparece en la parte superior del contenido de otra página. Este comportamiento se debe a que la página de eventos utiliza la página maestra Foreground, y el contenido del encabezado de dicha página maestra está configurado para mostrarse en primer plano.
La página de eventos ya está completa. En la siguiente sección, aprenderá a pegar contenido HTML incrustado dentro de un widget, para controlar el modo en el que el contenido de terceros se muestra en función de la interacción del usuario.
Actualmente el contenedor de destino se rellena con un color de relleno gris. Sin embargo, puede colocar todos los tipos de contenido que se encuentran en el contenedor de destino, incluyendo diferentes archivos de imagen, rectángulos rellenos, texto o HTML incrustado que ha copiado de otro sitio web.
Para este ejemplo, pegará HTML incrustado que fue generado por YouTube.
Supongamos que ha visitado una página en YouTube.com para ver un video que cargó con su cuenta. Si hace clic en el botón Compartir y, a continuación, hace clic en Insertar, puede acceder y copiar el código incrustado del vídeo.
Para este vídeo, el código de incorporación del vídeo de Katie's Café ya se ha copiado en su sitio, por lo que no tiene que visitar YouTube. Copie el código incorporado que se muestra a continuación para guardarlo en el portapapeles:
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>
El código anterior utiliza etiquetas de iFrame para rodear el vínculo al archivo de vídeo publicado en YouTube. Un iFrame es un contenedor HTML que permite visualizar contenido dentro de una "ventana" cuando lo añade a la página web.
Después de copiar el código anterior, vuelva a Muse.
Mientras el contenedor interior de destino esté aún seleccionado, a continuación se debe pegar el código HTML que ha copiado anteriormente en el contenedor de destino.
Nota: tal y como pudo observar al pegar la imagen principal en el contenedor de desencadenante, pegar el código dentro de un contenedor de destino puede ser un poco difícil porque el objetivo es pegar el código DENTRO del contenedor de destino del widget. Es posible (en función del elemento seleccionado actualmente) pegar el código de vídeo fuera del widget, por lo que está incorporado directamente en la página. Continúe con cuidado... si prueba la caja de iluminación haciendo clic en Vista previa y ve que el vídeo se muestra aunque todavía no haya hecho clic en la imagen principal, significa que el código de vídeo no se pegó correctamente en el contenedor, que es la razón por la que aparece de forma inmediata. El vídeo solo se debe mostrar después de hacer clic en la imagen principal.
Siga estos pasos para pegar el código de vídeo en el contenedor de destino (mientras el indicador de selección muestra la palabra: Contenedor).
Nota: en la mayoría de los casos, Muse detecta de forma automática cuando se pega código HTML, y reconoce que es HTML, en lugar de texto sin formato. Por lo tanto, si lo prefiere, en lugar de elegir Objeto > Insertar HTML para abrir la ventana HTML, también puede hacer clic con el botón derecho del ratón (o mantener pulsada la tecla Control y hacer clic) mientras que el contenedor de destino interior esté seleccionado y elegir Pegar en el menú contextual que aparece. (O elija Editar > Pegar o utilice el método abreviado de teclado para pegar el código fuente en el contenedor de destino). Muse ofrece varios métodos para lograr el mismo objetivo de pegar el código de vídeo en el contenedor de destino.
Después de pegar el código en el contenedor de destino, verá que se muestra el primer fotograma del vídeo (una taza de café). El primer fotograma del vídeo indica que se ha pegado el código incorporado HTML correctamente. El vídeo no se reproduce mientras se edita la página en la vista Diseño. Solo se reproducirá después de hacer clic en el botón Vista previa en el panel de control o previsualizar la página en un navegador.
Haga clic en cualquier lugar fuera del menú Opciones para cerrarlo. Llegados a este punto, el widget está ahora configurado y listo para ser probado.
Anteriormente en este tutorial, ha aprendido cómo incorporar código HTML en las páginas para añadir un blog de Tumblr en la página de eventos. También ha visto cómo pegar HTML incrustado dentro de un widget de composición de caja de iluminación, para mostrar un vídeo de YouTube en una ventana de caja de iluminación cuando el visitante hace clic en un botón. En esta sección, usted analizará un tipo más de HTML incrustado proporcionado por el sitio de Google Maps. Siga estos pasos:
Este código fuente se ha copiado desde el sitio de maps.google.com. Puede crear un mapa personalizado para una dirección (o en este caso, varias ubicaciones). Es un servicio gratuito, solo tiene que proporcionar la dirección (o direcciones) y hacer clic en el botón de creación de mapas.
Después de crear un mapa, la interfaz de Google Maps permite introducir un título y una descripción. A continuación, puede hacer clic en el botón de vínculo para acceder al código. Seleccione el código HTML correspondiente en el campo con una etiqueta de pegar HTML para incrustarlo en el sitio web, y estará listo para volver a Muse e incrustar el HTML en la página.
Para este tutorial, no es necesario que cree un nuevo mapa usted mismo. Si prefiere probarlo, pruebe a escribir cualquier dirección, crear un mapa y copiar el código. Sin embargo, si prefiere simplemente probar cómo funciona, puede trabajar con algunos códigos HTML generados previamente.
<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=218302982680021663941.00049fcd9cf93276f540e&ll=37.7737,-122.43782&spn=0.067844,0.098877&z=12&output=embed"> </iframe>
While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.
Después de añadir la descripción al mapa, la página de visitas ya se ha completado.
Debe tenerse en cuenta que el mapa de Google HTML incrustado es interactivo. Puede hacer clic en las flechas para desplazarse por el mapa en su ventana, y también puede hacer clic en los botones + y - para acercar y alejar.
El diseño del sitio está ahora terminado en todas las páginas. En las siguientes secciones de este tutorial, verá cómo dar los toques finales y publicar el sitio como una versión de prueba gratuita.
Puede incrustar código HTML en las páginas de su sitio para añadir funciones complejas de sitio que se muestran dinámicamente desde un servidor web de terceros. Estos fragmentos de código se pueden copiar desde distintos proveedores de servicios web, como Google, Yahoo!, YouTube y muchos otros, y después pegarse según convenga en las páginas de Muse. En esta sección podrá ver dos ejemplos distintos de HTML y la forma de añadir rápidamente contenido de medios sociales, así como un mapa interactivo de Google, en un sitio web creado en Muse.
Para empezar, termine con el contenido de la página principal. Si ha seguido todos los pasos, la página principal ya podría estar abierta en la vista Diseño. Si no es así, haga doble clic en la miniatura de la página principal en la vista Plan para abrirla y editarla en la vista Diseño. Deberá añadir el código HTML incrustado encima de la proyección de diapositivas que añadió anteriormente a la página principal.
Puede configurar una cuenta gratuita con muchos servicios diferentes de Internet, incluido Twitter, que le permitirá publicar mensajes que aparezcan en su página web. Sin embargo, además de mostrar la información en Twitter.com, puede utilizar su cuenta para iniciar sesión, copiar el código incorporado y mostrar los mismos mensajes en un sitio web de su creación.
En este ejemplo, se ha configurado una cuenta ficticia para Kevin's Koffee Kart. Esto implica iniciar sesión en Twitter como usuario nuevo y completar el formulario de registro. Después de eso, puede utilizar la interfaz del sitio para publicar mensajes y copiar el código incorporado que permita visualizarlos en cualquier otro lugar en la red. Este es el mismo proceso que va a utilizar para compartir contenido de vídeo, blogs, canales RSS, información de valores bursátiles, pronósticos del tiempo, resultados de partidos y muchos otros tipos de datos dinámicos. Si va a crear un sitio para un cliente, pregúntele si ya usa estos servicios que ayudan a compartir información con los clientes. En muchos casos, puede utilizar su información de cuenta para iniciar sesión y, después, obtener el código de incorporación de los datos que quiere mostrar.
Para evitar que tenga que iniciar sesión en Twitter y crear su propia cuenta de usuario, a continuación se ofrece el código de incrustación copiado de Twitter para la cuenta de Kevin's Koffee Kart:
<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>
<div id="twitFeed">Optional Placeholder Text</div>
<script type="text/javascript">twitter2id("twitFeed");</script>
Copie el código mostrado anteriormente.
Vuelva a Muse. En muchos casos, basta con hacer clic en la ubicación deseada en la página, hacer clic con el botón derecho del ratón y elegir Pegar en el menú contextual. Como alternativa, puede usar los métodos abreviados de teclado (Comando-V para Mac o Control-V para Windows) y Muse reconocerá que el texto que está pegando es código fuente y no contenido de texto normal.
En las raras ocasiones en las que el código no se reconoce como HTML, puede seleccionar Objeto > Insertar HTML para abrir la ventana Código HTML. En tal caso, simplemente pegue el código fuente que ha copiado en la ventana y haga clic en OK para cerrar la ventana e incrustar el código.
Después de incrustar el código fuente (que básicamente crea una ventana en la página del sitio para mostrar el contenido vinculado desde un sitio web de terceros), es posible que no aparezca exactamente como le gustaría en la página. Se muestra la visualización predeterminada del contenido HTML incrustado de Twitter.
Aumente el tamaño del área de texto del canal de Twitter haciendo clic en los manejadores que rodean el HTML incrustado y expándalos para rellenar la mayoría de la anchura de la página y aproximadamente un tercio de la altura.
Esto permite que el texto aparezca en un espacio mucho más grande aunque, de momento, el texto tenga todavía el tamaño predeterminado.
A continuación, deberá actualizar el código en la ventana Código HTML para añadir algunos estilos CSS que definirán cómo aparecerá el texto dinámico. Esta operación no afectará al modo en que aparecen los mensajes publicados en Twitter.com, pero cambiará el formato del texto en su sitio.
Copie el siguiente código de estilos CSS:
<style type="text/css">
#twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }
a:link, a:hover { font-size: 14; color: white; text-decoration: none }
</style>
Tómese un momento para familiarizarse con el código anterior y tenga en cuenta que los estilos se ciñen a una etiqueta de apertura que especifica qué es el código () y, después, a una etiqueta de cierre que permite saber a los navegadores que se han completado las reglas CSS de estilo (). Cada vez que aplique estilo a su propio código HTML incrustado, utilizará estas etiquetas como corchetes alrededor de los estilos que desee aplicar. En este caso, el sitio web de Twitter aloja los posts y emplea un selector CSS de ID llamado #twitFeed para controlar cómo aparece el texto en su sitio. Así, el código anterior es básicamente el uso de ese nombre de estilo (obtenido del sitio de Twitter) y, luego, la adición de algunas reglas que definan la forma en que aparece el texto en su sitio, anulando los estilos aplicados por Twitter.com. Para obtener más información sobre la aplicación de formato al contenido de texto, visite el sitio web de W3C Schools.
Haga clic con el botón derecho del ratón en la ventana de código HTML incrustado y seleccione HTML en el menú contextual. Se abrirá la ventana de código HTML para que pueda ver el código fuente que pegó anteriormente. En cualquier momento durante la edición de un sitio, puede abrir esta ventana y actualizar el contenido de código fuente HTML. Haga clic por encima del código HTML que previamente había incorporado, en la parte superior de la ventana. Pegue el nuevo código de estilo que ha copiado en el paso 5.
Haga clic en OK para cerrar la ventana de HTML. Después de realizar este cambio en el estilo del texto de Twitter, el mensaje que está vinculado desde el sitio de Twitter aparece ahora en texto de color blanco y es mucho más grande, encima de la proyección de diapositivas de la página principal.
La página principal está casi completa. Solo queda un último elemento que agregar a la página.
Seleccione Archivo > Colocar. En el cuadro de diálogo Importar, busque y seleccione el archivo denominado DailyDrip.png en la carpeta Kevins_Koffee_Kart. Haga clic en Seleccionar.
Después de colocar la imagen en la página principal, utilice la herramienta Selección para colocar la imagen en el lado izquierdo cerca de la parte superior de la proyección de diapositivas, de forma que se superponga parcialmente encima de la proyección de diapositivas.
Haga clic en Previsualizar para ver la animación de la proyección de diapositivas y apreciar cómo aparece debajo de las imágenes de gota marrón y Daily Drip.
Cuando haya terminado de revisar la página principal, haga clic en el vínculo Plan para volver a la vista Plan.
A continuación, deberá añadir un tipo diferente de HTML incrustado a la página KART MAP.
Haga doble clic en la miniatura de KART MAP para abrir la página en la vista Diseño y comenzar a editarla.
Utilice la herramienta Texto para arrastrar un marco de texto en la página KART MAP, cerca de la parte superior del contenido de la página, justo debajo del encabezado.
Escriba la siguiente línea: ¿Busca el Koffee Kart? Haga clic aquí para obtener actualizaciones de ubicación en tiempo real a lo largo del día.
Con el texto seleccionado, abra el panel Estilos de párrafo. Haga clic en el estilo llamado Georgia Body Medium para aplicar el estilo de párrafo al texto del encabezado de la página de KART MAP.
En esta sección, podrá añadir contenido a la página KART MAP añadiendo HTML incrustado que carga un mapa generado por Google Maps. Es solo otro pequeño ejemplo de las posibilidades de uso de HTML incrustado en su sitio. Se puede incorporar contenido de muchos otros sitios de terceros como, por ejemplo, YouTube, Flickr o Picasa, así como formularios, blogs y otras funciones complejas de sitio que se pueden controlar accediendo a la cuenta y enviando contenido a los sitios correspondientes.
Abra una nueva ventana del navegador y visite Google Maps.
Escriba una dirección o término de búsqueda, como Adobe SF, para buscar una ubicación real que se usará para crear el mapa.
Haga clic en el botón de vínculo que aparece en la parte superior derecha de la interfaz y, a continuación, haga clic en la opción para personalizar y previsualizar el mapa incrustado.
En la ventana de personalización que aparece, defina el tamaño del mapa personalizado con una anchura de 850 y una altura de 470. Cambie la posición del mapa en la ventana para asegurarse de que el texto de la dirección es totalmente visible.
Copie el código HTML resultante de la ventana de Google. O, si prefiere no generar su propio código de mapa de Google, puede copiar simplemente el código fuente que aparece a continuación:
<!-- Google Public Location Badge -->
<iframe src="http://www.google.com/latitude/apps/badge/api?user=3988005937557250144&type=iframe&maptype=roadmap" width="872
" height="600" frameborder="0"></iframe>
<!-- To disable location sharing, you *must* visit https://www.google.com/latitude/apps/badge and disable the Google Public Location badge. Removing this code snippet is not enough! -->
Vuelva a Muse. Haga clic con el botón derecho del ratón en la página y seleccione Pegar para colocar el código. También puede seleccionar Objeto > Insertar HTML para abrir la ventana de Código HTML, o bien, utilizar el atajo de teclado estándar para pegar el código (Comando-V para Mac o Control-V para Windows).
Utilice la herramienta Selección para establecer la posición del mapa en el lado izquierdo de la página.
Haga clic en Previsualización para ver cómo aparecerá el mapa de Google Maps para los visitantes en el sitio activo. Haga clic en los botones de navegación del mapa y observe que es completamente interactivo y es posible acercarse o moverse alrededor del mapa dentro de la ventana incorporada.
Además de utilizar HTML incrustado para insertar código que ha pegado desde un sitio web de terceros, también puede usar el mismo método para incrustar toda una página web en un iframe. Por ejemplo, puede escribir un fragmento de código como este:
<iframe title="Un título para este contenido" src="http://aquisuurl.com" width="900" height="500" style="border: 0;"></iframe>
En el código anterior, sustituya el texto de title="" and url="" por el título y dirección URL de la página web externa deseada. También puede personalizar los valores de anchura y altura de la ventana del iframe para que se adapten al diseño de su sitio.
Opcionalmente, puede añadir un atributo que garantice que el iframe no mostrará una barra de desplazamiento al añadir este código a la etiqueta iframe de apertura:
scrolling="no"
Al seleccionar Objeto > Insertar HTML, puede abrir una nueva ventana de Código HTML e incrustar un iframe en cualquier parte del sitio y, a continuación, definir cualquier dirección URL (dirección del sitio, como www.google.com) para mostrar un sitio que esté activo en Internet en su interior.
También puede utilizar un iframe para incrustar animación, como las animaciones HTML5 creadas en Adobe Edge. Busque el nombre del archivo HTML creado por Adobe Edge y utilice ese nombre de archivo en el atributo URL del iframe:
<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">
</iframe>
A continuación, deberá cargar el archivo HTML de Adobe Edge (y archivos dependientes) en un mismo servidor host, junto con los archivos del sitio Muse. Si va a exportar su sitio a FTP, puede copiar el archivo HTML en la carpeta generada por Muse durante el proceso de exportación. Si publica directamente en los servidores de alojamiento de Adobe Business Catalyst® haciendo clic en el vínculo Publicar de Muse, puede utilizar el software Adobe Dreamweaver® o cualquier cliente FTP para cargar los archivos. Para obtener más información sobre cómo cargar archivos por FTP a los servidores de alojamiento de Business Catalyst, consulte Publicación de sitios web.
Si utiliza algunas reglas de CSS estándar, podrá aplicar formato a los elementos del formulario de contacto que creó en la interfaz de la consola de administración de Business Catalyst. Puede ajustar el aspecto que tendrá el formulario y sus elementos, de modo que se adapten al diseño de la página.
Después de pegar el código fuente del formulario desde la consola de administración a la página en Muse, aparecerá el formulario con sus estilos predeterminados.
Al igual que cualquier otro elemento, se pueden utilizar los controles laterales para cambiar las dimensiones del formulario y moverlo en la página a la ubicación deseada.
Haga clic con el botón derecho del ratón (o pulse la tecla Control y haga clic) en el formulario y elija HTML en la lista que aparece.
Aparece la ventana de código HTML. Esta muestra el código que ha pegado desde la consola de administración en la página. Sitúe el cursor en la parte superior, antes de la primera línea de código, y pulse Intro (Windows) o Retorno (Mac) unas cuantas veces para bajar el código del formulario y dejar algo de espacio para agregar los estilos.
Esta área encima del código del formulario es donde se pueden pegar o escribir las reglas CSS que afectan a la apariencia de los elementos del formulario.
Para ver cómo funciona, copie el código que aparece debajo:
<style type="text/css">
input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }
input.cat_textbox { height: 16px; }
input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }
.form label, .webform label { font: 14px Georgia, Times, serif; }
table.webform td { padding: 0; }
</style>
Pegue el código en la parte superior de la ventana de HTML, encima del formulario.
Haga clic en OK para cerrar la ventana de código HTML. Observe que la apariencia del formulario se ha actualizado con el nuevo formato. Haga clic en Vista previa o elija Archivo > Vista previa de página en navegador para ver cómo se verá en el sitio publicado.
Puede utilizar esta misma estrategia para controlar muchos de los distintos elementos del formulario que se incluyen al agregar el código del formulario de contacto que copió de Business Catalyst.
Dedique unos minutos a revisar el código que pegó en la parte superior de la ventana. Fíjese en las dos etiquetas de estilo, en la parte superior e inferior de las reglas CSS que las rodean. Esto es importante: sin las etiquetas de apertura y cierre de estilo, las reglas CSS no funcionan. A continuación puede encontrar las dos etiquetas de estilo:
<style type="text/css">
</style>
Estas etiquetas de apertura y cierre de estilo le dicen al navegador que el código de su interior contiene reglas de formato de código CSS. Asegúrese siempre de que estas etiquetas estén en la parte superior de la ventana antes de pegar las reglas CSS dentro.
Si desea realizar cambios en los elementos del formulario para actualizar su apariencia, realice una llamada a la "clase" (que es el nombre asignado a los distintos elementos del formulario), especificando la propiedad que desea actualizar y, a continuación, defina sus atributos.
Tenga en cuenta la siguiente línea de código:
input.textarea {
background-color: #fff;
}
La palabra input.textarea es el nombre asignado a un tipo de campo de texto (su "clase"). A continuación, la siguiente línea realiza la llamada a la propiedad que desea cambiar. En este caso background-color se refiere al color del fondo del campo de texto. Después de los dos puntos, #fff es un atajo en el código CSS para escribir #ffffff (que es el valor hexadecimal de color que especifica el color blanco).
En lenguaje normal, la regla anterior dice: defina el color de fondo de este tipo de campo de texto en blanco.
Para actualizar el formulario, también puede asignarle el color de fondo de un campo de texto a un valor común de color web: rojo. El código siguiente define el color de fondo de ese tipo de campo de texto en rojo:
input.textarea {
background-color: red;
}
Las reglas CSS se escriben con su idioma propio. Igual que ocurre cuando se aprende un nuevo idioma, se necesita algo de práctica para hablarlo con fluidez. Para obtener más información sobre la sintaxis (la gramática utilizada para escribir estas reglas), lea los excelentes tutoriales y guías de referencia de CSS que ofrece en línea de forma gratuita W3Schools.
Una vez listo para comenzar a editar sus propios formularios de contacto, puede utilizar la lista que sigue para identificar el nombre de la clase y las propiedades asociadas que se pueden ajustar para cada elemento del formulario.
Recuerde siempre rodear su lista de reglas CSS con las etiquetas de apertura y cierre de estilo, ya que de lo contrario el navegador (y la vista Diseño) no puede interpretar las reglas:
<style type="text/css">
</style>
Eliminación de los elementos predeterminados de la parte superior del formulario de contacto
De forma predeterminada, cuando se pega el formulario en la página se comenzará con los dos elementos siguientes.
Si desea eliminar uno o ambos elementos, abra la ventana HTML y mire el código fuente que pegó (directamente debajo de la etiqueta de estilos CSS que puede haber agregado).
Para eliminar la línea *Obligatorio, encuentre esta línea de código y bórrela:
<span class="req">*</span> Required
Para eliminar la etiqueta y el menú Título, encuentre estas líneas de código y bórrelas:
<td><label for="Title">Title</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>
Tenga cuidado al editar el código HTML de no eliminar accidentalmente ninguna etiqueta que no sean las líneas anteriormente indicadas. Incluso la eliminación de un único carácter extra, como este >, podría estropear el formulario. Si esto ocurre, puede volver a la consola de administración y copiar el código para pegarlo de nuevo en la página, sustituyendo el código que editó.
Lista de clases y propiedades para añadir reglas CSS y aplicar formato a los formularios de contacto
Cuando asigne valores de color, obtendrá una variedad de colores mucho mayor utilizando una herramienta en línea, como, por ejemplo, kuler, o un programa de edición de imágenes (Photoshop o Fireworks), para crear valores hexadecimales de color. Los valores hexadecimales de color siempre comienzan con el símbolo #, seguido por una combinación de 3 o 6 caracteres alfanuméricos (entre 0-9 y A-F).
Puede resultarle más fácil utilizar la herramienta Cuentagotas de Muse para seleccionar los colores de su diseño previo. Puede copiar los valores hexadecimales de color desde el campo en el Selector de color y pegarlos en el código. Sin embargo, los 16 colores web siguientes se pueden especificar por su nombre. Su uso puede resultar de mucha utilidad cuando se desea probar una regla:
agua, negro, azul, fucsia, gris, verde, verde lima, rojo oscuro, azul marino, verde oliva, púrpura, rojo, plata, verde azulado, blanco y amarillo
Al especificar los colores por el nombre, no incluya el símbolo # antes del color.
La siguiente lista no es exhaustiva, ya que hay muchas combinaciones diferentes (y muchas otras propiedades que puede utilizar) que afectan a los elementos. Utilice estas sugerencias para comenzar. Haga doble clic para seleccionar un fragmento de código, luego cópielo en su portapapeles.
Para leer más sugerencias sobre el uso de Muse, visite la página Ayuda y tutoriales de Muse; o bien la página de Muse Events (Eventos de Muse), donde encontrará diversos seminarios web, tanto en directo como grabados.
Inicia sesión en tu cuenta