Construire un site de portefeuille élégant à partir de zéro

Rien de tel que la construction d'un site entier pour vous montrer un bon aperçu du fonctionnement d'une mise en forme CSS. Chez PSDTUTS, nous avons un tutoriel où vous pouvez concevoir un design web élégant et haut de gamme. Dans ce tutoriel, nous allons prendre ce fichier PSD et le construire avec de jolis fichiers HTML et CSS propres.

Démo et code source

Étape 1

Alors, voici la conception que nous allons construire. Comme mentionné, vous pouvez suivre le tutoriel sur PSDTUTS pour construire cette conception à partir de zéro. Dans ce tutoriel, nous allons seulement construire cette page d'accueil, mais si vous l'utilisiez comme base, vous seriez en mesure de créer des pages intérieures suivant la même présentation..

Étape 2

La première chose à faire est de décider comment nous allons structurer notre construction. Ce processus devient plus facile avec le temps, car vous apprendrez comment les dispositions CSS peuvent fonctionner. Pour cette conception, je pense que nous pouvons nous en sortir avec une construction très simple qui utilise un peu de positionnement absolu et une grande image de fond.

Quel est le positionnement absolu?
Lorsque vous placez un élément HTML sur une page (par exemple, une

et ainsi de suite) il a une position naturelle qui est déterminée par ce qui l’a précédé. Ainsi, par exemple, si vous mettez un texte avec du texte, puis vous en placez un autre, il apparaîtra juste en dessous du premier.

. Il va juste couler sur par rapport au dernier élément.

Le positionnement absolu est différent en ce sens que vous spécifiez un emplacement exact pour un objet et que vous le sortez du flux régulier d'éléments. Donc, si vous aviez votre première comme avant, mais pour la suivante, vous lui avez donné une position absolue de gauche: 500 pixels; en haut: 500 px; Ensuite, il apparaîtrait précisément à cet endroit indépendamment de la précédente

Vous définissez la position absolue de quelque chose comme ceci:

 .className position: absolute; en haut: 0px; gauche: 0px;

Inconvénients du positionnement absolu
Le principal problème de l'utilisation du positionnement absolu est que vos éléments ne sont pas vraiment liés les uns aux autres. Ainsi, par exemple, si vous avez un bloc de texte près du haut de votre page et un autre bloc un peu plus bas, cela peut sembler génial lorsque chaque bloc de texte est court. Mais si le bloc supérieur devait contenir un gros texte, au lieu d’enfoncer le bloc de texte suivant, il irait au-delà. En effet, vous retirez les éléments du flux naturel de la page..

Le positionnement absolu n'est donc vraiment utile que pour les objets dont vous savez qu'ils auront toujours une certaine taille et pour lesquels il n'est pas nécessaire d'interagir avec d'autres éléments..

Pourquoi c'est utile pour nous aujourd'hui
La bonne chose à propos du positionnement absolu, c'est que c'est vraiment, vraiment facile! Vous dites au navigateur où mettre quelque chose et c'est là qu'il apparaît! Pour couronner le tout, il y a beaucoup moins de problèmes de compatibilité de navigateur lorsque vous positionnez les choses de manière absolue. Après tout 100px est 100px si vous êtes dans Firefox, Internet Explorer ou Safari.

SOOO notre mise en page
Nous allons donc créer notre site Web comme suit:

Avoir une grande image de fond
Positionnez absolument le logo, les menus et le panneau d'en-tête précisément à l'endroit où ils doivent apparaître
Que tout notre contenu apparaisse dans une base régulière
balise, mais donnez-lui tellement de rembourrage que le contenu est poussé jusqu'à l'endroit où il est censé être
Avoir notre pied de page assis en dessous

Si cela n'a pas encore beaucoup de sens, ne vous inquiétez pas, vous verrez le site se dessiner.!

Étape 3

Maintenant, en termes d'images d'arrière-plan, nous avons besoin de deux. L’un va être gigantesque, et en fait, après l’avoir enregistré au format JPG, sa taille est d’environ 56 ko. Il y avait un temps où cela aurait été un peu trop grand, mais ces jours ce n'est pas un gros problème.

Nous avons donc besoin d’une seconde image d’arrière-plan qui sera une fine tranche. Cette tranche se répète encore et encore sur la droite de sorte que lorsque vous faites glisser la fenêtre du navigateur, ouvrez-la en mosaïque.

(Notez que le logo ne devrait pas apparaître ci-dessous dans l'image d'arrière-plan, ce n'était que quelques mauvaises captures d'écran, désolé!)

Vous pouvez voir les deux images que j'ai créées ici et ici.

Étape 4

OK alors commençons notre HTML. Nous établissons d’abord quelques notions de base:

    PSD vs NET       
 
    Conçu pour un tutoriel PSDTUTS et NETTUTS de Collis! Voir le didacticiel Photoshop, voir le didacticiel Web

Comme toujours, il est préférable de travailler de l'extérieur avec notre mise en page. Donc, ce que j'ai fait ici est la place trois principaux

's Les deux premiers sont les conteneur_extérieur / récipient et l'autre est le bas de page. Cela nécessite un peu d'explication:

J'ai créé le conteneur_extérieur et récipient parce que j'ai besoin d'une double image de fond. C'est-à-dire que j'ai besoin d'une image d'arrière-plan en mosaïque, puis de cette grande image d'arrière-plan. Donc dans le conteneur_extérieur Je vais placer le fond de carrelage, puis sur le récipient
qui apparaîtra sur le conteneur extérieur, j'aurai ce grand fond principal.
Le pied de page doit être à l'extérieur des conteneurs car, si la fenêtre du navigateur était étirée dans le sens de la longueur, le pied de page devrait continuer encore et encore. Comme il a son propre fond, il ne peut pas être dans les conteneurs - s'il l'était et que vous étiez allongé à un moment donné, vous verriez le fond du conteneur et non le pied de page.!

Vous verrez également que j'ai ajouté du contenu dans le pied de page, il ne s'agit que du mini logo et du texte. J'ai enveloppé le texte dans un balise pour que je puisse le manipuler. Il n'y a aucune raison de donner le marquez un identifiant ou une classe, parce que nous pouvons simplement dire #footer img et comme c'est la seule image là-bas, nous pouvons l'appeler ainsi. Cela simplifie un peu notre HTML.

Étape 5

Maintenant, le CSS pour notre code jusqu'à présent:

 corps marge: 0px; remplissage: 0px; couleur de fond: # 11090a; font-family: Arial, Helvetica, sans serif;  #outside_container background: url (images / background_slice.jpg) repeat-x # 000000;  #container background: url (images / background_main.jpg) no-repeat; hauteur min .: 800px;  #footer border-top: 1px solid # 3f2324; remplissage: 30px 50px 80px 50px;

Donc, en passant un à la fois:

Tout d'abord, nous redéfinissons la corps étiquette. C'est presque toujours la première chose que je fais. Nous nous débarrassons de toute marge et de tout remplissage par défaut, définissons une couleur d'arrière-plan et une famille de polices pour la page. Notez que la couleur de fond est en fait le bas de page la couleur de fond. Comme je l’ai mentionné précédemment, c’est pour que si vous étiriez la fenêtre du navigateur à la verticale, vous continuiez à voir le pied de page..
Ensuite nous avons le conteneur_extérieur étiquette. Je lui ai donné cet arrière-plan de tranche, il ne se répètera que le long de l'axe des x (c'est-à-dire de gauche à droite) et s'il n'y a pas d'image d'arrière-plan, nous verrons tout droit en noir (# 000000). Donc, fondamentalement, la page s'allonge, les tuiles ne continuent pas, car nous avons dit de ne répéter que de gauche à droite, nous obtiendrons le fond noir. C'est parfait parce que notre image de mosaïque s'estompe au noir!
Ensuite nous avons le récipient. Ici, nous avons la gigantesque image d’arrière-plan définie pour ne pas se répéter - elle n’apparaît donc qu’une fois. Notez que nous n'avons pas spécifié de couleur d'arrière-plan. Si nous l'avions eu, cela aurait recouvert notre conteneur outside_container. C'est parce que ça
La balise est dans la précédente et s’étendra automatiquement pour la remplir complètement. Ainsi, notre image d’arrière-plan apparaît au-dessus, puis à l'extérieur de cette zone, vous pouvez voir l'arrière-plan outside_container.
J'ai également donné au conteneur une hauteur minimale, afin que, lorsque nous regardons la page HTML à ce stade, vous puissiez voir approximativement son aspect lorsqu'il y a du contenu. Plus tard, notre contenu produira quand même la hauteur minimale.
Le pied de page est fondamentalement juste une bordure d'une seule ligne et un peu de remplissage. Il n'est pas nécessaire de lui attribuer une couleur de fond, car nous la définissons dans le plus tôt. Rappelez-vous qu'avec les définitions de remplissage, cela ressemble à ceci: rembourrage: en haut à droite en bas à gauche (dans le sens des aiguilles d'une montre!)

Voici où nous en sommes maintenant…

Voir le site jusqu'à présent

Étape 6

Nous terminerons ensuite ce pied de page en ajoutant quelques styles supplémentaires comme celui-ci:

 / * Pied de page * / #footer border-top: 1px solid # 3f2324; remplissage: 30px 50px 80px 50px; couleur: # 674f5d; taille de police: 9px; hauteur de ligne: 14px;  #footer img float: left; marge droite: 10px;  #footer span display: block; float: gauche; largeur: 250px;  #footer a color: # 9e8292; texte-décoration: aucun;  #footer a: hover color: #ffffff;

Donc ici, j'ai ajouté quelques bits à notre classe #footer et créé quelques classes supplémentaires. Passons en revue un morceau à la fois:

Tout d’abord, les bits entre / * et * / sont des commentaires CSS. Il est agréable d’avoir des commentaires dans votre fichier CSS car cela le brise vraiment et aide à garder les choses intelligibles. En fait, sur des projets plus importants, je trouve que les fichiers CSS peuvent devenir assez incontrôlables si vous ne faites pas attention. Il est donc bon d'essayer de prendre de bonnes habitudes tôt: nommez bien vos sélecteurs, ajoutez des commentaires, restez comme les choses ensemble, divisez-vous en plusieurs fichiers CSS pour des projets plus volumineux, etc..
Dans #bas de page J'ai ajouté une couleur de police, une taille de police et une hauteur de ligne à notre définition précédente. La hauteur de ligne est un attribut de texte vraiment utile car elle vous aide à espacer votre texte. Sans une bonne hauteur de ligne, le texte peut paraître groupé et plus difficile à lire. Trop de hauteur de ligne et le texte sera tellement espacé qu'il paraît bizarre. Vous voudrez peut-être expérimenter pour trouver les hauteurs appropriées pour différentes polices et tailles. Ici 14px semblait être un bon ajustement.
Ensuite j'ai mis le #footer img et #foot span pour les deux float: left. Parce qu'ils sont tous deux configurés pour flotter à gauche, ils se retrouvent dans des colonnes côte à côte. Je parlerai plus en détail de flottement et de colonnes plus loin dans ce tutoriel..
Enfin, nous disons au navigateur quoi faire avec balises (c'est-à-dire des liens) qui apparaissent dans le pied de page. C'est-à-dire qu'ils ne doivent pas être soulignés et doivent changer de couleur lorsque vous survolez la souris avec la souris.

Donc, avec l'ajout du pied de page, voici où:

Voir le site jusqu'à présent

Étape 7

Maintenant que le pied de page est ouvert, ajoutons un peu plus de contenu à la page à l'intérieur des zones de conteneur principales. Nous avons d’abord besoin de deux nouvelles images que nous créons à partir de notre fichier PSD:

Notez que j'ai utilisé une image pour le gros bloc de texte. En général, il est préférable d’utiliser du texte pour ces opérations car cela rend la page beaucoup plus consultable et constitue une bonne pratique. Mais cela aurait été beaucoup plus difficile à faire car nous aurions besoin d'utiliser un peu de Flash et de SIFr pour obtenir cet effet. Donc, comme il s’agit d’un tutoriel assez simple, j’ai choisi d’utiliser une grande image :-)

Voici un extrait de notre code HTML - juste le bit de conteneur:

     Retouche
 Effets numériques
 Travail Web
 
  Sur
 Contact

Donc, dans la zone des conteneurs, nous avons ajouté cinq choses:

Notre logo: Il est lié, donc en cliquant dessus, vous accédez à la page d'accueil.
Menu principal: Ceci est simplement une liste non ordonnée avec
Le menu de droite: C'est le même que l'autre menu, juste différent
Grand texte image du panneau: Ceci est notre texte de titre principal enregistré en tant qu’image,
Contenu Div: Et c'est là que nous allons placer tout le contenu de notre page plus tard. Je l'ai laissé vide pour le moment, à l'exception d'un commentaire HTML.

Donc, avant de commencer à la mettre en forme, il est utile de jeter un coup d'œil sur l'apparence de la page avec tout ce qui a été jeté comme ceci:

Comme vous pouvez le constater, nous allons devoir procéder à de sérieux changements pour que tout soit en place. Comme vous vous en souviendrez, nous allons utiliser le positionnement absolu pour le faire rapidement et facilement..

Étape 8

Voici le CSS que nous avons ajouté pour que nos éléments commencent à s'intégrer:

 #container background: url (images / background_main.jpg) no-repeat; hauteur min .: 800px; largeur: 1000px; position: relative;  / * Logo / Menu / Positionnement du panneau * / #logo position: absolute; en haut: 58px; à gauche: 51px;  #panel position: absolute; en haut: 165 px; à gauche: 51px;  ul # menu margin: 0px; remplissage: 0px; position: absolue; en haut: 145 pixels; à gauche: 75px;  ul # right_menu margin: 0px; remplissage: 0px; position: absolue; en haut: 145 pixels; à droite: 75px;

Encore une fois, examinons chaque morceau un par un:

Tout d’abord, vous verrez un vieux fragment de notre code - le récipient. J'ai montré ceci en y ajoutant deux lignes supplémentaires. Il a maintenant un largeur: 1000px et position: relative. Ceci est important car lorsque vous définissez la position comme relative, tout ce qui est absolument positionné à l'intérieur est fait relatif à cette balise conteneur. Cela signifie donc que je peux placer des éléments à l'intérieur de cette boîte, en utilisant le fait que je sais que sa largeur est de 1000 pixels. À savoir que je vais l'utiliser pour le right_menu.
Suivant parce que ceci est un nouvel ensemble de CSS, je l'ai séparé avec un commentaire
Avec le logo et panneau J'ai donné à tous les deux une position absolue sur la page. Comment savoir quels numéros utiliser? Retournez simplement au document Photoshop original et mesurez où ils sont censés être! Vous pouvez voir que c'est une définition de classe très simple, ce qui explique pourquoi le positionnement absolu est si facile.
Suivant avec les deux menus, ceux-ci sont également parfaitement positionnés, mais ici je leur ai également donné marge: 0px; remplissage: 0px; définitions pour nous assurer que nous éliminons toutes les marges et les marges de remplissage par défaut des listes non ordonnées..
Notez ensuite que sur le right_menu quand j'ai spécifié la position absolue d'être à droite: 75px. Cela signifie qu'il apparaîtra à 75 px du côté droit de son conteneur. Habituellement, ce serait la fenêtre du navigateur, mais parce que rappelez-vous plus tôt, je règle le récipient avoir position: relative cela signifie qu'il sera 75px loin du côté droit de
.
Maintenant, vous pourriez penser, bien quel est le point, je ne peux pas simplement positionner les choses en utilisant la gauche seulement? Bien, vous le pouvez, mais avec notre menu, si vous deviez ajouter des éléments de menu supplémentaires, vous auriez besoin de le repositionner encore et encore, de sorte qu'il soit encore à 75px du côté droit. Attendu qu'en utilisant droite les éléments de menu supplémentaires restent lorsque vous les ajoutez. Essayez et voyez!

Alors voici où nous en sommes:

Étape 9

Comme vous pouvez le voir dans l'image précédente, le logo et l'élément de titre ont maintenant l'air d'être dans la bonne position. Mais les menus sont un peu bizarres. Avant de les nommer, un mot rapide sur le panneau logo / image. Vous vous demandez peut-être, s’il s’agit des deux images, pourquoi ne pas les intégrer à l’image d’arrière-plan?

La réponse est que le logo que nous souhaitons associer, de sorte que cliquer dessus ramènera à la page d'accueil (rend le site plus utilisable) et au panneau de texte principal, ce qui changerait probablement de page en page. Donc, en ayant une seule image, nous pouvons avoir beaucoup de pages HTML utilisant la même feuille de style CSS mais simplement y positionner une image différente avec du texte différent.

Maintenant, modélisons les deux menus et faisons en sorte que notre page commence vraiment à prendre forme. Pour ce faire, nous avons besoin du CSS suivant:

 ul # menu margin: 0px; remplissage: 0px; position: absolue; en haut: 138px; à gauche: 75px;  ul # right_menu margin: 0px; remplissage: 0px; position: absolue; en haut: 138px; à droite: 110px;  ul # menu li, ul # right_menu li margin: 0px; remplissage: 0px; style de liste: aucun; marge droite: 10px; taille de police: 9px; text-transform: majuscule; affichage: en ligne;  ul # menu li a, ul # right_menu li a text-decoration: none; couleur: # bd92b2;  ul # menu li a: survol, ul # right_menu li a: hover text-decoration: none; couleur: #ffffff;

Les deux premiers bits de ce code sont les mêmes que précédemment (bien que j’ai légèrement ajusté les positions pour les faire apparaître juste après le style). Notez que ces deux définitions sont distinctes car elles ont des positions différentes, mais nous les avons ensuite combinées dans les mêmes définitions de classe, car les éléments de menu eux-mêmes devraient se ressembler. Le format permettant de définir deux classes ensemble est le suivant:

.myClass, .myClass2 …

Ceci est très différent de cette définition:

.myClass .myClass2 …

Parce que la deuxième définition dit, tous les éléments avec à l'intérieur un élément avec.

Quoi qu'il en soit, revenons à nos styles. Passons en revue quelques points importants:

Nous avons mis la
- éléments à l'intérieur de ceux
  - La définition suivante dit que pour étiquettes de lien qui apparaissent à l'intérieur d'un
  - tag qui sont à l'intérieur

Et avec cela, notre page est maintenant très bien!

Voir le site jusqu'à présent

Étape 10

Ensuite, il est temps d'ajouter du contenu! Premièrement, ajoutons du texte factice, configuré de manière à pouvoir créer des colonnes. Voici le code HTML:

Retouche
Effets numériques
Travail Web

Sur
Contact

un design épuré
Texte factice: Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..
Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..

tutoriels
Texte factice: Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..
Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..

travail récent
Texte factice: Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..
Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..

OK, donc dans cet extrait, vous pouvez voir que j'ai ajouté 3 nouveaux

est à l'intérieur de la zone de contenu. Chacun a un

élément de titre et leur un peu de texte. Ils ont des noms de classe column1, column2 et column3. La raison pour laquelle j'ai ajouté tout le texte supplémentaire est pour vous montrer quelque chose sur la création de colonnes.

Ajoutons d'abord quelques CSS pour les faire apparaître comme des colonnes:

 / * Content * / #content padding-top: 435px; padding-left: 85px; largeur: 815px; couleur: # 674f5d; taille de police: 13px; hauteur de ligne: 20px;  .column1 float: left; largeur: 230px; marge droite: 30px;  .column2 float: left; largeur: 230px; marge droite: 30px;  .column3 float: left; largeur: 270px;

Comme d'habitude, j'ai séparé notre nouveau CSS par un commentaire. Ensuite, j'ai défini des styles pour #contenu. Remarquez combien il y a de rembourrage… 435px! C'est pour faire de la place pour tous ces éléments absolument positionnés plus tôt. Contrairement à ces éléments, cette zone de contenu se trouve dans le flux normal de la page..

Cela doit être dans le flux régulier, car à mesure que vous ajoutez du contenu, le pied de page doit être abaissé. Si cela était absolument positionné, il irait juste au-dessus du pied de page.

Maintenant, les trois classes de colonnes, notez qu’elles sont définies avec une largeur et float: gauche. Cela leur indique qu'ils doivent dériver vers la gauche de la page, alignés à côté de tout autre élément flottant à gauche. J'ai donné aux deux premiers une marge droite pour qu'ils ne soient pas collés l'un à l'autre.

Flotter un élément le fait dériver à gauche ou à droite et dit à tout le reste de l’enrouler. Lorsque les autres éléments sont également flottants, ils forment des colonnes. Généralement, chaque fois que vous voyez une disposition de colonne, elle utilise des flottants.

Malheureusement, il y a un problème étrange avec les flotteurs. À savoir qu'ils ont un problème avec leurs conteneurs. Au lieu de pousser les éléments suivants vers le bas, ils dérivent simplement vers le haut. La façon de résoudre ce problème est d’avoir un élément qui vient après qui a la propriété clarifier les deux.

La propriété Clear dit d'arrêter d'enrouler des objets autour du flottant

's C'est un peu difficile à expliquer, alors regardons ce qui se passe avec et sans le nettoyage.

Sans compensation
Voici à quoi ressemble la mise en page:

Observez comment les colonnes ont dérivé au-dessus du pied de page et le pied de page lui-même a commencé à s'enrouler autour d'eux. Ce n'est pas juste!!

Avec dégagement
La solution est relativement simple, nous devons ajouter un

après les trois colonnes comme ceci:

un design épuré
Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..
Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..

tutoriels
Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..
Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..

travail récent
Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..
Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..

Voir le

au fond? C'est juste un vide

cela dit d'effacer les trois colonnes. Et ça règle notre problème,

Voir le site ici.

Quelques derniers mots sur les flotteurs et leur nettoyage
Vous vous demandez peut-être pourquoi je n'ai pas placé le "clair: les deux" dans le

définition, mais malheureusement cela ne fonctionne pas à cause du fond que nous utilisons… voici une capture d'écran:

Apparemment, il existe une solution qui ne consiste pas à insérer un inutile

balise, et vous pouvez lire à ce sujet à QuirksMode. Personnellement, j'utilise cette méthode depuis un moment et elle fonctionne bien et de manière cohérente, alors je continue de le faire..

Étape 11

OK, presque là maintenant !! La mise en page principale est entièrement triée. Tout ce que nous avons à faire est d’ajouter et de styliser notre contenu. Voici le code HTML pour cela:

   un design épuré
 Cette conception a été réalisée pour un tutoriel de développement Web et Photoshop. Vous pouvez voir la première partie sur PSDTUTS.com où vous apprendrez à créer un design beau mais simple en utilisant un fond abstrait et un type.
 La seconde partie du didacticiel est disponible sur NETTUTS.com, où nous construisons rapidement le PSD en un site HTML / CSS viable et performant..
 
  tutoriels
 Les psdtuts et nettuts fournissent des tutoriels sur les sujets suivants (en quelque sorte):
  
  travail récent
     Travailler dans les limites pour réaliser de superbes designs
 Sean Hodge  
    Créer une zone de contenu lisse avec onglets à l'aide de jQuery
 Collis Ta'eed  
    Création d'un formulaire de paiement PayPal
 Collis Ta'eed

C'est fondamentalement la même structure que précédemment, sauf dans la troisième colonne, j'ai créé un

élément pour contenir le travail récent. Note

Code

Construire un microsite Slider avec Timeline Lite de GreenSock

Construire un modèle de site Web simple à l'aide de SWFAddress