Як відредагувати шаблон сайту.

При створенні сайтів часто використовуються вже готові шаблони, знайдені в мережі. Вони часом викачуються користувачами тисячі разів, створені на їх основі ресурси дуже схожі за зовнішнім оформленням. Щоб сайт мав індивідуальний дизайн, його шаблон слід відредагувати.
Вам знадобиться
  • - шаблон сайту;
  • - програма Dreamweaver.
Інструкція
1
Для роботи з шаблонами найкраще використовувати програму Dreamweaver, її можна скачати в інтернеті. Дана програма є одним із кращих інструментів для створення сайту, вона дозволяє редагувати сторінки як візуальним образом, так і за допомогою редактора коду.
2
Скачайте і встановіть програму Dreamweaver, запустіть її. Відкрийте в ній обраний вами шаблон. Врахуйте, що для мінімізації роботи шаблон слід підбирати правильно. При його виборі основну увагу приділяйте розташуванню елементів на сторінці, а не кольорового оформлення. Якщо ви хочете створити сайт, відмінний від інших, його кольорове оформлення вам все одно доведеться міняти, тому краще вибрати шаблон з підходящої версткою, яку не доведеться переробляти, і вже його оформити потрібним чином.
3
Найзручніше розглядати процес редагування на конкретному прикладі. Скачайте будь-який з html-шаблонів - наприклад, цей: http://web-silver.ru/templates/sites/086/086.zip. Розпакуйте його, потім відкрийте html-файл в програмі Dreamweaver. Зверніть увагу на перемикач режимів в лівому верхньому кутку - «Код», «Роздільна», «Дизайн». Перемикаючись між режимами, ви зможете редагувати шаблон найбільш зручним для вас чином.
4
Перейдіть на вигляд «Дизайн», потім клікніть мишкою будь-який з елементів - наприклад, шапку сторінки, в наведеному прикладі шаблону на ній представлений текст The river. Зверніть увагу на те, що в нижній частині вікна програми з'явилися властивості цього елемента сторінки. Зокрема, вказана ширина, висота, використовувана картинка. Ви можете поміняти розміри шапки, вказавши їх у відповідних полях або просто перетягнувши мишкою на самій шапці маркери кордонів. Поміняйте зображення, для цього підберіть потрібну вам картинку такого ж розміру і вставте замість вихідної.
5
Настільки ж простим чином ви можете змінити будь-які елементи. Наприклад, колір тексту, фон сторінки, назви посилань і т.д. і т.п. Якщо щось не виходить у вікні дизайну, ви завжди можете внести необхідні виправлення безпосередньо в коді. Не забудьте перед початком роботи зберегти оригінальний файл в окремому місці. Принаймні роботи зберігайте її результати у вигляді окремих файлів з різними іменами, це дозволить вам в будь-який момент повернутися назад. Трохи попрактиковавшись в роботі з програмою Dreamweaver, ви зможете легко і швидко редагувати будь шаблони.
Зробити свій сайт в наш час нескладно, навіть якщо ви не маєте ніяких специфічних знань в області веб-дизайну та програмування. В будь-який момент ви можете скористатися масою різних шаблонів, розміщених в інтернеті, і на основі готових шаблонів виготовити і опублікувати в мережі свій сайт. Однак далеко не всіх влаштовує повною мірою той варіант сайту, який пропонує шаблон. Про те, як змінити шаблон сайту і додати йому унікальності ми розповімо в цій статті.
Інструкція
1
Скачайте шаблон і знайдіть в ньому файл style.css. Зазвичай цей файл розташовується в папці public_html.
2
Відкрийте файл style.css в блокноті і знайдіть фрагмент коду, що відповідає за зовнішній вигляд верхній частині сайту. Цей фрагмент виглядає наступним чином: #logotype {background: url (images/logotype.png") no-repeat left center #fff; width: 230px; height: 60px; margin: 10px 25px; position: relative;
3
В даному коді в рядку background: url вам потрібно вказати шлях до фонового зображення майбутнього сайту. Наступні рядки позначають довжину і висоту зображення, а пункт margin визначає відступ зображення по вертикалі і горизонталі.
4
Знайдіть в папках приклад файл logotype.png", використовуваний в коді в якості логотипу, і замініть його в тій же папці на власний логотип з такою ж назвою в форматі png.
5
Фонове зображення завантажте в папку public_html/tmpl/імя_шаблона/Images/, після чого, як уже говорилося вище, пропишіть в рядку background: url шлях до зображення.
6
При необхідності перепишіть параметри висоти, довжини і відступу зображення. Рядок position: relative можна не чіпати. Збережіть зміни у файлі і завантажте його на сервер замість колишнього файлу шаблону.
7
Якщо ви хочете змінити нижній логотип сайту, знайдіть в style.css фрагмент коду, який починається зі слів logotype-footer. Збережіть малюнок з новим логотипом і завантажте його в папку шаблону Images.
8
Змініть параметри довжини і висоти. Знову збережіть файл style.css і завантажте оновлений сайт на сервер.