Tipps für meine Projektwebseite

erikk · 28.01.2012

Hallo,
ich bin gerade dabei eine Webseite für ein Projekt zu erstellen.
Früher habe ich mit dem NVU Editor Frameseiten gemacht und dann letztens mittels Photoshop und Slice Werkzeugen.
Seitdem ich während der Ausbildung HTML und CSS habe, will ich diese Seite komplett eigenständig im Notepad Editor erstellen.
Bisher ist das Layout grob fertig gestellt.
Wie kann ich euch die Seite bzw den HTML und CSS Code hier zeigen?

MediaCorporation · 28.01.2012

AW: Tipps für meine Projektwebseite

erikk schrieb:
Wie kann ich euch die Seite bzw den HTML und CSS Code hier zeigen?

Hi,

im Editor gibt es rechts 3 hübsche kleine Buttons, wo man einen Code einfügen kann und einmal gibt es noch einen Button um Links einzufügen.

erikk · 28.01.2012

AW: Tipps für meine Projektwebseite

Ok

ein Link gibt es noch nicht.
Aber den Code:

Code:

<!doctype html>
<html>

    <head>
        <title>New Media Podcasts</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    
    <body>
    
    <div id="wrapper">
        <div id="header">
            <div id="logo">
                <p>Logo</p>
            </div>
            <div id="navi">
                <p>
                    <ul>
                        <li><a href="startseite/startseite.html">Startseite</a></li>
                        <li><a href="podcasts/podcasts.html">Podcasts</a></li>
                        <li><a href="projekt/projekt.html">Projekt</a></li>
                        <li><a href="links/links.html">Links</a></li>
                    </ul>
                </p>
            </div>
            <div id="content1">
                <p>main 1</p>
            </div>
        </div>
        <div id="main">
            <div id="content2">
                <p>content 2</p>
            </div>
            <div id="content3">
                <p>content 3</p>
            </div>
            <div id="content4">
                <p>content 4</p>
            </div>
            <div id="content5">
                <p>content 5</p>
            </div>
        </div>
        <div id="footer">
            <p>footer</p>
        </div>
                
    </div>
    </body>

</html>

Code:

body {
font-family: sans-serif;
}

li {
display: inline;
padding-right: 10px;
}

ul a {
text-decoration: none;
color: black;
}

ul a:hover {
color: darkgrey;
}

p {
padding:0px 0px 0px 0px;
}

#wrapper {
width: 800px;
margin: auto;
background: black;
padding: 0px;
}

#logo {
background: red;
float: left;
width: 200px;
height: 60px;
}
#navi {
background: lightgrey;
float: left;
width: 600px;
height: 60px;
}
#content1 {
background: yellow;
clear: both;
width: 800px;
height: 400px;
}
#content2 {
background: grey;
width: 800px;
height: 200px;
}
#content3 {
background: green;
width: 800px;
height: 200px;
}
#content4 {
background: purple;
width: 800px;
height: 200px;
}
#content5 {
background: lightblue;
width: 800px;
height: 200px;
}

#footer {
background: orange;
width: 800px;
height: 40px;
}

Gibt es grundlegende Dinge die ich vergessen habe?

Sturmkraehe · 28.01.2012

AW: Tipps für meine Projektwebseite

hmm kommt drauf an was du mit der seite machen willst würde ich sagen... momentan ist es ja ersteinmall ein pures grundgerüst einer website...

Espe · 29.01.2012

AW: Tipps für meine Projektwebseite

Das sieht für den Anfang(!) doch garnicht mal so schlecht aus.
Vielleicht möchtest du direkt ein paar Html 5 Elemente einbringen?

Dann würde aus div id=header einfach <header></header>.
Für deine Seite nicht nötig, aber machbar:

Code:

<header>
<hgroup>
<div><img src="logo.png" alt="Website Logo /></div>
<div><p>Slogan neben dem Logo</p></div>
</hgroup>
</header>

Aus div id=footer wird <footer></footer>
Aus div id=navi wird <nav></nav>
Aus div id=content1 könnte <section></section> werden. Section beschreibt einen Bereich, z.B. dein "main1".
Aus div id=main könnte dann div id=content mit float=right; werden und die darin liegenden id=content werden zu <article id=1,2,3,...></article>.
Zwischen dem Ende von div id=content und dem Start von <footer> fügst du noch <aside></aside> mit einem Float left ein, sodass du links vom Content noch eine Sidebar hat (html5-Ersatz für div id=sidebar).

Hoffe das ist was du wolltest. Viel Spaß beim Basteln. Macht richtig Spass