D'une manière générale, le travail effectué par la conception Web est en fait: convertir les rendus PSD en pages de modèle HTML + CSS. Généralement, nous obtiendrons le PSD de l'artiste, et différentes personnes auront des approches différentes:
1. Ouvrez les feux d'artifice et exportez l'image vers HTML.
2. Utilisez directement des outils tels que Dreamweaver pour faire glisser et disposer la mise en page, importer des images pertinentes et des ressources flash.
3. Après avoir terminé la coupe en PS, regardez d'abord les rendus dans l'éditeur de texte et faites-les pas à pas.
Ce qui précède est les méthodes les plus couramment utilisées, mais aucune d'entre elles n'est bonne:
La première méthode est le pire, ce code n'est pas du tout maintenu ou lisible.
La deuxième méthode n'est pas bonne non plus, le code sera inévitablement redondant et les choses que vous faites doivent être vérifiées.
La troisième méthode n'est pas bonne non plus, car vous devez regarder les rendus peu à peu, c'est-à-dire, lorsque vous écrivez la balise HTML, vous supposez constamment comment afficher cette pièce.
Façon correcte de le faire:
1. Après avoir obtenu le PSD, ne faites rien d'autre en premier. Écrivez le framework de page Web directement dans l'éditeur de texte. Ne présumez pas comment rendre ce CSS à l'avenir. Il s'agit d'une étiquette complètement naturalisée sans ajouter de CSS.
2. Après avoir écrit, assurez-vous qu'il n'y a aucun problème avec le positionnement global après avoir exécuté chaque navigateur.
3. Écrivez le CSS global, ici le CSS n'est responsable que du positionnement et du style des grands blocs.
4. Découpez les ressources d'image requises, construisez-les petit à petit dans le cadre écrit, les déboguez constamment et deviennent enfin le produit fini.
5. Enfin, ajoutez des commentaires à votre propre code et ajoutez des commentaires à votre propre code de manière appropriée dans CSS et HTML.
Il y a encore beaucoup de choses à faire attention si nous voulons faire un commutateur flexible pour faire la peau et laisser CSS dominer les performances, mais le processus général est comme ça. Bien sûr, nous ne pouvons pas écrire HTML directement au début, mais au moins nous devons avoir cette conscience et procéder étape par étape. . .
Les fichiers PSD ont coupé les sites Web de deux points majeurs:
1. Une page indépendante
1. Analysez cette page et décrivez d'abord la structure générale dans votre tête ou sur le projet de papier.
2. Selon la situation du projet de conception, analysez la distribution des images d'arrière-plan, la distribution des images ICO, etc.
3. Coupez les images correspondantes, exportez et fusionnez les images
4. Écrivez la structure globale du code xhtml dans l'éditeur, y compris la structure de tous les éléments qui apparaissent dans la page
5. Écrivez le code global et le module dans le style CSS
6. Réglage des détails
7. Après les travaux, le navigateur vérifiera s'il est correct
2. Petit ou grand site composé de plusieurs pages
1. Parcourir tous les brouillons de conception et unifier la distribution des modules, des images et des fichiers du site
2. Démarrez le premier point de fonctionnement, mais il est important de planifier la distribution de contenu du site.
Considération globale:
1. Fusionnant des images pour réduire le nombre de demandes
2. Rationalité structurelle et sémanisation
3. La simplicité du style facilite le maintien plus tard
4. Considérez principalement la maintenance et le développement de programmes ultérieurs, comment réaliser simplement l'effet.