Jadikan Diri Anda sebagai Halaman Permulaan Minimalistik yang Adat !: 10 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:07

Adakah anda terpaksa beralih ke pekerjaan yang jauh kerana COVID-19 menjadi perkara biasa? Sama!

Bekerja dari rumah dengan komputer kita dan melalui Internet sering kali bermaksud bahawa kita harus menjejaki banyak laman web untuk bekerja, untuk sekolah atau bahkan … untuk bersenang-senang!

Penanda halaman tidak selalu sesuai dengan tugas, jadi bagaimana menjadikan diri kita sebagai halaman permulaan khusus yang disesuaikan hanya untuk anda, dengan semua pautan yang anda perlukan, dan yang terbuka di penyemak imbas Web anda setiap kali anda memerlukannya?

Inilah yang anda perlukan:

• Komputer (komputer kita menjalankan Windows, tetapi komputer moden akan berfungsi).
• Sambungan ke Internet.
• Pemasangan editor teks baru Notepad ++.

Apabila anda sudah bersedia, mari mulakan dengan menggunakan templat halaman permulaan kami sendiri … Atau membuat templat anda sendiri dari awal!

Langkah 1: Buat Halaman Permulaan ATAU Muat turun Templat Tersuai Kami

Pada ketika ini anda mempunyai dua pilihan:

1. Muat turun templat kami yang disesuaikan (arahan ikuti sedikit kemudian dalam langkah ini) atau,
2. Ikuti panduan asas permulaan ini; ini akan memandu anda melalui blok bangunan halaman permulaan yang sederhana demi langkah - dan itulah panduan yang kami ikuti untuk membina halaman permulaan khusus ini!

Mengapa mengesyorkan tutorial … dalam tutorial? Tugas kami sebagai fasilitator MakerSpace bukan hanya untuk menunjukkan kepada anda bagaimana melakukan sesuatu: ia juga untuk menghubungkan anda dengan budaya dan sumber yang ada di luar sana. Panduan ini adalah salah satu tempat di mana banyak pereka halaman permulaan bermula, jadi masuk akal untuk membagikannya kepada anda!

Sekiranya anda mempunyai masa, teruskan dengan pilihan # 2 tetapi jika tidak, anda boleh merujuk panduan asas permulaan kemudian! Untuk tutorial ini, kami hanya menganggap anda memuat turun templat khusus kami! Untuk memuat turunnya:

1. Buka repositori DIY_startpage kami di Github.
2. Klik pada butang Kod hijau besar untuk membuka menu lungsur.
3. Klik pada Muat turun ZIP untuk memuat turun semua fail untuk projek tersebut.
4. Ekstrak semua fail dari fail ZIP yang baru anda muat turun ke lokasi pilihan anda.

GitHub adalah laman web di mana pengaturcara dan pereka di seluruh dunia berkongsi kod dan ciptaan mereka dengan orang lain: ini juga membolehkan anda berkolaborasi dengan orang lain dalam pelbagai jenis projek. Intinya adalah, ia adalah alat yang hebat yang harus diketahui oleh setiap Pembuat!

Sekarang mulakan penyemak imbas pilihan anda: Saya sangat menyukai Firefox, tetapi templat kami semestinya berfungsi pada mana-mana penyemak imbas Web baru-baru ini, jadi jangan ragu untuk menggunakan Edge, Chrome atau Safari!

Akhirnya, buka fail "DIY_startpage.html" di penyemak imbas anda DAN di Notepad ++, dan mari mula menyesuaikannya!

Langkah 2: Senaraikan Kegemaran Anda

Mempunyai halaman permulaan sangat bagus. Mempunyai halaman permulaan yang berguna adalah lebih baik dan sekarang, kita kelihatan agak kosong!

Apakah perkara yang selalu anda periksa dan perlu anda perhatikan? Komik web apa yang anda baca pada waktu pagi? Apakah laman web berita yang ingin anda periksa? Ini adalah perkara-perkara yang harus tiba di halaman permulaan anda.

Untuk tutorial ini, saya hanya akan menggunakan beberapa kegemaran saya. Amaran spoiler, banyak pautan dari perpustakaan! Tetapi juga beberapa Pembuat kegemaran saya untuk inspirasi, dan beberapa hiburan kegemaran saya. Anda boleh mendapatkan semua item ini di bawah dengan pautan, sebagai contoh!

Berita dan Pembacaan

• Surat khabar Digital
• Buku Digital
• Majalah Digital

Belajar

• Sekolah W3C
• Udemy
• Bahasa Mangga

Muzik

• Dengarkan Tempatan
• Pencetus Lagu
• Radio Muzik Jamendo

Budaya pembuat

• Teras77
• Lumecluster
• Melapropisme

Saya memilih tiga kegemaran saya untuk setiap kategori, tetapi anda seharusnya dapat memilih lebih kurang daripada itu tanpa masalah - susun atur halaman permulaan anda akan menyesuaikan dengan nombor atau sumber secara automatik!

Setelah anda menyenaraikan semua kegemaran anda, mari kita ketepikan selama satu minit dan berusaha menjadikan templat halaman permulaan generik kami sedikit lagi.

Langkah 3: Sesuaikan Font Anda

Mulakan Notepad ++, klik pada File> Open untuk membuka fail "DIY_startpage.html" anda. Apa yang anda lihat kelihatan sangat berbeza dari halaman dalam penyemak imbas anda, bukan? Ini adalah kod halaman anda, dan penyemak imbas menafsirkan kod itu untuk menjadikannya kelihatan lebih mesra mata dan melakukan semua perkara yang perlu kita lakukan.

Kod untuk projek halaman permulaan kami ditulis dalam dua bahasa yang berkaitan: HTML dan CSS. HTML biasanya mengendalikan kandungan halaman, dan CSS bertanggung jawab atas penampilan halaman.

Cari bahagian pertama ini untuk menyesuaikan halaman permulaan anda:

html {

align-item: tengah; warna: # 313131; paparan: flex; fon: 22px "Kurier Baru", Kurier, monospace; tinggi: 100%; justify-content: pusat; margin: 0; }

Bahagian halaman permulaan kami memberi tumpuan kepada rupa umum item di halaman kami. Garisan itu:

fon: 22px "Kurier Baru", Kurier, monospace;

khusus untuk font yang kita gunakan di halaman awal dan mempunyai dua parameter yang menentukan seperti apa teks di halaman anda: ukuran dan keluarga fon.

• saiz - Itulah "22px". Ukuran teks anda di layar ditentukan dalam "px", kependekan dari piksel.
• keluarga fon - Di situlah kami menyenaraikan fon yang ingin kami gunakan. Adalah idea yang baik untuk menyenaraikan beberapa, dari fon yang anda benar-benar mahu menggunakan keluarga yang paling generik. Fon ini bergantung pada penyemak imbas yang anda gunakan, jadi jika yang paling khusus tidak tersedia, penyemak imbas akan mencuba yang berikutnya, dan seterusnya.

Halaman CSS Web Safe Font dari w3schools mempunyai senarai kombinasi fon yang hebat yang kelihatan hebat, berpegang pada gaya yang anda cari dan akan berfungsi pada kebanyakan penyemak imbas moden.

Contohnya, anda boleh menggantikan:

"Kurier Baru", Kurier, monospace;

dengan:

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

atau:

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

Simpan fail anda, dan muat semula halaman di penyemak imbas anda untuk melihat perubahannya! Tidak suka? Tiada masalah! Main-main dengan Fon Selamat Web CSS sehingga anda menemui gabungan yang anda suka.

Langkah 4: Sesuaikan Petikan Tajuk Anda

Cari bahagian ini dalam fail HTML anda:

Ini adalah halaman permulaan anda! Selamat mencuba

Pilih petikan yang anda suka, dan ganti kodnya! Untuk saya sendiri, saya memilih

Sekali lagi melakukan pelanggaran

Tata letak halaman permulaan anda harus disesuaikan dengan cepat agar sesuai dengan petikan anda sebaik sahaja memuatkan semula halaman di penyemak imbas anda: di Firefox, itu bermaksud menekan CTRL + R pada papan kekunci anda, atau mengklik ikon Muat semula. Pilih petikan yang anda suka sekarang (atau pilih sesuatu kemudian!) Dan mari kita berusaha menyesuaikan bahagian halaman permulaan anda!

Langkah 5: Sesuaikan Bahagian Anda

Sekarang setelah anda menemui gabungan fon yang anda suka dan anda mempunyai petikan yang bagus untuk memberi inspirasi kepada anda, mari teruskan dan sesuaikan bahagian anda.

Sekiranya anda memuat turun halaman awal kami dari Github, anda mempunyai 6 bahagian yang tersedia untuk disesuaikan: panduan asal hanya mempunyai 4, tetapi kerana semakin banyak aspek kehidupan kita telah bergerak dalam talian baru-baru ini, saya terus maju dan menambah lebih banyak berjaga-jaga.

Cari bahagian pertama dan taipkan perkara yang kita perlukan. Sebagai peringatan, bahagian pertama saya adalah "Berita dan Membaca":

Dengan fail anda masih terbuka di Notepad ++, cari baris kod berikut:

Seksyen 1

dan gantikannya dengan kategori dalam senarai yang anda rasa paling banyak anda gunakan.

Oleh kerana ramai di antara kita sudah terbiasa membaca dokumen dari kiri atas, di situlah mata anda mungkin secara semula jadi - jadi manfaatkan dari itu dan teruskan pergi ke sana yang paling penting! Tetapi jika anda berasal dari budaya dengan arah membaca yang berbeza, atau jika anda bekerja dengan cara yang berbeza, sesuaikan ini untuk diri anda sendiri. Ini adalah halaman permulaan anda: anda tahu apa yang terbaik untuk anda!

Satu bahagian tajuk bawah, lima lagi! Cari baris kod yang mengatakan:

Bahagian 2

Ubah, kemudian terus cari tajuk bahagian dan ubah sehingga anda sampai ke akhir senarai anda. Sekiranya anda tidak menggunakan semua bahagian, biarkan sahaja! Kami akan melakukan sedikit pembersihan pada akhir tutorial ini juga.

Setelah selesai menyesuaikan bahagian, simpan perubahan anda di Notepad ++ dan muatkan semula halaman di penyemak imbas anda. Semua tajuk bahagian mesti dipaparkan di mana anda meletakkannya: sekarang kami dapat menyesuaikan pautan di setiap bahagian!

Langkah 6: Sesuaikan Pautan Anda

Menyesuaikan pautan di setiap bahagian sedikit lebih terlibat tetapi pastinya tidak lebih sukar!

Kali ini kami tidak hanya menukar nama pautan, kami juga mengubah apa yang boleh anda lakukan dengan mereka! Setiap item di setiap bahagian akan dapat diklik, pautan ke laman web lain. Bonus, anda juga boleh memutuskan sama ada anda mahu dibuka di tetingkap baru atau tidak!

Pertama, cari garis yang kelihatan seperti:

pautan_satu_nama

Pilih bit "link_one_name" itu dan gantikannya dengan teks anda sendiri. Sebagai contoh, pautan pertama di bahagian pertama berdasarkan senarai saya dari langkah X adalah "Surat Khabar Digital" jadi kami mendapat:

Surat khabar Digital

Seterusnya, mari berusaha menyesuaikan pautan! Gantikan bit "link.one" dengan pautan pertama anda. Bagi saya, itu akan menjadi pautan ke surat khabar digital kami, jadi ia akan kelihatan seperti:

Surat khabar Digital

Simpan karya anda di editor teks, dan muatkan semula halaman di penyemak imbas anda

Anda kini boleh mengklik pautan pertama yang anda sesuaikan. Sekiranya tidak berlaku, tidak mengapa! Mulakan sekali lagi atau lacak semula langkah anda sehingga pautan terbuka apabila anda mengkliknya.

Setelah pautan pertama anda berfungsi … Nah, yang perlu anda lakukan adalah mengulangi langkah-langkah ini untuk setiap pautan di setiap bahagian, sehingga anda dapat menyesuaikan semua nama dan pautan di halaman permulaan anda! Hanya ada satu tangkapan: kemungkinan apabila anda mengklik pautan, halaman permulaan anda akan hilang begitu sahaja pautan baru dibuka di tab atau tetingkap yang sama.

Ia tidak begitu mudah… Jadi bagaimana dengan mengubah cara pautan dibuka? Mari gunakan pautan pertama kami sebagai contoh! Anda mungkin ingat bahawa di sini kami memberitahu penyemak imbas anda untuk membuka pautan apabila anda mengkliknya:

Surat khabar Digital

Tetapi tebak - di situlah kami memutuskan bagaimana pautan itu akan dibuka! Tukar kepada:

Surat khabar Digital

Sekarang simpan kerja anda, dan muatkan semula halaman di penyemak imbas anda: pautan sekarang akan dibuka di tab baru apabila anda mengkliknya! Dengan cara itu anda dapat membuka halaman permulaan anda apabila anda memerlukannya.

Langkah 7: Tambahkan Gambar ke Halaman Permulaan Anda

Sekarang semua pautan kami disiapkan, sudah tiba masanya untuk menghiasi halaman permulaan kami! Templat ini mempunyai ruang untuk gambar tersuai di sebelah kanan skrin. Sekarang kembali ke Notepad ++, cari baris ini:

sepanjang jalan di hujung templat. Pilih gambar yang anda suka, pindahkan ke folder yang sama dengan fail halaman awal anda, dan ganti "library_picture.jpg" dengan nama fail gambar anda. Sebagai contoh, jika nama fail saya "your_picture.jpg" baris menjadi:

Simpan perubahan anda dan, sekali lagi, muatkan semula halaman permulaan di penyemak imbas anda.

Oleh kerana kod halaman awal dan fail gambar anda berada di folder yang sama, gambar akan dimuat secara automatik semasa anda memuat semula halaman. Sekiranya tidak, periksa nama fail anda - biasanya di sinilah saya salah!

Kertas dinding telefon pintar sangat sesuai untuk projek itu. Secara amnya, sebarang gambar menegak (atau seperti yang dikatakan orang mewah "gambar orientasi potret" dengan nisbah 16: 9) dalam hal ini! Tetapi susun atur halaman awal kami akan menyesuaikan diri tidak kira apa yang anda lemparkan.

Sekiranya gambar anda muncul, selamat, anda sudah selesai!

Langkah 8: Membersihkan Sedikit

Sekiranya anda mempunyai bahagian tambahan yang tidak anda gunakan pada masa itu, sila hapus! Sebagai contoh, katakan anda tidak menggunakan Bahagian 6. Cari:

• Bahagian 6
• Perkara 1
• Perkara 2
• Perkara 3

Pilih dan hapus baris ini, simpan fail anda dan muat semula fail di penyemak imbas anda untuk memastikan semuanya hilang.

Ini biasanya merupakan langkah untuk memecahkan segalanya kerana saya terlalu cepat, jadi jika sesuatu tiba-tiba tidak berfungsi ingat: tarik nafas panjang, dan buat semula apa yang baru anda lakukan dengan kombinasi kekunci CTRL + Z pada papan kekunci anda!

Langkah 9: Menjadikannya sebagai Halaman Permulaan Sebenar

Sekarang halaman permulaan membuka semua pautan yang kita mahukan, dan kelihatan seperti yang kita mahukan, masa untuk membuatnya terbuka semasa anda memulakan penyemak imbas anda!

Pada ketika itu, saya ingin menjauhkan semuanya dari Desktop komputer saya dengan memotong dan menampal folder halaman permulaan saya ke dalam folder Dokumen Windows. Oleh itu, jika anda sudah selesai bekerja di halaman permulaan anda, lakukan itu!

Seterusnya: kemungkinan penyemak imbas anda dibuka dengan enjin carian kegemaran anda, atau mungkin juga halaman kosong.

Anda boleh mendapatkan arahan untuk menyesuaikan Firefox dan juga penyemak imbas lain di bawah:

• Arahan Firefox
• Arahan Google Chrome
• Arahan Safari
• Arahan Microsoft Edge

Setelah selesai mengikuti arahan untuk penyemak imbas anda, tutup semuanya dan buka semula. Sekiranya halaman permulaan anda muncul semasa penyemak imbas anda dilancarkan, anda berjaya!

Sekiranya tidak berlaku, baca arahan untuk penyemak imbas anda sekali lagi dan pastikan anda tidak kehilangan apa-apa. Yang lebih buruk akan menjadi yang paling teruk, kemudian mulakan semula komputer anda setelah menyimpan semua kerja anda. 9 kali daripada 10, yang menyelesaikan semuanya!

Langkah 10: Selesai! Dan, Adakah Anda Ingin Mengetahui Lebih Lanjut?

Selamat menyelesaikan halaman permulaan anda! Mungkin tidak banyak, tetapi anda baru sahaja belajar membuat kod salah satu blok bangunan yang paling penting dari laman web seperti yang saya lakukan… Lebih kurang 20 tahun yang lalu!

Sekiranya anda menikmati ini dan ingin mengetahui lebih lanjut mengenai halaman permulaan, ini adalah lubang arnab yang mendalam untuk diikuti! Berikut adalah sedikit pilihan untuk membantu anda dalam perjalanan halaman permulaan anda:

• Adakah anda mencuba panduan asas permulaan? Berita baik, ada lagi dari mana asalnya! Lihat panduan lain oleh / stpg / untuk lebih banyak inspirasi dan ciri canggih!
• Lihat katalog Perpustakaan County Johnson untuk buku-buku mengenai HTML dan CSS - dan dengan kad perpustakaan atau e-kad anda juga mempunyai akses ke e-book!
• Kad perpustakaan anda juga memberi anda akses ke Udemy, dan ia juga mempunyai beberapa kelas yang sangat lengkap mengenai HTML, CSS dan reka bentuk web.

Sekiranya anda sangat bangga dengan ciptaan anda, mengapa anda tidak membuat tangkapan layar dan membagikannya kepada kami melalui Twitter atau Instagram dengan hashtag #jocomakes? Kami sentiasa gembira melihat apa yang disediakan oleh pelanggan kami!