HTML და CSS-ის შესავალი დიზაინერებისთვის

HTML და CSS-ის შესავალი დიზაინერებისთვის.

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

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

რა არის HTML?

 

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

• <დაწყების ტეგი> : ასევე ცნობილია როგორც გახსნის ტეგი.
•  : ასევე მოუწოდა დახურვის ტეგს და მოიცავს წინ ხაზს /

როდესაც თქვენ ათავსებთ შინაარსს ამ ორ ტეგს შორის, მთლიანობას ეწოდება ელემენტი :

• ეს არის აბზაცი

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

HTML 5, HTML-ის ამჟამინდელი ვერსია, შეიცავს დაახლოებით 100 ტეგს ატრიბუტებით, რომლებიც ცვლის მათ ფუნქციას ან გარეგნობას. ამ ტეგებიდან მხოლოდ 30-40 უნდა იცოდეთ, რომ დაიწყოთ HTML-ის გაგება და შექმნა. შეხედეთ მათ და შეამჩნიეთ, როგორ არის დაჯგუფებული ფუნქციების მიხედვით. ვნახოთ ეს მოქმედებაში.

სურათების მოჭრა Photoshop-ში.

HTML და CSS-ის შესავალი დიზაინერებისთვის

კოდირებამდე უნდა გადავწყვიტოთ ვებგვერდის რომელი განყოფილებები უნდა შეიცავდეს სურათებს და რომელი შეიძლება იყოს კოდირებული. ვისარგებლოთ ხელსაწყო Photoshop Slice (დამალულია ქვემენიუში მოსავლის ხელსაწყო ) და მონიშნეთ ის ადგილები, როგორიცაა ბურიტოს ფოტო და თაკო ჯოანი .

ახლა ჩვენ გვჭირდება ჩვენი სნიპეტების ექსპორტი - აირჩიეთ File > Save for Web (Alt + Shift + Ctrl + S). როდესაც არჩეულია კონკრეტული ფრაგმენტი, შეგიძლიათ დააყენოთ მისი ექსპორტის პარამეტრები ფანჯრის მარჯვენა მხარეს (JPG, PNG და ა.შ.). თუ ორჯერ დააწკაპუნებთ კონკრეტულ ფრაგმენტზე, ნახავთ ამომხტარ ფანჯარას. ფრაგმენტის პარამეტრები" - ეს საშუალებას გაძლევთ დაასახელოთ კონკრეტული ფრაგმენტული ფაილები.

ნაგულისხმევად, ყველა სურათი მოთავსებულია: /images/ ქვედირექტორიაში. თუ გსურთ მხოლოდ თქვენს მიერ შექმნილი ფრაგმენტების ექსპორტი, აირჩიეთ " ყველა მორგებული ფრაგმენტი" "შენახვის" ფანჯარაში. HTML და CSS-ის შესავალი დიზაინერებისთვის

ძირითადი HTML დოკუმენტის შექმნა

ჩვენ გვაქვს ჩვენი slicers, მოდით შევქმნათ ძირითადი HTML დოკუმენტი. HTML და CSS-ის შესავალი დიზაინერებისთვის

ხაზი 1 : აცხადებს, რომ HTML 5 დიალექტი არის დოკუმენტის ენა.

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

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

ხაზი 4 : ეს არის დოკუმენტის კოდირების დეკლარაცია − utf-8 - უსაფრთხო არჩევანი - შეგიძლიათ მეტი წაიკითხოთ HTML სიმბოლოების კოდირების შესახებ აქ .

ხაზი 5 : ნიმუშის გვერდი ეს არის გვერდის სათაური, რომელიც ჩანს ბრაუზერის სათაურის ზოლში.

6 : ხურავს ტეგს 3 ხაზიდან.

ხაზი 7 : სხეულის ეს ელემენტი შეიცავს გვერდის მთელ ხილულ შინაარსს.

ხაზი 8 : ხურავს ტეგს სტრიქონიდან 2. ეს ელემენტი აღნიშნავს დოკუმენტის დასასრულს. HTML და CSS-ის შესავალი დიზაინერებისთვის

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

ეს არის HTML-ში თარგმნილი განლაგება:

რამდენიმე შენიშვნა:

ხაზები 11 და 12 : ელემენტები არის ინტერნეტის არსი, რადგან ისინი გამოიყენება შესაქმნელად ჰიპერბმულები . ისინი დაკავშირებულია HREF ატრიბუტთან და უნდა დააკავშირონ სამიზნე URL .

18-20 სტრიქონები : ეს არის ტექსტის ფორმატირების რამდენიმე ტეგი: აღნიშნავს პირველი დონის სათაურს; აღნიშნავს აბზაცს; ნიშნავს ხაზის გაწყვეტას.

ფორმატირება კასკადური სტილის ცხრილებით (CSS).

HTML და CSS-ის შესავალი დიზაინერებისთვის

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

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

მოდით განვმარტოთ მარტივი CSS წესი : .

შემქმნელი : ეს არის HTML ელემენტი, რომლის სტილიც გსურთ. მაგალითად: <სტატია>

განცხადება : CSS წესს შეიძლება ჰქონდეს ერთი ან მეტი დეკლარაცია. თითოეული დეკლარაცია შედგება თვისებისა და მნიშვნელობისგან და გამოყოფილია მძიმით. თქვენ განათავსებთ დეკლარაციებს ხვეული ბრეკეტებში {}. HTML და CSS-ის შესავალი დიზაინერებისთვის

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

ღირებულება : თითოეულ თვისებას აქვს მასთან დაკავშირებული მნიშვნელობა. მაგალითად: #ffcc11 (ფონის ფერისთვის), 16 პიქსელი (შრიფტის ზომისთვის) და ა.შ.

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

მოდით შევხედოთ რამდენიმე CSS წესს, რომელიც საჭიროა ჩვენი მარტივი დიზაინის ფორმატირებისთვის.

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

CSS Box მოდელი : ამ მოდელის არის ჩარჩო, რომელიც მოიცავს ყველა HTML ელემენტს, მათ შორის მინდვრებს, საზღვრებს, ბალიშებს და შინაარსს. ზღვარი არის უხილავი ტერიტორია საზღვრის ირგვლივ და ბალიშები საზღვარსა და შინაარსს შორის.

თუ ნამდვილად გსურთ გაიგოთ მეტი კოდირების შესახებ, მიიღოს peek ამ მაგარ საიტზე: Codecademy .

იცით HTML და CSS? გაგვიზიარეთ თქვენი რჩევები კომენტარებში!