Что такое верстка слоями?

AnnSeo · 23 ноября, 2020

Кто может рассказать что такое верстка слоями? в чем ее особенность

submaster · 23 ноября, 2020

@AnnSeo чтобы рассказать всю историю, нам нужно сесть рядышком, с пивком и провести несколько часов вместе.

Попробую коротко.
HTML, язык не программирования, а гиперразметки страницы появился в эру 10-14 дюймовых монохромных мониторов.
Тогда, в HTML 2 отделили голову от тела. Появились отдельные разделы:

<head>
</head>
<body>
</body>

В HTML3 появился тег DIV division-раздел. Но использовался он мало.

Вся вёрстка была табличной.
Т.е. размечали не как сейчас в DIV`ах, а в таблицах и встроенных таблицах, как в Ворде.
Но экраны менялись, не только по диагонали, но и по разрешению, т.е. по количеству отображаемых точек на дюйм.
И тут сайты поползли. Если таблица ограничивалась по ширине, то страница казалась маленькой, если нет, то расползалась по всей ширине.

И в HTML4 слои (DIV), стали занимать положение контейнеров, ограничивающих пространство.
Параллельно развивались JS и CSS.

К концу HTML4, примерно 2006 год, большее количество разработок ушло в послойную вёрстку, т.е. не табличную.
А в 2008 году был анонсирован HTML4 и CSS3, которые добавляют теги и правила до сих пор.

Поэтому сейчас редко можно встретить сайт с табличной вёрсткой.

Даже таблицы верстают не как TABLE

<table>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

А послойно

<style>
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}
</style>

<div class="divTable blueTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>
</div>

В годах мог немного ошибиться. ))
В 2008 анонсировали HTML5.

Подумал, что ещё больше запутаю ТС.

Решил пойти от обратного.

@AnnSeo , а какие типы вёрсток вы ещё знаете?

AnnSeo · 24 ноября, 2020

11 часов назад, submaster сказал:

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

в моем варианте было бы не пиво а чай))

11 часов назад, submaster сказал:

@AnnSeo , а какие типы вёрсток вы ещё знаете?

я вот знаю только 1 - табличную)

теперь буду знать больше, спасибо!

zanuda · 24 ноября, 2020

8 часов назад, AnnSeo сказал:

в моем варианте было бы не пиво а чай))

"Чай не водка - много не выпьешь!" - эх, ностальгия, была у нас в лабе такая ходячая фраза, в доисторические времена; говорил мой в то время начальник, хотя, может, автором был и не он.

8 часов назад, AnnSeo сказал:

я вот знаю только 1 - табличную)

Я вот знаю про div'ы, но не более того. Мое основное занятие - постинг + мастер на все руки, типа немножко красивого формата в статье, тайтлы/дескрипшины на мое усмтрение, соц.медия там. Все за пару часов в неделю, посему ничего серьезного. До начала года сайт был на старой теме, вордпресс, с фиксированной шириной. Посему, если что-то было надо, делалось в тблицах (только посты, тама обновлялась и не трогалась). После коментариев где-то на форуме, хохмы ради несколько простеньких таблиц было сделано на дивах. Ну вот, а сейчас перешли на адаптивную тему, по хорошему там надо все старые посты перепроверить. Ну, с моиму парой часов в неделю, это будет долго. А варианты моих развлечений с дивами буду где-нибудь здесь на проверку выставлять...

web951hj · 24 июня, 2021

Да, верстка таблицами это <table></table>, а слоями это <div></div>

Войти

Что такое верстка слоями?

Рекомендуемые сообщения

AnnSeo 212

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

submaster 126

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

AnnSeo 212

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

zanuda 74

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

web951hj 0

Поделиться сообщением

Ссылка на сообщение

Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Создать учетную запись

Войти

Быстрые ссылки

О проекте

Администрация

Сайт

Активность