Machen Sie sich eine benutzerdefinierte, minimalistische Startseite! - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:15

Mussten Sie seit der Einführung von COVID-19 auf hauptsächlich Remote-Arbeit umstellen? Dasselbe!

Die Arbeit von zu Hause aus mit unseren Computern und über das Internet bedeutet oft, dass wir viele Websites für die Arbeit, für die Schule oder sogar zum Spaß im Auge behalten müssen!

Lesezeichen sind nicht immer der Aufgabe gewachsen. Wie wäre es also, wenn Sie uns eine benutzerdefinierte Startseite erstellen, die nur auf Sie zugeschnitten ist, mit allen erforderlichen Links, die jedes Mal in Ihrem Webbrowser geöffnet wird, wenn Sie sie benötigen?

Hier ist, was Sie brauchen:

• Ein Computer (auf unserem läuft Windows, aber jeder moderne Computer ist ausreichend).
• Eine Verbindung zum Internet.
• Eine Neuinstallation des Texteditors Notepad++.

Wenn Sie bereit sind, beginnen wir mit der Verwendung unserer eigenen Startseitenvorlage … Oder erstellen Sie Ihre eigene von Grund auf neu!

Schritt 1: Erstellen Sie eine Startseite ODER laden Sie unsere benutzerdefinierte Vorlage herunter

An dieser Stelle haben Sie zwei Möglichkeiten:

1. Laden Sie unsere benutzerdefinierte Vorlage herunter (Anweisungen folgen etwas später in diesem Schritt) oder
2. Befolgen Sie diese grundlegende Anleitung zur Startseite; es führt Sie Schritt für Schritt durch die Bausteine einer einfachen Startseite - und das ist die Anleitung, die wir beim Erstellen dieser benutzerdefinierten Startseite befolgt haben!

Warum ein Tutorial empfehlen … in einem Tutorial? Unsere Arbeit als MakerSpace-Moderatoren besteht nicht nur darin, Ihnen zu zeigen, wie man Dinge macht, sondern auch, Sie mit der Maker-Kultur und den verfügbaren Ressourcen zu verbinden. Dieser Leitfaden ist einer der Orte, an denen viele Startseiten-Designer anfangen, daher war es sinnvoll, ihn mit Ihnen zu teilen!

Wenn Sie Zeit haben, fahren Sie mit Option 2 fort, aber wenn Sie dies nicht tun, können Sie später immer noch die grundlegende Anleitung zur Startseite lesen! Für dieses Tutorial gehen wir einfach davon aus, dass Sie unsere benutzerdefinierte Vorlage herunterladen! Um es herunterzuladen:

1. Öffnen Sie unser DIY_startpage-Repository auf Github.
2. Klicken Sie auf den großen grünen Code-Button, um ein Dropdown-Menü zu öffnen.
3. Klicken Sie auf ZIP herunterladen, um alle Dateien für das Projekt herunterzuladen.
4. Extrahieren Sie alle Dateien aus der ZIP-Datei, die Sie gerade heruntergeladen haben, an einen Ort Ihrer Wahl.

GitHub ist eine Website, auf der Programmierer und Designer auf der ganzen Welt ihren Code und ihre Kreationen mit anderen teilen: Sie können auch mit anderen an Projekten aller Art zusammenarbeiten. Unterm Strich ist es ein großartiges Werkzeug, das jeder Maker kennen sollte!

Starten Sie jetzt Ihren bevorzugten Browser: Ich mag Firefox sehr, aber unsere Vorlage sollte mit fast jedem aktuellen Webbrowser funktionieren, also zögern Sie nicht, Edge, Chrome oder Safari zu verwenden!

Öffnen Sie abschließend die Datei "DIY_startpage.html" in Ihrem Browser UND in Notepad++ und beginnen wir mit der Anpassung!

Schritt 2: Listen Sie Ihre Favoriten auf

Eine Startseite zu haben ist toll. Eine nützliche Startseite zu haben ist noch besser und im Moment sieht unsere etwas leer aus!

Was sind die Dinge, die Sie regelmäßig überprüfen und die Sie im Auge behalten müssen? Welche Webcomics liest du morgens? Welche Nachrichten-Website möchten Sie überprüfen? Dies sind die Dinge, die auf Ihrer Startseite landen sollten.

Für dieses Tutorial verwende ich nur einige meiner Favoriten. Spoilerwarnung, viele Links aus der Bibliothek! Aber auch einige meiner Lieblings-Maker zur Inspiration und einige meiner Lieblingsunterhaltung. Alle diese Artikel finden Sie unten mit einem Link als Beispiel!

Nachrichten und Lesen

• Digitale Zeitungen
• Digitale Bücher
• Digitale Zeitschriften

Lernen

• W3C-Schulen
• Udemy
• Mangosprachen

Musik

• Lokal anhören
• Song-Exploder
• Jamendo Musikradios

Maker-Kultur

• Kern77
• Lumcluster
• Melapropismen

Ich habe für jede Kategorie drei meiner Favoriten ausgewählt, aber Sie sollten problemlos mehr oder weniger auswählen können - das Layout Ihrer Startseite passt sich automatisch an die Anzahl oder Ressourcen an!

Sobald Sie alle Ihre Favoriten aufgelistet haben, legen wir sie für eine Minute beiseite und arbeiten daran, unsere generische Startseitenvorlage ein wenig mehr zu Ihnen zu machen.

Schritt 3: Passen Sie Ihre Schriftart an

Starten Sie Notepad++, klicken Sie auf Datei > Öffnen, um Ihre Datei "DIY_startpage.html" zu öffnen. Was Sie sehen, sieht ganz anders aus als die Seite in Ihrem Browser, nicht wahr? Es ist der Code Ihrer Seite, und Browser interpretieren diesen Code, um ihn ein wenig augenfreundlicher aussehen zu lassen und alles zu tun, was wir brauchen.

Der Code für unser Startseitenprojekt ist in zwei verwandten Sprachen geschrieben: HTML und CSS. HTML ist normalerweise für den Inhalt einer Seite und CSS für das Aussehen einer Seite verantwortlich.

Suchen Sie nach diesem ersten Abschnitt, um Ihre Startseite anzupassen:

html {

Ausrichten-Elemente: Mitte; Farbe: #313131; Anzeige: flexibel; Schriftart: 22px "Courier New", Courier, Monospace; Höhe: 100%; rechtfertigen-Inhalt: Mitte; Rand: 0; }

Dieser Abschnitt unserer Startseite konzentriert sich auf das allgemeine Erscheinungsbild der Artikel auf unserer Seite. Die Linie:

Schriftart: 22px "Courier New", Courier, Monospace;

bezieht sich speziell auf die Schriftart, die wir auf der Startseite verwenden, und hat zwei Parameter, die definieren, wie der Text auf Ihrer Seite aussieht: Größe und Schriftfamilie.

• Größe - Das ist, was "22px" ist. Die Größe Ihres Textes auf dem Bildschirm wird in "px", kurz für Pixel, definiert.
• Schriftfamilie - Hier listen wir die Schriftarten auf, die wir verwenden möchten. Es ist normalerweise eine gute Idee, mehrere aufzulisten, von der Schriftart, die Sie wirklich verwenden möchten, die allgemeinste Familie. Diese Schriftarten hängen von dem von Ihnen verwendeten Browser ab. Wenn die speziellste Schriftart nicht verfügbar ist, versucht der Browser die nächste und so weiter.

Die CSS Web Safe Fonts-Seite von w3schools bietet eine großartige Liste von Fontkombinationen, die großartig aussehen, den gewünschten Stil beibehalten und in den meisten modernen Browsern funktionieren.

Sie können beispielsweise ersetzen:

"Kurier Neu", Kurier, Monospace;

mit:

"Palatino Linotype", "Book Antiqua", Palatino, Serifen;

oder:

"Comic Sans MS", kursiv, serifenlos;

Speichern Sie Ihre Datei und aktualisieren Sie die Seite in Ihrem Browser, um die Änderungen zu sehen! Gefällt es nicht? Kein Problem! Spielen Sie mit den CSS Web Safe Fonts herum, bis Sie eine Kombination gefunden haben, die Ihnen gefällt.

Schritt 4: Passen Sie Ihr Titelangebot an

Suchen Sie in Ihrer HTML-Datei nach diesem Abschnitt:

Dies ist Ihre Startseite! Genießen

Wählen Sie ein Angebot aus, das Ihnen gefällt, und ersetzen Sie den Code! Für mich selbst habe ich ausgewählt

Noch einmal auf die Bresche

Das Layout Ihrer Startseite sollte sich im Handumdrehen an Ihr Zitat anpassen, sobald Sie die Seite in Ihrem Browser neu laden: In Firefox bedeutet das, STRG+R auf Ihrer Tastatur zu drücken oder auf das Symbol Neu laden zu klicken. Wählen Sie jetzt ein Angebot aus, das Ihnen gefällt (oder wählen Sie etwas später!) und beginnen wir mit der Anpassung der Abschnitte Ihrer Startseite!

Schritt 5: Passen Sie Ihre Abschnitte an

Nachdem Sie nun eine Schriftartenkombination gefunden haben, die Ihnen gefällt und Sie ein tolles Zitat haben, das Sie inspirieren kann, fahren wir fort und passen Ihre Abschnitte an.

Wenn Sie unsere Startseite von Github heruntergeladen haben, stehen Ihnen 6 Abschnitte zur Verfügung, die Sie anpassen können: Der ursprüngliche Leitfaden hat nur 4, aber da in letzter Zeit immer mehr Aspekte unseres Lebens online gegangen sind, habe ich für alle Fälle weitere hinzugefügt.

Suchen Sie den ersten Abschnitt und geben Sie einfach ein, was wir brauchen. Zur Erinnerung, mein erster Abschnitt ist "News and Reading":

Wenn Ihre Datei noch in Notepad ++ geöffnet ist, suchen Sie die folgende Codezeile:

Abschnitt 1

und ersetzen Sie es durch die Kategorie in Ihrer Liste, von der Sie glauben, dass Sie sie am häufigsten verwenden werden.

Da viele von uns es gewohnt sind, mit dem Lesen von Dokumenten von links oben zu beginnen, könnten Ihre Augen natürlich dorthin gehen - nutzen Sie dies also und bewahren Sie unsere wichtigste Anlaufstelle dort auf! Aber wenn Sie aus einer Kultur mit einer anderen Leserichtung kommen oder einfach anders arbeiten, passen Sie dies für sich an. Es ist schließlich Ihre Startseite: Sie wissen, was das Beste für Sie ist!

Ein Abschnittstitel runter, fünf zu gehen! Suchen Sie nach der Codezeile, die besagt:

Sektion 2

Ändern Sie es, suchen Sie dann weiter nach Abschnittstiteln und ändern Sie sie, bis Sie das Ende Ihrer Liste erreichen. Wenn Sie nicht alle Abschnitte verwenden, lassen Sie sie einfach in Ruhe! Wir werden auch am Ende dieses Tutorials eine kleine Bereinigung vornehmen.

Wenn Sie mit dem Anpassen der Abschnitte fertig sind, speichern Sie einfach Ihre Änderungen in Notepad++ und laden Sie die Seite in Ihrem Browser neu. Alle Abschnittstitel sollten dort angezeigt werden, wo Sie sie eingefügt haben: Jetzt können wir die Links in jedem Abschnitt anpassen!

Schritt 6: Passen Sie Ihre Links an

Das Anpassen der Links in jedem Abschnitt ist etwas aufwendiger, aber sicherlich nicht viel schwieriger!

Dieses Mal ändern wir nicht nur den Namen der Links, sondern auch, was Sie damit machen können! Jedes Element in jedem Abschnitt wird anklickbar und verlinkt zu einer anderen Website. Bonus, Sie können auch entscheiden, ob es in einem neuen Fenster geöffnet werden soll oder nicht!

Suchen Sie zunächst nach einer Zeile, die wie folgt aussieht:

link_one_name

Wählen Sie das Bit "link_one_name" aus und ersetzen Sie es durch Ihren eigenen Text. Zum Beispiel ist der erste Link im ersten Abschnitt basierend auf meiner Liste aus Schritt X "Digitale Zeitungen", also erhalten wir:

Digitale Zeitungen

Als Nächstes arbeiten wir daran, den Link anzupassen! Ersetzen Sie das Bit "link.one" durch Ihren ersten Link. Für mich ist das der Link zu unseren digitalen Zeitungen, also sieht es so aus:

Digitale Zeitungen

Speichern Sie Ihre Arbeit im Texteditor und laden Sie die Seite in Ihrem Browser neu

Sie sollten jetzt in der Lage sein, auf den ersten von Ihnen angepassten Link zu klicken. Wenn es nicht dauert, ist das in Ordnung! Beginnen Sie noch einmal oder verfolgen Sie Ihre Schritte, bis sich der Link öffnet, wenn Sie darauf klicken.

Sobald Sie Ihren ersten Link zum Laufen gebracht haben … Nun, alles, was Sie tun müssen, ist diese Schritte für jeden Link in jedem Abschnitt zu wiederholen, bis Sie alle Namen und Links auf Ihrer Startseite angepasst haben! Es gibt jedoch nur einen Haken: Wenn Sie auf einen Link klicken, verschwindet Ihre Startseite möglicherweise einfach, da der neue Link im selben Tab oder Fenster geöffnet wird.

Es ist nicht sehr praktisch … Wie wäre es also mit einer Änderung der Art und Weise, wie Links geöffnet werden? Nehmen wir unseren ersten Link als Beispiel! Sie erinnern sich wahrscheinlich daran, dass wir Ihren Browser anweisen, einen Link zu öffnen, wenn Sie darauf klicken:

Digitale Zeitungen

Aber raten Sie mal - hier entscheiden wir auch, wie der Link geöffnet wird! Ändern Sie es in:

Digitale Zeitungen

Speichern Sie nun Ihre Arbeit und laden Sie die Seite in Ihrem Browser neu: Der Link wird jetzt in einem neuen Tab geöffnet, wenn Sie darauf klicken! Auf diese Weise können Sie Ihre Startseite geöffnet halten, wenn Sie sie benötigen.

Schritt 7: Fügen Sie Ihrer Startseite ein Bild hinzu

Nachdem alle unsere Links eingerichtet sind, ist es an der Zeit, unsere Startseite zu dekorieren! Diese Vorlage bietet Platz für ein benutzerdefiniertes Bild auf der rechten Seite des Bildschirms. Suchen Sie nun in Notepad ++ nach dieser Zeile:

ganz am Ende der Vorlage. Wählen Sie ein Bild aus, das Ihnen gefällt, verschieben Sie es in den gleichen Ordner wie Ihre Startseitendatei und ersetzen Sie "library_picture.jpg" durch den Dateinamen Ihres Bildes. Wenn der Name meiner Datei beispielsweise "your_picture.jpg" lautet, lautet die Zeile:

Speichern Sie Ihre Änderungen und laden Sie die Startseite erneut in Ihrem Browser.

Da sich der Code Ihrer Startseite und Ihre Bilddateien im selben Ordner befinden, sollte das Bild beim Aktualisieren der Seite automatisch geladen werden. Wenn dies nicht der Fall ist, überprüfen Sie den Namen Ihrer Datei - da verstehe ich normalerweise etwas falsch!

Smartphone-Hintergrundbilder eignen sich hervorragend für dieses Projekt. Im Allgemeinen jedes vertikale Bild (oder wie schicke Leute sagen "Hochformatbild" mit einem Seitenverhältnis von 16:9) für diese Angelegenheit! Aber das Layout unserer Startseite passt sich an, egal was Sie darauf werfen.

Wenn Ihr Bild auftaucht, herzlichen Glückwunsch, Sie sind so ziemlich fertig!

Schritt 8: Aufräumen eines Bits

Wenn Sie zusätzliche Abschnitte haben, die Sie zu diesem Zeitpunkt nicht verwenden, können Sie diese gerne löschen! Angenommen, Sie verwenden Abschnitt 6 nicht. Suchen Sie:

• Abschnitt 6
• Gegenstand 1
• Artikel 2
• Artikel 3

Wählen Sie diese Zeilen aus und löschen Sie sie, speichern Sie Ihre Datei und aktualisieren Sie die Datei in Ihrem Browser, um sicherzustellen, dass alles weg ist.

Dies ist normalerweise der Schritt, bei dem ich alles unterbreche, weil ich zu schnell gehe. Wenn also etwas plötzlich nicht funktioniert, denken Sie daran: Atmen Sie tief durch und machen Sie das, was Sie gerade mit der Tastenkombination STRG+Z auf Ihrer Tastatur gemacht haben, rückgängig!

Schritt 9: Machen Sie es zu einer tatsächlichen Startseite

Jetzt, da die Startseite alle gewünschten Links öffnet und so aussieht, wie wir sie haben möchten, ist es an der Zeit, sie beim Starten Ihres Browsers zu öffnen!

An diesem Punkt möchte ich alles vom Desktop meines Computers fernhalten, indem ich meinen Startseitenordner ausschneide und in den Windows-Dokumentenordner füge. Wenn Sie also mit der Arbeit an Ihrer Startseite fertig sind, tun Sie das!

Als nächstes: Ihr Browser öffnet sich höchstwahrscheinlich mit Ihrer bevorzugten Suchmaschine oder vielleicht sogar mit einer leeren Seite.

Nachfolgend finden Sie Anweisungen zum Anpassen von Firefox und anderen Browsern:

• Firefox-Anleitung
• Anleitung für Google Chrome
• Safari-Anleitung
• Anleitung für Microsoft Edge

Wenn Sie die Anweisungen für Ihren Browser befolgt haben, schließen Sie ihn und öffnen Sie ihn erneut. Wenn Ihre Startseite beim Starten Ihres Browsers angezeigt wird, haben Sie es geschafft!

Wenn es nicht gedauert hat, gehen Sie die Anweisungen für Ihren Browser erneut durch und stellen Sie sicher, dass Sie nichts übersehen haben. Im schlimmsten Fall starten Sie Ihren Computer neu, nachdem Sie Ihre gesamte Arbeit gespeichert haben. 9 von 10, das löst alles!

Schritt 10: Fertig! Und möchten Sie mehr wissen?

Herzlichen Glückwunsch zur Fertigstellung Ihrer Startseite! Es sieht vielleicht nicht nach viel aus, aber Sie haben gerade gelernt, einen der wichtigsten Bausteine einer Website so zu programmieren, wie ich es getan habe … vor ungefähr 20 Jahren!

Wenn Ihnen das gefallen hat und Sie mehr über Startseiten erfahren möchten, ist es ein tiefer Kaninchenbau, dem Sie folgen können! Hier ist eine kleine Auswahl, die Ihnen auf Ihrer Startseitenreise hilft:

• Hast du den Basic-Startseitenleitfaden ausprobiert? Gute Nachrichten, wo es herkommt, gibt es noch mehr! Weitere Inspirationen und erweiterte Funktionen finden Sie in den anderen Anleitungen von /stpg/!
• Schauen Sie im Johnson County Library-Katalog nach Büchern zu HTML und CSS - und mit Ihrem Bibliotheksausweis oder Ihrer E-Card haben Sie auch Zugriff auf eBooks!
• Mit Ihrem Bibliotheksausweis haben Sie auch Zugang zu Udemy und es gibt auch einige sehr vollständige Kurse zu HTML, CSS und Webdesign.

Wenn Sie sehr stolz auf Ihre Kreation sind, warum machen Sie nicht einen Screenshot und teilen ihn mit uns über Twitter oder Instagram mit dem Hashtag #jocomakes? Wir freuen uns immer über die Ideen unserer Gönner!