Интернет – легко и просто! — страница 10 из 22

Создание собственного сайта

– Создание.

– Размещение.

– Раскрутка.

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

Организация сайта сводится к трем основным задачам.

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

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

3. Раскрутка. Ваш доступный населению всей планеты сайт может вообще никто не посетить лишь по одной простой причине – о нем попросту никто не будет знать. Чтобы повысить посещаемость, необходимо его раскрутить.

Рассмотрим подробнее каждый из этих пунктов.

Создание

Прежде чем приступить непосредственно к формированию веб-страниц, необходимо подготовить содержимое будущего сайта (текст, изображения и пр.). Ведь согласитесь, было бы глупо создавать сайт ни о чем. Поэтому будем считать, что вся необходимая для наполнения веб-страниц информация уже есть. Осталось отформатировать ее, сделать удобочитаемой, снабдить иллюстрациями и украсить, то есть привести в божеский вид. Все это и многое другое умеет важнейший во Всемирной паутине инструмент – HTML.

Существует множество разнообразных редакторов для создания HTML-страниц. Всех их можно разделить на две основные категории.

– Программы, работающие по методу WYSIWYG (What You See Is What You Get) – что видишь, то и получишь. Они автоматически вставляют все необходимые служебные слова (теги) в исходный файл. С помощью данных программ можно сотворить неплохой сайт, не имея никакого представления о четырех странных буквах – HTML. Создание сайта в данном случае напоминает сборку конструктора – все просто, наглядно и интуитивно понятно.

– Обычные текстовые редакторы (в частности, стандартный Блокнот). В данном случае не обойтись без знания синтаксиса языка HTML. Работа будет рутинной, отдаленно напоминающей программирование.

Какой же дорогой пойдем мы? А вот и неверно! Первый способ пригодится в дальнейшей повседневной жизни, а для обучения и понятия сути структуры веб-страницы как нельзя лучше подойдет именно второй. Ведь не зная арифметики, как ни крути, никогда не станешь настоящим профессором.

HTML

Данная книга не претендует на роль справочника или подробного учебника по HTML. Если вы хотите изучить этот язык детально, то для этих целей существуют специальные издания (в магазинах среди других компьютерных книг они выделяются внушительным объемом). В нашем случае целью является знакомство с данным языком, приобретение основных навыков для начала работы с ним и дальнейшего совершенствования. Повторю, что HTML (HyperText Markup Language) – это язык разметки гипертекста. Заметьте, не язык программирования, а язык разметки (то есть программирования, собственно, никакого и нет)! В HTML происходит просто добавление к текстовому файлу тегов – специальных служебных слов, заключенных в угловые скобки (символы < и >). Большинство тегов являются парными и влияют на все то, что заключено между открывающими и закрывающими тегами. Закрывающий тег отличается от открывающего наличием слэша (например,

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

Обязательные теги

Все HTML-документы имеют одну и ту же структуру, основу которой составляют обязательные теги. Откройте Блокнот и введите следующий текст:

Пример простейшего HTML-документа

Добро пожаловать на мою первую веб-страницу

Теперь сохраните введенный текст как файл с расширением НТМ и откройте его с помощью браузера. Вот вы уже и научились создавать простейшую веб-страницу!

Тег является признаком того, что данный текстовый файл является HTML-документом. Он сигнализирует браузеру о том, что далее ему необходимо будет обрабатывать другие теги. Любая веб-страница начинается с тега , им же и заканчивается.

Ter применяется для задания заголовка документа. Текст, заключенный между данными тегами, будет выводиться в строке заголовка браузера.</p><p>Информация, помещенная между тегами <BODY> и </BODY>, является «телом» документа. Она выводится непосредственно в рабочей области браузера.</p><p>В общем случае у веб-документа есть также и «голова», ограничивающаяся тегами <HEAD> и </HEAD>. Информация, располагающаяся в этом разделе документа, является служебной и сообщает браузеру дополнительные данные о документе, стиль страницы, взаимосвязь с другими элементами и т. д.</p><p>Далее будем работать исключительно с «телом» документа.</p><h3 id='127'><span>Форматирование текста</span></h3><p>Для чего нужно форматирование? Попробуйте скопировать в «тело» документа произвольный текст и посмотрите на результат. Понравилось? Вся информация идет сплошным текстом: без заголовков, переносов, делений на абзацы и т. д. Чтобы сделать документ удобочитаемым и привести содержимое в порядок, следует прибегнуть к форматированию.</p><p><b>Заголовки и подзаголовки. </b>Сначала необходимо определить заголовки. Язык HTML позволяет оперировать шестью разнообразными типами. Первый заголовок – самый главный, самый большой и жирный, а каждый последующий – поменьше и похилее.</p><p>Первый заголовок обозначается тегом <Н1>, второй – <Н2> и т. д. Пример заголовка третьего уровня:</p><div class='cite'><p><НЗ>Текст заголовка</НЗ></p></div><p><b>Выравнивание абзацев</b>. Операции с отдельными абзацами текста производятся с помощью тега <Р>:</p><div class='cite'><p><Р>текст абзаца</Р></p></div><p>Абзацы можно выравнивать по центру страницы:</p><div class='cite'><p><Р ALIGN="CENTER">TЕKCT абзаца</Р></p></div><p>а также по левому:</p><div class='cite'><p><Р ALIGN="LEFT">TЕKCT абзаца</Р></p></div><p>по правому:</p><div class='cite'><p><Р ALIGN="RIGHT">TЕKCT абзаца</Р></p></div><p>или по обоим краям:</p><div class='cite'><p><Р ALIGN="JUSTIFY">TЕKCT абзаца</Р></p></div><p><b>Размер и стиль шрифта.</b> Размер шрифта можно задавать с помощью тега <FONT>, изменяя его параметр SIZE. Чем больше значение этого параметра, тем больше размер символов текста:</p><div class='cite'><p><F0NT SIZE="+6">большой текст</FONT></p><p><F0NT SIZE="-2">маленький текст</FONT></p></div><p>Стиль шрифта устанавливается с помощью следующих тегов:</p><div class='cite'><p><В>полужирный текст</В></p><p><I>курсивный текст</I></p><p><U>подчеркнутый текст</U></p></div><p>Данные теги можно применять и в совокупности:</p><div class='cite'><p><i><u>курсивный и подчеркнутый текст</u></i></p></div><p><b>Списки.</b> Списки подразделяются на нумерованные и маркированные. Для создания нумерованного списка используются следующие теги:</p><div class='cite'><p><0L></p><p><LI>Первый элемент</p><p><LI>Второй элемент</p><p></0L></p><p>Для организации маркированного списка применяется такая конструкция:</p></div><div class='cite'><p><UL></p><p><LI>Первый элемент</p><p><LI>Второй элемент</p><p></UL></p></div><p>Списки можно вкладывать друг в друга для организации более сложных, вложенных списков:</p><div class='cite'><p><0L></p><p><LI>Первый элемент</p><p><UL></p><p><LI>Первый элемент второго уровня</p><p><LI>Второй элемент второго уровня</p><p></UL></p><p><LI>Второй элемент</p><p></0L></p></div><p><b>Принудительный перенос.</b> Для продолжения текста с новой строки существует тег <BR>:</p><div class='cite'><p>…какой-то текст. <ВР>Этот текст уже с новой строки…</p></div><p>Теги <PRE></PRE> позволяют выводить предварительно отформатированный текст, с точностью до пробелов и переносов.</p><p>Попробуем объединить все, что мы узнали о форматировании текста.</p><div class='cite'><p><HTML></p><p><TITLE></p><p>Примеры форматирования текста</p><p>

<Н1>Заголовок 1

<НЗ>Заголовок 3

<Н5>Заголовок 5

<Р ALIGN="CENTER>

Полужирный текст, выровненный по центру

<Р ALIGN="LEFT">

Курсивный текст, выровненный по левому краю

<Р ALIGN="RIGHT" XU>

Подчеркнутый текст, выровненный по правому краю

пример вложенного списка

<0L>

<И>Элемент списка первого уровня

  • Элемент списка первого уровня

    Теперь посмотрим на результат в браузере (рис. 6.1).



    Рис. 6.1. Форматирование текста

    Цвета

    Помимо манипуляций с текстом, HTML позволяет изменять цвета элементов вебстраницы. Цвета в HTML обозначаются в шестнадцатеричном виде.

    Для справки: если в десятичной системе каждая цифра числа находится в пределах от 0 до 9, то в шестнадцатеричной – от 0 до F (после 9 идет А, затем В, С, D, Е и F), то есть числу 16 соответствует F, a 17—10.

    Так, белому цвету в HTML соответствует код FFFFFF, черному – 000000, а между ними находится более 16 млн других цветов.

    Цвет фона устанавливается с помощью параметра BGCOLOR в обязательном теге . По умолчанию фон белый.

    Чтобы установить, к примеру, оранжевый, необходимо ввести следующее:

    Для изменения цвета шрифта во всем документе существует параметр TEXT все в том же теге .

    Например, синий шрифт можно получить следующим образом:

    Можно применять и оба параметра одновременно:

    Если же цвет шрифта устанавливать во всем документе нет необходимости, а нужно, к примеру, выделить только несколько слов, то следует воспользоваться следующей конструкцией:

    Текст

    Ниже приведен список основных цветов. Более полный перечень можно найти в Интернете (или же получить нужный цвет «на ощупь").

    – Черный – 000000.

    – Белый – FFFFFF.

    – Синий – 0000FF.

    – Зеленый – 00FF00.

    – Желтый – FFFF00.

    – Красный – FF0000.

    – Оранжевый – FF9900 и FFA500.

    – Голубой – 00CCFF.

    – Серый – 999999.

    – Коричневый – 996633.

    Изображения

    Чтобы вставить в документ изображение, необходимо воспользоваться тегом . Данный тег имеет множество параметров, главным из которых является SRC, задающий имя файла с изображением. Если картинка находится в той же папке, что и HTML-файл, то достаточно просто указать ее название:

    Если изображение расположено во вложенной папке, то ссылка на него будет примерно такой:

    Аналогично можно указывать расположение изображения в Интернете:

    Немаловажными являются параметры WIDTH и HEIGHT – соответственно, ширина и высота изображения в пикселах. Если эти параметры не заданы, то будут использоваться реальные размеры изображения.

    Картинка, вставляемая в документ описанным выше способом, просто «встраивается» в текст, занимая одну из его строк наравне с остальными словами. Зачастую это выглядит довольно некрасиво. Ситуацию можно исправить, используя параметр ALIGN тега .

    – Обтекание текстом справа:

    – Обтекание текстом слева (рис. 6.2):



    Рис. 6.2. Размещение рисунков.


    Помимо всего прочего, картинку можно использовать для задания фонового изображения. Для этого существует параметр BACKGROUND тега :

    Выбранное изображение будет находиться на заднем плане, а все остальные элементы – располагаться поверх него.

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

    Ссылки

    Ссылка является основным инструментом для перехода от одной веб-страницы к другой. Она задается тегом <А> с параметром HREF, указывающим на файл, который будет открыт при щелчке на данной ссылке.

    Типичными являются следующие конструкции:

    <А HREF="chap1.htm">Teкст ссылки

    <А HREF="content/chap1.htm">Teкст ссылки

    <А HREF="

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

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

    <А TARGET="_BLANK» HREF="chap1.htm">Tекст ссылки

    При работе с большими документами очень полезными бывают ссылки на другие места того же файла. Для этого, помимо самой ссылки, понадобится метка (якорь), указывающая место, в которое нужно перейти. Для создания якоря используется параметр NAME тега <А>. Значение параметра на экране не отображается и может быть любым:

    <А NAME="Iabel1">Текст

    Ссылка на данный якорь будет следующей:

    <А HREF="#Iabel1">Текст ссылки

    При щелчке на этой ссылке экран будет сфокусирован на тексте, заданном в якоре.

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

    <А HREF="chap1.htm">

    Таблицы

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

    Для организации таблицы существует тег

    . Кроме того, необходимы такие теги, как  – строка таблицы и
     – столбец.

    Создадим таблицу 2x4. Для этого сначала необходимо организовать две строки:

    Затем нужно в каждой строке задать по четыре столбца:

    <Т0>Текст ячейки

    <ТО>Текст ячейки

    <ТО>Текст ячейки

    <ТО>Текст ячейки

    <ТО>Текст ячейки

    <ТО>Текст ячейки

    <ТО>Текст ячейки

    <ТО>Текст ячейки

    Создать рамку для таблицы можно с помощью параметра BORDER, значение которого соответствует ширине рамки. Параметр BORDERCOLOR определяет ее цвет:

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

    или к тегу
    .

    Теперь поговорим о размерах. Размеры определяются с помощью параметров WIDTH и HEIGHT (ширина и высота) и могут задаваться как для всей таблицы, так и для каждой отдельной ячейки. Если, к примеру, используется конструкция:

    ,

    то это значит, что таблица имеет ширину 700 и высоту 400 пикселов. Все ячейки поделят выделенное пространство поровну. Можно задавать размеры каждой отдельной ячейки, используя все те же параметры. В этом случае ширина и высота могут задаваться не только в пикселах, но и в процентах от габаритов таблицы:

    Tекст ячейки

    Здесь указанный столбец будет занимать половину всей ширины таблицы.

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

    .

    – По центру:

    Текст ячейки

    – По верхнему краю:

    Текст ячейки

    – По нижнему краю:

    Текст ячейки

    Следует отметить, что содержимым ячеек может быть не только текст, но и изображения, и даже другие таблицы. Благодаря вложенным таблицам на веб-странице можно организовать сколь угодно сложную структуру данных (рис. 6.3).



    Рис. 6.3. Пример страницы, построенной с помощью таблиц

    Фреймы

    Фреймы позволяют разделить веб-страницу на несколько независимых окон и в каждом из них разместить отдельную веб-страницу. Спор о том, нужно это или нет, продолжается. Я скажу одно: при умелом использовании фреймов можно создать страницу-шедевр, а в противном случае – трудно усваиваемый документ-гибрид.

    Для создания фреймов необходим специальный HTML-документ с несколько необычной структурой:

    От обычного такой HTML-документ отличается тем, что вместо тега присутствует тег , имеющий два основных параметра: COLS (колонки) и ROWS (ряды).

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

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

    Если необходимо разбить страницу на два столбца, чтобы ширина первого составляла 15 % от всего доступного пространства, следует ввести:

    Но этого мало. Теперь нужно сообщить браузеру, какие документы будут открываться в каждой из полученных областей. Для этого существует тег и его параметр SRC:

    В левом фрейме будет открываться документ list. htm, a в правом – intro. htm.

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

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

    Нам же необходимо, чтобы при щелчках на пунктах меню левого фрейма документы открывались в правом. Сделать это очень просто.

    Сначала следует задать имя правого фрейма с помощью параметра NAME тега :

    Теперь в каждой ссылке левого фрейма следует указать данное имя. Для этого служит параметр TARGET:

    <А HREF="item1.htm" TARGET="content">Текст ссылки

    Результат выполненных действий представлен на рис. 6.4.



    Рис. 6.4. Использование фреймов.


    Иногда необходимо, чтобы документ открылся на все окно. Осуществить это проще простого:

    <А HREF="item6.htm" TARGET="_top">Текст ссылки

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

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



    Рис. 6.5. Разбиение окна на фреймы

    Другие возможности

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

    Помимо HTML-кода существуют специальные скриптовые языки, встраиваемые в HTML-документ и придающие ему динамичность и интерактивность, то есть позволяющие управлять содержимым веб-страницы после ее загрузки. Наиболее популярными языками сценариев, обеспечивающими данные возможности, являются JavaScript и Visual Basic. С их помощью на веб-страницах можно воплотить свои самые смелые дизайнерские фантазии.

    Для более сложных интернет-проектов используется CGI (Common Gateway Interface) – общий шлюзовый интерфейс. Он позволяет в интерактивном режиме работать с данными веб-сервера. Допустим, на сервере находится какая-либо база данных. Очевидно, что обыкновенный HTML-документ не сможет справиться с такой задачей, как обращение к этой базе с определенным запросом. Решить же данную проблему можно с помощью CGI: запрос с веб-страницы передается специальной CGI-программе, которая обрабатывает его и возвращает полученную информацию. CGI-программы пишут на специальных языках программирования, самым популярным из которых является Perl.

    Еще одной технологией, существенно расширяющей возможности HTML, является ActiveX. Данная технология реализует тесную и максимально прозрачную для пользователя интеграцию веб-ресурсов в операционную систему Windows.

    Органы управления ActiveX – это небольшие программы, которые берут под свое управление часть пространства веб-страницы и в пределах своего участка могут делать все, что им заблагорассудится. Таким образом, обыкновенный HTML-документ может превратиться в настоящее мультимедийное приложение.

    Но и это далеко не все! И пока вы читаете эти строки, программисты наверняка придумывают и внедряют в жизнь что-то еще более новое и интересное.

    Оформление

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

    Структура

    Первое, с чего следует начинать планирование, – это структура сайта. Структура главным образом определяется содержимым сайта и должна обеспечивать удобство доступа к нужной информации. Если неправильно выбрать структуру, то пользователь может очень быстро запутаться, вследствие чего покинуть ваш сайт и отправиться к конкурентам. Этого нельзя допустить ни в коем случае.

    Наиболее распространены три структуры сайта: линейная, древовидная и смешанная. Рассмотрим подробнее каждую из них.

    – Линейная (рис. 6.6). Это самая простая для реализации структура. Она представляет собой совокупность равноправных страниц, идущих одна за другой.

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

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



    Рис. 6.6. Линейная структура сайта.


    – Древовидная (рис. 6.7). Универсальная структура, подходящая для создания практически любого сайта. Принцип работы прост. Главная страница имеет несколько разделов, предоставляющих пользователю выбор, куда идти дальше. Каждый раздел в свою очередь имеет несколько подразделов, подразделы – свои подразделы и т. д. Таким образом, путешествуя по ветвям дерева, посетитель очень быстро сможет найти нужную ему информацию.



    Рис. 6.7. Древовидная структура сайта.


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

    – Смешанная (рис. 6.8). Само название говорит о том, что данная структура сочетает в себе элементы линейного и древовидного построения сайтов: линейная последовательность страниц может иметь ответвления, разъясняющие тот или иной факт, а древовидная структура – линейные ветки документов. Это ни в коем случае не возбраняется, если обусловлено повышением эффективности доступа к информации. Но в подобной оптимизации тоже не стоит уходить слишком далеко, иначе вы рискуете превратить свой стройный сайт в совокупность беспорядочно ссылающихся друг на друга документов.



    Рис. 6.8. Смешанная структура сайта

    Внешний вид

    Разработка дизайна – это самый творческий процесс при создании сайта, поэтому чему-то учить здесь сложно. Можно только советовать. Привлекательный внешний вид во многом зависит от вкуса автора, однако существуют некоторые общепризнанные правила, которые рекомендуется соблюдать.

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

    – Не стоит думать, что если ваш монитор поддерживает разрешение 1280x960, то и все остальные пользователи работают при таком же разрешении. Типичным посетителем вашего сайта будет обладатель монитора с разрешением 800x600, поэтому все содержимое должно укладываться в эти рамки.

    – При создании графики используйте для рисунков формат GIF, a для фотографий —JPEG. Для рисунков лучше применять формат GIF, так как он очень сильно сжимает изображение практически без потери качества, поэтому полученные файлы рисунков весьма компактные. Кроме того, GIF позволяет определять в картинке «прозрачные» цвета, которые становятся невидимыми при просмотре рисунка в браузере. Минусом GIF является ограничение в количестве цветов – всего 256, поэтому для фотографий лучше использовать формат JPEG.

    – Применяйте цвета из «безопасной» палитры. Дело в том, что разные браузеры по-разному воспринимают цвета, которые вы им задаете. Говорят же: «На вкус и цвет товарищей нет!» Как оказалось, эта пословица справедлива не только для людей. Поэтому пользователи, к примеру, Netscape Navigator и Internet Explorer при просмотре одной веб-страницы будут видеть разные цвета. Однако существует так называемая «безопасная» палитра, состоящая из 216 цветов, которые будут всегда и везде отображаться правильно и без искажений. Найти эту палитру можно, например, по адресу http://www.artlebedev.ru/tools/colors/.

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

    – Оставляйте в документе поля и свободные места. Сплошной текст очень трудно усваивать, а пробелы здорово облегчают восприятие и позволяют отдохнуть от обилия текста и графики.

    Навигация

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

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

    – Еще одним средством поиска информации является карта сайта, содержащая ссылки на все страницы сайта. Эти ссылки оформлены в виде списка с иерархической структурой: основные разделы находятся на верхнем уровне, подразделы – на более низком и т. д. Карта сайта напоминает дерево каталогов на вашем компьютере, которое можно увидеть, открыв, к примеру, стандартный Проводник.

    – Достаточно объемные сайты могут содержать строку поиска. По введенным в нее ключевым словам поисковая система будет искать на вашем сайте запрашиваемую информацию и выдавать ее пользователю. Для организации подобного поиска требуется специальное программное обеспечение.

    Тестирование

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

    Основными ошибками при создании сайтов являются следующие.

    – Грамматические ошибки и опечатки. Очень важно, чтобы их не было вовсе. Даже небольшая ошибка, обнаруженная посетителем на вашем сайте, резко подорвет его доверие к содержимому ваших веб-страниц. Если вы сомневаетесь в своей грамотности, то обязательно обратитесь за помощью к тем, кто с русским языком на короткой ноге. На худой конец, воспользуйтесь функцией проверки орфографии в программе Word. Но все-таки компьютеру в этом деле на 100 % доверять ни в коем случае не стоит, хотя большинство ошибок он добросовестно найдет.

    – Нерабочие ссылки. Очень распространенная и критичная ошибка. Например, если при древовидной структуре организации сайта одна из корневых ссылок не будет работать, то вся ветвь, базирующаяся на этой ссылке и измеряющаяся, возможно, десятками или даже сотнями веб-страниц, не будет никому доступна. Поэтому обязательно проверяйте все гиперссылки на работоспособность. Основной причиной ошибок, как правило, является неправильное указание пути к требуемому файлу в «теле» ссылки.

    – Отсутствие некоторых изображений. Загружая свое творение на сервер, не забывайте о рисунках, фотографиях и другом графическом материале, которые фигурируют на ваших веб-страницах. Иначе вместо красочных изображений посетители рискуют увидеть пустые рамки.

    – Ухудшение внешнего вида при изменении разрешения монитора. Создавая свой сайт, принимайте во внимание, что посещать его будут пользователи, мониторы которых настроены на различные разрешения. Необходимо сделать так, чтобы все они при просмотре ваших веб-страниц чувствовали себя уютно и комфортно. Для этого следует предварительно протестировать сайт, устанавливая на своем мониторе различные разрешения и исправляя замеченные неточности и огрехи.

    – Ухудшение внешнего вида при использовании других браузеров. Каждый браузер расшифровывает HTML-теги по-своему. В этом вы можете убедиться, просматривая одни и те же веб-страницы с помощью различных браузеров. Разница не очень существенная, но она присутствует. Может случиться так, что ваш сайт, превосходно смотрящийся в Internet Explorer, будет довольно невзрачным при просмотре в браузере Netscape Navigator. По этой причине тестируйте свои веб-страницы в различных браузерах.

    – Отсутствие элементов веб-страницы. Подобные казусы – не редкость. Из-за опечатки при написании тегов могут кануть в небытие целые пласты полезной информации. Единственный способ борьбы с этим – внимательность.

    Полезные советы

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

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

    – На главной веб-странице четко и ясно напишите, о чем ваш сайт. Не заставляйте посетителя гадать о том, куда он попал. Он все равно не будет этим долго заниматься, а просто покинет вашу веб-страницу и уйдет к конкурентам.

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

    – Для больших фотографий и рисунков используйте эскизы. Большие изображения загружаются очень долго, поэтому лучше не испытывайте терпение посетителей, а поместите вместо рисунков их уменьшенные копии. При щелчке на таком эскизе должно открываться исходное изображение. Пусть пользователи сами выбирают, что они хотят смотреть в полноформатном виде.

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

    – Стиль сайта должен соответствовать его содержимому. Если вы планируете серьезный коммерческий проект, то не стоит оформлять его в мармеладно-ро-зовых тонах, снабжать необычными спецэффектами и прочими «прикольными фишками». Посетители этого просто не поймут.

    – Не используйте слишком длинные URL. В противном случае посетителям будет очень сложно посоветовать вашу веб-страницу своим друзьям – ее адрес просто не поместится в одну строку электронного письма или какого-либо форума.

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

    – Указывайте дату и время последнего изменения на сайте. Это покажет, что ваш проект актуален и работает, а расположенная на сайте информация не устарела. Но размещайте дату только тогда, когда это действительно уместно. Если ваша информация действительно не обновлялась уже пару лет, то об этом лучше тактично умолчать.

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

    – Не изменяйте URL своих веб-страниц, пусть даже самых старых. Подобное изменение приведет к появлению нерабочих гиперссылок на тех сайтах, которые ссылаются на ваши веб-страницы. Обнаружив это, владельцы этих сайтов вряд ли когда-либо захотят давать ссылки на ваши статьи, что неминуемо приведет к уменьшению количества посетителей вашего ресурса.

    – Регулярно обновляйте информацию на своем сайте. Посетителей в первую очередь интересуют самые новые данные.

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

    Размещение