Тема выпуска: Накладываем одно изображение на другое и позиционируем их.

Здравствуйте, Уважаемые Подписчики!

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

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

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

Иногда в письмах проскальзывают упреки в том, что излишне подробен в своих разъяснениях. Утомляет. Я просто помню себя, когда начинал создавать собственный сайт и спрашивал совета у бывалых. Многое из того, что они говорили было, в то время, непонятным потому, что некоторые элементарные понятия, как специалисты иногда считают, знать обязаны все, но для человека только начинающего свой путь - это может быть трудно преодолимым препятствием, а переспросить, попросить разъяснить более подробно не решаются, чтобы не прослыть полным дауном в глазах профи. На себе испытал. Знаю.

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

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

Поделитесь своими знаниями с новичками.

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

А теперь переходим к информационной части нашей рассылки.

Сегодня мы продолжим разговор о CSS. Занятная штука, должен Вам сказать, и красивая! С использование CSS получаются такие красивые сайты!

Кстати, вся технология конструктора сайтов e-Gloryon построена именно на CSS. Можете сами проверить - Получить демо-версию Конструктора сайтов  и посмотреть - эти сайты построены на конструкторе сайтов e-Gloryon:

Недвижимость в Анапе
http://realty-as.ru

Официальный сайт мебельной компании "Ажур"
http://professional.semiramida.e-gloryon.com

Владикавказский консервный завод
http://oao-vkz.ru

Пивоваренная компания "Наше Пиво"
http://nashepivo.is-best.biz

Строительная компания "Водолей"
http://sk-vodoley.ru

Строительные технологии будущего
http://piramida.is-best.biz

Раз уж мы начали с рассмотрения оформления хедера и заголовка сайта, то и продолжим эту тему.

Вы видели в сети сайты, в хедерах которых рисунки как бы накладывались друг на друга и выступали за пределы хедера, как бы вторгаясь в тело сайта? Когда рисунок всегда оставался в одном месте экрана монитора сколько бы Вы не упражнялись с полосой прокрутки?

Так вот, все это достигается с помощью CSS.

Итак, пример наложения одного изображения на другое.

Для того, чтобы мы смогли это сделать нам необходимо создать HTML документ.

Предлагаю следующий вариант:

1. Создаем папочку в удобном Вам месте, обзываем ее как-нибудь, как не столь важно лишь бы Вы ее не потеряли.

2. Открываем IE, естественно на чистой страничке, и сохраняем html документ в только, что созданную папочку и обзовем его index.html.

3. Открываем Простой и Незаменимый Блокнот и сохраняем текстовый файл в вышеупомянутую папочку рядом с только, что созданным html документом и обзовем мы его (текстовый файл) style.css.

Вот на этом подготовительная часть нашего действа закончена и мы с Вами переходим непосредственно к самому действу.

Открываем наш файл index.html, далее Вид - Просмотр html-кода и перед тегом </head> помещаем вот это:

<link href="style.css" type="text/css" rel="stylesheet">

Сохраняем.

Что это за код?

Этим кодом мы показываем браузеру куда ему обращаться для того, чтобы узнать как отображать нашу страничку.

Теперь открываем текстовый файл style.css (окна с index.html и Блокнот с html кодом не закрываем, они нам понадобятся) и начинаем создавать правила, по которым браузер будет отображать нашу страничку.

Пишем следующее (можем и просто скопировать из рассылки):

DIV.b1 {position:absolute;
left:110px; top: 120px; width: auto; height: auto;
font-family: arial; font-size: 20 pt; font-weight: bold; color: orange; z-index:3}

DIV.b2 {position: absolute;
left: 460px; top: 80px; width:500; height: 250;
background-color: #4EA05B;
font-size: 20pt; color: #F0F0F0;
font-weight: bold;
text-align: center; line-height: 20pt;
z-index: 1}

#layer2 {position: absolute;
left:50px; top: 50px; width: 475; height: 150;
background-color: #F0F0F0;
z-index: 2}

P.col1 {position: absolute;
left: 150px; top: 207px; width: auto; height: auto;}

P.col2 {position: absolute;
left: 45px; top: 150 px; width: auto; height: auto}

Сохраняем. Идем в Блокнот с html кодом и между тегами <body> и </body> вставляем вот этот код:

<DIV class="b1">
Создать сайт в Интернете своими руками - это просто?
</DIV>
<DIV class="b2">
<P class="col2">
С конструктором сайтов e-Gloryon</P>
<P class="col1">
Это очень просто!
</P>
</DIV> <DIV id="layer2">
</DIV>

Сохраняем. Идем в index.html, жмем кнопку "обновить".

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

Если Вы посмотрите внимательно код, в файле style.css, то увидите, что селектор DIV.b1 отвечает за серый прямоугольник и все, что с ним связано, а селектор DIV.b2 за зеленый. Смотрим в фигурные скобки любого из этих селекторов и находим там параметры left и top и меняя их значения эсперементируем с позиционированием нашего рисунка в окне браузера.

Background-color - это свойство цвета фона прямоугольника. Существует также свойство определяющее фоновое изображение - background-image. Чтобы задать фоновое изображение необходимо выполнить следующую запись - background-image: url(images/имя вашего рисунка.gif); , естественно Вам необходимо будет создать в папке, где находятся файлы index.html и style,css, еще одну папочку, обозвать ее images и поместить туда свои рисунки. В селекторах DIV.b2 и #layer2 параметры width и height необходимо будет подогнать под размеры рисунков или рисунки под указанные параметры. Поэкспериментируйте самостоятельно.

А теперь попробуйте то же самое создать с помощью html.

Когда Вы это сделаете и утрете пот со лба, сравните два полученных кода между тегами <body>. Я думаю Вы заметили, что кода в документе, созданном на html намного больше чем в документе, созданном на CSS. А информации в обоих документах одинаково - Создать сайт в Интернете своими руками - это просто?; С конструктором сайтов e-Gloryon Это очень просто!.

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

Ну вот, наверное, на сегодня и все, что я имел Вам сообщить.

До встречи на страницах нашей рассылки.

P.S. Забыл, совсем забыл. Для тех кто занимается бизнесом в Интернете и не только, но с помощью Интернета, а также для тех кто собирается вышеперечисленным заняться и еще не определился с выбором торговой площадки в Интернете, Интерсетевой Холдинг Gloryon предлагает возможность продвижения бизнеса. Более подробную информацию смотрите на сайте Конструктор сайтов e-Gloryon в разделе "Наши новости".

Удачи Вам в жизни и на просторах Интернета!

С уважением, Ивашутенко Юрий.
Консультант по вопросам создания собственного сайта  в Интернет.

Конструктор сайтов e-Gloryon

Связь с автором из рассылки

e-mail: ivashutenko@bizforpeople.ru
телефон: 89138711725

Архив рассылки на сайте