Практика разработки Web-страниц

Границы

Разбить на страницы
Показывать лекцию целиком

Границы слишком толстые или тонкие, или вообще не нужны

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

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

Впрочем, проблемы с толщиной границ легко решить с помощью HTML или программ веб-дизайна. Толщина границ контролируется атрибутом border (граница). Чтобы решить проблемы с толщиной границ вокруг рисунка, таблицы или других объектов, проделайте следующие шаги.

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

Поправить границы с помощью HTML

Если вы предпочитаете редактировать непосредственно HTML, проделайте следующие шаги:

  • В HTML найдите метку, контролирующую границу, которую вы хотите изменить. Вы можете отыскать ее в содержимом HTML меток : <IMG>, <TABLE>, <OBJECT> и <EMBED>.

  • Установите величину атрибута ширины ( width ) border в пикселях: 5 или больше – для толстой границы, 1 или 2 – для тонкой границы. Чтобы убрать границу, установите border=0.

    <img src="images/frame.jpg" width=179 height=114 border=0>
    •

    Поправить границы рисунка с помощью FrontPage

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

  • Щелкните правой кнопкой мыши на рисунке и нажмите Picture Properties (Свойства Рисунка).
  • Нажмите кнопку Appearance (Вид).
  • В разделе Border Thickness (Толщина границ) укажите толщину границы в пикселях. Для отсутствия границы укажите толщину 0.
  • Нажмите OK.
    •

    Поправить границы таблицы с помощью FrontPage

    Если вы работаете с Front-Page, вам не нужно менять HTML, чтобы поправить границы таблицы. Проделайте следующие шаги.

  • Щелкните правой кнопкой мыши по таблице и нажмите Тable Properties (Свойства Таблицы).
  • В окне Size (Размер) раздела Borders(Границы) укажите толщину границы в пикселях. Чтобы убрать границу, укажите толщину 0.
  • Нажмите OK.
    •

    Как изменить стиль или цвет границ

    Границы рисунка или таблицы по умолчанию сплошные, черного цвета. Если вас это не устраивает, вы можете изменить стиль и цвет границы. Но тут возникает проблема, обусловленная тем, что разные броузеры по-разному поддерживают стиль и цвет границ. (Смотрите примечание ниже).

    Чтобы установить нужный цвет и стиль границ, хотя бы в броузерах, поддерживающих стандарт CSS (каскадная таблица стилей) для границ, проделайте следующие шаги.

    Многие броузеры, включая Netscape версии 4 и более ранние, не поддерживают стили границ. Если вы хотите, чтобы ваша страница правильно отображалась во всех броузерах, не используйте стили границ. Если вам нужно изменить только цвет границы, есть способ, применимый и к Netscape 4, и к Internet Explorer: в атрибуте border color (цвет границ) раздела <TABLE> укажите нужный вам цвет.

  • Установите свойства

    Очень просто изменить стиль и цвет вашей границы, добавив атрибут style (стиль) в HTML, указав нужные вам свойства цвета и стиля:

    <table style="border:8px ridge #993300">

    Этот метод установки стилей подходит для разовой установки свойств границы. Если вы намереваетесь использовать один тип границ во всех областях сайта, вам стоит указать стиль границы в разделе <STYLE> вашей страницы или в отдельной таблице стилей. (Подробнее см. Приложение В.)

    Таблицы и рисунки – не единственные объекты, имеющие границы. Фактически, вы можете использовать свойства границ стандарта CSS, чтобы установить границу вокруг почти любого объекта на вашей странице. Например, заключив нужный раздел в блок <DIV></DIV> и обозначив стили, вы можете установить границы вокруг данного раздела.

    • Поправить стиль границ, используя FrontPage

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

  • Щелкните правой кнопкой на рисунке или таблице, и нажмите Picture Properties (Свойства рисунка) или Table Properties (Свойства таблицы). Нажмите Style (Стиль), затем Format (Формат), а затем Border (Граница).

    А если вы хотите установить стиль границы для параграфа или ячейки таблицы, то щелкните на параграфе или таблице, а затем выберите Borders and Shading (Границы и затенение) в меню Format (Формат).

  • Выберите Box в разделе Setting, установите остальные опции, такие как Style (Стиль), Color (Цвет), и Width (Ширина), а затем нажмите OK.
    •  Когда вы устанавливаете стиль границы, FrontPage отображает ваши установки в Page view (Просмотр страницы). Но помните, что в вашем броузере эти стили могут выглядеть иначе. Чтобы просмотреть результаты ваших действий в Internet Explorer, нажмите кнопку Preview внизу вашей страницы.

    Проблемы с разделением страницы на части

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

    Проблемы возникают при попытке создать цветную границу вокруг области на странице. Если вы обозначаете границу для таблицы, то она возникает вокруг всей таблицы, вы не можете с помощью обычного HTML установить границы вокруг отдельных ячеек таблицы. Вы можете использовать стили для создания границ (см. "Как изменить стиль или цвет границ"), но не все броузеры их поддерживают.

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

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

  • Если тело вашей страницы еще не заключено в таблицу, сделайте это. Для этой внешней таблицы не забудьте указать аргументы border=0, cellpadding=0.
  • В ячейке, которую вы хотите отделить, укажите такой цвет фона, какой вас устраивает в качестве цвета границы. (Определите атрибут bgcolor в метке <TD>.) Установите атрибуты width (ширина) и height (высота) для этой ячейки. Кстати, размер ячейки и, следовательно, вашей границы может меняться вместе с размером окна броузера.
  • Внутри ячейки между существующими метками <TD> и </TD> создайте новую одноячеечную таблицу, окружающую содержимое существующей ячейки.
  • Установите атрибуты width (ширина) и height (высота) для внутренней ячейки на несколько пикселей меньшими, чем для внешней. Если вы хотите получить 4-пиксельную границу вокруг ячейки, установите ширину и длину на 8 пикселей меньше значения этих аргументов для внешней таблицы.

  • Установите для внутренней таблицы тот же цвет фона, что и у самой страницы. (Определите атрибут bgcolor в метке <TABLE>. Например, если фон белый, укажите bgcolor=#ffffff.)

    Вот как примерно будет выглядеть ваш HTML:

    <!--Outer table,provides overall page layout -->
<table width=500 border=0 cellpadding=0 cellspacing=0>
  <tr>
    <!--Background color provides border around this cell -->
    <td align=center width=160 height=300 bgcolor="#003399">
      <!--Inner table has white background -->
      <table width=152 height=29
        bgcolor="#ffffff"
        cellpadding=10 cellspacing=0>
        <tr>
          <td>
            <p>This area of the page has a border.</p>
          </td>
        </tr>
      </table>
    </td>
    <td align=center width=350>
      <p>This area of the page has no border.</p>
    </td>
  </tr>
</table>
    Если вы устанавливаете высоту и ширину ячеек в странице-образующей таблице, следует определить ширину таблицы и убедиться, что ширина отдельных ячеек укладывается в ширину таблицы. Иначе броузеры могут неверно отобразить вашу страницу. Если вы используете программы веб-дизайна, типа FrontPage, стоит устанавливать ширину ячеек соответственно.

    • Общий фрейм FrontPage не отображает то, что нужно

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

    К сожалению, общие фреймы не всегда отображаются должным образом, особенно если вы впервые используете их на вашей странице. Вы зачастую видите сообщения типа "Add this page to the Navigation view to display a page banner here".

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

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

  • Если вы работаете с новой страницей, которую еще не успели сохранить, нажмите Save (Сохранить) в меню File (Файл), наберите название вашей страницы и нажмите OK.
  • Убедитесь, что вы используете именно те общие фреймы, которые хотите. FrontPage может ограничить вашу страницу со всех четырех сторон, только с одной или с двух. Если вы не видите нужных границ, выберите Shared Borders (Разделяемые границы) в меню Format (Формат). Отметьте или очистите окошки Top (Верх), Bottom (Низ), Left (Слева), Right (Справа). Выберите Include Navigation buttons рядом с окошком Top или Left (или рядом с обоими), тогда Front Page создаст навигационную панель за вас. Нажмите OK.
  • Большинство общих фреймов включают в себя баннеры и навигационные панели, автоматически отображающие заголовки и ссылки на каждой странице вашего сайта. Содержание этих объектов определяется навигационной структурой вашей страницы. Чтобы просмотреть структуру, нажмите Navigation в меню Views (крайнее слева). Убедитесь, что все страницы, связанные с вашей, указаны в навигационной структуре вашей страницы.
  • Если вы недосчитались какой-то страницы в навигационной структуре, перетащите все страницы, включая новые, из списка папок в навигационную структуру и упорядочите в нужном вам виде. Например, главная страница – на верхнем уровне и остальные – на нижних.
  • Чтобы вернуться к вашей странице, нажмите Page в меню Views. В большинстве случаев общий фрейм теперь отображает заголовки и ссылки.
    •

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

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

    В навигационной панели укажите каждый объект навигационной иерархии, который вы хотите отображать, например, Same Level или Top Level. FrontPage создаст ссылки на каждую страницу, основываясь на вашем выборе.

  • Теперь, когда баннеры и ссылки готовы, отредактируйте ваши общий фрейм, чтобы он выглядел нужным образом. Например, вы можете вставить логотип, разместить свое имя или адрес, или указать авторские права.
  • Наилучший способ протестировать общие фреймы – сделать это в своем броузере. В меню File нажмите Preview In Browser. Щелкните на гиперссылках в вашей навигационной панели, чтобы просмотреть каждую страницу. Если ваши общие фреймы все еще не в порядке, переключитесь обратно во FrontPage и внесите соответствующие изменения.
    •  Изменения, внесенные вами в общие фреймы, автоматически сохраняются и добавляются ко всем веб-страницам вашего сайта. Даже если вы не сохранили изменения своей веб-страницы, изменения, внесенные в разделяемые границы, все равно останутся.

    В некоторых случаях вас может устраивать, что навигационная панель не отображает ссылки на некоторые страницы. В таких случаях вы можете проигнорировать сообщение "Edit the properties of this navigation bar....".

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

    Общие фреймы на всем сайте

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

    Вы можете удивиться, как работают общие фреймы, если учесть, что их HTML не содержится в какой-либо странице. FrontPage сохраняет HTML-содержание таких фреймов отдельно (см. "Как найти HTML-файл для общего фрейма" на следующей странице). Когда вы отредактировали свою веб-страницу, FrontPage отображает разделяемые границы так, что вы можете их редактировать. Когда вы сохраняете страницу, FrontPage автоматически создает таблицу и помещает в нее содержимое вашего общего фрейма, так же как и основное содержимое вашей страницы.

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

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

    Как найти HTML файл для общего фрейма

    Когда вы используете общие фреймы в вашем сайте, FrontPage создает и поддерживает HTML для его граничных областей. Он создает четыре общих HTML- файла – Top.htm, Bottom.htm, Left.htm и Right.htm и автоматически отображает их, когда вы просматриваете страницу в броузере. Очень легко изменять эти границы в режиме Page. Вам нужно лишь щелкнуть по области границы и вставить текст или изображение или внести другие изменения. Но когда вы переключаетесь в режим HTML, вы не можете видеть содержание ваших граничных областей.

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

  • В меню Tools (Инструменты) выберите Web Settings (Установки веб). Выберите вкладку Advanced, выделите Show Documents In Hidden Directories (Показывать документы в скрытых директориях), а затем нажмите OK. Если FrontPage спросит, хотите ли вы обновить сайт, нажмите Да.
  • Нажмите Folders в панели Views (слева). Дважды щелкните на папке _borders, чтобы ее открыть. Если вы использовали общие фреймы, вы увидите один или несколько из следующих файлов: Bottom.htm, Left.htm, Right.htm и Top.htm.
  • Щелкните дважды на том файле границ, который вы хотите редактировать. Чтобы увидеть HTML, выберите вкладку HTML внизу страницы. При сохранении файла общего фрейма помните, что сделанные вами изменения отобразятся на всех страницах вашего сайта.
    •

    Удаление общего фрейма FrontPage

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

    К счастью, FrontPage позволяет вам убрать один или все общие фреймы с одной страницы или из всего сайта. Чтобы их убрать, сделайте следующее.

  • В меню Format нажмите Shared Borders.
  • Под Apply To нажмите Current Page. Если вы хотите убрать общие фреймы из всего своего сайта, нажмите All Pages.
  • Уберите флажки для каждой ненужной границы, а затем нажмите OK.
    •
    Страницы:

    Границы слишком толстые или тонкие, или вообще не нужны

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

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

    Впрочем, проблемы с толщиной границ легко решить с помощью HTML или программ веб-дизайна. Толщина границ контролируется атрибутом border (граница). Чтобы решить проблемы с толщиной границ вокруг рисунка, таблицы или других объектов, проделайте следующие шаги.

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

    Поправить границы с помощью HTML

    Если вы предпочитаете редактировать непосредственно HTML, проделайте следующие шаги:

  • В HTML найдите метку, контролирующую границу, которую вы хотите изменить. Вы можете отыскать ее в содержимом HTML меток : <IMG>, <TABLE>, <OBJECT> и <EMBED>.

  • Установите величину атрибута ширины ( width ) border в пикселях: 5 или больше – для толстой границы, 1 или 2 – для тонкой границы. Чтобы убрать границу, установите border=0.

    <img src="images/frame.jpg" width=179 height=114 border=0>
    •

    Поправить границы рисунка с помощью FrontPage

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

  • Щелкните правой кнопкой мыши на рисунке и нажмите Picture Properties (Свойства Рисунка).
  • Нажмите кнопку Appearance (Вид).
  • В разделе Border Thickness (Толщина границ) укажите толщину границы в пикселях. Для отсутствия границы укажите толщину 0.
  • Нажмите OK.
    •

    Поправить границы таблицы с помощью FrontPage

    Если вы работаете с Front-Page, вам не нужно менять HTML, чтобы поправить границы таблицы. Проделайте следующие шаги.

  • Щелкните правой кнопкой мыши по таблице и нажмите Тable Properties (Свойства Таблицы).
  • В окне Size (Размер) раздела Borders(Границы) укажите толщину границы в пикселях. Чтобы убрать границу, укажите толщину 0.
  • Нажмите OK.
    •

    Как изменить стиль или цвет границ

    Границы рисунка или таблицы по умолчанию сплошные, черного цвета. Если вас это не устраивает, вы можете изменить стиль и цвет границы. Но тут возникает проблема, обусловленная тем, что разные броузеры по-разному поддерживают стиль и цвет границ. (Смотрите примечание ниже).

    Чтобы установить нужный цвет и стиль границ, хотя бы в броузерах, поддерживающих стандарт CSS (каскадная таблица стилей) для границ, проделайте следующие шаги.

    Многие броузеры, включая Netscape версии 4 и более ранние, не поддерживают стили границ. Если вы хотите, чтобы ваша страница правильно отображалась во всех броузерах, не используйте стили границ. Если вам нужно изменить только цвет границы, есть способ, применимый и к Netscape 4, и к Internet Explorer: в атрибуте border color (цвет границ) раздела <TABLE> укажите нужный вам цвет.

  • Установите свойства

    Очень просто изменить стиль и цвет вашей границы, добавив атрибут style (стиль) в HTML, указав нужные вам свойства цвета и стиля:

    <table style="border:8px ridge #993300">

    Этот метод установки стилей подходит для разовой установки свойств границы. Если вы намереваетесь использовать один тип границ во всех областях сайта, вам стоит указать стиль границы в разделе <STYLE> вашей страницы или в отдельной таблице стилей. (Подробнее см. Приложение В.)

    Таблицы и рисунки – не единственные объекты, имеющие границы. Фактически, вы можете использовать свойства границ стандарта CSS, чтобы установить границу вокруг почти любого объекта на вашей странице. Например, заключив нужный раздел в блок <DIV></DIV> и обозначив стили, вы можете установить границы вокруг данного раздела.

    • Поправить стиль границ, используя FrontPage

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

  • Щелкните правой кнопкой на рисунке или таблице, и нажмите Picture Properties (Свойства рисунка) или Table Properties (Свойства таблицы). Нажмите Style (Стиль), затем Format (Формат), а затем Border (Граница).

    А если вы хотите установить стиль границы для параграфа или ячейки таблицы, то щелкните на параграфе или таблице, а затем выберите Borders and Shading (Границы и затенение) в меню Format (Формат).

  • Выберите Box в разделе Setting, установите остальные опции, такие как Style (Стиль), Color (Цвет), и Width (Ширина), а затем нажмите OK.
    •  Когда вы устанавливаете стиль границы, FrontPage отображает ваши установки в Page view (Просмотр страницы). Но помните, что в вашем броузере эти стили могут выглядеть иначе. Чтобы просмотреть результаты ваших действий в Internet Explorer, нажмите кнопку Preview внизу вашей страницы.

    Проблемы с разделением страницы на части

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

    Проблемы возникают при попытке создать цветную границу вокруг области на странице. Если вы обозначаете границу для таблицы, то она возникает вокруг всей таблицы, вы не можете с помощью обычного HTML установить границы вокруг отдельных ячеек таблицы. Вы можете использовать стили для создания границ (см. "Как изменить стиль или цвет границ"), но не все броузеры их поддерживают.

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

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

  • Если тело вашей страницы еще не заключено в таблицу, сделайте это. Для этой внешней таблицы не забудьте указать аргументы border=0, cellpadding=0.
  • В ячейке, которую вы хотите отделить, укажите такой цвет фона, какой вас устраивает в качестве цвета границы. (Определите атрибут bgcolor в метке <TD>.) Установите атрибуты width (ширина) и height (высота) для этой ячейки. Кстати, размер ячейки и, следовательно, вашей границы может меняться вместе с размером окна броузера.
  • Внутри ячейки между существующими метками <TD> и </TD> создайте новую одноячеечную таблицу, окружающую содержимое существующей ячейки.
  • Установите атрибуты width (ширина) и height (высота) для внутренней ячейки на несколько пикселей меньшими, чем для внешней. Если вы хотите получить 4-пиксельную границу вокруг ячейки, установите ширину и длину на 8 пикселей меньше значения этих аргументов для внешней таблицы.

  • Установите для внутренней таблицы тот же цвет фона, что и у самой страницы. (Определите атрибут bgcolor в метке <TABLE>. Например, если фон белый, укажите bgcolor=#ffffff.)

    Вот как примерно будет выглядеть ваш HTML:

    <!--Outer table,provides overall page layout -->
<table width=500 border=0 cellpadding=0 cellspacing=0>
  <tr>
    <!--Background color provides border around this cell -->
    <td align=center width=160 height=300 bgcolor="#003399">
      <!--Inner table has white background -->
      <table width=152 height=29
        bgcolor="#ffffff"
        cellpadding=10 cellspacing=0>
        <tr>
          <td>
            <p>This area of the page has a border.</p>
          </td>
        </tr>
      </table>
    </td>
    <td align=center width=350>
      <p>This area of the page has no border.</p>
    </td>
  </tr>
</table>
    Если вы устанавливаете высоту и ширину ячеек в странице-образующей таблице, следует определить ширину таблицы и убедиться, что ширина отдельных ячеек укладывается в ширину таблицы. Иначе броузеры могут неверно отобразить вашу страницу. Если вы используете программы веб-дизайна, типа FrontPage, стоит устанавливать ширину ячеек соответственно.

    • Общий фрейм FrontPage не отображает то, что нужно

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

    К сожалению, общие фреймы не всегда отображаются должным образом, особенно если вы впервые используете их на вашей странице. Вы зачастую видите сообщения типа "Add this page to the Navigation view to display a page banner here".

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

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

  • Если вы работаете с новой страницей, которую еще не успели сохранить, нажмите Save (Сохранить) в меню File (Файл), наберите название вашей страницы и нажмите OK.
  • Убедитесь, что вы используете именно те общие фреймы, которые хотите. FrontPage может ограничить вашу страницу со всех четырех сторон, только с одной или с двух. Если вы не видите нужных границ, выберите Shared Borders (Разделяемые границы) в меню Format (Формат). Отметьте или очистите окошки Top (Верх), Bottom (Низ), Left (Слева), Right (Справа). Выберите Include Navigation buttons рядом с окошком Top или Left (или рядом с обоими), тогда Front Page создаст навигационную панель за вас. Нажмите OK.
  • Большинство общих фреймов включают в себя баннеры и навигационные панели, автоматически отображающие заголовки и ссылки на каждой странице вашего сайта. Содержание этих объектов определяется навигационной структурой вашей страницы. Чтобы просмотреть структуру, нажмите Navigation в меню Views (крайнее слева). Убедитесь, что все страницы, связанные с вашей, указаны в навигационной структуре вашей страницы.
  • Если вы недосчитались какой-то страницы в навигационной структуре, перетащите все страницы, включая новые, из списка папок в навигационную структуру и упорядочите в нужном вам виде. Например, главная страница – на верхнем уровне и остальные – на нижних.
  • Чтобы вернуться к вашей странице, нажмите Page в меню Views. В большинстве случаев общий фрейм теперь отображает заголовки и ссылки.
    •

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

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

    В навигационной панели укажите каждый объект навигационной иерархии, который вы хотите отображать, например, Same Level или Top Level. FrontPage создаст ссылки на каждую страницу, основываясь на вашем выборе.

  • Теперь, когда баннеры и ссылки готовы, отредактируйте ваши общий фрейм, чтобы он выглядел нужным образом. Например, вы можете вставить логотип, разместить свое имя или адрес, или указать авторские права.
  • Наилучший способ протестировать общие фреймы – сделать это в своем броузере. В меню File нажмите Preview In Browser. Щелкните на гиперссылках в вашей навигационной панели, чтобы просмотреть каждую страницу. Если ваши общие фреймы все еще не в порядке, переключитесь обратно во FrontPage и внесите соответствующие изменения.
    •  Изменения, внесенные вами в общие фреймы, автоматически сохраняются и добавляются ко всем веб-страницам вашего сайта. Даже если вы не сохранили изменения своей веб-страницы, изменения, внесенные в разделяемые границы, все равно останутся.

    В некоторых случаях вас может устраивать, что навигационная панель не отображает ссылки на некоторые страницы. В таких случаях вы можете проигнорировать сообщение "Edit the properties of this navigation bar....".

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

    Общие фреймы на всем сайте

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

    Вы можете удивиться, как работают общие фреймы, если учесть, что их HTML не содержится в какой-либо странице. FrontPage сохраняет HTML-содержание таких фреймов отдельно (см. "Как найти HTML-файл для общего фрейма" на следующей странице). Когда вы отредактировали свою веб-страницу, FrontPage отображает разделяемые границы так, что вы можете их редактировать. Когда вы сохраняете страницу, FrontPage автоматически создает таблицу и помещает в нее содержимое вашего общего фрейма, так же как и основное содержимое вашей страницы.

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

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

    Как найти HTML файл для общего фрейма

    Когда вы используете общие фреймы в вашем сайте, FrontPage создает и поддерживает HTML для его граничных областей. Он создает четыре общих HTML- файла – Top.htm, Bottom.htm, Left.htm и Right.htm и автоматически отображает их, когда вы просматриваете страницу в броузере. Очень легко изменять эти границы в режиме Page. Вам нужно лишь щелкнуть по области границы и вставить текст или изображение или внести другие изменения. Но когда вы переключаетесь в режим HTML, вы не можете видеть содержание ваших граничных областей.

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

  • В меню Tools (Инструменты) выберите Web Settings (Установки веб). Выберите вкладку Advanced, выделите Show Documents In Hidden Directories (Показывать документы в скрытых директориях), а затем нажмите OK. Если FrontPage спросит, хотите ли вы обновить сайт, нажмите Да.
  • Нажмите Folders в панели Views (слева). Дважды щелкните на папке _borders, чтобы ее открыть. Если вы использовали общие фреймы, вы увидите один или несколько из следующих файлов: Bottom.htm, Left.htm, Right.htm и Top.htm.
  • Щелкните дважды на том файле границ, который вы хотите редактировать. Чтобы увидеть HTML, выберите вкладку HTML внизу страницы. При сохранении файла общего фрейма помните, что сделанные вами изменения отобразятся на всех страницах вашего сайта.
    •

    Удаление общего фрейма FrontPage

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

    К счастью, FrontPage позволяет вам убрать один или все общие фреймы с одной страницы или из всего сайта. Чтобы их убрать, сделайте следующее.

  • В меню Format нажмите Shared Borders.
  • Под Apply To нажмите Current Page. Если вы хотите убрать общие фреймы из всего своего сайта, нажмите All Pages.
  • Уберите флажки для каждой ненужной границы, а затем нажмите OK.
    •
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^