Hari ini saya ingin menceritakan bagaimana saya membuat design website untuk perniagaan online(jackets).Saya menggunakan text editor (notepad ++ ) dan menggunakan HTML dan CSS . Saya membuat empat design webpage untuk website perniagaan online iaitu HOME, PRODUCT,SIGN IN/SIGN UP dan ORDER. Saya juga meminta bantuan daripada guru dalam penghasilan website ini.
Pada mulanya,saya melakar design website ini pada kertas.Saya merujuk kepada beberapa website online untuk mendapatkan ilham*ingat nak melukis je ke nak dapatkan ilham*.Kemudian,saya mencari gambar yang saya nak untuk webpage tertentu.Saya mula menghasilkan webpage HOME,PRODUCT,SIGN IN/SIGN UP dan ORDER. *sape nak tengok hasil angkat tangan*
 |
| webpage (HOME) |
 |
| Webpage PRODUCT |
 |
| Webpage PRODUCT |
 |
| Webpage SIGN UP |
 |
| Webpage ORDER |
Dalam the making of j'cats website *macam buat filem pulak . Mula - mula saya hanya letakkan CSS pada navigation pane sahaja. CSS digunakan untuk mencantikkan coding HTML yang telah dibuat.
Di atas permintaan cikgu, saya belajar untuk membuat responsive website dari cikgu shariffuddin. Akhirnya, siaplah website j'cats untuk saya bentangkan pada cikgu.*saya pun tak percaya yang saya boleh menghasilkan website sebegini..hehehe.Saya akan memberi sedikit coding yang saya gunakan dalam penghasilan laman web ini.
coding untuk dropdown navigation
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color:
white;
text-align:
center;
padding:
14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display:
inline-block;
}
.dropdown-content {
display: none;
position:
absolute;
background-color: #f9f9f9;
min-width:
160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color:
black;
padding:
12px 16px;
text-decoration: none;
display:
block;
text-align:
left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display:
block;
}
</style>
</head>
<body>
<ul>
<li><a class="active"
href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a
href="#" class="dropbtn">Dropdown</a>
<div
class="dropdown-content">
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a
href="#">Link 3</a>
</div>
</li>
</ul>
</body>
</html>
Coding yang warna ungu adalah coding untuk CSS
Coding yang warna merah pula untuk HTML
credit http://www.w3schools.com/ #saya belajar dari sini cara pengunaan CSS#
Saya nak ucapkan terima kasih pada kawan - kawan yang support saya , cikgu - cikgu yang membantu saya dan keluarga saya yang memberi dorongan dan semangat kepada saya untuk terus menyiapkan tugasan ini
Comments
Post a Comment