Простой ролловер

06.01.2010 | Рубрики: Верстка | Комментарии (17)
Тэги: , , , ,

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

Для решения этой задачи можно применить свойство текста, называемое text-indent, которое обычно применяется для “красной строки”. Но только задать ему отрицательное значение, причем достаточно большое. Тогда текст будет прятаться далеко за границей страницы сайта. Таким способом поступают довольно часто, особенно при использовании рисованных логотипов.

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

santabig.gif

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

С чего начать изучение верстки?

04.01.2010 | Рубрики: Верстка | Комментарии (19)
Тэги: , , ,

htmlicon.pngТема сегодняшнего поста: С чего начать изучение верстки? Вопрос этот далеко не праздный, и каждый для себя выбирает собственный путь. Я расскажу о том, как сам начинал это увлекательнейшее путешествие в мир HTML и CSS. Надеюсь, кому-либо из вас это станет если не путеводной звездой, то хотя бы наметками к цели.

Итак, верстка. Кто еще не в танке, слушайте: верстка в данном случае означает не набор свинцовыми буквами свежей статьи в газете “Искра”, а превращение рисованного в Photoshop макета сайта в непосредственно сам сайт. Если выразиться иначе, верстка — это кодирование, запись на языке HTML данных, которые любой уважающий себя браузер преобразует в красивый и понятный сайт. Для рядового посетителя сайта этот код так и останется невидимым, спрятанным за широкой спиной браузера. Однако это вовсе не означает, что он при этом может быть абы каким. Код должен быть красивым, удобным и правильным!

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

Поэтому лично я пошел иным путем. Я таки купил книжицу. Совсем не толстую. И до сих пор не устаю ее рекомендовать своим ученикам, ибо актуальность книги все еще свежа и востребована. Автор книги Артемий Ломов, а называется она “HTML, CSS, скрипты: практика создания сайтов”. Издательство “БХВ-Петербург”. Но одной книги мало. Мой метод изучения отнюдь не нов, но вместе с тем весьма действенный. Нужна не одна книга, а несколько. Фишка здесь в том, что каждый автор пишет немного по-своему. Когда ты одну и ту же тему прочитаешь в разных вариациях, то общая картинка гораздо быстрее становится понятной и намного лучше запоминается. У меня второй такой книгой была электронная версия самоучителя по программе Dreamweaver от Macromedia под авторством Владимира Дронова.

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

Конечно, я уже давно не пользуюсь никакими визуальными редакторами, а обхожусь простым текстовиком вроде PSPad. Но опыт был получен немалый. И самое главное — разносторонний. Отчего сам предмет легко и достаточно структурировано уложился в голове.

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

hb-tattoo.jpg

Стр. 27 из 67«...«24252627282930»...»