CSS Anfänger: Wie Layout aufbauen?

von **klabauter** » 04.09.2011, 13:22

Hallo,

leider stehe ich noch ganz am Anfang meiner "Programmiererkarriere" und bräuchte für meine ersten Versuche Hilfe.

Ich bin derzeit dabei eine Webseite, basierend auf "Supersized" aufzubauen

Code: Alles auswählen: http://tinyurl.com/3reada6

. Die Idee ist ein fensterfüllendes, automatisch skallierendes Hintergrundbild zu haben und eine Ebene darüber sämtliche Inhalte darzustellen.
Leider habe ich so etwas noch nie gemacht und hätte zunächst einige Verständnisfragen.

Das Skript zu "Supersized" sieht folgendermaßen aus:

Code: Alles auswählen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head> <title>Supersized - Full Screen Background Slideshow jQuery Plugin</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/supersized.core.css" type="text/css" media="screen" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script type="text/javascript" src="js/supersized.core.3.2.1.min.js"></script> <script type="text/javascript"> jQuery(function($){ $.supersized({ slides : [ {image : 'img/Sequenz 01_02mbits.f4v', title : 'Image Credit: Maria Kazvan'} ] }); }); </script> <style type="text/css"> /*Stylesheet --------------------*/ p{ padding:0 0px 30px 30px; color:#aaa; font:12px "Helvetica Neue", "Helvetica", Arial, sans-serif; text-shadow: #000 0px 1px 0px; line-height:200%; } p a{ color:#eee; font-weight:bold; } h3{ padding:30px 30px 20px 30px; } #content{ width:720px; height:400px; text-align:left; margin-top: 30px; margin-right: auto; margin-bottom: 30px; margin-left: 0px; } </style> </head> <body> <div id="content"> <h3><a href="http://www.buildinternet.com/project/supersized"><img src="img/supersized-logo.png"/></a></h3> <p> Image credit: <a href="http://www.nonsensesociety.com/2011/04/maria-kazvan/" alt="Nonsense Society" target="_blank">Maria Kazvan</a>   Project page: <a href="http://www.buildinternet.com/project/supersized" alt="Supersized Project Page" target="_blank">Supersized Project</a> </p> </div> </body> </html>

von **klabauter** » 04.09.2011, 13:40

So, leider ist der letzte Teil meine Beitrags verschwunden, daher noch einmal:

ab dem Abschnitt "/*Stylesheet" kommt ja der Teil in dem das Layout für den Inhalt definiert ist, so weit ich das herausgefunden habe.
Wo jedoch füge ich diese Stylesheets ein, direkt in das obige Skript oder in ein externes css Dokument? Wie layoute ich mit css grundsätzlich? Ich habe zuvor immer mir Dreamweaver und Tabellen gearbeitet :flucht:

und daher ist mir die Herangehensweise bei css völlig neu. Wo hinterlege ich Inhalte wie Texte und Bilder, etc?
Wie definiere ich einzelne Seiten wie "Home", "Seite A", "Seite B", "Seite C", usw.? Speichere ich das nach wie vor als getrenntes html Dokument mit entsprechendem Dateinamen? Wie und wo füge ich z.B. ein Menü ein?

Wer mag mir die grundsätzlichen Zusammenhänge erklären und mir etwas weiterhelfen? CSS und html Kenntnisse muss ich mir im Zuge dessen leider erst noch aneignen.

Vielen Dank schon mal vorab...

von **Azra** » 05.09.2011, 07:12

Du kannst mit dem Text und Inhalt vorgehen wie du es bisher getan hast (einzelne Seiten für Inhalte). Das einzige was sich nun ändert ist, dass du das aussehen der Seite nicht direkt in den <body>-Bereich schreibst sondern per CSS Attribute auf Klassen und IDs auslagerst.

Der Browser macht das:
Aha, das HTML Element im <body> hat eine Klasse (.) oder ID (#)
Mal sehen ob es im <head> eine CSS Datei gibt ... ja!
Mal sehen ob die Klasse oder ID auch in CSS eingetragen ist ... ja!
Dann bastel ich aus den Attributen der Klasse oder ID ein schönes HTML Element und präsentiere das dem Besucher

Ob du nun alles in ein Stylesheet packst oder Skript und Layout trennst ist dir überlassen. Hauptsache es ist im <head>-Bereich eingefügt:

Code: Alles auswählen: <link href="pfad/cssdatei.css" type="text/css" rel="stylesheet">

Durch das Einbinden einer Datei bleibt der HTML Code schlank weil du das Aussehen nur einmal bearbeitest.

von **rainer** » 18.09.2011, 22:45

so etwas in der Richtung hab ich erst kürzlich umgesetzt, kannst du dir hier ansehen : pixelmania.at/rainer/

Das einfachste wird sein, du kopierst dir das CSS und den Html Quelltext(alles rauswerfen was du nicht brauchst, sind einige javascript links etc im head bereich den du nicht brauchst genauso wie die slideshow des inhaltes) und testest ein wenig rum damit

lg rainer

CSS Anfänger: Wie Layout aufbauen?

CSS Anfänger: Wie Layout aufbauen?

Re: CSS Anfänger: Wie Layout aufbauen?

Re: CSS Anfänger: Wie Layout aufbauen?

Re: CSS Anfänger: Wie Layout aufbauen?

Ähnliche Beiträge zu "CSS Anfänger: Wie Layout aufbauen?"

Wer ist online?