Urobte si vlastnú, minimalistickú úvodnú stránku!: 10 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:55

Museli ste prejsť na väčšinou vzdialenú prácu, pretože sa z COVID-19 stala vec? To isté!

Práca z domu s našimi počítačmi a cez internet často znamená, že musíme sledovať množstvo webových stránok pre prácu, do školy alebo dokonca … pre zábavu!

Záložky nie sú vždy na splnenie úlohy, a čo tak urobiť si vlastnú úvodnú stránku ušitú na mieru práve vám, so všetkými potrebnými odkazmi, ktorá sa otvorí vo vašom webovom prehliadači vždy, keď ju budete potrebovať?

Čo budete potrebovať:

• Počítač (v našom je operačný systém Windows, ale bude fungovať každý moderný počítač).
• Pripojenie na internet.
• Nová inštalácia textového editora Notepad ++.

Keď budete pripravení, začnime používať našu vlastnú šablónu úvodnej stránky … Alebo si vytvorte vlastnú od začiatku!

Krok 1: Vytvorte úvodnú stránku ALEBO si stiahnite našu prispôsobenú šablónu

V tomto prípade máte dve možnosti:

1. Stiahnite si našu prispôsobenú šablónu (pokyny v tomto kroku postupujú trochu neskôr) alebo,
2. Postupujte podľa tohto základného sprievodcu úvodnou stránkou; krok za krokom vás prevedie stavebnými kameňmi jednoduchej úvodnej stránky - a to je príručka, ktorou sme sa riadili pri vytváraní tejto vlastnej úvodnej stránky!

Prečo odporúčať návod … v návode? Naša práca ako sprostredkovateľov MakerSpace vám nielen ukáže, ako robiť veci: ale tiež vás spojí s kultúrou a zdrojmi Maker, ktoré sú k dispozícii. Táto príručka je jedným z miest, kde začínalo veľa návrhárov úvodných stránok, a preto malo zmysel sa o ňu s vami podeliť!

Ak máte čas, pokračujte možnosťou č. 2, ale ak nie, môžete sa kedykoľvek obrátiť na základného sprievodcu úvodnou stránkou! V rámci tohto tutoriálu budeme len predpokladať, že sťahujete našu vlastnú šablónu! Ak si ho chcete stiahnuť:

1. Otvorte naše úložisko DIY_startpage na Github.
2. Kliknutím na veľké zelené tlačidlo Kód otvoríte rozbaľovaciu ponuku.
3. Kliknutím na položku Stiahnuť ZIP stiahnete všetky súbory projektu.
4. Extrahujte všetky súbory zo súboru ZIP, ktorý ste práve stiahli, na vami zvolené miesto.

GitHub je webová stránka, kde programátori a dizajnéri z celého sveta zdieľajú svoj kód a výtvory s ostatnými: umožňuje vám tiež spolupracovať s ostatnými na projektoch všetkých druhov. V konečnom dôsledku je to úžasný nástroj, ktorý by mal každý výrobca vedieť!

Teraz spustite prehliadač, ktorý si vyberiete: Firefox sa mi veľmi páči, ale naša šablóna by mala fungovať takmer na každom nedávnom webovom prehliadači, takže môžete používať Edge, Chrome alebo Safari!

Nakoniec otvorte súbor „DIY_startpage.html“vo svojom prehliadači A v programe Poznámkový blok ++ a začnime ho prispôsobovať!

Krok 2: Vytvorte si zoznam svojich obľúbených položiek

Mať úvodnú stránku je skvelé. Užitočná úvodná stránka je ešte lepšia a práve teraz naša vyzerá trochu prázdna!

Aké veci pravidelne kontrolujete a o ktorých si musíte dávať pozor? Aké webcomics čítate ráno? Aký spravodajský web by ste radi kontrolovali? To sú veci, ktoré by vám mali pristať na úvodnej stránke.

V tomto návode použijem iba niektoré z mojich obľúbených. Varovanie pred spojlerom, veľa odkazov z knižnice! Ale tiež niektorí z mojich obľúbených Tvorcov pre inšpiráciu a niektoré z mojich obľúbených zábav. Všetky tieto položky nájdete nižšie s odkazom, ako príklad!

Správy a čítanie

• Digitálne noviny
• Digitálne knihy
• Digitálne časopisy

Učenie

• Školy W3C
• Udemy
• Jazyky manga

Hudba

• Počúvajte miestne
• Prieskumník piesní
• Hudobné rádiá Jamendo

Kultúra tvorcov

• Core77
• Lumecluster
• Melapropizmy

Vybral som tri svoje obľúbené položky pre každú kategóriu, ale mali by ste byť schopní bez problémov vybrať viac alebo menej - rozloženie úvodnej stránky sa automaticky prispôsobí počtu alebo zdrojom!

Hneď ako budete mať uvedené všetky svoje obľúbené položky, nechajte ich na minútu bokom a pracujte na tom, aby bola naša generická šablóna úvodnej stránky o niečo viac.

Krok 3: Prispôsobte si písmo

Spustite program Poznámkový blok ++, kliknutím na položku Súbor> Otvoriť otvorte súbor „DIY_startpage.html“. To, čo si prezeráte, sa líši od stránky vo vašom prehliadači, však? Je to kód vašej stránky a prehliadače tento kód interpretujú, aby vyzeral o niečo príjemnejšie pre oči a vykonával všetky potrebné činnosti.

Kód pre náš projekt úvodnej stránky je napísaný v dvoch príbuzných jazykoch: HTML a CSS. HTML je zvyčajne zodpovedné za obsah stránky a CSS za vzhľad stránky.

Na prispôsobenie úvodnej stránky vyhľadajte túto prvú časť:

html {

zarovnávacie položky: stred; farba: #313131; displej: flex; písmo: 22px "Courier New", Courier, monospace; výška: 100%; justify-content: center; okraj: 0; }

Táto časť našej úvodnej stránky sa zameriava na všeobecný vzhľad položiek na našej stránke. Čiara:

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

ide konkrétne o písmo, ktoré používame na úvodnej stránke, a má dva parametre, ktoré definujú, ako bude text na vašej stránke vyzerať: veľkosť a rodina písem.

• veľkosť - To je to, čo je "22 pixelov". Veľkosť vášho textu na obrazovke je definovaná v „px“, čo je skratka pre pixely.
• rodina písem - Tu uvádzame písma, ktoré by sme chceli použiť. Obvykle je vhodné uviesť niekoľko z nich, z písma, ktoré skutočne chcete použiť. Tieto písma závisia od prehliadača, ktorý používate, takže ak nie je konkrétny k dispozícii, prehliadač vyskúša ďalšie a podobne.

Stránka CSS Web Safe Fonts od w3schools má veľký zoznam kombinácií písem, ktoré vyzerajú skvele, držia sa štýlu, ktorý hľadáte a budú fungovať vo väčšine moderných prehliadačov.

Môžete napríklad nahradiť:

„Courier New“, Courier, monospace;

s:

„Palatino Linotype“, „Book Antiqua“, Palatino, pätka;

alebo:

„Comic Sans MS“, kurzívový, bezpatkový;

Uložte súbor a obnovte stránku v prehliadači, aby ste videli zmeny! Nepáči sa ti to? Žiaden problém! Hrajte sa s CSS Web Safe Fonts, kým nenájdete kombináciu, ktorá sa vám páči.

Krok 4: Prispôsobte si cenovú ponuku

V súbore HTML vyhľadajte túto sekciu:

Toto je vaša úvodná stránka! Užite si to

Vyberte si citát, ktorý sa vám páči, a nahraďte kód! Vybral som si svoje

Ešte raz na porušenie

Rozloženie vašej úvodnej stránky by sa malo prispôsobiť za behu, aby zodpovedalo vašej ponuke, hneď ako stránku znova načítate vo svojom prehliadači: vo Firefoxe to znamená stlačenie klávesov CTRL+R na klávesnici alebo kliknutie na ikonu Znova načítať. Vyberte si citát, ktorý sa vám páči (alebo niečo neskôr!) A pustite sa do prispôsobovania sekcií svojej úvodnej stránky!

Krok 5: Prispôsobte si sekcie

Teraz, keď ste našli kombináciu písem, ktorá sa vám páči, a máte skvelý citát, ktorý vás môže inšpirovať, pokračujme a prispôsobme si sekcie.

Ak ste si stiahli našu úvodnú stránku z Githubu, máte k dispozícii 6 sekcií na prispôsobenie: pôvodný sprievodca má iba 4, ale keďže v poslednom čase sa čoraz viac aspektov nášho života presúva online, pokračoval som a pridal som ďalšie pre prípad.

Nájdite prvú sekciu a zadajte, čo potrebujeme. Pripomínam, že moja prvá sekcia je „Správy a čítanie“:

Keď je váš súbor stále otvorený v programe Poznámkový blok ++, nájdite nasledujúci riadok kódu:

Sekcia 1

a nahraďte ju kategóriou vo svojom zozname, ktorú si myslíte, že budete najviac používať.

Pretože mnohí z nás sú zvyknutí čítať dokumenty zľava zhora, vaše oči sa tam môžu prirodzene míňať - využite to a nechajte si to najdôležitejšie! Ale ak pochádzate z kultúry s iným smerom čítania alebo ak len pracujete inak, prispôsobte si to pre seba. Je to predsa vaša úvodná stránka: viete, čo je pre vás najlepšie!

Jeden názov sekcie dole, päť do konca! Vyhľadajte riadok kódu, ktorý hovorí:

Oddiel 2

Zmeňte to a potom hľadajte názvy sekcií a meňte ich, kým sa nedostanete na koniec zoznamu. Ak nepoužívate všetky sekcie, nechajte ich byť! Na konci tohto tutoriálu tiež urobíme malé čistenie.

Po dokončení prispôsobovania sekcií uložte zmeny v programe Poznámkový blok ++ a znova načítajte stránku vo svojom prehliadači. Všetky názvy sekcií by sa mali zobrazovať tam, kde ste ich uviedli: teraz môžeme prispôsobiť odkazy v každej sekcii!

Krok 6: Prispôsobte si odkazy

Prispôsobenie odkazov v každej sekcii je o niečo viac zapojené, ale určite nie oveľa ťažšie!

Tentokrát nemeníme iba názov odkazov, ale aj to, čo s nimi môžete robiť! Na každú položku v každej sekcii bude možné kliknúť a prepojiť s ňou inú webovú stránku. Bonus, môžete sa tiež rozhodnúť, či ho chcete otvoriť v novom okne alebo nie!

Najprv vyhľadajte riadok, ktorý vyzerá takto:

link_one_name

Vyberte bit „link_one_name“a nahraďte ho svojim vlastným textom. Napríklad prvý odkaz v prvej sekcii na základe môjho zoznamu z kroku X je „Digitálne noviny“, takže dostaneme:

Digitálne noviny

Ďalej pracujme na prispôsobení odkazu! Nahraďte bit „link.one“prvým odkazom. Pre mňa to bude odkaz na naše digitálne noviny, takže bude vyzerať takto:

Digitálne noviny

Uložte svoju prácu do textového editora a znova načítajte stránku vo svojom prehliadači

Teraz by ste mali mať možnosť kliknúť na prvý odkaz, ktorý ste si prispôsobili. Ak to nezabralo, je to v poriadku! Začnite znova alebo sledujte svoje kroky, kým sa odkaz neotvorí, keď naň kliknete.

Keď váš prvý odkaz začne fungovať … Všetko, čo musíte urobiť, je opakovať tieto kroky pre každý odkaz v každej sekcii, kým si neprispôsobíte všetky názvy a odkazy na svojej úvodnej stránke! Má to však iba jeden háčik: šance sú, že keď kliknete na odkaz, vaša úvodná stránka zmizne, pretože sa nový odkaz otvorí na tej istej karte alebo v rovnakom okne.

Nie je to veľmi pohodlné … Čo tak zmeniť spôsob otvárania odkazov? Použime ako príklad náš prvý odkaz! Pravdepodobne si pamätáte, že tu informujeme váš prehliadač, aby otvoril odkaz, keď naň kliknete:

Digitálne noviny

Ale hádajte čo - aj tu rozhodujeme o tom, ako sa odkaz otvorí! Zmeniť na:

Digitálne noviny

Teraz uložte svoju prácu a znova načítajte stránku vo svojom prehliadači: odkaz sa teraz otvorí na novej karte, keď naň kliknete! Tak budete môcť mať svoju úvodnú stránku otvorenú, kedykoľvek to budete potrebovať.

Krok 7: Pridajte obrázok na svoju úvodnú stránku

Teraz, keď sú všetky naše odkazy nastavené, je čas ozdobiť našu úvodnú stránku! Táto šablóna obsahuje priestor pre vlastný obrázok na pravej strane obrazovky. Teraz späť v programe Poznámkový blok ++, vyhľadajte tento riadok:

úplne na konci šablóny. Vyberte obrázok, ktorý sa vám páči, presuňte ho do rovnakého priečinka ako súbor úvodnej stránky a nahraďte súbor „library_picture.jpg“názvom súboru s obrázkom. Ak je napríklad názov môjho súboru „your_picture.jpg“, riadok sa zmení na:

Uložte zmeny a znova načítajte úvodnú stránku vo svojom prehliadači.

Pretože kód vašej úvodnej stránky a vaše obrázkové súbory sú v rovnakom priečinku, obrázok by sa mal po obnovení stránky načítať automaticky. Ak tomu tak nie je, skontrolujte názov súboru - v tom zvyčajne robím chybu!

Tapety pre smartfóny sa k tomuto projektu skvele hodia. Vo všeobecnosti na tom nezáleží! Rozloženie našej úvodnej stránky sa však prispôsobí bez ohľadu na to, čo na ňu hodíte.

Ak sa zobrazí váš obrázok, gratulujeme, ste skoro hotoví!

Krok 8: Trochu vyčistite

Ak máte ďalšie sekcie, ktoré v tom čase nepoužívate, pokojne ich odstráňte! Povedzme napríklad, že nepoužívate Časť 6. Nájdite:

• Oddiel 6
• Položka 1
• Položka 2
• Položka 3

Vyberte a odstráňte tieto riadky, uložte súbor a obnovte ho v prehliadači, aby ste sa presvedčili, že je všetko preč.

Toto je zvyčajne krok, kde všetko zlomím, pretože idem príliš rýchlo, takže ak niečo náhle nefunguje, zapamätajte si: zhlboka sa nadýchnite a vráťte späť to, čo ste práve urobili, pomocou kombinácie klávesov CTRL+Z na klávesnici!

Krok 9: Vytvorenie skutočnej úvodnej stránky

Teraz, keď úvodná stránka otvára všetky požadované odkazy a vyzerá tak, ako má vyzerať, je načase ju otvoriť po spustení prehliadača!

V tom okamihu by som rád držal všetko mimo pracovnej plochy počítača tak, že vystrihnem a prilepím priečinok úvodnej stránky do priečinka Dokumenty systému Windows. Takže ak ste skončili s prácou na svojej úvodnej stránke, urobte to!

Ďalej: s najväčšou pravdepodobnosťou sa váš prehliadač otvorí pomocou vášho obľúbeného vyhľadávacieho nástroja alebo možno dokonca prázdnej stránky.

Pokyny na prispôsobenie Firefoxu a ďalších prehliadačov nájdete nižšie:

• Pokyny pre Firefox
• Pokyny pre prehliadač Google Chrome
• Pokyny pre Safari
• Pokyny pre Microsoft Edge

Keď budete postupovať podľa pokynov pre prehliadač, zatvorte ho a znova ho otvorte. Ak sa pri spustení prehliadača zobrazí vaša úvodná stránka, urobili ste to!

Ak to nezabralo, znova si prečítajte pokyny pre svoj prehliadač a uistite sa, že vám nič neuniklo. Dochádza k najhoršiemu, potom po uložení všetkej práce reštartujte počítač. 9 krát z 10, to všetko vyrieši!

Krok 10: Hotovo! A chceli by ste vedieť viac?

Blahoželáme vám k dokončeniu úvodnej stránky! Možno to tak nevyzerá, ale práve ste sa naučili kódovať jeden z najdôležitejších stavebných prvkov webovej stránky tak, ako som to robil ja … Asi pred 20 rokmi!

Ak vás to bavilo a chceli by ste sa dozvedieť viac o úvodných stránkach, je to hlboká králičia diera, ktorú musíte nasledovať! Tu je malý výber, ktorý vám pomôže na vašej ceste úvodnou stránkou:

• Skúsili ste základného sprievodcu úvodnou stránkou? Dobrá správa, je toho viac, odkiaľ to pochádza! Pozrite sa na ďalšie príručky / stpg /, kde nájdete ďalšie inšpirácie a pokročilé funkcie!
• V knižnici Johnson County Library nájdete knihy o HTML a CSS - a so svojou knižničnou kartou alebo elektronickou kartou máte prístup aj k elektronickým knihám!
• Karta vašej knižnice vám tiež umožňuje prístup do služby Udemy a obsahuje niekoľko veľmi kompletných tried HTML, CSS a webového dizajnu.

Ak ste na svoj výtvor veľmi hrdí, prečo si ho neskopírujete a nezdieľate s nami na Twitteri alebo Instagrame s hashtagom #jocomakes? Vždy sme radi, keď vidíme, čo naši patróni vymysleli!