• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Free Design einbinden

D

Dr. Prof

Neues Mitglied
So hallo, schbin der neuen. Und hab gleich ne Frage:

Ich hab mir ein Gratis Design von freetemplates oder so runtergeladen und möchte dies nun in meine Seite einfügen. Schab seit 3 Tagen mit HTML angefangen und die Seite zu machen dürfte nicht so schwer sein. Nun hab ich in dem Ordner folgende DAteien(die ersten 3 sind vom Design, also waren da im Ordner)
Style.css
Images(ordner)
Index
Meine_Seite.html

So nun hab ich es wie folgt:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" content="text/css" />
<meta http-equiv="content-type" content="text/javascript" />
<meta name="Author" content="red_eyes" />
<meta name="Keywords" lang="de" content="bla bla" />
<meta name="keywords" lang="en" content="bla bla" />
<meta name="description" content="blabla" />
<meta name="date" content="2009-04-24" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>bla</title>
</head>


So siehts momentan aus, aber er zeigt nicht alles an, ich glaube das liegt daran, weil der Image Ordner nicht verlinkt wurde, ist das möglich?

Ich hoffe auf schnelle hilfe
mfg
Dr. Prof
 
Dr. Prof schrieb:
So hallo, schbin der neuen. Und hab gleich ne Frage:
Zum Vergrößern anklicken....

erstmal: willkommen ^^

zu deinem problem. Eine style-datei enthält nur daten über "wie sieht was aus". Sprich du gibst deinem Inhalt Farbe.

Wenn deine html-Datei aber keinen Inhalt hat, kannst du auch keinem inhalt Farbe geben.

kurz gesagt, du machst in html z.B. eine überschrift:

Code: 
<h1> Hallo Welt! </h1>
und mit css gibst du dem ganzen Form:

Code: 
h1 { font-size: 1em; font-style: bolt; background-color: #000000; [I]usw.... [/I]}
Von kostenlosen Templates ist meist abzuraten, da sie mehr Arbeit mit sich bringen wie wenn du es alles selbst erstellen würdest. So denke ich zumindest.

Gruß
Loon3y
 
Hmm ja, danke zuerst mal für die schnelle Antwort.
Wenn ich jetzt also dieses Free Design einbauen möchte, dan muss ich was in der css datei ändern oder an meiner HTML Datei?

Was mus sich den konkret "mehr machen" wen ich ein Free Template nehme. Weil im momentan hab ich keine Zeit zum mir selbst eins zu machen, was ich zuerst auch noch lernen müsste.
 
Hi,
du musst etwas an der html Datei ändern. Du musst die Html Datei so machen das die css datei auch die eigentlichen tags findet. Du musst also richtige Tags, class und id's machen. Das ist wirklich nicht weniger arbeit, als wenn du die Seite selbst erstellst. Ich verliere bei so etwas immer den Überblick. Ausserdem so finde ich lernt man fast garnichts.
 
Hmm klingt wirklich sehr verwirrend.

Dann sollte ich zuerst mal die Seite fertig erstellen, danach ein Design erstellen und dieses dan einbinden? Aber wen ich mir den Code von der css so anschaue sehe ich garkeine verbindung zu der HTML datei also sind doch eig. nur sachen die sich auf header und so beziehen:
Code: 
body { margin:40px 50px; font-size:11px; line-height:20px; font-family: Tahoma, Arial; background: url(images/body_bckg.jpg) repeat-x #056caa;}
a { color:#68d3ed; text-decoration:underline;}
a:hover { text-decoration:none;}
h1 { padding:0px; text-transform:uppercase; font-size:18px; color:#000; background-color:#818181; font-weight:normal; color:#fff; margin: 10px 0 ;height:21px;}
h1 span { background:#616161; padding:0px 10px 0px 0px;}
p {margin:0; background:#616161;}
#header {background:url(images/header_bckg.jpg) repeat-x #0287c2; clear:both; width:100%; height:161px;  }
#left_header { float:left; width:380px; background: url(images/left_header.jpg) no-repeat; height:161px;}
#right_header { float:right;  width:321px; background: url(images/right_header.jpg) no-repeat; height:161px;}

#logo {position:absolute; text-align:center; width:95%; text-align:center; margin-top:50px; }
#logo a {text-decoration:none; color:#FFFFFF; font-size:23px; }
#menu { height:30px; clear:both; padding-top:5px; }
#menu ul { margin:0; padding:0;}
#menu ul li{ display:inline-block; float:left; width:104px; list-style:none; text-align:center;}
#menu a { display:block; float:left; width:104px; font-size:12px; text-transform:uppercase; text-decoration:none; color:#FFFFFF; text-decoration:none; font-weight:bold }
#menu a:hover {color:#68d3ed;}

#content {clear:both; background-color:#252525; width:100%;}
#content_top { height:20px;}
#content_top_left {float:left; width:20px; height:20px; background: url(images/left_top_round.gif) no-repeat;}
#content_top_right {float:right; width:20px; height:20px; background: url(images/right_top_round.gif) no-repeat;}
#content_bottom { clear:both;height:16px;}
#content_bottom_left {float:left; width:20px; height:16px; background: url(images/left_bottom_round.gif) no-repeat;}
#content_bottom_right {float:right; width:20px; height:16px; background: url(images/right_bottom_round.gif) no-repeat;}

#sidebar {float:left; width:231px; padding-left:10px;}
#sidebar p {background-color:#fff; padding:0 20px;}
#sidebar_top { height:10px; background:url(images/top_sidebar.gif) no-repeat;background-color:white;}
#sidebar_body { background-color:#fff;}
#sidebar_bottom { height:23px; background:url(images/bottom_sidebar.gif) no-repeat;}
#sidebar ul {margin:0; padding:0 0 0 40px;}
#sidebar ul li { padding:0; list-style:none;}
#sidebar a {color:#000; font-size:11px;}
#sidebar h1 {color:#0676bd; font-size:12px; font-weight:bold; padding:10px 0 0 20px; background-color:#fff; margin:0;}

#text {background-color:#616161; margin:0px 10px 0 251px; width:auto; vertical-align:top; color:#fff;}
#text_top {}
#text_top_left {float:left; width:13px; height:10px; background:url(images/left_top_content.gif) no-repeat;}
#text_top_right {float:right; width:11px; height:10px; background:url(images/rigth_top_content.gif) no-repeat;}
#text_bottom { float:left;height:16px; background:url(images/middle_bottom_content.gif) repeat-x; width:100%;}
#text_bottom_left {float:left; width:11px; height:16px; background: url(images/left_bottom_content.gif) no-repeat;}
#text_bottom_right {float:right; width:11px; height:16px; background: url(images/right_bottom_content.gif) no-repeat;}
#text_body { padding:10px 20px 10px 20px;}
#foot_text { padding-left:50px; background:url(images/foot_text.gif) no-repeat; color:#a8a8a8; font-size:10px; line-height:13px; margin:20px 0 0 0;}

#footer {background:url(images/footer_bckg.jpg) #424e4f; height:74px; clear:both;  }
#left_footer { float:left; padding:30px 0 0 30px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right;  padding:30px 30px 0 0; color:#fff;  font-size:12px; text-align:right;}
#right_footer a { color:#fff;}
#right_footer a:hover { text-decoration:none;}

Weil ich denke so ein Design selber machen ist doch ungeheim schwirig oder nicht?
 
Dr. Prof schrieb:
So hallo, schbin der neuen.
Zum Vergrößern anklicken....

Hallo...

Dr. Prof schrieb:
So siehts momentan aus, aber er zeigt nicht alles an, ich glaube das liegt daran, weil der Image Ordner nicht verlinkt wurde, ist das möglich?
Zum Vergrößern anklicken....

Ist das der vollständige HTML-Code?
Da kann nichts angezeigt werden, weil der komplette <body> fehlt.

Dr. Prof schrieb:
Hmm klingt wirklich sehr verwirrend.

Dann sollte ich zuerst mal die Seite fertig erstellen, danach ein Design erstellen und dieses dan einbinden? Aber wen ich mir den Code von der css so anschaue sehe ich garkeine verbindung zu der HTML datei also sind doch eig. nur sachen die sich auf header und so beziehen:
Zum Vergrößern anklicken....

Keine Ahnung, ich hab noch nie mit einem runtergeladenen Design gearbeitet,
vermute aber mal, dass es schwierig wird, wenn Du gar keine Kenntnisse hast...

Die Verbindungen sehen so aus:

Mit <link rel="stylesheet" type="text/css" href="style.css"> sagst Du dem Browser,
dass er die Datei "style.css" benötigt, um das Design anzuzeigen.

In dieser Datei sind dann für jedes Element die Positions-, Farb- usw. angaben.

So bekommen z.B. Überschriften ersten Grades mit h1 { color:#000;} die Schriftfarbe schwarz...

Dr. Prof schrieb:
Weil ich denke so ein Design selber machen ist doch ungeheim schwirig oder nicht?
Zum Vergrößern anklicken....

Du fängst erstmal damit an, dass Du Deine HTML-Seite fertig machst und jedes
Element semantisch korrekt auszeichnest.
Danach machst Du das Design mit CSS. Dabei solltest Du nicht gleich versuchen,
etwas hochkompliziertes zu machen, sondern mit etwas einfachem anfangen und
Dich dann langsam steigern...

Grüße
Bernhard
 
Bernhard schrieb:
Hallo...



Ist das der vollständige HTML-Code?
Da kann nichts angezeigt werden, weil der komplette <body> fehlt.



Keine Ahnung, ich hab noch nie mit einem runtergeladenen Design gearbeitet,
vermute aber mal, dass es schwierig wird, wenn Du gar keine Kenntnisse hast...

Die Verbindungen sehen so aus:

Mit <link rel="stylesheet" type="text/css" href="style.css"> sagst Du dem Browser,
dass er die Datei "style.css" benötigt, um das Design anzuzeigen.

In dieser Datei sind dann für jedes Element die Positions-, Farb- usw. angaben.

So bekommen z.B. Überschriften ersten Grades mit h1 { color:#000;} die Schriftfarbe schwarz...



Du fängst erstmal damit an, dass Du Deine HTML-Seite fertig machst und jedes
Element semantisch korrekt auszeichnest.
Danach machst Du das Design mit CSS. Dabei solltest Du nicht gleich versuchen,
etwas hochkompliziertes zu machen, sondern mit etwas einfachem anfangen und
Dich dann langsam steigern...

Grüße
Bernhard
Zum Vergrößern anklicken....


Okkay hmm, bleibt mir wohl nix anderes zu machen als zuerst mal HTML fertig zu lernen(ja schweiss ausgelernt ist man nie aber ihr wisst was ich meine) und danach an CSS zu gehen.
Nee war nicht der ganze code, hab das ding mal hochgeladen:
aufgrund von enstehenden missverständnissen gelöscht
Ich weiss der HTML Code ist ziemlich strange und unübersichtlich und mit tabellen :S.
Aber so sollte es am schluss eben auch aussehen aber halt nur mit dem gewünschten Design. Aber es wird hal tnur so angezeigt...
 
Zuletzt bearbeitet:
Tipp: Lerne ersteinmal richtig HTML mit einem vorgefertigeten Template zu arbeiten klingt vielleicht einfach aber wenn man rein garkeine Ahnung hat von Html noch von CSS dann sollte man ersteinmal die Beschreibungssprache richtig lernen.
 
tarik02 schrieb:
Tipp: Lerne ersteinmal richtig HTML mit einem vorgefertigeten Template zu arbeiten klingt vielleicht einfach aber wenn man rein garkeine Ahnung hat von Html noch von CSS dann sollte man ersteinmal die Beschreibungssprache richtig lernen.
Zum Vergrößern anklicken....

Auch wen du es evt. nicht so gemeint hast klingt es trotzdem ziemlich angreifend, solche Kommentare wollte ich eig. mit:

Ich weiss der HTML Code ist ziemlich strange und unübersichtlich und mit tabellen :S.
Aber so sollte es am schluss eben auch aussehen aber halt nur mit dem gewünschten Design
Zum Vergrößern anklicken....

verhindern, ich wollte nur auf die schnelle die einzelnen Sachen visual darstellen um für mich zu schauen ob das, was ich vorhabe auch so realisierbar ist.

;)
 
Dr. Prof schrieb:
Auch wen du es evt. nicht so gemeint hast klingt es trotzdem ziemlich angreifend, solche Kommentare wollte ich eig. mit:



verhindern, ich wollte nur auf die schnelle die einzelnen Sachen visual darstellen um für mich zu schauen ob das, was ich vorhabe auch so realisierbar ist.

;)
Zum Vergrößern anklicken....
Ich glaube er meint es nicht streng, aber er hat auch ein bisschen recht, wie du schon selbst erwähnt hast benutzt du Tabellen. Das macht es nicht einfacher. Das ist eine Methode die man vor 15 Jahren genutzt hat.
 
Nöö mein ich auch nicht, es geht halt nur darum, das es halt andere Leute gibt die bei solch Sachen gleich austicken würde etc. Sachen kommen desöftern falsch an aber hat auch nix mitm thema zu tun.

Schwollte eben eig. die Seite machen, also hab ich mit html begonnen eingelsen so ca. 2-3 Tage und dan einfach mal gesagt kommt egal ich überspring mal dies und jenes und geh gleich zum gewünschten.
Aber anscheinend doch nicht so das richtige. Ich geh lieber zurück und mach alles schritt für schritt ist das beste oder?
 
Dr. Prof schrieb:
...aber hat auch nix mitm thema zu tun.
Zum Vergrößern anklicken....
Apropos nix mitm Thema zu tun, ist das schwäbisch, was Du da schreibst ("schwollte")? Ich erspare mir jetzt die Bemerkung, wie sich das liest, und beschränke mich auf die Bitte, doch normales Deutsch zu schreiben. Das erhöht unter Umständen die Hilfsbereitschaft der Leute.

Schwollte eben eig. die Seite machen, also hab ich mit html begonnen eingelsen so ca. 2-3 Tage und dan einfach mal gesagt kommt egal ich überspring mal dies und jenes und geh gleich zum gewünschten.
Aber anscheinend doch nicht so das richtige.
Zum Vergrößern anklicken....
Das hast Du gut erkannt. Viele denken so, aber viele hauts damit auch richtig auf die Nase.

Schritt 1: Inhalt der Seite aufschreiben.
Schritt 2: Diesen Inhalt mit richtiger Semantik in HTML auszeichnen.
Schritt 3: Layout und Design per CSS machen.

CSS-Layouts benötigen eine Basis aus validem und semantisch sinnvollem HTML. Ist das nicht gegeben, funktioniert CSS im schlimmsten Fall nicht, wie gewünscht, im harmlosesten Fall musst Du Arbeit doppelt und dreifach machen, wenn das HTML nicht stimmt.

Also immer eines nach dem anderen ist wirklich das beste. Dabei solltest Du für HTML immer beachten, dass HTML nichts damit zu tun hat, wie ein Element am Bildschirm dargestellt wird. Machst Du z.B. ein Menü, zeichnest Du es semantisch richtig als Liste aus. Du wirst feststellen, dass die Menüpunkte untereinander sind. Willst Du das Menü aber horizontal, bedeutet das nicht, dass Du nach einem anderen Tag suchen sollst, das wäre im Sinne von HTML falsch. Das Aussehen machst Du allein mit CSS, damit ist es ein Leichtes, die Liste horizontal auszurichten.

Aber jetzt fang erstmal an, Detailfragen können wir Dir auch später beantworten :-) Wichtig ist nur, dass klar ist, dass HTML nur dem Inhalt eine logische Bedeutung gibt und nicht für das Aussehen oder Layout zuständig ist.

Viel Erfolg,
-Efchen
 
Ja,
Efchen hat recht. Man darf für den Anfang nicht zu viel erwarten. Das ist auch mein Problem. Ich stürze mich von ein in das andere Thema(erst HTML, dann Css und jetzt php).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben