ein layout aus einen bild in html auflösen

[LEFT]also ich habe ein layout für eine hompage und will das in html auflösen

bis jetz habe immer ein bild gemacht text drauf gemacht also im bild und das ganze dan als map einebunden

aber will diese 0 8 15 lösung nich mehr wie mache ich es richtig
[/LEFT]

Schau dir den Grafikentwurf an. Ermittle wo dort Inhalte dargestellt werden sollen und wie diese formatiert sein müssten. Also Überschriften als Überschriften, Absätze als Absätze, fett markierte Texte als Hervorhebungen etc.pp. Erstelle zunächst ein HTML-Grundgerüst in dem Du diese Textmarkierungen dann einträgst. Erstelle dann eine CSS-Datei in der Du diese Markierungen nun formatierst sprich stylst. Ergänze wenn nötig im HTML-Code noch unterstützende Elemente um den Style zu erreichen.

Und wenn dir das alles nichts sagt, schau dir erstmal eines der vielen CSS-Tutorials an.

naja das sagt mir schon was … ganz kla ^^ nur ich bekomme das nich hinn alsoo ich scheiter immer beim einbinden eines menüs …
alsoo ich poste mal hier das bild / die hp

Ihr Homepagetitel das is die hp

http://file1.npage.de/005235/59/bilder/index.png

das ist das bild also fangen wir mal an

ich will eine kopfzeile haben mit einen hedder ganz oben

und dan links das menü …

nur wie mache ich das jetz =( bekomme das nie so hinn will das ganze dan auf meinen ftp server laden da das die verwaltung einfacher macht
das is ja kein pro. nur könnte mir vill einer von euch bei den html anfangsschritten helfen ^^ sagen wir mal alles was graffisch is is kein problehm nur beinn halt nich der beste in html :confused:

Hallo.

Hier ist ein Link für dich: HTML Tutorial.
Arbeite da mal den HTML und CSS Teil durch, danach wird dir vieles klarer sein.

Gruss
Elroy

also als erstes würde ich mal den header bestimmen (width 100% // height (deine entscheidung))
dann den bereich menu und den bereich textContent (menu ca.25% // textContent ca.75% // height bei beiden auf auto)
ausserdem würde ich noch einen footer machen (width 100% // height (deine entscheidung))
desweiteren einen wrapper welchen alle oberen container beinhaltet (width ca. 70% // height auf auto // margin: 0 auto(damit der wrapper in der mitte der seite steht))

versuch dass mal so umzusetzten dann machen wir schritt 2

mfg devilseye

P.S. wege zum ziel gibts soviele wie es sites gibt ich zeige dir nur einen auf ohne dir das ganze als ganzes einfach hinschmeisse

Sein Problem wird wohl eher darin liegen, dass er einfach kein HTML kann, was sich an der Homepage vermuten lässt: Er hat die gesamte Homepage in ein Bild gespeichert und lässt dieses anzeigen. Diese Methode habe ich seit Jahren nicht mehr gesehen, was jetzt kein Makel sein soll. :wink:

doch ^^ grundkenntnisse … ^^

denke ich mache es erst mal so wie im 1ten beschrieben und dan gehen wir zu schrit 2

melde dich nochmals mit code please

eine frage textContent kann ich den text nich aus einer eigenen text datei offnen ^^ das würde das bearbeiten leichter macheen hinterher

wesshalb? du machst einfach mehrere paragrafen mit verschiedenen klassen oder id’s

man -.- * ich komm mit css nich kla =( … verstehe das einfach nich … das kann doch nich so schwer sein ey …

ich meine html kann ich ja ein bischen nich viel ^^ aber ein wenig … GRRRR aber ich komme nich kla ich habe 0 peilung wie ich die einzelnen bereiche angebe =( hillf mir bitte ^^

Bevor Du ein eigenes Layout mit CSS umsetzt, experimentiere erstmal mit CSS herum. Erzeug ein HTML-Grundgerüst und setze dort mal testweise einige Eigenschaften für body (z.B. background-color). Ergänze dann einen Absatz mit Text (

Text

) und formatiere diesen mit einigen CSS-Eigenschaften (z.B. font-size, line-height, margin, color etc.pp). Und so machst Du es mit einigen anderen HTML-Elementen. Ohne dabei aber an deinen Layoutwunsch zu denken - probier dich einfach aus. Kaputt machen kannst Du dabei nichts.

Und wenn Du mal soweit bist, dann erzeuge ein Menü. Am besten nach einer der vielen Anleitungen die man dazu im Netz findet. Erst etwas einfaches aber. Nichts mit ausklappen oder einblenden und so.

Manchmal sollte man nicht gleich alles wollen sondern im Kleinen beginnen.

oke schau es ist geundsätzlich ganz einfach ein jedes Html besteht ja aus folgenden elementen
// Html – Ist im prinzip ein leeres Blatt Papier
// Head – Dort ist alles geschriebe was nicht auf anhieb sichtbar ist (styles; title; metas; usw)
// Body – Dort ist alles gschrieben was sofort sichtbar ist
// Doctype – gehört eigentlich an den anfang aber dir das Doctype hier zu erklären ist zu umständlich

so nun ist es einfach da wir ohne tabelle arbeiten kommt css zum einsatz, das stylesheet enthält alle angaben welche nicht in Html geschrieben werden.
Um das zu verdeutlichen sag ich es mal so:
// Das CSS hat die aufgabe jegliche art von,

/é Farben
/é Höhen und Breiten angaben
/é Positionen der Elemente
/é Text und Listen auszeichnungen
/é ebenfalls dazu gehört das auszeichnen von Tabellen welche wiederum das gleiche beinhalten wie das oben erwähnte

//é du kannst tags direkt auszeichnen
//é du kannst klassen bestimmen alle klassen haben einen . vor dem jeweiligen namen der klasse, eine klasse kann jeden beliebigen Namen haben den du ihm geben willst er sollte allerdings nicht zu lang sein
//é du kannst id’s bestimmen alle id’s haben ein # zeichen vor dem jeweiligen namen der id, jede id kann jeden beliebigen Namen haben den du ihr geben willst er sollte allerdings nicht zu lang sein

um zu deinem beispiel zurück zukehren hier ohne Doctype dargestellt

.HTML

[HTML]

der Titel deiner HP /* mit dem stern kannst du einen glabal reset machen da jeder Browser eine eigenes Stylesheet besitzt welches immer dann zum eisatz kommt wo keine angabe gamacht wurde hier werden nur aussen und innen abstände auf 0 gesetzt*/
  • {margin: 0; padding: 0;}

/* so nun zum eigentlichen stylesheet /
/
mit margin: 0 auto; geschieht folgendes das 0 ist der margin-top und der margin-bottom, auto ist der margin-left und margin-right */

#wrapper {
width: 70%;
height: auto;
margin: 0 auto;
}

/* die folgenden höhen und breiten angaben beziehen sich nun jeweils auf das wrapper element da wir alle folgenden container in den wrapper hineinpacken */

#head {
width: 100%;
height: 20%;
}

#menu {
width: 25%;
height: auto;
float: left;
}

#textContent {
width: 75%;
height: auto;
float: right;
}

#footer {
width: 100%;
height: auto;
clear: both;
}

/* clear löst das float auf da sonst alles nachgehende ebenfalls gefloatet wird */

<div id="head"></div>
<div id="menu"></div>
<div id="textContent"></div>
<div id="footer"></div>
[/HTML]

so wenns dir bis hierhin nicht genau klar ist was du machst dann sollten

CSS 4 You - The Finest in Stylesheets

und

intensivstation

dir weiterhelfen können.
Wenn danach der 5er immer noch nicht gefallen ist dann rate ich dir entweder die jobbörse zu nutzen oder aber dir bücher zu kaufen welche dir html und css vermitteln ohne dass andere dir gleich den kompletten code vorkauen müssen.

mfg devilseye

:smiley: tolle antwort nur leider kann ich das ja mit html =/ hatte schon meine eigene hp … nur das hilft mir hier i wie nix =/ mann . ersmal drüber schlafen ^^

danke dir =) werde mich da erstmal durcharbeiten ^^ ach ja

[quote=„devilseye, post: 266000“]
oke schau es ist geundsätzlich ganz einfach ein jedes Html besteht ja aus folgenden elementen
// Html – Ist im prinzip ein leeres Blatt Papier
// Head – Dort ist alles geschriebe was nicht auf anhieb sichtbar ist (styles; title; metas; usw)
// Body – Dort ist alles gschrieben was sofort sichtbar ist
// Doctype – gehört eigentlich an den anfang aber dir das Doctype hier zu erklären ist zu umständlich :oops: das wuste ich schon

nur mit css kome ich nich kla aber denke das ist ein gutes beispiel =) danke dir ach ja bin ers 16 ^^

Ich bin erst 17 geworden vor 2 Wochen und kann den Mist auch. So schwer ist das also nicht… Wenn du so wenig Ahnung von HTML, CSS & PHP hast solltest du dir erstmal das Ziel setzen, diese Skriptsprachen zu lernen. Fang mit HTML an, bau einfache Homepages, füge Styles hinzu… Irgendwann legst du dir Apache zu und versuchst dich an PHP. Keine vernünftige Homepage ohne serverside Script! Google einfach mal nach solchen TuTs.

hey dark take it easy manchen fällt es nicht so leicht dinge zu lernen solange sie sich dazu entscheiden keine tabellenlayouts zu verwenden helfe ich gerne.
und css richtig zu lernen so dass auch alles zu 100% stimmt und zwar nicht einfach mit herumpröbeln bis man es dann irgendwann herausgefunden hat, sondern dass man auch wirklich versteht was man da gerade getan hat.

Falls das aggressiv rüber kam möchte ich mich entschuldigen. Es war eigentlich ein gut gemeinter Rat meinerseits…

naja es klang eher angep***t aber gut.