Вграден уеб фон. Какво представляват уеб приложенията и динамичните уеб страници. Разположение на началната страница

От автора: В този урок ще разгледаме проста техника за създаване фоново изображение, който напълно ще се простира по цялата ширина на прозореца на браузъра. За да направим това, имаме нужда от CSS свойството background-size; Не е необходим JavaScript.

В днешно време стана доста популярно да се използва огромна снимка като фон, който заема цялата уеб страница. Ето примери за няколко сайта, които имат адаптивни цели фонови изображения:

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

Ето нашия план за действие.

Използвайте свойството background-size, за да запълните напълно прозореца за изглед

Свойството CSS за фонов размер е настроено да покрива. Стойността на покритието казва на браузъра автоматично и пропорционално да мащабира ширината и височината на фоновото изображение, така че винаги да е равно или по-голямо от ширината/височината на прозореца за изглед.

Използвайте медийна заявка за обработка на малки фонови изображения за мобилни устройства

За да подобрим скоростта на зареждане на страницата на малки екрани, ще използваме медийна заявка, за да обработим по-малка версия на нашето фоново изображение. Не е задължително. Тази техника ще работи и без него. Но защо използването на малко фоново изображение за мобилни устройства е добра идея?

Изображението, което използвах в демонстрацията, е с разделителна способност 5500x3600px. Тази разделителна способност е достатъчна за повечето широкоекранни компютърни монитори, налични в момента на пазара. Но за това ще трябва да обработите файл с размер 1,7 MB.

Това огромно допълнително натоварване само заради публикуването на фонова снимка така или иначе няма да помогне. И, разбира се, това ще има изключително лош ефект върху връзките, които използват Мобилен интернет. Тази резолюция също е прекомерна за устройства с малки екрани (ще разгледаме това по-подробно по-късно). Нека да разгледаме целия процес.

Всичко, от което се нуждаете за маркиране, е това:

Ще присвоим фоново изображение на елемента body, така че изображението винаги да запълва целия прозорец на браузъра.

Въпреки това, тази техника също ще работи за всеки блоков елемент(напр. div или форма). Ако ширината и височината на вашия блоков елемент са плавни, тогава фоновото изображение винаги ще се мащабира, за да запълни целия контейнер.

Задайте следните стилове за елемента body:

body ( /* Път до изображението */ background-image: url(images/background-photo.jpg); /* Фоновото изображение винаги е центрирано вертикално и хоризонтално */ background-position: center center; /* Фоновото изображение не се повтаря * / background-repeat: no-repeat; /* Фоновото изображение е фиксирано в прозореца за изглед, така че не се движи, когато височината на съдържанието е по-голяма от височината на изображението */ background-attachment: фиксирано; /* Това е, което позволява на фоновото изображение да се приспособи към размера на контейнера */ background-size: cover; /* Задава цвета на фона, който ще се показва, докато фоновото изображение се зарежда */ background-color: #464646; )

Най-важната двойка свойство/стойност, на която трябва да обърнете внимание, е:

размер на фона: корица;

Тук започва магията. Тази двойка свойство/стойност казва на браузъра да мащабира пропорционално фоновото изображение, т.е. така че ширината и височината му да са равни или по-големи от ширината/височината на елемента (в нашия случай елементът body).

Има обаче един проблем с тази двойка свойство/стойност: ако фоновото изображение е по-малко от елемента body, какво ще се случи на екрани с с висока резолюцияи/или когато имате огромно количество съдържание на страница, браузърът неизбежно ще увеличи мащаба на изображението. И както знаем, когато увеличим размера на растерно изображение, качеството на изображението намалява (с други думи, възниква пикселизация).

Увеличаването на размера на изображението от оригиналния му размер влияе върху качеството на изображението. Имайте това предвид, когато избирате правилното изображение. Демото използва огромна снимка с размери 5500x3600px, за да широкоекранни монитори, така че ще отнеме много голям екрантака че да се получи изкривяване на качеството. Да продължим. За да гарантираме, че фоновото изображение винаги е центрирано в прозореца за изглед, ще напишем:

позиция на фона: център център;

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

IN в такъв случайтрябва да сме сигурни, че фоновото изображение остава в първоначалната си позиция, дори когато потребителят превърта страницата надолу. В тази ситуация изображението или просто ще свърши при превъртане, или ще се премести, докато превъртането напредва (което може да бъде много разсейващо за потребителя). За да коригираме фона, задаваме свойството background-attachment на fixed.

фоново прикачване: фиксирано;

В демонстрацията добавих опция за „зареждане на съдържание“, за да можете да видите какво се случва, когато в браузъра се появи лента за превъртане, когато свойството за прикачен файл на фона е зададено на фиксирано. Можете също така да изтеглите демонстрацията и да си поиграете със стойностите на свойството за позициониране (като background-attachment и background-position), за да видите как се отразява на превъртането на страницата и фоновото изображение. Останалите стойности на имотите са доста ясни.

Описах подробно свойствата на фона, за да ги направя по-лесни за обяснение. Съкратената форма също ще бъде еквивалентна:

тяло ( фон: url(background-photo.jpg) център централна корица без повторение фиксирано; )

Всичко, което трябва да направите, е да промените стойността на url, за да сочи към вашето фоново изображение.

По избор: Медийно запитване за малки екрани

За малки екрани използвах Програма фотошоп, за пропорционално намаляване на оригиналното фоново изображение до 768x505px, а също така използвах Smush.it, за да намаля още малко размера. Благодарение на това размерът на файла намаля от 1741KB на 114KB. Тези. размерът на изображението е намален с 93%.

Моля, не ме разбирайте погрешно, 114KB все още са доста за чисто естетически елемент на дизайна. Като се има предвид допълнителното натоварване от 114KB, бих използвал такъв файл само ако видя възможност за значително подобряване на потребителското изживяване (UX) на сайта, защото... В момента значителен дял от интернет трафика идва от работата на мобилни устройства background - image: url (images / background - photo - mobile - devices. jpg);

Медийната заявка има ограничение на ширината от max-width: 767px, което означава, че ако прозорецът на браузъра е по-голям от 767px, ще се зареди голямо фоново изображение.

Недостатъкът на използването на тази медийна заявка е, че ако промените ширината на прозореца на браузъра си от например 1200px на 640px (или обратното), веднага ще видите момента, в който се зарежда малко или голямо фоново изображение.

В допълнение към това, поради факта, че някои устройства с малък екран могат да показват голямо количествопиксели – например iPhone 5 c дисплей тип ретинас възможност за показване на разделителна способност от 1136x640px - малкото фоново изображение ще бъде пикселизирано.

Можете да видите по-актуална версия на изходния код в този урок в GitHub. Мога да ви предупредя само за едно нещо: моля, използвайте тази техника с повишено внимание, защото големите файлове могат сериозно да повредят UX, особено ако крайният потребител използва бавна и ненадеждна интернет връзка. Това е още една причина, поради която трябва да изберете подходящ цвят на фона, така че потребителят да може да чете съдържанието, докато фоновото изображение се зарежда.

Забележка.

Потребителски интерфейс в Dreamweaver CC и др по-късни версиистана по-лесно. В резултат на това някои от функциите, описани в тази статия, може да не са налични в Dreamweaver CC и по-нови версии. Допълнителна информациявижте тази статия.

Уеб приложение е уебсайт, който хоства страници с частично или напълно негенерирано съдържание. Крайното съдържание се генерира само след като посетител на сайта поиска страницата от уеб сървъра. Тъй като крайното съдържание на страницата зависи от заявката, генерирана въз основа на действията на посетителя, страницата се нарича динамична.

Обхватът на приложения за уеб приложения е много широк. Този раздел обхваща общи въпросиизползване на уеб приложения, а също така дава пример за просто уеб приложение.

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

Уеб приложенията позволяват на посетителите бързо и лесно да намират необходимата им информация в богати на информация уебсайтове.

Този тип уеб приложение ви позволява да търсите съдържание, да организирате съдържание и да навигирате в него по начин, удобен за посетителите. Примери за такива приложения включват интранет мрежи на компании - Microsoft MSDN (www.msdn.microsoft.com) и Amazon.com (www.amazon.com).

Уеб приложенията ви позволяват да събирате, съхранявате и анализирате данни, получени от посетителите на сайта.

Дълго време се използва метод, при който данните, въведени в HTML формуляри, се изпращат до CGI приложения или специално определени работници под формата на имейл съобщения за обработка. Уеб приложението ви позволява да запазвате данни директно в базата данни, както и да извличате данни и генерирате отчети на базата на получените данни за анализ. Примерите включват интерактивни страници на банки, страници за инвентарен контрол, социологически проучвания и анкети, както и формуляри за обратна връзкас потребители.

Уеб приложение може да се използва за актуализиране на уебсайтове с периодично променящо се съдържание.

Уеб приложението освобождава уеб дизайнера от рутинна работа постоянна актуализация HTML страници на уебсайтове. Доставчиците на съдържание, като редактори на новини, са отговорни за поддържането на свежия материал, а уеб приложението следи автоматична актуализациясайт. Примерите включват уеб версията на списание The Economist (www.economist.com) и новинарската услуга на CNN (www.cnn.com).

Светлана работи като уеб дизайнер и вече е за дълго времеизползва Dreamweaver в работата си. Нейните отговорности включват осигуряване на работата на вътрешния корпоративен сайт и интернет сайта на средно голяма фирма с около 1000 служители. Един ден служителят по човешки ресурси Сергей се обърна към нея с проблема си. Отделът по човешки ресурси наблюдава програмата за здраве на служителите. Програмата награждава служителите със специални точки за всеки изминат километър пеша, бягане или каране на колело. В края на месеца всеки служител изпраща отчет по имейл до Сергей, като посочва общия брой километри. След това Сергей, на базата на получените имейл съобщения, награждава служителите с малки парични награди в зависимост от точките, които натрупат.

Проблемът е, че уелнес програмата стана много популярна. В момента броят на участниците в тази програма се е увеличил до такава степен, че в края на месеца Сергей няма време да обработи цялата информация, която идва при него. електронна поща. Затова той се обърна към Светлана с въпрос относно възможността за решаване на този проблем с помощта на уеб технологии.

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

Служителите ще въвеждат данни за своите спортни постижения в проста HTML форма.

Получените данни ще бъдат запазени в базата данни.

Точките ще бъдат присъдени въз основа на получените данни.

Всеки служител може да получи данни за своите резултати.

В края на всеки месец Сергей има възможност да получи всички окончателни резултати.

В най-кратки срокове Светлана създаде и стартира необходимото приложение, тъй като Dreamweaver разполага с всички необходими инструменти за бързо и лесно създаванетози вид приложение.

Всяко уеб приложение е колекция от статични и динамични уеб страници. Статична уеб страницае страница, която винаги се показва непроменена на потребителя. Уеб сървърът изпраща страницата, както е поискано от уеб браузъра, без никакви промени. За разлика от това сървърът прави промени в динамична уеб страницапреди да го изпратите на браузъра. Тъй като страницата се променя, тя се нарича динамична.

Например, можете да създадете страница, която показва резултатите от вашата уелнес програма. Въпреки това, част от информацията (например името на служителя и неговите резултати) ще бъде определена в момента, в който служителят поиска страницата.

Следващият раздел разглежда по-подробно как работят уеб приложенията.

Статичният уебсайт съдържа колекция от съответстващи HTML страници и файлове, хоствани на компютъра, на който е инсталиран уеб сървърът.

Уеб сървърът е софтуер, който обслужва уеб страници в отговор на заявки от уеб браузъри. Обикновено заявка за страница се прави, когато щракнете върху връзка на уеб страница, изберете отметка в браузъра си или въведете URL в адресната лента на браузъра.

Крайното съдържание на статична уеб страница се определя от разработчика и остава непроменено по време на процеса на заявка на страницата. Пример:

Информационна страница на Trio Motors За Trio Motors

Целият HTML код се създава от разработчика, преди страницата да бъде хоствана на сървъра. Тъй като HTML кодът не се променя, след като страницата е хоствана на сървъра, страницата се нарича статична.

Забележка.

Строго погледнато, „статичната“ страница може всъщност да не е такава. Например изображение на контейнер или Flash съдържание (под формата на SWF файл) може да вдъхне живот на статична страница. В този контекст обаче страницата е статична, защото се изпраща до браузъра без промяна.

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

В случай на уеб приложения, някои части от кода на страницата липсват, докато посетителят не поиска страницата. Липсващият код се генерира чрез някакъв механизъм и едва след това страницата може да бъде изпратена до браузъра. Този механизъм за генериране на код се обсъжда в следващия раздел.

Когато уеб сървър получи заявка за обслужване на статична уеб страница, той изпраща страницата директно към браузъра. Въпреки това, когато се поиска динамична страница, действията на уеб сървъра не са толкова ясни. Сървърът изпраща страницата специална програма, което формира последна страница. Такава програма се нарича сървър на приложения.

Сървърът на приложения чете кода, намерен на страницата, генерира последната страница според прочетения код и след това го премахва от страницата. Резултатът от всички тези операции е статична страница, която се изпраща на уеб сървъра, който от своя страна я изпраща на клиентския браузър. Всички страници, които браузърът получава, съдържат само HTML код. Схематично представяне на процеса:

Съхраняването на съдържание в база данни ви позволява да отделите дизайна на уебсайта си от съдържанието, което потребителите ще видят. Вместо да се създават всички страници като отделни HTML файлове, за всеки тип представена информация се пишат само шаблони на страници. След това съдържанието се зарежда в база данни, след което уебсайтът ще го извлече, когато потребителите го поискат. Освен това можете да актуализирате информацията в един източник и да копирате тази промяна в целия си уебсайт, без да редактирате ръчно всяка страница. Adobe Dreamweaverви позволява да създавате уеб формуляри за вмъкване, актуализиране и изтриване на информация в база данни.

Извиква се програмна инструкция, предназначена за извличане на данни от база данни запитване към база данни. Заявката се състои от критерии за търсене, изразени с помощта на език за база данни, наречен SQL (Език за структурирани заявки). Текстът на SQL заявката се намира в скриптове на страници от страната на сървъра или в тагове.

Сървърът на приложения не може директно да извлича данни от базата данни, тъй като базите данни използват специфични формати за съхранение на данни, причинявайки опит за извличане на такива данни да прилича на опит за отваряне документ на MicrosoftИзползване на думи текстов редактор Notepad или BBEdit. Следователно, за да се свърже с базата данни, сървърът на приложения използва посредник - драйвера на базата данни. Драйверът на базата данни е софтуерен модул, който установява взаимодействие между сървъра на приложения и базата данни.

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

По-долу е даден пример за проста заявка към база данни в SQL.

ИЗБЕРЕТЕ фамилия, собствено име, точки на годност ОТ служители

Следващият пример демонстрира процеса на изпълнение на заявка към база данни и връщане на получените данни в браузъра.

Всяка база данни е подходяща за използване в уеб приложение, при условие че подходящият драйвер за база данни е инсталиран на сървъра.

За да създадете евтини приложения, можете да използвате файлова база данни, като базата данни, създадена с Microsoft Access. Ако планирате да създадете надеждни корпоративни приложения, препоръчително е да използвате сървърна база данни, например базирана на сървъри на Microsoft SQL сървър, Oracle 9i или MySQL.

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

Процесът на разработване на динамични страници се състои от писане на основен HTML код и след това създаване на сървърни скриптове или HTML тагове на страница, които правят страницата динамична. Ако погледнете крайния код, можете да видите, че скриптовият език е вграден в HTML кода на страницата. Съответно такива скриптови езици се наричат ​​HTML-вградени езици. Следващият пример използва ColdFusion Markup Language (CFML).

Забележка: Dreamweaver CC и по-нови версии не поддържат CFML.

Информационна страница на Trio Motors За Trio Motors

Trio Motors е водещ производител на автомобили.

Не пропускайте да посетите страницата на нашия #отдел#.

Вграден тази страницаинструкциите правят следното.

Създава се променлива с името отдел, след което му се присвоява низова стойност "Продажби".

Стойността "Продажби" се поставя в HTML кода.

Сървърът на приложения се връща Следваща страницакъм уеб сървъра:

Информационна страница на Trio Motors За Trio Motors

Trio Motors е водещ производител на автомобили.

Не пропускайте да посетите нашата страница Продажби.

Уеб сървърът изпраща страницата до браузъра, който я изобразява по следния начин.

Относно Trio Motors

Трио Моторс е един от водещите производители на автомобили.

Не забравяйте да посетите нашата страница за продажби.

Изборът на скриптов език или език, базиран на тагове, зависи от използваните сървърни технологии. По-долу е даден списък на езиците, които се използват най-често в сървърните технологии, поддържани от Dreamweaver.

Сървърна технология

Dreamweaver може да създава скриптове от страна на сървъра или необходимите тагове за страници, или разработчикът може сам да напише необходимия код, като използва средата за кодиране на Dreamweaver.

Този раздел предоставя дефиниции на често използвани термини, свързани с уеб приложения.

Сървър за приложения

Софтуер, който се използва от уеб сървър за обработка на уеб страници, съдържащи сървърни скриптове или тагове. Когато се поискат такива страници, уеб сървърът първо ги предава на сървъра за приложения за обработка и след това ги изпраща на клиентския браузър. За повече информация вижте Как работят уеб приложенията.

Най-често срещаните сървъри за приложения поддържат ColdFusion и PHP.

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

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

Има компании, като Powerhouse или Adidas, които използват видео във фонов режим на сайта, за да предадат конкретно съобщение или история за продукт или услуга на потребителя.

Макар че най-популярният начин за създаване на видео фон е да използвате HTML5 видео таг заедно с някои CSS опции, струва си да разгледате и алтернативни видео източници като YouTube. В този случай няма да се притеснявате за бавен отговор на сървъра, защото заявката ще бъде изпратена директно до YouTube.

В тази статия ще ви покажа как можете да създадете готин уебсайт, като използвате видеоклипове в YouTube като фон. Ще използваме jQuery.mb.YTPlayer.js за редактиране и контрол на външния вид на нашето видео. Така че да започваме!

Изтегляне на източници
Демонстрация

Ще имаш нужда:

//Голямо фоново съдържание тук //Относно съдържанието на раздел тук //Малко фоново съдържание на раздел тук

Сега трябва да попълните всеки раздел със съдържание. В секцията с голям фон и малък фон поставете клас шаблон, за да създадете фина текстура на нашето видео. Трябва също да добавите h1, h2, параграф и бутон.

ВИДЕО В YOUTUBE НА ФОН Искам да науча как да направя това Поставете всяко видео от YouTube на фона на сайта

Чудите се как да добавите видео към фона на уебсайта си?
Не може да бъде по-лесно! С jQuery MB.YTPlayer, jQuery плъгин, можете да вградите всяко видео в YouTube във фона на вашия уебсайт.
Можете лесно да превърнете всяко видео в HTML фон. Без забавяне на зареждането на страницата и без натоварване на сървърите!

Ето какво използвахме, за да настроим видеото:

• class player – този клас се използва от плъгина mb.YTPlayer
• videoURL – видео връзка
• задържане – ​​CSS селектор, в който да възпроизведете видеоклипа
• autoPlay – автоматично пускане на видео
• заглушаване – наличие на звук
• startAt – час, в който искате да започне възпроизвеждането на видеото
• opacity – прозрачност на видеото

Html (височина:100%) тяло (шрифт:15px/23px "Raleway",sans-serif; margin:0; padding:0; height:100%; width:100%; -webkit-font-smoothing:antialiased; - webkit-text-size-adjust:100% ) p (font-size:20px; line-height:140%; text-align:center) ul li ( display:inline-block; list-style:none; padding-right : 10px; )

Wrapper (z-index:600; position:relative) .pattern (background-image:url(../images/pattern.png); background-repeat: repeat; background-attachment:scroll; width:100%; height: 100%; позиция:абсолютна; горе:0; ляво:0) .divider (background-image:url(../images/divider.png); display:block; width:300px; height:35px; margin:10px auto ) #colorize ( color:#f1c40f; font-family:"Lato",sans-serif; font-size:40px )

Време е да оформите секцията с голям фон. Задайте z-индекса на 550 и параметъра за препълване на скрит. Това е необходимо, за да се гарантира, че съдържанието на YouTube (субтитри, анотации) не се показва на нашия уебсайт. Останалите стилове са за заглавки, бутони и изображение по подразбиране (повече за това по-късно).

Голям фон ( z-index:550; text-align:center; height:100%; min-height:100%; position:relative; overflow:hidden) .big-background .big-background-container ( width:830px ; max-width:100%; display:inline-block; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate (-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%, -50%) ) .big-background-title ( font-family:"Raleway",sans-serif; font-size:78px; color:#fff; font-weight:300; text-transform:uppercase; text-align :center; margin-bottom:22px; padding-top:20px; display:inline-block; background-attachment:scroll; background-repeat:repeat-x; background-position:top center ) a.big-background-btn ( font-family:"Lato",sans-serif; font-size:13px; text-transform:uppercase; text-decoration:none; color:#fff; background:transparent; border:2px solid #fff; padding:10px 14px курсор:показател;разстояние между буквите:2px;подравняване на текст:център; дисплей: inline-block; -webkit-transition: .4s лекота на фона; -moz-transition: .4s лекота на фона; -o-transition: .4s лекота на фона; преход: .4s лекота на фона; ) .big-background-btn:hover ( цвят:#fff; background:rgba(255,255,255,0.20) ) .big-background-default-image ( background:url(../images/sunset.jpg); background-repeat :no-repeat; background-position:center center; background-size:cover; width:100%; height:100%; z-index:0; backface-visibility:hidden )

Сега нека да преминем към секцията относно. Нека зададем цвета на фона на бяло и подложката на 60px отгоре и отдолу и 20px отляво и отдясно.

About-section (font-family:"Lato",sans-serif; color:#7f8c8d; background:#fff; padding:60px 20px) .about-section-container (text-align:center; padding-bottom:50px) .about-section-title ( font-family:"Raleway",sans-serif; font-size:40px; background:#fff; color:#3d566e; padding:0 35px; margin-bottom:22px; background-attachment: превъртане; background-repeat:repeat-x; background-position:center center; text-transform:uppercase) a.about-section-btn (font-family:"Lato",sans-serif; font-size:13px; text -transform:uppercase; text-decoration:none; color:#34495e; background:transparent; border:2px solid #34495e; padding:10px 14px; cursor:pointer; letter-spacing:2px; text-align:center; display: вграден блок; -webkit-transition: .4s лекота на фона; -moz-transition: .4s лекота на фона; -o-transition: .4s лекота на фона; conversion: .4s лекота на фона; ) .about-section-btn:hover (цвят:#fff; фон: #34495e; )

За секцията с малък фон, която също служи като долен колонтитул, ще зададем ширината на 100% и преливането на скрито. Също така ще добавим подложка отгоре и отдолу, за да направим видеоклипа ни видим. И накрая, нека добавим стилове за бутоните на социалните медии.

Small-background-section (font-family:"Raleway",sans-serif; padding:100px 0; position:relative; width:100%; overflow:hidden) .small-background-container (position:relative; text-align :center) .small-background-title (font-size:40px; color:#f1c40f; font-weight:300; z-index:10; display:inline-block; text-transform:uppercase; margin-bottom:20px ; margin-top: 20px; position:relative; background-attachment:scroll; background-repeat:repeat-x; background-position:top center) .socials a (цвят:#fff) .socials a:hover (цвят:# bdc3c7)

@медиен екран и (максимална ширина: 768px) ( .about-section-title ( line-height:1 ) ) @медиен екран и (максимална ширина: 480px) ( .big-background-title ( font-size:58px ) .small-background-title ( line-height:1 ) /*.player( display: none;) -> Ако искате да премахнете видеото bg на конкретен прозорец за изглед без плъгин*/) @media екран и ( max-width: 360px) ( .big-background-title,#colorize ( line-height:1 ) ) @медиен екран и (max-width: 320px) ( .small-background-title ( font-size:30px ) )

Въпреки това можем да използваме jQuery, за да добавим фоново изображение по подразбиране, в случай че браузърът открие, че потребителят посещава сайта от мобилно устройство.

Ръчно решение

За да определим, че потребителят посещава от мобилно устройство или таблет, можем да скрием елемент на определен размер на екрана. Например, искаме да премахнем видеофона на екрани с ширина 480px. Просто трябва да добавите display: none към елемента player:

@медиен екран и (максимална ширина: 480px) ( .player( дисплей: няма; ) )

Що се отнася до jQuery, тук ще зададем променливата is_mobile с параметър false. След това се уверете, че класът играч има display: none. Ако е така, ще добавим класа big-background-default-image към секциите big-background и small-background-section, за да използваме фоновото изображение по подразбиране. В противен случай нищо няма да се промени.

(function($) ( $(document).ready(function() ( var is_mobile = false; if($(".player").css("display")=="none") ( is_mobile = true; ) if (is_mobile == true) ( ​​​​//Условен скрипт тук $(". big-background, .small-background-section").addClass("big-background-default-image"); )else( $( ". играч").mb_YTPlayer(); ) )); ))(jQuery);

(function($) ( $(document).ready(function() ( //Device.js ще провери дали е Tablet или Mobile - http://matthewhudson.me/projects/device.js/ if (!device. tablet() && !device.mobile()) ( $(".player").mb_YTPlayer(); ) else ( //jQuery ще добави фона по подразбиране към предпочитания клас $(".big-background, .small- фонова секция").addClass("голямо-фоново-изображение по подразбиране"); ) )); ))(jQuery);

Тук използвах методите device.mobile() и device.tablet(), за да проверя устройството, от което потребителят е влязъл. Ако условието е изпълнено, класът big-background-default-image се добавя към секциите big-background и small-background-section. В противен случай класът на играча ще остане непроменен и видеото ще се възпроизведе.

Сигурен съм, че с развитието и усъвършенстването на уеб дизайна ще се появят все повече и повече креативни идеи за използване на видео в дизайна на уебсайтове. Надявам се, че сте научили нещо от този урок. Напишете вашите мисли и коментари в коментарите.

От преводача.За всички ваши желания и коментари относно превода, моля свържете се с мен на лично съобщение. Благодаря ти!

| 16.04.2015

През изминалата година уеб дизайнерите все повече започнаха да използват оригинален начин за оживяване на сайт - поставяне на видео като фон на страница. Интересен сюжет или просто „жива“ картина на заден план ще украси дори обикновен уебсайт за визитна картичка, ще заинтересува потребителя и ще го насърчи да остане по-дълго на сайта. Днес ще споделим с вас един от начините за задаване на видео фон на цял екран за уебсайт с помощта на HTML5 и CSS.

Ако сте твърдо убедени, че искате да зададете видеоклип за фон на сайта, трябва да знаете някои нюанси:

За нашия пример взехме видеоклип с резолюция 1920x1080, продължителност 15 секунди и тегло малко над 3 MB. В блока с идентификатор video-bg е нашият фон:

Тагът има следните атрибути:

• width – ширина на областта за възпроизвеждане на видеото;
• височина – височина на зоната;
• autoplay – автоматично възпроизвеждане на видео;
• loop – циклично повторение на видеото;
• плакат – изображение, което се показва вместо видео, докато се зарежда или е недостъпно.

След това сме написали два тагова, които указват URL адреси на видео в различни формати - MP4 и WEBM. Защо да включвате видео в няколко формата? Факт е, че не всички браузъри поддържат само един видео формат. За да може видеото да бъде разпознато от всички съвременни браузъри, трябва да предоставите файла поне в тези два формата. А атрибутът тип с подходящи стойности помага на браузъра да направи по-бърз избор.

Нашият фонов стилов лист изглежда така:

#video-bg ( позиция: фиксирана; горе: 0; дясно: 0; долу: 0; ляво: 0; преливане: скрито; z-индекс: 1; фон: url(bg/daisy-stock-poster.jpg) не -repeat #94a233; background-size: cover; ) #video-bg > video ( position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height : auto; ) @supports (object-fit: cover) ( #video-bg > video ( top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; ) )

Както можете да видите от кода, фонът е зададен на цялата страница, а изображение (кадър от същото видео) е зададено като резервен фон. В най-лошия случай цветът на фона ще бъде #94a233.

В кода има и директива @supports, която проверява дали браузърът поддържа свойството за приспособяване на обекта. Ако отговорът е да, тогава фонът приема покритието на стойността и се показва пропорционално, когато различни размериекран.

Според caniuse.com свойството object-fit в момента се поддържа от всички браузъри с изключение на Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 и Android браузър 4.1-4.4.

Анализ на продажбите

Интеграция с вашата телефонна централа

Интеграция на уебсайтове

Свързването на специални джаджи ще ви спести необходимостта ръчно да прехвърляте потенциални клиенти и контакти към системата! Създайте специални формуляри на вашия уебсайт. След като клиентът ги попълни, контактът или транзакцията ще влезе автоматично в системата amoCRM.

Приложение за iPhone или Android

Приложенията amoCRM за iPhone и Android ви позволяват да преглеждате вашия списък с клиенти, потенциални сделки, списък със задачи и канал за събития.

Удобен работен плот

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

Разширения и джаджи

Направете работата с amoCRM позната и удобна! Създайте свои собствени имейл бюлетини само с две кликвания. Интегрирайте amoCRM с телефония и спестете времето на вашите специалисти. Съхранявайте вашите файлове удобно съхранение в облака Dropbox.

База данни за клиенти, компании и сделки

Тук се събира цялата информация за всеки клиент, активни преговори, текущи договори и бъдещи продажби. Освен това програмата осигурява „интелигентно“ търсене, тагове и филтър. Всяка сделка има емисия за събития, в която се съхраняват всички бележки и файлове с предложения, и тук можете да задавате нови задачи. Цялата история на взаимодействията с клиентите е на едно място.

amoCRM помага да се гарантира, че всяка сделка има планирано действие и ви напомня, ако дадена задача е просрочена или нищо не е планирано. Въведете сделката, оставете бележка и добавете задача. Мисията изпълнена? Просто го задраскайте. Те се намират в специален интерфейсен раздел. Сетихте ли се да се обадите на Сергей? Обади ли се? Точно тук отбелязваме, че задачата е изпълнена.

Пълна интеграция с вашата поща

Свържете неограничен брой всякакви пощенски кутии и кореспонденцията ви автоматично ще се появи в amoCRM. Ние автоматично ще създаваме нови сделки за всеки нов имейл от клиент. Дори ще проследим скоростта на обработка на входящи заявки.

Анализ на продажбите

amoCRM предоставя диаграми на разпределението на транзакциите по статус, мениджър или в друг удобен за вас раздел. Освен това системата изгражда прогнози за продажбите въз основа на предварително събрана статистика и текущата ситуация.

Интеграция с вашата телефонна централа

AmoCRM ще стане ваш незаменим помощник при извършване и пренасочване на повиквания. С негова помощ можете да „запомните“ имената на всички ваши клиенти. Програмата съхранява и цялата статистика на вашите входящи и изходящи обаждания. След установяване на връзка с вашата телефонна централа, в интерфейса на amoCRM ще се появи специална икона под формата на телефон. Едно кликване и номерът се набира автоматично на телефона на мениджъра. Можете да се обаждате както от списъци, така и от карта за контакт или транзакция.