Мої особисті шаблони-заготовки для створення верстки блогу

Мої особисті шаблони-заготовки для створення верстки блогу / сайту

У цій статті я розповім, як я верстаю сайти. В кінцевому підсумку, крім знань, у вас з'являться ще готові макети-шаблони для верстки сайтів. Вважаю, що вигідним перевагою цих шаблонів є їх простота і легкість використання. Отже, за яким принципом я верстаю сайт або блог?

1). На самому початку я малюю макет в Photoshop:

2). Приблизно подумки макет розбиваю на блоки. Для тих, хто не в курсі, що таке блоки в CSS, закривайте цю сторінку і вперед до вивчення основ CSS і HTML.

1 - корпус сайту (site-blok);
2 - шапка сайту (header);
3 - меню верхнє (menu);
4 - блок контенту (blok-content);
5 - лівий блок (blok-left);
6 - правий блок (blok-right);
7 - земельна ділянка (footer)

Ось за такою схемою я розбиваю макет.

Якщо важко макет розбивати на блоки подумки, малюйте схему на папері, так, як це, наприклад, робив я спочатку:

Тепер можна приступити до створення блоків у файлі HTML.
По черзі, так як на схемі, прописуйте класи до блокам. Ось така схемку вийшла у мене:

Поки що результат буде ось таким:

Згоден, виглядає не дуже. Переходимо до CSS стилям.

Увага: Рекомендую до всіх блоків прописувати рамки, щоб бачити кордону блоків (border: 1px solid # 000;).

Результат буде ось таким:

Далі вирівнюємо всі блоки, задаємо колір, розміри і відступи.
Вказуємо стиль для тексту і посилань.
Додаємо фонову картинку і тінь до блокам.
Видаляємо непотрібні рамки.
Ось абсолютно готовий код:

Ось такий простенький сайтик вийшов завдяки блокової верстці. Сподіваюся, мій спосіб верстки сайтів вам сподобався.

Схему створення блокової верстки, сподіваюся, ви зрозуміли і тепер можна викласти готові макети.

Щоб поміняти місцями блоки, досить поміняти ширину (width) між блоками blok-right і blok-left

Ось готовий код:

Щоб поміняти місцями блоки, досить поміняти параметри (float) між блоками blok-right і blok-left; а також параметри (float) між блоками bl-right і bl-left:

Щоб блок посередині зробити більше, досить поміняти параметри (float) між блоками bl-right і bl-left:

або ж замінити ширину (width) у блоків bl-left і bl-right:

От і все! Свій принцип верстки сайтів розповів. Чи підходить вам такий спосіб, вибирайте самі.