Zagnieżdżanie to tworzenie struktury i elementów projektu strony internetowej. Pisanie kodu strony internetowej jest wykonywane przez programistę lub programistę front-end. Używa programu graficznego do krojenia układów, edytora kodu i dodatkowych programów, aby przyspieszyć proces.
Co to jest layout
Kod układu jest szkieletem strony napisanym w html języka znaczników. Składa się z logicznie zepsutych elementów części strony - znaczników. Każdy z nich odpowiada za obszar: menu, strona piwnicy, media, formularze, mapy, wyszukiwanie w witrynie, czas. Mają atrybuty, identyfikujące poszczególne przedmioty za ich pomocą. Kaskadowe arkusze stylów odpowiadają projektowi, a efekty dynamiczne to skrypt java. Dobrze zaprojektowany układ jest równie wyświetlany we wszystkich przeglądarkach. Wynik jest określany serią testów. Możliwość pracy na więcej niż jednej platformie sprzętowej nazywa się crossplatform. Istnieje kilka podejść do implementacji układu, używając różnych frameworków.
Do tworzenia stron zgodnie z nowoczesnymi standardami stosuje się różne metody układu adaptacyjnego. Zapewnia to prawidłowe wyświetlanie pozycji na wszystkich typach ekranów.
Rodzaje układów
Standardy są stale ulepszane, a w konsekwencji zmieniają się sposoby tworzenia układów. W chwili obecnej istnieją 3 główne typy stron:
statyczne;
guma;
jest adaptacyjny.
Układy statyczne, które są stronami, które nie są w staniezmień swój projekt. Ich konstrukcja nie zmienia się, a wymiary elementów mają wyraźne znaczenie. Układ adaptacyjny oznacza, że elementy witryny zostaną dostosowane do rozmiaru ekranu urządzenia. Podczas zmiany szerokości dokumentu następuje reorganizacja bloków, niektóre części są zastępowane przez inne, niektóre elementy znikają. Idea adaptowalności ma zastąpić wersję mobilną strony, która żyje w poszczególnych subdomenach. Główną zasadą tworzenia zdolności adaptacyjnych jest zaprojektowanie projektu pod trzema ekranami: komputerem, tabletem, smartfonem.
Podczas tworzenia wzoru gumowego uwzględnia się również zmiany w rozmiarze ekranu, a wszystkie elementy można dostosować. Główną różnicą od adaptacyjnej jest to, że układ rozszerza się lub zwęża pod ekranem w każdym momencie zmiany. Sprawdź, która z zasad jest używana, jak następuje. Jeśli naciągniesz stronę za pomocą rozciągniętego okna przeglądarki, to będzie to wiązanie gumowe. Kiedy strona witryny zmienia się tylko w kilku pozycjach - to jest adaptacyjna.
Wymiary układu adaptacyjnego
Aby utworzyć układy adaptacyjne, zamiast standardowych pikseli statycznych stosowane są względne jednostki miary. Najczęściej spotykane są:
em;
rem;
%.
W układzie adaptacyjnym, html em służy do określania rozmiarów i wcięć czcionek. Domyślnie 1 em to 16 pikseli. W związku z tym, aby określić czcionkę dla akapitu p 32 pikseli, należy określić: p {font-size: 2em; } Osobliwością jednostki jest to, że 1em jest równyrozmiar czcionki jego elementu. Oznacza to, że 1em przyjmuje różne wartości w różnych częściach kodu. Na przykład w bloku, w którym rozmiar czcionki wynosi 2em (32 piksele), margines w 1em będzie wynosił 32 piksele. Ale w przypadku czcionki 1em (16 pikseli) dopełnienie w 1em będzie równe standardowym 16 pikselom. Rem to root em, który jest zdefiniowany w tagu. 1 root-em, w przeciwieństwie do 1em, jest równe liczbie w każdych okolicznościach. Wartość zmienia się tylko wtedy, gdy zmiany są wprowadzane obowiązkowo. Wartości procentowe są zwykle używane do ustawiania szerokości bloków lub obrazów. Bez względu na rozmiar ekranu, dopasuje on określoną wartość, na przykład 80%.
Wnioski o media
CSS obsługuje różne parametry techniczne urządzeń. Smartfon z małym ekranem jest zdefiniowany, właściwość stylu jest określona dla jego wartości. Prośby o media ujawniają różnice orientacji: portret i krajobraz. Szeroko stosowany do tworzenia układu adaptacyjnego. Układ dostosowuje się do określonej rozdzielczości ekranu, zmieniając strukturę dokumentu zgodnie z kodem. Określa się typy urządzeń:
urządzenia brajlowskie i drukarki wytłoczone dla osób niewidomych;
druk zwykłych drukarek;
ekran monitora ekranowego;
mowa syntezatorów mowy;
Telewizory tv
Znaczenie nazwy zapytania wskazuje na kilka warunków. Na przykład treść wyjściowa tylko dla monitorów i tylko maksymalna szerokość 600 pikseli. Wygląda to tak: ekran @media i (maksymalna szerokość: 600px) {kod wyjściowy}. Projektowanie adaptacyjne opiera się na wykorzystaniu zapytań o media. Tworzy układ ekranów, w którymMinimalna szerokość 1200 pikseli, korpus kod umieszczony w @media ekranu i (maksymalna szerokość: 1200 pikseli) {}. Następnie należy utworzyć blok na ekranie tablety @media i (min szerokość: 700px) {}, mobilne @media ekranu i (max szerokości: 699px) {}.
Najpierw mobilny
Według najnowszych danych, urządzenia mobilne i tablety są online częściej niż komputery. W związku z tym ruch mobilny zyskuje na znaczeniu w przypadku stron internetowych. Dzięki takim cechom jak małym ekranem, gadżety użytkownicy wolą stron z pierwszych linii SERPs, spędzają mniej czasu na szukanie informacji. Komórka Pierwsze podejście zapewnia wyświetlanie najważniejszych treści łatwy i zoptymalizowany stronie porzucenie pobieraniu innych zasobów. Adaptacyjny układ na miejscu metodologia ta obejmuje początkowe tworzenie stron dla małych ekranów i dodając kolejne elementy jak wymaganego projektu strony na dużym monitorze. Pomimo podejścia przejrzystości, klienci i wykonawcy czynią wielkie wysiłki, aby w pełni widoczne w zwykły sposób rozwijania serwisu.
Bootstrap
Jednym z najbardziej popularnych ram, który dał prostą odpowiedź na pytanie, jak zrobić układ adaptacyjnego - to Twitter Bootstrap. Z 12 kolumny siatki bootstrap tworzone strony internetowe, które po prostu domyślne poprawnie wyświetlane na ekranach urządzeń mobilnych. Główne stosowane przyrządy
z góry określone szerokości kolumny, które można określić szerokość elementów;
stałe i gumowe części dokumentu;
osadzone czcionki i klasy dla nich;
sposoby rysowania tabel;
klasy projektowania menu, paski narzędzi.
Efekty dynamiczne są napisane w jQuery, preprocesor SASS służy do opisu wyglądu i funkcjonalności popularnych czcionek internetowych. Strony opracowane na najnowszej wersji bootstrap nie wyświetlają się poprawnie w rzadko używanych wersjach przeglądarek, takich jak IE8 IE9 i iOS 6. Warto zauważyć, że rootowane em są używane jako rozmiary czcionek dla niektórych elementów. Oficjalna strona zawiera szczegółowe instrukcje w języku angielskim i rosyjskim, przykłady adaptacyjnego układu, sposoby korzystania z wbudowanych komponentów.
Fundacja
Fundacja to potężna struktura, jeden z głównych konkurentów Twitter Bootstrap. Obsługuje dowolny rozmiar siatki, ma kilka zalet, które nie są wystarczające w Bootstrap. Komponenty oferują szeroki zakres efektów animacji, które można dostosować. Preprocesor SASS służy do sterowania stylami. Lista szablonów podstawowych zawiera suwaki, panele nawigacyjne i ikony mediów społecznościowych. Wymiary podano w wartościach podanych w tabeli.
0
smedium
420px
medium
640px
duże
1024px (78 )
xlarge
1200 px 1440px
Układ siatki
Innym systemem, który zasługuje na uwagę, jest układ siatki. Jest zbiorem rutynowych linii pionowych i poziomych. Tworzą kolumny i wiersze. Elementy znajdują się w siatce, ich rozmiarsą wskazane zgodnie z liniami i tabelami. Możliwe jest użycie stałych rozmiarów, takich jak px, i elastycznych - procenty, rem i em. Najpierw należy ogłosić kontener siatki. display: grid Właściwość Grid-template-columns służy do określania szerokości linii i kolumn siatki-szablonu-wiersza. Wymiary można określić w jednej właściwości grid-template-columns. Szerokość mierzona jest w jednostkach fr, co stanowi ułamek dostępnej przestrzeni w pojemniku. Zakłada się, że fx i px mogą być używane w jednej właściwości. Na przykład: kolumny-szablon-kolumny: 500px 1fr 2fr.
Podsumowanie
Pełna praktyka układu adaptacyjnego od A do Z obejmuje wykorzystanie maksymalnej liczby metod. Aby dezasemblować od zera, jaki rodzaj układu dla wszystkich urządzeń, musisz ręcznie użyć zapytań o media, obliczyć rozmiar obrazów i czcionek. Kiedy już zdobędziesz odpowiednie umiejętności, możesz zacząć korzystać z frameworków.
