Używanie ramek w HTML. Tworzenie atrybutów Frames znacznika Frame w celu dostosowania wyglądu okien

Co to są ramki?

Aby strona była bardziej funkcjonalna, aby umieścić dużą ilość informacji i linków w najwygodniejszej dla odwiedzającego formie, wcale nie jest konieczne korzystanie z technologii Flash. Wszystko to jest możliwe dzięki językowi HTML, w którym można tworzyć ramki.

Mówiąc laikiem, ramki to dodatkowe paski przewijania w jednym oknie. Wchodząc na stronę, odwiedzający widzi jednocześnie dwa okna na tej samej stronie - jedno z reguły z pozycjami menu lub innymi ważnymi informacjami, a drugie z treścią (tekst, ceny itp.). W takim przypadku odwiedzający może wygodniej przeglądać dość obszerne strony i jednocześnie mieć przed oczami najważniejsze informacje.

Jeśli zagłębimy się w szczegóły, strona z ramkami składa się z co najmniej trzech stron HTML na raz – dwóch widocznych dla użytkownika i jednej usługi (koordynującej wyświetlanie ramek). Widoczne strony to ramki, do których można uzyskać dostęp indywidualnie lub jednocześnie.

Niewątpliwą zaletą stosowania ramek jest wysoka jakość użytkowa. Interfejs strony staje się wielokrotnie wygodniejszy niż w przypadku stosowania standardowych metod znaczników.

Kiedyś, 5-6 lat temu, ramki zyskały popularność wśród wielu webmasterów. Dziś są używane tylko w tych witrynach, w których po prostu nie można się bez nich obejść, ponieważ niestety ramki mają znaczne wady pod względem promocji.

Ramki – dobre czy złe?

Przydatność ramek możesz rozpatrywać z trzech stanowisk – z pozycji użytkownika, z pozycji specjalisty SEO i webmastera.

W pierwszym przypadku stosunek do ram jest niejednoznaczny. Z jednej strony czasami po prostu nie da się bez nich obejść i z powodzeniem zastępują strony serwisowe otwierane w innych oknach. A ramki tylko poprawiają użyteczność dużych stron, bo użytkownik może w każdej chwili skorzystać z menu w innym oknie.

Z drugiej strony, tak naprawdę nie poprawiają wyglądu strony. Osiągnięcie dobrego wyglądu przy użyciu ramek jest dość trudne. I oczywiście nie wszystkie przeglądarki obsługują ramki, które mogą zniechęcić całą armię potencjalnych nabywców, klientów lub po prostu odwiedzających.

Z perspektywy webmastera używanie ramek ułatwia komponowanie stron i udoskonalanie interfejsu. Przecież o wiele łatwiej jest stworzyć jedną stronę z całym menu i innymi ważnymi informacjami, niż umieszczać tę treść na każdej stronie serwisu. Tu jednak kończą się uproszczenia i zaczynają komplikacje, o których niespecjalista nie musi wiedzieć. Co więcej, teraz prawie nikt nie pracuje z czystym HTML - CMS pozwala zrobić wszystko automatycznie.

Pozycja specjalisty SEO jest znacznie trudniejsza. Ramki po prostu nie pozwalają robotom wyszukiwania wyjść poza stronę główną. Oczywiście istnieją pewne sztuczki, które pozwalają na indeksowanie wewnętrznych stron witryny, ale nadal są to „sztuczki”, które nie są akceptowane przez żadną wyszukiwarkę.

Wpływ ramek na promocję serwisu.

Bez względu na to, jak doświadczony może być specjalista ds. promocji witryny, nie będzie on w stanie udzielić żadnych gwarancji w zakresie promocji, jeśli w zasobie zostaną użyte ramki. Niestety, technologia ta znajduje się na „czarnej liście” elementów utrudniających promocję w wyszukiwarkach, wraz z treściami typu flash i kradzionymi. Tego ostatniego może jeszcze nie widać, ale o oprawkach tego samego nie można powiedzieć.

Zatem jak i jaki wpływ na promocję ma użycie ramek?

Wpływ jest poważny. Faktem jest, że w ramkach znajdują się wszystkie ważne linki do wewnętrznych stron witryny. Aby je zarejestrować, projektant układu nie musi używać tagów …. Mianowicie, to po tym tagu robot wyszukiwania określa, że ​​przed nim znajduje się link, za pomocą którego można przejść do innej strony i ją zaindeksować (lub dodać jeszcze kilka „bułki tartej” do wagi linku).

Roboty wyszukujące indeksują tylko pierwszą – główną – stronę, do której trafiają z zewnętrznych zasobów. Inne strony pozostają zamknięte dla Yandex i Google - w końcu nawet z innych witryn nie można do nich linkować, ponieważ ramki ukrywają prawdziwe adresy stron.

Dziś nie da się już skutecznie promować jednej strony głównej – nie da się na niej wskazać wszystkich żądań, a PS będzie dużo bardziej podejrzliwy wobec takiego „one-pagera”.

Oczywiście „tradycyjni rzemieślnicy” wymyślili już sposób na indeksowanie stron wewnętrznych poprzez umieszczenie linków do nich w dokumencie instalacyjnym ramek, a adresy nadal można znaleźć, otwierając osobno stronę ramki. Czy jednak wszystkie te komplikacje są konieczne, jeśli rezygnując z takich technologii, można osiągnąć więcej?

Witam, drodzy czytelnicy bloga. Dzisiaj porozmawiamy o ramkach w HTML. Jasne jest, że zaczniemy od początku, a mianowicie od tego, jakie to zwierzę. Porozmawiamy także o teraźniejszości (Frame) i przyszłości (Iframe) tych elementów w aktualnej wersji hipertekstowego języka znaczników oraz w nowym standardzie HTML 5 z rozszerzeniem .

Na końcu artykułu, po szczegółowym opisaniu procesu tworzenia wbudowanych ramek i ich klasycznej struktury w kodzie HTML (już rzadko używanym), poruszymy kwestię zasadności budowania na nich witryny, a także omówimy możliwe sposoby ich wykorzystania w bieżącym okresie na przykładzie mojego bloga.

Co to jest i czym różni się element Iframe od ramki?

Co to jest? Okazuje się, że można ich używać nie tylko na stronach internetowych, ale także w dowolnych aplikacjach do programów, różnią się jednak tym, że okno strony internetowej lub aplikacji zostanie podzielone na kilka obszarów, do każdego z których ładowany jest osobny dokument . Co więcej, te obszary ramki zachowują się niezależnie od siebie.

Prawdopodobnie najbardziej oczywistym przykładem ich użycia, z którym zetknął się prawie każdy z Was, są tzw. pliki pomocy, które posiada wiele programów zainstalowanych na Waszym komputerze.

W lewym oknie zostanie wczytany plik z menu pomocy, a w prawym wyświetlony zostanie dokument odpowiadający wybranej pozycji menu. Warto zauważyć, że taka konstrukcja pozwala uniknąć ponownego ładowania pliku z menu do lewego okna podczas otwierania nowego dokumentu w prawym. Z tego właśnie się składa główna zaleta korzystania z ramek w HTMLu.

Właściwie już samą nazwę tych elementów należy rozumieć jako niezależne okno. Za pomocą ramek mamy możliwość podzielenia jednego dużego okna na kilka fragmentów, które z kolei mogą służyć jako odbiorniki dla odrębnych, niezależnych od siebie dokumentów (stron, tekstów, obrazów, filmów itp.).

W jaki sposób tworzona jest struktura ramek w hipertekstowym języku znaczników? Jeśli mówimy o standardzie HTML 4.01 (według klasyfikacji), który jest obecnie najważniejszy, to wykorzystywane są do tego trzy elementy - Frame, Frameset i Noframes.

Iframe - wbudowana ramka w standardzie HTML 5

Jeśli mówimy o standardzie HTML 5 (nasza przyszłość, którego niektóre elementy są już obsługiwane przez wiele przeglądarek), to nie będzie tagów Frame, Frameset i Noframes, a zamiast tego będzie klasyczna struktura ramki; pojedynczy znacznik Iframe (embeddedframe), o którym porozmawiamy na początku, a następnie zwrócimy uwagę na klasyczny schemat z wersji 4.01, który jest obecnie w użyciu.

Iframe w odróżnieniu od omawianych poniżej klasyków nie wymaga zastępowania tagu Body tagami Frameset. Te. znacznik ten można wstawić na zwykłych stronach, na przykład wewnątrz akapitu lub gdziekolwiek indziej. W swojej istocie element ten jest bardzo podobny do tagu Img, który już rozważaliśmy.

Jest to element wbudowany z wymienną zawartością, ponieważ zachowuje się dokładnie jak element wbudowany, ale jest wyświetlany obce treści zewnętrzne. W języku HTML są tylko cztery takie elementy – Img, Iframe, Object i Embed. Dlatego nasz bohater sugeruje obecność zewnętrznego pliku, który zostanie załadowany do obszaru, którego rozmiar jest ustawiony za pomocą atrybutów tego tagu.

To. Element iframe to element ujścia, do którego ładowany jest obiekt zewnętrzny (taki jak wideo). Natomiast aby wskazać ścieżkę do tego pliku, który powinien zostać wczytany na stronę użyj specjalnego atrybutu Src. Ale w przeciwieństwie do Img, element iframe jest sparowany, tj. jest też tag zamykający:

Ten przykład pokazuje dane wyjściowe na stronie wideo YouTube przy użyciu ramki iframe. W celu ograniczenia obszaru ramki (okna), w którym będzie ładowany plik zewnętrzny, podawane są atrybuty Szerokość i wysokość, którego wartości podane są w pikselach:

Te. tag ten tworzy obszar, do którego ładowany jest jakiś obiekt zewnętrzny (nie ma znaczenia, czy pochodzi z Twojej witryny, czy z innego zasobu). Szerokość i wysokość obszaru określa się za pomocą opcji Szerokość i Wysokość, a atrybut Src określa ścieżkę do tego obiektu.

Element iframe odziedziczył wszystkie te atrybuty po podobnych tagach wbudowanych z zastąpioną treścią (takich jak wspomniany już Img). Cóż, on też wziął atrybuty ze zdjęć Hspace i Vspace, które pozwalają ustawić wcięcia od krawędzi ramki do tekstu, który ją otacza.

Znamienne jest również to, że wyrównywanie wbudowanej ramki odbywa się dokładnie w taki sam sposób, jak mogliśmy to zobaczyć studiując obrazy w HTML-u. Wszystkie takie same Wyrównywać, ale dla znacznika iframe z możliwymi wartościami: Dolny, Górny, Środkowy, Lewy i Prawy.

Ale ten element również przejął kilka atrybutów ze znacznika Frame z klasycznej struktury ramki, o czym szczegółowo porozmawiamy poniżej w tekście. Do atrybutów tych należy Nazwa, której wartość można wykorzystać jako wartość, dzięki czemu dokument, którego potrzebujesz po kliknięciu linku, otworzy się w oknie tej ramki (więcej informacji poniżej).

Również w iframe atrybut Frameborder został przeniesiony ze znacznika Frame, który ma tylko dwie wartości - albo 0 (ramka wokół ramki nie jest wyświetlana) albo 1 (ramka jest widoczna). Wartość domyślna to Frameborder=1, więc aby ją usunąć, musisz wpisać Frameborder="0":

Z Frame do tego elementu przeniesiono także atrybut Scrolling, który ma domyślną wartość Auto - paski przewijania w ramce będą pojawiać się w miarę potrzeb, gdy zawartość będzie większa niż rozmiar okna przeznaczonego do jej wyświetlenia.

Cóż, atrybuty Marginwidth i Marginheight również zostały przeniesione z elementu Frame. Zostaną one szczegółowo omówione poniżej w tekście, a w skrócie – pozwalają ustawić wcięcie na szerokość i wysokość od krawędzi ramki do treści, która się w niej znajduje.

Jak już wspomniałem, wyraźnym przykładem użycia ramki iframe jest:

Wstawiając element iframe bezpośrednio na stronę internetową, otrzymasz wynik wideo z YouTube. Dochodzimy do wniosku, że ten element jest skrzyżowaniem elementów inline z zastąpioną treścią i w istocie klasycznych ramek, o czym teraz porozmawiamy.

Ramki oparte na znacznikach Frame i Frameset - ich budowa

Zatem tworzenie klasycznej struktury ramki zaczyna się od tego, co napiszesz w kodzie HTML zamiast otwierającego i zamykającego znacznika Body, który zwykle powinien znajdować się w każdym dokumencie, zastępując go kontenerem opartym na elementach Zestaw ramek.

Zasadniczą kwestią jest to, że w tym przypadku nie można zastosować elementu Body - ani Body (w przypadku zwykłego dokumentu), ani Frameset (w przypadku tworzenia struktury ramki dokumentu):

Każda ramka, którą tworzymy wewnątrz głównej, tworzona jest przy użyciu osobnego elementu Rama. Znacznik ten jest pojedynczy i w nim ustalamy ścieżkę do dokumentu, który będzie wczytany do tego okna.

Trzecim elementem, którego jeszcze nie poruszyliśmy, jest Brak ramek. Jest sparowany i pozwala na wpisanie do środka tekstu, który zostanie przetworzony przez przeglądarkę i wyświetlony na stronie internetowej tylko wtedy, gdy ta sama przeglądarka (lub inne urządzenie wyświetlające) nie obsługuje ramek. Może się to zdarzyć na przykład, jeśli korzystasz z przeglądarki przeznaczonej na urządzenia mobilne.

Zwykle w Noframes dodają nie tylko informację o aktualnej sytuacji z niemożnością przetworzenia struktury ramek, ale także dodają możliwość przejścia na inne strony, na których można kontynuować pracę bez ich używania. Trudno powiedzieć o nim cokolwiek innego, więc kontynuujmy.

Okazuje się, że element Frameset zastosowany zamiast znacznika Body zajmuje całą przestrzeń przydzieloną na obszar podglądu, a wewnątrz tego obszaru zostaną utworzone ramki z wykorzystaniem poszczególnych elementów Frame. W związku z tym pojawia się pytanie – jak podzielić obszar widzenia pomiędzy osobne okna, czyli inaczej mówiąc, jak ustawić wielkość każdego z nich.

Odbywa się to poprzez dodanie odpowiednich atrybutów do elementu Frameset. Jest ich dwóch - Kolsy i wiersze. Cols ustawia podział dużego okna na pionowe ramki lub kolumny, a Rows pozwala na podzielenie go na poziome okna lub rzędy.

Tworzenie struktury opartej na zestawie ramek i jego atrybutach Cols i Rows

Wartości Cols i Rows znacznika Html Frameset to liczby oddzielone przecinkami (bez spacji). Liczby te wyznaczają proporcje okien, jakie chcemy w efekcie uzyskać. Zatem niezależnie od tego, ile liczb oddzielonych przecinkami zapiszemy w kolumnach lub wierszach, wynikiem będzie liczba klatek, które otrzymamy.

Przykładowo korzystając z tego zapisu otrzymamy trzy pionowe kolumny, których szerokość będzie odpowiadać proporcjom 2:5:3.

Ponieważ ustaliliśmy proporcje dla trzech klatek, będziemy musieli uwzględnić trzy elementy Frame pomiędzy otwierającym i zamykającym znacznikiem Frameset, nawet bez określania dodatkowych atrybutów:

W rezultacie nasza konstrukcja ramowa, składająca się z trzech pustych okien, będzie wyglądać następująco:

W tym przykładzie wielkość okna (Frame) ustalamy za pomocą wartości procentowych, które są pobierane z szerokości obszaru wyświetlania (tak jest w przypadku użycia Cols) lub z jego wysokości (Rzędy). Przy zmianie rzutni zachowana zostanie procentowa zależność pomiędzy rozmiarami ramek. Ale zamiast procentów możesz także użyć po prostu liczb, które będą oznaczać. Myślę, że i tutaj nie powinny pojawić się żadne trudności w zrozumieniu.

Ale istnieje również dość nietypowa opcja w oznaczeniach rozmiarów, która wygląda gwiazdka „*”. Co więcej, może to być po prostu „*” lub gwiazdka z liczbą na początku, na przykład „3*”. Sprytna rzecz, która bardzo przypomina procenty i polega na tym, że przestrzeń na Ramkę dzielimy proporcjonalnie.

Spójrzmy na przykład. Teraz podzielmy rzutnię na poziome rzędy za pomocą opcji Wiersze:

Co oznacza ten wpis? Cały dostępny nam w pionie obszar widzenia zostanie podzielony na trzy linie. Wysokość pierwszej zostanie przyjęta na 200 pikseli, druga na 500, ale trzecia linia zajmie całą pozostałą przestrzeń na wysokości, ponieważ Jako rozmiar zastosowano „*”.

Warto zauważyć, że wartości „*” i „1*” oznaczają to samo - całą pozostałą przestrzeń dzielimy na jedną i tę jedną część przekazujemy tej ramce (no, czyli całą pozostałą przestrzeń).

Ale spójrz, co się stanie, jeśli użyjesz wartości „*” z liczbą do podzielenia proporcjonalnie:

Jak myślisz, jakie będą wymiary Ramy w tym przypadku? Wiadomo, że druga linia na pewno będzie miała wysokość 100 pikseli. Ale jak pozostała przestrzeń zostanie podzielona na wysokość między trzecim a pierwszym rzędem?

Obliczenie jest dość proste - wystarczy dodać cztery (4*) do dwóch (2*) i podzielić przez ten mianownik (pamiętajcie ułamki z programu szkolnego) dwa i cztery. Te. otrzymujemy, że pierwsza kolumna z ramą zajmie jedną trzecią pozostałej przestrzeni na wysokości, a trzecia kolumna zajmie dwie trzecie. Inaczej mówiąc, trzeci będzie dwa razy wyższy od pierwszego:

Możesz użyć wszystkich trzech sposobów określania rozmiaru okien ramowych w jednym atrybucie, na przykład:

W rezultacie otrzymamy pierwszą kolumnę Frame o szerokości dziesięciu procent całego dostępnego obszaru, drugą - 100 pikseli, a pozostałe trzy będą miały szerokość w proporcjach czterech, trzech i dwóch dziewiątych pozostała przestrzeń szerokości. Wszystko jest więc proste i jasne.

Jeśli chcesz podzielić okno główne nie tylko na ramki poziome i pionowe, ale np. na ich kombinacje, to możesz zastosować zagnieżdżoną strukturę elementów Frameset osobno dla kolumn i osobno dla wierszy. Przykładowo, aby uzyskać konstrukcję pokazaną na zrzucie ekranu poniżej, wystarczy zastosować następującą konstrukcję:

Te. najpierw używamy „frameset cols =”20%,80%”„, aby podzielić całą dostępną przestrzeń na dwie kolumny w pionie i ustawić zawartość prawej kolumny za pomocą znacznika „frame”, ale zamiast dodawać element „frame” w lewej kolumnie otwieramy nowy „wiersze zestawu ramek =„10%,*””.

I za jego pomocą dzielimy prawą kolumnę na dwie linie z ramkami, których zawartość ustawiamy za pomocą dwóch znaczników „frame”, po czym zamykamy oba kontenery „frameset”. Wszystko jest proste i logiczne.

Określ ścieżkę w atrybucie Src elementu Frame

Ale wszyscy rozmawialiśmy o elemencie Frameset i jego atrybutach Cols i Rows, za pomocą których tworzymy strukturę i ustalamy ich rozmiary. Zastanówmy się teraz, jak wyświetlić niezbędne dokumenty w wymaganych ramkach i jak skonfigurować interakcję między ich oknami.

Jak zatem kontrolować wygląd tworzonych przez nas okien? Wszystko to zawarte jest w atrybutach tagu Frame. Pierwszą z nich, o której warto wspomnieć, jest Src. Widzieliśmy to już w tagu Img, kiedy patrzyliśmy na wstawianie obrazów do kodu HTML. Jego istota nie uległa zmianie i nadal pozwala na określenie ścieżki do dokumentu, który ma zostać wczytany do ramki.

Ścieżkę do dokumentu w Src można określić jako . Ścieżki względne są zwykle używane w przypadku dokumentu znajdującego się w Twoim zasobie, ale ścieżki bezwzględne będą potrzebne, jeśli chcesz załadować dokument z innej witryny do okna ramki.

Jeżeli nie zostanie podany atrybut Src wskazujący ścieżkę do żądanego dokumentu, to do okna zostanie wczytany pusty dokument. Osobiście kiedyś zrobiłem coś podobnego dla swojego bloga (jako dodatkowy element nawigacyjny) i jednocześnie utworzyłem dla niego osobny folder na serwerze hostingowym i umieściłem tam nie tylko plik HTML o strukturze ramki (który nazwałem indeksem .html), ale także wszystkie ładowane do różnych okien dokumentów, a także pliki graficzne, które służyły jako tło.

Dlatego najłatwiej było mi użyć linków względnych w atrybucie Src tagu Frame:

Warto zauważyć, że jeśli zamienisz wszystkie linki podane w tym kodzie z względnych na bezwzględne (takie jak https://site/navigator/joomla.html) i otworzysz ten plik w przeglądarce, to zostaną załadowane dokumenty określone w Frame z mojego serwera, a podobny obraz zobaczysz w swojej przeglądarce. Co więcej, nie ma znaczenia, gdzie będzie się znajdował Twój plik ze strukturą ramki (index.html) - na Twoim komputerze czy na hostingu.

W przykładzie pokazanym na rysunku do okna lewej ramki ładowana jest strona z określonym menu, będącym menu zwykłym. Ale nie liczy się sposób, w jaki menu jest utworzone, ale to, co dzieje się po kliknięciu któregokolwiek z jego linków.

Jeśli to zrobisz, wszystko przebiegnie dokładnie tak, jak powinno - dokument otworzy się w prawym dolnym oknie. Ale do tego musiałem zastosować jeden mały trik, bo w wersji domyślnej dokument otwierał się na cały rozmiar okna, zastępując strukturę ramki, której w ogóle nie potrzebowałem, bo menu nawigacyjne w lewej i górnej ramce zniknął.

Jak otwierać dokumenty za pomocą łącza w ramce

Zatem mówiąc o hiperłączach, wspomnieliśmy o atrybucie znacznika „A” jako Target=_blank. Czy pamiętasz do czego to służy? Prawidłowe jest otwarcie połączonego dokumentu w nowym oknie. Domyślnie powinien otwierać się w tym samym oknie, co jest odpowiednikiem target="_self".

Ale to są możliwości Cel nie są ograniczone. Okazuje się, że można do tego dodać wartość jako nazwa ramki, który jest wstępnie określony w specjalnym atrybucie Name znacznika Frame. Wtedy dokument poprzez ten link nie otworzy się w tym samym oknie, zajmując całą jego przestrzeń, ale w określonej przez Ciebie ramce. Jest jasne? Jeśli nie do końca, to stanie się to jasne teraz, gdy przeanalizujemy przykład.

Wróćmy więc do naszego przykładu pokazanego na rysunku tuż powyżej. Strony musimy otwierać za pomocą linków z lewego okna w prawej dolnej (dużej) ramce. Dlatego najpierw musisz nadać temu dużemu oknu nazwę, korzystając z atrybutu Name w znaczniku Frame.

Zrobili to i nazwali „ktona”. Teraz możesz bezpiecznie otworzyć plik, który jest ładowany jako menu w lewym oknie i dodać atrybut Target="ktona" do wszystkich znajdujących się w nim tagów A:

Historia Joomla i komponentu VirtueMart

Oczywiście za pomocą narzędzia wyszukiwania i zamiany nie będzie trudno umieścić je dla wszystkich hiperłączy, ale po co niepotrzebnie ładować kod, skoro mamy świetną okazję do wykorzystania specjalny znacznik podstawowy, o którym wspominaliśmy już w tym samym artykule o hiperłączach, kiedy rozmawialiśmy o użyciu Target blank.

Wystarczy umieścić bazowy element target="ktona" pomiędzy otwierającym i zamykającym tagiem Head, a wszystkie linki w kodzie HTML tego dokumentu otworzą nowe strony w określonej ramce zwanej "ktona":

Swoją drogą, jeśli weźmiemy pod uwagę moje kiedyś narzędzie jako przykład, to nadal musimy się upewnić, że wszystkie linki z górnego poziomego okna otwierają swoje strony w lewej pionowej ramce, która służy mi jako lewe menu. Co należy w tym celu zrobić?

Cóż, najpierw musisz nadać nazwę lewej pionowej ramce:

Natomiast w pliku, który ładuje się do górnego okna (gor.html) należy dodać podstawowy element target="gor":

To wszystko, teraz zrobiliśmy wszystko dobrze. Wszystkie dokumenty podążające za linkami z górnej ramki otwierają się w lewym oknie, a wszystkie linki z niej otwierają dokumenty w środkowej i największej ramce. Moim zdaniem wszystko jest proste i logiczne.

Atrybuty znacznika ramki umożliwiające dostosowanie wyglądu okien

Zobaczmy teraz, jakich atrybutów innych niż Src i Name można użyć w tagu Frame, aby dostosować wygląd ramek. Zacznijmy Przewijanie. Za jego pomocą możemy skonfigurować wyświetlanie pasków przewijania dla każdego okna Twojej struktury ramki osobno.

Przewijanie ma domyślną wartość Auto - przeglądarka automatycznie zdecyduje, na podstawie rozmiaru dokumentu załadowanego do ramki, czy wyświetlić pasek przewijania, czy nie. Jeżeli dokument nie mieści się całkowicie w oknie, pojawi się pasek przewijania, umożliwiający obejrzenie całości do końca.

Możesz także użyć wartości Tak (paski przewijania w oknie będą zawsze wyświetlane, nawet jeśli dokument w całości się w nim zmieści) i Nie (paski przewijania w ogóle nie pojawią się, nawet jeśli część dokumentu się nie zmieści) jako wartości dla przewijania.

W moim niegdyś istniejącym narzędziu użyłem domyślnej wartości Auto i paski przewijania w ramkach pojawiały się w razie potrzeby:

Następującym atrybutem znacznika Frame jest − Noresize- jest pojedynczy (nie ma wartości). Rejestrując go, zabraniasz tym samym zmiany jego rozmiaru, co domyślnie odbywa się poprzez proste przeciągnięcie myszką krawędzi ramek.

Gdy przesuniesz kursor myszy na granicę, zobaczysz, że kursor zmieni się w podwójną strzałkę i teraz, klikając lewym przyciskiem myszy, możesz przesuwać granicę według własnego uznania. Noresize zakazuje takiej samowoly (po przesunięciu kursora myszy do krawędzi okien nie będzie już widoczna dwukierunkowa strzałka).

Kolejnym atrybutem wizualnym jest Brzeg ramki. Za jego pomocą możesz określić, czy pomiędzy klatkami ma być rysowana ramka (granica), czy też nie. Obramowanie ramki może mieć tylko dwie możliwe wartości - 0 (nie rysuj ramki) lub 1 (pokaż ramkę). Wartość domyślna to oczywiście 1.

Jest jedna subtelność. Jeśli chcesz usunąć widoczną ramkę, będziesz musiał dodać Frameborder=0 do wszystkich znaczników Frame klatek, pomiędzy którymi chcesz usunąć widoczne ramki.

Cóż, nadal musimy rozważyć kilka atrybutów znacznika Frame - Szerokość marginesu i wysokość marginesu, które ustawiają szerokość dopełnienia (prawa i lewa) oraz wysokość (góra i dół) od krawędzi okna do załadowanej do niego treści (liczba oznacza liczbę pikseli dopełnienia):

Dlaczego nie można zrobić strony internetowej na ramkach?

Zobaczmy, jaka jest zasadnicza wada klasycznych struktur, która w zasadzie kładzie kres ich zastosowaniu przy tworzeniu strony internetowej. Polega ona na tym, że zgodnie z tą konstrukcją ramową nie da się śledzić jej stanu.

Złożone struktury mogą mieć tysiące różnych stanów (warianty dokumentów otwieranych w różnych oknach ramek), ale adres URL tej samej struktury nie ulega zmianie. Z tego powodu będzie Nie można używać zakładek przeglądarki lub wysyłaj linki do swoich ulubionych stron innym użytkownikom. Dlaczego?

Ponieważ adres pozostaje niezmieniony, a otwierając go z zakładek przeglądarki lub z wiadomości e-mail, otrzymasz stronę ze stanem początkowym struktury ramki, a nie stanem, który chciałbyś zapisać.

Choć oczywiście ten problem można rozwiązać, ale nie za pomocą narzędzi HTML, a za pomocą serwerów (na przykład Php) lub klienckich języków programowania (JavaScript), a te rozwiązania nie będą stuprocentowo skuteczne. Takie rozwiązania faktycznie pozwalają na dodanie dodatkowych danych o jego aktualnym stanie do adresu URL struktury ramki, ale nie jest to łatwe, a niezawodność nie będzie absolutna.

To pierwsza i bardzo istotna wada stosowania ramek do tworzenia stron internetowych, ale jest jeszcze jedna, ogromna wada. Wyszukiwarki oczywiście już dawno nauczyły się je indeksować i wydobywać z nich adresy dokumentów ładowanych do ich okien. Problem jest inny.

Kiedy użytkownik przejdzie z wyników wyszukiwania Yandex lub Google do Twojej witryny zbudowanej w oparciu o strukturę ramek, otworzy się tylko dokument, który został załadowany do jednej z ramek, a nie cała struktura. Czy rozumiesz o czym mówię?

Użytkownik zobaczy dokument i nie zobaczy nawigacji w Twojej witrynie, ponieważ będzie on chroniony w innych oknach, a są one wczytywane tylko jako część całej konstrukcji.

W rezultacie strona zbudowana na ramkach staje się po prostu bezużyteczna. Chociaż znowu istnieją rozwiązania tego problemu w oparciu o skrypty serwerowe, gdy zostanie wykonane przekierowanie z adresów poszczególnych dokumentów do struktury ramek, która jest w pożądanym stanie, ale znowu jest to bardzo trudne i nie zawsze niezawodne.

Ogólnie rzecz biorąc, wniosek można wyciągnąć jednoznacznie - Nie ma potrzeby tworzenia stron internetowych na ramkach. Ale są stale używane do tworzenia pomocy dla różnych aplikacji i mogą się przydać w innych drobiazgach.

Na przykład stworzyłem strukturę ramek, którą nazwałem „Nawigatorem” (teraz została tymczasowo usunięta) i która stała się rodzajem rozszerzonego menu zewnętrznego mojego bloga, co moim zdaniem powinno uprościć pracę z zasobem i dlatego poprawić „bez bzdur” mają bardzo, bardzo silny wpływ na promocję witryny.

Jednak aby uniknąć problemów z wyszukiwarkami, zamknąłem całą strukturę ramki z widoku, a także na wszelki wypadek dodałem metatag Rodots do wszystkich jej plików HTML, zakazując ich indeksowania:

Jednak wszystkie te ograniczenia dotyczą tylko struktur w znacznikach Frame i Frameset oraz osadzone ramki w tagach iframe nie mają żadnych widocznych wad, a można, a nawet należy je wykorzystać w swoich projektach, choćby do wstawiania filmów z YouTube.

Powodzenia! Do zobaczenia wkrótce na stronach bloga

Możesz być zainteresowany

Dyrektywy komentarzy i typ dokumentu w kodzie HTML, a także koncepcja elementów blokowych i wbudowanych (tagi)
Osadź i obiektuj - znaczniki HTML służące do wyświetlania treści multimedialnych (wideo, flash, audio) na stronach internetowych
Img - znacznik HTML służący do wstawiania obrazka (Src), wyrównywania i owijania wokół niego tekstu (align), a także ustawiania tła (background)
Co to jest hipertekstowy język znaczników Html i jak wyświetlić listę wszystkich tagów w walidatorze W3C Wybierz, Opcja, Obszar tekstowy, Etykieta, Zestaw pól, Legenda - Tagi HTML dla postaci list rozwijanych i pól tekstowych
Listy w kodzie HTML - znaczniki UL, OL, LI i DL
Czcionka (twarz, rozmiar i kolor), cytaty blokowe i znaczniki wstępne — starsze formatowanie tekstu w czystym formacie HTML (bez użycia CSS)
Jak ustawiane są kolory w kodzie HTML i CSS, wybór odcieni RGB w tabelach, dane wyjściowe Yandex i inne programy

Termin „ramka” pochodzi do nas z języka angielskiego. W tłumaczeniu to słowo oznacza „ramę” i reprezentuje oddzielny obszar okna. W swojej strukturze taka sekcja jest całkowicie gotowym dokumentem HTML.

Poszczególne ramki dzielą okna przeglądarki na sekcje, które są umieszczone obok siebie. W tym przypadku każda ramka jest ładowana z własną pełną stroną. Technologia ramowa wciąż budzi wiele kontrowersji, jednak trzeba przyznać, że szczyt jej popularności ma już za sobą. Technologia ta jest obecnie uważana za przestarzałą, a zwykłe ramki nie są już obsługiwane w HTML5.

Historia technologii

Dziś możemy stwierdzić, że decyzja o odejściu od pracy w technologii ramowej została ostatecznie podjęta. Witryna https://www.w3.org/TR/html5-diff/#obsolete-elements wyraźnie stwierdza, że ​​zwykłe znaczniki ramki, zestawu ramek i noframes służące do tworzenia takiej struktury są przestarzałe. Jako argument podaje się dane, że stosowanie takiej struktury negatywnie wpływa na użyteczność stron i ich dostępność w Internecie.

Ale nowoczesne technologie obsługują element IFRAME. Jego użycie pozwala na wstawianie ramek do bloków tekstowych na stronach. Co więcej, takie elementy można wyrównać względem samego tekstu. Ważna kwestia: w zasadzie nie można zmienić rozmiaru wbudowanych ramek. Nie mają odpowiedniego atrybutu umożliwiającego zmianę rozmiaru.

W przyszłości, bez postępu technologicznego, dalsze wykorzystanie ramek jest mało prawdopodobne. A warto pamiętać, że wiodąca organizacja zajmująca się standaryzacją technologii internetowych – W3C – wyraźnie wskazała, że ​​tego typu struktury nie powinny być wykorzystywane przez twórców stron internetowych.

Oznacza to, że ramek w zasadzie nie należy używać do strukturyzowania stron podczas tworzenia nowych zasobów. Jednak dzięki wsparciu i udoskonalaniu istniejących witryn wiedza na temat funkcji technologii i ich wykorzystania będzie bardzo przydatna i produktywna.

Korzyści z ramek

Do zalet technologii ramowej należy łatwość obsługi, duża prędkość i możliwość dokładnego umiejscowienia informacji w określonych obszarach okna.

Zastosowanie ramek pozwala zaoszczędzić na wolumenie przesyłanego ruchu podczas pracy z witryną. Przecież podczas uzyskiwania dostępu do innej sekcji informacji aktualizowana jest zwykle tylko jedna sekcja strony, a nie cały jej kod.

Ta struktura zapewnia ciekawe opcje nawigacji po zawartości zasobów. Przecież w oknie przeglądarki w sąsiednich ramkach można przeglądać różne bloki informacyjne. Ważne jest, aby użytkownicy wiedzieli, że wyszukiwanie w ramce jest równoznaczne z wykonaniem takiej operacji na osobnej stronie.

Podczas pracy z witryną można dynamicznie zmieniać wielkość osobnej sekcji, co jest trudne do zrealizowania przy użyciu innych rozwiązań technologicznych.

Możliwe wady

Problemy ze stronami internetowymi korzystającymi z ramek narastały stopniowo, ale dziś osiągnęły poziom progowy. Do głównych wad należą:

1. Niezadowalająca użyteczność. Dziś odsetek użytkowników urządzeń mobilnych i tabletów o małych rozdzielczościach ekranów rośnie i już przekracza liczbę osób odwiedzających strony z komputerów stacjonarnych i laptopów. I tutaj użycie ramek stwarza poważne problemy z responsywnością stron wyświetlanych na różnych urządzeniach. Problem ten nie ma dziś praktycznego rozwiązania.
2. Pogorszenie dostępności witryny dla różnych programów. Wzrost liczby dodatkowych programów (np. czytników ekranu) ujawnia znacznie gorszą dostępność informacji do odczytu.
3. Strony nie wyświetlają się poprawnie. Często układ stron o takiej strukturze wygląda niepoprawnie w przeglądarkach z punktu widzenia projektu. A to wynika z cech technologii. Z punktu widzenia SEO stosowanie ramek w układzie HTML strony jest wysoce niepożądane.
4. Dostępność jednego adresu dla całej struktury. W rezultacie wewnętrzne strony takiej witryny nie mogą być dodawane do zakładek. Prowadzi to do niedogodności dla użytkowników.
5. Nieprawidłowe indeksowanie przez wyszukiwarki. Obecność na stronie internetowej kilku pełnoprawnych dokumentów, z których utworzona jest jedna strona, znacznie komplikuje pracę wyszukiwarek. Prowadzi to do znacznych błędów podczas indeksowania. W rezultacie nieprawidłowe zdefiniowanie tematów i adresów stron prowadzi do utraty kluczowych treści z indeksowania.
6. Brak szacunku. Jest to dość nietypowa wada zasobów w sieci. A jednak trzeba powiedzieć, że fakt, że układ stron na ramkach staje się przestarzały, powoduje, że autorów i właścicieli takich zasobów uważa się za retrogradantów. Ale są pewne wyjątki. Nawet nowoczesne witryny, w których znajdują się pokoje rozmów, zwykle używają ramek.

Indeksowanie ramek przez wyszukiwarki

Z informacji płynących z wyszukiwarek jasno wynika, że ​​witryny z ramkami indeksują się zauważalnie wolniej. W takim przypadku często pojawiają się błędy związane z samą konstrukcją. W końcu każda ramka wyświetla pełnoprawną stronę internetową. I właśnie taka część serwisu może zostać uwzględniona w bazie indeksacyjnej.

Negatywnym aspektem takiego indeksowania jest to, że wchodząc do wnętrza strony, użytkownik zwykle nie widzi menu i innych mechanizmów nawigacyjnych. I nie jest to zaskakujące. Musisz zrozumieć, że aktualizacja ramki nie jest rozwiązaniem problemu w tym przypadku. Przecież wszystkie mechanizmy nawigacyjne umieszczono w innym pojemniku.

Innym problemem jest to, że często strona główna struktury kontenera zawiera tylko tytuł, znaczniki metaopisu i znacznik FRAMESET. I to wydaje się logiczne – w końcu znaczące treści umieszczane są w osobnych dokumentach. To właśnie one odwiedzający witrynę zobaczy na stronie w ramkach.

Jednak robot wyszukiwania prawie nigdy nie indeksuje takiej strony. Nie znajduje na nim żadnych treści przydatnych dla odwiedzających. Boty wyszukujące są skonfigurowane w taki sposób, że próbują odzyskać i zindeksować informacje zawarte w tagu body. To tutaj następuje poszukiwanie treści przydatnych dla użytkownika. Ale na stronie ramki nie ma takiego znacznika; jest on zastąpiony przez FRAMESET.

Problem ten można częściowo rozwiązać za pomocą NOFRAMES. Jednak w wielu witrynach podczas uzyskiwania dostępu do nich podana jest tylko informacja, że ​​przeglądarka nie obsługuje ramek. Aby wyświetlić stronę, musisz użyć innego programu.

Takie przypadki stwarzają wiele problemów dla użytkowników, którzy odwiedzając witrynę, nie widzą menu i innych informacji, które powinny zostać wyświetlone. Jeśli na stronie internetowej znajdują się ramki, jej parametry z punktu widzenia SEO ulegają obniżeniu. Jednocześnie statystyki zachowań użytkowników wskazują, że autorytet zasobu wśród wyszukiwarek spada. Ma to zdecydowanie negatywny wpływ na ruch na stronie.

Szczególnie trudne jest dla wyszukiwarek i botów indeksujących przetwarzanie zagnieżdżonych i wielokrotnych struktur personalnych. Sytuację dodatkowo komplikuje fakt, że każdy kontener posiada wszystkie cechy odrębnego dokumentu, ale nie zawiera pełnej nawigacji i innych informacji.

Możesz ułatwić pracę wyszukiwarkom, stosując odpowiednie linki na stronach. W takim przypadku musisz zduplikować wszystkie linki menu, aby można je było znaleźć w poszczególnych częściach strony. Ale to znacznie komplikuje i spowalnia pracę związaną z optymalizacją witryny i aktualizacją informacji na jej temat.

Doświadczenie wielu optymalizatorów i webmasterów podpowiada również, że strony na ramkach nie uzyskują wysokich rankingów w wynikach wyszukiwania. Dzieje się tak nawet jeśli znajdują się one w bazie indeksacyjnej.

Funkcje promocji strony internetowej w ramkach

Niektóre wyszukiwarki indeksują pliki w ramkach nieprawidłowo lub bardzo niepoprawnie. W rezultacie baza danych indeksu nie jest wypełniona adresami zasobów nadrzędnych (jak powinno być), ale linkami do witryn podrzędnych.

Aby zminimalizować problemy z indeksowaniem witryn w oparciu o ramki, przy ich opisywaniu stosowane są specjalne tagi i parametry. Głównym elementem konstrukcji kontenera jest zestaw ramek. To on zastępuje standardową treść w kodzie źródłowym. Każdy pojedynczy kontener w konstrukcji jest opisany ramką. Jego ilość w kodzie strony odpowiada liczbie poszczególnych sekcji wyświetlanych w oknie przeglądarki podczas przeglądania.

Tagi te należy umieścić na stronie głównej serwisu, a następnie zduplikować treść wewnątrz każdego z nich.