Проверенный способ заработка

Макет страницы сайта: создание масштабируемой таблицы при помощи CSS

Создатели HTML не особенно заботились о дизайне. Более важным они считали практический аспект организации ссылок между текстовыми страницами. В результате вопросы дизайна оказались на втором плане. Однако дизайн стал неотъемлемой частью Web-индустрии, поэтому в HTML появились новые возможности для управления макетом страницы. Это и настройки табличных элементов, и применение каскадных таблиц стилей CSS. Последние позволяют управлять расположением содержимого на странице, а также форматировать элементы текста и графики по своему усмотрению.

Существует два способа задать ширину таблицы. Первый заключается в том, чтобы зафиксировать ширину таблицы, ограничив ее, например 800 пикселями. Это позволяет удовлетворить требования текущего стандарта при дизайне Web-сайтов. Второй способ состоит в том, чтобы изменять размер таблицы в зависимости от размеров окна браузера.

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

Несколько рекомендаций дизайнерам, которые помогут уменьшить негативные последствия, вызванные невозможностью предугадать размер окна браузера:
— Попытайтесь центрировать содержимое страниц своего Web-сайта. Если вы решили использовать вариант таблиц с фиксированной шириной, по крайней мере, содержимое будет отображаться по центру окна браузера, вместо того, чтобы маячить где-то в левом верхнем углу окна, как почтовая марка.
— Позаботьтесь о фоновом рисунке для своего сайта. С помощью CSS разместите на Web-странице мозаичный узор или фоновый рисунок. Таким образом, ваш хорошо продуманный дизайн будет отлично смотреться, даже если будут применены таблицы фиксированной ширины, а окно браузера достаточно велико.
— Задайте процентное отношение ширины таблицы к ширине окна браузера. При использовании масштабируемой таблицы вы можете установить процентное соотношение ширины таблицы к ширине окна браузера.

Хотя таблицы и позволяют управлять вашим макетом страницы, более правильным является задание конкретных координат для каждого элемента. Для этого вы можете воспользоваться CSS-тегами, которые также называют CSS-слоями. Эти теги могут быть успешно использованы как сами по себе, так и в комбинации с таблицами. Когда вы задаете CSS-слой, вы, по сути, создаете миниатюрную Web-страницу, внутри которой определяете текстовые элементы, кнопки, графические изображения или любые другие HTML-элементы.

В CSS используется целая система тегов со свойственным им синтаксисом, поэтому настоятельно рекомендуется воспользоваться одной из программ для создания сайтов, например Dreamweaver, которая поможет в написании основной части кода. Все, что вам останется сделать, — это вручную немного видоизменить некоторые свойства.

При использовании программного обеспечения для разработки сайтов можно легко перетащить графическое изображение CSS-слоя на любое удобное для вас место страницы. В окне программы будут автоматически обновляться заданные вами координаты X и Y. Также автоматически обновляется CSS-код в HTML. Если вы решили вручную вводить код CSS-слоя, координаты X и Y определяются как атрибут CSS-тега.

Однако в CSS есть свои недостатки. В более старых браузерах возникают проблемы с интерпретацией стилей. Если после загрузки страницы с CSS-слоями пользователь меняет размер окна браузера, может возникнуть ситуация, когда слои окажутся сдвинутыми и нарушится форматирование текста. Для корректировки макета пользователю понадобится перезагрузить Web-страницу с помощью кнопки Refresh или Reload.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *