Lecaw

Учимся создавать Web-сайты

Быстрая заметка: использование нормального потока документации

August 18, 2012 112hits
 
 

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

Исходные файлыДЕМО

 

 

HTML элементы 

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

Мы собираемся сосредоточиться на двух основных типах HTML элементов, а именно "block-level" и "inline" элементы. С появлением HTML5 у нас есть более конкретный элемент классификации (phrasing, flow, и sectioning), хотя браузеры по-прежнему эффективно опираются на блоки и определенные элементы.

Inline элементы включают элементы как anchor tags, images и spans. Эти элементы часто определяют текст и данные, такие как поворот слов. Встроенные элементы по умолчанию выводят на экран. Это означает, что Вы можете получить несколько элементов в один ряд, до заполнения ширины строки, после чего они переносятся на следующую строку.

<strong>Inline</strong> элементы включают элементы как anchor tags, images и spans. Эти элементы часто определяют текст и данные, такие как поворот слов. Встроенные элементы по умолчанию выводят на экран. Это означает, что Вы можете получить несколько элементов в один ряд, до заполнения ширины строки, после чего они переносятся на следующую строку.</p><br><p><strong>Это - пример нескольких встроенных элементов</strong> которые содержатся в абзаце <a href="#">включая привязку</a> <span>промежуток</span> <em>и тэг выделения.</em> <code>Изменяйте размеры и Вы будете видеть, как браузер обрабатывает эти встроенные элементы по умолчанию.</code> <abbr>Правильно, все выводит на экран на одной строке и переносится, когда больше нет места.</abbr>

Посмотрите этот встроенный демонстрационный пример элемента в действии.

Элементы блочного уровня, такие как divs и paragraphs, а так же более новые элементы HTML5, такие как article и section, имеют совсем другие свойства по умолчанию. Элементы блочного уровня обычно будут, но не всегда, содержать встроенные элементы или другие элементы блочного уровня. Думайте о них как о «структурных» элементах из двух.

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

CSS display

Во всех случаях мы можем изменять способ выведения на экран элемента, используя свойство CSS display:

element {
    display: block; /*or inline, for example*/
}

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

Прочее

В дополнение к общему блоку и встроенным атрибутам display, есть некоторые менее встречающиеся примеры. Например, как отобразить встроенный элемент,  такой же как элемент уровня блока? Для этого вводится значение inline-block. Элементы inline-block сохраняют свойства, такие как ширина, высота, поле и дополняют их, поскольку они применены к элементам блочного уровня при поддержании структурных качеств встроенного элемента.

Другое значение display, которое также используется в list-item, является элементом списка. Каждый элемент с примененным значением элемента списка выведен на экран вертикально, как ожидалось бы в списке, но у них есть пункты маркированного списка рядом с ними. Это полезно для перечисления данных т.е. списка имен такие как эти:

<ul>
<li>Charles Mahogany Biggins</li>
<li>Tiggy Wiggins Hydrangea</li>
<li>Foxy Bumpkins Numpty</li>
</ul>

выведены на экран по умолчанию.

Наконец, последнее значение display, которое стоит упомянуть, является 'none'. Можете предположить что делает этот элемент? Правильно, любой элемент, у которого есть свой набор свойств display: none, не отображается на странице; визуально (вместе со всеми элементами, содержавшимися в нем) удален из документа.

Итак, что такое нормальный поток документации?

Исходя из прочитанного выше, что же все таки такое нормалный поток документации? Это то, как страницы представлены, когда вы ничего к ней не делали в плане структурного моделирования. Браузеры отображжают контент в порядке, с которым они сталкиваются: главный материал вверху, а его содержание пониже.

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

HTML разметка

Давайте начнем с создания простой фотогалереи с основным CSS. Я быстро сделал HTML-файл, чтобы можно было начать, в конце концов, мы главным образом должны сосредоточиться на моделировании. Скопируйте ниже код в текстовый редактор, и я объясню, что там находится.

<!doctype html>
<html lang="en">
<head>
<title>Normal Document Flow</title>
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>An Intro to Normal Document Flow.</h1>
<figure class="photoGallery">
<img src="http://placekitten.com/g/100/200" alt="" />
<img src="http://placekitten.com/g/160/200" alt="" />
<img src="http://placekitten.com/g/220/200" alt="" />
<img src="http://placekitten.com/g/180/200" alt="" />
<img src="http://placekitten.com/g/240/200" alt="" />
<img src="http://placekitten.com/g/130/200" alt="" />
</figure>
<article>
<h2> Welcome to my Photo Gallery!</h2>
<p>I am the man with no name, Zapp Brannigan! Bender, being God isn't easy. If you do too much, people get dependent on you, and if you do nothing, they lose hope. You have to use a light touch. Like a safecracker, or a pickpocket. Hey, guess what you're accessories to. Leela, Bender, we're going grave robbing. Also Zoidberg. Oh dear! She's stuck in an infinite loop, and he's an idiot! Well, that's love for you.</p>
<p>Can I use the gun? Oh no! The professor will hit me! But if Zoidberg 'fixes' it… then perhaps gifts! Fry! Quit doing the right thing, you jerk! Who's brave enough to fly into something we all keep calling a death sphere? I haven't felt much of anything since my guinea pig died.</p>
</article>
</div>
<footer>
</footer>
</body>
</html>

Наверху есть пустой блок CSS. Это - то, где мы начнем моделировать. Ниже этого - условная ссылка к HTML5 Shiv script. Internet Explorer поможет распознавать и должным образом отобразить элементы HTML5. В теле - контейнер для всей страницы и для фотогалереи. Я использовал placekitten, чтобы получить изображения заполнителя и Fillerama для текста заполнителя. Идем далее.

Хорошо, сейчас осталось продемонстрировать, как нормальный документооборот работает. Посмотрите на страницу, которую мы только что сделали. То что вы и ожидали, не так ли? Изображения отображаются в одной строке, до ширины родительского элемента, в данном случае фигура (установлена в 100% от просмотра, но, возможно, с некоторыми полями по умолчанию) заполняется. И хотя вы не можете увидеть это на всех блочных элементах, таких как div, the figure и the article, которые отображаются в собственной строке.

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

Основные CSS свойства

Только, чтобы доказать, что я не вытягиваю участок об элементах блочного уровня, давайте добавим некоторые цвета фона к ним. В блоке кода CSS наверху файла HTML добавьте это:

.container {
    background: #f2f2f2;
} 
article {
    background: #8B0000;   
}

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

CSS позиционирование

Моделирование ниже содержит только свойства CSS от box-model (ширина, поле и т.д.), однако это показывает, как очень мало CSS может создать твердых разметок.

Замените CSS, который у Вас был до этого:

.container {
    width: 65%;
    margin:0 auto;
    background: #f2f2f2;
}
 
figure img {   
    padding-left: 10px;
}
 
h1 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: #8B0000;
    padding-left: 10px;
}
 
article {
    background: #8B0000;
    color: #f2f2f2;
    padding: 10px;
}

В этом CSS коде мы определили ширину контейнера к 65%. Мы также использовали фиксированное пиксельное значение, но проценты сохраняют адаптивность документа и демонстрируют поток документации эффективнее. Мы также центрировали страницу, используя margin: 0 auto.

Остальное - все об эстетике. Я написал некоторое дополнение, чтобы дать некоторую передышку, определил шрифты и цвета шрифта.

Сохраните документ и просмотрите его на своем браузере

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

Заключение

Используя принципы, которые мы узнали сегодня, попробуйте создать свой собственный пример. Вы увидите, что (структурно) можно добиться очень много. Удачи!

 

Дополнительная информация

RATTING:
(1 Голосовать)

Медиа