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

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

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

В верхней области, обозначенной «Заголовок», обычно находится логотип, название, подзаголовок и краткое описание веб-сайта или веб-страницы.

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

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

На рис. 1.2 приведен пример обычного блога. Здесь вы можете легко определить все составляющие дизайна, перечисленные ранее:

1. Заголовок.

2. Панель навигации.

3. Основная информация.

4. Боковая панель.

5. Служебная информация или нижний колонтитул.

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

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

<header> </header> <nav> </nav>

< section > <aside>

</section>  </aside>

<footcr> <tfootcr>

Рис. 1.3. Визуальное представление структуры макета с помощью тегов HTML5

На рис. 1.3 показан тот же типичный макет, который мы использовали ранее, но здесь все разделы обозначены с помощью соответствующих элементов HTML5 (приведены как открывающие, так и закрывающие теги).

<header>

Один из новых элементов, появившихся в HTML5, — <header>. Не путайте <header> с тегом <head>, о котором мы говорили ранее и который описывает «голову» документа. Аналогично <head>, тег <header> содержит вводную информацию (такую как заголовки, подзаголовки или логотипы), однако области применения этих двух тегов различаются. Тег <head> предназначен для хранения информации обо всем документе, тогда как <header> используется только для тела документа или для его разделов.

Листинг 1.10. Использование элемента <header>

<! DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<meta name="description" content=» пример HTML5">

<link rel="stylesheet" href="mystyles. css">

</head>

<body>

<header>

<h1>Это главный заголовок веб-сайта</h2>

</header>

</body>

</html>

Если вы выполняли задания с самого начала главы, то у вас уже должен быть готов к тестированию текстовый файл, содержащий все рассмотренные элементы кода. Если же это не так, просто скопируйте код из листинга 1.10 в пустой текстовый файл, использовав какой-нибудь текстовый редактор (например, Блокнот в Windows), и сохраните полученный документ под любым именем с расширением. html. Чтобы проверить результат выполнения кода, откройте этот файл в браузере, совместимом с HTML5. Это можно сделать прямо из браузера, выбрав пункт меню File (Файл), или дважды щелкнуть на нужном файле в файловом менеджере.

В листинге 1.10 с помощью тега <header> мы определяем заголовок веб-страницы. Не забывайте, что этот заголовок и общий заголовок, определенный ранее в «голове» документа, — это разные вещи. Тег <header> указывает на начало основного содержимого документа, его видимой части. Начиная с этого тега, мы будем видеть результаты нашего кода в окне браузера.

повторяем основы-

Между тегами <header> в листинге 1.10 используется тег, который вам может быть незнаком. Тег <h1> — это старый элемент из спецификации HTML, определяющий заголовок. Цифра в названии тега указывает на уровень заголовка. Элемент <h1> определяет самый важный заголовок, а <h6> — наименее значимый. Таким образом, <h1> используется для отображения главного заголовка страницы, а с помощью остальных можно описывать подзаголовки документа. Позже мы увидим, как эти элементы работают в HTML5.

<nav>

Следующий раздел нашего примера — это панель навигации. В HTML5 для ее описания используется тег <nav>.

Листинг 1.11. Использование элемента <nav>

<! DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<meta name="description" content=»пример HTML5">

<link rel="stylesheet" href="mystyles. css">

</head>

<body>

<header>

<title>Это основной заголовок веб-страницы</title>

</header>

<nav>

<ul>

<Н>домой</Н>

<Н>фотографии</Н>

<Н>видео</Н>

<Н>контакты</Н>

</ul>

</nav>

</body>

</html>

Как вы видите в листинге 1.11, элемент <nav> находится между тегами <body>, после закрывающего тега заголовка </header>, но не между тегами <header>. Смысл в том, что <nav> — это не часть заголовка, а отдельный раздел.

Мы уже говорили ранее, что структура и порядок использования элементов в HTML5 определяются разработчиком. HTML5 — очень гибкий язык, он всего лишь предоставляет параметры и базовые элементы, а как их применять, решаем мы сами. Например, тег <nav> можно было бы поместить внутрь элемента <header> или в любой другой раздел тела документа. Однако необходимо учитывать, что эти новые теги создавались для того, чтобы предоставлять браузерам больше информации и помогать любым новым программам и устройствам распознавать наиболее важные части документа. Для создания понятного и переносимого кода мы рекомендуем следовать стандартам и писать чистый код, без лишних хитростей. Элемент <nav> предназначен для определения навигационных элементов, таких как главное меню или основные панели навигации. Используйте его только для этих целей.

повторяем основы-

В листинге 1.11 мы создали список пунктов меню для нашей веб-страницы. Между тегами <nav> используются два элемента для создания списка. Элемент <ul> определяет сам список. Между открывающим и закрывающим тегами <ul> вы видите несколько тегов <li> с различным текстом, который представляет собой пункты нашего меню. Как вы уже догадались, теги <li> применяются для определения элементов списка. В этой книге мы не ставим себе целью научить вас основам HTML. Если вам необходима более подробная информация о стандартных элементах языка, зайдите на наш веб-сайт и просмотрите ссылки для этой главы.

<section>

Далее в нашем типовом дизайне нужно определить разделы, обозначенные на рис. 1.1 как «Основная информация» и «Боковая панель». Как уже говорилось ранее, в области основной информации выводится главное содержимое документа. Эта область может принимать самые разные формы, например, ее можно поделить на несколько блоков или столбцов. Поскольку эти блоки и столбцы не имеют конкретного назначения, то элемент HTML5 для их определения имеет общее название <section> (раздел).

Листинг 1.12. Использование элемента <section>

<! DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="mystyles. css">

</head>

<body>

<header>

<h1>Это главный заголовок веб-сайта</h1>

</header>

<nav>

<ul>

<li>домой</li>

<li>фотографии</li>

<li>видео</li>

<Н>контакты</Н>

</ul>

</nav>

<section>

</section>

</body>

</html>

Как и панель навигации, область основной информации представляет собой еще один независимый раздел документа. Поэтому он определяется после закрывающего тега </nav>.

Сравните код в листинге 1.12 и макет на рис. 1.3 и попробуйте понять, в каком порядке расположены теги в коде и каким разделам они соответствуют в визуальном представлении веб-страницы.

Теги, определяющие разделы документа, в коде следуют один за другим, но на веб-странице некоторые из них могут располагаться рядом, а не один под другим (например, «Основная информация» и «Боковая панель»). В HTML5 визуальное отображение элементов на экране определяется с помощью CSS. Каждому элементу назначается свой CSS-стиль. Изучением CSS мы займемся в следующей главе.

<aside>

В типичном макете веб-сайта (см. рис. 1.1) область под названием «Боковая панель» находится сбоку от основной информации. Данные в этой области обычно связаны с основной информацией страницы, но не так важны.

В примере стандартного макета блога боковая панель содержит список ссылок (см. рис. 1.2, область с номером 4). Ссылки указывают на каждую запись блога, а также на страницу с дополнительной информацией об авторе. Таким образом, содержимое боковой панели связано с основной информацией страницы, но само по себе не имеет никакого значения. Кроме того, можно сказать, что главной информацией являются записи блога, а ссылки и краткие анонсы этих записей представляют собой лишь средства навигации, а не то, что будет интересовать пользователя в первую очередь.

В HTML5 можно обозначать такую вспомогательную информацию с помощью элемента <aside> (листинг 1.13).

<! DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<meta name="description" content=»пример HTML5">

<link rel="stylesheet" href="mystyles. css">

</head>

<body>

<header>

<h1>Это главный заголовок веб-сайта</h1>

</header>

<nav>

<ul>

<Н>домой</Н>

<li>фотографии</li>

<li>видео</li>

<Н>контакты</Н>

</ul>

</nav>

<section>

</section>

<aside>

<blockquote>Статья номер 1</blockquote>

<blockquote>Статья номер 2</blockquote>

</aside>

</body>

</html>

Элемент <aside> может располагаться на странице справа или слева, он не имеет конкретного местоположения. Этот тег описывает всего лишь заключенную в него информацию, а не ее место в структуре документа. Таким образом, элемент <aside> можно добавлять в любую область макета и использовать для любого содержимого, не относящегося к основной информации веб-страницы. Например, элемент <aside> можно поместить внутрь элемента <section> или даже внутрь основной информации документа (один из способов оформления цитат).

<footer>

Для завершения шаблона и структуры документа HTML5 нам осталось добавить только один элемент. У нас уже есть заголовок тела документа, панель навигации и раздел основной информации, а также боковая панель со вспомогательной информацией. Завершающий элемент должен визуально закончить дизайн и обозначить конец тела документа. В HTML5 для этого используется специальный тег <footer> (листинг 1.14).

Листинг 1.14. Использование элемента <footer>

<! DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8">

<meta name="description" content=»Это пример HTML5">

<meta name="keywords" content="HTML5, CSS3, JavaScript’^ <title>Этот текст — заголовок документа</title>

<link rel="stylesheet" href="mystyles. css">

</head>

<body>

<header>

<h1>Это главный заголовок веб-сайта</h2>

</header>

<nav>

<ul>

<li>домой</li>

<li>фотографии</li>

<Н>видео</Н>

<Н>контакты</Н>

</ul>

</nav>

<section>

</section>

<aside>

<blockquote>Статья номер 1</blockquote>

<blockquote>Статья номер 2</blockquote>

</aside>

<footer>

Copyright &copy; 2010-2011 </footer>

</body>

</html>

В типичном макете веб-страницы (см. рис. 1.1) для описания раздела «Служебная информация» используется элемент <footer>. С его помощью мы определяем «подвал» нашего документа, в котором, как правило, содержатся общие сведения об авторе или компании, владеющей проектом, а также авторское право, условия использования и т. д.

Обычно элемент <footer> добавляется в конец документа и выполняет функцию, описанную ранее. Однако его можно использовать в теле документа несколько раз — в конце разных разделов (точно так же в документе можно неоднократно использовать тег <header>). Но об этом мы поговорим чуть позже.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *