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

"Свой сайт - это просто! Создание, продвижение, SEO"

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 13.125 RSS
←   Май 2005   →
 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
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.00am.ru
Открыта: 14-09-2003
Адрес автора: inet.webbuild.prostosait-owner@subscribe.ru

Автор
SuZZuS

Статистика

13.125 подписчиков
-1 за неделю
←   Все выпуски   →

Свой сайт - это просто! Пособие для чайников. Выпуск 49. Часть 1


Информационный Канал Subscribe.Ru

Свой сайт - это просто!
Пособие для чайников.

Выпуск 49
Часть 1

Предыдущие 48 выпусков вы можете посмотреть в архиве рассылки по адресу http://prostosite.ru/states.shtml. 

А тем временем этот выпуск вместе с вами читают 16 181 человек... :)

Сегодня для вас:

- Вступление
- Границы и рамки (CSS)
- Рекомендую
- Вопросы для продвинутых
- Памятка для желающих написать мне письмо

Вступление

Здравствуйте, уважаемые читатели!

К сожалению, в прошлом, 48-ом выпуске, который был посвящен вставке звука на страницу, аудио проигрыватель почему-то не отобразился. Посмотреть, как он будет выглядеть, можно на странице http://prostosite.ru/048.shtml.

Что-то в последнее время с письмами по теме стало не густо. Пора бы уже активизироваться, уважаемые читатели!

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

Академия народного хозяйства при Правительстве РФ совместно с компанией NetPromoter проводят практическую конференцию "Кибермаркетинг. Стратегия и тактика продвижения ресурса". Конференция состоится 19-20 мая 2005 в Центре Международной Торговли (Москва). Вниманию слушателей будут предложены доклады и мастер-классы, раскрывающие практические аспекты поискового продвижения. Подробнее >>>

Границы и рамки (CSS)

В 39-ом и 40-ом выпусках мы уже говорили с вами о CSS (Cascading Style Sheets - каскадные таблицы стилей). Сегодня я продолжу тему и расскажу о том, как с помощью CSS можно создавать границы для различных элементов страницы.

Внимание, выпуск содержит картинки. Чтобы их увидеть, нужно находиться в режиме on-line, то есть нужно иметь соединение с Интернетом. Если картинки все равно не отображаются, нажмите на ссылку под нужным изображением, оно откроется в новом окне.

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

Перед тем, как начать, повторю немного теории о CSS. Таблицы стилей записываются между тегами <head> и </head>. Выглядит это так:

<head>

<style>
таблицы стилей
</style>

</head>

Сами таблицы выглядят так:

элемент { атрибут: значение; }

Как вы помните, элемент может быть практически любым: p (абзац), H1 (заголовок H1 - первого уровня), i (выделение курсивом) и т.д. 

Атрибут - это свойство элемента. Каждый атрибут должен иметь какое-то значение. Атрибутов может быть несколько. 

Пример. Все абзацы должны быть выделены жирным и иметь шрифт Times New Roman.

p { font-weight: bold; font-family: Times New Roman; }

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

Атрибут Значение
border-color – цвет границ
border-top-color – цвет верхней границы
border-right-color – цвет правой границы
border-bottom-color – цвет нижней границы
border-left-color – цвет левой границы
  • Цвет можно задать по имени. border-color: black
  • Или в RGB-палитре. border-color: #000000
border-width – ширина границ
border-top-width – ширина верхней границы
border-right-width – ширина правой границы
border-bottom-width – ширина нижней границы
border-left-width – ширина левой границы
  • Тонкая. border-width: thin
  • Средняя. border-width: medium
  • Толстая. border-width: thick
  • Пиксели. border-width: 2px
border-style – стиль рисования границ (см. рис. далее)
border-top-style – стиль рисования верхней границы
border-right-style – стиль рисования правой границы
border-bottom-style – стиль рисования нижней границы
border-left-style – стиль рисования левой границы

 
  • Сплошной. border-style: solid 
  • Точки. border-style: dotted
  • Пунктир. border-style: dashed
  • Двойная линия. border-style: double
  • Желобок. border-style: groove
  • Выступ. border-style: ridge
  • Внутренняя тень. border-style: inset
  • Внешняя тень. border-style: outset
border – позволяет сразу установить ширину, цвет и стиль границ.
border-top – позволяет сразу установить ширину, цвет и стиль верхней границы
border-right – позволяет сразу установить ширину, цвет и стиль правой границы
border-bottom – позволяет сразу установить ширину, цвет и стиль нижней границы
border-left – позволяет сразу установить ширину, цвет и стиль левой границы		 Пример: 

border: #000000 2px dashed 


http://prostosite.ru/tost/094.gif 

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

<html>
<head>
<title>Трехлапая жаба</title>
</head>

<body bgcolor="#FFFFCC">

<h1 align="center">Трехлапая жаба</h1>

<img src="http://prostosite.ru/tost/094.gif" align="left">

<p>Волшебная трехлапая жаба является символом богатства, бессмертия и волшебства. Считается очень благоприятным держать в доме жабу. Она может творить чудеса. Жаба – хранительница богатства, которая способна многократно его приумножить.<br>

<br>Чаще всего трехлапая жаба изображается сидящей на
подставке из монет. Монетка во рту олицетворяет золото.</p>
...
</body></html>
http://prostosite.ru/tost/094.jpg

Вот такое небольшое описание одного из талисманов фэн-шуй, трехлапой жабы. Как видите, страница разделена на три блока - заголовок (h1), изображение (img) и текст (p). Теперь нужно прописать атрибуты и значения для этих элементов.

<html>
<head>
<title>Трехлапая жаба</title>

<style type="text/css">

h1 { border-style: dotted; border-color: #FFFF66; border-width: 3px; }
img {border-style: ridge; border-color: #663300; border-width: 15px;}
p {border-style: dashed; border-color: #FFFF66; border-width: 3px; width: 441px; text-align: center;}

</style>

</head>

<body bgcolor="#FFFFCC">
<h1 align="center">Трехлапая жаба</h1>
<img src="http://prostosite.ru/tost/094.gif" align="left">
<p>Волшебная трехлапая жаба является символом богатства, бессмертия и волшебства. Считается очень благоприятным держать в доме жабу. Она может творить чудеса. Жаба – хранительница богатства,
которая способна многократно его приумножить.<br><br>Чаще всего трехлапая жаба изображается сидящей на подставке из монет. Монетка во рту олицетворяет золото.</p>
...
</body></html>

Конечный результат после вставки таблиц стилей:


http://prostosite.ru/tost/095.jpg

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

Выскажитесь по теме выпуска >>>

P.S. Письма читателей и раздел "Новые ссылки" перенесены во вторую часть выпуска.

Рекомендую

САМОИСЦЕЛИТЬСЯ от любого недомогания Души и Тела, ЭТО возможно?  
В  Школе своего Здоровья
И невозможное ВОЗМОЖНО!!!

Форум Школы своего Здоровья

Школа своего Здоровья

""Каталог Наших Рассылок" - Лучшие Рассылки Единомышленников"

Вопросы для продвинутых

Вопрос прошлого выпуска (71)

Я сам на продвинутый, а задаю сюда вопрос из-за несходной с рассылкой темой вопроса. Меня интересует поддержка Front Page на бесплатных хостингах, а именно публикация самого сайта и работа с отправкой информации с форм. Зарание спасибо

Отвечает: Сергей Пронин

Работал с Front Page 2003, на страничке были многие примочки программы (напр.веб-компонент), опробывал на Народе все прошло и работает. Размещал также посредством данной программы (опубликовать узел).

Вопрос прошлого выпуска (75)

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

Отвечает: Сергей Слесарев http://www.mosigma.ru/

Один из способов увеличить посещаемость своего сайта, посвященного
городу - присоединиться к союзу интернет-городов мира:
http://mir-ru.com 

Новый вопрос (76)

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

Ответов нет

Ответить!

Вопрос прошлого выпуска (77)

У меня к вам вот такой вопросик по поводу гостевой книге:

Я сейчас работаю над своим сайтом и осталось сделать только гостевую книгу!
Хочется, чтобы она била у меня на сервере и подходила под мои дизайн, в связи с этим у меня появилась задачка - как встроить гостевую книгу в свою страничку, чтобы все менюшки остались как и прежде ?!?
Помогите пожалуйста решить эту проблему, так как я не специалист в этом , но очень хочется данную операцию прокрутить удачно и без всякого рода ошибок!
Заранее - оцени признателен Вам за помощь и за уделённое мне время!!!

Отвечает: Дядя Вася

Возможно, не до конца правильно понял вопрос, но всё же попробую ответить.

1. Если хотите, чтобы гостевая книга физически размещалась НА ВАШЕМ 
сервере, то просто напишите соответствующие скрипты (задача для новичка 
нетривиальная). В этом случае никаких проблем (типа сохранения стиля, 
элементов навигации и/или оформления) возникать не должно.

2. Если же Вы хотите завести гостевую книгу НА НЕЗАВИСИМОМ сервере (что, 
по-моему, является в абсолютном большинстве случаев правильным решением), 
тогда, действительно, возникает проблема согласования дизайна. Даже если 
закрыть глаза на различия в цветовой гамме и пространственных отношениях, 
остаётся такая важная вещь, как навигация. К счастью, проблема легко 
решаема: большинство сервисов Гостевых книг позволяют реализовывать так 
называемый "произвольный" дизайн. Суть проста: создаётся обычная 
HTML-страница, которая обладает всеми необходимыми свойствами: 
оформлением, навигацией... Эта страница потом модифицируется и 
используется в качестве шаблона при отображении гостевой книги. 
Непременное условие -- нужно знать HTML (хотя бы поверхностно), потому что 
придётся править код (немного, но придётся).

Проще всего провести аналогии с SSI-командой #INCLUDE: тем, кто с ней 
знаком, не составит труда разобраться и с технологиями большинства 
гостевых книг. Если коротко: в код страницы-шаблона вставляются 
специальные ключевые слова. Получается шаблон. Когда сервер гостевой книги 
формирует на основе этого шаблона итоговую страницу, вместо ключевых слов 
подставляются соответствующие элементы гостевой книги (сообщения, ответы 
автора, ники, даты и т. п.). Обычно Гостевая книга должна иметь не менее 
двух шаблонов: один для страницы-списка сообщений, и ещё один -- для 
собственно сообщения.

Подробнее и конкретнее о том, как создать такую Гостевую книгу на NAROD.RU 
можно почитать здесь.
http://narod.yandex.ru/help/00_gb.yhtml

Новый вопрос (78)

Кто-нибудь знает как применить два фильтра к какому-нибудь объекту? Вот есть строка стиля:

<STYLE TYPE="text/css">
<!--BODY{OVERFLOW:scroll;
OVERFLOW-X:hidden}.DEK{xPOSITION:absolute;
VISIBILITY:hidden;xZ-INDEX:200; filter:progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);}
//--></STYLE>
Это описание tooltip, выскакивающая подсказка к линку. На новом слое, насколько я понимаю. tooltip c тенью, работает чётко !

Можно ли добавить еще один фильтр, например filter:RevealTrans ?
Хочу добавить эффект появления.

Я не силен в синтаксисе, пробовал разные варианты добавить, но перестают работать оба.Просьба к ГУРУ, добавьте в строчку, да объясните что к чему, и почему. Зараннее БООЛЬШОЕ спасибо !!!!

Ответить!

Новый вопрос (79)

Создан первый сайт (в блокноте).
Первое размещение на newmail (бесплатный хост) прошло без сучка и задоринки. Но из-за недоступности сайта в во время пик попробовала сменить хост. И тут - полная неудача: сайт открывается в виде пустого листа с моим (перекрашенным) скролл-баром и вставленной рекламой хоста. И так на двух хостах - narod и hut. Нигде ничего о такой ситуации найти не могу.
Если поможете советом - спасибо.

Ответить!

Прислать вопрос!

Памятка для желающих написать мне письмо

Итак, вы решили написать мне письмо. Но перед тем, как сделать это, спросите себя "Зачем?"

И пока не найдете ответ, писать запрещается! :)

Я довольно редко отвечаю лично автору письма по e-mail, но я могу ответить на письмо в рассылке. Для этого письмо должно быть ПО ТЕМЕ! Причем, желательно по теме выпуска. 

Про остальное:

  • Я оставляю за собой право опубликовать любую часть вашего письма, если запрета на публикацию нет. Если запрет есть - то и публикации, как вы понимаете, не будет.
  • Если вы боитесь "пауков", которые собирают адреса и рассылают спам, символ "@" в вашем e-mail можно заменить на "*", "#" или просто "(собака)"
  • Критика принимается и одобряется, но только КОНСТРУКТИВНАЯ критика! "Мне не нравится" - это не довод.
  • Письма с вложениями без текста в теле самого письма удаляются без просмотра.
  • Я отвечаю на вопросы только по теме рассылки. Если у вас вопрос не по рассылке, его можно задать в раздел "вопросы для продвинутых". Для этого тема письма обязательно должна быть vopros! Если хотите ответить: otvet - (номер вопроса). В противном случае письма с неправильной темой письма не попадут в рассылку!
  • Вы можете предложить тему выпуска, которую вы бы хотели видеть в следующем выпуске рассылки
  • Если просто хочется написать - пожалуйста, пишите! Я читаю все приходящие письма, но в бессмысленные диалоги не вступаю.
  • Я знаю, что рассылку читают не только начинающие, но и довольно-таки опытные "сайтостроители". Я жду ваших писем с рассказом о вашем опыте :)

А на сегодня все. 
Спасибо всем, приславшим свои материалы в рассылку!
Жду вас на сайте рассылки. Удачи!
Автор и ведущая рассылки Ольга Морозова.

http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: inet.webbuild.prostosait		 Отписаться
В избранное