Макет страницы

Страница неправильно выглядит при печати из броузера

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

1. Если вам кажется, что вашу страницу будут часто печатать – например, если это форма – подумайте об обеспечении специальной версии для печати. На этой версии используйте черный текст и белый фон и уберите ненужные изображения. Сделайте таблицы более узкими, чем обычно, чтобы они поместились на обычном листе бумаги. Для проверки напечатайте страницу, а затем обеспечьте ссылку на нее от основной страницы.

2. Если страницы разорваны в нежелательном месте, вы можете использовать стиль для определения своих собственных разрывов страниц. (Как и все стили печати, это работает только в поздних версиях броузеров.) Для тэга, который должен будет начаться на новой странице, установите свойству page-break-before значение always:

   <table style="page-break-before:always">

   Также можно присвоить свойству page-break-inside значение avoid, чтобы предотвратить разрыв в определенном блоке:

   <table style="page-break-inside:avoid">

3. Если вы используете таблицу стилей и хотите обеспечить для вашей страницы специальные стили при печати, включите их в раздел @media print. Например, используйте следующий блок <STYLE>, чтобы определить шрифт при печати, отличный экранного, и скрыть изображения при печати:

   <style>
     @media print {
       BODY { font-family:'Times New Roman',Times; font-size:smaller }
       IMG { visibility:hidden }
     }
     @media screen {
       BODY { font-family:verdana,Helvetica,sans-serif }
     }
   </style>

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

Разметка на разных страницах не единообразная

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

Если ваши страницы нуждаются в единообразном размещении, сделайте следующее.

1. Выберите общий стиль размещения элементов страницы, решите, где на ваших страницах будут располагаться рисунки, гиперссылки и текст. (См. раздел "Стратегия размещения компонентов страницы".)

2. Создайте страницу шаблона, которую вы потом сможете использовать в качестве отправной точки для других страниц. Чтобы это сделать, выберите страницу, которая наиболее близка к вашему проекту страницы, и создайте копию страницы. Удалите текст и изображения, которые есть только на этой странице, оставляя от них только метки-заполнители типа "Здесь находятся гиперссылки" или "Здесь напечатано резюме страницы".

   

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

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

3. Если форматирование ваших текстов, границ или полей не единообразно, вам может помочь таблица стилей. Создайте или откройте таблицу стилей (.css файл) и определите стили, которые вы хотите применить для всего сайта. Например, если вы хотите сделать отступ слева для каждой строки всех параграфов всего сайта равным 20 пикселам, то для установления свойства margin-left используйте следующее объявление стиля в вашей таблице стилей (чтобы выровнять только первую строку, установите вместо этого свойство indent):

   p {
     margin-left: 20px
   }

   В вашей странице-шаблоне и любых других существующих страницах удалите все руководства по форматированию и интервалы, которые потом заменят ваши стили. После этого свяжитесь с таблицей стилей, использующей тэг <LINK>:

   <link rel=stylesheet type="text/css" href="styles.css">
4. Поэкспериментируйте с вашей страницей-шаблоном, просматривая ее в режиме предварительного просмотра, чтобы удостовериться в правильности внесенных изменений. Тогда, если это позволяет ваш HTML-редактор, сохраните страницу как шаблон. В HomeSite, например, нажимают Save As Template (Сохранить как шаблон) в меню File (Файл) и набирают название шаблона. Как только вы сохранили шаблон, вы можете его использовать для создания новых страниц. Нажмите New (Новый) в меню File (Файл), нажмите Custom и дважды щелкните на вашем шаблоне. В FrontPage выберите Save As (Сохранить как) в меню File (Файл), выберите FrontPage Template (Шаблон FrontPage) в окне Save As Type (Сохранить как тип), и нажмите Save (Сохранить). Для создания новых страниц выберите New (Новый) в меню File (Файл) и нажмите Page (Страница), а затем дважды щелкните на вашем шаблоне.
5. Используя шаблон, создайте новую страницу для каждой существующей в вашем сайте страницы и переместите текст и изображения в новую структуру. По мере необходимости измените или добавьте гиперссылки.
6. Просмотрите ваши страницы в броузере, перемещаясь от одной страницы к другой. Если оформление все еще меняется от страницы к странице, скорее всего, броузер изменяет размеры столбцов, чтобы приспособить их под изменяющееся с каждой страницей содержание. Например, если изображение больше, чем ширина столбца, столбец расширяется. В то же время если таблица получается больше, чем сумма размеров столбцов, броузер распределяет внутренние ячейки пространства. Возможно, вам следует определить атрибут ширины для тэга <TABLE>, чтобы скорректировать размеры столбцов таблицы, или изменить размер изображений, чтобы точнее приспособить их к столбцам. (Для получения дополнительной информации см. раздел "Отображаемая ширина столбца отличается от заданной".)

Если вы используете FrontPage, воспользуйтесь одной из созданных им таблиц стилей. Выберите New (Новый) в меню File (Файл) и нажмите Page (Страница), выберите Style Sheets (Таблицы стилей), а затем шаблон таблицы стилей (style sheet template). Чтобы применить стили к вашему сайту, сохраните таблицу стилей вместе с вашим сайтом, затем нажмите Style Sheet Links (Ссылки таблицы стилей) в меню Format (Формат), нажмите All Pages (Все страницы), нажмите Add (Добавить) и выберите вашу таблицу стилей.