CSS Template erstellen - Theoretische Vorgänge @ tutorials.de: Tutorials, Forum & Hilfe

Dustin84 · 04.08.06 13:13

Ich arbeite gerade an meiner eigenen Website und wenn das Layout fertig ist, muss es auch gesliced & programmiert werden.
Das Problem ist, dass ich die Vorgehensweise zum Erstellen eines CSS Templates (Tabellenlos) nicht verstehe.

Ich weiss nur, dass man mit einer HTML File beginnt (was kommt da rein?) und dann per CSS File das Layout managed.

http://www.moh-loads.de/cmpro_tut/
HIer wird gezeigt, wie man ein Layout sliced aber das ist dann ein Template, dass auf Tabellen basiert, glaube ich

Wenn ich nur das Prinzip verstehen würde, wo was hinkommt.....
Ich möchte jetzt keine genaue Erklärung (das wäre zuviel verlangt), sondern nur den Theoretischen Ablauf. Ausgangspunkt ist das Layout in Photoshop.
Sollte ich zB Imageready zum slicen & exportieren benutzen oder sollte ich das Layout lieber direkt in Photoshop zerschneiden (So wie im Videotutorial)?
Und nach dem zerschneiden ? Wohin mit den Bildern ? In eine HTML File und dann in Tabellen ? (Aber dann wäre es nicht Tabellenlos. Oder macht man das denn mit CSS ?)

Ahhhhhhhhhhhh Hilfe

Gruß
Dustin

tobee · 04.08.06 15:04

Also ich zerschneide das in Photoshop immer manuell. Das finde ich (persönlich) besser.
Dann markier ich das Element, extrahier die Auswahl und speichere es dann für das Web.

Gumbo · 04.08.06 15:28

Also um ehrlich zu sein, bin ich nicht Befürworter von Layout-Tabellen und kann das genannte Tutorial daher auch nicht für gut heißen. Schon dass er „header“ als „heeder“ bezeichnet, stößt bei mir auf.

Wenn ich ein Layout umsetze, überlege ich mir erst einmal, wie die Dokumentstruktur dazu aufgebaut sein könnte und setze es um. Erst danach zerschneide ich die Layout-Vorlage manuell, such mir die Teile heraus, die ich wirklich brauche, und formatiere das Markup mit CSS.

Dustin84 · 05.08.06 16:09

Evtl. habe ich nun versatnden, wie ein CSS Template funktioniert:

CSS Template erstellen in der Theorie:

HTML Datei:

Mit

lade ich die CSS Datei in die HTML File und mit <div id="Logo"</div>
spreche ich das Logo aus der CSS Datei in der HTML Datei an und kann es dann per CSS Datei positionieren oder sonstwas, was dann so aussehen könnte:

#Logo{
background-color: red; (HIntergrundfarbe, bis das Logo geladen ist)
color: inherit;
background-image: url(images/logo.gif);

left: 0 px;
top: 200px;
position: absolute;
}

Und das mache ich dann mit allen Bildern, die ich in Photoshop gesliced habe und steuere das ganze der CSS Datei.

Stimmt das so od. hab ich es doch nicht richtig verstanden

Gruß
Dustin

**Jan-Frederik Stieler** · 05.08.06 16:26

Ansich haste es richtig verstanden. Du solltest aber vielleicht schauen was du von deinem PS Layout auch noch an Grafiken wie Frabflächen Linien ect. in CSS umsetzen kannst. Auch um Speicherplatz zu sparen.

Gruß

PS: hier gibts einen kleinen Schreibfehler

das müsste <div id="Logo"></div> heißen.

***hela*** · 05.08.06 16:33

Ein weiterer Fehler:
Kommentare innerhalb der Stylesheets werden so notiert:

Code :

#Logo{
background-color: red; [SIZE=-1][COLOR=Red]/*[/COLOR] HIntergrundfarbe, bis das Logo geladen ist [COLOR=Red]*/[/COLOR][/SIZE]
...
}

Dustin84 · 05.08.06 18:19

Eine Frage noch:

Bei dieser Seite sieht man im Quelltext, dass in der HTML File Bildpfade und deren Eigenschaften(Positionierung usw.) angegeben sind.

zB. div id="logo"><a href="/"><img src="/img/hdr_logo.jpg" width="140" height="64" alt="logo" title="nothing from outer space" /></a></div>

warum steht das in der HTML File und nicht in der CSS Datei

Und wo ist der Unterschied zwischen div id und div class

Gruß
Dustin

RS9999 · 05.08.06 18:37

Studiere doch bitte einmal die SELFHTML Online-Hilfe. Dort bekommst Du im
Prinzip auf alle Fragen eine Antwort.

Dustin84 · 05.08.06 18:43

Selfthrml kenne ich, finde da aber nichts

**Jan-Frederik Stieler** · 05.08.06 19:45

Na dann lass besser die Finger von der Tastatur. Sorry aber es gibt da auch ne Suche. Und das Menü ist doch nun übersichtlich genug.
Ansonsten gibts noch Google oder:
http://www.drweb.de/csstechnik/css_id_class.shtml

Gruß

Dr Dau · 05.08.06 21:04

Hallo!

So eine Seite wie die von Dir genannte ist nicht mal so eben "dahingeklatscht".
Dass die Seite in verschiedenen Browsern unterschiedlich dargestellt wird, bestätigt dieses auch.
Bevor Du Dir Gedanken darüber machst ob und was Du wie und womit slicen tust, solltest Du erstmal mit einfachen Layouts anfangen zu üben..... Probleme wirst Du eh noch genug bekommen.
Da Du nicht mal den Unterschied zwischen "id" und "class" kennst (was rein gar nichts mit tabellenlosen Layouts zu tun hat), solltest Du Dich erstmal mit den allgemeinen Grundlagen von CSS befassen.
Auch ein Tabellenlayout kann mittels CSS formatiert werden..... dort können also auch Dinge wie "id" und "class" verwendet werden.

Gruss Dr Dau

**Jan-Frederik Stieler** · 05.08.06 21:54

Was für den Anfang immer ganz gut ist, finde ich zumindest, sich ein Buch zu kaufen. Über Programmiersprachen gibt es auch schon welche für 10-20 Euro.
http://www.amazon.de/gp/search/ref=n...0&Go.y=0&Go=Go

Gruß

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

Template css photoshop erstellen

Unerklärliche Abstürze - wie System-Vorgänge aufzeichnen?

phpBB-Template erstellen

Template erstellen?

Mehrere Vorgänge gleichzeitig durchführen

E-Mail:

Abonnieren Abbestellen