გამოიყენეთ შრიფტები, საზღვრები და სურათები, რათა დაამატეთ სათაურები
სათაურები ხშირია ვებ გვერდებზე. სინამდვილეში, საკმაოდ ბევრი ტექსტური დოკუმენტი ცდილობს მინიმუმ ერთი სათაურები ისე, რომ თქვენ იცით ტიტულის რას კითხულობთ. ეს სათაურები კოდირებულია HTML- ის ელემენტების გამოყენებით - h1, h2, h3, h4, h5 და h6.
ზოგიერთ საიტებზე შეიძლება აღმოჩნდეთ, რომ ამ ელემენტების გამოყენების გარეშე გამოყენებულია სათაურები. ნაცვლად ამისა, სათაურები შეიძლება გამოიყენონ პუნქტები მათთვის დაემატა კონკრეტული კლასის ატრიბუტებით ან კლასების ელემენტებთან ერთად. მიზეზი ხშირად მესმის ამ არასწორი პრაქტიკა, რომ დიზაინერი "არ მოსწონს გზა სასაქონლო სახე". თავდაპირველად, სათაურები გამოჩნდება თამამი და ისინი უფრო დიდი ზომის, განსაკუთრებით h1 და h2 ელემენტები, რომლებიც არიან ბევრად უფრო დიდი შრიფტის ზომა, ვიდრე დანარჩენი გვერდი ტექსტი. გაითვალისწინეთ ეს მხოლოდ ამ ელემენტების ნაგულისხმები სახეა! CSS- ის მეშვეობით თქვენ შეგიძლიათ სასაუბროდ გამოიყურებოდეს, თუმცა გსურთ! თქვენ შეგიძლიათ შეცვალოთ შრიფტის ზომა, წაშალოთ თამამი და ა.შ. სასაქონლო პოზიციებია სწორი გვერდის სათაურების კოდის შესადგენად. აქ არის რამოდენიმე მიზეზი.
რატომ გამოიყენეთ სასაქონლო ნიშნები იმის მაგივრად, თუ არა DIV- ები და სტილები
საძიებო სისტემების მსგავსად საძიებო ტეგები
ეს არის საუკეთესო მიზეზი, რომ გამოიყენოთ სასაქონლო პოზიციები და გამოიყენოთ ისინი სწორი ბრძანებით (მაგ. H1, შემდეგ H2, შემდეგ H3 და ა.შ.). საძიებო სისტემებს უდიდეს წონაში შეაქვთ ტექსტის შეყვანა შიგთავსით, რადგან ეს ტექსტი სემანტიკური მნიშვნელობისაა. სხვა სიტყვებით რომ ვთქვათ, თქვენს გვერდზე სათაურით H1, თქვენ გეტყვით საძიებო ველს, რომ ეს გვერდი არის # 1 აქცენტი გვერდზე. H2 სათაურები აქვს # 2 აქცენტს და ასე შემდეგ.
თქვენ არ გახსოვდეთ, თუ რა კლასები იყენებთ თქვენს სათაურებს
როდესაც იცით, რომ ყველა თქვენს ვებ გვერდს აქვს H1, რომელიც გაბედული, 2 სმ და ყვითელია, მაშინ შეგიძლიათ განსაზღვროთ ის, რომ ერთხელ თქვენს სტილის და გაკეთდეს. 6 თვის შემდეგ, როდესაც თქვენ დაამატებთ კიდევ ერთ გვერდს, უბრალოდ დაამატეთ H1 tag თქვენს გვერდზე, თქვენ არ უნდა დაბრუნდეთ სხვა გვერდებზე იმის გასარკვევად, თუ რა სტილის პირადობის ან კლასს იყენებთ, სათაურით და ქვეთავები.
ისინი უზრუნველყოფენ ძლიერ გვერდს
ნათქვამია ტექსტის წაკითხვა უფრო ადვილია. ამიტომ, აშშ-ს საუკეთესო სკოლები ასწავლიან სტუდენტებს, რათა დაწერონ ქაღალდი. როდესაც ხაზგასმულია თარგების შრიფტის ფორმატში, თქვენს ტექსტს აქვს მკაფიო სტრუქტურა, რომელიც ძალიან სწრაფად ხდება. გარდა ამისა, არსებობს ინსტრუმენტები, რომლებსაც შეუძლიათ განიხილონ გვერდი კონტური, რათა უზრუნველყონ სინოფსისი და ეს დაეყრდნოს ტერმინების სასაქონლო პოზიციებს.
შენი გვერდი გაეცნობა გრძელვადიანი სტილით
ყველას არ შეუძლია იხილოს ან გამოიყენოს სტილების ფურცელი (და ეს # 1-ში ჩნდება - საძიებო სისტემებს თქვენი გვერდის შინაარსი (ტექსტი) და არა სტილის ფურცლები). თუ თქვენ გამოიყენებთ სასაქონლო ნომრებს, თქვენ აკეთებთ თქვენს გვერდებს უფრო ხელმისაწვდომი, რადგან სათაურები შეიცავს ინფორმაციას, რომ DIV tag არ იქნება.
ეს არის გამოსადეგი ეკრანზე მკითხველი და საიტი ხელმისაწვდომობა
სათაურების სწორი გამოყენება ქმნის ლოგიკურ სტრუქტურას დოკუმენტში. ეს არის ის, რაც ეკრანის მკითხველს გამოიყენებს საიტის "წაიკითხოს" მომხმარებლის ხედვა გაუფასურება, რაც თქვენს საიტზე ხელმისაწვდომი შეზღუდული შესაძლებლობის მქონე პირებს.
სტილი შენი სათაურებისა და შრიფტის სტილი
უმარტივესი გზა გადაადგილება დაშორებით "დიდი, გაბედული და მახინჯი" პრობლემა სასაქონლო tags არის სტილი ტექსტი ისე, რომ გსურთ მათ თვალი. სინამდვილეში, როდესაც მე ვმუშაობ ახალ ვებ გვერდზე, მე, როგორც წესი, დაწერეთ პუნქტი, h1, h2 და h3 სტილის პირველი რამ. მე, როგორც წესი, გამყარებაში მხოლოდ შრიფტის ოჯახი და ზომა / წონა. მაგალითად, ეს შეიძლება იყოს წინასწარი სტილის ფურცელი ახალი საიტი (ეს მხოლოდ რამდენიმე მაგალითი სტილისა შეიძლება გამოყენებულ იქნეს):
სხეული, html {ზღვარი: 0; padding: 0; } p {font: 1em Arial, Geneva, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, ჟენევა, ჰელვეცი, sans-serif; }თქვენ შეგიძლიათ შეცვალოთ თქვენი სათაურის შრიფტები ან შეცვალოთ ტექსტი სტილი ან თუნდაც ტექსტის ფერი . ყოველივე ეს თქვენი "მახინჯი" სათაურისკენ გააქტიურდება რაღაც უფრო ხელსაყრელდ და თქვენს დიზაინთან ერთად.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; ზღვარი: 0; padding: 0; ფერი: # e7ce00; }საზღვრები შეგიძლიათ Dress Up Headlines
საზღვრები არის დიდი გზა, რათა გააუმჯობესოს თქვენი სათაურები. და საზღვრები ადვილად დაამატოთ. მაგრამ არ უნდა დაგვავიწყდეს ექსპერიმენტი საზღვრებთან - არ არის საჭირო სასაზღვრო თითოეულ მხარეზე. და თქვენ შეგიძლიათ გამოიყენოთ მხოლოდ უბრალო მოსაწყენი საზღვრები.
h1 {font: bold italic 2em / 1em "Times New Roman", "MS Serif", "New York", serif; ზღვარი: 0; padding: 0; ფერი: # e7ce00; სასაზღვრო: მყარი # e7ce00 საშუალო; სასაზღვრო ზომა: dotted # e7ce00 თხელი; სიგანე: 600px; }დავამატებ ზედა და ქვედა საზღვრებს ჩემი ნიმუშის სათაურით, რათა გაეცნოთ რამდენიმე საინტერესო ვიზუალური სტილის. თქვენ შეგიძლიათ დაამატოთ საზღვრები ისე, რომ გისურვებთ დიზაინის სტილის მიღწევაში.
სანიშნეს ფონის სურათები თქვენი სიახლეებისთვის კიდევ უფრო Pizazz
ბევრი ვებ გვერდს ჰედერი აქვს გვერდის ზედა ნაწილში, რომელიც მოიცავს სათაურს - როგორც წესი, საიტის სათაურსა და გრაფიკას. ყველაზე დიზაინერები ამას ორ ცალკეულ ელემენტად მიიჩნევენ, მაგრამ არ გექნებათ. თუ გრაფიკული არის მხოლოდ გაფორმების სათაურით, მაშინ რატომ არ დაამატოთ ეს სასაქონლო სტილის?
h1 {font: bold italic 3em / 1em "Times New Roman", "MS Serif", "New York", serif; background: #ff url ("fancyheadline.jpg") განმეორებითი x ქვედა; padding: 0.5em 0 90px 0; ტექსტის გასწორება: ცენტრი; ზღვარი: 0; საზღვრის ქვედა: მყარი # e7ce00 0.25; ფერი: # e7ce00; }ტრიუკი ამ სათაურით არის ის, რომ მე ვიცი ჩემი სურათი არის 90 პიქსელი სიმაღლე. მე დავამატე padding ბოლოში სათაურით 90px (padding: 0.5 0 90px 0p;). თქვენ შეგიძლიათ ითამაშოთ ზღვარზე, ხაზის სიმაღლეზე და პანკინგისთვის, რათა მიიღოთ სათაურის ტექსტის ჩვენება ზუსტად სადაც გსურთ.
ერთი რამ უნდა გვახსოვდეს, როდესაც სურათების გამოყენებისას არის ის, რომ თუ თქვენ გაქვთ საპასუხო საიტი (რომელიც უნდა შეგეძლოთ) ეკრანის ზომის და მოწყობილობების საფუძველზე განლაგებულ განლაგებასთან ერთად, სათაური ყოველთვის არ იქნება იგივე ზომა. თუ საჭიროა თქვენი სათაურის ზუსტი ზომა, ეს შეიძლება გამოიწვიოს პრობლემები. ეს არის ერთ ერთი მიზეზი, რის გამოც მე ზოგადად თავიდან ავიცილოთ ფონური სურათები სათაურით, როგორც მაგარი, როგორც მათ შეუძლიათ ხანდახან გამოიყურებოდეს.
სურათების ჩანაცვლება სათაურები
ეს არის კიდევ ერთი პოპულარული ტექნიკა ვებ დიზაინერებისთვის, რადგან ის საშუალებას გაძლევთ შექმნათ გრაფიკული სათაური და შეცვალოთ ტექსტის სათაური ამ გამოსახულებით. ეს არის ჭეშმარიტად ანტიკვარული პრაქტიკა ვებ დიზაინერების ჰქონდა ხელმისაწვდომობის ძალიან ცოტა შრიფტები და უნდოდა გამოიყენოთ მეტი ეგზოტიკური შრიფტები მათი მუშაობა. იზრდება ვებ შრიფტები მართლაც შეიცვალა, თუ როგორ დიზაინერები მიდგომა საიტები. სათაურები ახლა უკვე დადგენილია შრიფტებისა და სურათების მრავალფეროვნებაში, რომლებიც საჭიროა იმ შრიფტების ჩართვით, რომლებიც საჭიროა. როგორც ასეთი, თქვენ მხოლოდ იპოვით CSS სურათებს ჩანაცვლებას ძველი საიტებზე, რომლებიც ჯერ კიდევ არ განახლდებიან უფრო თანამედროვე პრაქტიკაში.
ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 9/6/17