Дание сайта шаг за шагом

1 Инструментальные средства для создания вэб–страниц html-редактор/блокнот

Одним из самых актуальных вопросов начинающего вэб–дизайнера является выбор инструмента, способного наиболее полно отразить его творческий полёт. С одной стороны вся гибкость HTML возможна только при помощи ручного набора, а с другой – затруднительно изучить все тонкости HTML. Поэтому для разработки полноценного сайта приходится прибегать к помощи HTML-редакторов. На сегодняшний день существует огромный выбор HTML-редакторов, начиная с Front Page и Macromedia Dreamweaver, Allaire Home Site, 1st Page и т. д. Основная особенность таких редакторов перед «Блокнотом» состоит в том, что для возможности создания простейшей вэб–страницы достаточно иметь навыки по работе с каким-либо текстовым редактором, однако в отличие от «Блокнота», HTML-редактор берёт на себя почти 90% работ по вводу основных синтаксических конструкций (тегов) HTML. Кроме того, чтобы увидеть, как созданная страница будет выглядеть в окне браузера, достаточно одним щелчком мыши переключиться в режим просмотра. Этим перечислением не исчерпаны все возможности HTML редакторов – у каждого продукта свои особенности, но основы у всех одинаковы. Необходимо отметить, что отзывы об Dreamweaver'е по сравнению с другими HTML редакторами намного положительнее хотя бы из-за того, что он практический не добавляет в страницы избыточный код, поэтому многие дизайнеры пользуются именно этим редактором.

Графический редактор

В качестве лучшего графического редактора на сегодняшний день выступает Photoshop. Он очень удобен в работе и имеет всё, что нужно для создания качественной графики. Но есть и другие редакторы. такие как Macromedia FireWorks и Macromedia Flash.

Браузер

В сегодняшнем русскоязычном Интернете пользуются наибольшей популярностью только три браузера – Microsoft Internet Explorer , Netscape Navigator и Opera. Так как эти браузеры абсолютно разные, то при построении сайта следует учитывать то, что на него будут приходить пользователи именно этих браузеров, и поэтому перед размещением сайта в сети Интернет необходимо проверить на своём локальном компьютере выглядит ли сайт в каждом из браузеров примерно одинаково (если нет, то придётся дорабатывать сайт).

FTP-менеджеры

После создания сайта, локально, идёт запись созданной директории с файлами на сервер. При этом обычно используются FTP-менеджеры/клиенты, основными из которых являются Far менеджер и CuteFTP. Последний очень удобен в использовании: так, для создания нового соединения достаточно нажать F4 и тут же будет выведено новое окно, в котором нужно будет ввести необходимые данные для входа через FTP. FAR менеджер считается «ветераном» среди FTP-клиентов; его единственный минус – неудобно вводить данные для соединения и можно легко ошибиться при подключении через FTP. Но, несмотря на это, FAR популярен среди разработчиков Вэб–сайтов. Следует также перечислить такие FTP-клиенты как Web FTP и Arisoft Direct FTP.

2 Создание шаблона страницы

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

Первой строкой документа, написанного на языке HTML должна быть строка, начинающаяся с тега <!DOCTYPE>. В ней браузер получит информацию о том, какому стандарту соответствует документ, без данного тэга ваш код и CSS не пройдут проверку.

Например, строка:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

сообщит браузеру, что документ соответствует английскому стандарту HTML 4.0 Transitional DTD.

Затем следуют строки:

<HTML> -!необязательный элемент (указывает браузеру, что это HTML-документ).

<HEAD> -!начало заголовка документа - определяет место, где помещается различная информация, не отображаемая в теле документа.

Внутри блока <HEAD>...</HEAD>, в заголовке располагаются метаданные (специальная группа инструкций <META>) – информация, позволяющая задать кодовую страницу языка для правильного отображения текста браузером, ключевые слова для индексации страницы поисковыми системами, автора документа и прочее. Все тэги META не видны при просмотре документа. Обратите внимание, что закрывающий тег </META> запрещен!

Например, следующая строка укажет браузеру, что надо использовать для вывода текста стандартную кодовую страницу для вывода кириллицы – «Windows-1251».

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">

Следующие две строки нужны для индексации страницы поисковыми системами.

<META name="Description" content= "краткое описание сайта / страницы ">

<META name="Keywords" content= "ключевые слова через запятую / смысловая нагрузка страницы">

Далее идет тег <BODY>, который определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты). Начальный и конечный теги необязательны

Тег имеет ряд необязательных атрибутов. Причём цвет можно назначать, используя значение цвета в виде RRGGBB-формата (в виде шестнадцатеричного кода), например "FF0000" присваивает красный цвет, либо, используя константы цвета, например "yellow" присваивает желтый цвет, соответственно. Атрибуты тэга <BODY> приведены в таблице 6.1.

Таблица 6.1 – Атрибуты тэга <BODY>

Атрибут	Назначение
bgcolor	Устанавливает цвет фона документа.
background	Указывает на url-адрес изображения – фона документа.
text	Устанавливает цвет текста документа.
link="константа цвета или RGB-формат"	Устанавливает цвет гиперссылок.
vlink="константа цвета или RGB-формат"	Устанавливает цвет посещенных гиперссылок.
alink="константа цвета или RGB-формат"	Устанавливает цвет активных гиперссылок при нажатии мышкой.
bgproperties=fixed	Фоновое изображение прокручиваться не будет, то есть текст будет двигаться при нажатии PageDown, а фон - нет. Данный параметр поддерживается только в Internet Explorer.

Эти параметры (атрибуты) можно объединять, например:

<BODY bgcolor="white" text="Black" font face="Arial,'Comic Sans MS',Courier">

В данном примере цвет фона – белый, цвет текста – чёрный, название шрифта – Arial, Comic Sans MS, Courier. Может задаваться несколько шрифтов через запятую; при этом браузером будет использоваться первый найденный поддерживаемый шрифт (см. ниже).

Параметры базового шрифта (шрифта по умолчанию) задаются при помощи тега BASEFONT, например, если записан код:

<basefont size="2">

то это означает, что браузер присвоит всему документу размер шрифта по умолчанию – 2.

Затем необходимо указать титул документа (тег <TITLE>), то есть надпись, которая будет выводиться в заголовке окна браузера. Название должно быть не более 40 символов. При форматировании текста (см. ниже) title может выступать атрибутом в абзаце – всплывающей подсказкой.

<TITLE>Страничка начинающего порталостроителя</TITLE>

</HEAD> – завершаем заголовок.

После заголовка открывается тело документа <BODY>. В нем находится содержание документа. Тело документа и сам документ заканчивается тегами:

</BODY> и </HTML>