Úvod do HTML a CSS pre dizajnérov

Úvod do HTML a CSS pre dizajnérov.

Ako grafický dizajnér si pravdepodobne uvedomujete neustále sa vyvíjajúci vzťah medzi dizajnom a technológiou. To platí najmä pre tých, ktorí sa zaoberajú webovým dizajnom. V tomto odvetví musíme mať základné znalosti o tom, ako sa z našich starostlivo vytvorených rozložení stávajú živé webové stránky. Keď pochopíme základy tohto procesu (a jeho obmedzenia), dokážeme presne komunikovať s vývojármi a vytvárať webové stránky s dokonalými pixel.

To neznamená, že musíte vedieť kódovať webovú stránku zhora nadol (hoci by to bolo skvelé!), znamená to len, že musíte pochopiť základy. V tomto príspevku začneme veľmi základným úvodom do HTML. Naučíte sa, ako rozrezať webové návrhy vo Photoshope a formátovať HTML pomocou CSS. Úvod do HTML a CSS pre dizajnérov

Čo je HTML?

Takmer všetko, čo vidíte pri prehliadaní webu, je dokument HTML (hypertext markup language). Hypertext je text, ktorý odkazuje a odkazuje na iný text na vašej obrazovke, čo vám umožňuje prístup k obsahu jednoduchým kliknutím. Značkovací jazyk je množina značiek uzavretých v hranatých zátvorkách <>. Tieto značky HTML sa zvyčajne dodávajú v pároch:

<štartovacia značka> : Tiež známy ako otváracia značka.
: nazýva sa aj záverečná značka a obsahuje lomku /

Keď medzi tieto dve značky uzatvoríte obsah, zavolá sa celá vec element :

Toto je odsek

Keď sa tento jazyk preloží na internet, diváci neuvidia značky – uvidia iba obsah medzi nimi.

HTML 5, aktuálna verzia HTML, obsahuje asi 100 značiek s atribútmi, ktoré menia ich funkciu alebo vzhľad. Potrebujete poznať iba 30-40 z týchto značiek, aby ste mohli začať chápať a vytvárať HTML. Pozrite si ich a všimnite si, ako sú zoskupené podľa funkcie. Pozrime sa na to v praxi.

Rezanie obrázkov vo Photoshope.

Úvod do HTML a CSS pre dizajnérov

Pred kódovaním sa musíme rozhodnúť, ktoré časti webu by mali obsahovať obrázky a ktoré je možné kódovať. Využime to nástroj photoshop Plátok (skryté pod podmenu Nástroj na orezanie ) a zvýraznite oblasti, ako je fotografia burrita a taco joan .

Teraz musíme exportovať naše úryvky - vyberte Súbor > Uložiť pre web (Alt + Shift + Ctrl + S). Keď je vybratý konkrétny úryvok, môžete nastaviť jeho možnosti exportu na pravej strane okna (JPG, PNG atď.). Ak dvakrát kliknete na konkrétny fragment, zobrazí sa vyskakovacie okno " Parametre fragmentu" - To vám umožní pomenovať konkrétne fragmentové súbory.

Štandardne sú všetky obrázky umiestnené v: /images/ podadresári. Ak chcete exportovať iba úryvky, ktoré vytvoríte, vyberte „ Všetky vlastné fragmenty" v okne "Uložiť". Úvod do HTML a CSS pre dizajnérov

Vytvorenie základného HTML dokumentu

Máme svoje rezačky, poďme si vytvoriť základný HTML dokument. Úvod do HTML a CSS pre dizajnérov

Riadok 1 : Deklaruje, že dialekt HTML 5 je jazykom dokumentu.

Riadok 2 : element predstavuje koreň dokumentu HTML. Toto je povinný kontajner, ktorý označuje hranice nášho dokumentu.

3 : kapitola obsahuje neviditeľné prvky stránky, ako sú meta informácie, názov atď.

Riadok 4 : Toto je vyhlásenie o kódovaní dokumentu − utf-8 - bezpečná voľba - môžete si prečítať viac o kódovaní znakov HTML tu .

Riadok 5 : Ukážková stránka Toto je názov stránky, ktorý sa zobrazuje v záhlaví prehliadača.

6 : zatvorí značku z riadku 3.

Riadok 7 : Tento prvok tela bude obsahovať všetok viditeľný obsah stránky.

Riadok 8 : zatvorí značku od riadku 2. Tento prvok označuje koniec dokumentu. Úvod do HTML a CSS pre dizajnérov

Existujú aj iné možné spôsoby kódovania rovnakého dizajnu. Na vytvorenie základnej štruktúry dokumentu použijeme sémantické značky HTML 5 (hlavička, navigácia, článok, päta):

Toto je rozloženie preložené do HTML:

Pár poznámok:

Riadky 11 a 12 : Prvky sú podstatou internetu, pretože sa používajú na vytváranie hypertextové odkazy . Sú viazané na atribút HREF a musia viazať cieľ URL .

Riadky 18–20 : Tu sú niektoré značky formátovania textu: označuje nadpis prvej úrovne; označuje odsek; znamená zlom riadku.

Formátovanie pomocou kaskádových štýlov (CSS).

Úvod do HTML a CSS pre dizajnérov

Keď otvoríte iba súbor HTML vo webovom prehliadači, uvidíte, že nie je naformátovaný ako náš predchádzajúci dizajn. Je to preto, že HTML kód nestačí - musíme ho naformátovať kaskádové štýly (CSS) . CSS je jazyk šablóny štýlov, ktorý sa používa na formátovanie prvkov HTML.

Ale prečo presne potrebujeme kombinovať HTML s CCS? Pred časom sa formátovanie dosiahlo pridávaním atribútov do značiek HTML. To však malo za následok nečitateľný a neudržovateľný kód. Riešením bolo oddelenie obsahu dokumentu (HTML) od formátovania dokumentu (CSS).

Poďme rozčleniť jednoduché pravidlo CSS : .

Selektor : Toto je prvok HTML, ktorý chcete upraviť. Napríklad: <článok>

reklama : Pravidlo CSS môže mať jednu alebo viac deklarácií. Každá deklarácia pozostáva z vlastnosti a hodnoty a je oddelená bodkočiarkou. Deklarácie umiestnite do zložených zátvoriek {}. Úvod do HTML a CSS pre dizajnérov

Nehnuteľnosť : toto štýlová charakteristika, ktorú chcete zmeniť. Napríklad: farba pozadia, veľkosť písmo atď.

Hodnota : Každá vlastnosť má priradenú hodnotu. Napríklad: #ffcc11 (pre farbu pozadia), 16px (pre veľkosť písma) atď.

Tam veľa vlastností CSS, ktoré je možné nastaviť pre každý HTML element, ale nie je potrebné ich všetky písať sami. Môžete sa spoľahnúť na predvolené nastavenia prehliadača alebo použiť základnú šablónu štýlov, ktorá obnoví nastavenia prehliadača na primerané nastavenia. V skutočnosti do selektory zápisu robiť to sami si vyžaduje veľa vedomostí a skúseností.

Pozrime sa na niektoré pravidlá CSS potrebné na formátovanie nášho jednoduchého dizajnu.

Vlastnosti umiestnenia CSS : existuje 4 rôzne metódy (statické, pevné, relatívne a absolútne), ktoré nám umožňujú umiestniť určité prvky do nášho dizajnu. Po nastavení jednej z týchto metód môžete umiestniť prvky pomocou vlastností top, right, bottom a left – budú fungovať odlišne v závislosti od toho, ktorú zo 4 metód použijete. V tomto prípade by sme chceli pozíciu plate_image, použitím absolútne polohovanie.

CSS Box Model : tento model je rámec, ktorý uzatvára všetky prvky HTML vrátane okrajov, okrajov, výplne a obsahu. Okraj je neviditeľná oblasť okolo okraja a výplň medzi okrajom a obsahom.

Ak sa NAOZAJ chcete dozvedieť viac o kódovaní, pozri sa na túto skvelú stránku: Codecademy .