На первую VAKANSII.com.ua
   На первую VAKANSII.com.ua  На первую VAKANSII.com.ua
СЕГОДНЯ НА САЙТЕ:  162 ВАКАНСИЙ. НОВЫХ - 19 Интернет
  47262 РЕЗЮМЕ. НОВЫХ - 14 Если не работает
 Сайт газеты

  • Страхования
  • Фехтование
  • Инвестирование
  • ПротивоГАЗы
  • Как авто
  • Респираторы
  • Средства пожаротушения
  • Новости
  • Заказ курсовой работы недорого

    Есть затруднения со сдачей курсовой работы точно и в срок? Вы можете заказать курсовую работу от kursoviks.com.ua заказ дипломной работы или курсовой проект по недорогой цене.

    Статьи

    SEO верстка: створюємо SEO оптимізований layout

    Працюючи в компанії, де SEO приділяють чималу увагу, мені хочеш - не хочеш, а довелося навчитися писати сайти так, щоб вони були, я б сказав, "SEO сприятливі", тобто щоб у верстці вже був заздалегідь закладено чималий потенціал для подальшої розкрутки сайту. Що таке SEO верстка і питання, пов'язані з семантикою я розгляну в наступних статтях, а зараз поговоримо про те, з чого починається ця сама SEO верстка - про правильне layout'e сайту.

    Ні для кого ні секрет, що в колах SEO-шників існує думка про те, що чим ближче ключові слова до початку коду html-документа, тим вище їх вага в очах пошукових систем. Зауважте, я сказав, «чим ближче до початку коду html-документа», а ні «чим вище вони на сторінці", "чим ближче вони до верхньої межі сторінки» і т.п.

    Принципова різниця тут полягає в тому, що на html-сторінці ключові слова повинні бути розміщені в чітко відведеному для них місці (найчастіше це центральна / права / ліва колонка), тоді як в коді вони повинні знаходитися саме в його початку! Вже відчули різницю? Ще немає? Тоді йдемо далі.
    Припустимо, дизайнер намалював нам двоколонковому layout приблизно такого змісту:

    Працюючи в компанії, де SEO приділяють чималу увагу, мені хочеш - не хочеш, а довелося навчитися писати сайти так, щоб вони були, я б сказав, SEO сприятливі, тобто щоб у верстці вже був заздалегідь закладено чималий потенціал для подальшої розкрутки сайту

    seo-оптимізована верстка

    Відразу обмовимося, що хедер не призначений для розміщення ключових слів. Якщо ж це не так (як, наприклад, на порталі http://101.ru/, де ключові слова розташовані якраз в хедері і згорнуті в таб) питання SEO оптимізованої верстки відпадає сам собою. Бажано також, щоб ми заздалегідь знали висоту хедера, що в більшості випадків як правило виконується. Під SEO оптимізацію в нашій верстці розрахований буде саме main-column, як це часто і буває.

    Перше, що спадає на думку, типова схема верстки типу: wrapper -> header -> sidebar -> main-column -> footer, по якій код html-документа буде виглядати наступним чином:

    1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "header"> </ div> <div id = "sidebar"> </ div> <div id = "main- column "> Ключові слова знаходяться тут! </ div> <div id =" footer "> </ div> </ div> </ body>

    Wrapper нам тут потрібен для того, щоб тримати в собі всю структуру і позиціонуватися по центру. Таким чином наш сайт завжди буде центрироваться на моніторі будь-яких розмірів.

    Основне питання для нас: «Як зробити так, щоб блок з текстом" main-column "знаходився в коді html-документа якомога ближче до тегу <body>, а в ідеалі взагалі йшов відразу за ним?»

    Навіть при мінімальних знаннях css здогадатися, як поміняти sidebar і main-column місцями можна. Використовуємо для цього плаваючу модель і властивість float. Для цього змінимо в коді документа main-column і sidebar місцями.

    1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "header"> </ div> <div id = "main-column"> Ключові слова знаходяться тут! </ Div> <div id = "sidebar"> </ div> <div id = "footer"> </ div> </ div> </ body>

    Лістинг css в цьому випадку буде наступним:

    1 2 3 #wrapper {margin: 0 auto; width: 1000px; } # Main-column {width: 700px; float: right; } #Sidebar {width: 300px; float: left; }

    Таким чином, завдяки властивості «обтікання» (float) ми домоглися того, що підняли наш блок з ключовими словами на один щабель ближче до <body>, що вже непогано і є мінімальним використанням SEO верстки. При цьому візуальне його розташування на сторінці не змінилося.

    Але не будемо зупинятися на малому і підемо далі. На даній стадії наше запитання полягає в наступному: "Як зробити так, щоб main-column все-таки був в коді першим після <body>.

    Ось тут-то нам в голову і приходить ще одна відмінна властивість зване position: absolute.

    Ідея така: wrapper робимо релатівності (position: relative), щоб саме щодо його позиціонувалися все дочірні абсолютно позиційований елементи (position: absolute). Header ж поміщаємо в будь-яке місце в коді і робимо його абсолютно позиційованим, таким чином він як би приб'ється до верхнього лівого кута wrapper'a. Для wrapper'a задаємо внутрішній верхній відступ рівний висоті header'a. Header поставимо в нашому лістингу перед footer'oм, тому що для користувача пріоритетною якомога швидше відобразити на сторінці саме елементи header'a, а не footer'a. Решта лістинг не чіпаємо, і в результаті отримуємо: wrapper -> main-column -> sidebar -> header -> footer.

    В даному варіанті header можна всунути в принципі в будь-яке місце - в т.ч. і навіть між main-column і sidebar, оскільки він в будь-якому випадку позиціонується від верхнього лівого кута wrapper. Тому, якщо для вас бажано, щоб відразу після main-column вантажився header, а тільки потім sidebar і все інше, то можете так і зробити.

    Якщо footer у вас розрахований на 100% ширини body, а wrapper - фіксованої ширини, то footer завжди можна винести і за його межі.

    Лістинг підсумкового варіанту:

    1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "main-column"> Ключові слова знаходяться тут! </ Div> <div id = "sidebar"> </ div> <div id = "header"> </ div> <div id = "footer"> </ div> </ div> </ body>

    Підсумковий css:

    1 2 3 4 5 #wrapper {margin: 0 auto; width: 1000px; position: relative; padding-top: 100px; } # Main-column {width: 700px; float: right; background: # a5f0e6; padding: 40px 0; } #Sidebar {width: 300px; float: left; background: # d1e5f1; padding: 40px 0; } #Header {position: absolute; left: 0; top: 0; height: 100px; background: # b0e8f4; } #Footer {background: # b0e8f4; padding: 40px 0; }

    Таким чином завдяки SEO верстці ми домоглися, щоб у нашому коді наші блоки йшли у відповідність з нумерацією на малюнку і, зауважте, не внесли жодного візуального зміни в html-сторінку:

    Таким чином завдяки SEO верстці ми домоглися, щоб у нашому коді наші блоки йшли у відповідність з нумерацією на малюнку і, зауважте, не внесли жодного візуального зміни в html-сторінку:

    SEO верстка

    Перевірено: IE6 / 7, FF3, Safari3, Chrome.

    Резюмуємо переваги даного методу:

    1. Можливий SEO-бонус від пошукових систем.
    2. Зручна черговість завантаження для користувача: користувач звертає увагу на header, як правило, всього пару раз, поки не вивчить. Далі ж 99% його уваги зосереджується саме навколо main-column, а тому доречно після переходу до чергової сторінці відображати для користувача в першу чергу саме main-column, не затримуючи його завантаженням header'a, sidebar'a та іншого ... Дана верстка саме це і реалізує. Приклад ви можете бачити на цьому самому блозі.
    3. Гнучкість: header можна розмістити після майже будь-якого блоку сторінки всередині wrapper, тобто ми можемо управляти черговістю завантаження блоків на сторінці. Якщо footer у нас 100%, а wrapper - фіксованої ширини, його можна винести за межі wrapper'a. Те ж саме справедливо і по відношенню до header'у. Тільки винісши його за межі wrapper'a, ми втратимо можливість розмістити його між блоків всередині wrapper'a, і header в будь-якому випадку доведеться вантажити останнім блоком на сторінці, але в загальному-то це виправдана жертва.

    http://blogto4ka.ru

    Також рекомендую прочитати

    Вже відчули різницю?
    Ще немає?
    Основне питання для нас: «Як зробити так, щоб блок з текстом" main-column "знаходився в коді html-документа якомога ближче до тегу <body>, а в ідеалі взагалі йшов відразу за ним?

    Новости

    www.natali.ua www.buhgalteria.com.ua www.blitz-press.com.ua  | www.blitz-price.com.ua  | www.blitz-tour.com.ua
     
    Rambler's Top100
     письмо веб-мастеру
    Copyright c 2000, Блиц-Информ