Гарний фон для сайту
Завтра ми починаємо вивчення HTML, і почнемо з першого тега TITLE (підпишіться. Щоб його не пропустити). Цей тег відповідає за заголовок вікна браузера. Також розберемо вплив цього тега на ваш сайт, щодо залучення трафіку.
Є кілька способів отримати фонове зображення: створити самому і завантажити вже готові фони. Ми розглянемо обидва варіанти. Почнемо з першого, створення фону в фотошопі. Я покажу найпростіший спосіб створення фонового зображення в фотошопі.
Отже, відкриваємо фотошоп і створюємо новий документ будь-яким, наприклад 300 × 300. Режим кольору поставимо 8 біт, щоб зображення важило менше і швидше завантажувалася при завантаженні сайту. Ви можете поставити 16 чи 32 на ваш розсуд.
Тепер виберіть інструмент «Пензель (B)»:
Клацніть правою кнопкою миші по будь-якого вільного місця на робочому документі і виберіть кисть у формі зірки розміром 24 або 29 пікселів:
Тепер можете поклацати лівою кнопкою миші в області документа, щоб подивитися, як працює кисть. Змінюючи основний колір в палітрі кольорів і розмір кисті, покажіть, що щось подібне:
Натисніть кнопку «Зберегти». Збережіть фон під ім'ям «fon1.png». Все, фон готовий! Ось такий простий, легкий фон готовий. Зараз ми не будемо його підключати, а створимо ще один, дуже простий фон, але в той же час дуже стильний.
Створюємо новий документ розміром 3 × 3. Налаштування залишаємо ті ж, що і в першому документі. Збільшуємо створений документ до межі (3200%). Вибираємо інструмент «Олівець (B)»:
Тепер можете вибрати колір вашого фону, я виберу світло-сірий колір, ви можете вибрати будь-який, але не сильно яскравий. Розмір олівця повинен бути 1 піксель. Змінити його можна так само, як міняли кисть - правою кнопкою миші. Малюємо так, як показано на малюнку нижче.
Зберігаємо його так само, як і попереднє зображення, тільки під ім'ям «fon2.png».
Тепер у нас готове 2 фону власного виробництва. Тепер давайте підключимо ці фони до сайту. Робити це ми будемо за допомогою HTML + CSS.
Створіть 2 файли: «index.html» і «style.css». Обидва файли повинні бути створені в кодуванні UTF-8. Якщо не знаєте, як створювати такі файли, то про це я напишу трохи пізніше (підпишіться. Щоб не пропустити статтю).
Код, який повинен містити файл «index.html» наведено нижче:
Не забувайте вказувати розширення файлу.
Наступний блок властивостей я прописав для нашого імпровізованого сайту. Нагадаю, що висновок білого блоку в центрі здійснює тег «
»З ідентифікатором« mainsite ». В CSS я прописав наступне:
- div # mainsite - визначаємо, що необхідно знайти тег «div» з ідентифікатором «maainsite» і застосувати до нього властивості прописані в фігурних дужках:
- margin: 0 auto; - вирівнюю білий блок по центру
- margin-bottom: 25px; - відступ білого блоку знизу від вікна браузера 25 пікселів
- margin-top: 5px; - відступ білого блоку зверху від вікна браузера 5 пікселів
- width: 70%; - ширина білого блоку буде займати всього 70% від 100% вікна браузера
- height: 1000px; - висота білого блоку дорівнює 1000 пікселів
- background-color: #fff; - колір фону білого блоку білий
- border: 1px solid #ccc; - блок має рамку в 1 піксель суцільну сірого кольору
Тепер можете запустити файл «index.html» і подивитися, що вийшло.
Щоб змінити фон сайту необхідно просто поміняти ім'я підключається зображення в блоці властивостей CSS:
Фон, який ми робили з трьох пікселів, виглядає незвичайно, начебто і сірий фон, але в той же час має ребристу поверхню, якщо придивитися. Другий варіант фону: подивитися.
Колір можете змінювати на ваш розсуд. Дуже добре просвічує рельєфність помаранчевий колір. І наостанок мені залишилося порадити сайти, на яких можете знайти собі цікавий фон.
Вибирайте вподобаний фон, завантажуйте його і встановлюйте його для свого сайту. Як змінити фон сайту я вже розповів вище, тепер все в ваших руках. Експериментуйте!