Работа в Microsoft FrontPage XP

         

Просмотр существующей веб-страницы


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

Важно. Если FrontPage используется у вас как принятый по умолчанию редактор HTML, вы можете открывать отдельные веб-страницы извне FrontPage двойным щелчком мыши на файле соответствующей веб-страницы в окне Windows Explorer. Но если FrontPage не является редактором HTML по умолчанию, то доступ и изменение файлов извне FrontPage могут привести к повреждению веб- страницы.GardenCo

В этом примере вы откроете отдельную веб-страницу, просмотрите HTML-код, созданный программой FrontPage, и выполните просмотр веб-страницы как во FrontPage, так и в браузере.

Для этого упражнения используется рабочая папка Office XP SBS\FrontPage\Chap17.

Выполните следующие шаги.

  1. В меню Файл (File) выберите пункт Открыть веб-узел (Open Web).
  2. В диалоговом окне Открыть веб-узел (Open Web) перейдите в папку Office XP SBS\FrontPage\Chap17, выберите GardenCo и щелкните на кнопке Открыть (Open). Этот сайт откроется в программе FrontPage с представленным на экране списком папок, как это показано ниже.


    увеличить изображение

    Совет. Если панель списка папок не появится, то для ее появления выберите пункт Список папок (Folder List) в меню Вид (View).

  3. В панели списка папок щелкните правой кнопкой на файле contact.htm и в контекстном меню выберите пункт Открыть (Open). Значок этого файла изменится на значок открытой веб-страницы
    , а сам файл будет открыт в окне просмотра и редактирования страниц, как это показано ниже.





    увеличить изображение

  4. Для просмотра всей страницы используйте полосы прокрутки. Это страница имеет общие фреймы (shared borders) на верхней и левой сторонах, очерченные пунктирными линиями, как это показано ниже.


    увеличить изображение

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

    Область содержимого в центре страницы содержит текст, графику (не показана на рисунке), таблицу и две гиперссылки на электронную почту, как это показано ниже.

    увеличить изображение

  1. Теперь, когда вы увидели внешний вид, рассмотрим внутреннюю структуру. Щелкните на кнопке 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>
  2. Просмотрите все текстовые фрагменты в этом HTML-представлении страницы, а также HTML-коды, между которые находятся эти тексты. Постарайтесь определить коды, с помощью которых создается каждый элемент страницы.
  3. Щелкните на кнопке Обычный (Normal), чтобы вернуться к обычному режиму просмотра.
  4. Теперь посмотрим, в какой форме увидят эту страницу посетители сайта. Щелкните на кнопке Просмотр (Preview) внизу окна просмотра и редактирования страниц, чтобы перейти к панели предварительного просмотра, где программа FrontPage отобразит данную страницу в следующем виде.


    увеличить изображение

  5. Выполните предварительный просмотр в своем используемом по умолчанию браузере. В стандартной панели инструментов щелкните на кнопке Предварительный просмотр в браузере (Preview in Browser)
    .

    Хотя у вас выбран предварительный просмотр только данной страницы, вы можете также открывать другие страницы сайта, щелкая на кнопках гиперссылок в панели ссылок.

  6. Закончив предварительный просмотр сайта, щелкните на кнопке Закрыть (Close), чтобы закрыть браузер и вернуться в программу FrontPage.
  7. Используйте кнопки внизу окна просмотра и редактирования страниц для произвольного переключения между панелями Обычный, HTML-код и Просмотр. По окончании просмотра страницы щелкните на кнопке Закрыть (Close) в верхнем правом углу окна просмотра и редактирования страниц, чтобы закрыть данный файл.
  8. В меню Файл (File) щелкните на команде Закрыть веб-узел (Close Web), чтобы закрыть данный сайт.



Содержание раздела