# 1 A doboz modell

Megértés honlap szerkezete

Mindazokat az elemeket, ezen az oldalon minden blokk belsejében más blokkok (más néven "Box modell"). Ha húzás webes elemek, akkor húzza őket egy blokk, és vidd őket a másik. Így HTML működik!

szuper TERV

$ 75 / mon

Tökéletes bármilyen üzleti 20 vagy több alkalmazottat.

500GB Storage
1 millió Oldalmegtekintés
20 együttműködők
50 Szociális hálózatok
Prémium Támogatás

Amit látsz

Megjegyzés: Meg fogod érteni, hogyan tervezzen valami ilyesmi a fogalmakat az alábbiakban.

Milyen Blocks Ez történt a

Div blokkolása

H2 címsor szuper TERV

Szöveg blokk $ 75 / mon

Bekezdés Tökéletes bármilyen üzleti 20 vagy több alkalmazottat.

Lista

Lista Elem
500GB Storage
Lista Elem
1 millió Oldalmegtekintés
Lista Elem
20 együttműködők
Lista Elem
50 Szociális hálózatok
Lista Elem
Prémium Támogatás

próbáld ki magad

Húzza e bekezdés ...

Minden a funkciók korlátai nélkül. Minden, amit megeszel. (Ez egy bekezdés elem)

TIPP: Kattintson és húzza a bekezdés elem fölött, és dobja el az ár a jobb oldalon. Ön is használja gyorsbillentyűk, mint a másolás és beillesztés (ctrl + c, ctrl + v), másolja húzás közben (holding alt), és törölje (törlés gomb).

A lila blokk ...

Super TERV

$ 75 / mon

INFO: Így HTML és webes struktúra működik - elemek egymásra, egymás alatt, vagy annak belsejébe egymást. Ez a legjobb módja annak, hogy építsenek egy folyadék és érzékeny honlapján.

# 2 KÜLALAKJA elemek

Alapvető elrendezés elemek

Add elemeket a honlapon kattintson a [+] ikonra a bal felső sarokban. Az alábbiakban néhány, a legalapvetőbb szerkezeti elemek, a web design - szakaszok, konténerek és oszlopok.

A szakasz veszi fel 100% -át a szélessége a böngészőablakban, ha hozzá van adva a Body (a vászon egy honlap).
Nagyon jó az a nagy vízszintes szakasz a honlapon.

§ Element

A konténer egy 960px blokk középre a közepén a böngésző. Általában a legtöbb weboldal tartalmát hozzáadjuk a tárolón belül úgy, hogy középre. Konténereket általában hozzá a testület vagy egy szakasz elem.

Tároló elem

Hozzátéve oszlopok a leggyorsabb módja annak, hogy építsenek egy egyedi weboldal elrendezését. Szerkeszteni hány oszlop szeretne különböző eszközök, csak kattints a fogaskerék ikonra a jobb felső sarokban eléréséhez elem beállításait.

Érzékeny oszlopok

# 3 tervezése és CSS

Formázáshoz elemek

Válasszon ki egy elemet, és adjunk hozzá egy osztályt a megfelelő stílust panel (ecset ikonra). Ebben a panel felveheti szöveges és grafikus stílusok, mint a betűk színét, magassága, színátmenetek, határok, árnyékok, és így tovább. Visual Web design módon szórakoztatóbb, mint kódolási ugye?

gomb kialakítása például

A kosárban ➜

Stílus magad

Gomb szöveg ➜

TIPP: Ez a gomb már van egy osztály "gomb" néhány alapvető stílusokat. Válassza ki a gombot, és próbálja felvenni a gradiens, határ, lekerekített sarkok, belső / külső árnyékok, hover állapothoz stílusok, és az átmenet a hover stílusok - mindegyik a stílus panel.

Mit létre

Gomb szöveg ➜

alkalmazzák a "gomb" osztály

Gomb szöveg

TIPP: A web design akkor lehet alkalmazni, egy osztályt, hogy sok olyan elemet, hogy azok ugyanúgy néz ki. Alkalmazza a "Button" class hogy szemrevaló a fenti linkre kattintva a [+] a tetején a Stílus panel és a gépelés "gomb", hogy megtalálják az osztályban.

Forma Tervezési példa

Kösz!

Az Ön szikla én zoknit!

Hoppá! Valami nem sikerült nyomtatvány benyújtásával :(

Stílus magad

Köszönöm! A beküldött érkezett!

Hoppá! Valami nem sikerült nyomtatvány benyújtásával :(

TIPP: Először hozzon létre osztályokat a mezőket és a gombot (ugyanazokat osztály mindkét területen). Akkor változik határon stílusok, a háttér színe, és adjunk hozzá stílusok a hover és préselt államok. Ne felejtsd el, hogy a stílus a "siker" állam az űrlap elem, megtalálható a beállítások panel (fogaskerék ikonra a jobb felső sarokban).

Tipográfia például

Lakewood Stout

A barna sör Lakewood, Colorado

A legendás vaskos született meg a gyönyörű házasság egy hegyi ember és az ő legkedveltebb dolog, a város Lakewood Coloradóban. A hegyi ember is szerette a fejszéjét, és ő egylövetű Remington puskát, de nem annyira, mint szerette a várost. Ő álmodott flowy folyók és fenséges hegyek. Így nevezte a legnagyobb kövér lány után. Így a dicsőséges kövér volt megszülte ki egy hegyi ember szíve.

"Én erre a célra készített e dicső sört kifejezni halhatatlan szerelem az én gyönyörű város."

- Mountain Man

Stílus magad

Lakewood Stout

A barna sör Lakewood, Colorado

"Én erre a célra készített e dicső sört kifejezni halhatatlan szerelem az én gyönyörű város."

- Mountain Man

TIPP: Menj, és hozzá egyéni tipográfia és stílusok a háttérben. Hidegvég: Ha hozzá tipográfia stílusok a szülő blokk, az összes gyermek szöveges elemek örökli azokat szöveg stílusokat. A CSS-ben ez a viselkedés az úgynevezett "lépcsőzetes".

# 4 elrendezés CSS

Építési web beosztású CSS

Hasonló hozzá stílust egy elem, hogy változtassa meg a helyzetét egy elem először hozzá egy osztályt, majd szerkeszteni a pozíció tulajdonságok. Majd megtudjuk, Margó, párnázottak, kijelző, Float, túlcsordulás, és álláspontja.

Margó és kitöltés például

Friss hírek

Szövetségi ügynökök Raid Gunshop, Find Fegyverek

Bolt tulajdonosa Steve Witmere korábban letartóztatták BlackMarket páncélököl kereskedés. Bevallja, hogy részvétele az orosz maffia.

A számos bazookas található a gunshop voltak több tízezer illegálisan szerzett festmények értéke legalább $ 10,000. Amit egy súlyos árat kell fizetni ezeket a hülye festmények.

Leírás: Margó és kitöltés megtalálható a pozíció paletta a Stílus panelen. Hozzátéve Margin növeli kívüli tér egy blokk, és hozzá kitöltés növeli tér belsejében egy blokk.

Add távolság Yourself

Friss hírek

Szövetségi ügynökök Raid Gunshop, Find Fegyverek

Bolt tulajdonosa Steve Witmere korábban letartóztatták BlackMarket páncélököl kereskedés. Bevallja, hogy részvétele az orosz maffia.

A számos bazookas található a gunshop voltak több tízezer illegálisan szerzett festmények értéke legalább $ 10,000. Amit egy súlyos árat kell fizetni ezeket a hülye festmények.

TIPP: Kezdje hozzáadásával padding minden oldalon a fő szürke blokk (szülő elem). Ezután add alsó margót hozzá közötti távolság az egyes szövegrészeket (gyermekek elemek). Tipp: Hold SHIFT miközben a margin / padding-szabályozás alkalmazandó minden oldalról, és az ALT is alkalmazni kell az ellenkező oldalon.

"Display: block" példái

Ez a rovat beállítása display: block

Ez a bekezdés beállítása display: block. Tehát ez kitölti a szélessége a szülő ablak és halom tetején többi blokk.

Button a display: block gomb display: block Ez a link van állítva display: block Ez a link van állítva display: block

Leírás: Beállítás elemek "Kijelző beállítás a blokk teszi őket verem tetején egymást, és töltse 100% szélessége a szülő blokk. A legtöbb elem valójában ez a beállítás alapértelmezés szerint.

Hogy azok "display: block" magát

Ez egy gomb Ez egy gomb Linkek display: inline alapértelmezésben linkek megjelenítése: Soros alapértelmezésben

TIPP: Válassza ki ezeket az elemeket (némelyik Inline Block és néhány Soros), és azokat display: block úgy, hogy verem tetején minden más.

"Display: inline-block" például

Töltse Szerkesztés Törlés

Leírás: Beállítás elemek "kijelző beállítása, hogy inline-block teszi a szélessége a blokk felel meg a szélessége a tartalom benne. Ez azt jelenti, ha azok tartalma elég kicsi ahhoz, ők is verem egymás mellett. Akkor másolja illessze be a gombok felett, és módosítsa a szöveg belső látni, hogyan működik.

hogy azok inline-block magát

Töltse szerkesztése

TIPP: Válassza ki a fenti elemeket, és azokat display: inline-block így verem egymás mellett. Látni fogod, hogy a képek verem mellett a gombokat. Tipp: leejtése a gombok és képek külön Div blokkok teszi őket verem tetején minden más (mert Div blokkok display: block alapértelmezés).

Float például

Köszönöm! A beküldött érkezett!

Hoppá! Valami nem sikerült nyomtatvány benyújtásával :(

Leírás: Beállítás Kijelző: inline-block vagy úszó (ebben a példában) a leggyakoribb módja, hogy verem elemek egymás mellé. Ebben a példában megmutatom, hogyan kell lebegni valamit.

Float magad

Köszönöm! A beküldött érkezett!

Hoppá! Valami nem sikerült nyomtatvány benyújtásával :(

TIPP: Először válassza ki a szövegmezőt, hogy float: left, és adja meg a százalékos szélessége (ex: 60%). Aztán meg a gombot, hogy float: left is, és állítsa be egy másik százalékos szélessége (ex: 40%), így mindketten összege 100%. Ez egy manuális módon kényszeríteni bármely elemét, hogy verem egymás mellett.

Abszolút pozíció példa

Saját Cup Joe

Ez egy fényképet felirat szövegét.

Kiemelt

Leírás: Ha a pozíció az Absolute egy elemre, akkor képes lesz arra, hogy helyezzük el bárhova a szülő blokk. Hogy melyik szülő hol helyezkedik el a, meg a szülő elem pozíció relatív. Megjegyzés: Amikor az elemek abszolút elhelyezett lebegnek a fenti más elemeket.

Stílus It Yourself

Saját Cup Joe

Ez egy képfelírást a kedvenc csésze Joe.

Kiemelt

TIPP: Először válassza ki a parancsot wrapper elemet, és állítsa álláspontját Relatív. Ezután válassza a felirat, húzza át a képet beállítani álláspontját Abszolút és válassza ki a 7. szinthez. Helyezze a Kiemelt jelvényt a megfelelő helyen válassza ki a 2. előre beállított és kézi helyezzük el.

# 5 Stílus Cascading

Kihasználva Cascading stílusok

Könnyedén létrehozhat variációk egy elem hozzáadásával további osztályok tetején egymást, és úgy, hogy különböző stílusok ezeket az osztályokat. Nézze meg az alábbi példát, ahol különböző variációk egy gombot.

Megosztott gombstílusok például

Tervezze meg a gombok magát

Green Button

Piros gomb

TIPP: Válassza ki a második gombot, és kattintson a [+] mellett az osztály, hogy egy újabb osztályt. Akkor hívják "Zöld". Akkor add a különböző stílusokat. Ezek a stílusok felülírják az alap stílusok az első osztályban. Majd hozzon létre a piros gombot.

# 6 média lekérdezések

Tervezés különböző eszközök

Ebben WebFlow először a website design az asztali eszközök, majd változtatni a mobil eszközök (elérheti a Készülékikonok a felső sáv). Hozzátéve stílusok egy mobil eszköz felülírja az asztali stílusok.

Érzékeny Rovat például

Ez valami fejlécszöveget, hogy egyre kisebb lesz a mobil eszközök.

Leírás: Ez a rész nagyon nagy az asztalon, de azt szeretnénk, hogy legyen kisebb a mobileszközökön. Kattintson az eszközöket a felső sáv látható, hogy a szöveg mérete és magassága csökkent.

Fix It Yourself

Legyen ez a nagy fejlécszöveget egyre kisebbek a mobil eszközök.

TIPP: Válassza ezt a címsor a Tablet készüléket, és a betűméret és a sormagasság kisebb. Tegye ugyanezt Telefon Tájkép és Portré Phone készülékek. Láthatjuk, hogy a

Érzékeny gomb például

Gomb szöveg

Leírás: Ez a gomb azt jelentette, hogy kicsi Asztali paraván, mert ez könnyen kattintson az egérmutatót. Megcsináltuk nagyobb a mobil eszközök, így könnyebb megnyomni az ujj

Gomb szöveg

Fix It Yourself

TIPP: Menj a Tablet készüléket és növeli a padding a gombot. Ha ezt teszed, hogy felülírja az előző beállított stílus a Desktop és kaszkád le az összes az alábbi eszközök Tablet.

Érzékeny oszlopok például