Приёмы табличной верстки

· При верстки с помощью таблиц желательно разбить код на несколько таблиц. Во-первых, потому что так проще писать разметку. Во-вторых, так браузер быстрее выведет на экран часть страницы, не дожидаясь пока страница загрузится полностью.

· Необходимо задавать размеры графическим объектам, даже если размеры совпадают с реальными, чтобы браузер мог "просчитать" страницу и зарезервировать место под каждое изображение. Такая страница в процессе загрузки не будет "прыгать" и "дёргаться".

· Необходимо указывать размеры ячеек таблицы, даже если они совпадают с размерами помещённых в них рисунков: для чёткой стыковки краёв изображений, помещённых внутрь ячеек.

· Необходимо удалить лишние пробелы и символы перевода строк из HTML-кода, если необходимо расположить изображение вплотную друг к другу.

· В процессе отладки кода нужно включать отображение границ таблицы, чтобы лучше в ней ориентироваться.

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

· Нужно помнить, что несмотря на заданную ширину ячеек в пикселях, ячейки таблицы могут раздвигаться, чтобы вместить содержимое, выходящее за пределы указанной ширины, поэтому надо аккуратно пользоваться неразрывными пробелами и большими рисунками.

46.Блочная верстка сайта. Блочная модель web-страницы. Блочные элементы. Строчные элементы. Свойство display. Позиционирование элементов. Слои. Плавающие элементы. Врезки. Плавающие разделы.

Блок — это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы. Содержимым блока может быть что угодно — кусок текста, картинка, список, форма для заполнения, меню навигации и т.п. Блоки можно описывать, опираясь на следующие характеристики:

Рамка (border) — это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

Поля (padding) — отделяют содержимое блока от его рамки, чтобы текст, например, не был “впритык” к стенкам блока.

Отступы (margin) — это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Блоки, как и таблицы — это элементы всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как “обтекание” (float).

В последнее время блочная верстка сайтов или, как ее еще называют, div верстка, стала очень популярной. Большинство современных сайтов строятся именно по этой технологии. Суть ее заключается в том, что базовый каркас (шаблон) страницы формируется из блоков, в качестве которых выступает html тег DIV . С помощью стилей эти блоки позиционируются на странице определенным образом, формируя каркас, который уже затем наполняют содержимым.

Сайдбар для сайта (sidebar в дословном переводе с английского языка обозначает «боковая панель») – это отделенная от других элементов панель, в которой наиболее часто располагается навигационное меню, список категорий, ссылки, различные рейтинги, контекстная и иная реклама, а также счетчики посещаемости. В сайдбарах отображаются виджеты. Каждый виджет предназначен для определенной задачи. В сайдбаре виджетов может быть неограниченное количество.

Копирайт — «copywriting» - написание уникальных текстов для веб- сайтов. Еще один вид копирайтинга — рекламные тексты.

Сайдбар обычно представляет собой колонку, находящуюся справа или слева от основного содержимого. Иногда сайдбаром называют также панели, располагающиеся внизу и вверху сайта в один или несколько столбиков.

Футеры (от англ. footer - нижняя часть) - это название нижних частей сайтов. В рунете их еще называют “подвалами сайтов”.

В современном веб-дизайне футеры являются важным элементом. На футер часто обращают внимание посетители, поэтому многие веб-дизайнеры стремятся оформить их максимально интересно, чтобы они привлекали взгляды и несли нужную информацию.

В html различают элементы блочные и строчные. Причем блочные элементы это как бы отдельная структурная единица, которая всегда отделяется абзацными отступами. Т.е. нельзя расположить два блочных элемента на одной строке. Примером блоков в html могут служить элементы H1-Н6, Р, DIV. А строчные элементы не создают как-бы отдельной структурной единицы, не отделяются абзацными отступами, и например два строчных элемента могут без проблем расположиться на одной строке. Примером могут быть элементы strong , I.

Блоки в HTML задаются с помощью тега DIV. Его атибуты :

id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например “header” (про кавычки не забываем), или “footer“. Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением “header” (шапка) одни настройки, а для подвала “footer” совсем другие, и браузер верно распознает, что вот этот абзац, обозначенный тэгом р относится к “шапке” и будет набран крупным и красным шрифтом, а вот этот к “подвалу” и будет мелким и серым. И никакой путаницы!

class — атрибут, позволяющий одно и то же значение придать нескольким элементам. Например всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать.

Поиск по сайту: