Разное

Оформление блока css: Красивое оформление блоков на сайте

05.07.2021

Содержание

43 примера css3

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

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

Конечно самыми популярными и  красивыми являются эффекты анимации и 3d.

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

Как говориться лучше раз увидеть, чем 100 раз услышать. Поэтому переходим к основной части этого поста — примеры и использование css3.

 

1. Информация о продукте с помощью css3

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

Скачать

Пример

 

2. Блок slideup

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

Скачать

Пример

 

3. Checkbox в стиле apple

Анимационный checkbox на css3 в стиле iphone.

Скачать

Пример

 

4. Анимационные кнопки с помощью css3

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

Скачать

Пример

 

5. Анимационные звезды css3

Красивые и необычные звезды с анимацией при наведении.

Скачать

Пример

 

6. Красивые и утонченные кнопки BonBon css3

Очень красивые и необычные кнопки с эффектом 3d, это хорошо видно при нажатии на кнопку.

Пример создания кнопок

 

7. Эффект 3D с помощью css3

Текст в виде 3D, который можно посмотреть с помощью 3D очков.

Скачать

Пример    

 

8. 3d анимация с «чистым» css3

Интересная подача блоков в 3d с блоком описания.

Скачать

Пример

 

9. Речевые облака css3

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

Скачать

Пример

 

10. Фотографии в стиле Polaroids

Делаем фотографии в стиле поляроид, и все это при помощи одного лишь css2.1 и css3.

Скачать

Пример

 

11. Блок со сложенным углом

Простые блоки с загнутым углом на css3 в стиле flat. Хорошо отображаются в современных браузерах.

Скачать

Пример

 

12. Тень для блоков с помощью css3

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

Скачать

Пример

 

13. Иконки css3

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

Скачать

Пример 

 

14. Стикеры css3

Список меню или же просто заметки для вашего сайта в виде стикера.

Скачать

 

15. Солнечная система css3

Модель солнечной системы, выполнена с точными пропорциями и без использования java скриптов и html.

Скачать

Пример

 

16. Иконки соц. сетей

Иконки социальных сетей с помощью css3. Это экспериментальные иконки, которые выполнены без единого изображения и java скриптов.

Скачать

Пример

 

17. Крутой Flip эффект

Хороший пример на котором можно показать работу rotateY. Смотрится очень эффектно и легко. И все это css3.

Скачать

Пример

 

18. Меню с помощью css спрайтов

Меню выполнено при помощи css спрайтов. Корректное отображение на всех популярных браузерах включая IE7+.

Скачать

Пример 

 

19. Красивая и интересная таблица

Таблица которая хорошо подойдет для прайс листа на сайте, все выполнено на css2.1 и css3.

Скачать

Пример

 

20. Прозрачные границы с background-clip

Прозрачный border с помощью css3 и с background-clip.

Скачать

Пример

 

21. Размытие фона css3

Простой и красивый эффект для модального окна с эффектом размытия (матового стекла).

Скачать

Пример

 

22. Эффект 3d текста при наведении

Эффект 3d при наведении с помощью тени, смотрится достаточно интересно.

Скачать

Пример

 

23. Ленты 3d при помощи css3

3d ленты на основе одного лишь css3. Этого можно добиться с помощью тени и правильном подборе цветовой гаммы.

Скачать

Пример

 

24. Прозрачные накладки css3

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

Пример

 

25. Кнопки для сайта css3

Красивые кнопки без использования изображений. Скачать 

Пример

 

26. Вертикальное меню css3

Интересная подача вертикального меню с помощью анимации.

Скачать

 

27. Необычный поиск для сайта

Существуют много подач полей поиска и вот еще одна идея с помощью css3 и jquery с 3d эффектом.

Скачать

Пример

 

28. Слайдер — витрина средством css3

Очень эффектная презентационная страница с помощью слайдера выполненного на css3.

Скачать

Пример

 

29. Подсказки css3

Подсказки хорошо подойдут для сайта продажи шаблонов или презентации.

Скачать

Пример

 

30. Слайдер css3 с эффектом Parallax

Слайдер с эффектом паралакс. Смотрится слайдер легко и выполнено все при помощи css3.

Скачать

Пример

 

31. Вкладки с анимацией css3

Табы для сайта с помощью css3 и с разными анимациями. В примере представлены 4 вида вкладок.

Скачать

Пример

 

32. Форма входа

Форма входа и регистрации с помощью css3 и HTML5. В примере представлены 3 разных анимации при нажатии на кнопку Join us.

Скачать

Пример

 

33. Аккордеон для сайта

Аккордеон css3 с разными видами анимации при нажатии на один из пунктов.

Скачать

Пример

 

34. Переход между страницами css3

Эффект перехода между страницами, но в большой степени это напоминает вкладки css3.

Скачать

Пример

 

35. Панель изображений css3

Переход между изображениями с эффектом «жалюзи» и с разной их подачей.

Скачать

Пример

 

36. Анимационный баннер 

С появлением css3 появилась новая возможность создавать интересные и информативные баннеры с помощью css3.

Скачать

Пример

 

36. Галерея с фильтром на css3

Галерея с фильтром для изображений, который работает с помощью css3 и html5.

Скачать

Пример

 

37. Эффект для миниатюры средствами css3 и jquery

Интересная подача превью при наведении. Есть интересные идеи и подачи в примере.

Скачать

Пример

 

38. Фоновый слайд шоу на весь экран css3 

Слайд шоу для заднего фона на сайте с помощью одного лишь css3. Смотрится это все очень легко и сочно!

Скачать

Пример

 

39. Лайтбокс для изображений css3

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

Скачать

Пример

 

40. Угловые формы с помощью css3

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

Скачать

Пример

 

41. Эффект «брызги» css3

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

Скачать

Пример

 

42. Эффекты типографии css3

Красивые и необычные эффекты при наведении с помощью css3 и jquery. Пример говорит сам за себя.

Скачать

Пример

 

43. Кнопки с анимацией css3

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

Скачать

Пример

 

ЕЩЕ ОДНА ПОДБОРКА ПРИМЕРОВ CSS3 —>

Оформление блока. Div + class

Для создания кнопки, которая выполняет какой-либо JavaScript-код отлично подходят блоки div. Но изначально они не оформлены должным образом. Это и нужно исправить начинающему верстальщику. Для начала допустим, что мы уже создали html (хоть на рабочем столе). Запишем в него, например, это:

1

2

3

4

5

6

<html>

    <head>

    </head>

    <body>

    </body>

</html>

Это базовый файл, с которого всегда можно начинать верстать любую веб-страницу. Теперь добавим style и, собственно, сам div:

1

2

3

4

5

6

7

8

9

10

11

12

13

<html>

   <head>

      <style>

         div.button{

            display:inline;

            background:#FF7733;

         }

      </style>

   </head>

   <body>

      <div class='button'></div>

   </body>

</html>

И вот что получилось: Свойство display:inline делает блок div строчным элементом. И теперь с ним можно работать, как с частью текстового контента сайта. Но на красивую кнопку это, пока что, мало похоже. Для придания кнопке приятного вида можно изменить цвет и отступы текста.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<html>

   <head>

      <style>

         div.button{

            display:inline;

            padding:15px;

            color:#FFFFFF;

            background:#FF7733;

         }

      </style>

   </head>

   <body>

      <div class='button'></div>

   </body>

</html>

И получится: вот это. Давайте представим, что нам она понравилась. Осталось показать, что этот блок ведёт себя, как кнопка. Для этого необходимо сделать так называемый ховер (от англ. hover). Давайте добавим в style:

1

2

3

div.button:hover{

   background:#FF5500;

}

Попробуйте навести на эту кнопку мышью и курсор изменится, благодаря свойству cursor:pointer, а цвет изменится из-за псевдокласса hover (и background, разумеется) Маленький бонус за то, что дочитали — круглая кнопка:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<html>

   <head>

      <style>

         div.button{

            border-radius:50px;

            width:100px;

            height:100px;

            color:#FFFFFF;

            background:#FF7733;

            cursor:pointer;

            line-height:100px;

            text-align:center;

         }

         div.button:hover{

            background:#FF5500;

         }

      </style>

   </head>

   <body>

      <div class='button'></div>

   </body>

</html>

Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне [email protected]

Адаптивные блоки с анимацией для одностраничного сайта

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

Еще оформление элементов на сайте:

Описание эффекта: у блока есть скрытая часть и видимая. Видимая часть — это иконка и название выгоды, а скрытая часть — это подробное описание выгоды, которое появляется при наведении. Также при наведении добавляется активному блоку для создания эффекта объема.

Чтобы увидеть эффекты перейдите на страницу с примером:

Посмотреть примерСкачать

Если у Вас есть трудности с созданием лендинга, тогда начните с данного мини-курса: «Лендинг за 60 минут».

Вот как выглядит блок при наведении:

Как сделать красивое оформление для своего продающего сайта?

1 HTML структура

Сперва подключаем иконки от FontAwesome между тегами <head></head>, которые будем использовать для описания:

HTML КОД

1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

У нас есть один общий блок, в котором находятся все 3 блока с описанием и иконками:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div>
    <div>
        <span></span>
        <p>Выгода 1</p>
        <p>Дополнительный<br>скрытый текст 1</p>
    </div>
 
    <div>
        <!-- Содержимое 2-го блока -->
    </div>
 
    <div>
        <!-- Содержимое 3-го блока -->
    </div>
</div>

Несколько слов по структуре:

  • Строки: с 1 по 15 — общий блок, который содержит 3 блока с описанием.
  • Строки: со 2 по 6 — один отдельный блок с описанием выгоды.
  • Строка: 3 — иконка блока.
  • Строка: 4 — видимая часть с описанием выгоды.
  • Строка: 5 — скрытая часть с подробным описанием выгоды.

Структура прозрачна и проста. Переходим к оформлению и создании анимации.

2 CSS стили

Для создания анимации нам понадобится лишь CSS3 и никакого Javascript.

Прописываем общие стили для 3-х блоков:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

.bulletsBlock:after {
    content: "";
    display: table;
    clear: both;
}
 
.bulletsBlock > div {
    width: 30%;
    float: left;
    background: rgba(0,0,0,0.3);
    margin-left:5%;
    text-align: center;
    position: relative;
    padding-bottom: 31.7%;
    cursor: pointer;
    -webkit-transition:all 0.35s linear;
    transition:all 0.35s linear;
}
 
.bulletsBlock > div:first-child {
    margin-left:0;
}
 
/*Тень снизу у блока при наведении*/
.bulletsBlock > div:hover {
    -webkit-box-shadow: 0 35px 35px -35px #000000;
    -moz-box-shadow: 0 35px 35px -35px #000000;
    box-shadow: 0 35px 35px -35px #000000;
}

Далее идет иконка и ее анимация при наведении:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.bullet-item span{
    line-height: 1.5em;
    font-size: 12.5em;
    color:#fff;
    position: absolute;
    top:0;
    left:0;
    display: block;
    width: 100%;
    -webkit-transition:all 0.35s ease;
    transition:all 0.35s ease;
}
 
/*Анимация иконки при наведении - уменьшение и сдвиг вверх*/
.bulletsBlock > div:hover span.iconBullet{
    line-height: 1.35em;
    font-size: 10.625em;
    top:-2.7%;
}

Далее напишем стили для блоков с текстовым описанием:

CSS КОД

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

.titleBullet, .hideText {
    position: absolute;
    left:0;
    bottom:0;
    text-align: center;
    width: 100%;
    margin: 0;
    color: #fff;
    -webkit-transition:all 0.35s ease;
    transition:all 0.35s ease;
}
 
.titleBullet {
    line-height: 2.5em;
    font-size: 2.1875em;
    background:#3B3B3B;
    z-index: 10;
}
 
.hideText {
    line-height: 1.3em;
    font-size: 1.25em;
    padding: 1em 0;
    background:#3B3B3B;
    font-weight: 300;
    z-index: 8;
    height: 50px;
    -webkit-transition:all 0.35s linear 0.2s;
    transition:all 0.35s linear 0.2s;
}
 
/*Анимация при наведении видимого текстового блока*/
.bulletsBlock > div:hover p.titleBullet{
    bottom:80px;
}
 
/*Анимация при наведении скрытого текстового блока*/
.bulletsBlock > div:hover p.hideText{
    background:#454545;
}

На этом всё!

Вывод

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

ВНИМАНИЕ: я понимаю что не у всех получается установить эффекты, скрипты и плагины, которые находятся на сайте, поэтому я сделал возможность проконсультироваться по любому вопросу в сайтостроении здесь: SKYPE Консультация!

Успехов!

С Уважением, Юрий Немец

Варианты оформления блока «Наша команда» и профиля пользователя

В этой статье вы найдете подборку примеров кода с ресурса codepen.io, которые предлагают интересные решения с точки зрения дизайна и кода для таких блоков вашего сайта (одной из страниц), как «Наша команда» («Our Teams») и профиль пользователя или автора статьи.

Блок «Наши профессионалы»

Блок с эффектом появления прямоугольника с ссылками на соцсети

Автор shamim khan

See the Pen meet our team by shamim khan (@shamim539) on CodePen.18892

Фото в профиль + социконки

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

Автор neil pearce

See the Pen UI Profile Cards by neil pearce (@2975) on CodePen.18892

Фото команды с интересным hover-эффектом

Разметка строится на основе Bootstrap 4.1.2 и иконках Font Awesome 4.7.0, которые мы видим при наведении на блок.

Автор FrankieDoodie

See the Pen Profile Card UI Design Cool Hover Effect by FrankieDoodie (@FrankieDoodie) on CodePen.18892

Блок «Наша команда» с затемнением

При наведении на фото все остальные затемняются. Пример сделан на Vue.js, информация о пользователях подтягивается из JavaScript.

Автор Mert Cukuren

See the Pen our team showcase by Mert Cukuren (@knyttneve) on CodePen.18892

Блок «Meet Our Team»

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

Автор Aly

See the Pen Meet Our Team by Aly (@afasanistan) on CodePen.18892

Второй вариант оформления с несколько иным эффектом при наведении.

Автор Aashima

See the Pen Meet our team by Aashima (@Aashima) on CodePen.18892

Белые прямоугольники вместо черных.

Автор Nodws

See the Pen Team page hover profiles by Nodws (@nodws) on CodePen.18892

И еще один подобный вариант, но с красным фоном при наведении и забавными фото.

Автор Mauritius D’Silva

See the Pen Team member profile display by Mauritius D’Silva (@mauritiusdsilva) on CodePen.18892

Векторные фото вместо изображений и прикольный hover-эффект.

Автор Baahubali

See the Pen Our Team by Baahubali (@anupkumar92) on CodePen.18892

И еще один подобный блок от того же автора Baahubali:

See the Pen Our Team by Baahubali (@anupkumar92) on CodePen.18892

Вариант для профиля моделей

Автор Aashima

See the Pen Pure Css Team Showcase by Aashima (@Aashima) on CodePen.18892

Переворачивающиеся при наведении карточки

Автор Pop Razvan

See the Pen CSS Flip Cards by Pop Razvan (@roppazvan) on CodePen.18892

Блок «Our Team» с анимацией

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

Автор Paulina Hetman

See the Pen Meet our team by Paulina Hetman (@pehaa) on CodePen.18892

Блок «Meet Our Team»

Интересный подход к расположению фото и информации о каждом из участников команды

Автор shamim khan

See the Pen Meet our team by shamim khan (@shamim539) on CodePen.18892

Отзывчивые блоки «Наша команда» в стиле «Material Design»

Восхищает подход автора к созданию этого примера — он не только подобрал интересные фото известных американских актеров, но и добавил интересную информацию о них (на английском языке, разумеется). При клике на иконку-гамбургер мы можем прочитать о любом актере. Для разметки был использован Bootstrap 3 и Font Awesome 4.2. Есть также небольшой код на jQuery.

Автор David Foliti

See the Pen Material Design — Responsive card by David Foliti (@marlenesco) on CodePen.18892

Информация о команде (пользователях) с несколькими вариантами пролистывания

Каждый пользователь как отдельный слайд с 4-мя эффектами появления.

Автор Arafat Hussein

See the Pen Pure CSS Sliders by Arafat Hussein (@rfthusn) on CodePen.18892

Команда (профиль пользователей) в виде карточек

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

Автор Tobias

See the Pen Daily UI #006 User Profile by Tobias (@Tbgse) on CodePen.18892

Профиль пользователя в светлой и темной теме

Одни и те же данные реализованы на темном и светлом фоне.

Автор Wanderson Jackson

See the Pen Profile-card-ui by Wanderson Jackson (@Wandersonjack) on CodePen.18892

Профиль пользователя с градиентным фоном и скошенным углом

Очень приятное решение для профиля активного пользователя Dribble, Twitter и Instagram. Вверху есть иконки, которые оставляют место для добавления кода, позволяющего отправить сообщение или посмотреть более подробную информацию. Фото затенено градиентным фоном-оверлеем с помощью псевдоэлемента ::after.

Автор Arafat Hussein

See the Pen Profile Card with Slanted Edge by Codeshape (@codeshape) on CodePen.18892

Несколько вариантов профиля пользователя со скосом

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

Автор Arjun Amgain

See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.18892

Профиль актера с видео-фоном и прокручиваемыми постерами от того же автора.

Автор Arjun Amgain

See the Pen User Profile by Travis Williamson (@travisw) on CodePen.18892

Здесь тоже использован градиент в качестве оверлея, но фото не сверху, а слева + добавлена анимация появления блока с профилем.

Автор Gabrielle Wee

See the Pen #dailyui 006: User Profile by Gabrielle Wee 🧧 (@gabriellewee) on CodePen.18892

Автор Genaro Colusso

See the Pen Daily UI #6 — Profile by Genaro Colusso (@genarocolusso) on CodePen.18892

Автор Paraskevas Dinakis

See the Pen User Profile (DailyUI #006) by Paraskevas Dinakis (@perry_nt) on CodePen.18892

Профиль пользователя соцсетей

В профиль подтягивается информация о количестве постов, лайков и подписчиков.

Автор Matthias Martin

See the Pen 006 — Profile by Matthias Martin (@roydigerhund) on CodePen.18892

Профиль пользователя с пролистыванием информации в виде слайдера

Автор Arafat Hussein

See the Pen CSS Profile Card by Arafat Hussein (@rfthusn) on CodePen.18892

Профиль пользователя с информацией по клику

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

Автор Gerry

See the Pen User Profile by Gerry (@PixelatedOre) on CodePen.18892

Разноплановая информация о пользователе в виде 3-х карточек

Автор Rosa

See the Pen User Profile Cards by Rosa (@RRoberts) on CodePen.18892

Просмотров: 321

Блоки в документах — Вёрстка

Рис. 7.1 Главная страница сайта www.artel.by, разбитая на блоки

Я выделил 7 блоков, на рисунке они обозначены цифрами в кружочках. Пройдемся по всем блокам:

  1. Блок с логотипом. Иногда его еще называют блок для бренда. Логотип обычно располагается в левом верхнем углу.
  2. Блок с меню. Меню на сайте нестандартное, расположенное в три столбика.
  3. Блок новостей или лента новостей. Новости выводятся достаточно стандартно в один столбик. Каждая новость имеет дату и ссылку «подробнее».
  4. Два информационных блока. Один с последней работой, а второй с рекламой системы.
  5. Блок для распечатки информации о компании. Обычная форма с чекбоксами и графической кнопкой.
  6. Блок подписки на новости. Поле для ввода электронного адреса и графическая кнопка.
  7. Блок входа для клиентов. Форма с полями для ввода логина и пароля с графической кнопкой.

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

Мы сейчас можем как бы структурировано взглянуть на верстку отдельной страницы. Можно выделить две задачи:

  1. создание общей структуры страницы
  2. создание отдельных блоков

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

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

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

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

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

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

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

Формы

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

Поиск

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

Рис. 7.2 Стандартная форма поиска

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

<input type=”submit” value=”искать”>

Графическая кнопка рисуется дизайнером, затем вырезается верстальщиком и сохраняется в каталоге с остальными картинками. Как вы уже знаете, каталог с картинками я всегда называю i. Есть у меня и стандартное название кнопки submit, такую кнопку я обычно называю go. При таких названиях графическая кнопка вставляется вот так:

<input type=”image” src=”i/go.gif” alt=”искать”>

Стандартное решение при верстке блока формы поиска, показанного на рис. 7.2, сделать таблицу из одной строки и двух ячеек. В первую ячейку вставляется поле ввода текста, а во вторую – кнопка. Код будет таким:

<table cellpadding="0" cellspacing="0">
<form>
  <tr>
    <td><input type="text" name="search">&nbsp;</td>
    <td><input type="submit" value="искать"></td>
  </tr>
</form>
</table>

На что надо обратить внимание? Во-первых, на то, что тег <form> стоит между тегами <table> и <tr>. Ни один валидатор кода не пропустит такую конструкцию и будет вас клятвенно заверять, что ни в коем случае нельзя так надругаться над HTML и вставлять тег <form> в неположенные места. Да, нельзя, но часто необходимо. Дело в том, что браузеры Internet Explorer, Mozilla и Opera имеют совершенно разные точки зрения на то, как надо отображать элемент <form>. Internet Explorer уверен, что надо сделать приличный отступ от элемента <form>, Opera делает отступ поменьше, а Mozilla вообще считает, что никакого отступа делать не надо. Эти несоответствия решаются так, как показано в коде, то есть помещением тега <form> между тегами <table> и <tr>. В этом случае отступы отсутствуют во всех браузерах, что обычно бывает необходимо.

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

В-третьих, при обнулении отступов элементы формы слипаются. Проблему можно решить, поставив после текстового поля неразрывный пробел &nbsp;.

В реальной жизни формы редко оставляют в первозданном виде и все чаще пишут на них стили. Наиболее часто используется стиль, которые вместо псевдотрехмерной рамки вокруг полей создает обычную рамку. Некоторые объявляют такой стиль для всех элементов <input>, но я считаю это плохой практикой, потому что рамки вокруг чекбоксов смотрятся ужасно. Для текстовых полей я создаю отдельный класс, который обычно называю input. Если кнопка отсылки содержимого формы обычная неграфическая, то для нее я создаю класс submit. Например, я хочу сделать рамку шириной 1 пиксель темно-серого цвета, и задать оранжевый фон для кнопки. Стили будут такими:

INPUT.input {border: 1px solid #666}
INPUT.submit {background: #F90; border: 1px solid #666}

Форма поиска изменится и будет выглядеть значительно лучше.

Рис. 7.3 Форма поиска с рамками

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

INPUT.input {border: 1px solid #666; height: 21px}
INPUT.submit {background: #F90; border: 1px solid #666; height: 21px}

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

INPUT.submit {color: #FFF; font: bold 12px Verdana; background: #F90; border: 1px solid #666; height: 21px}

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

Рис. 7.4 Форма поиска с заданной высотой и измененным шрифтом на кнопке

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

Вход для клиентов

Еще одной популярной формой является вход для клиентов. На рис. 7.1 такая форма представлена блоком 7. Обычно форма состоит из двух полей (логина и пароля) и кнопки отправки. Иногда рядом вставляют ссылку на сервис «забыл пароль». Пользователи очень часто забывают свои пароли, так что подобный сервис крайне полезен.

Типичных расположений элементов формы два:

  1. все элементы располагаются в одну строку
  2. поле для ввода логина располагается в первой строке, а поле для ввода пароля и кнопка отправки – во второй строке (именно так сделана форма на рис. 7.1)

Давайте сначала рассмотрим первый вариант. Для него отлично подойдет таблица из трех ячеек. Будем использовать картинку в качестве кнопки отправки и сразу зададим ширину полей, с помощью атрибута size. Код будет простым:

<table cellpadding="0" cellspacing="0">
<form>
  <tr>
    <td><input type="text" name="login" size="14">&nbsp;</td>
    <td><input type="password" name="pass" size="14">&nbsp;</td>
    <td><input type="image" src="i/go.gif" alt="Войти"></td>
  </tr>
</form>
</table>

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

Рис. 7.5 Простая форма входа для клиентов

Для полного счастья осталось написать стили на поля формы. Я знаю, что высота картинки ровно 19 пикселей, поэтому задам высоту полей тоже 19 пикселей. Стиль получится несложным:

INPUT.input {border: 1px solid #666; height: 19px}

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

<table cellpadding="0" cellspacing="0">
<form>
  <tr>
    <td><input type="text" name="login" size="14" class="input" value="логин">&nbsp;</td>
    <td><input type="password" name="pass" size="14" class="input" value="пароль">&nbsp;</td>
    <td><input type="image" src="i/go.gif" alt="Войти"></td>
  </tr>
</form>
</table>

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

Рис. 7.6 Вид формы после написания стилей

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

<form>
<input type="text" name="login" size="14" class="input" value="логин">&nbsp;
<input type="password" name="pass" size="14" class="input" value="пароль">&nbsp;
<input type="image" src="i/go.gif" alt="Войти">
</form>

Он будет отображаться браузером так, как показано на рис. 7.7.

Рис. 7.7 Форма без таблиц

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

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

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

<table cellpadding="0" cellspacing="0">
<form>
  <tr>
    <td colspan="2"><input type="text" name="login" size="14" value="логин"></td>
  </tr>
  <tr>
    <td><input type="password" name="pass" size="14" class="input" value="пароль">&nbsp;</td>
    <td><input type="image" src="i/go.gif" alt="Войти"></td>
  </tr>
</form>
</table>

Кажется, что все в порядке и должно работать. И оно работает в браузере Internet Explorer, но не работает в Mozilla и Opera. Например, в Mozilla форма будет выглядеть так, как показано на рис. 7.8

Рис. 7.8 Вид формы в браузере Mozilla

Как видите, поля слиплись из-за того, что расстояния между ячейками таблицы и отступы в ячейках обнулены. Форма смотрится неважно, поэтому надо как-нибудь раздвинуть поля. Если прописать в таблице атрибут cellspacing=”4”, то это решит проблему, но сдвинет все поля на четыре пикселя вправо. Часто это неприемлемо, потому что нарушается выравнивание элементов дизайна вдоль определенной вертикали, страница теряет целостность и может выглядеть несколько незаконченной. Дизайнеры сразу замечают диссонанс и страшно возмущаются, что совершенно справедливо.

Другой вариант решения – вставить после первого поля распорку, то есть невидимую картинку:

<tr>
  <td colspan="2">
    <input type="text" name="login" size="14" value="логин">
    <br><img src="i/0.gif"></td>
</tr>

Я задал высоту картинки 4 пикселя. Обратите внимание, что перед картинкой обязательно должен стоять перевод строки, то есть тег <br>, иначе никакого эффекта не будет.

Такой вариант, в принципе, жизнеспособен и я им часто пользуюсь, но проблему можно решить и с помощью CSS. Нам надо, чтобы у первой ячейки был отступ в 4 пикселя снизу, а у других ячеек не было. Логично, что надо выделить первую ячейку и написать для нее стиль. Выделить лучше всего с помощью класса. Например, назовем класс expand-form. Для задания отступов блока в CSS существует свойство padding. Кроме того, можно задавать отступы для определенной стороны блока с помощью свойств padding-top, padding-right, padding-bottom, padding-left. В нашем случае нужно воспользоваться свойствомpadding-bottom. Стиль для класса expand-form будет очень простым:

.expand-form {padding-bottom: 4px}

А к ячейке таблицы с полем для логина цепляем название класса:

<td colspan="2" class=”expand-form”>

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

Рис. 7.9 Форма входа для клиентов после устранения слипания полей

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

Навигация

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

Меню

Меню присутствует практически на любом сайте. Невозможно себе представить корпоративный сайт без меню. Четкую классификацию видов меню построить достаточно сложно, но перед нами такой задачи не стоит. Если вкратце, то с одной стороны меню бывают вертикальные и горизонтальные, а с другой – текстовые, графические и смешанного типа. Сложно сказать, какие виды меню встречаются чаще, но мы кратко рассмотри все типы.

Вертикальные

Для начала рассмотрим вертикальные меню и начнем с текстового. Текстовое вертикальное меню обычно оформляют в виде списка. Пример текстового вертикального меню показан на рис. 7.10

Рис. 7.10 Текстовое вертикальное меню на моем сайте «Веб-анатомия»

Обратите внимание, что разделы, у которых есть подразделы, имеют черные кружочки, а конечные разделы имеют белые кружочки. Такое отличие помогает посетителям работать с сайтом. Очень быстро они обучаются четко определять, чего ждать от раздела. Давайте с вами воспроизведем примерно такое же меню. Допустим, у нас есть четыре пункта меню: «О компании», «Продукция», «Услуги» и «Контакт». Сразу создаем список:

<ul>
  <li><a href="">О компании</a></li>
  <li><a href="">Продукция</a></li>
  <li><a href="">Услуги</a></li>
  <li><a href="">Контакт</a></li>
</ul>

Обычно на ссылки в меню требуется написать стили, которые отличаются от стилей для обычных ссылок. Например, ссылки могут отличаться цветом, шрифтом или не иметь подчеркивания. Надо бы ссылки в меню как-то обозначить. Для этого можно использовать класс, но лучше всего воспользоваться контекстным селектором. Мы называем как-нибудь блок с меню (то есть задаем блоку с меню ID), например, menu, а затем пишем стиль для всех ссылок, которые находятся внутри блоки с id=”menu”. HTML-код изменится весьма незначительно:

<ul id=”menu”>

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

#menu A {color: #000}

Вот так выглядит полезное использование контекстного селектора. В результате сокращается код, потому что не надо для каждой ссылки добавлять атрибут class=”menu”. На элементы списка в меню зададим шрифт. Например, Arial размером 12 пикселей. Для этого тоже отлично подойдет контекстный селектор:

#menu LI {font: 12px Arial}

Кроме того, бывает полезно слегка увеличить высоту строки в меню:

#menu LI {font: 12px/1.6 Arial}

Наконец, нам надо выделить разделы, у которых нет подразделов. Для таких элементов списка надо задать вывод незакрашенных кружочков. Кстати говоря, кружки, квадратики и прочие символы, которые обозначают элемент списка, называют маркерами. Выделять элементы списка можно с помощью класса, назовем его empty. Для задания вида маркера в CSS есть свойство list-style-type. Используем селектор по классу empty и напишем такой стиль:

LI.empty {list-style-type: circle}

Итоговый HTML-код будет следующим:

<ul id="menu">
  <li class="empty"><a href="">О компании</a></li>
  <li><a href="">Продукция</a></li>
  <li><a href="">Услуги</a></li>
  <li class="empty"><a href="">Контакт</a></li>
</ul>

А само меню будет выглядеть так, как показано на рис. 7.11

Рис. 7.11 Вертикальное текстовое меню, реализованное с помощью ненумерованного списка

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

Рис. 7.12 Вертикальное меню, реализованное с помощью таблицы

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

<table>
  <tr><td><a href="">О компании</a></td></tr>
  <tr><td><a href="">Продукция</a></td></tr>
  <tr><td><a href="">Услуги</a></td></tr>
  <tr><td><a href="">Контакт</a></td></tr>
</table>

Конечно, меню пока еще выглядит совсем не так, как надо. Сейчас это просто таблица со ссылками, которые никак не отделены друг от друга и даже на меню не очень похожи. Давайте потихоньку его преображать. Можно начать со ссылок. Надо, чтобы они не имели подчеркивания, были черного цвета и выводились шрифтом Arial размером 14 пикселей. Как и в прошлом примере, мы будем пользоваться контекстным селектором, для чего назовем таблицу menu. Тогда стиль на ссылки будет таким

#menu A {color: #000; font: 14px Arial; text-decoration: none}

Самое сложное — сделать пунктирные разделители между ячейками таблицы. Я для таких целей всегда использую фоновое изображение. Сейчас нам нужен фоновый рисунок шириной 3 пикселя и высотой 1 пиксель. Первый пиксель будет черного цвета, а два других белого. Если повторять такой маленький рисунок по оси Х, то как раз получится пунктирная линия. Думаю, вы легко себе представите, как такой рисунок формирует пунктир. Допустим, мы такое изображение сделали, назвали его bg1.gif и сохранили в каталог i. Теперь надо задать фон для ячеек таблицы. Для адресации к этим ячейкам будем использовать контекстный селектор.

#menu TD {background: url(i/bg1.gif) repeat-x}

То есть все ячейки таблицы сid=”menu” будут иметь фоновый рисунок. Фоновое изображение будет повторяться только по оси Х. Имеет смысл посмотреть на промежуточный результат. Он показан на рис. 7.13.

Рис. 7.13 Промежуточный результат создания вертикального меню

Если сравнить промежуточный результат с рис. 7.12, то становится ясно, что до него еще далеко. Во-первых, не хватает пунктира после последнего пункта. Это и понятно, потому что ячеек ровно столько, сколько пунктов меню, а пунктирных линий на одну больше. Проблема решается добавлением одно лишней строки с пустой ячейкой в конце таблицы. Кроме того, нет выравнивания по правому краю. Необходимо в стиль для ячеек таблицы добавить выравнивание с помощью свойства text-align.

#menu TD {background: url(i/bg1.gif) repeat-x; text-align: right}

Дальше надо задать ширину меню и увеличить отступы внутри ячейки, чтобы создать необходимое пространство. Дизайнер сделал меню шириной 148 пикселей. Мы зададим ширину таблицы 140 пикселей и отступы 4 пикселям. В сумме получится как раз 148 пикселей. HTML-код немного преобразуется:

<table id="menu" cellpadding="4" cellspacing="0">
  <tr><td><a href="">О компании</a></td></tr>
  <tr><td><a href="">Продукция</a></td></tr>
  <tr><td><a href="">Услуги</a></td></tr>
  <tr><td><a href="">Контакт</a></td></tr>
  <tr><td></td></tr>
</table>

Осталось сделать совсем чуть-чуть, а именно выделить пункт текущего раздела серым фоном. Для этого можно ввести отдельный класс. Назовем его current. Стиль для класса current будет таким:

#menu TD.current {background: #DDD url(i/bg1.gif) repeat-x}

У вас должен возникнуть вопрос, зачем дублировать фоновый рисунок и в стиле для класса current, если он уже прописан для ячеек таблицы меню? Ответ: если этого не сделать, то фоновый цвет закроет фоновое изображение и пунктира в той ячейке, которая имеет класс current, просто не будет.

Итоговый код вот такой:

#menu TD {background: url(i/bg1.gif) repeat-x; text-align: right}
#menu TD.current {background: #DDD url(i/bg1.gif) repeat-x}
#menu A {color: #000; font: 14px Arial; text-decoration: none}

. . .

<table id=»menu» cellpadding=»4″ cellspacing=»0″>
  <tr><td><a href=»»>О компании</a></td></tr>
  <tr><td><a href=»»>Продукция</a></td></tr>
  <tr><td><a href=»»>Услуги</a></td></tr>
  <tr><td><a href=»»>Контакт</a></td></tr>
  <tr><td></td></tr>
</table>

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

Горизонтальные

Чаще всего используются графические горизонтальные меню. Принципиально есть две их разновидности: резиновые и фиксированные. Резиновые меню растягиваются при увеличении окна браузера, а фиксированные – нет.

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

Давайте лучше с вами реализуем резиновое меню, которое показано на рис. 7.14

Рис. 7.14 Графическое горизонтальное резиновое меню на сайте www.rubi.ru

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

Ширину каждой ячейки надо задавать пропорционально относительно ширины таблицы. Раз у нас ширина таблицы 100% а ячеек четыре, то ширина каждой ячейки будет 25%. Картинку в каждой ячейке надо центрировать.

Код таблицы будет вот такой:

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
  <td><img src="i/current.gif" width="32" border="0" alt=""></td>
  <td></td>
  <td></td>
  <td></td>
</tr>
<tr>
  <td><a href=""><img src="i/catalogue.gif" width="40" border="0" alt=""></a></td>
  <td><a href=""><img src="i/forum.gif" height="30" border="0" alt=""></a></td>
  <td><a href=""><img src="i/konkurs.gif" height="30" border="0" alt=""></a></td>
  <td><a href=""><img src="i/reklama.gif" height="30" border="0" alt=""></a></td>
</tr>
</table>

Для центрирования картинок внутри таблицы можно написать такой стиль:

#menu TD {text-align: center}

Меню будет выглядеть практически правильно, как видно на рис. 7.15.

Рис. 7.15 Вид резинового горизонтального меню с небольшой ошибкой

Ошибка в том, что галочка прилипает к пункту меню. На макете отступ между ними составляет ровно 11 пикселей, так что необходимо его реализовать. Есть два способа: с помощью HTML и с помощью CSS. Для начала попробуем сделать отступ стандартными средствами HTML.

Для этого, конечно же, нужна распорка, то есть невидимый 0.gif. Его надо вставить в ячейку таблицы сразу после галочки и задать ему высоту 11 пикселей:

<td>
  <img src="i/current.gif" width="32" border="0" alt="">
  <br>
  <img src="i/0.gif" width="1">
</td>

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

<td>
  <div>
    <img src="i/current.gif" width="32" border="0" alt="">
  </div>
</td>

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

Рис. 7.16 Вид горизонтального резинового меню при разных размерах окна браузера

Как видите, меню ведет себя совершенно правильно, то есть как и ожидалось.

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

Дублирующая навигация

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

Рис. 7.17 Дублирующее меню

Реализуется оно очень просто. Единственная особенность в том, что иногда ссылки в дублирующем меню отличаются от обычных ссылок. Реализовать такое отличие проще всего с помощью контекстного селектора. Например, следующим образом:

#double_menu A {color: #999; font-size: 11px}

. . .

<div id=”double_menu”>
  <a href=””>О компании</a> | <a href=””>Партнеры</a> | <a href=””>Решения</a> | <a href=””>Продукты</a> | <a href=””>Цены</a> | <a href=””>Контакты</a>
</div>

Карта сайта

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

<ul>
  <li><a href="">О компании</a></li>
  <li><a href="">Продукция</a>
    <ul>
       <li><a href="">Надувные матрешки</a></li>
       <li><a href="">Электробалалайки</a></li>
    </ul>
  </li>
  <li><a href="">Контакты</a></li>
</ul>

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

Рис. 7.18 Карта очень маленького сайта без дополнительного оформления

Давайте сделаем карту более эстетичной. Для начала надо задать шрифт для элементов UL:

UL {font: 11px/1.6 Verdana}

Для того, чтобы различать карту сайта и обычные списки в тексте, надо присвоить ей уникальный идентификатор, то есть id. Например, назовем нашу карту sitemap. Зададим цвет ссылок в карте. Конечно же, будем использовать контекстный селектор:

UL#sitemap A {color: #666}

Теперь можно заняться маркерами. По умолчанию у списка первого уровня маркерами являются закрашенные кружочки, а у списка второго уровня – незакрашенные, что видно на рис. 7.18. Давайте для элементов списка первого уровня в карте сайта зададим в качестве маркера квадратик, а для элементов списка второго уровня нарисуем свою картинку, например, маленькую стрелочку.

Для задания типа маркера есть свойство list-style-type. Его и применим:

UL#sitemap {color: #666; list-style-type: square}

Для задания изображения в качестве маркера существует свойство list-style-image. Нам надо задать его только для списков, вложенных в список с id=”sitemap”, так что будем использовать контекстный селектор:

UL#sitemap UL {list-style-image: url(i/marker.gif)}

После таких нехитрых стилей карта сайта, показанная на рис. 7.19, станет значительно более привлекательной.

Рис. 7.19 Карта сайта после написания нескольких стилей

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

Текстовые элементы

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

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

Возникает вопрос, что же делать несчастным верстальщикам? Во-первых, можно тактично намекнуть дизайнеру, что неплохо бы немного поработать над оформлением текста. Если дизайнер высокомерно машет рукой, углубляясь в Adobe Photoshop 7, остается два варианта: оставить все как есть или попробовать оформить текст самостоятельно. Я всегда выбираю второй вариант, но прекрасно понимаю, что далеко не любой верстальщик сможет хорошо оформить текст, поэтому вам советовать не буду. Кроме того, я не буду учить здесь дизайну, потому что вряд ли смогу, но некоторые примеры оформления текста привести полезно, хотя бы с точки зрения их реализации с помощью HTML-кода.

Простой текст

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

P,TD,UL,LI {font: 12px Verdana}

Часто слегка увеличенное межстрочное расстояние улучшаем восприятие текста, наполняет его воздухом. Стандартное расстояние составляет 120% от высоты шрифта, но можно увеличивать до 140-160%. Однако для таблиц увеличивать межстрочное расстояние нецелесообразно, так что еще чаще в моих таблицах стилей встречаются вот такие объявления:

P,UL,LI {font: 12px/1.4 Verdana}

TD {font: 12px Verdana}

Любые другие способы оформления простого текста обычно совершенно лишние и вредные.

Заголовки

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

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

Итак, начнем со шрифта. У меня есть любимый шрифт для заголовков – это Arial. Заголовки первого уровня должны быть достаточно большими, так что обычным стилем для заголовка <h2> является такой:

h2 {font: 22px Arial}

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

h2 {font: 22px Arial}
h3 {font: 18px Arial}
h4 {font: bold 14px Arial}

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

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

h2 {font: 22px Arial; border-bottom: 1px solid #000}

Как выглядит заголовок с подчеркиванием, показано на рис. 7.20

Рис. 7.20 Заголовок с подчеркиванием

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

h2 {font: 22px Arial; border-bottom: 1px solid #000; background: #DDD}

то весь блок и окрасится, включая пустое пространство справа, как показано на рис. 7.21

Рис. 7.21 Окрашивание всего блока заголовка

Дело в том, что существует два типа блоков: строчные и структурные. Структурные блоки образуют элементы<p>,<div>,<h2> и т.д. Строчные блоки образуются элементы <b>, <i>, <span> и т.п. Строчные блоки всегда находятся внутри структурных блоков. Главное отличие в том, что структурные блоки имеют вначале и в конце переводы строк и по ширине занимают все предоставляемое им пространство. Ширина строчных блоков строго ограничена содержанием блока. Например, в блоке<b>важно</b> есть пять букв, которые и будут определять ширину блока.

Вернемся к нашему фону. Если требуется, чтобы фон окрашивал весь структурный блок, то все в порядке. Но бывают случаи, когда надо, чтобы фон был только под буквами. Этого можно добиться, если в структурный блок <h2> встроить строчный блок. В HTML имеется специальный строчный блок <span>, который создан как раз для подобных целей. HTML-код будет таким:

<h2><span>Полезные советы</span></h2>

Стили для заголовка будут обычными, но кроме них надо задать фон для элемента <span>, который находится внутри элемента<h2>. Как вы понимаете, для этого будем использовать контекстный селектор. В итоге получится два объявления стилей:

h2 {font: 22px Arial; border-bottom: 1px solid #000}
h2 SPAN {background: #DDD}

А заголовок будет выглядеть так, как показано на рис. 7.22.

Рис. 7.22 Оформление заголовка с помощью фона для строчного элемента и рамки

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

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

Я знаю, что для блоков можно задавать отрицательные поля. В случае с заголовком можно попробовать задать отрицательно нижнее поле и тогда заголовок подтянется к тексту. Методом подбора я установил, что подходящим размером поля будет –20 пикселей. Объявление стиля будет таким:

h2 {font: 22px Arial; margin-bottom: -20px}

Заголовок прекрасно выглядит в браузерах Internet Explorer и Opera, но когда я посмотрел тестовую страничку в браузере Mozilla, то разочарованно поджал губы. На рис. 7.23 вид в браузере Mozilla показан справа.

Рис. 7.23 Несовпадение нижнего поля для заголовка в браузерах Internet Explorer и Mozilla

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

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

Возвращаясь к заголовку, сразу хочется написать вот такой стиль:

h2 {font: 22px Arial; position: relative; bottom: -20px}

Но посмотрев на результат сразу становится понятно, что относительно позиционирование проблемы не решает. Мало того, что расстояние все равно разное, так еще заголовки сместились на 20 пикселей вниз. То есть верхнее поле заголовка как бы увеличилось. Конечно, меня такое поведение не устраивает, так что я пока возвращаю все обратно и думаю дальше.

Дальше обычно мысли развиваются в стандартном направлении. Раз проблема в браузерах, то надо для каждого из них реализовать специфический код. Методом проб устанавливается, что для Mozilla правильным полем будет – 14 пикселей. Остается выяснить, как в одной таблице стилей можно записать два разных объявления для заголовка <h2> таким образом, чтобы одно объявление понимал браузер Internet Explorer, а другое – Mozilla.

Задача, надо сказать, нетривиальная. Я знаю, что есть селекторы, которые Mozilla понимает, а Internet Explorer – нет. Например, селектор наследника, который позволяет применять стили к потомкам элемента. Чтобы лучше понять, как работают селекторы наследника, рассмотрим небольшой пример.

Допустим, у нас есть заголовки, следующие непосредственно после элемента <body>, а есть заголовки, находящиеся внутри самых различных блоков. Заголовки надо выводить шрифтом разного размера. Этого можно добиться с помощью селектора наследника:

BODY > h2 {font: 22px Arial}
DIV > h2 {font: 14px Arial}

Честно говоря, особой пользы от селектора наследника нет, но меня они интересуют по другой причине: их не понимает браузер Internet Explorer, но отлично понимает браузер Mozilla! То есть селектор наследника можно использовать для разделения объявлений.

Вот и воспользуемся им:

h2 {font: 22px Arial; margin-bottom: -20px}
BODY>h2 {margin-bottom: -14px}

После этого нижнее поле заголовка будет совершенно одинаковое в браузерах Internet Explorer и Mozilla, но тут я решаю проверить результат в Opera и вижу, что поле больше, чем необходимо… Получается, что надо разделить объявления стилей для Opera и IE с одной стороны, и Mozilla с другой стороны. Честно признаюсь, я не знаю, как реализовать такое разделение средствами CSS. Конечно, можно написать скрипт, который определяет браузер и динамически подключает в зависимости от браузера разные таблицы стилей, но мне такое решение проблемы на кажется красивым.

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

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

Таблицы

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

Рис. 7.24 Очень простая таблица без стилей

Кода пока приводить не буду, потому что он совершенно обычный. Разве что заголовок таблицы сделан с помощью элементов <th>, а не <td>, что совершенно правильно. Сейчас на таблицу не написано ни одного стиля, так что начнем пробовать на ней разные варианты оформления.

Сначала зададим шрифт:

TH, TD {font: 12px Verdana}

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

TH {font: bold 12px Verdana}
TD {font: 12px Verdana}

В самой таблице слегка увеличим отступы в ячейках, прописав cellpadding=”4”. Сейчас можно браться за оформление. Одно из самых распространенных – задание фона для ячеек. Действительно, обычно получается неплохо. Мы зададим для обычных ячеек светло-серый фон, а для заголовка чуть темнее, чтобы явно его выделить. Как задается фон вы знаете:

TH {background: #DDD; font: bold 12px Verdana}
TD {background: #EEE; font: 12px Verdana}

Результат показан на рис. 7.25

Рис. 7.25 Таблица с фоном для ячеек

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

При таком способе оформления обычно обнуляют расстояние между ячейками, потому что иначе линия будет прерывистой, что некрасиво. При это устанавливают достаточно большие отступы, мы установим cellpadding=”6”. Линия реализуется с помощью рамки. Мы установим рамку для нижней части блока, который представляет собой ячейку. Кроме того, для заголовка зададим фон:

TH {background: #DDD; border-bottom: 1px solid #666; font: bold 12px Verdana}
TD {border-bottom: 1px solid #666; font: 12px Verdana}

Результат будет довольно симпатичный, он показан на рис. 7.26

Рис. 7.26 Таблица с линиями между строками

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

Списки

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

Рис. 7.27 Вид простого списка в браузерах Internet Explorer, Mozilla и Opera

Как видите различия есть. Во-первых, списки имеют разные поля слева. Конечно, в обычном тексте это не принципиально, но когда необходимы жесткие выравнивания меню, то разница в 3 пикселя может быть заметна. Во-вторых, размер маркеров у списка в Internet Explorer заметно меньше, чем у остальных браузеров. Мне кажется, что в IE размер подобран лучше, и список смотрится аккуратнее. И, наконец, межстрочное расстояние в списках разное. Если в Internet Explorer оно равно 160%, то в Mozilla – 120% (как и элемента <p>). Кажется, что в Opera тоже задано 160%, но на самом деле, как это ни удивительно, в Opera тоже 120%. Кроме того, в Opera есть отступ сверху, тогда как в других браузерах нет.

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

UL {list-style-image: url(i/circle.gif)}

Нам осталось рассмотреть гиперссылки.

Гиперссылки

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

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

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

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

A {color: #000}

A:hover {color: #F90}

Псевдо-класс отличается от обычного тем, что его не надо явно указывать в коде документа. Если вы объявляете обычный класс, то в коде обязательно надо его указать, например, <span class=”date”>. Псевдо-класс не надо указывать в коде, а стили, написанные к нему, автоматически применяются ко всем элементам с данным поведением. В нашем случае псевдо-класс hover задан для всех ссылок, так что при наведении курсора мыши ссылки будут менять цвет. Надеюсь, вам все стало понятно, так что перейдем к более высоким материям.

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

A {color: #000}
A:hover {background: #DDD; text-decoration: none}

Результат показан на рис. 7.28

Рис. 7.28 Изменение фона и устранение подчеркивания ссылки

Еще одни интересный эффект – включение рамок при наведении курсора. Правда, он не работает в браузере Internet Explorer 5, но ничего страшного в этом нет. На первый взгляд, он должен очень просто реализовываться:

A {color: #000}
A:hover {border: 1px solid #000; text-decoration: none}

На самом деле при таком стиле ссылка при наведении будет смещаться вправо на 1 пиксель из-за рамки. Смотрится это некрасиво, а устраняется очень просто:

A:hover {border: 1px solid #000; text-decoration: none; margin-left: -1px}

В результате получается эффект, который показан на рис. 7.29

Рис. 7.29 Рамка вокруг ссылки

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

A:hover {background: url(i/bg1.gif) repeat-x bottom; text-decoration: none}

Результат показан на рис. 7.30

Рис. 7.30 Замена подчеркивания пунктирной линией

Конечно, оформление ссылок не ограничивается приведенными выше примерами. Вы можете включить фантазию и придумать совершенно необычные и оригинальные эффекты, но осторожно. Есть вещи, которые практически всегда плохо использовать. Например, не рекомендуется изменять размер и насыщенность шрифта. Еще хуже изменять сам шрифт. Например, если у вас в тексте шрифт Verdana, а при наведении курсора мыши он изменяется на Courier, то могут возникать проблемы в браузере и пользователи воспринимают такое изменение с раздражением.

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

Резюме

Я не затронул еще некоторые виды блоков, такие как локальные баннеры, специальные предложения, новости и т.п. В конце книги будут реальные примеры, где такие блоки обязательно встретятся.

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

Михаил Дубаков

« назад к списку статей

10 ошибок начинающего верстальщика и как их избежать

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

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

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}

Программа обучения: «HTML-верстка: с нуля до первого макета»

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

1. Неправильные имена классов

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

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

Правильно:

.shopping-cart-block
.social-icon

Неправильно:

.korzina-block
.социальные-кнопки
.-3-block
.2-review
.shp-crt

2. Использование идентификатора #id для описания стилей блока

Стиль блока можно задать с помощью класса .class-name или идентификатора #id. Атрибут класса позволяет выбрать группу элементов, а #id — один элемент. Если на странице сайта будет задан один и тот же #id для нескольких элементов, то браузер проигнорирует оформление элемента или вообще не откроет CSS-файл.

Идентификатор #id также используется, чтобы передавать информацию в JavaScript. Поэтому можно запутаться среди разных #id, потому что некоторые используются для скриптов, а другие — для оформления.

Как избежать: использовать имена классов .class-name для описания стилей блока, а #id оставить для JavaScript.

3. Описание стилей для элементов внутри атрибута style

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

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

Как избежать: задавать стили для каждого элемента в СSS-файле.

4. Использование тега абзаца <p> для разметки

Браузер по умолчанию добавляет к <p> некоторые внешние отступы, чтобы параграф текста выглядел отдельным блоком. Чтобы облегчить работу и не добавлять отступы к изображению с помощью стилей, некоторые верстальщики оборачивают его тегом <p>…</p>.

Как избежать: для разметки страницы использовать специальные теги <div> и <span>, прописать нужные стили для этих тегов.

5. Много изображений в высоком разрешении на странице

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

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

6. Не сброшены изначальные настройки

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

Как избежать: сбросить отступы для всех элементов можно с помощью СSS-кода:

*{
margin:0;
padding:0;
}

Либо подключить специальный CSS-файл, внутри которого отступы уже изменены. Например, Normalize.css или CSSreset.css.

7. Использование блочного элемента внутри строчного

В HTML существует два типа элементов: блоки и строки.

С помощью блоковых элементов выстраивается структура страницы. Это <div>, <ul>, <h2>, <h4> и другие элементы. Их свойство по умолчанию — display:block.

Строчные элементы, к которым относятся <span>, <li>, <a>, <label>, используются внутри блоковых. По умолчанию их свойство задается как display:inline.

Неправильно:

<span>
<h2> Заголовок </h2>
          <ul>
                    <li> Пункт 1</li>
<li> Пункт 2</li>
          </ul>
</span>

Правильно:

<div>
<h2> Заголовок </h2>
          <ul>
                    <li> Пункт 1</li>
<li> Пункт 2</li>
          </ul>
</div>

Если все же нужно использовать блок внутри строчного элемента, то можно поменять свойство у строчного на display:block  

8. Отступы между элементами сделаны с помощью тега переноса строки <br/>

Часто с помощью одного или нескольких тегов <br/> создают отступы между элементами, картинками, словами. Этого делать не стоит, потому что тег <br/> должен использоваться внутри тега с текстом <p>…</p>.

Чтобы не вставлять в разметку лишних тегов, просто пропишите нужные отступы в CSS.

9. Страница не проверялась валидатором

На сайте w3.org есть специальный валидатор html-файлов. Он проверяет код страницы и выдает незамеченные ошибки: незакрытый тег, пропущенную строку или свойство. Чем меньше ошибок нашел валидатор, тем лучше отобразится страница в браузере и быстрее будет работать сайт.

10. Не указан тип страницы

Чтобы сообщить браузеру, какая версия HTML-разметки используется на странице, нужно использовать тег DOCTYPE.

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

Как избежать: всегда вставлять тег в первую строку страницы. Например, если вы верстаете на HTML пятой версии, объявить тип документа можно так: < !DOCTYPE html >

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}

Читать ещё: «Подборка англоязычных ресурсов для начинающих верстальщиков»

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

Итак, ошибки, которые нужно избегать:

  • Неправильные имена классов;
  • Использование идентификатора #id для описания стилей блока;
  • Описание стилей для элементов внутри атрибута style;
  • Использование тега абзаца <p> для разметки;
  • Много изображений в высоком разрешении на странице;
  • Не сброшены начальные настройки;
  • Использование блочного элемента внутри строчного;
  • Отступы между элементами сделаны с помощью тега переноса строки <br/>;
  • Страница не проверялась валидатором;
  • Не указан тип страницы.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.

Руководство по оформлению кода HTML/CSS

Код HTML/CSS нужно оформлять красиво, а значит особенности верстки – обязательная часть программы обучения веб-разработке. Сайт proglib.io рассказал, как освоить нужные знания с нуля.

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

Делайте отступы

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

Тег div является вложенным элементом относительно section.

<section>
    <div>
    </div>
</section>

В свою очередь теги h2 и p выравниваются относительно тега div, не создавая «лесенки».

<section>
    <div>
        <h2>Заголовок</h2>
        <p>Текст</p>
    </div>
</section>

Это правило не распространяется на строчные теги (i, u, a, b, span) внутри абзаца. Например, тег span не нужно начинать с новой строки и делать от него отступы.

Выравнивайте теги по одной вертикальной линии

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

Так писать не надо:

<section>
    <div>
        <h2>Заголовок</h2>
        <p>Текст</p>
 </div>
      </section>

Комментируйте код

Когда в разметке идет подряд много закрывающих тегов, ставьте комментарий (название класса) рядом с ним. Тогда вам не придется гадать, какой именно класс закрывается.

<div>
    <div>
        <div>
          .....
        </div><!-- .title -->
    </div><!-- .header -->
</div><!-- .wraper -->

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

<!-- Footer -->
<footer>
    <div></div>
</footer>

Всегда пишите в нижнем регистре

Весь код должен быть написан в нижнем регистре. Это относится к названиям элементов и атрибутов, значениям атрибутов, селекторам, свойствам и их значениям (кроме текста). Текст внутри тегов можно писать с заглавной буквы в начале предложений, а для остального существует свойство text-transform: uppercase;.

Используйте кодировку UTF-8

UTF-8 – один из самых распространенных стандартов кодирования, который позволяет наиболее компактно хранить и передавать символы Юникода. Убедитесь, что ваш редактор использует UTF-8. Всегда указывайте кодировку в шаблонах и документах HTML с помощью <meta charset="utf-8">. Опускайте кодировку для файлов CSS, поскольку для них UTF-8 задана по умолчанию.

Используйте валидный HTML

Валидная разметка – это код, который написан в соответствии с определенными стандартами. Их разработал Консорциум Всемирной Паутины – World Wide Web Consortium (W3C). При помощи таких инструментов, как W3С HTML Validator, можно проверить качество кода HTML и CSS. Написание валидного HTML оттачивает знание ограничений языка разметки и понимание технических требований.

Используйте семантическую разметку

Семантическая верстка (разметка) – это подход к созданию веб-страниц, основанный на расстановке тегов HTML в соответствии с их семантикой. Проще говоря, используйте теги по назначению: <hX> для заголовков, <p> для абзацев, <a> для ссылок и т.д. Это поможет поисковому роботу проанализировать страницу сайта и подготовить ее описание для пользователей, а также повысит приоритет выдачи.

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

Не указывайте протокол при добавлении внешних ресурсов

Опускайте название протокола (http:// или https://) в ссылках на картинки и другие внешние ресурсы, файлы стилей или скрипты. Это делает ссылку относительной и предотвращает, например, использование незащищенного контента на защищенном сайте, а также незначительно уменьшает размер файлов.

Не используйте необязательные теги и лишние обертки

Для уменьшения размера файлов и лучшей читаемости старайтесь избегать использования необязательных тегов и лишних оберток (wrapper). В спецификации HTML5 есть их список.

Изучите правила оформления CSS

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

Изучите нюансы синтаксиса CSS

Ставьте точку с запятой после каждого объявления. Это необходимо для беспрепятственного добавления новых свойств и уменьшения путаницы. Используйте пробелы после двоеточий в объявлениях. Это поможет вам лучше ориентироваться в документе CSS. Начинайте каждый селектор или объявление с новой строки. По возможности объединяйте свойства отдельных блоков в группы и обозначайте их комментариями, разделяя переносом строки. Не указывайте единицы измерения для нулевых значений, если на это нет причины. Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места (color: #ааа;).

Используйте препроцессоры

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

Используйте автопрефиксер

Префиксы нужны, чтобы «подружить» свойства CSS c различными браузерами. Изначально они были придуманы, чтобы помочь разработчикам браузеров адаптировать спецификацию под свои нужды. Чтобы не заниматься этим самостоятельно, используйте утилиту нового поколения autoprefixer для добавления префиксов к экспериментальным свойствам из CSS-3.

Будьте последовательны!

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

Свойство отображения CSS


Пример

Использование различных отображаемых значений:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Свойство отображения определяет поведение отображения (тип окна рендеринга) элемента.

В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей по умолчанию браузера / пользователя. В значение по умолчанию в XML является встроенным, включая элементы SVG.

Значение по умолчанию:?
Унаследовано: нет
Анимируемое: нет. Прочитать о animatable
Версия: CSS1
Синтаксис JavaScript: объект .style.display = «нет» Попробуй это

Поддержка браузера

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

Имущество
дисплей 4,0 8,0 3,0 3,1 7.0

Примечание: Значения «flex» и «inline-flex» требуют префикса -webkit- для работы в Safari.

Примечание: «display: contents» не работает в Edge предыдущая версия 79.

Синтаксис CSS

Значения собственности

Значение Описание Играй
рядный Отображает элемент как встроенный элемент (например, ).Никакие свойства высоты и ширины не будут иметь никакого эффекта Играй »
блок Отображает элемент как блочный элемент (например,

). Это начинается на новая строка и занимает всю ширину

 Играй »
содержание Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемент на следующий уровень в DOM Играй »
гибкий Отображает элемент как гибкий контейнер на уровне блока Играй »
сетка Отображает элемент как контейнер сетки уровня блока Играй »
рядный блок Отображает элемент как контейнер блока встроенного уровня.Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины Играй »
линейно-гибкий Отображает элемент как гибкий контейнер встроенного уровня Играй »
рядная сетка Отображает элемент как контейнер сетки встроенного уровня Играй »
встроенный стол Элемент отображается как таблица встроенного уровня Играй »
элемент списка Пусть элемент ведет себя как элемент
  		•  Играй »
    обкатка Отображает элемент как блочный или встроенный, в зависимости от контекста Играй »
    стол Пусть элемент ведет себя как элемент
    Играй »
    заголовок таблицы Пусть элемент ведет себя как элемент
    Играй »
    группа столбцов таблицы Пусть элемент ведет себя как элемент
    Играй »
    таблица-заголовок-группа Пусть элемент ведет себя как элемент
    Играй »
    нижний колонтитул группы Пусть элемент ведет себя как элемент
    Играй »
    таблица-строка-группа Пусть элемент ведет себя как элемент
    Играй »
    таблица-ячейка Пусть элемент ведет себя как элемент Играй »
    таблица-столбец Пусть элемент ведет себя как элемент
    Играй »
    стол-ряд Пусть элемент ведет себя как элемент
    Играй »
    нет Элемент полностью удален Играй »
    начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальные Играй »
    наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

    Другие примеры

    Пример

    Демонстрация того, как использовать значение свойства contents. В следующих Например, контейнер .a исчезнет, ​​а дочерние элементы (.b) дочерние элементы элемента на следующий уровень в DOM:

    .дисплей {
    : содержание;
    граница: 2px сплошной красный;
    цвет фона: #ccc;
    отступ: 10 пикселей;
    ширина: 200 пикселей;
    }

    .b {
    граница: сплошной синий 2 пикселя;
    цвет фона: светло-голубой;
    отступ: 10 пикселей;
    }

    Попробуй сам »

    Пример

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

    body {
    display: встроенный;
    }

    p {
    display: наследование;
    }

    Попробуй сам »

    Пример

    Установить направление некоторых гибких элементов внутри элемента

    в обратном направлении. заказ:

    div {
    дисплей: гибкий;
    flex-direction: ряд-реверс;
    }

    Попробуй сам »

    связанные страницы

    Учебник

    CSS: Отображение CSS и видимость

    Ссылка на HTML DOM: свойство отображения


    Макет CSS — встроенный блок

    Отображение: inline-block Value

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

    Также с display: inline-block , верхнее и нижнее поля / отступы соблюдаются, но с дисплеем : встроенный — нет.

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

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

    Пример

    охватывать.дисплей {
    : встроенный; / * значение по умолчанию для диапазона * /
    ширина: 100 пикселей;
    высота: 100 пикселей;
    отступ: 5 пикселей;
    граница: сплошной синий 1px;
    цвет фона: желтый;
    }

    пролет.b {
    отображать: встроенный блок;
    ширина: 100 пикселей;
    высота: 100px;
    отступ: 5 пикселей;
    граница: 1 пикс. сплошной синий;
    цвет фона: желтый;
    }

    span.c {
    дисплей: блок;
    ширина: 100px;
    высота: 100 пикселей;
    отступ: 5 пикселей;
    граница: 1 пиксель сплошного синего цвета;
    цвет фона: желтый;
    }

    Попробуй сам »

    Использование встроенного блока для создания ссылок навигации

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

    Пример

    .nav {
    background-color: желтый;
    list-style-type: нет;
    выравнивание текста: центр;
    отступ: 0;
    маржа: 0;
    }

    .nav li {
    дисплей: встроенный блок;
    размер шрифта: 20 пикселей;
    обивка: 20px;
    }

    Попробуй сам »

    html — Как применить стили CSS к блоку? 

      
        
        
            
             Тестовая веб-страница 
    

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

        
     Это строка. Да еще один. Однако к нему был применен встроенный CSS. Этот конкретный абзац имеет другой стиль. Этот встроенный CSS хлопотный, но экспериментальный.

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

    СОВЕТ: Часто я начинаю разрабатывать стили и манипулировать ими в голове, прежде чем разделить их в таблицу стилей. Это позволяет мне сосредоточиться на дизайне, не беспокоясь о том, правильно ли я прикрепил таблицу стилей.

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

    Squarespace CSS: как настроить таргетинг на определенные страницы, разделы или блоки на вашем сайте — Пейдж Брантон

    • Селектор: Селектор — это то, что заимствовано из HTML-кода вашего сайта, чтобы помочь определить, какой фрагмент контента вы применяют настройку к.

    • Свойство: Свойство сообщает вам, какой аспект вашего контента вы хотите изменить (чтобы вы могли настроить таргетинг на такие вещи, как цвет, тип шрифта, размер шрифта, интервал, положение и т. Д.отдельно)

    • Значение: Значение — это бит, который вы настраиваете, чтобы выполнить фактическую настройку (сообщить Squarespace, как вы хотите, чтобы этот аспект вашего контента выглядел для посетителей вашего сайта).

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

    Декларации CSS

    Ваше свойство и значение всегда будут соединяться на бедре с помощью двоеточия или «:», как указано выше! 👯

    Вместе они составляют так называемую декларацию (все, что я выделил синим в приведенном выше примере).

    У вас может быть несколько объявлений в одном бите CSS, чтобы помочь вам стилизовать разные аспекты одного и того же селектора (то есть один и тот же фрагмент контента), но для того, чтобы Squarespace понимала, о чем вы, черт возьми, говорите, вы каждое объявление необходимо заканчивать знаком «;» или точкой с запятой.

    Вот пример правила CSS с несколькими объявлениями:

    h2 {color: black;
    размер шрифта: 30 пикселей;
    семейство шрифтов: Montserrat; }


    Хотите знать, где найти правильные имена для ваших свойств CSS при попытке настроить текст, изображения, кнопки и т. Д.?

    W3schools.com имеет огромную библиотеку названий свойств, чтобы помочь вам! Вот их список свойств , которые нужно использовать специально при форматировании шрифта / текста.

    Фигурные скобки

    Если мы снова посмотрим на наш пример:

    h2 {цвет: черный;
    размер шрифта: 30 пикселей;
    семейство шрифтов: Montserrat; }

    Обратите внимание, что волнистые скобки или « {» и «} » открывают и закрывают список объявлений!

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

    Думайте об этих изогнутых скобках / скобах как о мыльнице …

    У вас есть своя тема (h2), вы кладете свою мыльницу (свою волнистую скобку), вы стоите на этой мыльнице и кричите (свои заявления) о все изменения, которые вы хотите увидеть в мире (кхм… ваш сайт), а затем, когда вы закончите, вы берете свою мыльницу и уходите.

    Стрела.CSS объяснил. 🤯

    (Шучу … тут еще кое-что.)

    Где вставить CSS в Squarespace, чтобы начать настройку вашего сайта

    Okie dokes, так что, если вы помните из Squarespace CSS: что вам нужно знать перед начало работы есть 3 места для вставки CSS на вашем веб-сайте Squarespace. Давайте резюмируем, используя приведенный выше пример CSS! (Через минуту вы поймете, почему это важно!)

    В Squarespace 7.0 и 7.1, вы можете внедрить CSS:

    1. Повсеместно / глобально на свой сайт с помощью настраиваемого инжектора CSS

    2. На определенной странице с помощью дополнительных настроек внедрения кода страницы.

    3. Встраивание на странице с использованием блока кода.

    Если я использую метод № 1 для вставки моего базового CSS-шрифта h2 в мой пользовательский CSS-инжектор для всего сайта, это существенно повлияет на любой текст на моем сайте, где используется h2.

    Если я использую метод № 2, будет изменен только текст, отформатированный с h2 на этой конкретной странице.

    А что было бы, если бы я использовал способ №3? Ну ничего.

    Потому что для использования метода №3 вам нужно уметь кодировать как контент (HTML), так и стиль (CSS), чтобы было что стилизовать!

    Для получения пошагового руководства и объяснения того, как и почему используется каждый метод, ознакомьтесь с Squarespace CSS: что вам нужно знать перед началом работы .

    Применение классов CSS в блоках содержимого — справка Zendesk

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

    Для применения CSS к блоку текста в блоке содержимого

    1. В Гиде щелкните значок Управление статьями () на боковой панели.
    2. В Все статьи откройте статью, в которую хотите добавить блок содержимого, или редактировать блок содержимого для.
    3. Затем создайте блок содержимого или отредактируйте блок содержимого.
    4. Выделите текст в блоке содержимого, который вы хотите стилизовать, и щелкните CSS значок или используйте ярлык CTRL +. или CMD +.

      Система обнаруживает элемент, к которому вы хотите применить класс, и оборачивает его в

      .

    5. В диалоговом окне Применить класс CSS введите имя класса / классов, которые вы хочу подать заявку.

      Если вы хотите использовать несколько классов, разделите их <пробел>.

    6. Щелкните Применить класс CSS , Создать или Обновить все статьи .
    7. Просмотрите или опубликуйте статью.

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

    Также полезно знать следующие ярлыки:

    • Чтобы добавить еще одну строку — ВВЕДИТЕ
    • Для выхода из блока — SHIFT + ENTER
    • Чтобы выйти из блока CSS — нажмите Отмена
    Чтобы применить настраиваемые классы, вы должны определить они уже в теме, которую вы используете.

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

    Как добавить стили CSS в блок кода Гутенберга WordPress

    Gutenberg — новый блестящий редактор WordPress, в нем много новых функций и блоков контента. Одним из таких блоков содержимого является блок кода. Если вы читаете этот пост, то, вероятно, вы хотите узнать , как добавить стиль в блок кода WordPress .

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

    В новом редакторе вам просто нужно щелкнуть значок + и найти блок кода. Щелкните по нему, чтобы вставить в свой пост, а затем добавьте код, который вы хотите отобразить, в блок кода.

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

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

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

    Перейдите на панель администратора и нажмите Внешний вид> Настроить Найдите ссылку Additional CSS и щелкните по ней.Как только вы это сделаете, скопируйте и вставьте приведенный ниже код в дополнительное поле CSS.

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

      pre.wp-block-code {
    граница слева: 6px solid # 3498DB;
  цвет фона: # F5F7F9;
    отступ: 5 пикселей;
}

    Как создать модальный блок изображения героя с помощью атомарного CSS

    Как VOLT имеет лучшую в своем классе скорость страницы

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

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

    Вот почему Google запустил AMP (ускоренные мобильные страницы), способ помочь таким веб-сайтам, как VOLT Store, быстро загружаться на мобильных устройствах.

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

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

    Использование атомарного CSS помогает сохранить общий CSS-код вашего VOLT Store ниже 50 КБ для CSS на страницах AMP.

    В этой статье будет объяснено использование атомарного CSS на примере создания модального изображения главного героя в качестве настраиваемого блока для использования в магазине VOLT с помощью Element.

    Что такое атомарный CSS?

    «Atomic — это ориентированная на мобильные устройства библиотека CSS, ориентированная на верстку, основанная на Tachyons для использования на витринах VOLT. Намерение состоит в том, чтобы предоставить только наиболее часто используемый CSS для создания вашего контента.»- Стилизация блока с помощью CSS в документации по Element Platform

    .

    При создании пользовательских блоков с использованием Element атомарный CSS — это то, как вы выбираете стили CSS для таких свойств макета, как высота, ширина, положение и интервал.

    Atomic CSS предлагает отличный контроль над многими свойствами CSS. Полная ссылка находится в репозитории element-atomic-css GitHub, в котором перечислены все классы Atomic CSS.

    Хотя пользовательский CSS очень возможен (и легко) с использованием Aphrodite, библиотеки «CSS-in-JS» (или «JSS»), которая также встроена в Element, в этой статье основное внимание будет уделено использованию атомарного CSS.

    Конечно, Aphrodite будет использоваться по мере необходимости, и эта статья поможет проиллюстрировать, что необходимо настроить в Aphrodite (в качестве пользовательских стилей) по сравнению с тем, что можно выбрать из Atomic CSS.

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

    Для получения дополнительной информации об использовании CSS в Element обратитесь к разделам Atomic CSS Framework и Style A Block with Aphrodite из документации Element Platform.

    Что такое модальное изображение героя?

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

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

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

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

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

    Фоновое изображение будет настраиваться владельцем VOLT Store, который сможет загружать изображения и управлять ими с помощью VOLT’s Site Designer.

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

    Предполагается, что вы понимаете, как создавать и публиковать элементный блок. Если вы раньше не создавали собственный элементный блок или вам не нужно его освежить, обратитесь к статье «Учебное пособие по созданию страницы элемента» (15 минут чтения) в документации по платформе элементов или просмотрите плейлист YouTube (27 минут) «Учебное пособие по элементам | Учебный центр VOLT.”

    У вас должны быть права на разработку пользовательских блоков, чтобы продолжить изучение этого руководства. Пожалуйста, обратитесь к разделу «Как получить разрешение на разработку блоков» в документации Element Platform.

    В этом руководстве основное внимание уделяется файлу spacing.css из Atomic CSS, который охватывает отступы и поля с такими классами, как:

    .pa0 {
    обивка: 0;
    }
    .pv0 {
    padding-top: 0;
    padding-bottom: 0;}
    .ph0 {
    padding-left: 0;
    отступ справа: 0;
    }
    .ma0 {
    маржа: 0;
    }

    Atomic CSS также поставляется с селекторами точек останова для создания различных дизайнов веб-сайтов для мобильных и настольных компьютеров. Точки останова:

    // Маленький (по умолчанию), ширина <30em
    .pa0 {padding: 0;}

    // Не маленький, ширина> 30em
    .pa0-ns {padding: 0;}

    // Средний, > 30em & <60em width
    .pa0-m {padding: 0;}

    // Large,> 60em width
    .pa0-l {padding: 0;}

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

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

    Создайте новый блок с помощью элемента CLI

    Вы уже должны войти в интерфейс командной строки элемента (CLI). Если нет, то введите команду терминала:

    элемент логина

    Команда входа в систему запросит у вас имя пользователя и пароль, которые вы используете с VOLT’s Site Designer.

    В каталоге, где вы храните свои блоки элементов, создайте новый блок с именем «HeroImageModalBlock» с помощью следующих терминальных команд:

    элемент новый HeroImageModalBlock
    cd HeroImageModalBlock
    npm установить

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

    git init
    git add -A
    git commit -am «Начальная фиксация»

    Сейчас также хорошее время для публикации вашего репозитория в Интернете, например, на GitHub.(Для получения справки см. Добавление репозитория с локального компьютера в GitHub для получения инструкций по использованию GitHub Desktop.)

    Обновление /src/configs.js

    Первая задача — настроить то, что будет настраивать пользователь в файле /src/configs.js.

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

    Откройте /src/configs.js в предпочитаемом текстовом редакторе или IDE и замените содержимое файла этим кодом:

    импортировать {ElementPropTypes} из «@ volusion / element-proptypes»

    экспорт const configSchema = {
    section1: {
    type: ElementPropTypes.sectionHeader,
    },
    изображение: {
    label: "Background Image",
    type: ElementPropTypes.image,
    },
    section2: {
    type: ElementPropTypes.sectionHeader,
    },
    modalBackgroundColor: {
    label: Color (Modal Box) ",
    type: ElementPropTypes.color,
    },
    modalTextColor: {
    label:" Text Color (Modal Box) ",
    type: ElementPropTypes.color,
    },
    buttonBackgroundColor: {
    label: «Цвет фона (кнопка)»,
    тип: ElementPropTypes.color,
    },
    buttonTextColor: {
    label: "Цвет текста (кнопка)",
    тип: ElementPropTypes.color,
    },
    section3: {
    type: ElementPropTypes.sectionHeader,
    },
    lineOneText label: {
    lineOneText : "Line One",
    type: ElementPropTypes.string,
    },
    lineTwoText: {
    label: "Line Two",
    type: ElementPropTypes.string,
    },
    buttonText: {
    label: "Текст кнопки",
    тип: ElementPropTypes.string,
    },
    buttonLink: {
    label: «Ссылка на кнопку (URL)»,
    тип: ElementPropTypes.string,
    },
    }

    export const defaultConfig = {
    section1: «Фоновое изображение»,
    изображение: {
    uriBase: «http://d21ivvgspl06jm.cloudfront.net/»,
    imagePath: «element-block -assets / slideshow / slide2.jpg «,
    altText:» Долина монументов «,
    ширина: 1600,
    высота: 500,
    },
    section2:» Цвета «,
    modalBackgroundColor:» rgba (0, 0, 0, 0.8) «,
    modalTextColor:» white «,
    buttonBackgroundColor:» rgb (20, 161, 20) «,
    buttonTextColor:» white «,
    section3:» Текст «,
    lineOneText:» СКИДКА 50% НА ПРЕДМЕТЫ ПРОДАЖИ «,
    lineTwoText: «ТЕПЕРЬ ПРЕДЛАГАЮТ ЛУЧШИЕ СКИДКИ ГОДА»,
    buttonText: «Shop Our Best Deals»,
    buttonLink: «/ products»,
    }

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

    Свойства относятся к типам элементов «изображение», «цвет» и «строка». Пользователь получит доступ к программе загрузки изображений VOLT Site Designer через Proptype «изображение». Изображение указывается с изображением-заполнителем по умолчанию в операторе экспорта defaultConfig.

    Для «цветного» проптипа пользователь будет иметь доступ к палитре цветов в Site Designer. Свойства CSS background-color по умолчанию будут установлены на 80% непрозрачности черного для модального окна и сплошного зеленого цвета для кнопки, заданных в форматах rgba и rgb.

    «Текстовый» Proptype просто определяет три строки текста для заголовков в модальном окне.

    Для получения дополнительной информации обратитесь к списку всех типов свойств элементов в документации платформы элементов или в предыдущей статье «Объяснение свойств элементов для настраиваемых блоков в магазине VOLT».

    Обновление /src/Block.js

    Затем вы напишете сам пользовательский блок, который объединит стили Atomic CSS и Aphrodite и вставит текстовые (строковые) реквизиты, настроенные в последнем файле.

    Откройте /src/Block.js в текстовом редакторе или IDE.

    Замените весь файл следующим кодом:

    import React from "react"
    import {css, StyleSheet} from "aphrodite / no-important"
    import {getStyles} from "./getStyles"
    import {defaultConfig} from "./configs"

    const Block = (props) => {
    const classes = StyleSheet.create (getStyles (props))
    const {joinClasses} = props // Вспомогательная функция для объединения атомарного CSS с Aphrodite
    const {image, lineOneText, lineTwoText, buttonText, buttonLink} = props
    return (




    {image.uriBase && (
    className = {joinClasses (» dib w-100 h-100 «, css (classes.image))}
    src = {image.uriBase + image.imagePath}
    alt = {image.altText}
    width = {image.width}
    height = {image .height}
    />
    )}

    className = {joinClasses (
    «v-mid ph4 pv4 pv5-m pv6-l relative tc»,
    css (classes.modalWrapper)
    )}
    >
    className = {joinClasses (
    «w-80-m w-60-l center ph4 pv4 pa5-ns dib»,
    css (classes.modal)
    )}
    >


    {lineOneText}

    {lineTwoText}




    className = {joinClasses («pv3 ph5 dib ma0», css (classes.button))}
    >
    {buttonText}






    )
    }

    Block.defaultProps = defaultConfig
    экспорт по умолчанию Блок

    Этот настраиваемый модальный блок изображения героя отображает текстовое содержимое в трех заголовках:

    ,

    и

    для кнопки.

    Код использует функцию joinClasses () элемента Element (props.joinClasses) для объединения пользовательских стилей Aphrodite со встроенными атомарными классами CSS Element.

    Модальный блок изображения героя использует классы CSS «ma0», «ph4» и «pv4» из ранее упомянутого файла Atomic CSS spacing.css.

    Это улучшает интервал между блоками, устанавливая для атрибутов CSS margin и padding значение 0 («ma0»), горизонтальное заполнение 1rem («ph4») и 2rem вертикальное заполнение («pv4»).

    Atomic CSS основан на степенях двойки, при этом значение настройки расстояния удваивает каждый уровень от «pa1» (отступ 0,25em) до «pa7» (отступ 16rem), измеряемый в единицах rem CSS.

    Текстовые заголовки центрируются в модальном поле, ширина которого составляет 80% экрана на средних дисплеях («w-80-m» в Atomic CSS) и 60% экрана на больших дисплеях («w-60 -l »). На мобильных дисплеях модальные окна просто имеют отступы по бокам экрана.

    Полный список всех классов CSS, содержащихся в Atomic CSS, см. В файле atomic.css в репозитории element-atomic-css на GitHub.

    В следующем разделе статьи будут подробно описаны все используемые атомарные CSS и пользовательские классы.

    Взгляд на атомарные стили CSS

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


    #

    ##

    ### ##

    ###

    ####


    ####

    {lineTwoText}


    ####
    #####

    Теперь мы подробно рассмотрим каждый из этих классов. Атомарные классы CSS находятся в строках, а классы Aphrodite CSS-in-JSS (JSS) получают функциональные имена (например, classes.button).

    Каждое имя класса Atomic CSS связано с файлом Atomic CSS, в котором находится этот класс.

    • Это элемент
      оболочки.
    • CSS .w-100 {width: 100%;}
    • Оболочка JSS: {maxWidth: «96rem»,}

    #

    • Это второй слой обертки
      .
    • CSS .relative {position: relative;}

    ##

    • Это оболочка
      для фонового изображения, которое заполнит всю область.
    • CSS .absolute {position: absolute;}
    • CSS .absolute — заполнить {верх: 0; справа: 0; внизу: 0; осталось: 0;}
    • CSS .w-100 {width: 100%;}
    • CSS .h-100 {height: 100%;}

    ###

    • Это само фоновое изображение, тег , заполняющий 100% оболочки.
    • CSS .dib {display: inline-block;}
    • CSS .w-100 {width: 100%;}
    • CSS .h-100 {height: 100%;}
    • Изображение JSS: {objectFit: «cover», objectPosition: «center center»,}

    ##

    • Это оболочка для модального окна.
    • CSS .v-mid {vertical-align: middle;}
    • CSS .ph4 {padding-left: 1rem; padding-right: 1rem;}
    • CSS .pv4 {padding-top: 2rem; padding-bottom: 2rem;}
    • CSS .pv5-m {padding-top: 4rem; padding-bottom: 4rem;} для средних дисплеев
    • CSS .pv6-l {padding-top: 8rem; padding-bottom: 8rem;} для больших дисплеев
    • CSS .relative {position: relative;}
    • CSS .tc {text-align: center;}
    • JSS modalWrapper: {color: modalTextColor,}

    ###

    • Это собственно модальное окно.
    • CSS .w-80-m {width: 80%;} для средних дисплеев
    • CSS .w-60-l {width: 60%;} для больших дисплеев
    • CSS .ph4 {padding-left: 1rem; padding-right: 1rem;}
    • CSS .pv4 {padding-top: 2rem; padding-bottom: 2rem;}
    • CSS .pv5-m {padding-top: 4rem; padding-bottom: 4rem;} для средних дисплеев
    • CSS .pa5-ns {padding-top: 4rem; padding-bottom: 4rem;} для больших дисплеев
    • CSS:.dib {display: inline-block;}
    • Модальный файл JSS: {backgroundColor: modalBackgroundColor,}

    ####

    • Это первая строка текста заголовка, отображаемая крупным шрифтом без полей.
    • CSS .ma0 {margin: 0;}
    • JSS lineOne: {fontSize: «3rem»,}

    ####

    {lineTwoText}

    • Это вторая строка текста заголовка, не содержащая атомарных стилей CSS.Он настроен так, чтобы он не был полужирным и имел большую, чем обычно, высоту строки для интервала.
    • JSS lineTwo: {fontWeight: «normal», lineHeight: «1.5rem»,}

    ####

    #####

    Обратите внимание, что CSS и JSS написаны по-разному. CSS разделен дефисом, но JSS написан в camelCase.Это связано с тем, что имена свойств объектов JavaScript не могут содержать дефисы.

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

    Обновление /src/getStyles.js

    Откройте /src/getStyles.js из модального блока изображения героя в IDE или текстовом редакторе.

    Замените содержимое файла следующим кодом:

    экспорт const getStyles = (blockConfig) => {
    const {
    modalBackgroundColor,
    modalTextColor,
    buttonBackgroundColor,
    buttonTextColor,
    } = blockConfig
    return {
    000 wrapper:
    "image : {
    objectFit: "cover",
    objectPosition: "center center",
    },
    modalWrapper: {
    color: modalTextColor,
    },
    modal: {
    backgroundColor: modalBackgroundColor,
    },
    lineOneize: { : "3rem",
    },
    lineTwo: {
    fontWeight: "normal",
    lineHeight: "1.5rem ",
    },
    buttonLink: {
    color: buttonTextColor,
    transition:" Цвет 0,15 сек - в 0s ",
    },
    button: {
    backgroundColor: buttonBackgroundColor,
    fontWeight:" bold ",
    },
    }
    }

    Этот файл просто перечисляет классы CSS для Афродиты, обсуждаемые в последнем разделе.

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

    Затем вы обновите модульные тесты для пользовательского блока.

    Обновление /__tests__/Block.spec.js

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

    Чтобы опубликовать пользовательский блок с элементом, вам необходимо пройти все тесты блока.

    Откройте /__tests__/Block.spec.js и полностью замените код:

    import React from "react"
    import {mount} from "ferme"
    import {
    mockUtils as utils,
    joinClasses,
    } from "@ volusion / element-block-utils / test-utils"
    import {block as Заблокировать, defaultConfig} от "../src "

    let props
    describe (» The Block «, () => {
    beforeEach (() => {
    props = {
    data: {}),
    utils,
    joinClasses,
    queryParams: { },
    }
    })
    it («отображает без ошибок», () => {
    mount ()
    })
    description («когда нет пользовательских данных», () => {
    it («должен отобразить блок с содержимым по умолчанию», () => {
    const wrapper = mount ()
    const {lineOneText, lineTwoText, buttonText} = defaultConfig
    ожидать (оболочка.text ()). toBe (lineOneText + lineTwoText + buttonText)
    })
    })
    description («при ​​задании пользовательских данных», () => {
    it («должен отображать блок с использованием пользовательских данных», () => {
    const customText = «Custom Block Text»
    const wrapper = mount (
    {… props}
    lineOneText = {`$ {customText} 1`}
    lineTwoText = {` $ {customText} 2 `}
    buttonText = {` $ {customText} 3`}
    />
    )
    expect (wrapper.text ()). ToBe (`$ {customText} 1 $ {customText} 2 $ {customText} 3`)
    })
    })
    })

    Для запуска тестов введите команду терминала npm run test:

    npm run test

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

    Чтобы узнать, как проверить правильность отображения (рендеринга) CSS, прочтите предыдущую статью «Модульное тестирование CSS в настраиваемых блоках».

    Чтобы протестировать версию блока Google AMP (ускоренные мобильные страницы), скопируйте тот же код в /__tests__/AMP.spec.js, но измените строку 14 с «utils: {}» на:

    utils: {... utils, isAmpRequest: true},

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

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

    Осмотреть блок на месте

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

    Запустите локальный сервер разработки с помощью команды npm run start (или npm start):

    npm запуск

    Это должно открыть новое окно браузера, чтобы вы могли проверить настраиваемый блок. Если окно не открывается, перейдите по адресу http: // localhost: 4000 /, чтобы проверить модальный блок изображения героя.

    Блок должен отображать свойства по умолчанию (из /src/configs.js).

    Сейчас самое время изменить локальные свойства (определенные в /local/index.js), чтобы проверить функциональность настраиваемого блока, если вам так интересно.

    Постройте и опубликуйте новый блок

    После того, как вы закончите тестирование блока с локальными реквизитами, вы готовы опубликовать пользовательский блок, чтобы вы могли опробовать его в конструкторе сайтов VOLT.

    Сначала завершите локальный сервер (запуск npm), используя Ctrl + C, чтобы остановить запущенный процесс.

    Вы должны построить блок с помощью команды npm run build, чтобы опубликовать новый блок из элемента в конструкторе сайтов VOLT:

    npm запустить сборку

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

    element publish -n "Модальный блок изображения героя"

    Используйте обязательный флаг -n («имя»), чтобы задать имя блока. Обратите внимание, что название блока должно быть в кавычках. Затем интерфейс командной строки элемента предложит вам выбрать категорию для этого блока с помощью клавиш со стрелками.Выберите Hero Image Banners и нажмите клавишу Enter.

    Вы увидите предупреждение о том, что изображения для «thumbnail.png» не существует, потому что вы еще не создали эскиз для пользовательского блока, который будет отображаться в конструкторе сайтов VOLT.

    Инструкции по добавлению миниатюрного изображения см. В видео на YouTube (4 мин.) Как создать миниатюру для своего блока | Element Tutorial | VOLT Resource Center или документацию, доступную для команды публикации Element CLI.

    Создайте и отредактируйте новую тему в VOLT’s Site Designer

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

    Щелкните ссылку + Создать новую тему в конструкторе сайтов VOLT (справа от неактивных тем), чтобы открыть новую тему. Введите «Тема тестирования блока изображения героя» в качестве имени темы, затем нажмите кнопку Create в правом нижнем углу диалогового окна.

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

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

    Чтобы добавить новый модальный блок изображения героя на домашнюю страницу, сначала щелкните значок « плюс» (+) выше, где написано Добавить блок , затем щелкните Баннеры изображений героев на боковой панели, которая появляется слева.

    В этом списке найдите имя блока, которое вы указали с помощью команды публикации элемента с помощью флага -n «Имя».

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

    Вы можете предварительно просмотреть новую домашнюю страницу, используя кнопку Preview , расположенную в верхнем левом углу сайта VOLT’s Site Designer. Вы попадете в предварительную версию магазина VOLT, например:

    https: // preview-your-volusion-store.myvolusion.com/

    Кнопка «Публикация » в конструкторе сайтов VOLT еще не отображает настраиваемый блок в опубликованной (действующей) версии VOLT Store. Это потому, что новый пользовательский блок все еще находится в стадии разработки (или стадии разработки). В следующем разделе описывается перевод блока из стадии подготовки в производство.

    Обновите блок и выпустите его в производство

    Когда вы внесли изменения в модальный блок изображения героя, который вы готовы протестировать в конструкторе сайтов VOLT, вам необходимо перестроить блок с помощью npm run build, а затем обновить его с помощью команды обновления элемента:

    npm run build
    element update

    Это сделает новую минорную версию.Второстепенные версии автоматически обновляют блок внутри VOLT Site Designer, а также во всех магазинах VOLT, использующих этот блок.

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

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

    Чтобы освободить блок и сделать его доступным во всех публичных магазинах VOLT, использующих блок, используйте команду терминала освобождения элемента с флагом -n «Примечания»:

    Выпуск элемента -n «Примечания к выпуску для этой версии»

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

    Эта команда попросит вас подтвердить в командной строке, используя текстовый ввод «Y» для «да» или «n» для «нет». Это связано с тем, что выпуск блока немедленно вступает в силу для магазинов, в которых установлен ваш блок.

    Рекомендуется отслеживать выпуск версии с помощью Git в командной строке:

    git commit -am "Версия 1.0"
    git tag 1.0

    Команда освобождения элемента освободит версию 1 (V1) пользовательского блока.Для получения дополнительной информации обратитесь к команде Release CLI Element из документации Element Platform.

    Заключение

    Модальный блок изображения-героя — полезный способ понять, как классы Atomic CSS могут быть объединены для создания баннера изображения-героя с эффектом модального окна.

    Гибкость разработки

    VOLT позволяет быстро и легко создавать сложный дизайн, такой как модальный блок Hero Image, созданный в этой статье.

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

    Полный список встроенных в Element классов Atomic CSS доступен в документации Element Platform.

    В этой статье кратко затронуто использование Aphrodite для стилей, которые не обрабатываются Atomic CSS. Дополнительные сведения об использовании классов Aphrodite в Element см. В статье «Как стилизовать блок с помощью Aphrodite», которая также доступна в документации платформы Element.

    Кнопка призыва к действию в этом примере специально сделана простой. На самом деле Element предлагает компонент Button как часть своей библиотеки компонентов GitHub. Компоненты из этого репозитория по умолчанию вводятся во все блоки элементов, что позволяет пользователям стилизовать кнопки с помощью функции «Параметры дизайна» в конструкторе сайтов VOLT.

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

    В этой статье использовалось только несколько типов свойств элементов — параметров свойств, которые будут настроены пользователем блока в магазине VOLT. Учебное пособие по смешиванию других свойств элементов см. В предыдущей статье «Смешивание свойств элементов для создания рекламного баннера». Вы также можете прочитать статью Объяснение свойств элементов.

    Создание модального блока изображения героя — лишь один из примеров мощи и гибкости платформы Element. Чтобы узнать о другом руководстве, ознакомьтесь с предыдущей статьей «Как создать настраиваемый блок 404 с использованием элемента», чтобы узнать, как создать страницу «Страница не найдена», которая отображает список продуктов VOLT Store.

    .

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

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

    © Орфографика.рф, 2010 - 2019
    Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.
    При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф».
    Вопросы и предложения: info@орфографика.рф.