ЯК зробити верстку сайту

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

Вам знадобиться

- програмний пакет для верстки веб-сторінок;
- растровий графічний редактор для створення елементів оформлення.

Інструкція

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

Створіть макет сайту в графічному редакторі. Основним завданням тут є визначення зовнішнього вигляду елементів, їх взаємного розташування. Не використовуйте занадто яскраві кольори. Найкраще сприймається нейтральна колірна палітра. Використовуйте єдиний стиль оформлення блоків. Постарайтеся зробити дизайн максимально зручний для користувача. Уникайте елементів, які буде свідомо складно реалізувати засобами HTML і CSS.

Збережіть макет сторінки в растровому форматі без втрати якості. Визначте елементи оформлення, які будуть реалізовані засобами HTML. Це можуть бути меню, посилання, таблиці, форми пошуку. Інші елементи вийміть з макета і збережіть в окремих файлах. Створіть на жорсткому диску два текстових документа. Змініть розширення одного з них на .htm. У ньому буде перебувати код, який відповідає за взаємне розташування елементів. Другий файл буде містити таблиці стилів.

Відкрийте перший файл в HTML-редакторі. Розмістіть на сторінці елементи оформлення, збережені раніше в растрових файлах. Створіть текстові посилання, таблиці та інші елементи, які повинні бути реалізовані засобами HTML. Атрибути елементів, такі як колір, розмір шрифту, наявність кордонів, записуйте в CSS файл. При необхідності анімації елементів сторінки використовуйте мову javascript.