Eine fertige Gestalung exakt umsetzen

Aufgabenstellung

Hallo,
wir haben einen kleinen Auftrag:
Die Webseite für eine Ferienwohnung soll gemacht werden.
Das Design für die drei Seiten ist fertig und vom Kunden freigegeben.
Die Vorlage, die Bilder, den Grundriss und die Texte findest du wie gewohnt auf dem Server.
Bitte schätz zu Beginn deiner Arbeit deine Arbeitszeit und prüfe die Zeit hinterher.
Deine Zeiten gibst Du über die Zeiterfassung ein.

Viele Grüße und frohes Schaffen


Fakten und Ressourcen

CODEBeschreibung
NiveauEinsteiger


PackVorlagen für die Gestaltung der drei Seiten, Bilder und Texte als Zip.

CODE-Pack-Ferienwohnung (3.4 MiB)



Keine Bildnachweise nötig. Fotos von Jens Röker.
Skript

Im kostenlosen CODE Skript sind umfangreiche ergänzende Informationen und die gesamten Tabellen der Übersichten zu den HTML Elementen und CSS Eigenschaften, Scripts, Layout und andere Aspekte des Webdesigns wie z.B. praktische Beispiele für Javascript, PHP und MySQL.

CODE-Skript 1617 (7.7 MiB)

Try-itsViele Einzelteile ergeben in der Summe das Ganze. Hier auf der Plattform sind die Elemente der Simple Single Page in den Editoren als Try-its zum Experimentieren verfügbar.
Elemente semantisch gliedern und selektieren
Geschickt mit CSS selektieren
Design mit CSS
Text mit CSS gestalten
Inhalte verlinken
Aufbau und Inhalt des <head>
Bilder
Hintergrund-Bilder
Positions
Float und Clear
Transition
Bewertung• Funktionstüchtige Webseite
• Vorlage der Gestaltung ist umgesetzt
• Kundenwünsche sind erfüllt
• Index und 2 Subseiten
• Arbeitszeit ist vorab geschätzt
• Abgabetermin ist eingehalten
• Beständige und eigenverantwortliche Mitarbeit
Beispiele für LösungenUmsetzungen von Mira und Paula der Webseite für die Ferienwohnung als ZIP.

Beispielhafte-Lösung-Ferienwohnung (4.9 MiB)


Empfohlene Software

Diese kostenlose Open Source Software hat sich vielfach bewährt.

SoftwareBedeutung
Sublime Text 3Kostenloser Editor für alle Betriebssysteme mit vielen praktischen Funktionen. Es gibt noch eine ganze Reihe anderer Editoren die auch zu Empfehlen sind.
FirebugBei der Arbeit mit Quellcode ist es sehr hilfreich zu prüfen was im Browser ankommt. Firebug zeigt den CODE für HTML, CSS und Javascript und bietet auch die Möglichkeit diesen temporär in der Vorschau zu ändern. Firebug ist eine kostenlose Erweiterung für den Firefox Browser. Es gibt Firebug auch für Chrome. Für Safari sind vergleichbare Webentwickler-Tools eingebaut.
FileZillaWenn eine Webseite auf einen Webserver hochgeladen werden muss, wird meist das File-Transfer-Protokoll (FTP) benutzt. Um z.B. Daten auf einen Server im Internet zu spielen benötigst Du eine FTP Software. Filezilla ist eine sehr gute und kostenlose Lösung für alle Betriebssysteme. Mit dem FTP Programm lassen sich auch Lese- und Schreibrechte festlegen. Ebenso andere Sicherheitsaspekte wie .htaccess insofern dies nicht über den Dienst des Webserver gesteuert wird.
Adobe Photoshop

Gimp
Wer Adobe Photoshop zur Verfügung hat, der benutzt natürlich den weltweiten Branchen-Standard für Bildbearbeitung. Lösbar sind die meisten einfachen Anforderungen allerdings auch mit dem kostenlosen Gimp. In der Arnold-Bode-Schule arbeiten wir aus professionellen Gründen mit Adobe und haben das auf jedem Computer.
Vorlage

Die Musterlösungen von Mira und Paula setzen die Gestaltung der Vorlage sehr gut um. Oben ist die Vorlage der Startseite zu sehen, sie ist im CODE Pack enthalten. Unten ist die fertige Webseite von Mira.

LS03

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit