.

Краткий экскурс в HTML

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

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

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

Создавая масштабируемые таблицы, очень трудно предусмотреть все возможные размеры окна браузера, где могут располагаться макеты ваших страниц. Например, у вас есть колонка текста. В одном случае текст будет слишком широким, а в другом — слишком УЗКИМ (рис. 14.1 и 14.2).

Дизайнер не должен забывать о непредсказуемости размеров окна браузера.

Например, если у пользователя слишком широкая диагональ экрана, как в мониторе Apple Cinema Display, дизайн фиксированной ширины будет просто смехотворным. Такой Web-сайт выглядит, как почтовая марка, расположенная в углу на белом фоне конверта (разве что вы предусмотрели для своего сайта фоновый рисунок). Альтернативным решением является динамическое изменение размера. Но такой вариант может оказаться еще хуже предыдущего, в случае если со, щржимое получится слишком растянутым.

ShowMagazine

The Impressionist win; again

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

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

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

Задайте процентное отношение ширины таблицы к ширине окна браузера. При использовании масштабируемой таблицы вы можете установить процентное соотношение ширины таблицы к ширине окна браузера. Например, если вы зададите 80%-ное соотношение, содержимое таблицы по- прежнему будет смещаться, но, по крайней мере, всегда будет соблюден правильный отступ (а если таблица центрирована, то отступ будет одинаковым со всех сторон).

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

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

Для размещения CSS-слоя на Web-странице определите конкретные координаты X и Y. Например, если обе координаты X и Y равны 25, то левый верхний угол CSS-слоя начинается на расстоянии 25 пикселей от верхнего края страницы и на расстоянии 25 пикселей — от левого.

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

<div id="Layerl" style="position:absolute; left:70px;

btop:50px; width:150px; height:130px;

bz - index: 1"> Вставьте здесь графику, текст или что-то еще </div>

В данном примере CSS-слой с именем Layerl расположен на расстоянии 70 у РХЭ \ пикселей от левого края страницы и 50 пикселей — от верхнего. Хочу обратить ваше внимание на атрибут z - index. Он определяет порядок перекрытия слоя- ^ОБНО^ МИ друг друга. Слой с более высоким значением z- index будет располагаться выше слоя с более низким значением z - index. Это предоставляет уникальную возможность создать эффект наложения текстовых и графических элементов.

В данном примере используется абсолютное значение атрибута position, но вы можете задать и относительное значение. Следующий код задает смещение тега <div> на 20% относительно левого края и на 10% относительно верхнего края окна браузера. По мере того как вы увеличиваете или уменьшаете окно браузера, тег <div> будет всегда располагаться на отметке 20% от левого края окна.

Однако в CSS есть свои недостатки. В более старых браузерах — в частности, в Netscape Navigator— возникают проблемы с интерпретацией стилей. Если после загрузки страницы с CSS-слоями пользователь меняет размер окна браузера, может возникнуть ситуация, когда слои окажутся сдвинутыми и нарушится форматирование текста. Для корректировки макета пользователю понадобится перезагрузить Web-страницу с помощью кнопки Refresh (Обновить) или Reload (Перезагрузить). Интересно, что программа Dreamweaver располагает специальной командой для решения проблемы размещения слоев. Эта команда называется Add/Remove Netscape Resize Fix (Добавить/удалить коррекцию для Netscape) и доступна в меню Commands (Команды).

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



Hosting Ukraine
Hosting Ukraine


Предложить

Дата Окончане проекта

Сумма проекта

×