Comment allez-vous commencer à traduire une mise en page de conception Web pour une implémentation HTML? [fermé]

Question

Je lisais ce tutoriel sur la création d'un web layout dans Photoshop pour se retrouver avec quelque chose comme ceci:

_{(source: adobetutorialz.com )}

Cela semble produire un seul fichier image , cependant, et il n'y a pas d'explication de la façon de traduire en un web application implementation.

Ce que je veux dire est, vous devez avoir la fonctionnalité quand quelqu'un clics sur "About Us", "Services", etc.

Alors, quelle est l'étape suivante, vous devez suivre pour aller de cette image static dans une application web fonctionnelle plus de dynamic?

Êtes-vous censé briser l'image en sections et placez-les sous forme d'images d'arrière-plan sur la page?

Answer 1

Installer Firebug sur FireFox et inspecter les pages d'images lourdes aléatoires. En utilisant Firebug, vous pouvez facilement vérifier le code HTML d'une page web et voir les styles et les images associées.

Answer 2

Sauf si vous êtes intéressé à dépenser beaucoup de mise en page CSS temps d'apprentissage, votre chemin le plus facile vers le succès serait d'envoyer le fichier Photoshop à quelqu'un comme psd2html , qui fait ce genre de chose très rapidement et pour un prix scandaleusement bas. Cela vous permettra de vous concentrer vos efforts de développement sur les fonctionnalités de l'application.

Conception d'un modèle Web dans Photoshop est grande, parce que vous n'êtes pas limité par des notions préexistantes de ce que vous savez comment faire avec CSS. Mais il est dangereux pour cette même raison. Certains modèles de mise en page sont très bien établies et facile à faire avec CSS, alors que d'autres choses qui pourraient sembler comme ils devraient être très facile, ne sont pas.

Answer 3

Pour étendre sur un commentaire précédent:

1. Utilisez un outil de découpage en tranches ou le faire vous-même, briser les images en sections qui SORROUND, mais ne comprennent pas le texte.
2. Mettez les éléments de texte dans le code HTML [ne le gardez pas sur les images, ou il peut devenir difficile de le mettre à jour plus tard]
3. Utilisez un fichier CSS externe pour gérer le schéma de couleurs.

Answer 4

Voici ce que vous devez: étape par étape pour la mise en page CSS / HTML?

Il est quelques conseils supplémentaires pour renforcer le lien ci-dessus: https://stackoverflow.com/questions/1321097/seo-where-do- i-start / 1321284 # 1321284

Ne pas couper l'image, comme d'autres ont recommandé, si vous n'avez pas. Cela est extrêmement inefficace. découpage de l'image est une pratique désuète qui se traduira par de nombreuses images envoyées à vos utilisateurs chaque image ayant son propre en-tête HTTP. Qui aspire le temps des peuples de la bande passante et les déchets. Servir quelques fichiers d'image possible à l'utilisateur et utiliser les CSS pour les faire travailler dans votre mise en page. Regardez une technique appelée Sprites CSS pour voir combien de différentes images peut être servi dans un seul fichier pour représenter différents composants d'une mise en page.

Answer 5

Oui. Vous aurez besoin d'utiliser l'outil Slice pour briser l'image en régions. De là, je crois que vous pouvez « Enregistrer pour le Web » et il va générer HTML table et des images qui monté vous vous pouvez convertir en pages. Photoshop est une seule pièce du puzzle.

Answer 6

Utilisez un outil de retouche d'image pour découper votre image dans les images nécessaires pour rendre votre page. Savoir où et quoi tranche vient avec l'expérience, mais voici quelques conseils -

1. Toutes les images sont rectangulaires, il pourrait donc aider à penser à « colonnes » et « lignes » en faisant le découpage en tranches. Mais s'il vous plaît utilisez uniquement des tables pour les données de table et non pas pour la mise en page:)

2. Si vous avez un motif répétitif dans une image, tranche la plus petite taille de l'image qui permettra au modèle de tesselate et utiliser les CSS pour le répéter.

3. utiliser le type d'image pour le travail à droite par exemple, Gifs pour les petites animations, .png pour les superpositions, .jpg pour les photos, etc. de href="http://en.wikipedia.org/wiki/Image_file_formats" peut être aider

4. Utilisez la taille du fichier d'image à droite et dimensions pour le travail. J'essaie généralement de rendre les images la taille du fichier aussi petit que possible sans perdre l'effet global de l'image. Rappelez-vous, des images plus grandes = plus de bande passante = plus de temps à télécharger

Une fois que vous avez vos images, je vous recommande d'utiliser Firefox regarder avec le plug-in pixel parfait et Firebug pour mettre la page ensemble. Le pixel parfait plug-in vous permet de superposer une image sur une page Web afin que vous pouvez aligner tout pour correspondre à la maquette originale.

Une fois que vous avez une page de fonctionnement de base en utilisant HTML et CSS, je puis regarder ce point à l'introduction de fonctionnalités côté client via JavaScript / un framework JavaScript. Le faire avant que vous avez fait la mise en page peut commencer à devenir confus, je voudrais donc arriver au point où vous êtes satisfait de ce que vous avez, puis introduire la fonctionnalité. En procédant ainsi, contribue également amélioration progressive et encourage JavaScript discret .

Answer 7

Slicing l'image est généralement la façon dont cela est fait, mais méfiez-vous que le tutoriel car il est écrit que vous a déjà peint dans un coin.

Notez que l'image entière (que je suppose est censé remplir le navigateur comme un site Web) est seulement 766 x 700 pixels. C'est un peu plus de la moitié de la taille d'un moniteur moderne, de sorte que vous aurez une énorme quantité d'espace blanc à droite de contenu (ou de chaque côté du contenu centré).

tailles moyennes des écrans diffèrent par la géographie, donc se familiariser avec ce qui est typique pour votre auditoire et de faire votre couche de fond de cette taille ou plus. Il y a cinq ans ont été dimensionnées tous mes sites pour 800 x 600 moniteurs, et maintenant ils sont faits pour 1024 x 768. Mais je regarde les données de trafic de mes emplacements comme moniteurs plus grands sont utilisés par près de la moitié des visiteurs.

La méthode que vous utilisez pour créer le code HTML pour afficher les images et le texte dépend de votre raison de le faire. Si c'est un passe-temps ou accessoire, utiliser l'un des logiciels de création de site WYSIWYG ou des outils en ligne. Si vous avez l'intention d'apprendre comment faire une carrière, alors vous une faveur et d'apprendre à créer des sites en utilisant les standards du Web (HTML / CSS sémantique). Tout le monde apprend en regardant le code d'autres personnes, mais juste faire attention qui est le code que vous apprendre.

Consultez la rel="nofollow livres d'Eric Meyer sur CSS et article de sept différents PSD en HTML tutoriels pour voir comment d'autres concepteurs aborderaient le problème.

Answer 8

Une approche commune est que j'utilise d'abord la conception de la mise en page en utilisant Photoshop, Illustrator, etc.

Une fois que vous avez la disposition d'examiner la conception d'un regard de haut niveau sur la façon dont les images occupent des formes symétriques sur la page.

ensuite déterminer ce que les images peuvent être carrelés, sprited (comme mentionné previsouly) ou recréés dans les CSS. Par exemple, dans l'image ci-dessus, vous pouvez créer la boîte en mosaïque principalement avec CSS.

Vous pouvez bien sûr tranche comme une image mais vous créez beaucoup de pixels gaspillés qui diminuent seulement les performances de la page et augmentent les temps de chargement.

Restez à l'écart de l'utilisation des tables dans votre conception et regarder vers l'utilisation des tags / couches div en utilisant des balises div combinées avec CSS correctement formaté se traduira par une lumière page qui reflète la disposition exacte d'en haut.

En vous daignez Je voudrais aussi considérer quelques points (qui ont été mentionnés ci-dessus certaines) Concevoir la page pour la présentation fluide. Si vous devez verrouiller l'image à une taille spécifique à savoir 700px concevoir alors la page de sorte qu'il est disposé au centre de la page et se présente proprement pour les résolutions d'écran plus grandes.

Utilisez CSS, autant que vous pouvez et cross-test sur plusieurs navigateurs (ie. Safari, Firefox, etc) Internet Explorer sera rendu CSS différemment des autres navigateurs de sorte que vous devriez être au courant et test pour ce au cours du développement.

Essayez de créer une image de fond que vous pouvez carreler ou qui a un temps de chargement rapide à une grande résolution. Par exemple, si votre site est aménagé pour offrir un visionnement optimal à 1024x768 créer un arrière-plan en utilisant une petite palette de couleurs qui est comparable en taille et gradient se mélange à une couleur de fond commune sur plusieurs côtés. Cela permettra à votre fond d'être une partie de la conception du site mais aussi de soutenir des résolutions plus grandes. le positionnement peut être traité dans css pour le fond.

Si vous êtes nouveau au codage des pages alors je pense que cela peut aider à utiliser certaines des applications comme Photoshop, Illustrator, etc pour convertir l'image en html. Sachez simplement que lorsque vous faites cela, vous obtiendrez beaucoup de code excès qui gonflerait la page et vous obtiendrez également un grand nombre d'images inutiles carrelage dans la page faisant arrière-plans, etc.

En bref, il n'y a pas de substitut pour commencer à pouvoir lire, interpréter et le code de la main le document vous-même. Vous gagnerez plus de flexibilité dans la conception, ainsi que d'accéder à un certain nombre de styles, les attributs et les propriétés qui ne sont pas accessibles dans certaines des applications WYSIWYG.

recherches sur Internet sur CSS et l'utilisation de balises DIV vous revenir à des tonnes d'exemples et de guides de démarrage. Bonne chance!

Answer 9

SuperPreview Microsoft Expression Web vous pouvez mettre l'image en superposition sur votre code html. Mettre à jour le code HTML jusqu'à ce qu'ils ont le même aspect dans tous les navigateurs votre planification pour soutenir.