HTML táblázat CSS stílusok Adobe InDesign blog Valéria Azarova
Folytatva a témát a táblázat bejegyzéseket. Jó gyakorlat előírását külső CSS stíluslap dekoráció. Loading oldalon van optimalizálva, szerkesztése stílusok könnyebb és gyorsabb.
Azok számára, akik a közelmúltban vált blogger, és nem teljesen érti, mi a HTML és CSS ajánlom letölteni az ingyenes HTML CSS tanfolyam és ingyenes tanfolyamot.
Létrehozása elrendezés Illustrator CS6 Adobe
Készítsen minden elrendezés kezdődik a geometriai méreteket. Azt kell, hogy az egész asztal elfér egy képernyőn. Mivel a szélessége a rögzítés minta fordult 500, magassága 300 képpont.
Könnyebb a jeleneteket, ha azok azonos arányban. Így tettem a képeket egy mappába, nekik új nevek. A Photoshop oda vezetett, hogy az azonos méretű, és az összes kép optimalizálva a szerverre való feltöltés. Csak ezután helyezzük a dokumentumot Adobe Illustrator, és helyezteté őt az elrendezést.
Ahhoz, hogy gyorsítsák fel a folyamatot az Adobe Illustrator, bekapcsolom a rács és a telepítőprogram rendelni a vonal minden 50 pixel, belső felosztás 1. rendelheti a paramétereket, amelyek a legjobban segíteni a puzzle-szeres, mérete alapján és a képek elrendezésének.
Csak azt akarom, hogy adjunk, hogy az egész folyamat az ötlettől, a kiválasztás képek színét, méretét, hogy a cél a tojásrakás a hálóba töltöttem körülbelül 8 óra. Az eredeti elrendezés összetett volt, és állt 25. Azt visszautasította, mivel néhány kép túl kicsi.
A paraméterek beállítása a rács Adobe Illustrator
Elrendezés táblázatot a képeket a kapcsolt cellából
Táblázatok létrehozása Adobe InDesign CS6
Az Adobe InDesign CS6, hoztam létre egy új dokumentumot a web a mérete 500 x 300 képpont és nulla területeken.
Hozzon létre egy új dokumentumot Adobe InDesign CS6
Ezután hozzon létre egy szöveges keretben. Jelölje ki a szöveget eszközt az eszköztáron, és biztosítja számukra az egész terület a dokumentumot.
Hozzon létre egy szöveges keret InDesign CS6 Adobe
Add táblázat a Táblázat menü -> be egy táblázatot a sorok és oszlopok az elrendezés. A parancs elérhető az aktív szöveg eszköz.
Táblázatok létrehozása Adobe InDesign CS6
Ezzel szemben a rács Illustrator ide, hogy ugyanaz a szélessége és magassága a sejtek nem feltétlenül a legkisebb képen az elrendezés elfér egyetlen cellában. Megosztása vagy egyesítése a szomszédos sejtek esetében, ha ott kell elhelyezni, képek, különböző méretekben. Én olyan rács.
Cellák egyesítése egy táblázatban InDesign CS6 Adobe
Amikor elhelyezzük a képet, egyes sejtek vannak osztva vízszintesen és függőlegesen. Az eredmény 14 oszlopok és 9 sor.
Ha elhagyja a fájl nevét írva cirill, a kód táblázat kapsz egy rekord formájában. Ta Da'am Munkáspárt!
Érted, ugye? Egy ilyen fájl nevét és alt attribútum csak olvasható szerver. Ezen túlmenően, a neve csak az egyik tizennyolc képeket.
fájl neve a kiszolgálón
Keresztül a csapat helyezte a Fájl menü tettem a képeket egy dokumentumot a neveket a szerver az új mappát. Mivel minden az eredeti képek nagyobbak, mint a méret a sejtek, mielőtt behelyezzük a sejt azokat csökkenteni kell. Helyeztem kép átméretezés. Az alábbi képen egy jelentős terület a bal felső sarokban. A lánc kell zárni, hogy fenntartsák a képarány.
A méretek az egyik oldalon a kép, én kinevezett 50 többszöröse pixelek az eredeti elrendezést az Illustrator.
InDesign kifejezetten mérlegek grafikus keretek, így meg kell, hogy jelölje meg az automatikus beállítás, és válassza ki a tartalmat a keret méretét. Azokat a mezőket, a képen a jobb felső sarokban.
A bevezetés a képeket a dokumentum InDesign CS6 Adobe
Az eredmény az volt, mint egy asztal.
Kifinomult táblázat kapcsolt cellából és képek az InDesign CS6
Az én projektben nem kell keret és kitöltés a sejtekben, így eltávolítottam a keretet az asztal körül, a stroke-sejtek és a tartományok az asztalra.
Mindkét ablakok okozzák a megfelelő parancsot a Táblázat menüben az aktív szöveg eszköz.
A lehetőségek sáv tetején az ablak, azt nevezi a nyomvonal elemek a sejtekben az asztal magassága és szélessége.
Ki kell választania a sejteket, hogy alkalmazza a változtatásokat, és regisztrálni tulajdonjogot.
Export HTML CSS stílusok
Fájl menü -> Export én választottam HTML export formátumban. A következő paramétereket a képeket, amelyet kijelöltem.
Exportálás HTML InDesign. A fő paraméterek
Az út a kiszolgálón
Exportálás HTML InDesign. A kép beállításai
Itt minden világos, azt szeretné, hogy ugyanaz stílusokat.
Exportálás HTML InDesign. További keresési opciók
A bevezetés táblázat egy blogbejegyzésben
A fájl megnyílik a mentés után, ha jelölte SHOW HTML kivitel után fület az alapbeállításokat.
Nyissa meg a fájlt a böngésző HTML táblázat
Táblázat helyezünk a belépési
Egyéni CSS stílusokat
Együtt a HTML fájlt, amikor exportálni InDesign CS6 stílusok létre az azonos nevű dokumentum mappa, amely tartalmazza a CSS stílusokat fájl. Ez ugyanaz a neve és a kiterjesztése .css. Kinyitottam a böngészőben. Így néz ki.
CSS stíluslap fájlt az asztalra
gyorsbillentyűkkel
Azt a kijelölt szöveg másolásához a vágólapra.
Kinyitottam a tervezet bejegyzéseket vizuális konfigurációs módot. A téma a beállítások fülre talált néhány extra stílusban. Akkor lehet hivatkozni rá egy kicsit más, de a lényeg marad.
A saját fejlesztésű vizuális stílus Visual konfigurációs üzemmódban
A tabletta igaza van. Azonban néhány képnek rossz méretet először. Kiderült, hogy nem rendelt osztály. És az öregasszony proruha. Ez könnyű helyrehozni.
CSS osztály kép
Ezután a beágyazott stílusok találni egy osztály a megfelelő méreteket. Az összes kép alján a lista az osztályok a stílusok.
CSS osztály kép vizuális testreszabási
HTML és CSS stílusok asztal képek másolhatók
HTML kód egy táblázatot képekkel
test, div, dl, dt, dd, ul, ol, li, H1, H2, H3, H4, H5, H6, p, előre, kódot, blockquote árrés: 0;
padding: 0;
határ-szélesség: 0;
>
td, th border-style: szilárd;
határ-szélesség: 0px;
>
táblázat határ-összeomlás: összeomlás;
>
li display: block;
>
test font-size: 12px;
-epub-kötőjelet: auto;
>
table.x ------- border-color: # 000000;
border-style: szilárd;
határ-szélesség: 0px;
margin-bottom: 0px;
margin-top: 0px;
szélesség: 450 képpontos;
>
p.x --- color: # 000000;
font-family: »Minion Pro», serif;
font-size: 12px;
font-style: normal;
font-variáns: normál;
font-weight: normal;
line-height: 1.2;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
text-align: left;
text-decoration: none;
text-indent: 0px;
>
td.cell-style-override-1 padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
>
p.para-style-override-1 font-size: 4px;
text-align: center;
>
p.para-style-override-2 font-size: 4px;
>
col.Row-oszlop-1 szélesség: 18px;
>
col.Row-oszlop-2 szélesség: 17px;
>
col.Row-oszlop-3 szélesség: 56px;
>
col.Row-oszlop-4 szélesség: 23px;
>
col.Row-oszlop-5 szélesség: 51px;
>
col.Row-oszlop-6 szélesség: 27px;
>
col.Row-oszlop-7 szélesség: 46px;
>
col.Row-oszlop-8 width: 28px;
>
img.frame-9 magassága: 53px;
szélesség: 80px;
>
img.frame-10 magasság: 52px;
szélesség: 79px;
>
tr.Row-oszlop-11 magasság: 28px;
>
12 img.frame-magasság: 68px;
szélesség: 46px;
>
13 img.frame-magasság: 30px;
szélesség: x 45 képpont;
>
14 img.frame-magasság: 40px;
szélesség: 60 képpont;
>
tr.Row-oszlop-15 magasság: 44px;
>
img.frame-16 magasság: 73px;
szélesség: 110px;
>
img.frame-17 magassága: 25 képpont;
szélesség: 37px;
>
img.frame-18 magassága: 121px;
szélesség: 81px;
>
img.frame-19 magasság: 75px;
szélesség: 112px;
>
tr.Row-oszlop-20 magassága: 25 képpont;
>
img.frame-21 magassága: 50 képpont;
szélesség: 74px;
>
tr.Row-oszlop-22 magasság: 50px;
>
img.frame-23 magassága: 100px;
szélesség: 66px;
>
tr.Row-oszlop-24 magasság: 26px;
>
25 img.frame-magasság: 31px;
szélesség: 46px;
>
tr.Row-oszlop-26 magasság: 35px;
>
tr.Row-oszlop-27 magasság: 51px;
>