Zdarma 960.GS CSS fotografie šablony a výukový program

Milovat to nebo nenávidět, 960.gs je pro některé neuvěřitelně rychlé prototypování. Použitím přednastavených tříd můžete dosáhnout poměrně složitých rozvržení s malým nebo žádným úsilím.

Dnes vám přinášíme bezplatnou jednostránkovou šablonu, plně kódovanou pomocí 960.gs. Šablona má několik šikovných efektů CSS3 a používá @ font-face k implementaci nějaké krásné vlastní typografie. Níže najdete soubor ke stažení a základní krok-za-krokem návod, jak vytvořit svůj vlastní.

Šablonu si můžete stáhnout zcela zdarma a použít ji však s nulovým připsáním.

Stáhněte si šablonu

  • Náhled v prohlížeči
  • Stáhněte si .ZIP

Zde je rychlý náhled vzhledu šablony:

Stáhněte si zdroje 960.GS

První věc, kterou budete chtít udělat, je přes webovou stránku systému 960 Grid System a kliknout na tlačítko Stáhnout v levé horní části stránky.

Stahování obsahuje spoustu věcí, ale opravdu potřebujeme tři soubory CSS: reset.css, text.css a 960.css. Jedná se o standardní komponenty, na nichž je postaven síťový systém. Seznamy resetů a textů jsou zcela volitelné, ale použijeme je k zajištění toho, aby vše zůstalo hezké a konzistentní v různých prohlížečích.

Výukový program níže předpokládá, že jste docela dobře obeznámeni s CSS i 960.gs. Pokud potřebujete havarijní kurz na gridových systémech, podívejte se na svého průvodce 960 v Six Revisions.

Krok 1: Spusťte své soubory HTML a CSS

Kromě souborů CSS, které jsou dodávány s 960.gs, potřebujeme také vlastní. Na počítači vytvořte adresář, vhazujte stažené soubory a vytvořte soubor index.html a soubor style.css.

Chcete-li začít, vložte do kódu HTML následující kód:

V podstatě jsme právě propojili naše různé CSS soubory (pravděpodobně příliš mnoho pro jednu webovou stránku, ale to je vytvořeno tak, aby se rozbalovalo) a spustili jsme tělo HTML.

Konstrukce obsahuje tenké šedé pruhy v horní a dolní části stránky. Chceme, aby se tyto táhly celou stránku, takže je umístíme mimo 960 div.

Dále mezi záhlavím a zápatím je div s třídou „includeer_12“. Protože používáme 12 sloupcovou verzi systému 960, vytvoří se div, který zabírá většinu cesty přes stránku a je automaticky vodorovně vystředěn.

Krok 2: Písma

Pro tento projekt použijeme dvě vlastní webová písma: Lobster a Caviar Dreams. Obě najdete v knihovně FontSquirrel @ Font-Face Kit.

Stáhněte si soupravy pro každé písmo a vložte různé soubory písem do svého projektu. V CSS dodávaném s každou sadou byste měli najít kód @ font-face pro vložení tohoto písma. Uchopte úryvek pro každé písmo a vložte jej do souboru stye.css.

Pomocí tohoto kódu můžeme nyní tato písma zahrnout do našich komínů písem jednoduše zadáním „Lobster13Regular“ nebo „CaviarDreamsRegular“.

Krok 3: Záhlaví

Protože jsme již do našeho HTML přidali záhlaví, vše, co musíme udělat, aby to vypadalo, je přidání nějakého základního stylu.

V podstatě vše, co jsme zde udělali, má záhlaví výšku a barvu pozadí.

Krok 4: Navigace HTML

První věc, která se objeví za záhlavím, je navigace. To je trochu složité, protože se vznáší na pravé straně stránky. Mohli bychom nastavit třídu 960 a poté použít příkaz push, ale je mnohem snazší jednoduše použít žádnou třídu na div a plovoucí to pravé s CSS.

Pro HTML potřebujeme pouze standardní seznam bez odkazů s některými odkazy. Hodil jsem sem nějaké zástupné odkazy, ale zřejmě si to budete chtít přizpůsobit pro svůj vlastní web.

Krok 5: Navigace CSS

Dále musíme pro navigaci nastavit spoustu stylů. Odkazy, neuspořádané seznamy, položky seznamu a efekty přechodu musí být vypracovány.

Všimněte si, že jsme nastavili písmo na Caviar Dreams, jak jsme se dozvěděli výše, a zajistili, že v případě, že prohlížeč nenačte správné písmo, bylo uvedeno několik záloh.

Nejpodivnější věc je, že jsme použili jak plovák vlevo, tak plovák vpravo. Aby se položky seznamu zobrazily v řadě místo naskládaných, musíme vznášet „ul li“ vlevo. Aby se soubor jako celek držel na pravé straně našeho kontejneru div, vznášeli jsme se #nav vpravo.

Všechno ostatní je jen spousta základních stylů, jako je barva, velikost písma atd. Pro rozlišení odkazu na vznášedlo jsem použil jednoduchý podtržení.

V tuto chvíli by se vaše stránka měla začít formovat. Ujistěte se, že vypadá blíže k náhledu níže.

Krok 6: Nadpis HTML

Po navigaci přidejte div s id „titulek“ a třídou „grid_12“. Třída grid_12 bude šířku div rovnat šířce celého kontejneru. Uvnitř tohoto divu umístěte značku h2 a značku odstavce s nějakým obsahem.

Všimněte si, že po navigaci a nadpisu div je div s třídou „clear“. Takto systém 960 Grid vymaže dříve implementované plováky. Nezapomeňte to zahodit, kdykoli chcete začít nový řádek obsahu.

Krok 7: Titulek CSS

Dále přidejte styly pro nadpis, značku h2 nadpisu a značku odstavce nadpisu. Nastavil jsem h2 na 50px Lobster a odstavec na 25px Caviar Dreams.

Vaše stránka by nyní měla obsahovat horní lištu, oblast navigace a pěkný velký nadpis.

Krok 8: Big Photo HTML

Chcete-li přidat fotografii, použijeme prázdné div se třídou grid_12 a nastavíme pozadí pomocí CSS.

Krok 9: The Big Photo CSS

Pro CSS jsme nastavili obrázek na pozadí pro div, udělili jsme jeho rámečku 3px a aplikovali stín CSS3. Bílé ohraničení by se neobjevilo na bílém pozadí, takže stín dává obrazu určitou hloubku.

Krok 10: HTML řádkové položky

Poslední část HTML, kterou potřebujeme, jsou pole a text ve spodní části stránky. Budeme tyto styly s třídou, aby bylo snadné přidat další později.

K vytvoření této sekce potřebujeme dva sloupce: jeden pro obrázek a druhý pro text vedle něj. Tady nám to 960.gs usnadňuje. Protože používáme 12-sloupcovou verzi, chceme, aby naše číslo bylo celkem dvanáct, aby se protáhlo po celé nádobě.

Použitím třídy „grid_4“ následované třídou „grid_8“ získáme dva sloupce, z nichž první je polovina šířky druhé (8 + 4 = 12).

Všimněte si, že jsme zdvojnásobili náš kód a vložili různé obrázky. To nám dává dvě oblasti „lineItem“. Jednoduše přidejte další duplikát a přidejte třetí nebo čtvrtý.

Krok 11: CSS řádkové položky

Dále přidáme do této oblasti spoustu stylů, aby to vypadalo hezky. Dejte obrazům stín a obrys a použijte příslušná písma.

Všimněte si, že jsme zde použili „obrys“ místo „ohraničení“. Toto je úhledný trik CSS, který v podstatě umožňuje mít ohraničení obrazu, které nezvratí vaše rozvržení.

Po dokončení by vaše řádkové položky měly vypadat skvěle a budou rozděleny do jasně definovaných sloupců.

Krok 12: Zápatí CSS

Posledním krokem je použití stejných stylů na zápatí jako v záhlaví. To dává webu nějaký pěkný silný kontrast na dně a nahoře.

Konečný výsledek

To by vám mělo poskytnout hotový funkční produkt! Všimněte si, že většina naší práce byla ve skutečném stylu objektů, které jsme umístili na stránku. Téměř jsme se starali o umístění. Toto je hlavní remíza gridových systémů jako 960 a Blueprint.

Můžeme argumentovat sémantiku celý den, ale nakonec vám tyto nástroje pomohou soustředit se více na design a méně na rozvržení. Je pravděpodobné, že čím zkušenější budete s CSS, tím méně uvidíte potřebu používat distribuční systém k provedení rozvržení za vás, ale do té doby je příjemné nechat vyřešit vaše problémy dříve, než k nim dojde.

Závěr

Jak je u těchto typů příspěvků nevyhnutelné, několik lidí bezpochyby zanechá komentáře v síti mřížkových systémů. Pravda je, že je používám jen zřídka. Vidím však jejich hodnotu a rád si s nimi pohrávám, abych viděl, s čím mohu přijít. Sečteno a podtrženo, pokud se vám nelíbí 960.gs, nestahujte šablonu!

Pokud jste však spokojeni s mřížkovými systémy a máte rádi bezplatné věci, stáhněte si soubor a vyladěte jej! Pokud ji použijete v projektu, zahoďte níže uvedený odkaz (volitelný), abych mohl zkontrolovat, jak jste jej implementovali a rozšířili design. Pokud potřebujete návrh, ta velká fotografie křičí, aby se proměnila v jezdec jQuery.

© Copyright 2021 | computer06.com