ამდენი პროგრამირების, სტილის და მარკირების ენების შემუშავებით, ვებ დიზაინის სწავლა უფრო რთულდება, ვიდრე ოდესმე. საბედნიეროდ, არსებობს უამრავი ინსტრუმენტი, რომელიც დაგეხმარებათ დაიწყოთ მუშაობა. მოძებნეთ რამდენიმე ძირითადი რესურსი, როგორიცაა ონლაინ გაკვეთილები ან უახლესი წიგნი ვებ დიზაინზე. მას შემდეგ რაც მზად იქნებით დასაწყებად, დაიწყეთ HTML და CSS საფუძვლების დაუფლებით. შემდეგ თქვენ შეგიძლიათ დაიწყოთ უფრო მოწინავე ვებ დიზაინის ენების შესწავლა, როგორიცაა JavaScript!
ნაბიჯები
მეთოდი 1 დან 4: ვებ დიზაინის რესურსების მოძიება
ნაბიჯი 1. შეამოწმეთ ონლაინ ვებ დიზაინის კურსები და გაკვეთილები
ინტერნეტი სავსეა დეტალური ინფორმაცია ვებ დიზაინის შესახებ და მისი ბევრი თავისუფლად არის ხელმისაწვდომი. თქვენ შეგიძლიათ დაიწყოთ უდემის ან CodeCademy– ის უფასო ონლაინ კურსების გავლით, ან შეუერთდეთ კოდირების საზოგადოებას, როგორიცაა freeCodeCamp. თქვენ ასევე შეგიძლიათ იხილოთ ვებ დიზაინის ვიდეო გაკვეთილები YouTube– ზე.
- თუ ზუსტად იცით რას ეძებთ, სცადეთ მოძებნოთ კონკრეტული ტერმინები (მაგ., „კლასის ამომრჩევლები CSS სამეურვეოში“).
- თუ თქვენ ხართ დამწყები, რომელსაც არ აქვს ვებ დიზაინის გამოცდილება, დაიწყეთ HTML და CSS კოდირების საფუძვლების შესწავლით.
ნაბიჯი 2. დააკვირდით ადგილობრივ კოლეჯში ან უნივერსიტეტში გაკვეთილის ჩატარებას
თუ თქვენ დადიხართ კოლეჯში ან უნივერსიტეტში, შეამოწმეთ თქვენი სკოლის კომპიუტერული მეცნიერებების განყოფილება ან გაეცანით თქვენი კურსების კატალოგს, რომ გაარკვიოთ არის თუ არა ვებ დიზაინის კურსები. თუ თქვენ არ ხართ სკოლაში, შეამოწმეთ თუ არა რომელიმე ახლომდებარე კოლეჯი ან უნივერსიტეტი უწყვეტი განათლების კლასებს ვებ დიზაინში.
ზოგიერთი უნივერსიტეტი გთავაზობთ ვებ დიზაინის ონლაინ კლასებს, რომლებიც ღიაა ყველასთვის, ვისაც სურს ჩაირიცხოს. შეამოწმეთ ვებსაიტები, როგორიცაა Coursera.org, რომ იპოვოთ უფასო ან ხელმისაწვდომი ვებ დიზაინის კლასები, რომელსაც ასწავლიან უნივერსიტეტის ინსტრუქტორები
ნაბიჯი 3. მიიღეთ ვებ დიზაინის წიგნები წიგნის მაღაზიიდან ან ბიბლიოთეკიდან
ვებ – დიზაინის კარგი წიგნი შეიძლება იყოს ფასდაუდებელი მითითება, როდესაც თქვენ სწავლობთ და იყენებთ თქვენს ხელობას. მოძებნეთ უახლესი წიგნები ზოგადი ვებ დიზაინის ან სპეციფიკური კოდირების ფორმატებისა და ენების შესახებ, რომელთა სწავლაც გსურთ.
ვებ დიზაინის შესახებ ჟურნალებისა და ბლოგის სტატიების წაკითხვა ასევე კარგი საშუალებაა ახალი ტექნიკის შესასწავლად, შთაგონების მისაღებად და უახლესი ტენდენციების გასარკვევად
ნაბიჯი 4. ჩამოტვირთეთ ან იყიდეთ ვებ დიზაინის პროგრამული უზრუნველყოფა
ვებ დიზაინის კარგი პროგრამული უზრუნველყოფა დაგეხმარებათ შექმნათ ვებსაიტები უფრო ეფექტურად და ეფექტურად, ასევე შესანიშნავია დაგეხმაროთ გაეცნოთ კოდირების, სკრიპტირების და დიზაინის სხვა ძირითად ელემენტებს. თქვენ შეიძლება ისარგებლოთ ისეთი ინსტრუმენტების გამოყენებით, როგორიცაა:
- გრაფიკული დიზაინის პროგრამები, როგორიცაა Adobe Photoshop, GIMP ან Sketch.
- ვებსაიტის შექმნის ინსტრუმენტები, როგორიცაა WordPress, Chrome DevTools ან Adobe Dreamweaver.
- FTP პროგრამული უზრუნველყოფა თქვენი მზა ფაილების გადატანა თქვენს სერვერზე.
ნაბიჯი 5. იპოვეთ ვებსაიტის შაბლონები, რომ დაიწყოთ თამაში
შაბლონების გამოყენებაში არაფერია ცუდი, რადგან თქვენ სწავლობთ ვებ დიზაინის საფუძვლებს. მოძებნეთ თქვენთვის სასურველი ვებ – გვერდის შაბლონები და ყურადღებით დაათვალიერეთ კოდი, რათა მიიღოთ წარმოდგენა იმის შესახებ, თუ როგორ ააწყო დიზაინერმა გვერდი. თქვენ ასევე შეგიძლიათ ექსპერიმენტი გაუკეთოთ კოდის შეცვლას და შაბლონში საკუთარი ელემენტების დამატებას.
მოძებნეთ ვებსაიტის უფასო შაბლონები დასაწყებად, ან ექსპერიმენტი გაუკეთეთ შაბლონებს, რომლებიც მოყვება თქვენს ვებ დიზაინის პროგრამულ უზრუნველყოფას
მეთოდი 2 დან 4: დაეუფლეთ HTML
ნაბიჯი 1. გაეცანით ძირითად HTML ტეგებს
HTML არის მარკირების მარტივი ენა, რომელიც გამოიყენება ვებსაიტის ძირითადი ელემენტების ფორმატირებისთვის. თქვენ შეგიძლიათ დააფიქსიროთ თქვენი ვებგვერდის სხვადასხვა ელემენტები ტეგების გამოყენებით. ტეგები გამოჩნდება დახრილ ფრჩხილებში თითოეული ელემენტის წინ და შემდეგ და იძლევა მითითებებს, თუ როგორ იმუშავებს ეს ელემენტი გვერდზე. ტეგის დახურვის მიზნით, დააყენეთ a / წინა წარწერის წინ დახრილი ფრჩხილებში.
- მაგალითად, თუ გსურთ თქვენი ტექსტის ნაწილი იყოს თამამი თქვენ შემოხაზავთ ელემენტს ტეგით, ასე: ეს ტექსტი თამამია.
- რამდენიმე ჩვეულებრივი ტეგი მოიცავს (აბზაცს), (წამყვანს, რომელიც განსაზღვრავს დაკავშირებულ ტექსტს) და (შრიფტს, რომელიც დაეხმარება განსაზღვროს ტექსტის სხვადასხვა ატრიბუტი, როგორიცაა ზომა და ფერი).
- სხვა ტეგები განსაზღვრავს თავად HTML დოკუმენტის სხვადასხვა ნაწილს. მაგალითად, იგი გამოიყენება იმ გვერდის შესახებ ინფორმაციის შესანახად, რომელიც არ იქნება ხილული მაყურებლისთვის, როგორიცაა საკვანძო სიტყვები ან გვერდის აღწერა, რომელიც გამოჩნდება საძიებო სისტემის შედეგებში.
ნაბიჯი 2. ისწავლეთ ტეგის ატრიბუტების გამოყენება
ზოგიერთ ტეგს სჭირდება დამატებითი ინფორმაცია იმის დასადგენად, თუ როგორ უნდა ფუნქციონირებდეს ისინი. ეს დამატებითი ინფორმაცია ჩნდება გახსნის ტეგში და მას უწოდებენ "ატრიბუტს". ატრიბუტის სახელი ჩნდება ეტიკეტის სახელის შემდეგ დაუყოვნებლივ, გამოყოფილია ინტერვალით. ატრიბუტის მნიშვნელობა ატრიბუტის სახელს ერთვის = ნიშნით და გარშემორტყმულია ბრჭყალებით.
- მაგალითად, თუ თქვენ გინდოდათ თქვენი ტექსტის ზოგიერთი ნაწილი გაეწითლებინათ, ამის გაკეთება შეგიძლიათ ტეგისა და შესაბამისი შრიფტის ფერის ატრიბუტის გამოყენებით, მაგალითად: ეს ტექსტი წითელია.
- ბევრი ეფექტი, რომელიც ოდესღაც რეგულარულად ხდებოდა HTML ტეგის ატრიბუტებით, როგორიცაა შრიფტის სხვადასხვა ფერის დაყენება, ახლა ჩვეულებრივ ხდება CSS კოდირების ნაცვლად.
ნაბიჯი 3. ექსპერიმენტი ჩადგმული ელემენტებით
HTML ასევე გაძლევთ საშუალებას მოათავსოთ ელემენტები სხვა ელემენტებში, რათა შეიქმნას უფრო რთული ფორმატირება. მაგალითად, თუ თქვენ გინდოდათ აბზაცის განსაზღვრა და შემდგომ ზოგიერთი ტექსტის დახრილობა აბზაცში, შეგიძლიათ ასე მოიქცეთ:
მე მიყვარს კოდირება!
ნაბიჯი 4. გაეცანით ცარიელ ელემენტებს
HTML– ის ზოგიერთ ელემენტს არ სჭირდება ტეგების გახსნა და დახურვა. მაგალითად, თუ თქვენ ჩადებთ სურათს, თქვენ გჭირდებათ მხოლოდ ერთი „img“ტეგი, რომელიც შეიცავს ტეგის სახელს და სხვა აუცილებელ ატრიბუტებს (როგორიცაა გამოსახულების ფაილის სახელი და ნებისმიერი ალტერნატიული ტექსტი, რომლის დამატებაც გსურთ წვდომის მიზნით). Მაგალითად:
ნაბიჯი 5. გამოიკვლიეთ HTML დოკუმენტის ძირითადი განლაგება
იმისათვის, რომ თქვენი HTML დაფუძნებული ვებგვერდი სწორად იმუშაოს, თქვენ უნდა იცოდეთ როგორ დააფორმიროთ მთელი გვერდი. ეს გულისხმობს იმის განსაზღვრას, თუ სად იწყება და მთავრდება თქვენი html კოდი, ასევე ტეგების გამოყენება იმის დასადგენად, თუ რომელი კოდის ნაწილები იქნება ნაჩვენები და რომელია იქ ფარული ინფორმაციის ფარული ინფორმაციის უზრუნველსაყოფად. Მაგალითად:
- გამოიყენეთ ტეგი თქვენი გვერდის HTML დოკუმენტად განსაზღვრისათვის.
- შემდეგი, შეიყვანეთ თქვენი მთელი გვერდი ტეგებში, რათა განსაზღვროთ სად იწყება და მთავრდება თქვენი კოდი.
- მოათავსეთ ნებისმიერი ინფორმაცია, რომელიც არ გამოჩნდება მაყურებელზე, როგორიცაა გვერდის სათაური, საკვანძო სიტყვები და თქვენი გვერდის აღწერა, ტეგებში.
- განსაზღვრეთ თქვენი გვერდის ძირითადი ნაწილი (ანუ ნებისმიერი ტექსტი და სურათი, რომლის ნახვაც გსურთ, რომ ნახოთ მნახველმა) ტეგებით.
მეთოდი 3 დან 4: CSS– ის გაცნობა
ნაბიჯი 1. გამოიყენეთ CSS სტილი თქვენს HTML დოკუმენტებზე
CSS არის სტილის ფურცლის ენა, რომელიც საშუალებას გაძლევთ გამოიყენოთ სხვადასხვა სტილის და დიზაინის ელემენტები თქვენს ვებგვერდზე. მაგალითად, თუ გსურთ შერჩევით გამოიყენოთ კონკრეტული შრიფტი ან ტექსტის ფერი თქვენს გვერდზე არსებული ტექსტის ზოგიერთ ელემენტზე, ამის შესაქმნელად შეგიძლიათ შექმნათ CSS ფაილი. შემდეგ, შეგიძლიათ ჩაწეროთ CSS ფაილი თქვენს HTML დოკუმენტში, სადაც გსურთ.
-
მაგალითად, თუ გინდათ რომ CSS ფაილმა თქვენს HTML დოკუმენტში ყველა აბზაცის ელემენტი მწვანე გახადოს, შეგიძლიათ შექმნათ.css ფაილი, რომელიც შეიცავს ხაზებს:
- p {
- ფერი: მწვანე;
- }
- შემდეგ თქვენ შეინახავთ ფაილს ისეთი სახელით, როგორიცაა style.css.
- თქვენს HTML დოკუმენტზე სტილის ფურცლის გამოსაყენებლად, თქვენ უნდა ჩაწეროთ ის როგორც ცარიელი ბმულის ელემენტი ტეგებში. Მაგალითად:
ნაბიჯი 2. გაეცანით CSS წესების ნაკრების ელემენტებს
CSS კოდის ცალკეულ ნაწილს ეწოდება "წესების ნაკრები". წესების ნაკრები შეიცავს სხვადასხვა ელემენტებს, რომლებიც განსაზღვრავენ რისი გაკეთება გსურთ თქვენს კოდს. Ესენი მოიცავს:
- სელექტორი, რომელიც განსაზღვრავს HTML ელემენტს, რომლის სტილიც გსურთ. მაგალითად, თუ გსურთ, რომ თქვენი წესი დაყენებული იქონიოს პარაგრაფის ელემენტებზე, თქვენ დაიწყებთ თქვენს წესებს ასო "p" - ით.
- დეკლარაცია, რომელიც განსაზღვრავს თვისებებს, რომელთა სტილიც გსურთ (მაგალითად, შრიფტის ფერი). დეკლარაცია მოთავსებულია ხვეულ ფრჩხილებში {}.
- თვისება, რომელიც განსაზღვრავს HTML ელემენტის რომელ თვისებას გსურთ სტილირება. მაგალითად, თეტაგის ფარგლებში შეგიძლიათ მიუთითოთ, რომ გსურთ ტექსტის სტილის სტილი.
- თვისების მნიშვნელობა განსაზღვრავს კონკრეტულად როგორ გსურთ შეცვალოთ თვისება (მაგალითად, თუ თვისება არის შრიფტის ფერი, მაშინ თვისების მნიშვნელობა იქნება „მწვანე“).
- თქვენ შეგიძლიათ შეცვალოთ რამდენიმე განსხვავებული თვისება ერთი დეკლარაციის ფარგლებში.
ნაბიჯი 3. გამოიყენეთ ტექსტი CSS თქვენს ტექსტზე, რათა თქვენი დამწერლობა ლამაზად გამოიყურებოდეს
CSS სასარგებლოა თქვენს ტექსტზე სხვადასხვა სახის ეფექტების გამოყენებისათვის HTML– ში თითოეული თვისების ინდივიდუალურად კოდირების გარეშე. ექსპერიმენტი CSS– ში სხვადასხვა საბეჭდი თვისებების შეცვლით, მათ შორის:
- Შრიფტის ფერი
- Შრიფტის ზომა
- შრიფტების ოჯახი (მაგალითად, შრიფტების დიაპაზონი, რომლის გამოყენებაც გსურთ თქვენს ტექსტში)
- ტექსტის გასწორება
- Ხაზის სიმაღლე
- ასოთა ინტერვალი
ნაბიჯი 4. ექსპერიმენტი ჩაატარეთ ყუთებით და სხვა CSS განლაგების ინსტრუმენტებით
CSS ასევე სასარგებლოა თქვენს გვერდზე მიმზიდველი ვიზუალური ელემენტების დასამატებლად, როგორიცაა ტექსტური ყუთები და ცხრილები. გარდა ამისა, შეგიძლიათ გამოიყენოთ იგი თქვენი გვერდის საერთო განლაგების შესაცვლელად და განსაზღვროთ, თუ სად არის განლაგებული სხვადასხვა ელემენტები ერთმანეთთან შედარებით.
მაგალითად, თქვენ შეგიძლიათ განსაზღვროთ ატრიბუტები, როგორიცაა ელემენტის სიგანე და ფონის ფერი, დაამატოთ საზღვარი, ან დადოთ ზღვარი, რომელიც შექმნის სივრცეს თქვენს გვერდზე არსებულ სხვადასხვა ელემენტებს შორის
მეთოდი 4 დან 4: მუშაობა სხვა დიზაინის ენებზე
ნაბიჯი 1. ისწავლეთ JavaScript, თუ გსურთ დაამატოთ ინტერაქტიული ელემენტები თქვენს გვერდებზე
JavaScript არის დიდი ენა სასწავლად, თუ დაინტერესებული ხართ თქვენს ვებგვერდებზე უფრო მოწინავე ფუნქციების დამატებით, როგორიცაა ანიმაციები და ამომხტარი ფანჯრები. გაიარეთ კურსი ან მოძებნეთ ონლაინ გაკვეთილები JavaScript– ში კოდირების შესახებ და ჩართეთ ეს კოდირებული ელემენტები თქვენს ვებ - გვერდებში | HTML– ის გამოყენებით.
სანამ JavaScript– ით თავს კომფორტულად იგრძნობთ, თქვენ უნდა იცოდეთ HTML და CSS გვერდების შექმნის საფუძვლები
ნაბიჯი 2. გაეცანით jQuery- ს JavaScript კოდირების გასაადვილებლად
jQuery არის JavaScript ბიბლიოთეკა, რომელსაც შეუძლია გაამარტივოს Java პროგრამირება, რაც საშუალებას მოგცემთ მიიღოთ წვდომა სხვადასხვა კოდირებული JavaScript ელემენტებზე. jQuery არის შესანიშნავი ინსტრუმენტი, თუ თქვენ უკვე იცნობთ JavaScript კოდირების საფუძვლებს.
თქვენ შეგიძლიათ შეხვიდეთ jQuery ბიბლიოთეკაში და ბევრ სხვა მნიშვნელოვან რესურსზე jQuery.org– ის საშუალებით, jQuery Foundation– ის ვებ – გვერდის საშუალებით
ნაბიჯი 3. შეისწავლეთ სერვერის ენები, თუ დაინტერესებული ხართ back-end განვითარებით
მიუხედავად იმისა, რომ HTML, CSS და JavaScript იდეალურია ვებ დიზაინერებისთვის, რომლებიც ორიენტირებულნი არიან იმაზე, რასაც მომხმარებელი ხედავს და აკეთებს ვებგვერდზე, სერვერის ენები სასარგებლოა, თუ თქვენ უფრო დაინტერესებული ხართ კულისების მიღმა მუშაობით. თუ გსურთ გაიგოთ უკანა განვითარების შესახებ, ყურადღება გაამახვილეთ ისეთ ენებზე, როგორიცაა Python, PHP და Ruby on Rails.
ეს ენები სასარგებლოა იმ მონაცემების მართვისა და დამუშავებისათვის, რომელსაც მომხმარებელი ვერ ხედავს. მაგალითად, PHP შეიძლება გამოყენებულ იქნას პაროლების შექმნის უსაფრთხო ინსტრუმენტების შესაქმნელად ვებსაიტებზე, რომლებიც საჭიროებენ ავტორიზაციას
დახმარების ფაილები
HTML მოტყუების ფურცელი
CSS მოტყუების ფურცელი
