Πρακτική σε mockups με HTML και CSS

Ας εξασκηθούμε στη δημιουργία mockups, γεμίζοντάς τα με περιεχόμενο. Ας φτιάξουμε, για παράδειγμα, ένα mockup σαν αυτό:

Αρχικά, ας φτιάξουμε τη βασική δομή του mockup:

<div class="wrapper">
	<header>
		...
	</header>
	<div class="container">
		<aside class="left">
			left
		</aside>
		<main>
			...
		</main>
		<aside class="right">
			right
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

Ας δούμε τώρα το header. Όπως φαίνεται στο δείγμα, στο header θα υπάρχει το όνομα του site και ένα menu. Τα blocks αυτά βρίσκονται στην ίδια απόσταση από την αριστερή άκρη. Λογικό σε αυτήν την περίπτωση είναι να τα ενώσουμε με έναν κοινό γονέα, μετακινώντας αυτά τα blocks ως ένα σύνολο:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename"></div>
			<nav></nav>
		</div>
	</header>
</div>

Ας προσθέσουμε το περιεχόμενο των blocks του header:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">home</a>
				<a href="#" class="active">blog</a>
				<a href="#">photos</a>
				<a href="#">about us</a>
				<a href="#">contacts</a>
			</nav>
		</div>
	</header>
</div>

Ας γράψουμε τώρα τα styles των blocks του header. Ταυτόχρονα, ας μην ορίσουμε το ύψος του header - ας αφήσουμε το περιεχόμενό του να το καθορίσει:

header {
	border: 1px solid black;
}
.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}

Ας γράψουμε κώδικα που δημιουργεί τρεις στήλες στο container. Ταυτόχρονα, ας μην ορίσουμε το ύψος του περιεχομένου - ας το καθορίσει το περιεχόμενό του:

.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}

Ας γράψουμε τώρα τα υπόλοιπα styles του mockup μας και ας πάρουμε τη λύση της άσκησής μας:

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">home</a>
				<a href="#" class="active">blog</a>
				<a href="#">photos</a>
				<a href="#">about us</a>
				<a href="#">contacts</a>
			</nav>
		</div>
	</header>
	<div class="container">
		<aside class="left">
			left
		</aside>
		<main>
			<h1>Our blog</h1>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
		</main>
		<aside class="right">
			right
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

* {
	box-sizing: border-box;
}

.wrapper {
	width: 1100px;
	margin: 30px auto;
	border: 1px solid black;
}
header {
	border: 1px solid black;
}
.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}
footer {
	padding: 30px 0;
	border: 1px solid black;
	text-align: center;
}

.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}
nav a {
	padding: 10px;
	color: blue;
	text-decoration: none;
	font: 15px Arial;
}
nav a:hover, nav a.active {
	color: red;
	text-decoration: underline;
}
main h1 {
	font: 20px "Times New Roman";
}
main p {
	margin: 10px 0;
	text-align: justify;
	font: 15px Arial;
}

Πρακτικές Ασκήσεις

Από τον ακόλουθο σύνδεσμο 1.zip κατεβάστε το mockup. Ανοίξτε το στο browser και αναπαράγετε τη σελίδα σύμφωνα με αυτό το δείγμα.

Από τον ακόλουθο σύνδεσμο 2.zip κατεβάστε το mockup. Ανοίξτε το στο browser και αναπαράγετε τη σελίδα σύμφωνα με αυτό το δείγμα.