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

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

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



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

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

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

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

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

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

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

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


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

Видео по теме

Совет 2 : Как вставить картинку в шапку

Зачастую при похожем функционале картинка в шапке сайта или блога придает необходимую индивидуальность, а предлагаемые шаблоны, с другой стороны, часто бывают просто "безликими". В картинку, на самый верх удобно ставить логотип фирмы, или картинку с географическим расположением, или определенные фотографии, важные для сайтовладельца.
Кусок кода, ведущий на ссылку к картинке в шапке сайта
Вам понадобится
  • Навыки работы в графическом редакторе
Инструкция
1
Если у вас стоит менеджер сайта, в него, как правило, включена функция "сменить картинку". В таком случае вам остается только подставить свое.
Внимательно проанализируйте систему управления сайтом. Если нужной функции нет, придется залезать в html код.Если вы работаете с Joomla, ищите файл: mw_joomla_logo.png , он лежит в пaпке images в папке шaблона ( Joomla emplatesназвание_шаблонаimagesmw_joomla_logo.png)Для того, чтобы сменить картинку в html, надо:Открыть html код сайта ("вид" > "просмотр html кода").
Найти "шапку", выделенную тэгами head
Найти картинку, просмотрев в заголовке тэги img
Ссылка на картинку имеет вид: img src="picture.jpg"
2
Скачать и проанализировать размер и вес картинки.
В графическом редакторе нарисовать свою, такую же по параметрам картинку
Залить картинку на сервер, поместить ее в тот же каталог, где все картинки сайта (или в просто в сеть, или в альбом изображений, главное, чтобы хранилище было долгосрочным)
3
Снова открыть код сайта.
Подставить адрес вашей картинки вместо той, которая лежит там сейчас.
Для подстраховки можете задать точный размер картинки и невидимые границы следующим образом:
img src="адрес картинки/picture.jpg" height="нужная высота в пискелях" width="нужная ширина в пикселях" border="0" alt="Пояснение к картинке"
Значение тэгов:
img = image - картинка.
src = source - источник, то есть адрес
border = границы. Если поиграть с этим значением, вокруг картинки будет появляться рамка (обводка)
alt = alternate - текст, который будет подставляться на место картинки в случае, если они выключены из просмотра (для экономии трафика, например). Этот текст, будучи невидимым, все равно считывается поисковиками и может служить хорошим инструментом для раскрутки вашего сайта.Сохранить код с новой картинкой.
При необходимости почистить кэш. Возможно, в него еще загружена прежняя картинка, и он отображает ваш сайт неправильно.
Видео по теме
Обратите внимание
Внимательно смотрите на адреса папок, соблюдайте регистр букв.
Полезный совет
В блогах на WordPress адрес картинки шапки имеет вид: wp-content / themes / images / header.jpg
Здесь надо просто отрисовать новую картинку и сохранить ее под именем header
Источники:
  • Учебный сайт HTML
  • как вставить картинку в заголовок joomla

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

Ucoz.ru – один из наиболее часто используемых бесплатных хостингов, привлекающих веб-мастеров своими возможностями, которые существенно превышают возможности других бесплатных хостингов. Имея сайт на ucoz, вы можете редактировать его дизайн и изменять оформление, а также менять шапку сайта. Заменить изображение в шапке сможет как опытный, так и начинающий веб-мастер, имеющий основные знания в области HTML и CSS.
Как вставить на ucoz свою шапку для сайта
Инструкция
1
Подготовьте изображение, которым вы хотите заменить имеющуюся в шапке картинку. Создайте на сервере папку Images и загрузите в нее ваше изображение, предварительно изменив ее размер, чтобы тот соответствовал размеру шапки. Оптимизируйте изображение для публикации в интернете – картинка не должна много весить, она должна иметь формат jpg, png или gif.
2
Откройте свой файл-менеджер и скопируйте путь к изображению, выложенному на сервере, который должен быть следующего вида: http:/ваш сайт.ru/images/mypicture.jpg.
3
Теперь обратите внимание на шаблон главной страницы вашего сайта. В его верхней части найдите тег , где image – это путь к изображению старой шапки, находящемуся на сервере.
4
Измените ссылку в кавычках на новую, соответствующую выбранному изображению. После этого обновите главную страницу своего сайта и посмотрите, что получилось.
5
В некоторых случаях изображение устанавливается сразу, и не нарушает структуру страницы. Если же вы увидели, что шапка после загрузки нового изображения сместилась, или картинка не подходит по размеру, снова заходите в раздел редактирования страницы и дополняйте шапку кодами HTML, изменяя размеры, рамки и выравнивание картинки, чтобы она наилучшим образом подходила к форме шапки сайта.
6
Разобравшись с редактированием верхнего изображения для главной страницы, в дальнейшем вы сможете реализовывать свои творческие идеи и в более сложных аспектах оформления своего сайта.
Обратите внимание
Как изменить шапку. желательно иметь mozila firefox! Сначала посмотрите, как сделали мы.  пункт первый и берем ссылку шапки, которая стоит стандартно на вашем сайте 6) в таблице стилей css ищем эту ссылку и меняем её на ссылку вашей новой шапки(надеюсь, как брать ссылку новой шапки вы знаете). Так же можно заменять на сайте ucoz фон сайта, блоки и т.д.
Полезный совет
Вы все еще не знаете, как изменить шапку сайта ucoz или подобрать размер шапки ucoz? Прежде, чем вы приступите к смене шапки сайта, вам нужно узнать её размеры.  Потом смело меняйте шапку, всегда будет возможность вернуть старый шаблон. Зайдите в панель управления сайта ucoz, используя админ-бар. Выберите Редактор страниц, далее Управление дизайном модуля. Далее заходите в Глобальные блоки и выбираете Верхняя часть сайта.
Источники:
  • как изменить свой сайт ucoz
  • Как сделать шапку сайта кликабельной

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

Принцип "встречают по одежке" справедлив не только в отношении людей, но и в отношении сайтов. Одежка сайта - его дизайн. И именно дизайн определяет то впечатление, которое создается у посетителя в первые несколько секунд просмотра ресурса. Это впечатление особенно важно, поскольку определяет его дальнейшее поведение. Первый элемент дизайна, который видит каждый пользователь, зашедший на сайт - его "шапка". Шапка - лицо web-ресурса. Поэтому каждый начинающий web-дизайнер хочет в первую очередь научиться делать шапки для сайтов.
Как делать шапки для сайтов
Вам понадобится
  • - доступ в интернет;
  • - современный браузер;
  • - редактор растровой графики (GIMP, Photoshop);
  • - опционально: редактор векторной графики (CorelDraw);
  • - опционально: среда 3D-моделирования (Blender, 3DStudio);
  • - опционально: лист бумаги, карандаш или ручка.
Инструкция
1
Разработайте концепцию будущей шапки сайта. В идеале, в основе концепции должна лежать оригинальная идея. При недостатке идей можно почерпнуть вдохновение, анализируя уже существующие удачные решения. Результат творческих изысканий отразите в виде эскизного наброска на листе бумаги. Набросок должен отображать структуру будущей шапки сайта с указанием "резиновых" мест и областей, заполненных изображениями. На данном этапе неплохо продумать и примерную цветовую схему оформления шапки.
2
Выберите размеры шапки. Собственно, стоит четко определить лишь один ее параметр - высоту. Как правило, по высоте шапки сайтов фиксированы, причем она не зависит от логического разрешения, влияющего на параметры отображения шрифтов. Иными словами, стоит выбрать значение высоты шапки в пикселях. При этом имеет смысл учитывать возможность размещения в шапке баннеров или блоков контекстной рекламы. В отношении ширины следует определиться с минимальным значением, выделив хотя бы одну "резиновую" область, допускающую адаптацию шапки к различным размерам web-страницы.
3
Создайте шаблон шапки в графическом редакторе. В новом документе добавьте прозрачный слой, в который перенесите эскиз в соответствии с выбранными геометрическими параметрами. Высота слоя должна соответствовать высоте шапки. Ширину можно взять произвольной, но больше минимального размера, оставив пространства под горизонтальные "резиновые" области". Обозначьте в шаблоне зоны фиксированных и варьирующихся размеров, зоны, предназначенные для заполнения статическими изображениями, изображениями фона.
4
Подыщите или создайте статические изображения для размещения в шаблоне шапки. Логотип и некоторые уникальные элементы можно создать в векторном редакторе или среде 3D-моделирования. Тематические изображения достаточно просто найти на бесплатных фотобанках в интернете.
5
Вставьте фон, логотип и статические изображения в шаблон шапки сайта в графическом редакторе. Фон и каждое изображение добавляйте в отдельный прозрачный слой. Разместите слои оптимальным образом. Перемещая изображения в слоях, добейтесь их идеальной компоновки, соответствующей ранее созданному шаблону.
6
Сохраните результирующее изображение шапки. Сохраните рабочий проект в "родном" формате графического редактора. Затем выполните сохранение сведенного изображения шапки в формате без потери качества (например, PNG).
7
Создайте HTML-шаблон шапки, если это необходимо. Откройте в редакторе сведенное изображение. Произведите вырезание из него изображений, соответствующих областям фиксированного размера. Из мест, соответствующих "резиновым" областям, вырежьте изображения шириной в 1 пиксель. Сохраните все изображения на диск. Сверстайте HTML-заготовку шапки, используя сохраненные изображения.
Видео по теме
Полезный совет
Для "нарезки" готовой шапки и автоматического формирования HTML-шаблона, можно использовать специализированные программы, такие как Adobe ImageReady.
Источники:
  • шаблоны шапок для сайта

Совет 5 : Как изменить шапку сайта

Помимо постоянно обновляющихся блоков информации на сайте не последнюю роль играет вовремя измененный дизайн. Как правило, после одного-двух жизни ресурса рекомендуется обновлять его дизайн: можно сменить шаблон или перерисовать некоторые элементы сайта.
Как изменить шапку сайта
Вам понадобится
  • - аккаунт на платформе Ucoz;
  • - веб-браузер Firefox.
Инструкция
1
Смена дизайна не всегда подразумевает полную смену темы оформления, иногда достаточно перерисовать некоторые элементы, например, «шапку» сайта. Шапкой сайта называется верхняя часть страницы, которая заканчивается на блоке с контентом. Также «шапка» называется хедером (header).
2
Для смены шапки необходимо загрузить свой сайт в браузере, перейти к главной странице и нажать правой кнопкой мыши на изображении (под которой подразумевается «шапка»). В контекстном меню выберите последний пункт «Информация о странице».
3
В открывшемся окне перейдите к вкладке «Мультимедиа» и найдите по названию искомый файл. Искать следует файлы со словами header, logo, head. Названий, написанных на кириллице вы не встретите, будь-то заграничный сайт, будь-то отечественный. Если вы не можете найти по имени файла, попробуйте визуально обнаружить этот файл. Ниже списка файлов есть окно просмотра.
4
Теперь вам достаточно посмотреть размеры «шапки» и сделать аналогичную, если вы хотите ее полностью сменить, либо скопируйте ссылку на изображение, нажав правой кнопкой мыши и выбрав пункт «Копировать». Вставьте в адресной строке новой вкладки полученную ссылку, нажмите правой кнопкой мыши на изображении и выберите пункт «Сохранить как».
5
Для редактирования картинки можно воспользоваться любым редактором пиксельной графики, например, Adobe Photoshop или Gimp. В последнее время некоторые веб-мастера отдают предпочтение последней программе, т.к. она является абсолютно бесплатной.
6
Затем в конфигурационных файлах вашего сайта можно указать ссылку на новую «шапку», удалив прежнюю. Для отображения нового изображения желательно скопировать ее на сайт (путь до папки с картинками можно узнать из ссылки, которую вы копировали). Например, http://site.ru/files/images/header.png.
Видео по теме

Совет 6 : Как поменять шапку сайта

Одним из наиболее популярных сервисов, предоставляющим гибкую систему управления сайтом, является Ucoz-система, содержащая более двухсот шаблонов. В свою очередь, проблема изменения шаблона и, в частности, шапки сайта, распространена среди начинающих веб-мастеров. В качестве шапки сайта могут использоваться графические файлы форматов jpeg, png, gif.
Как поменять шапку сайта
Вам понадобится
  • - сайт, зарегистрированный в системе Ucoz;
  • - графический редактор;
  • - FTP-менеджер.
Инструкция
1
Скопируйте рисунок, использующийся в качестве шапки, на жесткий диск вашего компьютера для последующего редактирования или создайте рисунок такого же размера с помощью любого графического редактора (например, Adobe Photoshop). Если вы собираетесь в качестве шапки использовать заранее заготовленный рисунок, приведите его размеры в соответствие с размерами старой шапки.
2
Войдите в панель управления сайтом и найдите ссылку на графический файл, соответствующий шапке сайта, одним из двух способов. Чтобы проверить, действительно ли выбранный вами рисунок является шапкой сайта, скопируйте его Url-адрес в адресную строку браузера.

1 способ. В Редакторе страниц войдите в «Панель управления модулем». Найдите «Глобальные блоки» и выберите «Верхнюю часть сайта».

2 способ. В «Редакторе страниц» войдите в «Управление дизайном модуля», а затем – в «Таблицу стилей CSS».
3
Загрузите рисунок на сервер, используя в качестве FTP-менеджера Файловый менеджер панели управления Ucoz. Проверьте наличие загруженного рисунка в перечне файлов. Войдите в верхнюю часть сайта, сделайте копию кода и замените ссылку на шапку сайта.
4
Если после установки новой шапки появится название сайта, предусмотренное изначально в шаблоне Ucoz, удалите его. Для этого выберите в пункте меню «Конструктор» строку «Включить конструктор» и удалите название. Появившееся многоточие можно убрать в разделе «Управление дизайном» панели управления.
Обратите внимание
Перед загрузкой рисунка, предназначенного для применения в качестве шапки на сайт, убедитесь, что имя файла с рисунком содержит только латинские буквы или цифры.
Полезный совет
Используйте указанный способ для замены фона и других графических объектов сайта. Кроме того, вы можете изменить ширину и высоту рисунка, подставив нужные значения в поля width и height кода, соответствующего отображению этого рисунка на странице.
Источники:
  • как шапку поменять

Совет 7 : Как добавить шапку на ucoz

Система управления сайтом Ucoz на сегодняшний день является наиболее популярным сервисом среди веб-мастеров благодаря своей гибкости и многообразию имеющихся шаблонов. Однако у начинающих сайтостроителей часто возникает проблема изменения предоставленных шаблонов, особенно редактирование шапок, а ведь это наиболее заметная часть веб-страницы. О очень важно, чтобы она выглядела оригинально и креативно.
Как добавить шапку на ucoz
Вам понадобится
  • - графический редактор;
  • - FTP-менеджер.
Инструкция
1
Перед началом работы удостоверьтесь в наличии на вашем компьютере графического редактора (например, Adobe Photoshop) и FTP-менеджера(Total Commander и т.д.). Создайте в графическом редакторе рисунок такого же размера, что и использующийся в шапке. Для шапки обычно используются такие форматы графических файлов, как jpeg, png, gif.
2
В панели управления сайтом отыщите ссылку на стандартное изображение, присущее выбранному шаблону. Можно воспользоваться двумя путями: 1) «редактор страниц» — «панель управления модулем» — «верхняя часть сайта»;2) «редактор страниц» — «управление дизайном модуля» — «таблица стилей CSS».Проверьте правильность выбора изображения. Для этого скопируйте url-адрес рисунка в адресную строку вашего интернет-браузера. Нажмите кнопку Enter. В том случае, если откроется изображение, используемое в шаблоне, вы все сделали правильно.
3
Отправляйте рисунок на сервер с помощью файлового менеджера провайдера (либо с помощью одного из многих FTP-менеджеров, предварительно узнав у хостинга логин и пароль одного из ftp-серверов). Найдите в перечне файлов ваш загруженный рисунок. В верхней части сайта скопируйте код и замените ссылку на шапку сайта. Бывает такое, что после установки новой шапки появляется название сайта из шаблона. Оно удаляется следующим образом: «меню» — «конструктор» — «включить конструктор». Удалите название сайта. Если появится многоточие на этом же месте, то уберите его, перейдя в раздел «Управление дизайном».
4
Эффектно будет смотреться «случайная» шапка(т.е. с каждым обновлением страницы в шапку будут загружаться различные изображения). Способов, как ее поставить, множество, вот один — с помощью скрипта (если адрес шапки прописан в шаблоне верхней части сайта). Загрузите в файловом менеджере все предполагаемые варианты шапок в одну папку. Назовите, к примеру, header1, header2, header3 и т.п. Замените бывший код:Code< img src="http://адрес сайта/img/header.jpg" > /на новый:Code< script type="text/javascript" > q=Math.floor(Math.random() * N); document.write('<img src="http://адрес сайта/img/header'+q+'.jpg" border="0">/')"; < /script >Здесь N – количество случайных шапок.
Видео по теме

Совет 8 : Как на ucoz поставить шапку

CMS Ucoz на данный момент является наиболее популярной системой управления сайтом среди веб-мастеров благодаря своей функциональности и разнообразию имеющихся шаблонов. Однако у новичков в сайтостроительстве часто возникает желание изменить стандартный дизайн, в частности, отредактировать шапку, которая наиболее заметна для пользователей. Поэтому очень важно, чтобы шапка сайта выглядела эффектно и оригинально.
Как на ucoz поставить шапку
Инструкция
1
Зайдите в панель управления, используя «админ-бар». Если изображения прописаны в CCS, выберите «Дизайн» на верхней панели, а затем «Управление дизайном CCS». Тогда в нижнем окошке появится файл стилей. Найдите в нем адрес шапки сайта, она будет выглядеть так: #header {background:url(‘/ee.jpg’) no-repeat;height:182px; ……}. Разные шаблоны имеют разный вид адреса шапки, поэтому посмотрите, какое изображение, к чему будет относиться.
2
Если изображения прописаны в шаблоне HTML, выберите в той же верхней панели вкладку «Дизайн», затем нажмите на опцию «Управление дизайном для шаблонов». Нижнее окно предложит вам варианты — выбирайте «Верхняя часть веб-сайта». Найдите строчку подобного вида: td height=”193″ width=”698″ style=”background:url(‘/.s/t/341/7.jpg’) left no-repeat; ………>. Определите, какое именно изображение собираетесь поменять. Для этого перейдите по адресу вида «адрес сайта/адрес изображения по шаблону», после чего откроется та картинка, которая вам нужна.
3
Теперь подготовьте новую шапку. Не забывайте, что в том случае, если она будет иметь другие размеры в сравнении с исходной, или же вам необходимо определить для нее другое месторасположение, нужно поправить эти моменты в шаблоне или же в файле стилей CSS. Лучше изначально знать размеры своего изображения и сделать новую шапку по таким же параметрам. В случае необходимости обрежьте графический файл на куски. Сохраните новую шапку в корневом каталоге при помощи менеджера файлов.
4
Сохраняя файл, называйте его таким именем, которое будет содержать только латинские буквы. Также используйте цифры, однако ни в коем случае не используйте кириллицу. Это будет иметь отрицательные последствия. Теперь поменяйте адрес изображения на новый, снова сохраните изменения и проверьте получившийся дизайн.
Совет полезен?
Поиск
Добавить комментарий к статье
Осталось символов: 500