Отправляет email-рассылки с помощью сервиса Sendsay

Создать сайт в интернете своими руками - это просто?

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Раскрутка и продвижение сайта. Лучшие партнерские программы" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Александр

Статистика

578 подписчиков
+2 за неделю
←   Все выпуски   →

Создать сайт в интернете своими руками - это просто? А почему у Вас на сайте должна быть стандартная полоса прокр


Выпуск  # 9

  

27 сентября  2006
 

Тема выпуска: А почему у Вас на сайте должна быть стандартная полоса прокрутки? Делаем свою.

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

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

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

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

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 и для того, чтобы его отличать от других подобных селекторов ему через точку ставят какое-нибудь название, в данном случае b1 и отвечает он за текст "Создать сайт в Интернете своими руками - это просто?". Теперь достаточно в теле страницы в теге DIV вставить class="b1" и текст, находящийся внутри блока DIV примет значения указанные в селекторе DIV.b1.

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

left:110px; top: 120px; - это позиционирование нашего текста на экране браузера, где left:110px - расстояние от левой границы и top: 120px; - расстояние от верхней границы. Обязательно тестируйте в разных браузерах, в некоторых из них при одних и тех же значениях позиционирование может отличаться, например от IE.

Далее у нас идут значения придаваемые рамке текста, в которую он помещается. У нас стоит значение auto и, я думаю, его лучше и оставлять.

font-family: arial; font-size: 20 pt; font-weight: bold; color: orange; - это все, что отвечает за то, каким будет наш текст. Тут, мне кажется, пояснений не надо.

z-index:3 - это свойство отвечает за порядок слоев. В нашем случае слоев получается 3 и некоторые из них перекрываются поэтому следует применять это свойство. Если стоит z-index:1 - это значит первый слой и т.д.. Слой с меньшим порядковым номером в месте перекрытия следующим слоем виден не будет.

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}

Этот селектор отвечает у нас за зеленый прямоугольник.

left: 460px; top: 80px; width:500; height: 250; - этими значениями мы позиционируем наш прямоугольник и задаем его размеры.

background-color: #4EA05B; - это свойство отвечает за цвет нашего прямоугольника, если мы вместо background-color: #4EA05B укажем background-image: url (наш_рисунок/gif);, то фоном прямоугольника будет указанное изображение, естественно Вам надо будет подогнать размеры прямоугольника под размеры изображения или наоборот.

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}

А это и есть индентификатор. Обозначается он решеткой # и так же как и селектору дается какое-нибудь название, в данном случае layer2. Здесь название как бы говорит само за себя, что это есть второй слой. Вторым слоем у нас идет серый прямоугольник и все свойства, указанные в этом индентификаторе, нам уже знакомы. Здесь background-color: также можно заменить на background-image:.

Чем отличается индентификатор от селектора?

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

Индентификатор применяется для одного определенного объекта. Индентификаторов может быть на страничке несколько, но все они только для своего объекта и к какому-то другому не применяются. Для применения индентификатора необходимо указать в теге id="имя".

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}

Это селекторы определяющие свойства тега <P>.

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

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

И сегодня мы с Вами будем оформлять полосы прокрутки браузера на свой вкус и цвет.

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

scrollbar-3d-light-color - цвет контуров трехмерности;
scrollbar-arrow-color - цвет стрелочек;
scrollbar-base-color - базовый цвет (общий фон);
scrollbar-dark-shadow-color - цвет внешней тени;
scrollbar-fase-color - цвет ползунков;
scrollbar-highlight-color - цвет контуров подсветки;
scrollbar-shadow-color - цвет внутренней тени;
scrollbar-track-color - цвет полос.

Задаются эти параметры в дескрипторе <BODY>, в качестве значений присвойте им шестнадцатеричные значения или названия на английском языке.

Создаем новую вебстраницу или можете просто в любую свою страничку в тег <BODY> вставить вот этот код:

<BODY style=""scrollbar-3d-light:" blue;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #EDB726;
scrollbar-dark-color: white;
scrollbar-fase-color: lightgreen;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #17E572
scrollbar-track-color: green;">

И смотрим, что у нас получилось.

Вообще-то, чтобы изменить цвет полосы прокрутки достаточно поменять значение scrollbar-base-color:, но это не означает, что остальные параметры не при делах. Пробуйте, меняйте значения всех параметров и, я уверен, Вы добьетесь интересных эффектов с полосами прокрутки и тем самым разнообразите оформление своего сайта.

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

Кстати, выбирайте хостинг для своего сайта тщательно. Мой хостер меня устраивал до поры до времени, пока от него не потребовалось обеспечивать работу более сложного программного обеспечения, чем простенькие скрипты. Обеспечить же работу, например, авторассыльщика он не смог, пришлось расстаться.


На сегодня все.

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

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

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

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

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

Архив рассылки на сайте
Видео-урок
"Как создать сайт при помощи Конструктора сайтов e-Gloryon

Скачать
Демо-версия

Опробуйте наш продукт не "на бумаге", а в деле.

Получить

Создай свою прибыльную студию web-дизайна с минимальными навыками

Подробнее..

Статьи:

Как разместить сайт в интернете.

Допустим, вы уже создали свою страницу, сайт, но она пока что лежит у вас на компьютере, потому что вы не имеете представление о том, как разместить ее в интернете. Не отчаивайтесь, все не так сложно, как кажется на первый взгляд. Читать...

Методы и способы раскрутки сайта. Реклама сайта.

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

Что в имени тебе моем.

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

Инструменты вебмастера:

Как подобрать цвета оформления своего сайта, чтобы он выглядел красиво и не утомлял глаза посетителей? Существует программа, которая поможет вам решить эту проблему на профессиональном уровне - Color Wheel Pro. Программа платная, но предоставляется 30 дней на ее опробацию.

Пробуйте.

Не все же в этой рассылке должно быть серьезным.

Юмор

Везет мужик пингвинов в зоопарк из одного города в другой. Машина специальная с рефрежиратором и с бассейном. На подъезде к городу у него что-то критично отваливается и он тормозит прямо на КП. Бежит к ГИБДДшнику и просит: - Командир, спасай, пингвины редкие, дорогие если через 30 мин не довезти до зоопарка - на жаре загнутся нафиг! - Нет проблем, щас доставим. ГАИшник начинает тормозить всех подряд, по схеме "Аптечка, огнетушитель, знак аварийной остановки, ремни, глубина протектора, штраф на месте или подвези 2-х пингвинов до зоопарка" Так всех распихали, последних 2-х закидывают в 600-тый с двумя братками. - В зоопарк отвезите птичек. - Ща, через 5 мин будем там! Прошло полтора часа мимо КП летит тот самый 600-тый, в окнах видны братки и две счастливые пингвиньи морды. ГАИ тормозит их и кричит: - Ты че их возишь, их же в зоопарк надо! - Спокойно командир, как ты сказал, так мы и сделали, в зоопарке были, в кино были, щас едем в МакДональдс кушать.

 
В избранное