„Dreamweaver“ leidžia centruoti išdėstymą naudojant CSS paraštes. Daugelis tinklalapių dizaino yra sutelkti į puslapį, todėl atrodo, kad jie plūduriuoja tarp naršyklės lango kraštų, nesvarbu, koks platus ar siauras langas tampa. Tai padeda sukurti iliuziją, kad dizainas užpildo puslapį, net jei naršyklės langas yra daug platesnis nei puslapio dizainas.
Dauguma tinklalapių dizaino, sukurtų naudojant CSS, pasiekia šį efektą sukuriant vieną
žymą, kuri supa visą puslapio turinį, o tada pritaikykite tam stilių
žyma, kurioje yra stiliaus taisyklė, kuri ją sutelkia
žyma. Kaip matote toliau pateiktose nuosekliose instrukcijose, sukurkite stilių, skirtą centre a
žyma nėra tokia akivaizdi, kaip galėtumėte įsivaizduoti, bet ją lengva įdiegti.
Įprasta praktika yra naudoti ID stilių
žymą, kuri centre jūsų dizainą, ir pavadinti #wrapper arba #container.
Jei jūsų puslapis dar nėra nustatytas naudojant a
pažymėkite visą turinį, čia yra patarimas, kaip jį pridėti. Pirmiausia spustelėkite ir vilkite, kad pasirinktumėte visą tekstą, vaizdus ir kitą puslapio turinį. Tada pasirinkite Insert → Layout Objects → Div Tag. Dialogo lange Insert Div Tag įsitikinkite, kad išskleidžiamajame sąraše Įterpti pasirinkta parinktis Wrap around Selection.
Palikite likusius laukus tuščius ir spustelėkite Gerai, kad pridėtumėte a
pažymėkite visą savo puslapio turinį ir būsite pasiruošę tolesniems veiksmams.
Norėdami centruoti visą puslapio dizainą, įsitikinkite, kad a
žyma supa visą puslapio turinį ir atlikite šiuos veiksmus:
Spustelėkite pliuso ženklą skydelyje CSS Designer Selectors.
Priklausomai nuo to, kas yra puslapyje, skydelyje Selectors pridedamas naujas stiliaus pavadinimas arba tuščias laukas, kuriame galite įvesti stiliaus pavadinimą.
Dukart spustelėkite, kad pasirinktumėte pavadinimą, kurį Dreamweaver įtraukė į skydelį, ir pakeiskite jį į norimą naujo stiliaus pavadinimą arba spustelėkite, kad pasirinktumėte tuščią lauką ir įveskite pavadinimą.
Jei vardas nepridėtas, tuščiame laukelyje įveskite norimą vardą. Galite pavadinti stilių kaip tik norite, bet prieš pavadinimą būtinai įveskite tašką, jei kuriate klasės stilių, arba # ženklą ID stiliui.
Skydelyje Ypatybės nurodykite plotį, paraštes ir visus kitus norimus apibrėžti formatavimo parametrus.
Talpyklos plotis
žyma nustatyta į 980 pikselių. Štai kaip centruoti a
žyma taip: nustatykite kairę ir dešinę paraštes į Auto. Tokiu būdu naršyklė automatiškai prideda vienodą paraštės vietos kiekvienoje pusėje
žymą, efektyviai centruojant ją puslapyje.
Pasirinkite ID, kuris supa visą puslapio turinį.
Kad įsitikintumėte, jog pasirinkote teisingai
žymą, spustelėkite, kad nukreiptumėte žymeklį bet kurioje pagrindinėje puslapio dalyje, tada spustelėkite
Darbo srities apačioje esančiame sparčiosios žymos parinkiklyje esančią toliausiai kairėje esančią žymą.
Su
pažymėtą žymą, nuosavybės inspektoriaus ID išskleidžiamajame sąraše pasirinkite sukurto stiliaus pavadinimą.
Stiliaus taisyklės, kurias nustatėte kurdami stilių, automatiškai taikomos
žyma. Šiame pavyzdyje rezultatas yra toks, kad dydis
žyma pakeičiama į 980 pikselių pločio ir
žyma ir visas jos turinys yra puslapio centre.
Ne visos funkcijos veikia, kai Dreamweaver nustatytas tiesioginis vaizdas. Nors tiesioginis vaizdas yra puikus būdas peržiūrėti, kaip jūsų puslapio dizainas atrodys daugelyje šiuolaikinių žiniatinklio naršyklių, naudojant tiesioginio vaizdo funkciją daugelis „Dreamweaver“ redagavimo įrankių tampa nenaudojami. Jei, pavyzdžiui, nuosavybės inspektorius rodomas pritemdytas, kai norite jį naudoti, įsitikinkite, kad mygtukas Tiesioginis yra panaikintas.
Pagrindinės formos, tokios kaip kvadratai ir apskritimai, yra būtinos Adobe Illustrator. Sužinokite, kaip jas kurti efektyviau ir optimizuokite savo dizaino įgūdžius!
Sužinokite, kaip efektyviai sujungti sluoksnius „Photoshop CS6“, kad optimizuotumėte failo dydį ir pagerintumėte darbo efektyvumą.
Sužinokite apie pagrindinius „Illustrator CC“ formos įrankius, tokius kaip stačiakampiai, elipsės, daugiakampiai ir žvaigždės, ir kaip juos efektyviai naudoti.
Sužinokite, kaip „Illustrator“ pritaikyti skaidrumą SVG grafikai. Sužinokite, kaip išvesti SVG su skaidriu fonu ir pritaikyti skaidrumo efektus.
Importavę vaizdus į „Adobe XD“, neturėsite daug redagavimo valdymo galimybių, tačiau galite keisti vaizdų dydį ir pasukti juos taip, kaip darytumėte bet kurią kitą formą. Taip pat galite lengvai apvalinti importuoto vaizdo kampus naudodami kampinius valdiklius. Vaizdų užmaskavimas Nustatydami uždarą formą […]
Kai turite tekstą Adobe XD projekte, galite pradėti keisti teksto ypatybes. Šios ypatybės apima šriftų šeimą, šrifto dydį, šrifto svorį, lygiavimą, tarpą tarp simbolių (įbrėžimas ir sekimas), eilučių tarpus (pirmaujantis), užpildymą, kraštinę (brūkšnį), šešėlį (metamas šešėlis) ir fono suliejimą. Taigi pažiūrėkime, kaip šios savybės taikomos. Apie skaitomumą ir šriftą […]
Kaip ir „Adobe Illustrator“, „Photoshop“ piešinių lentos suteikia galimybę viename dokumente sukurti atskirus puslapius arba ekranus. Tai gali būti ypač naudinga, jei kuriate ekranus mobiliajai programai ar nedidelei brošiūrai. Galite galvoti apie piešinių lentą kaip apie specialų sluoksnių grupės tipą, sukurtą naudojant skydelį Sluoksniai. Jos […]
Daugelis įrankių, kuriuos rasite skydelyje „InDesign Tools“, naudojami linijoms ir formoms piešti puslapyje, todėl galite įvairiais būdais kurti įdomius savo leidinių brėžinius. „InDesign“ viduje galite kurti bet ką – nuo pagrindinių formų iki sudėtingų brėžinių, o ne naudoti piešimo programą, pvz., […]
Teksto įvyniojimas naudojant Adobe Illustrator CC nėra tas pats, kas įvynioti dovaną – tai lengviau! Teksto apvyniojimas verčia tekstą apvynioti aplink grafiką, kaip parodyta šiame paveikslėlyje. Ši funkcija bet kuriam kūriniui gali suteikti šiek tiek kūrybiškumo. Grafika verčia tekstą apvynioti aplink jį. Pirmiausia sukurkite […]
Kuriant „Adobe Illustrator CC“ dažnai reikia tikslaus dydžio (pavyzdžiui, 2 x 3 colių) formos. Sukūrus formą, geriausias būdas pakeisti jos dydį iki tikslių išmatavimų yra naudoti transformavimo skydelį, parodytą šiame paveikslėlyje. Pasirinkite objektą ir pasirinkite Langas → Transformuoti į […]
