[Dreamweaver] Textfeld einfügen? @ tutorials.de: Tutorials, Forum & Hilfe

tinseltina · 26.08.09 22:04

Hallo zusammen!
Das ist mein erster Beitrag hier und somit mein erster Hilferuf! Ich bin absoluter Neuling auf Dreamweaver cs4, hab aber jetzt schon meine Freude.
Mit Photoshop cs4 hab ich ein tolles Layout für meine Homepage erstellt, dieses in Slices unterteilt und eine HTML Seite mit image- Ordner erstellt. Also alles paletti. Habs auch schon in Dreamwaever importiert und funktioniert perfekt.
Dort, wo der Inhalt hinkommt hab ich (natürlich) alles leer gelassen. Nun versuche ich aber schon zwei Stunden, dort einen Text rein zu schreiben. Habs mit einem Text per Copy paste probiert, aber dann ist er immer so zentriert in der Höhe und das will ich nicht. Ich möchte, dass der Text frei vom Layout der Seite ist und ich ihn in dem ausgewählten, vorgesehenen Bereich frei transformieren kann....

Phu, versteht ihr was ich meine?
Das hoffe ich, denn es wäre schade um das Layout, wenn das nicht klappen würde...
Vielen Dank für eure Hilfe!

ZodiacXP · 26.08.09 22:14

Willkommen im Forum!

Wie sieht denn dein zugehöriges Markup (HTML) aus?

tinseltina · 26.08.09 22:30

So!
Sag nichts! PS exportiert das Ganze so....

HTML-Code:

<html>
<head>
<title>Website_breit</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">
<!-- Save for Web Slices (Website_breit.psd) -->
<table id="Tabelle_01" width="1281" height="1025" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="9">
			<img src="images/rand_links.gif" width="71" height="1024" alt="rand_links"></td>
		<td colspan="2">
			<img src="images/logo.gif" width="337" height="198" alt="logo"></td>
		<td colspan="5">
			<img src="images/head_oben.gif" width="599" height="198" alt="head_oben"></td>
		<td rowspan="3" bgcolor="#FFFFFF">
			<img src="images/rand_links-05.gif" width="273" height="676" alt="rand_links"></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="198" alt=""></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/head.gif" width="936" height="292" alt="head"></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="292" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/fotografie.gif" width="253" height="186" alt="fotografie"></td>
		<td colspan="2">
			<img src="images/skulptur.gif" width="225" height="186" alt="skulptur"></td>
		<td>
			<img src="images/zeichnung.gif" width="240" height="186" alt="zeichnung"></td>
		<td colspan="3">
			<img src="images/malerei.gif" width="218" height="186" alt="malerei"></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="186" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/zurperson.gif" width="253" height="88" alt="zurperson"></td>
		<td colspan="4" rowspan="6">
			<img src="images/Website_breit_11.gif" width="564" height="348" alt=""></td>
		<td rowspan="6" bgcolor="#FFFFFF">
			<img src="images/nebeninhalt.gif" width="47" height="348" alt="nebeninhalt"></td>
		<td colspan="2" bgcolor="#FFFFFF">
			<img src="images/oberhalbgb.gif" width="345" height="48" alt="oberhalbgb"></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="48" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="5">
			<img src="images/gaestebuch.gif" width="345" height="300" alt="gaestebuch"></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="40" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/gallery.gif" width="253" height="21" alt="gallery"></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/kontakt.gif" width="253" height="23" alt="kontakt"></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/links.gif" width="253" height="78" alt="links"></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="78" alt=""></td>
	</tr>
	<tr>
		<td bgcolor="#FFFFFF">
			<img src="images/randunten.gif" width="253" height="138" alt="randunten"></td>
		<td>
			<img src="images/Abstandhalter.gif" width="1" height="138" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/Abstandhalter.gif" width="71" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="253" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="84" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="141" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="240" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="99" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="47" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="72" height="1" alt=""></td>
		<td>
			<img src="images/Abstandhalter.gif" width="273" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Maik · 27.08.09 05:48

Moin,

Zitat von tinseltina

Nun versuche ich aber schon zwei Stunden, dort einen Text rein zu schreiben. Habs mit einem Text per Copy paste probiert, aber dann ist er immer so zentriert in der Höhe und das will ich nicht.

ich bin mir jetzt zwar nicht sicher, ob der Text in dieser Tabellenzelle eingefügt werden soll:

HTML-Code:

<td colspan="4" rowspan="6">
			<img src="./images/Website_breit_11.gif" width="564" height="348" alt=""></td>

aber mit dem HTML-Attribut valign="top" bzw. der CSS-Eigenschaft vertical-align:top wird ihr Inhalt am oberen Zellrand ausgerichtet; die Voreinstellung entspricht hier valign="middle" - siehe hierzu auch das Kapitel Ausrichtung von Zellen.

Desweiteren muß das dort eingebundene <img>-Element stattdessen als Hintergrundbild für die Zelle verwendet werden.

HTML-Code:

<td colspan="4" rowspan="6" style="background:url(images/Website_breit_11.gif);vertical-align:top;width:564px;height:348px;">Hier folgt der Inhalt</td>

Noch ein Tipp: Tabellen dienen semantisch nicht als Gestaltungswerkzeug einer Website, sondern um ihre Inhalte in tabellarischer Form auszugeben. Slice & Umsetzung in HTML einer Webseite zeigt, wie sich das Layout tabellenlos mit <div>-Blöcken und der Formatierungssprache CSS aufsetzen lässt.

Siehe in diesem Zusammenhang auch Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten.

mfg Maik

tinseltina · 27.08.09 10:57

Wow super!

Das klingt ja alles vielversprechend. Ich werde mich nochmals hinsetzten und mich gründlich ins Theam CSS und Tabellen einlesen. Kann man also Photoshop dazu bewegen, die Slices nicht in einer Tabelle zu exportieren? Das wäre natürlich die Lösung.
Bei Gelegenheit (Ich hab noch zwei kleine Kinder) werde ich das mit den Codes versuchen. Nächsten Mittwoch kommt eine Webdesignerin zu mir nach Hause und schult mich mal noch etwas ein. Bis dahin werde ich gründlich durch selfhtml.com stöbern und mir alle wichtigen Punkte zu merken versuchen

Melde mich dann wieder, wenn mein Vorhaben voran geht und wie es funktioniert.

Danke für die Hilfe! Sehr lieb!

Liebe Grüsse
Tinseltina

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

[Dreamweaver CS4] Flash-Button einfügen

" in Textfeld einfügen.

Nach Slicen in Dreamweaver einfügen.

Dropdown value in Textfeld einfügen

Text in Dreamweaver einfügen

E-Mail:

Abonnieren Abbestellen