Bei der Gestaltung von Websites müssen Sie oft eine grundlegende Frage lösen: Wie verhält sich die Seite, wenn sie mit unterschiedlichen Bildschirmauflösungen geöffnet wird? Hier gibt es zwei Optionen - "Gummi"-Seiten (dehnen) oder statisch. Die erste Möglichkeit wird besprochen. Was auch immer Sie für ein Layout bevorzugen, der Hauptgrundsatz des Stretch-Designs ist die relative Skalierbarkeit.
Es ist notwendig
- - HTML-Kenntnisse;
- - Programm zum Bearbeiten von HTML-Code.
Anleitung
Schritt 1
Wählen Sie die Hauptdatei für Ihre Site-Vorlage aus, die das Haupt-Markup widerspiegelt. Dies kann die Datei index.html oder index.php sein. Eine der besten Software zum Bearbeiten von visuellen Site-Vorlagen ist Macromedia Dreamweawer. Die notwendige Bearbeitung erfolgt auf Basis dieses Programms.
Öffnen Sie die Vorlagendatei oder erstellen Sie eine neue mit dem Befehl "Datei" - "Neu", Kategorie - "Basisseite" - "HTML" oder Kategorie "Dynamische Seite" - "PHP". Hier betrachten wir den allgemeinen Fall, wenn die Site-Struktur in genau einer der beiden Dateien aufgezeichnet wird.
Schritt 2
Es ist schon lange kein Geheimnis mehr, dass es verschiedene Arten von Layouts gibt – auf Tabellen, auf div-Blöcken und kombiniert (Tabellen und Blöcke gleichzeitig). Das HTML-Tag ist für das Tabellenlayout verantwortlich
Geben Sie für jede Eigenschaft einen Prozentsatz (100 %) an. Dadurch wird der Effekt erzielt, dass Tabellenzellen auf Bildschirmen mit beliebiger Geometrie automatisch gestreckt werden. Es kann ein 19-Zoll-Monitor oder ein Smartphone sein - jeder von ihnen wird den Inhalt korrekt wiedergeben.
Schritt 3
Wenn Sie die Entsprechung zwischen Tabellenzellen genau angeben müssen, verwenden Sie das folgende Beispiel:
| … … der Inhalt von Zelle 1. … | … … der Inhalt von Zelle 2. … |
Hier sehen Sie, dass eine der Zellen mit einer Breite von 30% von allem angegeben wird, was für die Tabelle selbst definiert ist. Eine einfache Rechnung zeigt, dass für die zweite Zelle 100 % -30 % = 70 % übrig bleiben. Beachten Sie, dass in diesem Fall für eine der Tabellenzellen das width-Attribut nicht gesetzt sein darf. Der Browser führt alle Berechnungen selbst durch und streckt die Tabelle mit Zellen korrekt. Inhalte in Tabellen werden auch auf verschiedenen Bildschirmen korrekt gestreckt und geschrumpft.
Schritt 4
Bei einem div-Layout werden die Tag-Blöcke standardmäßig auf die volle Bildschirmbreite gestreckt und folgen nacheinander von links nach rechts, von oben nach unten. Um deren Geometrie zu verfeinern, erstellen Sie eine CCS-Klasse oder Kennung (ID), in der Sie beispielsweise die Attribute und/oder für die Kategorie Größe und Position der Box (Box) angeben. Vergessen Sie nicht, den angegebenen Stil mit der Site-Markup-Datei zu verknüpfen und die Klasse (ID) an das gewünschte Tag zu binden. Normalerweise wird es ganz am Anfang des Skripts platziert und definiert die gesamte zukünftige Site-Geometrie:
… … Inhalt der Website. …
Oder so:
… … Inhalt der Website. …
Der Code für die CSS-Regel sieht wie folgt aus:
… meine Klasse {
Breite: 30%;
Höhe: 50%;
}
#meine ID {
Breite: 30%;
Höhe: 50%;
}
