В предыдущей статье “Photoshop - преобразовываем обводку в CSS” была высказана неточность.

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

Однако, на самом деле эффекты слоя никуда не пропадают, просто они скрыты (точнее - свернуты). Если к слою применены эффекты, то на слое отображается буква fx. И стрелка в виде треугольника справа от этой буквы. Щелчок мыши на этой стрелке раскрывает или скрывает эффекты слоя. Если стрелка направлена вниз, свойства слоя скрыты. Если стрелка направлена вверх, то свойства слоя развернуты.

Давайте на примере рассмотрим, как можно скрывать или раскрывать свойства слоя.

Имеется фрагмент панели слоев Photoshop, на которой к одному из слоев применены эффекты. Смотрим на изображение. На слое есть буква fx, что означает, что у него есть свойства. Но на слое мы их не видим. Однако справа от символов fx есть стрелка, направленная вниз:

Свойства фоновой заливки в Photoshop

Щелкнем на этой стрелке одинарным щелчком мыши. И “картина” сразу поменяется:

Слой с развернутыми эффектами в Photoshop

Эффекты слоя развернулись и теперь видно, какие именно применены к слою.

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

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

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

К стыду своему стоит сказать, до того момента, когда мне подсказали о данном приеме, эффекты, примененные к объектам я выискивал на самом макете. Просматривал внимательно макет и старался отмечать, что, допустим, к боксу применен градиент, внутренняя и внешняя тень.

Такой способ является очень неэффективным - можно легко не заметить или забыть о каком-либо эффекте.

На этом все.


Узнать, на каком CMS работает тот или иной сайт можно различными способами. Это делается в автоматическом режиме с помощью плагинов или сервисов.

Или в ручном режиме, просмотром исходного кода страницы. Помимо этого, существуют еще определенное количество уловок, специфичных для каждой CMS в отдельности.

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

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

Одной из возможностей укрепить оборону сайта является плагин kareebu Secure. Этот плагин написан два года назад и до сих пор пользуется популярностью на ресурсе Joomla! Extensions. Плагин поддерживается версиями Joomla 1.5 и 2.5, так что выбор для сайтовладельцев не ограничен.

Принцип работы kareebu Secure достаточно прост. Плагин устанавливает пароль на директорию /administrator в корневой директории сайта. Благодаря этому закрывается доступ извне и теперь без пароля невозможно просмотреть содержимое этой папки и узнать, что сайт-то работает на Joomla!

Установка плагина kareebu Secure выполняется стандартным способом, через менеджер расширений Joomla. После успешной установки необходимо перейти в раздел Менеджер плагинов и включить “kareebu Secure’. Выполняется это в поле “Состояние”. На изображении приведено изначальное состояние плагина, когда он еще не включен:

Плагин kareebu-Secure

Затем переходим к настройкам kareebu Secure. Они очень просты, запутаться тут невозможно:

Настройки плагина kareebu Secure

Первое поле “Enable” включает или выключает настройки плагина. Понятно, что если настройки введены, но отключены, то плагин работать не будет.

Второе поле “Password” позволяет задать произвольный пароль, устанавливаемый на папку /administrator . Пароль может состоять из комбинации заглавных и строчных букв, а также цифр.

Третье поле “Mode” позволяет выбрать два режима авторизации на сайте с помощью плагина kareebu Secure. Первый (устаревший) режим “HTTP Authentication” работает следующим образом. В адресной строке браузера для входа в административную панель Joomla вводится:

http://localhost:7788/third/administartor?password

где password - это тот самый пароль, который был задан во втором поле. Браузер переадресовывается в back-end сайта и открывается стандартное окно Joomla для входа в административную часть. Необходимо ввести только пароль в соответствующем поле.

Поле с именем пользователя можно оставить пустым. Второй режим “Compatibility” похож на первый, но для входа в админку сайта потребуется указать как логин, так и пароль. Кстати, пароль для входа на сайт и пароль, устанавливаемый в плагине, могут и должны различаться.

Кстати, если вы обратили внимание, стандартная строка:

http://localhost:7788/third/administrator

… для входа в административную часть Joomla после установки плагина kareebu Secure изменилась и теперь представляет из себя:

http://localhost:7788/third/administartor?password

Об этом не стоит забывать. Теперь не зная секретного пароля, невозможно получить доступ к back-end Joomla и войти в нее. На этом обзор плагина kareebu Secure можно закончить.

На этом все.


Практиковался в верстке макета от известной web-студии TemplateMonster. На сайте этой студии есть бесплатные шаблоны с psd-исходниками.

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

Ну, а во-вторых, надоели мне любительские макеты. Кривые, перегруженные нестандартными шрифтами, сделанные в ужасной цветовой гамме. Хоть таких макетов в Интернете - пруд пруди, но вот из-за их качества я решил немного отдохнуть и заняться профессиональными работами.

Почему я так делаю - беру готовые чужие работы и пытаюсь их повторить? Интуитивно для себя я пришел к выводу, что это единственный путь, который может привести меня к собственному умению верстать. Да, первоначально я читал книги, статьи, смотрел видеокурсы (хорошие и плохие).

Плохие учебные материалы я выбрасывал, не дочитав и не досмотрев до конца. Зачем терять время на то, что тебя не сможет научить? Или, еще хуже, научить неправильно, чтобы потом пришлось еще тратить время на переучивание?

Что же я делаю с готовыми чужими работами? Во-первых, я ищу готовые шаблоны с исходниками. Шаблон откладываю на время в сторону и приступаю к самостоятельной верстке по psd-макету. По мере того, как выполняется работа, у меня накапливаются вопросы: как это можно сделать, или - как это можно сделать лучше. Когда код полностью готов, я открываю (с дрожью в руках) чужой шаблон, и смотрю, сравниваю со своим.

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

С длинным вступлением закончено. Приступаю к основной теме данной статьи.

Заключается она (если можно так сказать) в двух словах - элемент strong. Ну и что, спросите вы. Элемент как элемент, ничего в нем необычного нет. Мы прекрасно знаем, для чего предназначен тег strong - чтобы сделать выделение полужирным начертанием какого-либо участка текста на странице. И будете не правы! Чтобы подтвердить свои слова, приведу скриншот готового шаблона “Монстров”:

Элемент strong

Не знаю, как вас, а меня несколько удивило это, когда я открыл шаблон для сравнения со своим собственным. Конечно, опытные верстальщики могут сказать: “Ну и что? Все правильно и мы это давно знаем и применяем”. Но для меня это было небольшим открытием. Грешным делом, я сперва подумал, что кодер ошибся второпях)

Спрашивается, зачем вставлять строчный элемент в ту часть кода страницы, где заведомо могут применяться только блочные элементы? Чтобы потом писать лишние правила CSS для преобразования его в блочный? И только потом уже позиционировать? Ответа для себя не нашел, поэтому полез в Интернет. А точнее - на известный htmlbook.ru.

И я нашел ответ на свой вопрос. Нужно было только внимательно читать! Все оказалось просто.

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

Элемент b предназначен для визуального выделения текста в окне браузера. А вот задача элемента strong - логическое выделение текста. Здесь уже подключается семантика, в соответствии с которой должны создаваться html-страницы. А тот факт, что в обоих случаях текст получается полужирным, только вводит путаницу.

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

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

CSS-правила, которые потом было необходимо добавить к этому элементу, я описывать не буду. Зачем - они и так хорошо видны на рисунке. Более того, там нет ничего сложного.

Единственный нюанс - кодер вынужден был “извернуться” и преобразовать строчный элемент в блочный display:block для дальнейшего его позиционирования в шапке страницы.

На этом все.


Просматривал видеокурс по блочной верстке сайта от Андрей Морковина.

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

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

В основу создания шапки я положил свойство вложенных слоев на div‘ах. Кстати, с этим методом я только недавно познакомился в другом видеоуроке от Дмитрия Семенова. Далее, предполагается, что размеры всех фоновых изображений известны (на практике так и происходит, при вырезании их из psd-макета).

Для чистоты эксперимента приведу эти размеры: bg-nav.gif - 300x70px, bg-header.gif - 800x50px, logo.gif - 30x30px. В CSS-свойствах сделал для них подстановку с помощью фоновой заливки цветом, для подстраховки.

Итак, что я буду делать. Первый шаг стандартный. Создается обертка с помощью слоя div id="wrap", которой прописываются свойства центрирования страницы и задания ей ширины:

#wrap{
  width: 800px;
  height: 100%;
  margin: 0 auto;
  background: #c0c0c0;
}

Затем создается слой div id="header", в котором будет располагаться шапка будущего сайта. Для нее прописываю совсем короткие свойства, с помощью которых гарантированно растягиваю шапку на всю ширину блока-родителя div id="wrap" и задаю ее высоту:

#header{
  width: 100%;
  height: 70px;
}

Затем создаю слой div id="nav", задача которого будет содержать в себе фоновое изображение для навигационного списка шапки. Высоту этого слоя устанавливаю равной высоте шапки, а сам фоновый рисунок позиционирую в правом углу блока. Высота его равна высоте шапки, поэтому достаточно сметить его по-горизонтали вправо, а по-вертикали оставляю как есть.

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

#nav{
  background: url(i/bg-nav.gif) #b318cf 100% 0 no-repeat;
  height: 70px;
}

Теперь создаю еще один слой div id="head", в котором будет размещено еще одно фоновое изображение. По высоте оно меньше, чем фоновое изображение слоя div id="nav" и будет располагаться поверх этого слоя, перекрывая его.

Поэтому фон слоя div id="nav" будет видет только частично, лишь его нижний краешек, для которого и отводится роль фона навигации. Для слоя div id="head" явно задаю его высоту. Код со свойствами приведен ниже:

#head{
  background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat;
  height: 50px;
}

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

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

#logo{
  background: url(i/logo.gif) #36cf18 0 0 no-repeat;
  width: 30px;
  height: 30px;
}

Чтобы сделать слой кликабельным, помещаю внутрь него ссылку. Так как изначально она является строчным элементом (inline), то ей невозможно задать правила, чтобы “растянуть” на всю высоту и ширину слоя-родителя div id="logo".

Поэтому “превращаю” ссылку в блочный элемент с помощью свойства display:block. А вот теперь растяну ссылку, задав для нее ширину и высоту в процентах. Конечно, можно указать эти параметры и с помощью пикселей, так как размеры логотипа известны. Но лучше возложить эту задачу на плечи браузера - пусть сам вычисляет размеры блока-ссылки:

#logo a{
  display: block;
  width: 100%;
  height: 100%;
}

Осталось создать навигационное меню шапки, которое должно располагаться поверх слоя div id="nav". Создаю ненумерованный список, который помещаю внутрь слоя div id="nav". Так как по коду слой div id="head" расположен выше и имеет фиксированную высоту, то список займет все оставшееся пространство под ним: 70px - 50px = 20px.

Теперь достаточно сместить список вправо с помощью float: right и прописать для него обычные свойства, чтобы расположить горизонтально и стилизовать:

#nav ul{
  list-style-type: none;
  float: right;
}
  #nav li{
    display: inline-block;
  }
    #nav a{
      text-decoration: none;
      color: #fff;
      font-weight: bold;
      margin-right: 15px;
      line-height: 20px;
      display: inline-block;
    }

Единственный момент, который вызвал у меня затруднения, это появившиеся еле заметные отступы между внешним блоком ul и внутренним элементом(ами) li. Первоначально для них я прописал свойство display: inline.

Но после “наводки” Kray Storm с форума forum.htmlbook.ru проблема была решена. Для элементов li и я поменял свойство на display: inline-block и для я дополнительно задал высоту строки line-height: 20px, равную высоте блока ul. Зазоры пропали и пункты меню растянулись на всю высоту блока-родителя.

Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими img. Разметка выполнена простыми свойствами CSS, который будут гарантировано работать почти во всех браузерах. При этом она никуда не “съедет”.

Ниже приведу полный код html-каркаса и CSS-кода.

HTML-код:

HTML каркас шапки сайта

CSS-код:

/*  reset  */
  *{
    margin: 0;
    padding: 0;
  }

  /*  main */
  #wrap{
    width: 800px;
    height: 100%;
    margin: 0 auto;
    background: #c0c0c0;
  }
  #header{
    width: 100%;
    height: 70px;
  }
  #nav{
    background: url(i/bg-nav.gif) #b318cf 100% 0 no-repeat;
    height: 70px;
  }
    #nav ul{
      list-style-type: none;
      float: right;
    }
      #nav li{
        display: inline-block;
      }
        #nav a{
          text-decoration: none;
          color: #fff;
          font-weight: bold;
          margin-right: 15px;
          line-height: 20px;
          display: inline-block;
        }
  #head{
    background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat;
    height: 50px;
  }
  #logo{
    background: url(i/logo.gif) #36cf18 0 0 no-repeat;
    width: 30px;
    height: 30px;
  }
    #logo a{
      display: block;
      width: 100%;
      height: 100%;
    }

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

Блок-схема на div'ах шапки сайта

И, наконец, результат всего - готовая шапка сайта:

Готовая шапка сайта

На этом все.


Совсем коротенькая заметка, посвященная такому приему, как помещение текста в логотип.

В чем заключается вопрос? В каждом psd-макете имеется логотип для будущего сайта. Как правило, дизайнер старается сделать его запоминающимся, неординарным. Чтобы пользователю он бросался в глаза, оставил в его мозгу память о посещенном сайте. Поэтому подобные логотипы делаются вычурными, с графикой, нестандартными шрифтами.

При верстке подобный логотип можно сделать почти полностью на CSS, но это займет много времени. И, как правило, верстальщики так не делают.

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

Однако помимо правил семантики HTML, существует еще и такая вещь, как SEO. Без этой технологии не проживет ни один сайт на сегодняшний день, если он хочет быть известным, конечно. А если ему достаточно быть широко известным в узких кругах - тогда можно и забыть о ней.

Поэтому, при верстке HTML-шаблона вырезанную картинку-логотип верстальщик оборачивает в ссылку (ибо логотип всегда должен быть ссылкой), которую в свою очередь оборачивает в заголовок первого уровня H1. Тег h1 должен быть один на всей странице, и это один из самых главных тегов для SEO - по нему поисковые машины находят сам сайт.

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

Текст в логотипе сайта

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

Текст ссылки внутри логотипа

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

Пример кода, решающего такую задачу, показан ниже:

Убрать текст из окна браузера

На этом все.