Websovet | Полезные советы по созданию веб сайтов

Меню в виде закладок без использования изображений

Дата: 10.11.2009 | Рубрики: Верстка | 1 Комментарий

Меню в виде закладок, или выражаясь по буржуйски — табы (tabs), обычно изготавливают с применением различных фоновых картинок. Однако можно вполне обойтись и обычным набором правил в файле CSS. Особенно данный способ понравится любителям минимализма. Как говорится — ~~дешево и сердито~~ просто и со вкусом!

Принцип построения такого меню также достаточно прост. Идея в следующем: всему блоку меню задается нижний бордер толщиной в 1 пиксель какого-либо цвета. Далее каждому пункту списка задается таким же цветом верхний и оба боковых бордера. А нижнему задаем цвет, совпадающий с цветом фона. В нашем случае белый.

#menu { list-style-type: none; border-bottom: 1px solid #999; } #menu li { display: inline; padding: 5px 5px 0; margin: 0 10px 0 0; border-top: 1px solid #999; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #fff; }

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

Не забывайте только в правилах прописывать отсутствие маркеров у списка (list-style-type: none;) и сами пункты вытягивать в линию, а не в столбик (display: inline;)

Смотреть пример

Верстальщицкий гламур или нет предела совершенству

Дата: 02.11.2009 | Рубрики: Обсуждения | Комментарии (5)

Тэги: Верстка, Обсуждения

Проект “Моя гитарная школа” в данный момент времени находится в стадии “рисунок-карандашиком-по-бумаге”. Поэтому, пока суть да дело, несколько отвлечемся от циклов статей и поговорим о такой спорной в вебмастерской практике вещи как стремление к совершенству в плане верстки веб-сайтов.

Почему спорной? Кто хоть немного владеет ситуацией о чем, собственно, идет речь, тот в курсе, что элементарная очевидность работы верстальщика имеет место быть отнюдь не столь очевидной, как работа, к примеру, веб-дизайнера. И это понятно. “Живопись” последнего — это то, что видит всяк входящий на сайт. Творчество же верстальщика скрыто хитроумными браузерами, дабы не вызывать мозговой шок у непосвященных.

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

В сети уже наверняка есть масса подобных тем. От простых советов делать хорошо, до холиваров на уровне “div – зашибись, а table — ацтой!” Все это, конечно же, интересно и в чем-то даже прикольно. Человек ищущий (а таковым быть по статусу обязан каждый сознательный веб-мастер) почитает, проникнется, приколется и выудит что-то полезное, отправив весь шлак фтопку. Иной же сильно озадачится. Особенно такой банальной сентенцией как “а фигли?” Ведь и правда, если пользователь не видит кода, то мож ну его нафик извращаться? Тупо набросать на странице все в кучу, и пусть браузеры сами разруливают, где тут что. Все равно все будет более или менее понятно на странице.

Так-то оно так. Можно даже не заморачиваться по поводу смены алгоритмов работы браузеров в будущем или таким ёмким и, вместе с тем, жутко неконкретным понятием как “юзабилити”. Ведь никто на самом деле не знает, что будет лет эдак через 5 – 10. Возможно, браузеры будут более строгими в отношении того же доктайпа (DOCTYPE), а может им станет это все глубоко до лампочки. И никто не скажет точно на 100% как на самом деле удобно, ибо каждому челу своя прихоть.

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

Есть уже масса готовых шпаргалок на данную тему. От подробнейших раскладок по свойствам тех или иных элементов верстки, до универсальных фреймворков, предоставляющих кучку готовых настроек, пусть даже и с некоторым избытком. Это все, конечно, замечательно и где-то даже нужно. Но пока ты сам сознательно не профильтруешь через самое себя, что ты вообще такое кодируешь, то оно так и останется чем-то далеким и виртуальным. А в результате — пара глюков на странице, и верстальщик в попе. Поэтому самый простой и действенный совет от Вебсовета: делай только то, что понимаешь. Если не уловил смысл относительного позиционирования или какого-нибудь z-indexа, то не лепи их куда ни попадя, услышав где-то, что это может сработать. Оно, быть может, и сработает, но ты этого не догонишь, а значит, при случае, и не сможешь поправить, если что.

Это не нравоучение. И не брюзжание бывалого версталы, в сотый раз тыкающего носом новичка в азбучные истины. Это призыв к дискуссии, если кто не понял. Вопрос прост и прозрачен: стоит ли вылизывать код страницы, или можно в чем-то пренебречь? Аргументы принимаются всякие: от категорически-апологетно-неумолимого “Нихт!”, до трансцендентального и хипповски-миросподвижнического “да-ну-нах-мир-вам-братья!” Но только с объяснением своей точки зрения. Цумволь!

Кто красивее, умнее и достойнее всех выскажется за идеальный код, получит ссылку в постовом на халяву. А если у кого-то мнение выльется в текст букавак на 1000, то милости прошу в гости с гостевым же постом. Думаю, преимущества гостевых постов расписывать нет нужды. Кто знает, тот поймет, о чем речь.

Создание статичного сайта на Wordpress. | Часть 2

Дата: 20.10.2009 | Рубрики: WordPress | Комментарии (13)

Тэги: WordPress, Wordpress 2.3.3, Вордпресс, плагины, статичный сайт на Wordpress

Продолжим ваять наш статичный сайт на движке Wordpress. Но для начала пару слов о версии самого движка. Я не консерватор и все новое воспринимаю достаточно положительно. А если оно к тому же еще и полезно, то вообще на ура. Однако в случае с версиями движка WP дело обстоит не так бодро. Не секрет, что сейчас сложилась такая ситуация, когда каждая новая версия весит все больше, а ресурсов требует уже просто непомерно много. К тому же движок постепенно обрастает сомнительными новшествами, которые вряд ли будут востребованы большинством пользователей.

Безопасность? Хм… Чем сложнее система, тем больше дыр. А сломать при желании можно что угодно.

Медиа? Так уже полным полно спец плагинов, расширяющих и без того немалый функционал движка.

В общем, ежели подходить к сему делу прагматично, а в силу вышеозначенной темы статьи принять как постулат, что раз уж упрощать сайт до статики, то и ни к чему брать мега-гаубицу последней модели, то я предлагаю ограничиться версией движка за номером 2.3.3. Как самой стабильной из данной ветки и вполне себе самодостаточной. Скачать буржуйскую версию вы можете на официальном сайте wordpress.org или русифицированный Wordpress 2.3.3 у меня на Вебсовете. В моей версии слегка прибрано в админской движка, чтобы при заходе туда не наблюдалась куча объяв о новостях и прочих “радостях”. Обратите внимание, что в комплекте нет пресловутого файла wp-config-sample.php, который необходимо править, а затем еще и переименовывать в просто wp-config.php. Все уже переименовано. Вам достаточно лишь открыть файл wp-config.php и вписать туда свои данные по БД.

Читать полностью →