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

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

2009-08-01T00:54:00.003+05:00

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

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

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

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

2009-06-17T02:13:00.004+05:00

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

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

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

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

2008-04-13T19:51:00.003+05:00

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

Ибо чтоп!

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

Wordpress новенькое!

2008-03-31T21:05:00.002+05:00

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

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

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

2008-03-26T18:23:00.004+04:00

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

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

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

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

2007-12-21T22:27:00.000+04:00

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

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

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

Enjoy! :)

Переезжаем!

2007-12-16T15:53:00.000+04:00

Ось так! :)

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

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

Websovet.Com

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

2007-12-08T23:20:00.000+04:00

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

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

Дирзайте!

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

2007-11-18T15:33:00.000+04:00

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

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

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

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

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

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

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

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

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

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

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

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

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

2007-10-12T15:04:00.001+05:00

Данный цикл статей по-идее должен был появиться раньше, чем блочная верстка сайта вообще и всякие трюки в 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-эффект для ячеек списка ссылок.

2007-08-25T19:48:00.000+05:00

В блочной верстке при оформлении блока ссылок чаще всего используют список (с маркерами или без) — тэг 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 (отражение)

2007-08-13T13:26:00.000+05:00

Сегодня мы оставим в сторонке верстку и займемся дизайном. А именно изобразим лого сайта в модном нынче стиле 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. Рамка

2007-08-06T19:53:00.000+05:00

Под изображениями понимаются всевозможные картинки с расширениями 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. А вообще буду сильно рад, если кто-нить прояснит сей момент, потому как до конца не понятно почему так выходит. :)

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

2007-07-28T21:37:00.000+05:00

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

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

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

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

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

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

2007-07-18T14:21:00.000+05:00

Данная статья не претендует на роль неоспоримых и жестких правил оформления листа стилей 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!

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

2007-07-04T18:22:00.000+05:00

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

Хочу сразу предупредить, что это не картинка! Для создания такого псевдо-облака мы используем все тот же лист стилей 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

2007-07-02T15:21:00.000+05:00

Вот такое симпатичное меню мы сейчас станем делать. Если вы уже пытались что-то подобное изобразить в визуальном редакторе, то заметили, что там все построено на заковыристом 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 - с чего начать?

2007-07-01T23:14:00.000+05:00

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

Когда я верстал свою первую Баечку, то не мудрствуя лукаво установил на компе визуальный редактор от Макромедии под названием Дримвьювер МХ и понеслась родимая! Правда при этом я краем глаза почитывал е-бук по данной проге от Володи Дронова (за что ему пламеный респект). Для первого знакомства с 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).

2007-06-27T09:52:00.000+05:00

Ну а теперь настала очередь подвальчика!
Подвал (или футер - 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.

2007-06-27T09:26:00.000+05:00

Всем привет! Продолжим верстать нашу страничку.
Сегодня мы практически соберём всю её целиком. Останется потом только кой-чего подправить и приукрасить.
Открываем нашу страничку (все помнят, что работаем в 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.

2007-06-23T20:11:00.001+05:00

Продолжим верстать страничку.
В блоке текста мы разместим список новых участников. Вообще за это отвечает какой-нить 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.

2007-06-23T19:53:00.000+05:00

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

2007-06-20T20:23:00.000+05:00

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

<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.

2007-06-17T18:30:00.000+05:00

Вообще принято некое упорядоченное расположение правил в 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.

2007-06-17T18:06:00.000+05:00

Итак, 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) по-своему и отдают под него ВСЮ видимую область экрана. А нам это не нужно. Вот мы и приспособили эдакую "коробочку" под нашу страничку.

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

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

2007-06-15T12:50:00.000+05:00

Итак, продолжим. Для написания кода удобнее пользоваться WordPad-ом, потому что у него неограничено число шагов назад (если нужно что-то исправить), в то время как у Блокнота есть лишь один такой шаг.
Для начала определим тип нашего документа. Любая грамотно свёрстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он не для форсу бандитского, а для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания доктипа. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга <html> просто не будет прочитана, потому как стандарты становятся жесче.
Мы определим нашу страничку в соответствии с самым крутым и строгим на данный момент доктипом под названием Strict 1.0.
Переключаемся в английскую раскладку и неспешно записываем следующие пару строк:

<!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">

Ну, раз тут появилось слово lang и ru, то ежу понятно, что это указание на езыг документа. Не путать с кодировкой! Её мы укажем позднее. В этой же строке, в общем-то, и начинается уже код самой страницы с тэга <html>

Следующий тэг <head>. В нём содержится всякая служебная информация: название страницы (то, что входит в титл), кодировка, ключевые слова для поисковых роботов, описание страницы и т.п. Вся эта инфа записана в служебных тэгах meta, которые также не отображаются на странице в браузере.
Мы запишем на нашей страничке следующую информацию:

<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" />

Поясним:
1. Первый мета-тэг показывает на кодировку сайта. В рунете желательно пользовать всетки виндовз-1251, чтобы случайно у Васи Пяткина в его IE версии 3.0 не повылезали вместо красивого и грамотного текста всякие кракозябры.
2. Второй мета-тэг - это краткое описание сайта. именно эта строка первой покажется в результатах поиска яндекса или рамблера, если они ещё нас найдут.
3. В третьем мета-тэге ключевые слова для поисковиков. Объяснять не буду зачем это нужно, думаю и так ясно.
4. И наконец последняя строка - это не что иное как ссылка на наш лист стилей CSS, который мы создадим чуть позже. Про него скажу лишь вот что: по умолчанию наш лист стилей могут использовать любые устройства вывода инфы будь то экран монитора, принтер, либо телетайп какой-нить шпиёнский. Но если мы хотим указать для какого устройства конкретно предназначена страница, то после атрибута type со значением text/сss должны будем указать дополнительный атрибут media со значением print - для принтера, hendheld - для "наладонника", screen - для монитора только и т.д. Это понятно - если кто-то захочет распечатать нашу страничку, то ему вовсе ни к чему на отпечатке навигация, кнопки-картинки, рекламные баннеры и супер-красивые заголовки - только инфа. И вот для такого случая пишется отдельный лист стилей, попроще.

Следующим парным тегом будет титла - это тот текст, который появляется на самом верху браузера при открытии странички:

<title>Пиггасы | Главная</title>

Понятное дело, что туда необходимо вписать название страницы. Не Index, не default, не просто цифра 1 какая, а настоящее, хорошее название. Это также необходимо, как и название для книги. Да и поисковые роботы сильно уважают, когда в титле набран вменяемый текст.
А теперь впишем закрывающий тэг </head>. Все, со служебной инфой покончено. Обратите внимание - тэги как бы вложены друг в друга:

<head><title></title></head>

Это правило вложения должно выполняться всегда! Никаких перестановок типа:

<head><title></head></title> - НЕПРАВИЛЬНО!

Вот мы и добрались до тЕльца нашей странички, которое и обзывается соответствующим тэгом <body>. Пока давайте допишем код страницы до конца (он ещё будет впоследствии дополнен):

<body>

</body>
</html>

Сохраним документ в отдельной папке. Сохраняем следующим образом:
Нажимаем Файл - Сохранить как, в строке Тип файла указываем Текстовый документ, в строке Имя файла пишем полностью имя с расширением index.html. Почему именно index? Любой браузер, зайдя по адресу www.пиггс.ру станет сразу искать страницу с этим названием. Устроены они так. Индексная страница для них всегда является главной, стартовой.

В следующем уроке начнем писать для нашего сайта лист стилей css.
Силящийся - да асилит! :)

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

2007-06-15T11:13:00.000+05:00

Данный урок был впервые опубликован мной на сайте Глобатора, и так как весьма там популярен, то я решил повторить его здесь, убрав привычные для форума лирические отступления. :)
Мы создадим вот такой симпатишный сайт, используя язык разметки xhtml и лист стилей css:

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

Рамка (border) - это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).
Поля (padding) - отделяют содержимое блока от его рамки, чтобы текст, например, не был "впритык" к стенкам блока.
Отступы (margin) - это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.
Блоки, как и таблицы - это элементы всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задаётся такой параметр как "обтекание" (float). Но об этом чуть позже.
Соответствие требованиям XHTML. Это не что иное, как разделение содержимого страницы и его представления. Когда web только зародился, то такое разделение принималось по-умолчанию. Имеется в виду, что содержимое, то есть текст, например, располагается непосредственно в теле страницы, а все его описательные характеристики, такие как: цвет, толщина и размер шрифта - в отдельном файле (листе стилей CSS), присоединённом с помощию обыкновенной гиперссылки к основной странице. Ведь это очень удобно! Когда страниц сайта очень много, а вам вдруг захотелось поменять размер шрифта, то понадобится всего лишь сделать поправку в листе стилей. И шрифт изменится сразу на всех страницах.
В теле страницы кроме самого текста имеются так называемые HTML-тэги. Нужны они для логической разметки страницы. То есть задают заголовки, абзацы, цитаты и т.п.
Тэг - это особая конструкция языка HTML. Различают открывающий и закрывающий тэги. В самом простом случае тэг - это как деталь детского конструктора - имеет своё строгое предназначение: планка - значит планка, колесо - значит колесо и ничто иное. К примеру тэг абзаца:

<p>Текст абзаца.</p>

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

<img src="images/risunok.jpg" alt="" />

Тэг div.

В отличии от строгих привязок стандартных HTML-тэгов к своему содержимому ("р" - к абзацам, "а" - к ссылкам, "img" - к изображениям), тэг div является по-сути нейтральным. То есть ему всё равно что содержать, хоть всё разом. Его используют для задания функциональных областей на странице, таких как: "шапка" (header), блок навигации, блок основного содержимого, футер (footer) или подвал по-нашему.
У данного тэга, как и у любого другого, имеются свои собственные атрибуты.

Атрибут - описательная характеристика тэга. То есть что он может делать и каким образом. Например, опять же возьмём тэг изображения:

<img src="images/risunok.jpg" width="200px" height="50px" alt="Рисунок меня, где я кормлю собаку, а она кусается зачем-то" />

В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов. Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpg из папки images (src - не что иное как сокращенное от английского search - найти), шириной 200 пикселей, высотой 50 пикселей. И + альтернативный текст, который всплывает на страничке при наведении мышки на рисунок. Это не блажь, а тоже необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. Вот для них и существуют альтернативные подписи к картинкам. Если же картинку нет смысла подписывать (например маркер списка или стрелка какая), то у этого атрибута оставляют пустое место - alt="".

Итак, атибуты тэга div. Их есть всего два:

id - атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например "header" (про кавычки не забываем), или "footer". Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением "header" (шапка) одни настройки, а для подвала "footer" совсем другие, и браузер верно распознает, что вот этот абзац, обозначенный тэгом р относится к "шапке" и будет набран крупным и красным шрифтом, а вот этот к "подвалу" и будет мелким и серым шрифтом. И никакой путаницы!

class - атрибут, позволяющий одно и то же значение придать нескольким элементам. Например всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать.

Пока все. В следующей части урока начнем уже верстать нашу страницу, используя лишь программку Блокнот или WordPad - кому как удобнее.

Элементы дизайна в стиле web 2.0. Стеклянная (лакированная) кнопка.

2007-06-07T15:49:00.001+05:00

На многих сайтах, выполненных в стиле web 2.0, можно увидеть объемные, словно бы лакированные объекты (кнопки, баннеры, указатели и пр.). Для достижения подобного эффекта вовсе не обязательно использовать 3D программы, как например 3D Studio Max™. Все это можно леххко сделать в Photoshop™ причем с минимальными усилиями, а эффект получится просто замечательный. :)
Итак, нарисуем крупную, яркую кнопку, призывающую посетителя сайта прикупить у нас чего-нибудь нужного или полезного. Для этого открываем фотошоп и создаем новый документ размерами 400х200 пикселей. Затем создаем новый слой и творим на нем. Выбираем инструмент Rounded Rectangle Tool (скругленный прямоугольник), в настройках инструмента выставляем радиус закругления в 20 пикселей и включаем режим вектора, нажав кнопку Paths. Теперь рисуем нашу будущую кнопку нужного размера. Если хотите, чтобы кнопка была строго квадратная, то прежде нажмите и удерживайте клавишу Shift.
Теперь нажав Ctrl+Enter, преобразуем наш контур в выделение (напоминаю, что все действия с клавиатурой нужно производить при включенной английской раскладке) и зальем любым цветом при помощи ведерка (Paint Bucket Tool).
Далее зальем выделение красивым градиентом. Для этого заходим в Layer – Layer Style – Gradient Overlay. Здесь в строке Blend Mode (Режим) нужно включить Multiply (Умножение) и выбрать из палитры подходящий градиент. Обычно берется двухцветный, от светлого к темному тону.
Получаем вот такую заготовку:

Теперь приделаем к нашей кнопке тень. Вообще тень — это универсальный инструмент для того, чтобы придать элементу объем, но и злоупотреблять им не стоит, иначе сам объект может «зависнуть» над страницей и будет выглядеть нелепо. Идем в Layer – Layer Style – Drop Shadow. В настройках выставим Opacity (Прозрачность) – 45%, а угол падения – 90°.
Создадим следующий слой, где будет красоваться призывная надпись. Выполним ее белым цветом.

Теперь сделаем на кнопке блик, чтобы ещё сильнее подчеркнуть объем. Для этого опять создадим новый слой и на нем при помощи все того же инструмента Rounded Rectangle Tool нарисуем поверх первого второй прямоугольник, но теперь уже со скруглением в 18 пикселей, отступив от краев первого на 2 пиксела (для более точного попадания можно использовать линейки). Снова нажимаем Ctrl+Enter чтобы преобразовать контур в выделение, и заливаем его градиентом от белого к прозрачному (просто выбираем инструмент Gradient Tool, выставляем цвет и элементарно проводим мышкой сверху вниз по рисунку). Зададим этому слою прозрачность в 70%. Получим вот это:

А теперь самое интересное! Оставаясь на этом же слое, нарисуем криволинейный контур при помощи инструмента Pen Tool (Перо). Делается это элементарно: сначала данным инструментом (в настройках должна быть нажата кнопка Paths) расставляем четыре якорных точки вокруг рисунка – две по бокам и две под ним – получим прямоугольную область. Теперь переключим перо на инструмент Convert Point Tool (находится в том же наборе инструментов, где и само перо). Кликнув на контуре, активируем якорные точки. Теперь их можно корректировать. Нажав на любую и двигая мышкой, придадим контуру вот такой вид:

Теперь снова клавишами Ctrl+Enter преобразуем контур в выделение и смело нажмем клавишу Delete. Нижняя часть выделения исчезнет, и мы получим отличный яркий блик на нашей кнопке! Все просто. Enjoy! :)

Элементы дизайна в стиле web 2.0. Лейбл.

2007-06-03T11:22:00.000+05:00

Просматривая множество сайтов, выполненных в модном нынче стиле web 2.0, я обнаружил, что дизигнеры, работавшие над проектом, не заморачивались поиском каких-то супер-эксклюзивных и необычных форм, а создавали объекты стандартными инструментами фотошопа. Например, вот такие симпатичные лейблы:

отрисованы обычным инструментом Custom Shape Tool. В комплекте фотошопа (CS) таких готовых форм предостаточно – от всяческих листочков-звездочек, до всевозможных зверушек. При желании можно найти в сети ещё тонну таких заготовок (а зачем изобретать велосипед?).
А посему смело запускаем прогу и начинаем рисовать нечто подобное.
Для начала создадим новый документ размером 200х200 пикселей с белым фоном (Background contents: White). Тут по ходу важное замечание: если вы хотите добавить к вашему лейблу отбрасываемую тень, то сразу измените цвет фона под цвет вашей страницы, для которой предназначается лейбл. Иначе при сохранении в формате gif у тени могут появиться некрасивые рваные края. Это же самое относится и просто к рисункам в данном формате (gif) – лучше сразу их рисовать на подходящем фоне.
Итак, создали новый документ. Добавляем новый слой. В палитре выбираем любой цвет, отличный от белого. Далее выбираем инструмент Custom Shape Tool. В строке редактирования инструмента находим окошко Shape и в нем ищем картинку под названием Seal (Клеймо). Ну, а теперь собсна рисуем это самое клеймо на новом слое. Чтобы оно вышло ровным и красивым, прежде нажмем и будем удерживать клавишу Shift.
Теперь нам нужно наше клеймо растеризовать для дальнейшей работы. Лезем в меню Layer – Rasterize – Shape. Затем нажимаем клавишу Ctrl и удерживая ее, кликаем на слое с клеймом в панели Layers. Клеймо станет выделенным.
Далее выбираем инструмент Gradient Tool, выставляем двухцветный градиент от темно-красного к ярко-красному и применяем его на нашем выделенном клейме по диагонали с левого верхнего угла к правому нижнему. В результате получим вот такую штуковину:

Теперь добавим падающую тень. Для этого забираемся снова в меню Layer – Layer Style – Drop Shadow. В настройках выставляем Distance: 8 px, а остальное оставим без изменения. Жмем OK. Получаем вот это:

Уже стало веселее. :) Осталось только добавить надпись, которую мы также сделаем объемной, словно бы вырезанной на поверхности лебла. Создадим новый слой. В палитре выставим белый цвет. Затем выберем инструмент Horizontal Tape Tool (буковка Т) и пишем прямо поверху лейбла чего-нибудь:

Чтобы придать тексту объем, нужно прежде растеризовать его, как до этого мы поступили с самим лейблом. Только теперь путь будет выглядеть так: Layer – Rasterize – Type. Затем выделяем его, опять же придавив клавишу Ctrl и кликнув на слое с текстом (кликать надо на имени, а не на самой иконке, причем на клаве должна быть включена английская раскладка). Затем снова лезем в Layer – Layer Style – Bevel and Emboss. Здесь нужно в настройках переключить направление выдавливания (Direction), установив пупочку в кружке с надписью Down. Чтобы тень внутри выдавливания не была слишком черной (по умолчанию всегда выставлен «чиста канкретный» черный цвет), то в строке Shadow Mode в окошке выбора цвета возьмем что-нить посветлее, например средний серый. Давим на кнопку ОК и вуаля! Получаем симпатишный и живой лейбл. :)

Почему вебмастеринг?

2007-06-03T01:59:00.000+05:00

Следуя тенденциям моды, а мож и просто подспудному и трудно-объяснимому желанию, решил завести сей блог, дабы кропать небольшие статейки, прямо или косвенно связанные с вебмастерингом. Так почему именно это слово?
Основной мой сайт Dizweb.ru посвящен веб-дизайну и, казалось бы, сам блог тоже должен соответствовать теме. То есть чисто дизайну и всё. Но знакомясь с работами матерых дизигнеров, все больше замечаю, что товарищи эти весьма настойчиво пропагандируют умения и навыки как в самом дизайне, так и в верстке и даже в кое-каком программировании сайтов. И в этом есть здравый смысл: имея такие "расширенные" навыки, дизигнер может уже на стадии создания макета учитывать требования к верстке сайта. Ну, а что касаемо программинга - в общих чертах хотя бы, но знать его тоже необходимо.
Вот именно поэтому данный блог не только о чистом дизайне, но и об остальном тож. Вобщем-то вебмастеринг - это и есть то, чем занимаются веб-мастера. :)
Само собой разумеется, что не может существовать одновременно супер-пупер-мега-кул-дизигнер-верстальщега-программера в одном лице. Обычно веб-мастер специализируется в основном на чем-то одном, а остальное - полезное подспорье в работе. Но такое положение вещей имеет неоспоримые плюсы. Во-первых, веб-мастер подходит к решению вопроса комплексно. Т.е. уже на начальном этапе продумывает все нюансы проекта - от достойного внешнего вида, до удобства пользования сайтом, сиречь юзабилити. И о грамотной верстке также не забывает. Валидаторы не дремлют, и недалёк тот день, когда сайты без DOCTYPE вверху страниц просто не будут отображаться браузерами.
Во-вторых, разделение труда при создании сайта - это куча лишних заморочек как для заказчика, так и для самих исполнителей (имеются в виду небольшие проекты, не говоря уже о "хомяках"). Когда собирается группа, то каждому учаснегу трудно освободиться от личных предпочтений и вкусов. Кому-то нравится Flash-анимация, кто-то терпеть её не может, потому что грузится долго; кто-то ратует за спартанскую простоту, а кому-то подавай картину маслом во весь монитор. При этом есть и пожелания-предпочтения самого заказчика, причем зачастую настолько туманные, что задача усложняется просто в разы.
В-третьих, веб-мастер - это чаще всего фрилансер, герой-одиночка, человек, который может решить задачу самостоятельно, но не откажется поработать и в команде, если оно того стоит. А там он завсегда найдет общий язык и с дизайнером - ака чиста-художник, и с ортодоксом-программером.
А посему здесь не будет узкоспециализированных статей, а будет всего понемногу. Надеюсь, для кого-то полезного, а для кого-то забавного и не более того. :)