В рецензиях к «Проекту «Архипелаг»» многие мне отвечали, что мы-де чайники, где нам сделать сайт…
Это ОШИБКА! Я – ЧАЙНИК, во всяком случае, в вопросах сайтостроительства, но могу слепить сайт за один вечер, и любой «чайник» это может сделать, если только действительно этого захочет.
Правда, на понимание этого у меня ушло полгода, то есть сайт я слепила довольно быстро, а потом еще некоторое время считала его «отстоем», пока не побродила по сети и не выяснила, что есть много худшие варианты. Еще некоторое время ушло на описание простой и действенной технологии, отбор характерных ошибок, обобщение и т.д. Пусть эта технология будет новогодним подарком всем моим читателям. Она не охватывает и десятой части того, что можно натворить в веб-дизайне, но проста и легка в применении, доступна и неутомительна для всех.
ЧЕГО НЕ НАДО ДЕЛАТЬ НА ПЕРВЫХ ПОРАХ.
1) Не стройте сайт, если не знаете, для чего он вам нужен. Если единственное ваше желание – «шоб було» или «куда все, туда и я» - лучше сходить за пивком и пристроиться у экрана телевизора – так вы скорее примкнете к наибольшему числу ваших сограждан, составляющих армию ТЕХ, КОМУ НИЧЕГО НЕ НАДО.
2) Не стройте сайт, если не знаете, чем будете его наполнять. Если бы вы знали, сколько, к примеру, «на народе», таких сайтов, что съедают простые и красивые имена, а состоят из одной страницы, или вообще не из чего не состоят. Будьте людьми! НЕ УВЕЛИЧИВАЙТЕ КОЛИЧЕСТВО МУСОРА.
3) Не пользуйтесь визардами и программами, работающими по принципу: «что вижу, то строю, и что строю – то вижу». У каждой из них есть свои подводные камни, а, не зная как следует языка, вы моментально сядете на мель. Пусть ваш сайт будет ПРОЩЕ, НО БЕЗ СООБЩЕНИЙ ОБ ОШИБКАХ.
4) Не считайте себя хуже всех, если что-то не получилось с первого раза – даже ассы-программеры лепят порой горбатого, а вам сам бог велел. Не бойтесь начинать с малого – «ПРОСТЕНЬКИЕ» САЙТЫ часто выглядят в глазах рядового интернет-пилигрима НИЧУТЬ НЕ ХУЖЕ «НАВОРОЧЕННЫХ».
А ЧТО СТОИТ СДЕЛАТЬ?
1) Вооружиться блокнотом и ручкой, или простым карандашом – записывать то, что постоянно должно быть перед глазами.
2) Проверить, есть ли у вас в компе Word Pad, или любой другой текстовой редактор кроме красавца «Microsoft Word», который все норовит переделать по-своему. Ну, и, естественно, какой-нибудь обозреватель, пользуясь которым, вы сейчас читаете эту статью.
3) Заварить чайку или кофейку, включить под сурдинку любимую музыку и послать всех куда подальше до особого распоряжения. Этот вечер принадлежит вам и только вам.
НАЧИНАЕМ ТВОРИТЬ
1) Берем карандаш и начинаем рисовать прямоугольнички. Если не хотите потом запутаться в своих творениях, это – единственный выход. Первый из них назовем – «Главная страница». От него пойдут стрелки к разделам. «Разделы» - второй уровень. К примеру, на «Главной» написано – «Это Я, любимый», а разделы – «Моя проза», «Мои стихи», «Мои увлечения», «Мои фотки», «Мои ссылки». Еще ниже – третий уровень: «Бред сивой кобылы», «Коровья смерть», «Месть Муму» - стрелки от раздела «Проза»; «Кружатся шарьки», «Пошли бы вы с миром», «Кому на Руси выть» - стрелки от «Стихов»; «Охота» и «Клуб кинологов» - относятся к «Моим увлечениям»; «Я и мой кабысдох», «Я с трофеями», «Я и президент» - к «Моим фоткам». «Мои ссылки» остаются без третьего уровня.
2) Создаем в «Моих документах» папку под названием «Сайт» или как-то иначе называющуюся. Далее – в этой папке весьма желательно создать еще одну-две, для рисунков и для текстов.
3) Придумываем сайту имя: логин – в латинице и название – по-русски, например сайт oxotnik, «Вольный стрелок». Заходим туда, где место под него нарезают задаром и регистрируемся. Можно попробовать на narod.ru, или boom.ru, или где еще сподобитесь. Просто заходите туда и аккуратно заполняете форму. Потом заходите на зарезервированное место и создаете папки под теми же названиями, что и «у себя дома», то есть в папке «Сайт» на домашнем компьютере. Внимание! Все названия – что файлов, что папок – должны быть на латинице и без пробелов – тогда жить легче будет.
НУ, ВСЕ, ПРЕДВАРИТЕЛЬНАЯ РАБОТА СДЕЛАНА.
ТЕПЕРЬ СОЗДАДИМ СВОЮ ПЕРВУЮ ВЕБ-СТРАНИЦУ
(Это не требует вашего присутствия в сети.)
1) Откроем Word Pad и напишем:
<html>
</html>
Что это значит? Это значит, что мы определили начало(<html>) и конец (</html>) веб-страницы. Также он указывает браузеру, что документ написан на языке HTML – разметки гипертекста.
2) У каждого зверя есть голова и тело – есть это и у веб-страницы
Напишем:
<head>
</head>
и
<body>
</body>
Это будут голова и тело страницы.
3) Так, написали все это, теперь – сохраняем файл под названием index (так должна называться главная страница сайта) с расширением htm или html. Это уже – веб-страница и ее можно открыть в любом браузере. Что? Абсолютно белый, чистый лист? А вы что хотели? Сейчас будем его наполнять содержимым.
4) Как появится название у вашего сайта? Да так же, как и у всех остальных.
Сразу после <head> впишите: <title> Вольный стрелок </title>. Сохраните. Обновите страничку в браузере. Взгляните – сверху появился ваш заголовок. Когда вы зарегистрируете свой сайт в поисковиках, по этой фразе можно будет найти вашу страницу в первую голову.
5) Как сделать, чтобы то же самое появилось и на нашем белом листе? Надо вписать заголовок между тегами <h1> и </h1> (теги – это такие штучки в угловых скобках, не отображающиеся на веб-странице при просмотре ее в браузере, но определяющие ее внешний вид). Вписываем: <h1> Вольный стрелок </h1>. Сохраняем в редакторе, обновляем страницу в браузере. Все видно? Впоследствии вы можете вполне отказаться от этих заголовков, заменив их картинками, или вообще написать название на бакграунде, но сейчас – проще именно так.
6) Что еще? А, да, приветствие посетителю сайта. Набиваете его где-нибудь между тегами <body> </body>. Сохраняете – обновляете. Все видно?
7) Чего бы еще впихнуть… А, свою морду… Желательно, с трофеями. Находим подходящую фотку, сканируем, переводим в формат JPG (один из самых «сжатых») и запихиваем в папку рисунков (к примеру, images ). Перед или после текста приветствия вписываем строку: <img src="images/helga.jpg" width=500 border=0> Что это все означает? img src – что вставляется рисунок, images – название папки, где он лежит, helga.jpg – название самого рисунка, width=500 – его ширина в пикселях (весьма желательно задавать ширину или высоту, чтоб быстрее грузилось), border=0 – рисунок без рамки. Можете, конечно, задать и ее, но – вам что, так хочется себя в траурной рамке узреть? Странно…
8) Тэк… Сохранили – обновили, себя родного увидели. Чего же еще не хватает? А-ааа, ссылок на другие страницы… причем – ссылок в удобном месте. Выстраивать их по очереди – можно, но не нужно. Сделаем красиво сразу!
Значит, надо слепить таблицу. Она-то и разделит всю вашу страничку на области, которые не будут друг другу мешать. Пишем – сразу после тега <body>:
<table width="100%" border="0">
</table>
Это значит: таблица, занимает всю страницу, рамки нет.
Пусть в ней будет одна строка и много столбцов – столько, сколько у нас будет ссылок.
Пишем между тегами
<table width="100%" border="0">
</table>
такую вещь:
<tr>
<td width="18%">
</td>
</tr>
Это значит - <tr>- вставили строку, <td> - вставили столбец, width="18%" – ширина столбца в процентах от общей длины. Стоит задать, если вы не хотите, чтобы у вас один столбец был как слон, а второй – как мышка. Можно поделить 100% на количество вставляемых ссылок и задать именно такой процент. Если получается слишком маленький процент – придется ссылки впихнуть в две строки.
</td>
</tr>
Это – мы закрыли теги.
Sic! Теги открывающие и закрывающие должны идти в таком порядке: <тег1><тег2><тег3> </тег3></тег2></тег1>. А то – фигня получится.
Если у вас пять будет ссылок, то таблица должна выглядеть примерно так:
<table width="100%" border="0">
<tr>
<td width="20%"> ссылка 1</td>
</td>
<td width="20%"> ссылка 2</td>
</td>
<td width="20%"> ссылка 3</td>
</td>
<td width="20%"> ссылка 4</td>
</td>
<td > ссылка 5</td>
</td>
</tr>
</table>
9) Сохранили – обновили. А где ссылки? А вот где!
<a href="1h.htm">Моя проза </a>,
<a href="2h.htm"> Мои стихи </a>,
<a href="3h.htm"> Мои увлечения</a>,
<a href="4h.htm"> Мои фотки </a>,
<a href="5h.htm"> Мои ссылки </a>.
Что это значит? a href значит: «пошли вы», ="1h.htm" – куда именно, где 1h.htm – название файла, а кавычки нужны для непонятливых браузеров. Вставляем эти ссылки на место слов Ссылка 1 (2, 3…) и смотрим, что получилось. Но, конечно, сперва - сохранили – обновили.
Ссылки есть! Но куда они ведут? Там же ничего нет! Конечно, нет. Вы же еще не создали этих страниц! Но вы их создадите. Аналогично Главной страничке – и в этом нет ничего сложного. Только пока подождите – мы еще не получили того, чего хотели. Ибо СТРАНИЦА ВЫГЛЯДИТ крайне НЕОПРЯТНО и требует дизайна.
КРАСОТЫ ЭПИЧЕСКИХ МАСШТАБОВ мы сделаем на нашей страничке ЗАВТРА. А пока – то, что вышло, можно увидеть по этому адресу:
http://www.xorxoy.narod.ru/oxotnik.html
Скопируйте и перенесите в строку браузера, нажмите Enter…
Если хотите сверить с тем, что получилось у вас, нажмите следующую последовательность в меню браузера: Вид – В виде HTML.
Желаю удачи!
Ольга.