Rreshtimi horizontal i tekstit, fotografive, blloqeve (div) në qendër. Përqendrimi i imazheve në një faqe

E cila lejon automatikisht me saktësi qind për qind rreshtoni çdo objekt/shtresë në qendër të imazhit ose në skajet e tij. Ju gjithashtu mund të rreshtoni në lidhje me një zonë të vetme në imazh. E gjithë kjo është shumë e thjeshtë dhe kjo do të diskutohet në këtë artikull.

Si rregull, fillestarët e bëjnë këtë operacion me sy, gjë që nuk është aspak e nevojshme. Zgjidhni një mjet duke lëvizur dhe kushtojini vëmendje. Ka një numër cilësimesh që janë përgjegjëse për këtë detyrë ( shikoni pamjen e ekranit):

Tre butonat e parë janë përgjegjës për shtrirjen vertikale (nga e majta në të djathtë): lart, qendër, poshtë.

Tre butonat e ardhshëm janë përgjegjës për shtrirjen horizontale (nga e majta në të djathtë): majtas, qendër, djathtas.

Kështu, për të vendosur objektin saktësisht në qendër, duhet të zgjidhni qendrimin vertikalisht dhe horizontalisht.

Rregulli më i rëndësishëm i shtrirjes: Para së gjithash, duhet t'i tregoni Photoshop zonës në lidhje me të cilën programi duhet të kërkojë skajet ose mesin. Derisa ta bëni këtë, butonat e shtrirjes do të jenë joaktive, që do të thotë se nuk mund të klikohen.

Ky është sekreti se si të krijoni një objekt në mes të të gjithë imazhit ose fragmentit të tij individual.

Pra, sekuenca e veprimeve është si më poshtë:

Le të themi se dëshironi ta vendosni këtë imazh në qendër:

opsioni 1- në lidhje me të gjithë kanavacën.

Hapi 1

Ne i tregojmë Photoshop-it zonën në lidhje me të cilën programi duhet të rreshtojë imazhin. Kjo bëhet duke krijuar.

Zgjidhni shtresën e sfondit në paletën e shtresave dhe shtypni Ctrl + A në tastierë ( Selektoj të gjitha). Si rezultat, duhet të shihni një kornizë përzgjedhjeje nga "milingonat marshuese" rreth shtresës së sfondit. (Si rregull, shtresa e sfondit është e njëjtë me madhësinë e kanavacës).

shënim

Mund të zgjidhni shtresën e sfondit në një mënyrë tjetër - mbani të shtypur tastin ctrl dhe klikoni majtas në shtresën e sfondit. Metoda funksionon kur kjo shtresë është e shkyçur (kjo tregohet nga ikona e drynit, ).

Hapi 2

Tani ju duhet të zgjidhni një mjet duke lëvizur. Kur kemi një kornizë përzgjedhjeje, butonat e shtrirjes do të bëhen aktive, që do të thotë se mund të përdoren.

Zgjidhni shtresën me foton që dëshironi të rreshtoni dhe tani klikoni në butonat sipas vendit ku dëshironi të vendosni këtë foto. Për shembull, le të vendosim saktësisht në qendër. Pastaj duhet të klikojmë këto butona:

Një shembull tjetër. Le të themi se dëshironi ta vendosni imazhin në qendër, por në anën e majtë. Pastaj zgjidhni butonat e mëposhtëm në shiritin e opsioneve:

Opsioni 2- në një fragment të vetëm të imazhit

Supozoni se ka një fragment në imazh, brenda të cilit ju duhet të vendosni një fotografi në mënyrë të përkryer në mënyrë të barabartë. Në shembullin tim, shtova një katror xhami. Le të jetë një foto tjetër brenda saj ( Nga rruga, ju mund të mësoni se si të bëni vetë një shesh xhami të tillë).

Hapi 1

Para së gjithash, për analogji me opsionin e parë, është e nevojshme të zgjidhni këtë fragment. Si ta bëni këtë?

- Nëse ky fragment është në një shtresë të veçantë (si katrori im, të cilin e futa veçmas), atëherë duhet të klikoni ctrl dhe klikoni në miniaturën e shtresës nëse nuk është e kyçur).

- Nëse ky fragment është në vetë imazhin, atëherë duhet të zgjidhni mjetet e përzgjedhjes Rajonet drejtkëndore dhe ovale dhe përdorni ato për të vizatuar një zonë të qetë të përzgjedhur rreth fragmentit. Si të përdorni këto mjete. duke lëvizurdhe duke mbajtur të shtypur çelësinZhvendosja, shtypni shigjetat e drejtimit në tastierën tuaj. Imazhi do të lëvizë me ngritje prej 10 pikselësh.

Nëse nuk e mbani të shtypur këtë tast, por thjesht përdorni shigjetat e tastierës, atëherë fotografia do të lëvizë me ngritje prej 1 piksel.

Vërehet një gabim në tekst - zgjidhni atë dhe shtypni Ctrl + Enter. Faleminderit!

Veçoritë: Përshtatje: Përdorimi: Pamjet e ekranit: Ku të shkarkoni ELlinks është një përpjekje për të krijuar një shfletues uebi modern të bazuar në tekst. Projekti filloi bazuar në kodin e shfletuesit Links. Qëllimi i tij në fillim ishte të provonte dhe të zbatonte disa veçori pak a shumë të munguara/të dobëta në Links. Nga vjen "E" në "ELinks" - "Eksperimentale" / "Eksperimentale". Pas suksesit të përpjekjeve të bëra, "E" filloi të kuptohej si "E zgjeruar" / "E zgjeruar" ose "E zgjeruar" / "Përmirësuar". Kur shfletuesi Links arriti një shkallë të caktuar pjekurie, duke tejkaluar në disa aspekte shfletuesin më të avancuar të internetit, Lynx, zhvillimi i tij i mëtejshëm ishte në një udhëkryq: të lëvizte drejt shfaqjes së grafikëve dhe përtej tekstit të pastër, ose të avanconte shfletuesin në ueb duke përdorur një ndërfaqe përdoruesi e bazuar në tekst përtej kufijve të arritur në fillim Lynx dhe më pas Lidhjet - por duke mbetur në modalitetin e tekstit. Drejtimi i parë u zbatua në versionin e Lidhjeve të aftë për të shfaqur përmbajtjen grafike të faqeve të internetit - Links2. E dyta është shfletuesi i internetit ELlinks. Lynx ishte dhe është ende një softuer shumë i sofistikuar i llojit të tij. Autorët e tij konceptuan dhe zbatuan një koncept shumë të menduar dhe solid të shfletimit të internetit në modalitetin e tekstit me abstraksione dhe konventa të veçanta që ndihmuan në kapërcimin e shumë kufizimeve dhe disavantazheve të shfletimit në ueb duke përdorur një ndërfaqe teksti dhe krijuan një botë kaq të ndryshme nga pjesa grafike që zgjerohej me shpejtësi. të internetit. Por HTML dhe kompjuterët u zhvilluan më tej, gjuhët e skriptimit filluan të përhapen, e gjithë bota e paraqitjes, gjetjes dhe konsumimit të informacionit shkoi përpara, ndryshoi. Janë shfaqur mundësi të reja. Shumë nga këto veçori u zbatuan në Links, por ndryshimet e mëposhtme në paraqitjen vizuale të informacionit në dokumentet e ueb-it - nga më shumë HTML në më shumë CSS - hapën rrugë të reja; edhe kur jeni në modalitetin e tekstit. Dhe kjo është ajo që ELinks po përpiqet të zbatojë: mbështetje për shfaqjen e ngjyrave në emulatorët e terminaleve që mbështesin këtë veçori, disa pozicionime me CSS dhe madje një lloj mbështetjeje JavaScript / ECMAScript. Ana teknike e teknologjive të rrjetit (si mbështetja SSL) dhe mbështetja për kodime të ndryshme të tekstit ishin tashmë mjaft solide në shfletuesin Links, por në ELinks disa veçori janë përmirësuar dhe të tjera më të zhvilluara. ELinks është një hap përpara në konceptin e shfletuesit të uebit të konsolës, duke e bërë ELinks shembullin më të avancuar të zbatimit të tij. Edhe pse Rrëqebulli ende e mban veten mjaft mirë. Koncepti i tij i shfletimit të uebit në modalitetin e tekstit, qoftë edhe si thjeshtim, një qasje e veçantë për paraqitjen dhe trajtimin e informacionit, dhe për të mos u përpjekur të ngjasojë me mjedisin e shfletuesve grafikë, funksionon mjaft mirë. Dokumentet në ueb po bëhen gjithnjë e më komplekse për t'u zbatuar dhe (me të gjitha kufizimet e pashmangshme të shfletimit të faqeve të internetit në modalitetin e tekstit) për të ndjekur një rrugë të veçantë në trajtimin e tyre, kjo është një mënyrë për të konkurruar me përpjekjen për të qenë si bazë, grafike e plotë. shfletues web të paraqitur për desktop. Kjo është analoge me dilemën e shfletuesve për pajisjet celulare me ekrane të vogla: përpiquni të imitoni kompjuterë me ekrane të mëdhenj, ose transformoni dokumentet e shfaqura në ueb për t'iu përshtatur karakteristikave të mjedisit. Shfletuesit e tekstit përdoren më së shumti në kompjuterë me ekran pak a shumë të madh, kështu që ka më pak kufizime për madhësinë dhe më shumë tundime: Lynx - qëndroni me zë të ulët, ELlinks - shkoni përtej. Karakteristikat e shfletuesit të internetit të bazuar në tekst. Versione për Linux, sisteme të tjera *nix, Windows, DOS, OS/2, BeOS dhe disa të tjera. HTML (duke përfshirë tabelat dhe kornizat). CSS dhe JavaScript shumë i kufizuar (Mëso më shumë). Mbështetje për një gamë ngjyrash prej 16, 88 ose 256 ngjyrash në emulatorët / konzolat e terminalit që mbështesin këtë veçori. Mbështetje për skedat, shkarkime në sfond me njoftimin e përfundimit të shkarkimit. Mbështetje për miun. Redaktimi i fushave të tekstit të formave të faqeve të internetit në një redaktues teksti të jashtëm. Hotkeys për URL. Mbështetje për skriptet në Perl, Lua, Guile, Ruby.

imapsync. Transferimi i postës

Transferimi i postës nga një server IMAP në tjetrin duke përdorur imapsync [ 1 ] / Linux, linja e komandës: imapsync --host1 imap.this.com --user1 [email i mbrojtur]--passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.another.com --user2 [email i mbrojtur]-passfile2 /home/user/imap/passwordfile2 -ssl2 -skipsize -allowsizemismatch - Ekziston një sajt shembull.com dhe një kuti postare [email i mbrojtur] në serverin e një kompanie pritëse. Serveri IMAP: imap.this.com. Serveri IMAP mbështet SSL. — Faqja shembull.com po transferohet te një host tjetër. Prandaj, kutia postare [email i mbrojtur] me gjithë përmbajtjen e tij dhe me ruajtjen e strukturës së folderit. Serveri IMAP i një ofruesi tjetër pritës: imap.another.com. Serveri IMAP mbështet SSL. 1. Krijoni një kuti postare [email i mbrojtur] dhe fjalëkalimin për të në serverin e kompanisë pritëse ku po bëhet transferimi. 2. Krijo dy skedarë teksti në dosjen /home/user/imap/: passwordfile1 me fjalëkalimin për kutinë postare në serverin e parë IMAP dhe passwordfile2 me fjalëkalimin për kutinë postare në serverin e dytë IMAP. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. Instalo imapsync 6. Ekzekuto imapsync me opsionet dhe të dhënat e duhura Imapsync migron postën me strukturën e dosjeve nga imapthi.com. .tjetër.com. SSL përdoret për të enkriptuar të dhënat në tranzit dhe fjalëkalimet ruhen në skedarë të mbrojtur duke vendosur lejet chmod 600. Transferimi i postës midis dy shërbimeve të postës elektronike mund të kërkojë përdorimin e opsioneve shtesë imapsync [2]. Për shembull, kur migroni përmbajtjen e një kutie postare Gmail.com në një tjetër, duhet të specifikoni "--port1" dhe "--port2": imapsync -host1 imap.gmail.com -port1 993 -user1 [email i mbrojtur]--passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.gmail.com --port2 993 --user2 [email i mbrojtur]--passfile2 /home/user/imap/passwordfile2 --ssl2 --skipsize --allowsizemismatch [ 1 ] Një rast i thjeshtë dhe i zakonshëm: përmbajtja e një kutie e-mail transferohet në një tjetër - bosh, e vendosur në një server tjetër. Por mund të ketë situata më komplekse: Migrimi i emailit nga Gmail në Google Apps dhe Kalimi në Google Apps me imapsync. [ 2 ] Opsione të tjera: Migroni postën nga një server në tjetrin me imapsync dhe imapsync(1) - faqja e njeriut Linux.

Imazhi HTML i sfondit

Mësimi 10

CSS. Përafrimi i imazhit në qendër

Imazhi HTML, duke futur një imazh në kodin e faqes

Etiketa HTML përgjegjëse për shfaqjen e imazhit

• Imazhi HTML mund të jetë çdo imazh në format PNG, JPEG dhe GIF.
• Kodi HTML i imazhit përcaktuar nga etiketa.
• Imazhi HTML mund të jetë sfondi i një faqe interneti.
• Imazhi HTML mund të përkufizohet si një hiperlidhje.

1. Futja e një imazhi në kodin HTML të një faqeje
2. Distanca midis imazhit dhe tekstit horizontalisht dhe vertikalisht
3. Përcaktimi i një imazhi të sfondit në HTML
4. Imazhi HTML - lidhja dhe kodi që e përcakton atë
5. Vendosni një imazh HTML në qendër të një faqeje ose blloku

Në dosje ose në ndonjë tjetër ku keni skedarin, vendosni imazhin me shtesën, thoni, emërtoni si të doni, për shembull, .

Futja e një imazhi në kodin HTML të një faqeje:

Etiketa është e paçiftuar. Kushtojini vëmendje mënyrës së mbylljes.

Atributet dhe vlerat

• - kërkohet, tregon burimin e imazhit.
• - përcakton një tekst alternativ, një koment që lexon një robot kërkues kur analizon përmbajtjen e një faqeje interneti. Ajo gjithashtu duhet të shënohet.
• - specifikon gjerësinë e imazhit në pixel.
• - përcakton lartësinë e imazhit në pixel.

Specifikoni dimensionet aktuale - në mënyrë që të ruani cilësinë origjinale të imazhit.

Tre formate imazhi janë të zbatueshme për zhvillimin e ueb-it: PNG (.png), JPEG (.jpg) dhe GIF (.gif). Adobe Photoshop është një mjet i specializuar për krijimin e grafikëve për faqet e internetit. Mund të përdoret për të kthyer një format imazhi në një tjetër.

Imazhi HTML | Ndarjet horizontalisht dhe vertikalisht

ose distancën horizontale dhe vertikale ndërmjetimazh dhe tekst

Shikoni rezultatin në një dritare të re: imazhi i sfondit HTML

Atributet mbulohen në tutorialet e CSS.

Futja e një imazhi dhe renditja e tij → → shih këtu.

Imazhi HTML - lidhje

Shembull i kodit:

Shikoni rezultatin në një dritare të re: imazhi HTML i përqendruar në faqe

Çfarë duhet kushtuar vëmendje këtu? → Së pari, fakti që tregohen dimensionet - kjo përshpejton ngarkimin e imazhit. Së dyti, atributet janë të shkruara, gjë që është gjithashtu shumë e dëshirueshme të bëhet, edhe nëse nuk ka tekst alternativ. Në rastin e parë, u përcaktua përqendrimi HTML parametri, dhe në të dytën - duke përdorur përfshirjen lineare të fletëve të stilit kaskadë.

Data e publikimit: Tetor 2009 | Përditësimi: Gusht 2014

Mësimi 9 Imazhi HTML Mësimi 11

Si të rreshtoni qendrën e një imazhi me qendrën e një div?

Për një kohë të gjatë, ka pasur metoda të ndryshme për përqendrimin e imazheve duke përdorur CSS. Zbatimi i këtyre metodave u ndikua fuqishëm nga Internet Explorer 5. Por sot, pak njerëz janë të interesuar për këtë version të shfletuesit, kështu që mund të shpëtoni nga kodi i panevojshëm.

Më parë, IE5 dhe IE5.5 diktuan rregullat e tyre - për të lidhur një element faqeje në qendër, duhet të përdorni një pronë CSS. Dhe për të përqendruar, për shembull, një foto, duhet ta vendosni brenda një blloku shtesë:

Për këtë bllok shtesë, është caktuar vetia përkatëse CSS:

E gjithë kjo ishte e nevojshme sepse Internet Explorer i versionit të pestë nuk mbështet veçoritë e indenteve të jashtme që ekzistonin tashmë dhe mbështeteshin nga shfletues të tjerë, të cilët automatikisht caktojnë të njëjtën distancë majtas dhe djathtas të elementit të rreshtuar në fluturim. Metoda e mësipërme është ende në përdorim.

Por IE5 dhe IE5.5 janë në të kaluarën, kështu që kodi HTML mund të bëhet më i thjeshtë dhe më elegant:

Mungesa e blloqeve shtesë të panevojshme arrihet falë CSS-së përkatëse:

Vetia cakton karakteristikën e një elementi blloku në imazh, gjë që eliminon nevojën për të përdorur ose rreth imazhit. Më pas, deklarata vendos mbushjet e sipërme dhe të poshtme në zero, dhe mbushjet majtas dhe djathtas në një vlerë ekuivalente automatike, e cila e rreshton imazhin në qendër.

Duhet të caktoni mbushje të ndryshme të sipërme dhe të poshtme? Nuk ka problem. Mos harroni për shkurtesat:

Fatkeqësisht, ndryshe nga rastet e rreshtimit të imazheve në skajet e majtë dhe të djathtë (dhe), nuk ka asnjë mënyrë për të mbështjellë tekstin rreth një imazhi të përqendruar duke përdorur metoda standarde. Sigurisht, nëse është shumë e rëndësishme, atëherë mund të bëhet.

Gjithashtu, nëse imazhi është gjithashtu një lidhje, atëherë zona e lidhjes shtrihet në të gjithë gjerësinë e bllokut, pavarësisht nga gjerësia e imazhit. Në disa raste, ky është një disavantazh.

Metoda e mësipërme e rreshtimit është më e përshtatshme për faqet që përdorin fotografi brenda tekstit (lajme, artikuj). Për galeritë e fotografive, sigurisht, ka mënyra më të sofistikuara për të rreshtuar fotografitë.

Një detyrë

Lidhni foton me titullin në horizontalen qendrore të faqes së internetit.

Zgjidhje

Ilustrimet e tekstit shpesh përqendrohen në faqen e internetit, me tekst para dhe pas imazhit. Një rregullim i tillë i elementeve ju lejon të ndani një tekst të madh në blloqe semantike dhe të tërhiqni vëmendjen te vizatimet.

Le të shohim fillimisht vendosjen në qendër të imazhit. Për ta bërë këtë, shtoni veçorinë e stilit të rreshtimit të tekstit në përzgjedhësin P me qendrën e vlerës. Në të njëjtën kohë, etiketa duhet të vendoset brenda një paragrafi (etiketa

). Për të parandaluar që të gjithë paragrafët në faqe të qëndrojnë në qendër, ne do të prezantojmë klasën tonë fig dhe do të kryejmë të gjitha veprimet me të. Shembulli 1 tregon se si ta bëni këtë.

Shembulli 1: Përdorimi i text-align

HTML5CSS 2.1IECrOpSaFx

Rezultati i këtij shembulli është paraqitur në Fig. një.

Oriz. 1. Imazhi i rreshtuar në qendër të faqes së internetit

Ju gjithashtu mund të shtoni një titull në foto. Teksti duhet të vendoset menjëherë pas imazhit dhe të përqendrohet në qendër. Gjithçka është e thjeshtë këtu, përsëri ne do të përdorim klasën tonë, por tashmë do ta aplikojmë në etiketë