Anzeige
Tutorialbeschreibung

Anfang: (5) HOMEPAGE: Homepage & HTML

Anfang: (5) HOMEPAGE: Homepage & HTML



Hier lernt ihr in nur 6 Tagen eine komplette Homepage zu erstellen. Teil 5 behandelt das Thema 'Homepage & HTML'


Wir sind jetzt wirklich in den letzten Zügen der Vollendung unserer Homepage, in Prozent sind wir zu 70% fertig, nach diesem Workshop sind wir bei 95%.
Denn was die größte Arbeit ausmachen wird, liegt nicht mehr bei mir, sondern bei euch. Schliesslich muss in euere Page ja Text, da kann ich euch also nicht helfen.

Fangen wir also an wo wir zuletzt aufgehört haben. Die Slices sind drin, alle Links sind korrekt verlinkt. Dann kann das speichern losgehen.
Also unter Datei auf ’Für Web speichern’ anklicken. Unten links, in dem Kasten in dem 100% steht auf Ganzes Bild umstellen.
Und jetzt bei Slice 01 anfangen, SHIFT gedrückt halten und nach der Zahlenreihenfolge jeden Slice anklicken.

Habt ihr die ganze Seite markiert, dann wählt als Bildausgabeformat PNG-8 128.
Das ist besser als jpg, außerdem ist das ein Format das Zukunft hat, weil es weniger Speicherplatz braucht und trotzdem bessere Formate als jpg erzielt. 

Bilder

Und nun die Page erstellen lassen, mit einem klick auf Speichern. Wählt euren Homepage-Ordner, erstellt einen neuen Unterordner mit dem Namen Page, öffnen und hineinspeichern.
Bei den Speicheroptionen auf HTML und Bilder gestellt lassen und den Dateiname nicht verändern.

Und jetzt befehle ich euch, sofort Photoshop zu schließen, den Page Ordner aufzusuchen und auf die HTML Datei doppelzuklicken…
Ist das nicht ein verdammt geiles Gefühl, so seine erste semi-professionelle Homepage zu sehen?

Jetzt brauchen wir zwei Dinge. Erstens den Internet Explorer (wir passen die Page mit dem dummen IE an, da der Firefox das eh korrekt darstellt), zweitens den normale Editor.
Also, wir machen auf unserer Homepage einen Rechtsklick, öffnen das ganze mit dem Internet Explorer und auch mit dem Editor.

Der Anfang des Quellcodes sieht dann so aus:

Bilder


Bilder


Bilder


Wie gesagt, ich möchte hier keinen kompletten HTML Kurs anbieten, falls euch die Befehle unklar sind, bitte auf http://www.selfhtml.teamone.de nachlesen!

Bilder

Bilder
 

Ihr seht ich habe meine original Homepage.html nicht bearbeitet, sondern nur eine Kopie davon. Das ist sicherer, falls mal ein fataler Fehler auftritt, hat man immer noch den original Quellcode.

Ich erstelle jetzt also eine Tabelle mit den gleichen Ausmaßen der Grafik. TD align=“left“ = der Text ist linksbündig, TD valign=“top“ = der Text beginnt ganz oben. Optional füge ich zwischen den </HEAD> und <BODY> Bereich noch ein kleines CSS-Skript ein.

Bilder



 

Bilder

Jetzt haben wir sozusagen die Seite schon fertig. Nun dieses HTML Dokument in allgemein.html umbenennen. Dieses nun kopieren und dann wieder mit IE und Editor öffnen, weil wir jetzt den Newsbereich mit einbauen.

Da müssen wir nur die entsprechende Grafik, Homepage_27, als Hintergrund in einer Tabelle festlegen und dann den Text drauf schreiben. Die entsprechende Zeile lässt sich leicht im Quellcode finden, und durch diese Zeilen ersetzen:


Bilder

Dieses HTML Dokument wird unsere Startseite, also in index.html umbenennen.

So und nun ist eure Fantasie gefragt, ihr solltet nun die allgemein.html kopieren, den Text nach euren Wünschen anpassen, und dann in die jeweilige Seite umbenennen, also zum Beispiel „faq.html“ usw…

Nach dieser Arbeit sieht mein Ordner so aus:

 

Bilder


Das war:
Workshop Teil 5.

eFoX

Alle Bilder und Grafiken die in diesem Tutorial verwendet werden sind geschützt und stehen somit unter dem Copyright des Autors. Die Verwendung von jeglichem Material in diesem Tutorial ist nur mit Erlaubnis des Autors gestattet.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Stephie83
  • 26.05.2011 - 13:25

Gut erklärt, trotz HTML Kenntnisse minimal sind, klappte die Umsetzung in wenigen Anläufen :-)

Portrait von yimmy
  • 18.04.2011 - 21:10

Freue mich auf den 6. Teil!

Portrait von Superking88
  • 15.03.2011 - 08:38

Sehr schön, immer weiter so

Portrait von TheDave252
  • 29.12.2010 - 19:10

wenn man ein Domain dafür haben will, zB www.beispiel.de muss man dafür dann zahlen, oder wie bekommt man es online?

Portrait von kedus
  • 15.12.2010 - 15:25

sehr gut beschriebenes tutorial, danke!

Portrait von CarpusEst
  • 06.12.2010 - 23:01

Super, hat mir echt weitergeholfen ;)

Portrait von lichtwerker
  • 01.12.2010 - 15:19

tolle Idee, freu mich schon aufs nachbauen

Portrait von amg94
  • 22.11.2010 - 17:14

Hey
einfach klasse erklärt, bei mir funktioniert alles, auch wenn ich jetzt ein paar Anläufe gebraucht habe.

Portrait von shaking
  • 09.11.2010 - 14:49

perfekter teil! :)

Portrait von sweetvelvetrose
  • 04.11.2010 - 12:13

Wow ! einfach super erklärt hab das ganze tutorial durch gelesen und auch schon teile nach gearbeitet ... entlich ist das ganze nicht mehr nur ein Buch mit 7 sigelen... selbst das mit dem coden hab ich einigermaßen verstanden ( bin absuluter laie !) und trau mich glaub ich jetzt entlich mal mehr zu machen als "nur" Baukasten homepage´s

ein dickes lob und ein ganz großes Danke !!!

Portrait von Tribehunter
  • 02.11.2010 - 21:28

Hammer erklärt! 5 Sterne von mir!

Portrait von _licht_zeichner_
  • 16.10.2010 - 14:20

Vielen Dank für deine Beschreibung, werde mich auch mal dran wagen.

Portrait von Mary_ru
  • 12.10.2010 - 09:59

echt suoer beschrieben... =) habs in meiner ausbildung nie so im Detail erklärt bekommen... vielen dank...

Portrait von SommerMond
  • 01.10.2010 - 13:51

Klasse tutorial reihe, nimmt einem echt die angst endlich mal selber was zu basteln und zu versuchen!

Portrait von Bens_Photoart
  • 14.09.2010 - 09:08

Super sache, werde ich gleich mal umsetzen

Portrait von PitPanda
  • 04.09.2010 - 19:09

leider schon etwas out of date. :(

Portrait von seventysixer
  • 27.08.2010 - 10:28

Sowas habe ich schon länger gesucht. Vielen Dank!

Portrait von a_ndi
  • 16.08.2010 - 15:13

super sache ;)
ich werd dann man mich an ps setzen und mir ein design machen, und dann coden :D

Portrait von katz
  • 15.08.2010 - 20:33

wow, das hat mir nun wirklich einen sehr guten Überblick verschafft und nimmt mir auf jeden Fall die Angst mich mit der Thematik auseinander zu setzen

Portrait von his_dudeness
  • 15.08.2010 - 16:04

hammer geil.... gut erklärt und mit ein wenig vorkenntnis gut zu meistern

x
×
×