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. Zusammenfassung 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 drei Unterverzeichnisse von „images common temp“ im Stammverzeichnis der Website und öffnen Sie dann nach Bedarf ein Medienunterverzeichnis. Das Verzeichnis „images“ enthält öffentliche Bilder, die von Seiten in verschiedenen Spalten verwendet werden, z. B. Firmenlogos, Banner, Menüs usw. und Schaltflächen. Das allgemeine Unterverzeichnis enthält öffentliche Dateien wie CSS, JS, Include usw.; das temporäre Unterverzeichnis enthält verschiedene von Kunden bereitgestellte Texte, Bilder und andere Flash, AVI, Quick Time usw. . 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 nach Zeit benanntes Verzeichnis zu öffnen, um die von 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, es ist unbedingt erforderlich. Die Erfahrung zeigt, dass mit Pinyin benannte Verzeichnisse selbst einen Monat später oft schwer zu verstehen sind. Skripterstellung Wir sollten ein konsistentes Konzept für den Gesamtstil des Drehbuchs haben, was bedeutet, dass der Stil des Drehbuchs, das Sie einen Monat später geschrieben haben, mit dem Stil des Drehbuchs übereinstimmt, das Sie vor einem Monat geschrieben haben, und dass der Stil des Drehbuchs, das Sie geschrieben haben, übereinstimmt Verschiedene Entwickler in derselben Arbeitsgruppe sind konsistent, da wir nicht für immer isoliert entwickeln können. Möglicherweise arbeiten Sie vor drei Monaten jederzeit mit sich selbst zusammen (Ihr Kunde benötigt eine Überarbeitung). Oft müssen Sie ein Projekt mit verschiedenen Kollegen in der entwickeln Studio, und Sie werden möglicherweise auch gebeten, zurückgetretene Skripte zu ändern. Natürlich können Sie ein Projekt auch nachfolgenden Kollegen überlassen. 1. Universelle Vorlage für HTML-Dateien: div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] Andere Meta-Tags div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] Das Stylesheet definiert die clientseitige Javascript-Funktionsdefinition und den Initialisierungsvorgang div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] Auffüllen: 2. Für Seiten, die den Volltextabruf ermöglichen, sollten Schlüsselwörter und Beschreibungs-Meta-Tags zwischen dem <head></head> des HTML auf der Homepage des Kanals eingefügt werden, um einen effektiven Abruf durch Suchmaschinen im Internet zu ermöglichen , Zum Beispiel: div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] 3. Beispielcode für das CSS-Dateiformat: div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] Hier ist besonders zu beachten, dass die Reihenfolge von a:link a:visited a:hover a:actived strikt dem obigen Beispielcode entsprechen 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 bricht. Wie wir anmerken, sollte der Quellcode keinen solchen Code enthalten: div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] Stattdessen sollte es so aussehen: div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] Dies liegt daran, dass der Browser davon ausgeht, dass eine neue Zeile einem Leerzeichen halber Breite entspricht. Die obige unregelmäßige Schreibmethode entspricht dem unbeabsichtigten Hinzufügen eines Leerzeichens halber Breite so geschrieben: div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode [www.52css.com] <table>, das zur gleichen Ebene gehört, muss linksbündig sein. Außerdem dürfen keine Zellen mit einer Höhe von 12 Pixeln oder mehr zwischen <td> und </td> geschrieben werden die Höhe weniger als 12 Pixel beträgt, sollte ein 1*1 transparentes GIF-Bild zwischen <td> und </td> eingefügt werden. Dies liegt daran, dass einige Browser leere Zellen als illegal betrachten und sie 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. Bevor Sie die Tabelle anordnen, überlegen Sie sich bitte 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 viel Ä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. Wir verbieten grundsätzlich die Verwendung von <img width=? height=?>, um die Größe der Bildanzeige künstlich zu beeinträchtigen, und es wird empfohlen, Breite und Höhe nicht in das <img>-Tag aufzunehmen Dies liegt daran, dass Bilder während des Produktionsprozesses häufig wiederholt geändert werden müssen. Dadurch können menschliche Eingriffe in die Größe der Bildanzeige vermieden und die eigenen Funktionen des Browsers maximiert werden Die Seite hat das Bild nicht geladen. Wenn das Bild hinzugefügt wird, wird die Site-Größe des Bildes nicht ausgelassen, was dazu führen kann, dass die Webseite nicht geladen wird Jitter beim Laden (wenn das Bild in eine Tabelle mit fester Größe eingefügt wird, tritt dieses Phänomen nicht auf), insbesondere wenn das Bild groß ist, ist dieses Phänomen offensichtlich Sollte es zu einer Situation kommen, die dazu führt, dass die Webseite wackelt, fügen Sie am Ende unbedingt width zu <img> hinzu. und Höhenattribut. 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, den Zeilenabstand in Prozent zu definieren. Die üblicherweise verwendeten zwei Zeilenabstandswerte sind Zeilenhöhe: 120 %/150 %. 11. Alle Pfade auf der Website verwenden relative Pfade. Im Allgemeinen muss der Linkpfad zur Standarddatei in einem bestimmten Verzeichnis nicht im vollständigen Namen angegeben werden: <a href= „aboutus/index.htm“> sollte aber so aussehen:<a href=“aboutus/“> 12. Verwenden Sie beim Einbetten von Text in Grafiken größere Schriftarten. Es wird empfohlen, keinen Text in Grafiken einzubinden. 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. Regeln für die Benennung von Dateien 1. Jedes Verzeichnis sollte eine Standard-HTML-Datei enthalten und der Dateiname sollte index.htm lauten. 2. Der Dateiname sollte eine Kombination aus englischen Kleinbuchstaben, Zahlen und Unterstrichen enthalten. 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: 5. Die Benennungsprinzipien von Bildern folgen den folgenden Standards: ☆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]
<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">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body bgcolor="#ffffff">
… …
</body>
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 >.
<meta name=“keywords“ content=“Orientalischer Shinkansen, Autos, Autokauf“/>
<meta name=“description“ content=“Oriental New Kanjin Line, die weltweit erste Haltestelle für chinesische Automobilinformationen“/>
<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>
<td><img src="../images/sample.gif">
</td>
<td><img src="../images/sample.gif"></td>
<td><img src="../images/sample.gif"> </td>
☆ 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.
☆ 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.
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