Kako postaviti pametne telefone i računala. 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 stranica, koji se stvara od slojeva zadane širine. Izbor širine ovisi o orijentaciji na određeno rješenje korisnički monitor. Dakle, za razlučivost od 1024x768 piksela, veličina tablice ne smije biti veća od 1000 piksela. Ova širina se dobiva oduzimanjem od vrijednosti 1024 širine okomite trake za pomicanje i granica prozora preglednika. Za sve korisnike, stranica izgrađena na ovom izgledu bit će prikazana ispravno, ali s visoke rezolucije ispada 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 s materijalom obično se postavlja na lijevi rub ili u središte zaslona. Zadnja opcija po mogućnosti, tada široke margine okolo nisu toliko uočljive pri visokim razlučivostima monitora (slika 1).

Riža. 1. Tipično modularna mreža s fiksnim dizajnom

Brojčane oznake korištene na ovoj slici: 1 - naslov stranice; 2 - lijevi sloj, obično sadrži navigacijske elemente; 3 - desni sloj, sadrži sadržaj stranice; 4 - "footer", samo dno web stranice, obično se nalazi u njemu kontakt informacije i razne tipke.

Za izradu rasporeda prikazanog na sl. 1, treba razmotriti neke preliminarne točke - kolika će biti ukupna širina svih elemenata; gdje će se raspored postaviti - u sredini stranice ili na lijevom rubu; koje će se boje i fontovi koristiti itd. Koraci koje treba poduzeti prije pisanja koda opisani su u nastavku.

Širina sloja

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

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

Visina sloja

Visina sloja se dinamički mijenja ovisno o njegovom sadržaju. Ako sami želite postaviti visinu sloja, možete upotrijebiti svojstvo visine i postaviti visinu u pikselima, postocima ili drugim css jedinice. Imajte na umu da se s ovim pristupom poravnavanje sadržaja sloja uvijek događa uz njegov gornji rub, tako da ne biste trebali postavljati previsoku visinu (primjer 1).

Primjer 1 - Postavljanje visine sloja

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

Primjer 2: Postavljanje visine sloja korištenjem paddinga

U ovom slučaju, visina sloja je zbroj 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 svojstvom visine, tada preglednik ostavlja dimenzije sloja nepromijenjene i prekriva sadržaj na njega.

Poravnanje po sredini

Ako postoji potreba da se raspored ostavi poravnat s lijevim rubom prozora, ništa ne treba učiniti, ovaj efekt će se dogoditi sam. Ali kako bi izgled bio u središtu prozora preglednika, pomoći će vam još jedan dodatni sloj, koji će služiti kao okvir i uključivati ​​sve ostale slojeve. Nazovimo ga kontejner i za njega napišimo sljedeći stil (primjer 3).

Primjer 3: Poravnanje po sredini

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

Desno poravnavanje izgleda web stranice obično se nikada ne radi - koristi se središnje ili lijevo poravnanje.

Uvlačenje na web stranici

Horizontalno i vertikalni padding od ruba preglednika do sadržaja web stranice ugrađeni su u zadani preglednik. Međutim, možete promijeniti vrijednost ovih svojstava uvlačenjem manje ili više po želji. Na primjer, možete postaviti uvlačenje od gornjeg ruba prozora na naslov stranice ili ga potpuno ukloniti.

Uvlake se postavljaju svojstvima CSS margina i padding za birač BODY. Prisutnost dva svojstva umjesto jednog, opet zahtijeva interese različitih preglednika, margina - Internet Explorer, i padding - Opera i Firefox. Kombiniranjem različitih svojstava osigurava se da se web stranica prikazuje različitim preglednicima bit će isti.

Možete kontrolirati pojedinačne margine s različitih rubova zaslona pomoću svojstava margin-top , margin-bottom , margin-right i margin-left, koja mijenjaju udaljenost od gornjeg, donjeg, desnog i lijevog ruba prozora preglednika. Prije nego ih koristite, morate postaviti vrijednost svojstva margine na nulu (primjer 4).

Primjer 4: Promjena gornjeg odsječka s ruba preglednika

Boje

CSS ima nekoliko opcija za definiranje 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 izbornika u primjeru je tamnozelena, a tekst je bijel.

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 preglednika.

Svaka od ovih odluka ima svoje prednosti i nedostatke, želim se usredotočiti na nedostatke, budući da se obično između dva zla treba birati između minusa tih 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 okomita pruga koristan sadržaj stranice i ogromne beskorisne margine izgubljenog prostora sa strane.
Mreža rasporeda "gumena" 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 ugodno kao što 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 vrlo banalno jednostavna sredstva Još 2 verzije CSS specifikacije.

Ažuriraj:Želim rezervirati 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 izgled dizajniran. U primjerima u nastavku, ovo je klasični raspon razlučivosti 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 razlučivosti. U okviru jednog rasporeda ovaj se zadatak u načelu ne može riješiti., da biste to riješili na ovaj ili onaj način, bit će potrebno nekoliko izgleda. Muhe posebno, kotleti posebno.


Izradite spremnik izgleda:
...
...

Ukrašavamo ga jednostavnim stilskim kodom:
div.page-container (min-width: 960px; max-width: 75%; margina: 0 auto; padding: 0; )
Međutim, nekome se ovo rješenje može učiniti nedostatnim zbog činjenice da se s vrlo velikim horizontalnim veličinama prozora ponovno pojavljuju problemi s duljinom linija. To 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 postotak širine za izvorni spremnik također će raditi u IE-u, koji do verzije 9 ne razumije istovremenu specifikaciju vrijednosti.

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 automatski; dopuna: 0; )
Kao što vidite, rješenje je iznimno jednostavno i prilično univerzalno, može se primijeniti na sve elemente bloka.

Kada kreiramo obrazac, tablica riječi, trebamo 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 tabliciRiječ . Kako napraviti knjižicu u Wordu u članku"Izrada knjižice u Wordu".
Kako promijeniti visinu reda u tabliciriječ.
Da biste promijenili širinu redaka, stupaca, prvo ih morate odabrati.
Prva opcija.
Preporučljivo je otići na karticu “Izgled stranice” u “Postavljanje stranice” i na karticu “String” staviti odgovarajuća veličina linije. Na kartici Stupac postavite veličinu svakog stupca. Kako prikvačiti tablicuriječ.
Da se stol ne pomakne List riječi, na kartici "Tablica" kliknite gumb "oko". Kliknite na gumb "Postavljanje" - postavite parametre za postavljanje tablice.
Druga opcija.
Kliknite na tablicu i na kartici "Izgled", prilagodite veličine redaka i stupaca. U odjeljku "Veličina ćelije" kliknite gumb "Automatsko prilagođavanje". Ako pritisnemo " fiksna širina stupac", tada se širina stupca neće promijeniti kada se ćelija popuni. Ali smiješno je da u nekima verzije Worda, potpuno drugačiji prozor za postavljanje stranice. Nema kartica "Red" i "Stupac".
Kako popraviti visinu i širinu reda stupac riječi , u ovom slučaju. Prvo ploča brzi pristup postavite funkcijski gumb "Svojstva tablice". Klik Gumb "Prilagodi alatnu traku za brzi pristup".(gumb "trokut s crticom"). Odaberite funkciju "Ostale naredbe".

U dijaloškom okviru koji se pojavi kliknite na funkciju "Postavke". U odjeljku prozora "Odaberi naredbe iz:" postavite - "Sve naredbe". Na popisu kliknite na naredbu "Visina i širina ćelije".


Kliknite gumb "Dodaj>>". Sve. Ovaj se gumb pojavio na desnoj strani dijaloškog okvira. Kliknite "OK". O ploči za brzi pristup pročitajte u članku "Otvori Microsoftov program riječ".
Ovaj se gumb pojavio na alatnoj traci za brzi pristup i zove se "Svojstva tablice". Postaje aktivan kada kliknemo na tablicu.

Odaberite tablicu, kliknite na gumb "Svojstva tablice" 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 tabliciRiječ.
U odjeljku Visina retka dijaloškog okvira postavite ga na Točno. I u redak "Vrijednost" stavljamo broj visine retka. Ali vrijednost nije postavljena u mm. ili vidjeti, a u pet. PT je točka.
1 pt = 0,35 mm. Lakše - standardna visina reda u tablici je 12pt. Visina lista A4 portretna orijentacija- 878 pt (29 cm bez obruba).
Stavimo "48 pt". Poništite okvir pored "Dopusti prelamanje redaka sljedeća stranica».
Kliknite "OK". Ispalo je ovako.


Popunimo ćeliju.

Ovdje možete vidjeti da zadnji redak u ćeliji nije uključen. Ali širina ćelije se nije promijenila. Možemo ručno podesiti širinu reda tablice pomicanjem granice retka. 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 ".

Vrhunski povezani članci