Úvod do HTML a CSS pro designéry

Úvod do HTML a CSS pro designéry.

Jako grafický designér si pravděpodobně uvědomujete neustále se vyvíjející vztah mezi designem a technologií. To platí zejména pro ty, kteří se zabývají webdesignem. V tomto odvětví potřebujeme mít základní znalosti o tom, jak se z našich pečlivě vytvořených rozvržení stávají živé webové stránky. Když pochopíme základy tohoto procesu (a jeho omezení), můžeme přesně komunikovat s vývojáři a tvořit webové stránky s perfektní pixel.

To neznamená, že musíte vědět, jak kódovat web shora dolů (i když by to bylo skvělé!), znamená to pouze, že musíte rozumět základům. V tomto příspěvku začneme velmi základním úvodem do HTML. Dozvíte se, jak ve Photoshopu rozřezat webové návrhy a formátovat HTML pomocí CSS. Úvod do HTML a CSS pro designéry

Co je HTML?

Téměř vše, co vidíte při procházení webu, je dokument HTML (hypertext markup language). Hypertext je text, který odkazuje a odkazuje na jiný text na vaší obrazovce a umožňuje vám přístup k obsahu jednoduchým kliknutím. Značkovací jazyk je sada značek uzavřených v hranatých závorkách <>. Tyto HTML značky se obvykle dodávají v párech:

<počáteční značka> : Také známý jako úvodní značka.
: nazývá se také uzavírací značka a obsahuje lomítko /

Když mezi tyto dva tagy uzavřete obsah, zavolá se celá věc živel :

Toto je odstavec

Když je tento jazyk přeložen na internet, diváci tagy neuvidí – uvidí pouze obsah mezi nimi.

HTML 5, aktuální verze HTML, obsahuje asi 100 značek s atributy, které mění jejich funkci nebo vzhled. Potřebujete znát pouze 30-40 těchto značek, abyste mohli porozumět a vytvářet HTML. Podívejte se na ně a všimněte si, jak jsou seskupeny podle funkce. Podívejme se na to v akci.

Řezání obrázků ve Photoshopu.

Úvod do HTML a CSS pro designéry

Před kódováním se musíme rozhodnout, které části webu by měly obsahovat obrázky a které lze kódovat. Využijme toho nástroj Photoshop Plátek (skryté pod podnabídkou Nástroj oříznutí ) a zvýrazněte oblasti, jako je fotografie burrito a taco joan .

Nyní musíme exportovat naše úryvky - zvolte Soubor > Uložit pro web (Alt + Shift + Ctrl + S). Když je vybrán konkrétní úryvek, můžete nastavit jeho možnosti exportu na pravé straně okna (JPG, PNG atd.). Pokud dvakrát kliknete na konkrétní fragment, zobrazí se vyskakovací okno " Parametry fragmentu" - To vám umožní pojmenovat konkrétní fragmentové soubory.

Ve výchozím nastavení jsou všechny obrázky umístěny v: /images/ podadresáři. Pokud chcete exportovat pouze úryvky, které vytvoříte, vyberte „ Všechny vlastní fragmenty" v okně "Uložit". Úvod do HTML a CSS pro designéry

Vytvoření základního HTML dokumentu

Máme své slicery, pojďme vytvořit základní HTML dokument. Úvod do HTML a CSS pro designéry

Řádek 1 : Prohlašuje, že dialekt HTML 5 je jazykem dokumentu.

Řádek 2 : prvek představuje kořen dokumentu HTML. Toto je povinný kontejner, který označuje hranice našeho dokumentu.

3 : kapitola obsahuje neviditelné prvky stránky, jako jsou metainformace, nadpis atd.

Řádek 4 : Toto je deklarace kódování dokumentu − utf-8 - bezpečná volba - můžete si přečíst více o kódování znaků HTML zde .

Řádek 5 : Ukázková stránka Toto je název stránky, který se zobrazuje v záhlaví prohlížeče.

6 : zavře značku z řádku 3.

Řádek 7 : Tento prvek těla bude obsahovat veškerý viditelný obsah stránky.

Řádek 8 : zavře značku od řádku 2. Tento prvek označuje konec dokumentu. Úvod do HTML a CSS pro designéry

Existují další možné způsoby kódování stejného návrhu. K vytvoření základní struktury dokumentu použijeme sémantické značky HTML 5 (header, nav, article, footer):

Toto je rozložení přeložené do HTML:

Pár poznámek:

Linky 11 a 12 : Prvky jsou podstatou internetu, protože se používají k vytváření hypertextové odkazy . Jsou vázány na atribut HREF a musí vázat cíl URL .

Řádky 18–20 : Toto jsou některé značky pro formátování textu: označuje nadpis první úrovně; označuje odstavec; znamená konec řádku.

Formátování pomocí kaskádových stylů (CSS).

Úvod do HTML a CSS pro designéry

Když ve webovém prohlížeči otevřete pouze soubor HTML, uvidíte, že není naformátován jako náš předchozí návrh. Je to proto, že HTML kód nestačí - musíme jej naformátovat Kaskádové styly (CSS) . CSS je jazyk šablony stylů, který se používá k formátování prvků HTML.

Ale proč přesně potřebujeme kombinovat HTML s CCS? Před časem bylo formátování dosaženo přidáním atributů do značek HTML. To však vedlo k nečitelnému a neudržovatelnému kódu. Řešením bylo oddělit obsah dokumentu (HTML) od formátování dokumentu (CSS).

Pojďme Breakdown Simple CSS pravidlo : .

Volič : Toto je prvek HTML, který chcete upravit. Například: <článek>

Reklama : Pravidlo CSS může mít jednu nebo více deklarací. Každá deklarace se skládá z vlastnosti a hodnoty a je oddělena středníkem. Deklarace umístíte do složených závorek {}. Úvod do HTML a CSS pro designéry

Vlastnost : tento stylová charakteristika, kterou chcete změnit. Například: barva pozadí, velikost písmo atd.

Hodnota : Každá vlastnost má přiřazenou hodnotu. Například: #ffcc11 (pro barvu pozadí), 16px (pro velikost písma) atd.

Tam mnoho vlastností CSS, které lze nastavit pro každý HTML element, ale není nutné je všechny psát sami. Můžete se spolehnout na výchozí nastavení vašeho prohlížeče nebo použít základní šablonu stylů, která váš prohlížeč resetuje na rozumná nastavení. Ve skutečnosti, aby selektory zápisu dělat to sám vyžaduje hodně znalostí a zkušeností.

Podívejme se na některá pravidla CSS potřebná k formátování našeho jednoduchého návrhu.

Vlastnosti umístění CSS : existuje 4 různé metody (statické, pevné, relativní a absolutní), které nám umožňují umístit určité prvky v našem návrhu. Po nastavení jedné z těchto metod můžete umístit prvky pomocí vlastností top, right, bottom a left – budou fungovat odlišně podle toho, kterou ze 4 metod použijete. V tomto případě bychom chtěli pozici plate_image, pomocí absolutní polohování.

CSS Box Model : tento model je rámec, který obklopuje všechny prvky HTML, včetně okrajů, okrajů, odsazení a obsahu. Okraj je neviditelná oblast kolem okraje a výplň mezi okrajem a obsahem.

Pokud se OPRAVDU chcete dozvědět více o kódování, podívej se na tento skvělý web: Codecademy .