   | |
| Moderador del foro: ZorG |
| Foro uCoz Ayuda a los webmasters Configuración del diseño Configuración del diseño de otros elementos de la web |
| Configuración del diseño de otros elementos de la web |
Estilos de CSS para el calendario
Code /* Calendar Style */ .calmonth {text-align:right; } .calwday {border:1px outset; background:#D9D775; width:17px;} .calwdayse {border:1px outset; background:#D9D775; width:17px; font-weight:bold;} .calwdaysu {border:1px outset; background:#D9D775; width:17px; font-weight:bold; color:#FF0000;} .calmday {border:1px inset; background:#F5F5F5;} .calmdaya {border:1px inset; background:#F5F5F5; font-weight:bold;} .calmdayis {border:1px outset; background:#EFEFEF;} .calmdayisa {border:1px outset; background:#EFEFEF;font-weight:bold;} a.calmonthlink:link {text-decoration:none; color:#938D4A;} a.calmonthlink:visited {text-decoration:none; color:#938D4A;} a.calmonthlink:hover {text-decoration:underline; color:#938D4A;} a.calmonthlink:active {text-decoration:underline; color:#000000;} a.calmdaylink:link {text-decoration:underline; color:#938D4A;} a.calmdaylink:visited {text-decoration:underline; color:#938D4A;} a.calmdaylink:hover {text-decoration:underline; color:#000000;} a.calmdaylink:active {text-decoration:underline; color:#000000;} /* -------------- */ Cómo cambiar el aspecto de la barra de desplazamiento
Quote scrollbar-3dlight-color Configura el color de los límites derecho e izquierdo de la barra de desplazamiento, su deslizador y flechas. Se apoya por el Internet Explorer a partir de 5.5 scrollbar-arrow-color scrollbar-base-color scrollbar-darkshadow-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-track-color
El código estándar $LOGIN_FORM$ puede no convenir para cada diseño, o tú simplemente no quieres que la marca “Recordar” siempre sea activa, o tal vez quieras ir practicando la configuración del diseño... El siguiente ejemplo es pa’ ti.
Quote <form method="POST" name="loginform" action="http://YOUR_SITE_URL/index/"> Login: <input type="text" name="user" size="20" style="width:100px" maxlength="25"> <input type="submit" value="Log in »"> <input type="hidden" name="a" value="2"><input type="hidden" name="redirect" value="0"> </form> <a class="forRegLink" href="javascript://" onClick="window.open('http://YOUR_SITE_URL/index/5','reminder','top=0,left=0,width=300,height=140'); return false;">Forget password</a> <script type="text/javascript">document.loginform.redirect.value=window.location.href;</script> Explicaciones: Quote <form method="POST" name="loginform" action="http://YOUR_SITE_URL/index/"> código obligatorio donde solamente es necesario cambiar la dirección de tu web.
Quote Login: <input type="text" name="user" size="20" style="width:100px" maxlength="25"> Password: <input type="password" name="password" size="20" style="width:100px" maxlength="15"> campos para introducir el login y la contraseña del usuario, el aspecto e inscripciones pueden cambiarse, a excepción de name="user" и name="password"
Quote <label for="rem"><input id="rem" type="checkbox" name="rem" value="1" checked>remember</label> bandera que indica si necesita el usuario poner cookie prolongado para que no necesite introducir la contraseña una vez más. Se lo puede quitar, o hacer inactive, es decir, borrar la palabras “checked”.
Quote <input type="submit" value="Log in »"> botón para enviar el formulario, lo puedes cambiar como quieras, lo principal es que el tipo sea (type=”submit”)
Quote <input type="hidden" name="a" value="2"><input type="hidden" name="redirect" value="0"> Campos obligatorios ocultos del formulario, sin primer campo el formulario no funcionará, el segundo campo es necesario para la redirección a la página de donde introdujeron el login. Estos tags deben preceder al tag de cierre del formulario </form> (consultar la documentación sobre HTML).
Quote </form> tag obligatorio, debe pasar después de todos los tags descritos arriba.
Quote <a class="forRegLink" href="javascript://" onClick="window.open('http://YOUR_SITE_URL/index/5','reminder','top=0,left=0,width=300,height=140'); return false;">Forget password</a> <a class="forRegLink" href="$REGISTER_LINK$">Registration</a> Enlaces para el registro y recordatorio de la contraseña, los puedes cambiar a tu gusto, puedes eliminar pero mejor que queden (lee los artículos sobre usabilidad).
Quote <script type="text/javascript">document.loginform.redirect.value=window.location.href;</script> Javascript que otorga al campo oculto “redirect” la dirección de la página siguiente, gracias a esto un usuario puede entrar y regresar a la página corriente. Este código debe seguir después del formulario de entrada. Si esta función no se requiere, puede estar en desuso.
De misma manera se puede cambiar también otras variables que exponen el código NTML grande si lo deseas cambiar a tu gusto (por ejemplo: formulario de encuesta, búsqueda etc). Y una cosa más (seguro de que es más importantísima): en caso de que no hayas comprendido lo escrito aquí, esto significa que todavía es temprano trabajar en uCoz... Ven leyendo artículos sobre HTML.
Code .loginbutton{background: url('pictures/logm.gif'); border: 1px solid #000000; color: #ffffff; font-size:7pt;} Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Manejo de imágenes con XHTML y CSS El uso de imágenes dentro de documento XHTML será, por obvias razones, la mejor forma de presentar contenido visual en nuestra página web. Ya sea una foto. un botón o algún elemento de un layout, las imágenes están presentes en casi todos los sitios que se encuentran en la Web, excluyéndose únicamente en aquellos sitios extra minimalistas que sólo optan por utilizar texto y CSS para presentar información. Hubo un período de tiempo donde la dependencia al uso de imágenes era aún más marcado, no podías dar paso sin utilizarlas, ya que su función fue malinterpretada y los nuevos layouts las aplicaban para dar forma a la estructura del sitio. Por ello, al momento de entrar a una página se nos cargaban imágenes transparentes, gifs espaciadores, incluso letras y menús hechos únicamente con imágenes, esto representaba hacer varias peticiones al servidor para descargar muchas imágenes que solo eran utilizadas en una ocasión y alentaban el tiempo de descarga del sitio. En la actualidad gracias a CSS podemos omitir gran parte de esas locuras y suprimir el uso excesivo de imágenes, pero esto no demerita su importancia dentro del documento. Las imágenes siguen siendo una parte muy relevante al momento de planear un sitio, por lo que debemos clasificarlas en dos grandes tipos, aquellas que utilizaremos para mostrar o ejemplificar contenido, y las que utilizamos para mejorar la presentación. Etiqueta img de HTML La etiqueta img es la encargada de crear el elemento de imagen, es decir nos permitirá incrustar una imagen dentro de nuestro código y así mostrarla en la página. Code <img src=”imagenes/ucoz.jpg” alt=”uCoz” /> Cuenta con varios atributos que se encargan de especificar aspectos relevantes sobre la incrustación de la imagen, el principal de ellos lleva por nombre src y se encarga de apuntar hacia la locación actual del archivo de la imagen, sin él la etiqueta pierde sentido de uso. Entre los atributos también encontramos alt, que por reglas XHTML es totalmente requerido, y se encarga de especificar un texto que describa o explique la imagen. El hecho de que el atributo alt sea un elemento requerido por XHTML, se debe a que representa una alternativa para aquellos usuarios que por alguna razón no pueden observar la imagen, además aumenta el SEO del sitio permitiendo que los buscadores puedan obtener contenido legible sobre las imágenes que se están mostrando. Su contenido dará una idea de lo que la imagen representa y ayudará en caso de que esta sea retirada o el servidor no ofrezca una respuesta a la petición. Por otro lado, también tenemos atributos, que en su tiempo se encargaron de dar forma al elemento de imagen pero ya no soy soportados por los navegadores. Tal es el caso del atributo longdesc que se encargaba de proveer la locación o dirección hacia un archivo que contenía una larga descripción de lo que se esta mostrando con la imagen. Mapas de imágenes Cuando utilizamos una sola imagen para establecer varios puntos o dividirla en partes mediante coordenadas, estamos estableciendo un mapa de imagen. Hablando en términos generales, podemos encontrar que existen dos tipos de mapas, aquellos que se encuentran del lado servidor y los que son realizados desde el lado cliente, estos últimos son los que vamos a realizar mediante las etiquetas map y area. Supongamos que tenemos una imagen con un mapa mundial, y queremos señalar a dos o más países dentro de este mapa para redireccionar a otras páginas, entonces tendríamos que hacer algo como esto: Code <img src="mapamundi.gif" alt="Mapa mundial" usemap="#mapamundi" /> <map name="mapamundi" id="mapamundi"> <area shape="rect" coords="0,0,115,90" href="america.html" alt="America" /> <area shape="poly" coords="113,39,187,21,180,72,141,77,117,86" href="europa.html" alt="Europa" /> </map> En este ejemplo estamos definiendo una imagen que se relaciona a un mapa mediante el atributo usemap, el cual lleva el mismo valor que el atributo id del elemento map. En este caso nos estamos refiriendo a id y no a name ya que en eso radica la diferencia entre XHTML y HTML para este caso, XHTML considera deprecado el atributo name para la etiqueta map, por ello id se convierte en el atributo de uso común, aunque en este ejemplo utilizamos ambos para evitar problemas de compatibilidad. Cada elemento de área del mapa es definido mediante la etiqueta del mismo nombre, el cual cuenta con atributos de forma y coordenadas. Para la primer área utilizamos una forma rectangular por lo que el atributo shape recibe el valor de rect y las coordenadas tienen que indicar los cuatro puntos de la figura por lo que el atributo coords indica los cuatro valores separados por coma; por su parte la segunda área utiliza una forma poligonal por lo que son necesarios más valores para indicar la forma. La razón por la que estos mapas no son tan utilizados, es que su uso se limita únicamente a ciertas enseñanzas como el caso de temas geográficos como el que vimos, además del hecho de que no son de un uso amigable en la interfaz, en muchas ocasiones no podemos inferir que la imagen cuenta con divisiones o links internos. Imágenes de fondo con CSS Debido a que las imágenes son más utilizadas como elemento de presentación, que como un auténtico contenido, es común ver que su manejo se lleve a cabo por CSS en la mayoría de las ocasiones. El elemento img solía ser llevado al extremo para realizar toda clase de funciones relacionadas a las imágenes, en la actualidad esto se ve disminuido por el hecho de que CSS permite manejar imágenes mediante su propiedad background-image, apegándonos más a los estándares que predominan. La propiedad background-image se pueden utilizar para especificar una imagen que se utilizará como fondo en cualquier elemento de tipo capa, desde el cuerpo de la página hasta un párrafo sencillo. Al utilizarlo estaremos llenando el elemento con una imagen que ira desde la esquina superior izquierda hasta el final, cubriendo todo el espacio y con la oportunidad de agregar otros elementos sobre la imagen. Code body { background-image: url(imagenes/ucoz.jpg); } Podemos controlar aspectos de la imagen de fondo mediante otras propiedades CSS, como background-attachment, background-repeat y background-position. La propiedad background-attachment determina si la imagen de fondo se desplazará con el contenido de una caja. Puede ser utilizado para especificar si la imagen se desplazará con el resto de la página o si debe ser fijado a la vista, es decir el área de visualización de la ventana del navegador, en lugar de la página. Code body { background-image: url(imagenes/ucoz.jpg); background-attachment: fixed; } En este ejemplo estamos estableciendo la imagen ucoz.jpg como fondo de página, y en vez de seguir el patrón común de desplazamiento, la imagen lucirá exactamente igual conforme nos desplacemos, lo único que se ira recorriendo es el resto del contenido de la página. En caso de que la imagen que estas utilizando sea muy pequeña o simplemente no deseas que se repita, creando un efecto de mosaico, entonces la propiedad a la que debes recurrir es background-repeat. Al establecer esta propiedad con un valor de no-repeat nos ahorraremos el tener que desplegar la imagen varias veces y simplemente se mostrará en una ocasión. Code body { background-image: url(imagenes/ucoz.jpg); background-repeat: no-repeat; } Esta propiedad también puede tener los valores de repeat-x para repetir la imagen únicamente de manera horizontal y repeat-y para hacer lo mismo pero de manera vertical. El resto del área que no sea cubierto por la imagen de fondo optará por un fondo transparente, que por lo general luce de color blanco por ser el patrón elegido para el navegador, al menos que elijamos un color de fondo mediante la propiedad background-color lo que cual combinaría los dos valores, mostrando la imagen y en el área restante el color elegido. Las imágenes de fondos siempre inician en la esquina superior izquierda por default, en caso de que esto no cumpla con lo que requerimos, podemos cambiar esa posición mediane la propiedad background-position, que es generalmente utilizada en combinación con la propiedad de repetición. Los valores que recibe esta propiedad son los clásicos para definir una posición, nos referimos a top, right, bottom, left, center, alguna medida o un porcentaje, o incluso la combinación de alguno de estos valores. Code body { background-image: url(imagenes/ucoz.jpg); background-repeat: no-repeat; background-position: center; } Finalmente tenemos los ya famosos shorthands o también conocidos como atajos, es decir la propiedad que nos va a ayudar a representar todas estás propiedades en una sola línea, en este caso lleva por nombre background y nos ayudará a definir los valores de background-color, background-image, background-repeat, background-attachment y background-position. Code body { background: #CCCCCC url(imagenes/ucoz.jpg) center fixed no-repeat; } Aunque en los ejemplos de este artículo estuvimos utilizando el elemento body, ten en mente que estas propiedades puedes ser aplicadas para cualquier elemento visible en la página que tenga el tipo caja o capa, un párrafo, una tabla, un div, incluso algún elemento de imagen que luzca transparente. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Componer un diseño de 3 columnas en XHTML y CSS Vamos a intentar hacer la base de una página web en XHTML 1.0 Strict & CSS con 5 apartados, dos son los típicos: header y footer, pero los otros tres varían un poco, normalmente se suelen hacer las páginas con dos columnas, pero otras muchas veces es necesario usar 3, por ejemplo en algunas bitácoras, páginas de periodismo, o simplemente por cualquier cosa que creas que puede tener mayor navegabilidad con 3 columnas en vez de dos. Para hacer este tutorial es necesario que tengas algunos conocimientos de CSS y XHTML, aunque no demasiado porque considero que es fácil de entender, pero algunas cosas no las explico porque doy por hecho que se deben saber. Para empezar vamos a estructurar nuestro XHTML, para ordenar bien todas las "piezas", en este caso las divs. Quote /*Esta parte es la que se encarga de decirle al navegador qué tipo de lenguaje está usando*/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> /*Aquí nos dice el título de la página, el codificado y las vinculaciones a las hojas de estilo externas, en este caso ya hemos creado una llamada base.css*/ <head> <title>Base3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="base.css" rel="stylesheet" type="text/css" /> </head> /*Aquí empieza la manteca*/ <body> /*Creamos las primeras divs, la primera será la div "container", que se encargará de albergar a todas las demás, seguidamente creamos la div header, que es donde irá el encabezado principal de nuestra página. Después de éstas creamos, por este orden, las divs "izquierda", "derecha" y "principal" Por último creamos footer*/ <div id="container"> <div class="header"></div> <div class="izquierda"></div> <div class="derecha"></div> <div class="principal"></div> <div class="footer"></div> </div> </body> </html> Ahora mismo no aparecería nada en el navegador porque aún no hemos definido los estilos de las mismas, pero es justo lo que vamos a hacer ahora mismo. Creamos un nuevo documento CSS y lo guardamos como "base.css", y empezamos a escribir, en primer lugar las características generales que tendrá nuestra página, una vez terminadas esas características ya podemos empezar con las específicas de cada div. Así que tendríamos que escribir esto: Quote /*Aquí vamos a definir las propiedades de la página en general, más adelante definiremos las de las cajas principales*/ /*formatos de párrafo, línea de separación, encabezados 1 al 6, tablas, vínculos (en sus 4 estados) y body respectivamente*/ body { font:11px Verdana, Arial, Helvetica, sans-serif; background-color:#FFF; text-align : justify; line-height: 10px; } p { font-size:11px; color: #586885; line-height: 120%; } hr { display:none; } h1 { font-size:25px; text-align : left; color : #666666; margin:0; } h2 { font-size:20px; text-align : left; color:#486895; text-transform: capitalize; } h3 { font-size:18px; text-align : left; color : #666666; } h4 { font-size:15px; text-align : left; color : #666666; } h5 { font-size: 13px; text-align : left; color : #666666; } h6 { font-size:12px; text-align : left; color : #666666; } td { font-size: 12px; text-align : center; color : #586885; } a { font-size:12px; color:#325FA0; } a:link { text-decoration: none; } a:visited { text-decoration: none; color:#325FA0; } a:hover { text-decoration: none; color:#000066; } a:active { text-decoration: none; color:#0099CC; } Por tanto ya quedan definidas las características más generales. Ahora podemos empezar con las características específicas de cada div.  1-o"div container: Quote #container { background-color:#DDE6AC; border-style:solid; border-color:#000000; margin: 0 auto; width:700px; height:auto; } Con el valor de margin quedará centrado, no hace falta repetir otra vez 0 auto porque ahora mismo el 0 se refire a arriba y abajo, y el auto a los lados. 2º- En header le damos el mismo ancho que al contenedor (si queremos podemos darle menos), la altura que queramos, colores etc... Lo que más nos interesa es que debe estar centrado con el contenedor, por eso mirad las propiedades de margin, tiene cero arriba, a la derecha también, abajo tiene 10 px, y a la izquierda de nuevo cero píxeles, por el mismo orden que los he mencionado. Sólo he definido el borde de abajo porque los demás tocan a los del contenedor y resulta feo, y al dejarlos así no aparecen por defecto. Quote .header{ width:700px; height:140px; background-color:#CC9933; border-bottom-style:solid; border-bottom-color:#000000; margin:0 0 10px 0; } 3º En la div "izquierda" vamos a ajustar los valores para que tenga una anchura de 100píxeles, una altura que dependa del contenido que tenga dentro, y le vamos a dar un margen de 5px a la izquierda, además de hacer que se sitúe a la izquierda mediante "float". Quote .izquierda{ width:100px; height:auto; background-color:#EFEFEF; border-style:solid; border-width:1px; border-color:#000000; margin:0 0 0 5px; float:left; padding:3px; } Como en esa div he pensado que pondré una lista de links, voy a definir las propiedades de la lista: Quote .izquierda ul { font:bold 11px Verdana, Arial, Helvetica, sans-serif; color:#586885; line-height: 140%; text-transform:capitalize; } 4º El la div "derecha" vamos a ajustar los valores para que tenga una anchura de 150píxeles, una altura que también dependa del contenido que tenga dentro, y le vamos a dar un margen de 5px, además de hacer que se sitúe a la derecha. Quote .derecha{ width:150px; height:auto; background-color:#FFFFDD; border-style:solid; border-width:1px; border-color:#000000; margin:0 5px 0 0; float:right; padding:5px; } 5º Ahora le toca a la caja que contendrá la información principal de nuestra página (la div "principal") en este caso queremos que se ajuste al espacio que sobra a lo ancho del contenedor, por que calculamos, 700px(anchura del mismo)-100px(anchura de la div "izquierda")-150px(anchura de la div "derecha")-20px(total de los margins)-34px(total de los paddings)-6px (total de los borders)=390px. Además de esto, también queremos que quede situado entre las cajas que la rodean, por lo que calcularemos el espacio que debería quedar a su izquierda y después poner el mismo valor en su "margin-left." **Repito, hay que prestar especial atención a contar TODOS los valores que se utilizarán, incluidos, márgenes, padding, bordes...**ç Quote .principal{ width:390px; height:auto; background-color:#FFF; border-style:solid; border-width:1px; border-color:#000000; margin:0 5px 0 117px; padding:10px; } 6º Ahora le toca al footer, sobran explicaciones... Quote .footer{ width:auto; height:30px; background-color:#FFF; border-style:solid; border-width:1px; border-color:#000000; margin:5px; } ...y a su "h6" .footer h6{ text-align:center; text-transform:uppercase; margin:5px auto; color:#666666; font-size:10px; } Bueno, ya está todo definido, ahora tendríamos que ver una página mas o menos formada en nuestro navegador, digo más o menos por que aun no hemos puesto nada de información, si queréis, podéis sustituir el XHTML de antes por éste, o si no, lo rellenáis como queráis, pero por lo menos ya tenéis este de ejemplo, que además es correctamente semántico,ok?? Resultado final Quedaría así... Quote <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Base3</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="base.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div class="header"><h1>Base3</h1></div> <div class="izquierda"> <ul> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> <li><a>vinculo</a></li> </ul> </div> <div class="derecha"> <p>aquí se podría colocar una imágen, anuncios, más vínculos, las típicas imagenes de Sindicar RSS, odio a neo_jp, etc...</p> <a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a> <hr/> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </div> <div class="principal"> <h2>Título del contenido</h2> <h3>Subapartado</h3> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> <p>Escribo algo para rellenar...</p> </div> <div class="footer"> <h6>base3 2005, todo el C_C reservado</h6> </div> </div> </body> </html> Un truco para que se vea igual en IE, ya que el modelo de cajas por el que se guía no es el mismo al del W3C es hacer una nueva hoja de estilos que sólo pueda leer IE, en este caso añadimos en el head de nuestro documento este comentario: Quote <!--[if IE]> <link rel="STYLESHEET" type="text/css" href="url_de_nuestros_estilos.css" /> <![endif]--> . En esa hoja haremos los cambios pertinentes y así debería verse bien, por ejemplo, la página que acabamos de modelar tiene una pequeña diferencia de margenes en IE con relación a Firefox, se puede solucionar haciendo una hoja de estilos solo para IE y cambiando los margenes en ella hasta que quede igual. Por cierto, todos los códigos que he posteado validan a la perfección. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
CSS: Full Screen Background Image El siguiente ejemplo muestra cómo crear, únicamente con CSS, una imagen de fondo que ocupe la totalidad del fondo de la página para cualquier tamaño de pantalla. HTML: Code <body> <img alt="fondo" src="background.jpg" id="full-screen-background-image" /> <div id="wrapper"> <p>Contenido de la página ...</p> </div> </body> CSS: Code html, body { height: 100%; width: 100%; padding: 0; margin: 0; } #full-screen-background-image { z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0; } #wrapper { position: relative; width: 800px; min-height: 400px; margin: 100px auto; color: #333; } Ver ejemplo en funcionamiento » » Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
| |||