§ 5. Веб-конструирование в редакторе FrontPage

Определения и обозначения

Веб-страница — документ в формате HTML, который браузер отображает как отдельную страницу сайта. На ней размещают текст, поясняющий тему, изображения и гиперссылки. Текст передаёт основную информацию, изображения помогают её представить, а ссылки связывают страницу с другими материалами. Поэтому содержимое страницы должно не только выглядеть понятно, но и помогать посетителю найти нужное.

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

Гиперссылка — элемент страницы, переход по которому открывает другую страницу, файл или ресурс. Ссылкой может быть как фрагмент текста, так и изображение. Посетитель выбирает этот элемент и переходит по указанному адресу, поэтому ссылка превращает набор страниц в систему переходов. Если адрес задан неверно или файл перемещён, переход может не сработать.

Редактор FrontPage — программа для визуального создания и редактирования веб-страниц и сайтов. В ней можно работать с содержимым на странице, не набирая вручную весь HTML-код. Редактор преобразует внесённые изменения в код, который браузер использует для отображения документа. Такой способ упрощает начальную работу, а понимание структуры сайта помогает сохранить проект в порядке.

Как это устроено

Создание сайта начинают с определения его структуры: решают, какие страницы понадобятся и где будут находиться связанные файлы. Затем материалы размещают по папкам, а страницы соединяют гиперссылками. Такая подготовка нужна, потому что адрес ссылки связан с расположением файла: если структура ясна заранее, проще задать путь и поддерживать его в порядке. Главную страницу удобно использовать как вход в разделы, чтобы посетитель понимал, куда перейти дальше.

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

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

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

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

Этапы создания и подготовки сайта в FrontPage

Таблица показывает последовательность действий: от устройства папок до передачи сайта на сервер. Используйте её как список контрольных точек и не переходите к публикации, пока не проверены адреса и связанные файлы. Если обнаружилась ошибка, вернитесь к этапу, на котором она возникла, и проверьте его результат.

Разбор задач

Задача 1. Создать в FrontPage простую страницу с заголовком и двумя абзацами, сохранить её в папке сайта. Здесь важно не только внести текст, но и поместить документ туда, где будет собираться проект. Начните с папки сайта, чтобы сразу сохранить страницу в нужном месте. Тогда последующие материалы и ссылки будет проще организовать.

1. Создайте папку проекта и откройте FrontPage. Так вы заранее определите место, где будут храниться файлы сайта.
2. Создайте новую страницу, добавьте заголовок и два абзаца. Проверьте, что заголовок выделяет тему, а абзацы содержат нужный текст.
3. Сохраните документ в папке проекта под понятным именем. После сохранения откройте файл и убедитесь, что содержимое осталось на месте.

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

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

1. Вставьте изображение и проверьте, что оно отображается. Если файл изображения находится вне папки сайта, скопируйте его в проект и вставьте заново из этого расположения.
2. Выделите текст или картинку, которая станет ссылкой, и укажите адрес другой страницы сайта. Для внутреннего перехода задайте путь относительно файлов проекта.
3. Откройте страницу в режиме просмотра и выберите ссылку. Убедитесь, что браузер перешёл именно к нужному документу.

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

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

1. Создайте папку проекта, сохраните в ней главную страницу и две тематические страницы. Подберите понятные имена файлов, чтобы легче было сверять адреса.
2. Добавьте на главную страницу ссылки на обе темы, а на тематические страницы — ссылку возврата. Используйте относительные адреса, поскольку документы входят в один проект.
3. Откройте страницы и проверьте каждый переход в меню, затем проверьте наличие изображений и других файлов. Исправьте неверные адреса и только после успешной проверки передайте сайт на веб-сервер.

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

Типичные ошибки

• Сохранить страницу вне папки сайта. Тогда изображение или другой связанный файл может остаться за пределами проекта и не попасть на сервер. Так поступают, когда выбирают первое удобное место для сохранения, не думая о структуре. Проверьте путь к документу и убедитесь, что нужные материалы находятся в папке сайта.
• Переместить или переименовать файл после создания ссылки. Адрес может продолжить указывать на прежнее имя или расположение, поэтому переход приведёт к ошибке. Часто файл изменяют, забывая, что на него уже ссылаются страницы. После любых таких изменений пройдите по ссылке и при необходимости исправьте её адрес.
• Указать неверный адрес гиперссылки. Оформленный как ссылка текст сам по себе не гарантирует правильный переход: важен именно адрес назначения. Ошибку легко пропустить, если проверить только внешний вид элемента. Нажмите на ссылку в режиме просмотра и сравните открывшийся ресурс с тем, который требовался.
• Считать сохранение публикацией. Сохранённый файл остаётся на компьютере и не становится автоматически доступен в интернете. Это заблуждение возникает из-за того, что после сохранения страница открывается локально. Проверьте, передан ли весь проект на веб-сервер и доступен ли сайт по сетевому адресу.

Связь с другими темами

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

Что запомнить

• FrontPage позволяет создавать веб-страницы визуально и формирует HTML-код.
• Сайт состоит из связанных страниц и необходимых им файлов.
• Файлы проекта следует хранить в общей структуре сайта.
• Гиперссылка связывает текст или изображение с адресом назначения.
• Внутренние ссылки удобно задавать относительно файлов сайта.
• Перед публикацией нужно проверить страницы, ссылки и связанные файлы.
• Сохранение проекта и его публикация — разные действия.