Compilé de manière compétente et décorée visuellement, dans notre cas, il s'agit d'une page séparée, est un élément important d'un site ou d'un blog personnel, tout spécialiste qui a atteint un certain niveau d'habileté dans ses activités professionnelles.
Page du portefeuille, il s'agit d'une telle sorte de rapport ou d'un résumé visuel, avec lequel vous pouvez manifester clairement les lecteurs et les visiteurs du site / blog, définir les œuvres mises en œuvre les plus réussies, qu'ils soient des photos, des articles, des publications, des éléments de conception, etc. .
Je n'ai pas de cette page et, de ma part, une omission gênante qui doit être corrigée le plus tôt possible, le moment et je travaille.
Sur les étendues sans fin du réseau mondial, vous pouvez trouver un grand nombre de modèles de page à l'emploi à l'emploi pour l'organisation du portefeuille et une variété de ces pages, cela impressionne vraiment. Ainsi, pour mettre en scrupulation pour plonger dans toutes les subtilités de la conception et du développement Web, ils seront toujours en mesure de trouver une option appropriée pour eux-mêmes. Eh bien, pour ceux qui incroyables connaissances dans le bâtiment du site, je propose d'établir un exemple d'une disposition adaptative, d'une simple page de portefeuille, avec filtrage du travail effectué par catégorie, fabriqué sur, dilué avec un effet de transition attrayant, avec une animation éléments.

La mise en page de la page, exécutable JavaScript et certains éléments de design, émis «sur la montagne», merveilleux concepteur Web et développeur Kevin Liew (Queste.com). Lorsque vous choisissez une solution optimale, il était important pour moi, c'est une simplicité d'exécution, la fonctionnalité du plug-in jquery, des travaux corrects dans tous les navigateurs modernes et envisagent la popularité la plus populaire de l'utilisation de divers appareils mobiles, de la navigation sur Internet, du Adaptabilité de la future conception de page. Pas de funérailles, de fioritures de concepteur et de plugins lourds.

La mise en page de base se compose de deux éléments de base de l'interface utilisateur que nous devons construire, ce sont des onglets de navigation pour filtrer les catégories des œuvres présentées et la grille elle-même est une miniature avec un effet contextuel lors de la navigation.
Pour commencer, tout à la fin gagné, JQuery ne sera nécessaire pas plus bas que la version 1.7.0. Si vous n'êtes pas encore connecté, ajoutez la chaîne suivante à la balise :

Exécutez le plugin MixItup pour fonctionner, insérez ce code après les fichiers ci-dessus:

Considérez séparément toutes les options du plugin, il n'a aucun sens, la valeur par défaut est une option assez optimale. Eh bien, si quelqu'un insérera sur des expériences avec des paramètres, s'il vous plaît, tout en votre pouvoir.

Pour former une mise en page de la page et de l'apparition des éléments, connectez quelques fichiers au document. . Un pour les styles de base, appelons-le par exemple: layout.css et un autre petit fichier CSS normalisé.css, afin d'assurer la meilleure conversation des navigateurs dans la conception standard des articles:

Maintenant, nous analyserons tout dans l'ordre, si possible, sans excès d'eau, est accessible et compréhensible, dans notre langue maternelle et longue souffrance.

• Tout
• Applications
• Businesscours
• Icônes
• Logo
• création de sites web

Dans le volet de navigation, placez toute la liste de travail, cassée en catégories. Nous avons besoin de chaque catégorie de portefeuille via l'attribut Data-Cat pour associer à un ou plusieurs points du volet de navigation conformément à la valeur de l'attribut de filtre de données. En comparant les valeurs de filtrage de données avec Data-Cat, et les éléments de portefeuille seront filtrés par catégorie.
De plus, nous allons ajouter aux vignettes cachées jusqu'à l'heure avant l'heure, un petit panneau avec le nom du travail et la catégorie de titre qui apparaît uniquement lorsque vous survolez dans l'image. Et il est plus facile de former l'apparence de la chose en CSS, les classes correspondantes aux éléments:

Héberger devenir.ru. Logo

.........

Veuillez noter que vous pouvez ajouter des liens vers l'image ou directement à la signature, de sorte que l'utilisateur puisse imaginer pleinement toutes vos œuvres.

CSS.

Maintenant, une sève silencieuse, allez à la plus intéressante, à la formation des styles généraux de l'interface utilisateur de notre page de portefeuille et de la version adaptative. L'article indiquera uniquement les valeurs de base (par défaut), c'est-à-dire sans images de fond et polices connectées, tout cela, qui en a besoin, peut être vu dans la démonstration ou trouver dans les archives avec des sources.

Conteneur (Position: Relative; Largeur: 960px; Marge: 0 Auto; / * Vous pouvez voir le circuit de transition lorsque la taille de la fenêtre du navigateur * / -WebKit-Transition: Toutes les 1s facilité; -Moz-transition: toute la facilité 1S; -O- TRANSITION: Toutes les 1s facilité; transition: toutes les 1s facilité;) #Filters (marge: 1%; rembourrage: 0; style de liste: non Aucun;) #filters li (flotteur: gauche;) #filters LI Span (Affichage : Bloc; Rembourrage: 5px 20px; Texte-Décoration: Aucun; Couleur: # 666; / * Ajoutez une ombre pour le texte * / Text-Shadow: 1px 1px #ffffff; curseur: Pointeur;) / * Modifier la catégorie de la catégorie Hovering * / #Filters LI Span: plancher (arrière-plan: # 34b7cd; text-ombre: 0 0 2px # 004b7d; couleur: #fff;) / * Catégorie active * / #filters Li Span.active (arrière-plan: RVB (62, 151, 221); text-ombre: 0 0 2px # 004b7d; couleur: #fff;) #portoliolist .Portfolio (-Webkit-box-dimensionnement: bordure-box; -Moz-dimensionnement: bordure-box ;o -Box dimensionnement: boîte à bordure; largeur: 23%; marge: 1%; affichage: aucun; flotteur: gauche; Overflow: caché;) .po RTFolio-Wrapper (débordement: caché; Position: relatif! Important; Contexte: # 666; Curseur: pointeur; ) .Portfolio img (max-largeur: 100%; position: relatif;) / * Par défaut, les signatures sont cachées * / .Portfolio .Label (position: absolu; largeur: 100%; hauteur: 40px; bas: -40px ;). Portefeuille .Label-BG (arrière-plan: RVB (62, 151, 221); largeur: 100%; hauteur: 100%; position: absolu; top: 0; gauche: 0;) .Portfolio-text-texte ( Couleur: # FFF; Position: Relatif; Z-Index: 500; Rembourrage: 5px 8px;) .Portfolio .Text-Catégorie (Affichage: Bloc; Taille de la police: 9px;)

Dans la deuxième partie, juste dans la même table de styles, en utilisant plusieurs demandes de support, créez des sections de substitution alternatives CSS. Pour effectuer la mise en page de notre page correctement sur les écrans de divers appareils mobiles, ajoutez et alternatives règles CSS pour différents écrans dans ces sections. Ainsi, nous allons facilement remplacer toutes les règles définies par notre tableau CSS pour les navigateurs conventionnels et atteindre l'adaptabilité très croyante.

/ * Tablette * / @MeMedia Seulement écran et (min-largeur: 768px) et (max-largeur: 959px) (.Container (largeur: 768px;)) / * Mobile - Remarque: Conception pour 320px * / @Media Seule largeur Écran et (max-largeur: 767px) (.Container (largeur: 95%;) #Portfolioliste .Portfolio (largeur: 48%; Marge: 1%;)) / * Mobile - Remarque: Conception pour 480px * / @Media Largeur conception unique écran et (min-largeur: 480px) et (max-largeur: 767px) (.Container (largeur: 70%;)))

C'est tout. Notre page merveilleuse sous les capacités du "portefeuille" est prête, elle reste seulement de le remplir avec son travail tout aussi merveilleux et remarquable, et d'exposer le monde. Vous pouvez toujours tranquillement, modestement, alors soyez fier de vous-même. La principale chose est de ne pas trop en faire.
Reportez-vous à nouveau un exemple et, si nécessaire, prenez les sources, à votre guise, dans un environnement domestique calme, vous pouvez apporter ce travail à la perfection.

Lors de la création d'une leçon, le matériau a été utilisé :. Original, neuf propres, juste de sous le stylo de l'auteur, la page du portefeuille, est là.

Bonne chance à tout le monde et avec des avantages corporels, passez les vestiges d'un court été!

Nous continuons la série de leçons par disposition du site à partir de zéro. Sur nous vertige le capuchon de la mise en page. Suivant est le bloc d'une grande photo en arrière-plan. Ce bloc est situé dans le premier écran du navigateur, et donc le centre de l'utilisateur. Par conséquent, mettez cette zone uniquement une image attrayante visuelle qui transmet l'essence du site et des informations importantes.

Comme vous avez remarqué, nous portfolio moqueur maquetteMais pas d'habitude, et des chiens. Cependant, à l'exception des blagues, la sortie sera un motif typique du style de populaire plat Conception, qui peut être utilisée pour vous-même, remplacer du texte et des photos. Pour la conception plate, les contrastes de couleur sont caractéristiques. La page entière est divisée en plusieurs blocs, où le bloc de lumière remplace l'obscurité et donc sur toute la hauteur de la page dans plusieurs écrans. Chaque bloc doit idéalement contenir le même contenu par signification.

L'ensemble de la mise en page consiste en un chapeau, quatre sections et sous-sol.

Photo

Portefeuille

Sur moi

Formulaire et contacts

Contexte: URL ("Your_Image.jpg") Non-REPEAT;

Contrôles Tailles Sélecteur d'image taille de fond.. Nous insérons l'image entièrement en largeur et en hauteur. Avec une augmentation de la taille de l'écran, la photo s'étire, avec une diminution à l'échelle, ne pas économiser de proportions.

Taille de l'arrière-plan: 100% 100%;

Conteneur intérieur section., Positionnez le bloc diviser avec la tête, le texte et le bouton.

Insérez le code entier dans notre document HTML après la balise.

Il est difficile d'être "mignon"

Chaque jour je me lève avec une seule idée qu'il est difficile d'être gentil. Mais je ne cherche pas le genre que je suis fatigué de votre "caresseur" et "Sysyukania".

En savoir plus

Code style.css:

Mops_bg (
Arrière-plan: URL (images / articles / html_coding_banner.jpg) non répétée;
Taille de l'arrière-plan: 100% 100%;
}
.mops_text (
Rembourrage: 20% 0%;
}
.mops_text H2 (
Couleur: #fff;
Taille de la police: 2.9EM;
Poids de la police: 600;
z-index: 10;
Texte-Aligner: Centre;
Position: relatif; / * Positionnement relatif du titre * /
Marge-top: -140px;
}
.mops_text H2 Span (
Taille de la police: 1.1ème;
Poids de la police: 290;
}
.mops_text p (
Couleur: #fff;
Taille de la police: 1.2EM;
Texte-Aligner: Centre;
Marge: 1.4em Auto;
Largeur: 76%;
Poids de la police: 200;
Hauteur de ligne: 1.3ème;
}
.mops_text .da-bouton (
Bloc de visualisation;
Couleur de fond: # A97B7B;
Couleur: #fff;
Taille de la police: 1em;
Texte-transformateur: majuscule;
Marge: 0 auto;
largeur: 10%;
Texte-Aligner: Centre;
Rembourrage: 1em 2em;
}
.da-butt (
Position: absolu; / * Positionnement absolu du * / bouton
À gauche: 750px; TOP: 370px; / * Redents des bords du navigateur * /
}
.mops_text .Da-butt: plancher
{
Contexte: # D0A5A5;
}
.Butt-img (
largeur: 50px;
Hauteur: 50px;
Bloc de visualisation;
Marge: 2EM Auto 1em;
Arrière-plan: URL (images / articles / html_coding_buttonimg.png);
-Webkit-transition: tous les 05s sont la main-d'œuvre; /* transition en douceur */
-MOZ-TRANSITION: TOUS LES 0.5 SORTIR-IN-OUT; /* transition en douceur */
-O-TRANSITION: Tous les 0.5s sont la tranquillité; /* transition en douceur */
-MS-TRANSITION: Tous 0.5s Formation-in-Out; /* transition en douceur */
TRANSITION: TOUS LES 0.5 SORTIR IN-OUT; /* transition en douceur */
Position: relatif; / * Flèche de positionnement absolue * /
À gauche: 210px; TOP: 130PX; / * Indents parent * /
}
.Butt-img: Verser (
Bloc de visualisation;
largeur: 50px;
Hauteur: 50px;
Arrière-plan: URL (images / articles / html_coding_buttonimgh.png);
}

Le résultat du travail peut être visualisé sur

Premièrement, faites le balisage du nouveau document HTML5. Dans la section Titre, allumera le style de page. Bibliothèque JQuery, Plugin Quicksand et notre fichier script.js. Sera inclus devant la balise de fermeture du corps:

index.html

Mon portfolio

L'élément HTML5 Header contient notre en-tête H1 (qui est décoré comme logo). L'élément section contient une liste non ordonnée des éléments de portefeuille Autres listes sont ajoutées par le code JQuery) / NAV Elément, décoré sous forme de barre verte, sert de contenu de filtre.

Une liste de planification non ordonnée contient des points de notre portefeuille. Chaque élément dispose d'un attribut de données qui définit une série de points-virgules séparés. Plus tard, dans le code JQuery, nous traversons la liste des boucles, écrivez des étiquettes et créons des catégories pouvant être sélectionnées dans la barre de menus verte.

Vous pouvez mettre sur la liste des points d'autres œuvres et utiliser d'autres balises.

jquery.

Le plug-in QuickSand compare la liste des deux désordonnées, trouve les mêmes éléments de LI en eux et anime le processus de placement. Le script de jQuery, qui démonte cette partie de la leçon, passe le cycle par points de portefeuille dans la liste #stage et crée de nouvelles listes désordonnées (cachées) pour chaque étiquette trouvée. Ces listes seront ensuite utilisées pour travailler le plug-in rapide.

Après avoir téléchargé la page, nous démarquons le cycle pour détecter des balises.

script.js - Partie 1

$ (document) .Ready (fonction (fonction () (vareurs var \u003d ("# stade Li"), articlesbytags \u003d (); // cycle sur tous les éléments LI: articles.ache (fonction (i) (Var elem \u003d $ ( Ceci), tags \u003d elem.data ("tags"). Split (","); // Ajouter un attribut d'identité de données. Nécessite un plugin Quicksand: ELEM.ATTR ("Data-ID", I); $. chacun (tags, fonction (clé, valeur) (// retirez des espaces supplémentaires: valeur \u003d $ .Trim (valeur); si (! (Valeur in itemsbytags)) (// Créer un tableau vide pour les éléments: Élémentsbytags \u003d;) /; / Chaque élément ajouté à un tableau par l'étiquette: Élémentsbytags.Push (elem);););););

Chaque étiquette est ajoutée à l'objet ArticlesbyTags comme une matrice. Ainsi, les articlesByTags ["Web Design"] contiendront un tableau de tous les éléments ayant une étiquette "conception Web". Nous utilisons cet objet pour créer une liste désordonnée cachée sur la page de plug-in rapide.

Créer des fonctions auxiliaires

script.js - Partie 2

Fonction Createlist (texte, éléments) (// Fonction auxiliaire qui reçoit le texte du bouton de menu et // de la matrice de Li paragraphes // crée une liste désordonnée vide Var ul \u003d $ ("

", (" Classe ":" Cachée ")); $. Achat (articles, fonction () (// Créez une copie de chaque élément LI // et ajoutez-le à la liste: $ (ceci) .clone (). APPENDTO (UL);)); UL.Appendez ("# Conteneur"); // Créer un élément de menu. Une liste non ordonnée est ajoutée // comme paramètre de données (disponible via.Data ("Liste"): Var A \u003d $ (" ", (Html: text, href:" # ", données: (Liste: ul))). APPENDTO (" # Filtre ");)

Cette fonctionnalité reçoit le nom du groupe et une matrice avec des éléments LI en tant que paramètres. Ensuite, elle close ces éléments dans la nouvelle liste UL et ajoute un lien vers la bande verte.

Nous passons maintenant au cycle de tous les groupes et appelons la fonction auxiliaire, ajoutons également le traitement des événements clic pour les éléments de menu.

script.js - Partie 3

// Créez l'option "TOUT" dans le menu: Createlist ("Tous", Articles); // cycle sur les matrices dans les articlesBYTAGS: $ .Chaque (articlesByTags, fonction (K, V) (Createlist (K, V);)); $ ("# Filtre A"). Live ("cliquez sur", fonction (E) (Var link \u003d $ (ceci); link.addclass ("actif"). Frères (). Removeclass ("actif"); // Utilisez le plugin Quicksand l'animation des éléments Li. // Il utilise les données ("Liste") définies par notre fonction Createlist: $ ("# scène"). Quicksand (link.data ("Liste"). Trouver ("Li ")); E.preventDefault ();)); $ ("# Filtre A: premier"). Cliquez sur ();

CSS.

La partie la plus intéressante des styles CSS est une bande verdoyante #Filter. Pour cela, les pseudo-éléments sont utilisés: avant /: après avoir créé des coins attrayants sur les côtés de la bande. Comme ils sont positionnés absolument, lors de la modification de la taille de la bande, ils feront ressortir le cas échéant.

styles.css.

#Filter (fond: URL (".. / img / bar.png") répétez-x 0 -94px; Affichage: bloc; Hauteur: 39px; Marge: 55px Auto; Position: Relative; Largeur: 600px; Text-Align: Centre; -moz-box-ombre: 0 4px 4px # 000; -webkit-box-ombre: 0 4px 4px # 000; Box-ombre: 0 4px 4px # 000;) #filter: avant, #filter: après (fond : URL ("../ img / bar.png") non répétée; hauteur: 43px; position: absolu; top: 0; largeur: 78px; contenu: "" --moz-box-ombre: 0 2px 0 rgba (0,0,0,0,0.4); -webkit-box-ombre: 0 2px 0 rgba (0,0,0,0,4.4); Box-Shadow: 0 2PX 0 RGBA (0,0,0, 0,4.4);) #filter: avant (gauche: -78px;) #filter: après (arrière-plan-position: 0; droite: -78px;) #filter A (Couleur: #FFFFFF; Affichage: Inline- Bloc; Hauteur : 39px; hauteur de ligne: 37px; rembourrage: 0 15px; text-ombre: 1px 1px 1px # 315218;) #filter A: Hover (texte-décoration: aucun) #filter a.active (arrière-plan: URL (".. /img/bar.png ") répéter-x 0 -138px; ombre de la boîte: 1px 0 0 rgba (255, 255, 255, 0.2), -1px 0 0 rgba (255, 255, 25 5, 0,2), 1px 0 1px RGBA (0,0,0,0,2) INSET, -1PX 0 1PX RGBA (0,0,0,0,2) INSET; )



Prêt!

Vous pouvez utiliser un modèle pour vos projets. Changer le contenu du portefeuille est simplement effectué. Si l'utilisateur est désactivé JavaScript, il verra toujours le travail, ce qui a un bénéficiaire affecte le site de référencement.

Dans le monde moderne, vous avez parfois votre propre site Web est également important, tel que la disponibilité du numéro de téléphone ou de l'adresse électronique. Malheureusement, tout le monde ne peut pas faire de manière indépendante un magnifique site professionnel et parfois, cela ne fonctionne même pas la courbe. Pour commander des programmeurs n'est également pas le moyen idéal, car ce n'est pas pour que tout le monde soit poche.

D'une telle situation aidera gratuitement les modèles de site Web HTML. Le modèle de site HTML est un ensemble de pages statiques prêtes à l'emploi pour le site d'un certain sujet. Avec l'aide d'un tel gabarit, créez un site simple peut être littéralement en quelques heures, avec la connaissance de base du balisage HTML. Dans la section HTML, vous obtiendrez cette connaissance si vous passez quelques heures sur l'apprentissage, et si vous ne regrettez pas la section CSS, vous pouvez contrôler entièrement la conception des modèles de site Web HTML et les définir complètement sous vos besoins.

Un autre avantage indiscutable des modèles de sites est qu'ils sont écrits dans la plupart des cas de professionnels. Sous le modèle professionnel, le site est compris non seulement un design magnifique et moderne, mais également comme le code est écrit. Les moteurs de recherche semblent avoir écrit le site, le référencement est optimisé le code ou non, en fonction de la baisse ou d'augmenter votre position dans l'extradition. Par conséquent, un bon site devrait être non seulement beau et moderne, ce qui est important, mais également écrit de manière compétente en termes de code.

Téléchargez des modèles de site HTML gratuits et créez vos projets dès que possible.

Je fais une mise en page de sites.
Expérience générale dans le développement Web 7 ans (conception, mise en page, programmation).

Principales compétences: HTML, CSS, JS, SVG, JQuery, Node.Js, WordPress, Web Design (Photoshop, Korel), Git.
Parfois, j'utilise: php, mysql.

Les avantages de ma mise en page:
- Je sais comment tout fonctionne de la conception sur le serveur, de sorte que le calque est concis et compréhensible. Je peux travailler dans une équipe avec votre concepteur et un programmeur. Les designers reçoivent une conformité au contexte de la conception. Et les programmeurs vis rapidement la mise en page si nécessaire sans aucun problème.
- Je fais pour les ordinateurs, les tablettes et les téléphones.
- Pour tous les navigateurs modernes. Je peux pour plus vieux si vous en avez besoin de IE6 :)
- Programmation tout ce dont vous avez besoin sur les pages: serveur, animation, interface, calculatrices.
- J'écris tout le code avec vos mains.
- Le code est absolument valide.
- Vitesse de page jusqu'à 100% dans Google PagesPeed.

Les avantages de travailler avec moi:
- Si vous avez accepté, je fais immédiatement sans déspliations.
- Je fais vite. La qualité ne souffre pas. Si quelqu'un vous promet plus rapidement, probablement pire incomparablement.
- Je travaille habituellement avec postplood, mais des parties. Fait partie, vous avez vérifié, paiement.
- Corrigez des erreurs discrètement après avoir mis le travail s'il y en a.
- Si je ne peux pas faire quelque chose, vous l'apprendrez avant le début du travail et non plus tard.

Caractéristiques:
- Je ne fais que de zéro. Il peut s'agir du site complet, de la page, de bloquer sur la page et ainsi de suite. C'est-à-dire que je ne me permet pas de quelqu'un d'autre.
- Je n'utilise pas de bootstrap. C'est pour le prototypage ou le lancement rapide, et non pour la conception normale.
- Je fais de la conception dans les formats PSD, AI ou CDR. Des autres, je ne le fais pas.

Les œuvres suivantes sont des captures d'écran du navigateur de calque réel que j'ai accompli et non des conceptions. Beaucoup d'excellents travaux n'ont pas saisi le portefeuille en raison de la réticence des clients.