თქვენ შეგიძლიათ შექმნათ მოსახერხებელი და ინტუიციური ნავიგაცია საიტზე ბმულების გამოყენებით. ეს ტექნიკა საშუალებას გაძლევთ რაც შეიძლება კომფორტული გახადოთ მომხმარებლის ყოფნა რესურსის გვერდებზე.
ინსტრუქციები
Ნაბიჯი 1
ნებისმიერი ბმული იქმნება თეგის გამოყენებით, რომელიც უნდა დაიხუროს. გვერდის მისამართი მითითებულია ბრჭყალებში href ატრიბუტის შემდეგ. შედეგი ასეთი რამ უნდა იყოს:
ვებსაიტი
გადადით ფოტო გალერეაში
ინტერნეტ სივრცეში არსებულ გვერდზე გადასასვლელად მიუთითეთ მისი მისამართი, მაგალითად, KakProsto.ru. თქვენს კომპიუტერში html ფაილთან დასაკავშირებლად დაწერეთ მისკენ მიმავალი გზა. იდეალურ შემთხვევაში, სასურველია ინგლისურ ენაზე გადასვლა, რათა აღმოიფხვრას გრძელი ჩანაწერები, რომლებიც წარმოიქმნება რუსულენოვანი ტექსტის მისი შემდგომი თარგმნით საჭირო ფორმატში კოპირებისას. მაგალითად, ფაილი: /// E: /% D0% A3% D1% 87% D0% B5% D0% B1% D0% B0 / XXX% 20% D0% BF% D0% B0% D0% BF% D0% BA% D0% B0 /% D1% 81% D0% B0% D0% B9% D1% 82% 29% 29% 29/11% 20% D1% 81% D1% 82% D1% 80% 20% D1% 80 % D0% B0% D0% B7% D0% BD% D0% BE% D0% B5 /% D0% BE% D0% B1% D0% BE% 20% D0% B2% D1% 81% D0% B5% D0% % B% 20% D0% B3% D0% BB% D0% B0% D0% B2% D0% BD% D0% B0% D1% 8F.html"
ნაბიჯი 2
ბმულის დაყენება შესაძლებელია სურათის სახით. ამისათვის, ჩასვით სურათი და: ნიშნებს შორის. პატარა ზომის ხატზე გადაფარვისას უფრო დიდი ზომის სრულყოფილი ილუსტრაციის გასახსნელად, თქვენ უნდა გამოიყენოთ მტევანი.
სურათების ალტერნატიული ცვლილების ორგანიზებისთვის, რომელთაგან თითოეული წარმოდგენილი იქნება როგორც ბმული და სხვადასხვა გვერდებზე მიდის, გამოიყენეთ კოდი:
ვებსაიტი
div # rotator {პოზიცია: ნათესავი; სიმაღლე: 150 პიქსელი; ზღვარი მარცხნივ: 15px;}
div # rotator ul li {float: მარცხენა; პოზიცია: აბსოლუტური; სიის სტილი: არცერთი;}
div # rotator ul li.show {z-index: 500;}
ფუნქცია theRotator () {
$ ('div # rotator ul li'). css ({გაუმჭვირვალობა: 0,0});
$ ('div # rotator ul li: first'). css ({opacity: 1.0});
setInterval ('როტაცია ()', 5000);
}
ფუნქცია rotate () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var next = ((მიმდინარე. შემდეგი (). სიგრძე)? ((მიმდინარე. შემდეგი (). hasClass ("შოუ"))? $ ("div # rotator ul li: first"): current.next ()): $ ('div # rotator ul li: first'));
// var sibs = current.siblings ();
// var rndNum = მათემატიკა. სართული (მათემატიკა. სათაური () * ძმების სიგრძე);
// var next = $ (sibs [rndNum]);
next.css ({გაუმჭვირვალობა: 0.0})
.addClass ('შოუ')
.ცოცხალი ({გაუმჭვირვალობა: 1.0}, 1000);
მიმდინარე. ცხოველი ({გაუმჭვირვალობა: 0,0}, 1000)
.removeClass ('შოუ');
};
$ (დოკუმენტი). მზად (ფუნქცია () {
theRotator ();
});
ნაბიჯი 3
იმისათვის, რომ გვერდზე, რომელსაც ბმული იწვევს, გახსნის ცალკე ფანჯარაში, თქვენ უნდა დაამატოთ ატრიბუტი: გადასვლა.
ნაბიჯი 4
თუ html დოკუმენტი ძალიან გრძელია, შეგიძლიათ შიგნით ჩასვათ ბმულები. მაგალითად, დასაწყისშივე შეგიძლიათ შინაარსის ცხრილის შედგენა და კონკრეტულ სათაურზე დაჭერის შემთხვევაში, მომხმარებელი გადავა გვერდის სასურველ ნაწილში. ამისათვის თქვენ უნდა დარეგისტრირდეთ ბმული # ხატულასთან: გადადით განყოფილებაში და შექმენით სანიშნეები ბმულებზე: განყოფილება.
ასე გამოიყურება:
ვებსაიტი
სექციის ბმული
განყოფილება
