Tee itsellesi mukautettu, minimalistinen aloitussivu!: 10 askelta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 08:59

Oletko joutunut siirtymään lähinnä etätyöhön sen jälkeen, kun COVID-19: stä tuli asia? Sama!

Kotoa käsin työskenteleminen tietokoneillamme ja Internetin välityksellä tarkoittaa usein sitä, että meidän on seurattava paljon verkkosivustoja töihin, kouluun tai jopa… huvin vuoksi!

Kirjanmerkit eivät aina ole tehtävänsä mukaisia, joten entäpä jos teet itsellesi räätälöidyn aloitussivun, jossa on kaikki tarvitsemasi linkit, ja joka avautuu selaimellesi aina, kun sitä tarvitset?

Tässä on mitä tarvitset:

• Tietokone (meillä on Windows, mutta mikä tahansa nykyaikainen tietokone tekee sen).
• Yhteys Internetiin.
• Uusi teksti -editorin Notepad ++ asennus.

Kun olet valmis, aloitetaan oman aloitussivumallimme käyttäminen… Tai luoda oma alusta!

Vaihe 1: Luo aloitussivu TAI lataa mukautettu mallimme

Tässä vaiheessa sinulla on kaksi vaihtoehtoa:

1. Lataa mukautettu mallimme (ohjeet seuraavat hieman myöhemmin tässä vaiheessa) tai,
2. Noudata tätä aloitussivun perusopasta; se opastaa sinut yksinkertaisen aloitussivun rakennuspalikoiden läpi askel askeleelta - ja tätä opasta seurasimme tämän mukautetun aloitussivun rakentamisessa!

Miksi suositella opetusohjelmaa… opetusohjelmassa? Työmme MakerSpace -fasilitaattoreina ei ole vain näyttää sinulle, miten tehdä asioita, vaan myös yhdistää sinut Maker -kulttuuriin ja siellä oleviin resursseihin. Tämä opas on yksi paikoista, joissa monet aloitussivujen suunnittelijat aloittavat, joten oli järkevää jakaa se kanssasi!

Jos sinulla on aikaa, jatka vaihtoehtoa #2, mutta jos et, voit aina katsoa aloitussivun perusoppaan myöhemmin! Tässä opetusohjelmassa oletamme vain, että lataat mukautetun mallimme! Voit ladata sen seuraavasti:

1. Avaa DIY_startpage -arkistomme Githubissa.
2. Avaa avattava valikko napsauttamalla isoa vihreää koodipainiketta.
3. Napsauta Lataa ZIP ladataksesi kaikki projektin tiedostot.
4. Pura kaikki tiedostot juuri lataamastasi ZIP -tiedostosta haluamaasi paikkaan.

GitHub on verkkosivusto, jossa ohjelmoijat ja suunnittelijat ympäri maailmaa jakavat koodinsa ja luomuksensa muiden kanssa: sen avulla voit myös tehdä yhteistyötä muiden kanssa kaikenlaisissa projekteissa. Bottom line on, se on loistava työkalu jokaisen Maker pitäisi tietää!

Käynnistä nyt haluamasi selain: Pidän todella Firefoxista, mutta mallimme pitäisi toimia lähes kaikissa uusimmissa selaimissa, joten voit käyttää Edgeä, Chromea tai Safaria!

Avaa lopuksi "DIY_startpage.html" -tiedosto selaimessasi JA Notepad ++: ssa ja aloita sen mukauttaminen!

Vaihe 2: Listaa suosikkisi

Aloitussivun saaminen on hienoa. Hyödyllinen aloitussivu on vielä parempi, ja tällä hetkellä omamme näyttää hieman tyhjältä!

Mitä asioita tarkistat säännöllisesti ja mitä sinun on seurattava? Mitä web -sarjakuvia luet aamulla? Minkä uutissivuston haluat tarkistaa? Nämä ovat asioita, joiden pitäisi laskeutua aloitussivullesi.

Tässä opetusohjelmassa käytän vain joitain suosikkejani. Spoilerivaroitus, paljon linkkejä kirjastosta! Mutta myös joitain suosikkikoneistani inspiraatiota varten ja joitakin suosikkiviihteistäni. Löydät kaikki nämä kohteet alla olevasta linkistä esimerkkinä!

Uutiset ja lukeminen

• Digitaaliset sanomalehdet
• Digitaaliset kirjat
• Digitaaliset aikakauslehdet

Oppiminen

• W3C -koulut
• Udemy
• Mangon kielet

Musiikki

• Kuuntele paikallista
• Laulun räjäyttäjä
• Jamendo -musiikkiradiot

Tekijän kulttuuri

• Core77
• Lumecluster
• Melapropismit

Valitsin kolme suosikkiani kustakin luokasta, mutta sinun pitäisi pystyä valitsemaan enemmän tai vähemmän ilman ongelmia - aloitussivusi asettelu mukautuu automaattisesti numeroon tai resursseihin!

Kun olet listannut kaikki suosikkisi, jätämme ne sivuun hetkeksi ja pyrimme tekemään yleisestä aloitussivumallistasi hieman enemmän sinua.

Vaihe 3: Muokkaa fonttiasi

Käynnistä Notepad ++, avaa "DIY_startpage.html" -tiedosto napsauttamalla Tiedosto> Avaa. Se, mitä katselet, näyttää hyvin erilaiselta kuin selaimesi sivu, eikö niin? Se on sivusi koodi, ja selaimet tulkitsevat sen, jotta se näyttää hieman silmäystävällisemmältä ja tekevät kaikki tarvitsemamme asiat.

Aloitussivuprojektimme koodi on kirjoitettu kahdella toisiinsa liittyvällä kielellä: HTML ja CSS. HTML on yleensä vastuussa sivun sisällöstä ja CSS sivun ulkoasusta.

Muokkaa aloitussivua tästä ensimmäisestä osiosta:

html {

kohdista kohdat: keskelle; väri: #313131; näyttö: flex; fontti: 22px "Courier New", Courier, monospace; korkeus: 100%; perustella sisältö: keskellä; marginaali: 0; }

Aloitussivumme tämä osio keskittyy sivustomme kohteiden yleiseen ulkoasuun. Linja:

fontti: 22px "Courier New", Courier, monospace;

koskee nimenomaan aloitussivulla käyttämäämme fonttia ja sillä on kaksi parametria, jotka määrittävät, miltä sivusi teksti näyttää: koko ja kirjasinperhe.

• koko - Tämä on se "22px". Näytössä näkyvän tekstin koko on määritelty "px" -kokoiseksi, lyhenne pikseleistä.
• kirjasinperhe - Siinä luetellaan fontit, joita haluaisimme käyttää. Yleensä on hyvä luetella useita fontteja, joista todella haluat käyttää yleisimpiä perheitä. Nämä fontit riippuvat käyttämästäsi selaimesta, joten jos tärkein ei ole käytettävissä, selain yrittää seuraavaa ja niin edelleen.

W3schoolsin CSS Web Safe Fonts -sivulla on loistava luettelo fonttiyhdistelmiä, jotka näyttävät hyviltä, pitävät kiinni etsimästäsi tyylistä ja toimivat useimmissa nykyaikaisissa selaimissa.

Voit esimerkiksi korvata:

"Courier New", Courier, yksitilainen;

kanssa:

"Palatino Linotype", "Book Antiqua", Palatino, serif;

tai:

"Comic Sans MS", kursiivinen, sans-serif;

Tallenna tiedostosi ja päivitä selaimesi sivu nähdäksesi muutokset! Etkö pidä siitä? Ei ongelmaa! Pelaa CSS Web Safe -fonttien avulla, kunnes löydät haluamasi yhdistelmän.

Vaihe 4: Muokkaa otsikkolainaustasi

Etsi tämä osio HTML -tiedostostasi:

Tämä on aloitussivusi! Nauttia

Valitse haluamasi tarjous ja vaihda koodi! Omani vuoksi valitsin

Vielä kerran rikkomuksesta

Aloitussivun asettelun pitäisi sopeutua nopeasti vastaamaan lainaustasi heti, kun lataat sivun uudelleen selaimessasi: Firefoxissa se tarkoittaa näppäimistön CTRL+R -näppäimen painamista tai Lataa uudelleen -kuvaketta. Valitse tarjous, josta pidät nyt (tai valitse jotain myöhemmin!), Ja ryhdymme mukauttamaan aloitussivusi osioita!

Vaihe 5: Muokkaa osiasi

Nyt kun olet löytänyt haluamasi fonttiyhdistelmän ja sinulla on loistava lainaus, joka inspiroi sinua, jatketaan ja muokataan osioita.

Jos latasit aloitussivumme Githubista, sinulla on 6 muokattavaa osiota: alkuperäisessä oppaassa on vain 4, mutta koska yhä useammat elämämme piirteet ovat siirtyneet verkossa viime aikoina, jatkoin ja lisäsin lisää joka tapauksessa.

Etsi ensimmäinen osa ja kirjoita vain mitä tarvitsemme. Muistutuksena ensimmäinen osani on "Uutiset ja lukeminen":

Kun tiedostosi on edelleen auki Notepad ++: ssa, etsi seuraava koodirivi:

Osa 1

ja korvaa se luettelossasi olevalla luokalla, jota käytät eniten.

Koska monet meistä ovat tottuneet aloittamaan asiakirjojen lukemisen vasemmasta yläkulmasta, sinne silmäsi voivat luonnollisesti mennä - joten hyödynnä se ja pidä tärkein menemme sinne! Mutta jos tulet kulttuurista, jolla on erilainen lukusuunta, tai jos työskentelet vain eri tavalla, muokkaa tätä itsellesi. Se on lopulta aloitussivusi: tiedät mikä on sinulle parasta!

Yksi jakso otsikko alas, viisi jäljellä! Etsi koodirivi, joka sanoo:

Osasto-2

Muuta sitä, etsi sitten osioiden otsikot ja muuta niitä, kunnes pääset luettelosi loppuun. Jos et käytä kaikkia osioita, jätä ne rauhaan! Teemme myös pienen siivouksen tämän opetusohjelman lopussa.

Kun olet muokannut osioita, tallenna muutokset Notepad ++: een ja lataa sivu uudelleen selaimeesi. Kaikkien osioiden otsikkojen pitäisi näkyä missä laitat ne: nyt voimme muokata kunkin osion linkkejä!

Vaihe 6: Muokkaa linkkejäsi

Kunkin osion linkkien mukauttaminen on hieman enemmän, mutta ei varmasti paljon vaikeampaa!

Tällä kertaa emme muuta vain linkkien nimeä, vaan myös mitä voit tehdä niillä! Jokaisen osion jokaisesta kohteesta tulee napsautettava, linkki eri verkkosivustoon. Bonus, voit myös päättää, haluatko sen avautuvan uuteen ikkunaan vai ei!

Etsi ensin rivi, joka näyttää tältä:

linkin_nimi

Valitse "link_one_name" -bitti ja korvaa se omalla tekstilläsi. Esimerkiksi ensimmäisen linkin ensimmäinen osa, joka perustuu luetteloni vaiheesta X, on "Digitaaliset sanomalehdet", joten saamme:

Digitaaliset sanomalehdet

Seuraavaksi, muokataan linkkiä! Korvaa "link.one" -bitti ensimmäisellä linkilläsi. Minusta se on linkki digitaalisiin sanomalehtiimme, joten se näyttää tältä:

Digitaaliset sanomalehdet

Tallenna työsi tekstieditorissa ja lataa sivu uudelleen selaimeesi

Sinun pitäisi nyt pystyä napsauttamaan ensimmäistä mukauttamaasi linkkiä. Jos ei kestänyt, ei hätää! Aloita alusta tai seuraa vaiheitasi, kunnes linkki avautuu, kun napsautat sitä.

Kun saat ensimmäisen linkin toimimaan… No, sinun tarvitsee vain toistaa nämä vaiheet jokaiselle linkille jokaisessa osassa, kunnes olet mukauttanut kaikki aloitussivusi nimet ja linkit! On kuitenkin vain yksi saalis: mahdollisuudet ovat, kun napsautat linkkiä, aloitussivusi katoavat, kun uusi linkki avautuu samaan välilehteen tai ikkunaan.

Se ei ole kovin kätevää… Entä miten muutat tapaa, jolla linkit avautuvat? Käytämme ensimmäistä linkkiämme esimerkkinä! Muistat varmaan, että tässä kerrotaan selaimellesi avata linkki, kun napsautat sitä:

Digitaaliset sanomalehdet

Mutta arvaa mitä - siellä myös päätämme, miten linkki avataan! Vaihda se:

Digitaaliset sanomalehdet

Tallenna nyt työsi ja lataa sivu uudelleen selaimeesi: linkki avautuu nyt uudella välilehdellä, kun napsautat sitä! Näin voit pitää aloitussivusi auki aina, kun sitä tarvitset.

Vaihe 7: Lisää kuva aloitussivullesi

Nyt kun kaikki linkkimme on määritetty, on aika koristaa aloitussivumme! Tässä mallissa on tilaa mukautetulle kuvalle näytön oikealla puolella. Nyt takaisin Notepad ++ -sovellukseen, etsi tämä rivi:

aina mallin lopussa. Valitse haluamasi kuva, siirrä se samaan kansioon kuin aloitussivusi tiedosto ja korvaa "library_picture.jpg" kuvasi tiedostonimellä. Jos esimerkiksi tiedoston nimi on "your_picture.jpg", rivistä tulee seuraava:

Tallenna muutokset ja lataa aloitussivu uudelleen selaimeesi.

Koska aloitussivusi koodi ja kuvatiedostot ovat samassa kansiossa, kuvan pitäisi ladata automaattisesti, kun päivität sivun. Jos näin ei ole, tarkista tiedoston nimi - yleensä ymmärrän sen väärin!

Älypuhelimen taustakuvat sopivat hyvin tähän projektiin. Yleensä mikä tahansa pystysuora kuva (tai kuten hienot ihmiset sanovat "muotokuva-suuntainen kuva", jonka suhde on 16: 9)! Mutta aloitussivumme ulkoasu mukautuu riippumatta siitä, mitä heität.

Jos kuvasi näkyy, onnittelut, olet melkein valmis!

Vaihe 8: Puhdista hiukan

Jos sinulla on ylimääräisiä osioita, joita et käytä siinä vaiheessa, voit poistaa ne! Oletetaan esimerkiksi, että et käytä osaa 6. Etsi:

• Osa 6
• Kohta 1
• Kohta 2
• Kohta 3

Valitse ja poista nämä rivit, tallenna tiedosto ja päivitä tiedosto selaimessasi varmistaaksesi, että kaikki on poissa.

Tämä on yleensä vaihe, jossa rikkoon kaiken, koska menen liian nopeasti, joten jos jokin äkkiä ei toimi, muista: hengitä syvään ja kumoa tekemäsi näppäimistöllä CTRL+Z -näppäinyhdistelmällä!

Vaihe 9: Tee siitä todellinen aloitussivu

Nyt kun aloitussivu avaa kaikki haluamamme linkit ja näyttää siltä, miltä haluamme näyttää, on aika avata se, kun käynnistät selaimesi!

Tässä vaiheessa haluan pitää kaiken poissa tietokoneiden työpöydältä leikkaamalla ja liittämällä aloitussivun kansion Windowsin Asiakirjat -kansioon. Joten jos olet lopettanut aloitussivusi, tee se!

Seuraava: todennäköisesti selaimesi avautuu suosikkihakukoneellasi tai ehkä jopa tyhjällä sivulla.

Löydät ohjeet Firefoxin ja muiden selainten mukauttamiseen alta:

• Firefoxin ohjeet
• Google Chromen ohjeet
• Safarin ohjeet
• Microsoft Edgen ohjeet

Kun olet noudattanut selaimen ohjeita, sulje se ja avaa se uudelleen. Jos aloitussivusi näkyy selaimesi käynnistyessä, teit sen!

Jos se ei kestänyt, käy läpi selaimen ohjeet uudelleen ja varmista, että et missaa mitään. Pahempi käy pahimmassa tapauksessa ja käynnistä tietokone uudelleen kaiken työn tallentamisen jälkeen. 9 kertaa 10, se ratkaisee kaiken!

Vaihe 10: Kaikki valmis! Ja haluatko tietää enemmän?

Onnittelut aloitussivusi viimeistelystä! Se ei ehkä näytä paljon, mutta olet juuri oppinut koodaamaan yhden verkkosivuston tärkeimmistä rakennuspalikoista samalla tavalla kuin minä … Noin 20 vuotta sitten!

Jos pidit tästä ja haluat oppia lisää aloitussivuista, se on syvä kaninreikä! Tässä on pieni valikoima, joka auttaa sinua aloitussivusi matkalla:

• Oletko kokeillut perus -aloitusopasta? Hyviä uutisia, sieltä tulee muutakin! Tutustu muihin oppaisiin / stpg / saadaksesi lisää inspiraatiota ja lisäominaisuuksia!
• Tutustu Johnsonin piirikirjaston luetteloon, jossa on HTML- ja CSS -kirjoja - ja kirjastokortillasi tai e -kortillasi voit käyttää myös e -kirjoja!
• Kirjastokorttisi antaa sinulle myös pääsyn Udemyyn, ja siinä on myös erittäin täydellisiä HTML-, CSS- ja web -suunnittelutunteja.

Jos olet erittäin ylpeä luomuksestasi, miksi et ota kuvakaappausta ja jaa sitä kanssamme Twitterissä tai Instagramissa #jocomakes -hashtagin avulla? Olemme aina iloisia nähdessämme, mitä asiakkaamme keksivät!