Kokie yra žingsniai norint sukurti interaktyvų svetainės dizainą naudojant HTML ir CSS?

Šiame straipsnyje pateikiami veiksmai, kaip sukurti interaktyvų svetainės dizainą HTML ir CSS naudojant:

• Peržiūros srities metažyma
• Atsakingi vaizdai
• „Flexbox“ išdėstymas
• Tinklelio išdėstymas
• Žiniasklaidos užklausos

Kaip sukurti interaktyvų svetainės dizainą naudojant HTML ir CSS?

Kuriant interaktyvų svetainės dizainą naudojant HTML ir CSS, reikia sukurti išdėstymą, kuris prisitaikytų prie skirtingų ekrano dydžių ir skiriamųjų gebų. Norėdami sukurti interaktyvų svetainės dizainą, galite atlikti šiuos veiksmus:

1 veiksmas: peržiūros srities metažyma

„ peržiūros sritis “ metažyma vaidina labai svarbų vaidmenį kuriant interaktyvų interneto dizainą. Jis įterpiamas į ' “ HTML failo žymą, kurioje yra šie atributai:

Aukščiau pateikta metažyma turi du atributus:

• „ vardas ” atributas nurodo funkcijos, kuriai ši žyma sukurta / naudojama, pavadinimą. Pavyzdžiui, nustatydami „ peržiūros sritis “ į „ vardas “ atributas, skirtas tvarkyti skirtingų įrenginių peržiūros sritį.
• „ turinys “ atributas apibrėžia ankstesnę atributo reikšmę. Jis nustato kiekvieno įrenginio plotį ir padidina dokumento / tinklalapio mastelį iki 100%.

2 veiksmas: reaguojantys vaizdai

Kadangi vaizdo dydis skiriasi vienas nuo kito, sunku nustatyti vienodą. aukščio “ arba „ plotis “ savybė kiekvienam vaizdui. Kai vaizdo dydis yra fiksuotas, vartotojai nekeičia tinklalapio vaizdo dydžio naudodami ekraną. Tačiau vartotojai gali nustatyti reaguojantį vaizdą naudodami šį kodą:

„ maksimalus plotis CSS ypatybė apriboja vaizdo rodymo jam skirtoje erdvėje. Nustačius reikšmę „%“, vaizdo dydis keičiasi kartu su pirminio elemento dydžiu. Tai sukuria jautrų vaizdo efektą.

3 veiksmas: „Flexbox“ išdėstymas

„Flexbox“ išdėstymas yra labai rekomenduojamas norint sukurti interaktyvų svetainės dizainą. Tai leidžia HTML elementus rodyti tam tikroje padėtyje ir pakeisti kiekvieno vaiko laisvos vietos dydį pagal pirminio div dydį. „Flexbox“ išdėstyme yra keletas savybių, kurios kūrėjui suteikia daug laisvės, pavyzdžiui, toliau pateiktame kode:

Aukščiau pateiktame kodo fragmente:

• Pirmiausia sukurkite pirminį div elementą, kurio ID yra ' tėvas “ viduje “ “ žymą.
• Tada sukurkite kelis antrinius div elementus ir priskirkite jiems klasę „ vaikas “.
• Tada pasirinkite „ tėvas “ klasę ir pateikite „“ vertę lankstus 'skirta CSS' ekranas ' nuosavybė.
• Po to pateikite vertę „ 1 “ į „ lankstus 'nuosavybė kiekvienam' vaikas “ klasė, kurioje antrinis elementas rodomas kaip lankstus.

Įvykdžius aukščiau pateiktą kodą, tinklalapis atrodo taip:

Aukščiau pateikta išvestis rodo, kad antrinis elementas tampa vienodo pločio, kai keičiamas naršyklės dydis.

4 veiksmas: tinklelio išdėstymas

Tinklelio išdėstymas sukuria tinklelį ir tinklelio dalyje priskiria HTML elementus. Tinklelio elementai keičiasi atsižvelgiant į tinklalapio ekrano dydį. Jis sukuria jautrų dizainą, nes HTML elemento dydis keičiasi atsižvelgiant į įrenginio ekraną:

Aukščiau pateiktame kode:

• Pirmiausia sukurkite pirminį div ir priskirkite jam klasę „ komponentas “ viduje “ “ žymą. Po to jame sukurkite tris antrinius div elementus.
• Tada CSS faile priskirkite „ tinklelis “ vertė į “ ekranas 'turtas' konteineris “ dal.
• Po to tinklalapyje sukurkite tris vienodo dydžio dalis naudodami „ tinklelis-šablonas-stulpelis “ savybę ir nustatykite ją lygią „ 1fr 1fr 1fr kur fr reiškia trupmena “.

Sukūrus aukščiau pateiktą kodą, išvestis atrodo taip:

Išvestis rodo, kad „div“ dydis keičiasi pagal ekrano dydį vienodomis proporcijomis.

5 veiksmas: medijos užklausos

Žiniasklaidos užklausų naudojimas kuriant interaktyvų dizainą yra savotiškas senosios mokyklos dalykas, tačiau vis tiek dauguma svetainių naudoja medijos užklausas. Medijos užklausas galima pridėti tiesiai į CSS failą, pridėjus numatytąjį pasirinkto HTML elemento stilių. Dėl medijos užklausos kodas šiek tiek ilgesnis ir nepatogus. Kadangi kūrėjas turi įterpti kodą kiekvienam ekrano dydžiui atskirai.

Pavyzdžiui, žr. toliau pateiktą kodo fragmentą:

Aukščiau pateiktame kodo fragmente:

• Pirmiausia nustatykite medijos užklausą, kuri taiko CSS ypatybes pasirinktai elementų klasei “ komponentas “ kai ekrano plotis tampa didesnis nei “ 640 pikselių “.
• Tada pasirinkite „komponentų klasę ir nustatykite reikšmę“ miško žaluma ' už ' fono spalva ' nuosavybė.

Tada aukščiau pateiktam kodo fragmentui:

• Nustatykite medijos užklausą, kad būtų taikomi stiliai, kai pločio dydis yra mažesnis nei ' 1000 piks “.
• Dabar pasirinkite „ komponentas “ klasę ir pateikite vertę „ gudrus mėlynas ' už ' fono spalva ' nuosavybė:

Įvykdžius aukščiau nurodytus kodo fragmentus, išvestis atrodo taip:

Išvestis rodo, kad medijos užklausa keičia foną pagal ekrano dydį. Šrifto dydis, plotis, aukštis ir kitos CSS savybės taip pat gali būti taikomos laikantis to paties modelio.

Galimi lūžio taškų ekrano dydžiai, į kuriuos reikia atsižvelgti naudojant medijos užklausas:

• Dėl ' mažas ' ekrano dydis, nustatykite plotį mažesnį nei ' 640 pikselių “.
• Dėl ' vidutinis ' peržiūros srities ekrano dydis, plotis svyruoja tarp ' 641 piks “ ir „ 1007 pikseliai “.
• Dėl ' didelis ' ekrano dydis, nustatykite plotį į ' 1008 pikseliai “ arba didesnis.

Išvada

Norėdami sukurti interaktyvų svetainės dizainą, kūrėjai turi pridėti „ peržiūros sritis “ žymą „ “ žymų skyrius. Tada naudokite „ Flexbox “ ir „ Tinklelis ” Išdėstymas. Šie išdėstymo moduliai padeda sukurti jautrų dizainą. Pabaigoje „ žiniasklaidos užklausos “ padėti kūrėjui sukurti skirtingų tos pačios svetainės versijų stilių skirtingiems ekrano dydžiams. Šiame straipsnyje parodyta, kaip galima sukurti interaktyvų svetainės dizainą.