Наверное, любой владелец сайта мечтает, чтобы у его "детища" был оригинальный, непохожий ни на чей другой дизайн. Как же получить этот дизайн? Вариант 1: можно заказать его за деньги, однако результат может не всегда совпадать с желаемым. Более того, чтобы этот дизайн установили, нужно будет дать устанавливающему пароль от ПУ т.д. А это небезопасно.
Вариант 2: сделать самостоятельно. Именно об этом и будет говориться в этом и последующих уроках.
Итак, чтобы самостоятельно создать дизайн своего сайта, необходимы 2 вещи: умение работать в ФШ и знание языка html и css. И тому, и другому научиться на самом деле несложно, главное только - практика. Про работу в ФШ в данном уроке я говорить не буду: подразумевается, что в ФШ работать вы умеете. Теперь о языке html и css. Язык html - это, грубо говоря, набор специальных кодов, с помощью которых создаются все веб-страницы, в том числе и эта. Ее код можно увидеть, щелкнув правой кнопкой мыши Просмотр кода элемента (по крайней мере, в Google Chrome). Страшно? Только на первый взгляд.
Сразу хочу сказать, что эти уроки рассчитаны в первую очередь на сайты от Ucoz, хотя к другим тоже при знании языка html применимы. Кроме того, я не буду в этих уроках учить вас строить дизайн с нуля. Я только расскажу вам, как с помощью языка html и таблиц css можно "перекроить" стандартный шаблон от Ucoz до неузнаваемости.
Итак, начнем: Обычно, веб-страница имеет следующую структуру: верхняя часть (head), основную часть (body), нижнюю часть (footer). Запомните, что в пределах тега head не нужно ничего трогать. Работать мы будем в основном с тегом body. Прежде всего, вам нужно зайти в вашу ПУ и выбрать стандартный шаблон от Ucoz, который вы будете преображать. В принципе, подходит любой, но я предпочитаю работать с шаблоном #823 и вам его тоже советую. Кстати, дизайн данного сайта сделан тоже на базе шаблона #823! После того, как вы выбрали шаблон, вы должны перейти в раздел Дизайн- Управление дизайном. Теперь нужно внимательно посмотреть на него. Редактор страниц отвечает за структуру всех страниц вашего сайта. В нем с помощью кодов html прописано расположение, количество всех блоков на странице и т.п. Нижняя часть сайта - соответственно "подвал", Первый контейнер - боковой блок (при наличии 2-го бокового блока будет и Второй контейнер). Обычно еще бывает Верхняя часть сайта, отвечающая как раз за шапку, но в шаблоне #823 ее нет. и шапка создается по-другому, на мой взгляд, легче. Эти выше перечисленные "отсеки" являются каркасом, написанным с помощью языка html. В них отображена структура, но не отображены цвет, шрифт текста, форма и т.п. Для этого существуют таблицы css. В них также используются специальные коды, сильно похожие на html. Итак, обращаясь к установки именно шапки, следует обратить внимание именно на следующие коды (вы увидите их сразу, когда щелкните на Таблицы css):
body {background:#5b5b5e; margin:0px; padding:0px;}
#wrap {background:#535961; text-align: center;}
#contanier {width: 1000px; margin-left: auto; margin-right: auto; background: url(http://lonelighthouse.ucoz.ru/Winter/shapka-2.png) no-repeat #23272f; padding: -100; text-align: left;}.
Body - это сама основа сайта, в принципе ее цвет и не обязательно менять, так как он не отображается, хотя я советую ставить его одинаковым с #wrap
#wrap - это как раз задний фон (светло-серый на примере)
#container - это как раз та основная часть, на которой расположены новости, боковые контейнеры,и, в данном шаблоне, шапка (цвет #container на примере - темно-серый).
Итак, чтобы заменить цвета, нужно просто из палитры ФШ скопировать код нужного цвета и вставить в тег background (background:#535961, к примеру).
Что же касается шапки, то для ее создания и установки нужно:
1. Создать изображение нужного размера в ФШ
2. Загрузить это изображение через Файловый менеджер на свой сайт
3. Щелкнуть на появившуюся ссылку и скопировать код
4. Вставить код после тега url в #container (background: url (http://lonelighthouse.ucoz.ru/Winter/shapka-2.png), к примеру). No-repeat означает, что изображение шапки не повторяется.
Width - ширина блока #container, которую можно изменять по своему усмотрению.
Пример:

Вот и все, что вам нужно знать для успешного создания и установки шапки. Надеюсь, этот урок вам очень поможет. Удачи!