Das CSS-Webseitenlayout kann auch als systematische Arbeit angesehen werden. Die Entwicklung einer DIVCSS-Website kann von mehreren Personen in Zusammenarbeit durchgeführt werden. Dies bringt viele normative Betriebsprobleme mit sich, selbst wenn sie von einer Person entwickelt werden Organisiert und standardisiert ist dies ein von Blue nachgedruckter Artikel, der sehr effektiv ist. Der Autor hat viele praktische Erfahrungen zusammengefasst, auf die sich jeder beziehen und daraus lernen kann.
Übersicht
Diese Spezifikation ist sowohl eine Entwicklungsspezifikation als auch eine Skriptsprachenreferenz. Diese Spezifikation ist keine unveränderliche Bestimmung, die strikt eingehalten werden muss. Sie muss flexibel verwendet werden und unter bestimmten Umständen müssen bestimmte Änderungen vorgenommen werden. Bitte ändern Sie die Spezifikationen jedoch nicht nach Belieben. Wenn Sie Fragen haben, kontaktieren Sie mich bitte rechtzeitig und ich werde die relevanten Codebeispiele und Dokumente dieser Spezifikation umgehend ändern.
Grundvoraussetzungen
1. Öffnen Sie im Stammverzeichnis der Website drei Unterverzeichnisse für allgemeine Bilder und öffnen Sie bei Bedarf ein Unterverzeichnis für Medien. Das Bildverzeichnis enthält öffentliche Bilder, die von Seiten in verschiedenen Spalten verwendet werden, z. B. Firmenlogos, Banner usw Menüs, Schaltflächen usw.; das allgemeine Unterverzeichnis enthält öffentliche Dateien wie CSS, JS, Include usw.; das Unterverzeichnis „Medien“ enthält verschiedene Texte, Bilder und andere von Kunden bereitgestellte Originalmaterialien. AVI, Quick Time usw. Multimediadateien.
2. Grundsätzlich sollte für jede Spalte im Stammverzeichnis ein Verzeichnis entsprechend der Spaltenstruktur der Homepage geöffnet werden. Bei Bedarf sollte im Verzeichnis jeder Spalte ein Unterverzeichnis für Bilder und Medien geöffnet werden, um die Bilder und Medien zu platzieren exklusiv für diese Spalte: Wenn diese Spalte viel Inhalt hat und in viele untergeordnete Spalten unterteilt ist, können andere Verzeichnisse entsprechend geöffnet werden.
3. Im temporären Verzeichnis befinden sich häufig viele Dateien. Es wird empfohlen, ein Verzeichnis mit dem Namen „time“ zu öffnen, um die vom Kunden bereitgestellten Informationen nacheinander zu klassifizieren und zu organisieren.
4. Sofern keine besonderen Umstände vorliegen, sollten die Namen von Verzeichnissen und Dateien eine Kombination aus englischen Kleinbuchstaben, Zahlen und Unterstrichen enthalten. Bitte verwenden Sie bei der Benennung kein Englisch Verwenden Sie Pinyin nicht, es sei denn, dies ist unbedingt erforderlich. Die Erfahrung hat gezeigt, dass mit Pinyin benannte Verzeichnisse einen Monat später für Sie oft unverständlich
sind
. Das bedeutet, dass Sie es einen Monat später und einen Monat zuvor geschrieben haben. Der Skriptstil bleibt konsistent, ebenso wie der Skriptstil, der von verschiedenen Entwicklern in derselben Arbeitsgruppe geschrieben wurde, da wir nicht ewig isoliert entwickeln können und Sie möglicherweise immer arbeiten Wenn Sie vor drei Monaten mit sich selbst zusammengearbeitet haben (Ihr Kunde hat um eine Überarbeitung gebeten), müssen Sie häufig gemeinsam mit verschiedenen Kollegen im Studio ein Projekt entwickeln und werden möglicherweise gebeten, Skripte zu ändern, die von Personen entwickelt wurden, die zurückgetreten sind Überlassen Sie ein Projekt nachfolgenden Kollegen.
1. Universelle Vorlage für HTML-Dateien:
div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com]
<html>
<!–
Generator: Sub Design Studio ( www.eastline.net.cn )
Erstellungsdaten: 2000-8-1
Originalautor: Eastline
–>
<Kopf>
<title>Dokumenttitel</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta name="author" content="eastline">
Andere Meta-Tags
div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com]
<link rel="stylesheet" type="text/css" href="style/style.css">
Stylesheet-Definitions-Client Javascript-Funktionsdefinition und Initialisierungsoperation
div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css com ]
</head>
<body bgcolor="#ffffff">
… …
</body>
Hinzugefügt:
Um sicherzustellen, dass die Website mit den XML-Standards der nächsten Generation der Websprache kompatibel ist, müssen alle HTML-Tag-Attribute in einfache oder doppelte Anführungszeichen gesetzt werden, d. h. wir sollten <a href="url"> anstelle von < schreiben a href=url >.
2. Für Seiten, die den Volltextabruf ermöglichen, sollten Schlüsselwörter und Beschreibungs-Meta-Tags zwischen dem <head></head> des HTML eingefügt werden, um eine effektive Suche durch Suchmaschinen im Internet zu ermöglichen auf der Homepage des Kanals, zum Beispiel:
div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com]
<meta name=“keywords“ content=“Orientalischer Shinkansen, Autos, Autokauf“/>
<meta name=“description“ content=“Oriental New Kanjin Line, die weltweit erste Haltestelle für chinesische Autoinformationen“/>
3. Beispielcode für das CSS-Dateiformat:
div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css com ]
<style type="text/css">
<!—
p { text-indent: 2em }
body { Schriftfamilie: "宋体"; Schriftgröße: #000000; Rand-rechts: 0px;
Tabelle {Schriftfamilie: "宋体"; Schriftgröße: 9pt; Zeilenhöhe: 20px;
a:link { Schriftgröße: 9pt; Farbe: #FFFFFF; text-decoration: none}
a:visited { Schriftgröße: 9pt; Farbe: #99FFFF;
a:hover { Schriftgröße: 9pt; Farbe: #FF9900;
a:active { Schriftgröße: 9pt; Farbe: #FF9900;
a.1:link { Schriftgröße: 9pt; Farbe: #3366cc;
a.1:visited { Schriftgröße: 9pt; Farbe: #3366cc;
a.1:hover { Schriftgröße: 9pt; Farbe: #FF9900;
a.1:aktiv { Schriftgröße: 9pt; Farbe: #FF9922;
.blue { Schriftfamilie: "宋体"; Schriftgröße: 10,5 pt; Farbe: #0099FF;
–>
</style>
Hierbei ist besonders zu beachten, dass die Reihenfolge von a:link a:visited a:hover a:actived unbedingt nach obigem Beispielcode erfolgen muss, da sonst mehr oder weniger Probleme auftreten. Darüber hinaus legen wir fest, dass die Neudefinition an erster Stelle steht, Pseudoklassen an zweiter Stelle und die Anpassung an letzter Stelle, um das Lesen für Sie und andere zu erleichtern!
Um sicherzustellen, dass die Schriftgröße in verschiedenen Browsern konsistent ist, wird empfohlen, die Schriftgröße in Punkt pt und Pixel zu definieren. px verwendet im Chinesischen der Song-Dynastie im Allgemeinen 9pt und 11pt und px im Allgemeinen 12px und 14,7px im Chinesischen Songti ist eine optimierte Schriftgröße. Bei Song-Schriftarten sind die Schriftgrößen 11pt und 14,7px im Allgemeinen besser geeignet.
Wenn Sie <table> so schreiben, dass sie sich gegenseitig verschachteln, befolgen Sie strikt den Standard. Für eine einzelne <table> sollte <table><tr> ausgerichtet sein, <td> sollte um zwei Leerzeichen halber Breite eingerückt sein, und falls vorhanden Sonstiges Bei verschachtelten Tabellen wird <table> auch um zwei Leerzeichen halber Breite eingerückt. Wenn in <td> keine verschachtelte Tabelle vorhanden ist, sollte sich das schließende Tag von </td> in derselben Zeile wie <td> befinden, ohne Zeile
Wie wir in bemerken,
sollte es keinen solchen Code im Quellcode geben:
div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com]
<td><img src="../images/sample.gif">
</td>
Es sollte so aussehen:
div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com]
<td><img src="../images/sample.gif"></td>
Dies liegt daran, dass der Browser davon ausgeht, dass eine neue Zeile einem Leerzeichen halber Breite entspricht. Die obige unregelmäßige Schreibmethode entspricht einem unbeabsichtigten Hinzufügen ein Leerzeichen halber Breite. Es ist tatsächlich notwendig, ein Leerzeichen halber Breite hinzuzufügen, und es sollte wie folgt geschrieben werden:
div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com]
<td><img src=""../images/sample.gif"> </td>
<table>, die zur gleichen Ebene gehören, müssen linksbündig sein, und leere Zellen ohne Inhalt dürfen nicht existieren Zwischen <td> und </td> sollte eine Höhe größer oder gleich 12 Pixel geschrieben werden. Wenn die Höhe weniger als 12 Pixel beträgt, sollte ein transparentes GIF der Größe 1*1 zwischen <td> und </td> eingefügt werden. Dies liegt daran, dass einige Browser leere Zellen als illegal betrachten und diese nicht interpretieren. Wenn die Codereihenfolge chaotisch ist, können Sie sie über Befehl->Quellenformatierung anwenden in DW3 neu anordnen!
5. Es gibt auch einheitliche Standards für das Schreiben von Breite und Höhe. Im Allgemeinen wird bei Tabellen mit nur einer Spalte die Breite in das Tag <table> geschrieben; bei Tabellen mit nur einer Zeile wird die Höhe in das Tag <table> geschrieben ; für Tabellen mit mehreren Zeilen und mehreren Spalten Tabelle, Breite und Höhe werden in das <td>-Tag der ersten Zeile oder Spalte geschrieben. Kurz gesagt, folgen Sie einem Prinzip: Es sollte nicht mehr als eine Höhe und Breite geben, die die Größe derselben Zelle steuern. Stellen Sie sicher, dass jede Breite und Höhe gültig ist. Das heißt, wenn Sie den Wert einer beliebigen Breite und Höhe ändern Code, es sollte in Änderungen im Browser sichtbar sein. Dies ist nicht einfach, es erfordert viel Übung und Nachdenken.
Allgemeine Grundsätze
1. Überlegen Sie sich vor dem Anordnen von Tabellen sorgfältig, welche Lösung die beste ist. Versuchen Sie, die Verschachtelung von Tabellen innerhalb von drei Ebenen zu kontrollieren und die beiden Tags <colspan> und <rowspan> zu vermeiden eine Menge Ärger.
2. Eine Webseite sollte versuchen, die Verwendung einer gesamten großen Tabelle zu vermeiden, da der Browser die Elemente der Seite einzeln in Tabelleneinheiten anzeigt, wenn sie eingebettet sind Wenn es in einer großen Tabelle platziert wird, besteht die wahrscheinliche Konsequenz darin, dass der Besucher beim Eingeben der URL zunächst lange Zeit mit einer leeren Stelle konfrontiert wird und dann der gesamte Webinhalt gleichzeitig angezeigt wird. Wenn Sie dies tun müssen, verwenden Sie das Tag <tbody>, damit die große Tabelle in Blöcken angezeigt werden kann.
3. Beim Schriftsatz kommt es oft vor, dass die erste Zeile eingerückt wird. Verwenden Sie keine Leerzeichen in voller Breite, um den Effekt zu erzielen. Der Standardansatz besteht darin, p { text-indent: 2em } im Stylesheet zu definieren Fügen Sie jedem Absatz das <p>-Tag hinzu. Bitte beachten Sie, dass unter normalen Umständen das schließende Tag </p> nicht weggelassen werden darf.
4. Grundsätzlich verbieten wir die Verwendung von <img width=? height=?>, um die Größe der Bildanzeige künstlich zu beeinträchtigen, und es wird empfohlen, die Attribute width und height nicht in das Tag <img> aufzunehmen Während des Produktionsprozesses muss das Bild häufig wiederholt werden, wodurch menschliche Eingriffe in die Größe der Bildanzeige vermieden und die eigenen Funktionen des Browsers maximiert werden können. Ein Nebeneffekt davon ist jedoch, dass die Webseite das Bild nicht geladen hat , wird die Site-Größe des Bildes nicht reserviert. Dies kann dazu führen, dass die Webseite beim Laden wackelt (wenn das Bild in eine Tabelle mit fester Größe eingefügt wird, tritt dieses Phänomen nicht auf), insbesondere wenn die Größe des Bildes groß ist groß, dieses Phänomen wird offensichtlich sein. Wenn also erwartet wird, dass diese Situation auftritt, die offensichtlich dazu führt, dass die Webseite zittert, stellen Sie bitte sicher, dass Sie am Ende die Attribute width und height an <img> anhängen.
5. Um die automatische Satzfunktion des Browsers zu maximieren, versuchen Sie bitte, mit <br> nicht manuell in die Segmentierung eines Gesamttextes einzugreifen.
6. Zwischen Wörtern in verschiedenen Sprachen sollte ein Leerzeichen halber Breite stehen, außer vor dem Kopfzeilensymbol und nach dem Endzeichen. Die Interpunktion zwischen chinesischen Zeichen sollte in voller Breite erfolgen, und die Klammern um englische Buchstaben und Zahlen sollten halbiert sein -Breite Klammern.
7. Alle Schriftgrößen sollten mithilfe von Stylesheets implementiert werden und <font size=?>-Tags dürfen nicht auf der Seite angezeigt werden.
8. Bitte lassen Sie nicht mehr als ein aufeinanderfolgendes Leerzeichen auf der Webseite und verwenden Sie Leerzeichen in voller Breite so wenig wie möglich (unter dem englischen Zeichensatz werden Leerzeichen in voller Breite zu verstümmelten Zeichen. Verwenden Sie Texteinzug, Auffüllung und Rand). , hspace, vspace und Transparenz für Leerraumbilder.
9. Bei der Mischung von Chinesisch und Englisch versuchen wir unser Bestes, Englisch und Zahlen als Verdana- und Arial-Schriftarten zu definieren.
10. Es wird empfohlen, einen Prozentsatz zum Definieren des Zeilenabstands zu verwenden. Die häufig verwendeten zwei Zeilenabstandswerte sind line-height:120 %/150 %.
11. Alle Pfade auf der Website verwenden relative Pfade und verweisen im Allgemeinen auf Der Linkpfad muss beispielsweise nicht der vollständige Name sein: <a href=“aboutus/index.htm“>, sondern sollte so lauten: <a href=“aboutus/“>
12. Es wird empfohlen, beim Einbetten von Grafiktexten größere Schriftarten zu verwenden. Fügen Sie keinen Text in Grafiken ein.
13. „Webseitengröße“ ist definiert als die Summe der Dateigrößen aller Webseiten, einschließlich HTML-Dateien und aller eingebetteten Objekte. Benutzer bevorzugen Websites, die schnell sind, statt Romane. Für Modembenutzer ist es sinnvoll, die Seitengröße unter 34 KB zu halten.
Grundsätze zur Dateibenennung
1. Jedes Verzeichnis sollte eine Standard-HTML-Datei enthalten und der Dateiname sollte index.htm sein.
2. Dateinamen sollten eine Kombination aus englischen Kleinbuchstaben, Zahlen und Unterstrichen sein.
3. Die Leitidee des Benennungsprinzips besteht darin, es Ihnen und jedem Mitglied der Arbeitsgruppe zu ermöglichen, die Bedeutung jeder Datei leicht zu verstehen. Die zweite besteht darin, dass wir den Befehl „Nach Namen sortieren“ in einem Ordner verwenden Kategorien von Dateien können zusammengestellt werden, sodass wir suchen, ändern, ersetzen, die Auslastung berechnen usw. können.
4. Im Folgenden wird die Spalte „Nachrichten“ (einschließlich „Inlandsnachrichten“ und „Internationale Nachrichten“) verwendet, um das Benennungsprinzip von HTML-Dateien zu erläutern:
☆ Erstellen Sie ein Nachrichtenverzeichnis im Stammverzeichnis. ☆ Das erste Standardnachrichtenelement heißt index.htm
☆ Alle Nachrichten, die zu „Inlandsnachrichten“ gehören, werden in der Reihenfolge benannt: china_1.htm, china_2.htm, …
☆ Alle Nachrichten, die zu „International News“ gehören, werden in der Reihenfolge benannt: internation_1.htm, internation _2.htm, …
☆ Wenn die Anzahl der Dateien zweistellig ist, benennen Sie bitte die ersten neun Dateien: china_01.htm, china_02.htm, um sicherzustellen, dass alle Dateien korrekt im Ordner sortiert werden können.
5. Die Benennungsprinzipien von Bildern folgen den folgenden Standards:
☆ Der Name ist in zwei Teile unterteilt, den ersten und den letzten Teil, getrennt durch Unterstriche.
☆ Der Kopfteil gibt die allgemeine Art des Bildes an, z. B. Werbung, Logo, Menü, Schaltfläche usw.
☆ Generell gilt:
Wir nennen die oben auf der Seite platzierten rechteckigen Bilder wie Anzeigen und dekorative Muster: Banner
Wir haben das ikonische Bild „Logo“ genannt
Wir benennen das kleine Bild mit einem Link, der nicht auf dem Seitenbutton fixiert ist
Wir nennen die Bilder von Linkspalten, die fortlaufend an einer bestimmten Position auf der Seite erscheinen und die gleiche Natur haben: Menü
Wir haben das Foto zur Dekoration benannt: pic
Wir benennen das Bild ohne Link, um den Titel anzugeben: title
Befolgen Sie dieses Prinzip und so weiter.
☆Der Schwanzteil wird verwendet, um die spezifische Bedeutung des Bildes auszudrücken.
☆ Hier ein paar Beispiele: Sie sollten die Bedeutung der Bilder auf einen Blick verstehen:
div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com]
banner_sohu.gif
banner_sina.gif
menu_aboutus.gif
menu_job.gif
title_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_hill.jpg