Менің блогыма қош келдіңіз. Біз түсінуді жалғастырамыз html негіздері. Бұл оқулық соншалықты қарапайым және қызықты болады, сондықтан бағдарламалау тілдері туралы көбірек білгіңіз келеді деп үміттенемін. Бір-екі минуттан кейін сіз HTML тілінде суретті фон ретінде жасауды үйреніп, тамаша нәтижелерге қол жеткізесіз.
Сондай-ақ, фонды мүмкіндігінше тегіс және әдемі ететін кейбір нюанстар туралы айтатын боламын. Ал, бастайық па?
Суретті таңдауМен суретті таңдаудан бастағым келеді. Парақта біркелкі және әдемі көрінуіңіз үшін және өлшемдер мен туралау туралы алаңдамайсыз. Мен бірден тегіс текстураларды іздеуді ұсынамын. Бұл не?
Өкінішке орай, бүкіл экранды толтыру үшін html-дегі кескінді созу мүмкін емес. Фотосурет нақты өлшемде пайдаланылады. Егер сурет кішкентай болса, ол төмендегі скриншоттағыдай бүкіл аумақты жабады. Кескінді созу үшін сізге қосымша CSS құжатын жасау керек, онсыз ол жұмыс істемейді.
Дегенмен, сізде жүйені айналып өту мүмкіндігі бар. Ол үшін Photoshop бағдарламасын және экранның еніне дейін (1280x720) суреттерді пайдаланыңыз. Бұл жағдайда төмен айналдыру кезінде сурет басқасын ауыстырады.
Егер сіз CSS пайдаланғыңыз келмесе, әлдеқайда жақсы нұсқа - біркелкі текстураларды пайдалану. Олардың көзге көрінетін буындары жоқ. Олар дизайндағы тұсқағаздар немесе заманауи плиткалар сияқты. Біреуі екіншісін ауыстырады және буындар көрінбейді.
Егер сіз оларды пайдаланудың заңды салдарының жоқтығына қызығушылық танытсаңыз, мен веб-сайтты іздеуді ұсынамын Pixabay.com.
Енді кодпен жұмыс жасайық. Бірден айта кетейін, біз қазір html-мен жұмыс істеп жатырмыз, яғни суретті бүкіл сайт үшін емес, тек код жазылып жатқан бір нақты бет үшін өзгертеміз. Егер сіз бүкіл ресурсты өзгертуге мүдделі болсаңыз, онда CSS арқылы кодты жасауыңыз керек, бірақ бұл туралы кейінірек.
Сонымен, сіз блокнотта жұмыс істей аласыз, маған NotePad++ ұнайды. Онда жұмыс істеу әлдеқайда ыңғайлы: код сіз үшін аяқталды, тегтер бөлектеледі. Бағдарлама тегін және салмағы шамамен 3 Мб. Мен оны өте ұсынамын, әсіресе сіз бастаушы болсаңыз.
Сонымен, тегке денеатрибут қосу керек фонжәне сурет қай жерден алынатын суретке сілтемені көрсетіңіз. Бұл бағдарламада осылай көрінеді.
Сіз жай ғана блокнотты ашып, осы кодты көшіре аласыз. Тырнақшаға өзіңізге ұнаған суреттің сілтемесін қойыңыз.
| Фондық сурет |
Фондық сурет
Жаңадан бастаушылар үшін атап өткім келеді, бұл мәселе. Егер сіз Pixabay-дан суретті алсаңыз, сілтемені суреті бар бетте емес, келесі қойындыда ашуыңыз керек.
Дәл осы URL мекенжайын көшіріңіз.
Құжатты сақтаңыз. Блокнотты пайдалансаңыз, оны пайдалану керек екенін ұмытпаңыз. html. Құжатты атаңыз, мысалы, back.html. Әйтпесе ол ретінде сақталады мәтіндік құжатжәне браузер не істеу керектігін түсінбейді.
Дайын, бет басқа түспен толтырылады.
Егер сіз html туралы көбірек білгіңіз келсе, жүктеп алуды ұсынамын Евгений Поповтың тегін курсы. Одан сіз көбірек тегтерді, тіл мүмкіндіктерін үйренесіз, жаңа әдістерді қолданып көріңіз және көбірек білесіз.
Евгений Поповтың курстары өте танымал деп айтпаймын. Көптеген сарапшылар оны ұрсады, егер сіз осындай мәлімдемелерге тап болсаңыз, онда менің пікірім. Бұл сабақтар тегін беріледі және соған қарамастан олар өздерінің негізгі міндеттерін тамаша орындайды - жаңадан бастаушыға негіздерді көрсету және оны қазіргі заманға тәрбиелеу.
Әр жазушының қалай жазу керектігі туралы өз пікірі болатыны сияқты, бағдарламашылардың да өзіндік стилі болады. Сіз бүкіл өміріңізді веб-сайттарды жасауды үйренуге жұмсай аласыз, бірақ сізге бір жерден бастау керек. Кітаптардан? Бұл емес. Иә, оларда сенімдірек ақпарат, өзекті ақпарат бар, бірақ оларды меңгеру соншалықты қиын.
Менімен келіспейсіз бе? Мен балама ұсына аламын. Элизабет пен Эрика Фриманның кітабы » HTML, XHTML және CSS үйрену" Өте қызықсыз бестселлер емес және жақында, 2016 жылы шығарылды. Ақпарат әлі ескірген жоқ.
Егер сізге сайттың барлық беттерінде қайталанатын фон қажет болса, онда CSS міндетті болып табылады. Әрине, алдыңғы тараудағыдай жолды әр жолы көрсетуге болады. Бірақ уақыт өте келе оны ауыстыру керек пе, елестетіп көріңіз: сілтеме ескіреді немесе сіз жай ғана дизайнды өзгерткіңіз келеді. Әр бетке өтіп, кодты өзгерту керек пе? Бұлай жұмыс істемейді.
CSS бұл мәселені шешуге көмектеседі. CSS кеңейтімі бар файлды жасап, келесі кодты енгізу керек:
негізгі (фон: url (файл жолы); )
Кодтың өзі туралы аздап сөйлесейік. Жақша ішінде, кейін urlүшінші тарап көзінен суретке сілтеме немесе сурет осы файлмен бір қалтада болса, құжаттың атын ғана енгізуге болады.
Жақсырақ білгісі келетіндер үшінCss көмегімен созуға болады фондық сурет, қайталанбайтынына көз жеткізіңіз, GIF анимациясын қосыңыз және т.б.
Бір мақалаға бәрін жаза алмайсыз. Ал мен өзіме мұндай тапсырма қойған жоқпын. Көптеген нәзіктіктер бар, егер олар сізге бір мақалада бәрін айтып беруге уәде берсе, онда бұл алдаудан басқа ештеңе емес.
Веб-сайттарды дұрыс жазуды үйренгіңіз келе ме? Мен сізге бағдарламалау тілдерін үйренуді ұсынамын. Мен Андрей Бернацкийдің курсын ұсына аламын» HTML5 және CSS3 нөлден Proға дейін" Маған бұл автор өте ұнайды. Мен бұл курсты бірнеше жыл бұрын қабылдаған жоқпын, бірақ азырақ заманауи.
Автор өте әдемі сөйлейді, бәрі оңай, түсінікті. Бұл курстың ерекшелігі - сіз жай оқымайсыз, мұғаліммен бірге нақты веб-сайт жасайсыз. Нәтижесінде сіз визитка, блог және тіпті интернет-дүкен аласыз. Өте керемет. Осы курстан HTML5 бойынша алғашқы үш теориялық сабақты дәл осы жерден және қазір көре аласыз.
Айтпақшы, осы курспен бірге сіз 7 бонус аласыз: html және css негіздері Андрей Бернацкий, жаңадан бастаушыларға арналған макет, кешке қондыру бетін жасау және т.б. Маңызды жаттығуларға кіріспес бұрын, тегін курсты қолданып көріңіз » HTML5 және CSS3 тілдерін жаттықтыру».
Негізі барлығы осы. Қосымша ақпарат алу үшін ақпараттық бюллетеньге жазылыңыз. Жақында мен сізге бұл туралы аздап айтып беремін адаптивті орналасу, кез келген блогтан табысыңызды арттырып, сізге көп нәрсе береді пайдалы кеңестержұмысты жеңілдету туралы. Тағы да кездескенше, істеріңізге сәттілік.
Сәлем. Бүгін біз CSS құралдарын (басқа құралдардың араласуынсыз, мысалы, JavaScript және басқалар сияқты) пайдаланып, фонды қалай созуға болатынын қарастырамыз.
Созылу CSS фонықұралдар CSS3 пайда болуымен мүмкін болды, атап айтқанда, background-size қасиетінің көмегімен. Айта кету керек, бұл сипат Javascript-тегі ұқсас шешімдерге қарағанда (олар фон өлшемі пайда болғанға дейін қолданылған) әлдеқайда жақсы жұмыс істейді, өйткені ол браузер өлшемін өзгертуге тезірек және барабар жауап береді, созылған кескінді тезірек тегістейді және олар 2000-шы жылдардың басында x, - «Javascript өшірілген болса да жұмыс істейді» дегенді ұнататын.
Шешім: CSS құралдарын пайдаланып фонды қалай созуға боладыbackground-size қасиетінде бірнеше мән болуы мүмкін.
1) бұл директивалардың бірі болуы мүмкін: cover немесе contain.
Фон өлшемі: қамту; /* Кескінді пропорцияларды сақтай отырып масштабтайды, осылайша бүкіл кескін блоктың ішіне орналасады. */ фон өлшемі: мұқаба; /* Кескінді ені немесе биіктігі блоктың еніне немесе биіктігіне тең болатындай арақатынасын сақтай отырып масштабтайды. */
2) ол пайыздық болуы мүмкін (контейнер енінің 100% немесе 94%). Бұл жағдайда 1 пайыздық мәнді немесе 2 мәнін пайдалануға болады. Егер 2 мән болса, кескіннің биіктігі мен ені бір уақытта масштабталады және әрбір мән параметрде көрсетілген пайыздарға пропорционалды түрде реттеледі. параметрлер).
Фон өлшемі: 100%; /*Мұқаба директивасына эквивалент*/ background-size: 100% 50%; /*Ені блоктың енінен 100% болады, бірақ биіктігі 50% ғана болады, кескін деформациялануы мүмкін*/
3) тікелей сандық мән (пискельде, сантиметрде, эмде және т.б.). Сондай-ақ алдыңғы жағдайдағыдай 2 (немесе 1) параметр болуы мүмкін.
4) автоматты мән. Кескіннің созылмайтынын, бірақ түпнұсқа өлшемі пайдаланылатынын көрсетеді. Бұл жағдайда 2 немесе 1 параметр болуы мүмкін, яғни келесіні көрсетуге болады:
Фон өлшемі: 60% автоматты; /*суреттің ені 60%, ал биіктігі бастапқы кескіннің өлшеміне пропорционал болады*/
CSS фондық созылу шешімі қайда жұмыс істейді?Can I Use веб-сайтына қарағанда, ол барлық заманауи браузерлерде, соның ішінде 9-дан төмен емес IE нұсқаларында жұмыс істейді. Сондықтан, негізінен, алаңдауға негіз жоқ. Үйлесімділік кестесін қараңыз: 
Бұл сабақтың мақсаты – веб-сайтқа арналған фондық кескінді ұйымдастыру жолдарын қарастыру, ол әрқашан бүкіл браузер терезесінде созылады.
Тек CSS қолданатын әдіс. №1 бөлім.Кірістірілген элементті пайдалану , оның өлшемін кез келген браузерде өзгертуге болады. Браузер терезесін тігінен толтыру үшін min-height қасиетін, ал көлденеңінен толтыру үшін width қасиетін 100% етіп орнатамыз. Біз сондай-ақ мин-ені сипатын кескіннің еніне тең етіп орнаттық, сонда ол ешқашан кішіреймейді.
Бұл әдіс - шолғыш терезесінің ені кескіннің енінен кішірек екенін тексеру үшін медиа сұрауын пайдалану және фонның ортасына қою үшін сол жақ сипаттың пайыздық мәні мен сол жақ жиегі үшін теріс мәннің тіркесімін пайдалану. сурет.
Міне CSS коды:
Img.bg ( /* Фонды толтыру ережелерін орнатыңыз */ мин-биіктігі: 100%; мин-ені: 1024px; /* Пропорционалдық коэффициентін орнатыңыз */ ені: 100%; биіктік: авто; /* Орналастыруды орнатыңыз */ позиция: жоғарғы: 0 сол жақта: 0; 512px / * 50% */ ) )
Жұмыс істейді:
Қалыпты браузердің кез келген нұсқасы: Safari / Chrome / Opera / Firefox.
IE 6: жұмыс істемейді - бірақ сіз кейбір позициялау трюктерін пайдалана аласыз.
IE 7/8: Көбінесе жұмыс істейді, шағын кескіндерді ортаға салмайды, бірақ экранды дұрыс толтырады.
IE 9: Жұмыс істейді.
Мәселені шешудің тағы бір жолы - кірістірілген элементті орналастыру бетте оның орнын жоғарғы сол жақ бұрышта бекітіңіз және пропорционалдық коэффициентін сақтай отырып, оның мин-ені мен биіктігінің қасиеттерін 100% орнатыңыз.
#bg (позиция: бекітілген; жоғарғы: 0; сол жақ: 0; /* Форматтардың арақатынасын сақтаңыз */ мин-ені:100%; мин-биіктігі:100%; )
Дегенмен, бұл кескінді ортаға салмайды. Ендеше суретті элементке орап көрейік. Бұл браузер терезесінің енінен екі есе көп болады. Оған орналастырылған сурет пропорцияларын сақтайды және дәл ортасына орналастырылған браузер терезесін толығымен жабады.
#bg (позиция: бекітілген; жоғарғы:-50%; сол жақта:-50%; ені: 200%; биіктік: 200%; ) #bg img (позиция: абсолютті; жоғарғы: 0; сол жақта: 0; оң жақта: 0; төменгі:0 маржа: мин-ені:50%;
Жұмыс істейді:
Safari / Chrome / Firefox (барлық нұсқаларда тексерілмеген, бірақ соңғы нұсқаларында жақсы жұмыс істейді).
IE 8+.
Opera (кез келген нұсқа) және IE бұл әдіспен жұмыс істеуден бас тартады (суретті орналастыру дұрыс емес).
Идея өте қарапайым, егер кескіннің арақатынасы (сызық элементі фон ретінде пайдаланылады) шолғыш терезесінің арақатынасымен салыстырылады. Кескін үшін ол кішірек болса, тағайындау керек текКескіннің ені қасиеті 100%-ға орнатылған және ол экранды биіктікте де, енде де толтырады. Ал көп болса, тағайындаңыз текКескіннің биіктік қасиеті 100%-ға орнатылған.
#bg (позиция: бекітілген; жоғарғы: 0; сол жақта: 0; ) .bgwidth ( ені: 100%; ) .bgheight ( биіктігі: 100%; )
$(функция() ( var theWindow = $(терезе), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); функциясы resizeBg() ( if ((theWindow) .width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Жұмыс істейді:
IE7+ (түтіктері бар, IE6-да жұмыс істейтін шығар)
Барлық басқа браузерлерде.
Әрбір шешім әдісінің өзіндік артықшылықтары мен кемшіліктері бар. Сізге белгілі бір жағдай үшін дұрыс таңдау керек. Жақсы, немесе өзіңізді ұсыныңыз.
Бұл сабақты бір жерден таптым youtube арнасы. Менің ойымша, веб-дизайнер үшін өте пайдалы мүмкіндік.
Кейде бастапқы кескіннің ені кез келген дизайн идеясы үшін жеткіліксіз, ал оны ені бойынша созу қажетті нысандарды бұрмалайды. Кескіннің фонын созған кезде бұл нысандарды сақтау үшін PhotoShop бізге белгілі бір құралдарды ұсынады. Сонымен, соңында біз түпнұсқа кескіннен аламыз:
Ол келесідей болуы керек:
Бастайық. Фотошопта суретімізді ашыңыз және бізге қажет нысанды таңдаңыз:
Содан кейін Таңдау қойындысына өтіңіз >> Таңдалған аумақты сақтау
Және бұл таңдау үшін кейбір ерікті атауды орнатыңыз:
Осылайша, біз кейіннен өзгерістерден қорғалатын аймақты жасадық. Келесі қадамӨңдеу >> Мазмұнға негізделген масштабқа өтіңіз:
Және қорғалған нысанды көрсетуді ұмытпаңыз:
Барлығы. Қалған нәрсе - стандартты құралдарды (немесе жоғарғы панельен пайызын өзгерту немесе суретті жай сүйреп апару). Бұған дейін (немесе ең бастапқы кезеңде) кескіннің шекаралары оның көріну аймағынан асып кетпеуі үшін кенептің өлшемін өзгерту маңызды.
Мен сол сәтте қажет болатын нақты шешімді тапқанша көптеген ақпаратты зерттеп, бірнеше әдістерді қолданып көргенім есімде.
Төменде мен фонды экранның толық еніне дейін созатын 3 әдісті көрсетемін.
№1 әдісБірінші әдіс таза CSS3 пайдаланады. Барлығы фон өлшемі қасиетінің арқасында жұмыс істейді. Менің жағдайда мен кескінді экранның бүкіл еніне дейін созамын, яғни негізгі тегіне сипаттарды тағайындаймын. Қажет болса, оны блокқа қолдануға болады, мысалы.
Біз бұл суретті сүйкімді қызбен бірге бүкіл экранды толтырамыз :)
Жалпы, біз стильдер тағайындайтын блокты анықтаймыз және осы блок үшін стиль файлына келесі кодты қосамыз:
Негізгі мәтін (фон: url(images/bg.jpg) қайталанбайтын орталық үстіңгі жағы бекітілген; -webkit-фон өлшемі: мұқаба; -moz-фон өлшемі: мұқаба; -o-фон өлшемі: мұқаба; фондық өлшемі: қақпақ)
Көріп отырғаныңыздай, фон параметрінде біз кескінге жолды қосамыз және кескіннің экранға қатысты орнын орнатамыз. Біздің жағдайларда бұл орталық және жоғарғы. Бұл сурет экранның ортасында болады, ал оның жоғарғы жағы экранның жоғарғы жағына қарай басылады дегенді білдіреді. Бұл қыздың жүзі әрқашан көрінуі үшін. Мысалы, сізде аспанды, өрісті, көкжиекті көруге болатын абстрактілі фон немесе табиғат болса, орталық пен орталық мәндерін орнатуға болады. Жалпы, егер сіз CSS-пен таныс болсаңыз, онда сіз түсінесіз деп ойлаймын. Ол сондай-ақ кескінді қатыратын fixed параметріне орнатылған.
Әдіс өте қарапайым, мен оны үнемі қолданамын және ол маған 100% сәйкес келеді. Бір ғана нәрсе бар. Ескі браузерлер CSS3-пен таныс емес, сондықтан ескі нұсқаларды пайдаланатындар қалаған нәтижені көрмейді.
№2 әдісБұл әдіс әдеттегі CSS пайдаланады. Негізінде бұл да қарапайым. Біз id - bg тағайындау арқылы суретті сайттың негізгі бөлігінде көрсетеміз:
Біз стильдерді жазамыз:
#bg (позиция: бекітілген; z-индекс: -1; жоғарғы:0; сол жақ:0; мин-ені:100%; мин-биіктігі:100%; )
Орналастыру бекітілген және бүкіл экранға созылады.
№3 әдісМұнда jQuery қолданылады. Сондықтан, егер ол бұрын қосылмаған болса, алдымен кітапхананы қосу керек.
Кітапханадан кейін біз фонымызды масштабтайтын сценарийді қосамыз
$(терезе).load(функция() ( var theWindow = $(терезе), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() ( егер ((theWindow.width() / theWindow.height())< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });
Соңында барлығы жұмыс істеуі үшін стильдер қосамыз. Мәнер файлын ашыңыз және оған келесі кодты қосыңыз:
#bg (позиция: бекітілген; жоғарғы: 0; сол жақ: 0; z-индекс: -1; ) .bgwidth (ені: 100%; ) .bgheight (биіктігі: 100%; )
Біз позициялауды қосқан стильдерден көруге болады. Бұл жағдайда ол бекітіледі. Кескін айналдыру кезінде бекітілген фон болып қалады, бірақ орналасуды абсолютті етіп өзгертсеңіз, фонды айналдыруға болады. Айтпақшы, алғашқы екі әдіспен де солай жасауға болады.
Параметр де көрсетілген - z-индекс: -1, сурет мәтіннің артында болуы үшін. Егер сізде алдында болуы керек мәтін болмаса, бұл опцияны жоюға болады.
Қай әдісті қолдану сізге байланысты. Жоғарыда жазғанымдай, бірінші әдіс маған жақынырақ. Бұл ең қарапайым және басқалардан жаман емес.
Барлығы осы, назарларыңызға рахмет. 🙂