hallo,
vorweg: die folgenden programme, die man benötig, sind alle freeware/open-source.
Notepad++, pkColorPicker und Firefox mit diversen Erweiterungen. z.b. Web Developer, EditCSS und HTML Validator
Notepad++ kann hier runtergeladen werden. es ist ein editor, der fast alle programmiersprachen unterstüzt. (X)HTML und CSS stellt er sehr schön dar (farbliche hervorhebungen etc.), ausserdem unterstüzt er tabs (wie im firefox).
pkColorPicker kann hier runtergeladen werden. pkColorPicker ist ein sehr komfortabler und umfangreicher farbwähler. man kann schnell die passende farbe mischen oder farben abändern z.b. in helligkeit, sättigung und farbton.
die firefox erweiterungen können auf den extension seiten von mozilla heruntergeladen werden.
damit hat man eine komplette entwicklungsumgebung für anspruchsvolle homepages, deren design auf CSS basiert.
ich designe websites (keine 'photoshop' sondern XHTML und CSS) so:
im 1. schritt überlege ich mir wie die seite aussehen soll
2. das ganze auf ein blatt papier skizzieren (kann auch photoshop o.ä. sein)
3. erstellt man einen link-baum damit das später nicht zum problem wird die einzelnen seiten zu benennen und zu verlinken
4. in Notepad++ eine neue und das XHTML grundgerüst mit externem-stylesheet-platzhalter schreiben. diese datei abspeichern und danach sieht man die hervorhebungen.
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="Dateiname" rel="stylesheet" type="text/css" title="Standard" />
<title>Grundgerüst</title>
</head>
<body>
</body>
</html>
5. in Notepad++ ein neues CSS stylesheet anlegen, die wichtigsten infos reinschreiben (und kommentieren damit man sich später zurechtfindet)
- Code: Alles auswählen
body {
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 24px;
color: #000000;
margin: 0px;
}
h1 { /* ueberschrift 1 */
font-size:12px;
color:#000000;
font-style:normal;
font-weight:bold;
line-height:normal;
}
h2 { /* ueberschrift 2 */
font-size:12px;
color:#000000;
font-style:italic;
font-weight:bold;
line-height:normal;
}
h3 { /* ueberschrift 3 */
font-size:12px;
color:#000000;
font-style:italic;
font-weight:normal;
line-height:normal;
}
diese CSS datei in den platzhalter eintragen.
6. jetzt startet man firefox und öffnet das HTML dokument. zusätzlich öffnet man die erweiterung EditCSS (damit kann man realtime die CSS datei verändern und sich anschauen was das für auswirkungen hat).
7. jetzt ist dein können gefragt! das grundgerüst von XHTML und CSS steht.
wenn du jetzt codest und speicherst brauchst du die seite im firefox nur aktualisieren und du siehst das ergebnis wie es in einem echten browser aussieht, der alles richtig darstellt.
8. in EditCSS kannst du jetzt bequem das stylesheet ändern und die auswirkungen sehen. gefallen sie dir musst du sie nur noch in Notepad++ übernehmen und speichern.
hoffe das hilft euch
ram-online
von sirrpa » 27.03.2005, 22:37 
Frage stellen