Leitfaden für Anfänger zum Erstellen einer Website ⑦: Es ist so einfach, eine schöne Website zu erstellen

Wir alle wissen, dass eine Website eigentlich aus vielen Webseitendateien besteht, die miteinander verknüpft sind. Und eine Webseitendatei besteht aus vielen verschiedenen Codes, darunter Textfarbcodes, Linkcodes, Bildeinfügungscodes, Animationscodes usw. Aufgrund dieser Codes werden Bilder, Links, Animationen usw. in den Webseitendateien aufgerufen, damit eine Webseite schön und wirkungsvoll aussieht. Damit eine einzelne Person von Grund auf eine schöne und leistungsstarke Webseite erstellen kann, müssen viele Dinge berücksichtigt werden, wie etwa das Interface-Design, die grundlegende Architektur usw.

Aber auch ohne diese Kenntnisse können Sie mit der Erstellung einer schönen Website beginnen. Als ich in der Schule nicht wusste, wie man einen Aufsatz schreibt, sagte mein Chinesischlehrer immer: „Wenn du nicht schreiben kannst, lies einfach mehr und ahme andere nach.“ Dasselbe gilt für das Erstellen einer Website. Da Sie die Website nicht vollständig selbst gestalten können, kopieren Sie zunächst einfach die Website einer anderen Person. Beim Kopieren fremder Webseiten lernen sie gleichzeitig die grundlegenden HTML-Codes kennen und erlernen diese. So werden Experten durch ständiges „Kopieren“ zu Profis. Was ich hier mit Nachahmer meine, ist eigentlich eine Nachahmungswebsite. Sie sollten wissen, dass eine gut gemachte Nachahmungswebsite auch Geld einbringen kann. Jetzt gibt es viele Leute, die Nachahmungswebsites auf vielen offiziellen CMS-Websites benötigen. Die sogenannte Nachahmungswebsite besteht darin, einen Website-Stil zu speichern, der Ihnen gefällt, dann den Inhalt zu ändern und ihn schließlich in Ihrem eigenen Bereich zu veröffentlichen, sodass Sie eine Website mit derselben Benutzeroberfläche wie diese Website erstellen können. Heute werde ich Ihnen die Website unseres Alimama-Moderators Baoway vorführen: http://www.tb-so.cn/. Der Grund, warum ich diese Website zur Demonstration verwende, ist, dass sie nur eine Homepage hat, sodass der Arbeitsaufwand relativ gering ist und sie nach dem Kopieren direkt zum Erstellen einer Website verwendet werden kann. Gleichzeitig ist der Inhalt dieser Website relativ klein und nicht sehr kompliziert, sodass der Einstieg für Anfänger sehr einfach ist.

Schritt 1: Speichern Sie die Webseite der anderen Partei

Zuerst gehen wir auf seine Website. Da wir eine Website genau wie seine erstellen möchten, speichern wir seine Seite zunächst auf unserem eigenen Computer. Die Schritte sind: Klicken Sie im IE-Browser auf „Datei“ und „Speichern unter“, wie unten gezeigt:

Wählen Sie dann im Popup-Dialogfeld den Ordner aus, in dem Sie speichern möchten, wählen Sie bei „Speichern unter“ „Webseite, Alle (*htm, *html)“ und klicken Sie dann auf „Speichern“. Auf diese Weise können alle Inhalte dieser Webseite, einschließlich Bilder und einiger JS-Dateien, auf unserem eigenen Computer gespeichert werden. Wie in der folgenden Abbildung dargestellt:

Nach dem Speichern finden Sie eine Webseitendatei und einen Ordner, in dem sie gespeichert ist:

Gleichzeitig können Sie diese Webseitendatei jetzt mit einem Doppelklick im Browser öffnen. Wenn Sie sie im IE-Browser durchsuchen, werden Sie feststellen, dass der Stil etwas anders ist als auf seiner Website. Keine Sorge, wenn Sie genau hinschauen, werden Sie feststellen, dass nur einige Hintergrundbilder fehlen. Dies liegt daran, dass diese Bilder in der CSS-Datei aufgerufen werden und daher keine Möglichkeit besteht, sie direkt herunterzuladen und lokal zu speichern. Einige Bilder, die angezeigt werden können, werden direkt mit Code in die Webseite eingefügt, sodass sie direkt gespeichert werden können.

Der zweite Schritt besteht darin, den Pfad der zugehörigen Dateien zu ändern

Öffnen Sie nun diesen Ordner und Sie finden Bilder, CSS-Dateien, JS-Dateien usw. Unter ihnen sind tongji.js und tongji.gif die statistischen Codedateien auf seiner Website. Sie sind für uns nutzlos und können direkt gelöscht werden. Der Rest ist alles nützlich. Es gibt auch zwei CSS-Dateien, die Dateinamen lauten „style.css“ und „css.css“ (Was ist CSS? Wenn Sie es nicht wissen, klicken Sie hier, um es zu erfahren). Die restlichen Hintergrundbilder, die nicht in den Webseitendateien angezeigt werden, befinden sich in diesen CSS-Dateien. Wenn wir diese beiden CSS-Dateien öffnen, können wir die Pfade der Hintergrundbilder im darin enthaltenen Code sehen und sie dann speichern.

Öffnen Sie beispielsweise die Datei style.css. Dort gibt es einen Code namens „BACKGROUND: url(seach.gif)“, was bedeutet, dass das Hintergrundbild seach.gif ist. Dies ist jedoch nur ein relativer Pfad (Was ist ein relativer Pfad? Klicken Sie hier, um ihn zu durchsuchen). Daher müssen wir die absolute Adresse des Bildes noch finden, indem wir uns den Pfad der CSS-Datei ansehen. Öffnen Sie die Homepage von http://www.tb-so.cn/ und überprüfen Sie den Quellcode. Sie können sehen, dass der Pfad der Datei style.css http://www.tb-so.cn/images/style.css ist. Daher können Sie feststellen, dass die Adresse des Hintergrundbilds search.gif http://www.tb-so.cn/images/seach.gif ist. Sobald Sie die Adresse des Bildes gefunden haben, können Sie das Bild direkt speichern. Am besten speichern Sie es in dem Ordner, der beim Speichern der obigen Webseite erstellt wurde, damit es einfacher zu verwalten ist.

Hinweis: Die Bildpfade in verschiedenen CSS-Pfaden können unterschiedlich sein. Daher müssen Sie die Pfade in jeder CSS-Datei sorgfältig prüfen, den Code Zeile für Zeile lesen und dann alle Bilder speichern. Ich habe hier nur ein Beispiel aufgeführt. Üben Sie mehr, denken Sie mehr, suchen und lernen Sie mehr und stellen Sie mehr Fragen, wenn Sie auf etwas stoßen, das Sie nicht verstehen. Denken Sie daran: Übung macht den Meister. Dies ist keine sehr technische Sache. Wenn Sie den Code nicht verstehen, laden Sie die Übersetzungssoftware Google Kingsoft PowerWord herunter und übersetzen Sie ihn Absatz für Absatz. Anschließend werden Sie die Bedeutung des Codes grundsätzlich verstehen.

Nachdem Sie alle Hintergrundbilder gespeichert haben, können Sie sie problemlos durchsuchen, solange der Pfad korrekt ist. Hier ist ein Trick für Neulinge, die den Pfad nicht verstehen. Speichern Sie die Bilder und CSS-Dateien im selben Ordner und ändern Sie dann den Hintergrundbildpfad der CSS-Datei in den Dateinamen. Dies ist der richtige Pfad. Beispielsweise steht in der Datei css.css „BACKGROUND: url(images/hd.png) “. Dieser Code bedeutet, dass das Hintergrundbild im Bilderordner gespeichert ist. Ändern Sie ihn einfach in „BACKGROUND: url(hd.png) “ und speichern Sie dann das hd.png-Bild und die Datei css.css im selben Ordner.

Da die im ersten Schritt gespeicherten Webseitendateien und Ordnernamen auf Chinesisch sind, müssen sie geändert werden, bevor auf sie von der Website aus zugegriffen werden kann. Ändern Sie zunächst die Webseitendatei in index.htm, da index.htm die Standard-Startseitendatei ist (Was ist die Standard-Startseitendatei?, klicken Sie hier, um zu suchen). Erst nachdem wir sie in die Standard-Startseitendatei geändert haben, können wir unsere Website nach Eingabe der URL öffnen. Ändern Sie dann den Ordner, in dem CSS-Dateien und Bilder gespeichert sind, in den gewünschten Ordnernamen. Dieser Name kann beliebig geändert werden, solange er aus englischen Buchstaben oder Zahlen besteht. Ich werde ihn hier in CSS ändern, wie unten gezeigt:

Der dritte Schritt besteht darin, den Inhalt der Webseitendatei zu ändern

Nachdem alle vorherigen Vorbereitungen abgeschlossen sind, ist es an der Zeit, die endgültige Änderung am Inhalt der Webseitendatei vorzunehmen, d. h. sie in den gewünschten Inhalt zu ändern. Hier müssen wir die Dreamweaver-Software verwenden. Wenn Sie sie nicht haben, laden Sie sie unter http://283303360.qupan.com/4935111.html herunter. Dies ist meine Netzwerkfestplatte. Wenn Sie nicht wissen, wie Sie die Dreamweaver-Software verwenden, sehen Sie sich bitte das Dreamweaver-Video-Tutorial an.

1) Ändern Sie den Titel und andere Informationen der Webseite:

Öffnen Sie die Datei „index.htm“ mit der Software Dreamweaver und schalten Sie die Benutzeroberfläche der Software Dreamweaver in den „geteilten“ Modus, sodass Sie im oberen Teil den Code und im unteren Teil die Benutzeroberfläche der Webseite sehen können. Als erstes muss Folgendes geändert werden:

<TITLE>Taobao.com_Taobao auf Taobao_Taobaos 200 Millionen Experten für die Suche nach hochwertigen Produkten! </TITEL>
<META-Inhalt=Taobao.com, Taobao.com, Taobao-Suchname=Schlüsselwörter>
<META content=Taobao.com ist eine Kooperationswebsite von Taobao.com｜Taobao.com ist ein Experte für die Suche nach 200 Millionen hochwertigen Produkten auf Taobao.com. Die Taobao-Suche bietet Funktionen wie das Suchen und Vergleichen von Produkten, sodass Benutzer leicht preiswerte Originalprodukte finden können. Sie bietet 200 Millionen hochwertige und preisreduzierte Taobao-Produkte für Benutzer weltweit, sodass Internetnutzer bequemer Einkaufsinformationen erhalten und die Produkte finden können, nach denen sie suchen. Name=Beschreibung>

<TITLE> ist der Titel der Website, Schlüsselwörter sind die Schlüsselwörter der Webseite und die letzte Beschreibung ist die Beschreibung der Webseite. Passen Sie einfach den Textinhalt Ihren Wünschen an. Ändern Sie dann den Pfad der CSS-Datei im Code und suchen Sie:

<LINK href="Taobao.com_Taobao auf Taobao_Taobao.coms Suchexperte für 200 Millionen hochwertige Waren!_files/style.css" type=text/css rel=stylesheet>
<LINK href="Taobao.com_Taobao auf Taobao_Taobao.coms Suchexperte für 200 Millionen hochwertige Waren!_files/css.css" type=text/css rel=stylesheet>

Ändern Sie für diese beiden Codeabschnitte den Pfad in den Pfad, in dem die beiden CSS-Dateien gespeichert sind. Das heißt, ändern Sie das vorherige „Taobao.com_Taobao auf Taobao_Taobao.coms 200 Millionen hochwertige Produktsuchexperten! _files“ in den Ordnernamen, in dem Sie die Bilder und CSS-Dateien ablegen. Ich habe es hier in CSS geändert. Der obige Code wird wie folgt geändert:

Nachdem Sie den obigen Inhalt geändert haben, finden Sie im Bereich „Eigenschaften“ unter Dreamweaver eine Schaltfläche „Aktualisieren“. Nach dem Klicken auf „Aktualisieren“ können Sie den Seitenstil in der unteren Hälfte sehen. Als Nächstes können Sie mit der Änderung des Inhalts der Webseite beginnen.

2) Ändern Sie den Inhalt der Webseite

Der Inhalt einer Webseite umfasst Bilder, Textanimationen und andere Informationen. Nehmen wir als Beispiel Bilder. Im Vorschaubereich von Dreamweaver werden Bilder, die nicht angezeigt werden können, grundsätzlich als . Es gibt zwei Arten von Bildern, die in Dreamweaver nicht angezeigt werden können: Zum einen die Netzwerkbildadresse, da Dreamweaver nicht wie der IE auf das Internet zugreifen kann. Wenn es sich um ein solches Bild handelt, können Sie es ignorieren und es wird angezeigt, nachdem es in den Website-Bereich hochgeladen wurde. Zum anderen ist die Bildadresse falsch oder existiert nicht. In diesem Fall müssen Sie die Bildadresse ändern. Die Methode ist wie folgt:

Klicken Sie auf das Bild, das im Vorschaubereich von Dreamweaver nicht angezeigt werden kann, und das Bild wird ausgewählt. Gleichzeitig wird auch der Aufrufcode des Bildes im Codebereich automatisch ausgewählt, wie in der folgenden Abbildung dargestellt:

An dieser Stelle können Sie die Adresse des Bildes ändern, indem Sie den Code ändern oder den Inhalt im roten Feld im obigen Bild ändern. Die „Quelldatei“ ist die Adresse des Bildes. Da mein Bild im CSS-Ordner gespeichert ist, habe ich sie in „css/logo.gif“ geändert; der „Link“ unten ist die Adresse, auf die dieses Bild verweist. Ich möchte keinen Link zu diesem Bild hinzufügen, also lasse ich das Feld leer. Sie können einen Link hinzufügen. Wenn es sich um eine absolute Adresse handelt, die auf das Netzwerk verweist, denken Sie daran, die vollständige Adresse mit http:// zu verwenden. Klicken Sie nach der Änderung auf „Datei“ > „Speichern“, um die Änderungen zu speichern. Sie können die Webseitendatei mit einem Browser öffnen, um den geänderten Stil und Inhalt zu durchsuchen.

Die Methode zum Ändern von Text ist dieselbe wie zum Ändern von Bildern. Wählen Sie zunächst den zu ändernden Text im Vorschaubereich aus. Anschließend können Sie den Code dieses Textes im Codebereich und die Eigenschaften des Textes (einschließlich Schriftart, Stil, Farbe, ob ein Link vorhanden ist usw.) im Bereich "Eigenschaften" anzeigen. Wenn Sie den Inhalt des Textes ändern möchten, geben Sie den gewünschten Text einfach so ein, als würden Sie ihn in Word eingeben. Deshalb werde ich nicht über die Änderung des Textes sprechen. Sie können alle mehr darüber nachdenken und daraus Schlussfolgerungen ziehen.

Mit nur wenigen Schritten können Sie die gesamte Website ganz einfach Ihren Wünschen entsprechend anpassen. Nach dem Speichern der Änderungen laden Sie alle Dateien (auch Webseitendateien, Bilder etc.) in Ihren Bereich hoch, damit Sie darauf zugreifen können. Heute habe ich nur darüber gesprochen, wie Sie die Websites anderer Leute in Ihre eigene Website umwandeln können. Mit dieser Methode können Sie jede gewünschte Website kopieren.

Mit dieser Methode können Sie zwar jeden gewünschten Website-Stil erstellen, aber jede Webseite ist völlig statisch. Wenn Sie den Inhalt aktualisieren möchten, müssen Sie diese Dateien ändern. Wenn einige Personen Artikel usw. veröffentlichen müssen, kann eine so einfache Website nicht realisiert werden. Was sollen wir dann tun? Bitte sehen Sie sich den morgigen Beitrag an – Täglicher Beitrag für Anfänger ⑧: Erstellen Sie ganz einfach eine Artikel-Site.