Разметка сайта html – Разметка области контента HTML-страницы c использованием техники резиновой верстки

Основы CSS: разметка страниц

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

Что такое CSS?

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

css разметка страницы

Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадная таблица стилей). Она состоит из параметров, что отвечают за визуальное оформление объектов на странице.

Преимущества CSS

Каскадная таблица стилей позволяет вебмастеру не только создать красивый ресурс, но и сделать код читабельным, значительно сократив его размер. Используя CSS, можно задавать такие параметры, что невозможны в HTML-разметке страницы.

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

Подключение CSS

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

Точно таким же образом создается и каскадная таблица стилей, только файлу следует задать расширение css. Полученный документ нужно сохранить в той же папке, где и HTML файлы. Допустим, документ таблицы стилей носит название style.css. Чтобы подключить его к HTML-документу, необходимо воспользоваться тегом <link>, что отвечает за подключение внешних файлов. Между тегами <head>, необходимо вписать следующее:

разметка страниц css

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

Правило CSS

Изучение CSS разметки должно начинаться с изучения синтаксиса. В каскадной таблице стилей не существует тегов, скриптов или параметров. Здесь есть только правило, которому необходимо следовать. Состоит оно из селектора и блока стилей. Допустим, в каскадной таблице стилей задана позиция: body{background:black; color:white}.

Здесь body и есть селектором, отвечающим за стилевое форматирование тела сайта; background:black и color:white - это свойства и их значения. Они записываются через точку с запятой. Такая позиция делает фон сайта черным, а текст белым.

блочная разметка страниц средствами css

Селекторы

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

Что же нужно знать о селекторах? Во-первых, их разновидности:

  • Идентификатор. В качестве селекторов могут использоваться названия элементов страниц. В случае, когда, к примеру, необходимо выделить какой-то абзац текста другим цветом, добавляют идентификатор. Его задают параметром id.
интенсивное введение в css разметка страницыСтоит помнить, что один идентификатор можно использовать только раз. В этом примере селектор получил название pink, если нужен еще один идентификатор, то ему просто нужно присвоить другое имя (pink2, green и т. д.).

Классы. Селектор по классу используется, если для нескольких объектов нужно задать одинаковые параметры. К примеру, для двух абзацев текста необходимо задать красный цвет.

блоки css позиционирование разметка страницы

Объектов с классами может быть сколько угодно.

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

Идентификаторы и классы можно применять для любых объектов. И если возникает необходимость задать один стиль для текста и картинки, то можно не указывать имя элемента, как это было в примере (p#pink, p.red). Можно просто поставить точку или решетку. Также селекторы можно группировать. Например, h2, h3, h4{color:red; font-sixe:17px}.

изучение css разметки

Разметка страниц

Изучая разметку страниц, можно понять, что существует несколько ее разновидностей:

  • Табличная. Когда еще не было каскадной таблицы стилей, эта разметка была основной. Она позволяла максимально точно разместить объекты ресурса друг от друга. Но код получается слишком большим и плохо индексируется поисковиками. Еще один недостаток такого метода – скорость загрузки. Пока не загрузится вся таблица, пользователь не увидит даже начало текста.
  • Блочная. Сейчас это основной способ разметки страниц. Его использование стало возможным только благодаря развитию и совершенствованию таблицы стилей.
о базовых принципах css

Преимущества блочной верстки

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

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

css разметка страницы

Как сделать блочную верстку сайта?

Первое, с чего стоит начать, - с создания макета. Это должно быть обычное изображение с расширением psd. После его создания (приобретения или скачивания) необходимо разрезать изображение на блоки и поместить в одну папку (желательно отдельную). Эти фрагменты будут использоваться, как фон для блоков.

В HTML документе для блочной верстки используют тег <div>. Все, что находится в его пределах, принято называть слоем, и формат этого слоя задается в каскадной таблице стилей при помощи классов или идентификаторов.

Первое, что нужно сделать после того, как макет сайта будет разрезан на части, в HTML задать структуру сайта, используя тег <div>, и присвоить для каждого слоя свой селектор. Например, если это меню, то так и написать: id=menu. После чего нужно подключить каскадную таблицу стилей и задать для каждого слоя свои параметры. Самый простой код имеет следующий вид.

разметка страниц css

Задаем параметры

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

блочная разметка страниц средствами css

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

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

интенсивное введение в css разметка страницы

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

Как правильно сделать разметку веб-страницы (решено)? — Хабр Q&A

Хочу сделать для персонального сайта следующую разметку: вся страница делится на 3 столбца. Слева 3/16 от ширины окна занимает древовидная структура сайта, справа 3/16 от ширины окна занимает оглавление. По центру оставшиеся 10/16 от ширины окна занимает содержимое страницы. Левый и правый столбец должен быть фиксированным по высоте и занимать 100% от высоты окна. Столбец по середине может быть сколь угодно длинным по высоте, но минимум 100% от высоты окна.

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

Пример похожего сайта: https://squidfunk.github.io/mkdocs-material/

Я не верстальщик, знаю лишь базовые вещи по HTML и CSS. Я сам использую для создания сайта Semantic UI https://semantic-ui.com

Я решил использовать для создания структуры сайта элемент grid: https://semantic-ui.com/collections/grid.html

Пишу:

<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

В документации написано, что элемент grid построен на flex-ах, но я чёт не найду никак в интернете нормального ответа на свой вопрос. Посмотрел через devtools, как сделан сайт-пример, но там не флексы...

Заранее спасибо!

----

Разобрался сам. Оказывается, flex-child не может быть position: fixed, потому что fixed как бы «выдёргивает» этот блок из общего потока элементов страницы. Мне следовало добавить новый div в flex-child, и уже вложенный div делать фиксированным.

Однако, как я потом сам разобрался, для моей разметки flex не нужен. Я сделал для себя простенький прототип без flex, на котором всё проверил и проработал:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                box-sizing: border-box;
            }
            html, body {
                margin: 0;
                padding: 0;
            }
            body > div {
                text-align: center;
            }
            #site-content {
                margin-left: 200px;
                margin-right: 200px;
                background-color: coral;
                height: 200vh;
                padding-left: 300px;
                padding-right: 300px;
            }
            #site-map {
                position: fixed;
                background-color: cadetblue;
                left: 0;
                top: 0;
                width: 200px;
                bottom: 0;
            }
            #toc {
                position: fixed;
                background-color: darkolivegreen;
                right: 0;
                top: 0;
                width: 200px;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </body>
</html>

Спасибо всем, кто откликнулся!

Разметка области контента HTML-страницы c использованием техники резиновой верстки

Разметка контента HTML-страницы

Здравствуйте уважаемый посетитель!

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

Содержание


  • Выбор способа резиновой верстки для блока ротатора
  • Разметка блока ротатора
  • Выбор способа резиновой верстки блока основного содержания и сайдбара
  • Разметка блока основного содержания
  • Разметка блока сайдбара
  • Исходные файлы сайта

Выбор способа резиновой верстки для блока ротатора


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

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

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

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

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

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

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

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

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

Разметка контента HTML-страницы, картинка 1

Рис.1

Из всего сказанного можно сформулировать следующие требования к поведению блока ротатора при использовании резиновой верстки в разных режимах отображения веб-страницы:

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

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

В случае применения техники плавающих блоков при использовании свойств float, хотя и здесь также плавающие элементы выпадают из нормального потока, но данную проблему можно решить довольно несложным образом, применив к родительскому элементу свойство overflow со значением auto или hidden. Однако, при таком приеме резиновой верстке, при учете всех особенностей ротатора, возникают некоторые сложности в центровке внутренних блоков. Аналогичная проблема отмечается и при выравнивании блоков в виде текстовых элементов.

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

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

Разметка блока ротатора


Исходя из этого, представим структуру HTML-кода ротатора в следующем порядке:

  • все элементы ротатора разместим в созданном ранее контейнере <section>, который будем использовать для назначения ширины ротатора, центровки его по горизонтали и отступа по-вертикали от предыдущего блока;
  • В контейнере разместим два внутренних элемента <div> с классами rtr-block1 и rtr-block2, представляющие блоки "обвертки", которые будут определять размеры внутренних блоков ротатора пропорционально ширине родительского элемента <section> ;
  • само содержимое частей ротатора разместим в блоки <div> с классами rtr-screen и rtr-text соответственно, которые будут служить для их центровки внутри блоков "обвертки" и для внешнего оформления.

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

  1. <section>

  2. <div class="rtr-block1">

  3. <div class="rtr-screen">

  4. <img src="images/photo_1.jpg" alt="Маркировка автомобиля, картинка 1">

  5. </div>

  6. </div>

  7. <div class="rtr-block2">

  8. <div class="rtr-text">

  9. <h3>Хотите защитить автомобиль от угона?</h3>

  10. <p class="hdr-p1">Не многие знают, что самый простой и эффективный способ ... </p>

  11. </div>

  12. </div>

  13. </section>

Как видно, получилась довольно стройная и не очень сложная структура блока ротатора.

Выбор способа резиновой верстки блока основного содержания и сайдбара


Теперь определимся со способом резиновой верстки для остальной части области контента: основного содержания и сайдбара.

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

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

Разметка контента HTML-страницы, картинка 2

Рис.3

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

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

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

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

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

В нашем случае, при разметке этого фрагмента HTML-страницы создадим всего лишь один дополнительный элемент <div>, скажем, с классом content-block, в котором разместим ранее созданные блоки каркаса - <main> и <aside>. И этот элемент будет служить контейнером, которому будет назначена общая ширина области контента в процентном соотношении к ширине веб-страницы. Также он будет отцентрован по ширине и смещен вниз на величину отступа от предыдущего блока.

При этом, вся фишка здесь в том, что размещаемому в этом контейнере элементу, имеющему переменную ширину (в данном случае <main>) будет отведена вся область контейнера, но при этом ему будет назначен фиксированный внешний отступ margin в сторону блока с фиксированной шириной <aside> на величину, равную ширине фиксированного блока + отступ между блоками.

А на освободившееся место с помощью абсолютного позиционирования разместим элемент <aside>, который имеет фиксированные размеры.

И таким образом, при изменении ширины веб-страницы будет изменяться по ширине все содержимое блока<main>, за исключением той части, которая находиться под фиксированном блоком.

Вот и все. Согласитесь, что очень простое решение. Ниже показан этот фрагмент HTML-кода, который подтверждает простоту такого метода.

  1. <div class="content-block">

  2. <main>Основное содержание</main>

  3. <aside>Сайдбар</aside>

  4. </div>

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

Разметка блока ос

Разметка шапки и футера HTML-страницы

Делаем разметку шапки и футера веб-страницы

Здравствуйте уважаемый посетитель!

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

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

Содержание


  • Разметка шапки
  • Разметка меню шапки
  • Разметка футера
  • Что такое фавикон и для чего он нужен
  • Исходные файлы сайта

Разметка шапки


Верстку нашего сайта будем делать в соответствии с ранее созданным дизайн-макетом.

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

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

Делаем разметку шапки веб-страницы, картинка 1

Рис.1 Дизайн-макет главной страницы

Делаем разметку шапки веб-страницы, картинка 2

Рис.2 Прототип сайта

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

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

Исходя из такого расположения элементов, разобьем описываемую часть шапки на три блока: фавикон и название сайта объединим в блок <div> с атрибутом класса "hdr-block", а два фрагмента ключевой фразы разместим в блоки <p>.

Класс "hdr-block" здесь назван, как сокращенное от "header block", обозначающее блок заголовка. В дальнейшем, при присвоении атрибутов, всегда будут прописываться названия на английском языке (включая сокращенные) с учетом смыслового значения.

Для того, чтобы различать блоки <p> между собой (это необходимо для возможности в дальнейшим определить им разные смещения по горизонтали с левой стороны), присвоим им разные классы, соответственно "hdr-p1" и "hdr-p2".

И все эти элементы, в свою очередь, объединим в общий блок <div> с атрибутом класса "hdr-title", который будет являться составной частью шапки, наряду с блоком "меню."

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

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="utf-8" />

  5. <title>Заголовок страницы</title>

  6. <meta name="Description" content="Краткое описание содержания страницы">

  7. </head>

  8. <body>

  9. <div class="wrapper">

  10. <header>

  11. <div class="hdr-title">

  12. <div class="hdr-block">

  13. <img src="images/logo.gif" alt="Фавикон"/>

  14. <h2>Название сайта</h2>

  15. </div>

  16. <p class="hdr-p1">Противоугонная маркировка стекол -</p>

  17. <p class="hdr-p2">надежная защита автомобиля от угона</p>

  18. </div>

  19. </header>

  20. <section>Ротатор</section>

  21. <main>Основное содержание</main>

  22. <aside">Сайдбар</aside>

  23. <footer>Подвал</footer>

  24. </div>

  25. </body>

  26. </html>

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

Делаем разметку шапки веб-страницы, картинка 3

Рис.4

Что касается большого шрифта названия сайта, то это произошло от того, что данное словосочетание размещено в блоке <Η1>, являющимся заголовком 1-ого уровня. Поэтому, и увеличился размер шрифта в соответствии с установками браузера по умолчанию.

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

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

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

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

Следует обратить внимание также на отображение фавикона. Сейчас, вместо изображения, можно увидеть только иконку предполагаемой картинки и слово "Фавикон".

Это обусловлено тем, что на данный момент в каталоге сайта "www" пока еще нет папки "images" с картинкой "logo.jpg", которые прописаны в атрибуте тега <img> в строке 13. И поэтому, вместо изображения можно увидеть только знак картинки с ее названием, присвоенным в атрибуте "alt" этого же тега.

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

Что касается адреса, указанного в атрибуте "src" тега <img>, то здесь указанный путь отчисляется от того же каталога, в котором находится и страница. В данном случае наша главная страница находится в корневом каталоге "www".

Если бы эта страница находилась бы в каком-нибудь дочернем каталоге, то для того, чтобы указать путь для этой картинки, в самом начале адреса нужно было бы добавить слеш "/" или использовать для этого другую символику. Более подробно о том как указывать относительные адреса в HTML-коде, можно посмотреть в разделе "HTML: Абсолютные и относительные ссылки справочника "Puzzleweb".

скриншот 31

Разметка меню


Теперь перейдем ко второй части шапки - навигационному меню, где за основной блок меню возьмем элемент <nav">, который в языке HTML5 специально предназначен для размещения приоритетных ссылок.

Ниже показана страница, дополненная фрагментом HTML-кода, в части касающейся меню.

  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4. <meta charset="utf-8" />

  5. <title>Заголовок страницы</title>

  6. <meta name="Description" content="Краткое описание содержания страницы">

  7. </head>

  8. <body>

  9. <div class="wrapper">

  10. <header>

  11. <div class="hdr-title">

  12. <div class="hdr-block">

  13. <img src="images/logo.gif" alt="Фавикон"/>

  14. <h2>Название сайта</h2>

  15. </div>

  16. <p class="hdr-p1">Противоугонная маркировка стекол -</p>

  17. <p class="hdr-p2">надежная защита автомобиля от угона</p>

  18. </div>

  19. <nav class="menu">

  20. <ul>

  21. <li class="activ"><a href="index.html">Главная</a></li>

  22. <li><a href="article.html">О маркировке стекол</a></li>

  23. <li><a href="action.html">Акция</a></li>

  24. <li><a href="righting.html">Запись на маркировку</a></li>

  25. <li><a href="contacts.html">Контакты</a></li>

  26. </ul>

  27. </nav>

  28. </header>

  29. <section>Ротатор</section>

  30. <main>Основное содержание</main>

  31. <aside">Сайдбар</aside>

  32. <footer>Подвал</footer>

  33. </div>

  34. </body>

  35. </html>

Элементу <nav> здесь присвоен атрибут класса "menu", для того, чтобы этот тег в дальнейшем можно было отличить от аналогичного тега, который будет размещен в футере сайта.

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

Само меню построено на элементе маркированного списка <ul>. В принципе, его можно сделать и на других элементах, например на теге <table>, прописав одну строку с необходимым количеством ячеек. Но, в любом случае, самым оптимальным вариантом построения меню являются списки, отличающиеся легкостью построения и простым HTML-кодом.

На рис.5 видно, что список меню обозначен парным тегом <ul> с вложенными в него отдельными пунктами списка, обозначенными тегами <li>. При этом, можно за

Отправить ответ

avatar
  Подписаться  
Уведомление о