5.2. Работа в редакторе FrontPage

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

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

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

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

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

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

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

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

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

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

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

Основные этапы работы над сайтом в FrontPage

Таблица показывает последовательность работы: каждый этап подготавливает основу для следующего. Сверяйтесь с колонкой «Результат», чтобы понять, завершён ли шаг и можно ли двигаться дальше. Если при проверке обнаружилась проблема, вернитесь к этапу, на котором добавляли или настраивали соответствующий элемент.

Разбор задач

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

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

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

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

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

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

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

1. Создайте сайт и добавьте в него две страницы с разным содержимым.
2. На первой странице выберите текст или элемент, который будет ссылкой, и укажите вторую страницу как цель.
3. На второй странице создайте обратную ссылку на первую, чтобы можно было вернуться.
4. Откройте предварительный просмотр и поочерёдно проверьте оба перехода.

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

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

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

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

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

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

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

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

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

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