Совет 1: Как сделать шапку для сайта

Шапка любого сайта — это его «лицо», наиболее крупный и заметный элемент дизайна сайта. Если шапка сайта сделана запоминающейся и уникальной, то остальные элементы дизайна — шрифты, кнопки и прочее — вполне могут быть взяты из какой-либо стандартной схемы, дизайн сайта все равно будет отражать его индивидуальность.

 А сделать шапку для сайта совсем не сложно с помощью графического редактора, к примеру, Adobe Photoshop (бесплатной альтернативой является Gimp, популярный среди сторонников Linux).



  1. Во-первых, создайте холст соответствующих размеров. Ширина холста должна соответствовать ширине страниц сайта, ну а высоту можно выбрать на свое усмотрение. Помните, что слишком узкая шапка будет недостаточно выразительной, а слишком широкая не оставит места для содержательной информации на страницах.

  2. Определитесь с цветовой гаммой дизайна вашего сайта. Шапка должна ей соответствовать.

  3. Залейте фон. Можно использовать сплошной тон или же градиент. Помните, что фон не должен быть слишком ярким, иначе остальные объекты на нем потеряются.

  4. Разместите какую-либо графическую форму, которая подчеркнет объекты, расположенные в центральной части. Это может быть фрагмент рамки, занимающий одну или две стороны прямоугольника шапки. Можно составить ее из отдельных небольших объектов, имеющих отношение к теме сайта, к примеру, цветков, детских игрушек или канцелярских принадлежностей.

  5. Разместите центральные объекты шапки. Это может быть стилизованное название сайта, которое можно дополнить слоганом из нескольких слов или дополнительными четкими и выразительными графическими объектами.

  6. Дополнительно выделите центральные объекты, используя, например, эффекты тени или зеркального отражения. Это позволит без сложных для непрофессионала манипуляций получить достаточно привлекательный зрительно результат.

  7. Завершите работу, добавив названия пунктов главного меню.

  8. С помощью ImageReady, входящей в комплект поставки Photoshop, вы сможете разбить изображение на участки для создания ссылок к разделам сайта.


Как видите, сделать шапку для сайта достаточно просто и по силам даже непрофессионалу. Если же вам нужен непременно профессиональный дизайн — закажите его у дизайнера на одном из сайтов, где можно договориться с фрилансером, например, free-lance.ru. Стоимость такой услуги может быть достаточно скромной.

Видео по теме

Совет 2: Как сделать анимированную шапку для сайта

Динамический интерфейс на вашем сайте привлечет внимание пользователей и повысит посещаемость. Сделать анимированную шапку для сайта не так сложно, как кажется на первый взгляд.
Инструкция
1
Постараемся сделать анимированную шапку, которая при наведении на нее курсора мыши будет менять свою конфигурацию. Например, черно-белая картинка в шапке преобразовывалась в цветную при взаимодействии или сменялась на другую.
2
Установите на свой компьютер библиотеку JQuery, предварительно скачав ее на официальном сайте (jquery.com).
3
Подключите библиотеку к своему html-файлу между тегами head, используя для этого тег script:
.
4
Выберите две картинки, которые при взаимодействии пользователя с шапкой будут сменять друг друга. Если вы хотите, чтобы был переход из черно-белого режима в цветной, то создайте копию картинки и обесцветьте ее в Photoshop.
5
Создайте в html-документе список из двух пунктов и к каждому прикрепите картинки, используя тег image. К самому списку примените класс стилей, например
    6
    Делайте это в том диве (div), который у вас отвечает за шапку сайта. Сначала укажите адрес картинки, которая должна отражаться в статичном состоянии, а потом ту, которая появляться при наведении.
    7
    Пропишите к первой картинки class="pervaya", а ко второй class:"vtoraya".
    8
    В прикрепленном файле css укажите для этих классов абсолютное позиционирование элементов (position: absolute;), фиксированную высоту и ширину (height и width).
    9
    Наложите картинки друг на друга слоями. Используйте для этого стиль z-index. Он позволяет выравнивать элементы по оси z, которая уходит от нас в глубину экрана.
    10
    Для самого списка укажите нужные вам отступы, выравнивание и уберите пункты списка (list-style-type: none;).
    11
    Создайте файл с расширением .js и вставьте в него следующий код:
    $(document).ready(function(){
    $("img.grey").hover(
    function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
    });
    });
    12
    Этот код приведет анимацию вашей шапки в действие. Не забудьте подключить файл .js к html-документу.
    Видео по теме
    Поиск
    Совет полезен?
    Добавить комментарий к статье
    Осталось символов: 500