Możesz stworzyć wygodną i intuicyjną nawigację w serwisie za pomocą linków. Ta technika pozwala maksymalnie uprościć pobyt użytkownika na stronach zasobów.
Instrukcje
Krok 1
Każdy link jest tworzony przy użyciu tagu, który musi być zamknięty. Adres strony jest podany w cudzysłowie po atrybucie href. Wynik powinien wyglądać mniej więcej tak:
Stronie internetowej
Przejdź do galerii zdjęć
Aby przejść do strony obecnej w przestrzeni internetowej, podaj jej adres, na przykład KakProsto.ru. Aby połączyć się z plikiem html na swoim komputerze, wpisz do niego ścieżkę. W idealnym przypadku wskazane jest przejście na język angielski, aby wyeliminować długie zapisy, które powstają podczas kopiowania tekstu w języku rosyjskim z późniejszym tłumaczeniem na wymagany format. Na przykład plik: /// 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% BC % 20% D0% B3% D0% BB% D0% B0% D0% B2% D0% BD% D0% B0% D1% 8F.html"
Krok 2
Link można ustawić w formie obrazka. Aby to zrobić, umieść obrazek między tagami i:. Aby otworzyć pełnoprawną ilustrację o większym rozmiarze po najechaniu kursorem na małą ikonę, musisz użyć kilku.
Aby zorganizować alternatywną zmianę zdjęć, z których każdy będzie prezentowany jako link i prowadzi do różnych stron, użyj kodu:
Stronie internetowej
div # rotator {pozycja: względna; wysokość: 150px; margines lewy: 15px;}
div # rotator ul li {float: left; pozycja: bezwzględna; styl listy: brak;}
div # rotator ul li.show {z-index: 500;}
funkcja theRotator() {
$ ('div # rotator ul li').css ({przezroczystość: 0,0});
$ ('div # rotator ul li: pierwszy').css ({przezroczystość: 1.0});
setInterval ('obróć ()', 5000);
}
funkcja obracania () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: pierwszy'));
var next = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next()): $ ('div # rotator ul li: pierwszy'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var next = $ (sibs [rndNum]);
next.css ({przezroczystość: 0.0})
.addClass ('pokaż')
.animate ({przezroczystość: 1,0}, 1000);
current.animate ({przezroczystość: 0.0}, 1000)
.removeClass („pokaż”);
};
$ (dokument).gotowy (funkcja () {
Rotator ();
});
Krok 3
Aby strona, do której prowadzi link, otwierała się w osobnym oknie, należy dodać atrybut: Idź.
Krok 4
Jeśli dokument html jest zbyt długi, możesz umieścić w nim linki. Na przykład na samym początku możesz stworzyć spis treści, a po kliknięciu w konkretny nagłówek użytkownik przejdzie do żądanej części strony. Aby to zrobić, musisz zarejestrować link z ikoną #: Przejdź do sekcji i utwórz zakładki do linków: Sekcja.
Będzie to wyglądać tak:
Stronie internetowej
Link do sekcji
Sekcja
