Dicegame 1.0 – HTML Struktur
Dicegame 1.0 – HTML Struktur

Dicegame 1.0 – HTML Struktur

Projekt

In erster instanz geht es darum die HTML Seitenstruktur zu erstellen. Das geschieht indem ich die div-Container mit einplane.

Damit ich nicht den Überblick verliere und später den JavaScript Code mit HTML verbinden kann, erstelle ich für alle div-Container eindeutige ID’s. Dies bezeichnet man als das Box-Modell in HTML. Es ist die Grundlage für Responsive Design und man tut gut daran dies im Vorfeld mit zu bedenken.

Zur allgemeinen Planung und besseren Übersicht erstelle ich in MindNode eine projektbezogene neue Mindmap.

Diese Mindmap enthält aktuell nur die Planung des HTML Box-Modells. Ich werde später noch darauf zurück greifen wenn ich weitere Schritte plane.

Praktisch an MindNode finde ich die Aufgabenfunktion. Wie hier im Bild gezeigt kann ich die einzelnen Zweige die den div-Containern entsprechend erstellen und danach abhaken.

Der HTML-Code

<!DOCTYPE html>
<html>
<head>
	<title>Tumbling Dice 1.0</title>
</head>
<body>
	<div id="canvas">
		<div id="title">
		</div>
		<div id="playground">
<!-- ---------- Text blocks display here ---------- -->
			<div id="playground_message">
				<div id="playground_message_left">
				</div>
				<div id="playground_message_right">
				</div>
			</div>
<!-- ---------- This is the machine's area ---------- -->
			<div id="playground_machine">
				<div id="playground_machine_avatar">
				</div>
				<div id="playground_machine_dice">
				</div>
			</div>
<!-- ---------- This is the user's area ---------- -->
			<div id="playground_user">
				<div id="playground_user_avatar">
				</div>
				<div id="playground_user_dice">
				</div>
			</div>
<!-- ---------- This is the button's area ---------- -->
			<div id="playground_button">
				<div id="playground_button_left">
				</div>
				<div id="playground_button_right">
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Für diejenigen die nicht tagtäglich in Quellcode versinken habe ich das ganze noch visuell anhand des fertigen Ergebnisses dargestellt.

Ein Ergebnis im Browser ist bis hierhin leider nicht möglich, da nur eine weisse Seite erscheinen würde. Im nächsten Beitrag geht es um die Erstellung und Verknüpfung des CSS Stylesheets. Ich werde die einzelnen Container nach und nach einfärben um mir so die Arbeit zu erleichtern.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.