Просмотр существующей веб-страницы
Веб-страницы - это элементы, образующие структуру любого сайта. Выполняя просмотр сайта в браузере, вы обычно просматриваете веб-страницы. Разрабатывая сайт, вы также работаете с веб-страницами. Если вам нужно редактировать веб-страницу, которая является частью сайта, созданного на основе FrontPage, то сначала вы открываете этот сайт в программе FrontPage и затем открываете отдельную страницу. Открывая страницу в программе FrontPage, а не отдельный файл в другой программе, вы избегаете опасности случайного повреждения данного сайта. К тому же, это гарантирует, что изменения, внесенные на отдельной странице, отражаются соответствующим образом во всем сайте.
Важно. Если FrontPage используется у вас как принятый по умолчанию редактор HTML, вы можете открывать отдельные веб-страницы извне FrontPage двойным щелчком мыши на файле соответствующей веб-страницы в окне Windows Explorer. Но если FrontPage не является редактором HTML по умолчанию, то доступ и изменение файлов извне FrontPage могут привести к повреждению веб- страницы.GardenCo
В этом примере вы откроете отдельную веб-страницу, просмотрите HTML-код, созданный программой FrontPage, и выполните просмотр веб-страницы как во FrontPage, так и в браузере.
Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap17.
Выполните следующие шаги.
- В меню Файл (File) выберите пункт Открыть веб-узел (Open Web).
- В диалоговом окне Открыть веб-узел (Open Web) перейдите в папку Office XP SBS\FrontPage\Chap17, выберите GardenCo и щелкните на кнопке Открыть (Open). Этот сайт откроется в программе FrontPage с представленным на экране списком папок, как это показано ниже.
увеличить изображение
Совет. Если панель списка папок не появится, то для ее появления выберите пункт Список папок (Folder List) в меню Вид (View).
- В панели списка папок щелкните правой кнопкой на файле contact.htm и в контекстном меню выберите пункт Открыть (Open). Значок этого файла изменится на значок открытой веб-страницы, а сам файл будет открыт в окне просмотра и редактирования страниц, как это показано ниже.
увеличить изображение - Для просмотра всей страницы используйте полосы прокрутки. Это страница имеет общие фреймы (shared borders) на верхней и левой сторонах, очерченные пунктирными линиями, как это показано ниже.
увеличить изображение
Общие фреймы появляются на каждой странице данного сайта и содержат одну и ту же информацию, что придает сайту единообразный вид. Верхний общий фрейм этого сайта содержит логотип и заголовок компании, то есть баннер страницы. Левый общий фрейм содержит панель ссылок, где представлены гиперссылки, на которых можно щелкать для перехода на другие страницы сайта.
Область содержимого в центре страницы содержит текст, графику (не показана на рисунке), таблицу и две гиперссылки на электронную почту, как это показано ниже.
увеличить изображение
- Теперь, когда вы увидели внешний вид, рассмотрим внутреннюю структуру. Щелкните на кнопке HTML-код (HTML) внизу окна просмотра и редактирования страниц, чтобы перейти к панели HTML. HTML-код, с помощью которого получена эта страница, выглядит следующим образом:
<head> <meta http-equiv="Content-Language" content="en-us"> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Контакты</title> <meta name="Microsoft Theme" content="modified-nature-theme 011, default"> <meta name="Microsoft Border" content="tl, default"> </head>
<body>
<p>Компания "Все для сада" расположена по адресу: 1234 Oak Street, Seattle, WA 10101.</p> <blockquote>
<p><b>Телефон:</b> (206) 555-0100<br> <b>Факс:</b> (206) 555-0101</p> </blockquote>
<p align="center"> <applet code="fprotate.class" codebase="images/" width="264" height="72"> <param name="image1" valuetype="ref" value="images/banner1.gif"> <param name="image2" valuetype="ref" value="images/banner2.gif"> <param name="image3" valuetype="ref" value="images/banner3.gif"> <param name="rotatoreffect" value="blindsHorizontal"> <param name="time" value="2"> <param name="url" valuetype="ref" value="images/banner1.gif"> </applet></p>
<p>Пожалуйста, связывайтесь с нами по факсу или e-mail 24 часа в сутки, или звоните, а также приходите в наш магазин в следующее время:</p> <div align="left"> <blockquote> <table border="0" cellpadding="0" cellspacing="6" style="border-collapse: collapse" id="AutoNumber1" height="57"> <tr> <td height="19">Понедельник-Пятница</td> <td height="19">9:00 - 21:00</td> </tr> <tr> <td height="19">Суббота</td> <td height="19">10:00 - 19:00</td> </tr> <tr> <td height="19">Воскресенье</td> <td height="19">11:00 - 17:00</td> </tr> </table> </blockquote> </div>
<p>Вопросы о нашей продукции и сервисе? E-mail <a href="mailto:info@GardenCo.msn.com">info@GardenCo.msn.com</a>.</p> <p>Хотите связаться с нашей командой? E-mail <a href="mailto:jobs@GardenCo.msn.com">jobs@GardenCo.msn.com</a>.</p>
</body>
</html> - Просмотрите все текстовые фрагменты в этом HTML-представлении страницы, а также HTML-коды, между которые находятся эти тексты. Постарайтесь определить коды, с помощью которых создается каждый элемент страницы.
- Щелкните на кнопке Обычный (Normal), чтобы вернуться к обычному режиму просмотра.
- Теперь посмотрим, в какой форме увидят эту страницу посетители сайта. Щелкните на кнопке Просмотр (Preview) внизу окна просмотра и редактирования страниц, чтобы перейти к панели предварительного просмотра, где программа FrontPage отобразит данную страницу в следующем виде.
увеличить изображение - Выполните предварительный просмотр в своем используемом по умолчанию браузере. В стандартной панели инструментов щелкните на кнопке Предварительный просмотр в браузере (Preview in Browser).
Хотя у вас выбран предварительный просмотр только данной страницы, вы можете также открывать другие страницы сайта, щелкая на кнопках гиперссылок в панели ссылок. - Закончив предварительный просмотр сайта, щелкните на кнопке Закрыть (Close), чтобы закрыть браузер и вернуться в программу FrontPage.
- Используйте кнопки внизу окна просмотра и редактирования страниц для произвольного переключения между панелями Обычный, HTML-код и Просмотр. По окончании просмотра страницы щелкните на кнопке Закрыть (Close) в верхнем правом углу окна просмотра и редактирования страниц, чтобы закрыть данный файл.
- В меню Файл (File) щелкните на команде Закрыть веб-узел (Close Web), чтобы закрыть данный сайт.
