Leaderboard

Перед любым web-дизайнером, не важно начинающий он или уже опытный, встаёт вопрос: а какой выбрать для создания сайта, резиновый или фиксированный? Для того, чтобы ответить на вопрос какой из них лучше давайте дадим им определение, что означает тот и другой дизайн. Резиновый – табличный дизайн в котором ширина столбца, рисунка задана в процентах. Фиксированный – табличный дизайн в котором ширина столбца или рисунка, оговорены точно, заданы в пикселях. Разберём недостатки и преимущества обоих видов дизайна. Фиксированный дизайн: Преимущества: - Такой дизайн гораздо легче разрабатывать, можно заранее предугадать, как будет выглядеть сайт. - У дизайнера есть возможность следить за размером строки. Недостатки: - На различных расширениях может появиться вертикальный скроллинг, у сайта существует только одно оптимальное разрешение экрана. Резиновый дизайн: Преимущества: - Сайт будет заполнять всё пространство браузера, что значительно улучшает его вид. - Сайт с таким дизайном будет одинаково смотреться на разных расширениях. Недостатки: - Разработка такого дизайна сплошной эксперимент, не знаешь, как поведёт себя вся структура сайта в тот или иной момент. - На больших расширениях возможно появление слишком длинных строк, что значительно утруждает читателя. В общем у каждого вида дизайна, есть свои минусы и плюсы какой выбрать решать вам. Я же могу посоветовать вам использовать смешанный дизайн, некоторые столбцы табличного дизайна задать в процентах а другие в пикселях. Также не стоит забывать, что в нынешнее время HTML используется не только для создания сайтов, но и для создания различных электронных книг, введения рассылок. И снова встает вопрос о типе дизайна… Решать вам, но более 90 % людей ведущих рассылку и пишущих книги, используют фиксированный дизайн. А это согласитесь большая цифра. Да и книга и рассылка как правило, должны напоминать страницу, э эффект страницы легче добиться фиксированным дизайном. Ваше мнение насчёт фиксированного и резинового дизайна можете изложить здесь в комментариях. И так, мы разобрали преимущества и недостатки обоих типов верстания веб страниц. Каждый вправе выбрать для себя своё но я наблюдал страницы сверстанные резиновым дизайном на мониторах с разрешением 1600 рх, картина была удручающая. Все элементы сайта расползались, текст становился не читабельным, графика перемешана с текстом. На такой сайт было страшно смотреть. Многие пользователи используют современные мониторы с разрешением по горизонтали 1600рх а в свойствах выставлено разрешение не более 1280рх. Давайте применим одну хитрость с резиновым дизайном и зафиксируем его в пределах 1152рх, это стандартный размер мониторов. Как следует поступить? К примеру, во многих темах оформления для задания ширины страницы, в таблицах стилей служит такой код: #wrapper { margin: 0 auto; background: #FFF; width: 944px; text-align: left; clear: both; } Как видно, это фиксированный размер страницы и составляет 944рх Если заменить width: 944рх; на width: 100%; то дизайн будет растягиваться на всю ширину экрана монитора при любых разрешениях последнего. Но как выше сказано, нам следует зафиксировать ширину в пределах 1152рх. Для этого выше указанный код заменяем на: #wrapper { margin: 0 auto; background: #FFF; max-width:1152px; width: 100%; width: expression (document.body.clientWidth > 1152? ‘1152px’: ‘100%’); text-align: left; clear: both; }И о ля-ля! Ваш сайт растягивается (имеет резиновый дизайн) до размеров в 1152рх а затем становится фиксированным. Выглядит такой сайт более пристойно чем при размере в 100%, поверте.И немного для самых начинающих. Не всё так просто как кажется на первый взгляд. Если в "Шапке сайта" используются простые фоновые элементы то растянуть не представляет сложности. Но когда применяется разработанная картинка с фиксированными размерами то при резиновом дизайне она не будет растягиваться и вы увидите по краям цвет фонового заполнения. Есть несколько способов избежать такого неприятного момента но это уже другая тема. Масштабируемый логотип (Шапка сайта) Последнее время всё часто встречаются случаи когда при изготовлении сайта применяется своя широкая картинка для верха сайт (шапка сайта). Вот здесь то и сталкиваются сайтостроители (дизайнеры) с неприятностью, картинку можно применить только к сайту с фиксированным дизайном. Как я уже неоднократно указывал, в пользовании очень много старых мониторов 17', имеющих разрешение по горизонтали 1024px а то и того меньше, таких осталось единицы. Современные мониторы позволяют просматривать html страницы вплоть до 1600px по горизонтали. Представте как будет смотреться картинка в шапке сайта если она сделана размером примерно 960px а размер сайта выбран не фиксированным, в 960px а установлено значение в 100%. Сайт растянется на всю ширину монитора а картинка так и останется в 960px по середине, если дизайнер задал ей положение по центру или прижата к левому краю страницы. Зрелище не из приятных. Выход есть!!! Для воплощение описываемого метода, а он очень прост, следует нарисовать шапку размером по ширине в пределах 1200px-1500px а по высоте от 100 до 300px, кому как нравится. Открываем файл index.html (на примере табличной темы оформления "csfever"), находим строку <td wight="100%" height="100" background="templates/$ThemeSel/images/logo.jpg"><a href="index.php" title="Главная"></td> и заменяем её на строку. Кстати, в оригинале ошибка со ссылкой на главную страницу, ну да ладно... <td wight="100%" height="auto"><a href="index.php" title="Главная"><img src="templates/$ThemeSel/images/logo.jpg" border="0" width="100%" /></a></td> Заметьте, размер логотипа-шапки height="100" заменён на height="auto" а сама картинка ставится не как background а как обыкновенная картинка. Теперь ваш сайт будет выглядеть приятно на мониторах от 800 и выше. И даже при размерах по ширине 640px!!! Вот два скриншота при разных разрешениях дисплея: В следующем дополнении постараюсь показать как всё это делается на слоях а пока экспериментируйте и у Вас всё получится. ВНИМАНИЕ!!! Статья писалась для другого движка но суть не меняется.

Подправил шаблон, чтобы окно изображений не съезжало. Может кому пригодится. admin/view/template/common/filemanager.tpl В стили перед тегом </style> добавляем класс: .clear { clear: both; } Далее ищем строки: <div id="column_left"></div> <div id="column_right"></div> и перед ними вставляем: <div class="clear"></div> Таким образом, браузер картинок будет всегда с новой строки, и вне зависимости от "толщины" меню ничего съезжать не будет!