Введение в HTML — Урок 11 — Верстка веб страниц — Подходы, виды и типы

Автор Lyudmila Yeriomenko
Введение в HTML — Урок 11 — Верстка веб страниц — Подходы,  виды и типы

Доброе время суток участники образовательная эти площадки iqspace.

Меня зовут. Юрий сиротюк и сегодня мы продолжим разговор о верстки веб-страниц в наше внимание на таких подходах верстки как табличная и. Блочная также поговорим о таких видов как логическая и физическая и рассмотрим типы макетов фиксированной и резиновой шириной также немного затронем адаптивных макетов существует ряд подходов к верстке и первоочередно в задачу верстальщика входит определить какой из них.

Он возьмёт на вооружение часть из этих подходов являются устаревшими, а часть принятыми и устоявшимися сегодня мы поговорим об основных двух подходах табличном и блочном, а остальных.

При желании вы сможете прочитать на портале. Википедия ссылке в дополнительных материалах к уроку табличным подход об этом подходе. Я уже упоминал в предыдущих лекциях данного цикла более того на занятиях я разбирал домашнее задание связанное с верстка простого макета используя табличные подход. Давайте остановимся на данном подходе и его более подробно таблицы являются удобным инструментом для выравнивания блока в HTML таблица делится на строки которые в свою очередь делится на ячейки таким образом можно создавать неограниченное количество неограниченное число мячей в каждой как я и говорил в предыдущих лекциях. В данный подход к верстке был актуальным дал появление технологии Services status устаревший с 2011 года как только консорциум всемирной паутины поддержал стандарт с на спину табличного подхода блочный о котором мы поговорим немного позднее главным недостатком данного подхода является то, что страница не будет отображено до тех пор пока не будет за закрывающий тег таблица, что сказывается на производительности также к недостаткам можно отнести избыток куда усложняющий его понимании в рамках курса мы будем рассматривать примеры табличного подхода напрашивается вопрос зачем устаревший подход. Дело в том, что для понимания на данный момент актуального блочного подхода необходимы знания каскадных таблиц стилей CSS — это огромная технология которую мы будем изучать в отдельном курсе данной курс разработан таким образом чтобы фундаментальной изучить HTML изолированным от все способом после изучения данного курса можно свободно переходить к изучению технологии исчез разбору современного научного подхода к верстке также в академических целях изучения табличного подхода. Я считаю необходимым более того даже в наше время верстальщик может встретить в Legacy который из табличный стиль научный подход. Блочная верстка — это такая верстка которая производится при помощи тега div и описывающая их множество используя каскадные таблицы стилей так появился в следствии сознательного отказа консорциума всемирной паутиной от подхода верстка слоями от того чтобы создать она так ну с поддержкой сердца с духи остальных тегов с помощью блочной верстки реализует концепцию семантической верстки и семантически мы уже. Немного говорили на предыдущих занятиях виды разметки различают два основных вида разметки логическое физическая например жирный текст можно получить. Как с помощью tgb так и с помощью. Т2 стронг в первом случае жирное начертание продаются явным образом, а во втором на текст производится логическое ударение которое обычно отображается жирным шрифтом иначе говоря при первом подходе ориентируются на внешний вид, а во втором на логическое предназначение то есть текст заключённый между открывающим и закрывающим тегом Strong определяет важность содержимого в некотором контексте говоря тем самым, что — это важный текст и на него стоит обратить особое внимание типы макетов существуют три основных и распространённых подхода к верстке ширина резиновая шина адаптивный макет фиксированная ширина сайт отображается с одинаковой шириной вне зависимости от ширины окна браузера соответственно на широкоформатных экранах такие сайты имеют большие поля по краям. А на мелких экранах смартфонов показывают прокрутку в одной из предыдущих реакции данного цикла я давал задание на верху простого макета используя табличные подход и рассматривал данного домашнего задания в рамках разбор данного задания использовался именно этот подход резиновая полоса сайта растягивается на весь экран занимай место пропорционально настройка верстальщика. Давайте попробуем реализовать простенький макет используя резиновую ширину. Создайте документ HTML формат. А я подготовила страницу со стандартной структурой создаём таблицу укажем границу в 1 пиксель для того чтобы сделать макет резиновые достаточно указать его ширину в процентном соотношении нашем случае — это 100%, что потому, что мы хотим чтобы наш пакет по умолчанию был растянут на всю ширину экрана создадим строку с ячейкой и поместим туда некоторое содержимое. Открой документ браузере. Открой панель разработчиков — это можно нажав на клавишу F12 включим режим адаптивного дизайна. Попробуй изменить ширину в большую и меньшую сторону. Как видим наш макет словно резиновый растягивается и сужается в зависит от ширины окна браузера адаптивный макет адаптивный тип макета — это дизайн который так скажем трансформируется под размер экрана в том числе может происходить. Перестройка блоков с одного места надо или экзамена блоками отображаемым не только при определенном разрешении данной тип пакета подразумевает блочный подход к верстке.

0 комментариев
0

Читайте также