Предлагаю закрепить тему для добавки интересных и, что самое главное, правильных решений составления общей визуальной части / структуры сайта. Улучшение, оптимизация и управление вниманием пользователя.
Вот позавчера писал сайтец, нужно было сделать меню из 6 пунктов, которые размещенны вертикально: Придумал такой эффект: рисуем красивых 6 спрайтов для 6 кнопочек, причем так, что на одном спрайте размещено два варианта кнопки - один это нажатая (например, цветом другим; с нулевого по сотый пиксель по оси X), и второй - в обычном состоянии (с сотого по 200 пиксель). Получаем что-то типа: О компанииО компании Только в виде картинки. Теперь делаем для каждой кнопки класс CSS для показа только "неактивированной" части (100 - 200px): HTML: .mybutton { width: 100px; height: 30px; background-image: url(./menu_sprite_1.png); background-repeat: no-repeat; background-position: -100px 0; } И допишем простой скрипт на jQuery который анимированно смещает фон в активированную часть спрайта + создает пространство воркуг нажатой кнопки: HTML: function moveButton(buttonId) { $('#' + buttonId).animate( { marginTop: '90px', marginBottom: '90px' }, 300, function() { $('#' + buttonId).animate( { marginTop: '45px', marginBottom: '45px' }, 300 ); } ); $('#' + buttonId).animate({'backgroundPosition': '0px'}, 600); }
Совет номер два: добавляйте тени для блоков, таблиц и прочих слоев, тогда веб несмотрится простым тетрисом из кубиков и квадратиков, а чувствуется обьем. Тень создается просто - открываем картинку / создаем на 100 пикселей больше по ширине и высоте чем сам блок. Например, блок у нас будет синего цвета (на нем, например, будут комментарии). Теперь размещаем синий прямоугольник по центру холста так, чтобы был отступ со всех сторон по 50 пикселей. Теперь копируем слой в графическом редакторе и помещаем его ПОД этот созданный прямоугольник. Применяем к созданному слою инверцию цветов (ну изменение с черного на белый, грубо говоря). Добавляем эффект размытости. И что же мы видим: у нас появились тени (можно обрезать именно части тени, а можно использовать как фон созданное изображение целиком). Шаг 1: создаем прямоугольник, которму хотим добавить тень: Шаг 2: добавим слой под него, чтобы можно было лучше разглядеть потом тень: Шаг 3: скопируем слой с прямоугольником, поместим его под главный слой с прямоугольником и будем работать именно с копией: Шаг 4: инвертируем цвета копии: Шаг 5: для лучше видимости желтой тени я изменил фон на черный: Шаг 6: добавляем размытось слою с инвертированной копией прямоугольника => получаем размытость краев: Шаг 7: можно также перевести полученный желтый прямоугольник в чернобелый вид, и размывать его в серый оттенок, который видно даже на белом фоне:
Незабывайте про анкоры! Гораздо удобнее ориентироваться на странице (особенно, когда много контента), когда нужная облась выделена анкором и на него можно сделать ссылку: http://site.com/gallery.php#image_152
Футер - отдельная тема, но, на мой взгляд, это идеальное место показать креативность веба, если она уместна. Замечал также, что неплохо смотрится в футере встроенная лента твиттера или какие то последние новости RSS.
Фиксированная реклама. Если Ваш сайт информационный и человек задерживается на странице какое-то время, причем высота страницы не помещается в высоту экрана, то место для рекламы идеально справа или слева в виде продолговатого баннера, который плавает за страницей благодаря свойству CSS "position: fixed" у, например, контейнера div. Где бы ни был пользователь на странице - реклама будет ехать за ним, только нужно встраивать рекламный div аккуратно, чтобы контент-часть и рекламный контейнер не заходили друг на друга.
Это общие статьи, тем более в перемешку. Я же хотел сделать акцент именно на правильном "вкусе", когда пишешь веб. Я не говорю, что мой вкус идеален, но то, что первое пришло на ум - написал. Просто иногда различные "правила хорошего тона" забываются, а некоторые придумываешь сам, видишь, что смотрится офигенно, но нигде раньше такого не видел - почему бы не поделиться. А вообще того треда не видел, если данный топик лишний - ну чтож, удаляйте.
Спасибо за прием на jQuery, возьму на вооружение А по поводу плавающего баннера в div'е - не будет ли это навязчивой рекламой, по-моему такой может только снизить визуальное восприятие сайта.
