La mayoría de nuestros diseñadores todavía utilizan el diseño de tabla, la presentación y la estructura tradicionales combinados para crear sitios web. Aprender a utilizar XHTML+CSS requiere un proceso, y hacer que un sitio web existente cumpla con los estándares de sitios web no se puede hacer en un solo paso. El mejor enfoque es proceder paso a paso y por etapas para lograr el objetivo de cumplir plenamente con los estándares de los sitios web. Si eres principiante o no estás muy familiarizado con el código, también puedes utilizar herramientas de edición compatibles con los estándares, como Dreamweaver MX 2004, que actualmente es la herramienta más completa que soporta los estándares CSS.
1． mejora primaria
Agregue el DOCTYPE correcto a la página
Muchos diseñadores y desarrolladores no saben qué es DOCTYPE y para qué se utiliza. DOCTYPE es la abreviatura de tipo de documento. Se utiliza principalmente para indicar qué versión de XHTML o HTML estás utilizando. El navegador interpreta el código de la página de acuerdo con la DTD (Definición de tipo de documento) definida por su DOCTYPE. Por lo tanto, si accidentalmente configura el DOCTYPE incorrecto, los resultados lo sorprenderán. XHTML1.0 proporciona tres opciones DOCTYPE:
(1) Transicional
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transicional//ES http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
(2) Estricto
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Estricto//ES http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
(3) Tipo de marco (Conjunto de marcos)
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//ES http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Para nuestra mejora principal, sólo necesitamos utilizar una declaración de transición. Aún puede ser compatible con el diseño de su mesa, logotipos de rendimiento, etc., para que no sienta que los cambios son demasiado grandes y difíciles de dominar.
Consejo: si le da pereza ingresar el código de transición anterior, puede visitar la página de inicio del sitio web http://www.macromedia.com/, luego ver el código fuente y copiar y pegar el mismo código en el área del encabezado. .
Establecer un espacio de nombres (espacio de nombres)
Agregue el siguiente código directamente después de la declaración DOCTYPE:
<html XMLns=http://www.w3.org/1999/xhtml >
Un espacio de nombres es una DTD detallada que recopila tipos de elementos y nombres de atributos. La declaración del espacio de nombres le permite identificar su espacio de nombres a través de un puntero de dirección en línea. Simplemente ingrese el código como de costumbre.
Declara tu lenguaje de codificación
Para que los navegadores los interpreten correctamente y pasen la validación del marcado, todos los documentos XHTML deben declarar el lenguaje de codificación que utilizan. El código es el siguiente:
<meta http-equiv=Tipo de contenido content=text/html charset=GB2312 />
El lenguaje de codificación declarado aquí es chino simplificado GB2312. Si necesita producir contenido en chino tradicional, puede definirlo como BIG5.
Escribe todas las etiquetas en letras minúsculas.
XML distingue entre mayúsculas y minúsculas, por lo que XHTML también distingue entre mayúsculas y minúsculas. Todos los nombres de elementos y atributos XHTML deben estar en minúsculas. De lo contrario, la validación del W3C considerará que su documento no es válido. Por ejemplo, el siguiente código es incorrecto:
<TITLE>Perfil de la empresa</TITLE>
La forma correcta de escribirlo es:
<title>Perfil de la empresa</title> De manera similar, cambie <P> a <p>, <B> a <b>, etc. Este paso de conversión es muy simple.
Agregar atributo alt a la imagen
Agregue el atributo alt a todas las imágenes. El atributo alt especifica que se muestra texto de reemplazo cuando la imagen no se puede mostrar. Esto es prescindible para los usuarios normales, pero es crucial para los navegadores de solo texto y los usuarios que utilizan lectores de pantalla. Solo cuando se agrega el atributo alt el código pasará la verificación de corrección del W3C. Tenga en cuenta que necesitamos agregar atributos alt significativos; escribir como lo siguiente no tiene sentido:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=http://www.chinahtml.com/0608/logo_unc_120x30.gif>
Forma correcta de escribir:
<img src=http://www.chinahtml.com/0608/logo_unc_120x30.gif alt=Logotipo de la empresa UNC, haga clic para regresar a la página de inicio>
Citar todos los valores de atributos
En HTML, no es necesario citar los valores de los atributos, pero en XHTML, deben estar entre comillas.
Ejemplo: altura=100, no altura=100.
Cerrar todas las pestañas
En XHTML, cada etiqueta abierta debe estar cerrada. Como esto:
<p>Todas las pestañas abiertas deben estar cerradas. </p> <b>HTML puede aceptar etiquetas abiertas, pero XHTML no. </b>
Esta regla puede evitar confusiones y problemas con HTML. Por ejemplo: si no cierra la etiqueta de imagen, es posible que tenga problemas de visualización de CSS en algunos navegadores. Utilice este método para asegurarse de que la página aparezca tal como la diseñó. Cabe señalar que las etiquetas vacías también deben cerrarse. Utilice una barra diagonal / al final de la etiqueta para cerrarse. Por ejemplo:
<br /> <img src=http://www.chinahtml.com/0608/webstandards.gif />
Después de ser procesada según las siete reglas anteriores, la página básicamente cumple con los requisitos de XHTML1.0. Pero todavía tenemos que verificar si realmente cumple con los estándares. Podemos utilizar W3C para proporcionar servicios de validación gratuitos (http://validator.w3.org/). Corrija los errores uno por uno después de descubrirlos. En la siguiente lista de recursos, también proporcionamos otros servicios de verificación y URL que brindan orientación sobre la verificación, que pueden usarse como complemento a la verificación del W3C. Cuando finalmente pases la validación XHTML, felicitaciones, has dado un gran paso hacia los estándares de sitios web. ¡No es tan difícil como crees!
2. Mejora intermedia
Nuestra próxima mejora está principalmente en la separación de estructura y rendimiento. Este paso no es tan fácil de lograr como el primer paso. Necesitamos un cambio de concepto, así como el aprendizaje y la aplicación de la tecnología CSS2. Pero aprender algo nuevo lleva tiempo, ¿verdad? El truco consiste en aprender haciendo. Si siempre ha usado el diseño de tabla y nunca ha usado CSS, no hay necesidad de apresurarse a decir adiós al diseño de tabla. Primero puede reemplazar la etiqueta de fuente con una hoja de estilo. A medida que aprenda más, podrá hacer más. Bien, echemos un vistazo a lo que debemos hacer:
Definir la apariencia de elementos con CSS
Hemos desarrollado un hábito al escribir logotipos. Cuando queremos que la fuente sea más grande, usamos <h1>, y cuando queremos agregar un símbolo de punto al frente, usamos <li>. Siempre pensamos en <h1> como grande, <li> como puntos y <b> como "texto en negrita". De hecho, <h1> puede convertirse en lo que quieras a través de CSS, <h1> puede convertirse en una fuente pequeña, el texto <p> puede volverse enorme y en negrita, y <li> puede convertirse en una imagen, etc. No podemos forzar que los elementos estructurales logren la presentación, debemos usar CSS para determinar la apariencia de esos elementos. Por ejemplo, podemos hacer que los encabezados originales predeterminados del nivel 6 tengan el mismo tamaño:
h1, h2, h3, h4, h5, h6{ familia de fuentes: 宋体, tamaño de fuente: 12px;
Reemplace la basura sin sentido con elementos estructurados
Es posible que muchas personas nunca hayan sabido que los elementos HTML y XHTML fueron diseñados para expresar estructura. Muchos de nosotros nos hemos acostumbrado a utilizar elementos para controlar la presentación, en lugar de la estructura. Por ejemplo, una lista podría marcarse así:
Oración 1<br /> Oración 2<br /> Oración 3<br />
Sería mejor si usáramos una lista desordenada:
<ul> <li>Oración 1</li> <li>Oración 2</li> <li>Oración 3</li> </ul>
Podría decir: "Pero <li> muestra un punto y no quiero usar un punto". De hecho, CSS no especifica cómo se ve un elemento. Puedes desactivar los puntos usando CSS.
Agregar identificación a cada tabla y formulario.
Proporcione una tabla o forme un marcado estructural único, p.
<id de tabla=menú>
A continuación, al escribir la hoja de estilo, puede crear un selector de "menú" y asociarlo con una regla CSS que le indique a las celdas de la tabla, las etiquetas de texto y todos los demás elementos cómo mostrarse. De esta manera, no es necesario adjuntar algunos atributos de capa de presentación redundantes que consumen ancho de banda, como altura, ancho, alineación y color de fondo, a cada etiqueta <td>. Con solo una etiqueta adjunta (la etiqueta de identificación que etiqueta "menú"), puede realizar un procesamiento de presentación ad hoc para un marcado de código limpio y compacto en una hoja de estilo separada.
Para mejoras intermedias, primero enumeraremos los tres puntos principales aquí, pero contiene mucho contenido y puntos de conocimiento, que debemos aprender y dominar paso a paso hasta que finalmente logremos el diseño usando CSS completamente sin usar tablas.