Css/Html Studienarbeit

El_Marichi · 03.01.2009

Hallo!
Als kleine Studienarbeit muss ich eine Webseite bauen.

Hier die Erwartungen:
Es soll ein Webseiten-Template entworfen und in (X)HTML und CSS codiert werden.
...Danach wird der Entwurf konsequent in (X)HTML und CSS zu realisieren.

Die Seite soll mindestens enthalten:
• Ein Menü mit Hyperlinks
• Einen Head-Bereich mit Bild
• Einen Inhalts-Bereich mit mehreren Texten und Bildern
• Einen Fuß-Bereich
Der Aufbau der Seite soll folgendem Muster entsprechen:
Das HTML-Grundlayout ist aus DIV-Blöcken aufgebaut, diese werden mithilfe von Stylesheets
formatiert. Die Stylesheet-Datei soll mit dem HTML-Template verlinkt werden. Mit der
Verwendung von Stylesheets soll eine Barrierefreiheit der Seite gewährleistet werden, der Stil soll
im Browser deaktiviert werden können.
Der Code ist mit sinnvollen Kommentaren zu versehen, die den Aufbau des Codes erklären.

So nun mein Problem, mein Prof hat unglaublich schlechte Vorlesungen gehalten und keiner weiß wie das funktionieren soll...
Kann ich das ohne große Vorkenntnisse realisieren?
Wenn ja wie? Kann ich mir aus dem Netz Templates laden und diese dann bearbeiten? Wenn ja wie? In Dreamweaver?

Wäre sehr nett, wenn Ihr mir da weiter helfen könntet.

stb_87 · 03.01.2009

AW: Css/Html Studienarbeit

Arbeite dieses Tut hier durch:

Und du bist auf der sicheren Seite.
Ein ganz einfacher Text-Editor reicht dafür.

tintenlandschaft · 03.01.2009

AW: Css/Html Studienarbeit

Das ist im Grunde genommen kein Hexenwerk. Aber einige sinnvolle Grundkentnisse solltest du schon besitzen!

Schau mal hier vorbei:

SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
Stichpunkt CSS: Layout ohne Tabellen < Die Seite zeigt wunderbare css-basierte Layouts!

Lese dich ein wenig ein und stelle bei Bedarf konkrete Fragen!

Noch viel Spaß

cebito · 03.01.2009

AW: Css/Html Studienarbeit

El_Marichi schrieb:
Kann ich das ohne große Vorkenntnisse realisieren?

Oh mann, das jetzt dem Prof in die Schuhe schieben, daß du noch überhaupt nix weißt! Viel Spaß beim Selbststudium.

Top_Gun · 03.01.2009

AW: Css/Html Studienarbeit

Bitte benutze kein DW... wenn du es vernünftig machen willst (und vielleicht sogar was lernen) dann mach es mit nem einfachen Editor der Syntaxhighlighting unterstützt.

Das ganze solltest du auch ohne große Kentnisse schaffen, alles was du dazu brauchst findest du einfach zugänglich im Netz und kannst es dir aneignen wenn du es umsetzen willst.

Was ich an der Aufgabe leider nicht verstehe, wie sollst du ein Template in (X)HTML und CSS entwerfen und danach in (X)HTML und CSS umsetzen?! Ist doch das selbe, oder?
Und ich würde dir raten, dass du dir nichts aus dem Netz lädst sondern alles selbst machst.
Fang also bei 0 an und zeichne dir mal nen Entwurf.

sokie · 03.01.2009

AW: Css/Html Studienarbeit

vielleicht ist an der Stelle ein geeiegneter Einstiegspunkt. Auf die Codeausgabe von Dreamweaver würde ich mich nicht verlassen. allenfalls in der Codeansicht schreiben.

tiroler · 03.01.2009

AW: Css/Html Studienarbeit

gib mal unter SUCHEN CSS oder Webdesign ein-
da werden dir alle relevanten Tutorials zum coden und dem Drumherum angezeigt.

leohh · 03.01.2009

AW: Css/Html Studienarbeit

Vorsprung durch Webstandards schrieb:
Lasst uns Websites wie früher machen – erst die Inhalte schaffen, dann die Struktur festlegen und zuletzt das Design ins Spiel bringen –, aber mit den Techniken von heute.

Sehr empfehlenswert um eine gewisse Arbeitsweise von Anfang an richtig zu erlernen:

Norbert Schumann · 03.01.2009

AW: Css/Html Studienarbeit

sag mal- lernt man im studium heute noch etwas oder wie läuft das dort ab?

El_Marichi · 04.01.2009

AW: Css/Html Studienarbeit

So ich habe nun dieses Tut:
durchgearbeitet...
Step 1 funktioniert auch ohne Probleme.
Wird auch im Browser so angezeigt, wie im PDF gezeigt.
Doch wenn ich dann die style.css Datei angelegt habe und diese in der index.htm Datei eingebunden habe passiert leider nichts...

Hier mal die beiden Datein:
index.htm
=======

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“>
<head>
<title>Webdesign mit (x)html und css</title>
<meta http-equiv=“content-type“ content=“text/html; charset=utf-8“ />
<style type=“text/css“>
@import „style.css“;
</style>
</head>

<body>
<div id=“layout“>
<h1><span></span>Webdesing mit xhtml und css</h1>
<div id=“navigation“>
<ul>
<li class=“blau“><a href=““>Startseite</a></li>
<li class=“grau“><a href=““>Kontakt</a></li>
<li class=“gruen“><a href=““>Gallerie</a></li>
<li class=“orange“><a href=““>Impressum</a></li>
</ul>
</div>

<div id=“inhalt“>
<h2>Überschrift</h2>
<p>
Text
</p>
</div>
</div>

<div id=“footer“>
<p>
<span>xhtml und css</span>
</p>
</div>
</body>
</html>

style.css
=======

html,body {
height:100%;
margin:0;
padding:0;
font-size:100.01%;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:center;
background:#ccc;
}

#layout {
margin:0 auto;
width:780px;
text-align:left;
min-height:100%;
height:auto;
border-left:1px solid #000;
border-right:1px solid #000;
background:#fff url(desktop/StA - Web/Untitled-2.png) repeat-y;
}

h1 {
width: 100%;
height: 167px;
position: relative;
padding:0;
margin:0;
background:#fff;
}
h1 span {
background: url(bilder/header.png) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}

h2 {
font-size:120%;
font-weight:normal;
border-bottom:1px solid #999;
margin:0 2em 0 0;
}

#navigation{
display:block;
height:25px;
font-size:0.9em;
background:#000 url(bilder/navi_bg.png) repeat-x;
border-bottom:2px solid #fff;
}
#navigation ul{
margin:0 auto;
padding:0;
list-style-type:none;
width:37em;
}
#navigation ul li{
display:block;
float:left;
margin:0;
}
#navigation ul li a{
display:block;
float:left;
color:#fff;
text-decoration:none;
padding:0 3.5em 0 1em;
line-height:25px;
}
#navigation ul li a:hover {
color:#000;
}
.blau {
background: url(bilder/navi_blau.png) repeat-x;
border-left:1px solid #fff;
}
.grau {
background: url(bilder/navi_grau.png) repeat-x;
border-left:1px solid #fff;
}
gruen {
background: url(bilder/navi_gruen.png) repeat-x;
border-left:1px solid #fff;
}
.orange {
background: url(bilder/navi_orange.png) repeat-x;
border-left:1px solid #fff;
border-right:1px solid #fff;
}

#inhalt {
padding:4em 200px 8em 150px;
font-size:0.85em;
color:#666;
line-height:1.4em;
}

#footer {
background:url(bilder/footer_bg.png) repeat-x left bottom;
width:780px;
height:196px;
margin:-196px auto;
text-align:center;
font-size:0.7em;
color:#666;
}

#footer p {
padding:0;
margin:0;
height:196px;
background:url(bilder/footer.png) no-repeat right bottom;
}

#footer span {
position:relative;
top:160px;
}

Wäre nett wenn mir einer sagen könnte was ich falsch gemacht habe....

serverhombre · 04.01.2009

AW: Css/Html Studienarbeit

Hallo El_Marichi,

beim einbinden der style.css hat sich ein kleiner Fehler eingeschlichen:

Code:

@import [COLOR="Red"],,[/COLOR]style.css";

(Fehler in Rot)

so müsste es aussehen:

Code:

@import [COLOR="Green"]"[/COLOR]style.css";

nun sollte eigenlich alles klappen.

El_Marichi · 04.01.2009

AW: Css/Html Studienarbeit

nee das wars leider nicht :-(

serverhombre · 04.01.2009

AW: Css/Html Studienarbeit

hab das grad nochmal mit dem von dir geposteten Code versucht und bis auf den Fehler im @ import nichts geändert und es geht, liegen die index.htm und die style.css im selben verzeichnis ? :rolleyes:

tintenlandschaft · 04.01.2009

AW: Css/Html Studienarbeit

Beziehungsweise auf die klassische Art:

HTML:

<link rel="stylesheet" type="text/css" href="style.css">

Anstelle von diesem Code:

Code:

<style type=“text/css“>
@import "style.css";
</style>

Ultraflip · 04.01.2009

AW: Css/Html Studienarbeit

Tausch mal alle Anführungszeichen aus ...

“ ist nicht "

LG
Tobi

El_Marichi · 04.01.2009

AW: Css/Html Studienarbeit

also mit dem code von tintenlandschaft klappt's! Vielen Dank soweit!!!
Das ist ja genau das gleiche oder?

dann noch eine kleine Frage, wenn ich da nun meine eingenen Bilder einbinden will, und die lieen im Ordner C:\Users\JohnDoe\Desktop\StA - Web

wie schreib ich das dann hier:
background:#fff url(C:\Users\JohnDoe\Desktop\StA/Untitled-2.png) repeat-y;
rein?

tintenlandschaft · 04.01.2009

AW: Css/Html Studienarbeit

HTML:

<link rel="stylesheet" type="text/css" href="style.css">

Ich mache das immer so. Was ist denn der Vorteil der anderen Variante?
Standardkonform, ist doch diesen Code in den Header zu setzen?!

Zu deiner letzten Frage:

Am sinnvollsten ist es die Bilder, die du verwenden willst, in den selben Ordner zur html-Datei zu legen.

serverhombre · 04.01.2009

AW: Css/Html Studienarbeit

Ultraflip schrieb:
Tausch mal alle Anführungszeichen aus ...

“ ist nicht "

LG
Tobi

stimmt, da hat mir beim Testen mein "scite" (editor) alles automatisch umgewandelt. :eek:

deshalb ist mir das nicht aufgefallen. :rolleyes:

@tintenlandschaft, über @import kann man z.B. css eigenschaften vor alten Browsern versteken.
weitere infos: http://www.thestyleworks.de/ref/at_import.shtml

El_Marichi · 04.01.2009

AW: Css/Html Studienarbeit

Eine kleine Frage noch:
Wenn ich nun meine Bilder einbinden will, also so stehts im Tut:

background: url(bilder/header.png) no-repeat;

Was muss ich dann schreiben wenn das Bild in:
C:\Users\JohnDoe\Desktop\StA - Web/Untitled-2.png liegt?

Ultraflip · 04.01.2009

AW: Css/Html Studienarbeit

El_Marichi schrieb:
wie schreib ich das dann hier:
background:#fff url(C:\Users\JohnDoe\Desktop\StA/Untitled-2.png) repeat-y;
rein?

Verzeichnisse auf Webservern werden immer (im Gegensatz zu Windows) mit Slash statt mit Backslash angesteuert

zum Beispiel:

HTML:

 background-image: url(../bilder/bg.jpg);

LG
Tobi