Вернуться ко всем статьям
Основы создания уникального стиля сайта
Основными визуальными элементами, делающими ваш сайт узнаваемым, являются шапка и фавикон. В данной статье разберём, как создать и добавить эти элементы на ваш сайт.
Фавикон
Фавикон — это иконка сайта, отображаемая в заголовке вкладки браузера, либо в адресной строке. Также в некоторых поисковых системах фавикон отображается рядом с найденной страницей и рядом с закладкой в браузерах. Таким образом фавикон становится визитной карточкой вашего сайта. При его создании стоит учитывать тематику сайта, фирменный стиль и логотип, если такой имеется (обычно именно он и становится фавиокном корпоративных сайтов).
Рассмотрим как вставить фавикон на сайт HTML.
1. Создайте изображение в графическом редакторе изображение размером 16х16, 32х32, 64х64 пикселя. При создании используйте 8 или 24-битные цвета. После создания сохраните изображение в формате ICO, PNG либо GIF.
2. Загрузите получившееся изображение на сервер с вашим сайтом.
3. Добавьте между парным тегом head при помощи тега link код вставки фавикона:
<link rel="shortcut icon" href="путь_к_файлу/название_файла.ico">
Атрибут rel со значением shortcut icon указывает, что вы добавляете иконку, href показывает её расположение.
Шапка сайта
Шапкой сайта обычно считается графическое изображение в верхней части страницы сайта, на котором зачастую отображены заголовок, описание страницы, логотип. Также в шапку, помимо перечисленного, можно поместить меню сайта, контакты и другую информацию на ваше усмотрение. Но не стоит перегружать шапку и не забывайте использовать другие элементы сайта.
При создании фонового изображения стоит руководствоваться простыми правилами:
- не стоит делать шапку слишком большой;
- если шапка включает в себя изображения, не представляющие цветную заливку и подобное, не отклоняйтесь от тематики сайта;
- шапка должна совпадать с основным стилем сайта.
Рассмотрим, как сделать шапку для сайта в HTML на примере классического варианта, состоящего из изображения, заголовка и описания.
1. Создайте в графическом редакторе картинку (ширина= ширина вашего сайта, если ваш дизайн не предусматривает иного, и необходимой вам высоты).
2. Загрузите файл на сервер с вашим сайтом.
3. При помощи тега стиля style укажите путь к изображению и его параметры, задайте стиль текста заголовка и описания:
<style>
#header{
width: 800px;
height: 300px;
background-color: #CCC58F;
margin-bottom: 10px;
background-image: url(путь_к_файлу/название_файла.png)
}
h1{
color: #0A0A0D;
font: 50px Arial;
margin-left: 300px;
}
h3{
width: 400px;
color: #0A0A0D;
font-style: italic;
margin: 100px 0 0 40px;
}
</style>
4. Вставьте заголовок и описание в тело сайта:
<div id=»header»>
<h1>Заголовок<h1>
<h3>Описание сайта</h3>
</div>
В результате этих действий вы получите шапку с фоновым изображением, заголовком высотой в 50 пикселей, напечатанный шрифтом Arial чёрного цвета, с отступом в 300 пикселей от края и курсивное описание.
Теперь ваш сайт имеет узнаваемые черты.
