Як зверстати макет сайту

Posted by Admin on 7-09-2013, 01:34 in Інтернет

Верстка макету сайту - досить цікавий процес. Для того щоб почати верстати, потрібно освоїти базові навички HTML і CSS. Для початку краще прочитати спеціалізовану літературу, а вже потім приступати до роботи, але можна займатися вивченням і на практиці, осягаючи ази у справі.

Вам знадобиться:
- Браузер;
- Текстовий редактор, бажано з підсвічуванням синтаксису (наприклад: Notepad, psPad);
- Намальований макет сайту (як правило, в програмі Photoshop).

Інструкція:
1. Запустіть всі програмні засоби для створення макета. Розділіть робочу область монітора на дві горизонтальні частини. У верхню помістіть графічний редактор із завантаженим макетом, а в нижню тестовий редактор. Це потрібно для того, щоб не відволікатися на згортання і розгортання вікна при написанні коду. Такий підхід дуже зручний і помітно збільшить ККД.

2. Розгляньте структуру графічного макету. Зверніть увагу на те, як лежать шари. Точно також повинен верстатиметься майбутній веб-документ, тому що так задумував дизайнер.

3. Пишіть код, Завантаживши сторінку в браузер. Оновлюйте сторінку і намагайтеся зробити так, щоб зображення макета було ідентично майбутньої сторінці.

4. Напишіть спочатку тільки HTML код. Просто перерахуйте всі блоки на сторінці. Привласніть кожному ідентифікатор, а групам блоків свій клас.

5. Приступайте до стилів. Створіть у каталозі зі сторінкою папку і назвіть її СSS. У ній для зручності бажано розмістити кілька файлів зі стилями.

6. Створіть поруч з папкою CSS папку IMG. Потім витягуйте зображення з макета. Краще це робити в такій послідовності: об'єднуєте всі шари, шукайте потрібний елемент, копіюєте його, створюєте новий графічний документ і зберігаєте під зрозумілим і «читабельним» ім'ям.

7. Після того як всі вищеописані кроки будуть завершені, необхідно перевірити зверстану сторінку на помилки (друга назва - валідність). Існують сайти, Спеціально для цього створені. Не варто панікувати, якщо раптом валідатор покаже багато помилок. Вони не критичні, але рекомендується уникати їх.

8. Наостанок перевірте створену сторінку у всіх популярних браузерах. Можливо, в якомусь із них сайт буде виглядати не так, як ви очікували.



...

Відповідь на запитання: Як зверстати макет сайту