En términos generales, el trabajo completado por el diseño web es en realidad: convertir las representaciones de PSD en páginas de plantilla HTML+CSS. En general, obtendremos el PSD del artista, y diferentes personas tendrán diferentes enfoques:
1. Abra los fuegos artificiales y exporte la imagen a HTML.
2. Use directamente herramientas como DreamWeaver para arrastrar y diseñar el diseño, importar imágenes relevantes y recursos flash.
3. Después de completar el corte en PS, primero mire las representaciones en el editor de texto y hágalas paso a paso.
Los anteriores son los métodos más utilizados, pero ninguno de ellos es bueno:
El primer método es el peor, dicho código no se mantiene ni se puede legible en absoluto.
El segundo método tampoco es bueno, el código inevitablemente será redundante y las cosas que hacen deben verificarse.
El tercer método tampoco es bueno, porque debe mirar las representaciones bit a poco, es decir, al escribir la etiqueta HTML, supone constantemente cómo mostrar esta pieza.
Forma correcta de hacerlo:
1. Después de obtener el PSD, no hagas nada más primero. Escriba el marco de la página web directamente en el editor de texto. No asuma cómo representar este CSS en el futuro. Es una etiqueta completamente naturalizada sin agregar ningún CSS.
2. Después de escribir, asegúrese de que no haya ningún problema con el posicionamiento general después de ejecutar cada navegador.
3. Escriba el CSS general, aquí el CSS solo es responsable del posicionamiento y el estilo de los bloques grandes.
4. Corta los recursos de la imagen requeridos, construyéndelos poco a poco en el marco escrito, depurarlos constantemente y finalmente convertirte en el producto terminado.
5. Finalmente, agregue comentarios a su propio código y agregue comentarios a su propio código adecuadamente tanto en CSS como en HTML.
Todavía hay muchas cosas a las que prestar atención si queremos hacer un cambio flexible para hacer que la piel y dejar que CSS domine el rendimiento, pero el proceso general es así. Por supuesto, no podemos escribir HTML directamente al principio, pero al menos debemos tener esta conciencia y proceder paso a paso. . .
PSD Archivo recorte sitios web de dos puntos principales:
1. Una página independiente
1. Analice esta página y primero describa la estructura general en su cabeza o en el borrador del documento.
2. Según la situación del borrador de diseño, analice la distribución de imágenes de fondo, la distribución de imágenes ICO, etc.
3. Corta las imágenes correspondientes, exporta y fusiona imágenes
4. Escriba el código XHTML de estructura general en el editor, incluida la estructura de todos los elementos que aparecen en la página
5. Escriba el código general y del módulo en estilo CSS
6. Ajuste de detalles
7. Después del trabajo, el navegador verificará si es correcto
2. Sitio pequeño o grande compuesto por múltiples páginas
1. Explore todos los borradores de diseño y unifique la distribución de módulos, imágenes y archivos del sitio
2. Comience el primer punto de operación, pero es importante planificar la distribución de contenido del sitio.
Consideración general:
1. Fusionar imágenes para reducir el número de solicitudes
2. Racionalidad estructural y semántica
3. La simplicidad del estilo facilita el mantenimiento más tarde
4. Principalmente considere el mantenimiento posterior y el desarrollo del programa, cómo simplemente lograr el efecto.