Puedes crear formularios a través del menú Insertar, opción Formulario.
Una vez creado un formulario, este aparecerá en la ventana de Dreamweaver como un recuadro formado por líneas rojas discontinuas, similar al de la imagen de la derecha.
Dentro de dicho formulario se podrán insertar los elementos de formulario, que como ya sabes puedes insertar a través del menú Insertar, opción Formulario.
Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribución de los elementos del formulario, lo que facilita su comprensión y mejora su apariencia.
Validar formularios
La validación de formularios sirve para hacer que Javascript valide el formulario antes de que se envíe el formulario, para que en el caso de que hayan campos del formulario que sean obligatorios, tengan que rellenarse antes de poder enviarse.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a través del menú Ventana, opción Comportamientos, o pulsando Mayús+F3.
En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir una versión de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0.
Después de esto, hay que volver a desplegar el botón , y pulsar sobre la opción Validar formulario, deberás haber seleccionado el formulario previamente.
Entonces se mostrará una ventana como la siguiente, donde aparecen todos los elementos del formulario.
Puede seleccionarse uno por uno cada elemento del formulario, pudiendo especificar los requisitos que ha de cumplir.
Puede establecerse como campo a rellenar obligatoriamente (Valor Obligatorio), y si su contenido ha de ser numérico (Número), una Dirección de correo electrónico, etc.
Ejercicio
Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.
Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos.
Selecciona el sitio Cocina en el panel Archivos.
Haz doble clic sobre el documento tureceta.htm, que aparece en el panel Archivos.
Se abrirá el documento en Dreamweaver.
Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades.
Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus propiedades más avanzadas.
No es necesario insertar el formulario, ya está creado. Dentro de él hay dos tablas. Sitúa el cursor dentro de la última celda de la primera fila de la primera tabla. Observa que le hemos definido un estilo, como a cualquier otro elemento.
Abre el panel Insertar. Si no lo encuentras, puedes acceder a él desde el menú Ventanas.
Elige la opción Formularios. Conviene que tengas el panel siempre visible, ya que insertaremos varios elementos.
Pulsa sobre Campo de texto en el panel Insertar.
Se abrirá un cuadro de diálogo. En ID introduce el nombre que le daremos, en este caso nombre. En Etiqueta marca No hay etiqueta de rótulo, pues ya tenemos los textos insertados. Pulsa Aceptar. (Si no te ha aparecido este diálogo, introduce el nombre desde el inspector de propiedades).
Haz clic sobre el campo de texto para seleccionarlo.
En Campo de texto, del inspector de propiedades, veras el nombre. Si lo habías introducido antes, puedes hacerlo.
En Cars máx escribe 50 para limitar el número máximo de caracteres.
En Tipo estará seleccionado Una línea.
Sitúa el cursor dentro de la última celda de la segunda fila de la primera tabla.
Repite los pasos del 10 al 15, pero con las siguientes diferencias:
En Campo de texto escribe email.
En Cars máx escribe 40.
Sitúa el cursor dentro de la segunda celda de la primera fila de la segunda tabla.
Repite los pasos del 9 al 15, pero con las siguientes diferencias:
En Campo de texto escribe receta.
En Cars máx escribe 25.
Sitúa el cursor dentro de la segunda celda de la segunda fila de la segunda tabla.
Elige la opción Seleccionar (Lista/menú) en el panel Insertar.
En el cuadro de diálogo, introduce tipo en el campo ID.
Haz clic sobre el objeto de lista/menú para seleccionarlo.
En Tipo selecciona Menú.
Haz clic sobre el botón Valores de lista.
Escribe Plato en Etiqueta de elemento.
Pulsa sobre el botón para insertar nuevos elementos en la lista. Añade la etiqueta Postre.
Haz clic sobre el botón Aceptar.
Selecciona Plato en Seleccionado inicialmente.
Sitúa el cursor dentro de la primera celda de la cuarta fila de la segunda tabla.
Pulsa en la opción Área de texto en el panel Insertar.
Se abrirá un cuadro de diálogo. Escribe como ID ingredientes y pulsa Aceptar.
Haz clic sobre el área de texto para seleccionarlo.
En Tipo selecciona Varías líneas.
En Ancho car escribe 30.
En Líneas núm escribe 5.
Sitúa el cursor en la celda que hay debajo de la que pone Preparación:.
Repite los pasos del 35 al 40, pero con las siguientes diferencias:
En ID escribe preparacion.
En Ancho car escribe 20.
En Líneas núm escribe 8.
Sitúa el cursor en la última celda de la segunda tabla.
Elige la opción Botón en el panel Insertar.
En el diálogo, deja los campos en blanco y pulsa Aceptar. No es necesario establecer el nombre porque los botones no contienen datos.
Sitúa el cursor a la derecha del botón.
Repite los pasos 47 y 48 para insertar otro botón.
Selecciona el nuevo botón.
En Acción selecciona Restablecer formulario.
En Valor, escribe Borrar.
Con la tecla Ctrl selecciona la celda que contiene los botones, y en desplegable Horiz. elige Centro.
Para que el formulario tenga sentido, hemos de enviar los datos a una página capaz de tratarlos. Selecciona todo el formulario, y en el campo Acción copia la siguiente dirección: http://www.aulaclic.es/dreamweaver-cs4/ejemplos/sitios/cocina/recibirreceta.php
En el campo Destino elige _blank para que se abra en una ventana nueva.
Haz clic sobre el botón Guardar de la barra de herramientas.
Ahora puedes probar el funcionamiento de los elementos del formulario, abre el documento en tu navegador o en la Vista en vivo y rellena los campos. Si pulsas en Enviar, se enviarán los datos a la página indicada en el campo acción.
Vemos cómo asignar estilos a enlaces de la página de una manera potente, para hacer interesantes barras de navegación.
En este artículo vamos a ver cómo podríamos crear una barra de navegación bastante dinámica utilizando únicamente las Hojas de Estilo en Cascada. En el ejemplo vamos a construir una barra de navegación que contiene enlaces de varios colores que cambian de tonalidad al pasar el ratón por encima.
Ya lo vimos en capítulos anteriores de nuestro manual de CSS, pero lo repetimos aquí. Se define el estilo de los enlaces asignando su apariencia en sus distintos estados:
Enlace no visitado. Se define con el atributo link.
Enlace visitado. Se define con el atributo visited.
Enlace activo (cuando se está pulsando). Se define con active.
Enlace con el reton encima. Se define con hover.
Esta definición se realiza en la cabecera de la página, entre las etiquetas , y es global a toda la página.
Un ejemplo de esto se puede ver en esta declaración de estilos:
Cómo dar estilo a un enlace en concreto
Si queremos resaltar nuestra barra de navegación probablemente querramos colocarla en una tabla de nuestra página web, con un color que contraste un poco con el fondo. En un caso como este, será necesario que los enlaces de la barra de navegación y los enlaces normales de la página tengan colores distintos, por estar situados sobre dos tipos de fondos distintos.
Es por esto que los enlaces de la barra van a tener un color distinto de los definidos en la cabecera de la página, con los estilos. Esto lo podemos conseguir de esta manera.
Hemos definido el color de un enlace de una manera específica, utilizando el atributo style, de modo que este enlace siempre tendrá el color indicado, independientemente de su estado.
Es un enlace amarillo, que quedaría muy bien resaltado sobre un fondo oscuro, como se puede ver en el ejemplo de barra de navegación siguiente.
En la tabla anterior tenemos enlaces amarillos en una web donde los enlaces son azules por defecto.
Cómo utilizar las clases al aplicar estilo a los enlaces
También vimos en anteriores capítulos que el uso de clases puede ser muy útil a la hora de definir estilos especiales que podemos aplicar a las etiquetas que queramos. A la hora de trabajar con los enlaces también podemos aplicar las clases para definir distintos tipos de enlaces, que tienen distintos tipos de estilos.
La ventaja al utilizar las clases con los estilos de los enlaces es que podemos especificar un formato distinto al enlace dependiendo de su estado: visitado o no, activo o con el ratón sobre él.
Por si no quedó claro, al especificar el estilo con el atributo style del enlace sólo podíamos decir que el enlace lo queremos en amarillo, y siempre lo tendremos en amarillo (sea visitado o no, activo, o estemos o no con el ratón encima). Con las clases definimos un nuevo tipo de enlace al que podemos dar distintos formatos dependiendo su estado.
Otras ventajas de utilizar las clases consisten en que escribimos una única vez los estilos y que podemos cambiar el color de todos los enlaces de la clase con cambiar la delaración.
A partir de lo que acabamos de aprender podemos crear el ejemplo de barra de navegación dinámica utilizando CSS que habíamos visto al principio del capítulo. El código sería el siguiente.
Quiero agradecer la ayuda prestada para la elaboración de este artículo a Rafael Chacón, que nos mandó un generoso mail con el truquillo que hemos expuesto aquí.
Este breve tutorial está pensado para aquellas personas que quieren comenzar a utilizar CSS y nunca han escrito una hoja de estilos CSS.
No explica mucho sobre CSS. Se centra en cómo crear un archivo HTML, un archivo CSS y cómo hacer que los dos funcionen juntos. Una vez finalizado este tutorial, podréis leer cualquiera de los otros tutoriales para darle más estilo a los archivos HTML y CSS. También podréis utilizar un editor de HTML o CSS, para desarrollar sitios Web más avanzados.
Al final del tutorial habrás hecho un archivo HTML como éste:
El resultado será una página HTML, con colores y formato, todo desarrollado con CSS.
Ten en cuenta que no quiero decir que sea bonita ☺
Las secciones como ésta son opcionales. Contienen explicaciones adicionales del código HTML y CSS del ejemplo. El símbolo de “peligro”, situado al principio, indica que se trata de un material más avanzado que el resto.
PASO 1: ESCRIBIR EL CÓDIGO HTML
Para este tutorial, te sugiero que utilices las herramientas más sencillas. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, serán suficiente. Una vez comprendido lo básico, probablemente se quieran utilizar herramientas más complicadas, o incluso programas comerciales como Style Master, Dreamweaver o GoLive. Pero para el desarrollo de una primera hoja de estilos, es mejor no distraerse con características avanzadas de otras herramientas.
No utilices procesadores de texto como Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que los navegadores no pueden interpretar. Para HTML y CSS, lo único que necesitamos son archivos en texto plano.
El paso 1 consiste en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), comenzar con una ventana vacía y escribir lo siguiente:
¡Bienvenido a mi primera página con estilo!
No tiene imágenes, pero tiene estilo.
También tiene enlaces, aunque no te lleven a
ningún sitio…
Debería haber más cosas aquí, pero todavía no sé
qué poner.
Creada el 5 de abril de 2004
por mí mismo.
En realidad, no es necesario escribir el código: puedes copiarlo y pegarlo directamente en un editor.
La primera línea que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE significa DOCument TYPE - en español: TIPO de DOCumento). En este caso, se trata de la versión 4.01 de HTML.
Las palabras que se encuentran entre < y > se llaman etiquetas (tags) y, como puedes ver, el documento está entre las etiquetas y . Entre y hay espacio para diferentes tipos de información que no aparecerán en la pantalla. Hasta ahora, el documento sólo contiene el título pero posteriormente también se añadirá la hoja de estilos de CSS.
El es dónde se sitúa el texto del documento. En un principio, cualquier cosa que se coloque ahí será mostrado, excepto el texto que esté dentro de las siguientes etiquetas , las cuales muestran el contenido situado en ese lugar como un comentario de referencia para nosotros mismos. El navegador la ignorará.
De las etiquetas del ejemplo,
crea una “lista desordenada”, es decir, una lista en la cual los elementos no están numerados. La etiqueta
Si quieres saber lo que significan los nombres que están entre <…>, un buen sitio para empezar es Comenzando con HTML. Realizaré algunos comentarios sobre la estructura de la página HTML que estamos utilizando de ejemplo.
“ul” representa una lista con un hipervínculo por cada elemento. Esto mostrará nuestro “menú de navegación del sitio” con enlaces a otras páginas (ficticias) del sitio Web. Supuestamente, todas las páginas de nuestro sitio Web tienen un menú similar.
Los elementos “h1” y “p” componen el único contenido de esta página, mientras que la firma al final (“address”) será la misma para todas las páginas del sitio.
Observa que no he cerrado los elementos "li" y "p". En HTML (pero no en XHTML), se pueden omitir las etiquetas
y , que fue lo que hice aquí, precisamente para hacer el texto más sencillo de leer. Pero si se prefiere pueden ser añadidas.
Vamos a suponer que va a ser una página de un sitio Web que tendrán varias páginas similares. Como es frecuente en páginas Web, ésta tiene un menú con enlaces a otras páginas en el sitio ficticio, un contenido único y una firma.
Ahora, selecciona “Guardar como…” del menú Archivo, ve hasta un directorio/carpeta donde quieras guardar el documento (el escritorio puede ser una opción) y guarda el archivo como “mipagina.html”. No cierres todavía el editor, lo necesitarás otra vez.
Después, abre el archivo en un navegador de la siguiente forma: encuentra el archivo con tu administrador de archivos (Windows Explorer, Finder o Firefox) y haz clic, o doble clic, sobre el archivo “mipagina.html”. El archivo HTML debería abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y arrastra el archivo sobre él).
Como puedes ver, la página tiene un aspecto bastante aburrido...
PASO 2: AÑADIR ALGUNOS COLORES
Probablemente estés viendo texto negro sobre un fondo blando, pero esto depende de cómo esté tu navegador configurado. Para que la página tenga algo más de encanto podemos añadir algunos colores. (Deja el navegador abierto, lo utilizaremos más tarde).
Comenzaremos con una hoja de estilo interna en el archivo HTML. Más adelante, pondremos el HTML y el CSS en archivos diferentes. La separación de estos archivos es recomendable ya que facilita la utilización de la misma hoja de estilo para diferentes archivos HTML: sólo tienes que escribir la hoja de estilo una vez. Pero en este paso, vamos a dejarlo todo en el mismo archivo.
Necesitamos añadir un elemento
[etc.]
Las líneas que tienes que añadir están marcadas en rojo. La primera línea dice que eso es una hoja de estilo y que está escrita en CSS ("text/css"). La segunda línea indica que hemos añadido estilo al elemento "body". La tercera línea establece el color del texto como morado y la siguiente línea lo que hace es darle al fondo una especie de amarillo verdoso.
Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:
el selector (en el ejemplo sería: “body”), el cual le dice al navegador la parte del documento que se verá afectada por la regla;
la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qué aspecto del diseño va a cambiarse;
y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.
El ejemplo muestra que es posible combinar las reglas. Hemos establecido dos propiedades, por lo que podemos tener dos reglas separadas:
body { color: purple }
body { background-color: #d8da3d }
ya que las dos reglas van a afectar al elemento body, sólo tenemos que escribir "body" una vez, y poner juntas las propiedades y valores. Para obtener más información sobre selectores, revisa el capítulo 2 de Lie & Bos.
El fondo del elemento body será el fondo para todo el documento. A los otros elementos (p, li, address…) no se les ha dado ningún fondo en concreto, por lo que de forma predeterminada no tendrán ninguno (o serán transparentes). La propiedad 'color' establece el color del texto que se encuentra en el elemento body, pero los otros elementos que se encuentran dentro de body heredarán ese color, a no ser que se especifique lo contrario. (Más adelante añadiremos más colores).
Ahora guarda el archivo (utiliza “Guardar” del menú Archivo) y vuelve a la ventana del navegador. Si haces clic en "Actualizar", la página "aburrida" que se mostraba al principio, pasará a ser una página con colores (pero aún sigue siendo muy aburrida). Aparte de la lista de enlaces que se encuentra al principio, el texto debería tener ahora el color morado sobre un fondo de color amarillo verdoso.
Presentación de la página en el navegador tras añadirle colores.
Los colores pueden especificarse en la CSS de formas diferentes. El siguiente ejemplo muestra dos de ellas: por el nombre (“purple”) y por el código hexadecimal (“#d8da3d”). Hay aproximadamente 140 nombres de colores y más de 16 millones de colores disponibles en código hexadecimal. Agregar un toque de estilo, ofrece más información sobre esos códigos.
PASO 3: AÑADIR TIPO DE LETRA
Otra cosa que es muy fácil de hacer es añadir diferentes tipos de letra para los diversos elementos de la página. Veamos el texto con el tipo de letra “Georgia”, excepto la cabecera h1, que irá con “Helvetica”.
En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible, Times New Roman o Times también pueden valer, y si ninguna de esas está presente, el navegador puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no está, Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el navegador puede escoge cualquier otro tipo de letra que no sea serif.
Añade en el editor de texto las siguientes líneas:
Mi primera página con estilo
[etc.]
Si guardas otra vez el archivo y haces clic en "Actualizar" en el navegador, deberían aparecer tipos de letra diferentes para el encabezado y para el otro texto.
Ahora el texto tiene un tipo de letra diferente al del encabezado.
PASO 4: AÑADIR UNA BARRA DE NAVEGACIÓN
La lista que aparece al principio de la página HTML será más adelante un menú de navegación. Algunos sitios Web tienen un menú al principio o en un lado de la página, y éste debería tenerlo también. Pondremos uno a la izquierda, ya que es más interesante ponerlo ahí que arriba…
El menú ya está en la página HTML. Es la lista
que se encuentra al principio. Los enlaces que tiene no funcionan ya que nuestro "sitio Web", hasta el momento, sólo tiene una página, pero eso no es importante ahora. Por supuesto, en un sitio Web real no debería haber ningún enlace roto.
Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco más hacia la derecha, para dejar espacio para el menú. Las propiedades de CSS que vamos a utilizar son 'padding-left' (para mover el texto del elemento body) y 'position' (para mover el menú).
Hay otras formas de hacerlo. Si buscas “column” y “layout” en la página Aprender CSS, encontrarás algunas plantillas listas para ser utilizadas. Pero, por el momento, ésta está bien.
En la ventana del editor, añade las siguientes líneas al archivo HTML:
Mi primera página con estilo
[etc.]
Si guardas otra vez el archivo y lo actualizas en el navegador, deberías tener la lista de enlaces a la izquierda del texto principal. Ahora el resultado parece mucho más interesante ¿verdad?
El texto principal se ha movido hacia la derecha y la lista de enlaces está ahora a la izquierda en lugar de estar arriba.
'position: absolute' indica que el elemento ul está situado independientemente de cualquier texto que esté antes o después en el documento. 'left' y 'top' indican cuál es la posición. En este caso, está a 2em de la parte de arriba de la ventana y a 1em del lado izquierdo.
'2em' significa 2 veces el tamaño del tipo de letra actual. Por ejemplo, si el menú se muestra con un tipo de letra de 12 puntos, entonces '2em' es 24 puntos. 'em' es una unidad muy útil en CSS ya que se puede adaptar automáticamente al tipo de letra que el usuario esté utilizando. La mayoría de los navegadores tienen un menú para aumentar o disminuir el tamaño de letra: puedes probarlo y ver la forma en la que el menú aumenta de tamaño a la vez que lo hace el tipo de letra, lo que no ocurriría si hubiéramos utilizado un tamaño en píxeles.
PASO 5: DAR ESTILO A LOS ENLACES
El menú de navegación todavía parece una lista en lugar de un menú. Vamos a cambiar su aspecto. Quitaremos los puntos que indican los diferentes elementos de la lista y moveremos los elementos a la izquierda, donde estaban antes los puntos. También le daremos a cada elemento un fondo blanco y un cuadrado negro. (¿Por qué? Por nada en particular, sólo porque podemos hacerlo).
No hemos especificado el color de los enlaces, vamos a añadirlo también: utilizaremos el azul para aquellos enlaces que el usuario no ha visitado todavía, y morado para los enlaces que ya ha visitado:
Mi primera página con estilo
[etc.]
Normalmente, los navegadores muestran los hipervínculos subrayados y con color. Los colores son parecidos a los que especificamos aquí: azul para enlaces a páginas que no has visitado todavía (o visitaste hace mucho tiempo), morado para páginas que ya has visitado.
El último elemento a añadir en la hoja de estilo es una regla horizontal para separar el texto de la firma que se encuentra al final. Utilizaremos 'border-top' para añadir una línea punteada encima del elemento
:
Mi primera página con estilo
[etc.]
Ahora, ya hemos terminado de darle estilo a la página. Lo siguiente es ver cómo se pone la hoja de estilo en un archivo diferente para que de esta forma otras páginas puedan utilizar el mismo estilo.
PASO 7: PONER LA HOJA DE ESTILO EN UN ARCHIVO SEPARADO
Ahora tenemos un archivo HTML con una hoja de estilo en su interior. Pero si nuestro sitio crece desearemos añadir más páginas que compartan el mismo estilo. Hay un método más adecuado que copiar la hoja de estilo dentro de cada página y que es: colocar la hoja de estilo en un archivo separado, haciendo que todas las páginas estén enlazadas a esa hoja.
Para separar la hoja de estilo del archivo HTML, necesitamos crear otro archivo de texto, que esté vacío. Puedes escoger "Nuevo" del menú Archivo del editor para crear una ventana vacía.
Después, corta y pega en la nueva ventana todo lo que hay dentro del elemento . Éstas pertenecen a HTML, no a CSS. En la nueva ventana del editor, deberías tener la hoja de estilo completa:
Elige “Guardar como…” del menú Archivo, comprueba que está en el mismo directorio/carpeta que el archivo mipagina.html, y guarda la hoja de estilo como “miestilo.css”.
Vuelve a la ventana que muestra el código HTML. Borra todo lo que hay desde la etiqueta , ambas inclusive, y reemplázalo por un elemento de la siguiente forma:
Mi primera página con estilo
[etc.]
De esta forma, se le indicará al navegador que la hoja de estilo se encuentra en el archivo llamado "miestilo.css". Al no especificarse ningún directorio, el navegador mirará en el mismo directorio en el que se encuentra el archivo HTML.
Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberías apreciar ningún cambio en el aspecto de la página. Ésta sigue guardando el mismo estilo, pero ahora viene establecido por el archivo externo.
Resultado final
El siguiente paso es poner ambos archivos, mipagina.html y miestilo.css, en vuestro sitio Web. (Quizá queráis primero cambiarlos un poco…), pero la forma de realizar esto depende de vuestro proveedor de Internet.
El deseo de todo diseñador web y gráfico es poder personalizar los CMS que utiliza y hoy WordPressnos entrega la aplicación llamada “Constructor” que facilitará tu tarea para poder hacerlo aquí te dejamos un sencillos pasos de como irle haciendo.
Paso 1:
Busca en tu instalación de WordPress en los temas la aplicación que se llama “Constructor”
Diseña tu propio tema para WordPress con Constructor
Paso 2:
Después de la instalación y activación, haga clic en el enlace Personalizar en la ficha Apariencia en la barra lateral izquierda.
Diseña tu propio tema paraWordPress con Constructor
Paso3:
El área de personalización Constructor será mostrada. Existen muchos elementos que puede ajustar aqui la combinación de diferentes ajustes de cada elemento harán de su tema para WordPress único.
Diseña tu propio tema para WordPress con Constructor
Paso4:
Luego viene la ficha Diseño. Aquí es el lugar para elegir qué tipo de diseño desea utilizar para su grupo de páginas como página de inicio y página de archivo.
Diseña tu propio tema para WordPress con Constructor
Paso 5:
El siguiente elemento que se puede modificar es la barra lateral. Usted puede decidir el número y las posiciones de las barras laterales. También puede configurar el ancho de la barra lateral, extras y loscontenedores.
Diseña tu propio tema para WordPress con Constructor
Paso 6:
Aquí puede modificar la ficha de encabezado con todos los elementos de la cabecera como la altura del encabezado, color de fuente del título, ese tipo de cosas.
Diseña tu propio tema para WordPress con Constructor
Paso 7
En el área de contendio puede ver elementos de las entradas de blog, tales como: ocultar / mostrar el vínculo del autor, de auto-generar las miniaturas y la creación de un área widget adicionales en el puesto.
Diseña tu propio tema para WordPress con Constructor
Paso 8
En la parte de otros comentarios puede ajustar el tamaño del avatar commenter.
Diseña tu propio tema para WordPress con Constructor
Paso 9
Como el nombre sugiere, en la ficha Fuente le permitirá elegir la combinación de fuentes a utilizar aunque es poco lo que se puede elegir al menos dejaron la opción disponible
Diseña tu propio tema para WordPress con Constructor
Paso 10
La pestaña de color le permite elegir los colores y la transparencia del tema.
Diseña tu propio tema para WordPress con Constructor
Paso 11
En las ofertas ficha Diseño se puede modificar con bordes y sombras.
Diseña tu propio tema para WordPress con Constructor
Paso 12
Constructor también viene con una opción para que los usuarios puedan incluir su propio CSS.
Diseña tu propio tema para WordPress con Constructor
Paso 13
Si desea utilizar sus propios gráficos para el sitio, usted puede subir manualmente a través de la ficha Imágenes.
Diseña tu propio tema para WordPress con Constructor
Paso 14
Y para aquellos que se sienten aun confundidos acerca de Constructor pueden darle clic en la imagen, del signo de interrogación para obtener ayuda.
Diseña tu propio tema para WordPress con Constructor
Paso 15
La última ficha es la función de Presentación de diapositivas permite a los usuarios mostrar presentaciones de diapositivas de las imágenes de los artículos existentes. Simplemente marque la casilla “Habilitar”.
Diseña tu propio tema para WordPress con Constructor
Paso 16
La ficha de Ayuda contiene enlaces a sitios web relacionados con Constructor y solicitud de donación.Si te gusta el tema, el autor puede donar algo de dinero a través de PayPal.
Diseña tu propio tema para WordPress con Constructor
Paso 17
Finalmente dale Guardar. Después de hacer cambios aquí y allá, tal vez quiera guardar su creación como un tema nuevo bajo Constructor. Anote la información necesaria y haga clic en “Guardar tema” y listo ya cuenta con un nueva tema personalizado para WordPress de una manera fácil y rápida
Diseña tu propio tema para WordPress con Constructor
pulsando sobre él, y en Mostrar eventos para elegir una versión de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0.
para desplegar sus propiedades más avanzadas.
para insertar nuevos elementos en la lista. Añade la etiqueta Postre.
de la barra de herramientas.
Las secciones como ésta son opcionales. Contienen explicaciones adicionales del código HTML y CSS del ejemplo. El símbolo de “peligro”, situado al principio, indica que se trata de un material más avanzado que el resto.
