1.3. Основные элементы веб-страницы и файловая структура веб-сайта

Для того, чтобы получить представление об основных элементах веб-страницы и файловой организации веб-сайта на диске веб-сервера, рассмотрим в качестве примера несколько страниц сайта ГМА им. адм. С.О. Макарова (рис. 1.1). Все эти страницы имеют единую структуру и единое оформление. В окне браузера располагаются: заголовок страницы, элементы навигации (меню) для перехода со страницы на страницу, иллюстрации, текстовый блок.

Каждая страница представляется отдельным файлом с расширением .html. Первая (стартовая) страница сайта получает, как правило, имя: index.html (для веб-сервера Apache) или default.htm (для Microsoft IIS). Остальные файлы именуются произвольным образом, но рекомендуется делать это в соответствии с назначением документа или его содержимым. Например, science.html для страницы «Научная работа» и training.html для страницы «Обучение в Академии».

а	б
в	г

Рис. 1.1. Некоторые страницы веб-сайта ГМА им. адм. С. О. Макарова: а – главная страница; б – страница «История Академии»; в – страница «Обучение в Академии»; г – страница «Научная работа в Академии»

Следует обратить внимание, что в именах папок и файлов допускаются только латинские буквы, цифры и символы подчёркивания (в отличие от именования файлов в Windows, в которых допустимы символы национальных алфавитов, а также пробелы и некоторые специальные символы). Каждый рисунок представляется файлом с расширением .jpg или .gif.

Упрощённый вид файловой структуры сайта www.gma.ru представлен на рис. 1.2. В корневом каталоге сервера всегда хранится файл стартовой страницы. Сюда же можно поместить и файлы других страниц (это допустимо для небольшого сайта – до 10 – 20 страниц). Изображения помещены в отдельную папку, названную img (англ. image – изображение).

Рис. 1.2. Файловая структура веб-сайта ГМА им. адм. С. О. Макарова

1.4. Программное обеспечение рабочего места веб-мастера

1.4.1. Редактор html-страниц

HTML-редакторы бывают двух видов:

1. Визуальные редакторы, т.е. показывающие при редактировании вид документа, близкий к его отображению в браузере. Их также называют WYSIWYG-редакторами (англ. what you see is what you get). С их помощью можно создавать веб-страницы и без знания языка HTML. Недостатком визуальных редакторов является «засорение» HTML-кода лишними тэгами и как следствие – увеличение объёма веб-страниц и проблемы совместимости с некоторыми браузерами. Наиболее известные визуальные HTML-редакторы – Microsoft FrontPage (рассмотрен в разд. 3 данного пособия и [7]) и Macromedia DreamWeaver [2].

2. Кодовые редакторы, т.е. рaбoтaющиe напрямую c HTML-кодом.. В таких редакторах веб-мастер контролирует создание и редактирование каждой строки кода. В качестве кодового HTML-редактора можно использовать вообще любой текстовый редактор, способный сохранять текстовые файлы без форматирования, такие как Notepad (в поставке ОС Microsoft Windows, файл notepad.exe); vi (в поставке Unix-подобных ОС, файл /usr/bin/vi); редактор, встроенный в файловый менеджер FAR. Существуют также редакторы, специально предназначенные для создания веб-страниц, такие как Macromedia HomeSite и CoffeeCup. Они поддерживают функции, облегчающие написание HTML-кода: цветовыделение синтаксиса, автозавершение тэгов и т. д.