Kendinize Özel, Minimalist Bir Başlangıç Sayfası Yapın!: 10 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:16

COVID-19 bir şey haline geldiğinden beri çoğunlukla uzaktan çalışmaya geçmek zorunda kaldınız mı? Aynı!

Evden bilgisayarlarımızla ve İnternet üzerinden çalışmak, genellikle iş, okul ve hatta eğlence için birçok web sitesini takip etmemiz gerektiği anlamına gelir!

Yer imleri her zaman göreve bağlı değildir, o halde kendimize, ihtiyacınız olan tüm bağlantılarla birlikte, yalnızca sizin için hazırlanmış özel bir başlangıç sayfası yapmaya ne dersiniz ve bu, her ihtiyaç duyduğunuzda Web tarayıcınızda açılır?

İşte ihtiyacınız olacak:

• Bir bilgisayar (bizimki Windows kullanıyor, ancak herhangi bir modern bilgisayar yapacak).
• İnternet bağlantısı.
• Yeni bir metin editörü Notepad++ kurulumu.

Hazır olduğunuzda, kendi başlangıç sayfası şablonumuzu kullanmaya başlayalım… Veya kendi başlangıç sayfanızı sıfırdan oluşturalım!

1. Adım: Bir Başlangıç Sayfası Oluşturun VEYA Özelleştirilmiş Şablonumuzu İndirin

Bu noktada iki seçeneğiniz var:

1. Özelleştirilmiş şablonumuzu indirin (talimatlar bu adımın biraz ilerisindedir) veya,
2. Bu temel başlangıç sayfası kılavuzunu izleyin; adım adım basit bir başlangıç sayfasının yapı taşlarında size yol gösterecek - ve bu özel başlangıç sayfasını oluşturmak için izlediğimiz kılavuz da bu!

Bir öğreticiyi neden bir eğitimde tavsiye edesiniz? MakerSpace kolaylaştırıcıları olarak işimiz sadece size işlerin nasıl yapılacağını göstermek değil, aynı zamanda sizi Maker kültürüne ve orada bulunan kaynaklara bağlamaktır. Bu kılavuz, birçok başlangıç sayfası tasarımcısının başladığı yerlerden biridir, bu yüzden sizinle paylaşmak mantıklı geldi!

Vaktiniz varsa, 2. seçenekle devam edin, ancak yoksa, daha sonra istediğiniz zaman temel başlangıç sayfası kılavuzuna başvurabilirsiniz! Bu eğitim için özel şablonumuzu indirdiğinizi varsayacağız! İndirmek için:

1. Github'da DIY_startpage depomuzu açın.
2. Bir açılır menüyü açmak için büyük yeşil Kod düğmesine tıklayın.
3. Proje için tüm dosyaları indirmek için ZIP İndir'e tıklayın.
4. Az önce indirdiğiniz ZIP dosyasındaki tüm dosyaları seçtiğiniz bir konuma çıkarın.

GitHub, dünyanın her yerinden programcıların ve tasarımcıların kodlarını ve yarattıklarını başkalarıyla paylaştığı bir web sitesidir: ayrıca her türden projede başkalarıyla işbirliği yapmanıza olanak tanır. Sonuç olarak, her Maker'ın bilmesi gereken harika bir araçtır!

Şimdi tercih ettiğiniz tarayıcıyı başlatın: Firefox'u gerçekten seviyorum, ancak şablonumuz hemen hemen tüm yeni Web tarayıcılarında çalışmalıdır, bu nedenle Edge, Chrome veya Safari'yi kullanmaktan çekinmeyin!

Son olarak, tarayıcınızda VE Notepad++'da "DIY_startpage.html" dosyasını açın ve onu özelleştirmeye başlayalım!

Adım 2: Favorilerinizi Listeleyin

Başlangıç sayfanızın olması harika. Kullanışlı bir başlangıç sayfasına sahip olmak daha da iyi ve şu anda bizimki biraz boş görünüyor!

Düzenli olarak kontrol ettiğiniz ve takip etmeniz gereken şeyler nelerdir? Sabahları hangi web çizgi romanlarını okursunuz? Hangi haber sitesini kontrol etmeyi seviyorsunuz? Bunlar, başlangıç sayfanıza gelmesi gereken şeylerdir.

Bu eğitim için sadece favorilerimden bazılarını kullanacağım. Spoiler uyarısı, kütüphaneden bolca link! Ama aynı zamanda ilham almak için en sevdiğim Maker'lardan bazıları ve en sevdiğim eğlencelerden bazıları. Tüm bu öğeleri aşağıda bir bağlantı ile örnek olarak bulabilirsiniz!

Haber ve Okuma

• Dijital Gazeteler
• Dijital Kitaplar
• Dijital Dergiler

Öğrenme

• W3C Okulları
• Udemy
• Mango Dilleri

Müzik

• Yerel Dinle
• Şarkı Patlayıcı
• Jamendo Müzik Radyoları

Yapımcı kültürü

• çekirdek77
• Lumecluster
• melapropizmler

Her kategori için favorilerimden üçünü seçtim, ancak bundan daha fazlasını veya daha azını sorunsuzca seçebilmelisiniz - başlangıç sayfanızın düzeni, sayı veya kaynaklara göre otomatik olarak ayarlanacaktır!

Tüm favorilerinizi listeledikten sonra, onları bir dakikalığına bir kenara koyalım ve genel başlangıç sayfası şablonumuzu biraz daha siz yapmaya çalışalım.

3. Adım: Yazı Tipinizi Özelleştirin

Notepad++'ı başlatın, "DIY_startpage.html" dosyanızı açmak için Dosya > Aç'a tıklayın. Baktığınız şey, tarayıcınızdaki sayfadan çok farklı görünüyor, değil mi? Bu, sayfanızın kodudur ve tarayıcılar, biraz daha göz dostu görünmesi için bu kodu yorumlar ve yapmamız gereken her şeyi yapar.

Başlangıç sayfası projemizin kodu iki ilgili dilde yazılmıştır: HTML ve CSS. HTML genellikle bir sayfanın içeriğinden, CSS ise bir sayfanın görünümünden sorumludur.

Başlangıç sayfanızı özelleştirmek için bu ilk bölümü arayın:

html {

hizalama öğeleri: merkez; renk: #313131; ekran: esnek; yazı tipi: 22px "Courier New", Courier, monospace; yükseklik: %100; haklı içerik: merkez; kenar boşluğu: 0; }

Başlangıç sayfamızın bu bölümü, sayfamızdaki öğelerin genel görünümüne odaklanır. Çizgi:

yazı tipi: 22px "Courier New", Courier, monospace;

özellikle başlangıç sayfasında kullandığımız yazı tipiyle ilgilidir ve sayfanızdaki metnin nasıl görüneceğini tanımlayan iki parametreye sahiptir: boyut ve yazı tipi ailesi.

• size - "22px" budur. Metninizin ekrandaki boyutu pikselin kısaltması olan "px" olarak tanımlanır.
• yazı tipi ailesi - Kullanmak istediğimiz yazı tiplerini burada listeleriz. En genel aileyi gerçekten kullanmak istediğiniz yazı tipinden birkaçını listelemek genellikle iyi bir fikirdir. Bu yazı tipleri, kullandığınız tarayıcıya bağlıdır, bu nedenle en belirgin olanı mevcut değilse, tarayıcı bir sonrakini deneyecektir ve bu böyle devam eder.

w3schools'un CSS Web Güvenli Yazı Tipleri sayfası, harika görünen, aradığınız stili koruyan ve çoğu modern tarayıcıda çalışacak harika bir yazı tipi kombinasyonları listesine sahiptir.

Örneğin, şunları değiştirebilirsiniz:

"Kurye Yeni", Kurye, monospace;

ile birlikte:

"Palatino Linotype", "Kitap Antiqua", Palatino, serif;

veya:

"Comic Sans MS", el yazısı, sans-serif;

Dosyanızı kaydedin ve değişiklikleri görmek için tarayıcınızdaki sayfayı yenileyin! Beğenmedin mi? Sorun değil! Beğendiğiniz bir kombinasyon bulana kadar CSS Web Güvenli Yazı Tipleri ile oynayın.

Adım 4: Başlık Alıntınızı Özelleştirin

HTML dosyanızda bu bölümü arayın:

Bu senin başlangıç sayfan! Eğlence

Beğendiğiniz bir teklif seçin ve kodu değiştirin! Kendim için seçtim

Bir kez daha ihlal üzerine

Başlangıç sayfanızın düzeni, sayfayı tarayıcınızda yeniden yüklediğiniz anda teklifinize uyacak şekilde uyarlanmalıdır: Firefox'ta bu, klavyenizde CTRL+R tuşlarına basmak veya Yeniden Yükle simgesine tıklamak anlamına gelir. Şimdi beğendiğiniz bir teklif seçin (veya daha sonra bir şey seçin!) ve başlangıç sayfanızın bölümlerini özelleştirmeye başlayalım!

Adım 5: Bölümlerinizi Özelleştirin

Artık beğendiğiniz bir yazı tipi kombinasyonu bulduğunuza ve size ilham verecek harika bir teklifiniz olduğuna göre, devam edelim ve bölümlerinizi özelleştirelim.

Başlangıç sayfamızı Github'dan indirdiyseniz, özelleştirebileceğiniz 6 bölümünüz var: orijinal kılavuzda yalnızca 4 bölüm var, ancak son zamanlarda hayatımızın giderek daha fazla yönü çevrimiçi hale geldiğinden, devam ettim ve her ihtimale karşı daha fazlasını ekledim.

İlk bölümü bulun ve ihtiyacımız olanı yazın. Bir hatırlatma olarak, ilk bölümüm "Haberler ve Okuma":

Dosyanız hala Notepad++ ile açıkken aşağıdaki kod satırını bulun:

Bölüm 1

ve listenizdeki en çok kullanacağınızı düşündüğünüz kategori ile değiştirin.

Birçoğumuz belgeleri okumaya sol üstten başlamaya alıştığımız için, gözleriniz doğal olarak orası oraya gidebilir - bu yüzden bundan yararlanın ve en önemli noktamızı oraya bırakın! Ancak farklı bir okuma yönü olan bir kültürden geliyorsanız veya sadece farklı çalışıyorsanız, bunu kendinize göre özelleştirin. Sonuçta bu sizin başlangıç sayfanız: Sizin için en iyisini siz bilirsiniz!

Bir bölüm başlığı düştü, beş kaldı! Şunu yazan kod satırını arayın:

Bölüm 2

Değiştirin, ardından listenizin sonuna gelene kadar bölüm başlıklarını aramaya ve değiştirmeye devam edin. Tüm bölümleri kullanmıyorsanız, bırakın! Bu eğitimin sonunda da küçük bir temizlik yapacağız.

Bölümleri özelleştirmeyi bitirdikten sonra, değişikliklerinizi Notepad++'a kaydedin ve sayfayı tarayıcınıza yeniden yükleyin. Tüm bölüm başlıkları onları koyduğunuz yerde görünmelidir: artık her bölümdeki bağlantıları özelleştirebiliriz!

6. Adım: Bağlantılarınızı Özelleştirin

Her bölümdeki bağlantıları özelleştirmek biraz daha karmaşık ama kesinlikle daha zor değil!

Bu sefer sadece bağlantıların adını değiştirmiyoruz, aynı zamanda onlarla yapabileceklerinizi de değiştiriyoruz! Her bölümdeki her öğe tıklanabilir olacak, farklı bir web sitesine bağlanacak. Bonus, yeni bir pencerede açılmasını isteyip istemediğinize de karar verebilirsiniz!

İlk önce, şuna benzeyen bir satır arayın:

link_one_name

Bu "link_one_name" bitini seçin ve kendi metninizle değiştirin. Örneğin, X adımındaki listeme dayanan ilk bölümdeki ilk bağlantı "Dijital Gazeteler" olduğundan şunu elde ederiz:

Dijital Gazeteler

Ardından, bağlantıyı özelleştirmeye çalışalım! "link.one" bitini ilk bağlantınızla değiştirin. Benim için bu, dijital gazetelerimizin bağlantısı olacak, yani şöyle görünecek:

Dijital Gazeteler

Çalışmanızı metin düzenleyiciye kaydedin ve sayfayı tarayıcınızda yeniden yükleyin

Artık özelleştirdiğiniz ilk bağlantıya tıklayabilmeniz gerekir. Eğer almadıysa, sorun değil! Yeniden başlayın veya tıkladığınızda bağlantı açılana kadar adımlarınızı takip edin.

İlk bağlantınızı çalıştırdıktan sonra… Yapmanız gereken tek şey, başlangıç sayfanızdaki tüm adları ve bağlantıları özelleştirene kadar her bölümdeki her bağlantı için bu adımları tekrarlamaktır! Yine de tek bir sorun var: Bir bağlantıya tıkladığınızda, yeni bağlantı aynı sekmede veya pencerede açılırken başlangıç sayfanız kayboluyor.

Pek uygun değil… Peki, bağlantıların açılma şeklini değiştirmeye ne dersiniz? Örnek olarak ilk bağlantımızı kullanalım! Tarayıcınıza tıkladığınızda bir bağlantı açmasını söylediğimiz yeri muhtemelen hatırlıyorsunuzdur:

Dijital Gazeteler

Ama bil bakalım ne oldu - orası aynı zamanda bağlantının nasıl açılacağına da karar verdiğimiz yer! Bunu şu şekilde değiştirin:

Dijital Gazeteler

Şimdi çalışmanızı kaydedin ve sayfayı tarayıcınızda yeniden yükleyin: tıkladığınızda bağlantı şimdi yeni bir sekmede açılacak! Bu şekilde, ihtiyaç duyduğunuzda başlangıç sayfanızı açık tutabilirsiniz.

7. Adım: Başlangıç Sayfanıza Bir Resim Ekleyin

Artık tüm bağlantılarımız kurulduğuna göre, başlangıç sayfamızı dekore etme zamanı! Bu şablon, ekranın sağ tarafında özel bir resim için yer içerir. Şimdi Notepad++ 'a geri dönün, şu satırı arayın:

şablonun sonuna kadar. Beğendiğiniz bir resim seçin, onu başlangıç sayfası dosyanızla aynı klasöre taşıyın ve "library_picture.jpg" dosyasını resminizin dosya adıyla değiştirin. Örneğin, dosyamın adı "sizin_resminiz.jpg" ise satır şöyle olur:

Değişikliklerinizi kaydedin ve bir kez daha tarayıcınızda başlangıç sayfasını yeniden yükleyin.

Başlangıç sayfanızın kodu ve resim dosyalarınız aynı klasörde olduğundan, sayfayı yenilediğinizde resim otomatik olarak yüklenmelidir. Olmadıysa, dosyanızın adını kontrol edin - genellikle yanlış anladığım yer burasıdır!

Akıllı telefon duvar kağıtları bu proje için çok uygundur. Genel olarak, herhangi bir dikey resim (veya fantazi insanların dediği gibi 16:9 oranlı "portre yönelimli resim") bu konuda! Ancak başlangıç sayfamızın düzeni, ona ne atarsanız atın uyum sağlayacaktır.

Resminiz ortaya çıkarsa, tebrikler, hemen hemen işiniz bitti!

8. Adım: Biraz Temizlemek

Bu noktada kullanmadığınız fazladan bölümleriniz varsa, bunları silmekten çekinmeyin! Örneğin, Bölüm 6'yı kullanmadığınızı varsayalım. Bul:

• 6. Bölüm
• Madde 1
• 2. öğe
• madde 3

Bu satırları seçip silin, dosyanızı kaydedin ve her şeyin gittiğinden emin olmak için dosyayı tarayıcınızda yenileyin.

Bu genellikle çok hızlı gittiğim için her şeyi kırdığım adımdır, bu nedenle aniden bir şey işe yaramazsa şunu unutmayın: derin bir nefes alın ve klavyenizdeki CTRL+Z tuş kombinasyonuyla az önce yaptığınız şeyi geri alın!

9. Adım: Onu Gerçek Bir Başlangıç Sayfası Yapmak

Artık başlangıç sayfası istediğimiz tüm bağlantıları açtığına ve görünmesini istediğimiz şekilde göründüğüne göre, tarayıcınızı başlattığınızda onu açmanın zamanı geldi!

Bu noktada, başlangıç klasörümü kesip Windows'un Belgeler klasörüne yapıştırarak bilgisayarımın Masaüstünden her şeyi uzak tutmayı seviyorum. Yani başlangıç sayfanızda çalışmayı bitirdiyseniz, bunu yapın!

Sonraki: büyük olasılıkla tarayıcınız favori arama motorunuzla veya belki de boş bir sayfayla açılır.

Firefox'u ve diğer tarayıcıları özelleştirmek için talimatları aşağıda bulabilirsiniz:

• Firefox talimatları
• Google Chrome talimatları
• Safari talimatları
• Microsoft Edge talimatları

Tarayıcınızın talimatlarını izledikten sonra hepsini kapatın ve yeniden açın. Tarayıcınız başlatılırken başlangıç sayfanız görünüyorsa, başardınız!

Olmadıysa, tarayıcınızın talimatlarını tekrar gözden geçirin ve hiçbir şeyi kaçırmadığınızdan emin olun. Daha da kötüsü, daha sonra tüm çalışmalarınızı kaydettikten sonra bilgisayarınızı yeniden başlatın. 10 üzerinden 9 kez, bu her şeyi çözer!

Adım 10: Tamamlandı! Ve Daha Fazlasını Bilmek İster misiniz?

Başlangıç sayfanızı tamamladığınız için tebrikler! Çok fazla görünmeyebilir, ancak bir web sitesinin en önemli yapı taşlarından birini benim yaptığım gibi kodlamayı yeni öğrendiniz…Yaklaşık 20 yıl önce!

Bunu beğendiyseniz ve başlangıç sayfaları hakkında daha fazla bilgi edinmek istiyorsanız, takip etmeniz gereken derin bir tavşan deliği! Başlangıç sayfası yolculuğunuzda size yardımcı olacak küçük bir seçim:

• Temel başlangıç sayfası kılavuzunu denediniz mi? İyi haber, geldiği yerde daha fazlası var! Daha fazla ilham almak ve gelişmiş özellikler için /stpg/'nin diğer kılavuzlarına göz atın!
• HTML ve CSS ile ilgili kitaplar için Johnson County Kütüphanesi kataloğuna göz atın - ve kütüphane kartınız veya e-kartınız ile e-Kitaplara da erişebilirsiniz!
• Kitaplık kartınız ayrıca Udemy'ye erişmenizi sağlar ve HTML, CSS ve web tasarımı konusunda da oldukça eksiksiz sınıflara sahiptir.

Yaratıcılığınızla çok gurur duyuyorsanız, neden ekran görüntüsünü alıp Twitter veya Instagram üzerinden #jocomakes hashtag'iyle bizimle paylaşmıyorsunuz? Müşterilerimizin ne bulduğunu görmek bizi her zaman mutlu eder!