Дизайн Web- сайта

Высота слоев ограничена высотой контента

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

Высота разных колонок на данном рисунке различается, поскольку формируется за счет их содержимого.

Замечание

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

2.7  Блочная верстка

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

Расположение колонок

По умолчанию содержимое контейнеров <DIV> на веб-странице располагаются по вертикали, вначале идет один слой, ниже располагается следующий и т.д. При создании колонок требуется располагать слои рядом по горизонтали, для чего применяется несколько методов. Одним из распространенных является использование стилевого параметра float. Хотя он предназначен для создания обтекания вокруг элемента, с тем же успехом float устанавливает и колонки. Но здесь следует учесть одну особенность. При уменьшении окна браузера до некоторой критической ширины, колонки перестают располагаться горизонтально и перестраиваются друг под другом по вертикали. С этим фактом либо остается смириться, либо использовать другие методы формирования колонок через слои.

Резюме

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

2.8  Форматирование текста

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

Для начала новой строки используется тег <BR> (сокр. от англ. break - прервать). Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз.

Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <P> (англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка.

Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута="значение". Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег <P> может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выравнен влево ALIGN="left". Возможны также выравнивания вправо ALIGN="right" и по центру ALIGN="center". При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег </P>. Если его нет, то новый тег <P> означает закрытие предыдущего, соответственно вложенные <P> невозможны. Выравнить текст по центру возможно также тегом <CENTER>.

Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:

<HTML>

<HEAD>
<TITLE>Моя первая страница</TITLE>
</HEAD>

<BODY>

<P align=center>Здесь будут мои личные страницы!
<P align=left>На них Вы сможете найти:<BR>- рассказ обо мне и о моих увлечениях;<BR>- мои фотографии.
<P align=right>С одной из моих страниц можно будет<BR>отправить мне электронное письмо.

</BODY>
</HTML>
 

Кроме использования этих тегов, для разрыва строк возможно использование символов конца строк и табуляций в самом HTML-документе. Для этих целей существует тег <PRE>. Весь текст, помещенный между тегами <PRE> и </PRE> будет выводиться без изменений, то есть со всеми концами строк и табуляциями.

Например:
 

<PRE>Это текст написан
в две строки.</PRE>

В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег <HR> выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег <HR> можнт содержать несколько атрибутов. <HR SHADE> и <HR> дают контурную линию с трехмерным эффектом углубления. <HR NOSHADE> дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселах. Например, 50% - половина ширины страницы, 400 - ширина в 400 пикселов. Атрибут ALIGN может принимать значения, аналогичные его значениям для тега <P>, но выравнивание по умолчанию - по центру. Атрибут SIZE задает толщину линии в пикселах от 1 до 175; по умолчанию 1, но если <HR SHADE>, (линия - контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления.

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

2.9  О шрифте

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

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

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

Не являются ли буквы тоже сколько-то подлинным изображением тех голосовых жестов, которыми мы при помощи горла, нёба, зубов и языка произносим нужный нам звук?В этом отношении можно по-разному расценивать гласные и согласные звуки. Гласные гораздо проще по мускульному жесту; тут участвует главным образом голосовая труба, которая либо сжимается, как в звуке “И”, либо берется открытая в самой своей глубине, как в звуке “А”, либо удлиняется ртом в звуке “О”, либо удлиняется губами в звуке “У”. Поэтому естественно, что в буквах это отражается.

В буквах, обозначающих гласные звуки, изображается как бы голосовой жест - это ясно в “О”, ясно в “У”, ясно в “И”, если бы изображать его однопалочным; несколько менее ясно в букве “А”, а в букве “Е”, особенно если нарисовать ее, как “Э” оборотное, как бы в профиль, изображается весь голосовой аппарат - и рот и язык.

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

В латинском шрифте, писавшемся на памятниках архитектуры, гласные были более широкими и более зияющими, чем согласные, а в древнем славянском гласные, наоборот, сжимались, предпочтение оказывалось согласным, которые вносили в речь как бы цвет, а модуляции гласных могли рассматриваться как количественные изменения; поэтому гласные знаки сжимались, кроме, может быть, “У”, а согласные часто были даже очень широкими, как “М” и другие буквы.
Для нашего языка характерно открытое звучание гласных, и поэтому естественно обратить внимание на их различие от согласных и в их графическом написании. Если это сделать, то можно понять и начертание слога как чего-то цельного.

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

Наши согласные знаки вносят в шрифт массу штамбов вертикальных мачт. У нас много букв с одной мачтой, но есть и с двумя, есть даже с тремя - как “Ш” и “Щ”; и даже в гласных мачта занимает некоторое место - как в “И” и в “Ы” и “Е”; и в мягком и твердом знаке, и в двугласных - как в “Ю” и “Я”.
Тем более для моделировки строки необходимо использовать зияние гласных в контраст с вертикализмом согласных.

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

Если мы возьмем букву “К”, то на ней очень ясно можно видеть использование мачты как остановки и идущих от нее вверх и вниз жестов ветвей. Композиционное значение этой конструкции в том, что мы, укрепившись в вертикали, в то же время движемся дальше. Жесты идут в диагональном направлении вверх и вниз, буква как бы шагает и подымает руку. Жесты подобны жестам дерева или человека, и диагональное их направление сохраняет за буквой цельность, а горизонтальное движение выполняется сложно, а не примитивно. Если мы к этому знаку присоединим знак гласной “О”, а после - “У”, то это как бы продолжит жест буквы “К”. Жест будет идти как бы от того же штамба и тем самым сделает слог единым организмом. То же можно представить себе и с другими согласными. С некоторыми единство слога будет удачно строиться, с некоторыми менее удачно, но тем не менее, достигнув слоговой выразительности начертаний слова, можно добиться и графического ритма, соответственного словесному ритму.

Но перейдем к конструкции шрифта. Шрифт может быть различной конструкции и, кроме того, буква, составляя собой черный силуэт, получает как бы цветовое тело, а та или иная моделировка черного, изменяя конструкцию, в то же время ставит букву в определенное отношение к белому, причем, так как буква моделирует черное, то тем самым моделирует и белое и черное, как бы врастает в белое.
Буква тонет в белом и возникает из белого (буква как бы похожа на муху в молоке). Иначе буква сухо лежала бы на листе в цветовом отношении и как бы могла быть сброшена с листа бумаги.

Различные эпохи и различные стили создавали и различные, в смысле конструкции и цвета, шрифты.
Не уходя слишком далеко в историю шрифта, начнем с XVI века. Книга иллюстрацией тогда имела продольную линейную гравюру или потом медную гравюру, и буква сама часто резалась на дереве или гравировалась на меди. Основой шрифта были штамбы и дуги; штамбы делались с подсечками, что вообще очень существенно в шрифте, так как ограничивает вертикаль, делает ее предметной, не позволяет ей тонуть в белом и превращает штамб как бы в колонну. Причем форма подсечек в это время оканчивалась довольно остро. Штамб как бы вдавливался сколько-то в белый цвет. Такие тонко оканчивающиеся подсечки при не очень толстом штамбе делали некоторый контраст цвета, правда, скрадывающийся при печати, когда при вдавливании буквы в бумагу острые края несколько закруглялись. Шрифт, основанный на таком штамбе, можно назвать объемным, так как он не дает особенно углубляющегося черного цвета, а если подсечки закруглить немного, то и вовсе опредмечивает штамб и придает штамбу хотя и моделирующийся, но как бы единый локальный цвет.