Share
Bei der Erstellung Ihrer Business-Website gibt es mehrere Möglichkeiten. Sie können sich für einen Site Builder entscheiden, einen Entwickler eine Site für Sie entwerfen lassen oder einen CMS wie WordPress verwenden. Diese Optionen sind zwar nicht in Ordnung, aber sie können zu viel sein, wenn Sie lediglich eine einfache Website benötigen, um zu zeigen, worum es in Ihrem Unternehmen geht, und potenziellen Kunden und Kunden die Möglichkeit bieten, Sie zu kontaktieren.
Wenn Sie keine ausgefallenen Funktionen benötigen und nicht vorhersehen, dass Sie regelmäßig bloggen oder online verkaufen, dann ist eine HTML-responsive Website-Vorlage genau das, was Sie brauchen. Hier führen wir Sie durch die Setup-Schritte, damit Sie in kürzester Zeit starten können.
Das Schöne an HTML-responsiven Business-Website-Vorlagen ist, dass sie einfach zu verwenden sind und kein spezielles technisches Wissen erfordern, um sie auf Ihren Hosting-Server hochzuladen. Sie sind auch leichter zu ändern als andere Website-Builder und CMSs.
In diesem Lernprogramm zeigen wir Ihnen, wie Sie eine auf HTML reagierende Website-Vorlage auf Ihren Server ändern und hochladen, sodass Sie auf einfache Weise eine responsive Business-Website erstellen können.
Bevor wir überhaupt mit der responsiven Website-Vorlagenänderung beginnen, gibt es einige Dinge, die Sie benötigen. Dazu gehören ein Domain-Name und ein Hosting-Plan, ein FTP-Programm und ein Code-Editor, eine HTML-responsive Business-Website-Vorlage sowie Inhalte und Bilder, die auf Ihrer Website verfügbar sein werden. Werfen wir einen Blick auf die unten aufgeführten.
Das erste, was Sie tun müssen, ist den Kauf eines Domainnamens und eines Hostingplans, damit Ihre Website online gefunden werden kann. In den meisten Fällen erhalten Sie einen kostenlosen Domainnamen, wenn Sie sich bei den meisten Providern für ein Hosting-Paket anmelden. Wenn es um Ihren Domainnamen geht, wäre es eine gute Idee, Ihren tatsächlichen Firmennamen als Domainnamen zu verwenden.
Wenn möglich, versuchen Sie, eine .COM-Erweiterung zu erhalten, da diese die beliebteste ist. Denken Sie jedoch daran, dass die Suche nach einem großartigen Domainnamen mit einer .COM-Datei heute nicht mehr so einfach ist wie früher. In diesem Fall möchten Sie möglicherweise andere Erweiterungen wie .CO oder eine lokale Domäne wie .US betrachten.
Wenn es um Hosting-Provider geht, finden Sie Hosting-Pakete, die bei 5 $ / Monat beginnen. In den häufig gestellten Fragen (FAQs) erfahren Sie, wie sie mit dem Kundenservice umgehen und sich über deren Geschäftsbedingungen informieren. Lesen Sie auch die Bewertungen eines bestimmten Hosts auf anderen Websites von Drittanbietern, um zu erfahren, was Kunden über sie sagen.
Die nächsten Punkte auf unserer Liste sind ein FTP-Client wie FileZilla und ein Code-Editor wie Sublime Text. Der Zweck eines FTP-Clients besteht darin, Ihren Computer mit dem Hosting-Server zu verbinden und die Dateien Ihrer Website einfach auf einmal hochzuladen, anstatt sie einzeln über das Bedienfeld des Hosts hochzuladen. Ein Code-Editor hingegen hilft Ihnen beim Bearbeiten der Dateien der Vorlage und erleichtert das Auffinden verschiedener Teile des Codes, die bearbeitet werden müssen.
Sowohl Sublime Text als auch FileZilla können kostenlos heruntergeladen werden und können auf Mac-, Windows- und Linux-Computern verwendet werden.
Schließlich benötigen Sie eine HTML-Vorlage und den Inhalt, den Sie Ihrer Website hinzufügen möchten. Auf Marktplätzen wie Envato Elements finden Sie eine Vielzahl von responsiven HTML-Vorlagen, die speziell für Business-Websites erstellt wurden. Wenn Sie einen gefunden haben, den Sie mögen, laden Sie ihn einfach herunter, entpacken Sie den Ordner und speichern Sie ihn an einem Ort, auf den Sie leicht zugreifen können.
Berücksichtigen Sie hinsichtlich des Inhalts die Kopie, die auf den Seiten Ihrer Website gespeichert wird, und erklären Sie, was Ihr Unternehmen macht, wer es bedient und wie es Kunden mit Produkten und Dienstleistungen hilft. Sie können auch Informationen zu Schlüsselpersonen in Ihrem Unternehmen hinzufügen. Vergessen Sie nicht visuelle Elemente wie Bilder und Logos.
Nun ist es an der Zeit, den Inhalt der Vorlage zu bearbeiten und die Dummy-Informationen durch Ihre eigenen zu ersetzen. Im Rahmen dieses Tutorials verwende ich die Moose-Vorlage. Diese responsive Website-Vorlage bietet ein flaches und responsives Design und enthält mehrere verschiedene Seitenvorlagen, die sich für Unternehmer, Kreativagenturen, digitale Studios und mehr eignen.
Bevor Sie mit der Bearbeitung der Vorlage beginnen, ist es wichtig, die Struktur zu verstehen, damit Sie wissen, welche Dateien Sie ändern müssen. Wie Sie dem folgenden Screenshot entnehmen können, hat der entpackte Ordner drei Unterordner.
Die so genannte Vorlage ist der Unterordner, der alle Dateien enthält, aus denen sich unsere responsive Website-Vorlage zusammensetzt, sowie einige zusätzliche Unterordner. Wenn Sie eine andere Vorlage verwenden, werden möglicherweise nicht alle diese Dateien und Unterordner angezeigt. Im Allgemeinen können Sie jedoch Folgendes erwarten:
Doppelklicken Sie auf die Datei index.html oder klicken Sie mit der rechten Maustaste darauf und wählen Sie In Chrome öffnen (oder welchen Browser auch immer Sie verwenden). Wenn Sie sich die Vorlage in Ihrem Browser ansehen, können Sie sehen, dass es einen Schieberegler gibt, in dem Sie die Bilder und Beschriftungen ersetzen müssen, einen Servicebereich, in dem Sie Ihre eigenen Informationen hinzufügen können, und vieles mehr.
Um herauszufinden, wo Sie diese Informationen bearbeiten können, klicken Sie mit der rechten Maustaste auf den Text und klicken Sie auf das Symbol Prüfen Verknüpfung.
Das Inspector-Fenster wird geöffnet und Sie können den HTML-Code, der in der HTML-responsiven Website-Vorlage auf der linken Seite des Fensters verwendet wird, und den CSS-Code, der für den visuellen Stil der Vorlage auf der rechten Seite verantwortlich ist, sehen. Handseite des Inspector-Fensters.
Schauen Sie sich den HTML-Code an und Sie werden sehen, dass die Codezeile, die den ausgewählten Text enthält, hervorgehoben ist. Im Screenshot-Beispiel befindet sich der Header, den ich untersuche und der im Inspektorfenster hervorgehoben ist, zwischen dem
Tags enthalten das Absatz-HTML-Element.
Um die Vorlage zu ändern, müssen Sie wissen, welche Tags den zu bearbeitenden Text enthalten, und sie im Code-Editor wiederfinden. Dann können Sie den Text durch Ihren eigenen ersetzen.
Nun, da wir wissen, welche Tags wir bearbeiten müssen, ist es an der Zeit, die Datei index.html in einem Code-Editor wie Sublime Text zu öffnen. Klicken Sie mit der rechten Maustaste auf die Datei und klicken Sie auf Mit überhöhtem Text öffnen (oder einen anderen Code-Editor).
Scrollen Sie mit Ihrer HTML-Datei im Code-Editor nach unten, bis Sie den gleichen Text finden, den Sie in Ihrem Browser untersucht haben. Klicken Sie dann zwischen das
Klicken Sie als Nächstes zwischen Tags, löschen Sie den Text und geben Sie einen kurzen Slogan oder beschreibenden Text ein. Sie können auch Teile der responsiven Website-Vorlage löschen, die Sie nicht benötigen. Wenn Sie sich den Screenshot unten ansehen, werden Sie feststellen, dass ich den Text der Kopfzeile ersetzt und die unterste Zeile der Dienste gelöscht habe.
Um den Rest der Homepage und andere Seiten in der Vorlage zu bearbeiten, müssen Sie diesen Vorgang immer wieder wiederholen.
Lassen Sie uns nun erklären, wie die Dummy-Bilder leicht ersetzt werden können. Zunächst müssen Sie alle Bilder im Ordner images im Ordner Ihrer HTML-Responsive-Website-Vorlage ablegen. Gehen Sie dann zurück zu Ihrem Browser und prüfen Sie einen Teil der Seite mit einem Bild.
Der Inspector teilt Ihnen den Namen des Bildes sowie die Tags mit, die das Bild enthalten. Nun können Sie zum Code-Editor zurückkehren und nach diesem Code suchen. Ersetzen Sie dann den Bildnamen durch den Namen Ihres Bildes und speichern Sie die Änderungen.
Nachdem Sie nun Ihren eigenen Inhalt eingegeben haben, können Sie die Gestaltung der Vorlage besprechen. In meinem Fall enthält die Moose-Vorlage einige vorgefertigte Farbschemata, die sich in der Stil> CSS> Farbe Unterordner. Dies bedeutet, dass ich die Farben einfach ändern kann, indem Sie das Stylesheet im Kopf des Dokuments für mein bevorzugtes Farb-Stylesheet ändern.
Suchen Sie die folgende Codezeile in der HTML-Vorlage:
Wenn Sie den Namen in blue.css ändern, ändert sich die rote Farbe der Vorlage in einen blauen Farbton:
Sie können auch das Hauptstylesheet namens style.css bearbeiten und Ihre bevorzugten Schriftarten und Farben einschließen.
Folgen Sie einfach dem HTML-Bearbeitungsprinzip: Prüfen Sie zunächst das zu formatierende Element, suchen Sie es in der Datei style.css und experimentieren Sie mit verschiedenen Werten.
Der letzte Schritt bei der Erstellung einer responsiven Website ist das Hochladen Ihrer Dateien auf Ihren Hosting-Server. Ihr Hosting-Provider sollte Sie sofort nach der Anmeldung mit den erforderlichen Informationen für die FTP-Dateiübertragung per E-Mail benachrichtigt haben.
Sie müssen FileZilla (oder ein anderes FTP-Programm) starten und dann die erforderlichen Informationen in die obere Leiste eingeben. Das heißt, Sie müssen den Namen des Servers, Ihren Benutzernamen und Ihr Passwort eingeben und dann auf klicken Schnelle Verbindung:
Dann möchten Sie den HTML-Responsive-Website-Vorlagenordner auf der linken Seite des FTP-Programms suchen und durch Anklicken erweitern. Wählen Sie im folgenden Fenster den gesamten Inhalt aus und ziehen Sie ihn auf die rechte Seite des FTP-Bildschirms. Legen Sie die Dateien im Stammverzeichnis des Hosting-Servers ab. Dies ist normalerweise der Ordner public_html.
Warten Sie, bis der Upload-Vorgang abgeschlossen ist, öffnen Sie Ihren Browser und geben Sie Ihren Domainnamen ein. Ihre Website sollte jetzt live sein.
Jetzt, da Ihre Website live ist, ist es wichtig, dass Sie wichtige Informationen enthalten, die jede geschäftliche Website enthalten sollte.
Das Erstellen einer responsiven Business-Website ist einfach, wenn Sie die Teile der Struktur der Vorlage und das Auffinden der zu ändernden Informationen verstanden haben. Nutzen Sie unser Tutorial, um Ihre Business-Website einzurichten. Vergessen Sie nicht, unsere Responsive Business-HTML-Vorlagen zu durchsuchen, um die perfekte Vorlage für Ihre Website zu finden.
Accentsconagua