Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Savjet
  • Fiksna veličina Word ćelija. Fiksni dizajn

Fiksna veličina Word ćelija. Fiksni dizajn

Vlad Merzhevich

Za označavanje se koristi izraz "fiksni dizajn". izgled stranice, koji je kreiran od slojeva zadata širina. Izbor širine zavisi od orijentacije na određena rezolucija korisnički monitor. Dakle, za rezoluciju od 1024x768 piksela, veličinu tabele treba uzeti ne veću od 1000 piksela. Ova širina se dobija oduzimanjem od vrednosti 1024 širine vertikalne trake za pomeranje i ivica prozora pretraživača. Za sve korisnike, stranica izgrađena na ovom izgledu će biti prikazana ispravno, ali sa visoke rezolucije ispostavilo se da je previše prazan prostor. Budući da je najpopularnija rezolucija među korisnicima interneta 1024x768, programeri web stranica se fokusiraju na nju i koriste ukupnu širinu sloja od 900-1000 piksela.

Kod fiksnog dizajna, blok sa materijalom se obično postavlja na lijevu ivicu ili u sredinu ekrana. Poslednja opcija po mogućnosti, tada široke margine okolo nisu toliko uočljive pri visokim rezolucijama monitora (slika 1).

Rice. 1. Tipično modularna mreža sa fiksnim dizajnom

Brojčane oznake korištene na ovoj slici: 1 - naziv stranice; 2 - lijevi sloj, obično sadrži elemente za navigaciju; 3 - desni sloj, sadrži sadržaj stranice; 4 - "footer", sam dno web stranice, obično se postavlja u njega kontakt informacije i razna dugmad.

Za kreiranje rasporeda prikazanog na sl. 1, treba uzeti u obzir neke preliminarne tačke - kolika će biti ukupna širina svih elemenata; gdje će biti postavljen izgled - u sredini stranice ili na lijevoj ivici; koje će se boje i fontovi koristiti itd. Koraci koje treba poduzeti prije pisanja koda opisani su u nastavku.

Layer Width

Prvo morate odrediti ukupnu širinu vizualnih elemenata web stranice. Kao što je već spomenuto, ovu vrijednost određuje sam dizajner na osnovu preliminarne zbirke podataka o budućim korisnicima stranice. Iako većina dizajnera postavlja širinu, koja se naziva "od fenjera", na temelju vlastite pogodnosti. Ovdje u primjeru 1, koristeći isti princip, širina svih slojeva je 750 piksela.

Dakle, cijela širina je poznata, sada je treba podijeliti na dva dijela. Sloj označen brojem 2 (slika 1) je dodijeljen ispod menija, njegova širina bi trebala biti minimalna, ali dovoljna za udobno čitanje tekst. Neka bude okrugli broj, kao 200 piksela. Sve ostalo će biti zadovoljno.

Visina sloja

Visina sloja se dinamički mijenja ovisno o njegovom sadržaju. Ako želite sami postaviti visinu sloja, možete koristiti svojstvo visine i postaviti visinu u pikselima, procentima ili drugom css jedinice. Imajte na umu da se ovim pristupom poravnavanje sadržaja sloja uvijek odvija duž njegove gornje ivice, tako da ne biste trebali postavljati previsoku visinu (primjer 1).

Primjer 1 - Postavljanje visine sloja

Slično tome, visina sloja se također može promijeniti dodavanjem promjenom vrijednosti padding-top i padding-bottom (primjer 2). Ali ova metoda je manje univerzalna.

Primjer 2: Podešavanje visine sloja korištenjem paddinga

U ovom slučaju, visina sloja je zbir gornjeg i donjeg dodatka i visine sadržaja koji će biti centriran okomito.

Ako je visina sadržaja sloja veća od njegove visine, postavljene pomoću svojstva visine, tada pretraživač ostavlja dimenzije sloja nepromijenjene i prekriva sadržaj na njega.

Centralno poravnanje

Ako postoji potreba da se raspored ostavi poravnat sa lijevom ivicom prozora, ništa ne treba učiniti, ovaj efekat će se dogoditi sam od sebe. Ali da bi raspored bio u sredini prozora pretraživača, pomoći će još jedan dodatni sloj, koji će služiti kao okvir i uključivati ​​sve ostale slojeve. Nazovimo ga kontejner i za njega napišemo sljedeći stil (primjer 3).

Primjer 3: Centralno poravnanje

Svojstva margin-right i margin-left su auto value postavite poravnanje sloja na centar web stranice. U istom selektoru određujemo ukupnu širinu svih slojeva.

Desno poravnanje izgleda web stranice se obično nikada ne radi - koristi se centralno ili lijevo poravnanje.

Uvlačenje na web stranici

Horizontalno i vertikalni padding od ruba pretraživača do sadržaja web stranice ugrađeni su u zadani pretraživač. Međutim, možete promijeniti vrijednost ovih svojstava uvlačenjem manje ili više kako želite. Na primjer, možete postaviti uvlačenje od gornje ivice prozora do naslova stranice ili ga potpuno ukloniti.

Uvlake se postavljaju svojstvima CSS margina i padding za BODY selektor. Prisustvo dva svojstva umjesto jedne, opet zahtijeva interese različitih pretraživača, margina - Internet Explorer, i padding - Opera i Firefox. Kombinovanjem različitih svojstava osigurava se da se web stranica prikazuje različitim pretraživačimaće biti isti.

Možete kontrolisati pojedinačne margine sa različitih ivica ekrana koristeći svojstva margin-top , margin-bottom , margin-right i margin-left, koji respektivno mijenjaju udaljenost od gornje, donje, desne i lijeve ivice prozora pretraživača. Prije nego ih koristite, morate postaviti vrijednost svojstva margine na nulu (primjer 4).

Primjer 4: Promjena gornjeg dopuna sa ivice pretraživača

Boje

CSS ima nekoliko opcija za definisanje boje teksta i pozadine sloja. Svojstvo boje specificira boju teksta u sloju, a svojstvo pozadine specificira boju pozadine (primjer 5).

Primjer 5: Promjena boje

Boja pozadine za sloj menija u primjeru je tamnozelena, a tekst bijeli.

Prilikom postavljanja sljedećeg projekta (ili čak samo dizajniranja mreže izgleda), mnogi su se suočili s dilemom - koristiti fiksnu širinu izgleda ili "gumenu" mrežu koja se prilagođava veličini prozora pretraživača.

Svaka od ovih odluka ima svoje prednosti i nedostatke, želim da se fokusiram na nedostatke, jer se obično između dva zla treba birati između minusa ovih odluka.

Mreža rasporeda fiksne širine
Raspored je zaveden u horizontalnu dimenziju od 960-980 piksela (tako da je sve uključeno na većini uređaja u većini rezolucija), što, uz velike horizontalne veličine prozora, izgleda nekako hladno - tanko vertikalna pruga koristan sadržaj stranice i ogromne beskorisne margine izgubljenog prostora sa strane.
"Gumena" mreža za raspored po širini prozora
Opet, s velikim horizontalnim veličinama prozora, postoji još jedan problem: redovi teksta postaju jako dugi, a njihovo čitanje uopće nije tako udobno kako bismo željeli.
Još jedan uobičajeni problem s ovim rješenjem je da bočne margine na velikim horizontalnim veličinama prozora više nisu vizualno u skladu s horizontalnim veličinama elemenata, što također ne daje udobnost pri gledanju na izgled.

Želim ponuditi jednostavno rješenje - ograničiti minimalnu horizontalnu veličinu na fiksnu vrijednost u pikselima, a maksimalnu relativnu kao postotak širine prozora. Ovo je veoma banalno jednostavna sredstva Još 2 verzije CSS specifikacije.

ažuriranje:Želim da rezervišem da ne govorimo o klasičnom efektu gume i o prilagođavanju apsolutno svim rezolucijama, već samo o određenom razumnom rasponu rezolucija za koji je raspored dizajniran. U primjerima ispod, ovo je klasičan raspon rezolucije radne površine s horizontalnom marginom rezolucije od 1024 piksela ili više.

Još jednom da naglasim: post ne govori o rješenju za sve vrste uređaja i sve raspone rezolucija. U okviru jednog rasporeda ovaj zadatak se u principu ne može riješiti., da biste to riješili na ovaj ili onaj način, bit će potrebno nekoliko rasporeda. Muhe odvojeno, kotleti posebno.


Kreirajte kontejner izgleda:
...
...

Ukrašavamo ga jednostavnim stilskim kodom:
div.page-container (minimalna širina: 960px; maksimalna širina: 75%; margina: 0 auto; padding: 0; )
Međutim, nekome se ovo rješenje može učiniti nedovoljno zbog činjenice da se kod vrlo velikih horizontalnih veličina prozora opet pojavljuju problemi s dužinom linija. Ovo se rješava jednako jednostavnim dodatnim trikom: stvaranjem dodatnog vanjskog spremnika unutar već opisanog i ograničavanjem istog maksimalna širina fiksna vrijednost (subjektivno mi se čini da su vrijednosti u rasponu od 1400-1600 piksela najprikladnije). Opet, samo koristimo CSS alati 2.0. Ovo rješenje umjesto onog predloženog u prvom komentaru jednostavno dodavanje procenat širine za izvorni kontejner će takođe raditi u IE, koji, do verzije 9, ne razume istovremenu specifikaciju vrednosti.

Dodavanje HTML-a:
...

...

I promijenite malo CSS:
div.page-container (max-width: 75%; min-width: 960px; margin: 0 auto; padding: 0; ) div.page-container-inner (min-width: 960px; max-width: 1600px; margin : 0 auto; padding: 0; )
Kao što vidite, rješenje je izuzetno jednostavno i prilično univerzalno, može se primijeniti na sve elemente bloka.

Kada kreiramo formu, tabela reči, potrebno nam je da se prilikom popunjavanja ćelija njihova veličina ne mijenja tako da se tablica ne pomiče. Da biste to učinili, morate instalirati fiksna veličina ćelije u tabeliRiječ . Kako napraviti knjižicu u Wordu u članku"Kreiranje knjižice u Wordu".
Kako promijeniti visinu reda u tabeliriječ.
Da biste promijenili širinu redova, kolona, ​​prvo ih morate odabrati.
Prva opcija.
Savjetuje se da odete na karticu “Izgled stranice” u “Podešavanje stranice” i na karticu “String” stavite prave veličine linije. Na kartici Kolona postavite veličinu svake kolone. Kako zakačiti storiječ.
Da se sto ne pomera Word list, na kartici "Tabela" kliknite na dugme "oko". Kliknite na dugme "Postavljanje" - postavite parametre za postavljanje tabele.
Druga opcija.
Kliknite na tabelu i na kartici "Izgled" podesite veličine redova i kolona. U odjeljku "Veličina ćelije" kliknite na dugme "Automatsko prilagođavanje". Ako pritisnemo " fiksna širina stupac", tada se širina stupca neće promijeniti kada se ćelija popuni. Ali smiješno je to u nekima verzije Worda, potpuno drugačiji prozor za podešavanje stranice. Ne postoje kartice "Red" i "Kolona".
Kako popraviti visinu i širinu reda kolona riječi , u ovom slučaju. Prvo panel brz pristup postavite funkcijsko dugme "Svojstva tabele". Kliknite Dugme "Prilagodi traku s alatima za brzi pristup".(dugme "trougao sa crticom"). Odaberite funkciju "Ostale komande".

U dijaloškom okviru koji se pojavi kliknite na funkciju “Postavke”. U odeljku "Odaberi komande iz:" prozora postavite - "Sve komande". Na listi kliknite na naredbu "Visina i širina ćelije".


Kliknite na dugme "Dodaj>>". Sve. Ovo dugme se pojavilo na desnoj strani dijaloškog okvira. Kliknite na "OK". Pročitajte o panelu za brzi pristup u članku "Otvori Microsoft program riječ“.
Ovo dugme se pojavilo na traci sa alatkama za brzi pristup i zove se "Svojstva tabele". Postaje aktivan kada kliknemo na tabelu.

Odaberite tabelu, kliknite na dugme "Svojstva tabele" na kartici "Red". Sada je visina linije postavljena na "Auto". To znači da će se visina ćelije promijeniti kada se unese veliki tekst.
Trebamo popravi visinu reda u tabeliRiječ.
U odeljku Visina reda dijaloškog okvira, postavite ga na Tačno. I u red "Vrijednost" stavljamo broj visine linije. Ali vrijednost nije postavljena u mm. ili pogledajte, au pet. PT je poenta.
1 pt = 0,35 mm. Lakše - standardna visina linije u tabeli je 12pt. Visina lista A4 portretna orijentacija- 878 pt (29 cm bez ivica).
Stavimo "48 pt". Poništite izbor u polju za potvrdu pored "Dozvoli prelamanje linija sljedeća stranica».
Kliknite na "OK". Ispalo je ovako.


Hajde da popunimo ćeliju.

Ovdje možete vidjeti da posljednji red u ćeliji nije uključen. Ali širina ćelije se nije promijenila. Možemo ručno podesiti širinu reda tabele pomeranjem granice reda. Na primjer, da.

U Wordu možete postaviti format fonta, teksta, lista, slike, datoteke, ekstenzije datoteke (docx, pdf) itd. Koji su formati u Wordu, kako ih prilagoditi, pročitajte članak " Word format ".

Top Related Articles