Design umsetzen - HILFE!

BigBob · 20 August 2009

Hallo zusammen, habe mich extra angemeldet um hier nachzufragen:

Ich habe mit Photoshop ein Design für eine Homepage erstellt und möchte diese nurn in HTML coden.

Hier das Design: ImageBanana - screen.JPG (text nur provisorisch, soll auch in HTML sein)

Ich habe (gute) Grundlagen in HTML, komme aber überhaupt nicht klar.
Ich möchte die Seite gerne mit Tabellen coden.

Bitte unbedingt um Hilfe

Danke

Icy · 20 August 2009

BigBob schrieb:
Ich möchte die Seite gerne mit Tabellen coden.

Nein, bitte nicht! Das ist grundsätzlich falsch; das Layout deiner Seite erstellst du ausschließlich mit CSS.

Für den Hintergrund vergibst du die obere Grafik und zentrierst sie; dazu die Hintergrundfarbe schwarz.
Dann floatest du eine Liste (die Navigation) links und den Inhaltsbereich rechts. Für beide Sektionen kannst du einen Abstand nach oben definieren.
+Danach clearst du und packst eine Grafik drunter und wiederum dadrunter ein p-Element für deinen Footer.
Fertig!

So etwas muss wirklich nicht mit Tabelle gelöst werden, die sind für ganz andere Dinge da.

MfG Icy

xooox · 20 August 2009

BigBob schrieb:
Ich möchte die Seite gerne mit Tabellen coden.

Das Design in Photoshop mit dem Slice Werkzeug so teilen wie du das willst, dann auf speichern für web blabla schlag mich tot, und schon hast du eine fertige Webseite in Tabelen Form da brauchste nix mehr coden :mrgreen:

Würde dies aber nicht machen, Tabellen wurden in den 80er benutzt um ein Design darzustellen, heutzutage benutzt man CSS.

_Thor_ · 20 August 2009

xooox schrieb:
Tabellen wurden in den 80er benutzt um ein Design darzustellen

Na das erklär mal Tim Berners-Lee ;)

xooox · 20 August 2009

So genau wollen wir das doch jetzt nicht nehmen oder ? :mrgreen:

Aber hier die Story, als die ersten Brower Bilder zeigen konnten, und es noch kein CSS gab waren die Coder gezwungen die Tabellen als Layout zu benutzen, dafür waren sie aber nie gedacht...

Darum dann auch CSS...

In meinen Augen geht das noch in die 80er selbst wenn es die 90er waren :mrgreen:

wenn interessiert das, zumindest sölltest du dein Design nicht mit Tabellen machen.

lg.xooox

thuemmy · 20 August 2009

xooox schrieb:
Würde dies aber nicht machen, Tabellen wurden in den 80er benutzt um ein Design darzustellen, heutzutage benutzt man CSS.

Wenn die Zeitangabe stimmt, dann aber sicher nicht im WWW. Das WWW wurde erst Mitte 1991 für die Öffentlichkeit freigegeben. 89 am CERN von Tim Berners-Lee entwickelt, diente das WWW lediglich dazu, um Zugriff auf wissenschaftliche Dokumente zu ermöglichen und diese miteinander zu verlinken. Tabellen wurden damals sicher auch benutzt. Aber nur dafür, wofür sie gedacht sind... für tabellarische Daten.

Gruß thuemmy

xooox · 20 August 2009

thuemmy auch ich kenne die geschichte über html css und Co.

siehe meinen beitrag über dir :mrgreen:
Dem TS interessiert es bestimmt nicht ob es die 60er 70er oder 90er waren, wenn er weiß das Tabellen nicht für ein Layout da sind reicht ihm das bestimmt.

Müst nicht jede aussage von mir mit argus augen kritisieren :mrgreen:

Mal locker bleiben und durch artmen bringt manchmal wunder :mrgreen:

chill out man

thuemmy · 20 August 2009

xooox schrieb:
thuemmy auch ich kenne die geschichte über html css und Co.

Schön für Dich.

xooox schrieb:
siehe meinen beitrag über dir :mrgreen:

Ich gebe zu, dass ich mnnchmal etwas langsam bin (Es werden nebenher noch Nachrichten geguckt).

xooox schrieb:
Dem TS interessiert es bestimmt nicht ob es die 60er 70er oder 90er waren, wenn er weiß das Tabellen nicht für ein Layout da sind reicht ihm das bestimmt.

Wenn es ihn nicht interessiert, warum nervst Du den TS dann mit falschen Jahreszahlen?

xooox schrieb:
Müst nicht jede aussage von mir mit argus augen kritisieren :mrgreen:

Na, wenn falsche Sachen behauptet werden, die weltweit zu lesen sind, dann fühle ich mich schon das ein oder andere mal geradezu verpflichtet, das richtig zu stellen.

xooox schrieb:
Mal locker bleiben und durch artmen bringt manchmal wunder

Du wirst es nicht glauben, ich bin ganz locker.

Gruß thuemmy

xooox · 20 August 2009

Das wird hier noch ne harte Nuss mit dem einen oder anderen :mrgreen:
aber hab ja gute nerven :mrgreen:

thuemmy · 20 August 2009

Als ich Deine ersten, teils beleidigenden Posts gelesen habe, hatte ich mir komischerweise genau dasselbe gedacht.

Gruß thuemmy

_Thor_ · 20 August 2009

Auch im ersten Browser wurden StyleSheets zum Darstellung verwendet, die nachfolgenden Browser haben dann nur alle ihren eigenen Mist verzapft und diese nicht unterstützt.

xooox · 20 August 2009

Die hast du bestimmt miss verstanden :mrgreen:

Wollen wir nicht lieber die PN funktion nutzen, damit man sich auf das Thema konzentrieren kann :mrgreen:

BigBob · 20 August 2009

So,
habe nun mal angefangen, hab das Menü geändert, weil es mir irgendwie nicht so gefiel.
Schnell aufn Webspace geladen:http://www.nebulaorion.bplaced.net/
Hier der Code:

Code:

<div id="wrapper" style="background-color:#0f1013">
    <div id"header" align="center"><img src="logo.png" alt="das ist mein Logo" width="393" height="251"></div>
    <style type="text/css">
<!--
body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #CCCCCC;
}
body {
    background-color: #0f1013;
}
a:link {
    color: #FFFFFF;
}
a:visited {
    color: #FFFFFF;
}
a:hover {
    color: #2e5199;
}
a:active {
    color: #FFFFFF;
}

-->
</style>

    <div align="center">
    <ul id="navi" style="font-size:8pt"> 
        <u><a href="">// Home</a></u>             <u><a href="">// Beobachtungsberichte</a></u>
        <u><a href="">// Wissen</a></u>          <u><a href="">// Equipment</a></u>
        <u><a href="">// Bilder</a></u>           <u><a href="">// Über Mich</a></u>
        <u><a href="">// Links</a></u>           <u><a href="">// Kontakt</a></u>
    
    </ul>
    
  <div id="inhalte" align="center" style="margin-top:30px">
<b>Hallo Sternengemeinde,</b><p>

ich möchte auf dieser Homepage einen Einblick in mein Hobby Astronomie geben.<br>
Ich werde allgemeine Fragen klären und alle die es noch nicht sind, mit dem<br>
Astrovirus infizieren. Bei Fragen und Anregungen meldet euch.<p>

Liebe Grüße und CS<p>    
<img src="lukas.jpg">

      <div id="footer">
      <img src="iya.gif"><p>
        © 2009 Lukas Jarosch
    </div>
  </div>
    </div>
</div>

P.S. Das Logo wird noch verkleinert um Ladezeiten zu verbessern.

cheers

thuemmy · 20 August 2009

Wenn Du die Seite auf einen Server hochgeladen hast, dann musst du hier eigentlich keinen Code mehr posten. Weder HTML noch CSS. Wenn Du irgendwann mal PHP mit auf der Seite hast, den müsstest Du dann natürlich posten, weil der ja nicht an den Browser übertragen wird, sondern nur das Ergebniss.

Nun zurück zu Deiner Seite. Ersetze mal die <u>-Tags in Deiner Liste durch <li>-Tags. Die <u>-Tags sind mittlerweile glaub ich deprecated (missbilligt), da HTML nur noch zur semantisch korrekten Auszeichnung des Webseiteninhaltes dient. Alles was mit dem Aussehen zu tun hat, wird über CSS gemacht.

Grßu thuemmy

BigBob · 20 August 2009

wenn ich die <u> Tags entferne, bekomme ich nicht den gewünschten effekt...
habs mal geuploaded: Deep-View::Enjoy your cosmos

Shrax · 20 August 2009

Schau das ist zwar ansatzweise richtig aber letztendlich auch total falsch. (??)
So sieht das zum Beispiel schon besser aus:
PS; Ja ich hab grad zu viel Zeit xD
PS2; Bitte kopier den nicht einfach ab sondern versuch zu verstehen was was bewirkt.

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>TITEL</title>
            <link href="style.css" type="text/css" rel="stylesheet" media="screen" />            
    </head> 
    <body>
            <div id="wrapper">
                <div id="header">
                        <h1 id="logo">
                            <img src="logo.png" alt="das ist mein Logo" width="393" height="251" />
                        </h1>
                        <ul id="navi"> 
                                <li><a href="#">// Home</a></li>             
                                <li><a href="#">// Beobachtungsberichte</a></li>
                                <li><a href="#">// Wissen</a></li>          
                                <li><a href="#">// Equipment</a></li>
                                <li><a href="#">// Bilder</a></li>           
                                <li><a href="#">// Über Mich</a></li>
                                <li><a href="#">// Links</a></li>           
                                <li><a href="#">// Kontakt</a></li>
                        </ul>
                </div>
                <div id="inhalte">    
                    <h2>Hallo Sternengemeinde,</h2>>
                        <p>
                            ich möchte auf dieser Homepage einen Einblick in mein Hobby Astronomie geben.
                            Ich werde allgemeine Fragen klären und alle die es noch nicht sind, mit dem
                            Astrovirus infizieren. Bei Fragen und Anregungen meldet euch.
                        </p>
                        <p>
                            Liebe Grüße und CS
                        </p>    
                        <img src="lukas.jpg">
                </div>
                <div id="footer">
                        <img src="iya.gif" width="585" height="81"> 
                            <p>
                                2009 ist das Jahr der Astronomie, ich bin dabei und du?
                            </p>
                            <p>
                                &copy; 2009 Lukas Jarosch
                            </p>
                </div>
            </div>
    </body> 
</html>

Jetzt machst du neben der Datei ne Datei namens style.css und schreibst dort dein css rein.
Beispielsweise die divs erreichst du mit

HTML:

#wrapper {
hier dein css zeugs was auf wrapper auswirken soll
}

BigBob · 20 August 2009

Danke, werd es mir mal ansehn.
Das mit der externen css datei hab ich schonmal (früher) ausprobiert und es ging total in die hose, diesmal wird das hoffentlich was ;P

edit:
Hab ein paar fragen:
-kann ich a:hover usw. weiterverwenden?
-wie bekomm ich die punkte bei der navigation weg?
-wie kann ich jetzt global die hintergrundfarbe ändern. Nicht nur den wrapper?

BigBob · 20 August 2009

---NEIN---
Falscher knopf :\

Shrax · 20 August 2009

-kann ich a:hover usw. weiterverwenden?

Ja.
In die Style.css

a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #2e5199;
}
a:active {
color: #FFFFFF;
}

eintragen. Das ist schon ok.
Denn das ist ja für das Layout und aussehen da. Das sollte nur nicht im HTML gemacht werden da html nur zur Textauszeichnung ist.
Man kann es natülich auch Inline
<style type="text/css">.....
machen aber das erschwert die Wartung und hat einige nachteile.

-wie bekomm ich die punkte bei der navigation weg?

Les dich da mal rein:
list-style-type: Aufzählungszeichen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

-wie kann ich jetzt global die hintergrundfarbe ändern. Nicht nur den wrapper?

Von der ganzen Seite?
Sofern der wrapper nicht über die ganze seite geht, in style.css:
(es ist deswegen kein "#" von body, weil body keine id hat sondern ein <tag> ist.)

Code:

body {
          background-color: #00000;
         }

BigBob · 20 August 2009

spitze danke :)
Werde das überarbeiten und hier neu posten

edit: sorry, aber hab ein neues problem: ich bekommen die Farben für die Navigation in der style.css nicht geändert. Wenn ich es direkt in den quellcode schreibe geht es. Aktuelle version ist hochgeladen.[/QUOTE]

Design umsetzen - HILFE!

Neues Mitglied

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Neues Mitglied

Mitglied

Neues Mitglied