Як зробити гумову шапку для сайту

Як зробити гумову шапку для сайту

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

Інструкція

  1. На першому етапі створення такої шапки для веб-сайту відкрийте в Фотошопі зображення, яке ви вже заздалегідь підготували для розміщення в мережі, і потім розріжте його на частини, використовуючи інструмент Slice Tool на панелі інструментів. Розріжте шапку так, щоб центральна її частина була порожньою, і щоб в результаті у вас вийшло три графічних елемента. Це дозволить шапці розтягуватися під будь-який дозвіл екрана.
  2. Після того, як ви розріжете шапку, збережіть її, оптимізуючи файли при збереженні для веб-формату (Save for web). Встановіть потрібний формат файлу для збереження — наприклад, gif, jpeg або png. Для зміни кожного фрагмента зображення клікніть в меню на опцію Slice Select Tool і змініть картинки так, щоб їх розмір був якомога менше при найменших втратах в якості візуального відображення малюнка на екрані. Збережіть відредаговані картинки як html і images.
  3. Після того як картинки будуть збережені, відредагуйте HTML-код, відкривши збережений html-документ за допомогою Блокнота. У блокноті зітріть всі непотрібні рядки коду. Залиште тільки необхідні рядки — дані про таблицю, в яку вбудовані ваші картинки:

    <table id=»table_01″ width=»100%» height=»200″ border=»0″ cellpadding=»0″ cellspacing=»0″>

    <tr>

    <td>

    <img src=»images/yourimage.gif» width=» «height=» «alt =» «> </ td>

    <td style=»background image: url(адрес картінкі);» width= «» height= «» alt= «»> </ td>

    <td>

    <img src=»images/yourimage.gif» width=» «height=» «alt =» «> </ td>

    </ Tr>

    </ Table>
  4. У цих рядках замість yourimage.gif повинен бути зазначений шлях до ваших зображень з відповідною шириною і висотою.
  5. Для того щоб середня частина зображення розтягувалася, розводячи крайні зображення по сторонам, пропишіть відповідні атрибути коду в рядках. Всі параметри ширини і висоти в коді вказуйте свої власні.
  6. Завантажте створені картинки для шапки в кореневий каталог свого сайту, а потім відредагуйте HTML-код, вказавши нові шляхи до зображень шапки на сервері. Вставте код шапки між тегами <body> </ body>.