Quelle est la meilleure façon de passer d’une maquette Photoshop au HTML et CSS sémantiques ?

Question

J'utilise généralement un processus manuel :

1. Regardez la page, déterminez les éléments sémantiques et construisez le HTML
2. Découpez les images dont je pense avoir besoin
3. Commencez à écrire du CSS
4. Ajustez et répétez différentes étapes si nécessaire

Vous avez une meilleure approche ou un outil ?

Answer 1

J'ai une manière assez naturelle de coder.La clé est de traiter la page comme un document ou un article.Si vous y réfléchissez ainsi, ce qui suit devient logiquement clair :

1. Le titre de la page est un en-tête de niveau supérieur

   • Que vous choisissiez le titre du site ou le titre de la page, le h1 dépend de vous - personnellement, je ferais à propos de nous le h1 plutôt que Stack Overflow.

2. La navigation est une table des matières, et donc un liste ordonnée - vous pouvez aussi bien utiliser un ol plutôt qu'un ul.

3. Les en-têtes de section sont h2, les sections à l'intérieur de ces sections sont h3, etc.Empilez-les.

4. Utilisez des guillemets et des guillemets lorsque cela est possible.Ne vous contentez pas de l'entourer de ".

5. N'utilisez pas b et i.Utilisez fort et em.En effet, HTML est un balisage structurel plutôt que de présentation. Fort et emLes balises de phase doivent être utilisées là où vous mettez l'accent sur le mot.

6. <label> vos éléments de formulaire.

7. Utiliser <acronym>sable <abbr>s lorsque cela est possible, mais seulement en premier lieu.

8. Le plus facile:toujours, toujours donnez à vos images un texte alternatif.

9. Il existe de nombreuses balises HTML que vous pourriez utiliser et que vous n'avez probablement pas utilisées : adresse pour les adresses postales, sortie de code d'écran.Jettes un coup d'oeil à Chien HTML pour certains, c'est ma référence préférée.

Ce ne sont que quelques indications, je suis sûr que je pourrais en penser davantage.

Oh, et si vous voulez un défi, écrivez d'abord votre XHTML, puis écrivez le CSS.Lorsque vous utilisez CSS, vous n'êtes pas autorisé à toucher au code HTML.C'est en fait plus difficile que vous ne le pensez (mais j'ai trouvé que cela me rendait plus rapide).

Answer 2

Eh bien, lorsque je crée un site Web, j'ai tendance à essayer d'oublier complètement le design lors de l'écriture du code HTML.Je fais cela pour ne pas me retrouver avec un balisage spécifique à la conception et pour pouvoir me concentrer sur la signification sémantique des éléments.

Quelques conseils pour baliser les choses :

• menu - utilisez l'élément UL (liste non ordonnée), puisque c'est exactement ce qu'est un menu.une liste de choix non ordonnée.exemple:

  <ul id="menu">
      <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
      <li id="about"><a href="/about" title="More about us">About</a></li>
  </ul>
  

  si vous souhaitez un menu horizontal, vous pouvez faire ceci :

  #menu li {
      display: block;
      float: left;
  }
  

• Logo : utilisez un élément H1 (titre) pour le logo au lieu d'une image. Exemple :

  <div id="header">
      <h1>My website</h1>
  </div>
  

  Et le CSS (la même technique peut être appliquée au menu ci-dessus si vous souhaitez un menu avec des éléments graphiques) :

  #header h1 {
      display: block;
      text-indent: -9999em;
      width: 200px;
      height: 100px;
      background: transparent url(images/logo.png) no-repeat;
  }
  

• ID et classes : utilisez des ID pour identifier les éléments dont vous n'avez qu'une seule instance.Utilisez la classe pour identifier les éléments dont vous avez plusieurs instances.

• Utilisez un navigateur textuel (par exemple, lynx).S'il est logique de naviguer de cette manière, vous avez bien fait en matière d'accessibilité.

J'espère que ça aide :)

Answer 3

Je fais essentiellement la même chose que Jon, mais voici quelques autres idées :

1. Utilisez les guides dans Photoshop (et verrouillez-les).Déterminez à l’avance toutes vos dimensions pour chaque boîte/région.

2. Rassemblez toutes vos dimensions et valeurs hexadécimales de couleur dans un fichier d'informations (j'utilise un fichier txt) que vous pouvez facilement référencer.Cela réduira votre taxe sur la tabulation alt et la sélection des couleurs dans Photoshop plusieurs fois.

3. Une fois tous mes guides en place, je découpe l'intégralité du site Web dans mon dossier d'images, en commençant par les photos et les éléments groupés, et en terminant par les différentes vignettes/images d'arrière-plan, si elles existent.(Conseil:Utiliser Ctrl-cliquez sur l'aperçu du calque pour sélectionner le contenu de ce calque).

Remarques sur l'utilisation de Photoshop :

• Utilisez les guides ou la grille.
• Utilisez la fonction Notes pour toute information pertinente
• Utilisez toujours des groupes de calques pour des éléments similaires.Nous devons pouvoir désactiver des régions entières en un seul clic.Placez tout le contenu de l'en-tête dans un seul groupe de calques.
• Nommez toujours vos calques.
• Vous pouvez placer chaque modèle de page dans un fichier PSD et utiliser des groupes de calques imbriqués pour les organiser.De cette façon, nous n'avons pas besoin de configurer tous nos guides et notes pour chaque modèle de page d'un site.

Answer 4

Pas de raccourcis :) mais tout le monde fonctionne légèrement différemment.

Ce tutoriel qui est apparu hier dans mon lecteur de flux montre le processus du début à la fin et pourrait aider les personnes qui ne l'ont jamais fait auparavant, mais comme vous êtes un vétéran, il s'agit simplement de rationaliser vos propres méthodes.

MODIFIER:Le lien listapart est certainement plus automatisé pour les conceptions « plates » où Imageready et Fireworks ont bénéficié d'un assez bon support dès le premier jour et il s'est amélioré et plus sémantique à chaque version, mais si vous avez une conception plus complexe, ce sont les éléments compliqués qui font le concevoir ce que c'est et cela doit être fait à la main.

Answer 5

J'ai juste pensé qu'il valait la peine de souligner qu'en plus des excellents conseils que vous avez reçus jusqu'à présent, je vous recommanderais d'obtenir une version imprimée du dessin, en utilisant un stylo rouge pour marquer tous les éléments de bloc sur le dessin que vous pensez peut repérer et s'asseoir avec le concepteur pendant une demi-heure et discuter de la façon dont il envisageait sa conception fonctionnant pour les cas d'utilisation qui ne correspondent pas à la conception statique.

• Que se passe-t-il lorsque davantage de texte est inséré dans la navigation ?
• Cette largeur est-elle fixe ou fluide ?
• Ce volet de contenu est-il à la bonne hauteur fixe ou fluide ?Si c'est fluide, pourquoi avoir mis un arrière-plan qui ne peut pas être répété ?
• Vous avez une bordure s'étendant vers le bas de la page qui sépare deux éléments autrement connectés.Visuellement, cela a du sens, mais sémantiquement, je ne peux pas simplement utiliser un li pour héberger ces deux éléments.Selon vous, qu’est-ce qui est le plus important ?

Cela vous aidera également à repérer les problèmes potentiels dont vous n'auriez peut-être pas réalisé autrement qu'ils allaient être des problèmes jusqu'à ce que vous soyez plongé dans le CSS.

Non seulement cela facilite votre travail après quelques tentatives, mais votre designer aura une bien meilleure idée de ce qu'implique le balisage de son travail - certains designers ont vraiment du mal à comprendre pourquoi quelque chose qu'ils pensent visuellement très simple prendra quelques minutes. jours de peaufinage CSS pour faire fonctionner.

Answer 6

Certains des designers que je connais utilisent généralement Illustrator pour créer les éléments de conception.

Answer 7

Cette page montre comment le faire un peu plus automatiquement.

Answer 8

Découvrez également la fonctionnalité « Layer Comps ».Je l'utilise pour changer l'état des boutons.

1. Créez des compositions de calques pour normal, survol et actif.
2. Dans chacun d’eux, configurez les effets/superpositions de couleurs et les calques visibles qui appartiennent à cet état.
3. Enregistrer pour le Web :accédez à un dossier différent pour chaque état, à moins qu'il ne soit plus facile de renommer chaque tranche (sinon les tranches de votre bouton de survol écraseront vos tranches habituelles).