Jak vytvořit web z jediného statického obrázku

Efektivní webové stránky nemusí být složité a plné obrazů. Pokud máte jediný snímek, na který chcete vycentrovat své webové stránky, jděte na něj. Můžete jej použít jako element pozadí divu, nebo můžete umístit textové prvky vedle nebo blízko něho. Pokud váš obrázek obsahuje text pro prvky navigace, můžete k zobrazení těchto prvků kliknout pomocí mapy obrázků. Pravděpodobně to bude jednoduchá stránka, ale "jednoduché" nemusí nutně znamenat "špatné".

1.

Umístěte obrázek na stránku. Chcete-li vycentrovat obrázek na stránce, nastavte celý web, aby byl vycentrován úpravou zarovnání v části "tělo" stylu, např.

tělo {text-align: center; }}

2.

Vytvořte div pro svůj textový obsah. Zvažte, že div je pole obsahující obsah. Unstyled, jednoduše se přizpůsobí šířce obrazovky návštěvníka. CSS však můžete rozměrovat, zbarvit, umístit a dokonce stackovat tak, aby hrál s vaším obrázkem příjemný.

3.

Použijte CSS k umístění divu, který chcete s obrázkem. Například pokud chcete, aby se obrázek zobrazil nalevo od vaší div, můžete použít následující CSS:

img {float: vlevo;}

obsah {šířka: 500px; polstrování: 5px; }}

Páček s HTML:

Textový obsah

Pokud jste však chtěli nastavit obrázek mírně pod div, můžete použít pozici. Řekněme, že váš snímek je 600 pixelů vysoký a 800 pixelů široký. Byla by nastavena relativní pozice div vyšší než tam, kde přirozeně přistává na stránce. Váš CSS může vypadat takto:

obsah {

poloha: relativní; horní: -550px; výška: 600px; šířka: 800px; přetečení-x: skryté; přetečení-y: posouvat; }}

Vypadá to spousta, ale nastavuje div tak, aby pokrývaly všechny, kromě horních 50 pixelů vašeho obrazu, s horizontální posuvnou lištou skrytou a svislou posuvnou lištou povolenou. To, co v podstatě máte, je funkční ekvivalent inline rámce, aniž byste měli potíže s použitím rámce inline.

Můžete jej dále upravit pomocí krytí. Například hodnoty barvy RGBa umožňují nastavit barvu jako průhlednou. Pokud jste chtěli bílé pozadí, které bylo 70% průhledné, přidáte:

pozadí: RGBA (250, 250, 250, 0, 7);

Buďte opatrní, ačkoli; Hodnoty RGBa nefungují v aplikaci Internet Explorer 8 a starších. V IE nebude mít vaše webové stránky vůbec žádnou barvu pozadí.

4.

Použijte mapu obrázků, chcete-li, aby některé části obrázku byly klikatelnými odkazy. Obrázkové mapy používají souřadnice pro vytvoření vazeb. Manipulaci s mapou můžete psát ručně, získáním souřadnic každé oblasti pomocí preferovaného programu pro úpravy obrázků nebo můžete použít nástroj online pro generování mapy. Chcete-li na obrázek použít mapu, musíte přidat atribut "usemap":

Poté přidejte vlastní mapu na svou stránku, například:

5.

Přidávejte další prvky, které spojují web. Jednoduché není ospravedlnění pro nedostatečně rozvinuté. Použijte jemný obrázek na pozadí pro všechno ostatní nebo barvu, aby se zdála méně ostrá. Přidejte hranice, pokud máte rádi estetiku. Nebojte se experimentovat s prvky jako stíny a transformace CSS3,

6.

Uložte svou stránku a otevřete ji ve svém prohlížeči. Možná budete muset vyladit nastavení šířky a výšky a neprůhlednost obrázku, dokud nebudete spokojeni s konečným produktem.

Tipy

  • Chcete-li obrázek nastavit jako pozadí pro div, jednoduše jej přidejte do vašeho CSS: background: url ('URL');
  • Pro více elementů můžete použít více divů na stránce. Můžete například použít obsah div a postranní panel div pro vytvoření navigace a obsahu.
  • Podívejte se na nástroj @ font-face CSS3, který vám umožňuje používat vlastní písma na webu bez použití obrázku.
 

Zanechte Svůj Komentář