• Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

    Этой статьей начинается отдельная рубрика "Как сделать сайт с нуля своими руками", где на реальном примере, с предоставлением исходных материалов (программные коды, файлы и т.п.), будет показано, как действительно можно самостоятельно сделать рабочий сайт.

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

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

  • Текущее состояние создаваемого сайта

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

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

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

    Следует отметить, что первый вариант, предусматривающий использование зеркала сайта, позволяет наглядно оценить его работу при различных разрешениях экрана в диапазоне от 320px до 1920px. Что очень удобно для проверки адаптации во всем допустимом диапазоне.

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Верстка → Делаем разметку области контента с использованием резиновой верстки


Автор: / Дата:

Делаем разметку области контента с использованием резиновой верстки

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

Сегодня рассмотрим как с использованием техники резиновой верстки сделать разметку области контента 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. <Η2>Хотите защитить автомобиль от угона?</Η2>

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

  11. </div>

  12. </div>

  13. </section>

Рис.2

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

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


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

В соответствии с дизайн-макетом эти элементы располагаются в две колонки ниже ротатора. Причем предусматривается, что сайдбар будет иметь фиксированную стандартную ширину в 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>

Рис.4

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

Разметка блока основного содержания


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

В части, касающейся текста, его будем формировать обычным образом с помощью тегов заголовков разного уровня: <Η1>, <Η2>, <Η3>, а также абзаца <p>. В качестве разделительных линий будем использовать тег <hr>.

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

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

  2. <main>

  3. <Η1>В чем суть маркировки стекол</Η2>

  4. <hr>

  5. <p class="hdr-p1">Недавно, мне поведал один компетентный в этой области человек, что ...</p>

  6. <Η2>Комментарии</Η2>

  7. <hr>

  8. </main>

  9. </div>

Рис.5

Разметка блока сайдбара


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

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

Если кто не знаком с элементом <form>, то в соответствующем разделе сайта "Puzzleweb" можно достаточно подробно ознакомиться с особенностями его работы и со всеми имеющимися у него элементами и атрибутами.

скриншот 32

В нашем случае, в форме будем использовать элементы <input>, в которых атрибутом type="text" создадим одно строчные текстовые поля, а атрибутом type="submit" кнопку для отправки формы на сервер.

Кроме этих элементов в нашу форму включим тег <select>, который предназначен для формирования интерфейса в виде раскрывающегося списка. В нашем случае это необходимо для выбора критерия поиска из таких вариантов как, "любое слово", все слова" и точное совпадение". О том, зачем нужно различать методы поиска подробно будет разъяснено в дальнейшем при непосредственном формировании этой системы.

Также, для добавления текста к полям формы используем элементы <label>, в которых атрибутом for и соответствующим атрибутом id для <input> свяжем эти элементы между собой.

Такая связка позволяет выбирать элементы формы кликая не только на поле ввода, но и на текст элемента <label>.

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

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

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

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

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

  1. <aside>

  2. <div class="seach">

  3. <Η3>Поиск</Η2>

  4. <form action="#" method="post">

  5. <label for="word"> Ключевое слово:</label>

  6. <input type="text" id="word" name="word" placeholder="Слово/фраза">

  7. <p>Критерий поиска:</p>

  8. <select name="metod">

  9. <option value="1"> Любое слово

  10. <option value="2"> Все слова

  11. <option value="3"> Точное совпадение

  12. </select>

  13. <input type="submit" value="Поиск" >

  14. </form>

  15. </div>

  16. <div class="subscribe">

  17. <Η3>Подписка</Η2>

  18. <form action="#" method="post">

  19. <label for="name"> Ваше имя:</label>

  20. <input type="text" id="name" name="name" placeholder="Имя">

  21. <label for="email"> Ваш e-mail:</label>

  22. <input type="text" id="email" email="email" placeholder="e-mail">

  23. <input type="submit" value="Подписаться" >

  24. </form>

  25. </div>

  26. <div class="banner">

  27. <img src="/images/banner.jpg" alt="Баннер"/>

  28. </div>

  29. </aside>

Рис.6

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

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

В следующей статье, используя стили CSS оформим в соответствии с дизайн-макетом блок ротатора.

Исходные файлы сайта


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

Исходные файлы бесплатно предоставляются только зарегистрированным пользователям.

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

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments