Вёрстка с помощью таблиц
Браузеры преднамеренно расценивают таблицу как один объект, из-за чего содержимое таблицы не отображается до тех пор, пока оно целиком не будет загружено на локальный компьютер. При использовании таблицы в качестве каркаса для размещения элементов веб-страницы, её исходное преимущество обращается в недостаток, поскольку приводит к задержке вывода содержимого. Следует учитывать также и растущий объем веб-страниц при активном использовании таблиц, особенно в случае их вложенности друг в друга. Всё это приводит к тому, что табличная верстка вызывает ненужные задержки вывода информации в браузере. Пример табличной вёрстки (рис.2) и (табл.1).
Рисунок 2 – Структура табличной вёрстки
Табл.1 - html-код для примера табличной вёрстки
Изначально сайты создавали табличным способом. Несмотря на то, что таким способом пользуются и до сих пор, этот метод верстки уже устарел. Основными причинами отхода от такого способа считается огромное количества кода, которое возникает вследствие описания каждой ячейки отдельными тегами. Также стоить заметить, что каждая ячейка обладает стенками, которые необходимо также описать. Это тоже значительно влияет на величину исходного кода. Мы сможем наполнить веб-страницу информацией, но при этом получим код, в котором, порой, невозможно разобраться. Вёрстка с помощью блоков (слоёв)
В отличие от табличного способа расположения данных блочная верстка возможна без четкой привязки каждого логического блока к определенной ячейке. Способ блочной верстки базируется на совершенно иных принципах расположения и взаимодействия. В данном случае каждый логический элемент (текст, картинка, таблица) рассматриваются в виде отдельного блока, и таким же способом размещаются на странице. Такое размещение известно как размещение естественным потоком. Характерным моментом для блочной верстки является то, что блоки, как правило, должны располагаться по очереди - один за другим и четко разделяться между собой. Расположение в одной строке возможно, но оно используется только в некоторых случаях, когда возникает потребность добиться особого эффекта. В этом случае мы можем обойтись без громоздкой основы – все элементы страницы кучно расположены в одном месте, а количество кода, описывающего отдельно каждую ячейку, уменьшается в разы. Код обычной веб-страницы, которая версталась табличным способом, больше в 4-5 раз кода страницы, которая создавалась блочным методом. Кроме всего этого код блочного значительно проще в понимании, с ним можно разобраться за значительно меньшее время. Под понятием блок в общем случае имеют в виду элементарную прямоугольную область. Для указания атрибутов этой области существует ряд качеств, среди которых выделяют рамку, поля (контуры) и отступы. Наполнением блока может служить любая информация – изображение, текстовый фрагмент или что-либо другое. В общем случае блок представляется следующей структурой (рис.3):
Рисунок 3 – Блочная структура вёрстки
Он состоит из некоторых основных частей: Рамка или border. Для этой области возможно определить некоторые качества – цвет, вид, толщина. Поле или padding — используется для размещения информации в блоке, чтобы он правильно располагался в контуре. Отступы или margin — это размер расстояния между отдельно идущими блоками. С помощью этого элемента можно размещать блоки на заданном расстоянии друг от друга. Наполнение блока, к примеру, рисунок обязательно находится в рамке, которая может иметь различный вид, вплоть до невидимого. Кроме этого изображение тоже может располагаться в контуре различными способами. Оно может быть придвинуто вплотную или располагаться на определенном расстоянии от него. Рамка, в свою очередь тоже имеет расстояние от следующей рамки. Таким способом можно легко определять размещение блоков на странице и между собой. Параметры размещения определяются цифровыми показателями. Основой конструкции языка является тэг. Они делятся на теги, используемые для открытия и закрытия. Это элементарная частица, которая используется для построения страницы. Каждый тэг имеет свое четкое назначение. Как вариант – тэг p, используемый для обозначения абзаца, он в любом случае будет иметь следующий вид:
< p> Текстовое наполнение.< /p>
Характерным символом, который используется практически в каждом тэге, являются угловые скобки. Из примера видно, что в элементе кода присутствует и открывающий, и закрывающий тег. Тег для закрытия обладает косой чертой, наклоненной вправо, ее еще называют «слеш». Принципиально, что черта должна быть наклонена именно вправо. Вместе с тем стоит заметить, что не все тэги имеют тэг для закрытия. Примером может служить тэг img, который используется для размещения изображений. Но для соответствия спецификации использования XHTML, перед закрывающей скобкой все-таки добавляют пробел и слеш. Это имеет приблизительно такой вид:
< img src=" images/kartinka.jpg" alt=" " />
По сравнению с основной массой тэгов, div используется не для четкого определения, а для разметки области. Тэг одновременно может включать в семя множество различных блоков с различным содержанием. В качестве функциональной области можно рассматривать заголовок, элементы навигации, элементы основного наполнения и т.п. Как и у множества тэгов у этого есть атрибуты. Атрибут в общем понимании подразумевается как понятие, характеризирующее тэг. Рассмотрим его способности на примере тэга для картинки:
< img src=" images/kartinka.jpg" width=" 300px" height=" 100px" alt=" Рисунок" />
В этом примере тег имеет следующие атрибуты - src, width, height, alt. Численное представления указывается в кавычках – это тоже является важным моментом. Если рассмотреть элемент кода, то можно с легкостью определить, что обозначают атрибуты – изображение используется с каталога Images, его высота составляет 100 пикселей, а ширина – 300. Текст добавляется с целью информативности (он появляется при наведении курсора на изображение). Это делается для удобства пользователей, которые будут просматривать страницу. Если необходимости в информационном тексте нет, то атрибут остается пустым - alt=" ". Касательно тэга div, то для его представления в основном используют две ветки. В качестве атрибута, придающего единственное значение, использованное только единожды на странице, используется id. Примером может служить footer или header. Этим способом можно задать потом в листе стилей для тэга div с атрибутом id и значением header одни и те же настройки. Атрибутом, который способен одинаковое значение перенести на множество элементов является class. Это может помочь в том случае, если Вам необходимо каждый абзац «окантовать» рамкой одинаковой толщины или все изображения поместить в рамку определенного цвета. Для того чтобы разобраться более подробно, попытаемся создать web-страничку.
|
ПРАКТИЧЕСКАЯ РАБОТА
