Womit fange ich an

von **s5_st** » 12.02.2009, 00:14

Hallo, ich möchte auch schöne Homepagedesigns selbst erstellen. Ähnlich wie diese Seiten hier.
Aber ich weiß nicht wie ich anfangen soll.
Viele werden vielleicht sagen. "Lern Css such dir ein Tutorial" aber solche aussagen helfen mir nicht weiter.
Was ich zum Beispiel wissen möchte ist, wie ich diese an den Ecken Abgerundete Boxen einbaue und geschickt mit <div> umgehen lerne. Außerdem möchte ich lernen wie ich Text gestalte so wie in diesem Bild dargestellt ist.

http://ryanblack.lima-city.de/yaiu/p/csstest1-20090211-200255.png

Und solche Homepages aufbauen kann.

http://www.my-webnet.de/

http://www.webuco.de/services/webdesign.html

http://goldeneye.lima-city.de/effektfabrik/bilder/gaestebuch.jpg

Hilfreich wäre ein Online Tutorial und keine Bücher.

Ich hoffe ihr könnt mir dabei helfen.

von **Executor** » 12.02.2009, 15:34

de.selfhtml.org
www.css4you.de

lerne googlen ;-)

Es gibt zu nahezu jedem problem tutorials und forendiskussionen. Das mit den runden ecken sind ein paar divs übereinander, mit jeweils anderen hintergrundgrafiken.

Viel lernst du sowieso nur über ausprobieren. Dann festigt sich das ganze.

von **s5_st** » 12.02.2009, 15:53

self html kenn ich bereits,und wenn ich google finde ich immer nur bücher usw...
bei http://w3schools.com/ hab ich auch schon geschaut, aber da stehen immer nur die befehle beschrieben.

Ich suche ein Tutorial, wo ein Element gegeben ist, ich versuchen muss das nachzubauen und gegebenenfalls nachschauen kann wie es besser klappt.

von **Executor** » 12.02.2009, 18:31

http://de.html.net/tutorials/css/

von **the_fan** » 07.05.2009, 17:34

klick hier oben auf der seite einfach mal auf "css einführung"

von **Lanew** » 13.01.2010, 11:54

Schau doch mal auf www.verkehrsschilder.de
Habe ich mit Joomla gemacht, war recht einfach

von **Lanew** » 13.01.2010, 13:10

Hmh am besten du suchst dir wiklich erstmal eine Plattform mit der du die Homepage aufbauen kannst wie zum Beispiel Joomla.
Habe noch eine Seite gefunden die ich recht gut gemacht finde, daran halte ich mich eigentlich auch immer

http://www.camerainternational.de oder aber auch http://www.pharmasports.de
Vielleicht findest du ja auch dort anregungen
http://www.sundiscount.eu/overview/fliegengitter-insektenschutz
http://www.sundiscount.eu/overview/sonnensegel-sonnenschirme
http://www.sundiscount.eu/overview/lamellen-lamellenvorhang

von **Lanew** » 14.01.2010, 14:40

Habe noch einige Pages die ich ganz nett finde:
http://www.verkaufen-lebensversicherungen.com,
http://www.pkv-beamte.com und
http://www.private-krankenversicheruns-check.com
http://www.aletoware.de
http://www.rollos-news.de/
Sind alle mit Joomla erstellt, versuche mich darin jetzt auch

von **Azra** » 15.04.2010, 14:41

Es ist überhaupt nicht "am besten" mit CMS Systemen zu lernen.
Diese Baukasten Webseiten sehen alle gleich aus, sogar ein Forgeschrittener erkennt solch eine Seite beim betrachten

Wirklich am besten ist es einfach irgend eine Seite zu basteln mit Header, Navigation, Content und Footer.
Wenn DAS drin ist

Grundcode:

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titel</title> </head> <body> </body> </html>

Gewöhnt euch sauberes scripten an.
Grundcode mit <div>:

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titel</title> </head> <body> <div id="wrapper"> <div id="header">100% breit, passt sich dem Wrapper an - das sind daher 1000px</div> <div id="navigation">Navigation <ul> <li><a href="#">Wer</a></li> <li><a href="#">Wie</a></li> <li><a href="#">Was</a></li> </ul> 200px breit, hat Mindesthöhe für flexibilität </div> <div id="content">Der Content nimmt den Rest der Breite mit 800px ein.<br><br>Ebenfalls mit Mindesthöhe, mehr Text = mehr Platz<br><br><br><br>schreib mehr Text und teste ob sich der Content verlängert<br><br><br><br><br><br>Der Wrapper ist durch das "margin" zentriert</div> </div> <div id="footer">Footer außerhalb des Wrappers damit er auch brav unten bleibt</div> </body> </html>

Sauberkeit auch in CSS:

Code: Alles auswählen: body { margin: 0; padding: 0; background-color: #999999; font-family: Verdana; font-size: 13px; } #wrapper { margin: 0 auto; width: 1000px; background-color: #FF0000; } #header { width: 100%; height: 100px; background-color: #0030FF; } #navigation { float: left; width: 200px; min-height: 600px; background-color: #FF0000; } #content { float: left; width: 800px; min-height: 600px; background-color: #FFFFFF; } #footer { margin: 0 auto; clear: left; width: 1000px; height: 20px; background-color: #06FF00; }

Benutzt also "tab" um die Übersicht zu erhalten.
Erstellt die CSS Datei extern, damit vereinfacht ihr noch einmal die Übersicht.
Eingebunden wird sie ganz simpel zwischen </title> und </head> mit folgendem Code:

Code: Alles auswählen: <link href="namederdatei.css" type="text/css" rel="stylesheet">

Ich bin sicher es fällt nicht schwer das ganze nachzuvollziehen. Viel Spaß!

Womit fange ich an

Womit fange ich an

Re: Womit fange ich an

Re: Womit fange ich an

Re: Womit fange ich an

Re: Womit fange ich an

Re: Womit fange ich an

Wer ist online?