Як зробити гумову шапку

Як зробити гумову шапку

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

Вам знадобиться

- Мати власний сайт

Інструкція

  1. Щоб зробити гумову шапку, спочатку намалюйте її в фотошопі. Потім відокремте 3 частини картинки: 2 бічних і середину. Ці частини повинні бути шириною приблизно в 10-20 пікселів і висотою в потрібну висоту шапки. Збережіть кожен елемент так, щоб у вас вийшло 3 різних файлу: 1.gif, 2.gif, 3.gif. Залийте ці зображення на сайт.
  2. Потім створіть таблицю, в якій будуть міститися елементи верхньої частини сайту. Для цього в HTML-коді напишіть:

    <table cellspacing=»0″ cellpadding=»0″ width=»100%»>

    </ Table>

    Таблиця з шириною 100% буде розтягуватися або стискатися залежно від розмірів екрана користувача.
  3. Зробіть в таблиці рядок, в комірці якої розмістите ліву частину шапки сайту 1.gif:

    <table cellspacing=»0″ cellpadding=»0″ width=»100%»>

    <tr>

    <td width=»20″>

    <img src=»images/1.gif» width=»20″ height=»80″ border=»0″>

    </ Td>

    </ Tr>

    </ Table>
  4. Створіть середню частину шапки сайту, що складається з повторюваної картинки 2.gif. Для цього в CSS-коді зробіть такий запис:

    . Header {background-image: url (‘images/2.gif’);}
  5. Тепер в рядку таблиці створіть ще одну клітинку і помістіть в неї середній елемент верхній частині сайту, вказавши на його назву header в CSS-коді:

    <table cellspacing=»0″ cellpadding=»0″ width=»100%»>

    <tr>

    <td width=»20″>

    <img src=»images/1.gif» width=»20″ height=»80″ border=»0″>

    </ Td>

    <td class=»header»>

    <h1> Назва сайту
  6. Створив третю клітинку в рядку таблиці, розташуйте в цьому осередку праву частину шапки сайту 3.gif:

    <table cellspacing=»0″ cellpadding=»0″ width=»100%»>

    <tr>

    <td width=»20″>

    <img src=»images/1.gif» width=»20″ height=»80″ border=»0″>

    </ Td>

    <td class=»header»>

    <h1> Назва сайту </ h1>

    </ Td>

    <Td width = «30″ & gt

    <Img src = «images/3.gif» width = «30″ height = «80″ border = «0″ & ​​gt

    </ Td & gt

    </ Tr>

    </ Table>