Მინიშნებები შექმნათ Image Map ერთად Dreamweaver

სარგებელი და ნაკლოვანებები გამოსახულების რუკების გამოყენებით

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

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

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

გვინდა ვიცოდეთ, როგორ შევქმნათ სურათი რუკა, კონკრეტულად როგორ გავაკეთოთ ასე Dreamweaver? . პროცესი არ არის განსაკუთრებით რთული, მაგრამ ეს არ არის ადვილი, ასე რომ თქვენ უნდა ჰქონდეს გარკვეული გამოცდილება, სანამ დაიწყება.

ვიწყებთ

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

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

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

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

სურათების რუკების ნაკლოვანებები

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

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

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

ქვედა ხაზი

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

ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 9/7/17.