Недостаточно просто Прочитать, недостаточно просто Понять прочитанное, нужно еще и Применить!

Выпуск 39 (Часть 1)

"Совершенству нет предела!"

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

  Осень плавно сменила лето, а логотип на сайте сменил цветочки на осенние листья.

  И вообще, с приходом осени сайт стал каким-то более серьезным, что ли..., что не скажешь обо мне. :)

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

  О содержании книги я напишу позже, пока эта информация находится под грифом "Секретно" :)

  На сайте рассылки www.ProstoSite.ru обновлен раздел Статьи. 

  Появились три новые статьи: "Создаем баннер", "Создаем баннер. Продолжение" и "Хорошо забытое старое".

   Сегодня мы будем заниматься совершенствованием нашего сайта, которым можно заниматься до бесконечности :)

  А именно мы будем облегчать "вес" страниц нашего сайта.

  Вы знаете, что "норма" - это 30 кб? Страницы вашего сайта подходят под норму?

  Если нет, то это совсем не проблема, потому что после прочтения и практического применения того, что я напишу ниже, "вес" ваших страниц уменьшится в разы.

  Как вы знаете, Интернет - страница целиком и полностью состоит из HTML-кода, следовательно, ее вес зависит именно от него, родимого, от размера HTML-кода.

  И чтобы оптимизировать страничку, нам нужно будет прежде всего оптимизировать ее HTML-код.

  Итак, открываем страницу, которую я по умолчанию назову index, во FrontPage (если у вас нет FrontPage, открывайте в чем хотите, главное, чтобы был виден HTML-код).

  И переключаемся из закладки Нормальный (Normal) в закладку HTML.

  Вообще-то, пора бы уж и выучить основные теги, чтобы понимать, что там такое в этом HTML, творится.

  На сайте рассылки в разделе Книги есть несколько неплохих учебников по HTML, а так же полный список всех HTML тегов.

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

  Пример. До:

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

  и после:

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

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

  Когда я сокращала свой HTML-код, у меня возникла следующая проблема: было до неприличия много тегов <font>!

  Ведь при выборе шрифта, форматирования текста, или его размера, FrontPage сразу же записывает это в HTML-код. Понятное дело, это же программа! Но дело в том, что FrontPage написал почему-то очень много этих тегов! Выглядело это примерно так:

<p align="left"><font face="Batang" size=3 color=#00000>Текст, текст, текст...</font> <font face="Batang" size=3 color=#00000>.</font>

<p align="left"><font face="Batang" size=3 color=#00000>Текст, текст, текст...</font> <font face="Batang" size=3 color=#00000>.</font>

  Нет, ну что за безобразие! 

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

  Во-вторых, форматирование по левому краю тоже по умолчанию! В общем, сократить это все можно так:

<font face="Batang">
<p>Текст, текст, текст... .

<p>Текст, текст, текст... .
</font>

  Результат, что говорится, налицо :)

  Но тут мне вдруг "приспичило" и я решила, что у меня на сайте будет шрифт не Batang, а... Palatino Linotype и вообще коричневый :)

  Нет, это, конечно же, хорошо, вот только придется все 70 (а ведь бывает и много больше!) страниц менять, а так ничего!

  Когда там верхушку сайта изменить нужно, то это все во FrontPage просто, Copy-Paste-Cut, Copy-Paste-Cut, Copy-Paste-Cut... и так 70 раз. Ну подумаешь, нам не привыкать!

  А вот если хочешь шрифт во FrontPage изменить, то он, пожалуйста, в каждый параграф изменения впишет!..

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

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

  В Интернете стала искать, смотреть старые рассылки - может чего пропустила?

  И наткнулась я на такую штучку - CSS, которая на русский переводится как "каскадные таблицы стилей".

  Не буду рассказывать, как я с этим всем разбиралась, потому как это было довольно сложно и совсем неинтересно...

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

  Например, у меня на сайте заголовки H1 обязательно должны быть цвета #AA9553 (этот цвет вы можете видеть в самой верхней части рассылки) и шрифта Georgia (там же).

  А заголовки H2, должны иметь цвет оттенка #B6A36A (переведите взгляд левее - вертикальная табличка имеет именно этот цвет), Шрифта Book Antiqua.

  Ну а обычный текст - черный, шрифта Palatino Linotype.

  Посмотрите, что получается:

<H1><font color="#AA9553" face="Georgia">Заголовок H1</H1></font>

<H2><font color="#B6A36A" face="Book Antiqua">Заголовок H2</H2></font>

<p><font color="#00000" face="Palatino Linotype">Обычный текст...

<p>Текст, текст...</font>

<H2><font color="#B6A36A" face="Book Antiqua">Заголовок H2</H2></font>

<p><font color="#00000" face="Palatino Linotype">Обычный текст...

<p>Текст, текст...</font>

  Вот что получается. Тоска получается...

  Для того, чтобы всех этих <font> не было, и придумали CSS.

 Каскадные таблицы стилей размещаются в HTML-коде между тегами <head></head>. Выглядит это примерно так:

<head>

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

</head>

  Но этот вариант подходит если вы хотите объединить общим стилем лишь одну или несколько страничек. 

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

  Зато существует другой. Выглядит он так:

<head>

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

</head>

  Здесь все таблицы хранятся в отдельном файле, который называется style.css и находится в одной папке со страничкой, к которой вы хотите применить данный стиль.

  Вообще-то, style.css - это текстовой файл, сохраненный с окончанием .css, так что создать его ничего не стоит.

  Открываем Блокнот и начинаем творить.

  Перво-наперво, пропишем свойства для обычного текста. Прямо там, в блокноте, начинаете со строк:

body { font-family: 'Palatino Linotype'; font-size: 12pt; color: #00000; }

  Таблица начинается с элемента, которому задают свойства (body). 

  Сами свойства находятся в скобках { и } (эти скобки можно найти на клавиатуре на русских клавишах "х" и "ъ" при переключении на англ. + клавиша Shift)

  Вообще-то, свойств элемента body существует довольно много (но об этом мы поговорим потом), данные свойства исключительно для шрифта (font-family), размера текста (font-size) и его цвета (color).

  После свойства идет двоеточие и заданное значение, после которого ставится точка с запятой (: #00000;).

  Теперь нужно задать свойства для заголовков H1 и H2.

h1 { font-family: 'Georgia'; font-size: 20pt; color: #AA9553; font-weight: bold; } 

h2 { font-family: 'Book Antiqua'; font-size: 16pt; color: #B6A36A; font-weight: bold; font-style: italic; }

  Заголовок H1 будет дополнительно выделяться жирным, а H2 - жирным курсивом.

  Если вы хотите задать каким-то двум элементам одинаковое значение, например, все заголовки H1, H2, H3 должны быть цвета #AA9553, то вместо того, чтобы прописывать отдельное свойство для каждого элемента,

h1 { color: #AA9553; } 

h2 { color: #AA9553; }

h3 { color: #AA9553; } 

  можно применить группирование, написав группируемые элементы через запятую:

h1, h2, h3 { color: #AA9553; } 

  Теперь все таблицы нужно сохранить с окончанием .css (напр. style.css).

  И вставить на нужную страничку межу тегами <head></head> строчку

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

  Подведем небольшой итог. Помните, что было вначале?

<head>
</head>

<body>

<H1><font color="#AA9553" face="Georgia">Заголовок H1</H1></font>

<H2><font color="#B6A36A" face="Book Antiqua">Заголовок H2</H2></font>

<p><font color="#00000" face="Palatino Linotype">Обычный текст...

<p>Текст, текст...</font>

<H2><font color="#B6A36A" face="Book Antiqua">Заголовок H2</H2></font>

<p><font color="#00000" face="Palatino Linotype">Обычный текст...

<p>Текст, текст...</font>

  А получилось...

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

<body>
<H1>Заголовок H1</H1>

<H2>Заголовок H2</H2>

<p>Обычный текст...
<p>Текст, текст...

<H2>Заголовок H2</H2>

<p>Обычный текст...
<p>Текст, текст...

  Ну как, разницу почувствовали? То-то и оно.

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

<H1>Заголовок H1</H1>
<H1 style=""color:red">"Заголовок H1</H1>

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

  В таблицах так же можно прописать, чтобы текст, выделенный, например, жирным (<b></b>) дополнительно имел зеленый цвет. 

b { color: green; } 

  Это, конечно же, частный случай, но технология, надеюсь, понятна.

  Посмотрим, что из всего этого вышло.

  Напомню, файл stye.css имеет следующее содержание:

body { font-family: 'Palatino Linotype'; font-size: 12pt; color: #00000; }

h1 { font-family: 'Georgia'; font-size: 20pt; color: #AA9553; font-weight: bold; } 

h2 { font-family: 'Book Antiqua'; font-size: 16pt; color: #B6A36A; font-weight: bold; font-style: italic; }

  Вставляем строчку 

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

  на все странички, к которым мы хотим использовать CSS (не забудьте предварительно убрать теги <font> у тех элементов, к которым вы хотите применить стиль)

  Вот одна из таких страничек, ее HTML-код смотрите выше:

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

  На сегодня с этим все, напомню лишь, что вы можете прописать свойства для любых элементов, к которым применимы теги <font> (<b>, <i>, <u>, <p> и т.д.)

  А в следующем выпуске мы продолжим заниматься оптимизацией нашего сайта и перейдем к новым вершинам CSS.

Ваши письма / Темы следующих выпусков

Во-превых, всё комментировать не буду, времени у меня сейчас нет.
Во-вторых, я писал, что мой сайт переезжает. Переехал. Заходите -
http://www.quarta-dimensio.webhost.ru/.

1) Письмо от некоего Валерия. Так вот, Валерий, если ты рассылку
получаешь с Subscrib[e].ru, отправь на subscrib(e)@subscrib(e).ru (скобки убрать) письмо со строчками в нём:

user твоя_почта твой_пароль
archive inet.webbuild.prostosait 1
archive inet.webbuild.prostosait 2
archive inet.webbuild.prostosait 3

понял? Цифры в конце строк - это номера выпусков. Насчёт других
рассыльщиков ничего не знаю, почти все рассылки я получаю с
subscrib[e]. Веб-аналог архива рассылки можно найти по адресу
http://www.prostosite.ru/svoisait.htm или
http://subscrib[e].ru/archive/
inet.webbuild.prostosait/

2) Некий Степанов Александр, похоже, считает, что если допускать
грамматические ошибки, то это будет выглядеть круто. Мне его даже
жалко немножко, так он отстал от жизни. Дальнейшего разбора его письмо не заслуживает.

3) Далее, письмо некоего под громоздким ником Никитоs_Кожемякоs.
Слушайте, Никитоs┘, вы вообще читали то, что вы в своём письме
понаписали? Во-первых, диски с учебниками приобретают только идиоты.
Учебники имеет смысл приобретать только тогда, когда они в бумажном
виде. Электронный учебник можно скачать из интернета. Во-вторых,
Netscape Composer, равно как и Microsoft Frontpage, равно как и
Macromedia Dreamweaver, используют те, кто совсем не знает HTML.
В-третьих, виртуальным сервером может быть что угодно, только не
программа. Вы Windows назовёте виртуальной? Нет. Так и с Apache. Это
- программа. И вообще, мог бы просто скачать Денвер-2
(http://web.dklab.ru/ ), там есть и
Apache, и MySQL, И PHP, и Perl, и всё что захочешь. В-четвёртых,
советы начинающим - это единственное место, где негде придраться.

В-пятых, не верится, что на nm.ru совсем нет рекламы. Надо же им на
что-то жить. Хотя, если учесть, что эта компания ещё является
интернет-провайдером, можно такое допустить. А на fatal.ru можно
сменить тип рекламы. Зайди в панель управления сайтом, зайди в раздел "баннеры", найди там код,
который надо вставить на все страницы, вставь его, закачай новую
версию на сайт и щёлкни по ссылке "Я вставил код баннеров на все
страницы┘", или что-то подобное. Там написано, что в течение двух
суток они уберут всплывающие окошки. Хотя я вставил, и теперь у меня и всплывающие окошки, и баннер :-( А MySQL они тебе должны сделать, если
убедишь их, что это необходимо. В-шестых, ничего поучительного и
занимательного я в твоём письме не нашёл.

4) Никакой я не помощник :-) Насчёт "высказывателя" считаю, что он
просто хотел повыпендриваться.

5) Письмо от некоей Светланы. Тэээк-с, вот и ещё один пункт в пользу
того, чтобы отказаться от этих программ. Я повторяю то, что уже писал: вы, может быть, и сделаете хороший сайт, но НЕ БУДЕТЕ ЗНАТЬ, КАК ОН СДЕЛАН!

6) Честное слово, можно подумать, что у DjGlance не в порядке центр
головного мозга, отвечающий за восприятие юмора.

7) Полностью согласен с Dserg насчёт Frontpage и Dreamweaver. Хотя я
пользуюсь для создания и правки сайт программой Homesite. Полноценную
(не trial!) версию можно скачать здесь:
http://www.download.winline.ru/
base/homesite_50.zip,
русификатор - http://www.download.winline.ru/
base/homesite_50_rus.zip.
Качайте, не пожалеете!

Станислав aka Qd
mailto:quarta-dimensio@mail.ru
http://www.quarta-dimensio.webhost.ru/

А вот письмо от Gray, который плохо владеет грамматикой (хотя в этом письме явно видны улучшения. Вот что значит практика!). Теперь осталось разобраться со знаками препинания и о пробелах не забывать.

(Ольга Морозова) Евгений - MAGELLAN, не подскажите адрес вашего учебного центра? Или на худой конец - рассылки?

Где я могу перенять ваш большой успешный собственный опыт обучения людей?

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

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

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

Что касается вашего правила, как узнать, что ты делаешь это хорошо, если ты это не делаешь?

P.S. Зачем нам программа с "косяками и глюками"?

С Уважением,
Андрей Войтенко.
http://pusik78.narod.ru/  
mailto:andrewvoitenko@nm.ru 

(Ольга Морозова) Андрей, спасибо за вашу бочку меда, разбавленную ложкой дегтя! Надеюсь, что в дальнейшем вы все-таки найдете для себя в рассылке то, чем вы сможете воспользоваться!

Привет, Ольга (думаю твой и мой возраст позволяют обращаться на ╚ты╩:)!

В процесс поиска случайно забрела на твой сайт, сначала я его не оценила (подумала, что зашла на ╚левый╩, т.е. не по теме, сайт). При повторном заходе приглянулся, а сейчас сужу и изучаю все статьи. 
Я нахожусь в творческом поиске:). Ищу работу, а для этого задумала написать свой сайт, но вот беда с темой:(. В начале думала о сайте резюме, но я же новичок, особо не чего писать, да и скучно. А теперь и вовсе запуталась!!!! Особых увлечений не наблюдается, разве что шитье √ слабое утешение. 
Будет время (надеюсь, что будет:) черкни пару строк по этому поводу!!! 

Ирина.

Здравствуйте Ольга
у меня к вам вопрос если мне не изменяет память на вашем сайте в разделе услуги, я видел объявление о взломе почты, вы имеете какое-нибудь отношение к этому. 
2) будет ли обновлятся ваш старый сайт www.websuper.by.ru 
3) мне непонятно цель создания платного сайта, вас чем-то не устраивал бесплатный хостинг??

(Ольга Морозова) Плохие дяди (а может это были тети) взломали мой старый сайт websuper.by.ru и вставили свое объявление, что они могут, видите ли, взломать почту. Насчет почты, не знаю, но сайт взломали, факт.

Отношение у меня к этому негативное.

Старый сайт обновляться не будет, а вскоре вообще будет удален.

Платный сайт я не создавала, я переехала на платный хостинг и сменила доменное имя. 

Бесплатный хостинг меня не устраивал по нескольким причинам: имя .by.ru, всплывающие окошко с рекламой, служба поддержки отсутствует, постоянные "технические неполадки"... список продолжать?

Хотя, благодаря ему у меня все-таки был сайт в Интернете, за что BY.RU большое СПАСИБО!

Бред а не рассылка.
Настолько плохого дизайна рассылки я не видел, ваш дизайн идёт после простого текста.
Вы пишите о раскрутке сайта, тИЦ, и т.д. Но о чём Вы говорите если Ваш сайт не раскручен?
О том что Вы предоставляете услуги по созданию сайтов то же бред.
Кто закажет? Если у Вас самой сайт плохо выполнин.

Дополнение к письму #1:

Сайт сделан получше чем рассылка, но всеровно как то...ни так.....фон советую поменять на более "пожелтей"
Но лучше контент чем сам дизайн, с этим у вас проблем нет.
Посмотрел несколько разделов (Скрипты, Статьи, Обо Мне)
В них содержания хватает.
Скрипты. Если нужно какие нибудь скрипты, я могу если хотите, выслать вам скрипты (у меня их ~50)
Следуйщей раздел был....обо мне.
Там я посмотрел вашу фотографию ;)
Так я и не определил сколько вам лет.
Если не сложно напишите.
Насчёт рассылке я не много преувеличил насчёт дизайна...просто нужно цвет немного сменить и курсив убрать.
Хотя ваше дело.
Так же советую вам провести голосование "Нравиться ли дизайн рассылке?"

С уважением Павел

    До встречи на страницах рассылки и сайта, Ольга Морозова.

Внимание!

Подпишитесь на рассылку  
Школы своего Здоровья Татьяны Морозовой  

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