Zprávy

Vytvořte web bez znalosti html pomocí RocketCake

Vytvořit web bez znalosti HTML? Online redaktoři, kteří vytvářejí webové stránky, se prosazují, často kvůli krásným šablonám. Pokud nechcete začít od takového hotového designu, který často končí placenou možností, pak je RocketCake desktopový program, pomocí kterého můžete od základu vytvořit krásný web.

Anglický program obsahuje pouze patnáct šablon pro inspiraci. Záměrem je vytvořit si vlastní web pomocí RocketCake, který můžete později snadno aktualizovat. RocketCake je takzvaný editor WYSIWYG. Nemusíte psát kódy HTML. Zkompilujete svůj vlastní web umístěním prvků do pracovního prostoru a následným nahráním případu. Mezi prvky patří textová pole, tlačítka, obrázky, nabídky, prezentace, filmy, zvukové klipy a další. RocketCake je výjimečný tím, že se jedná o editor, který vytváří takzvané responzivní weby. Takový responzivní web je vhodný pro mobilní zařízení, protože rozložení se přizpůsobuje obrazovce zařízení, s nímž někdo web navštíví.

Reagující webová stránka zůstane čistá, ať už ji prohlížíte na velkém monitoru nebo na malé obrazovce smartphonu. Za tímto účelem web upraví řadu komponent, například velikost písma, uspořádání určitých prvků a způsob, jakým se nabídka zobrazuje na obrazovce.

Stáhněte si RocketCake zde. Existuje jedna verze pro Windows a druhá pro macOS. Na tomto workshopu používáme bezplatnou verzi. Díky tomu je snadné vytvořit hladce fungující responzivní web. K dispozici je také profesionální edice RocketCake, která stojí 39 eur. V profesionální verzi můžete vytvořit neomezený počet webových stránek. K dispozici je také podpora CSS, pomocí které můžete rychle upravit styly rozvržení na celém webu. Verze 3.1 RocketCake byla vylepšena, aby vaše webové stránky dosahovaly lepších výsledků u Google a dalších vyhledávačů. Bezplatná verze dále obsahuje několik funkcí, které byly dříve pouze v placeném vydání.

Pracovní prostředí a displej

V horní části pracovního prostoru je lišta s tlačítky pro přidání nové stránky, pro náhled v aplikaci Internet Explorer a pro publikování webu na internetu. Vpravo najdete Sada nástrojů se všemi prvky, které můžete umístit na webovou stránku. Vlevo nahoře vidíte strukturu všech stránek vašeho webu.

Pod tím jsou Vlastnosti. Zde změníte vlastnosti každého prvku, který vyberete. Předpokládejme, že chcete přidat obrázek na stránku, pak vyberte soubor obrázku ve Vlastnosti a označte, zda by obrázek měl mít zaoblené nebo ostré rohy atd. ...

Úplně dole určíte šířku displeje. Ve výchozím nastavení se jedná o plocha počítače-Zobrazit. Prostřednictvím malé rozevírací nabídky vlevo dole můžete také pracovat na displeji řady populárních mobilních zařízení, jako jsou iPhone, iPad, Samsung Galaxy, LG ... Pokud v tomto nenajdete požadovanou šířku V nabídce můžete také vybrat možnost Vlastní a pomocí posuvníku určit šířku, která se zobrazí na obrazovce. Toto nastavení šířky je důležité pro určení hraničních bodů, o kterých si povíme později.

Barvy a domovská stránka

Začněme s domovskou stránkou. V tomto příkladu vytváříme web ambiciózní rockové kapely. Místo toho, abyste začali šablonou, si vyberete Prázdná stránka. Sekce Vlastnosti se přizpůsobí každému vybranému prvku. Například kliknete na pozadí první stránky a budete mít přístup Barva pozadí vyberte barvu pozadí. Výchozí hodnota je 000000, html kód pro bílou. Kliknutím na pole se třemi tečkami vyvoláte výběr barvy. V části Vlastnosti této webové stránce dáte název. To se brzy objeví v horní části okna prohlížeče. Název domovské stránky necháte na index.html. Prohlížeč vždy hledá indexovou stránku, která se zobrazí jako domovská stránka.

Pod ním určíte barvy čtyř typů hypertextových odkazů. LinkColor určuje barvu odkazů, které ještě nebyly navštíveny, LinkColorActive odkazuje na odkazy, které někdo aktuálně navštěvuje, LinkColorHover je barva odkazu, na který ukazatel myši ukazuje a LinkColorVisited odkazuje na odkazy, které již někdo navštívil.

Navigační lišta a úvodní obrázek

Chcete-li umístit navigační lištu, vyberte položku v sadě nástrojů Navigační nabídka a poté klikněte na pracovní prostor. Na tomto navigačním panelu zadejte položky nabídky, pro které chcete vytvořit webové stránky. Názvy těchto položek udržujte krátké. V našem příkladu to jsou The band, Who, Where, When, Why a Media. V horní části jsou tlačítka pro formátování textu těchto navigačních položek. Pokud kliknete na samotnou navigační lištu, můžete upravit barvu a tvar lišty ve vlastnostech. Takže můžete BackGroundMode vybrat pro Barva, obrázek, přechod a Stylové tlačítko. V přechodu určujete barevné tóny přechodu a ve Stylovaném tlačítku získá panel nabídek konvexní vzhled.

Chceme také přidat banner nebo úvodní obrázek. Chcete-li to provést, nejprve položte položku Kontejner. V nabídce Vlastnosti na ImageNamekliknutím na tři tečky vyberte předem připravený obrázek. Pokud je příliš velká, RocketCake se vás zeptá, zda může upravit velikost obrázku. To je povoleno. Název „Šílený pes“, který vidíte na banneru v horní části tohoto článku, jsme si k obrázku přidali sami pomocí jiného programu. S položkou můžete v zásadě také textovat Plovoucí text přes obrázek. Na mobilních zařízeních to bohužel přináší nepředvídatelné výsledky.

Pokud jste spokojeni, uložte pracovní soubor někde na pevný disk jako soubor .rcd.

Sloupce

Pod bannerem chcete poskytnout domovské stránce obsah v jednom, dvou nebo třech sloupcích. Chcete-li to provést, vyberte položku v sadě nástrojů Kontejner se sloupy. RocketCake se zeptá, kolik sloupců chcete. Aplikace také chce vědět, jaká je minimální šířka sloupce. Rozhodli jsme se pro dva sloupce a výchozí nastavení 150. To znamená, že na širokoúhlé obrazovce lze sloupce vidět úhledně vedle sebe. Pokud se sloupec na malé obrazovce zmenší na méně než 150 pixelů, nebude se již zobrazovat vedle, ale pod předchozím sloupcem.

V tomto příkladu jsme nastavili levý sloupec na Min. Šířka 500. 500 je zarážka pro levý sloupec. Pokud je šířka obrazovky příliš malá, návštěvník přečte obsah pravého sloupce pod levým sloupcem. Kromě toho jsme nastavili banner na Max. Šířka 1000.

Chcete-li pravý sloupec zúžit než levý, nejprve klikněte na levý sloupec. The Velikost je tam ve výchozím nastavení 50%, auto. Například to změňte na 70%, auto. To způsobí, že se druhý sloupec dočasně vznáší pod prvním. To můžete vyřešit kliknutím na druhý sloupec a na Velikost 30%, auto vyplnit. Tím získáte poměr 70/30. Poté vyplníte sloupce textem, který také navrhnete jako u textového editoru. K takovému sloupci můžete také přistupovat ze sady nástrojů Nadpisy (šálky). Nadpis 1, 2, 3 udržuje poháry dobře vypadající.

Chcete-li přidat obrázek, umístěte kurzor do textu a klikněte na v sadě nástrojů obraz. Poté přejděte do umístění, kde obrázek čeká. Každou chvíli klikněte na tlačítko Náhled zobrazit svou práci v prohlížeči.

Pokud kliknete na takový textový sloupec, uvidíte ve vlastnostech, že Polstrování výchozí hodnota je 10, 10, 10, 10. Výplň je vzdálenost od textu k okraji sloupce. První číslo odkazuje nahoře, druhé dole, třetí doprava a čtvrté vlevo. Pokud chcete trochu více polstrování na pravé straně textového pole, musíte nastavit třetí hodnotu, například 20.

Výplň je tedy vzdálenost na vnitřní straně krabice, Okraj je vzdálenost zvenčí. Pokud chcete mezi spodní částí fotografie a horní částí textu pod ní trochu více prostoru, změňte okraj z 0, 0, 0, 0 na 0, 10, 0, 0.

Stránky navíc

Nyní, když je domovská stránka připravena, přirozeně chcete vytvořit více stránek pro svůj projekt. To se provádí tlačítkem Přidat stránku. Program se zeptá, zda chcete vytvořit zcela novou stránku nebo kopii stávající webové stránky. V tomto příkladu použijeme styl naší domovské stránky: černé pozadí, písmo, velikost písma, šířku kontejneru ... Takže jdeme na druhou možnost. Poté odstraníme banner a změníme obsah textového kontejneru.

Pokud chcete v dolní části každé stránky zápatí, přidejte tam také jednu Kontejner nebo Kontejner se sloupy a zadejte například kontaktní informace nebo informace o autorských právech. Speciální znaky, například symbol autorských práv, nelze zadat přímo pomocí klávesnice. V RocketCake vybíráte takové speciální znaky z nabídky Vložit, Vložit textový symbol.

Odkazy

Samozřejmě chcete, aby tlačítka v navigační nabídce směřovala na správné stránky. Chcete-li to provést, nejprve vyberte tlačítko v navigační nabídce a poté klikněte na tlačítko s řetězcem. Nebo stiskněte pravé tlačítko myši a vyberte Vložte hypertextový odkaz. Otevře se výběrové okno, kde si můžete vybrat mezi propojením na externí webovou stránku, e-mailovou adresu, stránku tohoto projektu nebo konkrétní soubor. Vyberte možnost Stránka v projektu. Poté se zobrazí seznam vytvořených webových stránek, na kterých vyberete ten správný.

Včela cílová zvolit otevření webové stránky v novém okně prohlížeče nebo v otevřeném okně prohlížeče. Druhá možnost je běžná. Pokud podržíte levé tlačítko myši a současně umístíte kurzor na tlačítko navigační nabídky, přidáte podnabídky, které vás pak stejným způsobem propojí se stávajícími webovými stránkami.

Masterpages

RocketCake funguje také s takzvanými vzorovými stránkami. Pokud vytváříte web s mnoha stránkami, tato technika značně urychlí rozložení. Stránka předlohy je formátovaný model, který funguje jako šablona pro jiné stránky. Taková hlavní stránka proto není běžnou webovou stránkou. Zde je návod, jak jednu vytvořit: vytvořit novou webovou stránku, umístit rozevírací nabídku, zajistit, aby nabídka fungovala tak, jak má, a naformátovat tuto stránku bez skutečného textového obsahu. Pak jeden přidáte ze sady nástrojů Zástupný symbol obsahu na. Bez tohoto prvku nebude hlavní stránka fungovat. Pojmenujte tuto speciální stránku smysluplným názvem, například masterpage.html. Poté vytvoříte jednu nebo více webových stránek, které neposkytujete s rozvržením.

Píšete text, volitelně přidáte obrázek a uložíte tuto stránku. U těchto stránek s obsahem se podíváte na spodní část Vlastnosti v poli Hlavní stránka. Zde aktivujete tuto možnost UseMasterPage. Pokud jste zaškrtli políčko, objeví se nové pole, ve kterém vyberete název zamýšlené stránky předlohy. Můžete použít více stránek předlohy. V tomto okamžiku neuvidíte nic, ale pokud stisknete tlačítko Náhled všimnete si, že obsah této stránky je úhledně publikován v zástupném symbolu obsahu vybrané hlavní stránky.

Vložte médium

S RocketCake přidáváte videa z YouTube kliknutím na položku v sadě nástrojů YouTube video vybrat. Poté zadejte webovou adresu videa do Vlastnosti. Stejně snadné je přidat fotogalerii. Po vás Galerie Obrázků vybrané ze sady nástrojů, vyberte různé fotografie v polích ImageFile1, ImageFile2 a tak dále. Existuje několik způsobů, jak fotografie v galerii zvětšit. Můžete je například otevřít v novém okně ve vyskakovacím okně, ale nejlépe se nám líbí jako velký obrázek v samostatné vrstvě.

Publikovat

Jsi hotov? Web pak můžete publikovat na internetu nebo na místním disku. RocketCake je vybaven funkcí ftp, která úhledně umisťuje vše na server do složky, kterou pro to váš poskytovatel zpřístupňuje. Vyplňte ftp adresu, uživatelské jméno a heslo. V případě potřeby použijte tuto možnost Uložit heslo pro uložení hesla. Když publikujete web na svém pevném disku, můžete navštívit domovskou stránku otevřením souboru index.html pomocí internetového programu.