Sukurkite individualų, minimalistinį pradinį puslapį!: 10 žingsnių

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:44

Ar jums teko pereiti prie daugiausia nuotolinio darbo, nes COVID-19 tapo daiktu? Tas pats!

Darbas iš namų su kompiuteriais ir internetu dažnai reiškia, kad turime sekti daugybę svetainių, skirtų darbui, mokyklai ar net… linksmybėms!

Žymės ne visada atitinka užduotį, taigi, kaip sukurti sau tinkintą pradinį puslapį, pritaikytą tik jums, su visomis reikalingomis nuorodomis ir kuris atsidaro jūsų žiniatinklio naršyklėje kiekvieną kartą, kai jums to reikia?

Štai ko jums reikės:

• Kompiuteris (pas mus veikia „Windows“, bet tinka bet kuris šiuolaikinis kompiuteris).
• Ryšys su internetu.
• Naujas teksto rengyklės „Notepad ++“diegimas.

Kai būsite pasiruošę, pradėkime naudoti savo pradinio puslapio šabloną … Arba sukurkite savo nuo pat pradžių!

1 veiksmas: sukurkite pradžios puslapį ARBA atsisiųskite mūsų pritaikytą šabloną

Šiuo metu turite dvi galimybes:

1. Atsisiųskite mūsų pritaikytą šabloną (instrukcijos pateikiamos šiek tiek vėliau šiame žingsnyje) arba,
2. Vadovaukitės šiuo pagrindiniu pradžios vadovu; tai žingsnis po žingsnio supažindins jus su paprasto pradžios puslapio sudedamosiomis dalimis - ir tai yra vadovas, kuriuo vadovavomės kurdami šį pasirinktinį pradinį puslapį!

Kodėl pamokoje rekomenduoti vadovėlį? Mūsų, kaip „MakerSpace“pagalbininkų, darbas yra ne tik parodyti jums, kaip daryti dalykus, bet ir susieti jus su „Maker“kultūra ir turimais ištekliais. Šis vadovas yra viena iš vietų, kur pradeda daug pradinio puslapio dizainerių, todėl buvo prasminga juo pasidalyti!

Jei turite laiko, naudokitės 2 galimybe, bet jei neturite, visada galite perskaityti pagrindinį pradžios vadovą vėliau! Šioje pamokoje mes tik manysime, kad atsisiunčiate mūsų pasirinktinį šabloną! Norėdami jį atsisiųsti:

1. Atidarykite „DIY_startpage“saugyklą „Github“.
2. Spustelėkite didelį žalią kodo mygtuką, kad atidarytumėte išskleidžiamąjį meniu.
3. Spustelėkite Atsisiųsti ZIP, kad atsisiųstumėte visus projekto failus.
4. Ištraukite visus failus iš ZIP failo, kurį ką tik atsisiuntėte, į pasirinktą vietą.

„GitHub“yra svetainė, kurioje programuotojai ir dizaineriai visame pasaulyje dalijasi savo kodu ir kūryba su kitais: ji taip pat leidžia bendradarbiauti su kitais vykdant visų rūšių projektus. Esmė ta, kad tai puikus įrankis, kurį turėtų žinoti kiekvienas kūrėjas!

Dabar paleiskite pasirinktą naršyklę: man labai patinka „Firefox“, tačiau mūsų šablonas turėtų veikti beveik bet kurioje naujausioje žiniatinklio naršyklėje, todėl nedvejodami naudokite „Edge“, „Chrome“ar „Safari“!

Galiausiai atidarykite failą „DIY_startpage.html“naršyklėje IR „Notepad ++“ir pradėkime jį tinkinti!

2 žingsnis: išvardinkite savo mėgstamiausius

Turėti pradžios puslapį yra puiku. Turėti naudingą pradinį puslapį yra dar geriau ir dabar mūsų atrodo šiek tiek tuščia!

Kokius dalykus reguliariai tikrinate ir turite sekti? Kokias internetines komikas skaitote ryte? Kokią naujienų svetainę norėtumėte patikrinti? Tai yra dalykai, kurie turėtų patekti į jūsų pradinį puslapį.

Šioje pamokoje naudosiu tik kai kuriuos mėgstamiausius. Įspėjimas apie spoilerį, daug nuorodų iš bibliotekos! Bet taip pat kai kurie mano mėgstamiausi kūrėjai įkvėpimui ir kai kurios mano mėgstamiausios pramogos. Visus šiuos elementus galite rasti žemiau su nuoroda, kaip pavyzdį!

Naujienos ir skaitymas

• Skaitmeniniai laikraščiai
• Skaitmeninės knygos
• Skaitmeniniai žurnalai

Mokymasis

• W3C mokyklos
• Udemy
• Mango kalbos

Muzika

• Klausykitės vietinio
• Dainų sprogdintojas
• „Jamendo“muzikos radijas

Kūrėjų kultūra

• Core77
• „Lumecluster“
• Melapropizmai

Aš išsirinkau tris savo mėgstamiausius kiekvienai kategorijai, tačiau jūs turėtumėte sugebėti išsirinkti daugiau ar mažiau be problemų - jūsų pradinio puslapio išdėstymas automatiškai prisitaikys prie skaičiaus ar išteklių!

Kai išvardysite visus savo mėgstamiausius, atidėkime juos minutei ir pradėkime kurti bendrą pradinio puslapio šabloną.

3 žingsnis: pritaikykite šriftą

Paleiskite „Notepad ++“, spustelėkite Failas> Atidaryti, kad atidarytumėte failą „DIY_startpage.html“. Tai, ką žiūrite, labai skiriasi nuo naršyklės puslapio, ar ne? Tai yra jūsų puslapio kodas, o naršyklės aiškina šį kodą, kad jis atrodytų šiek tiek draugiškesnis akims ir atliktų viską, ko mums reikia.

Mūsų pradinio puslapio projekto kodas parašytas dviem susijusiomis kalbomis: HTML ir CSS. HTML paprastai yra atsakingas už puslapio turinį, o CSS - už puslapio išvaizdą.

Norėdami tinkinti savo pradžios puslapį, ieškokite šios pirmosios skilties:

html {

align-items: centras; spalva: #313131; ekranas: lankstus; šriftas: 22px "Courier New", Courier, monospace; aukštis: 100%; pagrįsti turinį: centras; paraštė: 0; }

Šioje mūsų pradinio puslapio skiltyje daugiausia dėmesio skiriama bendrai mūsų puslapio elementų išvaizdai. Linija:

šriftas: 22px "Courier New", Courier, monospace;

yra konkrečiai apie šriftą, kurį naudojame pradiniame puslapyje, ir turi du parametrus, kurie apibrėžia, kaip atrodys jūsų puslapio tekstas: dydis ir šriftų šeima.

• dydis - toks tas „22px“. Jūsų teksto dydis ekrane apibrėžiamas „px“, sutrumpintas pikseliais.
• šriftų šeima - čia išvardijame šriftus, kuriuos norėtume naudoti. Paprastai yra gera idėja išvardyti kelis, pradedant šriftu, kurį tikrai norite naudoti bendriausioje šeimoje. Šie šriftai priklauso nuo jūsų naudojamos naršyklės, todėl jei konkrečios nėra, naršyklė bandys kitą ir pan.

„W3schools“CSS žiniatinklio saugių šriftų puslapyje yra puikus šriftų derinių sąrašas, kurie puikiai atrodo, laikosi ieškomo stiliaus ir veiks daugelyje šiuolaikinių naršyklių.

Pavyzdžiui, galite pakeisti:

„Kurjeris Naujas“, Kurjeris, vienatūris;

su:

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

arba:

"Comic Sans MS", kursyvus, be serifo;

Išsaugokite failą ir atnaujinkite naršyklės puslapį, kad pamatytumėte pakeitimus! Nepatinka? Jokiu problemu! Žaiskite naudodami „CSS Web Safe Fonts“, kol rasite jums patinkantį derinį.

4 žingsnis: pritaikykite savo pavadinimo citatą

Ieškokite šios skilties savo HTML faile:

Tai jūsų pradinis puslapis! Mėgautis

Pasirinkite jums patinkančią citatą ir pakeiskite kodą! Dėl savęs pasirinkau

Dar kartą apie pažeidimą

Pradinio puslapio išdėstymas turėtų greitai prisitaikyti prie jūsų citatos, kai tik iš naujo įkeliate puslapį į savo naršyklę: „Firefox“tai reiškia, kad klaviatūroje reikia paspausti CTRL+R arba spustelėti piktogramą „Įkelti iš naujo“. Pasirinkite jums patinkančią citatą dabar (arba pasirinkite ką nors vėliau!) Ir pradėkime tinkinti jūsų pradinio puslapio skiltis!

5 veiksmas: tinkinkite skyrius

Dabar, kai radote patinkantį šriftų derinį ir turite puikią citatą, įkvepiančią jus, tęskime ir pritaikysime jūsų skyrius.

Jei atsisiuntėte mūsų pradinį puslapį iš „Github“, galite pritaikyti 6 skyrius: pradiniame vadove yra tik 4, tačiau kadangi pastaruoju metu vis daugiau mūsų gyvenimo aspektų persikėlė į internetą, ėmiausi veiksmų ir pridėjau daugiau.

Raskite pirmąjį skyrių ir tiesiog įveskite tai, ko mums reikia. Primenu, mano pirmoji skiltis yra „Naujienos ir skaitymas“:

Kai failas vis dar atidarytas „Notepad ++“, raskite šią kodo eilutę:

1 skirsnis

ir pakeiskite jį savo sąrašo kategorija, kurią, jūsų manymu, naudosite daugiausia.

Kadangi daugelis iš mūsų esame įpratę pradėti skaityti dokumentus iš viršaus į kairę, jūsų akys gali natūraliai nukrypti - tad pasinaudokite tuo ir išsaugokite svarbiausią kelią! Bet jei jūs atėjote iš kitos skaitymo krypties kultūros arba tiesiog dirbate kitaip, pritaikykite tai sau. Galų gale tai yra jūsų pradžios puslapis: jūs žinote, kas jums geriausia!

Vieno skyriaus pavadinimas žemyn, iki penkių! Ieškokite kodo eilutės, kuri sako:

2 skirsnis

Pakeiskite jį, tada ieškokite skyrių pavadinimų ir keiskite juos, kol pasieksite savo sąrašo pabaigą. Jei nenaudojate visų skyrių, tiesiog palikite juos! Šios pamokos pabaigoje taip pat atliksime nedidelį valymą.

Baigę tinkinti skyrius, tiesiog išsaugokite pakeitimus „Notepad ++“ir iš naujo įkelkite puslapį į savo naršyklę. Visi skyrių pavadinimai turėtų būti rodomi ten, kur juos įdėjote: dabar galime pritaikyti kiekvieno skyriaus nuorodas!

6 veiksmas: tinkinkite nuorodas

Tinkinti kiekvieno skyriaus nuorodas yra šiek tiek daugiau, bet tikrai ne daug sunkiau!

Šį kartą ne tik keičiame nuorodų pavadinimą, bet ir tai, ką galite su jomis padaryti! Kiekvienas kiekvienos skilties elementas taps spustelėjamas, nukreipiantis į kitą svetainę. Premija, taip pat galite nuspręsti, ar norite, kad ji būtų atidaryta naujame lange, ar ne!

Pirmiausia ieškokite eilutės, kuri atrodo taip:

nuorodos_vieno_pavadinimas

Pasirinkite tą „link_one_name“bitą ir pakeiskite jį savo tekstu. Pavyzdžiui, pirmoji pirmojo skyriaus nuoroda, pagrįsta mano X žingsnio sąrašu, yra „Skaitmeniniai laikraščiai“, todėl gauname:

Skaitmeniniai laikraščiai

Toliau dirbkime tinkindami nuorodą! Pakeiskite bitą „link.one“pirmąja nuoroda. Man tai bus nuoroda į mūsų skaitmeninius laikraščius, todėl atrodys taip:

Skaitmeniniai laikraščiai

Išsaugokite savo darbą teksto rengyklėje ir iš naujo įkelkite puslapį į savo naršyklę

Dabar turėtumėte spustelėti pirmąją jūsų pritaikytą nuorodą. Jei neužteko, tai gerai! Pradėkite iš naujo arba pakartokite veiksmus, kol spustelėjus nuorodą atsidarys.

Kai tik pradės veikti pirmoji nuoroda … Na, viskas, ką jums reikia padaryti, tai pakartoti šiuos veiksmus su kiekviena nuoroda kiekviename skyriuje, kol pritaikysite visus pavadinimus ir nuorodas pradiniame puslapyje! Tačiau yra tik vienas dalykas: spustelėję nuorodą, jūsų pradinis puslapis tiesiog dingsta, kai nauja nuoroda atsidaro tame pačiame skirtuke ar lange.

Tai nėra labai patogu … Taigi kaip pakeisti nuorodų atidarymo būdą? Panaudokime pirmąją nuorodą kaip pavyzdį! Tikriausiai prisimenate, kad čia mes liepiame jūsų naršyklei atidaryti nuorodą, kai ją spustelite:

Skaitmeniniai laikraščiai

Bet atspėk ką - taip pat mes nusprendžiame, kaip bus atidaryta nuoroda! Pakeiskite jį į:

Skaitmeniniai laikraščiai

Dabar išsaugokite savo darbą ir iš naujo įkelkite puslapį į savo naršyklę: spustelėjus nuorodą, ji atsidarys naujame skirtuke! Tokiu būdu galite išlaikyti savo pradinį puslapį atidarytą, kai to reikia.

7 veiksmas: pridėkite paveikslėlį į savo pradinį puslapį

Dabar, kai visos mūsų nuorodos yra sukurtos, laikas papuošti mūsų pradinį puslapį! Šiame šablone yra vietos pasirinktiniam paveikslėliui dešinėje ekrano pusėje. Dabar grįžkite į „Notepad ++“, ieškokite šios eilutės:

iki šablono pabaigos. Pasirinkite jums patinkančią nuotrauką, perkelkite ją į tą patį aplanką kaip ir pradinio puslapio failas ir pakeiskite „library_picture.jpg“savo nuotraukos failo pavadinimu. Pavyzdžiui, jei mano failo pavadinimas yra „your_picture.jpg“, eilutė tampa tokia:

Išsaugokite pakeitimus ir dar kartą įkelkite pradinį puslapį į savo naršyklę.

Kadangi jūsų pradinio puslapio kodas ir paveikslėlių failai yra tame pačiame aplanke, atnaujinus puslapį, paveikslėlis turėtų būti įkeliamas automatiškai. Jei ne, patikrinkite savo failo pavadinimą - dažniausiai aš neteisingai suprantu!

Išmaniųjų telefonų tapetai puikiai tinka šiam projektui. Apskritai, bet koks vertikalus vaizdas (arba kaip išgalvoti žmonės sako „portreto orientacijos vaizdas“su 16: 9 santykiu) šiuo klausimu! Tačiau mūsų pradinio puslapio išdėstymas bus pritaikytas, kad ir ką į jį mestumėte.

Jei jūsų nuotrauka rodoma, sveikiname, jūs beveik viską padarėte!

8 žingsnis: šiek tiek išvalykite

Jei turite papildomų skyrių, kurių tuo metu nenaudojate, nedvejodami juos ištrinkite! Pvz., Tarkime, kad nenaudojate 6 skyriaus. Raskite:

• 6 skyrius
• 1 punktas
• 2 punktas
• 3 punktas

Pasirinkite ir ištrinkite šias eilutes, išsaugokite failą ir atnaujinkite failą naršyklėje, kad įsitikintumėte, jog viskas dingo.

Paprastai tai yra žingsnis, kai viską sulaužau, nes einu per greitai, todėl jei staiga kažkas nepavyksta, prisiminkite: giliai įkvėpkite ir atšaukite tai, ką ką tik padarėte naudodami klaviatūros klavišų kombinaciją CTRL+Z!

9 veiksmas: paverskite jį tikru pradžios puslapiu

Dabar, kai pradinis puslapis atveria visas norimas nuorodas ir atrodo taip, kaip norime, laikas jį atidaryti paleidus naršyklę!

Tuo metu man patinka laikyti viską atokiau nuo savo kompiuterio darbalaukio, iškirpdamas ir įklijuodamas pradinio puslapio aplanką į „Windows“dokumentų aplanką. Taigi, jei baigėte darbą pradiniame puslapyje, padarykite tai!

Kitas: greičiausiai jūsų naršyklė atsidaro su mėgstamu paieškos varikliu, o gal net tuščiu puslapiu.

Žemiau rasite instrukcijas, kaip tinkinti „Firefox“ir kitas naršykles:

• „Firefox“instrukcijos
• „Google Chrome“instrukcijos
• „Safari“instrukcijos
• „Microsoft Edge“instrukcijos

Kai baigsite vykdyti naršyklės instrukcijas, uždarykite viską ir vėl atidarykite. Jei jūsų pradžios puslapis rodomas paleidžiant naršyklę, tai padarėte!

Jei nepavyko, dar kartą peržiūrėkite naršyklės instrukcijas ir įsitikinkite, kad nieko nepraleidote. Dar blogiau, tada išsaugokite visą darbą iš naujo paleiskite kompiuterį. 9 kartus iš 10, tai išsprendžia viską!

10 žingsnis: viskas padaryta! Ir, ar norėtumėte sužinoti daugiau?

Sveikiname baigus pradinį puslapį! Tai gali neatrodyti daug, bet jūs ką tik išmokote koduoti vieną iš svarbiausių svetainės blokų taip, kaip aš … Maždaug prieš 20 metų!

Jei jums tai patiko ir norėtumėte daugiau sužinoti apie pradinius puslapius, tai yra gili triušio skylė! Pateikiame nedidelį pasirinkimą, kuris padės jums pradėti kelionę į pradinį puslapį:

• Ar bandėte pagrindinį pradžios vadovą? Geros naujienos, iš kur atsiranda daugiau! Peržiūrėkite kitus vadovus pagal / stpg /, kad gautumėte daugiau įkvėpimo ir papildomų funkcijų!
• Peržiūrėkite Džonsono grafystės bibliotekos katalogą, kuriame rasite knygų apie HTML ir CSS, o turėdami bibliotekos kortelę ar el. Kortelę taip pat turite prieigą prie el. Knygų!
• Jūsų bibliotekos kortelė taip pat suteikia prieigą prie „Udemy“, taip pat yra keletas labai išsamių HTML, CSS ir žiniatinklio dizaino klasių.

Jei didžiuojatės savo kūryba, kodėl nepadarę ekrano kopijos ir nepasidalydami ja su mumis „Twitter“ar „Instagram“naudodami #jocomakes hashtag? Mes visada džiaugiamės matydami, ką sugalvoja mūsų globėjai!