Статья расскажет Вам о том, как оптимально и с пользой использовать самое значимое место сайта - верх (шапка). Рассмотрим распространённые ошибки, примеры оптимизации и решения проблем, которые могут возникнуть в процессе работы над сайтом. А также выделим положительные стороны данного вопроса.
Где font-size задаёт размер шрифта, а margin убирает отступы вокруг текста, заключённого в тег h1.
Ещё один момент - картинка являющаяся ссылкой содержит по умолчание параметр border равный в 1px, и если этого не исправить, то пользователи, посещающие Ваш сайт с ПК, в нашем случае будут видеть вокруг логотипа бордюр толщиной в 1 пиксель. И логотип просто будет некрасиво выглядеть, выделяясь из общего дизайна сайта. Для того, чтобы этого избежать, можно воспользоваться двумя вариантами. Добавить в код картинки параметр border="0", либо избавить все графические ссылки сайта от бордюра вокруг них, добавив в файл стилей следующее:
Таким образом параметр border будет по умолчанию равен 0 и бордюры отображаться не будут.
Введение
Самым
распространённым вариантом в дизайне сайта является графический верх, иными словами шапка. Т.е. в шапке обычно содержится логотип-картинка сайта, как правило, содержащая небольшой рисунок, подпись на нём и некоторую другую информацию. Это очень большая ошибка. Почему? Потому что верх, страницы, это очень важное и ценное место, которое самым первым делом видят все, именно все, и пользователи и боты. Поэтому верх очень ценен для размещения наиболее важных ключевых слов. Но в большинстве случаев, когда ключевые слова содержатся на картинке, либо их вообще нет, верх пропадает впустую, так как боты не могут прочитать текст расположенный на изображении и вследствие они его просто не учитывают. Таким вот образом самое ценное место страницы просто не используется.Оптимизация шапки
Для
решения это проблемы советую использовать комбинированный вариант, когда верх сайта содержит логотип, но не вовсю его ширину, а в половину. На оставшейся половине можно разместить ключевые слова. Либо такой вариант как на данном сайте, где текст, содержащий главные ключевые слова и заключённый в тег h1, расположен под логотипом как бы является логическим продолжением самой картинки. В таком случае текст и логотип вписываются в общий дизайн сайта, а заодно и используется на максимум, и для пользователей красиво, и для ботов полезноКроме
этого ещё хочу отметить о том, что логотип является не просто картинкой, а картинкой ссылкой. Это сделано для содержания дополнительных ключевых слов. Все прекрасно знают о параметре alt, который предназначен для того чтобы описать картинку. Это прекрасное место, где можно использовать дополнительные ключевые слова или фразы, которые боты очень хорошо читают. Так как логотип содержит ссылку на главную страницу сайта, а параметр alt подпись с ключевыми словами, то мы получаем дополнительную ссылку с важными ключами со всех страниц сайта, это дополнительный вес для морды сайта. Не забываем об этом
Полезные мелочи
А сейчас о некоторых полезных мелочах, которые необходимо знать для того чтобы всё выше указанное выглядело красиво на WAP сайте. Итак, выше я упомянул о том, что текст расположен под логотипом, и визуально является логическим продолжением картинки, а также текст заключён в тег h1, и если внимательно читали, то помним что логотип является ссылкой. Чтобы тут казалось сложного? Но есть несколько НО!. Если вы разместите текст в тег h1, то безобразным образом текст будет гигантских размеров и вокруг текста будут большие отступы, что просто не позволительно для WAP сайта. Избежать этого можно добавив в Ваш файл стилей (style.css) строку примерно следующего содержания:h1{font-size: 11px; margin: 0}
[/strong]Где font-size задаёт размер шрифта, а margin убирает отступы вокруг текста, заключённого в тег h1.
Ещё один момент - картинка являющаяся ссылкой содержит по умолчание параметр border равный в 1px, и если этого не исправить, то пользователи, посещающие Ваш сайт с ПК, в нашем случае будут видеть вокруг логотипа бордюр толщиной в 1 пиксель. И логотип просто будет некрасиво выглядеть, выделяясь из общего дизайна сайта. Для того, чтобы этого избежать, можно воспользоваться двумя вариантами. Добавить в код картинки параметр border="0", либо избавить все графические ссылки сайта от бордюра вокруг них, добавив в файл стилей следующее:
img{border: 0}
[/strong]Таким образом параметр border будет по умолчанию равен 0 и бордюры отображаться не будут.
Идём далее
, как вы заметили, логотип размещён не традиционным образом. Я выровнял его по правому краю вместе с текстом, задав в файле стилей значение text-align: right, а затем чтобы лого и текст плотно не прилегали к правому краю, сделал отступ padding-right: 14px.Таким
вот не хитрым способом я оптимизировал верх своего сайт, найдя золотую середину между внешним видом и оптимизацией. Решил проблемы, которые возникли в процессе работы именно над WAP сайтом. Надеюсь Вам будет полезна данная статья. Всем удачи!