Da viele Freunde gefragt haben, wie man Bilder schneidet, und da dieses Problem groß oder klein sein kann, ist es absolut unmöglich, es in ein oder zwei Sätzen klar zu erklären. Deshalb werde ich dieses Problem mit einem einfachen Beispiel veranschaulichen, wenn ich Zeit habe Heute Zeit zu Hause! OK, fangen wir an:
Schritt 1: Öffnen Sie den Designentwurf in PhotoShop, wie unten gezeigt
Wählen Sie das Slice-Werkzeug auf der Werkzeugtafel aus und machen Sie zuerst einen fetten Schnitt! Tipps: Schneiden Sie einen großen Bereich des Farbblocks separat in ein Stück und halten Sie ihn so sauber wie möglich auf der horizontalen Linie (mehr darüber erfahren Sie). Ausgabe in der späteren Produktionsseite) Gefühl) Das Schnittbild ist wie folgt:
Schritt 2: Wählen Sie „Datei für Web speichern...“ zur Ausgabe aus. Achten Sie hier auf die Auswahl einiger Parameter:
Schauen wir uns die durch die rote Linie markierten Teile 1, 2 und 3 an. Wählen Sie das in 1 gezeigte Slicing-Werkzeug aus, klicken Sie dann auf das in 2 gezeigte Bild und wählen Sie den Farbwert an der in 3 gezeigten Stelle aus Farbe ist einfach, Sie können den Farbwert so klein wie möglich wählen. (Warum ist das so?) Antwort: Dadurch wird die Größe der Datei erheblich reduziert und gleichzeitig wird die Farbe des Bildes nach der Einstellung besser beibehalten Klicken Sie darauf, um die Datei auszugeben. Die Datei enthält hier einen HTM- und einen Bilderordner, wie in der Abbildung gezeigt:
Ihre Seite ist zu diesem Zeitpunkt erst zur Hälfte fertig. Erstellen Sie als Nächstes die Site in Dreamweaver:
Schritt 3: Definieren Sie die Site:
Geben Sie der Site einen Namen im Site-Namen auf der linken Seite des Bildes ein, z. B. example
Wählen Sie dann alle Ordner der Site aus, die wir gerade im lokalen Stammordner exportiert haben. Nachdem die Site erstellt wurde, sehen wir in der Sitemap:
(Warum eine Website erstellen?) Durch das Erstellen einer Website können wir uns die gute Angewohnheit aneignen, die auf einer Website enthaltenen Dateien und Ordner ordentlich zusammenzustellen. Gleichzeitig können wir die Website problemlos an andere Orte verschieben . platzieren, ohne den Dateipfad neu zu schreiben! (Wenn Sie wirklich keine Site erstellen möchten, wird Sie niemand dazu zwingen. Ich bin bei meiner Arbeit auf solche Kollegen gestoßen. Sie sind es nicht gewohnt, Sites für Seiten zu erstellen . Natürlich wird es eine Menge Ärger geben.
Schritt 4: Erstellen Sie die Seitentabelle neu (warum?). Normalerweise kann die direkt in Photoshop exportierte HTM-Datei nicht direkt verwendet werden, da einige Stellen während der tatsächlichen Verwendung angepasst werden müssen. B. Orte mit dynamischem Text, müssen wir sie zur Seite hinzufügen. Wenn die Eingabeseite keine Bilder verwendet, müssen die Bilder entfernt werden. Wenn Sie die unerwünschten Bilder entfernen und die gewünschten Dinge im direkt generierten HTML hinzufügen , werden Sie feststellen, dass die Seite schrecklich wird und die gesamte Seite im totalen Chaos versinken kann!
Okay, analysieren wir zunächst die exportierte HTM-Datei:
Gemäß der Tabelle auf dieser Seite erstellen wir auf der neuen Seite eine Tabelle mit drei Zeilen und einer Spalte:
Beachten Sie, dass es sehr wichtig ist, die Werte für Zellabstand, Zellabstand und Rand auf 0 zu setzen, da wir keine Lücken und Fehlausrichtungen im Bild sehen möchten. Fügen Sie dann in der ersten Zeile eine Tabelle mit drei Zeilen und zwei Spalten ein. und führen Sie die linke Seite zusammen Eine dreispaltige Tabelle, wie in der Abbildung gezeigt:
Beim Einfügen einer Tabelle sollten Sie darauf achten, den Inhalt in der ursprünglichen HTM-Datei zu vergleichen und darüber nachzudenken, warum Sie dies tun.
Fügen Sie als Nächstes eine Tabelle mit zwei Zeilen und zwei Spalten in die zweite Zeile ein, führen Sie das linke Raster wie oben zusammen und fügen Sie wie gezeigt eine Tabelle mit einer Zeile und fünf Spalten in die erste Zeile des rechten Rasters ein:
Fügen Sie abschließend eine Tabelle mit drei Zeilen und zwei Spalten in die untere Zeile ein und fügen Sie die Elemente 1 und 2 im Bild zusammen:
Okay, jetzt besteht unsere Aufgabe darin, der Tabelle Bilder und Inhalte hinzuzufügen! Ich werde hier nicht auf Details eingehen (tatsächlich wurde es bereits genug gesagt!)
. Einheit Die beiden Attribute „Align“ und „Valign“ sind sehr wichtig. Sie sollten keine Mühen scheuen, sie zu nutzen, um Dinge zu erledigen. OK, üben Sie es selbst!