Δημοσιεύτηκε: 02 Απρ 2012, 01:33
Καλησπέρα σε όλους θα προσπαθήσω παρακάτω να δώσω κάποια βασικά templates σχετικά με webdesign που θα περιέχουν κώδικα σε HTML+CSS/CSS2 αρχικά. Αν πάει καλά και υπάρχει ενδιαφέρον πιθανώς να προχωρήσω και σε κάτι παραπάνω όπως javascript κτλ. Να ενημερώσω πως ότι δείτε παρακάτω είναι καθαρά για εκμμάθηση και δεν προσπαθώ να δείξω κάτι(θα το καταλάβετε και αν δείτε τις εικόνες). Αρχικά θα υπάρχουν πολύ βασικά και χωρίς λεπτομέρεια καθώς δεν έχω χρόνο αυτή τη στιγμή μόλις καταφέρω και κάνω κάτι καλύτερο(θέμα χρόνου) θα προσπαθήσω να σας το δώσω. Ερωτήσεις-Απορίες-Προτάσεις είναι ΦΥΣΙΚΑ ΔΕΚΤΕΣ 
Καλή ανάγνωση...
Οργάνωση...
Για δικιά σας ευκολία αντιγράψτε τους παρακάτω κώδικες σε δυο αρχεία με ονόματα index.html & style.css. Το αρχείο style.css βάλτε το σε έναν φάκελο με όνομα style. Αν δεν το κάνετε αυτό θα πρέπει να τροποποιήσετε λίγο τον κώδικα.
Template - 000
index.html
style.css
Template - 001
index.html
style.css
Η εργασία υπάγεται στην άδεια Creative Commons Αναφορά-Μη εμπορική χρήση-Παρόμοια διανομή 3.0 Ελλάδα
Καλή ανάγνωση...Οργάνωση...
Για δικιά σας ευκολία αντιγράψτε τους παρακάτω κώδικες σε δυο αρχεία με ονόματα index.html & style.css. Το αρχείο style.css βάλτε το σε έναν φάκελο με όνομα style. Αν δεν το κάνετε αυτό θα πρέπει να τροποποιήσετε λίγο τον κώδικα.
Template - 000
index.html
- Κώδικας: Επιλογή όλων
<html>
<head>
<title>Personal webpage of cs091770-billys(ΤΖΙΒΑΡΑΣ ΒΑΣΙΛΕΙΟΣ)</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
</head>
<body>
<div id="header">
<div id="header_title">
<p> Title </p>
</div>
<div id="header_menubar">
<li > <a class="selected" href="index.html"> Page0 </a></li>
<li > <a class="selected" href="studying.html"> Page1 </a></li>
<li > <a class="selected" href="music.html"> Page2 </a></li>
<li > <a class="selected" href="support.html"> Page3 </a></li>
<li > <a class="selected" href="contact.html"> Page4 </a></li>
</div>
</div> <!-- end of header -->
<div id="content">
<p> Content </p>
</div> <!-- end of content -->
<div id="footer">
<p> Footer </p>
</div>
</body>
</html>
style.css
- Κώδικας: Επιλογή όλων
/*********************************************************************
------------------------- MY CSS ---------------------------
by vasilis tzivaras
*********************************************************************/
/* (body) => (header =>(header_title, header_menu), content, footer) */
/*************** MAIN CONTENT ***************/
body {
margin: 0px 0px 0px 0px;
background: black;
}
#header {
height: 200px;
background: blue;
/*background-image: url('../images/final_bg.png');*/
}
#header_title {
height: 150px;
margin: 0px 0px 0px 0px;
background: green;
text-align: center;
}
#header_menubar {
height: 50px;
margin: 15px 0px 15px 0px;;
text-align: center;
}
#content {
text-align: left;
width: 1000px;
overflow: hidden;
margin: 20px auto 0 auto;
padding: 10px 10px 10px 10px;
background: white;
}
/*
#footer {
height: 20px;
width: 1000px;
background: white;
font: 'Comic Sans MS';
text-align: center;
text-transform: uppercase;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}*/
#footer {
width: 100%;
height: 33px;
color: white;
font-family: 'Comic Sans MS';
text-align: center;
text-transform: uppercase;
padding: 10px 0 0 0;
margin: 5px 0 0 0;
background: white;
}
/***************** HEADERS ******************/
h2 {
font: normal 175% 'Comic Sans MS';
color: #1293EE;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
/***************** MENU BAR *****************/
ul {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
li {
display: inline;
}
.selected {
color: black;
text-decoration: none;
word-spacing: 20px;
font-family: 'Comic Sans MS';
font-size: 26px;
}
a {
text-decoration: none;
}
a:hover {
color: 0099FF;
}
Template - 001
index.html
- Κώδικας: Επιλογή όλων
<html>
<head>
<title>Personal webpage of cs091770-billys(ΤΖΙΒΑΡΑΣ ΒΑΣΙΛΕΙΟΣ)</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" title="style" />
</head>
<body>
<div id="header">
<div id="header_title">
<p> Title </p>
</div>
<div id="header_menubar">
<li > <a class="selected" href="index.html"> Page0 </a></li>
<li > <a class="selected" href="studying.html"> Page1 </a></li>
<li > <a class="selected" href="music.html"> Page2 </a></li>
<li > <a class="selected" href="support.html"> Page3 </a></li>
<li > <a class="selected" href="contact.html"> Page4 </a></li>
</div>
</div> <!-- end of header -->
<div id="main">
<div id="sidebar">
<p>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br>Sidebar</br></p>
</div>
<div id="content">
<p> Content</br> Content</br> Content</br> Content</br> Content</br> Content</br> Content</br> Content</br> Content </br>Content</p>
</div> <!-- end of content -->
</div>
<div id="footer">
<p> Footer </p>
</div>
</body>
</html>
style.css
- Κώδικας: Επιλογή όλων
/*********************************************************************
------------------------- MY CSS ---------------------------
by vasilis tzivaras
*********************************************************************/
/* (body) => (header =>(header_title, header_menu), content, footer) */
/*************** MAIN CONTENT ***************/
body {
background: black;
}
#header {
height: 200px;
background: blue;
/*background-image: url('../images/final_bg.png');*/
}
#header_title {
height: 150px;
background: green;
text-align: center;
}
#header_menubar {
height: 50px;
text-align: center;
}
#main {
background: purple;
margin: 0px auto 0px auto;
width: 1000px;
}
#sidebar {
width: 200px;
background: yellow;
float: left;
padding-top: 5px;
}
#content {
float: left
text-align: left;
width: 800px;
overflow: hidden;
padding: 5px 0px 0px 0px;
background: white;
}
#footer {
width: 1000px;
height: 33px;
color: black;
font-family: 'Comic Sans MS';
text-align: center;
text-transform: uppercase;
padding: 10px 0 0 0;
margin: 5px auto 0 auto;
background: white;
}
/***************** HEADERS ******************/
h2 {
font: normal 175% 'Comic Sans MS';
color: #1293EE;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;
}
/***************** MENU BAR *****************/
ul {
list-style-type: none;
width: 100%;
padding: 0;
margin: 0;
}
li {
display: inline;
}
.selected {
color: black;
text-decoration: none;
word-spacing: 20px;
font-family: 'Comic Sans MS';
font-size: 20px;
}
a {
text-decoration: none;
}
a:hover {
color: 0099FF;
}
Η εργασία υπάγεται στην άδεια Creative Commons Αναφορά-Μη εμπορική χρήση-Παρόμοια διανομή 3.0 Ελλάδα