Trzy warstwy projektowania stron internetowych

Wszystkie strony internetowe łączą strukturę, styl i zachowania

Spis treściZwiększać

• Po co rozdzielać warstwy?
• HTML: warstwa struktury
• CSS: Warstwa stylów
• JavaScript: warstwa zachowania

Osoby pracujące w 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 CSS i zachowania skryptów. Niektóre z zalet rozdzielania warstw to:

Udostępnione zasoby: Kiedy 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 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 w witrynie 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, jeśli style i zachowania przeplatają się z dokumentami strukturalnymi. TEN: Witryna, w której wyraźnie oddzielono styl i strukturę, prawdopodobnie będzie skuteczniejsza dla wyszukiwarek, ponieważ mogą one skuteczniej indeksować treść i rozumieć stronę bez zagłębiania się w informacje dotyczące stylu wizualnego i zachowania. Dostępność: Zewnętrzne arkusze stylów i pliki skryptów są bardziej dostępne dla ludzi i przeglądarek. Oprogramowanie, takie jak czytniki ekranu, może łatwiej przetwarzać zawartość warstwy struktury bez zajmowania się stylami, których i tak nie mogą używać. Kompatybilność wsteczna: Witryna zaprojektowana z osobnymi warstwami programistycznymi jest bardziej zgodna z poprzednimi wersjami, ponieważ przeglądarki i urządzenia, które nie obsługują niektórych stylów CSS lub mają wyłączoną obsługę języka JavaScript, nadal mogą wyświetlać kod 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 standardamiHTML5i 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 dla witryny internetowej 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 oraz 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ść.