Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії WebStudio2U Мапа сайту Авторизація

Дизайн сайтів. Як самостійно зробити шаблон сайту?

Дизайн сайтів. Як самостійно зробити шаблон сайту?

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

Як же бути, якщо хочеться мати власний сайт, а замовити дизайн сайту в професійній студії Вам не по кишені? Можна й потрібно спробувати зробити власний шаблон дизайну для Вашого сайту. Шаблон - це певна заготовка оформлення сторінок Вашого веб-проекту, що Ви потім заповните потрібним контентом.

Отже, із чого почати. Перший крок – попереднє ретельне обмірковування, яким Ви хочете бачити дизайн Вашого сайту, може здатися зайвим. Однак лише на перший погляд. Краще намалювати майбутній дизайн на папері, поекспериментувати з різними варіантами і тільки потім починати роботу в графічному редакторі.

Наступний крок, як Ви вже певно здогадалися, це малювання дизайну в графічному редакторі. Який при цьому вибрати редактор - справа особистих смаків і переваг. Найпоширеніший графічний пакет - Adobe Phohtoshop, тому розглядати створення шаблона дизайну сайту будемо на його прикладі.

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

Дизайн сайтів. Як самостійно зробити шаблон сайту?

У програмі Adobe Phohtoshop є спеціальний інструмент для розрізання зображення - Slice Tool. Цим інструментом, буквально як ножем зображення ріжеться на необхідну кількість шматочків. При цьому варто враховувати, що при заповненні текстом деякі комірки таблиці або блоки на сторінці сайту можуть «потягнутися». Тому для цих комірок потрібно вирізати шматочки зображення таким чином, щоб при копіюванні вони не створювали враження плитки.

Коли зображення розрізане на необхідну кількість частин, потрібно його зберегти. У програмі Adobe Phohtoshop це зробити легко. У меню File потрібно вибрати пункт Save for Web&devices. У діалоговому вікні, що відкрилося, необхідно вибрати тип файлів «HTML&images», указати ім'я файлу «index.htm» або «index.html» (розширення .htm переважніше) і зберегти цей файл у кореневу папку Вашого майбутнього сайту. Якщо все було зроблено правильно, то в цій папці з'явиться відповідний файл index.html і каталог images. В images саме й будуть перебувати всі нарізані шматочки зображення.

Що далі? Залишається лише відредагувати файл index.html таким чином, щоб при заповненні його текстом не виходило розривів зображення або білих смуг. Щоб уникнути появи таких проблем, необхідно вибрати для яких комірок зображення повинні бути фоновими, які комірки будуть розтягуватися або поєднуватися. Не засмучуйтесь, якщо Вам не вдалося з першого разу ідеально розрізати потрібне зображення, можливо, знадобиться кілька болісних спроб. Але зате в результаті дизайн Вашого сайту буде саме таким, яким Ви хотіли, а сам сайт буде радувати Вас своєю оригінальністю і унікальністю.

Дизайн сайтів. Як самостійно зробити шаблон сайту?
Теги:
дизайн сайту, дизайн сайтів, шаблон сайту, шаблон дизайну сайту, зробити шаблон сайту, дизайн сайту самостійно, веб-студія