|
||||||||||||
Меню сайта
Реклама на сайте:
|
Блочная верстка сайтаВёрстка сайта. Статья №3 При блочной вёрстке существенное значение уделяется универсальному тегу DIV, который выполняет множество функций. Блоки DIV, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего». Единственный минус блочной вёрстки — сделанные сайты могут по-разному отображаться в браузерах. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любых браузерах.В настоящее время разработчики популярных браузеров стали придерживаться спецификаций HTML и CSS, что сильно облегчило жизнь создателям сайтов, поскольку это снизило время на отладку сайта в разных браузерах.
Сущность блочной вёрстки сайтаНа данный момент самый популярный тип верстки — это блочная верстка. При таком подходе вся веб-страница состоит из блоков, а если говорить профессиональным языком, то из тега DIV. Так же это можно назвать “слоями” так как элементы могут входить друг в друга, тем самым образовывая иерархическую структуру. Тег DIV служит основным строительным элементом который в свою очередь содержит другие элементы страницы такие как текст и изображение. Основными достоинствами блочной верстки является:
Принципы блочной вёрсткиПервое правило — конечно же, повсеместное использование тега DIV, который можно назвать базовым элементом блочной структуры. Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. То есть, HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Третье правило — таблицы нужно использовать не везде, а по необходимости, при этом полностью отказываться от них так же странно, как и применять не к месту. Что бы понять основные принципы построения веб-страницы основывающейся на блочной верстке давайте попробуем потренироваться на практике. Пример блочной вёрсткиИтак, у нас есть макет (см. рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. На примере показано что он состоит из 4 элементов. Сразу будем учиться использовать HTML5 по этому наша разметка будет состоять из: 1) — header 2) — aside 3) — div id=”content” и 4) — footer. Вы должны понять, что данные элементы ни чем не отличаются от обычного тега div и используются только для удобства чтения кода. В результате у нас получиться такая разметка: Код в документе HTML <header> <!-- header (шапка сайта) --> </header> <aside> <!-- aside (Блок навигации) --> </aside> <div id="content"> <!-- div (Основной контент страницы) --> </div> <footer> <!-- footer (низ сайта) --> </footer> <div id="content"> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри table. Назначение дочерних контейнеров должно быть понятно Теперь добавим файл CSS, код которого приведён ниже и наши контейнеры примут необходимую форму Код в документе HTML header { width: 400px; height: 40px; background: Grey; } aside { display: inline-block; width: 132px; height: 184px; background: #0026FF; } #content { display: inline-block; width: 230px; height: 184px; background: #0026FF; } footer { width: 400px; height: 40px; background: #808080; } Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу.
Читайте также:
|