Компьютерная скорая помощь
| для будущих мам и малышей |
| всё для мобильного телефона |
 |
|
Компьютерная скорая помощь
|
|
|
||||||||||
|
Cамый популярный веб-сервер - Apache. Одним из самых весомых преимуществ этого сервера (помимо бесплатности, быстроты и небольшого потребления ресурсов) является гибкость настройки.
В Apache веб-мастер может сделать практически все, что угодно. Создать собственные страницы ошибок, запретить доступ к определенным файлам и папкам, изменить обработку файлов (например, обрабатывать .html файлы как скрипты написанные на Perl) и многое другое.
Все это (и многое другое) можно настроить через специальный конфигурационный файл Apache - "httpd.conf".
Правда, есть одно но: этот файл глобальный для всего сервера. А что делать если хочется установить специальные настройки только для конкретной директории: в файле "httpd.conf" предусмотрено задание директив только для определенной директории, но.
1. Для того, что бы изменения вступили в силу необходимо перезагрузить (рестартовать) Apache сервер.
2. Для любых (даже невинных) изменений, нужно редактировать критичный для всего сервера файл.
Создатели Apache решили данный вопрос: вместо того, что бы каждый раз редактировать файл httpd.conf, в директории, для которой хотите сменить настройки Apache по-умолчанию, создайте файл ".htaccess". Далее в этом файле поместите все настройки, которые необходимо применять для текущей директории.
Директивы из файла ".htaccess" имеют более высокий приоритет, чем определенные в глобальном конфигурационном файле httpd.conf.
Данный подход дает владельцам сайтов возможность управлять параметрами сервера только для их директорий, не беспокоя администраторов сервера.
Для того, что бы файл ".htaccess" заработал, администраторы веб-сервера должны явно разрешить это в файле httpd.conf:
AllowOverride <список параметров, которые разрешено менять>
Таким образом, администратор вполне может запретить вам менять, если не все, то некоторые из параметров через ".htaccess". Разрешить менять любые параметры можно вот так:
AllowOverride All
Запретить изменения параметров через ".htaccess" совсем, можно вот так:
AllowOverride None
Учтите, что приведенные выше директивы должны быть в файле "httpd.conf".
1. Разрешить или запретить доступ к файлам с определенного IP адреса.
Предположим, что вы создали прототип веб сайта и решили показать его своему другу/заказчику. Ваше естественное желание, что бы открыть данный сайт мог только этот человек и никто другой. Этого можно добиться, поместив следующие директивы в файл ".htaccess":
order allow,deny
deny from all
allow from <xxx.xxx.xxx.xxx>
allow from googlebot.com
В примере файлы разрешено просматривать роботу Google, который приходит с доменного имени googlebot.com.
Возможно указание нескольких IP адресов через пробел. Также возможно указывать лишь честь IP адреса. Например, для того, что бы разрешить видеть ваш сайт всем из локальной сети, нужно написать что-то подобное: allow from 192.168
То же самое можно проделать, если вы хотите запретить кому-либо просмотр вашего сайта. Результат должен выглядеть вот так:
order deny,allow
allow from all
deny from 192.168.35.111
deny from googlebot.com
2. Запрет или разрешение доступа к определенным файлам.
Запрет и разрешение доступа к файлам в директории - это прекрасно. Однако, что если необходимо закрыть доступ не ко всем, а только в определенным файлам в директории? Для этого существует директива Files, которая позволяет задать файлы к которым будут применяться вложенные директивы. Рассмотрим несколько примеров:
<Files "test.php">
order allow,deny
deny from all
</Files>
Данная конструкция запрещает доступ только к одному файлу: test.php
<Files "*.inc.php">
order allow,deny
deny from all
</Files>
А этот пример запрещает доступ к файлам с окончанием: .inc.php
В выражениях можно использовать символы: * - для любой последовательности любых символов, ? - для одного любого символа.
Так же существует директива (FilesMatch), позволяющая задавать совпадение имен файлов через регулярное выражение. Если вы не знаете, что такое регулярное выражение, то можете посмотреть
При помощи регулярных выражений наш предыдущий пример можно записать вот так:
<FilesMatch "inc.php$">
order allow,deny
deny from all
</FilesMatch>
Как видите, нам уже не нужен знак * в начале (регулярные выражения по-умолчанию ищут подстроку). Но теперь мы должны явно указать на то, что имя файла должно оканчиваться на inc.php. Знак $ и служит для указания на то, что inc.php должно быть в конце строки.
Регулярные выражения - это очень мощный инструмент, позволяющий задать достаточно сложные шаблоны совпадений. Однако не стоит ими увлекаться. Их обработка требует от сервера на порядок больше вычислительных ресурсов. Поэтому, старайтесь избегать их использования.
Хочу обратить ваше внимание на одни факт. Запрещение обращения к файлу/файлам осуществляется только для протокола http. Из скриптов, которые выполняются на сервере, вы всегда может читать все "закрытые" файлы.
3. Организация перенаправления (редиректа).
При помощи файла ".htaccess" можно организовать перенаправление пользователя, если это необходимо.
Предположим, что необходимо сделать так, чтобы при доступе к файлу www.site.ru/xxx.html пользователь перенаправлялся бы на страницу www.site.ru/yyy.html. Сделать это можно так:
Redirect 301 /xxx.html http://www.site.ru/yyy.html
Цифра 301 указывает серверу, какой редирект использовать. 301 - постоянный редирект. 302 - временный. Постоянный - используется если страница была перемещена навсегда. Временный - если страница только временно недоступна (например, сайт находится в переработке).
Если необходимо перенаправить сразу список файлов, соответствующих некоторой маске, то используется вот такая конструкция:
RedirectMatch 301 /test(.*) http://www.site.ru/$1
Данная конструкция будет перенаправлять запросы к страницам, начинающимся со слова test на страницу без слова test вначале. Например, при доступе к http://www.site.ru/test_1.html пользователь будет перенаправлен на страницу http://www.site.ru/_1.html
$1 обозначает все то, что соответствует выражению в скобке (в нашем случае - это любое количество любых символов).
4. Задание кодировки страницы.
При помощи файла ".htaccess" можно задать кодировку страницы. После этого сервер сам будет сообщать браузеру о кодировке и вам не будет нужно вставлять в код страницы мета тег:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Задать кодировку можно так:
AddDefaultCharset windows-1251
Эту директиву можно применять внутри FilesMatch блока, т.е. задать кодировку только для определенных файлов, что иногда может быть очень полезно.
5. Отображение скриптов в браузере.
Если вы хотите заставить сервер отобразить, например, perl или python скрипт в браузере вместо того, что бы выполнить его, то используйте следующую директиву:
RemoveHandler cgi-script .pl .py .php
Для скриптов на PHP данный метод будет работать, только если PHP установлен как cgi. Если же PHP установлен как модуль Apache (mod_php), то необходимо применить другой метод:
AddType text/html .php
6. Собственные страницы ошибок.
Иногда случаются различные ошибки, и тогда сервер отправляет пользователю некую страницу с ошибкой по-умолчанию. Обычно это простая надпись об ошибке на белом фоне. Для того, что бы ваши пользователи увидели красивую страницу с ошибкой, с вашим собственным дизайном и текстом, следует использовать следующую директиву:
ErrorDocument <код_ошибки> /error.php
Здесь "код_ошибки" - код ошибки, в ответ на которую будет выдана данная страница.
Например, для того что бы при обращении к несуществующей странице вашего сайта (ошибка 404) пользователь был переадресован на страницу 404.php нужно написать следующее:
ErrorDocument <404> /404.php
Возможности файла ".htaccess" очень обширны и даже на простое их перечисление займет объем небольшой книги.
Как заставить работать следующий код в Opera 7.0, а также в Internet Explorer
6 и Mozilla, когда страница в режиме Standards compliance mode:
<table width="100%" height="100%">
<tr>
<td align="center">текст, который должен располагаться в центре страницы</td>
</tr>
</table>
Почему текст получается прижатым к верхней границе документа, вместо того, чтобы
расположиться в центре? Прежде всего дело в том, что в спецификации HTML 4.01 у
тега table нет атрибута height, и поэтому браузеры в режиме совместимости со
стандартами (а Opera 7.0 в любом случае) его игнорируют. Но самое интересное,
что они перестают его игнорировать, если в CSS указать следующую конструкцию для
растягивания канвы документа:
html,body{
height:100%;
margin:0px;
padding:0px
}
Собственно, вам даже не нужно что-то менять в самом HTML коде, в котором у вас
прописана (быть может давно, когда вы и не думали, что когда-нибудь height могут
«отменить») высота таблицы.
Предвидя вопросы, хочу сделать пару замечаний по приведённому стилевому
описанию.
Во-первых, нужно указывать оба элемента html и body, так как просто body
недостаточно. Например, для Mozilla в Standards compliance mode канвой является
именно элемент html, а не body.
Во-вторых, если убрать обнуление margin и padding, то опять же в режиме
совместимости со стандартами у страницы появится неприятная вертикальная полоса
прокрутки.
Ну и напоследок хочу отметить, что в любом случае документ, в котором содержится
тег table с атрибутом height, не пройдёт проверку. Если уж вам будет греть душу
сознание того, что ваши документы valid, советую заменить этот атрибут на CSS
свойство height, не забыв, тем не менее, указать в таблице стилей приведённое
выше решение для растягивания канвы.
Что нам понадобится
В награду за наши труды, мы получим странички которые не будут расползаться вдругих броузерах, и при других разрешения экрана. Кроме того если вы будете создавать свои Web страницы с помощью средств автоматизированного создания сайтов, то они получаться слишком большого размера.
И так сначала коротко о том, что нам понадобится. Прежде всего самое главное - идея для сайта. Не стоит создавать сайт "просто так" или, потому что "у всех есть". Иначе вы просто постараяетесь напихать туда всё, что есть на вашем жёстком диске. Нужно выбрать общую тематику сайта, и при заполнении его содержанием, придерживаться её. Если у вас пока, нет конкретной идее, но попробовать свои силы в создании сайтов, всё-таки хочется, то можете для начала создать домашную страницу . Обычно это сайт, состоящий из единственной странички, на которой вы можете рассказать о себе, своих увлечения и поместить туда свою фотографию. Часто на домашних страничках также бывают гостевые книги. Что это такое, надеюсь объяснять не надо.
Не стоит также для начала создавать много разделов. Ведь их всегда можно будет добавить потом.
Кроме идеи, нам естественно нужен доступ в интернет. Сразу успокою вас - от вас не потребуется, чтобы соединение было установлено постоянно. Вам нужно будет только закачивать обновления на сервер.
Теперь о програмном обеспечнии. Всё необходимое для создания простых сайтов, включено в Windows. Нам понадобиться текстовый редактор Блокнот (Пуск->Программы->Стандартные -> Блокнот), графический редактор PAINT (Пуск->Программы->Стандартные -> Paint) и Мастер издания Web (Пуск->Программы->Стандартные ->Средства интернета->Мастер издания Web).
Но работать со всеми этими программами очень не удобно, они годятся только на первых порах. Поэтому как только сможете скачайте FTP манеджер Cute FTP , любой версии. Не знаю как старых версиях, но в комплект поставки версии 4.0 и 5.0 также входит бесплатный HTML редактор Cute Html . Найти эти программы можно на любом крупном сервере с freeware и shareware софтом. Теперь о том чем заменить неудобный Paint. В принципе подойдёт любой мощный графический редактор, умеющий работать с растровой графикой и поддерживающий как можно больше графических форматов. Я например использую Adobe Photoshop. Неплохо также иметь программу для создания Gif анимации.
Итак приступим. Для начала разберёмся в том как устроена WEB страница. Несмотря на, то что на них может присутствовать графика, ссылки на другие документы, таблицы и многое другое, они являются простыми текстовыми файлами с расширением *.html или *.htm. Сначала вы должны усвоить тот факт, что в самом html файле нет рисунков. Они храняться в отдельных графических файлах, а в html документе даётся лишь указание броузеру, чтобы он вставил в указанном месте картинку из этого файла. Также обстоит дело и с таблицами. С помощью специальных команд мы описываем как должна выглядеть таблица, а браузер, уже при загрузке документа "рисует" её. Точно также происходит со всем остальным содержанием страницы.
Едиственное, что и присутвует в html файле и в том, что показывает нам броузер - это текст. Он содержиться непосредственно в HTML файле. Но чтобы текст выглядел опрятно и в нём присутствовали все элементы форматирования: абзацы, отступы, пропуски, списки и т.д. нужно опять же таки вставлят в текст команды.
Давайте разберём: что это за команды? Давайте по порядку. Во-первых, когда мы создём html файл, то имеем дело с языком разметки гипертекста , сокращённо языком HTML. Во преки распространёному мнению, язык HTML не является языком программирования. Он лишь указывает броузеру, как должна выглядеть WEB страница. Команды этого языка называютя тегами . Броузер воспринимет за теги, то есть за указания по разметке текста, любой текст помещённый между символами < и >.
Во-вторых, теги бываю одиночными (в этом случае тег даёт разовый эфект в том месте,где он расположен) и парными . Парные теги это когда кусок текста "зажимается" между двумя одинаковыми тегами. В парный теги состоят из открывающего тега и закрывающего тега . Закрывающий тег это тег который стоит после текста, который должен быть "зажат" Между тегами. Он ничем не отличайтся от открывающего тега только после символа < идёт символ / потом сам тег и символ >. В общих чертах это выглядит так:
| < команда html > Текст </ команда html > |
| < команда html ИМЯ ПАРАМЕТРА=ЗНАЧЕНИЕ > Текст |
Создаём главную страницу сайта
Ну вот мы и разделались со скучно теорией, теперь перейдём к самому интересному - созданию своего сайта. В этой статье мы для начала создадим очень простую страничку которая будет главной страницей сайта (то есть той которая открывается первой). Остальные страницы мы создадим потом, когда вы узнаете как делать ссылки. А пока мы узнаем как использовать только самые простые Html теги, поэтому страничка будет не сложной. А вот во второй статье иы её украсим и усложним.Итак начнём. Запустите текстовый редактор Блокнот или Html редактор Cute Html. Как использовать его вы узнаете потом, а пока напишите в редакторе:
|
<HTML> <HEAD> <TITLE> < /TITLE > </HEAD> <BODY> </BODY> </HTML> |
Открыющий и закрывающий теги < HTML > размещены соответственно в начале и в конце страницы всегда. Так требует стандарт html. Между тегами < HEAD > находятся теги описывающие первоначальную информацию о Web странице. В нашем случае это теги < TITLE > < /TITLE >. Теги < HEAD > всегда расположены после тега < HTML > и встречаються в документе только один раз. Это свое образная "Голова" документа. между тегами < TITLE > < /TITLE > помещают текст, который будет отображаться в заголовке бразера (над его меню). Поэтому наберите между ними какой-нибудть текст, например "Добро пожаловать на мой сайт":
|
<HTML> <HEAD> <TITLE> Добро пожаловать на мой сайт </TITLE > </HEAD> <BODY> </BODY> </HTML> |
Вот мы и подобрались к основной части - разделу < BODY >. Между этими тегами содержится все теги и текст, который будет отображаться в браузере. Также у тега < BODY > есть много параметров, которые мы рассмотрим потом.
То, что я сейчас попытался объяснить можно обозначить так - у Web страницы, также как и у человека есть голова (< HEAD >) и тело (< BODY >). И в голове и в теле есть органы, но большая их часть содержится в теле.
А сейчас сохраните набранный вами текст (Лучше в специально выделенной вами для сайта папке) под именем index.html. Почему именно index.html? Потому что мы создаём главную страницу для сайта, а она всегда так называется. Если Блокнот не хочет сохранять файл с таким расширением, то в ручную переименуйте файл.
Теперь откройте этот файл в браузере и вы увидите чистый лист. Лишь в самом вверху(в заголовке браузера). Виден текст, который мы набрали между тегами < TITLE >.
Теперь пора улучшить нашу страничку. Во первых зададим её фоновой цвет. Для это в теге < BODY > есть параметр BGCOLOR . Значит чтобы задать фонофой цвет, нужно изменить наш файл так (никаких тегов удалять не нужно, надо лишь дописать параметр):
|
< BODY BGCOLOR="фоновой цвет" > |
Здесь нужно вместо слов "фоновой цвет" подставить название цвета который вы хотите получить. Например - Black, Yellow, Green, Red, White, Gray. Но лучше указывать цвет в HEX формате. Для этого в CuteHtml нажмите:
В появившемся окне выберете цвет и нажмите OK. В текст вставиться название цвета в HEX.
Напишите любой понравившийся вам цвет и сохраните файл. Теперь откройте его и посмотрите, что получилось. Если цвет фона не изменился значит либо вы ошиблись, либо не сохранили перед этим документ.
Предположим, что у вас всё получилось. Пора добавить на страничку какой-нибудь текст. Но перед этим зададим его свойства. По умолчанию текст отображается чёрным цветом. Если вы выбрали тёмный фон, вам это не подойдет. Для задания цвета текста в теге < BODY > есть параметр TEXT. Значение указывается также как и фоновой цвет.
|
< BODY TEXT="фоновой цвет" BGCOLOR="
фоновой цвет" > |
И опять лучше указать цвет в HEX кодировке. Например если вы хотите сделать текст оранжевого цвета,а фон серого, то нужно написать:
|
<BODY TEXT="FF8040" BGCOLOR="
CDCDCD"> |
Теперь цвет текста у нас будет оранжевым (вы можете выбрать любой другой цвет). Чтобы это проверить напишем любую бессмысленную строчку. Напомню, что текст должен находится между тегов < BODY >, которых в тексте должно быть всего два(открывающий и закрывающий). Между ними может быть сколько угодно строчек.
Сохраните файл, откройте его в браузере и вы увидите текст выбранного цвета.
Вы наверняка захотите поместить на верх вашей страничкм какой-нибудь графический логотип. Как это сделать вы узнаете из второй части статьи, а пока поместим туда крупный заголовок. Заголовк это особым образом выделенный текст. Вот как его сделать.
Сотрите тот временный текст который вы написали(не надо стирать теги!) и вместо него напишите например название вашего сайта(К примеру "PupkinSoftware site"). Перед ним поставте тег <H1>, а после него закрывающий тег </H1>. Текст помещённый между этими тегами становится заголовком.
Опять сохраните изменения и откройте файл в броузере. Вы увидите, что текст слат крупным и выделенным. Если вы хотите, чтобы заголовок был поменьше, то цифру 1 в тегах, поменяйте на 2, 3 и так до 6. Чем больше цифра, тем меньше заголовок.
Заголовок, у нас есть, но размещён он не очень красиво (Этот так в нашем случае. Иногда необходимо расположение заголовка слева). Лучше разместить его в центре. Для этого перед тегом <H1> поставьте тег <center> и после тега </H1> тег </center>. Любой текст помещённый между этими тегами, будет находится в центре экрана.
Заголовок готов. Теперь нужно добавить содержания. Для этого просто набирайте текст между тегами <BODY>.Для их форматирования можете использовать любые расмотренные выше теги.
Имейте в виду: в броузере текст не будет переносится на следующую строку, пока будет место на экране. Если вам в каком то месте нужно перенести текст на другую строку, то просто наберите там тег <BR>. Из следующего урока вы узнаете как создавать абзацы, что более грамотно чем использование тега <BR >. Кстати, если вам нужно пропустить большое количество строк, то просто поставте подряд несколько тегов <BR>
Теперь несколько полезных тегов:
Итог
В итоге у вас должно получится примерно вот, что:
|
<HTML> <HEAD> <TITLE> Добро пожаловать на мой сайт </TITLE> </HEAD> < BODY TEXT="FF8040" BGCOLOR=" CDCDCD" > <center> <H1> PupkinSoftware homepage </center> </H1> <I> Извините страница в разработке </I> <HR> </BODY> </HTML> |
|
<HTML> <HEAD> <TITLE> Добро пожаловать на мой сайт </TITLE> </HEAD> <BODY TEXT="181C61" BGCOLOR="D1E0D6" > <center> <H1> Pupkin Software homepage </center> </H1> <HR> <I> Извините страница в разработке </I> </BODY> </HTML> |
Получилось как-то блекло и не аккуратно. Сегодня нам предстоит это исправить. Во первых, мы заменим надпись "Pupkin Software homepage" (конечно в вашем случае это какая-то другая надпись) на логотип, а также познакомимся с несколькими тегами, которые украсять ваш сайт.
Прежде, чем "вешать" на cтраничку логотип, нужно его нарисовать. Лучше всего это сделать в Adobe Photoshop , но для начала можно сварганить что-нибудь простенькое в Paint. Но имейте в виду, что в нем можно нарисовать только временную "заглушку", а потом её надо будет обязательно заменить.
Вообще, картинки, состоящие всего из нескольких цветов, лучше сохранить с формате GIF. К тому же, в этом формате вы можете залить фон прозрачным цветом, и тогда ваша картинка будет хоршо смотреться на любом фоне, т.к её фон будет сливаться с фоном странички.
Cвой логотип я сохранил в формате JPG и задал для неё белый фон. Поэтому я поменяю в нашем примере цвет фона странички на "White", то есть белый. В своей страничке вы можете указать какой угодно цвет.
Внимание! Никогда не сохраняейте изображения для Web страниц в формате BMP! Они занимают очень много места,и долго грузятся.
Но тепер самое главное - как собственно добавлять картинки на страничку. Для этого служит тег
<img>. Вот как он применяется:
Здесь "путь к картинке" это адрес по которому расположено изображение, которое вы хотите добавить. Когда мы будем помещать свою страничку на сервер (т.е. собственно в интернет), то укажем там адрес на сервере. А пока укажите путь, по которому у вас лежит картинка на жёстком диске. Например "C:\Photos\vasia.jpg". Если картинка сохранена в том же каталоге, что и ваша страничка, то просто укажитие её имя - "vasia.jpg".
Именно так мы поступим. Копируйте вашу картинку в каталог со страничкой и обзовите её, например,
"logo.jpg". Теперь нам осталось только заменить заголовок "Pupkin Software Homepage на картинку.
Для этого удалите теги <h1> и </h1>, а также сам текст. Теперь пишем:
|
<HTML> <HEAD> <TITLE> Добро пожаловать на мой сайт </TITLE> </HEAD> <BODY TEXT="181C61" BGCOLOR="White" > <HR> <center> <img src="logo.jpg" alt="Страничка разработчика Василия Пупкина." > </center> <HR> <I> Извините страница в разработке </I> </BODY> </HTML> |
В заначении поля ALT напишите текст, который должен появляться при наведении на картинку курсора. У тега IMG Есть много других атрибутов, но мы рассмотрим их потом.
Обратите внимание, что я добавил ещё одну отсекающую черту (<HR>). Я сделал это просто для красоты, вы можете убрать её, но картинка всё равно появится.
Теперь сохраните измеенения и откройте страничку в браузере. Ну как? Уже гораздо лучше, но всё равно нам ещё работать и работать.
А где же содержание ?
Знаете чего так не хватает на нашей страничке? Тескста. Ведь в конце-концов посетители приходять на сайт из-за его содржания, а дизайн лишь создаёт приятную обстановку и удобства. Так что пора добавить немног текста. Но текст должен быть красиво оформлен, то есть должны быть соблюдены элементы форматирования - заголовки, отступы, абзацы. Первые мы создавать уже умеем (теги <Hx&lg), а сейчас поговорим о последних.
Новый абзац создаётся очень просто - тегом <p&lg. Вообще - то этот тег парный, но
закрывающей тег можно не указывать. У тега есть одни важный атрибут - align. Он может
принимать следующие значения: left, right, justify, center. Этот атрибут указывает куда должен
прилегать абзац. В целом это выглядит так:
В этом примере я буду указывать значение left, вы же можете поэксперементировапть с другими значениями.
Теперь можно со спокойно душой писать содержание главной странички. Что бы создать новый
абзац просто пишем тег <p>. Посмотрите на мой пример и вы во всём разберетесь.
Обратите внимание на то, что я часто использую теги <B>, <I>,
<H3>, <LI>. Советую и вам их использовать, так как они позволяют
красиво отформатировать текст. Вот собственно и сам пример:
|
<HTML> <HEAD> <TITLE> Добро пожаловать на мой сайт </TITLE> </HEAD> <BODY TEXT="181C61" BGCOLOR="White" > <HR> <center> <img src="logo.jpg" alt="Страничка разработчика Василия Пупкина." > </center> <HR> <P Align="Left"> <H3> Общая информация </H3> <P Align="Left"> Здравствуйте! Вы попали на сайт фирмы <B> Pupkin Software </B>>, которая занимается разработкой программного обеспечения. Мы рады видеть вас на своём сайте и хотим познакомить вас с нашими программными продуктами. <P Align="Left"> Мы занимаемся как написанием <i>freeware</i> и <i> shareware </i> утилит, так и разработкой ПО на заказ, за умеренную плату. С нашими ценами вы можете познакомиться в разделе "Цены". Также на сайте присутствует раздел в кототором вы можете скачать наши <i>freeware</i> и <i> shareware</i> утилиты. Информацию о фирме вы можете помотреть в разделе "О нас". <P Align="Left"> <H3> Программы: </H3> <Li> PuSo Scan v 4.1 <Li> PuSo Zaca v 2.3 <Li> PuSo Ping/Pong v 30.2 <Li> PuSo TURBO Achive Compresor v 9.5 <P Align="Left"> <H3> О нас: </H3> <li> Программист: Василий Пупкин <li> Графика: Репкин Александр Даниилович <li> Звук: Алинка Снегова <li> Иформационная поддержка: <b>MOD-LAB</b> by MOD-LAB Team <P Align="Left"> <H3> Цены: </H3> <P Align="Left"> Цена договорная и зависит от сложности выполняемой работы. Обычно цены колеблётся от 20 до 1000$ <hr> </BODY> </HTML> |
В этом примере нет гиперссылок, так как мы с вами ещё не изучили их - ими мы займёмся в следующий раз, обещаю. Но даже без ссылок можно создать вот такую вот страничку и получать от неюё пользу - в данном примере они узнаю о группе разработчиков ПО и смогут заказать у них по E-Mail программу.
Как видите, даже зная совсем немного тегов, можно создать довольно приличную стравничку. Я специально привёл этот пример что бы не сомневались в своих силах и уже сейчас могли начать создавать дизайн своего сайта.
В качестве домашнего задания вы можете, опираясь на данный пример, создать свою главную страничкку. А вследующий раз мы разобьём разделы по отдельным страницам и я покажу вам некоторые приёмы работы с Cute Html.
Когда приходится вести несколько проектов сразу, лучше заранее разработать для себя систему хранения всех файлов, чтобы работа не превратилась в кошмар. Лично я придерживаюсь следующей системы.
1) Выбирается самый большой раздел диска. Каталоги с проектами имеют тенденцию разрастаться до невиданных размеров. Так что о свободном месте лучше позаботиться заранее.
2) На диске создается главная папка web-projects - в ней вы будете хранить все свои web-проекты и сопутствующие материалы.
3) В качестве подпапок создаются папки проектов. В качестве имени для каждой папки я выбираю доменное имя сайта. Например в папке web-projects у вас могут быть подпапки www.microsoft.com, www.playboy.com и www.design.ru.
4) В каждой из папок создаются следующие подпапки:
Любой из продвинутых Web-серверов (IIS и Apache, но не PWS) позволяет создавать виртуальные сервера. То есть держать работающими несколько серверов одновременно. Далее советы даются на примере IIS.
Таким образом проект www.microsoft.com откликается на http://localhost:7777/, - http://localhost:8888/, - http://localhost:9999/ и так далее.
Во многих броузерах есть функция автозаполнения адреса. Когда название сервера одно (localhost), а меняется только номер порта, достаточно в адресной строке набрать пару первых букв, а затем из выпадающего списка выбрать нужную машину.
1) В Windows есть файл hosts - аналог такого же файла у UNIX. Это маленькая база данных DNS. Туда ваша машина смотрит в первую очередь, чтобы найти соответствие IP доменному имени, набранному например в адресной строке броузера.
Это файл находится в каталоге <WINDOWS>\system32\drivers\etc. Пока в нем только комментарии и одна рабочая строчка:
# Copyright (c) 1993-1995 Microsoft Corp. # # This is a sample HOSTS file used by # Microsoft TCP/IP for Windows NT. # 127.0.0.1 localhost
Адрес 127.0.0.1 это "петлевой адрес" - он всегда указывает на вашу машину. Вот почему набирая в броузере localhost мы попадаем на свою собственную машину. Вставьте под этой строкой новую:
127.0.0.1 qw
Теперь "петлевому адресу" присвоено еще одно имя "qw". Запустите броузер и наберите qw:8888/, и попадете на ваш локальный проект "". Иногда даже достаточно набрать qw:8888, чтобы броузер догадался подставить http:// в начало адреса. Так что, самым ленивым теперь не нужно набирать "localhost". Символы "qw" расположены на клавиатуре рядом, и на их набор нужна лишь пара пальцев и пара миллисекунд нашего дорого web-мастерского рабочего времени. Правда удобнее стало?
В этот же файл можно поместить IP и доменные имена ваших любимых серверов. Таким образом вашей машине не придется лезть в Сеть к DNS серверу за поиском соответствия. В век, когда космические корабли бороздят просторы Большого театра, каждая секунда - на вес золота.
2) С помощью полезной команды
subst B: <..>\web-projects
вы присваиваете пустующей букве B: ссылку на каталог проектов. Теперь в Windows Explorer и FAR-е вы быстро сможете перейти в каталог проектов, так как буква B: самая первая. Поместив эту команду в autoexec.bat, вы избавляете себя от необходимости набирать эту команду вручную после каждой загрузки машины.
Итак, мы готовы к тому, чтобы украсить наш сайт различными полезными и не очень "прибамбасами". Это уж кому что... Начнем с озвучивания и по-моему интереснее, если это будет не музыка, а приятный голос. Для этого вам необходимо записать подготовленный текст, желательно не очень плохим микрофоном и ни в коем случае не с помощью стандартного фонографа. Я рекомендую музыкальный редактор Sound Forge 5.0 или старше. После записи - отредактировать звук, убрав все лишнее. Далее открываем во Flash Mx наш сайт и импортируем в библиотеку подготовленный звуковой файл(File\Import to Library). Открываем тот символ, где хотим услышать звук, в нашем случае это кнопка, активизируем событие Down, открываем окно библиотеки (Window\Library) и мышкой просто перетаскиваем наш звук в символ. Все. У меня, например, приятный женский (опять же кому что...) голос сообщает, что открываются "полезные советы по windows 98" (windows xp, Linux и т.д.)
Неплохо выглядит возможность управлять цветом рабочего стола или окна. Итоговый цвет складывается из смешивания трех цветов красного, зеленого и синего (RGB -Read, Green, Blue), значения которых изменяются от 0 до 255. Подготовим окно (символ), в который поместим три бегунка (символа) для управления каждым из этих цветов. Каждый символ должен иметь индивидуальное имя, которое задается в окне Properties (например knobsin, knobzel, knobkra)
Для начала зададим начальное положение бегункам. Я это делаю во втором кадре слоя Action следующим образом:
_root.regcv.knobkra._x=150;//regcv - имя окна(символа), где
расположены бегунки
_root.regcv.knobzel._x=150;
_root.regcv.knobsin._x=90;
Далее задаем действия кнопке, которая вызывает (делает видимым окно(символ) regcv):
on (press) {
_root.regcv.swapDepths(11); //окно regcv на первый план
_root.regcv._visible=true; // делаем его видимым
myColor = new Color(_root.osnova); // определяем переменную myColor как цвет
rgb = (c1 << 16 | c2 << 8 | c3);// рабочего стола (можно любого
окна)
_root.regcv.onEnterFrame = function() {
c1 =_root.regcv.knobkra._x+105; // интенсивность красного цвета
c3 =_root.regcv.knobsin._x+105; // интенсивность синего цвета
c2 =_root.regcv.knobzel._x+105; // интенсивность зеленого цвета
rgb = (c1 << 16 | c2 << 8 | c3);
myColor.setRGB(rgb); // получаем итоговый цвет рабочего стола
}
}
Если Вам захотелось "...себя показать", возможно подойдет такой способ . Сканируете свою фотографию, обрабатываете ее в Photoshop-е и импортируете в библиотеку своего сайта. Добавляете новый слой - у меня называется avtor. Во втором кадре слоя создаем окно(символ) и даем ему имя oknoavt. Внутри это символа создаем еще три символа: text, avtor и alfa. Не забывайте, что только указав имя символа в окне свойства, вы получите возможность управлять свойствами символа. В окно text вы вписываете рекламный текст, в окно avtor помещаете из библиотеки свою фотографию, e-mail и.т.д.. Как в пределах окна перемещать символы вы уже знаете - поэтому легко это сможете проделать со своей фотографией и разными реквизитами. В окно(символ) alfa поместим задублированный в библиотеке бегунок (символ), который использовали для управления цветом, только на этот раз будем управлять функцией alfa символов text и avtor, а имя бегунку дадим fad1. Во втором кадре слоя Action задаем начальное значение:
oknoavt._visible=false; //пока окно скрыто
_root.oknoavt.alfa.fad1._x= _root.oknoavt.alfa.fad1._x+80 // начальное значение
бегунка
_root.oknoavt.avtor._alpha= _root.oknoavt.alfa.fad1._x+99; // прозрачность окна
avtor
_root.oknoavt.text._alpha= 99-_root.oknoavt.alfa.fad1._x; // прозрачность окна
text
В начальный момент при таком варианте текст просвечивает через фотографию и все картинки в символе avtor. Кнопке(символу), которая активизирует окно oknoavt (делает его видимым) прописываем действия:
on (press) {
_root.oknoavt.max._visible=true; // кнопка максимизации окна видима
_root.oknoavt.minavt._visible=false; // кнопка минимизации окна не видима
_root.oknoavt._visible=true; // окно показать
if (_root.oknoavt._width>470)
{
// если окно максимизировано кнопку максимизации спрятать, а минимизации
показать
_root.oknoavt.max._visible =false;
_root.oknoavt.minavt._visible =true;
}
//При перемещении бегунка изменяется функция альфа (прозрачность) символов text //и avtor причем в противоположных направлениях
_root.oknoavt._visible =true;
_root.oknoavt.alfa.onEnterFrame = function() {
_root.oknoavt.avtor._alpha=(_root.oknoavt.alfa.fad1._x+99)/2;
_root.oknoavt.text._alpha=(99-_root.oknoavt.alfa.fad1._x)/2;
_root.oknoavt.swapDepths(12);}
}
При таком подходе движение бегунка влево создает эффект "всплытия" текста из графики, а при движении вправо - графики из текста. В начальном варианте окно может выглядеть допустим так:
Для того, чтобы по щелчку на Вашем e-mail вызывался почтовый агент, в действиях соответствующего символа прописываем :
on (press) {
getURL("mailto:truntaev@mailru.com", "_parent");} // ваш адрес
И ...еще. Захотелось сделать надпись, которая бы двигалась в вертикальной плоскости (см.программу NBGClean.exe). Задачка оказалась не так уж и проста. Графические редакторы, позволяют это сделать, но довольно "коряво". Только результат полученный с помощью программы Plasma, меня полностью удовлетворил. Но это "украшательство" прибавило лишних 15Kb. Красиво, но для плохого interneta цена неоправданно велика.
Индикаторные часики в панели задач - также очень просто. Создаете символ (Movie Clip) в него помещаете переменную типа Dynamic Text и в первом кадре этого символа прописываете такие действия:
mydate = new Date(); // определяем переменную отражающую текущее
время
sec = mydate.getSeconds(); // получаем из нее секунды
min = mydate.getMinutes(); // минуты
hour = mydate.getHours(); // часы
if (sec<10) {
sec = "0"+sec;
}
if (min<10) {
min = "0"+min;
}
if (hour<10) {
hour = "0"+hour;
}
time = hour add " " add min add " " add sec; // оформляем и присваиваем
полученное значение динамической переменной.
И последнее. Размер скомпилированного (*.swf) файла у меня составил 89Kb. Для плохого interneta (бесплатный host) многовато. Чтобы как-то скрасить время загрузки и информировать пользователя о ее ходе можно воспользоваться прелоадером. Для этой цели мы предусмотрительно оставили пустым первый кадр всех слоев основной шкалы (если помните, я везде предлагал размещать символы начиная со второго кадра). Идея такая - подсчитывать сколько процентов загружено и отражать это в текстовом виде и в виде заполнения прямоугольника одного цвета другим. Итак, создаем в первом кадре сцены прямоугольник, в центре, которого размещаем символ(также прямоугольного вида) с именем zapol1 и где-то размещаем переменную типа Dynamic Text (в ней будем отражать процент загрузки) далее все это помещаем в символ zagruz. В действиях символа zagruz прописываем следующее:
onClipEvent (load) {
tot = _root.getBytesTotal(); //определяем общий размер загружаемого клипа
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded(); // определяем сколько байт уже загружено
percent = loaded/tot*100; // рассчитываем процент загрузки
text=Math.floor(percent)+"%"; // значение показываем в динамической переменной
_root.zagruz.zapol1._width =Math.floor(percent)*5; // увеличиваем размер
символа //zapol1 в ширину.
if(loaded==tot){_root.gotoAndStop(2)} // если клип загружен переходим ко
второму //кадру, где все и начинается
}
Результат примерно такой:
В заключении, мне остается только принести извинения за некрасивые имена символов (knobkra, zapol1 и т.д.) - осталось со времен работы в древнем паскале.
19.06.2003 Java Script спешит на помощь.
С бурным развитием Всемирной Сети у ее пользователей появилось множество замечательных возможностей. Одной из них является бесплатный хостинг. Разместить свою страничку в Сети проще простого, да к тому же и бесплатно. Но всем читателям МК известно, где встречается бесплатный сыр: в награду за услуги размещения информации вы должны терпеть на своих страничках баннеры хостера. Также обычно приходится обходиться без всяческих удобств — возможности использовать SSI, Perl, PHP и SQL как правило отсутствуют, что не только накладывает существенные ограничения на функциональные возможности сайта, но и доставляет немало хлопот web-мастеру. «А в чем, собственно, проблема?» — могут удивиться непосвященные читатели. Действительно, сначала все будет ОК. Страницы, которые создавались часами, будут загружаться на сервер за считанные секунды. Но вот когда через совсем небольшой промежуток времени количество страниц на сайте достигнет нескольких десятков и в очередной раз потребуется добавить новый пункт меню или изменить адрес web-мастера, вот тогда-то вам и надоест грузить и редактировать все эти HTML-файлы. А ведь код таких элементов как меню, шапка и баннеры обычно присутствует на каждой странице ресурса в неизменной форме. И при малейшем изменении одного из элементов (скажем, надо добавить новый пункт меню) приходится редактировать каждый HTML-файл. Так появляется желание поместить эти повторяющиеся элементы в отдельный файл, подключить его к каждой странице и, просто внося в него изменения, влиять на содержимое всех страниц сразу. В свое время с этой проблемой боролись про помощи фреймов. Web-мастерам было очень удобно. А посетителям? Ну, как повезет...
С появлением SSI (Server Side Include — включение на стороне сервера; см. статью Дениса ТИМОШЕНКО «Что сулит нам SSI» в МК №46 (217)) ситуация улучшилась коренным образом. Макроинструкции, исполняемые на сервере, позволили вставлять в документ содержимое другого файла. Таким образом, такие элементы как меню выносятся в отдельный файл и по необходимости подключаются к произвольному количеству web-страниц. Теперь для того, чтобы изменить меню на любом количестве страниц, достаточно изменить один единственный файл. Почему SSI так быстро стал популярным? Все очень просто: документ генерировался на стороне сервера, а пользователь получал готовый результат, даже не подозревая, что он был «сложен» в одно целое из нескольких частей. Все вроде бы наладилось. Но не тут-то было. SSI считался элитным сервисом, кроме того, прилично нагружал сервер. По этой причине только в последнее время SSI появился на некоторых бесплатных хостингах.
Но как же быть тем, кто создал свой сайт на бесплатном хостинге довольно давно? Тем, у кого этот сайт разросся, стал популярным и имеет раскрученный URL? Тем, у кого нет средств и желания на приобретение платного хостинга и доменного имени? Что делать тем, кто не хочет переезжать? Здесь на помощь приходит наш старый друг и верный помощник — JavaScript. Благодаря своей простоте и невероятной гибкости, JS позволяет многое. В том числе и подключение содержимого отдельных файлов.
Включение фрагментов кода на JS в документ осуществляется при помощи тэга <script>:
Я не буду останавливаться на толковании тэгов JS, многократно описанных на страницах МК. Кроме того, по-моему, они вполне интуитивно понятны.
«Путь к файлу с JS-кодом» указывает путь и имя файла, содержащего JS-код. Код, содержащийся в указанном файле, подключается к документу, и у посетителя создается впечатление, что код, содержащийся в подключаемом файле, попросту был размещен в документе. При этом при просмотре кода документа посетитель не увидит кода подключаемого файла, а только ссылку на него — сам файл будет загружен отдельно. Из сказанного явствует главное отличие данного метода от принципа SSI: страница собирается не на сервере, а на компьютере пользователя. Но сам пользователь, разумеется, об этом даже не подозревает.
Нетерпеливые читатели удивляться — как же может помочь подключение JS-кода из файла, когда надо подключать HTML или вовсе текст? Запросто! В JS для вставки строки в документ существует специальная команда:
Все, что заключено в кавычки ' ', будет вставлено в документ. Таким образом можно спокойно вставить в файл конструкцию типа document.write('<a href="some link">Link</a>'); и впредь путем изменения лишь одного подключаемого файла влиять на контент всего сайта.
Следует заметить, что в роли кавычек можно использовать как одинарные — ' ', так и двойные — " ", но при этом в содержимом коде должны отсутствовать такие же кавычки. В противном случае перед ними следует ставить знак \:
Напоследок приведу маленький пример:
А вот и сам подключаемый файл:
В результате при открытии файла index.html в него будет подставлено содержимое menu.js, и в окне браузера появятся ссылки, код которых находится в menu.js. Также хочу подчеркнуть, что содержимое файла menu.js будет подставляться внутри тэга <script>, посему простая прописка в файле <a href="some menu link 1">Пункт меню 1</a> (без document.write(' ')) не даст ожидаемого результата.
В этой статье я расскажу о том как сделать на своём сайте любую форму, но предупрежу сразу, что речь о каком-либо программировании в этой статье не пойдёт.
Итак, что же такое HTML-формы? Форма - это способ передачи данных скрипту(сценарию). Все вы наверное видели какие-либо анкеты в Интернете, панель занесения сообщения в гостевую книгу и др. Всё это и есть HTML-формы. Но как же они создаются? Давайте всё рассмотрим на примерах.
Тэги <form></form>
Всё описание HTML-формы располагается внутри тэгов <form></form>. Закрывающий тэг </form> никогда не несёт в себе какой-либо информации, а вот открывающий заслуживает дополнительного рассмотрения. Рассмотрим синтаксис этого тэга: <form method="метод" action="имя_сценария"> Атрибут Method может принимать значения GET или POST. А атрибут action представляет собой URL какого-либо сценария, выполняющего действия в соответствии с заполненной формой.
Тэг <input> и его атрибуты
Тэг <input> имеет несколько атрибутов. Вот основные из них: <input type="тип поля" value="значение" name="имя"> Где name приримает любое уникальное имя в пределах одной формы; любое поле ввода должно иметь имя, для последующего обрабатывания данных из этого поля сценарием. Value - это значение по умолчанию данного поля. Атрибут type может принимать значения text, hidden, password, checkbox, radio, reset, submit. Остановимся на каждом из них поподробнее. После описания данных типов, мы рассмотрим всё на примерах.
Text - указывает браузеру, что нужно отобразить поле ввода. Значение атрибута value здесь будет указывать первоначальное значение данного поля. Также здесь могут присутствовать два дополнительных атрибута, это size и maxlenght. Size определяет длину поля, а maxleght задаёт максимальное количество символов, которое может ввести пользователь.
Hidden - этот тип текстового поля браузер на отображает. Нужен он для скрытия от посетителя каких-либо данных.
Password - этот тип поля отображается аналогично текстовому, только все введённые в нём символы будут закрыты звёздочками, для того, чтобы никто не мог подсмотреть пароль, вводимый вами.
Checkbox - браузер отображает этот тип поля квадратом, в котором можно поставить флажок. По умолчанию value данного поля стоит ON, но если поставить флажок в это поле, то value примет значение checked.
Radio - несколько похоже на checkbox, но только одно из нескольких полей radio, в отличии от checkbox, может быть включено.
Submit - отображает кнопку, при нажатии на которую все данные из формы отправляются сценарию, указанному в атрибуте action тэга <form>.
Reset - при нажатии на эту кнопку, вся введённая информация в форму онулируется.
Тэги <textarea></textarea>
Тэг <textarea> определяет многострочную область ввода. Этот тэг имеет также несколько атрибутов. Вот пример: <textarea name="имя" rows="10" cols="20">Этот текст будет находится в области ввода, данного типа, пользователь может изменить этот текст</textarea> Атрибуты rows и cols определяют высоту и длину соответственно. "имя" - уникальное имя в пределах одной формы.
Тэги <select></select>
Эти тэги создают список, каждый из вариантов которого задаётся тэгом <option>. Тэг <select> может нести в себе атрибуты size, name и multiple. Думаю с size и name всё понятно, а вот c multiple, наверное не очень. Итак, этот атрибут задаёт режим при котором пользователь будет выбирать что-то из списка. Если этот атрибут присутствует, то пользователь может выбрать несколько значений из списка, а если же он опущен, то можно выбрать только одно значение.
Чтобы всё было более понятно, давайте рассмотрим всё на примерах:
Создаём страницу и пишем в неё данный код:
<html>
<head><title>Анкета</title>
</head>
<body>
<h3 align=center>Анкета</h3>
<form action=script.php method=post>
<input type=hidden name=hidden
value="Это скрытый текст">
<b>Введите пожалуйста пороль:</b>
<input name=pass type=password>
<b>Заполните следующие данные пожалуйста:</b><br>
Фамилия <input type=text size=14 name=fam><br>
Имя<input type=text size=14 name=name><br>
Отчество<input type=text size=14 name=ot>
<b>Сколько вы имеете судимостей:</b><br>
<select>
<option>10
<option>20
<option>30
</select><p>
<b>Сколько вам лет?</b><br>
<input name=1 type=radio name=1>От 1 до 10<br>
<input name=1 type=radio name=2>От 10 до 18<br>
<input name=1 type=radio name=3>От 18 до 30<br>
<input name=1 type=radio name=4>От 30 до 50<br>
<input name=1 type=radio name=5>От 50 до 100<br>
<input name=1 type=radio name=6>От 100 до 200<br><p>
<b>Наличие хронических заболеваний:</b>
<input type=checkbox><br><p>
<b>Особые примечания:</b><br>
<textarea name=texta rows=4 cols=30>
</textarea>
<input type=submit value=Всё> <input type=reset value=заново>
</form>
</body></html>
А вот чего получится:
HTML-формы и css.
В хтмл-формах также могут активно использоваться и css. Применение css значительно украшает форму, помогая вэбмастеру максимально приблизить её внешний вид к дизайну сайта. Итак, рассмотрим это на примере. Например мы хотим создать стильную панель поиска для сайта, для этого пишем в страницу такой код:
<form method="POST" action="search.php">
Поиск по сайту: <input type="text" name="whatdoreplace"
size="25" style='BORDER-RIGHT: #3E9EBB 1px solid; BORDER-TOP: #3E9EBB 1px solid;
BORDER-LEFT: #3E9EBB 1px solid; COLOR: #000000; BORDER-BOTTOM: #3E9EBB 1px
solid; BACKGROUND-COLOR: RED
'>
<INPUT TYPE=radio name=where value=foto >фото
<INPUT TYPE=radio name=where value=mp3>mp3
<input type="submit" value="поиск" name="search" style='BORDER-RIGHT: #3E9EBB
1px solid; BORDER-TOP: #3E9EBB 1px solid; BORDER-LEFT: #3E9EBB 1px solid; COLOR:
#F1F1F1; BORDER-BOTTOM: #3E9EBB 1px solid; BACKGROUND-COLOR: RED
'>
</FORM>
А вот результат:
Можете поэкспериментировать и сделать лучше - ваше право, я показал только принцип использования css в HTML-формах.
Итак, теперь вы можете создавать любые формы. Но, как вы уже поняли, форма это всего лишь способ передачи данных скрипту, и сама по себе она, разумеется, работать не будет. Теперь, когда Вы уже знаете как создавать формы, самое время начать изучать какой-нибудь язык программирования, иначе зачем всё это нужно. Но, как я уже обещал, я в этой статье говорить о каком-либо языке программирования я не буду.
6.07.2003 Xara
При создании своего собственного сайта нужно еще и позаботиться о его внешнем виде и удобной навигации. В этом поможет Xara Webstyle , текущая версия 3.1658; trial, $69) — мощный и, пожалуй, лучший из известных мне пакетов, обеспечивающий простое и быстрое создание различных баннеров, логотипов, узоров, линий, объемных надписей, всплывающих меню, кнопок, фоновых рисунков, маркеров для списков и проч.
Программа имеет очень удобный интерфейс и гибкие настройки при создании проекта, а потому подойдет и начинающему «оформителю», и опытному дизайнеру. Хотя ее интерфейс английский, это не будет помехой даже слабо знающему язык человеку.
Красиво оформленное меню, встречающее нас при первом запуске, предлагает на выбор одиннадцать подменю, которые, собственно, и содержат интересующие нас инструменты.
BannerAds — за этим пунктом скрывается, как несложно догадаться из названия, мастер по созданию баннеров. Первый шаг — выбор дизайна. Здесь на 18 страницах размещены 73 оригинальных почти готовых баннера различной тематики: от New music и до Selling house. Далее — заполнение заготовки текстом, выбор цвета для надписей и некоторых частей баннера. Также одним щелчком можно выбрать одну из 266 предложенных текстур для фона. Следующим шагом устанавливаем нужный размер и переходим к кнопке Save — сохранение созданного творения. Быстрый, несложный и, главное, эффективный процесс.
Легким движением руки возвращаемся на Start одноименной кнопкой и выбираем второй пункт — Logos (логотипы). Тут нас поджидают 39 шаблонов. При использовании символьных шрифтов они дают возможность создать практически неограниченное количество заметно отличающихся друг от друга логотипов. Пройдя все тот же несложный путь, встречаем в «Мастере создания» новый пункт — Shadow. Он добавляет некоторым элементам логотипа тень. Также кнопка Save тут обладает расширенным ассортиментом возможностей. Изображение можно сохранить в одном из трех форматов с нужным качеством, предварительно узнав его «вес», или просмотреть в браузере.
Примерно таким же способом можно создать вкладки в меню Headings (приготовлено около 258 заготовок различного дизайна) и маркеры в меню Bullets (всего 216 маркеров).
Dividers — это инструмент для изготовления разделителей. Хотя кое-что можно использовать и для украшения.
От дизайна переходим к цвету. Всевозможные оттенки сортируются четырьмя способами: от красного к зеленому, от синего к красному, от зеленого к синему и беспорядочно. На выбор представлены 166 линий-разделителей и лент.
Следующий пункт главного меню — Backgrounds. Здесь в четыре шага можно выбрать и сохранить фон для web-страницы (133 фоновых рисунка).
Не менее важный, но более интересный следующий пункт — 3DHeadings (создание объемного текста — например, для заголовков). По знакомым тропинкам (дизайн, цвет, текст, текстура и тень) подбираемся к дополнительным возможностям этого инструмента — изменение исключительно 3D-эффектов (кнопка Bevel). Глубина 3D-текста, округление краев, создание контурной надписи — все это можно сделать за считанные минуты.
Последний шаг перед сохранением — кнопка NavBars. О ее использовании я расскажу далее. Всего представлено 83 прекрасных шаблона.
Как же обойтись на сайте без кнопок? Xara Webstyle поможет и в этом. Включаем инструмент Buttons. Затратив пару минут, получаем желаемый результат. Сложностей особых при сознании кнопок возникнуть не должно, так как все шаги известны и испытаны. Среди 371 заготовок множество красивых и оригинальных.
Последний инструмент, на который стоит обратить свое внимание — NavBars&Menus. Очень занимательная и полезная вещица. Предназначена для создания всплывающих меню (удобная и эффектная навигация по сайту). Кто с этим ни разу не встречался, поясню. Это похоже на несколько кнопок «Пуск», расположенных горизонтально в строку или вертикально в столбик. Единственное отличие — выглядят они гораздо красивее. Начнем с дизайна: 126 пар меню, существенно отличающихся друг от друга, смогут удовлетворить самые строгие запросы дизайнера. Выбрав цвет и размер будущего меню, переходим к собственно его наполнению. В этом поможет кнопка NavBars. Здесь можно одним нажатием на Add добавить кнопки в меню, всплывающие подсказки, назначить адрес, открываемый при нажатии. Причем, глубина всплывающих меню неограниченна. Замете, что ранее для изготовления таких вещей требовались хорошие знания JavaScript, а теперь с этим справится даже начинающий юзер.
Немного приятных мелочей: Xara Webstyle позволяет сохранять проекты, фильтровать объекты по стилю и назначению, предварительно просматривать полученный результат в верхней части окна. Результат: имея огромные возможности и относительно небольшой размер (29.3 Мб), Xara Webstyle может претендовать на место главного помощника web-дизайнера.
11.07.2003 Почему так важен DOCTYPE
Вроде бы вы сделали все правильно, но ваш сайт почему-то не выглядит или не работает, как ожидалось, в последних версиях браузеров.
Вы написали правильный стандартный XHTML код и стандартный CSS. Вы воспользовались стандартной спецификацией для работы с DOM (Document Object Model), чтобы управлять динамическими элементами на странице. И все-таки, в броузерах, которые казалось бы сделаны с соблюдением именно этих стандартов, ваш сайт не работает. Скорей всего, ошибка кроется в неправильном заголовке DOCTYPE.
Эта небольшая статья расскажет вам о заголовках DOCTYPE, которые работают, а также объяснит практическое и теоретическое значение этого, казалось бы отвлеченного от реальности, тега.
Что такое DOCTYPE?
Согласно спецификациям HTML и XHTML тег DOCTYPE (что означает "объявление типа документа") сообщает валидатору, какую именно версию (X)HTML вы используете в своей странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и CSS не пройдут проверку валидатором.
Как было сказано в предыдущих статьях (а также в других статьях на других сайтах), тег DOCTYPE также важен для правильного отображения и работы страницы в броузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win).
Тег DOCTYPE, в атрибутах которого указывается полный URI (полный web-адрес), сообщает броузерам, что страницу нужно вывести с соблюдением определенного стандарта или подвида этого стандарта.
Если вы будете пользоваться неполным тегом DOCTYPE, устаревшим его видом, или вообще забудете про него, броузер перейдет в "загадочный" режим и будет исходить из предположения, что вы писали код страницы с ошибками и вольно отступали от стандартов, т.е. так, как писали в конце 90-ых годов.
В этом режиме броузер попытается разобрать вашу страницу по правилам обратной совместимости и выведет на экран, например, CSS так, как его вывел бы Internet Explorer 4-ой версии, а DOM будет работать так, как он работал именно в этом броузере (IE переключается в свой старый DOM, а Mozilla и Netscape 6 переключается вообще в бог знает что).
Понятно, что для вас эти выкрутасы не желательны. Но именно это вы и получите, если будете пользоваться неполным или неправильным тегом DOCTYPE. Данная статья попробует исправить эту вашу ошибку.
(Внимание: броузер Opera не играет по таким правилам; он всегда пытается отобразить страницу так, как если бы она соответствовала стандартам. Слава Опере! С другой стороны, Opera пока не полностью поддерживает стандарт W3C DOM, но работа над этим уже ведется.)
Где же взять правильный DOCTYPE?
Так как теги DOCTYPE чрезвычайно важны для работы Web-а по стандартам, и так как консорциум W3C является ведущей организацией, создающей стандарты для Web-а, следовало бы ожидать, что на сайте W3C будет представлен список всех вариантов тега DOCTYPE, и казалось бы эту информацию на сайте W3C можно найти быстро и просто в каком-то определенном разделе. Но это не так, по крайней мере на момент написания этой статьи.
W3.org - это не сайт со статьями как A List Apart, WebReference или Webmonkey. Он не создан в помощь web-дизайнерам, разработчикам и авторам сайтов, и он не занимается распространением новейшей информации и полезных советов. Это не его задача.
Да, иногда W3C публикуетсерии учебных статей, хотя большинство web-разработчиков об этом даже и не знает. Но в основном, сайт W3C содержит собрание предложений, проектов и Рекомендаций, которые написаны инженерами для инженеров. И когда я говорю об инженерах, я не имею в виду простых специалистов в области web-разработок, таких спецов, как вы и я. Я имею в виду инженеров, по сравнению с которыми мы выглядим полными болванами.
Я могу потратить весь день в поисках правильных тегов DOCTYPE на сайте w3.org, но не найду ни одной страницы, где они перечислены все вместе. Если же вам все-таки удастся найти какой-нибудь тег DOCTYPE (например, упоминаемый в какой-нибудь Рекомендации или Рабочем проекте), скорей всего окажется, что на вашем сайте он работать не будет.
По всему сайту W3C разбросаны теги DOCTYPE, где в атрибутах отсутствует URI, и теги DOCTYPE, содержащие в атрибутах относительный URI, связанный с документами, находящимися на том же самом сайте W3C. Если вы возьмете этот тег с сайта W3C, перенесете его на свой сайт и вставите в свои страницы, относительный URI будет указывать на несуществующие на вашем сайте документы, следовательно напрасно пропадет ваш труд и усилия броузера.
Например, на многих сайтах можно встретить в страницах следующий вариант тега DOCTYPE, который был без всяких изменений перенесен с сайта w3.org:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
Посмотрите на последнюю часть тега
DOCTYPE ("DTD/xhtml1-strict.dtd"). Обратите
внимание, что это относительная ссылка на документ,
расположенный на сайте W3C. Так как целевой документ
находится на сайте W3C, а не на вашем, этот URI для
броузера бесполезен.
А выглядеть DOCTYPE должен вот так:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "
Обратите внимание, что этот вариант DOCTYPE содержит в конце полный вариант URI. А так как тег указывает на правильное расположение документа, броузер знает, где этот документ надо найти в сети, и следовательно выведет вашу страницу в том стандарте, который вы упомянули в DOCTYPE.
Правильные варианты тега DOCTYPE
Итак, каким же вариантом тега DOCTYPE надо пользоваться? Очень хорошо, что вы задали этот вопрос. Ниже перечислены полные варианты тега DOCTYPE для различных нужд:
Стандарт HTML 4.01 Strict (строгий), Transitional (переходный), Frameset (с фреймами)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Frameset//EN" "
Стандарт XHTML 1.0 Strict (строгий), Transitional (переходный), Frameset (с фреймами)
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Frameset//EN"
Стандарт XHTML 1.1 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.1//EN"
Что дальше?
Как вы можете внести свой вклад в распространение стандартов в Web? Перво-наперво, поместите в закладки данную страницу (либо просто сохраните ее на своем компьютере), а также проверьте, вставляет ли ваш web-редакторв в ваши страницы тег DOCTYPE, а если вставляет, - правильный ли вариант тега он использует?
Многие разработчики ПО просто скопировали неполные варианты тега DOCTYPE с сайта W3C в свои программы. И в результате: вы полагаетесь на программу, которая вставляет неправильный вариант тега, броузер впадает в "загадочный" режим, а вы безуспешно бьетесь над загадкой, почему ваши страницы не работают, как надо.
Стоит также написать тем ребятам, что делают ваш любимый web-редактор, и показать им, как выглядит правильный тег DOCTYPE, после чего, вежливо попросить их внести изменения в новую версию программы. (В некоторых случаях, вы сможете даже внести изменения в программу сами.)
В ближайшем будущем
У нас есть все причины надеяться, что W3C скоро выложит полный, точный и удобный список всех вариантов тега DOCTYPE на своем сайте, а также опубликует другую важную информацию. И эту информацию легко будет найти. К стати, в эту статью внес свой вклад Карл Дабост (Karl Dubost) - менеджер W3C по обеспечению качества (Conformance Manager of W3C's Quality Assurance team).
Кроме того, проект The Web Standards Project скоро будет переделан (очень скоро), и на нем тоже можно будет найти эту информацию.
Но так как каждый день создаются и выпускаются в сеть все новые и новые сайты, эта информация вам нужна уже сейчас, так вот она - пользуйтесь.
Создание сайта. Звучит заманчиво, но стоит только начать что-то делать, как сразу понимаешь, что ничего у тебя не выйдет. В чем же дело? А дело в том, что популярные среди гуру программы по созданию web-страниц сложны в изучении и непонятны обычному пользователю, который даже не знает, как программировать на HTML. К счастью, все не так плохо.
NetObjects Fusion 7 — это именно та программа, которая поможет быстро создать качественный web-сайт. Я просто уверен, что данный продукт вам понравится :-). Что ж, перейду непосредственно к описанию. Начну с системных требований: Pentium 133 (желательно Pentium 200); Microsoft Windows 95—XP; 100 Мб на жестом диске (для полной функциональности); 32 или 64 Мб ОЗУ; Microsoft Internet Explorer 5.5 или выше.
Итак, запускаем программу. При загрузке вас встретит Site Wizard, что-то вроде мастера по созданию сайтов, в котором можно выбрать структуру вашего будущего web-проекта: Personal (создание домашней страницы) и Business (для тех, кто занимается бизнесом). Business в свою очередь делиться на Products (для тех людей, кто занимается продажей каких-либо товаров), Services (если вы предоставляете услуги), Organizations (для людей, которые хотят сделать web-сайт о своей организации). Можно также отказаться от создания сайта с помощью мастера и выбрать пункт меню File > New Site > Blank Site, т.е. создать чистую страницу. После заполнения предложенной мастером анкеты (адрес, Ф.И.О. и прочее) программа автоматически разместит указанную вами информацию на страницах создаваемого проекта. Лично я создавал свой web-сайт мастером, а потом редактировал его под себя, поскольку все поля, размещенные мастером на страницах, были на английском языке. Но прежде чем редактировать только что созданный сайт советую сохранить его копию, так как она является готовым англоязычным «зеркалом» проекта. Далее вам предстоит выбрать тип оформления из восьми примеров, причем каждый из них делится на три цветовых варианта (всего стилей оформления доступно 43, чего не встретишь ни в одном web-редакторе). Теперь программа предлагает сохранить сайт, который был создан на основании собранной мастером информации. Конечно, можно сразу же опубликовать данный web-ресурс в Интернете, но желательно его предварительно отредактировать.
Перейдем к главной панели, на которой расположены следующие кнопки: Online (интернет-ресурсы, рекомендуемые для посещения в случае, если вам необходимо больше стилей оформления или картинок, выбор последних отредактированных сайтов), Site (карта сайта), Page (редактирование страницы), Style (стиль оформления), Assets (список всех файлов и ссылок, которые есть на странице), Publish (публикация плодов ваших усилий в Интернете). С помощью NetObjects Fusion 7 вы легко сможете добавлять к страницам элементы Flash, Active X, Java, фотогалереи и множество других прибамбасов. Встречались ли вы когда-либо с проблемой добавления на сайт его карты? Наверное, большинству из вас это знакомо. Так вот, с помощью NetObjects Fusion 7 вы не будете просиживать за компьютером дни и ночи, делая обыкновенную карту сайта, а просто щелкните мышкой по кнопке Site mapper и укажете место для ее размещения. На мой взгляд, это очень удобно. Также каждый пользователь может без особых усилий создать меню для своего сайта на JavaScript’е — элемент, который довольно сложно внедрить в сайт при помощи обычных HTML-редакторов. Без особых усилий web-дизайнер может добавить в страничку ссылку, кнопки любого типа, бегущую строку — последняя легко делается при помощи нескольких нажатий мышки, а выглядит очень эффектно. Fusion 7 позволяет подсчитать количество введенных пользователем символов, абзацев и прочую полезную информацию.
Данный программный продукт имеет очень много уникальных преимуществ, выгодно отличающих его от прочих подобных программ. Среди них следует отметить восстановление сайта после ошибки или выключения электропитания. Например, ваш компьютер завис во время работы с программой , а вы не успели его сохранить. Не волнуйтесь, при поставарийном открытии вашего творения программа полностью восстановит его. Собственный формат программы позволяет сохранить web-сайт в одном файле (простой и профессиональный подход, не так ли?), что полезно в том случае, если вам хочется отнести сайт другу или кому-то еще, — для оценки или просто похвастаться :-).
Также стоит отметить такие возможности NetObjects Fusion 7 как создание слайд-шоу, всплывающих окон, защиту от печати, вставку мета-тэгов. Уровень совместимости поможет вам настроить работу вашего сайта даже под Linux и MacOS. В программе предусмотрена проверка правописания — довольно редкая функция в программах для web-дизайна. В отличие от многих тяжеловесных пакетов, NetObjects Fusion 7 не оставляет в коде страницы «мусора», замедляющего ее загрузку. Если в чем-то вам будет сложно разобраться, то в комплекте с программой идут: документация на английском языке размером около 20 Мб, прочитав которую, вам наверняка все станет понятно; пример сайта, созданного этим программным продуктом; почти 60 примеров оформления фотогалерей с готовыми фотографиями.
Итак, давайте оценим преимущества NetObjects Fusion 7:
Недостаток, по сути, один — программа не бесплатная (от 140 у.е). Впрочем, совершенно полнофункциональную trial-версию можно загрузить.
Как сделать свой сайт. Этапы создания своего сайта.
Прежде, чем приступить к созданию своего сайта, необходимо убедиться в том, что Ваше желание сделать свой сайт намного сильнее желания выспаться. Вековой опыт веб-мастеров показывает, что темное время суток самое благоприятное для создания сайта. Поэтому, если Вы готовы проводить ночь, стуча по клавишам и не можете уснуть в предвкушении толпы посетителей на Ваш сайт, то можно начинать делать свой сайт.
Процесс создания сайта носит многосторонний характер. Для того, чтобы сделать сайт приходится решать различные задачи. Читатель должен понять, что создание сайта это не только дизайн и HTML верстка, это еще и программирование, подбор информационного наполнение, реклама (раскрутка) сайта.
Работу по созданию своего сайта, условно можно разбить на несколько этапов.
Насколько ответственно Вы подойдете к выполнению каждого из этапов, и будет определять качество и посещаемость Вашего сайта. Какие же задачи приходится решать на каждом из этих этапов ? Подготовительный этап создания своего сайта.
На этом этапе Вам необходимо определиться с тематикой, которой будет посвящен Ваш сайт, продумать информационное наполнение и подобрать материалы, которые будут опубликованы. Для этого возьмите ручку и напишите список разделов Вашего будущего сайта, затем продумайте и подготовьте материалы для каждого раздела. На этом этапе может выясниться, что раздел окажется всего один, да и тот будет состоять с одного предложения. Подумайте, а интересен ли такой сайт кому то, кроме Вас. Если ответ отрицательный, то к остальным этапам переходить еще рано. Но вот у Вас уже набралось несколько разделов с интересной информацией, теперь самое время перейти к дизайну.
Дизайн вашего сайта это его лицо. Это один из самых интересных и творческих этапов. На данном этапе Вы должны определиться, как будет выглядеть Ваш сайт в целом, и какие графические элементы Вам нужны. Затем Вам придется нарисовать все необходимые графические элементы своего сайта, но можно воспользоваться и уже созданными рисунками из различных клипартов. Вам также необходимо будет определиться со структурой каждой страницы и решить какая цветовая схема наиболее подходит для вашего сайта. Если с дизайном Вы уже определились, то можно переходить к следующему этапу.
В принципе данный этап может и отсутствовать. Если Вы не планируете на своем сайте не каких досок объявлений, гостевых книг, форумов или других элементов придающих Вашему сайту интерактивность, то данный этап Вы можете смело пропускать. Ну а если Вашему сайту все же нужны элементы интерактивности, тогда придется изучить скриптовый язык, например PHP или Perl. Необходимо отметить, что данный этап очень тесно связан с следующим, HTML версткой, и выделяется он достаточно условно. И вот вы осилили web-программирование или пропустили данный этап и теперь готовы взяться за HTML верстку своего сайта. HTML верстка сайта.
Теперь Вам предстоит соединить результаты своих трудов, полученные на всех предыдущих этапах. И здесь Вам не обойтись без знания того, что является основой из основ любого сайта, в том числе и Вашего, это HTML. HTML - это специальный язык разметки текстов, созданный специально для WWW страничек. При помощи данного языка Вы сможете установить графические элементы на Ваши странички, наполнить их нужной информацией, а также связать их между собой гиперссылками. Если Вам удалось пройти все выше перечисленные этапы создания своего сайта, то на текущий момент Вы должны располагать набором HTML страничек, связанных между собой гиперссылками и кучей (или не кучей) графических элементов в виде файлов с расширением .gif и .jpeg. Настал момент разместить все это в сети.
Данный этап не менее важен чем остальные. Прежде чем решать технические аспекты по загрузке своего сайта, Вам прийдется решить такие задачи как выбор хостинга (выбор сервера в сети на котором будет располагаться Ваш сайт) и выбор доменного имени для своего сайта. Сейчас достаточно много ресурсов в сети предоставляющих услуги хостинга, среди них есть и бесплатные, правда бесплатные понятие условное, в данном случае под бесплатным подразумевается, что с Вас не берут денег. Но как известно бесплатным бывает только сыр в мышеловке. Поэтому, если Вы выбираете бесплатный хостинг, то будте готовы к тому, что на всех страничках вашего сайта будет присутствовать баннер, вставляемый автоматически сервером. Существует и еще один недостаток бесплатного хостинга, в большинстве случаев Вам не будет предоставлена возможность использовать свои скрипты на PHP или Perl. Кроме недостатков существует и один положительный момент, Вам не прийдется отдельно регистрировать доменное имя, Вы его получите в виде ваше_назв.hut.ru или ваше_назв.narod.ru. Но вот хостинг Вами выбран, доменное имя зарегистрировано, теперь необходимо все Ваши странички загрузить на сервер. Для этого понадобится FTP клиент (СuteFTP, FAR или любой другой). Указываете адрес FTP сервера, свой логин и пароль полученные при регистрации на сервере, на котором предоставили Вам хостинг, далее копируете (загружаете) все файлы из которых состоит Ваш сайт на сервер. После завершения этой операции сайт созданный Вами станет доступным в сети. Но это еще не все. Дело в том, что для того, чтобы Ваш сайт посещал кто-то кроме Вас, придется приложить усилия по раскрутке (рекламе) своего сайта.
Раскрутка и администрирование (поддержка) сайта.
Данный этап в принципе не имеет окончания. Для того, чтобы на Ваш сайт приходили посетители Вам придется постоянно прилагать усилия по его рекламе, а также регулярно вносить изменения и пополнять свежей информацией. Способов раскрутки сайтов достаточно много и все они обладают своими плюсами и минусами, и применять их желательно комплексно, не зацикливаясь на одном. Только при таком подходе можно ожидать притока посетителей на свой сайт. Вот основные способы рекламы в сети: регистрация в поисковых системах, каталогах, досках объявлений; участие в баннерообменных сетях; обмен ссылками с другими сайтами; создание собственной рассылки.
Вот и все на текущий момент. Я понимаю, что данная статья не дала ответов на многие вопросы, а только увеличила их количество. Но я надеюсь, что мне удалось показать, насколько сложен и многогранен процесс создания и поддержки сайта. И если Вас не пугают все те задачи, которые придется решать при создании своего сайта, то можете приступать к этому творческому процессу.
Поисковые сервера всегда перед индексацией вашего ресурса ищут в корневом каталоге вашего домена файл с именем "robots.txt" (www.mydomain.com/robots.txt). Этот файл сообщает роботам (паукам-индексаторам), какие файлы они могут индексировать, а какие нет.
Формат файла robots.txt - особый. Он состоит из записей. Каждая запись состоит из двух полей: строки с названием клиентского приложения (user-agent), и одной или нескольких строк, начинающихся с директивы Disallow:
<Поле> ":" <значение>
Robots.txt должен создаваться в текстовом формате Unix. Большинство хороших текстовых редакторов уже умеют превращать символы перевода строки Windows в Unix. Либо ваш FTP-клиент должен уметь это делать. Для редактирования не пытайтесь пользоваться HTML-редактором, особенно таким, который не имеет текстового режима отображения кода.
Поле User-agent
Строка User-agent содержит название робота. Например:
User-agent: googlebot
Если вы обращаетесь ко всем роботам, вы можете использовать символ подстановки "*":
User-agent: *
Названия роботов вы можете найти в логах вашего веб-сервера. Для этого выберите только запросы к файлу robots.txt. большинство поисковых серверов присваивают короткие имена своим паукам-индексаторам.
Поле Disallow:
Вторая часть записи состоит из строк Disallow. Эти строки - директивы для данного робота. Они сообщают роботу какие файлы и/или каталоги роботу неразрешено индексировать. Например следующая директива запрещает паукам индексировать файл email.htm:
Disallow: email.htm
Директива может содержать и название каталога:
Disallow: /cgi-bin/
Эта директива запрещает паукам-индексаторам лезть в каталог "cgi-bin".
В директивах Disallow могут также использоваться и символы подстановки. Стандарт диктует, что директива /bob запретит паукам индексировать и /bob.html и /bob/index.html.
Если директива Disallow будет пустой, это значит, что робот может индексировать ВСЕ файлы. Как минимум одна директива Disallow должна присутствовать для каждого поля User-agent, чтобы robots.txt считался верным. Полностью пустой robots.txt означает то же самое, как если бы его не было вообще.
Пробелы и комментарии
Любая строка в robots.txt, начинающаяся с #, считается комментарием. Стандарт разрешает использовать комментарии в конце строк с директивами, но это считается плохим стилем:
Disallow: bob #comment
Некоторые пауки не смогут правильно разобрать данную строку и вместо этого поймут ее как запрет на индексацию ресурсов bob#comment. Мораль такова, что комментарии должны быть на отдельной строке.
Пробел в начале строки разрешается, но не рекомендуется.
Disallow: bob #comment
Примеры
Следующая директива разрешает всем роботам индексировать все ресурсы сайта, так как используется символ подстановки "*".
User-agent: *
Disallow:
Эта директива запрещает всем роботам это делать:
User-agent: *
Disallow: /
Данная директива запрещает всем роботам заходить в кат