Al aplicar el diseño de página web Div+CSS para crear un sitio web que cumpla con los estándares web, pueden surgir algunos problemas fácilmente.
Resumámoslo ahora para que todos puedan ver dónde radica el problema.
1. Problemas de validación de CSS
Todas las páginas web que diseñamos esperan cumplir con los estándares XHTML y CSS para pasar la verificación del W3C. Algunas verificaciones CSS2.0 fallidas. Los principales errores de verificación son: "Línea: 0 font-family: se recomienda especificar una familia tipográfica como última opción".
El W3C recomienda que al definir fuentes, se termine con una categoría de fuentes en lugar de una sola fuente. Por ejemplo, "sans-serif" puede garantizar que las fuentes web se puedan mostrar en diferentes sistemas operativos.
Aunque la mayoría de las personas definen "sans-serif" en la etiqueta del cuerpo, si se omite sans-serif al definir la fuente nuevamente en otros ID o clases, se considera que la verificación falla. Este error no es muy grave y se puede evitar con un poco de atención.
2. Sugerencias de escritura CSS
Agregue comentarios a archivos CSS. Los comentarios brindarán comodidad para su mantenimiento futuro. Se recomienda agregar comentarios a los archivos CSS tanto como sea posible y no preocuparse por agregar una pequeña cantidad de bytes. Intente acortar la sintaxis CSS tanto como sea posible. Por ejemplo, el valor de color "#FFFFFF" se puede abreviar como "#FFF"; "padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px" se puede abreviar como " relleno: 30px 0 10px" 20px;". Existen más técnicas de ahorro al definir técnicas y, a medida que adquiera más dominio en las aplicaciones CSS, seguirá descubriendo mejores métodos.
3. Problemas de validación de XHTML
La gente suele prestar más atención a la verificación de CSS, pero descuidan el cumplimiento de los estándares XHTML y se producen muchos errores de bajo nivel. Los principales problemas se enumeran a continuación:
◎target="_blank", esta sintaxis es correcta en HTML4.0, pero no está permitida en XHTML1.0. Una solución es escribir target="new", y otra solución es usar js para procesar todos los objetivos;
◎Es mejor no incrustar hojas de estilo. Los archivos de hojas de estilo separados son más fáciles de mantener. Si <style> está incrustado, debe escribirse como <style type="text/css"> y el tipo no se puede ignorar; de lo contrario, XHTML no puede determinar para qué se utiliza su estilo.
◎<br> debe escribirse como <br />. XHTML requiere que todas las etiquetas estén cerradas. Las etiquetas no emparejadas deben ir seguidas directamente de "/".
◎Reutilizar la misma identificación. Una ID solo se puede usar una vez en XHTML. Si necesita hacer referencia al estilo varias veces, debe usar class.
◎El método de incrustación de Flash es incorrecto. <embed> era originalmente una etiqueta privada de Netscape. Aunque luego fue admitida por IE, el W3C nunca la reconoció. No existe una etiqueta <embed> en HTML4.0. El W3C recomienda el uso de la etiqueta <object>. Para resolver el problema de compatibilidad entre diferentes navegadores, una solución alternativa es utilizar ambas etiquetas.
El código de muestra completo es el siguiente (el fondo flash es transparente):
| El siguiente es el contenido citado: <objeto classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000" código base= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" ancho="300" alto="100"> <param nombre="calidad" valor="alto"> <param nombre="wmode" valor="transparente"> <param nombre="SRC" valor="test.swf"> <embed src="test.swf" wmode="transparente" calidad="alta" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" tipo="aplicación/x-shockwave-flash" ancho="300" alto="100"> </embed> </objeto> |
Pero todavía no es posible escribirlo directamente en XHTML. Ahora solo podemos engañar a la verificación escribiendo el código anterior en el archivo flash.js y luego llamándolo.
<script tipo="text/javascript" src="flash.js"></script>
Si el flash cumple con los estándares es un tema controvertido.
◎El código similar a id=header class=title debe escribirse como id="header" class="title". Citar valores de atributos es la regla de sintaxis XHTML más básica.
4. Problemas de compatibilidad
Algunos sitios web aparecen deformados y desalineados cuando se visualizan en IE6.0, Mozilla Firefox1.0 y Opera 7.12.
Está centrado en IE, pero no en Mozilla. Configurar el cuerpo {TEXT-ALIGN: center;} en IE ya puede centrarlo, pero en Mozilla debes agregar las siguientes configuraciones de estilo a la capa que necesita ser centrada: MARGIN-RIGHT: auto;MARGIN-LEFT: auto;
Excede el ancho. La página parece normal en Mozilla, pero en IE está deformada porque excede el ancho y las capas una al lado de la otra se mueven debajo. Esta situación se debe a las diferentes interpretaciones del modelo de caja entre IE y Mozilla. Hay muchas soluciones, como el método "!important".
Cada vez más diseñadores comprenden y dominan los estándares web y el diseño CSS. Después de un período de digestión, comprensión y aplicación del diseño CSS, surgirán más páginas web con consideraciones tanto técnicas como estéticas.