Özünüzü Xüsusi, Minimalist Başlanğıc Səhifəsi Edin !: 10 Addım

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:43

COVID-19 bir şeyə çevrildikdən sonra əsasən uzaqdan işə keçməli oldunuzmu? Eyni!

Evdən kompüterlərimizlə və İnternet üzərindən işləmək, iş üçün, məktəb üçün və ya hətta əylənmək üçün bir çox veb saytı izləməli olduğumuz deməkdir!

Əlfəcinlər həmişə tapşırığın öhdəsindən gələ bilmir, buna görə özümüzə ehtiyacınız olan bütün bağlantıları olan və hər dəfə ehtiyac duyduğunuzda veb brauzerinizdə açılan xüsusi bir başlanğıc səhifəsi hazırlamağa nə deyərsiniz?

İşdə sizə lazım olan budur:

• Bir kompüter (bizimkilərdə Windows işləyir, amma hər hansı bir müasir kompüter bunu edəcək).
• İnternet bağlantısı.
• Notepad ++ mətn redaktorunun yeni quraşdırılması.

Hazır olduğunuzda, öz başlanğıc səhifəsi şablonumuzdan istifadə etməyə başlayaq … Ya da sıfırdan öz yaradıcılığınızı!

Addım 1: Başlanğıc səhifəsi yaradın və ya Xüsusi Şablonumuzu Yükləyin

Bu nöqtədə iki seçiminiz var:

1. Xüsusi şablonumuzu yükləyin (təlimatlar bu addımda bir az sonra izlənilir) və ya,
2. Bu əsas başlanğıc təlimatına əməl edin; Sizi addım -addım sadə bir başlanğıc səhifəsinin tikinti bloklarından keçəcək və bu xüsusi başlanğıc səhifəsini qurmaq üçün izlədiyimiz bələdçimiz budur!

Niyə bir dərslikdə bir dərslik tövsiyə etməlisiniz? MakerSpace -in köməkçiləri olaraq işimiz yalnız sizə necə iş görmək lazım olduğunu göstərmək deyil, həm də sizi orada mövcud olan Maker mədəniyyətinə və qaynaqlarına bağlamaqdır. Bu təlimat bir çox başlanğıc səhifəsi dizaynerinin başladığı yerlərdən biridir, buna görə də sizinlə paylaşmağın mənası var!

Vaxtınız varsa, 2 nömrəli seçimlə davam edin, amma etməsəniz, daha sonra hər zaman əsas başlanğıc təlimatına müraciət edə bilərsiniz! Bu dərs üçün xüsusi şablonumuzu yüklədiyinizi güman edəcəyik! Yükləmək üçün:

1. Github -da DIY_startpage depomuzu açın.
2. Açılır bir menyu açmaq üçün böyük yaşıl Kod düyməsini basın.
3. Layihə üçün bütün sənədləri yükləmək üçün ZIP Yüklə düyməsini vurun.
4. Yalnız yüklədiyiniz ZIP faylından seçdiyiniz bir yerə çıxarın.

GitHub, bütün dünyada proqramçıların və dizaynerlərin kodlarını və yaradıcılığını başqaları ilə bölüşdükləri bir veb saytdır: eyni zamanda hər cür layihələrdə başqaları ilə əməkdaşlıq etməyə imkan verir. Nəticə budur ki, hər bir Yaradıcının bilməli olduğu əla bir vasitədir!

İndi seçdiyiniz brauzerə başlayın: Firefox -u çox bəyənirəm, amma şablonumuz hər hansı bir veb brauzerdə işləməlidir, buna görə də Edge, Chrome və ya Safari -dən istifadə etməkdən çəkinməyin!

Nəhayət, "DIY_startpage.html" faylını brauzerinizdə və Notepad ++ da açın və onu fərdiləşdirməyə başlayaq!

Addım 2: Sevdiklərinizi Siyahıya salın

Başlanğıc səhifəsinə sahib olmaq əladır. Faydalı bir başlanğıc səhifəsinə sahib olmaq daha yaxşıdır və hazırda bizimki bir az boş görünür!

Mütəmadi olaraq yoxladığınız və izləməli olduğunuz şeylər nələrdir? Səhər hansı veb komiksləri oxuyursunuz? Hansı xəbər saytını yoxlamaq istərdiniz? Başlanğıc səhifənizə düşməli olduğunuz şeylər bunlardır.

Bu dərs üçün yalnız sevdiyim bir neçə istifadə edəcəyəm. Spoyler xəbərdarlığı, kitabxanadan çoxlu bağlantılar! Həm də ilham üçün ən çox sevdiyim Yaradıcılardan və ən sevdiyim əyləncələrdən bəziləri. Nümunə olaraq bütün bu maddələri aşağıda bir linklə tapa bilərsiniz!

Xəbərlər və Oxu

• Rəqəmsal qəzetlər
• Rəqəmsal Kitablar
• Rəqəmsal Jurnallar

Öyrənmə

• W3C Məktəbləri
• Udemy
• Mango Dilləri

Musiqi

• Yerli dinləyin
• Mahnı partlayıcı
• Jamendo Musiqi Radioları

Yaradıcı mədəniyyət

• Core77
• Lumecluster
• Melapropizmlər

Hər kateqoriya üçün ən çox sevdiyim üç şeyi seçdim, ancaq problem olmadan daha çox və ya daha az seçə bilməlisiniz - başlanğıc səhifənizin düzeni avtomatik olaraq saya və ya mənbələrə uyğunlaşacaq!

Bütün favoritlərinizi sadaladıqdan sonra onları bir dəqiqə kənara qoyaq və ümumi başlanğıc səhifəsi şablonumuzu bir az daha sizin halınıza gətirməyə çalışaq.

Addım 3: Şriftinizi fərdiləşdirin

Notepad ++ başladın, "DIY_startpage.html" faylınızı açmaq üçün Fayl> Aç düyməsini basın. Baxdığınız şey brauzerinizin səhifəsindən çox fərqli görünür, elə deyilmi? Bu səhifənizin kodudur və brauzerlər bu kodu bir az daha gözə bənzər hala gətirmək və bunu etmək üçün lazım olan hər şeyi etmək üçün onu şərh edirlər.

Başlanğıc səhifəsi layihəmizin kodu iki əlaqəli dildə yazılmışdır: HTML və CSS. HTML ümumiyyətlə səhifənin məzmunundan, CSS isə səhifənin görünüşündən məsuldur.

Başlanğıc səhifənizi fərdiləşdirmək üçün bu birinci bölməni axtarın:

html {

align-items: mərkəz; rəng: #313131; ekran: əyilmə; yazı tipi: 22px "Courier New", Courier, monospace; hündürlük: 100%; əsaslandır-məzmun: mərkəz; marj: 0; }

Başlanğıc səhifəmizin bu bölməsi səhifəmizdəki maddələrin ümumi görünüşünə diqqət yetirir. Xətt:

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

Xüsusilə başlanğıc səhifəsində istifadə etdiyimiz yazı tipinə aiddir və səhifənizdə hansı mətnin görünəcəyini təyin edən iki parametrə malikdir: ölçü və şrift ailəsi.

• ölçüsü - "22px" də budur. Ekrandakı mətninizin ölçüsü piksellər üçün qısaca "px" olaraq təyin olunur.
• font ailəsi - İstifadə etmək istədiyimiz şriftləri burada qeyd edirik. Həqiqətən də ən ümumi ailəni istifadə etmək istədiyiniz şriftdən bir neçəsini sadalamaq yaxşı olar. Bu şriftlər istifadə etdiyiniz brauzerə güvənir, buna görə də ən konkret biri mövcud deyilsə, brauzer növbəti birini sınayacaq və s.

W3schools -dan CSS Veb Təhlükəsiz Yazı Tipləri səhifəsində əla görünən, axtardığınız üsluba bağlı qalan və ən müasir brauzerlərdə işləyəcək şrift birləşmələrinin böyük bir siyahısı var.

Məsələn, əvəz edə bilərsiniz:

"Yeni Kuryer", Kuryer, tək məkan;

ilə:

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

ya da:

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

Faylınızı qeyd edin və dəyişiklikləri görmək üçün səhifəni brauzerinizdə yeniləyin! Bəyənmirsən? Problem deyil! İstədiyiniz birləşməni tapana qədər CSS Veb Təhlükəsiz Yazı Tipləri ilə oynayın.

Addım 4: Başlıq təklifinizi fərdiləşdirin

HTML faylınızda bu bölməni axtarın:

Bu sizin başlanğıc səhifənizdir! Zövq alın

İstədiyiniz bir təklif seçin və kodu dəyişdirin! Özüm üçün seçdim

Bir daha pozuntuya

Başlanğıc səhifənizin düzeni, səhifəni brauzerinizdə yenidən yükləyən anda təklifinizə uyğun olaraq uyğunlaşmalıdır: Firefox -da bu, klaviaturanızda CTRL+R düymələrini basmaq və ya Yenidən yüklə simgesini vurmaq deməkdir. İndi bəyəndiyiniz bir təklif seçin (və ya sonra bir şey seçin!) Və gəlin başlanğıc səhifənizin bölmələrini fərdiləşdirməyə başlayaq!

Addım 5: Bölmələrinizi fərdiləşdirin

İstədiyiniz bir şrift kombinasiyasını tapdığınıza və sizi ruhlandıracaq möhtəşəm bir təklifə malik olduğunuza görə, bölmələrimizi davam etdirək və fərdiləşdirək.

Başlanğıc səhifəmizi Github -dan endirmisinizsə, fərdiləşdirmək üçün 6 bölməniz var: orijinal bələdçidə yalnız 4 bölmə var, amma son zamanlarda həyatımızın getdikcə daha çox aspekti internetə köçdüyündən irəli getdim və hər ehtimala qarşı daha çox əlavə etdim.

Birinci bölməni tapın və bizə lazım olanı yazın. Xatırladım ki, ilk hissəm "Xəbərlər və Oxumaq" dır:

Faylınız hələ də Notepad ++ -da açıqdırsa, aşağıdakı kod satırını tapın:

Bölmə 1

və siyahınızdakı ən çox istifadə edəcəyinizi düşündüyünüz kateqoriya ilə əvəz edin.

Bir çoxumuz sənədləri sol üstdən oxumağa başlamağa öyrəşdiyimiz üçün gözlərinizin təbii olaraq ora gedə biləcəyi yerlərdən istifadə edə bilərsiniz - buna görə də bundan faydalanın və ən vacib gedişimizi orda saxlayın! Fərqli bir oxu istiqaməti olan bir mədəniyyətdən gəlsəniz və ya fərqli bir şəkildə işləyirsinizsə, bunu özünüz üçün uyğunlaşdırın. Hər şeydən sonra bu sizin başlanğıc səhifənizdir: sizin üçün ən yaxşısını bilirsiniz!

Bir bölmənin adı aşağı, beşi qaldı! Yazan kod xəttini axtarın:

Bölmə 2

Dəyişdirin, sonra bölmə başlıqlarını axtarmağa və siyahınızın sonuna çatana qədər dəyişdirməyə davam edin. Bütün bölmələri istifadə etmirsinizsə, onları buraxın! Bu dərsliyin sonunda da kiçik bir təmizlik edəcəyik.

Bölmələri fərdiləşdirməyi bitirdikdən sonra dəyişikliklərinizi Notepad ++ da qeyd edin və səhifəni brauzerinizdə yenidən yükləyin. Bütün bölmələrin başlıqları onları qoyduğunuz yerdə görünməlidir: indi hər hissədəki bağlantıları fərdiləşdirə bilərik!

Addım 6: Bağlantılarınızı fərdiləşdirin

Hər hissədəki bağlantıları fərdiləşdirmək bir az daha çox işdir, amma əlbəttə ki, çox da çətin deyil!

Bu dəfə yalnız bağlantıların adını deyil, onlarla nə edə biləcəyinizi də dəyişdiririk! Hər bir hissədəki hər bir maddə tıklanabilir, fərqli bir veb saytına keçəcək. Bonus, yeni bir pəncərədə açılmasını istəməyinizə də qərar verə bilərsiniz!

Əvvəlcə bənzər bir xətt axtarın:

link_one_adı

Bu "link_one_name" bitini seçin və öz mətninizlə əvəz edin. Məsələn, X addımdakı siyahıma əsaslanan birinci hissədəki ilk keçid "Rəqəmsal Qəzetlər" dir, beləliklə əldə edirik:

Rəqəmsal qəzetlər

Sonra, əlaqəni fərdiləşdirmək üçün çalışaq! "Link.one" bitini ilk bağlantınızla əvəz edin. Mənim üçün rəqəmsal qəzetlərimizə keçid olacaq, buna görə də belə olacaq:

Rəqəmsal qəzetlər

İşinizi mətn redaktorunda qeyd edin və səhifəni brauzerinizdə yenidən yükləyin

İndi fərdiləşdirdiyiniz ilk linki vurmalısınız. Bu alınmadısa, tamamdır! Yenidən başlayın və ya tıkladığınızda bağlantı açılana qədər addımlarınızı təkrarlayın.

İlk bağlantınızı işlədikdən sonra … Başlanğıc səhifənizdəki bütün adları və bağlantıları fərdiləşdirənə qədər etməniz lazım olan hər bir hissədəki hər bir link üçün bu addımları təkrarlamaqdır! Yalnız bir tutma var: bir keçid tıkladığınızda, yeni bağlantı eyni sekmədə və ya pəncərədə açıldıqda başlanğıc səhifəniz sadəcə yox olur.

Çox əlverişli deyil … Bəs əlaqələrin açılma yolunu necə dəyişmək olar? Nümunə olaraq ilk bağlantımızdan istifadə edək! Yəqin xatırlayırsınız ki, bura tıkladığınızda brauzerinizə bir keçid açmasını söylədiyimiz yer:

Rəqəmsal qəzetlər

Ancaq nə olduğunu təxmin edin - bu da bağlantının necə açılacağına qərar verdiyimiz yerdir! Bunu dəyişdirin:

Rəqəmsal qəzetlər

İndi işinizi qeyd edin və səhifəni brauzerinizdə yenidən yükləyin: tıkladığınızda link indi yeni bir sekmədə açılacaq! Beləliklə, ehtiyac duyduğunuz zaman başlanğıc səhifənizi açıq saxlaya bilərsiniz.

Addım 7: Başlanğıc səhifənizə bir şəkil əlavə edin

İndi bütün bağlantılarımız qurulduqdan sonra başlanğıc səhifəmizi bəzəmək vaxtıdır! Bu şablonda ekranın sağ tərəfində xüsusi bir şəkil üçün yer var. İndi Notepad ++ -da yenidən bu xətti axtarın:

şablonun sonunda. Bəyəndiyiniz bir şəkil seçin, onu başlanğıc səhifənizin olduğu qovluğa köçürün və "library_picture.jpg" ni şəklinizin fayl adı ilə əvəz edin. Məsələn, faylımın adı "your_picture.jpg" dirsə, xətt belə olur:

Dəyişikliklərinizi qeyd edin və bir daha brauzerinizdə başlanğıc səhifəsini yenidən yükləyin.

Başlanğıc səhifənizin kodu və şəkil fayllarınız eyni qovluqda olduğundan, səhifəni yeniləyərkən şəkil avtomatik olaraq yüklənməlidir. Əks təqdirdə, faylınızın adını yoxlayın - ümumiyyətlə səhv etdiyim yer budur!

Smartfon divar kağızları bu layihə üçün çox uyğundur. Ümumiyyətlə, hər hansı bir şaquli şəkil (və ya xülya adamları 16: 9 nisbətində "portret yönümlü şəkil" deyirlər) bu mövzuda! Ancaq nə başlasanız da, başlanğıc səhifəmizin düzeni uyğunlaşacaq.

Şəkiliniz görünsə, təbrik edirəm, çox işiniz bitdi!

Addım 8: Biraz Təmizləmə

O anda istifadə etmədiyiniz əlavə bölmələriniz varsa, onları silməkdən çekinmeyin! Məsələn, deyək ki, Bölmə 6 -dan istifadə etmirsiniz. Tapın:

• Bölmə 6
• Maddə 1
• Maddə 2
• Maddə 3

Bu sətirləri seçin və silin, faylınızı qeyd edin və hər şeyin getdiyinə əmin olmaq üçün faylı brauzerinizdə yeniləyin.

Çox tez getdiyim üçün hər şeyi pozduğum bir addımdır, buna görə birdən bir şey işləmirsə xatırlayın: dərindən nəfəs alın və klaviaturanızdakı CTRL+Z düymələri ilə etdiklərinizi geri qaytarın!

Addım 9: Həqiqi Başlanğıc Səhifəsi Olun

Başlanğıc səhifəsi istədiyimiz bütün bağlantıları açdığından və istədiyimiz kimi göründüyündən, brauzerinizi işə salanda onu açmağın vaxtı gəldi!

Bu nöqtədə, başlanğıc səhifəmdəki qovluğu Windows Sənədlər qovluğuna kəsərək yapışdıraraq hər şeyi kompüterlərimdən uzaqlaşdırmaq istəyirəm. Başlanğıc səhifənizdə işləməyi bitirdinizsə, bunu edin!

Sonrakı: çox güman ki, brauzeriniz ən sevdiyiniz axtarış motoru və ya hətta boş bir səhifə ilə açılır.

Firefox və digər brauzerləri fərdiləşdirmək üçün təlimatları aşağıda tapa bilərsiniz:

• Firefox təlimatları
• Google Chrome təlimatları
• Safari təlimatları
• Microsoft Edge təlimatları

Brauzerinizin təlimatlarına əməl etməyi bitirdikdən sonra hamısını bağlayın və yenidən açın. Başlanğıc səhifəniz brauzeriniz işə salındıqda görünürsə, siz bunu etdiniz!

Bu alınmadısa, yenidən brauzerinizin təlimatlarını nəzərdən keçirin və heç bir şeyi qaçırmadığınızdan əmin olun. Ən pisi ən pisinə gəlir, sonra bütün işlərinizi saxladıqdan sonra kompüterinizi yenidən başladın. 10 -dan 9 dəfə hər şeyi həll edir!

Addım 10: Hər şey bitdi! Və daha çox bilmək istərdinizmi?

Başlanğıc səhifənizi bitirdiyiniz üçün təbrik edirik! Çox görünə bilməz, amma bir veb saytının ən vacib tikinti bloklarından birini mənim etdiyim kimi kodlamağı öyrənmisiniz … Təxminən 20 il əvvəl!

Bundan zövq alsanız və başlanğıc səhifələri haqqında daha çox məlumat əldə etmək istəyirsinizsə, izləmək üçün dərin bir dovşan dəliyidir! Başlanğıc səhifə səyahətinizdə sizə kömək edəcək kiçik bir seçim:

• Əsas başlanğıc təlimatını sınamısınızmı? Yaxşı xəbər, haradan gəldiyi daha çoxdur! Daha çox ilham və inkişaf etmiş xüsusiyyətlər üçün digər təlimatları / stpg / tərəfindən yoxlayın!
• HTML və CSS kitabları üçün Johnson County Kitabxana kataloquna baxın və kitabxana kartınız və ya e -kartınızla e -kitablara da daxil ola bilərsiniz!
• Kitabxana kartınız Udemy -ə daxil olmaq imkanı verir və HTML, CSS və veb dizaynı ilə bağlı çox mükəmməl dərslərə malikdir.

Yaradıcılığınızdan çox qürur duyursanız, niyə #jocomakes hashtag ilə Twitter və ya İnstagram üzərindən ekran görüntüsünü bizimlə paylaşmırsınız? Müştərilərimizin nə düşündüyünü görmək həmişə xoşbəxtik!