Головне для будь-якого сайту крім контенту — це дизайн. Часом привабливий дизайн сайту компенсує безглуздо підібрану інформацію на сайті. При опрацюванні сайту, в цілому, потрібно заздалегідь продумувати весь вигляд до дріб’язків. Який зробити фон, яку зробити шапку, куди помістити флеш-банер. Тому має сенс подумати про зміну дизайну.
Вам знадобиться
Сайт, вихідний фал сайту (html, php), файл CSS, знання основ HTML, CSS, PHP (необов’язково), елементи дизайну
Інструкція
- Перше, що змінюємо, — це фон сайту. За фон на вашому ресурсі відповідає тег «background». Прив’язка відбуватиметься до тегу «body». Відкриваємо вихідний css файл і прописуємо body {background-color: # f6f6f6;} зберігаємо, і наш фон буде заданий як світло сірий. Як видно фон задається шістнадцятковим значенням, але можна прописати і звичайне значення кольору, наприклад «green» або «red». Якщо в якості фону потрібно вставити картинку, то прописуємо «background-image: url (посилання на ваше зображення)»
- Далі створюємо в вихідному файлі блок «div» з ідентифікатором «header», прописуємо його в таблицях стилю «# header», за бажанням задаємо рамку та відступи. Не забуваємо про ширину блоку. За допомогою тега background задаємо або колір, або зображення. Таким чином, виходить шапка сайту, яку можна змінити цим же способом. Не забувайте вказувати параметри зображення, коли ставите його на шапку сайту.
- За допомогою блоків div також задаємо дизайн правого контейнера, лівого (якщо є), поля для основного контенту та нижньої частини сайту.
- Вставляємо об’єкти на сайт. Вставка об’єкта на сайт відбувається за допомогою тега «object». Укладаючи між ним код, наприклад флеш банера, ми поставимо його на сайт.
- Вставляємо іконку на сайт. Для цього створений файл «favicon.ico» копіюємо в кореневу папку нашого сайту.
- Якщо є необхідність вкласти php скрипт, то застосовуємо наступну форму:
исходник скрипта?>. необхідно враховувати, що вихідний файл сайту повинен бути з розширенням. php, інакше скрипт працювати не буде. - Відкриваємо CSS файл і задаємо основні параметри шрифту (font-family), його розміру (font-size), стилю (font-style).
Корисні поради
Можна використовувати програму Adobe Dreamweawer для верстки та зміни дизайну сайту.
