Wie Sie Ihre Web-Seite verkleinern

Web-Browser wie Internet Explorer, Chrome und Firefox unterstützen universelle Tastatur-Shortcuts für vergrößern und Verkleinern von Webseiten, aber HTML und CSS Design bestimmt, wie eine Seite verhält, wenn es von einem Benutzer skaliert wird. Wenn Sie Ihre Webseite in allen Browsern kleiner machen möchten, können Sie die Attribute Width und Height in Ihrem Template-Code, aber achten Sie beim absoluten Dimensionen für ein Objekt angeben, da Ihre Seite auf verschiedenen Bildschirmgrößen angezeigt wird. Eine elegante Lösung in den meisten Fällen ist ein Objekt Breite als Prozentsatz des übergeordneten angegeben.

Anweisungen

1 Stellen Sie eine Webseite, die Sie in Ihrem Browser kleinere anzeigen durch Drücken von "Strg-Minus" zum Verkleinern. Alternativ stellen Sie den Zoomfaktor auf 100 Prozent durch Drücken von "STRG-0." Diese Verknüpfungen sind universell für die meisten Browser wie IE, Chrome und Firefox. Aus einer Webseite Zoomen hat die gleiche Wirkung auf HTML-Elemente wie Fenster skalieren; Ihre Positionierung wird durch die Größe des Speicherplatzes im Fenster bestimmt. Um das Fenster zu skalieren, klicken Sie auf eine Ecke des Fensters, ziehen Sie es an die gegenüberliegende Ecke und lassen Sie es dann.

2 Kontrolle der Höhe und Breite einer Webseite, die Sie entwerfen versuchen, Ihre Zuschauer erleben konsistent. Starten Sie durch Ihre Template-Code in einem Texteditor öffnen. Homepagevorlagen sind in grafischer Blöcke mit Div oder Table-Elementen unterteilt, obwohl Tabellen nicht für diesen Zweck ausgelegt sind. Das äußerste Div-Blocks möglicherweise Kind Div-Blöcke, oder Ihre Web-Seite möglicherweise mehrere Top-Level-Div-Elemente ohne Eltern. Weist ein Div-Block Kinder, seiner Eröffnung "< Div >" vorangestellt ist, ihnen und ihren Abschluss "< / Div >" folgt ihnen.

3 Finden Sie jedes Div die Attribute Height und Width des Elements. Je nach Ihrer Vorlage Layout diese Einstellungen sind in CSS oder HTML codierte und Ihren Vorlagencode gehören separate CSS und HTML-Dateien oder sie in einer HTML-Datei kombinieren kann. Wenn Ihre Webseite separate CSS und HTML-Dateien hat, haben sie die gleichen Dateinamen wie index.css und index.html, zum Beispiel. Sie können suchen für Div-Elemente in den meisten Texteditoren durch Drücken von "Strg-F", um das suchen zu öffnen und dann suchen nach "div."

4 Senken Sie die Höhe oder Breite eines Div-Elements seinen aktuellen Wert durch ein kleineres ersetzt. Dieser Schritt dauert einige Experimente, und zeigen Sie Ihre Änderungen durch aktualisierte Vorlagencode in einem Webbrowser öffnen. Dazu mit der rechten Maustaste der HTML-Datei auf Ihrem Desktop, wählen Sie "Öffnen" und wählen Sie Ihren Browser.

5 Skalieren Sie Ihre Web-Seite des Browser-Fensters automatisch angepasst. Suchen Sie das äußerste Div-Element in der HTML-Datei oder seine externen Stylesheet CSS-Klasse. Seine Max-Width und Height-Attribute auf die folgenden Werte festgelegt:

.outermost-Div-Element {}Max-Width: 100 %;Höhe: auto;}

Wenn Sie das Element, das weniger Platz einnehmen möchten, legen Sie einen niedrigeren Prozentsatz für Max-Breite. Mit diesem Code, passt die Höhe automatisch entsprechend der Breite, die durch die Fenstergröße bestimmt wird, wie es skaliert wird. Das Max-Width-Attribut bietet ein einheitliches Erscheinungsbild für Ihre Web-Seite über alle Bildschirmgrößen.

Tipps & Warnungen

• Die Breite, Max-Width und Height-Attribute bestimmen die Größe des HTML-Elements. Beispielsweise wenn ein Bild automatisch skalieren möchten, fügen Sie die folgenden Attribute auf die CSS-Definition:
• IMG {}
• Max-Width: 100 %;
• Höhe: auto;
• Breite: Auto/9;
• }
• Der Wert "Auto/9" für das Width-Attribut behebt ein Skalierung Problem in älteren Versionen des IE.