ვებსაიტები განსხვავდებიან ნებისმიერი საკომუნიკაციო საშუალებისგან, რომლებიც მოვიდნენ მათ წინაშე. ერთ-ერთი მთავარი თემა, რომელიც წინა გვერდების გარდა წინა გვერდების გარდა ბეჭდვით, რადიოსა და ტელევიზიასთან არის დაკავშირებული, არის " ჰიპერბმულის " კონცეფცია.
Hyperlinks, ასევე საყოველთაოდ უბრალოდ ცნობილია, როგორც "ბმულები", რა გააკეთოს ვებ იმდენად დინამიური. ბეჭდური პუბლიკაციისაგან განსხვავებით, რომელსაც შეუძლია სხვა სტატიის ან სხვა რესურსის მითითება, ვებ-გვერდებს შეუძლიათ გამოიყენონ ეს ბმულები, რათა სტუმრებმა სხვა გვერდებსა და რესურსებზე რეალურად გაგზავნა. ამას სხვა მაუწყებლობა არ შეუძლია. თქვენ შეგიძლიათ მოისმინოთ რეკლამა რადიოში ან ტელევიზორში, მაგრამ არ არსებობს ჰიპერბმულები, რომლებსაც შეუძლია თქვენს კომპანიებს იმ რეკლამებში გადაგიყვანოთ, რაც ვებ-გვერდს ადვილად შეუძლია. ბმულები მართლაც საოცარი კომუნიკაციები და ურთიერთქმედების ინსტრუმენტია!
ხშირ შემთხვევაში, ვებ-გვერდზე განთავსებული ბმულები ტექსტური შინაარსია, რომლებიც სტუმრებს იმავე საიტის სხვა გვერდებზე ხელმძღვანელობენ. ვებგვერდის ნავიგაცია არის ტექსტური ბმულების ერთი მაგალითი პრაქტიკაში, მაგრამ ბმულები არ უნდა იყოს ტექსტური დაფუძნებული. თქვენ ასევე შეგიძლიათ მარტივად დაურთოთ სურათები თქვენს ვებ-გვერდზე. მოდით შევხედოთ, თუ როგორ ხდება ეს, რასაც მოყვება რამდენიმე შემთხვევა, სადაც გსურთ სურათზე დაფუძნებული ჰიპერბმულების გამოყენება.
როგორ მივიღოთ გამოსახულება
პირველი, რაც თქვენ უნდა გავაკეთოთ, სურათის განთავსება თქვენი HTML დოკუმენტში. გამოსახულების დაფუძნებული რგოლის საერთო გამოყენება არის საიტების ლოგო გრაფიკი, რომელიც შემდეგ უკავშირდება საიტის გვერდს. ჩვენს მაგალითში ქვემოთ მოყვანილი კოდი, ფაილი ჩვენ ვიყენებთ SVG- ს ჩვენი ლოგოსთვის. ეს არის კარგი არჩევანი, რადგან ეს საშუალებას მისცემს ჩვენს სურათს მასშტაბები სხვადასხვა რეზოლუციების, ყველა ხოლო შენარჩუნების გამოსახულების ხარისხი და მცირე საერთო ფაილის ზომა.
აი, როგორ დაგიდგათ თქვენი სურათი HTML დოკუმენტში:
გარშემო გამოსახულება tag, თქვენ ახლა დაამატოთ წამყვანმა ბმული, გახსნის წამყვან ელემენტს ადრე სურათი და დახურვის წამყვანმა შემდეგ სურათი. ეს არის მსგავსი, თუ როგორ დაუკავშიროთ ტექსტი, მხოლოდ ნაცვლად შეფუთვა სიტყვა გსურთ იყოს ბმული წამყვანმა tags, თქვენ გადატანა იმიჯი. ქვემოთ მოყვანილ მაგალითში, ჩვენ დავუბრუნდებით საიტის გვერდს, რომელიც არის "index.html".
ამ HTML- ზე თქვენი გვერდის დასამატებლად, არ განათავსოთ ნებისმიერი ფართები წამყვანმა ტეგისა და გამოსახულებას შორის. თუ თქვენ, ზოგიერთი ბრაუზერები დაამატებთ პატარა ticks გარდა სურათი, რომელიც გამოიყურება უცნაური.
ლოგოს სურათი ახლავე იმოქმედებს, როგორც მთავარი ღილაკი, რომელიც საკმაოდ ბევრია ვებ-სტანდარტის ამ დღეებში. გაითვალისწინეთ, რომ ჩვენ არ მოიცავს რაიმე ვიზუალური სტილის, როგორიცაა სიგანე და სიმაღლე გამოსახულება, ჩვენს HTML მარკირებას. ჩვენ დავტოვებთ ამ ვიზუალური სტილის CSS და შევინარჩუნოთ სუფთა გამოყოფის HTML სტრუქტურა და CSS სტილის.
მას შემდეგ, რაც თქვენ მიიღებთ CSS, სტილის თქვენ წერენ მიზანში ამ ლოგო გრაფიკული შეიძლება შეიცავდეს sizing იმიჯი, მათ შორის საპასუხო სტილის მრავალ მოწყობილობა მეგობრული images ისევე როგორც ნებისმიერი ვიზუალური გსურთ დაამატოთ გამოსახულება / ბმული, ისევე როგორც საზღვრების ან CSS წვეთი ჩრდილები. თქვენ ასევე შეგიძლიათ თქვენი იმიჯი ან ბმული კლასის ატრიბუტი თუ საჭიროა დამატებითი "კაკვები" გამოიყენოს თქვენი CSS სტილის.
გამოიყენეთ შემთხვევები სურათზე ბმულები
ასე რომ, სურათის ლინკის დამატება საკმაოდ მარტივია. როგორც უკვე ვნახეთ, ყველა უნდა გააკეთოთ გადასაფხიზებელი გამოსახულება შესაბამისი წამყვანმა ტეგით. შენი შემდეგი შეკითხვა შეიძლება იყოს "როდის გაატარებ პრაქტიკაში ზემოთ მოყვანილი ლოგო / გვერდითი ლინკის მაგალითის გარდა?"
აქ არის გარკვეული აზრები:
- მინიატურების სურათები გალერეაში, რომ ბმული უფრო დიდი ვერსიები იმ images.
- სურათები, რომლებიც გამოიყენება მხოლოდ შინაარსის წარმოდგენისთვის, ისევე როგორც ელექტრონული კომერციის ვებსაიტის პროდუქტის ფოტოები.
- Teaser გამოსახულებები, რომლებიც სხვა შინაარსის ნაწილია, ბლოგის სტატიის ან პრესრელიტის მსგავსად, ადამიანებს შეამჩნევთ, რომ შინაარსი აძლევს საშუალებას, რომ მათთვის სამიზნე ტერიტორია დააგემოვნონ ან დააწკაპუნეთ სრული სტატიის წაკითხვაზე.
- ხატულა გამოსახულებები, რომლებიც გამოიყენება ღილაკებად, რომლებიც დაკავშირებულია კონკრეტულ ფუნქციურ ან გვერდში გვერდებთან.
- სოციალური მედია კავშირები, რომლებიც იყენებენ სხვადასხვა სოციალური მედიის საიტების ცნობადი ლოგოებს, რომლებიც მნიშვნელოვანია ამ საიტზე ან კომპანიისთვის.
- გამოსახულებები, რომლებიც გამოიყენება როგორც გარკვეული ფუნქციების ღილაკებზე, როგორიცაა ფორმის წარდგენა (საუკეთესო პრაქტიკის შენიშვნა - ვებ-გვერდის შესრულების პერსპექტივადან, ღილაკებით ეტიკეტებით მხოლოდ სუფთა არჩევანია, ვიდრე გამოსახულების ღილაკები).
შეხსენება როდესაც სურათები იყენებენ
სურათები შეიძლება მნიშვნელოვან როლს ითამაშონ ვებ-გვერდის წარმატებაში. ზემოთ მოყვანილი მაგალითებიდან სხვა შინაარსთან ერთად სურათების გამოყენება ყურადღებას ამახვილებს იმაზე, რომ ყურადღება მიაქციოთ მას და წაიკითხო ხალხი.
სურათების გამოყენებისას თქვენ უნდა დაიცვას თქვენი საჭიროებების სწორი გამოსახულების შერჩევა , ეს მოიცავს სწორი გამოსახულების საგანს, ფორმატს და დარწმუნებას, რომ თქვენს ვებსაიტზე გამოყენებული ნებისმიერი გამოსახულება სათანადოდ ოპტიმიზირებულია ვებ-გვერდისთვის . ეს შეიძლება ჩანდეს, როგორც ბევრი სამუშაო უბრალოდ დაამატოთ სურათები, მაგრამ payoff ღირს! სურათები ნამდვილად შეგიძლიათ დაამატოთ იმდენად, რამდენადაც საიტის წარმატება.
ნუ დააყოვნებთ თქვენს სურათზე სათანადო სურათების გამოყენებას და იმ სურათებს, რომლებიც საჭიროა თქვენს შინაარსთან ინტერაქციულად დაამატოთ, მაგრამ ისიც კარგად გამოიყურება ამ სურათის საუკეთესო პრაქტიკას და გამოიყენეთ ეს გრაფიკა / ბმულები სწორად და პასუხისმგებულად თქვენს ვებ დიზაინში.