Wie man eine (einfache) kundenspezifische Profil-Layout - Teil I, HTML

Ändern Sie Ihre HTML eine Tabelle aufzunehmen.

Ihr Layout wird gleich aussehen, aber jetzt haben wir interne Abteilungen zu arbeiten.

Als nächstes werden wir IDs hinzuzufügen. Sie benötigen eine ID für die Tabelle und für TD, aber nicht für die TR, weil TRs sind nie mit CSS codiert.

Nun, da wir IDs haben, gibt es ein paar Regeln, die wir brauchen, um über für Tabellen zu sprechen. Erstens ist Cellspacing. CellSpacing definiert, wie viel Abstand zwischen den Zellen einer Tabelle ist. Wenn Sie es auf hoch gesetzt haben, wird es zwischen den Zellen unterscheidenden Lücken. Der Code Cellspacing zu setzen, ist dies: cellspacing = „0“ (oder was auch immer Nummer Sie wählen).

Zweitens ist die Grenze der Tabelle. Die Grenze, die automatisch erscheint ist in der Regel unattraktiv. Die Grenze mit diesem Code festgelegt ist: border = „0“ (diese Zahl ist die Dicke der Grenze - auf Null gesetzt, wird die Grenze zeigen, überhaupt nicht nach oben).

Ihre HTML sollte nun wie folgt aussehen:

Als nächstes werden wir unser Layout zu zentrieren. Es ist ein sehr einfacher Code:

Ihre Profilseite sollte wie folgt aussehen.

(Anmerkung: Wordsenclosed mögen in HTML beeinflussen Ihr Layout nicht. Sie sind nur Etiketten Sie den Überblick über alles, um zu helfen. Sie können sie herausnehmen, wenn Sie möchten, oder mehr hinzuzufügen. )

Jetzt wird Ihr Profil wie folgt aussehen.

Wir haben ein Problem, aber: wir die TDs in den Reihen A und C doppelt so breit wie die TDs in Reihe B. machen wollen Um das zu tun, müssen wir einen Code namens colspan. Colspan erzählt eine Teilung, wie breit zu sein. Wir gehen colspan = „2“ auf TDs eins und vier so hinzuzufügen, dass sie doppelt so breit wie TDs sein wird zwei und drei.

Ihre HTML sollte wie folgt aussehen:

Lassen Sie uns zunächst einige Header hinzufügen. „Header“ ist, welche Titel in Web-Design bezeichnet werden. Wir werden Header hinzufügen, indem Sie

Lassen Sie sich hinzufügen Header zu jedem des TDs in unserem Profil.

(Ihr Profil sollte so aussehen. Da wir keinen Header erzählt, was wie noch zu sehen, sie wie normale Text sehen immer noch. Keine Sorge, wir werden das in Ordnung bringen mit CSS!)

(Der Rest des Codes sollte noch da sein, aber um Platz zu sparen, werden wir schauen nur auf TD „Eins“ zu sehen, wie ein Bild hinzufügen Wir werden das gleiche tun für das Hinzufügen von anderen Arten von Inhalten -. Nur don‘ t etwas anderes als das Wort „Content“ löschen!)

Jetzt ist Ihr Layout wird wie folgt aussehen.

Lassen Sie uns einige Links zu unseren TDs in Reihe B, zwei und drei hinzuzufügen. Links sind in HTML und CSS mit dem Code bezeichnet . die URL in unserem Layout zu verlassen ist ein bisschen hässlich, obwohl, so werden wir die URL in Text verbergen. Um dies zu erreichen, verwenden wir diesen Code: Text .

Hier ist, was Reihe B sollte wie folgt aussehen:

Ihr Layout sieht nun wie folgt aus. Sie fragen sich vielleicht, warum alle Links auf einer Linie sind - es ist, weil in HTML, geben Sie schlagen nicht einen Zeilenumbruch in Ihrem Layout erstellen. Um einen Zeilenumbruch zu erstellen, müssen Sie den Code hinzufügen
oder
. Hinzufügen
nach jedem in Ihrem Code und Ihr Layout wird wie folgt aussehen.

Jetzt werden wir etwas Text addieren. Wie Sie gesehen haben, wenn dein Profil nur das Wort „Content“ gehalten, brauchen Sie keinen speziellen Codes Text einzufügen. Sie Codes benötigen, um Text fett, kursiv, durchgestrichen oder unterstrichen. TD vier und Beispiele für jedes dieser vier Text Modifikatoren Lassen Sie uns etwas Fülltext hinzu: