Anzeige
Tutorialbeschreibung

Anfang: (4) HOMEPAGE: Feinschliff

Anfang: (4) HOMEPAGE: Feinschliff



Hier lernt ihr in nur 6 Tagen eine komplette Homepage zu erstellen. Teil 4 behandelt das Thema 'Feinschliff'.


Die Homepage ist nun fast fertig, jetzt kommen wir ganz kurz zum Feinschliff. Mir fällt auf, dass manche Symmetrien noch nicht ganz stimmen. 

Bilder

 

Die URL oben muss genau an der Stelle beginnen, an der der Link "Home" beginnt, ebenso bei "FAQ" und "Kontakt". Außerdem muss der Text im Content genauso bündig beginnen wie der Link "Fragen & Antworten"… Nun gut, das ist einfache Arbeit. Kurz "V" drücken, um damit das Verschiebewerkzeug auszupacken und rüberschieben bzw. die Hilfslinien anpassen.

Weiterhin können wir jetzt anfangen die Homepage zu slicen. Ich sehe schon, das wird etwas verwirrend werden. Ich ziehe mir also immer Hilfslinien vom Lineal weg, bis mein Werk am Schluss so aussieht.

Bilder

Keine Panik, solange ihr seht wo welcher Slice für was nützlich ist, könnt ihr auch nicht durcheinander kommen. Und jetzt geht die Party richtig los. Nehmt das Slicewerkzeug und fahrt an den Hilfslinien entlang, genauer will ich das jetzt nicht schriftlich erklären, bitte schaut auf das Bild wie ich alles gesliced habe.

Bilder

Ich glaube so kann man eher nachverfolgen was ich gemacht habe. Immer von Oben, nach links arbeiten. Ich spreche kurz mal die wichtigsten Slices durch.

01: Wenn man hier draufdrückt soll man wieder auf der Startseite landen, also ändern wir die Sliceoptionen. Dazu Slicewerkzeug nehmen, auf 01 rechtsklicken und dann Sliceoptionen bearbeiten. Wir tragen jetzt nur in das Feld URL ein: index.html danach auf OK drücken.

03: FAQ >> faq.html
04: Impressum

04: Impressum >> impressum.html
08: Kontakt
>> contact.html
09: Produkte
09: Produkte >> products.html
10: Login
>> login.html
12: Home (ist Startseite) und die Startseite heißt immer >> index.html
13: Über Uns >> about.html
14: Lösungen >> products.html
15: Fragen & Antworten >> faq.html
16: Informationen >> info.html


Ihr merkt das ich mehrere Slices immer auf die gleiche URL zurückführe, so machen es die „großen“ Webseiten auch; im Endeffekt nur ein Marketingtrick. Außerdem sind meine Seiten grundsätzlich mit englischen Namen versehen. Das hat zwei Vorteile die ich aus dem Englischen übernehme:

 

a) Kleinschreibung
b) Keine Umlaute wie ä, ü, ö (Damit haben manche Browser Probleme)

Ich habe meine Slices außerdem so gezogen damit ich die Seite später in Frames zerlegen kann. Ich werde das aber der Einfachheit halber in diesem ganzen Workshop nicht erklären.

Deshalb ist diese Variante der Homepageerstellung nicht die allerbeste Methode, da wir später immer die gleiche Seite haben und dann immer die gleichen Bilder geladen werden müssen, bei Frames kann man alles einzeln kapseln. Wer jedoch schon mit Frames umgehen kann, der kann sich an dieser Grafik orientieren, die roten Linien sollen die Frames ergeben.

Bilder

 

 


 

Jedoch macht das für unsere Zwecke überhaupt nichts wenn wir keine Frames benutzen, schließlich wollen wir ja erst einmal lernen eine Page zu erstellen. Danach kann man sich noch mehr mit Frames befassen. Um euch damit aber nicht im Trockenen stehen zu lassen, werde ich dazu demnächst ein gesondertes Tutorial verfassen.

 

Das war:
Workshop Teil 4. 

Teil V: Homepage & HTML


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 mrasl
  • 26.02.2012 - 23:53

Danke für die hilfreichen Infos zum Einstieg...

Portrait von Stephie83
  • 26.05.2011 - 11:56

TOP! Danke dafür.... über Frames werde ich mich noch schlau machen :-)

Portrait von yimmy
  • 18.04.2011 - 21:06

5 von 5 sterne! Weiter so!

Portrait von Superking88
  • 15.03.2011 - 08:35

Wahnsinn hier fehlt ja nichts. super

Portrait von lichtwerker
  • 01.12.2010 - 15:18

tolle Idee, freu misch schon auf den nächsten Teil

Portrait von 53d47
  • 23.11.2010 - 20:40

gut erklärt danke :-)

Portrait von shaking
  • 09.11.2010 - 14:46

bin zufrieden, danke

Portrait von Tribehunter
  • 02.11.2010 - 21:28

Hammer erklärt! 5 Sterne von mir!

Portrait von _licht_zeichner_
Portrait von dbergsch
  • 14.10.2010 - 00:44

Super Tuturial! Vielen Dank!

Portrait von harbin
  • 02.10.2010 - 09:37

Vielen Dank auch für den sehr anschaulichen vierten Teil

Viele Grüße,
harbi

Portrait von scarred13
  • 27.09.2010 - 11:40

Genau wie die erste drei Teile... Gut.

Portrait von Bens_Photoart
  • 14.09.2010 - 07:42

Gefällt mir gut und hat mir wirklich geholfen.

Portrait von daunman
  • 06.08.2010 - 15:20

Deine anderen Workshop`s sehen für mich schon sher viel versprechend aus :)

Portrait von Graf_Zotti
  • 04.08.2010 - 22:53

nice work :) danke sehr

Portrait von Namelessness
  • 22.07.2010 - 11:15

Sehr schön gefällt mir! hab nu fast alle als PDF lohnt sich wirklich!

Portrait von sophie67
  • 15.07.2010 - 14:35

Vielen Dank für das Tutorial.

Portrait von Julibe
  • 04.06.2010 - 04:40

einfach gut der feinschliff,danke

Portrait von luv007
  • 18.05.2010 - 11:38

einfach gut der feinschliff,danke

Portrait von WNell
  • 15.05.2010 - 22:09

Der Feinschliff kommt vielleicht etwas zu kurz. Aber auch wieder gut erklärt.

x
×
×