Обзоры интернет сервисов, проектов и стартапов - только самые интересные и полезные ресурсы всемирной паутины: описание функциональности, возможности, скриншоты, видео туры, личные впечатления и опыт использования...

Март 26 2014

Делаем шапку на сайте ucoz

ucoz сайтПройдя процессы установки и настройки профиля в Ucoz, пользователь может приступать к созданию своего сайта. В первую очередь веб-мастерам стоит обратить внимание на шапку сайта. Именно является элементом, который задаёт структуру вашего сайта. На сайте ucoz существует специализированный конструктор для создания качественного заголовка для вашего сайта.

Инструкция по созданию шапки:

1. Откройте вкладку «Панель управления» на вашем сайте, далее зайдите в подраздел «Управление дизайном». Там вы увидите категорию «Общие шаблоны», в которой нужно выбрать «Таблицу стилей CSS». После того, как вы проделаете все эти действия, появится код, отвечающий за оформление шапки, и список шаблонов.

2. Найдите строку кода, начинающуюся со слова .header. Именно эта строка создаёт псевдокласс, в котором определяется, какой дизайн будет иметь вся верхняя часть вашего ресурса. Этот код — то, что нам нужно, для того, чтобы изменить шапку.

3. Для изменения фона шапки следует изменить в данной строке параметр: background url(‘веб-адрес_по_которому_распологается_ваша_картинка’). Далее нужно скопировать адрес в скобках (без кавычек), после чего добавить его к адресу вашего сайта в окне браузера. Например, если ваш сайт располагается по адресу site.ucoz.ru, а картинка с вашим фоном лежит по адресу .a/u/111/2.png, тогда в адресной строке браузера должно быть следующее: site.ucoz.ru/.a/u/111/2.png

После ввода нажмите клавишу Enter

4. Сохранив полученный вами файл, вы сможете изменить его при помощи любого имеющегося графического редактора (GIMP, Paint, Photoshop). Вы можете задать свой стиль оформления с помощью функций программы и её инструментов, изменить фон. Далее нужно не изменяя размера картинки сохранить её куда-нибудь на вашем компьютере. Назвать файл можно как угодно, только с тем же расширением (к примеру, head.png).

5. Вернитесь в окно редактора Ucoz и перейдите в подраздел «Файловый менеджер». Далее нужно загрузить ваше изображение в любую имеющуюся папку. Сделать это можно воспользовавшись кнопкой «Обзор» и далее нажав «Загрузить файл».

6. Укажите адрес к вашему новому загруженному изображению файла шапки, вернувшись для этого к странице редактора CSS. Если картинка, которую вы загрузили в корневой каталог сайта, имеет название head.png, тогда код background должен выглядеть так:

Background url(‘head.png’)

Вообще в сети имеется достаточно много разных сервисов для создания полноценных сайтов, но если рассматривать все конструкторы сайтов то юкоз это определенно один из самых простых и доступных проектов. С некоторыми вещами, как например, шапка сайта придется слегка повозиться, но в целом разобраться сможет практически каждый.

Оставить комментарий