Сайт

Css шапка сайта: Адаптивная шапка сайта

03.09.1987

Содержание

Как сделать шапку на сайте в css html

Шапка страницы

Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.

Рис. 6.3. Ширина шапки

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

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

Рис. 6.4. Совмещение изображения по горизонтали

На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).

На этом можно считать, что фоновый рисунок в шапке готов (рис. 6.5).

Рис. 6.5. Фоновая картинка для шапки

В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже — около 15 Кб. Можно разбить фон на две составные части — градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.

Оптимизация шапки

Поскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.

Рис. 6.6. Градиентный рисунок (header-gradient.png)

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

Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)

Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.

Два рисунка для фона шапки подготовлены, пишем код HTML.

И стиль для элемента <header> и слоя header-bg .

В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.

Название сайта

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

  1. Использовать формат PNG-24 при сохранении прозрачности.
  2. Сохранить рисунок в формате GIF или PNG-8 с фрагментом градиента, а затем наложить рисунок на градиент так, чтобы совпадение было с точностью до пиксела.

Очевидно, что второй способ имеет ряд недостатков — изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.

Выравнивание по центру делается через свойство text-align , добавляемое к родителю тега <img> , а сдвиг вниз через свойство top . Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position со значением relative .

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

Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.

Шапка сайта и навигационное меню с помощью CSS

Просматривал видеокурс по блочной верстке сайта от Андрей Морковина.

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

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

В основу создания шапки я положил свойство вложенных слоев на div ‘ах. Кстати, с этим методом я только недавно познакомился в другом видеоуроке от Дмитрия Семенова. Далее, предполагается, что размеры всех фоновых изображений известны (на практике так и происходит, при вырезании их из psd-макета).

Для чистоты эксперимента приведу эти размеры: bg-nav. gif — 300x70px , bg-header.gif — 800x50px , logo.gif — 30x30px . В CSS-свойствах сделал для них подстановку с помощью фоновой заливки цветом, для подстраховки.

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

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

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

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

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

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

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

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

Чтобы сделать слой кликабельным, помещаю внутрь него ссылку. Так как изначально она является строчным элементом ( inline ), то ей невозможно задать правила, чтобы “растянуть” на всю высоту и ширину слоя-родителя div .

Поэтому “превращаю” ссылку в блочный элемент с помощью свойства display:block . А вот теперь растяну ссылку, задав для нее ширину и высоту в процентах. Конечно, можно указать эти параметры и с помощью пикселей, так как размеры логотипа известны. Но лучше возложить эту задачу на плечи браузера — пусть сам вычисляет размеры блока-ссылки:

Осталось создать навигационное меню шапки, которое должно располагаться поверх слоя div . Создаю ненумерованный список, который помещаю внутрь слоя div . Так как по коду слой div расположен выше и имеет фиксированную высоту, то список займет все оставшееся пространство под ним: 70px — 50px = 20px .

Теперь достаточно сместить список вправо с помощью float: right и прописать для него обычные свойства, чтобы расположить горизонтально и стилизовать:

Единственный момент, который вызвал у меня затруднения, это появившиеся еле заметные отступы между внешним блоком ul и внутренним элементом(ами) li . Первоначально для них я прописал свойство display: inline .

Но после “наводки” Kray Storm с форума forum.htmlbook.ru проблема была решена. Для элементов li и я поменял свойство на display: inline-block и для я дополнительно задал высоту строки line-height: 20px , равную высоте блока ul . Зазоры пропали и пункты меню растянулись на всю высоту блока-родителя.

Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими img . Разметка выполнена простыми свойствами CSS, который будут гарантировано работать почти во всех браузерах. При этом она никуда не “съедет”.

Ниже приведу полный код html-каркаса и CSS-кода.

Здесь я представлю нарисованную мною схему расположения всех блоков в шапке сайта:

И, наконец, результат всего — готовая шапка сайта:

TypeScript — размеченные объединения

> Пользовательское объединение типов — что это и как можно использоватьПомимо объединения **примитивных** типов данных (например):<% high. … Continue reading

Шапка сайта в css – как ее сделать

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

Шапка сайта – какой она бывает

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

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

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

Как в CSS можно оформить шапку сайта?

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш премиум-раздел, где вы можете посмотреть уроки по этой технологии.

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

Как зафиксировать позицию шапки и сайдбара сайта

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




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

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

Ну что же, давайте начнем!

1. Первое, что потребуется сделать – это создать html-файл нашей страницы. Здесь я создам очень простую структуру страницы. У нее будет шапка с тремя заголовками, помещенная в тег header; сайдбар со ссылками и надписью, помещенный в тег aside; сами ссылки навигации будут расположены в теге nav; контент страницы в теге article и футер в теге footer.

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

Если будете использовать теги div с идентификаторами, то тогда не забудьте сделать соответствующие изменения в файле таблицы стилей (когда мы до нее дойдем). Например, если Вы используете вместо тега header, тег div id=”header”, то и в таблице стилей Вы будете прописывать свойства для #header{…стили…}, а не для header{…стили…}.

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

Итак, вот содержимое html-файла с комментариями:

<!doctype html>
<html>
<head>
<meta charset="windows-1251">
<title>Фиксируем элементы на странице</title>
<link rel="stylesheet" href="fix. css">
</head>
<body>
<header><!--Это шапка сайта-->
<h2>Сайт с фиксированным Хедером</h2>
<h3>Эта шапка всегда останется здесь...</h3>
<h4><i>Сколько бы Вы не скролили!</i></h4>
</header>
<aside><!--Этот блок для сайдбара-->
<h3>Сайдбар нашего сайта</h3>
<nav><!--Блок для навигации-->
<ul>
<li><a href="#">Ссылка первая</a></li>
<li><a href="#">Ссылка вторая</a></li>
<li><a href="#">Ссылка третья</a></li>
<li><a href="#">Ссылка четвертая</a></li>
<li><a href="#">Ссылка пятая</a></li>
</ul>
</nav>
<p>Внимание! Этот сайдбар тоже останется на месте... ведь мы его зафиксировали</p>
</aside>
<article><!--А в этом блоке расположен контент-->
<h2>Здесь я специально помещу побольше контента, чтобы Вы могли поскролить!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
  Nunc at sem nec nisl ultricies dignissim quis a velit.
 Morbi volutpat, dolor nec scelerisque eleifend, ligula leo adipiscing ligula, id euismod nisi turpis in diam.
 Nam purus diam, sagittis volutpat vehicula ac, adipiscing ac urna. Aliquam rutrum dignissim accumsan. 
 Donec pulvinar sem vitae dolor sodales lobortis eget in metus. Suspendisse ac augue at mi lacinia commodo eget interdum diam.
 Praesent felis erat, mollis nec est quis, malesuada congue felis.
 Etiam condimentum tincidunt tortor, at ullamcorper enim cursus sed. 
 Quisque vehicula eros sit amet leo feugiat, in rutrum diam vulputate. 
 Praesent sit amet metus sodales, aliquam libero eget, sagittis ante. Nulla vestibulum felis id bibendum accumsan.</p>
<p>In iaculis arcu in sollicitudin pharetra. Nulla facilisi. Proin diam neque, viverra pretium mauris sit 
amet, placerat viverra orci. Integer suscipit congue odio, id egestas ipsum ultrices vel. Donec porttitor 
convallis adipiscing.
 
  Duis sollicitudin libero id sollicitudin mattis. Vestibulum pellentesque eros dui, in 
suscipit arcu elementum non. Integer sagittis nec risus ac suscipit.</p>
<p>Aenean a nunc id nunc ornare varius. Donec volutpat nisi et metus pulvinar pellentesque. 
Etiam porta mauris nec consectetur sagittis. Nunc ligula risus, sollicitudin at lacus eu, sodales vehicula quam. 
Suspendisse venenatis sapien sed rutrum laoreet. Suspendisse facilisis risus a augue facilisis scelerisque. 
Pellentesque tristique tellus ac bibendum rutrum. Etiam nulla urna, molestie id bibendum sodales, rutrum nec sapien. 
Nulla facilisi. Praesent ut enim erat. Phasellus ultrices leo id dui condimentum, et pharetra magna lacinia. 
Nulla sit amet sagittis tortor.</p>
<p>Vivamus id neque magna. Phasellus suscipit orci quis tortor accumsan, vitae vestibulum leo ultrices. 
Donec viverra lorem vel purus vestibulum suscipit. Sed congue erat tincidunt nibh ultrices tempor.
 
 
  
In hac habitasse platea dictumst. Nam non pellentesque dolor. Phasellus elementum lobortis orci at posuere. 
Ut eget felis accumsan, sollicitudin ante quis, venenatis felis. Ut nec mi ornare, ultricies orci vel, pharetra odio. 
Mauris ultrices felis quis nulla ornare, volutpat facilisis libero molestie. Ut sodales pellentesque arcu. 
Ut commodo ipsum ut hendrerit semper. Ut laoreet massa risus, quis facilisis ligula ullamcorper at. 
Nullam nec velit in sem semper ornare.</p>
<p>Fusce a dictum leo, ut sagittis mi. Curabitur tempus elementum lobortis. 
Duis ultricies tincidunt enim, in porta turpis condimentum pellentesque. Nulla augue libero, accumsan nec 
imperdiet ut, hendrerit at erat. In hac habitasse platea dictumst. Suspendisse ullamcorper venenatis est non pulvinar. 
Pellentesque nec placerat elit. Maecenas sit amet mi enim. In ut velit nec leo sagittis vehicula nec a mi. 
Suspendisse ut vehicula arcu, vitae dictum magna.
 
 
  Maecenas odio ante, luctus nec hendrerit et, pellentesque a mi. 
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc id condimentum eros. 
Nulla lobortis congue libero, eget tincidunt dolor venenatis in. Nunc ut auctor orci.</p> 
</article>
<!--Блок футера-->
<footer><p>Футер я не фиксировала, но я думаю Вы уже поняли, как это можно сделать!</p></footer>
</body>
</html>

 

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

Итак, создаем css-файл с именем «fix.css» (можете дать и другое имя, но тогда не забудьте его поменять в атрибуте href тега link, который подключает файл таблицы стилей) и сохраняем в том же каталоге, что и наш html-файл.

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

Давайте займемся стилями и расставим все по своим местам.

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

body: мы зададим ему ширину, выравнивание по центру, рамку и цвет фона.

article,aside,footer,header,nav{display:block;}
body{width:980px; margin:0 auto; border:1px solid #333; background:#ffdfbf;}

 

Теперь страница должна выглядеть вот так.

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

Для того чтобы сделать нашу шапку фиксированной нам нужно задать для нее высоту, ширину и прописать position:fixed. Ширина нам в данном случае нужна такая же, как и ширина для тега body, то есть 980px, а высоту я взяла равную значению 300px.

Теперь поговорим о свойстве position. Когда для position задано значение

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

Также я придам нашей шапке цвет, рамку и выровняю текст, находящийся в ней по центру.

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

Добавьте этот код в Ваш css-файл:

header{height:300px; width:980px; border-bottom:1px solid #333; 
background:#ECB035; text-align:center; position:fixed;}
header h2,header h3, header h4, article p, footer p, aside p{
font-family:Arial, Helvetica, sans-serif; color:#336;}
header h2{margin-top:0px; padding-top:50px;}

 

Если мы посмотрим на нашу страницу сейчас, то увидим следующее.

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

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

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

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

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

Добавьте вот этот код в Ваш файл таблицы стилей.

aside{position:fixed; width:200px; background:#99C; top:330px; border:1px dashed #333;}
aside h3{font-family:Arial, Helvetica, sans-serif; font-size:16px; padding:10px;}
aside p{padding-left:30px; font-size:14px; padding-right:10px;}
aside li{list-style-type:none; font-family:Arial, Helvetica, sans-serif;}
aside a{text-decoration:none; color:#FFF;}

 

И вот, что у нас получится.

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

Это очень просто исправить, ведь мы знаем высоту нашей шапки и ширину сайдбара, а также ширину страницы. Ширина страницы равна 980px, а ширина сайдбара 200. Следовательно, мы можем задать для блока с контентом ширину равную 700px и сделать отступ от левого края 230 px (30 px чтобы блок с контентом не «прилипал» к сайдбару). А зная, что высота шапки равна 300px, мы можем задать и отступ сверху в 300px (здесь мы не берем больше, потому что заголовок в начале статьи уже автоматически имеет отступ сверху).

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

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

article{width:700px; padding-top:300px; padding-left:230px;}
footer{text-align:center; width:980px; height:30px; background:#ECB035; margin-top:30px;}

 

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

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

Надеюсь урок был Вам полезен! Жду Ваших отзывов! Делитесь уроком с друзьями при помощи кнопок социальных сетей (буду очень признательна).

А также подписывайтесь на обновление блога, если Вы на него еще не подписаны. Дальше будет еще интереснее.

Успехов Вам, друзья, Хорошего Весеннего настроения и Удачных проектов!

С Вами была Анна Котельникова. До встречи!

Размещение редактируемого блока в шапке сайта

Главная / Редактирование сайта / Что такое расширенный режим? / Размещение редактируемого блока в шапке сайта

Обращаем Ваше внимание:

Служба технической поддержки не предоставляет консультаций по редактированию шаблонов.

Шаг 1

Перейдите к разделу «Настройки» — «Шаблоны».

Шаг 2

В списке найдите шаблон «_Главная. Верх» и нажмите на иконку редактирования данных в строке.

Шаг 3

Отобразится окно со списком данных. Нажмите на “Добавить новые данные”.

Шаг 4

В появившемся окне, Вам будет предложено заполнить следующие поля:

  • Название — так будет называться блок в интерфейсе CMS. Укажите любое удобное для вас имя.
  • Алиас — имя переменной в шаблоне, содержащее информацию, которую впоследствии необходимо будет указать в шаблоне редактируемого блока, помимо этого алиас содержит служебную информацию. Имя алиаса используется в шаблонах для вывода содержимого этой переменной, то есть того, чем будет заполнен блок. Алиас Вы можете придумать самостоятельно, однако, стоит отметить, что алиас блока не должен совпадать с другими алиасами на сайте, например, если уже существует блок с алиасом «block_alias» (в нашем примере), то нельзя называть другой блок точно так же.
  • Тип данных — определяющая часть переменной, например “Файлы”, “Тексты”, “Иллюстрации”, “Меню” и т.д. Задайте тип данных, которыми планируется наполнять блок. В нашем случае это «Тексты».
  • Общий — используется, чтобы указать, что данные являются общими, то есть задаются один раз для всех страниц, содержащих этот шаблон (если галочка не стоит, блок будет заполняться для каждой страницы отдельно и будет располагаться в “Данных страницы”, а не в «Дополнительных блоках»). В нашем случае необходимо отметить галочку.
  • Заполняется массивом — при активном значении в блоке появится возможность добавлять множество элементов. Подходит не для всех типов данных — благодаря этой галочке в переменной может храниться не один экземпляр данных, а несколько (подходит для данных типа “Текст”, “Текст HTML”, “Иллюстрации” и “Метаданные JSON”). В нашем случае галочку можно оставить неотмеченной.
  • ID группы типа — заполняется только для данных типа “Метаданные JSON“. Если Вы заранее создали json для какого-то сложного блока (с определенными полями) и задали ему ID, то позже Вы можете добавлять его в новые блоки, указав при этом ID необходимого json в поле. В нашем случае поле можно оставить пустым.

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

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

Шаг 5

Нажмите правой кнопкой мыши, там где Вы хотите разместить блок и выберите пункт «Исследовать элемент» («Inspect element») или нажмите F12.

Посмотрите название блока, в котором нужно будет расположить код. В данном примере это right-side.

Шаг 6

Откройте для редактирования шаблон «_Главная. Верх».

Шаг 7

Найдите по названию блок, в котором будет размещен новый блок. Сделать это можно с помощью поиска по шаблону Ctrl+F.

Вставьте код в нужное место шаблона.

Обратите внимание!

  • Код должен быть следующего вида («block_alias» в данном случае является указанным Вами при создании данных в шаге 4 алиасом, то есть, если в приведенном ниже коде вместо block_alias необходимо указать алиас созданного Вами блока данных):

<div>
            <div>{$block_alias.title}</div>
            <div>{$block_alias.body}</div>
</div>

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

{if $block_alias.body!=»»}<div>{$block_alias.body}</div>{/if}

Шаг 8

Сохраните изменения в шаблоне.

Шаг 9

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

Блок будет отображаться на сайте в указанном Вами месте (то есть в том месте страницы, где Вы разместили его в шаблоне).

Обратите внимание!

  • Вам может потребоваться задать обрамление и дизайн для созданного блока. Эти данные вносятся в файле стилей (<Настройки / Файлы дизайна / images/.. / styles.css / Изменить> или <Настройки / Файлы дизайна / images/.. / styles.less / Изменить>). Однако, рекомендуем Вам самостоятельно не вносить изменения в файлы дизайна, а обратиться к профессиональным верстальщикам.

Обратите внимание!

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

Была ли статья вам полезна?

Да

Нет 

Укажите, пожалуйста, почему?

  • Рекомендации не помогли
  • Нет ответа на мой вопрос
  • Содержание статьи не соответствует заголовку
  • Другая причина

Комментарий

html — Как добавить подзаголовок в заголовок сайта CSS

Задавать вопрос

Спросил

Изменено 1 год, 3 месяца назад

Просмотрено 285 раз

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

Вот как сейчас выглядит страница:

И как я хочу чтобы это выглядело:

Может ли кто-нибудь помочь с тем, что мне нужно сделать, чтобы получить это с помощью следующего кода?

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

Большое спасибо!

 * {
  маржа: 0;
  заполнение: 0;
  box-sizing: граница-коробка;
}
.лого {
  цвет: #34325b;
  семейство шрифтов: 'Oswald', без засечек;
  размер шрифта: 75px;
}
.subtitle {
  цвет: #34325b;
  семейство шрифтов: 'Oswald', без засечек;
  размер шрифта: 20px;
}
навигация {
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
  отступ: 25px 50px;
}
.nav-меню {
  стиль списка: нет;
  цвет: #34325b;
}
.nav-меню ли {
  отображение: встроенный блок;
  размер шрифта: 25px;
  преобразование текста: верхний регистр;
  семейство шрифтов: 'Oswald', без засечек;
  заполнение:
}
. nav-меню ли {
  текстовое оформление: нет;
  цвет: #34325b;
  отступ слева: 15px;
  отступ справа: 15px;
} 
 <заголовок>
  <навигация>
     
НАЗВАНИЕ 
    <ул>
      
  • Главная
    • 
      
  • О нас
    • 
      
  • Контакты
    •
    • HTML
    • CSS

    2

    Вы можете использовать некоторые элементы div для разделения компонентов заголовка на отдельные элементы в пределах logo element and use display: flex; и align-items: flex-end :

     * {
  маржа: 0;
  заполнение: 0;
  box-sizing: граница-коробка;
}
.лого {
  цвет: #34325b;
  семейство шрифтов: 'Oswald', без засечек;
  размер шрифта: 75px;
  дисплей: гибкий;
  элементы выравнивания: flex-end;
}
.заглавие {
  размер шрифта: 48px;
}
.subtitle {
  цвет: #34325b;
  семейство шрифтов: 'Oswald', без засечек;
  размер шрифта: 20px;
}
навигация {
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
  отступ: 25px 50px;
}
. nav-меню {
  стиль списка: нет;
  цвет: #34325b;
}
.nav-меню ли {
  отображение: встроенный блок;
  размер шрифта: 25px;
  преобразование текста: верхний регистр;
  семейство шрифтов: 'Oswald', без засечек;
  заполнение:
}
.nav-меню ли {
  текстовое оформление: нет;
  цвет: #34325b;
  отступ слева: 15px;
  отступ справа: 15px;
} 
     <заголовок>
  <навигация>
     
     
    НАЗВАНИЕ
    МОИ СУБТИТРЫ
    
    <ул>
      
  • Главная
    • 
      
  • О нас
    • 
      
  • Контакты
    •

    7

    Оберните его в div и измените его свойство отображения на встроенный блок

     * {
  маржа: 0;
  заполнение: 0;
  box-sizing: граница-коробка;
}
.лого {
  цвет: #34325b;
  семейство шрифтов: 'Oswald', без засечек;
  размер шрифта: 75px;
}
#подзаголовок {
  цвет: #34325b;
  семейство шрифтов: 'Oswald', без засечек;
  размер шрифта: 20px;
}
навигация {
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
  отступ: 25px 50px;
}
. nav-меню {
  стиль списка: нет;
  цвет: #34325b;
}
.nav-меню ли {
  отображение: встроенный блок;
  размер шрифта: 25px;
  преобразование текста: верхний регистр;
  семейство шрифтов: 'Oswald', без засечек;
  заполнение:
}
.nav-меню ли {
  текстовое оформление: нет;
  цвет: #34325b;
  отступ слева: 15px;
  отступ справа: 15px;
}
# заголовок-подзаголовок-контейнер {
  отображение: встроенный блок;
} 
     <заголовок>
  <навигация>
    
    
      <дел>
        
    НАЗВАНИЕ
    
        
    Подзаголовок
    <ул>
  • Главная
  • О нас
  • Контакты

    • Вы можете использовать flex

     * {
  маржа: 0;
  заполнение: 0;
  box-sizing: граница-коробка;
}
.лого {
  цвет: #34325b;
  семейство шрифтов: 'Oswald', без засечек;
  размер шрифта: 75px;
}
.subtitle {
  цвет: #34325b;
  семейство шрифтов: 'Oswald', без засечек;
  размер шрифта: 20px;
}
. logo-контейнер {
  дисплей: гибкий;
  flex-направление: строка;
}
.logo-название {
  дисплей: гибкий;
  flex-направление: столбец;
}
.subtitle {
  цвет: морской волны;
}
навигация {
  дисплей: гибкий;
  выравнивание содержимого: пробел между;
  отступ: 25px 50px;
}
.nav-меню {
  стиль списка: нет;
  цвет: #34325b;
}
.nav-меню ли {
  отображение: встроенный блок;
  размер шрифта: 25px;
  преобразование текста: верхний регистр;
  семейство шрифтов: 'Oswald', без засечек;
  заполнение:
}
.nav-меню ли {
  текстовое оформление: нет;
  цвет: #34325b;
  отступ слева: 15px;
  отступ справа: 15px;
} 
     <заголовок>
  <навигация>
      <дел>
    
    <дел>
     
    НАЗВАНИЕ
     
    СУБТИТРЫ ЗДЕСЬ