Դարձրեք ինքներդ ձեզ սովորական, մինիմալիստական մեկնարկային էջ: 10 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:45

Արդյո՞ք ստիպված եք եղել անցնել հիմնականում հեռավոր աշխատանքի, քանի որ COVID-19- ը դարձել է բան: Նույնը!

Տանից մեր համակարգիչներով և ինտերնետով աշխատելը հաճախ նշանակում է, որ աշխատանքի, դպրոցի կամ նույնիսկ… զվարճանքի համար մենք պետք է հետևենք բազմաթիվ վեբ կայքերի:

Էջանիշները միշտ չէ, որ կատարում են իրենց առաջադրանքը, այնպես որ ինչպե՞ս ինքներդ ձեզ համար դարձնել հատուկ սկզբնական էջ, որը հարմարեցված է ձեզ համար, անհրաժեշտ բոլոր հղումներով, և դա բացվում է ձեր վեբ դիտարկիչում ամեն անգամ, երբ դրա կարիքը ունեք:

Ահա այն, ինչ ձեզ հարկավոր կլինի.

• Համակարգիչ (մերն աշխատում է Windows- ով, բայց ցանկացած ժամանակակից համակարգիչ կանի):
• Միացում ինտերնետին:
• Նոր տեղադրում տեքստային խմբագրիչ Notepad ++:

Երբ պատրաստ լինեք, եկեք սկսենք օգտագործել մեր սկզբնական էջի ձևանմուշը … Կամ զրոյից ստեղծել ձեր սեփականը:

Քայլ 1: Ստեղծեք մեկնարկային էջ կամ ներբեռնեք մեր անհատականացված ձևանմուշը

Այս պահին դուք ունեք երկու տարբերակ.

1. Ներբեռնեք մեր հարմարեցված ձևանմուշը (հրահանգները հետևեք այս քայլից մի փոքր ուշ) կամ,
2. Հետևեք այս հիմնական սկզբնական ուղեցույցին. այն քայլ առ քայլ ձեզ կտանի պարզ մեկնարկային էջի կառուցվածքային տարրերի միջով, և դա այն ուղեցույցն է, որին հետևել ենք այս անհատական մեկնարկային էջը կառուցելու համար:

Ինչու՞ խորհուրդ տալ ձեռնարկը… ձեռնարկում: Մեր աշխատանքը ՝ որպես MakerSpace- ի օժանդակողներ, միայն այն չէ, որ ցույց տանք ձեզ, թե ինչպես անել բաները, այլ նաև կապել ձեզ այնտեղ ստեղծողի մշակույթին և ռեսուրսներին: Այս ուղեցույցը մեկն է այն վայրերից, որտեղ սկսվում են բազմաթիվ նորաստեղծ դիզայներներ, ուստի իմաստ ունեցավ այն կիսել ձեզ հետ:

Եթե ժամանակ ունեք, շարունակեք թիվ 2 տարբերակով, բայց եթե չունեք, միշտ կարող եք հետագայում անդրադառնալ հիմնական սկզբնական ուղեցույցին: Այս ձեռնարկի համար մենք պարզապես ենթադրում ենք, որ դուք ներբեռնում եք մեր հատուկ ձևանմուշը: Ներբեռնելու համար.

1. Բացեք մեր DIY_startpage պահեստը Github- ում:
2. Կտտացրեք մեծ կանաչ կոճակին ՝ բացվող ընտրացանկը բացելու համար:
3. Կտտացրեք Ներբեռնել ZIP ՝ ծրագրի բոլոր ֆայլերը ներբեռնելու համար:
4. Ձեր ներբեռնած ZIP ֆայլից հանեք բոլոր ֆայլերը ձեր նախընտրած վայրում:

GitHub- ը վեբ կայք է, որտեղ ծրագրավորողներն ու դիզայներներն ամբողջ աշխարհում կիսվում են իրենց ծածկագրով և ստեղծագործություններով ուրիշների հետ. Այն նաև թույլ է տալիս Ձեզ համագործակցել ուրիշների հետ բոլոր տեսակի նախագծերում: Եզրակացությունն այն է, որ դա հիանալի գործիք է, որը յուրաքանչյուր Ստեղծող պետք է իմանա:

Այժմ գործարկեք ձեր ընտրած զննարկիչը. Ինձ իսկապես դուր է գալիս Firefox- ը, բայց մեր ձևանմուշը պետք է աշխատի գրեթե ցանկացած վեբ զննարկչի վրա, այնպես որ ազատ զգացեք Edge- ի, Chrome- ի կամ Safari- ի օգտագործումը:

Վերջապես, բացեք «DIY_startpage.html» ֆայլը ձեր դիտարկիչում ԵՎ Notepad ++ - ում և եկեք սկսենք այն հարմարեցնել:

Քայլ 2: Նշեք ձեր նախընտրածները:

Մեկնարկային էջ ունենալը հիանալի է: Օգտակար մեկնարկային էջ ունենալը նույնիսկ ավելի լավ է և հենց հիմա, մերոնք մի փոքր դատարկ տեսք ունեն:

Որո՞նք են այն բաները, որոնք դուք պարբերաբար ստուգում եք և որոնց պետք է հետևեք: Ի՞նչ վեբ -կոմիքսներ եք կարդում առավոտյան: Ո՞ր լրատվական կայքն եք սիրում ստուգել: Սրանք այն բաներն են, որոնք պետք է հայտնվեն ձեր սկզբնական էջում:

Այս ձեռնարկի համար ես պարզապես կօգտագործեմ իմ նախընտրածներից մի քանիսը: Spoiler- ի նախազգուշացում, գրադարանի բազմաթիվ հղումներ: Բայց նաև իմ սիրած որոշ ստեղծագործողներ ոգեշնչման համար, և մի քանիսը ՝ իմ սիրած ժամանցը: Այս բոլոր տարրերը կարող եք գտնել ստորև ՝ հղումով, որպես օրինակ:

Նորություններ և ընթերցում

• Թվային թերթեր
• Թվային գրքեր
• Թվային ամսագրեր

Սովորում

• W3C դպրոցներ
• Ուդեմի
• Մանգո լեզուներ

Երաժշտություն

• Լսեք Տեղական
• Երգը պայթում է
• Jamendo երաժշտական ռադիոկայաններ

Ստեղծող մշակույթ

• Core77
• Լուսակլաստեր
• Մելապրոպիզմներ

Յուրաքանչյուր կատեգորիայի համար ես ընտրել եմ իմ երեք նախընտրածները, բայց դուք պետք է կարողանաք դրանից ավել կամ պակաս ընտրել առանց խնդիրների. Ձեր սկզբնական էջի դասավորությունը ինքնաբերաբար կհամապատասխանի թվին կամ ռեսուրսներին:

Երբ ձեր բոլոր նախընտրածները թվարկված լինեն, եկեք դրանք մեկ րոպեով մի կողմ դնենք և աշխատենք մեր ընդհանուր էջի ձևանմուշը ձեզանից մի փոքր ավելի դարձնելու վրա:

Քայլ 3: Անհատականացրեք ձեր տառատեսակը

Սկսեք Գրառման գրքույկ ++, կտտացրեք Ֆայլ> Բացել ՝ ձեր «DIY_startpage.html» ֆայլը բացելու համար: Այն, ինչ դուք դիտում եք, շատ տարբերվում է ձեր դիտարկիչի էջից, այնպես չէ՞: Դա ձեր էջի կոդն է, և բրաուզերները մեկնաբանում են այդ կոդը, որպեսզի այն մի փոքր ավելի աչքի ընկնող լինի և կատարեն այն ամենը, ինչ մեզ անհրաժեշտ է:

Մեր մեկնարկային էջի նախագծի ծածկագիրը գրված է երկու հարակից լեզուներով ՝ HTML և CSS: HTML- ը սովորաբար պատասխանատու է էջի բովանդակության համար, իսկ CSS- ը `էջի արտաքին տեսքի համար:

Փնտրեք այս առաջին բաժինը `ձեր սկզբնական էջը հարմարեցնելու համար.

html {

հավասարեցնել տարրերը `կենտրոն; գույնը ՝ #313131; ցուցադրում `ճկուն; տառատեսակ: 22px "Courier New", Courier, monospace; բարձրություն `100%; հիմնավորել-բովանդակություն. կենտրոն; լուսանցք `0; }

Մեր մեկնարկային էջի այս բաժինը կենտրոնանում է մեր էջի տարրերի ընդհանուր տեսքի վրա: Գիծը:

տառատեսակ: 22px "Courier New", Courier, monospace;

վերաբերում է սկզբնական էջում օգտագործվող տառատեսակին և ունի երկու պարամետր, որոնք որոշում են, թե ինչպիսին կլինի ձեր էջի տեքստը ՝ չափը և տառատեսակի ընտանիքը:

• չափը - ահա թե ինչ է այդ «22px» - ը: Էկրանի վրա ձեր տեքստի չափը որոշվում է «px» - ով ՝ կարճ պիքսելների համար:
• տառատեսակի ընտանիք - ահա թե որտեղ ենք մենք նշում այն տառատեսակները, որոնք մենք կցանկանայինք օգտագործել: Սովորաբար լավ գաղափար է թվարկել մի քանիսը ՝ այն տառատեսակից, որն իսկապես ցանկանում եք օգտագործել ամենաընդհանուր ընտանիքը: Այս տառատեսակները հիմնված են ձեր օգտագործած զննարկչի վրա, ուստի եթե ամենաանհրաժեշտը մատչելի չէ, դիտարկիչը կփորձի հաջորդը և այլն:

W3schools- ի CSS Web Safe Fonts էջը ունի տառատեսակների համադրությունների մեծ ցանկ, որոնք հիանալի տեսք ունեն, պահպանում են ձեր փնտրած ոճը և աշխատելու են ժամանակակից բրաուզերների մեծ մասի վրա:

Օրինակ, կարող եք փոխարինել.

"Courier New", Courier, monospace;

հետ ՝

«Palatino Linotype», «Book Antiqua», Palatino, serif;

կամ:

«Comic Sans MS», ուղղահայաց, sans-serif;

Պահպանեք ձեր ֆայլը և թարմացրեք էջը ձեր դիտարկիչում ՝ փոփոխությունները տեսնելու համար: Ձեզ դուր չի գալիս: Ոչ մի խնդիր! Խաղացեք CSS վեբ ապահով տառատեսակների հետ, մինչև չգտնեք ձեր նախընտրած համադրությունը:

Քայլ 4: Անհատականացրեք ձեր վերնագրի մեջբերումը:

Փնտրեք այս բաժինը ձեր HTML ֆայլում.

Սա ձեր սկզբնական էջն է: Վայելեք:

Ընտրեք ձեր նախընտրած մեջբերումը և փոխարինեք ծածկագիրը: Իմ սեփականի համար ես ընտրեցի

Եվս մեկ անգամ խախտման մասին:

Ձեր սկզբնական էջի դասավորությունը պետք է արագորեն համապատասխանի ձեր առաջարկին `ձեր դիտարկիչում էջը վերաբեռնելուն պես. Firefox- ում դա նշանակում է, որ ձեր ստեղնաշարի վրա սեղմեք CTRL+R կամ կտտացրեք« Վերաբեռնել »պատկերակին: Ընտրեք մեջբերում, որն այժմ ձեզ դուր է գալիս (կամ ինչ -որ բան ավելի ուշ):

Քայլ 5: Անհատականացրեք ձեր բաժինները

Այժմ, երբ գտել եք ձեզ դուր եկած տառատեսակների համադրություն և ունեք հիանալի մեջբերում ձեզ ոգեշնչելու համար, եկեք շարունակենք և հարմարեցնենք ձեր բաժինները:

Եթե դուք ներբեռնել եք մեր սկզբնական էջը Github- ից, դուք ունեք 6 բաժին ՝ հարմարեցնելու համար. Օրիգինալ ուղեցույցն ունի միայն 4 -ը, բայց քանի որ մեր կյանքի ավելի ու ավելի շատ ասպեկտներ են առցանց հայտնվել վերջին շրջանում, ես առաջ գնացի և ամեն դեպքում ավելացրի:

Գտեք առաջին բաժինը և պարզապես մուտքագրեք այն, ինչ մեզ անհրաժեշտ է: Հիշեցման համար նշեմ, որ իմ առաջին բաժինը «Նորություններ և ընթերցում» -ն է.

Երբ ձեր ֆայլը դեռ բաց է Գրառման գրքույկում ++, գտեք կոդի հետևյալ տողը.

Բաժին 1

և փոխարինեք այն ձեր ցուցակի այն կատեգորիայի հետ, որը կարծում եք, որ ամենաշատը կօգտագործեք:

Քանի որ մեզանից շատերը սովոր են փաստաթղթեր կարդալ վերևից ձախ, այնտեղ, բնականաբար, կարող են գնալ ձեր աչքերը. Բայց եթե դուք այլ ընթերցման ուղղություն ունեցող մշակույթից եք, կամ պարզապես այլ կերպ եք աշխատում, հարմարեցրեք դա ինքներդ ձեզ: Ի վերջո, դա ձեր մեկնարկային էջն է. Դուք գիտեք, թե որն է ձեզ համար լավագույնը:

Մեկ բաժնի վերնագիր, հինգը մնացել է: Փնտրեք ծածկագրի տողը, որն ասում է.

Բաժին 2

Փոխեք այն, այնուհետև շարունակեք փնտրել բաժինների վերնագրերը և փոխեք դրանք, մինչև չհասնեք ձեր ցուցակի ավարտին: Եթե դուք չեք օգտագործում բոլոր բաժինները, պարզապես թողեք դրանք: Այս ձեռնարկի վերջում մենք նույնպես մի փոքր մաքրում կանենք:

Բաժինների անհատականացումն ավարտելուց հետո պարզապես պահեք ձեր փոփոխությունները Notepad ++ - ում և վերաբեռնեք էջը ձեր դիտարկիչում: Բոլոր բաժինների վերնագրերը պետք է ցուցադրվեն այնտեղ, որտեղ դուք տեղադրել եք դրանք: այժմ մենք կարող ենք հարմարեցնել յուրաքանչյուր հատվածի հղումները:

Քայլ 6: Անհատականացրեք ձեր հղումները

Յուրաքանչյուր բաժնի հղումների հարմարեցումը մի փոքր ավելի ներգրավված է, բայց, իհարկե, ոչ շատ դժվար:

Այս անգամ մենք ոչ միայն փոխում ենք հղումների անունը, այլ նաև այն, ինչ կարող եք անել դրանցով: Յուրաքանչյուր բաժնի յուրաքանչյուր տարր կդառնա սեղմելի ՝ հղում դեպի այլ կայք: Բոնուս, կարող եք նաև որոշել ՝ ուզու՞մ եք, որ այն բացվի նոր պատուհանում, թե ոչ:

Նախ, փնտրեք տող, որը նման է.

link_one_name

Ընտրեք այդ «link_one_name» բիտը և այն փոխարինեք ձեր տեքստով: Օրինակ, X քայլից իմ ցուցակի հիման վրա առաջին բաժնի առաջին հղումը «Թվային թերթեր» է, այնպես որ մենք ստանում ենք.

Թվային թերթեր

Հաջորդը, եկեք աշխատենք հարմարեցնել հղումը: «Link.one» բիթը փոխարինեք ձեր առաջին հղումով: Ինձ համար դա կլինի մեր թվային թերթերի հղումը, ուստի այն կունենա հետևյալ տեսքը.

Թվային թերթեր

Պահպանեք ձեր աշխատանքը տեքստային խմբագրիչում և վերաբեռնեք էջը ձեր դիտարկիչում:

Այժմ դուք պետք է կարողանաք սեղմել ձեր ընտրած առաջին հղումը: Եթե դա չվերցրեց, լավ է: Սկսեք նորից կամ հետ քաշեք ձեր քայլերը, մինչև կտտացնելով հղումը բացվի:

Երբ ձեր առաջին հղումը աշխատի … Դե, այն, ինչ ձեզ հարկավոր է անել, կրկնել այս քայլերը յուրաքանչյուր բաժնի յուրաքանչյուր հղման համար, մինչև ձեր սկզբնական էջի բոլոր անուններն ու հղումները հարմարեցնեք: Այնուամենայնիվ, կա միայն մեկ որս. Հավանականությունն այն է, որ երբ սեղմում եք հղումը, ձեր սկզբնական էջը պարզապես անհետանում է, քանի որ նոր հղումը բացվում է նույն ներդիրում կամ պատուհանում:

Դա այնքան էլ հարմար չէ… Այսպիսով, ինչպե՞ս փոխել հղումների բացման եղանակը: Եկեք որպես օրինակ օգտագործենք մեր առաջին հղումը: Դուք հավանաբար հիշում եք, որ այստեղ մենք ձեր դիտարկիչին ասում ենք, որ կտտացնելիս բացեք հղումը.

Թվային թերթեր

Բայց կռահեք, թե ինչ - այստեղ մենք նաև որոշում ենք, թե ինչպես է բացվելու հղումը: Փոխել այն ՝

Թվային թերթեր

Այժմ պահպանեք ձեր աշխատանքը և վերաբեռնեք էջը ձեր դիտարկիչում. Այն սեղմելուց հետո հղումը կբացվի նոր ներդիրում: Այդ կերպ դուք կարող եք բացել ձեր սկզբնական էջը այն ժամանակ, երբ դրա կարիքը կա:

Քայլ 7: Նկար ավելացրեք ձեր սկզբնական էջին

Այժմ, երբ մեր բոլոր հղումները տեղադրված են, ժամանակն է զարդարել մեր սկզբնական էջը: Էս էկրանի աջ կողմում այս ձևանմուշը տեղ ունի անհատականացված նկարի համար: Այժմ վերադառնալով Գրառման գրքույկ ++, փնտրեք այս տողը.

ամբողջովին կաղապարի վերջում: Ընտրեք ձեզ դուր եկած պատկերը, տեղափոխեք այն նույն թղթապանակին, ինչ ձեր սկզբնական էջի ֆայլը և փոխարինեք «library_picture.jpg» - ն ձեր նկարի ֆայլի անունով: Օրինակ, եթե իմ ֆայլի անունը «your_picture.jpg» է, տողը դառնում է.

Պահպանեք ձեր փոփոխությունները և կրկին բեռնեք սկզբնական էջը ձեր դիտարկիչում:

Քանի որ ձեր սկզբնական էջի ծածկագիրը և ձեր պատկերի ֆայլերը նույն թղթապանակում են, էջը թարմացնելիս նկարը պետք է ինքնաբերաբար բեռնվի: Եթե դա չեղավ, ստուգեք ձեր ֆայլի անունը. Դա սովորաբար այնտեղ է, որտեղ ես սխալվում եմ:

Սմարթֆոնների պաստառները հիանալի տեղավորվում են այդ նախագծի համար: Ընդհանրապես, ցանկացած ուղղահայաց պատկեր (կամ ինչպես ֆանտազիաներն են ասում «դիմանկարի կողմնորոշման նկար» ՝ 16: 9 հարաբերակցությամբ): Բայց մեր սկզբնական էջի դասավորությունը հարմարվելու է անկախ նրանից, թե ինչ եք նետում դրա վրա:

Եթե ձեր նկարը երևում է, շնորհավորում եմ, դուք բավականին ավարտված եք:

Քայլ 8: Մի փոքր մաքրում

Եթե ունեք լրացուցիչ բաժիններ, որոնք այդ պահին չեք օգտագործում, ազատ զգալ ջնջեք դրանք: Օրինակ, ենթադրենք, որ դուք չեք օգտագործում Բաժին 6 -ը: Գտեք.

• Բաժին 6
• Կետ 1
• Կետ 2
• Կետ 3

Ընտրեք և ջնջեք այս տողերը, պահեք ձեր ֆայլը և թարմացրեք ֆայլը ձեր դիտարկիչում `համոզվելու համար, որ ամեն ինչ անհետացել է:

Սովորաբար սա այն քայլն է, որտեղ ես կոտրում եմ ամեն ինչ, քանի որ շատ արագ եմ գնում, այնպես որ, եթե ինչ -որ բան հանկարծ չաշխատի, հիշեք.

Քայլ 9: Այն դարձնել իրական մեկնարկային էջ

Այժմ, երբ սկզբնական էջը բացում է մեր ուզած բոլոր հղումները և այն տեսքն ունի, ինչպես մենք ենք ուզում, ժամանակն է բացել այն, երբ սկսում եք ձեր դիտարկիչը:

Այդ պահին ես սիրում եմ ամեն ինչ հեռու պահել իմ համակարգիչների աշխատասեղանից `կտրելով և տեղադրելով իմ սկզբնական էջի թղթապանակը Windows- ի Փաստաթղթերի թղթապանակում: Այսպիսով, եթե ավարտել եք ձեր սկզբնական էջի աշխատանքը, դա արեք:

Հաջորդը. Ամենայն հավանականությամբ, ձեր դիտարկիչը բացվում է ձեր նախընտրած որոնիչով, կամ գուցե նույնիսկ դատարկ էջով:

Ստորև կարող եք գտնել Firefox- ը, ինչպես նաև այլ բրաուզերները հարմարեցնելու հրահանգներ.

• Firefox- ի ցուցումներ
• Google Chrome- ի ցուցումներ
• Safari- ի ցուցումներ
• Microsoft Edge- ի ցուցումներ

Ձեր դիտարկիչի հրահանգներին հետևելուց հետո փակեք այն և նորից բացեք այն: Եթե ձեր սկզբնական էջը հայտնվի ձեր դիտարկիչի գործարկման ժամանակ, ապա այն հաջողվեց:

Եթե դա չպահանջվի, նորից անցեք ձեր դիտարկիչի հրահանգներին և համոզվեք, որ ոչինչ բաց չեք թողել: Ավելի վատը գալիս է ամենավատին, ապա ամբողջ աշխատանքը խնայելուց հետո վերագործարկեք համակարգիչը: 10 -ից 9 անգամ, դա լուծում է ամեն ինչ:

Քայլ 10: Ամեն ինչ արված է: Եվ, կցանկանայի՞ք ավելին իմանալ:

Շնորհավորում ենք ձեր մեկնարկային էջն ավարտելու կապակցությամբ: Կարող է շատ չթվալ, բայց դուք պարզապես սովորել եք կոդավորել վեբ կայքի ամենակարևոր շինանյութերից մեկը այնպես, ինչպես ես էի անում … Մոտ 20 տարի առաջ:

Եթե ձեզ դուր եկավ սա և կցանկանայիք ավելին իմանալ սկզբնական էջերի մասին, ապա այն պետք է հետևել նապաստակի խորին փոսին: Ահա մի փոքր ընտրություն, որը կօգնի ձեզ մեկնարկային էջում ճանապարհորդելիս.

• Փորձե՞լ եք Հիմնական մեկնարկային էջի ուղեցույցը: Լավ նորություն, որտեղից ավելի շատ բան կա: Ստուգեք / stpg / - ի մյուս ուղեցույցները ՝ ավելի շատ ոգեշնչման և առաջադեմ հնարավորությունների համար:
• Ստուգեք Countyոնսոնի շրջանի գրադարանի կատալոգը HTML և CSS գրքերի համար, և ձեր գրադարանային քարտով կամ էլեկտրոնային քարտով դուք նույնպես մուտք կունենաք էլեկտրոնային գրքեր:
• Ձեր գրադարանային քարտը նաև ձեզ հնարավորություն է տալիս օգտվել Udemy- ից, և այն ունի շատ ամբողջական դասեր HTML, CSS և վեբ ձևավորման, ինչպես նաև:

Եթե դուք հպարտ եք ձեր ստեղծագործությամբ, ինչու՞ չեք սքրինշոթ անում և այն մեզ հետ կիսում Twitter- ով կամ Instagram- ով #jocomakes հեշթեգով: Մենք միշտ ուրախ ենք տեսնել, թե ինչ են մեր հաճախորդները գալիս!