Où trouver des mises en page psd pour la mise en page. Waxom - Mise en page Photoshop universelle pure
Cet article se concentrera sur les sites que les développeurs créent manuellement, c'est-à-dire qu'ils composent.
Cet article est destiné aux utilisateurs familiarisés avec HTML et CSS . Il est également souhaitable de connaître au moins les bases Adobe Photoshop
Une des étapes de la création d'un vrai site est la création d'un template PSD. Vous pouvez également trouver des noms tels que mise en page, conception ou code source.
Le modèle est commandé au concepteur. Le concepteur dessine la mise en page dans Adobe Photoshop et l'enregistre au format PSD.
Qu'est-ce que le format PSD ?
Pour une meilleure compréhension, un exemple de vie simple peut être donné. Dans l'enfance, tout le monde a collé des applications. Ils ont découpé une maison dans du papier - l'ont collée. Ils ont découpé le sapin de Noël - l'ont collé. Et ainsi de suite jusqu'à ce que le travail soit terminé.
Et maintenant, vous pouvez imaginer une situation dans laquelle les figures ont été découpées, disposées sur une feuille aux bons endroits, mais pas encore collées. Ainsi, le format de fichier PSD peut être comparé à une application sur laquelle les chiffres n'ont pas encore été collés, mais disposés dans le bon ordre.
Grâce à cela, chacune de ces «figurines», ou plutôt chaque fragment individuel du modèle, peut être enregistrée en tant qu'image distincte, qui peut ensuite être utilisée sur le site.
Voici la mise en page de la page qui sera créée.
Une fois que nous avons un modèle prêt à l'emploi au format PSD, vous pouvez accéder directement à la mise en page
- Créez un dossier dans lequel la mise en page sera stockée, par exemple "Site".
- Dans le dossier "Site", créez un dossier pour les images, par exemple img.
- Dans le dossier "Site", créez un dossier pour les styles, par exemple css.
- Vous devez maintenant lancer Adobe Photoshop et ouvrir le fichier psd qu'il contient. De là, vous devez "extraire" toutes les images qui seront utilisées sur le site.
Ici, vous devez faire attention au bouton "Calques". Dans la figure, il est mis en évidence par un ovale rouge.
Ce bouton active et désactive la fenêtre des calques. Les couches sont les parties très non collées de l'appliqué. Les couches pour plus de commodité sont réparties dans des dossiers qui peuvent être réduits et développés. Le principe de fonctionnement est presque le même que dans l'Explorateur Windows.
La première étape consiste à réduire tous les dossiers. Développez si nécessaire.
Vous pouvez maintenant commencer à extraire des images
La première étape consiste à sélectionner l'outil de cadre. Sélectionnez ensuite uniquement la partie qui limite le logo du site
Après cela, appuyez sur la touche Entrée. Tout sauf la zone sélectionnée sera coupé.
Vous pouvez maintenant supprimer l'arrière-plan. Pour ce faire, désactivez le calque d'arrière-plan.
Pour trouver rapidement les calques dont vous avez besoin, vous pouvez procéder comme suit :
Ici, la couche est nommée "Figure 2". En cliquant sur l'image de l'œil, le calque devient invisible.
Cependant, il y a deux autres couches qui doivent également être désactivées. Les actions sont similaires.
Maintenant, vous pouvez économiser. Pour le faire, suivez ces étapes
Choisissez parmi 4 options proposées, et parmi la seconde proposée. Sélectionnez l'extension gif.
Nom de fichier logo.gif . Enregistrer le fichier dans le dossier image . Le reste des images devrait également y être enregistré.
Vous pouvez suivre ces principes :
- qualité photographique - jpg
- qualité photographique avec fond transparent– png-8 , pas satisfait de la qualité - png-24
- peu de couleurs dans l'image - GIF
Afin de retourner la version originale avant le recadrage, vous devez ouvrir la fenêtre d'historique
Cliquez sur le nom du fichier et définissez l'échelle appropriée.
Les autres images sont enregistrées de la même manière.
Il en va de même pour l'image de patte qui apparaît lorsque vous survolez un élément de menu.
Les autres images sont facultatives. Il peut être blanc, il peut être transparent.
Ici, vous devez choisir l'option d'enregistrement très soigneusement, car, dans les sources psd, les images avec des bords mal traités ne sont pas rares. Voici un exemple:
L'image a été enregistrée avec un arrière-plan transparent. Cependant, lorsque vous le visualisez en noir, des bords mal traités sont visibles. Mais lorsque vous utilisez un fond clair, ce défaut peut ne pas être perceptible.
Pour le fond, vous devrez découper une petite image qui remplira la page comme une tuile. Cependant, dans cet exemple, l'arrière-plan ne se répète pas. Par conséquent, il est préférable de trouver une image similaire. Et vous pouvez essayer de ramasser, en découpant divers fragments de l'arrière-plan.
Début de mise en page. Emballage. En-tête du site.
La mise en page sera couverte en utilisant HTML5 et CSS3.
Dans le dossier de votre site, vous devez créer un fichier HTML. Par exemple index.html
Dans le dossier CSS créer un fichier style.css .
De plus, dans le dossier CSS il faut mettre le fichier réinitialiser.css avec le code suivant
/* v2.0 | 20110126 Licence : aucune (domaine public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, gros, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, souper, tt, var, b, u, je, centre, dl, dt, dd, ol, ul, li, champs, formulaire, étiquette, légende, tableau, légende, tbody, tfoot, thead, tr, th, td, article, de côté, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline ; ) /* Réinitialisation du rôle d'affichage HTML5 pour les anciens navigateurs */ article, apart, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( style de liste : aucun ; ) blockquote, q ( guillemets : aucun ; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border- effondrement : effondrement ; frontière espacement r : 0 ; )
Le fait est que différents navigateurs pour la même balise peuvent avoir des paramètres différents. Pour assurer la compatibilité entre navigateurs, ils doivent être réinitialisés. Le code ci-dessus est d'Eric Mayer.
Premier arrivé index.html vous devez écrire les balises principales.
Pour les balises dans les styles
vous devez définir l'arrière-plan.Comme déjà mentionné, l'arrière-plan ici ne se répète pas. Par conséquent, il serait plus rationnel d'en choisir un similaire.
Corps( image d'arrière-plan : url(../img/bg.gif); )
Vous devez maintenant créer un wrapper pour le site - un bloc dans lequel tout le contenu sera placé.
proche de la fermeture Également à l'intérieur du bloc se trouve le mot wrapper. Il est là temporairement. Le but est de voir le bloc lors de la mise en page et de le distinguer du reste. Pour la même raison, un fond clair sera temporairement donné dans les styles du bloc. Pour définir des styles, vous devez connaître sa largeur et ses retraits en haut et en bas. Pour la mesure, vous pouvez Adobe Photoshop
Utilisez l'outil Rectangle de sélection pour sélectionner l'image du site du bord droit au bord gauche. La hauteur n'a pas d'importance. La largeur peut être vue dans la fenêtre "Info" Il s'est avéré 964px. De même, seule la hauteur de la sélection est déjà importante, et non la largeur, les retraits sont mesurés du haut et du bas. Il s'est avéré 100px en haut et 85px en bas. De cette manière, toutes les distances dans la source sont déterminées. #wrapper ( largeur : 964 px ; margin-top : 100 px ; margin-right : automatique ; margin-bottom : 85 px ; margin-left : automatique ; background-color : #FF9 ; ) Les marges gauche et droite sont réglées sur automatique. Cela aligne le bloc au centre. Page: Lors du développement d'un site Web, il est préférable de tout simplifier autant que possible, en ayant la possibilité d'installer un modèle prêt à l'emploi en quelques clics et de commencer à travailler. Cela est particulièrement vrai pour ceux qui ne sont pas forts en programmation ou qui ont peu de temps. Mais si votre objectif est de rendre le site plus unique, vous avez certaines compétences en mise en page, mais vous voulez quand même gagner du temps, il existe une excellente solution - des mises en page de site prêtes à l'emploi pour la mise en page. Ces mises en page sont créées par les concepteurs dans Photoshop et, en fait, sont des fichiers graphiques de page ordinaires. Ils ne sont pas coupés, mais viennent en fichiers uniques. Leur avantage est que le concepteur de mise en page pourra ajuster indépendamment la conception aux besoins individuels du client. Oui, et les modèles PSD sont assez bon marché. Sur l'un des principaux sites de modèles Themeforest, les prix de mise en page commencent à 3 $. Pour les utilisateurs ordinaires, les mises en page du site ne seront pas particulièrement utiles, je recommande donc de ne pas perdre de temps et de nerfs supplémentaires et de choisir immédiatement un modèle de site prêt à l'emploi. Oui, ils sont plus chers que les modèles PSD, mais cette différence sera plus que payante avec le temps gagné et l'absence de la nécessité d'une mise en page supplémentaire et de l'intervention d'un spécialiste pour s'adapter à un système spécifique. Nous avons une section entière dédiée à des milliers pour n'importe quel but sur notre site Web. Nous avons également des modèles et d'autres CMS. Avec eux, vous pourrez comprendre que le développement d'un site web est, en fait, très simple ! Pour les utilisateurs professionnels, nous présentons les vingt meilleures mises en page PSD à des fins diverses : affaires, créativité, blog et commerce électronique. Presque toutes les mises en page PSD ont une version WordPress, donc pour les débutants, je recommande également de lire cette revue. Cette mise en page la plus populaire comprend des composants pour un blog, un magasin, une page de destination, un portefeuille et un site Web d'entreprise. Tous sont fabriqués avec un sens du goût et du style. L'ensemble comprend 280 fichiers PSD. Pour les amateurs de WordPress, une version toute faite de ce CMS est disponible. Cette mise en page contient 59 fichiers PSD avec une conception unique pour des sites de différents types, y compris des boutiques en ligne, des portefeuilles et des blogs. Version en boîte et large disponible. Il existe également une version WordPress complète du modèle Avada, qui est la solution WordPress la plus populaire au monde (360 000 clients satisfaits). 150 fichiers Photoshop cachant des dizaines d'options de page d'accueil, de boutique en ligne, de portfolio, de blog et d'autres pages. Tous prennent en charge le travail avec des codes abrégés, ce qui signifie que l'ajout de contenu sera très simple. Applications : blog créatif, site d'actualités, portfolio personnel et site d'entreprise. Une option propre et élégante pour ceux qui veulent rendre leur site plus unique. Idéal pour les sites avec de belles photos. Rien de plus - juste l'essentiel. La mise en page est très élégante et vous fournira un large éventail d'options pour n'importe quelle tâche. En utilisant des compétences dans Photoshop, vous pouvez réaliser l'unicité de votre conception. Prise en charge des sections pleine largeur, des accordéons et des menus déroulants. Il existe des versions pour WordPress et Joomla pour cette mise en page afin de faciliter le développement. Il s'agit d'une disposition universelle pour toute entreprise opérant dans n'importe quel domaine d'activité. 31 fichiers Photoshop bien organisés vous permettent de modifier un peu les paramètres, ce qui donne un design unique. Toutes les icônes et polices de la mise en page sont gratuites. Il existe également un thème WordPress Enfold pour ceux qui ne veulent pas s'en faire. 238 fichiers, design épuré, polices Google et grille Bootstrap. Applications : portefeuille, hébergement, médecine, voyages, église, immobilier, voitures, commerce en ligne et affaires. Il existe également des mises en page mobiles et un thème WordPress pour seulement 59 $. Cette mise en page combine un design époustouflant avec une fonctionnalité et une convivialité puissantes. Prend en charge le travail avec la grille Bootstrap. Les 14 fichiers PSD s'ouvrent dans n'importe quelle version de Photoshop. Ils sont très commodément organisés en couches pour les rendre faciles à utiliser. Cette mise en page contient des designs élégants pour les voyagistes et les agences de voyage. 21 options de curseur avec prise en charge de Revolution et Layer Slider. 12 mises en page d'accueil. Il existe également une version WordPress. Cette mise en page comporte 5 styles de conception de 10 pages chacun. Il y a 50 fichiers PSD au total pour une personnalisation approfondie de la conception. Prise en charge des curseurs, des formulaires de réservation et des polices Google gratuites. Il s'agit d'une disposition de conception spéciale pour, qui est particulièrement populaire auprès des utilisateurs russes. La mise en page prend en charge les variations de la page d'accueil ainsi que la catégorie, la comparaison, le panier, le paiement, la connexion/inscription, le compte, le blog et bien d'autres pages. Ce modèle PSD est déjà familier à nos lecteurs grâce au modèle WordPress pour les services de réservation, les agences de voyage, les hôtels et les blogs de voyage. Les fichiers conçus ont une page d'accueil avec une barre de recherche, une page de résultats de recherche et des pages d'hôtel avec toutes les informations. Il y a 16 fichiers PSD au total. Design épuré avec des fonctionnalités de réservation pour les agences de voyages et les agences immobilières. Existe en trois styles de couleurs : bleu, vert et orange. Il y a 59 fichiers PSD au total ! Avis de sites WordPress prêts à l'emploi pour le secteur du tourisme, voir et. Dans cette mise en page, dans 150 fichiers Photoshop, vous trouverez 21 mises en page de page d'accueil, plus de 50 options de boutique en ligne, 10 pages de blog et même 2 types de site d'une page. Des mises en page mobiles sont fournies. La conception unique de cette mise en page est idéale pour les sites Web scolaires et créatifs. 8 fichiers PSD simples avec la conception de la page principale, du blog, de la galerie, des informations de contact et d'autres pages. Il existe un support pour Doodles. Nous avons passé en revue les thèmes WordPress éducatifs dans plusieurs revues : , et . De l'auteur : aujourd'hui est un grand jour pour changer rapidement votre site ! Prêt à créer votre entreprise en ligne ? Voulez-vous créer un nouveau site Web avec le dernier design, pixel par pixel ? Ou vous souhaitez retravailler l'ancien site pour les nouvelles tendances ? Pour ce faire, vous devez être une personne vraiment créative et être capable de travailler avec Photoshop pour créer des sites Web de premier ordre. Même si vous êtes un concepteur Web professionnel doté des bonnes compétences, la personnalisation de chaque pixel prend encore un certain temps, la création de toutes les pages du site d'un client et l'attention accordée à chaque élément, zone et petit détail de l'interface utilisateur. Tout cela prend du temps. Il est beaucoup plus rapide de prendre un modèle de site PSD de haute qualité qui a déjà été conçu avec soin pour chaque pixel. Nous avons une vaste sélection de différents fichiers Photoshop. Ils peuvent être utilisés une fois ou sous forme d'abonnement mensuel. En 2016, le site Web Envato Elements a été lancé et a immédiatement commencé à gagner en popularité. Il n'y a qu'une seule offre sur le site (tout compris) : Inscrivez-vous à Envato Elements et vous pourrez télécharger un nombre illimité de modèles de sites Web psd, de thèmes, de polices, d'ensembles graphiques, etc. Le tout pour un seul abonnement mensuel. Tout est correct! Téléchargez des modèles et des graphiques professionnels à votre guise, personnalisez le tout pour votre projet. Vous trouverez ci-dessous le modèle le plus populaire sur Envato Elements, Elementy Multipurpose PSD. Comprend 19 fichiers PSD, des maquettes de magasin, la conception de blogs, des pages de portfolio, etc. Si vous vous inscrivez à Envato Elements, vous pouvez télécharger un nombre illimité de fichiers et les utiliser de manière illimitée pour aussi peu que 29 $ par mois. Le prix régulier par mois est de 49 $, il est maintenant temps de profiter de cette grosse remise. Si vos besoins sont limités ou si vous préférez acheter des graphiques et du contenu Web séparément, nous avons des milliers de modèles prêts à l'emploi sur ThemeForest. Vous trouverez ci-dessous les modèles de sites Web TOP PSD pour 2016 que vous pouvez acheter ou télécharger. Ce n'est qu'une goutte d'eau dans le seau du volume que les concepteurs Web professionnels téléchargent chaque semaine sur ThemeForest. Jetez un œil aux meilleurs modèles de sites Web Photoshop de 2016 : Un bon design peut transformer un site médiocre en une œuvre d'art : Les ventes de votre site Web peuvent monter en flèche et vous pouvez faire une impression durable sur les acheteurs potentiels en augmentant votre prix plancher. Vous pouvez remodeler votre identité - transformer une marque médiocre en bonbon. Votre entreprise (ou vos clients) peut réaliser ses projets et son potentiel en ligne ! Vous trouverez ci-dessous le TOP 10 des modèles de sites Web PSD sur ThemeForest. Tous les modèles sont créés par des concepteurs Web talentueux qui consacrent du temps et de l'attention à chaque détail de ces fichiers PSD. Le meilleur ensemble de modèles PSD de 2016 avec un large éventail de fonctionnalités. Un ensemble de plus de 100 modèles dans Photoshop, les mises en page sont propres et très flexibles. Des modèles époustouflants, adaptés à chaque pixel, basés sur un système de grille de 1170 pixels. Utilisez des maquettes pour créer un site Web pour tout type d'entreprise, des blogs de mode aux portefeuilles d'art ou aux entreprises créatives. One pro est un modèle de site Web pur SPD avec un design populaire. Le modèle utilise un bon système de grille qui peut être utilisé pour créer de nombreux sites différents avec des pages personnelles, des boutiques ou des blogs d'entreprise. Il y a au moins 55 fichiers PSD organisés logiquement dans ce modèle. Utilisez ce thème pour créer rapidement de beaux sites Web. Electro est un ensemble hautement fonctionnel de 36 modèles PSD. Le modèle a un design épuré et léger, prêt à créer un merveilleux magasin d'électronique en ligne. Les fichiers de modèle sont organisés de manière professionnelle et superposés en groupes pour une utilisation facile. Sont également inclus trois pages d'accueil uniques et 5 en-têtes qui peuvent être combinés les uns avec les autres. Tendances et approches modernes du développement Web Apprenez l'algorithme pour une croissance rapide à partir de zéro dans la création de sites Web Circle est un modèle de site Web PSD qui propose des designs incroyables. Vous obtiendrez 173 fichiers PSD en couches et de nombreux modèles. Il s'agit d'un ensemble de pages Web modernes, propres et professionnelles qui peuvent être personnalisées pour différentes entreprises. Les conceptions sont basées sur un système de grille, ce qui facilite la conversion des fichiers Photoshop vers n'importe quel CMS. Agora est un modèle de commerce électronique moderne, léger et créatif. Si vous choisissez cet ensemble de designs, les utilisateurs vont adorer votre site. Le site offrira aux utilisateurs une expérience magnifique et unique. Les modèles PSD sont conçus dans un style sportif, mais ils peuvent être adaptés pour vendre n'importe quoi. Comprend 14 superbes designs et 6 curseurs graphiques ! Spectre est un modèle moderne et plat pour les agences. La conception est épurée avec 12 pages réactives et des blocs thématiques que vous pouvez mélanger et assortir à votre guise. De nombreuses fonctionnalités de conception, des icônes de ligne élégantes, des formes vectorielles, des éléments d'interface utilisateur accrocheurs tels que des profils, des citations accrocheuses et des images d'affichage. Le modèle est personnalisé pour Bootstrap avec 12 colonnes et une largeur de 1170 pixels. Il s'agit d'un ensemble de fichiers PSD bien conçu et attrayant, prêt à être utilisé dans votre prochaine conception. Si vous recherchez l'un des meilleurs modèles pour votre nouveau site Web financier, Experts est un excellent choix. Il est livré avec 55 fichiers PSD, de nombreuses conceptions de page d'accueil et des pages uniques où vous pouvez publier des prix, des avis, vos services, etc. Ce modèle est un costume et une cravate pour votre entreprise. Le modèle est conçu pour le droit, les sociétés financières, les entreprises d'investissement, les comptables et tout autre type d'activité professionnelle. Vous avez le choix entre 21 en-têtes, de nombreux pieds de page et des composants parfaitement adaptés, ainsi que des sections personnalisables. Si cette année vous vous fixez pour objectif de lancer une boutique en ligne spécifiquement dans le domaine des vêtements à la mode, ce modèle est fait spécialement pour vous. Un design optimal qui montre vos produits et vos images en premier. Mise en page propre avec une construction très claire. Le design est convaincant et organisé avec des inserts de blocs qui se chevauchent pour attirer l'attention des visiteurs. Les fichiers PSD sont organisés et peuvent être rapidement personnalisés pour s'adapter à votre site Web ! Agence numérique - Modèle de site Web PSD pour le référencement et diverses agences. Il est basé sur la conception matérielle, mélangeant des éléments d'interface utilisateur propres avec des couleurs vives. Il n'attend que vous pour ajouter vos photos et graphiques avant de le télécharger sur le site. Vous pouvez choisir d'acheter un fichier PSD ou d'acheter une version WordPress avec code, Bootstrap 3 intégré et de nombreuses fonctionnalités. Modèle de site Web PSD créatif avec un style de conception inhabituel. Volter est conçu pour mettre en valeur votre portfolio, mettre en valeur vos belles images et attirer de nouveaux visiteurs avec sa police originale. Ici, vous pouvez présenter votre travail, décrire vos services et dire aux nouveaux clients pourquoi ils devraient vous embaucher. Le fichier PSD est de haute résolution et basé sur la grille Bootstrap 1170px et est très facile à utiliser. Le meilleur modèle est complètement prêt à l'emploi, prenez et concevez des sites uniques ! Découvrez des centaines de modèles PSD professionnels créés par des concepteurs Web talentueux sur ThemeForest. Ou si vous souhaitez télécharger plus régulièrement des tonnes de modèles, de thèmes et d'ensembles graphiques Photoshop, consultez Envato Elements, où vous pouvez télécharger et utiliser des tonnes de fichiers illimités de qualité moyennant des frais mensuels uniques. Dans l'article précédent, j'ai clairement montré comment créer une mise en page de site Web dans Photoshop, et le résultat était un modèle simple, mais pas accrocheur. Dans cet article, je vais vous montrer comment le convertir d'une mise en page PSD en une page Web finie à l'aide d'outils de balisage HTML et de feuilles de style en cascade (CSS). En général, il existe de nombreuses approches pour préparer les modèles : quelqu'un dessine d'abord le modèle soigneusement et ensuite seulement fait la mise en page, quelqu'un dessine le dessin approximativement, en ajoutant des traits pendant la mise en page ; certains dessinent d'abord, puis coupent, d'autres (comme nous l'avons fait dans le dernier article) enregistrent les objets graphiques directement dans le processus de création d'un design. Même les outils de mise en page et de dessin sont différents pour chacun : certains installent des plug-ins et fonctionnent dans des éditeurs visuels, d'autres utilisent un ensemble standard de fonctionnalités et sont composés dans un simple éditeur... en général, une seule méthode parmi tant d'autres sera donnée ci-dessous . Donc, créez n'importe où (au moins sur le bureau, au moins dans un dossier séparé) un fichier index.html. Dans le même répertoire, ajoutez le répertoire images. Il contiendra toutes les images utilisées dans le modèle et sur la page. Puisque nous avons découpé les éléments graphiques à l'avance, nous allons immédiatement les copier dans le dossier images et leur donner les noms suivants : Dans le dossier avec la page index.html, créez un fichier styles.css- il contiendra les feuilles de style du template. Le bloc-notes n'est pas recommandé pour l'édition de code. L'éditeur Notepad ++ est bien meilleur à cet effet. Il s'agit d'un programme qui met en évidence la syntaxe de différents langages (HTML et CSS - y compris) et est beaucoup plus pratique à développer que dans de simples éditeurs de documents texte. Ouvrir le document index.html et entrez-y le code suivant :
Enregistrez le fichier. Nous avons déjà étudié toutes ces balises depuis longtemps et elles n'ont pas besoin d'explication. Avec le code ci-dessus, nous avons créé la base de la page HTML, nous devons maintenant la diviser en blocs - spécifiez la structure du document, ce qui va suivre. Nous avons 7 blocs, nous allons les lister par identifiant (valeur d'attribut identifiant): 1. contenu- le bloc à l'intérieur duquel le reste des blocs sera stocké. 2. entête- bloc d'en-tête, à l'intérieur duquel se trouveront : 2.1. menu- navigation supérieure. 2.2. logo- image avec texte. 3. droit- la partie principale de la page. 4. la gauche- panneau à gauche. 5. bas de page- le bas du site. On écrit donc (dans le conteneur
coller le code suivant) : Dans le navigateur, la page sera toujours vide, mais la structure du document peut déjà être comprise, elle est prête. Passons maintenant au style CSS pour donner au document un premier aspect. Ouvert style.css et ajoutez les lignes de code que vous voyez ci-dessous. Suppression du rembourrage et des marges sur la page par défaut : * (marge : 0px ; rembourrage : 0px ; ) Nous définissons les couleurs des liens en fonction du comportement de l'utilisateur (survolé, n'a pas survolé, visité) et supprimons le soulignement des liens sur lesquels se trouve le pointeur de la souris : A:link ( color: #D72020; ) a:hover ( text-decoration: none; color: #FF0000; ) a:visited ( color: #D72020; ) Nous configurons le design de base de la page : nous prescrivons la couleur de fond et l'image de fond (définissons le remplissage horizontal de l'image), définissons la couleur, le style et la taille de la police : Corps (arrière-plan : #FFD723 url(images/back_all.jpg) repeat-x ; police : 13px Tahoma, Verdana, Arial, Helvetica, sans-serif ; couleur : #333333 ; ) Définition du bloc de contenu : #content ( marge : 0 auto ; arrière-plan : #ffffff ; largeur : 786 px ; alignement du texte : gauche ; ) Vous pouvez maintenant actualiser la page. Il est rempli d'un motif de support. Jusqu'à présent, le seul changement visible dont la propriété est responsable Contexte classer corps. Il y a un début, et maintenant vous pouvez commencer à disposer directement les blocs principaux. Commençons, bien sûr, par le chapeau. Qui, à son tour, se compose de blocs d'un menu horizontal et d'un logo. Tout d'abord, définissons l'apparence générale des deux éléments d'en-tête : alignement du texte à gauche, fond blanc et une hauteur de 306 pixels : #header ( arrière-plan : #ffffff ; hauteur : 306 px ; alignement du texte : gauche ; ) On a donc une sorte d'espace d'en-tête : un rectangle blanc sur lequel vont se situer ses éléments. Il serait logique de faire le menu horizontal dès maintenant. C'est ce que nous allons faire, mais seulement avant de l'insérer dans HTML, nous devons préparer les règles CSS, sinon cela aura l'air terrible dans le navigateur. Faisons les premiers ajustements : réglez la bordure gauche à 2 pixels d'épaisseur, la largeur et la hauteur de notre menu, ainsi que l'image de fond se répétant le long de l'axe X : #menu ( border-left : 2px solide #ffffff ; largeur : 779 px ; hauteur : 80 px ; arrière-plan : url(images/header_top.gif) repeat-x ; ) La page dans le navigateur changera immédiatement et ressemblera à ceci. Vous pouvez maintenant ajouter le menu lui-même au fichier index.html: En actualisant la page, vous pouvez voir qu'elle est réellement apparue. Seulement ici, le type de liens laisse beaucoup à désirer. Définissons nos propres règles pour eux (alignement, largeur, couleur, gras, etc.), et pour les liens au survol, définissons le changement de couleur et renvoyons le soulignement supprimé dans tout le modèle : #menu a ( float : gauche ; largeur : 99 px ; hauteur : 46 px ; affichage : bloc ; alignement du texte : centré ; décoration du texte : aucun ; couleur : #ffffff ; poids de la police : gras ; taille de la police : 14 px ; rembourrage -top : 35px ; ) #menu a:hover ( color: #D72020; text-decoration: underline; ) La mise en forme du menu peut maintenant être mappée sur le modèle PSD. Faites attention à la façon dont la conception de l'élément change si vous déplacez le pointeur dessus (les règles en sont responsables). #menu a : survoler). Nous avons déjà le logo et il est dans le dossier, il reste à l'ajouter à la page et à le mettre en forme avec les règles. Les deux peuvent se faire avec CSS, ce que nous ne manquerons pas de faire. #logo ( arrière-plan : #ffffff url(images/big_pic.jpg) pas de répétition ; largeur : 738 pixels ; hauteur : 146 pixels ; alignement du texte : gauche ; rembourrage en haut : 80 pixels ; rembourrage à gauche : 40 pixels ; bordure à gauche : 4 px solide #ffffff ; ) Le logo est inséré exactement dans la taille. La seule chose qui lui manque, c'est le texte. Insérez le manquant dans le bloc logo dossier index.html pour obtenir: Le texte est apparu, mais il doit également être formaté. Partant du constat que le logo est presque toujours un lien, nous définirons le design des classes correspondantes. #logo a ( text-decoration: none; text-transform: lowercase; font-style: italic; font-size: 36px; color: #FFFFFF; ) #logo h2 a ( font-size: 24px; ) Il n'est pas nécessaire d'expliquer quoi que ce soit ici, vous connaissez toutes les propriétés des leçons CSS. Cependant, l'apparence du texte a changé et, en général, l'en-tête est maintenant encore plus beau que sur la mise en page PSD. Ensuite, nous mettons en place le plus grand bloc sur lequel tout le contenu unique sera placé. Il occupera 500 pixels et sera situé sur le côté droit du site. Fixons les règles de positionnement, la conception des titres, des paragraphes et des liens (nous avons déjà parlé de toutes les propriétés dans les articles sur CSS). #right ( float : droite ; largeur : 500 px ; padding-right : 10 px ; ) #right h4 ( margin : 0 ; padding : 0px ; font-size : 12px ; couleur : #D72020 ; ) #right a ( color : #D72020 ; text-decoration: none; ) #right p ( margin: 0; padding: 0; padding-bottom: 10px; ) #right h2 ( margin: 0; padding: 0; padding-top: 10px; color: #D72020; ) Étant donné que nous n'avons fixé que la largeur du bloc, il n'y aura aucun changement visible jusqu'à ce que nous le remplissions de contenu - la hauteur de la page changera en fonction du contenu. Remplissons le récipient droit. Les images seront placées dans un tableau simple. Le contenu a reçu un balisage, mais il manque clairement un fond blanc, qui n'apparaîtra pas entièrement bientôt. Pendant la mise en page, mais après avoir dessiné la mise en page, il s'est avéré que le menu latéral aura toujours des sous-éléments, et ils devraient apparaître lorsque vous survolez l'élément principal et disparaître lorsqu'il n'y a pas de pointeur dessus. Les situations où vous devez affiner la conception "en déplacement" sont assez courantes. L'espacement entre le menu et le contenu principal nous permet d'insérer des sous-éléments, mais ce qui est intéressant, c'est l'astuce de disparition et d'apparition du sous-menu. Entrez le code suivant dans le fichier CSS. #left ( padding : 10px ; width : 237px ; padding-right : 1em ; ) #left h3 ( width : 225px ; height : 25px ; font-size : 14px ; font-weight : gras ; padding-left : 15px ; padding- haut : 15 px ; text-transform : majuscule ; couleur : #ffffff ; arrière-plan : url(images/title.gif) no-repeat ) #left ul (marge : 0 ; rembourrage : 10 px ; style de liste : aucun ; largeur : 100 px ; font-size : 18 px ; ) #left li ul ( position : absolue ; gauche : 90 px ; haut : 0 ; affichage : aucun ; ) #left ul li ( position : relative ; margin-bottom : 20 px ; ) #left ul li a ( display: block; text-decoration: none; color: #ffffcc; background: #ff9900; padding: 5px; border: 1px solid gold; border-bottom: 0; ) #left li:hover ul ( display: block; ) #left li li ( margin-bottom:0px; width: 150px; ) #left p ( padding: 10px; border-bottom: 1px solid #D72020; border-left: 1px solid #D72020; border-right: 1px solid # D72020;) Attention aux règles de classe ul et li- le secret de la disparition du menu est là, révélez-le vous-même. Commençons par ajouter un bloc d'informations sans menu dans le conteneur de gauche du document HTML. Nous vous offrons des rabais de vacances. Plus loin... Le fond blanc s'étendait plus bas sur la page. Il est maintenant temps de coller le code du menu du panneau de gauche dans le fichier HTML. Contrairement à la navigation supérieure, elle est implémentée par des listes, ce qui peut être vu à partir des règles CSS. 
Mises en page de sites Web pour la mise en page pour les débutants et les utilisateurs avancés
TheFox - Mise en page de site Web polyvalent
Avada - Maquette PSD universelle
AdelFox - Modèle PSD polyvalent
Noir + Blanc - mise en page simple avec un design minimaliste
ÉNORME - Maquette PSD universelle pour le site Web parfait
Enfold - mises en page de sites Web populaires pour la mise en page au format PSD
Waxom - Mise en page Photoshop universelle pure
Cercles - mises en page de sites Web sympas avec un design parfait
Travelo - kit d'agencement agence de voyage
Delimondo - Mise en page de site Web de restaurant réactif
Réservez votre voyage - mises en page du site pour la mise en page des voyagistes
Agence de voyage - Mise en page du site Web PSD de voyage multitâche
Super Duper - une mise en page élégante pour toute entreprise
Carry Hill - Mise en page PSD du site Web de l'école
Meilleurs modèles de site Web PSD sur Envato Elements (utilisation illimitée)
Modèles de site PSD sur ThemeForest
TOP 10 des modèles de sites Web PSD (de ThemeForest 2016)
1. Cesis - Modèle de site Web PSD complet et polyvalent
2. OnePro - Modèle de site Web PSD créatif
3. Electro - Modèle PSD de magasin d'électronique en ligne
4. Cercle - Modèle de site Web PSD unique
5. Agora - Incroyable modèle PSD de commerce électronique
6. The Spectre - Modèle de site Web d'agence
7. Experts - Modèle PSD commercial et financier
8. Begge - Modèle PSD de magasin de mode moderne
9. Agence numérique – Modèle SEO/Marketing
10. Volter - Modèle de site Web créatif (PSD)
Obtenez de nouveaux modèles de site Web (PSD) !
Phase préparatoire
Diviser le document en blocs
Configurer la mise en forme de base
Faire un menu horizontal
domicile
Galerie
traité
Prix
Échantillons
Contacts
Personnalisation du logo
Composition de la partie principale de la page
Galerie
Cuisines
Création du panneau de gauche
Informations
Menu
