Frage stellenHallo zusammen
Für mich ist CSS im Moment noch totales Neuland! Hat mir jemand einen Tipp, wie ich vorgehen könnte um mich da einzuarbeiten? Oder hat mir jemand einen kompletten Quellcode, mit dem ich herumbasteln kann, also learning by doing, oder denkt ihr, ich sollte erst mal ein Buch kaufen?
Ich habe schon eine Homepage gebastelt. Das meiste über Foren gelernt. Eigentlich kann ich jetzt fast alles kreieren, was ich bis jetzt als nötig erachtete, aber eben, umständlich. Jetzt wird mir immer wieder empfohlen, ich solle auf CSS umstellen. Also möchte ich das jetzt endlich anpacken.
Herzlichen Dank für eure Tipps!
Grüsse vom Opti
Community rund um Cascading Style Sheets, Tutorials & KnowHow für Webmaster
Totaler Neuling, wie soll ich vorgehen
6 Beiträge • Seite 1 von 1
Totaler Neuling, wie soll ich vorgehen
von optimfish » 26.06.2006, 16:53
- optimfish
- neu hier
- Beiträge: 4
- Registriert: 26.06.2006, 16:40
- Wohnort: Luzern.CH
Verschiedene Hilfen gibt es
von Joksch_c » 26.06.2006, 17:17
Also ich ahbe mir 2 Bücher und verschiedene Websites angeschaut und dann learning bei doing ist das einfachste.
Um ein wenig werbung zu machen.
Bücher:
- CSS für Dummies
- Cascading Style Sheets Das Einsteigerseminar
Websites findest du massig in Google"CSS Hilfe"
und nun kannst du sehr viel lesen und ausprobieren.
Um ein wenig werbung zu machen.
Bücher:
- CSS für Dummies
- Cascading Style Sheets Das Einsteigerseminar
Websites findest du massig in Google"CSS Hilfe"
und nun kannst du sehr viel lesen und ausprobieren.
- Joksch_c
- neu hier
- Beiträge: 6
- Registriert: 26.06.2006, 17:03
von optimfish » 26.06.2006, 17:44
Danke Joksch
Ich finde einfach nichts Schlaues. Vorallem vermisse ich eine Schritt-für Schritt Anleitung wo von anfang an eine ganz einfache Page aufgebaut wird mit CSS. Ich glaub ich kauf gleich erst mal ein Buch.
Oder weiss jemand gerade eine ganz einfache Page, wo CSS konsequent angewendet wird? Die sich eignen würde zum ausprobieren?
Ich finde einfach nichts Schlaues. Vorallem vermisse ich eine Schritt-für Schritt Anleitung wo von anfang an eine ganz einfache Page aufgebaut wird mit CSS. Ich glaub ich kauf gleich erst mal ein Buch.
Oder weiss jemand gerade eine ganz einfache Page, wo CSS konsequent angewendet wird? Die sich eignen würde zum ausprobieren?
- optimfish
- neu hier
- Beiträge: 4
- Registriert: 26.06.2006, 16:40
- Wohnort: Luzern.CH
Habe was gefunden
von optimfish » 26.06.2006, 18:07
Hallo zusammen
Ich habe da noch was gefunden. Kann so das das Grundgerüst einer Page aussehen? Könnte man auf diesem Code aufbauen?
Gruss Opti
Ich habe da noch was gefunden. Kann so das das Grundgerüst einer Page aussehen? Könnte man auf diesem Code aufbauen?
- Code: Alles auswählen
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Seitentitel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<div id="seite">
<h1 id="titel">Seitentitel <span>- kleiner Zusatz</span></h1>
<ul id="imenu">
<li><strong><a href="/">Startseite</a></strong></li>
<li><a href="seite2.html">Link 2</a></li>
<li><a class="aktuell" href="seite3.html">Übersicht</a></li>
<li><span>angezeigte Seite</span></li>
<li><a href="seite5.html">Link 5</a></li>
</ul>
<div id="text">
<h2><img src="teaser.png" alt="Beschreibung" />Seitenüberschrift</h2>
<p>Inhalt der Seite...</p>
<h3>Textüberschrift</h3>
<p>Neuer Textabsatz...<br />neue Zeile...<br /><br />Leerzeile im Absatz.</p>
</div>
<p id="fuss">
Fußzeile...
[<a href="#titel" title="nach oben"> ↑ </a>]
</p>
</div>
/* ------------------------------------------------ */
/* CSS-Layout (c) 2004 by Ingo Turski (www.1ngo.de) */
/* (mit Anpassungen fuer den IE im 'quirks mode') */
/* ------------------------------------------------ */
/* allgemeine Definitionen */
html, body {
margin:0;
}
body {
font-size:100.1%;
padding:7px;
background:#800;
text-align:center;
}
#seite {
text-align:left;
margin:auto;
width:760px;
}
a {
text-decoration:underline;
color:navy;
}
a:visited, a:hover, a:active {
color:black;
}
a:hover, a:active {
background:white;
}
a:active {
text-decoration:none;
}
img {
border: 0 none;
}
/* Header */
h1 {
font: bold 1.5em Tahoma,"Adobe Helvetica",Helvetica,Arial,sans-serif;
letter-spacing:1em;
text-align:center;
padding:5px;
margin:0;
color:white; background:#c40;
border-width:1px; border-style:solid;
border-color:#fc0;
}
h1 span {
font-size:0.55em;
letter-spacing:0.66em;
}
/* Textbereich */
#text {
float:none;
clear:left;
width:auto;
margin: 1px 0 5em;
padding:1em;
color:black; background:#eee;
border-width:3px; border-style:solid; border-color: white #999 #999 white;
border-top-width:3px; border-bottom-width:3px;
}
html>body #text {
width:auto;
margin: 1px 0 2em;
}
h2 {
font: bold 1em "Century Gothic","Trebuchet MS",Tahoma,Helvetica,sans-serif;
color:black;
}
h2 img {
float:left;
width:98px;
height:85px;
margin: 0 7px 3px 0;
background:white;
}
h3 {
font: bold 0.91em Tahoma,"Adobe Helvetica",Helvetica,Arial,sans-serif;
margin: 2em 0 0.5em;
color:black;
}
p {
text-align:justify;
}
p, #text li {
font: normal 0.91em "Century Gothic","Trebuchet MS",Verdana,Tahoma,sans-serif;
word-spacing:0.2em;
}
#text ul {
margin: 0 0 0 1em;
padding-left:0;
}
/* Menue */
#imenu {
font: normal 0.8em Tahoma,"Adobe Helvetica",Helvetica,Arial,sans-serif;
float:none;
width:auto;
margin: 1px 0 0;
padding: 0 3em;
height:6em;
background-color:#a00;
border:1px solid #fc0;
}
html>body #imenu {
margin-right:0;
}
#imenu li {
list-style:none;
font-size:1em;
float:left;
width:12em;
margin: 0 1em 0 0;
}
#imenu li a, #imenu li span {
display:block;
text-decoration:none;
margin-bottom:0.5em; margin-top:0.5em;
color:white; background:#900;
border-width:1px; border-style:solid; border-color: #f70 #300 #600 #e60;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
width:99%;
}
html>body #imenu li a, html>body #imenu li span {
width:auto;
}
#imenu li span {
border-color: #600 #f70 #e60 #f70;
background:#c40;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#imenu li a.aktuell {
border-color: #f70 #300 #600 #f70;
}
#imenu li a:hover, #imenu li a.aktuell:hover {
border-color: #600 #f70 #e60 #fc0;
color:white; background:#a20;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#imenu li a:active, #imenu li a.aktuell:active {
border-color: #600 #f70 #e60 white;
color:white; background:#c40;
padding: 0.4em 0.35em 0.25em 0.9em;
}
/* Footer */
#fuss {
clear:both;
font: normal 0.83em Verdana,"Adobe Helvetica",Helvetica,Arial,sans-serif;
text-align:right;
padding:0.2em;
margin: -3.5em 0 0 0;
color:white;
border-left: 0 none;
border-bottom: 0 none; border-right: 0 none;
}
html>body #fuss {
margin-top:1em;
}
#fuss a {
color:black;
text-decoration:none;
font-weight:bold;
}
@media print {
#imenu { display:none; }
#text { border:0 none; float:none; width:auto; margin:0; }
}
</style>
</head>
<body>
» ...und hier kommt der xHTML-Code rein.
</body>
</html>
Gruss Opti
- optimfish
- neu hier
- Beiträge: 4
- Registriert: 26.06.2006, 16:40
- Wohnort: Luzern.CH
von Laus » 26.06.2006, 23:04
Hallo Opti
Natürlich kannst du ein fertiges Layout nehmen um darauf aufzubauen, nur wirst du dabei schwerlich die Grundzüge der Seitengestaltung mit CSS durchdringen. Wenn du diese mal verinnerlicht hast wir es eine wahre Freude Seiten so zu gestalten, auch im Hinblick auf die spätere Betreuung der Seite. Versuch doch mal bei einem Tabellenlayout den Hintergrund eines Teiles der Seite zu Ändern, das artet bei etwas größeren Webseiten in richter Arbeit aus. Mit Css machst du kleine Änderungen in der Zentralen CSS Datei und diese Änderungen gelten automatisch für alle Seiten.
Ein guter Workshop um von Anfang an mitzumachen ist zu Beispiel Dieser hier hier wird Schritt für Schritt alles erklärt.
Ebenfalls gut erklärt und durchdacht dieser Workshop von Andreas Kalt
So nun viel spass beim css lernen
Gruß Xaver
Natürlich kannst du ein fertiges Layout nehmen um darauf aufzubauen, nur wirst du dabei schwerlich die Grundzüge der Seitengestaltung mit CSS durchdringen. Wenn du diese mal verinnerlicht hast wir es eine wahre Freude Seiten so zu gestalten, auch im Hinblick auf die spätere Betreuung der Seite. Versuch doch mal bei einem Tabellenlayout den Hintergrund eines Teiles der Seite zu Ändern, das artet bei etwas größeren Webseiten in richter Arbeit aus. Mit Css machst du kleine Änderungen in der Zentralen CSS Datei und diese Änderungen gelten automatisch für alle Seiten.
Ein guter Workshop um von Anfang an mitzumachen ist zu Beispiel Dieser hier hier wird Schritt für Schritt alles erklärt.
Ebenfalls gut erklärt und durchdacht dieser Workshop von Andreas Kalt
So nun viel spass beim css lernen
Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
(Oscar Wilde)
-
Laus - Moderator
- Beiträge: 1229
- Registriert: 25.02.2006, 00:30
- Wohnort: Furth im Wald
Super
von optimfish » 27.06.2006, 21:31
Ganz herzlichen Dank, xaver!
Du machst mir richtig Lust, die Sache von vorne anzupacken! Ich werde es mit den Sachen, die ich hier vorgeschlagen bekommen habe ausprobieren, und sonst muss halt ein Dummy-Buch her
Viele Grüsse Vom Franz
Du machst mir richtig Lust, die Sache von vorne anzupacken! Ich werde es mit den Sachen, die ich hier vorgeschlagen bekommen habe ausprobieren, und sonst muss halt ein Dummy-Buch her
Viele Grüsse Vom Franz
- optimfish
- neu hier
- Beiträge: 4
- Registriert: 26.06.2006, 16:40
- Wohnort: Luzern.CH
6 Beiträge • Seite 1 von 1
Moderatoren: Laus, Moderatoren
Ähnliche Beiträge zu "Totaler Neuling, wie soll ich vorgehen"
- Designumsetzung für Neuling!
- 2 ext css, in 1 Verz mit index.html, wie verlinken?
- CSS Anfänger: Wie Layout aufbauen?
- position:fixed relativ zu div. Wie geht das?
Zurück zu: CSS für Anfänger
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste