Hab jetzt mal die Startseite meines ersten Portfolios entworfen und würde gerne hören was ihr so davon haltet
unten bei den Bildern will ich später noch so einen Fade In, Fade Out Effekt mit jQuery erzeugen
Und ich hätte auch gleich noch ein paar Fragen
meine erste Frage wäre wie lange es dauern würde dieses Design in html/css und java umzusetzen (für jemanden mit Standart Kentnissen)
da ich es aber möglichst selbst Coden will wäre meine nächste Frage wo man anfangen sollte
vllt. könnte mir jemand der Ahnung auf diesem Gebiet hat mal erläutern wie ER bei meinem Design anfangen würde (mit Details, bitte nehmt euch die Zeit, ist mir sehr wichtig um ein bisschen Klarheit zu schaffen
)
Das wars eigtl. schon
Danke an Ichi-nii für die Navi Bar
und natürlich auch ein Danke an http://fiamdesign.deviantart.com/ für die Inspiration aus einem seiner Portfolios
also zu erstmal gefällt mir das Design ganz gut, ist schön aufgeräumt, übersichtlich und schlicht (mir persönlcih würden zwar 1-2 Farben noch bisschen besser gefallen aber das ist Geschmackssache.)
Zum "coden" (eig ist HTML/CSS kein coden eher ein "auszeichnen"):
- für jemanden mit Standartkenntnissen sollte es ziemlich einfach sein das hinzubekommen
Wenn ICH anfangen würde dann würde ich es erstmal in größere Rechtecke einteilen (die du mit CSS mit "div"s verwirklichst).
Grober Aufbau sollte dann zum beispiel so aussehen:
Also erstes div ist dein "Logo" also schreibst du in html:
code:
1:
<div id="logo"> ... </div>
und in CSS:
code:
1:
2:
3:
4:
5:
6:
7:
8:
#logo {
/* um es zu zentrieren */
margin-left: auto;
margin-right: auto;
width: XXXpx; /*deine breite (Absolut in px (Pixel) oder Relativ in %)*/
height: xxxpx; /*Höhe*/
}
(ausführlicher: einfach bei Google nach "div based layout" oder "Webdesign mit div" suchen
)
wenn du dann so die "Bereiche" eingeteilt hast musst du den Hintergrund setzen mit:
code:
1:
2:
3:
4:
body {
background-image: url(XXXXX.png); /* für ein Bild*/
background-color: #000; /* farbe in diesem Falle schwarz */
}
und dann nach und nach die ganzen Bilddateien als Hintergrund bei deinen "div"s setzen.
also am besten liest du dich bisschen in CSS ein besonders halt divs für den Aufbau und später halt so text-tags um die Schrift usw, anzupassen
Hoffe ich konnte dir bisschen weiterhelfen
PS: Viele "Anfänger" fangen dann an das in tabellen zu packen. Finger weg von Tabelle! Das ist veraltet und sehr unprofessionell.
also zu erstmal gefällt mir das Design ganz gut, ist schön aufgeräumt, übersichtlich und schlicht (mir persönlcih würden zwar 1-2 Farben noch bisschen besser gefallen aber das ist Geschmackssache.)
Zum "coden" (eig ist HTML/CSS kein coden eher ein "auszeichnen"):
- für jemanden mit Standartkenntnissen sollte es ziemlich einfach sein das hinzubekommen
Wenn ICH anfangen würde dann würde ich es erstmal in größere Rechtecke einteilen (die du mit CSS mit "div"s verwirklichst).
Grober Aufbau sollte dann zum beispiel so aussehen:
Also erstes div ist dein "Logo" also schreibst du in html:
code:
1:
<div id="logo"> ... </div>
und in CSS:
code:
1:
2:
3:
4:
5:
6:
7:
8:
#logo {
/* um es zu zentrieren */
margin-left: auto;
margin-right: auto;
width: XXXpx; /*deine breite (Absolut in px (Pixel) oder Relativ in %)*/
height: xxxpx; /*Höhe*/
}
(ausführlicher: einfach bei Google nach "div based layout" oder "Webdesign mit div" suchen
)
wenn du dann so die "Bereiche" eingeteilt hast musst du den Hintergrund setzen mit:
code:
1:
2:
3:
4:
body {
background-image: url(XXXXX.png); /* für ein Bild*/
background-color: #000; /* farbe in diesem Falle schwarz */
}
und dann nach und nach die ganzen Bilddateien als Hintergrund bei deinen "div"s setzen.
also am besten liest du dich bisschen in CSS ein besonders halt divs für den Aufbau und später halt so text-tags um die Schrift usw, anzupassen
Hoffe ich konnte dir bisschen weiterhelfen
PS: Viele "Anfänger" fangen dann an das in tabellen zu packen. Finger weg von Tabelle! Das ist veraltet und sehr unprofessionell.
Grüße,
Jonas
Danke für die Links und für die Erklärung
schau ich mir jetzt erstmal genauer an
Am meisten Verständnisprobleme habe ich aber mit diesen ganzen kleinen Details in dem Design
Wie soll man sowas bitte in html und css schreiben?
da wäre zb. dieses helle leuchtende hinterm Content
oder allgemein dieser Schlagschatten effekt an der Schrift
die abgerundeten Kanten
und ich würde gern noch wissen welche reihenfolge man einhalten sollte,
erstmal alles in html schreiben und dann erst css oder direkt die divs in css auszeichnen?
Da dein Portfolio wahrscheinlich eine feste Breite haben wird (nehme ich mal an), ist das eigentlich ganz einfach, entweder du nimmst einfach den ganzen grauen Teil (Inhalt) plus den weißen Schatten (nur das Weiße ohne Hintergrund) und setzt es als hintergrund von deinem "Container"-div.
(das würde ich bei so simplen Portfolios machen, da die eigentlich immer feste Höhe und Breite haben.)
Die zweite Möglichkeit wäre, dass du den weißen Schatten alleine (ohne Container) in 4 Bilddateien packst (links, oben, rechts, unten) und extra dafür div's um den Container herum bastelst (das ist aber für einen Anfänger eher umständlich und verwirrend).
Dritte Möglichkeit wäre das CSS-Tag "box-shadow", das is aber relativ "neu" und wird noch nicht von allen Browsern unterstützt, ist aber relativ einfach zu verwirklichen (einfach mal googlen).
Den Schlagschatten an Schriften kannst du ganz einfach mit text shadow machen.
Grüße
edit:
sorry vergessen: Am besten immer HTML und CSS parallel machen, dass du immer überprüfen kannst ob's auch klappt.
Falls du Adobe Dreamweaver hast kannst du sogar noch LiveAnsicht anmachen und immer schauen was sich genau verändert wenn du etwas in CSS änderst/ergänzst etc.
This post has been edited 1 time(s), it was last edited by Jonas: 27.12.2010 15:35.
Da dein Portfolio wahrscheinlich eine feste Breite haben wird (nehme ich mal an), ist das eigentlich ganz einfach, entweder du nimmst einfach den ganzen grauen Teil (Inhalt) plus den weißen Schatten (nur das Weiße ohne Hintergrund) und setzt es als hintergrund von deinem "Container"-div.
(das würde ich bei so simplen Portfolios machen, da die eigentlich immer feste Höhe und Breite haben.)
Die zweite Möglichkeit wäre, dass du den weißen Schatten alleine (ohne Container) in 4 Bilddateien packst (links, oben, rechts, unten) und extra dafür div's um den Container herum bastelst (das ist aber für einen Anfänger eher umständlich und verwirrend).
Dritte Möglichkeit wäre das CSS-Tag "box-shadow", das is aber relativ "neu" und wird noch nicht von allen Browsern unterstützt, ist aber relativ einfach zu verwirklichen (einfach mal googlen).
Den Schlagschatten an Schriften kannst du ganz einfach mit text shadow machen.
Grüße
edit:
sorry vergessen: Am besten immer HTML und CSS parallel machen, dass du immer überprüfen kannst ob's auch klappt.
Falls du Adobe Dreamweaver hast kannst du sogar noch LiveAnsicht anmachen und immer schauen was sich genau verändert wenn du etwas in CSS änderst/ergänzst etc.
die erste Möglichkeit finde ich am verständlichsten ^^
hab es auch soweit hinbekommen das es abgebildet wird (
)
aber jetzt hätte ich direkt ein neues Problem und zwar ist das Bild ja nur in einem Div drin
ich könnt jetzt zwar text "drüber" schreiben und es irgendwie richtig positionieren aber das wäre dann nur für meine Auflösung so
Was wenn jemand mit einer anderen Auflösung die Seite öffnen würde, dann wäre der Text irgendwo verteilt wo es gar nicht sein sollte oder?
Ich kann den Text ja nicht an den einzelnen Divs (die normalerweise vorhanden wären) ausrichten
und wenn wir schon bei solchen Anfänger Fragen sind...wie zentriere ich nen Text in nem Div?
Also in dem Fall die Liste in der Navibar
die steht am oberen Rand der Navibar
hab schon mit Css versucht:
code:
1:
2:
3:
4:
5:
6:
.nav_links li {
list-style:none;
display: inline;
vertical-align: middle;
}
funktioniert aber nicht wirklich...die Liste rückt nur etwa 1mm weiter runter!?
ich könnt jetzt zwar text "drüber" schreiben und es irgendwie richtig positionieren aber das wäre dann nur für meine Auflösung so Was wenn jemand mit einer anderen Auflösung die Seite öffnen würde, dann wäre der Text irgendwo verteilt wo es gar nicht sein sollte oder?
Solange du immer mit festen "px" -Angaben arbeitest ist es bei jedem gleich
Du kannst (oder es wäre sogar angebracht) den text in verschieden "div"s (bzw. "span"s - spans sind im Gegensatz zu "div"s inline d.h. sie lösen keinen Zeilenumbruch aus.) innerhalt des container-"div"s packen, damit du den Text in jedem der divs unabhängig formatieren kannst.
Hier könntest du jetzt z.B. text1 fett machen, text2 rot, text1 blau, text2 größer ... usw.
quote:
wie zentriere ich nen Text in nem Div?
kein Wunder "vertical-align" ist auch die Positionierung in der Senkrechten
Für die Horizontale Ausrichtung nimm "text-align" und in deinem Fall "center" (text-align: center) - das sollte funktionieren.
Original von Jonas
Dritte Möglichkeit wäre das CSS-Tag "box-shadow", das is aber relativ "neu" und wird noch nicht von allen Browsern unterstützt, ist aber relativ einfach zu verwirklichen (einfach mal googlen).
Den Schlagschatten an Schriften kannst du ganz einfach mit text shadow machen.
Ich würde zum jetzigen Zeitpunkt nicht mit CSS3 oder HTML5 arbeiten, da viele Browser das noch nicht korrekt implementiert haben (Der Internet-Explorer schafft das mit CSS2 immer noch nicht - ja, es gibt Leute, die noch mit dem Surfen) und es außerdem noch sehr viele Leute gibt, die ihren Browser nicht aktualisieren und noch mit Firefox 2.x oder Internet-Explorer 6 arbeiten.
Nicht falsch verstehen, CSS3 und HTML5 bieten tolle Möglichkeiten, aber es kann gut sein, dass sie entweder gar keine oder extrem komische Ergebnisse erzeugen, die dein Layout ganz zerschießen können.
If you were enjoying this post and if you keen on reading more interesting stuff then do not hesitate to complete the free sign up.
After the free registration you will gain access to all areas and you will be able to communicate with other artists from all over the world.
In addition you will benefit from our Photoshop and coding section as well as from our huge (hundreds of gigabytes) free resource section where you can find everything you will need to be a successful (web) designer/artist.
Sign up now and enjoy the advantages as a registered member.
(This website will be ad-free after a complete free sign up.)
)
04.01.2011 