Как добавить фоновый рисунок на веб-страницу?
Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background , которое в свою очередь добавляется к селектору body .
Общий синтаксис добавления фона следующий.
body Путь к графическому файлу будет различаться, в зависимости от того, где он располагается относительно текущего документа. Например, если HTML-документ и рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif) .
При добавлении фоновой картинки учтите, что изображение загружается не сразу, поэтому цвет фона должен быть таким, чтобы сохранить достаточный контраст между цветом текста и фона. Лучше всего устанавливать цвет фона близким к цвету фонового рисунка, здесь опять же поможет универсальное свойство background , как показано в примере 1.
Пример 1. Добавление фона
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фон .
В данном примере фон веб-страницы задан цветом хаки, а текст — белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.
Шапка и подвал сайта (Header и Footer)
Посмотрите видеоурок о том, как добавить шапку и подвал на сайт или прочитайте подробную инструкцию ниже.
Чтобы разместить блок сразу на всех страницах сайта (например, меню), нужно создать отдельную страницу, поместить на нее элементы, которые должны быть на всех страницах, перейти в Настройки сайта → Шапка и подвал и назначить созданную страницу как шапку или подвал.
Header (хедер, хидер, шапка) – это блок в верхней части страницы сайта , который виден на всех страницах сайта. Как правило, содержит логотип, меню, контакты, переключатель языков или корзину, если в интернет-магазине несколько страниц и нужна общая корзина.
Чтобы сделать хедер, создайте новую страницу и добавьте нужные элементы: меню или логотип. Перейдите Настройки сайта > Шапка и подвал и назначьте эту страницу как шапку (header).
Footer (футер, подвал) — блок в нижней части страницы. Содержит полезную, но не первостепенную информацию. Виден на всех страницах сайта. В футер можно вынести: копирайт, название студии, которая разрабатывала сайт, контакты. Иногда в футере дублируются пункты меню. Футер создается аналогично хедеру: создайте новую страницу, на ней оформите футер, перейдите Настройки сайта > Шапка и подвал и назначьте эту страницу как подвал (footer).
Чтобы хедер и футер стали видны, опубликуйте все страницы (а не только страницы, назначенные как хедер и футер).
Видео на фон в Zero блоке
Вместо .tn-elem__2946290291616420206251 укажите класс своего HTML-элемента. Задать произвольный класс элементу в Zero блоке можно с помощью контекстного меню (вызывается правой кнопкой мыши по элементу) и нажать «Add CSS Class Name».
Фоновое видео пропорционально ширине и высоте экрана устройства
Предупреждение. На смартфоне видео будет прыгать при скрытии адресной строки и панели снизу (где кнопки). Лучше использовать 1-й вариант кода.
.videoBackground > video Фоновое видео на всю страницу в Тильде
Предупреждение. На смартфоне видео будет прыгать при скрытии адресной строки и панели снизу (где кнопки). Лучше использовать 1-й вариант кода.
.videoBackground > video Глаза боятся — руки делают. Создаем обложку в Directum 5.8 (Инструкция для ленивых)
В ходе работы иногда наступает момент, когда надо сделать обложку для той или иной разработки — исправить имеющиеся или добавить что-то свое. Однако нормального материала для разработки мало, времени и затрат на разбирательства уходит много. Я предлагаю вариант не уникальный и не универсальный, я предлагаю рассмотреть вариант для Лентяев.
Обложка. Обложка в папке — Архив.ZIP где содержатся папки и файлы с картинками. Разбираться в этих каталогах и морально готовиться в изучению CSS или HTML — доводит до дрожи. Однако, для Лентяев типа меня, все уже давно сделано, осталось только освоить. Для этого нам понадобиться браузер (именно браузер, а не программа для скачивания браузеров), модуль типа Договоры или Канцелярия как основа и час-два на решение нашего вопроса. Приступим же. Но сначала узнаем про первоисточник javaScript для Directum. И начнем.
Шаг 1. Подготовка
Открываем каталог модуля, где есть обложка, и находим исходный документ:
Далее открываем его и выносим на наш ПК:
Итак, это наша база. Для работы у нас все есть — начнем же.
Шаг 2. Исследуем элементы и конструируем обложку
Открываем файл index.htm браузером.
Прекрасно. Теперь используем встроенные инструменты браузера, обычно это заложено прямо в выпадающее меню. Пробуем:
Справа открылась панель с уже расшифрованными данными HTML, но мы пока не будем бояться и ужасаться виду этого кода. Вместо этого приглядимся к тому, что нам видно, а именно — названия блоков и кнопок:
Вполне себе узнаваемые слова и их значения. Именно их мы и будем рассматривать для создания «Ленивой обложки«, причем я не призываю изучать все тонкости JavaScript, а использовать только одну лазейку на все случаи ленивой жизни. А именно:
ScriptExecute('CreateRecord','ReferenceName=РКК|ViewName=РККВх|SetOurOrgContext=-1')Этого нам будет достаточно для всего. Как же это использовать по-ленивому?
Да очень просто — создаем Сценарий с условным именем «OBLOJKA» и на этом пока остановимся. Теперь в нашем коде выпишем кусочек кода html:
href="JavaScript:ScriptExecute('Oblojka','Mode=1')"Что дальше? Строим конструктор, не забывая менять значение Mode:
Уже можно сохранять на ПК и загружать в нашу новую обложку:
Помещаем документ в СЭД и прикрепляем к папке:
То что надо, и совсем без потери сил и времени. Однако что мы по факту получили? Кнопки есть, а толку нет! С этим надо что-то делать.
Шаг 3. Запуск и проверка обложки
Идем в Сценарии, в тот самый Oblojka, открываем его и пишем:
Mode = Object.Params.FindItem('Mode') if Mode == '1' // Открыть справочник ORG = References.ОРГ.GetComponent View = ORG.CreateView('Главное') View.ViewMode = vmView View.MainForm.Show endif if Mode == '2' // Документ по шаблону EDOC = EDocuments.CreateNewFromTemplate('TKED';'VED';'Д000453') EDOC.Form.Show endif if Mode == '3' // Запустить отчет Report = reports.GetObjectByName('NameReport') Report.Execute endif if Mode == '4' // Отркыть папку с документами определнного вида Search = Searches.CreateNew(ckEdocument) Criterion = Search.SearchCriteria.Add('ISBEDocKind') Criterion.Add('Д000344') Criterion = Search.SearchCriteria.Add('ISBEDocAuthor') Criterion.Add(tasks.CurrentUser.Code) Search.Show(ssmBrowse; FALSE) endif if Mode == '5' // Сказать "Привет!" ShowMessage("Привет!") endifИ теперь — попробуйте сделать выбор на вашей обложке — все работает.
Суммарные затраты на все проделанное в этой статье не беря в расчет текст и правку опечаток = 30 минут. Согласитесь — крайне ленивый вариант, который тем не менее работает. А сэкономленное время можно потратить на изучение стилистики обложки, функционированию браузера и прочим элементам для украшательства выходного материала.
В общем — идея понятна: не обязательно быть Гуру в CSS, JavaScript и HTM, чтобы создать обложку под ваши нужды. Надо немного времени, браузер и сценарий, который воплотит все ваши желания в реальность.