nicht angemeldet
Content-Bereich erstellen. Code umschreiben.
1 0 
Gernot Back
Content-Bereich erstellen. Code umschreiben.
Hallo!
Ich habe ein sehr wichtiges Anliegen: Ich habe über Photoshop ein Design für meine Homepage erstellt. Dieses habe ich geslict und es wurde somit in einen HTML-Quellcode umgewandelt. So weit, so gut. Jetzt will ich aber auf einem Teil der Seite Content einbauen. Jetzt ist das noch nicht möglich, da die weiße Fläche eine Grafik ist. Wie kann ich es machen, dass ich dort einen Iframe einbinden kann, der dann den Content darstellt?
Wenn ihr weitere Informationen benötigt, meldet euch.
QUELLTEXT:
__________
<html>
<head>
<title>design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (design.psd) -->
<table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="10">
<img src="images/design_01.gif" width="800" height="50" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/design_02.gif" width="575" height="18" alt=""></td>
<td>
<img src="images/design_03.gif" width="25" height="18" alt=""></td>
<td rowspan="10">
<img src="images/design_04.gif" width="200" height="550" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="7">
<img src="images/design_05.gif" width="202" height="469" alt=""></td>
<td colspan="2" rowspan="7">
<img src="images/design_06.gif" width="135" height="469" alt=""></td>
<td colspan="4">
<img src="images/design_07.gif" width="238" height="350" alt=""></td>
<td rowspan="7">
<img src="images/design_08.gif" width="25" height="469" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/design_09.gif" width="238" height="8" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/design_10.gif" width="35" height="111" alt=""></td>
<td>
<img src="images/design_11.gif" width="100" height="35" alt=""></td>
<td rowspan="5">
<img src="images/design_12.gif" width="3" height="111" alt=""></td>
<td>
<img src="images/design_13.gif" width="100" height="35" alt=""></td>
</tr>
<tr>
<td>
<img src="images/design_14.gif" width="100" height="3" alt=""></td>
<td rowspan="2">
<img src="images/design_15.gif" width="100" height="38" alt=""></td>
</tr>
<tr>
<td>
<img src="images/design_16.gif" width="100" height="35" alt=""></td>
</tr>
<tr>
<td>
<img src="images/design_17.gif" width="100" height="3" alt=""></td>
<td>
<img src="images/design_18.gif" width="100" height="3" alt=""></td>
</tr>
<tr>
<td>
<img src="images/design_19.gif" width="100" height="35" alt=""></td>
<td>
<img src="images/design_20.gif" width="100" height="35" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/design_21.gif" width="200" height="63" alt=""></td>
<td colspan="2">
<img src="images/design_22.gif" width="13" height="13" alt=""></td>
<td colspan="5">
<img src="images/design_23.gif" width="362" height="13" alt=""></td>
<td>
<img src="images/design_24.gif" width="25" height="13" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/design_25.gif" width="400" height="50" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="200" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="124" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="35" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="100" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="100" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="25" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="200" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Bild
_________
So sieht das ganz im Moment im Browser aus:
http://img168.imageshack.us/img168/9639/clipboard017ns.jpg
Hier mal eine Makierung, wo der COntent hin soll und wie die Grafik da liegt und wie sie heißt:
http://img102.imageshack.us/img102/6749/clipboard013qj.jpg
Danke für eure Hilfe!
David
-
Moin!
Ich habe ein sehr wichtiges Anliegen: Ich habe über Photoshop ein Design für meine Homepage erstellt. Dieses habe ich geslict und es wurde somit in einen HTML-Quellcode umgewandelt. So weit, so gut. Jetzt will ich aber auf einem Teil der Seite Content einbauen. Jetzt ist das noch nicht möglich, da die weiße Fläche eine Grafik ist. Wie kann ich es machen, dass ich dort einen Iframe einbinden kann, der dann den Content darstellt?
Ich habe ein viel wichtigeres Anliegen. Ich habe mit einem 2000g-Hammer eine Schraube in den Motorblock eingeschlagen.
Sie ist jetzt wirklich drin, der Schraubenkopf sieht aber aus wie eine Niete und der Motorblock hat Risse.
Wie kann ich es machen, dass:
a) die Schraube hält
b) der Motor wieder läuft
c) die Schraube sich auch wieder mit einem Steckschlüssel herausdrehen lässt?Antwort:
Kaufe einen neuen Motorblock und verwende künftig von Anfang an geeignetes Werkzeug.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Seminare, Training, Development-
Ich habe ein viel wichtigeres Anliegen. Ich habe mit einem 2000g-Hammer eine Schraube in den Motorblock eingeschlagen.
Sie ist jetzt wirklich drin, der Schraubenkopf sieht aber aus wie eine Niete und der Motorblock hat Risse.
Wie kann ich es machen, dass:
a) die Schraube hält
b) der Motor wieder läuft
c) die Schraube sich auch wieder mit einem Steckschlüssel herausdrehen lässt?Antwort:
Kaufe einen neuen Motorblock und verwende künftig von Anfang an geeignetes Werkzeug.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
Willst du damit sagen, dass Photoshop nicht für die Entwicklung von Webdesigns geeignet ist? Wie sonst will man es schaffen so ein nahtloses Design zu entwerfen?
-
Hallo,
Willst du damit sagen, dass Photoshop nicht für die Entwicklung von Webdesigns geeignet ist? Wie sonst will man es schaffen so ein nahtloses Design zu entwerfen?
Photoshop ist ein _Grafik_programm, oder nicht?
gruss
--
no strict;
no warnings;
Meine Signatur hat Urlaub.-
Hallo,
Willst du damit sagen, dass Photoshop nicht für die Entwicklung von Webdesigns geeignet ist? Wie sonst will man es schaffen so ein nahtloses Design zu entwerfen?
Photoshop ist ein _Grafik_programm, oder nicht?
gruss
Es ist aber auch dafür ausgelegt, Homepages zu erstellen und dann müsste man doch eine Grafik durch einen I-Frame ersetzen können...
-
Moin!
Es ist aber auch dafür ausgelegt, Homepages zu erstellen und dann müsste man doch eine Grafik durch einen I-Frame ersetzen können...
Da sich die Erstellung eines I-Frames im Nachschauen nach der Syntax und im Austausch einer leeren Grafik durch denselben erschöpft entsteht bei mir die Frage, wie Du zu der Aussage kommst, Photoshop wäre "dafür ausgelegt, Homepages zu erstellen".
Das gleiche behauptet Microsoft von Word, weil man damit etwas speichern kann, was HTML entfernt ähnelt.
Dies gilt auch für Photoshop. Adobe will verkaufen und erzählt viel, wenn der Käufer unwissend genug ist zuzuhören.Die Webseite mit Grafiken vollzupacken und die Inhalte (Texte) in Iframes zu packen ist übrigens nicht das, was als "saubere Trennung von Inhalt und Design" so wünschenswert erscheint. Es ist Unsinn.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Seminare, Training, Development
-
-
-
Moin!
Willst du damit sagen, dass Photoshop nicht für die Entwicklung von Webdesigns geeignet ist?
Für "Designvorlagen" mag er geeignet sein. Für Webseiten ist er ungeeignet.
Wie sonst will man es schaffen so ein nahtloses Design zu entwerfen?
Indem ich grundsätzlich beim Übergang von der Designphase zur Realisierung des Webs auf eines der zahlreichen dafür geeigneten Werkzeuge zurückgreife.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Seminare, Training, Development-
Welches nutzt du?
-
Moin!
Welches nutzt du?
Da ich sowieso auf dem Gebiet der Grafik ein blindes Huhn bin benutze ich einen Texteditor, welcher für das Bearbeiten von HTML, PHP, Perl, CSS, Javascript, SQL und so weiter ein paar nette Erweiterungen wie Syntax-Highlighting und Autovervollständigung hat.
Konkret Quanta+ unter Linux.
Grafiken bearbeite ich wenn mit Gimp, aber das ist nicht mein Fach.Ansonsten ein paar Referenzen und meinen Kopf.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Seminare, Training, Development
-
-
-
Moin!
Willst du damit sagen, dass Photoshop nicht für die Entwicklung von Webdesigns geeignet ist? Wie sonst will man es schaffen so ein nahtloses Design zu entwerfen?
Man kann Photoshop gerne zur Entwicklung eines Designs verwenden, da spricht überhaupt nichts dagegen. Aber die Umsetzung in vernünftiges HTML _UND_ CSS kann Photoshop nicht mit diesem unsäglichen Slice-Tool leisten, das sollte man wirklich lieber von Hand machen.
So funktioniert das jedenfalls bei mir: Ich kriege eine Photoshop-Datei vom Grafiker und bastel mir zuallererst eine HTML-Datei, die so ungefähr die Flächen und Elemente aufweist, die das Design vorgibt. Im weiteren Verlauf wird das Erscheinungsbild dann mit CSS immer weiter angepaßt (richtige Farben, Schriftgrößen, Entfernungen mittels margin, padding, border hergestellt, aber keinesfalls mit spacer.gif), und nur Dinge, die man mit CSS extrem schwierig hinkriegen kann, werden als Grafik aus Photoshop ausgeschnitten und oft als Hintergrundbild in CSS eingebunden.
- Sven Rautenberg
-
-
-
Hallo David,
Wenn ich dich richtig verstehe, hast du vor, deinen Iframe in einem Tabellenlayout so zu trimmen, dass er 100% der restlichen zur Verfügung stehende Höhe einnimmt. Das ist mit CSS ohne Macken (Scrollbalken die nicht sein müssten in Opera, bei Resize des Fensters auch in IE, dann auch in Opera verschwindender und erst nach Reload wieder sichtbar werdender Inhalt des Iframes) nicht möglich und ansonsten nur unter großem Aufwand an JavaScript.
Da würde ich dir fast eher zu einem richtigen Frameset raten, bei dem die umgebenden Frames in Pixeln definierte feste Höhen- und Breitenangaben haben.
Mit einem Iframe könnte es klappen, wenn du statt des Tabellenlayouts etwas in der Art baust wie in dem folgenden Artikel beschrieben:
http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm
Ensprechend müssstest du deine Grafik in vier Teile slicen; drei für den Rahmen und einen weiteren für das letzte Rahmenteil nebst dem Bereich, der später vom Inhalt überdeckt wird.
Am besten wäre nätürlich, wenn du deinen Inhalt ganz ohne (I)Frames mit einer serverseitigen Technik wie z.B. PHP bei jeder einzelnen Seite deines Projekts immer wieder neu einbinden würdest.
Gruß Gernot
