Zrób sobie niestandardową, minimalistyczną stronę startową!: 10 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:27

Czy musiałeś przejść głównie na pracę zdalną, odkąd COVID-19 stał się czymś? Podobnie!

Praca w domu z komputerami i przez Internet często oznacza, że musimy śledzić wiele stron internetowych do pracy, szkoły, a nawet… dla zabawy!

Zakładki nie zawsze sprostają zadaniu, więc co powiesz na stworzenie niestandardowej strony startowej dostosowanej specjalnie dla Ciebie, ze wszystkimi potrzebnymi linkami, która otwiera się w Twojej przeglądarce za każdym razem, gdy tego potrzebujesz?

Oto, czego potrzebujesz:

• Komputer (nasz działa z systemem Windows, ale wystarczy każdy nowoczesny komputer).
• Połączenie z Internetem.
• Świeża instalacja edytora tekstu Notepad++.

Kiedy będziesz gotowy, zacznijmy korzystać z naszego własnego szablonu strony startowej… Lub tworzyć własny od podstaw!

Krok 1: Utwórz stronę startową LUB pobierz nasz spersonalizowany szablon

W tym momencie masz dwie możliwości:

1. Pobierz nasz spersonalizowany szablon (instrukcje znajdują się nieco później w tym kroku) lub
2. Postępuj zgodnie z tym podstawowym przewodnikiem po stronie startowej; przeprowadzi Cię krok po kroku przez elementy składowe prostej strony startowej - i to jest przewodnik, który zastosowaliśmy, aby zbudować tę niestandardową stronę startową!

Dlaczego warto polecić samouczek…w samouczku? Nasza praca jako facylitatorów MakerSpace to nie tylko pokazanie Ci, jak to zrobić: to także połączenie Cię z kulturą Maker i dostępnymi tam zasobami. Ten przewodnik jest jednym z miejsc, w którym zaczyna wielu projektantów stron startowych, więc warto się nim z Tobą podzielić!

Jeśli masz czas, skorzystaj z opcji nr 2, ale jeśli nie, zawsze możesz później zapoznać się z podstawowym przewodnikiem po stronie startowej! W tym samouczku założymy, że pobierasz nasz niestandardowy szablon! Aby go pobrać:

1. Otwórz nasze repozytorium DIY_startpage na Github.
2. Kliknij duży zielony przycisk Kod, aby otworzyć menu rozwijane.
3. Kliknij Pobierz ZIP, aby pobrać wszystkie pliki do projektu.
4. Wyodrębnij wszystkie pliki z właśnie pobranego pliku ZIP do wybranej lokalizacji.

GitHub to strona internetowa, na której programiści i projektanci z całego świata dzielą się swoim kodem i dziełami z innymi: pozwala również współpracować z innymi przy projektach wszelkiego rodzaju. Podsumowując, jest to świetne narzędzie, które każdy twórca powinien znać!

Teraz uruchom wybraną przeglądarkę: bardzo lubię Firefoksa, ale nasz szablon powinien działać na prawie każdej najnowszej przeglądarce internetowej, więc możesz używać Edge, Chrome lub Safari!

Na koniec otwórz plik "DIY_startpage.html" w przeglądarce ORAZ w Notepad ++ i zacznijmy go dostosowywać!

Krok 2: Lista swoich ulubionych

Posiadanie strony startowej jest świetne. Posiadanie przydatnej strony startowej jest jeszcze lepsze, a teraz nasza wygląda na trochę pustą!

Jakie rzeczy regularnie sprawdzasz i które musisz śledzić? Jakie komiksy czytasz rano? Jaką stronę z wiadomościami lubisz sprawdzać? To są rzeczy, które powinny trafić na Twoją stronę startową.

W tym samouczku użyję tylko niektórych z moich ulubionych. Uwaga, spoiler, dużo linków z biblioteki! Ale także niektórzy z moich ulubionych Twórców, którzy czerpią inspirację, i niektóre z moich ulubionych rozrywek. Możesz znaleźć wszystkie te pozycje poniżej z linkiem, jako przykład!

Wiadomości i czytanie

• Gazety cyfrowe
• Książki cyfrowe
• Czasopisma cyfrowe

Uczenie się

• Szkoły W3C
• Udemy
• Języki mango

Muzyka

• Słuchaj lokalnie
• Eksplozja pieśni
• Radia muzyczne Jamendo

Kultura twórcy

• Rdzeń77
• Lumeklaster
• Melapropizmy

Wybrałem trzy z moich ulubionych dla każdej kategorii, ale powinieneś być w stanie wybrać mniej lub więcej bez problemów - układ strony startowej automatycznie dostosuje się do liczby lub zasobów!

Po umieszczeniu wszystkich ulubionych na liście odłóżmy je na chwilę na bok i popracuj nad tym, aby nasz ogólny szablon strony początkowej był nieco bardziej dopasowany do Ciebie.

Krok 3: Dostosuj swoją czcionkę

Uruchom Notepad ++, kliknij Plik> Otwórz, aby otworzyć plik „DIY_startpage.html”. To, na co patrzysz, wygląda zupełnie inaczej niż strona w Twojej przeglądarce, prawda? Jest to kod Twojej strony, a przeglądarki interpretują ten kod, aby wyglądał trochę bardziej atrakcyjnie i robił wszystko, czego potrzebujemy.

Kod naszego projektu strony startowej jest napisany w dwóch powiązanych językach: HTML i CSS. HTML zwykle odpowiada za zawartość strony, a CSS za wygląd strony.

Poszukaj pierwszej sekcji, aby dostosować stronę początkową:

html {

wyrównaj-elementy: centrum; kolor: #313131; wyświetlacz: elastyczny; czcionka: 22px "Courier New", Courier, monospace; wzrost: 100%; uzasadnić-treść: centrum; margines: 0; }

Ta sekcja naszej strony startowej skupia się na ogólnym wyglądzie przedmiotów na naszej stronie. Linia:

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

dotyczy konkretnie czcionki, której używamy na stronie startowej i ma dwa parametry, które definiują wygląd tekstu na Twojej stronie: rozmiar i rodzinę czcionek.

• rozmiar - to właśnie jest "22px". Rozmiar tekstu na ekranie jest określony w „px”, skrót od pikseli.
• rodzina czcionek - tutaj wymieniamy czcionki, których chcielibyśmy użyć. Zwykle dobrym pomysłem jest wymienienie kilku, z rodziny czcionek, których naprawdę chcesz użyć, do najbardziej ogólnej rodziny. Te czcionki zależą od używanej przeglądarki, więc jeśli najbardziej szczegółowa nie jest dostępna, przeglądarka spróbuje następnej i tak dalej.

Strona CSS Web Safe Fonts od w3schools zawiera świetną listę kombinacji czcionek, które świetnie wyglądają, trzymają się stylu, którego szukasz i będą działać w większości nowoczesnych przeglądarek.

Na przykład możesz wymienić:

„Kurier Nowy”, Kurier, monospace;

z:

„Palatino Linotype”, „Book Antiqua”, Palatino, szeryf;

lub:

"Comic Sans MS", kursywą, bezszeryfową;

Zapisz plik i odśwież stronę w przeglądarce, aby zobaczyć zmiany! Nie lubisz tego? Nie ma problemu! Baw się bezpiecznymi czcionkami CSS, aż znajdziesz kombinację, która Ci się spodoba.

Krok 4: Dostosuj cytat z tytułu

Poszukaj tej sekcji w swoim pliku HTML:

To jest Twoja strona startowa! Cieszyć się

Wybierz wycenę, która Ci się podoba i zastąp kod! Dla siebie wybrałem

Jeszcze raz na wyłom

Układ strony startowej powinien dostosowywać się w locie, aby dopasować się do cytatu, gdy tylko ponownie załadujesz stronę w przeglądarce: w przeglądarce Firefox oznacza to naciśnięcie CTRL+R na klawiaturze lub kliknięcie ikony Załaduj ponownie. Wybierz wycenę, która Ci się podoba teraz (lub wybierz coś później!) i zabierzmy się do pracy, dostosowując sekcje Twojej strony startowej!

Krok 5: Dostosuj swoje sekcje

Teraz, gdy znalazłeś kombinację czcionek, która Ci się podoba i masz świetny cytat, który Cię zainspiruje, kontynuujmy i dostosujmy sekcje.

Jeśli pobrałeś naszą stronę startową z Github, masz 6 sekcji dostępnych do dostosowania: oryginalny przewodnik ma tylko 4, ale ponieważ coraz więcej aspektów naszego życia zostało ostatnio przeniesionych do sieci, poszedłem dalej i dodałem więcej na wszelki wypadek.

Znajdź pierwszą sekcję i po prostu wpisz to, czego potrzebujemy. Przypominam, że moja pierwsza sekcja to „Wiadomości i lektury”:

Mając plik nadal otwarty w Notepad ++, znajdź następujący wiersz kodu:

Sekcja 1

i zastąp ją kategorią z listy, która Twoim zdaniem będzie najczęściej używana.

Ponieważ wielu z nas jest przyzwyczajonych do rozpoczynania czytania dokumentów od lewego górnego rogu, to właśnie tam mogą naturalnie skierować się twoje oczy - więc skorzystaj z tego i zachowaj nasze najważniejsze przejście tam! Ale jeśli pochodzisz z kultury o innym kierunku czytania lub po prostu pracujesz inaczej, dostosuj to dla siebie. To w końcu Twoja strona startowa: wiesz, co jest dla Ciebie najlepsze!

Jedna sekcja w dół, pięć do końca! Poszukaj wiersza kodu, który mówi:

Sekcja 2

Zmień to, a następnie szukaj tytułów sekcji i zmieniaj je, aż dojdziesz do końca listy. Jeśli nie korzystasz ze wszystkich sekcji, zostaw je bez zmian! Na końcu tego samouczka również zrobimy małe porządki.

Po zakończeniu dostosowywania sekcji po prostu zapisz zmiany w Notepad ++ i ponownie załaduj stronę w przeglądarce. Wszystkie tytuły sekcji powinny pojawiać się tam, gdzie je umieściłeś: teraz możemy dostosować linki w każdej sekcji!

Krok 6: Dostosuj swoje linki

Dostosowywanie linków w każdej sekcji jest nieco bardziej skomplikowane, ale na pewno nie dużo trudniejsze!

Tym razem nie tylko zmieniamy nazwy linków, ale także to, co możesz z nimi zrobić! Każdy element w każdej sekcji stanie się klikalny, link do innej strony internetowej. Bonus, możesz również zdecydować, czy chcesz, aby otwierał się w nowym oknie, czy nie!

Najpierw poszukaj linii, która wygląda tak:

link_one_name

Wybierz ten bit „link_one_name” i zastąp go własnym tekstem. Na przykład pierwszy link w pierwszej sekcji na podstawie mojej listy z kroku X to „Cyfrowe gazety”, więc otrzymujemy:

Gazety cyfrowe

Następnie popracujmy nad dostosowaniem linku! Zastąp bit „link.one” swoim pierwszym linkiem. Dla mnie będzie to link do naszych cyfrowych gazet, więc będzie wyglądał tak:

Gazety cyfrowe

Zapisz swoją pracę w edytorze tekstu i odśwież stronę w przeglądarce

Powinieneś teraz móc kliknąć ten pierwszy dostosowany link. Jeśli to nie zajęło, to w porządku! Zacznij od nowa lub śledź swoje kroki, aż link otworzy się po kliknięciu.

Po uruchomieniu pierwszego linku… Cóż, wystarczy powtórzyć te kroki dla każdego linku w każdej sekcji, aż dostosujesz wszystkie nazwy i linki na swojej stronie startowej! Jest jednak tylko jeden haczyk: istnieje szansa, że po kliknięciu łącza Twoja strona początkowa po prostu zniknie, gdy nowy link otworzy się w tej samej karcie lub oknie.

Nie jest to zbyt wygodne… A co powiesz na zmianę sposobu otwierania linków? Użyjmy naszego pierwszego linku jako przykładu! Prawdopodobnie pamiętasz, że w tym miejscu mówimy przeglądarce, aby otworzyła link, gdy go klikniesz:

Gazety cyfrowe

Ale zgadnij co - tam też decydujemy, jak otworzy się link! Zmień to na:

Gazety cyfrowe

Teraz zapisz swoją pracę i ponownie załaduj stronę w przeglądarce: link otworzy się teraz w nowej karcie po kliknięciu! W ten sposób możesz zachować otwartą stronę początkową, gdy jej potrzebujesz.

Krok 7: Dodaj zdjęcie do swojej strony startowej

Teraz, gdy wszystkie nasze linki są już skonfigurowane, czas udekorować naszą stronę startową! Ten szablon ma miejsce na niestandardowy obraz po prawej stronie ekranu. Teraz z powrotem w Notepad ++, poszukaj tej linii:

aż na końcu szablonu. Wybierz zdjęcie, które Ci się podoba, przenieś je do tego samego folderu, co plik strony początkowej, i zastąp „library_picture.jpg” nazwą pliku Twojego zdjęcia. Na przykład, jeśli nazwa mojego pliku to „twoje_zdjęcie.jpg”, wiersz zmieni się na:

Zapisz zmiany i ponownie załaduj stronę startową w przeglądarce.

Ponieważ kod strony startowej i pliki obrazów znajdują się w tym samym folderze, obraz powinien zostać załadowany automatycznie po odświeżeniu strony. Jeśli tak się nie stało, sprawdź nazwę swojego pliku - zwykle tam się mylę!

Tapety na smartfony świetnie pasują do tego projektu. Ogólnie rzecz biorąc, każdy obraz w pionie (lub, jak mówią fani, „obraz w orientacji portretowej” o proporcjach 16:9) o to chodzi! Ale układ naszej strony startowej dostosuje się bez względu na to, co na nią rzucisz.

Jeśli pojawi się Twoje zdjęcie, gratulacje, to już prawie koniec!

Krok 8: Posprzątaj trochę

Jeśli masz dodatkowe sekcje, których nie używasz w tym momencie, możesz je usunąć! Załóżmy na przykład, że nie korzystasz z sekcji 6. Znajdź:

• Sekcja 6
• Przedmiot 1
• Pozycja 2
• Pozycja 3

Wybierz i usuń te wiersze, zapisz plik i odśwież plik w przeglądarce, aby upewnić się, że wszystko zniknęło.

Zwykle jest to krok, w którym wszystko psuję, ponieważ jadę za szybko, więc jeśli coś nagle nie działa, pamiętaj: weź głęboki oddech i cofnij to, co właśnie zrobiłeś za pomocą kombinacji klawiszy CTRL+Z na klawiaturze!

Krok 9: Uczynienie z niej rzeczywistej strony startowej

Teraz, gdy strona startowa otwiera wszystkie żądane linki i wygląda tak, jak chcemy, czas otworzyć ją po uruchomieniu przeglądarki!

W tym momencie lubię trzymać wszystko z dala od pulpitu mojego komputera, wycinając i wklejając folder strony startowej do folderu Dokumenty systemu Windows. Więc jeśli skończyłeś pracę nad stroną startową, zrób to!

Dalej: najprawdopodobniej Twoja przeglądarka otwiera się z ulubioną wyszukiwarką, a może nawet z pustą stroną.

Poniżej znajdziesz instrukcje dostosowywania Firefoksa oraz innych przeglądarek:

• Instrukcje dotyczące Firefoksa
• Instrukcje Google Chrome
• Instrukcje dotyczące Safari
• Instrukcje dotyczące Microsoft Edge

Gdy skończysz postępować zgodnie z instrukcjami dla swojej przeglądarki, zamknij ją i otwórz ponownie. Jeśli Twoja strona startowa pojawia się podczas uruchamiania przeglądarki, udało Ci się!

Jeśli to nie zajęło, ponownie przejrzyj instrukcje dla swojej przeglądarki i upewnij się, że niczego nie przegapiłeś. Gorzej przychodzi do najgorszego, a następnie uruchom ponownie komputer po zapisaniu całej swojej pracy. 9 razy na 10, to rozwiązuje wszystko!

Krok 10: Gotowe! A czy chciałbyś wiedzieć więcej?

Gratulujemy ukończenia strony startowej! Może to nie wygląda na dużo, ale właśnie nauczyłeś się kodować jeden z najważniejszych elementów konstrukcyjnych witryny internetowej tak, jak ja… Około 20 lat temu!

Jeśli podobało Ci się to i chciałbyś dowiedzieć się więcej o stronach startowych, jest to głęboka królicza nora do naśladowania! Oto mały wybór, który pomoże Ci w podróży po stronie startowej:

• Czy wypróbowałeś podstawowy przewodnik po stronie startowej? Dobra wiadomość, jest więcej, skąd pochodzi! Sprawdź inne przewodniki autorstwa /stpg/, aby uzyskać więcej inspiracji i zaawansowanych funkcji!
• Sprawdź katalog Johnson County Library, aby znaleźć książki na temat HTML i CSS – a dzięki karcie bibliotecznej lub e-kartce masz również dostęp do e-książek!
• Twoja karta biblioteczna zapewnia również dostęp do Udemy, a także zawiera bardzo kompletne zajęcia z HTML, CSS i projektowania stron internetowych.

Jeśli jesteś bardzo dumny ze swojego dzieła, dlaczego nie zrobisz zrzutu ekranu i nie udostępnisz go nam na Twitterze lub Instagramie z hashtagiem #jocomakes? Zawsze cieszy nas, co wymyślą nasi klienci!