Как изменить шапку сайта ucoz

Урок№4. Как поменять шапку сайта на ucoz.ru

В этом уроке, Вы узнаете, как сменить шапку сайта ucoz. Хочу напомнить, что уроки по изменению дизайна, представленные на сайте http://webcaum.ru, НЕ являются универсальным решением, т.к. к каждому шаблону сайта нужен индивидуальный подход. Уроки даны лишь для того, чтобы было понимание, как меняются элементы сайта на Юкозе. Прежде чем продолжить, скачайте файлы для дальнейшей работы и разархивируйте их.

В первую очередь нам нужно закачать файл fon.gif. Чтобы закачать его зайдите в раздел: Инструменты -> Файловый менеджер.

Перед Вами появится окно загрузки файлов. Нажмите на кнопку «Обзор», зайдите в папку, где находятся скачанные файлы, и выберите картинку fon.gif. Затем нажмите на кнопку «Загрузить файл».

После загрузки файла fon.gif нажмите на кнопку в виде глаза , чтобы посмотреть в какой директории находится картинка. Вы увидите, что файл находится в коневой папке сайта, т.е. по адресу http://ИМЯ_ВАШЕГО_САЙТА.ucoz.ru/fon.gif. Данный файл будет фоном для шапки нашего сайта. Вы спросите, как такая маленькая картинка может стать фоном для всей области шапки? Дело в том, что данный файл будет размножен в горизонтальной и вертикальной плоскости.

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

И сейчас Вы узнаете, как это сделать.

Зайдите в раздел: Дизайн -> Управление дизайном (CSS).

Вы попадёте в раздел, где мы можем менять данные таблицы стилей (CSS). Если с помощью HTML создаётся структура сайта, то с помощью CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) эта структура украшается. Если Вы не знаете, что такое HTML и CSS, то изучите сначала ниже представленные видеокурсы:

  • Бесплатный курс по HTML от Евгения Попова (33 видеоурока)
  • Бесплатный курс по CSS от Евгения Попова (45 видеоуроков)

Итак, приступим к изменению дизайна шапки сайта. На 5-ой строчке в таблице стилей Вы увидите следующий код:

#logoBlock {padding:50px 20px 10px 20px;border-top:5px solid #000000;}

Именно этот код мы будем корректировать, чтобы привести шапку сайта в тот вид, который нам нужен. Замените полностью данный код на следующие данные :

#logoBlock {height:96px;border-top:2px solid #000000;border-bottom:2px solid #000000;background: url(‘/fon.gif’);}

, где
height:96px — это высота шапки в 96px.
border-top:2px solid #000000; — верхнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
border-bottom:2px solid #000000; — нижнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
background: url(‘/fon.gif’); — означает, что фоном шапки будет картинка fon.gif, размноженная в горизонтальной и вертикальной плоскости.

Также этот код Вы можете привести в следующий вид (как Вам будет удобней):

#logoBlock {
height:96px;
border-top:2px solid #000000;
border-bottom:2px solid #000000;
background: url(‘/fon.gif’);
}

Нажмите кнопку «Сохранить». Обновите главную страницу сайта, и Вы увидите, что шапка теперь выглядит так:

Бывает так, что не сразу браузер показывает изменения, произошедшие на сайте. Это происходит потому, что кэш браузера (копии веб-страниц, уже просмотренных пользователем) не всегда стирается после обновления сайта. Чтобы стереть кэш в таких браузерах, как Mozilla и Internet Explorer, нажмите «CTRL + F5». Если данное сочетание клавиш не работает (например, в Опере), то просто несколько раз нажмите клавишу F5.

Итак, фон шапки сайта мы поменяли. Теперь нужно красиво расположить заголовок «Белый каталог сайтов» в шапке.

Зайдите в раздел: Дизайн -> Управление дизайном (шаблоны).

После чего перейдите в раздел «Верхняя часть сайта».

Обратите внимание на код, который находится на первой строчке:

<div id="logoBlock"><h1>Белый каталог сайтов</h1></div>

Добавьте тег <div id="logotip_h1"> с левой стороны от тега <h1> , а с правой стороны от тега</h1> — </div>. Т.е. теперь код на первой строчке должен выглядеть так (красным цветом помечено то, что нужно добавить):

<div id="logoBlock"><div id="logotip_h1"><h1>Белый каталог сайтов</h1></div></div>

После нажмите кнопку «Сохранить». Дополнительные теги мы добавили для того чтобы задать нужный нам фон для области, в которой находится заголовок «Белый каталог сайтов», заключенный в теги<h1></h1>, и сделать отступы для блока <div id="logotip_h1"><h1>Белый каталог сайтов</h1></div> относительно области шапки, т.е. тегов <div id="logoBlock"></div>. В общем, сейчас Вы всё увидите воочию.

Прежде всего, нам нужно закачать файл h1-fon.jpg. Зайдите в «Файловый менеджер» и закачайте его.

Затем перейдите в раздел: Дизайн -> Управление дизайном (CSS).

После блока стилей #logoBlock {height:96px;border-top:2px solid #000000;border-bottom:2px solid #000000;background: url(‘/fon.gif’);} на следующей строчке напишите следующий код:

#logotip_h1 {
background: url(‘/h1-fon.jpg’) no-repeat;
position: relative;
top:25px;
left:39px;
width:472px;
height:60px;
padding-top:13px;
text-align:center;
}

, где
background: url(‘/h1-fon.jpg’) no-repeat; — фон блока <div id="logotip_h1"></div>, в котором находится заголовок <h1>Белый каталог сайтов</h1>
position: relative; — означает, что положение элемента <div id="logotip_h1"></div> устанавливается относительно всей области шапки <div id="logoBlock"></div>. Добавление свойств left, top, right и bottom изменяет позицию элемента <div id="logotip_h1"></div>.
top:25px; — устанавливает величину отступа в 25px для элемента <div id="logotip_h1"></div> от верхнего края блока <div id="logoBlock"></div>.
left:39px; — устанавливает величину отступа в 39px для элемента <div id="logotip_h1"></div> от левого края блока <div id="logoBlock"></div>.
width:472px; — ширина элемента <div id="logotip_h1"></div> в 472px.
height:60px; — высота элемента <div id="logotip_h1"></div> в 60px.
padding-top:13px; — делает внутренний верхний отступ. Т.е. у элементов, находящихся внутри кода <div id="logotip_h1"></div> (в нашем случае — это заголовок <h1>Белый каталог сайтов</h1>), будет отступ сверху в 13px.
text-align:center; — устанавливает по центру элементы, которые находятся внутри кода <div id="logotip_h1"></div>.

Нажмите кнопку «Сохранить» и обновите главную страницу сайта. Теперь шапка сайта выглядит так:

Теперь осталось поменять цвет заголовка «Белый каталог сайтов» с чёрного на белый.

Для этого в таблице стилей CSS найдите строчку #logoBlock h1 {color:#000000;font-size:24pt;font-weight:normal;margin:0;padding:0;} и замените код #000000, который означает чёрный цвет, на#FFFFFF (белый цвет). Т.е. данная строчка должна теперь выглядеть так (красным цветом отмечено то, что было изменено):

#logoBlock h1 {color:#FFFFFF;font-size:24pt;font-weight:normal;margin:0;padding:0;}

Обновите сайт. Теперь шапка сайта выглядит так:

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

Как добавить картинку на сайт ucoz

В интернете получили распространение в основном два типа картинок. Это картинки GIF (имеют расширение .gif) и картинки JPEG (имеют расширение .jpg или .jpeg). Поэтому желательно использовать картинки этих двух типов на страницах своих сайтов. Картинки других типов могут отображаться не во всех броузерах. Для заливки картинки на сайт её сначала надо сохранить на своём компьютере.

Для вставки изображения на страницу сайта ucoz есть несколько способов. Рассмотрим основные из них.

1]Загрузка картинки через форму загрузки изображений.

Форма загрузки изображений есть во всех контент-модулях uCoz. Найти ее нетрудно: она под полем добавления текста страницы под названием "Изображения" (см. п.1 на рис.1).

В этом способе нет возможности прописывать атрибуты ALT и TITLE для изображения, которые важны для поисковых систем. Он используется если мало времени или не важна поисковая оптимизация при добавлении изображения.

С помощью этой функции вы сможете прикрепить изображение к тексту страницы:

— открываем страницу сайта, на которую устанавливаем изображение;

— для выбора изображения, размещённого на вашем ПК, нужно щёлкнуть по кнопке "Обзор"(п.2 на рис.1);

— в открывшемся диалоговом окне выбрать файл устанавливаемого изображения и нажать в том окне кнопку "Открыть". при этом должен отобразиться код <$IMAGE$> (п.3) устанавливаемого изображения;

— поле (п.4) указывает путь до выбранной картинки на вашем компьютере;

— кнопка (п.5) поможет добавить ещё одно поле для добавления изображения

(нужно знать, что максимальный размер каждого загружаемого изображения 2 000 килобайт (почти 2 мегабайта) и то, что к одной странице можно прикрепить максимум 20 изображений);

— система автоматически будет уменьшать большие изображения до установленных вами размеров (п.6); при этом, нажав на изображение, посетитель сможет увидеть его в полном размере;

— скопировать код <$IMAGE$> (п.3) устанавливаемого изображения и разместить его в "Поле текста страницы" (п.7);

— нажать кнопку "Сохранить".

Рис.1

Результат — фото 1 в "Примере вставок изображений"

2]Загрузка изображения через файловый менеджер.

Заливку картинок на сайт uCoz через файловый менеджер могут осуществлять как администраторы, так и пользователи сайта (по усмотрению админа). После авторизации вы попадаете на главную страницу сайта. Наиболее простой вариант доступа к файловому менеджеру — через кнопку "Управление" админбара, при нажатии на которую открывается окно с перечнем функций, среди которых и "Файловый менеджер" (рис.2).

Открываете его и загружаете картинку с вашего компьютера в какую либо папку файлового менеджера.

Как заменить шапку сайта?

К примеру, выбираете папку "Bunin" (рис.3), щёлкаете по ней левой кнопкой мышки, а в открывшемся окне — по кнопке "Выберите файл" (рис.4).

В новом окне на своём ПК находите папку с нужным изображением (к примеру изображение Photo2.jpg в папке "Photo" на диске"D:"), выделяете его левой кнопкой мышки и щёлкаете по кнопке "Открыть" (рис.5).

Открывается окно, аналогичное изображённому на рис.4, но уже в поле кнопки "Выберите файл" прописан путь к выбранному изображению (Photo2.jpg), и появился пунктик "Поставить водяной знак (watermark) на изображение" (рис.6) Если "водяной знак" на изображении вам не нужен — снимаете галочку в этом пунктике, и нажимаете кнопку "Загрузить файл" (см. примечание ).

По окончании загрузки изображения открывается окно папки "Bunin" с файлом Photo2.jpg (21.22 Kb) — рис.7

В графе "Действие" в строке "Photo2.jpg" (рис.7) расположены пять значков. Назначение каждого из них появляется при подведении указателя мышки к соответствующему значку (рис.8).

Для загрузки изображения (файл Photo2.jpg — рис.7) на сайт необходим его HTML-код, для извлечения которого нажимаем кнопку "Ссылка к файлу" (рис.8), и в открывшемся окне копируем код картинки (рис.9), вставляем его в "Поле текста страницы" (п.8 рис.10) и нажимем кнопку "Сохранить".

В "Примере вставок изображений" получаем выбранное иображение — Фото 2.

Примечание :

— можно одновременно загрузить ещё несколько изображений (файлов), нажав на зелёный знак "плюс" рядом с кнопкой "Загрузить файл" (рис.11); — можно загрузить изображения (файлы) не только со своего ПК, но и из интернета, поставив галочку в окошечке левее зелёного знака "плюс", и введя соответствующую ссылку в открывшееся новое поле вместо поля "Выберите файл" (рис.12).

3]Обтекание картинки текстом.

а) Загрузка изображения в визуальном редакторе uCoz.

Напомним, что в визуальном редакторе uCoz есть кнопка (иконка) "Изображение" ( 7 или 11 ), при нажатии на которую появляется одноименное диалоговое окно — рис.13

Рис.13

В верхнем поле "Путь" необходимо указать путь к картинке — её web-адрес.

Если картинка находится на другом ресурсе или на компьютере пользователя, то её необходимо предварительно загрузить в файловый менеджер (см. предыдущий раздел "Загрузка изображения через файловый менеджер" ). Затем щелчком по строке выбранного изображения (к примеру по Photo2.jpg — рис.7 ) автоматом возвращаемся в окно «Изображение» с уже заполненным полем "Путь".

Если загрузка изображения производится из интернета (с помощью его адреса), то этот URL-адрес изображения следует скопировать в поле "Путь".

Во второй строке (рис.13) указывается название, которое будет служить alt-тегом картинки.

В третьей строке в выпадающем списке «Выравнивание» выбирается вариант обтекания текстом вставленного

изображения. Установим "Выравнивание вправо". Выбранный вариант выравнивания отображается в нижней части окна.

Кнопка ‘граница’ позволяет выбрать рамку изображения (тип, толщину, цвет)

В полях «Ширина» и «Высота» можно задать в пикселах размеры изображения, с которыми оно отобразится на странице. Если оставить поля пустыми, рисунок отобразится в полном размере. Мы же сократим размер рисунка вдвое и зададим значения 150 х 90 рх.

В правой части диалогового окна в полях "Вверх", "Низ", "Влево", "Вправо" можно установить отступы текста страницы от изображения. Установим в этих полях значение 10. Графика введённых отступов отображается в нижней части окна. В итоге получаем оформленное окно "Изображение" — рис.14

Рис.14

В этом окне нажимаем кнопку "Вставить", затем кнопку «Сохранить» в нижней части окна редактора uCoz и получаем результат в виде фото 3 в "Примере вставок изображений"

b) Универсальный код для загрузки изображений

Перед вами HTML-код картинки, изображённой на фото 3 в ‘Примере вставок изображений на страницу сайта’

Код 1

В этом коде:

  • http://elislav.my1.ru/Bunin/ris.13.jpg — URL-адрес картинки, загруженной через файловый менеджер ;
  • alt="Porsche 911 Carrera" -атрибут alt устанавливает альтернативный текст для изображений;
  • align="right" — выравнивание картинки вправо от текста;
  • width="150" height="90" — горизонтальный и вертикальный размеры картинки;
  • — отступы текста (вверх-вправо-вниз-влево) от изображения в пикселях.
  • Таким образом, для того, чтобы вставить картинку (в том числе и уменьшенного размера) в нужное место текста, достаточно иметь лишь её URL-адрес; остальные же параметры кода (размер картинки, отступы и пр.) задаются по усмотрению автора.

    Более того, немного видоизменив HTML-код, можно создавать превью изображения с обтеканием его текстом, что бывает необходимо при наполнении сайтов контентом (при размещении на сайте статей и т.п.). Код достаточно прост и интуитивно понятен даже пользователям, лишь постигающим азы HTML:

    Код 2

    <a href="http://elislav.my1.ru/Bunin/ris.14.jpg"> <img src="http://elislav.my1.ru/Bunin/ris.14.jpg" alt="Porsche 911 Carrera" align="left" width="150" height="90"> </a>

    Вторая часть этого кода — копия Кода 1 (изменены лишь URL-адрес — другая картинка — и значение тега align с "right" на "left"), а атрибут href в первой части кода задает адрес оригинала изображения.

    Плюсы кода не только в удобстве вставки превью картинки в текст, но и в простоте создания превью, минуя хостингы изображений типа radikal.ru, не отличающихся надёжность показов.

    Пример вставки превью изображения с обтеканием его текстом показан на фото 4 в "Примере вставок изображений"

    4]Создаём превью изображения с помощью сайта Радикал-фото

    — Входим на сайт Радикал-фото и на открывшейся панели выставляем нужные опции — Рис.15

    — Нажав кнопку "Выберите файл" (Рис.15), в диалоговом окне ПК выбираем нужный файл картинки, которую хотим переписать со своего компьютера на сайт — Photo3, и нажимаем там кнопку "Открыть" — Рис.16

    — На панели Радикал-фото нажимаем кнопку "Загрузить" — Рис.17

    — После загрузки изображения на панели из списка ссылок выбираем нужный нам вариант загрузки данного изображения на сайт: положим, нам нужно добавить на сайт превью (увеличение изображения по клику) в HTML-коде. Тогда нам подойдёт вариант 7 — "HTML: превью — увеличение по клику" — Рис.18

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

    — Обратимся к окну "Коды" и нажмём в нём кнопку "Переход с превью" и выбираем вариант "На графический файл" — Рис.19

    — В открывшемся окне выбираем тот же вариант 7 — "HTML: превью — увеличение по клику". выделяем получившуюся ссылку и в контекстном меню выбираем "Копировать" — Рис.20

    — После этого вставляем скопированную ссылку в выбранное место страницы сайта, и получаем превью – уменьшенную копию изображения, при клике по которой открывается полноразмерная версия изображения — фото 5 в "Примере вставок изображений"

    Пример вставок изображений на страницу сайта.

    Тест-драйв: BMW M3 CSL, Porsche 911 Carrera.

    BMW M3 CSL // BMW M3, Porsche 911 Carrera. "Автопанорама”

    Фото 1

    Фото 2

    BMW М3 в версии CSL не только легче, но и мощнее, и он просто обречен на успех.

    Чувствую себя, как баранья отбивная, которую хорошо прожарили с двух сторон до золотистой корочки. Только в роли гриля выступает крыша BMW М3 CSL: она сделана из углепластика и не окрашена. Конструкторы использовали этот материал, чтобы выиграть в весе. По той же причине они отказались от теплошумоизоляции потолка. Когда температура окружающего воздуха достигает 35°С, крыша BMW М3 CSL нагревается, как сковорода. Инженеры М-отделения концерна BMW добились от двигателя нового CSL впечатляющих 360 л.с. но в тесном моторном отсеке ему очень жарко. Перегородка между моторным отсеком и салоном не является преградой для выделяемого тепла, и мои ноги поджариваются во время движения. А еще один "способ борьбы” с лишним весом — отсутствие кондиционера!

    Категория: Веб-программирование

    Похожие статьи:

    Как сделать картинку ссылкой

    Как вставить картинку на сайт. Редактирование

    Как вставить картинку на сайт, в статью и сделать это правильно

    Как сделать красивую картинку

    Как в ворде вставить картинку

    Урок№4. Как поменять шапку сайта на ucoz.ru

    В этом уроке, Вы узнаете, как сменить шапку сайта ucoz. Хочу напомнить, что уроки по изменению дизайна, представленные на сайте http://webcaum.ru, НЕ являются универсальным решением, т.к. к каждому шаблону сайта нужен индивидуальный подход. Уроки даны лишь для того, чтобы было понимание, как меняются элементы сайта на Юкозе. Прежде чем продолжить, скачайте файлы для дальнейшей работы и разархивируйте их.

    В первую очередь нам нужно закачать файл fon.gif. Чтобы закачать его зайдите в раздел: Инструменты -> Файловый менеджер.

    Перед Вами появится окно загрузки файлов. Нажмите на кнопку «Обзор», зайдите в папку, где находятся скачанные файлы, и выберите картинку fon.gif. Затем нажмите на кнопку «Загрузить файл».

    После загрузки файла fon.gif нажмите на кнопку в виде глаза , чтобы посмотреть в какой директории находится картинка. Вы увидите, что файл находится в коневой папке сайта, т.е. по адресу http://ИМЯ_ВАШЕГО_САЙТА.ucoz.ru/fon.gif. Данный файл будет фоном для шапки нашего сайта.

    Как изменить шапку на сайте uCoz плюс видео урок

    Вы спросите, как такая маленькая картинка может стать фоном для всей области шапки? Дело в том, что данный файл будет размножен в горизонтальной и вертикальной плоскости. И сейчас Вы узнаете, как это сделать.

    Зайдите в раздел: Дизайн -> Управление дизайном (CSS).

    Вы попадёте в раздел, где мы можем менять данные таблицы стилей (CSS). Если с помощью HTML создаётся структура сайта, то с помощью CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) эта структура украшается. Если Вы не знаете, что такое HTML и CSS, то изучите сначала ниже представленные видеокурсы:

    • Бесплатный курс по HTML от Евгения Попова (33 видеоурока)
    • Бесплатный курс по CSS от Евгения Попова (45 видеоуроков)

    Итак, приступим к изменению дизайна шапки сайта. На 5-ой строчке в таблице стилей Вы увидите следующий код:

    #logoBlock {padding:50px 20px 10px 20px;border-top:5px solid #000000;}

    Именно этот код мы будем корректировать, чтобы привести шапку сайта в тот вид, который нам нужен. Замените полностью данный код на следующие данные :

    #logoBlock {height:96px;border-top:2px solid #000000;border-bottom:2px solid #000000;background: url(‘/fon.gif’);}

    , где
    height:96px — это высота шапки в 96px.
    border-top:2px solid #000000; — верхнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
    border-bottom:2px solid #000000; — нижнее подчёркивание сплошной (solid) чёрной (#000000) линией толщиной в 2px.
    background: url(‘/fon.gif’); — означает, что фоном шапки будет картинка fon.gif, размноженная в горизонтальной и вертикальной плоскости.

    Также этот код Вы можете привести в следующий вид (как Вам будет удобней):

    #logoBlock {
    height:96px;
    border-top:2px solid #000000;
    border-bottom:2px solid #000000;
    background: url(‘/fon.gif’);
    }

    Нажмите кнопку «Сохранить». Обновите главную страницу сайта, и Вы увидите, что шапка теперь выглядит так:

    Бывает так, что не сразу браузер показывает изменения, произошедшие на сайте. Это происходит потому, что кэш браузера (копии веб-страниц, уже просмотренных пользователем) не всегда стирается после обновления сайта. Чтобы стереть кэш в таких браузерах, как Mozilla и Internet Explorer, нажмите «CTRL + F5». Если данное сочетание клавиш не работает (например, в Опере), то просто несколько раз нажмите клавишу F5.

    Итак, фон шапки сайта мы поменяли. Теперь нужно красиво расположить заголовок «Белый каталог сайтов» в шапке.

    Зайдите в раздел: Дизайн -> Управление дизайном (шаблоны).

    После чего перейдите в раздел «Верхняя часть сайта».

    Обратите внимание на код, который находится на первой строчке:

    <div id="logoBlock"><h1>Белый каталог сайтов</h1></div>

    Добавьте тег <div id="logotip_h1"> с левой стороны от тега <h1> , а с правой стороны от тега</h1> — </div>. Т.е. теперь код на первой строчке должен выглядеть так (красным цветом помечено то, что нужно добавить):

    <div id="logoBlock"><div id="logotip_h1"><h1>Белый каталог сайтов</h1></div></div>

    После нажмите кнопку «Сохранить». Дополнительные теги мы добавили для того чтобы задать нужный нам фон для области, в которой находится заголовок «Белый каталог сайтов», заключенный в теги<h1></h1>, и сделать отступы для блока <div id="logotip_h1"><h1>Белый каталог сайтов</h1></div> относительно области шапки, т.е. тегов <div id="logoBlock"></div>. В общем, сейчас Вы всё увидите воочию.

    Прежде всего, нам нужно закачать файл h1-fon.jpg. Зайдите в «Файловый менеджер» и закачайте его.

    Затем перейдите в раздел: Дизайн -> Управление дизайном (CSS).

    После блока стилей #logoBlock {height:96px;border-top:2px solid #000000;border-bottom:2px solid #000000;background: url(‘/fon.gif’);} на следующей строчке напишите следующий код:

    #logotip_h1 {
    background: url(‘/h1-fon.jpg’) no-repeat;
    position: relative;
    top:25px;
    left:39px;
    width:472px;
    height:60px;
    padding-top:13px;
    text-align:center;
    }

    , где
    background: url(‘/h1-fon.jpg’) no-repeat; — фон блока <div id="logotip_h1"></div>, в котором находится заголовок <h1>Белый каталог сайтов</h1>
    position: relative; — означает, что положение элемента <div id="logotip_h1"></div> устанавливается относительно всей области шапки <div id="logoBlock"></div>. Добавление свойств left, top, right и bottom изменяет позицию элемента <div id="logotip_h1"></div>.
    top:25px; — устанавливает величину отступа в 25px для элемента <div id="logotip_h1"></div> от верхнего края блока <div id="logoBlock"></div>.
    left:39px; — устанавливает величину отступа в 39px для элемента <div id="logotip_h1"></div> от левого края блока <div id="logoBlock"></div>.
    width:472px; — ширина элемента <div id="logotip_h1"></div> в 472px.
    height:60px; — высота элемента <div id="logotip_h1"></div> в 60px.
    padding-top:13px; — делает внутренний верхний отступ. Т.е. у элементов, находящихся внутри кода <div id="logotip_h1"></div> (в нашем случае — это заголовок <h1>Белый каталог сайтов</h1>), будет отступ сверху в 13px.
    text-align:center; — устанавливает по центру элементы, которые находятся внутри кода <div id="logotip_h1"></div>.

    Нажмите кнопку «Сохранить» и обновите главную страницу сайта. Теперь шапка сайта выглядит так:

    Теперь осталось поменять цвет заголовка «Белый каталог сайтов» с чёрного на белый.

    Для этого в таблице стилей CSS найдите строчку #logoBlock h1 {color:#000000;font-size:24pt;font-weight:normal;margin:0;padding:0;} и замените код #000000, который означает чёрный цвет, на#FFFFFF (белый цвет). Т.е. данная строчка должна теперь выглядеть так (красным цветом отмечено то, что было изменено):

    #logoBlock h1 {color:#FFFFFF;font-size:24pt;font-weight:normal;margin:0;padding:0;}

    Обновите сайт. Теперь шапка сайта выглядит так:

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

    Как добавить картинку на сайт ucoz

    В интернете получили распространение в основном два типа картинок. Это картинки GIF (имеют расширение .gif) и картинки JPEG (имеют расширение .jpg или .jpeg). Поэтому желательно использовать картинки этих двух типов на страницах своих сайтов. Картинки других типов могут отображаться не во всех броузерах.

    Как сделать свою шапку сайта на uCoz

    Для заливки картинки на сайт её сначала надо сохранить на своём компьютере.

    Для вставки изображения на страницу сайта ucoz есть несколько способов. Рассмотрим основные из них.

    1]Загрузка картинки через форму загрузки изображений.

    Форма загрузки изображений есть во всех контент-модулях uCoz. Найти ее нетрудно: она под полем добавления текста страницы под названием "Изображения" (см. п.1 на рис.1).

    В этом способе нет возможности прописывать атрибуты ALT и TITLE для изображения, которые важны для поисковых систем. Он используется если мало времени или не важна поисковая оптимизация при добавлении изображения.

    С помощью этой функции вы сможете прикрепить изображение к тексту страницы:

    — открываем страницу сайта, на которую устанавливаем изображение;

    — для выбора изображения, размещённого на вашем ПК, нужно щёлкнуть по кнопке "Обзор"(п.2 на рис.1);

    — в открывшемся диалоговом окне выбрать файл устанавливаемого изображения и нажать в том окне кнопку "Открыть". при этом должен отобразиться код <$IMAGE$> (п.3) устанавливаемого изображения;

    — поле (п.4) указывает путь до выбранной картинки на вашем компьютере;

    — кнопка (п.5) поможет добавить ещё одно поле для добавления изображения

    (нужно знать, что максимальный размер каждого загружаемого изображения 2 000 килобайт (почти 2 мегабайта) и то, что к одной странице можно прикрепить максимум 20 изображений);

    — система автоматически будет уменьшать большие изображения до установленных вами размеров (п.6); при этом, нажав на изображение, посетитель сможет увидеть его в полном размере;

    — скопировать код <$IMAGE$> (п.3) устанавливаемого изображения и разместить его в "Поле текста страницы" (п.7);

    — нажать кнопку "Сохранить".

    Рис.1

    Результат — фото 1 в "Примере вставок изображений"

    2]Загрузка изображения через файловый менеджер.

    Заливку картинок на сайт uCoz через файловый менеджер могут осуществлять как администраторы, так и пользователи сайта (по усмотрению админа). После авторизации вы попадаете на главную страницу сайта. Наиболее простой вариант доступа к файловому менеджеру — через кнопку "Управление" админбара, при нажатии на которую открывается окно с перечнем функций, среди которых и "Файловый менеджер" (рис.2).

    Открываете его и загружаете картинку с вашего компьютера в какую либо папку файлового менеджера. К примеру, выбираете папку "Bunin" (рис.3), щёлкаете по ней левой кнопкой мышки, а в открывшемся окне — по кнопке "Выберите файл" (рис.4).

    В новом окне на своём ПК находите папку с нужным изображением (к примеру изображение Photo2.jpg в папке "Photo" на диске"D:"), выделяете его левой кнопкой мышки и щёлкаете по кнопке "Открыть" (рис.5).

    Открывается окно, аналогичное изображённому на рис.4, но уже в поле кнопки "Выберите файл" прописан путь к выбранному изображению (Photo2.jpg), и появился пунктик "Поставить водяной знак (watermark) на изображение" (рис.6) Если "водяной знак" на изображении вам не нужен — снимаете галочку в этом пунктике, и нажимаете кнопку "Загрузить файл" (см. примечание ).

    По окончании загрузки изображения открывается окно папки "Bunin" с файлом Photo2.jpg (21.22 Kb) — рис.7

    В графе "Действие" в строке "Photo2.jpg" (рис.7) расположены пять значков. Назначение каждого из них появляется при подведении указателя мышки к соответствующему значку (рис.8).

    Для загрузки изображения (файл Photo2.jpg — рис.7) на сайт необходим его HTML-код, для извлечения которого нажимаем кнопку "Ссылка к файлу" (рис.8), и в открывшемся окне копируем код картинки (рис.9), вставляем его в "Поле текста страницы" (п.8 рис.10) и нажимем кнопку "Сохранить".

    В "Примере вставок изображений" получаем выбранное иображение — Фото 2.

    Примечание :

    — можно одновременно загрузить ещё несколько изображений (файлов), нажав на зелёный знак "плюс" рядом с кнопкой "Загрузить файл" (рис.11); — можно загрузить изображения (файлы) не только со своего ПК, но и из интернета, поставив галочку в окошечке левее зелёного знака "плюс", и введя соответствующую ссылку в открывшееся новое поле вместо поля "Выберите файл" (рис.12).

    3]Обтекание картинки текстом.

    а) Загрузка изображения в визуальном редакторе uCoz.

    Напомним, что в визуальном редакторе uCoz есть кнопка (иконка) "Изображение" ( 7 или 11 ), при нажатии на которую появляется одноименное диалоговое окно — рис.13

    Рис.13

    В верхнем поле "Путь" необходимо указать путь к картинке — её web-адрес.

    Если картинка находится на другом ресурсе или на компьютере пользователя, то её необходимо предварительно загрузить в файловый менеджер (см. предыдущий раздел "Загрузка изображения через файловый менеджер" ). Затем щелчком по строке выбранного изображения (к примеру по Photo2.jpg — рис.7 ) автоматом возвращаемся в окно «Изображение» с уже заполненным полем "Путь".

    Если загрузка изображения производится из интернета (с помощью его адреса), то этот URL-адрес изображения следует скопировать в поле "Путь".

    Во второй строке (рис.13) указывается название, которое будет служить alt-тегом картинки.

    В третьей строке в выпадающем списке «Выравнивание» выбирается вариант обтекания текстом вставленного

    изображения. Установим "Выравнивание вправо". Выбранный вариант выравнивания отображается в нижней части окна.

    Кнопка ‘граница’ позволяет выбрать рамку изображения (тип, толщину, цвет)

    В полях «Ширина» и «Высота» можно задать в пикселах размеры изображения, с которыми оно отобразится на странице. Если оставить поля пустыми, рисунок отобразится в полном размере. Мы же сократим размер рисунка вдвое и зададим значения 150 х 90 рх.

    В правой части диалогового окна в полях "Вверх", "Низ", "Влево", "Вправо" можно установить отступы текста страницы от изображения. Установим в этих полях значение 10. Графика введённых отступов отображается в нижней части окна. В итоге получаем оформленное окно "Изображение" — рис.14

    Рис.14

    В этом окне нажимаем кнопку "Вставить", затем кнопку «Сохранить» в нижней части окна редактора uCoz и получаем результат в виде фото 3 в "Примере вставок изображений"

    b) Универсальный код для загрузки изображений

    Перед вами HTML-код картинки, изображённой на фото 3 в ‘Примере вставок изображений на страницу сайта’

    Код 1

    В этом коде:

    • http://elislav.my1.ru/Bunin/ris.13.jpg — URL-адрес картинки, загруженной через файловый менеджер ;
  • alt="Porsche 911 Carrera" -атрибут alt устанавливает альтернативный текст для изображений;
  • align="right" — выравнивание картинки вправо от текста;
  • width="150" height="90" — горизонтальный и вертикальный размеры картинки;
  • — отступы текста (вверх-вправо-вниз-влево) от изображения в пикселях.
  • Таким образом, для того, чтобы вставить картинку (в том числе и уменьшенного размера) в нужное место текста, достаточно иметь лишь её URL-адрес; остальные же параметры кода (размер картинки, отступы и пр.) задаются по усмотрению автора.

    Более того, немного видоизменив HTML-код, можно создавать превью изображения с обтеканием его текстом, что бывает необходимо при наполнении сайтов контентом (при размещении на сайте статей и т.п.). Код достаточно прост и интуитивно понятен даже пользователям, лишь постигающим азы HTML:

    Код 2

    <a href="http://elislav.my1.ru/Bunin/ris.14.jpg"> <img src="http://elislav.my1.ru/Bunin/ris.14.jpg" alt="Porsche 911 Carrera" align="left" width="150" height="90"> </a>

    Вторая часть этого кода — копия Кода 1 (изменены лишь URL-адрес — другая картинка — и значение тега align с "right" на "left"), а атрибут href в первой части кода задает адрес оригинала изображения.

    Плюсы кода не только в удобстве вставки превью картинки в текст, но и в простоте создания превью, минуя хостингы изображений типа radikal.ru, не отличающихся надёжность показов.

    Пример вставки превью изображения с обтеканием его текстом показан на фото 4 в "Примере вставок изображений"

    4]Создаём превью изображения с помощью сайта Радикал-фото

    — Входим на сайт Радикал-фото и на открывшейся панели выставляем нужные опции — Рис.15

    — Нажав кнопку "Выберите файл" (Рис.15), в диалоговом окне ПК выбираем нужный файл картинки, которую хотим переписать со своего компьютера на сайт — Photo3, и нажимаем там кнопку "Открыть" — Рис.16

    — На панели Радикал-фото нажимаем кнопку "Загрузить" — Рис.17

    — После загрузки изображения на панели из списка ссылок выбираем нужный нам вариант загрузки данного изображения на сайт: положим, нам нужно добавить на сайт превью (увеличение изображения по клику) в HTML-коде. Тогда нам подойдёт вариант 7 — "HTML: превью — увеличение по клику" — Рис.18

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

    — Обратимся к окну "Коды" и нажмём в нём кнопку "Переход с превью" и выбираем вариант "На графический файл" — Рис.19

    — В открывшемся окне выбираем тот же вариант 7 — "HTML: превью — увеличение по клику". выделяем получившуюся ссылку и в контекстном меню выбираем "Копировать" — Рис.20

    — После этого вставляем скопированную ссылку в выбранное место страницы сайта, и получаем превью – уменьшенную копию изображения, при клике по которой открывается полноразмерная версия изображения — фото 5 в "Примере вставок изображений"

    Пример вставок изображений на страницу сайта.

    Тест-драйв: BMW M3 CSL, Porsche 911 Carrera.

    BMW M3 CSL // BMW M3, Porsche 911 Carrera. "Автопанорама”

    Фото 1

    Фото 2

    BMW М3 в версии CSL не только легче, но и мощнее, и он просто обречен на успех.

    Чувствую себя, как баранья отбивная, которую хорошо прожарили с двух сторон до золотистой корочки. Только в роли гриля выступает крыша BMW М3 CSL: она сделана из углепластика и не окрашена. Конструкторы использовали этот материал, чтобы выиграть в весе. По той же причине они отказались от теплошумоизоляции потолка. Когда температура окружающего воздуха достигает 35°С, крыша BMW М3 CSL нагревается, как сковорода. Инженеры М-отделения концерна BMW добились от двигателя нового CSL впечатляющих 360 л.с. но в тесном моторном отсеке ему очень жарко. Перегородка между моторным отсеком и салоном не является преградой для выделяемого тепла, и мои ноги поджариваются во время движения. А еще один "способ борьбы” с лишним весом — отсутствие кондиционера!

    Категория: Веб-программирование

    Похожие статьи:

    Как сделать картинку ссылкой

    Как вставить картинку на сайт. Редактирование

    Как вставить картинку на сайт, в статью и сделать это правильно

    Как сделать красивую картинку

    Как в ворде вставить картинку

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *