Eigenes Design mit modernem Layout

CSS, Java Script u.s.w

Moderator: HTML-Laie

Antworten
Benutzeravatar
Simon
Forengänger
Forengänger
Beiträge: 41
Registriert: So 22. Jul 2012, 16:51
Mein Vorname: Simon
Kontaktdaten:

Eigenes Design mit modernem Layout

Beitrag von Simon »

Hi ich habe grade zufällig gesehen dass Felix jetzt ein Design hat
Deshalb wollte ich fragen ob man mir jetzt hier helfen kann
Also da ich ja uch eine animedesign haben will wie bei Animetube und so
Ich wär eine 2,5 in html und so
Würde mich freuen wenn es klappen würde
Und ich versteh nicht ganz den Unterschied zwischen einem modernen Layout und Tabellen :-(
Kannst du mir dass erklären?
mfg Simon
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3278
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Eigenes Design mit modernem Layout

Beitrag von Jasko »

Hallo Simon, kein Problem wir koenne dir sicher weiterhelfen.

Also im aussehen dieser beiden Metoden kann man keinen Unterschied feststellen, erst im Quellcode wird dieser sichtbar fuer den Leien. Aber grob gesagt. Bei einem Tabellen Layout macht man mit hilfe in einander verschachtelter Tabellen ein Layout fuer eine Seite, in dem man jeder Zelle einer Tabelle gewisse Aufgaben zuteilt. Aber das ist nicht gut, tabellen sind da um mit Inhalt gefuehlt zu werden und Tabellen in Tabellen zu machen ist auch nicht sehr gut, man verliert schnell den ueberblick.

Moderene Layouts werden mit Hilfe von CSS gemacht und dafuer werden sogenante DIV-Container verwendet. Tabellen sieht man da so gut wie garnicht, ausser sie kommen im Inhalt vor. Diese Divs haben eine menge Vorteile, waren die uebersichtlichkeit und sind fleksibler als Tabellenzellen.

Das W3C strebt die Satandardisirung von HTML und CSS an, darum sollte jeder Tag das machen wo zu er bestimmt wurde, und Tabellen sind nicht dazu bestimmt Layouts zu machen, das war mal bevor es CSS gab, da machte man aus der Not eine Tugend.

MFG :X
Benutzeravatar
Simon
Forengänger
Forengänger
Beiträge: 41
Registriert: So 22. Jul 2012, 16:51
Mein Vorname: Simon
Kontaktdaten:

Re: Eigenes Design mit modernem Layout

Beitrag von Simon »

Dann hätte ich lieber da moderne layout
Also so hatte ich mir das vorgestellt:
eine ähnliche Navigation wie bei http://www.chinurarete-subs.org/chinura ... d/home.php
Dann einfach ein Bild oben und unten dann wie bei http://www.anime-tube.tv
Und den Rest weiß ich nohtb nicht^^
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3278
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Eigenes Design mit modernem Layout

Beitrag von Jasko »

Also du willst eine DropDown Navigation, so eine kannst du im gegebenen Link, auf meiner Seite, sehen. Nicht erschrecken uns ist die Funktionalitaet wichtig beim bauen nacher kann man das ganze mit Grafiken und so tunen. Anschlissend soll es eine zweiteileges layout sein, mit einem Header oben ueber dem Inhalt, ist alles soweit klar.

OK so etwas sollte kein Problem werden.

Ich gebe dir jetzt den Hauptaufbau mit, den du besser ueberschreibst in ein Texteditor und abspeicherst alst htm oder html Datei.

Wir wollen so gut es geht modern arbeiten und auch Schulmaessig damit du spaeter deine Seite selber bearbeiten kannst und das ist Sinn der Sache.

OK, so modern wie moeglich heisst wir schreiben deinen Code in HTML 5, dieser hat einige unterschiede zu den vorgengern, aber auch die Tags wie die vorgaenger auch, da dein Design das erste ist das wir mit HTML5 ausstatten und HTML5 erst im kommen ist, magst du uns bitte nachsehen wenn wir dir etwas schrieben und spaeter korrigieren muessen, manchmal ist das auch dem lernprozess geschuldet den alles auf einmal zu lernen ist oft seh schwer, den es gibt so viele aspeckte die meissten wirs du dir selber aneignen muessen, aber wir wollen dir hier richtlinien geben.

OK na den fange ich an.

Jedes HTML Dokument hat einen Doctyp, dieser stellt die spielregeln in der man das HTML dokument schreibt, bei HTML5 sieht dieser so aus:

Code: Alles auswählen

<!DOCTYPE HTML>
Wenn du sehen willst welcher Doctype fuer deine Lieblingsseiten zustaendig ist, dann klicke mit der rechten Maustaste an eine leere Stelle auf der Seite in deinem Browser und anschliessend klicks du auf "Quellcode anzeigen" (Seitequelltext anzeigen) je nach Browser kann es abweichen. Und ganz oben an erster stelle steht der Doctype.

So genug davon wir haben unseren ja, also gehen wir weiter. Wir schreiben jetzt unser Grundgeruesst:

Code: Alles auswählen

<!DOCTYPE HTML>
<html>
<head>
<title>Titel deiner Seite hier</title>
</head>
<body>
<!--Seiteninhlat wird hier sein-->
</body>
</html>
Ok das ist der Grundaufbau der Text zwischen <!-- und --> Ist ein Kommentartext und ist nur im Quellcode zu sehen, dieser wird dazu verwendet manche Codeabschnitte zu marckiren oder zu erklaeren, damit man sich mit dem Code zurechtfindet auch wenn man diesen erst wieder nach zwei Jahren oder so oeffnet.

Nun gut erst noch etwas vor weg, HTML5 ist noch kein Standard deswegen unterstuetzen nicht alle Browser alle Tags des neuen, aber alle fuerenden Browser wie (Safari, Chrome, Firefox, Opera, Internet Explorer) integrieren die bestehnden HTML5 Elemente in ihren neusten versionen. Also sollen wir mit HTML 5 weiter machen oder in einem derzeit aktuellen Standard wie HTML 4.01 oder XHTML 1.0?

MFG :X
Benutzeravatar
Simon
Forengänger
Forengänger
Beiträge: 41
Registriert: So 22. Jul 2012, 16:51
Mein Vorname: Simon
Kontaktdaten:

Re: Eigenes Design mit modernem Layout

Beitrag von Simon »

Hi
Sorry versteh das nicht wirklich gut
Und Html5 ist gut
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3278
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Eigenes Design mit modernem Layout

Beitrag von Jasko »

HTML5 ist im kommen es hat viele Vorteiele, aber einen nachteil es ist noch nicht Standard wird es aber bestimmt werden.
OK wenn DU keinen Plan hast ist es besser mit altbewertem zu arbeiten, sprich HTML 4.01, da kann man viel auch be Google finden und mehr Leute kennen sich damit aus.

OK, machen wir es so.

Oeffne deinen Texteditor (Ich empfehle den hier runterzu laden, dann arbeiten wir im selben Programm -> Notepad++)

Mache einen neuen Ordner auf deinem Desktop (Arbeitsoberflaeche) nenne ihn wie du willst, dort hinein speicherst du zwei Datein ab aus dem geoeffneten Texteditor. Einmal die Datei index.html und einmal die Datei style.css wie hier auf den Bildern
Bild
Bild

Nun oeffnest du im Texteditor die Datei index.html und ueberschreibst das hier (Wichtig uebeschreiben nicht kopieren)

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>

</body>
</html>
Das waere der erste Schritt.

Hinweiss:
Der Bereich zwischen den Tags <head> und </head> (Tags sind die Teile in den Spitzen Klammern) nennen wir ab jetzt Header-Bereich, und den
Zwischen <body> und </body> Body oder Koerper bzw Body/Koerper-Bereich.
Benutzeravatar
Simon
Forengänger
Forengänger
Beiträge: 41
Registriert: So 22. Jul 2012, 16:51
Mein Vorname: Simon
Kontaktdaten:

Re: Eigenes Design mit modernem Layout

Beitrag von Simon »

Wir können aber auch html5 verwenden^^
Also hab mir Notepad++ runtergeladen
und die beiden Dateien neu gemacht und in einen ordner getan
aber wenn ich index.html mit dem editor öffne ist es leer
was soll ich da ersetzen ?
Soll ich das aus deinem vorherigem Post einfügen?
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3278
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Eigenes Design mit modernem Layout

Beitrag von Jasko »

Wenn Du HTML5 willst dan schreibst du es wie bei meinem zweiten post, und wenn DU html 4.01 willst schreibst du in diese Datei das aus meinem ditten post, das ganze sieht dan so aus:
Bild

oder Halt mit dem anderen Doctype bei HTML5, das ueberlasse ich jetzt dir.

MFG :X
Benutzeravatar
Simon
Forengänger
Forengänger
Beiträge: 41
Registriert: So 22. Jul 2012, 16:51
Mein Vorname: Simon
Kontaktdaten:

Re: Eigenes Design mit modernem Layout

Beitrag von Simon »

Also ich hab jetzt das aus deinem 2. Post gehelo (mit html5)
und jetzt?
Benutzeravatar
Jasko
Globaler Moderator
Globaler Moderator
Beiträge: 3278
Registriert: Di 21. Feb 2012, 06:59
Mein Vorname: Herr Jasmin ;)
Wohnort: Rheinland-Pfalz
Kontaktdaten:

Re: Eigenes Design mit modernem Layout

Beitrag von Jasko »

OK Das ist das Grundgeruesst jetzt machen wir ein Layout, dazu muessen wir die HTML Datei anpassen und auch die CSS Datei, na dan los gehts.

Zu erst machen wir einen Rahmen fuer den Inhalt, wie dieser Rahmen auszusehen hat und welche funktion dieser erfuehlt haengt davon ab wie wir das ganze im CSS definieren.

Also dazu musst du mir sagen wie Breit ungefaehr deine Seite sein soll, ich empfehle 1000pixel, wir machen den Hintergund des rahmens schwartz damit du den effekt gleich sehen kannst.

OK hier ist unser erster CSS Code:
Bild

Diesen Code schreibst du in die CSS Datei und speicherst diesen ab, dazu musst du die Sachen zwischen /* und */ nicht abschreiben, da diese nur Kommentare sind die dir die Bedeutung dieser Atributte zeigen.
Das was vor Rahmen steht einfach abschreiben, das ist noetig um in allen Browsern die selben Ausganskriterien zu schafen. Wenn du eine andere Farbe als schwartz haben willst aber nicht weisst welcher HEX-Code fuer diese Farbe verwendet wird, kannst Du HIER nachschauen oder in unserem Tool-Shop

nach dem du das gemacht hast oeffnest du die index.html Datei und fuehgst dort einen Div-Kontainer ein mit der ID rahmen

Das ganze sieht dan so aus:
Bild

Ok Der Div-Kontainer befindet sich im Body-Bereich und ist mit Kommentaren gekenzeichnet.
Im Header-Bereich befindet sich ein <link>Tag, dieser stellt eine verbindung zwischen HTML-Datei und CSS-Datei her, so das diese untereinander "komuniziren" koennen. Er hat zusetzlich drei Atributte, type, rel und href
Bei Type spezifizieren wir den MIME Type der Datei mit der verlinkt wird da es eine Textdatei mit CSS code ist sagen wir text/css und bei rel wird die Art der Verbindung angegeben (engl. relationship), in diesem Fall Stylesheet, und href Zeigt uns an wo sich dieses zu Verbindende Dokument befindet, da sie im selben Ordner sind geben wir nur den Namen der CSS Datei an.

Ok jetzt bist du dran.
Antworten

Zurück zu „Fragen zu HTML & Programmiersprachen“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast