Vytvořte si vlastní, minimalistickou úvodní stránku!: 10 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:18

Museli jste přejít na převážně vzdálenou práci, protože se z COVID-19 stala věc? Stejný!

Práce z domova s našimi počítači a přes internet často znamená, že musíme sledovat spoustu webových stránek pro práci, do školy nebo dokonce … pro zábavu!

Záložky ne vždy splňují daný úkol, co kdybyste si tedy vytvořili vlastní úvodní stránku přizpůsobenou právě vám, se všemi potřebnými odkazy a která se vám otevře ve webovém prohlížeči pokaždé, když ji budete potřebovat?

Co budete potřebovat:

• Počítač (v našem běží Windows, ale každý moderní počítač to zvládne).
• Připojení k internetu.
• Nová instalace textového editoru Notepad ++.

Až budete připraveni, začněme používat naši vlastní šablonu úvodní stránky … Nebo si vytvořte vlastní od začátku!

Krok 1: Vytvořte úvodní stránku NEBO si stáhněte naši přizpůsobenou šablonu

V tuto chvíli máte dvě možnosti:

1. Stáhněte si naši přizpůsobenou šablonu (v tomto kroku postupujte podle pokynů trochu později) nebo,
2. Postupujte podle této základní příručky úvodní stránky; krok za krokem vás provede stavebními bloky jednoduché úvodní stránky - a to je průvodce, kterého jsme se při sestavování této vlastní úvodní stránky drželi!

Proč doporučit tutoriál … v tutoriálu? Naše práce jako facilitátorů MakerSpace vám nejen ukáže, jak věci dělat: má vás také spojit s kulturou a zdroji Maker, které jsou k dispozici. Tato příručka je jedním z míst, kde mnoho návrhářů úvodních stránek začíná, a proto dávalo smysl se o ni s vámi podělit!

Pokud máte čas, pokračujte možností č. 2, ale pokud nemáte, můžete se na základní příručku úvodní stránky kdykoli podívat později! V tomto kurzu budeme předpokládat, že stahujete naši vlastní šablonu! Stažení:

1. Otevřete naše úložiště DIY_startpage na Githubu.
2. Kliknutím na velké zelené tlačítko Kód otevřete rozevírací nabídku.
3. Kliknutím na Stáhnout ZIP stáhnete všechny soubory projektu.
4. Extrahujte všechny soubory ze souboru ZIP, který jste právě stáhli, na místo, které si vyberete.

GitHub je web, kde programátoři a designéři z celého světa sdílejí svůj kód a výtvory s ostatními: umožňuje vám také spolupracovat s ostatními na projektech všeho druhu. Sečteno a podtrženo, je to skvělý nástroj, který by měl každý tvůrce znát!

Nyní spusťte svůj oblíbený prohlížeč: Firefox se mi opravdu líbí, ale naše šablona by měla fungovat téměř na každém nedávném webovém prohlížeči, takže můžete používat Edge, Chrome nebo Safari!

Nakonec otevřete soubor „DIY_startpage.html“ve svém prohlížeči A v programu Poznámkový blok ++ a můžeme jej začít přizpůsobovat!

Krok 2: Seznamte své oblíbené

Mít úvodní stránku je skvělé. Mít užitečnou úvodní stránku je ještě lepší a právě teď naše vypadá trochu prázdně!

Jaké věci pravidelně kontrolujete a o kterých je třeba mít přehled? Jaké webcomics čtete ráno? Jaký zpravodajský web rádi kontrolujete? To jsou věci, které by vám na úvodní stránce měly přistát.

Pro tento tutoriál použiji jen některé z mých oblíbených. Upozornění na spoiler, spousta odkazů z knihovny! Ale také některé z mých oblíbených tvůrců pro inspiraci a některé z mých oblíbených zábav. Všechny tyto položky najdete níže s odkazem, jako příklad!

Novinky a čtení

• Digitální noviny
• Digitální knihy
• Digitální časopisy

Učení se

• Školy W3C
• Udemy
• Jazyky manga

Hudba

• Poslouchejte místní
• Song Exploder
• Rádia Jamendo

Kultura tvůrce

• Jádro77
• Lumecluster
• Melapropismy

Vybral jsem tři své oblíbené pro každou kategorii, ale měli byste si bez problémů vybrat více nebo méně - rozložení vaší úvodní stránky se automaticky přizpůsobí počtu nebo zdrojům!

Jakmile budete mít všechny své oblíbené položky v seznamu, ponechte je na minutu stranou a pracujte na tom, aby naše obecná šablona úvodní stránky byla pro vás trochu více.

Krok 3: Přizpůsobte si písmo

Spusťte Poznámkový blok ++, kliknutím na Soubor> Otevřít otevřete soubor „DIY_startpage.html“. To, na co se díváte, vypadá úplně jinak než na stránce ve vašem prohlížeči, že? Je to kód vaší stránky a prohlížeče tento kód interpretují, aby vypadal trochu přívětivěji k očím a dělal všechny věci, které k tomu potřebujeme.

Kód pro náš projekt úvodní stránky je napsán ve dvou souvisejících jazycích: HTML a CSS. HTML obvykle odpovídá za obsah stránky a CSS za vzhled stránky.

Úvodní stránku si můžete přizpůsobit podle této první části:

html {

align-items: center; barva: #313131; displej: flex; písmo: 22px "Courier New", Courier, monospace; výška: 100%; justify-content: center; okraj: 0; }

Tato část naší úvodní stránky se zaměřuje na obecný vzhled položek na naší stránce. Linie:

písmo: 22px "Courier New", Courier, monospace;

je konkrétně o písmu, které používáme na úvodní stránce, a má dva parametry, které definují, jak bude text na vaší stránce vypadat: velikost a rodina písem.

• velikost - To je to, co je "22px". Velikost vašeho textu na obrazovce je definována v „px“, což je zkratka pro pixely.
• rodina písem - zde uvedeme písma, která bychom chtěli použít. Obvykle je dobré uvést několik z toho písma, pro které opravdu chcete použít nejobecnější rodinu. Tato písma se spoléhají na prohlížeč, který používáte, takže pokud není ten konkrétní k dispozici, prohlížeč zkusí další a tak dále.

Stránka CSS Web Safe Fonts od w3schools má skvělý seznam kombinací písem, které vypadají skvěle, drží se stylu, který hledáte, a budou fungovat ve většině moderních prohlížečů.

Můžete například nahradit:

„Courier New“, Courier, monospace;

s:

„Palatino Linotype“, „Book Antiqua“, Palatino, patkové;

nebo:

„Comic Sans MS“, kurzivní, bezpatkové;

Uložte soubor a obnovte stránku v prohlížeči, abyste viděli změny! Nelíbí se vám to? Žádný problém! Hrajte si s CSS Web Safe Fonts, dokud nenajdete kombinaci, která se vám líbí.

Krok 4: Přizpůsobte si nabídku titulu

V souboru HTML vyhledejte tuto část:

Toto je vaše úvodní stránka! Užívat si

Vyberte si citát, který se vám líbí, a nahraďte kód! Pro své vlastní jsem vybral

Ještě jednou na porušení

Rozložení vaší úvodní stránky by se mělo za běhu přizpůsobit tak, aby odpovídalo vaší nabídce, jakmile stránku znovu načtete do prohlížeče: ve Firefoxu to znamená stisknutí kláves CTRL+R na klávesnici nebo kliknutí na ikonu Znovu načíst. Vyberte si citát, který se vám líbí (nebo něco později!) A pusťte se do přizpůsobování sekcí vaší úvodní stránky!

Krok 5: Přizpůsobte si sekce

Nyní, když jste našli kombinaci písem, která se vám líbí, a máte skvělý citát, který vás může inspirovat, pokračujme a přizpůsobte své sekce.

Pokud jste si stáhli naši úvodní stránku z Githubu, máte k dispozici 6 sekcí k přizpůsobení: původní průvodce má pouze 4, ale protože se v poslední době stále více aspektů našich životů přesunulo online, pokračoval jsem a přidal další pro případ.

Najděte první část a zadejte, co potřebujeme. Připomínám, že moje první sekce je „Zprávy a čtení“:

Když je váš soubor stále otevřený v programu Poznámkový blok ++, najděte následující řádek kódu:

Sekce 1

a nahraďte ji kategorií ve svém seznamu, kterou si myslíte, že budete nejvíce používat.

Vzhledem k tomu, že mnozí z nás jsou zvyklí začít číst dokumenty z levého horního rohu, přirozeně se tam mohou dostat vaše oči - tak toho využijte a nechte nás to nejdůležitější! Pokud ale pocházíte z kultury s jiným směrem čtení, nebo pokud pracujete jinak, přizpůsobte si to sami. Nakonec je to vaše úvodní stránka: víte, co je pro vás nejlepší!

Jeden název sekce dolů, pět zbývá! Vyhledejte řádek kódu, který říká:

Sekce 2

Změňte to, pak hledejte názvy sekcí a měňte je, dokud se nedostanete na konec seznamu. Pokud nepoužíváte všechny sekce, nechte je být! Na konci tohoto tutoriálu také provedeme malé vyčištění.

Jakmile dokončíte přizpůsobení sekcí, stačí uložit změny v programu Poznámkový blok ++ a znovu načíst stránku do prohlížeče. Všechny názvy sekcí by se měly zobrazovat tam, kam je vložíte: nyní můžeme přizpůsobit odkazy v každé sekci!

Krok 6: Přizpůsobte si odkazy

Přizpůsobení odkazů v každé sekci je trochu více zapojené, ale rozhodně není mnohem těžší!

Tentokrát neměníme jen název odkazů, ale také to, co s nimi můžete dělat! Každá položka v každé sekci bude klikací, odkaz na jiný web. Bonus, můžete se také rozhodnout, zda chcete, aby se otevřel v novém okně, nebo ne!

Nejprve vyhledejte řádek, který vypadá takto:

link_one_name

Vyberte bit „link_one_name“a nahraďte jej vlastním textem. Například první odkaz v první sekci na základě mého seznamu z kroku X je „Digitální noviny“, takže dostaneme:

Digitální noviny

Dále pojďme pracovat na přizpůsobení odkazu! Nahraďte bit „link.one“svým prvním odkazem. Pro mě to bude odkaz na naše digitální noviny, takže to bude vypadat takto:

Digitální noviny

Uložte svou práci do textového editoru a znovu načtěte stránku do prohlížeče

Nyní byste měli mít možnost kliknout na první odkaz, který jste si přizpůsobili. Pokud to nezabralo, je to v pořádku! Začněte znovu nebo sledujte své kroky, dokud se odkaz po kliknutí neotevře.

Jakmile váš první odkaz začne fungovat … Vše, co musíte udělat, je opakovat tyto kroky pro každý odkaz v každé sekci, dokud si nepřizpůsobíte všechna jména a odkazy na úvodní stránce! Má to však jeden háček: šance je, že když kliknete na odkaz, vaše úvodní stránka zmizí, protože se nový odkaz otevře na stejné kartě nebo okně.

Není to příliš pohodlné … Co takhle změnit způsob otevírání odkazů? Použijme náš první odkaz jako příklad! Pravděpodobně si pamatujete, že zde řekneme vašemu prohlížeči, aby otevřel odkaz, když na něj kliknete:

Digitální noviny

Ale hádejte co - tam také rozhodujeme o tom, jak se odkaz otevře! Změnit na:

Digitální noviny

Nyní uložte práci a znovu načtěte stránku do prohlížeče: odkaz se nyní otevře na nové kartě, když na něj kliknete! Díky tomu můžete mít úvodní stránku otevřenou, kdykoli ji budete potřebovat.

Krok 7: Přidejte obrázek na úvodní stránku

Nyní, když jsou nastaveny všechny naše odkazy, je čas ozdobit naši úvodní stránku! Tato šablona má prostor pro vlastní obrázek na pravé straně obrazovky. Nyní zpět v programu Poznámkový blok ++, podívejte se na tento řádek:

úplně na konci šablony. Vyberte obrázek, který se vám líbí, přesuňte jej do stejné složky jako soubor úvodní stránky a nahraďte „library_picture.jpg“názvem souboru obrázku. Pokud je název mého souboru například „your_picture.jpg“, řádek se stane:

Uložte změny a znovu načtěte úvodní stránku do prohlížeče.

Protože kód vaší úvodní stránky a vaše obrázkové soubory jsou ve stejné složce, obrázek by se měl při aktualizaci stránky načíst automaticky. Pokud tomu tak není, zkontrolujte název vašeho souboru - tam to obvykle chápu špatně!

Tapety pro chytré telefony se k tomuto projektu skvěle hodí. Obecně platí, že jakýkoli svislý obrázek (nebo, jak se říká v fantazii, „obrázek orientovaný na výšku“s poměrem 16: 9)! Rozložení naší úvodní stránky se však přizpůsobí bez ohledu na to, co na ni hodíte.

Pokud se objeví váš obrázek, gratulujeme, jste téměř hotovi!

Krok 8: Trochu vyčistěte

Pokud máte další sekce, které v tu chvíli nepoužíváte, klidně je odstraňte! Řekněme například, že nepoužíváte oddíl 6. Najděte:

• Oddíl 6
• Položka 1
• Položka 2
• Bod 3

Vyberte a odstraňte tyto řádky, uložte soubor a obnovte jej v prohlížeči, abyste se ujistili, že je vše pryč.

Toto je obvykle krok, kdy všechno rozbiji, protože jdu příliš rychle, takže pokud něco najednou nefunguje, vzpomeňte si: zhluboka se nadechněte a zrušte to, co jste právě provedli, pomocí kombinace kláves CTRL+Z na klávesnici!

Krok 9: Nastavení skutečné úvodní stránky

Nyní, když úvodní stránka otevírá všechny odkazy, které chceme, a vypadá tak, jak chceme, aby vypadala, je čas ji otevřít při spuštění prohlížeče!

V tu chvíli bych rád udržoval vše mimo plochu počítače tím, že vystřihnu a vložím složku úvodní stránky do složky Dokumenty systému Windows. Pokud jste tedy na úvodní stránce skončili, udělejte to!

Další: s největší pravděpodobností se váš prohlížeč otevře pomocí vašeho oblíbeného vyhledávače nebo možná dokonce prázdné stránky.

Pokyny k přizpůsobení Firefoxu a dalších prohlížečů najdete níže:

• Pokyny pro Firefox
• Pokyny pro Google Chrome
• Pokyny pro Safari
• Pokyny pro Microsoft Edge

Jakmile budete hotovi podle pokynů pro svůj prohlížeč, zavřete jej a znovu otevřete. Pokud se při spuštění prohlížeče zobrazí vaše úvodní stránka, dokázali jste to!

Pokud to nezabralo, projděte si znovu pokyny pro svůj prohlížeč a ujistěte se, že vám nic neuniklo. Dochází k horšímu a po uložení veškeré práce restartujte počítač. 9krát z 10, tím je vše vyřešeno!

Krok 10: Hotovo! A chtěli byste vědět více?

Gratulujeme k dokončení úvodní stránky! Možná to nevypadá moc, ale právě jste se naučili kódovat jeden z nejdůležitějších stavebních kamenů webu tak, jak jsem to dělal já … Asi před 20 lety!

Pokud vás to bavilo a chtěli byste se dozvědět více o úvodních stránkách, je to hluboká králičí díra, kterou je třeba sledovat! Zde je malý výběr, který vám pomůže při cestě na úvodní stránku:

• Zkoušeli jste Průvodce základní úvodní stránkou? Dobrá zpráva, je toho mnohem víc! Podívejte se na další průvodce / stpg /, kde najdete další inspiraci a pokročilé funkce!
• Prohlédněte si katalog Johnson County Library pro knihy ve formátu HTML a CSS - a s vaší knihovní kartou nebo elektronickou kartou máte také přístup k elektronickým knihám!
• Vaše karta knihovny vám také umožňuje přístup do Udemy a má také velmi kompletní třídy HTML, CSS a webového designu.

Pokud jste na svůj výtvor velmi pyšní, proč si ho nenatočíte a nesdílíte s námi na Twitteru nebo Instagramu s hashtagem #jocomakes? Vždy jsme rádi, když vidíme, s čím naši patroni přicházejí!