Вебмастеринг

Обновка на Вебсовете

noreply@blogger.com (Игорь Квентор) — Fri, 31 Jul 2009 19:54:00 +0000

Пока полным ходом идет ~~Строительство коттеджей~~ написание новой книги, я между делом решил обновить шаблон на Вебсовете. Прошу любить и жаловать! :) Видок у него стал более обуржуиненный, в стиле современных тем для Вордпресс а ля Premium. Ну да лан.

Другое дело, что возникла непонятка с нынешним держателем (регистратором) домена. Эти чертовы индусы из Directi уперлись рогом и не хотят переносить услугу к нашим r01.ru, которые являются ихним же партнером! :( Отписали мне какую то лажу по типу: пришлите ваше фото, скан пачпорта и пр. Дебилы!

В общем с каждым годом наблюдаю я картину все более безрадостную в отношении услуг регистрации доменов. Чем дальше - тем маразм крепчает. Удобная отмазка на все времена: "Мы, бляхо, боремсу с порнухой и прочим мусором!" Ну-ну...

О новой книге по вебмастерингу

noreply@blogger.com (Игорь Квентор) — Tue, 16 Jun 2009 21:13:00 +0000

Так как в данный момент времени занимаюсь ~~строительством частного дома~~ написанием новой книги по вебмастерингу, то писать новые посты на Вебсовете просто нет времени. Поэтому, скорее всего, буду периодически здесь отмечаться в плане того, как идут дела-делишки.

Кроме того, возможно также, что здесь же буду делать некие заметки и наброски к будущей книге. В общем-то для этого данный блог теперь и существует. Так что все пучком!

А еще лето на дворе! Пора загорать и купаться, елы-палы! :)

Постик спецом для Dizweb.Ru

noreply@blogger.com (Игорь Квентор) — Sun, 13 Apr 2008 14:51:00 +0000

Ничего такого интересного тут не будет. Этот пост специально заточен под Dizweb.Ru, дабы добрый доктор Яндекс-Айболит прислал железного, чтобы тот проиндексировал поскорее остальные страницы сайта.

Ибо чтоп!

А вообще все ништяк! :) Весна на улице полным ходом, тэскээть, пора на дачку снаряжаться, картоху там... лучок-с... Женщины опять же... Хватит уже торчать за компом. Всех сайтов все равно не переделаешь и всех денег не заработаешь. Ну их к чорту! :)))

Wordpress новенькое!

noreply@blogger.com (Игорь Квентор) — Mon, 31 Mar 2008 16:05:00 +0000

Вот и вышел, наконец, толстый перец-огурец! :) Появился новый Wordpress версии 2.5, о чем упрно теперь напоминает надпись в админке блога: "Срочно обновитесь, ччорт!"
Однака, спешить не станем, ибо сыро еще все и ненадежно. Кому нафик нужны наполовину работающие плагины? (вопрос риторический).

Зато вот у Насти появилась свежая подборочка тем для Wordpress. Настя умница! Она дизайнер, что называется, от природы. Оченна рекомендую!

Новое на Вебсовете

noreply@blogger.com (Игорь Квентор) — Wed, 26 Mar 2008 14:23:00 +0000

Чтобы совсем уж не забрасывать этот блог (хотя сцуко гугль обнулил здесь ПР почему-то), буду периодически рассказывать, что творится на Вебсовете.

В данный момент времени пишу новую книгу о блочной верстке - Средний уровень. То есть уже более продвинутые вещи, нежели в первой книге. Думаю как сделать оглавление. Возможно оформлю его в виде "Каков". То есть, ответы на вопросы, начинающиеся со слова "Как?". Ибо подобные вопросы возникают у новичков чаще всего.

Что касается проекта Ипонамат, то в связи с последними телодвижениями яндекса в отношении Sape возможно придется либо прикрыть проект, либо диверсифицировать, накупив тех же ссылок в Сапе и напхав кучку мусорного контента о Японии и япошках. Однако в самом цикле статей о проекте Ипонамат, есть достаточно много полезных вещей и кроме зарабатывания денешков с продажи ссылок. Как выбрать доменное имя, зарегить его, найти хостинг и пр. - все это остается актуальным и востребованным. Потому совсем удалять тему не стану.

Полезные Темки На Websovet.Com

noreply@blogger.com (Игорь Квентор) — Fri, 21 Dec 2007 18:27:00 +0000

Не знаю как далее, но пока новые темки буду выкладывать на новом же сайте Websovet.Com. Сейчас там уже можно почитать о том как выбрать доменное имя, хостинг, купить домен, как правильно перенести DNS, а также две совершенно новые темы:

Меняющаяся картинка в шапке сайта

Простая фотогалерея на CSS

Enjoy! :)

Переезжаем!

noreply@blogger.com (Игорь Квентор) — Sun, 16 Dec 2007 11:53:00 +0000

Ось так! :)

Соорудил для Веб-мастерской новый дом — Websovet.Com. Часть тем отсюда будет перенесена на новый сайт. А этот блог останется, скажем так, на всякий случай. ;)

А посему — Камон эври бади!!!

Websovet.Com

Весьма Полезный Урок О Линиях

noreply@blogger.com (Игорь Квентор) — Sat, 08 Dec 2007 19:20:00 +0000

Что-то я сильно углУбился в одну лишь верстку и совсем позабыл про непосредственно дизайн. :) Срочно исправляем это дело! Недавно нашел замечательный урок по Фотошопу, а именно — как при помощи вектора рисовать красивейшие тонкие линии, используя всего лишь две опорные точки.

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

Дирзайте!

Позиционирование элементов в CSS. Абсолютное.

noreply@blogger.com (Игорь Квентор) — Sun, 18 Nov 2007 11:33:00 +0000

Пришел как-то раз Питачог к Винни Пуху и грит:
— Слышь, Медвед, ты как ваще насчет баб?
— Эбсолютли!
— Чего лютли?
— Эбсо!

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

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

Абсолютное позиционирование!

Да, есть такая вот штуковина. В двух словах: это расположение блока именно там, где нам нужно, а не в потоке. Сам блок словно бы изымается из нормального потока. По-другому это можно представить себе так: как и в Фотошопе™ есть слои, так и здесь есть как бы два экрана — на первом располагается обычный естественный поток, а над ним располагается второй экран, на котором наш супер-пупер-абсолютно-позиционированный-блок. Таких «экранов» может быть много.

Зачем нужно выдергивать блок из естественного потока?
Причин может быть куча. Например, нам надо просто разместить на странице один единственный блок. Скажем, размером 300х200 пикселей с надписью «Ща мой саит не работаед, патамушта я ищо ево недаделал. Даделываю уже ща». По-умолчанию, этот прямоугольник будет лепиться к верхнему левому углу. А мы вот хотим, чтобы он всенепременно торчал посередке. Ну или где-то так. Вот для этого и существует абсолютное позиционирование. С его помощью мы укажем нашему браузеру, где конкретно расположить блок.

Делается это лиххко и просто. Как известно, у прямоугольника имеется 4 угла. Нас интересует верхний левый. Если принять его за некую точку на экране монитора, то можно предположить, что она имеет парочку координат — по вертикали и по горизонтали (графики в школе все чертили, поэтому помним еще). Так вот при абсолютном позиционировании можно этой точке задать конкретные координаты! Задаются они относительно родительского элемента, в нашем случае — всего окна монитора. То есть, для этой точки (угла прямоугольника) мы задаем конкретные отступы от верхнего края монитора и от левого его края. В пикселах конечно же. Делается это так:

Вначале пропишем в листе стилей для нашего блока, что он не просто так, а самый что ни на есть абсолютно позиционированный:

#box {
position: absolute;
top: 150px;
left: 200px;
width: 300px;
height: 200px;
}

Что мы тут наблюдаем? Во-первых, появилось новое правило — position со значением absolute. Для чего оно — думаю понятно. Следующие два правила указывают как раз на координаты верхнего левого угла прямоугольника. Подчеркиваю, чтобы это хорошо запомнилось, ибо остальные углы браузер не принимает во внимание. И именно поэтому мы в последних двух правилах задали размер самого прямоугольника по ширине и высоте. Тем самым достроив его до конца.

Другой вариант применения. Сейчас очень модно стало цеплять на странице полупрозрачные картинки, перекрывающие текст, либо делать «наползание» одного текста на другой. Вот как раз с помощью абсолютного позиционирования можно сделать такой финт. Кстати, на многих буржуйских сайтах замечал такую фичу: картинка, вовсе даже не полупрозрачная, а самая обычная, почти наполовину перекрывает какой либо текст. Хотя по оставшемуся кусочку можно леххко понять, о чем идет речь. С одной стороны глупость, но с другой — внимание привлекает. А это зачастую поважнее, нежели удобство восприятия. :)

Все вроде бы пучком. Но вот есть одна странная особенность восприятия абсолютного позиционирование браузером IE. Нет, он все показывает верно, но вот если попытаться выделить в нашем блоке какое-нибудь одно слово, то часто выделяется не только оно, но и весь текст в блоке, а то и из соседних областей что-то захватит. Отчего такое происходит — непонятно. Но это так, мелочи.

Позиционирование элементов в CSS. Статическое.

noreply@blogger.com (Игорь Квентор) — Fri, 12 Oct 2007 10:04:00 +0000

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

Итак, позиционирование. В двух словах — это взаимное расположение элементов (блоков, картинок, и т.д.) на странице сайта. В блочной верстке веб страниц мы использовали статическое (static) позиционирование, то есть элементы в нем размещаются в соответствии с нормальным потоком — слева-направо в границах заданной области. Этот вид позиционирования задан по-умолчанию и именно так воспринимается всеми браузерами.

Кроме данного вида есть еще три вида позиционирования: относительное (relative), абсолютное (absolute), и фиксированное (fixed).

Статическое позиционирование.

Как уже было сказано, статическое позиционирование подразумевает нормальный поток контента в заданных границах. По-умолчанию такие границы определяет тэг body. Грубо говоря, элементы на экране монитора будут поочередно располагаться слева-направо "сколько влезет", а затем автоматом переноситься на следующую "строку". Например, у нас 17" монитор с выставленными настройками изображения в 1024х768 пикселей. Имеем на странице сайта 4 прямоугольных элемента (пусть это будут картинки), каждый шириной в 300 пикселей. В случае статического позиционирования получим следующее: три элемента будут расположены по-порядку слева-направо в самом верху экрана, а четвертый разместится под первым. Это и есть нормальный поток. Хоть у нас справа и осталось немного места (1024-(300+300+300) = 124), но четвертый элемент не стал там "лепиться" и прятаться за край экрана, а просто перенесся ниже, как бы на следующую строчку.

Плюсы такого позиционирования очевидны: можно не заморачиваться со сложной разметкой и располагать элементы на странице словно складывая по-порядку кубики в коробку. Причем задать границы можно и самостоятельно. Например, поместив весь контент в некий контейнер, который затем можно двигать относительно главного тэга body. Именно так мы и поступали, когда занимались блочной версткой. Кроме того, взаимное расположение самих элементов здесь также легко регулировать такими свойствами как margin и padding. Некоторые верстальщики поступают совсем просто — набросают на страницу элементов, словно художник эскиз, а потом уже в листе стилей подгоняют эти самые марджинги и пэддинги. :)

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



Подобный код показывает компутеру, что ежели у него в наличии только Internet Explorer, то велком нафик читать лист стилей ie.css, а не что-либо иное.

Остается сказать еще парочку слов о таких свойствах, как float и clear. Если вы, например, располагаете в нормальном потоке просто картинки, то они без всяких заморочек встают одна за другой слева-направо, пока не достигнут правой границы, а потом начнут заполнять следующий ряд ниже. Но если вы попытаетесь таким же макаром расположить ряд блоков, взятых в тэги div, то каждый из них будет расположен один под другим, а не в ряд. Почему так? Дело в том, что "дивы" весьма гордые создания и считают, что у каждого должна быть собственная единоличная строка. Чтобы обойти это ограничение и обмануть их, придумали специальное свойство float (обтекание). Рассмотрим следующий набор правил:

#leftcol {
width: 150px;
float: left;
margin: 0 5px 0 0;
}

Здесь задан некий блок, названный leftcol (типо левая колонка), у которого ширина 150 пикселей, отступы сверху, снизу и слева по нулям, справа в 5 пикселей и, самое интересное, float (обтекание) слева. Это означает, что сам блок leftcol будет расположен слева, а следующий за ним будет словно бы "обтекать" его справа. Тут нет никакой ошибки! Чтобы было проще запомнить, то left — значит сам блок слева, а все обтекает его справа; right — соответственно наоборот. :) Так мы расположим оба блока на одной горизонтальной линии.

Другим интересным свойством является clear (очистка). Оно выполняет противоположную функцию. Например, мы хотим расположить парочку симпатишных картинок на странице сайта. Причем расположить их именно одну под другой, а не в ряд. Но так как ширина обоих по 300 пикселей, а ширина экрана все 1024, то они упорно встают рядышком на одной линии. Тогда мы просто берем и пишем следующее правило в листе стилей:

.clearfloat {
clear: both;
}

А в нужном месте на странице (сразу же за первой картинкой) вписываем вот такой код:

<div class="clearfloat"></div>

В правиле мы указали имя класса clearfloat (на самом деле это не критично и обозвать можно было хоть .keep_out_of_my_ass) и свойству clear задали значение both, то есть очистка с обоих сторон. Это обозначает, что после данного элемента на странице не должно быть более ничего. И, таким образом, браузер не станет лепить вторую картинку справа от первой, а перенесет ее на следующую строку.

На этом все. В следующий раз поговорим об абсолютном позиционировании и опять же о том, какая сво... этот IE, потому как и тут он сумел наделать кучу.

Hover-эффект для ячеек списка ссылок.

noreply@blogger.com (Игорь Квентор) — Sat, 25 Aug 2007 14:48:00 +0000

В блочной верстке при оформлении блока ссылок чаще всего используют список (с маркерами или без) — тэг ul. Это весьма удобно. Но что, если мы хотим сделать не просто ссылку, а добавить к ней описание и дату создания? Ну, например, если это список заголовков статей и их краткое описание. Можно, конечно, сделать ссылкой только сам заголовок, а описание и дату просто текстом. Но тогда чтобы ссылка сработала, нужно будет навести мышь точно на заголовок. Хорошо, если он крупный и чтобы промахнуться, нужно очень постараться. Но если вы любитель миниатюризации (да возрадуются человеки, читая скрижали в 6-ти пиксельном шрифту! Ибо чтоп!), то почему бы не сделать ссылкой всю ячейку списка?

В чем сложность? — спросите вы, — завернуть в тэг <a> все содержимое ячейки и вуаля! Ну и как тогда раглядеть, где там заголовок, где деска, а где дата? Оформить их разными цветами? Можно. Но все равно ссылка будет срабатывать только при наведении мышки на текст. А я мож хочу, чтоп вся ячейка работала как ссылка. Вот лень мне в текст целиться. Хочу, чтоп в любом месте (даж пустом) работало!

Эт лиххко! :) И поможет нам в этом деле правило для ячейки списка — display: block;, которое делает все содержимое ячейки единым блоком.

Для того, чтобы задать различные правила для заголовка, описания и даты, мы воспользуемся парочкой дополнительных тегов em и span. Выбор тут не принципиален. Как вы уже знаете, em — это тэг выразительности (ударения), а span вообще нейтральный тэг и может применяться к чему угодно. Можно было взять только span с двумя разными классами. Но пусть у нас будут разные тэги, для наглядности.

Итак, для начала запишем кусок кода для страницы, а потом рассмотрим его повнимательней:

<div id="links">
<ul>
<li><a href="#" title="Text">Заголовок намба 1
<em>Лорем ипсум и еще тыща сто пятьдесят три латинских матюка.</em>
<span>Запостил вчера</span></a></li>
<li><a href="#" title="Text">Заголовок намба 2
<em>И еще много дурных и непонятных слов на латыни.</em>
<span>Запостил сегодня</span></a></li>
<li><a href="#" title="Text">Заголовок намба 3
<em>Тут есть немного полезного и нужного. Весьма рекомендовано к прочтению.</em>
<span>Запостил давно</span></a></li>
</ul>
</div>

Здесь у нас блок ссылок, обозначенный тэгом div и названный незатейливо "links". Далее идет обычный маркированный список, маркеры у которого мы принудительно убрали в листе стилей. В ячейках вначале идет заголовок, затем описание, обрамленное тегами em, затем дата, оформленная тэгами span. Все просто.

Давайте теперь посмотрим на сам лист стилей:

#links ul {
list-style-type: none;
width: 400px;
}

#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}

#links li a {
color: #39f;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}

* html #links li a { /* make hover effect work in IE */
width: 400px;
}

#links li a:hover {
background: #333;
}

#links a em {
color: #999;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}

#links a:hover {
color: #ffc;
}

#links a span {
color: #0c0;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}

В самом первом (общем для всего списка) правиле мы указали отсутствие маркеров и ширину блока в 400 пикселей. Далее идет правило для ячейки списка, а именно: рамка точечная в 1 пиксель толщиной, светло-серого цвета. Обратите внимание — мы не стали выписывать для каждой из сторон ячейки толщину рамки, а просто указали это следующим правилом, задав для верха и низа 1 пиксель, а по бокам 0. В результате с боков рамка как бы есть, но ее нет.

Далее идут правила для ссылок. В основном они касаются только заголовка (цвет шрифта, семейство, размер, отступы). Сразу пишем, что текст декораций не имеет, сиречь — никаких подчеркиваний. Но вот одно правило для нас очень важное, и об этом я говорил чуть выше — display: block;. Оно не только делает все содержимое блока единым целым, но и выравнивает автоматом все строки в ячейке в красивый и четкий столбег.

Продолжим. Следующая строка очень хитрая. В верстальском обществе данная штука называется хаком и служит для того, чтобы бедному ослегу IE показать, что "вот-так-вот-нада-работать-а-не-как-попало!". Поясняю: Експлорер считает, что свойство хувер (hover) применимо только к тексту и никак иначе. Но нам-то надо чтобы вся ячейка отзывалась на действия мышки. Вот для этого мы упрямцу и показываем "чиста канкретна", что у нас ширина ссылки ажно 400 пикселей, так что бутте любезны посчитать все это добро ссылочкой.
На это IE согласный.

Далее мы указали изменение цвета фона ячейки при наведении мышки. Следом задали для описания ссылки новый цвет, опять же display: block; чтобы описание не лепилось справа от заголовка на свободном месте; размер шрифта и высоту строки.

Последнее правило для отображения даты. Тут еще более мелкий шрифт и новый цвет.

Вот собственно и все. У нас при наведении мышки изменяется цвет фона и цвет заголовка. При желании можно также задать изменение цвета и для описания с датой.

Дерзайте!

Лого в стиле web 2.0 (отражение)

noreply@blogger.com (Игорь Квентор) — Mon, 13 Aug 2007 08:26:00 +0000

Сегодня мы оставим в сторонке верстку и займемся дизайном. А именно изобразим лого сайта в модном нынче стиле web 2.0 да еще и с отражением. Работать будем в фотошопе. Я пользуюсь 8-й версией, не русифицированной. А посему все менюхи буду приводить на английском. Думаю, разобраться будет несложно.

Итак, окрываем Photoshop™ и создаем новый документ 450х200 пикселей. При помощи "ведерка" (Paint Bucket) заливаем все черным цветом. Добавляем новый слой и на нем шрифтом Trebuchet MS размером в 72 пиксела и цветом #66CCFF пишем наше лого. У шрифта желательно выставить в настройках Smooth, чтобы не было рваных краев у некоторых букв.

Щелкнув правой кнопкой на названии слоя с текстом, выбираем в выпадающем меню пункт Blending Options. Откроется окно Layer Style. В нем выбираем пункт Gradient Overlay. В настройках указываем: Blend Mode: Overlay, ставим галку в окошке Reverse, движок Scale передвигаем на 120%. Жмем окей. Получаем уже что-то симпатишное:

Теперь создадим еще один слой для блика. На нем инструментом Elliptical Marquee сделаем овальное выделение, которое потом тем же ведерком зальем белым цветом. Вот эдак:

Далее, зажав клавишу Ctrl, кликаем на имени слоя с текстом. Текст у нас выделится пунктиром. А теперь проделаем небольшую хитрость: нажимаем Ctrl+Shift+I как бы обратив выделение. И далее смело давим кнопку Delete. У нас исчезнет верхняя часть овала. Снимаем выделение, нажав Ctrl+D. Кликаем на слое выделения и выставляем прозрачность (Opacity) на 45%. Получам следующую картинку:

Уже неплохо. Теперь сделаем собственно само отражение. Для начала выключим слой фона, нажав на "всевидящее око". А теперь заруливаем в меню Layer и жмем на Merge Visible. Наши слои с текстом и бликом объединятся. Теперь снова включаем фон. Далее скопируем слой с текстом, перетащив его на иконку создания нового слоя. К этому слою применим трансформацию. Заходим в меню Edit, далее Transform - Flip Vertical. Слой перевернется в вертикальной плоскости. Затем клавишей со стрелкой вниз сдвигаем этот слой под первый, чтобы между ними получился небольшой зазор. Вот так:

Осталось лишь несколько штрихов. Сначала уменьшим прозрачность (Opacity) этого ораженного слоя до 45%. Теперь, нажав клавишу Ctrl, кликнем на названии слоя. Текст станет выделенным. Берем инструмент Gradient, цвет - от черного к прозрачному, и проводим на слое с текстом снизу вверх. Снимаем выделение (Ctrl+D) и вуаля!

Enjoy!

Оформление изображений средствами CSS. Рамка

noreply@blogger.com (Игорь Квентор) — Mon, 06 Aug 2007 14:53:00 +0000

Под изображениями понимаются всевозможные картинки с расширениями jpg, gif, png и т.п. Картинки — неотъемлемая часть любого сайта, за исключением разве что совсем уж аскетичных проектов типо lib.ru. Хотя и там изображения имеются (ну хотя б яндекс-денешка :) ).

Изображения в html обозначаются тэгом img. Как я уже упоминал в Блочной верстке веб-страниц. Часть 1, у данного тэга нет закрывающей пары. Чтобы код соответствовал требованиям валидатора, необходимо всегда добавлять в конце параметр alt="", а также пробел перед слэшем и закрывающей скобкой: />

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

Казалось бы, все просто: задать в листе стилей в первом правиле для тэга img нужную по цвету, фактуре и толщине рамку, а во втором — записать нечто вроде:

img:hover {
border: #ff0;
}

В Опере такая фишка сработает, а вот в IE — нет. А все потому, что IE этот самый "хувер" применяет ТОЛЬКО к ссылкам. А посему мы сделаем хитро и запишем так:

.main img {
border: 4px solid #fff;
margin: 10px 20px;
float: left;
}

.main a:hover img {
border-color: #cf0;
}

Здесь main — это класс для изображений, размещенных в главном разделе страницы (можете обозвать его как пожелаете сами). Мы задали для этого класса сплошную рамку толщиной в 4 пиксела и белого цвета. Если, например, у вас основной фон страницы тоже белый, то рамки изначально не будет видно. При наведении мыши, цвет изменится на светло-салатовый. Обратите внимание: во втором правиле не нужно снова указывать толщину и фактуру рамки, только иной цвет!

Соответственно строка в коде страницы для добавления картинки будет выглядеть следующим образом:

<div class="main"><a href="http://www.mysite.ru/articles/kak-ya-pil-vodku.html"><img width="150px" height="210px" src="images/vodka-pil.jpg" alt="Как я пил водку в децком саде" /></a></div>

Часто допускают следующую ошибку — указывают только одно правило для картинки. То есть сразу:

.main a:hover img {
border: 4px solid #cf0;
margin: 10px 20px;
float: left;
}

Что-то вроде — не было и вдруг появилось. В таких случаях получаются забавные, но совершенно недопустимые дерганья на странице, когда картинка "подскакивает" от наведенной мыши словно ужаленная. :)

За сим говорю до свидания и напоминаю: если есть вопросы или пожелания по следующим урокам, то пишите в мыло:

kventori(сабака)яндыксточкару

ПС: добавлено 14.10.07г.

Выяснилась такая интересная штука: в IE данный подход не сработал! Причем опять же по причине жудкой нелюбови Ослека к свойству hover. Вылечилось добавлением в лист стилей следующего куска правил:

a:hover {
border: #fff;
}

То есть мы еще до кучи указали упрямцу, что таки нам надо этот самый хувер прицепить к рамке. Здесь не прописан размер рамки и цвет задан белый под цвет фона (ну, у кого другой цвет, соответственно исправить). Ежели такая "добавка" будет прилеплять ненужные бордеры к другим ссылкам, то можно попробовать задать размер в 0px. А вообще буду сильно рад, если кто-нить прояснит сей момент, потому как до конца не понятно почему так выходит. :)

Как относиться к левым предложениям?

noreply@blogger.com (Игорь Квентор) — Sat, 28 Jul 2007 16:37:00 +0000

Каюсь, давно не постил новых уроков. И в этот раз тож тема не совсем о дизайне или CSS. Хотя скоро все будет! ;)

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

Во-вторых, сдается мне, что в данном (моем) случае, ребятки хотят на халяву заполучить готовый сайт. Потому как в "конкурсном задании" изложили следующие требования:

"…Тестовое Задание:
Изготовить промосайт или промостраницу для деловой игры (информация для
наполнения и логотип прилагется в файлах).
Сайт (страница) должны включать в себя форму для регистрации желающих
принять участие в игре со следующими полями:
*Ф.И.О. участника
*E-mail участника
Название организации
*Желаемая дата участия в игре
Комментарии
Скрипт отправления почты выполнить на Perl или PHP.
Сделать баннер-кнопку для игры размером 88х31 пиксель.
Результат выполнения:
Кандидат должен представить:
Дизайн-макет в формате Adobe Photoshop
Сверстанный сайт (страницу)
Скрипт отправления почты
Баннер-кнопку…

Чесслово, так и подмывало отписать заказчику с требованием оплатить аванец, да думаю, что вряд ли ответили бы. :)

Оформление кода css

noreply@blogger.com (Игорь Квентор) — Wed, 18 Jul 2007 09:21:00 +0000

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

На самом деле аккуратность и красивость нужна вовсе не для крутости какой-либо. Как говорят автомеханики: "На скорость не влияет и ладно!" Это нужно, прежде всего, вам самим, чтобы при необходимости впоследствии что-либо поправить, вы не заплутали в собственных правилах.

Итак начнем.

Комментарии.
Комменты — это вспомогательная информация для разработчика css. Они не читаются браузерами, и в них можно заносить любой текст. Достигается это путем оформления комментов специальными знаками:

/* комментарий тут */

Комменты структурируют лист стилей. Поделив css на разделы, можно потом легко найти нужный кусок правил. Обычно порядок следования разделов следующий:

/* Данный лист стилей создал Я — Великий и Ужасный Пивной Маньйаг. great-ass@mail.tu */

/*body*/

/*header*/

.............

/*footer*/

Размер шрифта.
Никогда не указывайте размер шрифта в пикселах! На ваш сайт заходят не только молодые и востроглазые, но и люди с ослабленным зрением. И если вы жестко задали размер в 6px, то потеряете кучу посетителей, которые не смогут увеличить изображение в своем браузере. Самое оптимальное — это указание размеров в % или в em. Данная единица показывает размер относительно основного размера шрифта на странице (по умолчанию выбранного браузером). Например запись 1em означает тот же самый размер, а 0.5em (можно записывать без нуля — .5em), ровно вполовину меньше. Соответственно 2em будет в два раза больше. Тут можно легко варьировать размеры, изменяя значения десятых долей: 1.2, 1.3, 1.4 и т.д.

Столбик или строка.
Это зависит только от ваших личных предпочтений. Кто-то пишет правило в строку:

p {color: #000; font: 120% Verdana, sans-serif;}

А кто-то в столбик:

p {
color: #000;
font: 120% Verdana, sans-serif;
}

Моя имха — в столбик куда удобнее, так как более наглядно. Ну а в строку выходит компактнее. Выбирать вам. :)

Лишние DIVы.
В статье о блочной верстке веб-страниц я уже упоминал об этом. Не стоит лепить кучу тэгов div только для того, чтобы оформить каждый элемент страницы. Зачастую правила листа стилей можно прицепить к уже имеющимся тэгам a, h1, ul, ol, li, img и т.д.
Например, чтобы задать правила для списка, мы в листе стилей напишем что-то вроде этого:

#menu ul {
list-style: disc;
margin: 10px 50px;
padding: 5px;
}

А на самой html-странице напишем так:

<div id="menu">
<ul>
<li>О нам</li>
<li>О вам</li>
</ul>
</div>

Но это есть тавтология. Правильно будет избавиться от лишнего DIVа и записать просто:
(в листе стилей):
.menu {
list-style: disc;
margin: 10px 50px;
padding: 5px;
}

(на странице):

<ul class="menu">
<ul>
<li>О нам</li>
<li>О вам</li>
</ul>
</div>

Как видим, в css мы представили менюшку как класс, а потом прицепили этот класс непосредственно к тэгу списка (ul) в html-странице.

Повторы не нужны.
Если вы в самом начале листа стилей указали общее для всех правило, например:

* {
margin: 0;
padding: 0;
border: 0;
}

то вовсе ни к чему потом повторять эти же правила в каждом элементе заново. То есть, если вы пишете правило для картинок (тэг img), то к нему не нужно приписывать значение border:0, у вас это УЖЕ есть. :)

Эт все. В следующей статейке как раз и поговорим об оформлении силами css всяческих картинок.
Enjoy!

Псевдо-облако тэгов.

noreply@blogger.com (Игорь Квентор) — Wed, 04 Jul 2007 13:22:00 +0000

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

Хочу сразу предупредить, что это не картинка! Для создания такого псевдо-облака мы используем все тот же лист стилей CSS и нейтральный тэг span, о котором я упоминал в предыдущей статье.

Начнем с листа стилей css. Выделим наше "облако" в отдельный блок и назовем, к примеру, cloud. Запишем в листе следующее правило:

#cloud {
border: 1px solid #ccc;
width: 150px;
height: 640px;
margin: 10px 5px 0 0;
padding: 5px;
float: right;
}

Здесь мы задали размеры нашего блока, тонкую светло-серую рамку в 1 пиксель, отступы — сверху 10 пикселей, справа — 5, снизу и слева по нулям. Поля со всех сторон по 5 пикселей. Кто забыл, напомню, что отступы (margin) — для промежутков между блоками, а поля (padding) — для того, чтобы внутреннее содержание блока (текст) не "лепилось" к границам рамки. Самое нижнее правило говорит о том, что блок располагается на странице справа, а текст (либо другой блок) будет обтекать его слева соответственно.

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

.s1 {
font: .9em Verdana, sans-serif;
color: #f63;
}

.s2 {
font: 1.2em Verdana, sans-serif;
color: #f96;
}

.s3 {
font: 1.5em Verdana, sans-serif;
color: #fc3;
}

.s4 {
font: 1.8em Verdana, sans-serif;
color: #fc6;
}

.s5 {
font: 2em Verdana, sans-serif;
color: #f90;
}

В общем то ничего сложного. Мы взяли пять различных размеров шрифта одного семейства Verdana и каждому задали разный цвет. Все эти правила являются классами, о чем говорит точка перед каждым из них. Это означает, что на одной странице мы можем использовать их сколько угодно раз.

А посему смело открываем нашу Самаглавную страницу, куда станем лепить это псевдо-облако, и в нужном месте добавим следующий код:

<div id="cloud">
<span class="s3">В одном</span> <span class="s2"> славном</span> <span class="s4">Месте</span> <span class="s2">жил себе на</span> <span class="s5">радость</span> <span class="s3">один </span>
<span class="s1">замечательный парасенаг</span> <span class="s2">по имени</span> <span class="s4">Питачог</span> <span class="s1">из рода</span> <span class="s3">Питачогов.</span>
<span class="s5">Атец</span> <span class="s2">его был</span> <span class="s3">Питачогом,</span>
<span class="s2">и атец ацца его</span> <span class="s3">тоже был</span> <span class="s3">Питачогом…</span>
</div>

Вначале пестрит в глазах от горки тэгов span. Но если присмотреться, то все просто: мы каждому слову (иногда и двум зараз) прицепили этот самый span с выбранным классом s. Зачем это нужно? Дело в том, что у нас слова не принадлежат какому-либо абзацу. Поэтому выбранный класс надо как-то прицепить к нужному слову. Вот для этого мы и используем нейтральный тэг span, открывая его перед словом, и закрывая за ним. Причем в открывающем тэге делаем запись, к какому классу он принадлежит — s1, s2 и т.д.

Пару замечаний напоследок:

1. Не забываем, что если наш блок вложен (а он таки будет вложенным) в другой, ну например в body :), то он получит часть правил от стиля самого блока body, а потому может выглядеть вовсе не так, как изначально задумывалось. Такшта бдите и проверяйте всегда, что получаете на выходе.

2. В классах s1, s2 и др. можно заметить, что у всех одно и то же семейство шрифтов. Получается, что можно сократить запись правил для них, например так:

.s1, .s2, .s3, .s4, .s5 {
font-family: Verdana, sans-serif;
}

.s1 {
font-size: .9em;
color: #f63;
}
....
и так далее.

Дирзайте! :)

Ролловер-меню средствами CSS

noreply@blogger.com (Игорь Квентор) — Mon, 02 Jul 2007 10:21:00 +0000

Вот такое симпатичное меню мы сейчас станем делать. Если вы уже пытались что-то подобное изобразить в визуальном редакторе, то заметили, что там все построено на заковыристом Java-скрипте и выглядит просто устрашающе. Мы же используем всего парочку картинок-заготовок, обычный немаркированный список и немножко css. :)

Для начала нарисуем две картинки:

Это две части одной закладки меню. Правая делается такой длины, чтобы при выбранном размере шрифта, на картинке помещалось самое длинное слово из всего списка разделов. Ну, например, "супермегакулфорумблинваще!". Каждая из картинок состоит из двух частей, одна под другой. Верхняя часть — исходное состояние, нижняя — при наведении мышки. Принцип довольно простой и изячный: в листе стилей мы зададим разным состояниям различные координаты отображения. То есть, картинка загружается вся целиком, но на странице мы изначально видим только верхнюю чать. Когда мы подводим к кнопке мыша, то как бы "выскакивает" нижняя часть.

Такой подход гораздо лучше, чем раздельные картинки, как при классическом ролловере. Особенно когда разделов немало — все картинки не успевают загрузиться сразу и выглядит это весьма некрасиво. А тут у нас всего две маленькие картиночки, и причем на все меню разом, независимо от количества разделов. Очень удобно.

Небольшое замечание: высота обоих картинок — число четное. Это понятно — верхняя и нижняя половинки должны быть одного размера.

Наше меню мы обозвали тэгом tabs, хотя можно было бы и menu. Это не столь важно. Лишь бы название было осмысленным, чтобы самому потом не заплутать в коде. В листе стилей запишем следующий код:

#tabs {
width: 860px;
height: 39px;
margin: 0 auto;
background: #69c;
font: 90% "Comic Sans MS", Verdana, Arial, sans-serif;
line-height: 1.8em;
clear: both;
}

#tabs ul {
padding: 5px 10px 0 30px;
list-style: none;
}

#tabs li {
display:inline;
}

#tabs a {
float: left;
background: url(images/tableft.gif) no-repeat left top;
padding: 0 0 0 4px;
}

#tabs a span {
float: left;
background: url(images/tabright.gif) no-repeat right top;
padding: 4px 20px 5px 10px;
color: #fff;
}

#tabs a:hover span {
color: #FF9834;
}

#tabs a:hover {
background-position: 0% -42px;
}

#tabs a:hover span {
background-position: 100% -42px;
}

#tabs li.active {
float: left;
color: #FF9834;
background: url(images/tableft.gif) no-repeat left top;
background-position: 0% -42px;
padding: 0 0 0 4px;
}

#tabs li.active span {
float: left;
background: url(images/tabright.gif) no-repeat right top;
padding: 4px 20px 5px 10px;
background-position: 100% -42px;
}

Здесь мы сразу задали блоку меню ширину в 860 пикселей, высоту в 39px, автовыравнивание по центру монитора, синий фон, семейство шрифтов, и очистку с обоих сторон, чтобы ни справа, ни слева больше ничего лишнего не повылезало.
Дальше задали списку ul поля и запретили отображение маркеров. Поэтому список у нас и называется немаркированным.

Далее мы указали пунктам списка li расположение "в линию", иначе по-умолчанию браузеры всегда располагают их в столбик.

А вот следующие два правила весьма интересны. В обоих указаны стили для отображения ссылок a, но во втором появилось странное слово span. Зачем это? Дело в том, что нам нужно привязать наши изображения кнопок к тэгам в виде фона. В данном случае тэг у нас один — <a>. Привязывать фон можно только к стартовому тэгу. К </a> уже ничего не привяжешь. Поэтому мы и ввели дополнительный тэг span. Его еще называют нейтральным, потому как он может быть использован везде и сам по себе не несет какой либо значимой нагрузки, как например тэг ссылки или абзаца.

Таким образом, мы привязали первую картинку (как фон) к тэгу a, а вторую к span. Причем для первой указали расположение слева вверху и запретили ей повторяться, а второй — справа вверху, и тоже без повтора. Поля тоже заданы не абы как. Сначала мы показали левой картинке отступить от левого края на 4 пиксела, то есть как раз на ширину картинки. Если этого не сделать, то правая картинка, которая заведомо шире, просто "съест" левую, потому что названия разделов у нас все-таки не очень длинные. Что касается полей для правой картинки, то мы их задали такими, чтобы справа от имени раздела оставалось столько же пространства, сколько и слева (а иначе браузер "подожмет" слово под обрез). Вобщем экспериментируйте и увидите. :)

Для ссылок задали белый цвет (белый на зеленом — абажаю просто!). А для активных — оранжевый на белом.

Следующие два правила как раз приказывают нашим картинкам спрятать верх и показать низ при наведении на них мышкой. Для левой картинки мы указали позицию в 0% (то есть крайнее левое положение) и минус 42 пикселя. Помните про четный размер высоты картинки? Мы просто "отняли" у нее верхнюю часть. А так как картинка изначально загружена на страницу полностью, то она и покажет нам нижнюю часть. Для правой картинки мы указали, соответственно, 100% позицию (крайнюю справа) и тоже -42 пиксела.
Возникает вопрос: почему мы сразу не видим на странице целые картинки? А потому, что в самом начале для нашего блока менюшек мы задали высоту всего в 39 пикселей (можно и 42, но так как браузеры по разному считают отступы, то мы чуток перестраховались).
Все просто! :)

Два других правила мы написали для активного раздела. Это тоже понятно — активный раздел не должен быть ссылкой, но должен ясно показывать, что он в данный момент активен. То есть выглядеть так, словно на ссылку навели мышку. Тут мы тоже указываем картинкам хитро выглядывать нижней частью, но пристегнули их уже не к тэгам ссылок, а к тэгам строк списка — li.

Не забываем везде указывать обтекание слева — (float: left;). Иначе глюки неизбежны.

Вот вроде бы и все. Но IE все-таки браузер с характером, и наше красивое меню, как-то некрасиво искажает. :( В данном уроке не видно, но вот на собранной целиком странице получалась эдакая щелка между меню и основным блоком. Это как раз происходит потому, что IE (в отличие от других браузеров) по-своему высчитывает размеры полей и отступов. На такое безобразие хитрые верстальщеги придумали не менее хитрый болт, называемый хаком. То есть спецом для IE в листе стилей делается приписка (зачастую с указанием версии IE): "...сему поганцу показывать мою гениальную менюху вот так: (и тут дополнительное правило)...".

Такой хак можно вписать в основной лист стилей, а можно пристегнуть отдельным листом, дав на него соответствующую ссылку. Мы так и поступим, и пристегнем к странице еще один css, обозвав его просто ie.css. В нем мы запишем следующее:

#tabs a span {
padding: 4px 20px 4px 10px;
}

#tabs li.active span {
padding: 4px 20px 4px 10px;
}

Как видите, в отличие от основного листа, здесь мы указали нижнее поле на один пиксель меньше (4 вместо 5). Вот и вся трабла.

Ну и наконец код самой страницы (тут только менюха, все остальные, положенные для страницы тэги, опущены):

<div id="tabs">
<ul>
<li><a href="#" title="Главная"><span>Главная</span></a></li>
<li><a href="#" title="Факты"><span>Факты</span></a></li>
<li><a href="#" title="Байки"><span>Байки</span></a></li>
<li><a href="#" title="Классика"><span>Классика</span></a></li>
<li><a href="#" title="О летучести"><span>О летучести</span></a></li>
</ul>
</div>

Действующее меню можно посмотреть здесь: Pigfly

Enjoy! :)

HTML и CSS - с чего начать?

noreply@blogger.com (Игорь Квентор) — Sun, 01 Jul 2007 18:14:00 +0000

Эдакое лирическое отступление. :)

Когда я верстал свою первую Баечку, то не мудрствуя лукаво установил на компе визуальный редактор от Макромедии под названием Дримвьювер МХ и понеслась родимая! Правда при этом я краем глаза почитывал е-бук по данной проге от Володи Дронова (за что ему пламеный респект). Для первого знакомства с html эта прога подходит как нельзя лучше. Можно открыть сразу два окна: визуальное представление будущей страницы и она же в виде кода. Рисуя таблицы или вставляя ссылки, сразу видишь, как это выглядит в html. Хотя надо признать, что Дримвьювер добавляет в код много лишнего (впрочем намного меньше, чем другие проги подобного рода).

Почему не сразу Блокнот или WordPad? Помнится как-то зашел у меня разговор с одной знакомой, изучавшей html в институте, о том, чем верстать сайт. Знакомая, задрав нос заявила, что не признает ничего кроме Блокнота и ваще ратует за чистоту стиля. Звучит, конечно же, круто, но делу мало помогает. Если человек только начинает изучение верстки сайтов, то ковыряться сразу же в малопонятном коде — занятие не самое интересное. Зато когда удается собрать в редакторе свою первую страницу, да еще при этом вдоволь побороться со множеством странностей того же Дримвьювера, то счастью вашему таки не будет предела! :)

Как я уже упоминал, любой визуальный редактор добавляет много излишнего кода. И если со всякими Java-скриптами (а они будут! И откуда чего берется?) лучше не связываться поначалу, то поправить в полученном коде какие-нибудь стили - весьма просто и даже надо. Часто бывает так, что выбрав какой-то шрифт, мы потом меняем его на другой. И вот тут Дримвьювер часто делает такие фишки примерно:

"... <font style21><font style25><p>Тут у меня как бы абзац, набранный шрифтом Таймс, но почему-то потом превратившийся в Вердану</p></font></font>..."

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

Вот с такой правки и полезно начинать внедряться потихоньку в сам код. Со временем в памяти будут как бы сами собой откладываться стандартные тэги ссылок, рисунков и пр. По большому счету, любая статичная страница состоит из заголовков, абзацев, картинок и ссылок. Все! Это основные детали. Научившись видеть их в коде, вы уже не будете теряться.

Внимательно присмотревшись к тому, как визуальный редактор "пристегивает" стиль отображения шрифта к разным абзацам, можно заметить, что код часто просто повторяется. Логично предположить, что можно где-то на странице указать данный стиль всего лишь ОДИН раз, а потом в нужных местах (например в начале всех абзацев) дать на него что-то вроде ссылки. Таким образом и код уменьшится, и сама страничка соответственно полегчает. Вот тут как раз в игру и вступают каскадные таблицы стилей - CSS. В них можно прописать для любого элемента страницы — будь то хоть абзац, хоть картинка — необходимый стиль отображения. И там, где на странице будет попадаться данный элемент, к нему автоматом применится этот стиль.

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

Изучать всевозможные хитрости написания каскадных таблиц все-таки лучше по книге. Не стоит покупать увесистый талмуд, при взгляде на который нападает жуткая зевота. Всех тонкостей все равно не осилить (только если это не самоцель), а для уверенного использования достаточно знать несколько приемов, и можно верстать вполне себе грамотные и красивые сайты. Я бы посоветовал как вариант пару книг:

Ломов А. "Самоучитель HTML, CSS, скрипты: практика создания сайтов (+CD)"

Расс Уикли. "Освой самостоятельно CSS. 10 минут на урок"

В этих двух книгах достаточно просто и доходчиво разъясняются принципы верстки. И если у Р. Уикли брошюрка чисто по css, то у Артемия Ломова очень качественно и леххко описаны как сами спецификации html и css, так и различные способы верстки сайта - табличный, блочный и т.д. Рекомендую.

Блочная верстка веб-страниц. Часть 9 (end).

noreply@blogger.com (Игорь Квентор) — Wed, 27 Jun 2007 04:52:00 +0000

Ну а теперь настала очередь подвальчика!
Подвал (или футер - footer) это весьма важная часть сайта, хотя и мало кто туда добирается, особенно при очень длинных страницах. Там обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация. Футер не должен доминировать над шапкой, но и не должен теряться, делая страницу неуравновешенной. Мы сделаем его немного контрастным по цвету, но небольшой высоты.
Запишем в коде страницы сразу после этого места:

.................
...намечаются до самого утра. При наличии на небе луны — будет весело.
</ul>
</div>
<div class="clearfloat"></div>

Следующий код:

<div id="footer">
<p>Главная | <a href="#">О нас</a> | <a href="#">О летучести</a> | <a href="#">О везучести</a> | <a href="#">Свинки-герои</a> | <a href="#">Подружиццо</a></p>
<p>© PIG.RU, 2007 | All right reserved. | <a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css">CSS</a> | | e-mail: <a href="mailto:piggs@pig.ru">piggs@pig.ru</a></p>
</div>

Здесь у нас слово Главная не является ссылкой (об этом мы уже говорили), а следом идут обычные ссылки на другие разделы сайта. Всего в футере два абзаца. В первом ссылки на разделы, а во втором как раз и есть всякие копирайты, ссылка на "мыло" и ещё две интересные ссылочки. Вот они уже как раз для форсу бандитского! :) Это ссылки на валидаторы - конторы, которые проверяют вашу страницу на соответствие стандартам. Ссылки устроены так, что нажимая на них, вы сразу даёте команду этим самым валидаторам проверить ваши странички (которые уже лежат в сети конечно же). И тут же получаете ответ. Сие придаёт вашим страничкам солидность и всеопщее наше верстальское одобрение.

Вот практически и вся страница. Проверьте только чтобы в конце кода у вас было два /div подряд. Вот так:

..........
href="mailto:piggs@pig.ru">piggs@pig.ru</a></p>
</div>
</div>
</body>
</html>

Второй /div - это закрытие области контейнера.

Теперь допишем в листе стилей следующий код:

#footer {
background : #665;
color : #fff;
font-size : 70%;
padding : 5px;
clear : both;
}

#footer a {
color : #ff0;
}

#footer a:hover {
color : #f00;
}

#footer p {
padding : 2px;
text-align : center;
}

.clearfloat {
clear : both;
}

Здесь мы задали фон серо-зелёного цвета, цвет текста - белый. А вот нижняя строчка в первом правиле (clear : both;) означает, что с обоих боков подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера.

Ссылки у нас здесь ярко-жёлтые, а в активном состоянии - красные. Для текста мы выбрали размер мельче всех на странице - 70%. Как я и сказал, футер - важная часть, но не на столько, чтобы бросаться в глаза.

Выравнивание для текста мы задали по центру.

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

Сохраняемся, смотрим. Всё вроде бы хорошо, но как-то неуютно (особенно на белом фоне экрана). Добавим-ка мы всей странице тонкую светло-серую рамку! Откроем лист стилей, найдем вот это место:

#container {
width : 760px;
margin : 0 auto;
}

И добавим следующую строчку:

border : 1px solid #999;

Должно получиться следующее:

#container {
width : 760px;
margin : 0 auto;
border : 1px solid #999;
}

Вот, собственно, и всё! Результат можно посмотреть здесь: Рэзультат.
Реальный сайт о парасенгах можно посмотреть здесь — Pigfly.ru. От первоначального макета мало что осталось. Ну, главное идея, а править сайт можно бесконечно. :) Кстати, в следующем уроке я расскажу как сделать такое симпатичное меню, как сейчас на Парасенгах.

Напоминаю, что наша верстка является "плавающей". Грубо говоря — элементы на странице располагаются как бы в потоке, занимая свободные места. Поэтому мы и ограничили часть пространства контейнером как коробкой, в которую уложили поочередно все элементы. Кроме плавающей, конечно же, есть и жесткая привязка элементов к странице. В самом общем случае для этого каждому элементу строго задается местоположение, например — расстоянием в пикселах от верхней и левой стороны экрана. Но это уже совсем другая история. :)

Удачи!

Блочная верстка веб-страниц. Часть 8.

noreply@blogger.com (Игорь Квентор) — Wed, 27 Jun 2007 04:26:00 +0000

Всем привет! Продолжим верстать нашу страничку.
Сегодня мы практически соберём всю её целиком. Останется потом только кой-чего подправить и приукрасить.
Открываем нашу страничку (все помнят, что работаем в WordPad? хм.. надо бы за рекламу сего продукта с мелкомяххких денежек затребовать). Находим это место:

..........
<li><a href="#">Васёк</a></li>
</ol>
</div>
<img class="line" src="line.gif" alt="" />

и следом сразу вставляем вот этот кусочек:

</div>
<div id="news">
<h3>Самые распоследние новости:</h3>
<ul>
<li>Всю прошедшую неделю лил жуткий дождь, и полёты временно приостановились. Самые безбашенные пиггасы, однако, всё равно кучковались стаями на проводах местной радиолинии и дружно создавали помехи. Малаццы!</li>
<li>Пиггас Хмурый Пятак снова хмурый. Обещал всех урыть. Злой сильно.</li>
<li>У нашего друга Боббса завтра ДР! Поздравления и подарочки просил вручать возле новой будки и непременно на виду у соседского пса Мухомора, чтобы тому завидно стало. Пляски намечаются до самого утра. При наличии на небе луны — будет весело.</li>
</ul>
</div>
<div class="clearfloat"></div>

Что мы тут видим? Во-первых, закрывающий тэг /div, который показывает, что область основного текста закончилась. Далее идёт маркированный список новостей с заголовком 3-го уровня.
В самом низу мы добавили "очистку обтекания" - clearfloat (для неё также в листе стилей пропишем свои правила, а именно очистку с обоих сторон). Для чего это? Вообще наша вёрстка является "плавающей". Вон сколько у нас уже обтекаемых элементов. При этом разные браузеры по-разному воспроизводят такую вёрстку (о том, что IE по-своему "видит" поля и отступы уж и не говорю). В Opera и Firefox можно было бы обойтись и без очистки и сразу ниже писать код футера. Но в IE в таком случае появляются странные подёргивания фона у футера при наведении на его ссылки мыша. Браузер словно хочет подпрыгнуть и заполнить все пустующие места какие есть. Поэтому мы просто добавим эту строчку и не станем заморачиваться.

А теперь открываем наш лист стилей и допишем следующий код:

#news {
background: #ffc;
width: 185px;
color: #665;
margin: 10px 5px;
float: right;
}

#news h3 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}

#news ul {
list-style: url(marker.jpg) inside;
}

#news li {
font-size: 75%;
padding: 5px 10px;
}

Здесь мы для начала поменяли фон для блока новостей, чтобы визуально отделить колонку от основного содержимого. Затем задали ширину блока, цвет для шрифта и обтекание справа. С заголовком получилось хитро. Если вернуться чуток назад, то можно заметить, что у заголовка 2-го уровня (у списка учаснегов), также задан размер шрифта в 120%. Вообще по-умолчанию браузеры сами определяют размеры для заголовков в зависимости от их ранга. То есть по логике вещей, заголовок 3-го уровня должен быть мельче 2-го. А у нас наоборот! Это произошло потому, что заголовок списка учаснегов находится в блоке основного текста, для которого мы задали размер всего шрифта в 0.8em.

Следующим правилом мы задали для списка стиль маркеров. По-умолчанию любой браузер отображает маркеры в виде чёрных кружков. Но можно задать и другое отображение - окружностей, квадратов, без маркеров, или вообще свой собственноручно нарисованный маркер. Как раз так мы и сделали. Нарисовали симпатишную зелёную галку - Симпатишная зелёная галка - с размерами 14х17 пикселей и указали в стиле ссылку на неё - url(marker.jpg). Следом приписали слово inside. Что это значит? Маркеры по-умолчанию не входят в сам блок текста. Когда мы задаём поля для текста, то маркеры не слушаются и вылезают за края. Это не всегда есть гут. Поэтому мы принудительно указали им быть inside, то есть внутри колонки с текстом.

Сохранимся и посмотрим, что вышло!

Блочная верстка веб-страниц. Часть 7.

noreply@blogger.com (Игорь Квентор) — Sat, 23 Jun 2007 15:11:00 +0000

Продолжим верстать страничку.
В блоке текста мы разместим список новых участников. Вообще за это отвечает какой-нить php-скрипт, но так как мы делаем простую статичную страницу, то оформим эту штуку обычным списком. Только на этот раз не маркированным, а нумерованным. Задаётся такой список тэгом ol.

Откроем в вордпаде нашу страничку и сразу после вот этого места:

.................
<img class="venzel" src="venzel.gif" alt="" />
<img class="img2" src="pig2.jpg" alt="Пиггсы на проводе" />

вставим следующий кусок:

<div id="members">
<h2>Список новых учаснегов:</h2>
<ol>
<li><a href="#">Рыжий</a></li>
<li><a href="#">Брат Корнелий</a></li>
<li><a href="#">Муха</a></li>
<li><a href="#">Пигфлай</a></li>
<li><a href="#">Нигга Боб</a></li>
<li><a href="#">Помидорка</a></li>
</ol>
<ol>
<li><a href="#">Косолапыч</a></li>
<li><a href="#">Тушка</a></li>
<li><a href="#">Свин Полезный</a></li>
<li><a href="#">Сало</a></li>
<li><a href="#">Кнопка</a></li>
<li><a href="#">Васёк</a></li>
</ol>
</div>
<img class="line" src="line.gif" alt="" />

Что мы тут видим? Появился новый атрибут members. Так мы обозвали наш список. Тэг h2 - это заголовок второго уровня. Первый уровень, как леххко догадаться, это чаще всего название сайта (его мы оформим позднее, когда займёмся отделкой и доводкой нашей странички).

Далее у нас идут подряд аж целых два нумерованных списка. Зачем два? На макете мы разместили новых участников в две колонки с вертикальной нумерацией в каждой. Можно было бы, конечно, занести всех в один общий список, сделать ширину одной ячейки ровно вполовину отведённого под список места, и тогда ячейки автоматом переносились бы на новую строчку. Но тогда нумерация выглядела бы так:

1 2
3 4
5 6

и так далее. Согласитесь - коряво как-то.
Поэтому мы не стали мудрить, а сделали просто два списка подряд. Но! Каждому в листе стилей задали обтекание слева. Об этом чуть позднее.
Сразу после списков мы положили картинку волнистой линии, которую можно скачать тут: Супир-красивая волнистая линия.

Ну, а теперь откроем наш лист стилей и запишем ещё кусочек красивых правил.

#members {
width: 300px;
height: 190px;
float: right;
}

#members h2 {
color: #f60;
font-size: 120%;
font-weight: bold;
text-align: center;
}

#members ol {
color: #999;
font-size: 120%;
margin: 10px;
float: left;
}

#members li {
margin: 0 5px;
}

#members li a {
color: #0c0;
}

#members li a:hover {
color: #f00;
}

.line {
width: 304px;
height: 13px;
float: right;
}

Расшифруем. Для начала мы задали всему блоку размер. Причём на этот раз не только ширину, но и высоту. Для чего это нужно? Если, например, в нашем списке было бы чуток меньше народу, то картинка волнистой линии "поджимала" бы список снизу, а нам надо, чтобы она была почти под срез картинки с летящим поросенком слева. Поэтому мы задали жёсткий размер как по ширине, так и по высоте. И обтекание справа. Ну, это уже понятно - список должен быть правее указанного рисунка.

Далее задали правило для заголовка второго уровня. Здесь нам уже всё знакомо.
Для самого нумерованного списка с тэгом ol мы указали обтекание слева. То есть оба наших списка (помним, что в коде страницы их два подряд) будут идти не в столбик, а один подле другого рядышком.

Все имена в списке оформлены в виде ссылок (типо на странички профиля участников). Для них мы задали только цвета, без всяких подчёркиваний. Но почему-то на страничке они всё равно подчёркиваются при наведении мышки, да ещё точечной линией! Вот тут как раз и сработал так называемый каскад - список-то лежит в зоне действия атрибута text и поэтому просто перенял от него часть правил.

Последнее правило здесь для рисунка линии. Оно также, как и предыдущие картинки, оформлено классом.
Сохранились. А теперь смотрим, что получилось.

В следующий раз прицепим к нашему сайту блок новостей и симпатишный подвальчик - он же footer.
Enjoy! :)

Блочная верстка веб-страниц. Часть 6.

noreply@blogger.com (Игорь Квентор) — Sat, 23 Jun 2007 14:53:00 +0000

Продолжаем верстать самую Правильную веб-страницу! :) Открываем лист стилей. Мы закончили на правиле для всех ссылок страницы. Теперь нам надо красиво оформить основное содержимое страницы. Его мы обзовём атрибутом text.

Запишем далее в листе стилей CSS:

#text {
width: 545px;
font-size: .8em;
color: #333;
margin: 10px auto;
float: left;
}

#text p {
text-align: justify;
text-indent: 1.5em;
margin: 0;
padding: 0 15px;
}

#text a {
color: #396;
}

#text a:hover {
color: #f36;
border-bottom: #f36 dotted 1px;
}

В первом правиле мы указали, что ширина у области текста будет равна 545 пикселям. Размер шрифта 0.8em (в правиле ноль можно не писать, .8em - обозначает тоже самое). С отступами понятно - верх и низ по 10 пикселей, по бокам на автомате. А вот последняя строчка как раз и задаёт местоположение нашего блока текста ни где попало, а с левой стороны. Слово float переводится как "обтекание". Но тут есть одна фишка. Читаем: "обтекание - слева". Но ведь это сам текст находится слева! А обтекает его всё остальное справа. В этом есть некая путаница. Чтобы не заплутать, просто запомните: left - сам объект слева, а течёт всё правее. И наоборот, right - объект справа, а течёт всё левее.

Для чего это нужно? Скопировав (или набрав ручками) приведённые выше правила в свой лист стилей и сохранившись, посмотрите, что получилось - текст выровнялся по левому краю странички, оставив справа пустое место. В это пустое место мы потом и вставим блок новостей, присвоив ему в листе стилей какое значение для float? Верно, right!

В следующем правиле мы для абзацев нашего текста задали выравнивание по всей выделенной площади. Слово justify как раз это и означает. Если этого не указать, то по умолчанию весь текст выровняется по левому краю. В англоязычных странах это всегда было нормой и сия норма исходила из размеров английских слов и букв. Но в кириллице такое выравнивание смотрится неаккуратно - весь правый край текста словно рваный. Поэтому мы выровняли его по обоим краям (это не выравнивание по центру!!). Получилось хAрAшO!

Слово indent означает не что иное как обычную "красную строку". Размер её также указан в полтора размера шрифта.
Ну и, наконец, ссылочки. Для неактивной задали цвет эдакий салатовый, а для активной красный, да ещё и с подчёркиванием точечной (dotted) полоской в 1 пиксель толшиной.

А теперь давайте укажем правила для наших картинок. Запишем в листе стилей:

.img1 {
width: 200px;
height: 287px;
margin: 0 0 0 15px;
float:right;
}

.img2 {
width: 200px;
height: 200px;
margin: 10px 10px 0 15px;
float: left;
}

.venzel {
width: 300px;
height: 23px;
margin: 10px 10px 0 15px;
float: left;
}

Здесь ничего сложного. Каждую картинку мы обозвали своим атрибутом img1, img2, venzel, указав в каждом правиле размеры картинок и отступы для них. Вообще отступы и поля проще всего подбирать опытным путём. То есть вначале просто без них, а потом смотрим, куда наша картинка сползла и чуток корректируем, добавляя где надо и убавляя, где не надо. Кстати, значения можно указывать и с минусом. Например -10px. И картинка сдвинется в противоположную сторону, хоть даже и за край экрана.

Каждой картинке мы задали обтекание в соответствии с её расположением на странице. Первая картинка будет справа от текста, вторая - слева, и вензель тож слева.

И ещё одна вещь. Как видите, данные правила начинаются не с решётки # , а с точки. Это и есть признак того, что правило относится не к id, а к class.

Теперь сохраняемся и любуемся на то, что у нас получилось. Если всё выполнили правильно, то на страничке будет красиво выровненный текст с рисунками свинов-летунов и завитушкой-вензелем под текстом.

В следующий раз мы добавим на страницу список новых учаснегов и блок новостей.
:)

Блочная верстка веб-страниц. Часть 5.

noreply@blogger.com (Игорь Квентор) — Wed, 20 Jun 2007 15:23:00 +0000

Итак, продолжим верстать нашу Главную страницу. Что у нас уже тут есть? Контейнер, в котором лежит шапка. Следом за шапкой добавим блок навигации. Находим в коде следующее место:

<div id="header">
</div>

и сразу же за ним запишем следующее:

<div id="nav">
<ul>
<li>Главная</li>
<li><a href="#">О нас</a></li>
<li><a href="#">О летучести</a></li>
<li><a href="#">О везучести</a></li>
<li><a href="#">Свинки-герои</a></li>
<li><a href="#">Подружиццо</a></li>
</ul>
</div>

Как видим - всё просто: наши разделы оформлены как пункты списка, и каждый пункт, кроме первого, является ссылкой. В данном случае вместо адреса несуществующих страниц мы просто вставили решётку (#), которая всегда возвращает нас на текущую страницу.

Теперь настала пора сказать пару слов о каскадности стиля. В правилах для блока навигации мы вначале указали настройки для всего блока, затем для маркированного списка, обозначенного тэгом ul, далее показали правила для строк li... Каждое последующее правило получает "в наследство" характеристики предыдущего: от nav к ul, от ul к li. Все вместе они являются вложенными в тэг контейнера и получают от него часть правил ( в частности центрирование посередине экрана и заданную ширину в 760 пикселей. Это и является своеобразным каскадом.

А теперь сохраняем нашу страничку. Весь код должен выглядеть так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="Сайт о поросенках-летунах и счастливой летучей жизни." />
<meta name="keywords" content="летать, свин-летун, пиггсы, полёты, лёччики, пилоты." />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Пиггасы | Главная</title>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li>Главная</li>
<li><a href="#">О нас</a></li>
<li><a href="#">О летучести</a></li>
<li><a href="#">О везучести</a></li>
<li><a href="#">Свинки-герои</a></li>
<li><a href="#">Подружиццо</a></li>
</ul>
</div>
</div>
</body>
</html>

И идём смотреть в браузере что получилось. :)

А теперь пора наполнить нашу страницу чем-нить полезным, то есть Контентом ("...как много в этом слове..."). На макете в первой части урока видно, что полезная площадь страницы разделена на две функциональные области:
1. Основной текст (с картинками и пр.)
2. Блок новостей.
Обычно, такую вёрстку называют двухколоночной. Как сделать так, чтобы текст остался слева, а новости справа - я расскажу чуть позднее, когда мы займёмся листом стилей. А пока давайте запишем на страничке сразу после этого места:

.........
<li><a href="#">Свинки-герои</a></li>
<li><a href="#">Подружиццо</a></li>
</ul>
</div>

Следующий код:

<div id="text">
<img class="img1" src="pig1.jpg" alt="Летящий свин" />
<p>Летать всегда! Летать везде! Летать много, очень-очень много и всегда с улыбкой на морде лица — вот наше кредо!</p>
<p>Все пиггасы рано или поздно приходят к осмыслению никчемной жизни в грязной луже и подаются в лёччики-пилоты. Причём для летания вовсе не нужна никакая посторонняя техника. Только сильное и несокрушимое желание, а также упорство, спортивная злость и немного вредности. Оно того стоит! Уж поверьте.</p>
<p>Всего лишь после недели тренировок на брезентовом батуте и трёх зачотных прыжков с крыши сарая, адепт получает звание летуна-прыгуна. При этом заработанные синяки, ссадины и шишки также засчитываются в +</p>
<img class="venzel" src="venzel.gif" alt="" />
<img class="img2" src="pig2.jpg" alt="Пиггсы на проводе" />
</div>

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

Тэг div с атрибутом text - это и есть область полезного содержимого странички, иначе называемое контентом. Как и в любом тексте тут мы видим абзацы, обрамленные тэгами р, а также несколько изображений (тэги img).
С тэгами абзаца всё понятно: открылся один, за ним кусок текста, закрылся; открылся следующий, за ним опять кусок текста, закрылся, и т.д.
А вот у тэгов изображений появилось нечто новое - это слово class. Если кто помнит, то оно означает многоразовость использования данного атрибута (в противовес индивидуальному id. Кроме того, class можно использовать и вовсе без тэга div! Что мы и сделали. У тэгов изображения мы просто вписали это слово сразу же за самим тэгом.

Поясним на примере:
Обычно строку для вставки изображения записывают так:

<img src="папка_где_она_лежит/picture.jpg" alt="" />

Мы же записали это следующим образом:

<img class="img1" src="папка_где_она_лежит/picture.jpg" alt="" />

Так мы добавили к тэгу новый атрибут с именем img1 для которого и укажем в листе стилей всё что пожелаем. Это очень удобная запись. Можно, конечно же, влепить сюда и обычный div, но это уже будет не просто тавтология, а прям графоманство какое-то.
Код - вещь красивая!

Готовую страницу можно посмотреть здесь.
Картинка для шапки тут.
Картинка для блока навигации здесь.
Картинка летуна здесь.
Картинка поросят на проводе здесь.
Картинка вензеля здесь.
Сам лист стилей находится здесь.

Блочная верстка веб-страниц. Часть 4.

noreply@blogger.com (Игорь Квентор) — Sun, 17 Jun 2007 13:30:00 +0000

Вообще принято некое упорядоченное расположение правил в css. Вначале указываются общие для всей страницы, а потом идут в той очерёдности, в которой элементы на странице появляются сверху вниз. Мы пока указали не все общие элементы. Нет заголовков, списка, ссылок (тэги h, ul, a). Их мы добавим позже, а пока начнём уже хоть что-нить прицеплять весомое к странице.

Из нашего макета я вырезал целиком шапку (её мы используем не как картинку, а как фон), оба рисунка с поросями, рисунки вензеля, зелёной линии внизу, фон полосы навигации (не весь, а только отрезанный кусочек 8х35 пикселов) и зеленой галки у списка новостей. Итого у нас вышло 7 изображений. Их поместим в той же папке, где у нас лежит сама страничка и лист стилей.

Далее в листе стилей пишем правило для "шапки" (header):

#header {
background-image: url(header.jpg);
width: 760px;
height: 158px;
}

Здесь мы указали, что вся наша шапка залита фоном-картинкой с размерами 760х158 пикселей (такая у меня вышла при разрезании макета). url(header.jpg) - это ссылка на картинку. Важный момент! - почему ссылка выглядит как простое имя с расширением для картинки? Да потому, что сама картинка лежит в той же самой папке, где и лист стилей. Это так называемая относительная ссылка. Если бы была абсолютной, то начиналась бы с http://

А теперь сохраним наш лист стилей в ту же самую папочку, где лежит Главная страница и картинки. Сохраняем таким же образом, как и раньше, только в имени добавляем расширение .css - style.css

Теперь мы снова откроем нашу Главную страницу. Открываем правой кнопкой мыши и в контектсном меню выбираем Открыть с помощью - Текстовый редактор Wordpad. Между тегами body добавляем следующий код:

<div id="container">
<div id="header">
</div>
</div>

Сохраняемся. Открываем нашу страничку браузером и любуемся на ровно посерёдке отцентрованную шапку. Что мы сделали? Мы добавили в тело страницы нашу "коробочку" - контейнер, а уже в него положили шапку. То есть вложенность тэгов налицо.
div id - это и есть тэг с индивидуальным атрибутом, который стоит после знака равенства и должен быть обязательно заключен в кавычки.

Полюбовались? Теперь продолжим писать код для листа стилей. Открываем его также в WordPad и следом за правилом для шапки запишем правило для блока навигации:

#nav {
background: url(nav_bg.jpg) repeat-x;
color: #f00;
font-size: 120%;
font-weight: bold;
line-height: 1.8em;
text-align: center;
}

#nav ul {
list-style-type: none;
}

#nav li {
display: inline;
margin: 0 8px;
}

#nav li a {
color: #0c0;
}

#nav li a:hover {
color: #f00;
}

Уже немного сложнее, не правда ли? Разберём по косточкам.
Панель навигации будет у нас одна - сразу под шапкой, горизонтальная. (в подвале сделаем дублирование обычными ссылками). Для её реализации мы воспользуемся таким элементом как маркированный список.
Для тех, кто не в танке объясняю:
маркированный список - это список из нескольких пунктов, записанных в столбик, у которых слева взаместо порядковых чисел стоят маркеры (кружки, квадратики, и пр.)
Список сей в HTML обозначается тэгом ul. Элементы списка (а попросту говоря - строчки) обозначаются тэгом li. Выглядит это примерно так:

<ul>
<li>Утром надел трусы.</li>
<li>Не забыл про часы.</li>
<li>Снова не забыл.</li>
</ul>

Как видим, тэги имеют парные закрывающие тэги, и тэг li вложен в тэг ul. Теперь вернёмся к нашему листу стилей. Блок навигации мы обозвали атрибутом nav. Вначале укажем общие настройки для него: бэкграунд - это картинка с именем nav_bg.jpg размером 8х35 пикселей. Это обычный такой "столбик" с градиентом от белого к серому сверху вниз. Чтобы растянуть его по всей полосе навигации, мы указали в значении слово repeat-x, что означает "повторить по оси х", то есть по горизонтали. Далее указали цвет шрифта ярко-красного цвета #f00 для активного раздела. Он у нас не будет ссылкой, а останется простым текстом (делать на Главной странице ссылку на самое себя - тавтология). Остальное в этом правиле несложно: размер шрифта, толщина, высота по вертикали (тут появилась новая единица измерения em, которая равна высоте прописной буквы выбранного шрифта. Значение 1.8em показывает, что шрифт увеличен на 1.8 высоты стандартной буквы), ну и выравнивание текста по центру.

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

Далее указываем для строк списка расположение по горизонтали, то есть в линию, чтобы не получился обыкновенный столбец. И отступы: сверху и снизу по нулям, с боков по 8 пикселей.

А теперь укажем, каким образом наши менюшки будут раегировать на наведение мышкой на них. Понятное дело, что менюшки - это ссылки на другие разделы нашего сайта. А каким тэгом означаются ссылки? Пральна, тэгом a. Поэтому пропишем ещё пару правил для этих ссылок. В первом мы обозначили цвет ссылки в спокойном состояни, а во втором - в активном, то есть при наведении мыши.

Ну а теперь следом добавим вот такое правило:

a {
text-decoration: none;
}

Оно указывает, что все ссылки на странице по умолчанию не используют подчёркивание. Ну согласитесь, в меню навигации это не всегда выглядит красиво. А там где нужно, мы это правило изменим.

Блочная верстка веб-страниц. Часть 3.

noreply@blogger.com (Игорь Квентор) — Sun, 17 Jun 2007 13:06:00 +0000

Итак, CSS или иначе Каскадный Лист Стилей. Почему каскадный объясню позднее. Открываем новый документ в WordPad-е и вписываем следующую строку:

/*(C) PIG.RU, 2007 | piggs@pig.ru */

На самом деле содержимое строки не так важно. Она у нас закомментирована слэшами со звёздочками /* */ (кстати, слэш на клавиатуре находится во второй снизу строке в английской раскладке, а не вверху справа в русской. Не перепутайте, это разные знаки!)
Строка комментария не читается браузерами. Она нужна только для служебной информации. Кодеры обычно вписывают туда свои пометки, дабы самому не запутаться в коде, когда его много. В самом верхнем комменте (как у нас) пишутся ссылки на сайт кодера или дизайнера, его мыло, авторские права и т.п. Мы ограничимся только копирайтом и мылом.

Ну а теперь непосредственно код!
В листе стилей код называют правилами. Каждое правило состоит из селектора (читай - атрибута) и объявления. Объявление, в свою очередь, состоит из свойства и значения.
Рассмотрим пример:

p {color: #000;}

Данная запись означает, что все абзацы будут набраны чёрным шрифтом. Здесь "р" - это атрибут, а то, что находится в фигурных скобках и есть Объявление правила для этого атрибута. Слово color является Свойством объявления, а "решётка" с тремя нулями - шестнадцатиричная запись цвета. Всем, кто пользуется Фотошопом это должно быть известно. Почему всего три нуля, ведь в данном обозначении должно быть шесть цифр (или букв)? Когда пары знаков одинаковы 00 00 00, то допускается писать сокращённо - 000. Все браузеры это понимают.

Правило можно писать как угодно - хоть в строку, как у нас, хоть в столбик - это роли не играет. Важно только не забывать две вещи:
после каждого Свойства необходимо ставить двоеточие, а после Значения - точку с запятой. Если пропустить хотя бы в одном месте эти знаки, то IE и Firefox будут глючить, а Opera, возможно, и покажет всё без ошибок.

Сначала зададим общие правила для страницы:

* {
margin: 0;
padding: 0;
border: 0;
}

body {
padding: 2% 0 0;
background: #fff;
color: #333;
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
}

#container {
width: 760px;
margin: 0 auto;
}

Поясним:

1. В первом правиле звёздочка означает не что иное как всю страницу разом. Сама звёздочка - это не тэг и нигде потом в коде страницы не указывается. Браузеры прекрасно понимают её значение и применяют данные с ней правила ко всей странице. В правиле мы указали последовательно:
Отступы - 0,
Поля - 0,
Рамка - 0.
Это нужно для того, чтобы ни поля, ни отступы, ни рамки не появлялись там, где нам не нужно. Если этого специально не указывать, то например тот же IE напихает этого добра куда ни попадя, испортив нам всю кухню. Уж лучше мы в следующих правилах сами добавим что нужно и где нужно. Значения уккзываются либо в процентах, либо в пикселах. Если стоит ноль, то единицу измерения не нужно указывать.

2. Следующим правилом мы задали для тела страницы следующие указания: поля - сверху 2%, с боков по нулям, снизу тоже ноль. Это значит, что наша страничка не будет лепиться к верхушке окна браузера, а отступит от него на 2% размера окна. Тут значения идут подряд без запятых и только после последнего ставится точка с запятой. Вообще у нас 4 стороны. И значения для них задаются по часовой стрелке, начиная сверху, затем правое, низ и левое. Но так как у нас по бокам одинаково, то и значений мы дали всего три.
Ещё раз:
а) 5px 10px 15px 20px; - сверху будет поле в 5 пикселов, справа 10, снизу 15, слева 20.
б) 5px 10px 15px; - сверху 5, с боков по 10, снизу 15.
в) 5px 10px; - сверху и снизу по 5, с боков по 10.
г) 5px; - со всех сторон по 5.
Думаю, принцип понятен.

Остальное несложно - фон белого цвета, цвет шрифта тёмно-серого (333), ниже перечислены в порядке предпочтения используемые семейства шрифтов. Тут есть одно замечание - если имя шрифта состоит более чем из одного слова, то его нужно взять целиком в кавычки.

3. А вот в этом правиле уже что-то новенькое - появилось незнакомое слово container с решёткой. Данная решётка и означает уникальность атрибута. То есть тэг div с данным атрибутом будет использован только один раз на странице. Зачем вообще нужен контейнер? А затем, чтобы поместить нашу страничку в центр экрана монитора. Для этого мы указали у контейнера отступы: сверху и снизу ноль, а с боков auto. Сие и означает, что при любом размере экрана наш сайт всегда будет строго по центру. Ширина страницы 760 пикселей.

Возникает вопрос: а почему бы у тэга body не указать такую же ширину страницы и авто-выравнивание? Дело в том, что браузеры читают данный тег (body) по-своему и отдают под него ВСЮ видимую область экрана. А нам это не нужно. Вот мы и приспособили эдакую "коробочку" под нашу страничку.

Ту би континуед! :)