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

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

Содержание


  • Формируем стандартные нумерованные списки
  • Оформляем нумерованные списки с помощью автоматического счета и нумерации
  • Формируем стандартные маркированные списки
  • Стилизуем маркированные списки с использованием спецсимволов
  • Исходные файлы сайта

Формируем стандартные нумерованные списки


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

Поэтому, в первую очередь сделаем его разметку. Обычно для этого используется элемент <ol>, в котором его содержимое размещается непосредственно в тегах <li>.

Ниже показан HTML-код нумерованного списка, который вполне возможно использовать во втором разделе текста оформляемой статьи. При этом, для того, чтобы не загромождать статью ненужным тестом, содержимое элементов текстовых абзацев <p> здесь приведено в сокращенном виде (полное содержание представленного фрагмента статьи можно посмотреть в прилагаемых дополнительных материалах в файле "main.php" каталога "articles").

  1. <ol class="list-number">

  2. <li>

  3. <p>После угона ворам придется...</p>

  4. <p>...</p>

  5. <p>Какой же вор захочет выбрасывать...</p>

  6. </li>

  7. <li>

  8. <p>В случае угона автомобиля...</p>

  9. </li>

  10. <li>

  11. <p>После кражи такого автомобиля...</p>

  12. <p>Потому, естественно, возникает вопрос...</p>

  13. </li>

  14. </ol>

Рис.1 Разметка нумерованного списка;

Как видно, здесь для унификации нумерованного списка элементу <ol> присвоен класс "list-number". Элементами же его являются теги <li>, в которых содержимое пунктов располагается в текстовых абзацах <p>.

Для того, чтобы посмотреть как выглядит стандартный нумерованный список, назначим некоторые свойства CSS, выровняв необходимые отступы его элементов <li> и вложенных в них абзацев <p>.

  1. .list-number {

  2. margin-bottom: .25em;

  3. }

  4. .list-number li {

  5. margin: .25em 0 0 1.75em;

  6. }

  7. .list-number li p {

  8. text-indent: 0;

  9. }

Рис.2 CSS-код обычного нумерованного списка

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

Для увеличения / уменьшения размера изображения кликните по картинке
Обычный нумерованный список

Рис.3 Скриншот обычного нумерованного списка

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

  • арабские числа (1, 2, 3,...);
  • арабские числа с нулем для цифр меньше десяти (01, 02, 03,...);
  • заглавные латинские буквы (A, B, C,...);
  • строчные латинские буквы (a, b, c,...);
  • заглавные римские числа (I, II, III,...);
  • римские числа в нижнем регистре (i, ii, iii,...);
  • и.т.д.

Что касается остальных возможностей оформления нумерованных списков, то они в основном сводятся к одновременному изменению стандартных свойств элементов <li> и их идентификаторов. Что позволяет изменять такие общие параметры, как размер шрифта, цвет, фон и отступы.

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

Оформляем нумерованные списки с помощью автоматического счета и нумерации


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

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

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

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

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

Исходя из этого и выполним назначение необходимых свойств CSS. При этом тип идентификаторов оставим по умолчанию - арабские числа (1, 2, 3,...).

И в первую очередь удалим стандартные идентификаторы используя свойство list-number для элемента <ol> с классом "list-number", как показано в следующей таблице (как и ранее, добавленные или измененные строки обозначены светлым фоном, существующие - более темным).

  1. .list-number {

  2. list-style-type: none;

  3. margin-bottom: .25em;

  4. }

Рис.4 CSS-код удаление стандартных элементов нумерации

Для увеличения / уменьшения размера изображения кликните по картинке
Нумерованный список без стандартных элементов нумерации

Рис.5 Скриншот нумерованного списка без стандартных элементов нумерации

На скриншоте видно, что теперь в списке отсутствуют порядковые номера его пунктов.

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

  • counter-reset - назначает переменную, которая будет использована для хранения и установки начального значения счётчика отображаемого элемента (по умолчанию начальное значение равно 0);
  • counter-increment - увеличивает значения счётчика, созданного с помощью свойства counter-reset на величину приращений (по умолчанию значение приращения счётчика равно 1);
  • content - отображает новое генерируемое содержимое в HTML-странице до или после используемого элемента в зависимости от типа применяемого псевдоэлемента - ::before или ::after, соответственно.

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

  1. .list-number {

  2. list-style-type: none;

  3. margin-bottom: .25em;

  4. counter-reset: number;

  5. }

  6. .list-number li {

  7. margin: .25em 0 0 1.75em;

  8. position: relative;

  9. }

  10. .list-number li::before {

  11. counter-increment: number;

  12. content: counter(number);

  13. position: absolute; left: -1.375em; top: .1875em;

  14. }

Рис.6 CSS-код создания новых элементов нумерации

Помимо ранее упомянутых свойств генерации и отображения элементов для установленной переменной счетчика number (поз.4,11,12), здесь также следует обратить внимание на использование относительного позиционирования для элемента .list-number li (поз.8) и абсолютного - для .list-number li ::before (поз.13).

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

Для увеличения / уменьшения размера изображения кликните по картинке
Создание новых элементов нумерации

Рис.7 Скриншот списка со вновь созданными элементами нумерации

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

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

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

Следует обратить внимание на то, что в отличие от ранее рассматриваемых таблиц CSS, используемая здесь нумерация строк окончательного варианта использована в соответствии с общей таблицей CSS, размещенной в файле "main.css", который можно найти в дополнительных материалах.

  1. .list-number {

  2. list-style-type: none;

  3. margin-bottom: .25em;

  4. counter-reset: number;

  5. }

  6. .list-number li {

  7. margin: .25em 0 0 1.75em;

  8. position: relative;

  9. }

  10. .list-number li::before {

  11. counter-increment: number;

  12. content: counter(number);

  13. position: absolute; left: -1.9375em; top: .3125em;

  14. font-size: 0.875em;

  15. color: #bd072e;

  16. background: #eee;

  17. width: 1.25em;

  18. text-align: center;

  19. border-radius: 0.25em;

  20. box-shadow: -.0625em -.0625em .3125em 0 #8b8e8d inset;

  21. }

Рис.8 CSS-код стилизованного нумерованного списка

Как видно, для оформления вновь созданных идентификаторов, формируемых переменной счетчика number, здесь использованы обычные свойства CSS. Такие, как размер шрифта font-size (поз.366), цвет color (поз.367), фон background (поз.368), ширина width (поз.369), выравнивание text-align (поз.370), свойство скругления углов border-radius (поз.371) и тени box-shadow (поз.372).

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

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

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

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

Рис.9 Скриншот стилизованного нумерованного списка

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

Если сравнить с тем, что было до этих преобразований, при стандартном исполнении (рис.1), то можно отметить, что теперь внешний вид нумерованного списка объективно стал куда более интересным, чем ранее.

Формируем стандартные маркированные списки


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

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

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

  1. <ul class="list-custom">

  2. <li>если угон все же произошел...</li>

  3. <li>дополнительная маркировка легкосъемных...</li>

  4. <li>многие страховые компании...</li>

  5. <li>немаловажным фактом является...</li>

  6. </ul>

Рис.10 Разметка маркированного списка;

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

Также можно обратить внимание на то, что для унификации маркированных списков, здесь в качестве селектора используется класс со значением "list-custom" (в нумерованных списках значение этого атрибута мы определили, как "list-number").

Теперь, для того, чтобы посмотреть, как будет выглядеть маркированный список по умолчанию, с помощью свойств CSS выровним его элементы li.

  1. .list-custom li {

  2. margin: .25em 0 0 2.25em;

  3. }

Рис.11 CSS-код выравнивания стандартного маркированного списка

А затем, снова обновим главную страницу. Внешний вид полученного стандартного маркированного списка показан на следующем скриншоте.

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

Рис.12 Скриншот стандартного маркированного списка

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

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

Вот этим мы и займемся в следующей части.

Стилизуем маркированные списки с использованием спецсимволов


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

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

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

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

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

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

скриншот 14

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

Для увеличения / уменьшения размера изображения кликните по картинке
Определение шестнадцатеричного кода выбранного символа

Рис.13 Определение шестнадцатеричного кода выбранного символа

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

Можно воспользоваться и другими сервисами для поиска подходящих символов. Например belarusweb.net, где также имеется достаточно большое количество интересных символов с различными смайликами и другими графическими фигурами. В общем, с поиском символов для маркеров затруднений возникнуть не должно.

скриншот 15

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

По сути, оформление маркированных списков нестандартным способом выполняется аналогично тому, как мы это делали ранее с нумерованным, рассмотренным во втором разделе статьи. Где с начала удаляются стандартные идентификаторы, а затем, на их место помощью свойства content вставляются новые. Причем, как и в предыдущем случае, для этого используется псевдоэлемент ::beforer с соответствующим позиционированием.

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

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

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

  1. .list-custom {

  2. list-style-type: none;

  3. }

  4. .list-custom li {

  5. margin: .25em 0 0 2.25em;

  6. position: relative;

  7. }

  8. .list-custom li::before {

  9. content: '\2713';

  10. position: absolute; left: -1.9375em; top: .375em;

  11. font-size: 0.6875em;

  12. color: #bd072e;

  13. background: #eee;

  14. width: .5em;

  15. font-weight: bold;

  16. padding: 0 .5em 0 .1875em;

  17. border-radius: 0.25em;

  18. box-shadow: -.0625em -.0625em .3125em 0 #8b8e8d inset;

  19. }

Рис.14 CSS-код стилизованного маркированного списка

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

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

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

Рис.15 Скриншот стилизованного маркированного списка

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

Таким образом мы оформили нумерованный и маркированный списки придав некоторую уникальность внешнему виду их идентификаторов при достаточно хорошем сочетании с существующим дизайном сайта.

И что немаловажно, теперь несложно будет использовать данный стиль оформления списков и в других статьях сайта. Для чего достаточно будет при формировании контента присваивать элементам ol или ul соответствующие классы: .list-number - для нумерованных и .list-custom - для маркированных списков.

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

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

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


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

  • Файлы каталога www
  • Таблицы базы данных MySQL

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

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

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


Комментарии


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

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

comments powered by HyperComments