Kompetent komponerad och visuellt utformad, i vårt fall är detta separat sida, är en viktig del av en personlig webbplats eller blogg för alla specialister som har uppnått en viss nivå av behärskning i sin yrkesverksamhet.
En portfoliosida är en sorts rapport, eller visuell sammanfattning, med hjälp av vilken du tydligt kan visa för läsare och besökare på din webbplats/blogg en uppsättning av de mest framgångsrika genomförda verken, vare sig det är fotografier, artiklar, publikationer, designelement , etc.
Jag har inte en sådan sida och för min del är detta ett irriterande utelämnande som måste korrigeras så snart som möjligt, vilket faktiskt finns i det här ögonblicket och jag jobbar.
I oändliga utrymmen globalt nätverk, kan hittas stor mängd färdiga sidmallar för att organisera en portfölj, och variationen av sådana sidor är verkligen imponerande. Så de som inte bryr sig om att fördjupa sig i alla krångligheterna med webbdesign och utveckling kommer alltid att kunna hitta ett lämpligt alternativ för sig själva. Nåväl, för de som saknar kunskaper i webbplatsbyggande, föreslår jag att titta på ett exempel på adaptiv layout, en enkel portföljsida, med filtrering av färdiga verk efter kategori, gjorda i , utspädd med en attraktiv övergångseffekt, med animationselement.
Sidlayouten, körbart javascript och några designelement skapades av den underbara webbdesignern och utvecklaren Kevin Liew (queness.com). När jag valde den optimala lösningen var det viktigt för mig att den var lätt att implementera, funktionaliteten i jQuery-plugin, rätt arbete i alla moderna webbläsare, och med tanke på den växande populariteten av att använda olika Mobil enheter, för internetsurfning, anpassningsförmåga av designen på den framtida sidan. Inga tjusiga, designerklockor och visselpipor eller tunga plugins.
Den grundläggande layouten består av två huvudelement användargränssnitt, som vi måste bygga är fliknavigering för att filtrera kategorier av inskickade verk, och själva rutnätet med miniatyrbilder med effekten av en popup-bildtext vid hovring.
Till att börja med, för att allt ska fungera i slutändan, behöver du jQuery version 1.7.0 eller högre. Om du inte har den ansluten ännu, lägg till följande rad före taggen:
Starta MixItUp-plugin, infoga den här koden efter ovanstående filer:
| < script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist") . mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , effekter: [ "fade" ] , easing : "snap" , // anropa hover-effekten onMixEnd: filterList() ) ), hoverEffect: function () ( $("#portfoliolist .portfolio") . hover( function () ( $(this) . find( ".label" ) stop(( botten: 0 ), "easeOutQuad" ), 500 , "easeOutQuad" ) ; ). find(".label" ) . "easeOutQuad" ) ); |
$(function () ( var filterList = ( init: function () ( $("#portfoliolist").mixitup(( targetSelector: ".portfolio", filterSelector: ".filter", effekter: ["fade"], lättnad : "snap", // anropar hover-effekten onMixEnd: filterList.hoverEffect() )), hoverEffect: function () ( $("#portfoliolist .portfolio").hover(function () ( $(this). find( ".label").stop().animate((botten: 0), 200, "easeOutQuad"); 500, "easeOutQuad"); funktion () ( $(this).find(".label").stop().animate((bottom: -40), 200, "easeInQuad"); $( this).find ("img").stop().animate((överst: 0), 300, "easeOutQuad" ) ) filterList.init());
Det är ingen mening att överväga alla plugin-alternativ separat bästa alternativet. Tja, om någon kommer att tvingas experimentera med parametrar, vänligen gör allt som står i din makt.
För att forma sidlayouten och utseendet på elementen, anslut ett par filer till dokumentet. , en för grundläggande stilar, låt oss kalla det till exempel: layout.css och en annan liten CSS-fil normalize.css, för att säkerställa bättre webbläsarkonsistens i standarddesignen av element:
| < link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" > |
Låt oss nu titta på allt i ordning, om möjligt utan onödigt vatten, på ett lättillgängligt och begripligt sätt, på vårt modersmål med långmodighet.
| < ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Allt< li>< span class = "filter" data- filter= "app" >Ansökningar< li>< span class = "filter" data- filter= "card" >Visitkort< li>< span class = "filter" data- filter= "icon" >Ikoner< li>< span class = "filter" data- filter= "logo" >Logotyp< li>< span class = "filter" data- filter= "web" >webbdesign |
- Allt
- Ansökningar
- Visitkort
- Ikoner
- Logotyp
- webbdesign
På navigeringspanelen placerar vi hela listan över verk, uppdelad i kategorier. Vi måste associera varje portföljkategori genom data-cat-attributet med ett eller annat navigeringsfältsobjekt i enlighet med värdet i data-filter-attributet. Genom att matcha värdena för data-filter med data-cat kommer portföljobjekten att filtreras efter kategori.
Dessutom kommer vi att lägga till miniatyrbilden, dold tills vidare, en liten panel med namnet på verket och rubriken på kategorin, som dyker upp först när du håller muspekaren över bilden. Och för att göra det lättare att forma utseende För hela denna struktur i CSS, låt oss tilldela motsvarande klasser till elementen:
| < div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Beget hosting. Ru< span class = "text-category" >Logotyp< div class = "label-bg" > ......... |
Värd för Beget.Ru Logotyp.........
Observera att du kan lägga till länkar till bilden eller direkt till signaturen så att användaren fullt ut kan se allt ditt arbete.
Låt oss nu tyst gå vidare till den mest intressanta delen, till bildandet i CSS av de allmänna stilarna för användargränssnittet på vår portföljsida och dess adaptiva version. I artikeln kommer jag att ange endast de grundläggande (standard) värdena, det vill säga utan några bakgrundsbilder och anslutna typsnitt, allt detta, för de som behöver det, kan ses i demon, eller hittas i arkivet med källkoden; .
| .container ( position : relativ ; bredd : 960px ; margin : 0 auto ; /* Du kommer att kunna se kedjan av övergångar när du ändrar storlek på webbläsarfönstret */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o -transition: all 1s ease span ( display : block ; padding : 5px 20px ; text-decoration : none ; color : #666 ; /* lägg till lite skugga för texten */ text-shadow : 1px 1px #FFFFFF ; /* ändra bakgrunden för kategorin på hover */ # filters li span: hover ( bakgrund : #34B7CD ; text-shadow : 0 0 2px #004B7D ; färg : #fff ; ) /* bakgrund för det aktiva kategoriobjektet */ #filters li span.active ( bakgrund : rgb (62, 151, 221); text-shadow: 0 0 2px #004B7D; #fff; -moz-box-storlek: border-box; -o-box-storlek: border-box ; bredd: 23%; marginal: 1%; display: ingen; flyta till vänster; |
Container (position: relativ; bredd: 960px; marginal: 0 auto; /* Du kommer att kunna se kedjan av övergångar när du ändrar storlek på webbläsarfönstret */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o- transition: all 1s ease: all 1s ease ) #filters li span; (display: block; padding:5px 20px; text-decoration:none; color:#666; /* lägg till en liten skugga för texten */ text-shadow: 1px 1px #FFFFFF; markör: pekare; /* ändra bakgrunden av kategorin på hover */ #filters li span:hover ( bakgrund: #34B7CD; text-shadow: 0 0 2px #004B7D; färg:#fff; ) /* bakgrund för det aktiva kategoriobjektet */ #filters li span. aktiv ( bakgrund: rgb(62, 151, 221); text-shadow: 0 0 2px #004B7D; färg:#fff; ) #portfoliolist .portfolio ( -webkit-box-sizing: border-box; -moz-box- dimensionering: border-box; -o-box- dimensionering: border-box: . position: relativ !viktigt; bakgrund: #666; cursor:pointer; ) .portfolio img ( max-width:100%; position: relativ; ) /* signaturer är dolda som standard */ .portfolio .label (position: absolut; bredd: 100%; höjd:40px; botten:-40px; ) . portfolio .label-bg ( bakgrund: rgb(62, 151, 221); bredd: 100 %; höjd: 100 %; position: absolut; topp: 0; vänster: 0; ) .portfolio .label-text ( färg: # fff; position: relativ z-index:500; utfyllnad: .portfolio .text-kategori (display:block;
I den andra delen, precis i samma stilmall, med hjälp av flera mediefrågor, kommer vi att skapa alternativa CSS-sektioner. För att säkerställa att vår sidlayout visas korrekt på skärmarna på olika mobila enheter kommer vi även att lägga till alternativa CSS-regler för olika skärmar till dessa avsnitt. Således kan vi enkelt åsidosätta alla regler som tidigare ställts in i vår CSS-tabell för vanliga webbläsare och uppnå den eftertraktade anpassningsförmågan.
| /* Surfplatta */ @media only-skärm och (min-bredd : 768px ) och (maxbredd: 959px ) ( .container ( width : 768px ; ) ) /* Mobil - Obs: Design för 320px bredd*/ endast @media skärm och (maxbredd : 767 px ) ( .container ( bredd : 95% ; ) #portfoliolist .portfolio ( bredd : 48% ; marginal : 1% ; ) ) /* Mobil - Obs: Design för 480 px bredd */ @media endast skärm och (min-bredd: 480px) och (maxbredd: 767px) (.container (bredd: 70%;)) |
/* Surfplatta */ @media only screen and (min-width: 768px) and (max-width: 959px) ( .container ( width: 768px; ) ) /* Mobil - Obs: Design för 320px bredd*/ @media only skärm och (maxbredd: 767px) ( .container ( bredd: 95%; ) #portfoliolist .portfolio ( width:48%; margin:1%; ) ) /* Mobil - Obs: Design för 480px bredd */ @media endast skärm och (min-bredd: 480px) och (maxbredd: 767px) ( .container ( bredd: 70%; ) )
Det är allt. Vår underbara sida under den rymliga titeln "Portfolio" är klar, allt som återstår är att fylla den med dina lika underbara och enastående verk och visa upp den för hela världen att se. Du kan fortfarande vara tyst, blygsamt, stolt över dig själv. Det viktigaste är att inte överdriva det i denna fråga.
Titta på exemplet igen och, om nödvändigt, ta källkoden på din fritid, i en lugn hemmiljö, kan du få detta arbete till perfektion.
När lektionen skapades användes följande material: . Den ursprungliga, orörda, färska från författarens penna, portföljsidan finns där.
Lycka till alla och njut av resten av den korta sommaren!
Vi fortsätter serien med lektioner om webblayout från grunden. Vi lade ut rubriken för layouten. Därefter kommer ett block med ett stort fotografi som bakgrund. Detta block är placerat på den första skärmen i webbläsaren, vilket betyder att det är i fokus för användarens uppmärksamhet. Placera därför i detta område endast en visuellt attraktiv bild som förmedlar essensen av webbplatsen och viktig information.
Som du märkte skapar vi en portföljlayout, men inte en vanlig, utan en hund. Men bortsett från skämt kommer resultatet att vara en standardmall i stil med den populära platta designen, som du kan använda själv och ersätta text och fotografier. Platt design kännetecknas av färgkontraster. Hela sidan är uppdelad i flera block, där ett ljust block ersätter ett mörkt och så vidare för hela sidans höjd, flera skärmar. Varje block bör helst innehålla samma innehåll.
Hela layouten består av ett sidhuvud, fyra sektioner och en sidfot.
..
Bild
Portfölj
Om mig
Formulär och kontakter
..
Bakgrund: url("din_bild.jpg") no-repeat;
Bakgrundsstorleksväljaren styr storleken på bilden. Infoga hela bilden i bredd och höjd. När skärmstorleken ökar kommer bilden att sträckas ut, och när skärmstorleken minskar kommer den att skalas utan att bibehålla proportionerna.
Bakgrundsstorlek: 100 % 100 %;
Inuti sektionsbehållaren kommer vi att placera ett div-block med en titel, text och en knapp.
Vi klistrar in hela koden i vår HTML-dokument, efter taggen.
Det är svårt att vara "snäll"
Varje dag vaknar jag med en enda tanke på hur svårt det är att vara trevlig. Men jag låtsas inte att jag är trött på att du "smeker" och "läser".
Få reda på mer
Kod för style.css:
Mops_bg(
bakgrund: url(images/articles/html_coding_banner.jpg) no-repeat;
bakgrundsstorlek: 100 % 100 %;
}
.mops_text(
stoppning: 20% 0%;
}
.mops_text h2 (
färg: #fff;
teckenstorlek: 2,9 em;
teckensnittsvikt: 600;
z-index: 10;
text-align: center;
position: relativ; /* relativ placering av titel */
margin-top: -140px;
}
.mops_text h2 span (
teckenstorlek: 1,1 em;
teckensnittsvikt: 290;
}
.mops_text p(
färg: #fff;
teckenstorlek: 1,2 em;
text-align: center;
marginal: 1,4em auto;
bredd: 76%;
teckensnittsvikt: 200;
linjehöjd: 1,3em;
}
.mops_text .da-butt (
display: block;
bakgrundsfärg: #a97b7b;
färg: #fff;
teckenstorlek: 1em;
text-transform: versaler;
marginal: 0 auto;
bredd: 10%;
text-align: center;
stoppning: 1em 2em;
}
.da-butt (
position: absolut; /* absolut placering av knappen */
vänster: 750px; topp: 370px; /* indrag från webbläsarkanterna */
}
.mops_text .da-butt:hover
{
bakgrund:#d0a5a5;
}
.butt-img(
bredd: 50px;
höjd: 50px;
display: block;
marginal: 2em auto 1em;
bakgrund: url(images/articles/html_coding_buttonimg.png);
-webkit-transition: alla 0.5s lätta-in-ut; /* smidig övergång */
-moz-transition: alla 0,5s lätta-in-ut; /* smidig övergång */
-o-transition: alla 0,5s lätta-in-ut; /* smidig övergång */
-ms-transition: alla 0.5s lätta-in-ut; /* smidig övergång */
övergång: alla 0,5s lätta-in-ut; /* smidig övergång */
position: relativ; /* absolut placering av pilen */
vänster: 210px; topp: 130px; /* indrag från förälder */
}
.butt-img:hover(
display: block;
bredd: 50px;
höjd: 50px;
bakgrund: url(images/articles/html_coding_buttonimgh.png);
}
Resultatet av arbetet kan ses på
Låt oss först markera det nya HTML5-dokumentet. I rubriken kommer vi att aktivera sidformatet. jQuery-bibliotek, Quicksand-plugin och vår fil script.js kommer att inkluderas före den avslutande body-taggen:
index.htmlMin portfölj
HTML5 header-elementet innehåller vår h1 header (som är utformad som en logotyp). Sektionselementet innehåller en oordnad lista med portföljobjekt (andra listor läggs till med jQuery-kod. Nav-elementet, formaterat som en grön stapel, fungerar som ett innehållsfilter).
#stage oordnad lista innehåller våra portföljobjekt. Varje artikel har ett dataattribut som anger en serie kommaseparerade etiketter. Senare, i jQuery-koden, går vi igenom listan, spelar in etiketterna och skapar kategorier som kan väljas från den gröna menyraden.
Du kan placera andra verk i objektlistan och använda andra etiketter.
jQueryInsticksprogrammet Quicksand jämför två oordnade listor, hittar samma li-element i dem och animerar arrangemanget. jQuery-skriptet i den här delen av handledningen går igenom portföljobjekten i #stage-listan och skapar nya (dolda) oordnade listor för varje tagg som den hittar. Dessa listor kommer sedan att användas för att köra Quicksand-plugin.
Efter att sidan har laddats kör vi en loop för att upptäcka etiketterna.
script.js – del 1$(document).ready(function())( var items = $("#stage li"), itemsByTags = (); // Gå igenom alla li-element: items.each(function(i)( var elem = $ ( detta), taggar = elem.data("tags").split(","); // Lägg till data-id-attributet som krävs av Quicksand-plugin: elem.attr("data-id",i); taggar,funktion(nyckel,värde)( // Ta bort extra utrymmen: värde = $.trim(värde); if(!(värde i itemsByTags))( // Skapa en tom array för objekt: itemsByTags = ; ) // Varje objekt läggs till en array av tagg: itemsByTags.push(elem); )); ));
Varje tagg läggs till objektet itemsByTags som en array. Det betyder att itemsByTags["Webbdesign"] kommer att innehålla en uppsättning av alla objekt som har taggen "Web Design". Vi använder detta objekt för att skapa en dold oordnad lista på sidan för Quicksand-plugin.
Låt oss skapa hjälpfunktioner
script.js – del 2Funktion createList(text,items)( // Hjälpfunktion som hämtar menyknappens text och // en array av objekt li // Skapa en tom oordnad lista var ul = $("
- ",("class":"hidden")); $.each(items,function())( // Skapa en kopia av varje li-objekt // och lägg till den i listan: $(this).clone() .appendTo(ul )); ul.appendTo("#container"); = $(" ",( html: text, href:"#", data: (list:ul) )).appendTo("#filter"); )
Denna funktion tar emot gruppnamnet och en array av li-objekt som parametrar. Den klonar sedan in dessa objekt ny lista ul och lägger till en länk till det gröna fältet.
Nu går vi igenom alla grupperna och anropar hjälpfunktionen, och lägger även till klickhändelsehantering för menyalternativen.
script.js – del 3// Skapa alternativet "Alla" i menyn: createList("Alla",items); // Slinga genom arrayerna i itemsByTags: $.each(itemsByTags,function(k,v)( createList(k,v); )); $("#filter a").live("klick",function(e)( var länk = $(this); link.addClass("active").siblings().removeClass("active"); // Vi använder Quicksand-plugin för att animera li-objekten // Den använder data("list") som definieras av vår createList-funktion: $("#stage").quicksand(link.data("list").find("li). ")); e.preventDefault()); $("#filter a:first").click();
CSSDen mest intressanta delen CSS-stilar- grön rand #filter. Den använder pseudoelementen :before / :after för att skapa attraktiva hörn på sidorna av remsan. Eftersom de är placerade absolut, när remsstorleken ändras, kommer de att visas där de behövs.
styles.css#filter ( background: url("../img/bar.png") repeat-x 0 -94px; display: block; height: 39px; margin: 55px auto; position: relative; width: 600px; text-align: center; -moz-box-shadow:0 4px 4px #000; -webkit-box-shadow:0 4px 4px #000; 4px #000; ") no-repeat; position: absolut topp: 0; innehåll: ""; (0,0,0,0.4); -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4); box -shadow:0 2px 0 rgba(0,0,0,0.4) #filter:före (bakgrundsposition: 0 -47px; vänster: -78px; ) #filter:efter (bakgrundsposition: 0 0; höger: -78px; ) #filter a( färg: #FFFFFF; display: inline-block; höjd: 39px; line-height: 0 15px; text-shadow:1px 1px 1px ) #filter a:hover( text-decoration:none; ) #filter a.active( bakgrund: url ("../img/bar.png") repeat-x 0 -138px; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), -1px 0 0 rgba(255, 255, 255, 0,2), 1px 0 1px rgba(0,0,0,0.2) infälld, -1px 0 1px rgba(0,0,0,0.2) infälld; )
Du kan använda mallen för dina projekt. Det är enkelt att ändra portföljens innehåll. Om användaren har inaktiverat JavaScript kommer han fortfarande att se arbetet, vilket har en gynnsam effekt på webbplatsens SEO.
I modern värld ibland är det lika viktigt att ha en egen hemsida som att till exempel ha ett telefonnummer eller en adress E-post. Tyvärr kan inte alla skapa en vacker professionell webbplats på egen hand, och ibland fungerar det inte ens. Att beställa från programmerare är inte heller en idealisk lösning, eftersom inte alla har råd med det.
Gratis sådana hjälper dig att komma ur den här situationen HTML-mallar webbplatser. En HTML-webbplatsmall är en uppsättning färdiga statiska sidor för en webbplats om ett specifikt ämne. Med hjälp av en sådan mall kan du skapa en enkel hemsida på bara ett par timmar, om du har grundläggande kunskaper HTML-uppmärkning. I HTML-sektionen kommer du att få denna kunskap om du ägnar ett par timmar till att studera, och om du tar dig tid att studera CSS-sektionen, kommer du att fullt ut kunna kontrollera utformningen av HTML-webbplatsmallar och anpassa dem helt för att passa dina behov.
En annan obestridlig fördel med webbplatsmallar är att de i de flesta fall är skrivna av proffs. En professionell webbplatsmall innebär inte bara en vacker och modern design, utan också sättet koden är skriven på. Sökmotorer De tittar på hur din hemsida är skriven, om koden är SEO-optimerad eller inte, och utifrån detta sänker eller ökar de din position i sökresultaten. Därför ska en bra hemsida inte bara vara vacker och modern, vilket är viktigt, utan även kodmässigt korrekt skriven.
Ladda ner gratis HTML-webbplatsmallar och skapa dina projekt på nolltid.
Jag gör webblayout.
7 års allmän erfarenhet av webbutveckling (design, layout, programmering).
Grundläggande färdigheter: HTML, CSS, JS, SVG, jQuery, Node.js, WordPress, webbdesign (Photoshop, Corel), git.
Ibland använder jag: PHP, MySQL.
Fördelar med min layout:
– Jag vet hur allt fungerar från design till server, så layouten är kortfattad och begriplig. Jag kan arbeta i ett team med din designer och programmerare. Designers får en pixel-för-pixel-överensstämmelse mellan layouten och deras design. Och programmerare skruvar snabbt layouten där det behövs utan problem.
– Jag gör det för datorer, surfplattor och telefoner.
- För alla moderna webbläsare. Jag kan för gamla om det behövs från IE6 :)
– Jag programmerar allt som behövs på sidorna: förfrågningar till servern, animationer, gränssnitt, miniräknare.
– Jag skriver all kod för hand.
– Koden är absolut giltig.
- Sidhastighet upp till 100 % i Google PageSpeed.
Fördelar med att arbeta med mig:
– Om vi kommer överens, då gör jag det direkt utan dröjsmål.
– Jag gör det snabbt. Kvaliteten blir inte lidande. Om någon lovar dig snabbare kommer du med största sannolikhet att få något ojämförligt värre.
– Jag brukar jobba med efterskottsbetalning, men i delar. Gjorde delen, du kontrollerade, betalning.
– Jag rättar i lugn och ro till fel efter att ha lämnat in arbetet, om det finns några.
– Om jag inte kan göra något får du veta innan arbetet börjar, och inte senare.
Egenheter:
– Jag gör det bara från grunden. Detta kan vara hela webbplatsen, en sida, ett block på en sida och så vidare. Det vill säga, jag redigerar inte någon annans layout.
- Jag använder inte Bootstrap. Är det för prototyping eller Snabbstart, inte för normal design.
– Jag gör från mönster i PSD-, AI- eller CDR-format. Jag gör det inte från andra.
Verken som presenteras nedan är skärmdumpar från webbläsaren av den faktiska layouten som jag slutförde, inte designen. Många utmärkta verk inkluderades inte i portföljen på grund av kundernas motvilja.
