Gjør deg selv til en tilpasset, minimalistisk startside !: 10 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:20

Har du måttet bytte til det meste fjernarbeid siden COVID-19 ble en ting? Samme!

Å jobbe hjemmefra med datamaskinene våre og over Internett betyr ofte at vi må holde oversikt over mange nettsteder for jobb, skole eller til og med … for moro skyld!

Bokmerker er ikke alltid opp til oppgaven, så hva med å lage oss en tilpasset startside som er skreddersydd for deg, med alle koblingene du trenger, og som åpnes i nettleseren din hver gang du trenger det?

Her er hva du trenger:

• En datamaskin (vår kjører Windows, men enhver moderne datamaskin vil gjøre det).
• En tilkobling til Internett.
• En fersk installasjon av tekstredigeringsprogrammet Notepad ++.

Når du er klar, la oss komme i gang med å bruke vår egen startside -mal … Eller lage din egen fra bunnen av!

Trinn 1: Opprett en startside ELLER Last ned vår tilpassede mal

På dette tidspunktet har du to alternativer:

1. Last ned vår tilpassede mal (instruksjonene følger litt senere i dette trinnet) eller,
2. Følg denne grunnleggende startsiden guide; det vil lede deg gjennom byggeklossene til en enkel startside trinn for trinn - og det er guiden vi fulgte for å bygge denne tilpassede startsiden!

Hvorfor anbefale en opplæring … i en opplæring? Vårt arbeid som MakerSpace -tilretteleggerne er ikke bare for å vise deg hvordan du gjør ting: Det er også å koble deg til Maker -kulturen og ressursene som finnes. Denne guiden er et av stedene der mange startsidesignere kommer i gang, så det var fornuftig å dele den med deg!

Hvis du har tid, kan du gå videre med alternativ nr. 2, men hvis du ikke har det, kan du alltid se den grunnleggende startsiden -guiden senere! For denne opplæringen antar vi bare at du laster ned vår tilpassede mal! For å laste den ned:

1. Åpne vårt DIY_startpage -depot på Github.
2. Klikk på den store grønne kode-knappen for å åpne en rullegardinmeny.
3. Klikk på Last ned ZIP for å laste ned alle filene for prosjektet.
4. Pakk ut alle filene fra ZIP -filen du nettopp lastet ned til et sted du ønsker.

GitHub er et nettsted der programmerere og designere over hele verden deler koden og kreasjonene sine med andre: det lar deg også samarbeide med andre om prosjekter av alle slag. Poenget er at det er et flott verktøy som alle Maker burde vite!

Start nå den valgte nettleseren din: Jeg liker Firefox, men malen vår skal fungere på omtrent alle nylige nettlesere, så bruk Edge, Chrome eller Safari!

Til slutt åpner du filen "DIY_startpage.html" i nettleseren OG i Notisblokk ++, og la oss begynne å tilpasse den!

Trinn 2: Lag dine favoritter

Å ha en startside er flott. Å ha en nyttig startside er enda bedre, og akkurat nå ser vår litt tom ut!

Hva er tingene du regelmessig sjekker ut og trenger å holde oversikt over? Hvilken webkomiker leser du om morgenen? Hvilket nyhetsnettsted liker du å sjekke? Dette er tingene som burde havne på startsiden din.

For denne opplæringen bruker jeg bare noen av mine favoritter. Spoiler advarsel, mange lenker fra biblioteket! Men også noen av mine favorittmakere for inspirasjon, og noen av mine favorittunderholdninger. Du finner alle disse elementene nedenfor med en lenke, som et eksempel!

Nyheter og lesing

• Digitale aviser
• Digitale bøker
• Digitale blader

Læring

• W3C skoler
• Udemy
• Mangospråk

Musikk

• Lytt lokalt
• Sangeksploder
• Jamendo musikkradioer

Skaperkultur

• Kjerne77
• Lumecluster
• Melapropismer

Jeg valgte tre av mine favoritter for hver kategori, men du burde kunne velge mer eller mindre enn det uten problemer - oppsettet på startsiden din vil automatisk tilpasse seg antallet eller ressursene!

Når du har listet alle favorittene dine, la oss sette dem til side i et minutt og jobbe med å gjøre vår generiske mal for startsiden litt mer.

Trinn 3: Tilpass skriften din

Start Notisblokk ++, klikk på Fil> Åpne for å åpne filen "DIY_startpage.html". Det du ser på ser veldig annerledes ut enn siden i nettleseren din, ikke sant? Det er koden til siden din, og nettlesere tolker denne koden for å få den til å se litt mer øyenvennlig ut og gjøre alt vi trenger den å gjøre.

Koden for vårt startsideprosjekt er skrevet på to beslektede språk: HTML og CSS. HTML er vanligvis ansvarlig for innholdet på en side, og CSS ansvarlig for utseendet på en side.

Se etter denne første delen for å tilpasse startsiden din:

html {

align-items: center; farge: #313131; display: flex; font: 22px "Courier New", Courier, monospace; høyde: 100%; justify-content: center; margin: 0; }

Denne delen av startsiden vår fokuserer på det generelle utseendet på elementene på siden vår. Køen:

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

handler spesifikt om skriften vi bruker på startsiden og har to parametere som definerer hvordan teksten på siden din vil se ut: størrelse og skriftfamilie.

• størrelse - Det er det "22px" er. Størrelsen på teksten på skjermen er definert i "px", kort for piksler.
• fontfamilie - Det er der vi viser opp skriftene vi ønsker å bruke. Det er vanligvis en god idé å liste opp flere, fra skriften du virkelig vil bruke den mest generiske familien. Disse skriftene er avhengige av nettleseren du bruker, så hvis den mest spesifikke ikke er tilgjengelig, vil nettleseren prøve den neste, og så videre.

CSS Web Safe Fonts -siden fra w3schools har en flott liste over skriftkombinasjoner som ser flotte ut, holder på stilen du leter etter og vil fungere i de fleste moderne nettlesere.

For eksempel kan du erstatte:

"Courier New", Courier, monospace;

med:

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

eller:

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

Lagre filen, og oppdater siden i nettleseren din for å se endringene! Liker du det ikke? Ikke noe problem! Spill med CSS Web Safe Fonts til du finner en kombinasjon du liker.

Trinn 4: Tilpass tittel sitatet

Se etter denne delen i HTML -filen din:

Dette er din startside! Nyt

Velg et tilbud du liker, og bytt ut koden! For min egen, jeg plukket

Nok en gang til bruddet

Oppsettet på startsiden din bør tilpasse seg i farten for å matche tilbudet ditt så snart du laster inn siden i nettleseren på nytt: i Firefox betyr det at du trykker CTRL+R på tastaturet eller klikker på Last inn -ikonet på nytt. Velg et tilbud du liker nå (eller velg noe senere!), Og la oss begynne å tilpasse delene på startsiden din!

Trinn 5: Tilpass seksjonene dine

Nå som du har funnet en skriftkombinasjon du liker, og du har et godt tilbud som kan inspirere deg, la oss fortsette og tilpasse seksjonene dine.

Hvis du lastet ned startsiden vår fra Github, har du seks seksjoner som du kan tilpasse: den originale guiden har bare 4, men siden flere og flere aspekter av våre liv har flyttet seg på nettet nylig, gikk jeg videre og la til flere for sikkerhets skyld.

Finn den første delen og skriv inn det vi trenger. Som en påminnelse er min første seksjon "Nyheter og lesing":

Med filen din fremdeles åpen i Notisblokk ++, finner du følgende kodelinje:

Seksjon 1

og bytt den ut med kategorien i listen du tror du kommer til å bruke mest.

Siden mange av oss er vant til å begynne å lese dokumenter fra øverst til venstre, kan det være at øynene dine naturligvis går - så dra fordel av det og behold det viktigste du trenger! Men hvis du kommer fra en kultur med en annen leseretning, eller hvis du bare jobber annerledes, kan du tilpasse dette selv. Det er tross alt startsiden din: du vet hva som er best for deg!

En seksjonstittel nede, fem igjen! Se etter kodelinjen som sier:

Avsnitt 2

Endre det, og fortsett å lete etter seksjonstitler og endre dem til du kommer til slutten av listen. Hvis du ikke bruker alle seksjonene, bare la dem være! Vi vil gjøre en liten opprydding på slutten av denne opplæringen også.

Når du er ferdig med å tilpasse seksjoner, bare lagre endringene i Notisblokk ++ og last siden på nytt i nettleseren. Alle seksjonstitlene bør vises der du legger dem: nå kan vi tilpasse koblingene i hver seksjon!

Trinn 6: Tilpass koblingene dine

Å tilpasse koblingene i hver seksjon er litt mer involvert, men absolutt ikke mye vanskeligere!

Denne gangen endrer vi ikke bare navnet på koblingene, vi endrer også hva du kan gjøre med dem! Hvert element i hver seksjon kommer til å bli klikkbart, lenke til et annet nettsted. Bonus, du kan også bestemme om du vil at den skal åpnes i et nytt vindu eller ikke!

Se først etter en linje som ser slik ut:

link_one_name

Velg den "link_one_name" -biten og erstatt den med din egen tekst. For eksempel er den første lenken i den første delen basert på listen min fra trinn X "Digitale aviser", så vi får:

Digitale aviser

La oss deretter jobbe med å tilpasse lenken! Bytt ut "link.one" -biten med din første lenke. For meg vil det være lenken til våre digitale aviser, så det vil se ut som:

Digitale aviser

Lagre arbeidet ditt i tekstredigereren, og last siden på nytt i nettleseren din

Du bør nå kunne klikke den første lenken du har tilpasset. Hvis det ikke tok det, er det OK! Start på nytt eller gå tilbake til trinnene til koblingen åpnes når du klikker på den.

Når du har fått din første lenke til å fungere … Vel, alt du trenger å gjøre er å gjenta disse trinnene for hver lenke i hver seksjon, til du har tilpasset alle navn og lenker på startsiden din! Det er imidlertid bare en fangst: sjansen er stor for at når du klikker på en lenke, forsvinner startsiden din bare når den nye lenken åpnes i samme fane eller vindu.

Det er ikke veldig praktisk … Så hva med å endre måten lenker åpnes på? La oss bruke vår første lenke som et eksempel! Du husker sannsynligvis at det er her vi forteller nettleseren din å åpne en lenke når du klikker på den:

Digitale aviser

Men gjett hva - det er også der vi bestemmer hvordan lenken skal åpne! Endre det til:

Digitale aviser

Lagre arbeidet ditt, og last siden på nytt i nettleseren din: lenken åpnes nå i en ny fane når du klikker på den! På den måten kan du holde startsiden din åpen når du trenger det.

Trinn 7: Legg til et bilde på startsiden din

Nå som alle våre lenker er satt opp, er det på tide å dekorere startsiden vår! Denne malen har plass til et tilpasset bilde på høyre side av skjermen. Nå tilbake i Notisblokk ++, se etter denne linjen:

helt på slutten av malen. Velg et bilde du liker, flytt det til samme mappe som startsiden din, og erstatt "library_picture.jpg" med filnavnet på bildet ditt. For eksempel, hvis filen min er "your_picture.jpg" blir linjen:

Lagre endringene og last inn startsiden på nytt i nettleseren din.

Siden startsidens kode og bildefilene er i samme mappe, bør bildet lastes inn automatisk når du oppdaterer siden. Hvis den ikke gjorde det, sjekk navnet på filen din - det er vanligvis der jeg tar feil!

Bakgrunnsbilder til smarttelefoner passer godt for det prosjektet. Generelt, et hvilket som helst vertikalt bilde (eller som fancy folk sier "portrettorienteringsbilde" med et 16: 9-forhold) for den saks skyld! Men oppsettet til startsiden vår vil tilpasse seg uansett hva du kaster på den.

Hvis bildet ditt vises, gratulerer, du er ganske ferdig!

Trinn 8: Rydde opp litt

Hvis du har ekstra seksjoner du ikke bruker på det tidspunktet, kan du slette dem! La oss for eksempel si at du ikke bruker seksjon 6. Finn:

• Avsnitt 6
• Artikkel 1
• Artikkel 2
• Artikkel 3

Velg og slett disse linjene, lagre filen og oppdater filen i nettleseren din for å sikre at alt er borte.

Dette er vanligvis trinnet der jeg bryter alt fordi jeg går for fort, så hvis noe plutselig ikke fungerer, husk: ta et dypt pust, og angre det du nettopp gjorde med tastekombinasjonen CTRL+Z på tastaturet!

Trinn 9: Gjør det til en faktisk startside

Nå som startsiden åpner alle koblingene vi ønsker, og ser slik vi vil at den skal se ut, er det på tide å åpne den når du starter nettleseren din!

På det tidspunktet liker jeg å holde alt borte fra datamaskinens skrivebord ved å klippe og lime inn startsidemappen min i Windows 'Dokumenter -mappe. Så hvis du er ferdig med å jobbe med startsiden din, gjør det!

Neste: mest sannsynlig åpnes nettleseren din med din favoritt søkemotor, eller kanskje til og med en tom side.

Du finner instruksjoner for å tilpasse Firefox så vel som andre nettlesere nedenfor:

• Firefox instruksjoner
• Google Chrome -instruksjoner
• Safari instruksjoner
• Microsoft Edge -instruksjoner

Når du er ferdig med å følge instruksjonene for nettleseren din, lukker du alt og åpner det på nytt. Hvis det er startsiden din som vises når nettleseren din starter, klarte du det!

Hvis det ikke tok det, gå gjennom instruksjonene for nettleseren din igjen og sørg for at du ikke gikk glipp av noe. Verre kommer til det verste, start datamaskinen på nytt etter at du har lagret alt arbeidet. 9 ganger av 10, det løser alt!

Trinn 10: Alt ferdig! Og, vil du vite mer?

Gratulerer med avslutningen på startsiden din! Det ser kanskje ikke så mye ut, men du har nettopp lært deg å kode en av de viktigste byggesteinene på et nettsted slik jeg gjorde … For rundt 20 år siden!

Hvis du likte dette og ønsker å lære mer om startsider, er det et dypt kaninhull å følge! Her er et lite utvalg for å hjelpe deg på reisen til startsiden:

• Prøvde du den grunnleggende startsiden? Gode nyheter, det er mer hvor det kommer fra! Ta en titt på de andre guidene av / stpg / for mer inspirasjon og avanserte funksjoner!
• Sjekk Johnson County Library -katalogen for bøker om HTML og CSS - og med bibliotekskortet eller e -kortet har du også tilgang til e -bøker!
• Bibliotekskortet gir deg også tilgang til Udemy, og det har noen veldig komplette klasser om HTML, CSS og webdesign også.

Hvis du er superstolt over skapelsen din, hvorfor ikke ta et skjermbilde og dele det med oss over Twitter eller Instagram med hashtaggen #jocomakes? Vi er alltid glade for å se hva våre lånere finner på!