Изменение размера страницы, размера бумаги и ориентации страницы в Publisher.

В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. Пиксел — это элементарная точка на экране монитора, является относительной единицей измерения, ее величина зависит от установленного экранного разрешения и размера монитора. Возьмем, к примеру, популярное разрешение монитора 1024х768 пикселов. Картинка с такими же размерами будет занимать всю область экрана. Увеличив разрешение монитора до 1280х1024, мы, тем самым, уменьшим размеры изображения на экране.

При использовании пикселов в качестве значений пишется только число без указания единиц, например: width="380" . В примере 6.2 приведено добавление изображения с заданными размерами.

Пример 6.2. Размеры изображения в пикселах

В данном примере рисунок имеет ширину 100 пикселов (width="100" ), высоту 111 пикселов (height="111" ), горизонтальный и вертикальный отступ по 4 пиксела (hspace и vspace ) и толщину границы вокруг картинки 2 пиксела (border="2" ).

Процентная запись удачно дополняет пикселы, поскольку позволяет привязаться к размерам определенного элемента, к примеру, окна браузера. Так, если задать у картинки ширину 100%, то рисунок будет заполнять все свободное пространство окна по ширине. Браузер понимает, что речь идет о процентах, если после числа добавляется символ %, например: width="40%" .

Размеры допустимо задавать только в целых числах. Это правило относится как к пикселам, так и процентам.

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

Пример 6.3. Размеры изображения в процентах

В данном примере ширина картинки задана как 100%, при этом высота изображения явно не задается, поскольку она вычисляется автоматически. Вид страницы при таких размерах картинки показан на рис. 6.3.

Рис. 6.3. Изображение с шириной 100%

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

Как вы понимаете, ширина окна принимается за 100%, но ее легко превысить, причем ненароком. В частности, стоит только добавить в примере 6.3 к тегу отступы по горизонтали (hspace="10" ) и ширина изображения станет 100%+20. Это в свою очередь приведет к появлению горизонтальной полосы прокрутки. Учитывайте этот нюанс при установке размеров элементов.

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

width и height — ширина и высота элементов в css

С помощью атрибутов стиля width и height можно задавать соответственно ширину и высоту блочных элементов:

width: auto|<ширина>|inherit
height: auto|<ширина>|inherit

В качестве значений можно использовать любые доступные в css единицы измерения - например, пикселы (px), дюймы (in), пункты (pt) и др.:

p {width:200px; height:150px}

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

div {width:40%;}

Значение auto отдает управление размерами элемента веб-браузеру и является значением по умолчанию. В этом случае размеры элемента будут такие, чтобы в нем полностью поместилось все его содержимое.

Рассмотрим несколько примеров.

Результат:

В этом примере мы создали блок div и вложили в него абзац p с текстом. Для div-а мы строго задали размеры 300 на 300 пикселей. У элемента p значения свойств width и height равны auto, поэтому как видно на скриншоте, его ширина установилась равной ширине родительского элемента, а высота стала такой, чтобы в нем поместился весь содержащийся в абзаце текст.

Теперь изменим css настройки для абзаца p и зададим фиксированные размеры:

Layer2 {
background: #eee;
width:250px;
}

Результат:

Как видим ширина абзаца стала уже и равна 250 пикселей, а его высота увеличилась так, чтобы уместился текст, так как параметр height остался равным auto.

Теперь давайте зададим высоту и ширину абзаца в процентах:

Layer2 {
background: #eee;
width:50%;
height:50%;
}

Результат:

Как видно на картинке, ширина элемента p стала равна половине ширины элемента div. А высота увеличилась и стала равна 75 процентам высоты div.

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

Определить минимальную ширину и высоту можно с помощью атрибутов min-width и min-heigh:

min-width: <ширина>
min-height: <высота>

Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальные размеры:

max-width: <ширина>
max-height: <высота>

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

Стоит уточнить, что задание параметров height и width имеет смысл только для блочных тегов , так как для строчных элементов эти параметры браузером не обрабатываются.

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

Например, уменьшим размеры абзаца p из выше рассмотренных примеров до 100 пикселей:

Layer2 {
background: #eee;
width:100px;
height:100px;
}

Результат:

Как видно, текст вышел за границы абзаца и выглядит это не очень красиво. Для избежания подобных ситуаций существует правило css — overflow.

Параметр переполнения overflow для скрытия (hidden, visible) или прокрутки (scroll, auto) контента

Переполнение контента может возникнуть, когда ограничивают и ширину и высоту элемента. Рассмотрим два абзаца:

Текст первого абзаца

Текст второго абзаца

Результат:

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

Теперь у первого абзаца ограничим ширину:

Текст первого абзаца

Текст второго абзаца

Результат:

Ширина абзаца ожидаемо уменьшилась, а высота установилась такой, чтобы вместить в себя весь текст.

Ну а теперь ограничим у первого абзаца и высоту:

Текст первого абзаца

Текст второго абзаца

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

overflow: visible|hidden|scroll|auto|inherit

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

Правило скрывает все, что не помещается в контейнере:

Значение scroll отобразит в элементе по вертикали и горизонтали полосы прокрутки даже в том случае, если все содержимое умещается:

Текст первого абзаца

Текст второго абзаца

Наиболее популярным и логичным решением, если вам понадобится сделать полосы прокрутки для контейнера является значение auto . В этом случае браузер сам будет определять когда и по каким осям стоит отображать полосы прокрутки:

Текст первого абзаца

Текст второго абзаца

Результат:

Для настройки полос прокрутки можно также использовать атрибуты стиля overflow-x и overflow-y, которые позволяют настраивать отображение прокрутки по отдельным осям. Таким образом отвечает за горизонтальную ось , а за вертикальную ось .

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

p{overflow-x:hidden;overflow-y:auto;}

И задача будет решена.

На этом все. До новых встреч. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей.

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

Поля определяют края и границы области текста, которые размещают его внутри себя. Размеры регулируют высоту и ширину. Ориентация означает её расположение по отношению к читателю. В данной статье пойдет речь об особенностях корректировки параметров в версиях Microsoft Office 2003, 2007, 2010. Кроме этого, мы опишем настройку переноса слов.

Параметры страницы

Чтобы установить данные настройки в Word 2003 необходимо зайти в меню Файл и выбрать одноименный пункт. В версии 2007 и более поздних нужно перейти в меню Разметка страницы и нажать на стрелку, расположенную внизу.

Поля страницы

Диалоговое окно, дающее возможность поменять поля в Microsoft Word 2003, появится после нажатия пункта Параметры страницы вышеупомянутым способом. Его примерный вид показан на фотографии. Таким образом, в этом окне устанавливаются размеры верхнего, левого, нижнего и правого полей, переплета. При желании меняют книжную ориентацию на альбомную и наоборот. Данные изменения можно применить ко всему документу или к его текущей странице .

В версии 2007 и выше все устанавливается аналогичным способом.

Размер бумаги

Размер устанавливается, если будет необходимо распечатать документ на листе с форматом, отличающимся от листа А4. Последний установлен по умолчанию . Важно, чтобы формат бумаги поддерживался печатающим устройством. Как видно по скриншоту ниже, пользователь программы пытается установить формат А5, А6 или В5. Для его удобства указаны размеры каждого вида бумаги.

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

В Office 2007 и выше размер настраивается с иной последовательностью шагов:

Колонки

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

Выбор количества колонок в версии от 2003 года происходит таким образом:

• Выбираете в верхней части окна меню Формат ;
• Затем кликаете на пункт Колонки ;
• Появится окно;
• Выбираете количество колонок, их ширину и область применения.

Можно применить ко всему документу, либо до конца документа.

Работая с Офис 2007 или 2010 действуем иначе. Нужно зайти в меню Разметка страницы . Затем выбирается пункт Колонки . Здесь настраивается число колонок и их расположение. Их можно сдвинуть влево или вправо.

Перенос слов

В Word 2003 настройка переноса слов делается так;

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

В версии 2007 года, настройка делается иначе. Сначала необходимо зайти в упомянутое меню разметки и выбрать команду Расстановка переносов . Если выбрать Авто , то они расставятся сами. При ручной опции будут предложены варианты переносов в выделенном слове. Решение принимает человек. Для выбора особых настроек служит команда Параметры расстановки переносов . Они аналогичны опциям в Word 2003.

Ориентация страницы.

Работая с пакетом от 2003 года, заходим в уже знакомый нам пункт с полями из меню Параметры страницы . Будет указано два варианта ориентации: книжная и альбомная . Текущая ориентация будет выделена рамкой. Чтобы её поменять, нужно поставить отметку у другого пункта.

Её можно применить как ко всему документу , так и до конца документа . Для первого варианта выбираем соответствующий пункт. При работе с пакетом от 2007 года для смены ориентации нужно зайти в меню Разметка страницы и выбрать пункт Ориентация . Будут предложены те же варианты.

Под размером страницы понимается размер области, занимаемой публикацией. Размер бумаги или листа - это размер бумаги, используемой при печати.

Под ориентацией страницы подразумевается книжное (вертикальное) или альбомное (горизонтальное) расположение публикации. Дополнительные сведения об изменении ориентации страницы см. в разделе .

В этой статье

Размер страницы, размер бумаги и ориентация

Любой макет публикации, выбранный в Publisher, включает часто используемые для этого типа публикации размер и ориентацию страницы. Вы можете изменить их и просмотреть результат в группе Параметры страницы на вкладке Макет страницы . Кроме того, можно задать эти параметры и просмотреть результат изменения, а также взаимосвязь между размером страницы и бумаги на вкладке Печать в представлении Backstage. Дополнительные сведения о вкладке Печать см. в статье Печать .

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

Размера страницы, размер бумаги и ориентация для отдельных страниц

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

Изменение размера страницы

Эта процедура позволяет задать размер публикации. Например, этот метод можно использовать для выбора размера печатной публикации, если требуется напечатать афишу размером 55,88 х 86,36 см - независимо от того, как она будет печататься на принтере: на одном большом листе или на нескольких перекрывающихся листах (фрагментах).

Примечание: Вы можете создавать публикации размером до 6 х 6 м.

Выбор размера страницы

Создание пользовательского размера страницы

Откройте вкладку Макет страницы .

В группе Параметры страницы щелкните Размер и выберите Создать новый размер страницы . В разделе Страница введите нужные значения ширины и высоты.


Совет: Используете Publisher 2007? В области задач Форматирование публикации выберите Изменить размер страницы . В диалоговом окне Параметры страницы в группе Страница введите требуемую ширину и высоту страницы. Вы также можете выбрать нужный тип публикации, например Афиши , щелкнуть Создать пользовательский размер страницы , а затем в группе Страница указать требуемую ширину и высоту страницы. В диалоговом окне Пользовательский размер страницы можно указать имя пользовательского размера страницы, тип макета и необходимые размеры полей.

Изменение размера бумаги

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

Совет: Используете Publisher 2007? Вы можете найти размеры бумаги, заданные для принтера, в диалоговом окне Настройка печати .

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

В меню Файл выберите Настройка печати .

В диалоговом окне Настройка печати в группе Бумага Размер .

Совет: Используете Publisher 2007? В меню Файл выберите Настройка печати . В диалоговом окне Настройка печати в группе Бумага выберите нужное значение в списке Размер .

На какие типы делятся элементы

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

Блочные элементы имеют абсолютно другое поведение. Без дополнительных манипуляций они не смогут стать в один ряд. Пример такого блока – абзац, который задается тегом p. Так вот, зачем я вам все это говорю? Это сказано для того, чтобы вы понимали – размер нужно задавать только блочным элементам, что мы и будем делать в этой статье.

Рис. 1. Основные свойства, которые помогают задать размер

Простые свойства для размеров

Самые простые свойства, которыми можно записать размеры – это width и height. Означают они, соответственно, ширину и высоту. К ним также можно дописывать префиксы min- и max-. В таком случае будет задаваться минимальная и максимальная ширина или высота соответственно.

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

Размер в пикселях

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

#container{ width: 1000px; }

#container{ width : 1000px ;

Если записано так, то ширина контейнера не будет меняться ни под каким предлогом. При изменении масштаба или уменьшении окна она будет оставаться прежней. Размер сайта не уменьшится и при необходимости появится горизонтальная полоса прокрутки.

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

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

#container{ max-width: 1320px; }

#container{ max - width : 1320px ;

И что это значит? А то, что при необходимости блок будет уменьшаться. Если сжать окно, то он тоже уменьшится. В то же время, если разрешение экрана позволяет, ширина будет составлять 1320 пикселей ровно. Уменьшая окно вы не увидите горизонтальный скролл.

Однако тут же можно задать еще и минимальную ширину. Если блоку записать это свойство, то он не будет становиться уже, чем указанное значение. Например:

#container{ min-width: 600px; }

#container{ min - width : 600px ;

Если ширина окна станет меньше 600 пикселей, то блок перестанет сжиматься и появиться та самая горизонтальная полоса прокрутки.

Размер в процентах

Задавать величину в процентах становится все более популярным. При грамотном использовании это может принести отличное отображение сайта на разных устройствах.

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

#sidebar{ float: left; width: 28%; } #content{ float: right; width: 62%; }

#sidebar{ float : left ; width : 28 % ; #content{ float : right ; width : 62 % ;

В итоге сайдбар получит 28% ширины родительского элемента (а в нашем случае это общий контейнер), а основной блок – 62%. Их общая ширина составит 90%. Остальные 10 оставим на различные внешние и внутренние отступы, рамки и т.д.

Рис. 2. Резиновые блоки изменяют свои размеры при уменьшении окна в браузере

Как влияют отступы на размеры блоков

Когда вы задаете ширину какому-то блоку с помощью свойства width, это может быть далеко не окончательное значение. Дело в том, что так мы определяем ширину только той части, в которй непосредственно есть содержимое. Нужно помнить, что в css padding увеличивает размер блока, так же, как и рамка (border).

Допустим, возьмем боковую колонку. Мы дали ей 28% от всей ширины контейнера. Но чтобы содержимое в сайдбаре не прилипало к краям, ем нужно дать кое-какие отступы. Также, возможно, вы захотите добавить боковой колонке рамочку.

#sidebar{ padding: 10px 20px; border: 2px solid black; }

#sidebar{ padding : 10px 20px ; border : 2px solid black ;