Оптимизация свойств отображения на вашем экране

Ширина и высота области экрана измеряется в пикселах. В начальный период распространения персональных компьютеров мониторы большинства компьютеров могли давать разрешение области экрана только 640 пикселов по ширине и 480 пикселов по высоте (обычно это указывалось в форме 640 x 480). В настоящее время большинство мониторов могут также давать разрешение 800 x 600 пикселов и 1024 x 768 пикселов. Некоторые мониторы могут даже давать разрешение 1152 x 864 пиксела или больше.

Большинство пользователей компьютеров могут выбирать не менее двух различных разрешений области экрана. Некоторые предпочитают работать с областью 640 x 480, поскольку все элементы экрана выглядят крупнее. Другие пользователи предпочитают использовать отображение 1024 x 768, чтобы уместить на экране больше информации.

При разработке веб-страницы, содержащей не только свободно размещаемый текст, важно учесть наиболее вероятный размер области экрана ваших веб-посетителей. В настоящее время на практике общепринято разрабатывать сайты таким образом, чтобы они лучше всего выглядели, когда у посетителя сайта выбран размер 800 x 600. Это означает, что посетителям с размером области экрана 640 x 480 придется выполнять прокрутку экрана, чтобы увидеть все содержимое страницы.

Чтобы определить текущее разрешение области экрана на компьютере с Windows 98:

1. Щелкните на кнопке Пуск (Start), укажите Настройка (Settings) и щелкните на Панель управления (Control Panel).
2. В окне панели управления дважды щелкните на значке Экран (Display), чтобы открыть диалоговое окно свойств экрана.
3. Во вкладке Настройка (Settings) обратите внимание на бегунок Область экрана (Screen area). Текущий размер экрана в пикселах будет представлен под бегунком.
4. Щелкните на кнопке Меньше (Less) или Больше (More), чтобы переместить бегунок и изменить область экрана.

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

Веб-страницы - это элементы, образующие структуру любого сайта. Выполняя просмотр сайта в браузере, вы обычно просматриваете веб-страницы. Разрабатывая сайт, вы также работаете с веб-страницами. Если вам нужно редактировать веб-страницу, которая является частью сайта, созданного на основе 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).

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

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

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

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

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

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

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

1. Теперь, когда вы увидели внешний вид, рассмотрим внутреннюю структуру. Щелкните на кнопке HTML-код (HTML) внизу окна просмотра и редактирования страниц, чтобы перейти к панели HTML. HTML-код, с помощью которого получена эта страница, выглядит следующим образом:

6.

7.

8. <head>

9. <meta http-equiv="Content-Language" content="en-us">

10. <meta name="GENERATOR" content="Microsoft FrontPage 5.0">

11. <meta name="ProgId" content="FrontPage.Editor.Document">

12. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

13. <title>Контакты</title>

14. <meta name="Microsoft Theme" content="modified-nature-theme 011, default">

15. <meta name="Microsoft Border" content="tl, default">

16. </head>

17.

18. <body>

19.

20. <p>Компания "Все для сада" расположена по адресу: 1234 Oak Street, Seattle,

21. WA 10101.</p>

22. <blockquote>

23.

24. <p><b>Телефон:</b> (206) 555-0100<br>

25. <b>Факс:</b> (206) 555-0101</p>

26. </blockquote>

27.

28. <p align="center">

29. <applet code="fprotate.class" codebase="images/" width="264" height="72">

30. <param name="image1" valuetype="ref" value="images/banner1.gif">

31. <param name="image2" valuetype="ref" value="images/banner2.gif">

32. <param name="image3" valuetype="ref" value="images/banner3.gif">

33. <param name="rotatoreffect" value="blindsHorizontal">

34. <param name="time" value="2">

35. <param name="url" valuetype="ref" value="images/banner1.gif">

36. </applet></p>

37.

38. <p>Пожалуйста, связывайтесь с нами по факсу или

39. e-mail 24 часа в сутки, или звоните, а также приходите

40. в наш магазин в следующее время:</p>

41. <div align="left">

42. <blockquote>

43. <table border="0" cellpadding="0" cellspacing="6" style="border-collapse:

44. collapse" id="AutoNumber1" height="57">

45. <tr>

46. <td height="19">Понедельник-Пятница</td>

47. <td height="19">9:00 - 21:00</td>

48. </tr>

49. <tr>

50. <td height="19">Суббота</td>

51. <td height="19">10:00 - 19:00</td>

52. </tr>

53. <tr>

54. <td height="19">Воскресенье</td>

55. <td height="19">11:00 - 17:00</td>

56. </tr>

57. </table>

58. </blockquote>

59. </div>

60.

61. <p>Вопросы о нашей продукции и сервисе? E-mail

62. <a href="mailto:[email protected]">[email protected]</a>.</p>

63. <p>Хотите связаться с нашей командой? E-mail <a

64. href="mailto:[email protected]">[email protected]</a>.</p>

65.

66. </body>

67.

68. </html>

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

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

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

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