Técnicas de reconstrucción web y soluciones a problemas comunes.
1. Habilidades xhtml + CSS
●Trabajo preparatorio a realizar antes de la refactorización:
1. Obtenga una representación PSD, debe ser PSD, para que pueda cortarla más libremente usted mismo;
2. Primero genere una página web sin cortar el PSD y asígnele el nombre index_psd.html (esta página es de referencia);
3. Prepare varias carpetas necesarias: imágenes (para imágenes), css (para archivos de estilo css) y js (para archivos js);
●Una vez completados los preparativos, primero analice la estructura de toda la página. Para analizar la estructura de la página, primero observe el todo y luego las partes. Primero observe cómo se relacionan las secciones más grandes de la página, ya sea que estén yuxtapuestas hacia arriba y hacia abajo o en mosaico de izquierda a derecha. Después de ver claramente la estructura de secciones grandes de la página, puede crear los bloques más básicos de la página. Por ejemplo, si nuestra página tiene una estructura superior, media e inferior, podemos escribir:
<div id=”header”></div>//Colocar encabezado y navegación, etc.
<div id="content"></div>//Contenido del tema de la página
<div id=”footer”></div>//Declaración de derechos de autor del pie de página, etc.
●Al escribir CSS, debe utilizar el archivo index_psd.html. Abra este archivo con DW y seleccione el modo de visualización. Puede medir la longitud y el ancho de cada bloque tirando de las líneas auxiliares para proporcionar una referencia para configurar CSS. La ventaja de esto es que la página reconstruida puede tener una precisión de 1 píxel.
●Cada vez que escribe un bloque, necesita usar IE y ff para probar el efecto para que los problemas puedan descubrirse y resolverse rápidamente. Cuando cada bloque no tiene contenido, es mejor agregarles un color de fondo.
●Después de escribir la sección grande, analice el contenido de la sección grande. El mismo principio es comenzar con el todo y luego con las partes. Por ejemplo, la página de contenido parece tener dos secciones a la izquierda y a la derecha. tiempo, podemos escribir el código como:
<div id=”header”></div>//Colocar encabezado y navegación, etc.
<div id="content">//Contenido del tema de la página
<div class="content-2-1"></div>//Izquierda
<div class="content-2-2"></div>//derecha
</div>
<div id=”footer”></div>//Declaración de derechos de autor del pie de página, etc.
La tabla 2 en contenido-2-1 está dividida en dos columnas, 2-1 representa la columna izquierda y 2-2 representa la columna derecha. Este método de división de columnas puede hacerlo más intuitivo al ver el código de la página cuando se divide en varias. columnas, esto Las ventajas son más obvias.
●Las listas de noticias, listas de artículos, etc. se utilizan mejor:
<ul>
<li>Título de la noticia 1< >
<li>Título de la noticia 2< >
…………
<li>Título de noticias< >
</ul>
●La lista de columnas más la descripción se utiliza mejor:
<dl>
<dt>Columna 1</dt>
<dl>Descripción de la columna 1</dl>
<dt>Columna 2</dt>
<dl>Descripción de la columna 2</dl>
</dl>
●Es mejor agregar la siguiente declaración al comienzo de la definición del archivo CSS.
cuerpo,html{ altura:100% }
*{ margen:0px; relleno:0px }
●Es mejor configurar overflow::hidden para bloques grandes, para garantizar que el contenedor no se estire, destruyendo así el diseño de toda la página.
2. Problemas con DIV+CSS
1. Problema en blanco inesperado de IE6:
Cuando se colocan varios bloques pequeños uno al lado del otro en un bloque grande, la suma de los anchos de los bloques pequeños es igual al ancho del bloque grande. Esto no es un problema en otros navegadores como FF, pero en IE6 solo lo hay. un bloque si no se puede mostrar, se empujará debajo. En este momento, puede configurar el CSS del bloque pequeño para que se muestre: en línea. Si esto no funciona, reduzca el ancho de cada bloque en 1 o 2 píxeles.
2. Problema de imagen fantasma de IE6:
A veces, en IE6, algunos caracteres al final del contenido div aparecen repetidos en la parte inferior de un DIV grande, que no aparece en otros navegadores como FF. Hay dos formas de resolver este problema: 1) Eliminar el comentario; 2) Agregar <div class="clear"></div> después de este DIV Defina el estilo CSS de clear como:
.claro {
tamaño de fuente: 1px;
claro: ambos;
visibilidad: oculta;
ancho: 1px;
}
Se recomienda utilizar el segundo método. Si se eliminan los comentarios, la legibilidad del código se verá afectada.
3． Problema con IE6 que no puede centrarse:
En términos generales, siempre que establezca el estilo CSS para un div (establezca su ID en 1): margin:0px auto;, puede centrar el div en el contenedor que lo contiene (establezca su ID en 0). como sigue:
<divid="0">
<div id="1"> … </div>
</div>
Pero IE6 no funciona. En este momento, puede configurar el CSS de div0: text-align: center;
4. Aparecen bordes inesperados en las imágenes vinculadas en IE6
En IE6, a veces las imágenes vinculadas tendrán un borde feo, causado por <a>. Esto se puede eliminar configurando un { border:0px;} en CSS.
5. El contenido dentro del DIV en FF se descarrila
A veces, el contenido que parece normal en IE se puede ver en FF pero el contenido dentro del DIV ha salido. Esta situación es especialmente obvia cuando el div tiene un borde. Esto se debe a que después de establecer la altura del div en IE, si el contenido dentro del div es más alto que el div, el div aumentará automáticamente en altura. Pero FF no es tan flexible mientras la altura sea limitada, no cambiará por sí solo. En este momento, puede resolver este problema restableciendo la altura o puede configurar la altura en automático.
6． El área desaparece inesperadamente en FF
Un diseño normal en IE ha desaparecido en FF. Este problema ocurre a menudo en el bloque de derechos de autor en la esquina inferior de la página. Esto se puede solucionar añadiendo: clear:both a esta área.
No puedo pensar en otros problemas en este momento. Siempre habrá algunos problemas inexplicables durante el proceso de reconstrucción. Siempre que seas bueno pensando, te tomes la molestia de probar o buscar en línea, siempre encontrarás una solución. La solución de cada problema es una gran ganancia.