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

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

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

 


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

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

Інструкція

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


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

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

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

 


Надрукувати