Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Css/Html Studienarbeit“

El_Marichi

Noch nicht viel geschrieben

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

Web-Sheriff - ohne Bild

AW: Css/Html Studienarbeit

Arbeite dieses Tut hier durch:


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

Top_Gun

Aktives Mitglied

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

Mod | Web

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

Hat es drauf

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

CSS verliebt

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:
 

El_Marichi

Noch nicht viel geschrieben

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....
 
S

serverhombre

Guest

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.
 
S

serverhombre

Guest

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

Web / 3D / Vektor

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>
 

El_Marichi

Noch nicht viel geschrieben

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

Web / 3D / Vektor

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.
 
Zuletzt bearbeitet:
S

serverhombre

Guest

Zuletzt bearbeitet von einem Moderator:

El_Marichi

Noch nicht viel geschrieben

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

Seifenkistenpilot Bob

AW: Css/Html Studienarbeit

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.874
Mitglieder
67.225
Neuestes Mitglied
Petra
Oben