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

    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.

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


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

Создаем меню сайта с помощью стилей CSS

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

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

Содержание


  • Преобразование списка в ячейки таблицы
  • Установка ширины меню
  • Формирование кнопок меню
  • Формирование ссылок меню
  • Формирование активной кнопки
  • Создание меню футера
  • Исходные файлы сайта

Преобразование списка в ячейки таблицы


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

  1. <nav class="menu">

  2. <ul>

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

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

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

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

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

  8. </ul>

  9. </nav>

Рис.1 Фрагмент HTML-кода меню

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

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

Для того, чтобы преобразовать элементы списка в такой вид используем свойство display для элемента <nav> с классом menu, а также для элементов ul и li, где значение table свойства display означает присвоение элементу <nav> свойств таблицы, значения table-row - для ul свойств ряда, а значение table-cell - для li свойств ячейки.

  1. .menu {

  2. display: table;

  3. }

  4. .menu ul {

  5. display: table-row;

  6. }

  7. .menu ul li {

  8. display: table-cell;

  9. list-style-type: none;

  10. }

Рис.2

Кроме назначения в качестве ряда таблицы для ul и ячеек для li здесь также убраны метки списка свойством list-style-type.

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

Ниже, на рис.3 показан вид меню шапки до назначения свойств CSS, на рис.4 - после.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 1

Рис.3 Вид меню до назначения свойств CSS

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 2

Рис.4 Вид меню после назначения свойств CSS

Установка ширины меню


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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 3

Рис.5

В соответствии с дизайн-макетом, расстояние слева и справа от меню до границ веб-страницы составляет по 100px.

С учетом того, что ширина изображения дизайн-макета 1200px, то ширина меню будет составлять 83.33% (1200px - 2 * 100px / 1200px * 100%) от всей ширины страницы. Центрирование, же сделаем с помощью свойства margin, в котором вправо и влево назначим значения auto, и таким образом расположим элемент <nav> по центру.

Исходя из этого, назначим свойства блоку <nav> следующим образом.

  1. .menu {

  2. display: table;

  3. width: 83.33%;

  4. margin: 0 auto;

  5. }

  6. .menu ul {

  7. display: table-row;

  8. }

  9. .menu ul li {

  10. display: table-cell;

  11. list-style-type: none;

  12. }

Рис.6

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 4

Рис.7

Формирование кнопок меню


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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 5

Рис.8

Из панели "Свойства" можно определить, что в качестве бордюров используется линия толщиной в 1px и с округлением в верхних углах с радиусом 6px при высоте ячеек в 50px.

На следующем скриншоте показано, как определить цвет бордюров.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 6

Рис.9

Цвет бордюров имеет значение 2e376c.

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

  1. .menu {

  2. display: table;

  3. width: 83.33%;

  4. margin: 0 auto;

  5. }

  6. .menu ul {

  7. display: table-row;

  8. }

  9. .menu ul li {

  10. height: 50px;

  11. display: table-cell;

  12. list-style-type: none;

  13. width: 20%;

  14. border: 1px solid #2e376c;

  15. border-radius: 6px 6px 0 0;

  16. box-shadow: 0px 0px 3px 0px #2e376c;

  17. }

Рис.10

Из назначенных свойств, очевидно, потребуется пояснения двух из них, а именно:

  • ячейкам назначена ширина в размере 20% исходя из общего количества (100% / 5);
  • для сглаживания линий бордюров свойством box-shadow добавлена тень с размытостью 3px.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 7

Рис.11

Формирование ссылок меню


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

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

  • шрифт "Arial" из семейства шрифтов без засечек;
  • стиль - стандартный (не курсивный, жирный);
  • размер - 1.0em (16px);
  • цвет - #2e376c.

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

  1. .menu {

  2. display: table;

  3. width: 83.33%;

  4. margin: 0 auto;

  5. }

  6. .menu ul {

  7. display: table-row;

  8. }

  9. .menu ul li {

  10. height: 50px;

  11. display: table-cell;

  12. list-style-type: none;

  13. width: 20%;

  14. border: 1px solid #2e376c;

  15. border-radius: 6px 6px 0 0;

  16. box-shadow: 0px 0px 2px 0px #2e376c;

  17. vertical-align: middle;

  18. }

  19. .menu ul li a {

  20. height: 50px;

  21. width: 1600px;

  22. display: table-cell;

  23. vertical-align: middle;

  24. text-align: center;

  25. font-size: 1em;

  26. font-weight: bold;

  27. line-height: 1;

  28. color: #2e376c;

  29. text-decoration: none;

  30. padding: 0 5px;

  31. }

Рис.12

Кроме свойств шрифта, здесь для ссылок добавлены еще и другие свойства, такие как:

  • свойство vertical-align со значением middle для того, чтобы выровнить текст ячеек по вертикали;
  • свойство text-align со значением center, а также width с максимальным значением, для выравнивания текста ячеек по горизонтали;
  • свойство line-height со значением 1 уменьшает межстрочный интервал;
  • свойство text-decoration со значением none удаляет подчеркивание;

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 8

Рис.13

Формирование активной кнопки


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

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 9

Рис.14

А, на этом скриншоте показано, как определить цвет фона активной кнопки.

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 10

Рис.15

Таким образом, можем получить следующие данные.

  • смещение тени по горизонтали - 1px;
  • смещение тени по вертикали - 3px;
  • размытость тени - 6px;
  • цвет тени - 4c5150.
  • цвет фона - e1e0e2

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

Исходя иэ этого назначим соответствующие стили активно кнопке.

  1. .menu {

  2. display: table;

  3. width: 83.33%;

  4. margin: 0 auto;

  5. }

  6. .menu ul {

  7. display: table-row;

  8. }

  9. .menu ul li {

  10. height: 50px;

  11. display: table-cell;

  12. list-style-type: none;

  13. width: 20%;

  14. border: 1px solid #2e376c;

  15. border-radius: 6px 6px 0 0;

  16. box-shadow: 0px 0px 2px 0px #2e376c;

  17. vertical-align: middle;

  18. }

  19. .menu ul li a {

  20. height: 50px;

  21. width: 1600px;

  22. display: table-cell;

  23. vertical-align: middle;

  24. text-align: center;

  25. font-size: 1em;

  26. font-weight: bold;

  27. line-height: 1;

  28. color: #2e376c;

  29. text-decoration: none;

  30. padding: 0 5px;

  31. }

  32. .activ a {

  33. background: #e1e0e2;

  34. box-shadow: 1px 3px 6px 0px #4c5150 inset;

  35. }

  36. .menu ul li a:hover {

  37. background: #eeefcd;

  38. box-shadow: 1px 3px 6px 0px #4c5150 inset;

  39. }

Рис.16

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание меню сайта, картинка 11

Рис.17

При этом, меню резиновое, способное сжиматься и растягиваться в пределах установленного диапазона: от 1000px до 1600px. В этом можно убедиться перейдя по ссылке на тестовый сайт и посмотрев, как оно отрабатывает при изменении ширины экрана.

Создание меню футера


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

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

  1. .ftr-menu {

  2. padding-top: 15px;

  3. display: table;

  4. width: 83.33%;

  5. padding-left: 8.33%;

  6. }

  7. .ftr-menu ul {

  8. display: table-row;

  9. }

  10. .ftr-menu ul li {

  11. height: 45px;

  12. display: table-cell;

  13. list-style-type: none;

  14. width: 20%;

  15. vertical-align: middle;

  16. }

  17. .ftr-menu ul li a {

  18. height: 45px;

  19. width: 1600px;

  20. display: table-cell;

  21. vertical-align: middle;

  22. text-align: center;

  23. font-size: 1em;

  24. font-weight: bold;

  25. line-height: 1;

  26. color: #fbc406;

  27. text-decoration: none;

  28. padding: 0 5px;

  29. }

  30. .ftr-activ a {

  31. background: #487673;

  32. box-shadow: 1px 3px 6px 0px #4c5150 inset;

  33. border-radius: 6px;

  34. }

  35. .ftr-menu ul li a:hover {

  36. text-decoration: underline;

  37. }

  38. footer p {

  39. margin-top: 23px;

  40. text-align: center;

  41. font-size: 1.1875em;

  42. color: #fff;

  43. }

Рис.18

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

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


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

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

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

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


Комментарии


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

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

comments powered by HyperComments