Добрый день, уважаемые читатели моего блога. Сегодня я продолжаю обучение верстке и на этот раз я решил организовать небольшой цикл по способам верстки.
Сразу хочу сказать, что с самого начала я отчасти ввел вас в заблуждение, поскольку на самом деле способов верстки уже 4, но самый новый способ, который пришел к нам с html5 пока используется не столь активно и только начинает свое развитие. поэтому я не буду его затрагивать сейчас.
Ну что же, для начала я расскажу вам, какие же способы верстки мы будем изучать (либо просто затронем). К ним относится верстка фреймами, таблицами и дивами (div-блоками). Именно в таком порядке их использовали раньше. Если коротко про каждый метод, то фреймы - это сайт в сайте, таблицы - это когда весь сайт представляет собой огромную таблицу, в ячейки которой набиты элементы сайта, а дивы - это особые блоки, которые мы вольны размещать как хотим и помещать в них что хотим.
А сейчас подробнее остановимся на всех видах верстки. Для начала самый первый вид: верстка на фреймах. Представьте, вы заходите на сайт и видите, что у меню есть полоса прокрутки а само меню выглядит так, как-будто это отдельный сайт. Такой способ реализации называется фреймом (окном). Размещая на сайте такие окна, вы можете впихнуть кучу информации в маленькое окно. Такой способ верстки уже никто не использует, поскольку он не только считается устаревшим, но и просто имеет немного странный код, так для формирования фреймов вместо (!) тега <body> нужно поместить тег <frameset> (которые надо закрывать), что означает, что фактически, весь код придется писать исключительно под фреймы. Затем все помещается в теги <frame> (не надо закрывать). Огромным минусом этого способа является то, что хоть вы и можете все помещать в маленький промежуток, смотреться все это будет просто ужасно.
Следующий, довольно известный способ, это верстка таблицами. Чтобы вы могли представить, что это такое, вспомните Microsoft Office, а именно программу Excel. Таблицы в html, это те же таблицы экселя. Размеры каждой ячейки можно редактировать как вам захочется. Нужные ячейки можно объединять, разъединять, им можно задать размеры, которые будут статичны, а можно сделать так, чтобы таблица подстраивалась под браузер. И вроде все хорошо, но есть один минус - размеры кода. Для того, чтобы создать таблицу, вы должны поместить в любую часть вашего сайта (внутри тега <body> естественно) закрывающийся тег <table>. Браузер воспримет его и тут же создаст таблицу. Но не все так просто. Любая таблица состоит из строк и столбцов, которые вам и придется прописывать отдельно. Тег <tr> отвечает за создание строки, а тег <td> - столбца. Сначала вы создаете новую строку, затем разделяете таблицу на нужное количество столбцов.При этом, при создании таблицы, вы должны закрывать все теги в порядке обратном открытию. Для примера, покажу вам код небольшой таблички:
<table border="1">
<tr>
<td>Количество ячеек в строке:</td>
<td>2 + 1 пустая</td>
</tr>
<tr>
<td>Ну и тут одна</td>
</tr>
</table>
Здесь мы создали две строки и разбили их на две части. Так же вы можете заметить, что в теге <table> я написал border="1". То что я написал, это свойство таблицы. Вообще свойства пишутся в тег, либо заносятся в css-файл, а потом присваиваются тегу. В данном случае, я присвоил нашей таблице свойство border, которое отвечает за границы таблички. Вообще, обычно эти границы убирают, или просто не прописывают данное свойство, а браузер автоматически убирает их, но в данном случае, я использовал его, что продемонстрировать вам, как выглядит табличка, со всеми границами. Подробнее на создании таблиц и их свойствах я напишу позже.
Ну вот мы и пришли к последнему способу, на котором сейчас пишет довольно много людей. Это div-блоки. Верстка на дивах напоминает верстку на фреймах, но все гораздо проще. Для создания div-блока, нужно в любом месте сайта (помним, что пишется все в теге <body>) написать закрывающийся тег <div> и все, див-блок готов. Далее в него вы можете помещать все, что вам захочется как и во фрейм, но при этом див не будет отображаться, как будто его и нет. Вообще верстка на дивах напоминает смесь фреймов и таблиц. Небольшой код позволяет вам сделать блок, с которым легко работать. Особенность данного блока - он может быть расположен как статично, так и он может быть свободно-позиционируемым, то есть вы можете "набросать" блоки по сайту как вам захочется.
Ну что же, я описал вам, что же представляют данные способы написания сайтов, объяснил как создавать фреймы, таблицы и div-блоки. В следующий раз, в данном цикле, я напишу про свойства таблиц и о том, как можно с помощью одной большой таблицы сделать приличный сайт.
Подписаться на:
Комментарии к сообщению (Atom)
Комментариев нет:
Отправить комментарий