Εργαστήριο 3: Πλαίσια, Πίνακες και CSS ως εργαλεία σχεδίασης (Page Layout)
Layouts
Layout 1
Layout 2
Layout 3
Άσκηση 1 (πλαίσια-Frames)
ΣΗΜΑΝΤΙΚΗ ΣΗΜΕΙΩΣΗ: Τα tags για τα frames θεωρούνται από τον οργανισμό W3C ως απηρχαιωμένα επειδή βλάπτουν την χρηστικότητα (usability). Διαβάσετε εδώ.
Διαβάστε τις ιδιότητες των frames (http://www.w3schools.com/tags/tag_frameset.asp)
Με βάση τα παραδείγματα φτιάξτε μία σελίδα με 3 πλαίσια έχοντας σαν βάση την σχεδίαση τoυ Layout 1
Μελετήστε τις ιδιότητες που σχετίζονται με τα πλαίσια:
FRAMEBORDER
FRAMESPACING
SCROLLING
NAME
COLS
Μελετήστε τις τιμές (_blank, _parent, _top και _self )που μπορεί να πάρει η ιδιότητα target (http://www.w3schools.com/tags/att_a_target.asp). Βάλτε μία λίστα 3 links (σε εξωτερικές ιστοσελίδες) στο frame 2 που όταν επιλέξει ο χρήστης να:
Αλλάζει το περιεχόμενο του frame 3
Αλλάζει το περιεχόμενο ολόκληρης της σελίδας
Εμφανίζεται σε νέo παράθυρο
Άσκηση 2 (Δημιουργία Layout με χρήση πινάκων)
ΣΗΜΑΝΤΙΚΗ ΣΗΜΕΙΩΣΗ: η χρήση πινάκων για Layout είναι ΚΑΚΗ ιδεα. Διαβάστε "When should you NOT use HTML tables?" εδώ https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics
Διαβάστε τις ιδιότητες των πινάκων (http://www.w3schools.com/html/html_tables.asp)
Προσπαθήστε να κάνετε τα Layout 1, 2 και 3
Άσκηση 3 (Δημιουργία Layout με χρήση DIV )
Νέο: Μελετήστε το παρακάτω tutorial για CSS positioning: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Επίσης μελετήστε:
http://www.vanseodesign.com/css/understanding-css-floats/ (Χρήση floats)
I) Προσπαθήστε να κάνετε τα Layout 1, 2 και 3 με την χρήση HTML κώδικα (relative positioning).
II) Προσπαθήστε να δημιουργήσετε τα Layout 1 και 3 με χρήση DIV και CSS.
Μελετήστε στο παρακάτω παράδειγμα (για το Layout 2) την CSS που περικλείεται μέσα στο <style></style> και χρησιμοποιείται στα <div>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Div Layout</title>
<style>
/* style for the "body" tag */
body {
font: 12px Arial,sans-serif;
margin: 0px;
}
/* style for the CSS class "container" */
.container {
background: white;
width: 100%;
}
/* style for the CSS class "header" */
.header {
background: #667BB4;
padding-top: 10px;
padding-bottom: 10px;
}
/* style for the "h1" tag used inside an element of the CSS class "header" */
.header h1 {
color: yellow;
font-size: 24px;
}
/* style for the CSS class "nav" */
.nav {
background: #DA251C;
width: 20%;
}
/* style for the CSS class "section" */
.section {
background: #BAB3D5;
width: 80%;
}
/* style that applies to both CSS classes "nav" and "section" */
.nav, .section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
/* style for the "h2" tag used inside an element of the CSS class "section" */
.section h2 {
color: white;
font-size: 20px;
}
/* style for the CSS class "footer" */
.footer {
background: #E67817;
text-align: center;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>1. Header Frame (header)</h1>
</div>
<div>
<div class="nav">
<p>2. Left Frame (nav)</p>
</div>
<div class="section">
<h2>4. Center Frame</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="footer">
<p>3. Footer Frame (footer)</p>
</div>
</div>
</body>
</html>
Δοκιμάστε το και με τα εργαλεία CodeLab ή TryIt.
Άσκηση 4 (Δημιουργία Layout με χρήση tags της HTML5)
Προσπαθήστε να δημιουργήσετε τα Layout 1 και 3 με χρήση DIV και CSS. Παράδειγμα για το Layout 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Div Layout</title>
<style>
/* style for the "body" tag */
body {
font: 12px Arial,sans-serif;
margin: 0px;
}
/* style for the CSS class "container" */
.container {
background: white;
width: 100%;
}
/* style for the HTML5 tag "header" */
header {
background: #667BB4;
padding-top: 10px;
padding-bottom: 10px;
}
/* style for the "h1" tag used inside an HTML5 "header" element */
header h1 {
color: yellow;
font-size: 24px;
}
/* style for the HTML5 tag "nav" */
nav {
background: #DA251C;
width: 20%;
}
/* style for the HTML5 tag "section" */
section {
background: #BAB3D5;
width: 80%;
}
/* style that applies to both HTML5 elements "nav" and "section" */
nav, section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
/* style for the "h2" tag used inside an HTML5 "section" element */
section h2 {
color: white;
font-size: 20px;
}
/* style for the HTML5 tag "footer" */
footer {
background: #E67817;
text-align: center;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>1. Header Frame (header)</h1>
</header>
<div>
<nav>
<p>2. Left Frame (nav)</p>
</nav>
<section>
<h2>4. Center Frame</h2>
<p>Lorem ipsum dolor sit amet</p>
</section>
</div>
<footer>
<p>3. Footer Frame (footer)</p>
</footer>
</div>
</body>
</html>