Vytvoriť web bez znalosti HTML? Online editori, ktorí vytvárajú webové stránky, sa dostávajú do popredia, často kvôli nádherným šablónam. Ak radšej nezačínate s takýmto hotovým dizajnom, ktorý často končí platenou možnosťou, potom je RocketCake desktopový program, pomocou ktorého môžete od základu vytvoriť krásnu stránku.
Anglický program obsahuje iba pätnásť šablón pre inšpiráciu. Zámerom je, aby ste si pomocou RocketCake vytvorili svoj vlastný web, ktorý môžete neskôr ľahko aktualizovať. RocketCake je takzvaný editor WYSIWYG. Nemusíte zadávať kódy HTML. Svoj vlastný web si zostavíte umiestnením prvkov do pracovného priestoru a následným načítaním puzdra. Medzi prvky patria textové polia, tlačidlá, obrázky, ponuky, prezentácie, filmy, zvukové klipy a ďalšie. To, čo robí RocketCake špeciálnym, je to, že je editorom pre vytváranie takzvaných responzívnych webov. Takýto responzívny web je vhodný pre mobilné zariadenia, pretože rozloženie sa prispôsobuje obrazovke zariadenia, s ktorým niekto stránku navštívi.
Pohotová webová stránka zostáva prehľadná, či už ju zobrazujete na veľkom monitore alebo na malej obrazovke smartfónu. Za týmto účelom webová stránka upraví množstvo komponentov, napríklad veľkosť písma, usporiadanie určitých prvkov a spôsob zobrazenia ponuky na obrazovke.
Stiahnite si RocketCake tu. Existuje jedna verzia pre Windows a jedna pre macOS. Na tomto workshope používame bezplatné vydanie. Vďaka tomu je ľahké vytvoriť hladko fungujúci responzívny web. K dispozícii je tiež profesionálna edícia RocketCake, ktorá stojí 39 eur. V profesionálnej verzii môžete vytvárať neobmedzený počet webových stránok. K dispozícii je tiež podpora CSS, pomocou ktorej môžete rýchlo upraviť štýly rozloženia na celom webe. Vylepšená bola verzia 3.1 RocketCake, aby váš web dosahoval lepšie výsledky v službách Google a iných vyhľadávacích nástrojoch. Okrem toho bezplatná verzia obsahuje niekoľko funkcií, ktoré boli predtým iba v platenom vydaní.
Pracovné prostredie a displej
V hornej časti pracovného priestoru je lišta s tlačidlami na pridanie novej stránky, na zobrazenie ukážky v programe Internet Explorer a na publikovanie webových stránok na internete. Napravo nájdete Sada náradia so všetkými prvkami, ktoré môžete umiestniť na webovú stránku. Vľavo hore môžete vidieť štruktúru všetkých stránok vášho webu.
Pod tým sú Vlastnosti. Tu zmeníte vlastnosti každého prvku, ktorý vyberiete. Predpokladajme, že chcete na stránku pridať obrázok, potom v časti Vlastnosti vyberte súbor s obrázkom a označte, či má mať obrázok zaoblené alebo ostré rohy atď. ...
Úplne dole určíte šírku displeja. Predvolene je to Desktop- displej. Prostredníctvom malej rozbaľovacej ponuky vľavo dole môžete tiež pracovať na displeji mnohých populárnych mobilných zariadení, ako sú iPhone, iPad, Samsung Galaxy, LG ... Ak v tomto nenájdete požadovanú šírku ponuky, môžete tiež zvoliť Vlastné a pomocou posúvača určiť šírku, ktorá sa má zobraziť na obrazovke. Toto nastavenie šírky je dôležité pre určenie hraničných bodov, o ktorých si povieme neskôr.
Farby a domovská stránka
Začnime s domovskou stránkou. V tomto príklade tvoríme web ambicióznej rockovej kapely. Namiesto toho, aby ste začali so šablónou, si vyberiete Prázdna stránka. Sekcia Vlastnosti sa prispôsobí každému prvku, ktorý vyberiete. Napríklad kliknete na pozadie prvej stránky a získate prístup Farba pozadia vyberte farbu pozadia. Predvolená hodnota je 000000, čo je html kód pre bielu farbu. Kliknutím na políčko s tromi bodkami sa zobrazí výber farieb. V časti Vlastnosti tejto webovej stránke dáte názov. Toto sa čoskoro objaví v hornej časti okna prehliadača. Názov domovskej stránky ponecháte na index.html. Prehliadač vždy vyhľadáva indexovú stránku, ktorá sa zobrazí ako domovská stránka.
Pod ním určíte farby štyroch typov hypertextových odkazov. LinkColor určuje farbu odkazov, ktoré ešte neboli navštívené, LinkColorActive označuje odkazy, ktoré niekto práve navštevuje, LinkColorHover je farba odkazu, na ktorý smeruje kurzor myši a LinkColorVisited označuje odkazy, ktoré už niekto navštívil.
Navigačná lišta a úvodný obrázok
Ak chcete umiestniť navigačný panel, vyberte položku v sade nástrojov Navigačná ponuka a potom kliknite na pracovný priestor. Na tomto navigačnom paneli zadávate položky ponuky, pre ktoré chcete vytvárať webové stránky. Názvy týchto položiek udržujte krátke. V našom príklade to sú The band, Who, Where, When, Why and Media. V hornej časti sú tlačidlá na formátovanie textu týchto navigačných položiek. Ak kliknete na samotnú navigačnú lištu, môžete upraviť farbu a tvar lišty vo vlastnostiach. Takže môžeš BackGroundMode vybrať pre Farba, Obrázok, Prechod a Štylizovaný gombík. V Gradiente určíte farebné tóny prechodu a v tlačidle Styled Button získa panel ponúk konvexný vzhľad.
Chceme tiež pridať banner alebo úvodný obrázok. Ak to chcete urobiť, najskôr umiestnite položku Kontajner. Vo vlastnostiach na ImageNamekliknutím na tri bodky vyberte vopred pripravený obrázok. Ak je príliš veľká, RocketCake sa vás opýta, či môže upraviť veľkosť obrázka. To je dovolené. Titul „Mad Dog“, ktorý vidíte na banneri v hornej časti tohto článku, sme si k obrázku pridali sami ďalším programom. S položkou môžete v zásade písať aj textové správy Plávajúci text cez obrázok. To však na mobilných zariadeniach prináša bohužiaľ nepredvídateľné výsledky.
Ak ste spokojní, uložte pracovný súbor niekde na pevný disk ako súbor .rcd.
Stĺpce
Pod bannerom chcete poskytnúť domovskej stránke obsah v jednom, dvoch alebo troch stĺpcoch. Ak to chcete urobiť, vyberte položku v sade nástrojov Kontajner so stĺpikmi. RocketCake sa pýta, koľko stĺpcov chcete. Aplikácia tiež chce vedieť, aká je minimálna šírka stĺpca. Rozhodli sme sa pre dva stĺpce a predvolené nastavenie 150. To znamená, že na širokouhlej obrazovke sú stĺpce viditeľné prehľadne vedľa seba. Ak je stĺpec na malej obrazovke menší ako 150 pixelov, už sa nebude zobrazovať vedľa, ale pod predchádzajúcim stĺpcom.
V tomto príklade sme nastavili ľavý stĺpec na Min. Šírka 500. 500 je bod prerušenia pre ľavý stĺpec. Ak je šírka obrazovky príliš malá, návštevník prečíta obsah pravého stĺpca pod ľavým stĺpcom. Okrem toho sme nastavili banner na Max. Šírka 1 000.
Ak chcete pravý stĺpec zúžiť ako ľavý, kliknite najskôr na ľavý stĺpec. The Veľkosť je tam predvolene 50%, auto. Zmeňte to napríklad na 70%, auto. To spôsobí, že druhý stĺpec dočasne pláva pod prvým. Môžete to vyriešiť kliknutím na druhý stĺpec a na veľkosť 30%, auto vyplniť. Takto získate pomer 70/30. Potom vyplníte stĺpce textom, ktorý tiež navrhnete ako v textovom editore. K takémuto stĺpcu môžete tiež získať prístup zo sady nástrojov Nadpisy (poháre). Nadpis 1, 2, 3 udržuje poháre dobre vyzerajúce.
Ak chcete pridať obrázok, umiestnite kurzor do textu a kliknite na v sade nástrojov Obrázok. Potom prejdite na miesto, kde obrázok čaká. Každú chvíľu kliknite na tlačidlo Náhľad aby ste si mohli pozrieť svoju prácu v prehliadači.
Ak kliknete na taký textový stĺpec, uvidíte vo vlastnostiach, že Vypchávka predvolená hodnota je 10, 10, 10, 10. Výplň je vzdialenosť od textu k okraju stĺpca. Prvé číslo označuje hornú časť, druhé dolnú časť, tretie vpravo a štvrté vľavo. Ak chcete na pravej strane textového poľa trochu vypodložiť, musíte tretiu hodnotu nastaviť napríklad na 20.
Výplň je teda vzdialenosť na vnútornej strane škatule, Okraj je vzdialenosť navonok. Ak chcete medzi spodnou časťou fotografie a hornou časťou textu pod ňou trochu viac medzery, zmeňte okraj z hodnoty 0, 0, 0, 0 na hodnotu 0, 10, 0, 0.
Strany navyše
Teraz, keď je domovská stránka pripravená, chcete prirodzene vytvoriť viac stránok pre svoj projekt. To sa deje pomocou tlačidla Pridať stránku. Program sa opýta, či chcete vytvoriť úplne novú stránku alebo kópiu existujúcej webovej stránky. V tomto príklade použijeme štýl našej domovskej stránky: čierne pozadie, písmo, veľkosť písma, šírka kontajnera ... Ideme teda na druhú možnosť. Potom banner odstránime a zmeníme obsah textového kontajnera.
Ak chcete v dolnej časti každej stránky pätičku, pridajte ju tiež Kontajner alebo Kontajner so stĺpikmi a zadajte napríklad kontaktné informácie alebo informácie o autorských právach. Špeciálne znaky, ako napríklad symbol autorských práv, nie je možné zadávať priamo pomocou klávesnice. V RocketCake vyberáte také špeciálne znaky z ponuky Vložiť, Vložiť textový symbol.
Odkazy
Samozrejme, že chcete, aby tlačidlá v navigačnej ponuke smerovali na správne stránky. Ak to chcete urobiť, najskôr vyberte tlačidlo v navigačnej ponuke a potom kliknite na tlačidlo s reťazou. Alebo stlačte pravé tlačidlo myši a vyberte si Vložte hypertextový odkaz. Otvorí sa výberové okno, kde si môžete vybrať medzi odkazom na externú webovú stránku, e-mailovú adresu, stránku tohto projektu alebo konkrétny súbor. Vyberte možnosť Stránka v projekte. Potom uvidíte zoznam vytvorených webových stránok, na ktorých vyberiete tú správnu.
Včela Cieľ zvoliť otvorenie webovej stránky v novom okne prehľadávača alebo v otvorenom okne prehľadávača. Druhá možnosť je bežná. Ak podržíte ľavé tlačidlo myši a súčasne podržíte kurzor nad tlačidlom navigačnej ponuky, pridáte podmenu, ktoré vás rovnakým spôsobom prepoja s existujúcimi webovými stránkami.
Masterpages
RocketCake pracuje aj s takzvanými vzorovými stránkami. Ak vytvárate webovú stránku s mnohými stránkami, táto technika značne urýchli rozloženie. Vzorová stránka je formátovaný model, ktorý slúži ako šablóna pre ďalšie stránky. Takáto hlavná stránka preto nie je bežnou webovou stránkou. Tu je postup, ako ich vytvoriť: vytvoriť novú webovú stránku, umiestniť rozbaľovaciu ponuku, zabezpečiť, aby ponuka fungovala tak, ako má, a naformátovať túto stránku bez skutočného textového obsahu. Potom pridáte jeden zo sady nástrojov Zástupný symbol obsahu do. Bez tohto prvku nebude hlavná stránka fungovať. Pomenujte túto špeciálnu stránku zmysluplným názvom, napríklad masterpage.html. Potom vytvoríte jednu alebo viac webových stránok, ktoré neposkytujete s rozložením.
Zadáte text, voliteľne pridáte obrázok a uložíte túto stránku. U týchto stránok s obsahom sa pozeráte na dolnú časť Vlastnosti v poli Hlavná stránka. Tam aktivujete možnosť UseMasterPage. Ak ste povolili začiarknutie, zobrazí sa nové pole, v ktorom vyberiete názov zamýšľanej hlavnej stránky. Môžete použiť viac vzorových stránok. V tomto okamihu neuvidíte nič, iba ak stlačíte tlačidlo Náhľad všimnete si, že obsah tejto stránky je prehľadne zverejnený v zástupcovi obsahu vybranej hlavnej stránky.
Vložte médium
Pomocou aplikácie RocketCake pridávate videá z YouTube kliknutím na položku v sade nástrojov YouTube video vybrať. Potom zadajte webovú adresu videa do okna Vlastnosti. Rovnako ľahké je pridať fotogalériu. Po vás Galéria obrázkov vybraté zo sady nástrojov, vyberte rôzne fotografie v poliach ImageFile1, ImageFile2 a tak ďalej. Existuje niekoľko spôsobov, ako zväčšiť fotografie v galérii. Môžete ich napríklad otvoriť v novom okne vo vyskakovacom okne, ale najviac sa nám páči ako veľký obrázok v samostatnej vrstve.
Publikovať
Skončil si? Potom môžete web zverejniť na internete alebo na lokálnom disku. RocketCake je vybavený funkciou ftp, ktorá prehľadne umiestňuje všetko na serveri do priečinka, ktorý pre to poskytuje váš poskytovateľ. Vyplňte ftp adresu, užívateľské meno a heslo. V prípade potreby použite túto možnosť Uložiť heslo pre uloženie hesla. Keď zverejňujete webovú stránku na svojom pevnom disku, môžete navštíviť domovskú stránku otvorením súboru index.html v internetovom programe.
