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

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

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

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

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

Принцип работы kareebu Secure достаточно прост. Плагин устанавливает пароль на директорию

1

/administrator

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

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

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

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

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

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

где

1

password

Поле с именем пользователя можно оставить пустым. Второй режим “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 - чтобы сделать выделение полужирным начертанием какого-либо участка текста на странице. И будете не правы! Чтобы подтвердить свои слова, приведу скриншот готового шаблона “Монстров”:

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

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

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

То, что элемент

1

strong

1

b

1

strong

Элемент

1

b

1

strong

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

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

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

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

1

display:block

На этом все.

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

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

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

В основу создания шапки я положил свойство вложенных слоев на

1

div

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

1

bg-nav.gif - 300x70px

1

bg-header.gif - 800x50px

1

logo.gif - 30x30px

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

1

div id="wrap"

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

Затем создается слой

1

div id="header"

1

div id="wrap"

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

Затем создаю слой

1

div id="nav"

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

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

Теперь создаю еще один слой

1

div id="head"

1

div id="nav"

Поэтому фон слоя

1

div id="nav"

1

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;
}

Чтобы сделать слой кликабельным, помещаю внутрь него ссылку. Так как изначально она является строчным элементом (

1

inline

1

div id="logo"

Поэтому “превращаю” ссылку в блочный элемент с помощью свойства

1

display:block

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

Осталось создать навигационное меню шапки, которое должно располагаться поверх слоя

1

div id="nav"

1

div id="nav"

1

div id="head"

1

70px - 50px = 20px

Теперь достаточно сместить список вправо с помощью

1

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;
    }

Единственный момент, который вызвал у меня затруднения, это появившиеся еле заметные отступы между внешним блоком

1

ul

1

li

1

display: inline

Но после “наводки” Kray Storm с форума

1

forum.htmlbook.ru

1

li

1

display: inline-block

1

line-height: 20px

1

ul

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

1

img

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

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%;
    }

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

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

На этом все.

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

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

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

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

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

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

1

H1

1

h1

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

1

заголовок + ссылка + картинка

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

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

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

На этом все.

При верстке макета столкнулся с такой задачей. Имеется логотип, внутри которого необходимо разместить текст.

Логотип создается с помощью элемента - заголовка первого уровня

1

h1

1

forum.htmlbook.ru

Необходимо сделать также, как и на psd-макете. Чтобы текст располагался по-вертикали по-центру, и был смещен при этом вправо. Часть html-кода, в котором создается логотип со ссылкой, показана ниже:

С установкой фонового изображения проблем не возникает. Задаю ширину и высоту для блока h1 равной ширине и высоте логотипа. И прописываю для него картинку в качестве фона.

Текст-ссылку внутри блока также стилизую в соотвествии с тем, как она изображена на макете. А вот центрование текста - здесь есть некоторая тонкость. Спасибо SelenIT, что кратко и точно объяснил, как поступать в данном случае.

Итак. С помощью свойства

1

display: table

1

h1

1

vertical-align

Строчный элемент

1

а

1

display: table-cell

1

vertical-align: middle

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

1

padding-left: 80px

Ниже привожу кусок кода, отвечающего за стилизацию логотипа сайта:

.logo{
  background: url(../img/logo.gif) 0 0 no-repeat;
  height: 100px;
  width: 180px;
  display: table; /*!*/

}
.logo a{
  font-family: 'webfontbold';
  font-weight: bold;
  font-size: 20px;
  color: #090909;
  text-transform: uppercase;
  text-decoration: none;
  display: table-cell; /*!*/
  vertical-align: middle; /*!*/
  padding-left: 80px;
}

Вот задача и решена. Разобрался с центрирование текста по-вертикали с помощью правил

1

display: table

1

display: table-cell

1

vertical-align: middle

На этом все.