În continuarea subiectului tabelelor din blog. O modalitate bună este să prescrieți stiluri externe CSS pentru aspect. Încărcarea site-ului este optimizată, stilurile sunt mai simple și mai rapide de editat.
Pentru cei care au devenit recent un blogger și nu înțeleg destul de ce HTML și CSS sunt, vă recomandăm să descărcați un curs gratuit HTML și un curs gratuit CSS.
Crearea unui aspect în Adobe Illustrator CS6
Crearea oricărui aspect începe cu definirea dimensiunilor geometrice. Am nevoie de întreaga masă pentru a se potrivi pe un ecran. Luând în considerare șablonul de înregistrare, lățimea sa dovedit a fi 500 și o înălțime de 300 de pixeli.
Imaginile sunt mai ușor de scris dacă au aceleași proporții. Așa că am pus toate fotografiile într-un dosar separat, le-am dat nume noi. În Photoshop, am adus toate imaginile la aceeași dimensiune și le-am optimizat pentru a le încărca pe server. Abia după aceea am pus-o într-un document în Adobe Illustrator și am pus-o într-un aspect.
Pentru a accelera procesul în Adobe Illustrator, pornesc grila și în programul de configurare va atribui linia de la fiecare 50 de pixeli, cu o divizie internă în 1. atribuiți parametrii care vor ajuta cel mai bine puzzle-ul ori, în funcție de dimensiunea și aspectul imaginilor.
Vreau doar să adaug că am petrecut aproximativ 8 ore pe întregul proces din ideea, selectarea de imagini în funcție de culoare, alocarea mărimii lor înainte de a le pune în plasă. Aspectul inițial a fost mai complex și a constat din 25 de elemente. Am refuzat, pentru că unele imagini s-au dovedit a fi prea mici.
Setarea setărilor pentru grilă Adobe Illustrator
Aranjarea tabelului cu imagini în celulele îmbinate
Crearea unui tabel în Adobe InDesign CS6
În Adobe InDesign CS6, am creat un nou document pentru Web cu dimensiuni de 500 x 300 pixeli și margini zero.
Crearea unui nou document în Adobe InDesign CS6
Apoi am creat un cadru de text. Am selectat instrumentul TEXT din bara de instrumente și le-am selectat întreaga arie a documentului pentru ele.
Crearea unui cadru text în Adobe InDesign CS6
A fost adăugat un tabel din meniul TABLE -> INSERT TABLE cu numărul de rânduri și coloane ca în aspect. Comanda este disponibilă când instrumentul TEXT este activ.
Crearea unui tabel în Adobe InDesign CS6
Spre deosebire de grilă din Illustrator, nu este necesar să se facă aceeași lățime și înălțime a tuturor celulelor, cele mai mici imagini din aspect pot fi încorporate într-o singură celulă. Pentru a împărți sau a îmbina celulele vecine urmează, dacă un număr de imagini de dimensiuni diferite ar trebui să fie localizate unul lângă celălalt. Am o astfel de rețea.
Mergeți celulele în tabelul Adobe InDesign CS6
Când am plasat imagini, am împărțit câteva celule orizontal și vertical. Ca rezultat, au fost obținute 14 coloane și 9 linii.
Dacă lăsați numele fișierului scris în chirilic, atunci în codul mesei veți primi următoarea intrare. Ta Da'am Partidul Muncitorilor!
Înțelegi, da? Un astfel de nume de fișier și alt atribut vor fi citite numai de server. În plus, acest nume este doar unul din cele optsprezece imagini.
Numele fișierului pe server
Prin comanda COMMIT din meniul FILE, am pus în document toate imaginile cu nume de pe server din folderul nou. Deoarece toate imaginile sursă au o dimensiune mai mare decât dimensiunea celulelor, ele trebuie reduse înainte de a fi inserate în celulă. Am schimbat dimensiunea imaginii plasate. În imaginea de mai jos, aceasta este zona marcată în partea stângă sus. Lanțul trebuie să fie închis pentru a menține proporțiile.
Dimensiunile uneia dintre laturile imaginii am atribuit multiplii de 50 de pixeli, ca în layout-ul original în Illustrator.
InDesign evaluează special cadrele grafice, deci trebuie să bifați caseta de selectare AUTO FUNCTION și să selectați CONTENT folosind FRAME SIZE. Câmpurile sunt marcate în imaginea din dreapta sus.
Încorporarea unei imagini într-un document Adobe InDesign CS6
Rezultatul este un tabel.
Un tabel complex cu celule și imagini îmbinate în InDesign CS6
Proiectul meu nu are nevoie de granițe și linii în celule, așa că am înlăturat marginea din jurul mesei, cursa celulelor și intervalele din tabel.
Ambele ferestre sunt apelate de comenzile corespunzătoare din meniul TABLE cu instrumentul TEXT activ.
În bara de opțiuni din partea de sus a ferestrei, am alocat alinierea elementelor în celulele de tabelă în funcție de înălțime și lățime.
Trebuie să selectați toate celulele pentru a aplica modificările și pentru a atribui proprietățile corespunzătoare.
Exportați în HTML cu stiluri CSS
Din meniul FILE -> EXPORT, am ales formatul de export HTML. Mai jos în imagini sunt parametrii pe care i-am atribuit.
Exportați în HTML de la InDesign. Parametrii de bază
Calea serverului
Exportați în HTML de la InDesign. Opțiuni imagine
Totul este clar aici, am nevoie de stiluri.
Exportați în HTML de la InDesign. Parametri suplimentari
Implementarea unui tabel într-o intrare de blog
Fișierul va fi deschis după salvare, dacă este bifată caseta de selectare "Afișare HTML după export" în fila cu setările principale.
Un fișier HTML în browser
Tabelul este introdus în înregistrare
Adăugarea de stiluri personalizate CSS
Împreună cu fișierul HTML, atunci când exportați cu stiluri, InDesign CS6 a creat folderul cu același nume ca și documentul, care conține fișierul de stil CSS. Are același nume și extensie. Css. Am deschis-o în browser. Așa arată.
CSS pentru tabel
Utilizarea combinației de taste
Copiat textul selectat în clipboard.
Am deschis schița în modul de setare vizuală. În setările de subiect găsiți fila ADDITIONAL STYLES. O puteți numi puțin diferit, dar esența rămâne.
Implementarea stilurilor personalizate în modul vizual
Platoul se ridică așa cum ar trebui. Este adevărat că unele imagini au inițial o dimensiune greșită. Sa dovedit că li sa atribuit o clasă greșită. Și bătrâna este proruha. Acest lucru este ușor de rezolvat.
CSS Image Class
Apoi, în stilurile încorporate, găsiți o clasă cu dimensiunile corespunzătoare. Toate clasele de imagini sunt în partea de jos a listei de stiluri.
CSS de imagini în tuner vizual
Codul HTML și stilurile CSS ale tabelului cu imagini pot fi copiate
Codul HTML al tabelului cu imagini
corp, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, cod,
umplutura: 0;
lățimea frontală: 0;
>
td, stil de frontieră: solid;
lățimea graniței: 0px;
>
marginea colapsului de tabel: colaps;
>
li display: bloc;
>
corp font-dimensiune: 12px;
-epub-cratime: auto;
>
table.x ------- culoare de frontieră: # 000000;
stilul frontal: solid;
lățimea graniței: 0px;
margin-bottom: 0px;
margin-top: 0px;
lățime: 450px;
>
p.x --- culoare: # 000000;
font-familie: »Minion Pro», serif;
font-size: 12px;
font-style: normal;
font-varianta: normal;
font-weight: normal;
linia-înălțime: 1,2;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
text-aliniere: stânga;
text-decoration: nici unul;
text-indent: 0px;
>
td.cell-style-override-1 padding-bottom: 0px;
padding-left: 0px;
umplutură-dreapta: 0px;
padding-top: 0px;
>
p.para-style-override-1 font-size: 4px;
text-align: centru;
>
p.para-style-override-2 font-size: 4px;
>
col.Rând-coloană-1 lățime: 18px;
>
col.Rând-coloană-2 lățime: 17px;
>
col.Rând-coloană-3 lățime: 56px;
>
col.Rând-coloană-4 lățime: 23px;
>
col.Rând-coloană-5 lățime: 51px;
>
col.Rând-coloană-6 lățime: 27px;
>
col.Rând-coloană-7 lățime: 46px;
>
col.Rând-coloană-8 lățime: 28px;
>
img.frame-9 înălțime: 53px;
lățime: 80px;
>
img.frame-10 înălțime: 52px;
lățime: 79px;
>
tr.Row-Column-11 înălțime: 28px;
>
img.frame-12 înălțime: 68px;
lățime: 46px;
>
img.frame-13 înălțime: 30px;
lățime: 45px;
>
img.frame-14 înălțime: 40px;
lățime: 60px;
>
tr.Roș-Coloana-15 înălțime: 44px;
>
img.frame-16 înălțime: 73px;
lățime: 110px;
>
img.frame-17 înălțime: 25px;
lățime: 37px;
>
img.frame-18 înălțime: 121px;
lățime: 81px;
>
img.frame-19 înălțime: 75px;
lățime: 112px;
>
tr.Roș-Coloană-20 înălțime: 25px;
>
img.frame-21 înălțime: 50px;
lățime: 74px;
>
tr.Rând-Coloană-22 înălțime: 50px;
>
img.frame-23 înălțime: 100px;
lățime: 66px;
>
tr.Roll-Coloana-24 înălțime: 26px;
>
img.frame-25 înălțime: 31px;
lățime: 46px;
>
tr.Roll-Coloana-26 înălțime: 35px;
>
tr.Row-Column-27 înălțime: 51px;
>
Trimiteți-le prietenilor: