Osoby pracujące w in projektowanie stron branża porównuje tworzenie front-endowych witryn internetowych do trójnożnego stołka. Te trzy odnogi — trzy warstwy tworzenia stron internetowych — obejmują strukturę, styl i zachowanie witryny.
Dlaczego warto rozdzielać warstwy?
Kiedy tworzysz stronę internetową, jej struktura powinna zostać przeniesiona do Twojego kodu HTML, style wizualne do CSSi zachowania skryptów. Niektóre z zalet rozdzielania warstw to:
- Udostępnione zasoby:Gdy piszesz zewnętrzny plik CSS lub JavaScript, każda strona w witrynie może używać tego pliku. Jeśli chcesz wprowadzić zmiany w tym pliku, być może: zaktualizować niektóre style typograficzne w witrynie każda strona, która korzysta z tego arkusza stylów, otrzyma zmianę. Nie ma potrzeby edytowania każdej strony z osobna, co może być wyczerpującym przedsięwzięciem dla dużej witryny.
- Szybsze pobieranie:Po pierwszym pobraniu skryptu lub arkusza stylów przez klienta jest on buforowany przez przeglądarkę internetową. Ponieważ te wspólne zasoby są teraz zawarte w contained Pamięć podręczna przeglądarki, inne strony żądane w przeglądarce ładują się szybciej, co poprawia ogólną szybkość i wydajność strony.
- Zespoły wieloosobowe:Jeśli nad witryną pracuje jednocześnie więcej niż jedna osoba, użyj systemów kontroli wersji, które umożliwiają wpisywanie i wypisywanie plików, aby upewnić się, że wszyscy pracują z najnowsze wersje. Ten proces jest znacznie trudniejszy do wykonania, jeśli style i zachowania przeplatają się z dokumentami strukturalnymi.
- SEO:Witryna, w której wyraźnie oddzielono styl i strukturę, prawdopodobnie będzie skuteczniejsza dla wyszukiwarek, ponieważ because może skuteczniej indeksować te treści i rozumieć stronę bez ugrzęźnięcia w stylu wizualnym i zachowaniu Informacja.
- Dostępność:Zewnętrzne arkusze stylów i pliki skryptów są bardziej dostępne dla użytkowników i przeglądarek. Oprogramowanie takie jak czytniki ekranu mogą łatwiej przetwarzać zawartość warstwy struktury bez zajmowania się stylami, których i tak nie mogą używać.
- Kompatybilność wsteczna:Strona zaprojektowana z osobnymi warstwami programistycznymi jest bardziej skłonna do wstecznej kompatybilności, ponieważ przeglądarki i urządzenia, które nie mogą korzystać z niektórych stylów CSS lub mają wyłączoną obsługę JavaScript, mogą nadal wyświetlać HTML. Następnie możesz stopniowo ulepszać swoją witrynę dzięki funkcjom obsługiwanych przeglądarek.
HTML: warstwa struktury
Struktura lub warstwa treści strony internetowej jest podstawą HTML kod tej strony. Tak jak rama domu tworzy mocny fundament, na którym zbudowana jest reszta domu, tak solidny fundament HTML tworzy platformę, na której można stworzyć stronę internetową.
W warstwie struktury przechowujesz wszystkie treści, które Twoi klienci chcą przeczytać lub obejrzeć. Struktura HTML może składać się z tekstu i obrazów i zawiera hiperłącza z których odwiedzający będą korzystać do poruszania się po witrynie. Ta informacja jest zakodowana zgodnie ze standardami HTML5 i może zawierać tekst, obrazy i multimedia (wideo, dźwięk itp.).
Każdy aspekt zawartości witryny powinien być reprezentowany w warstwie struktury. Ta separacja umożliwia klientom, którzy mają wyłączoną obsługę JavaScript lub którzy nie mogą wyświetlić CSS, dostęp do całej witryny, jeśli nie do wszystkich jej funkcji.
CSS: Warstwa stylów
Ta warstwa określa, jak ustrukturyzowany dokument HTML będzie wyglądał dla odwiedzających witrynę i jest zdefiniowana przez CSS (Kaskadowe arkusze stylów). Pliki te zawierają instrukcje stylistyczne dotyczące sposobu wyświetlania dokumentu w przeglądarce internetowej. Warstwa stylu zwykle zawiera zapytania medialne które zmieniają sposób wyświetlania witryny na podstawie rozmiar ekranu i urządzenie.
Wszystkie style wizualne witryny powinny znajdować się w zewnętrznym arkuszu stylów. Możesz użyć wielu arkuszy stylów, ale każdy plik CSS wymaga żądania HTTP, aby go pobrać, wpływ na wydajność witryny.
JavaScript: warstwa zachowania
Warstwa zachowania sprawia, że witryna jest interaktywna, umożliwiając reagowanie na działania użytkownika lub zmianę w oparciu o zestaw warunków. JavaScript jest najczęściej używanym językiem dla warstwy zachowania, ale Grafika komputerowa i PHP są również bardzo często używane.
Kiedy programiści odwołują się do warstwy zachowania, większość z nich oznacza warstwę aktywowaną bezpośrednio w przeglądarce internetowej. Użyj tej warstwy do bezpośredniej interakcji z modelem obiektów dokumentu. Pisanie prawidłowego HTML w warstwie treści jest ważne dla interakcji DOM w warstwie zachowania. Kiedy budujesz warstwę zachowania, powinieneś używać zewnętrznych plików skryptów, tak jak w przypadku CSS, aby zoptymalizować szybkość i wydajność.