Kā centrēt lapas izkārtojumu ar CSS piemalēm programmā Dreamweaver

Dreamweaver ļauj centrēt izkārtojumu, izmantojot CSS piemales. Daudzi tīmekļa lapu dizaini ir centrēti uz lapu, tāpēc šķiet, ka tie peld starp pārlūkprogrammas loga malām neatkarīgi no tā, cik plats vai šaurs logs kļūst. Tas palīdz radīt ilūziju, ka dizains aizpilda lapu, pat ja pārlūkprogrammas logs ir daudz plašāks nekā lapas dizains.

Lielākā daļa tīmekļa lapu dizainu, kas izveidoti ar CSS, panāk šo efektu, izveidojot vienu

tagu, kas ieskauj visu lapas saturu, un pēc tam piemērojot tam stilu

tagu, kas ietver stila kārtulu, kas to centrē

tagu. Kā jūs atklājat turpmākajos soli pa solim sniegtajos norādījumos, izveidojiet stilu, lai centrētu a

tags nav tik acīmredzams, kā jūs varētu iedomāties, taču to ir viegli ieviest.

Izplatīta prakse ir izmantot ID stilu

tagu, kas centrē jūsu dizainu, un nosauciet to #wrapper vai #container.

Ja jūsu lapa vēl nav iestatīta ar a

atzīmējiet visu saturu, šeit ir padoms, kā to pievienot. Vispirms noklikšķiniet un velciet, lai atlasītu visu tekstu, attēlus un citu lapas saturu. Pēc tam izvēlieties Ievietot→Izkārtojuma objekti→Div Tag. Dialoglodziņā Insert Div Tag pārliecinieties, vai nolaižamajā sarakstā Ievietot ir atlasīta opcija Aplauzt atlasi.

Pārējos laukus atstājiet tukšus un noklikšķiniet uz Labi, lai pievienotu a

atzīmējiet visu savas lapas saturu, un esat gatavs turpmākajām darbībām.

Lai centrētu visu lapas dizainu, pārliecinieties, vai a

tags ieskauj visu lapas saturu, un veiciet šīs darbības:

Noklikšķiniet uz pluszīmes panelī CSS Designer Selectors.

Atkarībā no tā, kas atrodas lapā, atlasītāju panelim tiek pievienots jauns stila nosaukums vai tukšs lauks, kurā varat ievadīt stila nosaukumu.

Veiciet dubultklikšķi, lai atlasītu nosaukumu, ko Dreamweaver pievienoja panelim, un mainiet to uz nosaukumu, kuru vēlaties jaunajam stilam, vai noklikšķiniet, lai atlasītu tukšo lauku un ievadītu nosaukumu.

Ja vārds nav pievienots, ievadiet vajadzīgo vārdu tukšajā laukā. Varat nosaukt stilu jebko, kas jums patīk, taču noteikti ievadiet punktu pirms nosaukuma, ja veidojat klases stilu, vai # zīmi ID stilam.

Rekvizītu panelī norādiet platumu, piemales un citus formatējuma iestatījumus, ko vēlaties definēt.

Konteinera platums

tags ir iestatīts uz 980 pikseļiem. Lūk, kā centrēt a

tags, piemēram, šāds: iestatiet kreiso un labo malu uz Auto. Tādā veidā pārlūkprogramma katrā pusē automātiski pievieno vienādu piemales vietu

tagu, efektīvi centrējot to lapā.

Kā centrēt lapas izkārtojumu ar CSS piemalēm programmā Dreamweaver

Atlasiet ID, kas aptver visu lapas saturu.

Lai pārliecinātos, ka esat izvēlējies pareizo

tagu, noklikšķiniet, lai novietotu kursoru jebkurā vietā lapas galvenajā daļā, un pēc tam noklikšķiniet uz

tagu, kas norādīts darbvietas apakšdaļā esošajā ātrās atzīmes atlasītājā vistālāk pa kreisi.

Ar

atlasīto tagu, Īpašuma inspektora ID nolaižamajā sarakstā atlasiet izveidotā stila nosaukumu.

Stila kārtulas, ko definējāt, veidojot stilu, tiek automātiski lietotas

tagu. Šajā piemērā rezultāts ir tāds, ka izmērs

tags tiek mainīts uz 980 pikseļu platumu un

tags un viss tā saturs ir lapas centrā.

Ne visas funkcijas darbojas, ja Dreamweaver ir iestatīts tiešais skats. Lai gan tiešraides skats ir lielisks veids, kā priekšskatīt, kā jūsu lapas dizains izskatīsies lielākajā daļā mūsdienu tīmekļa pārlūkprogrammu, tiešā skata funkcijas izmantošana padara daudzus Dreamweaver rediģēšanas rīkus nelietojamus. Ja, piemēram, īpašuma inspektors ir blāvs, kad vēlaties to izmantot, pārliecinieties, vai pogai Tiešraide ir noņemta atlase.

Leave a Comment

Photoshop CS6 viss vienā, lai LuckyTemplates apkrāptu lapa

Photoshop CS6 viss vienā, lai LuckyTemplates apkrāptu lapa

Photoshop CS6 saglabā visas iepriekšējo versiju funkcijas un pievieno jaunas, nodrošinot labāku lietotāja pieredzi, radošumu un produktivitāti. Iepazīstiet jaunas rīku iespējas un komandas.

Kā sapludināt slāņus programmā Photoshop CS6

Kā sapludināt slāņus programmā Photoshop CS6

Uzziniet, kā efektīvi sapludināt slāņus programmā Photoshop CS6, lai samazinātu faila izmēru un uzlabotu veiktspēju, izmantojot slāņu sapludināšanu un attēla saplacināšanu.

Kā SVG failiem piemērot caurspīdīgumu

Kā SVG failiem piemērot caurspīdīgumu

Uzziniet, kā lietot caurspīdīgumu SVG grafikai programmā Illustrator. Izpētiet, kā izvadīt SVG ar caurspīdīgu fonu un lietot caurspīdīguma efektus.

Darbs ar attēliem programmā Adobe XD

Darbs ar attēliem programmā Adobe XD

Kad esat importējis savus attēlus programmā Adobe XD, jums nav lielas rediģēšanas vadības iespējas, taču varat mainīt attēlu izmērus un pagriezt tos tāpat kā jebkuru citu formu. Varat arī viegli noapaļot importēta attēla stūrus, izmantojot stūra logrīkus. Attēlu maskēšana Nosakot slēgtu formu […]

Kā pielāgot teksta rekvizītus programmā Adobe XD

Kā pielāgot teksta rekvizītus programmā Adobe XD

Kad jūsu Adobe XD projektā ir teksts, varat sākt mainīt teksta rekvizītus. Šie rekvizīti ietver fontu saimi, fonta lielumu, fonta svaru, līdzinājumu, rakstzīmju atstarpes (rindstarpas un izsekošanu), rindstarpu (vadošais), aizpildījumu, apmali (pārvilkšanu), ēnu (krītošā ēna) un fona aizmiglojumu. Tātad, apskatīsim, kā šie rekvizīti tiek piemēroti. Par lasāmību un fontu […]

Darbs ar planšetdatoriem programmā Photoshop CC

Darbs ar planšetdatoriem programmā Photoshop CC

Tāpat kā programmā Adobe Illustrator, Photoshop zīmējumu dēļi nodrošina iespēju vienā dokumentā izveidot atsevišķas lapas vai ekrānus. Tas var būt īpaši noderīgi, ja veidojat ekrānus mobilajai lietojumprogrammai vai nelielai brošūrai. Jūs varat domāt par zīmējumu dēli kā īpašu slāņu grupas veidu, kas izveidots, izmantojot paneli Slāņi. Tā […]

Formas un daudzstūri programmā InDesign

Formas un daudzstūri programmā InDesign

Daudzi rīki, kas atrodami panelī InDesign Tools, tiek izmantoti līniju un formu zīmēšanai lapā, tāpēc jums ir vairāki veidi, kā izveidot interesantus zīmējumus savām publikācijām. Programmā InDesign varat izveidot jebko, sākot no pamata formām līdz sarežģītiem zīmējumiem, tā vietā, lai izmantotu zīmēšanas programmu, piemēram, […]

Aplauzt tekstu programmā Adobe Illustrator CC

Aplauzt tekstu programmā Adobe Illustrator CC

Teksta iesaiņošana programmā Adobe Illustrator CC nav gluži tas pats, kas dāvanas iesaiņošana — tas ir vienkāršāk! Teksta aplaušana liek tekstam aptīt grafiku, kā parādīts šajā attēlā. Šī funkcija var pievienot mazliet radošuma jebkuram gabalam. Grafika liek tekstam aptīt to. Vispirms izveidojiet […]

Kā mainīt formu izmēru programmā Illustrator

Kā mainīt formu izmēru programmā Illustrator

Veidojot dizainu programmā Adobe Illustrator CC, bieži vien ir nepieciešams precīzs izmērs (piemēram, 2 x 3 collas). Pēc formas izveides vislabākais veids, kā mainīt tās izmērus precīziem izmēriem, ir izmantot pārveidošanas paneli, kas parādīts šajā attēlā. Atlasiet objektu un pēc tam izvēlieties Logs → Transform to […]

Kā izveidot QR kodus programmā InDesign CC

Kā izveidot QR kodus programmā InDesign CC

Varat izmantot programmu InDesign, lai izveidotu un modificētu QR koda grafiku. QR kodi ir svītrkoda veids, kurā var saglabāt informāciju, piemēram, vārdus, ciparus, URL vai cita veida datus. Lietotājs skenē QR kodu, izmantojot savu kameru un programmatūru ierīcē, piemēram, viedtālrunī, un programmatūra izmanto […]