ადმინისტრაციული პორტფოლიო HTML5-ზე. რომელი შაბლონი გსურთ „პორტფოლიოს“ კატეგორიისთვის? თოვლი - უფასო სადესანტო გვერდის შაბლონი HTML5-ზე და CSS3-ზე

ამ კოლექციამ გაზარდა შაბლონები სხვადასხვა პროფესიისთვის, მაგრამ ძირითადად პროგრამის თემის შესაფასებლად, ვებ დიზაინერები და განლაგების დიზაინერები, რადგან ნამუშევრის დიზაინი და სტრუქტურა საუკეთესოდ შეეფერება თავად მათ.

მანამდე ჩვენ უკვე გამოვაქვეყნეთ დამატებითი შაბლონები პორტფელის შესაქმნელად. Მაგალითად:

სუფთა

პროფესიონალი, სუფთა პერსონალური პორტფოლიოს და დამოუკიდებელი ვებ ჟურნალის სპეციალური გვერდის შესაქმნელად. იდეალურად შეეფერება დიზაინერებს, განლაგების დიზაინერებს და პროგრამისტებს.
შაბლონი სრულად ადაპტირებადია, მას აქვს ელემენტების გარეგნობის ანიმაცია სწორი კოდით გადახვევისას.

გორგო პორტფოლიო

სუფთა, სუფთა და ელეგანტური დიზაინერის პორტფოლიოს შაბლონი. ვიკონანი მინიმალიზმის სტილში. ასევე არის ლამაზი ახალი ეკრანის მენიუ.
რობოტის კონდახებით ბადე იშლება მოჭადრაკე ქალის კონდახის უკან, ისე რომ უფრო მშვიდია, ფრაგმენტები ტენდენციაა. რობოტის მხარემ ჩემზე კიდევ უფრო დიდი შთაბეჭდილება მოახდინა, ალბათ დემო ნაწილის საშუალებით. თუ თქვენ აპირებთ გამოყოთ მთელი დიზაინი, როგორც სპეციალური ელემენტი, გთხოვთ გაითვალისწინოთ ნამუშევრის მკაფიო დიზაინი.

ლითიუმი

ბეზკოშტოვნი საპასუხო შაბლონისტილში Ბინა, რომელიც იდეალურია ნებისმიერი ფრილანსერისთვის, იქნება თქვენ ვებ მწერალი თუ ფოტოგრაფი, რადგან სადგური გთავაზობთ როგორც პორტფოლიოს სამუშაო კატეგორიების ფილტრით, ასევე ფოტო გალერეით.

კონიაკი

კიდევ ერთი ხიდის ზემოთ მკაფიო შაბლონი სპეციალური პორტფელის შესაქმნელად. არსებობს ბევრი სიკეთე, რომელიც ჩვენ ძალიან გვიყვარს: პარალაქსის ეფექტები, ბლოკების ეფექტი, რომლებიც ჩნდება გადახვევისას, გლუვი გადახვევა, სხვადასხვა მკურნალობა და, განსაკუთრებით, თავად პორტფელის ბლოკი.
შაბლონი აბსოლუტურად უფასოა და შესაფერისია ნებისმიერი IT პროფესიის ფრილანსერებისთვის.

კონგი

წიკავი html დიზაინერის პორტფოლიოს შაბლონი. პირველ ეკრანზე შეგიძლიათ განათავსოთ თქვენი ფოტო, წარმოგიდგინოთ საკუთარი თავი და დაწეროთ თქვენი სპეციალობა.
შაბლონის თითქმის ყველა ბლოკი განხორციელებულია ისევე, როგორც ჩვენ გვინდა ვიხილოთ სტანდარტულ სადესანტო გვერდზე.
ფერადი სქემა რომ იყოს, შევცვლიდი. უკვე უნდა მოვიშორო.

MyFolio

ვიდმინნი ადაპტირებული ცალმხრივი პორტფელიმწვანე ტონებში. ეს ეხება როგორც ფრილანსერებს, ასევე დეველოპერების გუნდებს. წერის შაბლონი ნათელია და პატივისცემას იმსახურებს.

ძირითადი

სუვორი შაბლონი ლურჯი ტონებითპორტფელის შესაქმნელად. პობუდოვანოვი Bootstrsp 3.2-ზე. პირველ ეკრანზე ხატების შეცვლით, შეგიძლიათ გახდეთ ფრილანსერი საქმიანობის ნებისმიერ სფეროში.

Პატარა

არ არის დიდი ცალმხრივი HTML შაბლონი ბრტყელ სტილში. განყოფილებები დაყოფილია სამ ეკრანად 100% სიმაღლით. პირველი ეკრანი არის ფოტო და მოკლე ინფორმაცია ფრილანსერის შესახებ.
კიდევ ერთი ეკრანი არის პორტფოლიო. დანარჩენი ნახეთ 8 რობოტი თქვენი პორტფოლიოდან დრიბლზე. სულ ეს არის, რაც უნდა განვითარდეს და სულ ეს არის. სურათები განახლდება დამოუკიდებლად, Dribbble-ზე თქვენს აქტივობებთან სინქრონულად.
მესამე ეკრანი - საკონტაქტო ინფორმაცია.

კელვინი

მკაფიო, უნივერსალური HTML5 CSS3 შაბლონი. Ceevee-ს შეუძლია გამოიცნოს რა სახის მოგება არსებობს და ასევე მნიშვნელობა აქვს კონდახებით ბლოკის კონცეფციას, რომელიც მუშაობს გრაფიკებში, რომლებიც წარმოადგენენ ფრილანსერის უნარებს. დაემატა სხვადასხვა ბლოკის მეშვეობით დეტალური თვითმმართველობის საუბრის შესაძლებლობა.

პორტიო

შესანიშნავი, უნივერსალური შაბლონია, თუმცა ბევრი პუნქტია, რომელსაც არ გავაფუჭებ: სულელური შრიფტები, ცუდი ღილაკები. ალბათ ვინმეს მოეწონება ეს ვარიანტი. Yak nyak - ნათელი ფერის სქემა. იაკშჩო ცოტა სიხალისე CSS სტილები, შეგიძლიათ მიაღწიოთ კარგ შედეგებს.

პორტი

ბეზკოშტოვნი, მე ვგულისხმობ, რომ ვთქვა ბი, ელეგანტური ცალმხრივი შაბლონი Bootstrap-ზე დაფუძნებული. განსაკუთრებით მომწონს წითელი აქტიური ელემენტები. კონდახებით ბლოკი მუშაობს როგორც დასაკეცი ბადე და ეს არის პლუსი. ეს შაბლონი იქნება სასარგებლო გადაწყვეტილებები შესაქმნელად ვებ დიზაინერის ან პროგრამისტის პორტფოლიო.

ჰექსა

მდიდრულად ფერადი ბრტყელი შაბლონი სლაიდერით და თავსახურით დამახასიათებელი ფერის სქემით - მწვანე. ამ გადაწყვეტით, თქვენ შეგიძლიათ შექმნათ სავიზიტო ბარათის მშვენიერი ვებგვერდი კონდახებით და ბლოგით.

ფრილანსერი

ვიდმინნი ცალმხრივი ბრტყელი სტილიდა მწვანე ფერის სქემა. პირველ ეკრანზე არის ადგილი ფოტოს ქვეშ და უფრო მარტივად, რომ არ გააფუჭოს დიზაინის სტილი, ვლასნიკის ავტოპორტრეტის ნახატი საიტზე.
შაბლონი პატარაა და ეს შესანიშნავი პლიუსია, ასე რომ, ჩვენი მიზნებისთვის არაფერია „პარტიის გოგოების“ ვიკორიზაცია. Viconaniy, გასაკვირია, ძალიან ნათელია. ის მთლიანად ადაპტირებადია და ეფუძნება Bootstrap ჩარჩოს.

Dribbble პორტფოლიო

კიდევ ერთი შაბლონი, პორტფოლიო იაკომაში ინტეგრირებულია Dribbble-თან. თქვენ უნდა შეწყვიტოთ თქვენი დანარჩენი სამუშაოს აქტივობების კორექტირება და დაივიწყოთ თქვენი პორტფელის მუდმივი, დამღლელი განახლება საკუთარ გვერდზე.
ლექსების ნიმუში სუვორია, ყოველდღიური ფერის სქემა. ყველაფერი ძალიან სუფთად გამოიყურება.
ასე რომ, ისევე როგორც წინა Dribbble შაბლონი, ის არ არის დიდი. მე ვიტყოდი, ლაკონური. ზაგალომ, ჩემი რეიტინგი 10-დან 9-ია.

გიკი

უმნიშვნელო, მინდა ვიგრძნო თავი ცოტა მნიშვნელოვანი, შაბლონი ფრილანსერის პორტფოლიოს შესაქმნელადდანახვაზე სადესანტო მხარე. ჩვენ ვიყენებთ სხვადასხვა დიაგრამებს, რათა ვიზუალურად აჩვენოთ ახალბედათა დონე მათ აქტივობის პროფილებში - ეს ყველაფერია. ასევე არის სლაიდერი კლიკერებით და ბლოკი ლამაზი ბადით ფოტოთი, რომელიც შეგიძლიათ გამოიყენოთ თქვენი სამუშაოს დემონსტრირებისთვის.

Dribbble Folio V2

ბეზკოშტოვნი შაბლონი ავტომატური განახლების პორტფელით. ნამუშევრები შემოტანილია საიტიდან დრიბლინგი. ვიკორსტანიამამდე რა არის გადაწყვეტილება, არ დაგავიწყდეთ ინტეგრაციის დაყენება თქვენს Dribbble პროფილთან.
სამწუხაროდ, დემო ვერსია არ არის.

ნავსადგური

Ორიგინალური html cssნიმუში მეწამულ ტონებშიპირადი ვებსაიტის შესაქმნელად. ეს არის უხვად ცალმხრივი თემა, მთავარი გვერდით ცალმხრივი გვერდის სტილში და ასევე, თავისებურად, ასევე შიდა გვერდებით. წადი შენობისკენ სპეციალური ფრილანსერების საიტიიყოს რაიმე სპეციალობა.

კომპეტენტურად დაკეცილი და ვიზუალურად გაფორმებული, ჩვენი აზრით, ეს გვერდიგვერდ არის სპეციალური ვებსაიტის თუ ბლოგის, იქნება ეს რომელიმე სპეციალისტის მნიშვნელოვანი ელემენტი, რაც მისი ოსტატობის დიდი დონის მიღწევაა. პროფესიული საქმიანობა.
პორტფოლიოს გვერდი, ასეთი უნიკალური ჟღერადობით, ან ვიზუალური შეჯამებით, რომლის დახმარებით თქვენ შეგიძლიათ ნათლად აჩვენოთ საიტის/ბლოგის მკითხველებს და ვიზიტორებს, ბოლო დროს განხორციელებული ნამუშევრების შერჩევა, იქნება ეს ფოტოები, სტატისტიკა, პუბლიკაციები. , დიზაინის ელემენტები და ა.შ.
მე არ მაქვს ასეთი მხარე და, მეორე მხრივ, არის ზედამხედველობა, რომელიც უნდა გამოსწორდეს რაც შეიძლება სწრაფად, რაზეც მე მაქვს ძალა ნარაზიᲕმუშაობ.
გაუთავებელ სივრცეებში გლობალური ზომა, შეგიძლიათ იპოვოთ არაერთი მზა გვერდის შაბლონი პორტფელის ორგანიზებისთვის და ასეთი გვერდების მრავალფეროვნება მართლაც შთამბეჭდავია. ასე რომ, მათ, ვისაც სურს გაიგოს ვებ დიზაინის ყველა დახვეწილობა და განვითარება, მალე შეძლებენ იპოვონ შესაფერისი ვარიანტი საკუთარი თავისთვის. კარგად, მათთვის, ვისაც სჭირდება ცოდნა ვებსაიტისგან, მე წარმოგიდგენთ ადაპტირებულ განლაგებას, მარტივ პორტფოლიოს გვერდს, სამუშაოების ფილტრირებით კატეგორიების მიხედვით, განზავებით დამატებითი გარდამავალი ეფექტით, ანიმაციის ელემენტებით ї .

გვერდის განლაგება, რომელიც მოიცავს Javascript და დიზაინის ელემენტებს, როგორც ჩანს „მთაზე“, მშვენიერი ვებ დიზაინერის და დეველოპერი კევინ ლიუს მიერ (queness.com). ოპტიმალური გადაწყვეტის არჩევისას ჩემთვის მნიშვნელოვანი იყო დიზაინის სიმარტივე და ფუნქციონალობა jQuery მოდული, სამუშაო ყველასთვის სწორია მიმდინარე ბრაუზერები, და მზარდი პოპულარობა ჯანმრთელობის დაზღვევის და სხვადასხვა მობილური მოწყობილობებიინტერნეტში სერფინგისთვის, თქვენი ვებსაიტის დიზაინთან ადაპტირება. ყველა სახის ქიმერული, დიზაინერული ზარები და სასტვენები და შესანიშნავი დანამატები.

ძირითადი განლაგება შედგება მომხმარებელთა ინტერფეისის ორი ძირითადი ელემენტისგან, რომლებზეც ჩვენ უნდა ვიმუშაოთ: ნავიგაცია ჩანართებში სამუშაო წარდგენის კატეგორიების გასაფილტრად და თავად ესკიზების ბადე შერწყმის ეფექტით, როდესაც მითითებულია.
დასაწყისისთვის, იმისათვის, რომ ყველაფერი სწორად იმუშაოს, დაგჭირდებათ jQuery ვერსია 1.7.0 ან უფრო მაღალი. თუ ჯერ არ გაქვთ კავშირები, დაამატეთ წამყვანი მწკრივი ტეგის წინ :

გაუშვით MixItUp მოდული რობოტში, ჩადეთ ეს კოდი სხვა ფაილების შემდეგ:

< script type= "text/javascript" >$(function () ( var filterList = ( init: function () ( $("#portfoliolist" ) ) mixitup(( targetSelector: ".portfolio" , filterSelector: ".filter" , ეფექტები: [ "fade" ) , შემსუბუქება : "snap" , // მოვუწოდებთ hover-ის ეფექტს MixEnd: filterList () . img" ) , 500 , "easeOutQuad" ), ფუნქცია () ($(this) . find(".label" ) . stop() . animate(( bottom: - 40 ) , 200 , "easeInQuad" ) ; this) .find("img") .stop() .animate(( top: 0) , 300, "easeOutQuad"); )) ; ) ) ;filterList.init() ; )) ;

ყურადღებით დააკვირდით მოდულის ყველა კონფიგურაციას, საუკეთესო ვარიანტის დადგენის გზა არ არსებობს. ისე, თუ უკვე გსურთ პარამეტრებით ექსპერიმენტი, იყავით კეთილი, ყველაფერი თქვენს ძალაშია.

გვერდის განლაგებისა და ელემენტების ახალი გარეგნობის ჩამოსაყალიბებლად, დააკავშირეთ რამდენიმე ფაილი დოკუმენტთან . , ერთი ძირითადი სტილისთვის, მაგალითად: layout.css და სხვა პატარა CSS ფაილი normalize.css, რათა უზრუნველყოს ბრაუზერის უკეთესი გამოყენებადობა სტანდარტული დიზაინის ელემენტებით:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

ახლა მოდით შევხედოთ ყველაფერს თანმიმდევრობით, რამდენად არის შესაძლებელი ზედმეტი წყლის გარეშე, ხელმისაწვდომი და გასაგები, ჩვენი ძვირფასი, უხვად დაავადებული ადამიანისთვის.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >ყველა < li>< span class = "filter" data- filter= "app" >პროგრამა < li>< span class = "filter" data- filter= "card" >Ბიზნეს ბარათები < li>< span class = "filter" data- filter= "icon" >ხატები < li>< span class = "filter" data- filter= "logo" >ლოგო < li>< span class = "filter" data- filter= "web" >ვებ დიზაინი

  • ყველა
  • პროგრამა
  • Ბიზნეს ბარათები
  • ხატები
  • ლოგო
  • ვებ დიზაინი

ნავიგაციის პანელი შეიცავს სამუშაოებისა და კატეგორიების მთელ ჩამონათვალს. ჩვენ უნდა დავაკავშიროთ პორტფელის თითოეული კატეგორია data-cat ატრიბუტის მეშვეობით ამ და სხვა ელემენტს ნავიგაციის პანელში მონაცემთა ფილტრის ატრიბუტის მნიშვნელობასთან. მონაცემთა ფილტრის მნიშვნელობის data-cat-ზე დაყენების გზა არის პორტფელის ელემენტების კატეგორიების მიხედვით გაფილტვრა.
გარდა ამისა, დღის ბოლომდე შენახულ ესკიზს ემატება პატარა პანელი ნამუშევრის სახელწოდებით და კატეგორიის სათაურით, რომელიც ერწყმის მხოლოდ სურათზე გადაადგილებისას. და უფრო ადვილია ჩამოყალიბება გარეგანი სახე CSS-ში ყველა ამ კონსტრუქციისთვის ჩვენ დავწერთ ელემენტების შემდეგ კლასებს:

< 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" >შექმენით ჰოსტინგი. რუ < span class = "text-category" >ლოგო < div class = "label-bg" > .........

.........

გთხოვთ გაითვალისწინოთ, რომ თქვენ შეგიძლიათ დაამატოთ თქვენი შეტყობინება სურათზე ან პირდაპირ ხელმოწერაზე, რათა მყიდველმა დარწმუნებული იყოს, რომ შეასრულებს თქვენს სამუშაოს.

CSS

ახლა, ჩუმად, გადავიდეთ საბოლოო ეტაპზე, CSS-ში ჩვენი პორტფელის გვერდის კლიენტის ინტერფეისის მოწინავე სტილის ფორმირებაზე და ადაპტირებულ ვერსიაზე. სტატისტიკაში მხოლოდ ძირითად (განსახილველად) მნიშვნელობებს მივუთითებ ისე, რომ ყოველგვარი ფონის სურათებიდა დაკავშირებული შრიფტები, ყველაფერი რაც თქვენ გჭირდებათ, შეგიძლიათ ჩამოტვირთოთ დემო ვერსიაში, ან იპოვოთ არქივებში გამომავალი ფაილებით.

.container(პოზიცია: ფარდობითი; სიგანე: 960px; ზღვარი: 0 ავტო; /* შეგიძლიათ შეცვალოთ გადასვლების რაოდენობა ბრაუზერის ფანჯრის ზომის შეცვლისას */-webkit-transition: all 1s ease; -Moz-გარდამავალი: ყველა 1-ის სიმარტივე; -o-ტრანზიცია: ყველა 1-ის სიმარტივე; გადასვლა: ყველა 1-ის სიმარტივე; ) #filters (ზღვარი : 1% ; padding : 0 ; list-style : none ; ) #filters li (float : left ; ) : # 666; /* დაამატეთ ცოტა ჩრდილი ტექსტს */ text-shadow : 1px 1px #FFFFFF; კურსორი: მაჩვენებელი; ) /* შეცვალეთ კატეგორიის ფონი ჰოვერზე */#ფილტრები დიაპაზონში: ჰოვერი (ფონი: #34B7CD; ტექსტის ჩრდილი: 0 0 2px #004B7D; ფერი: #fff; ) /* აქტიური კატეგორიის ელემენტის ფონი */#filters li span.active (ფონი: rgb (62, 151, 221); ტექსტი-ჩრდილი: 0 0 2px #004B7D; ფერი: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box - moz-box-sizing ; -სიგანე : 100% ; /* ხელმოწერების რეგისტრაციისთვის */.პორტფოლიო .ეტიკეტი (პოზიცია: აბსოლუტური; სიგანე: 100%; სიმაღლე: 40 პიქსელი; %; პოზიცია: აბსოლუტური; ზედა: 0; მარცხნივ: 0;). ჩვენება: ბლოკი; შრიფტის ზომა: 9px; )

კონტეინერი ( პოზიცია: ფარდობითი; სიგანე: 960 პიქსელი; ზღვარი: 0 ავტო; /* შეგიძლიათ შეცვალოთ გადასვლების რაოდენობა ბრაუზერის ფანჯრის ზომის შეცვლისას */ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o- transition: all 1s ease: all 1s ease ) #filters ( margin:1%; padding:0; list-style:none; ) #filters li (float:left; ) padding:5px 20px; -დეკორაცია: არცერთი;ფერი:#666;/* დაამატეთ ცოტა ჩრდილი ტექსტისთვის */ text-shadow: 1px 1px #FFFFFF;კურსორი: მაჩვენებელი; ) /* კატეგორიის ფონის შეცვლა li span:hover ( background: #34B7CD; text-shadow: 0 0 2px #004B7D; color:#fff; ) /* აქტიური კატეგორიის ელემენტის ფონი */ #filters li span. აქტიური (ფონი: rgb(62, 151, 221) );ტექსტი-ჩრდილი: 0 0 2px #004B7D;ფერი:#fff; ზომა: სასაზღვრო ყუთი; სიგანე:23%; ზღვარი:1%; ჩვენება: არცერთი; float:მარცხნივ; overflow:დამალული; ) .po rtfolio-wrapper ( overflow: დამალული; პოზიცია: შედარებითი !მნიშვნელოვანი; ფონი: #666; კურსორი: მაჩვენებელი; ) .portfolio img ( max-width:100%; პოზიცია: ნათესავი; ) /* რეგისტრაციისთვის * / .პორტფოლიო .ლეიბლი (პოზიცია: აბსოლუტური; სიგანე: 100%; სიმაღლე: 40 პიქს; ქვედა: -40 პიქს; ) . პორტფოლიო .label-bg ( ფონი: rgb(62, 151, 221); სიგანე: 100%; სიმაღლე:100%; პოზიცია: აბსოლუტური; ზედა:0; მარცხნივ:0; .პორტფოლიო .label-ტექსტი ( ფერი:# fff, პოზიცია: ნათესავი, z-ინდექსი: 500 padding: 5px 8px;

მეორე ნაწილში, პირდაპირ ამ სტილის ფურცელში, ალტერნატიული CSS სექციები შეიძლება შეიქმნას რამდენიმე მედია მოთხოვნის გამოყენებით. იმის უზრუნველსაყოფად, რომ ჩვენი გვერდის განლაგება სწორად გამოჩნდება სხვადასხვა მობილური მოწყობილობის ეკრანებზე, ჩვენ დავამატებთ CSS-ის ალტერნატიულ წესებს. სხვადასხვა ეკრანებიამ განყოფილებაში. თავად ტიმს შეუძლია მარტივად განისაზღვროს ის წესები, რომლებიც ადრე იყო ჩვენში დადგენილი CSS ცხრილებიძირითადი ბრაუზერებისთვის, იგივე საჭირო ადაპტირება მიიღწევა.

/* ტაბლეტი */ @media მხოლოდ ეკრანი და (მინ-სიგანე: 768 პიქსელი) და (მაქს-სიგანე: 959 პიქსელი) (. კონტეინერი (სიგანე: 768 პიქსელი; )) /*მობილური - შენიშვნა: დიზაინი 320px სიგანეზე*/@media მხოლოდ ეკრანი და (მაქს. სიგანე: 767 პიქსელი) (.container (სიგანე: 95%;) #portfoliolist.portfolio (სიგანე: 48%; ზღვარი: 1%;)) /* მობილური - შენიშვნა: დიზაინი 480px სიგანეზე */@media მხოლოდ ეკრანი და (მინ. სიგანე: 480 პიქსელი) და (მაქს. სიგანე: 767 პიქსელი) (. კონტეინერი (სიგანე: 70%;))

/* ტაბლეტი */ @media მხოლოდ ეკრანი და (მინ-სიგანე: 768 პიქსელი) და (მაქს-სიგანე: 959 პიქსელი) ( .კონტეინერი ( სიგანე: 768 პიქს; ) ) /* მობილური - შენიშვნა: დიზაინი 320 პიქს სიგანეზე*/ მხოლოდ @media ეკრანი და (მაქსიმალური სიგანე: 767 პიქსელი) ( .container ( სიგანე: 95%; ) #portfoliolist .portfolio ( სიგანე:48%; ზღვარი:1%; ) ) /* მობილური - შენიშვნა: დიზაინი 480px სიგანეზე */ @media მხოლოდ ეკრანი და (მინ. სიგანე: 480 პიქსელი) და (მაქს. სიგანე: 767 პიქსელი) ( .კონტეინერი (სიგანე: 70%; ) )

Სულ ეს არის. ჩვენი სასწაულმოქმედი გვერდი სახელწოდებით "პორტფოლიო" მზად არის, მზად არის შეგვახსენოს თავისი არანაკლებ სასწაულებრივი და მნიშვნელოვანი რობოტები და გამოვაქვეყნოთ მთელი მსოფლიოსთვის სანახავად. თქვენ მაინც შეგიძლიათ მშვიდად, მოკრძალებულად დაწეროთ საკუთარ თავზე. ნუ გადააჭარბებთ ამ მხრივ.
კიდევ ერთხელ უყურეთ მაგალითს და, საჭიროების შემთხვევაში, წაიღეთ თქვენი სამუშაო, თუ ეს შესაძლებელია, მშვიდი სახლის გარემოში, შეგიძლიათ დაასრულოთ ეს სამუშაო.

გაკვეთილის შექმნის საათზე შეიქმნა ვიკორის მასალა: . ორიგინალი, დაუკავებელი, ფრთხილად ავტორის კალმიდან, პორტფოლიოს მხრიდან, იქ განთავსებული.

წარმატებები ყველას და წარმატებები სხეულს, გაატარეთ მოკლე ზაფხული!

სამხატვრო გალერეის შენობა

როგორ შეგიძლიათ მარტივად და ხელით შექმნათ სურათების გალერეა ჩვენი პროგრამირების ცოდნის გარეშე? უპირველეს ყოვლისა, შეიძლება ამას საკმაოდ ცოტა საათი დასჭირდეს, მაგრამ წინააღმდეგ შემთხვევაში, მისი დათვალიერებისას, არაფერზე ფიქრი არ არის საჭირო - ან კერუვანას ღილაკებზე ან სხვა რამეზე. გახსენით Notepad პროგრამა და სუფთა ფურცლიდანახლავე, ჩვენ ვისწავლით როგორ შევქმნათ პორტფელის ვებსაიტი და ხელოვნების გალერეა ხარჯების გარეშე.

- წარმოადგენს დასაწყისს და დასასრულს html კოდი

- ეს ტეგები წარმოადგენს სათაურს

- მიუთითებს სათაურის ტექსტის ჩვენება, შემდეგ. ბრაუზერში გამოჩნდება გვერდი ამ სათაურით. ასევე საძიებო სისტემაში.</p><p><body>- ამ ტეგის შუაში იქნება კოდი.</p><p>Გაგრძელებული:</p><p>სათაური შეყვანილია:</p><p>"ასეთი მხატვრის სურათების გალერეა (ან ასეთი ფოტოგრაფის პორტფოლიო)"</p><p><b><html> </b></p><p><b><head> </b></p><p><b><title>

შეკუმშოს ფოტოები ინტერნეტში გამოქვეყნებამდე. გადახდა შესაძლებელია Photoshop დახმარება. გახსენით ფოტო, აირჩიეთ ფაილი -> შენახვა როგორც -> JPEG ფაილის ტიპი, აირჩიეთ ფაილის საშუალო ზომა. Ან კიდევ მოკლე ფაილი-> შენახვა ვებსა და მოწყობილობებზე -> JPEG მაღალი.

ახლა ჩვენ გვაქვს ფოტო. თქვენ უნდა დაწეროთ ინფორმაცია თქვენს შესახებ - რა სახის სამუშაოში მუშაობთ, რა სახის მტკიცებულებებით, რა საქმეებში იღებთ მონაწილეობას, ცოტა ბიოგრაფია და ა.შ. შედეგად, გვინდა, რომ ასე გამოვიდეს: ბოროტება ჩვენი ფოტოა, მემარჯვენე ცოტა ჩვენზეა.

ამ მიზნით ჩავსვით ცხრილი, მარცხენა ცენტრში იქნება ფოტოსურათი, ხოლო მარჯვენა ცენტრში იქნება ტექსტი:

მხატვრის ვასილ პუპკინის ფერწერული გალერეა

- ნიშნავს ცხრილის დასაწყისს და დასასრულს

width="100%" - ცხრილის სიგანე, რომელიც შეავსებს ეკრანის მთელ სიგანეს

border="1" - ცხრილის საზღვრის სიგანე

- მწკრივის შექმნა

- სვეტის შექმნა, ამ შემთხვევაში ორი სვეტი იქმნება ერთ რიგში.

ახლა დავდოთ ფოტო მაგიდის მარცხენა მხარეს. ამის შესანახად ჩვენ ვქმნით ფაილს თქვენს საქაღალდეში ამ პროცედურის გამოყენებით: file -> save as -> შეიყვანეთ სახელი “index.html” - ჩვენი ფაილი შენახულია ვებსაიტის სახით. სახელის ინდექსი განპირობებულია იმით, რომ ბრაუზერში რომელიმე საიტის სახელს აკრეფთ, ის ჯერ ეძებს ფაილს index.html, შემდეგ index.htm, index.php და ა.შ. იმავე საქაღალდეში, სადაც ეს ფაილი შევინახეთ, ჩვენ შევქმნით საქაღალდეს "images", რომელშიც შევინახავთ ყველა ჩვენს სურათს. ჩვენ გადავიტანთ ჩვენს ფოტოს "foto.jpg" ამ საქაღალდეში ("სურათები").

სურათი ნაჩვენებია ბრაუზერის ეკრანზე.

მხატვრის ვასილ პუპკინის ფერწერული გალერეა

ნიშნავს გამოსახულების ჩვენებას

src="/images/foto.jpg" - გზა ფოტოგრაფიისაკენ

ახლა თქვენ უნდა შეიყვანოთ ტექსტი ცხრილის მარჯვენა მხარეს.

მხატვრის ვასილ პუპკინის ფერწერული გალერეა

მხატვარი ვასილ პუპკინი

არ დაგავიწყდეთ საკუთარი თავის გადარჩენა. პროგრამის ერთ-ერთი წესი: „ხშირად დაზოგე“. ახლა ჩვენ გვაქვს გვერდი მოკლე ინფორმაციაავტორის შესახებ. ამ მხარეს ვამატებთ სურათების გალერეას. იმის გამო, რომ მეტა სტატიები გასწავლით როგორ შექმნათ ვებსაიტები ჩვენი პროგრამირების ცოდნის გარეშე - გამოვა მაპატიე HTMLმარტივი გალერეის განსახორციელებლად. აქ არის მარტივი მეთოდი, რომელიც მოგვიანებით იქნება ახსნილი, შეგიძლიათ ფულის გამომუშავება გარნა გალერეათქვენი პორტფოლიოსთვის.

მხატვრის ვასილ პუპკინის ფერწერული გალერეა

მხატვარი ვასილ პუპკინი

ჩემი ბიოგრაფია... - აქ ვწერთ ტექსტს საკუთარ თავზე...



რიგი 1
რიგი 2
რიგი 3

მონიშნეთ
ნიშნავს ახალ რიგზე გადასვლას. ანუ, პოსტის ტეგის ტექსტი გამოჩნდება ახალ სტრიქონზე

უჯრედების დაშორების ძალა ნიშნავს სივრცეს მაგიდის ცენტრებს შორის. ჩვენ გვჭირდება ეს, რათა სურათებმა და ტექსტმა ხალხი არ გააბრაზოს.

ტექსტის "მწკრივი 1"-ის ნაცვლად, თქვენ უნდა ჩაწეროთ ჩვენი პირველი ფოტო. ეჭვი მაქვს, რომ ჩვენ უკვე მოვამზადეთ ისინი და მოვათავსეთ root საქაღალდის images საქაღალდეში, სადაც ჩვენი საიტი მდებარეობს. კერძოდ її pic_1.jpg

ფაილების სახელებში ხარვეზების დამატება შეუძლებელია, ამიტომ შეგვიძლია გამოვიყენოთ ნიშანი „_“ სავარძლის ბოლოში, ან „-“ მინუს.

შეცვალეთ ტექსტი "სტრიქონი 1"-ით

ამ ენაში alt ნიშნავს ალტერნატიულ ტექსტს, რომელიც ნაჩვენებია სურათის ნაცვლად, თუ საიტის წარმდგენი ბრაუზერს აქვს სურათი ჩართული.

სათაურის ტეგი მიუთითებს იმაზე, რომ ინსტრუმენტების რჩევები გამოჩნდება, როდესაც დათვი დევს სურათზე.

თქვენ ასევე შეგიძლიათ შეიყვანოთ სურათის სახელი სურათების ქვემოთ. რისთვისაც გამოსახულების ჩვენების შემდეგ ვაყენებთ
ახალ რიგზე გადასასვლელად დაწერეთ ტექსტი „ბუნების ფოტო“.

ნება მომეცით აგიხსნათ, ჩვენ გავაკეთეთ ეს ყველაფერი: საძიებო სისტემები ფოტოების საძიებლად vikorista tags სურათის აღწერისთვის. და თუ ფოტოს გვერდით არის ტექსტი, რომელიც ვარაუდობს ფოტოს აღწერას, პოშუკოვას სისტემაამოიცნობს ამ პატარას შესაბამისი შეკითხვით, რომელიც მოიცავს ფოტოს აღწერას, რაც დაგეხმარებათ საიტის მოწინავე ტიპის საძიებო სისტემებში მოთავსებაში. გარდა ამისა, შეგიძლიათ ბევრი დრო გაატაროთ სურათების ძიებაში დამატებითი ტრაფიკის მისაღებად.

Tsikava porada: ვიკორისტი მინიმუმ სამი სურათი სათაურებით საიტის გვერდებზე. სურათები აუცილებლად უნდა შეესაბამებოდეს ტექსტის თემას. მიმდინარე ხმის სისტემები გონივრულია. თუ თქვენ ეძებთ სურათს, შეტყობინება გამოჩნდება თქვენს საიტზე, ასე რომ, ადამიანებმა შეიძლება დააწკაპუნონ მასზე და წავიდნენ თქვენთან. თქვენ ყოველთვის შეგიძლიათ გაყიდოთ საქონელი ონლაინ მაღაზიებში. ფოტოს კარგი დეტალური აღწერა, რომელიც შედგება გასაღებისგან ხმის ნაკბენები, რაზეც ადამიანები პასუხისმგებელნი არიან თქვენს პროდუქტზე - მაგალითად, "იისფერი მაცივარი" ან "ბარდათ გადახდა", ან "მხიარული თაიგულები".

მნიშვნელოვანია: გამოიყენეთ თქვენი ფოტოები და დააკოპირეთ გონივრულად თქვენი ვებსაიტის პოპულარიზაციისთვის. დაამატეთ „წყლიანი ნიშანი“ თქვენს ფოტოებს კონტრასტული ტექსტის განთავსებით ფოტოს სხეულზე, ან გამოიყენეთ სხვა დაცვა. ეს არის იმისთვის, რომ მიენიჭოს სურათების საავტორო უფლებები და ასევე გაზარდოს საიტის ექსპოზიცია, რადგან ხალხი დღეს გაუგზავნის შეტყობინებებს ფოტოს ავტორს.

დავუბრუნდეთ ტექსტის რედაქტირებას. HTML კოდი უსაფრთხო და შემოწმებადია, რადგან ყველაფერი ნაჩვენებია ბრაუზერში.

ახლა მნიშვნელოვანია, რომ ჩვენი პირველი ფოტოს სურათი გამოჩნდა.

height=" " - სიმაღლე პიქსელებში

width=" " - სიგანე პიქსელებში.

წარმოვიდგინოთ ჩვენი ზურგის სიგანე, ისეთი მომზადებული, როგორიც არის. მოდით, ჩვენი გამოსახულება იყოს 300 სიგანე და 200 სიმაღლე.

ჩვენ აშკარად ვამბობთ:

მხატვრის ვასილ პუპკინის ფერწერული გალერეა

მხატვარი ვასილ პუპკინი

ჩემი ბიოგრაფია... - აქ ვწერთ ტექსტს საკუთარ თავზე...




ბუნების ფოტო

რიგი 2
რიგი 3

თქვენ ნახავთ, როგორ იცვლება ფოტო მისი ზომების შეცვლით, მაგალითად, 300-ის სიგანე იცვლება 500-მდე. ფოტო გაფართოვდება სიგანეში. აქ არის სწრაფი რჩევა - შეცვალეთ ფოტოების მასშტაბი და ჩვენ შეგვიძლია გამოვაჩინოთ დიდი სურათები უფრო მცირე ზომისბრაუზერის ფანჯარაში.

თუ თქვენ გჭირდებათ ერთი ფერის ან გრადიენტის ფართობის შექმნა, შეგიძლიათ გაჭიმოთ პატარები, მაგალითად, 1 პიქსელის სიგანით და 20 სიმაღლით, საჭირო მნიშვნელობამდე Width ატრიბუტის გამოყენებით. ეს შეიძლება დაიხუროს გვერდის სწრაფად გაფორმებისთვის, არ არის საჭირო დამატებითი პატარა ნაწილის ჩასმა.

ახლა ჩვენ დავამატებთ სხვა ფოტოებს ანალოგიურად ჩვენს კოდში.

წაგვიყვანეს უბრალოდ გალერეასურათი ახლა დავამატებ ჩემს კონტაქტებს, რათა მათ, ვინც საიტს აგზავნის, დაგვიკავშირდნენ. იჩქარეთ ელექტრონული ოფლი. ელ. ფოსტაში თქვენი შეტყობინების ჩასართავად, ჩაწერეთ შემდეგი კოდი: ელფოსტის ეს მისამართი მოიპარეს სპამბოტებმა, თქვენ უნდა ჩართოთ JavaScript მის სანახავად.

ვისი ვირაზი ნიშნავს შეტყობინების ტეგი ნაჩვენები, შემდეგ href="/" - შეტყობინების მისამართი, title="" ტეგი ნიშნავს ტექსტს, რომელიც ჩნდება შეტყობინების გადატანისას.

დარწმუნდით, რომ მიუთითეთ კანის შეტყობინების სათაური, რათა გვერდებმა, რომლებზეც შეტყობინებაა გამიზნული, მოიპოვონ მეტი ნდობა ხმის სისტემებისგან, რათა გვერდის ნაცვლად გადახვიდეთ შეტყობინების აღწერაზე, ხმის სისტემის მნიშვნელობები. მეტი გვერდები მათ მიერ ასეთი შეტყობინებებით. დოდამო ჩვენი საკონტაქტო ნომერია. შედეგი არის შემდეგი კოდი:

მხატვრის ვასილ პუპკინის ფერწერული გალერეა

მხატვარი ვასილ პუპკინი

ჩემი ბიოგრაფია... - აქ ვწერთ ტექსტს საკუთარ თავზე...




ბუნების ფოტო

რიგი 2
რიგი 3

ელფოსტის ეს მისამართი მოიპარეს სპამბოტებმა, მის სანახავად უნდა ჩართოთ JavaScript


ზარი: 77-888-999

ვზოგავთ, ვამოწმებთ. ჩვენ გვაქვს უმარტივესი ცალმხრივი პორტფოლიოს საიტი ჩვენი რობოტებით. იმისათვის, რომ ხალხმა დაინახოს იგი, ჩვენ უნდა ჩავიცვათ იგი

  • გრაფიკული დიზაინერის პორტფოლიო

    ფასი: ფასის გარეშე

    კარგია

    დიზაინერები, ფოტოგრაფები, პორტფელის ვებსაიტები, კრეატიული პროფესიონალები.

    აღწერა

    წიკავია ელეგანტური შაბლონიპორტფელის ვებსაიტისთვის. აჩვენეთ ყველა თქვენი პროექტი მარტივი, მაგრამ დროული გზით, რათა დაეხმაროთ თქვენს მასწავლებლებს ფოკუსირება მოახდინონ თქვენს შემოქმედებაზე. შემოქმედების შაბლონი პატივს სცემს გამოყენებადობის პრინციპებს და მიჰყვება ვებ დიზაინის ტენდენციებს, ასე რომ თქვენ არ გჭირდებათ უბრალოდ გადაიღოთ ფოტოები, შექმნათ გვერდი პარტნიორებთან დასაკავშირებლად და დაიწყოთ ბლოგინგი თქვენს ინტერნეტში შესასვლელად.

    ფასი: ფასის გარეშე
  • UX/UI დიზაინერის რეზიუმე

    UX/UI დიზაინერის რეზიუმე

    ფასი: ფასის გარეშე

    კარგია

    UX დიზაინერი, UI დიზაინერი, ვებ დიზაინერი.

    აღწერა

    პორტფოლიოს ვებსაიტის შაბლონი პროფესიონალური კრეატიულებისთვის. დარწმუნდით, რომ თქვენი დუნდულები მუშაობენ მაღალ დონეზე, აჩვენეთ რა გაქვთ მხედველობაში და დაეხმარეთ გადაზიდვის აგენტებს დაგიკავშირდეთ დამატებითი საკონტაქტო ფორმის გამოყენებით. შაბლონს აქვს შესანიშნავი ანიმაცია, ხელით დახატული ინფორმაციის მქონე ბლოკები, პროფესიონალური გალერეა, სადაც შეგიძლიათ დაამატოთ ფოტოები, ვიდეო ფაილები და დაამატოთ ტექსტური პლაკატები. ნებისმიერი ელემენტი რეაგირებს დათვის ზეწოლაზე.

    ფასი: ფასის გარეშე
  • ინტერიერის დიზაინერის პორტფოლიო

    ფასი: ფასის გარეშე

    კარგია

    ინტერიერის დიზაინერები, არქიტექტორები, პორტფელის ვებსაიტები, კრეატიული პროფესიონალები.

    აღწერა

    ამ უძვირფასო პორტფელის ვებსაიტის შაბლონის სუფთა და მარტივი დიზაინი შესანიშნავია თქვენი დიზაინის სამუშაოს წარმოსაჩენად. გადაიღეთ პროექტების ფოტოები, დაამატეთ საკონტაქტო ინფორმაცია, შეცვალეთ ყველა ელემენტი თქვენი გემოვნებით და გამოაქვეყნეთ საიტი ერთი დაწკაპუნებით.

    ფასი: ფასის გარეშე
  • არქიტექტორის პორტფოლიო

    არქიტექტორის პორტფოლიო

    ფასი: ფასის გარეშე

    კარგია

    არქიტექტორების, დიზაინერების და სხვა პროფესიონალების პორტფელი.

    აღწერა

    გამოიყენეთ ეს მინიმალური, უფასო ვებსაიტის შაბლონი თანამედროვე ონლაინ პორტფოლიოს შესაქმნელად. გაგზავნეთ ყველა თქვენი პროექტი მთავარი გვერდიმეორე გალერეა „სიტკას“ უკან. დაამატეთ კანის სურათს ფოტო გალერეაში შიდა მხარეთქვენი საიტი. ნებისმიერი სურათის დაჭერით, შეგიძლიათ განათავსოთ იგი კონკრეტული პროექტის მარჯვენა მხარეს. დამალეთ ბევრი გვერდი მთავარი მენიუდან, რათა ნავიგაცია შეძლოთ საიტზე მარტივად და ხელით. დაამატეთ ინფორმაცია თქვენს შესახებ, რეზიუმე და არ დაგავიწყდეთ საკონტაქტო ფორმის მორგება ისე, რომ ადვილი იყოს თქვენთან დაკავშირება.

    ფასი: ფასის გარეშე
  • ვებ დიზაინერების პორტფოლიო

    ვებ დიზაინერების პორტფოლიო

    ფასი: ფასის გარეშე

    კარგია

    გრაფიკული დიზაინერები, ვებ დიზაინერები, ფოტოგრაფები, კრეატიული პროფესიონალები და პორტფელის ვებსაიტები.

    აღწერა

    შესანიშნავი შაბლონი დიზაინერის პორტფოლიოს ვებსაიტისთვის – ის დაგეხმარებათ გამოხატოთ თქვენი კრეატიულობა და ინდივიდუალობა და ეფექტურად წარმოადგინოთ ყველა თქვენი პროექტი ონლაინ. უბრალოდ დაამატეთ თქვენი ფოტოები და ტექსტის აღწერილობები, დაარედაქტირეთ ნებისმიერი ელემენტი, როგორც გჭირდებათ და გამოაქვეყნეთ საიტი ერთი დაწკაპუნებით. არ დაგავიწყდეთ დააკავშიროთ თქვენი ანგარიშის ანგარიშები სოციალურ ქსელებში და დააყენოთ საკონტაქტო ფორმა კლიენტებთან დასაკავშირებლად.

    ფასი: ფასის გარეშე
  • გრაფიკული და ვებ დიზაინერი

    გრაფიკული და ვებ დიზაინერი

    ფასი: ფასის გარეშე

    კარგია

    ვებ დიზაინერი, გრაფიკული დიზაინერი.

    აღწერა

    თუ თქვენ გჭირდებათ უნიკალური რეზიუმეს შექმნა, გამოიყენეთ ეს შაბლონი საიტზე. იგი შედგება ორი გვერდისგან: ბიოგრაფიები და პორტფოლიო გალერეები, სადაც სურათები უფრო დაწკაპუნებულია და უფრო დიდ გვერდზე გადადის. დეტალური ინფორმაცია. დაიწყეთ ვიზუალური ინფორმაციის რედაქტირება და ჩანაცვლება შაბლონით ფიზიკურ მონაცემებსა და სურათზე. შეგიძლიათ დაამატოთ ფოტოები მაღალი ენერგიითპორტფელის გალერეაში თქვენი ნამუშევრის რაც შეიძლება ეფექტურად დემონსტრირებისთვის. არის თუ არა შაბლონის დეტალების რედაქტირება თქვენი საჭიროებისთვის.

    ფასი: ფასის გარეშე
  • 3D დიზაინერის პორტფოლიო

    3D დიზაინერის პორტფოლიო

    ფასი: ფასის გარეშე

    კარგია

    სამხატვრო ხელმძღვანელი, მოძრაობის დიზაინერი.

    აღწერა

    შაბლონი არასტანდარტული პორტფელის ვებსაიტის შესაქმნელად. ნებისმიერი ელემენტი ჯდება თქვენს ცხოვრების წესში. მთავარი მენიუ და პროექტების გალერეა მთავარ გვერდზე დაგეხმარებათ სწრაფად მოიპოვოთ პატივისცემა და აჩვენოთ თქვენი სამუშაო. კანის პროექტი გამოჩნდება შემდეგ გვერდზე ფოტოებით, ვიდეოებით და დეტალური ინფორმაციით. არამშობლიური მენიუ გაფართოვდება სრულ ეკრანზე და შეიცავს სამ განყოფილებას: პროექტებს, კონტაქტებს და ბიოგრაფიას. დაიწყეთ რედაქტირება და დაამატეთ რაც შეიძლება მეტი განყოფილება და გვერდი ისე, რომ ეს ნათლად იყოს ხილული თქვენი კლიენტებისთვის.

    ფასი: ფასის გარეშე
  • ილუსტრატორი

    ილუსტრატორი

    ფასი: ფასის გარეშე

    კარგია

    ილუსტრატორები, მხატვრები, დიზაინერები.

    აღწერა

    თქვენს მიერ შექმნილ ილუსტრაციებში ასახულია თქვენი ხასიათი და პიროვნება. ეს ასევე გაააქტიურებს თქვენს საიტს. სუფთა და მარტივი, ეს შაბლონი იდეალურია თქვენი აუდიტორიის ყურადღების გადასატანად თქვენს რობოტებზე და დაეხმაროს Wix Art Store-ს გაყიდვაში. ციფრული ფაილებიონლაინ.

    ფასი: ფასის გარეშე
  • ილუსტრატორის პორტფოლიო

    ილუსტრატორის პორტფოლიო

    ფასი: ფასის გარეშე

    კარგია

    ილუსტრატორები, მხატვრები, დიზაინერები, ფოტოგრაფები, პორტფელის ვებსაიტები, კრეატიული პროფესიონალები.

    აღწერა

    ამ პორტფელის ვებსაიტის შაბლონის მოკლე დიზაინი საშუალებას აძლევს თქვენს რობოტებს ისაუბრონ საკუთარ თავზე. ჩვენ არ მივცემთ უფლებას თქვენს მეგზურებს თავი დააღწიონ ყველაზე მნიშვნელოვანს - სურათების გალერეას. უბრალოდ გადაიღეთ ფოტოები, შეცვალეთ თქვენი კონტაქტების გვერდი და დაამატეთ ინფორმაცია თქვენს შესახებ. თქვენი ელეგანტური თანამედროვე ვებგვერდი მზად იქნება ორ წამში!

    ფასი: ფასის გარეშე
  • ჟიტლოვას არქიტექტურა